"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.all = exports.LinkComponent = void 0;
const react_1 = __importDefault(require("react"));
const addon_knobs_1 = require("@storybook/addon-knobs");
const storybook_utilities_1 = require("../../storybook-utilities");
const TextBlock_1 = require("../TextBlock");
const Link_1 = require("./Link");
const meta = {
    component: Link_1.Link,
    title: 'checkout-web-ui/Link',
    decorators: [addon_knobs_1.withKnobs, storybook_utilities_1.themeWithKnobs('link')],
};
exports.default = meta;
exports.LinkComponent = (args) => (<TextBlock_1.TextBlock>
    Learn more about our <Link_1.Link {...args}>shipping policies</Link_1.Link>
  </TextBlock_1.TextBlock>);
exports.LinkComponent.args = {
    to: 'https://shopify.com',
    external: false,
    underline: false,
    appearance: undefined,
};
exports.LinkComponent.argTypes = {
    appearance: {
        control: {
            type: 'select',
            options: [undefined, 'monochrome'],
        },
    },
};
exports.all = () => (<>
    <Link_1.Link to="https://shopify.com" external={false}>
      Internal link
    </Link_1.Link>
    <br />
    <Link_1.Link to="https://shopify.com" external>
      External link
    </Link_1.Link>
    <br />
    <Link_1.Link to={undefined}>Link without `to` (rendered as a Button)</Link_1.Link>
    <br />
    <TextBlock_1.TextBlock>
      Learn more about our{' '}
      <Link_1.Link to="https://shopify.com" appearance="monochrome">
        shipping policies
      </Link_1.Link>{' '}
      (`monochrome`)
    </TextBlock_1.TextBlock>
    <br />
    <Link_1.Link to="https://shopify.com" accessibilityLabel="Visit shopify.com">
      Visit (with accessible label)
    </Link_1.Link>
  </>);