@ebay/ui-core-react 7.3.1 → 7.3.2

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

@@ -0,0 +1,202 @@
+import React from 'react'
+import { StoryObj, StoryFn, Meta } from '@storybook/react'
+import { action } from '@storybook/addon-actions'
+import { EbayIcon } from '../../ebay-icon'
+import {
+    EbayFakeMenuButton,
+    EbayFakeMenuButtonItem as Item,
+    EbayFakeMenuButtonSeparator as Separator,
+    EbayFakeMenuButtonLabel
+} from '../index'
+
+const meta: Meta<typeof EbayFakeMenuButton> = {
+    component: EbayFakeMenuButton,
+    title: 'buttons/ebay-fake-menu-button'
+}
+
+export default meta
+
+export const Default: StoryFn<typeof EbayFakeMenuButton> = () => (
+    <>
+        <EbayFakeMenuButton
+            text="eBay Menu"
+            onExpand={() => action('onExpand')()}
+            onCollapse={() => action('onCollapse')()}
+            onKeyDown={(e) => action('onKeyDown')(e)}
+            onMouseDown={(e, props) => action('onMouseDown')(e, props)}
+            onSelect={(e, props) => action('onSelect')(e, props)}
+        >
+            <Item href="http://ebay.com" onClick={(e) => e.preventDefault()}>
+                eBay US
+            </Item>
+            <Item href="http://ebay.de" onClick={(e) => e.preventDefault()}>
+                eBay DE
+            </Item>
+            <Item href="http://ebay.co.uk" onClick={(e) => e.preventDefault()}>
+                eBay UK
+            </Item>
+        </EbayFakeMenuButton>
+    </>
+)
+
+export const Expanded: StoryFn<typeof EbayFakeMenuButton> = () => (
+    <>
+        <EbayFakeMenuButton expanded text="eBay Menu">
+            <Item href="http://ebay.com">item 1 that has very long text</Item>
+            <Item href="http://ebay.de">item 2</Item>
+            <Item href="http://ebay.co.uk">item 3</Item>
+        </EbayFakeMenuButton>
+    </>
+)
+
+export const Disabled: StoryFn<typeof EbayFakeMenuButton> = () => (
+    <>
+        <EbayFakeMenuButton text="eBay Menu" disabled>
+            <Item href="http://ebay.com">item 1 that has very long text</Item>
+            <Item href="http://ebay.com">item 2</Item>
+            <Item href="http://ebay.com">item 3</Item>
+        </EbayFakeMenuButton>
+    </>
+)
+
+export const WithIcon: StoryFn<typeof EbayFakeMenuButton> = () => (
+    <>
+        <EbayFakeMenuButton text="Settings">
+            <EbayIcon name="settings16" />
+            <Item href="http://ebay.com">item 1 that has very long text</Item>
+            <Item href="http://ebay.com">item 2</Item>
+            <Item href="http://ebay.com">item 3</Item>
+        </EbayFakeMenuButton>
+    </>
+)
+
+export const WithoutToggleIcon: StoryFn<typeof EbayFakeMenuButton> = () => (
+    <>
+        <EbayFakeMenuButton noToggleIcon text="Menu">
+            <Item href="http://ebay.com">item 1 that has very long text</Item>
+            <Item href="http://ebay.com">item 2</Item>
+            <Item href="http://ebay.com">item 3</Item>
+        </EbayFakeMenuButton>
+    </>
+)
+
+export const Variants: StoryFn<typeof EbayFakeMenuButton> = () => (
+    <>
+        <h3>Button</h3>
+        <EbayFakeMenuButton variant="button" text="Button" a11yText="Menu">
+            <Item href="http://ebay.com">item 1</Item>
+            <Item href="http://ebay.com">item 2</Item>
+            <Item href="http://ebay.com">item 3</Item>
+        </EbayFakeMenuButton>
+
+        <h3>Form</h3>
+        <EbayFakeMenuButton variant="form" text="Form" a11yText="Menu inside the form">
+            <Item href="http://ebay.com">item 1</Item>
+            <Item href="http://ebay.com">item 2</Item>
+            <Item href="http://ebay.com">item 3</Item>
+        </EbayFakeMenuButton>
+
+        <h3>Overflow</h3>
+        <EbayFakeMenuButton variant="overflow" a11yText="Menu">
+            <Item href="http://ebay.com">item 1</Item>
+            <Item href="http://ebay.com">item 2</Item>
+            <Item href="http://ebay.com">item 3</Item>
+        </EbayFakeMenuButton>
+    </>
+)
+
+export const Priorities: StoryFn<typeof EbayFakeMenuButton> = () => (
+    <>
+        <EbayFakeMenuButton variant="button" priority="primary" text="Primary" a11yText="Menu">
+            <Item href="http://ebay.com">item 1</Item>
+            <Item href="http://ebay.com">item 2</Item>
+            <Item href="http://ebay.com">item 3</Item>
+        </EbayFakeMenuButton>
+        <EbayFakeMenuButton variant="button" priority="tertiary" text="Tertiary" a11yText="Menu">
+            <Item href="http://ebay.com">item 1</Item>
+            <Item href="http://ebay.com">item 2</Item>
+            <Item href="http://ebay.com">item 3</Item>
+        </EbayFakeMenuButton>
+    </>
+)
+
+export const Borderless: StoryFn<typeof EbayFakeMenuButton> = () => (
+    <>
+        <EbayFakeMenuButton text="eBay Menu without borders!" borderless>
+            <Item href="http://ebay.com">item 1</Item>
+            <Item href="http://ebay.com">item 2</Item>
+            <Item href="http://ebay.com">item 3</Item>
+        </EbayFakeMenuButton>
+    </>
+)
+
+export const WithCustomLabel: StoryFn<typeof EbayFakeMenuButton> = () => (
+    <>
+        <EbayFakeMenuButton>
+            <EbayFakeMenuButtonLabel>
+                <span
+                    style={{
+                        background: 'url(https://ir.ebaystatic.com/pictures/aw/pics/cmp/ds3/sprds3_21.png)',
+                        display: 'inline-block',
+                        height: '20px',
+                        marginRight: '8px',
+                        verticalAlign: 'middle',
+                        width: '26px'
+                    }}
+                />{' '}
+                Fun with flags!
+            </EbayFakeMenuButtonLabel>
+            <Item href="http://ebay.com">item 1</Item>
+            <Item href="http://ebay.com">item 2</Item>
+            <Item href="http://ebay.com">item 3</Item>
+        </EbayFakeMenuButton>
+    </>
+)
+
+export const WithSeparator: StoryFn<typeof EbayFakeMenuButton> = (args) => (
+    <>
+        <EbayFakeMenuButton
+            {...args}
+            text="Complex menu"
+            onExpand={action('Menu expanded!')}
+            onCollapse={action('Menu collapsed!')}
+        >
+            <Item href="http://ebay.com">Link 1</Item>
+            <Item href="http://ebay.com" current>
+                Current link
+            </Item>
+            <Separator />
+            <Item disabled>Link 3 (disabled)</Item>
+            <Item href="http://ebay.com">Link 4</Item>
+            <Item href="http://ebay.com">Link 5</Item>
+            <Separator />
+            <Item href="http://ebay.com" onClick={action('Open login popup!')}>
+                Log in
+            </Item>
+        </EbayFakeMenuButton>
+    </>
+)
+
+export const FixedWidth: StoryFn<typeof EbayFakeMenuButton> = (args) => (
+    <>
+        <EbayFakeMenuButton {...args} text="Menu has a button width" fixWidth>
+            <Item href="http://ebay.com">item 1 that has very very long text</Item>
+            <Item href="http://ebay.com">item 2</Item>
+            <Item href="http://ebay.com">item 3</Item>
+        </EbayFakeMenuButton>
+    </>
+)
+
+export const ReverseMenuGrowsToTheLeft: StoryObj<typeof EbayFakeMenuButton> = {
+    render: () => (
+        <div style={{ marginLeft: '100px' }}>
+            <EbayFakeMenuButton text="Menu grows to the left" reverse>
+                <Item href="http://ebay.com">item 1 that has very very long text</Item>
+                <Item href="http://ebay.com">item 2</Item>
+                <Item href="http://ebay.com">item 3</Item>
+            </EbayFakeMenuButton>
+        </div>
+    ),
+
+    name: 'Reverse (Menu grows to the left)'
+}

package/src/ebay-fake-menu-button/__tests__/render.spec.tsx

@@ -0,0 +1,166 @@
+import React from 'react'
+import { getAllByRole, getByRole, render, screen, within } from '@testing-library/react'
+import { composeStory } from '@storybook/react'
+import Meta, {
+    Borderless,
+    Default,
+    Disabled,
+    Expanded,
+    FixedWidth,
+    Priorities,
+    Variants,
+    WithCustomLabel,
+    WithIcon,
+    WithoutToggleIcon,
+    WithSeparator
+} from './index.stories'
+
+const DefaultStory = composeStory(Default, Meta)
+const ExpandedStory = composeStory(Expanded, Meta)
+const DisabledStory = composeStory(Disabled, Meta)
+const BorderlessStory = composeStory(Borderless, Meta)
+const FixedWidthStory = composeStory(FixedWidth, Meta)
+const PrioritiesStory = composeStory(Priorities, Meta)
+const VariantsStory = composeStory(Variants, Meta)
+const WithIconStory = composeStory(WithIcon, Meta)
+const WithoutToggleIconStory = composeStory(WithoutToggleIcon, Meta)
+const WithCustomLabelStory = composeStory(WithCustomLabel, Meta)
+const WithSeparatorStory = composeStory(WithSeparator, Meta)
+
+describe('ebay-fake-menu-button rendering', () => {
+    it('renders default story correctly', () => {
+        const { container } = render(<DefaultStory />)
+        const buttonContainer: HTMLElement = container.querySelector('.fake-menu-button')
+        const button = getByRole(buttonContainer, 'button')
+        expect(button).toHaveAttribute('aria-expanded', 'false')
+        expect(button).toHaveAttribute('aria-haspopup', 'true')
+        expect(button).toHaveClass('btn fake-menu-button__button btn--secondary')
+        expect(button).toHaveTextContent('eBay Menu')
+        const svg = buttonContainer.querySelector('svg')
+        expect(svg).toMatchSnapshot()
+    })
+
+    it('renders expanded story correctly', () => {
+        const { container } = render(<ExpandedStory />)
+        const buttonContainer: HTMLElement = container.querySelector('.fake-menu-button')
+        const button = getByRole(buttonContainer, 'button')
+        expect(button).toHaveAttribute('aria-expanded', 'true')
+        expect(button).toHaveAttribute('aria-haspopup', 'true')
+        expect(button).toHaveClass('btn fake-menu-button__button btn--secondary')
+        expect(button).toHaveTextContent('eBay Menu')
+        const menu: HTMLElement = buttonContainer.querySelector('.fake-menu')
+        expect(menu).toHaveClass('fake-menu-button__menu')
+        expect(menu).toHaveAttribute('tabindex', '-1')
+        const itemList = getByRole(menu, 'list')
+        expect(itemList).toHaveClass('fake-menu__items')
+        expect(itemList).toHaveAttribute('tabIndex', '-1')
+        const [link1, link2, link3] = getAllByRole(itemList, 'link')
+        expect(link1).toHaveAttribute('href', 'http://ebay.com')
+        expect(link1).toHaveClass('fake-menu-button__item fake-menu__item')
+        expect(link1).toHaveTextContent('item 1 that has very long text')
+        const svg = link1.querySelector('svg')
+        expect(svg).toMatchSnapshot()
+        expect(link2).toHaveAttribute('href', 'http://ebay.de')
+        expect(link2).toHaveTextContent('item 2')
+        expect(link3).toHaveAttribute('href', 'http://ebay.co.uk')
+        expect(link3).toHaveTextContent('item 3')
+    })
+
+    it('renders disabled story correctly', () => {
+        const { container } = render(<DisabledStory />)
+        const buttonContainer: HTMLElement = container.querySelector('.fake-menu-button')
+        const button = getByRole(buttonContainer, 'button')
+        expect(button).toHaveAttribute('aria-expanded', 'false')
+        expect(button).toHaveAttribute('aria-haspopup', 'true')
+        expect(button).toHaveAttribute('disabled', '')
+        expect(button).toHaveClass('btn fake-menu-button__button btn--secondary')
+        expect(button).toHaveTextContent('eBay Menu')
+        const svg = buttonContainer.querySelector('svg')
+        expect(svg).toMatchSnapshot()
+    })
+
+    it('renders borderless story correctly', () => {
+        const { container } = render(<BorderlessStory />)
+        const buttonContainer: HTMLElement = container.querySelector('.fake-menu-button')
+        const button = getByRole(buttonContainer, 'button')
+        expect(button).toHaveAttribute('aria-expanded', 'false')
+        expect(button).toHaveAttribute('aria-haspopup', 'true')
+        expect(button).toHaveClass('btn fake-menu-button__button btn--borderless')
+        expect(button).toHaveTextContent('eBay Menu')
+        const svg = buttonContainer.querySelector('svg')
+        expect(svg).toMatchSnapshot()
+    })
+
+    it('renders fixed width story correctly', () => {
+        const { container } = render(<FixedWidthStory expanded />)
+        const buttonContainer: HTMLElement = container.querySelector('.fake-menu-button')
+        const button = getByRole(buttonContainer, 'button')
+        expect(button).toHaveAttribute('aria-expanded', 'true')
+        expect(button).toHaveAttribute('aria-haspopup', 'true')
+        expect(button).toHaveClass('btn fake-menu-button__button btn--secondary')
+        expect(button).toHaveTextContent('Menu has a button width')
+        const menu = buttonContainer.querySelector('.fake-menu')
+        expect(menu).toHaveClass('fake-menu-button__menu menu-button__menu--fix-width')
+    })
+
+    it('renders priorities story correctly', () => {
+        render(<PrioritiesStory />)
+        const [buttonPrimary, buttonTertiary] = screen.getAllByRole('button')
+        expect(buttonPrimary).toHaveClass('btn fake-menu-button__button btn--primary')
+        expect(buttonPrimary).toHaveTextContent('Primary')
+        expect(buttonTertiary).toHaveClass('btn fake-menu-button__button btn--tertiary')
+        expect(buttonTertiary).toHaveTextContent('Tertiary')
+    })
+
+    it('renders variants story correctly', () => {
+        render(<VariantsStory />)
+        const [button, buttonForm, buttonOverflow] = screen.getAllByRole('button')
+        expect(button).toHaveClass('btn fake-menu-button__button btn--secondary')
+        expect(button).toHaveTextContent('Button')
+        expect(button).toHaveAttribute('aria-label', 'Menu')
+
+        expect(buttonForm).toHaveClass('btn fake-menu-button__button btn--form')
+        expect(buttonForm).toHaveTextContent('Form')
+        expect(buttonForm).toHaveAttribute('aria-label', 'Menu inside the form')
+
+        expect(buttonOverflow).toHaveClass('fake-menu-button__button icon-btn')
+        expect(buttonOverflow).toHaveAttribute('aria-label', 'Menu')
+        expect(buttonOverflow).toHaveAttribute('type', 'button')
+        expect(buttonOverflow.querySelector('svg')).toMatchSnapshot()
+        expect(buttonOverflow).toHaveTextContent('')
+    })
+
+    it('renders with icon story correctly', () => {
+        render(<WithIconStory />)
+        const button = screen.getByRole('button')
+        expect(button.querySelector('svg')).toMatchSnapshot()
+        expect(button).toHaveTextContent('Settings')
+    })
+
+    it('renders without toggle icon story correctly', () => {
+        render(<WithoutToggleIconStory />)
+        const button = screen.getByRole('button')
+        expect(button).toHaveTextContent('Menu')
+        expect(button.querySelector('svg')).toBeNull()
+    })
+
+    it('renders with custom label story correctly', () => {
+        render(<WithCustomLabelStory />)
+        const button = screen.getByRole('button')
+        expect(button).toHaveTextContent('Fun with flags!')
+    })
+
+    it('renders with separator story correctly', () => {
+        render(<WithSeparatorStory expanded />)
+        const button = screen.getByRole('button')
+        expect(button).toHaveTextContent('Complex menu')
+        const menu = screen.getByRole('list')
+        const [link1, link2, separatorItem, link3] = getAllByRole(menu, 'listitem')
+        expect(link1).toHaveTextContent('Link 1')
+        expect(link2).toHaveTextContent('Current link')
+        const separator = within(separatorItem).getByRole('separator')
+        expect(separator).toHaveClass('fake-menu-button__item menu-button__separator')
+        expect(separator).toHaveTextContent('')
+        expect(link3).toHaveTextContent('Link 3 (disabled)')
+    })
+})

package/src/ebay-fake-menu-button/index.ts

@@ -0,0 +1,8 @@
+export {
+    default as EbayFakeMenuButton,
+    type EbayFakeMenuButtonProps,
+    type EbayFakeMenuButtonVariant
+} from './menu-button'
+export { default as EbayFakeMenuButtonItem } from './menu-button-item'
+export { default as EbayFakeMenuButtonSeparator } from './menu-button-separator'
+export { default as EbayFakeMenuButtonLabel } from './menu-button-label'

package/src/ebay-fake-menu-button/menu-button-item.tsx

@@ -0,0 +1,6 @@
+import { FC } from 'react'
+import { EbayFakeMenuItem, EbayFakeMenuItemProps } from '../ebay-fake-menu'
+
+const EbayFakeMenuButtonItem: FC<EbayFakeMenuItemProps> = EbayFakeMenuItem
+
+export default EbayFakeMenuButtonItem

package/src/ebay-fake-menu-button/menu-button-label.tsx

@@ -0,0 +1,7 @@
+import React, { FC, ReactNode } from 'react'
+
+const EbayFakeMenuButtonLabel: FC<{ children?: ReactNode }> = ({ children }) => (
+    <>{children}</>
+)
+
+export default EbayFakeMenuButtonLabel

package/src/ebay-fake-menu-button/menu-button-separator.tsx

@@ -0,0 +1,17 @@
+import React, { ComponentProps, FC } from 'react'
+import classNames from 'classnames'
+
+type Props = ComponentProps<'hr'>
+
+const EbayMenuButtonSeparator: FC<Props> = ({
+    className,
+    ...rest
+}) => (
+    <hr
+        {...rest}
+        className={classNames(className, 'menu-button__separator')}
+        role="separator"
+    />
+)
+
+export default EbayMenuButtonSeparator

package/src/ebay-fake-menu-button/menu-button.tsx

@@ -0,0 +1,147 @@
+import React, { cloneElement, ComponentProps, FC, useEffect, useRef, useState } from 'react'
+import classnames from 'classnames'
+
+import { filterByType, findComponent } from '../common/component-utils'
+import { handleEscapeKeydown } from '../common/event-utils'
+import { EbayKeyboardEventHandler, EbayMouseEventHandler } from '../common/event-utils/types'
+import { randomId } from '../common/random-id'
+import { EbayButton, EbayButtonProps } from '../ebay-button'
+import { EbayIcon } from '../ebay-icon'
+import { EbayIconButton } from '../ebay-icon-button'
+import { EbayFakeMenu, EbayFakeMenuItemProps } from '../ebay-fake-menu'
+import { EbayFakeMenuButtonItem, EbayFakeMenuButtonLabel, EbayFakeMenuButtonSeparator } from '.'
+
+export type EbayFakeMenuButtonVariant = 'overflow' | 'form' | 'button'
+
+export type EbayFakeMenuButtonProps = {
+    a11yText?: string;
+    noToggleIcon?: boolean;
+    expanded?: boolean;
+    fixWidth?: boolean;
+    reverse?: boolean;
+    variant?: EbayFakeMenuButtonVariant;
+    className?: string;
+    onCollapse?: () => void;
+    onExpand?: () => void;
+    text?: string;
+    onSelect?: EbayMouseEventHandler<HTMLAnchorElement, { index: number }>;
+    onKeyDown?: EbayKeyboardEventHandler<HTMLElement>;
+    onMouseDown?: EbayMouseEventHandler<HTMLAnchorElement, { index: number }>;
+}
+
+type ButtonProps = Omit<EbayButtonProps, 'variant' | 'onKeyDown' | 'onMouseDown'> &
+    Omit<ComponentProps<'button'>, 'onKeyDown' | 'onMouseDown' | 'onSelect'> &
+    Omit<ComponentProps<'a'>, 'onKeyDown' | 'onMouseDown' | 'onSelect'>
+type Props = ButtonProps & EbayFakeMenuButtonProps
+
+const EbayMenuButton: FC<Props> = ({
+    a11yText,
+    noToggleIcon,
+    fixWidth,
+    reverse,
+    variant,
+    expanded: defaultExpanded = false,
+    className,
+    onCollapse = () => {},
+    onExpand = () => {},
+    onMouseDown = () => {},
+    onSelect = () => {},
+    text = '',
+    children,
+    ...rest
+}) => {
+    const [expanded, setExpanded] = useState(defaultExpanded)
+    const [menuId, setMenuId] = useState<string|undefined>()
+    const ref = useRef<HTMLButtonElement>()
+
+    const icon = findComponent(children, EbayIcon)
+    const label = findComponent(children, EbayFakeMenuButtonLabel) || (icon ? <span>{text}</span> : text)
+    const menuItems = filterByType(children, [EbayFakeMenuButtonItem, EbayFakeMenuButtonSeparator])
+
+    useEffect(() => {
+        const handleBackgroundClick = (e: React.MouseEvent) => {
+            if (ref.current && !ref.current.contains(e.currentTarget)) {
+                setExpanded(false)
+            }
+        }
+
+        if (expanded) {
+            onExpand()
+            // On React 18 useEffect hooks runs synchronous instead of asynchronous as React 17 or prior
+            // causing the event listener to be attached to the document at the same time that the dialog
+            // opens. Adding a timeout so the event is attached after the click event that opened the modal
+            // is finished.
+            setTimeout(() => {
+                document.addEventListener('click', handleBackgroundClick as any, false)
+            })
+        } else if (expanded === false) {
+            onCollapse()
+        }
+        return () => document.removeEventListener('click', handleBackgroundClick as any, false)
+    }, [expanded])
+
+    useEffect(() => {
+        setMenuId(randomId())
+    }, [])
+
+    const handleMenuKeydown = e => {
+        handleEscapeKeydown(e, () => {
+            setExpanded(false)
+            ref.current?.focus()
+        })
+    }
+
+    const menuClasses = classnames('fake-menu-button__menu', {
+        'menu-button__menu--fix-width': fixWidth,
+        'menu-button__menu--reverse': reverse
+    })
+
+    const buttonProps: Omit<ButtonProps, 'type' | 'ref'> = {
+        ref: ref as any,
+        className: 'fake-menu-button__button',
+        'aria-expanded': !!expanded,
+        'aria-haspopup': true,
+        'aria-label': a11yText,
+        'aria-controls': menuId,
+        onClick: () => setExpanded(!expanded),
+        ...rest
+    }
+
+    return (
+        <span className={classnames('fake-menu-button', className)}>
+            {variant === 'overflow' ?
+                <EbayIconButton icon="overflowHorizontal24" {...buttonProps} /> :
+                <EbayButton
+                    variant={variant === 'form' ? 'form' : undefined}
+                    bodyState={noToggleIcon ? undefined : 'expand'}
+                    {...buttonProps}
+                >
+                    {icon}{label}
+                </EbayButton>
+            }
+            {expanded &&
+                <EbayFakeMenu
+                    className={menuClasses}
+                    id={menuId}
+                    tabIndex={-1}
+                    onKeyDown={handleMenuKeydown}
+                    onSelect={onSelect}
+                >
+                    {menuItems.map((item, i) =>
+                        cloneElement<EbayFakeMenuItemProps>(item, {
+                            ...item.props,
+                            onMouseDown: (e) => {
+                                onMouseDown(e, { index: i })
+                            },
+                            className: classnames(item.props.className, 'fake-menu-button__item'),
+                            key: i,
+                            autoFocus: i === 0
+                        })
+                    )}
+                </EbayFakeMenu>
+            }
+        </span>
+    )
+}
+
+export default EbayMenuButton

package/src/ebay-fake-tabs/__tests__/index.spec.tsx

@@ -0,0 +1,35 @@
+import React from 'react'
+import { render, screen } from '@testing-library/react'
+import { composeStory } from '@storybook/react'
+import Meta, { DefaultTabs, PreSelectedTab, TabMatchesCurrentUrlFalse } from './index.stories'
+
+const DefaultTabsInstance = composeStory(DefaultTabs, Meta)
+const PreSelectedTabInstance = composeStory(PreSelectedTab, Meta)
+const TabMatchesCurrentUrlFalseInstance = composeStory(TabMatchesCurrentUrlFalse, Meta)
+
+describe('ebay-fake-tabs rendering', () => {
+    it('DefaultTabs instance', () => {
+        render(<DefaultTabsInstance />)
+        const tabs = screen.getAllByRole('listitem')
+        expect(tabs[0]).toHaveTextContent('eBay.com')
+        expect(tabs[0].querySelector('a')).toHaveAttribute('href', 'http://ebay.com')
+        expect(screen.getByText('eBay.com Content')).toBeInTheDocument()
+    })
+
+    it('PreSelectedTab instance', () => {
+        render(<PreSelectedTabInstance />)
+        const tabs = screen.getAllByRole('listitem')
+        expect(tabs[1]).toHaveTextContent('eBay.de')
+        expect(tabs[1].querySelector('a')).toHaveAttribute('href', 'http://ebay.de')
+        expect(screen.getByText('eBay.de Content')).toBeInTheDocument()
+    })
+
+    it('TabMatchesCurrentUrlFalse instance', () => {
+        render(<TabMatchesCurrentUrlFalseInstance />)
+        const tabs = screen.getAllByRole('listitem')
+        expect(tabs[2]).toHaveTextContent('eBay.co.uk')
+        expect(tabs[2].querySelector('a')).toHaveAttribute('href', 'http://ebay.co.uk')
+        expect(tabs[2].querySelector('a')).toHaveAttribute('aria-current', 'true')
+        expect(screen.getByText('eBay.co.uk Content')).toBeInTheDocument()
+    })
+})

package/src/ebay-fake-tabs/__tests__/index.stories.tsx

@@ -0,0 +1,54 @@
+import React from 'react'
+import { Meta } from '@storybook/react'
+
+import { EbayFakeTabs, EbayFakeTab as Tab } from '../index'
+
+const meta: Meta<typeof EbayFakeTabs> = {
+    title: 'navigation & disclosure/ebay-fake-tabs'
+}
+
+export default meta
+
+export const DefaultTabs = () => (
+    <>
+        <EbayFakeTabs>
+            <Tab href="http://ebay.com">eBay.com</Tab>
+            <Tab href="http://ebay.de">eBay.de</Tab>
+            <Tab href="http://ebay.co.uk">eBay.co.uk</Tab>
+            <h3>eBay.com Content</h3>
+            <p>Some US content...</p>
+        </EbayFakeTabs>
+    </>
+)
+
+export const PreSelectedTab = {
+    render: () => (
+        <>
+            <EbayFakeTabs selectedIndex={1}>
+                <Tab href="http://ebay.com">eBay.com</Tab>
+                <Tab href="http://ebay.de">eBay.de</Tab>
+                <Tab href="http://ebay.co.uk">eBay.co.uk</Tab>
+                <h3>eBay.de Content</h3>
+                <p>Some German content...</p>
+            </EbayFakeTabs>
+        </>
+    ),
+
+    name: 'Pre-selected Tab'
+}
+
+export const TabMatchesCurrentUrlFalse = {
+    render: () => (
+        <>
+            <EbayFakeTabs tabMatchesCurrentUrl={false} selectedIndex={2}>
+                <Tab href="http://ebay.com">eBay.com</Tab>
+                <Tab href="http://ebay.de">eBay.de</Tab>
+                <Tab href="http://ebay.co.uk">eBay.co.uk</Tab>
+                <h3>eBay.co.uk Content</h3>
+                <p>Some British content...</p>
+            </EbayFakeTabs>
+        </>
+    ),
+
+    name: 'tabMatchesCurrentUrl: false'
+}