@kaizen/components 1.57.2 → 1.58.0

package/src/Modal/ConfirmationModal/ConfirmationModal.module.scss

@@ -5,22 +5,21 @@
 @import "../../../styles/utils/animation";
 @import "../GenericModal/GenericModal.module";
 
-$dt-positive-header-background: $color-green-100;
-$dt-informative-header-background: $color-blue-100;
-$dt-negative-header-background: $color-red-100;
-$dt-cautionary-header-background: $color-yellow-100;
-$dt-heading-text-color: $color-purple-800;
-$dt-cautionary-heading-text-color: $color-purple-800;
-$dt-assertive-header-background: $color-orange-100;
-
 .modal {
   @extend %genericModal;
 
   min-width: 300px;
   max-width: 600px;
+
+  .spotIcon {
+    color: var(--spot-icon-color);
+  }
 }
 
 .header {
+  display: grid;
+  grid-template-columns: 0.2fr 2fr;
+  align-items: center;
   color: $color-white;
   text-align: left;
   border-radius: $border-solid-border-radius $border-solid-border-radius 0 0;
@@ -35,14 +34,87 @@ $dt-assertive-header-background: $color-orange-100;
 
   // override Murmur global styles :(
   h1 {
-    color: $dt-heading-text-color;
+    color: var(color-purple-800);
   }
 }
 
 .iconContainer {
   position: relative;
+  align-self: flex-start;
+
+  @media (min-width: $layout-breakpoints-medium) {
+    align-self: center;
+  }
+
+  .spotIcon {
+    width: 30px;
+    height: 30px;
+
+    @media (max-width: $layout-breakpoints-medium) {
+      margin-right: 0.9375rem;
+      position: relative;
+      top: 0.125rem;
+    }
+  }
 }
 
+.prominent {
+  display: grid;
+  grid-template-columns: 1.1fr 2fr;
+  align-items: center;
+
+  @media (max-width: $layout-breakpoints-medium) {
+    grid-template-columns: 1fr;
+    display: flex;
+    flex-direction: column;
+    place-content: flex-start center;
+    align-items: flex-start;
+  }
+
+  .iconContainer {
+    position: absolute;
+    top: 8%;
+
+    @media (max-width: $layout-breakpoints-medium) {
+      position: relative;
+      top: 0;
+      margin-bottom: $spacing-sm;
+    }
+  }
+
+  .spotIcon {
+    width: 155px;
+    height: 155px;
+    margin: 0 auto;
+    color: $color-purple-800;
+
+    @media (max-width: $layout-breakpoints-medium) {
+      width: 86px;
+      height: 86px;
+    }
+  }
+}
+
+.padded {
+  padding: $spacing-md $spacing-lg $spacing-md $spacing-lg;
+
+  @media (max-width: $layout-breakpoints-medium) {
+    padding: $spacing-md;
+  }
+}
+
+// --------------------------------
+// @deprecated moods use variant styles instead
+// --------------------------------
+
+$dt-positive-header-background: $color-green-100;
+$dt-informative-header-background: $color-blue-100;
+$dt-negative-header-background: $color-red-100;
+$dt-cautionary-header-background: $color-yellow-100;
+$dt-heading-text-color: $color-purple-800;
+$dt-cautionary-heading-text-color: $color-purple-800;
+$dt-assertive-header-background: $color-orange-100;
+
 .positiveHeader {
   background-color: $dt-positive-header-background;
 
@@ -76,83 +148,33 @@ $dt-assertive-header-background: $color-orange-100;
   }
 }
 
-.positiveHeader,
-.informativeHeader,
-.negativeHeader,
-.cautionaryHeader,
-.assertiveHeader {
-  display: grid;
-  grid-template-columns: 0.2fr 2fr;
-  align-items: center;
-
-  .iconContainer {
-    align-self: flex-start;
-
-    @media (min-width: $layout-breakpoints-medium) {
-      align-self: center;
-    }
-  }
-
-  .spotIcon {
-    width: 30px;
-    height: 30px;
-
-    @media (max-width: $layout-breakpoints-medium) {
-      margin-right: 0.9375rem;
-      position: relative;
-      top: 0.125rem;
-    }
-  }
-
-  &.prominent {
-    grid-template-columns: 1.1fr 2fr;
+// End @deprecated ----------------
 
-    @media (max-width: $layout-breakpoints-medium) {
-      display: flex;
-      flex-direction: column;
-      place-content: flex-start center;
-      align-items: flex-start;
-    }
+// --------------------------------
+// variant styles
+// --------------------------------
+.success {
+  background-color: var(--color-green-100);
 
-    .iconContainer {
-      position: absolute;
-      top: 8%;
-
-      @media (max-width: $layout-breakpoints-medium) {
-        position: relative;
-        top: 0;
-        margin-bottom: $spacing-sm;
-      }
-    }
+  --spot-icon-color: var(--color-green-500);
+}
 
-    .spotIcon {
-      width: 155px;
-      height: 155px;
-      margin: 0 auto;
-      color: $color-purple-800;
+.informative {
+  background-color: var(--color-blue-100);
 
-      @media (max-width: $layout-breakpoints-medium) {
-        width: 86px;
-        height: 86px;
-      }
-    }
-  }
+  --spot-icon-color: var(--color-blue-500);
 }
 
-.prominent {
-  display: grid;
-  grid-template-columns: 1.1fr 2fr;
-  align-items: center;
+.warning {
+  background-color: var(--color-red-100);
 
-  @media (max-width: $layout-breakpoints-medium) {
-    grid-template-columns: 1fr;
-  }
+  --spot-icon-color: var(--color-red-500);
 }
 
-.padded {
-  padding: $spacing-md $spacing-lg $spacing-md $spacing-lg;
+.cautionary {
+  background-color: var(--color-yellow-100);
 
-  @media (max-width: $layout-breakpoints-medium) {
-    padding: $spacing-md;
-  }
+  --spot-icon-color: var(--color-yellow-700);
 }
+
+// --------------------------------

package/src/Modal/ConfirmationModal/ConfirmationModal.spec.tsx

@@ -8,15 +8,15 @@ const user = userEvent.setup()
 
 const ConfirmationModalWrapper = ({
   children,
-  ...props
+  onDismiss: propsOnDismiss = (): void => undefined,
+  onConfirm: propsOnConfirm = (): void => undefined,
 }: Partial<ConfirmationModalProps>): JSX.Element => (
   <ConfirmationModal
-    mood="informative"
+    variant="success"
     isOpen={true}
     title="Example Modal Title"
-    onDismiss={(): void => undefined}
-    onConfirm={(): void => undefined}
-    {...props}
+    onDismiss={propsOnDismiss}
+    onConfirm={propsOnConfirm}
   >
     {children}
   </ConfirmationModal>

package/src/Modal/ConfirmationModal/ConfirmationModal.tsx

@@ -25,17 +25,16 @@ import {
 import { ButtonProps } from "~components/__actions__/v2"
 import styles from "./ConfirmationModal.module.scss"
 
-export type ConfirmationModalProps = {
+type Mood = "positive" | "informative" | "negative" | "cautionary" | "assertive"
+type Variant = "success" | "informative" | "warning" | "cautionary"
+
+type BaseConfirmationModalProps = {
   isOpen: boolean
   unpadded?: boolean
   /**
    * To display the Prominent variation of the modal types
    */
   isProminent?: boolean
-  /**
-   * Defines the modal type or mood
-   */
-  mood: Mood
   title: string
   onConfirm?: () => void
   onDismiss: () => void
@@ -53,10 +52,36 @@ export type ConfirmationModalProps = {
   children: React.ReactNode
 } & HTMLAttributes<HTMLDivElement>
 
-type Mood = "positive" | "informative" | "negative" | "cautionary" | "assertive"
+type ConfirmationModalMoods = {
+  /**
+   * @deprecated Please use `variant` instead
+   */
+  mood: Mood
+  variant?: never
+}
 
-const getIcon = (mood: Mood, isProminent: boolean): JSX.Element => {
-  switch (mood) {
+type ConfirmationModalVariants = {
+  /**
+   * @deprecated Please use `variant` instead
+   */
+  mood?: never
+  /**
+   * If you are transitioning from Moods:
+   * - `positive` should be `success`
+   * - `negative` should be `warning`
+   * - `assertive` should be `cautionary`
+   */
+  variant: Variant
+}
+
+export type ConfirmationModalProps = BaseConfirmationModalProps &
+  (ConfirmationModalMoods | ConfirmationModalVariants)
+
+const getIcon = (
+  variantName: Mood | Variant,
+  isProminent: boolean
+): JSX.Element => {
+  switch (variantName) {
     case "cautionary":
       return isProminent ? (
         <Cautionary />
@@ -70,12 +95,14 @@ const getIcon = (mood: Mood, isProminent: boolean): JSX.Element => {
         <InformationWhiteIcon inheritSize role="presentation" />
       )
     case "negative":
+    case "warning":
       return isProminent ? (
         <Negative />
       ) : (
         <ExclamationWhiteIcon inheritSize role="presentation" />
       )
     case "positive":
+    case "success":
       return isProminent ? (
         <Positive />
       ) : (
@@ -99,6 +126,7 @@ export const ConfirmationModal = ({
   isProminent = false,
   unpadded = false,
   mood,
+  variant,
   title,
   onConfirm,
   onAfterLeave,
@@ -110,9 +138,12 @@ export const ConfirmationModal = ({
   children,
   ...props
 }: ConfirmationModalProps): JSX.Element => {
+  const variantName = variant || mood
+
   const onDismiss = confirmWorking ? undefined : propsOnDismiss
 
   const footerActions: ButtonProps[] = []
+
   if (onConfirm) {
     const confirmAction = { label: confirmLabel, onClick: onConfirm }
     const workingProps = confirmWorking
@@ -145,7 +176,7 @@ export const ConfirmationModal = ({
           <div
             className={classnames(
               styles.header,
-              styles[`${mood}Header`],
+              variant ? styles[variant] : styles[`${mood}Header`],
               isProminent && styles.prominent,
               !unpadded && styles.padded
             )}
@@ -157,7 +188,7 @@ export const ConfirmationModal = ({
               )}
             >
               <div className={styles.spotIcon}>
-                {getIcon(mood, isProminent)}
+                {getIcon(variantName, isProminent)}
               </div>
             </div>
             <ModalAccessibleLabel isProminent={isProminent}>

package/src/Modal/ConfirmationModal/_docs/ConfirmationModal.mdx

@@ -32,9 +32,9 @@ it known to the user that they need to pay attention to important information.
 
 <Canvas of={ConfirmationModalStories.Prominent} />
 
-### Assertive
+### Cautionary
 
-The Assertive Confirmation Modal indicates a show-stopping problem that we couldn't address earlier in the flow.
+The Cautionary Confirmation Modal indicates a show-stopping problem that we couldn't address earlier in the flow.
 Use as a last resort.For example, server-side validation shows a form error that needs to be addressed before continuing.
 
-<Canvas of={ConfirmationModalStories.Assertive} />
+<Canvas of={ConfirmationModalStories.Cautionary} />

package/src/Modal/ConfirmationModal/_docs/ConfirmationModal.stories.tsx

@@ -14,7 +14,7 @@ const meta = {
   args: {
     isOpen: false,
     title: "Confirmation modal title",
-    mood: "cautionary",
+    variant: "success",
     children: (
       <Text variant="body">
         Confirmation modals contain smaller pieces of content and can provide
@@ -26,7 +26,14 @@ const meta = {
   },
   argTypes: {
     children: {
-      control: false,
+      control: {
+        disable: true,
+      },
+    },
+    mood: {
+      control: {
+        disable: true,
+      },
     },
   },
 } satisfies Meta<typeof ConfirmationModal>
@@ -79,9 +86,9 @@ export const Prominent: Story = {
   args: { isProminent: true },
 }
 
-export const Assertive: Story = {
+export const Cautionary: Story = {
   ...ConfirmationModalTemplate,
-  args: { mood: "assertive" },
+  args: { variant: "cautionary" },
 }
 
 export const Unpadded: Story = {

package/src/Modal/ContextModal/_docs/ContextModal.stories.tsx

@@ -21,7 +21,9 @@ const meta = {
   },
   argTypes: {
     children: {
-      control: false,
+      control: {
+        disable: true,
+      },
     },
   },
 } satisfies Meta<typeof ContextModal>

package/src/Modal/GenericModal/subcomponents/ModalFooter/ModalFooter.tsx

@@ -18,6 +18,9 @@ export type ModalFooterProps = {
   variant?: ActionsVariantProps
   unpadded?: boolean
   actions: ButtonProps[]
+  /**
+   * @deprecated we are no longer supporting different appearances for ModalFooter, instead there will only be a single default appearance set by the Button.
+   */
   appearance?: "primary" | "destructive"
   /**
    * @deprecated Please use data-testid

package/src/Modal/InputEditModal/InputEditModal.tsx

@@ -14,7 +14,10 @@ import styles from "./InputEditModal.module.scss"
 export type InputEditModalProps = {
   isOpen: boolean
   unpadded?: boolean
-  mood: "positive" | "destructive"
+  /**
+   * @deprecated we are no longer supporting different moods for InputModal, instead there will only be a single default variant set by the component.
+   */
+  mood?: "positive" | "destructive"
   title: string
   onSubmit: () => void
   onSecondaryAction?: () => void

package/src/Modal/InputEditModal/_docs/InputEditModal.mdx

@@ -23,19 +23,6 @@ They support the ability to edit up to 3 fields. Any more becomes crowded and a
 <Canvas of={InputEditModalStories.Playground} />
 <Controls of={InputEditModalStories.Playground} />
 
-## API
-
-### Mood
-
-#### Positive
-
-<Canvas of={InputEditModalStories.Positive} />
-
-#### Destructive
-When your modal is preforming a destructive action eg. delete customer data.
-
-<Canvas of={InputEditModalStories.Destructive} />
-
 ### Unpadded
 
 <Canvas of={InputEditModalStories.Unpadded} />

package/src/Modal/InputEditModal/_docs/InputEditModal.stories.tsx

@@ -29,7 +29,6 @@ const meta = {
   args: {
     isOpen: false,
     title: "Your input is valuable",
-    mood: "positive",
     children: <ExampleForm />,
     submitLabel: "Submit label",
     onSubmit: fn(),
@@ -37,7 +36,14 @@ const meta = {
   },
   argTypes: {
     children: {
-      control: false,
+      control: {
+        disable: true,
+      },
+    },
+    mood: {
+      control: {
+        disable: true,
+      },
     },
   },
 } satisfies Meta<typeof InputEditModal>
@@ -84,15 +90,8 @@ export const Playground: Story = {
   },
 }
 
-export const Positive: Story = {
-  ...InputModalTemplate,
-  args: { mood: "positive" },
-  ...chromaticModalSettings,
-}
-
-export const Destructive: Story = {
+export const Default: Story = {
   ...InputModalTemplate,
-  args: { mood: "destructive" },
   ...chromaticModalSettings,
 }
 

package/src/Notification/GlobalNotification/GlobalNotification.tsx

@@ -1,15 +1,20 @@
 import React from "react"
-import { NotificationType } from "~components/Notification/types"
 import { OverrideClassName } from "~types/OverrideClassName"
-import { GenericNotification } from "../subcomponents/GenericNotification"
+import {
+  GenericNotification,
+  GenericNotificationType,
+  GenericNotificationVariant,
+} from "../subcomponents/GenericNotification"
 
-export type GlobalNotificationProps = OverrideClassName<{
-  type: NotificationType
+export type GlobalNotificationBase = OverrideClassName<{
   children: React.ReactNode
   onHide?: () => void
   persistent?: boolean
 }>
 
+export type GlobalNotificationProps = GlobalNotificationBase &
+  (GenericNotificationType | GenericNotificationVariant)
+
 /**
  * {@link https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3082060757/Global+Notification Guidance} |
  * {@link https://cultureamp.design/?path=/docs/components-notifications-global-notification--docs Storybook}

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

@@ -21,81 +21,91 @@ export default {
   },
 } satisfies Meta
 
-const DEFAULT_CHILDREN: JSX.Element = (
-  <span>
-    {"This survey status has been changed to 'Archived'. "}
-    <a href="/">View all</a>
-  </span>
-)
-
-const DEFAULT_PROPS = {
-  persistent: false,
-  children: DEFAULT_CHILDREN,
-} satisfies Partial<GlobalNotificationProps>
-
-const VARIANTS_PROPS: Array<{
-  title: string
-  props: GlobalNotificationProps
-}> = [
+const variants = [
   {
     title: "Informative",
-    props: {
-      ...DEFAULT_PROPS,
-      type: "informative",
-    },
+    props: { variant: "informative" },
   },
   {
-    title: "Positive",
-    props: {
-      ...DEFAULT_PROPS,
-      type: "positive",
-    },
+    title: "Success",
+    props: { variant: "success" },
   },
   {
-    title: "Negative",
-    props: {
-      ...DEFAULT_PROPS,
-      type: "negative",
-    },
+    title: "Cautionary",
+    props: { variant: "cautionary" },
   },
   {
-    title: "Cautionary",
-    props: {
-      ...DEFAULT_PROPS,
-      type: "cautionary",
-    },
+    title: "Warning",
+    props: { variant: "warning" },
   },
   {
     title: "Security",
-    props: {
-      ...DEFAULT_PROPS,
-      type: "security",
-    },
+    props: { variant: "security" },
   },
   {
     title: "Persistent",
-    props: {
-      ...DEFAULT_PROPS,
-      type: "informative",
-      persistent: true,
-    },
+    props: { variant: "informative", persistent: true },
+  },
+] satisfies Array<{ title: string; props: Partial<GlobalNotificationProps> }>
+
+const types = [
+  {
+    title: "Informative",
+    props: { type: "informative" },
+  },
+  {
+    title: "Success",
+    props: { type: "positive" },
+  },
+  {
+    title: "Cautionary",
+    props: { type: "cautionary" },
+  },
+  {
+    title: "Negative",
+    props: { type: "negative" },
   },
-]
+  {
+    title: "Security",
+    props: { type: "security" },
+  },
+] satisfies Array<{ title: string; props: Partial<GlobalNotificationProps> }>
 
 const StickerSheetTemplate: StickerSheetStory = {
-  render: ({ isReversed }) => (
-    <>
-      <StickerSheet heading="GlobalNotification" isReversed={isReversed}>
-        <StickerSheet.Body>
-          {VARIANTS_PROPS.map(({ title, props }) => (
-            <StickerSheet.Row key={title} rowTitle={title}>
-              <GlobalNotification {...props} />
-            </StickerSheet.Row>
-          ))}
-        </StickerSheet.Body>
-      </StickerSheet>
-    </>
-  ),
+  render: ({ isReversed }) => {
+    const defaultProps = {
+      persistent: false,
+      children: (
+        <span>
+          {"This survey status has been changed to 'Archived'. "}
+          <a href="/">View all</a>
+        </span>
+      ),
+    } satisfies Partial<GlobalNotificationProps>
+
+    return (
+      <>
+        <StickerSheet heading="GlobalNotification" isReversed={isReversed}>
+          <StickerSheet.Body>
+            {variants.map(({ title, props }) => (
+              <StickerSheet.Row key={title} rowTitle={title}>
+                <GlobalNotification {...defaultProps} {...props} />
+              </StickerSheet.Row>
+            ))}
+          </StickerSheet.Body>
+        </StickerSheet>
+        <StickerSheet heading="Type (deprecated)" isReversed={isReversed}>
+          <StickerSheet.Body>
+            {types.map(({ title, props }) => (
+              <StickerSheet.Row key={title} rowTitle={title}>
+                <GlobalNotification {...defaultProps} {...props} />
+              </StickerSheet.Row>
+            ))}
+          </StickerSheet.Body>
+        </StickerSheet>
+      </>
+    )
+  },
 }
 
 export const StickerSheetDefault: StickerSheetStory = {