tide-design-system 2.2.6 → 2.2.8

package/src/stories/TideCarousel.stories.ts

@@ -2,7 +2,7 @@ import { action } from '@storybook/addon-actions';
 
 import TideCard from '@/components/TideCard.vue';
 import TideCarousel from '@/components/TideCarousel.vue';
-import { argTypeBooleanUnrequired, change, disabledArgType, doSomething, lineBreak, tab } from '@/utilities/storybook';
+import { argTypeBooleanUnrequired, disabledArgType, doSomething, lineBreak, tab } from '@/utilities/storybook';
 
 import type { StoryContext } from '@storybook/vue3';
 
@@ -17,7 +17,8 @@ const formatSnippet = (code: string, context: StoryContext) => {
   if (args.isTouchscreen !== undefined) argsWithValues.push(`:is-touchscreen="${args.isTouchscreen}"`);
   if (args.subtitle !== '') argsWithValues.push(`subtitle="${args.subtitle}"`);
   if (args.title !== '') argsWithValues.push(`title="${args.title}"`);
-  if (args.handleChange) argsWithValues.push(`@change="${args.handleChange}"`);
+  if (args.handleSlideChange) argsWithValues.push(`@slide-change="${args.handleSlideChange}"`);
+  if (args.handleSlidesAddedToView) argsWithValues.push(`@slides-added-to-view="${args.handleSlidesAddedToView}"`);
 
   const slotContentMisc = args.misc === '' ? '' : `${tab}<template #misc>${args.misc}</template>${lineBreak}`;
 
@@ -46,17 +47,30 @@ const render = (args: any) => ({
   components: { TideCard, TideCarousel },
   methods: {
     doSomething,
-    handleChange: (index: number) => {
-      action(`Current slide ${index}`)(index);
+    handleSlideChange: (index: number) => {
+      action(`Current slide`)(index);
 
       try {
-        const callback = eval(args.handleChange);
+        const callback = eval(args.handleSlideChange);
 
         if (callback) {
           callback();
         }
       } catch {
-        alert('Please specify a valid handler in the "change" control.');
+        alert('Please specify a valid handler in the "slideChange" control.');
+      }
+    },
+    handleSlidesAddedToView: (slides: number[]) => {
+      action(`Slides added to view`)(slides);
+
+      try {
+        const callback = eval(args.handleSlidesAddedToView);
+
+        if (callback) {
+          callback();
+        }
+      } catch {
+        alert('Please specify a valid handler in the "slidesAddedToView" control.');
       }
     },
   },
@@ -64,7 +78,8 @@ const render = (args: any) => ({
   // prettier-ignore
   template:
   `<TideCarousel
-    @change="handleChange"
+    @slide-change="handleSlideChange"
+    @slides-added-to-view="handleSlidesAddedToView"
     class="tide-margin-x-1"
     v-bind="args"
   >
@@ -74,7 +89,7 @@ const render = (args: any) => ({
       class="tide-shrink-none tide-border-1 tide-border tide-padding-1"
       v-for="(_child, index) in new Array(12)"
     >
-      {{ args.default }}
+      {{ args.default.replace('#', index) }}
     </li>
   </TideCarousel>`,
   updated() {
@@ -96,7 +111,6 @@ export default {
         type: { summary: 'number' },
       },
     },
-    change: disabledArgType,
     default: {
       control: 'text',
       description: 'Dynamic card content',
@@ -105,14 +119,28 @@ export default {
         type: { summary: 'HTML' },
       },
     },
-    handleChange: {
-      ...change,
+    handleSlideChange: {
+      control: 'text',
+      description: 'JS code or function to execute on slideChange event',
+      isEmit: true,
+      name: 'slideChange',
       table: {
         category: 'Events',
         defaultValue: { summary: 'None' },
         type: { summary: '(currentSlide: number) => void' },
       },
     },
+    handleSlidesAddedToView: {
+      control: 'text',
+      description: 'JS code or function to execute on slidesAddedToView event',
+      isEmit: true,
+      name: 'slidesAddedToView',
+      table: {
+        category: 'Events',
+        defaultValue: { summary: 'None' },
+        type: { summary: '(slides: number[]) => void' },
+      },
+    },
     isFloating: {
       ...argTypeBooleanUnrequired,
       description: 'Determines whether to display on-page or floating carousel',
@@ -150,6 +178,8 @@ export default {
         type: { summary: 'HTML' },
       },
     },
+    slideChange: disabledArgType,
+    slidesAddedToView: disabledArgType,
     subtitle: {
       control: 'text',
       description: 'Determines the text displayed to the right of the title',
@@ -169,8 +199,9 @@ export default {
   },
   args: {
     bleed: '',
-    default: 'Card',
-    handleChange: 'doSomething',
+    default: 'Card #',
+    handleSlideChange: 'doSomething',
+    handleSlidesAddedToView: 'doSomething',
     isFloating: undefined,
     isHideawayButtons: undefined,
     isTouchscreen: undefined,

package/src/types/Styles.ts

@@ -29,6 +29,7 @@ export const CSS = {
     CENTER: 'tide-axis2-center',
     END: 'tide-axis2-end',
     START: 'tide-axis2-start',
+    STRETCH: 'tide-axis2-stretch',
   },
   BG: {
     GLOBAL: {
@@ -240,6 +241,7 @@ export const CSS = {
     ZERO: 'tide-height-0',
     FULL: 'tide-height-full',
     MAX_FULL: 'tide-max-height-full',
+    MIN_ZERO: 'tide-min-height-0',
   },
   ISOLATION: {
     ISOLATE: 'tide-isolate',
@@ -457,6 +459,7 @@ export const CSS = {
     ZERO: 'tide-width-0',
     FULL: 'tide-width-full',
     MAX_FULL: 'tide-max-width-full',
+    MIN_ZERO: 'tide-min-width-0',
   },
   Z_INDEX: {
     INITIAL: 'tide-z-index-initial',