tide-design-system 2.5.0 → 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/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 = {};