@ebay/ui-core-react 7.3.0 → 7.3.2

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

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

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

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

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

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

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

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

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

package/src/ebay-svg/svg.tsx

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