@ebay/ui-core-react 7.3.1 → 7.3.2

package/src/ebay-progress-bar/__tests__/index.spec.tsx

@@ -0,0 +1,41 @@
+import React from 'react'
+import { render } from '@testing-library/react'
+import { composeStory } from '@storybook/react'
+import Meta, { Default, CustomMax, Fluid } from './index.stories'
+
+const DefaultStory = composeStory(Default, Meta)
+const CustomMaxStory = composeStory(CustomMax, Meta)
+const FluidStory = composeStory(Fluid, Meta)
+
+describe('ebay-progress-bar rendering', () => {
+    it('renders default story correctly', () => {
+        const { container } = render(<DefaultStory />)
+        const [progressNone, progressHalf, progressFull] = container.querySelectorAll('progress')
+        expect(progressNone).toHaveAttribute('value', '0')
+        expect(progressNone).toHaveAttribute('max', '100')
+        expect(progressNone).toHaveClass('progress-bar')
+        expect(progressHalf).toHaveAttribute('value', '50')
+        expect(progressHalf).toHaveAttribute('max', '100')
+        expect(progressHalf).toHaveClass('progress-bar')
+        expect(progressFull).toHaveAttribute('value', '100')
+        expect(progressFull).toHaveAttribute('max', '100')
+        expect(progressFull).toHaveClass('progress-bar')
+    })
+
+    it('renders custom max story correctly', () => {
+        const { container } = render(<CustomMaxStory />)
+        const [progressHalf, progressFull] = container.querySelectorAll('progress')
+        expect(progressHalf).toHaveAttribute('value', '50')
+        expect(progressHalf).toHaveAttribute('max', '200')
+        expect(progressFull).toHaveAttribute('value', '100')
+        expect(progressFull).toHaveAttribute('max', '200')
+    })
+
+    it('renders fluid story correctly', () => {
+        const { container } = render(<FluidStory />)
+        const progress = container.querySelector('progress')
+        expect(progress).toHaveAttribute('value', '50')
+        expect(progress).toHaveAttribute('max', '100')
+        expect(progress).toHaveClass('progress-bar--fluid')
+    })
+})

package/src/ebay-progress-bar/__tests__/index.stories.tsx

@@ -0,0 +1,50 @@
+import React from 'react'
+import { EbayProgressBar } from '../index'
+
+export default {
+    title: 'progress/ebay-progress-bar',
+    component: EbayProgressBar
+}
+
+export const Default = () => (
+    <>
+        <p>
+            0%
+            <br />
+            <EbayProgressBar />
+        </p>
+        <p>
+            50%
+            <br />
+            <EbayProgressBar value={50} />
+        </p>
+        <p>
+            100%
+            <br />
+            <EbayProgressBar value={100} />
+        </p>
+    </>
+)
+
+export const CustomMax = () => (
+    <>
+        <p>
+            50/200
+            <br />
+            <EbayProgressBar value={50} max={200} />
+        </p>
+        <p>
+            100/200
+            <br />
+            <EbayProgressBar value={100} max={200} />
+        </p>
+    </>
+)
+
+export const Fluid = () => (
+    <>
+        <p>
+            <EbayProgressBar fluid value={50} />
+        </p>
+    </>
+)

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

@@ -0,0 +1 @@
+export { default as EbayProgressBar, type EbayProgressBarProps } from './progress-bar'

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

@@ -0,0 +1,23 @@
+import React, { ComponentProps, FC } from 'react'
+import classNames from 'classnames'
+
+export type EbayProgressBarProps = ComponentProps<'progress'> & {
+    fluid?: boolean;
+}
+
+const EbayProgressBar: FC<EbayProgressBarProps> = ({
+    value = 0,
+    max = 100,
+    fluid,
+    className,
+    ...rest
+}) => (
+    <progress
+        {...rest}
+        className={classNames('progress-bar', className, { 'progress-bar--fluid': fluid })}
+        value={value}
+        max={max}
+    />
+)
+
+export default EbayProgressBar

package/src/ebay-progress-spinner/__tests__/index.spec.tsx

@@ -0,0 +1,19 @@
+import React from 'react'
+import { render, screen } from '@testing-library/react'
+import { composeStory } from '@storybook/react'
+import Meta, { DefaultSmallLarge } from './index.stories'
+
+const DefaultStory = composeStory(DefaultSmallLarge, Meta)
+
+describe('ebay-progress-spinner rendering', () => {
+    it('renders', () => {
+        render(<DefaultStory />)
+        const [spinner, smallSpinner, largeSpinner] = screen.getAllByRole('img')
+        expect(spinner).toHaveAttribute('aria-label', 'Busy')
+        expect(spinner).toHaveClass('progress-spinner')
+        expect(smallSpinner).toHaveAttribute('aria-label', 'Stand by...')
+        expect(smallSpinner).toHaveClass('progress-spinner progress-spinner--small')
+        expect(largeSpinner).toHaveAttribute('aria-label', 'Stand by...')
+        expect(largeSpinner).toHaveClass('progress-spinner progress-spinner--large')
+    })
+})

package/src/ebay-progress-spinner/__tests__/index.stories.tsx

@@ -0,0 +1,24 @@
+import React from 'react'
+import { EbayProgressSpinner } from '../index'
+
+export default {
+    title: 'progress/ebay-progress-spinner'
+}
+
+export const DefaultSmallLarge = {
+    render: () => (
+        <>
+            <p>
+                <EbayProgressSpinner />
+            </p>
+            <p>
+                <EbayProgressSpinner size="small" aria-label="Stand by..." />
+            </p>
+            <p>
+                <EbayProgressSpinner size="large" aria-label="Stand by..." />
+            </p>
+        </>
+    ),
+
+    name: 'Default, Small & Large'
+}

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

@@ -0,0 +1 @@
+export { default as EbayProgressSpinner } from './progress-spinner'

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

@@ -0,0 +1,42 @@
+import React, { ComponentProps, FC } from 'react'
+import classNames from 'classnames'
+import { EbayIcon, Icon } from '../ebay-icon'
+
+export type SpinnerSize = 'default' | 'small' | 'large'
+
+type EbayProgressSpinnerProps = {
+    size?: SpinnerSize;
+    'aria-label'?: string;
+}
+
+type SpanProps = Omit<ComponentProps<'span'>, 'size'>;
+
+const sizeClass: { [key in SpinnerSize]: string } = {
+    'default': '',
+    'small': 'progress-spinner--small',
+    'large': 'progress-spinner--large'
+}
+
+const iconName: { [key in SpinnerSize]: Icon } = {
+    'default': 'spinner24',
+    'small': 'spinner20',
+    'large': 'spinner30'
+}
+
+const EbayProgressSpinner: FC<SpanProps & EbayProgressSpinnerProps> = ({
+    size = 'default',
+    'aria-label': ariaLabel = 'Busy',
+    className,
+    ...rest
+}) => (
+    <span
+        {...rest}
+        className={classNames('progress-spinner', sizeClass[size], className)}
+        aria-label={ariaLabel}
+        role="img"
+    >
+        <EbayIcon name={iconName[size]} />
+    </span>
+)
+
+export default EbayProgressSpinner

package/src/ebay-progress-stepper/__tests__/__snapshots__/index.spec.tsx.snap

@@ -0,0 +1,183 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ebay-progress-stepper rendering renders blocked story correctly 1`] = `
+<svg
+  aria-hidden="true"
+  aria-label="complete"
+  class="icon icon--24"
+  focusable="false"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <use
+    xlink:href="#icon-stepper-confirmation-24"
+  />
+</svg>
+`;
+
+exports[`ebay-progress-stepper rendering renders blocked story correctly 2`] = `
+<svg
+  aria-hidden="true"
+  aria-label="complete"
+  class="icon icon--24"
+  focusable="false"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <use
+    xlink:href="#icon-stepper-confirmation-24"
+  />
+</svg>
+`;
+
+exports[`ebay-progress-stepper rendering renders blocked story correctly 3`] = `
+<svg
+  aria-hidden="true"
+  aria-label="current"
+  class="icon icon--24"
+  focusable="false"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <use
+    xlink:href="#icon-stepper-attention-24"
+  />
+</svg>
+`;
+
+exports[`ebay-progress-stepper rendering renders custom titles story correctly 1`] = `
+<svg
+  aria-hidden="true"
+  aria-label="complete"
+  class="icon icon--24"
+  focusable="false"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <use
+    xlink:href="#icon-stepper-confirmation-24"
+  />
+</svg>
+`;
+
+exports[`ebay-progress-stepper rendering renders custom titles story correctly 2`] = `
+<svg
+  aria-hidden="true"
+  aria-label="current"
+  class="icon icon--24"
+  focusable="false"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <use
+    xlink:href="#icon-stepper-confirmation-24"
+  />
+</svg>
+`;
+
+exports[`ebay-progress-stepper rendering renders custom titles story correctly 3`] = `
+<svg
+  aria-hidden="true"
+  aria-label="upcoming"
+  class="icon icon--24"
+  focusable="false"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <use
+    xlink:href="#icon-stepper-upcoming-24"
+  />
+</svg>
+`;
+
+exports[`ebay-progress-stepper rendering renders default story correctly 1`] = `
+<svg
+  aria-hidden="true"
+  aria-label="complete"
+  class="icon icon--24"
+  focusable="false"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <use
+    xlink:href="#icon-stepper-confirmation-24"
+  />
+</svg>
+`;
+
+exports[`ebay-progress-stepper rendering renders default story correctly 2`] = `
+<svg
+  aria-hidden="true"
+  aria-label="complete"
+  class="icon icon--24"
+  focusable="false"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <use
+    xlink:href="#icon-stepper-confirmation-24"
+  />
+</svg>
+`;
+
+exports[`ebay-progress-stepper rendering renders default story correctly 3`] = `
+<svg
+  aria-hidden="true"
+  aria-label="current"
+  class="icon icon--24"
+  focusable="false"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <use
+    xlink:href="#icon-stepper-confirmation-24"
+  />
+</svg>
+`;
+
+exports[`ebay-progress-stepper rendering renders default story correctly 4`] = `
+<svg
+  aria-hidden="true"
+  aria-label="upcoming"
+  class="icon icon--24"
+  focusable="false"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <use
+    xlink:href="#icon-stepper-upcoming-24"
+  />
+</svg>
+`;
+
+exports[`ebay-progress-stepper rendering renders vertical column story correctly 1`] = `
+<svg
+  aria-hidden="true"
+  aria-label="complete"
+  class="icon icon--24"
+  focusable="false"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <use
+    xlink:href="#icon-stepper-confirmation-24"
+  />
+</svg>
+`;
+
+exports[`ebay-progress-stepper rendering renders vertical column story correctly 2`] = `
+<svg
+  aria-hidden="true"
+  aria-label="current"
+  class="icon icon--24"
+  focusable="false"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <use
+    xlink:href="#icon-stepper-confirmation-24"
+  />
+</svg>
+`;
+
+exports[`ebay-progress-stepper rendering renders vertical column story correctly 3`] = `
+<svg
+  aria-hidden="true"
+  aria-label="upcoming"
+  class="icon icon--24"
+  focusable="false"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <use
+    xlink:href="#icon-stepper-upcoming-24"
+  />
+</svg>
+`;

package/src/ebay-progress-stepper/__tests__/index.spec.tsx

@@ -0,0 +1,129 @@
+import React from 'react'
+import { render, screen } from '@testing-library/react'
+import { composeStory } from '@storybook/react'
+import Meta, { Default, Blocked, CustomTitles, VerticalColumn } from './index.stories'
+
+const DefaultStory = composeStory(Default, Meta)
+const BlockedStory = composeStory(Blocked, Meta)
+const CustomTitlesStory = composeStory(CustomTitles, Meta)
+const VerticalColumnStory = composeStory(VerticalColumn, Meta)
+
+describe('ebay-progress-stepper rendering', () => {
+    it('renders default story correctly', () => {
+        render(<DefaultStory />)
+        const stepper = screen.getByRole('list')
+        expect(stepper).toHaveClass('progress-stepper__items')
+
+        const [stepStarted, stepShipped, stepTransit, stepDelivered] = screen.getAllByRole('listitem')
+        expect(stepStarted).toHaveClass('progress-stepper__item')
+        const icon = stepStarted.querySelector('.progress-stepper__icon')
+        expect(icon).toBeInTheDocument()
+        const svg = stepStarted.querySelector('svg')
+        expect(svg).toMatchSnapshot()
+        const stepperText = stepStarted.querySelector('.progress-stepper__text')
+        expect(stepperText.textContent).toEqual('Started')
+
+        const separator = stepper.querySelector('hr')
+        expect(separator).toHaveAttribute('role', 'presentation')
+        expect(separator).toHaveClass('progress-stepper__separator')
+
+        expect(stepShipped).toHaveClass('progress-stepper__item')
+        const svg2 = stepShipped.querySelector('svg')
+        expect(svg2).toMatchSnapshot()
+        const stepperText2 = stepShipped.querySelector('.progress-stepper__text')
+        expect(stepperText2.textContent).toEqual('Shipped')
+
+        expect(stepTransit).toHaveClass('progress-stepper__item')
+        const svg3 = stepTransit.querySelector('svg')
+        expect(svg3).toMatchSnapshot()
+        const stepperText3 = stepTransit.querySelector('.progress-stepper__text')
+        expect(stepperText3.textContent).toEqual('Transit')
+
+        expect(stepDelivered).toHaveClass('progress-stepper__item')
+        const svg5 = stepDelivered.querySelector('svg')
+        expect(svg5).toMatchSnapshot()
+        const stepperText5 = stepDelivered.querySelector('.progress-stepper__text')
+        expect(stepperText5.textContent).toEqual('Delivered')
+    })
+
+    it('renders blocked story correctly', () => {
+        render(<BlockedStory />)
+
+        const [stepStarted, stepShipped, stepBlocked, stepDelivered] = screen.getAllByRole('listitem')
+        expect(stepStarted).toHaveClass('progress-stepper__item')
+        const svg = stepStarted.querySelector('svg')
+        expect(svg).toMatchSnapshot()
+        const stepperText = stepStarted.querySelector('.progress-stepper__text')
+        expect(stepperText.textContent).toEqual('Started')
+
+        expect(stepShipped).toHaveClass('progress-stepper__item')
+        const svg2 = stepShipped.querySelector('svg')
+        expect(svg2).toMatchSnapshot()
+        const stepperText2 = stepShipped.querySelector('.progress-stepper__text')
+        expect(stepperText2.textContent).toEqual('Shipped')
+
+        expect(stepBlocked).toHaveClass('progress-stepper__item')
+        const svg3 = stepBlocked.querySelector('svg')
+        expect(svg3).toMatchSnapshot()
+        const stepperText3 = stepBlocked.querySelector('.progress-stepper__text')
+        expect(stepperText3.textContent).toEqual('Blocked')
+
+        expect(stepDelivered).toHaveClass('progress-stepper__item')
+        const svg5 = stepDelivered.querySelector('svg')
+        expect(svg5).toHaveAttribute('aria-label', 'upcoming')
+        const stepperText5 = stepDelivered.querySelector('.progress-stepper__text')
+        expect(stepperText5.textContent).toEqual('Delivered')
+    })
+
+    it('renders custom titles story correctly', () => {
+        render(<CustomTitlesStory />)
+
+        const [step1, step2, step3] = screen.getAllByRole('listitem')
+        expect(step1).toHaveClass('progress-stepper__item')
+        const svg = step1.querySelector('svg')
+        expect(svg).toMatchSnapshot()
+        const stepperText = step1.querySelector('.progress-stepper__text')
+        const h1 = stepperText.querySelector('h1')
+        expect(h1.textContent).toEqual('H1')
+
+        expect(step2).toHaveClass('progress-stepper__item')
+        const svg2 = step2.querySelector('svg')
+        expect(svg2).toMatchSnapshot()
+        const stepperText2 = step2.querySelector('.progress-stepper__text')
+        const small = stepperText2.querySelector('small')
+        expect(small.textContent).toEqual('Small')
+
+        expect(step3).toHaveClass('progress-stepper__item')
+        const svg3 = step3.querySelector('svg')
+        expect(svg3).toMatchSnapshot()
+        const stepperText3 = step3.querySelector('.progress-stepper__text')
+        const h2 = stepperText3.querySelector('h2')
+        expect(h2.textContent).toEqual('H2')
+    })
+
+    it('renders vertical column story correctly', () => {
+        const { container } = render(<VerticalColumnStory />)
+
+        const stepper = container.querySelector('.progress-stepper')
+        expect(stepper).toHaveClass('progress-stepper--vertical')
+
+        const [stepPlaced, stepPreparing, stepDelivered] = screen.getAllByRole('listitem')
+        expect(stepPlaced).toHaveClass('progress-stepper__item')
+        const svg = stepPlaced.querySelector('svg')
+        expect(svg).toMatchSnapshot()
+        const stepperText = stepPlaced.querySelector('.progress-stepper__text')
+        expect(stepperText.textContent).toEqual('Order placedNew Mens Addidas Ultra BoostOrder total $220')
+
+        expect(stepPreparing).toHaveClass('progress-stepper__item')
+        const svg2 = stepPreparing.querySelector('svg')
+        expect(svg2).toMatchSnapshot()
+        const stepperText2 = stepPreparing.querySelector('.progress-stepper__text')
+        expect(stepperText2.textContent).toEqual('Preparing for shipmentWe will notify you once it ships.')
+
+        expect(stepDelivered).toHaveClass('progress-stepper__item')
+        const svg3 = stepDelivered.querySelector('svg')
+        expect(svg3).toMatchSnapshot()
+        const stepperText3 = stepDelivered.querySelector('.progress-stepper__text')
+        expect(stepperText3.textContent).toEqual('DeliveredGuaranteed Wednesday, October 09.')
+    })
+})

package/src/ebay-progress-stepper/__tests__/index.stories.tsx

@@ -0,0 +1,170 @@
+import React, { FC, useState } from 'react'
+import { EbayButton } from '../../ebay-button'
+import {
+    EbayProgressStepper,
+    EbayProgressStep as Step,
+    EbayProgressTitle as Title,
+    StepState
+} from '../index'
+
+export default {
+    title: 'progress/ebay-progress-stepper'
+}
+
+export const Default = () => (
+    <div style={{ padding: 50 }}>
+        <EbayProgressStepper>
+            <Step>Started</Step>
+            <Step>Shipped</Step>
+            <Step current>Transit</Step>
+            <Step>Delivered</Step>
+        </EbayProgressStepper>
+    </div>
+)
+
+export const DefaultStateUpcoming = {
+    render: () => (
+        <div style={{ padding: 50 }}>
+            <EbayProgressStepper defaultState="upcoming">
+                <Step>
+                    <Title>Paid</Title>
+                    July 3rd
+                </Step>
+                <Step>
+                    <Title>Shipped</Title>
+                    July 4th
+                </Step>
+                <Step>
+                    <Title>Transit</Title>
+                    July 5th
+                </Step>
+                <Step>
+                    <Title>Delivered</Title>
+                    July 6th
+                </Step>
+            </EbayProgressStepper>
+        </div>
+    ),
+
+    name: 'Default state: upcoming'
+}
+
+export const DefaultStateComplete = {
+    render: () => (
+        <div style={{ padding: 50 }}>
+            <EbayProgressStepper defaultState="complete">
+                <Step>Started</Step>
+                <Step>Shipped</Step>
+                <Step>Transit</Step>
+                <Step>Delivered</Step>
+            </EbayProgressStepper>
+        </div>
+    ),
+
+    name: 'Default state: complete'
+}
+
+export const Blocked = () => (
+    <div style={{ padding: 50 }}>
+        <EbayProgressStepper>
+            <Step>Started</Step>
+            <Step>Shipped</Step>
+            <Step state="attention" current>
+                Blocked
+            </Step>
+            <Step>Delivered</Step>
+        </EbayProgressStepper>
+    </div>
+)
+
+export const CustomTitles = () => (
+    <div style={{ padding: 50 }}>
+        <EbayProgressStepper>
+            <Step>
+                <Title as="h1">H1</Title>
+            </Step>
+            <Step current>
+                <Title as="small">Small</Title>
+            </Step>
+            <Step>
+                <Title as="h2">H2</Title>
+            </Step>
+        </EbayProgressStepper>
+    </div>
+)
+
+export const VerticalColumn = {
+    render: () => (
+        <div style={{ padding: 50 }}>
+            <EbayProgressStepper direction="column">
+                <Step>
+                    <Title>Order placed</Title>
+                    <p>New Mens Addidas Ultra Boost</p>
+                    <p>Order total $220</p>
+                </Step>
+                <Step current>
+                    <Title>Preparing for shipment</Title>
+                    <p>We will notify you once it ships.</p>
+                </Step>
+                <Step>
+                    <Title>Delivered</Title>
+                    <p>Guaranteed Wednesday, October 09.</p>
+                </Step>
+            </EbayProgressStepper>
+        </div>
+    ),
+
+    name: 'Vertical (column)'
+}
+
+export const Controlled = () => {
+    const TestingComponent: FC = () => {
+        const MIN = 1
+        const MAX = 4
+        const range = (to: number, from = 0): number[] =>
+            Array.from(Array(to - from + 1)).map((v, k) => from + k)
+
+        const [currentNumber, setCurrentNumber] = useState<number>(2)
+
+        const defaultState = (): StepState => {
+            if (currentNumber < MIN) return 'upcoming'
+            if (currentNumber > MAX) return 'complete'
+            return 'complete'
+        }
+
+        return (
+            <div style={{ padding: 50 }}>
+                <EbayProgressStepper defaultState={defaultState()}>
+                    {range(MAX, MIN).map((n) => (
+                        <Step current={currentNumber === n} key={n}>
+                            Step {n}
+                        </Step>
+                    ))}
+                </EbayProgressStepper>
+                <p>
+                    <EbayButton
+                        onClick={() => {
+                            setCurrentNumber(Math.max(MIN, currentNumber - 1))
+                        }}
+                    >
+                        Back
+                    </EbayButton>
+          &nbsp;
+                    <EbayButton
+                        onClick={() => {
+                            setCurrentNumber(Math.min(MAX, currentNumber + 1))
+                        }}
+                    >
+                        Forward
+                    </EbayButton>
+                </p>
+            </div>
+        )
+    }
+
+    return (
+        <>
+            <TestingComponent />
+        </>
+    )
+}