@ebay/ui-core-react 7.3.0 → 7.3.2

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

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

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

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

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

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

@@ -0,0 +1,221 @@
+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()
+        })
+    })
+})