@ebay/ui-core-react 7.3.0 → 7.3.2

package/src/ebay-fake-tabs/fake-tabs.tsx

@@ -0,0 +1,41 @@
+import React, { cloneElement, ComponentProps, FC } from 'react'
+import classNames from 'classnames'
+
+import { excludeComponent, filterByType } from '../common/component-utils'
+import Tab from './tab'
+
+type FakeTabsProps = ComponentProps<'div'> & {
+    selectedIndex?: number;
+    tabMatchesCurrentUrl?: boolean;
+};
+
+const EbayFakeTabs: FC<FakeTabsProps> = ({
+    selectedIndex = 0,
+    tabMatchesCurrentUrl,
+    className,
+    children,
+    ...rest
+}) => {
+    const ariaCurrent = tabMatchesCurrentUrl === false ? 'true' : 'page'
+    const tabHeadings = filterByType(children, Tab).map((item, i) =>
+        cloneElement(item, {
+            ...item.props,
+            ariaCurrent: selectedIndex === i ? ariaCurrent : null
+        }))
+    const tabContent = excludeComponent(children, Tab)
+
+    return (
+        <div {...rest} className={classNames(className, 'fake-tabs')}>
+            <ul className="fake-tabs__items">
+                {tabHeadings}
+            </ul>
+            <div className="fake-tabs__content">
+                <div className="fake-tabs__cell">
+                    {tabContent}
+                </div>
+            </div>
+        </div>
+    )
+}
+
+export default EbayFakeTabs

package/src/ebay-fake-tabs/index.ts

@@ -0,0 +1,2 @@
+export { default as EbayFakeTabs } from './fake-tabs'
+export { default as EbayFakeTab } from './tab'

package/src/ebay-fake-tabs/tab.tsx

@@ -0,0 +1,23 @@
+import React, { ComponentProps, FC } from 'react'
+import classNames from 'classnames'
+
+type TabProps = ComponentProps<'li'> & {
+    href: string;
+    ariaCurrent?: 'page' | 'true';
+}
+
+const Tab: FC<TabProps> = ({
+    children,
+    href,
+    ariaCurrent,
+    className,
+    ...rest
+}) => (
+    <li {...rest} className={classNames(className, 'fake-tabs__item')}>
+        <a href={href} aria-current={ariaCurrent}>
+            {children}
+        </a>
+    </li>
+)
+
+export default Tab

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

@@ -0,0 +1,42 @@
+import React from 'react'
+import { screen, render } from '@testing-library/react'
+import { composeStory } from '@storybook/react'
+import Meta, { DefaultInline } from './index.stories'
+
+const DefaultStory = composeStory(DefaultInline, Meta)
+
+describe('DefaultInline story', () => {
+    beforeEach(() => {
+        render(<DefaultStory />)
+    })
+
+    it('renders textbox correctly', () => {
+        const field = screen.getByRole('textbox')
+        expect(field).toHaveProperty('placeholder', 'placeholder text')
+    })
+
+    it('renders textbox label correctly', () => {
+        const label = screen.getByText('Label for textbox')
+        expect(label).toBeInTheDocument()
+    })
+
+    it('renders switch correctly', () => {
+        const field = screen.getByRole('switch')
+        expect(field).toHaveProperty('value', '123')
+    })
+
+    it('renders switch label correctly', () => {
+        const label = screen.getByText('Label for switch')
+        expect(label).toBeInTheDocument()
+    })
+
+    it('renders checkbox correctly', () => {
+        const field = screen.getByRole('checkbox')
+        expect(field).toHaveProperty('checked', true)
+    })
+
+    it('renders checkbox label correctly', () => {
+        const label = screen.getByText('Label for checkbox')
+        expect(label).toBeInTheDocument()
+    })
+})

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

@@ -0,0 +1,159 @@
+import React from 'react'
+import { EbayTextbox } from '../../ebay-textbox'
+import { EbaySwitch } from '../../ebay-switch'
+import { EbayCheckbox } from '../../ebay-checkbox'
+import { EbayField, EbayLabel, EbayFieldDescription } from '../index'
+
+export default {
+    title: 'form input/ebay-field'
+}
+
+export const DefaultInline = {
+    render: () => (
+        <div>
+            <EbayField>
+                <EbayLabel>Label for textbox</EbayLabel>
+                <EbayTextbox placeholder="placeholder text" />
+            </EbayField>
+            <EbayField>
+                <EbayLabel>Label for switch</EbayLabel>
+                <EbaySwitch value="123" id="switch-1" />
+            </EbayField>
+            <EbayField>
+                <EbayLabel>Label for checkbox</EbayLabel>
+                <EbayCheckbox defaultChecked id="checkbox-2" />
+            </EbayField>
+        </div>
+    ),
+
+    name: 'Default - inline'
+}
+
+export const Block = () => (
+    <div>
+        <EbayField layout="block">
+            <EbayLabel stacked>Label 1</EbayLabel>
+            <EbayTextbox placeholder="placeholder text" />
+        </EbayField>
+        <EbayField layout="block">
+            <EbayLabel stacked>Label 1</EbayLabel>
+            <EbayTextbox placeholder="placeholder text" />
+        </EbayField>
+        <EbayField layout="block">
+            <EbayLabel stacked>Label 1</EbayLabel>
+            <EbayTextbox placeholder="placeholder text" />
+        </EbayField>
+    </div>
+)
+
+export const BlockAndInlineCombination = {
+    render: () => (
+        <div>
+            <EbayField>
+                <EbayLabel>Label 1</EbayLabel>
+                <EbayTextbox placeholder="placeholder text" />
+            </EbayField>
+            <EbayField>
+                <EbayLabel>Label 2</EbayLabel>
+                <EbayTextbox placeholder="placeholder text" />
+            </EbayField>
+            <EbayField layout="block">
+                <EbayLabel>Label 3</EbayLabel>
+                <EbayTextbox placeholder="placeholder text" />
+            </EbayField>
+            <EbayField>
+                <EbayLabel>Label 4</EbayLabel>
+                <EbayTextbox placeholder="placeholder text" />
+            </EbayField>
+            <EbayField>
+                <EbayLabel>Label 5</EbayLabel>
+                <EbayTextbox placeholder="placeholder text" />
+            </EbayField>
+        </div>
+    ),
+
+    name: 'Block and inline combination'
+}
+
+export const Required = {
+    render: () => (
+        <div>
+            <EbayField>
+                <EbayLabel required>Label 1</EbayLabel>
+                <EbayTextbox placeholder="placeholder text" />
+            </EbayField>
+            <EbayField>
+                <EbayLabel>Label 1</EbayLabel>
+                <EbayTextbox placeholder="placeholder text" />
+            </EbayField>
+            <EbayField>
+                <EbayLabel>Label 1</EbayLabel>
+                <EbayTextbox placeholder="placeholder text" />
+            </EbayField>
+        </div>
+    ),
+
+    name: 'required'
+}
+
+export const WithDescription = {
+    render: () => (
+        <div>
+            <EbayField layout="block">
+                <EbayLabel stacked htmlFor="field1">
+                    Label 1
+                </EbayLabel>
+                <EbayTextbox placeholder="placeholder text" id="field1" />
+                <EbayFieldDescription>Some description Text</EbayFieldDescription>
+            </EbayField>
+            <EbayField layout="block">
+                <EbayLabel stacked>Label 2</EbayLabel>
+                <EbayTextbox placeholder="placeholder text" />
+                <EbayFieldDescription type="confirmation">Some description Text</EbayFieldDescription>
+            </EbayField>
+            <EbayField layout="block">
+                <EbayLabel stacked>Label 3</EbayLabel>
+                <EbayTextbox placeholder="placeholder text" invalid />
+                <EbayFieldDescription type="attention">Some description Text</EbayFieldDescription>
+            </EbayField>
+            <EbayField layout="block">
+                <EbayLabel stacked htmlFor="field4">
+                    Label 4
+                </EbayLabel>
+                <EbayTextbox placeholder="placeholder text" id="field4" />
+                <EbayFieldDescription type="confirmation" position="below">
+                    Some description Text
+                </EbayFieldDescription>
+            </EbayField>
+        </div>
+    ),
+
+    name: 'with description'
+}
+
+export const LabelsOnTheRight = {
+    render: () => (
+        <>
+            <p>
+                <EbayField>
+                    <EbayTextbox placeholder="placeholder text" />
+                    <EbayLabel position="end">Label 1</EbayLabel>
+                </EbayField>
+            </p>
+            <p>
+                <EbayField>
+                    <EbaySwitch value="123" id="switch-1" />
+                    <EbayLabel position="end">Label 1</EbayLabel>
+                </EbayField>
+            </p>
+            <p>
+                <EbayField>
+                    <EbayCheckbox defaultChecked id="checkbox-2" />
+                    <EbayLabel position="end">Label 1</EbayLabel>
+                </EbayField>
+            </p>
+        </>
+    ),
+
+    name: 'Labels on the right'
+}

package/src/ebay-field/description.tsx

@@ -0,0 +1,30 @@
+import React, { ComponentProps, FC } from 'react'
+import classNames from 'classnames'
+import { FieldDescriptionType, FieldDescriptionPosition } from './types'
+
+type DescriptionProps = ComponentProps<'div'> & ComponentProps<'span'> & {
+    type?: FieldDescriptionType;
+    position?: FieldDescriptionPosition;
+}
+
+const Description: FC<DescriptionProps> = ({
+    type,
+    position = 'below',
+    className,
+    children,
+    ...rest
+}) => {
+    const wrapperClassName = classNames(
+        className,
+        'field__description',
+        { [`field__description--${type}`]: type }
+    )
+    const WrapperElement = position === 'below' ? `div` : `span`
+
+    return (
+        <WrapperElement {...rest} className={wrapperClassName}>
+            <span>{children}</span>
+        </WrapperElement>)
+}
+
+export default Description

package/src/ebay-field/field.tsx

@@ -0,0 +1,24 @@
+import React, { FC, ReactNode } from 'react'
+import classNames from 'classnames'
+import { FieldLayoutType } from './types'
+
+type FieldProps = {
+    className?: string;
+    layout?: FieldLayoutType;
+    children?: ReactNode;
+};
+
+const Field: FC<FieldProps> = ({
+    className,
+    layout = 'inline',
+    children
+}) => {
+    const WrapperElement = layout === 'block' ? 'div' : 'span'
+    return (
+        <WrapperElement className={classNames('field', className)}>
+            {children}
+        </WrapperElement>
+    )
+}
+
+export default Field

package/src/ebay-field/index.ts

@@ -0,0 +1,4 @@
+export { default as EbayField } from './field'
+export { default as EbayLabel, type Props as EbayLabelProps } from './label'
+export { default as EbayFieldDescription } from './description'
+export type { FieldDescriptionType, FieldDescriptionPosition, FieldLayoutType, LabelPosition } from './types'

package/src/ebay-field/label.tsx

@@ -0,0 +1,31 @@
+import React, { ComponentProps, FC } from 'react'
+import classNames from 'classnames'
+import { LabelPosition } from './types'
+
+export type Props = {
+    className?: string;
+    stacked?: boolean;
+    required?: boolean;
+    position?: LabelPosition;
+} & ComponentProps<'label'>
+
+const Label: FC<Props> = ({
+    className,
+    children,
+    stacked = false,
+    required = false,
+    position = 'start',
+    ...rest
+}) => {
+    const wrapperClassName = classNames(
+        `field__label`,
+        className,
+        { 'field__label--stacked': stacked },
+        { 'field__label--end': position === 'end' }
+    )
+    const requiredMark = required ? <> <sup>*</sup></> : null
+
+    return <label className={wrapperClassName} {...rest}>{children}{requiredMark}</label>
+}
+
+export default Label

package/src/ebay-field/types.ts

@@ -0,0 +1,7 @@
+export type FieldLayoutType = 'inline' | 'block'
+
+export type FieldDescriptionType = 'default' | 'confirmation' | 'information' | 'attention'
+
+export type FieldDescriptionPosition = 'inline' | 'below' | 'above'
+
+export type LabelPosition = 'start' | 'end'

package/src/ebay-fullscreen-dialog/__tests__/index.spec.tsx

@@ -0,0 +1,52 @@
+import React from 'react'
+import { render, fireEvent } from '@testing-library/react'
+import { EbayDialogHeader } from '../../ebay-dialog-base'
+import { EbayFullscreenDialog } from '../index'
+
+jest.mock('../../common/random-id')
+
+const closeSpy = jest.fn()
+const openSpy = jest.fn()
+const openDialog = () =>
+    render(
+        <EbayFullscreenDialog
+            animated={false}
+            open
+            onOpen={openSpy}
+            onClose={closeSpy}
+            a11yCloseText="Close"
+        >
+            <EbayDialogHeader>Heading</EbayDialogHeader>
+            <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.
+            </p>
+            <p><a href="http://www.ebay.com">www.ebay.com</a></p>
+            <input placeholder="Enter a value" />
+        </EbayFullscreenDialog>
+    )
+
+describe('<EbayFullscreenDialog>', () => {
+    it('should trigger onOpen when dialog appears', () => {
+        openDialog()
+        expect(openSpy).toHaveBeenCalled()
+    })
+
+    it('should have close button', () => {
+        openDialog()
+        expect(document.querySelector(`button.fullscreen-dialog__close`)).toBeInTheDocument()
+    })
+
+    it('should focus on close button', () => {
+        openDialog()
+        expect(document.querySelector(`button.fullscreen-dialog__close`)).toHaveFocus()
+    })
+
+    it('should trigger onClose when close button is clicked', () => {
+        openDialog()
+        const dialogClose = document.querySelector(`button.fullscreen-dialog__close`)
+        fireEvent.click(dialogClose)
+        expect(closeSpy).toHaveBeenCalled()
+    })
+})

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

@@ -0,0 +1,96 @@
+import React, { useState } from 'react'
+import { EbayFullscreenDialog } from '../index'
+import { EbayDialogFooter, EbayDialogHeader } from '../../ebay-dialog-base'
+import { action } from '@storybook/addon-actions'
+
+const story: any = {
+    component: EbayFullscreenDialog,
+    title: 'dialogs/ebay-fullscreen-dialog'
+}
+
+export const Default = () => {
+    const [open, setOpen] = useState(false)
+    return (
+        <div>
+            <button className="btn btn--secondary" onClick={() => setOpen(!open)}>
+                Open Dialog
+            </button>
+            <p>Some outside content...</p>
+            <EbayFullscreenDialog
+                open={open}
+                onOpen={() => action('onOpen')()}
+                onClose={() => {
+                    action('onClose')()
+                    setOpen(false)
+                }}
+                a11yCloseText="Close"
+            >
+                <EbayDialogHeader>Heading</EbayDialogHeader>
+                <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>
+                <p>
+                    <a href="http://www.ebay.com">www.ebay.com</a>
+                </p>
+            </EbayFullscreenDialog>
+        </div>
+    )
+}
+
+export const AlwaysOpened = () => (
+    <div>
+        <p>Some outside content...</p>
+        <EbayFullscreenDialog open a11yCloseText="Close dialog">
+            <EbayDialogHeader>Heading</EbayDialogHeader>
+            <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>
+            <p>
+                <a href="http://www.ebay.com">www.ebay.com</a>
+            </p>
+            <EbayDialogFooter>©2021 eBay</EbayDialogFooter>
+        </EbayFullscreenDialog>
+    </div>
+)
+
+export const WithAnimation = () => {
+    const [open, setOpen] = useState(false)
+    return (
+        <div>
+            <button className="btn btn--secondary" onClick={() => setOpen(!open)}>
+                Open Dialog
+            </button>
+            <p>Some outside content...</p>
+            <EbayFullscreenDialog
+                open={open}
+                onClose={() => setOpen(false)}
+                animated
+                a11yCloseText="Close"
+            >
+                <EbayDialogHeader>Heading</EbayDialogHeader>
+                <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>
+                <p>
+                    <a href="http://www.ebay.com">www.ebay.com</a>
+                </p>
+            </EbayFullscreenDialog>
+        </div>
+    )
+}
+
+export default story

package/src/ebay-fullscreen-dialog/__tests__/render.spec.tsx

@@ -0,0 +1,44 @@
+import React from 'react'
+import { render, screen } from '@testing-library/react'
+import { composeStory } from '@storybook/react'
+import Meta, { Default, AlwaysOpened } from './index.stories'
+
+const DefaultStory = composeStory(Default, Meta)
+const AlwaysOpenedStory = composeStory(AlwaysOpened, Meta)
+
+jest.mock('../../common/random-id')
+
+describe('ebay-fullscreen-dialog rendering', () => {
+    it('renders default story correctly', () => {
+        render(<DefaultStory />)
+
+        const dialog = screen.queryByRole('dialog')
+        expect(dialog).not.toBeInTheDocument()
+    })
+
+    it('renders always opened story correctly', () => {
+        render(<AlwaysOpenedStory />)
+
+        const dialog = screen.getByRole('dialog')
+
+        expect(dialog).toHaveAttribute('aria-modal', 'true')
+        expect(dialog).toHaveClass('fullscreen-dialog fullscreen-dialog--mask-fade-slow fullscreen-dialog--show-init')
+        expect(dialog).toHaveAttribute('aria-labelledby', 'dialog-title-abc123')
+        expect(dialog).toHaveAttribute('aria-hidden', 'false')
+        expect(dialog).not.toHaveAttribute('hidden')
+
+
+        const h2 = screen.getByRole('heading', { level: 2 })
+        expect(h2).toHaveAttribute('id', 'dialog-title-abc123')
+        expect(h2).toHaveTextContent('Heading')
+
+        expect(screen.getByRole('button', { name: 'Close dialog' })).toBeInTheDocument()
+
+        const link = screen.getByRole('link')
+        expect(link).toHaveAttribute('href', 'http://www.ebay.com')
+        expect(link).toHaveTextContent('www.ebay.com')
+
+        expect(screen.getByText('©2021 eBay')).toBeInTheDocument()
+        expect(screen.getByText('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.')).toBeInTheDocument()
+    })
+})

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

@@ -0,0 +1,32 @@
+import React, { FC } from 'react'
+import classNames from 'classnames'
+import { DialogBaseProps, DialogBaseWithState } from '../ebay-dialog-base'
+
+const classPrefix = 'fullscreen-dialog'
+
+export interface Props<T = any> extends DialogBaseProps<T> {
+  open?: boolean;
+  onClose?: () => void;
+}
+
+const EbayFullscreenDialog: FC<Props> = ({
+    open,
+    onClose = () => {},
+    className,
+    animated,
+    ...rest
+}) => (
+    <DialogBaseWithState
+        {...rest}
+        classPrefix={classPrefix}
+        buttonPosition="right"
+        onCloseBtnClick={onClose}
+        transitionElement="window"
+        animated={animated}
+        className={classNames(className, `${classPrefix}--mask-fade-slow`)}
+        windowClass={classNames(`${classPrefix}__window`, `${classPrefix}__window--slide`)}
+        open={open}
+    />
+)
+
+export default EbayFullscreenDialog

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

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