@ebay/ui-core-react 7.3.0 → 7.3.2

package/src/common/floating-label-utils/hooks.tsx

@@ -0,0 +1,162 @@
+import React, { useRef, useState, useEffect, FC, RefObject, useCallback, ReactNode, ComponentProps } from 'react'
+import classNames from 'classnames'
+
+type InputRef = RefObject<HTMLSelectElement | HTMLTextAreaElement | HTMLInputElement> | any
+type FloatingLabelHookProps = {
+    type?: string;
+    inputId?: string;
+    ref?: InputRef;
+    disabled?: boolean;
+    label?: string;
+    inputSize?: 'default' | 'large';
+    inputValue?: ComponentProps<'input'>['value'];
+    className?: string;
+    placeholder?: string;
+    invalid?: boolean;
+    opaqueLabel?: boolean;
+    onMount?: () => void;
+}
+
+type FloatingLabelHookReturn = {
+    label: ReactNode;
+    onBlur: () => void;
+    onFocus: () => void;
+    Container: FC<{ children?: ReactNode }>;
+    ref: InputRef;
+    placeholder: string;
+}
+
+const classPrefix = 'floating-label__label'
+
+// input background in Skin 12, used for autofill detection
+const textboxElementBackgroundRGB = [
+    'rgb(245, 245, 245)', // DEPRECATED
+    'rgb(247, 247, 247)' // From skin version 12.6.0
+]
+
+// check for computed background color because of Chrome autofill bug
+// https://stackoverflow.com/questions/35049555/chrome-autofill-autocomplete-no-value-for-password/35783761#35783761
+const isAutofilled = (input: HTMLElement) =>
+    input && !textboxElementBackgroundRGB.includes(getComputedStyle(input).backgroundColor)
+
+const hasValue = (input: HTMLInputElement | HTMLOptionElement) => input?.value?.length > 0
+
+const isSelect = (element: HTMLInputElement | HTMLSelectElement) => element?.tagName === `SELECT`
+
+const setPlaceholder = (element: HTMLInputElement, value: string) => {
+    // For select elements we need to temporary remove the text of the first option
+    // when the element is not focused, so only the label is shown. We still need to
+    // maintain the width of the input so we manually change the "min-width"
+    // Inspired by the marko implementation: https://github.com/makeup/makeup-js/blob/master/packages/makeup-floating-label/src/index.js
+    if (isSelect(element) && !hasValue(element.querySelector(`option`))) {
+        element.style['min-width'] = ''
+        const beforeWidth = element.offsetWidth
+
+        element.querySelector(`option`).text = value
+
+        if (!value && beforeWidth > element.offsetWidth) {
+            element.style['min-width'] = `${beforeWidth}px`
+        }
+    }
+}
+
+const getPlaceholder = (element: HTMLInputElement) => {
+    if (isSelect(element)) {
+        return element.querySelector(`option`).text
+    }
+
+    return element?.placeholder
+}
+
+export function useFloatingLabel({
+    ref,
+    inputId,
+    className,
+    disabled,
+    label,
+    inputSize,
+    inputValue,
+    placeholder,
+    invalid,
+    opaqueLabel,
+    type,
+    onMount = () => {}
+} : FloatingLabelHookProps): FloatingLabelHookReturn {
+    const _internalInputRef = useRef(null)
+    const inputRef = () => ref || _internalInputRef
+    const [isFloating, setFloating] = useState(Boolean(inputValue))
+    const [shouldAnimate, setAnimate] = useState(false)
+    const [isFocused, setFocused] = useState(false)
+    const selectFirstOptionText = useRef(``)
+
+    const onBlur = () => {
+        setAnimate(true)
+        setFloating(hasValue(inputRef()?.current))
+        setFocused(false)
+        setPlaceholder(inputRef().current, ``)
+    }
+
+    const onFocus = () => {
+        setAnimate(true)
+        setFloating(true)
+        setFocused(true)
+        setPlaceholder(inputRef()?.current, selectFirstOptionText.current)
+    }
+
+    useEffect(() => {
+        if (!label) {
+            return
+        }
+        selectFirstOptionText.current = getPlaceholder(inputRef()?.current)
+        setPlaceholder(inputRef()?.current, ``)
+        onMount()
+    }, [])
+
+    useEffect(() => {
+        if (!label) {
+            return
+        }
+        setFloating(isFocused || hasValue(inputRef()?.current) || isAutofilled(inputRef()?.current?.parentNode))
+    }, [isFocused, inputValue])
+
+    const labelClassName = classNames(className, classPrefix, {
+        [`${classPrefix}--disabled`]: disabled,
+        [`${classPrefix}--animate`]: shouldAnimate,
+        [`${classPrefix}--inline`]: !isFloating && type !== 'date',
+        [`${classPrefix}--focus`]: isFocused,
+        [`${classPrefix}--invalid`]: invalid
+    })
+
+    const floatingLabelClassName = classNames(`floating-label`, {
+        'floating-label--large': inputSize === `large`,
+        'floating-label--opaque': opaqueLabel
+    })
+
+    const FragmentContainer = useCallback(({ children }) => <>{children}</>, [])
+    const FloatingLabelContainer: FC<{ children?: ReactNode }> = useCallback(
+        ({ children }) => <span className={floatingLabelClassName}>{children}</span>,
+        [floatingLabelClassName]
+    )
+
+    if (!label) {
+        return {
+            label: null,
+            Container: FragmentContainer,
+            onBlur: () => {},
+            onFocus: () => {},
+            ref: inputRef(),
+            placeholder
+        }
+    }
+
+    const labelElement = <label htmlFor={inputId} className={labelClassName}>{label}</label>
+
+    return {
+        label: labelElement,
+        Container: FloatingLabelContainer,
+        onBlur,
+        onFocus,
+        ref: inputRef(),
+        placeholder: !isFloating ? null : placeholder
+    }
+}

package/src/common/notice-utils/notice-content.tsx

@@ -0,0 +1,19 @@
+import React, { FC, ReactNode } from 'react'
+import cx from 'classnames'
+
+export type NoticeContentProps = {
+    type: 'inline' | 'section' | 'page';
+    className?: string;
+    children?: ReactNode;
+}
+
+const NoticeContent: FC<NoticeContentProps> = ({ className, type, children }) => {
+    const ContentTag = type === 'inline' ? 'span' : 'div'
+    return (
+        <ContentTag className={cx(className, `${type}-notice__main`)}>
+            {children}
+        </ContentTag>
+    )
+}
+
+export default NoticeContent

package/src/common/notice-utils/notice-cta.tsx

@@ -0,0 +1,15 @@
+import React, { FC } from 'react'
+import cx from 'classnames'
+
+type Props = React.HTMLProps<HTMLDivElement> & {
+    type: 'window' | 'section' | 'page';
+    className?: string;
+}
+
+const NoticeCTA: FC<Props> = ({ className, type, children, ...rest }) => (
+    <p className={cx(className, `${type}-notice__cta`)} {...rest}>
+        {children}
+    </p>
+)
+
+export default NoticeCTA

package/src/common/notice-utils/notice-footer.tsx

@@ -0,0 +1,15 @@
+import React, { FC } from 'react'
+import cx from 'classnames'
+
+type Props = React.HTMLProps<HTMLDivElement> & {
+    type: 'window' | 'section' | 'page';
+    className?: string;
+}
+
+const NoticeFooter: FC<Props> = ({ className, type, children, ...rest }) => (
+    <div className={cx(className, `${type}-notice__footer`)} {...rest}>
+        {children}
+    </div>
+)
+
+export default NoticeFooter

package/src/common/notice-utils/notice-title.tsx

@@ -0,0 +1,19 @@
+import React, { FC } from 'react'
+import cx from 'classnames'
+
+type Props = React.HTMLProps<HTMLHeadingElement> & {
+    type: 'window' | 'section' | 'page';
+    as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+    className?: string;
+}
+
+const NoticeTitle: FC<Props> = ({ className, type, as, children, ...rest }) => {
+    const HeadingTag = as || `h2`
+    return (
+        <HeadingTag className={cx(className, `${type}-notice__title`)} {...rest}>
+            {children}
+        </HeadingTag>
+    )
+}
+
+export default NoticeTitle

package/src/common/random-id.ts

@@ -0,0 +1,14 @@
+import { useEffect, useState } from 'react'
+
+export const randomId = (): string => Math.random().toString(16).slice(-4)
+
+export const useRandomId = (): string => {
+    const [id, setId] = useState('')
+
+    useEffect(() => {
+        setId(randomId())
+    }, [])
+
+    return id
+}
+

package/src/common/range.ts

@@ -0,0 +1,2 @@
+export const range = (start:number, stop:number, step = 1):number[] =>
+    Array(Math.ceil(((stop + 1) - start) / step)).fill(start).map((x, y) => x + y * step)

package/src/common/tooltip-utils/constants.ts

@@ -0,0 +1,96 @@
+import { PointerDirection, TooltipType } from './types'
+
+export const DEFAULT_POINTER_DIRECTION: PointerDirection = 'bottom'
+
+export const TYPE_ROLES: Record<TooltipType, string> = {
+    tooltip: 'tooltip',
+    tourtip: 'region',
+    infotip: ''
+}
+
+export const POINTER_STYLES: { [key in PointerDirection]: any } = {
+    left: {
+        transform: 'translateX(16px) translateY(-50%) scale3d(1,1,1)',
+        left: '100%',
+        right: 'auto',
+        top: '-6px',
+        bottom: 'auto'
+    },
+    'left-top': {
+        transform: 'translateX(16px) scale3d(1,1,1)',
+        left: '100%',
+        right: 'auto',
+        top: '-100%',
+        bottom: 'auto'
+    },
+    'left-bottom': {
+        transform: 'translateX(16px) scale3d(1,1,1)',
+        left: '100%',
+        right: 'auto',
+        top: 'auto',
+        bottom: '-10px'
+    },
+    right: {
+        transform: 'translateX(-16px) translateY(-50%) scale3d(1,1,1)',
+        left: 'auto',
+        right: '100%',
+        top: '-6px',
+        bottom: 'auto'
+    },
+    'right-top': {
+        transform: 'translateX(-16px) scale3d(1,1,1)',
+        left: 'auto',
+        right: '100%',
+        top: '-100%',
+        bottom: 'auto'
+    },
+    'right-bottom': {
+        transform: 'translateX(-16px) scale3d(1,1,1)',
+        left: 'auto',
+        right: '100%',
+        top: 'auto',
+        bottom: '-50%'
+    },
+    top: {
+        transform: 'translateX(-50%) scale3d(1,1,1)',
+        left: '50%',
+        right: 'auto',
+        top: 'calc(100% + 2px)',
+        bottom: 'auto'
+    },
+    'top-left': {
+        transform: 'scale3d(1,1,1)',
+        left: '-10px',
+        right: 'auto',
+        top: 'calc(100% + 2px)',
+        bottom: 'auto'
+    },
+    'top-right': {
+        transform: 'scale3d(1,1,1)',
+        left: 'auto',
+        right: '-10px',
+        top: 'calc(100% + 2px)',
+        bottom: 'auto'
+    },
+    'bottom-right': {
+        transform: 'scale3d(1,1,1)',
+        left: 'auto',
+        right: '-10px',
+        top: 'auto',
+        bottom: 'calc(100% + 12px)'
+    },
+    'bottom-left': {
+        transform: 'scale3d(1,1,1)',
+        left: '-10px',
+        right: 'auto',
+        top: 'auto',
+        bottom: 'calc(100% + 12px)'
+    },
+    bottom: {
+        transform: 'translateX(-50%) scale3d(1,1,1)',
+        left: '50%',
+        right: 'auto',
+        top: 'auto',
+        bottom: 'calc(100% + 12px)'
+    }
+}

package/src/common/tooltip-utils/index.ts

@@ -0,0 +1,7 @@
+export { default as Tooltip, type TooltipProps } from './tooltip'
+export { default as TooltipHost } from './tooltip-host'
+export { default as TooltipContent } from './tooltip-content'
+export { default as TooltipFooter } from './tooltip-footer'
+export { useTooltip } from './use-tooltip'
+export type { TooltipType, PointerDirection } from './types'
+export { DEFAULT_POINTER_DIRECTION, POINTER_STYLES } from './constants'

package/src/common/tooltip-utils/tooltip-close-button.tsx

@@ -0,0 +1,10 @@
+import { FC } from 'react'
+
+/**
+ * This is an empty component just to get extra property
+ * for the button used in the EbayInfotipContent
+ */
+
+const TooltipCloseButton: FC = () => null
+
+export default TooltipCloseButton

package/src/common/tooltip-utils/tooltip-content.tsx

@@ -0,0 +1,62 @@
+import React, { FC, CSSProperties, ReactNode } from 'react'
+import { EbayIcon } from '../../ebay-icon'
+import { excludeComponent, findComponent } from '../component-utils'
+import { PointerDirection, TooltipType } from './types'
+import { DEFAULT_POINTER_DIRECTION, POINTER_STYLES, TYPE_ROLES } from './constants'
+import TooltipCloseButton from './tooltip-close-button'
+import TooltipFooter from './tooltip-footer'
+
+export type TooltipContentProps = {
+    id?: string;
+    type?: TooltipType;
+    style?: CSSProperties;
+    pointer?: PointerDirection;
+    showCloseButton?: boolean;
+    a11yCloseText?: string;
+    onClose?: () => void;
+    children?: ReactNode;
+}
+
+const TooltipContent: FC<TooltipContentProps> = ({
+    id,
+    style,
+    pointer = DEFAULT_POINTER_DIRECTION,
+    children,
+    type = 'tooltip',
+    showCloseButton,
+    a11yCloseText,
+    onClose
+}) => {
+    const closeButton = findComponent(children, TooltipCloseButton)
+    const footer = findComponent(children, TooltipFooter)
+    const allChildrenExceptFooter = excludeComponent(children, TooltipFooter)
+
+    return (
+        <span
+            className={`${type}__overlay`}
+            id={id}
+            role={TYPE_ROLES[type] || null}
+            style={{ ...POINTER_STYLES[pointer], ...style }}>
+            <span className={`${type}__pointer ${type}__pointer--${pointer}`} />
+            <span className={`${type}__mask`}>
+                <span className={`${type}__cell`}>
+                    <span className={`${type}__content`}>{allChildrenExceptFooter}</span>
+                    {showCloseButton ? (
+                        <button
+                            {...closeButton?.props}
+                            className={`icon-btn icon-btn--transparent ${type}__close`}
+                            type="button"
+                            aria-label={a11yCloseText}
+                            onClick={onClose}
+                        >
+                            <EbayIcon name="close16" />
+                        </button>
+                    ) : null}
+                    {footer}
+                </span>
+            </span>
+        </span>
+    )
+}
+
+export default TooltipContent

package/src/common/tooltip-utils/tooltip-footer.tsx

@@ -0,0 +1,15 @@
+import React, { ComponentProps, FC } from 'react'
+import classNames from 'classnames'
+
+type TooltipFooterProps = ComponentProps<'div'> & {
+    type?: string;
+}
+
+const TooltipFooter: FC<TooltipFooterProps> = (
+    {
+        children,
+        className,
+        type = 'tourtip'
+    }) => (<div className={classNames(`${type}__footer`, className)}>{children}</div>)
+
+export default TooltipFooter

package/src/common/tooltip-utils/tooltip-host.tsx

@@ -0,0 +1,24 @@
+import { Children, cloneElement, FC, ReactElement, RefObject } from 'react'
+import classNames from 'classnames'
+
+export type TooltipHostProps = {
+    className?: string;
+    children?: ReactElement;
+    forwardedRef?: RefObject<any>;
+}
+
+const TooltipHost: FC<TooltipHostProps> = ({
+    children,
+    className,
+    forwardedRef,
+    ...rest
+}) => {
+    Children.only(children)
+    return cloneElement(children, {
+        ref: forwardedRef,
+        ...rest,
+        className: classNames(className, children.props.className)
+    })
+}
+
+export default TooltipHost

package/src/common/tooltip-utils/tooltip.tsx

@@ -0,0 +1,49 @@
+import React, { cloneElement, ComponentProps, FC, RefObject } from 'react'
+import classNames from 'classnames'
+import { withForwardRef } from '../component-utils/forwardRef'
+import { findComponent, excludeComponent } from '../component-utils'
+import { TooltipType } from './types'
+import TooltipHost from './tooltip-host'
+
+export type TooltipProps = ComponentProps<'span'> & {
+    type?: TooltipType;
+    isExpanded?: boolean;
+    forwardedRef?: RefObject<HTMLSpanElement>;
+}
+
+const Tooltip: FC<TooltipProps> = ({
+    className,
+    type,
+    isExpanded,
+    children,
+    forwardedRef,
+    ...rest
+}) => {
+    const originalHostComponent = findComponent(children, TooltipHost)
+    const content = excludeComponent(children, TooltipHost)[0]
+
+    if (!originalHostComponent) {
+        throw new Error(`Tooltip: Please use a TooltipHost that defines the host of the tooltip`)
+    }
+
+    const host = cloneElement(originalHostComponent, {
+        className: `${type}__host`,
+        'aria-expanded': isExpanded,
+        'aria-describedby': content?.props?.id,
+        ...originalHostComponent.props
+    })
+
+    return (
+        <span
+            {...rest}
+            ref={forwardedRef}
+            className={classNames(className, type, {
+                [`${type}--expanded`]: isExpanded
+            })}>
+            {host}
+            {content}
+        </span>
+    )
+}
+
+export default withForwardRef(Tooltip)

package/src/common/tooltip-utils/types.ts

@@ -0,0 +1,7 @@
+export type TooltipType = 'tooltip' | 'infotip' | 'tourtip'
+
+export type PointerDirection =
+    'top' | 'top-left' | 'top-right' |
+    'right' | 'right-bottom' | 'right-top' |
+    'bottom' | 'bottom-left' | 'bottom-right' |
+    'left' | 'left-bottom' | 'left-top'

package/src/common/tooltip-utils/use-tooltip.ts

@@ -0,0 +1,39 @@
+import { useState, RefObject } from 'react'
+
+type UseTooltipArgs = {
+    onExpand: () => void;
+    onCollapse: () => void;
+    initialExpanded?: boolean;
+    hostRef?: RefObject<HTMLElement>;
+};
+
+type UseTooltip = {
+    isExpanded: boolean;
+    expandTooltip: () => void;
+    collapseTooltip: () => void;
+};
+
+export const useTooltip = ({ onExpand, onCollapse, initialExpanded = false, hostRef }: UseTooltipArgs): UseTooltip => {
+    const [isExpanded, setIsExpanded] = useState(initialExpanded)
+    const expandTooltip = () => {
+        setIsExpanded(true)
+        if (onExpand) {
+            onExpand()
+        }
+    }
+
+    const collapseTooltip = () => {
+        setIsExpanded(false)
+        if (onCollapse) {
+            onCollapse()
+        }
+
+        hostRef?.current?.focus()
+    }
+
+    return {
+        isExpanded,
+        expandTooltip,
+        collapseTooltip
+    }
+}

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

@@ -0,0 +1,36 @@
+import React from 'react'
+import { screen, fireEvent, render } from '@testing-library/react'
+import { EbayAlertDialog } from '../index'
+
+jest.mock('../../common/random-id')
+
+const closeSpy = jest.fn()
+const openSpy = jest.fn()
+
+describe('<EbayAlertDialog>', () => {
+    beforeEach(() => {
+        render(
+            <EbayAlertDialog
+                confirmText="Confirm"
+                open
+                onOpen={openSpy}
+                onConfirm={closeSpy}
+                a11yCloseText="Close"
+            >
+                <p>Lorem ipsum dolor</p>
+            </EbayAlertDialog>
+        )
+    })
+    it('should trigger onOpen when dialog appears', () => {
+        expect(openSpy).toHaveBeenCalled()
+    })
+
+    it('should have close button', () => {
+        expect(screen.getByText('Confirm')).toBeInTheDocument()
+    })
+
+    it('should trigger onClose when close button is clicked', () => {
+        fireEvent.click(screen.getByText('Confirm'))
+        expect(closeSpy).toHaveBeenCalled()
+    })
+})

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

@@ -0,0 +1,77 @@
+import React, { useState } from 'react'
+import { StoryFn, Meta } from '@storybook/react'
+import { action } from '@storybook/addon-actions'
+import { EbayAlertDialog } from '../index'
+import { EbayDialogHeader } from '../../ebay-dialog-base'
+
+const story = {
+    component: EbayAlertDialog,
+    title: 'dialogs/ebay-alert-dialog'
+} satisfies Meta<typeof EbayAlertDialog>
+
+const textParagraph = (
+    <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. Duis aute irure dolor in reprehenderit in
+        voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
+        non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+    </p>
+)
+
+export const Default: StoryFn<typeof EbayAlertDialog> = () => {
+    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>
+            <EbayAlertDialog
+                open={open}
+                onOpen={() => action('onOpen')()}
+                onConfirm={() => {
+                    action('onConfirm')()
+                    close()
+                }}
+                confirmText="Confirm"
+                a11yCloseText="Close"
+            >
+                <EbayDialogHeader>Heading</EbayDialogHeader>
+                {textParagraph}
+                <p>
+                    <a href="http://www.ebay.com">www.ebay.com</a>
+                </p>
+            </EbayAlertDialog>
+        </div>
+    )
+}
+
+export const WithAnimation: StoryFn<typeof EbayAlertDialog> = () => {
+    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>
+            <EbayAlertDialog
+                open={open}
+                onConfirm={close}
+                confirmText="Confirm"
+                animated
+                a11yCloseText="Close"
+            >
+                <EbayDialogHeader>Heading</EbayDialogHeader>
+                {textParagraph}
+                <p>
+                    <a href="http://www.ebay.com">www.ebay.com</a>
+                </p>
+            </EbayAlertDialog>
+        </div>
+    )
+}
+
+export default story