import {
  Meta,
  Story,
  Canvas,
  ArgsTable,
  Description,
} from '@storybook/addon-docs';
import BdComponentName from './ComponentName';

<Meta
  title="Components/ComponentName"
  component={BdComponentName}
  argTypes={{
    colorName: {
      control: {
        type: 'select',
        options: [
          'sand-4',
          'ocre-4',
          'violet-4',
          'aqua-4',
          'green-4',
          'neutral-4',
          'petrol-4',
          'tomato-4',
        ],
      },
    },
  }}
  parameters={{
    knobs: {
      disable: true,
    },
  }}
/>

# ComponentName

```javascript
@Html.React("Components.BdComponentName", new
{
    colorName = "green-4"
}, clientOnly: true)
```

<Description of={BdComponentName} />

export const ComponentNameStory = (args) => <BdComponentName {...args} />;

<Story
  name="ComponentName"
  args={{
    colorName: 'green-4',
  }}
>
  {ComponentNameStory.bind({})}
</Story>

<ArgsTable of={BdComponentName} />

## Active, with another Background Color and with HTML passed in

<Canvas>
  <BdComponentName
    colorName="tomato-4"
    isActive={true}
    html="<p class='bl-size-4'>Lorem Ipsum</p>"
  />
</Canvas>