@ebay/ui-core-react 7.3.1 → 7.3.2

package/src/ebay-breadcrumbs/breadcrumbs.tsx

@@ -0,0 +1,61 @@
+import React, { Children, cloneElement, ComponentProps, FC, ReactElement, ReactNode } from 'react'
+import classNames from 'classnames'
+import { EbayEventHandler } from '../common/event-utils/types'
+
+type BreadcrumbProps = Omit<ComponentProps<'div'>, 'onSelect'> & {
+    /**
+     * Breadcrumbs expects `<EbayBreadcrumbItem/>` as children.
+     * Other elements will not work.
+     *
+     * @see Docs https://github.com/eBay/ebayui-core-react/tree/main/src/components/ebay-breadcrumb#usage
+     */
+    children: ReactNode;
+    id?: string;
+    a11yHeadingTag?: keyof JSX.IntrinsicElements;
+    a11yHeadingText?: string;
+    onSelect?: EbayEventHandler<HTMLElement>;
+}
+
+const Breadcrumbs: FC<BreadcrumbProps> = ({
+    a11yHeadingText = 'Page navigation',
+    a11yHeadingTag = 'h2',
+    id = 'ebay-breadcrumb',
+    children: breadcrumbItems = [],
+    className,
+    onSelect = () => {},
+    ...rest
+}) => {
+    const headingId = `${id}-breadcrumbs-heading`
+    const lastItemIndex = Children.count(breadcrumbItems) - 1
+    const A11yHeadingTag = a11yHeadingTag
+    const anyLink = Children.toArray(breadcrumbItems).some((item: ReactElement) => item.props.href)
+    const tag = anyLink ? 'a' : 'button'
+
+    return (
+        <nav
+            {...rest}
+            aria-labelledby={headingId}
+            className={classNames('breadcrumbs', className)}
+            role="navigation"
+        >
+            <A11yHeadingTag id={headingId} className="clipped">{a11yHeadingText}</A11yHeadingTag>
+            <ul>
+                {Children.map(breadcrumbItems, (item: ReactElement, index) => {
+                    const isLastItem = index === lastItemIndex
+                    const { href, children } = item.props
+                    const itemProps = {
+                        tag,
+                        isLastItem,
+                        href,
+                        children,
+                        onClick: event => onSelect(event)
+                    }
+
+                    return cloneElement(item, itemProps)
+                })}
+            </ul>
+        </nav>
+    )
+}
+
+export default Breadcrumbs

package/src/ebay-breadcrumbs/index.ts

@@ -0,0 +1,2 @@
+export { default as EbayBreadcrumbs } from './breadcrumbs'
+export { default as EbayBreadcrumbItem } from './breadcrumb-item'

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

@@ -0,0 +1,131 @@
+import React from 'react'
+import { fireEvent, render, screen } from '@testing-library/react'
+import { composeStory } from '@storybook/react'
+import { eventOfType } from '../../common/event-utils/__tests__/helpers'
+import Meta, { Default, Size, Priority, DestructiveVariant } from './index.stories'
+import { EbayButton } from '../index'
+
+const DefaultStory = composeStory(Default, Meta)
+const SizeStory = composeStory(Size, Meta)
+const PriorityStory = composeStory(Priority, Meta)
+const DestructiveVariantStory = composeStory(DestructiveVariant, Meta)
+
+describe('<EbayButton>', () => {
+    describe('Default story', () => {
+        beforeEach(() => {
+            render(<DefaultStory />)
+        })
+
+        it('renders button correctly', () => {
+            const button = screen.getByRole('button')
+            expect(button).toHaveTextContent('Hello, I am a button!')
+            expect(button).toHaveClass('btn btn--secondary')
+        })
+
+        it('renders link correctly', () => {
+            const link = screen.getByRole('link')
+            expect(link).toHaveAttribute('href', 'https://ebay.com')
+            expect(link).toHaveTextContent('Hello, I am a link!')
+            expect(link).toHaveClass('fake-btn fake-btn--secondary')
+        })
+    })
+
+    describe('Size story', () => {
+        beforeEach(() => {
+            render(<SizeStory />)
+        })
+
+        it('renders large button correctly', () => {
+            const button = screen.getByText('Large Button')
+            expect(button).toHaveClass('btn btn--secondary btn--large')
+        })
+
+        it('renders default size button correctly', () => {
+            const button = screen.getByText('Default Size Button')
+            expect(button).toHaveClass('btn btn--secondary')
+        })
+    })
+
+    describe('Priority story', () => {
+        beforeEach(() => {
+            render(<PriorityStory />)
+        })
+
+        it('renders primary button correctly', () => {
+            const button = screen.getByText('Primary Button')
+            expect(button).toHaveClass('btn btn--primary')
+        })
+
+        it('renders secondary button correctly', () => {
+            const button = screen.getByText('Secondary Button')
+            expect(button).toHaveClass('btn btn--secondary')
+        })
+    })
+
+    describe('DestructiveVariant story', () => {
+        beforeEach(() => {
+            render(<DestructiveVariantStory />)
+        })
+
+        it('renders primary destructive button correctly', () => {
+            const button = screen.getByText('Primary Button')
+            expect(button).toHaveClass('btn btn--primary btn--destructive')
+        })
+
+        it('renders secondary destructive button correctly', () => {
+            const button = screen.getByText('Secondary Button')
+            expect(button).toHaveClass('btn btn--secondary btn--destructive')
+        })
+    })
+
+    describe('on passing a ref', () => {
+        it('should set the ref to button element', () => {
+            const ref = React.createRef() as any
+            render(<EbayButton ref={ref} />)
+
+            expect(ref.current.tagName).toBe('BUTTON')
+        })
+
+        it('should set the ref to a element', () => {
+            const ref = React.createRef() as any
+            render(<EbayButton href="https://www.ebay.com" ref={ref} />)
+
+            expect(ref.current.tagName).toBe('A')
+        })
+    })
+
+    describe('should fire the corresponding callbacks', () => {
+        it('on click', () => {
+            const spy = jest.fn()
+            const wrapper = render(<EbayButton onClick={spy} />)
+
+            fireEvent.click(wrapper.getByRole('button'))
+
+            expect(spy).toHaveBeenCalledWith(eventOfType('click'))
+        })
+        it('on escape', () => {
+            const spy = jest.fn()
+            const wrapper = render(<EbayButton onEscape={spy} />)
+
+            fireEvent.keyDown(wrapper.getByRole('button'), { key: 'Escape' })
+
+            expect(spy).toHaveBeenCalledWith(eventOfType('keydown'))
+        })
+        it('on focus', () => {
+            const spy = jest.fn()
+            const wrapper = render(<EbayButton onFocus={spy} />)
+
+            fireEvent.focus(wrapper.getByRole('button'))
+
+            expect(spy).toHaveBeenCalledWith(eventOfType('focus'))
+        })
+        it('on blur', () => {
+            const spy = jest.fn()
+            const wrapper = render(<EbayButton onBlur={spy} />)
+
+            fireEvent.blur(wrapper.getByRole('button'))
+
+            expect(spy).toHaveBeenCalledWith(eventOfType('blur'))
+        })
+    })
+})

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

@@ -0,0 +1,406 @@
+import React from 'react'
+import { StoryFn, Meta } from '@storybook/react'
+import { action } from '@storybook/addon-actions'
+import { EbayButton, EbayButtonCell } from '../index'
+import EbayIcon from '../../ebay-icon/icon'
+
+const meta: Meta<typeof EbayButton> = {
+    component: EbayButton,
+    title: 'buttons/ebay-button'
+}
+
+export default meta
+
+export const Default: StoryFn<typeof EbayButton> = () => (
+    <>
+        <p>
+            <EbayButton
+                onClick={action('clicked')}
+                onEscape={action('escape pressed')}
+                onFocus={(e) => action('focus')(e)}
+                onBlur={action('blur')}
+                onKeyDown={action('key down')}
+            >
+                Hello, I am a button!
+            </EbayButton>
+        </p>
+        <p>
+            <EbayButton href="https://ebay.com">Hello, I am a link!</EbayButton>
+        </p>
+    </>
+)
+
+export const Size: StoryFn<typeof EbayButton> = () => (
+    <>
+        <p>
+            <EbayButton size="large">Large Button</EbayButton>
+        </p>
+        <p>
+            <EbayButton href="https://ebay.com" size="large">
+                Large Link
+            </EbayButton>
+        </p>
+        <p>
+            <EbayButton size="default">Default Size Button</EbayButton>
+        </p>
+        <p>
+            <EbayButton size="default" href="https://ebay.com">
+                Default Size Link
+            </EbayButton>
+        </p>
+    </>
+)
+
+export const Priority: StoryFn<typeof EbayButton> = () => (
+    <>
+        <p>
+            <EbayButton priority="primary">Primary Button</EbayButton>
+        </p>
+        <p>
+            <EbayButton priority="primary" href="https://ebay.com">
+                Primary Link
+            </EbayButton>
+        </p>
+        <p>
+            <EbayButton priority="secondary">Secondary Button</EbayButton>
+        </p>
+        <p>
+            <EbayButton priority="secondary" href="https://ebay.com">
+                Secondary Link
+            </EbayButton>
+        </p>
+        <p>
+            <EbayButton>Secondary Button (Default)</EbayButton>
+        </p>
+        <p>
+            <EbayButton href="https://ebay.com">Secondary Link (Default)</EbayButton>
+        </p>
+        <p>
+            <EbayButton priority="tertiary">Tertiary Button</EbayButton>
+        </p>
+        <p>
+            <EbayButton priority="tertiary" href="https://ebay.com">
+                Tertiary Link
+            </EbayButton>
+        </p>
+        <p>
+            <EbayButton priority="none">Base Button</EbayButton>
+        </p>
+    </>
+)
+
+export const DestructiveVariant: StoryFn<typeof EbayButton> = () => (
+    <>
+        <p>
+            <EbayButton priority="primary" variant="destructive">
+                Primary Button
+            </EbayButton>
+        </p>
+        <p>
+            <EbayButton priority="primary" variant="destructive" href="https://ebay.com">
+                Primary Link
+            </EbayButton>
+        </p>
+        <p>
+            <EbayButton priority="secondary" variant="destructive">
+                Secondary Button
+            </EbayButton>
+        </p>
+        <p>
+            <EbayButton priority="secondary" variant="destructive" href="https://ebay.com">
+                Secondary Link
+            </EbayButton>
+        </p>
+        <p>
+            <EbayButton priority="tertiary" variant="destructive">
+                Tertiary Button
+            </EbayButton>
+        </p>
+        <p>
+            <EbayButton priority="tertiary" variant="destructive" href="https://ebay.com">
+                Tertiary Link
+            </EbayButton>
+        </p>
+    </>
+)
+
+export const Fluid: StoryFn<typeof EbayButton> = () => (
+    <>
+        <p>
+            <EbayButton priority="primary" fluid>
+                Primary Button
+            </EbayButton>
+        </p>
+        <p>
+            <EbayButton fluid>Secondary Button</EbayButton>
+        </p>
+        <p>
+            <EbayButton fluid href="https://www.ebay.com">
+                Link
+            </EbayButton>
+        </p>
+    </>
+)
+
+export const WithIcon: StoryFn<typeof EbayButton> = () => (
+    <>
+        <p>
+            Form button:
+            <br />
+            <EbayButton aria-label="Menu button">
+                <EbayIcon name="menu20" />
+                <span>Button with icon</span>
+            </EbayButton>
+        </p>
+        <p>
+            Form fake-button (link):
+            <br />
+            <EbayButton href="#" variant="form" aria-label="Settings link">
+                <EbayIcon name="settings16" />
+                <span>Button with icon</span>
+            </EbayButton>
+        </p>
+        <p>
+            Delete button:
+            <br />
+            <EbayButton variant="destructive" aria-label="Destructive button">
+                <EbayIcon name="delete16" />
+                <span>Button with icon</span>
+            </EbayButton>
+        </p>
+        <p>
+            Expand button:
+            <br />
+            <EbayButton bodyState="expand" aria-label="Destructive button">
+                <EbayIcon name="settings16" />
+                <span>Expand button</span>
+            </EbayButton>
+        </p>
+    </>
+)
+
+export const IconOnly: StoryFn<typeof EbayButton> = () => (
+    <>
+        <p>
+            Form button:
+            <br />
+            <EbayButton variant="form" aria-label="Menu button">
+                <EbayIcon name="menu20" />
+            </EbayButton>
+        </p>
+        <p>
+            Form fake-button (link):
+            <br />
+            <EbayButton href="#" variant="form" aria-label="Settings link">
+                <EbayIcon name="settings16" />
+            </EbayButton>
+        </p>
+        <p>
+            Delete button:
+            <br />
+            <EbayButton variant="destructive" aria-label="Destructive button">
+                <EbayIcon name="delete16" />
+            </EbayButton>
+        </p>
+    </>
+)
+
+export const Transparent: StoryFn<typeof EbayButton> = () => (
+    <div style={{ background: 'rgba(66, 214, 205, 0.5)' }}>
+        <p>
+            <EbayButton>Default Button</EbayButton>
+        </p>
+        <p>
+            <EbayButton transparent>Transparent Button</EbayButton>
+        </p>
+        <p>
+            <EbayButton transparent priority="secondary" variant="destructive">
+                Transparent Destructive Button
+            </EbayButton>
+        </p>
+        <p>
+            <EbayButton href="https://ebay.com" transparent>
+                Transparent Link
+            </EbayButton>
+        </p>
+    </div>
+)
+
+export const Disabled: StoryFn<typeof EbayButton> = () => (
+    <>
+        <p>
+            <EbayButton priority="primary" disabled>
+                Primary Button
+            </EbayButton>
+        </p>
+        <p>
+            <EbayButton disabled>Secondary Button</EbayButton>
+        </p>
+        <p>
+            <EbayButton href="https://ebay.com" disabled>
+                Link
+            </EbayButton>
+        </p>
+    </>
+)
+
+export const PartiallyDisabledButton: StoryFn<typeof EbayButton> = () => (
+    <EbayButton priority="primary" partiallyDisabled>
+        Hello, I am a button!
+    </EbayButton>
+)
+
+export const Truncated: StoryFn<typeof EbayButton> = () => (
+    <div>
+        <p>
+            <EbayButton truncate style={{ maxWidth: '200px' }}>
+                Hello, I am a button! this is a long text
+            </EbayButton>
+        </p>
+        <p>
+            <EbayButton size="large" truncate style={{ maxWidth: '200px' }}>
+                Hello, I am a BIG button! this is a long text
+            </EbayButton>
+        </p>
+        <p>
+            <EbayButton href="https://ebay.com" truncate style={{ maxWidth: '200px' }}>
+                Hello, I am a link! this is a long text
+            </EbayButton>
+        </p>
+    </div>
+)
+
+export const FlexButton: StoryFn<typeof EbayButton> = () => (
+    <EbayButton priority="primary" fluid>
+        <EbayButtonCell style={{ justifyContent: 'space-between' }}>
+            <span>Select</span>
+            <span style={{ display: 'inline-flex' }}>
+                <span>Any</span>
+                <EbayIcon name="chevronDown12" />
+            </span>
+        </EbayButtonCell>
+    </EbayButton>
+)
+
+export const LoadingButton: StoryFn<typeof EbayButton> = () => (
+    <>
+        <p>
+            <EbayButton bodyState="loading" />
+        </p>
+        <p>
+            <EbayButton priority="primary" bodyState="loading" />
+        </p>
+        <p>
+            <EbayButton priority="tertiary" bodyState="loading" />
+        </p>
+        <p>
+            <EbayButton variant="form" bodyState="loading" />
+        </p>
+        <p>
+            <EbayButton variant="destructive" bodyState="loading" />
+        </p>
+    </>
+)
+
+export const ExpandButton: StoryFn<typeof EbayButton> = () => (
+    <>
+        <p>
+            <EbayButton priority="primary" bodyState="expand">
+                Primary expand button
+            </EbayButton>{' '}
+            <EbayButton priority="primary" bodyState="expand" aria-expanded="true">
+                Expanded button
+            </EbayButton>
+        </p>
+        <p>
+            <EbayButton bodyState="expand">Expand button</EbayButton>
+        </p>
+        <p>
+            <EbayButton priority="tertiary" bodyState="expand">
+                Tertiary expand button
+            </EbayButton>
+        </p>
+        <p>
+            <EbayButton variant="form" bodyState="expand">
+                Form expand button
+            </EbayButton>{' '}
+            <EbayButton variant="form" bodyState="expand" />{' '}
+            <EbayButton variant="form" bodyState="expand" aria-expanded />
+        </p>
+        <p>
+            <EbayButton priority="primary" bodyState="expand" borderless>
+                Borderless expand button
+            </EbayButton>
+        </p>
+    </>
+)
+
+export const SplitButton: StoryFn<typeof EbayButton> = () => (
+    <>
+        <p>
+            <EbayButton priority="primary" split="start">
+                Primary split start button
+            </EbayButton>
+            <EbayButton priority="primary" split="end">
+                Primary split end button
+            </EbayButton>
+        </p>
+        <p>
+            <EbayButton split="start">Split start button</EbayButton>
+            <EbayButton split="end">Split end button</EbayButton>
+        </p>
+        <p>
+            <EbayButton priority="tertiary" split="start">
+                Tertiary split start button
+            </EbayButton>
+            <EbayButton priority="tertiary" split="end">
+                Tertiary split end button
+            </EbayButton>
+        </p>
+        <p>
+            <EbayButton priority="primary" split="start">
+                Primary Split button
+            </EbayButton>
+            <EbayButton priority="primary" bodyState="expand" split="end" />
+        </p>
+        <p>
+            <EbayButton split="start">Split button</EbayButton>
+            <EbayButton bodyState="expand" split="end" />
+        </p>
+        <p>
+            <EbayButton priority="tertiary" split="start">
+                Tertiary split button
+            </EbayButton>
+            <EbayButton priority="tertiary" bodyState="expand" split="end" />
+        </p>
+    </>
+)
+
+export const FormButton: StoryFn<typeof EbayButton> = () => (
+    <>
+        <p>
+            <EbayButton variant="form">Form button</EbayButton>
+        </p>
+    </>
+)
+
+export const BorderlessButton: StoryFn<typeof EbayButton> = () => (
+    <>
+        <p>
+            <EbayButton borderless>Borderless button</EbayButton>
+        </p>
+    </>
+)
+
+export const FixedHeight: StoryFn<typeof EbayButton> = () => (
+    <>
+        <p>
+            <EbayButton fixedHeight>Fixed height button</EbayButton>
+        </p>
+        <p>
+            <EbayButton fixedHeight size="large">
+                Fixed height large button
+            </EbayButton>
+        </p>
+    </>
+)

package/src/ebay-button/button-cell.tsx

@@ -0,0 +1,21 @@
+import React, { ComponentProps, FC } from 'react'
+
+type ButtonType = 'cta' | 'fake' | 'expand' | 'default'
+type Props = ComponentProps<'span'> & {
+    type?: ButtonType;
+}
+
+const classNames: { [key in ButtonType]: string } = {
+    cta: 'cta-',
+    fake: 'fake-',
+    expand: 'expand-',
+    default: ''
+}
+
+const EbayButtonCell:FC<Props> = ({
+    type = 'default',
+    children,
+    ...rest
+}) => <span className={`${classNames[type]}btn__cell`} {...rest}><>{children}</></span>
+
+export default EbayButtonCell

package/src/ebay-button/button-expand.tsx

@@ -0,0 +1,18 @@
+import React, { FC, ReactNode } from 'react'
+import EbayButtonCell from './button-cell'
+import EbayButtonText from './button-text'
+import { EbayIcon } from '../ebay-icon'
+
+const EbayButtonExpand: FC<{ children?: ReactNode }> = ({ children }) =>
+    children ? (
+        <EbayButtonCell>
+            <EbayButtonText>
+                {children}
+            </EbayButtonText>
+            <EbayIcon name="chevronDown12" />
+        </EbayButtonCell>
+    ) : (
+        <EbayIcon name="chevronDown12" />
+    )
+
+export default EbayButtonExpand

package/src/ebay-button/button-loading.tsx

@@ -0,0 +1,11 @@
+import React, { FC } from 'react'
+import EbayButtonCell from './button-cell'
+import { EbayProgressSpinner } from '../ebay-progress-spinner'
+
+const EbayButtonLoading: FC = () => (
+    <EbayButtonCell>
+        <EbayProgressSpinner />
+    </EbayButtonCell>
+)
+
+export default EbayButtonLoading

package/src/ebay-button/button-text.tsx

@@ -0,0 +1,10 @@
+import React, { ComponentProps, FC } from 'react'
+import classNames from 'classnames'
+
+type Props = ComponentProps<'span'>
+
+const EbayButtonText: FC<Props> = ({ className, children }) => (
+    <span className={classNames(className, 'btn__text')}>{children}</span>
+)
+
+export default EbayButtonText