@ebay/ui-core-react 7.3.0 → 7.3.2

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

@@ -0,0 +1,16 @@
+import React from 'react'
+import { screen, render } from '@testing-library/react'
+import { composeStories } from '@storybook/react'
+import * as stories from './index.stories'
+
+const { Default } = composeStories(stories)
+
+describe('EbayAlertDialog rendering', () => {
+    it('should render the default story correctly', () => {
+        render(<Default />)
+        expect(screen.getByRole('alertdialog')).toBeInTheDocument()
+        expect(screen.getByRole('heading', { level: 2 })).toBeInTheDocument()
+        expect(screen.getByText(/Lorem ipsum dolor sit amet/)).toBeInTheDocument()
+        expect(screen.getByRole('link', { name: 'www.ebay.com' })).toBeInTheDocument()
+    })
+})

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

@@ -0,0 +1,53 @@
+import React, { FC, useRef } from 'react'
+import classNames from 'classnames'
+import { DialogBaseProps, DialogBaseWithState, EbayDialogFooter } from '../ebay-dialog-base'
+import { EbayButton } from '../ebay-button'
+
+const classPrefix = 'alert-dialog'
+
+export interface Props<T = any> extends DialogBaseProps<T> {
+  open?: boolean;
+  confirmText: string;
+  onConfirm?: () => void;
+}
+
+const EbayAlertDialog: FC<Props> = ({
+    a11yCloseText = 'Close Dialog',
+    confirmText,
+    onConfirm = () => {},
+    ...rest
+}) => {
+    const confirmBtnRef = useRef(null)
+    const confirmId = 'alert-dialog-confirm'
+    const mainId = 'alert-dialog-main'
+    return (
+        <DialogBaseWithState
+            focus={confirmBtnRef}
+            {...rest}
+            a11yCloseText={a11yCloseText}
+            role="alertdialog"
+            classPrefix={classPrefix}
+            ignoreEscape
+            mainId={mainId}
+            buttonPosition="hidden"
+            className={classNames(rest.className, `${classPrefix}--mask-fade`)}
+            windowClass={`${classPrefix}__window ${classPrefix}__window--fade`}
+        >
+            {rest.children}
+            <EbayDialogFooter>
+                <EbayButton
+                    priority="primary"
+                    aria-describedby={mainId}
+                    onClick={onConfirm}
+                    ref={confirmBtnRef}
+                    id={confirmId}
+                    className="alert-dialog__acknowledge"
+                >
+                    {confirmText}
+                </EbayButton>
+            </EbayDialogFooter>
+        </DialogBaseWithState>
+    )
+}
+
+export default EbayAlertDialog

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

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

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

@@ -0,0 +1,47 @@
+import React from 'react'
+import { EbayBadge } from '../index'
+import { render } from '@testing-library/react'
+
+describe('<EbayBadge>', () => {
+    it('renders defaults', async () => {
+        const { getByText } = await render(<EbayBadge number={5} />)
+        expect(getByText('5')).toBeInTheDocument()
+    })
+
+    it('renders number with rounded-up value', async () => {
+        const { getByText } = await render(<EbayBadge number={5.6} />)
+        expect(getByText('5')).toBeInTheDocument()
+    })
+
+    it('does not render with negative value', async () => {
+        const { queryByText } = await render(<EbayBadge number={-5} />)
+        expect(queryByText(/\d+/)).toBeNull()
+    })
+
+    describe('given number is a string', () => {
+        it('renders number with coerced string', async () => {
+            const { getByText } = await render(<EbayBadge number="5" />)
+            expect(getByText('5')).toBeInTheDocument()
+        })
+
+        it('renders number with rounded-up string', async () => {
+            const { getByText } = await render(<EbayBadge number="5.6" />)
+            expect(getByText('5')).toBeInTheDocument()
+        })
+
+        it('does not renders with an invalid string', async () => {
+            const { queryByText } = await render(<EbayBadge number="five" />)
+            expect(queryByText(/\d+/)).toBeNull()
+        })
+
+        it('does not renders with a negative string', async () => {
+            const { queryByText } = await render(<EbayBadge number="-5" />)
+            expect(queryByText(/\d+/)).toBeNull()
+        })
+    })
+
+    it('truncates when the value is greater than 99', async () => {
+        const { getByText } = await render(<EbayBadge number={150} />)
+        expect(getByText('99+')).toBeInTheDocument()
+    })
+})

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

@@ -0,0 +1,31 @@
+import { Meta, StoryObj } from '@storybook/react'
+import { EbayBadge } from '../index'
+import { EbayBadgeProps } from '../badge'
+
+const meta: Meta<typeof EbayBadge> = {
+    component: EbayBadge,
+    title: 'graphics & icons/ebay-badge'
+}
+
+export default meta
+
+export const Default: StoryObj<EbayBadgeProps> = {
+    args: {
+        'aria-label': '1 unread item',
+        number: 1
+    }
+}
+
+export const Zero: StoryObj<EbayBadgeProps> = {
+    args: {
+        'aria-label': '0 unread items',
+        number: 0
+    }
+}
+
+export const BigNumbers: StoryObj<EbayBadgeProps> = {
+    args: {
+        'aria-label': '120 unread items',
+        number: 120
+    }
+}

package/src/ebay-badge/badge.tsx

@@ -0,0 +1,32 @@
+import React, { ComponentProps, FC } from 'react'
+import classNames from 'classnames'
+
+export type EbayBadgeType = 'menu' | 'icon' | 'img'
+
+export type EbayBadgeProps = ComponentProps<'span'> & {
+    type?: EbayBadgeType;
+    number: number | string;
+}
+
+const EbayBadge: FC<EbayBadgeProps> = ({
+    number,
+    type = 'img',
+    className,
+    ...rest
+}) => {
+    // Parse in case user provided a string by mistake
+    const parsed = Math.round(parseInt(String(number), 10))
+
+    return parsed <= 0 ? null : (
+        <span
+            {...rest}
+            className={classNames('badge', className)}
+            role={type === 'img' ? 'img' : undefined}
+            aria-hidden={type !== 'img'}
+        >
+            {parsed > 99 ? '99+' : parsed}
+        </span>
+    )
+}
+
+export default EbayBadge

package/src/ebay-badge/index.ts

@@ -0,0 +1 @@
+export { default as EbayBadge } from './badge'

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

@@ -0,0 +1,40 @@
+import React from 'react'
+import { render } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+
+import { eventOfType } from '../../common/event-utils/__tests__/helpers'
+import { EbayBreadcrumbs, EbayBreadcrumbItem } from '../index'
+
+describe('<EbayBreadcrumbs>', () => {
+    describe('on category click', () => {
+        it('should fire an event', () => {
+            const spy = jest.fn()
+            const wrapper = render(
+                <EbayBreadcrumbs onSelect={spy}>
+                    <EbayBreadcrumbItem>home</EbayBreadcrumbItem>
+                </EbayBreadcrumbs>
+            )
+            const button = wrapper.getByRole('button')
+            userEvent.click(button)
+
+            expect(spy).toHaveBeenCalledWith(eventOfType('click'))
+        })
+    })
+
+    describe('rendering lists', () => {
+        it('should render breadcrumb items from a list', () => {
+            const items = ['home', 'listings', 'about']
+
+            const wrapper = render(
+                <EbayBreadcrumbs>
+                    {items.map((item, index) => <EbayBreadcrumbItem key={index}>{item}</EbayBreadcrumbItem>)}
+                </EbayBreadcrumbs>
+            )
+
+            // Test all items are displayed in correct order.
+            items.forEach((value, index) => {
+                expect(wrapper.getAllByRole('button')[index].textContent).toEqual(value)
+            })
+        })
+    })
+})

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

@@ -0,0 +1,94 @@
+import React from 'react'
+import { StoryObj, StoryFn, Meta } from '@storybook/react'
+import { action } from '@storybook/addon-actions'
+
+import { EbayBreadcrumbs, EbayBreadcrumbItem as Item } from '../index'
+
+const meta: Meta<typeof EbayBreadcrumbs> = {
+    component: EbayBreadcrumbs,
+    title: 'navigation & disclosure/ebay-breadcrumbs'
+}
+
+export default meta
+
+export const Default: StoryFn<typeof EbayBreadcrumbs> = () => (
+    <>
+        <EbayBreadcrumbs onSelect={(e, { el }) => action('select')(e, { el })}>
+            <Item href="https://www.ebay.com/">eBay</Item>
+            <Item href="https://www.ebay.com/rpp/cell-phone-pda">
+                Cell Phones, Smart Watches & Accessories
+            </Item>
+            <Item href="https://www.ebay.com/b/Smart-Watch-Accessories/182064/bn_16565905">
+                Smart Watch Accessories
+            </Item>
+            <Item>Smart Watch Bands</Item>
+        </EbayBreadcrumbs>
+    </>
+)
+
+export const AllLinks: StoryObj<typeof EbayBreadcrumbs> = {
+    render: () => (
+        <>
+            <EbayBreadcrumbs a11yHeadingText="Custom page navigation" a11yHeadingTag="h3">
+                <Item href="https://www.ebay.com/">eBay</Item>
+                <Item href="https://www.ebay.com/rpp/cell-phone-pda">
+                    Cell Phones, Smart Watches & Accessories
+                </Item>
+                <Item href="https://www.ebay.com/b/Smart-Watch-Accessories/182064/bn_16565905">
+                    Smart Watch Accessories
+                </Item>
+                <Item href="https://www.ebay.com/b/Smart-Watch-Bands/182068/bn_16565906">
+                    Smart Watch Bands
+                </Item>
+            </EbayBreadcrumbs>
+        </>
+    ),
+
+    name: 'all links'
+}
+
+export const CustomProps = () => (
+    <>
+        <EbayBreadcrumbs className="custom-breadcrumbs" custom-attr="value">
+            <Item href="http://www.ebay.com/" navsrc="{}" _sp="p2345.m909.l34" data-track="123">
+                eBay
+            </Item>
+            <Item
+                href="https://www.ebay.com/rpp/cell-phone-pda"
+                navsrc="{}"
+                _sp="p2345.m909.l34"
+                data-track="456"
+            >
+                Cell Phones, Smart Watches & Accessories
+            </Item>
+            <Item
+                href="https://www.ebay.com/b/Smart-Watch-Accessories/182064/bn_16565905"
+                navsrc="{}"
+                _sp="p2345.m909.l34"
+                data-track="789"
+            >
+                Smart Watch Accessories
+            </Item>
+            <Item>Smart Watch Bands</Item>
+        </EbayBreadcrumbs>
+    </>
+)
+
+export const AllButtons: StoryFn<typeof EbayBreadcrumbs> = () => (
+    <>
+        <EbayBreadcrumbs
+            a11yHeadingText="Custom page navigation"
+            a11yHeadingTag="h3"
+            onSelect={action('select')}
+        >
+            {[
+                'eBay',
+                'Cell Phones, Smart Watches & Accessories',
+                'Smart Watch Accessories',
+                'Smart Watch Bands'
+            ].map((item, index) => (
+                <Item key={index}>{item}</Item>
+            ))}
+        </EbayBreadcrumbs>
+    </>
+)

package/src/ebay-breadcrumbs/__tests__/render.spec.tsx

@@ -0,0 +1,59 @@
+import React from 'react'
+import { render, screen } from '@testing-library/react'
+import { composeStory } from '@storybook/react'
+import Meta, { Default, AllLinks, CustomProps, AllButtons } from './index.stories'
+
+const DefaultInstance = composeStory(Default, Meta)
+const AllLinksInstance = composeStory(AllLinks, Meta)
+const CustomPropsInstance = composeStory(CustomProps, Meta)
+const AllButtonsInstance = composeStory(AllButtons, Meta)
+
+describe('EbayBreadcrumbs rendering', () => {
+    it('Default instance', () => {
+        render(<DefaultInstance />)
+
+        const h2 = screen.getByRole('heading', { level: 2 })
+        expect(h2.textContent).toBe('Page navigation')
+
+        const listItems = screen.getAllByRole('listitem')
+        expect(listItems.length).toBe(4)
+
+        const links = screen.getAllByRole('link')
+        expect(links.length).toBe(3)
+
+        expect(links[0].textContent).toBe('eBay')
+        expect(links[0]).toHaveAttribute('href', 'https://www.ebay.com/')
+    })
+
+    it('AllLinks instance', () => {
+        render(<AllLinksInstance />)
+        const h3 = screen.getByRole('heading', { level: 3 })
+        expect(h3.textContent).toBe('Custom page navigation')
+
+        const listItems = screen.getAllByRole('listitem')
+        expect(listItems.length).toBe(4)
+
+        const links = screen.getAllByRole('link')
+        expect(links.length).toBe(4)
+
+        expect(links[0].textContent).toBe('eBay')
+        expect(links[0]).toHaveAttribute('href', 'https://www.ebay.com/')
+    })
+
+    it('CustomProps instance', () => {
+        render(<CustomPropsInstance />)
+        const links = screen.getAllByRole('link')
+
+        expect(links[0]).toHaveAttribute('_sp', 'p2345.m909.l34')
+        expect(links[0]).toHaveAttribute('data-track', '123')
+        expect(links[0]).toHaveAttribute('navsrc', '{}')
+    })
+
+    it('AllButtons instance', () => {
+        render(<AllButtonsInstance />)
+        const buttons = screen.getAllByRole('button')
+
+        expect(buttons.length).toBe(4)
+        expect(buttons[0].textContent).toBe('eBay')
+    })
+})

package/src/ebay-breadcrumbs/breadcrumb-item.tsx

@@ -0,0 +1,39 @@
+import React, { ComponentProps, FC, MouseEventHandler, ReactNode } from 'react'
+import { EbayIcon } from '../ebay-icon'
+
+type ItemAttributes = ComponentProps<'a'> & ComponentProps<'button'>;
+
+type BreadcrumbItemProps = ItemAttributes & {
+    children: ReactNode;
+    tag?: 'a' | 'button';
+    href?: string;
+    isLastItem?: boolean;
+    onClick?: MouseEventHandler;
+    _sp?: string;
+    navsrc?: string;
+}
+
+const BreadcrumbItem: FC<BreadcrumbItemProps> = ({
+    tag: Item = 'button',
+    isLastItem = false,
+    href,
+    children,
+    onClick,
+    ...rest
+}) => {
+    const isLink = Item === 'a'
+    const itemAttr: ItemAttributes = {
+        ...rest,
+        ...isLastItem ? { 'aria-current': 'location' } : {},
+        href: isLink ? href : undefined,
+        onClick: isLink ? undefined : onClick
+    }
+    return (
+        <li>
+            <Item {...itemAttr}>{children}</Item>
+            {!isLastItem && <EbayIcon name="chevronRight12" />}
+        </li>
+    )
+}
+
+export default BreadcrumbItem

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'))
+        })
+    })
+})