@ebay/ui-core-react 7.3.0 → 7.3.2

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

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

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

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

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

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

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

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

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

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

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

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