@ebay/ui-core-react 7.3.2 → 7.3.4

package/src/ebay-progress-stepper/ebay-progress-step.tsx

@@ -1,58 +0,0 @@
-import React, { Children, FC, ReactElement, ReactNode } from 'react'
-import classNames from 'classnames'
-import { EbayIcon, Icon } from '../ebay-icon'
-import { StepState } from './types'
-import { EbayProgressTitle } from './index'
-
-export type EbayProgressStepProps = {
-    state?: StepState;
-    current?: boolean;
-    className?: string;
-    children?: ReactNode;
-}
-
-const typeIcons: { [key in StepState]: Icon } = {
-    complete: 'stepperConfirmation24',
-    attention: 'stepperAttention24',
-    upcoming: 'stepperUpcoming24',
-    active: 'stepperConfirmation24'
-}
-
-const EbayProgressStep: FC<EbayProgressStepProps> = ({
-    current,
-    state = 'complete',
-    children,
-    className,
-    ...rest
-}) => {
-    const childrenArray = Children.toArray(children) as ReactElement[]
-    const title = childrenArray.find(child => child.type === EbayProgressTitle)
-    const text = childrenArray.filter(child => child.type !== EbayProgressTitle)
-    const stepClassNames = classNames(
-        className,
-        'progress-stepper__item',
-        { 'progress-stepper__item--attention': state === 'attention' }
-    )
-    const icon = typeIcons[state]
-    const ariaLabel = current ? 'current' : state
-
-    return (
-        <div
-            {...rest}
-            className={stepClassNames}
-            role="listitem"
-            aria-current={current ? 'step' : undefined}
-        >
-            <div className="progress-stepper__icon">
-                {icon && <EbayIcon name={icon} aria-label={ariaLabel} />}
-            </div>
-
-            <div className="progress-stepper__text">
-                {title}
-                {text}
-            </div>
-        </div>
-    )
-}
-
-export default EbayProgressStep

package/src/ebay-progress-stepper/ebay-progress-stepper.tsx

@@ -1,68 +0,0 @@
-import React, { Children, cloneElement, FC, Fragment, ReactElement, ReactNode } from 'react'
-import classNames from 'classnames'
-import { StepperDirection, StepState } from './types'
-import { EbayProgressStepProps } from './ebay-progress-step'
-
-type ProgressStepperProps = {
-    direction?: StepperDirection;
-    defaultState?: StepState;
-    className?: string;
-    children?: ReactNode;
-}
-
-const EbayProgressStepper: FC<ProgressStepperProps> = ({
-    direction = 'row',
-    defaultState = 'active',
-    children,
-    className,
-    ...rest
-}) => {
-    const childrenArray = Children.toArray(children) as ReactElement[]
-    const currentIndex = currentIndexByDefaultState(childrenArray, defaultState)
-
-    return (
-        <div
-            {...rest}
-            className={classNames(className, 'progress-stepper', {
-                'progress-stepper--vertical': direction === 'column'
-            })}
-        >
-            <div
-                role="list"
-                className="progress-stepper__items"
-            >
-                {childrenArray.map((child: ReactElement, index) => (
-                    <Fragment key={index}>
-                        {index > 0 && <hr className="progress-stepper__separator" role="presentation" />}
-                        {cloneElement<EbayProgressStepProps>(child, {
-                            state: stepState(index, currentIndex),
-                            ...child.props,
-                            current: currentIndex === index
-                        })}
-                    </Fragment>
-                ))}
-            </div>
-        </div>
-    )
-}
-
-function currentIndexByDefaultState(steps: ReactElement[], defaultState: StepState): number {
-    const foundCurrentIndex = steps.findIndex(child => child.props.current)
-
-    if (foundCurrentIndex === -1) {
-        // eslint-disable-next-line default-case
-        switch (defaultState) {
-            case 'complete': return steps.length - 1
-            case 'upcoming': return 0
-        }
-    }
-
-    return foundCurrentIndex
-}
-
-function stepState(stepIndex, currentIndex): StepState {
-    if (stepIndex <= currentIndex) return 'complete'
-    if (stepIndex > currentIndex) return 'upcoming'
-}
-
-export default EbayProgressStepper

package/src/ebay-progress-stepper/ebay-progress-title.tsx

@@ -1,13 +0,0 @@
-import { createElement, FC, ReactNode } from 'react'
-
-type Props = {
-    as?: string;
-    children?: ReactNode;
-}
-
-const EbayProgressTitle: FC<Props> = ({
-    as: TitleComponent = 'h4',
-    children
-}) => createElement(TitleComponent, {}, children)
-
-export default EbayProgressTitle

package/src/ebay-progress-stepper/index.ts

@@ -1,4 +0,0 @@
-export { default as EbayProgressStepper } from './ebay-progress-stepper'
-export { default as EbayProgressStep } from './ebay-progress-step'
-export { default as EbayProgressTitle } from './ebay-progress-title'
-export type { StepperDirection, StepState } from './types'

package/src/ebay-progress-stepper/types.ts

@@ -1,3 +0,0 @@
-export type StepperDirection = 'column' | 'row';
-
-export type StepState = 'complete' | 'upcoming' | 'attention' | 'active';

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

@@ -1,48 +0,0 @@
-import React from 'react'
-import { fireEvent, render, screen } from '@testing-library/react'
-import { eventOfType } from '../../common/event-utils/__tests__/helpers'
-import { EbayRadio } from '../index'
-import { EbayLabel } from '../../ebay-field'
-
-describe('<EbayRadio>', () => {
-    describe('on radio-button click', () => {
-        it('should fire onChange event', () => {
-            const value = 'test'
-            const spy = jest.fn()
-            render(
-                <EbayRadio value={value} onChange={spy} id="id">
-                    <EbayLabel>radio</EbayLabel>
-                </EbayRadio>
-            )
-            fireEvent.click(screen.getByLabelText('radio'))
-
-            expect(spy).toHaveBeenCalledWith(eventOfType('change'), { value })
-        })
-        it('should fire onFocus event', () => {
-            const value = 'test'
-            const spy = jest.fn()
-            render(
-                <EbayRadio value={value} onFocus={spy} id="id">
-                    <EbayLabel>radio</EbayLabel>
-                </EbayRadio>
-            )
-            fireEvent.focus(screen.getByLabelText('radio'))
-
-            expect(spy).toHaveBeenCalledWith(eventOfType('focus'), { value })
-        })
-    })
-    describe('on radio-button key down', () => {
-        it('should fire onKeyDown event', () => {
-            const value = 'test'
-            const spy = jest.fn()
-            render(
-                <EbayRadio value={value} onKeyDown={spy} id="id">
-                    <EbayLabel>radio</EbayLabel>
-                </EbayRadio>
-            )
-            fireEvent.keyDown(screen.getByLabelText('radio'))
-
-            expect(spy).toHaveBeenCalledWith(eventOfType('keydown'), { value })
-        })
-    })
-})

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

@@ -1,193 +0,0 @@
-import React, { useState } from 'react'
-import { action } from '@storybook/addon-actions'
-import { EbayField, EbayLabel } from '../../ebay-field'
-import { EbayButton } from '../../ebay-button'
-import { EbayRadio } from '../index'
-
-export default {
-    title: 'form input/ebay-radio'
-}
-
-export const Default = () => (
-    <>
-        <p>
-            <EbayRadio value="123" id="radio-1">
-                <EbayLabel>Default</EbayLabel>
-            </EbayRadio>
-        </p>
-        <p>
-            <EbayRadio value="123" id="radio-11" size="large">
-                <EbayLabel>Large</EbayLabel>
-            </EbayRadio>
-        </p>
-    </>
-)
-
-export const UsingCustomLabelHtml = {
-    render: () => (
-        <>
-            <p>
-                <EbayRadio value="123" id="radio-1" />
-                <label className="field__label field__label--end" htmlFor="radio-1">
-                    Default
-                </label>
-            </p>
-            <p>
-                <EbayRadio value="123" id="radio-11" size="large" />
-                <label className="field__label field__label--end" htmlFor="radio-11">
-                    Large
-                </label>
-            </p>
-        </>
-    ),
-
-    name: 'Using custom label html'
-}
-
-export const SelectedRadioButton = {
-    render: () => (
-        <>
-            <EbayRadio checked id="radio-2">
-                <EbayLabel>Selected</EbayLabel>
-            </EbayRadio>
-        </>
-    ),
-
-    name: 'Selected radio-button'
-}
-
-export const DisabledRadioButton = {
-    render: () => (
-        <>
-            <EbayRadio disabled id="radio-20">
-                <EbayLabel>Disabled</EbayLabel>
-            </EbayRadio>
-        </>
-    ),
-
-    name: 'Disabled radio-button'
-}
-
-export const GroupedRadioButtons = {
-    render: () => {
-        const defaultProps = {
-            onChange: (e, props) => action('onChange')(e, props),
-            onFocus: (e, props) => action('onFocus')(e, props),
-            onKeyDown: (e, props) => action('onKeyDown')(e, props)
-        }
-
-        return (
-            <fieldset>
-                <legend>Choose an Option</legend>
-                <EbayField>
-                    <EbayRadio
-                        id="group-radio-1"
-                        value="1"
-                        defaultChecked
-                        name="radio-group"
-                        {...defaultProps}
-                    >
-                        <EbayLabel>Option 1</EbayLabel>
-                    </EbayRadio>
-                </EbayField>
-                <EbayField>
-                    <EbayRadio
-                        id="group-radio-2"
-                        value="2"
-                        defaultChecked={false}
-                        name="radio-group"
-                        {...defaultProps}
-                    >
-                        <EbayLabel>Option 2</EbayLabel>
-                    </EbayRadio>
-                </EbayField>
-                <EbayField>
-                    <EbayRadio
-                        id="group-radio-3"
-                        value="3"
-                        defaultChecked={false}
-                        name="radio-group"
-                        {...defaultProps}
-                    >
-                        <EbayLabel>Option 3</EbayLabel>
-                    </EbayRadio>
-                </EbayField>
-            </fieldset>
-        )
-    },
-
-    name: 'Grouped radio-buttons'
-}
-
-export const StyledRadioButton = {
-    render: () => (
-        <>
-            <style
-                dangerouslySetInnerHTML={{
-                    __html: `
-                .custom ~ label,
-                .custom .radio__icon svg { color: green !important }
-                `
-                }}
-            />
-            <EbayRadio className="custom" aria-label="custom color radio example" id="radio-30">
-                <EbayLabel>Custom style</EbayLabel>
-            </EbayRadio>
-        </>
-    ),
-
-    name: 'Styled radio-button'
-}
-
-export const ControlledComponent = {
-    render: () => {
-        const deliveryMethods = ['Regular', 'Express', 'Local Pickup']
-
-        const TestControlledComponent = () => {
-            const [selectedValue, setSelectedValue] = useState(deliveryMethods[0])
-            const handleChange = (e, ...rest) => {
-                action('radio-change')(e, ...rest)
-                setSelectedValue(e.target.value)
-            }
-
-            return (
-                <div>
-                    <fieldset>
-                        <legend>Choose your delivery</legend>
-                        {deliveryMethods.map((item, index) => (
-                            <EbayField key={`delivery-${item}`}>
-                                <EbayRadio
-                                    id={`delivery-${index}`}
-                                    checked={selectedValue === item}
-                                    value={item}
-                                    name="delivery-method"
-                                    onChange={handleChange}
-                                >
-                                    <EbayLabel>{item}</EbayLabel>
-                                </EbayRadio>
-                            </EbayField>
-                        ))}
-                    </fieldset>
-
-                    <div style={{ display: 'flex', alignItems: 'center', marginTop: '2rem' }}>
-                        <div style={{ marginRight: '1rem' }}>
-                            Current selected: <strong>{selectedValue}</strong>
-                        </div>
-
-                        <EbayButton onClick={() => setSelectedValue(deliveryMethods[1])}>
-                            Reset to default (Express)
-                        </EbayButton>
-                    </div>
-                </div>
-            )
-        }
-
-        return (
-            <>
-                <TestControlledComponent />
-            </>
-        )
-    },
-
-    name: 'Controlled component'
-}

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

@@ -1,57 +0,0 @@
-import React from 'react'
-import { composeStory } from '@storybook/react'
-import { render } from '@testing-library/react'
-import Meta, { UsingCustomLabelHtml, SelectedRadioButton, DisabledRadioButton, GroupedRadioButtons, ControlledComponent } from './index.stories'
-
-const UsingCustomLabelHtmlStory = composeStory(UsingCustomLabelHtml, Meta)
-const SelectedRadioButtonStory = composeStory(SelectedRadioButton, Meta)
-const DisabledRadioButtonStory = composeStory(DisabledRadioButton, Meta)
-const GroupedRadioButtonsStory = composeStory(GroupedRadioButtons, Meta)
-const ControlledComponentStory = composeStory(ControlledComponent, Meta)
-
-describe('EbayRadio rendering', () => {
-    describe('UsingCustomLabelHtml story', () => {
-        it('renders radio button correctly', () => {
-            const { container } = render(<UsingCustomLabelHtmlStory />)
-            const radio = container.querySelector('input[type="radio"]')
-            expect(radio).toHaveClass('radio__control')
-            expect(radio).toHaveAttribute('value', '123')
-        })
-    })
-
-    describe('SelectedRadioButton story', () => {
-        it('renders selected radio button correctly', () => {
-            const { container } = render(<SelectedRadioButtonStory />)
-            const radio = container.querySelector('input[type="radio"]')
-            expect(radio).toHaveClass('radio__control')
-            expect(radio).toHaveAttribute('checked')
-        })
-    })
-
-    describe('DisabledRadioButton story', () => {
-        it('renders disabled radio button correctly', () => {
-            const { container } = render(<DisabledRadioButtonStory />)
-            const radio = container.querySelector('input[type="radio"]')
-            expect(radio).toHaveClass('radio__control')
-            expect(radio).toHaveAttribute('disabled')
-        })
-    })
-
-    describe('GroupedRadioButtons story', () => {
-        it('renders grouped radio buttons correctly', () => {
-            const { getAllByRole } = render(<GroupedRadioButtonsStory />)
-            const radios = getAllByRole('radio')
-            expect(radios[0]).toHaveClass('radio__control')
-            expect(radios[0]).toHaveAttribute('value', '1')
-        })
-    })
-
-    describe('ControlledComponent story', () => {
-        it('renders controlled radio button correctly', () => {
-            const { container } = render(<ControlledComponentStory />)
-            const radio = container.querySelector('input[type="radio"]')
-            expect(radio).toHaveClass('radio__control')
-            expect(radio).toHaveAttribute('value', 'Regular')
-        })
-    })
-})

package/src/ebay-radio/index.ts

@@ -1 +0,0 @@
-export { default as EbayRadio } from './radio'

package/src/ebay-radio/radio.tsx

@@ -1,85 +0,0 @@
-import React, {
-    ChangeEvent, FocusEvent, KeyboardEvent,
-    Children, cloneElement,
-    ComponentProps, FC, ReactElement
-} from 'react'
-import classNames from 'classnames'
-import { EbayIcon } from '../ebay-icon'
-import { EbayLabel, EbayLabelProps } from '../ebay-field'
-import { EbayChangeEventHandler, EbayFocusEventHandler, EbayKeyboardEventHandler } from '../common/event-utils/types'
-
-type Size = 'default' | 'large'
-
-type EbayRadioProps = {
-    size?: Size;
-    onChange?: EbayChangeEventHandler<HTMLInputElement, { value: string | number }>;
-    onFocus?: EbayFocusEventHandler<HTMLInputElement, { value: string | number }>;
-    onKeyDown?: EbayKeyboardEventHandler<HTMLInputElement, { value: string | number }>;
-}
-type InputProps = Omit<ComponentProps<'input'>, 'size' | 'onChange' | 'onFocus' | 'onKeyDown'>
-
-const EbayRadio: FC<InputProps & EbayRadioProps> = ({
-    size = 'default',
-    checked,
-    defaultChecked,
-    className,
-    style,
-    id,
-    onChange = () => {},
-    onFocus = () => {},
-    onKeyDown = () => {},
-    children,
-    ...rest
-}: InputProps & EbayRadioProps) => {
-    const handleChange = (e: ChangeEvent<HTMLInputElement>) =>
-        onChange(e, { value: e.target?.value })
-
-    const handleFocus = (e: FocusEvent<HTMLInputElement>) =>
-        onFocus(e, { value: e.target?.value })
-
-    const handleKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {
-        const radioButton = e.target as any
-        return onKeyDown(e, { value: radioButton?.value })
-    }
-
-    const containerClass = classNames('radio', className, { 'radio--large': size === 'large' })
-
-    const iconChecked = size === 'large' ?
-        <EbayIcon name="radioChecked24" className="radio__checked" /> :
-        <EbayIcon name="radioChecked18" className="radio__checked" />
-    const iconUnChecked = size === 'large' ?
-        <EbayIcon name="radioUnchecked24" className="radio__unchecked" /> :
-        <EbayIcon name="radioUnchecked18" className="radio__unchecked" />
-
-    const childrenArray = Children.toArray(children) as ReactElement[]
-    const ebayLabel = childrenArray.find(child => child.type === EbayLabel)
-
-    return (
-        <>
-            <span className={containerClass} style={{ ...style, alignItems: 'center' }}>
-                <input
-                    {...rest}
-                    id={id}
-                    className="radio__control"
-                    type="radio"
-                    defaultChecked={defaultChecked}
-                    checked={checked}
-                    onChange={handleChange}
-                    onFocus={handleFocus}
-                    onKeyDown={handleKeyDown}
-                />
-                <span className="radio__icon" hidden>{iconChecked}{iconUnChecked}</span>
-            </span>
-            {ebayLabel ?
-                cloneElement<EbayLabelProps>(ebayLabel, {
-                    ...ebayLabel.props,
-                    position: 'end',
-                    htmlFor: id
-                }) :
-                children
-            }
-        </>
-    )
-}
-
-export default EbayRadio

package/src/ebay-section-notice/__tests__/index.spec.tsx

@@ -1,109 +0,0 @@
-import React from 'react'
-import { act, render } from '@testing-library/react'
-import { EbayButton } from '../../ebay-button'
-import { EbayNoticeContent, EbaySectionNotice } from '../index'
-import userEvent from '@testing-library/user-event'
-import { eventOfType } from '../../common/event-utils/__tests__/helpers'
-
-describe('<EbaySectionNotice>', () => {
-    describe('when a button is added in the children of the main section notice', () => {
-        it('should render the button as well as the notice content', () => {
-            const wrapper = render(
-                <EbaySectionNotice>
-                    <EbayNoticeContent>
-                        <p id="content">Here is some content</p>
-                    </EbayNoticeContent>
-                    <EbayButton id="actionButton">Action</EbayButton>
-                </EbaySectionNotice>
-            )
-
-            expect(wrapper.getByText('Here is some content')).toBeTruthy()
-            expect(wrapper.getByRole('button').textContent).toContain('Action')
-        })
-    })
-
-    describe('when aria-label is given', () => {
-        it('should set SVG role=`img`', () => {
-            const wrapper = render(
-                <EbaySectionNotice status="confirmation" aria-label="Success Confirmation">
-                    <EbayNoticeContent>
-                        <p>You did it.</p>
-                    </EbayNoticeContent>
-                </EbaySectionNotice>
-            )
-            expect(wrapper.container.querySelector('svg')).toHaveAttribute('role', 'img')
-        })
-
-        it('should add the text to the main section as an aria-label if there is no status', () => {
-            const wrapper = render(
-                <EbaySectionNotice aria-label="Success Confirmation">
-                    <EbayNoticeContent>
-                        <p>You did it.</p>
-                    </EbayNoticeContent>
-                </EbaySectionNotice>
-            )
-
-            expect(wrapper.getByRole('region')).toHaveAttribute('aria-label', 'Success Confirmation')
-        })
-    })
-
-    describe('on using the notice with no content', () => {
-        it('should throw an error', () => {
-            jest.spyOn(console, 'error').mockImplementation(() => null)
-            expect(() => {
-                render(<EbaySectionNotice />)
-            }).toThrowError(`EbaySectionNotice: Please use a EbayNoticeContent that defines the content of the notice`);
-            (console.error as jest.Mock).mockRestore()
-        })
-    })
-
-    describe('when allyDismissText is provided...', () => {
-        let wrapper
-        let dismissButton
-        const dismissMock = jest.fn()
-
-        beforeEach(async () => {
-            wrapper = render(
-                <EbaySectionNotice status="information" aria-label="Information" a11yDismissText="Close" onDismiss={dismissMock}>
-                    <EbayNoticeContent>
-                        <p>Content</p>
-                    </EbayNoticeContent>
-                </EbaySectionNotice>
-            )
-            dismissButton = await wrapper.getByRole('button', { name: 'Close' })
-        })
-
-        it('should add a close button with the provided label.', () => {
-            expect(dismissButton).not.toBeNull()
-        })
-
-        it('should hide the notice when the dismiss button is clicked.', async () => {
-            expect(wrapper.getByRole('region', { name: 'Information' })).toBeVisible()
-            await dismissButton.click()
-            expect(wrapper.queryByRole('region', { name: 'Information' })).toBeNull()
-            expect(dismissMock).toHaveBeenCalledWith(eventOfType('click'))
-        })
-
-        it('should hide the notice when the user focuses the dismiss button and presses space', async () => {
-            expect(wrapper.getByRole('region', { name: 'Information' })).toBeVisible()
-            await dismissButton.focus()
-            act(() => { userEvent.type(dismissButton, ' ') })
-            expect(wrapper.queryByRole('region', { name: 'Information' })).toBeNull()
-            expect(dismissMock).toHaveBeenCalled()
-        })
-    })
-
-    describe('id generation', () => {
-        test('should generate unique id for aria-labelledby and header', () => {
-            const wrapper = render(
-                <EbaySectionNotice status="information" aria-label="Important notice">
-                    <EbayNoticeContent>Test notice content</EbayNoticeContent>
-                </EbaySectionNotice>
-            );
-
-            const section = wrapper.getByRole('region');
-            const header = wrapper.container.querySelector('.section-notice__header');
-            expect(header).toHaveAttribute('id', section.getAttribute('aria-labelledby'));
-        });
-    })
-})