tide-design-system 2.0.34 → 2.0.36

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

package/src/types/Styles.ts

@@ -166,6 +166,26 @@ export const CSS = {
         VARIANT_INVERSE: 'tide-font-on-surface-variant-inverse',
       },
     },
+    ROLE: {
+      DISPLAY_1: 'tide-typography-display-1',
+      HEADLINE_1: 'tide-typography-headline-1',
+      HEADLINE_2: 'tide-typography-headline-2',
+      HEADLINE_3: 'tide-typography-headline-3',
+      TITLE_1: 'tide-typography-title-1',
+      TITLE_2: 'tide-typography-title-2',
+      BODY_1: 'tide-typography-body-1',
+      BODY_2: 'tide-typography-body-2',
+      LABEL_1: 'tide-typography-label-1',
+      LABEL_1_SEMIBOLD: 'tide-typography-label-1-semibold',
+      LABEL_2: 'tide-typography-label-2',
+      LABEL_2_SEMIBOLD: 'tide-typography-label-2-semibold',
+      LABEL_3: 'tide-typography-label-3',
+      LINK_1: 'tide-typography-link-1',
+      LINK_2: 'tide-typography-link-2',
+      LINK_3: 'tide-typography-link-3',
+      BUTTON_1: 'tide-typography-button-1',
+      BUTTON_2: 'tide-typography-button-2',
+    },
     SIZE: {
       TWELVE: 'tide-font-12',
       FOURTEEN: 'tide-font-14',
@@ -206,6 +226,7 @@ export const CSS = {
       THIRTEEN: 'tide-end-13',
     },
     FLUID: 'tide-fluid',
+    ITEM: 'tide-grid-item',
     LAYOUT: 'tide-grid-layout',
     START: {
       ZERO: 'tide-start-0',
@@ -387,8 +408,8 @@ export const CSS = {
     ABSOLUTE: 'tide-position-absolute',
     FIXED: 'tide-position-fixed',
     RELATIVE: 'tide-position-relative',
-    STATIC: 'tide-static',
-    STICKY: 'tide-sticky',
+    STATIC: 'tide-position-static',
+    STICKY: 'tide-position-sticky',
   },
   POSITIONING: {
     BOTTOM: 'tide-bottom-0',
@@ -405,7 +426,7 @@ export const CSS = {
     TOP: 'tide-shadow-top',
   },
   SNAP: {
-    ON: 'tide-snap',
+    ON: 'tide-scroll-snap',
   },
   SNAP_ALIGN: {
     START: 'tide-snap-start',

package/src/utilities/storybook.ts

@@ -1,6 +1,6 @@
 import type { ArgTypes } from '@storybook/vue3';
 
-import { BOOLEAN_UNREQUIRED } from '@/types/Storybook';
+import { BOOLEAN, BOOLEAN_UNREQUIRED } from '@/types/Storybook';
 import { CSS } from '@/types/Styles';
 import { ELEMENT, ELEMENT_TEXT_AS_ICON } from '@/types/Element';
 
@@ -20,6 +20,16 @@ import { NoneAsEmpty, NoneAsUndefined } from '@/types/Storybook';
 export const lineBreak = '\r';
 export const tab = '  ';
 
+export const argTypeBoolean = {
+  control: 'select',
+  description: 'Determines whether CSS utility is present',
+  options: BOOLEAN,
+  table: {
+    defaultValue: { summary: 'False' },
+    type: { summary: 'boolean' },
+  },
+};
+
 export const argTypeBooleanUnrequired = {
   control: 'select',
   description: 'True, False, or undefined<br />(for demonstration purposes)',