Update to newest Design Sytem and switch Search pagination (#82)

* Update to newest Design Sytem and switch Search pagination * Fix pagination conditionals on dataset search
GetDKAN · May 3, 2022 · efc4c5b · efc4c5b
1 parent 98f5c56
commit efc4c5b
Show file tree

Hide file tree

Showing 8 changed files with 33,296 additions and 15,685 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@civicactions/cmsds-open-data-components",
-  "version": "1.10.1",
+  "version": "1.11.0-beta.2",
   "description": "Components for the open data catalog frontend using CMS Design System",
   "main": "lib/index.js",
   "scripts": {
@@ -19,9 +19,9 @@
   "author": "",
   "license": "GPL-3.0",
   "dependencies": {
-    "@civicactions/data-catalog-components": "2.0.0-beta.4",
-    "@civicactions/data-catalog-services": "1.4.0",
-    "@cmsgov/design-system": "~2.6.1",
+    "@civicactions/data-catalog-components": "2.0.0-beta.5",
+    "@civicactions/data-catalog-services": "1.5.0-alpha.1",
+    "@cmsgov/design-system": "~3.3.0",
     "prop-types": "^15.7.2",
     "qs": "^6.10.1",
     "react-datepicker": "^4.2.1",
@@ -69,19 +69,17 @@
     "babel-preset-stage-0": "^6.24.1",
     "core-js": "^2.6.5",
     "css-loader": "^2.1.0",
-    "eslint": "^6.2.1",
-    "eslint-config-airbnb": "^18.0.1",
-    "eslint-plugin-import": "^2.18.2",
-    "eslint-plugin-jsx-a11y": "^6.2.3",
-    "eslint-plugin-react": "^7.14.3",
-    "eslint-plugin-react-hooks": "^1.7.0",
     "jest": "26.6.0",
     "jest-axe": "^4.1.0",
     "prettier": "^2.5.1",
+    "react-scripts": "^4.0.3",
     "react-test-renderer": "^17.0.2",
     "sass-loader": "^7.1.0",
     "url-loader": "^1.1.2"
   },
+  "eslintConfig": {
+    "extends": "react-app"
+  },
   "peerDependencies": {
     "react": "^17.0.2",
     "react-dom": "^17.0.2"

diff --git a/src/components/DatasetSearchFacets/index.jsx b/src/components/DatasetSearchFacets/index.jsx
@@ -33,6 +33,7 @@ const DatasetSearchFacets = ({ title, facets, onclickFunction, selectedFacets, l
                   return (
                     <li key={f.name}>
                       <Choice
+                        className="ds-u-margin-y--1"
                         checked={isSelected(f.name, selectedFacets) > -1 ? true : false}
                         name={`facet_theme_${f.name}`}
                         type="checkbox"
@@ -64,7 +65,7 @@ DatasetSearchFacets.propTypes = {
     PropTypes.shape({
       type: PropTypes.string.isRequired,
       name: PropTypes.string.isRequired,
-      total: PropTypes.string.isRequired,
+      total: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
     })
   ).isRequired,
   onclickFunction: PropTypes.func.isRequired,

diff --git a/src/components/DatasetSearchListItem/index.jsx b/src/components/DatasetSearchListItem/index.jsx
@@ -20,7 +20,6 @@ const DatasetSearchListItem = ({ item, updateFacets }) => {
       truncateText="…"
       textElement={dangerousDescriptionElement}
       text={description}
-      appendTextTruncateChild={true}
       textTruncateChild=""
     />
   );

diff --git a/src/components/SubMenu/index.jsx b/src/components/SubMenu/index.jsx
@@ -5,23 +5,25 @@ import NavLink from '../NavLink';
 const SubMenu = ({ link, linkClasses, wrapLabel }) => {
   const [isExpanded, setIsExapanded] = useState(false);
   const innerHtml = wrapLabel ? <span>{link.label}</span> : link.label;
-  const menu = useRef(null);
+  const menu = useRef();
   useEffect(() => {
     function handleClickOutside(event) {
       if (menu.current && !menu.current.contains(event.target)) {
         setIsExapanded(false);
       }
     }
     function handleFocusOut(event) {
-      if (!menu.current.contains(event.relatedTarget)) {
+      if (menu.current && !menu.current.contains(event.relatedTarget)) {
         setIsExapanded(false);
       }
     }
     document.addEventListener('mousedown', handleClickOutside);
     menu.current.addEventListener('focusout', handleFocusOut);
     return () => {
       document.removeEventListener('mousedown', handleClickOutside);
-      menu.current.removeEventListener('focusout', handleFocusOut);
+      if (menu.current) {
+        menu.current.removeEventListener('focusout', handleFocusOut);
+      }
     };
   }, [menu, isExpanded]);
 
@@ -30,7 +32,7 @@ const SubMenu = ({ link, linkClasses, wrapLabel }) => {
       <Button
         size="small"
         variation="transparent"
-        inverse={true}
+        inversed={true}
         className={linkClasses}
         aria-haspopup="true"
         aria-expanded={isExpanded}

diff --git a/src/styles/scss/index.scss b/src/styles/scss/index.scss
@@ -8,3 +8,17 @@ main {
 .dc-c-word-break--all {
   word-break: break-all;
 }
+
+html a:focus {
+  background-color: transparent;
+}
+
+button.ds-c-dialog__close {
+  &:focus {
+    background-color: transparent;
+    outline: 3px solid #bd13b8;
+    box-shadow: none;
+    outline-offset: inherit;
+    border-radius: 0px;
+  }
+}
diff --git a/src/styles/scss/templates/header.scss b/src/styles/scss/templates/header.scss
@@ -89,6 +89,7 @@
   a:hover,
   a:focus,
   a:visited {
+    background-color: transparent;
     display: inline-block;
     color: $color-white;
     text-decoration: none;
@@ -245,6 +246,18 @@
 //   background-image: linear-gradient(90deg, $color-primary-darkest 10%,$color-primary 90%);
 // }
 
+header.dc-c-header .dc-c-main-navigation--search {
+  button {
+    &:focus {
+      background-color: transparent;
+      outline: 3px solid #bd13b8;
+      box-shadow: none;
+      outline-offset: inherit;
+      border-radius: 0px;
+    }
+  }
+}
+
 nav.dc-c-site-menu {
   .dc-c-header--links {
     padding: 0;
@@ -268,6 +281,19 @@ nav.dc-c-site-menu {
       span {
         border-bottom: 2px solid transparent;
       }
+      &:focus {
+        background-color: transparent;
+        outline: 3px solid #bd13b8;
+      }
+    }
+    button {
+      &:focus {
+        background-color: transparent;
+        outline: 3px solid #bd13b8;
+        box-shadow: none;
+        outline-offset: inherit;
+        border-radius: 0px;
+      }
     }
     > li:hover > button span,
     > li button:focus span,
@@ -316,6 +342,7 @@ li.has-submenu {
 .dc-c-site-title a {
   text-decoration: none;
   color: $color-white;
+  display: inline-block;
 }
 
 div.ds-c-dialog-wrap {
@@ -339,16 +366,6 @@ div.ds-c-dialog button {
   position: absolute;
   top: 24px;
   right: 24px;
-  &::after {
-    font-family: 'Font Awesome 5 Pro';
-    content: '\f00d';
-    height: 22px;
-    font-size: 20px;
-    line-height: 20px;
-    margin-left: 8px;
-    vertical-align: middle;
-    display: inline-block;
-  }
 }
 
 .dc-c-mobile-menu--search {

diff --git a/src/templates/DatasetSearch/index.jsx b/src/templates/DatasetSearch/index.jsx
@@ -1,21 +1,21 @@
 import React, { useEffect, useState } from 'react';
+import { useSearchParams, useLocation } from 'react-router-dom';
 import qs from 'qs';
 import { useSearchAPI, separateFacets } from '@civicactions/data-catalog-services';
-import { TextField, Dropdown, Spinner, Button, Alert } from '@cmsgov/design-system';
+import { TextField, Dropdown, Spinner, Button, Alert, Pagination } from '@cmsgov/design-system';
 import DatasetSearchListItem from '../../components/DatasetSearchListItem';
-import Pagination from '../../components/Pagination';
 import DatasetSearchFacets from '../../components/DatasetSearchFacets';
 
-function updateUrl(selectedFacets, fulltext, sort) {
-  let newParams = { ...selectedFacets };
-  if (fulltext) {
-    newParams.fulltext = fulltext;
-  }
-  if (sort) {
-    newParams.sort = sort;
-  }
-  return qs.stringify(newParams, { addQueryPrefix: true, encode: false });
-}
+// function updateUrl(selectedFacets, fulltext, sort) {
+//   let newParams = { ...selectedFacets };
+//   if (fulltext) {
+//     newParams.fulltext = fulltext;
+//   }
+//   if (sort) {
+//     newParams.sort = sort;
+//   }
+//   return qs.stringify(newParams, { addQueryPrefix: true, encode: false });
+// }
 
 export function selectedFacetsMessage(facets, alternateTitles) {
   let message = [];
@@ -28,23 +28,23 @@ export function selectedFacetsMessage(facets, alternateTitles) {
   return message.join(' & ');
 }
 
-export function transformUrlParamsToSearchObject(searchParams, facetList, sortOptions) {
+export function transformUrlParamsToSearchObject(searchParams, facetList, defaultSortOptions) {
   const params = qs.parse(searchParams, { ignoreQueryPrefix: true });
   const selectedFacets = {};
   facetList.forEach((facet) => {
     selectedFacets[facet] = params[facet] ? params[facet] : [];
   });
   return {
-    selectedFacets: selectedFacets,
+    page: params.page,
+    sort: !params.sort ? defaultSortOptions.defaultSort : params.sort,
+    sortOrder: !params.sortOrder ? defaultSortOptions.defaultOrder : params.sortOrder,
     fulltext: params.fulltext,
-    sort: !params.sort ? sortOptions.defaultSort : params.sort,
-    sortOrder: sortOptions.defaultOrder,
+    selectedFacets: selectedFacets,
   };
 }
 
 const DatasetSearch = ({
   rootUrl,
-  location,
   pageTitle,
   introText,
   fulltextLabel,
@@ -58,6 +58,10 @@ const DatasetSearch = ({
 }) => {
   const [currentResultNumbers, setCurrentResultNumbers] = useState(null);
   const [noResults, setNoResults] = useState(false);
+  const location = useLocation();
+  let [searchParams, setSearchParams] = useSearchParams();
+  const [filterText, setFilterText] = useState('');
+
   const {
     fulltext,
     selectedFacets,
@@ -83,24 +87,45 @@ const DatasetSearch = ({
     additionalParams
   );
   const { theme, keyword } = separateFacets(facets);
-  const [filterText, setFilterText] = useState('');
-  React.useEffect(() => {
+  function buildSearchParams(includePage) {
+    let newParams = {};
+    if (Number(page) !== 1 && includePage) {
+      newParams.page = page;
+    }
+    if (sort !== defaultSort.defaultSort) {
+      newParams.sort = sort;
+    }
+    if (sortOrder !== defaultSort.defaultOrder) {
+      newParams.sortOrder = sortOrder;
+    }
+    if (fulltext !== '') {
+      newParams.fulltext = fulltext;
+    }
+    if (Object.keys(selectedFacets).length) {
+      Object.keys(selectedFacets).forEach((key) => {
+        newParams[key] = selectedFacets[key];
+      });
+    }
+    return qs.stringify(newParams, { addQueryPrefix: includePage, encode: true });
+  }
+
+  useEffect(() => {
     if (fulltext !== filterText) {
       setFilterText(fulltext);
     }
   }, [fulltext]);
-  React.useEffect(() => {
-    const url = new URL(window.location);
-    const searchParams = updateUrl(selectedFacets, fulltext, sort);
-    window.history.pushState({}, '', `${url.origin}${url.pathname}${searchParams}`);
-  }, [fulltext, selectedFacets, sort]);
+
+  useEffect(() => {
+    setSearchParams(buildSearchParams(true));
+  }, [page, sort, sortOrder, fulltext, selectedFacets]);
+
   useEffect(() => {
     const baseNumber = Number(totalItems) > 0 ? 1 : 0;
     const startingNumber = baseNumber + (Number(pageSize) * Number(page) - Number(pageSize));
     const endingNumber = Number(pageSize) * Number(page);
     setCurrentResultNumbers({
       total: Number(totalItems),
-      startingNumber: startingNumber,
+      startingNumber: Number(totalItems) >= startingNumber ? startingNumber : 0,
       endingNumber: Number(totalItems) < endingNumber ? Number(totalItems) : endingNumber,
     });
     if (totalItems <= 0 && currentResultNumbers !== null) {
@@ -110,10 +135,6 @@ const DatasetSearch = ({
     }
   }, [totalItems, pageSize, page]);
 
-  function changePage(page) {
-    setPage(page);
-    window.scroll(0, 0);
-  }
   return (
     <section className="ds-l-container">
       <h1 className="dc-search-header ds-title ds-u-margin-y--3">{pageTitle}</h1>
@@ -173,16 +194,26 @@ const DatasetSearch = ({
           <ol className="dc-dataset-search-list ds-u-padding--0">
             {noResults && <Alert variation="error" heading="No results found." />}
             {items.map((item) => (
-              <li className="ds-u-padding--0">
+              <li className="ds-u-padding--0" key={item.identifier}>
                 <DatasetSearchListItem item={item} updateFacets={updateSelectedFacets} />
               </li>
             ))}
           </ol>
           {totalItems && (
             <Pagination
+              id="test-default"
+              currentPage={Number(page)}
               totalPages={Math.ceil(Number(totalItems) / pageSize)}
-              currentPage={page}
-              buttonAction={changePage}
+              onPageChange={(evt, page) => {
+                evt.preventDefault();
+                window.scroll(0, 0);
+                setPage(page);
+              }}
+              renderHref={(page) => {
+                const searchParams = buildSearchParams(false);
+                const includeAnd = searchParams ? '&' : '';
+                return `/datasets?page=${page}${includeAnd}${searchParams}`;
+              }}
             />
           )}
         </div>