tide-design-system 2.5.6 → 2.5.9

package/src/components/TideSheet.vue

@@ -1,5 +1,14 @@
+<script lang="ts">
+  /**
+   * Renders a sheet component intended to be used for displaying content in a modal-like menu overlay on the right side of the screen.
+   *
+   * @see the [Storybook interface](https://tide-design-system.netlify.app/?path=/docs/components-tidesheet--docs) for TideSheet
+   */
+  export default {};
+</script>
+
 <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 +20,7 @@
   import type { Ref } from 'vue';
 
   type Props = {
+    /** Controls display of the back button. */
     isBackButton?: boolean;
   };
 
@@ -30,10 +40,12 @@
 
   const triggerNativeDialogOpen = () => {
     dialogElement.value?.showModal();
+    setScrollLock(true);
   };
 
   const triggerNativeDialogClose = () => {
     dialogElement.value?.close();
+    setScrollLock(false);
   };
 
   const close = () => {
@@ -56,7 +68,6 @@
     } else {
       triggerNativeDialogClose();
     }
-    setScrollLock(isOpen.value);
   });
 
   onBeforeMount(() => {
@@ -68,6 +79,13 @@
       triggerNativeDialogOpen();
     }
   });
+
+  onBeforeUnmount(() => {
+    if (isOpen.value) {
+      isOpen.value = false;
+      triggerNativeDialogClose();
+    }
+  });
 </script>
 
 <template>

package/src/components/TideSwitch.vue

@@ -1,3 +1,12 @@
+<script lang="ts">
+  /**
+   * Renders a switch component intended to be used for toggling a boolean value.
+   *
+   * @see the [Storybook interface](https://tide-design-system.netlify.app/?path=/docs/components-tideswitch--docs) for TideSwitch
+   */
+  export default {};
+</script>
+
 <script lang="ts" setup>
   import TideIcon from '@/components/TideIcon.vue';
   import { ICON } from '@/types/Icon';
@@ -5,6 +14,7 @@
   import { CSS } from '@/types/Styles';
 
   type Props = {
+    /** Determines clickability */
     disabled?: boolean;
   };
 

package/src/components/TideTabs.vue

@@ -1,3 +1,12 @@
+<script lang="ts">
+  /**
+   * Renders a tabs component intended to be used for navigation.
+   *
+   * @see the [Storybook interface](https://tide-design-system.netlify.app/?path=/docs/components-tidetabs--docs) for TideTabs
+   */
+  export default {};
+</script>
+
 <script setup lang="ts">
   import TideCarousel from '@/components/TideCarousel.vue';
   import TideLink from '@/components/TideLink.vue';
@@ -7,6 +16,7 @@
   import type { Tab } from '@/types/Tab';
 
   type Props = {
+    /** Sets labels and callback for each tab */
     tabs: Tab[];
   };
 
@@ -23,12 +33,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 +49,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 +57,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,97 @@
+<script lang="ts">
+  /**
+   * Renders a toaster component intended to be used for displaying notifications.
+   *
+   * @see the [Storybook interface](https://tide-design-system.netlify.app/?path=/docs/components-tidetoaster--docs) for TideToaster
+   */
+  export default {};
+</script>
+
+<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,12 @@ export default {
         type: { summary: 'HTML' },
       },
     },
-    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',
-    },
+    disabled: argTypeBooleanUnrequired,
+    hasBottomDivider: argTypeBooleanUnrequired,
+    hasTopDivider: argTypeBooleanUnrequired,
+    isOptional: argTypeBooleanUnrequired,
     label: {
       control: 'text',
-      description: 'Label exposed when collapsed',
       table: {
         defaultValue: { summary: 'None' },
         type: { summary: 'string' },
@@ -83,6 +74,7 @@ export default {
   args: {
     dataTrack: '',
     default: 'Lorem Ipsum',
+    disabled: undefined,
     hasBottomDivider: undefined,
     hasTopDivider: undefined,
     isOptional: undefined,

package/src/stories/TideAlert.stories.ts

@@ -60,7 +60,6 @@ export default {
     close: disabledArgType,
     ctaLabel: {
       control: 'text',
-      description: 'Call To Action that renders as a TideLink; clicking emits a separate `click` event',
       table: {
         defaultValue: { summary: 'None' },
         type: { summary: 'string' },
@@ -99,23 +98,15 @@ export default {
     },
     heading: {
       control: 'text',
-      description: 'Heading text',
       table: {
         defaultValue: { summary: 'None' },
         type: { summary: 'HTML' },
       },
     },
-    isDismissible: {
-      ...argTypeBooleanUnrequired,
-      description: 'Determines whether the Alert can be closed by the user',
-    },
-    isToast: {
-      ...argTypeBooleanUnrequired,
-      description: 'Determines whether the Alert is an overlay or displaces content',
-    },
+    isDismissible: argTypeBooleanUnrequired,
+    isToast: argTypeBooleanUnrequired,
     type: {
       ...formatArgType({ ALERT }),
-      description: 'Alert type',
       table: {
         defaultValue: { summary: 'ALERT' },
       },

package/src/stories/TideBadge.stories.ts

@@ -46,7 +46,6 @@ export default {
   argTypes: {
     color: {
       ...formatArgType({ BADGE_COLOR }),
-      description: 'Determines which color option to adopt (if any)',
       table: {
         category: 'Props',
         defaultValue: { summary: 'None' },
@@ -54,7 +53,6 @@ export default {
     },
     iconLeading: {
       ...formatArgType({ ICON }),
-      description: 'Icon to left of label',
       table: {
         category: 'Props',
         defaultValue: { summary: 'None' },
@@ -62,7 +60,6 @@ export default {
     },
     isFloating: {
       ...argTypeBooleanUnrequired,
-      description: 'Determines whether to display the "Floating" variant styles',
       table: {
         category: 'Props',
         defaultValue: { summary: 'None' },
@@ -70,7 +67,6 @@ export default {
     },
     label: {
       control: 'text',
-      description: 'Badge text',
       table: {
         category: 'Props',
         defaultValue: { summary: 'None' },

package/src/stories/TideBadgeTrustedPartner.stories.ts

@@ -16,7 +16,6 @@ export default {
   argTypes: {
     years: {
       ...formatArgType({ BADGE_TRUSTED }),
-      description: 'Badge text',
       table: {
         defaultValue: { summary: BADGE_TRUSTED.YEARS_5 },
       },

package/src/stories/TideBreadCrumbs.stories.ts

@@ -23,7 +23,6 @@ export default {
   argTypes: {
     breadCrumbs: {
       control: 'object',
-      description: 'Determines label and optional URL for each bread crumb',
       isCustom: true,
       table: {
         defaultValue: { summary: '[]' },

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/TideButtonPagination.stories.ts

@@ -49,7 +49,6 @@ export default {
     dataTrack,
     disabled: {
       ...argTypeBooleanUnrequired,
-      description: 'Indicates whether Pagination Button is associated with the displayed page',
       if: {
         arg: 'element',
         eq: ELEMENT_BROAD.BUTTON,
@@ -57,13 +56,11 @@ export default {
     },
     element: {
       ...formatArgType({ ELEMENT_BROAD }),
-      description: 'HTML tag type',
       table: {
         defaultValue: { summary: 'BUTTON' },
       },
     },
     href: {
-      description: 'URL to open<br />(Link only)',
       if: { arg: 'element', eq: ELEMENT_BROAD.LINK },
       table: {
         defaultValue: { summary: 'None' },
@@ -77,7 +74,6 @@ export default {
     },
     label: {
       control: 'text',
-      description: 'Button text',
       table: {
         defaultValue: { summary: 'None' },
         type: { summary: 'string' },

package/src/stories/TideButtonSegmented.stories.ts

@@ -78,7 +78,6 @@ export default {
     },
     tabs: {
       control: 'object',
-      description: 'Sets label and callback for each tab',
       isCustom: true,
       table: {
         defaultValue: { summary: 'None' },

package/src/stories/TideCard.stories.ts

@@ -48,7 +48,6 @@ export default {
     },
     description: {
       control: 'text',
-      description: 'Optional description text displayed below the heading.',
       table: {
         defaultValue: { summary: 'None' },
         type: { summary: 'string' },
@@ -56,7 +55,13 @@ export default {
     },
     heading: {
       control: 'text',
-      description: 'The main heading of the card.',
+      table: {
+        defaultValue: { summary: 'None' },
+        type: { summary: 'string' },
+      },
+    },
+    href: {
+      control: 'text',
       table: {
         defaultValue: { summary: 'None' },
         type: { summary: 'string' },
@@ -64,19 +69,14 @@ export default {
     },
     icon: {
       ...formatArgType({ CARD_ICON }),
-      description: 'Optional icon displayed on the card.',
       table: {
         defaultValue: { summary: 'None' },
         type: { summary: 'Icon' },
       },
     },
-    selected: {
-      ...argTypeBooleanUnrequired,
-      description: 'Determines whether the Card is selected (for selectable cards).',
-    },
+    selected: argTypeBooleanUnrequired,
     type: {
       ...formatArgType({ TYPE_CARD }),
-      description: 'Type of the card.',
       table: {
         defaultValue: { summary: 'INFORMATIONAL' },
         type: { summary: 'CardType' },
@@ -87,6 +87,7 @@ export default {
     click: 'doSomething',
     description: '',
     heading: 'Demo',
+    href: '',
     icon: CARD_ICON.None,
     selected: undefined,
     type: TYPE_CARD.None,