@ebay/ui-core-react 7.3.1 → 7.3.2

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

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

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

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

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

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

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

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

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

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