tide-design-system 2.5.4 → 2.5.8

package/src/stories/TideButton.stories.ts

@@ -5,6 +5,7 @@ import * as STANDARD_ELEMENT from '@/types/Element';
 import * as STANDARD_ICON from '@/types/Icon';
 import * as STANDARD_PRIORITY from '@/types/Priority';
 import * as STANDARD_SIZE_BUTTON from '@/types/Size';
+import * as STANDARD_TYPE_BUTTON from '@/types/Type';
 import {
   argTypeBooleanUnrequired,
   click,
@@ -22,7 +23,9 @@ type Args = InstanceType<typeof TideButton>['$props'] & {
 const ELEMENT = prependNoneAsUndefined(STANDARD_ELEMENT.ELEMENT);
 const ICON = prependNoneAsUndefined(STANDARD_ICON.ICON);
 const PRIORITY = prependNoneAsUndefined(STANDARD_PRIORITY.PRIORITY);
+delete PRIORITY['FLOATING']; // Floating is only available in TideButtonIcon
 const SIZE_BUTTON = prependNoneAsUndefined(STANDARD_SIZE_BUTTON.SIZE_BUTTON);
+const BUTTON_TYPE = prependNoneAsUndefined(STANDARD_TYPE_BUTTON.BUTTON_TYPE);
 
 const render = (args: Args) => ({
   components: { TideButton },
@@ -55,18 +58,15 @@ export default {
     dataTrack,
     disabled: {
       ...argTypeBooleanUnrequired,
-      description: 'Determines clickability<br />(Button only)',
       if: { arg: 'element', neq: ELEMENT.LINK },
     },
     element: {
       ...formatArgType({ ELEMENT }),
-      description: 'HTML tag type',
       table: {
         defaultValue: { summary: 'BUTTON' },
       },
     },
     href: {
-      description: 'URL to open<br />(Link only)',
       if: { arg: 'element', eq: ELEMENT.LINK },
       table: {
         defaultValue: { summary: 'None' },
@@ -75,20 +75,16 @@ export default {
     },
     iconLeading: {
       ...formatArgType({ ICON }),
-      description: 'Icon to left of label',
     },
     iconTrailing: {
       ...formatArgType({ ICON }),
-      description: 'Icon to right of label',
     },
     isNewTab: {
       ...argTypeBooleanUnrequired,
-      description: 'Determines whether to target a new browser tab<br />(Link only)',
       if: { arg: 'element', eq: ELEMENT.LINK },
     },
     label: {
       control: 'text',
-      description: 'Button text',
       table: {
         defaultValue: { summary: 'None' },
         type: { summary: 'string' },
@@ -96,18 +92,22 @@ export default {
     },
     priority: {
       ...formatArgType({ PRIORITY }),
-      description: 'Determines visual prominence',
       table: {
         defaultValue: { summary: 'PRIMARY' },
       },
     },
     size: {
       ...formatArgType({ SIZE_BUTTON }),
-      description: 'Determines rendered size',
       table: {
         defaultValue: { summary: 'LARGE' },
       },
     },
+    type: {
+      ...formatArgType({ BUTTON_TYPE }),
+      table: {
+        defaultValue: { summary: 'BUTTON' },
+      },
+    },
   },
   args: {
     click: 'doSomething',

package/src/stories/TideButtonIcon.stories.ts

@@ -4,6 +4,7 @@ import TideButtonIcon from '@/components/TideButtonIcon.vue';
 import * as STANDARD_ELEMENT from '@/types/Element';
 import { ICON } from '@/types/Icon';
 import * as STANDARD_PRIORITY from '@/types/Priority';
+import * as STANDARD_TYPE_BUTTON from '@/types/Type';
 import {
   argTypeBooleanUnrequired,
   click,
@@ -20,6 +21,7 @@ type Args = InstanceType<typeof TideButtonIcon>['$props'] & {
 
 const ELEMENT = prependNoneAsUndefined(STANDARD_ELEMENT.ELEMENT);
 const PRIORITY = prependNoneAsUndefined(STANDARD_PRIORITY.PRIORITY);
+const BUTTON_TYPE = prependNoneAsUndefined(STANDARD_TYPE_BUTTON.BUTTON_TYPE);
 
 const render = (args: Args) => ({
   components: { TideButtonIcon },
@@ -40,7 +42,7 @@ const render = (args: Args) => ({
     },
   },
   setup: () => ({ args }),
-  template: '<TideButtonIcon @click="handleClick" class="tide-display-inline-block" v-bind="args" />',
+  template: '<TideButtonIcon @click="handleClick" v-bind="args" />',
 });
 
 export default {
@@ -52,18 +54,15 @@ export default {
     dataTrack,
     disabled: {
       ...argTypeBooleanUnrequired,
-      description: 'Determines clickability<br />(Button only)',
       if: { arg: 'element', neq: ELEMENT.LINK },
     },
     element: {
       ...formatArgType({ ELEMENT }),
-      description: 'HTML tag type',
       table: {
         defaultValue: { summary: 'BUTTON' },
       },
     },
     href: {
-      description: 'URL to open<br />(Link only)',
       if: { arg: 'element', eq: ELEMENT.LINK },
       table: {
         defaultValue: { summary: 'None' },
@@ -72,20 +71,23 @@ export default {
     },
     icon: {
       ...formatArgType({ ICON }),
-      description: 'Icon',
     },
     isNewTab: {
       ...argTypeBooleanUnrequired,
-      description: 'Determines whether to target a new browser tab<br />(Link only)',
       if: { arg: 'element', eq: ELEMENT.LINK },
     },
     priority: {
       ...formatArgType({ PRIORITY }),
-      description: 'Determines visual prominence',
       table: {
         defaultValue: { summary: 'PRIMARY' },
       },
     },
+    type: {
+      ...formatArgType({ BUTTON_TYPE }),
+      table: {
+        defaultValue: { summary: 'BUTTON' },
+      },
+    },
   },
   args: {
     click: 'doSomething',

package/src/stories/TideChipAction.stories.ts

@@ -1,5 +1,6 @@
 import TideChipAction from '@/components/TideChipAction.vue';
 import * as STANDARD_ELEMENT from '@/types/Element';
+import * as STANDARD_ICON from '@/types/Icon';
 import {
   argTypeBooleanUnrequired,
   click,
@@ -12,6 +13,7 @@ import {
 type Args = InstanceType<typeof TideChipAction>['$props'];
 
 const ELEMENT = prependNoneAsUndefined(STANDARD_ELEMENT.ELEMENT);
+const ICON = prependNoneAsUndefined(STANDARD_ICON.ICON);
 
 const render = (args: Args) => ({
   components: { TideChipAction },
@@ -28,7 +30,6 @@ export default {
     dataTrack,
     element: {
       ...formatArgType({ ELEMENT }),
-      description: 'HTML tag type',
       table: {
         defaultValue: { summary: 'LINK' },
         type: { summary: 'Element' },
@@ -36,21 +37,25 @@ export default {
     },
     href: {
       control: 'text',
-      description: 'URL to navigate to on click',
       if: { arg: 'element', eq: ELEMENT.LINK },
       table: {
         defaultValue: { summary: 'None' },
         type: { summary: 'string' },
       },
     },
+    iconLeading: {
+      ...formatArgType({ ICON }),
+      table: {
+        category: 'Props',
+        defaultValue: { summary: 'SEARCH' },
+      },
+    },
     isNewTab: {
       ...argTypeBooleanUnrequired,
-      description: 'Determines whether to target a new browser tab',
       if: { arg: 'element', eq: ELEMENT.LINK },
     },
     label: {
       control: 'text',
-      description: 'Chip text',
       table: {
         defaultValue: { summary: 'None' },
         type: { summary: 'string' },
@@ -62,6 +67,7 @@ export default {
     dataTrack: '',
     element: undefined,
     href: 'https://www.sample.com',
+    iconLeading: undefined,
     isNewTab: undefined,
     label: 'Demo',
   },

package/src/stories/TideImageBackground.stories.ts

@@ -1,5 +1,6 @@
 import TideImageBackground from '@/components/TideImageBackground.vue';
 import { MEDIA } from '@/types/Breakpoint';
+import { CSS } from '@/types/Styles';
 import { argTypeBooleanUnrequired } from '@/utilities/storybook';
 
 import type { Source } from '@/types/Source';
@@ -37,7 +38,7 @@ const render = (args: Args) => ({
   },
   template: `
     <TideImageBackground v-bind="args">
-      <div class="tide-padding-4 tide-font-700 tide-font-20">
+      <div class="${[CSS.PADDING.FULL.FOUR, CSS.FONT.ROLE.HEADLINE_2].join(' ')}">
         {{ args.default }}
       </div>
     </TideImageBackground>

package/src/stories/TideInputSelect.stories.ts

@@ -83,11 +83,11 @@ const render = (args: Args, context: StoryContext) => ({
   components: { TideInputSelect },
   methods: {
     doSomething,
-    handleChange: () => {
+    handleChange: (event: Event) => {
       const value = (event?.target as HTMLSelectElement).value;
 
       action('TideInputSelect changed')({});
-      context.updateArgs({ ...args, value });
+      context.updateArgs({ ...args, vModel: value });
 
       try {
         const callback = eval(args.change);
@@ -127,7 +127,6 @@ export default {
     },
     error: {
       control: 'text',
-      description: 'Overrides the default error message and valid state',
       table: {
         defaultValue: { summary: 'None' },
         type: { summary: 'string' },
@@ -135,7 +134,6 @@ export default {
     },
     errorDisplay: {
       ...formatArgType({ ERROR_DISPLAY }),
-      description: 'Determines whether errors display prior to blur',
     },
     handleValid: {
       control: 'text',
@@ -158,7 +156,6 @@ export default {
     },
     label: {
       control: 'text',
-      description: 'Label content',
       table: {
         defaultValue: { summary: 'None' },
         type: { summary: 'string' },
@@ -166,7 +163,6 @@ export default {
     },
     name: {
       control: 'text',
-      description: 'Name attribute',
       table: {
         defaultValue: { summary: 'None' },
         type: { summary: 'string' },
@@ -175,7 +171,6 @@ export default {
     optgroups: {
       ...formatArgType({ selectOptionGroups }),
       control: 'object',
-      description: 'Determines grouped values found inside Select',
       isCustom: true,
       table: {
         defaultValue: { summary: '[]' },
@@ -185,20 +180,32 @@ export default {
     options: {
       ...formatArgType({ selectOptions }),
       control: 'object',
-      description: 'Determines ungrouped values found inside Select',
       isCustom: true,
       table: {
         defaultValue: { summary: '[]' },
         type: { summary: 'SelectOption[]' },
       },
     },
+    prefix: {
+      control: 'text',
+      table: {
+        defaultValue: { summary: 'None' },
+        type: { summary: 'string' },
+      },
+    },
     required: {
       ...argTypeBooleanUnrequired,
       description: 'Determines whether Select is required',
     },
+    suffix: {
+      control: 'text',
+      table: {
+        defaultValue: { summary: 'None' },
+        type: { summary: 'string' },
+      },
+    },
     supportingText: {
       control: 'text',
-      description: 'Explainer text beneath input',
       table: {
         defaultValue: { summary: 'None' },
         type: { summary: 'string' },
@@ -227,7 +234,9 @@ export default {
     name: '',
     optgroups: selectOptionGroups,
     options: selectOptions,
+    prefix: '',
     required: undefined,
+    suffix: '',
     supportingText: '',
     vModel: '',
   },

package/src/stories/TideModal.stories.ts

@@ -169,20 +169,17 @@ export default {
     },
     isBackButton: {
       ...argTypeBooleanUnrequired,
-      description: 'Determines whether the back button is displayed',
       table: {
         defaultValue: { summary: 'False' },
       },
     },
     isDismissible: {
       ...argTypeBooleanUnrequired,
-      description: 'Determines whether the close button is displayed',
       table: {
         defaultValue: { summary: 'False' },
       },
     },
     title: {
-      description: 'Modal title',
       table: {
         defaultValue: { summary: 'None' },
       },
@@ -197,7 +194,6 @@ export default {
       },
     },
     width: {
-      description: 'Applies width to Modal<br />(include units)',
       table: {
         defaultValue: { summary: 'None' },
       },

package/src/stories/TideRealmLogo.stories.ts

@@ -0,0 +1,25 @@
+import TideRealmLogo from '@/components/TideRealmLogo.vue';
+import { REALM } from '@/types/Realm';
+import { SIZE_LOGO } from '@/types/RealmLogo';
+import { formatArgType, parameters } from '@/utilities/storybook';
+
+export default {
+  argTypes: {
+    realm: {
+      ...formatArgType({ REALM }),
+    },
+    size: {
+      ...formatArgType({ SIZE_LOGO }),
+    },
+  },
+  args: {
+    realm: REALM.RV,
+    size: SIZE_LOGO.LARGE,
+  },
+  component: TideRealmLogo,
+  parameters,
+  tags: ['autodocs'],
+  title: 'Components/TideRealmLogo',
+};
+
+export const Demo = {};

package/src/stories/TideSheet.stories.ts

@@ -115,7 +115,6 @@ export default {
     },
     isBackButton: {
       ...argTypeBooleanUnrequired,
-      description: 'Determines whether the back button is displayed',
       table: {
         defaultValue: { summary: 'False' },
       },

package/src/stories/TideToaster.stories.ts

@@ -0,0 +1,117 @@
+import { action } from '@storybook/addon-actions';
+import { h } from 'vue';
+
+import TideButton from '@/components/TideButton.vue';
+import TideToaster from '@/components/TideToaster.vue';
+import { useTideToaster } from '@/composables/useTideToaster';
+import { doSomething, lineBreak, tab } from '@/utilities/storybook';
+
+import type { StoryContext } from '@storybook/vue3';
+
+type Args = {
+  actionLabel: string;
+  description: string;
+  heading: string;
+  isActionable: boolean;
+};
+
+const formatSnippet = (code: string, context: StoryContext) => {
+  const { args } = context;
+
+  const toastConfig = [
+    `heading: '${args.heading}'`,
+    args.description ? `description: '${args.description}'` : null,
+    args.isActionable ? `action: { label: '${args.actionLabel}', callback: () => {} }` : null,
+  ]
+    .filter(Boolean)
+    .join(`,${lineBreak}${tab}${tab}`);
+
+  return (
+    `<TideToaster />${lineBreak}${lineBreak}` +
+    `<script setup>${lineBreak}` +
+    `${tab}const { addToast } = useTideToaster();${lineBreak}${lineBreak}` +
+    `${tab}addToast({${lineBreak}` +
+    `${tab}${tab}${toastConfig}${lineBreak}` +
+    `${tab}});${lineBreak}` +
+    `</script>`
+  );
+};
+
+const parameters = {
+  docs: {
+    source: {
+      format: 'vue',
+      language: 'html',
+      transform: formatSnippet,
+    },
+  },
+};
+
+const render = (args: Args) => {
+  return {
+    components: { TideButton, TideToaster },
+    setup() {
+      const { addToast } = useTideToaster();
+
+      const triggerToast = () => {
+        action('Toast triggered')({});
+
+        addToast({
+          action: args.isActionable
+            ? {
+                callback: () => {
+                  action('CTA clicked')({});
+                  doSomething();
+                },
+                label: args.actionLabel,
+              }
+            : undefined,
+          description: args.description,
+          heading: args.heading,
+        });
+      };
+
+      return () =>
+        h('div', { style: 'min-height: 200px;' }, [
+          h(TideButton, {
+            label: 'Trigger Toast',
+            onClick: triggerToast,
+          }),
+          h(TideToaster),
+        ]);
+    },
+  };
+};
+
+export default {
+  argTypes: {
+    actionLabel: {
+      control: 'text',
+      table: { defaultValue: { summary: 'None' } },
+    },
+    description: {
+      control: 'text',
+      table: { defaultValue: { summary: 'None' } },
+    },
+    heading: {
+      control: 'text',
+      table: { defaultValue: { summary: 'None' } },
+    },
+    isActionable: {
+      control: 'boolean',
+    },
+  },
+  args: {
+    actionLabel: 'Undo',
+    description: 'This is a toast notification.',
+    heading: 'Toast Demo',
+    isActionable: false,
+  },
+  component: TideToaster,
+  parameters,
+  render,
+  tags: ['autodocs'],
+  title: 'Components/TideToaster',
+};
+
+export const Demo = {};

package/src/types/Icon.ts

@@ -153,6 +153,10 @@ export const ICON_REALM = {
     PWC: 'boatmart-pwc',
     TRAILER: 'boatmart-trailer',
   },
+  CYCLE: {
+    MOTORCYCLE: 'cycle-motorcycle',
+    TRAILER: 'cycle-trailer',
+  },
   RV: {
     CLASS_A: 'rv-class-a',
     CLASS_B: 'rv-class-b',

package/src/types/RealmLogo.ts

@@ -0,0 +1,38 @@
+import type { RealmKey } from '@/types/Realm';
+
+export const SIZE_LOGO = {
+  LARGE: 'large',
+  MARK: 'mark',
+  SMALL: 'small',
+} as const;
+type SizeLogoKey = keyof typeof SIZE_LOGO;
+export type SizeLogo = (typeof SIZE_LOGO)[SizeLogoKey];
+
+export const LOGO_HEIGHT = {
+  LARGE: 32,
+  SMALL: 24,
+};
+
+export const LOGO_LARGE_WIDTH: Record<RealmKey, number> = {
+  AERO: 186,
+  ATV: 192,
+  BOATMART: 152,
+  CYCLE: 169,
+  EQUIPMENT: 112,
+  PWC: 177,
+  RV: 169,
+  SNOW: 150,
+  TRUCK: 185,
+} as const;
+
+export const LOGO_MARK_WIDTH: Record<RealmKey, number> = {
+  AERO: 32,
+  ATV: 32,
+  BOATMART: 33,
+  CYCLE: 32,
+  EQUIPMENT: 37,
+  PWC: 32,
+  RV: 32,
+  SNOW: 32,
+  TRUCK: 32,
+} as const;

package/src/types/Styles.ts

@@ -512,10 +512,11 @@ export const CSS = {
   },
   WIDTH: {
     AUTO: 'tide-width-auto',
-    ZERO: 'tide-width-0',
     FULL: 'tide-width-full',
     MAX_FULL: 'tide-max-width-full',
     MIN_ZERO: 'tide-min-width-0',
+    STRETCH: 'tide-width-stretch',
+    ZERO: 'tide-width-0',
   },
   Z_INDEX: {
     INITIAL: 'tide-z-index-initial',

package/src/types/Toast.ts

@@ -0,0 +1,21 @@
+import type { Ref } from 'vue';
+
+export type TideToast = {
+  description?: string;
+  heading: string;
+  id: string;
+  action?: {
+    callback: () => void;
+    label: string;
+  };
+};
+
+export type TideToastOmitId = Omit<TideToast, 'id'>;
+
+export type TideToaster = {
+  addToast: (toast: TideToastOmitId) => void;
+  cancelAutoDismiss: () => void;
+  clearToasts: () => void;
+  startAutoDismiss: () => void;
+  toasts: Ref<readonly TideToast[]>;
+};

package/src/utilities/realm.ts

@@ -0,0 +1,17 @@
+import { REALM } from '@/types/Realm';
+
+import type { Realm, RealmKey } from '@/types/Realm';
+
+export const getRealmKeyFromRealm = (realm: Realm): RealmKey => {
+  const entries = Object.entries(REALM) as [RealmKey, Realm][];
+
+  const match = entries.find((entry): entry is [RealmKey, Realm] => {
+    return entry[1] === realm;
+  });
+
+  if (!match) {
+    throw new Error(`Mapping for ${realm} not found`);
+  }
+
+  return match[0];
+};

package/src/utilities/viewport.ts

@@ -34,8 +34,8 @@ export const setScrollLock = async (isLocked: boolean) => {
       // body.classList.remove(BODY_LOCK_CLASS);
 
       body.style.removeProperty('inset');
-      body.style.removeProperty('marginTop');
-      body.style.removeProperty('overflowY');
+      body.style.removeProperty('margin-top');
+      body.style.removeProperty('overflow-y');
       body.style.removeProperty('position');
       body.style.removeProperty('--saved-scroll-y');
 

package/tests/TideRealmLogo.spec.ts

@@ -0,0 +1,58 @@
+import fs from 'fs';
+import path from 'path';
+import { describe, expect, it } from 'vitest';
+
+import { LOGO_LARGE_WIDTH, LOGO_MARK_WIDTH } from '@/types/RealmLogo.ts';
+
+const BRANDING_DIR = path.resolve(__dirname, '../src/assets/svg/branding');
+const LOGO_DIR = path.join(BRANDING_DIR, 'logo');
+const MARK_DIR = path.join(BRANDING_DIR, 'mark');
+
+function getViewBoxWidth(content: string): number | null {
+  const viewBoxMatch = content.match(/viewBox\s*=\s*["']0\s+0\s+(\d+\.?\d*)\s+\d+\.?\d*["']/i);
+  return viewBoxMatch ? parseFloat(viewBoxMatch[1]) : null;
+}
+
+describe('Realm Logo Constant Validation', () => {
+  const realms = Object.keys(LOGO_LARGE_WIDTH) as (keyof typeof LOGO_LARGE_WIDTH)[];
+
+  describe('Full Logos', () => {
+    realms.forEach((realm) => {
+      const fileName = `logo-${realm.toLowerCase()}.svg`;
+      const filePath = path.join(LOGO_DIR, fileName);
+
+      it(`should match the viewBox width in ${fileName}`, () => {
+        if (!fs.existsSync(filePath)) {
+          throw new Error(`SVG file missing: ${filePath}`);
+        }
+
+        const content = fs.readFileSync(filePath, 'utf8');
+        const vbWidth = getViewBoxWidth(content);
+
+        expect(vbWidth, `Could not parse viewBox in ${fileName}`).not.toBeNull();
+
+        expect(LOGO_LARGE_WIDTH[realm], `LOGO_LARGE_WIDTH[${realm}] does not match ${fileName}`).toBe(vbWidth);
+      });
+    });
+  });
+
+  describe('Logo Marks', () => {
+    realms.forEach((realm) => {
+      const fileName = `mark-${realm.toLowerCase()}.svg`;
+      const filePath = path.join(MARK_DIR, fileName);
+
+      it(`should match the viewBox width in ${fileName}`, () => {
+        if (!fs.existsSync(filePath)) {
+          throw new Error(`SVG file missing: ${filePath}`);
+        }
+
+        const content = fs.readFileSync(filePath, 'utf8');
+        const vbWidth = getViewBoxWidth(content);
+
+        expect(vbWidth, `Could not parse viewBox in ${fileName}`).not.toBeNull();
+
+        expect(LOGO_MARK_WIDTH[realm], `LOGO_MARK_WIDTH[${realm}] does not match ${fileName}`).toBe(vbWidth);
+      });
+    });
+  });
+});