@ebay/ui-core-react 7.3.2 → 7.3.3

package/src/ebay-icon-button/__tests__/index.spec.tsx

@@ -1,59 +0,0 @@
-import React from 'react'
-import { fireEvent, render } from '@testing-library/react'
-import { EbayIconButton } from '../../ebay-icon-button'
-import { eventOfType } from '../../common/event-utils/__tests__/helpers'
-
-describe('<EbayIconButton>', () => {
-    describe('on passing a ref', () => {
-        it('should set the ref to button element', () => {
-            const ref = React.createRef() as any
-            render(<EbayIconButton ref={ref} icon="menu20" />)
-
-            expect(ref.current.tagName).toBe('BUTTON')
-        })
-    })
-    describe('on button click', () => {
-        it('should fire onClick event', () => {
-            const spy = jest.fn()
-            const wrapper = render(
-                <EbayIconButton onClick={spy} icon="add16" />
-            )
-            fireEvent.click(wrapper.getByRole('button'))
-
-            expect(spy).toHaveBeenCalledWith(eventOfType('click'))
-        })
-    })
-    describe('on focus', () => {
-        it('should fire onFocus event', () => {
-            const spy = jest.fn()
-            const wrapper = render(
-                <EbayIconButton onFocus={spy} icon="add16" />
-            )
-            fireEvent.focus(wrapper.getByRole('button'))
-
-            expect(spy).toHaveBeenCalledWith(eventOfType('focus'))
-        })
-    })
-    describe('on blur', () => {
-        it('should fire onBlur event', () => {
-            const spy = jest.fn()
-            const wrapper = render(
-                <EbayIconButton onBlur={spy} icon="add16" />
-            )
-            fireEvent.blur(wrapper.getByRole('button'))
-
-            expect(spy).toHaveBeenCalledWith(eventOfType('blur'))
-        })
-    })
-    describe('on Esc press', () => {
-        it('should fire onEscape event', () => {
-            const spy = jest.fn()
-            const wrapper = render(
-                <EbayIconButton onEscape={spy} icon="add16" />
-            )
-            fireEvent.keyDown(wrapper.getByRole('button'), { key: 'Escape' })
-
-            expect(spy).toHaveBeenCalledWith(eventOfType('keydown'))
-        })
-    })
-})

package/src/ebay-icon-button/__tests__/index.stories.tsx

@@ -1,64 +0,0 @@
-import React from 'react'
-import { action } from '@storybook/addon-actions'
-import { EbayIconButton } from '../index'
-
-export default {
-    title: 'buttons/ebay-icon-button'
-}
-
-export const Default = () => (
-    <>
-        <p>
-            <EbayIconButton
-                onClick={(e: React.MouseEvent) => action('onClick')(e)}
-                onFocus={(e: React.FocusEvent) => action('onFocus')(e)}
-                onBlur={(e: React.FocusEvent) => action('onBlur')(e)}
-                onEscape={(e: React.KeyboardEvent) => action('onEscape')(e)}
-                icon="menu20"
-                aria-label="Menu"
-            />
-        </p>
-        <p>
-            <EbayIconButton href="https://ebay.com" icon="settings16" aria-label="Settings" />
-        </p>
-    </>
-)
-
-export const WithBadges = () => (
-    <>
-        <p>
-            <EbayIconButton
-                icon="menu20"
-                aria-label="Menu"
-                badgeNumber={1}
-                badgeAriaLabel="new feature available"
-            />
-        </p>
-        <p>
-            <EbayIconButton
-                href="https://ebay.com"
-                icon="cart16"
-                badgeNumber={3}
-                badgeAriaLabel="3 items in your cart"
-                aria-label="Cart"
-            />
-        </p>
-        <p>
-            <EbayIconButton
-                href="https://ebay.com"
-                icon="chat16"
-                badgeNumber={99}
-                badgeAriaLabel="99 unread messages"
-                aria-label="Chat"
-            />
-        </p>
-    </>
-)
-
-export const Transparent = () => (
-    <>
-        <p>
-            <EbayIconButton onClick={action('clicked')} icon="menu20" transparent aria-label="Menu" />
-        </p>
-    </>
-)

package/src/ebay-icon-button/__tests__/render.spec.tsx

@@ -1,61 +0,0 @@
-import React from 'react'
-import { render, getAllByRole } from '@testing-library/react'
-import { composeStory } from '@storybook/react'
-import Meta, { Default, WithBadges, Transparent } from './index.stories'
-
-const DefaultStory = composeStory(Default, Meta)
-const WithBadgesStory = composeStory(WithBadges, Meta)
-const TransparentStory = composeStory(Transparent, Meta)
-
-describe('EbayIconButton rendering', () => {
-    describe('Default', () => {
-        it('should render correctly', () => {
-            const { container } = render(<DefaultStory />)
-            const buttons = getAllByRole(container, 'button')
-            const firstButton = buttons[0] as Element
-
-            expect(firstButton).toHaveClass('icon-btn')
-            expect(firstButton).toHaveAttribute('type', 'button')
-            const svg = firstButton.querySelector('svg')
-            expect(svg).toHaveClass('icon icon--20')
-            expect(svg).toHaveAttribute('aria-hidden', 'true')
-            expect(svg).toHaveAttribute('focusable', 'false')
-        })
-    })
-
-    describe('WithBadges', () => {
-        it('should render correctly', () => {
-            const { container } = render(<WithBadgesStory />)
-            const buttons = getAllByRole(container, 'button')
-            const firstButton = buttons[0] as Element
-
-            expect(firstButton).toHaveClass('icon-btn')
-            expect(firstButton).toHaveAttribute('type', 'button')
-
-            const svg = firstButton.querySelector('svg')
-            expect(svg).toHaveClass('icon icon--20')
-            expect(svg).toHaveAttribute('aria-hidden', 'true')
-            expect(svg).toHaveAttribute('focusable', 'false')
-
-            const badge = firstButton.querySelector('.badge')
-            expect(badge).not.toBeNull()
-            expect(badge.textContent).toBe('1')
-        })
-    })
-
-    describe('Transparent', () => {
-        it('should render correctly', () => {
-            const { container } = render(<TransparentStory />)
-            const buttons = getAllByRole(container, 'button')
-            const firstButton = buttons[0] as Element
-
-            expect(firstButton).toHaveClass('icon-btn icon-btn--transparent')
-            expect(firstButton).toHaveAttribute('type', 'button')
-
-            const svg = firstButton.querySelector('svg')
-            expect(svg).toHaveClass('icon icon--20')
-            expect(svg).toHaveAttribute('aria-hidden', 'true')
-            expect(svg).toHaveAttribute('focusable', 'false')
-        })
-    })
-})

package/src/ebay-icon-button/icon-button.tsx

@@ -1,84 +0,0 @@
-import React, { ComponentProps, FC, KeyboardEvent, RefObject } from 'react'
-import classNames from 'classnames'
-import { EbayIcon, Icon } from '../ebay-icon'
-import { EbayBadge } from '../ebay-badge'
-import { withForwardRef } from '../common/component-utils'
-import { EbayKeyboardEventHandler } from '../common/event-utils/types'
-import { Size } from '../ebay-button'
-
-export type EbayIconButtonProps = {
-    href?: string;
-    icon: Icon;
-    badgeNumber?: number;
-    badgeAriaLabel?: string;
-    transparent?: boolean;
-    size?: Size;
-    forwardedRef?: RefObject<HTMLAnchorElement & HTMLButtonElement>;
-    onEscape?: EbayKeyboardEventHandler;
-}
-
-type HTMLButtonProps = ComponentProps<'button'>;
-type HTMLAnchorProps = ComponentProps<'a'>;
-type Props = EbayIconButtonProps & HTMLButtonProps & HTMLAnchorProps;
-
-const EbayIconButton: FC<Props> = ({
-    href,
-    icon,
-    badgeNumber,
-    badgeAriaLabel,
-    transparent,
-    className: extraClasses,
-    forwardedRef,
-    size,
-    onEscape = () => {},
-    onKeyDown = () => {},
-    ...rest
-}: Props) => {
-    const classPrefix = href ? 'icon-link' : 'icon-btn'
-    const className = classNames(
-        extraClasses,
-        classPrefix,
-        size && `${classPrefix}--${size}`,
-        {
-            [`${classPrefix}--badged`]: badgeNumber,
-            [`${classPrefix}--transparent`]: transparent
-        }
-    )
-    const children = (
-        <>
-            <EbayIcon name={icon} />
-            {badgeNumber && <EbayBadge type="icon" number={badgeNumber} aria-label={badgeAriaLabel} />}
-        </>
-    )
-
-    const keyDownHandler = (e: KeyboardEvent<HTMLButtonElement & HTMLAnchorElement>) => {
-        if (e.key === 'Escape' || e.key === 'Esc') {
-            onEscape(e)
-        }
-        onKeyDown(e)
-    }
-
-    return href ? (
-        <a
-            ref={forwardedRef}
-            className={className}
-            href={href}
-            onKeyDown={keyDownHandler}
-            {...rest}
-        >
-            {children}
-        </a>
-    ) : (
-        <button
-            ref={forwardedRef}
-            type="button"
-            className={className}
-            onKeyDown={keyDownHandler}
-            {...rest}
-        >
-            {children}
-        </button>
-    )
-}
-
-export default withForwardRef(EbayIconButton)

package/src/ebay-icon-button/index.ts

@@ -1 +0,0 @@
-export { default as EbayIconButton, type EbayIconButtonProps } from './icon-button'

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

@@ -1,40 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`ebay-infotip rendering renders custom icon story correctly 1`] = `
-<svg
-  aria-hidden="true"
-  class="icon icon--16"
-  focusable="false"
-  xmlns="http://www.w3.org/2000/svg"
->
-  <use
-    xlink:href="#icon-settings-16"
-  />
-</svg>
-`;
-
-exports[`ebay-infotip rendering renders default story correctly 1`] = `
-<svg
-  aria-hidden="true"
-  class="icon icon--16"
-  focusable="false"
-  xmlns="http://www.w3.org/2000/svg"
->
-  <use
-    xlink:href="#icon-information-16"
-  />
-</svg>
-`;
-
-exports[`ebay-infotip rendering renders default story correctly 2`] = `
-<svg
-  aria-hidden="true"
-  class="icon icon--16"
-  focusable="false"
-  xmlns="http://www.w3.org/2000/svg"
->
-  <use
-    xlink:href="#icon-close-16"
-  />
-</svg>
-`;

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

@@ -1,108 +0,0 @@
-import React from 'react'
-import { render, fireEvent, RenderResult } from '@testing-library/react'
-import { EbayInfotip, EbayInfotipContent, EbayInfotipHeading } from '../index'
-
-jest.mock('../../common/random-id')
-
-const renderComponent = (props?: any) => render(
-    <EbayInfotip {...props}>
-        <EbayInfotipHeading>Title</EbayInfotipHeading>
-        <EbayInfotipContent>
-            <p>Info content</p>
-        </EbayInfotipContent>
-    </EbayInfotip>
-)
-
-const checkIsExpanded = (wrapper: RenderResult) => {
-    expect(wrapper.container.querySelector('.infotip--expanded')).toBeInTheDocument()
-    expect(wrapper.container.querySelector('button[aria-expanded=true]')).toBeInTheDocument()
-}
-
-const checkIsCollapsed = (wrapper: RenderResult) => {
-    expect(wrapper.container.querySelector('.infotip--expanded')).not.toBeInTheDocument()
-    expect(wrapper.container.querySelector('button[aria-expanded=true]')).not.toBeInTheDocument()
-}
-
-describe('<EbayInfotip>', () => {
-    describe('on infotip button click', () => {
-        it('should expand the infotip', () => {
-            const wrapper = renderComponent()
-            fireEvent.click(wrapper.container.querySelector('button.infotip__host'))
-            checkIsExpanded(wrapper)
-        })
-    })
-
-    describe('on infotip button close click', () => {
-        it('should collapse the infotip', () => {
-            const wrapper = renderComponent()
-            fireEvent.click(wrapper.container.querySelector('.infotip__close'))
-            checkIsCollapsed(wrapper)
-        })
-    })
-
-    describe('on infotip expanded', () => {
-        it('should fire an event', () => {
-            const spy = jest.fn()
-            const wrapper = renderComponent({ onExpand: spy })
-            fireEvent.click(wrapper.container.querySelector('button.infotip__host'))
-
-            expect(spy).toHaveBeenCalled()
-        })
-    })
-
-    describe('on infotip collapsed', () => {
-        it('should fire an event', () => {
-            const spy = jest.fn()
-            const wrapper = renderComponent({ onCollapse: spy })
-            fireEvent.click(wrapper.container.querySelector('button.infotip__host'))
-            fireEvent.click(wrapper.container.querySelector('button.infotip__close'))
-
-            expect(spy).toHaveBeenCalled()
-        })
-    })
-
-    describe('on using the infotip with no content', () => {
-        it('should throw an error', () => {
-            jest.spyOn(console, 'error').mockImplementation(() => null)
-            expect(() => {
-                render(<EbayInfotip a11yCloseText="Close" />)
-            }).toThrowError(`EbayInfotip: Please use a EbayInfotipContent that defines the content of the infotip`);
-            (console.error as jest.Mock).mockRestore()
-        })
-    })
-
-    describe('on using the close button', () => {
-        it('should pass the property to the button that close the infotip', () => {
-            const wrapper = render(
-                <EbayInfotip a11yCloseText="Dismiss info">
-                    <EbayInfotipHeading>Title</EbayInfotipHeading>
-                    <EbayInfotipContent>
-                        <p>Info content</p>
-                    </EbayInfotipContent>
-                </EbayInfotip>
-            )
-
-            expect(wrapper.container.querySelector('.infotip__close[aria-label="Dismiss info"]')).toBeInTheDocument()
-        })
-
-        it('should focus the button element', () => {
-            const { getByLabelText } = render(
-                <EbayInfotip a11yCloseText="Dismiss info" aria-label="info">
-                    <EbayInfotipContent>
-                        <p>Info content</p>
-                    </EbayInfotipContent>
-                </EbayInfotip>
-            )
-
-            const host = getByLabelText('info')
-
-            fireEvent.click(host)
-            expect(host).not.toHaveFocus()
-
-            const close = getByLabelText('Dismiss info')
-
-            fireEvent.click(close)
-            expect(host).toHaveFocus()
-        })
-    })
-})

package/src/ebay-infotip/__tests__/index.stories.tsx

@@ -1,204 +0,0 @@
-import React from 'react'
-import { EbayInfotip, EbayInfotipContent, EbayInfotipHeading, EbayInfotipHost } from '../index'
-import { PointerDirection } from '../../ebay-tooltip'
-
-const allPointers: PointerDirection[] = [
-    'top',
-    'top-left',
-    'top-right',
-    'right',
-    'right-bottom',
-    'right-top',
-    'bottom',
-    'bottom-left',
-    'bottom-right',
-    'left',
-    'left-bottom',
-    'left-top'
-]
-
-export default {
-    title: 'buttons/ebay-infotip'
-}
-
-export const Default = () => (
-    <div style={{ display: 'flex', margin: 200 }}>
-        <EbayInfotip a11yCloseText="Close" aria-label="Infotip">
-            <EbayInfotipHeading>Title</EbayInfotipHeading>
-            <EbayInfotipContent>
-                <p>Content</p>
-            </EbayInfotipContent>
-        </EbayInfotip>
-    </div>
-)
-
-export const CustomIcon = {
-    render: () => (
-        <div style={{ width: '100%', margin: 200 }}>
-            <EbayInfotip icon="settings16" aria-label="Infotip" a11yCloseText="Close">
-                <EbayInfotipContent>
-                    <EbayInfotipHeading>Title</EbayInfotipHeading>
-                    <p>Content</p>
-                </EbayInfotipContent>
-            </EbayInfotip>
-        </div>
-    ),
-
-    name: 'Custom icon'
-}
-
-export const Disabled = () => (
-    <div style={{ display: 'flex', margin: 200 }}>
-        <EbayInfotip disabled a11yCloseText="Close" aria-label="Infotip">
-            <EbayInfotipHeading>Title</EbayInfotipHeading>
-            <EbayInfotipContent>
-                <p>Content</p>
-            </EbayInfotipContent>
-        </EbayInfotip>
-    </div>
-)
-
-export const InParagraph = {
-    render: () => (
-        <div style={{ width: '100%', margin: 100 }}>
-            <em>
-                NOTE: No block elements can be nested in p elements, like div, h1-6, or other p elements.
-                Any content with that will break
-            </em>
-            <p>
-                Some paragraph content{' '}
-                <EbayInfotip a11yCloseText="Dismiss infotip" aria-label="Important information">
-                    <EbayInfotipHeading>Important</EbayInfotipHeading>
-                    <EbayInfotipContent>
-                        <span>This is some important info</span>
-                    </EbayInfotipContent>
-                </EbayInfotip>{' '}
-                More paragraph content
-            </p>
-        </div>
-    ),
-
-    name: 'In paragraph'
-}
-
-export const Modal = (args) => (
-    <div style={{ width: '100%', margin: 100 }}>
-        <EbayInfotip
-            variant="modal"
-            a11yCloseText="Close"
-            aria-label="Infotip"
-            a11yMaximizeText="Maximize Text Label"
-            a11yMinimizeText="Minimize Text Label"
-            {...args}
-        >
-            <EbayInfotipHeading>Title</EbayInfotipHeading>
-            <EbayInfotipContent>
-                <p>
-                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
-                    ut labore et dolore magna aliqua.
-                </p>
-            </EbayInfotipContent>
-        </EbayInfotip>
-    </div>
-)
-
-export const _PointerDirection = {
-    render: (args) => (
-        <div style={{ width: '100%', marginLeft: 300 }}>
-            {allPointers.map((pointerType, index) => (
-                <div key={index} style={{ margin: '100px 0' }}>
-                    {pointerType}{' '}
-                    <EbayInfotip pointer={pointerType} a11yCloseText="Close" aria-label="Infotip" {...args}>
-                        <EbayInfotipHeading>Title</EbayInfotipHeading>
-                        <EbayInfotipContent>
-                            <p>Use Access Key &apos;S&apos; to display settings.</p>
-                        </EbayInfotipContent>
-                    </EbayInfotip>
-                </div>
-            ))}
-        </div>
-    ),
-
-    name: 'Pointer direction'
-}
-
-export const PointerWithCustomLocation = {
-    render: () => (
-        <div style={{ width: '100%', margin: 200 }}>
-            <EbayInfotip
-                pointer="top-left"
-                overlayStyle={{ top: 40, left: -16 }}
-                a11yCloseText="Close"
-                aria-label="Infotip"
-            >
-                <EbayInfotipHeading>Title</EbayInfotipHeading>
-                <EbayInfotipContent>
-                    <p>Use Access Key &apos;S&apos; to display settings.</p>
-                </EbayInfotipContent>
-            </EbayInfotip>
-        </div>
-    ),
-
-    name: 'Pointer with custom location'
-}
-
-export const TextInsteadOfIcon = {
-    render: () => (
-        <div style={{ width: '100%', margin: 200 }}>
-            <EbayInfotip pointer="top-left" a11yCloseText="Close">
-                <EbayInfotipHost>Click for infotip</EbayInfotipHost>
-                <EbayInfotipHeading>Title</EbayInfotipHeading>
-                <EbayInfotipContent>
-                    <p>Use Access Key &apos;S&apos; to display settings.</p>
-                </EbayInfotipContent>
-            </EbayInfotip>
-        </div>
-    ),
-
-    name: 'Text instead of icon'
-}
-
-export const CustomButtonContentWithRenderProp = {
-    render: () => (
-        <div style={{ width: '100%', margin: 200 }}>
-            <EbayInfotip
-                pointer="top-left"
-                a11yCloseText="Close"
-                aria-label="Wrong aria-label, should be overwritten"
-            >
-                <EbayInfotipHost
-                    aria-label="Click to open infotip"
-                    style={{ height: 'auto', width: 'auto' }}
-                >
-                    {({ icon }: any) => (
-                        <span style={{ display: 'inline-flex', alignItems: 'center' }}>
-                            {icon}
-                            <span style={{ marginLeft: 5 }}>Click me</span>
-                        </span>
-                    )}
-                </EbayInfotipHost>
-                <EbayInfotipContent>
-                    <EbayInfotipHeading>Title</EbayInfotipHeading>
-                    <p>Use Access Key &apos;S&apos; to display settings.</p>
-                </EbayInfotipContent>
-            </EbayInfotip>
-        </div>
-    ),
-
-    name: 'Custom button content (With render prop)'
-}
-
-export const ExpandedByDefault = {
-    render: () => (
-        <div style={{ width: '100%', margin: 200 }}>
-            <EbayInfotip pointer="top-left" initialExpanded a11yCloseText="Close" aria-label="Infotip">
-                <EbayInfotipHeading>Title</EbayInfotipHeading>
-                <EbayInfotipContent>
-                    <p>Use Access Key &apos;S&apos; to display settings.</p>
-                </EbayInfotipContent>
-            </EbayInfotip>
-        </div>
-    ),
-
-    name: 'Expanded by default'
-}