tide-design-system 2.3.0 → 2.4.0

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,11 @@ import { argTypeBooleanUnrequired, disabledArgType, doSomething, lineBreak, tab
 
 import type { StoryContext } from '@storybook/vue3';
 
+type Args = InstanceType<typeof TideCarousel>['$props'] & {
+  bleed: number | string;
+  handleSlidesAddedToView: string;
+};
+
 const formatSnippet = (code: string, context: StoryContext) => {
   const { args } = context;
 
@@ -15,10 +20,10 @@ const formatSnippet = (code: string, context: StoryContext) => {
   if (hasBleed) argsWithValues.push(`bleed="${args.bleed}"`);
   if (args.isFloating !== undefined) argsWithValues.push(`:is-floating="${args.isFloating}"`);
   if (args.isHideawayButtons !== undefined) argsWithValues.push(`:is-hideaway-buttons="${args.isHideawayButtons}"`);
+  if (args.isScrollByPage !== undefined) argsWithValues.push(`:is-scroll-by-page="false"`);
   if (args.isTouchscreen !== undefined) argsWithValues.push(`:is-touchscreen="${args.isTouchscreen}"`);
   if (args.subtitle !== '') argsWithValues.push(`subtitle="${args.subtitle}"`);
   if (args.title !== '') argsWithValues.push(`title="${args.title}"`);
-  if (args.handleSlideChange) argsWithValues.push(`@slide-change="${args.handleSlideChange}"`);
   if (args.handleSlidesAddedToView) argsWithValues.push(`@slides-added-to-view="${args.handleSlidesAddedToView}"`);
 
   const slotContentMisc = args.misc === '' ? '' : `${tab}<template #misc>${args.misc}</template>${lineBreak}`;
@@ -44,23 +49,10 @@ const parameters = {
   },
 };
 
-const render = (args: any) => ({
+const render = (args: Args) => ({
   components: { TideCard, TideCarousel },
   methods: {
     doSomething,
-    handleSlideChange: (index: number) => {
-      action(`Current slide`)(index);
-
-      try {
-        const callback = eval(args.handleSlideChange);
-
-        if (callback) {
-          callback();
-        }
-      } catch {
-        alert('Please specify a valid handler in the "slideChange" control.');
-      }
-    },
     handleSlidesAddedToView: (slides: number[]) => {
       action(`Slides added to view`)(slides);
 
@@ -79,7 +71,6 @@ const render = (args: any) => ({
   // prettier-ignore
   template:
   `<TideCarousel
-    @slide-change="handleSlideChange"
     @slides-added-to-view="handleSlidesAddedToView"
     class="tide-margin-x-1"
     v-bind="args"
@@ -94,7 +85,7 @@ const render = (args: any) => ({
     </li>
   </TideCarousel>`,
   updated() {
-    if (args.bleed === '') {
+    if (typeof args.bleed === 'string' && args.bleed === '') {
       args.bleed = 0;
     }
 
@@ -120,17 +111,6 @@ export default {
         type: { summary: 'HTML' },
       },
     },
-    handleSlideChange: {
-      control: 'text',
-      description: 'JS code or function to execute on slideChange event',
-      isEmit: true,
-      name: 'slideChange',
-      table: {
-        category: 'Events',
-        defaultValue: { summary: 'None' },
-        type: { summary: '(currentSlide: number) => void' },
-      },
-    },
     handleSlidesAddedToView: {
       control: 'text',
       description: 'JS code or function to execute on slidesAddedToView event',
@@ -164,6 +144,13 @@ export default {
         defaultValue: { summary: 'True' },
       },
     },
+    isScrollByPage: {
+      ...argTypeBooleanUnrequired,
+      description: 'Determines pagination method',
+      table: {
+        defaultValue: { summary: 'None' },
+      },
+    },
     isTouchscreen: {
       ...argTypeBooleanUnrequired,
       description: 'Determines button and/or swipe control scheme',
@@ -201,10 +188,10 @@ export default {
   args: {
     bleed: '',
     default: 'Card #',
-    handleSlideChange: 'doSomething',
     handleSlidesAddedToView: 'doSomething',
     isFloating: undefined,
     isHideawayButtons: undefined,
+    isScrollByPage: undefined,
     isTouchscreen: undefined,
     misc: '',
     subtitle: '',

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 === '') {