@ebay/ui-core-react 7.3.2 → 7.3.4

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1,170 +0,0 @@
-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 />
-        </>
-    )
-}