@ebay/ui-core-react 7.3.1 → 7.3.2

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

@@ -0,0 +1,27 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ebay-date-textbox rendering renders default story correctly 1`] = `
+<svg
+  aria-hidden="true"
+  class="icon icon--24"
+  focusable="false"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <use
+    xlink:href="#icon-calendar-24"
+  />
+</svg>
+`;
+
+exports[`ebay-date-textbox rendering renders range story correctly 1`] = `
+<svg
+  aria-hidden="true"
+  class="icon icon--24"
+  focusable="false"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <use
+    xlink:href="#icon-calendar-24"
+  />
+</svg>
+`;

package/src/ebay-date-textbox/__tests__/index.spec.tsx

@@ -0,0 +1,148 @@
+import React from 'react'
+
+import { fireEvent, render, screen } from '@testing-library/react'
+import EbayDateTextbox from '../date-textbox'
+import userEvent from '@testing-library/user-event'
+
+jest
+    .useFakeTimers()
+    .setSystemTime(new Date('2024-01-05').getTime())
+
+// makeup-expander uses a random generated id, so we need to mock it for the
+// snapshot to be consistent
+jest.mock('makeup-next-id', () => (el) => el.setAttribute('id', 'testid'))
+
+describe('<EbayDateTextbox />', () => {
+    it('should open the calendar when clicking on the postfix icon', () => {
+        const { container } = render(<EbayDateTextbox />)
+        fireEvent.click(screen.getByLabelText('open calendar'))
+
+        expect(container.querySelector('.date-textbox__popover')).not.toHaveAttribute('hidden')
+    })
+
+    it('should close the calendar when clicking outside the calendar', () => {
+        const { container } = render(<EbayDateTextbox />)
+        fireEvent.click(screen.getByLabelText('open calendar'))
+        expect(container.querySelector('.date-textbox__popover')).not.toHaveAttribute('hidden')
+
+        fireEvent.click(document.body)
+        expect(container.querySelector('.date-textbox__popover')).toHaveAttribute('hidden')
+    })
+
+    it('should close the calendar when clicking on the postfix icon', () => {
+        const { container } = render(<EbayDateTextbox />)
+        fireEvent.click(screen.getByLabelText('open calendar'))
+        expect(container.querySelector('.date-textbox__popover')).not.toHaveAttribute('hidden')
+
+        fireEvent.click(screen.getByLabelText('open calendar'))
+        expect(container.querySelector('.date-textbox__popover')).toHaveAttribute('hidden')
+    })
+
+    it('should not close the calendar when selecting a date and collapseOnSelect is false', () => {
+        const { container } = render(<EbayDateTextbox collapseOnSelect={false} />)
+        fireEvent.click(screen.getByLabelText('open calendar'))
+
+        fireEvent.click(screen.getByText('1'))
+        expect(container.querySelector('.date-textbox__popover')).not.toHaveAttribute('hidden')
+    })
+
+    it('should close the calendar when selecting a date and collapseOnSelect is true', () => {
+        const { container } = render(<EbayDateTextbox collapseOnSelect />)
+        fireEvent.click(screen.getByLabelText('open calendar'))
+
+        fireEvent.click(screen.getByText('1'))
+        expect(container.querySelector('.date-textbox__popover')).toHaveAttribute('hidden')
+    })
+
+    it('should close the calendar when selecting a range and collapseOnSelect is true', () => {
+        const { container } = render(<EbayDateTextbox range collapseOnSelect />)
+        fireEvent.click(screen.getByLabelText('open calendar'))
+
+        fireEvent.click(screen.getByText('1'))
+        fireEvent.click(screen.getByText('2'))
+        expect(container.querySelector('.date-textbox__popover')).toHaveAttribute('hidden')
+    })
+
+    it('should not close the calendar when selecting a range and collapseOnSelect is false', () => {
+        const { container } = render(<EbayDateTextbox range collapseOnSelect={false} />)
+        fireEvent.click(screen.getByLabelText('open calendar'))
+
+        fireEvent.click(screen.getByText('1'))
+        fireEvent.click(screen.getByText('2'))
+        expect(container.querySelector('.date-textbox__popover')).not.toHaveAttribute('hidden')
+    })
+
+    it('should close the calendar when selecting a range and collapseOnSelect is false and clicking outside the calendar', () => {
+        const { container } = render(<EbayDateTextbox range collapseOnSelect={false} />)
+        fireEvent.click(screen.getByLabelText('open calendar'))
+
+        fireEvent.click(screen.getByText('1'))
+        fireEvent.click(screen.getByText('2'))
+        expect(container.querySelector('.date-textbox__popover')).not.toHaveAttribute('hidden')
+
+        fireEvent.click(document.body)
+        expect(container.querySelector('.date-textbox__popover')).toHaveAttribute('hidden')
+    })
+
+    describe('onChange', () => {
+        it('should be called with the selected date when selecting a date', () => {
+            const onChange = jest.fn()
+            render(<EbayDateTextbox onChange={onChange} />)
+            fireEvent.click(screen.getByLabelText('open calendar'))
+
+            fireEvent.click(screen.getByText('1'))
+            expect(onChange).toHaveBeenCalledWith(expect.anything(), { selected: '2024-01-01' })
+        })
+
+        it('should be called with the selected range when selecting a range', () => {
+            const onChange = jest.fn()
+            render(<EbayDateTextbox range onChange={onChange} />)
+            fireEvent.click(screen.getByLabelText('open calendar'))
+
+            fireEvent.click(screen.getByText('1'))
+            expect(onChange).toHaveBeenCalledWith(expect.anything(), {
+                rangeStart: '2024-01-01',
+                rangeEnd: undefined
+            })
+
+            fireEvent.click(screen.getByText('2'))
+            expect(onChange).toHaveBeenCalledWith(expect.anything(), {
+                rangeStart: '2024-01-01',
+                rangeEnd: '2024-01-02'
+            })
+        })
+    })
+
+    it('should update numMonths on resize of the window', () => {
+        jest.spyOn(document.documentElement, 'clientWidth', 'get')
+            .mockImplementation(() => 800)
+
+        const { container } = render(<EbayDateTextbox />)
+        fireEvent.click(screen.getByLabelText('open calendar'))
+
+        expect(container.querySelectorAll('.calendar__month')).toHaveLength(2)
+
+        jest.spyOn(document.documentElement, 'clientWidth', 'get')
+            .mockImplementation(() => 500)
+
+        fireEvent.resize(window)
+        expect(container.querySelectorAll('.calendar__month')).toHaveLength(1)
+    })
+
+    it('should allow clear the text field value after selection', () => {
+        const { container } = render(<EbayDateTextbox />)
+        fireEvent.click(screen.getByLabelText('open calendar'))
+
+        fireEvent.click(screen.getByText('1'))
+        expect(container.querySelector('input')).toHaveValue('2024-01-01')
+
+        userEvent.clear(container.querySelector('input') as HTMLInputElement)
+        expect(container.querySelector('input')).toHaveValue('')
+    })
+
+    it('should not fail if the date passed is invalid', () => {
+        expect(() => {
+            render(<EbayDateTextbox value="invalid" />)
+        }).not.toThrow()
+    })
+})

package/src/ebay-date-textbox/__tests__/index.stories.tsx

@@ -0,0 +1,55 @@
+import React, { useState } from 'react'
+import { StoryFn, Meta, StoryObj } from '@storybook/react'
+import { EbayDateTextbox, EbayDateTextboxProps } from '../index'
+import { EbayButton } from '../../ebay-button'
+
+const story: Meta<typeof EbayDateTextbox> = {
+    component: EbayDateTextbox,
+    title: 'form input/ebay-date-textbox'
+}
+
+export const Default: StoryObj<EbayDateTextboxProps> = {}
+
+export const Range: StoryObj<EbayDateTextboxProps> = {
+    args: {
+        range: true
+    }
+}
+
+export const CollpaseOnSelect: StoryObj<EbayDateTextboxProps> = {
+    args: {
+        collapseOnSelect: true
+    }
+}
+
+export const ControlledValues: StoryFn<EbayDateTextboxProps> = (args) => {
+    const Component = () => {
+        const [value, setValue] = useState('')
+
+        const handleOnChange = (event, { selected }) => {
+            setValue(selected || '')
+        }
+
+        const handleOnInputChange = (event) => {
+            setValue(event.target.value)
+        }
+
+        return (
+            <>
+                <EbayDateTextbox
+                    value={value}
+                    onChange={handleOnChange}
+                    onInputChange={handleOnInputChange}
+                    {...args}
+                />
+                <div style={{ marginTop: 16 }}>
+                    <EbayButton onClick={() => setValue('2024-01-03')}>Set to 2024-01-03</EbayButton>
+                </div>
+            </>
+        )
+    }
+
+    return <Component />
+}
+
+export default story

package/src/ebay-date-textbox/__tests__/render.spec.tsx

@@ -0,0 +1,94 @@
+import React from 'react'
+import { render, within } from '@testing-library/react'
+import { composeStories } from '@storybook/react'
+import * as stories from './index.stories'
+
+const { Default, Range, ControlledValues } = composeStories(stories)
+
+jest.mock('makeup-next-id', () => (el) => el.setAttribute('id', 'testid'))
+
+describe('ebay-date-textbox rendering', () => {
+    it('renders default story correctly', () => {
+        const { container } = render(<Default />)
+
+        const dateTextbox: HTMLElement = container.querySelector('.date-textbox')
+        expect(dateTextbox).toHaveAttribute('id', 'testid')
+
+        const textbox = dateTextbox.querySelector('.textbox')
+        expect(textbox).toHaveClass('ebay-date-textbox--main')
+
+        const input = within(dateTextbox).getByRole('textbox')
+        expect(input).toHaveAttribute('type', 'text')
+        expect(input).toHaveAttribute('placeholder', 'YYYY-MM-DD')
+        expect(input).toHaveClass('textbox__control')
+        expect(input).toHaveValue('')
+
+        const button = within(dateTextbox).getByRole('button')
+        expect(button).toHaveClass('icon-btn icon-btn--transparent')
+        expect(button).toHaveAttribute('aria-label', 'open calendar')
+        expect(button).toHaveAttribute('type', 'button')
+        expect(button).toHaveAttribute('aria-expanded', 'false')
+        expect(button).toHaveAttribute('aria-controls', 'testid-content')
+        expect(button.querySelector('svg')).toMatchSnapshot()
+
+        const popover = dateTextbox.querySelector('.date-textbox__popover')
+        expect(popover).toHaveAttribute('hidden', '')
+        expect(popover).toHaveAttribute('id', 'testid-content')
+
+        const calendar = popover.querySelector('.calendar')
+        expect(calendar).toBeInTheDocument()
+    })
+
+    it('renders range story correctly', () => {
+        const { container } = render(<Range />)
+
+        const dateTextbox = container.querySelector('.date-textbox')
+        expect(dateTextbox).toHaveAttribute('id', 'testid')
+
+        const [textboxStart, textboxEnd] = dateTextbox.querySelectorAll('.textbox')
+        expect(textboxEnd).toHaveClass('ebay-date-textbox--main')
+
+        const inputStart = within(textboxStart as HTMLElement).getByRole('textbox')
+        expect(inputStart).toHaveAttribute('type', 'text')
+        expect(inputStart).toHaveAttribute('placeholder', 'YYYY-MM-DD')
+        expect(inputStart).toHaveClass('textbox__control')
+        expect(inputStart).toHaveValue('')
+
+        const inputEnd = within(textboxStart as HTMLElement).getByRole('textbox')
+        expect(inputEnd).toHaveAttribute('type', 'text')
+        expect(inputEnd).toHaveAttribute('placeholder', 'YYYY-MM-DD')
+        expect(inputEnd).toHaveClass('textbox__control')
+        expect(inputEnd).toHaveValue('')
+
+        const button = within(textboxEnd as HTMLElement).getByRole('button')
+        expect(button).toHaveClass('icon-btn icon-btn--transparent')
+        expect(button).toHaveAttribute('aria-label', 'open calendar')
+        expect(button).toHaveAttribute('type', 'button')
+        expect(button).toHaveAttribute('aria-expanded', 'false')
+        expect(button).toHaveAttribute('aria-controls', 'testid-content')
+        expect(button.querySelector('svg')).toMatchSnapshot()
+
+        const popover = dateTextbox.querySelector('.date-textbox__popover')
+        expect(popover).toHaveAttribute('hidden', '')
+        expect(popover).toHaveAttribute('id', 'testid-content')
+
+        const calendar = popover.querySelector('.calendar')
+        expect(calendar).toBeInTheDocument()
+    })
+
+    it('renders controlled values story correctly', () => {
+        const { container } = render(<ControlledValues value="2024-01-03" />)
+
+        const dateTextbox: HTMLElement = container.querySelector('.date-textbox')
+        expect(dateTextbox).toHaveAttribute('id', 'testid')
+
+        const textbox = dateTextbox.querySelector('.textbox')
+        expect(textbox).toHaveClass('ebay-date-textbox--main')
+
+        const input = within(dateTextbox).getByRole('textbox')
+        expect(input).toHaveAttribute('type', 'text')
+        expect(input).toHaveAttribute('placeholder', 'YYYY-MM-DD')
+        expect(input).toHaveClass('textbox__control')
+        expect(input).toHaveValue('2024-01-03')
+    })
+})

package/src/ebay-date-textbox/date-textbox.tsx

@@ -0,0 +1,227 @@
+import React, { ChangeEvent, FC, FocusEvent, MouseEvent, useEffect, useRef, useState } from 'react'
+import Expander from 'makeup-expander'
+import EbayCalendar, { EbayCalendarProps } from '../ebay-calendar/calendar'
+import { EbayTextbox, EbayTextboxPostfixIcon } from '../ebay-textbox'
+import { DayISO, dateArgToISO, toISO } from '../ebay-calendar/date-utils'
+import { EbayChangeEventHandler, EbayFocusEventHandler, EbayMouseEventHandler } from '../common/event-utils/types'
+import { isControlled } from '../ebay-textbox/textbox'
+import classNames from 'classnames'
+
+type EventData = {
+    selected?: string;
+    rangeStart?: string;
+    rangeEnd?: string;
+}
+
+export type EbayDateTextboxProps = Omit<EbayCalendarProps, 'interactive' | 'navigable' | 'numMonths' | 'selected'> & {
+    className?: string;
+    value?: string;
+    rangeEnd?: string;
+    defaultValue?: string;
+    defaultRangeEnd?: string;
+    range?: boolean;
+    collapseOnSelect?: boolean;
+    inputPlaceholderText?: string | string[];
+    a11yOpenPopoverText?: string;
+    onChange?: EbayChangeEventHandler<HTMLInputElement, EventData>
+        & EbayMouseEventHandler<HTMLInputElement, EventData>
+        & EbayFocusEventHandler<HTMLInputElement, EventData>;
+    onInputChange?: EbayChangeEventHandler<HTMLInputElement>;
+    onInputRangeEndChange?: EbayChangeEventHandler<HTMLInputElement>;
+}
+
+const MIN_WIDTH_FOR_DOUBLE_PANE = 600
+
+const EbayDateTextbox: FC<EbayDateTextboxProps> = ({
+    className,
+    inputPlaceholderText = 'YYYY-MM-DD',
+    a11yOpenPopoverText = 'open calendar',
+    range,
+    value: controlledValue,
+    rangeEnd: controlledRangeEnd,
+    defaultValue,
+    defaultRangeEnd,
+    collapseOnSelect,
+    onChange = () => {},
+    onInputChange = () => {},
+    onInputRangeEndChange = () => {},
+    ...rest
+}) => {
+    const expander = useRef<typeof Expander>()
+    const containerRef = useRef<HTMLSpanElement>(null)
+    const [internalValue, setInternalValue] = useState<string>(defaultValue || '')
+    const [internalRangeEnd, setInternalRangeEnd] = useState<string>(defaultRangeEnd || '')
+    const valueToRender = isControlled(controlledValue) ? controlledValue : internalValue
+    const rangeEndToRender = isControlled(controlledRangeEnd) ? controlledRangeEnd : internalRangeEnd
+
+    const [firstSelected, setFirstSelected] = useState(() =>
+        dateArgToISO(valueToRender)
+    )
+    const [secondSelected, setSecondSelected] = useState(() =>
+        dateArgToISO(rangeEndToRender)
+    )
+    const [isPopoverOpen, setIsPopoverOpen] = useState<boolean>(false)
+    const [numMonths, setNumMonths] = useState(1)
+
+    const openPopover = () => {
+        setIsPopoverOpen(true)
+    }
+    const closePopover = () => {
+        setIsPopoverOpen(false)
+    }
+
+    useEffect(() => {
+        if (!containerRef.current) {
+            return
+        }
+
+        expander.current = new Expander(containerRef.current, {
+            hostSelector: '.ebay-date-textbox--main > .icon-btn',
+            contentSelector: '.date-textbox__popover',
+            expandOnClick: true,
+            autoCollapse: true
+        })
+
+        containerRef.current.addEventListener('expander-expand', openPopover)
+        containerRef.current.addEventListener('expander-collapse', closePopover)
+
+        const calculateNumMonths = () => {
+            setNumMonths(document.documentElement.clientWidth < MIN_WIDTH_FOR_DOUBLE_PANE ? 1 : 2)
+        }
+
+        calculateNumMonths()
+
+        window.addEventListener('resize', calculateNumMonths)
+
+        return () => {
+            expander.current?.destroy()
+            window.removeEventListener('resize', calculateNumMonths)
+        }
+    }, [])
+
+    const handleInputChange = (event: FocusEvent<HTMLInputElement>, index: number) => {
+        const date = new Date(event.target.value)
+        const iso = isNaN(date.getTime()) ? null : toISO(date)
+
+        if (index === 0) {
+            setFirstSelected(iso)
+            setInternalValue(iso || '')
+        } else {
+            setSecondSelected(iso)
+            setInternalRangeEnd(iso || '')
+        }
+
+        if (range) {
+            onChange(event, {
+                rangeStart: index === 0 ? iso : firstSelected,
+                rangeEnd: index === 1 ? iso : secondSelected
+            })
+        } else {
+            onChange(event, {
+                selected: iso
+            })
+        }
+    }
+
+    const handlePopoverSelect = (
+        event: MouseEvent<HTMLInputElement>,
+        { iso }: { iso: DayISO }
+    ) => {
+        setFirstSelected(iso)
+        setInternalValue(iso)
+
+        if (range) {
+            const selected = firstSelected || secondSelected
+            const eventData: EventData = {
+                rangeStart: iso,
+                rangeEnd: selected
+            }
+
+            if (firstSelected && secondSelected) {
+                // both were selected reset selection
+                setInternalRangeEnd('')
+                setSecondSelected(null)
+                eventData.rangeEnd = null
+            } else if (selected) {
+                // exactly one was selected; fiture out the order
+                if (selected < iso) {
+                    setFirstSelected(selected)
+                    setInternalValue(selected)
+
+                    setInternalRangeEnd(iso)
+                    setSecondSelected(iso)
+                    eventData.rangeStart = selected
+                    eventData.rangeEnd = iso
+                } else {
+                    setFirstSelected(iso)
+                    setInternalValue(iso)
+
+                    setInternalRangeEnd(selected)
+                    setSecondSelected(selected)
+                    eventData.rangeStart = iso
+                    eventData.rangeEnd = selected
+                }
+            }
+            onChange(event, eventData)
+        } else {
+            onChange(event, {
+                selected: iso
+            })
+        }
+
+        if (collapseOnSelect) {
+            expander.current.expanded = false
+        }
+    }
+
+    const handleInternalChange = (event: ChangeEvent<HTMLInputElement>, index: number) => {
+        if (index === 0) {
+            setInternalValue(event.target.value)
+            onInputChange(event)
+        } else {
+            setInternalRangeEnd(event.target.value)
+            onInputRangeEndChange(event)
+        }
+    }
+
+    const [rangeStartPlaceholder, mainPlaceholder] = Array.isArray(inputPlaceholderText)
+        ? inputPlaceholderText
+        : [inputPlaceholderText, inputPlaceholderText]
+
+    return (
+        <span className={classNames('date-textbox', className)} ref={containerRef}>
+            {range && (
+                <EbayTextbox
+                    value={valueToRender}
+                    placeholder={rangeStartPlaceholder}
+                    onInputChange={(event) => handleInternalChange(event, 0)}
+                    onBlur={(event) => handleInputChange(event, 0)}
+                />
+            )}
+
+            <EbayTextbox
+                className="ebay-date-textbox--main"
+                placeholder={mainPlaceholder}
+                value={range ? rangeEndToRender : valueToRender}
+                onInputChange={(event) => handleInternalChange(event, range ? 1 : 0)}
+                onBlur={(event) => handleInputChange(event, range ? 1 : 0)}>
+                <EbayTextboxPostfixIcon name="calendar24" buttonAriaLabel={a11yOpenPopoverText} />
+            </EbayTextbox>
+
+            <div hidden={!isPopoverOpen} className="date-textbox__popover">
+                <EbayCalendar
+                    {...rest}
+                    range={range}
+                    interactive
+                    navigable
+                    numMonths={numMonths}
+                    selected={firstSelected && secondSelected
+                        ? [firstSelected, secondSelected]
+                        : firstSelected || secondSelected || undefined}
+                    onSelect={handlePopoverSelect} />
+            </div>
+        </span>
+    )
+}
+
+export default EbayDateTextbox

package/src/ebay-date-textbox/index.ts

@@ -0,0 +1 @@
+export { default as EbayDateTextbox, type EbayDateTextboxProps } from './date-textbox'

package/src/ebay-dialog-base/__tests__/index.spec.tsx

@@ -0,0 +1,83 @@
+import React from 'react'
+import { fireEvent, render, RenderResult } from '@testing-library/react'
+import { DialogBaseWithState } from '..'
+import DialogBase from '../components/dialogBase'
+import EbayDialogHeader from '../components/dialog-header'
+import { HeaderFooterDialog } from './mocks'
+
+jest.useFakeTimers()
+
+describe('DialogBase', () => {
+    it('should use id from header', () => {
+        const wrapper = render(
+            <DialogBase header={<EbayDialogHeader id="header-id" role="heading">title</EbayDialogHeader>} open>
+                dialog content
+            </DialogBase>
+        )
+
+        expect(wrapper.getByRole('dialog').getAttribute('aria-labelledby')).toEqual('header-id')
+    })
+
+    it('should generate id for header', () => {
+        const wrapper = render(
+            <DialogBase header={<EbayDialogHeader role="heading">title</EbayDialogHeader>} open>
+                dialog content
+            </DialogBase>
+        )
+
+        const label = wrapper.getByRole('dialog').getAttribute('aria-labelledby')
+        expect(label).toBeTruthy()
+        expect(wrapper.getByRole('heading').getAttribute('id')).toEqual(label)
+    })
+
+    it('given a closed dialog should return null', () => {
+        const wrapper = render(
+            <DialogBaseWithState
+                animated={false}
+                classPrefix="drawer-dialog"
+                className="custom-class"
+            />
+        )
+        expect(wrapper.container.childElementCount).toBe(0)
+    })
+
+    describe('given a DialogBase', () => {
+        let wrapper: RenderResult
+
+        beforeEach(() => {
+            wrapper = render(<HeaderFooterDialog classPrefix="drawer-dialog" closeButtonClass="closeButtonClass" className="custom-class" open />)
+        })
+        it('should render a DialogBase', () => {
+            expect(wrapper.container.querySelector('.custom-class')).toBeInTheDocument()
+        })
+        it('should render a DialogBase with custom classNames', () => {
+            expect(wrapper.container.firstChild).toHaveClass('custom-class')
+        })
+        it('should render a close button with a custom className', () => {
+            expect(wrapper.container.querySelector('.closeButtonClass')).toBeInTheDocument()
+        })
+        describe('click events', () => {
+            const spyCloseBtnClick = jest.fn()
+            const spyBackgroundClick = jest.fn()
+            beforeEach(() => {
+                wrapper = render(
+                    <HeaderFooterDialog
+                        classPrefix="drawer-dialog"
+                        onCloseBtnClick={spyCloseBtnClick}
+                        onBackgroundClick={spyBackgroundClick}
+                        open
+                    />
+                )
+            })
+            it('when btn cliked then it should trigger onCloseBtnClick event', () => {
+                fireEvent.click(wrapper.container.querySelector('.drawer-dialog__close'))
+                expect(spyCloseBtnClick).toHaveBeenCalled()
+            })
+            it('when background clicked then it should trigger onBackgroundClick event', () => {
+                jest.runAllTimers()
+                document.body.click()
+                expect(spyBackgroundClick).toHaveBeenCalled()
+            })
+        })
+    })
+})

package/src/ebay-dialog-base/__tests__/mocks.tsx

@@ -0,0 +1,38 @@
+import * as React from 'react'
+import DialogBase from '../components/dialogBase'
+import EbayDialogFooter from '../components/dialog-footer'
+import EbayDialogHeader from '../components/dialog-header'
+
+export const DialogDefaultProps = {
+    id: 'dialog-id',
+    classPrefix: 'lightbox-dialog',
+    className: 'lightbox-dialog--mask-fade',
+    windowClass: 'lightbox-dialog__window--fade',
+    a11yCloseText: 'close',
+    children: 'body content'
+}
+
+export const Dialog = (props) => (
+    <DialogBase {...DialogDefaultProps} {...props}>
+        {props.children || DialogDefaultProps.children}
+    </DialogBase>
+)
+
+export const HeaderFooterDialogDefaultProps = {
+    id: 'dialog-footer-id',
+    classPrefix: 'lightbox-dialog',
+    className: 'lightbox-dialog--mask-fade',
+    windowClass: 'lightbox-dialog__window--fade',
+    a11yCloseText: 'close',
+    footer: <EbayDialogFooter>footer content</EbayDialogFooter>,
+    header: <EbayDialogHeader>title content</EbayDialogHeader>,
+    children: 'body content'
+}
+
+export const HeaderFooterDialog = (props) => (
+    <DialogBase {...HeaderFooterDialogDefaultProps} {...props}>
+        {props.children || DialogDefaultProps.children}
+    </DialogBase>
+)
+
+export const DialogOpen = (props) => <Dialog open {...props} />