@ebay/ui-core-react 7.3.2 → 7.3.4

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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