"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.AllButtons = exports.ButtonStory = void 0;
const react_1 = __importDefault(require("react"));
const addon_knobs_1 = require("@storybook/addon-knobs");
const storybook_utilities_1 = require("../../storybook-utilities");
const ButtonGroup_1 = require("../ButtonGroup");
const Heading_1 = require("../Heading");
const BlockStack_1 = require("../BlockStack");
const TextBlock_1 = require("../TextBlock");
const TextContainer_1 = require("../TextContainer");
const Divider_1 = require("../Divider");
const Banner_1 = require("../Banner");
const InlineStack_1 = require("../InlineStack");
const View_1 = require("../View");
const Button_1 = require("./Button");
const meta = {
    component: Button_1.Button,
    title: 'checkout-web-ui/Button',
    decorators: [addon_knobs_1.withKnobs, storybook_utilities_1.themeWithKnobs('primaryButton', 'secondaryButton')],
    argTypes: {
        kind: {
            control: {
                type: 'select',
                options: [undefined, 'primary', 'secondary', 'plain'],
            },
        },
        appearance: {
            control: {
                type: 'select',
                options: [undefined, 'monochrome', 'critical'],
            },
        },
        size: {
            control: {
                type: 'select',
                options: [undefined, 'base', 'large'],
            },
        },
    },
};
exports.default = meta;
exports.ButtonStory = (args) => <Button_1.Button {...args}>Button</Button_1.Button>;
exports.ButtonStory.args = {
    kind: 'primary',
    size: 'base',
    appearance: undefined,
    to: 'javascript:;',
    fill: false,
    loading: false,
    loadingLabel: 'Processing…',
    accessibilityLabel: '',
    disabled: false,
};
exports.ButtonStory.story = {
    name: 'Button',
};
const content = 'Pay now';
exports.AllButtons = () => (<BlockStack_1.BlockStack>
    <TextContainer_1.TextContainer spacing="none">
      <Heading_1.Heading level={3}>Type</Heading_1.Heading>
      <TextBlock_1.TextBlock subdued>primary - secondary - plain</TextBlock_1.TextBlock>
    </TextContainer_1.TextContainer>
    <ButtonGroup_1.ButtonGroup>
      <Button_1.Button kind="primary">{content}</Button_1.Button>
      <Button_1.Button kind="secondary">{content}</Button_1.Button>
      <Button_1.Button kind="plain">{content}</Button_1.Button>
    </ButtonGroup_1.ButtonGroup>

    <Divider_1.Divider />

    <TextContainer_1.TextContainer spacing="none">
      <Heading_1.Heading level={3}>Size</Heading_1.Heading>
      <TextBlock_1.TextBlock subdued>base - large - extraLarge</TextBlock_1.TextBlock>
    </TextContainer_1.TextContainer>
    <ButtonGroup_1.ButtonGroup>
      <Button_1.Button>{content}</Button_1.Button>
      <Button_1.Button size="large">{content}</Button_1.Button>
      <Button_1.Button size="extraLarge">{content}</Button_1.Button>
    </ButtonGroup_1.ButtonGroup>

    <TextContainer_1.TextContainer spacing="none">
      <Heading_1.Heading level={3}>Responsive size</Heading_1.Heading>
      <TextBlock_1.TextBlock subdued>
        Default: <code>extraLarge</code>
        <br /> Media small: <code>large</code>
        <br /> Media medium: <code>base</code>
        <br /> Media large: <code>base</code>
      </TextBlock_1.TextBlock>
    </TextContainer_1.TextContainer>
    <View_1.View>
      <Button_1.Button size={{
    base: 'extraLarge',
    small: 'large',
    medium: 'base',
    large: 'base',
}}>
        {content}
      </Button_1.Button>
    </View_1.View>

    <Divider_1.Divider />

    <TextContainer_1.TextContainer spacing="none">
      <Heading_1.Heading level={3}>Appearance</Heading_1.Heading>
      <TextBlock_1.TextBlock subdued>monochrome - critical</TextBlock_1.TextBlock>
    </TextContainer_1.TextContainer>
    <ButtonGroup_1.ButtonGroup>
      <Button_1.Button appearance="monochrome">{content}</Button_1.Button>
      <Button_1.Button kind="secondary" appearance="monochrome">
        {content}
      </Button_1.Button>
      <Button_1.Button kind="plain" appearance="monochrome">
        {content}
      </Button_1.Button>
    </ButtonGroup_1.ButtonGroup>
    <ButtonGroup_1.ButtonGroup>
      <Button_1.Button appearance="critical">{content}</Button_1.Button>
      <Button_1.Button kind="secondary" appearance="critical">
        {content}
      </Button_1.Button>
      <Button_1.Button kind="plain" appearance="critical">
        {content}
      </Button_1.Button>
    </ButtonGroup_1.ButtonGroup>

    <Divider_1.Divider />

    <Heading_1.Heading level={3}>Disabled</Heading_1.Heading>
    <ButtonGroup_1.ButtonGroup>
      <Button_1.Button disabled>{content}</Button_1.Button>
      <Button_1.Button kind="secondary" disabled>
        {content}
      </Button_1.Button>
      <Button_1.Button kind="plain" disabled>
        {content}
      </Button_1.Button>
    </ButtonGroup_1.ButtonGroup>
    <ButtonGroup_1.ButtonGroup>
      <Button_1.Button disabled appearance="monochrome">
        {content}
      </Button_1.Button>
      <Button_1.Button kind="secondary" disabled appearance="monochrome">
        {content}
      </Button_1.Button>
      <Button_1.Button kind="plain" disabled appearance="monochrome">
        {content}
      </Button_1.Button>
    </ButtonGroup_1.ButtonGroup>
    <ButtonGroup_1.ButtonGroup>
      <Button_1.Button disabled appearance="critical">
        {content}
      </Button_1.Button>
      <Button_1.Button kind="secondary" disabled appearance="critical">
        {content}
      </Button_1.Button>
      <Button_1.Button kind="plain" disabled appearance="critical">
        {content}
      </Button_1.Button>
    </ButtonGroup_1.ButtonGroup>

    <Divider_1.Divider />

    <Heading_1.Heading level={3}>Loading</Heading_1.Heading>
    <ButtonGroup_1.ButtonGroup>
      <Button_1.Button loading disabled>
        {content}
      </Button_1.Button>
      <Button_1.Button loading kind="secondary" disabled>
        {content}
      </Button_1.Button>
      <Button_1.Button loading kind="plain" disabled>
        {content}
      </Button_1.Button>
    </ButtonGroup_1.ButtonGroup>
    <ButtonGroup_1.ButtonGroup>
      <Button_1.Button loading disabled appearance="monochrome">
        {content}
      </Button_1.Button>
      <Button_1.Button loading kind="secondary" disabled appearance="monochrome">
        {content}
      </Button_1.Button>
      <Button_1.Button loading kind="plain" disabled appearance="monochrome">
        {content}
      </Button_1.Button>
    </ButtonGroup_1.ButtonGroup>
    <ButtonGroup_1.ButtonGroup>
      <Button_1.Button loading disabled appearance="critical">
        {content}
      </Button_1.Button>
      <Button_1.Button loading kind="secondary" disabled appearance="critical">
        {content}
      </Button_1.Button>
      <Button_1.Button loading kind="plain" disabled appearance="critical">
        {content}
      </Button_1.Button>
    </ButtonGroup_1.ButtonGroup>

    <Divider_1.Divider />

    <TextContainer_1.TextContainer spacing="none">
      <Heading_1.Heading level={3}>Appearance</Heading_1.Heading>
      <TextBlock_1.TextBlock subdued>monochrome inside Banner</TextBlock_1.TextBlock>
    </TextContainer_1.TextContainer>
    <Banner_1.Banner status="info" title="This is a title">
      <InlineStack_1.InlineStack alignment="center">
        <Button_1.Button kind="primary" appearance="monochrome">
          {content}
        </Button_1.Button>
        <Button_1.Button kind="secondary" appearance="monochrome">
          {content}
        </Button_1.Button>
        <Button_1.Button kind="plain" appearance="monochrome">
          {content}
        </Button_1.Button>
      </InlineStack_1.InlineStack>
    </Banner_1.Banner>

    <Banner_1.Banner status="warning" title="This is a title">
      <InlineStack_1.InlineStack alignment="center">
        <Button_1.Button kind="primary" appearance="monochrome">
          {content}
        </Button_1.Button>
        <Button_1.Button kind="secondary" appearance="monochrome">
          {content}
        </Button_1.Button>
        <Button_1.Button kind="plain" appearance="monochrome">
          {content}
        </Button_1.Button>
      </InlineStack_1.InlineStack>
    </Banner_1.Banner>

    <Banner_1.Banner status="critical" title="This is a title">
      <InlineStack_1.InlineStack alignment="center">
        <Button_1.Button kind="primary" appearance="monochrome">
          {content}
        </Button_1.Button>
        <Button_1.Button kind="secondary" appearance="monochrome">
          {content}
        </Button_1.Button>
        <Button_1.Button kind="plain" appearance="monochrome">
          {content}
        </Button_1.Button>
      </InlineStack_1.InlineStack>
    </Banner_1.Banner>

    <Banner_1.Banner status="success" title="This is a title">
      <InlineStack_1.InlineStack alignment="center">
        <Button_1.Button kind="primary" appearance="monochrome">
          {content}
        </Button_1.Button>
        <Button_1.Button kind="secondary" appearance="monochrome">
          {content}
        </Button_1.Button>
        <Button_1.Button kind="plain" appearance="monochrome">
          {content}
        </Button_1.Button>
      </InlineStack_1.InlineStack>
    </Banner_1.Banner>
  </BlockStack_1.BlockStack>);