@ebay/ui-core-react 7.3.2 → 7.3.4

package/src/ebay-lightbox-dialog/__tests__/index.stories.tsx

@@ -1,274 +0,0 @@
-import React, { useState } from 'react'
-import {
-    EbayDialogFooter,
-    EbayDialogHeader,
-    EbayDialogPreviousButton
-} from '../../ebay-dialog-base'
-import { EbayButton } from '../../ebay-button'
-import { EbayCheckbox } from '../../ebay-checkbox'
-import { EbayLabel } from '../../ebay-field'
-import { EbayLightboxDialog } from '../index'
-import { action } from '@storybook/addon-actions'
-
-const story: any = {
-    component: EbayLightboxDialog,
-    title: 'dialogs/ebay-lightbox-dialog'
-}
-
-const textParagraph = (
-    <p>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
-        labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
-        laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
-        voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
-        non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-    </p>
-)
-
-export const _Default = () => {
-    const [open, setOpen] = useState(false)
-    const close = () => setOpen(false)
-    return (
-        <div>
-            <button className="btn btn--secondary" onClick={() => setOpen(!open)}>
-                Open Dialog
-            </button>
-            <p>Some outside content...</p>
-            <EbayLightboxDialog
-                open={open}
-                onOpen={() => action('onOpen')()}
-                onClose={() => {
-                    action('onClose')()
-                    setOpen(false)
-                }}
-                a11yCloseText="Close"
-            >
-                <EbayDialogHeader>Heading</EbayDialogHeader>
-                {textParagraph}
-                <p>
-                    <a href="http://www.ebay.com">www.ebay.com</a>
-                </p>
-                <EbayDialogFooter>
-                    <EbayButton priority="primary" onClick={close}>
-                        OK
-                    </EbayButton>
-                    <EbayButton onClick={close}>Cancel</EbayButton>
-                </EbayDialogFooter>
-            </EbayLightboxDialog>
-        </div>
-    )
-}
-
-export const _AlwaysOpened = () => (
-    <div>
-        <p>Some outside content...</p>
-        <EbayLightboxDialog open a11yCloseText="Close dialog">
-            <EbayDialogHeader>Heading</EbayDialogHeader>
-            {textParagraph}
-            <p>
-                <a href="http://www.ebay.com">www.ebay.com</a>
-            </p>
-        </EbayLightboxDialog>
-    </div>
-)
-
-export const _ScrollingContent = () => (
-    <div>
-        <p>Some outside content...</p>
-        <EbayLightboxDialog open a11yCloseText="Close">
-            <EbayDialogHeader>Heading</EbayDialogHeader>
-            {textParagraph}
-            {textParagraph}
-            {textParagraph}
-            {textParagraph}
-            {textParagraph}
-            {textParagraph}
-            {textParagraph}
-            {textParagraph}
-            {textParagraph}
-            {textParagraph}
-            <p>
-                <a href="http://www.ebay.com">www.ebay.com</a>
-            </p>
-        </EbayLightboxDialog>
-    </div>
-)
-
-export const _MiniDialog = () => (
-    <div>
-        <p>Some outside content...</p>
-        <EbayLightboxDialog mode="mini" open a11yCloseText="Close">
-            <EbayDialogHeader />
-            <p>
-                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
-                labore et dolore magna aliqua.
-            </p>
-        </EbayLightboxDialog>
-    </div>
-)
-
-export const _DisableDialogClose = () => {
-    const [showDialog, setShowDialog] = useState(false)
-    const [dialogCloseable, setDialogCloseable] = useState(true)
-    const closeDialog = () => {
-        if (dialogCloseable) {
-            setShowDialog(false)
-        }
-    }
-
-    return (
-        <div>
-            <EbayButton onClick={() => setShowDialog(!showDialog)}>Show Dialog</EbayButton>
-
-            <EbayLightboxDialog open={showDialog} onClose={closeDialog} a11yCloseText="Close">
-                <EbayDialogHeader>Heading</EbayDialogHeader>
-
-                <p>Unselect the following checkbox to prevent user to close the dialog</p>
-                <EbayCheckbox
-                    id="checkbox-closeable"
-                    checked={dialogCloseable}
-                    onChange={() => setDialogCloseable(!dialogCloseable)}
-                >
-                    <EbayLabel>Enable closing dialog</EbayLabel>
-                </EbayCheckbox>
-
-                <p>
-                    Normally, the dialog can be closed by either:
-                    <ul>
-                        <li>clicking [X] icon on top of the dialog</li>
-                        <li>clicking OK button</li>
-                        <li>clicking the overlay or area outside the dialog</li>
-                        <li>Press Esc key on keyboard</li>
-                    </ul>
-                </p>
-
-                <EbayDialogFooter>
-                    <EbayButton onClick={closeDialog}>OK</EbayButton>
-                </EbayDialogFooter>
-            </EbayLightboxDialog>
-        </div>
-    )
-}
-
-export const _WithAnimation = () => {
-    const [open, setOpen] = useState(false)
-    const close = () => setOpen(false)
-    return (
-        <div>
-            <button className="btn btn--secondary" onClick={() => setOpen(!open)}>
-                Open Dialog
-            </button>
-            <p>Some outside content...</p>
-            <EbayLightboxDialog open={open} onClose={close} animated a11yCloseText="Close">
-                <EbayDialogHeader>Heading</EbayDialogHeader>
-                {textParagraph}
-                <p>
-                    <a href="http://www.ebay.com">www.ebay.com</a>
-                </p>
-                <EbayDialogFooter>
-                    <EbayButton priority="primary" onClick={close}>
-                        OK
-                    </EbayButton>
-                    <EbayButton onClick={close}>Cancel</EbayButton>
-                </EbayDialogFooter>
-            </EbayLightboxDialog>
-        </div>
-    )
-}
-export const _WithNoBackgroundClick = () => {
-    const [open, setOpen] = useState(false)
-    const close = () => setOpen(false)
-    return (
-        <div>
-            <button className="btn btn--secondary" onClick={() => setOpen(!open)}>
-                Open Dialog
-            </button>
-            <p>Some outside content...</p>
-            <EbayLightboxDialog open={open} onClose={close} buttonPosition="hidden" a11yCloseText="Close">
-                <EbayDialogHeader>Heading</EbayDialogHeader>
-                {textParagraph}
-                <p>
-                    <a href="http://www.ebay.com">www.ebay.com</a>
-                </p>
-                <EbayDialogFooter>
-                    <EbayButton priority="primary" onClick={close}>
-                        OK
-                    </EbayButton>
-                    <EbayButton onClick={close}>Cancel</EbayButton>
-                </EbayDialogFooter>
-            </EbayLightboxDialog>
-        </div>
-    )
-}
-
-export const _WithPreviousButton = () => (
-    <div>
-        <p>Some outside content...</p>
-        <EbayLightboxDialog open a11yCloseText="Close dialog">
-            <EbayDialogPreviousButton aria-label="Previous" onClick={action('previous button click')} />
-            <EbayDialogHeader>Heading</EbayDialogHeader>
-            {textParagraph}
-            <p>
-                <a href="http://www.ebay.com">www.ebay.com</a>
-            </p>
-        </EbayLightboxDialog>
-    </div>
-)
-
-export const _WithWideSize = () => (
-    <div>
-        <p>Some outside content...</p>
-        <EbayLightboxDialog open a11yCloseText="Close dialog" size="wide">
-            <EbayDialogPreviousButton aria-label="Previous" onClick={action('previous button click')} />
-            <EbayDialogHeader>Heading</EbayDialogHeader>
-            {textParagraph}
-            <p>
-                <a href="http://www.ebay.com">www.ebay.com</a>
-            </p>
-        </EbayLightboxDialog>
-    </div>
-)
-
-export const _WithNarrowSize = () => (
-    <div>
-        <p>Some outside content...</p>
-        <EbayLightboxDialog open a11yCloseText="Close dialog" size="narrow">
-            <EbayDialogPreviousButton aria-label="Previous" onClick={action('previous button click')} />
-            <EbayDialogHeader>Heading</EbayDialogHeader>
-            {textParagraph}
-            <p>
-                <a href="http://www.ebay.com">www.ebay.com</a>
-            </p>
-        </EbayLightboxDialog>
-    </div>
-)
-
-export const _WithFullscreenSize = () => (
-    <div>
-        <p>Some outside content...</p>
-        <EbayLightboxDialog open a11yCloseText="Close dialog" size="fullscreen">
-            <EbayDialogPreviousButton aria-label="Previous" onClick={action('previous button click')} />
-            <EbayDialogHeader>Heading</EbayDialogHeader>
-            {textParagraph}
-            <p>
-                <a href="http://www.ebay.com">www.ebay.com</a>
-            </p>
-        </EbayLightboxDialog>
-    </div>
-)
-
-export const _WithLargeSize = () => (
-    <div>
-        <p>Some outside content...</p>
-        <EbayLightboxDialog open a11yCloseText="Close dialog" size="large">
-            <EbayDialogPreviousButton aria-label="Previous" onClick={action('previous button click')} />
-            <EbayDialogHeader>Heading</EbayDialogHeader>
-            {textParagraph}
-            <p>
-                <a href="http://www.ebay.com">www.ebay.com</a>
-            </p>
-        </EbayLightboxDialog>
-    </div>
-)
-
-export default story

package/src/ebay-lightbox-dialog/index.ts

@@ -1 +0,0 @@
-export { default as EbayLightboxDialog } from './lightbox-dialog'

package/src/ebay-lightbox-dialog/lightbox-dialog.tsx

@@ -1,38 +0,0 @@
-import React, { FC } from 'react'
-import classNames from 'classnames'
-import { DialogBaseProps, DialogBaseWithState } from '../ebay-dialog-base'
-
-const classPrefix = 'lightbox-dialog'
-
-type Mode = 'default' | 'mini'
-type Size = 'wide' | 'narrow' | 'fullscreen' | 'large'
-
-export type Props<T = any> = Omit<DialogBaseProps<T>, 'size'> & {
-  open?: boolean;
-  mode?: Mode;
-  size?: Size;
-  onClose?: () => void;
-}
-
-const EbayLightboxDialog: FC<Props> = ({
-    open,
-    mode,
-    size,
-    onClose = () => {},
-    ...rest
-}) => (
-    <DialogBaseWithState
-        buttonPosition="right"
-        {...rest}
-        classPrefix={classPrefix}
-        onCloseBtnClick={onClose}
-        onBackgroundClick={onClose}
-        className={classNames(rest.className, `${classPrefix}--mask-fade`, size && `${classPrefix}--${size}`)}
-        windowClass={classNames('lightbox-dialog__window--fade', {
-            [`${classPrefix}__window--mini`]: mode === 'mini'
-        })}
-        open={open}
-    />
-)
-
-export default EbayLightboxDialog

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

@@ -1,118 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`ebay-listbox-button rendering renders borderless listbox button correctly 1`] = `
-<svg
-  aria-hidden="true"
-  class="icon icon--12"
-  focusable="false"
-  xmlns="http://www.w3.org/2000/svg"
->
-  <use
-    xlink:href="#icon-chevron-down-12"
-  />
-</svg>
-`;
-
-exports[`ebay-listbox-button rendering renders default listbox button correctly 1`] = `
-<svg
-  aria-hidden="true"
-  class="icon icon--12"
-  focusable="false"
-  xmlns="http://www.w3.org/2000/svg"
->
-  <use
-    xlink:href="#icon-chevron-down-12"
-  />
-</svg>
-`;
-
-exports[`ebay-listbox-button rendering renders default listbox button without selected option correctly 1`] = `
-<svg
-  aria-hidden="true"
-  class="icon icon--12"
-  focusable="false"
-  xmlns="http://www.w3.org/2000/svg"
->
-  <use
-    xlink:href="#icon-chevron-down-12"
-  />
-</svg>
-`;
-
-exports[`ebay-listbox-button rendering renders disabled state correctly 1`] = `
-<svg
-  aria-hidden="true"
-  class="icon icon--12"
-  focusable="false"
-  xmlns="http://www.w3.org/2000/svg"
->
-  <use
-    xlink:href="#icon-chevron-down-12"
-  />
-</svg>
-`;
-
-exports[`ebay-listbox-button rendering renders floating label correctly 1`] = `
-<svg
-  aria-hidden="true"
-  class="icon icon--12"
-  focusable="false"
-  xmlns="http://www.w3.org/2000/svg"
->
-  <use
-    xlink:href="#icon-chevron-down-12"
-  />
-</svg>
-`;
-
-exports[`ebay-listbox-button rendering renders fluid listbox button correctly 1`] = `
-<svg
-  aria-hidden="true"
-  class="icon icon--12"
-  focusable="false"
-  xmlns="http://www.w3.org/2000/svg"
->
-  <use
-    xlink:href="#icon-chevron-down-12"
-  />
-</svg>
-`;
-
-exports[`ebay-listbox-button rendering renders invalid state correctly 1`] = `
-<svg
-  aria-hidden="true"
-  class="icon icon--12"
-  focusable="false"
-  xmlns="http://www.w3.org/2000/svg"
->
-  <use
-    xlink:href="#icon-chevron-down-12"
-  />
-</svg>
-`;
-
-exports[`ebay-listbox-button rendering renders prefix label correctly 1`] = `
-<svg
-  aria-hidden="true"
-  class="icon icon--12"
-  focusable="false"
-  xmlns="http://www.w3.org/2000/svg"
->
-  <use
-    xlink:href="#icon-chevron-down-12"
-  />
-</svg>
-`;
-
-exports[`ebay-listbox-button rendering renders preselected index correctly 1`] = `
-<svg
-  aria-hidden="true"
-  class="icon icon--12"
-  focusable="false"
-  xmlns="http://www.w3.org/2000/svg"
->
-  <use
-    xlink:href="#icon-chevron-down-12"
-  />
-</svg>
-`;

package/src/ebay-listbox-button/__tests__/index.spec.tsx

@@ -1,221 +0,0 @@
-import React from 'react'
-import { fireEvent, render, screen } from '@testing-library/react'
-import { eventOfType } from '../../common/event-utils/__tests__/helpers'
-import { EbayListboxButton, EbayListboxButtonOption } from '..'
-
-jest.useFakeTimers()
-describe('<EbayListboxButton>', () => {
-    describe('a11y prefix', () => {
-        const renderListbox = async (listboxBtnLabel?) => {
-            await render(
-                <>
-                    <label id={listboxBtnLabel}>Select these items</label>
-                    <br />
-                    <br />
-                    <EbayListboxButton value="BB" prefixId={listboxBtnLabel}>
-                        <EbayListboxButtonOption value="AA">Option 1</EbayListboxButtonOption>
-                        <EbayListboxButtonOption value="BB">Option 2</EbayListboxButtonOption>
-                        <EbayListboxButtonOption value="CC">Option 3</EbayListboxButtonOption>
-                    </EbayListboxButton>
-                </>
-            )
-            const buttonElement = screen.getByRole('button')
-            const expandBtnTextId = screen.getByText('Option 2').id
-
-            return { buttonElement, expandBtnTextId }
-        }
-
-        it('should render with correct aria-labelledby if received prefix id', async () => {
-            const listboxBtnLabel = 'listbox-button__label'
-            const { buttonElement, expandBtnTextId } = await renderListbox(listboxBtnLabel)
-
-            expect(buttonElement).toHaveAttribute('aria-labelledby', `${listboxBtnLabel} ${expandBtnTextId}`)
-        })
-
-        it('should render without aria-labelledby if NOT received prefix id', async () => {
-            const { buttonElement } = await renderListbox()
-
-            expect(buttonElement).not.toHaveAttribute('aria-labelledby')
-        })
-    })
-
-    describe('on render', () => {
-        it('should display default button label', async () => {
-            const component = await render(
-                <EbayListboxButton>
-                    <EbayListboxButtonOption value="AA">Option 1</EbayListboxButtonOption>
-                    <EbayListboxButtonOption value="BB">Option 2</EbayListboxButtonOption>
-                </EbayListboxButton>
-            )
-            expect(component.getByRole('button')).toHaveTextContent('-')
-        })
-        it('should display custom button label', async () => {
-            const component = await render(
-                <EbayListboxButton unselectedText="Select">
-                    <EbayListboxButtonOption value="AA">Option 1</EbayListboxButtonOption>
-                    <EbayListboxButtonOption value="BB">Option 2</EbayListboxButtonOption>
-                </EbayListboxButton>
-            )
-            expect(component.getByRole('button')).toHaveTextContent('Select')
-        })
-        it('should display button label with selected option', async () => {
-            const component = await render(
-                <EbayListboxButton value="BB">
-                    <EbayListboxButtonOption value="AA">Option 1</EbayListboxButtonOption>
-                    <EbayListboxButtonOption value="BB">Option 2</EbayListboxButtonOption>
-                </EbayListboxButton>
-            )
-            expect(component.getByRole('button')).toHaveTextContent('Option 2')
-        })
-        it('should display button label with prefix', async () => {
-            const component = await render(
-                <EbayListboxButton prefixLabel="Selected:">
-                    <EbayListboxButtonOption value="AA">Option 1</EbayListboxButtonOption>
-                    <EbayListboxButtonOption value="BB">Option 2</EbayListboxButtonOption>
-                </EbayListboxButton>
-            )
-            expect(component.getByRole('button')).toHaveTextContent('Selected:-')
-        })
-        it('should display button label with prefix and selected option', async () => {
-            const component = await render(
-                <EbayListboxButton prefixLabel="Selected:" selected={1}>
-                    <EbayListboxButtonOption value="AA">Option 1</EbayListboxButtonOption>
-                    <EbayListboxButtonOption value="BB">Option 2</EbayListboxButtonOption>
-                </EbayListboxButton>
-            )
-            expect(component.getByRole('button')).toHaveTextContent('Selected:Option 2')
-        })
-        it('should preselect option by index', async () => {
-            const component = await render(
-                <EbayListboxButton selected={1}>
-                    <EbayListboxButtonOption value="AA">Option 1</EbayListboxButtonOption>
-                    <EbayListboxButtonOption value="BB">Option 2</EbayListboxButtonOption>
-                </EbayListboxButton>
-            )
-            expect(component.getByRole('button')).toHaveTextContent('Option 2')
-        })
-    })
-
-    describe('given the listbox with 3 items', () => {
-        beforeEach(async () => {
-            await render(
-                <EbayListboxButton prefixId="listboxBtnLabel" name="listbox-button-name">
-                    <EbayListboxButtonOption value="AA">Option 1</EbayListboxButtonOption>
-                    <EbayListboxButtonOption value="BB">Option 2</EbayListboxButtonOption>
-                    <EbayListboxButtonOption value="CC">Option 3</EbayListboxButtonOption>
-                </EbayListboxButton>
-            )
-        })
-        it('should display default button label', () => {
-            expect(screen.getByRole('button')).toHaveTextContent('-')
-        })
-        it('should not be expanded', () => {
-            expect(screen.getByRole('button')).toHaveAttribute('aria-expanded', `false`)
-        })
-
-        describe('when the button is clicked', () => {
-            beforeEach(async () => {
-                await fireEvent.click(screen.getByRole('button'))
-            })
-            it('then it has expanded the listbox', () => {
-                expect(screen.getByRole('button')).toHaveAttribute('aria-expanded', `true`)
-            })
-            it('then listbox options and rendered', () => {
-                expect(screen.getByRole('listbox')).toBeInTheDocument()
-            })
-            it('focus should move to listbox', () => {
-                const listbox = screen.getByRole('listbox')
-                jest.runAllTimers()
-                expect(listbox).toHaveFocus()
-            })
-            describe('when the button is clicked again', () => {
-                beforeEach(async () => {
-                    await fireEvent.click(screen.getByRole('button'))
-                })
-                it('then it has collapsed the listbox', () => {
-                    expect(screen.getByRole('button')).toHaveAttribute('aria-expanded', `false`)
-                })
-                xit('focus should move to button', () => {
-                    const button = screen.getByRole('button')
-                    jest.runAllTimers()
-                    expect(button).toHaveFocus()
-                })
-            })
-        })
-    })
-
-    describe('on change', () => {
-        it('should fire onChange event', () => {
-            const spy = jest.fn()
-            render(
-                <EbayListboxButton onChange={spy}>
-                    <EbayListboxButtonOption value="AA">Option 1</EbayListboxButtonOption>
-                    <EbayListboxButtonOption value="BB">Option 2</EbayListboxButtonOption>
-                    <EbayListboxButtonOption value="CC">Option 3</EbayListboxButtonOption>
-                </EbayListboxButton>
-            )
-            fireEvent.click(screen.getByRole('button'))
-            const index = 0
-            fireEvent.mouseDown(screen.getAllByRole('option')[index])
-            fireEvent.click(screen.getAllByRole('option')[index])
-
-            expect(spy).toHaveBeenCalledWith(eventOfType('click'), { index, selected: ['AA'], wasClicked: true })
-        })
-
-        it(`should pass the current selected value`, () => {
-            const spy = jest.fn()
-            render(
-                <EbayListboxButton onChange={spy}>
-                    <EbayListboxButtonOption value="AA">Option 1</EbayListboxButtonOption>
-                    <EbayListboxButtonOption value="BB">Option 2</EbayListboxButtonOption>
-                    <EbayListboxButtonOption value="CC">Option 3</EbayListboxButtonOption>
-                </EbayListboxButton>
-            )
-            fireEvent.click(screen.getByRole('button'))
-
-            fireEvent.mouseDown(screen.getAllByRole('option')[0])
-            fireEvent.click(screen.getAllByRole('option')[0])
-            expect(spy).toHaveBeenCalledWith(eventOfType('click'), { index: 0, selected: ['AA'], wasClicked: true })
-
-            fireEvent.mouseDown(screen.getAllByRole('option')[1])
-            fireEvent.click(screen.getAllByRole('option')[1])
-            expect(spy).toHaveBeenCalledWith(eventOfType('click'), { index: 1, selected: ['BB'], wasClicked: true })
-
-            fireEvent.mouseDown(screen.getAllByRole('option')[2])
-            fireEvent.click(screen.getAllByRole('option')[2])
-            expect(spy).toHaveBeenCalledWith(eventOfType('click'), { index: 2, selected: ['CC'], wasClicked: true })
-        })
-    })
-    describe('on expand', () => {
-        it('should fire onExpand event', () => {
-            const spy = jest.fn()
-            render(
-                <EbayListboxButton onExpand={spy}>
-                    <EbayListboxButtonOption value="AA">Option 1</EbayListboxButtonOption>
-                    <EbayListboxButtonOption value="BB">Option 2</EbayListboxButtonOption>
-                    <EbayListboxButtonOption value="CC">Option 3</EbayListboxButtonOption>
-                </EbayListboxButton>
-            )
-            fireEvent.click(screen.getByRole('button'))
-
-            expect(spy).toHaveBeenCalledWith()
-        })
-    })
-    describe('on collapse', () => {
-        it('should fire a event', () => {
-            const spy = jest.fn()
-            render(
-                <EbayListboxButton onCollapse={spy}>
-                    <EbayListboxButtonOption value="AA">Option 1</EbayListboxButtonOption>
-                    <EbayListboxButtonOption value="BB">Option 2</EbayListboxButtonOption>
-                    <EbayListboxButtonOption value="CC">Option 3</EbayListboxButtonOption>
-                </EbayListboxButton>
-            )
-            const button = screen.getByRole('button')
-            fireEvent.click(button)
-            fireEvent.click(button)
-
-            expect(spy).toHaveBeenCalledWith()
-        })
-    })
-})