tide-design-system 2.2.16 → 2.3.1

package/src/stories/TideBadge.stories.ts

@@ -5,6 +5,8 @@ import { argTypeBooleanUnrequired, formatArgType, prependNoneAsUndefined } from
 
 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);
 
@@ -34,7 +36,7 @@ const parameters = {
   },
 };
 
-const render = (args: any) => ({
+const render = (args: Args) => ({
   components: { TideBadge },
   setup: () => ({ args }),
   template: `<TideBadge v-bind="args" />`,

package/src/stories/TideBadgeTrustedPartner.stories.ts

@@ -2,9 +2,11 @@ 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: any) => ({
+const render = (args: Args) => ({
   components: { TideBadgeTrustedPartner },
   setup: () => ({ args }),
   template: `<TideBadgeTrustedPartner v-bind="args" />`,

package/src/stories/TideBadgeVerifiedVehicle.stories.ts

@@ -1,7 +1,9 @@
 import TideBadgeVerifiedVehicle from '@/components/TideBadgeVerifiedVehicle.vue';
 import { parameters } from '@/utilities/storybook';
 
-const render = (args: any) => ({
+type Args = InstanceType<typeof TideBadgeVerifiedVehicle>['$props'];
+
+const render = (args: Args) => ({
   components: { TideBadgeVerifiedVehicle },
   setup: () => ({ args }),
   template: `<TideBadgeVerifiedVehicle v-bind="args" />`,

package/src/stories/TideButton.stories.ts

@@ -15,12 +15,16 @@ import {
   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);
 const SIZE_BUTTON = prependNoneAsUndefined(STANDARD_SIZE_BUTTON.SIZE_BUTTON);
 
-const render = (args: any) => ({
+const render = (args: Args) => ({
   components: { TideButton },
   methods: {
     doSomething,

package/src/stories/TideButtonIcon.stories.ts

@@ -14,10 +14,14 @@ import {
   prependNoneAsUndefined,
 } from '@/utilities/storybook';
 
+type Args = InstanceType<typeof TideButtonIcon>['$props'] & {
+  click: string;
+};
+
 const ELEMENT = prependNoneAsUndefined(STANDARD_ELEMENT.ELEMENT);
 const PRIORITY = prependNoneAsUndefined(STANDARD_PRIORITY.PRIORITY);
 
-const render = (args: any) => ({
+const render = (args: Args) => ({
   components: { TideButtonIcon },
   methods: {
     doSomething,

package/src/stories/TideButtonPagination.stories.ts

@@ -12,9 +12,13 @@ import {
   prependNoneAsUndefined,
 } from '@/utilities/storybook';
 
+type Args = InstanceType<typeof TideButtonPagination>['$props'] & {
+  click: string;
+};
+
 const ELEMENT_TEXT_AS_ICON = prependNoneAsUndefined(STANDARD_ELEMENT.ELEMENT_TEXT_AS_ICON);
 
-const render = (args: any) => ({
+const render = (args: Args) => ({
   components: { TideButtonPagination },
   methods: {
     doSomething,

package/src/stories/TideButtonSegmented.stories.ts

@@ -4,6 +4,11 @@ import TideButtonSegmented from '@/components/TideButtonSegmented.vue';
 import { change, disabledArgType, doSomething, getLabelsFromOptions, parameters } from '@/utilities/storybook';
 
 import type { Tab } from '@/types/Tab';
+import type { StoryContext } from '@storybook/vue3';
+
+type Args = InstanceType<typeof TideButtonSegmented>['$props'] & {
+  handleChange: string;
+};
 
 const options = {
   'None': undefined,
@@ -27,13 +32,13 @@ const tabs: Tab[] = [
   },
 ];
 
-const render = (args: any, { updateArgs }: any) => ({
+const render = (args: Args, context: StoryContext) => ({
   components: { TideButtonSegmented },
   methods: {
     doSomething,
     handleChange: (index: number) => {
       action(`Current tab ${index}`)(index);
-      updateArgs({ ...args, activeTab: index });
+      context.updateArgs({ ...args, activeTab: index });
 
       try {
         const callback = eval(args.handleChange);

package/src/stories/TideCard.stories.ts

@@ -12,10 +12,14 @@ import {
   prependNoneAsUndefined,
 } from '@/utilities/storybook';
 
+type Args = InstanceType<typeof TideCard>['$props'] & {
+  click: string;
+};
+
 const TYPE_CARD = prependNoneAsUndefined(STANDARD_TYPE_CARD);
 const CARD_ICON = prependNoneAsUndefined(ICON);
 
-const render = (args: any) => ({
+const render = (args: Args) => ({
   components: { TideCard },
   methods: {
     doSomething,

package/src/stories/TideCarousel.stories.ts

@@ -6,6 +6,12 @@ import { argTypeBooleanUnrequired, disabledArgType, doSomething, lineBreak, tab
 
 import type { StoryContext } from '@storybook/vue3';
 
+type Args = InstanceType<typeof TideCarousel>['$props'] & {
+  bleed: number | string;
+  handleSlideChange: string;
+  handleSlidesAddedToView: string;
+};
+
 const formatSnippet = (code: string, context: StoryContext) => {
   const { args } = context;
 
@@ -44,7 +50,7 @@ const parameters = {
   },
 };
 
-const render = (args: any) => ({
+const render = (args: Args) => ({
   components: { TideCard, TideCarousel },
   methods: {
     doSomething,
@@ -94,7 +100,7 @@ const render = (args: any) => ({
     </li>
   </TideCarousel>`,
   updated() {
-    if (args.bleed === '') {
+    if (typeof args.bleed === 'string' && args.bleed === '') {
       args.bleed = 0;
     }
 

package/src/stories/TideChipAction.stories.ts

@@ -9,9 +9,11 @@ import {
   prependNoneAsUndefined,
 } from '@/utilities/storybook';
 
+type Args = InstanceType<typeof TideChipAction>['$props'];
+
 const ELEMENT = prependNoneAsUndefined(STANDARD_ELEMENT.ELEMENT);
 
-const render = (args: any) => ({
+const render = (args: Args) => ({
   components: { TideChipAction },
   setup: () => ({ args }),
   template: '<TideChipAction class="tide-display-inline-flex" v-bind="args" />',

package/src/stories/TideChipFilter.stories.ts

@@ -3,13 +3,19 @@ import { action } from '@storybook/addon-actions';
 import TideChipFilter from '@/components/TideChipFilter.vue';
 import { argTypeBooleanUnrequired, click, dataTrack, doSomething, parameters } from '@/utilities/storybook';
 
-const render = (args: any, { updateArgs }: any) => ({
+import type { StoryContext } from '@storybook/vue3';
+
+type Args = InstanceType<typeof TideChipFilter>['$props'] & {
+  handleClose: string;
+};
+
+const render = (args: Args, context: StoryContext) => ({
   components: { TideChipFilter },
   methods: {
     doSomething,
     handleClick: () => {
       action('TideChipFilter clicked')({});
-      updateArgs({ ...args, isActive: !args.isActive });
+      context.updateArgs({ ...args, isActive: !args.isActive });
 
       try {
         const callback = eval(args.handleClose);

package/src/stories/TideChipInput.stories.ts

@@ -3,7 +3,11 @@ import { action } from '@storybook/addon-actions';
 import TideChipInput from '@/components/TideChipInput.vue';
 import { click, dataTrack, doSomething, parameters } from '@/utilities/storybook';
 
-const render = (args: any) => ({
+type Args = InstanceType<typeof TideChipInput>['$props'] & {
+  click: string;
+};
+
+const render = (args: Args) => ({
   components: { TideChipInput },
   methods: {
     doSomething,

package/src/stories/TideDivider.stories.ts

@@ -2,13 +2,17 @@ import TideDivider from '@/components/TideDivider.vue';
 import { ORIENTATION as STANDARD_ORIENTATION } from '@/types/Orientation';
 import { disabledArgType, formatArgType, parameters, prependNoneAsUndefined } from '@/utilities/storybook';
 
-const formatArgs = (args: any) => {
+type Args = InstanceType<typeof TideDivider>['$props'] & {
+  flexDirection: string;
+};
+
+const formatArgs = (args: Args) => {
   args.flexDirection = args.orientation === ORIENTATION.VERTICAL ? 'tide-flex-row' : 'tide-flex-column';
 
   return { args };
 };
 
-const render = (args: any) => ({
+const render = (args: Args) => ({
   components: { TideDivider },
   setup: () => formatArgs(args),
   template: `<div :class="['tide-display-inline-flex', args.flexDirection]">

package/src/stories/TideImageBackground.stories.ts

@@ -5,6 +5,8 @@ import { argTypeBooleanUnrequired } from '@/utilities/storybook';
 import type { Source } from '@/types/Source';
 import type { StoryContext } from '@storybook/vue3';
 
+type Args = InstanceType<typeof TideImageBackground>['$props'];
+
 const formatSnippet = (_code: string, context: StoryContext) => {
   const { args } = context;
   const argsWithValues: string[] = [`alt="${args.alt}"`];
@@ -28,7 +30,7 @@ const parameters = {
   },
 };
 
-const render = (args: any) => ({
+const render = (args: Args) => ({
   components: { TideImageBackground },
   setup() {
     return { args };

package/src/stories/TideIndicator.stories.ts

@@ -1,7 +1,9 @@
 import TideIndicator from '@/components/TideIndicator.vue';
 import { parameters } from '@/utilities/storybook';
 
-const render = (args: any) => ({
+type Args = InstanceType<typeof TideIndicator>['$props'];
+
+const render = (args: Args) => ({
   components: { TideIndicator },
   setup: () => ({ args }),
   template: `<TideIndicator v-bind="args" />`,

package/src/stories/TideInputCheckbox.stories.ts

@@ -3,7 +3,13 @@ import { action } from '@storybook/addon-actions';
 import TideInputCheckbox from '@/components/TideInputCheckbox.vue';
 import { argTypeBooleanUnrequired, click, dataTrack, doSomething, parameters } from '@/utilities/storybook';
 
-const render = (args: any, context: any) => ({
+import type { StoryContext } from '@storybook/vue3';
+
+type Args = InstanceType<typeof TideInputCheckbox>['$props'] & {
+  click: string;
+};
+
+const render = (args: Args, context: StoryContext) => ({
   components: { TideInputCheckbox },
   methods: {
     doSomething,
@@ -11,7 +17,7 @@ const render = (args: any, context: any) => ({
       const input = context.canvasElement.querySelector('input');
 
       action('TideInputCheckbox clicked')({});
-      context.updateArgs({ ...args, checked: !input.checked === true, indeterminate: undefined });
+      context.updateArgs({ ...args, checked: !input?.checked === true, indeterminate: undefined });
 
       try {
         const callback = eval(args.click);

package/src/stories/TideInputRadio.stories.ts

@@ -3,7 +3,13 @@ import { action } from '@storybook/addon-actions';
 import TideInputRadio from '@/components/TideInputRadio.vue';
 import { argTypeBooleanUnrequired, click, dataTrack, doSomething, parameters } from '@/utilities/storybook';
 
-const render = (args: any, context: any) => ({
+import type { StoryContext } from '@storybook/vue3';
+
+type Args = InstanceType<typeof TideInputRadio>['$props'] & {
+  click: string;
+};
+
+const render = (args: Args, context: StoryContext) => ({
   components: { TideInputRadio },
   methods: {
     doSomething,
@@ -11,7 +17,7 @@ const render = (args: any, context: any) => ({
       const input = context.canvasElement.querySelector('input');
 
       action('TideInputRadio changed')({});
-      context.updateArgs({ ...args, checked: !input.checked });
+      context.updateArgs({ ...args, checked: !input?.checked });
 
       try {
         const callback = eval(args.click);

package/src/stories/TideInputSelect.stories.ts

@@ -12,6 +12,11 @@ import {
 } from '@/utilities/storybook';
 
 import type { SelectOption, SelectOptionGroup } from '@/types/Select';
+import type { StoryContext } from '@storybook/vue3';
+
+type Args = InstanceType<typeof TideInputSelect>['$props'] & {
+  change: string;
+};
 
 const options = {
   'Any': '',
@@ -82,7 +87,7 @@ const selectOptions: SelectOption[] = [
   },
 ];
 
-const render = (args: any, { updateArgs }: any) => ({
+const render = (args: Args, context: StoryContext) => ({
   components: { TideInputSelect },
   methods: {
     doSomething,
@@ -90,7 +95,7 @@ const render = (args: any, { updateArgs }: any) => ({
       const value = (event?.target as HTMLSelectElement).value;
 
       action('TideInputSelect changed')({});
-      updateArgs({ ...args, value });
+      context.updateArgs({ ...args, value });
 
       try {
         const callback = eval(args.change);

package/src/stories/TideInputText.stories.ts

@@ -15,18 +15,22 @@ import {
   prependNoneAsUndefined,
 } from '@/utilities/storybook';
 
+import type { StoryContext } from '@storybook/vue3';
+
+type Args = InstanceType<typeof TideInputText>['$props'];
+
 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) => ({
+const render = (args: Args, context: StoryContext) => ({
   components: { TideInputText },
   methods: {
     handleChange: () => {
       const input = context.canvasElement.querySelector('input');
 
       action('TideInputText changed')({});
-      context.updateArgs({ ...args, value: input.value });
+      context.updateArgs({ ...args, value: input?.value });
     },
   },
   setup: () => ({ args }),

package/src/stories/TideInputTextarea.stories.ts

@@ -3,14 +3,18 @@ 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) => ({
+import type { StoryContext } from '@storybook/vue3';
+
+type Args = InstanceType<typeof TideInputTextarea>['$props'];
+
+const render = (args: Args, context: StoryContext) => ({
   components: { TideInputTextarea },
   methods: {
     handleChange: () => {
       const input = context.canvasElement.querySelector('textarea');
 
       action('TideInputTextarea changed')({});
-      context.updateArgs({ ...args, value: input.value });
+      context.updateArgs({ ...args, value: input?.value });
     },
   },
   setup: () => ({ args }),

package/src/stories/TideLink.stories.ts

@@ -15,6 +15,10 @@ import {
 
 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 LINK_SIZE = prependNoneAsUndefined(STANDARD_LINK_SIZE.LINK_SIZE);
@@ -29,7 +33,7 @@ const formatSnippet = (code: string, context: StoryContext) => {
   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.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)
@@ -37,7 +41,7 @@ const formatSnippet = (code: string, context: StoryContext) => {
   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) argsWithValues.push(`@click="${args.click}"`);
+  if (args.click !== undefined && args.element === ELEMENT.BUTTON) argsWithValues.push(`@click="${args.click}"`);
 
   return `<TideLink ${argsWithValues.join(' ')} />`;
 };
@@ -52,7 +56,7 @@ const parameters = {
   },
 };
 
-const render = (args: any) => ({
+const render = (args: Args) => ({
   components: { TideLink },
   methods: {
     handleClick: () => {

package/src/stories/TideModal.stories.ts

@@ -1,7 +1,16 @@
 import { action } from '@storybook/addon-actions';
+import { compile, h } 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,
@@ -13,6 +22,14 @@ import {
 
 import type { StoryContext } from '@storybook/vue3';
 
+type Args = InstanceType<typeof TideModal>['$props'] & {
+  default: string;
+  footer: string;
+  handleBack: string;
+  handleChange: string;
+  handleClose: string;
+};
+
 const formatSnippet = (code: string, context: StoryContext) => {
   const { args } = context;
 
@@ -47,50 +64,74 @@ const parameters = {
   },
 };
 
-const render = (args: any, { updateArgs }: any) => ({
-  components: { TideButton, TideModal },
-  methods: {
-    doSomething,
-    doSomethingElse,
-    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.');
-      }
-    },
-    handleClose: () => {
-      action('Modal closed')({});
-      updateArgs({ ...args, isOpen: false });
-
-      try {
-        const callback = eval(args.handleClose);
-
-        if (callback) {
-          callback();
-        }
-      } catch {
-        alert('Please specify a valid handler in the "close" control.');
-      }
+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 handleClose = () => {
+    action('Modal closed')({});
+    context.updateArgs({ ...args, isOpen: false });
+    try {
+      const callback = eval(args.handleClose);
+      if (callback) callback();
+    } catch {
+      alert('Please specify a valid handler in the "close" control.');
+    }
+  };
+
+  const handleOpenModalClick = () => {
+    context.updateArgs({ ...args, isOpen: true });
+  };
+
+  return {
+    components: { TideButton, TideModal },
+    methods: {
+      doSomething,
+      doSomethingElse,
+      handleBack,
+      handleClose,
+      handleOpenModalClick,
     },
-    handleOpenModalClick: () => {
-      updateArgs({ ...args, isOpen: true });
+    render: () => {
+      // 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,
+            onBack: handleBack,
+            onClose: handleClose,
+          },
+          {
+            default: () => h('div', { innerHTML: args.default }),
+            footer: () => (Footer ? h(Footer) : null),
+          }
+        ),
+      ]);
     },
-  },
-  setup: () => ({ args }),
-  template: `
-  <TideButton label="Open Modal" @click="handleOpenModalClick" />
-  <TideModal v-bind="args" @close="handleClose" @back="handleBack">
-    ${args.default}
-    <template #footer>${args.footer}</template>
-  </TideModal>`,
-});
+    setup: () => ({ args }),
+  };
+};
 
 export default {
   argTypes: {
@@ -109,7 +150,7 @@ export default {
       description: 'Footer content',
       table: {
         defaultValue: { summary: 'None' },
-        type: { summary: 'HTML' },
+        type: { summary: 'HTML, TideButton, TideLink' },
       },
     },
     handleBack: {
@@ -166,7 +207,7 @@ export default {
     },
   },
   args: {
-    default: `<div>${lineBreak}${tab}Default Slot Demo${lineBreak}</div>`,
+    default: `Default Slot Demo`,
     footer: '<TideButton label="Footer Slot Demo" />',
     handleBack: 'doSomething',
     handleClose: 'doSomethingElse',

package/src/stories/TidePagination.stories.ts

@@ -11,15 +11,21 @@ import {
   prependNoneAsUndefined,
 } from '@/utilities/storybook';
 
+import type { StoryContext } from '@storybook/vue3';
+
+type Args = InstanceType<typeof TidePagination>['$props'] & {
+  handleChange: string;
+};
+
 const ELEMENT_TEXT_AS_ICON = prependNoneAsUndefined(STANDARD_ELEMENT.ELEMENT_TEXT_AS_ICON);
 
-const render = (args: any, { updateArgs }: any) => ({
+const render = (args: Args, context: StoryContext) => ({
   components: { TidePagination },
   methods: {
     doSomething,
     handleChange: (_event: Event, index: number) => {
       action(`Current page ${index}`)(index);
-      updateArgs({ ...args, pageCurrent: index });
+      context.updateArgs({ ...args, pageCurrent: index });
 
       try {
         const callback = eval(args.handleChange);

package/src/stories/TidePopover.stories.ts

@@ -5,6 +5,11 @@ import { lineBreak, tab } from '@/utilities/storybook';
 
 import type { StoryContext } from '@storybook/vue3';
 
+type Args = InstanceType<typeof TidePopover>['$props'] & {
+  default: string;
+  offset: string;
+};
+
 const formatSnippet = (code: string, context: StoryContext) => {
   const { args } = context;
 
@@ -31,7 +36,7 @@ const parameters = {
   },
 };
 
-const render = (args: any) => ({
+const render = (args: Args) => ({
   components: { TideIcon, TidePopover },
   setup: () => {
     if (args.offset === '') {