@ebay/ui-core-react 7.3.2 → 7.3.4

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

@@ -1,406 +0,0 @@
-import React from 'react'
-import { StoryFn, Meta } from '@storybook/react'
-import { action } from '@storybook/addon-actions'
-import { EbayButton, EbayButtonCell } from '../index'
-import EbayIcon from '../../ebay-icon/icon'
-
-const meta: Meta<typeof EbayButton> = {
-    component: EbayButton,
-    title: 'buttons/ebay-button'
-}
-
-export default meta
-
-export const Default: StoryFn<typeof EbayButton> = () => (
-    <>
-        <p>
-            <EbayButton
-                onClick={action('clicked')}
-                onEscape={action('escape pressed')}
-                onFocus={(e) => action('focus')(e)}
-                onBlur={action('blur')}
-                onKeyDown={action('key down')}
-            >
-                Hello, I am a button!
-            </EbayButton>
-        </p>
-        <p>
-            <EbayButton href="https://ebay.com">Hello, I am a link!</EbayButton>
-        </p>
-    </>
-)
-
-export const Size: StoryFn<typeof EbayButton> = () => (
-    <>
-        <p>
-            <EbayButton size="large">Large Button</EbayButton>
-        </p>
-        <p>
-            <EbayButton href="https://ebay.com" size="large">
-                Large Link
-            </EbayButton>
-        </p>
-        <p>
-            <EbayButton size="default">Default Size Button</EbayButton>
-        </p>
-        <p>
-            <EbayButton size="default" href="https://ebay.com">
-                Default Size Link
-            </EbayButton>
-        </p>
-    </>
-)
-
-export const Priority: StoryFn<typeof EbayButton> = () => (
-    <>
-        <p>
-            <EbayButton priority="primary">Primary Button</EbayButton>
-        </p>
-        <p>
-            <EbayButton priority="primary" href="https://ebay.com">
-                Primary Link
-            </EbayButton>
-        </p>
-        <p>
-            <EbayButton priority="secondary">Secondary Button</EbayButton>
-        </p>
-        <p>
-            <EbayButton priority="secondary" href="https://ebay.com">
-                Secondary Link
-            </EbayButton>
-        </p>
-        <p>
-            <EbayButton>Secondary Button (Default)</EbayButton>
-        </p>
-        <p>
-            <EbayButton href="https://ebay.com">Secondary Link (Default)</EbayButton>
-        </p>
-        <p>
-            <EbayButton priority="tertiary">Tertiary Button</EbayButton>
-        </p>
-        <p>
-            <EbayButton priority="tertiary" href="https://ebay.com">
-                Tertiary Link
-            </EbayButton>
-        </p>
-        <p>
-            <EbayButton priority="none">Base Button</EbayButton>
-        </p>
-    </>
-)
-
-export const DestructiveVariant: StoryFn<typeof EbayButton> = () => (
-    <>
-        <p>
-            <EbayButton priority="primary" variant="destructive">
-                Primary Button
-            </EbayButton>
-        </p>
-        <p>
-            <EbayButton priority="primary" variant="destructive" href="https://ebay.com">
-                Primary Link
-            </EbayButton>
-        </p>
-        <p>
-            <EbayButton priority="secondary" variant="destructive">
-                Secondary Button
-            </EbayButton>
-        </p>
-        <p>
-            <EbayButton priority="secondary" variant="destructive" href="https://ebay.com">
-                Secondary Link
-            </EbayButton>
-        </p>
-        <p>
-            <EbayButton priority="tertiary" variant="destructive">
-                Tertiary Button
-            </EbayButton>
-        </p>
-        <p>
-            <EbayButton priority="tertiary" variant="destructive" href="https://ebay.com">
-                Tertiary Link
-            </EbayButton>
-        </p>
-    </>
-)
-
-export const Fluid: StoryFn<typeof EbayButton> = () => (
-    <>
-        <p>
-            <EbayButton priority="primary" fluid>
-                Primary Button
-            </EbayButton>
-        </p>
-        <p>
-            <EbayButton fluid>Secondary Button</EbayButton>
-        </p>
-        <p>
-            <EbayButton fluid href="https://www.ebay.com">
-                Link
-            </EbayButton>
-        </p>
-    </>
-)
-
-export const WithIcon: StoryFn<typeof EbayButton> = () => (
-    <>
-        <p>
-            Form button:
-            <br />
-            <EbayButton aria-label="Menu button">
-                <EbayIcon name="menu20" />
-                <span>Button with icon</span>
-            </EbayButton>
-        </p>
-        <p>
-            Form fake-button (link):
-            <br />
-            <EbayButton href="#" variant="form" aria-label="Settings link">
-                <EbayIcon name="settings16" />
-                <span>Button with icon</span>
-            </EbayButton>
-        </p>
-        <p>
-            Delete button:
-            <br />
-            <EbayButton variant="destructive" aria-label="Destructive button">
-                <EbayIcon name="delete16" />
-                <span>Button with icon</span>
-            </EbayButton>
-        </p>
-        <p>
-            Expand button:
-            <br />
-            <EbayButton bodyState="expand" aria-label="Destructive button">
-                <EbayIcon name="settings16" />
-                <span>Expand button</span>
-            </EbayButton>
-        </p>
-    </>
-)
-
-export const IconOnly: StoryFn<typeof EbayButton> = () => (
-    <>
-        <p>
-            Form button:
-            <br />
-            <EbayButton variant="form" aria-label="Menu button">
-                <EbayIcon name="menu20" />
-            </EbayButton>
-        </p>
-        <p>
-            Form fake-button (link):
-            <br />
-            <EbayButton href="#" variant="form" aria-label="Settings link">
-                <EbayIcon name="settings16" />
-            </EbayButton>
-        </p>
-        <p>
-            Delete button:
-            <br />
-            <EbayButton variant="destructive" aria-label="Destructive button">
-                <EbayIcon name="delete16" />
-            </EbayButton>
-        </p>
-    </>
-)
-
-export const Transparent: StoryFn<typeof EbayButton> = () => (
-    <div style={{ background: 'rgba(66, 214, 205, 0.5)' }}>
-        <p>
-            <EbayButton>Default Button</EbayButton>
-        </p>
-        <p>
-            <EbayButton transparent>Transparent Button</EbayButton>
-        </p>
-        <p>
-            <EbayButton transparent priority="secondary" variant="destructive">
-                Transparent Destructive Button
-            </EbayButton>
-        </p>
-        <p>
-            <EbayButton href="https://ebay.com" transparent>
-                Transparent Link
-            </EbayButton>
-        </p>
-    </div>
-)
-
-export const Disabled: StoryFn<typeof EbayButton> = () => (
-    <>
-        <p>
-            <EbayButton priority="primary" disabled>
-                Primary Button
-            </EbayButton>
-        </p>
-        <p>
-            <EbayButton disabled>Secondary Button</EbayButton>
-        </p>
-        <p>
-            <EbayButton href="https://ebay.com" disabled>
-                Link
-            </EbayButton>
-        </p>
-    </>
-)
-
-export const PartiallyDisabledButton: StoryFn<typeof EbayButton> = () => (
-    <EbayButton priority="primary" partiallyDisabled>
-        Hello, I am a button!
-    </EbayButton>
-)
-
-export const Truncated: StoryFn<typeof EbayButton> = () => (
-    <div>
-        <p>
-            <EbayButton truncate style={{ maxWidth: '200px' }}>
-                Hello, I am a button! this is a long text
-            </EbayButton>
-        </p>
-        <p>
-            <EbayButton size="large" truncate style={{ maxWidth: '200px' }}>
-                Hello, I am a BIG button! this is a long text
-            </EbayButton>
-        </p>
-        <p>
-            <EbayButton href="https://ebay.com" truncate style={{ maxWidth: '200px' }}>
-                Hello, I am a link! this is a long text
-            </EbayButton>
-        </p>
-    </div>
-)
-
-export const FlexButton: StoryFn<typeof EbayButton> = () => (
-    <EbayButton priority="primary" fluid>
-        <EbayButtonCell style={{ justifyContent: 'space-between' }}>
-            <span>Select</span>
-            <span style={{ display: 'inline-flex' }}>
-                <span>Any</span>
-                <EbayIcon name="chevronDown12" />
-            </span>
-        </EbayButtonCell>
-    </EbayButton>
-)
-
-export const LoadingButton: StoryFn<typeof EbayButton> = () => (
-    <>
-        <p>
-            <EbayButton bodyState="loading" />
-        </p>
-        <p>
-            <EbayButton priority="primary" bodyState="loading" />
-        </p>
-        <p>
-            <EbayButton priority="tertiary" bodyState="loading" />
-        </p>
-        <p>
-            <EbayButton variant="form" bodyState="loading" />
-        </p>
-        <p>
-            <EbayButton variant="destructive" bodyState="loading" />
-        </p>
-    </>
-)
-
-export const ExpandButton: StoryFn<typeof EbayButton> = () => (
-    <>
-        <p>
-            <EbayButton priority="primary" bodyState="expand">
-                Primary expand button
-            </EbayButton>{' '}
-            <EbayButton priority="primary" bodyState="expand" aria-expanded="true">
-                Expanded button
-            </EbayButton>
-        </p>
-        <p>
-            <EbayButton bodyState="expand">Expand button</EbayButton>
-        </p>
-        <p>
-            <EbayButton priority="tertiary" bodyState="expand">
-                Tertiary expand button
-            </EbayButton>
-        </p>
-        <p>
-            <EbayButton variant="form" bodyState="expand">
-                Form expand button
-            </EbayButton>{' '}
-            <EbayButton variant="form" bodyState="expand" />{' '}
-            <EbayButton variant="form" bodyState="expand" aria-expanded />
-        </p>
-        <p>
-            <EbayButton priority="primary" bodyState="expand" borderless>
-                Borderless expand button
-            </EbayButton>
-        </p>
-    </>
-)
-
-export const SplitButton: StoryFn<typeof EbayButton> = () => (
-    <>
-        <p>
-            <EbayButton priority="primary" split="start">
-                Primary split start button
-            </EbayButton>
-            <EbayButton priority="primary" split="end">
-                Primary split end button
-            </EbayButton>
-        </p>
-        <p>
-            <EbayButton split="start">Split start button</EbayButton>
-            <EbayButton split="end">Split end button</EbayButton>
-        </p>
-        <p>
-            <EbayButton priority="tertiary" split="start">
-                Tertiary split start button
-            </EbayButton>
-            <EbayButton priority="tertiary" split="end">
-                Tertiary split end button
-            </EbayButton>
-        </p>
-        <p>
-            <EbayButton priority="primary" split="start">
-                Primary Split button
-            </EbayButton>
-            <EbayButton priority="primary" bodyState="expand" split="end" />
-        </p>
-        <p>
-            <EbayButton split="start">Split button</EbayButton>
-            <EbayButton bodyState="expand" split="end" />
-        </p>
-        <p>
-            <EbayButton priority="tertiary" split="start">
-                Tertiary split button
-            </EbayButton>
-            <EbayButton priority="tertiary" bodyState="expand" split="end" />
-        </p>
-    </>
-)
-
-export const FormButton: StoryFn<typeof EbayButton> = () => (
-    <>
-        <p>
-            <EbayButton variant="form">Form button</EbayButton>
-        </p>
-    </>
-)
-
-export const BorderlessButton: StoryFn<typeof EbayButton> = () => (
-    <>
-        <p>
-            <EbayButton borderless>Borderless button</EbayButton>
-        </p>
-    </>
-)
-
-export const FixedHeight: StoryFn<typeof EbayButton> = () => (
-    <>
-        <p>
-            <EbayButton fixedHeight>Fixed height button</EbayButton>
-        </p>
-        <p>
-            <EbayButton fixedHeight size="large">
-                Fixed height large button
-            </EbayButton>
-        </p>
-    </>
-)

package/src/ebay-button/button-cell.tsx

@@ -1,21 +0,0 @@
-import React, { ComponentProps, FC } from 'react'
-
-type ButtonType = 'cta' | 'fake' | 'expand' | 'default'
-type Props = ComponentProps<'span'> & {
-    type?: ButtonType;
-}
-
-const classNames: { [key in ButtonType]: string } = {
-    cta: 'cta-',
-    fake: 'fake-',
-    expand: 'expand-',
-    default: ''
-}
-
-const EbayButtonCell:FC<Props> = ({
-    type = 'default',
-    children,
-    ...rest
-}) => <span className={`${classNames[type]}btn__cell`} {...rest}><>{children}</></span>
-
-export default EbayButtonCell

package/src/ebay-button/button-expand.tsx

@@ -1,18 +0,0 @@
-import React, { FC, ReactNode } from 'react'
-import EbayButtonCell from './button-cell'
-import EbayButtonText from './button-text'
-import { EbayIcon } from '../ebay-icon'
-
-const EbayButtonExpand: FC<{ children?: ReactNode }> = ({ children }) =>
-    children ? (
-        <EbayButtonCell>
-            <EbayButtonText>
-                {children}
-            </EbayButtonText>
-            <EbayIcon name="chevronDown12" />
-        </EbayButtonCell>
-    ) : (
-        <EbayIcon name="chevronDown12" />
-    )
-
-export default EbayButtonExpand

package/src/ebay-button/button-loading.tsx

@@ -1,11 +0,0 @@
-import React, { FC } from 'react'
-import EbayButtonCell from './button-cell'
-import { EbayProgressSpinner } from '../ebay-progress-spinner'
-
-const EbayButtonLoading: FC = () => (
-    <EbayButtonCell>
-        <EbayProgressSpinner />
-    </EbayButtonCell>
-)
-
-export default EbayButtonLoading

package/src/ebay-button/button-text.tsx

@@ -1,10 +0,0 @@
-import React, { ComponentProps, FC } from 'react'
-import classNames from 'classnames'
-
-type Props = ComponentProps<'span'>
-
-const EbayButtonText: FC<Props> = ({ className, children }) => (
-    <span className={classNames(className, 'btn__text')}>{children}</span>
-)
-
-export default EbayButtonText

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>
-`;