@ebay/ui-core-react 7.3.1 → 7.3.2

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

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

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

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

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