tide-design-system 2.4.5 → 2.4.6

package/src/stories/TideButtonPagination.stories.ts

@@ -16,7 +16,7 @@ type Args = InstanceType<typeof TideButtonPagination>['$props'] & {
   click: string;
 };
 
-const ELEMENT_TEXT_AS_ICON = prependNoneAsUndefined(STANDARD_ELEMENT.ELEMENT_TEXT_AS_ICON);
+const ELEMENT_BROAD = prependNoneAsUndefined(STANDARD_ELEMENT.ELEMENT_BROAD);
 
 const render = (args: Args) => ({
   components: { TideButtonPagination },
@@ -44,7 +44,7 @@ export default {
   argTypes: {
     click: {
       ...click,
-      if: { arg: 'element', neq: ELEMENT_TEXT_AS_ICON.LINK },
+      if: { arg: 'element', neq: ELEMENT_BROAD.LINK },
     },
     dataTrack,
     disabled: {
@@ -52,11 +52,11 @@ export default {
       description: 'Indicates whether Pagination Button is associated with the displayed page',
       if: {
         arg: 'element',
-        eq: ELEMENT_TEXT_AS_ICON.BUTTON,
+        eq: ELEMENT_BROAD.BUTTON,
       },
     },
     element: {
-      ...formatArgType({ ELEMENT_TEXT_AS_ICON }),
+      ...formatArgType({ ELEMENT_BROAD }),
       description: 'HTML tag type',
       table: {
         defaultValue: { summary: 'BUTTON' },
@@ -64,7 +64,7 @@ export default {
     },
     href: {
       description: 'URL to open<br />(Link only)',
-      if: { arg: 'element', eq: ELEMENT_TEXT_AS_ICON.LINK },
+      if: { arg: 'element', eq: ELEMENT_BROAD.LINK },
       table: {
         defaultValue: { summary: 'None' },
         type: { summary: 'string' },
@@ -73,7 +73,7 @@ export default {
     isNewTab: {
       ...argTypeBooleanUnrequired,
       description: 'Determines whether to target a new browser tab<br />(Link only)',
-      if: { arg: 'element', eq: ELEMENT_TEXT_AS_ICON.LINK },
+      if: { arg: 'element', eq: ELEMENT_BROAD.LINK },
     },
     label: {
       control: 'text',

package/src/stories/TideCarousel.stories.ts

@@ -163,7 +163,6 @@ export default {
         type: { summary: 'HTML' },
       },
     },
-    slideChange: disabledArgType,
     slidesAddedToView: disabledArgType,
     subtitle: {
       control: 'text',

package/src/stories/TideInputCheckbox.stories.ts

@@ -1,53 +1,72 @@
 import { action } from '@storybook/addon-actions';
+import { ref } from 'vue';
 
 import TideInputCheckbox from '@/components/TideInputCheckbox.vue';
-import { argTypeBooleanUnrequired, click, dataTrack, doSomething, parameters } from '@/utilities/storybook';
-
-import type { StoryContext } from '@storybook/vue3';
+import { argTypeBooleanUnrequired, dataTrack, disabledArgType, doSomething, parameters } from '@/utilities/storybook';
 
 type Args = InstanceType<typeof TideInputCheckbox>['$props'] & {
-  click: string;
+  handleValid: string;
+  vModel: string;
 };
 
-const render = (args: Args, context: StoryContext) => ({
+const render = (args: Args) => ({
   components: { TideInputCheckbox },
   methods: {
     doSomething,
-    handleClick: () => {
-      const input = context.canvasElement.querySelector('input');
-
-      action('TideInputCheckbox clicked')({});
-      context.updateArgs({ ...args, checked: !input?.checked === true, indeterminate: undefined });
+    handleValid: () => {
+      action('TideInputText valid was emitted')({});
 
       try {
-        const callback = eval(args.click);
+        const callback = eval(args.handleValid);
 
         if (callback) {
           callback();
         }
       } catch {
-        alert('Please specify a valid handler in the "click" control.');
+        alert('Please specify a valid handler in the "valid" control.');
       }
     },
   },
-  setup: () => ({ args }),
-  template: `<TideInputCheckbox @click="handleClick" v-bind="args" />`,
+  setup() {
+    const model = ref<boolean>(false);
+
+    return {
+      args: {
+        ...args,
+        inputId: undefined, // Do not allow empty ID attribute to break the demo.
+      },
+      model,
+    };
+  },
+  template: `<TideInputCheckbox @valid="handleValid" v-bind="args" v-model="model" />`,
 });
 
 export default {
   argTypes: {
-    checked: {
-      ...argTypeBooleanUnrequired,
-      description: 'Determines whether Checkbox is checked or unchecked',
-    },
-    click: {
-      ...click,
-    },
     dataTrack,
     disabled: {
       ...argTypeBooleanUnrequired,
       description: 'Determines whether Checkbox state is interactable',
     },
+    error: {
+      control: 'text',
+      description: 'Overrides the default error message and valid state',
+      table: {
+        defaultValue: { summary: 'None' },
+        type: { summary: 'string' },
+      },
+    },
+    handleValid: {
+      control: 'text',
+      description: 'JS code or function to execute on valid event',
+      isEmit: true,
+      name: 'valid',
+      table: {
+        category: 'Events',
+        defaultValue: { summary: 'None' },
+        type: { summary: '(isValid: boolean) => void' },
+      },
+    },
     indeterminate: {
       ...argTypeBooleanUnrequired,
       description: 'Determines whether Checkbox is indeterminate',
@@ -85,17 +104,33 @@ export default {
         type: { summary: 'number' },
       },
     },
+    required: {
+      ...argTypeBooleanUnrequired,
+      description: 'Determines whether input is required',
+    },
+    vModel: {
+      control: 'text',
+      description: 'Data binding to Vue ref',
+      table: {
+        category: 'Native',
+        defaultValue: { summary: 'None' },
+        type: { summary: 'Ref' },
+      },
+    },
+    valid: disabledArgType,
   },
   args: {
-    checked: undefined,
-    click: 'doSomething',
     dataTrack: '',
     disabled: undefined,
+    error: '',
+    handleValid: 'doSomething',
     indeterminate: undefined,
     inputId: '',
     label: 'Input label',
     name: '',
     number: '',
+    required: undefined,
+    vModel: '',
   },
   component: TideInputCheckbox,
   parameters,

package/src/stories/TideInputRadio.stories.ts

@@ -1,46 +1,38 @@
-import { action } from '@storybook/addon-actions';
+import { ref, watch } from 'vue';
 
 import TideInputRadio from '@/components/TideInputRadio.vue';
-import { argTypeBooleanUnrequired, click, dataTrack, doSomething, parameters } from '@/utilities/storybook';
+import { argTypeBooleanUnrequired, dataTrack, parameters } from '@/utilities/storybook';
 
 import type { StoryContext } from '@storybook/vue3';
 
-type Args = InstanceType<typeof TideInputRadio>['$props'] & {
-  click: string;
-};
+type Args = InstanceType<typeof TideInputRadio>['$props'];
 
 const render = (args: Args, context: StoryContext) => ({
   components: { TideInputRadio },
-  methods: {
-    doSomething,
-    handleClick: () => {
-      const input = context.canvasElement.querySelector('input');
-
-      action('TideInputRadio changed')({});
-      context.updateArgs({ ...args, checked: !input?.checked });
-
-      try {
-        const callback = eval(args.click);
+  setup() {
+    const model = ref<string | undefined>(undefined);
 
-        if (callback) {
-          callback();
-        }
-      } catch {
-        alert('Please specify a valid handler in the "click" control.');
+    watch(
+      () => ({ ...args }),
+      (newArgs) => {
+        // Reset v-model when arg table is reset.
+        if (JSON.stringify(newArgs) === JSON.stringify(context.allArgs)) model.value = undefined;
       }
-    },
+    );
+
+    return {
+      args: {
+        ...args,
+        inputId: undefined,
+      },
+      model,
+    };
   },
-  setup: () => ({ args }),
-  template: `<TideInputRadio @click="handleClick" v-bind="args" />`,
+  template: `<TideInputRadio v-bind="args" v-model="model" />`,
 });
 
 export default {
   argTypes: {
-    checked: {
-      ...argTypeBooleanUnrequired,
-      description: 'Determines whether input is selected',
-    },
-    click,
     dataTrack,
     disabled: {
       ...argTypeBooleanUnrequired,
@@ -78,16 +70,33 @@ export default {
         type: { summary: 'number' },
       },
     },
+    vModel: {
+      control: 'text',
+      description: 'Data binding to Vue ref',
+      table: {
+        category: 'Native',
+        defaultValue: { summary: 'None' },
+        type: { summary: 'Ref' },
+      },
+    },
+    value: {
+      control: 'text',
+      description: 'Value attribute',
+      table: {
+        defaultValue: { summary: 'None' },
+        type: { summary: 'string' },
+      },
+    },
   },
   args: {
-    checked: undefined,
-    click: 'doSomething',
     dataTrack: '',
     disabled: undefined,
     inputId: '',
     label: 'Input label',
     name: '',
     number: '',
+    vModel: '',
+    value: '',
   },
   component: TideInputRadio,
   parameters,

package/src/stories/TideInputSelect.stories.ts

@@ -1,14 +1,16 @@
 import { action } from '@storybook/addon-actions';
 
 import TideInputSelect from '@/components/TideInputSelect.vue';
+import * as STANDARD_ERROR_DISPLAY from '@/types/Validation';
 import {
   argTypeBooleanUnrequired,
   change,
   dataTrack,
+  disabledArgType,
   doSomething,
   formatArgType,
-  getLabelsFromOptions,
   parameters,
+  prependNoneAsUndefined,
 } from '@/utilities/storybook';
 
 import type { SelectOption, SelectOptionGroup } from '@/types/Select';
@@ -16,20 +18,10 @@ import type { StoryContext } from '@storybook/vue3';
 
 type Args = InstanceType<typeof TideInputSelect>['$props'] & {
   change: string;
+  handleValid: string;
+  vModel: string;
 };
-
-const options = {
-  'Any': '',
-  'Option 1': 1,
-  'Option 2': 2,
-  'Option 3': 3,
-  'Option A1': 'A1',
-  'Option A2': 'A2',
-  'Option A3': 'A3',
-  'Option B1': 'B1',
-  'Option B2': 'B2',
-  'Option B3': 'B3',
-};
+const ERROR_DISPLAY = prependNoneAsUndefined(STANDARD_ERROR_DISPLAY.ERROR_DISPLAY);
 
 const selectOptionGroups: (SelectOption | SelectOptionGroup)[] = [
   {
@@ -107,9 +99,22 @@ const render = (args: Args, context: StoryContext) => ({
         alert('Please specify a valid handler in the "change" control.');
       }
     },
+    handleValid: () => {
+      action('TideInputSelect valid was emitted')({});
+
+      try {
+        const callback = eval(args.handleValid);
+
+        if (callback) {
+          callback();
+        }
+      } catch {
+        alert('Please specify a valid handler in the "valid" control.');
+      }
+    },
   },
   setup: () => ({ args }),
-  template: `<TideInputSelect @change="handleChange" v-bind="args" />`,
+  template: `<TideInputSelect @change="handleChange" @valid="handleValid" v-bind="args" />`,
 });
 
 export default {
@@ -121,8 +126,27 @@ export default {
       description: 'Determines whether Select is interactable',
     },
     error: {
-      ...argTypeBooleanUnrequired,
-      description: 'Reflects whether the Select value is valid',
+      control: 'text',
+      description: 'Overrides the default error message and valid state',
+      table: {
+        defaultValue: { summary: 'None' },
+        type: { summary: 'string' },
+      },
+    },
+    errorDisplay: {
+      ...formatArgType({ ERROR_DISPLAY }),
+      description: 'Determines whether errors display prior to blur',
+    },
+    handleValid: {
+      control: 'text',
+      description: 'JS code or function to execute on valid event',
+      isEmit: true,
+      name: 'valid',
+      table: {
+        category: 'Events',
+        defaultValue: { summary: 'None' },
+        type: { summary: '(isValid: boolean) => void' },
+      },
     },
     inputId: {
       control: 'text',
@@ -180,24 +204,24 @@ export default {
         type: { summary: 'string' },
       },
     },
-    value: {
-      control: {
-        labels: getLabelsFromOptions(options),
-        type: 'select',
-      },
-      description: 'Determines which tab should be active by default<br />(Subsequently managed within component)',
-      options: Object.values(options),
+    vModel: {
+      control: 'text',
+      description: 'Data binding to Vue ref',
       table: {
+        category: 'Native',
         defaultValue: { summary: 'None' },
-        type: { summary: 'SelectOption' },
+        type: { summary: 'Ref' },
       },
     },
+    valid: disabledArgType,
   },
   args: {
     change: 'doSomething',
     dataTrack: '',
     disabled: undefined,
-    error: undefined,
+    error: '',
+    errorDisplay: undefined,
+    handleValid: 'doSomething',
     inputId: '',
     label: 'Input label',
     name: '',
@@ -205,7 +229,7 @@ export default {
     options: selectOptions,
     required: undefined,
     supportingText: '',
-    value: undefined,
+    vModel: '',
   },
   component: TideInputSelect,
   parameters,

package/src/stories/TideInputText.stories.ts

@@ -3,38 +3,51 @@ import { action } from '@storybook/addon-actions';
 import TideInputText from '@/components/TideInputText.vue';
 import * as STANDARD_FORMAT from '@/types/Formatted';
 import * as STANDARD_ICON from '@/types/Icon';
-import * as STANDARD_TEXT_INPUT_TYPE from '@/types/TextInput';
+import * as STANDARD_TEXT_INPUT from '@/types/TextInput';
+import * as STANDARD_ERROR_DISPLAY from '@/types/Validation';
 import { VALIDATOR } from '@/types/Validation';
 import {
   argTypeBooleanUnrequired,
   dataTrack,
   disabledArgType,
+  doSomething,
   formatArgType,
   formatArgTypeCheck,
   parameters,
   prependNoneAsUndefined,
 } from '@/utilities/storybook';
 
-import type { StoryContext } from '@storybook/vue3';
-
-type Args = InstanceType<typeof TideInputText>['$props'];
+type Args = InstanceType<typeof TideInputText>['$props'] & {
+  handleValid: string;
+  vModel: string;
+};
 
+const ERROR_DISPLAY = prependNoneAsUndefined(STANDARD_ERROR_DISPLAY.ERROR_DISPLAY);
 const FORMAT = prependNoneAsUndefined(STANDARD_FORMAT.FORMAT);
 const ICON = prependNoneAsUndefined(STANDARD_ICON.ICON);
-const TEXT_INPUT_TYPE = prependNoneAsUndefined(STANDARD_TEXT_INPUT_TYPE.TEXT_INPUT_TYPE);
+const TEXT_INPUT_TYPE = prependNoneAsUndefined(STANDARD_TEXT_INPUT.TEXT_INPUT_TYPE);
+const INPUT_MODE = prependNoneAsUndefined(STANDARD_TEXT_INPUT.INPUT_MODE);
 
-const render = (args: Args, context: StoryContext) => ({
+const render = (args: Args) => ({
   components: { TideInputText },
   methods: {
-    handleChange: () => {
-      const input = context.canvasElement.querySelector('input');
+    doSomething,
+    handleValid: () => {
+      action('TideInputText valid was emitted')({});
+
+      try {
+        const callback = eval(args.handleValid);
 
-      action('TideInputText changed')({});
-      context.updateArgs({ ...args, value: input?.value });
+        if (callback) {
+          callback();
+        }
+      } catch {
+        alert('Please specify a valid handler in the "valid" control.');
+      }
     },
   },
   setup: () => ({ args }),
-  template: `<TideInputText @change="handleChange" v-bind="args" />`,
+  template: `<TideInputText @valid="handleValid" v-bind="args" />`,
 });
 
 export default {
@@ -47,10 +60,33 @@ export default {
     disabled: {
       ...argTypeBooleanUnrequired,
       description: 'Determines whether input is interactable',
+      table: {
+        ...argTypeBooleanUnrequired.table,
+        category: 'Native',
+      },
     },
     error: {
-      ...argTypeBooleanUnrequired,
-      description: 'Reflects whether the input value is valid',
+      control: 'text',
+      description: 'Overrides the default error message and valid state',
+      table: {
+        defaultValue: { summary: 'None' },
+        type: { summary: 'string' },
+      },
+    },
+    errorDisplay: {
+      ...formatArgType({ ERROR_DISPLAY }),
+      description: 'Determines whether errors display prior to blur',
+    },
+    handleValid: {
+      control: 'text',
+      description: 'JS code or function to execute on valid event',
+      isEmit: true,
+      name: 'valid',
+      table: {
+        category: 'Events',
+        defaultValue: { summary: 'None' },
+        type: { summary: '(isValid: boolean) => void' },
+      },
     },
     hasClear: {
       ...argTypeBooleanUnrequired,
@@ -69,6 +105,15 @@ export default {
         type: { summary: 'string' },
       },
     },
+    inputmode: {
+      ...formatArgType({ INPUT_MODE }),
+      description: 'Determines the input editing features offered by the browser',
+      table: {
+        category: 'Native',
+        defaultValue: { summary: 'None' },
+        type: { summary: 'string' },
+      },
+    },
     label: {
       control: 'text',
       description: 'Label content',
@@ -81,6 +126,7 @@ export default {
       control: 'text',
       description: 'Applies a maximum character count to the input',
       table: {
+        category: 'Native',
         defaultValue: { summary: 'None' },
         type: { summary: 'number' },
       },
@@ -89,6 +135,7 @@ export default {
       control: 'text',
       description: 'Applies a minimum character count to the input',
       table: {
+        category: 'Native',
         defaultValue: { summary: 'None' },
         type: { summary: 'number' },
       },
@@ -97,6 +144,7 @@ export default {
       control: 'text',
       description: 'Name attribute',
       table: {
+        category: 'Native',
         defaultValue: { summary: 'None' },
         type: { summary: 'string' },
       },
@@ -112,6 +160,10 @@ export default {
     required: {
       ...argTypeBooleanUnrequired,
       description: 'Determines whether input is required',
+      table: {
+        ...argTypeBooleanUnrequired.table,
+        category: 'Native',
+      },
     },
     suffix: {
       control: 'text',
@@ -136,29 +188,37 @@ export default {
     type: {
       ...formatArgType({ TEXT_INPUT_TYPE }),
       description: 'Determines the type(s) of values expected by the input',
+      table: {
+        ...formatArgType({ TEXT_INPUT_TYPE }).table,
+        category: 'Native',
+      },
     },
-    updateValue: disabledArgType,
-    validators: {
-      ...formatArgTypeCheck({ VALIDATOR }),
-      description: 'Determines method(s) used to check for valid input value upon invoking relevant listener event(s)',
-    },
-    value: {
+    vModel: {
       control: 'text',
-      description: 'input value',
+      description: 'Data binding to Vue ref',
       table: {
+        category: 'Native',
         defaultValue: { summary: 'None' },
-        type: { summary: 'string' },
+        type: { summary: 'Ref' },
       },
     },
+    valid: disabledArgType,
+    validators: {
+      ...formatArgTypeCheck({ VALIDATOR }),
+      description: 'Determines method(s) used to check for valid input value upon invoking relevant listener event(s)',
+    },
   },
   args: {
     autocomplete: undefined,
     dataTrack: '',
     disabled: undefined,
-    error: undefined,
+    error: '',
+    errorDisplay: undefined,
+    handleValid: 'doSomething',
     hasClear: undefined,
     iconLeading: undefined,
     inputId: '',
+    inputmode: undefined,
     label: 'Input label',
     maxlength: '',
     minlength: '',
@@ -169,8 +229,8 @@ export default {
     supportingText: '',
     transformValue: undefined,
     type: undefined,
+    vModel: '',
     validators: [],
-    value: '',
   },
   component: TideInputText,
   parameters,