@kaizen/components 1.80.1 → 1.80.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kaizen/components",
-  "version": "1.80.1",
+  "version": "1.80.2",
   "description": "Kaizen component library",
   "author": "Geoffrey Chong <geoff.chong@cultureamp.com>",
   "homepage": "https://cultureamp.design",

package/src/Notification/GlobalNotification/_docs/GlobalNotification.stickersheet.stories.tsx

@@ -1,5 +1,6 @@
 import React from 'react'
 import { type Meta } from '@storybook/react'
+import { Link } from '~components/Link'
 import { StickerSheet, type StickerSheetStory } from '~storybook/components/StickerSheet'
 import { GlobalNotification, type GlobalNotificationProps } from '../GlobalNotification'
 
@@ -72,7 +73,7 @@ const StickerSheetTemplate: StickerSheetStory = {
       children: (
         <span>
           {"This survey status has been changed to 'Archived'. "}
-          <a href="/">View all</a>
+          <Link href="/">View all</Link>
         </span>
       ),
     } satisfies Partial<GlobalNotificationProps>

package/src/Notification/InlineNotification/_docs/InlineNotification.stickersheet.stories.tsx

@@ -1,5 +1,6 @@
 import React from 'react'
 import { type Meta } from '@storybook/react'
+import { Link } from '~components/index'
 import { StickerSheet, type StickerSheetStory } from '~storybook/components/StickerSheet'
 import { InlineNotification, type InlineNotificationProps } from '../InlineNotification'
 
@@ -19,7 +20,9 @@ const DEFAULT_PROPS = {
   children: (
     <span>
       New user data, imported by mackenzie@hooli.com has successfully uploaded.{' '}
-      <a href="/">Manage users is now available</a>
+      <Link href="/" size="small">
+        Manage users is now available
+      </Link>
     </span>
   ),
 } satisfies Partial<InlineNotificationProps>

package/src/Notification/ToastNotification/_docs/ToastNotification.stickersheet.stories.tsx

@@ -1,5 +1,6 @@
 import React from 'react'
 import { type Meta } from '@storybook/react'
+import { Link } from '~components/Link'
 import { type StickerSheetStory } from '~storybook/components/StickerSheet'
 import { ToastNotification } from '../ToastNotification'
 
@@ -16,27 +17,40 @@ const StickerSheetTemplate: StickerSheetStory = {
     <>
       <ToastNotification variant="success" title="Success">
         New user data, imported by mackenzie@hooli.com has successfully uploaded.{' '}
-        <a href="/">Manage users is now available</a>
+        <Link href="/" size="small">
+          Manage users is now available
+        </Link>
       </ToastNotification>
       <ToastNotification type="positive" title="Positive (Deprecated)">
         New user data, imported by mackenzie@hooli.com has successfully uploaded.{' '}
-        <a href="/">Manage users is now available</a>
+        <Link href="/" size="small">
+          Manage users is now available
+        </Link>
       </ToastNotification>
       <ToastNotification variant="informative" title="Informative">
         New user data is currently being processed. We&apos;ll let you know when the process is
-        completed. <a href="/">Manage users</a>
+        completed.{' '}
+        <Link href="/" size="small">
+          Manage users
+        </Link>
       </ToastNotification>
       <ToastNotification variant="cautionary" title="Cautionary">
         New user data, imported by mackenzie@hooli.com has uploaded with some minor issues.{' '}
-        <a href="/">View issues</a>
+        <Link href="/" size="small">
+          View issues
+        </Link>
       </ToastNotification>
       <ToastNotification variant="warning" title="Warning">
         Results hidden to protect confidentiality of individuals and small groups.{' '}
-        <a href="/">Learn more</a>
+        <Link href="/" size="small">
+          Learn more
+        </Link>
       </ToastNotification>
       <ToastNotification type="negative" title="Negative (Deprecated)">
         New user data, imported by mackenzie@hooli.com has successfully uploaded.{' '}
-        <a href="/">Manage users is now available</a>
+        <Link href="/" size="small">
+          Manage users is now available
+        </Link>
       </ToastNotification>
       <ToastNotification
         variant="security"

package/src/Notification/subcomponents/GenericNotification/_mixins.scss

@@ -262,13 +262,15 @@ $notification-slide-right: transform 300ms ease-out;
       letter-spacing: $typography-paragraph-body-letter-spacing;
     }
 
-    a[href] {
+    a[href]:not([data-rac]) {
+      border-bottom: var(--spacing-1) solid $color-blue-500;
+      text-decoration: none;
       color: $color-blue-500;
-      text-decoration: underline;
 
       &:hover {
-        color: $color-blue-500;
         text-decoration: none;
+        color: $color-blue-600;
+        border-bottom: var(--spacing-1) solid $color-blue-600;
       }
     }