@ebay/ui-core-react 7.3.1 → 7.3.2

package/src/ebay-page-notice/__tests__/render.spec.tsx

@@ -0,0 +1,175 @@
+import React from 'react'
+import { render, screen, within } from '@testing-library/react'
+import { composeStories } from '@storybook/react'
+import * as stories from './index.stories'
+
+const {
+    SimpleUsage,
+    SimpleUsageWithId,
+    AttentionMessage,
+    ConfirmationMessage,
+    DismissibleMessageWithCta,
+    MessageWithFooter,
+    InformationMessage,
+    DismissibleNotice
+} = composeStories(stories)
+
+describe('ebay-page-notice rendering', () => {
+    it('renders simple usage story correctly', () => {
+        render(<SimpleUsage />)
+
+        const pageNotice = screen.getByRole('region')
+        expect(pageNotice).toHaveClass('page-notice')
+        expect(pageNotice).toHaveAttribute('aria-labelledby', 'general-status')
+        expect(pageNotice.querySelector('.page-notice__main')).toHaveTextContent('text message')
+    })
+
+    it('renders simple usage with id story correctly', () => {
+        render(<SimpleUsageWithId />)
+
+        const pageNotice = screen.getByRole('region')
+        expect(pageNotice).toHaveClass('page-notice page-notice--confirmation')
+        expect(pageNotice).toHaveAttribute('aria-labelledby', 'main-page-notice')
+
+        const header = pageNotice.querySelector('.page-notice__header')
+        expect(header).toHaveAttribute('id', 'main-page-notice')
+
+        const svg = header.querySelector('svg')
+        expect(svg).toMatchSnapshot()
+
+        expect(pageNotice.querySelector('.page-notice__main')).toHaveTextContent('text message')
+    })
+
+    it('renders attention message story correctly', () => {
+        render(<AttentionMessage />)
+
+        const pageNotice = screen.getByRole('region')
+        expect(pageNotice).toHaveClass('page-notice page-notice--attention')
+        expect(pageNotice).toHaveAttribute('aria-labelledby', 'attention-status')
+
+        const pageNoticeHeader = pageNotice.querySelector('.page-notice__header')
+        expect(pageNoticeHeader).toHaveAttribute('id', 'attention-status')
+
+        const svg = pageNoticeHeader.querySelector('svg')
+        expect(svg).toMatchSnapshot()
+
+        const main: HTMLElement = pageNotice.querySelector('.page-notice__main')
+        const header = within(main).getByRole('heading', { level: 2 })
+        expect(header).toHaveClass('page-notice__title')
+        expect(header).toHaveTextContent('Error.')
+        expect(main.querySelector('p')).toHaveTextContent('Please take another look at the following:Card number, Expiration date & Security code.')
+    })
+
+    it('renders confirmation message story correctly', () => {
+        render(<ConfirmationMessage />)
+
+        const pageNotice = screen.getByRole('region')
+        expect(pageNotice).toHaveClass('page-notice page-notice--confirmation')
+        expect(pageNotice).toHaveAttribute('aria-labelledby', 'confirmation-status')
+
+        const pageNoticeHeader = pageNotice.querySelector('.page-notice__header')
+        expect(pageNoticeHeader).toHaveAttribute('id', 'confirmation-status')
+
+        const svg = pageNoticeHeader.querySelector('svg')
+        expect(svg).toMatchSnapshot()
+
+        const main: HTMLElement = pageNotice.querySelector('.page-notice__main')
+        const header = within(main).getByRole('heading', { level: 2 })
+        expect(header).toHaveClass('page-notice__title')
+        expect(header).toHaveTextContent('Congrats!')
+        expect(main.querySelector('p')).toHaveTextContent('You just listed Spam and Eggs From the Cows Perspective (paperback).')
+    })
+
+    it('renders information message story correctly', () => {
+        render(<InformationMessage />)
+
+        const pageNotice = screen.getByRole('region')
+        expect(pageNotice).toHaveClass('page-notice page-notice--information')
+        expect(pageNotice).toHaveAttribute('aria-labelledby', 'information-status')
+
+        const pageNoticeHeader = pageNotice.querySelector('.page-notice__header')
+        expect(pageNoticeHeader).toHaveAttribute('id', 'information-status')
+
+        const svg = pageNoticeHeader.querySelector('svg')
+        expect(svg).toMatchSnapshot()
+
+        const main: HTMLElement = pageNotice.querySelector('.page-notice__main')
+        const header = within(main).getByRole('heading', { level: 2 })
+        expect(header).toHaveClass('page-notice__title')
+        expect(header).toHaveTextContent('Good news!')
+        expect(main.querySelector('p')).toHaveTextContent('You get free shipping on your next pair of shoes! Learn more.')
+    })
+
+    it('renders dismissible message with cta story correctly', () => {
+        render(<DismissibleMessageWithCta />)
+
+        const pageNotice = screen.getByRole('region')
+        expect(pageNotice).toHaveClass('page-notice page-notice--information')
+        expect(pageNotice).toHaveAttribute('aria-labelledby', 'information-status')
+
+        const pageNoticeHeader = pageNotice.querySelector('.page-notice__header')
+        expect(pageNoticeHeader).toHaveAttribute('id', 'information-status')
+
+        const svg = pageNoticeHeader.querySelector('svg')
+        expect(svg).toMatchSnapshot()
+
+        const main: HTMLElement = pageNotice.querySelector('.page-notice__main')
+        const header = within(main).getByRole('heading', { level: 2 })
+        expect(header).toHaveClass('page-notice__title')
+        expect(header).toHaveTextContent('Your order\'s in!')
+        expect(main.querySelector('p')).toHaveTextContent('We\'ll email updates to jonsnow@gmail.com. You should get it by Thu, Sept 22.')
+
+        const cta: HTMLElement = pageNotice.querySelector('.page-notice__cta')
+        expect(within(cta).getByRole('link')).toHaveAttribute('href', 'https://ebay.com')
+        expect(cta).toHaveTextContent('Action')
+
+        const footer: HTMLElement = pageNotice.querySelector('.page-notice__footer')
+        const buttonClose = within(footer).getByRole('button', { name: 'Close' })
+        expect(buttonClose).toHaveClass('fake-link page-notice__dismiss')
+        expect(buttonClose.querySelector('svg')).toMatchSnapshot()
+    })
+
+    it('renders message with footer story correctly', () => {
+        render(<MessageWithFooter />)
+
+        const pageNotice = screen.getByRole('region')
+        expect(pageNotice).toHaveClass('page-notice page-notice--confirmation')
+        expect(pageNotice).toHaveAttribute('aria-labelledby', 'confirmation-status')
+
+        const pageNoticeHeader = pageNotice.querySelector('.page-notice__header')
+        expect(pageNoticeHeader).toHaveAttribute('id', 'confirmation-status')
+
+        const svg = pageNoticeHeader.querySelector('svg')
+        expect(svg).toMatchSnapshot()
+
+        const main: HTMLElement = pageNotice.querySelector('.page-notice__main')
+        const header = within(main).getByRole('heading', { level: 2 })
+        expect(header).toHaveClass('page-notice__title')
+        expect(header).toHaveTextContent('Your order\'s in!')
+        expect(main.querySelector('p')).toHaveTextContent('We\'ll email updates to jonsnow@gmail.com. You should get it by Thu, Sept 22.')
+
+        const footer: HTMLElement = pageNotice.querySelector('.page-notice__footer')
+        const link = within(footer).getByRole('link', { name: 'Action' })
+        expect(link).toHaveAttribute('href', 'https://ebay.com')
+    })
+
+    it('renders dismissible notice story correctly', () => {
+        render(<DismissibleNotice />)
+
+        const pageNotice = screen.getByRole('region')
+        expect(pageNotice).toHaveClass('page-notice page-notice--information')
+        expect(pageNotice).toHaveAttribute('aria-labelledby', 'information-status')
+
+        const pageNoticeHeader = pageNotice.querySelector('.page-notice__header')
+        expect(pageNoticeHeader).toHaveAttribute('id', 'information-status')
+
+        const svg = pageNoticeHeader.querySelector('svg')
+        expect(svg).toMatchSnapshot()
+
+        const main: HTMLElement = pageNotice.querySelector('.page-notice__main')
+        const header = within(main).getByRole('heading', { level: 2 })
+        expect(header).toHaveClass('page-notice__title')
+        expect(header).toHaveTextContent('Good news!')
+        expect(main.querySelector('p')).toHaveTextContent('You get free shipping on your next pair of shoes! Learn more.')
+    })
+})

package/src/ebay-page-notice/index.ts

@@ -0,0 +1,5 @@
+export { default as EbayPageNotice, type PageNoticeStatus, type Props as EbayPageNoticeProps } from './page-notice'
+export { default as EbayPageNoticeTitle } from './page-notice-title'
+export { default as EbayPageNoticeFooter } from './page-notice-footer'
+export { default as EbayPageNoticeCTA } from './page-notice-cta'
+export { EbayNoticeContent } from '../ebay-notice-base/components/ebay-notice-content'

package/src/ebay-page-notice/page-notice-cta.tsx

@@ -0,0 +1,15 @@
+import React, { FC, ReactNode } from 'react'
+import NoticeCTA from '../common/notice-utils/notice-cta'
+
+type Props = {
+    className?: string;
+    children?: ReactNode;
+}
+
+const EbayPageNoticeCTA: FC<Props> = ({ className, children }) => (
+    <NoticeCTA className={className} type="page">
+        {children}
+    </NoticeCTA>
+)
+
+export default EbayPageNoticeCTA

package/src/ebay-page-notice/page-notice-footer.tsx

@@ -0,0 +1,15 @@
+import React, { FC, ReactNode } from 'react'
+import NoticeFooter from '../common/notice-utils/notice-footer'
+
+type Props = {
+    className?: string;
+    children?: ReactNode;
+}
+
+const EbayPageNoticeFooter: FC<Props> = ({ className, children }) => (
+    <NoticeFooter className={className} type="page">
+        {children}
+    </NoticeFooter>
+)
+
+export default EbayPageNoticeFooter

package/src/ebay-page-notice/page-notice-title.tsx

@@ -0,0 +1,16 @@
+import React, { FC } from 'react'
+import NoticeTitle from '../common/notice-utils/notice-title'
+
+type Props = React.HTMLProps<HTMLHeadingElement> & {
+    as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+    className?: string;
+}
+
+const EbayPageNoticeTitle: FC<Props> = ({ className, as, children, ...rest }) => (
+    <NoticeTitle {...rest} className={className} as={as} type="page">
+        {children}
+    </NoticeTitle>
+)
+
+export default EbayPageNoticeTitle
+

package/src/ebay-page-notice/page-notice.tsx

@@ -0,0 +1,77 @@
+import React, {
+    ComponentProps,
+    FC,
+    KeyboardEvent,
+    KeyboardEventHandler,
+    MouseEvent,
+    MouseEventHandler,
+    ReactElement,
+    useState
+} from 'react'
+import NoticeContent from '../common/notice-utils/notice-content'
+import { EbayNoticeContent } from '../ebay-notice-base/components/ebay-notice-content'
+import { EbayIcon, Icon } from '../ebay-icon'
+import { EbayPageNoticeFooter } from './index'
+
+export type PageNoticeStatus = 'general' | 'attention' | 'confirmation' | 'information'
+export type Props = ComponentProps<'section'> & {
+    status?: PageNoticeStatus;
+    'aria-label'?: string;
+    a11yDismissText?: string;
+    onDismiss?: MouseEventHandler & KeyboardEventHandler;
+};
+
+const EbayPageNotice: FC<Props> = ({
+    id,
+    status = 'general',
+    children,
+    a11yDismissText,
+    'aria-label': ariaLabel,
+    onDismiss = () => {},
+    ...rest
+}) => {
+    const [dismissed, setDismissed] = useState(false)
+    const childrenArray = React.Children.toArray(children)
+    const content = childrenArray.find((child: ReactElement) => child.type === EbayNoticeContent) as ReactElement
+
+    if (!content) {
+        throw new Error(`EbayPageNotice: Please use a EbayNoticeContent that defines the content of the notice`)
+    }
+
+    const handleDismissed = (event: MouseEvent & KeyboardEvent) => {
+        setDismissed(true)
+        onDismiss(event)
+    }
+
+    return dismissed ? null : (
+        <section
+            {...rest}
+            aria-labelledby={id || `${status}-status`}
+            className={`page-notice ${status !== `general` ? `page-notice--${status}` : ``}`}
+            role="region">
+            {status !== `general` ? (
+                <div className="page-notice__header" id={id || `${status}-status`}>
+                    <EbayIcon
+                        name={`${status}Filled16` as Icon}
+                        a11yText={ariaLabel}
+                        a11yVariant="label"
+                    />
+                </div>
+            ) : null}
+            <NoticeContent {...content.props} type="page" />
+            {children}
+            {a11yDismissText && (
+                <EbayPageNoticeFooter>
+                    <button
+                        aria-label={a11yDismissText}
+                        className="fake-link page-notice__dismiss"
+                        onClick={handleDismissed as any}>
+                        <EbayIcon name="close16" />
+                    </button>
+                </EbayPageNoticeFooter>
+            )}
+        </section>
+    )
+}
+
+export default EbayPageNotice

package/src/ebay-pagination/__tests__/__snapshots__/render.spec.tsx.snap

@@ -0,0 +1,53 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ebay-pagination rendering renders basic links story correctly 1`] = `
+<svg
+  aria-hidden="true"
+  class="icon icon--16"
+  focusable="false"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <use
+    xlink:href="#icon-arrow-left-16"
+  />
+</svg>
+`;
+
+exports[`ebay-pagination rendering renders basic links story correctly 2`] = `
+<svg
+  aria-hidden="true"
+  class="icon icon--16"
+  focusable="false"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <use
+    xlink:href="#icon-arrow-right-16"
+  />
+</svg>
+`;
+
+exports[`ebay-pagination rendering renders buttons story correctly 1`] = `
+<svg
+  aria-hidden="true"
+  class="icon icon--16"
+  focusable="false"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <use
+    xlink:href="#icon-arrow-left-16"
+  />
+</svg>
+`;
+
+exports[`ebay-pagination rendering renders buttons story correctly 2`] = `
+<svg
+  aria-hidden="true"
+  class="icon icon--16"
+  focusable="false"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <use
+    xlink:href="#icon-arrow-right-16"
+  />
+</svg>
+`;

package/src/ebay-pagination/__tests__/helpers.spec.ts

@@ -0,0 +1,171 @@
+import { pageNumbersAround } from '../helpers'
+import { ItemState } from '../types'
+import { MAX_PAGES } from '../const'
+
+describe('pageNumbersAround()', () => {
+    it('on empty input should return 0/0 items', () => {
+        expect(pageNumbersAround(0, 0)).toEqual([])
+    })
+    it('on total=1 should return 1/3 items', () => {
+        expect(pageNumbersAround(3, 0, 1)).toEqual(['visible', 'hidden', 'hidden'])
+    })
+    it('on total=2 should return 2/2 items', () => {
+        expect(pageNumbersAround(2, 0, 2)).toEqual(['visible', 'visible'])
+        expect(pageNumbersAround(2, 1, 2)).toEqual(['visible', 'visible'])
+        expect(pageNumbersAround(2, 0, 3)).toEqual(['visible', 'visible'])
+    })
+    it('on total=2 should return 2/3 items', () => {
+        expect(pageNumbersAround(3, 0, 2)).toEqual(['visible', 'visible', 'hidden'])
+        expect(pageNumbersAround(3, 1, 2)).toEqual(['visible', 'visible', 'hidden'])
+        expect(pageNumbersAround(3, 2, 2)).toEqual(['hidden', 'visible', 'visible'])
+    })
+    it('on total=3 should return 3/3 items', () => {
+        expect(pageNumbersAround(3, 0, 3)).toEqual(['visible', 'visible', 'visible'])
+        expect(pageNumbersAround(3, 1, 3)).toEqual(['visible', 'visible', 'visible'])
+        expect(pageNumbersAround(3, 2, 3)).toEqual(['visible', 'visible', 'visible'])
+    })
+    it('on total=3 should return 3/4 items', () => {
+        expect(pageNumbersAround(4, 0, 3)).toEqual(['visible', 'visible', 'visible', 'hidden'])
+        expect(pageNumbersAround(4, 2, 3)).toEqual(['hidden', 'visible', 'visible', 'visible'])
+    })
+    it('on total=3 should return 3/9 items', () => {
+        expect(pageNumbersAround(9, 0, 3)).toEqual(['visible', 'visible', 'visible', 'hidden', 'hidden', 'hidden', 'hidden', 'hidden', 'hidden'])
+        expect(pageNumbersAround(9, 2, 3)).toEqual(['hidden', 'visible', 'visible', 'visible', 'hidden', 'hidden', 'hidden', 'hidden', 'hidden'])
+    })
+})
+
+function pageNumbersAroundWithDots(
+    totalItems: number,
+    selectedItem: number,
+    maxVisibleItems: number = totalItems
+): ItemState[] {
+    return pageNumbersAround(totalItems, selectedItem, maxVisibleItems, 'show-last')
+}
+
+describe('pageNumbersAroundWithDots()', () => {
+    it('on empty input should return []', () => {
+        expect(pageNumbersAroundWithDots(0, 0)).toEqual([])
+    })
+    it('on 1/1 should return [x]', () => {
+        expect(pageNumbersAroundWithDots(1, 0, 1)).toEqual(['visible'])
+    })
+    it('on 1/2 should return [x, ], [ ,x]', () => {
+        expect(pageNumbersAroundWithDots(2, 0, 1)).toEqual(['visible', 'hidden'])
+        expect(pageNumbersAroundWithDots(2, 1, 1)).toEqual(['hidden', 'visible'])
+    })
+    it('on 1/3 should return [x, , ], [ ,x, ], [ , ,x]', () => {
+        expect(pageNumbersAroundWithDots(3, 0, 1)).toEqual(['visible', 'hidden', 'hidden'])
+        expect(pageNumbersAroundWithDots(3, 1, 1)).toEqual(['hidden', 'visible', 'hidden'])
+        expect(pageNumbersAroundWithDots(3, 2, 1)).toEqual(['hidden', 'hidden', 'visible'])
+    })
+
+    it('on 2/2, 3/2 should return [x,x]', () => {
+        expect(pageNumbersAroundWithDots(2, 0, 2)).toEqual(['visible', 'visible'])
+        expect(pageNumbersAroundWithDots(2, 1, 2)).toEqual(['visible', 'visible'])
+        expect(pageNumbersAroundWithDots(2, 1, 2)).toEqual(['visible', 'visible'])
+        expect(pageNumbersAroundWithDots(2, 0, 3)).toEqual(['visible', 'visible'])
+    })
+    it('on 2/3 should return [x,…, ], [ ,x,x], [ ,x,x]', () => {
+        expect(pageNumbersAroundWithDots(3, 0, 2)).toEqual(['visible', 'dots', 'hidden'])
+        expect(pageNumbersAroundWithDots(3, 1, 2)).toEqual(['hidden', 'visible', 'visible'])
+        expect(pageNumbersAroundWithDots(3, 2, 2)).toEqual(['hidden', 'visible', 'visible'])
+    })
+    it('on 2/4 should return [x,…, , ], [ ,x,…, ], [ , ,x,x], [ , ,x,x]', () => {
+        expect(pageNumbersAroundWithDots(4, 0, 2)).toEqual(['visible', 'dots', 'hidden', 'hidden'])
+        expect(pageNumbersAroundWithDots(4, 1, 2)).toEqual(['hidden', 'visible', 'dots', 'hidden'])
+        expect(pageNumbersAroundWithDots(4, 2, 2)).toEqual(['hidden', 'hidden', 'visible', 'visible'])
+        expect(pageNumbersAroundWithDots(4, 3, 2)).toEqual(['hidden', 'hidden', 'visible', 'visible'])
+    })
+
+    it('on 3/3 should return [x,x,x]', () => {
+        expect(pageNumbersAroundWithDots(3, 0, 3)).toEqual(['visible', 'visible', 'visible'])
+        expect(pageNumbersAroundWithDots(3, 1, 3)).toEqual(['visible', 'visible', 'visible'])
+        expect(pageNumbersAroundWithDots(3, 2, 3)).toEqual(['visible', 'visible', 'visible'])
+    })
+    it('on 3/4 should return [x,…, ,x], [ ,x,x,x], [ ,x,x,x], [ ,x,x,x]', () => {
+        expect(pageNumbersAroundWithDots(4, 0, 3)).toEqual(['visible', 'dots', 'hidden', 'visible'])
+        expect(pageNumbersAroundWithDots(4, 1, 3)).toEqual(['hidden', 'visible', 'visible', 'visible'])
+        expect(pageNumbersAroundWithDots(4, 2, 3)).toEqual(['hidden', 'visible', 'visible', 'visible'])
+        expect(pageNumbersAroundWithDots(4, 3, 3)).toEqual(['hidden', 'visible', 'visible', 'visible'])
+    })
+    it('on 3/5 should return [x,…, , ,x], [ ,x,…, ,x], [ , ,x,x,x], [ , ,x,x,x], [ , ,x,x,x]', () => {
+        expect(pageNumbersAroundWithDots(5, 0, 3)).toEqual(['visible', 'dots', 'hidden', 'hidden', 'visible'])
+        expect(pageNumbersAroundWithDots(5, 1, 3)).toEqual(['hidden', 'visible', 'dots', 'hidden', 'visible'])
+        expect(pageNumbersAroundWithDots(5, 2, 3)).toEqual(['hidden', 'hidden', 'visible', 'visible', 'visible'])
+        expect(pageNumbersAroundWithDots(5, 3, 3)).toEqual(['hidden', 'hidden', 'visible', 'visible', 'visible'])
+        expect(pageNumbersAroundWithDots(5, 4, 3)).toEqual(['hidden', 'hidden', 'visible', 'visible', 'visible'])
+    })
+    it('on 3/9 should return [x,…, , , , , , ,x], [ , , , , ,x,…, ,x], [ , , , , , ,x,x,x]', () => {
+        expect(pageNumbersAroundWithDots(9, 0, 3)).toEqual(['visible', 'dots', 'hidden', 'hidden', 'hidden', 'hidden', 'hidden', 'hidden', 'visible'])
+        expect(pageNumbersAroundWithDots(9, 5, 3)).toEqual(['hidden', 'hidden', 'hidden', 'hidden', 'hidden', 'visible', 'dots', 'hidden', 'visible'])
+        expect(pageNumbersAroundWithDots(9, 9, 3)).toEqual(['hidden', 'hidden', 'hidden', 'hidden', 'hidden', 'hidden', 'visible', 'visible', 'visible'])
+    })
+
+    it('on 4/4 should return [x,x,x,x]', () => {
+        expect(pageNumbersAroundWithDots(4, 0, 4)).toEqual(['visible', 'visible', 'visible', 'visible'])
+        expect(pageNumbersAroundWithDots(4, 1, 4)).toEqual(['visible', 'visible', 'visible', 'visible'])
+        expect(pageNumbersAroundWithDots(4, 2, 4)).toEqual(['visible', 'visible', 'visible', 'visible'])
+        expect(pageNumbersAroundWithDots(4, 3, 4)).toEqual(['visible', 'visible', 'visible', 'visible'])
+    })
+    it('on 4/5 should return [x,x,…, ,x], [x,x,…, ,x], [ ,x,x,x,x], [ ,x,x,x,x], [ ,x,x,x,x]', () => {
+        expect(pageNumbersAroundWithDots(5, 0, 4)).toEqual(['visible', 'visible', 'dots', 'hidden', 'visible'])
+        expect(pageNumbersAroundWithDots(5, 1, 4)).toEqual(['visible', 'visible', 'dots', 'hidden', 'visible'])
+        expect(pageNumbersAroundWithDots(5, 2, 4)).toEqual(['hidden', 'visible', 'visible', 'visible', 'visible'])
+        expect(pageNumbersAroundWithDots(5, 3, 4)).toEqual(['hidden', 'visible', 'visible', 'visible', 'visible'])
+        expect(pageNumbersAroundWithDots(5, 4, 4)).toEqual(['hidden', 'visible', 'visible', 'visible', 'visible'])
+    })
+    it('on 4/9 should return [x,x,…, , , , , ,x], [ , , , ,x,x,…, ,x], [ , , , , ,x,x,x,x]', () => {
+        expect(pageNumbersAroundWithDots(9, 0, 4)).toEqual(['visible', 'visible', 'dots', 'hidden', 'hidden', 'hidden', 'hidden', 'hidden', 'visible'])
+        expect(pageNumbersAroundWithDots(9, 5, 4)).toEqual(['hidden', 'hidden', 'hidden', 'hidden', 'visible', 'visible', 'dots', 'hidden', 'visible'])
+        expect(pageNumbersAroundWithDots(9, 9, 4)).toEqual(['hidden', 'hidden', 'hidden', 'hidden', 'hidden', 'visible', 'visible', 'visible', 'visible'])
+    })
+    it('on 5/9 should return [x,x,x,…, , , , ,x], [ , , ,x,x,x,…, ,x], [ , , , ,x,x,x,x,x]', () => {
+        expect(pageNumbersAroundWithDots(9, 0, 5)).toEqual(['visible', 'visible', 'visible', 'dots', 'hidden', 'hidden', 'hidden', 'hidden', 'visible'])
+        expect(pageNumbersAroundWithDots(9, 5, 5)).toEqual(['hidden', 'hidden', 'hidden', 'visible', 'visible', 'visible', 'dots', 'hidden', 'visible'])
+        expect(pageNumbersAroundWithDots(9, 9, 5)).toEqual(['hidden', 'hidden', 'hidden', 'hidden', 'visible', 'visible', 'visible', 'visible', 'visible'])
+    })
+})
+
+function pageNumbersAroundWithOverflowDots(
+    totalItems: number,
+    selectedItem: number,
+    maxVisibleItems: number = totalItems
+): ItemState[] {
+    const variant = 'overflow'
+    return pageNumbersAround(totalItems, selectedItem, variant === 'overflow' ? MAX_PAGES : maxVisibleItems, variant)
+}
+
+describe('pageNumbersAroundWithOverflowDots()', () => {
+    it('on empty input should return []', () => {
+        expect(pageNumbersAroundWithOverflowDots(0, 0)).toEqual([])
+    })
+    // variant={'overflow'} default to MAX_PAGES
+    it('on 1/1 should return [x]', () => {
+        expect(pageNumbersAroundWithOverflowDots(1, 0)).toEqual(['visible'])
+    })
+    it('on 2/2 should return [x,x]', () => {
+        expect(pageNumbersAroundWithOverflowDots(2, 0)).toEqual(['visible', 'visible'])
+        expect(pageNumbersAroundWithOverflowDots(2, 1)).toEqual(['visible', 'visible'])
+    })
+    it('on 3/3 should return [x,x,x]', () => {
+        expect(pageNumbersAroundWithOverflowDots(3, 0)).toEqual(['visible', 'visible', 'visible'])
+        expect(pageNumbersAroundWithOverflowDots(3, 1)).toEqual(['visible', 'visible', 'visible'])
+        expect(pageNumbersAroundWithOverflowDots(3, 2)).toEqual(['visible', 'visible', 'visible'])
+    })
+    it('on 2/2, 3/2 should return [x,x]', () => {
+        expect(pageNumbersAroundWithOverflowDots(2, 0)).toEqual(['visible', 'visible'])
+        expect(pageNumbersAroundWithOverflowDots(2, 1)).toEqual(['visible', 'visible'])
+        expect(pageNumbersAroundWithOverflowDots(2, 0)).toEqual(['visible', 'visible'])
+    })
+    it('on 9/9 should return [x,x,x,x,x,x,x,x]', () => {
+        expect(pageNumbersAroundWithOverflowDots(9, 0)).toEqual(['visible', 'visible', 'visible', 'visible', 'visible', 'visible', 'visible', 'visible', 'visible'])
+        expect(pageNumbersAroundWithOverflowDots(9, 5)).toEqual(['visible', 'visible', 'visible', 'visible', 'visible', 'visible', 'visible', 'visible', 'visible'])
+        expect(pageNumbersAroundWithOverflowDots(9, 9)).toEqual(['visible', 'visible', 'visible', 'visible', 'visible', 'visible', 'visible', 'visible', 'visible'])
+    })
+    it('on 15/15 should return [x,x,x,x,.....,(…),x], [x,x,x,x,.....,(…),x], [x,(...),x,x,x,x,(…),x], [x,(...),x,x,x,x,x,x]', () => {
+        expect(pageNumbersAroundWithOverflowDots(15, 0)).toEqual(['visible', 'visible', 'visible', 'visible', 'visible', 'visible', 'visible', 'dots', 'hidden', 'hidden', 'hidden', 'hidden', 'hidden', 'hidden', 'visible'])
+        expect(pageNumbersAroundWithOverflowDots(15, 4)).toEqual(['visible', 'visible', 'visible', 'visible', 'visible', 'visible', 'visible', 'dots', 'hidden', 'hidden', 'hidden', 'hidden', 'hidden', 'hidden', 'visible'])
+        expect(pageNumbersAroundWithOverflowDots(15, 8)).toEqual(['visible', 'dots', 'hidden', 'hidden', 'hidden', 'hidden', 'visible', 'visible', 'visible', 'visible', 'visible', 'hidden', 'hidden', 'dots', 'visible'])
+        expect(pageNumbersAroundWithOverflowDots(15, 15)).toEqual(['visible', 'dots', 'hidden', 'hidden', 'hidden', 'hidden', 'hidden', 'hidden', 'visible', 'visible', 'visible', 'visible', 'visible', 'visible', 'visible'])
+    })
+})