tide-design-system 2.5.3 → 2.5.6

package/docs/upgrading.md

@@ -83,9 +83,46 @@ watch(active, doSomething);
 
 ✅ After these changes your project should be compatible with **TIDE 2.5**.
 
+## Upgrading from 2.4.5 → 2.4.6
+
+### Summary
+
+Version **2.4.6** introduced a Nuxt SSR incompatibility. From **2.4.6**, TideModal uses Vue `<Teleport />` to place modal content in `#tide-top-layer`. This is not a problem in CSR apps, but [Nuxt SSR only provides support for one teleport target](https://nuxt.com/docs/4.x/api/components/teleports#:~:text=in%20the%20DOM.-,The,wrapper.,-Body%20Teleport). The default id on this teleport target is `#teleports`.
+
+### Migration steps
+
+Update the `teleportId` value within the Nuxt config to `tide-top-layer`.
+
+``` ts
+// nuxt.config.ts
+export defineNuxtConfig({
+  app: {
+    teleportId: 'tide-top-layer',
+  }
+});
+```
+
+Alternatively you can use the `teleportAttrs` config value.
+
+``` ts
+// nuxt.config.ts
+export defineNuxtConfig({
+  app: {
+    teleportAttrs: {
+      id: 'tide-top-layer',
+    },
+  }
+});
+```
+
+See [Nuxt Configuration docs](https://nuxt.com/docs/4.x/api/nuxt-config#teleportid).
+
+✅ After these changes your project should be compatible with TIDE 2.4.6.
+
 ## Upgrading from 2.3 → 2.4
 
 ### Summary
+
 Version **2.4** introduces a new suite of form components. It remains largely backward-compatible with the previous versions of components, but requires an update to a number of component names. It also removes a number of form-related TS exports.
 
 ### Migration steps

package/index.ts

@@ -7,6 +7,7 @@ import TideBreadCrumbs from '@/components/TideBreadCrumbs.vue';
 import TideButton from '@/components/TideButton.vue';
 import TideButtonIcon from '@/components/TideButtonIcon.vue';
 import TideButtonPagination from '@/components/TideButtonPagination.vue';
+import TideButtonSave from '@/components/TideButtonSave.vue';
 import TideButtonSegmented from '@/components/TideButtonSegmented.vue';
 import TideCard from '@/components/TideCard.vue';
 import TideCarousel from '@/components/TideCarousel.vue';
@@ -156,6 +157,7 @@ export {
   TideButton,
   TideButtonIcon,
   TideButtonPagination,
+  TideButtonSave,
   TideButtonSegmented,
   TideCard,
   TideCarousel,

package/package.json

@@ -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.5.3",
+  "version": "2.5.6",
   "dependencies": {
     "@floating-ui/vue": "^1.1.6"
   }

package/src/assets/css/variables.css

@@ -11,8 +11,17 @@
   --tide-font-28: 1.75rem;
   --tide-font-32: 2rem;
 
-  /* Animation */
-  --tide-animate: 300ms ease-in-out;
+  /* Motion */
+  --tide-duration-75: 75ms;
+  --tide-duration-150: 150ms;
+  --tide-duration-300: 300ms;
+  --tide-duration-600: 600ms;
+
+  --tide-easing-ease: ease;
+  --tide-easing-ease-out: ease-out;
+  --tide-easing-linear: linear;
+
+  --tide-animate: var(--tide-duration-300) var(--tide-easing-ease);
 
   /* Spacing */
   --tide-spacing-0: 0rem;

package/src/components/TideButtonSave.vue

@@ -0,0 +1,100 @@
+<script setup lang="ts">
+  import { ref, watch } from 'vue';
+
+  import { CSS } from '@/types/Styles';
+
+  const isTouched = ref(false);
+  const isSaved = defineModel<boolean>({ required: true });
+
+  watch(
+    isSaved,
+    () => {
+      if (!isTouched.value) isTouched.value = true;
+    },
+    { immediate: false }
+  );
+</script>
+
+<template>
+  <button
+    :class="['tide-button-save', CSS.PADDING.FULL.QUARTER, isSaved && 'saved']"
+    @click="isSaved = !isSaved"
+    type="button"
+  >
+    <div :class="['heart-container', CSS.DISPLAY.FLEX, isSaved && isTouched && 'animate-heartbeat']">
+      <svg
+        :class="['tide-button-save-icon', CSS.FLEX.GROW.OFF, CSS.FLEX.SHRINK.OFF]"
+        height="32"
+        viewBox="0 0 24 24"
+        width="32"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          :class="['heart-filled', isSaved ? CSS.FONT.COLOR.GLOBAL.PRIMARY.RED : 'filled-transparent']"
+          d="m12 21-1.45-1.3c-1.6833-1.5167-3.075-2.825-4.175-3.925-1.1-1.1-1.975-2.0875-2.625-2.9625-.65-.875-1.1042-1.6792-1.3625-2.4125C2.1292 9.6667 2 8.9167 2 8.15c0-1.5667.525-2.875 1.575-3.925C4.625 3.175 5.9333 2.65 7.5 2.65c.8667 0 1.6917.1833 2.475.55.7833.3667 1.4583.8833 2.025 1.55.5667-.6667 1.2417-1.1833 2.025-1.55.7833-.3667 1.6083-.55 2.475-.55 1.5667 0 2.875.525 3.925 1.575C21.475 5.275 22 6.5833 22 8.15c0 .7667-.1292 1.5167-.3875 2.25-.2583.7333-.7125 1.5375-1.3625 2.4125s-1.525 1.8625-2.625 2.9625c-1.1 1.1-2.4917 2.4083-4.175 3.925L12 21Z"
+        />
+
+        <path
+          :class="['heart-outline', CSS.FONT.COLOR.SURFACE.INVERSE]"
+          d="m12 21-1.45-1.3c-1.6833-1.5167-3.075-2.825-4.175-3.925-1.1-1.1-1.975-2.0875-2.625-2.9625-.65-.875-1.1042-1.6792-1.3625-2.4125C2.1292 9.6667 2 8.9167 2 8.15c0-1.5667.525-2.875 1.575-3.925C4.625 3.175 5.9333 2.65 7.5 2.65c.8667 0 1.6917.1833 2.475.55.7833.3667 1.4583.8833 2.025 1.55.5667-.6667 1.2417-1.1833 2.025-1.55.7833-.3667 1.6083-.55 2.475-.55 1.5667 0 2.875.525 3.925 1.575C21.475 5.275 22 6.5833 22 8.15c0 .7667-.1292 1.5167-.3875 2.25-.2583.7333-.7125 1.5375-1.3625 2.4125s-1.525 1.8625-2.625 2.9625c-1.1 1.1-2.4917 2.4083-4.175 3.925L12 21Zm0-2.7c1.6-1.4333 2.9167-2.6625 3.95-3.6875s1.85-1.9167 2.45-2.675c.6-.7583 1.0167-1.4333 1.25-2.025.2333-.5917.35-1.1792.35-1.7625 0-1-.3333-1.8333-1-2.5-.6667-.6667-1.5-1-2.5-1-.7833 0-1.5083.2208-2.175.6625C13.6583 5.7542 13.2 6.3167 12.95 7h-1.9c-.25-.6833-.7083-1.2458-1.375-1.6875S8.2833 4.65 7.5 4.65c-1 0-1.8333.3333-2.5 1-.6667.6667-1 1.5-1 2.5 0 .5833.1167 1.1708.35 1.7625.2333.5917.65 1.2667 1.25 2.025s1.4167 1.65 2.45 2.675S10.4 16.8667 12 18.3Z"
+        />
+      </svg>
+    </div>
+  </button>
+</template>
+
+<style scoped>
+  .heart-container {
+    --rotate-during-heart-beat: 9deg;
+    filter: drop-shadow(0px 2px 8px rgba(0, 0, 0, 0.3));
+    transition: var(--tide-duration-300) var(--tide-easing-ease-out);
+    transition-property: transform, scale;
+    rotate: 0deg;
+  }
+
+  .heart-container.animate-heartbeat {
+    animation: heartBeat var(--tide-duration-150);
+    animation-direction: alternate;
+    animation-iteration-count: 4;
+  }
+
+  .heart-container:active {
+    scale: 0.9;
+    transition-duration: var(--tide-duration-75);
+  }
+
+  .tide-button-save-icon {
+    fill: currentColor;
+  }
+
+  @media (hover: hover) {
+    .heart-container {
+      --rotate-during-heart-beat: 0deg;
+    }
+
+    .tide-button-save:where(:hover, :focus-visible) .heart-container {
+      transform: rotate(9deg);
+    }
+  }
+
+  .heart-filled {
+    scale: 0.985; /* avoid hairline border render issue */
+    transform-origin: center;
+    transition: color var(--tide-duration-75) var(--tide-easing-linear);
+  }
+
+  .filled-transparent {
+    color: var(--tide-transparent-400);
+  }
+
+  @keyframes heartBeat {
+    from {
+      scale: 1;
+      rotate: 0deg;
+    }
+    to {
+      scale: 1.25;
+      rotate: var(--rotate-during-heart-beat);
+    }
+  }
+</style>

package/src/components/TideIcon.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-  import { markRaw, ref, watch } from 'vue';
+  import { defineAsyncComponent, markRaw, ref, watch } from 'vue';
 
   import { REALM } from '@/types/Realm';
   import { SIZE } from '@/types/Size';
@@ -29,13 +29,15 @@
       const [prefix] = id.split('-');
       const realmFolder = REALM[prefix?.toUpperCase() as keyof typeof REALM];
 
-      const loader = realmFolder
-        ? () => import(`../assets/svg/icons/realm/${realmFolder}/Icon${name}.svg?component`)
-        : () => import(`../assets/svg/icons/Icon${name}.svg?component`);
+      const component = defineAsyncComponent(() => {
+        if (realmFolder) {
+          return import(`../assets/svg/icons/realm/${realmFolder}/Icon${name}.svg?component`);
+        }
 
-      const mod = await loader();
+        return import(`../assets/svg/icons/Icon${name}.svg?component`);
+      });
 
-      innerSVG.value = markRaw(mod.default);
+      innerSVG.value = markRaw(component);
     },
     { immediate: true }
   );

package/src/stories/TideButtonSave.stories.ts

@@ -0,0 +1,62 @@
+import { ref, watch } from 'vue';
+
+import TideButtonSave from '@/components/TideButtonSave.vue';
+import { dataTrack, doSomething, parameters } from '@/utilities/storybook';
+
+import type { StoryContext } from '@storybook/vue3';
+
+type Args = InstanceType<typeof TideButtonSave>['$props'] & {
+  vModel: boolean;
+};
+
+const render = (args: Args, context: StoryContext) => ({
+  components: { TideButtonSave },
+  methods: {
+    doSomething,
+    handleIsSavedChange: (value: boolean) => {
+      context.updateArgs({ ...args, vModel: value });
+    },
+  },
+  setup: () => {
+    const isSaved = ref(args.vModel);
+
+    watch(
+      () => args.vModel,
+      (newValue) => {
+        isSaved.value = newValue;
+      }
+    );
+
+    return {
+      args,
+      isSaved,
+    };
+  },
+  template: `<TideButtonSave v-bind="args" v-model="isSaved" @update:modelValue="handleIsSavedChange" />`,
+});
+
+export default {
+  argTypes: {
+    dataTrack,
+    vModel: {
+      control: 'boolean',
+      description: 'Data binding to Vue ref',
+      table: {
+        category: 'Native',
+        defaultValue: { summary: 'None' },
+        type: { summary: 'Ref<boolean>' },
+      },
+    },
+  },
+  args: {
+    dataTrack: '',
+    vModel: false,
+  },
+  component: TideButtonSave,
+  parameters,
+  render,
+  tags: ['autodocs'],
+  title: 'Components/TideButtonSave',
+};
+
+export const Demo = {};