@ebay/ui-core-react 7.3.2 → 7.3.4

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

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

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

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

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

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

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

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

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

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

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

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

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

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