tide-design-system 2.0.38 → 2.0.40

package/package.json

@@ -54,5 +54,5 @@
   "main": "dist/tide-design-system.cjs",
   "module": "dist/tide-design-system.esm.js",
   "types": "dist/tide-design-system.esm.d.ts",
-  "version": "2.0.38"
+  "version": "2.0.40"
 }

package/src/assets/css/main.css

@@ -1,3 +1,4 @@
+@import './reset.css';
 @import './variables.css';
 @import './utilities.css';
 @import './dynamic-buttons.css';

package/src/assets/css/storybook.css

@@ -1,9 +1,17 @@
 /* Styles used for Storybook demonstration purposes only. Not bundled into distribution package. */
 @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap');
 
+.sb-border-black      {border: 1px solid #000000;}
 .sb-border-blue-light {border: 1px solid #CCDEF3;}
+.sb-border-white      {border: 1px solid #FFFFFF;}
 
+.sb-bg-black      {background-color: #000000;}
+.sb-bg-blue       {background-color: #0000FF;}
 .sb-bg-blue-light {background-color: #CCDEF3;}
-.sb-bg-white {background-color: #FFFFFF;}
+.sb-bg-green      {background-color: #00FF00;}
+.sb-bg-red        {background-color: #FF0000;}
+.sb-bg-white      {background-color: #FFFFFF;}
 
+.sb-font-black      {color: #000000;}
 .sb-font-blue-light {color: #CCDEF3;}
+.sb-font-white      {color: #FFFFFF;}

package/src/components/TideImage.vue

@@ -46,7 +46,7 @@
 
     <img
       :alt="alt"
-      :class="[CSS.OBJECT.CENTER, CSS.OBJECT.COVER]"
+      :class="[CSS.WIDTH.FULL, CSS.HEIGHT.FULL, CSS.OBJECT.CENTER, CSS.OBJECT.COVER]"
       :fetchpriority="isLazy ? undefined : 'high'"
       :loading="props.isLazy ? 'lazy' : 'eager'"
       ref="tideImage"

package/src/stories/FoundationsTransparency.stories.ts

@@ -0,0 +1,114 @@
+import type { StoryContext } from '@storybook/vue3';
+
+import * as STYLES from '@/types/Storybook';
+import { formatArgType, getConstantsByValues, prependNoneAsEmpty } from '@/utilities/storybook';
+
+const BG = prependNoneAsEmpty(STYLES.BG);
+const FONT_COLOR = prependNoneAsEmpty(STYLES.FONT_COLOR);
+const TRANSPARENT = prependNoneAsEmpty(STYLES.TRANSPARENT);
+
+const formatArgs = (args: any) => {
+  args.class = formatClassNames(args).join(' ');
+
+  return { args };
+};
+
+const formatClassNames = (args: any) => {
+  const classNames: string[] = [];
+
+  if (args.bg) classNames.push(args.bg);
+  if (args.color) classNames.push(args.color);
+  if (args.transparent) classNames.push(args.transparent);
+
+  return classNames;
+};
+
+const formatClassNamesSnippet = (args: any) => {
+  const classNames: string[] = [];
+
+  if (args.transparent) classNames.push(args.transparent);
+
+  return getConstantsByValues(classNames);
+};
+
+const formatSnippet = (code: string, context: StoryContext) => {
+  const { args } = context;
+  const classNames = formatClassNamesSnippet(args);
+
+  return classNames.length ? `<div :class="[${classNames.join(', ')}]">Demo</div>` : '<div>Demo</div>';
+};
+
+const parameters = {
+  docs: {
+    source: {
+      format: false,
+      language: 'html',
+      transform: formatSnippet,
+    },
+  },
+};
+
+const render = (args: any) => ({
+  setup() {
+    return formatArgs(args);
+  },
+  template: `<div :class="[args.bg]"><div class="tide-display-inline-block tide-padding-1 tide-width-full tide-height-full" :class="[args.transparent, args.color]">Demo</div></div>`,
+  updated() {
+    return formatArgs(args);
+  },
+});
+
+export default {
+  argTypes: {
+    bg: {
+      ...formatArgType({ BG }),
+      description: `Applies a background color<br />(For demonstration purposes only).`,
+      name: 'Background color',
+    },
+    color: {
+      ...formatArgType({ FONT_COLOR }),
+      description: `Applies a text color<br />(For demonstration purposes only).`,
+      name: 'Text color',
+    },
+    transparent: {
+      ...formatArgType({ TRANSPARENT }),
+      description: `Applies a semi-transparent overlay.`,
+      name: 'Transparent',
+    },
+  },
+  args: {
+    bg: FONT_COLOR.None,
+    color: BG.None,
+    transparent: TRANSPARENT.None,
+  },
+  parameters,
+  render,
+  tags: ['autodocs'],
+  title: 'Foundations/Transparency',
+};
+
+export const Default = {};
+
+export const Transparent100 = {
+  args: {
+    transparent: TRANSPARENT['100: 90% White'],
+  },
+};
+
+export const Transparent200 = {
+  args: {
+    transparent: TRANSPARENT['100: 75% White'],
+  },
+};
+
+export const Transparent300 = {
+  args: {
+    transparent: TRANSPARENT['300: 10% Black'],
+  },
+};
+
+export const Transparent400 = {
+  args: {
+    transparent: TRANSPARENT['400: 50% Black'],
+  },
+};

package/src/types/Storybook.ts

@@ -24,6 +24,12 @@ export const BADGE_TRUSTED = {
   YEARS_15: '15',
 };
 
+export const BG = {
+  Red: 'sb-bg-red',
+  Green: 'sb-bg-green',
+  Blue: 'sb-bg-blue',
+};
+
 export const BORDER_RADIUS = {
   '0.25 REM': CSS.BORDER.RADIUS.QUARTER,
   '0.5 REM': CSS.BORDER.RADIUS.HALF,
@@ -75,6 +81,11 @@ export const FLEX_DIRECTION = {
   Row: CSS.FLEX.DIRECTION.ROW,
 };
 
+export const FONT_COLOR = {
+  Black: 'sb-font-black',
+  White: 'sb-font-white',
+};
+
 export const FONT_SIZE = {
   '12px': CSS.FONT.SIZE.TWELVE,
   '14px': CSS.FONT.SIZE.FOURTEEN,
@@ -233,6 +244,13 @@ export const SHADOW = {
   Top: CSS.SHADOW.TOP,
 };
 
+export const TRANSPARENT = {
+  '100: 90% White': CSS.BG.TRANSPARENT.ONE_HUNDRED,
+  '200: 75% White': CSS.BG.TRANSPARENT.TWO_HUNDRED,
+  '300: 10% Black': CSS.BG.TRANSPARENT.THREE_HUNDRED,
+  '400: 50% Black': CSS.BG.TRANSPARENT.FOUR_HUNDRED,
+};
+
 export const TYPOGRAPHY = {
   'Display 1': CSS.FONT.ROLE.DISPLAY_1,
   'Headline 1': CSS.FONT.ROLE.HEADLINE_1,

package/src/types/Styles.ts

@@ -51,6 +51,12 @@ export const CSS = {
       VARIANT: 'tide-bg-surface-variant',
       WARNING: 'tide-bg-surface-warning',
     },
+    TRANSPARENT: {
+      ONE_HUNDRED: 'tide-transparent-100',
+      TWO_HUNDRED: 'tide-transparent-200',
+      THREE_HUNDRED: 'tide-transparent-300',
+      FOUR_HUNDRED: 'tide-transparent-400',
+    },
     WARNING: 'tide-bg-warning',
   },
   BORDER: {