tide-design-system 2.5.13 → 2.5.15

package/src/stories/TideInputTextarea.stories.ts

@@ -1,156 +0,0 @@
-import { action } from '@storybook/addon-actions';
-
-import TideInputTextarea from '@/components/TideInputTextarea.vue';
-import * as STANDARD_ERROR_DISPLAY from '@/types/Validation';
-import { VALIDATOR } from '@/types/Validation';
-import {
-  argTypeBooleanUnrequired,
-  dataTrack,
-  disabledArgType,
-  doSomething,
-  formatArgType,
-  formatArgTypeCheck,
-  parameters,
-  prependNoneAsUndefined,
-} from '@/utilities/storybook';
-
-type Args = InstanceType<typeof TideInputTextarea>['$props'] & {
-  handleValid: string;
-  vModel: string;
-};
-
-const ERROR_DISPLAY = prependNoneAsUndefined(STANDARD_ERROR_DISPLAY.ERROR_DISPLAY);
-
-const render = (args: Args) => ({
-  components: { TideInputTextarea },
-  methods: {
-    doSomething,
-    handleValid: () => {
-      action('TideInputText valid was emitted')({});
-
-      try {
-        const callback = eval(args.handleValid);
-
-        if (callback) {
-          callback();
-        }
-      } catch {
-        alert('Please specify a valid handler in the "valid" control.');
-      }
-    },
-  },
-  setup: () => ({ args }),
-  template: `<TideInputTextarea @valid="handleValid" v-bind="args" />`,
-});
-
-export default {
-  argTypes: {
-    dataTrack,
-    error: {
-      control: 'text',
-      table: {
-        defaultValue: { summary: 'None' },
-        type: { summary: 'string' },
-      },
-    },
-    errorDisplay: {
-      ...formatArgType({ ERROR_DISPLAY }),
-    },
-    handleValid: {
-      control: 'text',
-      description: 'JS code or function to execute on valid event',
-      isEmit: true,
-      name: 'valid',
-      table: {
-        category: 'Events',
-        defaultValue: { summary: 'None' },
-        type: { summary: '(isValid: boolean) => void' },
-      },
-    },
-    inputId: {
-      control: 'text',
-      table: {
-        defaultValue: { summary: 'None' },
-        type: { summary: 'string' },
-      },
-    },
-    label: {
-      control: 'text',
-      table: {
-        defaultValue: { summary: 'None' },
-        type: { summary: 'string' },
-      },
-    },
-    maxlength: {
-      control: 'text',
-      table: {
-        defaultValue: { summary: 'None' },
-        type: { summary: 'number' },
-      },
-    },
-    minlength: {
-      control: 'text',
-      table: {
-        defaultValue: { summary: 'None' },
-        type: { summary: 'number' },
-      },
-    },
-    name: {
-      control: 'text',
-      table: {
-        defaultValue: { summary: 'None' },
-        type: { summary: 'string' },
-      },
-    },
-    required: argTypeBooleanUnrequired,
-    rows: {
-      control: 'text',
-      table: {
-        defaultValue: { summary: 'None' },
-        type: { summary: 'number' },
-      },
-    },
-    supportingText: {
-      control: 'text',
-      table: {
-        defaultValue: { summary: 'None' },
-        type: { summary: 'string' },
-      },
-    },
-    vModel: {
-      control: 'text',
-      description: 'Data binding to Vue ref',
-      table: {
-        category: 'Native',
-        defaultValue: { summary: 'None' },
-        type: { summary: 'Ref' },
-      },
-    },
-    valid: disabledArgType,
-    validators: {
-      ...formatArgTypeCheck({ VALIDATOR }),
-    },
-  },
-  args: {
-    dataTrack: '',
-    error: '',
-    errorDisplay: undefined,
-    handleValid: 'doSomething',
-    inputId: '',
-    label: 'Input label',
-    maxlength: '',
-    minlength: '',
-    name: '',
-    required: undefined,
-    rows: '',
-    supportingText: '',
-    vModel: '',
-  },
-  component: TideInputTextarea,
-  parameters,
-  render,
-  tags: ['autodocs'],
-  title: 'Components/TideInputTextarea',
-};
-
-export const Demo = {};

package/src/stories/TideLink.stories.ts

@@ -1,127 +0,0 @@
-import { action } from '@storybook/addon-actions';
-
-import TideLink from '@/components/TideLink.vue';
-import * as STANDARD_ELEMENT from '@/types/Element';
-import * as STANDARD_ICON from '@/types/Icon';
-import {
-  argTypeBooleanUnrequired,
-  click,
-  dataTrack,
-  formatArgType,
-  formatValueAsConstant,
-  prependNoneAsUndefined,
-} from '@/utilities/storybook';
-
-import type { StoryContext } from '@storybook/vue3';
-
-type Args = InstanceType<typeof TideLink>['$props'] & {
-  click: string;
-};
-
-const ELEMENT = prependNoneAsUndefined(STANDARD_ELEMENT.ELEMENT);
-const ICON = prependNoneAsUndefined(STANDARD_ICON.ICON);
-
-const formatSnippet = (code: string, context: StoryContext) => {
-  const { args, argTypes } = context;
-
-  const argsWithValues: string[] = [];
-  const { element, iconLeading, iconTrailing } = args;
-
-  if (args.dataTrack !== '') argsWithValues.push(`:data-track="${args.dataTrack}"`);
-  if (args.element !== undefined)
-    argsWithValues.push(`:element="${formatValueAsConstant({ element: element }, argTypes)}"`);
-  if (args.href !== undefined && args.element !== ELEMENT.BUTTON) 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.subtle !== undefined) argsWithValues.push(`:subtle="${args.subtle}"`);
-  if (args.click !== undefined && args.element === ELEMENT.BUTTON) argsWithValues.push(`@click="${args.click}"`);
-
-  return `<TideLink ${argsWithValues.join(' ')} />`;
-};
-
-const parameters = {
-  docs: {
-    source: {
-      format: 'vue',
-      language: 'html',
-      transform: formatSnippet,
-    },
-  },
-};
-
-const render = (args: Args) => ({
-  components: { TideLink },
-  methods: {
-    handleClick: () => {
-      if (args.element !== ELEMENT.LINK && args.click) {
-        action('TideLink clicked')({});
-      }
-    },
-  },
-  setup: () => ({ args }),
-  template: '<TideLink @click="handleClick" v-bind="args" />',
-});
-
-export default {
-  argTypes: {
-    click: {
-      ...click,
-      if: { arg: 'element', eq: ELEMENT.BUTTON },
-    },
-    dataTrack,
-    element: {
-      ...formatArgType({ ELEMENT }),
-      table: {
-        defaultValue: { summary: 'LINK' },
-        type: { summary: 'Element' },
-      },
-    },
-    href: {
-      if: { arg: 'element', eq: ELEMENT.LINK },
-      table: {
-        defaultValue: { summary: 'None' },
-        type: { summary: 'string' },
-      },
-    },
-    iconLeading: {
-      ...formatArgType({ ICON }),
-    },
-    iconTrailing: {
-      ...formatArgType({ ICON }),
-    },
-    isNewTab: {
-      ...argTypeBooleanUnrequired,
-      if: { arg: 'element', eq: ELEMENT.LINK },
-    },
-    label: {
-      control: 'text',
-      table: {
-        defaultValue: { summary: 'None' },
-        type: { summary: 'string' },
-      },
-    },
-    subtle: argTypeBooleanUnrequired,
-  },
-  args: {
-    click: 'doSomething',
-    dataTrack: '',
-    element: undefined,
-    href: '#',
-    iconLeading: undefined,
-    iconTrailing: undefined,
-    isNewTab: undefined,
-    label: 'Demo',
-    subtle: undefined,
-  },
-  component: TideLink,
-  parameters,
-  render,
-  tags: ['autodocs'],
-  title: 'Components/TideLink',
-};
-
-export const Demo = {};

package/src/stories/TideMenuItem.stories.ts

@@ -1,117 +0,0 @@
-import { action } from '@storybook/addon-actions';
-
-import TideMenuItem from '@/components/TideMenuItem.vue';
-import * as STANDARD_ELEMENT from '@/types/Element';
-import * as STANDARD_ICON from '@/types/Icon';
-import {
-  argTypeBooleanUnrequired,
-  click,
-  dataTrack,
-  formatArgType,
-  formatValueAsConstant,
-  prependNoneAsUndefined,
-} from '@/utilities/storybook';
-
-import type { StoryContext } from '@storybook/vue3';
-
-type Args = InstanceType<typeof TideMenuItem>['$props'] & {
-  click: string;
-};
-
-const ELEMENT = prependNoneAsUndefined(STANDARD_ELEMENT.ELEMENT);
-const ICON = prependNoneAsUndefined(STANDARD_ICON.ICON);
-
-const formatSnippet = (code: string, context: StoryContext) => {
-  const { args, argTypes } = context;
-
-  const argsWithValues: string[] = [];
-  const { element, iconTrailing } = args;
-
-  if (args.dataTrack !== '') argsWithValues.push(`data-track="${args.dataTrack}"`);
-  if (args.element !== undefined)
-    argsWithValues.push(`:element="${formatValueAsConstant({ element: element }, argTypes)}"`);
-  if (args.href !== undefined && args.element !== ELEMENT.BUTTON) argsWithValues.push(`href="${args.href}"`);
-  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 && args.element === ELEMENT.BUTTON) argsWithValues.push(`@click="${args.click}"`);
-
-  return `<TideMenuItem ${argsWithValues.join(' ')} />`;
-};
-
-const parameters = {
-  docs: {
-    source: {
-      format: 'vue',
-      language: 'html',
-      transform: formatSnippet,
-    },
-  },
-};
-
-const render = (args: Args) => ({
-  components: { TideMenuItem },
-  methods: {
-    handleClick: () => {
-      if (args.element !== ELEMENT.LINK && args.click) {
-        action('TideMenuItem clicked')({});
-      }
-    },
-  },
-  setup: () => ({ args }),
-  template: '<TideMenuItem @click="handleClick" v-bind="args" />',
-});
-
-export default {
-  argTypes: {
-    click: {
-      ...click,
-      if: { arg: 'element', eq: ELEMENT.BUTTON },
-    },
-    dataTrack,
-    element: {
-      ...formatArgType({ ELEMENT }),
-      table: {
-        defaultValue: { summary: 'LINK' },
-        type: { summary: 'Element' },
-      },
-    },
-    href: {
-      table: {
-        defaultValue: { summary: 'None' },
-        type: { summary: 'string' },
-      },
-    },
-    iconTrailing: {
-      ...formatArgType({ ICON }),
-    },
-    isNewTab: {
-      ...argTypeBooleanUnrequired,
-      if: { arg: 'element', eq: ELEMENT.LINK },
-    },
-    label: {
-      control: 'text',
-      table: {
-        defaultValue: { summary: 'None' },
-        type: { summary: 'string' },
-      },
-    },
-  },
-  args: {
-    click: 'doSomething',
-    dataTrack: '',
-    element: undefined,
-    href: '#',
-    iconTrailing: undefined,
-    isNewTab: undefined,
-    label: 'Demo',
-  },
-  component: TideMenuItem,
-  parameters,
-  render,
-  tags: ['autodocs'],
-  title: 'Components/TideMenuItem',
-};
-
-export const Demo = {};

package/src/stories/TideModal.stories.ts

@@ -1,219 +0,0 @@
-import { action } from '@storybook/addon-actions';
-import { compile, h, ref, watch } from 'vue';
-
-import TideButton from '@/components/TideButton.vue';
-import TideIcon from '@/components/TideIcon.vue';
-import TideLink from '@/components/TideLink.vue';
-import TideModal from '@/components/TideModal.vue';
-import { ELEMENT } from '@/types/Element';
-import { ICON } from '@/types/Icon';
-import { PRIORITY } from '@/types/Priority';
-import { SIZE, SIZE_BUTTON } from '@/types/Size';
-import { CSS } from '@/types/Styles';
-import { TARGET } from '@/types/Target';
-import {
-  argTypeBooleanUnrequired,
-  disabledArgType,
-  doSomething,
-  doSomethingElse,
-  lineBreak,
-  tab,
-} from '@/utilities/storybook';
-
-import type { StoryContext } from '@storybook/vue3';
-
-type Args = InstanceType<typeof TideModal>['$props'] & {
-  default: string;
-  footer: string;
-  handleBack: string;
-  handleClose: string;
-  vModel: boolean;
-};
-
-const formatSnippet = (code: string, context: StoryContext) => {
-  const { args } = context;
-
-  const argsWithValues: string[] = [`v-model="${args.vModel}"`];
-  const slotContentIndentationFixed = (args.default as string).replace(/(<\/[^>]+>)$/, `${tab}$1`);
-
-  if (args.isBackButton !== undefined) argsWithValues.push(`:is-back-button="${args.isBackButton}"`);
-  if (args.isDismissible !== undefined) argsWithValues.push(`:is-dismissible="${args.isDismissible}"`);
-  if (args.title !== undefined) argsWithValues.push(`title="${args.title}"`);
-  if (args.width !== '') argsWithValues.push(`width="${args.width}"`);
-
-  if (args.handleBack !== undefined) argsWithValues.push(`@back="${args.handleBack}"`);
-
-  return (
-    `<TideModal ${argsWithValues.join(' ')}>${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: Args, context: StoryContext) => {
-  const handleBack = () => {
-    action('Back button pressed')({});
-    try {
-      const callback = eval(args.handleBack);
-      if (callback) callback();
-    } catch {
-      alert('Please specify a valid handler in the "back" control.');
-    }
-  };
-
-  const handleOpenModalClick = () => {
-    context.updateArgs({ ...args, vModel: true });
-  };
-
-  const handleIsOpenChange = (value: boolean) => {
-    context.updateArgs({ ...args, vModel: value });
-  };
-
-  return {
-    components: { TideButton, TideModal },
-    methods: {
-      doSomething,
-      doSomethingElse,
-      handleBack,
-      handleIsOpenChange,
-      handleOpenModalClick,
-    },
-    render: () => {
-      const isOpen = ref(args.vModel);
-
-      watch(isOpen, () => {
-        args.vModel = isOpen.value;
-      });
-
-      watch(
-        () => args.vModel,
-        (newValue) => {
-          isOpen.value = newValue;
-        }
-      );
-
-      // Wrap compiled footer in a component with TideButton registered
-      const Footer = args.footer
-        ? {
-            components: { CSS, TideButton, TideIcon, TideLink },
-            render: compile(`<div class="tide-display-flex tide-axis1-end tide-width-full">${args.footer}</div>`),
-            setup: () => ({ CSS, ELEMENT, ICON, PRIORITY, SIZE, SIZE_BUTTON, TARGET }),
-          }
-        : null;
-
-      // Render function cannot use "template" method if required to compile Vue components.
-      return h('div', [
-        h(TideButton, {
-          label: 'Open Modal',
-          onClick: handleOpenModalClick,
-        }),
-        h(
-          TideModal,
-          {
-            ...args,
-            'modelValue': isOpen.value,
-            'onBack': handleBack,
-            'onUpdate:modelValue': handleIsOpenChange,
-          },
-          {
-            default: () => h('div', { innerHTML: args.default }),
-            footer: () => (Footer ? h(Footer) : null),
-          }
-        ),
-      ]);
-    },
-    setup: () => ({ args }),
-  };
-};
-
-export default {
-  argTypes: {
-    back: 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, TideButton, TideLink' },
-      },
-    },
-    handleBack: {
-      control: 'text',
-      name: 'back',
-      table: {
-        category: 'Events',
-        defaultValue: { summary: 'None' },
-        type: { summary: '() => void' },
-      },
-    },
-    isBackButton: {
-      ...argTypeBooleanUnrequired,
-      table: {
-        defaultValue: { summary: 'False' },
-      },
-    },
-    isDismissible: {
-      ...argTypeBooleanUnrequired,
-      table: {
-        defaultValue: { summary: 'False' },
-      },
-    },
-    title: {
-      table: {
-        defaultValue: { summary: 'None' },
-      },
-    },
-    vModel: {
-      control: 'boolean',
-      description: 'Data binding to Vue ref',
-      table: {
-        category: 'Native',
-        defaultValue: { summary: 'None' },
-        type: { summary: 'Ref<boolean>' },
-      },
-    },
-    width: {
-      table: {
-        defaultValue: { summary: 'None' },
-      },
-    },
-  },
-  args: {
-    default: `Default Slot Demo`,
-    footer: '<TideButton label="Footer Slot Demo" />',
-    handleBack: 'doSomething',
-    isBackButton: undefined,
-    isDismissible: undefined,
-    title: 'Modal Demo',
-    vModel: false,
-    width: '',
-  },
-  component: TideModal,
-  parameters,
-  render,
-  tags: ['autodocs'],
-  title: 'Components/TideModal',
-};
-
-export const Demo = {};

package/src/stories/TidePagination.stories.ts

@@ -1,100 +0,0 @@
-import { ref, watch } from 'vue';
-
-import TidePagination from '@/components/TidePagination.vue';
-import * as STANDARD_ELEMENT from '@/types/Element';
-import {
-  argTypeBooleanUnrequired,
-  change,
-  disabledArgType,
-  doSomething,
-  parameters,
-  prependNoneAsUndefined,
-} from '@/utilities/storybook';
-
-import type { StoryContext } from '@storybook/vue3';
-
-type Args = InstanceType<typeof TidePagination>['$props'] & {
-  handleChange: string;
-  vModel: number;
-};
-
-const ELEMENT_BROAD = prependNoneAsUndefined(STANDARD_ELEMENT.ELEMENT_BROAD);
-
-const render = (args: Args, context: StoryContext) => ({
-  components: { TidePagination },
-  methods: {
-    doSomething,
-    handleIndexChange: (value: number) => {
-      context.updateArgs({ ...args, vModel: value });
-    },
-  },
-  setup: () => {
-    const currentIndex = ref(args.vModel);
-
-    watch(currentIndex, () => {
-      args.vModel = currentIndex.value;
-    });
-
-    watch(
-      () => args.vModel,
-      (newValue) => {
-        currentIndex.value = newValue;
-      }
-    );
-
-    return {
-      args,
-      currentIndex,
-    };
-  },
-  template: `<TidePagination v-bind="args" v-model="currentIndex" @update:modelValue="handleIndexChange" />`,
-});
-
-export default {
-  argTypes: {
-    change: disabledArgType,
-    disabled: {
-      ...argTypeBooleanUnrequired,
-      description: 'Determines clickability<br />(Button only)',
-      if: {
-        arg: 'element',
-        eq: ELEMENT_BROAD.BUTTON,
-      },
-    },
-    handleChange: {
-      ...change,
-      table: {
-        category: 'Events',
-        defaultValue: { summary: 'None' },
-        type: { summary: '(pageIndex: number) => void' },
-      },
-    },
-    pageTotal: {
-      control: {
-        min: 1,
-        type: 'number',
-      },
-    },
-    vModel: {
-      control: 'number',
-      description: 'Data binding to Vue ref',
-      table: {
-        category: 'Native',
-        defaultValue: { summary: 'None' },
-        type: { summary: 'Ref<number>' },
-      },
-    },
-  },
-  args: {
-    handleChange: 'doSomething',
-    pageTotal: 5,
-    vModel: 1,
-  },
-  component: TidePagination,
-  parameters,
-  render,
-  tags: ['autodocs'],
-  title: 'Components/TidePagination',
-};
-
-export const Demo = {};