@ebay/ui-core-react 7.3.1 → 7.3.2

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

@@ -0,0 +1,325 @@
+import React, { useState } from 'react'
+import { action } from '@storybook/addon-actions'
+import { EbayIcon } from '../../ebay-icon'
+import {
+    EbayMenuButton,
+    EbayMenuButtonItem as Item,
+    EbayMenuButtonSeparator as Separator,
+    EbayMenuButtonLabel
+} from '../index'
+
+export default {
+    title: 'buttons/ebay-menu-button'
+}
+
+export const Default = () => (
+    <>
+        <EbayMenuButton
+            text="eBay Menu"
+            onKeyDown={action('key down')}
+            onClick={action('click button')}
+            onSelect={(e, { index, checked }) => action('select')(e, { index, checked })}
+            onExpand={action('expand')}
+            onCollapse={action('collapse')}
+        >
+            <Item>item 1 that has very long text</Item>
+            <Item>item 2</Item>
+            <Item>item 3</Item>
+        </EbayMenuButton>
+    </>
+)
+
+export const Expanded = () => (
+    <>
+        <EbayMenuButton expanded text="eBay Menu">
+            <Item>item 1 that has very long text</Item>
+            <Item>item 2</Item>
+            <Item>item 3</Item>
+        </EbayMenuButton>
+    </>
+)
+
+export const Disabled = () => (
+    <>
+        <EbayMenuButton text="eBay Menu" disabled>
+            <Item>item 1 that has very long text</Item>
+            <Item>item 2</Item>
+            <Item>item 3</Item>
+        </EbayMenuButton>
+    </>
+)
+
+export const WithIcon = {
+    render: () => (
+        <>
+            <EbayMenuButton text="Settings">
+                <EbayIcon name="settings16" />
+                <Item>item 1 that has very long text</Item>
+                <Item>item 2</Item>
+                <Item>item 3</Item>
+            </EbayMenuButton>
+        </>
+    ),
+
+    name: 'With icon'
+}
+
+export const WithoutToggleIcon = {
+    render: () => (
+        <>
+            <EbayMenuButton noToggleIcon text="Menu">
+                <Item>item 1 that has very long text</Item>
+                <Item>item 2</Item>
+                <Item>item 3</Item>
+            </EbayMenuButton>
+        </>
+    ),
+
+    name: 'Without toggle icon'
+}
+
+export const Variants = () => (
+    <>
+        <h3>Button</h3>
+        <EbayMenuButton variant="button" text="Button" a11yText="Menu inside the form">
+            <Item>item 1</Item>
+            <Item>item 2</Item>
+            <Item>item 3</Item>
+        </EbayMenuButton>
+
+        <h3>Form</h3>
+        <EbayMenuButton variant="form" text="Form" a11yText="Menu inside the form">
+            <Item>item 1</Item>
+            <Item>item 2</Item>
+            <Item>item 3</Item>
+        </EbayMenuButton>
+
+        <h3>Overflow</h3>
+        <EbayMenuButton variant="overflow" a11yText="Menu">
+            <Item>item 1</Item>
+            <Item>item 2</Item>
+            <Item>item 3</Item>
+        </EbayMenuButton>
+    </>
+)
+
+export const Priorities = () => (
+    <>
+        <EbayMenuButton priority="primary" text="Primary" a11y-text="Menu">
+            <Item>item 1</Item>
+            <Item>item 2</Item>
+            <Item>item 3</Item>
+        </EbayMenuButton>
+        <EbayMenuButton priority="tertiary" text="Tertiary" a11y-text="Menu">
+            <Item>item 1</Item>
+            <Item>item 2</Item>
+            <Item>item 3</Item>
+        </EbayMenuButton>
+    </>
+)
+
+export const Borderless = () => (
+    <>
+        <EbayMenuButton text="eBay Menu without borders!" borderless>
+            <Item>item 1</Item>
+            <Item>item 2</Item>
+            <Item>item 3</Item>
+        </EbayMenuButton>
+    </>
+)
+
+export const WithCustomLabel = () => (
+    <>
+        <h2>Custom style label</h2>
+        <EbayMenuButton>
+            <EbayMenuButtonLabel>
+                <span
+                    style={{
+                        background:
+              "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='25' height='15' viewBox='0 0 5 3'%3E%3Cpath d='M0 0h5v3H0z'/%3E%3Cpath fill='%23D00' d='M0 1h5v2H0z'/%3E%3Cpath fill='%23FFCE00' d='M0 2h5v1H0z'/%3E%3C/svg%3E\") no-repeat 50% 50%",
+                        display: 'inline-block',
+                        height: '20px',
+                        marginRight: '8px',
+                        verticalAlign: 'middle',
+                        width: '26px'
+                    }}
+                />
+                Fun with flags!
+            </EbayMenuButtonLabel>
+            <Item>item 1</Item>
+            <Item>item 2</Item>
+            <Item>item 3</Item>
+        </EbayMenuButton>
+
+        <br />
+        <br />
+
+        <h2 id="external-label">External label</h2>
+        <EbayMenuButton prefixId="external-label">
+            <EbayMenuButtonLabel>Using external label for a11y</EbayMenuButtonLabel>
+            <Item>item 1</Item>
+            <Item>item 2</Item>
+            <Item>item 3</Item>
+        </EbayMenuButton>
+
+        <br />
+        <br />
+
+        <h2>Prefix Label</h2>
+        <EbayMenuButton prefixLabel="Prefix:">
+            <EbayMenuButtonLabel>Label</EbayMenuButtonLabel>
+            <Item>item 1</Item>
+            <Item>item 2</Item>
+            <Item>item 3</Item>
+        </EbayMenuButton>
+
+        <br />
+        <br />
+
+        <h2>No Label</h2>
+        <EbayMenuButton split="end">
+            <Item>item 1</Item>
+            <Item>item 2</Item>
+            <Item>item 3</Item>
+        </EbayMenuButton>
+    </>
+)
+
+export const WithSeparator = (args) => (
+    <>
+        <EbayMenuButton
+            {...args}
+            text="Complex menu"
+            onExpand={action('Menu expanded!')}
+            onCollapse={action('Menu collapsed!')}
+        >
+            <Item>item 1</Item>
+            <Item>item 2</Item>
+            <Separator />
+            <Item>item 3</Item>
+            <Item>item 4</Item>
+            <Item>item 5</Item>
+            <Separator />
+            <Item onClick={action('Open login popup!')}>Log in</Item>
+        </EbayMenuButton>
+    </>
+)
+
+export const SingleSelectMenuButtonItemChecked = {
+    render: (args) => (
+        <>
+            <EbayMenuButton {...args} text="Sort order" type="radio">
+                <Item>Date</Item>
+                <Item checked>Price</Item>
+                <Item>Relevance</Item>
+            </EbayMenuButton>
+        </>
+    ),
+
+    name: 'Single-Select Menu Button (item.checked)'
+}
+
+export const SingleSelectMenuButtonCollapseOnClick = {
+    render: () => {
+        const defaultSortIndex = 1
+        const sortItems = ['Date', 'Price', 'Relevance']
+        const [checkedSort, setCheckedSort] = useState(defaultSortIndex)
+
+        return (
+            <EbayMenuButton
+                prefixLabel="Sort order:"
+                text={sortItems[checkedSort]}
+                type="radio"
+                collapseOnSelect
+                checked={defaultSortIndex}
+                onChange={(e, { index }) => setCheckedSort(index)}
+            >
+                {sortItems.map((item, i) => (
+                    <Item key={i}>{item}</Item>
+                ))}
+            </EbayMenuButton>
+        )
+    },
+
+    name: 'Single-Select Menu Button (collapse on click)'
+}
+
+export const SingleSelectMenuButtonMenuChecked = {
+    render: (args) => {
+        const defaultSortIndex = 2
+        const defaultTopicIndex = 1
+        const sortItems = ['Date', 'Price', 'Relevance']
+        const topicItems = ['Cars', 'Phones', 'Computers']
+        const [checkedSort, setCheckedSort] = useState(defaultSortIndex)
+        const [checkedTopic, setCheckedTopic] = useState(defaultTopicIndex)
+
+        return (
+            <>
+                <EbayMenuButton
+                    {...args}
+                    prefixLabel="Topic:"
+                    text={topicItems[checkedTopic]}
+                    type="radio"
+                    checked={defaultTopicIndex}
+                    onChange={(e, { index }) => setCheckedTopic(index)}
+                >
+                    {topicItems.map((item, i) => (
+                        <Item key={i}>{item}</Item>
+                    ))}
+                </EbayMenuButton>
+        &nbsp;
+                <EbayMenuButton
+                    prefixLabel="Sort order:"
+                    text={sortItems[checkedSort]}
+                    type="radio"
+                    checked={defaultSortIndex}
+                    onChange={(e, { index }) => setCheckedSort(index)}
+                >
+                    {sortItems.map((item, i) => (
+                        <Item key={i}>{item}</Item>
+                    ))}
+                </EbayMenuButton>
+            </>
+        )
+    },
+
+    name: 'Single-Select Menu Button (menu.checked)'
+}
+
+export const MultiSelectMenuButton = {
+    render: (args) => (
+        <>
+            <EbayMenuButton {...args} text="Filter" type="checkbox">
+                <Item checked>Snickers</Item>
+                <Item>T-Shirts</Item>
+                <Item checked>Pants</Item>
+            </EbayMenuButton>
+        </>
+    ),
+
+    name: 'Multi-Select Menu Button'
+}
+
+export const FixedWidth = (args) => (
+    <>
+        <EbayMenuButton {...args} text="Menu has a button width" fixWidth>
+            <Item>item 1 that has very long text</Item>
+            <Item>item 2</Item>
+            <Item>item 3</Item>
+        </EbayMenuButton>
+    </>
+)
+
+export const ReverseMenuGrowsToTheLeft = {
+    render: (args) => (
+        <div style={{ marginLeft: '100px' }}>
+            <EbayMenuButton {...args} text="Menu grows to the left" reverse>
+                <Item>item 1 that has very very long text</Item>
+                <Item>item 2</Item>
+                <Item>item 3</Item>
+            </EbayMenuButton>
+        </div>
+    ),
+
+    name: 'Reverse (Menu grows to the left)'
+}

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

@@ -0,0 +1,202 @@
+import React from 'react'
+import { render, screen } from '@testing-library/react'
+import { composeStories } from '@storybook/react'
+import * as stories from './index.stories'
+
+const {
+    Default,
+    Expanded,
+    Disabled,
+    WithIcon,
+    WithoutToggleIcon,
+    Variants,
+    Priorities,
+    Borderless,
+    WithCustomLabel,
+    WithSeparator,
+    SingleSelectMenuButtonItemChecked,
+    SingleSelectMenuButtonMenuChecked,
+    MultiSelectMenuButton,
+    FixedWidth,
+    ReverseMenuGrowsToTheLeft
+} = composeStories(stories)
+
+describe('EbayMenuButton rendering', () => {
+    describe('Default', () => {
+        it('should render correctly', () => {
+            render(<Default />)
+            const [firstButton] = screen.getAllByRole('button')
+
+            expect(firstButton).toHaveClass('btn menu-button__button btn--secondary')
+            const svg = firstButton.querySelector('svg')
+            expect(svg).toMatchSnapshot()
+        })
+    })
+
+    describe('Expanded', () => {
+        it('should render correctly', () => {
+            render(<Expanded />)
+            const [firstButton] = screen.getAllByRole('button')
+
+            expect(firstButton).toHaveClass('btn menu-button__button btn--secondary')
+            expect(firstButton).toHaveAttribute('aria-expanded', 'true')
+            const [item] = screen.getAllByRole('menuitem')
+            expect(item.textContent).toEqual('item 1 that has very long text')
+        })
+    })
+
+    describe('Disabled', () => {
+        it('should render correctly', () => {
+            render(<Disabled />)
+            const [firstButton] = screen.getAllByRole('button')
+
+            expect(firstButton).toHaveClass('btn menu-button__button btn--secondary')
+            expect(firstButton).toHaveAttribute('disabled', '')
+            const svg = firstButton.querySelector('svg')
+            expect(svg).toMatchSnapshot()
+        })
+    })
+
+    describe('WithIcon', () => {
+        it('should render correctly', () => {
+            render(<WithIcon />)
+            const [firstButton] = screen.getAllByRole('button')
+
+            expect(firstButton).toHaveClass('btn menu-button__button btn--secondary')
+            const [iconSvg, chevronSvg] = firstButton.querySelectorAll('svg')
+            expect(iconSvg).toMatchSnapshot()
+            expect(chevronSvg).toMatchSnapshot()
+        })
+    })
+
+    describe('WithoutToggleIcon', () => {
+        it('should render correctly', () => {
+            render(<WithoutToggleIcon />)
+            const [firstButton] = screen.getAllByRole('button')
+
+            expect(firstButton).toHaveClass('btn menu-button__button btn--secondary')
+            const svg = firstButton.querySelector('svg')
+            expect(svg).toBeNull()
+        })
+    })
+
+    describe('Variants', () => {
+        it('should render correctly', () => {
+            render(<Variants />)
+            const [firstButton, secondButton, thirdButton] = screen.getAllByRole('button')
+
+            expect(firstButton).toHaveClass('btn menu-button__button btn--secondary')
+            const firstSvg = firstButton.querySelector('svg')
+            expect(firstSvg).toMatchSnapshot()
+
+            expect(secondButton).toHaveClass('btn menu-button__button btn--form')
+            const secondSvg = secondButton.querySelector('svg')
+            expect(secondSvg).toMatchSnapshot()
+
+            expect(thirdButton).toHaveClass('menu-button__button icon-btn')
+            const thirdSvg = thirdButton.querySelector('svg')
+            expect(thirdSvg).toMatchSnapshot()
+        })
+    })
+
+    describe('Priorities', () => {
+        it('should render correctly', () => {
+            render(<Priorities />)
+            const [firstButton, secondButton] = screen.getAllByRole('button')
+
+            expect(firstButton).toHaveClass('btn menu-button__button btn--primary')
+            const firstSvg = firstButton.querySelector('svg')
+            expect(firstSvg).toMatchSnapshot()
+
+            expect(secondButton).toHaveClass('btn menu-button__button btn--tertiary')
+            const secondSvg = secondButton.querySelector('svg')
+            expect(secondSvg).toMatchSnapshot()
+        })
+    })
+
+    describe('Borderless', () => {
+        it('should render correctly', () => {
+            render(<Borderless />)
+            const [firstButton] = screen.getAllByRole('button')
+            expect(firstButton).toHaveClass('btn menu-button__button btn--borderless')
+        })
+    })
+
+    describe('WithCustomLabel', () => {
+        it('should render correctly', () => {
+            render(<WithCustomLabel />)
+            const [firstButton] = screen.getAllByRole('button')
+            expect(firstButton).toHaveClass('btn menu-button__button btn--secondary')
+
+
+            const label = firstButton.querySelector('.btn__text')
+            expect(label).toHaveTextContent('Fun with flags!')
+        })
+    })
+
+    describe('WithSeparator', () => {
+        it('should render correctly', () => {
+            render(<WithSeparator expanded />)
+            const [firstButton] = screen.getAllByRole('button')
+            expect(firstButton).toHaveClass('btn menu-button__button btn--secondary')
+
+            const separators = screen.getAllByRole('separator')
+            expect(separators.length).toEqual(2)
+        })
+    })
+
+    describe('SingleSelectMenuButtonItemChecked', () => {
+        it('should render correctly', () => {
+            render(<SingleSelectMenuButtonItemChecked expanded />)
+            const [firstButton] = screen.getAllByRole('button')
+            expect(firstButton).toHaveClass('btn menu-button__button btn--secondary')
+
+            const [firstItem, secondItem, thirdItem] = screen.getAllByRole('menuitemradio')
+            expect(firstItem).toHaveAttribute('aria-checked', 'false')
+            expect(secondItem).toHaveAttribute('aria-checked', 'true')
+            expect(thirdItem).toHaveAttribute('aria-checked', 'false')
+        })
+    })
+
+    describe('SingleSelectMenuButtonMenuChecked', () => {
+        it('should render correctly', () => {
+            render(<SingleSelectMenuButtonMenuChecked expanded />)
+            const [firstButton] = screen.getAllByRole('button')
+            expect(firstButton).toHaveClass('btn menu-button__button btn--secondary')
+
+            const [firstItem, secondItem, thirdItem] = screen.getAllByRole('menuitemradio')
+            expect(firstItem).toHaveAttribute('aria-checked', 'false')
+            expect(secondItem).toHaveAttribute('aria-checked', 'true')
+            expect(thirdItem).toHaveAttribute('aria-checked', 'false')
+        })
+    })
+
+    describe('MultiSelectMenuButton', () => {
+        it('should render correctly', () => {
+            render(<MultiSelectMenuButton expanded />)
+            const [firstButton] = screen.getAllByRole('button')
+            expect(firstButton).toHaveClass('btn menu-button__button btn--secondary')
+
+            const [firstItem, secondItem, thirdItem] = screen.getAllByRole('menuitemcheckbox')
+            expect(firstItem).toHaveAttribute('aria-checked', 'true')
+            expect(secondItem).toHaveAttribute('aria-checked', 'false')
+            expect(thirdItem).toHaveAttribute('aria-checked', 'true')
+        })
+    })
+
+    describe('FixedWidth', () => {
+        it('should render correctly', () => {
+            render(<FixedWidth expanded />)
+            const menu = screen.getByRole('menu')
+            expect(menu.parentElement).toHaveClass('menu-button__menu menu-button__menu--fix-width menu')
+        })
+    })
+
+    describe('ReverseMenuGrowsToTheLeft', () => {
+        it('should render correctly', () => {
+            render(<ReverseMenuGrowsToTheLeft expanded />)
+            const menu = screen.getByRole('menu')
+            expect(menu.parentElement).toHaveClass('menu-button__menu menu-button__menu--reverse')
+        })
+    })
+})

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

@@ -0,0 +1,10 @@
+export { default as EbayMenuButton } from './menu-button'
+export { default as EbayMenuButtonItem } from './menu-button-item'
+export { default as EbayMenuButtonSeparator } from './menu-button-separator'
+export { default as EbayMenuButtonLabel } from './menu-button-label'
+export type {
+    EbayMenuButtonVariant,
+    EbayMenuButtonProps,
+    MenuButtonProps,
+    LabelProps
+} from './types'

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

@@ -0,0 +1,4 @@
+import { EbayMenuItem } from '../ebay-menu'
+
+// We do this for useRovingIndex to work
+export default EbayMenuItem

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

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

package/src/ebay-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