@ebay/ui-core-react 7.3.0 → 7.3.2

package/src/ebay-textbox/postfix-icon.tsx

@@ -0,0 +1,21 @@
+import React, { FC } from 'react'
+import { EbayTextboxIconProps } from './types'
+import { EbayIcon } from '../ebay-icon'
+import { EbayIconButton } from '../ebay-icon-button'
+
+const EbayTextboxPostfixIcon: FC<EbayTextboxIconProps> = ({
+    name,
+    buttonAriaLabel,
+    onClick = () => {},
+    ...rest
+}: EbayTextboxIconProps) => buttonAriaLabel ?
+    <EbayIconButton
+        aria-label={buttonAriaLabel}
+        icon={name}
+        transparent
+        onClick={onClick}
+        {...rest as any}
+    /> :
+    <EbayIcon name={name} {...rest as any} />
+
+export default EbayTextboxPostfixIcon

package/src/ebay-textbox/postfix-text.tsx

@@ -0,0 +1,8 @@
+import React, { FC } from 'react'
+import { EbayTextboxPostfixTextProps } from './types'
+
+const EbayTextboxPostfixText: FC<EbayTextboxPostfixTextProps> = (props: EbayTextboxPostfixTextProps) => (
+    <span {...props} />
+)
+
+export default EbayTextboxPostfixText

package/src/ebay-textbox/prefix-icon.tsx

@@ -0,0 +1,12 @@
+import React, { FC } from 'react'
+import { EbayIcon } from '../ebay-icon'
+import { EbayTextboxIconProps } from './types'
+
+const EbayTextboxPrefixIcon: FC<EbayTextboxIconProps> = ({
+    name,
+    ...rest
+}: EbayTextboxIconProps) => (
+    <EbayIcon name={name} {...rest as any} />
+)
+
+export default EbayTextboxPrefixIcon

package/src/ebay-textbox/prefix-text.tsx

@@ -0,0 +1,8 @@
+import React, { FC } from 'react'
+import { EbayTextboxPrefixTextProps } from './types'
+
+const EbayTextboxPrefixText: FC<EbayTextboxPrefixTextProps> = (props: EbayTextboxPrefixTextProps) => (
+    <span {...props} />
+)
+
+export default EbayTextboxPrefixText

package/src/ebay-textbox/textbox.tsx

@@ -0,0 +1,209 @@
+import React, {
+    cloneElement, ComponentProps, FC, Ref,
+    ChangeEvent, FocusEvent, KeyboardEvent, MouseEvent, SyntheticEvent,
+    useEffect, useState
+} from 'react'
+import classNames from 'classnames'
+import { findComponent, withForwardRef } from '../common/component-utils'
+import EbayTextboxPostfixIcon from './postfix-icon'
+import EbayTextboxPostfixText from './postfix-text'
+import EbayTextboxPrefixIcon from './prefix-icon'
+import EbayTextboxPrefixText from './prefix-text'
+import { useFloatingLabel } from '../common/floating-label-utils/hooks'
+import {
+    EbayChangeEventHandler,
+    EbayEventHandler,
+    EbayFocusEventHandler,
+    EbayKeyboardEventHandler, EbayMouseEventHandler
+} from '../common/event-utils/types'
+import type { Size } from './types'
+
+export const isControlled = (value?: unknown): boolean => typeof value !== 'undefined'
+
+type TextInputProps = ComponentProps<'input'> & ComponentProps<'textarea'>
+
+export type TextboxEventProps = { value: string }
+export type EbayTextboxProps = {
+    fluid?: boolean;
+    invalid?: boolean;
+    multiline?: boolean;
+    defaultValue?: string;
+    inputSize?: Size;
+    floatingLabel?: string;
+    onChange?: EbayChangeEventHandler<HTMLTextAreaElement & HTMLInputElement, TextboxEventProps>;
+    onInputChange?: EbayChangeEventHandler<HTMLTextAreaElement & HTMLInputElement, TextboxEventProps>;
+    onFocus?: EbayFocusEventHandler<HTMLTextAreaElement & HTMLInputElement, TextboxEventProps>;
+    onBlur?: EbayFocusEventHandler<HTMLTextAreaElement & HTMLInputElement, TextboxEventProps>;
+    onKeyPress?: EbayKeyboardEventHandler<HTMLTextAreaElement & HTMLInputElement, TextboxEventProps>;
+    onKeyUp?: EbayKeyboardEventHandler<HTMLTextAreaElement & HTMLInputElement, TextboxEventProps>;
+    onKeyDown?: EbayKeyboardEventHandler<HTMLTextAreaElement & HTMLInputElement, TextboxEventProps>;
+    onInvalid?: EbayEventHandler<HTMLTextAreaElement & HTMLInputElement, TextboxEventProps>;
+    onFloatingLabelInit?: () => void;
+    onButtonClick?: EbayKeyboardEventHandler<HTMLInputElement, TextboxEventProps> &
+        EbayMouseEventHandler<HTMLInputElement, TextboxEventProps>;
+    forwardedRef?: Ref<HTMLTextAreaElement | HTMLInputElement>;
+    opaqueLabel?: boolean;
+} & Omit<TextInputProps, 'onFocus' | 'onBlur' | 'onChange' | 'onKeyPress' | 'onKeyUp' | 'onKeyDown' | 'onInvalid'>;
+
+const EbayTextbox: FC<EbayTextboxProps> = ({
+    type = 'text',
+    invalid,
+    fluid,
+    multiline,
+    onChange = () => {},
+    onInputChange = () => {},
+    onFocus = () => {},
+    onBlur = () => {},
+    onKeyPress = () => {},
+    onKeyUp = () => {},
+    onKeyDown = () => {},
+    onInvalid = () => {},
+    onFloatingLabelInit = () => {},
+    onButtonClick = () => {},
+    autoFocus,
+    defaultValue = '',
+    value: controlledValue,
+    forwardedRef,
+    inputSize = 'default',
+    floatingLabel,
+    children,
+    placeholder,
+    opaqueLabel,
+    ...rest
+}) => {
+    const [value, setValue] = useState(defaultValue)
+    const [inputValue, setInputValue] = useState(defaultValue)
+    const {
+        label,
+        Container,
+        onBlur: onFloatingLabelBlur,
+        onFocus: onFloatingLabelFocus,
+        ref,
+        placeholder: floatingLabelPlaceholder
+    } = useFloatingLabel({
+        ref: forwardedRef,
+        inputId: rest.id,
+        className: rest.className,
+        disabled: rest.disabled,
+        label: floatingLabel,
+        inputSize,
+        inputValue: controlledValue || inputValue,
+        placeholder,
+        invalid,
+        type,
+        opaqueLabel,
+        onMount: onFloatingLabelInit
+    })
+
+    const handleFocus = (event?: FocusEvent<HTMLInputElement & HTMLTextAreaElement>) => {
+        onFocus(event, { value: event?.target?.value || defaultValue })
+        onFloatingLabelFocus()
+    }
+
+    const handleBlur = (event: FocusEvent<HTMLInputElement & HTMLTextAreaElement>) => {
+        const newValue = event.target?.value
+        onBlur(event, { value: newValue })
+        if (newValue !== value) {
+            onChange(event, { value: newValue })
+            setValue(newValue)
+        }
+        onFloatingLabelBlur()
+    }
+
+    const handleKeyPress = (event?: KeyboardEvent<HTMLInputElement & HTMLTextAreaElement>) => {
+        const textbox = event.target as any
+        onKeyPress(event, { value: textbox?.value })
+    }
+    const handleKeyUp = (event?: KeyboardEvent<HTMLInputElement & HTMLTextAreaElement>) => {
+        const textbox = event.target as any
+        onKeyUp(event, { value: textbox?.value })
+    }
+    const handleKeyDown = (event?: KeyboardEvent<HTMLInputElement & HTMLTextAreaElement>) => {
+        const textbox = event.target as any
+        onKeyDown(event, { value: textbox?.value })
+    }
+
+    const handleInvalid = (event?: SyntheticEvent<HTMLInputElement & HTMLTextAreaElement>) => {
+        const textbox = event.target as any
+        onInvalid(event, { value: textbox?.value })
+    }
+
+    const handleButtonClick = (event?: KeyboardEvent<HTMLInputElement> & MouseEvent<HTMLInputElement>) => {
+        onButtonClick(event, { value })
+    }
+
+    useEffect(() => {
+        if (autoFocus) {
+            handleFocus()
+        }
+    }, [])
+
+    const handleInputChange = (e: ChangeEvent<HTMLTextAreaElement & HTMLInputElement>) => {
+        const newValue = e.target?.value
+
+        if (!isControlled(controlledValue)) {
+            setInputValue(newValue)
+        }
+
+        onInputChange(e, { value: newValue })
+    }
+
+    const Input = multiline ? 'textarea' : 'input'
+    const Wrapper = fluid ? 'div' : 'span'
+
+    const prefixIcon = findComponent(children, EbayTextboxPrefixIcon)
+    const prefixText = findComponent(children, EbayTextboxPrefixText)
+    const prefixId = prefixText?.props?.id
+    const postfixIcon = findComponent(children, EbayTextboxPostfixIcon)
+    const postfixText = findComponent(children, EbayTextboxPostfixText)
+    const postfixId = postfixText?.props?.id
+
+    const wrapperClassName = classNames('textbox', rest.className, {
+        'textbox--fluid': fluid,
+        'textbox--large': inputSize === 'large',
+        /** start remove after `:has` support */
+        'textbox--disabled': rest.disabled,
+        'textbox--invalid': invalid,
+        'textbox--readonly': rest.readOnly
+        /** end remove after `:has` support */
+    })
+
+    return (
+        <Container>
+            {label}
+            <Wrapper className={wrapperClassName}>
+                {prefixIcon}
+                {prefixText}
+                <Input
+                    aria-describedby={[prefixId, postfixId].filter(Boolean).join(' ') || undefined}
+                    {...rest}
+                    className="textbox__control"
+                    type={type}
+                    aria-invalid={invalid}
+                    value={isControlled(controlledValue) ? controlledValue : inputValue}
+                    onChange={handleInputChange}
+                    onBlur={handleBlur}
+                    onFocus={handleFocus}
+                    onKeyPress={handleKeyPress}
+                    onKeyUp={handleKeyUp}
+                    onKeyDown={handleKeyDown}
+                    onInvalid={handleInvalid}
+                    autoFocus={autoFocus}
+                    ref={ref}
+                    placeholder={floatingLabelPlaceholder}
+                />
+                {postfixText}
+                {postfixIcon && cloneElement(postfixIcon, {
+                    ...postfixIcon.props,
+                    onClick: (e) => {
+                        const { onClick: iconClick = () => {} } = postfixIcon.props
+                        iconClick(e)
+                        handleButtonClick(e)
+                    }
+                })}
+            </Wrapper>
+        </Container>
+    )
+}
+
+export default withForwardRef<EbayTextboxProps>(EbayTextbox)

package/src/ebay-textbox/types.ts

@@ -0,0 +1,18 @@
+import { ComponentProps, KeyboardEvent, MouseEvent } from 'react'
+import type { Icon } from '../ebay-icon'
+
+export type Size = 'default' | 'large'
+
+export type EbayTextboxIconProps = ComponentProps<'button'> & ComponentProps<'a'> & {
+    name: Icon
+    buttonAriaLabel?: string
+    onClick?: (e: KeyboardEvent | MouseEvent) => void
+}
+
+export type EbayTextboxPrefixTextProps = ComponentProps<'span'> & {
+    id: string
+}
+
+export type EbayTextboxPostfixTextProps = ComponentProps<'span'> & {
+    id: string
+}

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

@@ -0,0 +1,41 @@
+import * as React from 'react'
+import { render, fireEvent } from '@testing-library/react'
+import { EbayDialogHeader } from '../../ebay-dialog-base'
+import { EbayToast } from '../index'
+
+jest.mock('../../common/random-id')
+
+describe('<EbayToast>', () => {
+    const closeToastHandler = jest.fn()
+
+    beforeEach(() => {
+        render(
+            <EbayToast
+                open
+                onClose={closeToastHandler}
+            >
+                <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" />
+            </EbayToast>
+        )
+    })
+
+    it('should have close button', () => {
+        expect(document.querySelector('button.toast-dialog__close')).toBeInTheDocument()
+    })
+
+    it('should not focus on close button', () => {
+        expect(document.querySelector('button.toast-dialog__close')).not.toHaveFocus()
+    })
+
+    it('should trigger onClose when close button is clicked', () => {
+        fireEvent.click(document.querySelector('button.toast-dialog__close'))
+        expect(closeToastHandler).toHaveBeenCalled()
+    })
+})

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

@@ -0,0 +1,131 @@
+import React, { useState } from 'react'
+import { EbayButton } from '../../ebay-button'
+import { EbayDialogFooter, EbayDialogHeader } from '../../ebay-dialog-base'
+import { EbayToast } from '../index'
+import { action } from '@storybook/addon-actions'
+
+export default {
+    title: 'dialogs/ebay-toast-dialog'
+}
+
+export const Default = () => {
+    const TestComponent = () => {
+        const [open, setOpen] = useState(false)
+
+        return (
+            <>
+                <EbayButton onClick={() => setOpen(!open)}>Open Toast</EbayButton>
+                <EbayToast open={open} a11yCloseText="Close EbayToast" onClose={() => setOpen(false)}>
+                    <EbayDialogHeader>Toast Dialog Heading</EbayDialogHeader>
+                    <EbayDialogFooter>
+                        <EbayButton priority="primary" onClick={() => setOpen(false)} accessKey="c">
+                            Close Dialog
+                        </EbayButton>
+                    </EbayDialogFooter>
+                    <p>Press `Control-Option-c` (Mac) to activate CTA button</p>
+                    <p>
+                        <a href="http://www.ebay.com">www.ebay.com</a>
+                    </p>
+                </EbayToast>
+
+                <p>
+                    For more info, please visit our <a href="http://pages.ebay.com/help">Help page</a>
+                </p>
+                <p>
+                    Please check <a href="https://www.ebay.de/myb/PurchaseHistory">My eBay page</a> for more
+                    details{' '}
+                </p>
+            </>
+        )
+    }
+
+    return (
+        <>
+            <TestComponent />
+        </>
+    )
+}
+
+export const AlwaysOpened = {
+    render: () => {
+        const TestComponent = () => (
+            <>
+                <EbayToast open a11yCloseText="Close EbayToast" onClose={action('X-button clicked.')}>
+                    <EbayDialogHeader>Toast Dialog Heading</EbayDialogHeader>
+                    <EbayDialogFooter>
+                        <EbayButton priority="primary" onClick={action('Button clicked.')} accessKey="v">
+                            View Account
+                        </EbayButton>
+                    </EbayDialogFooter>
+                    <p>Press `Control-Option-v` (Mac) to activate CTA button</p>
+                    <p>
+                        <a href="http://www.ebay.com">www.ebay.com</a>
+                    </p>
+                </EbayToast>
+
+                <p>
+                    For more info, please visit our <a href="http://pages.ebay.com/help">Help page</a>
+                </p>
+                <p>
+                    Please check <a href="https://www.ebay.de/myb/PurchaseHistory">My eBay page</a> for more
+                    details{' '}
+                </p>
+            </>
+        )
+
+        return (
+            <>
+                <TestComponent />
+            </>
+        )
+    },
+
+    name: 'AlwaysOpened'
+}
+
+export const WithAnimation = {
+    render: () => {
+        const TestComponent = () => {
+            const [open, setOpen] = useState(false)
+
+            return (
+                <>
+                    <EbayButton onClick={() => setOpen(!open)}>Open Toast</EbayButton>
+                    <EbayToast
+                        open={open}
+                        a11yCloseText="Close EbayToast"
+                        onClose={() => setOpen(false)}
+                        animated
+                    >
+                        <EbayDialogHeader>Toast Dialog Heading</EbayDialogHeader>
+                        <EbayDialogFooter>
+                            <EbayButton priority="primary" onClick={() => setOpen(false)}>
+                                View Account
+                            </EbayButton>
+                        </EbayDialogFooter>
+                        <p>Toast dialog paragraph text.</p>
+                        <p>
+                            <a href="http://www.ebay.com">www.ebay.com</a>
+                        </p>
+                    </EbayToast>
+
+                    <p>
+                        For more info, please visit our <a href="http://pages.ebay.com/help">Help page</a>
+                    </p>
+                    <p>
+                        Please check <a href="https://www.ebay.de/myb/PurchaseHistory">My eBay page</a> for more
+                        details{' '}
+                    </p>
+                </>
+            )
+        }
+
+        return (
+            <>
+                <TestComponent />
+            </>
+        )
+    },
+
+    name: 'WithAnimation'
+}

package/src/ebay-toast-dialog/components/toast.tsx

@@ -0,0 +1,26 @@
+import React, { MouseEventHandler, KeyboardEventHandler, FC } from 'react'
+import classNames from 'classnames'
+import { DialogBaseWithState, DialogBaseProps } from '../../ebay-dialog-base'
+
+export type EbayToastProps = DialogBaseProps<HTMLElement> & {
+  onClose?: MouseEventHandler<HTMLButtonElement> & KeyboardEventHandler;
+};
+
+export const EbayToast: FC<EbayToastProps> = ({
+    className,
+    onClose = () => {},
+    ...rest
+}) => (
+    <DialogBaseWithState
+        {...rest}
+        isModal={false}
+        baseEl="aside"
+        classPrefix="toast-dialog"
+        buttonPosition="right"
+        transitionElement="root"
+        className={classNames(className, 'toast-dialog--transition')}
+        onCloseBtnClick={onClose}
+    />
+)
+
+export default EbayToast

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

@@ -0,0 +1 @@
+export { default as EbayToast } from './components/toast'

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

@@ -0,0 +1,183 @@
+import React from 'react'
+import { render, fireEvent } from '@testing-library/react'
+import { EbayTooltip, EbayTooltipContent, EbayTooltipHost } from '../index'
+
+jest.useFakeTimers()
+
+const renderComponent = (props = {}) =>
+    render(
+        <EbayTooltip {...props}>
+            <EbayTooltipHost>
+                <button>Info</button>
+            </EbayTooltipHost>
+            <EbayTooltipContent>
+                <p>Info content</p>
+            </EbayTooltipContent>
+        </EbayTooltip>
+    )
+
+const checkIsExpanded = (wrapper) => {
+    expect(wrapper.container.querySelector('.tooltip--expanded')).toBeInTheDocument()
+    expect(wrapper.container.querySelector('button[aria-expanded=true]')).toBeInTheDocument()
+}
+
+const checkIsCollapsed = (wrapper) => {
+    expect(wrapper.container.querySelector('.tooltip--expanded')).not.toBeInTheDocument()
+    expect(wrapper.container.querySelector('button[aria-expanded=true]')).not.toBeInTheDocument()
+}
+
+describe('<EbayTooltip>', () => {
+    describe('on tooltip mouse enter', () => {
+        it('should fire an event', () => {
+            const spy = jest.fn()
+            const { getByText } = renderComponent({ onMouseEnter: spy })
+            fireEvent.mouseEnter(getByText('Info content'))
+
+            expect(spy).toHaveBeenCalled()
+        })
+
+        it('should expand the tooltip', () => {
+            const wrapper = renderComponent()
+            fireEvent.mouseEnter(wrapper.getByText('Info content'))
+            checkIsExpanded(wrapper)
+        })
+
+        it('should not expand the tooltip with noHover', () => {
+            const wrapper = renderComponent({ noHover: true })
+            fireEvent.mouseEnter(wrapper.getByText('Info content'))
+            checkIsCollapsed(wrapper)
+        })
+    })
+
+    describe('on tooltip mouse leave', () => {
+        it('should fire an event', () => {
+            const spy = jest.fn()
+            const wrapper = renderComponent({ onMouseLeave: spy })
+            fireEvent.mouseLeave(wrapper.getByText('Info content'))
+
+            expect(spy).toHaveBeenCalled()
+        })
+
+        it('should collapse the tooltip', () => {
+            const wrapper = renderComponent()
+            fireEvent.mouseLeave(wrapper.getByText('Info content'))
+            jest.runAllTimers()
+            checkIsCollapsed(wrapper)
+        })
+
+        it('should not collapse the tooltip with noHover', () => {
+            const wrapper = renderComponent({ noHover: true })
+            const content = wrapper.getByText('Info content')
+            fireEvent.focus(content)
+            fireEvent.mouseLeave(content)
+            checkIsExpanded(wrapper)
+        })
+    })
+
+    describe('on tooltip focus', () => {
+        it('should fire an event', () => {
+            const spy = jest.fn()
+            const wrapper = renderComponent({ onFocus: spy })
+            fireEvent.focus(wrapper.getByText('Info'))
+
+            expect(spy).toHaveBeenCalled()
+        })
+
+        it('should expand the tooltip', () => {
+            const wrapper = renderComponent()
+            fireEvent.focus(wrapper.getByText('Info'))
+            checkIsExpanded(wrapper)
+        })
+
+        it('should expand the tooltip even with noHover', () => {
+            const wrapper = renderComponent({ noHover: true })
+            fireEvent.focus(wrapper.getByText('Info'))
+            checkIsExpanded(wrapper)
+        })
+    })
+
+    describe('on tooltip blur', () => {
+        it('should fire an event', () => {
+            const spy = jest.fn()
+            const wrapper = renderComponent({ onBlur: spy })
+            fireEvent.blur(wrapper.getByText('Info'))
+
+            expect(spy).toHaveBeenCalled()
+        })
+
+        it('should collapse the tooltip', () => {
+            const wrapper = renderComponent()
+            fireEvent.blur(wrapper.getByText('Info'))
+            checkIsCollapsed(wrapper)
+        })
+    })
+
+    describe('on tooltip expanded', () => {
+        it('should fire an event', () => {
+            const spy = jest.fn()
+            const wrapper = renderComponent({ onExpand: spy })
+            fireEvent.focus(wrapper.getByText('Info'))
+
+            expect(spy).toHaveBeenCalled()
+        })
+    })
+
+    describe('on tooltip collapsed', () => {
+        it('should fire an event', () => {
+            const spy = jest.fn()
+            const wrapper = renderComponent({ onCollapse: spy })
+            fireEvent.blur(wrapper.getByText('Info'))
+
+            expect(spy).toHaveBeenCalled()
+        })
+    })
+
+    describe('on using the tooltip with no host', () => {
+        it('should throw an error', () => {
+            jest.spyOn(console, 'error').mockImplementation(() => null)
+            expect(() => {
+                render(
+                    <EbayTooltip>
+                        <button>Test</button>
+                    </EbayTooltip>
+                )
+            }).toThrowError(`EbayTooltip: Please use a EbayTooltipHost that defines the host of the tooltip`)
+            ;(console.error as jest.Mock).mockRestore()
+        })
+    })
+
+    describe('on using the tooltip with no content', () => {
+        it('should throw an error', () => {
+            jest.spyOn(console, 'error').mockImplementation(() => null)
+            expect(() => {
+                render(
+                    <EbayTooltip>
+                        <EbayTooltipHost>
+                            <a>Test</a>
+                        </EbayTooltipHost>
+                    </EbayTooltip>
+                )
+            }).toThrowError(`EbayTooltip: Please use a EbayTooltipContent that defines the content of the tooltip`)
+            ;(console.error as jest.Mock).mockRestore()
+        })
+    })
+
+    describe('on using more than one element in the host', () => {
+        it('should throw an error', () => {
+            jest.spyOn(console, 'error').mockImplementation(() => null)
+            expect(() => {
+                render(
+                    <EbayTooltip>
+                        {/* @ts-ignore: Forcing error to test assertion */}
+                        <EbayTooltipHost>
+                            <a>Test</a>
+                            <button>Test</button>
+                        </EbayTooltipHost>
+                        <EbayTooltipContent>Content</EbayTooltipContent>
+                    </EbayTooltip>
+                )
+            }).toThrowError(`React.Children.only expected to receive a single React element child.`)
+            ;(console.error as jest.Mock).mockRestore()
+        })
+    })
+})