@ebay/ui-core-react 7.3.0 → 7.3.2

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,27 @@
+// 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>
+`;