"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.breakAt = exports.maxPerLine = exports.Alignment = exports.Spacing = exports.allProps = exports.defaultState = void 0;
const react_1 = __importDefault(require("react"));
const View_1 = require("../View");
const Tiles_1 = require("./Tiles");
const meta = {
    component: Tiles_1.Tiles,
    title: 'checkout-web-ui/Tiles',
};
exports.default = meta;
function ExampleTile() {
    return (<View_1.View>
      <View_1.View background="surfaceSecondary" border="base" padding="base">
        Content block
      </View_1.View>
    </View_1.View>);
}
function LongExampleTile() {
    return (<View_1.View>
      <View_1.View background="surfaceSecondary" border="base" padding="base">
        This is a long content block that wraps on multiple lines. This is a
        long content block that wraps on multiple lines.
      </View_1.View>
    </View_1.View>);
}
exports.defaultState = () => (<Tiles_1.Tiles>
    <ExampleTile />
    <LongExampleTile />
    <ExampleTile />
    <ExampleTile />
    <ExampleTile />
    <ExampleTile />
  </Tiles_1.Tiles>);
exports.allProps = () => (<Tiles_1.Tiles spacing="extraTight" maxPerLine={4} breakAt={600} alignment="center">
    <ExampleTile />
    <LongExampleTile />
    <ExampleTile />
    <ExampleTile />
    <LongExampleTile />
    <ExampleTile />
  </Tiles_1.Tiles>);
exports.Spacing = () => (<>
    <Tiles_1.Tiles spacing="none">
      <ExampleTile />
      <ExampleTile />
      <ExampleTile />
      <ExampleTile />
    </Tiles_1.Tiles>
    <Tiles_1.Tiles spacing="extraTight">
      <ExampleTile />
      <ExampleTile />
      <ExampleTile />
      <ExampleTile />
    </Tiles_1.Tiles>
    <Tiles_1.Tiles spacing="tight">
      <ExampleTile />
      <ExampleTile />
      <ExampleTile />
      <ExampleTile />
    </Tiles_1.Tiles>
    <Tiles_1.Tiles spacing="base">
      <ExampleTile />
      <ExampleTile />
      <ExampleTile />
      <ExampleTile />
    </Tiles_1.Tiles>
    <Tiles_1.Tiles spacing="loose">
      <ExampleTile />
      <ExampleTile />
      <ExampleTile />
      <ExampleTile />
    </Tiles_1.Tiles>
    <Tiles_1.Tiles spacing="extraLoose">
      <ExampleTile />
      <ExampleTile />
      <ExampleTile />
      <ExampleTile />
    </Tiles_1.Tiles>
  </>);
exports.Alignment = () => (<View_1.View maxInlineSize={400}>
    <View_1.View border="base">
      <Tiles_1.Tiles alignment="leading">
        <ExampleTile />
        <LongExampleTile />
        <ExampleTile />
      </Tiles_1.Tiles>
    </View_1.View>
    <br />
    <View_1.View border="base">
      <Tiles_1.Tiles alignment="center">
        <ExampleTile />
        <LongExampleTile />
        <ExampleTile />
      </Tiles_1.Tiles>
    </View_1.View>
    <br />
    <View_1.View border="base">
      <Tiles_1.Tiles alignment="trailing">
        <ExampleTile />
        <LongExampleTile />
        <ExampleTile />
      </Tiles_1.Tiles>
    </View_1.View>
    <br />
    <View_1.View border="base">
      <Tiles_1.Tiles alignment="baseline">
        <ExampleTile />
        <LongExampleTile />
        <ExampleTile />
      </Tiles_1.Tiles>
    </View_1.View>
  </View_1.View>);
exports.maxPerLine = () => (<>
    <Tiles_1.Tiles maxPerLine={2}>
      <ExampleTile />
      <ExampleTile />
      <ExampleTile />
      <ExampleTile />
    </Tiles_1.Tiles>
  </>);
exports.breakAt = () => (<>
    <p>This Tiles breaks at 600px:</p>
    <Tiles_1.Tiles breakAt={600} spacing="none">
      <ExampleTile />
      <ExampleTile />
      <ExampleTile />
      <ExampleTile />
    </Tiles_1.Tiles>
    <br />
    <p>This Tiles is inside a 599px wrapper and breaks at 600px:</p>
    <View_1.View maxInlineSize={599} border="base">
      <Tiles_1.Tiles breakAt={600} spacing="none">
        <ExampleTile />
        <ExampleTile />
        <ExampleTile />
        <ExampleTile />
      </Tiles_1.Tiles>
    </View_1.View>
  </>);
exports.nested = () => (<>
    <p>This Tiles breaks at 900px then at 450px:</p>
    <Tiles_1.Tiles breakAt={900}>
      <View_1.View>
        <Tiles_1.Tiles breakAt={450}>
          <ExampleTile />
          <ExampleTile />
        </Tiles_1.Tiles>
      </View_1.View>
      <View_1.View>
        <Tiles_1.Tiles breakAt={450}>
          <ExampleTile />
          <ExampleTile />
        </Tiles_1.Tiles>
      </View_1.View>
    </Tiles_1.Tiles>
  </>);