@ebay/ui-core-react 7.3.2 → 7.3.3

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

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

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

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

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

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

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

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

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

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