<section class="search-results" data-module="search-results" data-search-query-key="query" data-sort-query-key="sort" data-page-query-key="page" data-endpoint="https://www.haemonetics.com/search?json=true" data-results-per-page="10" data-labels="{"heading":"Search Results","copy":"Perform a search to see some results","summary":"Your search for \"{query}\" provided {count} result(s)","suggestion":"Did you mean: {keyword}","searchPlaceholder":"Search term","searchSubmit":"Perform search","searchClear":"Clear","info":"Showing {from} - {to} of {total} results","sort":"Sort","noResultsRtf":"No results found, please refine your search","prev":"Previous page","next":"Next page"}" data-results-keys="{"items":"results","totalItems":"resultsCount","suggestion":"resultsSuggestion","id":"id","description":"description","heading":"header","url":"url"}" data-sort-options="[{"value":"relevance","label":"Sort by Relevance"},{"value":"date","label":"Sort by Date"},{"value":"az","label":"Sort A-Z"},{"value":"za","label":"Sort Z-A"}]">
</section>
<section class="search-results" data-module="search-results" data-search-query-key="{{searchQueryKey}}"
data-sort-query-key="{{sortQueryKey}}" data-page-query-key="{{pageQueryKey}}" data-endpoint="{{endpoint}}"
data-results-per-page="{{resultsPerPage}}" data-labels="{{labels}}" data-results-keys="{{resultsKeys}}"
data-sort-options="{{sortOptions}}">
</section>
{
"endpoint": "https://www.haemonetics.com/search?json=true",
"searchQueryKey": "query",
"sortQueryKey": "sort",
"pageQueryKey": "page",
"resultsPerPage": 10,
"labels": "{\"heading\":\"Search Results\",\"copy\":\"Perform a search to see some results\",\"summary\":\"Your search for \\\"{query}\\\" provided {count} result(s)\",\"suggestion\":\"Did you mean: {keyword}\",\"searchPlaceholder\":\"Search term\",\"searchSubmit\":\"Perform search\",\"searchClear\":\"Clear\",\"info\":\"Showing {from} - {to} of {total} results\",\"sort\":\"Sort\",\"noResultsRtf\":\"No results found, please refine your search\",\"prev\":\"Previous page\",\"next\":\"Next page\"}",
"resultsKeys": "{\"items\":\"results\",\"totalItems\":\"resultsCount\",\"suggestion\":\"resultsSuggestion\",\"id\":\"id\",\"description\":\"description\",\"heading\":\"header\",\"url\":\"url\"}",
"sortOptions": "[{\"value\":\"relevance\",\"label\":\"Sort by Relevance\"},{\"value\":\"date\",\"label\":\"Sort by Date\"},{\"value\":\"az\",\"label\":\"Sort A-Z\"},{\"value\":\"za\",\"label\":\"Sort Z-A\"}]"
}
@import '../theme', 'variables', '../N-DYN-2-pagination/styles';
.search-results-masthead {
background-blend-mode: overlay, normal;
background-image: linear-gradient(
140deg,
rgba(255, 255, 255, 0.5),
rgba(0, 0, 0, 0.5) 100%
),
linear-gradient(to bottom, $masthead-background, $masthead-background);
padding-bottom: 61px;
padding-top: 40px;
@include mq(tablet) {
padding-top: 140px;
padding-bottom: 155px;
}
}
.search-results-masthead__inner {
position: relative;
max-width: 1326px;
margin-right: auto;
margin-left: auto;
}
.search-results-masthead__title {
font-size: 36px;
font-weight: 600;
line-height: 1.11;
color: $masthead-color;
margin-bottom: 10px;
@include mq(tablet) {
font-size: 60px;
line-height: 60px;
}
}
.search-results-masthead__copy {
font-size: 18px;
line-height: 1.78;
margin-bottom: 10px;
color: $masthead-color;
@include mq(tablet) {
margin-bottom: 30px;
}
}
.search-results-masthead__suggestion.search-results-masthead__suggestion.search-results-masthead__suggestion {
color: $masthead-color;
border-color: currentColor;
margin-bottom: 20px;
width: 100%;
text-align: center;
@include mq(tablet) {
width: auto;
min-height: 60px;
margin-bottom: 40px;
border-width: 2px;
}
}
.search-results-masthead__form {
background-color: $masthead-color;
position: relative;
}
.search-results-masthead__input {
background: none;
border: 0;
border-radius: 0;
color: $masthead-search-color;
width: 100%;
font-size: 18px;
height: 60px;
padding-left: 25px;
padding-right: 20px;
outline-color: map-get($theme-colors, 'primary');
@include mq(tablet) {
height: 100px;
padding-right: 47px;
padding-left: 52px;
}
&::placeholder {
color: $masthead-placeholder-color;
opacity: 0.5;
}
}
.search-results-masthead__clear {
color: map-get($theme-colors, 'critical');
position: absolute;
top: 50%;
right: 50px;
transform: translateY(-50%);
font-size: 18px;
@include mq(tablet) {
right: 100px;
}
&:hover,
&:focus {
color: map-get($theme-colors, 'primary');
}
}
.search-results-masthead__submit {
position: absolute;
top: 50%;
transform: translateY(-50%);
color: map-get($theme-colors, 'critical');
right: 20px;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
&:hover,
&:focus {
color: map-get($theme-colors, 'primary');
}
@include mq(tablet) {
right: 50px;
}
}
.search-results__content {
padding-top: 40px;
padding-bottom: 40px;
background-color: $content-background-color;
@include mq(tablet) {
padding-top: 104px;
padding-bottom: 104px;
}
.pager {
margin-top: 40px;
@include mq(tablet) {
margin-top: 82px;
}
}
}
.search-results__info-sort {
display: flex;
align-items: center;
flex-direction: column;
gap: 20px;
@include mq(tablet) {
flex-direction: row;
justify-content: space-between;
gap: 0;
}
}
.search-results__info {
font-size: 18px;
line-height: 1.78;
}
.search-results__sort-wrapper {
position: relative;
width: 100%;
@include mq(tablet) {
width: 250px;
}
&:before {
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMCIgaGVpZ2h0PSI2IiB2aWV3Qm94PSIwIDAgMTAgNiI+CiAgICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxnIGZpbGw9IiM0NTRENTEiPgogICAgICAgICAgICA8Zz4KICAgICAgICAgICAgICAgIDxnPgogICAgICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik04LjMxNSA0LjQ1TDQuNDg0IDAgMy4xODggMS4wOTkgNi41NDYgNSAzLjE4OCA4LjkwMSA0LjQ4NCAxMCA4LjMxNSA1LjU1IDguNzg3IDV6IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMTczNSAtODU3KSB0cmFuc2xhdGUoMTUxMCA4NDApIHRyYW5zbGF0ZSgyMjQgMTUpIHJvdGF0ZSg5MCA1Ljk4NyA1KSIvPgogICAgICAgICAgICAgICAgPC9nPgogICAgICAgICAgICA8L2c+CiAgICAgICAgPC9nPgogICAgPC9nPgo8L3N2Zz4K);
background-position: center;
background-repeat: no-repeat;
background-color: $masthead-color;
position: absolute;
content: '';
top: 1px;
bottom: 1px;
right: 1px;
z-index: 1;
width: 46px;
}
}
.search-results__sort {
height: 40px;
background-color: $masthead-color;
font-size: 14px;
width: 100%;
padding-right: 17px;
padding-left: 17px;
border-width: 1px;
border-radius: 4px;
outline: 0;
&:focus {
border-color: map-get($theme-colors, 'primary-light');
}
}
.search-results__items {
margin-top: 40px;
@include mq(tablet) {
margin-top: 53px;
}
}
.search-results-item__link {
border-bottom: 1px solid #959da0;
display: block;
padding: 30px 10px;
text-decoration: none;
@include mq(tablet) {
padding: 40px 50px;
}
.search-results-item:first-child & {
border-top: 1px solid #959da0;
}
}
.search-results-item__heading {
font-size: 21px;
font-weight: 600;
line-height: 1.33;
color: map-get($theme-colors, 'primary');
margin-bottom: 4px;
@include mq(tablet) {
font-size: 24px;
line-height: 32px;
}
.search-results-item__link:hover &,
.search-results-item__link:focus & {
text-decoration: underline;
}
}
.search-results-item__description {
color: map-get($theme-colors, 'primary-gray');
}
.spinner {
align-items: center;
background-color: rgba(255, 255, 255, 0.8);
bottom: 0;
display: flex;
justify-content: center;
left: 0;
position: fixed;
right: 0;
top: 0;
z-index: 1000;
}
.spinner__icon {
display: inline-block;
height: 80px;
position: relative;
width: 80px;
* {
animation: spin 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
border: 8px solid map-get($theme-colors, 'primary');
border-color: map-get($theme-colors, 'primary') transparent transparent;
border-radius: 50%;
display: block;
height: 64px;
margin: 8px;
position: absolute;
width: 64px;
&:nth-child(1) {
animation-delay: -0.45s;
}
&:nth-child(2) {
animation-delay: -0.3s;
}
&:nth-child(3) {
animation-delay: -0.15s;
}
}
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
$masthead-background: map-get($theme-colors, 'primary-dark') !default;
$masthead-color: #fff;
$masthead-placeholder-color: map-get($theme-colors, 'primary-dark') !default;
$masthead-search-color: map-get($theme-colors, 'primary-dark') !default;
$content-background-color: rgba(map-get($theme-colors, 'primary-light'), 0.05) !default;
$result-divider-color: #959da0;
A user can search the site using this module. The module accepts default search, for when the user comes from a search form from a different page.
Add the front-end-copmonent library to your project
yarn add @verndale/front-end-componentsImport the style to your main style file in your project
@import '../../node_modules/@verndale/front-end-components/lib/search-results/styles';Copy and paste to your project any of the markup in the alert variations - you can find the markup in the HTML tab.
The component will already have a default style/theme set, so it will work out of the box. The alert has a set of variables that may be overriden, or you may choose to just override the actual styles in your project. It is recommended to use the overrides if you can as it will be less code in your project.
Below is the list of variables you can override. You may also find these in the Assets tab under _variables.scss
$masthead-background
$masthead-color
$masthead-placeholder-color
$masthead-search-color
$content-background-color
$result-divider-color