tide-design-system 2.0.0 → 2.0.1

package/dist/types/Styles.ts

@@ -22,18 +22,26 @@ export const CSS = {
     END: 'tide-axis2-end',
     START: 'tide-axis2-start',
   },
-  BORDER: {
-    BOTTOM: {
-      ONE: 'tide-border-bottom-1',
-      TWO: 'tide-border-bottom-2',
-    },
-    FULL: {
-      ONE: 'tide-border-1',
-      TWO: 'tide-border-2',
+  BG: {
+    PRIMARY: 'tide-bg-primary',
+    SECONDARY: 'tide-bg-secondary',
+    SURFACE: {
+      ACCENT: 'tide-bg-surface-accent',
+      ACCENT_VARIANT: 'tide-bg-surface-accent-variant',
+      BRAND: 'tide-bg-surface-brand',
+      DEFAULT: 'tide-bg-surface',
+      FLOATING: 'tide-bg-surface-floating',
+      GRADIENT: 'tide-bg-surface-gradient',
+      VARIANT: 'tide-bg-surface-variant',
     },
-    LEFT: {
-      ONE: 'tide-border-left-1',
-      TWO: 'tide-border-left-2',
+  },
+  BORDER: {
+    COLOR: {
+      DEFAULT: 'tide-border',
+      FLOATING: 'tide-border-floating',
+      HIGH: 'tide-border-high',
+      LOW: 'tide-border-low',
+      PRIMARY: 'tide-border-primary',
     },
     RADIUS: {
       FULL: 'tide-radius-full',
@@ -41,13 +49,27 @@ export const CSS = {
       ONE: 'tide-radius-1',
       QUARTER: 'tide-radius-1/4',
     },
-    RIGHT: {
-      ONE: 'tide-border-right-1',
-      TWO: 'tide-border-right-2',
-    },
-    TOP: {
-      ONE: 'tide-border-top-1',
-      TWO: 'tide-border-top-2',
+    SIDE: {
+      BOTTOM: {
+        ONE: 'tide-border-bottom-1',
+        TWO: 'tide-border-bottom-2',
+      },
+      FULL: {
+        ONE: 'tide-border-1',
+        TWO: 'tide-border-2',
+      },
+      LEFT: {
+        ONE: 'tide-border-left-1',
+        TWO: 'tide-border-left-2',
+      },
+      RIGHT: {
+        ONE: 'tide-border-right-1',
+        TWO: 'tide-border-right-2',
+      },
+      TOP: {
+        ONE: 'tide-border-top-1',
+        TWO: 'tide-border-top-2',
+      },
     },
   },
   BOX_SIZING: {
@@ -60,17 +82,18 @@ export const CSS = {
   CURSOR: {
     NOT_ALLOWED: 'tide-cursor-not-allowed',
     POINTER: 'tide-cursor-pointer',
+    TEXT: 'tide-cursor-text',
   },
   DISPLAY: {
     BLOCK: 'tide-display-block',
     CONTENTS: 'tide-contents',
     FLEX: 'tide-display-flex',
     GRID: 'tide-display-grid',
-    HIDDEN: 'tide-display-hidden',
     INITIAL: 'initial',
     INLINE: 'tide-display-inline',
     INLINE_BLOCK: 'tide-display-inline-block',
     INLINE_FLEX: 'tide-display-inline-flex',
+    NONE: 'tide-display-none',
   },
   FLEX: {
     DIRECTION: {
@@ -90,6 +113,17 @@ export const CSS = {
     WRAP: 'tide-flex-wrap',
   },
   FONT: {
+    COLOR: {
+      PRIMARY: 'tide-font-on-primary',
+      SECONDARY: 'tide-font-on-secondary',
+      SURFACE: {
+        BRAND: 'tide-font-on-surface-brand',
+        DEFAULT: 'tide-font-on-surface',
+        INVERSE: 'tide-font-on-surface-inverse',
+        VARIANT: 'tide-font-on-surface-variant',
+        VARIANT_INVERSE: 'tide-font-on-surface-variant-inverse',
+      },
+    },
     SIZE: {
       FOURTEEN: 'tide-font-14',
       SIXTEEN: 'tide-font-16',
@@ -303,7 +337,7 @@ export const cssSortOrder = [
   CSS.DISPLAY.CONTENTS,
   CSS.DISPLAY.FLEX,
   CSS.DISPLAY.GRID,
-  CSS.DISPLAY.HIDDEN,
+  CSS.DISPLAY.NONE,
   CSS.DISPLAY.INITIAL,
   CSS.DISPLAY.INLINE,
   CSS.DISPLAY.INLINE_BLOCK,
@@ -379,16 +413,16 @@ export const cssSortOrder = [
   CSS.MARGIN.LEFT.TWO,
   CSS.MARGIN.LEFT.FOUR,
   CSS.MARGIN.LEFT.AUTO,
-  CSS.BORDER.FULL.ONE,
-  CSS.BORDER.FULL.TWO,
-  CSS.BORDER.TOP.ONE,
-  CSS.BORDER.TOP.TWO,
-  CSS.BORDER.RIGHT.ONE,
-  CSS.BORDER.RIGHT.TWO,
-  CSS.BORDER.BOTTOM.ONE,
-  CSS.BORDER.BOTTOM.TWO,
-  CSS.BORDER.LEFT.ONE,
-  CSS.BORDER.LEFT.TWO,
+  CSS.BORDER.SIDE.FULL.ONE,
+  CSS.BORDER.SIDE.FULL.TWO,
+  CSS.BORDER.SIDE.TOP.ONE,
+  CSS.BORDER.SIDE.TOP.TWO,
+  CSS.BORDER.SIDE.RIGHT.ONE,
+  CSS.BORDER.SIDE.RIGHT.TWO,
+  CSS.BORDER.SIDE.BOTTOM.ONE,
+  CSS.BORDER.SIDE.BOTTOM.TWO,
+  CSS.BORDER.SIDE.LEFT.ONE,
+  CSS.BORDER.SIDE.LEFT.TWO,
   CSS.BORDER.RADIUS.ONE,
   CSS.BORDER.RADIUS.HALF,
   CSS.BORDER.RADIUS.QUARTER,

package/dist/types/Validation.ts

@@ -11,8 +11,14 @@ export const VALIDATOR = {
 
 export type ValidationError = string | boolean;
 export type ValidationResult = {
-  valid: boolean;
   message: string;
+  valid: boolean;
+};
+
+export type ValidationLength = {
+  maxlength?: number;
+  minlength?: number;
+  value: string;
 };
 
 export type Validator = (value: string) => ValidationResult;

package/dist/utilities/format.ts

@@ -1,4 +1,6 @@
-import type { RealmConfig } from '@/types/RealmConfig';
+const capitalizeFirst = (string: string) => {
+  return string.charAt(0).toUpperCase() + string.slice(1);
+};
 
 const formatCamelCase = (input: string): string => {
   return input && typeof input === 'string'
@@ -22,9 +24,26 @@ const formatKebabCase = (input: string): string => {
     : input;
 };
 
+const formatLabel = (value: string) => {
+  const labelMap: { [key: string]: string } = {
+    false: 'No',
+    true: 'Yes',
+  };
+  return Object.hasOwn(labelMap, value) ? labelMap[value] : value;
+};
+
 const formatNumber = (input: number | string): string => {
-  const integer = typeof input === 'number' ? input : parseInt(input.match(/\d/g)?.join('') || '', 10);
-  const output = integer ? new Intl.NumberFormat().format(integer) : '';
+  let output = input && typeof input === 'number' ? new Intl.NumberFormat().format(input) : String(input || '');
+  let digits = output;
+
+  if (input && typeof input === 'string') {
+    digits = digits.replace(/\D/g, '');
+    if (Number(digits)) {
+      output = new Intl.NumberFormat().format(Number(digits));
+    } else {
+      output = '0';
+    }
+  }
 
   return output;
 };
@@ -42,38 +61,39 @@ const formatPascalCase = (input: string): string => {
 };
 
 const formatPhone = (input: number | string): string => {
-  const integer = typeof input === 'number' ? input : parseInt(input.match(/\d/g)?.join('') || '', 10);
-  let output = integer ? String(integer) : '';
-
-  if (integer && typeof integer === 'number') {
-    const digits = String(integer);
-
-    output = digits;
-
-    if (digits) {
-      switch (digits.length) {
-        case 7:
-          output = `${digits.slice(0, 3)}-${digits.slice(3)}`;
-          break;
-        case 10:
-          output = `${digits.slice(0, 3)}-${digits.slice(3, 6)}-${digits.slice(6)}`;
-          break;
-        case 11:
-          output = `${digits.slice(0, 1)}-${digits.slice(1, 4)}-${digits.slice(4, 7)}-${digits.slice(7)}`;
-          break;
-        default:
-          break;
-      }
-    }
+  let output = input && typeof input === 'number' ? String(input) : String(input || '');
+  let digits = output;
+  digits = digits.replace(/\D/g, '');
+
+  switch (digits.length) {
+    case 7:
+      output = `${digits.slice(0, 3)}-${digits.slice(3)}`;
+      break;
+    case 10:
+      output = `${digits.slice(0, 3)}-${digits.slice(3, 6)}-${digits.slice(6)}`;
+      break;
+    case 11:
+      output = `${digits.slice(0, 1)}-${digits.slice(1, 4)}-${digits.slice(4, 7)}-${digits.slice(7)}`;
+      break;
+    default:
+      output = digits;
+      break;
   }
 
   return output;
 };
 
 const formatPrice = (input: number | string): string => {
-  const output = formatNumber(input);
+  const output = input ? formatNumber(input) : String(input || '0');
+  return `$${output}`;
+};
 
-  return `$${output || '--'}`;
+const formatQuotes = (value: string) => {
+  if (value.startsWith('"') && value.endsWith('"')) {
+    return value.slice(1, -1);
+  } else {
+    return value;
+  }
 };
 
 const formatSentenceCase = (input: string): string => {
@@ -112,6 +132,17 @@ const formatTitleCase = (input: string): string => {
     : input;
 };
 
+const formatUrlFromRoot = (url: string) => {
+  const urlFormatted = url.split('.com/');
+
+  return urlFormatted.length > 1 ? `/${urlFormatted[1]}` : url;
+};
+
+const formatWeight = (input: number | string): string => {
+  const output = input ? formatNumber(input) : String(input || '0');
+  return `${output} lbs`;
+};
+
 const getArticle = (noun: string, isPlural = false, isDefinite = false) => {
   const vowels = ['a', 'e', 'i', 'o', 'u'];
   const isVowelLeading = vowels.includes(noun.charAt(0));
@@ -119,30 +150,35 @@ const getArticle = (noun: string, isPlural = false, isDefinite = false) => {
   return isDefinite ? 'the' : isPlural ? 'some' : isVowelLeading ? 'an' : 'a';
 };
 
-const getCdn = (realm: RealmConfig) => {
-  return `https://cdn.${realm.cdn.domain}.com`;
-};
-
-const getCdnMediaRoot = (realm: RealmConfig) => {
-  return `https://cdn.${realm.cdn.domain}.com/${realm.cdn.version}/media`;
+const priceToNumber = (value: string) => {
+  if (Number.isNaN(Number(value))) {
+    value = value.replace('$', '');
+    value = value.replace(/,/g, '');
+  }
+  return parseInt(value, 10);
 };
 
-const removeMarkup = (markup: string) => {
-  return markup.replace(/<[^>]*>/g, '');
+const unformatPrice = (input: string): string => {
+  const output = input.replace(/\$/g, '').replace(/,/g, '');
+  return `${output}`;
 };
 
 export {
+  capitalizeFirst,
   formatCamelCase,
   formatKebabCase,
+  formatLabel,
   formatNumber,
   formatPascalCase,
   formatPhone,
   formatPrice,
+  formatQuotes,
   formatSentenceCase,
   formatSnakeCase,
   formatTitleCase,
+  formatUrlFromRoot,
+  formatWeight,
   getArticle,
-  getCdn,
-  getCdnMediaRoot,
-  removeMarkup,
+  priceToNumber,
+  unformatPrice,
 };

package/dist/utilities/storybook.ts

@@ -1,6 +1,7 @@
 import type { ArgTypes } from '@storybook/vue3';
 
 import { BOOLEAN_UNREQUIRED } from '@/types/Storybook';
+import { CSS } from '@/types/Styles';
 import { ELEMENT, ELEMENT_TEXT_AS_ICON } from '@/types/Element';
 
 // Extensible object of key/value pairs
@@ -64,7 +65,7 @@ export const doSomething = () => {
   alert('Did something.');
 };
 
-// Accept a KeyValue as the value of an object with a retrievable key as a Storybook argType
+// 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);
   const keyValues: KeyValue = collection[constant];
@@ -203,6 +204,39 @@ export const formatSnippetMinimal = (code: string) => {
   return code.replace(/<[/]*template>/g, '');
 };
 
+export const getConstantByValue = (value: string) => {
+  const compareRecursively = (basis: string, shape: string | object, depth: number = 0): string | void => {
+    let output;
+
+    Object.entries(shape).forEach((entry: string[]) => {
+      const key = entry[0];
+      const value = entry[1];
+      const type = typeof value;
+
+      if (type === 'string' && basis === value) {
+        output = key;
+        return;
+      } else if (type === 'object') {
+        const match = compareRecursively(basis, value, depth + 1);
+
+        if (match) {
+          output = `${key}.${match}`;
+          return;
+        }
+      }
+    });
+
+    return output;
+  };
+
+  const constant = compareRecursively(value, CSS);
+
+  return constant ? `CSS.${constant}` : undefined;
+};
+
+export const getConstantsByValues = (classNames: string[]) =>
+  classNames.map((className) => getConstantByValue(className));
+
 export const getKey = (input: any) => Object.keys(input)[0];
 
 // Invert key/value pairs bc Storybook control option format is unintuitive.

package/dist/utilities/validation.ts

@@ -1,13 +1,22 @@
 import type { Ref } from 'vue';
-import type { StringField } from '@/types/Field';
-import type { ValidationResult } from '@/types/Validation';
 
-export function checkFormat(format: RegExp) {
+import type { RangeData } from '@/types/FacetRange';
+import type { SelectOption } from '@/types/Select';
+import type { StringInput } from '@/types/Form';
+import type { ValidationError, ValidationLength, ValidationResult, Validator } from '@/types/Validation';
+
+import { priceToNumber } from '@/utilities/format';
+
+export const errorMessageDefault = 'Please enter a valid value.';
+
+export const noError = {
+  message: '',
+  valid: true,
+} as Readonly<ValidationResult>;
+
+export const checkFormat = (format: RegExp) => {
   return (value: string): ValidationResult => {
-    let result = {
-      message: '',
-      valid: true,
-    };
+    let result = noError;
 
     if (!value.trim().match(format)) {
       result = {
@@ -18,68 +27,164 @@ export function checkFormat(format: RegExp) {
 
     return result;
   };
-}
+};
 
-export function checkLength(minlength?: number, maxlength?: number) {
-  return (value: string): ValidationResult => {
-    const valid = getFieldLengthIsValid({
-      maxlength,
-      minlength,
-      value,
-    });
+export const getErrorMessage = (errorFromProps: ValidationError, errorFromRef: ValidationError) => {
+  // error in props takes precedence over validation error
+  if (typeof errorFromProps === 'string' && errorFromProps.length > 0) return errorFromProps;
 
-    let message = valid ? '' : errorMessageDefault;
+  return typeof errorFromRef === 'string' && errorFromRef.length > 0 ? errorFromRef : errorMessageDefault;
+};
 
-    if (maxlength && minlength) {
-      message = `Please enter a value between ${minlength} and ${maxlength} characters in length.`;
+export const getFieldHasError = (errorFromProps: ValidationError, errorFromRef: ValidationError) =>
+  errorFromProps !== false || errorFromRef !== false;
+
+export const getFieldLengthIsValid = ({ maxlength, minlength, value }: ValidationLength) => {
+  const tooShort = maxlength && value.length > maxlength;
+  const tooLong = minlength && value.length < minlength;
+
+  return !tooShort && !tooLong;
+};
+
+export const getMaxRangeIsValid = ({ min }: Pick<RangeData, 'min'>, type?: 'price') => {
+  return (value: string): ValidationResult => {
+    let newMax: number | null = type === 'price' ? priceToNumber(value) : Number(value);
+    newMax = !isNaN(newMax) ? newMax : null;
+    if (min && newMax) {
+      if (newMax >= min) {
+        return {
+          message: '',
+          valid: true,
+        };
+      } else {
+        return {
+          message: `Must be greater than min`,
+          valid: false,
+        };
+      }
+    } else {
+      return noError;
     }
+  };
+};
 
-    return {
-      message,
-      valid,
-    };
+export const getMinRangeIsValid = ({ max }: Pick<RangeData, 'max'>, type?: 'price') => {
+  return (value: string): ValidationResult => {
+    let newMin: number | null = type === 'price' ? priceToNumber(value) : Number(value);
+    newMin = !isNaN(newMin) ? newMin : null;
+    if (max && newMin) {
+      if (newMin <= max) {
+        return {
+          message: '',
+          valid: true,
+        };
+      } else {
+        return {
+          message: `Must be less than max`,
+          valid: false,
+        };
+      }
+    } else {
+      return noError;
+    }
   };
-}
+};
 
-export const getFieldLengthIsValid = ({
+export const getSelectOptionsFromStrings = (strings: string[]) =>
+  strings.map(
+    (option) =>
+      ({
+        label: option,
+        value: option,
+      } as SelectOption)
+  );
+
+export const handleFieldValidation = ({
+  error,
+  errorFromProps,
   maxlength,
   minlength,
+  validators,
   value,
 }: {
+  error: Ref<ValidationError>;
+  errorFromProps: ValidationError;
   maxlength?: number;
   minlength?: number;
-  value: string;
+  validators?: Validator[];
+  value: Ref<string>;
 }) => {
-  const tooShort = maxlength && value.length > maxlength;
-  const tooLong = minlength && value.length < minlength;
+  // error in props takes precedence over validation error
 
-  return !tooShort && !tooLong;
-};
+  error.value = errorFromProps ? errorFromProps : false;
 
-export const errorMessageDefault = 'Please enter a valid value.';
+  if (!error.value && validators) {
+    const validation = validateProperty(value.value, validators);
+
+    if (!validation.valid) {
+      error.value = validation.message;
+    }
+  }
+
+  if (!error.value && (maxlength || minlength)) {
+    const lengthvalidation = validateLength({
+      maxlength,
+      minlength,
+      value: value.value,
+    });
+
+    if (!lengthvalidation.valid) {
+      error.value = lengthvalidation.message;
+    }
+  }
+};
 
-export function validateFieldsFromRefs(fields: { [key: string]: Ref<StringField | null> }) {
+export function validateFieldsFromRefs(fields: { [key: string]: Ref<StringInput | null> }) {
   let valid = true;
 
   for (const key in fields) {
     if (fields[key].value?.required) {
       const value = fields[key].value?.value;
-
       valid = valid && !!value && value.trim() !== '';
     }
 
     const error = fields[key].value?.error;
-
     valid = valid && !error;
   }
 
   return valid;
 }
 
+export const validateLength = ({ maxlength, minlength, value }: ValidationLength): ValidationResult => {
+  const response = {
+    message: '',
+    valid: true,
+  };
+
+  response.valid = getFieldLengthIsValid({
+    maxlength,
+    minlength,
+    value,
+  });
+
+  if (response.valid) return response;
+
+  response.message = errorMessageDefault;
+
+  if (maxlength && minlength) {
+    response.message = `Please enter a value between ${minlength} and ${maxlength} characters in length.`;
+  } else if (maxlength) {
+    response.message = `Please enter a value no more than ${maxlength} characters in length.`;
+  } else if (minlength) {
+    response.message = `Please enter a value no less than ${minlength} characters in length.`;
+  }
+
+  return response;
+};
+
 export function validateProperty(value: string, validators: ((value: string) => ValidationResult)[]): ValidationResult {
   for (const validator of validators) {
     const validation = validator(value);
-
     if (!validation.valid) {
       return validation;
     }

package/package.json

@@ -59,5 +59,5 @@
     "type-check": "vue-tsc --noEmit"
   },
   "type": "module",
-  "version": "2.0.0"
+  "version": "2.0.1"
 }

package/dist/css/dynamic-inputs.css

@@ -1,43 +0,0 @@
-.block-field .field {
-  --input-outline-width: var(--border-w-1);
-  outline: var(--input-outline-width) solid var(--ti-surface-border-rest);
-  outline-offset: calc(var(--input-outline-width) * -1);
-  color: var(--ti-surface-foreground);
-}
-
-.block-field .field::placeholder {
-  color: var(--ti-surface-variant-foreground);
-}
-
-.block-field.error {
-  color: var(--error-on-surface);
-}
-
-.block-field.error .field {
-  outline-color: var(--error-border-rest);
-}
-
-.block-field.error:focus-within .field {
-  outline-color: var(--error-border-rest);
-}
-
-.block-field.error:hover {
-  color: var(--error-on-surface-variant);
-}
-
-.block-field.error:hover .field {
-  outline-color: var(--error-border-high);
-}
-
-.block-field.disabled {
-  opacity: 0.333;
-}
-
-.block-field:hover .field {
-  outline-color: var(--ti-surface-border-high);
-}
-
-.block-field:focus-within .field {
-  --input-outline-width: var(--border-w-2);
-  outline-color: var(--ti-surface-border-high);
-}