@ebay/ui-core-react 7.3.1 → 7.3.2

package/src/common/tooltip-utils/tooltip-footer.tsx

@@ -0,0 +1,15 @@
+import React, { ComponentProps, FC } from 'react'
+import classNames from 'classnames'
+
+type TooltipFooterProps = ComponentProps<'div'> & {
+    type?: string;
+}
+
+const TooltipFooter: FC<TooltipFooterProps> = (
+    {
+        children,
+        className,
+        type = 'tourtip'
+    }) => (<div className={classNames(`${type}__footer`, className)}>{children}</div>)
+
+export default TooltipFooter

package/src/common/tooltip-utils/tooltip-host.tsx

@@ -0,0 +1,24 @@
+import { Children, cloneElement, FC, ReactElement, RefObject } from 'react'
+import classNames from 'classnames'
+
+export type TooltipHostProps = {
+    className?: string;
+    children?: ReactElement;
+    forwardedRef?: RefObject<any>;
+}
+
+const TooltipHost: FC<TooltipHostProps> = ({
+    children,
+    className,
+    forwardedRef,
+    ...rest
+}) => {
+    Children.only(children)
+    return cloneElement(children, {
+        ref: forwardedRef,
+        ...rest,
+        className: classNames(className, children.props.className)
+    })
+}
+
+export default TooltipHost

package/src/common/tooltip-utils/tooltip.tsx

@@ -0,0 +1,49 @@
+import React, { cloneElement, ComponentProps, FC, RefObject } from 'react'
+import classNames from 'classnames'
+import { withForwardRef } from '../component-utils/forwardRef'
+import { findComponent, excludeComponent } from '../component-utils'
+import { TooltipType } from './types'
+import TooltipHost from './tooltip-host'
+
+export type TooltipProps = ComponentProps<'span'> & {
+    type?: TooltipType;
+    isExpanded?: boolean;
+    forwardedRef?: RefObject<HTMLSpanElement>;
+}
+
+const Tooltip: FC<TooltipProps> = ({
+    className,
+    type,
+    isExpanded,
+    children,
+    forwardedRef,
+    ...rest
+}) => {
+    const originalHostComponent = findComponent(children, TooltipHost)
+    const content = excludeComponent(children, TooltipHost)[0]
+
+    if (!originalHostComponent) {
+        throw new Error(`Tooltip: Please use a TooltipHost that defines the host of the tooltip`)
+    }
+
+    const host = cloneElement(originalHostComponent, {
+        className: `${type}__host`,
+        'aria-expanded': isExpanded,
+        'aria-describedby': content?.props?.id,
+        ...originalHostComponent.props
+    })
+
+    return (
+        <span
+            {...rest}
+            ref={forwardedRef}
+            className={classNames(className, type, {
+                [`${type}--expanded`]: isExpanded
+            })}>
+            {host}
+            {content}
+        </span>
+    )
+}
+
+export default withForwardRef(Tooltip)

package/src/common/tooltip-utils/types.ts

@@ -0,0 +1,7 @@
+export type TooltipType = 'tooltip' | 'infotip' | 'tourtip'
+
+export type PointerDirection =
+    'top' | 'top-left' | 'top-right' |
+    'right' | 'right-bottom' | 'right-top' |
+    'bottom' | 'bottom-left' | 'bottom-right' |
+    'left' | 'left-bottom' | 'left-top'

package/src/common/tooltip-utils/use-tooltip.ts

@@ -0,0 +1,39 @@
+import { useState, RefObject } from 'react'
+
+type UseTooltipArgs = {
+    onExpand: () => void;
+    onCollapse: () => void;
+    initialExpanded?: boolean;
+    hostRef?: RefObject<HTMLElement>;
+};
+
+type UseTooltip = {
+    isExpanded: boolean;
+    expandTooltip: () => void;
+    collapseTooltip: () => void;
+};
+
+export const useTooltip = ({ onExpand, onCollapse, initialExpanded = false, hostRef }: UseTooltipArgs): UseTooltip => {
+    const [isExpanded, setIsExpanded] = useState(initialExpanded)
+    const expandTooltip = () => {
+        setIsExpanded(true)
+        if (onExpand) {
+            onExpand()
+        }
+    }
+
+    const collapseTooltip = () => {
+        setIsExpanded(false)
+        if (onCollapse) {
+            onCollapse()
+        }
+
+        hostRef?.current?.focus()
+    }
+
+    return {
+        isExpanded,
+        expandTooltip,
+        collapseTooltip
+    }
+}

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

@@ -0,0 +1,36 @@
+import React from 'react'
+import { screen, fireEvent, render } from '@testing-library/react'
+import { EbayAlertDialog } from '../index'
+
+jest.mock('../../common/random-id')
+
+const closeSpy = jest.fn()
+const openSpy = jest.fn()
+
+describe('<EbayAlertDialog>', () => {
+    beforeEach(() => {
+        render(
+            <EbayAlertDialog
+                confirmText="Confirm"
+                open
+                onOpen={openSpy}
+                onConfirm={closeSpy}
+                a11yCloseText="Close"
+            >
+                <p>Lorem ipsum dolor</p>
+            </EbayAlertDialog>
+        )
+    })
+    it('should trigger onOpen when dialog appears', () => {
+        expect(openSpy).toHaveBeenCalled()
+    })
+
+    it('should have close button', () => {
+        expect(screen.getByText('Confirm')).toBeInTheDocument()
+    })
+
+    it('should trigger onClose when close button is clicked', () => {
+        fireEvent.click(screen.getByText('Confirm'))
+        expect(closeSpy).toHaveBeenCalled()
+    })
+})

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

@@ -0,0 +1,77 @@
+import React, { useState } from 'react'
+import { StoryFn, Meta } from '@storybook/react'
+import { action } from '@storybook/addon-actions'
+import { EbayAlertDialog } from '../index'
+import { EbayDialogHeader } from '../../ebay-dialog-base'
+
+const story = {
+    component: EbayAlertDialog,
+    title: 'dialogs/ebay-alert-dialog'
+} satisfies Meta<typeof EbayAlertDialog>
+
+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: StoryFn<typeof EbayAlertDialog> = () => {
+    const [open, setOpen] = useState(true)
+    const close = () => setOpen(false)
+    return (
+        <div>
+            <button className="btn btn--secondary" onClick={() => setOpen(!open)}>
+                Open Dialog
+            </button>
+            <p>Some outside content...</p>
+            <EbayAlertDialog
+                open={open}
+                onOpen={() => action('onOpen')()}
+                onConfirm={() => {
+                    action('onConfirm')()
+                    close()
+                }}
+                confirmText="Confirm"
+                a11yCloseText="Close"
+            >
+                <EbayDialogHeader>Heading</EbayDialogHeader>
+                {textParagraph}
+                <p>
+                    <a href="http://www.ebay.com">www.ebay.com</a>
+                </p>
+            </EbayAlertDialog>
+        </div>
+    )
+}
+
+export const WithAnimation: StoryFn<typeof EbayAlertDialog> = () => {
+    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>
+            <EbayAlertDialog
+                open={open}
+                onConfirm={close}
+                confirmText="Confirm"
+                animated
+                a11yCloseText="Close"
+            >
+                <EbayDialogHeader>Heading</EbayDialogHeader>
+                {textParagraph}
+                <p>
+                    <a href="http://www.ebay.com">www.ebay.com</a>
+                </p>
+            </EbayAlertDialog>
+        </div>
+    )
+}
+
+export default story

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