tide-design-system 2.1.4 → 2.1.6

package/src/types/Styles.ts

@@ -31,24 +31,31 @@ export const CSS = {
     START: 'tide-axis2-start',
   },
   BG: {
+    GLOBAL: {
+      PRIMARY: {
+        ERROR: 'tide-bg-primary-error',
+        INFO: 'tide-bg-primary-info',
+        SUCCESS: 'tide-bg-primary-success',
+        WARNING: 'tide-bg-primary-warning',
+      },
+      SURFACE: {
+        ERROR: 'tide-bg-surface-error',
+        INFO: 'tide-bg-surface-info',
+        SUCCESS: 'tide-bg-surface-success',
+        WARNING: 'tide-bg-surface-warning',
+      },
+    },
     INITIAL: 'tide-bg-initial',
     BLUR: 'tide-bg-blur',
-    ERROR: 'tide-bg-error',
-    INFO: 'tide-bg-info',
     PRIMARY: 'tide-bg-primary',
     SECONDARY: 'tide-bg-secondary',
-    SUCCESS: 'tide-bg-success',
     SURFACE: {
       ACCENT: 'tide-bg-surface-accent',
       BRAND: 'tide-bg-surface-brand',
       DEFAULT: 'tide-bg-surface',
-      ERROR: 'tide-bg-surface-error',
       FLOATING: 'tide-bg-surface-floating',
       GRADIENT: 'tide-bg-surface-gradient',
-      INFO: 'tide-bg-surface-info',
-      SUCCESS: 'tide-bg-surface-success',
       VARIANT: 'tide-bg-surface-variant',
-      WARNING: 'tide-bg-surface-warning',
     },
     TRANSPARENT: {
       ONE_HUNDRED: 'tide-transparent-100',
@@ -56,10 +63,15 @@ export const CSS = {
       THREE_HUNDRED: 'tide-transparent-300',
       FOUR_HUNDRED: 'tide-transparent-400',
     },
-    WARNING: 'tide-bg-warning',
   },
   BORDER: {
     COLOR: {
+      GLOBAL: {
+        ERROR: 'tide-border-error',
+        INFO: 'tide-border-info',
+        SUCCESS: 'tide-border-success',
+        WARNING: 'tide-border-warning',
+      },
       INITIAL: 'tide-border-color-initial',
       DEFAULT: 'tide-border',
       FLOATING: 'tide-border-floating',
@@ -154,6 +166,12 @@ export const CSS = {
   },
   FONT: {
     COLOR: {
+      GLOBAL: {
+        ERROR: 'tide-font-error',
+        INFO: 'tide-font-info',
+        SUCCESS: 'tide-font-success',
+        WARNING: 'tide-font-warning',
+      },
       PRIMARY: 'tide-font-on-primary',
       SECONDARY: 'tide-font-on-secondary',
       SURFACE: {

package/src/utilities/storybook.ts

@@ -5,6 +5,8 @@ import { formatKebabCase } from '@/utilities/format';
 
 import type { ArgTypes, StoryContext } from '@storybook/vue3';
 
+type KeyString = { [key: string]: string };
+
 // Extensible object of key/value pairs
 type KeyValue = { [key: string]: any };
 
@@ -13,6 +15,10 @@ type KeyValueNamed = {
   [key: string]: KeyValue;
 };
 
+type Nested = {
+  [key: string]: string | Nested;
+};
+
 export const lineBreak = '\r';
 export const tab = '  ';
 
@@ -89,6 +95,25 @@ export const doSomething = () => {
   alert('Did something.');
 };
 
+// Flatten a nested constant into a simple constant.
+export const flatten = (input: Nested): KeyString => {
+  const output: KeyString = {};
+
+  Object.entries(input).forEach(([key, value]) => {
+    if (typeof value === 'string') {
+      output[key] = value;
+    } else {
+      const flattened = flatten(value);
+
+      Object.entries(flattened).forEach(([key2, value2]) => {
+        output[`${key}.${key2}`] = value2;
+      });
+    }
+  });
+
+  return output;
+};
+
 // Accept a KeyValue as the value of an object with a retrievable key as a Storybook argType.
 export const formatArgType = (collection: KeyValueNamed) => {
   const constant = getKey(collection);

package/src/utilities/validation.ts

@@ -114,14 +114,14 @@ export const handleFieldValidation = ({
   minlength?: number;
   required?: boolean;
   validators?: Validator[];
-  value: Ref<string>;
+  value?: Ref<string | undefined>;
 }) => {
   // error in props takes precedence over validation error
 
   error.value = errorFromProps ? errorFromProps : false;
 
   if (!error.value && validators) {
-    const validation = validateProperty(value.value, validators);
+    const validation = validateProperty(value?.value || '', validators);
 
     if (!validation.valid) {
       error.value = validation.message;
@@ -133,7 +133,7 @@ export const handleFieldValidation = ({
       maxlength,
       minlength,
       required,
-      value: value.value,
+      value: value?.value || '',
     });
 
     if (!lengthValidation.valid) {

package/tests/utilities-format.spec.ts

@@ -297,9 +297,9 @@ describe('@/src/utilities/format.ts', () => {
       expect(formatPrice(input)).toEqual(output);
     });
 
-    it('ignores an empty string.', () => {
+    it('formats an empty string as zero dollars.', () => {
       const input = '';
-      const output = '$--';
+      const output = '$0';
 
       expect(formatPrice(input)).toEqual(output);
     });

package/tests/utilities-storybook.spec.ts

@@ -0,0 +1,99 @@
+import { describe, expect, it } from 'vitest';
+
+import { flatten } from '../src/utilities/storybook';
+
+describe('@/src/utilities/storybook.ts', () => {
+  describe('flatten', () => {
+    it('returns an empty object when an empty object is provided.', () => {
+      const input = {};
+
+      expect(flatten(input)).toEqual(input);
+    });
+
+    it('returns a shallow constant when a shallow constant is provided.', () => {
+      const input = {
+        A: 'a',
+        B: 'b',
+        C: 'c',
+      };
+
+      expect(flatten(input)).toEqual(input);
+    });
+
+    it('returns a shallow constant when a constant with 2 layers of depth is provided.', () => {
+      const input = {
+        A: 'a',
+        B: 'b',
+        C: {
+          D: 'd',
+          E: 'e',
+        },
+      };
+
+      const output = {
+        'A': 'a',
+        'B': 'b',
+        'C.D': 'd',
+        'C.E': 'e',
+      };
+
+      expect(flatten(input)).toEqual(output);
+    });
+
+    it('returns a shallow constant when a constant with 3 layers of depth is provided.', () => {
+      const input = {
+        A: 'a',
+        B: 'b',
+        C: {
+          D: 'd',
+          E: 'e',
+          F: {
+            G: 'g',
+            H: 'h',
+          },
+        },
+      };
+
+      const output = {
+        'A': 'a',
+        'B': 'b',
+        'C.D': 'd',
+        'C.E': 'e',
+        'C.F.G': 'g',
+        'C.F.H': 'h',
+      };
+
+      expect(flatten(input)).toEqual(output);
+    });
+
+    it('returns a shallow constant when a constant with complex depth is provided.', () => {
+      const input = {
+        A: 'a',
+        B: 'b',
+        C: {
+          D: 'd',
+          E: 'e',
+        },
+        F: {
+          G: 'g',
+          H: {
+            I: 'i',
+            J: 'j',
+          },
+        },
+      };
+
+      const output = {
+        'A': 'a',
+        'B': 'b',
+        'C.D': 'd',
+        'C.E': 'e',
+        'F.G': 'g',
+        'F.H.I': 'i',
+        'F.H.J': 'j',
+      };
+
+      expect(flatten(input)).toEqual(output);
+    });
+  });
+});

package/dist/css/animation.css

@@ -1,14 +0,0 @@
-.slide-down-from-top-enter-active,
-.slide-down-from-top-leave-active {
-  transition: transform var(--tide-animate);
-}
-
-.slide-down-from-top-enter-from,
-.slide-down-from-top-leave-to {
-  transform: translateY(-100%);
-}
-
-.slide-down-from-top-enter-to,
-.slide-down-from-top-leave-from {
-  transform: translateY(0);
-}

package/src/assets/css/animation.css

@@ -1,14 +0,0 @@
-.slide-down-from-top-enter-active,
-.slide-down-from-top-leave-active {
-  transition: transform var(--tide-animate);
-}
-
-.slide-down-from-top-enter-from,
-.slide-down-from-top-leave-to {
-  transform: translateY(-100%);
-}
-
-.slide-down-from-top-enter-to,
-.slide-down-from-top-leave-from {
-  transform: translateY(0);
-}