tide-design-system 2.3.0 → 2.3.1

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

package/src/stories/TideSeoLinks.stories.ts

@@ -3,6 +3,8 @@ import TideSeoLinks from '@/components/TideSeoLinks.vue';
 import type { Link } from '@/types/Link';
 import type { StoryContext } from '@storybook/vue3';
 
+type Args = InstanceType<typeof TideSeoLinks>['$props'];
+
 const links: Link[] = new Array(12).fill({}).map((link, index) => {
   return {
     isNewTab: false,
@@ -27,7 +29,7 @@ const parameters = {
   },
 };
 
-const render = (args: any) => ({
+const render = (args: Args) => ({
   components: { TideSeoLinks },
   setup: () => ({ args }),
   template: '<TideSeoLinks v-bind="args" />',

package/src/stories/TideSheet.stories.ts

@@ -13,6 +13,12 @@ import {
 
 import type { StoryContext } from '@storybook/vue3';
 
+type Args = InstanceType<typeof TideSheet>['$props'] & {
+  default: string;
+  handleBack: string;
+  handleClose: string;
+};
+
 const formatSnippet = (code: string, context: StoryContext) => {
   const { args } = context;
 
@@ -35,7 +41,7 @@ const parameters = {
   },
 };
 
-const render = (args: any, { updateArgs }: any) => ({
+const render = (args: Args, context: StoryContext) => ({
   components: { TideButton, TideSheet },
   methods: {
     doSomething,
@@ -55,7 +61,7 @@ const render = (args: any, { updateArgs }: any) => ({
     },
     handleClose: () => {
       action('Sheet closed')({});
-      updateArgs({ ...args, isOpen: false });
+      context.updateArgs({ ...args, isOpen: false });
 
       try {
         const callback = eval(args.handleClose);
@@ -68,7 +74,7 @@ const render = (args: any, { updateArgs }: any) => ({
       }
     },
     handleOpenSheetClick: () => {
-      updateArgs({ ...args, isOpen: true });
+      context.updateArgs({ ...args, isOpen: true });
     },
   },
   setup: () => ({ args }),

package/src/stories/TideSwitch.stories.ts

@@ -10,7 +10,13 @@ import {
   parameters,
 } from '@/utilities/storybook';
 
-const render = (args: any, context: any) => ({
+import type { StoryContext } from '@storybook/vue3';
+
+type Args = InstanceType<typeof TideSwitch>['$props'] & {
+  handleChange: string;
+};
+
+const render = (args: Args, context: StoryContext) => ({
   components: { TideSwitch },
   methods: {
     doSomething,