tide-design-system 2.5.13 → 2.5.14

package/src/stories/Template.stories.ts

@@ -1,73 +0,0 @@
-/* eslint-disable storybook/story-exports */
-
-// IMPORTS
-import TideChipInput from '@/components/TideChipInput.vue';
-import { ICON } from '@/types/Icon';
-import { argTypeBooleanUnrequired, formatArgType, formatSnippet } from '@/utilities/storybook';
-
-type Args = InstanceType<typeof TideChipInput>['$props'];
-
-// PARAMETERS
-const parameters = {
-  docs: {
-    source: {
-      format: 'vue',
-      language: 'html',
-      transform: formatSnippet,
-    },
-  },
-};
-
-// STANDARD FUNCTIONS
-const formatArgs = (args: Args) => {
-  return { args };
-};
-
-const render = (args: Args) => ({
-  components: { TideChipInput },
-  setup() {
-    return formatArgs(args);
-  },
-  template: '<TideChipInput class="tide-display-inline-flex" v-bind="args" />',
-  updated() {
-    return formatArgs(args);
-  },
-});
-
-// EXPORT
-export default {
-  argTypes: {
-    argTypeBoilerplate: {
-      ...formatArgType({ ICON }),
-      description: 'Prop description',
-    },
-    argTypeBooleanUnrequired: {
-      ...argTypeBooleanUnrequired,
-    },
-    argTypeComplete: {
-      control: 'text',
-      description: 'Complete ArgType<br />(Demonstrates all standard argType properties for this project)', // Description in Description column
-      name: 'Complete', // Name column
-      table: {
-        defaultValue: { summary: 'None' }, // Default column
-        type: { summary: 'string' }, // Type in Description column
-      },
-    },
-    label: {
-      control: 'text',
-      description: 'Chip text',
-      table: {
-        defaultValue: { summary: 'None' },
-        type: { summary: 'string' },
-      },
-    },
-  },
-  args: {
-    label: 'Demo', // Value in Control column
-  },
-  component: TideChipInput,
-  parameters,
-  render,
-  tags: ['autodocs'],
-  title: 'Hidden/Story Template',
-};

package/src/stories/TideAccordionItem.stories.ts

@@ -1,91 +0,0 @@
-import { ref, watch } from 'vue';
-
-import TideAccordionItem from '@/components/TideAccordionItem.vue';
-import { argTypeBooleanUnrequired, dataTrack, doSomething, parameters } from '@/utilities/storybook';
-
-import type { StoryContext } from '@storybook/vue3';
-
-type Args = InstanceType<typeof TideAccordionItem>['$props'] & {
-  vModel: boolean;
-};
-
-const render = (args: Args, context: StoryContext) => ({
-  components: { TideAccordionItem },
-  methods: {
-    doSomething,
-    handleIsExpandedChange: (value: boolean) => {
-      context.updateArgs({ ...args, vModel: value });
-    },
-  },
-  setup: () => {
-    const isExpanded = ref(args.vModel);
-
-    watch(isExpanded, () => {
-      args.vModel = isExpanded.value;
-    });
-
-    watch(
-      () => args.vModel,
-      (newValue) => {
-        isExpanded.value = newValue;
-      }
-    );
-
-    return {
-      args,
-      isExpanded,
-    };
-  },
-  template: `<TideAccordionItem v-bind="args" v-model="isExpanded" @update:modelValue="handleIsExpandedChange">{{ args.default }}</TideAccordionItem>`,
-});
-
-export default {
-  argTypes: {
-    dataTrack,
-    default: {
-      control: 'text',
-      description: 'Content exposed when expanded',
-      table: {
-        defaultValue: { summary: 'None' },
-        type: { summary: 'HTML' },
-      },
-    },
-    disabled: argTypeBooleanUnrequired,
-    hasBottomDivider: argTypeBooleanUnrequired,
-    hasTopDivider: argTypeBooleanUnrequired,
-    isOptional: argTypeBooleanUnrequired,
-    label: {
-      control: 'text',
-      table: {
-        defaultValue: { summary: 'None' },
-        type: { summary: 'string' },
-      },
-    },
-    vModel: {
-      control: 'boolean',
-      description: 'Data binding to Vue ref',
-      table: {
-        category: 'Native',
-        defaultValue: { summary: 'None' },
-        type: { summary: 'Ref<boolean>' },
-      },
-    },
-  },
-  args: {
-    dataTrack: '',
-    default: 'Lorem Ipsum',
-    disabled: undefined,
-    hasBottomDivider: undefined,
-    hasTopDivider: undefined,
-    isOptional: undefined,
-    label: 'Demo',
-    vModel: true,
-  },
-  component: TideAccordionItem,
-  parameters,
-  render,
-  tags: ['autodocs'],
-  title: 'Components/TideAccordionItem',
-};
-
-export const Demo = {};

package/src/stories/TideAlert.stories.ts

@@ -1,133 +0,0 @@
-import { action } from '@storybook/addon-actions';
-
-import TideAlert from '@/components/TideAlert.vue';
-import * as STANDARD_ALERT from '@/types/Alert';
-import {
-  argTypeBooleanUnrequired,
-  dataTrack,
-  disabledArgType,
-  doSomething,
-  formatArgType,
-  parameters,
-  prependNoneAsUndefined,
-} from '@/utilities/storybook';
-
-type Args = InstanceType<typeof TideAlert>['$props'] & {
-  handleClose: string;
-  handleCtaClick: string;
-};
-
-const render = (args: Args) => ({
-  components: { TideAlert },
-  methods: {
-    doSomething,
-    handleClose: () => {
-      action('TideAlert closed')({});
-
-      try {
-        const callback = eval(args.handleClose);
-
-        if (callback) {
-          callback();
-        }
-      } catch {
-        alert('Please specify a valid handler in the "close" control.');
-      }
-    },
-    handleCtaClick: () => {
-      action('TideAlert "Action" CTA clicked')({});
-
-      try {
-        const callback = eval(args.handleCtaClick);
-
-        if (callback) {
-          callback();
-        }
-      } catch {
-        alert('Please specify a valid handler in the "ctaClick" control.');
-      }
-    },
-  },
-  setup: () => ({ args }),
-  template: `<TideAlert @close="handleClose" @click="handleCtaClick" v-bind="args">{{ args.default }}</TideAlert>`,
-});
-
-const ALERT = prependNoneAsUndefined(STANDARD_ALERT.ALERT);
-
-export default {
-  argTypes: {
-    click: disabledArgType,
-    close: disabledArgType,
-    ctaLabel: {
-      control: 'text',
-      table: {
-        defaultValue: { summary: 'None' },
-        type: { summary: 'string' },
-      },
-    },
-    dataTrack,
-    default: {
-      control: 'text',
-      description: 'Body text',
-      table: {
-        defaultValue: { summary: 'None' },
-        type: { summary: 'HTML' },
-      },
-    },
-    handleClose: {
-      control: 'text',
-      description: 'JS code or function to execute on close event',
-      isEmit: true,
-      name: 'close',
-      table: {
-        category: 'Events',
-        defaultValue: { summary: 'None' },
-        type: { summary: '() => void' },
-      },
-    },
-    handleCtaClick: {
-      control: 'text',
-      description: 'JS code or function to execute on CTA click event',
-      isEmit: true,
-      name: 'click',
-      table: {
-        category: 'Events',
-        defaultValue: { summary: 'None' },
-        type: { summary: '() => void' },
-      },
-    },
-    heading: {
-      control: 'text',
-      table: {
-        defaultValue: { summary: 'None' },
-        type: { summary: 'HTML' },
-      },
-    },
-    isDismissible: argTypeBooleanUnrequired,
-    isToast: argTypeBooleanUnrequired,
-    type: {
-      ...formatArgType({ ALERT }),
-      table: {
-        defaultValue: { summary: 'ALERT' },
-      },
-    },
-  },
-  args: {
-    ctaLabel: '',
-    dataTrack: '',
-    default: '',
-    handleClose: 'doSomething',
-    handleCtaClick: 'doSomething',
-    heading: 'Heading',
-    isDismissible: undefined,
-    isToast: undefined,
-    type: undefined,
-  },
-  component: TideAlert,
-  parameters,
-  render,
-  tags: ['autodocs'],
-  title: 'Components/TideAlert',
-};
-
-export const Demo = {};

package/src/stories/TideBadge.stories.ts

@@ -1,90 +0,0 @@
-import TideBadge from '@/components/TideBadge.vue';
-import { BADGE_COLOR as STANDARD_BADGE_COLOR } from '@/types/Badge';
-import * as STANDARD_ICON from '@/types/Icon';
-import { argTypeBooleanUnrequired, formatArgType, prependNoneAsUndefined } from '@/utilities/storybook';
-
-import type { StoryContext } from '@storybook/vue3';
-
-type Args = InstanceType<typeof TideBadge>['$props'];
-
-const BADGE_COLOR = prependNoneAsUndefined(STANDARD_BADGE_COLOR);
-const ICON = prependNoneAsUndefined(STANDARD_ICON.ICON);
-
-const formatSnippet = (code: string, context: StoryContext) => {
-  const { argTypes, args } = context;
-  const argsWithValues: string[] = [];
-
-  if (args.color !== undefined) argsWithValues.push(`:color="${args.color}"`);
-  if (args.iconLeading !== undefined) argsWithValues.push(`:icon-leading="${args.iconLeading}"`);
-  if (args.isFloating !== undefined && args.color === undefined)
-    argsWithValues.push(`:is-floating="${args.isFloating}"`);
-  if (args.label !== undefined) argsWithValues.push(`:label="${args.label}"`);
-
-  if (argTypes.iconLeading.type) argTypes.iconLeading.type.required = args.color !== undefined;
-  if (argTypes.isFloating.table) argTypes.isFloating.table.disable = args.color !== undefined;
-
-  return `<TideBadge ${argsWithValues.join(' ')} />`;
-};
-
-const parameters = {
-  docs: {
-    source: {
-      format: 'vue',
-      language: 'html',
-      transform: formatSnippet,
-    },
-  },
-};
-
-const render = (args: Args) => ({
-  components: { TideBadge },
-  setup: () => ({ args }),
-  template: `<TideBadge v-bind="args" />`,
-});
-
-export default {
-  argTypes: {
-    color: {
-      ...formatArgType({ BADGE_COLOR }),
-      table: {
-        category: 'Props',
-        defaultValue: { summary: 'None' },
-      },
-    },
-    iconLeading: {
-      ...formatArgType({ ICON }),
-      table: {
-        category: 'Props',
-        defaultValue: { summary: 'None' },
-      },
-    },
-    isFloating: {
-      ...argTypeBooleanUnrequired,
-      table: {
-        category: 'Props',
-        defaultValue: { summary: 'None' },
-      },
-    },
-    label: {
-      control: 'text',
-      table: {
-        category: 'Props',
-        defaultValue: { summary: 'None' },
-        type: { summary: 'string' },
-      },
-    },
-  },
-  args: {
-    color: BADGE_COLOR.None,
-    iconLeading: ICON.None,
-    isFloating: undefined,
-    label: 'Demo',
-  },
-  component: TideBadge,
-  parameters,
-  render,
-  tags: ['autodocs'],
-  title: 'Components/TideBadge',
-};
-
-export const Demo = {};

package/src/stories/TideBadgeTrustedPartner.stories.ts

@@ -1,34 +0,0 @@
-import TideBadgeTrustedPartner from '@/components/TideBadgeTrustedPartner.vue';
-import * as STANDARD_BADGE from '@/types/Storybook';
-import { formatArgType, parameters, prependNoneAsUndefined } from '@/utilities/storybook';
-
-type Args = InstanceType<typeof TideBadgeTrustedPartner>['$props'];
-
-const BADGE_TRUSTED = prependNoneAsUndefined(STANDARD_BADGE.BADGE_TRUSTED);
-
-const render = (args: Args) => ({
-  components: { TideBadgeTrustedPartner },
-  setup: () => ({ args }),
-  template: `<TideBadgeTrustedPartner v-bind="args" />`,
-});
-
-export default {
-  argTypes: {
-    years: {
-      ...formatArgType({ BADGE_TRUSTED }),
-      table: {
-        defaultValue: { summary: BADGE_TRUSTED.YEARS_5 },
-      },
-    },
-  },
-  args: {
-    years: undefined,
-  },
-  component: TideBadgeTrustedPartner,
-  parameters,
-  render,
-  tags: ['autodocs'],
-  title: 'Components/TideBadgeTrustedPartner',
-};
-
-export const Demo = {};

package/src/stories/TideBadgeVerifiedVehicle.stories.ts

@@ -1,22 +0,0 @@
-import TideBadgeVerifiedVehicle from '@/components/TideBadgeVerifiedVehicle.vue';
-import { parameters } from '@/utilities/storybook';
-
-type Args = InstanceType<typeof TideBadgeVerifiedVehicle>['$props'];
-
-const render = (args: Args) => ({
-  components: { TideBadgeVerifiedVehicle },
-  setup: () => ({ args }),
-  template: `<TideBadgeVerifiedVehicle v-bind="args" />`,
-});
-
-export default {
-  argTypes: {},
-  args: {},
-  component: TideBadgeVerifiedVehicle,
-  parameters,
-  render,
-  tags: ['autodocs'],
-  title: 'Components/TideBadgeVerifiedVehicle',
-};
-
-export const Demo = {};

package/src/stories/TideBreadCrumbs.stories.ts

@@ -1,42 +0,0 @@
-import TideBreadCrumbs from '@/components/TideBreadCrumbs.vue';
-import { parameters } from '@/utilities/storybook';
-
-import type { BreadCrumb } from '@/types/BreadCrumb';
-
-const breadCrumbs: BreadCrumb[] = [
-  {
-    dataTrack: 'Home Bread Crumb Click',
-    label: 'Home',
-    url: '/',
-  },
-  {
-    dataTrack: 'SRP Bread Crumb Click',
-    label: 'Search results',
-    url: '/rvs-for-sale',
-  },
-  {
-    label: 'Vehicle details',
-  },
-];
-
-export default {
-  argTypes: {
-    breadCrumbs: {
-      control: 'object',
-      isCustom: true,
-      table: {
-        defaultValue: { summary: '[]' },
-        type: { summary: 'BreadCrumb[]' },
-      },
-    },
-  },
-  args: {
-    breadCrumbs: breadCrumbs,
-  },
-  component: TideBreadCrumbs,
-  parameters,
-  tags: ['autodocs'],
-  title: 'Components/TideBreadCrumbs',
-};
-
-export const Demo = {};

package/src/stories/TideButton.stories.ts

@@ -1,132 +0,0 @@
-import { action } from '@storybook/addon-actions';
-
-import TideButton from '@/components/TideButton.vue';
-import * as STANDARD_ELEMENT from '@/types/Element';
-import * as STANDARD_ICON from '@/types/Icon';
-import * as STANDARD_PRIORITY from '@/types/Priority';
-import * as STANDARD_SIZE_BUTTON from '@/types/Size';
-import * as STANDARD_TYPE_BUTTON from '@/types/Type';
-import {
-  argTypeBooleanUnrequired,
-  click,
-  dataTrack,
-  doSomething,
-  formatArgType,
-  parameters,
-  prependNoneAsUndefined,
-} from '@/utilities/storybook';
-
-type Args = InstanceType<typeof TideButton>['$props'] & {
-  click: string;
-};
-
-const ELEMENT = prependNoneAsUndefined(STANDARD_ELEMENT.ELEMENT);
-const ICON = prependNoneAsUndefined(STANDARD_ICON.ICON);
-const PRIORITY = prependNoneAsUndefined(STANDARD_PRIORITY.PRIORITY);
-delete PRIORITY['FLOATING']; // Floating is only available in TideButtonIcon
-const SIZE_BUTTON = prependNoneAsUndefined(STANDARD_SIZE_BUTTON.SIZE_BUTTON);
-const BUTTON_TYPE = prependNoneAsUndefined(STANDARD_TYPE_BUTTON.BUTTON_TYPE);
-
-const render = (args: Args) => ({
-  components: { TideButton },
-  methods: {
-    doSomething,
-    handleClick: () => {
-      action('TideButton clicked')({});
-
-      try {
-        const callback = eval(args.click);
-
-        if (callback) {
-          callback();
-        }
-      } catch {
-        alert('Please specify a valid handler in the "click" control.');
-      }
-    },
-  },
-  setup: () => ({ args }),
-  template: `<TideButton @click="handleClick" v-bind="args" />`,
-});
-
-export default {
-  argTypes: {
-    click: {
-      ...click,
-      if: { arg: 'element', neq: ELEMENT.LINK },
-    },
-    dataTrack,
-    disabled: {
-      ...argTypeBooleanUnrequired,
-      if: { arg: 'element', neq: ELEMENT.LINK },
-    },
-    element: {
-      ...formatArgType({ ELEMENT }),
-      table: {
-        defaultValue: { summary: 'BUTTON' },
-      },
-    },
-    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' },
-      },
-    },
-    priority: {
-      ...formatArgType({ PRIORITY }),
-      table: {
-        defaultValue: { summary: 'PRIMARY' },
-      },
-    },
-    size: {
-      ...formatArgType({ SIZE_BUTTON }),
-      table: {
-        defaultValue: { summary: 'LARGE' },
-      },
-    },
-    type: {
-      ...formatArgType({ BUTTON_TYPE }),
-      table: {
-        defaultValue: { summary: 'BUTTON' },
-      },
-    },
-  },
-  args: {
-    click: 'doSomething',
-    dataTrack: '',
-    disabled: undefined,
-    element: undefined,
-    href: 'https://www.sample.com',
-    iconLeading: undefined,
-    iconTrailing: undefined,
-    isNewTab: undefined,
-    label: 'Demo',
-    priority: undefined,
-    size: undefined,
-  },
-  component: TideButton,
-  parameters,
-  render,
-  tags: ['autodocs'],
-  title: 'Components/TideButton',
-};
-
-export const Demo = {};