@ebay/ui-core-react 7.3.0 → 7.3.2

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,52 @@
+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()
+    })
+})