tide-design-system 2.0.53 → 2.1.0

package/src/stories/TidePagination.stories.ts

@@ -17,16 +17,15 @@ const render = (args: any, { updateArgs }: any) => ({
   components: { TidePagination },
   methods: {
     doSomething,
-    handleEmit: (event: Event, index: number) => {
-      action(`Current page ${index}`)(event, { index });
-
+    handleChange: (_event: Event, index: number) => {
+      action(`Current page ${index}`)(index);
       updateArgs({ ...args, pageCurrent: index });
 
       try {
-        const performCallback = eval(args.handleEmit);
+        const callback = eval(args.handleChange);
 
-        if (performCallback) {
-          performCallback();
+        if (callback) {
+          callback();
         }
       } catch {
         alert('Please specify a valid handler in the "change" control.');
@@ -34,7 +33,7 @@ const render = (args: any, { updateArgs }: any) => ({
     },
   },
   setup: () => ({ args }),
-  template: `<TidePagination @change="handleEmit" v-bind="args" />`,
+  template: `<TidePagination @change="handleChange" v-bind="args" />`,
 });
 
 export default {
@@ -48,11 +47,11 @@ export default {
         eq: ELEMENT_TEXT_AS_ICON.BUTTON,
       },
     },
-    handleEmit: {
+    handleChange: {
       ...change,
       table: {
         defaultValue: { summary: 'None' },
-        type: { summary: '(event: Event, pageIndex: number) => void' },
+        type: { summary: '(pageIndex: number) => void' },
       },
     },
     pageCurrent: {
@@ -69,7 +68,7 @@ export default {
     },
   },
   args: {
-    handleEmit: 'doSomething',
+    handleChange: 'doSomething',
     pageCurrent: 1,
     pageTotal: 5,
   },

package/src/stories/{TideToggle.stories.ts → TideSwitch.stories.ts}

@@ -1,6 +1,6 @@
 import { action } from '@storybook/addon-actions';
 
-import TideToggle from '@/components/TideToggle.vue';
+import TideSwitch from '@/components/TideSwitch.vue';
 import {
   argTypeBooleanUnrequired,
   change,
@@ -10,19 +10,19 @@ import {
   parameters,
 } from '@/utilities/storybook';
 
-const render = (args: any, { updateArgs }: any) => ({
-  components: { TideToggle },
+const render = (args: any, context: any) => ({
+  components: { TideSwitch },
   methods: {
     doSomething,
-    handleEmit: (event: Event, isActive: boolean) => {
-      updateArgs({ ...args, isActive });
-      action('TideToggle changed')(event, { isActive });
+    handleChange: () => {
+      action('TideSwitch changed')();
+      context.updateArgs({ ...args, isActive: context.args.isActive !== true });
 
       try {
-        const performCallback = eval(args.handleEmit);
+        const callback = eval(args.handleChange);
 
-        if (performCallback) {
-          performCallback();
+        if (callback) {
+          callback();
         }
       } catch {
         alert('Please specify a valid handler in the "change" control.');
@@ -30,7 +30,7 @@ const render = (args: any, { updateArgs }: any) => ({
     },
   },
   setup: () => ({ args }),
-  template: `<TideToggle @change="handleEmit" v-bind="args" />`,
+  template: `<TideSwitch @change="handleChange" v-bind="args" />`,
 });
 
 export default {
@@ -41,11 +41,11 @@ export default {
       ...argTypeBooleanUnrequired,
       description: 'Determines clickability',
     },
-    handleEmit: {
+    handleChange: {
       ...change,
       table: {
         defaultValue: { summary: 'None' },
-        type: { summary: '(event: Event, tabIndex: number) => void' },
+        type: { summary: '() => void' },
       },
     },
     isActive: {
@@ -56,14 +56,14 @@ export default {
   args: {
     dataTrack: '',
     disabled: undefined,
-    handleEmit: 'doSomething',
+    handleChange: 'doSomething',
     isActive: undefined,
   },
-  component: TideToggle,
+  component: TideSwitch,
   parameters,
   render,
   tags: ['autodocs'],
-  title: 'Basic Components/TideToggle',
+  title: 'Basic Components/TideSwitch',
 };
 
 export const Demo = {};

package/src/types/Styles.ts

@@ -40,7 +40,6 @@ export const CSS = {
     SUCCESS: 'tide-bg-success',
     SURFACE: {
       ACCENT: 'tide-bg-surface-accent',
-      ACCENT_VARIANT: 'tide-bg-surface-accent-variant',
       BRAND: 'tide-bg-surface-brand',
       DEFAULT: 'tide-bg-surface',
       ERROR: 'tide-bg-surface-error',

package/src/utilities/storybook.ts

@@ -56,16 +56,17 @@ export const change = {
   name: 'change',
   table: {
     defaultValue: { summary: 'None' },
-    type: { summary: '(event: Event) => void' },
+    type: { summary: '() => void' },
   },
 };
 
 export const click = {
   control: 'text',
   description: 'JS code or function to execute on click event',
+  isEmit: true,
   table: {
     defaultValue: { summary: 'None' },
-    type: { summary: '(event: Event) => void' },
+    type: { summary: '() => void' },
   },
 };
 
@@ -208,7 +209,7 @@ export const formatSnippet = (code: string, context: StoryContext) => {
 
     if (isEmit) {
       if (value) {
-        return `@change="${value}"`;
+        return `@${argType.name}="${value}"`;
       }
     }