@ebay/ui-core-react 7.3.2 → 7.3.4

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

@@ -1,105 +0,0 @@
-import React from 'react'
-import { render, fireEvent, cleanup } from '@testing-library/react'
-import { Isolated, Fieldset } from './mocks'
-import { eventOfType } from '../../common/event-utils/__tests__/helpers'
-
-const htmlSnap = async (ui: React.ReactElement): Promise<void> => {
-    const { asFragment } = await render(ui)
-    expect(asFragment()).toMatchSnapshot()
-}
-
-let component
-const onChangeSpy = jest.fn()
-const onFocusSpy = jest.fn()
-const onKeyDownSpy = jest.fn()
-
-describe('star-rating-select', () => {
-    it('renders defaults', async () => {
-        await htmlSnap(<Isolated a11yText={null} a11yStarText={null} />)
-    })
-
-    it('renders basic fieldset', async () => {
-        await htmlSnap(<Fieldset />)
-    })
-
-    it('renders with 0 selected', async () => {
-        await htmlSnap(<Isolated value="0" />)
-    })
-
-    it('renders with 2 selected', async () => {
-        await htmlSnap(<Isolated value="2" />)
-    })
-
-    it('renders with 5 selected', async () => {
-        await htmlSnap(<Isolated value="5" />)
-    })
-
-    describe('given star rating', () => {
-        afterEach(cleanup)
-
-        beforeEach(async () => {
-            onChangeSpy.mockReset()
-            component = await render(<Isolated onChange={onChangeSpy} />)
-            await fireEvent.click(component.getByLabelText('2 stars'))
-        })
-
-        it('should emit the onChange event with 2', () => {
-            expect(onChangeSpy).toHaveBeenCalledTimes(1)
-            expect(onChangeSpy).toHaveBeenCalledWith(eventOfType('click'), { value: 2 })
-        })
-
-        describe('when star is clicked', () => {
-            beforeEach(async () => {
-                await fireEvent.click(component.getByLabelText('4 stars'))
-            })
-
-            it('should emit the onChange event with 4', () => {
-                expect(onChangeSpy).toHaveBeenCalledTimes(2)
-                expect(onChangeSpy).toHaveBeenCalledWith(eventOfType('click'), { value: 4 })
-            })
-        })
-    })
-
-    describe('given star is disabled', () => {
-        beforeEach(async () => {
-            onChangeSpy.mockReset()
-            component = await render(<Isolated onChange={onChangeSpy} disabled />)
-        })
-
-        describe('when star is clicked', () => {
-            beforeEach(async () => {
-                await fireEvent.click(component.getByLabelText('2 stars'))
-            })
-
-            it('should not emit the change event', () => {
-                expect(onChangeSpy).toHaveBeenCalledTimes(0)
-            })
-        })
-    })
-
-    describe('when native focus event is fired on star', () => {
-        beforeEach(async () => {
-            onFocusSpy.mockReset()
-            component = await render(<Isolated onFocus={onFocusSpy} />)
-            await fireEvent.focus(component.getByLabelText('2 stars'))
-        })
-
-        it('should emit the focus event', () => {
-            expect(onFocusSpy).toHaveBeenCalledTimes(1)
-            expect(onFocusSpy).toHaveBeenCalledWith(eventOfType('focus'), { value: 2 })
-        })
-    })
-
-    describe('when native keyboard event is fired on star', () => {
-        beforeEach(async () => {
-            onKeyDownSpy.mockReset()
-            component = await render(<Isolated onKeyDown={onKeyDownSpy} />)
-            await fireEvent.keyDown(component.getByLabelText('5 stars'))
-        })
-
-        it('should emit the onKeyDown event', () => {
-            expect(onKeyDownSpy).toHaveBeenCalledTimes(1)
-            expect(onKeyDownSpy).toHaveBeenCalledWith(eventOfType('keydown'), { value: 5 })
-        })
-    })
-})

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

@@ -1,73 +0,0 @@
-import React from 'react'
-import { EbayStarRatingSelect } from '../'
-import { IsolatedDefaultProps, FieldsetDefaultProps } from './mocks'
-
-export default {
-    component: EbayStarRatingSelect,
-    title: 'form input/ebay-star-rating-select',
-    argTypes: {
-        disabled: {
-            control: { type: 'boolean' }
-        },
-        value: {
-            control: { type: 'number' },
-            description:
-        '1 - 5, depending on how many stars are selected. If 0 or null defaults to no stars selected'
-        },
-        a11yStarText: {
-            control: 'object',
-            description: 'Array object which sets the aria label for each star'
-        },
-        a11yText: {
-            control: { type: 'text' },
-            description: 'The aria label for the outer container. Only used on isolated case.'
-        },
-
-        onChange: {
-            action: 'onChange',
-            description: 'Triggered on change',
-            table: {
-                category: 'Events',
-                defaultValue: {
-                    summary: '{ originalEvent }, value'
-                }
-            }
-        },
-        onFocus: {
-            action: 'onFocus',
-            description: 'Triggered on focus',
-            table: {
-                category: 'Events',
-                defaultValue: {
-                    summary: '{ originalEvent }, value'
-                }
-            }
-        },
-        onKeydown: {
-            action: 'onKeydown',
-            description: 'Triggered on keydown',
-            table: {
-                category: 'Events',
-                defaultValue: {
-                    summary: '{ originalEvent }, value'
-                }
-            }
-        }
-    }
-}
-
-export const Isolated = {
-    render: (args) => <EbayStarRatingSelect {...IsolatedDefaultProps} {...args} />,
-    args: IsolatedDefaultProps
-}
-
-export const Fieldset = {
-    render: (args) => (
-        <fieldset>
-            <legend>Rate Product</legend>
-            <EbayStarRatingSelect {...FieldsetDefaultProps} {...args} />
-        </fieldset>
-    ),
-
-    args: FieldsetDefaultProps
-}

package/src/ebay-star-rating-select/__tests__/mocks.tsx

@@ -1,26 +0,0 @@
-import * as React from 'react'
-import { EbayStarRatingSelect } from '../'
-
-export const IsolatedDefaultProps = {
-    disabled: false,
-    a11yStarText: ['1 star', '2 stars', '3 stars', '4 stars', '5 stars'],
-    a11yText: 'Rate product',
-    value: 0,
-    name: 'star-rating'
-
-}
-export const Isolated = (props) => (<EbayStarRatingSelect {...IsolatedDefaultProps} {...props} />)
-
-export const FieldsetDefaultProps = {
-    disabled: false,
-    a11yStarText: ['1 star', '2 stars', '3 stars', '4 stars', '5 stars'],
-    value: '0',
-    name: 'star-rating'
-}
-
-export const Fieldset = (props) => (
-    <fieldset>
-        <legend>Rate Product</legend>
-        <EbayStarRatingSelect {...FieldsetDefaultProps} {...props} />
-    </fieldset>
-)

package/src/ebay-star-rating-select/index.ts

@@ -1 +0,0 @@
-export { default as EbayStarRatingSelect, type EventProps } from './star-rating-select'

package/src/ebay-star-rating-select/star-rating-select.tsx

@@ -1,95 +0,0 @@
-import React, { ComponentProps, FC, useEffect, useState } from 'react'
-import classNames from 'classnames'
-import { EbayIcon } from '../ebay-icon'
-import { range } from '../common/range'
-import { EbayChangeEventHandler, EbayFocusEventHandler, EbayKeyboardEventHandler } from '../common/event-utils/types'
-import { useRandomId } from '../common/random-id'
-
-export type EventProps = { value: number }
-type Props = ComponentProps<'div'> & {
-    a11yText?: string;
-    value?: string;
-    a11yStarText?: string[]
-    disabled?: boolean;
-    name?: string;
-    onKeyDown?: EbayKeyboardEventHandler<HTMLInputElement, EventProps>;
-    onChange?: EbayChangeEventHandler<HTMLInputElement, EventProps>;
-    onFocus?: EbayFocusEventHandler<HTMLInputElement, EventProps>;
-}
-const stars = range(1, 5)
-const getValue = (val) => {
-    let value = parseInt(val, 0) || 0
-    if (value > 5) {
-        value = 0
-    }
-    return value
-}
-const EbayStarRatingSelect: FC<Props> = ({
-    value = 0,
-    a11yText,
-    className,
-    a11yStarText = [],
-    disabled,
-    onChange = () => {},
-    onFocus = () => {},
-    onKeyDown = () => {},
-    name,
-    ...rest
-}) => {
-    const rId = useRandomId()
-    const inputName = name || `star-rating-${rId}`
-    const [checkedValue, setChecked] = useState(getValue(value))
-    useEffect(() => {
-        setChecked(getValue(value))
-    }, [value])
-    const handleKeyDown = (i:number) => (e) => {
-        if (!disabled) {
-            setChecked(getValue(i))
-            onKeyDown(e, { value: i })
-        }
-    }
-    const handleClick = (i:number) => (e) => {
-        if (!disabled) {
-            setChecked(getValue(i))
-            onChange(e, { value: i })
-        }
-    }
-    const handleFocus = (i:number) => (e) => {
-        if (!disabled) {
-            setChecked(getValue(i))
-            onFocus(e, { value: i })
-        }
-    }
-    return (
-        <div
-            role={a11yText && 'radiogroup'}
-            aria-label={a11yText}
-            className={classNames('star-rating-select', className)}
-            {...rest}
-        >
-            {stars.map((i) => (
-                <span className="star-rating-select__radio" key={i}>
-                    <input
-                        aria-label={a11yStarText?.[i - 1]}
-                        className={classNames(
-                            'star-rating-select__control',
-                            { 'star-rating-select__control--filled': i <= checkedValue })
-                        }
-                        type="radio"
-                        name={inputName}
-                        value={i}
-                        disabled={disabled}
-                        defaultChecked={checkedValue === i}
-                        onClick={handleClick(i)}
-                        onFocus={handleFocus(i)}
-                        onKeyDown={handleKeyDown(i)} />
-                    <span className="star-rating-select__radio-icon">
-                        <EbayIcon className="star-rating__icon" name="starDynamic" />
-                    </span>
-                </span>
-            ))}
-        </div>
-    )
-}
-
-export default EbayStarRatingSelect

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

@@ -1,16 +0,0 @@
-import React from 'react'
-import EbaySvg from '../svg'
-import { EbayIcon } from '../../ebay-icon'
-
-export default {
-    component: EbaySvg,
-    title: 'graphics & icons/ebay-svg',
-}
-
-export const FilteredIcons = () => (
-    <>
-        <EbaySvg icons={['notification16', 'attention16']} />
-        <EbayIcon name="notification16" />
-        <EbayIcon name="attention16" />
-    </>
-)

package/src/ebay-svg/index.ts

@@ -1 +0,0 @@
-export { default as EbaySvg } from './svg'

package/src/ebay-svg/svg.tsx

@@ -1,23 +0,0 @@
-import React, { FC } from 'react'
-import { symbols } from './symbols'
-import { Icon } from '../ebay-icon'
-import { kebabCased } from '../ebay-icon/icon'
-
-export type EbaySvgProps = {
-    icons?: Icon[]
-}
-
-const EbaySvg: FC<EbaySvgProps> = ({ icons }: EbaySvgProps) => {
-    const iconIds = icons && new Set(icons.map(icon => `icon-${kebabCased(icon)}`))
-
-    // Use position absolute and height/width 0px instead of display none
-    // so <defs> element for spectrum icons are shown
-    return (
-        <svg style={{ position: 'absolute', height: '0px', width: '0px' }}>
-            {!iconIds ? symbols : symbols
-                .filter(({ props, type }) => type === 'defs' || iconIds.has(props.id))}
-        </svg>
-    )
-}
-
-export default EbaySvg