From 50841ccfae217ad8b71507162a4a42b2dce3fcb9 Mon Sep 17 00:00:00 2001 From: Henri Bernard <132286421+hebernardEquisoft@users.noreply.github.com> Date: Mon, 3 Feb 2025 10:46:37 -0500 Subject: [PATCH 01/13] chore(Pagination): refactor --- .../src/components/pagination/context.ts | 24 ++ .../pagination/label/pagination-label.tsx | 38 +++ .../src/components/pagination/label/styled.ts | 15 ++ .../nav-button/pagination-nav-button.tsx | 45 ++++ .../pagination/nav-button/styled.ts | 6 + .../pagination/page-link/page-link.tsx | 44 ++++ .../components/pagination/page-link/styled.ts | 43 ++++ .../src/components/pagination/pagination.tsx | 227 ++++-------------- .../react/src/components/pagination/styled.ts | 19 ++ 9 files changed, 278 insertions(+), 183 deletions(-) create mode 100644 packages/react/src/components/pagination/context.ts create mode 100644 packages/react/src/components/pagination/label/pagination-label.tsx create mode 100644 packages/react/src/components/pagination/label/styled.ts create mode 100644 packages/react/src/components/pagination/nav-button/pagination-nav-button.tsx create mode 100644 packages/react/src/components/pagination/nav-button/styled.ts create mode 100644 packages/react/src/components/pagination/page-link/page-link.tsx create mode 100644 packages/react/src/components/pagination/page-link/styled.ts create mode 100644 packages/react/src/components/pagination/styled.ts diff --git a/packages/react/src/components/pagination/context.ts b/packages/react/src/components/pagination/context.ts new file mode 100644 index 0000000000..d2cd2c930a --- /dev/null +++ b/packages/react/src/components/pagination/context.ts @@ -0,0 +1,24 @@ +import { createContext, useContext } from 'react'; + +export interface PaginationContextProps { + resultsPerPage: number; + numberOfResults: number; + totalPages: number; + pagesDisplayed: number; + currentPage: number; + + /** + * Function callback to change page + */ + changePage: (pageNumber: number) => void; +} + +export const PaginationContext = createContext(undefined); + +export function usePaginationContext(): PaginationContextProps { + const context = useContext(PaginationContext); + if (!context) { + throw new Error('usePaginationContext must be used within a PaginationProvider'); + } + return context; +} diff --git a/packages/react/src/components/pagination/label/pagination-label.tsx b/packages/react/src/components/pagination/label/pagination-label.tsx new file mode 100644 index 0000000000..9ee735ee7b --- /dev/null +++ b/packages/react/src/components/pagination/label/pagination-label.tsx @@ -0,0 +1,38 @@ +import { FC } from 'react'; +import { ScreenReaderOnlyText } from '../../screen-reader-only-text/ScreenReaderOnlyText'; +import { useTranslation } from '../../../i18n/use-translation'; +import { useDeviceContext } from '../../device-context-provider/device-context-provider'; +import { CurrentPageLabelHeading, ResultsLabel } from './styled'; +import { usePaginationContext } from '../context'; + +interface PageLabelProps { + id: string; +} + +export const PaginationLabel: FC = ({ + id, +}) => { + const { t } = useTranslation('pagination'); + const { isMobile } = useDeviceContext(); + const { resultsPerPage, currentPage, numberOfResults } = usePaginationContext(); + + const pageStartIndex = resultsPerPage && numberOfResults + ? (resultsPerPage * (currentPage - 1)) + 1 : 0; + const pageEndIndex = resultsPerPage && numberOfResults + ? Math.min(numberOfResults, resultsPerPage * currentPage) : 0; + + return ( +
+ + + + {t('results', { + pageStartIndex, + pageEndIndex, + numberOfResults, + })} + + +
+ ); +}; diff --git a/packages/react/src/components/pagination/label/styled.ts b/packages/react/src/components/pagination/label/styled.ts new file mode 100644 index 0000000000..91e743aaaf --- /dev/null +++ b/packages/react/src/components/pagination/label/styled.ts @@ -0,0 +1,15 @@ +import styled from 'styled-components'; + +export const ResultsLabel = styled.span<{ isMobile: boolean }>` + font-size: ${(props) => (props.isMobile ? 1 : 0.9)}rem; + font-weight: var(--font-normal); + line-height: ${(props) => (props.isMobile ? 2 : 1.5)}rem; + margin-bottom: ${(props) => (props.isMobile ? 'var(--spacing-1halfx)' : 0)}; + margin-right: ${(props) => (props.isMobile ? 0 : 'var(--spacing-3x)')}; + white-space: nowrap; +`; + +export const CurrentPageLabelHeading = styled.h3` + font-size: 0.875rem; + line-height: 1.5rem; +`; diff --git a/packages/react/src/components/pagination/nav-button/pagination-nav-button.tsx b/packages/react/src/components/pagination/nav-button/pagination-nav-button.tsx new file mode 100644 index 0000000000..db3ee96eb1 --- /dev/null +++ b/packages/react/src/components/pagination/nav-button/pagination-nav-button.tsx @@ -0,0 +1,45 @@ +import { VoidFunctionComponent } from 'react'; +import { StyledIconButton } from './styled'; +import { usePaginationContext } from '../context'; + +export type NavigationAction = 'previous' | 'next'; + +export interface PaginationNavButtonProps { + action: NavigationAction; +} + +export const PaginationNavButton: VoidFunctionComponent = ( + { action }, +) => { + const { + totalPages, + pagesDisplayed, + currentPage, + changePage, + } = usePaginationContext(); + const showNavButtons = totalPages > 3 || pagesDisplayed < totalPages; + + if (!showNavButtons) return null; + + const isPrevious = action === 'previous'; + const isDisabled = isPrevious ? currentPage <= 1 : currentPage >= totalPages; + const onClick = (): void => changePage(currentPage + (isPrevious ? -1 : 1)); + const iconName = isPrevious ? 'chevronLeft' : 'chevronRight'; + const label = isPrevious ? 'previous page' : 'next page'; + const dataTestId = isPrevious ? 'previousPageButton' : 'nextPageButton'; + + return ( + + ); +}; diff --git a/packages/react/src/components/pagination/nav-button/styled.ts b/packages/react/src/components/pagination/nav-button/styled.ts new file mode 100644 index 0000000000..9917135648 --- /dev/null +++ b/packages/react/src/components/pagination/nav-button/styled.ts @@ -0,0 +1,6 @@ +import styled from 'styled-components'; +import { IconButton } from '../../buttons'; + +export const StyledIconButton = styled(IconButton)<{ isVisible: boolean }>` + visibility: ${({ isVisible }) => (isVisible ? 'visible' : 'hidden')}; +`; diff --git a/packages/react/src/components/pagination/page-link/page-link.tsx b/packages/react/src/components/pagination/page-link/page-link.tsx new file mode 100644 index 0000000000..374807d93b --- /dev/null +++ b/packages/react/src/components/pagination/page-link/page-link.tsx @@ -0,0 +1,44 @@ +import { FC, useCallback } from 'react'; +import { useDeviceContext } from '../../device-context-provider/device-context-provider'; +import { Page, StyledText } from './styled'; +import { usePaginationContext } from '../context'; + +interface PageLinkProps { + index: number; +} + +export const PageLink: FC = ({ + index, +}) => { + const { isMobile } = useDeviceContext(); + const { currentPage, changePage } = usePaginationContext(); + const isSelected = index === currentPage; + const id = `page-${index}`; + + const handlePageKeyDown = useCallback((key: string, page: number): void => { + if (key === 'Enter') { + changePage(page); + } + }, [changePage]); + + return ( + changePage(index)} + onKeyPress={(event) => handlePageKeyDown(event.key, index)} + isMobile={isMobile} + tabIndex={0} + > + + {index} + + + ); +}; diff --git a/packages/react/src/components/pagination/page-link/styled.ts b/packages/react/src/components/pagination/page-link/styled.ts new file mode 100644 index 0000000000..c07d3166f7 --- /dev/null +++ b/packages/react/src/components/pagination/page-link/styled.ts @@ -0,0 +1,43 @@ +import styled from 'styled-components'; +import { focus } from '../../../utils/css-state'; + +type SelectionSuffix = '-selected' | ''; + +function getSelectionSuffix(isSelected: boolean): SelectionSuffix { + return isSelected ? '-selected' : ''; +} + +export const Page = styled.li<{ isSelected: boolean, isMobile: boolean }>` + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + + padding: 0.125rem; + gap: 0; + + height: ${({ isMobile }) => (isMobile ? 'var(--size-2x)' : 'var(--size-1halfx)')}; + min-width: ${({ isMobile }) => (isMobile ? 'var(--size-2x)' : 'var(--size-1halfx)')}; + width: inherit; + + background-color: ${({ isSelected, theme }) => theme.component[`pagination-page${getSelectionSuffix(isSelected)}-background-color`]}; + border-radius: var(--border-radius-4x); + border: ${({ isSelected, theme }) => (isSelected ? `1px solid ${theme.component['pagination-page-selected-border-color']}` : 'none')}; + + ${focus}; + + &:hover { + background-color: ${({ isSelected, theme }) => theme.component[`pagination-page${getSelectionSuffix(isSelected)}-hover-background-color`]}; + cursor: ${({ isSelected }) => (isSelected ? 'default' : 'pointer')}; + } +`; + +export const StyledText = styled.a<{ isSelected: boolean, isMobile: boolean }>` + color: ${({ isSelected, theme }) => theme.component[`pagination-page${getSelectionSuffix(isSelected)}-text-color`]}; + font-size: ${({ isMobile }) => (isMobile ? 0.875 : 0.875)}rem; + font-weight: ${({ isSelected }) => (isSelected ? 'var(--font-bold)' : 'var(--font-normal)')}; + line-height: ${({ isMobile }) => (isMobile ? 1.25 : 1.25)}rem; + letter-spacing: 0.0125rem; + font-style: normal; + text-align: center; +`; diff --git a/packages/react/src/components/pagination/pagination.tsx b/packages/react/src/components/pagination/pagination.tsx index bf89927ab8..033db59bc3 100644 --- a/packages/react/src/components/pagination/pagination.tsx +++ b/packages/react/src/components/pagination/pagination.tsx @@ -1,106 +1,16 @@ -import { useEffect, useState, VoidFunctionComponent } from 'react'; -import styled from 'styled-components'; +import { FC, useCallback, useEffect, useMemo, useState } from 'react'; import { useId } from '../../hooks/use-id'; -import { useTranslation } from '../../i18n/use-translation'; -import { focus } from '../../utils/css-state'; import { clamp } from '../../utils/math'; import { range } from '../../utils/range'; -import { IconButton } from '../buttons/icon-button'; import { useDeviceContext } from '../device-context-provider/device-context-provider'; -import { IconName } from '../icon/icon'; -import { ScreenReaderOnlyText } from '../screen-reader-only-text/ScreenReaderOnlyText'; import { calculateShownPageRange } from './util/pagination-util'; +import { Navigation, PaginationLinksWrapper } from './styled'; +import { PaginationNavButton } from './nav-button/pagination-nav-button'; +import { PageLink } from './page-link/page-link'; +import { PaginationContext } from './context'; +import { PaginationLabel } from './label/pagination-label'; -type SelectionSuffix = '-selected' | ''; - -function getSelectionSuffix(isSelected: boolean): SelectionSuffix { - return isSelected ? '-selected' : ''; -} - -const Pages = styled.ol` - display: flex; - margin: 0 var(--spacing-half); - padding: 0; -`; - -const Page = styled.li<{ isSelected: boolean, isMobile: boolean }>` - align-items: center; - background-color: ${({ isSelected, theme }) => theme.component[`pagination-page${getSelectionSuffix(isSelected)}-background-color`]}; - border-radius: var(--border-radius-4x); - box-sizing: border-box; - color: ${({ isSelected, theme }) => theme.component[`pagination-page${getSelectionSuffix(isSelected)}-text-color`]}; - display: inline-flex; - font-size: ${({ isMobile }) => (isMobile ? 1 : 0.9)}rem; - font-weight: var(--font-normal); - height: ${({ isMobile }) => (isMobile ? 'var(--size-2x)' : 'var(--size-1halfx)')}; - justify-content: center; - line-height: ${({ isMobile }) => (isMobile ? 2 : 1.5)}rem; - margin: 0 var(--spacing-half); - min-width: ${({ isMobile }) => (isMobile ? 'var(--size-2x)' : 'var(--size-1halfx)')}; - outline: ${({ isSelected, theme }) => (isSelected ? `1px solid ${theme.component['pagination-page-selected-border-color']}` : 'none')}; - padding: 0 var(--spacing-1x); - text-align: center; - - ${focus}; - - &:hover { - background-color: ${({ isSelected, theme }) => theme.component[`pagination-page${getSelectionSuffix(isSelected)}-hover-background-color`]}; - cursor: ${({ isSelected }) => (isSelected ? 'default' : 'pointer')}; - } -`; - -interface NavButtonProps { - iconName: IconName; - label: string; - enabled: boolean; - - onClick(): void; -} - -const NavButton: VoidFunctionComponent = ({ - enabled, - iconName, - label, - ...props -}) => ( - -); - -const Container = styled.div<{ isMobile: boolean }>` - align-items: center; - display: flex; - flex-direction: ${(props) => (props.isMobile ? 'column' : 'row')}; -`; - -const ResultsLabel = styled.span<{ isMobile: boolean }>` - font-size: ${(props) => (props.isMobile ? 1 : 0.9)}rem; - font-weight: var(--font-normal); - line-height: ${(props) => (props.isMobile ? 2 : 1.5)}rem; - margin-bottom: ${(props) => (props.isMobile ? 'var(--spacing-1halfx)' : 0)}; - margin-right: ${(props) => (props.isMobile ? 0 : 'var(--spacing-3x)')}; - white-space: nowrap; -`; - -const CurrentPageLabelHeading = styled.h3` - font-size: 0.875rem; - line-height: 1.5rem; -`; - -const Navigation = styled.nav` - align-items: center; - display: flex; -`; - -interface PaginationProps { +export interface PaginationProps { className?: string; /** * Number of results to display per page @@ -120,122 +30,73 @@ interface PaginationProps { * @default 3 */ pagesShown?: number; - /** - * Function callback when page is changed + * The current active page of the pagination */ - onPageChange?(pageNumber: number): void; + activePage?: number; /** - * The current active page of the pagination + * Function callback when page is changed */ - activePage?: number; + onPageChange?(pageNumber: number): void; } -export const Pagination: VoidFunctionComponent = ({ +export const Pagination: FC = ({ className, resultsPerPage, numberOfResults, defaultActivePage = 1, pagesShown = 3, - onPageChange = () => undefined, activePage, + onPageChange = () => undefined, }) => { - const { t } = useTranslation('pagination'); const { isMobile } = useDeviceContext(); const headingId = useId(); const currentNumberOfResults = numberOfResults === undefined ? 0 : numberOfResults; const totalPages = currentNumberOfResults === 0 ? 0 : Math.ceil(currentNumberOfResults / resultsPerPage); const pagesDisplayed = Math.min(pagesShown, totalPages); const [currentPage, setCurrentPage] = useState(clamp(activePage || defaultActivePage, 1, totalPages)); - const canNavigatePrevious = currentPage > 1; - const canNavigateNext = currentPage < totalPages; - const forwardBackwardNavActive = totalPages > 3 || pagesDisplayed < totalPages; + const { begin, end } = calculateShownPageRange(totalPages, pagesDisplayed, currentPage); useEffect(() => { - if (activePage && currentPage !== activePage) { - setCurrentPage(activePage); + if (activePage) { + const clampedActivePage = clamp(activePage, 1, totalPages); + if (currentPage !== clampedActivePage) { + setCurrentPage(clampedActivePage); + } } - }, [activePage, currentPage]); + }, [activePage, currentPage, totalPages]); - function changePage(page: number): void { + const changePage = useCallback((page: number): void => { setCurrentPage(page); onPageChange(page); - } + }, [onPageChange]); - function handlePageKeyDown(key: string, page: number): void { - if (key === 'Enter') { - changePage(page); - } - } - - const { begin, end } = calculateShownPageRange(totalPages, pagesDisplayed, currentPage); - const pages = range(begin, end).map((i) => { - const id = `page-${i}`; - const isCurrentPage = i === currentPage; + const value = useMemo(() => ({ + resultsPerPage, + numberOfResults: currentNumberOfResults, + totalPages, + pagesDisplayed, + currentPage, + changePage, + }), [resultsPerPage, currentNumberOfResults, totalPages, pagesDisplayed, currentPage, changePage]); - return ( - changePage(i)} - onKeyPress={(event) => handlePageKeyDown(event.key, i)} + return ( + + - {i} - - ); - }); - - const ariaLabelledby = headingId; - let pageStartIndex; - let pageEndIndex; - - if (resultsPerPage !== 0 && currentNumberOfResults !== 0) { - pageStartIndex = (resultsPerPage * (currentPage - 1)) + 1; - pageEndIndex = Math.min(currentNumberOfResults, (resultsPerPage * currentPage)); - } else { - pageStartIndex = 0; - pageEndIndex = 0; - } - - return ( - - -
- - - - {t('results', { - pageStartIndex, - pageEndIndex, - numberOfResults: currentNumberOfResults, - })} - - -
- {forwardBackwardNavActive && ( - changePage(currentPage - 1)} - /> - )} - {pages} - {forwardBackwardNavActive && ( - changePage(currentPage + 1)} - /> - )} + + + + {range(begin, end).map((i) => ( + + ))} + + - + ); }; diff --git a/packages/react/src/components/pagination/styled.ts b/packages/react/src/components/pagination/styled.ts new file mode 100644 index 0000000000..dfc65c5159 --- /dev/null +++ b/packages/react/src/components/pagination/styled.ts @@ -0,0 +1,19 @@ +import styled from 'styled-components'; + +export const Navigation = styled.nav<{ isMobile: boolean }>` + display: flex; + width: 30rem; + height: 1.5rem; + padding: 0; + justify-content: flex-end; + align-items: center; + gap: 1.5rem; + flex-shrink: 0; +`; + +export const PaginationLinksWrapper = styled.ol` + display: flex; + padding: 0; + align-items: center; + gap: 0.5rem; +`; From 20753b8e1c766f91bfdf7a13c8c86989c6bbf93c Mon Sep 17 00:00:00 2001 From: Henri Bernard <132286421+hebernardEquisoft@users.noreply.github.com> Date: Mon, 3 Feb 2025 10:46:52 -0500 Subject: [PATCH 02/13] chore(Pagination): update tests --- .../components/pagination/pagination.test.tsx | 111 +++-- .../pagination/pagination.test.tsx.snap | 436 +++++++++--------- 2 files changed, 282 insertions(+), 265 deletions(-) diff --git a/packages/react/src/components/pagination/pagination.test.tsx b/packages/react/src/components/pagination/pagination.test.tsx index e1bec8c6c9..e22549db13 100644 --- a/packages/react/src/components/pagination/pagination.test.tsx +++ b/packages/react/src/components/pagination/pagination.test.tsx @@ -1,7 +1,8 @@ import { shallow } from 'enzyme'; import { findByTestId } from '../../test-utils/enzyme-selectors'; -import { renderWithProviders } from '../../test-utils/renderer'; +import { mountWithProviders, renderWithProviders } from '../../test-utils/renderer'; import { Pagination } from './pagination'; +import { PageLink } from './page-link/page-link'; describe('Pagination', () => { test('Matches the mobile snapshot', () => { @@ -43,98 +44,120 @@ describe('Pagination', () => { describe('pages list', () => { test('should display pages', () => { const wrapper = shallow(); - const pages = findByTestId(wrapper, 'page-', { modifier: '^' }); + + const pages = wrapper.find(PageLink); expect(pages).toHaveLength(5); }); test('should go to page 2 when clicking on page 2', () => { const callback = jest.fn(); - const wrapper = shallow( - , + const wrapper = mountWithProviders( + , ); - const pageButton = findByTestId(wrapper, 'page-2'); + const pageButton = findByTestId(wrapper, 'page-2').at(0); pageButton.simulate('click'); expect(callback).toHaveBeenCalledWith(2); + wrapper.unmount(); }); test('should highlight selected page', () => { - const wrapper = shallow(); - const pageButton = findByTestId(wrapper, 'page-3'); + const wrapper = mountWithProviders( + , + ); + const pageButton = findByTestId(wrapper, 'page-3').at(0); expect(pageButton.prop('isSelected')).toBe(true); + wrapper.unmount(); }); }); describe('results label', () => { test('should display zero results when number of results is undefined', () => { - const wrapper = shallow(); - const label = findByTestId(wrapper, 'resultsLabel'); + const wrapper = mountWithProviders( + , + ); + const label = findByTestId(wrapper, 'resultsLabel').at(0); - expect(label.text()).toEqual('0–0 of 0 results'); + expect(label.text()).toEqual('Pagination - 0–0 of 0 results'); + wrapper.unmount(); }); test('should display the number of results when provided', () => { - const wrapper = shallow(); - const label = findByTestId(wrapper, 'resultsLabel'); + const wrapper = mountWithProviders( + , + ); + const label = findByTestId(wrapper, 'resultsLabel').at(0); - expect(label.text()).toEqual('1–3 of 12345 results'); + expect(label.text()).toEqual('Pagination - 1–3 of 12345 results'); + wrapper.unmount(); }); test('should display first page results label when number of results is even', () => { - const wrapper = shallow( + const wrapper = mountWithProviders( , ); - const label = findByTestId(wrapper, 'resultsLabel'); + const label = findByTestId(wrapper, 'resultsLabel').at(0); - expect(label.text()).toEqual('1–6 of 30 results'); + expect(label.text()).toEqual('Pagination - 1–6 of 30 results'); + wrapper.unmount(); }); test('should display second page results label when number of results is uneven', () => { - const wrapper = shallow( + const wrapper = mountWithProviders( , ); - const label = findByTestId(wrapper, 'resultsLabel'); + const label = findByTestId(wrapper, 'resultsLabel').at(0); - expect(label.text()).toEqual('7–12 of 30 results'); + expect(label.text()).toEqual('Pagination - 7–12 of 30 results'); + wrapper.unmount(); }); test('should display last page results label when number of results is uneven', () => { - const wrapper = shallow( + const wrapper = mountWithProviders( , ); - const label = findByTestId(wrapper, 'resultsLabel'); + const label = findByTestId(wrapper, 'resultsLabel').at(0); - expect(label.text()).toEqual('25–30 of 30 results'); + expect(label.text()).toEqual('Pagination - 25–30 of 30 results'); + wrapper.unmount(); }); test('should display first page results label when number of results is uneven', () => { - const wrapper = shallow( + const wrapper = mountWithProviders( , ); - const label = findByTestId(wrapper, 'resultsLabel'); + const label = findByTestId(wrapper, 'resultsLabel').at(0); - expect(label.text()).toEqual('1–50 of 1530 results'); + expect(label.text()).toEqual('Pagination - 1–50 of 1530 results'); + wrapper.unmount(); }); test('should display second page results label when number of results is uneven', () => { - const wrapper = shallow( + const wrapper = mountWithProviders( , ); - const label = findByTestId(wrapper, 'resultsLabel'); + const label = findByTestId(wrapper, 'resultsLabel').at(0); - expect(label.text()).toEqual('51–100 of 1530 results'); + expect(label.text()).toEqual('Pagination - 51–100 of 1530 results'); + wrapper.unmount(); }); test('should display last page results label when number of results is uneven', () => { - const wrapper = shallow( + const wrapper = mountWithProviders( , ); - const label = findByTestId(wrapper, 'resultsLabel'); + const label = findByTestId(wrapper, 'resultsLabel').at(0); - expect(label.text()).toEqual('1501–1530 of 1530 results'); + expect(label.text()).toEqual('Pagination - 1501–1530 of 1530 results'); + wrapper.unmount(); }); }); @@ -152,7 +175,7 @@ describe('Pagination', () => { describe(testCase.id, () => { test(`should go to page ${testCase.goesToPage} when clicked`, () => { const callback = jest.fn(); - const wrapper = shallow( + const wrapper = mountWithProviders( { onPageChange={callback} />, ); - const button = findByTestId(wrapper, testCase.id); + const button = findByTestId(wrapper, testCase.id).at(0); button.simulate('click'); expect(callback).toHaveBeenCalledWith(testCase.goesToPage); + wrapper.unmount(); }); test(`should be disabled when on page ${testCase.disabledWhenOnPage}`, () => { - const wrapper = shallow( + const wrapper = mountWithProviders( , ); - const button = findByTestId(wrapper, testCase.id); + const button = findByTestId(wrapper, testCase.id).at(0); - expect(button.prop('enabled')).toBe(false); + expect(button.prop('isVisible')).toBe(false); + wrapper.unmount(); }); test(`should be enabled when on page ${testCase.enabledWhenOnPage}`, () => { - const wrapper = shallow( + const wrapper = mountWithProviders( , ); - const button = findByTestId(wrapper, testCase.id); + const button = findByTestId(wrapper, testCase.id).at(0); - expect(button.prop('enabled')).toBe(true); + expect(button.prop('isVisible')).toBe(true); + wrapper.unmount(); }); test(`should not be rendered when there's less than ${testCase.stopRenderAt} page`, () => { - const wrapper = shallow(); - const button = findByTestId(wrapper, testCase.id); + const wrapper = mountWithProviders( + , + ); + const button = findByTestId(wrapper, testCase.id).at(0); expect(button.exists()).toBe(false); + wrapper.unmount(); }); }); }); diff --git a/packages/react/src/components/pagination/pagination.test.tsx.snap b/packages/react/src/components/pagination/pagination.test.tsx.snap index e95856794c..223f3b4823 100644 --- a/packages/react/src/components/pagination/pagination.test.tsx.snap +++ b/packages/react/src/components/pagination/pagination.test.tsx.snap @@ -1,42 +1,54 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`Pagination Matches the desktop snapshot 1`] = ` -.c4 { - border: 0; - -webkit-clip: rect(0,0,0,0); - clip: rect(0,0,0,0); - height: 1px; - margin: -1px; - overflow: hidden; - padding: 0; - position: absolute; - width: 1px; -} - -.c5 { +.c0 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; - margin: 0 var(--spacing-half); + width: 30rem; + height: 1.5rem; padding: 0; -} - -.c0 { + -webkit-box-pack: end; + -webkit-justify-content: flex-end; + -ms-flex-pack: end; + justify-content: flex-end; -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; + gap: 1.5rem; + -webkit-flex-shrink: 0; + -ms-flex-negative: 0; + flex-shrink: 0; +} + +.c4 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; - -webkit-flex-direction: row; - -ms-flex-direction: row; - flex-direction: row; + padding: 0; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + gap: 0.5rem; } .c3 { + border: 0; + -webkit-clip: rect(0,0,0,0); + clip: rect(0,0,0,0); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; + width: 1px; +} + +.c2 { font-size: 0.9rem; font-weight: var(--font-normal); line-height: 1.5rem; @@ -45,95 +57,92 @@ exports[`Pagination Matches the desktop snapshot 1`] = ` white-space: nowrap; } -.c2 { +.c1 { font-size: 0.875rem; line-height: 1.5rem; } -.c1 { - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; -} - -
- -
+ 0–0 of 0 results + + + +
    + `; exports[`Pagination Matches the desktop snapshot with multiples digits page numbers 1`] = ` -.c4 { - border: 0; - -webkit-clip: rect(0,0,0,0); - clip: rect(0,0,0,0); - height: 1px; - margin: -1px; - overflow: hidden; - padding: 0; - position: absolute; - width: 1px; -} - -.c5 { +.c0 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; - margin: 0 var(--spacing-half); + width: 30rem; + height: 1.5rem; padding: 0; -} - -.c0 { + -webkit-box-pack: end; + -webkit-justify-content: flex-end; + -ms-flex-pack: end; + justify-content: flex-end; -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; + gap: 1.5rem; + -webkit-flex-shrink: 0; + -ms-flex-negative: 0; + flex-shrink: 0; +} + +.c4 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; - -webkit-flex-direction: row; - -ms-flex-direction: row; - flex-direction: row; + padding: 0; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + gap: 0.5rem; } .c3 { + border: 0; + -webkit-clip: rect(0,0,0,0); + clip: rect(0,0,0,0); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; + width: 1px; +} + +.c2 { font-size: 0.9rem; font-weight: var(--font-normal); line-height: 1.5rem; @@ -142,95 +151,92 @@ exports[`Pagination Matches the desktop snapshot with multiples digits page numb white-space: nowrap; } -.c2 { +.c1 { font-size: 0.875rem; line-height: 1.5rem; } -.c1 { - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; -} - -
    - -
    + 0–0 of 0 results + + + +
      + `; exports[`Pagination Matches the mobile snapshot 1`] = ` -.c4 { - border: 0; - -webkit-clip: rect(0,0,0,0); - clip: rect(0,0,0,0); - height: 1px; - margin: -1px; - overflow: hidden; - padding: 0; - position: absolute; - width: 1px; -} - -.c5 { +.c0 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; - margin: 0 var(--spacing-half); + width: 30rem; + height: 1.5rem; padding: 0; -} - -.c0 { + -webkit-box-pack: end; + -webkit-justify-content: flex-end; + -ms-flex-pack: end; + justify-content: flex-end; -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; + gap: 1.5rem; + -webkit-flex-shrink: 0; + -ms-flex-negative: 0; + flex-shrink: 0; +} + +.c4 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; + padding: 0; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + gap: 0.5rem; } .c3 { + border: 0; + -webkit-clip: rect(0,0,0,0); + clip: rect(0,0,0,0); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; + width: 1px; +} + +.c2 { font-size: 1rem; font-weight: var(--font-normal); line-height: 2rem; @@ -239,95 +245,92 @@ exports[`Pagination Matches the mobile snapshot 1`] = ` white-space: nowrap; } -.c2 { +.c1 { font-size: 0.875rem; line-height: 1.5rem; } -.c1 { - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; -} - -
      - -
      + 0–0 of 0 results + + + +
        + `; exports[`Pagination Matches the mobile snapshot with multiples digits page numbers 1`] = ` -.c4 { - border: 0; - -webkit-clip: rect(0,0,0,0); - clip: rect(0,0,0,0); - height: 1px; - margin: -1px; - overflow: hidden; - padding: 0; - position: absolute; - width: 1px; -} - -.c5 { +.c0 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; - margin: 0 var(--spacing-half); + width: 30rem; + height: 1.5rem; padding: 0; -} - -.c0 { + -webkit-box-pack: end; + -webkit-justify-content: flex-end; + -ms-flex-pack: end; + justify-content: flex-end; -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; + gap: 1.5rem; + -webkit-flex-shrink: 0; + -ms-flex-negative: 0; + flex-shrink: 0; +} + +.c4 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; + padding: 0; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + gap: 0.5rem; } .c3 { + border: 0; + -webkit-clip: rect(0,0,0,0); + clip: rect(0,0,0,0); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; + width: 1px; +} + +.c2 { font-size: 1rem; font-weight: var(--font-normal); line-height: 2rem; @@ -336,54 +339,39 @@ exports[`Pagination Matches the mobile snapshot with multiples digits page numbe white-space: nowrap; } -.c2 { +.c1 { font-size: 0.875rem; line-height: 1.5rem; } -.c1 { - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; -} - -
        - -
        + 0–0 of 0 results + + + +
          + `; From 3bc16fd9037b5fae36a228bf071ffe6a378c3620 Mon Sep 17 00:00:00 2001 From: Henri Bernard <132286421+hebernardEquisoft@users.noreply.github.com> Date: Mon, 3 Feb 2025 10:47:44 -0500 Subject: [PATCH 03/13] fix(Pagination): stylelint --- .../src/components/pagination/page-link/styled.ts | 4 ++-- packages/react/src/components/pagination/styled.ts | 14 +++++++------- 2 files changed, 9 insertions(+), 9 deletions(-) diff --git a/packages/react/src/components/pagination/page-link/styled.ts b/packages/react/src/components/pagination/page-link/styled.ts index c07d3166f7..f4748f0549 100644 --- a/packages/react/src/components/pagination/page-link/styled.ts +++ b/packages/react/src/components/pagination/page-link/styled.ts @@ -35,9 +35,9 @@ export const Page = styled.li<{ isSelected: boolean, isMobile: boolean }>` export const StyledText = styled.a<{ isSelected: boolean, isMobile: boolean }>` color: ${({ isSelected, theme }) => theme.component[`pagination-page${getSelectionSuffix(isSelected)}-text-color`]}; font-size: ${({ isMobile }) => (isMobile ? 0.875 : 0.875)}rem; + font-style: normal; font-weight: ${({ isSelected }) => (isSelected ? 'var(--font-bold)' : 'var(--font-normal)')}; - line-height: ${({ isMobile }) => (isMobile ? 1.25 : 1.25)}rem; letter-spacing: 0.0125rem; - font-style: normal; + line-height: ${({ isMobile }) => (isMobile ? 1.25 : 1.25)}rem; text-align: center; `; diff --git a/packages/react/src/components/pagination/styled.ts b/packages/react/src/components/pagination/styled.ts index dfc65c5159..08f8c12fe6 100644 --- a/packages/react/src/components/pagination/styled.ts +++ b/packages/react/src/components/pagination/styled.ts @@ -1,19 +1,19 @@ import styled from 'styled-components'; export const Navigation = styled.nav<{ isMobile: boolean }>` + align-items: center; display: flex; - width: 30rem; + flex-shrink: 0; + gap: 1.5rem; height: 1.5rem; - padding: 0; justify-content: flex-end; - align-items: center; - gap: 1.5rem; - flex-shrink: 0; + padding: 0; + width: 30rem; `; export const PaginationLinksWrapper = styled.ol` - display: flex; - padding: 0; align-items: center; + display: flex; gap: 0.5rem; + padding: 0; `; From 7d15d685ee7aee3c194d75f27945abc6f203d47e Mon Sep 17 00:00:00 2001 From: Henri Bernard <132286421+hebernardEquisoft@users.noreply.github.com> Date: Mon, 3 Feb 2025 11:58:27 -0500 Subject: [PATCH 04/13] chore(Pagination): add classname --- .../pagination/label/pagination-label.tsx | 2 +- .../nav-button/pagination-nav-button.tsx | 1 + .../pagination/page-link/page-link.tsx | 2 + .../components/pagination/page-link/styled.ts | 2 +- .../pagination/pagination.test.tsx.snap | 140 +++++++++--------- .../src/components/pagination/pagination.tsx | 4 +- .../react/src/components/pagination/styled.ts | 2 +- 7 files changed, 80 insertions(+), 73 deletions(-) diff --git a/packages/react/src/components/pagination/label/pagination-label.tsx b/packages/react/src/components/pagination/label/pagination-label.tsx index 9ee735ee7b..c6f32fe51c 100644 --- a/packages/react/src/components/pagination/label/pagination-label.tsx +++ b/packages/react/src/components/pagination/label/pagination-label.tsx @@ -22,7 +22,7 @@ export const PaginationLabel: FC = ({ ? Math.min(numberOfResults, resultsPerPage * currentPage) : 0; return ( -
          +
          diff --git a/packages/react/src/components/pagination/nav-button/pagination-nav-button.tsx b/packages/react/src/components/pagination/nav-button/pagination-nav-button.tsx index db3ee96eb1..9b094e8d43 100644 --- a/packages/react/src/components/pagination/nav-button/pagination-nav-button.tsx +++ b/packages/react/src/components/pagination/nav-button/pagination-nav-button.tsx @@ -31,6 +31,7 @@ export const PaginationNavButton: VoidFunctionComponent = ({ return ( changePage(index)} onKeyPress={(event) => handlePageKeyDown(event.key, index)} isMobile={isMobile} tabIndex={0} + role="button" > ` +export const Page = styled.div<{ isSelected: boolean, isMobile: boolean }>` display: flex; flex-direction: column; justify-content: center; diff --git a/packages/react/src/components/pagination/pagination.test.tsx.snap b/packages/react/src/components/pagination/pagination.test.tsx.snap index 223f3b4823..0ab646029f 100644 --- a/packages/react/src/components/pagination/pagination.test.tsx.snap +++ b/packages/react/src/components/pagination/pagination.test.tsx.snap @@ -2,38 +2,38 @@ exports[`Pagination Matches the desktop snapshot 1`] = ` .c0 { + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; - width: 30rem; + -webkit-flex-shrink: 0; + -ms-flex-negative: 0; + flex-shrink: 0; + gap: 1.5rem; height: 1.5rem; - padding: 0; -webkit-box-pack: end; -webkit-justify-content: flex-end; -ms-flex-pack: end; justify-content: flex-end; + padding: 0; + width: 30rem; +} + +.c4 { -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; - gap: 1.5rem; - -webkit-flex-shrink: 0; - -ms-flex-negative: 0; - flex-shrink: 0; -} - -.c4 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; - padding: 0; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; gap: 0.5rem; + padding: 0; } .c3 { @@ -64,10 +64,11 @@ exports[`Pagination Matches the desktop snapshot 1`] = ` `; exports[`Pagination Matches the desktop snapshot with multiples digits page numbers 1`] = ` .c0 { + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; - width: 30rem; + -webkit-flex-shrink: 0; + -ms-flex-negative: 0; + flex-shrink: 0; + gap: 1.5rem; height: 1.5rem; - padding: 0; -webkit-box-pack: end; -webkit-justify-content: flex-end; -ms-flex-pack: end; justify-content: flex-end; + padding: 0; + width: 30rem; +} + +.c4 { -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; - gap: 1.5rem; - -webkit-flex-shrink: 0; - -ms-flex-negative: 0; - flex-shrink: 0; -} - -.c4 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; - padding: 0; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; gap: 0.5rem; + padding: 0; } .c3 { @@ -158,10 +159,11 @@ exports[`Pagination Matches the desktop snapshot with multiples digits page numb `; exports[`Pagination Matches the mobile snapshot 1`] = ` .c0 { + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; - width: 30rem; + -webkit-flex-shrink: 0; + -ms-flex-negative: 0; + flex-shrink: 0; + gap: 1.5rem; height: 1.5rem; - padding: 0; -webkit-box-pack: end; -webkit-justify-content: flex-end; -ms-flex-pack: end; justify-content: flex-end; + padding: 0; + width: 30rem; +} + +.c4 { -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; - gap: 1.5rem; - -webkit-flex-shrink: 0; - -ms-flex-negative: 0; - flex-shrink: 0; -} - -.c4 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; - padding: 0; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; gap: 0.5rem; + padding: 0; } .c3 { @@ -252,10 +254,11 @@ exports[`Pagination Matches the mobile snapshot 1`] = ` `; exports[`Pagination Matches the mobile snapshot with multiples digits page numbers 1`] = ` .c0 { + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; - width: 30rem; + -webkit-flex-shrink: 0; + -ms-flex-negative: 0; + flex-shrink: 0; + gap: 1.5rem; height: 1.5rem; - padding: 0; -webkit-box-pack: end; -webkit-justify-content: flex-end; -ms-flex-pack: end; justify-content: flex-end; + padding: 0; + width: 30rem; +} + +.c4 { -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; - gap: 1.5rem; - -webkit-flex-shrink: 0; - -ms-flex-negative: 0; - flex-shrink: 0; -} - -.c4 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; - padding: 0; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; gap: 0.5rem; + padding: 0; } .c3 { @@ -346,10 +349,11 @@ exports[`Pagination Matches the mobile snapshot with multiples digits page numbe `; diff --git a/packages/react/src/components/pagination/pagination.tsx b/packages/react/src/components/pagination/pagination.tsx index 033db59bc3..1ddb13de92 100644 --- a/packages/react/src/components/pagination/pagination.tsx +++ b/packages/react/src/components/pagination/pagination.tsx @@ -84,12 +84,12 @@ export const Pagination: FC = ({ return ( - + {range(begin, end).map((i) => ( diff --git a/packages/react/src/components/pagination/styled.ts b/packages/react/src/components/pagination/styled.ts index 08f8c12fe6..066bc7aafe 100644 --- a/packages/react/src/components/pagination/styled.ts +++ b/packages/react/src/components/pagination/styled.ts @@ -11,7 +11,7 @@ export const Navigation = styled.nav<{ isMobile: boolean }>` width: 30rem; `; -export const PaginationLinksWrapper = styled.ol` +export const PaginationLinksWrapper = styled.div` align-items: center; display: flex; gap: 0.5rem; From c5743660ad6c292b8e1b88c4576dbce311f7d928 Mon Sep 17 00:00:00 2001 From: Henri Bernard <132286421+hebernardEquisoft@users.noreply.github.com> Date: Tue, 4 Feb 2025 07:41:13 -0500 Subject: [PATCH 05/13] fix(Pagination): stylelint --- .../src/components/pagination/page-link/styled.ts | 15 ++++++--------- 1 file changed, 6 insertions(+), 9 deletions(-) diff --git a/packages/react/src/components/pagination/page-link/styled.ts b/packages/react/src/components/pagination/page-link/styled.ts index 83a71bf9b8..0fead809da 100644 --- a/packages/react/src/components/pagination/page-link/styled.ts +++ b/packages/react/src/components/pagination/page-link/styled.ts @@ -8,22 +8,19 @@ function getSelectionSuffix(isSelected: boolean): SelectionSuffix { } export const Page = styled.div<{ isSelected: boolean, isMobile: boolean }>` + align-items: center; + background-color: ${({ isSelected, theme }) => theme.component[`pagination-page${getSelectionSuffix(isSelected)}-background-color`]}; + border: ${({ isSelected, theme }) => (isSelected ? `1px solid ${theme.component['pagination-page-selected-border-color']}` : 'none')}; + border-radius: var(--border-radius-4x); display: flex; flex-direction: column; - justify-content: center; - align-items: center; - - padding: 0.125rem; gap: 0; - height: ${({ isMobile }) => (isMobile ? 'var(--size-2x)' : 'var(--size-1halfx)')}; + justify-content: center; min-width: ${({ isMobile }) => (isMobile ? 'var(--size-2x)' : 'var(--size-1halfx)')}; + padding: 0.125rem; width: inherit; - background-color: ${({ isSelected, theme }) => theme.component[`pagination-page${getSelectionSuffix(isSelected)}-background-color`]}; - border-radius: var(--border-radius-4x); - border: ${({ isSelected, theme }) => (isSelected ? `1px solid ${theme.component['pagination-page-selected-border-color']}` : 'none')}; - ${focus}; &:hover { From df29f4243611cacc1eb39b69bef5b310ec0d60f7 Mon Sep 17 00:00:00 2001 From: Henri Bernard <132286421+hebernardEquisoft@users.noreply.github.com> Date: Tue, 4 Feb 2025 07:43:05 -0500 Subject: [PATCH 06/13] chore(Pagination): add babel file --- packages/react/src/components/pagination/index.ts | 2 ++ packages/react/src/index.ts | 2 +- 2 files changed, 3 insertions(+), 1 deletion(-) create mode 100644 packages/react/src/components/pagination/index.ts diff --git a/packages/react/src/components/pagination/index.ts b/packages/react/src/components/pagination/index.ts new file mode 100644 index 0000000000..5df5a0f546 --- /dev/null +++ b/packages/react/src/components/pagination/index.ts @@ -0,0 +1,2 @@ +export { Pagination } from './pagination'; +export { PaginationProps } from './pagination'; diff --git a/packages/react/src/index.ts b/packages/react/src/index.ts index dde5511eae..4bd70c4435 100644 --- a/packages/react/src/index.ts +++ b/packages/react/src/index.ts @@ -102,7 +102,7 @@ export * from './components/legend/legend'; export { Fieldset } from './components/fieldset'; export { ProgressIndicator } from './components/progress-indicator/progress-indicator'; export { ProgressCircle } from './components/progress-circle/progress-circle'; -export { Pagination } from './components/pagination/pagination'; +export * from './components/pagination'; // Themes export { equisoftTheme, buildTheme } from './themes'; From 20c7d56cb476e9772f43d42bbf676268f7712ed9 Mon Sep 17 00:00:00 2001 From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com> Date: Mon, 3 Feb 2025 09:36:21 -0500 Subject: [PATCH 07/13] deps(*): update react-router (#1075) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> --- packages/react/package.json | 2 +- packages/storybook/package.json | 2 +- packages/webapp/package.json | 4 +- yarn.lock | 69 +++++++++------------------------ 4 files changed, 23 insertions(+), 54 deletions(-) diff --git a/packages/react/package.json b/packages/react/package.json index ac40800879..9440e7fbbd 100644 --- a/packages/react/package.json +++ b/packages/react/package.json @@ -89,7 +89,7 @@ "react": "~17.0.2", "react-docgen-typescript-plugin": "1.0.8", "react-dom": "~17.0.2", - "react-router-dom": "~6.28.0", + "react-router-dom": "~6.29.0", "sass": "~1.77.0", "sass-loader": "~16.0.0", "style-loader": "^4.0.0", diff --git a/packages/storybook/package.json b/packages/storybook/package.json index 5ee54f93a4..65c0b09419 100644 --- a/packages/storybook/package.json +++ b/packages/storybook/package.json @@ -19,7 +19,7 @@ "react": "~17.0.2", "react-dom": "~17.0.2", "react-is": "~17.0.2", - "react-router-dom": "~6.28.0", + "react-router-dom": "~6.29.0", "styled-components": "^5.3.10" }, "devDependencies": { diff --git a/packages/webapp/package.json b/packages/webapp/package.json index 1ae2e1e810..0070645f3d 100644 --- a/packages/webapp/package.json +++ b/packages/webapp/package.json @@ -30,8 +30,8 @@ "react-dom": "18.3.1", "react-i18next": "15.4.0", "react-is": "18.3.1", - "react-router": "6.28.0", - "react-router-dom": "6.28.0", + "react-router": "6.29.0", + "react-router-dom": "6.29.0", "styled-components": "5.3.11", "tslib": "2.6.3" }, diff --git a/yarn.lock b/yarn.lock index 45fe3b05d5..286dbc24ef 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1729,7 +1729,7 @@ __metadata: react-is: "npm:~17.0.2" react-modal: "npm:^3.16.1" react-popper-tooltip: "npm:^4.4.2" - react-router-dom: "npm:~6.28.0" + react-router-dom: "npm:~6.29.0" react-shadow: "npm:^20.0.0" react-swipeable: "npm:~7.0.0" sass: "npm:~1.77.0" @@ -1804,7 +1804,7 @@ __metadata: react: "npm:~17.0.2" react-dom: "npm:~17.0.2" react-is: "npm:~17.0.2" - react-router-dom: "npm:~6.28.0" + react-router-dom: "npm:~6.29.0" sass: "npm:^1.71.1" sass-loader: "npm:^16.0.0" storybook: "npm:^8.1.2" @@ -2966,17 +2966,10 @@ __metadata: languageName: node linkType: hard -"@remix-run/router@npm:1.21.0": - version: 1.21.0 - resolution: "@remix-run/router@npm:1.21.0" - checksum: 10c0/570792211c083a1c7146613b79cbb8e0d1e14f34e974052e060e7f9dcad38c800d80fe0a18bf42811bc278ab12c0e8fd62cfce649e905046c4e55bd5a09eafdc - languageName: node - linkType: hard - -"@remix-run/router@npm:1.21.1": - version: 1.21.1 - resolution: "@remix-run/router@npm:1.21.1" - checksum: 10c0/a90e62c6f18e53d8a1f39de8aaebe3abd340ea085a761296f4fddda23bd3ad133f9adf0190392e0b02933761180b484e7fc052447a6a8482c52207fcecbf9a90 +"@remix-run/router@npm:1.22.0": + version: 1.22.0 + resolution: "@remix-run/router@npm:1.22.0" + checksum: 10c0/6fbfbdddb485af6bc24635272436fc9884b40d2517581b5cc66ab866279d238ccb11b6f8f67ad99d43ff21c0ea8bc088c96d510a42dcc0cc05a716760fe5a633 languageName: node linkType: hard @@ -7251,8 +7244,8 @@ __metadata: react-dom: "npm:18.3.1" react-i18next: "npm:15.4.0" react-is: "npm:18.3.1" - react-router: "npm:6.28.0" - react-router-dom: "npm:6.28.0" + react-router: "npm:6.29.0" + react-router-dom: "npm:6.29.0" serve-static: "npm:1.16.0" styled-components: "npm:5.3.11" stylelint: "npm:16.8.2" @@ -12554,51 +12547,27 @@ __metadata: languageName: node linkType: hard -"react-router-dom@npm:6.28.0": - version: 6.28.0 - resolution: "react-router-dom@npm:6.28.0" +"react-router-dom@npm:6.29.0, react-router-dom@npm:~6.29.0": + version: 6.29.0 + resolution: "react-router-dom@npm:6.29.0" dependencies: - "@remix-run/router": "npm:1.21.0" - react-router: "npm:6.28.0" + "@remix-run/router": "npm:1.22.0" + react-router: "npm:6.29.0" peerDependencies: react: ">=16.8" react-dom: ">=16.8" - checksum: 10c0/e2930cf83e8c843a932b008c7ce11059fd83390502a433f0e41f192e3cb80081a621d069eeda7af3cf4bf74d7f8029f0141cdce741bca3f0af82d4bbbc7f7f10 - languageName: node - linkType: hard - -"react-router-dom@npm:~6.28.0": - version: 6.28.2 - resolution: "react-router-dom@npm:6.28.2" - dependencies: - "@remix-run/router": "npm:1.21.1" - react-router: "npm:6.28.2" - peerDependencies: - react: ">=16.8" - react-dom: ">=16.8" - checksum: 10c0/09757f0f8c63d5b939176825536d2311edac1f32b18410eb2b37900774c8622dbaa340bef78ab46931111e30890c7bc3f83346d809c2664a5dc4866fe0175f41 - languageName: node - linkType: hard - -"react-router@npm:6.28.0": - version: 6.28.0 - resolution: "react-router@npm:6.28.0" - dependencies: - "@remix-run/router": "npm:1.21.0" - peerDependencies: - react: ">=16.8" - checksum: 10c0/b435510de78fd882bf6ca9800a73cd90cee418bd1d19efd91b8dcaebde36929bbb589e25d9f7eec24ceb84255e8d538bc1fe54e6ddb5c43c32798e2b720fa76d + checksum: 10c0/f89f922006b6ff896ba81d82088812e42ae56790ccb838e7041eebe0f7d36ac2a4eca56512a422da4249cca23f389f998e84cf8ff868d4a83defd72951b8fbf9 languageName: node linkType: hard -"react-router@npm:6.28.2": - version: 6.28.2 - resolution: "react-router@npm:6.28.2" +"react-router@npm:6.29.0": + version: 6.29.0 + resolution: "react-router@npm:6.29.0" dependencies: - "@remix-run/router": "npm:1.21.1" + "@remix-run/router": "npm:1.22.0" peerDependencies: react: ">=16.8" - checksum: 10c0/07f033a0bfdcfee6cb889d8603b6063c04c7b7fe38567fea5c7e55c45f31cf32115c2615a7962685632df49538bc867368631feb84fd1fec6f709827d492abe8 + checksum: 10c0/0ad27b34e2ccb6db68ef124cd4492ba86b5422ea3e2af01c9de95e372eb3a36fb4727b40488ebc90e5e0cea41bc655c53569a754713554a465ca9423aa233df8 languageName: node linkType: hard From 1650c797378ae919b9c8dc1acf40b46e0d1423ab Mon Sep 17 00:00:00 2001 From: Henri Bernard <132286421+hebernardEquisoft@users.noreply.github.com> Date: Tue, 4 Feb 2025 16:31:56 -0500 Subject: [PATCH 08/13] fix(Pagination): post review changes --- .../pagination/label/pagination-label.tsx | 26 +- .../src/components/pagination/label/styled.ts | 17 +- .../nav-button/pagination-nav-button.tsx | 30 ++- .../pagination/nav-button/styled.ts | 14 +- .../page-button/pagination-page-button.tsx | 47 ++++ .../{page-link => page-button}/styled.ts | 28 +- .../pagination/page-link/page-link.tsx | 46 ---- .../components/pagination/pagination.test.tsx | 8 +- .../pagination/pagination.test.tsx.snap | 240 +++++++++++------- .../src/components/pagination/pagination.tsx | 24 +- .../react/src/components/pagination/styled.ts | 17 +- .../tokens/component/pagination-tokens.ts | 2 + 12 files changed, 293 insertions(+), 206 deletions(-) create mode 100644 packages/react/src/components/pagination/page-button/pagination-page-button.tsx rename packages/react/src/components/pagination/{page-link => page-button}/styled.ts (60%) delete mode 100644 packages/react/src/components/pagination/page-link/page-link.tsx diff --git a/packages/react/src/components/pagination/label/pagination-label.tsx b/packages/react/src/components/pagination/label/pagination-label.tsx index c6f32fe51c..f8960c446f 100644 --- a/packages/react/src/components/pagination/label/pagination-label.tsx +++ b/packages/react/src/components/pagination/label/pagination-label.tsx @@ -2,7 +2,7 @@ import { FC } from 'react'; import { ScreenReaderOnlyText } from '../../screen-reader-only-text/ScreenReaderOnlyText'; import { useTranslation } from '../../../i18n/use-translation'; import { useDeviceContext } from '../../device-context-provider/device-context-provider'; -import { CurrentPageLabelHeading, ResultsLabel } from './styled'; +import { ResultsLabelHeading } from './styled'; import { usePaginationContext } from '../context'; interface PageLabelProps { @@ -23,16 +23,20 @@ export const PaginationLabel: FC = ({ return (
          - - - - {t('results', { - pageStartIndex, - pageEndIndex, - numberOfResults, - })} - - + + + {t('results', { + pageStartIndex, + pageEndIndex, + numberOfResults, + })} +
          ); }; diff --git a/packages/react/src/components/pagination/label/styled.ts b/packages/react/src/components/pagination/label/styled.ts index 91e743aaaf..06e754df83 100644 --- a/packages/react/src/components/pagination/label/styled.ts +++ b/packages/react/src/components/pagination/label/styled.ts @@ -1,15 +1,10 @@ import styled from 'styled-components'; +import { Heading } from '../../heading/heading'; -export const ResultsLabel = styled.span<{ isMobile: boolean }>` - font-size: ${(props) => (props.isMobile ? 1 : 0.9)}rem; +export const ResultsLabelHeading = styled(Heading)<{ $isMobile: boolean }>` + font-size: ${({ $isMobile }) => ($isMobile ? 1 : 0.875)}rem; font-weight: var(--font-normal); - line-height: ${(props) => (props.isMobile ? 2 : 1.5)}rem; - margin-bottom: ${(props) => (props.isMobile ? 'var(--spacing-1halfx)' : 0)}; - margin-right: ${(props) => (props.isMobile ? 0 : 'var(--spacing-3x)')}; - white-space: nowrap; -`; - -export const CurrentPageLabelHeading = styled.h3` - font-size: 0.875rem; - line-height: 1.5rem; + letter-spacing: 0.0125rem; + line-height: ${({ $isMobile }) => ($isMobile ? 1.5 : 1.25)}rem; + margin: 0; `; diff --git a/packages/react/src/components/pagination/nav-button/pagination-nav-button.tsx b/packages/react/src/components/pagination/nav-button/pagination-nav-button.tsx index 9b094e8d43..b3c73d6844 100644 --- a/packages/react/src/components/pagination/nav-button/pagination-nav-button.tsx +++ b/packages/react/src/components/pagination/nav-button/pagination-nav-button.tsx @@ -1,6 +1,7 @@ import { VoidFunctionComponent } from 'react'; -import { StyledIconButton } from './styled'; +import { StyledButtonContainer, StyledWrapper } from './styled'; import { usePaginationContext } from '../context'; +import { IconButton } from '../../buttons'; export type NavigationAction = 'previous' | 'next'; @@ -29,18 +30,19 @@ export const PaginationNavButton: VoidFunctionComponent + + + + + ); }; diff --git a/packages/react/src/components/pagination/nav-button/styled.ts b/packages/react/src/components/pagination/nav-button/styled.ts index 9917135648..f6df32bb40 100644 --- a/packages/react/src/components/pagination/nav-button/styled.ts +++ b/packages/react/src/components/pagination/nav-button/styled.ts @@ -1,6 +1,14 @@ import styled from 'styled-components'; -import { IconButton } from '../../buttons'; -export const StyledIconButton = styled(IconButton)<{ isVisible: boolean }>` - visibility: ${({ isVisible }) => (isVisible ? 'visible' : 'hidden')}; +export const StyledWrapper = styled.div<{ $isVisible: boolean }>` + align-items: center; + display: flex; + gap: 0.5rem; + visibility: ${({ $isVisible }) => ($isVisible ? 'visible' : 'hidden')}; +`; + +export const StyledButtonContainer = styled.div` + align-items: center; + display: flex; + justify-content: center; `; diff --git a/packages/react/src/components/pagination/page-button/pagination-page-button.tsx b/packages/react/src/components/pagination/page-button/pagination-page-button.tsx new file mode 100644 index 0000000000..ffc1a3c032 --- /dev/null +++ b/packages/react/src/components/pagination/page-button/pagination-page-button.tsx @@ -0,0 +1,47 @@ +import { FC, useCallback } from 'react'; +import { useDeviceContext } from '../../device-context-provider/device-context-provider'; +import { PageButtonWrapper, StyledButton, StyledText } from './styled'; +import { usePaginationContext } from '../context'; + +interface PageButtonProps { + index: number; +} + +export const PaginationPageButton: FC = ({ + index, +}) => { + const { isMobile } = useDeviceContext(); + const { currentPage, changePage } = usePaginationContext(); + const isSelected = index === currentPage; + const id = `page-${index}`; + + const handlePageKeyDown = useCallback((key: string, page: number): void => { + if (key === 'Enter') { + changePage(page); + } + }, [changePage]); + + return ( + + changePage(index)} + onKeyPress={(event) => handlePageKeyDown(event.key, index)} + type="button" + $isMobile={isMobile} + > + + {index} + + + + + ); +}; diff --git a/packages/react/src/components/pagination/page-link/styled.ts b/packages/react/src/components/pagination/page-button/styled.ts similarity index 60% rename from packages/react/src/components/pagination/page-link/styled.ts rename to packages/react/src/components/pagination/page-button/styled.ts index 0fead809da..faefcedd89 100644 --- a/packages/react/src/components/pagination/page-link/styled.ts +++ b/packages/react/src/components/pagination/page-button/styled.ts @@ -7,34 +7,40 @@ function getSelectionSuffix(isSelected: boolean): SelectionSuffix { return isSelected ? '-selected' : ''; } -export const Page = styled.div<{ isSelected: boolean, isMobile: boolean }>` +export const PageButtonWrapper = styled.li` + list-style: none; +`; + +export const StyledButton = styled.button<{ isSelected: boolean, $isMobile: boolean }>` align-items: center; background-color: ${({ isSelected, theme }) => theme.component[`pagination-page${getSelectionSuffix(isSelected)}-background-color`]}; border: ${({ isSelected, theme }) => (isSelected ? `1px solid ${theme.component['pagination-page-selected-border-color']}` : 'none')}; border-radius: var(--border-radius-4x); + box-sizing: border-box; display: flex; - flex-direction: column; - gap: 0; - height: ${({ isMobile }) => (isMobile ? 'var(--size-2x)' : 'var(--size-1halfx)')}; justify-content: center; - min-width: ${({ isMobile }) => (isMobile ? 'var(--size-2x)' : 'var(--size-1halfx)')}; - padding: 0.125rem; - width: inherit; + min-width: ${({ $isMobile }) => ($isMobile ? '2.0625rem' : '1.5625rem')}; + padding: ${({ $isMobile }) => ($isMobile ? '0.25rem 0.5rem' : '0.125rem 0.25rem')}; ${focus}; &:hover { background-color: ${({ isSelected, theme }) => theme.component[`pagination-page${getSelectionSuffix(isSelected)}-hover-background-color`]}; - cursor: ${({ isSelected }) => (isSelected ? 'default' : 'pointer')}; } `; -export const StyledText = styled.a<{ isSelected: boolean, isMobile: boolean }>` +export const StyledText = styled.span<{ isSelected: boolean, $isMobile: boolean }>` color: ${({ isSelected, theme }) => theme.component[`pagination-page${getSelectionSuffix(isSelected)}-text-color`]}; - font-size: ${({ isMobile }) => (isMobile ? 0.875 : 0.875)}rem; + font-size: ${({ $isMobile }) => ($isMobile ? 1 : 0.875)}rem; font-style: normal; font-weight: ${({ isSelected }) => (isSelected ? 'var(--font-bold)' : 'var(--font-normal)')}; letter-spacing: 0.0125rem; - line-height: ${({ isMobile }) => (isMobile ? 1.25 : 1.25)}rem; + line-height: ${({ $isMobile }) => ($isMobile ? 1.5 : 1.25)}rem; text-align: center; + + &:hover { + ${({ isSelected, theme }) => !isSelected && ` + color: ${theme.component['pagination-page-hover-text-color']}; + `} + } `; diff --git a/packages/react/src/components/pagination/page-link/page-link.tsx b/packages/react/src/components/pagination/page-link/page-link.tsx deleted file mode 100644 index afb00cafba..0000000000 --- a/packages/react/src/components/pagination/page-link/page-link.tsx +++ /dev/null @@ -1,46 +0,0 @@ -import { FC, useCallback } from 'react'; -import { useDeviceContext } from '../../device-context-provider/device-context-provider'; -import { Page, StyledText } from './styled'; -import { usePaginationContext } from '../context'; - -interface PageLinkProps { - index: number; -} - -export const PageLink: FC = ({ - index, -}) => { - const { isMobile } = useDeviceContext(); - const { currentPage, changePage } = usePaginationContext(); - const isSelected = index === currentPage; - const id = `page-${index}`; - - const handlePageKeyDown = useCallback((key: string, page: number): void => { - if (key === 'Enter') { - changePage(page); - } - }, [changePage]); - - return ( - changePage(index)} - onKeyPress={(event) => handlePageKeyDown(event.key, index)} - isMobile={isMobile} - tabIndex={0} - role="button" - > - - {index} - - - ); -}; diff --git a/packages/react/src/components/pagination/pagination.test.tsx b/packages/react/src/components/pagination/pagination.test.tsx index e22549db13..544c12386d 100644 --- a/packages/react/src/components/pagination/pagination.test.tsx +++ b/packages/react/src/components/pagination/pagination.test.tsx @@ -2,7 +2,7 @@ import { shallow } from 'enzyme'; import { findByTestId } from '../../test-utils/enzyme-selectors'; import { mountWithProviders, renderWithProviders } from '../../test-utils/renderer'; import { Pagination } from './pagination'; -import { PageLink } from './page-link/page-link'; +import { PaginationPageButton } from './page-button/pagination-page-button'; describe('Pagination', () => { test('Matches the mobile snapshot', () => { @@ -45,7 +45,7 @@ describe('Pagination', () => { test('should display pages', () => { const wrapper = shallow(); - const pages = wrapper.find(PageLink); + const pages = wrapper.find(PaginationPageButton); expect(pages).toHaveLength(5); }); @@ -201,7 +201,7 @@ describe('Pagination', () => { ); const button = findByTestId(wrapper, testCase.id).at(0); - expect(button.prop('isVisible')).toBe(false); + expect(button.prop('disabled')).toBe(true); wrapper.unmount(); }); @@ -215,7 +215,7 @@ describe('Pagination', () => { ); const button = findByTestId(wrapper, testCase.id).at(0); - expect(button.prop('isVisible')).toBe(true); + expect(button.prop('disabled')).toBe(false); wrapper.unmount(); }); diff --git a/packages/react/src/components/pagination/pagination.test.tsx.snap b/packages/react/src/components/pagination/pagination.test.tsx.snap index 0ab646029f..f9facc5ed1 100644 --- a/packages/react/src/components/pagination/pagination.test.tsx.snap +++ b/packages/react/src/components/pagination/pagination.test.tsx.snap @@ -14,13 +14,10 @@ exports[`Pagination Matches the desktop snapshot 1`] = ` -ms-flex-negative: 0; flex-shrink: 0; gap: 1.5rem; - height: 1.5rem; -webkit-box-pack: end; -webkit-justify-content: flex-end; -ms-flex-pack: end; justify-content: flex-end; - padding: 0; - width: 30rem; } .c4 { @@ -36,6 +33,20 @@ exports[`Pagination Matches the desktop snapshot 1`] = ` padding: 0; } +.c5 { + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + gap: 0.5rem; + margin: 0; + padding: 0; +} + .c3 { border: 0; -webkit-clip: rect(0,0,0,0); @@ -48,18 +59,23 @@ exports[`Pagination Matches the desktop snapshot 1`] = ` width: 1px; } -.c2 { - font-size: 0.9rem; +.c1 { + color: #1B1C1E; + font-size: 1rem; font-weight: var(--font-normal); line-height: 1.5rem; - margin-bottom: 0; - margin-right: var(--spacing-3x); - white-space: nowrap; + margin: var(--spacing-3x) 0; } -.c1 { +.c2 { font-size: 0.875rem; - line-height: 1.5rem; + font-weight: var(--font-normal); + -webkit-letter-spacing: 0.0125rem; + -moz-letter-spacing: 0.0125rem; + -ms-letter-spacing: 0.0125rem; + letter-spacing: 0.0125rem; + line-height: 1.25rem; + margin: 0; }
          + class="c4 pagination-buttons-wrapper" + > +
            +
          `; @@ -109,13 +123,10 @@ exports[`Pagination Matches the desktop snapshot with multiples digits page numb -ms-flex-negative: 0; flex-shrink: 0; gap: 1.5rem; - height: 1.5rem; -webkit-box-pack: end; -webkit-justify-content: flex-end; -ms-flex-pack: end; justify-content: flex-end; - padding: 0; - width: 30rem; } .c4 { @@ -131,6 +142,20 @@ exports[`Pagination Matches the desktop snapshot with multiples digits page numb padding: 0; } +.c5 { + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + gap: 0.5rem; + margin: 0; + padding: 0; +} + .c3 { border: 0; -webkit-clip: rect(0,0,0,0); @@ -143,18 +168,23 @@ exports[`Pagination Matches the desktop snapshot with multiples digits page numb width: 1px; } -.c2 { - font-size: 0.9rem; +.c1 { + color: #1B1C1E; + font-size: 1rem; font-weight: var(--font-normal); line-height: 1.5rem; - margin-bottom: 0; - margin-right: var(--spacing-3x); - white-space: nowrap; + margin: var(--spacing-3x) 0; } -.c1 { +.c2 { font-size: 0.875rem; - line-height: 1.5rem; + font-weight: var(--font-normal); + -webkit-letter-spacing: 0.0125rem; + -moz-letter-spacing: 0.0125rem; + -ms-letter-spacing: 0.0125rem; + letter-spacing: 0.0125rem; + line-height: 1.25rem; + margin: 0; }
          + class="c4 pagination-buttons-wrapper" + > +
            +
          `; @@ -203,14 +231,11 @@ exports[`Pagination Matches the mobile snapshot 1`] = ` -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; - gap: 1.5rem; - height: 1.5rem; + gap: 2.25rem; -webkit-box-pack: end; -webkit-justify-content: flex-end; -ms-flex-pack: end; justify-content: flex-end; - padding: 0; - width: 30rem; } .c4 { @@ -222,7 +247,21 @@ exports[`Pagination Matches the mobile snapshot 1`] = ` display: -webkit-flex; display: -ms-flexbox; display: flex; - gap: 0.5rem; + gap: 0.75rem; + padding: 0; +} + +.c5 { + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + gap: 0.75rem; + margin: 0; padding: 0; } @@ -238,18 +277,23 @@ exports[`Pagination Matches the mobile snapshot 1`] = ` width: 1px; } -.c2 { +.c1 { + color: #1B1C1E; font-size: 1rem; font-weight: var(--font-normal); - line-height: 2rem; - margin-bottom: var(--spacing-1halfx); - margin-right: 0; - white-space: nowrap; + line-height: 1.5rem; + margin: var(--spacing-3x) 0; } -.c1 { - font-size: 0.875rem; +.c2 { + font-size: 1rem; + font-weight: var(--font-normal); + -webkit-letter-spacing: 0.0125rem; + -moz-letter-spacing: 0.0125rem; + -ms-letter-spacing: 0.0125rem; + letter-spacing: 0.0125rem; line-height: 1.5rem; + margin: 0; } `; @@ -298,14 +340,11 @@ exports[`Pagination Matches the mobile snapshot with multiples digits page numbe -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; - gap: 1.5rem; - height: 1.5rem; + gap: 2.25rem; -webkit-box-pack: end; -webkit-justify-content: flex-end; -ms-flex-pack: end; justify-content: flex-end; - padding: 0; - width: 30rem; } .c4 { @@ -317,7 +356,21 @@ exports[`Pagination Matches the mobile snapshot with multiples digits page numbe display: -webkit-flex; display: -ms-flexbox; display: flex; - gap: 0.5rem; + gap: 0.75rem; + padding: 0; +} + +.c5 { + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + gap: 0.75rem; + margin: 0; padding: 0; } @@ -333,18 +386,23 @@ exports[`Pagination Matches the mobile snapshot with multiples digits page numbe width: 1px; } -.c2 { +.c1 { + color: #1B1C1E; font-size: 1rem; font-weight: var(--font-normal); - line-height: 2rem; - margin-bottom: var(--spacing-1halfx); - margin-right: 0; - white-space: nowrap; + line-height: 1.5rem; + margin: var(--spacing-3x) 0; } -.c1 { - font-size: 0.875rem; +.c2 { + font-size: 1rem; + font-weight: var(--font-normal); + -webkit-letter-spacing: 0.0125rem; + -moz-letter-spacing: 0.0125rem; + -ms-letter-spacing: 0.0125rem; + letter-spacing: 0.0125rem; line-height: 1.5rem; + margin: 0; } `; diff --git a/packages/react/src/components/pagination/pagination.tsx b/packages/react/src/components/pagination/pagination.tsx index 1ddb13de92..c93a95d901 100644 --- a/packages/react/src/components/pagination/pagination.tsx +++ b/packages/react/src/components/pagination/pagination.tsx @@ -4,9 +4,9 @@ import { clamp } from '../../utils/math'; import { range } from '../../utils/range'; import { useDeviceContext } from '../device-context-provider/device-context-provider'; import { calculateShownPageRange } from './util/pagination-util'; -import { Navigation, PaginationLinksWrapper } from './styled'; +import { Navigation, PaginationButtonsWrapper, PaginationPageButtonsWrapper } from './styled'; import { PaginationNavButton } from './nav-button/pagination-nav-button'; -import { PageLink } from './page-link/page-link'; +import { PaginationPageButton } from './page-button/pagination-page-button'; import { PaginationContext } from './context'; import { PaginationLabel } from './label/pagination-label'; @@ -85,17 +85,25 @@ export const Pagination: FC = ({ - + - {range(begin, end).map((i) => ( - - ))} + + {range(begin, end).map((i) => ( + + ))} + - + ); diff --git a/packages/react/src/components/pagination/styled.ts b/packages/react/src/components/pagination/styled.ts index 066bc7aafe..3512c68ea7 100644 --- a/packages/react/src/components/pagination/styled.ts +++ b/packages/react/src/components/pagination/styled.ts @@ -1,19 +1,24 @@ import styled from 'styled-components'; -export const Navigation = styled.nav<{ isMobile: boolean }>` +export const Navigation = styled.nav<{ $isMobile: boolean }>` align-items: center; display: flex; flex-shrink: 0; - gap: 1.5rem; - height: 1.5rem; + gap: ${({ $isMobile }) => ($isMobile ? '2.25rem' : '1.5rem')}; justify-content: flex-end; +`; + +export const PaginationButtonsWrapper = styled.div<{ $isMobile: boolean }>` + align-items: center; + display: flex; + gap: ${({ $isMobile }) => ($isMobile ? '0.75rem' : '0.5rem')}; padding: 0; - width: 30rem; `; -export const PaginationLinksWrapper = styled.div` +export const PaginationPageButtonsWrapper = styled.ol<{ $isMobile: boolean }>` align-items: center; display: flex; - gap: 0.5rem; + gap: ${({ $isMobile }) => ($isMobile ? '0.75rem' : '0.5rem')}; + margin: 0; padding: 0; `; diff --git a/packages/react/src/themes/tokens/component/pagination-tokens.ts b/packages/react/src/themes/tokens/component/pagination-tokens.ts index 603b32e031..c71f63ca00 100644 --- a/packages/react/src/themes/tokens/component/pagination-tokens.ts +++ b/packages/react/src/themes/tokens/component/pagination-tokens.ts @@ -4,6 +4,7 @@ export type PaginationToken = | 'pagination-page-background-color' | 'pagination-page-text-color' | 'pagination-page-hover-background-color' + | 'pagination-page-hover-text-color' | 'pagination-page-selected-hover-background-color' | 'pagination-page-selected-background-color' | 'pagination-page-selected-border-color' @@ -13,6 +14,7 @@ export const defaultPaginationTokens: ComponentTokenMap = { 'pagination-page-background-color': 'transparent-100', 'pagination-page-text-color': 'color-content-subtle', 'pagination-page-hover-background-color': 'color-background-hover', + 'pagination-page-hover-text-color': 'color-content', 'pagination-page-selected-hover-background-color': 'color-background-selected', 'pagination-page-selected-background-color': 'color-background-selected', 'pagination-page-selected-border-color': 'color-border-selected', From 20548cebfb4b80a5251a4332b8a2bdb3af83191d Mon Sep 17 00:00:00 2001 From: Henri Bernard <132286421+hebernardEquisoft@users.noreply.github.com> Date: Tue, 11 Feb 2025 09:49:46 -0500 Subject: [PATCH 09/13] fix(Pagination): post review changes --- .../nav-button/pagination-nav-button.tsx | 4 +- .../{ => buttons}/nav-button/styled.ts | 0 .../page-button/pagination-page-button.tsx | 4 +- .../{ => buttons}/page-button/styled.ts | 4 +- .../pagination/buttons/pagination-buttons.tsx | 37 +++++ .../components/pagination/buttons/styled.ts | 16 ++ .../components/pagination/pagination.test.tsx | 27 +++- .../pagination/pagination.test.tsx.snap | 140 +----------------- .../src/components/pagination/pagination.tsx | 26 +--- .../react/src/components/pagination/styled.ts | 16 +- .../storybook/stories/pagination.stories.tsx | 9 ++ 11 files changed, 99 insertions(+), 184 deletions(-) rename packages/react/src/components/pagination/{ => buttons}/nav-button/pagination-nav-button.tsx (94%) rename packages/react/src/components/pagination/{ => buttons}/nav-button/styled.ts (100%) rename packages/react/src/components/pagination/{ => buttons}/page-button/pagination-page-button.tsx (90%) rename packages/react/src/components/pagination/{ => buttons}/page-button/styled.ts (97%) create mode 100644 packages/react/src/components/pagination/buttons/pagination-buttons.tsx create mode 100644 packages/react/src/components/pagination/buttons/styled.ts diff --git a/packages/react/src/components/pagination/nav-button/pagination-nav-button.tsx b/packages/react/src/components/pagination/buttons/nav-button/pagination-nav-button.tsx similarity index 94% rename from packages/react/src/components/pagination/nav-button/pagination-nav-button.tsx rename to packages/react/src/components/pagination/buttons/nav-button/pagination-nav-button.tsx index b3c73d6844..ca77661e59 100644 --- a/packages/react/src/components/pagination/nav-button/pagination-nav-button.tsx +++ b/packages/react/src/components/pagination/buttons/nav-button/pagination-nav-button.tsx @@ -1,7 +1,7 @@ import { VoidFunctionComponent } from 'react'; import { StyledButtonContainer, StyledWrapper } from './styled'; -import { usePaginationContext } from '../context'; -import { IconButton } from '../../buttons'; +import { usePaginationContext } from '../../context'; +import { IconButton } from '../../../buttons'; export type NavigationAction = 'previous' | 'next'; diff --git a/packages/react/src/components/pagination/nav-button/styled.ts b/packages/react/src/components/pagination/buttons/nav-button/styled.ts similarity index 100% rename from packages/react/src/components/pagination/nav-button/styled.ts rename to packages/react/src/components/pagination/buttons/nav-button/styled.ts diff --git a/packages/react/src/components/pagination/page-button/pagination-page-button.tsx b/packages/react/src/components/pagination/buttons/page-button/pagination-page-button.tsx similarity index 90% rename from packages/react/src/components/pagination/page-button/pagination-page-button.tsx rename to packages/react/src/components/pagination/buttons/page-button/pagination-page-button.tsx index ffc1a3c032..0c2b6d36fa 100644 --- a/packages/react/src/components/pagination/page-button/pagination-page-button.tsx +++ b/packages/react/src/components/pagination/buttons/page-button/pagination-page-button.tsx @@ -1,7 +1,7 @@ import { FC, useCallback } from 'react'; -import { useDeviceContext } from '../../device-context-provider/device-context-provider'; +import { useDeviceContext } from '../../../device-context-provider/device-context-provider'; import { PageButtonWrapper, StyledButton, StyledText } from './styled'; -import { usePaginationContext } from '../context'; +import { usePaginationContext } from '../../context'; interface PageButtonProps { index: number; diff --git a/packages/react/src/components/pagination/page-button/styled.ts b/packages/react/src/components/pagination/buttons/page-button/styled.ts similarity index 97% rename from packages/react/src/components/pagination/page-button/styled.ts rename to packages/react/src/components/pagination/buttons/page-button/styled.ts index faefcedd89..c3f67540bb 100644 --- a/packages/react/src/components/pagination/page-button/styled.ts +++ b/packages/react/src/components/pagination/buttons/page-button/styled.ts @@ -1,5 +1,5 @@ import styled from 'styled-components'; -import { focus } from '../../../utils/css-state'; +import { focus } from '../../../../utils/css-state'; type SelectionSuffix = '-selected' | ''; @@ -43,4 +43,4 @@ export const StyledText = styled.span<{ isSelected: boolean, $isMobile: boolean color: ${theme.component['pagination-page-hover-text-color']}; `} } -`; +`; \ No newline at end of file diff --git a/packages/react/src/components/pagination/buttons/pagination-buttons.tsx b/packages/react/src/components/pagination/buttons/pagination-buttons.tsx new file mode 100644 index 0000000000..9bd1316338 --- /dev/null +++ b/packages/react/src/components/pagination/buttons/pagination-buttons.tsx @@ -0,0 +1,37 @@ +import { FC } from 'react'; +import { useDeviceContext } from '../../device-context-provider/device-context-provider'; +import { usePaginationContext } from '../context'; +import { range } from '../../../utils/range'; +import { calculateShownPageRange } from '../util/pagination-util'; +import { PaginationPageButton } from './page-button/pagination-page-button'; +import { PaginationNavButton } from './nav-button/pagination-nav-button'; +import { PaginationButtonsWrapper, PaginationPageButtonsWrapper } from './styled'; + +export const PaginationButtons: FC = () => { + const { isMobile } = useDeviceContext(); + const { currentPage, totalPages, pagesDisplayed } = usePaginationContext(); + const { begin, end } = calculateShownPageRange(totalPages, pagesDisplayed, currentPage); + + if (totalPages <= 1) { + return null; + } + + return ( + + + + {range(begin, end).map((i) => ( + + ))} + + + + + ); +}; diff --git a/packages/react/src/components/pagination/buttons/styled.ts b/packages/react/src/components/pagination/buttons/styled.ts new file mode 100644 index 0000000000..d4c334bf3b --- /dev/null +++ b/packages/react/src/components/pagination/buttons/styled.ts @@ -0,0 +1,16 @@ +import styled from 'styled-components'; + +export const PaginationButtonsWrapper = styled.div<{ $isMobile: boolean }>` + align-items: center; + display: flex; + gap: ${({ $isMobile }) => ($isMobile ? '0.75rem' : '0.5rem')}; + padding: 0; +`; + +export const PaginationPageButtonsWrapper = styled.ol<{ $isMobile: boolean }>` + align-items: center; + display: flex; + gap: ${({ $isMobile }) => ($isMobile ? '0.75rem' : '0.5rem')}; + margin: 0; + padding: 0; +`; diff --git a/packages/react/src/components/pagination/pagination.test.tsx b/packages/react/src/components/pagination/pagination.test.tsx index 544c12386d..eb2ca62e41 100644 --- a/packages/react/src/components/pagination/pagination.test.tsx +++ b/packages/react/src/components/pagination/pagination.test.tsx @@ -1,8 +1,7 @@ -import { shallow } from 'enzyme'; import { findByTestId } from '../../test-utils/enzyme-selectors'; import { mountWithProviders, renderWithProviders } from '../../test-utils/renderer'; import { Pagination } from './pagination'; -import { PaginationPageButton } from './page-button/pagination-page-button'; +import { PaginationPageButton } from './buttons/page-button/pagination-page-button'; describe('Pagination', () => { test('Matches the mobile snapshot', () => { @@ -43,11 +42,18 @@ describe('Pagination', () => { describe('pages list', () => { test('should display pages', () => { - const wrapper = shallow(); + const wrapper = mountWithProviders( + , + ); - const pages = wrapper.find(PaginationPageButton); + const pageButtons = wrapper.find(PaginationPageButton); - expect(pages).toHaveLength(5); + expect(pageButtons).toHaveLength(5); + wrapper.unmount(); }); test('should go to page 2 when clicking on page 2', () => { @@ -77,6 +83,17 @@ describe('Pagination', () => { expect(pageButton.prop('isSelected')).toBe(true); wrapper.unmount(); }); + + test('should not display pages when displayed page less than 2', () => { + const wrapper = mountWithProviders( + , + ); + + const pageButtons = wrapper.find(PaginationPageButton); + + expect(pageButtons).toHaveLength(0); + wrapper.unmount(); + }); }); describe('results label', () => { diff --git a/packages/react/src/components/pagination/pagination.test.tsx.snap b/packages/react/src/components/pagination/pagination.test.tsx.snap index f9facc5ed1..f064d748f1 100644 --- a/packages/react/src/components/pagination/pagination.test.tsx.snap +++ b/packages/react/src/components/pagination/pagination.test.tsx.snap @@ -18,33 +18,7 @@ exports[`Pagination Matches the desktop snapshot 1`] = ` -webkit-justify-content: flex-end; -ms-flex-pack: end; justify-content: flex-end; -} - -.c4 { - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - gap: 0.5rem; - padding: 0; -} - -.c5 { - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - gap: 0.5rem; - margin: 0; - padding: 0; + min-height: 1.75rem; } .c3 { @@ -99,13 +73,6 @@ exports[`Pagination Matches the desktop snapshot 1`] = ` 0–0 of 0 results -
          -
            -
          `; @@ -127,33 +94,7 @@ exports[`Pagination Matches the desktop snapshot with multiples digits page numb -webkit-justify-content: flex-end; -ms-flex-pack: end; justify-content: flex-end; -} - -.c4 { - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - gap: 0.5rem; - padding: 0; -} - -.c5 { - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - gap: 0.5rem; - margin: 0; - padding: 0; + min-height: 1.75rem; } .c3 { @@ -208,13 +149,6 @@ exports[`Pagination Matches the desktop snapshot with multiples digits page numb 0–0 of 0 results -
          -
            -
          `; @@ -236,33 +170,7 @@ exports[`Pagination Matches the mobile snapshot 1`] = ` -webkit-justify-content: flex-end; -ms-flex-pack: end; justify-content: flex-end; -} - -.c4 { - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - gap: 0.75rem; - padding: 0; -} - -.c5 { - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - gap: 0.75rem; - margin: 0; - padding: 0; + min-height: 1.75rem; } .c3 { @@ -317,13 +225,6 @@ exports[`Pagination Matches the mobile snapshot 1`] = ` 0–0 of 0 results -
          -
            -
          `; @@ -345,33 +246,7 @@ exports[`Pagination Matches the mobile snapshot with multiples digits page numbe -webkit-justify-content: flex-end; -ms-flex-pack: end; justify-content: flex-end; -} - -.c4 { - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - gap: 0.75rem; - padding: 0; -} - -.c5 { - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - gap: 0.75rem; - margin: 0; - padding: 0; + min-height: 1.75rem; } .c3 { @@ -426,12 +301,5 @@ exports[`Pagination Matches the mobile snapshot with multiples digits page numbe 0–0 of 0 results -
          -
            -
          `; diff --git a/packages/react/src/components/pagination/pagination.tsx b/packages/react/src/components/pagination/pagination.tsx index c93a95d901..c6da63ee1a 100644 --- a/packages/react/src/components/pagination/pagination.tsx +++ b/packages/react/src/components/pagination/pagination.tsx @@ -1,14 +1,11 @@ import { FC, useCallback, useEffect, useMemo, useState } from 'react'; import { useId } from '../../hooks/use-id'; import { clamp } from '../../utils/math'; -import { range } from '../../utils/range'; import { useDeviceContext } from '../device-context-provider/device-context-provider'; -import { calculateShownPageRange } from './util/pagination-util'; -import { Navigation, PaginationButtonsWrapper, PaginationPageButtonsWrapper } from './styled'; -import { PaginationNavButton } from './nav-button/pagination-nav-button'; -import { PaginationPageButton } from './page-button/pagination-page-button'; +import { Navigation } from './styled'; import { PaginationContext } from './context'; import { PaginationLabel } from './label/pagination-label'; +import { PaginationButtons } from './buttons/pagination-buttons'; export interface PaginationProps { className?: string; @@ -54,9 +51,8 @@ export const Pagination: FC = ({ const headingId = useId(); const currentNumberOfResults = numberOfResults === undefined ? 0 : numberOfResults; const totalPages = currentNumberOfResults === 0 ? 0 : Math.ceil(currentNumberOfResults / resultsPerPage); - const pagesDisplayed = Math.min(pagesShown, totalPages); + const pagesDisplayed = Math.min(Math.max(pagesShown, 1), totalPages); const [currentPage, setCurrentPage] = useState(clamp(activePage || defaultActivePage, 1, totalPages)); - const { begin, end } = calculateShownPageRange(totalPages, pagesDisplayed, currentPage); useEffect(() => { if (activePage) { @@ -89,21 +85,7 @@ export const Pagination: FC = ({ aria-labelledby={headingId} > - - - - {range(begin, end).map((i) => ( - - ))} - - - + ); diff --git a/packages/react/src/components/pagination/styled.ts b/packages/react/src/components/pagination/styled.ts index 3512c68ea7..c08acb5ce2 100644 --- a/packages/react/src/components/pagination/styled.ts +++ b/packages/react/src/components/pagination/styled.ts @@ -6,19 +6,5 @@ export const Navigation = styled.nav<{ $isMobile: boolean }>` flex-shrink: 0; gap: ${({ $isMobile }) => ($isMobile ? '2.25rem' : '1.5rem')}; justify-content: flex-end; -`; - -export const PaginationButtonsWrapper = styled.div<{ $isMobile: boolean }>` - align-items: center; - display: flex; - gap: ${({ $isMobile }) => ($isMobile ? '0.75rem' : '0.5rem')}; - padding: 0; -`; - -export const PaginationPageButtonsWrapper = styled.ol<{ $isMobile: boolean }>` - align-items: center; - display: flex; - gap: ${({ $isMobile }) => ($isMobile ? '0.75rem' : '0.5rem')}; - margin: 0; - padding: 0; + min-height: 1.75rem; `; diff --git a/packages/storybook/stories/pagination.stories.tsx b/packages/storybook/stories/pagination.stories.tsx index cd9ea12f09..f414712ce1 100644 --- a/packages/storybook/stories/pagination.stories.tsx +++ b/packages/storybook/stories/pagination.stories.tsx @@ -48,3 +48,12 @@ export const ControlledPagination: Story = { }, }; ControlledPagination.parameters = rawCodeParameters; + +export const OnePage: Story = { + ...PaginationMeta, + args: { + resultsPerPage: 10, + numberOfResults: 8, + pagesShown: 2, + }, +}; From 4e92ff9d8082275ca6bd18a6bfa70ec795c0480c Mon Sep 17 00:00:00 2001 From: Henri Bernard <132286421+hebernardEquisoft@users.noreply.github.com> Date: Tue, 11 Feb 2025 09:51:14 -0500 Subject: [PATCH 10/13] fix(Pagination): post review changes --- .../src/components/pagination/buttons/page-button/styled.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react/src/components/pagination/buttons/page-button/styled.ts b/packages/react/src/components/pagination/buttons/page-button/styled.ts index c3f67540bb..72aa16310a 100644 --- a/packages/react/src/components/pagination/buttons/page-button/styled.ts +++ b/packages/react/src/components/pagination/buttons/page-button/styled.ts @@ -43,4 +43,4 @@ export const StyledText = styled.span<{ isSelected: boolean, $isMobile: boolean color: ${theme.component['pagination-page-hover-text-color']}; `} } -`; \ No newline at end of file +`; From 0ae7fa863c4e746e20d5d553ded6bd4a2b9df409 Mon Sep 17 00:00:00 2001 From: Henri Bernard <132286421+hebernardEquisoft@users.noreply.github.com> Date: Tue, 11 Feb 2025 14:06:49 -0500 Subject: [PATCH 11/13] fix(Pagination): post review changes --- .../buttons/nav-button/pagination-nav-button.tsx | 8 +++++--- .../components/pagination/buttons/nav-button/styled.ts | 7 +++++++ .../buttons/page-button/pagination-page-button.tsx | 4 ++-- .../components/pagination/buttons/page-button/styled.ts | 6 ++---- 4 files changed, 16 insertions(+), 9 deletions(-) diff --git a/packages/react/src/components/pagination/buttons/nav-button/pagination-nav-button.tsx b/packages/react/src/components/pagination/buttons/nav-button/pagination-nav-button.tsx index ca77661e59..024c922ace 100644 --- a/packages/react/src/components/pagination/buttons/nav-button/pagination-nav-button.tsx +++ b/packages/react/src/components/pagination/buttons/nav-button/pagination-nav-button.tsx @@ -1,7 +1,7 @@ import { VoidFunctionComponent } from 'react'; -import { StyledButtonContainer, StyledWrapper } from './styled'; +import { StyledButtonContainer, StyledIconButton, StyledWrapper } from './styled'; import { usePaginationContext } from '../../context'; -import { IconButton } from '../../../buttons'; +import { useDeviceContext } from '../../../device-context-provider/device-context-provider'; export type NavigationAction = 'previous' | 'next'; @@ -12,6 +12,7 @@ export interface PaginationNavButtonProps { export const PaginationNavButton: VoidFunctionComponent = ( { action }, ) => { + const { isMobile } = useDeviceContext(); const { totalPages, pagesDisplayed, @@ -32,7 +33,7 @@ export const PaginationNavButton: VoidFunctionComponent - diff --git a/packages/react/src/components/pagination/buttons/nav-button/styled.ts b/packages/react/src/components/pagination/buttons/nav-button/styled.ts index f6df32bb40..26b5187046 100644 --- a/packages/react/src/components/pagination/buttons/nav-button/styled.ts +++ b/packages/react/src/components/pagination/buttons/nav-button/styled.ts @@ -1,4 +1,5 @@ import styled from 'styled-components'; +import { IconButton } from '../../../buttons'; export const StyledWrapper = styled.div<{ $isVisible: boolean }>` align-items: center; @@ -12,3 +13,9 @@ export const StyledButtonContainer = styled.div` display: flex; justify-content: center; `; + +export const StyledIconButton = styled(IconButton)<{ $isMobile: boolean }>` + min-height: ${({ $isMobile }) => ($isMobile ? 'var(--size-2x)' : 'var(--size-1halfx)')}; + min-width: ${({ $isMobile }) => ($isMobile ? 'var(--size-2x)' : 'var(--size-1halfx)')}; + width: auto; +`; diff --git a/packages/react/src/components/pagination/buttons/page-button/pagination-page-button.tsx b/packages/react/src/components/pagination/buttons/page-button/pagination-page-button.tsx index 0c2b6d36fa..77172aeca1 100644 --- a/packages/react/src/components/pagination/buttons/page-button/pagination-page-button.tsx +++ b/packages/react/src/components/pagination/buttons/page-button/pagination-page-button.tsx @@ -24,6 +24,8 @@ export const PaginationPageButton: FC = ({ return ( = ({ $isMobile={isMobile} > diff --git a/packages/react/src/components/pagination/buttons/page-button/styled.ts b/packages/react/src/components/pagination/buttons/page-button/styled.ts index 72aa16310a..805ae6ff39 100644 --- a/packages/react/src/components/pagination/buttons/page-button/styled.ts +++ b/packages/react/src/components/pagination/buttons/page-button/styled.ts @@ -16,10 +16,10 @@ export const StyledButton = styled.button<{ isSelected: boolean, $isMobile: bool background-color: ${({ isSelected, theme }) => theme.component[`pagination-page${getSelectionSuffix(isSelected)}-background-color`]}; border: ${({ isSelected, theme }) => (isSelected ? `1px solid ${theme.component['pagination-page-selected-border-color']}` : 'none')}; border-radius: var(--border-radius-4x); - box-sizing: border-box; display: flex; justify-content: center; - min-width: ${({ $isMobile }) => ($isMobile ? '2.0625rem' : '1.5625rem')}; + max-height: ${({ $isMobile }) => ($isMobile ? 'var(--size-2x)' : 'var(--size-1halfx)')}; + min-width: ${({ $isMobile }) => ($isMobile ? 'var(--size-2x)' : 'var(--size-1halfx)')}; padding: ${({ $isMobile }) => ($isMobile ? '0.25rem 0.5rem' : '0.125rem 0.25rem')}; ${focus}; @@ -32,11 +32,9 @@ export const StyledButton = styled.button<{ isSelected: boolean, $isMobile: bool export const StyledText = styled.span<{ isSelected: boolean, $isMobile: boolean }>` color: ${({ isSelected, theme }) => theme.component[`pagination-page${getSelectionSuffix(isSelected)}-text-color`]}; font-size: ${({ $isMobile }) => ($isMobile ? 1 : 0.875)}rem; - font-style: normal; font-weight: ${({ isSelected }) => (isSelected ? 'var(--font-bold)' : 'var(--font-normal)')}; letter-spacing: 0.0125rem; line-height: ${({ $isMobile }) => ($isMobile ? 1.5 : 1.25)}rem; - text-align: center; &:hover { ${({ isSelected, theme }) => !isSelected && ` From 5f8de52fa37115a45f28b1423670a7f59eba52b0 Mon Sep 17 00:00:00 2001 From: Henri Bernard <132286421+hebernardEquisoft@users.noreply.github.com> Date: Tue, 11 Feb 2025 16:54:30 -0500 Subject: [PATCH 12/13] fix(Pagination): post review changes --- .../nav-button/pagination-nav-button.tsx | 29 +++++++++---------- .../pagination/buttons/nav-button/styled.ts | 13 ++------- .../page-button/pagination-page-button.tsx | 4 +-- .../pagination/buttons/page-button/styled.ts | 16 +++++----- .../components/pagination/pagination.test.tsx | 2 +- 5 files changed, 26 insertions(+), 38 deletions(-) diff --git a/packages/react/src/components/pagination/buttons/nav-button/pagination-nav-button.tsx b/packages/react/src/components/pagination/buttons/nav-button/pagination-nav-button.tsx index 024c922ace..fd80a4e826 100644 --- a/packages/react/src/components/pagination/buttons/nav-button/pagination-nav-button.tsx +++ b/packages/react/src/components/pagination/buttons/nav-button/pagination-nav-button.tsx @@ -1,5 +1,5 @@ import { VoidFunctionComponent } from 'react'; -import { StyledButtonContainer, StyledIconButton, StyledWrapper } from './styled'; +import { StyledIconButton } from './styled'; import { usePaginationContext } from '../../context'; import { useDeviceContext } from '../../../device-context-provider/device-context-provider'; @@ -31,20 +31,17 @@ export const PaginationNavButton: VoidFunctionComponent - - - - + ); }; diff --git a/packages/react/src/components/pagination/buttons/nav-button/styled.ts b/packages/react/src/components/pagination/buttons/nav-button/styled.ts index 26b5187046..5eb9b6320b 100644 --- a/packages/react/src/components/pagination/buttons/nav-button/styled.ts +++ b/packages/react/src/components/pagination/buttons/nav-button/styled.ts @@ -1,21 +1,12 @@ import styled from 'styled-components'; import { IconButton } from '../../../buttons'; -export const StyledWrapper = styled.div<{ $isVisible: boolean }>` +export const StyledIconButton = styled(IconButton)<{ $isVisible: boolean, $isMobile: boolean }>` align-items: center; display: flex; gap: 0.5rem; - visibility: ${({ $isVisible }) => ($isVisible ? 'visible' : 'hidden')}; -`; - -export const StyledButtonContainer = styled.div` - align-items: center; - display: flex; - justify-content: center; -`; - -export const StyledIconButton = styled(IconButton)<{ $isMobile: boolean }>` min-height: ${({ $isMobile }) => ($isMobile ? 'var(--size-2x)' : 'var(--size-1halfx)')}; min-width: ${({ $isMobile }) => ($isMobile ? 'var(--size-2x)' : 'var(--size-1halfx)')}; + visibility: ${({ $isVisible }) => ($isVisible ? 'visible' : 'hidden')}; width: auto; `; diff --git a/packages/react/src/components/pagination/buttons/page-button/pagination-page-button.tsx b/packages/react/src/components/pagination/buttons/page-button/pagination-page-button.tsx index 77172aeca1..ae4a2387aa 100644 --- a/packages/react/src/components/pagination/buttons/page-button/pagination-page-button.tsx +++ b/packages/react/src/components/pagination/buttons/page-button/pagination-page-button.tsx @@ -28,7 +28,7 @@ export const PaginationPageButton: FC = ({ aria-current={isSelected ? 'page' : undefined} className="pagination-page-button" data-testid={id} - isSelected={isSelected} + $isSelected={isSelected} onClick={isSelected ? undefined : () => changePage(index)} onKeyPress={(event) => handlePageKeyDown(event.key, index)} type="button" @@ -36,7 +36,7 @@ export const PaginationPageButton: FC = ({ > {index} diff --git a/packages/react/src/components/pagination/buttons/page-button/styled.ts b/packages/react/src/components/pagination/buttons/page-button/styled.ts index 805ae6ff39..9ec97686ad 100644 --- a/packages/react/src/components/pagination/buttons/page-button/styled.ts +++ b/packages/react/src/components/pagination/buttons/page-button/styled.ts @@ -11,10 +11,10 @@ export const PageButtonWrapper = styled.li` list-style: none; `; -export const StyledButton = styled.button<{ isSelected: boolean, $isMobile: boolean }>` +export const StyledButton = styled.button<{ $isSelected: boolean, $isMobile: boolean }>` align-items: center; - background-color: ${({ isSelected, theme }) => theme.component[`pagination-page${getSelectionSuffix(isSelected)}-background-color`]}; - border: ${({ isSelected, theme }) => (isSelected ? `1px solid ${theme.component['pagination-page-selected-border-color']}` : 'none')}; + background-color: ${({ $isSelected, theme }) => theme.component[`pagination-page${getSelectionSuffix($isSelected)}-background-color`]}; + border: ${({ $isSelected, theme }) => ($isSelected ? `1px solid ${theme.component['pagination-page-selected-border-color']}` : 'none')}; border-radius: var(--border-radius-4x); display: flex; justify-content: center; @@ -25,19 +25,19 @@ export const StyledButton = styled.button<{ isSelected: boolean, $isMobile: bool ${focus}; &:hover { - background-color: ${({ isSelected, theme }) => theme.component[`pagination-page${getSelectionSuffix(isSelected)}-hover-background-color`]}; + background-color: ${({ $isSelected, theme }) => theme.component[`pagination-page${getSelectionSuffix($isSelected)}-hover-background-color`]}; } `; -export const StyledText = styled.span<{ isSelected: boolean, $isMobile: boolean }>` - color: ${({ isSelected, theme }) => theme.component[`pagination-page${getSelectionSuffix(isSelected)}-text-color`]}; +export const StyledText = styled.span<{ $isSelected: boolean, $isMobile: boolean }>` + color: ${({ $isSelected, theme }) => theme.component[`pagination-page${getSelectionSuffix($isSelected)}-text-color`]}; font-size: ${({ $isMobile }) => ($isMobile ? 1 : 0.875)}rem; - font-weight: ${({ isSelected }) => (isSelected ? 'var(--font-bold)' : 'var(--font-normal)')}; + font-weight: ${({ $isSelected }) => ($isSelected ? 'var(--font-bold)' : 'var(--font-normal)')}; letter-spacing: 0.0125rem; line-height: ${({ $isMobile }) => ($isMobile ? 1.5 : 1.25)}rem; &:hover { - ${({ isSelected, theme }) => !isSelected && ` + ${({ $isSelected, theme }) => !$isSelected && ` color: ${theme.component['pagination-page-hover-text-color']}; `} } diff --git a/packages/react/src/components/pagination/pagination.test.tsx b/packages/react/src/components/pagination/pagination.test.tsx index eb2ca62e41..f26d43863a 100644 --- a/packages/react/src/components/pagination/pagination.test.tsx +++ b/packages/react/src/components/pagination/pagination.test.tsx @@ -80,7 +80,7 @@ describe('Pagination', () => { ); const pageButton = findByTestId(wrapper, 'page-3').at(0); - expect(pageButton.prop('isSelected')).toBe(true); + expect(pageButton.prop('$isSelected')).toBe(true); wrapper.unmount(); }); From 3d734060d2fb421c8ad15f37695345a07759f63d Mon Sep 17 00:00:00 2001 From: Henri Bernard <132286421+hebernardEquisoft@users.noreply.github.com> Date: Wed, 12 Feb 2025 11:35:40 -0500 Subject: [PATCH 13/13] chore(Pagination): post review changes --- .../src/components/pagination/buttons/page-button/styled.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/react/src/components/pagination/buttons/page-button/styled.ts b/packages/react/src/components/pagination/buttons/page-button/styled.ts index 9ec97686ad..fbc5b14e25 100644 --- a/packages/react/src/components/pagination/buttons/page-button/styled.ts +++ b/packages/react/src/components/pagination/buttons/page-button/styled.ts @@ -21,6 +21,7 @@ export const StyledButton = styled.button<{ $isSelected: boolean, $isMobile: boo max-height: ${({ $isMobile }) => ($isMobile ? 'var(--size-2x)' : 'var(--size-1halfx)')}; min-width: ${({ $isMobile }) => ($isMobile ? 'var(--size-2x)' : 'var(--size-1halfx)')}; padding: ${({ $isMobile }) => ($isMobile ? '0.25rem 0.5rem' : '0.125rem 0.25rem')}; + user-select: none; ${focus};