From 2b116d90d94c22f75bb33ea3eac33696ff25c828 Mon Sep 17 00:00:00 2001 From: Rachel Whitton Date: Wed, 27 Sep 2023 16:42:03 -0500 Subject: [PATCH 1/4] Fix separate search results page --- src/layout/SearchBar/index.js | 2 +- src/pages/search.js | 95 ++++++++++++++++++++++++----------- 2 files changed, 67 insertions(+), 30 deletions(-) diff --git a/src/layout/SearchBar/index.js b/src/layout/SearchBar/index.js index 4b479c6fc5..ca45d8b4ee 100644 --- a/src/layout/SearchBar/index.js +++ b/src/layout/SearchBar/index.js @@ -17,7 +17,7 @@ const SearchBar = ({ page }) => ( className="pds-spacing-pad-block-start-l pds-spacing-pad-block-end-2xl" > this.addSearchStuff(); + document.body.appendChild(addsearch_search_ui) + + + const addsearch_styles = document.createElement("script") // Loads the Addsearch JS blob from them + addsearch_styles.setAttribute( + "href", + `https://cdn.jsdelivr.net/npm/addsearch-search-ui@0.7/dist/addsearch-search-ui.min.css` + ) + addsearch_styles.setAttribute("defer", true) + addsearch_styles.setAttribute("rel", 'stylesheet') + + document.body.appendChild(addsearch_styles) - document.body.appendChild(script) - } + +} + addSearchStuff() { + var client = new AddSearchClient('a7b957b7a8f57f4cc544c54f289611c6'); + + + var searchui_conf = { + searchResultsPageUrl: 'search' + } + // Search UI instance + var searchui = new AddSearchUI(client, searchui_conf); + + // Add components + searchui.searchField({ + containerId: 'search', + searchAsYouType: true, + selectorToBind: '.pds-input-field__input', + ignoreSearchResultsPageUrl: true, + }); + searchui.searchResults({ + containerId: 'results' + }); + searchui.pagination({ + containerId: 'pagination' + }); + + // All components added. Start + searchui.start(); + + } render() { return ( @@ -43,13 +73,19 @@ class Search extends React.Component {
-

Search Results

+

Search Results:

-
+
+
+
+ +
+
@@ -60,4 +96,5 @@ class Search extends React.Component { } } + export default Search From 4681b7e9488568938ac023d394b49b77ed409b30 Mon Sep 17 00:00:00 2001 From: M Miller Date: Fri, 29 Sep 2023 16:13:37 -0700 Subject: [PATCH 2/4] First pass at search result page theme --- src/pages/search.js | 98 ++++++++++++++------------------ src/pages/styles/search.css | 109 ++++++++++++++++++++++++++++++++++++ 2 files changed, 150 insertions(+), 57 deletions(-) create mode 100644 src/pages/styles/search.css diff --git a/src/pages/search.js b/src/pages/search.js index 99e0443364..819d66ec52 100644 --- a/src/pages/search.js +++ b/src/pages/search.js @@ -4,8 +4,11 @@ import SEO from "../layout/seo" import { Container } from "@pantheon-systems/pds-toolkit-react" +import "./styles/search.css" + class Search extends React.Component { - componentDidMount() { //On page load... + componentDidMount() { + //On page load... const addsearch_js_client = document.createElement("script") // Loads the Addsearch JS blob from them addsearch_js_client.setAttribute( "src", @@ -14,87 +17,68 @@ class Search extends React.Component { addsearch_js_client.setAttribute("defer", true) document.body.appendChild(addsearch_js_client) - const addsearch_search_ui = document.createElement("script") // Loads the Addsearch JS blob from them addsearch_search_ui.setAttribute( "src", `https://cdn.jsdelivr.net/npm/addsearch-search-ui@0.7/dist/addsearch-search-ui.min.js` ) addsearch_search_ui.setAttribute("defer", true) - addsearch_search_ui.onload = () => this.addSearchStuff(); + addsearch_search_ui.onload = () => this.addSearchStuff() document.body.appendChild(addsearch_search_ui) - const addsearch_styles = document.createElement("script") // Loads the Addsearch JS blob from them addsearch_styles.setAttribute( "href", `https://cdn.jsdelivr.net/npm/addsearch-search-ui@0.7/dist/addsearch-search-ui.min.css` ) addsearch_styles.setAttribute("defer", true) - addsearch_styles.setAttribute("rel", 'stylesheet') + addsearch_styles.setAttribute("rel", "stylesheet") document.body.appendChild(addsearch_styles) - - -} - addSearchStuff() { - var client = new AddSearchClient('a7b957b7a8f57f4cc544c54f289611c6'); - - - var searchui_conf = { - searchResultsPageUrl: 'search' - } - // Search UI instance - var searchui = new AddSearchUI(client, searchui_conf); - - // Add components - searchui.searchField({ - containerId: 'search', - searchAsYouType: true, - selectorToBind: '.pds-input-field__input', - ignoreSearchResultsPageUrl: true, - }); - searchui.searchResults({ - containerId: 'results' - }); - searchui.pagination({ - containerId: 'pagination' - }); - - // All components added. Start - searchui.start(); - - } + } + addSearchStuff() { + var client = new AddSearchClient("a7b957b7a8f57f4cc544c54f289611c6") + + var searchui_conf = { + searchResultsPageUrl: "search", + } + // Search UI instance + var searchui = new AddSearchUI(client, searchui_conf) + + // Add components + searchui.searchField({ + containerId: "search", + searchAsYouType: true, + selectorToBind: ".pds-input-field__input", + ignoreSearchResultsPageUrl: true, + }) + searchui.searchResults({ + containerId: "results", + }) + searchui.pagination({ + containerId: "pagination", + }) + + // All components added. Start + searchui.start() + } render() { return ( - -
-
-

Search Results:

-
-
-
-
-
-
-
-
- -
- -
-
+
+ +
+

Search Results

-
- +
+ + +
) } } - export default Search diff --git a/src/pages/styles/search.css b/src/pages/styles/search.css new file mode 100644 index 0000000000..e2ff59ccab --- /dev/null +++ b/src/pages/styles/search.css @@ -0,0 +1,109 @@ +.number-of-results { + border-bottom: 1px solid var(--pds-color-border-default); + font-size: var(--pds-typography-size-m); + font-weight: var(--pds-typography-font-weight-semibold); + padding-block: var(--pds-spacing-l); +} + +.addsearch-searchresults-no-results h2 { + font-size: var(--pds-typography-size-m); + font-weight: var(--pds-typography-font-weight-regular); + padding-block: var(--pds-spacing-l); +} + +.addsearch-searchresults-no-results h2 em { + font-weight: var(--pds-typography-font-weight-semibold); +} + +/* Individual results */ +.search-results__items .hit { + line-height: var(--pds-typography-line-height-l); + padding-block: var(--pds-spacing-xl); +} + +.search-results__items .hit .category { + background-color: var(--pds-color-tag-4-background); + border-radius: var(--pds-border-radius-default); + color: var(--pds-color-tag-4-foreground); + display: inline-flex; + font-size: var(--pds-typography-size-s); + font-weight: var(--pds-typography-font-weight-semibold); + line-height: var(--pds-typography-line-height-s); + margin-block-start: var(--pds-spacing-m); + padding-block: var(--pds-spacing-4xs); + padding-inline: var(--pds-spacing-2xs); +} + +.search-results__items .hit img { + display: none; +} + +.search-results__items .hit h2, +.search-results__items .hit h3 { + line-height: 1; +} + +.search-results__items .hit h2 a, +.search-results__items .hit h3 a { + font-size: var(--pds-typography-size-l); + font-weight: var(--pds-typography-font-weight-semibold); + text-decoration: none; +} + +.search-results__items .hit h2 a:hover, +.search-results__items .hit h3 a:hover { + text-decoration: underline; +} + +.search-results__items .hit .highlight { + background-color: transparent; +} + +.search-results__items .hit .highlight em { + background-color: #fff1a9; + font-weight: var(--pds-typography-font-weight-semibold); + padding-inline: var(--pds-spacing-4xs); +} + +/* Pagination */ +.search-results__pager { + padding-block: var(--pds-spacing-m) var(--pds-spacing-4xl); +} + +.addsearch-pagination { + align-items: center; + color: var(--pds-color-text-default); + column-gap: var(--pds-spacing-3xs); + display: flex; + font-family: var(--pds-typography-font-default); + font-weight: var(--pds-typography-font-weight-semibold); + justify-content: center; + list-style-type: none; +} + +.addsearch-pagination button { + align-items: center; + border-radius: var(--pds-border-radius-default); + color: var(--pds-color-text-default); + display: flex; + font-weight: var(--pds-typography-font-weight-semibold); + justify-content: center; + line-height: 1; + min-width: var(--pds-spacing-2xl); + padding: var(--pds-spacing-2xs) 0; + text-decoration: none; + transition: var(--pds-animation-button-transition); +} + +.addsearch-pagination button:hover { + background-color: var(--pds-color-pager-background-hover); +} + +.addsearch-pagination button:focus-visible { + outline: 2px solid var(--pds-color-interactive-focus); +} + +.addsearch-pagination button[aria-current="true"] { + background-color: var(--pds-color-pager-background-active); + color: var(--pds-color-pager-foreground-active); +} From 1823888bbf46b08c48c75e67acc49e9d3886b991 Mon Sep 17 00:00:00 2001 From: M Miller Date: Sun, 1 Oct 2023 11:18:55 -0700 Subject: [PATCH 3/4] Finish search results pager --- src/pages/styles/search.css | 21 +++++++++++++++++++++ 1 file changed, 21 insertions(+) diff --git a/src/pages/styles/search.css b/src/pages/styles/search.css index e2ff59ccab..4aa2523b45 100644 --- a/src/pages/styles/search.css +++ b/src/pages/styles/search.css @@ -107,3 +107,24 @@ background-color: var(--pds-color-pager-background-active); color: var(--pds-color-pager-foreground-active); } + +/* Hack to add previous/next icons from PDS. */ +/* TODO: Remove if this can be configured in Addsearch instead */ +.addsearch-pagination button[data-page="previous"], +.addsearch-pagination button[data-page="next"] { + color: transparent; + padding-block-end: var(--pds-spacing-4xs); +} + +.addsearch-pagination button[data-page="previous"]:before, +.addsearch-pagination button[data-page="next"]:before { + padding-inline-start: var(--pds-spacing-2xs); +} + +.addsearch-pagination button[data-page="previous"]:before { + content: url('data:image/svg+xml;utf8,'); +} + +.addsearch-pagination button[data-page="next"]:before { + content: url('data:image/svg+xml;utf8,'); +} From e7d4fae2871efe7bd69e72fecb7d6530185072ec Mon Sep 17 00:00:00 2001 From: M Miller Date: Sun, 1 Oct 2023 19:00:15 -0700 Subject: [PATCH 4/4] Update search.css Styles for if/when number-of-results becomes an h2 --- src/pages/styles/search.css | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/pages/styles/search.css b/src/pages/styles/search.css index 4aa2523b45..6f5dc02fde 100644 --- a/src/pages/styles/search.css +++ b/src/pages/styles/search.css @@ -5,7 +5,9 @@ padding-block: var(--pds-spacing-l); } -.addsearch-searchresults-no-results h2 { +.addsearch-searchresults-no-results h2, +.addsearch-searchresults .number-of-results, +.addsearch-searchresults .number-of-results h2 { font-size: var(--pds-typography-size-m); font-weight: var(--pds-typography-font-weight-regular); padding-block: var(--pds-spacing-l);