tide-design-system 2.4.3 → 2.4.4

package/package.json

@@ -63,7 +63,7 @@
   "main": "dist/tide-design-system.cjs",
   "module": "dist/tide-design-system.esm.js",
   "types": "dist/tide-design-system.esm.d.ts",
-  "version": "2.4.3",
+  "version": "2.4.4",
   "dependencies": {
     "@floating-ui/vue": "^1.1.6"
   }

package/src/assets/css/storybook.css

@@ -2,6 +2,7 @@
 @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap');
 
 .sb-border-black      {border: 1px solid #000000;}
+.sb-border-blue       {border: 1px solid #0000FF;}
 .sb-border-blue-light {border: 1px solid #CCDEF3;}
 .sb-border-white      {border: 1px solid #FFFFFF;}
 

package/src/assets/css/variables.css

@@ -57,8 +57,8 @@
 
   /* Global tonal palette */
   --tide-gray-100:  #FFFFFF;
-  --tide-gray-200:  #F5F5F5;
-  --tide-gray-300:  #E4E4E4;
+  --tide-gray-200:  #F2F2F2;
+  --tide-gray-300:  #E4E4E5;
   --tide-gray-400:  #C9CACB;
   --tide-gray-500:  #AEAFB2;
   --tide-gray-600:  #939598;

package/src/components/TideCarousel.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-  import { onMounted, onUnmounted, ref } from 'vue';
+  import { computed, onMounted, onUnmounted, ref } from 'vue';
 
   import TideButtonIcon from '@/components/TideButtonIcon.vue';
   import { ICON } from '@/types/Icon';
@@ -7,23 +7,25 @@
   import { CSS } from '@/types/Styles';
 
   type Props = {
-    bleed?: number;
+    hasDots?: boolean;
     isFloating?: boolean;
     isHeadline1?: boolean;
     isHideawayButtons?: boolean;
     isScrollByPage?: boolean;
     isTouchscreen?: boolean;
+    maxDots?: number;
     subtitle?: string;
     title?: string;
   };
 
   const props = withDefaults(defineProps<Props>(), {
-    bleed: undefined,
+    hasDots: undefined,
     isFloating: false,
     isHeadline1: false,
     isHideawayButtons: true,
     isScrollByPage: true,
     isTouchscreen: undefined,
+    maxDots: 5,
     subtitle: undefined,
     title: undefined,
   });
@@ -35,18 +37,52 @@
   const emit = defineEmits<Emits>();
 
   const containerRef = ref<HTMLDivElement | null>(null);
+  const contentWidth = ref<number>(0);
+  const currentPageIndex = ref<number>(0);
+  const dotsRef = ref<HTMLDivElement | null>(null);
+  const frameWidth = ref<number>(0);
   const isFirstSlide = ref<boolean>(true);
   const isLastSlide = ref<boolean>(false);
   const showButtons = ref<boolean>(true);
   const slideObserver = ref<IntersectionObserver | null>(null);
+  const slides = ref<HTMLElement[]>([]);
   const slidesInView = ref<number[]>([]);
   const slotObserver = ref<MutationObserver | null>(null);
 
-  const slides = ref<HTMLElement[]>([]);
+  const currentPage = computed(() => currentPageIndex.value + 1);
+  const dotContainerWidth = computed(() => dotCountVisible.value * dotWidth + (dotCountVisible.value - 1) * dotGap);
+  const dotCountVisible = computed(() => (props.maxDots > totalPages.value ? totalPages.value : props.maxDots));
+  const lastPageIndex = computed(() => totalPages.value - 1);
+  const totalPages = computed(() => {
+    if (!slides.value.length) return 0;
+    if (!props.isScrollByPage) return slides.value.length;
+
+    const gapWidth = cardGap * (slides.value.length - 1);
+    const contentNoGap = contentWidth.value - gapWidth;
+    const quotient = Math.round(contentNoGap / frameWidth.value);
+    const remainder = contentNoGap % frameWidth.value;
+
+    return remainder ? quotient + 1 : quotient;
+  });
+
+  const cardGap: number = 16;
+  const dotGap: number = 8;
+  const dotWidth: number = 8;
+
+  const getDotClass = (dotIndex: number) => {
+    let className = '';
+
+    if (dotIndex === currentPageIndex.value) className = 'tide-carousel-dot-active';
+    if (Math.abs(currentPageIndex.value - dotIndex) === 1) className = 'tide-carousel-dot-neighbor';
+
+    return className;
+  };
+
+  const measureDom = () => {
+    if (!containerRef.value) return;
 
-  // TODO: debounce
-  const handleScroll = () => {
-    updateContainerBleed();
+    contentWidth.value = containerRef.value.scrollWidth;
+    frameWidth.value = containerRef.value.clientWidth;
   };
 
   const observeSlides = () => {
@@ -99,10 +135,17 @@
   const scrollToOffset = (target: number) => {
     if (containerRef.value === null) return;
 
+    const lastOffset: number = slides.value[slides.value.length - 1].offsetLeft;
+    const placement = (target / lastOffset) * lastPageIndex.value;
+    const isScrollingLeft = placement <= currentPageIndex.value;
+
+    currentPageIndex.value = isScrollingLeft ? currentPageIndex.value - 1 : currentPageIndex.value + 1;
+
     containerRef.value.scrollTo({
       behavior: 'smooth',
       left: target,
     });
+    updateDots(isScrollingLeft);
   };
 
   const showNextPage = () => {
@@ -137,19 +180,19 @@
     scrollToOffset(slides.value[previousSlide].offsetLeft);
   };
 
-  const updateContainerBleed = () => {
-    if (containerRef.value === null) return;
-    if (props.bleed == undefined) return;
-
-    if (isLastSlide.value && showButtons.value) {
-      // Prevent gradient from bleeding off left edge in last position.
-      containerRef.value.style.margin = `-${props.bleed}px -${props.bleed}px -${props.bleed}px 0`;
-      containerRef.value.style.padding = `${props.bleed}px ${props.bleed}px ${props.bleed}px 0`;
-    } else {
-      // Prevent gradient from bleeding off right edge in first position.
-      containerRef.value.style.margin = `-${props.bleed}px 0 -${props.bleed}px -${props.bleed}px`;
-      containerRef.value.style.padding = `${props.bleed}px 0 ${props.bleed}px ${props.bleed}px`;
-    }
+  const updateDots = (isScrollingLeft: boolean) => {
+    if (!dotsRef.value || dotCountVisible.value >= totalPages.value) return;
+
+    const isOddDotCount = dotCountVisible.value % 2 !== 0;
+    const centerDot =
+      isOddDotCount || isScrollingLeft
+        ? Math.floor(dotCountVisible.value / 2) + 1
+        : Math.floor(dotCountVisible.value / 2);
+
+    dotsRef.value.scrollTo({
+      behavior: 'smooth',
+      left: currentPage.value < centerDot ? 0 : (currentPage.value - centerDot) * (dotWidth + dotGap),
+    });
   };
 
   onMounted(() => {
@@ -157,14 +200,19 @@
 
     slides.value = Array.from(containerRef.value.children) as HTMLElement[];
 
+    measureDom();
     observeSlides();
     observeSlot();
-    updateContainerBleed();
+
+    if (window) {
+      window.addEventListener('resize', measureDom);
+    }
   });
 
   onUnmounted(() => {
     slideObserver.value?.disconnect();
     slotObserver.value?.disconnect();
+    window.removeEventListener('resize', measureDom);
   });
 </script>
 
@@ -225,11 +273,10 @@
 
     <slot name="misc" />
 
-    <div :class="[CSS.POSITION.RELATIVE]">
+    <div :class="[CSS.POSITION.RELATIVE, CSS.DISPLAY.FLEX, CSS.AXIS1.CENTER]">
       <ul
         :class="[
           'tide-carousel-container',
-          props.bleed && 'bleed',
           CSS.DISPLAY.FLEX,
           CSS.GAP.ONE,
           CSS.LIST_BULLETS.OFF,
@@ -238,11 +285,54 @@
           CSS.SNAP.ON,
         ]"
         ref="containerRef"
-        @scroll="handleScroll"
       >
         <slot />
       </ul>
 
+      <div
+        :class="[
+          'tide-carousel-dots-container',
+          CSS.POSITION.ABSOLUTE,
+          CSS.POSITIONING.BOTTOM,
+          CSS.DISPLAY.FLEX,
+          CSS.AXIS1.CENTER,
+          CSS.MARGIN.BOTTOM.HALF,
+          CSS.WIDTH.FULL,
+        ]"
+        :style="{
+          width: `${dotContainerWidth}px`,
+        }"
+        v-if="isScrollByPage && hasDots && totalPages > 1"
+      >
+        <div
+          :class="[
+            'tide-carousel-dots',
+            CSS.DISPLAY.FLEX,
+            CSS.AXIS1.START,
+            CSS.AXIS2.CENTER,
+            CSS.GAP.HALF,
+            CSS.OVERFLOW.X.SCROLL,
+            CSS.POINTER_EVENTS.OFF,
+            CSS.SCROLLBAR.OFF,
+          ]"
+          ref="dotsRef"
+        >
+          <div
+            :class="[
+              'tide-carousel-dot',
+              CSS.FLEX.SHRINK.OFF,
+              CSS.HEIGHT.ZERO,
+              CSS.WIDTH.ZERO,
+              CSS.BORDER.RADIUS.FULL,
+              CSS.BG.SURFACE.DEFAULT,
+              getDotClass(index),
+            ]"
+            :key="index"
+            v-for="(_, index) in totalPages"
+          />
+        </div>
+      </div>
+
       <div
         :class="[
           'tide-carousel-button-overlay',
@@ -279,10 +369,6 @@
 </template>
 
 <style scoped>
-  .tide-carousel-container.bleed {
-    transition: margin var(--tide-animate), padding var(--tide-animate);
-  }
-
   .tide-carousel-button-overlay.hideaway {
     opacity: 0;
   }
@@ -290,4 +376,21 @@
   .tide-carousel:hover .tide-carousel-button-overlay.hideaway {
     opacity: 1;
   }
+
+  .tide-carousel-dot {
+    width: 8px;
+    height: 8px;
+    opacity: 0.75;
+    transform: scale(0.5);
+    transition: opacity var(--tide-animate), transform var(--tide-animate);
+  }
+
+  .tide-carousel-dot-neighbor {
+    transform: scale(0.75);
+  }
+
+  .tide-carousel-dot-active {
+    transform: scale(1);
+    opacity: 1;
+  }
 </style>

package/src/stories/TideCarousel.stories.ts

@@ -7,7 +7,6 @@ import { argTypeBooleanUnrequired, disabledArgType, doSomething, lineBreak, tab
 import type { StoryContext } from '@storybook/vue3';
 
 type Args = InstanceType<typeof TideCarousel>['$props'] & {
-  bleed: number | string;
   handleSlidesAddedToView: string;
 };
 
@@ -15,13 +14,13 @@ const formatSnippet = (code: string, context: StoryContext) => {
   const { args } = context;
 
   const argsWithValues: string[] = [];
-  const hasBleed = args.bleed !== '';
 
-  if (hasBleed) argsWithValues.push(`bleed="${args.bleed}"`);
+  if (args.hasDots !== undefined) argsWithValues.push(`has-dots="${args.hasDots}"`);
   if (args.isFloating !== undefined) argsWithValues.push(`:is-floating="${args.isFloating}"`);
   if (args.isHideawayButtons !== undefined) argsWithValues.push(`:is-hideaway-buttons="${args.isHideawayButtons}"`);
   if (args.isScrollByPage !== undefined) argsWithValues.push(`:is-scroll-by-page="false"`);
   if (args.isTouchscreen !== undefined) argsWithValues.push(`:is-touchscreen="${args.isTouchscreen}"`);
+  if (args.maxDots !== '') argsWithValues.push(`max-dots="${args.maxDots}"`);
   if (args.subtitle !== '') argsWithValues.push(`subtitle="${args.subtitle}"`);
   if (args.title !== '') argsWithValues.push(`title="${args.title}"`);
   if (args.handleSlidesAddedToView) argsWithValues.push(`@slides-added-to-view="${args.handleSlidesAddedToView}"`);
@@ -32,7 +31,7 @@ const formatSnippet = (code: string, context: StoryContext) => {
     // prettier-ignore
     `<TideCarousel ${argsWithValues.join(' ')}>` + lineBreak +
       slotContentMisc + tab +
-      `<li class="tide-shrink-none ${hasBleed ? 'tide-shadow-bottom' : ''}" v-for="(_child, index) in new Array(12)">` + lineBreak + tab + tab +
+      `<li class="tide-shrink-none" v-for="(_child, index) in new Array(12)">` + lineBreak + tab + tab +
         args.default + lineBreak + tab +
       `</li>` + lineBreak +
     `</TideCarousel>`
@@ -72,37 +71,20 @@ const render = (args: Args) => ({
   template:
   `<TideCarousel
     @slides-added-to-view="handleSlidesAddedToView"
-    class="tide-margin-x-1"
     v-bind="args"
   >
     <template #misc>{{ args.misc }}</template>
     <li
-      :class="args.bleed ? 'tide-shadow-bottom' : ''"
-      class="tide-shrink-none tide-border-1 tide-border tide-padding-1"
+      class="tide-shrink-none tide-border-1 sb-border-blue tide-padding-1 sb-bg-blue-light"
       v-for="(_child, index) in new Array(12)"
     >
       {{ args.default.replace('#', index) }}
     </li>
   </TideCarousel>`,
-  updated() {
-    if (typeof args.bleed === 'string' && args.bleed === '') {
-      args.bleed = 0;
-    }
-
-    return { args };
-  },
 });
 
 export default {
   argTypes: {
-    bleed: {
-      control: 'text',
-      description: 'Sets an allowance for visible overflow at component boundaries.',
-      table: {
-        defaultValue: { summary: 'None' },
-        type: { summary: 'number' },
-      },
-    },
     default: {
       control: 'text',
       description: 'Dynamic card content',
@@ -122,6 +104,13 @@ export default {
         type: { summary: '(slides: number[]) => void' },
       },
     },
+    hasDots: {
+      ...argTypeBooleanUnrequired,
+      description: 'Determines whether to display the indicator dots overlay',
+      table: {
+        defaultValue: { summary: 'False' },
+      },
+    },
     isFloating: {
       ...argTypeBooleanUnrequired,
       description: 'Determines whether to display on-page or floating carousel',
@@ -158,6 +147,14 @@ export default {
         defaultValue: { summary: 'None' },
       },
     },
+    maxDots: {
+      control: 'text',
+      description: 'Determines the max number of indicator dots to display at a given time',
+      table: {
+        defaultValue: { summary: 'None' },
+        type: { summary: 'number' },
+      },
+    },
     misc: {
       control: 'text',
       description: 'Content to display between the title/buttons and carousel content',
@@ -186,13 +183,14 @@ export default {
     },
   },
   args: {
-    bleed: '',
     default: 'Card #',
     handleSlidesAddedToView: 'doSomething',
+    hasDots: undefined,
     isFloating: undefined,
     isHideawayButtons: undefined,
     isScrollByPage: undefined,
     isTouchscreen: undefined,
+    maxDots: '',
     misc: '',
     subtitle: '',
     title: 'Demo',

package/src/types/Icon.ts

@@ -11,6 +11,7 @@ export const ICON = {
   ARROW_CYCLE: 'arrow-cycle',
   ARROW_FORWARD: 'arrow-forward',
   ARROW_RIGHT: 'arrow-right',
+  ARROW_UP: 'arrow-up',
   ASSIGNMENT: 'assignment',
   ATTACH_MONEY: 'attach-money',
   AUTO_RENEW: 'auto-renew',
@@ -110,6 +111,8 @@ export const ICON = {
   SMS: 'sms',
   SNOWFLAKE: 'snowflake',
   STAR: 'star',
+  STAR_FILLED: 'star-filled',
+  STAR_HALF: 'star-half',
   SUMMARIZE: 'summarize',
   SWAP_HORIZ: 'swap-horiz',
   SWAP_VERT: 'swap-vert',