import { Meta, Preview, ArgTypes } from '@storybook/blocks';
import { Button, LinkButton } from './Button';
import { Alert } from '../Alert/Alert';

<Meta title="MDX|Button" component={Button} />

# Button

<Alert severity="warning" title={'Please note:'}>
  After reviewing this component we are asking you to use the IconButton when you require a button with only an icon.
</Alert>

When using a button please always follow a11y rules (e.g. W3C Recommendation [3.3.2 Labels or instructions](https://www.w3.org/TR/WCAG21/#labels-or-instructions)) and make sure the context in which the button is located is also communicated by screen readers.

## Primary

Used for "call to action", i.e. triggering the main action. There should never be more than one on a page. If you need multiple buttons for different actions, decide which action is the most important and make that the primary `Button`. All other `Button` components should be secondary.

If there is no primary action, all `Button` components should be secondary.

<Preview>
  <div>
    <Button variant="primary" size="sm" style={{ margin: '5px' }}>
      {'Small'}
    </Button>
    <Button variant="primary" size="md" style={{ margin: '5px' }}>
      {'Medium'}
    </Button>
    <Button variant="primary" size="lg" style={{ margin: '5px' }}>
      {'Large'}
    </Button>
  </div>
</Preview>

## Secondary

The secondary `Button` is the default button style and can trigger various actions. How it is used depends on its surroundings:

1. When next to the primary `Button`, the Secondary style can for example be used for "Cancel" or "Abort" actions.
2. When there is no main important action on a given page, all `Button` components should use the secondary style.

<Preview>
  <div>
    <Button variant="secondary" size="sm" style={{ margin: '5px' }}>
      {'Small'}
    </Button>
    <Button variant="secondary" size="md" style={{ margin: '5px' }}>
      {'Medium'}
    </Button>
    <Button variant="secondary" size="lg" style={{ margin: '5px' }}>
      {'Large'}
    </Button>
  </div>
</Preview>

## Destructive

Used for triggering a removing or deleting action. Because of its dominant coloring, it should be used sparingly. If you need multiple Destructive `Button` components in one view, we recommend using a secondary `Button` or Link variant instead and only use the Destructive variant to double confirm.

<Preview>
  <div>
    <Button variant="destructive" size="sm" style={{ margin: '5px' }}>
      {'Small'}
    </Button>
    <Button variant="destructive" size="md" style={{ margin: '5px' }}>
      {'Medium'}
    </Button>
    <Button variant="destructive" size="lg" style={{ margin: '5px' }}>
      {'Large'}
    </Button>
  </div>
</Preview>

## Text

<Preview>
  <div>
    <Button fill="text" size="sm" style={{ margin: '5px' }}>
      {'Small'}
    </Button>
    <Button fill="text" size="md" style={{ margin: '5px' }}>
      {'Medium'}
    </Button>
    <Button fill="text" size="lg" style={{ margin: '5px' }}>
      {'Large'}
    </Button>
  </div>
</Preview>

<ArgTypes of={Button} />

## Links

To add an anchor that looks like a button use the `<LinkButton>` component and pass a href prop.

<Preview>
  <div>
    <LinkButton href="/" size="sm" style={{ margin: '5px' }}>
      {'Small'}
    </LinkButton>
    <LinkButton href="/" size="md" style={{ margin: '5px' }}>
      {'Medium'}
    </LinkButton>
    <LinkButton href="/" size="lg" style={{ margin: '5px' }}>
      {'Large'}
    </LinkButton>
  </div>
</Preview>
