tide-design-system 2.0.21 → 2.0.23

package/src/stories/TideInputText.stories.ts

@@ -0,0 +1,181 @@
+import { action } from '@storybook/addon-actions';
+
+import * as STANDARD_FORMAT from '@/types/Formatted';
+import * as STANDARD_ICON from '@/types/Icon';
+import * as STANDARD_TEXT_INPUT_TYPE from '@/types/TextInput';
+import TideInputText from '@/components/TideInputText.vue';
+import { VALIDATOR } from '@/types/Validation';
+import {
+  argTypeBooleanUnrequired,
+  dataTrack,
+  formatArgType,
+  formatArgTypeCheck,
+  parameters,
+  prependNoneAsUndefined,
+} from '@/utilities/storybook';
+
+const FORMAT = prependNoneAsUndefined(STANDARD_FORMAT.FORMAT);
+const ICON = prependNoneAsUndefined(STANDARD_ICON.ICON);
+const TEXT_INPUT_TYPE = prependNoneAsUndefined(STANDARD_TEXT_INPUT_TYPE.TEXT_INPUT_TYPE);
+
+const render = (args: any, context: any) => ({
+  components: { TideInputText },
+  methods: {
+    handleChange: (event: KeyboardEvent) => {
+      const input = context.canvasElement.querySelector('input');
+
+      action('TideInputText changed')(event);
+      context.updateArgs({ ...args, value: input.value });
+    },
+  },
+  setup: () => ({ args }),
+  template: `<TideInputText @change="handleChange" v-bind="args" />`,
+});
+
+export default {
+  argTypes: {
+    autocomplete: {
+      ...argTypeBooleanUnrequired,
+      description: 'Determines whether browser attempts to autocomplete',
+    },
+    dataTrack,
+    disabled: {
+      ...argTypeBooleanUnrequired,
+      description: 'Determines whether input is interactable',
+    },
+    error: {
+      ...argTypeBooleanUnrequired,
+      description: 'Reflects whether the input value is valid',
+    },
+    hasClear: {
+      ...argTypeBooleanUnrequired,
+      description: 'Determines whether browser attempts to autocomplete',
+      if: { arg: 'type', neq: TEXT_INPUT_TYPE.PASSWORD },
+    },
+    iconLeading: {
+      ...formatArgType({ ICON }),
+      description: 'Icon at left of input value',
+    },
+    inputId: {
+      control: 'text',
+      description: 'Unique ID attribute<br />(to bind input label to input)',
+      table: {
+        defaultValue: { summary: 'None' },
+        type: { summary: 'string' },
+      },
+    },
+    label: {
+      control: 'text',
+      description: 'Label content',
+      table: {
+        defaultValue: { summary: 'None' },
+        type: { summary: 'string' },
+      },
+    },
+    maxlength: {
+      control: 'text',
+      description: 'Applies a maximum character count to the input',
+      table: {
+        defaultValue: { summary: 'None' },
+        type: { summary: 'number' },
+      },
+    },
+    minlength: {
+      control: 'text',
+      description: 'Applies a minimum character count to the input',
+      table: {
+        defaultValue: { summary: 'None' },
+        type: { summary: 'number' },
+      },
+    },
+    name: {
+      control: 'text',
+      description: 'Name attribute',
+      table: {
+        defaultValue: { summary: 'None' },
+        type: { summary: 'string' },
+      },
+    },
+    prefix: {
+      control: 'text',
+      description: 'input prefix',
+      table: {
+        defaultValue: { summary: 'None' },
+        type: { summary: 'string' },
+      },
+    },
+    required: {
+      ...argTypeBooleanUnrequired,
+      description: 'Determines whether input is required',
+    },
+    suffix: {
+      control: 'text',
+      description: 'input suffix<br />(i.e. units)',
+      table: {
+        defaultValue: { summary: 'None' },
+        type: { summary: 'string' },
+      },
+    },
+    supportingText: {
+      control: 'text',
+      description: 'Explainer text beneath input',
+      table: {
+        defaultValue: { summary: 'None' },
+        type: { summary: 'string' },
+      },
+    },
+    transformValue: {
+      ...formatArgType({ FORMAT }),
+      description: 'Determines text formatting applied to input value upon invoking relevant listener event(s)',
+    },
+    type: {
+      ...formatArgType({ TEXT_INPUT_TYPE }),
+      description: 'Determines the type(s) of values expected by the input',
+    },
+    updateValue: {
+      table: {
+        disable: true,
+      },
+    },
+    validators: {
+      ...formatArgTypeCheck({ VALIDATOR }),
+      description: 'Determines method(s) used to check for valid input value upon invoking relevant listener event(s)',
+    },
+    value: {
+      control: 'text',
+      description: 'input value',
+      table: {
+        defaultValue: { summary: 'None' },
+        type: { summary: 'string' },
+      },
+    },
+  },
+  args: {
+    autocomplete: undefined,
+    dataTrack: '',
+    disabled: undefined,
+    error: undefined,
+    hasClear: undefined,
+    iconLeading: undefined,
+    inputId: '',
+    label: 'Input label',
+    maxlength: '',
+    minlength: '',
+    name: '',
+    prefix: '',
+    required: undefined,
+    suffix: '',
+    supportingText: '',
+    transformValue: undefined,
+    type: undefined,
+    validators: [],
+    value: '',
+  },
+  component: TideInputText,
+  parameters,
+  render,
+  tags: ['autodocs'],
+  title: 'Basic Components/TideInputText',
+};
+
+export const Demo = {};

package/src/stories/TideInputTextarea.stories.ts

@@ -0,0 +1,116 @@
+import { action } from '@storybook/addon-actions';
+
+import TideInputTextarea from '@/components/TideInputTextarea.vue';
+import { argTypeBooleanUnrequired, dataTrack, parameters } from '@/utilities/storybook';
+
+const render = (args: any, context: any) => ({
+  components: { TideInputTextarea },
+  methods: {
+    handleChange: (event: KeyboardEvent) => {
+      const input = context.canvasElement.querySelector('textarea');
+
+      action('TideInputTextarea changed')(event);
+      context.updateArgs({ ...args, value: input.value });
+    },
+  },
+  setup: () => ({ args }),
+  template: `<TideInputTextarea @change="handleChange" v-bind="args" />`,
+});
+
+export default {
+  argTypes: {
+    dataTrack,
+    error: {
+      ...argTypeBooleanUnrequired,
+      description: 'Reflects whether the input value is valid',
+    },
+    inputId: {
+      control: 'text',
+      description: 'Unique ID attribute<br />(to bind input label to input)',
+      table: {
+        defaultValue: { summary: 'None' },
+        type: { summary: 'string' },
+      },
+    },
+    label: {
+      control: 'text',
+      description: 'Label content',
+      table: {
+        defaultValue: { summary: 'None' },
+        type: { summary: 'string' },
+      },
+    },
+    maxlength: {
+      control: 'text',
+      description: 'Applies a maximum character count to the input',
+      table: {
+        defaultValue: { summary: 'None' },
+        type: { summary: 'number' },
+      },
+    },
+    minlength: {
+      control: 'text',
+      description: 'Applies a minimum character count to the input',
+      table: {
+        defaultValue: { summary: 'None' },
+        type: { summary: 'number' },
+      },
+    },
+    name: {
+      control: 'text',
+      description: 'Name attribute',
+      table: {
+        defaultValue: { summary: 'None' },
+        type: { summary: 'string' },
+      },
+    },
+    required: {
+      ...argTypeBooleanUnrequired,
+      description: 'Determines whether input is required',
+    },
+    rows: {
+      control: 'text',
+      description: 'Determines the height of the input',
+      table: {
+        defaultValue: { summary: 'None' },
+        type: { summary: 'number' },
+      },
+    },
+    supportingText: {
+      control: 'text',
+      description: 'Explainer text beneath input',
+      table: {
+        defaultValue: { summary: 'None' },
+        type: { summary: 'string' },
+      },
+    },
+    value: {
+      control: 'text',
+      description: 'input value',
+      table: {
+        defaultValue: { summary: 'None' },
+        type: { summary: 'string' },
+      },
+    },
+  },
+  args: {
+    dataTrack: '',
+    error: undefined,
+    inputId: '',
+    label: 'Input label',
+    maxlength: '',
+    minlength: '',
+    name: '',
+    required: undefined,
+    rows: undefined,
+    supportingText: '',
+    value: '',
+  },
+  component: TideInputTextarea,
+  parameters,
+  render,
+  tags: ['autodocs'],
+  title: 'Basic Components/TideInputTextarea',
+};
+
+export const Demo = {};

package/src/stories/TideLink.stories.ts

@@ -0,0 +1,137 @@
+import { action } from '@storybook/addon-actions';
+
+import type { StoryContext } from '@storybook/vue3';
+
+import * as STANDARD_ELEMENT from '@/types/Element';
+import * as STANDARD_ICON from '@/types/Icon';
+import * as STANDARD_LINK_SIZE from '@/types/Storybook';
+import TideLink from '@/components/TideLink.vue';
+import {
+  argTypeBooleanUnrequired,
+  click,
+  dataTrack,
+  formatArgType,
+  formatValueAsConstant,
+  prependNoneAsUndefined,
+} from '@/utilities/storybook';
+
+const ELEMENT = prependNoneAsUndefined(STANDARD_ELEMENT.ELEMENT);
+const ICON = prependNoneAsUndefined(STANDARD_ICON.ICON);
+const LINK_SIZE = prependNoneAsUndefined(STANDARD_LINK_SIZE.LINK_SIZE);
+
+const formatSnippet = (code: string, context: StoryContext) => {
+  const { args, argTypes } = context;
+
+  const argsWithValues: string[] = [];
+  const { element, iconLeading, iconTrailing } = args;
+
+  if (args.size !== undefined) argsWithValues.push(`:class="${args.size}"`);
+  if (args.dataTrack !== '') argsWithValues.push(`:data-track="${args.dataTrack}"`);
+  if (args.element !== undefined)
+    argsWithValues.push(`:element="${formatValueAsConstant({ element: element }, argTypes)}"`);
+  if (args.href !== undefined) argsWithValues.push(`:href="${args.href}"`);
+  if (args.iconLeading !== undefined)
+    argsWithValues.push(`:icon-leading="${formatValueAsConstant({ iconLeading }, argTypes)}"`);
+  if (args.iconTrailing !== undefined)
+    argsWithValues.push(`:icon-trailing="${formatValueAsConstant({ iconTrailing }, argTypes)}"`);
+  if (args.isNewTab !== undefined) argsWithValues.push(`:is-new-tab="${args.isNewTab}"`);
+  if (args.label !== undefined) argsWithValues.push(`:label="${args.label}"`);
+  if (args.click !== undefined) argsWithValues.push(`@click="${args.click}"`);
+
+  return `<TideLink ${argsWithValues.join(' ')} />`;
+};
+
+const parameters = {
+  docs: {
+    source: {
+      format: 'vue',
+      language: 'html',
+      transform: formatSnippet,
+    },
+  },
+};
+
+const render = (args: any) => ({
+  components: { TideLink },
+  methods: {
+    handleClick: (event: Event) => {
+      if (args.element !== ELEMENT.LINK && args.click) action(args.click)(event);
+    },
+  },
+  setup: () => ({ args }),
+  template: '<TideLink :class="args.size" @click="handleClick" v-bind="args" />',
+});
+
+export default {
+  argTypes: {
+    click: {
+      ...click,
+      if: { arg: 'element', eq: ELEMENT.BUTTON },
+    },
+    dataTrack,
+    element: {
+      ...formatArgType({ ELEMENT }),
+      description: 'HTML tag type',
+      table: {
+        defaultValue: { summary: 'LINK' },
+        type: { summary: 'Element' },
+      },
+    },
+    href: {
+      description: 'URL to open<br />(Link only)',
+      if: { arg: 'element', eq: ELEMENT.LINK },
+      table: {
+        defaultValue: { summary: 'None' },
+        type: { summary: 'string' },
+      },
+    },
+    iconLeading: {
+      ...formatArgType({ ICON }),
+      description: 'Icon to left of label',
+    },
+    iconTrailing: {
+      ...formatArgType({ ICON }),
+      description: 'Icon to right of label',
+    },
+    isNewTab: {
+      ...argTypeBooleanUnrequired,
+      description: 'Determines whether to target a new browser tab<br />(Link only)',
+      if: { arg: 'element', eq: ELEMENT.LINK },
+    },
+    label: {
+      control: 'text',
+      description: 'Link text',
+      table: {
+        defaultValue: { summary: 'None' },
+        type: { summary: 'string' },
+      },
+    },
+    size: {
+      control: 'select',
+      description: 'Link text size',
+      options: LINK_SIZE,
+      table: {
+        defaultValue: { summary: 'None' },
+        type: { summary: 'string' },
+      },
+    },
+  },
+  args: {
+    click: 'doSomething',
+    dataTrack: '',
+    element: undefined,
+    href: '/',
+    iconLeading: undefined,
+    iconTrailing: undefined,
+    isNewTab: undefined,
+    label: 'Demo',
+    size: undefined,
+  },
+  component: TideLink,
+  parameters,
+  render,
+  tags: ['autodocs'],
+  title: 'Basic Components/TideLink',
+};
+
+export const Demo = {};

package/src/stories/TideModal.stories.ts

@@ -0,0 +1,122 @@
+import { action } from '@storybook/addon-actions';
+
+import type { StoryContext } from '@storybook/vue3';
+
+import TideButton from '@/components/TideButton.vue';
+import TideModal from '@/components/TideModal.vue';
+import { disabledArgType, doSomething, lineBreak, tab } from '@/utilities/storybook';
+
+const formatSnippet = (code: string, context: StoryContext) => {
+  const { args } = context;
+
+  const slotContentIndentationFixed = (args.default as string).replace(/(<\/[^>]+>)$/, `${tab}$1`);
+
+  return (
+    `<TideModal @close="handleClose">${lineBreak}` +
+    `${tab}${slotContentIndentationFixed}${lineBreak}${lineBreak}` +
+    `${tab}<template #footer>${lineBreak}` +
+    `${tab}${tab}${args.footer}${lineBreak}` +
+    `${tab}</template>${lineBreak}` +
+    `</TideModal>`
+  );
+};
+
+const parameters = {
+  docs: {
+    source: {
+      format: 'vue',
+      language: 'html',
+      transform: formatSnippet,
+    },
+  },
+};
+
+const render = (args: any, { updateArgs }: any) => ({
+  components: { TideButton, TideModal },
+  methods: {
+    doSomething,
+    handleClose: (event: Event) => {
+      updateArgs({ ...args, isOpen: false });
+      action('Modal closed')(event);
+
+      try {
+        const callback = eval(args.handleClose);
+        if (callback) {
+          callback();
+        }
+      } catch {
+        alert('Please specify a valid function in the "close" control.');
+      }
+    },
+  },
+  setup: () => ({ args }),
+  template: `
+  <p>Toggle "isOpen" prop below to preview.</p>
+  <TideModal v-bind="args" @close="handleClose">
+    ${args.default}
+    <template #footer>${args.footer}</template>
+  </TideModal>`,
+});
+
+export default {
+  argTypes: {
+    close: disabledArgType,
+    default: {
+      control: 'text',
+      description: 'Modal content',
+      table: {
+        defaultValue: { summary: 'None' },
+        type: { summary: 'HTML' },
+      },
+    },
+    footer: {
+      control: 'text',
+      description: 'Footer content',
+      table: {
+        defaultValue: { summary: 'None' },
+        type: { summary: 'HTML' },
+      },
+    },
+    handleClose: {
+      control: 'text',
+      description: 'JS function to execute when modal is closed',
+      table: {
+        defaultValue: { summary: 'None' },
+        type: { summary: '(event: Event) => void' },
+      },
+    },
+    isOpen: {
+      description: 'Determines whether the Modal is displayed',
+      table: {
+        defaultValue: { summary: 'False' },
+      },
+    },
+    title: {
+      description: 'Modal title',
+      table: {
+        defaultValue: { summary: 'None' },
+      },
+    },
+    width: {
+      description: 'Applies width to Modal<br />(include units)',
+      table: {
+        defaultValue: { summary: 'None' },
+      },
+    },
+  },
+  args: {
+    default: `<div>${lineBreak}${tab}Default Slot Demo${lineBreak}</div>`,
+    footer: '<TideButton label="Footer Slot Demo" />',
+    handleClose: 'doSomething',
+    isOpen: false,
+    title: 'Modal Demo',
+    width: '400px',
+  },
+  component: TideModal,
+  parameters,
+  render,
+  tags: ['autodocs'],
+  title: 'Basic Components/TideModal',
+};
+
+export const Demo = {};

package/src/stories/TidePagination.stories.ts

@@ -0,0 +1,83 @@
+import { action } from '@storybook/addon-actions';
+
+import * as STANDARD_ELEMENT from '@/types/Element';
+import TidePagination from '@/components/TidePagination.vue';
+import {
+  argTypeBooleanUnrequired,
+  change,
+  disabledArgType,
+  doSomething,
+  parameters,
+  prependNoneAsUndefined,
+} from '@/utilities/storybook';
+
+const ELEMENT_TEXT_AS_ICON = prependNoneAsUndefined(STANDARD_ELEMENT.ELEMENT_TEXT_AS_ICON);
+
+const render = (args: any, { updateArgs }: any) => ({
+  components: { TidePagination },
+  methods: {
+    doSomething,
+    handleEmit: (event: Event, index: number) => {
+      action(`Current page ${index}`)(event, { index });
+
+      updateArgs({ ...args, pageCurrent: index });
+
+      try {
+        const performCallback = eval(args.handleEmit);
+
+        if (performCallback) {
+          performCallback();
+        }
+      } catch {
+        alert('Please specify a valid handler in the "change" control.');
+      }
+    },
+  },
+  setup: () => ({ args }),
+  template: `<TidePagination @change="handleEmit" v-bind="args" />`,
+});
+
+export default {
+  argTypes: {
+    change: disabledArgType,
+    disabled: {
+      ...argTypeBooleanUnrequired,
+      description: 'Determines clickability<br />(Button only)',
+      if: {
+        arg: 'element',
+        eq: ELEMENT_TEXT_AS_ICON.BUTTON,
+      },
+    },
+    handleEmit: {
+      ...change,
+      table: {
+        defaultValue: { summary: 'None' },
+        type: { summary: '(event: Event, pageIndex: number) => void' },
+      },
+    },
+    pageCurrent: {
+      control: {
+        min: 1,
+        type: 'number',
+      },
+    },
+    pageTotal: {
+      control: {
+        min: 1,
+        type: 'number',
+      },
+    },
+  },
+  args: {
+    handleEmit: 'doSomething',
+    pageCurrent: 1,
+    pageTotal: 5,
+  },
+  component: TidePagination,
+  parameters,
+  render,
+  tags: ['autodocs'],
+  title: 'Basic Components/TidePagination',
+};
+
+export const Demo = {};

package/src/stories/TideSeoLinks.stories.ts

@@ -0,0 +1,67 @@
+import type { StoryContext } from '@storybook/vue3';
+
+import type { Link } from '@/types/Link';
+
+import TideSeoLinks from '@/components/TideSeoLinks.vue';
+
+const links: Link[] = new Array(12).fill({}).map((link, index) => {
+  return {
+    isNewTab: false,
+    label: `Link ${index + 1}`,
+    url: '/',
+  };
+});
+
+const formatSnippet = (code: string, context: StoryContext) => {
+  const { args } = context;
+
+  return `<TideSeoLinks :heading="${args.heading}" :link="links" />`;
+};
+
+const parameters = {
+  docs: {
+    source: {
+      format: 'vue',
+      language: 'html',
+      transform: formatSnippet,
+    },
+  },
+};
+
+const render = (args: any) => ({
+  components: { TideSeoLinks },
+  setup: () => ({ args }),
+  template: '<TideSeoLinks v-bind="args" />',
+});
+
+export default {
+  argTypes: {
+    heading: {
+      control: 'text',
+      description: 'Determines label, URL, and target for each link',
+      table: {
+        defaultValue: { summary: 'None' },
+        type: { summary: 'Link[]' },
+      },
+    },
+    links: {
+      control: 'object',
+      description: 'Determines label, URL, and target for each link',
+      table: {
+        defaultValue: { summary: 'None' },
+        type: { summary: 'Link[]' },
+      },
+    },
+  },
+  args: {
+    heading: 'Demo',
+    links,
+  },
+  component: TideSeoLinks,
+  parameters,
+  render,
+  tags: ['autodocs'],
+  title: 'Basic Components/TideSeoLinks',
+};
+
+export const Demo = {};