WCMS-16975: Update to design system 8 (#144)

* WCMS-9479: Add responsive styling to filter UI

* Add styles to datepicker

* bump package.lock

* WCMS-16975: Update design system to 8.0.2

* bump package lock

* bump version

* Fix jest tests

* update package.lock

* Update based on design feedback

* Update class names

* Bump version number

* Fix date picker styling

* Remove unneccessary padding

* remove unneeded class name

* Missing margin fixes

* bump version #

* WCMS-17211: DS8 upgrade for data.medicaid

* bump version

* Footer spacing updates

* Missed footer padding

* Restore border to add filter UI

* Fix for upgrade to ds8

* WCMS-17459: Fix Dropdown render (#147)

* WCMS-17327: Fix rows per page display (#148)

* Add dropdown fix

* 2.3.0

.babelrc

@@ -1,6 +1,7 @@
 {
   "presets": [
     ["@babel/preset-env", { "targets": { "node": "current" } }],
-    "@babel/preset-react"
+    "@babel/preset-react",
+    "@babel/preset-typescript"
   ]
 }

.gitignore

@@ -5,4 +5,6 @@ dist
 .docz
 docs
 .DS_Store
-.parcel-cache
+.parcel-cache
+
+.vscode

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@civicactions/cmsds-open-data-components",
-  "version": "2.2.1",
+  "version": "2.3.0",
   "description": "Components for the open data catalog frontend using CMS Design System",
   "main": "dist/main.js",
   "source": "src/index.ts",
@@ -34,14 +34,16 @@
   "devDependencies": {
     "@babel/preset-env": "^7.22.5",
     "@babel/preset-react": "^7.22.5",
+    "@babel/preset-typescript": "^7.23.2",
     "@parcel/packager-ts": "^2.8.3",
     "@parcel/transformer-sass": "^2.8.3",
     "@parcel/transformer-typescript-types": "^2.8.3",
     "@storybook/react": "^7.0.22",
-    "@testing-library/dom": "^8.20.0",
-    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/dom": "^9.3.3",
+    "@testing-library/jest-dom": "^6.1.3",
     "@testing-library/react": "^14.0.0",
     "@testing-library/user-event": "^14.4.3",
+    "@types/jest": "^29.5.7",
     "core-js": "^3.27.2",
     "css-loader": "^6.7.3",
     "jest": "29.5.0",
@@ -61,12 +63,12 @@
     "extends": "react-app"
   },
   "peerDependencies": {
-    "@cmsgov/design-system": "^6.0.0",
+    "@cmsgov/design-system": "^8.0.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
   "files": [
     "lib",
     "dist"
   ]
-}
+}

src/components/DataTableDensity/datatabledensity.test.jsx

@@ -1,13 +1,13 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
-import '@testing-library/jest-dom/extend-expect';
+import '@testing-library/jest-dom';
 import DataTableDensity from './index';
 
 describe('<DataTableRowDetails />', () => {
   test('Renders 3 options', () => {
     render(<DataTableDensity setTablePadding={(p) => console.log(p)} />);
-    expect(screen.getByText('Tight')).toBeTruthy();
-    expect(screen.getByText('Normal')).toBeTruthy();
+    expect(screen.getAllByText('Tight')).toBeTruthy();
+    expect(screen.getAllByText('Normal')).toBeTruthy();
     expect(screen.getByText('Expanded')).toBeTruthy();
   });
 });

src/components/DataTableDensity/index.jsx

@@ -11,12 +11,11 @@ const DataTableDensity = ({ setTablePadding, tablePadding }) => {
           { label: 'Normal', value: 'ds-u-padding-y--1' },
           { label: 'Expanded', value: 'ds-u-padding-y--2' },
         ]}
-        size="small"
         label="Display density:"
         labelClassName="ds-u-margin-top--0"
         name="datatable_display_density"
         onChange={(e) => setTablePadding(e.target.value)}
-        defaultValue={'ds-u-padding-y--1'}
+        defaultValue={tablePadding}
       />
     </div>
   );

src/components/DataTablePageResults/DataTablePageResults.tsx

@@ -29,7 +29,7 @@ const DataTablePageResults = ({
 };
 
 DataTablePageResults.defaultProps = {
-  className: 'data-table-results',
+  className: 'data-table-results ds-u-margin-bottom--2',
 };
 
 DataTablePageResults.propTypes = {

src/components/DataTableRowChanger/datatablerowchanger.test.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import DataTableRowChanger from './index';
+
+describe('<DataTableRowChanger />', () => {
+  test('Renders 4 buttons by default', () => {
+    render(<DataTableRowChanger limit={25} setLimit={() => {return;}} />);
+    expect(screen.getAllByText(/Rows per page:/i)).toBeTruthy();
+  });
+
+  test('Renders 2 buttons when given an array of 2 rowOptions', () => {
+    render(<DataTableRowChanger limit={25} setLimit={() => {return;}} />);
+    expect(screen.getAllByText(/Rows per page:/i)).toBeTruthy();
+  });
+});

src/components/DataTableRowChanger/index.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Dropdown, DropdownValue, DropdownOption } from '@cmsgov/design-system';
+
+type DataTableRowChangerProps = {
+  limit: DropdownValue,
+  rowOptions: Array<Number>,
+  setLimit: Function,
+};
+
+const DataTableRowChanger = (props: DataTableRowChangerProps) => {
+  const {limit, rowOptions, setLimit} = props;
+  const rowOptionsFormatted = rowOptions.map((row: Number) => ({ label: row.toString(), value: row.toString() as DropdownValue } )) as Array<DropdownOption>;
+  return (
+    <div className="ds-u-display--flex">
+      <Dropdown
+        options={rowOptionsFormatted}
+        label="Rows per page:"
+        labelClassName="ds-u-margin-top--0"
+        name="datatable_rows_per_page"
+        onChange={(e) => setLimit(e.target.value)}
+        defaultValue={limit.toString()}
+      />
+    </div>
+  );
+};
+
+DataTableRowChanger.defaultProps = {
+  rowOptions: [10, 25, 50, 100],
+};
+
+DataTableRowChanger.propTypes = {
+  rowOptions: PropTypes.arrayOf(PropTypes.number),
+  setLimit: PropTypes.func.isRequired,
+  limit: PropTypes.number,
+};
+
+export default DataTableRowChanger;

src/components/DatasetAdditionalInformation/index.jsx

@@ -18,7 +18,7 @@ const DatasetAdditionalInformation = ({ datasetInfo, id, metadataMapping}) => {
   const rows = buildRows(metadataMapping, datasetInfo);
   return (
     <div className="dc-c-additional-info-table ds-u-margin-bottom--6">
-      <h2>Additional Information</h2>
+      <h2 className="ds-text-heading--2xl ds-u-margin-y--3">Additional Information</h2>
       <Table compact striped>
         <TableHead>
           <TableRow>

src/components/DatasetDownloads/datasetdownloads.test.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
-import '@testing-library/jest-dom/extend-expect';
+import '@testing-library/jest-dom';
 import DatasetDownloads from './index';
 
 const dataDictionaryURLFixture = "https://test.com/file.pdf";

src/components/DatasetDownloads/index.jsx

@@ -31,7 +31,7 @@ const DatasetDownloads = ({ dataDictionaryURL, dataDictionaryType, distributions
 
   return (
     <div className="ds-u-margin-bottom--3 ds-u-padding--2 ds-u-border ds-u-border--1 dc-c-dataset-downloads">
-      <h2 className="ds-u-color--primary ds-u-font-size--h3 ds-u-margin-top--0 ds-u-margin-bottom--2 ds-u-padding-bottom--2 ds-u-border ds-u-border-bottom--1">
+      <h2 className="ds-u-color--primary ds-u-font-size--xl ds-u-margin-top--0 ds-u-margin-bottom--2 ds-u-padding-bottom--2 ds-u-border ds-u-border-bottom--1">
         Downloads
       </h2>
       {(distributions.length || (dataDictionaryURL && dataDictionaryType)) &&

src/components/DatasetSearchFacets/dataset_search_facets.test.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render, screen, fireEvent } from '@testing-library/react';
-import '@testing-library/jest-dom/extend-expect';
+import '@testing-library/jest-dom';
 import DatasetSearchFacets from './index';
 import { isSelected } from './index';
 

src/components/DatasetSearchFacets/index.jsx

@@ -47,7 +47,7 @@ const DatasetSearchFacets = ({ title, facets, onclickFunction, selectedFacets, l
                 })}
               </ul>
             ) : (
-              <p className="ds-h5">No matching facets found.</p>
+              <p className="ds-text-heading--md">No matching facets found.</p>
             )}
           </>
         </AccordionItem>

src/components/DatasetSearchListItem/datasetsearchlistitem.test.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render, screen, within } from '@testing-library/react';
-import '@testing-library/jest-dom/extend-expect';
+import '@testing-library/jest-dom';
 import DatasetSearchListItem from './index';
 import { MemoryRouter } from 'react-router-dom';
 

src/components/DatasetSearchListItem/index.jsx

@@ -51,11 +51,11 @@ const DatasetSearchListItem = ({ item, updateFacets }) => {
       {truncatedDescription}
       <div>
         {keyword && (
-          <ul className="ds-u-padding--0 ds-u-display--flex ds-u-flex-wrap--wrap">
+          <ul className="ds-u-padding--0 ds-u-display--flex ds-u-flex-direction--row ds-u-flex-wrap--wrap">
             {keyword.map((k) => (
               <li key={k}>
                 <Badge
-                  className="ds-u-radius ds-u-fill--primary-alt-lightest ds-u-color--base ds-u-margin-right--1 ds-u-margin-bottom--2"
+                  className="ds-u-radius ds-u-fill--info-lightest ds-u-color--base ds-u-margin-right--1 ds-u-margin-bottom--2"
                   variation="info"
                 >
                   {k}

src/components/DatasetTags/dataset-tags.scss

@@ -1,4 +1,4 @@
 .dc-c-dataset-tags--tag {
   display: inline-block;
-  background: #{var(--color-primary-alt-lightest)};
+  background: #{var(--color-info-lightest)};
 }

src/components/DatasetTags/datasettags.test.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
-import '@testing-library/jest-dom/extend-expect';
+import '@testing-library/jest-dom';
 import DatasetTags from './index';
 import { MemoryRouter } from 'react-router-dom';
 

src/components/DatasetTags/index.jsx

@@ -6,15 +6,15 @@ import './dataset-tags.scss'
 const DatasetTags = ({ keywords }) => {
   return (
     <div className="dc-c-dataset-tags ds-u-margin-bottom--3 ds-u-padding--2 ds-u-border ds-u-border--1">
-      <h2 className="ds-u-color--primary ds-u-font-size--h3 ds-u-margin-top--0 ds-u-margin-bottom--2">
+      <h2 className="ds-u-color--primary ds-u-font-size--xl ds-u-margin-top--0 ds-u-margin-bottom--2">
         Tags
       </h2>
       {keywords &&
         keywords.map((k) => (
           <Link
             key={k.identifier}
             to={`/datasets?keyword[]=${k.data}`}
-            className="dc-c-dataset-tags--tag ds-u-color--base ds-u-font-size--small ds-u-text-decoration--none ds-u-margin-right--1 ds-u-margin-bottom--1 ds-u-padding-x--2 ds-u-padding-y--1 ds-u-radius"
+            className="dc-c-dataset-tags--tag ds-u-color--base ds-u-font-size--sm ds-u-text-decoration--none ds-u-margin-right--1 ds-u-margin-bottom--1 ds-u-padding-x--2 ds-u-padding-y--1 ds-u-radius"
           >
             {k.data}
           </Link>

src/components/DesktopHeader/DesktopHeader.jsx

@@ -39,7 +39,7 @@ const DesktopHeader = ({
               links={links.topnav}
               menuName="CMS Main Header"
               menuId="cmsheader"
-              menuClasses="ds-u-display--flex dc-c-header--links ds-u-font-size--small"
+              menuClasses="ds-u-display--flex ds-u-flex-direction--row dc-c-header--links ds-u-font-size--sm"
             />
           </div>
         </div>
@@ -48,7 +48,7 @@ const DesktopHeader = ({
         <div className="ds-l-container">
           <div className="ds-l-row ds-u-align-items--center">
             <div className="ds-u-margin-right--5 ds-u-padding-y--3 dc-c-site-title">
-              <NavLink className="ds-c-link--inverse ds-h1" to="/">
+              <NavLink className="ds-c-link--inverse ds-text-heading--3xl" to="/">
                 <span className="">{siteName}</span>
               </NavLink>
             </div>
@@ -57,7 +57,7 @@ const DesktopHeader = ({
               wrapLabel
               menuName="CMS Site Main Nav"
               menuId="site"
-              menuClasses="ds-u-display--flex dc-c-header--links ds-u-align-items--center"
+              menuClasses="ds-u-display--flex ds-u-flex-direction--row dc-c-header--links ds-u-align-items--center"
               linkClasses={linkClasses}
             />
             <div className="dc-c-main-navigation--search ds-u-margin-left--auto ds-u-lg-padding-left--1 ds-u-xl-padding-left--3">

src/components/MobileHeader/MobileHeader.jsx

@@ -1,7 +1,7 @@
 import React, { useState, useEffect, useRef } from 'react';
 import { useMediaQuery } from 'react-responsive';
 import { Button } from '@cmsgov/design-system';
-import { Link } from 'react-router-dom';
+import { NavLink } from 'react-router-dom';
 import SearchModal from '../SearchModal';
 import NavBar from '../NavBar/Navbar';
 import cmsLogo from '../../assets/images/CMSGovLogo-O.png';
@@ -104,7 +104,7 @@ const MobileHeader = ({
                 links={links.topnav}
                 menuName="CMS Main Header"
                 menuId="cmsheader"
-                menuClasses="ds-u-display--flex dc-c-header--links ds-u-font-size--small"
+                menuClasses="ds-u-display--flex ds-u-flex-direction--row dc-c-header--links ds-u-font-size--sm ds-u-margin-bottom--2"
               />
             </div>
           )}
@@ -121,9 +121,9 @@ const MobileHeader = ({
           {mobile ? <span className="ds-u-visibility--screen-reader">Menu</span> : <>Menu</>}
         </Button>
         <div className="ds-u-padding-y--3 dc-c-site-title">
-          <Link to="/">
-            <span className="ds-h1">{siteName}</span>
-          </Link>
+          <NavLink className="ds-c-link--inverse ds-text-heading--3xl" to="/">
+            <span className="">{siteName}</span>
+          </NavLink>
         </div>
         {includeSearch && (
           <div className="dc-c-mobile-menu--search">
@@ -176,7 +176,7 @@ const MobileHeader = ({
           menuName="Main Nav"
           menuId="site"
           menuClasses="dc-c-header--links dc-c-header--mobile-links"
-          linkClasses="ds-u-margin-left--1 ds-u-padding-bottom--2 ds-h5"
+          linkClasses="ds-u-margin-left--1 ds-u-padding-bottom--2 ds-text-heading--md"
         />
         {mobile && (
           <div className="cms-mobile-header--container">
@@ -186,7 +186,7 @@ const MobileHeader = ({
               menuName="CMS Main Header"
               menuId="cms-mobile-header"
               linkClasses="ds-u-margin-left--1 ds-u-margin-bottom--2"
-              menuClasses="dc-c-header--links ds-u-font-size--small"
+              menuClasses="dc-c-header--links ds-u-font-size--sm ds-u-margin-bottom--2"
             />
           </div>
         )}

src/components/NavLink/navlink.test.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
-import '@testing-library/jest-dom/extend-expect';
+import '@testing-library/jest-dom';
 import { axe, toHaveNoViolations } from 'jest-axe';
 import NavLink from './index';
 import { MemoryRouter } from 'react-router-dom';

src/components/ResourceConditionField/ResourceConditionalField.test.jsx

@@ -4,7 +4,7 @@
 
 import React from 'react';
 import { render, screen } from '@testing-library/react';
-import '@testing-library/jest-dom/extend-expect';
+import '@testing-library/jest-dom';
 import ResourceConditionalField from './index';
 
 describe('<ResourceConditionalField />', () => {