import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs';
import { useState, useEffect } from 'react';
import Shortcut from '../Shortcut';
import { PlaceholderOutline } from '@useblu/ocean-icons-react';

<Meta title="Components/Shortcut" component={Shortcut} />

# Shortcut API

The API documentation of the Shortcut React component. Learn more about the props and the CSS customization points.

## Import

```javascript
import { Shortcut } from '@useblu/ocean-react';
```

## Props

<ArgsTable of="." />

The ref is forwarded to the root element.

Any other props supplied will be provided to the root element (native element).

If that's not sufficient, you can check the [implementation of the component](https://github.com/ocean-ds/ocean-web/blob/master/packages/ocean-react/src/Shortcut/Shortcut.tsx) for more detail.

## Playground

<Canvas>
  <Story
    name="playground"
    args={{
      label: 'Label',
      description: 'Lorem ipsum dolor sit amet, consectetur.',
      icon: <PlaceholderOutline />,
      size: 'medium',
      orientation: 'horizontal',
      count: undefined,
      fullWidth: false,
      blocked: false,
      disabled: false,
    }}
    parameters={{
      controls: { exclude: /^icon*/ },
    }}
    argTypes={{
      label: {
        control: 'text',
      },
      description: {
        control: 'text',
      },
      size: {
        options: ['tiny', 'small', 'medium'],
        control: { type: 'select' },
      },
      orientation: {
        options: ['horizontal', 'vertical'],
        control: { type: 'select' },
      },
      blocked: {
        control: 'boolean',
      },
      disabled: {
        control: 'boolean',
      },
      fullWidth: {
        control: 'boolean',
      },
      count: {
        control: 'number',
      },
    }}
  >
    {(props) => <Shortcut id="shortcut-playground" {...props} />}
  </Story>
</Canvas>
