@ebay/ui-core-react 7.3.2 → 7.3.4

package/src/ebay-segmented-buttons/__tests__/index.spec.tsx

@@ -1,42 +0,0 @@
-import React from 'react'
-import { fireEvent, render, screen } from '@testing-library/react'
-import { composeStories } from '@storybook/react'
-import * as stories from './index.stories'
-
-const { Default, WithIcons } = composeStories(stories)
-
-describe('<EbaySegmentedButtons>', () => {
-    it('should render the default', () => {
-        render(<Default />)
-
-        expect(screen.getByRole('list')).toBeInTheDocument()
-        expect(screen.getAllByRole('listitem')).toHaveLength(4)
-        expect(screen.getAllByRole('button')).toHaveLength(4)
-
-        const firstButton = screen.getByRole('button', { name: 'Q1' })
-        expect(firstButton).toBeInTheDocument()
-        expect(firstButton).toHaveAttribute('aria-current', 'true')
-    })
-
-    it('should handle button clicks', () => {
-        const spy = jest.fn()
-        render(<Default onChange={spy} />)
-
-        const firstButton = screen.getByRole('button', { name: 'Q1' })
-        const secondButton = screen.getByRole('button', { name: 'Q2' })
-        expect(secondButton).toBeInTheDocument()
-        expect(secondButton).not.toHaveAttribute('aria-current')
-
-        fireEvent.click(secondButton)
-
-        expect(spy).toHaveBeenCalledTimes(1)
-        expect(firstButton).not.toHaveAttribute('aria-current')
-        expect(secondButton).toHaveAttribute('aria-current', 'true')
-    })
-
-    it('should render buttons with icons', () => {
-        render(<WithIcons />)
-        expect(screen.getByRole('list')).toBeInTheDocument()
-        expect(screen.getAllByRole('listitem')).toHaveLength(2)
-    })
-})

package/src/ebay-segmented-buttons/__tests__/index.stories.tsx

@@ -1,52 +0,0 @@
-import React from 'react'
-import { Meta, StoryObj } from '@storybook/react'
-import { action } from '@storybook/addon-actions'
-import { EbaySegmentedButtons, EbaySegmentedButton as Button } from '..'
-import { EbayIcon } from '../../ebay-icon'
-
-export default {
-    title: 'Buttons/ebay-segmented-buttons',
-    component: EbaySegmentedButtons,
-    argTypes: {
-        size: {
-            options: ['large', 'regular'],
-            control: {
-                type: 'select'
-            },
-            table: {
-                defaultValue: {
-                    summary: "regular",
-                },
-            },
-        },
-        onChange: {
-            action: 'changed',
-            table: {
-                category: 'Events',
-                defaultValue: {
-                    summary: 'originalEvent, { index, value }'
-                }
-            }
-        }
-    }
-} as Meta<typeof EbaySegmentedButtons>
-
-export const Default: StoryObj<typeof EbaySegmentedButtons> = {
-    render: args => (
-        <EbaySegmentedButtons onChange={action('change')} {...args}>
-            <Button selected value="quarter1">Q1</Button>
-            <Button value="quarter2">Q2</Button>
-            <Button value="quarter3">Q3</Button>
-            <Button value="quarter4">Q4</Button>
-        </EbaySegmentedButtons>
-    )
-}
-
-export const WithIcons: StoryObj<typeof EbaySegmentedButtons> = {
-    render: args => (
-        <EbaySegmentedButtons onChange={action('change')} {...args}>
-            <Button selected><EbayIcon name="fullView24"/> Desktop</Button>
-            <Button><EbayIcon name="mobile24"/> Mobile</Button>
-        </EbaySegmentedButtons>
-    )
-}

package/src/ebay-segmented-buttons/button.tsx

@@ -1,39 +0,0 @@
-import React, { FC } from 'react'
-import classNames from 'classnames'
-import { excludeComponent, findComponent } from '../common/component-utils'
-import { EbayIcon } from '../ebay-icon'
-import { SegmentedButtonProps } from './types'
-
-const SegmentedButton: FC<SegmentedButtonProps> = ({
-    selected,
-    children,
-    className,
-    ...rest
-}) => {
-    const icon = findComponent(children, EbayIcon)
-
-    const iconWithText = () => {
-        const text = excludeComponent(children, EbayIcon)
-
-        return (
-            <span className="segmented-buttons__button-cell">
-                {icon}
-                <span>{text}</span>
-            </span>
-        )
-    }
-
-    return (
-        <li>
-            <button
-                className={classNames('segmented-buttons__button', className)}
-                aria-current={selected || undefined}
-                {...rest}
-            >
-                {icon ? iconWithText() : children}
-            </button>
-        </li>
-    )
-}
-
-export default SegmentedButton

package/src/ebay-segmented-buttons/index.ts

@@ -1,3 +0,0 @@
-export { default as EbaySegmentedButtons } from './segmented-buttons'
-export { default as EbaySegmentedButton } from './button'
-export type { SegmentedButtonsProps, SegmentedButtonProps, SegmentedButtonSize } from './types'

package/src/ebay-segmented-buttons/segmented-buttons.tsx

@@ -1,47 +0,0 @@
-import React, { cloneElement, FC, ReactElement, useState } from 'react'
-import classNames from 'classnames'
-import { SegmentedButtonProps, SegmentedButtonsProps } from './types'
-import { filterByType } from '../common/component-utils'
-import SegmentedButton from './button'
-
-const EbaySegmentedButtons: FC<SegmentedButtonsProps> = ({
-    size,
-    className,
-    onChange = () => {},
-    children,
-    ...rest
-}) => {
-    const buttons = filterByType(children, SegmentedButton)
-    const [selectedIndex, setSelectedIndex] = useState(
-        buttons.findIndex(button => button.props.selected) || 0
-    )
-
-    const handleClick = (e, index: number, value: string) => {
-        setSelectedIndex(index)
-        onChange(e, { index, value })
-    }
-
-    return (
-        <div
-            className={classNames('segmented-buttons', size && `segmented-buttons--${size}`, className)}
-            {...rest}
-        >
-            <ul>
-                {buttons.map((button: ReactElement, i) => {
-                    const {
-                        value,
-                        ...buttonRest
-                    }: SegmentedButtonProps = button.props
-
-                    return cloneElement(button, {
-                        ...buttonRest,
-                        onClick: e => handleClick(e, i, value),
-                        selected: i === selectedIndex
-                    } as SegmentedButtonProps)
-                })}
-            </ul>
-        </div>
-    )
-}
-
-export default EbaySegmentedButtons

package/src/ebay-segmented-buttons/types.ts

@@ -1,15 +0,0 @@
-import { ComponentProps } from 'react'
-import { EbayChangeEventHandler, EbayMouseEventHandler } from '../common/event-utils/types'
-
-export type SegmentedButtonProps = Omit<ComponentProps<'button'>, 'onClick'> & {
-    value?: string;
-    selected?: boolean;
-    onClick?: EbayMouseEventHandler<HTMLButtonElement>;
-}
-
-export type SegmentedButtonSize = 'large' | 'regular'
-
-export type SegmentedButtonsProps = Omit<ComponentProps<'div'>, 'onChange'> & {
-    size?: SegmentedButtonSize;
-    onChange?: EbayChangeEventHandler<HTMLButtonElement, { index: number, value?: string }>;
-}

package/src/ebay-select/__tests__/__snapshots__/render.spec.tsx.snap

@@ -1,16 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`ebay-select rendering renders basic story correctly 1`] = `
-<svg
-  aria-hidden="true"
-  class="icon icon--12"
-  focusable="false"
-  height="8"
-  width="8"
-  xmlns="http://www.w3.org/2000/svg"
->
-  <use
-    xlink:href="#icon-chevron-down-12"
-  />
-</svg>
-`;

package/src/ebay-select/__tests__/index.spec.tsx

@@ -1,99 +0,0 @@
-import React from 'react'
-import { fireEvent, render } from '@testing-library/react'
-import { EbaySelect, EbaySelectOption } from '../index'
-import { eventOfType } from '../../common/event-utils/__tests__/helpers'
-
-const EbaySelectWith3Options = (props) => (
-    <EbaySelect {...props}>
-        <EbaySelectOption value="">Please Select</EbaySelectOption>
-        <EbaySelectOption value="1">Option 1</EbaySelectOption>
-        <EbaySelectOption value="2">Option 2</EbaySelectOption>
-        <EbaySelectOption value="3">Option 3</EbaySelectOption>
-    </EbaySelect>
-)
-describe('<EbaySelect>', () => {
-    describe('on render', () => {
-        it('should pass a proper className to a wrapper element', () => {
-            const wrapper = render(<EbaySelectWith3Options name="form-select" value="1" className="blueText" />)
-            expect(wrapper.container.querySelectorAll('span')[0]).toHaveClass('blueText')
-        })
-
-        it('should pass a `disabled` prop to a `select` element', () => {
-            const wrapper = render(<EbaySelectWith3Options name="form-select" value="1" disabled />)
-            expect(wrapper.getByRole('combobox')).toHaveAttribute('disabled', '')
-        })
-    })
-    describe('on blur events', () => {
-        it('should have "inline" class after blur event when no value is present', () => {
-            const { container, getByRole } = render(<EbaySelectWith3Options floatingLabel="Test label" />)
-            fireEvent.blur(getByRole('combobox'))
-            expect(container.querySelector('.floating-label__label')).toHaveClass('floating-label__label--inline')
-        })
-        it('should not have "inline" class after blur event when no value is present', () => {
-            const { container, getByRole } = render(<EbaySelectWith3Options floatingLabel="Test label" defaultValue="1" />)
-            fireEvent.blur(getByRole('combobox'))
-            expect(container.querySelector('.floating-label__label')).not.toHaveClass('floating-label__label--inline')
-        })
-    })
-    describe('on select-dropdown change', () => {
-        it('should fire onChange event', () => {
-            const spy = jest.fn()
-            const wrapper = render(<EbaySelectWith3Options name="foo" value="1" onChange={spy} />)
-            const index = 3
-            const selectedValue = '3'
-            simulateSelectChange(wrapper, selectedValue, index)
-
-            expect(spy).toHaveBeenCalledTimes(1)
-            expect(spy).toHaveBeenCalledWith(eventOfType('change'), { index, selected: [selectedValue] })
-        })
-    })
-
-    describe('on uncontrolled component', () => {
-        let wrapper
-        let spy
-
-        beforeEach(() => {
-            spy = jest.fn()
-            wrapper = render(<EbaySelectWith3Options name="foo" defaultValue="2" onChange={spy} />)
-        })
-
-        it('should set initial selected value', () => {
-            expect(wrapper.getByRole('combobox')).toHaveValue('2')
-        })
-
-        it('should automatically render the newly selected value when select changes', () => {
-            simulateSelectChange(wrapper, '3', 3)
-
-            expect(wrapper.getByRole('combobox')).toHaveValue('3')
-        })
-    })
-
-    describe('in case for controlled component', () => {
-        let wrapper
-        let spy
-
-        beforeEach(() => {
-            spy = jest.fn()
-            wrapper = render(<EbaySelectWith3Options name="foo" value="2" onChange={spy} />)
-        })
-
-        it('should set initial selected value', () => {
-            expect(wrapper.getByRole('combobox')).toHaveValue('2')
-        })
-
-        it('should not automatically update the newly selected value when select changes', () => {
-            simulateSelectChange(wrapper, '3', 3)
-
-            expect(wrapper.getByRole('combobox')).toHaveValue('2')
-        })
-    })
-})
-
-function simulateSelectChange(wrapper, selectedValue, selectedIndex) {
-    fireEvent.change(wrapper.getByRole('combobox'), {
-        target: {
-            value: selectedValue,
-            selectedIndex: selectedIndex
-        }
-    })
-}

package/src/ebay-select/__tests__/index.stories.tsx

@@ -1,221 +0,0 @@
-import React, { ChangeEvent, useState } from 'react'
-import { action } from '@storybook/addon-actions'
-import { EbayButton } from '../../ebay-button'
-import { EbaySelect, EbaySelectOption, ChangeEventProps } from '../index'
-
-export default {
-    title: 'form input/ebay-select'
-}
-
-export const Basic = () => (
-    <>
-        <EbaySelect
-            name="formSelect"
-            onChange={(e: ChangeEvent, props: ChangeEventProps) => action('onChange')(e, props)}
-        >
-            <EbaySelectOption value="1">Option 1</EbaySelectOption>
-            <EbaySelectOption value="2">Option 2</EbaySelectOption>
-            <EbaySelectOption value="3">Option 3</EbaySelectOption>
-        </EbaySelect>
-    </>
-)
-
-export const InvalidSelect = {
-    render: () => (
-        <>
-            <EbaySelect
-                name="formSelect"
-                value="3"
-                aria-invalid="true"
-                onChange={action('select-change')}
-                aria-label="Please select a option"
-            >
-                <EbaySelectOption value="1">Option 1</EbaySelectOption>
-                <EbaySelectOption value="2">Option 2</EbaySelectOption>
-                <EbaySelectOption value="3">Option 3</EbaySelectOption>
-            </EbaySelect>
-        </>
-    ),
-
-    name: 'Invalid select'
-}
-
-export const GroupedOptions = {
-    render: () => (
-        <>
-            <EbaySelect name="formSelect" onChange={action('select-change')}>
-                <EbaySelectOption value="pre">Option PRE</EbaySelectOption>
-                <EbaySelectOption optgroup="Group 1" value="1">
-                    Option 1[Group 1]
-                </EbaySelectOption>
-                <EbaySelectOption optgroup="Group 1" value="2">
-                    Option 2[Group 1]
-                </EbaySelectOption>
-                <EbaySelectOption optgroup="Group 1" value="3">
-                    Option 3[Group 1]
-                </EbaySelectOption>
-                <EbaySelectOption value="mid">Option MID</EbaySelectOption>
-                <EbaySelectOption optgroup="Group 2" value="4">
-                    Option 4[Group 2]
-                </EbaySelectOption>
-                <EbaySelectOption optgroup="Group 2" value="5">
-                    Option 5[Group 2]
-                </EbaySelectOption>
-                <EbaySelectOption optgroup="Group 2" value="6">
-                    Option 6[Group 2]
-                </EbaySelectOption>
-                <EbaySelectOption optgroup="Group 3" value="7">
-                    Option 7[Group 3]
-                </EbaySelectOption>
-                <EbaySelectOption optgroup="Group 3" value="8">
-                    Option 8[Group 3]
-                </EbaySelectOption>
-                <EbaySelectOption optgroup="Group 3" value="9">
-                    Option 9[Group 3]
-                </EbaySelectOption>
-                <EbaySelectOption value="post">Option POST</EbaySelectOption>
-            </EbaySelect>
-        </>
-    ),
-
-    name: 'Grouped options'
-}
-
-export const BorderlessSelect = {
-    render: () => (
-        <>
-            <EbaySelect borderless defaultValue="4" name="formSelect" onChange={action('select-change')}>
-                <EbaySelectOption value="1">Option 1</EbaySelectOption>
-                <EbaySelectOption value="2">Option 2</EbaySelectOption>
-                <EbaySelectOption value="3">Option 3</EbaySelectOption>
-            </EbaySelect>
-        </>
-    ),
-
-    name: 'Borderless select'
-}
-
-export const DisabledSelect = {
-    render: () => (
-        <>
-            <EbaySelect className="customclass" disabled name="formSelect">
-                <EbaySelectOption value="1">Option 1</EbaySelectOption>
-                <EbaySelectOption value="2">Option 2</EbaySelectOption>
-            </EbaySelect>
-        </>
-    ),
-
-    name: 'Disabled select'
-}
-
-export const UncontrolledComponentWithDefaultValue = {
-    render: () => (
-        <>
-            <EbaySelect name="formSelect" defaultValue="3" onChange={action('select-change')}>
-                <EbaySelectOption value="1">Option 1</EbaySelectOption>
-                <EbaySelectOption value="2">Option 2</EbaySelectOption>
-                <EbaySelectOption value="3">Option 3</EbaySelectOption>
-            </EbaySelect>
-        </>
-    ),
-
-    name: 'Uncontrolled component with defaultValue'
-}
-
-export const ControlledComponent = {
-    render: () => {
-        const TestControlledComponent = () => {
-            const [selectedValue, setSelectedValue] = useState('UK')
-            const handleChange = (
-                e: ChangeEvent<HTMLSelectElement>,
-                {
-                    index,
-                    selected
-                }: {
-          index: number;
-          selected: string[];
-        }
-            ) => {
-                setSelectedValue(selected[0])
-            }
-
-            return (
-                <div style={{ width: '500px' }}>
-                    <div style={{ display: 'flex', alignItems: 'center' }}>
-                        <EbaySelect name="selectCountry" value={selectedValue} onChange={handleChange}>
-                            <EbaySelectOption value="DE">DE</EbaySelectOption>
-                            <EbaySelectOption value="US">US</EbaySelectOption>
-                            <EbaySelectOption value="UK">UK</EbaySelectOption>
-                            <EbaySelectOption value="AU">AU</EbaySelectOption>
-                        </EbaySelect>
-
-                        <div style={{ margin: '0 2rem' }}>
-                            Current selected: <strong>{selectedValue}</strong>
-                        </div>
-                        <EbayButton onClick={() => setSelectedValue('US')}>Set selected to US</EbayButton>
-                    </div>
-                </div>
-            )
-        }
-
-        return (
-            <>
-                <TestControlledComponent />
-            </>
-        )
-    },
-
-    name: 'Controlled component'
-}
-
-export const FloatingLabel = {
-    render: () => (
-        <>
-            <EbaySelect name="formSelect" onChange={action('select-change')} floatingLabel="Label">
-                <EbaySelectOption value="">Choose an option</EbaySelectOption>
-                <EbaySelectOption value="1">Option 1</EbaySelectOption>
-                <EbaySelectOption value="2">Option 2</EbaySelectOption>
-                <EbaySelectOption value="3">Option 3</EbaySelectOption>
-            </EbaySelect>
-        </>
-    ),
-
-    name: 'Floating label'
-}
-
-export const InvalidFloatingLabelSelect = {
-    render: () => (
-        <>
-            <EbaySelect
-                name="formSelect"
-                value="3"
-                aria-invalid="true"
-                onChange={action('select-change')}
-                floatingLabel="Invalid label"
-                aria-label="Please select a option"
-            >
-                <EbaySelectOption value="1">Option 1</EbaySelectOption>
-                <EbaySelectOption value="2">Option 2</EbaySelectOption>
-                <EbaySelectOption value="3">Option 3</EbaySelectOption>
-            </EbaySelect>
-        </>
-    ),
-
-    name: 'Invalid floating label select'
-}
-
-export const LargeSelect = () => (
-    <>
-        <EbaySelect
-            name="formSelect"
-            onChange={action('select-change')}
-            floatingLabel="Label"
-            inputSize="large"
-        >
-            <EbaySelectOption value="">Choose an option</EbaySelectOption>
-            <EbaySelectOption value="1">Option 1</EbaySelectOption>
-            <EbaySelectOption value="2">Option 2</EbaySelectOption>
-            <EbaySelectOption value="3">Option 3</EbaySelectOption>
-        </EbaySelect>
-    </>
-)

package/src/ebay-select/__tests__/render.spec.tsx

@@ -1,92 +0,0 @@
-import React from 'react'
-import { render } from '@testing-library/react'
-import { composeStory } from '@storybook/react'
-import Meta, { Basic, InvalidSelect, BorderlessSelect, DisabledSelect, LargeSelect, FloatingLabel, InvalidFloatingLabelSelect, GroupedOptions } from './index.stories'
-
-const BasicStory = composeStory(Basic, Meta)
-const InvalidSelectStory = composeStory(InvalidSelect, Meta)
-const BorderlessSelectStory = composeStory(BorderlessSelect, Meta)
-const DisabledSelectStory = composeStory(DisabledSelect, Meta)
-const LargeSelectStory = composeStory(LargeSelect, Meta)
-const FloatingLabelStory = composeStory(FloatingLabel, Meta)
-const InvalidFloatingLabelSelectStory = composeStory(InvalidFloatingLabelSelect, Meta)
-const GroupedOptionsStory = composeStory(GroupedOptions, Meta)
-
-describe('ebay-select rendering', () => {
-    it('renders basic story correctly', () => {
-        const { container } = render(<BasicStory />)
-        const selectContainer = container.querySelector('.select')
-        const select = selectContainer.querySelector('select')
-        expect(select).toHaveAttribute('name', 'formSelect')
-        const [option1, option2, option3] = select.querySelectorAll('option')
-        expect(option1).toHaveAttribute('value', '1')
-        expect(option1).toHaveTextContent('Option 1')
-        expect(option2).toHaveAttribute('value', '2')
-        expect(option2).toHaveTextContent('Option 2')
-        expect(option3).toHaveAttribute('value', '3')
-        expect(option3).toHaveTextContent('Option 3')
-        const svg = selectContainer.querySelector('svg')
-        expect(svg).toMatchSnapshot()
-    })
-
-    it('renders invalid select story correctly', () => {
-        const { container } = render(<InvalidSelectStory />)
-        const select = container.querySelector('select')
-        expect(select).toHaveAttribute('aria-invalid', 'true')
-        expect(select).toHaveAttribute('aria-label', 'Please select a option')
-    })
-
-    it('renders borderless select story correctly', () => {
-        const { container } = render(<BorderlessSelectStory />)
-        const selectContainer = container.querySelector('.select')
-        expect(selectContainer).toHaveClass('select--borderless')
-        const select = selectContainer.querySelector('select')
-        const options = select.querySelectorAll('option')
-        expect(options.length).toBe(3)
-    })
-
-    it('renders disabled select story correctly', () => {
-        const { container } = render(<DisabledSelectStory />)
-        const select = container.querySelector('select')
-        expect(select).toHaveAttribute('disabled', '')
-        const options = select.querySelectorAll('option')
-        expect(options.length).toBe(2)
-    })
-
-    it('renders large select story correctly', () => {
-        const { container } = render(<LargeSelectStory />)
-        const selectContainer = container.querySelector('.select')
-        expect(selectContainer).toHaveClass('select--large')
-        const select = selectContainer.querySelector('select')
-        const options = select.querySelectorAll('option')
-        expect(options.length).toBe(4)
-    })
-
-    it('renders floating label story correctly', () => {
-        const { container } = render(<FloatingLabelStory />)
-        const floatingLabelContainer = container.querySelector('.floating-label')
-        const label = floatingLabelContainer.querySelector('.floating-label__label')
-        expect(label).toHaveTextContent('Label')
-        const selectContainer = floatingLabelContainer.querySelector('.select')
-        const select = selectContainer.querySelector('select')
-        const options = select.querySelectorAll('option')
-        expect(options.length).toBe(4)
-    })
-
-    it('renders invalid floating label select story correctly', () => {
-        const { container } = render(<InvalidFloatingLabelSelectStory />)
-        const floatingLabelContainer = container.querySelector('.floating-label')
-        const label = floatingLabelContainer.querySelector('.floating-label__label')
-        expect(label).toHaveClass('floating-label__label--invalid')
-        expect(label).toHaveTextContent('Invalid label')
-    })
-
-    it('renders grouped options story correctly', () => {
-        const { container } = render(<GroupedOptionsStory />)
-        const select = container.querySelector('select')
-        const options = select.querySelectorAll('option')
-        expect(options.length).toBe(12)
-        const optgroup = select.querySelectorAll('optgroup')
-        expect(optgroup.length).toBe(3)
-    })
-})

package/src/ebay-select/ebay-select-option.tsx

@@ -1,10 +0,0 @@
-import React, { ComponentProps, FC } from 'react'
-
-type OptionProps = ComponentProps<'option'> & {
-    optgroup?: string;
-};
-
-const EbaySelectOption: FC<OptionProps> = ({ children, ...rest }) =>
-    <option {...rest}>{children}</option>
-
-export default EbaySelectOption