tide-design-system 2.4.7 → 2.5.2

package/src/stories/TideRating.stories.ts

@@ -0,0 +1,120 @@
+import { action } from '@storybook/addon-actions';
+import { ref, watchEffect } from 'vue';
+
+import TideRating from '@/components/TideRating.vue';
+import { argTypeBooleanUnrequired, change, doSomething, parameters } from '@/utilities/storybook';
+
+import type { StoryContext } from '@storybook/vue3';
+
+type Args = InstanceType<typeof TideRating>['$props'] & {
+  handleChange: string;
+  vModel: number;
+};
+
+const maxRating = 10;
+
+const render = (args: Args, context: StoryContext) => ({
+  components: { TideRating },
+  methods: {
+    doSomething,
+    handleChange: (index: number) => {
+      action('Current rating')(index);
+      context.updateArgs({ ...args, vModel: index });
+
+      try {
+        const callback = eval(args.handleChange);
+
+        if (callback) {
+          callback();
+        }
+      } catch {
+        alert('Please specify a valid handler in the "change" control.');
+      }
+    },
+  },
+  setup: () => {
+    const ratingValue = ref<number>(args.vModel);
+
+    watchEffect(() => {
+      ratingValue.value = args.vModel;
+    });
+
+    return {
+      args,
+      ratingValue,
+    };
+  },
+  template: '<TideRating v-model="ratingValue" @update:modelValue="handleChange" v-bind="args" />',
+});
+
+export default {
+  argTypes: {
+    description: {
+      control: 'text',
+      description: 'Determines the text displayed below the title',
+      table: {
+        defaultValue: { summary: 'None' },
+        type: { summary: 'string' },
+      },
+    },
+    handleChange: {
+      ...change,
+      control: 'text',
+      description: 'JS code or function to execute on change event',
+      name: 'update:modelValue',
+      table: {
+        category: 'Events',
+        defaultValue: { summary: 'None' },
+        type: { summary: '() => void' },
+      },
+    },
+    maxRating: {
+      control: 'text',
+      description: 'Maximum rating value / Number of segments',
+      table: {
+        defaultValue: { summary: 10 },
+        type: { summary: 'number' },
+      },
+    },
+    showRating: {
+      ...argTypeBooleanUnrequired,
+      description: 'Determines whether to display the current rating value',
+    },
+    title: {
+      control: 'text',
+      description: 'Determines the title text displayed above the rating component',
+      table: {
+        defaultValue: { summary: 'None' },
+        type: { summary: 'string' },
+      },
+    },
+    vModel: {
+      control: {
+        type: 'select',
+      },
+      description: 'Data binding to Vue ref (selected rating index)',
+      isDynamic: true,
+      options: Array.from({ length: maxRating + 1 }, (_, i) => i),
+      table: {
+        category: 'Native',
+        defaultValue: { summary: 'None' },
+        type: { summary: 'Ref<number>' },
+      },
+    },
+  },
+  args: {
+    description: 'Description',
+    handleChange: 'doSomething',
+    maxRating: '10',
+    showRating: undefined,
+    title: 'Title',
+    vModel: 0,
+  },
+  component: TideRating,
+  parameters,
+  render,
+  tags: ['autodocs'],
+  title: 'Components/TideRating',
+};
+
+export const Demo = {};

package/src/stories/TideSheet.stories.ts

@@ -1,4 +1,5 @@
 import { action } from '@storybook/addon-actions';
+import { ref, watch } from 'vue';
 
 import TideButton from '@/components/TideButton.vue';
 import TideSheet from '@/components/TideSheet.vue';
@@ -17,6 +18,7 @@ type Args = InstanceType<typeof TideSheet>['$props'] & {
   default: string;
   handleBack: string;
   handleClose: string;
+  vModel: boolean;
 };
 
 const formatSnippet = (code: string, context: StoryContext) => {
@@ -59,28 +61,32 @@ const render = (args: Args, context: StoryContext) => ({
         alert('Please specify a valid handler in the "back" control.');
       }
     },
-    handleClose: () => {
-      action('Sheet closed')({});
-      context.updateArgs({ ...args, isOpen: false });
+    handleIsOpenChange: (value: boolean) => {
+      context.updateArgs({ ...args, vModel: value });
+    },
+  },
+  setup: () => {
+    const isOpen = ref(args.vModel);
 
-      try {
-        const callback = eval(args.handleClose);
+    watch(isOpen, () => {
+      args.vModel = isOpen.value;
+    });
 
-        if (callback) {
-          callback();
-        }
-      } catch {
-        alert('Please specify a valid handler in the "close" control.');
+    watch(
+      () => args.vModel,
+      (newValue) => {
+        isOpen.value = newValue;
       }
-    },
-    handleOpenSheetClick: () => {
-      context.updateArgs({ ...args, isOpen: true });
-    },
+    );
+
+    return {
+      args,
+      isOpen,
+    };
   },
-  setup: () => ({ args }),
   template: `
-  <TideButton label="Open sheet" @click="handleOpenSheetClick" />
-  <TideSheet v-bind="args" @close="handleClose" @back="handleBack">
+  <TideButton label="Open sheet" @click="handleIsOpenChange(true)" />
+  <TideSheet v-bind="args" v-model="isOpen" @back="handleBack" @update:modelValue="handleIsOpenChange">
     ${args.default}
   </TideSheet>`,
 });
@@ -107,16 +113,6 @@ export default {
         type: { summary: '() => void' },
       },
     },
-    handleClose: {
-      control: 'text',
-      description: 'JS function to execute when sheet is closed',
-      name: 'close',
-      table: {
-        category: 'Events',
-        defaultValue: { summary: 'None' },
-        type: { summary: '() => void' },
-      },
-    },
     isBackButton: {
       ...argTypeBooleanUnrequired,
       description: 'Determines whether the back button is displayed',
@@ -130,13 +126,22 @@ export default {
         defaultValue: { summary: 'False' },
       },
     },
+    vModel: {
+      control: 'boolean',
+      description: 'Data binding to Vue ref',
+      table: {
+        category: 'Native',
+        defaultValue: { summary: 'None' },
+        type: { summary: 'Ref<boolean>' },
+      },
+    },
   },
   args: {
     default: `<div>${lineBreak}${tab}Default Slot Demo${lineBreak}</div>`,
     handleBack: 'doSomething',
     handleClose: 'doSomethingElse',
     isBackButton: undefined,
-    isOpen: false,
+    vModel: false,
   },
   component: TideSheet,
   parameters,

package/src/stories/TideSwitch.stories.ts

@@ -1,70 +1,69 @@
-import { action } from '@storybook/addon-actions';
+import { ref, watch } from 'vue';
 
 import TideSwitch from '@/components/TideSwitch.vue';
-import {
-  argTypeBooleanUnrequired,
-  change,
-  dataTrack,
-  disabledArgType,
-  doSomething,
-  parameters,
-} from '@/utilities/storybook';
+import { argTypeBooleanUnrequired, dataTrack, doSomething, parameters } from '@/utilities/storybook';
 
 import type { StoryContext } from '@storybook/vue3';
 
 type Args = InstanceType<typeof TideSwitch>['$props'] & {
-  handleChange: string;
+  vModel: true;
 };
 
 const render = (args: Args, context: StoryContext) => ({
   components: { TideSwitch },
   methods: {
     doSomething,
-    handleChange: () => {
-      action('TideSwitch changed')();
-      context.updateArgs({ ...args, isActive: context.args.isActive !== true });
+    handleIsActiveChange: (value: boolean) => {
+      context.updateArgs({ ...args, vModel: value });
+    },
+  },
+  setup: () => {
+    const isActive = ref(args.vModel);
 
-      try {
-        const callback = eval(args.handleChange);
+    watch(isActive, () => {
+      args.vModel = isActive.value;
+    });
 
-        if (callback) {
-          callback();
-        }
-      } catch {
-        alert('Please specify a valid handler in the "change" control.');
+    watch(
+      () => args.vModel,
+      (newValue) => {
+        isActive.value = newValue;
       }
-    },
+    );
+
+    return {
+      args,
+      isActive,
+    };
   },
-  setup: () => ({ args }),
-  template: `<TideSwitch @change="handleChange" v-bind="args" />`,
+  template: `<TideSwitch v-bind="args" v-model="isActive" @update:modelValue="handleIsActiveChange" />`,
 });
 
 export default {
   argTypes: {
-    change: disabledArgType,
     dataTrack,
     disabled: {
       ...argTypeBooleanUnrequired,
       description: 'Determines clickability',
     },
-    handleChange: {
-      ...change,
-      table: {
-        category: 'Events',
-        defaultValue: { summary: 'None' },
-        type: { summary: '() => void' },
-      },
-    },
     isActive: {
       ...argTypeBooleanUnrequired,
       description: 'Determines whether toggle is active',
     },
+    vModel: {
+      control: 'boolean',
+      description: 'Data binding to Vue ref',
+      table: {
+        category: 'Native',
+        defaultValue: { summary: 'None' },
+        type: { summary: 'Ref<boolean>' },
+      },
+    },
   },
   args: {
     dataTrack: '',
     disabled: undefined,
-    handleChange: 'doSomething',
-    isActive: undefined,
+    vModel: false,
   },
   component: TideSwitch,
   parameters,

package/src/stories/TideTabs.stories.ts

@@ -0,0 +1,115 @@
+import { action } from '@storybook/addon-actions';
+import { ref, watchEffect } from 'vue';
+
+import TideTabs from '@/components/TideTabs.vue';
+import { change, disabledArgType, doSomething, parameters } from '@/utilities/storybook';
+
+import type { Tab } from '@/types/Tab';
+import type { StoryContext } from '@storybook/vue3';
+
+type Args = InstanceType<typeof TideTabs>['$props'] & {
+  handleChange: string;
+  vModel: number;
+};
+
+const tabs: Tab[] = [
+  {
+    dataTrack: 'Tab 0 Click',
+    label: 'First Tab',
+  },
+  {
+    dataTrack: 'Tab 1 Click',
+    label: 'Second Tab',
+  },
+  {
+    dataTrack: 'Tab 2 Click',
+    label: 'Third Tab',
+  },
+  {
+    dataTrack: 'Tab 3 Click',
+    label: 'Fourth Tab',
+  },
+];
+
+const render = (args: Args, context: StoryContext) => ({
+  components: { TideTabs },
+  methods: {
+    doSomething,
+    handleChange: (index: number) => {
+      action('Current tab')(index);
+      context.updateArgs({ ...args, vModel: index });
+
+      try {
+        const callback = eval(args.handleChange);
+
+        if (callback) {
+          callback();
+        }
+      } catch {
+        alert('Please specify a valid handler in the "change" control.');
+      }
+    },
+  },
+  setup: () => {
+    const currentTab = ref<number>(args.vModel);
+
+    watchEffect(() => {
+      currentTab.value = args.vModel;
+    });
+
+    return {
+      args,
+      currentTab,
+    };
+  },
+  template: `<TideTabs @update:modelValue="handleChange" v-bind="args" v-model="currentTab" />`,
+});
+
+export default {
+  argTypes: {
+    change: disabledArgType,
+    handleChange: {
+      ...change,
+      name: 'update:modelValue',
+      table: {
+        category: 'Events',
+        defaultValue: { summary: 'None' },
+        type: { summary: '(tabIndex: number) => void' },
+      },
+    },
+    tabs: {
+      control: 'object',
+      description: 'Sets labels and callback for each tab',
+      isCustom: true,
+      table: {
+        defaultValue: { summary: 'None' },
+        type: { summary: 'Tab[]' },
+      },
+    },
+    vModel: {
+      control: {
+        type: 'select',
+      },
+      description: 'Data binding to Vue ref (active tab index)',
+      isDynamic: true,
+      options: Object.keys(tabs).map((index) => parseInt(index)),
+      table: {
+        category: 'Native',
+        defaultValue: { summary: 'None' },
+        type: { summary: 'Ref<number>' },
+      },
+    },
+  },
+  args: {
+    handleChange: 'doSomething',
+    tabs,
+    vModel: 0,
+  },
+  component: TideTabs,
+  parameters,
+  render,
+  tags: ['autodocs'],
+  title: 'Components/TideTabs',
+};
+
+export const Demo = {};