import { Meta, Preview, Story } from "@storybook/addon-docs/blocks";
import { Button, BUTTON_VARIANT, BUTTON_SIZE } from "../../components/Button";
import { Stack } from "../../components/Stack";
import { THEME, ORIENTATION } from "../../types";
import { ThemeContext } from "../../contexts/theme";

export const decorators = [
  (storyFn) => <div className="p-4 bg-gray-900">{storyFn()}</div>,
];

<Meta
  title="Components/Buttons/Button (Branded)"
  component={Button}
  decorators={decorators}
/>

# Brand Button

The [`Button`](/?path=/docs/components-buttons-button--button) component is also available in a `brand` theme variant. Supported functionaliy for the brand theme `Button` is shown below. If a `Button` is within a `ThemeContext.Provider`, it will automatically use that as its `theme`. To override this, provide a value to the `Button`'s `theme` prop.

<Preview>
  <Story name="BrandedButton">
    <ThemeContext.Provider value={THEME.BRAND}>
      <Button>Brand Button</Button>
    </ThemeContext.Provider>
  </Story>
</Preview>

## Demos

### Variants

<Preview>
  <Story name="BrandedVariants">
    <ThemeContext.Provider value={THEME.BRAND}>
      <Stack reverse>
        <Button variant={BUTTON_VARIANT.PRIMARY}>Primary</Button>
        <Button variant={BUTTON_VARIANT.SECONDARY}>Secondary</Button>
      </Stack>
    </ThemeContext.Provider>
  </Story>
</Preview>

### Sizes

<Preview>
  <Story name="SizesPrimary">
    <ThemeContext.Provider value={THEME.BRAND}>
      <Stack orientation={ORIENTATION.VERTICAL}>
        <Button theme={THEME.BRAND} size={BUTTON_SIZE.LARGE}>
          Large
        </Button>
        <Button theme={THEME.BRAND}>Medium</Button>
      </Stack>
    </ThemeContext.Provider>
  </Story>
  <Story name="SizesSecondary">
    <ThemeContext.Provider value={THEME.BRAND}>
      <Stack orientation={ORIENTATION.VERTICAL}>
        <Button
          theme={THEME.BRAND}
          size={BUTTON_SIZE.LARGE}
          variant={BUTTON_VARIANT.SECONDARY}
        >
          Large
        </Button>
        <Button theme={THEME.BRAND} variant={BUTTON_VARIANT.SECONDARY}>
          Medium
        </Button>
      </Stack>
    </ThemeContext.Provider>
  </Story>
</Preview>

### Depressed

<Preview>
  <Story name="Depressed">
    <ThemeContext.Provider value={THEME.BRAND}>
      <Button depressed>Depressed</Button>
    </ThemeContext.Provider>
  </Story>
</Preview>

### Disabled

<Preview>
  <Story name="Disabled">
    <ThemeContext.Provider value={THEME.BRAND}>
      <Button disabled>Disabled</Button>
    </ThemeContext.Provider>
  </Story>
</Preview>

### Loading

<Preview>
  <Story name="Loading">
    <ThemeContext.Provider value={THEME.BRAND}>
      <Button isLoading>Loading</Button>
    </ThemeContext.Provider>
  </Story>
</Preview>