modal.stories.js

import DtModal from './modal.vue';

import DtModalDefaultTemplate from './modal_default.story.vue';
import { MODAL_KIND_MODIFIERS, MODAL_SIZE_MODIFIERS } from './modal_constants';
import { createTemplateFromVueFile } from '@/common/storybook_utils';
import { action } from 'storybook/actions';
import { NOTICE_KINDS } from '@/components/notice';
import { CONTENT_MODE_ARG_TYPE } from '@/common/mode_constants';

// Default Props for all variations
export const argsData = {
  size: 'default',
  kind: 'default',
  bannerKind: 'warning',
  copy: `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eget lacus quis velit \
viverra iaculis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vestibulum \
maximus ipsum ex. Curabitur elementum luctus augue, quis eleifend tortor feugiat vel. \
Maecenas maximus, ipsum et laoreet congue, diam massa aliquam libero, at pellentesque \
orci ipsum et velit.`,
  title: 'Example Title',
  onClose: action('update:open'),
};

export const argTypesData = {
  // Slots
  default: {
    control: 'text',
    table: {
      type: {
        summary: 'VNode',
      },
    },
  },
  banner: {
    control: 'text',
    table: {
      type: {
        summary: 'VNode',
      },
    },
  },
  footer: {
    control: 'text',
    table: {
      type: {
        summary: 'VNode',
      },
    },
  },
  header: {
    control: 'text',
    table: {
      type: {
        summary: 'VNode',
      },
    },
  },

  // Props
  contentMode: CONTENT_MODE_ARG_TYPE,
  size: {
    options: Object.keys(MODAL_SIZE_MODIFIERS),
    control: {
      type: 'select',
    },
  },
  kind: {
    options: Object.keys(MODAL_KIND_MODIFIERS),
    control: {
      type: 'select',
    },
  },
  bannerKind: {
    options: NOTICE_KINDS,
    control: {
      type: 'select',
    },
  },
  showFooter: {
    table: {
      disable: true,
    },
  },
  labelledById: {
    table: {
      defaultValue: {
        summary: 'generated unique ID',
      },
    },
  },
  closeOnClick: {
    control: {
      type: 'boolean',
    },
  },
  fixedHeaderFooter: {
    control: {
      type: 'boolean',
    },
  },
  hideClose: {
    control: {
      type: 'boolean',
    },
  },
  open: {
    control: {
      type: 'boolean',
    },
  },
  appendTo: {
    options: [undefined, 'body', 'html'],
    control: {
      type: 'select',
    },
  },

  // Events
  'update:open': {
    description: `The modal will emit a "false" boolean value for this event when the \
user performs a modal-closing action.  Parent components can sync on this value to create \
a 2-way binding to control modal visibility.`,
    table: {
      type: {
        summary: 'boolean',
      },
    },
  },
  onClose: {
    table: {
      disable: true,
    },
  },
};

export default {
  title: 'Components/Modal',
  component: DtModal,
  args: argsData,
  argTypes: argTypesData,
  excludeStories: /.*Data$/,
};

// Templates
const DefaultTemplate = (args, { argTypes }) => createTemplateFromVueFile(args, argTypes, DtModalDefaultTemplate);

export const Default = {
  render: DefaultTemplate,

  args: {},
  parameters: {
    percy: {
      args: {
        open: true,
      },
    },
  },
};

export const WithFooter = {
  render: DefaultTemplate,

  args: {
    showFooter: true,
  },

  parameters: { ...Default.parameters },
};

export const WithFixedHeaderFooter = {
  render: DefaultTemplate,

  args: {
    showFooter: true,
    fixedHeaderFooter: true,
    copy: argsData.copy.repeat(4),
  },

  parameters: { ...Default.parameters },
};

export const WithBanner = {
  render: DefaultTemplate,

  args: {
    bannerTitle: 'Example banner',
  },

  parameters: { ...Default.parameters },
};

export const WithDangerStyle = {
  render: DefaultTemplate,

  args: {
    kind: 'danger',
    showFooter: true,
  },

  parameters: { ...Default.parameters },
};

export const WithFullSize = {
  render: DefaultTemplate,

  args: {
    size: 'full',
    showFooter: true,
  },

  parameters: { ...Default.parameters },
};

export const WithCustomHeaderAndContent = {
  render: DefaultTemplate,

  args: {
    header: `
      <dt-stack direction="row" align="center" justify="center" class="d-p-150 d-bgc-purple-100">
        <div>[custom header]</div>
      </dt-stack>`,
    default: `
      <dt-stack direction="row" align="center" justify="center" class="d-p-400 d-bgc-gold-200">
        <h2>[custom body]</h2>
      </dt-stack>`,
  },

  parameters: { ...Default.parameters },
};