@ebay/ui-core-react 7.3.2 → 7.3.4

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1,131 +0,0 @@
-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'))
-        })
-    })
-})