"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.withControls = exports.alignment = exports.blockSpacing = exports.width = exports.vertical = exports.defaultState = void 0;
const react_1 = __importDefault(require("react"));
const addon_knobs_1 = require("@storybook/addon-knobs");
const faker_1 = __importDefault(require("faker"));
const storybook_utilities_1 = require("../../storybook-utilities");
const BlockStack_1 = require("../BlockStack");
const InlineStack_1 = require("../InlineStack");
const Text_1 = require("../Text");
const View_1 = require("../View");
const Divider_1 = require("./Divider");
const meta = {
    component: Divider_1.Divider,
    title: 'checkout-web-ui/Divider',
    decorators: [addon_knobs_1.withKnobs, storybook_utilities_1.themeWithKnobs('colors')],
    argTypes: {
        width: {
            control: {
                type: 'select',
                options: [undefined, 'thin', 'medium', 'thick', 'extraThick'],
            },
        },
        blockSpacing: {
            control: {
                type: 'select',
                options: [
                    undefined,
                    'none',
                    'extraTight',
                    'tight',
                    'base',
                    'loose',
                    'extraLoose',
                ],
            },
        },
        alignment: {
            control: {
                type: 'select',
                options: [undefined, 'start', 'center', 'end'],
            },
        },
    },
};
exports.default = meta;
function Content() {
    return <Text_1.Text>Hello, world!</Text_1.Text>;
}
function ChildContent() {
    return (<>
      <Text_1.Text subdued>Hello, </Text_1.Text>
      <Text_1.Text emphasized>world!</Text_1.Text>
    </>);
}
function LoremIpsum() {
    return (<View_1.View border="dotted" display="block">
      <Text_1.Text subdued>{faker_1.default.lorem.words(20)}</Text_1.Text>
    </View_1.View>);
}
exports.defaultState = () => (<BlockStack_1.BlockStack>
    <Content />
    <Divider_1.Divider />
    <Content />
  </BlockStack_1.BlockStack>);
exports.vertical = () => (<InlineStack_1.InlineStack>
    <Content />
    <Divider_1.Divider direction="vertical"/>
    <Content />
  </InlineStack_1.InlineStack>);
exports.width = () => (<BlockStack_1.BlockStack>
    <Content />
    <Divider_1.Divider />
    <Content />
    <Divider_1.Divider width="medium"/>
    <Content />
    <Divider_1.Divider width="thick"/>
    <Content />
    <Divider_1.Divider width="extraThick"/>
    <InlineStack_1.InlineStack>
      <Content />
      <Divider_1.Divider direction="vertical"/>
      <Content />
      <Divider_1.Divider direction="vertical" width="medium"/>
      <Content />
      <Divider_1.Divider direction="vertical" width="thick"/>
      <Content />
      <Divider_1.Divider direction="vertical" width="extraThick"/>
      <Content />
    </InlineStack_1.InlineStack>
  </BlockStack_1.BlockStack>);
exports.blockSpacing = () => (<>
    <View_1.View display="block" border="dotted" padding="loose">
      <Content />
      <Divider_1.Divider blockSpacing="none"/>
      <Content />
      <Divider_1.Divider blockSpacing="extraTight"/>
      <Content />
      <Divider_1.Divider blockSpacing="tight"/>
      <Content />
      <Divider_1.Divider blockSpacing="base"/>
      <Content />
      <Divider_1.Divider blockSpacing="loose"/>
      <Content />
      <Divider_1.Divider blockSpacing="extraLoose"/>
      <Content />
    </View_1.View>
    <br />
    <View_1.View display="block" border="dotted" padding="loose">
      <InlineStack_1.InlineStack spacing="none">
        <LoremIpsum />
        <Divider_1.Divider direction="vertical" blockSpacing="none"/>
        <LoremIpsum />
        <Divider_1.Divider direction="vertical" blockSpacing="extraTight"/>
        <LoremIpsum />
        <Divider_1.Divider direction="vertical" blockSpacing="tight"/>
        <LoremIpsum />
        <Divider_1.Divider direction="vertical" blockSpacing="base"/>
        <LoremIpsum />
        <Divider_1.Divider direction="vertical" blockSpacing="loose"/>
        <LoremIpsum />
        <Divider_1.Divider direction="vertical" blockSpacing="extraLoose"/>
        <LoremIpsum />
      </InlineStack_1.InlineStack>
    </View_1.View>
  </>);
exports.alignment = () => (<>
    <Text_1.Text subdued>With alignment, width, children</Text_1.Text>
    <View_1.View display="block" padding="loose" border="dotted">
      <BlockStack_1.BlockStack spacing="extraLoose">
        <Divider_1.Divider direction="horizontal" width="thin" alignment="center">
          <ChildContent />
        </Divider_1.Divider>
        <Divider_1.Divider direction="horizontal" width="medium" alignment="center">
          <ChildContent />
        </Divider_1.Divider>
        <Divider_1.Divider direction="horizontal" width="thick" alignment="start">
          <ChildContent />
        </Divider_1.Divider>
        <Divider_1.Divider direction="horizontal" width="extraThick" alignment="end">
          <ChildContent />
        </Divider_1.Divider>
      </BlockStack_1.BlockStack>
    </View_1.View>
    <br />
    <Text_1.Text subdued>With direction vertical, alignment, width, children</Text_1.Text>
    <View_1.View display="block" padding="loose" border="dotted">
      <InlineStack_1.InlineStack alignment="center" spacing="extraLoose">
        <Divider_1.Divider direction="vertical" width="extraThick" alignment="start">
          <Content />
        </Divider_1.Divider>
        <LoremIpsum />
        <Divider_1.Divider direction="vertical" width="thick" alignment="center">
          <Content />
        </Divider_1.Divider>
        <LoremIpsum />
        <Divider_1.Divider direction="vertical" width="medium" alignment="end">
          <Content />
        </Divider_1.Divider>
        <LoremIpsum />
        <Divider_1.Divider direction="vertical" width="thin" alignment="end">
          <Content />
        </Divider_1.Divider>
      </InlineStack_1.InlineStack>
    </View_1.View>
  </>);
exports.withControls = (props) => (<View_1.View>
    <Content />
    <Divider_1.Divider {...props}/>
    <Content />
  </View_1.View>);
exports.withControls.args = {
    width: undefined,
    blockSpacing: undefined,
    children: '',
    alignment: undefined,
};