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

import DefaultDropdownButton from './example/DefaultDropdownButton?dev-site-example';
import EmphasisDropdownButton from './example/EmphasisDropdownButton?dev-site-example';
import GhostDropdownButton from './example/GhostDropdownButton?dev-site-example';
import DisabledDropdownButton from './example/DisabledDropdownButton?dev-site-example';
import BlockDropdownButton from './example/BlockDropdownButton?dev-site-example';


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

<Badge />

# Terra Dropdown Button

The Terra Dropdown Button is a button that, when pressed, opens a dropdown with more buttons.
It is intended to allow the user to choose from a list of options with no special emphasis on any option.

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

## Getting Started

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

<!-- AUTO-GENERATED-CONTENT:START Peer Dependencies -->
## Peer Dependencies

This component requires the following peer dependencies be installed in your app for the component to properly function.

| Peer Dependency | Version |
|-|-|
| react | ^16.8.5 |
| react-dom | ^16.8.5 |
| react-intl | ^2.8.0 |

<!-- AUTO-GENERATED-CONTENT:END -->

## Implementation Notes:
The Form-Field 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 DropdownButton, { Item } 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)
 * [LTR/RTL Support](https://engineering.cerner.com/terra-ui/about/terra-ui/component-standards#ltr--rtl)

## Examples
<DefaultDropdownButton />
<EmphasisDropdownButton />
<GhostDropdownButton />
<DisabledDropdownButton />
<BlockDropdownButton />

## DropdownButton Props
<DropdownButtonPropsTable />

## Item Props
<ItemPropsTable />

## Testing

Terra Dropdown 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();
});

```