@ebay/ui-core-react 7.3.2 → 7.3.4

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

@@ -1,130 +0,0 @@
-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

@@ -1,317 +0,0 @@
-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

@@ -1,129 +0,0 @@
-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

@@ -1,5 +0,0 @@
-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