@ebay/ui-core-react 7.3.0 → 7.3.2

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

@@ -0,0 +1,169 @@
+import React, { cloneElement, FC, useEffect, useRef, useState } from 'react'
+import classnames from 'classnames'
+import { filterByType, findComponent } from '../common/component-utils'
+
+import { EbayMenu, EbayMenuChangeEventHandler } from '../ebay-menu'
+import { EbayButton } from '../ebay-button'
+import { EbayIconButton } from '../ebay-icon-button'
+import { EbayIcon } from '../ebay-icon'
+import { EbayMenuButtonItem, EbayMenuButtonLabel, EbayMenuButtonSeparator, LabelProps, MenuButtonProps } from './index'
+import { randomId } from '../common/random-id'
+import { handleEscapeKeydown } from '../common/event-utils'
+
+const EbayMenuButton: FC<MenuButtonProps> = ({
+    type,
+    variant = 'button',
+    className,
+    text = '',
+    fixWidth,
+    reverse,
+    expanded: defaultExpanded,
+    noToggleIcon,
+    checked,
+    collapseOnSelect,
+    a11yText,
+    prefixId,
+    prefixLabel,
+    onClick = () => {},
+    onExpand = () => {},
+    onCollapse = () => {},
+    onChange = () => {},
+    onSelect = () => {},
+    children,
+    ...rest
+}) => {
+    const [expanded, setExpanded] = useState(defaultExpanded)
+    const [menuId, setMenuId] = useState<string | undefined>()
+    const buttonRef = useRef(null)
+    const menuRef = useRef()
+
+    const menuItems = filterByType(children, [EbayMenuButtonItem, EbayMenuButtonSeparator])
+    const defaultIndexes = menuItems.map((item) => Boolean(item.props.checked))
+    const [checkedIndexes, setCheckedIndexes] = useState<boolean[]>(defaultIndexes)
+
+    const menuButtonLabel = findComponent(children, EbayMenuButtonLabel)
+    const icon = findComponent(children, EbayIcon)
+    const label = labelWithPrefixAndIcon({ text, prefixId, prefixLabel, menuButtonLabel, icon })
+    const wrapperClasses = classnames('menu-button', className)
+
+    const menuClasses = classnames('menu-button__menu', {
+        'menu-button__menu--fix-width': fixWidth,
+        'menu-button__menu--reverse': reverse
+    })
+
+    useEffect(() => {
+        const handleBackgroundClick = (e: React.MouseEvent) => {
+            const menuEl = menuRef.current as HTMLDivElement
+            const menuClicked = menuEl && menuEl.contains(e.target as Node)
+            if (collapseOnSelect || !menuClicked) {
+                setExpanded(false)
+            }
+        }
+
+        if (expanded) {
+            onExpand()
+            // On React 18 useEffect hooks runs synchronous instead of asynchronous as React 17 or prior
+            // causing the event listener to be attached to the document at the same time that the dialog
+            // opens. Adding a timeout so the event is attached after the click event that opened the modal
+            // is finished.
+            setTimeout(() => {
+                document.addEventListener('click', handleBackgroundClick as any, false)
+            })
+        } else if (expanded === false) {
+            onCollapse()
+        }
+        return () => document.removeEventListener('click', handleBackgroundClick as any, false)
+    }, [expanded])
+
+    useEffect(() => {
+        setMenuId(randomId())
+    }, [])
+
+    const handleMenuKeydown = (e) => {
+        handleEscapeKeydown(e, () => {
+            setExpanded(false)
+            buttonRef.current?.focus()
+        })
+    }
+
+    const buttonProps = {
+        ref: buttonRef as any,
+        className: 'menu-button__button',
+        'aria-expanded': !!expanded,
+        'aria-haspopup': true,
+        'aria-label': a11yText,
+        'aria-controls': menuId,
+        'aria-labelledby': prefixId,
+        onClick: e => {
+            setExpanded(!expanded)
+            onClick(e)
+        },
+        ...rest
+    }
+
+    const handleOnChange: EbayMenuChangeEventHandler = (e, eventProps) => {
+        if (type === 'radio' || type === 'checkbox') {
+            const newCheckedIndexes = checkedIndexes.map((_, i) => eventProps.indexes.includes(i))
+            setCheckedIndexes(newCheckedIndexes)
+        }
+        onChange(e, eventProps)
+    }
+
+    const checkedIndex = () => {
+        const index = checkedIndexes.findIndex(Boolean)
+        return index > -1 ? index : checked
+    }
+
+    return (
+        <span className={wrapperClasses}>
+            {variant === 'overflow' ?
+                <EbayIconButton icon="overflowVertical16" {...buttonProps} /> :
+                <EbayButton
+                    variant={variant === 'form' ? 'form' : undefined}
+                    bodyState={noToggleIcon ? undefined : 'expand'}
+                    {...buttonProps}
+                >
+                    {label}
+                </EbayButton>
+            }
+            {expanded &&
+                <EbayMenu
+                    baseEl="div"
+                    ref={menuRef}
+                    type={type}
+                    className={menuClasses}
+                    tabIndex={-1}
+                    id={menuId}
+                    autofocus
+                    checked={checkedIndex()}
+                    onKeyDown={handleMenuKeydown}
+                    onChange={handleOnChange}
+                    onSelect={onSelect}
+                >
+                    {menuItems.map((item, i) =>
+                        cloneElement(item, {
+                            ...item.props,
+                            className: classnames(item.props.className, 'menu-button__item'),
+                            key: i,
+                            checked: checkedIndexes[i]
+                        })
+                    )}
+                </EbayMenu>
+            }
+        </span>
+    )
+}
+
+function labelWithPrefixAndIcon({ text, prefixId, prefixLabel, menuButtonLabel, icon }: LabelProps) {
+    const textLabelElement = text.length ? <span>{text}</span> : null
+    const prefixLabelElement = !prefixId && prefixLabel && [
+        <span className="menu-button-prefix-label">{prefixLabel}</span>,
+        <>&nbsp;</>
+    ]
+    const labelWithPrefix = [prefixLabelElement, menuButtonLabel || textLabelElement]
+    const labelArray = [icon, labelWithPrefix].flat().filter(Boolean) as JSX.Element[]
+
+    return labelArray.length ? labelArray : null
+}
+
+export default EbayMenuButton

package/src/ebay-menu-button/types.ts

@@ -0,0 +1,39 @@
+import { EbayMenuChangeEventHandler, EbayMenuSelectEventHandler, EbayMenuType } from '../ebay-menu'
+import { EbayButtonProps } from '../ebay-button'
+import { ComponentProps, ReactElement } from 'react'
+
+export type EbayMenuButtonVariant = 'overflow' | 'form' | 'button'
+
+export type EbayMenuButtonProps = {
+  a11yText?: string;
+  className?: string;
+  fixWidth?: boolean;
+  reverse?: boolean;
+  text?: string;
+  type?: EbayMenuType;
+  variant?: EbayMenuButtonVariant;
+  onCollapse?: () => void;
+  onExpand?: () => void;
+  onChange?: EbayMenuChangeEventHandler;
+  onSelect?: EbayMenuSelectEventHandler;
+  expanded?: boolean;
+  noToggleIcon?: boolean;
+  checked?: number;
+  collapseOnSelect?: boolean;
+  prefixId?: string;
+  prefixLabel?: string;
+}
+
+type MenuEvents = 'onSelect' | 'onChange'
+export type MenuButtonProps = Omit<EbayButtonProps, 'type' | 'variant' | 'onKeyDown'> &
+  Omit<ComponentProps<'button'>, 'type' | MenuEvents> &
+  Omit<ComponentProps<'a'>, MenuEvents> &
+  EbayMenuButtonProps
+
+export type LabelProps = {
+  text?: string;
+  prefixId?: string;
+  prefixLabel?: string;
+  menuButtonLabel?: ReactElement;
+  icon?: JSX.Element;
+}

package/src/ebay-notice-base/components/ebay-notice-content/__tests__/index.spec.tsx

@@ -0,0 +1,29 @@
+import React from 'react'
+import { render } from '@testing-library/react'
+import NoticeContent from '../../../../common/notice-utils/notice-content'
+
+describe('<NoticeContent>', () => {
+    describe('when inline', () => {
+        it('should render the content in a <span>', () => {
+            const wrapper = render(
+                <NoticeContent type="inline">
+                    <p>I am a notice!</p>
+                </NoticeContent>
+            )
+            expect(wrapper.container.querySelectorAll('span').length).toBe(1)
+            expect(wrapper.container.querySelectorAll('div').length).toBe(0)
+        })
+    })
+
+    describe('when not inline', () => {
+        it('should render the content in a <span>', () => {
+            const wrapper = render(
+                <NoticeContent type="section">
+                    <p>I am a notice!</p>
+                </NoticeContent>
+            )
+            expect(wrapper.container.querySelectorAll('span').length).toBe(0)
+            expect(wrapper.container.querySelectorAll('div').length).toBe(1)
+        })
+    })
+})

package/src/ebay-notice-base/components/ebay-notice-content/index.ts

@@ -0,0 +1 @@
+export { default as EbayNoticeContent } from './notice-content'

package/src/ebay-notice-base/components/ebay-notice-content/notice-content.tsx

@@ -0,0 +1,12 @@
+/**
+ * This Component is used only for finding it as a child of EbayInlineNotice, EbaySectionNotice, or EbayPageNotice
+ * and pass the properties to NoticeContent
+ */
+import { FC } from 'react'
+import { NoticeContentProps } from '../../../common/notice-utils/notice-content'
+
+type Props = Omit<NoticeContentProps, 'type'>
+
+const EbayNoticeContent: FC<Props> = () => null
+
+export default EbayNoticeContent

package/src/ebay-notice-base/components/ebay-notice-title/index.ts

@@ -0,0 +1 @@
+export { default as EbayNoticeTitle } from './notice-title'

package/src/ebay-notice-base/components/ebay-notice-title/notice-title.tsx

@@ -0,0 +1,13 @@
+import React, { ReactNode } from 'react'
+
+type EbayNoticeTitleProps = {
+    children?: ReactNode;
+}
+
+const EbayNoticeTitle = ({ children }: EbayNoticeTitleProps): ReactNode => (
+    <span className="page-notice__title">
+        {children}
+    </span>
+)
+
+export default EbayNoticeTitle

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

@@ -0,0 +1,2 @@
+export { EbayNoticeTitle } from './components/ebay-notice-title'
+export { EbayNoticeContent } from './components/ebay-notice-content'

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

@@ -0,0 +1,112 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ebay-page-notice rendering renders attention message story correctly 1`] = `
+<svg
+  aria-label="Attention"
+  class="icon icon--16 icon--attention-filled"
+  focusable="false"
+  role="img"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <use
+    xlink:href="#icon-attention-filled-16"
+  />
+</svg>
+`;
+
+exports[`ebay-page-notice rendering renders confirmation message story correctly 1`] = `
+<svg
+  aria-label="Success"
+  class="icon icon--16 icon--confirmation-filled"
+  focusable="false"
+  role="img"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <use
+    xlink:href="#icon-confirmation-filled-16"
+  />
+</svg>
+`;
+
+exports[`ebay-page-notice rendering renders dismissible message with cta story correctly 1`] = `
+<svg
+  aria-label="Congratulations"
+  class="icon icon--16 icon--information-filled"
+  focusable="false"
+  role="img"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <use
+    xlink:href="#icon-information-filled-16"
+  />
+</svg>
+`;
+
+exports[`ebay-page-notice rendering renders dismissible message with cta 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>
+`;
+
+exports[`ebay-page-notice rendering renders dismissible notice story correctly 1`] = `
+<svg
+  aria-label="Information"
+  class="icon icon--16 icon--information-filled"
+  focusable="false"
+  role="img"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <use
+    xlink:href="#icon-information-filled-16"
+  />
+</svg>
+`;
+
+exports[`ebay-page-notice rendering renders information message story correctly 1`] = `
+<svg
+  aria-label="Information"
+  class="icon icon--16 icon--information-filled"
+  focusable="false"
+  role="img"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <use
+    xlink:href="#icon-information-filled-16"
+  />
+</svg>
+`;
+
+exports[`ebay-page-notice rendering renders message with footer story correctly 1`] = `
+<svg
+  aria-label="Congratulations"
+  class="icon icon--16 icon--confirmation-filled"
+  focusable="false"
+  role="img"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <use
+    xlink:href="#icon-confirmation-filled-16"
+  />
+</svg>
+`;
+
+exports[`ebay-page-notice rendering renders simple usage with id story correctly 1`] = `
+<svg
+  aria-label="Success"
+  class="icon icon--16 icon--confirmation-filled"
+  focusable="false"
+  role="img"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <use
+    xlink:href="#icon-confirmation-filled-16"
+  />
+</svg>
+`;

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

@@ -0,0 +1,91 @@
+import React from 'react'
+import { act, render } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { EbayNoticeContent, EbayPageNotice, EbayPageNoticeTitle } from '../index'
+
+jest.mock('../../common/random-id')
+
+const clickEvent = expect.objectContaining({ type: 'click' })
+const keyDownEvent = expect.objectContaining({ type: 'keydown' })
+
+describe('<EbayPageNotice>', () => {
+    describe('when a page title exists', () => {
+        it('should render the title within the notice content', () => {
+            const noticeContentSelector = 'div.page-notice__main'
+            const wrapper = render(
+                <EbayPageNotice status="confirmation">
+                    <EbayNoticeContent>
+                        <EbayPageNoticeTitle>Here is the title</EbayPageNoticeTitle>
+                        <p id="details">Here is some details</p>
+                    </EbayNoticeContent>
+                </EbayPageNotice>
+            )
+            expect(wrapper.container.querySelector(noticeContentSelector)).toBeTruthy()
+            expect(wrapper.container.querySelector(`${noticeContentSelector} > p#details`)).toBeTruthy()
+            expect(wrapper.getByText('Here is the title')).toBeTruthy()
+        })
+    })
+
+    describe('when aria-label is given', () => {
+        it('should add the text to the icon as an aria-label', () => {
+            const wrapper = render(
+                <EbayPageNotice status="confirmation" aria-label="Success Confirmation">
+                    <EbayNoticeContent>
+                        <p>You did it.</p>
+                    </EbayNoticeContent>
+                </EbayPageNotice>
+            )
+            expect(wrapper.container.querySelector('svg')).toHaveAttribute('role', 'img')
+        })
+    })
+
+    describe('on using the notice with no content', () => {
+        it('should throw an error', () => {
+            jest.spyOn(console, 'error').mockImplementation(() => null)
+            expect(() => {
+                render(<EbayPageNotice />)
+            }).toThrowError(`EbayPageNotice: Please use a EbayNoticeContent that defines the content of the notice`);
+            (console.error as jest.Mock).mockRestore()
+        })
+    })
+
+    describe('when allyDismissText is provided...', () => {
+        let wrapper
+        let dismissButton
+        const dismissMock = jest.fn()
+
+        beforeEach(async () => {
+            wrapper = render(
+                <EbayPageNotice status="information" aria-label="Information" a11yDismissText="Close" onDismiss={dismissMock}>
+                    <EbayNoticeContent>
+                        <p>Content</p>
+                    </EbayNoticeContent>
+                </EbayPageNotice>
+            )
+            dismissButton = await wrapper.getByRole('button', { name: 'Close' })
+        })
+
+        it('should add a close button with the provided label.', () => {
+            expect(dismissButton).not.toBeNull()
+        })
+
+        it('should hide the notice when the dismiss button is clicked.', async () => {
+            expect(wrapper.getByRole('region', { name: 'Information' })).toBeVisible()
+            act(() => {
+                dismissButton.click()
+            })
+            expect(wrapper.queryByRole('region', { name: 'Information' })).toBeNull()
+            expect(dismissMock).toHaveBeenCalledWith(clickEvent)
+        })
+
+        it('should hide the notice when the user focuses the dismiss button and presses space', async () => {
+            expect(wrapper.getByRole('region', { name: 'Information' })).toBeVisible()
+            await dismissButton.focus()
+            act(() => {
+                userEvent.type(dismissButton, ' ')
+            })
+            expect(wrapper.queryByRole('region', { name: 'Information' })).toBeNull()
+            expect(dismissMock).toHaveBeenCalled()
+        })
+    })
+})

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

@@ -0,0 +1,117 @@
+import React from 'react'
+import {
+    EbayPageNotice,
+    EbayNoticeContent,
+    EbayPageNoticeTitle,
+    EbayPageNoticeFooter,
+    EbayPageNoticeCTA
+} from '..'
+import { action } from '@storybook/addon-actions'
+
+export default {
+    title: 'notices & tips/ebay-page-notice'
+}
+
+export const SimpleUsage = () => (
+    <>
+        <EbayPageNotice aria-label="Default">
+            <EbayNoticeContent>text message</EbayNoticeContent>
+        </EbayPageNotice>
+    </>
+)
+
+export const SimpleUsageWithId = () => (
+    <>
+        <EbayPageNotice status="confirmation" aria-label="Success" id="main-page-notice">
+            <EbayNoticeContent>text message</EbayNoticeContent>
+        </EbayPageNotice>
+    </>
+)
+
+export const ConfirmationMessage = () => (
+    <>
+        <EbayPageNotice status="confirmation" aria-label="Success">
+            <EbayNoticeContent>
+                <EbayPageNoticeTitle>Congrats!</EbayPageNoticeTitle>
+                <p>
+                    You just listed <a href="#">Spam and Eggs From the Cows Perspective</a> (paperback).
+                </p>
+            </EbayNoticeContent>
+        </EbayPageNotice>
+    </>
+)
+
+export const InformationMessage = () => (
+    <>
+        <EbayPageNotice status="information" aria-label="Information">
+            <EbayNoticeContent>
+                <EbayPageNoticeTitle>Good news!</EbayPageNoticeTitle>
+                <p>
+                    You get free shipping on your next pair of shoes! <a href="#">Learn more</a>.
+                </p>
+            </EbayNoticeContent>
+        </EbayPageNotice>
+    </>
+)
+
+export const AttentionMessage = () => (
+    <>
+        <EbayPageNotice status="attention" aria-label="Attention">
+            <EbayNoticeContent>
+                <EbayPageNoticeTitle>Error.</EbayPageNoticeTitle>
+                <p>
+                    Please take another look at the following:
+                    <br />
+                    <a href="#">Card number</a>, <a href="#">Expiration date</a> &amp;{' '}
+                    <a href="#">Security code</a>.
+                </p>
+            </EbayNoticeContent>
+        </EbayPageNotice>
+    </>
+)
+
+export const MessageWithFooter = () => (
+    <>
+        <EbayPageNotice status="confirmation" aria-label="Congratulations">
+            <EbayNoticeContent>
+                <EbayPageNoticeTitle>Your order&apos;s in!</EbayPageNoticeTitle>
+                <p>We&apos;ll email updates to jonsnow@gmail.com. You should get it by Thu, Sept 22.</p>
+            </EbayNoticeContent>
+            <EbayPageNoticeFooter>
+                <a href="https://ebay.com">Action</a>
+            </EbayPageNoticeFooter>
+        </EbayPageNotice>
+    </>
+)
+
+export const DismissibleNotice = () => (
+    <>
+        <EbayPageNotice
+            status="information"
+            aria-label="Information"
+            a11yDismissText="Close"
+            onDismiss={(e) => action('onDismiss')(e)}
+        >
+            <EbayNoticeContent>
+                <EbayPageNoticeTitle>Good news!</EbayPageNoticeTitle>
+                <p>
+                    You get free shipping on your next pair of shoes! <a href="#">Learn more</a>.
+                </p>
+            </EbayNoticeContent>
+        </EbayPageNotice>
+    </>
+)
+
+export const DismissibleMessageWithCta = () => (
+    <>
+        <EbayPageNotice status="information" aria-label="Congratulations" a11yDismissText="Close">
+            <EbayNoticeContent>
+                <EbayPageNoticeTitle>Your order&apos;s in!</EbayPageNoticeTitle>
+                <p>We&apos;ll email updates to jonsnow@gmail.com. You should get it by Thu, Sept 22.</p>
+            </EbayNoticeContent>
+            <EbayPageNoticeCTA>
+                <a href="https://ebay.com">Action</a>
+            </EbayPageNoticeCTA>
+        </EbayPageNotice>
+    </>
+)