@ebay/ui-core-react 7.3.2 → 7.3.4

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

@@ -1,121 +0,0 @@
-import React from 'react'
-import { render, screen } from '@testing-library/react'
-import { composeStories } from '@storybook/react'
-import * as stories from './index.stories'
-
-const {
-    Default,
-    Disabled,
-    ExpandedByDefault,
-    CustomIcon,
-    TextInsteadOfIcon,
-    _PointerDirection: PointerDirection,
-    Modal
-} = composeStories(stories)
-
-jest.mock('../../common/random-id')
-
-describe('ebay-infotip rendering', () => {
-    it('renders default story correctly', () => {
-        const { container } = render(<Default />)
-
-        const infotip = container.querySelector('.infotip')
-        expect(infotip).not.toHaveClass('infotip--expanded')
-
-        const infotipButton = screen.getByRole('button', { name: 'Infotip' })
-        expect(infotipButton).toHaveClass('icon-btn icon-btn--transparent infotip__host')
-        expect(infotipButton).toHaveAttribute('aria-expanded', 'false')
-        expect(infotipButton.querySelector('svg')).toMatchSnapshot()
-
-        const overlay = container.querySelector('.infotip__overlay')
-        expect(overlay.querySelector('.infotip__pointer.infotip__pointer--bottom')).toBeInTheDocument()
-        expect(overlay.querySelector('.infotip__mask')).toBeInTheDocument()
-        expect(overlay.querySelector('.infotip__heading')).toHaveTextContent('Title')
-        expect(overlay.querySelector('.infotip__content p')).toHaveTextContent('Content')
-
-        const closeButton = screen.getByRole('button', { name: 'Close' })
-        expect(closeButton).toHaveClass('icon-btn icon-btn--transparent infotip__close')
-        expect(closeButton.querySelector('svg')).toMatchSnapshot()
-    })
-
-    it('renders disabled story correctly', () => {
-        render(<Disabled />)
-
-        const infotipButton = screen.getByRole('button', { name: 'Infotip' })
-        expect(infotipButton).toHaveAttribute('aria-expanded', 'false')
-        expect(infotipButton).toBeDisabled()
-    })
-
-    it('renders expanded by default story correctly', () => {
-        const { container } = render(<ExpandedByDefault />)
-
-        const infotip = container.querySelector('.infotip')
-        expect(infotip).toHaveClass('infotip--expanded')
-
-        const infotipButton = screen.getByRole('button', { name: 'Infotip' })
-        expect(infotipButton).toHaveAttribute('aria-expanded', 'true')
-    })
-
-    it('renders custom icon story correctly', () => {
-        render(<CustomIcon />)
-
-        const infotipButton = screen.getByRole('button', { name: 'Infotip' })
-        expect(infotipButton.querySelector('svg')).toMatchSnapshot()
-    })
-
-    it('renders text instead of icon story correctly', () => {
-        render(<TextInsteadOfIcon />)
-
-        const infotipButton = screen.getByRole('button', { name: 'Click for infotip' })
-        expect(infotipButton).toHaveTextContent('Click for infotip')
-        expect(infotipButton.querySelector('svg')).not.toBeInTheDocument()
-    })
-
-    it('renders pointer direction story correctly', () => {
-        const { container } = render(<PointerDirection expanded />)
-
-        const [
-            infotipTop, infotipTopLeft,
-            infotipTopRight, infotipRight,
-            infotipRightBottom, infotipRightTop,
-            infotipBottom, infotipBottomLeft,
-            infotipBottomRight, infotipLeft,
-            infotipLeftBottom, infotipLeftTop
-        ] = container.querySelectorAll('.infotip__overlay')
-        expect(infotipTop.querySelector('.infotip__pointer')).toHaveClass('infotip__pointer--top')
-        expect(infotipTopLeft.querySelector('.infotip__pointer')).toHaveClass('infotip__pointer--top-left')
-        expect(infotipTopRight.querySelector('.infotip__pointer')).toHaveClass('infotip__pointer--top-right')
-        expect(infotipRight.querySelector('.infotip__pointer')).toHaveClass('infotip__pointer--right')
-        expect(infotipRightBottom.querySelector('.infotip__pointer')).toHaveClass('infotip__pointer--right-bottom')
-        expect(infotipRightTop.querySelector('.infotip__pointer')).toHaveClass('infotip__pointer--right-top')
-        expect(infotipBottom.querySelector('.infotip__pointer')).toHaveClass('infotip__pointer--bottom')
-        expect(infotipBottomLeft.querySelector('.infotip__pointer')).toHaveClass('infotip__pointer--bottom-left')
-        expect(infotipBottomRight.querySelector('.infotip__pointer')).toHaveClass('infotip__pointer--bottom-right')
-        expect(infotipLeft.querySelector('.infotip__pointer')).toHaveClass('infotip__pointer--left')
-        expect(infotipLeftBottom.querySelector('.infotip__pointer')).toHaveClass('infotip__pointer--left-bottom')
-        expect(infotipLeftTop.querySelector('.infotip__pointer')).toHaveClass('infotip__pointer--left-top')
-    })
-
-    it('renders modal story correctly', () => {
-        const { container } = render(<Modal initialExpanded />)
-
-        const dialog = screen.getByRole('dialog')
-        expect(dialog).toHaveClass('drawer-dialog dialog--mini__overlay drawer-dialog--mask-fade-slow')
-        expect(dialog).toHaveAttribute('aria-modal', 'true')
-        expect(dialog).toHaveAttribute('aria-labelledby', 'dialog-title-abc123')
-        expect(dialog).not.toHaveAttribute('hidden')
-
-        expect(screen.getByRole('button', { name: 'Maximize Text Label' })).toHaveClass('drawer-dialog__handle')
-
-        const h2 = screen.getByRole('heading', { level: 2 })
-        expect(h2).toHaveAttribute('id', 'dialog-title-abc123')
-        expect(h2).toHaveTextContent('Title')
-
-        expect(screen.getByRole('button', { name: 'Close' })).toHaveClass('icon-btn drawer-dialog__close')
-
-        expect(dialog.querySelector('.drawer-dialog__main')).toHaveTextContent('Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.')
-
-        const infotip = container.querySelector('.infotip')
-        expect(infotip).toHaveClass('dialog--mini infotip--expanded')
-    })
-})

package/src/ebay-infotip/ebay-infotip-content.tsx

@@ -1,10 +0,0 @@
-/**
- * This Component is used only for finding it as a child of EbayInfotip
- * and pass the properties to TooltipContent
-*/
-import React, { FC } from 'react'
-import { TooltipContentProps } from '../common/tooltip-utils/tooltip-content'
-
-const EbayInfotipContent: FC<TooltipContentProps> = ({ children }) => <>{children}</>
-
-export default EbayInfotipContent

package/src/ebay-infotip/ebay-infotip-heading.tsx

@@ -1,13 +0,0 @@
-import React, { ComponentProps, FC } from 'react'
-import classNames from 'classnames'
-
-type Props = ComponentProps<'span'>
-
-const EbayTooltipHeading: FC<Props> = ({
-    className,
-    ...props
-}) => (
-    <span {...props} className={classNames('infotip__heading', className)} />
-)
-
-export default EbayTooltipHeading

package/src/ebay-infotip/ebay-infotip-host.tsx

@@ -1,37 +0,0 @@
-import React, { ComponentProps, FC, RefObject, ReactNode } from 'react'
-import classNames from 'classnames/dedupe'
-import { EbayIcon, Icon } from '../ebay-icon'
-import { withForwardRef } from '../common/component-utils/forwardRef'
-import { Variant } from './types'
-
-type InfotipHostProps = Omit<ComponentProps<'button'>, 'children'> & {
-    icon?: Icon;
-    forwardedRef?: RefObject<HTMLAnchorElement & HTMLButtonElement>;
-    variant?: Variant;
-    children?: (({ icon }) => ReactNode) | ReactNode
-}
-
-const EbayInfotipHost: FC<InfotipHostProps> = ({
-    icon,
-    className,
-    children,
-    forwardedRef,
-    variant,
-    ...rest
-}) => {
-    const classPrefix = variant === 'modal' ? 'dialog--mini' : 'infotip'
-    const buttonIcon = <EbayIcon name={icon} />
-    const buttonContent = children instanceof Function ? children({ icon: buttonIcon }) : children
-
-    return (
-        <button
-            {...rest}
-            className={classNames('icon-btn icon-btn--transparent', className, `${classPrefix}__host`)}
-            type="button"
-            ref={forwardedRef}>
-            {buttonContent || buttonIcon}
-        </button>
-    )
-}
-
-export default withForwardRef(EbayInfotipHost)

package/src/ebay-infotip/ebay-infotip.tsx

@@ -1,125 +0,0 @@
-import React, { cloneElement, createElement, CSSProperties, FC, useRef, ReactNode } from 'react'
-import classNames from 'classnames'
-import { findComponent } from '../common/component-utils'
-import { Tooltip, TooltipHost, TooltipContent, PointerDirection, useTooltip } from '../common/tooltip-utils'
-import { EbayDrawerDialog } from '../ebay-drawer-dialog'
-import { EbayDialogHeader } from '../ebay-dialog-base'
-import EbayInfotipHost from './ebay-infotip-host'
-import { Icon } from '../ebay-icon'
-import { Variant } from './types'
-import { EbayInfotipHeading, EbayInfotipContent } from './index'
-
-type InfotipProps = {
-    variant?: Variant;
-    icon?: Icon;
-    disabled?: boolean;
-    initialExpanded?: boolean;
-    pointer?: PointerDirection;
-    overlayStyle?: CSSProperties;
-    onExpand?: () => void;
-    onCollapse?: () => void;
-    a11yCloseText: string;
-    'aria-label'?: string;
-    className?: string;
-    children?: ReactNode;
-    a11yMaximizeText?:string;
-    a11yMinimizeText?:string;
-};
-
-const EbayInfotip: FC<InfotipProps> = ({
-    variant = 'default',
-    pointer,
-    overlayStyle,
-    disabled,
-    onExpand,
-    onCollapse,
-    children,
-    initialExpanded,
-    icon = 'information16',
-    a11yCloseText,
-    'aria-label': ariaLabel,
-    className,
-    a11yMaximizeText,
-    a11yMinimizeText
-}: InfotipProps) => {
-    const buttonRef = useRef()
-    const {
-        isExpanded,
-        expandTooltip,
-        collapseTooltip
-    } = useTooltip({ onCollapse, onExpand, initialExpanded, hostRef: buttonRef })
-
-    const isModal = variant === 'modal'
-    const containerRef = useRef()
-    const heading = findComponent(children, EbayInfotipHeading)
-    const content = findComponent(children, EbayInfotipContent)
-    const button = findComponent(children, EbayInfotipHost) || createElement(EbayInfotipHost)
-
-    const toggleTooltip = () => {
-        if (isExpanded) {
-            collapseTooltip()
-        } else {
-            expandTooltip()
-        }
-    }
-
-    if (!content) {
-        throw new Error(`EbayInfotip: Please use a EbayInfotipContent that defines the content of the infotip`)
-    }
-
-    const { children: contentChildren, ...contentProps } = content.props
-
-    return (
-        <>
-
-            <Tooltip
-                type="infotip"
-                isExpanded={isExpanded}
-                className={classNames(className, { 'dialog--mini': isModal })}
-                ref={containerRef}>
-                <TooltipHost>
-                    {cloneElement(button, {
-                        ref: buttonRef,
-                        onClick: toggleTooltip,
-                        disabled,
-                        variant,
-                        'aria-label': ariaLabel,
-                        'aria-expanded': isExpanded,
-                        icon,
-                        ...button.props
-                    })}
-                </TooltipHost>
-                {!isModal && (
-                    <TooltipContent
-                        {...contentProps}
-                        type="infotip"
-                        style={overlayStyle}
-                        pointer={pointer}
-                        showCloseButton
-                        a11yCloseText={a11yCloseText}
-                        onClose={collapseTooltip}
-                    >
-                        {heading}
-                        {contentChildren}
-                    </TooltipContent>
-                )}
-            </Tooltip>
-            {isModal && (
-                <EbayDrawerDialog
-                    {...contentProps}
-                    open={isExpanded}
-                    onClose={collapseTooltip}
-                    a11yCloseText={a11yCloseText}
-                    className="dialog--mini__overlay"
-                    a11yMaximizeText={a11yMaximizeText}
-                    a11yMinimizeText={a11yMinimizeText}
-                >
-                    <EbayDialogHeader>{heading}</EbayDialogHeader>
-                    {contentChildren}
-                </EbayDrawerDialog>
-            )}
-        </>
-    )
-}
-
-export default EbayInfotip

package/src/ebay-infotip/index.ts

@@ -1,5 +0,0 @@
-export { default as EbayInfotip } from './ebay-infotip'
-export { default as EbayInfotipHost } from './ebay-infotip-host'
-export { default as EbayInfotipHeading } from './ebay-infotip-heading'
-export { default as EbayInfotipContent } from './ebay-infotip-content'
-export type { Variant } from './types'

package/src/ebay-infotip/types.ts

@@ -1 +0,0 @@
-export type Variant = 'default' | 'modal'

package/src/ebay-inline-notice/__tests__/index.spec.tsx

@@ -1,68 +0,0 @@
-import React from 'react'
-import { render } from '@testing-library/react'
-import { EbayInlineNotice, EbayNoticeContent } from '../index'
-
-describe('<EbayInlineNotice>', () => {
-    describe('when hidden', () => {
-        it('should not render the notice component', () => {
-            const { container } = render(
-                <EbayInlineNotice hidden aria-label="notice">
-                    <EbayNoticeContent>
-                        <p>I am a sneaky notice!</p>
-                    </EbayNoticeContent>
-                </EbayInlineNotice>
-            )
-            expect(container.childElementCount).toBe(0)
-        })
-    })
-
-    describe('when aria-label is given', () => {
-        it('should add the text to the icon as an aria-label', () => {
-            const wrapper = render(
-                <EbayInlineNotice status="confirmation" aria-label="Success Confirmation">
-                    <EbayNoticeContent>
-                        <p>You did it.</p>
-                    </EbayNoticeContent>
-                </EbayInlineNotice>
-            )
-            const icon = wrapper.container.querySelector('svg')
-            expect(icon).toHaveAttribute('role', 'img')
-        })
-    })
-
-    describe('on going from hidden -> not hidden', () => {
-        it('should call onNoticeShow', () => {
-            const spy = jest.fn()
-            const { rerender } = render(
-                <EbayInlineNotice hidden aria-label="notice" onNoticeShow={spy}>
-                    <EbayNoticeContent>
-                        <p>Uh oh!</p>
-                    </EbayNoticeContent>
-                </EbayInlineNotice>
-            )
-            expect(spy).not.toHaveBeenCalled()
-
-            rerender(
-                <EbayInlineNotice hidden={false} aria-label="notice" onNoticeShow={spy}>
-                    <EbayNoticeContent>
-                        <p>Uh oh!</p>
-                    </EbayNoticeContent>
-                </EbayInlineNotice>
-            )
-            expect(spy).toHaveBeenCalled()
-        })
-    })
-
-
-    describe('on using the notice with no content', () => {
-        it('should throw an error', () => {
-            jest.spyOn(console, 'error').mockImplementation(() => null)
-            expect(() => {
-                render(<EbayInlineNotice aria-label="error" />)
-            }).toThrowError(`EbayInlineNotice: Please use a EbayNoticeContent that defines the content of the notice`);
-            (console.error as jest.Mock).mockRestore()
-        })
-    })
-})
-
-jest.mock('../../common/random-id')

package/src/ebay-inline-notice/__tests__/index.stories.tsx

@@ -1,95 +0,0 @@
-import React, { useState } from 'react'
-import { action } from '@storybook/addon-actions'
-import { EbayButton } from '../../ebay-button'
-import { EbayInlineNotice, EbayNoticeContent } from '../index'
-
-export default {
-    title: 'notices & tips/ebay-inline-notice'
-}
-
-export const Default = () => (
-    <>
-        <EbayInlineNotice aria-label="General">
-            <EbayNoticeContent>
-                <p>text message</p>
-            </EbayNoticeContent>
-        </EbayInlineNotice>
-    </>
-)
-
-export const ConfirmationMessage = {
-    render: () => (
-        <>
-            <EbayInlineNotice status="confirmation" aria-label="Confirmation">
-                <EbayNoticeContent>
-                    <p>Delivered on May 1, 2017</p>
-                    <p>
-                        Tracking number: <a href="http://www.ebay.com">93878473859376898908657567</a>
-                    </p>
-                </EbayNoticeContent>
-            </EbayInlineNotice>
-        </>
-    ),
-
-    name: 'Confirmation message'
-}
-
-export const InformationMessage = {
-    render: () => (
-        <>
-            <EbayInlineNotice status="information" aria-label="Information">
-                <EbayNoticeContent>
-                    <p>Global Shipping Program transaction.</p>
-                </EbayNoticeContent>
-            </EbayInlineNotice>
-        </>
-    ),
-
-    name: 'Information message'
-}
-
-export const AttentionMessage = {
-    render: () => (
-        <>
-            <EbayInlineNotice status="attention" aria-label="Attention">
-                <EbayNoticeContent>
-                    <p>Update your credit card.</p>
-                </EbayNoticeContent>
-            </EbayInlineNotice>
-        </>
-    ),
-
-    name: 'Attention message'
-}
-
-export const NoticeToggle = {
-    render: () => (
-        <>
-            <NoticeToggleStory />
-        </>
-    ),
-
-    name: 'Notice toggle'
-}
-
-function NoticeToggleStory() {
-    const [hidden, setHidden] = useState(false)
-    return (
-        <>
-            <EbayButton onClick={() => setHidden(!hidden)}>{hidden ? 'Show' : 'Hide'} Notice</EbayButton>
-            <EbayInlineNotice
-                status="confirmation"
-                hidden={hidden}
-                onNoticeShow={action('Showing')}
-                aria-label="Toggle notice"
-            >
-                <EbayNoticeContent>
-                    <p>Delivered on May 1, 2017</p>
-                    <p>
-                        Tracking number: <a href="http://www.ebay.com">93878473859376898908657567</a>
-                    </p>
-                </EbayNoticeContent>
-            </EbayInlineNotice>
-        </>
-    )
-}

package/src/ebay-inline-notice/index.ts

@@ -1,3 +0,0 @@
-export { default as EbayInlineNotice } from './inline-notice'
-export { EbayNoticeContent } from '../ebay-notice-base/components/ebay-notice-content'
-export type { NoticeStatus } from './types'

package/src/ebay-inline-notice/inline-notice.tsx

@@ -1,62 +0,0 @@
-import React, { FC, useEffect, ReactNode } from 'react'
-import classNames from 'classnames'
-import { EbayNoticeContent } from '../ebay-notice-base/components/ebay-notice-content'
-import NoticeContent from '../common/notice-utils/notice-content'
-import { findComponent } from '../common/component-utils'
-import { EbayIcon, Icon } from '../ebay-icon'
-import { NoticeStatus } from './types'
-
-type Props = React.ComponentProps<'div'> & {
-    status?: NoticeStatus;
-    onNoticeShow?: () => void;
-    'aria-label': string;
-    hidden?: boolean;
-    className?: string
-    children?: ReactNode;
-}
-
-const EbayInlineNotice: FC<Props> = ({
-    className,
-    status = 'general',
-    children,
-    hidden = false,
-    'aria-label': ariaLabel,
-    onNoticeShow = () => {},
-    ...rest
-}) => {
-    useEffect(() => {
-        if (!hidden) {
-            onNoticeShow()
-        }
-    }, [hidden])
-
-    if (hidden) {
-        return null
-    }
-
-    const content = findComponent(children, EbayNoticeContent)
-
-    if (!content) {
-        throw new Error(`EbayInlineNotice: Please use a EbayNoticeContent that defines the content of the notice`)
-    }
-
-    const isGeneral = status === `general`
-
-    return (
-        <div
-            {...rest}
-            className={classNames(className, 'inline-notice', { [`inline-notice--${status}`]: !isGeneral })}
-        >
-            {!isGeneral ? (
-                <span className="inline-notice__header">
-                    <EbayIcon name={`${status}Filled16` as Icon} a11yText={ariaLabel} a11yVariant="label" />
-                </span>
-            ) : null}
-            <NoticeContent
-                {...content.props}
-                type="inline" />
-        </div>
-    )
-}
-
-export default EbayInlineNotice

package/src/ebay-inline-notice/types.ts

@@ -1 +0,0 @@
-export type NoticeStatus = 'general' | 'attention' | 'confirmation' | 'information'

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

@@ -1,52 +0,0 @@
-import React from 'react'
-import { render, fireEvent } from '@testing-library/react'
-import { EbayDialogFooter, EbayDialogHeader } from '../../ebay-dialog-base'
-import { EbayLightboxDialog } from '../index'
-
-jest.mock('../../common/random-id')
-
-const closeSpy = jest.fn()
-const openSpy = jest.fn()
-const openDialog = () =>
-    render(
-        <EbayLightboxDialog
-            animated={false}
-            open
-            onOpen={openSpy}
-            onClose={closeSpy}
-            a11yCloseText="Close"
-        >
-            <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" />
-            <EbayDialogFooter>Footing</EbayDialogFooter>
-        </EbayLightboxDialog>
-    )
-
-describe('<EbayLightboxDialog>', () => {
-    it('should trigger onOpen when dialog appears', () => {
-        openDialog()
-        expect(openSpy).toHaveBeenCalled()
-    })
-
-    it('should have close button', () => {
-        openDialog()
-        expect(document.querySelector(`button.lightbox-dialog__close`)).toBeInTheDocument()
-    })
-
-    it('should focus on close button', () => {
-        openDialog()
-        expect(document.querySelector('button.lightbox-dialog__close')).toHaveFocus()
-    })
-
-    it('should trigger onClose when close button is clicked', () => {
-        openDialog()
-        fireEvent.click(document.querySelector(`button.lightbox-dialog__close`))
-        expect(closeSpy).toHaveBeenCalled()
-    })
-})