"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.readonly = exports.disabled = exports.accessibilityDescription = exports.withTooltip = exports.withIcon = exports.withSuffix = exports.withPrefix = exports.multiline = exports.errorState = exports.prefilledContent = exports.inputTypeTelephone = exports.inputTypeEmail = exports.inputTypeNumber = exports.defaultState = void 0;
const react_1 = __importDefault(require("react"));
const addon_knobs_1 = require("@storybook/addon-knobs");
const storybook_utilities_1 = require("../../storybook-utilities");
const FormLayout_1 = require("../FormLayout");
const InlineStack_1 = require("../InlineStack");
const Tooltip_1 = require("../Tooltip");
const Icon_1 = require("../Icon");
const TextField_1 = require("./TextField");
const meta = {
    component: TextField_1.TextField,
    title: 'checkout-web-ui/TextField',
    decorators: [addon_knobs_1.withKnobs, storybook_utilities_1.themeWithKnobs('textFields')],
};
exports.default = meta;
exports.defaultState = () => <TextField_1.TextField label="Name"/>;
exports.inputTypeNumber = () => (<TextField_1.TextField label="Quantity" type="number"/>);
exports.inputTypeEmail = () => <TextField_1.TextField label="Email" type="email"/>;
exports.inputTypeTelephone = () => (<TextField_1.TextField label="Phone number" type="telephone"/>);
exports.prefilledContent = () => (<TextField_1.TextField label="Group" value="Shopifolk"/>);
exports.errorState = () => <TextField_1.TextField label="Name" error="Enter a name"/>;
exports.multiline = () => (<FormLayout_1.FormLayout>
    <TextField_1.TextField label="Review" multiline/>
    <TextField_1.TextField label="Review" multiline={2}/>
    <TextField_1.TextField label="Review" multiline={3}/>
    <TextField_1.TextField label="Review" multiline={4}/>
  </FormLayout_1.FormLayout>);
exports.withPrefix = () => (<FormLayout_1.FormLayout>
    <TextField_1.TextField label="Amount" prefix="$"/>
    <TextField_1.TextField label="Amount" prefix="USD"/>
    <TextField_1.TextField label="Amount (prefilled)" prefix="$" value="7"/>
    <TextField_1.TextField label="Amount (prefilled)" prefix="USD" multiline={5} value="77"/>
  </FormLayout_1.FormLayout>);
exports.withSuffix = () => (<FormLayout_1.FormLayout>
    <TextField_1.TextField label="Amount" suffix="$"/>
    <TextField_1.TextField label="Amount" suffix="CAD"/>
    <TextField_1.TextField label="Amount" suffix="CAD" multiline={5}/>
  </FormLayout_1.FormLayout>);
exports.withIcon = () => (<FormLayout_1.FormLayout>
    <TextField_1.TextField label="Phone number" icon="mobile"/>
    <TextField_1.TextField label="Phone number" icon="mobile" multiline={5}/>
  </FormLayout_1.FormLayout>);
exports.withTooltip = () => (<FormLayout_1.FormLayout>
    <TextField_1.TextField label="Address">
      <InlineStack_1.InlineStack alignment="center" spacing="tight">
        <Tooltip_1.Tooltip content="In case we need to contact you about your order">
          <Icon_1.Icon source="questionFill" size="large" appearance="subdued" accessibilityLabel="More information"/>
        </Tooltip_1.Tooltip>
      </InlineStack_1.InlineStack>
    </TextField_1.TextField>
    <TextField_1.TextField label="Notes" multiline={5}>
      <InlineStack_1.InlineStack alignment="center" spacing="tight">
        <Tooltip_1.Tooltip content="In case we need to contact you about your order">
          <Icon_1.Icon source="questionFill" size="large" appearance="subdued" accessibilityLabel="More information"/>
        </Tooltip_1.Tooltip>
      </InlineStack_1.InlineStack>
    </TextField_1.TextField>
  </FormLayout_1.FormLayout>);
exports.accessibilityDescription = () => (<FormLayout_1.FormLayout>
    <TextField_1.TextField label="Email" accessibilityDescription="Contact information - Shop 1"/>
  </FormLayout_1.FormLayout>);
exports.disabled = () => (<FormLayout_1.FormLayout>
    <TextField_1.TextField label="Order number" disabled/>
  </FormLayout_1.FormLayout>);
exports.readonly = () => <TextField_1.TextField label="Order number" readonly/>;