@ebay/ui-core-react 7.3.2 → 7.3.4

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1,16 +0,0 @@
-import React from 'react'
-import { screen, render } from '@testing-library/react'
-import { composeStories } from '@storybook/react'
-import * as stories from './index.stories'
-
-const { Default } = composeStories(stories)
-
-describe('EbayAlertDialog rendering', () => {
-    it('should render the default story correctly', () => {
-        render(<Default />)
-        expect(screen.getByRole('alertdialog')).toBeInTheDocument()
-        expect(screen.getByRole('heading', { level: 2 })).toBeInTheDocument()
-        expect(screen.getByText(/Lorem ipsum dolor sit amet/)).toBeInTheDocument()
-        expect(screen.getByRole('link', { name: 'www.ebay.com' })).toBeInTheDocument()
-    })
-})

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

@@ -1,53 +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 = 'alert-dialog'
-
-export interface Props<T = any> extends DialogBaseProps<T> {
-  open?: boolean;
-  confirmText: string;
-  onConfirm?: () => void;
-}
-
-const EbayAlertDialog: FC<Props> = ({
-    a11yCloseText = 'Close Dialog',
-    confirmText,
-    onConfirm = () => {},
-    ...rest
-}) => {
-    const confirmBtnRef = useRef(null)
-    const confirmId = 'alert-dialog-confirm'
-    const mainId = 'alert-dialog-main'
-    return (
-        <DialogBaseWithState
-            focus={confirmBtnRef}
-            {...rest}
-            a11yCloseText={a11yCloseText}
-            role="alertdialog"
-            classPrefix={classPrefix}
-            ignoreEscape
-            mainId={mainId}
-            buttonPosition="hidden"
-            className={classNames(rest.className, `${classPrefix}--mask-fade`)}
-            windowClass={`${classPrefix}__window ${classPrefix}__window--fade`}
-        >
-            {rest.children}
-            <EbayDialogFooter>
-                <EbayButton
-                    priority="primary"
-                    aria-describedby={mainId}
-                    onClick={onConfirm}
-                    ref={confirmBtnRef}
-                    id={confirmId}
-                    className="alert-dialog__acknowledge"
-                >
-                    {confirmText}
-                </EbayButton>
-            </EbayDialogFooter>
-        </DialogBaseWithState>
-    )
-}
-
-export default EbayAlertDialog

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

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

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

@@ -1,47 +0,0 @@
-import React from 'react'
-import { EbayBadge } from '../index'
-import { render } from '@testing-library/react'
-
-describe('<EbayBadge>', () => {
-    it('renders defaults', async () => {
-        const { getByText } = await render(<EbayBadge number={5} />)
-        expect(getByText('5')).toBeInTheDocument()
-    })
-
-    it('renders number with rounded-up value', async () => {
-        const { getByText } = await render(<EbayBadge number={5.6} />)
-        expect(getByText('5')).toBeInTheDocument()
-    })
-
-    it('does not render with negative value', async () => {
-        const { queryByText } = await render(<EbayBadge number={-5} />)
-        expect(queryByText(/\d+/)).toBeNull()
-    })
-
-    describe('given number is a string', () => {
-        it('renders number with coerced string', async () => {
-            const { getByText } = await render(<EbayBadge number="5" />)
-            expect(getByText('5')).toBeInTheDocument()
-        })
-
-        it('renders number with rounded-up string', async () => {
-            const { getByText } = await render(<EbayBadge number="5.6" />)
-            expect(getByText('5')).toBeInTheDocument()
-        })
-
-        it('does not renders with an invalid string', async () => {
-            const { queryByText } = await render(<EbayBadge number="five" />)
-            expect(queryByText(/\d+/)).toBeNull()
-        })
-
-        it('does not renders with a negative string', async () => {
-            const { queryByText } = await render(<EbayBadge number="-5" />)
-            expect(queryByText(/\d+/)).toBeNull()
-        })
-    })
-
-    it('truncates when the value is greater than 99', async () => {
-        const { getByText } = await render(<EbayBadge number={150} />)
-        expect(getByText('99+')).toBeInTheDocument()
-    })
-})