import { Badge } from 'terra-dropdown-button/package.json?dev-site-package';

import DefaultSplitButton from './example/DefaultSplitButton?dev-site-example';
import GhostSplitButton from './example/GhostSplitButton?dev-site-example';
import DisabledSplitButton from './example/DisabledSplitButton?dev-site-example';
import BlockSplitButton from './example/BlockSplitButton?dev-site-example';
import IconSplitButton from './example/IconSplitButton?dev-site-example';

import SplitButtonPropsTable from 'terra-dropdown-button/lib/SplitButton?dev-site-props-table';
import ItemPropsTable from 'terra-dropdown-button/lib/Item?dev-site-props-table';

<Badge />

# Split Button

The Split Button provides the user with the ability to choose the primary action or an action from a listing of alternative actions.
An example is email. The primary action is _reply_, but the user can also _forward_ or _reply all_. _Reply_ would be the primary action, while _forward_ and _reply all_ would be contained inside the dropdown.

Children must be the `Item` subcomponent for proper functionality and appearance.

## Getting Started

- Install with [npmjs](https://www.npmjs.com):
  - `npm install terra-dropdown-button`

## Implementation Notes:
The SplitButton component must be composed inside the [Base][1] component with a locale in order for it to load the correct translation strings.

[1]: https://engineering.cerner.com/terra-ui/application/terra-application/components/application-base

## Usage

```jsx
import { Item, SplitButton } from 'terra-dropdown-button';
```

## Component Features

 * [Cross-Browser Support](https://engineering.cerner.com/terra-ui/about/terra-ui/component-standards#cross-browser-support)
 * [Responsive Support](https://engineering.cerner.com/terra-ui/about/terra-ui/component-standards#responsive-support)
 * [Mobile Support](https://engineering.cerner.com/terra-ui/about/terra-ui/component-standards#mobile-support)
 * [Internationalization Support](https://engineering.cerner.com/terra-ui/about/terra-ui/component-standards#internationalization-i18n)
 * [LTR/RTL Support](https://engineering.cerner.com/terra-ui/about/terra-ui/component-standards#ltr--rtl)

## Examples
<DefaultSplitButton />
<GhostSplitButton />
<DisabledSplitButton />
<BlockSplitButton />
<IconSplitButton />

## Split Button Props
<SplitButtonPropsTable />

## Item Props
<ItemPropsTable />

## Testing

Terra Split Button uses `uuid` which changes the component's description id dynamically. To mock the return value with the Jest testing library, `jest.spyOn` can be used.

If Enzyme `shallow` is being used for the tests then the mock may not be required depending on the depth of the returned wrapper. However, if `mount` is used then `uuid` should be mocked as shown below:

```js
import { v4 as uuidv4 } from 'uuid';

let mockSpyUuid;

// using a variable may result in failures. For best results, mock return value.
beforeAll(() => {
  mockSpyUuid = jest.spyOn(uuidv4, 'v4').mockReturnValue('00000000-0000-0000-0000-000000000000');
});

// restore the mock
afterAll(() => {
  mockSpyUuid.mockRestore();
});

```