tide-design-system 2.1.7 → 2.1.8

package/src/components/TidePopover.vue

@@ -0,0 +1,167 @@
+<script lang="ts" setup>
+  import { autoPlacement, autoUpdate, offset as offsetMiddleware, shift, useFloating } from '@floating-ui/vue';
+  import { computed, onBeforeMount, onMounted, onUnmounted, ref, watch, watchEffect } from 'vue';
+
+  import { CSS } from '@/types/Styles';
+  import { isClickOutside } from '@/utilities/event';
+  import { TOP_LAYER_ID, initFauxTopLayer } from '@/utilities/viewport';
+
+  import type { Ref } from 'vue';
+
+  type Props = {
+    anchorId: string;
+    offset?: number;
+  };
+
+  const props = withDefaults(defineProps<Props>(), {
+    offset: 16,
+  });
+
+  const anchor: Ref<HTMLElement | null> = ref(null);
+  const floating: Ref<HTMLElement | null> = ref(null);
+  const root: Ref<HTMLElement | null> = ref(null);
+  const isHovered = ref(false);
+  const isToggledOpen = ref(false);
+  const middleware = ref([autoPlacement(), offsetMiddleware({ mainAxis: props.offset }), shift({ padding: 16 })]);
+
+  const isShowPopover = computed(() => isHovered.value || isToggledOpen.value);
+
+  const { floatingStyles } = useFloating(anchor, floating, {
+    middleware,
+    strategy: 'fixed',
+    whileElementsMounted: autoUpdate,
+  });
+
+  const handlePermanentOpenBodyClick = (e: MouseEvent) => {
+    if (!anchor.value || !floating.value) return;
+    if (isClickOutside(e, [anchor.value, floating.value])) {
+      e.stopImmediatePropagation();
+      isToggledOpen.value = false;
+    }
+  };
+
+  const handleAnchorElementMouseOver = () => {
+    isHovered.value = true;
+  };
+
+  const handleAnchorElementMouseLeave = () => {
+    isHovered.value = false;
+  };
+
+  const handleAnchorElementClick = () => {
+    isToggledOpen.value = true;
+  };
+
+  const addListenersToAnchorElement = () => {
+    if (!anchor.value) return null;
+    anchor.value.addEventListener('mouseover', handleAnchorElementMouseOver);
+    anchor.value.addEventListener('mouseleave', handleAnchorElementMouseLeave);
+    anchor.value.addEventListener('click', handleAnchorElementClick);
+  };
+
+  const removeListenersFromAnchorElement = () => {
+    if (!anchor.value) return null;
+    anchor.value.removeEventListener('mouseover', handleAnchorElementMouseOver);
+    anchor.value.removeEventListener('mouseleave', handleAnchorElementMouseLeave);
+    anchor.value.removeEventListener('click', handleAnchorElementClick);
+  };
+
+  const handlePermanentOpenBodyKeydown = (e: KeyboardEvent) => {
+    if (e.key === 'Escape') {
+      isToggledOpen.value = false;
+    }
+  };
+
+  const addOpenListenersToRoot = () => {
+    if (!root.value) return;
+    root.value.addEventListener('click', handlePermanentOpenBodyClick, true);
+    root.value.addEventListener('keydown', handlePermanentOpenBodyKeydown);
+  };
+
+  const removeOpenListenersFromRoot = () => {
+    if (!root.value) return;
+    root.value.removeEventListener('click', handlePermanentOpenBodyClick, true);
+    root.value.removeEventListener('keydown', handlePermanentOpenBodyKeydown);
+  };
+
+  const updateAnchorElement = () => {
+    anchor.value = document.getElementById(props.anchorId);
+  };
+
+  watch(
+    () => isToggledOpen.value,
+    (newValue) => {
+      if (newValue) {
+        addOpenListenersToRoot();
+      } else {
+        removeOpenListenersFromRoot();
+      }
+    }
+  );
+
+  watch(
+    () => props.anchorId,
+    () => {
+      removeListenersFromAnchorElement();
+      updateAnchorElement();
+      addListenersToAnchorElement();
+    }
+  );
+
+  watchEffect(() => {
+    middleware.value = [autoPlacement(), offsetMiddleware({ mainAxis: props.offset }), shift({ padding: 16 })];
+  });
+
+  onBeforeMount(() => {
+    initFauxTopLayer();
+  });
+
+  onMounted(() => {
+    updateAnchorElement();
+    root.value = document.documentElement;
+    addListenersToAnchorElement();
+  });
+
+  onUnmounted(() => {
+    removeListenersFromAnchorElement();
+  });
+</script>
+
+<template>
+  <Teleport :to="`#${TOP_LAYER_ID}`">
+    <Transition>
+      <div
+        :class="[
+          'tide-popover',
+          CSS.BG.SURFACE.DEFAULT,
+          CSS.BORDER.COLOR.LOW,
+          CSS.BORDER.FULL.ONE,
+          CSS.BORDER.RADIUS.HALF,
+          CSS.FONT.ROLE.BODY_2,
+          CSS.PADDING.FULL.ONE,
+          CSS.SHADOW.BOTTOM,
+        ]"
+        ref="floating"
+        :style="{ ...floatingStyles, maxWidth: `calc(100% - ${props.offset * 2}px)` }"
+        v-show="isShowPopover"
+      >
+        <slot />
+      </div>
+    </Transition>
+  </Teleport>
+</template>
+
+<style scoped>
+  .v-enter-from,
+  .v-leave-to {
+    opacity: 0;
+  }
+  .v-enter-active,
+  .v-leave-active {
+    transition: opacity var(--tide-animate);
+  }
+  .v-enter-to,
+  .v-leave-from {
+    opacity: 1;
+  }
+</style>

package/src/stories/TideAccordionItem.stories.ts

@@ -43,6 +43,7 @@ export default {
       isEmit: true,
       name: 'toggle',
       table: {
+        category: 'Events',
         defaultValue: { summary: 'None' },
         type: { summary: '(isExpanded: boolean) => void' },
       },

package/src/stories/TideButtonSegmented.stories.ts

@@ -68,6 +68,7 @@ export default {
     handleChange: {
       ...change,
       table: {
+        category: 'Events',
         defaultValue: { summary: 'None' },
         type: { summary: '(tabIndex: number) => void' },
       },

package/src/stories/TideCard.stories.ts

@@ -1,7 +1,7 @@
 import { action } from '@storybook/addon-actions';
 
 import TideCard from '@/components/TideCard.vue';
-import { POSITION_CARD_ICON as STANDARD_POSITION_CARD_ICON, TYPE_CARD as STANDARD_TYPE_CARD } from '@/types/Card';
+import { TYPE_CARD as STANDARD_TYPE_CARD } from '@/types/Card';
 import { ICON } from '@/types/Icon';
 import {
   argTypeBooleanUnrequired,
@@ -13,7 +13,6 @@ import {
 } from '@/utilities/storybook';
 
 const TYPE_CARD = prependNoneAsUndefined(STANDARD_TYPE_CARD);
-const POSITION_CARD_ICON = prependNoneAsUndefined(STANDARD_POSITION_CARD_ICON);
 const CARD_ICON = prependNoneAsUndefined(ICON);
 
 const render = (args: any) => ({
@@ -67,14 +66,6 @@ export default {
         type: { summary: 'Icon' },
       },
     },
-    iconPosition: {
-      ...formatArgType({ POSITION_CARD_ICON }),
-      description: 'Position of the icon relative to the content.',
-      table: {
-        defaultValue: { summary: 'LEFT' },
-        type: { summary: 'CardIconPosition' },
-      },
-    },
     selected: {
       ...argTypeBooleanUnrequired,
       description: 'Determines whether the Card is selected (for selectable cards).',
@@ -93,7 +84,6 @@ export default {
     description: '',
     heading: 'Demo',
     icon: CARD_ICON.None,
-    iconPosition: POSITION_CARD_ICON.None,
     selected: undefined,
     type: TYPE_CARD.None,
   },

package/src/stories/TideCarousel.stories.ts

@@ -75,6 +75,7 @@ export default {
     handleChange: {
       ...change,
       table: {
+        category: 'Events',
         defaultValue: { summary: 'None' },
         type: { summary: '(currentSlide: number) => void' },
       },

package/src/stories/TideModal.stories.ts

@@ -2,17 +2,33 @@ import { action } from '@storybook/addon-actions';
 
 import TideButton from '@/components/TideButton.vue';
 import TideModal from '@/components/TideModal.vue';
-import { disabledArgType, doSomething, lineBreak, tab } from '@/utilities/storybook';
+import {
+  argTypeBooleanUnrequired,
+  disabledArgType,
+  doSomething,
+  doSomethingElse,
+  lineBreak,
+  tab,
+} from '@/utilities/storybook';
 
 import type { StoryContext } from '@storybook/vue3';
 
 const formatSnippet = (code: string, context: StoryContext) => {
   const { args } = context;
 
+  const argsWithValues: string[] = [`:is-open="${args.isOpen}"`];
   const slotContentIndentationFixed = (args.default as string).replace(/(<\/[^>]+>)$/, `${tab}$1`);
 
+  if (args.isBackButton !== undefined) argsWithValues.push(`:is-back-button="${args.isBackButton}"`);
+  if (args.isDismissible !== undefined) argsWithValues.push(`:is-dismissible="${args.isDismissible}"`);
+  if (args.title !== undefined) argsWithValues.push(`title="${args.title}"`);
+  if (args.width !== '') argsWithValues.push(`width="${args.width}"`);
+
+  if (args.handleBack !== undefined) argsWithValues.push(`@back="${args.handleBack}"`);
+  if (args.handleClose !== undefined) argsWithValues.push(`@close="${args.handleClose}"`);
+
   return (
-    `<TideModal @close="handleClose">${lineBreak}` +
+    `<TideModal ${argsWithValues.join(' ')}>${lineBreak}` +
     `${tab}${slotContentIndentationFixed}${lineBreak}${lineBreak}` +
     `${tab}<template #footer>${lineBreak}` +
     `${tab}${tab}${args.footer}${lineBreak}` +
@@ -35,6 +51,20 @@ const render = (args: any, { updateArgs }: any) => ({
   components: { TideButton, TideModal },
   methods: {
     doSomething,
+    doSomethingElse,
+    handleBack: () => {
+      action('Back button pressed')({});
+
+      try {
+        const callback = eval(args.handleBack);
+
+        if (callback) {
+          callback();
+        }
+      } catch {
+        alert('Please specify a valid handler in the "back" control.');
+      }
+    },
     handleClose: () => {
       action('Modal closed')({});
       updateArgs({ ...args, isOpen: false });
@@ -49,11 +79,14 @@ const render = (args: any, { updateArgs }: any) => ({
         alert('Please specify a valid handler in the "close" control.');
       }
     },
+    handleOpenModalClick: () => {
+      updateArgs({ ...args, isOpen: true });
+    },
   },
   setup: () => ({ args }),
   template: `
-  <p>Toggle "isOpen" prop below to preview.</p>
-  <TideModal v-bind="args" @close="handleClose">
+  <TideButton label="Open Modal" @click="handleOpenModalClick" />
+  <TideModal v-bind="args" @close="handleClose" @back="handleBack">
     ${args.default}
     <template #footer>${args.footer}</template>
   </TideModal>`,
@@ -61,6 +94,7 @@ const render = (args: any, { updateArgs }: any) => ({
 
 export default {
   argTypes: {
+    back: disabledArgType,
     close: disabledArgType,
     default: {
       control: 'text',
@@ -78,15 +112,40 @@ export default {
         type: { summary: 'HTML' },
       },
     },
+    handleBack: {
+      control: 'text',
+      description: "JS function to execute when modal's back button is pressed",
+      name: 'back',
+      table: {
+        category: 'Events',
+        defaultValue: { summary: 'None' },
+        type: { summary: '() => void' },
+      },
+    },
     handleClose: {
       control: 'text',
       description: 'JS function to execute when modal is closed',
       name: 'close',
       table: {
+        category: 'Events',
         defaultValue: { summary: 'None' },
         type: { summary: '() => void' },
       },
     },
+    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' },
+      },
+    },
     isOpen: {
       description: 'Determines whether the Modal is displayed',
       table: {
@@ -109,10 +168,13 @@ export default {
   args: {
     default: `<div>${lineBreak}${tab}Default Slot Demo${lineBreak}</div>`,
     footer: '<TideButton label="Footer Slot Demo" />',
-    handleClose: 'doSomething',
+    handleBack: 'doSomething',
+    handleClose: 'doSomethingElse',
+    isBackButton: undefined,
+    isDismissible: undefined,
     isOpen: false,
     title: 'Modal Demo',
-    width: '400px',
+    width: '',
   },
   component: TideModal,
   parameters,

package/src/stories/TidePagination.stories.ts

@@ -50,6 +50,7 @@ export default {
     handleChange: {
       ...change,
       table: {
+        category: 'Events',
         defaultValue: { summary: 'None' },
         type: { summary: '(pageIndex: number) => void' },
       },

package/src/stories/TidePopover.stories.ts

@@ -0,0 +1,98 @@
+import TideIcon from '@/components/TideIcon.vue';
+import TidePopover from '@/components/TidePopover.vue';
+import { ICON } from '@/types/Icon';
+import { lineBreak, tab } from '@/utilities/storybook';
+
+import type { StoryContext } from '@storybook/vue3';
+
+const formatSnippet = (code: string, context: StoryContext) => {
+  const { args } = context;
+
+  const argsWithValues: string[] = [];
+
+  if (args.anchorId !== '') argsWithValues.push(`anchor-id="${args.anchorId}"`);
+  if (args.offset !== '') argsWithValues.push(`:offset="${args.offset}"`);
+
+  return (
+    `<TideIcon :icon="ICON.INFO" id="anchorDemo" />${lineBreak}${lineBreak}` +
+    `<TidePopover ${argsWithValues.join(' ')}>${lineBreak}` +
+    `${tab}${args.default}${lineBreak}` +
+    `</TidePopover>`
+  );
+};
+
+const parameters = {
+  docs: {
+    source: {
+      format: 'vue',
+      language: 'html',
+      transform: formatSnippet,
+    },
+  },
+};
+
+const render = (args: any) => ({
+  components: { TideIcon, TidePopover },
+  setup: () => {
+    if (args.offset === '') {
+      delete args.offset;
+    }
+
+    return { ICON, args };
+  },
+  template: `
+  <TideIcon :icon="ICON.INFO" id="anchorDemo" />
+
+  <TidePopover v-bind="args">
+    ${args.default}
+  </TidePopover>
+  `,
+  updated: () => {
+    if (args.offset === '') {
+      delete args.offset;
+    }
+
+    return { ICON, args };
+  },
+});
+
+export default {
+  argTypes: {
+    anchorId: {
+      control: 'text',
+      description: 'Determines the HTML node over which the Popover will appear',
+      table: {
+        defaultValue: { summary: 'None' },
+        type: { summary: 'string' },
+      },
+    },
+    default: {
+      control: 'text',
+      description: 'Popover content',
+      table: {
+        defaultValue: { summary: 'None' },
+        type: { summary: 'HTML' },
+      },
+    },
+    offset: {
+      control: 'text',
+      description: 'Determines spacing between Popover and anchor node',
+      table: {
+        defaultValue: { summary: '16' },
+        type: { summary: 'number' },
+      },
+    },
+  },
+  args: {
+    anchorId: 'anchorDemo',
+    default: '<span>Demo</span>',
+    offset: '',
+  },
+  component: TidePopover,
+  parameters,
+  render,
+  tags: ['autodocs'],
+  title: 'Basic Components/TidePopover',
+};
+
+export const Demo = {};

package/src/stories/TideSwitch.stories.ts

@@ -44,6 +44,7 @@ export default {
     handleChange: {
       ...change,
       table: {
+        category: 'Events',
         defaultValue: { summary: 'None' },
         type: { summary: '() => void' },
       },

package/src/types/Card.ts

@@ -5,10 +5,3 @@ export const TYPE_CARD = {
 } as const;
 
 export type CardType = (typeof TYPE_CARD)[keyof typeof TYPE_CARD];
-
-export const POSITION_CARD_ICON = {
-  LEFT: 'left',
-  TOP: 'top',
-} as const;
-
-export type CardIconPosition = (typeof POSITION_CARD_ICON)[keyof typeof POSITION_CARD_ICON];

package/src/utilities/event.ts

@@ -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/src/utilities/storybook.ts

@@ -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/src/utilities/viewport.ts

@@ -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';
+};