"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.collapsibleAndDismissible = exports.dismissible = exports.autofocus = exports.collapsible = exports.withoutIcon = exports.withContent = exports.allBanners = 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 Text_1 = require("../Text");
const Banner_1 = require("./Banner");
const meta = {
    component: Banner_1.Banner,
    title: 'checkout-web-ui/Banner',
    decorators: [addon_knobs_1.withKnobs, storybook_utilities_1.themeWithKnobs('banner', 'headingLevel3')],
};
exports.default = meta;
exports.allBanners = () => (<BlockStack_1.BlockStack>
    <Banner_1.Banner title="This is an informative message"/>
    <Banner_1.Banner status="success" title="This is a success message"/>
    <Banner_1.Banner status="warning" title="This is a warning message"/>
    <Banner_1.Banner status="critical" title="This is an error message"/>
  </BlockStack_1.BlockStack>);
exports.withContent = () => (<BlockStack_1.BlockStack>
    <Banner_1.Banner title="This is an informative message">
      <Text_1.Text>
        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolores
        commodi, vitae explicabo, laudantium consequatur eaque dignissimos
        dolorem optio minus porro nesciunt magni reprehenderit accusamus quasi
        sit architecto sequi nihil.
      </Text_1.Text>
    </Banner_1.Banner>
  </BlockStack_1.BlockStack>);
exports.withoutIcon = () => (<Banner_1.Banner title="Your order was updated on March 19, 2020" iconHidden/>);
exports.collapsible = () => (<Banner_1.Banner title="Your order was updated on March 19, 2020" collapsible>
    <Text_1.Text>Here are some details.</Text_1.Text>
  </Banner_1.Banner>);
exports.autofocus = () => (<Banner_1.Banner autofocus title="Your order was updated on March 19, 2020">
    <Text_1.Text>Here are some details.</Text_1.Text>
  </Banner_1.Banner>);
exports.dismissible = () => (<Banner_1.Banner title="Your order was updated on March 19, 2020" onDismiss={() => {
    // eslint-disable-next-line no-alert
    alert('dismissed');
}}>
    <Text_1.Text>Here are some details.</Text_1.Text>
  </Banner_1.Banner>);
exports.collapsibleAndDismissible = () => (<Banner_1.Banner title="Your order was updated on March 19, 2020" onDismiss={() => {
    // eslint-disable-next-line no-alert
    alert('dismissed');
}} collapsible>
    <Text_1.Text>Here are some details.</Text_1.Text>
  </Banner_1.Banner>);