@ebay/ui-core-react 7.3.1 → 7.3.2

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

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

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

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

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

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

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

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

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

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