@ebay/ui-core-react 7.3.0 → 7.3.2

package/src/ebay-eek/index.ts

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,99 @@
+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()
+        })
+    })
+})