"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.Inline = exports.WithAccessibilityLabel = exports.Disabled = exports.MultipleValues = exports.SingleValue = void 0;
const react_1 = __importDefault(require("react"));
const addon_knobs_1 = require("@storybook/addon-knobs");
const storybook_utilities_1 = require("../../storybook-utilities");
const BlockStack_1 = require("../BlockStack");
const InlineStack_1 = require("../InlineStack");
const ChoiceList_1 = require("./ChoiceList");
const meta = {
    component: ChoiceList_1.ChoiceList,
    subcomponents: { Choice: ChoiceList_1.Choice },
    title: 'checkout-web-ui/ChoiceList',
    decorators: [addon_knobs_1.withKnobs, storybook_utilities_1.themeWithKnobs()],
    args: {
        name: 'Choice',
        value: 'first',
    },
};
exports.default = meta;
const Template = (args) => (<ChoiceList_1.ChoiceList {...args}/>);
exports.SingleValue = Template.bind({});
exports.SingleValue.args = {
    children: (<BlockStack_1.BlockStack>
      <ChoiceList_1.Choice id="first">First choice</ChoiceList_1.Choice>
      <ChoiceList_1.Choice id="second">Second choice</ChoiceList_1.Choice>
    </BlockStack_1.BlockStack>),
};
exports.MultipleValues = Template.bind({});
exports.MultipleValues.args = {
    children: (<BlockStack_1.BlockStack>
      <ChoiceList_1.Choice id="first">First choice</ChoiceList_1.Choice>
      <ChoiceList_1.Choice id="second">Second choice</ChoiceList_1.Choice>
    </BlockStack_1.BlockStack>),
    value: ['first'],
};
exports.Disabled = Template.bind({});
exports.Disabled.args = {
    children: (<BlockStack_1.BlockStack>
      <ChoiceList_1.Choice id="first" disabled>
        First choice
      </ChoiceList_1.Choice>
      <ChoiceList_1.Choice id="second">Second choice</ChoiceList_1.Choice>
    </BlockStack_1.BlockStack>),
};
exports.WithAccessibilityLabel = Template.bind({});
exports.WithAccessibilityLabel.args = {
    children: (<BlockStack_1.BlockStack>
      <ChoiceList_1.Choice id="first" accessibilityLabel="This is a description for screen readers">
        First choice
      </ChoiceList_1.Choice>
      <ChoiceList_1.Choice id="second">Second choice</ChoiceList_1.Choice>
    </BlockStack_1.BlockStack>),
};
exports.Inline = Template.bind({});
exports.Inline.args = {
    children: (<InlineStack_1.InlineStack>
      <ChoiceList_1.Choice id="first">First choice</ChoiceList_1.Choice>
      <ChoiceList_1.Choice id="second">Second choice</ChoiceList_1.Choice>
    </InlineStack_1.InlineStack>),
};