"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.allSizes = exports.allRoles = exports.allStatus = exports.allVisualStyles = exports.defaultState = void 0;
const react_1 = __importDefault(require("react"));
const BlockStack_1 = require("../BlockStack");
const Text_1 = require("./Text");
const meta = {
    component: Text_1.Text,
    title: 'checkout-web-ui/Text',
};
exports.default = meta;
exports.defaultState = () => <Text_1.Text>Default</Text_1.Text>;
exports.allVisualStyles = () => (<BlockStack_1.BlockStack>
    <Text_1.Text>Default</Text_1.Text>
    <Text_1.Text subdued>Subdued</Text_1.Text>
    <Text_1.Text emphasized>Emphasized</Text_1.Text>
    <Text_1.Text appearance="accent">Accent</Text_1.Text>
    <Text_1.Text subdued appearance="accent">
      Subdued accent
    </Text_1.Text>
    <Text_1.Text emphasized appearance="accent">
      Emphasized accent
    </Text_1.Text>
    <Text_1.Text appearance="critical">Critical</Text_1.Text>
    <Text_1.Text subdued appearance="critical">
      Subdued critical
    </Text_1.Text>
    <Text_1.Text emphasized appearance="critical">
      Emphasized critical
    </Text_1.Text>
    <Text_1.Text appearance="warning">Warning</Text_1.Text>
    <Text_1.Text subdued appearance="warning">
      Subdued warning
    </Text_1.Text>
    <Text_1.Text emphasized appearance="warning">
      Emphasized warning
    </Text_1.Text>
    <Text_1.Text appearance="success">Success</Text_1.Text>
    <Text_1.Text subdued appearance="success">
      Subdued success
    </Text_1.Text>
    <Text_1.Text emphasized appearance="success">
      Emphasized success
    </Text_1.Text>
  </BlockStack_1.BlockStack>);
exports.allStatus = () => (<BlockStack_1.BlockStack>
    <Text_1.Text appearance="critical">Critical</Text_1.Text>
    <Text_1.Text appearance="warning">Warning</Text_1.Text>
    <Text_1.Text appearance="success">Success</Text_1.Text>
  </BlockStack_1.BlockStack>);
exports.allRoles = () => (<BlockStack_1.BlockStack>
    <Text_1.Text role="address">
      490 Rue De La Gauchetière O, Montréal, QC H2Z 0B3
    </Text_1.Text>
    <Text_1.Text role="deletion">$12.99</Text_1.Text>
    <Text_1.Text role={{ type: 'directional-override', direction: 'ltr' }}>
      (514) 841-0100
    </Text_1.Text>
    <Text_1.Text role={{ type: 'abbreviation', for: 'Gross merchandise value' }}>
      GMV
    </Text_1.Text>
    <Text_1.Text role={{ type: 'datetime', machineReadable: '2020-05-20' }}>
      May 20th, 2020
    </Text_1.Text>
  </BlockStack_1.BlockStack>);
exports.allSizes = () => (<BlockStack_1.BlockStack>
    <Text_1.Text size="extraSmall">Extra small</Text_1.Text>
    <Text_1.Text size="small">Small</Text_1.Text>
    <Text_1.Text>Default</Text_1.Text>
    <Text_1.Text size="medium">Medium</Text_1.Text>
    <Text_1.Text size="large">Large</Text_1.Text>
    <Text_1.Text size="extraLarge">Extra large</Text_1.Text>
  </BlockStack_1.BlockStack>);