tide-design-system 2.4.5 → 2.4.6

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/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;
 

package/src/types/Element.ts

@@ -3,11 +3,11 @@ export const ELEMENT = {
   LINK: 'a',
 } as const;
 
-export const ELEMENT_TEXT_AS_ICON = {
+export const ELEMENT_BROAD = {
   BUTTON: 'button',
   DIV: 'div',
   LINK: 'a',
 } as const;
 
 export type Element = (typeof ELEMENT)[keyof typeof ELEMENT];
-export type ElementTextAsIcon = (typeof ELEMENT_TEXT_AS_ICON)[keyof typeof ELEMENT_TEXT_AS_ICON];
+export type ElementBroad = (typeof ELEMENT_BROAD)[keyof typeof ELEMENT_BROAD];

package/src/types/Storybook.ts

@@ -22,6 +22,10 @@ export const BADGE_TRUSTED = {
   YEARS_5: '5',
   YEARS_10: '10',
   YEARS_15: '15',
+  YEARS_20: '20',
+  YEARS_25: '25',
+  YEARS_30: '30',
+  YEARS_35: '35',
 };
 
 export const BG = {
@@ -115,12 +119,6 @@ export const GAP = {
   '0.25 REM': CSS.GAP.QUARTER,
 };
 
-export const LINK_SIZE = {
-  TWELVE: CSS.FONT.SIZE.TWELVE,
-  FOURTEEN: CSS.FONT.SIZE.FOURTEEN,
-  SIXTEEN: CSS.FONT.SIZE.SIXTEEN,
-};
-
 export const MARGIN = {
   'Full 4 REM': CSS.MARGIN.FULL.FOUR,
   'Full 2 REM': CSS.MARGIN.FULL.TWO,

package/src/types/Type.ts

@@ -0,0 +1,6 @@
+export const BUTTON_TYPE = {
+  BUTTON: 'button',
+  SUBMIT: 'submit',
+} as const;
+
+export type ButtonType = (typeof BUTTON_TYPE)[keyof typeof BUTTON_TYPE];

package/src/utilities/storybook.ts

@@ -1,4 +1,4 @@
-import { ELEMENT, ELEMENT_TEXT_AS_ICON } from '@/types/Element';
+import { ELEMENT, ELEMENT_BROAD } from '@/types/Element';
 import { BOOLEAN, BOOLEAN_UNREQUIRED, NoneAsEmpty, NoneAsUndefined } from '@/types/Storybook';
 import { CSS } from '@/types/Styles';
 import { formatKebabCase } from '@/utilities/format';
@@ -61,6 +61,7 @@ export const change = {
   isEmit: true,
   name: 'change',
   table: {
+    category: 'Events',
     defaultValue: { summary: 'None' },
     type: { summary: '() => void' },
   },
@@ -71,6 +72,7 @@ export const click = {
   description: 'JS code or function to execute on click event',
   isEmit: true,
   table: {
+    category: 'Events',
     defaultValue: { summary: 'None' },
     type: { summary: '() => void' },
   },
@@ -81,6 +83,7 @@ export const close = {
   description: 'JS code or function to execute on close event',
   isEmit: true,
   table: {
+    category: 'Events',
     defaultValue: { summary: 'None' },
     type: { summary: '() => void' },
   },
@@ -90,6 +93,7 @@ export const dataTrack = {
   control: 'text',
   description: 'Data attribute for external tracking',
   table: {
+    category: 'Native',
     defaultValue: { summary: 'None' },
     type: { summary: 'string' },
   },
@@ -252,7 +256,7 @@ export const formatSnippet = (code: string, context: StoryContext) => {
     if (
       isClick &&
       value &&
-      (!args.element || args.element === ELEMENT.BUTTON || args.element === ELEMENT_TEXT_AS_ICON.BUTTON)
+      (!args.element || args.element === ELEMENT.BUTTON || args.element === ELEMENT_BROAD.BUTTON)
     ) {
       return `@click="${value}"`;
     }

package/src/utilities/validation.ts

@@ -70,7 +70,7 @@ export const getFieldValidationResult = ({
   }
 
   // all other prop-based errors come last
-  if (required && value.value.trim() === '') {
+  if (required && value.value?.trim() === '') {
     return VALIDATION_RESULT.REQUIRED;
   }