@ebay/ui-core-react 7.3.2 → 7.3.3

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

@@ -1,155 +0,0 @@
-import React from 'react'
-import { act, fireEvent, render, screen } from '@testing-library/react'
-import userEvent from '@testing-library/user-event'
-import { eventOfType } from '../../common/event-utils/__tests__/helpers'
-import { EbayTextbox, EbayTextboxPostfixIcon } from '../index'
-
-describe('<EbayTextbox>', () => {
-    describe('on textbox change', () => {
-        it('should fire an onInputChange event', () => {
-            const spy = jest.fn()
-            render(<EbayTextbox onInputChange={spy} />)
-
-            const value = `It's a spy!`
-            const textbox = screen.getByRole('textbox')
-
-            fireEvent.change(textbox, { target: { value } })
-            expect(spy).toHaveBeenCalledWith(eventOfType('change'), { value })
-        })
-    })
-
-    describe('on textbox change (and focus leaving the field)', () => {
-        it('should fire an onChange event', () => {
-            const spy = jest.fn()
-            render(<EbayTextbox onChange={spy} />)
-
-            const value = `It's a spy!`
-            const textbox = screen.getByRole('textbox')
-
-            fireEvent.change(textbox, { target: { value } })
-            expect(spy).not.toHaveBeenCalled()
-
-            fireEvent.blur(textbox, { target: { value } })
-            expect(spy).toHaveBeenCalledWith(eventOfType('blur'), { value })
-        })
-    })
-
-    describe('on textbox focus', () => {
-        it('should fire an onFocus event', () => {
-            const spy = jest.fn()
-            render(<EbayTextbox onFocus={spy} />)
-            const value = `It's a spy!`
-
-            fireEvent.focus(screen.getByRole('textbox'), { target: { value } })
-            expect(spy).toHaveBeenCalledWith(eventOfType('focus'), { value })
-        })
-    })
-
-    describe('on textbox blur', () => {
-        it('should fire an onBlur event', () => {
-            const spy = jest.fn()
-            render(<EbayTextbox onBlur={spy} />)
-            const value = `It's a spy!`
-
-            fireEvent.blur(screen.getByRole('textbox'), { target: { value } })
-            expect(spy).toHaveBeenCalledWith(eventOfType('blur'), { value })
-        })
-        it('should have "inline" class after blur event when no value is present', () => {
-            const { container } = render(<EbayTextbox floatingLabel="Test label" />)
-            fireEvent.blur(screen.getByRole('textbox'), { target: { value: '' } })
-            expect(container.querySelector('.floating-label__label')).toHaveClass('floating-label__label--inline')
-        })
-        it('should not have "inline" class after blur event when value is present', () => {
-            const { container } = render(<EbayTextbox floatingLabel="Test label" />)
-            fireEvent.blur(screen.getByRole('textbox'), { target: { value: 'New Value' } })
-            expect(container.querySelector('.floating-label__label')).not.toHaveClass('floating-label__label--inline')
-        })
-    })
-
-    describe('on textbox key down', () => {
-        it('should fire an onKeyDown event', () => {
-            const spy = jest.fn()
-            render(<EbayTextbox onKeyDown={spy} />)
-            const value = `It's a spy!`
-
-            fireEvent.keyDown(screen.getByRole('textbox'), { target: { value } })
-            expect(spy).toHaveBeenCalledWith(eventOfType('keydown'), { value })
-        })
-    })
-
-    describe('on textbox key up', () => {
-        it('should fire an onKeyUp event', () => {
-            const spy = jest.fn()
-            render(<EbayTextbox onKeyUp={spy} />)
-            const value = `It's a spy!`
-
-            fireEvent.keyUp(screen.getByRole('textbox'), { target: { value } })
-            expect(spy).toHaveBeenCalledWith(eventOfType('keyup'), { value })
-        })
-    })
-
-    describe('on textbox key press', () => {
-        it('should fire an onKeyPress event', () => {
-            const spy = jest.fn()
-            const value = `It's a spy!`
-            render(<EbayTextbox onKeyPress={spy} defaultValue={value} />)
-
-            const textbox = screen.getByRole('textbox')
-            act(() => { userEvent.type(textbox, 'a') })
-            expect(spy).toHaveBeenCalledWith(eventOfType('keypress'), { value })
-        })
-    })
-
-    describe('on textbox invalid value', () => {
-        it('should fire an onInvalid event', () => {
-            const spy = jest.fn()
-            const ref = React.createRef() as any
-            render(<form ref={ref}><EbayTextbox onInvalid={spy} required /></form>)
-
-            ref.current?.reportValidity()
-            expect(spy).toHaveBeenCalledWith(eventOfType('invalid'), { value: '' })
-        })
-    })
-
-    describe('on textbox button click', () => {
-        it('textbox should fire two events', () => {
-            const textboxSpy = jest.fn()
-            const iconSpy = jest.fn()
-            const value = 'test'
-            const wrapper = render(
-                <EbayTextbox defaultValue={value} onButtonClick={textboxSpy}>
-                    <EbayTextboxPostfixIcon name="clear16" buttonAriaLabel="Clear!" onClick={iconSpy} />
-                </EbayTextbox>
-            )
-            fireEvent.click(wrapper.getByRole('button'))
-
-            expect(textboxSpy).toHaveBeenCalledWith(eventOfType('click'), { value })
-            expect(iconSpy).toHaveBeenCalledWith(eventOfType('click'))
-        })
-
-        it('button should fire an event', () => {
-            const spy = jest.fn()
-            const wrapper = render(
-                <EbayTextbox>
-                    <EbayTextboxPostfixIcon
-                        name="clear16"
-                        buttonAriaLabel="Clear!"
-                        onClick={spy}
-                    />
-                </EbayTextbox>
-            )
-            fireEvent.click(wrapper.getByRole('button'))
-
-            expect(spy).toHaveBeenCalledWith(eventOfType('click'))
-        })
-    })
-
-    describe('on passing a ref', () => {
-        it('should set the ref as the input reference', () => {
-            const ref = React.createRef() as any
-            render(<EbayTextbox ref={ref} />)
-
-            expect(ref.current.tagName).toBe('INPUT')
-        })
-    })
-})

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

@@ -1,391 +0,0 @@
-import React, { ChangeEvent, FC, useState, KeyboardEvent, MouseEvent } from 'react'
-import { action } from '@storybook/addon-actions'
-import { EbayButton } from '../../ebay-button'
-import { EbayTextbox, EbayTextboxPostfixIcon, EbayTextboxPostfixText, EbayTextboxPrefixIcon, EbayTextboxPrefixText } from '../index'
-
-export default {
-    title: 'form input/ebay-textbox'
-}
-
-export const DefaultTextbox = {
-    render: () => <EbayTextbox defaultValue="EbayTextbox" />,
-    name: 'Default textbox'
-}
-
-export const TestingCallbacks = {
-    render: () => {
-        const TestComponent: FC = () => {
-            const ref = React.useRef(null)
-            const [value, setValue] = useState('')
-
-            const handleInputChange = (
-                e: ChangeEvent<HTMLTextAreaElement & HTMLInputElement>,
-                props: { value: string }
-            ) => {
-                action('onInputChange')(e, props)
-                setValue(props.value)
-            }
-            const handleButtonClick = (
-                e: KeyboardEvent & MouseEvent<HTMLTextAreaElement & HTMLInputElement>,
-                props: { value: string }
-            ) => {
-                action('onButtonClick')(e, props)
-                setValue('')
-            }
-
-            return (
-                <form ref={ref}>
-                    <p>
-                        <EbayTextbox
-                            value={value}
-                            onChange={(e, props) => action('onChange')(e, props)}
-                            onInputChange={(e, props) => handleInputChange(e, props)}
-                            onFocus={(e, props) => action('onFocus')(e, props)}
-                            onBlur={(e, props) => action('onBlur')(e, props)}
-                            onKeyPress={(e, props) => action('onKeyPress')(e, props)}
-                            onKeyUp={(e, props) => action('onKeyUp')(e, props)}
-                            onKeyDown={(e, props) => action('onKeyDown')(e, props)}
-                            onInvalid={(e, props) => action('onInvalid')(e, props)}
-                            onButtonClick={(e, props) => handleButtonClick(e, props)}
-                            required
-                        >
-                            <EbayTextboxPostfixIcon
-                                name="clear16"
-                                buttonAriaLabel="Clear"
-                                style={{ opacity: value.length ? '1' : '0' }}
-                            />
-                        </EbayTextbox>
-                    </p>
-                    <p>
-                        <EbayButton
-                            onClick={(e) => {
-                                e.preventDefault()
-                                ref.current?.reportValidity()
-                            }}
-                        >
-                            Check value presence
-                        </EbayButton>
-                    </p>
-                </form>
-            )
-        }
-        return (
-            <>
-                <TestComponent />
-            </>
-        )
-    },
-
-    name: 'Testing callbacks'
-}
-
-export const DisabledTextbox = {
-    render: () => (
-        <>
-            <EbayTextbox disabled />
-        </>
-    ),
-
-    name: 'Disabled textbox'
-}
-
-export const PlaceholderTextbox = {
-    render: () => (
-        <>
-            <EbayTextbox placeholder="placeholder text" />
-        </>
-    ),
-
-    name: 'Placeholder textbox'
-}
-
-export const InvalidTextbox = {
-    render: () => (
-        <>
-            <EbayTextbox invalid />
-        </>
-    ),
-
-    name: 'Invalid textbox'
-}
-
-export const FluidTextbox = {
-    render: () => (
-        <>
-            <EbayTextbox fluid />
-        </>
-    ),
-
-    name: 'Fluid textbox'
-}
-
-export const PasswordTextbox = {
-    render: () => (
-        <>
-            <EbayTextbox type="password" />
-        </>
-    ),
-
-    name: 'Password textbox'
-}
-
-export const MultilineTextbox = {
-    render: () => (
-        <>
-            <EbayTextbox multiline defaultValue={'some default value\nnext line'} />
-        </>
-    ),
-
-    name: 'Multiline textbox'
-}
-
-export const MultilineInvalidTextbox = {
-    render: () => (
-        <>
-            <EbayTextbox multiline invalid defaultValue="some default value" />
-        </>
-    ),
-
-    name: 'Multiline invalid textbox'
-}
-
-export const AutofocusedTextbox = {
-    render: () => (
-        <>
-            <EbayTextbox autoFocus placeholder="Should focus here" />
-        </>
-    ),
-
-    name: 'Autofocused textbox'
-}
-
-export const LargeTextbox = {
-    render: () => (
-        <>
-            <EbayTextbox placeholder="placeholder text" inputSize="large" />
-        </>
-    ),
-
-    name: 'Large textbox'
-}
-
-export const WithIcon = {
-    render: () => (
-        <div>
-            <p>
-                <EbayTextbox placeholder="email">
-                    <EbayTextboxPrefixIcon name="mail16" />
-                </EbayTextbox>
-            </p>
-            <p>
-                <EbayTextbox placeholder="username">
-                    <EbayTextboxPostfixIcon name="profile20" />
-                </EbayTextbox>
-            </p>
-            <p>
-                <EbayTextbox placeholder="search" onButtonClick={action('Clear!')}>
-                    <EbayTextboxPrefixIcon name="search16" />
-                    <EbayTextboxPostfixIcon name="clear16" buttonAriaLabel="Clear" />
-                </EbayTextbox>
-            </p>
-        </div>
-    ),
-
-    name: 'With icon'
-}
-
-export const WithPrePostfixText = {
-    render: () => (
-        <div>
-            <p>
-                <EbayTextbox placeholder="0.00">
-                    <EbayTextboxPrefixText id="prefix">$</EbayTextboxPrefixText>
-                </EbayTextbox>
-            </p>
-            <p>
-                <EbayTextbox placeholder="0">
-                    <EbayTextboxPostfixText id="postfix">in.</EbayTextboxPostfixText>
-                </EbayTextbox>
-            </p>
-        </div>
-    ),
-
-    name: 'With Pre/Post fix text'
-}
-
-export const ControlValueFromOutside = {
-    render: () => {
-        const Component = () => {
-            const [value, setValue] = useState('')
-
-            const handleOnChange = (e, props) => {
-                setValue(props.value.substring(0, 10))
-            }
-
-            return (
-                <EbayTextbox onInputChange={handleOnChange} value={value} placeholder="Max 10 chars" />
-            )
-        }
-
-        return (
-            <>
-                <Component />
-            </>
-        )
-    },
-
-    name: 'Control value from outside'
-}
-
-export const RefForwarding = {
-    render: () => {
-        const ref = React.createRef() as any
-
-        return (
-            <>
-                <EbayTextbox forwardedRef={ref} />
-            </>
-        )
-    },
-
-    name: 'Ref forwarding'
-}
-
-export const FloatingLabel = {
-    render: () => (
-        <EbayTextbox
-            floatingLabel="Floating label"
-            onChange={action('onChange')}
-            onInputChange={action('onInputChange')}
-            onFloatingLabelInit={() => action('onFloatingLabelInit')()}
-        />
-    ),
-
-    name: 'Floating label'
-}
-
-export const FloatingLabelTypeDate = {
-    render: () => (
-        <EbayTextbox
-            type="date"
-            floatingLabel="Floating label"
-            onChange={action('onChange')}
-            onInputChange={action('onInputChange')}
-            onFloatingLabelInit={() => action('onFloatingLabelInit')()}
-        />
-    ),
-
-    name: 'Floating label type date'
-}
-
-export const FloatingLabelWithValue = {
-    render: () => (
-        <EbayTextbox
-            onChange={action('textbox-changed')}
-            floatingLabel="Floating label"
-            defaultValue="Default value"
-        />
-    ),
-
-    name: 'Floating label with value'
-}
-
-export const FloatingLabelInvalid = {
-    render: () => (
-        <EbayTextbox
-            invalid
-            onChange={action('textbox-changed')}
-            floatingLabel="Invalid Floating label"
-        />
-    ),
-
-    name: 'Floating label invalid'
-}
-
-export const FloatingLabelWithAutofocus = {
-    render: () => (
-        <>
-            <p>
-                <EbayTextbox floatingLabel="Regular field" />
-            </p>
-            <p>
-                <EbayTextbox floatingLabel="Autofocused field" autoFocus onFocus={action('onFocus')} />
-            </p>
-        </>
-    ),
-
-    name: 'Floating label with autofocus'
-}
-
-export const FloatingLabelWithPlaceholderControlled = {
-    render: () => {
-        const Component = () => {
-            const [value, setValue] = useState('')
-
-            const handleOnChange = (e, { value: newValue }) => {
-                setValue(newValue.toLowerCase())
-            }
-
-            return (
-                <>
-                    <p>
-                        <EbayTextbox
-                            floatingLabel="Will convert to lowercase"
-                            placeholder="Enter some UPPERCASE"
-                            onChange={handleOnChange}
-                            value={value}
-                            size={30}
-                        />
-                    </p>
-                    <p>
-                        <EbayButton
-                            onClick={() => {
-                                setValue('changed text')
-                            }}
-                        >
-                            Change text
-                        </EbayButton>
-                    </p>
-                    <p>
-                        <EbayButton
-                            onClick={() => {
-                                setValue('')
-                            }}
-                        >
-                            Clear
-                        </EbayButton>
-                    </p>
-                </>
-            )
-        }
-
-        return (
-            <>
-                <Component />
-            </>
-        )
-    },
-
-    name: 'Floating label with placeholder, controlled'
-}
-
-export const FloatingLabelWithMultiline = {
-    render: () => (
-        <EbayTextbox onChange={action('textbox-changed')} floatingLabel="Floating label" multiline />
-    ),
-
-    name: 'Floating label with multiline'
-}
-
-export const FloatingLabelWithMultilineAndOpaqueLabel = {
-    render: () => (
-        <EbayTextbox
-            onChange={action('textbox-changed')}
-            floatingLabel="Floating label"
-            multiline
-            opaqueLabel
-        />
-    ),
-
-    name: 'Floating label with multiline and opaque label'
-}

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

@@ -1,140 +0,0 @@
-import React from 'react'
-import { render, screen } from '@testing-library/react'
-import { composeStories } from '@storybook/react'
-import * as stories from './index.stories'
-
-const {
-    DefaultTextbox,
-    DisabledTextbox,
-    FluidTextbox,
-    InvalidTextbox,
-    LargeTextbox,
-    MultilineTextbox,
-    PasswordTextbox,
-    WithIcon,
-    WithPrePostfixText,
-    PlaceholderTextbox,
-    FloatingLabel,
-    FloatingLabelInvalid,
-    FloatingLabelTypeDate
-} = composeStories(stories)
-
-describe('ebay-textbox rendering', () => {
-    it('renders default story correctly', () => {
-        render(<DefaultTextbox />)
-
-        const textbox = screen.getByRole('textbox')
-        expect(textbox).toHaveAttribute('type', 'text')
-        expect(textbox).toHaveAttribute('value', 'EbayTextbox')
-        expect(textbox).toHaveClass('textbox__control')
-    })
-
-    it('renders disabled story correctly', () => {
-        render(<DisabledTextbox />)
-
-        const textbox = screen.getByRole('textbox')
-        expect(textbox).toHaveAttribute('disabled')
-        expect(textbox).toHaveAttribute('value', '')
-    })
-
-    it('renders fluid story correctly', () => {
-        render(<FluidTextbox />)
-
-        const textbox = screen.getByRole('textbox')
-        expect(textbox).toHaveAttribute('value', '')
-        expect(textbox).toHaveClass('textbox__control')
-        expect(textbox.parentNode).toHaveClass('textbox--fluid')
-    })
-
-    it('renders invalid story correctly', () => {
-        render(<InvalidTextbox />)
-
-        const textbox = screen.getByRole('textbox')
-        expect(textbox).toHaveAttribute('value', '')
-        expect(textbox).toHaveAttribute('aria-invalid', 'true')
-    })
-
-    it('renders large story correctly', () => {
-        render(<LargeTextbox />)
-
-        const textbox = screen.getByRole('textbox')
-        expect(textbox).toHaveAttribute('value', '')
-        expect(textbox).toHaveClass('textbox__control')
-        expect(textbox.parentNode).toHaveClass('textbox--large')
-    })
-
-    it('renders multiline story correctly', () => {
-        render(<MultilineTextbox />)
-
-        const textbox = screen.getByRole('textbox')
-        expect(textbox).toHaveTextContent('some default value next line')
-        expect(textbox).toHaveClass('textbox__control')
-    })
-
-    it('renders password story correctly', () => {
-        const { container } = render(<PasswordTextbox />)
-
-        const textbox = container.querySelector('input[type="password"]')
-        expect(textbox).toHaveAttribute('value', '')
-        expect(textbox).toHaveClass('textbox__control')
-    })
-
-    it('renders with icon story correctly', () => {
-        const { container } = render(<WithIcon />)
-
-        const textbox = container.querySelector('input[type="text"]')
-        expect(textbox).toHaveAttribute('value', '')
-        expect(textbox).toHaveAttribute('placeholder', 'email')
-        expect(textbox).toHaveClass('textbox__control')
-
-        const icon = container.querySelector('svg')
-        expect(icon).toMatchSnapshot()
-    })
-
-    it('renders with pre/post fix text correctly', () => {
-        const { container } = render(<WithPrePostfixText />)
-        expect(container).toMatchSnapshot()
-    })
-
-    it('renders placeholder story correctly', () => {
-        render(<PlaceholderTextbox />)
-
-        const textbox = screen.getByRole('textbox')
-        expect(textbox).toHaveAttribute('value', '')
-        expect(textbox).toHaveAttribute('placeholder', 'placeholder text')
-        expect(textbox).toHaveClass('textbox__control')
-    })
-
-    it('renders floating label story correctly', () => {
-        render(<FloatingLabel />)
-
-        const textbox = screen.getByRole('textbox')
-        expect(textbox).toHaveAttribute('value', '')
-        expect(textbox).toHaveClass('textbox__control')
-
-        const label = screen.getByText('Floating label')
-        expect(label).toHaveClass('floating-label__label')
-    })
-
-    it('renders floating label invalid story correctly', () => {
-        render(<FloatingLabelInvalid />)
-
-        const textbox = screen.getByRole('textbox')
-        expect(textbox).toHaveAttribute('value', '')
-        expect(textbox).toHaveAttribute('aria-invalid', 'true')
-
-        const label = screen.getByText('Invalid Floating label')
-        expect(label).toHaveClass('floating-label__label floating-label__label--invalid')
-    })
-
-    it('renders floating label type date story correctly', () => {
-        const { container } = render(<FloatingLabelTypeDate />)
-
-        const textbox = container.querySelector('input[type="date"]')
-        expect(textbox).toHaveAttribute('value', '')
-        expect(textbox).toHaveClass('textbox__control')
-
-        const label = screen.getByText('Floating label')
-        expect(label).toHaveClass('floating-label__label')
-    })
-})

package/src/ebay-textbox/index.ts

@@ -1,7 +0,0 @@
-export { default as EbayTextbox, type EbayTextboxProps } from './textbox'
-export { default as EbayTextboxPrefixIcon } from './prefix-icon'
-export { default as EbayTextboxPrefixText } from './prefix-text'
-export { default as EbayTextboxPostfixIcon } from './postfix-icon'
-export { default as EbayTextboxPostfixText } from './postfix-text'
-export { useFloatingLabel } from '../common/floating-label-utils/hooks'
-export type { Size } from './types'