From 7463c1672b80848cb747cc82440d5b420060d249 Mon Sep 17 00:00:00 2001 From: Patrick Wolfert Date: Thu, 16 Sep 2021 11:52:52 -0700 Subject: [PATCH] Merge development into master for release 2.8.0 (#1143) * Update build script to include branch. (#1104) * [WNMGDS-986]Set up linting (#1102) * add precommit file * update stylelint disable rule * TSX linting * JSON linting * adding typescript to linting * adding husky install * update husky to v7 * [WNMGDS-977] Table typescript conversion (#1088) * Log console warning msg for data cell and non-space header cell only * Use React Context to replace prop drilling for _stackable prop * Add context * Add warningDisabled prop to prevent logging of console.warn on stacked table id/headers checks * Update tests * Update typedef file to add warningDisabled prop * Convert table component to typescript * Remove table typedef files * Remove table typedef files * Rename index file type to ts * TS type export update Co-authored-by: Scott Weber Co-authored-by: Sarah Co-authored-by: Anna Kammeyer * Bump prismjs from 1.23.0 to 1.24.0 in /packages/design-system-docs (#1072) Bumps [prismjs](https://github.com/PrismJS/prism) from 1.23.0 to 1.24.0. - [Release notes](https://github.com/PrismJS/prism/releases) - [Changelog](https://github.com/PrismJS/prism/blob/master/CHANGELOG.md) - [Commits](https://github.com/PrismJS/prism/compare/v1.23.0...v1.24.0) --- updated-dependencies: - dependency-name: prismjs dependency-type: direct:production ... Signed-off-by: dependabot[bot] Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * Bump prismjs from 1.23.0 to 1.24.0 in /packages/design-system-scripts (#1074) Bumps [prismjs](https://github.com/PrismJS/prism) from 1.23.0 to 1.24.0. - [Release notes](https://github.com/PrismJS/prism/releases) - [Changelog](https://github.com/PrismJS/prism/blob/master/CHANGELOG.md) - [Commits](https://github.com/PrismJS/prism/compare/v1.23.0...v1.24.0) --- updated-dependencies: - dependency-name: prismjs dependency-type: direct:production ... Signed-off-by: dependabot[bot] Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * [WNMGDS-1002] updating doc site to display TS prop types correctly (#1105) * updating doc site to display TS prop types correctly * alert prop updates * lint update * [NO-TICKET] Bugfix/typescript export updates (#1099) * autocomplete TS type update * badge TS export updates * form label TS type export update * spinner TS type export update * Patch/2.7.2 - Dev branch (#1101) * Implement gitflow, revert work for: bash script for testing, Badge TS, Spinner TS, Prism version bump, Alert TS definitions, Link styles, stackable Table, FormLabel TS, Button TS. * Implement gitflow, revert work for: bash script for testing, Badge TS, Spinner TS, Prism version bump, Alert TS definitions, Link styles, stackable Table, FormLabel TS, Button TS. (#1094) * Add export for DateFieldYearValue in . (#1095) * Export several types and interfaces from . (#1096) * Review TS types/interfaces for TextField components. (#1098) * alert and choice list typescript type export updates (#1097) * alert component TS definition updates * updated alert TS omit props * ChoiceList component TS definition updates * updated ChoiceProps to be exported * comment cleanup in alert * Patch/2.7.2 - Master branch (#1100) * Implement gitflow, revert work for: bash script for testing, Badge TS, Spinner TS, Prism version bump, Alert TS definitions, Link styles, stackable Table, FormLabel TS, Button TS. * Add export for DateFieldYearValue in . (#1095) * Export several types and interfaces from . (#1096) * Review TS types/interfaces for TextField components. (#1098) * alert and choice list typescript type export updates (#1097) * alert component TS definition updates * updated alert TS omit props * ChoiceList component TS definition updates * updated ChoiceProps to be exported * comment cleanup in alert Co-authored-by: Anna Scheuler Kammeyer <33579665+scheul93@users.noreply.github.com> * core-2.7.2 (#1103) * Revert "Implement gitflow, revert work for: bash script for testing, Badge TS, Spinner TS, Prism version bump, Alert TS definitions, Link styles, stackable Table, FormLabel TS, Button TS." This reverts commit b9bc6aa9cf9442a87ef341521b8c851d0ac32049. * Reverting ts reverts (#1107) * Implement gitflow, revert work for: bash script for testing, Badge TS, Spinner TS, Prism version bump, Alert TS definitions, Link styles, stackable Table, FormLabel TS, Button TS. * Revert "Implement gitflow, revert work for: bash script for testing, Badge TS, Spinner TS, Prism version bump, Alert TS definitions, Link styles, stackable Table, FormLabel TS, Button TS." This reverts commit b9bc6aa9cf9442a87ef341521b8c851d0ac32049. Co-authored-by: Anna Scheuler Kammeyer <33579665+scheul93@users.noreply.github.com> * WNMGDS-1008 aligning doc site footer links (#1109) * aligning doc site footer links * simplifying border 0 application * autocomplete aria attribute update (#1108) Co-authored-by: Scott Weber * [WNMGDS-916] Feature/secondary tertiary buttons (#1106) * Adding SCSS variables * Update example * add variations for secondary and tertiary * Add button line height and improve descriptions * add specific button line height variable * Add button font-weight variable * move order of styles to fix build * Remove focus if statements and update SCSS * organizing SCSS better * update SCSS button mapping * set bg on transparent buttons to be transparent * Update text decoration for disabled buttons * add inverse primary styles and clean up scss * add type to button * Bump path-parse from 1.0.6 to 1.0.7 (#1112) Bumps [path-parse](https://github.com/jbgutierrez/path-parse) from 1.0.6 to 1.0.7. - [Release notes](https://github.com/jbgutierrez/path-parse/releases) - [Commits](https://github.com/jbgutierrez/path-parse/commits/v1.0.7) --- updated-dependencies: - dependency-name: path-parse dependency-type: indirect ... Signed-off-by: dependabot[bot] Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * Add text-decoration to buttons (#1117) * [NO-TICKET] Remove getting started and guideline pages from backstop (#1110) * Remove getting started and guideline pages * update backstop to remove content pages * Bump jszip from 3.5.0 to 3.7.1 in /packages/design-system-scripts (#1113) Bumps [jszip](https://github.com/Stuk/jszip) from 3.5.0 to 3.7.1. - [Release notes](https://github.com/Stuk/jszip/releases) - [Changelog](https://github.com/Stuk/jszip/blob/master/CHANGES.md) - [Commits](https://github.com/Stuk/jszip/compare/v3.5.0...v3.7.1) --- updated-dependencies: - dependency-name: jszip dependency-type: indirect ... Signed-off-by: dependabot[bot] Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * Bump jszip from 3.5.0 to 3.7.1 (#1115) Bumps [jszip](https://github.com/Stuk/jszip) from 3.5.0 to 3.7.1. - [Release notes](https://github.com/Stuk/jszip/releases) - [Changelog](https://github.com/Stuk/jszip/blob/master/CHANGES.md) - [Commits](https://github.com/Stuk/jszip/compare/v3.5.0...v3.7.1) --- updated-dependencies: - dependency-name: jszip dependency-type: indirect ... Signed-off-by: dependabot[bot] Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * button ts type updates (#1118) * Revert dateFormatter to original type. (#1119) * WNMGDS-1064 - Fix text-underline bug (#1125) * Update to auto * kick off GHA * [NO-TICKET] Update chromedriver from version 91 to 93 (#1136) * Chore/branch alignment (#1137) * Implement gitflow, revert work for: bash script for testing, Badge TS, Spinner TS, Prism version bump, Alert TS definitions, Link styles, stackable Table, FormLabel TS, Button TS. (#1094) * Patch/2.7.2 - Master branch (#1100) * Implement gitflow, revert work for: bash script for testing, Badge TS, Spinner TS, Prism version bump, Alert TS definitions, Link styles, stackable Table, FormLabel TS, Button TS. * Add export for DateFieldYearValue in . (#1095) * Export several types and interfaces from . (#1096) * Review TS types/interfaces for TextField components. (#1098) * alert and choice list typescript type export updates (#1097) * alert component TS definition updates * updated alert TS omit props * ChoiceList component TS definition updates * updated ChoiceProps to be exported * comment cleanup in alert Co-authored-by: Anna Scheuler Kammeyer <33579665+scheul93@users.noreply.github.com> * core-2.7.2 (#1103) * Reverting ts reverts (#1107) * Implement gitflow, revert work for: bash script for testing, Badge TS, Spinner TS, Prism version bump, Alert TS definitions, Link styles, stackable Table, FormLabel TS, Button TS. * Revert "Implement gitflow, revert work for: bash script for testing, Badge TS, Spinner TS, Prism version bump, Alert TS definitions, Link styles, stackable Table, FormLabel TS, Button TS." This reverts commit b9bc6aa9cf9442a87ef341521b8c851d0ac32049. * Revert dateformatter in datefield interface to previous type. (#1120) * Release 2.7.3 (#1121) * core-2.7.2 * core-2.7.3 * WNMGDS-1064 - Fix text-underline bug (#1126) Summary ISSUE: Mobile view: Underlines in various texts seems to be broken DESCRIPTION: When PCII is open in mobile view, texts which are underlined, there seems to be line that is broken in pieces instead of continuous line. https://jira.cms.gov/browse/WNMGPCII-1515 Fixed changed value of text-underline-offset from 0 to auto where the browser chooses the appropriate offset for underlines. https://developer.mozilla.org/en-US/docs/Web/CSS/text-underline-offset How to test take a look at the demo url on an iOS device to ensure that the links are not looking broken http://design-system-demo.s3-website-us-east-1.amazonaws.com/WNMGDS-1064-text-underline-fix-master * Bugfix/master ts export updates (#1127) * core-2.7.2 * core-2.7.3 * button TS export updates * autocomplete ts export update * badge ts export update * formlabel ts export update * spinner ts export update * linting * core-2.7.4 * core-2.7.4 (#1128) Co-authored-by: Sarah Co-authored-by: Scott Weber * NO-TICKET/Windows is now able to build DS (#1132) * Implement gitflow, revert work for: bash script for testing, Badge TS, Spinner TS, Prism version bump, Alert TS definitions, Link styles, stackable Table, FormLabel TS, Button TS. (#1094) * Patch/2.7.2 - Master branch (#1100) * Implement gitflow, revert work for: bash script for testing, Badge TS, Spinner TS, Prism version bump, Alert TS definitions, Link styles, stackable Table, FormLabel TS, Button TS. * Add export for DateFieldYearValue in . (#1095) * Export several types and interfaces from . (#1096) * Review TS types/interfaces for TextField components. (#1098) * alert and choice list typescript type export updates (#1097) * alert component TS definition updates * updated alert TS omit props * ChoiceList component TS definition updates * updated ChoiceProps to be exported * comment cleanup in alert Co-authored-by: Anna Scheuler Kammeyer <33579665+scheul93@users.noreply.github.com> * core-2.7.2 (#1103) * Reverting ts reverts (#1107) * Implement gitflow, revert work for: bash script for testing, Badge TS, Spinner TS, Prism version bump, Alert TS definitions, Link styles, stackable Table, FormLabel TS, Button TS. * Revert "Implement gitflow, revert work for: bash script for testing, Badge TS, Spinner TS, Prism version bump, Alert TS definitions, Link styles, stackable Table, FormLabel TS, Button TS." This reverts commit b9bc6aa9cf9442a87ef341521b8c851d0ac32049. * Revert dateformatter in datefield interface to previous type. (#1120) * Release 2.7.3 (#1121) * core-2.7.2 * core-2.7.3 * WNMGDS-1064 - Fix text-underline bug (#1126) Summary ISSUE: Mobile view: Underlines in various texts seems to be broken DESCRIPTION: When PCII is open in mobile view, texts which are underlined, there seems to be line that is broken in pieces instead of continuous line. https://jira.cms.gov/browse/WNMGPCII-1515 Fixed changed value of text-underline-offset from 0 to auto where the browser chooses the appropriate offset for underlines. https://developer.mozilla.org/en-US/docs/Web/CSS/text-underline-offset How to test take a look at the demo url on an iOS device to ensure that the links are not looking broken http://design-system-demo.s3-website-us-east-1.amazonaws.com/WNMGDS-1064-text-underline-fix-master * Bugfix/master ts export updates (#1127) * core-2.7.2 * core-2.7.3 * button TS export updates * autocomplete ts export update * badge ts export update * formlabel ts export update * spinner ts export update * linting * core-2.7.4 (#1128) * Windows is now able to build DS * updated test to handle windows * handle subfolders as well Co-authored-by: Sarah Co-authored-by: Anna Scheuler Kammeyer <33579665+scheul93@users.noreply.github.com> Co-authored-by: Scott Weber * Revert #1106 and #1117 (secondary/tertiary buttons) (#1138) * Revert "Add text-decoration to buttons (#1117)" This reverts commit a95cc3773bbf70996d5374ba60264fb73af6ad58. * Revert "[WNMGDS-916] Feature/secondary tertiary buttons (#1106)" This reverts commit 159778a5bee0a36d8b4dcd1d75e94ec4ba0511fd. * [WNMGWINSHOP-934] Add more customization options to Autocomplete items (#1133) * Add children property to items for custom item rendering * Add custom className option for each item * Use custom class in new Autocomplete example to make it more realistic * Place the example CSS in its canonical home and make example even truer to life Using the now-available DS focus styles * Less outlandish custom styles for the example * Add ability to ignore certain items with regards to the result count in screen-reader messages * Keep a11y message from announcing twice * Be more clear about this comment * Duplicate AutocompleteItems documentation in a hand-crafted table I'd rather not do this, but we're limited by the current react-docgen setup. There's a precedent for it in `_HelpDrawer.docs.scss` * Just use Enzyme for the snapshots Because nowadays Enzyme objects serialized are actually really great * Fixed documentation mismatch for props * Fix children/className docs issue * adding transparent bg (#1140) * [WNMGWINSHOP-934] Revert one prop type change for Autocomplete (#1141) Revert change to `getA11yStatusMessage` type so we aren't enforcing strict compliance to our `AutocompleteItems` interface * [WNMGDS-843] updated spinner markup for improved accessibility (#1131) * updated spinner markup for improved accessibility * updated documentation examples * updating chromedriver to 93 for e2e tests * updated spinner in button example * WNMGDS 814/e2e tool update (#1130) * e2e test upgrades * cleanup * removing unit timeout extension * [NO-TICKET] Simplify analytics API (#1142) * Simplify underlying analytics functions to use in child design systems and add a new Analytics component that may or may not be helpful. Might delete it in a subsequent commit * Remove new `Analytics` component, as it will only be helpful for a subset of events * Revert Alert example changes that I was using for development * Simplified the analytics props for the Alert component Right now I don't think there is any use case for modifying the analytics events beyond overriding the dynamic content that is being sent to GA to remove PII. Therefore I'm simplifing the props to only take a scalar value for that specific overridden string. * Fix case mismatch in import (I previously tried changing the case of the directory and then realized that was a terrible idea.) * Remove debug logging * Fixed case mismatch * Fix case mismatch * Update Dialog and HelpDrawer to match, and update all tests * Expose `sendLinkEvent` as well * Merge master into development to resolve conflicts (#1144) * Implement gitflow, revert work for: bash script for testing, Badge TS, Spinner TS, Prism version bump, Alert TS definitions, Link styles, stackable Table, FormLabel TS, Button TS. (#1094) * Patch/2.7.2 - Master branch (#1100) * Implement gitflow, revert work for: bash script for testing, Badge TS, Spinner TS, Prism version bump, Alert TS definitions, Link styles, stackable Table, FormLabel TS, Button TS. * Add export for DateFieldYearValue in . (#1095) * Export several types and interfaces from . (#1096) * Review TS types/interfaces for TextField components. (#1098) * alert and choice list typescript type export updates (#1097) * alert component TS definition updates * updated alert TS omit props * ChoiceList component TS definition updates * updated ChoiceProps to be exported * comment cleanup in alert Co-authored-by: Anna Scheuler Kammeyer <33579665+scheul93@users.noreply.github.com> * core-2.7.2 (#1103) * Reverting ts reverts (#1107) * Implement gitflow, revert work for: bash script for testing, Badge TS, Spinner TS, Prism version bump, Alert TS definitions, Link styles, stackable Table, FormLabel TS, Button TS. * Revert "Implement gitflow, revert work for: bash script for testing, Badge TS, Spinner TS, Prism version bump, Alert TS definitions, Link styles, stackable Table, FormLabel TS, Button TS." This reverts commit b9bc6aa9cf9442a87ef341521b8c851d0ac32049. * Revert dateformatter in datefield interface to previous type. (#1120) * Release 2.7.3 (#1121) * core-2.7.2 * core-2.7.3 * WNMGDS-1064 - Fix text-underline bug (#1126) Summary ISSUE: Mobile view: Underlines in various texts seems to be broken DESCRIPTION: When PCII is open in mobile view, texts which are underlined, there seems to be line that is broken in pieces instead of continuous line. https://jira.cms.gov/browse/WNMGPCII-1515 Fixed changed value of text-underline-offset from 0 to auto where the browser chooses the appropriate offset for underlines. https://developer.mozilla.org/en-US/docs/Web/CSS/text-underline-offset How to test take a look at the demo url on an iOS device to ensure that the links are not looking broken http://design-system-demo.s3-website-us-east-1.amazonaws.com/WNMGDS-1064-text-underline-fix-master * Bugfix/master ts export updates (#1127) * core-2.7.2 * core-2.7.3 * button TS export updates * autocomplete ts export update * badge ts export update * formlabel ts export update * spinner ts export update * linting * core-2.7.4 (#1128) Co-authored-by: Sarah Co-authored-by: Anna Scheuler Kammeyer <33579665+scheul93@users.noreply.github.com> Co-authored-by: Scott Weber Co-authored-by: Sarah Co-authored-by: Scott Weber Co-authored-by: Ni Chia Co-authored-by: Anna Kammeyer Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Anna Scheuler Kammeyer <33579665+scheul93@users.noreply.github.com> Co-authored-by: David Carek --- .github/workflows/build.yml | 8 +- .husky/pre-commit | 4 + backstop.json | 439 +----------------- lerna.json | 4 +- package.json | 7 +- .../Autocomplete/Autocomplete.example.jsx | 52 ++- .../Autocomplete/_Autocomplete.docs.scss | 53 +++ .../components/Spinner/Spinner.example.jsx | 2 +- .../components/Spinner/_Spinner.docs.scss | 12 +- .../components/Spinner/spinner.example.html | 12 +- .../pages/components/Table/_Table.docs.scss | 12 +- .../src/scripts/components/Footer.jsx | 2 +- .../src/scripts/components/ReactPropDoc.jsx | 5 + .../src/styles/components/_example.scss | 9 + packages/design-system-docs/yarn.lock | 47 +- .../__tests__/processMarkdownPage.test.js | 4 +- .../docs/extractReactData/parseReactFile.js | 1 + .../docs/generatePages/processMarkdownPage.js | 4 +- .../helpers/e2e/assertNoAxeViolations.js | 38 +- .../helpers/e2e/constants.js | 2 +- .../jest/e2e.environment.js | 4 +- packages/design-system-scripts/package.json | 4 +- packages/design-system-scripts/yarn.lock | 53 +-- .../src/components/Alert/Alert.test.tsx | 37 +- .../src/components/Alert/Alert.tsx | 91 ++-- .../Autocomplete/Autocomplete.test.tsx | 55 +++ .../components/Autocomplete/Autocomplete.tsx | 60 ++- .../__snapshots__/Autocomplete.test.tsx.snap | 83 +++- .../src/components/Badge/Badge.tsx | 1 + .../src/components/Button/Button.tsx | 9 +- .../src/components/Dialog/Dialog.jsx | 91 ++-- .../src/components/Dialog/Dialog.test.jsx | 36 +- .../src/components/HelpDrawer/HelpDrawer.jsx | 91 ++-- .../components/HelpDrawer/HelpDrawer.test.jsx | 58 +-- .../src/components/Spinner/Spinner.test.tsx | 4 +- .../src/components/Spinner/Spinner.tsx | 9 +- .../Table/{Table.test.jsx => Table.test.tsx} | 0 .../components/Table/{Table.jsx => Table.tsx} | 181 ++++---- ...{TableBody.test.jsx => TableBody.test.tsx} | 0 .../Table/{TableBody.jsx => TableBody.tsx} | 21 +- ...Caption.test.jsx => TableCaption.test.tsx} | 0 .../{TableCaption.jsx => TableCaption.tsx} | 51 +- ...{TableCell.test.jsx => TableCell.test.tsx} | 0 .../Table/{TableCell.jsx => TableCell.tsx} | 117 ++--- .../src/components/Table/TableContext.js | 5 - .../src/components/Table/TableContext.ts | 13 + ...{TableHead.test.jsx => TableHead.test.tsx} | 0 .../Table/{TableHead.jsx => TableHead.tsx} | 23 +- .../{TableRow.test.jsx => TableRow.test.tsx} | 0 .../Table/{TableRow.jsx => TableRow.tsx} | 31 +- ...able.test.jsx.snap => Table.test.tsx.snap} | 68 ++- ....test.jsx.snap => TableBody.test.tsx.snap} | 0 ...st.jsx.snap => TableCaption.test.tsx.snap} | 0 ....test.jsx.snap => TableCell.test.tsx.snap} | 0 ....test.jsx.snap => TableHead.test.tsx.snap} | 0 ...w.test.jsx.snap => TableRow.test.tsx.snap} | 0 .../components/Table/{index.js => index.ts} | 0 .../analytics/SendAnalytics.test.ts | 32 +- .../src/components/analytics/SendAnalytics.ts | 72 +-- .../src/components/analytics/index.ts | 2 +- .../design-system/src/styles/base/_link.scss | 2 +- .../src/styles/components/_Button.scss | 11 +- .../design-system/src/types/Table/Table.d.ts | 60 --- .../src/types/Table/TableBody.d.ts | 12 - .../src/types/Table/TableCaption.d.ts | 28 -- .../src/types/Table/TableCell.d.ts | 64 --- .../src/types/Table/TableContext.d.ts | 5 - .../src/types/Table/TableHead.d.ts | 12 - .../src/types/Table/TableRow.d.ts | 16 - packages/design-system/src/types/index.d.ts | 7 +- packages/design-system/yarn.lock | 8 +- .../eslint-config-design-system/yarn.lock | 8 +- yarn.lock | 113 +---- 73 files changed, 877 insertions(+), 1488 deletions(-) create mode 100755 .husky/pre-commit rename packages/design-system/src/components/Table/{Table.test.jsx => Table.test.tsx} (100%) rename packages/design-system/src/components/Table/{Table.jsx => Table.tsx} (67%) rename packages/design-system/src/components/Table/{TableBody.test.jsx => TableBody.test.tsx} (100%) rename packages/design-system/src/components/Table/{TableBody.jsx => TableBody.tsx} (54%) rename packages/design-system/src/components/Table/{TableCaption.test.jsx => TableCaption.test.tsx} (100%) rename packages/design-system/src/components/Table/{TableCaption.jsx => TableCaption.tsx} (79%) rename packages/design-system/src/components/Table/{TableCell.test.jsx => TableCell.test.tsx} (100%) rename packages/design-system/src/components/Table/{TableCell.jsx => TableCell.tsx} (83%) delete mode 100644 packages/design-system/src/components/Table/TableContext.js create mode 100644 packages/design-system/src/components/Table/TableContext.ts rename packages/design-system/src/components/Table/{TableHead.test.jsx => TableHead.test.tsx} (100%) rename packages/design-system/src/components/Table/{TableHead.jsx => TableHead.tsx} (62%) rename packages/design-system/src/components/Table/{TableRow.test.jsx => TableRow.test.tsx} (100%) rename packages/design-system/src/components/Table/{TableRow.jsx => TableRow.tsx} (53%) rename packages/design-system/src/components/Table/__snapshots__/{Table.test.jsx.snap => Table.test.tsx.snap} (78%) rename packages/design-system/src/components/Table/__snapshots__/{TableBody.test.jsx.snap => TableBody.test.tsx.snap} (100%) rename packages/design-system/src/components/Table/__snapshots__/{TableCaption.test.jsx.snap => TableCaption.test.tsx.snap} (100%) rename packages/design-system/src/components/Table/__snapshots__/{TableCell.test.jsx.snap => TableCell.test.tsx.snap} (100%) rename packages/design-system/src/components/Table/__snapshots__/{TableHead.test.jsx.snap => TableHead.test.tsx.snap} (100%) rename packages/design-system/src/components/Table/__snapshots__/{TableRow.test.jsx.snap => TableRow.test.tsx.snap} (100%) rename packages/design-system/src/components/Table/{index.js => index.ts} (100%) delete mode 100644 packages/design-system/src/types/Table/Table.d.ts delete mode 100644 packages/design-system/src/types/Table/TableBody.d.ts delete mode 100644 packages/design-system/src/types/Table/TableCaption.d.ts delete mode 100644 packages/design-system/src/types/Table/TableCell.d.ts delete mode 100644 packages/design-system/src/types/Table/TableContext.d.ts delete mode 100644 packages/design-system/src/types/Table/TableHead.d.ts delete mode 100644 packages/design-system/src/types/Table/TableRow.d.ts diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml index af3855f0ea..24bdc1438d 100644 --- a/.github/workflows/build.yml +++ b/.github/workflows/build.yml @@ -5,9 +5,13 @@ name: build on: push: - branches: [ master ] + branches: + - master + - development pull_request: - branches: [ master ] + branches: + - master + - development jobs: build: diff --git a/.husky/pre-commit b/.husky/pre-commit new file mode 100755 index 0000000000..36af219892 --- /dev/null +++ b/.husky/pre-commit @@ -0,0 +1,4 @@ +#!/bin/sh +. "$(dirname "$0")/_/husky.sh" + +npx lint-staged diff --git a/backstop.json b/backstop.json index c5ce2b2751..ec1ce4d26b 100644 --- a/backstop.json +++ b/backstop.json @@ -19,102 +19,6 @@ } ], "scenarios": [ - { - "label": "CMSDS", - "referenceUrl": "https://design.cms.gov", - "url": "http://localhost:3000", - "removeSelectors": ["#frame"] - }, - { - "label": "CMSDS - Getting Started - Installation", - "referenceUrl": "https://design.cms.gov/startup/installation/", - "url": "http://localhost:3000/startup/installation/", - "removeSelectors": ["#frame"] - }, - { - "label": "CMSDS - Getting Started - Using Sass/CSS", - "referenceUrl": "https://design.cms.gov/startup/sass-and-css/", - "url": "http://localhost:3000/startup/sass-and-css/", - "removeSelectors": ["#frame"] - }, - { - "label": "CMSDS - Getting Started - Using components", - "referenceUrl": "https://design.cms.gov/startup/components/", - "url": "http://localhost:3000/startup/components/", - "removeSelectors": ["#frame"] - }, - { - "label": "CMSDS - Getting Started - Theming", - "referenceUrl": "https://design.cms.gov/startup/theming/", - "url": "http://localhost:3000/startup/theming/", - "removeSelectors": ["#frame"] - }, - { - "label": "CMSDS - Getting Started - Child Design Systems", - "referenceUrl": "https://design.cms.gov/startup/child-design-systems/", - "url": "http://localhost:3000/startup/child-design-systems/", - "removeSelectors": ["#frame"] - }, - { - "label": "CMSDS - Getting Started - Examples", - "referenceUrl": "https://design.cms.gov/startup/examples/", - "url": "http://localhost:3000/startup/examples/", - "removeSelectors": ["#frame"] - }, - { - "label": "CMSDS - Getting Started - Migrating to v2", - "referenceUrl": "https://design.cms.gov/startup/migrating-v2/", - "url": "http://localhost:3000/startup/migrating-v2/", - "removeSelectors": ["#frame"] - }, - { - "label": "CMSDS - Guidelines - Accessibility", - "referenceUrl": "https://design.cms.gov/guidelines/accessibility/", - "url": "http://localhost:3000/guidelines/accessibility/", - "removeSelectors": ["#frame"] - }, - { - "label": "CMSDS - Guidelines - Code conventions", - "referenceUrl": "https://design.cms.gov/guidelines/code-conventions/", - "url": "http://localhost:3000/guidelines/code-conventions/", - "removeSelectors": ["#frame"] - }, - { - "label": "CMSDS - Guidelines - Component maturity", - "referenceUrl": "https://design.cms.gov/guidelines/component-maturity/", - "url": "http://localhost:3000/guidelines/component-maturity/", - "removeSelectors": ["#frame"] - }, - { - "label": "CMSDS - Guidelines - Forms", - "referenceUrl": "https://design.cms.gov/guidelines/forms/", - "url": "http://localhost:3000/guidelines/forms/", - "removeSelectors": ["#frame"] - }, - { - "label": "CMSDS - Guidelines - Internationalization", - "referenceUrl": "https://design.cms.gov/guidelines/i18n/", - "url": "http://localhost:3000/guidelines/i18n/", - "removeSelectors": ["#frame"] - }, - { - "label": "CMSDS - Guidelines - Responsive design", - "referenceUrl": "https://design.cms.gov/guidelines/responsive/", - "url": "http://localhost:3000/guidelines/responsive/", - "removeSelectors": ["#frame"] - }, - { - "label": "CMSDS - Guidelines - Browser support", - "referenceUrl": "https://design.cms.gov/guidelines/browser-support/", - "url": "http://localhost:3000/guidelines/browser-support/", - "removeSelectors": ["#frame"] - }, - { - "label": "CMSDS - Styles - Base", - "referenceUrl": "https://design.cms.gov/styles/base/", - "url": "http://localhost:3000/styles/base/", - "removeSelectors": ["#frame"] - }, { "label": "CMSDS - Styles - Base - Default", "referenceUrl": "https://design.cms.gov/example/styles.base/", @@ -127,12 +31,6 @@ "url": "http://localhost:3000/example/styles.base..ds-base--inverse/", "removeSelectors": ["#frame"] }, - { - "label": "CMSDS - Styles - Color", - "referenceUrl": "https://design.cms.gov/styles/color/", - "url": "http://localhost:3000/styles/color/", - "removeSelectors": ["#frame"] - }, { "label": "CMSDS - Styles - Color - Primary", "referenceUrl": "https://design.cms.gov/example/styles.color.primary/", @@ -157,18 +55,6 @@ "url": "http://localhost:3000/example/styles.color.status/", "removeSelectors": ["#frame"] }, - { - "label": "CMSDS - Styles - Color - Primary", - "referenceUrl": "https://design.cms.gov/example/styles.color.primary/", - "url": "http://localhost:3000/example/styles.color.primary/", - "removeSelectors": ["#frame"] - }, - { - "label": "CMSDS - Styles - Icons", - "referenceUrl": "https://design.cms.gov/styles/icons/", - "url": "http://localhost:3000/styles/icons/", - "removeSelectors": ["#frame"] - }, { "label": "CMSDS - Styles - Icons - Alert", "referenceUrl": "https://design.cms.gov/example/styles.icons.alert/", @@ -187,24 +73,18 @@ "url": "http://localhost:3000/example/styles.icons.supplemental/", "removeSelectors": ["#frame"] }, - { - "label": "CMSDS - Styles - Spacing", - "referenceUrl": "https://design.cms.gov/styles/spacing/", - "url": "http://localhost:3000/styles/spacing/", - "removeSelectors": ["#frame"] - }, - { - "label": "CMSDS - Styles - Typography", - "referenceUrl": "https://design.cms.gov/styles/typography/", - "url": "http://localhost:3000/styles/typography/", - "removeSelectors": ["#frame"] - }, { "label": "CMSDS - Styles - Typography - Default", "referenceUrl": "https://design.cms.gov/example/styles.typography/", "url": "http://localhost:3000/example/styles.typography/", "removeSelectors": ["#frame"] }, + { + "label": "CMSDS - Styles - Typography - Links", + "referenceUrl": "https://design.cms.gov/example/styles.typography.body/", + "url": "http://localhost:3000/example/styles.typography.body/", + "removeSelectors": ["#frame"] + }, { "label": "CMSDS - Styles - Typography - Links", "referenceUrl": "https://design.cms.gov/example/styles.typography.links/", @@ -217,31 +97,12 @@ "url": "http://localhost:3000/example/styles.typography.responsive/", "removeSelectors": ["#frame"] }, - { - "label": "CMSDS - Styles - Typography - Default", - "referenceUrl": "https://design.cms.gov/example/styles.typography/", - "url": "http://localhost:3000/example/styles.typography/", - "removeSelectors": ["#frame"] - }, - { - "label": "CMSDS Utilities", - "referenceUrl": "https://design.cms.gov/utilities/overview", - "url": "http://localhost:3000/utilities/overview/", - "removeSelectors": ["#frame"] - }, { "label": "CMSDS Utilities - Default", "referenceUrl": "https://design.cms.gov/example/utilities.overview/", "url": "http://localhost:3000/example/utilities.overview//", "removeSelectors": ["#frame"] }, - - { - "label": "CMSDS - Utilities - Layout Grid", - "referenceUrl": "https://design.cms.gov/utilities/grid/", - "url": "http://localhost:3000/utilities/grid/", - "removeSelectors": ["#frame"] - }, { "label": "CMSDS - Utilities - Layout Grid - Default", "referenceUrl": "https://design.cms.gov/example/utilities.grid.default/", @@ -290,24 +151,12 @@ "url": "http://localhost:3000/example/utilities.grid.form-row/", "removeSelectors": ["#frame"] }, - { - "label": "CMSDS - Utilities - Background Color", - "referenceUrl": "https://design.cms.gov/utilities/background-color/", - "url": "http://localhost:3000/utilities/background-color/", - "removeSelectors": ["#frame"] - }, { "label": "CMSDS - Utilities - Background Color - Default", "referenceUrl": "https://design.cms.gov/example/utilities.background-color/", "url": "http://localhost:3000/example/utilities.background-color/", "removeSelectors": ["#frame"] }, - { - "label": "CMSDS - Utilities - Border", - "referenceUrl": "https://design.cms.gov/utilities/border/", - "url": "http://localhost:3000/utilities/border/", - "removeSelectors": ["#frame"] - }, { "label": "CMSDS - Utilities - Border - Default", "referenceUrl": "https://design.cms.gov/example/utilities.border/", @@ -320,24 +169,12 @@ "url": "http://localhost:3000/example/utilities.border.color/", "removeSelectors": ["#frame"] }, - { - "label": "CMSDS - Utilities - Border Radius", - "referenceUrl": "https://design.cms.gov/utilities/border-radius/", - "url": "http://localhost:3000/utilities/border-radius/", - "removeSelectors": ["#frame"] - }, { "label": "CMSDS - Utilities - Border Radius - Default", "referenceUrl": "https://design.cms.gov/example/utilities.border-radius/", "url": "http://localhost:3000/example/utilities.border-radius/", "removeSelectors": ["#frame"] }, - { - "label": "CMSDS - Utilities - Text color", - "referenceUrl": "https://design.cms.gov/utilities/text-color/", - "url": "http://localhost:3000/utilities/text-color/", - "removeSelectors": ["#frame"] - }, { "label": "CMSDS - Utilities - Text color - Default", "referenceUrl": "https://design.cms.gov/example/utilities.text-color/", @@ -350,12 +187,6 @@ "url": "http://localhost:3000/example/utilities.text-color.inherit/", "removeSelectors": ["#frame"] }, - { - "label": "CMSDS - Utilities - Display/Visibility", - "referenceUrl": "https://design.cms.gov/utilities/display-visibility/", - "url": "http://localhost:3000/utilities/display-visibility/", - "removeSelectors": ["#frame"] - }, { "label": "CMSDS - Utilities - Display/Visibility - Display", "referenceUrl": "https://design.cms.gov/example/utilities.display-visibility.display/", @@ -374,12 +205,6 @@ "url": "http://localhost:3000/example/utilities.display-visibility.responsive", "removeSelectors": ["#frame"] }, - { - "label": "CMSDS - Utilities - Flexbox", - "referenceUrl": "https://design.cms.gov/utilities/flexbox/", - "url": "http://localhost:3000/utilities/flexbox/", - "removeSelectors": ["#frame"] - }, { "label": "CMSDS - Utilities - Flexbox - Flex direction", "referenceUrl": "https://design.cms.gov/example/utilities.flexbox.flex-direction/", @@ -410,12 +235,6 @@ "url": "http://localhost:3000/example/utilities.flexbox.responsive", "removeSelectors": ["#frame"] }, - { - "label": "CMSDS - Utilities - Float", - "referenceUrl": "https://design.cms.gov/utilities/float/", - "url": "http://localhost:3000/utilities/float/", - "removeSelectors": ["#frame"] - }, { "label": "CMSDS - Utilities - Float - Default", "referenceUrl": "https://design.cms.gov/example/utilities.float/", @@ -434,24 +253,12 @@ "url": "http://localhost:3000/example/utilities.float.responsive/", "removeSelectors": ["#frame"] }, - { - "label": "CMSDS - Utilities - Font Family", - "referenceUrl": "https://design.cms.gov/utilities/font-family/", - "url": "http://localhost:3000/utilities/font-family/", - "removeSelectors": ["#frame"] - }, { "label": "CMSDS - Utilities - Font Family - Default", "referenceUrl": "https://design.cms.gov/example/utilities.font-family/", "url": "http://localhost:3000/example/utilities.font-family/", "removeSelectors": ["#frame"] }, - { - "label": "CMSDS - Utilities - Font Size", - "referenceUrl": "https://design.cms.gov/utilities/font-size/", - "url": "http://localhost:3000/utilities/font-size/", - "removeSelectors": ["#frame"] - }, { "label": "CMSDS - Utilities - Font Size - Default", "referenceUrl": "https://design.cms.gov/example/utilities.font-size/", @@ -464,48 +271,24 @@ "url": "http://localhost:3000/example/utilities.font-size.responsive/", "removeSelectors": ["#frame"] }, - { - "label": "CMSDS - Utilities - Font Style", - "referenceUrl": "https://design.cms.gov/utilities/font-style/", - "url": "http://localhost:3000/utilities/font-style/", - "removeSelectors": ["#frame"] - }, { "label": "CMSDS - Utilities - Font Style - Default", "referenceUrl": "https://design.cms.gov/example/utilities.font-style/", "url": "http://localhost:3000/example/utilities.font-style/", "removeSelectors": ["#frame"] }, - { - "label": "CMSDS - Utilities - Font Weight", - "referenceUrl": "https://design.cms.gov/utilities/font-weight/", - "url": "http://localhost:3000/utilities/font-weight/", - "removeSelectors": ["#frame"] - }, { "label": "CMSDS - Utilities - Font Weight - Default", "referenceUrl": "https://design.cms.gov/example/utilities.font-weight/", "url": "http://localhost:3000/example/utilities.font-weight/", "removeSelectors": ["#frame"] }, - { - "label": "CMSDS - Utilities - Line Height", - "referenceUrl": "https://design.cms.gov/utilities/line-height/", - "url": "http://localhost:3000/utilities/line-height/", - "removeSelectors": ["#frame"] - }, { "label": "CMSDS - Utilities - Line Height - Default", "referenceUrl": "https://design.cms.gov/example/utilities.line-height/", "url": "http://localhost:3000/example/utilities.line-height/", "removeSelectors": ["#frame"] }, - { - "label": "CMSDS - Utilities - Margin", - "referenceUrl": "https://design.cms.gov/utilities/margin/", - "url": "http://localhost:3000/utilities/margin/", - "removeSelectors": ["#frame"] - }, { "label": "CMSDS - Utilities - Margin - Default", "referenceUrl": "https://design.cms.gov/example/utilities.margin/", @@ -518,36 +301,18 @@ "url": "http://localhost:3000/example/utilities.margin.responsive/", "removeSelectors": ["#frame"] }, - { - "label": "CMSDS - Utilities - Measure", - "referenceUrl": "https://design.cms.gov/utilities/measure/", - "url": "http://localhost:3000/utilities/measure/", - "removeSelectors": ["#frame"] - }, { "label": "CMSDS - Utilities - Measure - Default", "referenceUrl": "https://design.cms.gov/example/utilities.measure/", "url": "http://localhost:3000/example/utilities.measure/", "removeSelectors": ["#frame"] }, - { - "label": "CMSDS - Utilities - Overflow", - "referenceUrl": "https://design.cms.gov/utilities/overflow/", - "url": "http://localhost:3000/utilities/overflow/", - "removeSelectors": ["#frame"] - }, { "label": "CMSDS - Utilities - Overflow - Default", "referenceUrl": "https://design.cms.gov/example/utilities.overflow/", "url": "http://localhost:3000/example/utilities.overflow/", "removeSelectors": ["#frame"] }, - { - "label": "CMSDS - Utilities - Padding", - "referenceUrl": "https://design.cms.gov/utilities/padding/", - "url": "http://localhost:3000/utilities/padding/", - "removeSelectors": ["#frame"] - }, { "label": "CMSDS - Utilities - Padding - Default", "referenceUrl": "https://design.cms.gov/example/utilities.padding/", @@ -560,12 +325,6 @@ "url": "http://localhost:3000/example/utilities.padding.responsive/", "removeSelectors": ["#frame"] }, - { - "label": "CMSDS - Utilities - Text Alignment", - "referenceUrl": "https://design.cms.gov/utilities/text-align/", - "url": "http://localhost:3000/utilities/text-align/", - "removeSelectors": ["#frame"] - }, { "label": "CMSDS - Utilities - Text Alignment - Default", "referenceUrl": "https://design.cms.gov/example/utilities.text-align/", @@ -578,72 +337,36 @@ "url": "http://localhost:3000/example/utilities.text-align.responsive/", "removeSelectors": ["#frame"] }, - { - "label": "CMSDS - Utilities - Text Decoration", - "referenceUrl": "https://design.cms.gov/utilities/text-decoration/", - "url": "http://localhost:3000/utilities/text-decoration/", - "removeSelectors": ["#frame"] - }, { "label": "CMSDS - Utilities - Text Decoration - Default", "referenceUrl": "https://design.cms.gov/example/utilities.text-decoration/", "url": "http://localhost:3000/example/utilities.text-decoration/", "removeSelectors": ["#frame"] }, - { - "label": "CMSDS - Utilities - Text Transform", - "referenceUrl": "https://design.cms.gov/utilities/text-transform/", - "url": "http://localhost:3000/utilities/text-transform/", - "removeSelectors": ["#frame"] - }, { "label": "CMSDS - Utilities - Text Transform - Default", "referenceUrl": "https://design.cms.gov/example/utilities.text-transform/", "url": "http://localhost:3000/example/utilities.text-transform/", "removeSelectors": ["#frame"] }, - { - "label": "CMSDS - Utilities - Truncate", - "referenceUrl": "https://design.cms.gov/utilities/truncate/", - "url": "http://localhost:3000/utilities/truncate/", - "removeSelectors": ["#frame"] - }, { "label": "CMSDS - Utilities - Truncate - Default", "referenceUrl": "https://design.cms.gov/example/utilities.truncate/", "url": "http://localhost:3000/example/utilities.truncate/", "removeSelectors": ["#frame"] }, - { - "label": "CMSDS - Utilities - Vertical Align", - "referenceUrl": "https://design.cms.gov/utilities/vertical-align/", - "url": "http://localhost:3000/utilities/vertical-align/", - "removeSelectors": ["#frame"] - }, { "label": "CMSDS - Utilities - Vertical Align - Default", "referenceUrl": "https://design.cms.gov/example/utilities.vertical-align/", "url": "http://localhost:3000/example/utilities.vertical-align/", "removeSelectors": ["#frame"] }, - { - "label": "CMSDS - Utilities - Word Break", - "referenceUrl": "https://design.cms.gov/utilities/word-break/", - "url": "http://localhost:3000/utilities/word-break/", - "removeSelectors": ["#frame"] - }, { "label": "CMSDS - Utilities - Word Break - Default", "referenceUrl": "https://design.cms.gov/example/utilities.word-break/", "url": "http://localhost:3000/example/utilities.word-break/", "removeSelectors": ["#frame"] }, - { - "label": "CMSDS - Components - Accordion", - "referenceUrl": "https://design.cms.gov/components/accordion/", - "url": "http://localhost:3000/components/accordion/", - "removeSelectors": ["#frame"] - }, { "label": "CMSDS - Components - Accordion - Default", "referenceUrl": "https://design.cms.gov/example/components.accordion/", @@ -656,12 +379,6 @@ "url": "http://localhost:3000/example/components.accordion.react/", "removeSelectors": ["#frame"] }, - { - "label": "CMSDS - Components - Alert", - "referenceUrl": "https://design.cms.gov/components/alert/", - "url": "http://localhost:3000/components/alert/", - "removeSelectors": ["#frame"] - }, { "label": "CMSDS - Components - Alert - Default", "referenceUrl": "https://design.cms.gov/example/components.alert/", @@ -680,24 +397,12 @@ "url": "http://localhost:3000/example/components.alert.react", "removeSelectors": ["#frame"] }, - { - "label": "CMSDS - Components - Autocomplete", - "referenceUrl": "https://design.cms.gov/components/autocomplete/", - "url": "http://localhost:3000/components/autocomplete/", - "removeSelectors": ["#frame"] - }, { "label": "CMSDS - Components - Autocomplete - React", "referenceUrl": "https://design.cms.gov/example/components.autocomplete.react/", "url": "http://localhost:3000/example/components.autocomplete.react/", "removeSelectors": ["#frame"] }, - { - "label": "CMSDS - Components - Badge", - "referenceUrl": "https://design.cms.gov/components/badge/", - "url": "http://localhost:3000/components/badge/", - "removeSelectors": ["#frame"] - }, { "label": "CMSDS - Components - Badge - Default", "referenceUrl": "https://design.cms.gov/example/components.badge/", @@ -710,12 +415,6 @@ "url": "http://localhost:3000/example/components.badge.react/", "removeSelectors": ["#frame"] }, - { - "label": "CMSDS - Components - Button", - "referenceUrl": "https://design.cms.gov/components/button/", - "url": "http://localhost:3000/components/button/", - "removeSelectors": ["#frame"] - }, { "label": "CMSDS - Components - Button - Default", "referenceUrl": "https://design.cms.gov/example/components.button/", @@ -740,12 +439,6 @@ "url": "http://localhost:3000/example/components.button.react/", "removeSelectors": ["#frame"] }, - { - "label": "CMSDS - Components - Checkbox & Radio", - "referenceUrl": "https://design.cms.gov/components/choice/", - "url": "http://localhost:3000/components/choice/", - "removeSelectors": ["#frame"] - }, { "label": "CMSDS - Components - Checkbox & Radio - Default", "referenceUrl": "https://design.cms.gov/example/components.choice/", @@ -764,12 +457,6 @@ "url": "http://localhost:3000/example/components.choice.react/", "removeSelectors": ["#frame"] }, - { - "label": "CMSDS - Components - Datefield", - "referenceUrl": "https://design.cms.gov/components/date-field/", - "url": "http://localhost:3000/components/date-field/", - "removeSelectors": ["#frame"] - }, { "label": "CMSDS - Components - Datefield - Default", "referenceUrl": "https://design.cms.gov/example/components.date-field/", @@ -782,12 +469,6 @@ "url": "http://localhost:3000/example/components.date-field.react/", "removeSelectors": ["#frame"] }, - { - "label": "CMSDS - Components - Dropdown", - "referenceUrl": "https://design.cms.gov/components/dropdown/", - "url": "http://localhost:3000/components/dropdown/", - "removeSelectors": ["#frame"] - }, { "label": "CMSDS - Components - Dropdown - Default", "referenceUrl": "https://design.cms.gov/example/components.dropdown/", @@ -800,12 +481,6 @@ "url": "http://localhost:3000/example/components.dropdown.react/", "removeSelectors": ["#frame"] }, - { - "label": "CMSDS - Components - Filter Chip", - "referenceUrl": "https://design.cms.gov/components/filterchip/", - "url": "http://localhost:3000/components/filterchip/", - "removeSelectors": ["#frame"] - }, { "label": "CMSDS - Components - Filter Chip - Default", "referenceUrl": "https://design.cms.gov/example/components.filterchip/", @@ -818,12 +493,6 @@ "url": "http://localhost:3000/example/components.filterchip.react/", "removeSelectors": ["#frame"] }, - { - "label": "CMSDS - Components - Form label & legend", - "referenceUrl": "https://design.cms.gov/components/form-label", - "url": "http://localhost:3000/components/form-label", - "removeSelectors": ["#frame"] - }, { "label": "CMSDS - Components - Form label & legend - Default", "referenceUrl": "https://design.cms.gov/example/components.form-label/", @@ -836,12 +505,6 @@ "url": "http://localhost:3000/example/components.form-label.react/", "removeSelectors": ["#frame"] }, - { - "label": "CMSDS - Components - Help drawer", - "referenceUrl": "https://design.cms.gov/components/help-drawer/", - "url": "http://localhost:3000/components/help-drawer/", - "removeSelectors": ["#frame"] - }, { "label": "CMSDS - Components - Help drawer - Default", "referenceUrl": "https://design.cms.gov/example/components.help-drawer/", @@ -854,36 +517,18 @@ "url": "http://localhost:3000/example/components.help-drawer.react-help-drawer/", "removeSelectors": ["#frame"] }, - { - "label": "CMSDS - Components - List", - "referenceUrl": "https://design.cms.gov/components/list/", - "url": "http://localhost:3000/components/list/", - "removeSelectors": ["#frame"] - }, { "label": "CMSDS - Components - List - Default", "referenceUrl": "https://design.cms.gov/example/components.list/", "url": "http://localhost:3000/example/components.list/", "removeSelectors": ["#frame"] }, - { - "label": "CMSDS - Components - Masked Field", - "referenceUrl": "https://design.cms.gov/components/masked-field/", - "url": "http://localhost:3000/components/masked-field/", - "removeSelectors": ["#frame"] - }, { "label": "CMSDS - Components - Masked Field - React", "referenceUrl": "https://design.cms.gov/example/components.masked-field.react/", "url": "http://localhost:3000/example/components.masked-field.react/", "removeSelectors": ["#frame"] }, - { - "label": "CMSDS - Components - Modal Dialog", - "referenceUrl": "https://design.cms.gov/components/dialog/", - "url": "http://localhost:3000/components/dialog/", - "removeSelectors": ["#frame"] - }, { "label": "CMSDS - Components - Modal Dialog - Default", "referenceUrl": "https://design.cms.gov/example/components.dialog/", @@ -902,36 +547,18 @@ "url": "http://localhost:3000/example/components.dialog.react/", "removeSelectors": ["#frame"] }, - { - "label": "CMSDS - Components - Month Picker", - "referenceUrl": "https://design.cms.gov/components/month-picker/", - "url": "http://localhost:3000/components/month-picker/", - "removeSelectors": ["#frame"] - }, { "label": "CMSDS - Components - Month Picker - React", "referenceUrl": "https://design.cms.gov/example/components.month-picker.react/", "url": "http://localhost:3000/example/components.month-picker.react/", "removeSelectors": ["#frame"] }, - { - "label": "CMSDS - Components - Skipnav", - "referenceUrl": "https://design.cms.gov/components/skip-nav/", - "url": "http://localhost:3000/components/skip-nav/", - "removeSelectors": ["#frame"] - }, { "label": "CMSDS - Components - Skipnav - Default", "referenceUrl": "https://design.cms.gov/example/components.skip-nav/", "url": "http://localhost:3000/example/components.skip-nav/", "removeSelectors": ["#frame"] }, - { - "label": "CMSDS - Components - Spinner", - "referenceUrl": "https://design.cms.gov/components/spinner/", - "url": "http://localhost:3000/components/spinner/", - "removeSelectors": ["#frame"] - }, { "label": "CMSDS - Components - Spinner - Colors", "referenceUrl": "https://design.cms.gov/example/components.spinner.colors/", @@ -960,12 +587,6 @@ "removeSelectors": ["#frame"], "misMatchThreshold": "0.5" }, - { - "label": "CMSDS - Components - Table", - "referenceUrl": "https://design.cms.gov/components/table/", - "url": "http://localhost:3000/components/table/", - "removeSelectors": ["#frame"] - }, { "label": "CMSDS - Components - Table - Default", "referenceUrl": "https://design.cms.gov/example/components.table/", @@ -984,12 +605,6 @@ "url": "http://localhost:3000/example/components.table.react/", "removeSelectors": ["#frame"] }, - { - "label": "CMSDS - Components - Tabs", - "referenceUrl": "https://design.cms.gov/components/tabs/", - "url": "http://localhost:3000/components/tabs/", - "removeSelectors": ["#frame"] - }, { "label": "CMSDS - Components - Tabs - Default", "referenceUrl": "https://design.cms.gov/example/components.tabs/", @@ -1002,12 +617,6 @@ "url": "http://localhost:3000/example/components.tabs.react-tabs/", "removeSelectors": ["#frame"] }, - { - "label": "CMSDS - Components - Textfield", - "referenceUrl": "https://design.cms.gov/components/text-field/", - "url": "http://localhost:3000/components/text-field/", - "removeSelectors": ["#frame"] - }, { "label": "CMSDS - Components - Textfield - Default", "referenceUrl": "https://design.cms.gov/example/components.text-field/", @@ -1020,12 +629,6 @@ "url": "http://localhost:3000/example/components.text-field.react/", "removeSelectors": ["#frame"] }, - { - "label": "CMSDS - Components - Vertical Navigation", - "referenceUrl": "https://design.cms.gov/components/vertical-nav/", - "url": "http://localhost:3000/components/vertical-nav/", - "removeSelectors": ["#frame"] - }, { "label": "CMSDS - Components - Vertical Navigation - Default", "referenceUrl": "https://design.cms.gov/example/components.vertical-nav/", @@ -1038,30 +641,12 @@ "url": "http://localhost:3000/example/components.vertical-nav.VerticalNav/", "removeSelectors": ["#frame"] }, - { - "label": "CMSDS - Patterns - Overview", - "referenceUrl": "https://design.cms.gov/patterns/overview/", - "url": "http://localhost:3000/patterns/overview/", - "removeSelectors": ["#frame"] - }, - { - "label": "CMSDS - Patterns - Documentation Page", - "referenceUrl": "https://design.cms.gov/patterns/documentation-page/", - "url": "http://localhost:3000/patterns/documentation-page/", - "removeSelectors": ["#frame"] - }, { "label": "CMSDS - Patterns - Documentation Page - Default", "referenceUrl": "https://design.cms.gov/example/patterns.documentation-page/", "url": "http://localhost:3000/example/patterns.documentation-page/", "removeSelectors": ["#frame"] }, - { - "label": "CMSDS - Patterns - Review", - "referenceUrl": "https://design.cms.gov/patterns/review/", - "url": "http://localhost:3000/patterns/review/", - "removeSelectors": ["#frame"] - }, { "label": "CMSDS - Patterns - Review - Default", "referenceUrl": "https://design.cms.gov/example/patterns.review/", @@ -1074,12 +659,6 @@ "url": "http://localhost:3000/example/patterns.review.react/", "removeSelectors": ["#frame"] }, - { - "label": "CMSDS - Patterns - Step List", - "referenceUrl": "https://design.cms.gov/patterns/step-list/", - "url": "http://localhost:3000/patterns/step-list/", - "removeSelectors": ["#frame"] - }, { "label": "CMSDS - Patterns - Step List - Default", "referenceUrl": "https://design.cms.gov/example/patterns.step-list/", @@ -1092,12 +671,6 @@ "url": "http://localhost:3000/example/patterns.step-list.react/", "removeSelectors": ["#frame"] }, - { - "label": "CMSDS - Patterns - External Link", - "referenceUrl": "https://design.cms.gov/patterns/external-link/", - "url": "http://localhost:3000/patterns/external-link/", - "removeSelectors": ["#frame"] - }, { "label": "CMSDS - Patterns - External Link - React", "referenceUrl": "https://design.cms.gov/example/patterns.external-link.react/", diff --git a/lerna.json b/lerna.json index 7d83335d51..f7d553cfd2 100644 --- a/lerna.json +++ b/lerna.json @@ -5,9 +5,7 @@ } }, "npmClient": "yarn", - "packages": [ - "packages/*" - ], + "packages": ["packages/*"], "ignoreChanges": [ "packages/stylelint-config-design-system/**", "packages/eslint-config-design-system/**" diff --git a/package.json b/package.json index 182436a1e0..872d4f09fe 100644 --- a/package.json +++ b/package.json @@ -17,7 +17,8 @@ "test:e2e": "yarn cmsds test:e2e ./packages", "update-snapshots": "yarn cmsds test ./packages --updateSnapshot", "posttest": "yarn lint", - "lint": "yarn cmsds lint ./ --ignorePatterns '**/node_modules/**' '**/dist/**' '**/helpers/**' '**/__tests__/**' 'tmp/**' '**/types/**' 'examples/create-react-app-typescript/**' 'examples/create-react-app/**'" + "lint": "yarn cmsds lint ./ --ignorePatterns '**/node_modules/**' '**/dist/**' '**/helpers/**' '**/__tests__/**' 'tmp/**' '**/types/**' 'examples/create-react-app-typescript/**' 'examples/create-react-app/**'", + "prepare": "husky install" }, "devDependencies": { "@types/react": "^17.0.0", @@ -26,7 +27,7 @@ "@typescript-eslint/parser": "^4.11.0", "backstopjs": "^5.0.4", "eslint": "^6.8.0", - "husky": "^4.2.5", + "husky": "^7.0.0", "lerna": "^3.20.0", "lint-staged": "^10.0.8", "prettier": "^2.0.5", @@ -42,7 +43,7 @@ "kss/nunjucks": ">=3.2.0" }, "lint-staged": { - "*.{js,jsx}": [ + "*.{js,jsx,ts,tsx}": [ "prettier --write", "eslint --fix" ], diff --git a/packages/design-system-docs/src/pages/components/Autocomplete/Autocomplete.example.jsx b/packages/design-system-docs/src/pages/components/Autocomplete/Autocomplete.example.jsx index 58e670e8c0..3e3cffdfca 100644 --- a/packages/design-system-docs/src/pages/components/Autocomplete/Autocomplete.example.jsx +++ b/packages/design-system-docs/src/pages/components/Autocomplete/Autocomplete.example.jsx @@ -3,7 +3,7 @@ import React from 'react'; import ReactDOM from 'react-dom'; ReactDOM.render( -
+
+ + Carrots (1) + + ), + }, + { + id: '2', + name: 'Cookies (3)', + children: ( + <> + Cookies (3) + + ), + }, + { + id: '3', + name: 'Crackers (2)', + children: ( + <> + Crackers (2) + + ), + }, + { + children: ( + console.log('Searching for all the snacks!')}> + Search all snacks + + ), + className: 'ds-c-autocomplete__search-all', + isResult: false, + }, + ]} + itemToString={(item) => (item && item.name) || ''} + onChange={(selectedItem) => console.log(selectedItem)} + onInputValueChange={(inputVal) => console.log('[Autocomplete]: ' + inputVal)} + > + + + Autocomplete item object + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameTypeDescription
idstring +

Unique identifier for this item

+
namestring +

Displayed value of the item. May alternatively provide a children value

+
childrenReact.ReactNode +

Custom React node as an alternative to a string-only `name`

+
classNamestring +

Additional classes to be added to the root element. Useful for adding utility classes.

+
isResultboolean +

Whether this item should be counted as one of the results for the purpose of announcing the result count to screen readers

+
+ +Style guide: components.autocomplete.items-object +*/ + /* --- diff --git a/packages/design-system-docs/src/pages/components/Spinner/Spinner.example.jsx b/packages/design-system-docs/src/pages/components/Spinner/Spinner.example.jsx index 5b0a387730..0e34bbcba0 100644 --- a/packages/design-system-docs/src/pages/components/Spinner/Spinner.example.jsx +++ b/packages/design-system-docs/src/pages/components/Spinner/Spinner.example.jsx @@ -18,7 +18,7 @@ ReactDOM.render( Cancel
diff --git a/packages/design-system-docs/src/pages/components/Spinner/_Spinner.docs.scss b/packages/design-system-docs/src/pages/components/Spinner/_Spinner.docs.scss index f3418170ef..3f7a06a5e3 100644 --- a/packages/design-system-docs/src/pages/components/Spinner/_Spinner.docs.scss +++ b/packages/design-system-docs/src/pages/components/Spinner/_Spinner.docs.scss @@ -23,16 +23,16 @@ Use inside buttons Markup: Style guide: components.spinner.buttons @@ -47,13 +47,13 @@ Markup:

{{lorem-l}}

- +

{{lorem-l}}

- +
diff --git a/packages/design-system-docs/src/pages/components/Spinner/spinner.example.html b/packages/design-system-docs/src/pages/components/Spinner/spinner.example.html index 689315e887..69a690819a 100644 --- a/packages/design-system-docs/src/pages/components/Spinner/spinner.example.html +++ b/packages/design-system-docs/src/pages/components/Spinner/spinner.example.html @@ -1,3 +1,9 @@ - - - + + + diff --git a/packages/design-system-docs/src/pages/components/Table/_Table.docs.scss b/packages/design-system-docs/src/pages/components/Table/_Table.docs.scss index 181d6474b3..df2e1349b6 100644 --- a/packages/design-system-docs/src/pages/components/Table/_Table.docs.scss +++ b/packages/design-system-docs/src/pages/components/Table/_Table.docs.scss @@ -31,7 +31,7 @@ responsive features including horizontal scrolling and vertically stacked rows. @responsive -@react-props Table.jsx +@react-props Table.tsx Style guide: components.table.react */ @@ -41,7 +41,7 @@ Style guide: components.table.react `TableCaption` renders the `` element. -@react-props TableCaption.jsx +@react-props TableCaption.tsx Style guide: components.table.react-tablecaption */ @@ -51,7 +51,7 @@ Style guide: components.table.react-tablecaption `TableHead` renders the `` element and will typically contain `TableRow` elements to define table columns. -@react-props TableHead.jsx +@react-props TableHead.tsx Style guide: components.table.react-tablehead */ @@ -61,7 +61,7 @@ Style guide: components.table.react-tablehead `TableBody` renders the `` element and will typically contain `TableRow` elements to define table data. -@react-props TableBody.jsx +@react-props TableBody.tsx Style guide: components.table.react-tablebody */ @@ -71,7 +71,7 @@ Style guide: components.table.react-tablebody `TableRow` renders a `` element. -@react-props TableRow.jsx +@react-props TableRow.tsx Style guide: components.table.react-tablerow */ @@ -81,7 +81,7 @@ Style guide: components.table.react-tablerow `TableCell` dynamically renders a `` or `` element based on the parent component or user specified `component` prop. By default `TableCell` will automatically render a `` element if the parent component is `TableHead`, otherwise it will render a `` element. -@react-props TableCell.jsx +@react-props TableCell.tsx Style guide: components.table.react-tablecell */ diff --git a/packages/design-system-docs/src/scripts/components/Footer.jsx b/packages/design-system-docs/src/scripts/components/Footer.jsx index b6ddffb8b3..b9b56f8242 100644 --- a/packages/design-system-docs/src/scripts/components/Footer.jsx +++ b/packages/design-system-docs/src/scripts/components/Footer.jsx @@ -106,7 +106,7 @@ const Footer = () => {
`; + +exports[`Autocomplete renders item with custom className 1`] = `"ds-c-autocomplete__list-item"`; + +exports[`Autocomplete renders item with custom className 2`] = `"custom-class ds-c-autocomplete__list-item"`; + +exports[`Autocomplete renders items with children property 1`] = ` + +`; diff --git a/packages/design-system/src/components/Badge/Badge.tsx b/packages/design-system/src/components/Badge/Badge.tsx index a2dda7535a..c4cff9ffc5 100644 --- a/packages/design-system/src/components/Badge/Badge.tsx +++ b/packages/design-system/src/components/Badge/Badge.tsx @@ -3,6 +3,7 @@ import classNames from 'classnames'; export type BadgeSize = 'big'; export type BadgeVariation = 'info' | 'success' | 'warn' | 'alert'; + export interface BadgeProps { /** * Additional classes to be added to the root badge element. diff --git a/packages/design-system/src/components/Button/Button.tsx b/packages/design-system/src/components/Button/Button.tsx index 2ce8902050..089cfe9df7 100644 --- a/packages/design-system/src/components/Button/Button.tsx +++ b/packages/design-system/src/components/Button/Button.tsx @@ -8,13 +8,8 @@ export type ButtonType = 'button' | 'submit'; * A string corresponding to the button-component variation classes. * The danger variation is deprecated and will be removed in a future release. */ -export type ButtonVariation = - | 'primary' - | 'secondary' - | 'tertiary' - | 'danger' - | 'success' - | 'transparent'; +export type ButtonVariation = 'primary' | 'danger' | 'success' | 'transparent'; + export interface ButtonProps { /** * Label text or HTML diff --git a/packages/design-system/src/components/Dialog/Dialog.jsx b/packages/design-system/src/components/Dialog/Dialog.jsx index 942e2902c1..0540d05817 100644 --- a/packages/design-system/src/components/Dialog/Dialog.jsx +++ b/packages/design-system/src/components/Dialog/Dialog.jsx @@ -1,31 +1,10 @@ -import { EVENT_CATEGORY, MAX_LENGTH, sendAnalyticsEvent } from '../analytics/SendAnalytics'; +import { EVENT_CATEGORY, MAX_LENGTH, sendLinkEvent } from '../analytics/SendAnalytics'; import AriaModal from 'react-aria-modal'; import Button from '../Button/Button'; import PropTypes from 'prop-types'; import React from 'react'; import classNames from 'classnames'; import { dialogSendsAnalytics } from '../flags'; -import get from 'lodash/get'; - -// Default analytics object -const defaultAnalytics = (heading = '') => ({ - onComponentDidMount: { - event_name: 'modal_impression', - event_type: EVENT_CATEGORY.uiInteraction, - ga_eventAction: 'modal impression', - ga_eventCategory: EVENT_CATEGORY.uiComponents, - ga_eventLabel: heading, - heading: heading, - }, - onComponentWillUnmount: { - event_name: 'modal_closed', - event_type: EVENT_CATEGORY.uiInteraction, - ga_eventAction: 'closed modal', - ga_eventCategory: EVENT_CATEGORY.uiComponents, - ga_eventLabel: heading, - heading: heading, - }, -}); export class Dialog extends React.PureComponent { constructor(props) { @@ -53,12 +32,13 @@ export class Dialog extends React.PureComponent { } componentDidMount() { - if (dialogSendsAnalytics()) { - const eventAction = 'onComponentDidMount'; - const eventHeading = this.props.title || this.props.heading; + if (dialogSendsAnalytics() && this.props.analytics !== false) { + const heading = this.props.title || this.props.heading; - if (typeof eventHeading === 'string') { - this.eventHeadingText = eventHeading.substring(0, MAX_LENGTH); + if (this.props.analyticsLabelOverride) { + this.eventHeadingText = this.props.analyticsLabelOverride; + } else if (typeof heading === 'string') { + this.eventHeadingText = heading.substring(0, MAX_LENGTH); } else { this.eventHeadingText = this.headingRef && this.headingRef.textContent @@ -67,21 +47,28 @@ export class Dialog extends React.PureComponent { } /* Send analytics event for dialog open */ - sendAnalyticsEvent( - get(this.props.analytics, eventAction), - get(defaultAnalytics(this.eventHeadingText), eventAction) - ); + sendLinkEvent({ + event_name: 'modal_impression', + event_type: EVENT_CATEGORY.uiInteraction, + ga_eventAction: 'modal impression', + ga_eventCategory: EVENT_CATEGORY.uiComponents, + ga_eventLabel: this.eventHeadingText, + heading: this.eventHeadingText, + }); } } componentWillUnmount() { - if (dialogSendsAnalytics()) { - const eventAction = 'onComponentWillUnmount'; + if (dialogSendsAnalytics() && this.props.analytics !== false) { /* Send analytics event for dialog close */ - sendAnalyticsEvent( - get(this.props.analytics, eventAction), - get(defaultAnalytics(this.eventHeadingText), eventAction) - ); + sendLinkEvent({ + event_name: 'modal_closed', + event_type: EVENT_CATEGORY.uiInteraction, + ga_eventAction: 'closed modal', + ga_eventCategory: EVENT_CATEGORY.uiComponents, + ga_eventLabel: this.eventHeadingText, + heading: this.eventHeadingText, + }); } } @@ -178,20 +165,6 @@ Dialog.defaultProps = { underlayClickExits: false, }; -/** - * Defines the shape of an analytics event for tracking that is an object with key-value pairs - */ -const AnalyticsEventShape = PropTypes.shape({ - event_name: PropTypes.string, - event_type: PropTypes.string, - ga_eventAction: PropTypes.string, - ga_eventCategory: PropTypes.string, - ga_eventLabel: PropTypes.string, - ga_eventType: PropTypes.string, - ga_eventValue: PropTypes.string, - heading: PropTypes.string, -}); - // TODO: closeButtonText should be a string, but it is being used as a node in MCT, // until we provide a better solution for customization, we type it as a node. Dialog.propTypes = { @@ -202,17 +175,13 @@ Dialog.propTypes = { */ alert: PropTypes.bool, /** - * Analytics events tracking is enabled by default. - * The `analytics` prop is an object of events that is either a nested `objects` with key-value - * pairs, or `boolean` for disabling the event tracking. To disable an event tracking, set the - * event object value to `false`. - * When an event is triggered, the object value is populated and sent to google analytics - * if `window.utag` instance is loaded. + * Analytics events tracking is enabled by default. Set this value to `false` to disable tracking for this component instance. + */ + analytics: PropTypes.bool, + /** + * An override for the dynamic content sent to analytics services. By default this content comes from the heading */ - analytics: PropTypes.shape({ - onComponentDidMount: PropTypes.oneOfType([PropTypes.bool, AnalyticsEventShape]), - onComponentWillUnmount: PropTypes.oneOfType([PropTypes.bool, AnalyticsEventShape]), - }), + analyticsLabelOverride: PropTypes.string, /** * Provide a **DOM node** which contains your page's content (which the modal should render * outside of). When the modal is open this node will receive `aria-hidden="true"`. diff --git a/packages/design-system/src/components/Dialog/Dialog.test.jsx b/packages/design-system/src/components/Dialog/Dialog.test.jsx index 82c51771b9..ae509b2699 100644 --- a/packages/design-system/src/components/Dialog/Dialog.test.jsx +++ b/packages/design-system/src/components/Dialog/Dialog.test.jsx @@ -90,7 +90,7 @@ describe('Dialog', function () { }); it('sends analytics event tracking on open dialog', () => { - render({ tealiumMock, heading: 'dialog heading' }); + render({ heading: 'dialog heading' }); expect(tealiumMock).toBeCalledWith({ ga_eventType: 'cmsds', ga_eventValue: '', @@ -99,34 +99,18 @@ describe('Dialog', function () { }); it('disables analytics event tracking on open', () => { - const analyticsProps = { - analytics: { - onComponentDidMount: false, - }, - }; - render({ tealiumMock, heading: 'dialog heading', ...analyticsProps }); - expect(tealiumMock).not.toBeCalledWith(defaultEvent); + render({ heading: 'dialog heading', analytics: false }); + expect(tealiumMock).not.toBeCalled(); }); it('overrides analytics event tracking on open', () => { - const analyticsProps = { - analytics: { - onComponentDidMount: { - event_name: 'event name', - event_type: 'event type', - ga_eventCategory: 'event category', - ga_eventAction: 'event action', - ga_eventLabel: 'event label', - ga_eventValue: 'event value', - ga_other: 'other one', - ga_other2: 'other two', - ga_eventType: 'other type', - heading: 'other heading', - }, - }, - }; - render({ tealiumMock, ...analyticsProps }); - expect(tealiumMock).toBeCalledWith(analyticsProps.analytics.onComponentDidMount); + render({ analyticsLabelOverride: 'other heading' }); + expect(tealiumMock).toBeCalledWith( + expect.objectContaining({ + ga_eventLabel: 'other heading', + heading: 'other heading', + }) + ); }); }); }); diff --git a/packages/design-system/src/components/HelpDrawer/HelpDrawer.jsx b/packages/design-system/src/components/HelpDrawer/HelpDrawer.jsx index 4a892ed643..e3cbf05b5d 100644 --- a/packages/design-system/src/components/HelpDrawer/HelpDrawer.jsx +++ b/packages/design-system/src/components/HelpDrawer/HelpDrawer.jsx @@ -1,31 +1,10 @@ -import { EVENT_CATEGORY, MAX_LENGTH, sendAnalyticsEvent } from '../analytics/SendAnalytics'; +import { EVENT_CATEGORY, MAX_LENGTH, sendLinkEvent } from '../analytics/SendAnalytics'; import Button from '../Button/Button'; import PropTypes from 'prop-types'; import React from 'react'; import classNames from 'classnames'; -import get from 'lodash/get'; import { helpDrawerSendsAnalytics } from '../flags'; -// Default analytics object -const defaultAnalytics = (heading = '') => ({ - onComponentDidMount: { - event_name: 'help_drawer_opened', - event_type: EVENT_CATEGORY.uiInteraction, - ga_eventAction: 'opened help drawer', - ga_eventCategory: EVENT_CATEGORY.uiComponents, - ga_eventLabel: heading, - heading: heading, - }, - onComponentWillUnmount: { - event_name: 'help_drawer_closed', - event_type: EVENT_CATEGORY.uiInteraction, - ga_eventAction: 'closed help drawer', - ga_eventCategory: EVENT_CATEGORY.uiComponents, - ga_eventLabel: heading, - heading: heading, - }, -}); - export class HelpDrawer extends React.PureComponent { constructor(props) { super(props); @@ -49,12 +28,13 @@ export class HelpDrawer extends React.PureComponent { componentDidMount() { if (this.headingRef) this.headingRef.focus(); - if (helpDrawerSendsAnalytics()) { - const eventAction = 'onComponentDidMount'; - const eventHeading = this.props.title || this.props.heading; + if (helpDrawerSendsAnalytics() && this.props.analytics !== false) { + const heading = this.props.title || this.props.heading; - if (typeof eventHeading === 'string') { - this.eventHeadingText = eventHeading.substring(0, MAX_LENGTH); + if (this.props.analyticsLabelOverride) { + this.eventHeadingText = this.props.analyticsLabelOverride; + } else if (typeof heading === 'string') { + this.eventHeadingText = heading.substring(0, MAX_LENGTH); } else { this.eventHeadingText = this.headingRef && this.headingRef.textContent @@ -63,21 +43,28 @@ export class HelpDrawer extends React.PureComponent { } /* Send analytics event for helpdrawer open */ - sendAnalyticsEvent( - get(this.props.analytics, eventAction), - get(defaultAnalytics(this.eventHeadingText), eventAction) - ); + sendLinkEvent({ + event_name: 'help_drawer_opened', + event_type: EVENT_CATEGORY.uiInteraction, + ga_eventAction: 'opened help drawer', + ga_eventCategory: EVENT_CATEGORY.uiComponents, + ga_eventLabel: this.eventHeadingText, + heading: this.eventHeadingText, + }); } } componentWillUnmount() { - if (helpDrawerSendsAnalytics()) { - const eventAction = 'onComponentWillUnmount'; + if (helpDrawerSendsAnalytics() && this.props.analytics !== false) { /* Send analytics event for helpdrawer close */ - sendAnalyticsEvent( - get(this.props.analytics, eventAction), - get(defaultAnalytics(this.eventHeadingText), eventAction) - ); + sendLinkEvent({ + event_name: 'help_drawer_closed', + event_type: EVENT_CATEGORY.uiInteraction, + ga_eventAction: 'closed help drawer', + ga_eventCategory: EVENT_CATEGORY.uiComponents, + ga_eventLabel: this.eventHeadingText, + heading: this.eventHeadingText, + }); } } @@ -144,35 +131,17 @@ HelpDrawer.defaultProps = { headingLevel: '3', }; -/** - * Defines the shape of an analytics event for tracking that is an object with key-value pairs - */ -const AnalyticsEventShape = PropTypes.shape({ - event_name: PropTypes.string, - event_type: PropTypes.string, - ga_eventAction: PropTypes.string, - ga_eventCategory: PropTypes.string, - ga_eventLabel: PropTypes.string, - ga_eventType: PropTypes.string, - ga_eventValue: PropTypes.string, - heading: PropTypes.string, -}); - // TODO: closeButtonText, title/heading should be a string, but it is being used as a node in MCT, // until we provide a better solution for customization, we type it as a node. HelpDrawer.propTypes = { /** - * Analytics events tracking is enabled by default. - * The `analytics` prop is an object of events that is either a nested `objects` with key-value - * pairs, or `boolean` for disabling the event tracking. To disable an event tracking, set the - * event object value to `false`. - * When an event is triggered, the object value is populated and sent to google analytics - * if `window.utag` instance is loaded. + * Analytics events tracking is enabled by default. Set this value to `false` to disable tracking for this component instance. + */ + analytics: PropTypes.bool, + /** + * An override for the dynamic content sent to analytics services. By default this content comes from the heading */ - analytics: PropTypes.shape({ - onComponentDidMount: PropTypes.oneOfType([PropTypes.bool, AnalyticsEventShape]), - onComponentWillUnmount: PropTypes.oneOfType([PropTypes.bool, AnalyticsEventShape]), - }), + analyticsLabelOverride: PropTypes.string, /** * Helps give more context to screen readers on the button that closes the Help Drawer */ diff --git a/packages/design-system/src/components/HelpDrawer/HelpDrawer.test.jsx b/packages/design-system/src/components/HelpDrawer/HelpDrawer.test.jsx index 89f0476d38..d210506434 100644 --- a/packages/design-system/src/components/HelpDrawer/HelpDrawer.test.jsx +++ b/packages/design-system/src/components/HelpDrawer/HelpDrawer.test.jsx @@ -71,7 +71,7 @@ describe('HelpDrawer', () => { }); it('sends analytics event tracking on open help drawer', () => { - renderHelpDrawer({ tealiumMock }); + renderHelpDrawer(); expect(tealiumMock).toBeCalledWith({ ga_eventType: 'cmsds', ga_eventValue: '', @@ -80,58 +80,18 @@ describe('HelpDrawer', () => { }); it('disables analytics event tracking on open', () => { - const analyticsProps = { - analytics: { - // disables on open help drawer - onComponentDidMount: false, - }, - onCloseClick: () => {}, - heading: 'HelpDrawer title', - }; - function renderDrawer(props) { - props = Object.assign({}, analyticsProps, props); - const wrapper = shallow( - -

content

- - ); - return { props, wrapper }; - } - renderDrawer({ tealiumMock }); + renderHelpDrawer({ analytics: false, onCloseClick: () => {} }); expect(tealiumMock).not.toBeCalledWith(defaultEvent); }); it('overrides analytics event tracking on open', () => { - const analyticsProps = { - analytics: { - // override default analytics on open help drawer - onComponentDidMount: { - event_name: 'event name', - event_type: 'event type', - ga_eventCategory: 'event category', - ga_eventAction: 'event action', - ga_eventLabel: 'event label', - ga_eventValue: 'event value', - ga_other: 'other one', - ga_other2: 'other two', - ga_eventType: 'other type', - heading: 'other heading', - }, - }, - onCloseClick: () => {}, - heading: 'HelpDrawer title', - }; - function renderDrawer(props) { - props = Object.assign({}, analyticsProps, props); - const wrapper = shallow( - -

content

- - ); - return { props, wrapper }; - } - renderDrawer({ tealiumMock }); - expect(tealiumMock).toBeCalledWith(analyticsProps.analytics.onComponentDidMount); + renderHelpDrawer({ analyticsLabelOverride: 'other heading', onCloseClick: () => {} }); + expect(tealiumMock).toBeCalledWith( + expect.objectContaining({ + ga_eventLabel: 'other heading', + heading: 'other heading', + }) + ); }); }); }); diff --git a/packages/design-system/src/components/Spinner/Spinner.test.tsx b/packages/design-system/src/components/Spinner/Spinner.test.tsx index bbb5f2a41a..da98a905a1 100644 --- a/packages/design-system/src/components/Spinner/Spinner.test.tsx +++ b/packages/design-system/src/components/Spinner/Spinner.test.tsx @@ -23,8 +23,8 @@ describe('Spinner', () => { const data = shallowRender(); const wrapper = data.wrapper; - expect(wrapper.prop('aria-valuetext')).toEqual('Loading'); - expect(wrapper.prop('role')).toEqual('progressbar'); + expect(wrapper.text()).toEqual('Loading'); + expect(wrapper.prop('role')).toEqual('status'); }); it('returns default class names', () => { diff --git a/packages/design-system/src/components/Spinner/Spinner.tsx b/packages/design-system/src/components/Spinner/Spinner.tsx index 1c68d73955..7f4f1bc632 100644 --- a/packages/design-system/src/components/Spinner/Spinner.tsx +++ b/packages/design-system/src/components/Spinner/Spinner.tsx @@ -2,6 +2,7 @@ import React from 'react'; import classNames from 'classnames'; export type SpinnerSize = 'small' | 'big'; + export interface SpinnerProps { /** * The text announced to screen readers @@ -39,12 +40,16 @@ export const Spinner: React.FunctionComponent = (props: SpinnerPro props.className ); - return ; + return ( + + {props['aria-valuetext']} + + ); }; Spinner.defaultProps = { 'aria-valuetext': 'Loading', - role: 'progressbar', + role: 'status', }; export default Spinner; diff --git a/packages/design-system/src/components/Table/Table.test.jsx b/packages/design-system/src/components/Table/Table.test.tsx similarity index 100% rename from packages/design-system/src/components/Table/Table.test.jsx rename to packages/design-system/src/components/Table/Table.test.tsx diff --git a/packages/design-system/src/components/Table/Table.jsx b/packages/design-system/src/components/Table/Table.tsx similarity index 67% rename from packages/design-system/src/components/Table/Table.jsx rename to packages/design-system/src/components/Table/Table.tsx index e9b212cbaf..db828a1b5f 100644 --- a/packages/design-system/src/components/Table/Table.jsx +++ b/packages/design-system/src/components/Table/Table.tsx @@ -1,5 +1,4 @@ import Alert from '../Alert/Alert'; -import PropTypes from 'prop-types'; import React from 'react'; import TableCaption from './TableCaption'; import TableContext from './TableContext'; @@ -7,13 +6,67 @@ import classNames from 'classnames'; import get from 'lodash/get'; import uniqueId from 'lodash.uniqueid'; -function debounce(fn, ms) { - let timer; - return () => { +export type TableStackableBreakpoint = 'sm' | 'md' | 'lg'; + +export interface TableProps { + /** + * Applies the borderless variation of the table. + */ + borderless?: boolean; + /** + * The table contents, usually `TableCaption`, `TableHead` and `TableBody`. + */ + children: React.ReactNode; + /** + * Additional classes to be added to the root table element. + */ + className?: string; + /** + * Applies the compact variation of the table. + */ + compact?: boolean; + /** + * @hide-prop [Deprecated] Use compact instead. + */ + dense?: boolean; + /** + * Applies a horizontal scrollbar and scrollable notice on `TableCaption` when the `Table`'s contents exceed the container width. + */ + scrollable?: boolean; + /** + * Additional text or content to display when the horizontal scrollbar is visible to give the user notice of the scroll behavior. + * This prop will only be used when the `Table` `scrollable` prop is set and the table width is wider than the viewport. + */ + scrollableNotice?: React.ReactNode; + /** + * A stackable variation of the table. + * When `stackable` is set, `id` or `headers` prop is required in `Table` + */ + stackable?: boolean; + /** + * Applies responsive styles to vertically stacked rows at different viewport sizes. + */ + stackableBreakpoint?: TableStackableBreakpoint; + /** + * A striped variation of the table. + */ + striped?: boolean; + /** + * Disables the warning message on development console when a responsive stackable table cell does not contain an `id` or `headers`. + * It's recommended that accessibility with screen readers is tested to ensure the stacked table meets the requirement. + */ + warningDisabled?: boolean; +} + +type OmitProps = 'children' | 'className'; + +function debounce(fn: (...args: Params) => any, ms: number) { + let timer: NodeJS.Timeout; + return (...args: any[]) => { clearTimeout(timer); timer = setTimeout(() => { timer = null; - fn.apply(this, arguments); + fn.apply(this, args); }, ms); }; } @@ -23,15 +76,27 @@ function debounce(fn, ms) { * @param {React.Node} child - a React component * @return {Boolean} Is this a TableCaption component? */ -function isTableCaption(child) { +function isTableCaption(child: React.ReactElement): boolean { const componentName = get(child, 'type.displayName') || get(child, 'type.name'); // Check child.type first and as a fallback, check child.type.displayName follow by child.type.name return child && (child.type === TableCaption || componentName === 'TableCaption'); } -export class Table extends React.PureComponent { - constructor(props) { +export class Table extends React.Component< + Omit, OmitProps> & TableProps, + any +> { + static defaultProps = { + scrollableNotice: ( + +

Scroll using arrow keys to see more

+ + ), + stackableBreakpoint: 'sm', + }; + + constructor(props: TableProps) { super(props); this.state = { scrollActive: false, @@ -44,7 +109,7 @@ export class Table extends React.PureComponent { if ( props.scrollable && Array.isArray(props.children) && - !props.children.some((child) => isTableCaption(child)) + !props.children.some((child: React.ReactElement) => isTableCaption(child)) ) { console.warn( 'The children prop in `Table` must include `TableCaption` component for scrollable tables.' @@ -58,27 +123,31 @@ export class Table extends React.PureComponent { } } - componentDidMount() { + componentDidMount(): void { if (this.props.scrollable) { window.addEventListener('resize', this.debounceHandleResize); this.handleResize(); } } - componentWillUnmount() { + componentWillUnmount(): void { if (this.props.scrollable) { window.removeEventListener('resize', this.debounceHandleResize); } } - handleResize() { + captionID: string; + container: any; + debounceHandleResize: (...args: any[]) => any; + + handleResize(): void { const { scrollWidth, clientWidth } = this.container; const scrollActive = scrollWidth > clientWidth; this.setState({ scrollActive }); } - renderChildren() { - return React.Children.map(this.props.children, (child) => { + renderChildren(): React.ReactNode[] { + return React.Children.map(this.props.children, (child: React.ReactElement) => { if (isTableCaption(child)) { // Extend props on TableCaption before rendering. if (this.props.scrollable) { @@ -93,7 +162,7 @@ export class Table extends React.PureComponent { }); } - render() { + render(): React.ReactNode { const { borderless, className, @@ -118,25 +187,26 @@ export class Table extends React.PureComponent { className ); - // Makes table container focusable and displays the scrollable notice when table width exceeds viewport - // by setting `tabIndex = 0` attribute. - // This provides context for screen readers to the table's via aria-labelleby + /** + * Makes table container focusable and displays the scrollable notice when table width exceeds viewport + * by setting `tabIndex = 0` attribute. + * This provides context for screen readers to the table's via aria-labelleby + */ const attributeScrollable = scrollable && { className: 'ds-c-table__wrapper', role: 'region', 'aria-labelledby': this.captionID, - 'aria-live': 'polite', - 'aria-relevant': 'additions', - tabIndex: this.state.scrollActive ? '0' : null, + tabIndex: this.state.scrollActive ? 0 : null, }; - const contextValue = { stackable: !!stackable, warningDisabled: !!warningDisabled }; - return ( + return scrollable ? (
{ this.container = container; }} + aria-live="polite" + aria-relevant="additions" {...attributeScrollable} > @@ -145,67 +215,14 @@ export class Table extends React.PureComponent {
+ ) : ( + + + {this.renderChildren()} +
+ ); } } -Table.defaultProps = { - scrollableNotice: ( - -

Scroll using arrow keys to see more

- - ), - stackableBreakpoint: 'sm', -}; - -Table.propTypes = { - /** - * Applies the borderless variation of the table. - */ - borderless: PropTypes.bool, - /** - * The table contents, usually `TableCaption`, `TableHead` and `TableBody`. - */ - children: PropTypes.node.isRequired, - /** - * Additional classes to be added to the root table element. - */ - className: PropTypes.string, - /** - * Applies the compact variation of the table. - */ - compact: PropTypes.bool, - /** - * @hide-prop [Deprecated] Use compact instead. - */ - dense: PropTypes.bool, - /** - * Applies a horizontal scrollbar and scrollable notice on `TableCaption` when the `Table`'s contents exceed the container width. - */ - scrollable: PropTypes.bool, - /** - * Additional text or content to display when the horizontal scrollbar is visible to give the user notice of the scroll behavior. - * This prop will only be used when the `Table` `scrollable` prop is set and the table width is wider than the viewport. - */ - scrollableNotice: PropTypes.node, - /** - * Enables responsive styles to vertically stack rows at the specified `stackableBreakpoint`. - * When `stackable` is set, `id` or `headers` prop is required in `TableCell` - */ - stackable: PropTypes.bool, - /** - * The viewport size at which responsive vertically stacked row styles are applied. Only used when the `stackable` prop is set to `true`. [Read more on breakpoints](/guidelines/responsive/) - */ - stackableBreakpoint: PropTypes.oneOf(['sm', 'md', 'lg']), - /** - * Applies the striped variation of the table. - */ - striped: PropTypes.bool, - /** - * Disables the warning message on development console when a responsive stackable table cell does not contain an `id` or `headers`. - * It's recommended that accessibility with screen readers is tested to ensure the stacked table meets the requirement. - */ - warningDisabled: PropTypes.bool, -}; - export default Table; diff --git a/packages/design-system/src/components/Table/TableBody.test.jsx b/packages/design-system/src/components/Table/TableBody.test.tsx similarity index 100% rename from packages/design-system/src/components/Table/TableBody.test.jsx rename to packages/design-system/src/components/Table/TableBody.test.tsx diff --git a/packages/design-system/src/components/Table/TableBody.jsx b/packages/design-system/src/components/Table/TableBody.tsx similarity index 54% rename from packages/design-system/src/components/Table/TableBody.jsx rename to packages/design-system/src/components/Table/TableBody.tsx index 18556c745e..a39bfe3edb 100644 --- a/packages/design-system/src/components/Table/TableBody.jsx +++ b/packages/design-system/src/components/Table/TableBody.tsx @@ -1,7 +1,17 @@ -import PropTypes from 'prop-types'; import React from 'react'; -export const TableBody = ({ children, ...tableBodyProps }) => { +export interface TableBodyProps { + /** + * The table body contents, usually `TableRow`. + */ + children?: React.ReactNode; +} + +type OmitProps = 'children'; + +export const TableBody: React.FC< + Omit, OmitProps> & TableBodyProps +> = ({ children, ...tableBodyProps }: TableBodyProps) => { /* eslint-disable jsx-a11y/no-redundant-roles */ return ( @@ -11,11 +21,4 @@ export const TableBody = ({ children, ...tableBodyProps }) => { /* eslint-enable jsx-a11y/no-redundant-roles */ }; -TableBody.propTypes = { - /** - * The table body contents, usually `TableRow`. - */ - children: PropTypes.node, -}; - export default TableBody; diff --git a/packages/design-system/src/components/Table/TableCaption.test.jsx b/packages/design-system/src/components/Table/TableCaption.test.tsx similarity index 100% rename from packages/design-system/src/components/Table/TableCaption.test.jsx rename to packages/design-system/src/components/Table/TableCaption.test.tsx diff --git a/packages/design-system/src/components/Table/TableCaption.jsx b/packages/design-system/src/components/Table/TableCaption.tsx similarity index 79% rename from packages/design-system/src/components/Table/TableCaption.jsx rename to packages/design-system/src/components/Table/TableCaption.tsx index c7499c7c15..cdf9046f3c 100644 --- a/packages/design-system/src/components/Table/TableCaption.jsx +++ b/packages/design-system/src/components/Table/TableCaption.tsx @@ -1,15 +1,37 @@ -import PropTypes from 'prop-types'; import React from 'react'; import classNames from 'classnames'; -export const TableCaption = ({ +export interface TableCaptionProps { + /** + * The table caption contents. + */ + children?: React.ReactNode; + /** + * Additional classes to be added to the caption element. + */ + className?: string; + /** + * @hide-prop This gets passed from the parent `Table` component when the table `scrollable` prop is set. + */ + _id?: string; + /** + * @hide-prop This gets passed from the parent `Table` component when the table `scrollable` prop is set. + */ + _scrollActive?: boolean; + /** + * @hide-prop This gets passed from the parent `Table` component when the table `scrollable` prop is set. + */ + _scrollableNotice?: React.ReactNode; +} + +export const TableCaption: React.FC = ({ children, className, _id, _scrollActive, _scrollableNotice, ...tableCaptionProps -}) => { +}: TableCaptionProps) => { const classes = classNames('ds-c-table__caption', className); return ( @@ -22,27 +44,4 @@ export const TableCaption = ({ // Set component name to make child.type.displayName available to other components (eg. Table) TableCaption.displayName = 'TableCaption'; -TableCaption.propTypes = { - /** - * The table caption contents. - */ - children: PropTypes.node, - /** - * Additional classes to be added to the caption element. - */ - className: PropTypes.string, - /** - * @hide-prop This gets passed from the parent `Table` component when the table `scrollable` prop is set. - */ - _id: PropTypes.string, - /** - * @hide-prop This gets passed from the parent `Table` component when the table `scrollable` prop is set. - */ - _scrollActive: PropTypes.bool, - /** - * @hide-prop This gets passed from the parent `Table` component when the table `scrollable` prop is set. - */ - _scrollableNotice: PropTypes.node, -}; - export default TableCaption; diff --git a/packages/design-system/src/components/Table/TableCell.test.jsx b/packages/design-system/src/components/Table/TableCell.test.tsx similarity index 100% rename from packages/design-system/src/components/Table/TableCell.test.jsx rename to packages/design-system/src/components/Table/TableCell.test.tsx diff --git a/packages/design-system/src/components/Table/TableCell.jsx b/packages/design-system/src/components/Table/TableCell.tsx similarity index 83% rename from packages/design-system/src/components/Table/TableCell.jsx rename to packages/design-system/src/components/Table/TableCell.tsx index f2f0314c80..b89a3d62ea 100644 --- a/packages/design-system/src/components/Table/TableCell.jsx +++ b/packages/design-system/src/components/Table/TableCell.tsx @@ -1,9 +1,69 @@ import React, { useContext } from 'react'; -import PropTypes from 'prop-types'; import TableContext from './TableContext'; import classNames from 'classnames'; -export const TableCell = ({ +export type TableCellScope = 'row' | 'col' | 'rowgroup' | 'colgroup'; +export type TableCellAlign = 'center' | 'left' | 'right'; +export type TableCellComponent = 'td' | 'th'; + +export interface TableCellProps { + /** + * Set the text-align on the table cell content. + */ + align?: TableCellAlign; + /** + * The table cell contents. + */ + children?: React.ReactNode; + /** + * When provided, this will render the passed in component as the HTML element. + * If this prop is undefined, it renders a `` element if the parent component is `TableHead`, + * otherwise, it renders a `` element. + */ + component?: TableCellComponent; + /** + * Additional classes to be added to the row element. + */ + className?: string; + /** + * `TableCell` must define a `headers` prop for stackable tables with a `` element. + * The `headers` prop associates header and data cells for screen readers. + * `headers` consist of a list of space-separated ids that each correspond to a `` element. + * [Read more about the headers attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/td#Attributes). + */ + headers?: string; + /** + * `TableCell` must define an `id` prop for stackable tables with a `` element. + * The `id` prop associates header and data cells for screen readers. + */ + id?: string; + /** + * If this prop is undefined, the component sets a scope attribute of `col` when the parent + * component is `TableHead` to identify the header cell is a header for a column. + */ + scope?: TableCellScope; + /** + * Additional classes to be added to the stacked Title element. + */ + stackedClassName?: string; + /** + * Table data cell's corresponding header title, this stacked title is displayed as the row header + * when a responsive table is vertically stacked. + */ + stackedTitle?: string; + /** + * @hide-prop This gets set from the parent `TableHead` component + */ + _isTableHeadChild?: boolean; +} + +type OmitProps = 'align' | 'children' | 'className' | 'headers' | 'id' | 'scope'; + +export const TableCell: React.FC< + Omit, OmitProps> & + Omit, OmitProps> & + TableCellProps +> = ({ align, children, className, @@ -15,7 +75,7 @@ export const TableCell = ({ stackedClassName, _isTableHeadChild, ...tableCellProps -}) => { +}: TableCellProps) => { const { stackable, warningDisabled } = useContext(TableContext); let Component; @@ -82,55 +142,4 @@ TableCell.defaultProps = { align: 'left', }; -TableCell.propTypes = { - /** - * Set the text-align on the table cell content. - */ - align: PropTypes.oneOf(['center', 'left', 'right']), - /** - * The table cell contents. - */ - children: PropTypes.node, - /** - * Additional classes to be added to the row element. - */ - className: PropTypes.string, - /** - * When provided, this will render the passed in component as the HTML element. - * If this prop is undefined, it renders a `` element if the parent component is `TableHead`, - * otherwise, it renders a `` element. - */ - component: PropTypes.oneOf(['td', 'th']), - /** - * `TableCell` must define a `headers` prop for stackable tables with a `` element. - * The `headers` prop associates header and data cells for screen readers. - * `headers` consist of a list of space-separated ids that each correspond to a `` element. - * [Read more about the headers attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/td#Attributes). - */ - headers: PropTypes.string, - /** - * `TableCell` must define an `id` prop for stackable tables with a `` element. - * The `id` prop associates header and data cells for screen readers. - */ - id: PropTypes.string, - /** - * If this prop is undefined, the component sets a scope attribute of `col` when the parent - * component is `TableHead` to identify the header cell is a header for a column. - */ - scope: PropTypes.oneOf(['row', 'col', 'rowgroup', 'colgroup']), - /** - * Additional classes to be added to the stacked Title element. - */ - stackedClassName: PropTypes.string, - /** - * Table data cell's corresponding header title, this stacked title is displayed as the row header - * when a responsive table is vertically stacked. - */ - stackedTitle: PropTypes.string, - /** - * @hide-prop This gets set from the parent `TableHead` component - */ - _isTableHeadChild: PropTypes.bool, -}; - export default TableCell; diff --git a/packages/design-system/src/components/Table/TableContext.js b/packages/design-system/src/components/Table/TableContext.js deleted file mode 100644 index 4ca914ba50..0000000000 --- a/packages/design-system/src/components/Table/TableContext.js +++ /dev/null @@ -1,5 +0,0 @@ -import React from 'react'; - -const TableContext = React.createContext({ stackable: false, warningDisabled: false }); - -export default TableContext; diff --git a/packages/design-system/src/components/Table/TableContext.ts b/packages/design-system/src/components/Table/TableContext.ts new file mode 100644 index 0000000000..347df4ef8e --- /dev/null +++ b/packages/design-system/src/components/Table/TableContext.ts @@ -0,0 +1,13 @@ +import React from 'react'; + +export interface TableContextType { + stackable: boolean; + warningDisabled: boolean; +} + +export const TableContext = React.createContext({ + stackable: false, + warningDisabled: false, +} as TableContextType); + +export default TableContext; diff --git a/packages/design-system/src/components/Table/TableHead.test.jsx b/packages/design-system/src/components/Table/TableHead.test.tsx similarity index 100% rename from packages/design-system/src/components/Table/TableHead.test.jsx rename to packages/design-system/src/components/Table/TableHead.test.tsx diff --git a/packages/design-system/src/components/Table/TableHead.jsx b/packages/design-system/src/components/Table/TableHead.tsx similarity index 62% rename from packages/design-system/src/components/Table/TableHead.jsx rename to packages/design-system/src/components/Table/TableHead.tsx index 79ae99fa0c..2ad2610096 100644 --- a/packages/design-system/src/components/Table/TableHead.jsx +++ b/packages/design-system/src/components/Table/TableHead.tsx @@ -1,9 +1,19 @@ -import PropTypes from 'prop-types'; import React from 'react'; -export const TableHead = ({ children, ...tableHeadProps }) => { +export interface TableHeadProps { + /** + * The table head contents, usually `TableRow`. + */ + children?: React.ReactNode; +} + +type OmitProps = 'children'; + +export const TableHead: React.FC< + Omit, OmitProps> & TableHeadProps +> = ({ children, ...tableHeadProps }: TableHeadProps) => { const renderChildren = () => { - return React.Children.map(children, (child) => { + return React.Children.map(children, (child: React.ReactElement) => { // Extend props before rendering. if (child && child.props) { return React.cloneElement(child, { @@ -23,11 +33,4 @@ export const TableHead = ({ children, ...tableHeadProps }) => { /* eslint-enable jsx-a11y/no-redundant-roles */ }; -TableHead.propTypes = { - /** - * The table head contents, usually `TableRow`. - */ - children: PropTypes.node, -}; - export default TableHead; diff --git a/packages/design-system/src/components/Table/TableRow.test.jsx b/packages/design-system/src/components/Table/TableRow.test.tsx similarity index 100% rename from packages/design-system/src/components/Table/TableRow.test.jsx rename to packages/design-system/src/components/Table/TableRow.test.tsx diff --git a/packages/design-system/src/components/Table/TableRow.jsx b/packages/design-system/src/components/Table/TableRow.tsx similarity index 53% rename from packages/design-system/src/components/Table/TableRow.jsx rename to packages/design-system/src/components/Table/TableRow.tsx index 758c9edd84..a159d67fdd 100644 --- a/packages/design-system/src/components/Table/TableRow.jsx +++ b/packages/design-system/src/components/Table/TableRow.tsx @@ -1,9 +1,23 @@ -import PropTypes from 'prop-types'; import React from 'react'; -export const TableRow = ({ children, _isTableHeadChild, ...tableRowProps }) => { +export interface TableRowProps { + /** + * The table row contents, usually `TableCell`. + */ + children?: React.ReactNode; + /** + * @hide-prop This gets set from the parent `TableHead` + */ + _isTableHeadChild?: boolean; +} + +type OmitProps = 'children'; + +export const TableRow: React.FC< + Omit, OmitProps> & TableRowProps +> = ({ children, _isTableHeadChild, ...tableRowProps }: TableRowProps) => { const renderChildren = () => { - return React.Children.map(children, (child) => { + return React.Children.map(children, (child: React.ReactElement) => { // Extend props before rendering. if (child && child.props) { return React.cloneElement(child, { @@ -21,15 +35,4 @@ export const TableRow = ({ children, _isTableHeadChild, ...tableRowProps }) => { ); }; -TableRow.propTypes = { - /** - * The table row contents, usually `TableCell`. - */ - children: PropTypes.node, - /** - * @hide-prop This gets set from the parent `TableHead` component - */ - _isTableHeadChild: PropTypes.bool, -}; - export default TableRow; diff --git a/packages/design-system/src/components/Table/__snapshots__/Table.test.jsx.snap b/packages/design-system/src/components/Table/__snapshots__/Table.test.tsx.snap similarity index 78% rename from packages/design-system/src/components/Table/__snapshots__/Table.test.jsx.snap rename to packages/design-system/src/components/Table/__snapshots__/Table.test.tsx.snap index 8ab91e56c1..64c7cc863b 100644 --- a/packages/design-system/src/components/Table/__snapshots__/Table.test.jsx.snap +++ b/packages/design-system/src/components/Table/__snapshots__/Table.test.tsx.snap @@ -97,49 +97,45 @@ exports[`Table table caption scrollable true applies scrollableNotice 1`] = ` `; exports[`Table table responsive stacked table true applies responsive stacked table 1`] = ` -
- + -
- - Foo - -
- -
+ Foo + + + `; exports[`Table table responsive stacked table true applies responsive stacked table ContextProvider 1`] = ` -
- + -
- - Foo - -
- -
+ Foo + + + `; diff --git a/packages/design-system/src/components/Table/__snapshots__/TableBody.test.jsx.snap b/packages/design-system/src/components/Table/__snapshots__/TableBody.test.tsx.snap similarity index 100% rename from packages/design-system/src/components/Table/__snapshots__/TableBody.test.jsx.snap rename to packages/design-system/src/components/Table/__snapshots__/TableBody.test.tsx.snap diff --git a/packages/design-system/src/components/Table/__snapshots__/TableCaption.test.jsx.snap b/packages/design-system/src/components/Table/__snapshots__/TableCaption.test.tsx.snap similarity index 100% rename from packages/design-system/src/components/Table/__snapshots__/TableCaption.test.jsx.snap rename to packages/design-system/src/components/Table/__snapshots__/TableCaption.test.tsx.snap diff --git a/packages/design-system/src/components/Table/__snapshots__/TableCell.test.jsx.snap b/packages/design-system/src/components/Table/__snapshots__/TableCell.test.tsx.snap similarity index 100% rename from packages/design-system/src/components/Table/__snapshots__/TableCell.test.jsx.snap rename to packages/design-system/src/components/Table/__snapshots__/TableCell.test.tsx.snap diff --git a/packages/design-system/src/components/Table/__snapshots__/TableHead.test.jsx.snap b/packages/design-system/src/components/Table/__snapshots__/TableHead.test.tsx.snap similarity index 100% rename from packages/design-system/src/components/Table/__snapshots__/TableHead.test.jsx.snap rename to packages/design-system/src/components/Table/__snapshots__/TableHead.test.tsx.snap diff --git a/packages/design-system/src/components/Table/__snapshots__/TableRow.test.jsx.snap b/packages/design-system/src/components/Table/__snapshots__/TableRow.test.tsx.snap similarity index 100% rename from packages/design-system/src/components/Table/__snapshots__/TableRow.test.jsx.snap rename to packages/design-system/src/components/Table/__snapshots__/TableRow.test.tsx.snap diff --git a/packages/design-system/src/components/Table/index.js b/packages/design-system/src/components/Table/index.ts similarity index 100% rename from packages/design-system/src/components/Table/index.js rename to packages/design-system/src/components/Table/index.ts diff --git a/packages/design-system/src/components/analytics/SendAnalytics.test.ts b/packages/design-system/src/components/analytics/SendAnalytics.test.ts index ee2cf4ea71..bfb069ccaa 100644 --- a/packages/design-system/src/components/analytics/SendAnalytics.test.ts +++ b/packages/design-system/src/components/analytics/SendAnalytics.test.ts @@ -1,6 +1,6 @@ -import { sendAnalyticsEvent } from './SendAnalytics'; +import { sendLinkEvent } from './SendAnalytics'; -describe('sendAnalyticsEvent', () => { +describe('sendLinkEvent', () => { const gaEventProps = { ga_eventType: 'cmsds', ga_eventCategory: 'test category', @@ -13,7 +13,7 @@ describe('sendAnalyticsEvent', () => { it('does nothing if window.utag does not exist', () => { const mock = jest.fn(); window.utag = undefined; - sendAnalyticsEvent({}, gaEventProps); + sendLinkEvent(gaEventProps); expect(mock).not.toHaveBeenCalled(); }); }); @@ -29,24 +29,10 @@ describe('sendAnalyticsEvent', () => { jest.resetAllMocks(); }); - it('calls window.utag.link with default props', () => { - sendAnalyticsEvent({}, gaEventProps); + it('calls window.utag.link with event', () => { + sendLinkEvent(gaEventProps); expect(window.utag?.link).toHaveBeenCalledWith(gaEventProps); }); - - it('calls window.utag.link with extra props', () => { - const gaEventExtraProps = { - ga_eventType: 'cmsds', - ga_eventCategory: 'test category', - ga_eventAction: 'test action', - ga_eventLabel: 'test label', - ga_eventValue: 'test value', - ga_extraProps1: 'test extra props 1', - ga_extraProps2: 'test extra props 2', - }; - sendAnalyticsEvent(gaEventExtraProps, gaEventProps); - expect(window.utag?.link).toHaveBeenCalledWith(gaEventExtraProps); - }); }); describe('with Utag instance - errors', () => { @@ -60,9 +46,7 @@ describe('sendAnalyticsEvent', () => { throw 'test event'; }), }; - expect(sendAnalyticsEvent({}, gaEventProps)).toBe( - 'Error sending event to Tealium test event' - ); + expect(sendLinkEvent(gaEventProps)).toBe('Error sending event to Tealium test event'); }); it('retries on missing utag.link', () => { @@ -70,7 +54,7 @@ describe('sendAnalyticsEvent', () => { jest.useFakeTimers(); window.utag = { link: undefined }; - sendAnalyticsEvent({}, gaEventProps); + sendLinkEvent(gaEventProps); expect(mock).not.toHaveBeenCalled(); window.utag = { link: mock }; @@ -82,7 +66,7 @@ describe('sendAnalyticsEvent', () => { jest.useFakeTimers(); window.utag = { link: undefined }; - expect(sendAnalyticsEvent({}, gaEventProps)).toBe(undefined); + expect(sendLinkEvent(gaEventProps)).toBe(undefined); jest.runAllTimers(); jest.runAllTimers(); diff --git a/packages/design-system/src/components/analytics/SendAnalytics.ts b/packages/design-system/src/components/analytics/SendAnalytics.ts index d2eb631243..831f3eec46 100644 --- a/packages/design-system/src/components/analytics/SendAnalytics.ts +++ b/packages/design-system/src/components/analytics/SendAnalytics.ts @@ -1,4 +1,3 @@ -import merge from 'lodash/merge'; /** * Functions for sending events to Tealium/Google Analytics * Based on HRA Tool & SEP screener & Coverage Tools analytics service: @@ -11,24 +10,14 @@ import merge from 'lodash/merge'; declare global { interface Window { utag?: { - link: (params: AnalyticsPayload) => void; + link: (params: AnalyticsEvent) => void; }; } } -type EventType = 'link'; -const MAX_RETRIES = 3; -const TIMEOUT = 300; +export type EventType = 'link'; -/* eslint-disable camelcase */ -export interface AnalyticsPayload { - ga_eventAction: string; - ga_eventCategory: string; - ga_eventLabel: string; - ga_eventType: string; - ga_eventValue: string; - [additional_props: string]: unknown; -} +export const MAX_LENGTH = 100; export const EVENT_CATEGORY = { contentTools: 'content tools', @@ -36,9 +25,8 @@ export const EVENT_CATEGORY = { uiInteraction: 'ui interaction', }; -export const MAX_LENGTH = 100; - -interface AnalyticsEventProps { +/* eslint-disable camelcase */ +export interface AnalyticsEvent { ga_eventAction: string; ga_eventCategory: string; ga_eventLabel: string; @@ -47,50 +35,36 @@ interface AnalyticsEventProps { [additional_props: string]: unknown; } -export function sendAnalytics(event: EventType, props: AnalyticsPayload, retry = 0): string { - if (window.utag && window.utag[event]) { +const MAX_RETRIES = 3; +const TIMEOUT = 300; + +export function sendAnalytics( + eventType: EventType, + event: Required, + retry = 0 +): string { + if (window.utag && window.utag[eventType]) { try { - window.utag[event](props); - return `Tealium event sent: ${props.ga_eventCategory} - ${props.ga_eventAction} - ${props.ga_eventLabel}`; + window.utag[eventType](event); + return `Tealium event sent: ${event.ga_eventCategory} - ${event.ga_eventAction} - ${event.ga_eventLabel}`; } catch (e) { return `Error sending event to Tealium ${e}`; } } else { if (++retry <= MAX_RETRIES) { - setTimeout(() => sendAnalytics(event, props, retry), retry * TIMEOUT); + setTimeout(() => sendAnalytics(eventType, event, retry), retry * TIMEOUT); } else { return `Tealium event max retries reached`; } } } -export function sendAnalyticsEvent( - overrides: boolean | Record, - defaultPayload: AnalyticsEventProps -): string { - const analyticsDisabled = overrides === false; - if (window.utag && !analyticsDisabled) { - const mergedPayload = merge(defaultPayload, overrides); - const { - ga_eventAction, - ga_eventCategory, - ga_eventLabel, - ga_eventType = 'cmsds', // default value - ga_eventValue = '', // default value - ...other_props - } = mergedPayload; - const payload: AnalyticsPayload = { - ga_eventAction, - ga_eventCategory, - ga_eventLabel, - ga_eventType, - ga_eventValue, - ...other_props, - }; - return sendAnalytics('link', payload); - } else { - return ''; - } +export function sendLinkEvent(payload: AnalyticsEvent) { + return sendAnalytics('link', { + ga_eventType: 'cmsds', // default value + ga_eventValue: '', // default value + ...payload, + }); } /* eslint-enable camelcase */ diff --git a/packages/design-system/src/components/analytics/index.ts b/packages/design-system/src/components/analytics/index.ts index 00f847de38..4d27f55b35 100644 --- a/packages/design-system/src/components/analytics/index.ts +++ b/packages/design-system/src/components/analytics/index.ts @@ -1 +1 @@ -export { default as sendAnalytics } from './SendAnalytics'; +export { default as sendAnalytics, sendLinkEvent } from './SendAnalytics'; diff --git a/packages/design-system/src/styles/base/_link.scss b/packages/design-system/src/styles/base/_link.scss index 4030b300e9..a595294e9b 100644 --- a/packages/design-system/src/styles/base/_link.scss +++ b/packages/design-system/src/styles/base/_link.scss @@ -1,5 +1,5 @@ /* stylelint-disable selector-class-pattern */ -@import '../settings/index.scss'; +@import '../settings/index.scss'; // Links // Default link diff --git a/packages/design-system/src/styles/components/_Button.scss b/packages/design-system/src/styles/components/_Button.scss index 708a92aeb2..541f83b08b 100644 --- a/packages/design-system/src/styles/components/_Button.scss +++ b/packages/design-system/src/styles/components/_Button.scss @@ -96,6 +96,7 @@ .ds-c-button--transparent:visited, .ds-c-button--transparent-inverse, .ds-c-button--transparent-inverse:visited { + background-color: transparent; border-color: transparent; text-decoration: underline; @@ -169,10 +170,10 @@ } } -/* stylelint-disable */ +/* stylelint-disable scss/at-extend-no-missing-placeholder */ %transparent-inverse-button { - border-color: transparent; background-color: transparent; + border-color: transparent; // Default inverse focus styles are overridden above @if $ds-include-focus-styles { @@ -195,7 +196,7 @@ /** * Not recommended usage - * Equivalent to ".ds-c-button--inverse.ds-c-button--transparent" + * Equivalent to ".ds-c-button--inverse.ds-c-button--transparent" */ .ds-c-button--transparent-inverse, .ds-c-button--transparent-inverse:visited { @@ -217,14 +218,14 @@ /** * Not recommended usage - * Equivalent to ".ds-c-button--inverse.ds-c-button--disabled" + * Equivalent to ".ds-c-button--inverse.ds-c-button--disabled" */ .ds-c-button--disabled-inverse, .ds-c-button--disabled-inverse:visited { @extend .ds-c-button--inverse; @extend %disabled-inverse-button; } -/* stylelint-enable */ +/* stylelint-enable scss/at-extend-no-missing-placeholder */ /** * Status variants diff --git a/packages/design-system/src/types/Table/Table.d.ts b/packages/design-system/src/types/Table/Table.d.ts deleted file mode 100644 index 554e0c945e..0000000000 --- a/packages/design-system/src/types/Table/Table.d.ts +++ /dev/null @@ -1,60 +0,0 @@ -import * as React from 'react'; - -export type TableStackableBreakpoint = 'sm' | 'md' | 'lg'; - -export interface TableProps { - /** - * Applies the borderless variation of the table. - */ - borderless?: boolean; - /** - * The table contents, usually `TableCaption`, `TableHead` and `TableBody`. - */ - children: React.ReactNode; - /** - * Additional classes to be added to the root table element. - */ - className?: string; - /** - * Applies the compact variation of the table. - */ - compact?: boolean, - /** - * @hide-prop [Deprecated] Use compact instead. - */ - dense?: boolean, - /** - * Applies a horizontal scrollbar and scrollable notice on `TableCaption` when the `Table`'s contents exceed the container width. - */ - scrollable?: boolean; - /** - * Additional text or content to display when the horizontal scrollbar is visible to give the user notice of the scroll behavior. - * This prop will only be used when the `Table` `scrollable` prop is set and the table width is wider than the viewport. - */ - scrollableNotice?: React.ReactNode; - /** - * A stackable variation of the table. - * When `stackable` is set, `id` or `headers` prop is required in `Table` - */ - stackable?: boolean; - /** - * Applies responsive styles to vertically stacked rows at different viewport sizes. - */ - stackableBreakpoint?: TableStackableBreakpoint; - /** - * A striped variation of the table. - */ - striped?: boolean; - /** - * Disables the warning message on development console when a responsive stackable table cell does not contain an `id` or `headers`. - * It's recommended that accessibility with screen readers is tested to ensure the stacked table meets the requirement. - */ - warningDisabled?: boolean, -} - -export default class Table extends React.Component< - React.ComponentPropsWithRef<'table'> & TableProps, - any -> { - render(): JSX.Element; -} diff --git a/packages/design-system/src/types/Table/TableBody.d.ts b/packages/design-system/src/types/Table/TableBody.d.ts deleted file mode 100644 index 5eff89097c..0000000000 --- a/packages/design-system/src/types/Table/TableBody.d.ts +++ /dev/null @@ -1,12 +0,0 @@ -import * as React from 'react'; - -export interface TableBodyProps { - /** - * The table body contents, usually `TableRow`. - */ - children?: React.ReactNode; -} - -declare const TableBody: React.FC & TableBodyProps>; - -export default TableBody; diff --git a/packages/design-system/src/types/Table/TableCaption.d.ts b/packages/design-system/src/types/Table/TableCaption.d.ts deleted file mode 100644 index ae68529c23..0000000000 --- a/packages/design-system/src/types/Table/TableCaption.d.ts +++ /dev/null @@ -1,28 +0,0 @@ -import * as React from 'react'; - -export interface TableCaptionProps { - /** - * The table caption contents. - */ - children?: React.ReactNode; - /** - * Additional classes to be added to the caption element. - */ - className?: string; - /** - * @hide-prop This gets passed from the parent `Table` component when the table `scrollable` prop is set. - */ - _id?: string; - /** - * @hide-prop This gets passed from the parent `Table` component when the table `scrollable` prop is set. - */ - _scrollActive?: boolean; - /** - * @hide-prop This gets passed from the parent `Table` component when the table `scrollable` prop is set. - */ - _scrollableNotice?: React.ReactNode; -} - -declare const TableCaption: React.FC; - -export default TableCaption; diff --git a/packages/design-system/src/types/Table/TableCell.d.ts b/packages/design-system/src/types/Table/TableCell.d.ts deleted file mode 100644 index f94ccee2ff..0000000000 --- a/packages/design-system/src/types/Table/TableCell.d.ts +++ /dev/null @@ -1,64 +0,0 @@ -import * as React from 'react'; - -export type TableCellScope = 'row' | 'col' | 'rowgroup' | 'colgroup'; -export type TableCellAlign = 'center' | 'left' | 'right'; -export type TableCellComponent = 'td' | 'th'; - -export interface TableCellProps { - /** - * Set the text-align on the table cell content. - */ - align?: TableCellAlign; - /** - * The table cell contents. - */ - children?: React.ReactNode; - /** - * When provided, this will render the passed in component as the HTML element. - * If this prop is undefined, it renders a `` element if the parent component is `TableHead`, - * otherwise, it renders a `` element. - */ - component?: TableCellComponent; - /** - * Additional classes to be added to the row element. - */ - className?: string; - /** - * `TableCell` must define a `headers` prop for stackable tables with a `` element. - * The `headers` prop associates header and data cells for screen readers. - * `headers` consist of a list of space-separated ids that each correspond to a `` element. - * [Read more about the headers attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/td#Attributes). - */ - headers?: string; - /** - * `TableCell` must define an `id` prop for stackable tables with a `` element. - * The `id` prop associates header and data cells for screen readers. - */ - id?: string; - /** - * If this prop is undefined, the component sets a scope attribute of `col` when the parent - * component is `TableHead` to identify the header cell is a header for a column. - */ - scope?: TableCellScope; - /** - * Additional classes to be added to the stacked Title element. - */ - stackedClassName?: string; - /** - * Table data cell's corresponding header title, this stacked title is displayed as the row header - * when a responsive table is vertically stacked. - */ - stackedTitle?: string; - /** - * @hide-prop This gets set from the parent `TableHead` component - */ - _isTableHeadChild?: boolean; -} - -declare const TableCell: React.FC< - React.ComponentPropsWithRef<'th'> & - React.ComponentPropsWithRef<'td'> & - TableCellProps ->; - -export default TableCell; diff --git a/packages/design-system/src/types/Table/TableContext.d.ts b/packages/design-system/src/types/Table/TableContext.d.ts deleted file mode 100644 index 3d3599d679..0000000000 --- a/packages/design-system/src/types/Table/TableContext.d.ts +++ /dev/null @@ -1,5 +0,0 @@ -import * as React from 'react'; - -declare const TableContext: React.FC; - -export default TableContext; diff --git a/packages/design-system/src/types/Table/TableHead.d.ts b/packages/design-system/src/types/Table/TableHead.d.ts deleted file mode 100644 index 224f2b25cc..0000000000 --- a/packages/design-system/src/types/Table/TableHead.d.ts +++ /dev/null @@ -1,12 +0,0 @@ -import * as React from 'react'; - -export interface TableHeadProps { - /** - * The table head contents, usually `TableRow`. - */ - children?: React.ReactNode; -} - -declare const TableHead: React.FC & TableHeadProps>; - -export default TableHead; diff --git a/packages/design-system/src/types/Table/TableRow.d.ts b/packages/design-system/src/types/Table/TableRow.d.ts deleted file mode 100644 index e1367e6abf..0000000000 --- a/packages/design-system/src/types/Table/TableRow.d.ts +++ /dev/null @@ -1,16 +0,0 @@ -import * as React from 'react'; - -export interface TableRowProps { - /** - * The table row contents, usually `TableCell`. - */ - children?: React.ReactNode; - /** - * @hide-prop This gets set from the parent `TableHead` - */ - _isTableHeadChild?: boolean; -} - -declare const TableRow: React.FC & TableRowProps>; - -export default TableRow; diff --git a/packages/design-system/src/types/index.d.ts b/packages/design-system/src/types/index.d.ts index cc01850fe0..06f63e3ade 100644 --- a/packages/design-system/src/types/index.d.ts +++ b/packages/design-system/src/types/index.d.ts @@ -8,12 +8,6 @@ export { default as MonthPicker, getMonthNames } from './MonthPicker/MonthPicker export { default as Review } from './Review/Review'; export { default as SkipNav } from './SkipNav/SkipNav'; export { default as StepList } from './StepList/StepList'; -export { default as Table } from './Table/Table'; -export { default as TableBody } from './Table/TableBody'; -export { default as TableCaption } from './Table/TableCaption'; -export { default as TableCell } from './Table/TableCell'; -export { default as TableHead } from './Table/TableHead'; -export { default as TableRow } from './Table/TableRow'; export { default as Tabs } from './Tabs/Tabs'; export { default as TabPanel } from './Tabs/TabPanel'; export { default as Tooltip } from './Tooltip/Tooltip'; @@ -35,6 +29,7 @@ export * from './FormControl'; export * from './FormLabel'; export * from './InlineError'; export * from './Spinner'; +export * from './Table'; export * from './TextField'; export * from './Tooltip'; diff --git a/packages/design-system/yarn.lock b/packages/design-system/yarn.lock index a1d7c39b61..08aa30a898 100644 --- a/packages/design-system/yarn.lock +++ b/packages/design-system/yarn.lock @@ -910,10 +910,10 @@ path-is-absolute@^1.0.0, path-is-absolute@^1.0.1: resolved "https://registry.yarnpkg.com/path-is-absolute/-/path-is-absolute-1.0.1.tgz#174b9268735534ffbc7ace6bf53a5a9e1b5c5f5f" integrity sha1-F0uSaHNVNP+8es5r9TpanhtcX18= -path-parse@^1.0.6: - version "1.0.6" - resolved "https://registry.yarnpkg.com/path-parse/-/path-parse-1.0.6.tgz#d62dbb5679405d72c4737ec58600e9ddcf06d24c" - integrity sha512-GSmOT2EbHrINBf9SR7CDELwlJ8AENk3Qn7OikK4nFYAu3Ote2+JYNVvkpAEQm3/TLNEJFD/xZJjzyxg3KBWOzw== +path-parse@1.0.7, path-parse@^1.0.6: + version "1.0.7" + resolved "https://registry.yarnpkg.com/path-parse/-/path-parse-1.0.7.tgz#fbc114b60ca42b30d9daf5858e4bd68bbedb6735" + integrity sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw== path-platform@~0.11.15: version "0.11.15" diff --git a/packages/eslint-config-design-system/yarn.lock b/packages/eslint-config-design-system/yarn.lock index a5f12a7e71..330a256414 100644 --- a/packages/eslint-config-design-system/yarn.lock +++ b/packages/eslint-config-design-system/yarn.lock @@ -597,10 +597,10 @@ path-exists@^3.0.0: resolved "https://registry.yarnpkg.com/path-exists/-/path-exists-3.0.0.tgz#ce0ebeaa5f78cb18925ea7d810d7b59b010fd515" integrity sha1-zg6+ql94yxiSXqfYENe1mwEP1RU= -path-parse@^1.0.6: - version "1.0.6" - resolved "https://registry.yarnpkg.com/path-parse/-/path-parse-1.0.6.tgz#d62dbb5679405d72c4737ec58600e9ddcf06d24c" - integrity sha512-GSmOT2EbHrINBf9SR7CDELwlJ8AENk3Qn7OikK4nFYAu3Ote2+JYNVvkpAEQm3/TLNEJFD/xZJjzyxg3KBWOzw== +path-parse@1.0.7, path-parse@^1.0.6: + version "1.0.7" + resolved "https://registry.yarnpkg.com/path-parse/-/path-parse-1.0.7.tgz#fbc114b60ca42b30d9daf5858e4bd68bbedb6735" + integrity sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw== path-type@^2.0.0: version "2.0.0" diff --git a/yarn.lock b/yarn.lock index 0e73e010e9..f578d70351 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2,6 +2,13 @@ # yarn lockfile v1 +"@axe-core/webdriverjs@^4.2.2": + version "4.2.2" + resolved "https://registry.yarnpkg.com/@axe-core/webdriverjs/-/webdriverjs-4.2.2.tgz#430a3caf365e4dfa4314fe4ea644543fd5f868f3" + integrity sha512-h3VrFXAHAIinoHQU/u9bmLUET/gAfab3y7VpUt6HOHe4NKsk9wi+6zoM3L8yCZSWriItmK3nuVrn6byeC+/Pcw== + dependencies: + axe-core "^4.2.3" + "@babel/code-frame@^7.0.0", "@babel/code-frame@^7.8.3": version "7.8.3" resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.8.3.tgz#33e25903d7481181534e12ec0a25f16b6fcf419e" @@ -3650,19 +3657,10 @@ aws4@^1.8.0: resolved "https://registry.yarnpkg.com/aws4/-/aws4-1.9.1.tgz#7e33d8f7d449b3f673cd72deb9abdc552dbe528e" integrity sha512-wMHVg2EOHaMRxbzgFJ9gtjOOCrI80OHLG14rxi28XwOW8ux6IiEbRCGGGqCtdAIg4FQCbW20k9RsT4y3gJlFug== -axe-core@^3.3.1: - version "3.5.5" - resolved "https://registry.yarnpkg.com/axe-core/-/axe-core-3.5.5.tgz#84315073b53fa3c0c51676c588d59da09a192227" - integrity sha512-5P0QZ6J5xGikH780pghEdbEKijCTrruK9KxtPZCFWUpef0f6GipO+xEZ5GKCb020mmqgbiNO6TcA55CriL784Q== - -axe-webdriverjs@^2.3.0: - version "2.3.0" - resolved "https://registry.yarnpkg.com/axe-webdriverjs/-/axe-webdriverjs-2.3.0.tgz#92511fbce38624a57e1aa861dd8a3c73c6a3a972" - integrity sha512-AuUsX5OFTXOJ6reIKjtGay4O656n5G+m8MzhfL1SC8MHINBFFFn3Taucckn8+UZYJuTtNEobllSfiuPTHyKnSA== - dependencies: - axe-core "^3.3.1" - babel-runtime "^6.26.0" - depd "^2.0.0" +axe-core@^4.2.3: + version "4.3.3" + resolved "https://registry.yarnpkg.com/axe-core/-/axe-core-4.3.3.tgz#b55cd8e8ddf659fe89b064680e1c6a4dceab0325" + integrity sha512-/lqqLAmuIPi79WYfRpy2i8z+x+vxU3zX2uAm0gs1q52qTuKwolOj1P8XbufpXcsydrpKx2yGn2wzAnxCMV86QA== axios@0.19.0: version "0.19.0" @@ -3782,14 +3780,6 @@ babel-preset-jest@^25.5.0: babel-plugin-jest-hoist "^25.5.0" babel-preset-current-node-syntax "^0.1.2" -babel-runtime@^6.26.0: - version "6.26.0" - resolved "https://registry.yarnpkg.com/babel-runtime/-/babel-runtime-6.26.0.tgz#965c7058668e82b55d7bfe04ff2337bc8b5647fe" - integrity sha1-llxwWGaOgrVde/4E/yM3vItWR/4= - dependencies: - core-js "^2.4.0" - regenerator-runtime "^0.11.0" - bach@^1.0.0: version "1.2.0" resolved "https://registry.yarnpkg.com/bach/-/bach-1.2.0.tgz#4b3ce96bf27134f79a1b414a51c14e34c3bd9880" @@ -4557,10 +4547,10 @@ chrome-trace-event@^1.0.2: dependencies: tslib "^1.9.0" -chromedriver@91.0.0: - version "91.0.0" - resolved "https://registry.yarnpkg.com/chromedriver/-/chromedriver-91.0.0.tgz#b8c07d715c1bde2ed5817757e923bd65565c8f94" - integrity sha512-0eQGLDWvfVd1apkqQpt4452bCATrsj50whhVzMqPiazNSfCXXwfYWRonYxx3DVFCG3+RwSCLvsk8/vpuojCyJA== +chromedriver@93.0.0: + version "93.0.0" + resolved "https://registry.yarnpkg.com/chromedriver/-/chromedriver-93.0.0.tgz#6c136a074248b88efe5851bca7e41110aff5aeb9" + integrity sha512-WHntgiZf13rds6SjeFRgH02prad8k+wWrQSaj5QPi0kaNJUukdJNDJG7pn8OshWTKTJZ6oqgvMQ1mvnIIBY5GQ== dependencies: "@testim/chrome-version" "^1.0.7" axios "^0.21.1" @@ -4906,11 +4896,6 @@ compare-func@^1.3.1: array-ify "^1.0.0" dot-prop "^3.0.0" -compare-versions@^3.6.0: - version "3.6.0" - resolved "https://registry.yarnpkg.com/compare-versions/-/compare-versions-3.6.0.tgz#1a5689913685e5a87637b8d3ffca75514ec41d62" - integrity sha512-W6Af2Iw1z4CB7q4uU4hv646dW9GQuBM+YpC0UvUCWSD8w90SJjp+ujJuXaEMtAXBtSqGfMPuFOVn4/+FlaqfBA== - component-bind@1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/component-bind/-/component-bind-1.0.0.tgz#00c608ab7dcd93897c0009651b1d3a8e1e73bbd1" @@ -5159,11 +5144,6 @@ core-js-pure@^3.0.0: resolved "https://registry.yarnpkg.com/core-js-pure/-/core-js-pure-3.6.5.tgz#c79e75f5e38dbc85a662d91eea52b8256d53b813" integrity sha512-lacdXOimsiD0QyNf9BC/mxivNJ/ybBGJXQFKzRekp1WTHoVUWsUHEn+2T8GJAzzIhyOuXA+gOxCVN3l+5PLPUA== -core-js@^2.4.0: - version "2.6.11" - resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.6.11.tgz#38831469f9922bded8ee21c9dc46985e0399308c" - integrity sha512-5wjnpaT/3dV+XB4borEsnAYQchn00XSgTAWKDkEqv+K8KevjbzmofK6hfJ9TZIlpj2N0xQpazy7PiRQiWHqzWg== - core-js@^3.5.0, core-js@^3.6.5: version "3.6.5" resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.6.5.tgz#7395dc273af37fb2e50e9bd3d9fe841285231d1a" @@ -5769,11 +5749,6 @@ delegates@^1.0.0: resolved "https://registry.yarnpkg.com/delegates/-/delegates-1.0.0.tgz#84c6e159b81904fdca59a0ef44cd870d31250f9a" integrity sha1-hMbhWbgZBP3KWaDvRM2HDTElD5o= -depd@^2.0.0: - version "2.0.0" - resolved "https://registry.yarnpkg.com/depd/-/depd-2.0.0.tgz#b696163cc757560d09cf22cc8fad1571b79e76df" - integrity sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw== - depd@~1.1.2: version "1.1.2" resolved "https://registry.yarnpkg.com/depd/-/depd-1.1.2.tgz#9bcd52e14c097763e749b274c4346ed2e560b5a9" @@ -7193,13 +7168,6 @@ find-up@^4.0.0, find-up@^4.1.0: locate-path "^5.0.0" path-exists "^4.0.0" -find-versions@^3.2.0: - version "3.2.0" - resolved "https://registry.yarnpkg.com/find-versions/-/find-versions-3.2.0.tgz#10297f98030a786829681690545ef659ed1d254e" - integrity sha512-P8WRou2S+oe222TOCHitLy8zj+SIsVJh52VP4lvXkaFVnOFFdoWv1H1Jjvel1aI6NCFOAaeAVm8qrI0odiLcww== - dependencies: - semver-regex "^2.0.0" - findup-sync@^2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/findup-sync/-/findup-sync-2.0.0.tgz#9326b1488c22d1a6088650a86901b2d9a90a2cbc" @@ -8502,21 +8470,10 @@ humanize-ms@^1.2.1: dependencies: ms "^2.0.0" -husky@^4.2.5: - version "4.2.5" - resolved "https://registry.yarnpkg.com/husky/-/husky-4.2.5.tgz#2b4f7622673a71579f901d9885ed448394b5fa36" - integrity sha512-SYZ95AjKcX7goYVZtVZF2i6XiZcHknw50iXvY7b0MiGoj5RwdgRQNEHdb+gPDPCXKlzwrybjFjkL6FOj8uRhZQ== - dependencies: - chalk "^4.0.0" - ci-info "^2.0.0" - compare-versions "^3.6.0" - cosmiconfig "^6.0.0" - find-versions "^3.2.0" - opencollective-postinstall "^2.0.2" - pkg-dir "^4.2.0" - please-upgrade-node "^3.2.0" - slash "^3.0.0" - which-pm-runs "^1.0.0" +husky@^7.0.0: + version "7.0.1" + resolved "https://registry.yarnpkg.com/husky/-/husky-7.0.1.tgz#579f4180b5da4520263e8713cc832942b48e1f1c" + integrity sha512-gceRaITVZ+cJH9sNHqx5tFwbzlLCVxtVZcusME8JYQ8Edy5mpGDOqD8QBCdMhpyo9a+JXddnujQ4rpY2Ff9SJA== iconv-lite@0.4.24, iconv-lite@^0.4.24, iconv-lite@~0.4.13: version "0.4.24" @@ -9989,9 +9946,9 @@ jsx-ast-utils@^2.2.1, jsx-ast-utils@^2.2.3: object.assign "^4.1.0" jszip@^3.2.2: - version "3.5.0" - resolved "https://registry.yarnpkg.com/jszip/-/jszip-3.5.0.tgz#b4fd1f368245346658e781fec9675802489e15f6" - integrity sha512-WRtu7TPCmYePR1nazfrtuF216cIVon/3GWOvHS9QR5bIwSbnxtdpma6un3jyGGNhHsKCSzn5Ypk+EkDRvTGiFA== + version "3.7.1" + resolved "https://registry.yarnpkg.com/jszip/-/jszip-3.7.1.tgz#bd63401221c15625a1228c556ca8a68da6fda3d9" + integrity sha512-ghL0tz1XG9ZEmRMcEN2vt7xabrDdqHHeykgARpmZ0BiIctWxM47Vt63ZO2dnp4QYt/xJVLLy5Zv1l/xRdh2byg== dependencies: lie "~3.3.0" pako "~1.0.2" @@ -11874,11 +11831,6 @@ onetime@^5.1.0: dependencies: mimic-fn "^2.1.0" -opencollective-postinstall@^2.0.2: - version "2.0.2" - resolved "https://registry.yarnpkg.com/opencollective-postinstall/-/opencollective-postinstall-2.0.2.tgz#5657f1bede69b6e33a45939b061eb53d3c6c3a89" - integrity sha512-pVOEP16TrAO2/fjej1IdOyupJY8KDUM1CvsaScRbw6oddvpQoOfGk4ywha0HKKVAD6RkW4x6Q+tNBwhf3Bgpuw== - openurl@1.1.1: version "1.1.1" resolved "https://registry.yarnpkg.com/openurl/-/openurl-1.1.1.tgz#3875b4b0ef7a52c156f0db41d4609dbb0f94b387" @@ -12311,9 +12263,9 @@ path-key@^3.0.0, path-key@^3.1.0: integrity sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q== path-parse@^1.0.6: - version "1.0.6" - resolved "https://registry.yarnpkg.com/path-parse/-/path-parse-1.0.6.tgz#d62dbb5679405d72c4737ec58600e9ddcf06d24c" - integrity sha512-GSmOT2EbHrINBf9SR7CDELwlJ8AENk3Qn7OikK4nFYAu3Ote2+JYNVvkpAEQm3/TLNEJFD/xZJjzyxg3KBWOzw== + version "1.0.7" + resolved "https://registry.yarnpkg.com/path-parse/-/path-parse-1.0.7.tgz#fbc114b60ca42b30d9daf5858e4bd68bbedb6735" + integrity sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw== path-root-regex@^0.1.0: version "0.1.2" @@ -13654,11 +13606,6 @@ regenerate@^1.4.0: resolved "https://registry.yarnpkg.com/regenerate/-/regenerate-1.4.1.tgz#cad92ad8e6b591773485fbe05a485caf4f457e6f" integrity sha512-j2+C8+NtXQgEKWk49MMP5P/u2GhnahTtVkRIHr5R5lVRlbKvmQ+oS+A5aLKWp2ma5VkT8sh6v+v4hbH0YHR66A== -regenerator-runtime@^0.11.0: - version "0.11.1" - resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz#be05ad7f9bf7d22e056f9726cee5017fbf19e2e9" - integrity sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg== - regenerator-runtime@^0.13.3, regenerator-runtime@^0.13.4, regenerator-runtime@^0.13.5: version "0.13.5" resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.5.tgz#d878a1d094b4306d10b9096484b33ebd55e26697" @@ -14234,11 +14181,6 @@ semver-greatest-satisfied-range@^1.1.0: dependencies: sver-compat "^1.5.0" -semver-regex@^2.0.0: - version "2.0.0" - resolved "https://registry.yarnpkg.com/semver-regex/-/semver-regex-2.0.0.tgz#a93c2c5844539a770233379107b38c7b4ac9d338" - integrity sha512-mUdIBBvdn0PLOeP3TEkMH7HHeUP3GjsXCwKarjv/kGmUFOYg1VqEemKhoQpWMu6X2I8kHeuVdGibLGkVK+/5Qw== - "semver@2 || 3 || 4 || 5", "semver@2.x || 3.x || 4 || 5", semver@^5.4.1, semver@^5.5.0, semver@^5.5.1, semver@^5.6.0, semver@^5.7.0, semver@^5.7.1: version "5.7.1" resolved "https://registry.yarnpkg.com/semver/-/semver-5.7.1.tgz#a954f931aeba508d307bbf069eff0c01c96116f7" @@ -16536,11 +16478,6 @@ which-module@^2.0.0: resolved "https://registry.yarnpkg.com/which-module/-/which-module-2.0.0.tgz#d9ef07dce77b9902b8a3a8fa4b31c3e3f7e6e87a" integrity sha1-2e8H3Od7mQK4o6j6SzHD4/fm6Ho= -which-pm-runs@^1.0.0: - version "1.0.0" - resolved "https://registry.yarnpkg.com/which-pm-runs/-/which-pm-runs-1.0.0.tgz#670b3afbc552e0b55df6b7780ca74615f23ad1cb" - integrity sha1-Zws6+8VS4LVd9rd4DKdGFfI60cs= - which@1, which@^1.2.14, which@^1.2.9, which@^1.3.1: version "1.3.1" resolved "https://registry.yarnpkg.com/which/-/which-1.3.1.tgz#a45043d54f5805316da8d62f9f50918d3da70b0a"