feat(PPDSC-2786): pagination component #672

JohnTParsons · 2023-02-27T10:55:10Z

What

This is iteration 1 of the Pagination component.
It is fully working (but iteration 2 will add custom input and dropdown stories)

I have done:

Written unit tests against changes
Written functional tests against the component and/or NewsKit site
Updated relevant documentation

I have tested manually:

The feature's functionality is working as expected on Chrome, Firefox, Safari and Edge
The screen reader reads and flows through the elements as expected.
There are no new errors in the browser console coming from this PR.
When visual test is not added, it renders correctly on different browsers and mobile viewports (Safari, Firefox, small mobile viewport, tablet)
The Playground feature is working as expected

Before:

After:

Who should review this PR:

How to test:

pp-serviceaccount · 2023-02-27T11:01:29Z

You can preview these changes on:
Documentation Site: http://ncu-newskit-docs-pr.s3-website-eu-west-1.amazonaws.com/ppdsc-2786-pagination-iteration1
Storybook: http://ncu-newskit-docs-pr.s3-website-eu-west-1.amazonaws.com/ppdsc-2786-pagination-iteration1/storybook

src/breadcrumbs/breadcrumbs.tsx

src/pagination/pagination.tsx

src/pagination/__tests__/pagination.stories.tsx

src/pagination/styled.tsx

src/pagination/components/items/pagination-items.tsx

src/pagination/utils.ts

src/pagination/defaults.ts

src/pagination/components/items/pagination-items.tsx

src/pagination/styled.tsx

src/pagination/defaults.ts

src/pagination/styled.tsx

src/pagination/pagination.tsx

src/pagination/types.ts

src/pagination/utils.ts

src/pagination/components/types.ts

src/pagination/index.ts

src/pagination/pagination.tsx

JohnTParsons requested a review from a team as a code owner February 27, 2023 10:55

github-actions bot added the feature This change contains a new feature label Feb 27, 2023

JohnTParsons added the Requires design review label Feb 27, 2023

mutebg reviewed Feb 28, 2023

View reviewed changes

JohnTParsons added ready for review Please assist in getting this reviewed and removed Requires design review labels Mar 6, 2023

mutebg reviewed Mar 6, 2023

View reviewed changes

mutebg reviewed Mar 7, 2023

View reviewed changes

src/pagination/pagination.tsx Outdated Show resolved Hide resolved

src/pagination/types.ts Outdated Show resolved Hide resolved

mstuartf reviewed Mar 7, 2023

View reviewed changes

src/pagination/types.ts Show resolved Hide resolved

src/pagination/types.ts Show resolved Hide resolved

src/pagination/types.ts Show resolved Hide resolved

src/pagination/utils.ts Show resolved Hide resolved

JohnTParsons force-pushed the feat/PPDSC-2786-pagination-iteration1 branch from 22da764 to ea0b6ef Compare March 7, 2023 11:49

mutebg reviewed Mar 7, 2023

View reviewed changes

src/pagination/components/types.ts Outdated Show resolved Hide resolved

mutebg reviewed Mar 7, 2023

View reviewed changes

src/pagination/index.ts Show resolved Hide resolved

mutebg reviewed Mar 8, 2023

View reviewed changes

src/pagination/pagination.tsx Show resolved Hide resolved

mutebg previously approved these changes Mar 8, 2023

View reviewed changes

JohnTParsons dismissed mutebg’s stale review via e5bef45 March 8, 2023 22:32

mstuartf previously approved these changes Mar 9, 2023

View reviewed changes

JohnTParsons dismissed mstuartf’s stale review via a46a84f March 9, 2023 10:20

JohnTParsons force-pushed the feat/PPDSC-2786-pagination-iteration1 branch 2 times, most recently from ab4a991 to ac550bc Compare March 9, 2023 15:41

JohnTParsons added 10 commits March 9, 2023 17:39

feat(PPDSC-2786): pagination component

314550d

feat(PPDSC-2786): siblings, boundaries and unit tests

c82456f

feat(PPDSC-2786): increase coverage, tidy up

e6124ab

feat(PPDSC-2786): add LI margin, etc

37f537a

feat(PPDSC-2786): show all number overrides

734a08c

feat(PPDSC-2786): make large component smaller

f69d904

feat(PPDSC-2786): width needed for arrow buttons

7f71d22

feat(PPDSC-2786): replace useState with useControlled

b23e224

feat(PPDSC-2786): fix branch coverage

b6ed024

feat(PPDSC-2786): move margin from li to paginationitem

44cdd83

JohnTParsons added 12 commits March 9, 2023 17:39

feat(PPDSC-2786): path prop

92d239a

feat(PPDSC-2786): hardcode path to 'pagination'

4582c2a

feat(PPDSC-2786): warn if buildHref and onPageChange set inconsitently

15e622b

feat(PPDSC-2786): suppress truncation for succesive numbers

f7f2044

feat(PPDSC-2786): export component to root index

7927c47

feat(PPDSC-2786): export component & simplify tests

692791f

feat(PPDSC-2786): only show warning if not prod

5b15780

feat(PPDSC-2786): requested styling changes

b3a323d

feat(PPDSC-2786): snapshots for requested styling changes

fcf1eb4

feat(PPDSC-2786): more requested styling changes

40c2bcf

feat(PPDSC-2786): more requested styling changes part 2

9d2d2d3

feat(PPDSC-2786): snapshots for styling changes part 2

2e566b4

JohnTParsons force-pushed the feat/PPDSC-2786-pagination-iteration1 branch from ac550bc to 2e566b4 Compare March 9, 2023 17:40

JohnTParsons merged commit 79affc3 into main Mar 9, 2023

JohnTParsons deleted the feat/PPDSC-2786-pagination-iteration1 branch March 9, 2023 18:17

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(PPDSC-2786): pagination component #672

feat(PPDSC-2786): pagination component #672

JohnTParsons commented Feb 27, 2023

pp-serviceaccount commented Feb 27, 2023 •

edited by JohnTParsons

Loading

feat(PPDSC-2786): pagination component #672

feat(PPDSC-2786): pagination component #672

Conversation

JohnTParsons commented Feb 27, 2023

pp-serviceaccount commented Feb 27, 2023 • edited by JohnTParsons Loading

pp-serviceaccount commented Feb 27, 2023 •

edited by JohnTParsons

Loading