npm - tide-design-system - Versions diffs - 2.1.7 → 2.1.8 - Mend

tide-design-system 2.1.7 → 2.1.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (37) hide show

package/.storybook/main.ts +1 -0
package/dist/css/realm/aero.css +3 -3
package/dist/css/realm/boatmart.css +1 -1
package/dist/css/realm/cycle.css +1 -1
package/dist/css/realm/equipment.css +1 -1
package/dist/css/realm/pwc.css +1 -1
package/dist/css/reset.css +7 -0
package/dist/style.css +1 -1
package/dist/tide-design-system.cjs +2 -2
package/dist/tide-design-system.esm.d.ts +40 -22
package/dist/tide-design-system.esm.js +787 -785
package/dist/utilities/event.ts +4 -0
package/dist/utilities/storybook.ts +4 -0
package/dist/utilities/viewport.ts +44 -0
package/index.ts +2 -4
package/package.json +4 -1
package/src/assets/css/realm/aero.css +3 -3
package/src/assets/css/realm/boatmart.css +1 -1
package/src/assets/css/realm/cycle.css +1 -1
package/src/assets/css/realm/equipment.css +1 -1
package/src/assets/css/realm/pwc.css +1 -1
package/src/assets/css/reset.css +7 -0
package/src/components/TideCard.vue +3 -7
package/src/components/TideModal.vue +164 -132
package/src/components/TidePopover.vue +167 -0
package/src/stories/TideAccordionItem.stories.ts +1 -0
package/src/stories/TideButtonSegmented.stories.ts +1 -0
package/src/stories/TideCard.stories.ts +1 -11
package/src/stories/TideCarousel.stories.ts +1 -0
package/src/stories/TideModal.stories.ts +68 -6
package/src/stories/TidePagination.stories.ts +1 -0
package/src/stories/TidePopover.stories.ts +98 -0
package/src/stories/TideSwitch.stories.ts +1 -0
package/src/types/Card.ts +0 -7
package/src/utilities/event.ts +4 -0
package/src/utilities/storybook.ts +4 -0
package/src/utilities/viewport.ts +44 -0

package/dist/utilities/event.ts ADDED Viewed

@@ -0,0 +1,4 @@
+export const isClickOutside = (event: MouseEvent, elements: HTMLElement | HTMLElement[]): boolean => {
+  const targets = Array.isArray(elements) ? elements : [elements];
+  return !targets.some((el) => el.contains(event.target as Node));
+};

package/dist/utilities/storybook.ts CHANGED Viewed

@@ -95,6 +95,10 @@ export const doSomething = () => {
   alert('Did something.');
 };
+export const doSomethingElse = () => {
+  alert('Did something else.');
+};
 // Flatten a nested constant into a simple constant.
 export const flatten = (input: Nested): KeyString => {
   const output: KeyString = {};

package/dist/utilities/viewport.ts ADDED Viewed

@@ -0,0 +1,44 @@
+import { nextTick } from 'vue';
+/**
+ * Directly modifies the `<body>` element to apply or remove scroll lock.
+ * When `false` is provided, it only unlocks scroll if there are no open
+ * HTML dialog elements.
+ */
+export const setScrollLock = async (isLocked: boolean) => {
+  const BODY_LOCK_CLASS = 'body-scroll-lock';
+  const body = document.body;
+  if (isLocked) {
+    if (!body.dataset.scrollLockY) {
+      const scrollY = window.scrollY;
+      body.dataset.scrollLockY = scrollY.toString();
+      body.style.setProperty('--saved-scroll-y', `${scrollY}px`);
+      body.classList.add(BODY_LOCK_CLASS);
+    }
+  } else {
+    await nextTick();
+    if (!document.querySelector('dialog[open]')) {
+      const savedScrollY = parseInt(body.dataset.scrollLockY || '0');
+      body.classList.remove(BODY_LOCK_CLASS);
+      body.style.removeProperty('--saved-scroll-y');
+      window.scrollTo({
+        behavior: 'auto',
+        top: savedScrollY,
+      });
+      delete body.dataset.scrollLockY;
+    }
+  }
+};
+export const TOP_LAYER_ID = 'tideTopLayer';
+export const initFauxTopLayer = () => {
+  let topLayer = document.getElementById(TOP_LAYER_ID);
+  if (!topLayer) {
+    topLayer = document.createElement('div');
+    topLayer.id = TOP_LAYER_ID;
+    document.body.appendChild(topLayer);
+  }
+  topLayer.style.isolation = 'isolate';
+};

package/index.ts CHANGED Viewed

@@ -32,7 +32,7 @@ import TideSwitch from '@/components/TideSwitch.vue';
 import { ALERT } from '@/types/Alert';
 import { BADGE, BADGE_PREMIUM, BADGE_TRUSTED } from '@/types/Badge';
 import { BREAKPOINT, MEDIA } from '@/types/Breakpoint';
-import { POSITION_CARD_ICON, TYPE_CARD } from '@/types/Card';
+import { TYPE_CARD } from '@/types/Card';
 import { ELEMENT, ELEMENT_TEXT_AS_ICON } from '@/types/Element';
 import { FORMAT, FORMAT_REGEX } from '@/types/Formatted';
 import { ICON, ICON_REALM } from '@/types/Icon';
@@ -50,7 +50,7 @@ import type { Alert } from '@/types/Alert';
 import type { Badge, BadgePremium, BadgeTrustedYears } from '@/types/Badge';
 import type { BreadCrumb } from '@/types/BreadCrumb';
 import type { Breakpoint, Media } from '@/types/Breakpoint';
-import type { CardIconPosition, CardType } from '@/types/Card';
+import type { CardType } from '@/types/Card';
 import type { Detail } from '@/types/Detail';
 import type { Element, ElementTextAsIcon } from '@/types/Element';
 import type { FacetComponentIdRange, RangeData } from '@/types/FacetRange';
@@ -107,7 +107,6 @@ export type {
   BreadCrumb,
   Breakpoint,
   CardType,
-  CardIconPosition,
   CheckboxField,
   CheckboxInput,
   CssUtility,
@@ -163,7 +162,6 @@ export {
   BADGE_PREMIUM,
   BADGE_TRUSTED,
   BREAKPOINT,
-  POSITION_CARD_ICON,
   CSS,
   ELEMENT,
   ELEMENT_TEXT_AS_ICON,

package/package.json CHANGED Viewed

@@ -61,5 +61,8 @@
   "main": "dist/tide-design-system.cjs",
   "module": "dist/tide-design-system.esm.js",
   "types": "dist/tide-design-system.esm.d.ts",
-  "version": "2.1.7"
+  "version": "2.1.8",
+  "dependencies": {
+    "@floating-ui/vue": "^1.1.6"
+  }
 }

package/src/assets/css/realm/aero.css CHANGED Viewed

@@ -1,11 +1,11 @@
 /* Aero Trader Realm Colors */
 :root {
   /* Realm-specific Tonal Palette: Only to be referenced in the assignment of Color Roles below. */
-  --tide-realm-aqua:       #90E0E6;
+  --tide-realm-aqua:       #A2DEE5;
   --tide-realm-atmosphere: #3F6EBD;
-  --tide-realm-cloud:      #E2E8F2;
+  --tide-realm-cloud:      #E3E8F1;
   --tide-realm-sky:        #AAD4F0;
-  --tide-realm-starry:     #153976;
+  --tide-realm-starry:     #3F6EBD;
   /* Color Roles: Each realm will assign values to this same series of variables from a combination of the Global and Realm-specific Palettes. */
   --tide-primary:        var(--tide-realm-atmosphere);

package/src/assets/css/realm/boatmart.css CHANGED Viewed

@@ -5,7 +5,7 @@
   --tide-realm-mist:      #DBEDFC;
   --tide-realm-navy-dark: #143353;
   --tide-realm-navy:      #1D4977;
-  --tide-realm-orange:    #FF642B;
+  --tide-realm-orange:    #D24614;
   /* Color Roles: Each realm will assign values to this same series of variables from a combination of the Global and Realm-specific Palettes. */
   --tide-primary:        var(--tide-realm-navy);

package/src/assets/css/realm/cycle.css CHANGED Viewed

@@ -4,7 +4,7 @@
   --tide-realm-light-blue: #DFECF2;
   --tide-realm-pure-black: #000000;
   --tide-realm-red:        #C50000;
-  --tide-realm-steel-blue: #1C3F53;
+  --tide-realm-steel-blue: #253E51;
   /* Color Roles: Each realm will assign values to this same series of variables from a combination of the Global and Realm-specific Palettes. */
   --tide-primary:        var(--tide-realm-pure-black);

package/src/assets/css/realm/equipment.css CHANGED Viewed

@@ -3,7 +3,7 @@
   /* Realm-specific Tonal Palette: Only to be referenced in the assignment of Color Roles below. */
   --tide-realm-charcoal:  #333333;
   --tide-realm-evergreen: #468200;
-  --tide-realm-moss:      #ECF6D4;
+  --tide-realm-moss:      #EEF6D7;
   --tide-realm-steel:     #494949;
   --tide-realm-yellow:    #FFCE34;

package/src/assets/css/realm/pwc.css CHANGED Viewed

@@ -4,7 +4,7 @@
   --tide-realm-baby-blue:     #86C0F4;
   --tide-realm-blue:          #0B72B8;
   --tide-realm-cantaloupe:    #ECA26A;
-  --tide-realm-foam:          #DDEBF6;
+  --tide-realm-foam:          #E0EBF5;
   --tide-realm-midnight-blue: #002344;
   /* Color Roles: Each realm will assign values to this same series of variables from a combination of the Global and Realm-specific Palettes. */

package/src/assets/css/reset.css CHANGED Viewed

@@ -4,6 +4,13 @@ body {
   line-height: 1.4;
 }
+.body-scroll-lock {
+  inset: 0;
+  margin-top: calc(0px - var(--saved-scroll-y, 0px));
+  overflow-y: scroll;
+  position: fixed;
+}
 *,
 *::before,
 *::after {

package/src/components/TideCard.vue CHANGED Viewed

@@ -1,17 +1,16 @@
 <script lang="ts" setup>
   import TideIcon from '@/components/TideIcon.vue';
-  import { POSITION_CARD_ICON, TYPE_CARD } from '@/types/Card';
+  import { TYPE_CARD } from '@/types/Card';
   import { SIZE } from '@/types/Size';
   import { CSS } from '@/types/Styles';
-  import type { CardIconPosition, CardType } from '@/types/Card';
+  import type { CardType } from '@/types/Card';
   import type { Icon } from '@/types/Icon';
   type Props = {
     description?: string;
     heading: string;
     icon?: Icon;
-    iconPosition: CardIconPosition;
     selected?: boolean;
     type: CardType;
     href?: string;
@@ -21,7 +20,6 @@
     description: undefined,
     href: undefined,
     icon: undefined,
-    iconPosition: POSITION_CARD_ICON.LEFT,
     selected: undefined,
     type: TYPE_CARD.INFORMATIONAL,
   });
@@ -39,9 +37,7 @@
       CSS.PADDING.FULL.ONE,
       CSS.WIDTH.FULL,
       CSS.ALIGN.X.LEFT,
-      iconPosition === POSITION_CARD_ICON.LEFT
-        ? CSS.FLEX.DIRECTION.ROW
-        : iconPosition === POSITION_CARD_ICON.TOP && CSS.FLEX.DIRECTION.COLUMN,
+      CSS.FLEX.DIRECTION.COLUMN,
       type !== TYPE_CARD.INFORMATIONAL && 'hoverable',
       type === TYPE_CARD.SELECTABLE && selected && 'selected',
     ]"

package/src/components/TideModal.vue CHANGED Viewed

@@ -1,187 +1,219 @@
 <script lang="ts" setup>
-  import { onMounted, ref, watch } from 'vue';
+  import { nextTick, onMounted, ref, watch } from 'vue';
-  import TideIcon from '@/components/TideIcon.vue';
+  import TideButtonIcon from '@/components/TideButtonIcon.vue';
+  import { BREAKPOINT } from '@/types/Breakpoint';
   import { ICON } from '@/types/Icon';
+  import { PRIORITY } from '@/types/Priority';
   import { CSS } from '@/types/Styles';
+  import { setScrollLock } from '@/utilities/viewport';
+  import type { Ref } from 'vue';
   type Props = {
+    isBackButton?: boolean;
+    isDismissible?: boolean;
     isOpen: boolean;
     title?: string;
     width?: string;
   };
-  const props = defineProps<Props>();
-  const emit = defineEmits(['close']);
-  const isOpen = ref(props.isOpen);
-  const savedScrollPosition = ref<number | null>(null); // TODO: replace body scroll lock with global structure?
-  const handleClose = () => {
-    isOpen.value = false;
+  const props = withDefaults(defineProps<Props>(), {
+    isBackButton: false,
+    isDismissible: true,
+    title: undefined,
+    width: undefined,
+  });
-    updateModalDisplay();
-    emit('close');
+  type Emits = {
+    (e: 'close'): void;
+    (e: 'back'): void;
   };
-  const updateModalDisplay = () => {
-    if (isOpen.value) {
-      savedScrollPosition.value = window.scrollY;
-      document.body.style.overflow = 'hidden';
-      savedScrollPosition.value && window.scrollTo(0, savedScrollPosition.value);
+  const emit = defineEmits<Emits>();
-      addOpenListeners();
-    } else {
-      document.body.style.overflow = '';
+  const modalContent: Ref<HTMLDivElement | undefined> = ref();
+  const modalDialog: Ref<HTMLDialogElement | undefined> = ref();
-      removeOpenListeners();
-    }
+  const triggerNativeDialogOpen = () => {
+    modalDialog.value?.showModal();
   };
-  const handleKeyDown = (event: KeyboardEvent) => {
-    if (event.key === 'Escape') {
-      event.stopPropagation();
-      handleClose();
-    }
-  };
-  const addOpenListeners = () => {
-    window.addEventListener('keydown', handleKeyDown);
+  const triggerNativeDialogClose = () => {
+    modalDialog.value?.close();
   };
-  const removeOpenListeners = () => {
-    window.removeEventListener('keydown', handleKeyDown);
+  const scrollContentToTop = () => {
+    nextTick(() => {
+      if (!modalContent.value) return;
+      modalContent.value.scrollTop = 0;
+    });
   };
-  onMounted(() => {
-    updateModalDisplay();
-  });
   watch(
     () => props.isOpen,
     (newValue) => {
-      isOpen.value = newValue;
-      updateModalDisplay();
+      if (!modalDialog.value) return;
+      if (newValue) {
+        triggerNativeDialogOpen();
+        scrollContentToTop();
+      } else {
+        triggerNativeDialogClose();
+      }
+      setScrollLock(newValue);
     }
   );
+  onMounted(() => {
+    if (props.isOpen) {
+      triggerNativeDialogOpen();
+    }
+  });
 </script>
 <template>
-  <Teleport to="body">
+  <dialog
+    :class="['tide-modal', CSS.BG.INITIAL, CSS.HEIGHT.FULL, CSS.WIDTH.FULL, CSS.OVERFLOW.XY.HIDDEN]"
+    ref="modalDialog"
+    :style="{ '--modal-width': props.width }"
+    @click.self="emit('close')"
+    @close="emit('close')"
+  >
     <div
       :class="[
-        'tide-modal-wrapper',
-        CSS.POSITION.ABSOLUTE,
+        'tide-modal-body',
+        CSS.BG.SURFACE.DEFAULT,
+        CSS.BORDER.RADIUS.ONE,
         CSS.DISPLAY.FLEX,
-        CSS.AXIS1.CENTER,
-        CSS.AXIS2.CENTER,
-        CSS.POSITIONING.TOP,
-        CSS.POSITIONING.LEFT,
+        CSS.FLEX.DIRECTION.COLUMN,
+        CSS.OVERFLOW.XY.HIDDEN,
+        CSS.POSITION.ABSOLUTE,
+        CSS.POSITIONING.BOTTOM,
+        CSS.SHADOW.TOP,
         CSS.WIDTH.FULL,
-        CSS.HEIGHT.FULL,
-        props.isOpen ? 'active' : CSS.POINTER_EVENTS.OFF,
-        CSS.OVERFLOW.Y.HIDDEN,
+        CSS.WIDTH.MAX_FULL,
+        CSS.withBreakpoint([CSS.SHADOW.BOTTOM], BREAKPOINT.SM),
       ]"
     >
-      <div
-        :class="['tide-modal-bg', CSS.POSITION.ABSOLUTE, CSS.WIDTH.FULL, CSS.HEIGHT.FULL]"
-        :style="{ '--tide-modal-width': props.width }"
-        @click.self="handleClose"
-      />
+      <header
+        :class="[
+          'tide-modal-header',
+          CSS.DISPLAY.FLEX,
+          CSS.AXIS2.CENTER,
+          CSS.GAP.HALF,
+          CSS.PADDING.Y.ONE,
+          CSS.BORDER.BOTTOM.ONE,
+          CSS.BORDER.COLOR.LOW,
+        ]"
+      >
+        <TideButtonIcon
+          :icon="ICON.CHEVRON_LEFT"
+          :priority="PRIORITY.QUATERNARY"
+          @click="emit('back')"
+          title="Back"
+          v-if="isBackButton"
+        />
+        <div
+          :class="[CSS.FONT.ROLE.HEADLINE_2]"
+          v-text="title"
+        />
+        <TideButtonIcon
+          :class="[CSS.FLEX.GROW.OFF, CSS.FLEX.SHRINK.OFF, CSS.MARGIN.LEFT.AUTO]"
+          :icon="ICON.CLOSE"
+          :priority="PRIORITY.QUATERNARY"
+          @click="triggerNativeDialogClose"
+          v-if="isDismissible"
+        />
+      </header>
       <div
         :class="[
-          'tide-modal',
-          CSS.BG.SURFACE.DEFAULT,
-          CSS.FONT.COLOR.SURFACE.DEFAULT,
-          CSS.POSITION.ABSOLUTE,
-          CSS.DISPLAY.FLEX,
-          CSS.FLEX.DIRECTION.COLUMN,
-          CSS.BORDER.RADIUS.ONE,
-          CSS.OVERFLOW.XY.HIDDEN,
-          CSS.SHADOW.BOTTOM,
+          'tide-modal-content',
+          CSS.DISPLAY.GRID,
+          CSS.OVERFLOW.Y.AUTO,
+          CSS.OVERFLOW.X.HIDDEN,
+          CSS.WIDTH.FULL,
+          CSS.PADDING.Y.TWO,
         ]"
+        ref="modalContent"
       >
-        <header
-          :class="[
-            'tide-modal-header',
-            CSS.POSITION.RELATIVE,
-            CSS.DISPLAY.FLEX,
-            CSS.AXIS2.CENTER,
-            CSS.PADDING.Y.ONE,
-            CSS.PADDING.X.TWO,
-            CSS.BORDER.BOTTOM.ONE,
-            CSS.BORDER.COLOR.LOW,
-          ]"
-        >
-          <div
-            :class="[CSS.FLEX.GROW.ON, CSS.FONT.SIZE.TWENTY, CSS.FONT.WEIGHT.SEVEN_HUNDRED]"
-            v-if="title"
-          >
-            {{ title }}
-          </div>
-          <button
-            :class="[CSS.POSITION.ABSOLUTE, CSS.POSITIONING.RIGHT, CSS.MARGIN.RIGHT.TWO]"
-            @click="handleClose"
-            title="Close"
-          >
-            <TideIcon :icon="ICON.CLOSE" />
-          </button>
-        </header>
-        <div :class="['tide-modal-content', CSS.PADDING.FULL.TWO, CSS.OVERFLOW.Y.AUTO]">
-          <slot />
-        </div>
-        <template v-if="$slots.footer">
-          <footer
-            :class="[
-              'tide-bg-surface',
-              CSS.POSITION.STICKY,
-              CSS.POSITIONING.LEFT,
-              CSS.POSITIONING.BOTTOM,
-              CSS.DISPLAY.FLEX,
-              CSS.AXIS1.END,
-              CSS.GAP.ONE,
-              CSS.PADDING.X.TWO,
-              CSS.PADDING.Y.ONE,
-              CSS.SHADOW.TOP,
-            ]"
-          >
-            <slot name="footer" />
-          </footer>
-        </template>
+        <slot />
       </div>
+      <footer
+        :class="['tide-modal-footer', CSS.AXIS1.END, CSS.DISPLAY.FLEX, CSS.GAP.TWO, CSS.PADDING.Y.ONE, CSS.SHADOW.TOP]"
+        v-if="$slots.footer"
+      >
+        <slot name="footer" />
+      </footer>
     </div>
-  </Teleport>
+  </dialog>
 </template>
 <style scoped>
   .tide-modal {
-    width: var(--tide-modal-width);
-    max-width: calc(100% - 2rem);
-    max-height: calc(100% - 2rem);
-    box-shadow: 0px 10px 25px 0px rgba(18, 43, 58, 0.2);
-    transform: translateY(100vh);
-    transition: var(--tide-animate);
-    transition-property: transform;
+    --modal-padding-x: 20px;
+    max-width: unset;
+    max-height: unset;
+    place-items: center;
+    display: none;
+    transition: all var(--tide-animate) allow-discrete;
+    transform: translateY(100%);
   }
-  .tide-modal-bg {
+  .tide-modal:open {
+    display: grid;
+    transform: translateY(0%);
+  }
+  .tide-modal::backdrop {
+    background-color: transparent;
+    transition: all var(--tide-animate) allow-discrete;
     backdrop-filter: blur(0px);
-    background-color: rgba(255, 255, 255, 0);
-    transition: var(--tide-animate);
-    transition-property: backdrop-filter, background-color;
+  }
+  .tide-modal:open::backdrop {
+    background-color: var(--tide-transparent-400);
+    backdrop-filter: blur(4px);
+  }
+  @starting-style {
+    .tide-modal:open {
+      display: grid;
+      transform: translateY(100%);
+    }
+    .tide-modal:open::backdrop {
+      background-color: transparent;
+      backdrop-filter: blur(4px);
+    }
+  }
+  .tide-modal-body {
+    width: var(--modal-width, 576px);
+    max-height: calc(100% - var(--tide-spacing-2));
   }
-  .active .tide-modal {
-    transform: translateY(0);
+  .tide-modal-header,
+  .tide-modal-footer {
+    padding-inline: var(--modal-padding-x);
+  }
+  .tide-modal-content {
+    grid-template-columns: var(--modal-padding-x) 1fr var(--modal-padding-x);
+  }
+  :where(.tide-modal-content):deep(> :where(*)) {
+    grid-column: 2;
   }
-  .active .tide-modal-bg {
-    backdrop-filter: blur(8px);
-    background-color: var(--tide-transparent-400);
+  @media (max-width: 767px) {
+    .tide-modal-body {
+      border-bottom-left-radius: 0;
+      border-bottom-right-radius: 0;
+    }
+  }
+  @media (min-width: 768px) {
+    .tide-modal {
+      --modal-padding-x: var(--tide-spacing-2);
+    }
+    .tide-modal-body {
+      max-height: 85%;
+      bottom: initial;
+    }
   }
 </style>