tide-design-system 2.2.4 → 2.2.6

package/src/types/Styles.ts

@@ -436,9 +436,14 @@ export const CSS = {
     UPPER: 'tide-text-transform-upper',
   },
   UNDERLINE: {
-    HOVER: 'tide-underline-hover',
-    OFF: 'tide-underline-none',
-    ON: 'tide-underline',
+    HOVER: {
+      ON: 'tide-underline-hover',
+      OFF: 'tide-underline-hover-none',
+    },
+    REST: {
+      ON: 'tide-underline',
+      OFF: 'tide-underline-none',
+    },
   },
   VISIBILITY: {
     OFF: 'tide-visible-none',
@@ -460,202 +465,3 @@ export const CSS = {
 } as const;
 
 export type CssUtility = (typeof CSS)[keyof typeof CSS];
-
-export const cssSortOrder = [
-  CSS.DISPLAY.BLOCK,
-  CSS.DISPLAY.CONTENTS,
-  CSS.DISPLAY.FLEX,
-  CSS.DISPLAY.GRID,
-  CSS.DISPLAY.NONE,
-  CSS.DISPLAY.INITIAL,
-  CSS.DISPLAY.INLINE,
-  CSS.DISPLAY.INLINE_BLOCK,
-  CSS.DISPLAY.INLINE_FLEX,
-  CSS.AXIS1.AROUND,
-  CSS.AXIS1.BETWEEN,
-  CSS.AXIS1.CENTER,
-  CSS.AXIS1.END,
-  CSS.AXIS1.START,
-  CSS.AXIS2.AROUND,
-  CSS.AXIS2.CENTER,
-  CSS.AXIS2.END,
-  CSS.AXIS2.START,
-  CSS.FLEX.DIRECTION.COLUMN,
-  CSS.FLEX.DIRECTION.COLUMN_REVERSE,
-  CSS.FLEX.DIRECTION.ROW,
-  CSS.FLEX.DIRECTION.ROW_REVERSE,
-  CSS.GAP.ONE,
-  CSS.GAP.HALF,
-  CSS.GAP.QUARTER,
-  CSS.GAP.TWO,
-  CSS.GAP.FOUR,
-  CSS.FLEX.BASIS.ZERO,
-  CSS.FLEX.GROW.ON,
-  CSS.FLEX.GROW.OFF,
-  CSS.FLEX.SHRINK.ON,
-  CSS.FLEX.SHRINK.OFF,
-  CSS.FLEX.WRAP,
-  CSS.POSITION.ABSOLUTE,
-  CSS.POSITION.FIXED,
-  CSS.POSITION.RELATIVE,
-  CSS.POSITION.STICKY,
-  CSS.POSITIONING.TOP,
-  CSS.POSITIONING.RIGHT,
-  CSS.POSITIONING.BOTTOM,
-  CSS.POSITIONING.LEFT,
-  CSS.BOX_SIZING.BORDER_BOX,
-  CSS.BOX_SIZING.CONTENT_BOX,
-  CSS.MARGIN.FULL.ZERO,
-  CSS.MARGIN.FULL.ONE,
-  CSS.MARGIN.FULL.HALF,
-  CSS.MARGIN.FULL.QUARTER,
-  CSS.MARGIN.FULL.TWO,
-  CSS.MARGIN.FULL.FOUR,
-  CSS.MARGIN.Y.ZERO,
-  CSS.MARGIN.Y.ONE,
-  CSS.MARGIN.Y.HALF,
-  CSS.MARGIN.Y.QUARTER,
-  CSS.MARGIN.Y.TWO,
-  CSS.MARGIN.Y.FOUR,
-  CSS.MARGIN.TOP.ZERO,
-  CSS.MARGIN.TOP.ONE,
-  CSS.MARGIN.TOP.HALF,
-  CSS.MARGIN.TOP.QUARTER,
-  CSS.MARGIN.TOP.TWO,
-  CSS.MARGIN.TOP.FOUR,
-  CSS.MARGIN.X.ZERO,
-  CSS.MARGIN.X.ONE,
-  CSS.MARGIN.X.HALF,
-  CSS.MARGIN.X.QUARTER,
-  CSS.MARGIN.X.TWO,
-  CSS.MARGIN.X.FOUR,
-  CSS.MARGIN.X.AUTO,
-  CSS.MARGIN.RIGHT.ZERO,
-  CSS.MARGIN.RIGHT.ONE,
-  CSS.MARGIN.RIGHT.HALF,
-  CSS.MARGIN.RIGHT.QUARTER,
-  CSS.MARGIN.RIGHT.TWO,
-  CSS.MARGIN.RIGHT.FOUR,
-  CSS.MARGIN.RIGHT.AUTO,
-  CSS.MARGIN.BOTTOM.ZERO,
-  CSS.MARGIN.BOTTOM.ONE,
-  CSS.MARGIN.BOTTOM.HALF,
-  CSS.MARGIN.BOTTOM.QUARTER,
-  CSS.MARGIN.BOTTOM.TWO,
-  CSS.MARGIN.BOTTOM.FOUR,
-  CSS.MARGIN.LEFT.ZERO,
-  CSS.MARGIN.LEFT.ONE,
-  CSS.MARGIN.LEFT.HALF,
-  CSS.MARGIN.LEFT.QUARTER,
-  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.RADIUS.ONE,
-  CSS.BORDER.RADIUS.HALF,
-  CSS.BORDER.RADIUS.QUARTER,
-  CSS.BORDER.RADIUS.FULL,
-  CSS.PADDING.FULL.ZERO,
-  CSS.PADDING.FULL.ONE,
-  CSS.PADDING.FULL.HALF,
-  CSS.PADDING.FULL.QUARTER,
-  CSS.PADDING.FULL.TWO,
-  CSS.PADDING.FULL.FOUR,
-  CSS.PADDING.Y.ZERO,
-  CSS.PADDING.Y.ONE,
-  CSS.PADDING.Y.HALF,
-  CSS.PADDING.Y.QUARTER,
-  CSS.PADDING.Y.TWO,
-  CSS.PADDING.Y.FOUR,
-  CSS.PADDING.TOP.ZERO,
-  CSS.PADDING.TOP.ONE,
-  CSS.PADDING.TOP.HALF,
-  CSS.PADDING.TOP.QUARTER,
-  CSS.PADDING.TOP.TWO,
-  CSS.PADDING.TOP.FOUR,
-  CSS.PADDING.X.ZERO,
-  CSS.PADDING.X.ONE,
-  CSS.PADDING.X.HALF,
-  CSS.PADDING.X.QUARTER,
-  CSS.PADDING.X.TWO,
-  CSS.PADDING.X.FOUR,
-  CSS.PADDING.RIGHT.ZERO,
-  CSS.PADDING.RIGHT.ONE,
-  CSS.PADDING.RIGHT.HALF,
-  CSS.PADDING.RIGHT.QUARTER,
-  CSS.PADDING.RIGHT.TWO,
-  CSS.PADDING.RIGHT.FOUR,
-  CSS.PADDING.BOTTOM.ZERO,
-  CSS.PADDING.BOTTOM.ONE,
-  CSS.PADDING.BOTTOM.HALF,
-  CSS.PADDING.BOTTOM.QUARTER,
-  CSS.PADDING.BOTTOM.TWO,
-  CSS.PADDING.BOTTOM.FOUR,
-  CSS.PADDING.LEFT.ZERO,
-  CSS.PADDING.LEFT.ONE,
-  CSS.PADDING.LEFT.HALF,
-  CSS.PADDING.LEFT.QUARTER,
-  CSS.PADDING.LEFT.TWO,
-  CSS.PADDING.LEFT.FOUR,
-  CSS.WIDTH.MAX_FULL,
-  CSS.WIDTH.ZERO,
-  CSS.WIDTH.FULL,
-  CSS.HEIGHT.ZERO,
-  CSS.HEIGHT.FULL,
-  CSS.ALIGN.Y.MIDDLE,
-  CSS.BREAK_WORD,
-  CSS.CURSOR.NOT_ALLOWED,
-  CSS.CURSOR.POINTER,
-  CSS.CURSOR.TEXT,
-  CSS.FONT.SIZE.TWELVE,
-  CSS.FONT.SIZE.FOURTEEN,
-  CSS.FONT.SIZE.SIXTEEN,
-  CSS.FONT.SIZE.TWENTY,
-  CSS.FONT.SIZE.TWENTY_FOUR,
-  CSS.FONT.SIZE.THIRTY_TWO,
-  CSS.FONT.WEIGHT.FOUR_HUNDRED,
-  CSS.FONT.WEIGHT.FIVE_HUNDRED,
-  CSS.FONT.WEIGHT.SIX_HUNDRED,
-  CSS.FONT.WEIGHT.SEVEN_HUNDRED,
-  CSS.LIST_BULLETS.OFF,
-  CSS.OBJECT.CENTER,
-  CSS.OBJECT.CONTAIN,
-  CSS.OBJECT.COVER,
-  CSS.OBJECT.SCALE_DOWN,
-  CSS.POINTER_EVENTS.ON,
-  CSS.POINTER_EVENTS.OFF,
-  CSS.SCROLLBAR.OFF,
-  CSS.SHADOW.BOTTOM,
-  CSS.SHADOW.TOP,
-  CSS.SNAP.ON,
-  CSS.SNAP_ALIGN.START,
-  CSS.ALIGN.X.LEFT,
-  CSS.ALIGN.X.CENTER,
-  CSS.ALIGN.X.RIGHT,
-  CSS.TEXT_TRANSFORM.LOWER,
-  CSS.TEXT_TRANSFORM.NONE,
-  CSS.TEXT_TRANSFORM.UPPER,
-  CSS.UNDERLINE.HOVER,
-  CSS.UNDERLINE.OFF,
-  CSS.UNDERLINE.ON,
-  CSS.VISIBILITY.ON,
-  CSS.VISIBILITY.OFF,
-  CSS.WHITESPACE_WRAP.OFF,
-  CSS.OVERFLOW.XY.AUTO,
-  CSS.OVERFLOW.XY.HIDDEN,
-  CSS.OVERFLOW.X.AUTO,
-  CSS.OVERFLOW.X.HIDDEN,
-  CSS.OVERFLOW.X.SCROLL,
-  CSS.OVERFLOW.Y.AUTO,
-  CSS.OVERFLOW.Y.HIDDEN,
-  CSS.Z_INDEX.ONE,
-] as const;

package/src/utilities/storybook.ts

@@ -76,6 +76,16 @@ export const click = {
   },
 };
 
+export const close = {
+  control: 'text',
+  description: 'JS code or function to execute on close event',
+  isEmit: true,
+  table: {
+    defaultValue: { summary: 'None' },
+    type: { summary: '() => void' },
+  },
+};
+
 export const dataTrack = {
   control: 'text',
   description: 'Data attribute for external tracking',
@@ -91,6 +101,8 @@ export const disabledArgType = {
   },
 };
 
+export const isProduction = process.env.NODE_ENV === 'production';
+
 export const doSomething = () => {
   alert('Did something.');
 };

package/src/utilities/viewport.ts

@@ -49,13 +49,14 @@ export const setScrollLock = async (isLocked: boolean) => {
   }
 };
 
-export const TOP_LAYER_ID = 'tideTopLayer';
+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/integration.md

@@ -1,79 +0,0 @@
-# TIDE Prod Integration
-1. Install dependency from Node Package Manager Registry:
-
-   `npm install tide-design-system`
-
-2. Use CSS utilities:
-   1. Import global utilities:
-
-      `import 'tide-design-system/css';`
-
-   2. Import realm-specific utilities (where applicable):
-
-      `import 'tide-design-system/css/realm/aero';`
-
-      `import 'tide-design-system/css/realm/atv';`
-
-      `import 'tide-design-system/css/realm/boatmart';`
-
-      `import 'tide-design-system/css/realm/cycle';`
-
-      `import 'tide-design-system/css/realm/equipment';`
-
-      `import 'tide-design-system/css/realm/pwc';`
-
-      `import 'tide-design-system/css/realm/snow';`
-
-      `import 'tide-design-system/css/realm/truck';`
-
-   3. Import TypeScript constant:
-
-      `import { CSS } from 'tide-design-system';`
-
-   4. Leverage:
-
-      `<div :class="[CSS.POSITION.ABSOLUTE]" />`
-
-   5. Via CSS directly (only when markup is outside a JS framework):
-
-      `<div class="tide-position-absolute" />`
-
-   6. Apply classes responsively:
-   
-      `<div :class=[CSS.DISPLAY.NONE, withBreakpoint([CSS.DISPLAY.FLEX], BREAKPOINT.MD)] />`
-
-3. Use TypeScript types:
-   1. Import:
-
-      `import type { Priority } from 'tide-design-system';`
-
-   2. Leverage:
-
-      ```
-      type Sample = {
-         ...
-         priority: Priority;
-      };
-      ```
-
-      ```
-      const setPriority = (priority: Priority) => {...};
-      ```
-
-4. Leverage TypeScript constants:
-   1. Import:
-
-      `import { PRIORITY } from 'tide-design-system';`
-
-   2. Leverage:
-
-      `<div :priority="PRIORITY.QUATERNARY">Sample</div>`
-
-5. Use Vue 3 component(s):
-   1. Import:
-
-      `import { TideButton } from 'tide-design-system';`
-
-   2. Leverage:
-
-      `<TideButton label="Sample" />`