@ebay/ui-core-react 7.3.2 → 7.3.3

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

@@ -1,199 +0,0 @@
-import React from 'react'
-import { action } from '@storybook/addon-actions'
-import {
-    EbaySectionNotice,
-    EbayNoticeContent,
-    EbaySectionNoticeTitle,
-    EbaySectionNoticeFooter
-} from '../index'
-
-export default {
-    title: 'notices & tips/ebay-section-notice'
-}
-
-export const DefaultMessageWithNoAction = {
-    render: () => (
-        <>
-            <EbaySectionNotice>
-                <EbayNoticeContent>
-                    <p>
-                        Items you didn&apos;t win will now show in the{' '}
-                        <a href="http://www.ebay.com">Didn&apos;t win</a> section of this page.
-                    </p>
-                </EbayNoticeContent>
-            </EbaySectionNotice>
-        </>
-    ),
-
-    name: 'Default message (with no action)'
-}
-
-export const DefaultMessageWithAction = {
-    render: () => (
-        <>
-            <EbaySectionNotice>
-                <EbayNoticeContent>
-                    <p>
-                        Items you didn&apos;t win will now show in the{' '}
-                        <a href="http://www.ebay.com">Didn&apos;t win</a> section of this page.
-                    </p>
-                </EbayNoticeContent>
-                <EbaySectionNoticeFooter>
-                    <button onClick={action('Action Button Clicked')} className="fake-link">
-                        Do something
-                    </button>
-                </EbaySectionNoticeFooter>
-            </EbaySectionNotice>
-        </>
-    ),
-
-    name: 'Default message (with action)'
-}
-
-export const ConfirmationMessage = {
-    render: () => (
-        <>
-            <EbaySectionNotice status="confirmation">
-                <EbayNoticeContent>
-                    <EbaySectionNoticeTitle>
-                        This successfully finished! <a href="http://www.ebay.com">next page</a>
-                    </EbaySectionNoticeTitle>
-                </EbayNoticeContent>
-                <EbaySectionNoticeFooter>
-                    <button onClick={action('Action Button Clicked')} className="fake-link">
-                        Take a look
-                    </button>
-                </EbaySectionNoticeFooter>
-            </EbaySectionNotice>
-        </>
-    ),
-
-    name: 'Confirmation message'
-}
-
-export const InformationMessageDismissable = {
-    render: () => (
-        <>
-            <EbaySectionNotice
-                status="information"
-                a11yDismissText="Dismiss"
-                onDismiss={(e) => action('onDismiss')(e)}
-            >
-                <EbayNoticeContent>
-                    <EbaySectionNoticeTitle>
-                        <strong>Good news!</strong> You get free shipping on your next pair of shoes!&nbsp;
-                        <a href="http://www.ebay.com">Learn more</a>.
-                    </EbaySectionNoticeTitle>
-                </EbayNoticeContent>
-                <p className="section-notice__cta">
-                    <a href="https://www.ebay.com">Opt in</a>
-                </p>
-            </EbaySectionNotice>
-        </>
-    ),
-
-    name: 'Information message (dismissable)'
-}
-
-export const AttentionMessage = {
-    render: () => (
-        <>
-            <EbaySectionNotice status="attention">
-                <EbayNoticeContent>
-                    <p>
-                        <strong>Error.</strong> Please take another look at the following:
-                        <br />
-                        <a href="http://www.ebay.com">Card number</a>,
-                        <a href="http://www.ebay.com">Expiration date</a> &amp;
-                        <a href="http://www.ebay.com">Security code</a>.
-                    </p>
-                </EbayNoticeContent>
-                <EbaySectionNoticeFooter>
-                    <button onClick={action('Action Button Clicked')} className="fake-link">
-                        Show more
-                    </button>
-                </EbaySectionNoticeFooter>
-            </EbaySectionNotice>
-        </>
-    ),
-
-    name: 'Attention message'
-}
-
-export const SectionWithTitle = {
-    render: () => (
-        <>
-            <EbaySectionNotice>
-                <EbayNoticeContent>
-                    <EbaySectionNoticeTitle>Title</EbaySectionNoticeTitle>
-                    <p>
-                        Items you didn&apos;t win will now show in the{' '}
-                        <a href="http://www.ebay.com">Didn&apos;t win</a> section of this page.
-                    </p>
-                </EbayNoticeContent>
-            </EbaySectionNotice>
-        </>
-    ),
-
-    name: 'Section with title'
-}
-
-export const SectionWithLink = {
-    render: () => (
-        <>
-            <EbaySectionNotice>
-                <EbayNoticeContent>
-                    <EbaySectionNoticeTitle>Title</EbaySectionNoticeTitle>
-                    <p>
-                        Items you didn&apos;t win will now show in the{' '}
-                        <a href="http://www.ebay.com">Didn&apos;t win</a> section of this page.
-                    </p>
-                </EbayNoticeContent>
-                <EbaySectionNoticeFooter>
-                    <a href="https://www.ebay.com">Go see details</a>
-                </EbaySectionNoticeFooter>
-            </EbaySectionNotice>
-        </>
-    ),
-
-    name: 'Section with link'
-}
-
-export const EducationalSectionNotice = () => (
-    <>
-        <EbaySectionNotice status="education">
-            <EbayNoticeContent>
-                <p>
-                    Items you didn&apos;t win will now show in the{' '}
-                    <a href="http://www.ebay.com">Didn&apos;t win</a> section of this page.
-                </p>
-            </EbayNoticeContent>
-        </EbaySectionNotice>
-    </>
-)
-
-export const EducationalSectionNoticeProminent = () => (
-    <>
-        <EbaySectionNotice status="education" prominent>
-            <EbayNoticeContent>
-                <p>
-                    Items you didn&apos;t win will now show in the{' '}
-                    <a href="http://www.ebay.com">Didn&apos;t win</a> section of this page.
-                </p>
-            </EbayNoticeContent>
-        </EbaySectionNotice>
-    </>
-)
-
-export const EducationalSectionNoticeCustomIcon = () => (
-    <>
-        <EbaySectionNotice status="education" prominent educationIcon="lightningBolt24">
-            <EbayNoticeContent>
-                <p>
-                    Items you didn&apos;t win will now show in the{' '}
-                    <a href="http://www.ebay.com">Didn&apos;t win</a> section of this page.
-                </p>
-            </EbayNoticeContent>
-        </EbaySectionNotice>
-    </>
-)

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

@@ -1,9 +0,0 @@
-export {
-    default as EbaySectionNotice,
-    type SectionNoticeStatus,
-    type Props as EbaySectionNoticeProps
-} from './section-notice'
-export { default as EbaySectionNoticeTitle } from './section-notice-title'
-export { default as EbaySectionNoticeFooter } from './section-notice-footer'
-export { default as EbaySectionNoticeCTA } from './section-notice-cta'
-export { EbayNoticeContent } from '../ebay-notice-base/components/ebay-notice-content'

package/src/ebay-section-notice/section-notice-cta.tsx

@@ -1,15 +0,0 @@
-import React, { FC, ReactNode } from 'react'
-import NoticeCTA from '../common/notice-utils/notice-cta'
-
-type Props = {
-    className?: string;
-    children?: ReactNode;
-}
-
-const EbaySectionNoticeCTA: FC<Props> = ({ className, children }) => (
-    <NoticeCTA className={className} type="section">
-        {children}
-    </NoticeCTA>
-)
-
-export default EbaySectionNoticeCTA

package/src/ebay-section-notice/section-notice-footer.tsx

@@ -1,15 +0,0 @@
-import React, { FC, ReactNode } from 'react'
-import NoticeFooter from '../common/notice-utils/notice-footer'
-
-type Props = {
-    className?: string;
-    children?: ReactNode;
-}
-
-const EbaySectionNoticeFooter: FC<Props> = ({ className, children }) => (
-    <NoticeFooter className={className} type="section">
-        {children}
-    </NoticeFooter>
-)
-
-export default EbaySectionNoticeFooter

package/src/ebay-section-notice/section-notice-title.tsx

@@ -1,15 +0,0 @@
-import React, { FC } from 'react'
-import NoticeTitle from '../common/notice-utils/notice-title'
-
-type Props = React.HTMLProps<HTMLHeadingElement> & {
-    as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
-    className?: string;
-}
-
-const EbaySectionNoticeTitle: FC<Props> = ({ className, as, children, ...rest }) => (
-    <NoticeTitle {...rest} className={className} as={as} type="section">
-        {children}
-    </NoticeTitle>
-)
-
-export default EbaySectionNoticeTitle

package/src/ebay-section-notice/section-notice.tsx

@@ -1,107 +0,0 @@
-import React, {
-    ComponentProps,
-    FC,
-    KeyboardEvent,
-    KeyboardEventHandler,
-    MouseEvent,
-    MouseEventHandler,
-    ReactElement, useEffect, useState
-} from 'react'
-import cx from 'classnames'
-import { EbayNoticeContent } from '../ebay-notice-base/components/ebay-notice-content'
-import NoticeContent from '../common/notice-utils/notice-content'
-import { EbayIcon, Icon } from '../ebay-icon'
-import { EbaySectionNoticeFooter } from './index'
-import { randomId } from '../common/random-id'
-
-export type SectionNoticeStatus = 'general' | 'none' | 'attention' | 'confirmation' | 'information' | 'education'
-export type Props = ComponentProps<'section'> & {
-    status?: SectionNoticeStatus;
-    'aria-label'?: string;
-    'aria-roledescription'?: string;
-    className?: string;
-    a11yDismissText?: string;
-    onDismiss?: MouseEventHandler & KeyboardEventHandler;
-    educationIcon?: Icon;
-    iconClass?: string;
-    prominent?: boolean;
-}
-
-const EbaySectionNotice: FC<Props> = ({
-    status = 'general',
-    children,
-    className,
-    'aria-label': ariaLabel,
-    'aria-roledescription': ariaRoleDescription = 'Notice',
-    a11yDismissText,
-    educationIcon,
-    iconClass,
-    prominent,
-    onDismiss = () => {},
-    ...rest
-}) => {
-    const [dismissed, setDismissed] = useState(false)
-
-    const [rId, setRandomId] = useState('')
-
-    useEffect(() => {
-        setRandomId(randomId())
-    }, [])
-
-    const childrenArray = React.Children.toArray(children) as ReactElement[]
-    const content = childrenArray.find(({ type }) => type === EbayNoticeContent)
-    const hasStatus = status !== 'general' && status !== 'none'
-    const isEducational = status === 'education'
-    let iconName = null
-
-    if (hasStatus) {
-        if (isEducational) {
-            iconName = educationIcon || 'lightbulb24'
-        } else {
-            iconName = `${status}Filled16` as Icon
-        }
-    }
-
-    if (!content) {
-        throw new Error(`EbaySectionNotice: Please use a EbayNoticeContent that defines the content of the notice`)
-    }
-
-    const handleDismissed = (event: MouseEvent & KeyboardEvent) => {
-        setDismissed(true)
-        onDismiss(event)
-    }
-
-    return dismissed ? null : (
-        <section
-            {...rest}
-            className={cx(className, `section-notice`, {
-                [`section-notice--${status}`]: hasStatus,
-                'section-notice--education': isEducational && prominent,
-                'section-notice--large-icon': isEducational
-            })}
-            role="region"
-            aria-label={!hasStatus ? ariaLabel : null}
-            aria-labelledby={hasStatus ? `section-notice-${status}-${rId}` : null}
-            aria-roledescription={ariaRoleDescription}>
-            {iconName && (
-                <div className="section-notice__header" id={`section-notice-${status}-${rId}`}>
-                    <EbayIcon className={iconClass} name={iconName} a11yText={ariaLabel} a11yVariant="label" />
-                </div>
-            )}
-            <NoticeContent {...content.props} type="section" />
-            {children}
-            {a11yDismissText && (
-                <EbaySectionNoticeFooter>
-                    <button
-                        aria-label={a11yDismissText}
-                        className="fake-link page-notice__dismiss"
-                        onClick={handleDismissed as any}>
-                        <EbayIcon name="close16" />
-                    </button>
-                </EbaySectionNoticeFooter>
-            )}
-        </section>
-    )
-}
-
-export default EbaySectionNotice

package/src/ebay-section-title/__tests__/index.spec.tsx

@@ -1,62 +0,0 @@
-import React from 'react'
-import { render, screen } from '@testing-library/react'
-import { composeStory } from '@storybook/react'
-import Meta, { Default, WithSubtitle, WithInfo, WithCta } from './index.stories'
-
-const DefaultStory = composeStory(Default, Meta)
-const WithSubtitleStory = composeStory(WithSubtitle, Meta)
-const WithInfoStory = composeStory(WithInfo, Meta)
-const WithCtaStory = composeStory(WithCta, Meta)
-
-describe('ebay-section-title rendering', () => {
-    it('renders default story correctly', () => {
-        const { container } = render(<DefaultStory />)
-
-        const sectionTitle = container.querySelector('.section-title')
-        expect(sectionTitle).toBeInTheDocument()
-        const sectionTitleContainer = container.querySelector('.section-title__title-container')
-        expect(sectionTitleContainer).toBeInTheDocument()
-        const header = container.querySelector('h2')
-        expect(header).toHaveClass('section-title__title')
-        expect(header.textContent).toEqual('Default Section Title')
-    })
-
-    it('renders with subtitle story correctly', () => {
-        const { container } = render(<WithSubtitleStory />)
-
-        const header = container.querySelector('h2')
-        expect(header).toHaveClass('section-title__title')
-        expect(header.textContent).toEqual('Today’s Deals – All With Free Shipping')
-        const subtitle = container.querySelector('.section-title__subtitle')
-        expect(subtitle).toHaveClass('section-title__subtitle')
-        expect(subtitle.textContent).toEqual('Plus, guaranteed best prices.')
-    })
-
-    it('renders with info story correctly', () => {
-        const { container } = render(<WithInfoStory />)
-
-        const header = container.querySelector('h2')
-        expect(header).toHaveClass('section-title__title')
-        expect(header.textContent).toEqual('Today’s Deals – All With Free Shipping') // Adjusted expected value
-        const subtitle = container.querySelector('.section-title__subtitle')
-        expect(subtitle).toHaveClass('section-title__subtitle')
-        expect(subtitle.textContent).toEqual('Plus, guaranteed best prices.')
-        const info = container.querySelector('.section-title__info')
-        expect(info.querySelector('.infotip')).toBeInTheDocument()
-    })
-
-    it('renders with cta story correctly', () => {
-        const { container } = render(<WithCtaStory />)
-
-        const header = container.querySelector('h2')
-        expect(header).toHaveClass('section-title__title')
-        expect(header.textContent).toEqual('Today’s Deals – All With Free Shipping') // Adjusted expected value
-        const subtitle = container.querySelector('.section-title__subtitle')
-        expect(subtitle).toHaveClass('section-title__subtitle')
-        expect(subtitle.textContent).toEqual('Plus, guaranteed best prices.')
-        const cta = screen.getByRole('link')
-        expect(cta).toHaveAttribute('href', 'https://www.ebay.com')
-        expect(cta).toHaveClass('section-title__cta')
-        expect(cta.textContent).toEqual('See All')
-    })
-})

package/src/ebay-section-title/__tests__/index.stories.tsx

@@ -1,79 +0,0 @@
-import React from 'react'
-import { EbayInfotip, EbayInfotipContent, EbayInfotipHeading } from '../../ebay-infotip'
-import {
-    EbaySectionTitle,
-    EbaySectionTitleTitle as Title,
-    EbaySectionTitleSubtitle as Subtitle,
-    EbaySectionTitleInfo as Info
-} from '../index'
-
-export default {
-    title: 'navigation & disclosure/ebay-section-title'
-}
-
-export const Default = () => (
-    <>
-        <EbaySectionTitle>Default Section Title</EbaySectionTitle>
-    </>
-)
-
-export const WithSubtitle = () => (
-    <>
-        <EbaySectionTitle>
-            <Title>Today’s Deals – All With Free Shipping</Title>
-            <Subtitle>Plus, guaranteed best prices.</Subtitle>
-        </EbaySectionTitle>
-    </>
-)
-
-export const WithTitleButWOSubtitle = {
-    render: () => (
-        <>
-            <EbaySectionTitle>
-                <Title>Missing subtitle shouldn't throw</Title>
-            </EbaySectionTitle>
-        </>
-    ),
-
-    name: 'With Title But W/O Subtitle'
-}
-
-export const WithCta = {
-    render: () => (
-        <>
-            <EbaySectionTitle href="https://www.ebay.com">
-                <Title>Today’s Deals – All With Free Shipping</Title>
-                <Subtitle>Plus, guaranteed best prices.</Subtitle>
-            </EbaySectionTitle>
-
-            <EbaySectionTitle href="https://www.ebay.com" ctaText="See All">
-                <Title>Today’s Deals – All With Free Shipping</Title>
-                <Subtitle>Plus, guaranteed best prices.</Subtitle>
-            </EbaySectionTitle>
-        </>
-    ),
-
-    name: 'With CTA'
-}
-
-export const WithInfo = () => (
-    <>
-        <EbaySectionTitle>
-            <Title>Today’s Deals – All With Free Shipping</Title>
-            <Subtitle>Plus, guaranteed best prices.</Subtitle>
-            <Info>
-                <EbayInfotip
-                    a11yCloseText="Dismiss infotip"
-                    aria-label="Important information"
-                    pointer="top-left"
-                    icon="information16"
-                >
-                    <EbayInfotipHeading>Important</EbayInfotipHeading>
-                    <EbayInfotipContent>
-                        <p>This is some important info</p>
-                    </EbayInfotipContent>
-                </EbayInfotip>
-            </Info>
-        </EbaySectionTitle>
-    </>
-)

package/src/ebay-section-title/cta.tsx

@@ -1,26 +0,0 @@
-import React, { ComponentProps, FC, ReactNode } from 'react'
-import classNames from 'classnames'
-
-type Props = ComponentProps<'a'> & {
-  ctaText?: ReactNode;
-  href?: string;
-}
-
-const Cta: FC<Props> = ({
-    ctaText,
-    href,
-    className,
-    ...rest
-}: Props) => {
-    if (!ctaText) {
-        return null
-    }
-
-    return (
-        <a {...rest} className={classNames('section-title__cta', className)} href={href}>
-            {ctaText}
-        </a>
-    )
-}
-
-export default Cta

package/src/ebay-section-title/index.ts

@@ -1,5 +0,0 @@
-export { default as EbaySectionTitle } from './section-title'
-export { default as EbaySectionTitleTitle } from './title'
-export { default as EbaySectionTitleSubtitle } from './subtitle'
-export { default as EbaySectionTitleInfo } from './info'
-export { default as EbaySectionTitleOverflow } from './overflow'

package/src/ebay-section-title/info.tsx

@@ -1,19 +0,0 @@
-import React, { ComponentProps, FC } from 'react'
-import classNames from 'classnames'
-
-type Props = ComponentProps<'div'>
-
-const Info: FC<Props> = ({
-    className,
-    children,
-    ...rest
-}) => (
-    <div
-        {...rest}
-        className={classNames(className, 'section-title__info')}
-    >
-        {children}
-    </div>
-)
-
-export default Info

package/src/ebay-section-title/overflow.tsx

@@ -1,19 +0,0 @@
-import React, { ComponentProps, FC } from 'react'
-import classNames from 'classnames'
-
-type Props = ComponentProps<'div'>
-
-const Overflow: FC<Props> = ({
-    children,
-    className,
-    ...rest
-}) => (
-    <div
-        {...rest}
-        className={classNames(className, 'section-title__overflow')}
-    >
-        {children}
-    </div>
-)
-
-export default Overflow

package/src/ebay-section-title/section-title.tsx

@@ -1,41 +0,0 @@
-import React, { FC, HTMLProps, ReactNode } from 'react'
-import classNames from 'classnames'
-import { findComponent } from '../common/component-utils'
-import {
-    EbaySectionTitleSubtitle,
-    EbaySectionTitleTitle,
-    EbaySectionTitleInfo,
-    EbaySectionTitleOverflow
-} from './index'
-import Cta from './cta'
-
-export type EbaySectionTitleProps = Omit<HTMLProps<HTMLDivElement>, 'title'> & {
-    href?: string;
-    ctaText?: ReactNode;
-}
-
-const EbaySectionTitle: FC<EbaySectionTitleProps> = ({
-    href,
-    ctaText,
-    className,
-    children,
-    ...rest
-}) => {
-    const sectionTitleClass = classNames(className, 'section-title')
-    const title = findComponent(children, EbaySectionTitleTitle)
-    const subtitle = findComponent(children, EbaySectionTitleSubtitle)
-    const info = findComponent(children, EbaySectionTitleInfo)
-    const overflow = findComponent(children, EbaySectionTitleOverflow)
-
-    return (
-        <div {...rest} className={sectionTitleClass}>
-            <div className="section-title__title-container">
-                {title || <EbaySectionTitleTitle>{children}</EbaySectionTitleTitle>}
-                {subtitle}
-            </div>
-            {href && <Cta href={href} ctaText={ctaText} /> || info || overflow}
-        </div>
-    )
-}
-
-export default EbaySectionTitle

package/src/ebay-section-title/subtitle.tsx

@@ -1,19 +0,0 @@
-import React, { ComponentProps, FC } from 'react'
-import classNames from 'classnames'
-
-type Props = ComponentProps<'span'>
-
-const Subtitle: FC<Props> = ({
-    children,
-    className,
-    ...rest
-}) => (
-    <span
-        {...rest}
-        className={classNames(className, 'section-title__subtitle')}
-    >
-        {children}
-    </span>
-)
-
-export default Subtitle

package/src/ebay-section-title/title.tsx

@@ -1,19 +0,0 @@
-import React, { ComponentProps, FC } from 'react'
-import classNames from 'classnames'
-
-type Props = ComponentProps<'h2'>
-
-const Title: FC<Props> = ({
-    children,
-    className,
-    ...rest
-}) => (
-    <h2
-        {...rest}
-        className={classNames(className, 'section-title__title')}
-    >
-        {children}
-    </h2>
-)
-
-export default Title