@ebay/ui-core-react 7.3.2 → 7.3.4

package/src/ebay-eek/index.ts

@@ -1 +0,0 @@
-export { default as EbayEek, type EbayEekProps } from './eek-rating'

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

@@ -1,79 +0,0 @@
-import React from 'react'
-import { fireEvent, render } from '@testing-library/react'
-import { EbayFakeMenu, EbayFakeMenuItem } from '../index'
-
-const clickEvent = expect.objectContaining({ type: 'click' })
-const keyDownEvent = expect.objectContaining({ type: 'keydown' })
-
-describe('<EbayFakeMenu>', () => {
-    describe('on menu item click', () => {
-        it('should fire onClick event', () => {
-            const onClickSpy = jest.fn()
-            const wrapper = render(
-                <EbayFakeMenu>
-                    <EbayFakeMenuItem href="#" onClick={onClickSpy} />
-                </EbayFakeMenu>
-            )
-
-            fireEvent.click(wrapper.container.querySelectorAll('.fake-menu__item')[0])
-
-            expect(onClickSpy).toHaveBeenCalled()
-        })
-    })
-    describe('on key down', () => {
-        it('should fire onKeyDown event', () => {
-            const onKeyDownSpy = jest.fn()
-            const wrapper = render(
-                <EbayFakeMenu onKeyDown={onKeyDownSpy}>
-                    <EbayFakeMenuItem href="#" />
-                </EbayFakeMenu>
-            )
-
-            const index = 0
-            fireEvent.keyDown(wrapper.container.querySelectorAll('.fake-menu__item')[index])
-
-            expect(onKeyDownSpy).toHaveBeenCalledWith(keyDownEvent, { index })
-        })
-    })
-    describe('on item select', () => {
-        it('should fire onSelect event', () => {
-            const onSelectSpy = jest.fn()
-            const wrapper = render(
-                <EbayFakeMenu onSelect={onSelectSpy}>
-                    <EbayFakeMenuItem href="#" />
-                    <EbayFakeMenuItem href="#" />
-                </EbayFakeMenu>
-            )
-
-            const index = 1
-            fireEvent.click(wrapper.container.querySelectorAll('.fake-menu__item')[index])
-
-            expect(onSelectSpy).toHaveBeenCalledWith(clickEvent, { index })
-        })
-    })
-
-    describe('on appear', () => {
-        it('should not autofocus', () => {
-            const wrapper = render(
-                <EbayFakeMenu>
-                    <EbayFakeMenuItem href="#" />
-                    <EbayFakeMenuItem href="#" />
-                </EbayFakeMenu>
-            )
-            const firstMenuItem = wrapper.container.querySelectorAll('.fake-menu__item')[0]
-
-            expect(firstMenuItem).not.toHaveFocus()
-        })
-        it('should autofocus on first item', () => {
-            const wrapper = render(
-                <EbayFakeMenu>
-                    <EbayFakeMenuItem href="#" autoFocus />
-                    <EbayFakeMenuItem href="#" />
-                </EbayFakeMenu>
-            )
-            const firstMenuItem = wrapper.container.querySelectorAll('.fake-menu__item')[0]
-
-            expect(firstMenuItem).toHaveFocus()
-        })
-    })
-})

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

@@ -1,127 +0,0 @@
-import React from 'react'
-import { StoryFn, Meta } from '@storybook/react'
-import { action } from '@storybook/addon-actions'
-import {
-    EbayFakeMenu,
-    EbayFakeMenuItem as Item,
-    EbayFakeMenuSeparator as Separator
-} from '../index'
-
-const meta: Meta<typeof EbayFakeMenu> = {
-    component: EbayFakeMenu,
-    title: 'building blocks/ebay-fake-menu'
-}
-
-export default meta
-
-export const Default: StoryFn<typeof EbayFakeMenu> = () => (
-    <>
-        <EbayFakeMenu
-            onClick={(event) => {
-                action('click')('MENU click event prevented')
-                event.preventDefault()
-            }}
-            onKeyDown={(event, props) => action('onKeyDown')(event, props)}
-            onSelect={(event, props) => {
-                action('onSelect')(event, props)
-                event.preventDefault()
-            }}
-        >
-            <Item
-                href="#"
-                onClick={(event) => {
-                    action('click')('ITEM click event prevented')
-                    event.preventDefault()
-                }}
-            >
-                Item 1 that has very long text
-            </Item>
-            <Item href="#" current>
-                Current page
-            </Item>
-            <Item href="#">Item 3</Item>
-        </EbayFakeMenu>
-    </>
-)
-
-export const WithoutTickIcon: StoryFn<typeof EbayFakeMenu> = () => (
-    <>
-        <EbayFakeMenu
-            itemMatchesUrl={false}
-            onClick={(event) => {
-                action('click')('MENU click event prevented')
-                event.preventDefault()
-            }}
-            onKeyDown={action('key down')}
-            onSelect={(event) => {
-                action('select')('event prevented')
-                event.preventDefault()
-            }}
-        >
-            <Item
-                href="#"
-                onClick={(event) => {
-                    action('click')('ITEM click event prevented')
-                    event.preventDefault()
-                }}
-            >
-                Item 1 that has very long text
-            </Item>
-            <Item href="#" current>
-                Current page
-            </Item>
-            <Item href="#">Item 3</Item>
-        </EbayFakeMenu>
-    </>
-)
-
-export const WithSeparator: StoryFn<typeof EbayFakeMenu> = () => (
-    <>
-        <EbayFakeMenu>
-            <Item href="#">item 1 that has very long text</Item>
-            <Item href="#">Item 2</Item>
-            <Separator />
-            <Item href="#">Item 3</Item>
-            <Item href="#">Item 4</Item>
-            <Item href="#">Item 5</Item>
-        </EbayFakeMenu>
-    </>
-)
-
-export const WithDisabledItem: StoryFn<typeof EbayFakeMenu> = () => (
-    <>
-        <EbayFakeMenu>
-            <Item href="#">item 1 that has very long text</Item>
-            <Item>Item without href</Item>
-            <Item disabled>Disabled Item</Item>
-            <Item href="#">Item 3</Item>
-        </EbayFakeMenu>
-    </>
-)
-
-export const MixedWithButtons: StoryFn<typeof EbayFakeMenu> = () => (
-    <>
-        <EbayFakeMenu>
-            <Item href="#">Link 1</Item>
-            <Item type="button">Button</Item>
-            <Item href="#">Link 2</Item>
-            <Item type="button" disabled>
-                Disabled Button
-            </Item>
-        </EbayFakeMenu>
-    </>
-)
-
-export const WithBadges: StoryFn<typeof EbayFakeMenu> = () => (
-    <>
-        <EbayFakeMenu>
-            <Item href="" badgeNumber={5} badgeAriaLabel="item 1 (5 unread items)">
-                item 1
-            </Item>
-            <Item href="" badgeNumber={23} aria-label="item 2 (23 unread items)">
-                item 2
-            </Item>
-            <Item href="">item 3</Item>
-        </EbayFakeMenu>
-    </>
-)

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

@@ -1,70 +0,0 @@
-import React from 'react'
-import { render, screen } from '@testing-library/react'
-import { composeStory } from '@storybook/react'
-import Meta, {
-    Default,
-    WithoutTickIcon,
-    WithSeparator,
-    WithDisabledItem,
-    MixedWithButtons,
-    WithBadges
-} from './index.stories'
-
-const DefaultInstance = composeStory(Default, Meta)
-const WithoutTickIconInstance = composeStory(WithoutTickIcon, Meta)
-const WithSeparatorInstance = composeStory(WithSeparator, Meta)
-const WithDisabledItemInstance = composeStory(WithDisabledItem, Meta)
-const MixedWithButtonsInstance = composeStory(MixedWithButtons, Meta)
-const WithBadgesInstance = composeStory(WithBadges, Meta)
-
-describe('EbayFakeMenu rendering', () => {
-    describe('Default', () => {
-        it('should render correctly', () => {
-            render(<DefaultInstance />)
-            const item = screen.getByText('Item 1 that has very long text')
-            expect(item.closest('a')).toHaveAttribute('href', '#')
-        })
-    })
-
-    describe('WithoutTickIcon', () => {
-        it('should render correctly', () => {
-            render(<WithoutTickIconInstance />)
-            const item = screen.getByText('Item 1 that has very long text')
-            expect(item.closest('a')).toHaveAttribute('href', '#')
-        })
-    })
-
-    describe('WithSeparator', () => {
-        it('should render correctly', () => {
-            render(<WithSeparatorInstance />)
-            const separator = screen.getByRole('separator')
-            expect(separator).toBeInTheDocument()
-        })
-    })
-
-    describe('WithDisabledItem', () => {
-        it('should render correctly', () => {
-            render(<WithDisabledItemInstance />)
-            const disabledItem = screen.getByText('Disabled Item')
-            expect(disabledItem.closest('a')).toHaveAttribute('aria-disabled', 'true')
-        })
-    })
-
-    describe('MixedWithButtons', () => {
-        it('should render correctly', () => {
-            render(<MixedWithButtonsInstance />)
-            const button = screen.getByRole('button', { name: 'Button' })
-            expect(button).toBeInTheDocument()
-        })
-    })
-
-    describe('WithBadges', () => {
-        it('should render correctly', () => {
-            render(<WithBadgesInstance />)
-            const badge = screen.getByText('item 1')
-            expect(badge).toBeInTheDocument()
-            const badgeNumber = screen.getByText('5')
-            expect(badgeNumber).toBeInTheDocument()
-        })
-    })
-})

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

@@ -1,3 +0,0 @@
-export { default as EbayFakeMenu } from './menu'
-export { default as EbayFakeMenuItem, type EbayFakeMenuItemProps, type EbayMenuItemType } from './menu-item'
-export { default as EbayFakeMenuSeparator } from './menu-item-separator'

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

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

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

@@ -1,84 +0,0 @@
-import React, { ComponentProps, FC, useEffect, useRef } from 'react'
-import classNames from 'classnames'
-import { EbayIcon } from '../ebay-icon'
-import { EbayBadge } from '../ebay-badge'
-
-export type EbayMenuItemType = 'button'
-export type EbayFakeMenuItemProps =
-    Omit<ComponentProps<'a'>, 'onKeyDown' | 'onMouseDown'> &
-    Omit<ComponentProps<'button'>, 'onKeyDown' | 'onMouseDown'> &
-    {
-        current?: boolean;
-        disabled?: boolean;
-        autoFocus?: boolean;
-        type?: EbayMenuItemType;
-        badgeNumber?: number;
-        badgeAriaLabel?: string;
-    }
-
-const EbayMenuItem: FC<EbayFakeMenuItemProps> = ({
-    className,
-    current,
-    disabled,
-    autoFocus,
-    type,
-    badgeNumber,
-    badgeAriaLabel,
-    children,
-    ...rest
-}) => {
-    const ref = useRef<HTMLAnchorElement & HTMLButtonElement>()
-    const hasBadge = badgeNumber !== undefined
-
-    useEffect(() => {
-        if (autoFocus) {
-            ref.current?.focus()
-        }
-    })
-
-    const itemProps = {
-        ...rest,
-        ref,
-        className: classNames(
-            className,
-            'fake-menu__item',
-            hasBadge && 'menu__item--badged'),
-        'aria-label': badgeAriaLabel
-    }
-
-    const tick = <EbayIcon name="tick16" />
-    // todo: remove this workaround when Skin team fixes https://github.com/eBay/skin/issues/2208
-    const badgeStyleFix = {
-        marginLeft: 'var(--spacing-100)',
-        marginRight: 'var(--spacing-100)'
-    }
-    const badge = hasBadge && <EbayBadge type="menu" number={badgeNumber} style={badgeStyleFix} />
-
-    return type === 'button' ? (
-        <button
-            {...itemProps}
-            type="button"
-            disabled={disabled}
-
-        >
-            <span>
-                {children}
-                {badge}
-            </span>
-            {tick}
-        </button>
-    ) : (
-        <a
-            {...itemProps}
-            aria-disabled={disabled ? 'true' : undefined}
-        >
-            <span>
-                {children}
-                {badge}
-            </span>
-            {tick}
-        </a>
-    )
-}
-
-export default EbayMenuItem

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

@@ -1,58 +0,0 @@
-import React, {
-    Children, cloneElement,
-    ComponentProps, FC, ReactElement
-} from 'react'
-import classNames from 'classnames'
-import { EbayFakeMenuItemProps } from './index'
-import { EbayKeyboardEventHandler, EbayMouseEventHandler } from '../common/event-utils/types'
-
-type SpanProps = Omit<ComponentProps<'div'>, 'onKeyDown' | 'onSelect'>
-type Props = SpanProps & {
-    itemMatchesUrl?: boolean;
-    onKeyDown?: EbayKeyboardEventHandler<HTMLElement, { index: number }>;
-    onSelect?: EbayMouseEventHandler<HTMLAnchorElement, { index: number }>;
-}
-
-const EbayFakeMenu: FC<Props> = ({
-    className,
-    itemMatchesUrl = true,
-    onKeyDown = () => {},
-    onSelect = () => {},
-    children,
-    ...rest
-}) => {
-    const childrenArray = Children.toArray(children)
-    const defaultAriaCurrent = itemMatchesUrl === false ? 'true' : 'page'
-
-    return (
-        <div {...rest} className={classNames(className, 'fake-menu')}>
-            <ul className="fake-menu__items" tabIndex={-1}>
-                {childrenArray.map((child: ReactElement, i) => {
-                    const {
-                        current,
-                        onClick = () => {},
-                        ...itemRest
-                    }: EbayFakeMenuItemProps = child.props
-
-                    return (
-                        <li key={i}>
-                            {cloneElement(child, {
-                                ...itemRest,
-                                'aria-current': current ? defaultAriaCurrent : undefined,
-                                onClick: e => {
-                                    onSelect(e, { index: i })
-                                    onClick(e)
-                                },
-                                onKeyDown: e => {
-                                    onKeyDown(e, { index: i })
-                                }
-                            } as EbayFakeMenuItemProps)}
-                        </li>
-                    )
-                })}
-            </ul>
-        </div>
-    )
-}
-
-export default EbayFakeMenu

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

@@ -1,79 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`ebay-fake-menu-button rendering renders borderless story correctly 1`] = `
-<svg
-  aria-hidden="true"
-  class="icon icon--12"
-  focusable="false"
-  xmlns="http://www.w3.org/2000/svg"
->
-  <use
-    xlink:href="#icon-chevron-down-12"
-  />
-</svg>
-`;
-
-exports[`ebay-fake-menu-button rendering renders default story correctly 1`] = `
-<svg
-  aria-hidden="true"
-  class="icon icon--12"
-  focusable="false"
-  xmlns="http://www.w3.org/2000/svg"
->
-  <use
-    xlink:href="#icon-chevron-down-12"
-  />
-</svg>
-`;
-
-exports[`ebay-fake-menu-button rendering renders disabled story correctly 1`] = `
-<svg
-  aria-hidden="true"
-  class="icon icon--12"
-  focusable="false"
-  xmlns="http://www.w3.org/2000/svg"
->
-  <use
-    xlink:href="#icon-chevron-down-12"
-  />
-</svg>
-`;
-
-exports[`ebay-fake-menu-button rendering renders expanded story correctly 1`] = `
-<svg
-  aria-hidden="true"
-  class="icon icon--16"
-  focusable="false"
-  xmlns="http://www.w3.org/2000/svg"
->
-  <use
-    xlink:href="#icon-tick-16"
-  />
-</svg>
-`;
-
-exports[`ebay-fake-menu-button rendering renders variants story correctly 1`] = `
-<svg
-  aria-hidden="true"
-  class="icon icon--24"
-  focusable="false"
-  xmlns="http://www.w3.org/2000/svg"
->
-  <use
-    xlink:href="#icon-overflow-horizontal-24"
-  />
-</svg>
-`;
-
-exports[`ebay-fake-menu-button rendering renders with icon story correctly 1`] = `
-<svg
-  aria-hidden="true"
-  class="icon icon--16"
-  focusable="false"
-  xmlns="http://www.w3.org/2000/svg"
->
-  <use
-    xlink:href="#icon-settings-16"
-  />
-</svg>
-`;

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

@@ -1,99 +0,0 @@
-import React from 'react'
-import { screen, fireEvent, render } from '@testing-library/react'
-import { EbayFakeMenuButton, EbayFakeMenuButtonItem } from '..'
-import { eventOfType } from '../../common/event-utils/__tests__/helpers'
-
-jest.useFakeTimers()
-
-describe('<EbayFakeMenuButton>', () => {
-    describe('on button click', () => {
-        let expandSpy
-
-        beforeEach(() => {
-            expandSpy = jest.fn()
-        })
-        afterEach(() => {
-            expandSpy.mockClear()
-        })
-        it('should fire onExpand event', () => {
-            render(
-                <EbayFakeMenuButton onExpand={expandSpy}>
-                    <EbayFakeMenuButtonItem />
-                </EbayFakeMenuButton>
-            )
-            fireEvent.click(screen.getByRole('button'))
-
-            expect(expandSpy).toHaveBeenCalled()
-        })
-        it('should fire onCollapse event', () => {
-            render(
-                <EbayFakeMenuButton onCollapse={expandSpy}>
-                    <EbayFakeMenuButton />
-                </EbayFakeMenuButton>
-            )
-
-            const button = screen.getByRole('button')
-            fireEvent.click(button)
-            fireEvent.click(button)
-
-            expect(expandSpy).toHaveBeenCalled()
-        })
-    })
-
-    describe('on opened menu', () => {
-        let collapseSpy, keyDownSpy, mouseDownSpy, selectSpy, button
-
-        beforeEach(() => {
-            collapseSpy = jest.fn()
-            keyDownSpy = jest.fn()
-            mouseDownSpy = jest.fn()
-            selectSpy = jest.fn()
-            render(
-                <EbayFakeMenuButton
-                    onCollapse={collapseSpy}
-                    onKeyDown={keyDownSpy}
-                    onMouseDown={mouseDownSpy}
-                    onSelect={selectSpy}
-                >
-                    <EbayFakeMenuButtonItem>link 1</EbayFakeMenuButtonItem>
-                    <EbayFakeMenuButtonItem>link 2</EbayFakeMenuButtonItem>
-                </EbayFakeMenuButton>
-            )
-            button = screen.getByRole('button')
-            fireEvent.click(button)
-        })
-        afterEach(() => {
-            collapseSpy.mockClear()
-        })
-
-        it('should call onMouseDown', () => {
-            const link = screen.getByText('link 2')
-            fireEvent.mouseDown(link)
-            fireEvent.click(link)
-
-            expect(mouseDownSpy).toHaveBeenCalledWith(eventOfType('mousedown'), { index: 1 })
-            expect(selectSpy).toHaveBeenCalledWith(eventOfType('click'), { index: 1 })
-        })
-
-        it('should close on button click', () => {
-            fireEvent.click(button)
-
-            expect(collapseSpy).toHaveBeenCalled()
-        })
-
-        it('should close on Esc press', () => {
-            fireEvent.focus(button)
-            fireEvent.keyDown(button, { key: 'Escape' })
-
-            expect(keyDownSpy).toHaveBeenCalledWith(eventOfType('keydown'))
-            expect(collapseSpy).toHaveBeenCalled()
-        })
-
-        it('should close on BG click', () => {
-            jest.runAllTimers()
-            document.body.click()
-
-            expect(collapseSpy).toHaveBeenCalled()
-        })
-    })
-})