tide-design-system 2.2.3 → 2.2.5

package/dist/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/package.json

@@ -61,7 +61,7 @@
   "main": "dist/tide-design-system.cjs",
   "module": "dist/tide-design-system.esm.js",
   "types": "dist/tide-design-system.esm.d.ts",
-  "version": "2.2.3",
+  "version": "2.2.5",
   "dependencies": {
     "@floating-ui/vue": "^1.1.6"
   }

package/src/assets/css/grid-layout.css

@@ -4,38 +4,27 @@
 }
 
 .tide-grid-layout {
-  --tide-max-content-width:   var(--tide-1232px);
-  --tide-column-count:        12;
-  --tide-column-width:        minmax(0, calc((var(--tide-max-content-width) - var(--tide-gap-count) * var(--tide-gap-width)) / var(--tide-column-count)));
-  --tide-gap-count:           calc(var(--tide-column-count) - 1);
-  --tide-gap-width:           var(--tide-spacing-1);
-  --tide-gutter-width:        var(--tide-spacing-1);
-  --tide-gutter-width-offset: calc(var(--tide-gutter-width) - var(--tide-gap-width));
+  --tide-max-content-width: var(--tide-1232px);
+  --tide-column-width:      minmax(0, var(--tide-max-content-width));
+  --tide-gutter-width:      var(--tide-spacing-1);
 
   display: grid;
   grid-auto-rows: min-content;
   grid-template-columns:
-    minmax(var(--tide-gutter-width-offset), 1fr)
-    repeat(var(--tide-column-count), var(--tide-column-width))
-    minmax(var(--tide-gutter-width-offset), 1fr);
-  gap: var(--tide-spacing-1) var(--tide-gap-width);
+    minmax(var(--tide-gutter-width), 1fr)
+    var(--tide-column-width)
+    minmax(var(--tide-gutter-width), 1fr);
 }
 
 @media (min-width: 768px) {
-  .tide-grid-layout {
-    --tide-gutter-width: var(--tide-spacing-2);
-  }
+  .tide-grid-layout {--tide-gutter-width: var(--tide-spacing-2);}
 }
 
-@media (min-width: 992px) {
-  .tide-grid-layout {
-    --tide-gap-width: var(--tide-spacing-2);
-  }
+@media (min-width: 1232px) {
+  .tide-grid-layout {--tide-gutter-width: var(--tide-spacing-4);}
 }
 
-.tide-grid-xl {
-  --tide-max-content-width: var(--tide-1920px);
-}
+.tide-grid-xl {--tide-max-content-width: var(--tide-1920px);}
 
 .tide-grid-layout > *,
 .tide-grid-item {
@@ -43,31 +32,3 @@
 }
 
 .tide-fluid {grid-column: 1 / -1;}
-
-.tide-start-0  {grid-column-start: 1;}
-.tide-start-1  {grid-column-start: 2;}
-.tide-start-2  {grid-column-start: 3;}
-.tide-start-3  {grid-column-start: 4;}
-.tide-start-4  {grid-column-start: 5;}
-.tide-start-5  {grid-column-start: 6;}
-.tide-start-6  {grid-column-start: 7;}
-.tide-start-7  {grid-column-start: 8;}
-.tide-start-8  {grid-column-start: 9;}
-.tide-start-9  {grid-column-start: 10;}
-.tide-start-10 {grid-column-start: 11;}
-.tide-start-11 {grid-column-start: 12;}
-.tide-start-12 {grid-column-start: 13;}
-
-.tide-end-1  {grid-column-end: 3;}
-.tide-end-2  {grid-column-end: 4;}
-.tide-end-3  {grid-column-end: 5;}
-.tide-end-4  {grid-column-end: 6;}
-.tide-end-5  {grid-column-end: 7;}
-.tide-end-6  {grid-column-end: 8;}
-.tide-end-7  {grid-column-end: 9;}
-.tide-end-8  {grid-column-end: 10;}
-.tide-end-9  {grid-column-end: 11;}
-.tide-end-10 {grid-column-end: 12;}
-.tide-end-11 {grid-column-end: 13;}
-.tide-end-12 {grid-column-end: 14;}
-.tide-end-13 {grid-column-end: 15;}

package/src/assets/css/utilities-lg.css

@@ -370,17 +370,10 @@
 	.lg-tide-text-transform-none  {text-transform: none;}
 	.lg-tide-text-transform-upper {text-transform: uppercase;}
 
-	.lg-tide-underline,
-	.lg-tide-underline:hover,
-	.lg-tide-underline-hover:hover {
-	  text-decoration: underline;
-	}
-
-	.lg-tide-underline-none,
-	.lg-tide-underline-none:hover,
-	.lg-tide-underline-hover {
-	  text-decoration: none;
-	}
+	.lg-tide-underline                  {text-decoration: underline;}
+	.lg-tide-underline-none             {text-decoration: none;}
+	.lg-tide-underline-hover:hover      {text-decoration: underline;}
+	.lg-tide-underline-hover-none:hover {text-decoration: none;}
 
 	.lg-tide-visible      {visibility: visible;}
 	.lg-tide-visible-none {visibility: hidden;}

package/src/assets/css/utilities-md.css

@@ -1,5 +1,4 @@
 /* Medium breakpoint */
-@media (min-width: 992px) {}
 @media (min-width: 992px) {
 	/* Reusable CSS Utility Library */
 	/* Position */
@@ -372,17 +371,10 @@
 	.md-tide-text-transform-none  {text-transform: none;}
 	.md-tide-text-transform-upper {text-transform: uppercase;}
 
-	.md-tide-underline,
-	.md-tide-underline:hover,
-	.md-tide-underline-hover:hover {
-	  text-decoration: underline;
-	}
-
-	.md-tide-underline-none,
-	.md-tide-underline-none:hover,
-	.md-tide-underline-hover {
-	  text-decoration: none;
-	}
+	.md-tide-underline                  {text-decoration: underline;}
+	.md-tide-underline-none             {text-decoration: none;}
+	.md-tide-underline-hover:hover      {text-decoration: underline;}
+	.md-tide-underline-hover-none:hover {text-decoration: none;}
 
 	.md-tide-visible      {visibility: visible;}
 	.md-tide-visible-none {visibility: hidden;}

package/src/assets/css/utilities-sm.css

@@ -370,17 +370,10 @@
 	.sm-tide-text-transform-none  {text-transform: none;}
 	.sm-tide-text-transform-upper {text-transform: uppercase;}
 
-	.sm-tide-underline,
-	.sm-tide-underline:hover,
-	.sm-tide-underline-hover:hover {
-	  text-decoration: underline;
-	}
-
-	.sm-tide-underline-none,
-	.sm-tide-underline-none:hover,
-	.sm-tide-underline-hover {
-	  text-decoration: none;
-	}
+	.sm-tide-underline                  {text-decoration: underline;}
+	.sm-tide-underline-none             {text-decoration: none;}
+	.sm-tide-underline-hover:hover      {text-decoration: underline;}
+	.sm-tide-underline-hover-none:hover {text-decoration: none;}
 
 	.sm-tide-visible      {visibility: visible;}
 	.sm-tide-visible-none {visibility: hidden;}

package/src/assets/css/utilities-xl.css

@@ -370,17 +370,10 @@
 	.lg-tide-text-transform-none  {text-transform: none;}
 	.lg-tide-text-transform-upper {text-transform: uppercase;}
 
-	.lg-tide-underline,
-	.lg-tide-underline:hover,
-	.lg-tide-underline-hover:hover {
-	  text-decoration: underline;
-	}
-
-	.lg-tide-underline-none,
-	.lg-tide-underline-none:hover,
-	.lg-tide-underline-hover {
-	  text-decoration: none;
-	}
+	.xl-tide-underline                  {text-decoration: underline;}
+	.xl-tide-underline-none             {text-decoration: none;}
+	.xl-tide-underline-hover:hover      {text-decoration: underline;}
+	.xl-tide-underline-hover-none:hover {text-decoration: none;}
 
 	.lg-tide-visible      {visibility: visible;}
 	.lg-tide-visible-none {visibility: hidden;}

package/src/assets/css/utilities.css

@@ -369,17 +369,10 @@
 .tide-text-transform-none  {text-transform: none;}
 .tide-text-transform-upper {text-transform: uppercase;}
 
-.tide-underline,
-.tide-underline:hover,
-.tide-underline-hover:hover {
-  text-decoration: underline;
-}
-
-.tide-underline-none,
-.tide-underline-none:hover,
-.tide-underline-hover {
-  text-decoration: none;
-}
+.tide-underline                  {text-decoration: underline;}
+.tide-underline-none             {text-decoration: none;}
+.tide-underline-hover:hover      {text-decoration: underline;}
+.tide-underline-hover-none:hover {text-decoration: none;}
 
 .tide-visible      {visibility: visible;}
 .tide-visible-none {visibility: hidden;}

package/src/components/TideAlert.vue

@@ -1,49 +1,33 @@
 <script lang="ts" setup>
-  import { computed } from 'vue';
-
   import TideButtonIcon from '@/components/TideButtonIcon.vue';
   import TideIcon from '@/components/TideIcon.vue';
   import { ALERT } from '@/types/Alert';
   import { ICON } from '@/types/Icon';
   import { PRIORITY } from '@/types/Priority';
+  import { SIZE } from '@/types/Size';
   import { CSS } from '@/types/Styles';
 
   import type { Alert } from '@/types/Alert';
-  import type { Icon } from '@/types/Icon';
 
   type Props = {
     heading?: string;
+    isDismissible?: boolean;
     isToast?: boolean;
     type?: Alert;
   };
 
+  type Emits = {
+    (event: 'close'): void;
+  };
+
   const props = withDefaults(defineProps<Props>(), {
     heading: undefined,
+    isDismissible: true,
     isToast: false,
     type: ALERT.INFO,
   });
 
-  const icon = computed(() => {
-    let icon: Icon = ICON.INFO;
-
-    switch (props.type) {
-      case ALERT.ERROR:
-        icon = ICON.ERROR;
-        break;
-      default:
-      case ALERT.INFO:
-        icon = ICON.INFO;
-        break;
-      case ALERT.SUCCESS:
-        icon = ICON.CHECK;
-        break;
-      case ALERT.WARNING:
-        icon = ICON.WARNING;
-        break;
-    }
-
-    return icon;
-  });
+  const emit = defineEmits<Emits>();
 </script>
 
 <template>
@@ -55,17 +39,21 @@
       CSS.AXIS2.CENTER,
       CSS.BORDER.RADIUS.HALF,
       CSS.PADDING.FULL.ONE,
-      props.type === ALERT.ERROR && CSS.BG.GLOBAL.SURFACE.ERROR,
-      props.type === ALERT.INFO && CSS.BG.GLOBAL.SURFACE.INFO,
-      props.type === ALERT.SUCCESS && CSS.BG.GLOBAL.SURFACE.SUCCESS,
-      props.type === ALERT.WARNING && CSS.BG.GLOBAL.SURFACE.WARNING,
-      props.isToast ? CSS.SHADOW.BOTTOM : '',
+      !props.isToast && props.type === ALERT.ERROR ? [CSS.BG.GLOBAL.SURFACE.ERROR, CSS.BORDER.COLOR.GLOBAL.ERROR] : '',
+      !props.isToast && props.type === ALERT.INFO ? [CSS.BG.GLOBAL.SURFACE.INFO, CSS.BORDER.COLOR.GLOBAL.INFO] : '',
+      !props.isToast && props.type === ALERT.SUCCESS
+        ? [CSS.BG.GLOBAL.SURFACE.SUCCESS, CSS.BORDER.COLOR.GLOBAL.SUCCESS]
+        : '',
+      !props.isToast && props.type === ALERT.WARNING
+        ? [CSS.BG.GLOBAL.SURFACE.WARNING, CSS.BORDER.COLOR.GLOBAL.WARNING]
+        : '',
+      props.isToast ? [CSS.BG.SECONDARY, CSS.FONT.COLOR.SECONDARY, CSS.SHADOW.BOTTOM] : CSS.BORDER.LEFT.TWO,
     ]"
   >
     <div
       :class="[
         'tide-alert-icon',
-        CSS.PADDING.FULL.HALF,
+        CSS.PADDING.FULL.QUARTER,
         CSS.BORDER.RADIUS.FULL,
         CSS.FONT.COLOR.SURFACE.INVERSE,
         props.type === ALERT.ERROR && CSS.BG.GLOBAL.PRIMARY.ERROR,
@@ -73,12 +61,16 @@
         props.type === ALERT.SUCCESS && CSS.BG.GLOBAL.PRIMARY.SUCCESS,
         props.type === ALERT.WARNING && CSS.BG.GLOBAL.PRIMARY.WARNING,
       ]"
+      v-if="!props.isToast"
     >
-      <TideIcon :icon="icon" />
+      <TideIcon
+        :icon="ICON.INFORMATION"
+        :size="SIZE.SMALL"
+      />
     </div>
 
     <div :class="['tide-alert-heading', CSS.DISPLAY.FLEX, CSS.AXIS2.CENTER]">
-      <h2 :class="[CSS.FONT.ROLE.LABEL_1_SEMIBOLD, CSS.FONT.COLOR.SURFACE.DEFAULT]">
+      <h2 :class="[CSS.FONT.ROLE.LABEL_1_SEMIBOLD]">
         {{ props.heading }}
       </h2>
     </div>
@@ -87,10 +79,12 @@
       :class="['tide-alert-close', CSS.AXIS2.CENTER, CSS.FONT.COLOR.SURFACE.DEFAULT]"
       :icon="ICON.CLOSE"
       :priority="PRIORITY.QUATERNARY"
+      @click="emit('close')"
       aria-label="Close alert"
+      v-if="isDismissible"
     />
 
-    <div :class="['tide-alert-body', CSS.FONT.ROLE.LABEL_1, CSS.FONT.COLOR.SURFACE.VARIANT]">
+    <div :class="['tide-alert-body', CSS.FONT.ROLE.LABEL_1, !props.isToast && CSS.FONT.COLOR.SURFACE.VARIANT]">
       <slot />
     </div>
   </div>

package/src/components/TideBadge.vue

@@ -27,14 +27,17 @@
       CSS.BORDER.RADIUS.QUARTER,
       CSS.PADDING.Y.QUARTER,
       CSS.PADDING.X.HALF,
+      CSS.ELLIPSIS,
       CSS.FONT.ROLE.LABEL_2,
+      CSS.WHITESPACE_WRAP.OFF,
     ]"
   >
     <TideIcon
+      :class="[CSS.FLEX.SHRINK.OFF]"
       :icon="props.iconLeading"
       v-if="props.iconLeading"
     />
 
-    {{ props.label }}
+    <span :class="[CSS.ELLIPSIS]">{{ props.label }}</span>
   </div>
 </template>

package/src/components/TideBadgeTrustedPartner.vue

@@ -25,11 +25,17 @@
       CSS.GAP.QUARTER,
       CSS.PADDING.Y.QUARTER,
       CSS.PADDING.X.HALF,
+      CSS.ELLIPSIS,
       CSS.FONT.ROLE.LABEL_2,
+      CSS.WHITESPACE_WRAP.OFF,
     ]"
   >
-    <TideIcon :icon="ICON.AWARD_STAR" />
-    <div :class="[]">
+    <TideIcon
+      :class="[CSS.FLEX.SHRINK.OFF]"
+      :icon="ICON.AWARD_STAR"
+    />
+
+    <div :class="[CSS.ELLIPSIS]">
       <span>{{ props.years }} year trusted partner</span>
     </div>
   </div>

package/src/components/TideBadgeVerifiedVehicle.vue

@@ -17,11 +17,16 @@
       CSS.BORDER.RADIUS.QUARTER,
       CSS.PADDING.Y.QUARTER,
       CSS.PADDING.X.HALF,
+      CSS.ELLIPSIS,
+      CSS.WHITESPACE_WRAP.OFF,
     ]"
   >
-    <TideIcon :icon="ICON.VERIFIED" />
+    <TideIcon
+      :class="[CSS.FLEX.SHRINK.OFF]"
+      :icon="ICON.VERIFIED"
+    />
 
-    <span>Verified vehicle</span>
+    <span :class="[CSS.ELLIPSIS]">Verified vehicle</span>
   </div>
 </template>
 

package/src/components/TideButton.vue

@@ -42,7 +42,7 @@
       'tide-button',
       props.priority && `tide-button-${props.priority}`,
       props.element === ELEMENT.LINK ? [CSS.DISPLAY.INLINE_FLEX] : [CSS.DISPLAY.FLEX],
-      props.element === ELEMENT.LINK ? CSS.UNDERLINE.OFF : '',
+      props.element === ELEMENT.LINK ? CSS.UNDERLINE.REST.OFF : '',
       size === SIZE_BUTTON.SMALL && [CSS.FONT.ROLE.BUTTON_2, CSS.PADDING.X.ONE, CSS.PADDING.Y.HALF],
       size === SIZE_BUTTON.LARGE && [CSS.FONT.ROLE.BUTTON_1, CSS.PADDING.X.TWO, CSS.PADDING.Y.ONE],
       CSS.AXIS1.CENTER,

package/src/components/TideButtonIcon.vue

@@ -36,7 +36,7 @@
       props.element === ELEMENT.LINK ? 'tide-link-as-button-icon' : 'tide-button-icon',
       props.priority && `tide-button-${props.priority}`,
       [CSS.DISPLAY.FLEX, CSS.AXIS1.CENTER, CSS.AXIS2.CENTER, CSS.BORDER.RADIUS.FULL, CSS.PADDING.FULL.HALF],
-      props.element === ELEMENT.LINK ? [CSS.UNDERLINE.OFF] : '',
+      props.element === ELEMENT.LINK ? [CSS.UNDERLINE.REST.OFF] : '',
     ]"
     :disabled="props.element === ELEMENT.BUTTON && props.disabled"
     :href="props.element === ELEMENT.LINK && props.href ? props.href : undefined"

package/src/components/TideButtonPagination.vue

@@ -24,7 +24,7 @@
     :class="[
       props.element === ELEMENT_TEXT_AS_ICON.LINK ? 'tide-link-as-button-icon' : 'tide-button-icon',
       [CSS.DISPLAY.INLINE_BLOCK, CSS.BORDER.RADIUS.FULL, CSS.PADDING.FULL.HALF],
-      props.element === ELEMENT_TEXT_AS_ICON.LINK ? [CSS.UNDERLINE.OFF] : '',
+      props.element === ELEMENT_TEXT_AS_ICON.LINK ? [CSS.UNDERLINE.REST.OFF] : '',
       props.element === ELEMENT_TEXT_AS_ICON.DIV ? [CSS.CURSOR.POINTER] : '',
       [CSS.FONT.ROLE.HEADLINE_3],
     ]"