tide-design-system 2.0.53 → 2.1.0

package/src/stories/TideAccordionItem.stories.ts

@@ -1,10 +1,29 @@
+import { action } from '@storybook/addon-actions';
+
 import TideAccordionItem from '@/components/TideAccordionItem.vue';
-import { argTypeBooleanUnrequired, dataTrack, parameters } from '@/utilities/storybook';
+import { argTypeBooleanUnrequired, dataTrack, disabledArgType, doSomething, parameters } from '@/utilities/storybook';
 
-const render = (args: any) => ({
+const render = (args: any, context: any) => ({
   components: { TideAccordionItem },
+  methods: {
+    doSomething,
+    handleToggle: () => {
+      action('TideAccordionItem toggled')({});
+      context.updateArgs({ ...args, isExpanded: context.args.isExpanded !== true });
+
+      try {
+        const callback = eval(args.handleToggle);
+
+        if (callback) {
+          callback();
+        }
+      } catch {
+        alert('Please specify a valid handler in the "toggle" control.');
+      }
+    },
+  },
   setup: () => ({ args }),
-  template: `<TideAccordionItem :key="args.isExpandedInitial" v-bind="args">{{ args.default }}</TideAccordionItem>`,
+  template: `<TideAccordionItem @toggle="handleToggle" v-bind="args">{{ args.default }}</TideAccordionItem>`,
 });
 
 export default {
@@ -18,6 +37,16 @@ export default {
         type: { summary: 'HTML' },
       },
     },
+    handleToggle: {
+      control: 'text',
+      description: 'JS code or function to execute on toggle event',
+      isEmit: true,
+      name: 'toggle',
+      table: {
+        defaultValue: { summary: 'None' },
+        type: { summary: '(isExpanded: boolean) => void' },
+      },
+    },
     hasBottomDivider: {
       ...argTypeBooleanUnrequired,
       description: 'Determines whether to include bottom divider',
@@ -26,14 +55,9 @@ export default {
       ...argTypeBooleanUnrequired,
       description: 'Determines whether to include bottom divider',
     },
-    isActive: {
-      ...argTypeBooleanUnrequired,
-      description: 'Determines whether to show "active" indicator (primarily for filters)',
-    },
-    isExpandedInitial: {
+    isExpanded: {
       ...argTypeBooleanUnrequired,
-      description:
-        'Determines whether content should be expanded by default<br />(Subsequently managed within component)',
+      description: 'Determines whether body content should be displayed',
     },
     isOptional: {
       ...argTypeBooleanUnrequired,
@@ -47,14 +71,15 @@ export default {
         type: { summary: 'string' },
       },
     },
+    toggle: disabledArgType,
   },
   args: {
     dataTrack: '',
     default: 'Lorem Ipsum',
+    handleToggle: 'doSomething',
     hasBottomDivider: undefined,
     hasTopDivider: undefined,
-    isActive: undefined,
-    isExpandedInitial: undefined,
+    isExpanded: undefined,
     isOptional: undefined,
     label: 'Demo',
   },

package/src/stories/TideBackgroundImage.stories.ts

@@ -1,6 +1,6 @@
 import TideBackgroundImage from '@/components/TideBackgroundImage.vue';
 import { MEDIA } from '@/types/Breakpoint';
-import { argTypeBooleanUnrequired } from '@/utilities/storybook';
+import { argTypeBooleanUnrequired, disabledArgType } from '@/utilities/storybook';
 
 import type { Source } from '@/types/Source';
 import type { StoryContext } from '@storybook/vue3';
@@ -71,11 +71,7 @@ export default {
         type: { summary: 'string' },
       },
     },
-    default: {
-      table: {
-        disable: true,
-      },
-    },
+    default: disabledArgType,
     isLazy: {
       ...argTypeBooleanUnrequired,
       description: `Determines whether to delay loading until image is in viewport.`,

package/src/stories/TideButton.stories.ts

@@ -24,14 +24,14 @@ const render = (args: any) => ({
   components: { TideButton },
   methods: {
     doSomething,
-    handleClick: (event: Event) => {
-      action('TideButton clicked')(event);
+    handleClick: () => {
+      action('TideButton clicked')({});
 
       try {
-        const buttonClick = eval(args.click);
+        const callback = eval(args.click);
 
-        if (buttonClick) {
-          buttonClick();
+        if (callback) {
+          callback();
         }
       } catch {
         alert('Please specify a valid handler in the "click" control.');

package/src/stories/TideButtonIcon.stories.ts

@@ -21,14 +21,14 @@ const render = (args: any) => ({
   components: { TideButtonIcon },
   methods: {
     doSomething,
-    handleClick: (event: Event) => {
-      action('TideButtonIcon clicked')(event);
+    handleClick: () => {
+      action('TideButtonIcon clicked')({});
 
       try {
-        const buttonClick = eval(args.click);
+        const callback = eval(args.click);
 
-        if (buttonClick) {
-          buttonClick();
+        if (callback) {
+          callback();
         }
       } catch {
         alert('Please specify a valid handler in the "click" control.');

package/src/stories/TideButtonPagination.stories.ts

@@ -18,14 +18,14 @@ const render = (args: any) => ({
   components: { TideButtonPagination },
   methods: {
     doSomething,
-    handleClick: (event: Event) => {
-      action('TideButtonPagination clicked')(event);
+    handleClick: () => {
+      action('TideButtonPagination clicked')({});
 
       try {
-        const buttonClick = eval(args.click);
+        const callback = eval(args.click);
 
-        if (buttonClick) {
-          buttonClick();
+        if (callback) {
+          callback();
         }
       } catch {
         alert('Please specify a valid handler in the "click" control.');

package/src/stories/{TideTabs.stories.ts → TideButtonSegmented.stories.ts}

@@ -1,19 +1,16 @@
 import { action } from '@storybook/addon-actions';
 
-import TideTabs from '@/components/TideTabs.vue';
+import TideButtonSegmented from '@/components/TideButtonSegmented.vue';
 import { change, disabledArgType, doSomething, getLabelsFromOptions, parameters } from '@/utilities/storybook';
 
 import type { Tab } from '@/types/Tab';
 
-/* eslint-disable */
-// ^ Storybook controls are based on iterating over object properties instead of array slots (bad form), so these can't be ordered alphabetically.
 const options = {
   'None': undefined,
   'Tab 1': 0,
   'Tab 2': 1,
   'Tab 3': 2,
 };
-/* eslint-enable */
 
 const tabs: Tab[] = [
   {
@@ -30,18 +27,19 @@ const tabs: Tab[] = [
   },
 ];
 
-const render = (args: any) => ({
-  components: { TideTabs },
+const render = (args: any, { updateArgs }: any) => ({
+  components: { TideButtonSegmented },
   methods: {
     doSomething,
-    handleEmit: (event: Event, index: number) => {
-      action(`Current tab ${index}`)(event, { index });
+    handleChange: (index: number) => {
+      action(`Current tab ${index}`)(index);
+      updateArgs({ ...args, activeTab: 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.');
@@ -49,18 +47,17 @@ const render = (args: any) => ({
     },
   },
   setup: () => ({ args }),
-  template:
-    '<TideTabs @change="handleEmit" :key="args.activeTabInitial" class="tide-display-inline-flex" v-bind="args" />',
+  template: '<TideButtonSegmented @change="handleChange" class="tide-display-inline-flex" v-bind="args" />',
 });
 
 export default {
   argTypes: {
-    activeTabInitial: {
+    activeTab: {
       control: {
         labels: getLabelsFromOptions(options),
         type: 'select',
       },
-      description: 'Determines which tab should be active by default<br />(Subsequently managed within component)',
+      description: 'Determines which tab should be active',
       isDynamic: true,
       options: Object.values(options),
       table: {
@@ -68,11 +65,11 @@ export default {
       },
     },
     change: disabledArgType,
-    handleEmit: {
+    handleChange: {
       ...change,
       table: {
         defaultValue: { summary: 'None' },
-        type: { summary: '(event: Event, tabIndex: number) => void' },
+        type: { summary: '(tabIndex: number) => void' },
       },
     },
     tabs: {
@@ -86,15 +83,15 @@ export default {
     },
   },
   args: {
-    activeTabInitial: undefined,
-    handleEmit: 'doSomething',
+    activeTab: undefined,
+    handleChange: 'doSomething',
     tabs,
   },
-  component: TideTabs,
+  component: TideButtonSegmented,
   parameters,
   render,
   tags: ['autodocs'],
-  title: 'Basic Components/TideTabs',
+  title: 'Basic Components/TideButtonSegmented',
 };
 
 export const Demo = {};

package/src/stories/TideCard.stories.ts

@@ -20,14 +20,14 @@ const render = (args: any) => ({
   components: { TideCard },
   methods: {
     doSomething,
-    handleClick: (event: Event) => {
-      action('TideCard clicked')(event);
+    handleClick: () => {
+      action('TideCard clicked')({});
 
       try {
-        const buttonClick = eval(args.click);
+        const callback = eval(args.click);
 
-        if (buttonClick) {
-          buttonClick();
+        if (callback) {
+          callback();
         }
       } catch {
         alert('Please specify a valid handler in the "click" control.');

package/src/stories/TideCarousel.stories.ts

@@ -13,7 +13,7 @@ const formatSnippet = (code: string, context: StoryContext) => {
 
   if (args.isTouchscreen !== undefined) argsWithValues.push(`:is-touchscreen="${args.isTouchscreen}"`);
   if (args.offsetX) argsWithValues.push(`:offset-x="${args.offsetX}"`);
-  if (args.handleEmit) argsWithValues.push(`@change"${args.handleEmit}"`);
+  if (args.handleChange) argsWithValues.push(`@change"${args.handleChange}"`);
 
   return (
     `<TideCarousel ${argsWithValues.join(' ')}>${lineBreak}` +
@@ -41,14 +41,14 @@ const render = (args: any) => ({
   components: { TideCard, TideCarousel },
   methods: {
     doSomething,
-    handleEmit: (index: number) => {
-      action(`Current slide ${index}`)({ index });
+    handleChange: (_event: Event, index: number) => {
+      action(`Current slide ${index}`)(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.');
@@ -56,22 +56,18 @@ const render = (args: any) => ({
     },
   },
   setup: () => ({ args }),
-  template: `<TideCarousel @change="handleEmit" v-bind="args"><li v-for="(_child, index) in new Array(12)" :class="['tide-shrink-none', args.hasPadding ? ' tide-padding-y-1' : '']"><TideCard class="tide-padding-1">Card {{ index + 1 }}</TideCard></li></TideCarousel>`,
+  template: `<TideCarousel @change="handleChange" v-bind="args"><li v-for="(_child, index) in new Array(12)" :class="['tide-shrink-none', args.hasPadding ? ' tide-padding-y-1' : '']"><TideCard class="tide-padding-1">Card {{ index + 1 }}</TideCard></li></TideCarousel>`,
 });
 
 export default {
   argTypes: {
     change: disabledArgType,
-    default: {
-      table: {
-        disable: true,
-      },
-    },
-    handleEmit: {
+    default: disabledArgType,
+    handleChange: {
       ...change,
       table: {
         defaultValue: { summary: 'None' },
-        type: { summary: '(event: Event, currentSlide: number) => void' },
+        type: { summary: '(currentSlide: number) => void' },
       },
     },
     // TODO: adapt via formatSnippet
@@ -104,21 +100,12 @@ export default {
         type: { summary: 'number (px)' },
       },
     },
-    slideChange: {
-      control: 'text',
-      description: 'JS function to execute when current slide is updated',
-      table: {
-        defaultValue: { summary: 'None' },
-        type: { summary: '(event: Event, slideIndex: number) => void' },
-      },
-    },
   },
   args: {
-    handleEmit: 'doSomething',
+    handleChange: 'doSomething',
     hasPadding: false,
     isTouchscreen: undefined,
     offsetX: 0,
-    slideChange: 'doSomething',
   },
   component: TideCarousel,
   parameters,

package/src/stories/TideChipFilter.stories.ts

@@ -1,15 +1,25 @@
 import { action } from '@storybook/addon-actions';
 
 import TideChipFilter from '@/components/TideChipFilter.vue';
-import { argTypeBooleanUnrequired, click, dataTrack, parameters } from '@/utilities/storybook';
+import { argTypeBooleanUnrequired, click, dataTrack, doSomething, parameters } from '@/utilities/storybook';
 
 const render = (args: any, { updateArgs }: any) => ({
   components: { TideChipFilter },
   methods: {
-    handleClick: (event: Event) => {
-      if (args.click) action(args.click)(event);
-
+    doSomething,
+    handleClick: () => {
+      action('TideChipFilter clicked')({});
       updateArgs({ ...args, isActive: !args.isActive });
+
+      try {
+        const callback = eval(args.handleClose);
+
+        if (callback) {
+          callback();
+        }
+      } catch {
+        alert('Please specify a valid handler in the "click" control.');
+      }
     },
   },
   setup: () => ({ args }),

package/src/stories/TideChipInput.stories.ts

@@ -1,13 +1,24 @@
 import { action } from '@storybook/addon-actions';
 
 import TideChipInput from '@/components/TideChipInput.vue';
-import { click, dataTrack, parameters } from '@/utilities/storybook';
+import { click, dataTrack, doSomething, parameters } from '@/utilities/storybook';
 
 const render = (args: any) => ({
   components: { TideChipInput },
   methods: {
-    handleClick: (event: Event) => {
-      if (args.click) action(args.click)(event);
+    doSomething,
+    handleClick: () => {
+      action('TideChipInput clicked')({});
+
+      try {
+        const callback = eval(args.click);
+
+        if (callback) {
+          callback();
+        }
+      } catch {
+        alert('Please specify a valid handler in the "change" control.');
+      }
     },
   },
   setup: () => ({ args }),

package/src/stories/TideInputCheckbox.stories.ts

@@ -7,17 +7,17 @@ const render = (args: any, context: any) => ({
   components: { TideInputCheckbox },
   methods: {
     doSomething,
-    handleClick: (event: Event) => {
+    handleClick: () => {
       const input = context.canvasElement.querySelector('input');
 
-      action('TideInputCheckbox clicked')(event);
+      action('TideInputCheckbox clicked')({});
       context.updateArgs({ ...args, checked: !input.checked === true, indeterminate: undefined });
 
       try {
-        const buttonClick = eval(args.click);
+        const callback = eval(args.click);
 
-        if (buttonClick) {
-          buttonClick();
+        if (callback) {
+          callback();
         }
       } catch {
         alert('Please specify a valid handler in the "click" control.');

package/src/stories/TideInputRadio.stories.ts

@@ -1,20 +1,31 @@
 import { action } from '@storybook/addon-actions';
 
 import TideInputRadio from '@/components/TideInputRadio.vue';
-import { argTypeBooleanUnrequired, dataTrack, parameters } from '@/utilities/storybook';
+import { argTypeBooleanUnrequired, click, dataTrack, doSomething, parameters } from '@/utilities/storybook';
 
 const render = (args: any, context: any) => ({
   components: { TideInputRadio },
   methods: {
-    handleChange: (event: KeyboardEvent) => {
+    doSomething,
+    handleClick: () => {
       const input = context.canvasElement.querySelector('input');
 
-      action('TideInputRadio changed')(event);
-      context.updateArgs({ ...args, checked: input.checked });
+      action('TideInputRadio changed')({});
+      context.updateArgs({ ...args, checked: !input.checked });
+
+      try {
+        const callback = eval(args.click);
+
+        if (callback) {
+          callback();
+        }
+      } catch {
+        alert('Please specify a valid handler in the "click" control.');
+      }
     },
   },
   setup: () => ({ args }),
-  template: `<TideInputRadio @change="handleChange" v-bind="args" />`,
+  template: `<TideInputRadio @click="handleClick" v-bind="args" />`,
 });
 
 export default {
@@ -23,6 +34,7 @@ export default {
       ...argTypeBooleanUnrequired,
       description: 'Determines whether input is selected',
     },
+    click,
     dataTrack,
     disabled: {
       ...argTypeBooleanUnrequired,
@@ -55,6 +67,7 @@ export default {
   },
   args: {
     checked: undefined,
+    click: 'doSomething',
     dataTrack: '',
     disabled: undefined,
     inputId: '',

package/src/stories/TideInputSelect.stories.ts

@@ -86,17 +86,17 @@ const render = (args: any, { updateArgs }: any) => ({
   components: { TideInputSelect },
   methods: {
     doSomething,
-    handleChange: (event: Event) => {
+    handleChange: () => {
       const value = (event?.target as HTMLSelectElement).value;
 
+      action('TideInputSelect changed')({});
       updateArgs({ ...args, value });
-      action('TideInputSelect changed')(event);
 
       try {
-        const performCallback = eval(args.change);
+        const callback = eval(args.change);
 
-        if (performCallback) {
-          performCallback();
+        if (callback) {
+          callback();
         }
       } catch {
         alert('Please specify a valid handler in the "change" control.');

package/src/stories/TideInputText.stories.ts

@@ -8,6 +8,7 @@ import { VALIDATOR } from '@/types/Validation';
 import {
   argTypeBooleanUnrequired,
   dataTrack,
+  disabledArgType,
   formatArgType,
   formatArgTypeCheck,
   parameters,
@@ -21,10 +22,10 @@ const TEXT_INPUT_TYPE = prependNoneAsUndefined(STANDARD_TEXT_INPUT_TYPE.TEXT_INP
 const render = (args: any, context: any) => ({
   components: { TideInputText },
   methods: {
-    handleChange: (event: KeyboardEvent) => {
+    handleChange: () => {
       const input = context.canvasElement.querySelector('input');
 
-      action('TideInputText changed')(event);
+      action('TideInputText changed')({});
       context.updateArgs({ ...args, value: input.value });
     },
   },
@@ -132,11 +133,7 @@ export default {
       ...formatArgType({ TEXT_INPUT_TYPE }),
       description: 'Determines the type(s) of values expected by the input',
     },
-    updateValue: {
-      table: {
-        disable: true,
-      },
-    },
+    updateValue: disabledArgType,
     validators: {
       ...formatArgTypeCheck({ VALIDATOR }),
       description: 'Determines method(s) used to check for valid input value upon invoking relevant listener event(s)',

package/src/stories/TideInputTextarea.stories.ts

@@ -6,10 +6,10 @@ import { argTypeBooleanUnrequired, dataTrack, parameters } from '@/utilities/sto
 const render = (args: any, context: any) => ({
   components: { TideInputTextarea },
   methods: {
-    handleChange: (event: KeyboardEvent) => {
+    handleChange: () => {
       const input = context.canvasElement.querySelector('textarea');
 
-      action('TideInputTextarea changed')(event);
+      action('TideInputTextarea changed')({});
       context.updateArgs({ ...args, value: input.value });
     },
   },

package/src/stories/TideLink.stories.ts

@@ -54,8 +54,10 @@ const parameters = {
 const render = (args: any) => ({
   components: { TideLink },
   methods: {
-    handleClick: (event: Event) => {
-      if (args.element !== ELEMENT.LINK && args.click) action(args.click)(event);
+    handleClick: () => {
+      if (args.element !== ELEMENT.LINK && args.click) {
+        action('TideLink clicked')({});
+      }
     },
   },
   setup: () => ({ args }),

package/src/stories/TideModal.stories.ts

@@ -35,17 +35,18 @@ const render = (args: any, { updateArgs }: any) => ({
   components: { TideButton, TideModal },
   methods: {
     doSomething,
-    handleClose: (event: Event) => {
+    handleClose: () => {
+      action('Modal closed')({});
       updateArgs({ ...args, isOpen: false });
-      action('Modal closed')(event);
 
       try {
         const callback = eval(args.handleClose);
+
         if (callback) {
           callback();
         }
       } catch {
-        alert('Please specify a valid function in the "close" control.');
+        alert('Please specify a valid handler in the "close" control.');
       }
     },
   },
@@ -80,9 +81,10 @@ export default {
     handleClose: {
       control: 'text',
       description: 'JS function to execute when modal is closed',
+      name: 'close',
       table: {
         defaultValue: { summary: 'None' },
-        type: { summary: '(event: Event) => void' },
+        type: { summary: '() => void' },
       },
     },
     isOpen: {