tide-design-system 2.5.2 → 2.5.3

package/dist/utilities/validation.ts

@@ -62,7 +62,7 @@ export const getFieldValidationResult = ({
 
   // custom validator prop errors from have second highest precedence
   if (validators) {
-    const validation = validateProperty(value.value, validators);
+    const validation = validateProperty(value.value ?? '', validators);
 
     if (!validation.valid) {
       return validation;

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.5.2",
+  "version": "2.5.3",
   "dependencies": {
     "@floating-ui/vue": "^1.1.6"
   }

package/src/components/TideCarousel.vue

@@ -34,6 +34,7 @@
 
   const emit = defineEmits<Emits>();
 
+  const carouselRef = ref<HTMLDivElement | null>(null);
   const containerRef = ref<HTMLDivElement | null>(null);
   const contentWidth = ref<number>(0);
   const currentPageIndex = ref<number>(0);
@@ -46,26 +47,25 @@
   const slides = ref<HTMLElement[]>([]);
   const slidesInView = ref<number[]>([]);
   const slotObserver = ref<MutationObserver | null>(null);
+  const touchStart = ref<Touch | undefined>(undefined);
+  const slidesInViewCount = ref<number>(1);
 
   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;
+    const quotient = Math.floor(slides.value.length / slidesInViewCount.value);
+    const remainder = slides.value.length % slidesInViewCount.value;
 
     return remainder ? quotient + 1 : quotient;
   });
 
-  const cardGap: number = 16;
   const dotGap: number = 8;
   const dotWidth: number = 8;
+  let scrollTimeout: number | undefined;
 
   const getDotClass = (dotIndex: number) => {
     let className = '';
@@ -76,17 +76,64 @@
     return className;
   };
 
+  const getIsElementWithinContainer = (element: HTMLElement, container: HTMLElement) => {
+    const containerRect = container.getBoundingClientRect();
+    const containerRight = containerRect.left + containerRect.width;
+    const elementRect = element.getBoundingClientRect();
+    const elementRight = elementRect.left + elementRect.width;
+
+    return elementRight <= containerRight && elementRect.left >= containerRect.left;
+  };
+
+  const handleTouchEnd = (event: TouchEvent) => {
+    if (!touchStart.value) return;
+
+    const touchEnd = event.changedTouches[0];
+    const deltaX = touchStart.value.clientX - touchEnd.clientX;
+    const deltaY = touchEnd.clientY - touchStart.value.clientY;
+
+    if (Math.abs(deltaX) > Math.abs(deltaY)) scrollByDelta(deltaX);
+  };
+
+  const handleTouchStart = (event: TouchEvent) => {
+    touchStart.value = event.touches[0];
+  };
+
+  const handleWheel = (event: WheelEvent) => {
+    const isShiftKeyDown = event.shiftKey;
+    const isWheel = Math.abs(event.deltaY) >= 80;
+
+    if (isWheel && !isShiftKeyDown) return;
+    if (event.shiftKey) event.preventDefault();
+
+    clearTimeout(scrollTimeout);
+
+    scrollTimeout = window.setTimeout(() => {
+      if (isWheel) {
+        scrollByDelta(event.deltaY);
+      } else {
+        const offset = slides.value[slidesInView.value[0]]?.offsetLeft || 0;
+
+        scrollToOffset(offset);
+      }
+    }, 100);
+  };
+
   const measureDom = () => {
     if (!containerRef.value) return;
 
     contentWidth.value = containerRef.value.scrollWidth;
     frameWidth.value = containerRef.value.clientWidth;
     showButtons.value = contentWidth.value > frameWidth.value;
+
+    slidesInViewCount.value = slides.value.filter((slide) =>
+      getIsElementWithinContainer(slide, containerRef.value as HTMLElement)
+    ).length;
   };
 
   const observeSlides = () => {
     const options = {
-      root: containerRef?.value,
+      root: carouselRef?.value,
       rootMargin: '0px 1px 0px 0px',
       threshold: 1,
     };
@@ -131,12 +178,20 @@
     if (containerRef.value) slotObserver.value.observe(containerRef.value, { childList: true });
   };
 
+  const scrollByDelta = (delta: number) => {
+    const isScrollingLeft = delta < 0;
+
+    if (isScrollingLeft) {
+      props.isScrollByPage ? showPreviousPage() : showPreviousSlide();
+    } else {
+      props.isScrollByPage ? showNextPage() : showNextSlide();
+    }
+  };
+
   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;
+    const isScrollingLeft = target <= containerRef.value.scrollLeft;
 
     currentPageIndex.value = isScrollingLeft ? currentPageIndex.value - 1 : currentPageIndex.value + 1;
 
@@ -148,19 +203,21 @@
   };
 
   const showNextPage = () => {
-    if (slidesInView.value.length === 0) return;
+    if (slidesInView.value.length === 0 || isLastSlide.value) return;
 
     const nextSlide: number = slidesInView.value[slidesInView.value.length - 1] + 1;
+    const offset = slides.value[nextSlide]?.offsetLeft;
 
-    scrollToOffset(slides.value[nextSlide].offsetLeft);
+    scrollToOffset(offset);
   };
 
   const showPreviousPage = () => {
-    if (slidesInView.value.length === 0) return;
+    if (slidesInView.value.length === 0 || isFirstSlide.value) return;
 
     const previousSlide: number = slidesInView.value[0] - slidesInView.value.length;
+    const offset = slides.value[previousSlide]?.offsetLeft || 0;
 
-    scrollToOffset(slides.value[previousSlide]?.offsetLeft || 0);
+    scrollToOffset(offset);
   };
 
   const showNextSlide = () => {
@@ -284,51 +341,58 @@
           CSS.SNAP.ON,
         ]"
         ref="containerRef"
+        @touchend="handleTouchEnd"
+        @touchstart.passive="handleTouchStart"
+        @wheel="handleWheel"
       >
         <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,
+          CSS.POINTER_EVENTS.OFF,
         ]"
-        :style="{
-          width: `${dotContainerWidth}px`,
-        }"
-        v-if="isScrollByPage && hasDots && totalPages > 1"
+        v-if="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"
+          :class="['tide-carousel-dots-container']"
+          :style="{
+            width: `${dotContainerWidth}px`,
+          }"
         >
           <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),
+              '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,
             ]"
-            :key="index"
-            v-for="(_, index) in totalPages"
-          />
+            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>
 

package/src/components/TideLink.vue

@@ -4,16 +4,19 @@
   import InternalBaseLink from '@/components/InternalBaseLink.vue';
   import TideIcon from '@/components/TideIcon.vue';
   import { ELEMENT } from '@/types/Element';
+  import { SIZE } from '@/types/Size';
   import { CSS } from '@/types/Styles';
   import { TARGET } from '@/types/Target';
 
   import type { Element } from '@/types/Element';
   import type { Icon } from '@/types/Icon';
+  import type { Size } from '@/types/Size';
 
   type Props = {
     element?: Element;
     href?: string;
     iconLeading?: Icon;
+    iconSize?: Size;
     iconTrailing?: Icon;
     isNewTab?: boolean;
     label: string;
@@ -24,6 +27,7 @@
     element: ELEMENT.LINK,
     href: undefined,
     iconLeading: undefined,
+    iconSize: SIZE.SMALL,
     iconTrailing: undefined,
     isNewTab: false,
     label: undefined,
@@ -49,6 +53,7 @@
     <TideIcon
       :class="[CSS.DISPLAY.INLINE_BLOCK, CSS.ALIGN.Y.MIDDLE, CSS.MARGIN.RIGHT.QUARTER]"
       :icon="props.iconLeading"
+      :size="iconSize"
       v-if="props.iconLeading"
     />
 
@@ -59,6 +64,7 @@
     <TideIcon
       :class="[CSS.DISPLAY.INLINE_BLOCK, CSS.ALIGN.Y.MIDDLE, CSS.MARGIN.LEFT.QUARTER]"
       :icon="props.iconTrailing"
+      :size="iconSize"
       v-if="props.iconTrailing"
     />
   </component>

package/src/components/TideMenuItem.vue

@@ -50,7 +50,7 @@
       CSS.BORDER.RADIUS.ZERO,
       CSS.DISPLAY.FLEX,
       CSS.ELLIPSIS,
-      CSS.FONT.ROLE.LABEL_2,
+      CSS.FONT.ROLE.LABEL_1,
       CSS.GAP.QUARTER,
       CSS.PADDING.X.ONE,
       CSS.PADDING.Y.HALF,

package/src/stories/TideCarousel.stories.ts

@@ -1,4 +1,5 @@
 import { action } from '@storybook/addon-actions';
+import { computed } from 'vue';
 
 import TideCard from '@/components/TideCard.vue';
 import TideCarousel from '@/components/TideCarousel.vue';
@@ -8,6 +9,8 @@ import type { StoryContext } from '@storybook/vue3';
 
 type Args = InstanceType<typeof TideCarousel>['$props'] & {
   handleSlidesAddedToView: string;
+  isFullWidthCards: boolean | undefined;
+  maxDots: string | undefined;
 };
 
 const formatSnippet = (code: string, context: StoryContext) => {
@@ -19,7 +22,6 @@ const formatSnippet = (code: string, context: StoryContext) => {
   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}"`);
@@ -31,7 +33,7 @@ const formatSnippet = (code: string, context: StoryContext) => {
     // prettier-ignore
     `<TideCarousel ${argsWithValues.join(' ')}>` + lineBreak +
       slotContentMisc + tab +
-      `<li class="tide-shrink-none" v-for="(_child, index) in new Array(12)">` + lineBreak + tab + tab +
+      `<li class="tide-shrink-none${args.isFullWidthCards ? ' tide-width-full' : ''}" v-for="(_child, index) in new Array(12)">` + lineBreak + tab + tab +
         args.default + lineBreak + tab +
       `</li>` + lineBreak +
     `</TideCarousel>`
@@ -66,19 +68,31 @@ const render = (args: Args) => ({
       }
     },
   },
-  setup: () => ({ args }),
+  setup: () => {
+    const conditionalFullWidth = computed(() => (args.isFullWidthCards ? ' tide-width-full' : ''));
+    const argsFormatted = computed(() => ({
+      ...args,
+      maxDots: args.maxDots === '' ? undefined : args.maxDots,
+    }));
+
+    return {
+      argsFormatted,
+      conditionalFullWidth,
+    };
+  },
   // prettier-ignore
   template:
   `<TideCarousel
     @slides-added-to-view="handleSlidesAddedToView"
-    v-bind="args"
+    v-bind="argsFormatted"
+    :key="argsFormatted.isFullWidthCards"
   >
-    <template #misc>{{ args.misc }}</template>
+    <template #misc>{{ argsFormatted.misc }}</template>
     <li
-      class="tide-shrink-none tide-border-1 sb-border-blue tide-padding-1 sb-bg-blue-light"
+      :class="['tide-shrink-none tide-border-1 sb-border-blue tide-padding-1 sb-bg-blue-light', conditionalFullWidth]"
       v-for="(_child, index) in new Array(12)"
     >
-      {{ args.default.replace('#', index) }}
+      {{ argsFormatted.default.replace('#', index) }}
     </li>
   </TideCarousel>`,
 });
@@ -106,7 +120,7 @@ export default {
     },
     hasDots: {
       ...argTypeBooleanUnrequired,
-      description: 'Determines whether to display the indicator dots overlay',
+      description: 'Determines whether to display the indicator dots overlay<br />(Only valid with full width cards)',
       table: {
         defaultValue: { summary: 'False' },
       },
@@ -118,6 +132,16 @@ export default {
         defaultValue: { summary: 'False' },
       },
     },
+    isFullWidthCards: {
+      ...argTypeBooleanUnrequired,
+      description: 'Preview 1 card per page implementation',
+      table: {
+        category: 'Demo',
+        defaultValue: { summary: 'None' },
+        disable: true,
+        type: { summary: 'boolean' },
+      },
+    },
     isHeadline1: {
       ...argTypeBooleanUnrequired,
       description: 'Determines font role used for title display',
@@ -133,23 +157,11 @@ export default {
         defaultValue: { summary: 'True' },
       },
     },
-    isScrollByPage: {
-      ...argTypeBooleanUnrequired,
-      description: 'Determines pagination method',
-      table: {
-        defaultValue: { summary: 'None' },
-      },
-    },
-    isTouchscreen: {
-      ...argTypeBooleanUnrequired,
-      description: 'Determines button and/or swipe control scheme',
-      table: {
-        defaultValue: { summary: 'None' },
-      },
-    },
+    isScrollByPage: disabledArgType,
     maxDots: {
       control: 'text',
       description: 'Determines the max number of indicator dots to display at a given time',
+      if: { arg: 'hasDots', eq: true },
       table: {
         defaultValue: { summary: 'None' },
         type: { summary: 'number' },
@@ -186,9 +198,8 @@ export default {
     handleSlidesAddedToView: 'doSomething',
     hasDots: undefined,
     isFloating: undefined,
+    isFullWidthCards: undefined,
     isHideawayButtons: undefined,
-    isScrollByPage: undefined,
-    isTouchscreen: undefined,
     maxDots: '',
     misc: '',
     subtitle: '',
@@ -201,4 +212,15 @@ export default {
   title: 'Components/TideCarousel',
 };
 
-export const Demo = {};
+export const Demo = {
+  name: 'Default',
+};
+
+export const FullWidth = {
+  args: {
+    default: 'Full-width card #',
+    isFullWidthCards: true,
+    title: 'Demo',
+  },
+  name: 'Full-width cards ',
+};

package/src/types/Formatted.ts

@@ -15,7 +15,7 @@ export const FORMAT_REGEX = {
   alphaNumberOrEmpty: /^$|^[a-z0-9]+$/i,
   alphaSpace: /^[a-zA-Z ]+$/g,
   email:
-    /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/,
+    /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@(?!(?:[a-zA-Z0-9-]+\.)*(?<tld>[a-zA-Z]{2,})\.\k<tld>$)((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z0-9-]+\.)+[a-zA-Z]{2,}))$/,
   numberFormatted: /^$|(?=.)^\$?(([1-9][0-9]{0,2}(,[0-9]{3})*)|0)?(\.[0-9]{1,2})?$/,
   phone: /^(?:\d{3}-\d{3}-\d{4}|\d{1}-\d{3}-\d{3}-\d{4})?$/,
   price: /(?=.)^\$?(([1-9][0-9]{0,2}(,[0-9]{3})*)|0)?(\.[0-9]{1,2})?$/,

package/src/utilities/validation.ts

@@ -62,7 +62,7 @@ export const getFieldValidationResult = ({
 
   // custom validator prop errors from have second highest precedence
   if (validators) {
-    const validation = validateProperty(value.value, validators);
+    const validation = validateProperty(value.value ?? '', validators);
 
     if (!validation.valid) {
       return validation;

package/tests/utilities-format.spec.ts

@@ -1,5 +1,6 @@
 import { describe, expect, it } from 'vitest';
 
+import { FORMAT_REGEX } from '../src/types/Formatted';
 import {
   formatCamelCase,
   formatKebabCase,
@@ -428,3 +429,42 @@ describe('@/src/utilities/format.ts', () => {
     });
   });
 });
+
+describe('@/src/types/Formatted.ts', () => {
+  describe('FORMAT_REGEX.email', () => {
+    it('accepts a standard email address.', () => {
+      const input = 'john.doe@gmail.com';
+      const output = true;
+
+      expect(FORMAT_REGEX.email.test(input)).toEqual(output);
+    });
+
+    it('accepts an email address with subdomains.', () => {
+      const input = 'john.doe@mail.sub.example.co.uk';
+      const output = true;
+
+      expect(FORMAT_REGEX.email.test(input)).toEqual(output);
+    });
+
+    it('rejects an email address that ends with a repeated TLD label (e.g. .com.com).', () => {
+      const input = 'john@gmail.com.com';
+      const output = false;
+
+      expect(FORMAT_REGEX.email.test(input)).toEqual(output);
+    });
+
+    it('rejects an email address that ends with a repeated TLD label (e.g. .net.net).', () => {
+      const input = 'john@company.net.net';
+      const output = false;
+
+      expect(FORMAT_REGEX.email.test(input)).toEqual(output);
+    });
+
+    it('rejects an email address missing a valid top-level domain.', () => {
+      const input = 'john@gmail';
+      const output = false;
+
+      expect(FORMAT_REGEX.email.test(input)).toEqual(output);
+    });
+  });
+});