@ebay/ui-core-react 7.3.1 → 7.3.2

package/src/ebay-pagination/__tests__/index.spec.tsx

@@ -0,0 +1,130 @@
+import React from 'react'
+import { fireEvent, render } from '@testing-library/react'
+import { EbayPagination, EbayPaginationItem as Item } from '../index'
+import { eventOfType } from '../../common/event-utils/__tests__/helpers'
+
+jest.mock('../../common/random-id')
+
+jest.mock('react-dom', () => {
+    const original = jest.requireActual('react-dom')
+    return {
+        ...original,
+        createPortal: node => node
+    }
+})
+
+describe('<EbayPagination>', () => {
+    describe('on page click', () => {
+        it('should fire an event', () => {
+            const spy = jest.fn()
+            const wrapper = render(
+                <EbayPagination onSelect={spy}>
+                    <Item type="previous" href="#" />
+                    <Item href="#">1</Item>
+                    <Item href="#">2</Item>
+                    <Item href="#">3</Item>
+                    <Item href="#">4</Item>
+                    <Item href="#">5</Item>
+                    <Item current href="#">6</Item>
+                    <Item disabled type="next" href="#" />
+                </EbayPagination>
+            )
+            fireEvent.click(wrapper.getAllByRole('link')[1])
+
+            expect(spy).toHaveBeenCalled()
+        })
+    })
+
+    describe('on click handler', () => {
+        let wrapper
+        let spyOnPrev
+        let spyOnNext
+        let spyOnSelect
+
+        beforeEach(() => {
+            spyOnPrev = jest.fn()
+            spyOnNext = jest.fn()
+            spyOnSelect = jest.fn()
+            wrapper = render(
+                <EbayPagination onPrevious={spyOnPrev} onNext={spyOnNext} onSelect={spyOnSelect}>
+                    <Item type="previous" href="#" />
+                    <Item href="#">1</Item>
+                    <Item href="#">2</Item>
+                    <Item href="#" current>3</Item>
+                    <Item href="#">4</Item>
+                    <Item href="#">5</Item>
+                    <Item href="#">6</Item>
+                    <Item type="next" href="#" />
+                </EbayPagination>
+            )
+        })
+
+        it('should trigger onPrevious() on clicking prev arrow', () => {
+            fireEvent.click(wrapper.getByLabelText('Previous page'))
+
+            expect(spyOnSelect).not.toHaveBeenCalled()
+            expect(spyOnPrev).toHaveBeenCalledWith(eventOfType('click'))
+            expect(spyOnNext).not.toHaveBeenCalled()
+        })
+
+        it('should trigger onNext() on clicking next arrow', () => {
+            fireEvent.click(wrapper.getByLabelText('Next page'))
+
+            expect(spyOnSelect).not.toHaveBeenCalled()
+            expect(spyOnPrev).not.toHaveBeenCalled()
+            expect(spyOnNext).toHaveBeenCalledWith(eventOfType('click'))
+        })
+
+        it('should trigger onSelect() on clicking pagination item', () => {
+            fireEvent.click(wrapper.getAllByRole('link')[1])
+
+            expect(spyOnSelect).toHaveBeenCalledWith(eventOfType('click'), { value: '', index: 2 })
+            expect(spyOnPrev).not.toHaveBeenCalled()
+            expect(spyOnNext).not.toHaveBeenCalled()
+        })
+    })
+
+    describe('on page resize', () => {
+        it('should hide some pagination items when the layout space is too narrow so the selected item is always visible on the center', async () => {
+            const wrapper = render(
+                <EbayPagination >
+                    <Item type="previous" href="#" />
+                    <Item href="#">1</Item>
+                    <Item href="#">2</Item>
+                    <Item href="#">3</Item>
+                    <Item href="#">4</Item>
+                    <Item href="#">5</Item>
+                    <Item current href="#">6</Item>
+                    <Item href="#">7</Item>
+                    <Item href="#">8</Item>
+                    <Item href="#">9</Item>
+                    <Item type="next" href="#" />
+                </EbayPagination>
+            )
+            resizeWindow(500, 300)
+            expect(wrapper.container.querySelectorAll('li')[1]).toHaveAttribute('hidden', '')
+        })
+
+        it('should not hide any elements when all items are visible on given narrow space', () => {
+            const wrapper = render(
+                <EbayPagination >
+                    <Item type="previous" href="#" />
+                    <Item href="#">5</Item>
+                    <Item current href="#">6</Item>
+                    <Item href="#">7</Item>
+                    <Item type="next" href="#" />
+                </EbayPagination>
+            )
+            resizeWindow(500, 300)
+            expect(wrapper.container.querySelectorAll('li')[1]).not.toHaveAttribute('hidden')
+        })
+    })
+})
+
+function resizeWindow(x, y) {
+    // todo: fix this
+    // this thing doesn't affect any elements rendered by JSDOM
+    // global.window.innerWidth = x
+    // global.window.innerHeight = y
+    global.window.dispatchEvent(new Event('resize'))
+}

package/src/ebay-pagination/__tests__/index.stories.tsx

@@ -0,0 +1,317 @@
+import React, { useState } from 'react'
+import { action } from '@storybook/addon-actions'
+import { EbayPagination, EbayPaginationItem as Item } from '../index'
+import { EbayButton } from '../../ebay-button'
+import { EbayLightboxDialog } from '../../ebay-lightbox-dialog'
+
+export default {
+    title: 'navigation & disclosure/ebay-pagination'
+}
+
+export const BasicLinks = {
+    render: () => (
+        <>
+            <EbayPagination
+                a11yPreviousText="Previous page"
+                a11yNextText="Next page"
+                a11yCurrentText="Results Pagination - Page 1"
+                onPrevious={(e) => action('onPrevious')(e)}
+                onNext={(e) => action('onNext')(e)}
+                onSelect={(e, props) => action('onSelect')(e, props)}
+            >
+                <Item
+                    type="previous"
+                    disabled
+                    href="https://www.ebay.com/sch/i.html?_from=R40&_nkw=iphone&_sacat=0&_pgn=5"
+                />
+                <Item href="https://www.ebay.com/sch/i.html?_from=R40&_nkw=iphone&_sacat=0&_pgn=1" current>
+                    1
+                </Item>
+                <Item href="https://www.ebay.com/sch/i.html?_from=R40&_nkw=iphone&_sacat=0&_pgn=2">2</Item>
+                <Item href="https://www.ebay.com/sch/i.html?_from=R40&_nkw=iphone&_sacat=0&_pgn=3">3</Item>
+                <Item href="https://www.ebay.com/sch/i.html?_from=R40&_nkw=iphone&_sacat=0&_pgn=4">4</Item>
+                <Item href="https://www.ebay.com/sch/i.html?_from=R40&_nkw=iphone&_sacat=0&_pgn=5">5</Item>
+                <Item href="https://www.ebay.com/sch/i.html?_from=R40&_nkw=iphone&_sacat=0&_pgn=6">6</Item>
+                <Item href="https://www.ebay.com/sch/i.html?_from=R40&_nkw=iphone&_sacat=0&_pgn=7">7</Item>
+                <Item href="https://www.ebay.com/sch/i.html?_from=R40&_nkw=iphone&_sacat=0&_pgn=8">8</Item>
+                <Item href="https://www.ebay.com/sch/i.html?_from=R40&_nkw=iphone&_sacat=0&_pgn=9">9</Item>
+                <Item
+                    href="https://www.ebay.com/sch/i.html?_from=R40&_nkw=iphone&_sacat=0&_pgn=10"
+                    type="next"
+                />
+            </EbayPagination>
+        </>
+    ),
+
+    name: 'Basic links'
+}
+
+export const ArrowsDisabled = {
+    render: () => (
+        <>
+            <EbayPagination>
+                <Item disabled type="previous" href="#" />
+                <Item current type="page" href="#">
+                    1
+                </Item>
+                <Item disabled type="next" href="#" />
+            </EbayPagination>
+        </>
+    ),
+
+    name: 'Arrows disabled'
+}
+
+export const Buttons = () => (
+    <>
+        <EbayPagination
+            onPrevious={(e) => action('onPrevious')(e)}
+            onNext={(e) => action('onNext')(e)}
+            onSelect={(e, props) => action('onSelect')(e, props)}
+        >
+            <Item type="previous" />
+            <Item>1</Item>
+            <Item current>2</Item>
+            <Item>3</Item>
+            <Item>4</Item>
+            <Item>5</Item>
+            <Item>6</Item>
+            <Item>7</Item>
+            <Item>8</Item>
+            <Item>9</Item>
+            <Item type="next" />
+        </EbayPagination>
+    </>
+)
+
+export const ButtonsInteractiveClickToChangeActivePage = {
+    render: () => {
+        const InteractivePaginationButtons = ({ numOfItems, firstPage = 1 }) => {
+            const [activeIndex, setActiveIndex] = useState(0)
+            const handlePrev = () => {
+                const newIndex = Math.max(activeIndex - 1, 0)
+                setActiveIndex(newIndex)
+                action('Select previous')(newIndex + firstPage)
+            }
+            const handleNext = () => {
+                const newIndex = Math.min(activeIndex + 1, numOfItems)
+                setActiveIndex(newIndex)
+                action('Select next')(newIndex + firstPage)
+            }
+            const handleSelect = (_, __, pageIndex) => {
+                setActiveIndex(pageIndex)
+                action('Select page')(pageIndex + firstPage)
+            }
+
+            return (
+                <EbayPagination
+                    a11yCurrentText={`Results Pagination - Page ${firstPage + activeIndex}`}
+                    onPrevious={handlePrev}
+                    onNext={handleNext}
+                    onSelect={handleSelect as any}
+                >
+                    <Item type="previous" disabled={activeIndex === 0} />
+                    {Array.from(Array(numOfItems).keys()).map((i) => (
+                        <Item key={`item-${i}`} current={i === activeIndex}>
+                            {firstPage + i}
+                        </Item>
+                    ))}
+                    <Item type="next" disabled={activeIndex >= numOfItems - 1} />
+                </EbayPagination>
+            )
+        }
+
+        return (
+            <>
+                <div>
+                    <InteractivePaginationButtons numOfItems={15} />
+                </div>
+                <div>
+                    <InteractivePaginationButtons numOfItems={5} firstPage={6} />
+                </div>
+            </>
+        )
+    },
+
+    name: 'Buttons interactive (click to change active page)'
+}
+
+export const VariantShowLastInteractive = {
+    render: () => {
+        const InteractivePagination = ({ numOfItems }) => {
+            const [activeIndex, setActiveIndex] = useState(0)
+            const handlePrev = () => setActiveIndex(Math.max(activeIndex - 1, 0))
+            const handleNext = () => setActiveIndex(Math.min(activeIndex + 1, numOfItems))
+            const handleSelect = (_, value) => setActiveIndex(parseInt(value, 10) - 1)
+
+            return (
+                <EbayPagination
+                    a11yCurrentText={`Results Pagination - Page ${activeIndex + 1}`}
+                    onPrevious={handlePrev}
+                    onNext={handleNext}
+                    onSelect={handleSelect as any}
+                    variant="show-last"
+                >
+                    <Item type="previous" disabled={activeIndex === 0} />
+                    {Array.from(Array(numOfItems).keys()).map((i) => (
+                        <Item key={`item-${i}`} current={i === activeIndex}>
+                            {i + 1}
+                        </Item>
+                    ))}
+                    <Item type="next" disabled={activeIndex >= numOfItems - 1} />
+                </EbayPagination>
+            )
+        }
+
+        return (
+            <>
+                <InteractivePagination numOfItems={15} />
+            </>
+        )
+    },
+
+    name: 'Variant `showLast` (interactive)'
+}
+
+export const VariantOverflowInteractive = {
+    render: () => {
+        const InteractivePagination = ({ numOfItems }) => {
+            const [activeIndex, setActiveIndex] = useState(0)
+            const handlePrev = () => setActiveIndex(Math.max(activeIndex - 1, 0))
+            const handleNext = () => setActiveIndex(Math.min(activeIndex + 1, numOfItems))
+            const handleSelect = (_, value) => setActiveIndex(parseInt(value, 10) - 1)
+
+            return (
+                <EbayPagination
+                    a11yCurrentText={`Results Pagination - Page ${activeIndex + 1}`}
+                    onPrevious={handlePrev}
+                    onNext={handleNext}
+                    onSelect={handleSelect as any}
+                    variant="overflow"
+                >
+                    <Item type="previous" disabled={activeIndex === 0} />
+                    {Array.from(Array(numOfItems).keys()).map((i) => (
+                        <Item key={`item-${i}`} href="" current={i === activeIndex}>
+                            {i + 1}
+                        </Item>
+                    ))}
+                    <Item type="next" disabled={activeIndex >= numOfItems - 1} />
+                </EbayPagination>
+            )
+        }
+
+        return (
+            <>
+                <div>
+                    <InteractivePagination numOfItems={5} />
+                </div>
+                <div>
+                    <InteractivePagination numOfItems={9} />
+                </div>
+                <div>
+                    <InteractivePagination numOfItems={10} />
+                </div>
+                <div>
+                    <InteractivePagination numOfItems={15} />
+                </div>
+            </>
+        )
+    },
+
+    name: 'Variant `overflow` (interactive)'
+}
+
+export const Fluid = () => (
+    <>
+        <h2>Default fluid</h2>
+        <EbayPagination
+            fluid
+            onPrevious={action('onPaginationPrevious')}
+            onNext={action('onPaginationNext')}
+            onSelect={action('onPageSelect')}
+        >
+            <Item type="previous" />
+            <Item>1</Item>
+            <Item current>2</Item>
+            <Item>3</Item>
+            <Item>4</Item>
+            <Item>5</Item>
+            <Item>6</Item>
+            <Item>7</Item>
+            <Item>8</Item>
+            <Item>9</Item>
+            <Item>10</Item>
+            <Item>11</Item>
+            <Item>12</Item>
+            <Item>13</Item>
+            <Item type="next" />
+        </EbayPagination>
+
+        <h2>Fluid with dots</h2>
+        <EbayPagination
+            variant="show-last"
+            fluid
+            onPrevious={action('onPaginationPrevious')}
+            onNext={action('onPaginationNext')}
+            onSelect={action('onPageSelect')}
+        >
+            <Item type="previous" />
+            <Item>1</Item>
+            <Item current>2</Item>
+            <Item>3</Item>
+            <Item>4</Item>
+            <Item>5</Item>
+            <Item>6</Item>
+            <Item>7</Item>
+            <Item>8</Item>
+            <Item>9</Item>
+            <Item>10</Item>
+            <Item>11</Item>
+            <Item>12</Item>
+            <Item>13</Item>
+            <Item type="next" />
+        </EbayPagination>
+    </>
+)
+
+export const InsideADialog = {
+    render: () => {
+        const InteractivePagination = ({ numOfItems }) => {
+            const [activeIndex, setActiveIndex] = useState(0)
+            const [open, setOpen] = useState(false)
+            const handlePrev = () => setActiveIndex(Math.max(activeIndex - 1, 0))
+            const handleNext = () => setActiveIndex(Math.min(activeIndex + 1, numOfItems))
+            const handleSelect = (e, { index }) => setActiveIndex(index)
+
+            return (
+                <>
+                    <EbayButton onClick={() => setOpen(true)}>Show pagination dialog</EbayButton>
+                    <EbayLightboxDialog open={open}>
+                        <EbayPagination
+                            a11yCurrentText={`Results Pagination - Page ${activeIndex + 1}`}
+                            onPrevious={handlePrev}
+                            onNext={handleNext}
+                            onSelect={handleSelect}
+                        >
+                            <Item type="previous" disabled={activeIndex === 0} />
+                            {Array.from(Array(numOfItems).keys()).map((i) => (
+                                <Item key={`item-${i}`} current={i === activeIndex}>
+                                    {i + 1}
+                                </Item>
+                            ))}
+                            <Item type="next" disabled={activeIndex >= numOfItems - 1} />
+                        </EbayPagination>
+                    </EbayLightboxDialog>
+                </>
+            )
+        }
+
+        return (
+            <>
+                <InteractivePagination numOfItems={5} />
+            </>
+        )
+    },
+
+    name: 'Inside a dialog'
+}

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

@@ -0,0 +1,129 @@
+import React from 'react'
+import { render, screen, within } from '@testing-library/react'
+import { composeStories } from '@storybook/react'
+import * as stories from './index.stories'
+
+const { BasicLinks, ArrowsDisabled, Buttons, Fluid } = composeStories(stories)
+
+describe('ebay-pagination rendering', () => {
+    it('renders basic links story correctly', () => {
+        const { container } = render(<BasicLinks />)
+
+        const pagination = screen.getByRole('navigation')
+        expect(pagination).toHaveClass('pagination')
+        expect(pagination).toHaveAttribute('aria-labelledby', 'ebay-pagination-pagination-heading')
+
+        const status = screen.getByRole('status')
+        expect(status).toHaveAttribute('aria-live', 'polite')
+
+        const h2 = within(status).getByRole('heading', { level: 2 })
+        expect(h2).toHaveAttribute('id', 'ebay-pagination-pagination-heading')
+        expect(h2).toHaveTextContent('Results Pagination - Page 1')
+
+        const linkPrev = container.querySelector('.pagination__previous')
+        expect(linkPrev).toHaveClass('icon-link')
+        expect(linkPrev).toHaveStyle({ minWidth: '40px' })
+        expect(linkPrev).toHaveAttribute('aria-label', 'Previous page')
+        expect(linkPrev).toHaveAttribute('aria-disabled', 'true')
+        expect(linkPrev.querySelector('svg')).toMatchSnapshot()
+
+        const linkNext = (container as Element).querySelector('.pagination__next')
+        expect(linkNext).toHaveClass('icon-link')
+        expect(linkNext).toHaveStyle({ minWidth: '40px' })
+        expect(linkNext).toHaveAttribute('aria-label', 'Next page')
+        expect(linkNext).not.toHaveAttribute('aria-disabled')
+        expect(linkNext).toHaveAttribute('href', 'https://www.ebay.com/sch/i.html?_from=R40&_nkw=iphone&_sacat=0&_pgn=10')
+        expect(linkNext.querySelector('svg')).toMatchSnapshot()
+
+        const items = screen.getByRole('list')
+        expect(items).toHaveClass('pagination__items')
+
+        const pages = items.querySelectorAll('li a')
+        expect(pages).toHaveLength(9)
+
+        expect(pages[0]).toHaveClass('pagination__item')
+        expect(pages[0]).toHaveAttribute('aria-current', 'page')
+        expect(pages[0]).toHaveAttribute('href', 'https://www.ebay.com/sch/i.html?_from=R40&_nkw=iphone&_sacat=0&_pgn=1')
+        expect(pages[0]).toHaveTextContent('1')
+
+        expect(pages[1]).toHaveClass('pagination__item')
+        expect(pages[1]).not.toHaveAttribute('aria-current')
+        expect(pages[1]).toHaveAttribute('href', 'https://www.ebay.com/sch/i.html?_from=R40&_nkw=iphone&_sacat=0&_pgn=2')
+        expect(pages[1]).toHaveTextContent('2')
+
+        // skip pages 2-8
+
+        expect(pages[8]).toHaveClass('pagination__item')
+        expect(pages[8]).not.toHaveAttribute('aria-current')
+        expect(pages[8]).toHaveAttribute('href', 'https://www.ebay.com/sch/i.html?_from=R40&_nkw=iphone&_sacat=0&_pgn=9')
+        expect(pages[8]).toHaveTextContent('9')
+    })
+
+    it('renders arrows disabled story correctly', () => {
+        const { container } = render(<ArrowsDisabled />)
+
+        const linkPrev = container.querySelector('.pagination__previous')
+        expect(linkPrev).toHaveAttribute('aria-label', 'Previous page')
+        expect(linkPrev).toHaveAttribute('aria-disabled', 'true')
+
+        const linkNext = container.querySelector('.pagination__next')
+        expect(linkNext).toHaveAttribute('aria-label', 'Next page')
+        expect(linkNext).toHaveAttribute('aria-disabled', 'true')
+    })
+
+    it('renders buttons story correctly', () => {
+        const { container } = render(<Buttons />)
+
+        const pagination = screen.getByRole('navigation')
+        expect(pagination).toHaveClass('pagination')
+        expect(pagination).toHaveAttribute('aria-labelledby', 'ebay-pagination-pagination-heading')
+
+        const status = screen.getByRole('status')
+        expect(status).toHaveAttribute('aria-live', 'polite')
+
+        const h2 = within(status).getByRole('heading', { level: 2 })
+        expect(h2).toHaveAttribute('id', 'ebay-pagination-pagination-heading')
+        expect(h2).toHaveTextContent('Pagination - Current Page')
+
+        const linkPrev = container.querySelector('.pagination__previous')
+        expect(linkPrev).toHaveClass('icon-btn')
+        expect(linkPrev).toHaveStyle({ minWidth: '40px' })
+        expect(linkPrev).toHaveAttribute('aria-label', 'Previous page')
+        expect(linkPrev).not.toHaveAttribute('aria-disabled')
+        expect(linkPrev.querySelector('svg')).toMatchSnapshot()
+
+        const linkNext = container.querySelector('.pagination__next')
+        expect(linkNext).toHaveClass('icon-btn')
+        expect(linkNext).toHaveStyle({ minWidth: '40px' })
+        expect(linkNext).toHaveAttribute('aria-label', 'Next page')
+        expect(linkNext).not.toHaveAttribute('aria-disabled')
+        expect(linkNext.querySelector('svg')).toMatchSnapshot()
+
+        const items = screen.getByRole('list')
+        expect(items).toHaveClass('pagination__items')
+
+        const pages = items.querySelectorAll('li button')
+        expect(pages).toHaveLength(9)
+
+        expect(pages[0]).toHaveClass('pagination__item')
+        expect(pages[0]).not.toHaveAttribute('aria-current')
+        expect(pages[0]).toHaveTextContent('1')
+
+        expect(pages[1]).toHaveClass('pagination__item')
+        expect(pages[1]).toHaveAttribute('aria-current', 'page')
+        expect(pages[1]).toHaveTextContent('2')
+
+        // skip pages 2-8
+
+        expect(pages[8]).toHaveClass('pagination__item')
+        expect(pages[8]).not.toHaveAttribute('aria-current')
+        expect(pages[8]).toHaveTextContent('9')
+    })
+
+    it('renders fluid story correctly', () => {
+        render(<Fluid />)
+
+        const pagination = screen.getAllByRole('navigation')[0]
+        expect(pagination).toHaveClass('pagination pagination--fluid')
+    })
+})

package/src/ebay-pagination/const.ts

@@ -0,0 +1,5 @@
+export const MIN_PAGES = 1
+export const MAX_PAGES = 9
+export const MIN_VISIBLE_ITEMS = 4
+export const LEADING_SPACE_WITH_DOT = 2
+export const TRAILING_SPACE_WITH_DOT = MAX_PAGES - LEADING_SPACE_WITH_DOT