tide-design-system 2.4.2 → 2.4.4

package/dist/utilities/validation-deprecated.ts

@@ -0,0 +1,252 @@
+import { priceToNumber } from '@/utilities/format';
+
+import type { StringInput } from '@/types/FormDeprecated';
+import type { SelectOption } from '@/types/Select';
+import type { ValidationError, ValidationLength, ValidationResult, Validator } from '@/types/ValidationDeprecated';
+import type { Ref } from 'vue';
+
+/**
+ * @deprecated
+ */
+type RangeData = {
+  min: number | null;
+  max: number | null;
+};
+
+/**
+ * @deprecated
+ */
+export const errorMessageDefault = 'Please enter a valid value.';
+
+/**
+ * @deprecated
+ */
+export const noError = {
+  message: '',
+  valid: true,
+} as Readonly<ValidationResult>;
+
+/**
+ * @deprecated
+ */
+export const checkFormat = (format: RegExp) => {
+  return (value: string): ValidationResult => {
+    let result = noError;
+
+    if (!value.trim().match(format)) {
+      result = {
+        message: errorMessageDefault,
+        valid: false,
+      };
+    }
+
+    return result;
+  };
+};
+
+/**
+ * @deprecated
+ */
+export const getErrorMessage = (errorFromProps: ValidationError, errorFromRef: ValidationError) => {
+  // error in props takes precedence over validation error
+  if (typeof errorFromProps === 'string' && errorFromProps.length > 0) return errorFromProps;
+
+  return typeof errorFromRef === 'string' && errorFromRef.length > 0 ? errorFromRef : errorMessageDefault;
+};
+
+/**
+ * @deprecated
+ */
+export const getFieldHasError = (errorFromProps: ValidationError, errorFromRef: ValidationError) =>
+  errorFromProps !== false || errorFromRef !== false;
+
+/**
+ * @deprecated
+ */
+export const getFieldLengthIsValid = ({ maxlength, minlength, required, value }: ValidationLength) => {
+  const isEmptyAndUnrequired = value.length === 0 && !required;
+  const isTooLong = maxlength && value.length > maxlength;
+  const isTooShort = !isEmptyAndUnrequired && minlength && value.length < minlength;
+
+  return !isTooShort && !isTooLong;
+};
+
+/**
+ * @deprecated
+ */
+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;
+    }
+  };
+};
+
+/**
+ * @deprecated
+ */
+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;
+    }
+  };
+};
+
+/**
+ * @deprecated
+ */
+export const getSelectOptionsFromStrings = (strings: string[]) =>
+  strings.map(
+    (option) =>
+      ({
+        label: option,
+        value: option,
+      } as SelectOption)
+  );
+
+/**
+ * @deprecated
+ */
+export const handleFieldValidation = ({
+  error,
+  errorFromProps,
+  maxlength,
+  minlength,
+  required = false,
+  validators,
+  value,
+}: {
+  error: Ref<ValidationError>;
+  errorFromProps: ValidationError;
+  maxlength?: number;
+  minlength?: number;
+  required?: boolean;
+  validators?: Validator[];
+  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);
+
+    if (!validation.valid) {
+      error.value = validation.message;
+    }
+  }
+
+  if (!error.value && (maxlength || minlength)) {
+    const lengthValidation = validateLength({
+      maxlength,
+      minlength,
+      required,
+      value: value?.value || '',
+    });
+
+    if (!lengthValidation.valid) {
+      error.value = lengthValidation.message;
+    }
+  }
+};
+
+/**
+ * @deprecated
+ */
+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;
+}
+
+/**
+ * @deprecated
+ */
+export const validateLength = ({
+  maxlength,
+  minlength,
+  required = false,
+  value,
+}: ValidationLength): ValidationResult => {
+  const response = {
+    message: '',
+    valid: true,
+  };
+
+  response.valid = getFieldLengthIsValid({
+    maxlength,
+    minlength,
+    required,
+    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;
+};
+
+/**
+ * @deprecated
+ */
+export function validateProperty(value: string, validators: ((value: string) => ValidationResult)[]): ValidationResult {
+  for (const validator of validators) {
+    const validation = validator(value);
+    if (!validation.valid) {
+      return validation;
+    }
+  }
+
+  return {
+    message: '',
+    valid: true,
+  };
+}

package/dist/utilities/validation.ts

@@ -0,0 +1,132 @@
+import { formatNumber } from '@/utilities/format';
+
+import type { ValidationLength, ValidationResult, Validator } from '@/types/Validation';
+import type { Ref } from 'vue';
+
+export const errorMessageDefault = 'Please enter a valid value';
+
+export const VALIDATION_RESULT = {
+  NO_ERROR: {
+    message: '',
+    valid: true,
+  },
+  REQUIRED: {
+    message: 'Please fill out this field',
+    valid: false,
+  },
+} as const;
+
+export const checkFormat = (format: RegExp, message?: string) => {
+  return (value: string): ValidationResult => {
+    let result: ValidationResult = VALIDATION_RESULT.NO_ERROR;
+
+    if (!value.trim().match(format)) {
+      result = {
+        message: message ?? errorMessageDefault,
+        valid: false,
+      };
+    }
+
+    return result;
+  };
+};
+
+export const getFieldLengthIsValid = ({ maxlength, minlength, required, value }: ValidationLength) => {
+  const isEmptyAndUnrequired = value.length === 0 && !required;
+  const isTooLong = maxlength && value.length > maxlength;
+  const isTooShort = !isEmptyAndUnrequired && minlength && value.length < minlength;
+  return !isTooShort && !isTooLong;
+};
+
+export const getFieldValidationResult = ({
+  errorFromProps,
+  maxlength,
+  minlength,
+  required,
+  validators,
+  value,
+}: {
+  errorFromProps: string;
+  maxlength?: number;
+  minlength?: number;
+  required: boolean;
+  validators?: Validator[];
+  value: Ref<string>;
+}): ValidationResult => {
+  // error in props takes precedence over validation error
+  if (errorFromProps !== '')
+    return {
+      message: errorFromProps,
+      valid: false,
+    };
+
+  // custom validator prop errors from have second highest precedence
+  if (validators) {
+    const validation = validateProperty(value.value, validators);
+
+    if (!validation.valid) {
+      return validation;
+    }
+  }
+
+  // all other prop-based errors come last
+  if (required && value.value.trim() === '') {
+    return VALIDATION_RESULT.REQUIRED;
+  }
+
+  if (maxlength || minlength) {
+    const lengthValidation = validateLength({
+      maxlength,
+      minlength,
+      required,
+      value: value.value,
+    });
+
+    if (!lengthValidation.valid) {
+      return lengthValidation;
+    }
+  }
+  return VALIDATION_RESULT.NO_ERROR;
+};
+
+export const validateLength = ({ maxlength, minlength, required, value }: ValidationLength): ValidationResult => {
+  const response = {
+    message: '',
+    valid: true,
+  };
+
+  response.valid = getFieldLengthIsValid({
+    maxlength,
+    minlength,
+    required,
+    value,
+  });
+
+  if (response.valid) return response;
+
+  response.message = errorMessageDefault;
+
+  if (maxlength && minlength) {
+    response.message = `Enter a value between ${formatNumber(minlength)} and ${formatNumber(maxlength)} characters`;
+  } else if (maxlength) {
+    response.message = `Use ${formatNumber(maxlength)} characters or fewer`;
+  } else if (minlength) {
+    response.message = `Enter at least ${formatNumber(minlength)} characters`;
+  }
+
+  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;
+    }
+  }
+
+  return {
+    message: '',
+    valid: true,
+  };
+}

package/dist/utilities/viewport.ts

@@ -0,0 +1,63 @@
+import { nextTick } from 'vue';
+
+/**
+ * Directly modifies the `<body>` element to apply or remove scroll lock.
+ * When `false` is provided, it only unlocks scroll if there are no open
+ * HTML dialog elements.
+ */
+export const setScrollLock = async (isLocked: boolean) => {
+  // Cannot be applied to body tag in marketplace repo due to data-css-scope
+  // const BODY_LOCK_CLASS = 'body-scroll-lock';
+
+  const body = document.body;
+
+  if (isLocked) {
+    if (!body.dataset.scrollLockY) {
+      const scrollY = window.scrollY;
+
+      body.dataset.scrollLockY = scrollY.toString();
+      body.style.setProperty('--saved-scroll-y', `${scrollY}px`);
+      body.style.setProperty('inset', '0');
+      body.style.setProperty('margin-top', `calc(0px - var(--saved-scroll-y, 0px))`);
+      body.style.setProperty('overflow-y', 'scroll');
+      body.style.setProperty('position', 'fixed');
+
+      // Cannot be applied to body tag in marketplace repo due to data-css-scope
+      // body.classList.add(BODY_LOCK_CLASS);
+    }
+  } else {
+    await nextTick();
+    if (!document.querySelector('dialog[open]')) {
+      const savedScrollY = parseInt(body.dataset.scrollLockY || '0');
+
+      // Cannot be applied to body tag in marketplace repo due to data-css-scope
+      // body.classList.remove(BODY_LOCK_CLASS);
+
+      body.style.removeProperty('inset');
+      body.style.removeProperty('marginTop');
+      body.style.removeProperty('overflowY');
+      body.style.removeProperty('position');
+      body.style.removeProperty('--saved-scroll-y');
+
+      window.scrollTo({
+        behavior: 'auto',
+        top: savedScrollY,
+      });
+
+      delete body.dataset.scrollLockY;
+    }
+  }
+};
+
+export const TOP_LAYER_ID = 'tide-top-layer';
+
+export const initFauxTopLayer = () => {
+  let topLayer = document.getElementById(TOP_LAYER_ID);
+  if (!topLayer) {
+    topLayer = document.createElement('div');
+    topLayer.id = TOP_LAYER_ID;
+    topLayer.setAttribute('data-css-scope', '');
+    document.body.appendChild(topLayer);
+  }
+  topLayer.style.isolation = 'isolate';
+};

package/{src/docs → docs}/integration-full.md

@@ -81,4 +81,4 @@
 
 6. Storybook
 
-   Working implementations of TIDE utilities and components can be dynamically-generated from the publicly-served [Storybook](https://tide-design-system.netlify.app) interface layer of the TIDE repository. See [Using Storybook](./src/docs/storybook.md#using-storybook) for details.
+   Working implementations of TIDE utilities and components can be dynamically-generated from the publicly-served [Storybook](https://tide-design-system.netlify.app) interface layer of the TIDE repository. See [Using Storybook](./docs/storybook.md#using-storybook) for details.

package/{src/docs → docs}/integration-partial.md

@@ -36,4 +36,4 @@
    4. Leverage responsive CSS utilities:
 
          `<div class="tide-position-relative md-tide-position-absolute" />`
-3. Working implementations of TIDE utilities can be dynamically-generated from the publicly-served [Storybook](https://tide-design-system.netlify.app) interface layer of the TIDE repository. See [Utilities](./src/docs/storybook.md#utilities) under [Using Storybook](./src/docs/storybook.md#using-storybook) for details.
+3. Working implementations of TIDE utilities can be dynamically-generated from the publicly-served [Storybook](https://tide-design-system.netlify.app) interface layer of the TIDE repository. See [Utilities](./docs/storybook.md#utilities) under [Using Storybook](./docs/storybook.md#using-storybook) for details.

package/docs/token-cheatsheet.md

@@ -0,0 +1,63 @@
+# TIDE Figma Token Cheatsheet
+
+## Terminology
+- [**Figma Token**](https://www.figma.com/design/9oYSAyY2X9mPaUMiobZOPg/Design-System---TIDE-2.0?node-id=0-1&p=f&m=dev): the name that appears in the "Layer properties" section of the right sidebar when inspecting an element of a Figma mock
+- [**JS Constant**](../src/types/Styles.ts): the standard JavaScript structure to use when implementing a TIDE Figma token from within a JS file and/or framework (`.vue`, `.ts`, `.js`)
+- [**CSS Utility**](../src/assets/css/utilities-base.css): the CSS class to use when implementing a TIDE Figma token from **legacy** frameworks (`.html`, `.php`, `.phtml`).
+
+## Typography
+|[Figma Token](https://www.figma.com/design/9oYSAyY2X9mPaUMiobZOPg/Design-System---TIDE-2.0?node-id=0-1&p=f&m=dev)|[JS Constant](../src/types/Styles.ts)|[CSS Utility](../src/assets/css/utilities-base.css)|
+|-|-|-|
+|Role/Display/Display 1|`CSS.FONT.ROLE.DISPLAY_1`|`tide-typography-display-1`|
+|Role/Headline/Headline 1|`CSS.FONT.ROLE.HEADLINE_1`|`tide-typography-headline-1`|
+|Role/Headline/Headline 2|`CSS.FONT.ROLE.HEADLINE_2`|`tide-typography-headline-2`|
+|Role/Headline/Headline 3|`CSS.FONT.ROLE.HEADLINE_3`|`tide-typography-headline-3`|
+|Role/Title/Title 1|`CSS.FONT.ROLE.TITLE_1`|`tide-typography-title-1`|
+|Role/Title/Title 2|`CSS.FONT.ROLE.TITLE_2`|`tide-typography-title-2`|
+|Role/Body/Body 1*|`CSS.FONT.ROLE.BODY_1`|`tide-typography-body-1`|
+|Role/Body/Body 2|`CSS.FONT.ROLE.BODY_2`|`tide-typography-body-2`|
+|Role/Label/Label 1|`CSS.FONT.ROLE.LABEL_1`|`tide-typography-label-1`|
+|Role/Label/Label 1 Semibold|`CSS.FONT.ROLE.LABEL_1_SEMIBOLD`|`tide-typography-label-1-semibold`|
+|Role/Label/Label 2|`CSS.FONT.ROLE.LABEL_2`|`tide-typography-label-2`|
+|Role/Label/Label 2 Semibold|`CSS.FONT.ROLE.LABEL_2_SEMIBOLD`|`tide-typography-label-2-semibold`|
+|Role/Label/Label 3|`CSS.FONT.ROLE.LABEL_3`|`tide-typography-label-3`|
+|Role/Link/Link 1|`CSS.FONT.ROLE.LINK_1`|`tide-typography-link-1`|
+|Role/Link/Link 2|`CSS.FONT.ROLE.LINK_2`|`tide-typography-link-2`|
+|Role/Button/Button 1|`CSS.FONT.ROLE.BUTTON_1`|`tide-typography-button-1`|
+|Role/Button/Button 2|`CSS.FONT.ROLE.BUTTON_2`|`tide-typography-button-2`|
+
+\* **Body/Body 1** is applied to all site text by default in the [CSS Reset](../src/assets/css/reset.css), so it doesn't need to be specified unless overriding an inherited font role.
+
+## Color
+
+### Background Color
+|[Figma Token](https://www.figma.com/design/9oYSAyY2X9mPaUMiobZOPg/Design-System---TIDE-2.0?node-id=0-1&p=f&m=dev)|[JS Constant](../src/types/Styles.ts)|[CSS Utility](../src/assets/css/utilities-base.css)
+|-|-|-|
+|Colors/Primary/Primary|`CSS.BG.PRIMARY`|`tide-bg-primary`|
+|Colors/Secondary/Secondary|`CSS.BG.SECONDARY`|`tide-bg-secondary`|
+|Colors/Surface/Surface|`CSS.BG.SURFACE.DEFAULT`|`tide-bg-surface`|
+|Colors/Surface/Surface brand|`CSS.BG.SURFACE.BRAND`|`tide-bg-surface-brand`|
+|Colors/Surface/Surface brand|`CSS.BG.SURFACE.BRAND`|`tide-bg-surface-brand`|
+|Colors/Surface/Surface accent|`CSS.BG.SURFACE.ACCENT`|`tide-bg-surface-accent`|
+|Colors/Surface/Surface variant|`CSS.BG.SURFACE.VARIANT`|`tide-bg-surface-variant`|
+|Colors/Surface/Surface gradient|`CSS.BG.SURFACE.GRADIENT`|`tide-bg-surface-gradient`|
+|Colors/Surface/Surface floating|`CSS.BG.SURFACE.FLOATING`|`tide-bg-surface-floating`|
+
+### Border Color
+|[Figma Token](https://www.figma.com/design/9oYSAyY2X9mPaUMiobZOPg/Design-System---TIDE-2.0?node-id=0-1&p=f&m=dev)|[JS Constant](../src/types/Styles.ts)|[CSS Utility](../src/assets/css/utilities-base.css)
+|-|-|-|
+|Colors/Border/Border|`CSS.BORDER.COLOR.DEFAULT`|`tide-border`|
+|Colors/Border/Border low|`CSS.BORDER.COLOR.LOW`|`tide-border-low`|
+|Colors/Border/Border high|`CSS.BORDER.COLOR.HGIH`|`tide-border-high`|
+|Colors/Border/Border floating|`CSS.BORDER.COLOR.FLOATING`|`tide-border-floating`|
+
+### Font Color
+|[Figma Token](https://www.figma.com/design/9oYSAyY2X9mPaUMiobZOPg/Design-System---TIDE-2.0?node-id=0-1&p=f&m=dev)|[JS Constant](../src/types/Styles.ts)|[CSS Utility](../src/assets/css/utilities-base.css)
+|-|-|-|
+|Colors/Primary/On primary|`CSS.BG.PRIMARY`|`tide-font-on-primary`|
+|Colors/Secondary/Secondary|`CSS.BG.SECONDARY`|`tide-font-on-secondary`|
+|Colors/Surface/On surface|`CSS.BG.SURFACE.DEFAULT`|`tide-font-on-surface`|
+|Colors/Surface/On surface brand|`CSS.BG.SURFACE.BRAND`|`tide-font-on-surface-brand`|
+|Colors/Surface/On surface inverse|`CSS.BG.SURFACE.INVERSE`|`tide-font-on-surface-inverse`|
+|Colors/Surface/On surface variant|`CSS.BG.SURFACE.VARIANT`|`tide-font-on-surface-variant`|
+|Colors/Surface/On surface variant inverse|`CSS.BG.SURFACE.VARIANT_INVERSE`|`tide-font-on-surface-variant-inverse`|

package/package.json

@@ -46,7 +46,7 @@
     "build": "npm run enforce && npm run build-vite",
     "build-sandbox": "vite build --config vite.config.sandbox.ts",
     "build-storybook": "npm run build-vite && storybook build && cp -r src/assets/ storybook-static/",
-    "build-vite": "vite build",
+    "build-vite": "vite build && cp -r src/assets/css/ dist/css/ && cp -r src/utilities/ dist/utilities/",
     "coverage": "vitest run --coverage",
     "dev": "vite",
     "enforce": "npm run lint && npm run type-check && npm run test",
@@ -63,7 +63,7 @@
   "main": "dist/tide-design-system.cjs",
   "module": "dist/tide-design-system.esm.js",
   "types": "dist/tide-design-system.esm.d.ts",
-  "version": "2.4.2",
+  "version": "2.4.4",
   "dependencies": {
     "@floating-ui/vue": "^1.1.6"
   }

package/src/assets/css/storybook.css

@@ -2,6 +2,7 @@
 @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       {border: 1px solid #0000FF;}
 .sb-border-blue-light {border: 1px solid #CCDEF3;}
 .sb-border-white      {border: 1px solid #FFFFFF;}
 

package/src/assets/css/variables.css

@@ -57,8 +57,8 @@
 
   /* Global tonal palette */
   --tide-gray-100:  #FFFFFF;
-  --tide-gray-200:  #F5F5F5;
-  --tide-gray-300:  #E4E4E4;
+  --tide-gray-200:  #F2F2F2;
+  --tide-gray-300:  #E4E4E5;
   --tide-gray-400:  #C9CACB;
   --tide-gray-500:  #AEAFB2;
   --tide-gray-600:  #939598;