tide-design-system 2.4.4 → 2.4.7

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,

package/src/stories/TideInputTextarea.stories.ts

@@ -1,32 +1,73 @@
 import { action } from '@storybook/addon-actions';
 
 import TideInputTextarea from '@/components/TideInputTextarea.vue';
-import { argTypeBooleanUnrequired, dataTrack, parameters } from '@/utilities/storybook';
+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 TideInputTextarea>['$props'] & {
+  handleValid: string;
+  vModel: string;
+};
 
-type Args = InstanceType<typeof TideInputTextarea>['$props'];
+const ERROR_DISPLAY = prependNoneAsUndefined(STANDARD_ERROR_DISPLAY.ERROR_DISPLAY);
 
-const render = (args: Args, context: StoryContext) => ({
+const render = (args: Args) => ({
   components: { TideInputTextarea },
   methods: {
-    handleChange: () => {
-      const input = context.canvasElement.querySelector('textarea');
+    doSomething,
+    handleValid: () => {
+      action('TideInputText valid was emitted')({});
+
+      try {
+        const callback = eval(args.handleValid);
 
-      action('TideInputTextarea changed')({});
-      context.updateArgs({ ...args, value: input?.value });
+        if (callback) {
+          callback();
+        }
+      } catch {
+        alert('Please specify a valid handler in the "valid" control.');
+      }
     },
   },
   setup: () => ({ args }),
-  template: `<TideInputTextarea @change="handleChange" v-bind="args" />`,
+  template: `<TideInputTextarea @valid="handleValid" v-bind="args" />`,
 });
 
 export default {
   argTypes: {
     dataTrack,
     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' },
+      },
     },
     inputId: {
       control: 'text',
@@ -88,27 +129,35 @@ export default {
         type: { summary: 'string' },
       },
     },
-    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: {
     dataTrack: '',
-    error: undefined,
+    error: '',
+    errorDisplay: undefined,
+    handleValid: 'doSomething',
     inputId: '',
     label: 'Input label',
     maxlength: '',
     minlength: '',
     name: '',
     required: undefined,
-    rows: undefined,
+    rows: '',
     supportingText: '',
-    value: '',
+    vModel: '',
   },
   component: TideInputTextarea,
   parameters,

package/src/stories/TideLink.stories.ts

@@ -3,7 +3,6 @@ import { action } from '@storybook/addon-actions';
 import TideLink from '@/components/TideLink.vue';
 import * as STANDARD_ELEMENT from '@/types/Element';
 import * as STANDARD_ICON from '@/types/Icon';
-import * as STANDARD_LINK_SIZE from '@/types/Storybook';
 import {
   argTypeBooleanUnrequired,
   click,
@@ -21,7 +20,6 @@ type Args = InstanceType<typeof TideLink>['$props'] & {
 
 const ELEMENT = prependNoneAsUndefined(STANDARD_ELEMENT.ELEMENT);
 const ICON = prependNoneAsUndefined(STANDARD_ICON.ICON);
-const LINK_SIZE = prependNoneAsUndefined(STANDARD_LINK_SIZE.LINK_SIZE);
 
 const formatSnippet = (code: string, context: StoryContext) => {
   const { args, argTypes } = context;
@@ -29,7 +27,6 @@ const formatSnippet = (code: string, context: StoryContext) => {
   const argsWithValues: string[] = [];
   const { element, iconLeading, iconTrailing } = args;
 
-  if (args.size !== undefined) argsWithValues.push(`:class="${args.size}"`);
   if (args.dataTrack !== '') argsWithValues.push(`:data-track="${args.dataTrack}"`);
   if (args.element !== undefined)
     argsWithValues.push(`:element="${formatValueAsConstant({ element: element }, argTypes)}"`);
@@ -66,7 +63,7 @@ const render = (args: Args) => ({
     },
   },
   setup: () => ({ args }),
-  template: '<TideLink :class="args.size" @click="handleClick" v-bind="args" />',
+  template: '<TideLink @click="handleClick" v-bind="args" />',
 });
 
 export default {
@@ -113,15 +110,6 @@ export default {
         type: { summary: 'string' },
       },
     },
-    size: {
-      control: 'select',
-      description: 'Link text size',
-      options: LINK_SIZE,
-      table: {
-        defaultValue: { summary: 'None' },
-        type: { summary: 'string' },
-      },
-    },
     subtle: {
       ...argTypeBooleanUnrequired,
       description: 'Hides the underline until hovered, de-emphasizing the link',
@@ -136,7 +124,6 @@ export default {
     iconTrailing: undefined,
     isNewTab: undefined,
     label: 'Demo',
-    size: undefined,
     subtle: undefined,
   },
   component: TideLink,

package/src/stories/TideMenuItem.stories.ts

@@ -0,0 +1,117 @@
+import { action } from '@storybook/addon-actions';
+
+import TideMenuItem from '@/components/TideMenuItem.vue';
+import * as STANDARD_ELEMENT from '@/types/Element';
+import * as STANDARD_ICON from '@/types/Icon';
+import {
+  argTypeBooleanUnrequired,
+  click,
+  dataTrack,
+  formatArgType,
+  formatValueAsConstant,
+  prependNoneAsUndefined,
+} from '@/utilities/storybook';
+
+import type { StoryContext } from '@storybook/vue3';
+
+type Args = InstanceType<typeof TideMenuItem>['$props'] & {
+  click: string;
+};
+
+const ELEMENT = prependNoneAsUndefined(STANDARD_ELEMENT.ELEMENT);
+const ICON = prependNoneAsUndefined(STANDARD_ICON.ICON);
+
+const formatSnippet = (code: string, context: StoryContext) => {
+  const { args, argTypes } = context;
+
+  const argsWithValues: string[] = [];
+  const { element, iconTrailing } = args;
+
+  if (args.dataTrack !== '') argsWithValues.push(`data-track="${args.dataTrack}"`);
+  if (args.element !== undefined)
+    argsWithValues.push(`:element="${formatValueAsConstant({ element: element }, argTypes)}"`);
+  if (args.href !== undefined && args.element !== ELEMENT.BUTTON) argsWithValues.push(`href="${args.href}"`);
+  if (args.iconTrailing !== undefined)
+    argsWithValues.push(`:icon-trailing="${formatValueAsConstant({ iconTrailing }, argTypes)}"`);
+  if (args.isNewTab !== undefined) argsWithValues.push(`:is-new-tab="${args.isNewTab}"`);
+  if (args.label !== undefined) argsWithValues.push(`label="${args.label}"`);
+  if (args.click !== undefined && args.element === ELEMENT.BUTTON) argsWithValues.push(`@click="${args.click}"`);
+
+  return `<TideMenuItem ${argsWithValues.join(' ')} />`;
+};
+
+const parameters = {
+  docs: {
+    source: {
+      format: 'vue',
+      language: 'html',
+      transform: formatSnippet,
+    },
+  },
+};
+
+const render = (args: Args) => ({
+  components: { TideMenuItem },
+  methods: {
+    handleClick: () => {
+      if (args.element !== ELEMENT.LINK && args.click) {
+        action('TideMenuItem clicked')({});
+      }
+    },
+  },
+  setup: () => ({ args }),
+  template: '<TideMenuItem @click="handleClick" v-bind="args" />',
+});
+
+export default {
+  argTypes: {
+    click: {
+      ...click,
+      if: { arg: 'element', eq: ELEMENT.BUTTON },
+    },
+    dataTrack,
+    element: {
+      ...formatArgType({ ELEMENT }),
+      table: {
+        defaultValue: { summary: 'LINK' },
+        type: { summary: 'Element' },
+      },
+    },
+    href: {
+      table: {
+        defaultValue: { summary: 'None' },
+        type: { summary: 'string' },
+      },
+    },
+    iconTrailing: {
+      ...formatArgType({ ICON }),
+    },
+    isNewTab: {
+      ...argTypeBooleanUnrequired,
+      if: { arg: 'element', eq: ELEMENT.LINK },
+    },
+    label: {
+      control: 'text',
+      table: {
+        defaultValue: { summary: 'None' },
+        type: { summary: 'string' },
+      },
+    },
+  },
+  args: {
+    click: 'doSomething',
+    dataTrack: '',
+    element: undefined,
+    href: '#',
+    iconTrailing: undefined,
+    isNewTab: undefined,
+    label: 'Demo',
+  },
+  component: TideMenuItem,
+  parameters,
+  render,
+  tags: ['autodocs'],
+  title: 'Components/TideMenuItem',
+};
+
+export const Demo = {};

package/src/stories/TidePagination.stories.ts

@@ -17,7 +17,7 @@ type Args = InstanceType<typeof TidePagination>['$props'] & {
   handleChange: 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, context: StoryContext) => ({
   components: { TidePagination },
@@ -50,7 +50,7 @@ export default {
       description: 'Determines clickability<br />(Button only)',
       if: {
         arg: 'element',
-        eq: ELEMENT_TEXT_AS_ICON.BUTTON,
+        eq: ELEMENT_BROAD.BUTTON,
       },
     },
     handleChange: {

package/src/stories/TidePopover.stories.ts

@@ -52,7 +52,7 @@ const render = (args: Args) => ({
     ${args.default}
   </TidePopover>
   `,
-  updated: () => {
+  updated() {
     if (args.offset === '') {
       delete args.offset;
     }

package/src/types/Badge.ts

@@ -65,6 +65,10 @@ export const BADGE_COLOR_DETAILS: Record<
 export const BADGE_TRUSTED = {
   YEARS_10: '10',
   YEARS_15: '15',
+  YEARS_20: '20',
+  YEARS_25: '25',
+  YEARS_30: '30',
+  YEARS_35: '35',
   YEARS_5: '5',
 } as const;