@ebay/ui-core-react 7.3.0 → 7.3.2

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

@@ -0,0 +1,214 @@
+import React from 'react'
+import { render, screen, within } from '@testing-library/react'
+import { composeStories } from '@storybook/react'
+import * as stories from './index.stories'
+
+const {
+    DefaultTourtip,
+    PointersWithAllDirections,
+    FooterTourtip,
+    FooterAndHeadingTourtip,
+    PointerWithCustomLocation
+} = composeStories(stories)
+
+describe('ebay-tourtip rendering', () => {
+    it('renders default story correctly', () => {
+        const { container } = render(<DefaultTourtip />)
+
+        const tourtip = container.querySelector('.tourtip')
+        expect(tourtip).toHaveClass('tourtip--expanded')
+
+        const tourtipButton = screen.getByRole('button', { name: 'Info' })
+        expect(tourtipButton).toHaveClass('btn tourtip__host btn--secondary')
+        expect(tourtipButton).toHaveAttribute('aria-expanded', 'true')
+
+        const overlay = screen.getByRole('region')
+        expect(overlay).toHaveClass('tourtip__overlay')
+        expect(overlay.querySelector('.tourtip__pointer.tourtip__pointer--bottom')).toBeInTheDocument()
+        expect(overlay.querySelector('.tourtip__mask .tourtip__cell .tourtip__content p')).toHaveTextContent('Content')
+
+        const closeButton = screen.getByRole('button', { name: 'close' })
+        expect(closeButton).toHaveClass('tourtip__close')
+        expect(closeButton).toHaveAttribute('type', 'button')
+        expect(closeButton.querySelector('svg')).toMatchSnapshot()
+    })
+
+    it('renders footer tourtip story correctly', () => {
+        const { container } = render(<FooterTourtip />)
+
+        const tourtip = container.querySelector('.tourtip')
+        expect(tourtip).toHaveClass('tourtip--expanded')
+
+        const tourtipButton = screen.getByRole('button', { name: 'Info' })
+        expect(tourtipButton).toHaveClass('btn tourtip__host btn--secondary')
+        expect(tourtipButton).toHaveAttribute('aria-expanded', 'true')
+
+        const overlay = screen.getByRole('region')
+        expect(overlay).toHaveClass('tourtip__overlay')
+        expect(overlay.querySelector('.tourtip__pointer.tourtip__pointer--bottom')).toBeInTheDocument()
+        expect(overlay.querySelector('.tourtip__mask .tourtip__cell .tourtip__content p')).toHaveTextContent('Lorem ipsum dolor sit amet consectetur adipisicing elit.')
+
+        const footer: HTMLElement = overlay.querySelector('.tourtip__footer')
+        expect(footer.querySelector('.tourtip__index')).toHaveTextContent('1 / 3')
+        expect(within(footer).getByRole('button', { name: 'Back' })).toHaveClass('fake-link')
+        expect(within(footer).getByRole('button', { name: 'Next' })).toHaveClass('btn btn--primary')
+    })
+
+    it('renders footer and heading tourtip story correctly', () => {
+        const { container } = render(<FooterAndHeadingTourtip />)
+
+        const tourtip = container.querySelector('.tourtip')
+        expect(tourtip).toHaveClass('tourtip--expanded')
+
+        const tourtipButton = screen.getByRole('button', { name: 'Info' })
+        expect(tourtipButton).toHaveClass('btn tourtip__host btn--secondary')
+        expect(tourtipButton).toHaveAttribute('aria-expanded', 'true')
+
+        const overlay = screen.getByRole('region')
+        expect(overlay).toHaveClass('tourtip__overlay')
+        expect(overlay.querySelector('.tourtip__pointer.tourtip__pointer--bottom')).toBeInTheDocument()
+        expect(overlay.querySelector('.tourtip__mask .tourtip__cell .tourtip__content p')).toHaveTextContent('Lorem ipsum dolor sit amet consectetur adipisicing elit.')
+
+        const heading = overlay.querySelector('.tourtip__heading')
+        expect(heading).toHaveTextContent('Title')
+
+        const footer: HTMLElement = overlay.querySelector('.tourtip__footer')
+        expect(footer.querySelector('.tourtip__index')).toHaveTextContent('1 / 3')
+        expect(within(footer).getByRole('button', { name: 'Back' })).toHaveClass('fake-link')
+        expect(within(footer).getByRole('button', { name: 'Next' })).toHaveClass('btn btn--primary')
+    })
+
+    it('renders pointer with custom location story correctly', () => {
+        const { container } = render(<PointerWithCustomLocation />)
+
+        const tourtip = container.querySelector('.tourtip')
+        expect(tourtip).toHaveClass('tourtip--expanded')
+
+        const tourtipButton = screen.getByRole('link', { name: 'View options' })
+        expect(tourtipButton).toHaveClass('tourtip__host')
+        expect(tourtipButton).toHaveAttribute('aria-expanded', 'true')
+        expect(tourtipButton).toHaveAttribute('href', 'https://www.ebay.com')
+
+        const overlay = screen.getByRole('region')
+        expect(overlay).toHaveClass('tourtip__overlay')
+        expect(overlay).toHaveStyle({ top: '40px', left: '-16px' })
+        expect(overlay.querySelector('.tourtip__pointer.tourtip__pointer--top-left')).toBeInTheDocument()
+        expect(overlay.querySelector('.tourtip__mask .tourtip__cell .tourtip__content p')).toHaveTextContent('Use Access Key \'S\' to display settings.')
+    })
+
+    it('renders pointer direction story correctly', () => {
+        const { container } = render(<PointersWithAllDirections />)
+
+        const [
+            tourtipTop,
+            tourtipTopLeft,
+            tourtipTopRight,
+            tourtipRight,
+            tourtipRightBottom,
+            tourtipRightTop,
+            tourtipBottom,
+            tourtipBottomLeft,
+            tourtipBottomRight,
+            tourtipLeft,
+            tourtipLeftBottom,
+            tourtipLeftTop
+        ] = container.querySelectorAll('.tourtip')
+        expect(tourtipTop).toHaveClass('tourtip--expanded')
+
+        const tourtipButtonTop = within(tourtipTop as HTMLElement).getByRole('link', { name: 'top' })
+        expect(tourtipButtonTop).toHaveClass('tourtip__host')
+        expect(tourtipButtonTop).toHaveAttribute('aria-expanded', 'true')
+        expect(tourtipButtonTop).toHaveAttribute('href', 'https://www.ebay.com')
+
+        const overlayTop = tourtipTop.querySelector('.tourtip__overlay')
+        expect(overlayTop.querySelector('.tourtip__pointer')).toHaveClass('tourtip__pointer--top')
+
+        const tourtipButtonTopLeft = within(tourtipTopLeft as HTMLElement).getByRole('link', { name: 'top-left' })
+        expect(tourtipButtonTopLeft).toHaveClass('tourtip__host')
+        expect(tourtipButtonTopLeft).toHaveAttribute('aria-expanded', 'true')
+        expect(tourtipButtonTopLeft).toHaveAttribute('href', 'https://www.ebay.com')
+
+        const overlayTopLeft = tourtipTopLeft.querySelector('.tourtip__overlay')
+        expect(overlayTopLeft.querySelector('.tourtip__pointer')).toHaveClass('tourtip__pointer--top-left')
+
+        const tourtipButtonTopRight = within(tourtipTopRight as HTMLElement).getByRole('link', { name: 'top-right' })
+        expect(tourtipButtonTopRight).toHaveClass('tourtip__host')
+        expect(tourtipButtonTopRight).toHaveAttribute('aria-expanded', 'true')
+        expect(tourtipButtonTopRight).toHaveAttribute('href', 'https://www.ebay.com')
+
+        const overlayTopRight = tourtipTopRight.querySelector('.tourtip__overlay')
+        expect(overlayTopRight.querySelector('.tourtip__pointer')).toHaveClass('tourtip__pointer--top-right')
+
+        const tourtipButtonRight = within(tourtipRight as HTMLElement).getByRole('link', { name: 'right' })
+        expect(tourtipButtonRight).toHaveClass('tourtip__host')
+        expect(tourtipButtonRight).toHaveAttribute('aria-expanded', 'true')
+        expect(tourtipButtonRight).toHaveAttribute('href', 'https://www.ebay.com')
+
+        const overlayRight = tourtipRight.querySelector('.tourtip__overlay')
+        expect(overlayRight.querySelector('.tourtip__pointer')).toHaveClass('tourtip__pointer--right')
+
+        const tourtipButtonRightBottom = within(tourtipRightBottom as HTMLElement).getByRole('link', { name: 'right-bottom' })
+        expect(tourtipButtonRightBottom).toHaveClass('tourtip__host')
+        expect(tourtipButtonRightBottom).toHaveAttribute('aria-expanded', 'true')
+        expect(tourtipButtonRightBottom).toHaveAttribute('href', 'https://www.ebay.com')
+
+        const overlayRightBottom = tourtipRightBottom.querySelector('.tourtip__overlay')
+        expect(overlayRightBottom.querySelector('.tourtip__pointer')).toHaveClass('tourtip__pointer--right-bottom')
+
+        const tourtipButtonRightTop = within(tourtipRightTop as HTMLElement).getByRole('link', { name: 'right-top' })
+        expect(tourtipButtonRightTop).toHaveClass('tourtip__host')
+        expect(tourtipButtonRightTop).toHaveAttribute('aria-expanded', 'true')
+        expect(tourtipButtonRightTop).toHaveAttribute('href', 'https://www.ebay.com')
+
+        const overlayRightTop = tourtipRightTop.querySelector('.tourtip__overlay')
+        expect(overlayRightTop.querySelector('.tourtip__pointer')).toHaveClass('tourtip__pointer--right-top')
+
+        const tourtipButtonBottom = within(tourtipBottom as HTMLElement).getByRole('link', { name: 'bottom' })
+        expect(tourtipButtonBottom).toHaveClass('tourtip__host')
+        expect(tourtipButtonBottom).toHaveAttribute('aria-expanded', 'true')
+        expect(tourtipButtonBottom).toHaveAttribute('href', 'https://www.ebay.com')
+
+        const overlayBottom = tourtipBottom.querySelector('.tourtip__overlay')
+        expect(overlayBottom.querySelector('.tourtip__pointer')).toHaveClass('tourtip__pointer--bottom')
+
+        const tourtipButtonBottomLeft = within(tourtipBottomLeft as HTMLElement).getByRole('link', { name: 'bottom-left' })
+        expect(tourtipButtonBottomLeft).toHaveClass('tourtip__host')
+        expect(tourtipButtonBottomLeft).toHaveAttribute('aria-expanded', 'true')
+        expect(tourtipButtonBottomLeft).toHaveAttribute('href', 'https://www.ebay.com')
+
+        const overlayBottomLeft = tourtipBottomLeft.querySelector('.tourtip__overlay')
+        expect(overlayBottomLeft.querySelector('.tourtip__pointer')).toHaveClass('tourtip__pointer--bottom-left')
+
+        const tourtipButtonBottomRight = within(tourtipBottomRight as HTMLElement).getByRole('link', { name: 'bottom-right' })
+        expect(tourtipButtonBottomRight).toHaveClass('tourtip__host')
+        expect(tourtipButtonBottomRight).toHaveAttribute('aria-expanded', 'true')
+        expect(tourtipButtonBottomRight).toHaveAttribute('href', 'https://www.ebay.com')
+
+        const overlayBottomRight = tourtipBottomRight.querySelector('.tourtip__overlay')
+        expect(overlayBottomRight.querySelector('.tourtip__pointer')).toHaveClass('tourtip__pointer--bottom-right')
+
+        const tourtipButtonLeft = within(tourtipLeft as HTMLElement).getByRole('link', { name: 'left' })
+        expect(tourtipButtonLeft).toHaveClass('tourtip__host')
+        expect(tourtipButtonLeft).toHaveAttribute('aria-expanded', 'true')
+        expect(tourtipButtonLeft).toHaveAttribute('href', 'https://www.ebay.com')
+
+        const overlayLeft = tourtipLeft.querySelector('.tourtip__overlay')
+        expect(overlayLeft.querySelector('.tourtip__pointer')).toHaveClass('tourtip__pointer--left')
+
+        const tourtipButtonLeftBottom = within(tourtipLeftBottom as HTMLElement).getByRole('link', { name: 'left-bottom' })
+        expect(tourtipButtonLeftBottom).toHaveClass('tourtip__host')
+        expect(tourtipButtonLeftBottom).toHaveAttribute('aria-expanded', 'true')
+        expect(tourtipButtonLeftBottom).toHaveAttribute('href', 'https://www.ebay.com')
+
+        const overlayLeftBottom = tourtipLeftBottom.querySelector('.tourtip__overlay')
+        expect(overlayLeftBottom.querySelector('.tourtip__pointer')).toHaveClass('tourtip__pointer--left-bottom')
+
+        const tourtipButtonLeftTop = within(tourtipLeftTop as HTMLElement).getByRole('link', { name: 'left-top' })
+        expect(tourtipButtonLeftTop).toHaveClass('tourtip__host')
+        expect(tourtipButtonLeftTop).toHaveAttribute('aria-expanded', 'true')
+        expect(tourtipButtonLeftTop).toHaveAttribute('href', 'https://www.ebay.com')
+
+        const overlayLeftTop = tourtipLeftTop.querySelector('.tourtip__overlay')
+        expect(overlayLeftTop.querySelector('.tourtip__pointer')).toHaveClass('tourtip__pointer--left-top')
+    })
+})

package/src/ebay-tourtip/ebay-tourtip-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 TourtipContent
+*/
+
+const EbayTourtipContent: FC<TooltipContentProps> = () => null
+
+export default EbayTourtipContent

package/src/ebay-tourtip/ebay-tourtip-footer.tsx

@@ -0,0 +1,19 @@
+import React, { FC, ComponentProps } from 'react'
+
+type TourtipFooterProps = ComponentProps<'div'> & {
+    index?: string;
+}
+const EbayTourtipFooter: FC<TourtipFooterProps> = ({ index, children }) =>
+    (
+        <>
+            {index !== undefined && (
+                <span className="tourtip__index">
+                    {index}
+                </span>
+            )}
+            {children}
+        </>
+    )
+
+
+export default EbayTourtipFooter

package/src/ebay-tourtip/ebay-tourtip-heading.tsx

@@ -0,0 +1,23 @@
+import React, { FC, HTMLProps } from 'react'
+import classNames from 'classnames'
+
+type Props = HTMLProps<HTMLHeadingElement> & {
+    as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+    className?: string;
+}
+
+const EbayTourtipHeading: FC<Props> = ({
+    as,
+    children,
+    className,
+    ...props
+}) => {
+    const HeadingTag = as || 'h2'
+    return (
+        <HeadingTag {...props} className={classNames(`tourtip__heading`, className)}>
+            {children}
+        </HeadingTag>
+    )
+}
+
+export default EbayTourtipHeading

package/src/ebay-tourtip/ebay-tourtip-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 TourtipHost
+*/
+
+const EbayTourtipHost: FC<TooltipHostProps> = () => null
+
+export default EbayTourtipHost

package/src/ebay-tourtip/ebay-tourtip.tsx

@@ -0,0 +1,89 @@
+import React, { CSSProperties, FC, useRef } from 'react'
+import { findComponent } from '../common/component-utils'
+import {
+    Tooltip,
+    TooltipHost,
+    TooltipContent,
+    TooltipProps,
+    PointerDirection,
+    useTooltip,
+    TooltipFooter
+} from '../common/tooltip-utils'
+import EbayTourtipContent from './ebay-tourtip-content'
+import EbayTourtipHost from './ebay-tourtip-host'
+import EbayTourtipFooter from './ebay-tourtip-footer'
+import EbayTourtipHeading from './ebay-tourtip-heading'
+
+type TourtipProps = Omit<TooltipProps, 'ref'> & {
+    a11yCloseText: string;
+    pointer?: PointerDirection;
+    onExpand?: () => void;
+    onCollapse?: () => void;
+    overlayStyle?: CSSProperties;
+    'aria-label'?: string;
+    className?: string;
+}
+
+const EbayTourtip:FC<TourtipProps> = ({
+    a11yCloseText,
+    'aria-label': ariaLabel,
+    className,
+    children,
+    onCollapse,
+    onExpand,
+    overlayStyle,
+    pointer,
+    ...rest
+}) => {
+    const hostRef = useRef()
+    const {
+        isExpanded,
+        collapseTooltip
+    } = useTooltip({ onExpand, onCollapse, initialExpanded: true, hostRef })
+    const containerRef = useRef()
+    const content = findComponent(children, EbayTourtipContent)
+    if (!content) {
+        throw new Error(`EbayTourtip: Please use a EbayTourtipContent that defines the content of the tourtip`)
+    }
+    const { children: contentChildren, contentProps } = content.props
+    const host = findComponent(children, EbayTourtipHost)
+    if (!host) {
+        throw new Error(`EbayTourtip: Please use a EbayTourtipHost that defines the host of the tourtip`)
+    }
+    const heading = findComponent(children, EbayTourtipHeading)
+    const footer = findComponent(children, EbayTourtipFooter)
+
+    return (
+        <Tooltip
+            {...rest}
+            className={className}
+            type="tourtip"
+            isExpanded={isExpanded}
+            ref={containerRef}
+        >
+            <TooltipHost
+                {...host.props}
+                forwardedRef={hostRef}
+                aria-label={ariaLabel}
+                aria-expanded={isExpanded} />
+            <TooltipContent
+                {...contentProps}
+                a11yCloseText={a11yCloseText}
+                onClose={collapseTooltip}
+                pointer={pointer}
+                showCloseButton
+                style={overlayStyle}
+                type="tourtip"
+            >
+                {heading}
+                {contentChildren}
+                {footer && (
+                    <TooltipFooter type="tourtip">
+                        {footer}
+                    </TooltipFooter>
+                )}
+            </TooltipContent>
+        </Tooltip>
+    )
+}
+export default EbayTourtip

package/src/ebay-tourtip/index.ts

@@ -0,0 +1,6 @@
+export { default as EbayTourtip } from './ebay-tourtip'
+export { default as EbayTourtipContent } from './ebay-tourtip-content'
+export { default as EbayTourtipHost } from './ebay-tourtip-host'
+export { default as EbayTourtipHeading } from './ebay-tourtip-heading'
+export { default as EbayTourtipFooter } from './ebay-tourtip-footer'
+export { type PointerDirection, Tooltip } from '../common/tooltip-utils'

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

@@ -0,0 +1,39 @@
+import React from 'react'
+import { render, screen } from '@testing-library/react'
+import { EbayVideo, EbayVideoSource } from '../index'
+
+describe('<EbayVideo>', () => {
+    beforeEach(() => render(
+        <EbayVideo
+            thumbnail="https://ir.ebaystatic.com/cr/v/c1/ebayui/video/v1/iphone-thumbnail.jpg"
+            width={500}
+            height={300}
+            a11yPlayText="Play"
+            a11yLoadText="Loading"
+            errorText="Error loading"
+            reportText="Report"
+        >
+            <EbayVideoSource
+                src="https://ir.ebaystatic.com/cr/v/c1/ebayui/video/v1/video.mp4"
+            />
+        </EbayVideo>
+    ))
+
+    it('shows video player with poster', () => {
+        const video = document.getElementsByTagName('video')[0]
+        expect(video).not.toBeNull()
+        expect(video.poster).toBe('https://ir.ebaystatic.com/cr/v/c1/ebayui/video/v1/iphone-thumbnail.jpg')
+    })
+
+    it('shows error message', () => {
+        expect(screen.getByText('Error loading')).toBeInTheDocument()
+    })
+
+    it('shows play button', () => {
+        expect(screen.getByLabelText('Play')).toBeInTheDocument()
+    })
+
+    it('shows loading spinner', () => {
+        expect(screen.getByLabelText('Loading')).toBeInTheDocument()
+    })
+})

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

@@ -0,0 +1,147 @@
+import React, { SyntheticEvent, useState } from 'react'
+import { Meta } from '@storybook/react'
+import 'shaka-player/dist/controls.css'
+
+import { action } from '@storybook/addon-actions'
+import { EbayButton } from '../../ebay-button'
+import { EbayVideo, EbayVideoProps, EbayVideoSource } from '../index'
+import { PlayEventProps, VolumeChangeProps } from '../video'
+
+export default {
+    component: EbayVideo,
+    title: 'media/ebay-video'
+} as Meta
+
+const defaultProps: EbayVideoProps = {
+    a11yLoadText: 'Loading',
+    a11yPlayText: 'Click to play',
+    errorText: 'An error has occurred',
+    width: 600,
+    height: 400,
+    onPlay: (e: SyntheticEvent<HTMLVideoElement>, props: PlayEventProps) =>
+        action('onPlay')(e, props),
+    onVolumeChange: (e: SyntheticEvent<HTMLVideoElement>, props: VolumeChangeProps) =>
+        action('onVolumeChange')(e, props),
+    onLoadError: (err: Error) => action('onLoadError')(err),
+    onReport: (e) => action('onReport')(e)
+}
+
+export const Default = () => (
+    <EbayVideo
+        {...defaultProps}
+        thumbnail="https://ir.ebaystatic.com/cr/v/c1/ebayui/video/v1/iphone-thumbnail.jpg"
+        volumeSlider
+    >
+        <EbayVideoSource
+            src="https://ir.ebaystatic.com/cr/v/c1/ebayui/video/v1/playlist.mpd"
+            type="dash"
+        />
+    </EbayVideo>
+)
+
+export const SingleVideo = () => (
+    <EbayVideo {...defaultProps}>
+        <EbayVideoSource src="https://ir.ebaystatic.com/cr/v/c1/ebayui/video/v1/video.mp4" />
+    </EbayVideo>
+)
+
+export const MultipleVideos = () => (
+    <EbayVideo
+        {...defaultProps}
+        thumbnail="https://ir.ebaystatic.com/cr/v/c1/ebayui/video/v1/iphone-thumbnail.jpg"
+    >
+        <EbayVideoSource
+            src="https://bitdash-a.akamaihd.net/content/MI201109210084_1/m3u8s/f08e80da-bf1d-4e3d-8899-f0f6155f6efa.m3u8"
+            type="hls"
+        />
+        <EbayVideoSource
+            src="https://bitmovin-a.akamaihd.net/content/MI201109210084_1/mpds/f08e80da-bf1d-4e3d-8899-f0f6155f6efa.mpd"
+            type="dash"
+        />
+    </EbayVideo>
+)
+
+export const Fail = () => (
+    <EbayVideo {...defaultProps}>
+        <EbayVideoSource src="wrong" />
+    </EbayVideo>
+)
+
+export const FailInsidePlaylist = () => (
+    <EbayVideo {...defaultProps}>
+        <EbayVideoSource
+            src="http://videoservices.vip.qa.ebay.com/videos/v1/b645f08316c0a4e114537903ffffffad/playlist.mpd"
+            type="dash"
+        />
+    </EbayVideo>
+)
+
+export const Captions = () => (
+    <EbayVideo {...defaultProps}>
+        <EbayVideoSource src="https://storage.googleapis.com/shaka-demo-assets/angel-one/dash.mpd" />
+    </EbayVideo>
+)
+
+export const ReportText = () => (
+    <EbayVideo {...defaultProps} reportText="Report" onReport={action('report')}>
+        <EbayVideoSource
+            src="https://ir.ebaystatic.com/cr/v/c1/ebayui/video/v1/playlist.mpd"
+            type="dash"
+        />
+    </EbayVideo>
+)
+
+export const NoReportButton = () => (
+    <EbayVideo {...defaultProps} hideReportButton>
+        <EbayVideoSource
+            src="https://ir.ebaystatic.com/cr/v/c1/ebayui/video/v1/playlist.mpd"
+            type="dash"
+        />
+    </EbayVideo>
+)
+
+export const MutedAutoplay = () => (
+    <EbayVideo {...defaultProps} muted autoPlay>
+        <EbayVideoSource
+            src="https://ir.ebaystatic.com/cr/v/c1/ebayui/video/v1/playlist.mpd"
+            type="dash"
+        />
+    </EbayVideo>
+)
+
+export const FlexibleContainer = () => (
+    <div style={{ width: '100%' }}>
+        <EbayVideo {...defaultProps}>
+            <EbayVideoSource
+                src="https://ir.ebaystatic.com/cr/v/c1/ebayui/video/v1/playlist.mpd"
+                type="dash"
+            />
+        </EbayVideo>
+    </div>
+)
+
+export const Controlled = () => {
+    const [playing, setPlaying] = useState(undefined)
+    const [muted, setMuted] = useState(false)
+
+    return (
+        <>
+            <EbayButton onClick={() => setPlaying(!playing)}>{playing ? 'Pause' : 'Play'}</EbayButton>{' '}
+      &nbsp;
+            <EbayButton onClick={() => setMuted(!muted)}>{muted ? 'Unmute' : 'Mute'}</EbayButton>
+            <EbayVideo
+                style={{ marginTop: '1em' }}
+                action={playing ? 'play' : playing === false ? 'pause' : undefined}
+                muted={muted}
+                onPlay={action('playing')}
+                onVolumeChange={action('volume changed')}
+                {...defaultProps}
+            >
+                <EbayVideoSource
+                    src="https://ir.ebaystatic.com/cr/v/c1/ebayui/video/v1/playlist.mpd"
+                    type="dash"
+                />
+            </EbayVideo>
+        </>
+    )
+}

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

@@ -0,0 +1,55 @@
+import React from 'react'
+import { render } from '@testing-library/react'
+import { composeStory } from '@storybook/react'
+import Meta, { Default } from './index.stories'
+
+const DefaultStory = composeStory(Default, Meta)
+
+describe('ebay-video rendering', () => {
+    it('renders default story correctly', () => {
+        const { container } = render(<DefaultStory />)
+        const player = container.querySelector('.video-player')
+        expect(player).toHaveClass('video-player--poster')
+        expect(player).toHaveAttribute('style', 'width: 600px; height: 400px;')
+
+        const videoContainer = player.querySelector('.video-player__container')
+        expect(videoContainer).toHaveClass('shaka-video-container')
+        expect(videoContainer).toHaveAttribute('data-shaka-player-container', '')
+        expect(videoContainer).toHaveAttribute('shaka-controls', 'true')
+
+        const videoElement = videoContainer.querySelector('.shaka-video')
+        expect(videoElement).toBeInTheDocument()
+
+        const overlay = player.querySelector('.video-player__overlay')
+        expect(overlay).toHaveClass('video-player__overlay')
+
+        const controlsContainer = videoContainer.querySelector('.shaka-controls-container')
+        expect(controlsContainer).toBeInTheDocument()
+        const playButton = controlsContainer.querySelector('.shaka-play-button')
+        expect(playButton).toHaveAttribute('aria-label', 'Play')
+        expect(playButton).toHaveAttribute('icon', 'play')
+        expect(playButton).toHaveClass('shaka-play-button shaka-no-propagation')
+        const spinnerContainer = videoContainer.querySelector('.shaka-spinner-container')
+        expect(spinnerContainer).toHaveClass('shaka-hidden')
+
+        const bottomControls = player.querySelector('.shaka-bottom-controls')
+        expect(bottomControls).toHaveClass('shaka-no-propagation')
+
+        const errorOverlay = player.querySelector('.video-player__overlay--hidden')
+        expect(errorOverlay).toBeInTheDocument()
+        expect(errorOverlay.textContent).toContain('An error has occurred')
+
+        const scrimContainer = player.querySelector('.shaka-scrim-container')
+        expect(scrimContainer).toBeInTheDocument()
+
+        const serverSideAdContainer = player.querySelector('.shaka-server-side-ad-container')
+        expect(serverSideAdContainer).toBeInTheDocument()
+        const clientSideAdContainer = player.querySelector('.shaka-client-side-ad-container')
+        expect(clientSideAdContainer).toHaveClass('shaka-hidden')
+
+        const video = player.querySelector('video')
+        expect(video).toHaveClass('shaka-video')
+        expect(video).toHaveAttribute('poster', 'https://ir.ebaystatic.com/cr/v/c1/ebayui/video/v1/iphone-thumbnail.jpg')
+        expect(video).toHaveAttribute('style', 'width: 600px; height: 400px;')
+    })
+})

package/src/ebay-video/const.ts

@@ -0,0 +1,16 @@
+export const ERROR_ANOTHER_LOAD = 7000
+export const ERROR_NO_PLAYER = 11
+export const defaultVideoConfig = {
+    addBigPlayButton: false,
+    addSeekBar: true,
+    controlPanelElements: [
+        'play_pause',
+        'time_and_duration',
+        'spacer',
+        'mute',
+        'report',
+        'captions',
+        // 'quality', // uncomment this to show a gear icon for video quality control
+        'fullscreen'
+    ]
+}