tide-design-system 2.5.4 → 2.5.8

package/src/components/TideChipAction.vue

@@ -1,4 +1,13 @@
-<script lang="ts" setup>
+<script lang="ts">
+  /**
+   * Renders a chip action button intended to be used in navigation menus relating to searches.
+   *
+   * @see the [Storybook interface](https://tide-design-system.netlify.app/?path=/docs/components-tidechipaction--docs) for TideChipAction
+   */
+  export default {};
+</script>
+
+<script setup lang="ts">
   import { computed } from 'vue';
 
   import InternalBaseLink from '@/components/InternalBaseLink.vue';
@@ -9,17 +18,29 @@
   import { TARGET } from '@/types/Target';
 
   import type { Element } from '@/types/Element';
+  import type { Icon } from '@/types/Icon';
 
   type Props = {
+    /** HTML tag type. */
     element?: Element;
+
+    /** URL to navigate to on click. */
     href?: string;
+
+    /** Icon to show before the label. */
+    iconLeading?: Icon;
+
+    /** Determines whether to target a new browser tab. */
     isNewTab?: boolean;
+
+    /** Chip text. */
     label: string;
   };
 
   const props = withDefaults(defineProps<Props>(), {
     element: ELEMENT.LINK,
     href: undefined,
+    iconLeading: ICON.SEARCH,
     isNewTab: false,
   });
 
@@ -47,7 +68,7 @@
     :type="element === ELEMENT.BUTTON ? ELEMENT.BUTTON : undefined"
     :is="rootElement"
   >
-    <TideIcon :icon="ICON.SEARCH" />
+    <TideIcon :icon="props.iconLeading" />
 
     <span>{{ props.label }}</span>
   </component>

package/src/components/TideIcon.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-  import { markRaw, ref, watch } from 'vue';
+  import { defineAsyncComponent, markRaw, ref, watch } from 'vue';
 
   import { REALM } from '@/types/Realm';
   import { SIZE } from '@/types/Size';
@@ -29,13 +29,15 @@
       const [prefix] = id.split('-');
       const realmFolder = REALM[prefix?.toUpperCase() as keyof typeof REALM];
 
-      const loader = realmFolder
-        ? () => import(`../assets/svg/icons/realm/${realmFolder}/Icon${name}.svg?component`)
-        : () => import(`../assets/svg/icons/Icon${name}.svg?component`);
+      const component = defineAsyncComponent(() => {
+        if (realmFolder) {
+          return import(`../assets/svg/icons/realm/${realmFolder}/Icon${name}.svg?component`);
+        }
 
-      const mod = await loader();
+        return import(`../assets/svg/icons/Icon${name}.svg?component`);
+      });
 
-      innerSVG.value = markRaw(mod.default);
+      innerSVG.value = markRaw(component);
     },
     { immediate: true }
   );

package/src/components/TideInputSelect.vue

@@ -1,3 +1,12 @@
+<script lang="ts">
+  /**
+   * Renders a select input intended to be used in forms.
+   *
+   * @see the [Storybook interface](https://tide-design-system.netlify.app/?path=/docs/components-tideinputselect--docs) for TideInputSelect
+   */
+  export default {};
+</script>
+
 <script lang="ts" setup>
   import { computed, ref, useId, watch, watchEffect } from 'vue';
 
@@ -14,14 +23,37 @@
   import type { ErrorDisplay, ValidationResult } from '@/types/Validation';
 
   type Props = {
+    /** Determines whether Select is interactable */
     disabled?: boolean;
+
+    /** Overrides the default error message and valid state */
     error?: string;
+
+    /** Determines whether errors display prior to blur */
     errorDisplay?: ErrorDisplay;
+
+    /** Label content */
     label?: string;
+
+    /** Name attribute */
     name?: string;
+
+    /** Determines grouped values found inside Select */
     optgroups?: (SelectOption | SelectOptionGroup)[] | readonly (SelectOption | SelectOptionGroup)[];
+
+    /** Determines ungrouped values found inside Select */
     options?: SelectOption[] | readonly SelectOption[];
+
+    /** Prefix content */
+    prefix?: string;
+
+    /** Determines whether Select is required */
     required?: boolean;
+
+    /** Suffix content */
+    suffix?: string;
+
+    /** Explainer text beneath input */
     supportingText?: string;
   };
 
@@ -34,7 +66,9 @@
     name: undefined,
     optgroups: undefined,
     options: undefined,
+    prefix: undefined,
     required: false,
+    suffix: undefined,
     supportingText: undefined,
   });
 
@@ -125,7 +159,7 @@
         CSS.GAP.HALF,
         CSS.BORDER.RADIUS.HALF,
         CSS.BG.SURFACE.DEFAULT,
-        props.disabled ? CSS.CURSOR.NOT_ALLOWED : '',
+        disabled ? CSS.CURSOR.NOT_ALLOWED : '',
         CSS.OVERFLOW.XY.HIDDEN,
       ]"
       @click="expandOptions"
@@ -147,61 +181,87 @@
           {{ formattedLabel }}
         </label>
 
-        <select
-          :class="[
-            CSS.PADDING.BOTTOM.HALF,
-            CSS.PADDING.X.ONE,
-            CSS.WIDTH.FULL,
-            disabled && CSS.CURSOR.NOT_ALLOWED,
-            CSS.FONT.ROLE.BODY_1,
-          ]"
-          :disabled="disabled"
-          :name="name"
-          ref="selectElement"
-          :required="required"
-          @focus="handleFocus"
-          @focusout="handleFocusOut"
-          :id="inputId"
-          v-model="modelValue"
-        >
-          <template v-for="optgroup in props.optgroups">
-            <optgroup
-              :class="[CSS.WIDTH.FULL, CSS.BG.SURFACE.DEFAULT]"
-              :key="(optgroup as SelectOptionGroup).label"
-              :label="(optgroup as SelectOptionGroup).label"
-              v-if="(optgroup as SelectOptionGroup).options"
-            >
+        <div :class="[CSS.DISPLAY.FLEX, CSS.AXIS2.CENTER, CSS.WIDTH.FULL, CSS.GAP.HALF]">
+          <span
+            :class="[CSS.FONT.ROLE.BODY_1, CSS.MARGIN.LEFT.ONE, CSS.POINTER_EVENTS.OFF, label && CSS.MARGIN.TOP.ONE]"
+            v-if="prefix"
+          >
+            {{ prefix }}
+          </span>
+
+          <select
+            :class="[
+              CSS.PADDING.BOTTOM.HALF,
+              CSS.PADDING.TOP.ONE,
+              CSS.PADDING.LEFT.ONE,
+              CSS.PADDING.RIGHT.TWO,
+              CSS.WIDTH.FULL,
+              CSS.FONT.ROLE.BODY_1,
+              disabled && CSS.CURSOR.NOT_ALLOWED,
+            ]"
+            :disabled="disabled"
+            :name="name"
+            ref="selectElement"
+            :required="required"
+            @focus="handleFocus"
+            @focusout="handleFocusOut"
+            :id="inputId"
+            v-model="modelValue"
+          >
+            <template v-for="optgroup in optgroups">
+              <optgroup
+                :class="[CSS.WIDTH.FULL, CSS.BG.SURFACE.DEFAULT]"
+                :key="`group-${(optgroup as SelectOptionGroup).label}`"
+                :label="(optgroup as SelectOptionGroup).label"
+                v-if="(optgroup as SelectOptionGroup).options"
+              >
+                <option
+                  :class="[CSS.WIDTH.FULL, CSS.BG.SURFACE.DEFAULT]"
+                  :key="option.value"
+                  :value="option.value"
+                  v-for="option in (optgroup as SelectOptionGroup).options"
+                >
+                  {{ option.label }}
+                </option>
+              </optgroup>
+
               <option
                 :class="[CSS.WIDTH.FULL, CSS.BG.SURFACE.DEFAULT]"
-                :key="option.value"
-                :value="option.value"
-                v-for="option in (optgroup as SelectOptionGroup).options"
+                :key="`option-${(optgroup as SelectOption).value}`"
+                :selected="modelValue === (optgroup as SelectOption).value ? true : undefined"
+                :value="(optgroup as SelectOption).value"
+                v-else
               >
-                {{ option.label }}
+                {{ (optgroup as SelectOption).label }}
               </option>
-            </optgroup>
+            </template>
 
             <option
               :class="[CSS.WIDTH.FULL, CSS.BG.SURFACE.DEFAULT]"
-              :key="(optgroup as SelectOption).value"
-              :selected="modelValue === (optgroup as SelectOption).value ? true : undefined"
-              :value="(optgroup as SelectOption).value"
-              v-else
+              :key="option.value"
+              :selected="modelValue === option.value ? true : undefined"
+              :value="option.value"
+              v-for="option in options"
             >
-              {{ (optgroup as SelectOption).label }}
+              {{ option.label }}
             </option>
-          </template>
-
-          <option
-            :class="[CSS.WIDTH.FULL, CSS.BG.SURFACE.DEFAULT]"
-            :key="option.value"
-            :selected="modelValue === option.value ? true : undefined"
-            :value="option.value"
-            v-for="option in options"
-          >
-            {{ option.label }}
-          </option>
-        </select>
+          </select>
+        </div>
+      </div>
+      <div
+        :class="[
+          CSS.POSITION.ABSOLUTE,
+          CSS.POSITIONING.RIGHT,
+          CSS.FONT.ROLE.BODY_1,
+          CSS.MARGIN.RIGHT.TWO,
+          CSS.POINTER_EVENTS.OFF,
+          label && CSS.MARGIN.TOP.ONE,
+        ]"
+        v-if="suffix"
+      >
+        <span :class="CSS.PADDING.RIGHT.ONE">
+          {{ suffix }}
+        </span>
       </div>
 
       <TideIcon

package/src/components/TideModal.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-  import { nextTick, onBeforeMount, onMounted, ref, watch } from 'vue';
+  import { nextTick, onBeforeMount, onBeforeUnmount, onMounted, ref, watch } from 'vue';
 
   import TideButtonIcon from '@/components/TideButtonIcon.vue';
   import { BREAKPOINT } from '@/types/Breakpoint';
@@ -17,9 +17,13 @@
      * Return `false` to cancel the close event.
      */
     beforeClose?: () => void | boolean | Promise<void | boolean>;
+    /** Controls display of the back button. */
     isBackButton?: boolean;
+    /** Controls whether the modal can be dismissed with a close button or other gestures. */
     isDismissible?: boolean;
+    /** The title to display in the modal's header. */
     title?: string;
+    /** Custom override to the modal's width constraint. Include units. */
     width?: string;
   };
 
@@ -44,10 +48,12 @@
 
   const triggerNativeDialogOpen = () => {
     modalDialog.value?.showModal();
+    setScrollLock(true);
   };
 
   const triggerNativeDialogClose = () => {
     modalDialog.value?.close();
+    setScrollLock(false);
   };
 
   const scrollContentToTop = () => {
@@ -83,7 +89,6 @@
     } else {
       triggerNativeDialogClose();
     }
-    setScrollLock(isOpen.value);
   });
 
   onBeforeMount(() => {
@@ -95,6 +100,13 @@
       triggerNativeDialogOpen();
     }
   });
+
+  onBeforeUnmount(() => {
+    if (isOpen.value) {
+      isOpen.value = false;
+      triggerNativeDialogClose();
+    }
+  });
 </script>
 
 <template>

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/components/TideToaster.vue

@@ -0,0 +1,88 @@
+<script setup lang="ts">
+  import { onBeforeMount } from 'vue';
+
+  import TideAlert from '@/components/TideAlert.vue';
+  import { useTideToaster } from '@/composables/useTideToaster';
+  import { CSS } from '@/types/Styles';
+  import { TOP_LAYER_ID, initFauxTopLayer } from '@/utilities/viewport';
+
+  const { toasts, clearToasts, cancelAutoDismiss, startAutoDismiss } = useTideToaster();
+
+  onBeforeMount(() => {
+    initFauxTopLayer();
+  });
+</script>
+
+<template>
+  <Teleport :to="`#${TOP_LAYER_ID}`">
+    <div
+      :class="[
+        'tide-toaster',
+        CSS.HEIGHT.FULL,
+        CSS.POINTER_EVENTS.OFF,
+        CSS.POSITION.FIXED,
+        CSS.POSITIONING.LEFT,
+        CSS.POSITIONING.TOP,
+        CSS.WIDTH.FULL,
+      ]"
+    >
+      <TransitionGroup name="pop">
+        <div
+          :class="[
+            'tide-toast-wrap',
+            CSS.POINTER_EVENTS.ON,
+            CSS.POSITION.ABSOLUTE,
+            CSS.Z_INDEX.ONE,
+            CSS.POSITIONING.RIGHT,
+            CSS.POSITIONING.TOP,
+            CSS.MARGIN.FULL.ONE,
+            CSS.WIDTH.STRETCH,
+          ]"
+          :key="toast.id"
+          @mouseenter="cancelAutoDismiss"
+          @mouseleave="startAutoDismiss"
+          v-for="toast in toasts"
+        >
+          <TideAlert
+            :cta-label="toast.action?.label"
+            :heading="toast.heading"
+            :style="{ '--tide-max-width': 'none' }"
+            @close="clearToasts"
+            @cta-click="toast?.action?.callback"
+            is-dismissible
+            is-toast
+          >
+            {{ toast.description }}
+          </TideAlert>
+        </div>
+      </TransitionGroup>
+    </div>
+  </Teleport>
+</template>
+
+<style scoped>
+  .pop-enter-active,
+  .pop-leave-active {
+    transition: var(--tide-animate);
+    transition-property: opacity, transform, translate;
+  }
+
+  .pop-enter-from {
+    translate: 100% 0;
+  }
+
+  .pop-leave-to {
+    opacity: 0;
+    z-index: 0 !important;
+  }
+
+  .pop-leave-active {
+    position: absolute;
+  }
+
+  @media (min-width: 768px) {
+    .tide-toast-wrap {
+      width: 400px;
+    }
+  }
+</style>

package/src/composables/useTideToaster.ts

@@ -0,0 +1,63 @@
+import { inject, provide, readonly, ref } from 'vue';
+
+import type { TideToast, TideToastOmitId, TideToaster } from '@/types/Toast';
+
+const TOASTER_KEY = Symbol('tide-toaster');
+
+const AUTO_DISMISS_DURATION_MS = {
+  ACTIONABLE: 10000,
+  INFORMATIONAL: 5000,
+} as const;
+
+export const useTideToaster = () => {
+  const injected = inject<TideToaster>(TOASTER_KEY);
+  if (injected) return injected;
+
+  const timeoutId = ref<ReturnType<typeof setTimeout> | null>(null);
+  const toasts = ref<TideToast[]>([]);
+  const id = ref<number>(0);
+
+  const addToast = (newToast: TideToastOmitId) => {
+    id.value++;
+    clearToasts();
+
+    toasts.value.push({
+      ...newToast,
+      id: `tide-toast-${id.value}`,
+    } as TideToast);
+
+    if (typeof window !== 'undefined') {
+      cancelAutoDismiss();
+      startAutoDismiss();
+    }
+  };
+
+  const clearToasts = () => {
+    toasts.value = [];
+  };
+
+  const cancelAutoDismiss = () => {
+    if (timeoutId.value) clearTimeout(timeoutId.value);
+  };
+
+  const startAutoDismiss = () => {
+    if (!toasts.value.length) return;
+
+    const autoDismissDuration = toasts.value[0].action
+      ? AUTO_DISMISS_DURATION_MS.ACTIONABLE
+      : AUTO_DISMISS_DURATION_MS.INFORMATIONAL;
+    timeoutId.value = setTimeout(clearToasts, autoDismissDuration);
+  };
+
+  const toaster: TideToaster = {
+    addToast,
+    cancelAutoDismiss,
+    clearToasts,
+    startAutoDismiss,
+    toasts: readonly(toasts),
+  };
+
+  provide(TOASTER_KEY, toaster);
+
+  return toaster;
+};

package/src/stories/TideAccordionItem.stories.ts

@@ -50,21 +50,20 @@ export default {
         type: { summary: 'HTML' },
       },
     },
+    disabled: {
+      ...argTypeBooleanUnrequired,
+    },
     hasBottomDivider: {
       ...argTypeBooleanUnrequired,
-      description: 'Determines whether to include bottom divider',
     },
     hasTopDivider: {
       ...argTypeBooleanUnrequired,
-      description: 'Determines whether to include bottom divider',
     },
     isOptional: {
       ...argTypeBooleanUnrequired,
-      description: 'Determines whether to show "(optional)" indicator after label',
     },
     label: {
       control: 'text',
-      description: 'Label exposed when collapsed',
       table: {
         defaultValue: { summary: 'None' },
         type: { summary: 'string' },
@@ -83,6 +82,7 @@ export default {
   args: {
     dataTrack: '',
     default: 'Lorem Ipsum',
+    disabled: undefined,
     hasBottomDivider: undefined,
     hasTopDivider: undefined,
     isOptional: undefined,