tide-design-system 2.0.33 → 2.0.35

package/src/assets/css/variables.css

@@ -1,20 +1,15 @@
 /*.CSS Variables */
 :root {
   /* Font Size */
-  --tide-font-10: 0.625rem; /* 10px */
-  --tide-font-12: 0.75rem;  /* 12px */
-  --tide-font-14: 0.875rem; /* 14px */
-  --tide-font-16: 1rem;     /* 16px */
-  --tide-font-20: 1.25rem;  /* 20px */
-  --tide-font-24: 1.5rem;   /* 24px */
-  --tide-font-28: 1.75rem;  /* 28px */
-  --tide-font-32: 2rem;     /* 32px */
-
-  /* Font Weight */
-  --tide-font-400: 400;
-  --tide-font-500: 500;
-  --tide-font-600: 600;
-  --tide-font-700: 700;
+  --tide-font-10: 0.625rem;
+  --tide-font-12: 0.75rem;
+  --tide-font-14: 0.875rem;
+  --tide-font-16: 1rem;
+  --tide-font-18: 1.125rem;
+  --tide-font-20: 1.25rem;
+  --tide-font-24: 1.5rem;
+  --tide-font-28: 1.75rem;
+  --tide-font-32: 2rem;
 
   /* Animation */
   --tide-animate: 300ms ease-in-out;

package/src/components/TideImage.vue

@@ -5,23 +5,19 @@
 
   type Props = {
     alt?: string;
-    cdn?: string;
     isLazy?: boolean;
-    offset?: number;
     src?: string;
   };
 
   const props = withDefaults(defineProps<Props>(), {
     alt: '',
-    cdn: undefined,
     isLazy: true,
-    offset: 0,
     src: undefined,
   });
 
   const tideImage = ref();
 
-  const imageDefault = `${props.cdn}/image-coming-soon-512.png`;
+  const imageDefault = 'https://cdn-static-rec.tilabs.io/image-coming-soon-512.png';
 
   const setImageFromDefault = () => {
     tideImage.value.src = imageDefault;
@@ -34,7 +30,7 @@
   <img
     :alt="alt"
     :class="['tide-image', CSS.OBJECT.CENTER, CSS.OBJECT.COVER]"
-    :loading="isLazy ? 'lazy' : 'eager'"
+    :loading="props.isLazy ? 'lazy' : 'eager'"
     ref="tideImage"
     :src="src ?? imageDefault"
     @error="setImageFromDefault"

package/src/stories/FoundationsGrid.stories.ts

@@ -0,0 +1,309 @@
+import type { StoryContext } from '@storybook/vue3';
+
+import * as STYLES from '@/types/Storybook';
+import { CSS } from '@/types/Styles';
+import {
+  argTypeBoolean,
+  formatArgType,
+  getConstantsByValues,
+  lineBreak,
+  prependNoneAsEmpty,
+  tab,
+} from '@/utilities/storybook';
+
+const GRID_END = prependNoneAsEmpty(STYLES.GRID_END);
+const GRID_START = prependNoneAsEmpty(STYLES.GRID_START);
+
+const formatArgs = (args: any) => {
+  args.class = formatClassNames(args).join(' ');
+
+  return { args };
+};
+
+const formatClassNames = (args: any) => {
+  const classNames: string[] = [];
+
+  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;
+};
+
+const formatClassNamesSnippet = (args: any) => {
+  const classNames = formatClassNames(args);
+
+  return getConstantsByValues(classNames);
+};
+
+const formatClassNamesParentSnippet = (args: any) => {
+  const classNamesParent: string[] = [CSS.GRID.LAYOUT];
+
+  if (args.xl) classNamesParent.push(CSS.GRID.XL);
+
+  return getConstantsByValues(classNamesParent);
+};
+
+const formatSnippet = (code: string, context: StoryContext) => {
+  const { args } = context;
+  const classNames = formatClassNamesSnippet(args);
+  const attribute = classNames.length ? ` :class="[${classNames.join(', ')}]"` : '';
+
+  if (args.item) {
+    return (
+      `<div :class="[${formatClassNamesParentSnippet(args).join(', ')}]">${lineBreak}` +
+      `${tab}<span :class="[CSS.DISPLAY.CONTENTS]">${lineBreak}` +
+      `${tab}${tab}<span${attribute}>Demo</span>${lineBreak}` +
+      `${tab}</span>${lineBreak}` +
+      `</div>`
+    );
+  }
+
+  return (
+    `<div :class="[${formatClassNamesParentSnippet(args).join(', ')}]">${lineBreak}` +
+    `${tab}<span${attribute}>Demo</span>${lineBreak}` +
+    `</div>`
+  );
+};
+
+const parameters = {
+  docs: {
+    source: {
+      format: false,
+      language: 'html',
+      transform: formatSnippet,
+    },
+  },
+};
+
+const render = (args: any) => ({
+  setup() {
+    return formatArgs(args);
+  },
+  template: `<div class="tide-grid-layout tide-padding-top-2"><div class="tide-border-1 tide-padding-1 sb-bg-white tide-xy-hidden" v-bind="args">Demo</div></div>`,
+  updated() {
+    return formatArgs(args);
+  },
+});
+
+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`,
+      if: { arg: 'item', neq: true },
+      name: 'Fluid',
+    },
+    item: {
+      ...argTypeBoolean,
+      description: `Forces a non-direct descendant to adhere to the grid`,
+      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`,
+      name: 'XL',
+    },
+  },
+  args: {
+    end: GRID_END.None,
+    fluid: false,
+    item: false,
+    start: GRID_START.None,
+    xl: false,
+  },
+  parameters,
+  render,
+  tags: ['autodocs'],
+  title: 'Foundations/Grid',
+};
+
+export const Default = {};
+
+export const Fluid = {
+  args: {
+    fluid: true,
+  },
+};
+
+export const Item = {
+  args: {
+    item: true,
+  },
+};
+
+export const XL = {
+  args: {
+    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'],
+  },
+};

package/src/stories/FoundationsTypography.stories.ts

@@ -1,23 +1,33 @@
 import type { StoryContext } from '@storybook/vue3';
 
-import { TYPOGRAPHY } from '@/types/Storybook';
-import { formatArgType, getConstantsByValues } from '@/utilities/storybook';
+import * as STYLES from '@/types/Storybook';
+import { formatArgType, getConstantsByValues, prependNoneAsEmpty } from '@/utilities/storybook';
+
+const TYPOGRAPHY = prependNoneAsEmpty(STYLES.TYPOGRAPHY);
 
 const formatArgs = (args: any) => {
-  args.class = args.type.join(' ');
+  args.class = formatClassNames(args).join(' ');
 
   return { args };
 };
 
 const formatClassNames = (args: any) => {
-  const classNames: string[] = args.type;
+  const classNames: string[] = [];
+
+  if (args.type) classNames.push(args.type);
+
+  return classNames;
+};
+
+const formatClassNamesSnippet = (args: any) => {
+  const classNames = formatClassNames(args);
 
   return getConstantsByValues(classNames);
 };
 
 const formatSnippet = (code: string, context: StoryContext) => {
   const { args } = context;
-  const classNames = formatClassNames(args);
+  const classNames = formatClassNamesSnippet(args);
 
   return `<div :class="[${classNames.join(', ')}]">${args.label}</div>`;
 };
@@ -57,11 +67,15 @@ export default {
       ...formatArgType({ TYPOGRAPHY }),
       description: `Applies font rules`,
       name: 'Type',
+      table: {
+        defaultValue: { summary: 'None' },
+        type: { summary: 'CSS.FONT.ROLE' },
+      },
     },
   },
   args: {
     label: 'Aa',
-    type: TYPOGRAPHY.BODY_1,
+    type: TYPOGRAPHY.None,
   },
   parameters,
   render,
@@ -69,104 +83,106 @@ export default {
   title: 'Foundations/Typography',
 };
 
+export const Default = {};
+
 export const Display1 = {
   args: {
-    type: TYPOGRAPHY.DISPLAY_1,
+    type: TYPOGRAPHY['Display 1'],
   },
 };
 
 export const Headline1 = {
   args: {
-    type: TYPOGRAPHY.HEADLINE_1,
+    type: TYPOGRAPHY['Headline 1'],
   },
 };
 
 export const Headline2 = {
   args: {
-    type: TYPOGRAPHY.HEADLINE_2,
+    type: TYPOGRAPHY['Headline 2'],
   },
 };
 
 export const Headline3 = {
   args: {
-    type: TYPOGRAPHY.HEADLINE_1,
+    type: TYPOGRAPHY['Headline 1'],
   },
 };
 
 export const Title1 = {
   args: {
-    type: TYPOGRAPHY.TITLE_1,
+    type: TYPOGRAPHY['Title 1'],
   },
 };
 
 export const Title2 = {
   args: {
-    type: TYPOGRAPHY.TITLE_1,
+    type: TYPOGRAPHY['Title 1'],
   },
 };
 
 export const Body1 = {
   args: {
-    type: TYPOGRAPHY.BODY_1,
+    type: TYPOGRAPHY['Body 1'],
   },
 };
 
 export const Body2 = {
   args: {
-    type: TYPOGRAPHY.BODY_1,
+    type: TYPOGRAPHY['Body 1'],
   },
 };
 
 export const Label1 = {
   args: {
-    type: TYPOGRAPHY.LABEL_1,
+    type: TYPOGRAPHY['Label 1'],
   },
 };
 
 export const Label1Semibold = {
   args: {
-    type: TYPOGRAPHY.LABEL_1_SEMIBOLD,
+    type: TYPOGRAPHY['Label 1 Semibold'],
   },
 };
 
 export const Label2 = {
   args: {
-    type: TYPOGRAPHY.LABEL_2,
+    type: TYPOGRAPHY['Label 2'],
   },
 };
 
 export const Label2Semibold = {
   args: {
-    type: TYPOGRAPHY.LABEL_2_SEMIBOLD,
+    type: TYPOGRAPHY['Label 2 Semibold'],
   },
 };
 
 export const Label3 = {
   args: {
-    type: TYPOGRAPHY.LABEL_3,
+    type: TYPOGRAPHY['Label 3'],
   },
 };
 
 export const Link1 = {
   args: {
-    type: TYPOGRAPHY.LINK_1,
+    type: TYPOGRAPHY['Link 1'],
   },
 };
 
 export const Link2 = {
   args: {
-    type: TYPOGRAPHY.LINK_2,
+    type: TYPOGRAPHY['Link 2'],
   },
 };
 
 export const Link3 = {
   args: {
-    type: TYPOGRAPHY.LINK_3,
+    type: TYPOGRAPHY['Link 3'],
   },
 };
 
 export const Button1 = {
   args: {
-    type: TYPOGRAPHY.BUTTON_1,
+    type: TYPOGRAPHY['Button 1'],
   },
 };

package/src/stories/TideImage.stories.ts

@@ -0,0 +1,38 @@
+import TideImage from '@/components/TideImage.vue';
+import { argTypeBooleanUnrequired, parameters } from '@/utilities/storybook';
+
+export default {
+  argTypes: {
+    alt: {
+      control: 'text',
+      description: `Text display when image can't be loaded.`,
+      table: {
+        defaultValue: { summary: 'None' },
+        type: { summary: 'string' },
+      },
+    },
+    isLazy: {
+      ...argTypeBooleanUnrequired,
+      description: `Determines whether to delay loading until image is in viewport.`,
+    },
+    src: {
+      control: 'text',
+      description: `Image URL.`,
+      table: {
+        defaultValue: { summary: 'None' },
+        type: { summary: 'string' },
+      },
+    },
+  },
+  args: {
+    alt: '',
+    isLazy: undefined,
+    src: '',
+  },
+  component: TideImage,
+  parameters,
+  tags: ['autodocs'],
+  title: 'Basic Components/TideImage',
+};
+
+export const Demo = {};

package/src/types/Storybook.ts

@@ -7,6 +7,11 @@ export const NoneAsEmpty = { None: '' };
 export const NoneAsUndefined = { None: undefined };
 
 // These objects are intended exclusively for use in demonstrating the Storybook UI.
+export const BOOLEAN = {
+  True: true,
+  False: false,
+};
+
 export const BOOLEAN_UNREQUIRED = {
   None: undefined,
   True: true,
@@ -94,6 +99,38 @@ 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,
@@ -197,23 +234,21 @@ export const SHADOW = {
 };
 
 export const TYPOGRAPHY = {
-  DISPLAY_1: [CSS.FONT.SIZE.THIRTY_TWO, CSS.FONT.WEIGHT.SEVEN_HUNDRED],
-  HEADLINE_1: [CSS.FONT.SIZE.TWENTY_FOUR, CSS.FONT.WEIGHT.SEVEN_HUNDRED],
-  HEADLINE_2: [CSS.FONT.SIZE.TWENTY, CSS.FONT.WEIGHT.SEVEN_HUNDRED],
-  HEADLINE_3: [CSS.FONT.SIZE.SIXTEEN, CSS.FONT.WEIGHT.SEVEN_HUNDRED],
-  TITLE_1: [CSS.FONT.SIZE.TWENTY, CSS.FONT.WEIGHT.SIX_HUNDRED],
-  TITLE_2: [CSS.FONT.SIZE.SIXTEEN, CSS.FONT.WEIGHT.SIX_HUNDRED],
-  BODY_1: [CSS.FONT.SIZE.SIXTEEN, CSS.FONT.WEIGHT.FOUR_HUNDRED],
-  BODY_2: [CSS.FONT.SIZE.FOURTEEN, CSS.FONT.WEIGHT.FOUR_HUNDRED],
-  LABEL_1: [CSS.FONT.SIZE.SIXTEEN, CSS.FONT.WEIGHT.FIVE_HUNDRED],
-  LABEL_1_SEMIBOLD: [CSS.FONT.SIZE.SIXTEEN, CSS.FONT.WEIGHT.SIX_HUNDRED],
-  LABEL_2: [CSS.FONT.SIZE.FOURTEEN, CSS.FONT.WEIGHT.FIVE_HUNDRED],
-  LABEL_2_SEMIBOLD: [CSS.FONT.SIZE.FOURTEEN, CSS.FONT.WEIGHT.SIX_HUNDRED],
-  LABEL_3: [CSS.FONT.SIZE.TWELVE, CSS.FONT.WEIGHT.FIVE_HUNDRED],
-  LINK_1: [CSS.FONT.SIZE.SIXTEEN, CSS.FONT.WEIGHT.SEVEN_HUNDRED],
-  LINK_2: [CSS.FONT.SIZE.FOURTEEN, CSS.FONT.WEIGHT.SEVEN_HUNDRED],
-  LINK_3: [CSS.FONT.SIZE.TWELVE, CSS.FONT.WEIGHT.SEVEN_HUNDRED],
-  BUTTON_1: [CSS.FONT.SIZE.SIXTEEN, CSS.FONT.WEIGHT.SIX_HUNDRED],
-};
-
-export type Typography = (typeof TYPOGRAPHY)[keyof typeof TYPOGRAPHY];
+  'Display 1': CSS.FONT.ROLE.DISPLAY_1,
+  'Headline 1': CSS.FONT.ROLE.HEADLINE_1,
+  'Headline 2': CSS.FONT.ROLE.HEADLINE_2,
+  'Headline 3': CSS.FONT.ROLE.HEADLINE_3,
+  'Title 1': CSS.FONT.ROLE.TITLE_1,
+  'Title 2': CSS.FONT.ROLE.TITLE_2,
+  'Body 1': CSS.FONT.ROLE.BODY_1,
+  'Body 2': CSS.FONT.ROLE.BODY_2,
+  'Label 1': CSS.FONT.ROLE.LABEL_1,
+  'Label 1 Semibold': CSS.FONT.ROLE.LABEL_1_SEMIBOLD,
+  'Label 2': CSS.FONT.ROLE.LABEL_2,
+  'Label 2 Semibold': CSS.FONT.ROLE.LABEL_2_SEMIBOLD,
+  'Label 3': CSS.FONT.ROLE.LABEL_3,
+  'Link 1': CSS.FONT.ROLE.LINK_1,
+  'Link 2': CSS.FONT.ROLE.LINK_2,
+  'Link 3': CSS.FONT.ROLE.LINK_3,
+  'Button 1': CSS.FONT.ROLE.BUTTON_1,
+};