@ebay/ui-core-react 7.3.2 → 7.3.4

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

@@ -1,183 +0,0 @@
-import React, { ChangeEvent } from 'react'
-import { action } from '@storybook/addon-actions'
-
-import { EbayListboxButton, EbayListboxButtonOption } from '../index'
-import StateFullTest from './statefull-test'
-import { ChangeEventProps } from '../listbox-button'
-
-export default {
-    title: 'buttons/ebay-listbox-button'
-}
-
-export const Default = () => (
-    <>
-        <EbayListboxButton
-            value="BB"
-            onChange={(e: ChangeEvent, props: ChangeEventProps) => action('onChange')(e, props)}
-            onCollapse={() => action('onCollapse')()}
-            onExpand={() => action('onExpand')()}
-        >
-            <EbayListboxButtonOption value="AA">Option 1</EbayListboxButtonOption>
-            <EbayListboxButtonOption value="BB">Option 2</EbayListboxButtonOption>
-            <EbayListboxButtonOption value="CC">Option 3</EbayListboxButtonOption>
-        </EbayListboxButton>
-    </>
-)
-
-export const PreselectedIndex = () => (
-    <>
-        <EbayListboxButton selected={1}>
-            <EbayListboxButtonOption value="AA">Option 1</EbayListboxButtonOption>
-            <EbayListboxButtonOption value="BB">Option 2</EbayListboxButtonOption>
-            <EbayListboxButtonOption value="CC">Option 3</EbayListboxButtonOption>
-        </EbayListboxButton>
-    </>
-)
-
-export const DefaultNoSelectedOption = () => (
-    <>
-        <EbayListboxButton
-            onChange={(e: ChangeEvent, props: ChangeEventProps) => action('onChange')(e, props)}
-        >
-            <EbayListboxButtonOption value="AA">Option 1</EbayListboxButtonOption>
-            <EbayListboxButtonOption value="BB">Option 2</EbayListboxButtonOption>
-            <EbayListboxButtonOption value="CC">Option 3</EbayListboxButtonOption>
-        </EbayListboxButton>
-    </>
-)
-
-export const DefaultWithA11YPrefix = {
-    render: () => {
-        const listboxBtnLabel = 'listbox-button__label'
-
-        return (
-            <>
-                <label id={listboxBtnLabel}>Select these items:</label>
-                <br />
-                <br />
-                <EbayListboxButton
-                    value="BB"
-                    prefixId={listboxBtnLabel}
-                    onChange={(e, props) => action('onChange')(e, props)}
-                >
-                    <EbayListboxButtonOption value="AA">Option 1</EbayListboxButtonOption>
-                    <EbayListboxButtonOption value="BB">Option 2</EbayListboxButtonOption>
-                    <EbayListboxButtonOption value="CC">Option 3</EbayListboxButtonOption>
-                </EbayListboxButton>
-            </>
-        )
-    },
-    name: 'Default with A11y Prefix'
-}
-
-export const DisabledState = () => (
-    <>
-        <EbayListboxButton value="BB" disabled>
-            <EbayListboxButtonOption value="AA">Option 1</EbayListboxButtonOption>
-            <EbayListboxButtonOption value="BB">Option 2</EbayListboxButtonOption>
-            <EbayListboxButtonOption value="CC">Option 3</EbayListboxButtonOption>
-        </EbayListboxButton>
-    </>
-)
-
-export const InvalidState = () => (
-    <>
-        <EbayListboxButton value="BB" aria-invalid="true">
-            <EbayListboxButtonOption value="AA">Option 1</EbayListboxButtonOption>
-            <EbayListboxButtonOption value="BB">Option 2</EbayListboxButtonOption>
-            <EbayListboxButtonOption value="CC">Option 3</EbayListboxButtonOption>
-        </EbayListboxButton>
-    </>
-)
-
-export const Borderless = () => (
-    <>
-        <EbayListboxButton value="BB" borderless>
-            <EbayListboxButtonOption value="AA">Option 1</EbayListboxButtonOption>
-            <EbayListboxButtonOption value="BB">Option 2</EbayListboxButtonOption>
-            <EbayListboxButtonOption value="CC">Option 3</EbayListboxButtonOption>
-        </EbayListboxButton>
-    </>
-)
-
-export const Fluid = () => (
-    <div style={{ width: '500px' }}>
-        <EbayListboxButton value="BB" fluid>
-            <EbayListboxButtonOption value="AA">Option 1</EbayListboxButtonOption>
-            <EbayListboxButtonOption value="BB">Option 2</EbayListboxButtonOption>
-            <EbayListboxButtonOption value="CC">Option 3</EbayListboxButtonOption>
-        </EbayListboxButton>
-    </div>
-)
-
-export const StatefullComponent = () => (
-    <>
-        <StateFullTest />
-    </>
-)
-
-export const TooManyOptions = () => (
-    <>
-        <EbayListboxButton value="BB" maxHeight="200px">
-            <EbayListboxButtonOption value="AA">Option 1</EbayListboxButtonOption>
-            <EbayListboxButtonOption value="BB">Option 2</EbayListboxButtonOption>
-            <EbayListboxButtonOption value="CC">Option 3</EbayListboxButtonOption>
-            <EbayListboxButtonOption value="DD">Option 4</EbayListboxButtonOption>
-            <EbayListboxButtonOption value="EE">Option 5</EbayListboxButtonOption>
-            <EbayListboxButtonOption value="FF">Option 6</EbayListboxButtonOption>
-            <EbayListboxButtonOption value="GG">Option 7</EbayListboxButtonOption>
-            <EbayListboxButtonOption value="HH">Option 8</EbayListboxButtonOption>
-            <EbayListboxButtonOption value="II">Option 9</EbayListboxButtonOption>
-            <EbayListboxButtonOption value="JJ">Option 10</EbayListboxButtonOption>
-            <EbayListboxButtonOption value="KK">Option 11</EbayListboxButtonOption>
-            <EbayListboxButtonOption value="LL">Option 12</EbayListboxButtonOption>
-            <EbayListboxButtonOption value="MM">Option 13</EbayListboxButtonOption>
-            <EbayListboxButtonOption value="NN">Option 14</EbayListboxButtonOption>
-            <EbayListboxButtonOption value="OO">Option 15</EbayListboxButtonOption>
-            <EbayListboxButtonOption value="PP">Option 16</EbayListboxButtonOption>
-            <EbayListboxButtonOption value="QQ">Option 17</EbayListboxButtonOption>
-            <EbayListboxButtonOption value="RR">Option 18</EbayListboxButtonOption>
-            <EbayListboxButtonOption value="SS">Option 19</EbayListboxButtonOption>
-            <EbayListboxButtonOption value="TT">Option 20</EbayListboxButtonOption>
-            <EbayListboxButtonOption value="UU">Option 21</EbayListboxButtonOption>
-            <EbayListboxButtonOption value="VV">Option 22</EbayListboxButtonOption>
-            <EbayListboxButtonOption value="YY">Option 23</EbayListboxButtonOption>
-            <EbayListboxButtonOption value="XX">Option 24</EbayListboxButtonOption>
-            <EbayListboxButtonOption value="YY">Option 25</EbayListboxButtonOption>
-            <EbayListboxButtonOption value="ZZ">Option 26</EbayListboxButtonOption>
-            <EbayListboxButtonOption value="11">Option 27</EbayListboxButtonOption>
-            <EbayListboxButtonOption value="22">Option 28</EbayListboxButtonOption>
-            <EbayListboxButtonOption value="33">Option 29</EbayListboxButtonOption>
-            <EbayListboxButtonOption value="44">Option 30</EbayListboxButtonOption>
-            <EbayListboxButtonOption value="55">Option 31</EbayListboxButtonOption>
-            <EbayListboxButtonOption value="66">Option 32</EbayListboxButtonOption>
-            <EbayListboxButtonOption value="77">Option 33</EbayListboxButtonOption>
-            <EbayListboxButtonOption value="88">Option 34</EbayListboxButtonOption>
-            <EbayListboxButtonOption value="99">Option 35</EbayListboxButtonOption>
-            <EbayListboxButtonOption value="100">Option 36</EbayListboxButtonOption>
-            <EbayListboxButtonOption value="101">Option 37</EbayListboxButtonOption>
-            <EbayListboxButtonOption value="102">Option 38</EbayListboxButtonOption>
-            <EbayListboxButtonOption value="102">Option 39</EbayListboxButtonOption>
-        </EbayListboxButton>
-    </>
-)
-
-export const PrefixLabel = () => (
-    <>
-        <EbayListboxButton prefixLabel="Selected:" value="BB">
-            <EbayListboxButtonOption value="AA">Option 1</EbayListboxButtonOption>
-            <EbayListboxButtonOption value="BB">Option 2</EbayListboxButtonOption>
-            <EbayListboxButtonOption value="CC">Option 3</EbayListboxButtonOption>
-        </EbayListboxButton>
-    </>
-)
-
-export const FloatingLabel = () => (
-    <>
-        <EbayListboxButton floatingLabel="Select" value="BB">
-            <EbayListboxButtonOption value="AA">Option 1</EbayListboxButtonOption>
-            <EbayListboxButtonOption value="BB">Option 2</EbayListboxButtonOption>
-            <EbayListboxButtonOption value="CC">Option 3</EbayListboxButtonOption>
-        </EbayListboxButton>
-    </>
-)

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

@@ -1,140 +0,0 @@
-import React from 'react'
-import { render, within } from '@testing-library/react'
-import { composeStories } from '@storybook/react'
-import * as stories from './index.stories'
-
-const {
-    Default,
-    PreselectedIndex,
-    DefaultNoSelectedOption,
-    Borderless,
-    Fluid,
-    DisabledState,
-    InvalidState,
-    PrefixLabel,
-    FloatingLabel
-} = composeStories(stories)
-
-describe('ebay-listbox-button rendering', () => {
-    it('renders default listbox button correctly', () => {
-        const { container } = render(<Default />)
-
-        const listboxButton: HTMLElement = container.querySelector('.listbox-button')
-        const button = within(listboxButton).getByRole('button', { name: 'Option 2' })
-        expect(button).toHaveClass('btn btn--form')
-        expect(button).toHaveAttribute('aria-expanded', 'false')
-        expect(button).toHaveAttribute('aria-haspopup', 'listbox')
-        expect(button).toHaveAttribute('type', 'button')
-        expect(button.querySelector('svg')).toMatchSnapshot()
-
-        const select = listboxButton.querySelector('select')
-        expect(select).toHaveClass('listbox-button__native')
-        expect(select).toHaveAttribute('hidden', '')
-
-        const options = select.querySelectorAll('option')
-        expect(options[0]).toHaveValue('AA')
-        expect(options[1]).toHaveValue('BB')
-        expect(options[2]).toHaveValue('CC')
-    })
-
-    it('renders preselected index correctly', () => {
-        const { container } = render(<PreselectedIndex />)
-
-        const listboxButton: HTMLElement = container.querySelector('.listbox-button')
-        const button = within(listboxButton).getByRole('button', { name: 'Option 2' })
-        expect(button).toHaveClass('btn btn--form')
-        expect(button).toHaveAttribute('aria-expanded', 'false')
-        expect(button).toHaveAttribute('aria-haspopup', 'listbox')
-        expect(button).toHaveAttribute('type', 'button')
-        expect(button.querySelector('svg')).toMatchSnapshot()
-    })
-
-    it('renders default listbox button without selected option correctly', () => {
-        const { container } = render(<DefaultNoSelectedOption />)
-
-        const listboxButton: HTMLElement = container.querySelector('.listbox-button')
-        const button = within(listboxButton).getByRole('button', { name: '-' })
-        expect(button).toHaveClass('btn btn--form')
-        expect(button).toHaveAttribute('aria-expanded', 'false')
-        expect(button).toHaveAttribute('aria-haspopup', 'listbox')
-        expect(button).toHaveAttribute('type', 'button')
-        expect(button.querySelector('svg')).toMatchSnapshot()
-    })
-
-    it('renders borderless listbox button correctly', () => {
-        const { container } = render(<Borderless />)
-
-        const listboxButton: HTMLElement = container.querySelector('.listbox-button')
-        const button = within(listboxButton).getByRole('button', { name: 'Option 2' })
-        expect(button).toHaveClass('btn btn--borderless')
-        expect(button).toHaveAttribute('aria-expanded', 'false')
-        expect(button).toHaveAttribute('aria-haspopup', 'listbox')
-        expect(button).toHaveAttribute('type', 'button')
-        expect(button.querySelector('svg')).toMatchSnapshot()
-    })
-
-    it('renders fluid listbox button correctly', () => {
-        const { container } = render(<Fluid />)
-
-        const listboxButton: HTMLElement = container.querySelector('.listbox-button')
-        expect(listboxButton).toHaveClass('listbox-button--fluid')
-        const button = within(listboxButton).getByRole('button', { name: 'Option 2' })
-        expect(button).toHaveClass('btn btn--form')
-        expect(button).toHaveAttribute('aria-expanded', 'false')
-        expect(button).toHaveAttribute('aria-haspopup', 'listbox')
-        expect(button).toHaveAttribute('type', 'button')
-        expect(button.querySelector('svg')).toMatchSnapshot()
-    })
-
-    it('renders disabled state correctly', () => {
-        const { container } = render(<DisabledState />)
-
-        const listboxButton: HTMLElement = container.querySelector('.listbox-button')
-        const button = within(listboxButton).getByRole('button', { name: 'Option 2' })
-        expect(button).toHaveClass('btn btn--form')
-        expect(button).toHaveAttribute('aria-expanded', 'false')
-        expect(button).toHaveAttribute('aria-haspopup', 'listbox')
-        expect(button).toHaveAttribute('type', 'button')
-        expect(button).toHaveAttribute('disabled')
-        expect(button.querySelector('svg')).toMatchSnapshot()
-    })
-
-    it('renders invalid state correctly', () => {
-        const { container } = render(<InvalidState />)
-
-        const listboxButton: HTMLElement = container.querySelector('.listbox-button')
-        const button = within(listboxButton).getByRole('button', { name: 'Option 2' })
-        expect(button).toHaveClass('btn btn--form')
-        expect(button).toHaveAttribute('aria-expanded', 'false')
-        expect(button).toHaveAttribute('aria-haspopup', 'listbox')
-        expect(button).toHaveAttribute('aria-invalid', 'true')
-        expect(button).toHaveAttribute('type', 'button')
-        expect(button.querySelector('svg')).toMatchSnapshot()
-    })
-
-    it('renders prefix label correctly', () => {
-        const { container } = render(<PrefixLabel />)
-
-        const listboxButton: HTMLElement = container.querySelector('.listbox-button')
-        const button = within(listboxButton).getByRole('button', { name: 'Selected: Option 2' })
-        expect(button).toHaveClass('btn btn--form')
-        expect(button).toHaveAttribute('aria-expanded', 'false')
-        expect(button).toHaveAttribute('aria-haspopup', 'listbox')
-        expect(button).toHaveAttribute('type', 'button')
-        expect(button.querySelector('svg')).toMatchSnapshot()
-    })
-
-    it('renders floating label correctly', () => {
-        const { container } = render(<FloatingLabel />)
-
-        const listboxButton: HTMLElement = container.querySelector('.listbox-button')
-        const button = within(listboxButton).getByRole('button')
-        expect(button).toHaveClass('btn btn--form')
-        expect(button).toHaveAttribute('aria-expanded', 'false')
-        expect(button).toHaveAttribute('aria-haspopup', 'listbox')
-        expect(button).toHaveAttribute('type', 'button')
-        expect(button.querySelector('.btn__floating-label')).toHaveTextContent('Select')
-        expect(button.querySelector('.btn__text')).toHaveTextContent('Option 2')
-        expect(button.querySelector('svg')).toMatchSnapshot()
-    })
-})

package/src/ebay-listbox-button/__tests__/statefull-test.tsx

@@ -1,34 +0,0 @@
-import React, { useState } from 'react'
-import { EbayListboxButton, EbayListboxButtonOption } from '../index'
-
-
-const StateFullTest = () => {
-    const [selectedValue, setSelectedValue] = useState(`BB`)
-    const onRadioChange = (value) => {
-        setSelectedValue(value)
-    }
-    return (
-        <div>
-            <EbayListboxButton
-                value={selectedValue}
-            >
-                <EbayListboxButtonOption value="California">California</EbayListboxButtonOption>
-                <EbayListboxButtonOption value="New York">New York</EbayListboxButtonOption>
-                <EbayListboxButtonOption value="Washington">Washington</EbayListboxButtonOption>
-            </EbayListboxButton>
-            <label>
-                <input
-                    type="radio"
-                    onClick={() => onRadioChange(`California`)}
-                    name="listbox-value" />California
-            </label>
-            <label>
-                <input type="radio" onClick={() => onRadioChange(`New York`)} name="listbox-value" />New York
-            </label>
-            <label>
-                <input type="radio" onClick={() => onRadioChange(`Washington`)} name="listbox-value" />Washington
-            </label>
-        </div>)
-}
-
-export default StateFullTest

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

@@ -1,2 +0,0 @@
-export { default as EbayListboxButton } from './listbox-button'
-export { default as EbayListboxButtonOption } from './listbox-button-option'

package/src/ebay-listbox-button/listbox-button-option.tsx

@@ -1,40 +0,0 @@
-import React, { ComponentProps, FC, MouseEvent, RefObject } from 'react'
-import classNames from 'classnames'
-import { EbayIcon } from '../ebay-icon'
-
-type EbayListboxButtonOptionProps = ComponentProps<'input'> & {
-    selected?: boolean;
-    index?: number;
-    onClick?: (event: MouseEvent<HTMLDivElement>, value: any, index: number) => void;
-    innerRef?: RefObject<HTMLDivElement>;
-};
-
-const ListboxOption: FC<EbayListboxButtonOptionProps> = ({
-    value,
-    children,
-    selected,
-    onClick,
-    index,
-    innerRef,
-    className,
-    id,
-    ...rest
-}) => {
-    const wrapperClassName = classNames(`listbox-button__option`, className,
-        { 'listbox-button__option--active': selected })
-    return (
-        <div
-            {...rest}
-            className={wrapperClassName}
-            role="option"
-            id={id || `listbox_btn_${value}_${index}`}
-            aria-selected={selected}
-            ref={innerRef}
-            onClick={(e) => {onClick(e, value, index)}}
-        >
-            <span className="listbox-button__value">{children}</span>
-            <EbayIcon name="tick16" />
-        </div>)
-}
-
-export default ListboxOption