import {
  Meta,
  Preview,
  Props,
  Story,
  SourceState,
} from "@storybook/addon-docs/blocks";
import {
  Button,
  BUTTON_VARIANT,
  BUTTON_SIZE,
  BUTTON_ICON_POSITION,
} from "./Button";
import { ICON_TYPE } from "../Icon";
import { Link } from "../Link";
import { ORIENTATION, JUSTIFY } from "../../types";
import { Stack } from "../Stack";
import { EnumTable } from "../../storybook-components/EnumTable";

<Meta title="Components/Buttons/Button" component={Button} />

# Button

```jsx
import { Button } from "@aptible/arrow-ds";
```

The `Button` component is a styled HTML `<button>`.

<Preview withSource={SourceState.OPEN}>
  <Story name="Button">
    <Button>Button</Button>
  </Story>
</Preview>

## `Button` Custom Props

These are the custom props that extend `React.ButtonHTMLAttributes<HTMLButtonElement>`.

<Props of={Button} />
<EnumTable enums={{ BUTTON_VARIANT, BUTTON_SIZE, BUTTON_ICON_POSITION }} />

# Button.Group

Use `Button.Group` when you have a group of buttons that are related and need to be displayed next to each other inline. The `Button.Group` will apply equal margin between buttons.

### Dos and Don'ts

- **Do** use `Button.Group` with only `Button` components.
- **Don't** use full-width buttons with the justify prop, it won't have
  any effect.
- **Don't** use children that aren't buttons; correct spacing will not
  be applied to non-button elements. Use the [`Stack`](/?path=/docs/components-stack--stack) component instead.

## `Button.Group` Custom Props

These are the custom props that extend [`BoxProps`](/?path=/docs/components-box--box#all-props).

<Props of={Button.Group} />
<EnumTable enums={{ JUSTIFY }} />

## `Button` Demos

### Variants

- **Primary:** `primary` buttons serve as a call to action to the user. Generally there should only be one `primary` button in a view and it should be placed to the right of any nearby buttons.
- **Secondary:** `secondary` buttons are used for less important stand-alone actions.
- **Utility:** `utility` buttons are available for repeatable, in-page actions with low visual weight.
- **Danger:** `danger` buttons are used to for destructive actions such as deletion. There should generally only be one `danger` button in a view.

<Preview>
  <Story name="VariantPrimary">
    <Button variant={BUTTON_VARIANT.PRIMARY}>Primary</Button>
  </Story>
  <Story name="VariantSecondary">
    <Button variant={BUTTON_VARIANT.SECONDARY}>Secondary</Button>
  </Story>
  <Story name="VariantUtility">
    <Button variant={BUTTON_VARIANT.UTILITY}>Utility</Button>
  </Story>
  <Story name="VariantDanger">
    <Button variant={BUTTON_VARIANT.DANGER}>Danger</Button>
  </Story>
  <Story name="VariantMinimal">
    <Button variant={BUTTON_VARIANT.MINIMAL}>Minimal</Button>
  </Story>
</Preview>

### Sizes

The default button size is `medium`. `medium` buttons should be used in `TopBar`s, `large` buttons should be used in modal footers

<Preview>
  <Story name="SizesPrimary">
    <Stack orientation={ORIENTATION.VERTICAL}>
      <Button size={BUTTON_SIZE.LARGE} variant={BUTTON_VARIANT.PRIMARY}>
        Large
      </Button>
      <Button size={BUTTON_SIZE.MEDIUM} variant={BUTTON_VARIANT.PRIMARY}>
        Medium
      </Button>
    </Stack>
  </Story>
  <Story name="SizesSecondary">
    <Stack orientation={ORIENTATION.VERTICAL}>
      <Button size={BUTTON_SIZE.LARGE} variant={BUTTON_VARIANT.SECONDARY}>
        Large
      </Button>
      <Button size={BUTTON_SIZE.MEDIUM} variant={BUTTON_VARIANT.SECONDARY}>
        Medium
      </Button>
    </Stack>
  </Story>
  <Story name="SizesUtility">
    <Stack orientation={ORIENTATION.VERTICAL}>
      <Button size={BUTTON_SIZE.LARGE} variant={BUTTON_VARIANT.UTILITY}>
        Large
      </Button>
      <Button size={BUTTON_SIZE.MEDIUM} variant={BUTTON_VARIANT.UTILITY}>
        Medium
      </Button>
    </Stack>
  </Story>
  <Story name="SizesDanger">
    <Stack orientation={ORIENTATION.VERTICAL}>
      <Button size={BUTTON_SIZE.LARGE} variant={BUTTON_VARIANT.DANGER}>
        Large
      </Button>
      <Button size={BUTTON_SIZE.MEDIUM} variant={BUTTON_VARIANT.DANGER}>
        Medium
      </Button>
    </Stack>
  </Story>
  <Story name="SizesMinimal">
    <Stack orientation={ORIENTATION.VERTICAL}>
      <Button size={BUTTON_SIZE.LARGE} variant={BUTTON_VARIANT.MINIMAL}>
        Large
      </Button>
      <Button size={BUTTON_SIZE.MEDIUM} variant={BUTTON_VARIANT.MINIMAL}>
        Medium
      </Button>
    </Stack>
  </Story>
</Preview>

### With Icon

See [Icon](/?path=/docs/components-icon--default) component for more information. Use the `iconPosition` prop to place the icon to the left or right of content

<Preview>
  <Story name="WithIconPrimary">
    <Stack orientation={ORIENTATION.VERTICAL}>
      <Button
        icon={ICON_TYPE.POO_STORM}
        size={BUTTON_SIZE.LARGE}
        variant={BUTTON_VARIANT.PRIMARY}
      >
        Icons
      </Button>
      <Button
        icon={ICON_TYPE.POO_STORM}
        iconPosition={BUTTON_ICON_POSITION.RIGHT}
        size={BUTTON_SIZE.LARGE}
        variant={BUTTON_VARIANT.PRIMARY}
      >
        Icons
      </Button>
      <Button
        icon={ICON_TYPE.POO_STORM}
        size={BUTTON_SIZE.MEDIUM}
        variant={BUTTON_VARIANT.PRIMARY}
      >
        Icons
      </Button>
      <Button
        icon={ICON_TYPE.POO_STORM}
        iconPosition={BUTTON_ICON_POSITION.RIGHT}
        size={BUTTON_SIZE.MEDIUM}
        variant={BUTTON_VARIANT.PRIMARY}
      >
        Icons
      </Button>
    </Stack>
  </Story>
  <Story name="WithIconSecondary">
    <Stack orientation={ORIENTATION.VERTICAL}>
      <Button
        icon={ICON_TYPE.POO_STORM}
        size={BUTTON_SIZE.LARGE}
        variant={BUTTON_VARIANT.SECONDARY}
      >
        Icons
      </Button>
      <Button
        icon={ICON_TYPE.POO_STORM}
        iconPosition={BUTTON_ICON_POSITION.RIGHT}
        size={BUTTON_SIZE.LARGE}
        variant={BUTTON_VARIANT.SECONDARY}
      >
        Icons
      </Button>
      <Button
        icon={ICON_TYPE.POO_STORM}
        size={BUTTON_SIZE.MEDIUM}
        variant={BUTTON_VARIANT.SECONDARY}
      >
        Icons
      </Button>
      <Button
        icon={ICON_TYPE.POO_STORM}
        iconPosition={BUTTON_ICON_POSITION.RIGHT}
        size={BUTTON_SIZE.MEDIUM}
        variant={BUTTON_VARIANT.SECONDARY}
      >
        Icons
      </Button>
    </Stack>
  </Story>
  <Story name="WithIconUtility">
    <Stack orientation={ORIENTATION.VERTICAL}>
      <Button
        icon={ICON_TYPE.POO_STORM}
        size={BUTTON_SIZE.LARGE}
        variant={BUTTON_VARIANT.UTILITY}
      >
        Icons
      </Button>
      <Button
        icon={ICON_TYPE.POO_STORM}
        iconPosition={BUTTON_ICON_POSITION.RIGHT}
        size={BUTTON_SIZE.LARGE}
        variant={BUTTON_VARIANT.UTILITY}
      >
        Icons
      </Button>
      <Button
        icon={ICON_TYPE.POO_STORM}
        size={BUTTON_SIZE.MEDIUM}
        variant={BUTTON_VARIANT.UTILITY}
      >
        Icons
      </Button>
      <Button
        icon={ICON_TYPE.POO_STORM}
        iconPosition={BUTTON_ICON_POSITION.RIGHT}
        size={BUTTON_SIZE.MEDIUM}
        variant={BUTTON_VARIANT.UTILITY}
      >
        Icons
      </Button>
    </Stack>
  </Story>
  <Story name="WithIconDanger">
    <Stack orientation={ORIENTATION.VERTICAL}>
      <Button
        icon={ICON_TYPE.POO_STORM}
        size={BUTTON_SIZE.LARGE}
        variant={BUTTON_VARIANT.DANGER}
      >
        Icons
      </Button>
      <Button
        icon={ICON_TYPE.POO_STORM}
        iconPosition={BUTTON_ICON_POSITION.RIGHT}
        size={BUTTON_SIZE.LARGE}
        variant={BUTTON_VARIANT.DANGER}
      >
        Icons
      </Button>
      <Button
        icon={ICON_TYPE.POO_STORM}
        size={BUTTON_SIZE.MEDIUM}
        variant={BUTTON_VARIANT.DANGER}
      >
        Icons
      </Button>
      <Button
        icon={ICON_TYPE.POO_STORM}
        iconPosition={BUTTON_ICON_POSITION.RIGHT}
        size={BUTTON_SIZE.MEDIUM}
        variant={BUTTON_VARIANT.DANGER}
      >
        Icons
      </Button>
    </Stack>
  </Story>
  <Story name="WithIconMinimal">
    <Stack orientation={ORIENTATION.VERTICAL}>
      <Button
        icon={ICON_TYPE.POO_STORM}
        size={BUTTON_SIZE.LARGE}
        variant={BUTTON_VARIANT.MINIMAL}
      >
        Icons
      </Button>
      <Button
        icon={ICON_TYPE.POO_STORM}
        iconPosition={BUTTON_ICON_POSITION.RIGHT}
        size={BUTTON_SIZE.LARGE}
        variant={BUTTON_VARIANT.MINIMAL}
      >
        Icons
      </Button>
      <Button
        icon={ICON_TYPE.POO_STORM}
        size={BUTTON_SIZE.MEDIUM}
        variant={BUTTON_VARIANT.MINIMAL}
      >
        Icons
      </Button>
      <Button
        icon={ICON_TYPE.POO_STORM}
        iconPosition={BUTTON_ICON_POSITION.RIGHT}
        size={BUTTON_SIZE.MEDIUM}
        variant={BUTTON_VARIANT.MINIMAL}
      >
        Icons
      </Button>
    </Stack>
  </Story>
</Preview>

### Icon Only

<Preview>
  <Story name="IconOnlyPrimary">
    <Stack orientation={ORIENTATION.VERTICAL}>
      <Button
        icon={ICON_TYPE.POO_STORM}
        size={BUTTON_SIZE.LARGE}
        variant={BUTTON_VARIANT.PRIMARY}
      />
      <Button
        icon={ICON_TYPE.POO_STORM}
        size={BUTTON_SIZE.MEDIUM}
        variant={BUTTON_VARIANT.PRIMARY}
      />
    </Stack>
  </Story>
  <Story name="IconOnlySecondary">
    <Stack orientation={ORIENTATION.VERTICAL}>
      <Button
        icon={ICON_TYPE.POO_STORM}
        size={BUTTON_SIZE.LARGE}
        variant={BUTTON_VARIANT.SECONDARY}
      />
      <Button
        icon={ICON_TYPE.POO_STORM}
        size={BUTTON_SIZE.MEDIUM}
        variant={BUTTON_VARIANT.SECONDARY}
      />
    </Stack>
  </Story>
  <Story name="IconOnlyUtility">
    <Stack orientation={ORIENTATION.VERTICAL}>
      <Button
        icon={ICON_TYPE.POO_STORM}
        size={BUTTON_SIZE.LARGE}
        variant={BUTTON_VARIANT.UTILITY}
      />
      <Button
        icon={ICON_TYPE.POO_STORM}
        size={BUTTON_SIZE.MEDIUM}
        variant={BUTTON_VARIANT.UTILITY}
      />
    </Stack>
  </Story>
  <Story name="IconOnlyDanger">
    <Stack orientation={ORIENTATION.VERTICAL}>
      <Button
        icon={ICON_TYPE.POO_STORM}
        size={BUTTON_SIZE.LARGE}
        variant={BUTTON_VARIANT.DANGER}
      />
      <Button
        icon={ICON_TYPE.POO_STORM}
        size={BUTTON_SIZE.MEDIUM}
        variant={BUTTON_VARIANT.DANGER}
      />
    </Stack>
  </Story>
  <Story name="IconOnlyMinimal">
    <Stack orientation={ORIENTATION.VERTICAL}>
      <Button
        icon={ICON_TYPE.POO_STORM}
        size={BUTTON_SIZE.LARGE}
        variant={BUTTON_VARIANT.MINIMAL}
      />
      <Button
        icon={ICON_TYPE.POO_STORM}
        size={BUTTON_SIZE.MEDIUM}
        variant={BUTTON_VARIANT.MINIMAL}
      />
    </Stack>
  </Story>
</Preview>

### Block

By default, `Button` expands with its content. Block buttons span the full width available to them

<Preview>
  <Story name="Block">
    <Stack orientation={ORIENTATION.VERTICAL}>
      <Button block variant={BUTTON_VARIANT.PRIMARY}>
        Primary
      </Button>
      <Button block variant={BUTTON_VARIANT.SECONDARY}>
        Secondary
      </Button>
      <Button block variant={BUTTON_VARIANT.UTILITY}>
        Utility
      </Button>
      <Button block variant={BUTTON_VARIANT.DANGER}>
        Danger
      </Button>
      <Button block variant={BUTTON_VARIANT.MINIMAL}>
        Minimal
      </Button>
    </Stack>
  </Story>
</Preview>

### Depressed

A button may be programmatically set to the active state by using the `depressed` prop.

<Preview>
  <Story name="DepressedPrimary">
    <Button depressed variant={BUTTON_VARIANT.PRIMARY}>
      Primary
    </Button>
  </Story>
  <Story name="DepressedSecondary">
    <Button depressed variant={BUTTON_VARIANT.SECONDARY}>
      Secondary
    </Button>
  </Story>
  <Story name="DepressedUtility">
    <Button depressed variant={BUTTON_VARIANT.UTILITY}>
      Utility
    </Button>
  </Story>
  <Story name="DepressedDanger">
    <Button depressed variant={BUTTON_VARIANT.DANGER}>
      Danger
    </Button>
  </Story>
  <Story name="DepressedMinimal">
    <Button depressed variant={BUTTON_VARIANT.MINIMAL}>
      Minimal
    </Button>
  </Story>
</Preview>

### Disabled

<Preview>
  <Story name="DisabledPrimary">
    <Button disabled variant={BUTTON_VARIANT.PRIMARY}>
      Primary
    </Button>
  </Story>
  <Story name="DisabledSecondary">
    <Button disabled variant={BUTTON_VARIANT.SECONDARY}>
      Secondary
    </Button>
  </Story>
  <Story name="DisabledUtility">
    <Button disabled variant={BUTTON_VARIANT.UTILITY}>
      Utility
    </Button>
  </Story>
  <Story name="DisabledDanger">
    <Button disabled variant={BUTTON_VARIANT.DANGER}>
      Danger
    </Button>
  </Story>
  <Story name="DisabledMinimal">
    <Button disabled variant={BUTTON_VARIANT.MINIMAL}>
      Minimal
    </Button>
  </Story>
</Preview>

### Loading

Loading buttons are automatically disabled. They should be created by setting the `isLoading` prop instead of composed by manipulating the button icon appearance.

<Preview>
  <Story name="LoadingPrimary">
    <Button
      isLoading
      size={BUTTON_SIZE.MEDIUM}
      variant={BUTTON_VARIANT.PRIMARY}
    >
      Primary
    </Button>
  </Story>
  <Story name="LoadingSecondary">
    <Button
      isLoading
      size={BUTTON_SIZE.MEDIUM}
      variant={BUTTON_VARIANT.SECONDARY}
    >
      Secondary
    </Button>
  </Story>
  <Story name="LoadingUtility">
    <Button
      isLoading
      size={BUTTON_SIZE.MEDIUM}
      variant={BUTTON_VARIANT.UTILITY}
    >
      Utility
    </Button>
  </Story>
  <Story name="LoadingDanger">
    <Button isLoading size={BUTTON_SIZE.MEDIUM} variant={BUTTON_VARIANT.DANGER}>
      Danger
    </Button>
  </Story>
  <Story name="LoadingMinimal">
    <Button
      isLoading
      size={BUTTON_SIZE.MEDIUM}
      variant={BUTTON_VARIANT.MINIMAL}
    >
      Minimal
    </Button>
  </Story>
</Preview>

### Links that look like Buttons

Buttons can be rendered as other elements or components in the interest of semantic HTML. This is often used to use a button to trigger a route change by setting the button `as` prop to a router link component.

<Preview>
  <Story name="LinkPrimary">
    <Button as={Link} href="/link" variant={BUTTON_VARIANT.PRIMARY}>
      Primary
    </Button>
  </Story>
  <Story name="LinkSecondary">
    <Button as={Link} href="/link" variant={BUTTON_VARIANT.SECONDARY}>
      Secondary
    </Button>
  </Story>
  <Story name="LinkUtility">
    <Button as={Link} href="/link" variant={BUTTON_VARIANT.UTILITY}>
      Utility
    </Button>
  </Story>
  <Story name="LinkDanger">
    <Button as={Link} href="/link" variant={BUTTON_VARIANT.DANGER}>
      Danger
    </Button>
  </Story>
  <Story name="LinkMinimal">
    <Button as={Link} href="/link" variant={BUTTON_VARIANT.MINIMAL}>
      Minimal
    </Button>
  </Story>
</Preview>

### Buttons on backgrounds

<Preview isColumn>
  <Story name="White">
    <div className="flex items-center justify-between bg-white py-2 px-4">
      White
      <Button.Group>
        <Button variant={BUTTON_VARIANT.PRIMARY}>Primary</Button>
        <Button variant={BUTTON_VARIANT.SECONDARY}>Secondary</Button>
        <Button variant={BUTTON_VARIANT.UTILITY}>Utility</Button>
        <Button variant={BUTTON_VARIANT.DANGER}>Danger</Button>
        <Button variant={BUTTON_VARIANT.MINIMAL}>Minimal</Button>
      </Button.Group>
    </div>
  </Story>
  <Story name="GraysNot1">
    <div className="flex items-center justify-between bg-gray-100 py-2 px-4">
      Gray 100
      <Button.Group>
        <Button variant={BUTTON_VARIANT.PRIMARY}>Primary</Button>
        <Button variant={BUTTON_VARIANT.SECONDARY}>Secondary</Button>
        <Button variant={BUTTON_VARIANT.UTILITY}>Utility</Button>
        <Button variant={BUTTON_VARIANT.DANGER}>Danger</Button>
        <Button variant={BUTTON_VARIANT.MINIMAL}>Minimal</Button>
      </Button.Group>
    </div>
  </Story>
  <Story name="Grays 0">
    <div className="flex items-center justify-between bg-gray-200 py-2 px-4">
      Gray 200
      <Button.Group>
        <Button variant={BUTTON_VARIANT.PRIMARY}>Primary</Button>
        <Button variant={BUTTON_VARIANT.SECONDARY}>Secondary</Button>
        <Button variant={BUTTON_VARIANT.UTILITY}>Utility</Button>
        <Button variant={BUTTON_VARIANT.DANGER}>Danger</Button>
        <Button variant={BUTTON_VARIANT.MINIMAL}>Minimal</Button>
      </Button.Group>
    </div>
  </Story>
  <Story name="Grays 1">
    <div className="flex items-center justify-between bg-gray-400 py-2 px-4">
      Gray 400
      <Button.Group>
        <Button variant={BUTTON_VARIANT.PRIMARY}>Primary</Button>
        <Button variant={BUTTON_VARIANT.SECONDARY}>Secondary</Button>
        <Button variant={BUTTON_VARIANT.UTILITY}>Utility</Button>
        <Button variant={BUTTON_VARIANT.DANGER}>Danger</Button>
        <Button variant={BUTTON_VARIANT.MINIMAL}>Minimal</Button>
      </Button.Group>
    </div>
  </Story>
</Preview>

## `Button.Group` Demos

### Full-width

Makes the buttons fill the entire width of the surrounding container.

<Preview>
  <Story name="Full-width">
    <Button.Group isFullWidth>
      <Button variant={BUTTON_VARIANT.SECONDARY}>Edit</Button>
      <Button variant={BUTTON_VARIANT.SECONDARY}>Copy</Button>
      <Button variant={BUTTON_VARIANT.SECONDARY}>Delete</Button>
      <Button variant={BUTTON_VARIANT.SECONDARY}>Save</Button>
    </Button.Group>
  </Story>
</Preview>

### Justify around

<Preview>
  <Story name="Justify around">
    <Button.Group justify={JUSTIFY.AROUND}>
      <Button variant={BUTTON_VARIANT.SECONDARY}>Edit</Button>
      <Button variant={BUTTON_VARIANT.SECONDARY}>Copy</Button>
      <Button variant={BUTTON_VARIANT.SECONDARY}>Delete</Button>
      <Button variant={BUTTON_VARIANT.SECONDARY}>Save</Button>
    </Button.Group>
  </Story>
</Preview>

### Justify between

<Preview>
  <Story name="Justify between">
    <Button.Group justify={JUSTIFY.BETWEEN}>
      <Button variant={BUTTON_VARIANT.SECONDARY}>Edit</Button>
      <Button variant={BUTTON_VARIANT.SECONDARY}>Copy</Button>
      <Button variant={BUTTON_VARIANT.SECONDARY}>Delete</Button>
      <Button variant={BUTTON_VARIANT.SECONDARY}>Save</Button>
    </Button.Group>
  </Story>
</Preview>

### Justify center

<Preview>
  <Story name="Justify center">
    <Button.Group justify={JUSTIFY.CENTER}>
      <Button variant={BUTTON_VARIANT.SECONDARY}>Edit</Button>
      <Button variant={BUTTON_VARIANT.SECONDARY}>Copy</Button>
      <Button variant={BUTTON_VARIANT.SECONDARY}>Delete</Button>
      <Button variant={BUTTON_VARIANT.SECONDARY}>Save</Button>
    </Button.Group>
  </Story>
</Preview>

### Justify end

<Preview>
  <Story name="Justify end">
    <Button.Group justify={JUSTIFY.END}>
      <Button variant={BUTTON_VARIANT.SECONDARY}>Edit</Button>
      <Button variant={BUTTON_VARIANT.SECONDARY}>Copy</Button>
      <Button variant={BUTTON_VARIANT.SECONDARY}>Delete</Button>
      <Button variant={BUTTON_VARIANT.SECONDARY}>Save</Button>
    </Button.Group>
  </Story>
</Preview>

### Segmented

<Preview>
  <Story name="Segmented">
    <Button.Group isSegmented>
      <Button>Add Document</Button>
      <Button icon={ICON_TYPE.CARET_DOWN} />
    </Button.Group>
  </Story>
</Preview>