@ebay/ui-core-react 7.3.1 → 7.3.2

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

@@ -0,0 +1,162 @@
+import React, { useState, useRef, ChangeEvent } from 'react'
+import { StoryFn, Meta } from '@storybook/react'
+import { action } from '@storybook/addon-actions'
+import { EbayLabel } from '../../ebay-field'
+import { EbayCheckbox } from '../index'
+
+const meta: Meta<typeof EbayCheckbox> = {
+    component: EbayCheckbox,
+    title: 'form input/ebay-checkbox'
+}
+
+export default meta
+
+export const DefaultCheckboxButton: StoryFn<typeof EbayCheckbox> = () => (
+    <>
+        <p>
+            <EbayCheckbox
+                value="123"
+                id="checkbox-11"
+                onChange={(e, props) => action('onChange')(e, props)}
+                onFocus={(e, props) => action('onFocus')(e, props)}
+                onKeyDown={(e, props) => action('onKeyDown')(e, props)}
+            >
+                <EbayLabel>Default</EbayLabel>
+            </EbayCheckbox>
+        </p>
+        <p>
+            <EbayCheckbox value="123" id="checkbox-12" size="large">
+                <EbayLabel>Large</EbayLabel>
+            </EbayCheckbox>
+        </p>
+    </>
+)
+
+export const SelectedCheckboxButton: StoryFn<typeof EbayCheckbox> = () => (
+    <>
+        <p>
+            <EbayCheckbox checked value="123" id="checkbox-21">
+                <EbayLabel>Default</EbayLabel>
+            </EbayCheckbox>
+        </p>
+        <p>
+            <EbayCheckbox checked value="123" id="checkbox-22" size="large">
+                <EbayLabel>Large</EbayLabel>
+            </EbayCheckbox>
+        </p>
+    </>
+)
+
+export const DisabledCheckboxButton: StoryFn<typeof EbayCheckbox> = () => (
+    <>
+        <p>
+            <EbayCheckbox disabled value="123" id="checkbox-31">
+                <EbayLabel>Default disabled</EbayLabel>
+            </EbayCheckbox>
+        </p>
+        <p>
+            <EbayCheckbox disabled value="123" id="checkbox-32" size="large">
+                <EbayLabel>Large disabled</EbayLabel>
+            </EbayCheckbox>
+        </p>
+    </>
+)
+
+export const GroupedCheckboxButtons: StoryFn<typeof EbayCheckbox> = () => (
+    <fieldset>
+        <legend>Choose an Option</legend>
+        <span className="field">
+            <EbayCheckbox
+                id="group-checkbox-1"
+                value="1"
+                onChange={action('checkbox-change')}
+                name="checkbox-group"
+            >
+                <EbayLabel>Option 1</EbayLabel>
+            </EbayCheckbox>
+        </span>
+        <span className="field">
+            <EbayCheckbox
+                id="group-checkbox-2"
+                value="2"
+                onChange={action('checkbox-change')}
+                name="checkbox-group"
+            >
+                <EbayLabel>Option 2</EbayLabel>
+            </EbayCheckbox>
+        </span>
+        <span className="field">
+            <EbayCheckbox
+                id="group-checkbox-3"
+                value="3"
+                onChange={action('checkbox-change')}
+                name="checkbox-group"
+            >
+                <EbayLabel>Option 3</EbayLabel>
+            </EbayCheckbox>
+        </span>
+    </fieldset>
+)
+
+export const StyledCheckboxButton: StoryFn<typeof EbayCheckbox> = () => (
+    <span className="checkbox">
+        <style
+            dangerouslySetInnerHTML={{
+                __html: `
+                .custom ~ label { color: green; }
+                .custom ~ .checkbox__icon svg { color: green !important; }
+            `
+            }}
+        />
+        <EbayCheckbox className="custom" aria-label="custom color checkbox example" id="checkbox-30">
+            <EbayLabel>Custom style</EbayLabel>
+        </EbayCheckbox>
+    </span>
+)
+
+export const ControlValueFromOutside: StoryFn<typeof EbayCheckbox> = () => {
+    const Controller = () => {
+        const [isChecked, setChecked] = useState(true)
+        const [isDisabled, setDisabled] = useState(false)
+        const counter = useRef(0)
+        const handleOnChange = (
+            e: ChangeEvent<HTMLInputElement>,
+            {
+                value,
+                checked
+            }: {
+                value: string | number;
+                checked: boolean;
+            }
+        ) => {
+            if (counter.current < 4) {
+                setChecked(checked)
+            } else {
+                setDisabled(true)
+            }
+            counter.current++
+        }
+
+        return (
+            <EbayCheckbox
+                className="custom"
+                onChange={handleOnChange}
+                checked={isChecked}
+                aria-label="custom color checkbox example"
+                id="checkbox-30"
+                disabled={isDisabled}
+            >
+                {isDisabled ? (
+                    <EbayLabel>Disabled</EbayLabel>
+                ) : (
+                    <EbayLabel>Gets disabled after {5 - counter.current} clicks</EbayLabel>
+                )}
+            </EbayCheckbox>
+        )
+    }
+    return (
+        <>
+            <Controller />
+        </>
+    )
+}

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

@@ -0,0 +1,39 @@
+import React from 'react'
+import { render, screen } from '@testing-library/react'
+import { composeStory } from '@storybook/react'
+import Meta, { DefaultCheckboxButton, SelectedCheckboxButton, DisabledCheckboxButton, GroupedCheckboxButtons } from './index.stories'
+
+const DefaultCheckboxButtonInstance = composeStory(DefaultCheckboxButton, Meta)
+const SelectedCheckboxButtonInstance = composeStory(SelectedCheckboxButton, Meta)
+const DisabledCheckboxButtonInstance = composeStory(DisabledCheckboxButton, Meta)
+const GroupedCheckboxButtonsInstance = composeStory(GroupedCheckboxButtons, Meta)
+
+describe('ebay-checkbox rendering', () => {
+    it('DefaultCheckboxButton instance', () => {
+        render(<DefaultCheckboxButtonInstance />)
+        const checkbox = screen.getAllByRole('checkbox')[0]
+        expect(checkbox).toHaveClass('checkbox__control')
+    })
+
+    it('SelectedCheckboxButton instance', () => {
+        render(<SelectedCheckboxButtonInstance />)
+        const checkbox = screen.getAllByRole('checkbox')[0]
+        expect(checkbox).toHaveClass('checkbox__control')
+        expect(checkbox).toHaveAttribute('checked')
+    })
+
+    it('DisabledCheckboxButton instance', () => {
+        render(<DisabledCheckboxButtonInstance />)
+        const checkbox = screen.getAllByRole('checkbox')[0]
+        expect(checkbox).toHaveClass('checkbox__control')
+        expect(checkbox).toHaveAttribute('disabled')
+    })
+
+    it('GroupedCheckboxButtons instance', () => {
+        render(<GroupedCheckboxButtonsInstance />)
+        const checkboxes = screen.getAllByRole('checkbox')
+        checkboxes.forEach(checkbox => {
+            expect(checkbox).toHaveClass('checkbox__control')
+        })
+    })
+})

package/src/ebay-checkbox/checkbox.tsx

@@ -0,0 +1,89 @@
+import React, { ChangeEvent, cloneElement, ComponentProps, FC, FocusEvent, KeyboardEvent, useState } from 'react'
+import classNames from 'classnames'
+import { EbayIcon } from '../ebay-icon'
+import { EbayLabel, EbayLabelProps } from '../ebay-field'
+import { findComponent } from '../common/component-utils'
+import { EbayChangeEventHandler, EbayFocusEventHandler, EbayKeyboardEventHandler } from '../common/event-utils/types'
+
+type Size = 'default' | 'large'
+type InputProps = Omit<ComponentProps<'input'>, 'size' | 'onChange' | 'onFocus' | 'onKeyDown'>
+type EbayCheckboxProps = {
+    size?: Size;
+    onChange?: EbayChangeEventHandler<HTMLInputElement, { value: string | number, checked: boolean }>;
+    onFocus?: EbayFocusEventHandler<HTMLInputElement, { value: string | number, checked: boolean }>;
+    onKeyDown?: EbayKeyboardEventHandler<HTMLInputElement, { value: string | number, checked: boolean }>;
+    inputRef?: React.LegacyRef<HTMLInputElement>;
+}
+
+const isControlled = checked => typeof checked !== 'undefined'
+
+const EbayCheckbox: FC<InputProps & EbayCheckboxProps> = ({
+    id,
+    size = 'default',
+    className,
+    style,
+    checked,
+    defaultChecked = false,
+    onChange = () => {},
+    onFocus = () => {},
+    onKeyDown = () => {},
+    children,
+    inputRef,
+    ...rest
+}) => {
+    const [isChecked, setChecked] = useState(defaultChecked)
+    const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
+        const input = e.target
+        onChange(e, { value: input?.value, checked: Boolean(input?.checked) })
+        setChecked(input?.checked)
+    }
+    const handleFocus = (e: FocusEvent<HTMLInputElement>) =>
+        onFocus(e, { value: e.target?.value, checked: Boolean(e.target?.checked) })
+
+    const handleKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {
+        const input = e.target as EventTarget & HTMLInputElement
+        onKeyDown(e, { value: input.value, checked: Boolean(input.checked) })
+    }
+
+    const containerClass = classNames('checkbox', className, { 'checkbox--large': size === 'large' })
+
+    const iconChecked = size === 'large' ?
+        <EbayIcon name="checkboxChecked24" className="checkbox__checked" /> :
+        <EbayIcon name="checkboxChecked18" className="checkbox__checked" />
+    const iconUnChecked = size === 'large' ?
+        <EbayIcon name="checkboxUnchecked24" className="checkbox__unchecked" /> :
+        <EbayIcon name="checkboxUnchecked18" className="checkbox__unchecked" />
+
+    const ebayLabel = findComponent(children, EbayLabel)
+
+    return (
+        <>
+            <span className={containerClass} style={{ ...style, alignItems: 'center' }}>
+                <input
+                    {...rest}
+                    id={id}
+                    className="checkbox__control"
+                    type="checkbox"
+                    checked={isControlled(checked) ? checked : isChecked}
+                    onChange={handleChange}
+                    onFocus={handleFocus}
+                    onKeyDown={handleKeyDown}
+                    ref={inputRef}
+                />
+                <span className="checkbox__icon" hidden>
+                    {iconChecked}{iconUnChecked}
+                </span>
+            </span>
+            {ebayLabel ?
+                cloneElement<EbayLabelProps>(ebayLabel, {
+                    ...ebayLabel.props,
+                    position: 'end',
+                    htmlFor: id
+                }) :
+                children
+            }
+        </>
+    )
+}
+
+export default EbayCheckbox

package/src/ebay-checkbox/index.ts

@@ -0,0 +1 @@
+export { default as EbayCheckbox } from './checkbox'

package/src/ebay-confirm-dialog/__tests__/index.spec.tsx

@@ -0,0 +1,59 @@
+import React from 'react'
+import { screen, render, fireEvent } from '@testing-library/react'
+import { EbayDialogHeader } from '../../ebay-dialog-base'
+import { EbayConfirmDialog } from '../index'
+
+jest.mock('../../common/random-id')
+
+const openSpy = jest.fn()
+const confirmSpy = jest.fn()
+const rejectSpy = jest.fn()
+
+const showDialog = () =>
+    render(
+        <EbayConfirmDialog
+            open
+            animated={false}
+            confirmText="Confirm"
+            rejectText="Reject"
+            a11yCloseText="Close"
+            onOpen={openSpy}
+            onConfirm={confirmSpy}
+            onReject={rejectSpy}
+        >
+            <EbayDialogHeader>Heading</EbayDialogHeader>
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
+                incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
+                nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+            </p>
+            <p><a href="http://www.ebay.com">www.ebay.com</a></p>
+            <input placeholder="Enter a value" />
+        </EbayConfirmDialog>
+    )
+
+describe('<EbayConfirmDialog>', () => {
+    it('should focus on Confirm button', () => {
+        showDialog()
+        expect(screen.getByText('Confirm')).toHaveFocus()
+    })
+
+    it('should trigger onConfirm when Confirm button is clicked', () => {
+        showDialog()
+        fireEvent.click(screen.getByText('Confirm'))
+        expect(confirmSpy).toHaveBeenCalled()
+    })
+
+    it('should trigger onOpen when dialog appears', () => {
+        showDialog()
+        expect(openSpy).toHaveBeenCalled()
+    })
+
+    it('should trigger onReject when Reject button is clicked', () => {
+        showDialog()
+        const button = screen.getByText('Reject')
+        fireEvent.click(button)
+        expect(button).toBeInTheDocument()
+        expect(rejectSpy).toHaveBeenCalled()
+    })
+})

package/src/ebay-confirm-dialog/__tests__/index.stories.tsx

@@ -0,0 +1,70 @@
+import React, { useState } from 'react'
+import { EbayConfirmDialog } from '../index'
+import { EbayDialogHeader } from '../../ebay-dialog-base'
+import { action } from '@storybook/addon-actions'
+import { StoryFn, Meta } from '@storybook/react'
+
+const story: Meta<typeof EbayConfirmDialog> = {
+    component: EbayConfirmDialog,
+    title: 'dialogs/ebay-confirm-dialog'
+}
+
+export const Default: StoryFn<typeof EbayConfirmDialog> = (args) => {
+    const [open, setOpen] = useState(true)
+    const close = () => setOpen(false)
+
+    return (
+        <div>
+            <button className="btn btn--secondary" onClick={() => setOpen(!open)}>
+                Open Dialog
+            </button>
+            <p>Some outside content...</p>
+            <EbayConfirmDialog
+                open={open}
+                onOpen={() => action('onOpen')()}
+                onConfirm={() => {
+                    action('onConfirm')()
+                    close()
+                }}
+                onReject={() => {
+                    action('onReject')()
+                    close()
+                }}
+                confirmText="Okay"
+                rejectText="Cancel"
+                {...args}
+            >
+                <EbayDialogHeader>Delete Address?</EbayDialogHeader>
+                <p>You will permanently lose this address.</p>
+            </EbayConfirmDialog>
+        </div>
+    )
+}
+
+export const WithAnimation: StoryFn<typeof EbayConfirmDialog> = () => {
+    const [open, setOpen] = useState(false)
+    const close = () => setOpen(false)
+
+    return (
+        <div>
+            <button className="btn btn--secondary" onClick={() => setOpen(!open)}>
+                Open Dialog
+            </button>
+            <p>Some outside content...</p>
+            <EbayConfirmDialog
+                open={open}
+                onConfirm={close}
+                onReject={close}
+                confirmText="Cancel"
+                rejectText="Delete"
+                animated
+                a11yCloseText="Close"
+            >
+                <EbayDialogHeader>Delete Address?</EbayDialogHeader>
+                <p>You will permanently lose this address.</p>
+            </EbayConfirmDialog>
+        </div>
+    )
+}
+
+export default story

package/src/ebay-confirm-dialog/__tests__/render.spec.tsx

@@ -0,0 +1,42 @@
+import React from 'react'
+import { render, screen } from '@testing-library/react'
+import { composeStory } from '@storybook/react'
+import Meta, { Default, WithAnimation } from './index.stories'
+
+const DefaultStory = composeStory(Default, Meta)
+const AnimationStory = composeStory(WithAnimation, Meta)
+
+jest.mock('../../common/random-id')
+
+describe('ebay-confirm-dialog rendering', () => {
+    it('renders default story correctly', () => {
+        render(<DefaultStory />)
+
+        const dialog = screen.queryByRole('dialog')
+
+        expect(dialog).toHaveAttribute('aria-modal', 'true')
+        expect(dialog).toHaveClass('confirm-dialog confirm-dialog--mask-fade confirm-dialog--show-init')
+        expect(dialog).toHaveAttribute('aria-labelledby', 'dialog-title-abc123')
+        expect(dialog).toHaveAttribute('aria-hidden', 'false')
+
+        const h2 = screen.queryByRole('heading', { level: 2 })
+        expect(h2).toHaveAttribute('id', 'dialog-title-abc123')
+        expect(h2.textContent).toEqual('Delete Address?')
+
+        expect(screen.queryByText('You will permanently lose this address.')).toBeInTheDocument()
+        const [buttonCancel, buttonOkay] = screen.queryAllByRole('button')
+        expect(buttonCancel.textContent).toEqual('Cancel')
+        expect(buttonCancel).toHaveClass('btn confirm-dialog__reject btn--secondary')
+        expect(buttonOkay.textContent).toEqual('Okay')
+        expect(buttonOkay).toHaveAttribute('aria-describedby', 'confirm-dialog-main')
+        expect(buttonOkay).toHaveAttribute('id', 'confirm-dialog-confirm')
+        expect(buttonOkay).toHaveClass('btn confirm-dialog__confirm btn--primary')
+    })
+
+    it('renders animation story correctly', () => {
+        render(<AnimationStory />)
+
+        const dialog = screen.queryByRole('dialog')
+        expect(dialog).not.toBeInTheDocument()
+    })
+})

package/src/ebay-confirm-dialog/confirm-dialog.tsx

@@ -0,0 +1,63 @@
+import React, { FC, useRef } from 'react'
+import classNames from 'classnames'
+import { DialogBaseProps, DialogBaseWithState, EbayDialogFooter } from '../ebay-dialog-base'
+import { EbayButton } from '../ebay-button'
+
+const classPrefix = 'confirm-dialog'
+
+export interface Props<T = any> extends DialogBaseProps<T> {
+    open?: boolean;
+    confirmText: string;
+    rejectText: string;
+    onReject?: () => void;
+    onConfirm?: () => void;
+}
+
+const EbayConfirmDialog: FC<Props> = ({
+    a11yCloseText = 'Close Dialog',
+    confirmText,
+    rejectText,
+    onReject = () => {},
+    onConfirm = () => {},
+    ...rest
+}) => {
+    const confirmBtnRef = useRef(null)
+    const confirmId = 'confirm-dialog-confirm'
+    const mainId = 'confirm-dialog-main'
+    return (
+        <DialogBaseWithState
+            focus={confirmBtnRef}
+            {...rest}
+            a11yCloseText={a11yCloseText}
+            role="dialog"
+            mainId={mainId}
+            classPrefix={classPrefix}
+            className={classNames(rest.className, `${classPrefix}--mask-fade`)}
+            windowClass={`${classPrefix}__window ${classPrefix}__window--fade`}
+            buttonPosition="hidden"
+            onCloseBtnClick={onReject}
+        >
+            {rest.children}
+            <EbayDialogFooter>
+                <EbayButton
+                    onClick={onReject}
+                    className="confirm-dialog__reject"
+                >
+                    {rejectText}
+                </EbayButton>
+                <EbayButton
+                    ref={confirmBtnRef}
+                    priority="primary"
+                    onClick={onConfirm}
+                    id={confirmId}
+                    aria-describedby={mainId}
+                    className="confirm-dialog__confirm"
+                >
+                    {confirmText}
+                </EbayButton>
+            </EbayDialogFooter>
+        </DialogBaseWithState>
+    )
+}
+
+export default EbayConfirmDialog

package/src/ebay-confirm-dialog/index.ts

@@ -0,0 +1 @@
+export { default as EbayConfirmDialog } from './confirm-dialog'

package/src/ebay-cta-button/__tests__/index.spec.tsx

@@ -0,0 +1,48 @@
+import React from 'react'
+import { render, screen } from '@testing-library/react'
+import { composeStory } from '@storybook/react'
+import Meta, { Default, Large, Fluid, Truncated } from './index.stories'
+
+const DefaultStory = composeStory(Default, Meta)
+const LargeStory = composeStory(Large, Meta)
+const FluidStory = composeStory(Fluid, Meta)
+const TruncatedStory = composeStory(Truncated, Meta)
+
+describe('<EbayCtaButton>', () => {
+    describe('Default story', () => {
+        it('renders correctly', () => {
+            render(<DefaultStory />)
+            const button = screen.getByRole('link')
+            expect(button).toHaveClass('cta-btn')
+            expect(button).toHaveAttribute('href', 'https://ebay.com')
+            expect(button.textContent).toContain('Take Action Now!')
+        })
+    })
+
+    describe('Large story', () => {
+        it('renders correctly', () => {
+            render(<LargeStory />)
+            const button = screen.getByRole('link')
+            expect(button).toHaveClass('cta-btn cta-btn--large')
+            expect(button.textContent).toContain('Large Button')
+        })
+    })
+
+    describe('Fluid story', () => {
+        it('renders correctly', () => {
+            render(<FluidStory />)
+            const [button] = screen.getAllByRole('link')
+            expect(button).toHaveClass('cta-btn cta-btn--fluid')
+            expect(button.textContent).toContain('100%')
+        })
+    })
+
+    describe('Truncated story', () => {
+        it('renders correctly', () => {
+            render(<TruncatedStory />)
+            const [button] = screen.getAllByRole('link')
+            expect(button).toHaveClass('cta-btn cta-btn--truncated')
+            expect(button.textContent).toContain('Wide Long Call To Action!')
+        })
+    })
+})

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

@@ -0,0 +1,58 @@
+import React from 'react'
+import { StoryFn, Meta } from '@storybook/react'
+import { EbayCtaButton } from '../index'
+
+const meta: Meta<typeof EbayCtaButton> = {
+    component: EbayCtaButton,
+    title: 'buttons/ebay-cta-button'
+}
+
+export default meta
+
+export const Default: StoryFn<typeof EbayCtaButton> = () => (
+    <>
+        <p>
+            <EbayCtaButton href="https://ebay.com">Take Action Now!</EbayCtaButton>
+        </p>
+    </>
+)
+
+export const Large: StoryFn<typeof EbayCtaButton> = () => (
+    <>
+        <p>
+            <EbayCtaButton href="https://ebay.com" size="large">
+                Large Button
+            </EbayCtaButton>
+        </p>
+    </>
+)
+
+export const Fluid: StoryFn<typeof EbayCtaButton> = () => (
+    <>
+        <p>
+            <EbayCtaButton href="https://ebay.com" fluid>
+                100%
+            </EbayCtaButton>
+        </p>
+        <p>
+            <EbayCtaButton href="https://ebay.com" size="large" fluid>
+                Large!
+            </EbayCtaButton>
+        </p>
+    </>
+)
+
+export const Truncated: StoryFn<typeof EbayCtaButton> = () => (
+    <div style={{ maxWidth: '200px' }}>
+        <p>
+            <EbayCtaButton href="https://ebay.com" truncate>
+                Wide Long Call To Action!
+            </EbayCtaButton>
+        </p>
+        <p>
+            <EbayCtaButton href="https://ebay.com" size="large" truncate>
+                Go Big with Call To Action!
+            </EbayCtaButton>
+        </p>
+    </div>
+)

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

@@ -0,0 +1,40 @@
+import React, { ComponentProps, FC, RefObject } from 'react'
+import classnames from 'classnames'
+import { withForwardRef } from '../common/component-utils/forwardRef'
+import { EbayIcon } from '../ebay-icon'
+import { EbayButtonCell, Size } from '../ebay-button'
+
+type HTMLAnchorProps = ComponentProps<'a'>;
+type Props = HTMLAnchorProps & {
+    fluid?: boolean;
+    truncate?: boolean;
+    size?: Size;
+    forwardedRef?: RefObject<HTMLAnchorElement>;
+}
+
+const EbayCtaButton: FC<Props> = ({
+    size,
+    children,
+    fluid,
+    truncate,
+    forwardedRef,
+    className: extraClasses,
+    ...rest
+}) => {
+    const className = classnames(extraClasses, 'cta-btn',
+        { 'cta-btn--large': size === 'large' },
+        { 'cta-btn--fluid': fluid },
+        { 'cta-btn--truncated': truncate }
+    )
+
+    return (
+        <a {...rest} className={className} ref={forwardedRef}>
+            <EbayButtonCell type="cta">
+                <span>{children}</span>
+                <EbayIcon name="arrowRight24" />
+            </EbayButtonCell>
+        </a>
+    )
+}
+
+export default withForwardRef(EbayCtaButton)

package/src/ebay-cta-button/index.ts

@@ -0,0 +1 @@
+export { default as EbayCtaButton } from './cta-button'