@ebay/ui-core-react 7.3.2 → 7.3.3

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

@@ -1,104 +0,0 @@
-import React from 'react'
-import { EbayButton } from '../../ebay-button'
-import { EbayTextbox } from '../../ebay-textbox'
-import { EbayTooltip, EbayTooltipContent, EbayTooltipHost, PointerDirection } from '../index'
-
-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: 'notices & tips/ebay-tooltip'
-}
-
-export const DefaultTooltip = () => (
-    <div style={{ width: '100%', textAlign: 'center', marginTop: 100 }}>
-        <EbayTooltip>
-            <EbayTooltipHost>
-                <EbayButton>Info</EbayButton>
-            </EbayTooltipHost>
-
-            <EbayTooltipContent>
-                <p>Content</p>
-            </EbayTooltipContent>
-        </EbayTooltip>
-    </div>
-)
-
-export const AnchorHost = () => (
-    <div style={{ width: '100%', textAlign: 'center', marginTop: 100 }}>
-        <EbayTooltip>
-            <EbayTooltipHost>
-                <a href="https://www.ebay.com">View options</a>
-            </EbayTooltipHost>
-
-            <EbayTooltipContent>
-                <p>Use Access Key &apos;S&apos; to display settings.</p>
-            </EbayTooltipContent>
-        </EbayTooltip>
-    </div>
-)
-
-export const PointersWithAllDirections = () => (
-    <div>
-        {allPointers.map((pointerType, index) => (
-            <div
-                key={index}
-                style={{
-                    margin: '100px 0',
-                    width: '100%',
-                    textAlign: 'center'
-                }}
-            >
-                <EbayTooltip pointer={pointerType}>
-                    <EbayTooltipHost>
-                        <a href="https://www.ebay.com">{pointerType}</a>
-                    </EbayTooltipHost>
-
-                    <EbayTooltipContent>
-                        <p>Use Access Key &apos;S&apos; to display settings.</p>
-                    </EbayTooltipContent>
-                </EbayTooltip>
-            </div>
-        ))}
-    </div>
-)
-
-export const PointerWithCustomLocation = () => (
-    <div style={{ width: '100%', textAlign: 'center', marginTop: 100 }}>
-        <EbayTooltip pointer="top-left" overlayStyle={{ top: 40, left: -16 }}>
-            <EbayTooltipHost>
-                <a href="https://www.ebay.com">View options</a>
-            </EbayTooltipHost>
-
-            <EbayTooltipContent>
-                <p>Use Access Key &apos;S&apos; to display settings.</p>
-            </EbayTooltipContent>
-        </EbayTooltip>
-    </div>
-)
-
-export const NoHover = () => (
-    <div style={{ width: '100%', textAlign: 'center', marginTop: 100 }}>
-        <EbayTooltip noHover pointer="bottom">
-            <EbayTooltipHost>
-                <EbayTextbox placeholder="Email address" />
-            </EbayTooltipHost>
-
-            <EbayTooltipContent>
-                <p>Use Access Key &apos;S&apos; to display settings.</p>
-            </EbayTooltipContent>
-        </EbayTooltip>
-    </div>
-)

package/src/ebay-tooltip/__tests__/render.spec.tsx

@@ -1,79 +0,0 @@
-import React from 'react'
-import { screen, render } from '@testing-library/react'
-import { composeStory } from '@storybook/react'
-import Meta, { DefaultTooltip, AnchorHost, PointersWithAllDirections, PointerWithCustomLocation, NoHover } from './index.stories'
-
-const DefaultTooltipStory = composeStory(DefaultTooltip, Meta)
-const AnchorHostStory = composeStory(AnchorHost, Meta)
-const PointerDirectionStory = composeStory(PointersWithAllDirections, Meta)
-const PointerWithCustomLocationStory = composeStory(PointerWithCustomLocation, Meta)
-const NoHoverStory = composeStory(NoHover, Meta)
-
-describe('ebay-tooltip rendering', () => {
-    describe('DefaultTooltip story', () => {
-        beforeEach(() => {
-            render(<DefaultTooltipStory />)
-        })
-
-        it('renders tooltip correctly', () => {
-            const tooltips = screen.getAllByRole('tooltip')
-            const tooltip = tooltips[0]
-            expect(tooltip).toHaveClass('tooltip__overlay')
-            expect(tooltip).toHaveTextContent('Content')
-            const button = screen.getByRole('button')
-            expect(button).toHaveClass('btn tooltip__host btn--secondary')
-        })
-    })
-
-    describe('AnchorHost story', () => {
-        beforeEach(() => {
-            render(<AnchorHostStory />)
-        })
-
-        it('renders tooltip correctly', () => {
-            const tooltips = screen.getAllByRole('tooltip')
-            const tooltip = tooltips[0]
-            expect(tooltip).toHaveClass('tooltip__overlay')
-            expect(tooltip).toHaveTextContent('Use Access Key \'S\' to display settings.')
-        })
-    })
-
-    describe('PointerDirection story', () => {
-        beforeEach(() => {
-            render(<PointerDirectionStory />)
-        })
-
-        it('renders tooltip correctly', () => {
-            const tooltips = screen.getAllByRole('tooltip')
-            const tooltip = tooltips[0]
-            expect(tooltip).toHaveClass('tooltip__overlay')
-            expect(tooltip).toHaveTextContent('Use Access Key \'S\' to display settings.')
-        })
-    })
-
-    describe('PointerWithCustomLocation story', () => {
-        beforeEach(() => {
-            render(<PointerWithCustomLocationStory />)
-        })
-
-        it('renders tooltip correctly', () => {
-            const tooltips = screen.getAllByRole('tooltip')
-            const tooltip = tooltips[0]
-            expect(tooltip).toHaveClass('tooltip__overlay')
-            expect(tooltip).toHaveTextContent('Use Access Key \'S\' to display settings.')
-        })
-    })
-
-    describe('NoHover story', () => {
-        beforeEach(() => {
-            render(<NoHoverStory />)
-        })
-
-        it('renders tooltip correctly', () => {
-            const tooltips = screen.getAllByRole('tooltip')
-            const tooltip = tooltips[0]
-            expect(tooltip).toHaveClass('tooltip__overlay')
-            expect(tooltip).toHaveTextContent('Use Access Key \'S\' to display settings.')
-        })
-    })
-})

package/src/ebay-tooltip/ebay-tooltip-content.tsx

@@ -1,11 +0,0 @@
-import { FC } from 'react'
-import { TooltipContentProps } from '../common/tooltip-utils/tooltip-content'
-
-/**
- * This Component is used only for finding it as a child of EbayTooltip
- * and pass the properties to TooltipContent
-*/
-
-const EbayTooltipContent: FC<TooltipContentProps> = () => null
-
-export default EbayTooltipContent

package/src/ebay-tooltip/ebay-tooltip-host.tsx

@@ -1,11 +0,0 @@
-import { FC } from 'react'
-import { TooltipHostProps } from '../common/tooltip-utils/tooltip-host'
-
-/**
- * This Component is used only for finding it as a child of EbayTooltip
- * and pass the properties to TooltipHost
-*/
-
-const EbayTooltipHost: FC<TooltipHostProps> = () => null
-
-export default EbayTooltipHost

package/src/ebay-tooltip/ebay-tooltip.tsx

@@ -1,96 +0,0 @@
-import React, { CSSProperties, FC, useRef } from 'react'
-import { findComponent } from '../common/component-utils'
-import {
-    Tooltip,
-    TooltipHost,
-    TooltipContent,
-    TooltipProps,
-    PointerDirection,
-    useTooltip
-} from '../common/tooltip-utils'
-import EbayTooltipContent from './ebay-tooltip-content'
-import EbayTooltipHost from './ebay-tooltip-host'
-
-// @todo: this type is weird, we should improve it
-type Props = Omit<TooltipProps, 'ref'> & {
-    noHover?: boolean
-    onExpand?: () => void
-    onCollapse?: () => void
-    pointer?: PointerDirection
-    overlayStyle?: CSSProperties
-}
-
-const EbayTooltip: FC<Props> = ({
-    className,
-    pointer,
-    overlayStyle,
-    noHover,
-    onFocus = () => {},
-    onBlur = () => {},
-    onMouseEnter = () => {},
-    onMouseLeave = () => {},
-    onExpand,
-    onCollapse,
-    children,
-    ...rest
-}) => {
-    const { isExpanded, expandTooltip, collapseTooltip } = useTooltip({ onCollapse, onExpand })
-    const timeoutRef = useRef<ReturnType<typeof setTimeout>>()
-
-    const handleOnMouseEnter = (event) => {
-        onMouseEnter(event)
-        if (!noHover) {
-            clearTimeout(timeoutRef.current)
-            expandTooltip()
-        }
-    }
-
-    const handleOnMouseLeave = (event) => {
-        onMouseLeave(event)
-        if (!noHover) {
-            clearTimeout(timeoutRef.current)
-            timeoutRef.current = setTimeout(() => {
-                collapseTooltip()
-            }, 300)
-        }
-    }
-
-    const handleOnFocus = (event) => {
-        onFocus(event)
-        expandTooltip()
-    }
-
-    const handleOnBlur = (event) => {
-        onBlur(event)
-        collapseTooltip()
-    }
-
-    const content = findComponent(children, EbayTooltipContent)
-    const host = findComponent(children, EbayTooltipHost)
-
-    if (!host) {
-        throw new Error(`EbayTooltip: Please use a EbayTooltipHost that defines the host of the tooltip`)
-    }
-
-    if (!content) {
-        throw new Error(`EbayTooltip: Please use a EbayTooltipContent that defines the content of the tooltip`)
-    }
-
-    return (
-        <Tooltip
-            {...rest}
-            className={className}
-            type="tooltip"
-            isExpanded={isExpanded}
-            onFocus={handleOnFocus}
-            onBlur={handleOnBlur}
-            onMouseEnter={handleOnMouseEnter}
-            onMouseLeave={handleOnMouseLeave}
-        >
-            <TooltipHost {...host.props} />
-            <TooltipContent {...content.props} type="tooltip" style={overlayStyle} pointer={pointer} />
-        </Tooltip>
-    )
-}
-
-export default EbayTooltip

package/src/ebay-tooltip/index.ts

@@ -1,8 +0,0 @@
-export { default as EbayTooltip } from './ebay-tooltip'
-export { default as EbayTooltipContent } from './ebay-tooltip-content'
-export { default as EbayTooltipHost } from './ebay-tooltip-host'
-export { type PointerDirection, Tooltip, TooltipFooter } from '../common/tooltip-utils'
-export {
-    DEFAULT_POINTER_DIRECTION,
-    POINTER_STYLES
-} from '../common/tooltip-utils/constants'

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

@@ -1,14 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`ebay-tourtip 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-close-16"
-  />
-</svg>
-`;

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

@@ -1,105 +0,0 @@
-import React from 'react'
-import { render, fireEvent, RenderResult } from '@testing-library/react'
-import { EbayButton } from '../../ebay-button'
-import { EbayTourtip, EbayTourtipContent, EbayTourtipFooter, EbayTourtipHeading, EbayTourtipHost } from '../index'
-
-
-const renderComponent = (props?: any) => render(
-    <EbayTourtip a11yCloseText="close" pointer="bottom" {...props}>
-        <EbayTourtipHost>
-            <EbayButton>Info</EbayButton>
-        </EbayTourtipHost>
-        <EbayTourtipHeading type="tourtip">Title</EbayTourtipHeading>
-        <EbayTourtipContent>
-            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
-        </EbayTourtipContent>
-        <EbayTourtipFooter index="1 / 3">
-            <button className="fake-link">Back</button>
-            <button className="btn btn--primary">Next</button>
-        </EbayTourtipFooter>
-    </EbayTourtip>
-)
-
-const checkIsExpanded = (wrapper: RenderResult) => {
-    expect(wrapper.container.querySelector('.tourtip--expanded')).toBeInTheDocument()
-    expect(wrapper.container.querySelector('button[aria-expanded=true]')).toBeInTheDocument()
-}
-
-const checkIsCollapsed = (wrapper: RenderResult) => {
-    expect(wrapper.container.querySelector('.tourtip--expanded')).not.toBeInTheDocument()
-    expect(wrapper.container.querySelector('button[aria-expanded=true]')).not.toBeInTheDocument()
-}
-
-describe('<EbayTourtip>', () => {
-    describe('on tourtip button click', () => {
-        it('should expand the infotip', () => {
-            const wrapper = renderComponent()
-            fireEvent.click(wrapper.container.querySelector('button.tourtip__host'))
-            checkIsExpanded(wrapper)
-        })
-    })
-
-    describe('on tourtip button close click', () => {
-        it('should collapse the infotip', () => {
-            const wrapper = renderComponent()
-            fireEvent.click(wrapper.container.querySelector('.tourtip__close'))
-            checkIsCollapsed(wrapper)
-        })
-    })
-
-    describe('on tourtip collapsed', () => {
-        it('should fire an event', () => {
-            const spy = jest.fn()
-            const wrapper = renderComponent({ onCollapse: spy })
-            fireEvent.click(wrapper.container.querySelector('button.tourtip__host'))
-            fireEvent.click(wrapper.container.querySelector('button.tourtip__close'))
-            expect(spy).toHaveBeenCalled()
-        })
-    })
-
-    describe('on using the tourtip with no content', () => {
-        it('should throw an error', () => {
-            jest.spyOn(console, 'error').mockImplementation(() => null)
-            expect(() => {
-                render(<EbayTourtip a11yCloseText="Close" />)
-            }).toThrowError(`EbayTourtip: Please use a EbayTourtipContent that defines the content of the tourtip`);
-            (console.error as jest.Mock).mockRestore()
-        })
-    })
-
-    describe('on using the tourtip with no host', () => {
-        it('should throw an error', () => {
-            jest.spyOn(console, 'error').mockImplementation(() => null)
-            expect(() => {
-                render(
-                    <EbayTourtip a11yCloseText="close" pointer="bottom" >
-                        <EbayTourtipHeading type="tourtip">Title</EbayTourtipHeading>
-                        <EbayTourtipContent>
-                            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
-                        </EbayTourtipContent>
-                        <EbayTourtipFooter index="1 / 3">
-                            <button className="fake-link">Back</button>
-                            <button className="btn btn--primary">Next</button>
-                        </EbayTourtipFooter>
-                    </EbayTourtip>
-                )
-            }).toThrowError(`EbayTourtip: Please use a EbayTourtipHost that defines the host of the tourtip`);
-            (console.error as jest.Mock).mockRestore()
-        })
-    })
-
-    describe('on tourtip button click', () => {
-        it('should pass the property to the button that close the tourtip', () => {
-            const wrapper = renderComponent()
-            expect(wrapper.container.querySelector('.tourtip__close[aria-label="close"]')).toBeInTheDocument()
-        })
-        it('should handle focus correctly', () => {
-            const wrapper = renderComponent()
-            expect(wrapper.container.querySelector('.tourtip__close[aria-label="close"]')).toBeInTheDocument()
-            const host = wrapper.container.querySelector('button.tourtip__host')
-            expect(host).not.toHaveFocus()
-            fireEvent.click(wrapper.container.querySelector('button.tourtip__close'))
-            expect(host).toHaveFocus()
-        })
-    })
-})

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

@@ -1,116 +0,0 @@
-import React from 'react'
-import { EbayButton } from '../../ebay-button'
-import {
-    EbayTourtip,
-    EbayTourtipHeading,
-    EbayTourtipContent,
-    EbayTourtipHost,
-    PointerDirection,
-    EbayTourtipFooter
-} from '../index'
-
-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: 'notices & tips/ebay-tourtip'
-}
-
-export const DefaultTourtip = () => (
-    <div style={{ width: '100%', margin: 300 }}>
-        <EbayTourtip a11yCloseText="close">
-            <EbayTourtipContent>
-                <p>Content</p>
-            </EbayTourtipContent>
-
-            <EbayTourtipHost>
-                <EbayButton>Info</EbayButton>
-            </EbayTourtipHost>
-        </EbayTourtip>
-    </div>
-)
-
-export const PointersWithAllDirections = () => (
-    <div>
-        {allPointers.map((pointerType, index) => (
-            <div
-                key={index}
-                style={{
-                    width: '100%',
-                    margin: 300
-                }}
-            >
-                <EbayTourtip pointer={pointerType} a11yCloseText="close">
-                    <EbayTourtipHost>
-                        <a href="https://www.ebay.com">{pointerType}</a>
-                    </EbayTourtipHost>
-
-                    <EbayTourtipContent>
-                        <p>Use Access Key &apos;S&apos; to display settings.</p>
-                    </EbayTourtipContent>
-                </EbayTourtip>
-            </div>
-        ))}
-    </div>
-)
-
-export const PointerWithCustomLocation = () => (
-    <div style={{ width: '100%', margin: 300 }}>
-        <EbayTourtip a11yCloseText="close" pointer="top-left" overlayStyle={{ top: 40, left: -16 }}>
-            <EbayTourtipHost>
-                <a href="https://www.ebay.com">View options</a>
-            </EbayTourtipHost>
-
-            <EbayTourtipContent>
-                <p>Use Access Key &apos;S&apos; to display settings.</p>
-            </EbayTourtipContent>
-        </EbayTourtip>
-    </div>
-)
-
-export const FooterTourtip = () => (
-    <div style={{ width: '100%', margin: 300 }}>
-        <EbayTourtip a11yCloseText="close" pointer="bottom">
-            <EbayTourtipHost>
-                <EbayButton>Info</EbayButton>
-            </EbayTourtipHost>
-            <EbayTourtipContent>
-                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
-            </EbayTourtipContent>
-            <EbayTourtipFooter index="1 / 3">
-                <button className="fake-link">Back</button>
-                <button className="btn btn--primary">Next</button>
-            </EbayTourtipFooter>
-        </EbayTourtip>
-    </div>
-)
-
-export const FooterAndHeadingTourtip = () => (
-    <div style={{ width: '100%', margin: 300 }}>
-        <EbayTourtip a11yCloseText="close" pointer="bottom">
-            <EbayTourtipHost>
-                <EbayButton>Info</EbayButton>
-            </EbayTourtipHost>
-            <EbayTourtipHeading type="tourtip">Title</EbayTourtipHeading>
-            <EbayTourtipContent>
-                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
-            </EbayTourtipContent>
-            <EbayTourtipFooter index="1 / 3">
-                <button className="fake-link">Back</button>
-                <button className="btn btn--primary">Next</button>
-            </EbayTourtipFooter>
-        </EbayTourtip>
-    </div>
-)