tide-design-system 2.2.4 → 2.2.5

package/src/stories/TideInputText.stories.ts

@@ -172,7 +172,7 @@ export default {
   parameters,
   render,
   tags: ['autodocs'],
-  title: 'Basic Components/TideInputText',
+  title: 'Components/TideInputText',
 };
 
 export const Demo = {};

package/src/stories/TideInputTextarea.stories.ts

@@ -110,7 +110,7 @@ export default {
   parameters,
   render,
   tags: ['autodocs'],
-  title: 'Basic Components/TideInputTextarea',
+  title: 'Components/TideInputTextarea',
 };
 
 export const Demo = {};

package/src/stories/TideLink.stories.ts

@@ -36,6 +36,7 @@ const formatSnippet = (code: string, context: StoryContext) => {
     argsWithValues.push(`:icon-trailing="${formatValueAsConstant({ iconTrailing }, argTypes)}"`);
   if (args.isNewTab !== undefined) argsWithValues.push(`:is-new-tab="${args.isNewTab}"`);
   if (args.label !== undefined) argsWithValues.push(`:label="${args.label}"`);
+  if (args.subtle !== undefined) argsWithValues.push(`:subtle="${args.subtle}"`);
   if (args.click !== undefined) argsWithValues.push(`@click="${args.click}"`);
 
   return `<TideLink ${argsWithValues.join(' ')} />`;
@@ -117,23 +118,28 @@ export default {
         type: { summary: 'string' },
       },
     },
+    subtle: {
+      ...argTypeBooleanUnrequired,
+      description: 'Hides the underline until hovered, de-emphasizing the link',
+    },
   },
   args: {
     click: 'doSomething',
     dataTrack: '',
     element: undefined,
-    href: '/',
+    href: '#',
     iconLeading: undefined,
     iconTrailing: undefined,
     isNewTab: undefined,
     label: 'Demo',
     size: undefined,
+    subtle: undefined,
   },
   component: TideLink,
   parameters,
   render,
   tags: ['autodocs'],
-  title: 'Basic Components/TideLink',
+  title: 'Components/TideLink',
 };
 
 export const Demo = {};

package/src/stories/TideModal.stories.ts

@@ -180,7 +180,7 @@ export default {
   parameters,
   render,
   tags: ['autodocs'],
-  title: 'Basic Components/TideModal',
+  title: 'Components/TideModal',
 };
 
 export const Demo = {};

package/src/stories/TidePagination.stories.ts

@@ -77,7 +77,7 @@ export default {
   parameters,
   render,
   tags: ['autodocs'],
-  title: 'Basic Components/TidePagination',
+  title: 'Components/TidePagination',
 };
 
 export const Demo = {};

package/src/stories/TidePopover.stories.ts

@@ -92,7 +92,7 @@ export default {
   parameters,
   render,
   tags: ['autodocs'],
-  title: 'Basic Components/TidePopover',
+  title: 'Components/TidePopover',
 };
 
 export const Demo = {};

package/src/stories/TideSeoLinks.stories.ts

@@ -60,7 +60,7 @@ export default {
   parameters,
   render,
   tags: ['autodocs'],
-  title: 'Basic Components/TideSeoLinks',
+  title: 'Components/TideSeoLinks',
 };
 
 export const Demo = {};

package/src/stories/TideSwitch.stories.ts

@@ -64,7 +64,7 @@ export default {
   parameters,
   render,
   tags: ['autodocs'],
-  title: 'Basic Components/TideSwitch',
+  title: 'Components/TideSwitch',
 };
 
 export const Demo = {};

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/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" />`