tide-design-system 2.5.2 → 2.5.4

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/docs/upgrading.md

@@ -83,9 +83,46 @@ watch(active, doSomething);
 
 ✅ After these changes your project should be compatible with **TIDE 2.5**.
 
+## Upgrading from 2.4.5 → 2.4.6
+
+### Summary
+
+Version **2.4.6** introduced a Nuxt SSR incompatibility. From **2.4.6**, TideModal uses Vue `<Teleport />` to place modal content in `#tide-top-layer`. This is not a problem in CSR apps, but [Nuxt SSR only provides support for one teleport target](https://nuxt.com/docs/4.x/api/components/teleports#:~:text=in%20the%20DOM.-,The,wrapper.,-Body%20Teleport). The default id on this teleport target is `#teleports`.
+
+### Migration steps
+
+Update the `teleportId` value within the Nuxt config to `tide-top-layer`.
+
+``` ts
+// nuxt.config.ts
+export defineNuxtConfig({
+  app: {
+    teleportId: 'tide-top-layer',
+  }
+});
+```
+
+Alternatively you can use the `teleportAttrs` config value.
+
+``` ts
+// nuxt.config.ts
+export defineNuxtConfig({
+  app: {
+    teleportAttrs: {
+      id: 'tide-top-layer',
+    },
+  }
+});
+```
+
+See [Nuxt Configuration docs](https://nuxt.com/docs/4.x/api/nuxt-config#teleportid).
+
+✅ After these changes your project should be compatible with TIDE 2.4.6.
+
 ## Upgrading from 2.3 → 2.4
 
 ### Summary
+
 Version **2.4** introduces a new suite of form components. It remains largely backward-compatible with the previous versions of components, but requires an update to a number of component names. It also removes a number of form-related TS exports.
 
 ### Migration steps

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

package/src/assets/css/variables.css

@@ -11,8 +11,17 @@
   --tide-font-28: 1.75rem;
   --tide-font-32: 2rem;
 
-  /* Animation */
-  --tide-animate: 300ms ease-in-out;
+  /* Motion */
+  --tide-duration-75: 75ms;
+  --tide-duration-150: 150ms;
+  --tide-duration-300: 300ms;
+  --tide-duration-600: 600ms;
+
+  --tide-easing-ease: ease;
+  --tide-easing-ease-out: ease-out;
+  --tide-easing-linear: linear;
+
+  --tide-animate: var(--tide-duration-300) var(--tide-easing-ease);
 
   /* Spacing */
   --tide-spacing-0: 0rem;

package/src/components/TideButtonSave.vue

@@ -0,0 +1,100 @@
+<script setup lang="ts">
+  import { ref, watch } from 'vue';
+
+  import { CSS } from '@/types/Styles';
+
+  const isTouched = ref(false);
+  const isSaved = defineModel<boolean>({ required: true });
+
+  watch(
+    isSaved,
+    () => {
+      if (!isTouched.value) isTouched.value = true;
+    },
+    { immediate: false }
+  );
+</script>
+
+<template>
+  <button
+    :class="['tide-button-save', CSS.PADDING.FULL.QUARTER, isSaved && 'saved']"
+    @click="isSaved = !isSaved"
+    type="button"
+  >
+    <div :class="['heart-container', CSS.DISPLAY.FLEX, isSaved && isTouched && 'animate-heartbeat']">
+      <svg
+        :class="['tide-button-save-icon', CSS.FLEX.GROW.OFF, CSS.FLEX.SHRINK.OFF]"
+        height="32"
+        viewBox="0 0 24 24"
+        width="32"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          :class="['heart-filled', isSaved ? CSS.FONT.COLOR.GLOBAL.PRIMARY.RED : 'filled-transparent']"
+          d="m12 21-1.45-1.3c-1.6833-1.5167-3.075-2.825-4.175-3.925-1.1-1.1-1.975-2.0875-2.625-2.9625-.65-.875-1.1042-1.6792-1.3625-2.4125C2.1292 9.6667 2 8.9167 2 8.15c0-1.5667.525-2.875 1.575-3.925C4.625 3.175 5.9333 2.65 7.5 2.65c.8667 0 1.6917.1833 2.475.55.7833.3667 1.4583.8833 2.025 1.55.5667-.6667 1.2417-1.1833 2.025-1.55.7833-.3667 1.6083-.55 2.475-.55 1.5667 0 2.875.525 3.925 1.575C21.475 5.275 22 6.5833 22 8.15c0 .7667-.1292 1.5167-.3875 2.25-.2583.7333-.7125 1.5375-1.3625 2.4125s-1.525 1.8625-2.625 2.9625c-1.1 1.1-2.4917 2.4083-4.175 3.925L12 21Z"
+        />
+
+        <path
+          :class="['heart-outline', CSS.FONT.COLOR.SURFACE.INVERSE]"
+          d="m12 21-1.45-1.3c-1.6833-1.5167-3.075-2.825-4.175-3.925-1.1-1.1-1.975-2.0875-2.625-2.9625-.65-.875-1.1042-1.6792-1.3625-2.4125C2.1292 9.6667 2 8.9167 2 8.15c0-1.5667.525-2.875 1.575-3.925C4.625 3.175 5.9333 2.65 7.5 2.65c.8667 0 1.6917.1833 2.475.55.7833.3667 1.4583.8833 2.025 1.55.5667-.6667 1.2417-1.1833 2.025-1.55.7833-.3667 1.6083-.55 2.475-.55 1.5667 0 2.875.525 3.925 1.575C21.475 5.275 22 6.5833 22 8.15c0 .7667-.1292 1.5167-.3875 2.25-.2583.7333-.7125 1.5375-1.3625 2.4125s-1.525 1.8625-2.625 2.9625c-1.1 1.1-2.4917 2.4083-4.175 3.925L12 21Zm0-2.7c1.6-1.4333 2.9167-2.6625 3.95-3.6875s1.85-1.9167 2.45-2.675c.6-.7583 1.0167-1.4333 1.25-2.025.2333-.5917.35-1.1792.35-1.7625 0-1-.3333-1.8333-1-2.5-.6667-.6667-1.5-1-2.5-1-.7833 0-1.5083.2208-2.175.6625C13.6583 5.7542 13.2 6.3167 12.95 7h-1.9c-.25-.6833-.7083-1.2458-1.375-1.6875S8.2833 4.65 7.5 4.65c-1 0-1.8333.3333-2.5 1-.6667.6667-1 1.5-1 2.5 0 .5833.1167 1.1708.35 1.7625.2333.5917.65 1.2667 1.25 2.025s1.4167 1.65 2.45 2.675S10.4 16.8667 12 18.3Z"
+        />
+      </svg>
+    </div>
+  </button>
+</template>
+
+<style scoped>
+  .heart-container {
+    --rotate-during-heart-beat: 9deg;
+    filter: drop-shadow(0px 2px 8px rgba(0, 0, 0, 0.3));
+    transition: var(--tide-duration-300) var(--tide-easing-ease-out);
+    transition-property: transform, scale;
+    rotate: 0deg;
+  }
+
+  .heart-container.animate-heartbeat {
+    animation: heartBeat var(--tide-duration-150);
+    animation-direction: alternate;
+    animation-iteration-count: 4;
+  }
+
+  .heart-container:active {
+    scale: 0.9;
+    transition-duration: var(--tide-duration-75);
+  }
+
+  .tide-button-save-icon {
+    fill: currentColor;
+  }
+
+  @media (hover: hover) {
+    .heart-container {
+      --rotate-during-heart-beat: 0deg;
+    }
+
+    .tide-button-save:where(:hover, :focus-visible) .heart-container {
+      transform: rotate(9deg);
+    }
+  }
+
+  .heart-filled {
+    scale: 0.985; /* avoid hairline border render issue */
+    transform-origin: center;
+    transition: color var(--tide-duration-75) var(--tide-easing-linear);
+  }
+
+  .filled-transparent {
+    color: var(--tide-transparent-400);
+  }
+
+  @keyframes heartBeat {
+    from {
+      scale: 1;
+      rotate: 0deg;
+    }
+    to {
+      scale: 1.25;
+      rotate: var(--rotate-during-heart-beat);
+    }
+  }
+</style>

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/TideButtonSave.stories.ts

@@ -0,0 +1,62 @@
+import { ref, watch } from 'vue';
+
+import TideButtonSave from '@/components/TideButtonSave.vue';
+import { dataTrack, doSomething, parameters } from '@/utilities/storybook';
+
+import type { StoryContext } from '@storybook/vue3';
+
+type Args = InstanceType<typeof TideButtonSave>['$props'] & {
+  vModel: boolean;
+};
+
+const render = (args: Args, context: StoryContext) => ({
+  components: { TideButtonSave },
+  methods: {
+    doSomething,
+    handleIsSavedChange: (value: boolean) => {
+      context.updateArgs({ ...args, vModel: value });
+    },
+  },
+  setup: () => {
+    const isSaved = ref(args.vModel);
+
+    watch(
+      () => args.vModel,
+      (newValue) => {
+        isSaved.value = newValue;
+      }
+    );
+
+    return {
+      args,
+      isSaved,
+    };
+  },
+  template: `<TideButtonSave v-bind="args" v-model="isSaved" @update:modelValue="handleIsSavedChange" />`,
+});
+
+export default {
+  argTypes: {
+    dataTrack,
+    vModel: {
+      control: 'boolean',
+      description: 'Data binding to Vue ref',
+      table: {
+        category: 'Native',
+        defaultValue: { summary: 'None' },
+        type: { summary: 'Ref<boolean>' },
+      },
+    },
+  },
+  args: {
+    dataTrack: '',
+    vModel: false,
+  },
+  component: TideButtonSave,
+  parameters,
+  render,
+  tags: ['autodocs'],
+  title: 'Components/TideButtonSave',
+};
+
+export const Demo = {};

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