@ebay/ui-core-react 7.3.0 → 7.3.2

package/src/ebay-split-button/__tests__/__snapshots__/render.spec.tsx.snap

@@ -0,0 +1,118 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ebay-split-button rendering renders split button correctly 1`] = `
+<svg
+  aria-hidden="true"
+  class="icon icon--12"
+  focusable="false"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <use
+    xlink:href="#icon-chevron-down-12"
+  />
+</svg>
+`;
+
+exports[`ebay-split-button rendering renders split button correctly 2`] = `
+<svg
+  aria-hidden="true"
+  class="icon icon--12"
+  focusable="false"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <use
+    xlink:href="#icon-chevron-down-12"
+  />
+</svg>
+`;
+
+exports[`ebay-split-button rendering renders split button correctly 3`] = `
+<svg
+  aria-hidden="true"
+  class="icon icon--12"
+  focusable="false"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <use
+    xlink:href="#icon-chevron-down-12"
+  />
+</svg>
+`;
+
+exports[`ebay-split-button rendering renders split button with controls correctly 1`] = `
+<svg
+  aria-hidden="true"
+  class="icon icon--12"
+  focusable="false"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <use
+    xlink:href="#icon-chevron-down-12"
+  />
+</svg>
+`;
+
+exports[`ebay-split-button rendering renders split button with loading state correctly 1`] = `
+<svg
+  aria-hidden="true"
+  class="icon icon--12"
+  focusable="false"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <use
+    xlink:href="#icon-chevron-down-12"
+  />
+</svg>
+`;
+
+exports[`ebay-split-button rendering renders split button with pre-loading state correctly 1`] = `
+<svg
+  aria-hidden="true"
+  class="icon icon--12"
+  focusable="false"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <use
+    xlink:href="#icon-chevron-down-12"
+  />
+</svg>
+`;
+
+exports[`ebay-split-button rendering renders split button with size correctly 1`] = `
+<svg
+  aria-hidden="true"
+  class="icon icon--12"
+  focusable="false"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <use
+    xlink:href="#icon-chevron-down-12"
+  />
+</svg>
+`;
+
+exports[`ebay-split-button rendering renders transparent split button correctly 1`] = `
+<svg
+  aria-hidden="true"
+  class="icon icon--12"
+  focusable="false"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <use
+    xlink:href="#icon-chevron-down-12"
+  />
+</svg>
+`;
+
+exports[`ebay-split-button rendering renders truncated split button correctly 1`] = `
+<svg
+  aria-hidden="true"
+  class="icon icon--12"
+  focusable="false"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <use
+    xlink:href="#icon-chevron-down-12"
+  />
+</svg>
+`;

package/src/ebay-split-button/__tests__/index.spec.tsx

@@ -0,0 +1,168 @@
+import React from 'react'
+import { fireEvent, render, screen } from '@testing-library/react'
+import { EbayMenuButtonItem as Item } from '../../ebay-menu-button'
+import { EbaySplitButton, Props } from '../index'
+
+const values = ['first', 'second', 'third']
+
+jest.mock('../../common/random-id')
+
+describe('<EbaySplitButton>', () => {
+    describe('on button click', () => {
+        it('should fire onClick event', () => {
+            const spy = jest.fn()
+            const wrapper = render(splitButton({ onClick: spy }))
+            fireEvent.click(wrapper.getAllByRole('button')[0])
+
+            expect(spy).toHaveBeenCalled()
+        })
+    })
+    describe('on escape keydown', () => {
+        it('should fire onEscape event', () => {
+            const spy = jest.fn()
+            const wrapper = render(splitButton({ onEscape: (e) => spy(e) }))
+
+            fireEvent.keyDown(wrapper.getAllByRole('button')[0], { key: 'Escape' })
+
+            expect(spy).toHaveBeenCalled()
+        })
+    })
+    describe('on expand/collapse', () => {
+        it('should fire onExpand/onCollapse event', async () => {
+            const expandSpy = jest.fn()
+            const collapseSpy = jest.fn()
+            render(splitButton({ onExpand: expandSpy, onCollapse: collapseSpy }))
+
+            const dropdownButton = screen.getAllByRole('button')[1]
+            fireEvent.click(dropdownButton)
+
+            expect(expandSpy).toHaveBeenCalled()
+            expect(collapseSpy).not.toHaveBeenCalled()
+
+            expandSpy.mockReset()
+            collapseSpy.mockReset()
+            fireEvent.click(dropdownButton)
+
+            expect(expandSpy).not.toHaveBeenCalled()
+            expect(collapseSpy).toHaveBeenCalled()
+        })
+    })
+
+    describe('on focus/blur', () => {
+        it('should fire onFocus/onBlur event', () => {
+            const focusSpy = jest.fn()
+            const blurSpy = jest.fn()
+            render(splitButton({ onFocus: focusSpy, onBlur: blurSpy }))
+
+            const [mainButton] = screen.getAllByRole('button')
+            fireEvent.focus(mainButton)
+
+            expect(focusSpy).toHaveBeenCalled()
+            expect(blurSpy).not.toHaveBeenCalled()
+
+            focusSpy.mockReset()
+            blurSpy.mockReset()
+            fireEvent.blur(mainButton)
+
+            expect(focusSpy).not.toHaveBeenCalled()
+            expect(blurSpy).toHaveBeenCalled()
+        })
+    })
+
+    describe('on select', () => {
+        it('should fire onSelect event', () => {
+            const indexToSelect = 0
+            const spy = jest.fn()
+            render(splitButton({ onSelect: spy }))
+
+            const dropdownButton = screen.getAllByRole('button')[1]
+            fireEvent.click(dropdownButton)
+            const menuItem = screen.getAllByRole('menuitem')[indexToSelect]
+            fireEvent.click(menuItem)
+            const expectedEventProps = {
+                index: indexToSelect,
+                checked: [indexToSelect]
+            }
+            expect(spy).toHaveBeenCalledWith(expect.any(Object), expectedEventProps)
+        })
+    })
+
+    describe('type="radio"', () => {
+        it('should fire onChange event', () => {
+            const indexToCheck = 1
+            const anotherIndexToCheck = 2
+            const spy = jest.fn()
+            render(splitButton({ type: 'radio', onChange: spy }))
+
+            const dropdownButton = screen.getAllByRole('button')[1]
+            fireEvent.click(dropdownButton)
+            const menuItems = screen.getAllByRole('menuitemradio')
+            const menuItem = menuItems[indexToCheck]
+            fireEvent.click(menuItem)
+
+            const expectedEventProps = {
+                index: indexToCheck,
+                indexes: [indexToCheck],
+                checked: [indexToCheck],
+                checkedValues: [values[indexToCheck]]
+            }
+            expect(spy).toHaveBeenCalledWith(expect.any(Object), expectedEventProps)
+            spy.mockClear()
+
+            const anotherMenuItem = menuItems[anotherIndexToCheck]
+            fireEvent.click(anotherMenuItem)
+
+            const newerExpectedEventProps = {
+                index: anotherIndexToCheck,
+                indexes: [anotherIndexToCheck],
+                checked: [anotherIndexToCheck],
+                checkedValues: [values[anotherIndexToCheck]]
+            }
+            expect(spy).toHaveBeenCalledWith(expect.any(Object), newerExpectedEventProps)
+        })
+    })
+
+    describe('type="checkbox"', () => {
+        it('should fire onChange event', () => {
+            const indexToCheck = 1
+            const anotherIndexToCheck = 2
+            const spy = jest.fn()
+            render(splitButton({ type: 'checkbox', onChange: spy }))
+
+            const dropdownButton = screen.getAllByRole('button')[1]
+            fireEvent.click(dropdownButton)
+            const menuItems = screen.getAllByRole('menuitemcheckbox')
+            const menuItem = menuItems[indexToCheck]
+            fireEvent.click(menuItem)
+
+            const expectedEventProps = {
+                index: indexToCheck,
+                indexes: [indexToCheck],
+                checked: [indexToCheck],
+                checkedValues: [values[indexToCheck]]
+            }
+            expect(spy).toHaveBeenCalledWith(expect.any(Object), expectedEventProps)
+            spy.mockClear()
+
+            const anotherMenuItem = menuItems[anotherIndexToCheck]
+            fireEvent.click(anotherMenuItem)
+
+            const newerExpectedEventProps = {
+                index: anotherIndexToCheck,
+                indexes: [indexToCheck, anotherIndexToCheck],
+                checked: [indexToCheck, anotherIndexToCheck],
+                checkedValues: [values[indexToCheck], values[anotherIndexToCheck]]
+            }
+            expect(spy).toHaveBeenCalledWith(expect.any(Object), newerExpectedEventProps)
+        })
+    })
+})
+
+function splitButton(props: Props) {
+    return (
+        <EbaySplitButton {...props}>
+            Split Button
+            {[0, 1, 2].map((n, i) => <Item value={values[n]} key={i}>Item {n + 1}</Item>)}
+        </EbaySplitButton>
+    )
+}

package/src/ebay-split-button/__tests__/index.stories.tsx

@@ -0,0 +1,241 @@
+import React, { useState } from 'react'
+import { Meta } from '@storybook/react'
+import { action } from '@storybook/addon-actions'
+import { EbayIcon } from '../../ebay-icon'
+import {
+    EbayMenuButtonItem as Item,
+    EbayMenuButtonSeparator as Separator
+} from '../../ebay-menu-button'
+import { EbaySplitButton } from '../index'
+import { Priority } from '../../ebay-button'
+
+Item.displayName = 'Item'
+Item.toString = () => 'Item'
+
+export default {
+    title: 'buttons/ebay-split-button'
+}
+
+export const Controls = {
+    render: (args) => (
+        <EbaySplitButton {...args}>
+            Save document
+            <Item>Save as...</Item>
+            <Item>Export</Item>
+        </EbaySplitButton>
+    ),
+
+    parameters: {
+        component: EbaySplitButton,
+        args: {
+            priority: 'secondary',
+            a11yMenuText: 'Show save options'
+        },
+        argTypes: {
+            priority: {
+                options: ['primary', 'secondary', 'tertiary', 'none'] as Priority[],
+                control: 'select'
+            },
+            onClick: { action: 'clicked' },
+            onKeyDown: { action: 'key down' },
+            onEscape: { action: 'Esc pressed' },
+            onFocus: { action: 'focused' },
+            onBlur: { action: 'blured' },
+            onCollapse: { action: 'collapsed' },
+            onExpand: { action: 'expanded' },
+            onSelect: { action: 'selected' }
+        }
+    } as Meta<typeof EbaySplitButton>
+}
+
+export const Default = () => (
+    <>
+        <p>
+            <EbaySplitButton
+                priority="primary"
+                a11yMenuText="Show save options"
+                onClick={action('click')}
+                // testing TS compilation here:
+                onKeyDown={(e) => action('key down')(e)}
+                onSelect={(e, { index, checked }) => action('select')(e, { index, checked })}
+                onChange={(e, { index, checked }) => action('change')(e, { index, checked })}
+                //
+                onEscape={action('escape')}
+                onFocus={action('focus')}
+                onBlur={action('blur')}
+                onCollapse={action('collapse')}
+                onExpand={action('expand')}
+            >
+                Save document
+                <Item>Save as...</Item>
+                <Item>Export</Item>
+            </EbaySplitButton>
+        </p>
+        <p>
+            <EbaySplitButton a11yMenuText="Menu" onClick={action('clicked')}>
+                Split Button Menu with Separator
+                <Item>Item 1</Item>
+                <Item>Item 2</Item>
+                <Separator />
+                <Item>Item 3</Item>
+            </EbaySplitButton>
+        </p>
+        <p>
+            <EbaySplitButton priority="tertiary" a11yMenuText="Expand" onClick={action('clicked')}>
+                Tertiary button menu with icons
+                <Item>
+                    <EbayIcon name="confirmation16" style={{ marginRight: '8px' }} /> Confirmed
+                </Item>
+                <Item>
+                    <EbayIcon name="attention16" style={{ marginRight: '8px' }} /> Not yet confirmed
+                </Item>
+                <Item>
+                    <EbayIcon name="attention16" style={{ marginRight: '8px' }} /> Not yet confirmed
+                </Item>
+            </EbaySplitButton>
+        </p>
+    </>
+)
+
+export const Size = () => (
+    <>
+        <p>
+            <EbaySplitButton
+                priority="primary"
+                size="large"
+                type="checkbox"
+                a11yMenuText="Show options"
+                onClick={action('clicked')}
+                onChange={action('change')}
+            >
+                Primary multi-select
+                <Item>Item 1</Item>
+                <Item checked>Item 2</Item>
+                <Item>Item 3</Item>
+                <Item checked>Item 4</Item>
+            </EbaySplitButton>
+        </p>
+        <p>
+            <EbaySplitButton
+                size="large"
+                type="radio"
+                a11yMenuText="Menu"
+                onClick={action('clicked')}
+                onChange={action('change')}
+            >
+                Single-select
+                <Item>Item 1</Item>
+                <Item checked>Item 2</Item>
+                <Item>Item 3</Item>
+            </EbaySplitButton>
+        </p>
+        <p>
+            <EbaySplitButton
+                size="large"
+                priority="tertiary"
+                a11yMenuText="Expand"
+                onClick={action('clicked')}
+                onSelect={action('select')}
+            >
+                Tertiary
+                <Item>Item 1</Item>
+                <Item>Item 2</Item>
+                <Item>Item 3</Item>
+            </EbaySplitButton>
+        </p>
+    </>
+)
+
+export const Truncated = () => (
+    <>
+        <p>
+            <EbaySplitButton
+                priority="primary"
+                style={{ maxWidth: '200px' }}
+                truncate
+                a11yMenuText="Show options"
+                onClick={action('clicked')}
+            >
+                Primary Split Button with truncated text label
+                <Item>Item 1</Item>
+                <Item>Item 2</Item>
+                <Item>Item 3</Item>
+            </EbaySplitButton>
+        </p>
+        <p>
+            <EbaySplitButton
+                style={{ maxWidth: '200px' }}
+                truncate
+                a11yMenuText="Menu"
+                onClick={action('clicked')}
+            >
+                Split Button with truncated text label
+                <Item>Item 1</Item>
+                <Item>Item 2</Item>
+                <Item>Item 3</Item>
+            </EbaySplitButton>
+        </p>
+    </>
+)
+
+export const Loading = (args) => {
+    const [loading, setLoading] = useState(false)
+
+    return (
+        <>
+            <p>
+                <EbaySplitButton
+                    bodyState={loading ? 'loading' : 'reset'}
+                    a11yMenuText="Show options"
+                    a11yButtonLoadingText="Stand by or stop loading by using menu"
+                    onClick={() => setLoading(true)}
+                    onSelect={(e, { index }) => {
+                        const value = [true, false][index]
+                        setLoading(value)
+                    }}
+                    {...args}
+                >
+                    Load
+                    <Item disabled={loading}>Start loading</Item>
+                    <Item disabled={!loading}>Stop loading</Item>
+                </EbaySplitButton>
+            </p>
+        </>
+    )
+}
+
+export const Transparent = () => (
+    <div style={{ background: 'lightcyan', padding: '1em' }}>
+        <p>
+            <EbaySplitButton transparent a11yMenuText="Show options" onClick={action('clicked')}>
+                Transparent split button
+                <Item>Item 1</Item>
+                <Item>Item 2</Item>
+                <Item>Item 3</Item>
+            </EbaySplitButton>
+        </p>
+        <p>
+            <EbaySplitButton
+                priority="tertiary"
+                transparent
+                a11yMenuText="Show options"
+                onClick={action('clicked')}
+            >
+                Transparent tertiary split button
+                <Item>Item 1</Item>
+                <Item>Item 2</Item>
+                <Item>Item 3</Item>
+            </EbaySplitButton>
+        </p>
+    </div>
+)
+
+export const Disabled = () => (
+    <>
+        <p>
+            <EbaySplitButton disabled a11yMenuText="Show options" onClick={action('clicked')}>
+                Disabled Split Button
+            </EbaySplitButton>
+        </p>
+    </>
+)

package/src/ebay-split-button/__tests__/render.spec.tsx

@@ -0,0 +1,156 @@
+import React from 'react'
+import { render, within } from '@testing-library/react'
+import { composeStories } from '@storybook/react'
+import * as stories from './index.stories'
+
+const { Default, Disabled, Controls, Loading, Size, Transparent, Truncated } = composeStories(stories)
+
+jest.mock('../../common/random-id')
+
+describe('ebay-split-button rendering', () => {
+    it('renders split button correctly', () => {
+        const { container } = render(<Default />)
+
+        const [splitButton, splitButtonWithSeparator, splitButtonTertiary] = container.querySelectorAll('.split-button')
+        const buttonSave = within(splitButton as HTMLElement).getByRole('button', { name: 'Save document' })
+        expect(buttonSave).toHaveClass('btn btn--primary btn--split-start')
+
+        const menuButtonContainer: HTMLElement = splitButton.querySelector('.menu-button')
+        const buttonMenu = within(menuButtonContainer).getByRole('button', { name: 'Show save options' })
+        expect(buttonMenu).toHaveClass('btn menu-button__button btn--primary btn--split-end')
+        expect(buttonMenu).toHaveAttribute('aria-expanded', 'false')
+        expect(buttonMenu).toHaveAttribute('aria-haspopup', 'true')
+        expect(buttonMenu).toHaveAttribute('aria-controls', 'abc123')
+        expect(buttonMenu.querySelector('svg')).toMatchSnapshot()
+
+        const buttonWithSeparator = within(splitButtonWithSeparator as HTMLElement).getByRole('button', { name: 'Split Button Menu with Separator' })
+        expect(buttonWithSeparator).toHaveClass('btn btn--secondary btn--split-start')
+
+        const menuButtonWithSeparatorContainer: HTMLElement = splitButtonWithSeparator.querySelector('.menu-button')
+        const buttonMenuWithSeparator = within(menuButtonWithSeparatorContainer).getByRole('button', { name: 'Menu' })
+        expect(buttonMenuWithSeparator).toHaveClass('btn menu-button__button btn--secondary btn--split-end')
+        expect(buttonMenuWithSeparator).toHaveAttribute('aria-expanded', 'false')
+        expect(buttonMenuWithSeparator).toHaveAttribute('aria-haspopup', 'true')
+        expect(buttonMenuWithSeparator).toHaveAttribute('aria-controls', 'abc123')
+        expect(buttonMenuWithSeparator.querySelector('svg')).toMatchSnapshot()
+
+        const buttonTertiary = within(splitButtonTertiary as HTMLElement).getByRole('button', { name: 'Tertiary button menu with icons' })
+        expect(buttonTertiary).toHaveClass('btn btn--tertiary btn--split-start')
+
+        const menuButtonTertiaryContainer: HTMLElement = splitButtonTertiary.querySelector('.menu-button')
+        const buttonMenuTertiary = within(menuButtonTertiaryContainer).getByRole('button', { name: 'Expand' })
+        expect(buttonMenuTertiary).toHaveClass('btn menu-button__button btn--tertiary btn--split-end')
+        expect(buttonMenuTertiary).toHaveAttribute('aria-expanded', 'false')
+        expect(buttonMenuTertiary).toHaveAttribute('aria-haspopup', 'true')
+        expect(buttonMenuTertiary).toHaveAttribute('aria-controls', 'abc123')
+        expect(buttonMenuTertiary.querySelector('svg')).toMatchSnapshot()
+    })
+
+    it('renders disabled split button correctly', () => {
+        const { container } = render(<Disabled />)
+
+        const splitButton: HTMLElement = container.querySelector('.split-button')
+        const buttonSave = within(splitButton).getByRole('button', { name: 'Disabled Split Button' })
+        expect(buttonSave).toBeDisabled()
+
+        const menuButtonContainer: HTMLElement = splitButton.querySelector('.menu-button')
+        const buttonMenu = within(menuButtonContainer).getByRole('button', { name: 'Show options' })
+        expect(buttonMenu).toBeDisabled()
+    })
+
+    it('renders split button with controls correctly', () => {
+        const { container } = render(<Controls />)
+
+        const splitButton: HTMLElement = container.querySelector('.split-button')
+        const buttonSave = within(splitButton).getByRole('button', { name: 'Save document' })
+        expect(buttonSave).toHaveClass('btn btn--secondary btn--split-start')
+
+        const menuButtonContainer: HTMLElement = splitButton.querySelector('.menu-button')
+        const buttonMenu = within(menuButtonContainer).getByRole('button')
+        expect(buttonMenu).toHaveClass('btn menu-button__button btn--secondary btn--split-end')
+        expect(buttonMenu).toHaveAttribute('aria-expanded', 'false')
+        expect(buttonMenu).toHaveAttribute('aria-haspopup', 'true')
+        expect(buttonMenu).toHaveAttribute('aria-controls', 'abc123')
+        expect(buttonMenu.querySelector('svg')).toMatchSnapshot()
+    })
+
+    it('renders split button with pre-loading state correctly', () => {
+        const { container } = render(<Loading />)
+
+        const splitButton: HTMLElement = container.querySelector('.split-button')
+        const buttonSave = within(splitButton).getByRole('button', { name: 'Load' })
+        expect(buttonSave).toHaveClass('btn btn--secondary btn--split-start')
+
+        const menuButtonContainer: HTMLElement = splitButton.querySelector('.menu-button')
+        const buttonMenu = within(menuButtonContainer).getByRole('button', { name: 'Show options' })
+        expect(buttonMenu).toHaveClass('btn menu-button__button btn--secondary btn--split-end')
+        expect(buttonMenu).toHaveAttribute('aria-expanded', 'false')
+        expect(buttonMenu).toHaveAttribute('aria-haspopup', 'true')
+        expect(buttonMenu).toHaveAttribute('aria-controls', 'abc123')
+        expect(buttonMenu.querySelector('svg')).toMatchSnapshot()
+    })
+
+    it('renders split button with loading state correctly', () => {
+        const { container } = render(<Loading bodyState="loading" />)
+
+        const splitButton: HTMLElement = container.querySelector('.split-button')
+        const buttonSave = within(splitButton).getByRole('button', { name: 'Stand by or stop loading by using menu' })
+        expect(buttonSave).toHaveClass('btn btn--secondary btn--split-start')
+
+        const menuButtonContainer: HTMLElement = splitButton.querySelector('.menu-button')
+        const buttonMenu = within(menuButtonContainer).getByRole('button', { name: 'Show options' })
+        expect(buttonMenu).toHaveClass('btn menu-button__button btn--secondary btn--split-end')
+        expect(buttonMenu).toHaveAttribute('aria-expanded', 'false')
+        expect(buttonMenu).toHaveAttribute('aria-haspopup', 'true')
+        expect(buttonMenu).toHaveAttribute('aria-controls', 'abc123')
+        expect(buttonMenu.querySelector('svg')).toMatchSnapshot()
+    })
+
+    it('renders split button with size correctly', () => {
+        const { container } = render(<Size />)
+
+        const splitButton = container.querySelector('.split-button') as HTMLElement
+        const buttonSave = within(splitButton).getByRole('button', { name: 'Primary multi-select' })
+        expect(buttonSave).toHaveClass('btn btn--primary btn--large btn--split-start')
+
+        const menuButtonContainer = splitButton.querySelector('.menu-button') as HTMLElement
+        const buttonMenu = within(menuButtonContainer).getByRole('button', { name: 'Show options' })
+        expect(buttonMenu).toHaveClass('btn menu-button__button btn--primary btn--large btn--split-end')
+        expect(buttonMenu).toHaveAttribute('aria-expanded', 'false')
+        expect(buttonMenu).toHaveAttribute('aria-haspopup', 'true')
+        expect(buttonMenu).toHaveAttribute('aria-controls', 'abc123')
+        expect(buttonMenu.querySelector('svg')).toMatchSnapshot()
+    })
+
+    it('renders transparent split button correctly', () => {
+        const { container } = render(<Transparent />)
+
+        const splitButton: HTMLElement = container.querySelector('.split-button')
+        const buttonSave = within(splitButton).getByRole('button', { name: 'Transparent split button' })
+        expect(buttonSave).toHaveClass('btn btn--secondary btn--split-start btn--transparent')
+
+        const menuButtonContainer: HTMLElement = splitButton.querySelector('.menu-button')
+        const buttonMenu = within(menuButtonContainer).getByRole('button', { name: 'Show options' })
+        expect(buttonMenu).toHaveClass('btn menu-button__button btn--secondary btn--split-end btn--transparent')
+        expect(buttonMenu).toHaveAttribute('aria-expanded', 'false')
+        expect(buttonMenu).toHaveAttribute('aria-haspopup', 'true')
+        expect(buttonMenu).toHaveAttribute('aria-controls', 'abc123')
+        expect(buttonMenu.querySelector('svg')).toMatchSnapshot()
+    })
+
+    it('renders truncated split button correctly', () => {
+        const { container } = render(<Truncated />)
+
+        const [splitButton] = container.querySelectorAll('.split-button')
+        const buttonSave = within(splitButton as HTMLElement).getByRole('button', { name: 'Primary Split Button with truncated text label' })
+        expect(buttonSave).toHaveClass('btn btn--primary btn--split-start btn--truncated')
+
+        const menuButtonContainer = splitButton.querySelector('.menu-button') as HTMLElement
+        const buttonMenu = within(menuButtonContainer).getByRole('button', { name: 'Show options' })
+        expect(buttonMenu).toHaveClass('btn menu-button__button btn--primary btn--split-end')
+        expect(buttonMenu).toHaveAttribute('aria-expanded', 'false')
+        expect(buttonMenu).toHaveAttribute('aria-haspopup', 'true')
+        expect(buttonMenu).toHaveAttribute('aria-controls', 'abc123')
+        expect(buttonMenu.querySelector('svg')).toMatchSnapshot()
+    })
+})

package/src/ebay-split-button/index.ts

@@ -0,0 +1,5 @@
+export { default as EbaySplitButton } from './split-button'
+export type {
+    EbaySplitButtonProps,
+    Props
+} from './types'