@ebay/ui-core-react 7.3.2 → 7.3.3

package/src/ebay-button/button.tsx

@@ -1,154 +0,0 @@
-import React, {
-    Children,
-    ComponentProps,
-    FC,
-    KeyboardEvent,
-    MouseEvent,
-    ReactElement,
-    ReactNode,
-    RefObject
-} from 'react'
-import classNames from 'classnames'
-import { withForwardRef } from '../common/component-utils'
-import { Priority, Size, BodyState, Variant, Split } from './types'
-import { EbayIcon } from '../ebay-icon'
-import EbayButtonLoading from './button-loading'
-import EbayButtonExpand from './button-expand'
-
-export type EbayButtonProps = {
-    fluid?: boolean;
-    partiallyDisabled?: boolean;
-    truncate?: boolean;
-    href?: string;
-    priority?: Priority;
-    variant?: Variant;
-    size?: Size;
-    bodyState?: BodyState,
-    split?: Split;
-    transparent?: boolean;
-    onClick?: (e: MouseEvent) => void;
-    onEscape?: (e: KeyboardEvent<HTMLButtonElement | HTMLAnchorElement>) => void;
-    forwardedRef?: RefObject<HTMLAnchorElement & HTMLButtonElement>;
-    borderless?: boolean;
-    fixedHeight?: boolean;
-}
-
-type Props = ComponentProps<'button'> & ComponentProps<'a'> & EbayButtonProps;
-
-const EbayButton:FC<Props> = ({
-    priority = 'secondary',
-    variant = 'standard',
-    size = 'regular',
-    bodyState,
-    split,
-    transparent = false,
-    fluid = false,
-    disabled,
-    partiallyDisabled,
-    children,
-    onKeyDown = () => {},
-    onEscape = () => {},
-    truncate = false,
-    href,
-    className: extraClasses,
-    forwardedRef,
-    borderless,
-    fixedHeight,
-    ...rest
-}) => {
-    const classPrefix = href ? 'fake-btn' : 'btn'
-    const priorityStyles: { [key in Priority]: string } = {
-        primary: `${classPrefix}--primary`,
-        secondary: `${classPrefix}--secondary`,
-        tertiary: `${classPrefix}--tertiary`,
-        none: ''
-    }
-    const sizeStyles: { [key in Size]: string } = {
-        large: `${classPrefix}--large`,
-        small: `${classPrefix}--small`,
-        regular: '',
-        default: ''
-    }
-    const splitStyles: { [key in Split]: string } = {
-        start: `${classPrefix}--split-start`,
-        end: `${classPrefix}--split-end`
-    }
-    const isDestructive = variant === 'destructive'
-    const isForm = variant === 'form'
-    const isLoading = bodyState === 'loading'
-    const isExpand = bodyState === 'expand'
-    const isSlim = isForm && (isIconOnly(children) || (isExpand && !children))
-    const className = classNames(
-        classPrefix,
-        extraClasses,
-        priorityStyles[isForm || borderless ? 'none' : priority],
-        sizeStyles[size],
-        splitStyles[split],
-        isDestructive && `${classPrefix}--destructive`,
-        isForm && `${classPrefix}--form`,
-        isSlim && `${classPrefix}--slim`,
-        transparent && `${classPrefix}--transparent`,
-        fluid && `${classPrefix}--fluid`,
-        truncate && `${classPrefix}--truncated`,
-        borderless && `${classPrefix}--borderless`,
-        fixedHeight && (sizeStyles[size] ? `${sizeStyles[size]}-${fixedHeight}` : `${classPrefix}--fixed-height`)
-    )
-
-    const keyDownHandler = (e: KeyboardEvent<HTMLButtonElement & HTMLAnchorElement>) => {
-        onKeyDown(e)
-        if (e.key === 'Escape' || e.key === 'Esc') {
-            onEscape(e)
-        }
-    }
-
-    const bodyContent = getBodyContent(children, { isLoading, isExpand })
-    const ariaLive = isLoading ? `polite` : null
-
-    return href ? (
-        <a
-            className={className}
-            href={disabled ? undefined : href}
-            ref={forwardedRef}
-            onKeyDown={keyDownHandler}
-            aria-live={ariaLive}
-            {...rest}
-        >
-            {bodyContent}
-        </a>
-    ) : (
-        <button
-            disabled={disabled}
-            aria-disabled={partiallyDisabled}
-            aria-live={ariaLive}
-            className={className}
-            ref={forwardedRef}
-            onKeyDown={keyDownHandler}
-            {...rest}
-        >
-            {bodyContent}
-        </button>
-    )
-}
-
-type bodyContentOptions = {
-    isLoading: boolean;
-    isExpand: boolean;
-}
-
-function getBodyContent(children: ReactNode, { isLoading, isExpand }: bodyContentOptions) {
-    switch (true) {
-        case isLoading:
-            return <EbayButtonLoading />
-        case isExpand:
-            return <EbayButtonExpand>{children}</EbayButtonExpand>
-        default:
-            return children
-    }
-}
-
-function isIconOnly(children: ReactNode): boolean {
-    const childrenArray = Children.toArray(children) as ReactElement[]
-    return childrenArray.length === 1 && childrenArray[0].type === EbayIcon
-}
-
-export default withForwardRef(EbayButton)

package/src/ebay-button/index.ts

@@ -1,3 +0,0 @@
-export { default as EbayButton, type EbayButtonProps } from './button'
-export { default as EbayButtonCell } from './button-cell'
-export type { Size, Priority } from './types'

package/src/ebay-button/types.ts

@@ -1,9 +0,0 @@
-export type Priority = 'primary' | 'secondary' | 'tertiary' | 'none'
-
-export type Variant = 'standard' | 'destructive' | 'form'
-
-export type Size = 'default' /* DEPRECATED */ | 'regular' | 'small' | 'large'
-
-export type BodyState = 'loading' | 'expand' | 'reset' | 'none'
-
-export type Split = 'start' | 'end';

package/src/ebay-calendar/__tests__/__snapshots__/render.spec.tsx.snap

@@ -1,27 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`ebay-calendar rendering renders navigable story correctly 1`] = `
-<svg
-  aria-hidden="true"
-  class="icon icon--24"
-  focusable="false"
-  xmlns="http://www.w3.org/2000/svg"
->
-  <use
-    xlink:href="#icon-chevron-left-24"
-  />
-</svg>
-`;
-
-exports[`ebay-calendar rendering renders navigable story correctly 2`] = `
-<svg
-  aria-hidden="true"
-  class="icon icon--24"
-  focusable="false"
-  xmlns="http://www.w3.org/2000/svg"
->
-  <use
-    xlink:href="#icon-chevron-right-24"
-  />
-</svg>
-`;

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

@@ -1,99 +0,0 @@
-import React from 'react'
-
-import { waitFor, fireEvent, render, screen, act } from '@testing-library/react'
-import { eventOfType } from '../../common/event-utils/__tests__/helpers'
-import { EbayCalendar } from '../index'
-
-jest
-    .useFakeTimers()
-    .setSystemTime(new Date('2024-01-05').getTime())
-
-describe('<EbayCalendar />', () => {
-    it('should change day focused as we navigate with keyboard', async () => {
-        render(<EbayCalendar interactive selected="2024-01-01" />)
-        const day = screen.getByText('1')
-        act(() => { day.focus() })
-        fireEvent.keyDown(day, { key: 'ArrowRight' })
-        await waitFor(() => expect(screen.getByText('2')).toHaveFocus())
-        fireEvent.keyDown(day, { key: 'ArrowDown' })
-        await waitFor(() => expect(screen.getByText('9')).toHaveFocus())
-        fireEvent.keyDown(day, { key: 'ArrowLeft' })
-        await waitFor(() => expect(screen.getByText('8')).toHaveFocus())
-        fireEvent.keyDown(day, { key: 'ArrowUp' })
-        await waitFor(() => expect(screen.getByText('1')).toHaveFocus())
-    })
-
-    it('should call onFocus with the date that has focus', async () => {
-        const onFocus = jest.fn()
-        render(<EbayCalendar interactive selected="2024-01-01" onFocus={onFocus} />)
-        const day = screen.getByText('1')
-        day.focus()
-        await waitFor(() => expect(onFocus).toHaveBeenCalledWith(eventOfType('focus'), { iso: '2024-01-01' }))
-        fireEvent.keyDown(day, { key: 'ArrowRight' })
-        await waitFor(() => expect(onFocus).toHaveBeenCalledWith(eventOfType('focus'), { iso: '2024-01-02' }))
-        fireEvent.keyDown(day, { key: 'ArrowDown' })
-        await waitFor(() => expect(onFocus).toHaveBeenCalledWith(eventOfType('focus'), { iso: '2024-01-09' }))
-        fireEvent.keyDown(day, { key: 'ArrowLeft' })
-        await waitFor(() => expect(onFocus).toHaveBeenCalledWith(eventOfType('focus'), { iso: '2024-01-08' }))
-        fireEvent.keyDown(day, { key: 'ArrowUp' })
-        await waitFor(() => expect(onFocus).toHaveBeenCalledWith(eventOfType('focus'), { iso: '2024-01-01' }))
-
-        await waitFor(() => expect(onFocus).toHaveBeenCalledTimes(5))
-    })
-
-    it('should call onSelect with event and passed iso date on selection', () => {
-        const onSelect = jest.fn()
-        render(<EbayCalendar interactive onSelect={onSelect} selected="2024-01-05" />)
-        const day = screen.getByText('1')
-        fireEvent.click(day)
-        expect(onSelect).toHaveBeenCalledWith(eventOfType('click'), { iso: '2024-01-01' })
-    })
-
-    it('should go to next month on page down', () => {
-        render(<EbayCalendar interactive selected="2024-01-01" />)
-        const day = screen.getByText('1')
-        expect(screen.queryByText('February 2024')).not.toBeInTheDocument()
-        fireEvent.keyDown(day, { key: 'PageDown' })
-        expect(screen.getByText('February 2024')).toBeInTheDocument()
-    })
-
-    it('should go on previous month on page up', () => {
-        render(<EbayCalendar interactive selected="2024-01-01" />)
-        const day = screen.getByText('1')
-        expect(screen.queryByText('December 2023')).not.toBeInTheDocument()
-        fireEvent.keyDown(day, { key: 'PageUp' })
-        expect(screen.getByText('December 2023')).toBeInTheDocument()
-    })
-
-    it('should focus on first day of the month on home', async () => {
-        render(<EbayCalendar interactive selected="2024-01-15" />)
-        const day = screen.getByText('15')
-        fireEvent.keyDown(day, { key: 'Home' })
-        await waitFor(() => expect(screen.getByText('1')).toHaveFocus())
-    })
-
-    it('should focus on last day of the month on end', async () => {
-        render(<EbayCalendar interactive selected="2024-02-15" />)
-        const day = screen.getByText('15')
-        fireEvent.keyDown(day, { key: 'End' })
-        await waitFor(() => expect(screen.getByText('29')).toHaveFocus())
-    })
-
-    it('should set aria-pressed for the selected day only', () => {
-        render(<EbayCalendar interactive selected="2024-01-13" />)
-        const day = screen.getByText('13')
-        expect(day).toHaveAttribute('aria-pressed', 'true')
-
-        const nonSelected = screen.getByText('1')
-        expect(nonSelected).not.toHaveAttribute('aria-pressed')
-    })
-
-    it('should support multiple selected dates', () => {
-        render(<EbayCalendar interactive selected={['2024-01-13', '2024-01-14']} />)
-        const day1 = screen.getByText('13')
-        expect(day1).toHaveAttribute('aria-pressed', 'true')
-
-        const day2 = screen.getByText('14')
-        expect(day2).toHaveAttribute('aria-pressed', 'true')
-    })
-})

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

@@ -1,65 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react'
-import { EbayCalendar } from '../index'
-import { EbayCalendarProps } from '../calendar'
-
-const story: Meta<typeof EbayCalendar> = {
-    component: EbayCalendar,
-    title: 'building blocks/ebay-calendar'
-}
-
-export const Default: StoryObj<EbayCalendarProps> = {}
-
-export const Interactive: StoryObj<EbayCalendarProps> = {
-    args: {
-        interactive: true,
-        selected: '2024-01-03'
-    }
-}
-
-export const MultipleMonths: StoryObj<EbayCalendarProps> = {
-    args: {
-        interactive: true,
-        numMonths: 2,
-        selected: '2024-01-03'
-    }
-}
-
-export const Navigable: StoryObj<EbayCalendarProps> = {
-    args: {
-        interactive: true,
-        navigable: true,
-        numMonths: 2,
-        selected: '2024-01-03'
-    }
-}
-
-export const RangeSelected: StoryObj<EbayCalendarProps> = {
-    args: {
-        interactive: true,
-        range: true,
-        numMonths: 2,
-        selected: ['2024-01-03', '2025-02-01']
-    }
-}
-
-export const DisableBeforeAndAfter: StoryObj<EbayCalendarProps> = {
-    args: {
-        interactive: true,
-        navigable: true,
-        range: true,
-        numMonths: 2,
-        selected: ['2024-01-03', '2025-02-01'],
-        disableBefore: '2024-01-03',
-        disableAfter: '2025-02-01'
-    }
-}
-
-export const DisableWeekdays: StoryObj<EbayCalendarProps> = {
-    args: {
-        interactive: true,
-        numMonths: 2,
-        disableWeekdays: [0, 6]
-    }
-}
-
-export default story

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

@@ -1,68 +0,0 @@
-import React from 'react'
-import { render, screen } from '@testing-library/react'
-import { composeStory } from '@storybook/react'
-import Meta, { Default, Navigable, RangeSelected } from './index.stories'
-
-jest
-    .useFakeTimers()
-    .setSystemTime(new Date('2024-03-05').getTime())
-
-const DefaultStory = composeStory(Default, Meta)
-const NavigableStory = composeStory(Navigable, Meta)
-const RangeSelectedStory = composeStory(RangeSelected, Meta)
-
-describe('ebay-calendar rendering', () => {
-    it('renders default story correctly', () => {
-        const { container } = render(<DefaultStory />)
-        expect(container.querySelector('.calendar')).toBeInTheDocument()
-        expect(container.querySelector('.calendar__body')).toBeInTheDocument()
-        expect(container.querySelector('.calendar__cell--current').textContent.length).toBeGreaterThan(0)
-        expect(screen.getByRole('table')).toBeInTheDocument()
-        expect(screen.getByText('Sun')).toBeInTheDocument()
-        expect(screen.getByText('Mon')).toBeInTheDocument()
-        expect(screen.getByText('Tue')).toBeInTheDocument()
-        expect(screen.getByText('Wed')).toBeInTheDocument()
-        expect(screen.getByText('Thu')).toBeInTheDocument()
-        expect(screen.getByText('Fri')).toBeInTheDocument()
-        expect(screen.getByText('Sat')).toBeInTheDocument()
-    })
-
-    it('renders navigable story correctly', async () => {
-        const { container } = render(<NavigableStory />)
-        expect(container.querySelector('.calendar')).toBeInTheDocument()
-
-        const buttonPrev = screen.getByLabelText('Show February 2024')
-        expect(buttonPrev).toHaveClass('icon-btn icon-btn--small icon-btn--transparent')
-        expect(buttonPrev).toHaveAttribute('type', 'button')
-        const svgPrev = buttonPrev.querySelector('svg')
-        expect(svgPrev).toMatchSnapshot()
-
-        const buttonNext = screen.getByLabelText('Show May 2024')
-        expect(buttonNext).toHaveClass('icon-btn icon-btn--small icon-btn--transparent')
-        expect(buttonNext).toHaveAttribute('type', 'button')
-        const svgNext = buttonNext.querySelector('svg')
-        expect(svgNext).toMatchSnapshot()
-
-        const [month1, month2] = screen.getAllByRole('heading', { level: 3 })
-        expect(month1.textContent).toEqual('March 2024')
-        expect(month2.textContent).toEqual('April 2024')
-
-        expect(screen.getByRole('table', { name: 'March 2024' })).toBeInTheDocument()
-        expect(screen.getByRole('table', { name: 'April 2024' })).toBeInTheDocument()
-
-        // todo: fix it in code
-        // const selectedDate = screen.getByLabelText('3-selected');
-
-        // await waitFor(() =>
-        // expect(selectedDate).toBeInTheDocument()
-        // expect(selectedDate).toHaveAttribute('data-iso', '2024-01-03')
-        // , { timeout: 5000 })
-    })
-
-    // todo: finish after bug fix
-    it.skip('renders range selected story correctly', () => {
-        const { container } = render(<RangeSelectedStory />)
-        expect(container.querySelector('.calendar')).toBeInTheDocument()
-        expect(screen.getByRole('table')).toBeInTheDocument()
-    })
-})