From f71666cf79307d2fc3deb0b94846b6c3f6c8aebd Mon Sep 17 00:00:00 2001 From: Scott Weber Date: Wed, 29 Sep 2021 13:08:30 -0400 Subject: [PATCH] Feature/pagination (#1089) * initial pagination commit * pagination style updates * SCSS update * adding a11y * Add docs on styling options * add aria for next and previous * update to use ol * 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 * Scaffold Pagination component. * 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> * Implement page render logic for expanded Pagination * Add comments and support for compact prop. * 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 * Add custom href support to pages. * Update Pagination range to max of 7 pages instead of 5. * Implement active page state change. * Hide pagination nav links if active page is first or last in range. * 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) * Add Pagination type definitions. Signed-off-by: zarahzachz * Implement props to change prev/next labels and a11y support for compact view. * Add TS definitions. * Refactor pagination state into wrapping component. * Implement classnames and create State component for docs site. * Add TS syntax. * Add documentation for prop interfaces. * Update comment and prop names in example. * Feature/pagination unit tests (#1124) * unit test wip * updated unit tests for pagination * simplifying pagination examples in doc site Co-authored-by: Sarah * Implement mobile media query. * Refactor Pagination to use Button and update unit tests to include compact tests. * WNMGDS-1064 - Fix text-underline bug (#1125) * Update to auto * kick off GHA * Write Pagination documentation and add extra comments to component. * Implement E2E tests. * Update Sass var for more clarification. * Add ids to Pagination examples for e2e tests. * Add support for aria labels on various elements. * Update snapshots and remove aria-label on current page (redundant). * Check for existence of window before setting media query. * Address style layout issues on prev/next buttons. * Refactor Page to use Button, update snapshots and markup in example. * Feature/pagination unit tests fixed (#1134) * updated unit tests for pagination * updated chrome driver to run e2e tests * Bump chromedriver in scripts package. * Change list of pages to unordered tag for a11y purposes. * Update unit tests. * update snapshot * Update list styles. * [NO-TICKET] Update chromedriver from version 91 to 93 (#1136) * Move ARIA label for compact view to nested span. * Clean up a11y docs. * 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 * [NO-TICKET] Expose type definitions for analytics modules (#1145) Had to explicitly add the `analytics` module to the export list for TS types * Update Page test to correct language. * update table example to fix right aligned header (#1153) * Committing autolinting fixes. * Removing SR span - seemed like a redundant solution to non-SR markup. * Add styles to wrapping Pagination class to expand/contract based on parent width. * add class to prev and next items * Update styles * Update snapshots * Change hrefs to accept function, allowing users to customize how page is routed. * Add support for disabled navigation styles (update tests and html example). * Remove hidden button style support and update snapshot. * Update Page to use href prop. * Add unit test for page href. * Hide pagination nav if prop true. Co-authored-by: Sarah 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: Sarah Sachs Co-authored-by: Patrick Wolfert Co-authored-by: David Carek --- .github/workflows/build.yml | 8 +- .../src/components/App.tsx | 2 + .../components/Examples/PaginationExample.tsx | 13 + .../create-react-app/src/components/App.js | 2 + .../components/Examples/PaginationExample.js | 13 + .../Pagination/Pagination.example.jsx | 86 +++++ .../Pagination/_Pagination.docs.scss | 83 ++++ .../Pagination/pagination.example.html | 154 ++++++++ .../src/pages/components/State/State.jsx | 9 + .../src/components/Pagination/Ellipses.tsx | 9 + .../src/components/Pagination/Page.test.tsx | 19 + .../src/components/Pagination/Page.tsx | 50 +++ .../Pagination/Pagination.e2e.test.js | 32 ++ .../components/Pagination/Pagination.test.tsx | 264 +++++++++++++ .../src/components/Pagination/Pagination.tsx | 354 ++++++++++++++++++ .../__snapshots__/Page.test.tsx.snap | 27 ++ .../__snapshots__/Pagination.test.tsx.snap | 212 +++++++++++ .../src/components/Pagination/index.ts | 1 + .../components/Pagination/matchMedia.mock.js | 11 + .../design-system/src/components/index.js | 1 + .../src/images/chevron-left-solid.svg | 1 + .../src/images/chevron-right-solid.svg | 1 + .../src/styles/components/_Pagination.scss | 85 +++++ .../src/styles/components/index.scss | 1 + packages/design-system/src/types/index.d.ts | 1 + 25 files changed, 1437 insertions(+), 2 deletions(-) create mode 100644 examples/create-react-app-typescript/src/components/Examples/PaginationExample.tsx create mode 100644 examples/create-react-app/src/components/Examples/PaginationExample.js create mode 100644 packages/design-system-docs/src/pages/components/Pagination/Pagination.example.jsx create mode 100644 packages/design-system-docs/src/pages/components/Pagination/_Pagination.docs.scss create mode 100644 packages/design-system-docs/src/pages/components/Pagination/pagination.example.html create mode 100644 packages/design-system-docs/src/pages/components/State/State.jsx create mode 100644 packages/design-system/src/components/Pagination/Ellipses.tsx create mode 100644 packages/design-system/src/components/Pagination/Page.test.tsx create mode 100644 packages/design-system/src/components/Pagination/Page.tsx create mode 100644 packages/design-system/src/components/Pagination/Pagination.e2e.test.js create mode 100644 packages/design-system/src/components/Pagination/Pagination.test.tsx create mode 100644 packages/design-system/src/components/Pagination/Pagination.tsx create mode 100644 packages/design-system/src/components/Pagination/__snapshots__/Page.test.tsx.snap create mode 100644 packages/design-system/src/components/Pagination/__snapshots__/Pagination.test.tsx.snap create mode 100644 packages/design-system/src/components/Pagination/index.ts create mode 100644 packages/design-system/src/components/Pagination/matchMedia.mock.js create mode 100644 packages/design-system/src/images/chevron-left-solid.svg create mode 100644 packages/design-system/src/images/chevron-right-solid.svg create mode 100644 packages/design-system/src/styles/components/_Pagination.scss 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/examples/create-react-app-typescript/src/components/App.tsx b/examples/create-react-app-typescript/src/components/App.tsx index c3db5c0774..27a02332b8 100644 --- a/examples/create-react-app-typescript/src/components/App.tsx +++ b/examples/create-react-app-typescript/src/components/App.tsx @@ -14,6 +14,7 @@ import HelpDrawerExample from './Examples/HelpDrawerExample'; import MaskedFieldExample from './Examples/MaskedFieldExample'; import ModalDialogExample from './Examples/ModalDialogExample'; import MonthPickerExample from './Examples/MonthPickerExample'; +import PaginationExample from './Examples/PaginationExample'; import SpinnerExample from './Examples/SpinnerExample'; import TableExample from './Examples/TableExample'; import TabsExample from './Examples/TabsExample'; @@ -110,6 +111,7 @@ function App() { + diff --git a/examples/create-react-app-typescript/src/components/Examples/PaginationExample.tsx b/examples/create-react-app-typescript/src/components/Examples/PaginationExample.tsx new file mode 100644 index 0000000000..da868d70c4 --- /dev/null +++ b/examples/create-react-app-typescript/src/components/Examples/PaginationExample.tsx @@ -0,0 +1,13 @@ +import { Pagination } from '@cmsgov/design-system'; +import React from 'react'; + +function PaginationExample(): React.ReactElement { + return ( +
+

Pagination Example

+ +
+ ); +} + +export default PaginationExample; diff --git a/examples/create-react-app/src/components/App.js b/examples/create-react-app/src/components/App.js index 9ee2297e6b..9184580962 100644 --- a/examples/create-react-app/src/components/App.js +++ b/examples/create-react-app/src/components/App.js @@ -14,6 +14,7 @@ import HelpDrawerExample from './Examples/HelpDrawerExample'; import MaskedFieldExample from './Examples/MaskedFieldExample'; import ModalDialogExample from './Examples/ModalDialogExample'; import MonthPickerExample from './Examples/MonthPickerExample'; +import PaginationExample from './Examples/PaginationExample'; import SpinnerExample from './Examples/SpinnerExample'; import TableExample from './Examples/TableExample'; import TabsExample from './Examples/TabsExample'; @@ -110,6 +111,7 @@ function App() { + diff --git a/examples/create-react-app/src/components/Examples/PaginationExample.js b/examples/create-react-app/src/components/Examples/PaginationExample.js new file mode 100644 index 0000000000..66fea20027 --- /dev/null +++ b/examples/create-react-app/src/components/Examples/PaginationExample.js @@ -0,0 +1,13 @@ +import { Pagination } from '@cmsgov/design-system'; +import React from 'react'; + +function PaginationExample() { + return ( +
+

Pagination Example

+ +
+ ); +} + +export default PaginationExample; diff --git a/packages/design-system-docs/src/pages/components/Pagination/Pagination.example.jsx b/packages/design-system-docs/src/pages/components/Pagination/Pagination.example.jsx new file mode 100644 index 0000000000..3ab3b20ea7 --- /dev/null +++ b/packages/design-system-docs/src/pages/components/Pagination/Pagination.example.jsx @@ -0,0 +1,86 @@ +import { Pagination } from '@design-system'; +import React from 'react'; +import ReactDOM from 'react-dom'; +import State from '../State/State'; + +ReactDOM.render( +
+
Default pagination
+ + {([page, setPage]) => { + const totalPages = 15; + const onPageChange = (evt, page) => { + evt.preventDefault(); + setPage(page); + }; + return ( + <> + + Current page: {page} / {totalPages} + + `#/results/${page}`} + /> + + ); + }} + + +
Pagination with hidden navigation
+ + {([page, setPage]) => { + const totalPages = 15; + const onPageChange = (evt, page) => { + evt.preventDefault(); + setPage(page); + }; + return ( + <> + + Current page: {page} / {totalPages} + + `#${page}`} + isNavigationHidden + /> + + ); + }} + + +
Compact pagination
+ + {([page, setPage]) => { + const totalPages = 15; + const onPageChange = (evt, page) => { + evt.preventDefault(); + setPage(page); + }; + return ( + <> + + Current page: {page} / {totalPages} + + `#/results?page=${page}`} + compact + /> + + ); + }} + +
, + document.getElementById('js-example') +); diff --git a/packages/design-system-docs/src/pages/components/Pagination/_Pagination.docs.scss b/packages/design-system-docs/src/pages/components/Pagination/_Pagination.docs.scss new file mode 100644 index 0000000000..6dfa233f69 --- /dev/null +++ b/packages/design-system-docs/src/pages/components/Pagination/_Pagination.docs.scss @@ -0,0 +1,83 @@ +/* +Pagination + +@uswds https://designsystem.digital.gov/components/pagination/ + +Pagination is navigation for paginated content. + +## About the pagination component + +Paginated content is any content split into multiple pages determined by a specific amount of content per page, not split by any meaningful attribute, like feature or subject or step. Search results and article collections are often paginated. Readers use the pagination component to move from page to page in paginated content, or directly to the first or last page of the paginated set. + +Markup: pagination.example.html + +@status Draft + +Style guide: components.pagination +*/ + +/* +`` + +Pagination requires two properties: `totalPages`, which is the total number of pages, and `onPageChange`, which is a function used to handle state changes when the user clicks a page. + +Pagination also comes in two styles: default, which is compact on mobile viewports and expands to reveal individual pages on larger viewports, and `compact`, which maintains the compact layout regardless of viewport size. + +@react-example Pagination.example.jsx + +@react-props Pagination.tsx + +Style guide: components.pagination.react +*/ + +/* +--- + +### When to use + +- Typically used for paginated search results. +- Can be used for multi-page collections of related items, including articles related to a category or tag, content archives, and history or activity. Splitting a large collection of related items into individual pages can improve browsability and scannability. + +### When to consider alternatives + +- If you need to indicate progress in a series of steps that must be completed in succession, like an onboarding or checkout flow, this isn't the component for you. +- If the length of the entire collection is less than 3-4 screen lengths long, consider showing all the items at once instead of paginating. + +### Usage + +- Users want to know the length of a paginated section, so show the size of the paginated set. +- Highlight the current page the user is on in relation to the entire collection of pages. +- Don't split the navigation items over multiple lines as this can make individual pages more difficult to understand and select. +- Don't include out-of-sequence items directly adjacent to one another. Wherever there are missing pages, an ellipses should be used. +- Avoid adding complexity by focusing on the essentials and avoid adding more items to Pagination just to fill the space. +- Use touch targets that are big enough to select with any finger and have enough separation to avoid mistakes. +- Do not use buttons for URL-based pagination. Because the URL is updated, the browser history stack updates and a link is the correct tag to use. +- Consider page load, performance, and the user's scrolling preferences when determining how many items are displayed on each page. + +### Style customization + +The following Sass variables can be overridden to theme alerts: + +- `$pagination-nav-link-color` - Used to set color of next/previous and page number links. +- `$pagination-nav-link-color-hover` - Used to set color of next/previous and page number links on hover. +- `$pagination-nav-link-color-active` - Used to set color of next/previous and page number links when active. +- `$pagination-nav-link-color-focus` - Used to set color of next/previous and page number links on focus. + +- `$pagination-current-page-color` - Used to set the current page element text color. +- `$pagination-overflow-color` - Used to set the overflow element text color. +- `$pagination-page-count-color` - Used to set the page count element text color. + +### Accessibility + +- Use a wrapping `