@kaizen/components 1.57.2 → 1.58.1

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

@@ -1,21 +1,18 @@
 import { Meta, StoryObj } from "@storybook/react"
-import {
-  GlobalNotification,
-  GlobalNotificationProps,
-} from "../GlobalNotification"
-
-const DEFAULT_PROPS: Partial<GlobalNotificationProps> = {
-  type: "positive",
-  children:
-    "Lorem ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis quibusdam natus doloremque",
-}
+import { GlobalNotification } from "../GlobalNotification"
 
 const meta = {
   title: "Components/Notifications/GlobalNotification",
   component: GlobalNotification,
-
   args: {
-    ...DEFAULT_PROPS,
+    variant: "success",
+    children:
+      "Lorem ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis quibusdam natus doloremque",
+  },
+  argTypes: {
+    type: {
+      control: false,
+    },
   },
 } satisfies Meta<typeof GlobalNotification>
 
@@ -41,7 +38,7 @@ export const Playground: StoryObj<typeof meta> = {
 export const Persistent: StoryObj<typeof meta> = {
   args: {
     persistent: true,
-    type: "negative",
+    variant: "warning",
     children: "Please fill in all required fields before submitting",
   },
 }

package/src/Notification/InlineNotification/InlineNotification.tsx

@@ -2,12 +2,14 @@ import React from "react"
 import classnames from "classnames"
 import { HeadingProps } from "~components/Heading"
 import { OverrideClassName } from "~types/OverrideClassName"
-import { GenericNotification } from "../subcomponents/GenericNotification"
+import {
+  GenericNotification,
+  GenericNotificationType,
+  GenericNotificationVariant,
+} from "../subcomponents/GenericNotification"
 import styles from "../subcomponents/GenericNotification/GenericNotification.module.scss"
-import { NotificationType } from "../types"
 
-export type InlineNotificationProps = OverrideClassName<{
-  type: NotificationType
+export type InlineNotificationBase = OverrideClassName<{
   children?: React.ReactNode
   /** @default false */
   persistent?: boolean
@@ -20,6 +22,9 @@ export type InlineNotificationProps = OverrideClassName<{
   isSubtle?: boolean
 }>
 
+export type InlineNotificationProps = InlineNotificationBase &
+  (GenericNotificationType | GenericNotificationVariant)
+
 /**
  * {@link https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3082093392/Inline+Notification Guidance} |
  * {@link https://cultureamp.design/storybook/?path=/docs/components-notifications-inline-notification--docs Storybook}

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

@@ -21,17 +21,13 @@ export default {
   },
 } satisfies Meta
 
-const DEFAULT_CHILDREN: JSX.Element = (
-  <span>
-    New user data, imported by mackenzie@hooli.com has successfully uploaded.{" "}
-    <a href="/">Manage users is now available</a>
-  </span>
-)
-
 const DEFAULT_PROPS = {
-  hideCloseIcon: false,
-  persistent: false,
-  children: DEFAULT_CHILDREN,
+  children: (
+    <span>
+      New user data, imported by mackenzie@hooli.com has successfully uploaded.{" "}
+      <a href="/">Manage users is now available</a>
+    </span>
+  ),
 } satisfies Partial<InlineNotificationProps>
 
 const VARIANTS_PROPS: Array<{
@@ -41,8 +37,7 @@ const VARIANTS_PROPS: Array<{
   {
     title: "Informative",
     props: {
-      ...DEFAULT_PROPS,
-      type: "informative",
+      variant: "informative",
       headingProps: {
         variant: "heading-6",
         tag: "span",
@@ -51,34 +46,20 @@ const VARIANTS_PROPS: Array<{
     },
   },
   {
-    title: "Positive",
-    props: {
-      ...DEFAULT_PROPS,
-      type: "positive",
-      headingProps: {
-        variant: "heading-6",
-        tag: "span",
-        children: "Positive title",
-      },
-    },
-  },
-  {
-    title: "Negative",
+    title: "Success",
     props: {
-      ...DEFAULT_PROPS,
-      type: "negative",
+      variant: "success",
       headingProps: {
         variant: "heading-6",
         tag: "span",
-        children: "Negative title",
+        children: "Success title",
       },
     },
   },
   {
     title: "Cautionary",
     props: {
-      ...DEFAULT_PROPS,
-      type: "cautionary",
+      variant: "cautionary",
       headingProps: {
         variant: "heading-6",
         tag: "span",
@@ -87,35 +68,32 @@ const VARIANTS_PROPS: Array<{
     },
   },
   {
-    title: "Security",
+    title: "Warning",
     props: {
-      ...DEFAULT_PROPS,
-      type: "security",
+      variant: "warning",
       headingProps: {
         variant: "heading-6",
         tag: "span",
-        children: "Security title",
+        children: "Warning title",
       },
     },
   },
   {
     title: "Persistent",
     props: {
-      ...DEFAULT_PROPS,
-      type: "informative",
+      variant: "informative",
       persistent: true,
       headingProps: {
         variant: "heading-6",
         tag: "span",
-        children: "Security title",
+        children: "Persistent title",
       },
     },
   },
   {
     title: "Subtle",
     props: {
-      ...DEFAULT_PROPS,
-      type: "informative",
+      variant: "informative",
       isSubtle: true,
       persistent: true,
       headingProps: {
@@ -129,10 +107,9 @@ const VARIANTS_PROPS: Array<{
   {
     title: "Multiline",
     props: {
-      ...DEFAULT_PROPS,
       children:
         "Content longer that the width of the container will break onto a new line. Lorem ipsum dolor, sit amet consectetur adipisicing elit. In aperiam voluptatem molestias saepe quia vitae quod ex illum, unde nihil impedit possimus officia labore atque quidem necessitatibus sint, maiores velit.",
-      type: "positive",
+      variant: "success",
       headingProps: {
         variant: "heading-6",
         tag: "span",
@@ -143,10 +120,9 @@ const VARIANTS_PROPS: Array<{
   {
     title: "Forced multiline",
     props: {
-      ...DEFAULT_PROPS,
       children:
         "forceMultiline will break children onto a new line regardless of width",
-      type: "negative",
+      variant: "cautionary",
       headingProps: {
         variant: "heading-6",
         tag: "span",
@@ -157,6 +133,56 @@ const VARIANTS_PROPS: Array<{
   },
 ]
 
+const TYPE_PROPS: Array<{
+  title: string
+  props: InlineNotificationProps
+}> = [
+  {
+    title: "Informative",
+    props: {
+      type: "informative",
+      headingProps: {
+        variant: "heading-6",
+        tag: "span",
+        children: "Informative title",
+      },
+    },
+  },
+  {
+    title: "Positive",
+    props: {
+      type: "positive",
+      headingProps: {
+        variant: "heading-6",
+        tag: "span",
+        children: "Positive title",
+      },
+    },
+  },
+  {
+    title: "Cautionary",
+    props: {
+      type: "cautionary",
+      headingProps: {
+        variant: "heading-6",
+        tag: "span",
+        children: "Cautionary title",
+      },
+    },
+  },
+  {
+    title: "Negative",
+    props: {
+      type: "negative",
+      headingProps: {
+        variant: "heading-6",
+        tag: "span",
+        children: "Negative title",
+      },
+    },
+  },
+]
+
 const StickerSheetTemplate: StickerSheetStory = {
   render: ({ isReversed }) => (
     <>
@@ -164,7 +190,16 @@ const StickerSheetTemplate: StickerSheetStory = {
         <StickerSheet.Body>
           {VARIANTS_PROPS.map(({ title, props }) => (
             <StickerSheet.Row key={title} rowTitle={title}>
-              <InlineNotification {...props} />
+              <InlineNotification {...DEFAULT_PROPS} {...props} />
+            </StickerSheet.Row>
+          ))}
+        </StickerSheet.Body>
+      </StickerSheet>
+      <StickerSheet heading="Type (deprecated)" isReversed={isReversed}>
+        <StickerSheet.Body>
+          {TYPE_PROPS.map(({ title, props }) => (
+            <StickerSheet.Row key={title} rowTitle={title}>
+              <InlineNotification {...DEFAULT_PROPS} {...props} />
             </StickerSheet.Row>
           ))}
         </StickerSheet.Body>

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

@@ -1,25 +1,25 @@
 import { Meta, StoryObj } from "@storybook/react"
-import {
-  InlineNotification,
-  InlineNotificationProps,
-} from "../InlineNotification"
-
-const DEFAULT_PROPS: Partial<InlineNotificationProps> = {
-  headingProps: {
-    children: "Informative",
-    tag: "span",
-    variant: "heading-6",
-  },
-  type: "informative",
-  children:
-    "Lorem ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis quibusdam natus doloremque",
-}
+import { InlineNotification } from "../InlineNotification"
 
 const meta = {
   title: "Components/Notifications/InlineNotification",
   component: InlineNotification,
   args: {
-    ...DEFAULT_PROPS,
+    headingProps: {
+      children: "Informative",
+      tag: "span",
+      variant: "heading-6",
+    },
+    variant: "informative",
+    children:
+      "Lorem ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis quibusdam natus doloremque",
+  },
+  argTypes: {
+    type: {
+      control: {
+        disable: true,
+      },
+    },
   },
   parameters: {
     a11y: {
@@ -47,7 +47,7 @@ export const Playground: StoryObj<typeof meta> = {
 export const Persistent: StoryObj<typeof meta> = {
   args: {
     persistent: true,
-    type: "negative",
+    variant: "warning",
     children: "Please fill in all required fields before submitting",
     headingProps: {
       children: "Form error",

package/src/Notification/ToastNotification/ToastNotification/ToastNotification.tsx

@@ -1,9 +1,13 @@
 import React, { useEffect, useId } from "react"
+import {
+  GenericNotificationType,
+  GenericNotificationVariant,
+} from "~components/Notification/subcomponents/GenericNotification"
 import { useToastNotificationContext } from "../context/ToastNotificationContext"
-import { ToastNotificationObj } from "../types"
+import { ToastNotificationObjBase } from "../types"
 
 export type ToastNotificationProps = Omit<
-  ToastNotificationObj,
+  ToastNotificationObjBase,
   "id" | "message" | "persistent"
 > & {
   children: React.ReactNode
@@ -14,12 +18,11 @@ export type ToastNotificationProps = Omit<
    * @default false
    */
   hideCloseIcon?: boolean
-}
+} & (GenericNotificationType | GenericNotificationVariant)
 
 export const ToastNotification = ({
   id: propsId,
   hideCloseIcon = false,
-  type,
   title,
   onHide,
   children,
@@ -33,7 +36,6 @@ export const ToastNotification = ({
   useEffect(() => {
     addToastNotification({
       id,
-      type,
       title,
       message: children,
       persistent,

package/src/Notification/ToastNotification/ToastNotificationsList/subcomponents/ToastNotificationsMap/ToastNotificationsMap.tsx

@@ -22,11 +22,10 @@ export const ToastNotificationsMap = ({
   return createPortal(
     <>
       {notifications.map(
-        ({ id, type, title, persistent, onHide, message, ...restProps }) => (
+        ({ id, title, persistent, onHide, message, ...restProps }) => (
           <GenericNotification
             key={id}
             style="toast"
-            type={type}
             title={title}
             persistent={persistent}
             onHide={(): void => {

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

@@ -14,27 +14,32 @@ export default {
 const StickerSheetTemplate: StickerSheetStory = {
   render: () => (
     <>
-      <ToastNotification type="positive" title="Positive">
+      <ToastNotification variant="success" title="Success">
         New user data, imported by mackenzie@hooli.com has successfully
         uploaded. <a href="/">Manage users is now available</a>
       </ToastNotification>
-      <ToastNotification type="informative" title="Informative">
+      <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>
+      </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>
       </ToastNotification>
-      <ToastNotification type="cautionary" title="Cautionary">
+      <ToastNotification variant="cautionary" title="Cautionary">
         New user data, imported by mackenzie@hooli.com has uploaded with some
         minor issues. <a href="/">View issues</a>
       </ToastNotification>
-      <ToastNotification type="security" title="Security">
+      <ToastNotification variant="warning" title="Warning">
         Results hidden to protect confidentiality of individuals and small
         groups. <a href="/">Learn more</a>
       </ToastNotification>
-      <ToastNotification type="negative" title="Negative">
-        Check your connection and try again. <a href="/">Refresh</a>.
+      <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>
       </ToastNotification>
       <ToastNotification
-        type="positive"
+        variant="security"
         title="Very long Title Example Very long title Example VerylongTitleExampleVerylongtitleExample"
       >
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla semper

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

@@ -8,7 +8,7 @@ const meta = {
   component: ToastNotification,
   args: {
     id: "abc-123",
-    type: "positive",
+    variant: "success",
     title: "Success",
     children: (
       <div>
@@ -17,6 +17,11 @@ const meta = {
       </div>
     ),
   },
+  argTypes: {
+    type: {
+      control: false,
+    },
+  },
 } satisfies Meta<typeof ToastNotification>
 
 export default meta

package/src/Notification/ToastNotification/context/ToastNotificationContext.tsx

@@ -1,10 +1,14 @@
 import React, { useContext, useState } from "react"
 import { v4 as uuidv4 } from "uuid"
-import { ToastNotificationObj } from "../types"
+import {
+  GenericNotificationType,
+  GenericNotificationVariant,
+} from "~components/Notification/subcomponents/GenericNotification"
+import { ToastNotificationObj, ToastNotificationObjBase } from "../types"
 
-type ToastNotificationObjOptionalId = Omit<ToastNotificationObj, "id"> & {
+type ToastNotificationObjOptionalId = Omit<ToastNotificationObjBase, "id"> & {
   id?: string
-}
+} & (GenericNotificationType | GenericNotificationVariant)
 
 export type ToastNotificationContextValue = {
   notifications: ToastNotificationObj[]

package/src/Notification/ToastNotification/types.ts

@@ -1,9 +1,11 @@
 import { DataAttributes } from "~types/DataAttributes"
-import { NotificationType } from "../types"
+import {
+  GenericNotificationType,
+  GenericNotificationVariant,
+} from "../subcomponents/GenericNotification"
 
-export type ToastNotificationObj = {
+export type ToastNotificationObjBase = {
   id: string
-  type: NotificationType
   title: string
   message: React.ReactNode
   onHide?: () => void
@@ -13,3 +15,6 @@ export type ToastNotificationObj = {
    */
   persistent?: boolean
 } & DataAttributes
+
+export type ToastNotificationObj = ToastNotificationObjBase &
+  (GenericNotificationType | GenericNotificationVariant)

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

@@ -11,6 +11,8 @@
 // Structure
 .icon {
   @extend %ca-notification__icon;
+
+  color: var(--icon-color);
 }
 
 .textContainer {
@@ -88,16 +90,14 @@
   @extend %ca-notification---global;
 }
 
+// ------------------------------
 // Type
+// @deprecated use variant instead
+// ------------------------------
 .positive {
   @extend %ca-notification---positive;
 }
 
-.informative {
-  @extend %ca-notification---informative;
-}
-
-.cautionary,
 .security {
   @extend %ca-notification---cautionary;
 }
@@ -106,6 +106,43 @@
   @extend %ca-notification---negative;
 }
 
+// End deprecated styles
+
+// ------------------------------
+// Variant
+// ------------------------------
+.success {
+  background: $color-green-100;
+  border-color: var(--color-green-500);
+  color: $color-purple-800;
+
+  --icon-color: var(--color-green-500);
+}
+
+.informative {
+  background: $color-blue-100;
+  border-color: var(--color-blue-400);
+  color: $color-purple-800;
+
+  --icon-color: var(--color-blue-400);
+}
+
+.cautionary {
+  background: $color-yellow-100;
+  border-color: var(--color-yellow-700);
+  color: $color-purple-800;
+
+  --icon-color: var(--color-yellow-700);
+}
+
+.warning {
+  background: $color-red-100;
+  border-color: var(--color-red-500);
+  color: $color-purple-800;
+
+  --icon-color: var(--color-red-500);
+}
+
 // Modifiers
 .noBottomMargin {
   @extend %ca-notification---noBottomMargin;

package/src/Notification/subcomponents/GenericNotification/GenericNotification.tsx

@@ -1,15 +1,20 @@
 import React, { HTMLAttributes, useEffect, useRef, useState } from "react"
 import classnames from "classnames"
 import { HeadingProps } from "~components/Heading"
-import { NotificationType } from "~components/Notification/types"
+import {
+  NotificationType,
+  NotificationVariant,
+} from "~components/Notification/types"
 import { OverrideClassName } from "~types/OverrideClassName"
 import { CancelButton } from "../CancelButton"
 import { NotificationHeading } from "../NotificationHeading"
-import { NotificationIcon } from "../NotificationIcon"
+import {
+  NotificationIconType,
+  NotificationIconVariant,
+} from "../NotificationIcon"
 import styles from "./GenericNotification.module.scss"
 
-export type GenericNotificationProps = {
-  type: NotificationType
+type GenericNotificationBase = {
   style: "global" | "inline" | "toast"
   children?: React.ReactNode
   title?: string
@@ -20,8 +25,33 @@ export type GenericNotificationProps = {
   headingProps?: HeadingProps
 } & Omit<OverrideClassName<HTMLAttributes<HTMLDivElement>>, "style">
 
+export type GenericNotificationType = {
+  /**
+   * @deprecated Please use `variant` instead
+   */
+  type: NotificationType
+  variant?: never
+}
+
+export type GenericNotificationVariant = {
+  /**
+   * @deprecated Please use `variant` instead
+   */
+  type?: never
+  /**
+   * If you are transitioning from `type`:
+   * - `positive` should be `success`
+   * - `negative` should be `warning`
+   */
+  variant: NotificationVariant
+}
+
+export type GenericNotificationProps = GenericNotificationBase &
+  (GenericNotificationType | GenericNotificationVariant)
+
 export const GenericNotification = ({
   type,
+  variant,
   style,
   children,
   title,
@@ -70,7 +100,7 @@ export const GenericNotification = ({
       ref={containerRef}
       className={classnames(
         styles.notification,
-        styles[type],
+        variant ? styles[variant] : styles[type],
         styles[style],
         isHidden && styles.hidden,
         noBottomMargin && styles.noBottomMargin,
@@ -82,7 +112,11 @@ export const GenericNotification = ({
       {...restProps}
     >
       <div className={styles.icon}>
-        <NotificationIcon type={type} />
+        {type ? (
+          <NotificationIconType type={type} />
+        ) : (
+          <NotificationIconVariant variant={variant} />
+        )}
       </div>
       <div
         className={classnames(

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

@@ -26,7 +26,8 @@ $notification-slide-right: transform 300ms ease-out;
   &%ca-notification---inline,
   &%ca-notification---toast {
     margin-bottom: $spacing-24;
-    border: $border-width var(--border-solid-border-style);
+    border-width: $border-width;
+    border-style: solid;
     border-radius: $border-solid-border-radius;
   }