tide-design-system 2.1.0 → 2.1.2

package/package.json

@@ -61,5 +61,5 @@
   "main": "dist/tide-design-system.cjs",
   "module": "dist/tide-design-system.esm.js",
   "types": "dist/tide-design-system.esm.d.ts",
-  "version": "2.1.0"
+  "version": "2.1.2"
 }

package/src/assets/svg/icons/IconAttachMoney.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+  <path
+    d="M10.7 21.5v-2.15a5.09 5.09 0 0 1-2.287-1.15C7.77 17.633 7.3 16.833 7 15.8l1.85-.75c.25.8.62 1.408 1.113 1.825.491.417 1.137.625 1.937.625.683 0 1.262-.154 1.737-.462.476-.309.713-.788.713-1.438 0-.583-.183-1.046-.55-1.387-.367-.342-1.217-.73-2.55-1.163-1.433-.45-2.417-.988-2.95-1.613-.533-.624-.8-1.387-.8-2.287 0-1.083.35-1.925 1.05-2.525.7-.6 1.417-.942 2.15-1.025V3.5h2v2.1c.833.133 1.52.438 2.063.913A4.187 4.187 0 0 1 15.95 8.25l-1.85.8c-.2-.533-.483-.933-.85-1.2-.367-.267-.867-.4-1.5-.4-.733 0-1.292.162-1.675.487-.383.325-.575.73-.575 1.213 0 .55.25.983.75 1.3.5.317 1.367.65 2.6 1 1.15.333 2.02.863 2.613 1.588.591.724.887 1.562.887 2.512 0 1.183-.35 2.083-1.05 2.7-.7.617-1.567 1-2.6 1.15v2.1h-2Z"/>
+</svg>

package/src/assets/svg/icons/IconHandshake.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+  <path d="M11.88 20.5a.58.58 0 0 0 .34-.15l8.2-8.2c.2-.2.35-.42.44-.67a2.17 2.17 0 0 0 0-1.52 1.65 1.65 0 0 0-.44-.63l-4.25-4.25a1.65 1.65 0 0 0-.63-.44 2.13 2.13 0 0 0-1.52 0c-.25.09-.47.24-.67.44l-.28.27 1.85 1.88c.25.23.44.5.55.8a2.6 2.6 0 0 1-.53 2.7 2.4 2.4 0 0 1-1.77.72 2.7 2.7 0 0 1-.96-.17 2.28 2.28 0 0 1-.81-.53L9.52 8.9l-4.37 4.38a.47.47 0 0 0-.15.35c0 .13.05.25.15.36a.44.44 0 0 0 .55.11.58.58 0 0 0 .15-.1l3.4-3.4 1.4 1.4-3.38 3.4a.47.47 0 0 0-.14.35c0 .13.05.25.15.35.1.1.21.15.35.15a.58.58 0 0 0 .35-.15l3.4-3.38 1.4 1.4-3.38 3.4a.3.3 0 0 0-.11.16.57.57 0 0 0-.04.2c0 .13.05.25.15.35a.48.48 0 0 0 .7 0l3.4-3.38 1.4 1.4-3.4 3.4a.47.47 0 0 0 .01.7c.11.1.23.15.37.15Zm-.03 2a2.44 2.44 0 0 1-1.64-.61 2.39 2.39 0 0 1-.84-1.54 2.46 2.46 0 0 1-1.42-.7 2.46 2.46 0 0 1-.7-1.42 2.37 2.37 0 0 1-1.41-.72 2.54 2.54 0 0 1-.69-1.41 2.38 2.38 0 0 1-1.55-.82 2.54 2.54 0 0 1 .13-3.42l5.8-5.78 3.27 3.27a.3.3 0 0 0 .15.11.57.57 0 0 0 .2.04c.15 0 .28-.05.38-.14.1-.09.15-.21.15-.36a.57.57 0 0 0-.04-.2.3.3 0 0 0-.12-.15L9.96 5.07a1.65 1.65 0 0 0-.64-.43 2.13 2.13 0 0 0-1.51 0c-.25.09-.48.24-.68.44L3.6 8.62a2.1 2.1 0 0 0-.58 1.13 1.89 1.89 0 0 0 .2 1.2L1.78 12.4a3.98 3.98 0 0 1-.62-1.26 3.93 3.93 0 0 1 .2-2.75c.2-.44.47-.84.82-1.19L5.7 3.67a4.22 4.22 0 0 1 1.34-.87 3.98 3.98 0 0 1 3.02 0c.5.2.93.5 1.31.88l.28.27.28-.28a4.22 4.22 0 0 1 1.33-.87 3.98 3.98 0 0 1 3.03 0c.49.2.93.5 1.31.88l4.22 4.22A4.07 4.07 0 0 1 23 10.75a3.98 3.98 0 0 1-1.18 2.83l-8.2 8.17a2.6 2.6 0 0 1-.8.55c-.32.13-.64.2-.97.2Z"/>
+</svg>

package/src/assets/svg/icons/IconThumbUp.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+  <path d="M18 20.5H7v-13l7-7 1.25 1.25a1.64 1.64 0 0 1 .4 1.05v.35l-1.1 4.35H21c.53 0 1 .2 1.4.6.4.4.6.87.6 1.4v2c0 .12-.02.24-.05.38l-.1.37-3 7.05c-.15.33-.4.62-.75.85-.35.23-.72.35-1.1.35Zm-9-2h9l3-7v-2h-9L13.35 4 9 8.35V18.5Zm-2-11v2H4v9h3v2H2v-13h5Z"/>
+</svg>

package/src/assets/svg/icons/IconTrendingDown.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+  <path
+    d="M16 18v-2h2.6l-5.2-5.15-4 4L2 7.4 3.4 6l6 6 4-4 6.6 6.6V12h2v6h-6Z"
+  />
+</svg>

package/src/components/TideCarousel.vue

@@ -7,27 +7,34 @@
   import { CSS } from '@/types/Styles';
 
   type Props = {
+    isFloating?: boolean;
+    isHideawayButtons?: boolean;
     isTouchscreen?: boolean;
-    offsetX?: number;
+    subtitle?: string;
+    title?: string;
   };
 
   const props = withDefaults(defineProps<Props>(), {
-    offsetX: 0,
+    isFloating: false,
+    isHideawayButtons: true,
+    isTouchscreen: undefined,
+    subtitle: undefined,
+    title: undefined,
   });
 
   const emit = defineEmits(['change']);
 
-  let contentWidth = ref();
-  let frameWidth = ref();
-  let hasOverflow = ref();
-  let lastPosition = ref();
-
   const contentRef = ref();
   const frameRef = ref();
-  const showButtons = ref();
-  const currentSlide = ref(0);
 
-  const gap = 16;
+  const contentRightEdge = ref();
+  const contentWidth = ref();
+  const currentSlide = ref(0);
+  const frameWidth = ref();
+  const hasOverflow = ref();
+  const isLastSlide = ref();
+  const lastPosition = ref();
+  const showButtons = ref();
 
   /**
    * Measure the current slide based on the scroll
@@ -36,24 +43,25 @@
    * the frame.
    */
   const measureCurrentSlide = () => {
-    // get left offsets of each slide
+    // Get left offset of each slide.
     const slideOffsets = Array.from(contentRef.value.children).map((slide: any) => slide.offsetLeft);
 
     if (slideOffsets.length === 0) return;
 
-    // get value closest to current scroll position
+    // Get closest offset to current scroll position.
     const closestSlideOffset = slideOffsets.reduce((prev, curr) => {
       return Math.abs(curr - frameRef.value.scrollLeft) < Math.abs(prev - frameRef.value.scrollLeft) ? curr : prev;
     });
 
-    // set current slide to index of closest slide
     currentSlide.value = slideOffsets.indexOf(closestSlideOffset);
   };
 
   const measureDom = () => {
+    contentRightEdge.value = frameRef.value.scrollLeft + frameRef.value.clientWidth;
     contentWidth.value = contentRef.value.scrollWidth;
     frameWidth.value = frameRef.value.clientWidth;
     hasOverflow.value = contentWidth.value > frameWidth.value;
+    isLastSlide.value = contentRightEdge.value === contentWidth.value;
     lastPosition.value = frameRef.value.scrollWidth - frameRef.value.clientWidth;
     showButtons.value = hasOverflow.value && !props.isTouchscreen;
 
@@ -65,12 +73,6 @@
     measureDom();
   };
 
-  /**
-   * Scrolls to the slide at the given index, or
-   * to the first or last slide if the given index
-   * is out of bounds.
-   * @param slideIndex The index of the slide to scroll to
-   */
   const scrollToSlide = (slideIndex: number) => {
     frameRef.value.scrollTo({
       behavior: 'smooth',
@@ -79,34 +81,22 @@
   };
 
   const showNextSlide = () => {
-    const contentWidth = contentRef.value.scrollWidth;
-    const contentRightEdge = frameRef.value.scrollLeft + frameRef.value.clientWidth;
-
-    if (contentRightEdge > contentWidth) {
+    if (contentRightEdge.value > contentWidth.value) {
       frameRef.value.scrollTo({
         behavior: 'smooth',
         left: contentWidth,
       });
-    } else {
-      const isFirstSlideWithOffset = props.offsetX && currentSlide.value === 0;
-      const isLastSlide = contentRightEdge === contentWidth;
-      const nextSlide = isLastSlide ? 0 : isFirstSlideWithOffset ? 2 : currentSlide.value + 1;
-
-      scrollToSlide(nextSlide);
+    } else if (!isLastSlide.value) {
+      scrollToSlide(currentSlide.value + 1);
     }
   };
 
   const showPreviousSlide = () => {
-    const firstSlide = props.offsetX ? 1 : 0;
-    const isFirstSlide = currentSlide.value - 1 === firstSlide;
-    const isSecondSlide = currentSlide.value <= firstSlide;
-    const previousSlide = isSecondSlide
-      ? contentRef.value.children.length - 1
-      : isFirstSlide
-      ? 0
-      : currentSlide.value - 1;
-
-    scrollToSlide(previousSlide);
+    const isFirstSlide = currentSlide.value === 0;
+
+    if (!isFirstSlide) {
+      scrollToSlide(currentSlide.value - 1);
+    }
   };
 
   onMounted(() => {
@@ -129,59 +119,108 @@
 
 <template>
   <section
-    :class="['tide-carousel', CSS.POSITION.RELATIVE, CSS.DISPLAY.FLEX, CSS.WIDTH.FULL]"
+    :class="['tide-carousel', CSS.DISPLAY.FLEX, CSS.FLEX.DIRECTION.COLUMN, CSS.GAP.TWO, CSS.WIDTH.MAX_FULL]"
     ref="carouselRef"
   >
-    <div
-      :class="[CSS.SCROLLBAR.OFF, CSS.SNAP.ON, CSS.OVERFLOW.X.SCROLL]"
-      ref="frameRef"
-      @scroll="handleScroll"
+    <section
+      :class="[CSS.DISPLAY.FLEX, props.title ? CSS.AXIS1.BETWEEN : CSS.AXIS1.END, CSS.AXIS2.CENTER, CSS.WIDTH.FULL]"
+      v-if="!props.isFloating && (showButtons || props.title)"
     >
-      <ul
-        :class="[props.isTouchscreen ? [CSS.OVERFLOW.X.AUTO] : '', CSS.DISPLAY.FLEX, CSS.GAP.ONE, CSS.LIST_BULLETS.OFF]"
-        ref="contentRef"
+      <div
+        :class="[CSS.DISPLAY.FLEX, CSS.AXIS2.CENTER, CSS.GAP.ONE]"
+        v-if="props.title || props.subtitle"
       >
-        <li
-          :class="[CSS.FLEX.SHRINK.OFF, CSS.SNAP_ALIGN.START]"
-          :style="{ width: `${props.offsetX - gap}px` }"
-          v-if="props.offsetX"
+        <div
+          :class="[CSS.FONT.ROLE.DISPLAY_1]"
+          v-if="props.title"
+        >
+          {{ props.title }}
+        </div>
+
+        <div
+          :class="[CSS.FONT.ROLE.LABEL_2, CSS.FONT.COLOR.SURFACE.VARIANT]"
+          v-if="props.subtitle"
+        >
+          {{ props.subtitle }}
+        </div>
+      </div>
+
+      <div
+        :class="[CSS.DISPLAY.FLEX, CSS.AXIS2.CENTER, CSS.GAP.ONE]"
+        v-if="showButtons"
+      >
+        <TideButtonIcon
+          :disabled="currentSlide === 0"
+          :icon="ICON.CHEVRON_LEFT"
+          :priority="PRIORITY.TERTIARY"
+          @click="showPreviousSlide"
+        />
+
+        <TideButtonIcon
+          :disabled="isLastSlide"
+          :icon="ICON.CHEVRON_RIGHT"
+          :priority="PRIORITY.TERTIARY"
+          @click="showNextSlide"
         />
+      </div>
+    </section>
 
-        <slot />
+    <slot name="misc" />
 
-        <li
-          :class="[CSS.FLEX.SHRINK.OFF, CSS.SNAP_ALIGN.START]"
-          :style="{ width: `${props.offsetX - gap}px` }"
-          v-if="props.offsetX"
+    <div :class="[CSS.POSITION.RELATIVE]">
+      <div
+        :class="[CSS.SCROLLBAR.OFF, CSS.SNAP.ON, CSS.OVERFLOW.X.SCROLL, CSS.WIDTH.FULL]"
+        ref="frameRef"
+        @scroll="handleScroll"
+      >
+        <ul
+          :class="[CSS.DISPLAY.FLEX, CSS.GAP.ONE, CSS.LIST_BULLETS.OFF]"
+          ref="contentRef"
+        >
+          <slot />
+        </ul>
+      </div>
+
+      <div
+        :class="[
+          'tide-carousel-button-overlay',
+          CSS.POSITION.ABSOLUTE,
+          CSS.DISPLAY.FLEX,
+          CSS.AXIS1.BETWEEN,
+          CSS.AXIS2.CENTER,
+          CSS.WIDTH.FULL,
+          CSS.HEIGHT.FULL,
+          CSS.POINTER_EVENTS.OFF,
+          props.isHideawayButtons ? 'hideaway' : '',
+        ]"
+        v-if="isFloating && showButtons"
+      >
+        <TideButtonIcon
+          :class="[CSS.MARGIN.LEFT.ONE, CSS.POINTER_EVENTS.ON]"
+          :disabled="currentSlide === 0"
+          :icon="ICON.CHEVRON_LEFT"
+          :priority="PRIORITY.QUATERNARY"
+          @click="showPreviousSlide"
         />
-      </ul>
-    </div>
 
-    <div
-      :class="[
-        CSS.POSITION.ABSOLUTE,
-        CSS.DISPLAY.FLEX,
-        CSS.AXIS1.BETWEEN,
-        CSS.AXIS2.CENTER,
-        CSS.WIDTH.FULL,
-        CSS.HEIGHT.FULL,
-        CSS.POINTER_EVENTS.OFF,
-      ]"
-      v-if="showButtons"
-    >
-      <TideButtonIcon
-        :class="[CSS.MARGIN.LEFT.ONE, CSS.POINTER_EVENTS.ON]"
-        :icon="ICON.CHEVRON_LEFT"
-        :priority="PRIORITY.QUATERNARY"
-        @click="showPreviousSlide"
-      />
-
-      <TideButtonIcon
-        :class="[CSS.MARGIN.RIGHT.ONE, CSS.POINTER_EVENTS.ON]"
-        :icon="ICON.CHEVRON_RIGHT"
-        :priority="PRIORITY.QUATERNARY"
-        @click="showNextSlide"
-      />
+        <TideButtonIcon
+          :class="[CSS.MARGIN.RIGHT.ONE, CSS.POINTER_EVENTS.ON]"
+          :disabled="isLastSlide"
+          :icon="ICON.CHEVRON_RIGHT"
+          :priority="PRIORITY.QUATERNARY"
+          @click="showNextSlide"
+        />
+      </div>
     </div>
   </section>
 </template>
+
+<style scoped>
+  .tide-carousel-button-overlay.hideaway {
+    opacity: 0;
+  }
+
+  .tide-carousel:hover .tide-carousel-button-overlay.hideaway {
+    opacity: 1;
+  }
+</style>

package/src/components/TideImage.vue

@@ -61,7 +61,7 @@
 
     <img
       :alt="alt"
-      :class="[CSS.WIDTH.FULL, CSS.OBJECT.CENTER, CSS.OBJECT.COVER]"
+      :class="[CSS.WIDTH.FULL, CSS.HEIGHT.FULL, CSS.OBJECT.CENTER, CSS.OBJECT.COVER]"
       :fetchpriority="isLazy ? undefined : 'high'"
       :loading="props.isLazy ? 'lazy' : 'eager'"
       ref="tideImage"

package/src/stories/TideCarousel.stories.ts

@@ -11,17 +11,19 @@ const formatSnippet = (code: string, context: StoryContext) => {
 
   const argsWithValues: string[] = [];
 
+  if (args.isHideawayButtons !== undefined) argsWithValues.push(`:is-hideaway-buttons="${args.isHideawayButtons}"`);
   if (args.isTouchscreen !== undefined) argsWithValues.push(`:is-touchscreen="${args.isTouchscreen}"`);
-  if (args.offsetX) argsWithValues.push(`:offset-x="${args.offsetX}"`);
-  if (args.handleChange) argsWithValues.push(`@change"${args.handleChange}"`);
+  if (args.subtitle !== undefined) argsWithValues.push(`subtitle="${args.subtitle}"`);
+  if (args.title !== undefined) argsWithValues.push(`title="${args.title}"`);
+  if (args.handleChange) argsWithValues.push(`@change="${args.handleChange}"`);
+
+  const slotContentMsic = args.misc === '' ? '' : `${tab}<template #misc>${args.misc}</template>${lineBreak}`;
 
   return (
     `<TideCarousel ${argsWithValues.join(' ')}>${lineBreak}` +
-    `${tab}<li${lineBreak}` +
-    `${tab}${tab}:class="tide-shrink-none${args.hasPadding ? ' tide-padding-y-1' : ''}"${lineBreak}` +
-    `${tab}${tab}v-for="(_child, index) in new Array(12)"${lineBreak}` +
-    `${tab}>${lineBreak}` +
-    `${tab}${tab}<TideCard class="tide-padding-1">Card {{ index + 1 }}</TideCard>${lineBreak}` +
+    `${slotContentMsic}` +
+    `${tab}<li v-for="(_child, index) in new Array(12)">${lineBreak}` +
+    `${tab}${tab}<div class="tide-shrink-none">${args.default}</div>${lineBreak}` +
     `${tab}</li>${lineBreak}` +
     `</TideCarousel>`
   );
@@ -41,7 +43,7 @@ const render = (args: any) => ({
   components: { TideCard, TideCarousel },
   methods: {
     doSomething,
-    handleChange: (_event: Event, index: number) => {
+    handleChange: (index: number) => {
       action(`Current slide ${index}`)(index);
 
       try {
@@ -56,13 +58,20 @@ const render = (args: any) => ({
     },
   },
   setup: () => ({ args }),
-  template: `<TideCarousel @change="handleChange" v-bind="args"><li v-for="(_child, index) in new Array(12)" :class="['tide-shrink-none', args.hasPadding ? ' tide-padding-y-1' : '']"><TideCard class="tide-padding-1">Card {{ index + 1 }}</TideCard></li></TideCarousel>`,
+  template: `<TideCarousel @change="handleChange" v-bind="args"><template #misc>${args.misc}</template><li class="tide-shrink-none tide-border-1 tide-border tide-padding-1" v-for="(_child, index) in new Array(12)">{{ args.default }}</li></TideCarousel>`,
 });
 
 export default {
   argTypes: {
     change: disabledArgType,
-    default: disabledArgType,
+    default: {
+      control: 'text',
+      description: 'Dynamic card content',
+      table: {
+        defaultValue: { summary: 'None' },
+        type: { summary: 'HTML' },
+      },
+    },
     handleChange: {
       ...change,
       table: {
@@ -70,42 +79,61 @@ export default {
         type: { summary: '(currentSlide: number) => void' },
       },
     },
-    // TODO: adapt via formatSnippet
-    hasPadding: {
-      control: 'boolean',
-      description: 'Demonstrates the box shadow',
-      name: 'Has Padding',
+    isFloating: {
+      ...argTypeBooleanUnrequired,
+      description: 'Determines whether to display on-page or floating carousel',
       table: {
         defaultValue: { summary: 'False' },
-        type: { summary: 'boolean' },
+      },
+    },
+    isHideawayButtons: {
+      ...argTypeBooleanUnrequired,
+      description: 'Determines whether on-page buttons should be hidden until hover',
+      table: {
+        defaultValue: { summary: 'True' },
       },
     },
     isTouchscreen: {
       ...argTypeBooleanUnrequired,
-      description: 'Determines button and/or swipe control scheme<br />(Use reference to ViewportStore)',
+      description: 'Determines button and/or swipe control scheme',
+      table: {
+        defaultValue: { summary: 'None' },
+      },
+    },
+    misc: {
+      control: 'text',
+      description: 'Content to display between the title/buttons and carousel content',
       table: {
         defaultValue: { summary: 'None' },
+        type: { summary: 'HTML' },
       },
     },
-    offsetX: {
-      control: {
-        max: 72,
-        min: 0,
-        step: 24,
-        type: 'number',
+    subtitle: {
+      control: 'text',
+      description: 'Determines the text displayed to the right of the title',
+      if: { arg: 'isFloating', neq: true },
+      table: {
+        defaultValue: { summary: 'None' },
       },
-      description: 'Determines horizontal spacing around Carousel content',
+    },
+    title: {
+      control: 'text',
+      description: 'Determines the title text displayed above the carousel',
+      if: { arg: 'isFloating', neq: true },
       table: {
         defaultValue: { summary: 'None' },
-        type: { summary: 'number (px)' },
       },
     },
   },
   args: {
+    default: 'Card',
     handleChange: 'doSomething',
-    hasPadding: false,
+    isFloating: undefined,
+    isHideawayButtons: undefined,
     isTouchscreen: undefined,
-    offsetX: 0,
+    misc: '',
+    subtitle: '',
+    title: 'Demo',
   },
   component: TideCarousel,
   parameters,

package/src/types/Icon.ts

@@ -11,6 +11,7 @@ export const ICON = {
   ARROW_FORWARD: 'arrow-forward',
   ARROW_RIGHT: 'arrow-right',
   ASSIGNMENT: 'assignment',
+  ATTACH_MONEY: 'attach-money',
   AWARD_STAR: 'award-star',
   BED: 'bed',
   BOOKMARK: 'bookmark',
@@ -43,6 +44,7 @@ export const ICON = {
   GOOGLE: 'google',
   GOOGLE_PAY: 'google-pay',
   GRID: 'grid',
+  HANDSHAKE: 'handshake',
   HEIGHT: 'height',
   HELP: 'help',
   INFO: 'info',
@@ -81,6 +83,8 @@ export const ICON = {
   STAR: 'star',
   SWAP_VERT: 'swap-vert',
   THREE_D_ROTATION: 'three-d-rotation',
+  THUMB_UP: 'thumb-up',
+  TRENDING_DOWN: 'trending-down',
   TROPHY: 'trophy',
   TUNE: 'tune',
   TWITTER: 'twitter',