import { html } from 'lit-html';
import { ifDefined } from 'lit-html/directives/if-defined';
import { files } from '../../icons/manifest.json';
import { buttonAppearance, buttonPalette, buttonTarget } from '../types';
import { width } from '../../types';
export const story = ({ appearance, disabled, href, iconEnd, iconStart, palette, target, width }) => html `
  <abds-button
    appearance="${ifDefined(appearance || undefined)}"
    disabled="${ifDefined(disabled || undefined)}"
    href="${ifDefined(href || undefined)}"
    icon-end="${ifDefined(iconEnd || undefined)}"
    icon-start="${ifDefined(iconStart || undefined)}"
    palette="${ifDefined(palette || undefined)}"
    target="${ifDefined(target || undefined)}"
    width="${ifDefined(width || undefined)}"
  >
    ${href ? 'Link text' : 'Button text'}
  </abds-button>
`;
export const meta = {
  argTypes: {
    appearance: {
      control: {
        type: 'select',
      },
      defaultValue: 'solid',
      description: 'Button appearance provides an outline (i.e. solid border) to the button. Currently, only brand and destructive variants support outline.',
      name: 'appearance',
      options: buttonAppearance,
      table: {
        defaultValue: { summary: 'solid' },
        type: { summary: 'string' },
      },
      type: { name: 'string', required: false },
    },
    disabled: {
      defaultValue: false,
      description: 'Disables button click event',
      name: 'disabled',
      table: {
        type: { summary: 'boolean' },
      },
      type: { name: 'boolean', required: false },
    },
    iconEnd: {
      control: {
        type: 'select',
      },
      description: 'Adds an abds-icon to end of button text',
      name: 'icon-end',
      options: ['none', ...files.map((fileName) => fileName.replace(/icon-/, ''))],
      table: {
        type: { summary: 'string' },
      },
      type: { name: 'string', required: false },
    },
    iconStart: {
      control: {
        type: 'select',
      },
      description: 'Adds an abds-icon to beginning of button text',
      name: 'icon-start',
      options: ['none', ...files.map((fileName) => fileName.replace(/icon-/, ''))],
      table: {
        type: { summary: 'string' },
      },
      type: { name: 'string', required: false },
    },
    href: {
      control: {
        type: 'text',
      },
      description: 'Enables anchor href attribute; determines if component should render as anchor or button',
      name: 'href',
      table: {
        type: { summary: 'string' },
      },
      type: { name: 'string', required: false },
    },
    palette: {
      control: {
        type: 'select',
      },
      defaultValue: 'brand',
      description: 'Button palette shows different button color options',
      name: 'palette',
      options: buttonPalette,
      table: {
        defaultValue: { summary: 'brand' },
        type: { summary: 'string' },
      },
      type: { name: 'string', required: false },
    },
    target: {
      control: {
        type: 'select',
      },
      description: 'Enables anchor target attribute',
      name: 'target',
      options: buttonTarget,
      table: {
        type: { summary: 'text' },
      },
    },
    width: {
      control: {
        type: 'select',
      },
      defaultValue: 'auto',
      description: 'Button width',
      name: 'width',
      options: width,
      table: {
        defaultValue: { summary: 'auto' },
        type: { summary: 'string' },
      },
    },
  },
  title: 'Components/Buttons/',
};
export default { meta, story };
//# sourceMappingURL=template.js.map