tide-design-system 2.5.4 → 2.5.7

package/src/components/TideRealmLogo.vue

@@ -0,0 +1,71 @@
+<script setup lang="ts">
+  import { computed, defineAsyncComponent, markRaw, ref, watch } from 'vue';
+
+  import { LOGO_HEIGHT, LOGO_LARGE_WIDTH, LOGO_MARK_WIDTH, SIZE_LOGO } from '@/types/RealmLogo';
+  import { CSS } from '@/types/Styles';
+  import { getRealmKeyFromRealm } from '@/utilities/realm';
+
+  import type { Realm } from '@/types/Realm';
+  import type { SizeLogo } from '@/types/RealmLogo';
+  import type { Component } from 'vue';
+
+  type Props = {
+    /** Determines the size of the logo or mark */
+    size: SizeLogo;
+
+    /** Sets the realm for this logo instance */
+    realm: Realm;
+  };
+  const props = defineProps<Props>();
+
+  const innerSVG = ref<Component>();
+
+  const logoWidth = computed<number>(() => {
+    if (props.size === SIZE_LOGO.MARK) return LOGO_MARK_WIDTH[getRealmKeyFromRealm(props.realm)];
+    const fullLogoWidth = LOGO_LARGE_WIDTH[getRealmKeyFromRealm(props.realm)];
+    if (props.size === SIZE_LOGO.SMALL) {
+      const shrinkFactor = LOGO_HEIGHT.SMALL / LOGO_HEIGHT.LARGE;
+      return Math.round(fullLogoWidth * shrinkFactor);
+    } else {
+      return fullLogoWidth;
+    }
+  });
+
+  const logoHeight = computed<number>(() => (props.size === SIZE_LOGO.SMALL ? LOGO_HEIGHT.SMALL : LOGO_HEIGHT.LARGE));
+
+  watch(
+    () => [props.size, props.realm],
+    async () => {
+      const component = defineAsyncComponent(() => {
+        if (props.size === SIZE_LOGO.MARK)
+          return import(`../assets/svg/branding/mark/mark-${props.realm}.svg?component`);
+        else return import(`../assets/svg/branding/logo/logo-${props.realm}.svg?component`);
+      });
+      innerSVG.value = markRaw(component);
+    },
+    { immediate: true }
+  );
+</script>
+
+<template>
+  <div
+    :class="['tide-realm-logo']"
+    :style="{
+      '--tide-logo-width': `${logoWidth}px`,
+      '--tide-logo-height': `${logoHeight}px`,
+    }"
+  >
+    <Component
+      :class="[CSS.DISPLAY.BLOCK]"
+      :is="innerSVG"
+      v-if="innerSVG"
+    />
+  </div>
+</template>
+
+<style>
+  .tide-realm-logo {
+    width: var(--tide-logo-width);
+    height: var(--tide-logo-height);
+  }
+</style>

package/src/components/TideSheet.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-  import { onBeforeMount, onMounted, ref, watch } from 'vue';
+  import { onBeforeMount, onBeforeUnmount, onMounted, ref, watch } from 'vue';
 
   import TideButtonIcon from '@/components/TideButtonIcon.vue';
   import TideDivider from '@/components/TideDivider.vue';
@@ -11,6 +11,7 @@
   import type { Ref } from 'vue';
 
   type Props = {
+    /** Controls display of the back button. */
     isBackButton?: boolean;
   };
 
@@ -30,10 +31,12 @@
 
   const triggerNativeDialogOpen = () => {
     dialogElement.value?.showModal();
+    setScrollLock(true);
   };
 
   const triggerNativeDialogClose = () => {
     dialogElement.value?.close();
+    setScrollLock(false);
   };
 
   const close = () => {
@@ -56,7 +59,6 @@
     } else {
       triggerNativeDialogClose();
     }
-    setScrollLock(isOpen.value);
   });
 
   onBeforeMount(() => {
@@ -68,6 +70,13 @@
       triggerNativeDialogOpen();
     }
   });
+
+  onBeforeUnmount(() => {
+    if (isOpen.value) {
+      isOpen.value = false;
+      triggerNativeDialogClose();
+    }
+  });
 </script>
 
 <template>

package/src/components/TideTabs.vue

@@ -23,12 +23,13 @@
   <div :class="['tide-tabs', CSS.DISPLAY.FLEX, CSS.BORDER.BOTTOM.TWO, CSS.BORDER.COLOR.LOW]">
     <TideCarousel :is-floating="true">
       <li
+        :class="[CSS.PADDING.X.HALF]"
         :key="tab.label"
         v-for="(tab, index) in tabs"
       >
         <TideLink
           :class="[
-            index === currentTab ? CSS.FONT.COLOR.SURFACE.BRAND : CSS.FONT.COLOR.SURFACE.VARIANT,
+            index === currentTab ? [CSS.FONT.COLOR.SURFACE.BRAND] : [CSS.FONT.COLOR.SURFACE.VARIANT],
             CSS.PADDING.BOTTOM.ONE,
             CSS.FONT.ROLE.LABEL_1,
             CSS.WHITESPACE_WRAP.OFF,
@@ -38,7 +39,7 @@
           :subtle="true"
           @click="handleClick(index)"
         />
-        <div :class="['rounded-border', index === currentTab && 'active']" />
+        <div :class="['rounded-border', CSS.MARGIN.X.HALF, index === currentTab && [CSS.BG.PRIMARY]]" />
       </li>
     </TideCarousel>
   </div>
@@ -46,13 +47,7 @@
 
 <style scoped>
   .rounded-border {
+    height: 4px;
     border-radius: var(--tide-radius-full) var(--tide-radius-full) 0 0;
-    border-top-width: 4px;
-    border-top-style: solid;
-    border-color: transparent;
-  }
-
-  .active {
-    border-color: var(--tide-on-surface-brand);
   }
 </style>

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/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/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/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);
+      });
+    });
+  });
+});