tide-design-system 2.2.3 → 2.2.4

package/package.json

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

package/src/assets/css/grid-layout.css

@@ -4,38 +4,27 @@
 }
 
 .tide-grid-layout {
-  --tide-max-content-width:   var(--tide-1232px);
-  --tide-column-count:        12;
-  --tide-column-width:        minmax(0, calc((var(--tide-max-content-width) - var(--tide-gap-count) * var(--tide-gap-width)) / var(--tide-column-count)));
-  --tide-gap-count:           calc(var(--tide-column-count) - 1);
-  --tide-gap-width:           var(--tide-spacing-1);
-  --tide-gutter-width:        var(--tide-spacing-1);
-  --tide-gutter-width-offset: calc(var(--tide-gutter-width) - var(--tide-gap-width));
+  --tide-max-content-width: var(--tide-1232px);
+  --tide-column-width:      minmax(0, var(--tide-max-content-width));
+  --tide-gutter-width:      var(--tide-spacing-1);
 
   display: grid;
   grid-auto-rows: min-content;
   grid-template-columns:
-    minmax(var(--tide-gutter-width-offset), 1fr)
-    repeat(var(--tide-column-count), var(--tide-column-width))
-    minmax(var(--tide-gutter-width-offset), 1fr);
-  gap: var(--tide-spacing-1) var(--tide-gap-width);
+    minmax(var(--tide-gutter-width), 1fr)
+    var(--tide-column-width)
+    minmax(var(--tide-gutter-width), 1fr);
 }
 
 @media (min-width: 768px) {
-  .tide-grid-layout {
-    --tide-gutter-width: var(--tide-spacing-2);
-  }
+  .tide-grid-layout {--tide-gutter-width: var(--tide-spacing-2);}
 }
 
-@media (min-width: 992px) {
-  .tide-grid-layout {
-    --tide-gap-width: var(--tide-spacing-2);
-  }
+@media (min-width: 1232px) {
+  .tide-grid-layout {--tide-gutter-width: var(--tide-spacing-4);}
 }
 
-.tide-grid-xl {
-  --tide-max-content-width: var(--tide-1920px);
-}
+.tide-grid-xl {--tide-max-content-width: var(--tide-1920px);}
 
 .tide-grid-layout > *,
 .tide-grid-item {
@@ -43,31 +32,3 @@
 }
 
 .tide-fluid {grid-column: 1 / -1;}
-
-.tide-start-0  {grid-column-start: 1;}
-.tide-start-1  {grid-column-start: 2;}
-.tide-start-2  {grid-column-start: 3;}
-.tide-start-3  {grid-column-start: 4;}
-.tide-start-4  {grid-column-start: 5;}
-.tide-start-5  {grid-column-start: 6;}
-.tide-start-6  {grid-column-start: 7;}
-.tide-start-7  {grid-column-start: 8;}
-.tide-start-8  {grid-column-start: 9;}
-.tide-start-9  {grid-column-start: 10;}
-.tide-start-10 {grid-column-start: 11;}
-.tide-start-11 {grid-column-start: 12;}
-.tide-start-12 {grid-column-start: 13;}
-
-.tide-end-1  {grid-column-end: 3;}
-.tide-end-2  {grid-column-end: 4;}
-.tide-end-3  {grid-column-end: 5;}
-.tide-end-4  {grid-column-end: 6;}
-.tide-end-5  {grid-column-end: 7;}
-.tide-end-6  {grid-column-end: 8;}
-.tide-end-7  {grid-column-end: 9;}
-.tide-end-8  {grid-column-end: 10;}
-.tide-end-9  {grid-column-end: 11;}
-.tide-end-10 {grid-column-end: 12;}
-.tide-end-11 {grid-column-end: 13;}
-.tide-end-12 {grid-column-end: 14;}
-.tide-end-13 {grid-column-end: 15;}

package/src/assets/css/utilities-md.css

@@ -1,5 +1,4 @@
 /* Medium breakpoint */
-@media (min-width: 992px) {}
 @media (min-width: 992px) {
 	/* Reusable CSS Utility Library */
 	/* Position */

package/src/components/TideBadge.vue

@@ -27,14 +27,17 @@
       CSS.BORDER.RADIUS.QUARTER,
       CSS.PADDING.Y.QUARTER,
       CSS.PADDING.X.HALF,
+      CSS.ELLIPSIS,
       CSS.FONT.ROLE.LABEL_2,
+      CSS.WHITESPACE_WRAP.OFF,
     ]"
   >
     <TideIcon
+      :class="[CSS.FLEX.SHRINK.OFF]"
       :icon="props.iconLeading"
       v-if="props.iconLeading"
     />
 
-    {{ props.label }}
+    <span :class="[CSS.ELLIPSIS]">{{ props.label }}</span>
   </div>
 </template>

package/src/components/TideBadgeTrustedPartner.vue

@@ -25,11 +25,17 @@
       CSS.GAP.QUARTER,
       CSS.PADDING.Y.QUARTER,
       CSS.PADDING.X.HALF,
+      CSS.ELLIPSIS,
       CSS.FONT.ROLE.LABEL_2,
+      CSS.WHITESPACE_WRAP.OFF,
     ]"
   >
-    <TideIcon :icon="ICON.AWARD_STAR" />
-    <div :class="[]">
+    <TideIcon
+      :class="[CSS.FLEX.SHRINK.OFF]"
+      :icon="ICON.AWARD_STAR"
+    />
+
+    <div :class="[CSS.ELLIPSIS]">
       <span>{{ props.years }} year trusted partner</span>
     </div>
   </div>

package/src/components/TideBadgeVerifiedVehicle.vue

@@ -17,11 +17,16 @@
       CSS.BORDER.RADIUS.QUARTER,
       CSS.PADDING.Y.QUARTER,
       CSS.PADDING.X.HALF,
+      CSS.ELLIPSIS,
+      CSS.WHITESPACE_WRAP.OFF,
     ]"
   >
-    <TideIcon :icon="ICON.VERIFIED" />
+    <TideIcon
+      :class="[CSS.FLEX.SHRINK.OFF]"
+      :icon="ICON.VERIFIED"
+    />
 
-    <span>Verified vehicle</span>
+    <span :class="[CSS.ELLIPSIS]">Verified vehicle</span>
   </div>
 </template>
 

package/src/components/TideCarousel.vue

@@ -7,7 +7,9 @@
   import { CSS } from '@/types/Styles';
 
   type Props = {
+    bleed?: number;
     isFloating?: boolean;
+    isHeadline1?: boolean;
     isHideawayButtons?: boolean;
     isTouchscreen?: boolean;
     subtitle?: string;
@@ -15,7 +17,9 @@
   };
 
   const props = withDefaults(defineProps<Props>(), {
+    bleed: undefined,
     isFloating: false,
+    isHeadline1: false,
     isHideawayButtons: true,
     isTouchscreen: undefined,
     subtitle: undefined,
@@ -24,18 +28,32 @@
 
   const emit = defineEmits(['change']);
 
-  const contentRef = ref();
-  const frameRef = ref();
+  const containerRef = ref();
 
   const contentRightEdge = ref();
   const contentWidth = ref();
   const currentSlide = ref(0);
   const frameWidth = ref();
   const hasOverflow = ref();
+  const isFirstSlide = ref();
   const isLastSlide = ref();
   const lastPosition = ref();
   const showButtons = ref();
 
+  const updateContainerBleed = () => {
+    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`;
+    }
+  };
+
   /**
    * Measure the current slide based on the scroll
    * position of the frame. The current slide is
@@ -44,25 +62,30 @@
    */
   const measureCurrentSlide = () => {
     // Get left offset of each slide.
-    const slideOffsets = Array.from(contentRef.value.children).map((slide: any) => slide.offsetLeft);
+    const slideOffsets = Array.from(containerRef.value.children).map((slide: any) => slide.offsetLeft);
 
     if (slideOffsets.length === 0) return;
 
     // 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;
+      return Math.abs(curr - containerRef.value.scrollLeft) < Math.abs(prev - containerRef.value.scrollLeft)
+        ? curr
+        : prev;
     });
 
     currentSlide.value = slideOffsets.indexOf(closestSlideOffset);
+
+    updateContainerBleed();
   };
 
   const measureDom = () => {
-    contentRightEdge.value = frameRef.value.scrollLeft + frameRef.value.clientWidth;
-    contentWidth.value = contentRef.value.scrollWidth;
-    frameWidth.value = frameRef.value.clientWidth;
+    contentRightEdge.value = containerRef.value.scrollLeft + containerRef.value.clientWidth;
+    contentWidth.value = containerRef.value.scrollWidth;
+    frameWidth.value = containerRef.value.clientWidth;
     hasOverflow.value = contentWidth.value > frameWidth.value;
+    isFirstSlide.value = currentSlide.value === 0;
     isLastSlide.value = contentRightEdge.value === contentWidth.value;
-    lastPosition.value = frameRef.value.scrollWidth - frameRef.value.clientWidth;
+    lastPosition.value = containerRef.value.scrollWidth - containerRef.value.clientWidth;
     showButtons.value = hasOverflow.value && !props.isTouchscreen;
 
     measureCurrentSlide();
@@ -74,15 +97,15 @@
   };
 
   const scrollToSlide = (slideIndex: number) => {
-    frameRef.value.scrollTo({
+    containerRef.value.scrollTo({
       behavior: 'smooth',
-      left: contentRef.value.children[slideIndex].offsetLeft,
+      left: containerRef.value.children[slideIndex].offsetLeft,
     });
   };
 
   const showNextSlide = () => {
     if (contentRightEdge.value > contentWidth.value) {
-      frameRef.value.scrollTo({
+      containerRef.value.scrollTo({
         behavior: 'smooth',
         left: contentWidth,
       });
@@ -92,9 +115,7 @@
   };
 
   const showPreviousSlide = () => {
-    const isFirstSlide = currentSlide.value === 0;
-
-    if (!isFirstSlide) {
+    if (!isFirstSlide.value) {
       scrollToSlide(currentSlide.value - 1);
     }
   };
@@ -119,7 +140,14 @@
 
 <template>
   <section
-    :class="['tide-carousel', CSS.DISPLAY.FLEX, CSS.FLEX.DIRECTION.COLUMN, CSS.GAP.TWO, CSS.WIDTH.MAX_FULL]"
+    :class="[
+      'tide-carousel',
+      CSS.POSITION.RELATIVE,
+      CSS.DISPLAY.FLEX,
+      CSS.FLEX.DIRECTION.COLUMN,
+      CSS.GAP.TWO,
+      CSS.WIDTH.MAX_FULL,
+    ]"
     ref="carouselRef"
   >
     <section
@@ -131,7 +159,7 @@
         v-if="props.title || props.subtitle"
       >
         <div
-          :class="[CSS.FONT.ROLE.DISPLAY_1]"
+          :class="[isHeadline1 ? CSS.FONT.ROLE.HEADLINE_1 : CSS.FONT.ROLE.HEADLINE_2]"
           v-if="props.title"
         >
           {{ props.title }}
@@ -168,55 +196,62 @@
     <slot name="misc" />
 
     <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
+      <ul
         :class="[
-          'tide-carousel-button-overlay',
-          CSS.POSITION.ABSOLUTE,
-          CSS.POSITIONING.TOP,
+          'tide-carousel-container',
           CSS.DISPLAY.FLEX,
-          CSS.AXIS1.BETWEEN,
-          CSS.AXIS2.CENTER,
-          CSS.WIDTH.FULL,
-          CSS.HEIGHT.FULL,
-          CSS.POINTER_EVENTS.OFF,
-          props.isHideawayButtons ? 'hideaway' : '',
+          CSS.GAP.ONE,
+          CSS.LIST_BULLETS.OFF,
+          CSS.OVERFLOW.X.SCROLL,
+          CSS.SCROLLBAR.OFF,
+          CSS.SNAP.ON,
         ]"
-        v-if="isFloating && showButtons"
+        ref="containerRef"
+        @scroll="handleScroll"
       >
-        <TideButtonIcon
-          :class="[CSS.MARGIN.LEFT.ONE, CSS.POINTER_EVENTS.ON]"
-          :disabled="currentSlide === 0"
-          :icon="ICON.CHEVRON_LEFT"
-          :priority="PRIORITY.QUATERNARY"
-          @click="showPreviousSlide"
-        />
+        <slot />
+      </ul>
+    </div>
 
-        <TideButtonIcon
-          :class="[CSS.MARGIN.RIGHT.ONE, CSS.POINTER_EVENTS.ON]"
-          :disabled="isLastSlide"
-          :icon="ICON.CHEVRON_RIGHT"
-          :priority="PRIORITY.QUATERNARY"
-          @click="showNextSlide"
-        />
-      </div>
+    <div
+      :class="[
+        'tide-carousel-button-overlay',
+        CSS.POSITION.ABSOLUTE,
+        CSS.POSITIONING.TOP,
+        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"
+      />
+
+      <TideButtonIcon
+        :class="[CSS.MARGIN.RIGHT.ONE, CSS.POINTER_EVENTS.ON]"
+        :disabled="isLastSlide"
+        :icon="ICON.CHEVRON_RIGHT"
+        :priority="PRIORITY.QUATERNARY"
+        @click="showNextSlide"
+      />
     </div>
   </section>
 </template>
 
 <style scoped>
+  .tide-carousel-container {
+    transition: margin var(--tide-animate), padding var(--tide-animate);
+  }
+
   .tide-carousel-button-overlay.hideaway {
     opacity: 0;
   }

package/src/stories/FoundationsGrid.stories.ts

@@ -1,19 +1,8 @@
-import * as STYLES from '@/types/Storybook';
 import { CSS } from '@/types/Styles';
-import {
-  argTypeBoolean,
-  formatArgType,
-  getConstantsByValues,
-  lineBreak,
-  prependNoneAsEmpty,
-  tab,
-} from '@/utilities/storybook';
+import { argTypeBoolean, getConstantsByValues, lineBreak, tab } from '@/utilities/storybook';
 
 import type { StoryContext } from '@storybook/vue3';
 
-const GRID_END = prependNoneAsEmpty(STYLES.GRID_END);
-const GRID_START = prependNoneAsEmpty(STYLES.GRID_START);
-
 const formatArgs = (args: any) => {
   args.class = formatClassNames(args).join(' ');
 
@@ -25,8 +14,6 @@ const formatClassNames = (args: any) => {
 
   if (args.fluid) classNames.push(CSS.GRID.FLUID);
   if (args.item) classNames.push(CSS.GRID.ITEM);
-  if (args.start) classNames.push(args.start);
-  if (args.end) classNames.push(args.end);
 
   return classNames;
 };
@@ -89,12 +76,6 @@ const render = (args: any) => ({
 
 export default {
   argTypes: {
-    end: {
-      ...formatArgType({ GRID_END }),
-      description: `Ending column of grid item`,
-      if: { arg: 'fluid', neq: true },
-      name: 'End',
-    },
     fluid: {
       ...argTypeBoolean,
       description: `Determines whether grid item should extend to parent bounds`,
@@ -107,12 +88,6 @@ export default {
       if: { arg: 'fluid', neq: true },
       name: 'Item',
     },
-    start: {
-      ...formatArgType({ GRID_START }),
-      description: `Starting column of grid item`,
-      if: { arg: 'fluid', neq: true },
-      name: 'Start',
-    },
     xl: {
       ...argTypeBoolean,
       description: `Increases the maximum content width`,
@@ -120,10 +95,8 @@ export default {
     },
   },
   args: {
-    end: GRID_END.None,
     fluid: false,
     item: false,
-    start: GRID_START.None,
     xl: false,
   },
   parameters,
@@ -151,159 +124,3 @@ export const XL = {
     xl: true,
   },
 };
-
-export const Start0 = {
-  args: {
-    start: GRID_START['Column 0'],
-  },
-};
-
-export const Start1 = {
-  args: {
-    start: GRID_START['Column 1'],
-  },
-};
-
-export const Start2 = {
-  args: {
-    start: GRID_START['Column 2'],
-  },
-};
-
-export const Start3 = {
-  args: {
-    start: GRID_START['Column 3'],
-  },
-};
-
-export const Start4 = {
-  args: {
-    start: GRID_START['Column 4'],
-  },
-};
-
-export const Start5 = {
-  args: {
-    start: GRID_START['Column 5'],
-  },
-};
-
-export const Start6 = {
-  args: {
-    start: GRID_START['Column 6'],
-  },
-};
-
-export const Start7 = {
-  args: {
-    start: GRID_START['Column 7'],
-  },
-};
-
-export const Start8 = {
-  args: {
-    start: GRID_START['Column 8'],
-  },
-};
-
-export const Start9 = {
-  args: {
-    start: GRID_START['Column 9'],
-  },
-};
-
-export const Start10 = {
-  args: {
-    start: GRID_START['Column 10'],
-  },
-};
-
-export const Start11 = {
-  args: {
-    start: GRID_START['Column 11'],
-  },
-};
-
-export const Start12 = {
-  args: {
-    start: GRID_START['Column 12'],
-  },
-};
-
-export const End1 = {
-  args: {
-    end: GRID_END['Column 1'],
-  },
-};
-
-export const End2 = {
-  args: {
-    end: GRID_END['Column 2'],
-  },
-};
-
-export const End3 = {
-  args: {
-    end: GRID_END['Column 3'],
-  },
-};
-
-export const End4 = {
-  args: {
-    end: GRID_END['Column 4'],
-  },
-};
-
-export const End5 = {
-  args: {
-    end: GRID_END['Column 5'],
-  },
-};
-
-export const End6 = {
-  args: {
-    end: GRID_END['Column 6'],
-  },
-};
-
-export const End7 = {
-  args: {
-    end: GRID_END['Column 7'],
-  },
-};
-
-export const End8 = {
-  args: {
-    end: GRID_END['Column 8'],
-  },
-};
-
-export const End9 = {
-  args: {
-    end: GRID_END['Column 9'],
-  },
-};
-
-export const End10 = {
-  args: {
-    end: GRID_END['Column 10'],
-  },
-};
-
-export const End11 = {
-  args: {
-    end: GRID_END['Column 11'],
-  },
-};
-
-export const End12 = {
-  args: {
-    end: GRID_END['Column 12'],
-  },
-};
-
-export const End13 = {
-  args: {
-    end: GRID_END['Column 13'],
-  },
-};