tide-design-system 2.2.9 → 2.2.11

package/src/components/TideChipAction.vue

@@ -1,22 +1,28 @@
 <script lang="ts" setup>
   import TideIcon from '@/components/TideIcon.vue';
+  import { ELEMENT } from '@/types/Element';
   import { ICON } from '@/types/Icon';
   import { CSS } from '@/types/Styles';
   import { TARGET } from '@/types/Target';
 
+  import type { Element } from '@/types/Element';
+
   type Props = {
-    href: string;
+    element: Element;
+    href?: string;
     isNewTab?: boolean;
     label: string;
   };
 
   const props = withDefaults(defineProps<Props>(), {
+    element: ELEMENT.LINK,
+    href: undefined,
     isNewTab: false,
   });
 </script>
 
 <template>
-  <a
+  <component
     :class="[
       'tide-chip-action',
       CSS.DISPLAY.FLEX,
@@ -33,11 +39,12 @@
     ]"
     :href="props.href"
     :target="props.isNewTab ? TARGET.BLANK : TARGET.SELF"
+    :is="element"
   >
     <TideIcon :icon="ICON.SEARCH" />
 
     <span>{{ props.label }}</span>
-  </a>
+  </component>
 </template>
 
 <style scoped>

package/src/components/TideImage.vue

@@ -1,14 +1,17 @@
 <script lang="ts" setup>
-  import { ref } from 'vue';
+  import { computed, ref } from 'vue';
 
+  import { OBJECT_FIT } from '@/types/Image';
   import { CSS } from '@/types/Styles';
 
+  import type { ObjectFit } from '@/types/Image';
   import type { Source } from '@/types/Source';
 
   type Props = {
     alt: string;
     height?: string;
     isLazy?: boolean;
+    objectFit?: ObjectFit;
     sources?: Source[];
     src?: string;
     width?: string;
@@ -18,6 +21,7 @@
     alt: '',
     height: undefined,
     isLazy: true,
+    objectFit: OBJECT_FIT.COVER,
     sources: () => [],
     src: undefined,
     width: undefined,
@@ -28,6 +32,19 @@
 
   const imageDefault = 'https://cdn-static.tilabs.io/marketplace/common/image-coming-soon.svg';
 
+  const objectFitClassName = computed<string>(() => {
+    switch (props.objectFit) {
+      case OBJECT_FIT.CONTAIN:
+        return CSS.OBJECT.CONTAIN;
+      case OBJECT_FIT.COVER:
+        return CSS.OBJECT.COVER;
+      case OBJECT_FIT.SCALE_DOWN:
+        return CSS.OBJECT.SCALE_DOWN;
+      default:
+        return OBJECT_FIT.COVER;
+    }
+  });
+
   const setImageFromDefault = () => {
     const currentSrc = img.value?.currentSrc;
     const pictureSource = picture.value?.querySelector(`source[srcset="${currentSrc}"]`);
@@ -62,7 +79,7 @@
 
     <img
       :alt="alt"
-      :class="[CSS.WIDTH.FULL, CSS.HEIGHT.FULL, CSS.OBJECT.CENTER, CSS.OBJECT.COVER]"
+      :class="[CSS.WIDTH.FULL, CSS.HEIGHT.FULL, CSS.OBJECT.CENTER, objectFitClassName]"
       :fetchpriority="isLazy ? undefined : 'high'"
       :loading="props.isLazy ? 'lazy' : 'eager'"
       ref="img"

package/src/components/TideImageBackground.vue

@@ -1,5 +1,6 @@
 <script lang="ts" setup>
   import TideImage from '@/components/TideImage.vue';
+  import { OBJECT_FIT } from '@/types/Image';
   import { CSS } from '@/types/Styles';
 
   import type { Source } from '@/types/Source';
@@ -20,7 +21,7 @@
 </script>
 
 <template>
-  <div :class="[CSS.POSITION.RELATIVE, CSS.OVERFLOW.XY.HIDDEN, CSS.ISOLATION.ISOLATE]">
+  <div :class="['tide-image-background', CSS.POSITION.RELATIVE, CSS.OVERFLOW.XY.HIDDEN, CSS.ISOLATION.ISOLATE]">
     <div
       :class="[
         CSS.POSITION.ABSOLUTE,
@@ -32,11 +33,12 @@
       ]"
     >
       <TideImage
-        :class="['tide-image-background', CSS.WIDTH.FULL, CSS.HEIGHT.FULL]"
+        :alt="props.alt"
+        :class="[CSS.WIDTH.FULL, CSS.HEIGHT.FULL]"
         :is-lazy="props.isLazy"
+        :object-fit="OBJECT_FIT.COVER"
         :sources="props.sources"
         :src="props.src"
-        alt="props.alt"
       />
     </div>
 
@@ -44,14 +46,8 @@
   </div>
 </template>
 
-<style scoped lang="scss">
-  .tide-image-background {
+<style scoped>
+  :deep(.tide-image) {
     z-index: -1;
   }
-
-  :deep(.tide-image-background img) {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-  }
 </style>

package/src/components/TideModal.vue

@@ -173,7 +173,7 @@
   }
   .tide-modal[open]::backdrop {
     background-color: var(--tide-transparent-400);
-    backdrop-filter: blur(4px);
+    backdrop-filter: var(--tide-bg-blur);
   }
   @starting-style {
     .tide-modal[open] {
@@ -182,7 +182,7 @@
     }
     .tide-modal[open]::backdrop {
       background-color: transparent;
-      backdrop-filter: blur(4px);
+      backdrop-filter: var(--tide-bg-blur);
     }
   }
   .tide-modal-body {

package/src/components/TidePopover.vue

@@ -142,7 +142,7 @@
           CSS.SHADOW.BOTTOM,
         ]"
         ref="floating"
-        :style="{ ...floatingStyles, maxWidth: `calc(100% - ${props.offset * 2}px)` }"
+        :style="{ ...floatingStyles }"
         v-show="isShowPopover"
       >
         <slot />
@@ -152,6 +152,9 @@
 </template>
 
 <style scoped>
+  .tide-popover {
+    max-width: 256px;
+  }
   .v-enter-from,
   .v-leave-to {
     opacity: 0;

package/src/components/TideSheet.vue

@@ -0,0 +1,166 @@
+<script lang="ts" setup>
+  import { onBeforeMount, onMounted, ref, watch } from 'vue';
+
+  import TideButtonIcon from '@/components/TideButtonIcon.vue';
+  import { ICON } from '@/types/Icon';
+  import { PRIORITY } from '@/types/Priority';
+  import { CSS } from '@/types/Styles';
+  import { TOP_LAYER_ID, initFauxTopLayer, setScrollLock } from '@/utilities/viewport';
+
+  import TideDivider from './TideDivider.vue';
+
+  import type { Ref } from 'vue';
+
+  type Props = {
+    isOpen: boolean;
+    isBackButton?: boolean;
+  };
+  const props = defineProps<Props>();
+
+  type Emits = {
+    (e: 'back'): void;
+    (e: 'close'): void;
+  };
+
+  const emit = defineEmits<Emits>();
+
+  const dialogElement: Ref<HTMLDialogElement | null> = ref(null);
+
+  const triggerNativeDialogOpen = () => {
+    dialogElement.value?.showModal();
+  };
+
+  const triggerNativeDialogClose = () => {
+    dialogElement.value?.close();
+  };
+
+  watch(
+    () => props.isOpen,
+    (newValue) => {
+      if (!dialogElement.value) return;
+      if (newValue) {
+        triggerNativeDialogOpen();
+      } else {
+        triggerNativeDialogClose();
+      }
+      setScrollLock(newValue);
+    }
+  );
+
+  onBeforeMount(() => {
+    initFauxTopLayer();
+  });
+
+  onMounted(() => {
+    if (props.isOpen) {
+      triggerNativeDialogOpen();
+    }
+  });
+</script>
+
+<template>
+  <Teleport :to="`#${TOP_LAYER_ID}`">
+    <dialog
+      :class="['tide-sheet', CSS.BG.INITIAL, CSS.HEIGHT.FULL, CSS.WIDTH.FULL, CSS.OVERFLOW.XY.HIDDEN]"
+      ref="dialogElement"
+      @click.self="emit('close')"
+      @close="emit('close')"
+    >
+      <div
+        :class="[
+          'tide-sheet-body',
+          CSS.BG.SURFACE.DEFAULT,
+          CSS.DISPLAY.FLEX,
+          CSS.FLEX.DIRECTION.COLUMN,
+          CSS.HEIGHT.FULL,
+          CSS.OVERFLOW.XY.HIDDEN,
+          CSS.WIDTH.FULL,
+        ]"
+      >
+        <header :class="[CSS.DISPLAY.FLEX, CSS.PADDING.X.ONE, CSS.PADDING.TOP.ONE]">
+          <TideButtonIcon
+            :class="[CSS.FLEX.GROW.OFF, CSS.FLEX.SHRINK.OFF]"
+            :icon="ICON.CHEVRON_LEFT"
+            :priority="PRIORITY.QUATERNARY"
+            @click="emit('back')"
+            v-if="isBackButton"
+          />
+
+          <TideButtonIcon
+            :class="[CSS.FLEX.GROW.OFF, CSS.FLEX.SHRINK.OFF, CSS.MARGIN.LEFT.AUTO]"
+            :icon="ICON.CLOSE"
+            :priority="PRIORITY.QUATERNARY"
+            @click="triggerNativeDialogClose"
+          />
+        </header>
+
+        <TideDivider />
+
+        <div
+          :class="[
+            'tide-sheet-content',
+            CSS.DISPLAY.GRID,
+            CSS.OVERFLOW.Y.AUTO,
+            CSS.OVERFLOW.X.HIDDEN,
+            CSS.WIDTH.FULL,
+            CSS.PADDING.BOTTOM.ONE,
+          ]"
+        >
+          <slot />
+        </div>
+      </div>
+    </dialog>
+  </Teleport>
+</template>
+
+<style scoped>
+  .tide-sheet {
+    --sheet-padding-x: var(--tide-spacing-1);
+    max-width: unset;
+    max-height: unset;
+    justify-items: right;
+    display: none;
+    transition: all var(--tide-animate) allow-discrete;
+    transform: translateX(100%);
+  }
+
+  .tide-sheet[open] {
+    display: grid;
+    transform: translateX(0%);
+  }
+
+  .tide-sheet::backdrop {
+    background-color: transparent;
+    transition: all var(--tide-animate) allow-discrete;
+    backdrop-filter: blur(0px);
+  }
+
+  .tide-sheet[open]::backdrop {
+    background-color: var(--tide-transparent-400);
+    backdrop-filter: var(--tide-bg-blur);
+  }
+
+  .tide-sheet-body {
+    max-width: min(calc(100vw - var(--tide-spacing-2)), 311px);
+  }
+
+  .tide-sheet-content {
+    grid-template-columns: var(--sheet-padding-x) 1fr var(--sheet-padding-x);
+  }
+
+  :where(.tide-sheet-content):deep(> :where(*)) {
+    grid-column: 2;
+  }
+
+  @starting-style {
+    .tide-sheet[open] {
+      display: grid;
+      transform: translateX(100%);
+    }
+
+    .tide-sheet[open]::backdrop {
+      background-color: transparent;
+      backdrop-filter: var(--tide-bg-blur);
+    }
+  }
+</style>

package/src/stories/FoundationsBorder.stories.ts

@@ -5,6 +5,7 @@ import type { StoryContext } from '@storybook/vue3';
 
 const BORDER_RADIUS = prependNoneAsEmpty(STYLES.BORDER_RADIUS);
 const BORDER_SIDE = prependNoneAsEmpty(STYLES.BORDER_SIDE);
+const BORDER_STYLE = prependNoneAsEmpty(STYLES.BORDER_STYLE);
 const BORDER_WIDTH = prependNoneAsEmpty(STYLES.BORDER_WIDTH);
 
 const formatArgs = (args: any) => {
@@ -16,7 +17,7 @@ const formatArgs = (args: any) => {
 const formatClassNames = (args: any) => {
   const classNames: string[] = [];
 
-  if (args.borderSide === BORDER_SIDE.Full && args.borderWidth !== BORDER_WIDTH.None && args.borderRadius) {
+  if (args.borderSide === BORDER_SIDE.Full && args.borderWidth && args.borderRadius) {
     classNames.push(args.borderRadius);
   }
 
@@ -24,6 +25,10 @@ const formatClassNames = (args: any) => {
     classNames.push(`${args.borderSide}-${args.borderWidth}`);
   }
 
+  if (args.borderSide && args.borderWidth && args.borderStyle) {
+    classNames.push(args.borderStyle);
+  }
+
   return classNames;
 };
 
@@ -74,6 +79,12 @@ export default {
       if: { arg: 'borderWidth', neq: BORDER_WIDTH.None },
       name: 'Border Side',
     },
+    borderStyle: {
+      ...formatArgType({ BORDER_STYLE }),
+      description: 'Applies a border style',
+      if: { arg: 'borderWidth', neq: BORDER_STYLE.None },
+      name: 'Border Style',
+    },
     borderWidth: {
       ...formatArgType({ BORDER_WIDTH }),
       description: 'Applies a border width',
@@ -83,6 +94,7 @@ export default {
   args: {
     borderRadius: BORDER_RADIUS.None,
     borderSide: BORDER_SIDE.None,
+    borderStyle: BORDER_STYLE.None,
     borderWidth: BORDER_WIDTH.None,
   },
   parameters,
@@ -133,6 +145,15 @@ export const BorderFull1px = {
   name: 'Border Full 1px',
 };
 
+export const BorderFullDashed1px = {
+  args: {
+    borderSide: BORDER_SIDE.Full,
+    borderStyle: BORDER_STYLE.Dashed,
+    borderWidth: BORDER_WIDTH['1px'],
+  },
+  name: 'Border Full Dashed 1px',
+};
+
 export const BorderTop2px = {
   args: {
     borderSide: BORDER_SIDE.Top,
@@ -173,6 +194,15 @@ export const BorderFull2px = {
   name: 'Border Full 2px',
 };
 
+export const BorderFullDashed2px = {
+  args: {
+    borderSide: BORDER_SIDE.Full,
+    borderStyle: BORDER_STYLE.Dashed,
+    borderWidth: BORDER_WIDTH['2px'],
+  },
+  name: 'Border Full Dashed 1px',
+};
+
 export const RadiusQuarter = {
   args: {
     borderRadius: BORDER_RADIUS['0.25 REM'],

package/src/stories/FoundationsColor.stories.ts

@@ -1,5 +1,12 @@
+import TideIcon from '@/components/TideIcon.vue';
 import { CSS } from '@/types/Styles';
-import { flatten, formatArgType, getConstantsByValues, prependNoneAsEmpty } from '@/utilities/storybook';
+import {
+  disabledArgType,
+  flatten,
+  formatArgType,
+  getConstantsByValues,
+  prependNoneAsEmpty,
+} from '@/utilities/storybook';
 
 import type { StoryContext } from '@storybook/vue3';
 
@@ -47,10 +54,11 @@ const parameters = {
 };
 
 const render = (args: any) => ({
+  components: { TideIcon },
   setup() {
     return formatArgs(args);
   },
-  template: '<div class="tide-display-inline-block tide-padding-1" v-bind="args">Demo</div>',
+  template: `<div class="tide-display-inline-block tide-padding-1" v-bind="args">${args.default}</div>`,
   updated() {
     return formatArgs(args);
   },
@@ -76,6 +84,7 @@ export default {
         type: { summary: 'CSS.BORDER.COLOR' },
       },
     },
+    default: disabledArgType,
     fontColor: {
       ...formatArgType({ COLOR_FONT }),
       description: 'Applies a font color',
@@ -89,6 +98,7 @@ export default {
   args: {
     backgroundColor: COLOR_BACKGROUND.None,
     borderColor: COLOR_BORDER.None,
+    default: 'Demo',
     fontColor: COLOR_FONT.None,
   },
   parameters,
@@ -102,7 +112,6 @@ export const Default = {};
 export const SurfaceAccent = {
   args: {
     backgroundColor: COLOR_BACKGROUND['SURFACE.ACCENT'],
-    fontColor: COLOR_FONT['SURFACE.DEFAULT'],
   },
 };
 
@@ -116,41 +125,180 @@ export const SurfaceBrand = {
 export const SurfaceGradient = {
   args: {
     backgroundColor: COLOR_BACKGROUND['SURFACE.GRADIENT'],
-    fontColor: COLOR_FONT['SURFACE.DEFAULT'],
   },
 };
 
 export const SurfaceVariant = {
   args: {
     backgroundColor: COLOR_BACKGROUND['SURFACE.VARIANT'],
-    fontColor: COLOR_FONT['SURFACE.DEFAULT'],
   },
 };
 
-export const GlobalSurfaceError = {
+export const GlobalPrimaryBlue = {
+  args: {
+    backgroundColor: COLOR_BACKGROUND['GLOBAL.PRIMARY.BLUE'],
+    default: `<TideIcon class="tide-font-on-surface-inverse" icon="ai-description" />`,
+  },
+};
+
+export const GlobalPrimaryGreen = {
+  args: {
+    backgroundColor: COLOR_BACKGROUND['GLOBAL.PRIMARY.GREEN'],
+    default: `<TideIcon class="tide-font-on-surface-inverse" icon="ai-description" />`,
+  },
+};
+
+export const GlobalPrimaryLime = {
+  args: {
+    backgroundColor: COLOR_BACKGROUND['GLOBAL.PRIMARY.LIME'],
+    default: `<TideIcon class="tide-font-on-surface-inverse" icon="ai-description" />`,
+  },
+};
+
+export const GlobalPrimaryOrange = {
+  args: {
+    backgroundColor: COLOR_BACKGROUND['GLOBAL.PRIMARY.ORANGE'],
+    default: `<TideIcon class="tide-font-on-surface-inverse" icon="ai-description" />`,
+  },
+};
+
+export const GlobalPrimaryPurple = {
+  args: {
+    backgroundColor: COLOR_BACKGROUND['GLOBAL.PRIMARY.PURPLE'],
+    default: `<TideIcon class="tide-font-on-surface-inverse" icon="ai-description" />`,
+  },
+};
+
+export const GlobalPrimaryRed = {
+  args: {
+    backgroundColor: COLOR_BACKGROUND['GLOBAL.PRIMARY.RED'],
+    default: `<TideIcon class="tide-font-on-surface-inverse" icon="ai-description" />`,
+  },
+};
+
+export const GlobalPrimarySalmon = {
+  args: {
+    backgroundColor: COLOR_BACKGROUND['GLOBAL.PRIMARY.SALMON'],
+    default: `<TideIcon class="tide-font-on-surface-inverse" icon="ai-description" />`,
+  },
+};
+
+export const GlobalPrimaryTeal = {
+  args: {
+    backgroundColor: COLOR_BACKGROUND['GLOBAL.PRIMARY.TEAL'],
+    default: `<TideIcon class="tide-font-on-surface-inverse" icon="ai-description" />`,
+  },
+};
+
+export const GlobalPrimaryYellow = {
+  args: {
+    backgroundColor: COLOR_BACKGROUND['GLOBAL.PRIMARY.YELLOW'],
+    default: `<TideIcon class="tide-font-on-surface-inverse" icon="ai-description" />`,
+  },
+};
+
+export const GlobalSurfaceBlue = {
+  args: {
+    backgroundColor: COLOR_BACKGROUND['GLOBAL.SURFACE.BLUE'],
+  },
+};
+
+export const GlobalSurfaceGreen = {
+  args: {
+    backgroundColor: COLOR_BACKGROUND['GLOBAL.SURFACE.GREEN'],
+  },
+};
+
+export const GlobalSurfaceLime = {
+  args: {
+    backgroundColor: COLOR_BACKGROUND['GLOBAL.SURFACE.LIME'],
+  },
+};
+
+export const GlobalSurfaceOrange = {
+  args: {
+    backgroundColor: COLOR_BACKGROUND['GLOBAL.SURFACE.ORANGE'],
+  },
+};
+
+export const GlobalSurfacePurple = {
+  args: {
+    backgroundColor: COLOR_BACKGROUND['GLOBAL.SURFACE.PURPLE'],
+  },
+};
+
+export const GlobalSurfaceRed = {
+  args: {
+    backgroundColor: COLOR_BACKGROUND['GLOBAL.SURFACE.RED'],
+  },
+};
+
+export const GlobalSurfaceSalmon = {
+  args: {
+    backgroundColor: COLOR_BACKGROUND['GLOBAL.SURFACE.SALMON'],
+  },
+};
+
+export const GlobalSurfaceTeal = {
+  args: {
+    backgroundColor: COLOR_BACKGROUND['GLOBAL.SURFACE.TEAL'],
+  },
+};
+
+export const GlobalSurfaceYellow = {
+  args: {
+    backgroundColor: COLOR_BACKGROUND['GLOBAL.SURFACE.YELLOW'],
+  },
+};
+
+export const StatusPrimaryError = {
+  args: {
+    backgroundColor: COLOR_BACKGROUND['GLOBAL.PRIMARY.ERROR'],
+    default: `<TideIcon class="tide-font-on-surface-inverse" icon="ai-description" />`,
+  },
+};
+
+export const StatusPrimaryInfo = {
+  args: {
+    backgroundColor: COLOR_BACKGROUND['GLOBAL.PRIMARY.INFO'],
+    default: `<TideIcon class="tide-font-on-surface-inverse" icon="ai-description" />`,
+  },
+};
+
+export const StatusPrimarySuccess = {
+  args: {
+    backgroundColor: COLOR_BACKGROUND['GLOBAL.PRIMARY.SUCCESS'],
+    default: `<TideIcon class="tide-font-on-surface-inverse" icon="ai-description" />`,
+  },
+};
+
+export const StatusPrimaryWarning = {
+  args: {
+    backgroundColor: COLOR_BACKGROUND['GLOBAL.PRIMARY.WARNING'],
+    default: `<TideIcon class="tide-font-on-surface-inverse" icon="ai-description" />`,
+  },
+};
+
+export const StatusSurfaceError = {
   args: {
     backgroundColor: COLOR_BACKGROUND['GLOBAL.SURFACE.ERROR'],
-    fontColor: COLOR_FONT['SURFACE.DEFAULT'],
   },
 };
 
-export const GlobalSurfaceInfo = {
+export const StatusSurfaceInfo = {
   args: {
     backgroundColor: COLOR_BACKGROUND['GLOBAL.SURFACE.INFO'],
-    fontColor: COLOR_FONT['SURFACE.DEFAULT'],
   },
 };
 
-export const GlobalSurfaceSuccess = {
+export const StatusSurfaceSuccess = {
   args: {
     backgroundColor: COLOR_BACKGROUND['GLOBAL.SURFACE.SUCCESS'],
-    fontColor: COLOR_FONT['SURFACE.DEFAULT'],
   },
 };
 
-export const GlobalSurfaceWarning = {
+export const StatusSurfaceWarning = {
   args: {
     backgroundColor: COLOR_BACKGROUND['GLOBAL.SURFACE.WARNING'],
-    fontColor: COLOR_FONT['SURFACE.DEFAULT'],
   },
 };

package/src/stories/FoundationsTypography.stories.ts

@@ -105,7 +105,7 @@ export const Headline2 = {
 
 export const Headline3 = {
   args: {
-    type: TYPOGRAPHY['Headline 1'],
+    type: TYPOGRAPHY['Headline 3'],
   },
 };
 
@@ -117,7 +117,7 @@ export const Title1 = {
 
 export const Title2 = {
   args: {
-    type: TYPOGRAPHY['Title 1'],
+    type: TYPOGRAPHY['Title 2'],
   },
 };
 
@@ -129,7 +129,7 @@ export const Body1 = {
 
 export const Body2 = {
   args: {
-    type: TYPOGRAPHY['Body 1'],
+    type: TYPOGRAPHY['Body 2'],
   },
 };