tide-design-system 2.2.2 → 2.2.4

package/src/stories/TideCarousel.stories.ts

@@ -10,21 +10,24 @@ const formatSnippet = (code: string, context: StoryContext) => {
   const { args } = context;
 
   const argsWithValues: string[] = [];
+  const hasBleed = args.bleed !== '';
 
+  if (hasBleed) argsWithValues.push(`bleed="${args.bleed}"`);
   if (args.isHideawayButtons !== undefined) argsWithValues.push(`:is-hideaway-buttons="${args.isHideawayButtons}"`);
   if (args.isTouchscreen !== undefined) argsWithValues.push(`:is-touchscreen="${args.isTouchscreen}"`);
-  if (args.subtitle !== undefined) argsWithValues.push(`subtitle="${args.subtitle}"`);
-  if (args.title !== undefined) argsWithValues.push(`title="${args.title}"`);
+  if (args.subtitle !== '') argsWithValues.push(`subtitle="${args.subtitle}"`);
+  if (args.title !== '') argsWithValues.push(`title="${args.title}"`);
   if (args.handleChange) argsWithValues.push(`@change="${args.handleChange}"`);
 
-  const slotContentMsic = args.misc === '' ? '' : `${tab}<template #misc>${args.misc}</template>${lineBreak}`;
+  const slotContentMisc = args.misc === '' ? '' : `${tab}<template #misc>${args.misc}</template>${lineBreak}`;
 
   return (
-    `<TideCarousel ${argsWithValues.join(' ')}>${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}` +
+    // prettier-ignore
+    `<TideCarousel ${argsWithValues.join(' ')}>` + lineBreak +
+      slotContentMisc + tab +
+      `<li class="tide-shrink-none ${hasBleed ? 'tide-shadow-bottom' : ''}" v-for="(_child, index) in new Array(12)">` + lineBreak + tab + tab +
+        args.default + lineBreak + tab +
+      `</li>` + lineBreak +
     `</TideCarousel>`
   );
 };
@@ -58,11 +61,41 @@ const render = (args: any) => ({
     },
   },
   setup: () => ({ args }),
-  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>`,
+  // prettier-ignore
+  template:
+  `<TideCarousel
+    @change="handleChange"
+    class="tide-margin-x-1"
+    v-bind="args"
+  >
+    <template #misc>{{ args.misc }}</template>
+    <li
+      :class="args.bleed ? 'tide-shadow-bottom' : ''"
+      class="tide-shrink-none tide-border-1 tide-border tide-padding-1"
+      v-for="(_child, index) in new Array(12)"
+    >
+      {{ args.default }}
+    </li>
+  </TideCarousel>`,
+  updated() {
+    if (args.bleed === '') {
+      args.bleed = 0;
+    }
+
+    return { args };
+  },
 });
 
 export default {
   argTypes: {
+    bleed: {
+      control: 'text',
+      description: 'Sets an allowance for visible overflow at component boundaries.',
+      table: {
+        defaultValue: { summary: 'None' },
+        type: { summary: 'number' },
+      },
+    },
     change: disabledArgType,
     default: {
       control: 'text',
@@ -87,9 +120,17 @@ export default {
         defaultValue: { summary: 'False' },
       },
     },
+    isHeadline1: {
+      ...argTypeBooleanUnrequired,
+      description: 'Determines font role used for title display',
+      table: {
+        defaultValue: { summary: 'False' },
+      },
+    },
     isHideawayButtons: {
       ...argTypeBooleanUnrequired,
       description: 'Determines whether on-page buttons should be hidden until hover',
+      if: { arg: 'isFloating', eq: true },
       table: {
         defaultValue: { summary: 'True' },
       },
@@ -127,6 +168,7 @@ export default {
     },
   },
   args: {
+    bleed: '',
     default: 'Card',
     handleChange: 'doSomething',
     isFloating: undefined,

package/src/stories/TideDivider.stories.ts

@@ -4,7 +4,6 @@ import { disabledArgType, formatArgType, parameters, prependNoneAsUndefined } fr
 
 const formatArgs = (args: any) => {
   args.flexDirection = args.orientation === ORIENTATION.VERTICAL ? 'tide-flex-row' : 'tide-flex-column';
-  args.divTemplate = `<div class="sb-border-blue-light sb-font-blue-light tide-display-flex tide-axis1-center tide-axis2-center tide-padding-1 tide-width-full" style="min-width: 100px; min-height:100px;" />`;
 
   return { args };
 };
@@ -12,12 +11,12 @@ const formatArgs = (args: any) => {
 const render = (args: any) => ({
   components: { TideDivider },
   setup: () => formatArgs(args),
-  template: `<div :class="['tide-display-flex', args.flexDirection]">
-    <div class="sb-border-blue-light sb-font-blue-light tide-display-flex tide-axis1-center tide-axis2-center tide-padding-1 tide-width-full" style="min-width: 100px; min-height:100px;" />
+  template: `<div :class="['tide-display-inline-flex', args.flexDirection]">
+    <div class="sb-border-blue-light tide-padding-1">Demo</div>
 
     <TideDivider :orientation="args.orientation" />
 
-    <div class="sb-border-blue-light sb-font-blue-light tide-display-flex tide-axis1-center tide-axis2-center tide-padding-1 tide-width-full" style="min-width: 100px; height:100px;" />
+    <div class="sb-border-blue-light tide-padding-1">Demo</div>
   </div>`,
   updated: () => formatArgs(args),
 });

package/src/types/Storybook.ts

@@ -110,38 +110,6 @@ export const GAP = {
   '0.25 REM': CSS.GAP.QUARTER,
 };
 
-export const GRID_END = {
-  'Column 1': CSS.GRID.END.ONE,
-  'Column 2': CSS.GRID.END.TWO,
-  'Column 3': CSS.GRID.END.THREE,
-  'Column 4': CSS.GRID.END.FOUR,
-  'Column 5': CSS.GRID.END.FIVE,
-  'Column 6': CSS.GRID.END.SIX,
-  'Column 7': CSS.GRID.END.SEVEN,
-  'Column 8': CSS.GRID.END.EIGHT,
-  'Column 9': CSS.GRID.END.NINE,
-  'Column 10': CSS.GRID.END.TEN,
-  'Column 11': CSS.GRID.END.ELEVEN,
-  'Column 12': CSS.GRID.END.TWELVE,
-  'Column 13': CSS.GRID.END.THIRTEEN,
-};
-
-export const GRID_START = {
-  'Column 0': CSS.GRID.START.ZERO,
-  'Column 1': CSS.GRID.START.ONE,
-  'Column 2': CSS.GRID.START.TWO,
-  'Column 3': CSS.GRID.START.THREE,
-  'Column 4': CSS.GRID.START.FOUR,
-  'Column 5': CSS.GRID.START.FIVE,
-  'Column 6': CSS.GRID.START.SIX,
-  'Column 7': CSS.GRID.START.SEVEN,
-  'Column 8': CSS.GRID.START.EIGHT,
-  'Column 9': CSS.GRID.START.NINE,
-  'Column 10': CSS.GRID.START.TEN,
-  'Column 11': CSS.GRID.START.ELEVEN,
-  'Column 12': CSS.GRID.START.TWELVE,
-};
-
 export const LINK_SIZE = {
   TWELVE: CSS.FONT.SIZE.TWELVE,
   FOURTEEN: CSS.FONT.SIZE.FOURTEEN,

package/src/types/Styles.ts

@@ -230,39 +230,9 @@ export const CSS = {
     FOUR: 'tide-gap-4',
   },
   GRID: {
-    END: {
-      ONE: 'tide-end-1',
-      TWO: 'tide-end-2',
-      THREE: 'tide-end-3',
-      FOUR: 'tide-end-4',
-      FIVE: 'tide-end-5',
-      SIX: 'tide-end-6',
-      SEVEN: 'tide-end-7',
-      EIGHT: 'tide-end-8',
-      NINE: 'tide-end-9',
-      TEN: 'tide-end-10',
-      ELEVEN: 'tide-end-11',
-      TWELVE: 'tide-end-12',
-      THIRTEEN: 'tide-end-13',
-    },
     FLUID: 'tide-fluid',
     ITEM: 'tide-grid-item',
     LAYOUT: 'tide-grid-layout',
-    START: {
-      ZERO: 'tide-start-0',
-      ONE: 'tide-start-1',
-      TWO: 'tide-start-2',
-      THREE: 'tide-start-3',
-      FOUR: 'tide-start-4',
-      FIVE: 'tide-start-5',
-      SIX: 'tide-start-6',
-      SEVEN: 'tide-start-7',
-      EIGHT: 'tide-start-8',
-      NINE: 'tide-start-9',
-      TEN: 'tide-start-10',
-      ELEVEN: 'tide-start-11',
-      TWELVE: 'tide-start-12',
-    },
     XL: 'tide-grid-xl',
   },
   HEIGHT: {