"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.nested = exports.spacing = exports.commonLayouts = exports.media = exports.defaultMaxInlineSize = exports.defaultSizes = exports.blockAlignment = exports.inlineAlignment = exports.defaultState = void 0;
const react_1 = __importDefault(require("react"));
const View_1 = require("../View");
const Text_1 = require("../Text");
const BlockStack_1 = require("../BlockStack");
const Spinner_1 = require("../Spinner");
const Layout_1 = require("./Layout");
const meta = {
    component: Layout_1.Layout,
    title: 'checkout-web-ui/Layout',
};
exports.default = meta;
function ExampleContent() {
    return (<div style={{
        backgroundColor: 'lightgrey',
        border: '1px #000 solid',
        padding: '1em',
    }}>
      Content block Lorem, ipsum dolor sit amet consectetur adipisicing elit.
      Distinctio nemo in ex illo debitis necessitatibus sunt molestiae earum
      nesciunt alias praesentium, explicabo hic eveniet corporis harum nihil
      quidem vero eius.
    </div>);
}
function ExampleSmallContent() {
    return (<div style={{
        backgroundColor: 'lightgrey',
        border: '1px #000 solid',
        padding: '1em',
        width: '100%',
    }}>
      Content block
    </div>);
}
function ExampleBox({ children }) {
    return (<div style={{
        height: '500px',
        border: '1px grey dotted',
    }}>
      {children}
    </div>);
}
exports.defaultState = () => (<>
    <Text_1.Text>Default with small content</Text_1.Text>
    <Layout_1.Layout>
      <View_1.View>
        <ExampleSmallContent />
      </View_1.View>
      <View_1.View>
        <ExampleSmallContent />
      </View_1.View>
    </Layout_1.Layout>

    <Text_1.Text>Default with large content</Text_1.Text>
    <Layout_1.Layout>
      <View_1.View>
        <ExampleContent />
      </View_1.View>
      <View_1.View>
        <ExampleContent />
      </View_1.View>
    </Layout_1.Layout>
  </>);
exports.inlineAlignment = () => (<>
    <Text_1.Text>Default (center)</Text_1.Text>
    <Layout_1.Layout>
      <ExampleSmallContent />
      <ExampleSmallContent />
    </Layout_1.Layout>

    <Text_1.Text>Leading</Text_1.Text>
    <Layout_1.Layout inlineAlignment="leading">
      <ExampleSmallContent />
      <ExampleSmallContent />
    </Layout_1.Layout>

    <Text_1.Text>Trailing</Text_1.Text>
    <Layout_1.Layout inlineAlignment="trailing">
      <ExampleSmallContent />
      <ExampleSmallContent />
    </Layout_1.Layout>
  </>);
exports.blockAlignment = () => (<>
    <Text_1.Text>Default (leading)</Text_1.Text>
    <ExampleBox>
      <Layout_1.Layout>
        <ExampleContent />
        <ExampleContent />
      </Layout_1.Layout>
    </ExampleBox>

    <Text_1.Text>Center</Text_1.Text>
    <ExampleBox>
      <Layout_1.Layout blockAlignment="center">
        <ExampleContent />
        <ExampleContent />
      </Layout_1.Layout>
    </ExampleBox>

    <Text_1.Text>Trailing</Text_1.Text>
    <ExampleBox>
      <Layout_1.Layout blockAlignment="trailing">
        <ExampleContent />
        <ExampleContent />
      </Layout_1.Layout>
    </ExampleBox>
  </>);
exports.defaultSizes = () => (<>
    <Text_1.Text>
      2 columns - <code>[0.75, 0.25]</code>
    </Text_1.Text>
    <Layout_1.Layout sizes={[0.75, 0.25]}>
      <ExampleSmallContent />
      <ExampleContent />
    </Layout_1.Layout>

    <Text_1.Text>
      2 columns - <code>[500, 300]</code>
    </Text_1.Text>
    <Layout_1.Layout sizes={[500, 300]}>
      <ExampleSmallContent />
      <ExampleContent />
    </Layout_1.Layout>

    <Text_1.Text>
      2 columns - <code>0.5, 200]</code>
    </Text_1.Text>
    <Layout_1.Layout sizes={[0.5, 200]}>
      <ExampleSmallContent />
      <ExampleContent />
    </Layout_1.Layout>

    <Text_1.Text>
      2 columns that would overflow - <code>[0.75, 0.5]</code>
    </Text_1.Text>
    <Layout_1.Layout sizes={[0.75, 0.5]}>
      <ExampleSmallContent />
      <ExampleContent />
    </Layout_1.Layout>

    <Text_1.Text>
      2 columns that would overflow - <code>[1000, 2000]</code>
    </Text_1.Text>
    <Layout_1.Layout sizes={[1000, 2000]}>
      <ExampleSmallContent />
      <ExampleContent />
    </Layout_1.Layout>

    <Text_1.Text>
      3 columns - <code>[auto, auto, auto]</code>
    </Text_1.Text>
    <Layout_1.Layout sizes={['auto', 'auto', 'auto']}>
      <ExampleSmallContent />
      <ExampleSmallContent />
      <ExampleSmallContent />
    </Layout_1.Layout>

    <Text_1.Text>
      3 columns - <code>[0.5, 0.25, 0.25]</code>
    </Text_1.Text>
    <Layout_1.Layout sizes={[0.5, 0.25, 0.25]}>
      <ExampleSmallContent />
      <ExampleContent />
      <ExampleSmallContent />
    </Layout_1.Layout>

    <Text_1.Text>
      3 columns - <code>[0.5, auto, auto]</code>
    </Text_1.Text>
    <Layout_1.Layout sizes={[0.5, 'auto', 'auto']}>
      <ExampleSmallContent />
      <ExampleContent />
      <ExampleSmallContent />
    </Layout_1.Layout>

    <Text_1.Text>
      3 columns - <code>[500, auto, fill]</code>
    </Text_1.Text>
    <Layout_1.Layout sizes={[500, 'auto', 'fill']}>
      <ExampleSmallContent />
      <ExampleSmallContent />
      <ExampleContent />
    </Layout_1.Layout>

    <Text_1.Text>
      3 columns - <code>[auto, auto, fill]</code>
    </Text_1.Text>
    <Layout_1.Layout sizes={['auto', 'auto', 'fill']}>
      <ExampleContent />
      <ExampleContent />
      <ExampleSmallContent />
    </Layout_1.Layout>

    <Text_1.Text>
      3 rows - <code>[1, 1, 1]</code>
    </Text_1.Text>
    <Layout_1.Layout sizes={[1, 1, 1]}>
      <ExampleSmallContent />
      <ExampleContent />
      <ExampleSmallContent />
    </Layout_1.Layout>

    <Text_1.Text>
      3 columns/rows mix - <code>[1, auto, fill]</code>
    </Text_1.Text>
    <Layout_1.Layout sizes={[1, 'auto', 'fill']}>
      <ExampleSmallContent />
      <ExampleSmallContent />
      <ExampleSmallContent />
    </Layout_1.Layout>
  </>);
exports.defaultMaxInlineSize = () => (<>
    <Text_1.Text>
      2 columns - <code>[0.5, 0.5]</code> maxInlineSize <code>default</code>
    </Text_1.Text>
    <Layout_1.Layout sizes={[0.5, 0.5]}>
      <ExampleSmallContent />
      <ExampleContent />
    </Layout_1.Layout>

    <Text_1.Text>
      2 columns - <code>[0.5, 0.5]</code> maxInlineSize <code>800px</code>
    </Text_1.Text>
    <Layout_1.Layout maxInlineSize={800} sizes={[0.5, 0.5]}>
      <ExampleSmallContent />
      <ExampleContent />
    </Layout_1.Layout>

    <Text_1.Text>
      2 columns - <code>[0.5, 0.5]</code> maxInlineSize <code>75%</code>
    </Text_1.Text>
    <Layout_1.Layout maxInlineSize={0.75} sizes={[0.5, 0.5]}>
      <ExampleSmallContent />
      <ExampleContent />
    </Layout_1.Layout>

    <Text_1.Text>
      2 columns - <code>[0.5, 0.5]</code> maxInlineSize <code>800px</code>{' '}
      inlineAlignment <code>leading</code>
    </Text_1.Text>
    <Layout_1.Layout maxInlineSize={800} sizes={[0.5, 0.5]} inlineAlignment="leading">
      <ExampleSmallContent />
      <ExampleContent />
    </Layout_1.Layout>

    <Text_1.Text>
      2 columns - <code>[0.5, 0.5]</code> maxInlineSize <code>75%</code>{' '}
      inlineAlignment <code>trailing</code>
    </Text_1.Text>
    <Layout_1.Layout maxInlineSize={0.75} sizes={[0.5, 0.5]} inlineAlignment="trailing">
      <ExampleSmallContent />
      <ExampleContent />
    </Layout_1.Layout>
  </>);
exports.media = () => (<>
    <Text_1.Text>
      Default 2 columns - <code>[1, 1]</code>
      <br /> Media above small 2 rows - <code>
        [0.75, 0.25]
      </code> maxInlineSize: <code>95%</code> spacing: <code>extraTight</code>
      <br /> Media above medium 2 rows - <code>
        [0.5, 0.5]
      </code> maxInlineSize: <code>85%</code> spacing: <code>base</code>
      <br /> Media above large 2 rows - <code>
        [0.25, 0.75]
      </code> maxInlineSize: <code>75%</code> spacing: <code>extraLoose</code>
    </Text_1.Text>
    <Layout_1.Layout sizes={{
    base: [1, 1],
    small: [0.75, 0.25],
    medium: [0.5, 0.5],
    large: [0.25, 0.75],
}} maxInlineSize={{ small: 0.95, medium: 0.85, large: 0.75 }} spacing={{ small: 'extraTight', medium: 'base', large: 'extraLoose' }}>
      <ExampleSmallContent />
      <ExampleContent />
    </Layout_1.Layout>
  </>);
exports.commonLayouts = () => (<>
    <Text_1.Text>Checkout</Text_1.Text>
    <ExampleBox>
      <Layout_1.Layout sizes={[0.5, 0.5]}>
        <View_1.View padding="base">
          <Layout_1.Layout maxInlineSize={500} inlineAlignment="trailing">
            <ExampleSmallContent />
          </Layout_1.Layout>
        </View_1.View>
        <View_1.View padding="base">
          <Layout_1.Layout maxInlineSize={500} inlineAlignment="leading">
            <ExampleContent />
          </Layout_1.Layout>
        </View_1.View>
      </Layout_1.Layout>
    </ExampleBox>

    <Text_1.Text>Siberia</Text_1.Text>
    <ExampleBox>
      <Layout_1.Layout sizes={[0.5, 0.5]} maxInlineSize={925} blockAlignment="center">
        <View_1.View padding="base">Main</View_1.View>
        <View_1.View padding="base">Sidebar</View_1.View>
      </Layout_1.Layout>
    </ExampleBox>

    <Text_1.Text>Centered</Text_1.Text>
    <ExampleBox>
      <Layout_1.Layout blockAlignment="center">
        <BlockStack_1.BlockStack alignment="center">
          <Spinner_1.Spinner />
          <Text_1.Text>Lorem ipsum dolor sit amet consectetur adipisicing elit.</Text_1.Text>
        </BlockStack_1.BlockStack>
      </Layout_1.Layout>
    </ExampleBox>
  </>);
exports.spacing = () => (<>
    <Text_1.Text>ExtraTight</Text_1.Text>
    <Layout_1.Layout spacing="extraTight" sizes={[1, 0.5, 0.5]}>
      <ExampleSmallContent />
      <ExampleSmallContent />
      <ExampleSmallContent />
    </Layout_1.Layout>

    <Text_1.Text>Tight</Text_1.Text>
    <Layout_1.Layout spacing="tight" sizes={[1, 0.5, 0.5]}>
      <ExampleSmallContent />
      <ExampleSmallContent />
      <ExampleSmallContent />
    </Layout_1.Layout>

    <Text_1.Text>Base</Text_1.Text>
    <Layout_1.Layout spacing="base" sizes={[1, 0.5, 0.5]}>
      <ExampleSmallContent />
      <ExampleSmallContent />
      <ExampleSmallContent />
    </Layout_1.Layout>

    <Text_1.Text>Loose</Text_1.Text>
    <Layout_1.Layout spacing="loose" sizes={[1, 0.5, 0.5]}>
      <ExampleSmallContent />
      <ExampleSmallContent />
      <ExampleSmallContent />
    </Layout_1.Layout>

    <Text_1.Text>ExtraLoose</Text_1.Text>
    <Layout_1.Layout spacing="extraLoose" sizes={[1, 0.5, 0.5]}>
      <ExampleSmallContent />
      <ExampleSmallContent />
      <ExampleSmallContent />
    </Layout_1.Layout>
  </>);
exports.nested = () => (<Layout_1.Layout sizes={[1, 1, 1]} spacing="base">
    <ExampleSmallContent />
    <Layout_1.Layout sizes={[0.25, 0.75]} spacing="base">
      <ExampleSmallContent />
      <ExampleSmallContent />
    </Layout_1.Layout>
    <ExampleSmallContent />
  </Layout_1.Layout>);