@kaizen/components 1.57.1 → 1.58.0

package/src/BrandMoment/BrandMoment.module.scss

@@ -13,18 +13,29 @@ $breakpoint-xl: 1366px; // TODO: create an xl breakpoint in design-tokens and re
   display: flex;
   flex-direction: column;
   align-items: center;
+  background-color: var(--brand-moment-background-color);
+}
 
-  &.informative {
-    background: $color-blue-100;
-  }
+/** @deprecated */
+.positive {
+  --brand-moment-background-color: var(--color-green-100);
+}
 
-  &.positive {
-    background: $color-green-100;
-  }
+.negative {
+  --brand-moment-background-color: var(--color-red-100);
+}
 
-  &.negative {
-    background: $color-red-100;
-  }
+/** end @deprecated */
+.informative {
+  --brand-moment-background-color: var(--color-blue-100);
+}
+
+.success {
+  --brand-moment-background-color: var(--color-green-100);
+}
+
+.warning {
+  --brand-moment-background-color: var(--color-red-100);
 }
 
 // --------------------------------

package/src/BrandMoment/BrandMoment.tsx

@@ -9,8 +9,25 @@ import { OverrideClassName } from "~types/OverrideClassName"
 import { useMediaQueries } from "~utils/useMediaQueries"
 import styles from "./BrandMoment.module.scss"
 
-export type BrandMomentProps = {
+type DeprecatedMoodProps = {
+  /** @deprecated Use `variant` instead */
   mood: "informative" | "positive" | "negative"
+  variant?: never
+}
+
+type VariantProps = {
+  /**
+   * If you are transitioning from `mood`:
+   * - `informative` remains as `informative`
+   * - `positive` should be `success`
+   * - `negative` should be `warning`
+   */
+  variant: "informative" | "success" | "warning"
+  /** @deprecated Use `variant` instead */
+  mood?: never
+}
+
+export type BrandMomentProps = {
   illustration: ReactElement<SceneProps>
   header: ReactNode
   body?: ReactNode
@@ -22,7 +39,8 @@ export type BrandMomentProps = {
     body?: ReactNode
     footer?: ReactNode
   }
-} & OverrideClassName<HTMLAttributes<HTMLDivElement>>
+} & OverrideClassName<HTMLAttributes<HTMLDivElement>> &
+  (DeprecatedMoodProps | VariantProps)
 
 /**
  * {@link https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3082061589/Brand+Moment Guidance} |
@@ -30,6 +48,7 @@ export type BrandMomentProps = {
  */
 export const BrandMoment = ({
   mood,
+  variant,
   illustration,
   header,
   body,
@@ -43,7 +62,11 @@ export const BrandMoment = ({
 
   return (
     <div
-      className={classnames(styles.body, styles[mood], classNameOverride)}
+      className={classnames(
+        styles.body,
+        variant ? styles[variant] : styles[mood],
+        classNameOverride
+      )}
       {...restProps}
     >
       <header className={styles.header}>{header}</header>

package/src/BrandMoment/_docs/BrandMoment.mdx

@@ -1,11 +1,10 @@
-import { Canvas, Meta } from "@storybook/blocks"
-import { InlineNotification } from "~components/Notification"
+import { Canvas, Controls, Meta } from "@storybook/blocks"
 import { ResourceLinks, KAIOInstallation } from "~storybook/components"
 import * as BrandMoment from "./BrandMoment.stories"
 
 <Meta of={BrandMoment} />
 
-# Badge
+# BrandMoment
 
 <ResourceLinks
   sourceCode="https://github.com/cultureamp/kaizen-design-system/tree/main/packages/components/src/BrandMoment"
@@ -20,18 +19,19 @@ import * as BrandMoment from "./BrandMoment.stories"
 
 A brand moment is a page that showcases the brand's vibrant animations and illustration. The page provides an engaging experience for users when they reach these junction, helping to create a strong connection between the brand and product.
 
-<InlineNotification persistent type="informative">Code snippets on this page have been disabled due to performance issues, see [Source Code](https://github.com/cultureamp/kaizen-design-system/tree/main/packages/components/src/BrandMoment) for code examples.</InlineNotification>
+<Canvas of={BrandMoment.Playground} />
+<Controls of={BrandMoment.Playground} />
 
-## Variants
+## Variant
 
-### Informative Intro
-<Canvas of={BrandMoment.InformativeIntro} />
+### Informative
 
-### Positive Outro
-<Canvas of={BrandMoment.PositiveOutro} />
+<Canvas of={BrandMoment.Informative} />
 
-### Positive Outro Customer Focused
-<Canvas of={BrandMoment.PositiveOutroCustomerFocused} />
+### Success
 
-### Error
-<Canvas of={BrandMoment.Error} />
+<Canvas of={BrandMoment.Success} />
+
+### Warning
+
+<Canvas of={BrandMoment.Warning} />

package/src/BrandMoment/_docs/BrandMoment.stickersheet.stories.tsx

@@ -0,0 +1,102 @@
+import React from "react"
+import { Meta } from "@storybook/react"
+import {
+  BrandMomentCaptureIntro,
+  BrandMomentError,
+  BrandMomentPositiveOutro,
+} from "~components/Illustration"
+import {
+  StickerSheet,
+  StickerSheetStory,
+} from "~storybook/components/StickerSheet"
+import { BrandMoment } from "../BrandMoment"
+import { Informative, Success, Warning } from "./BrandMoment.stories"
+
+export default {
+  title: "Components/BrandMoment",
+  parameters: {
+    chromatic: { disable: false },
+    controls: { disable: true },
+    a11y: {
+      config: {
+        rules: [
+          {
+            // There's gonna be duplicate landmarks here because it's a stickersheet
+            id: "landmark-no-duplicate-banner",
+            enabled: false,
+          },
+          {
+            // There's gonna be duplicate landmarks here because it's a stickersheet
+            id: "landmark-no-duplicate-contentinfo",
+            enabled: false,
+          },
+          {
+            // There's gonna be duplicate landmarks here because it's a stickersheet
+            id: "landmark-no-duplicate-main",
+            enabled: false,
+          },
+        ],
+      },
+    },
+  },
+} satisfies Meta
+
+const StickerSheetTemplate: StickerSheetStory = {
+  render: ({ isReversed }) => (
+    <>
+      <StickerSheet isReversed={isReversed} heading="Variant">
+        <StickerSheet.Body>
+          <StickerSheet.Row rowTitle="Informative">
+            <BrandMoment {...Informative.args} />
+          </StickerSheet.Row>
+          <StickerSheet.Row rowTitle="Success">
+            <BrandMoment {...Success.args} />
+          </StickerSheet.Row>
+          <StickerSheet.Row rowTitle="Warning">
+            <BrandMoment {...Warning.args} />
+          </StickerSheet.Row>
+        </StickerSheet.Body>
+      </StickerSheet>
+
+      <StickerSheet isReversed={isReversed} heading="Mood (deprecated)">
+        <StickerSheet.Body>
+          <StickerSheet.Row rowTitle="Informative">
+            <BrandMoment
+              {...Informative.args}
+              illustration={<BrandMomentCaptureIntro />}
+              variant={undefined}
+              mood="informative"
+            />
+          </StickerSheet.Row>
+          <StickerSheet.Row rowTitle="Positive">
+            <BrandMoment
+              {...Success.args}
+              illustration={<BrandMomentPositiveOutro />}
+              variant={undefined}
+              mood="positive"
+            />
+          </StickerSheet.Row>
+          <StickerSheet.Row rowTitle="Negative">
+            <BrandMoment
+              {...Warning.args}
+              illustration={<BrandMomentError />}
+              variant={undefined}
+              mood="negative"
+            />
+          </StickerSheet.Row>
+        </StickerSheet.Body>
+      </StickerSheet>
+    </>
+  ),
+}
+
+export const StickerSheetDefault: StickerSheetStory = {
+  ...StickerSheetTemplate,
+  name: "Sticker Sheet (Default)",
+}
+
+export const StickerSheetRTL: StickerSheetStory = {
+  ...StickerSheetTemplate,
+  name: "Sticker Sheet (RTL)",
+  parameters: { textDirection: "rtl" },
+}

package/src/BrandMoment/_docs/BrandMoment.stories.tsx

@@ -3,11 +3,9 @@ import React from "react"
 import { Meta, StoryObj } from "@storybook/react"
 import isChromatic from "chromatic"
 import {
-  ArrowLeftIcon,
   ArrowRightIcon,
   EmailIcon,
   FeedbackClassifyIcon,
-  SecurityTipIcon,
 } from "~components/Icon"
 import {
   BrandMomentCaptureIntro,
@@ -30,10 +28,12 @@ const illustrationProps = (
 ) satisfies AnimatedSceneProps
 
 const meta = {
-  title: "Components/Brand Moment",
+  title: "Components/BrandMoment",
   component: BrandMoment,
-  parameters: {
-    chromatic: { disable: false },
+  argTypes: {
+    mood: { control: false },
+    illustration: { control: false },
+    header: { control: false },
   },
 } satisfies Meta<typeof BrandMoment>
 
@@ -41,120 +41,39 @@ export default meta
 
 type Story = StoryObj<typeof meta>
 
-const IconRTLTemplate: Pick<Story, "render" | "parameters"> = {
-  render: ({ primaryAction, ...args }, { globals }) => (
-    <BrandMoment
-      {...args}
-      primaryAction={{
-        label: "Primary action label",
-        ...primaryAction,
-        icon:
-          globals.textDirection === "ltr" ? (
-            <ArrowRightIcon role="presentation" />
-          ) : (
-            <ArrowLeftIcon role="presentation" />
-          ),
-      }}
-    />
-  ),
-  parameters: {
-    docs: {
-      source: {
-        // Code snippets will cause the browser to freeze when using JSX.Elements
-        // within an object form prop, thus we must disable them to flip the
-        // primaryAction icon when changing the global text direction
-        code: "disabled",
-      },
-    },
-  },
-}
-
-export const InformativeIntro: Story = {
-  ...IconRTLTemplate,
-  name: "Informative intro",
+export const Playground: Story = {
   args: {
-    mood: "informative",
+    variant: "informative",
     illustration: <BrandMomentCaptureIntro {...illustrationProps} />,
     header: <MinimalBasic />,
     text: {
       subtitle: "Welcome to Culture Amp",
       title: "Let's dive in and see how it works",
     },
-    primaryAction: {
-      label: "Get started",
-      href: "#",
-      icon: <ArrowRightIcon role="presentation" />,
-      iconPosition: "end",
-    },
   },
 }
 
-export const PositiveOutro: Story = {
-  ...IconRTLTemplate,
-  name: "Positive outro",
+export const Informative: Story = {
   args: {
-    mood: "positive",
-    illustration: <BrandMomentPositiveOutro {...illustrationProps} />,
-    header: <MinimalBasic />,
-    text: {
-      title: "Import in progress",
-      body: (
-        <>
-          That&apos;s it for now. Your data is importing but you don&apos;t need
-          to hang out here while it happens. Get on with your day and we&apos;ll
-          let you know on the <a href="#">Users page</a> when it&apos;s
-          complete.
-        </>
-      ),
-    },
-    primaryAction: {
-      label: "Go to Users",
-      href: "#",
-      icon: <ArrowRightIcon role="presentation" />,
-      iconPosition: "end",
-    },
-  },
-}
-
-export const InformativeIntroCustomerFocused: Story = {
-  ...IconRTLTemplate,
-  name: "Informative intro (customer focused)",
-  args: {
-    mood: "informative",
+    variant: "informative",
     illustration: <BrandMomentCaptureIntro {...illustrationProps} />,
-    header: <MinimalCustomerFocused />,
+    header: <MinimalBasic />,
     text: {
-      subtitle: "A survey for Hooli",
-      title: "Manager Effectiveness Survey",
-      body: "Thank you for taking the time to respond to this survey. It'll help us better understand your experience and perspective.",
-      footer: (
-        <>
-          Your responses and information are securely collected and kept by
-          Culture Amp in accordance with our <a href="#">Privacy Policy</a>.
-          Your responses will be reported to Hooli based on the specific rules
-          for this survey. If you have any additional questions, please contact
-          us at <a href="#">support@cultureamp.com</a>.
-        </>
-      ),
+      subtitle: "Welcome to Culture Amp",
+      title: "Let's dive in and see how it works",
     },
     primaryAction: {
-      label: "Take survey",
+      label: "Get started",
       href: "#",
       icon: <ArrowRightIcon role="presentation" />,
       iconPosition: "end",
     },
-    secondaryAction: {
-      label: "About data safety",
-      icon: <SecurityTipIcon role="presentation" />,
-    },
   },
 }
 
-export const PositiveOutroCustomerFocused: Story = {
-  ...IconRTLTemplate,
-  name: "Positive outro (customer focused)",
+export const Success: Story = {
   args: {
-    mood: "positive",
+    variant: "success",
     illustration: <BrandMomentPositiveOutro {...illustrationProps} />,
     header: <MinimalCustomerFocused />,
     text: {
@@ -189,10 +108,9 @@ export const PositiveOutroCustomerFocused: Story = {
   },
 }
 
-export const Error: Story = {
-  ...IconRTLTemplate,
+export const Warning: Story = {
   args: {
-    mood: "negative",
+    variant: "warning",
     illustration: <BrandMomentError {...illustrationProps} />,
     header: <FakeNavBar />,
     text: {

package/src/Card/Card.module.scss

@@ -3,12 +3,63 @@
 @import "~@kaizen/design-tokens/sass/color";
 
 .wrapper {
-  color: $color-purple-800;
-  border: var(--border-width-1) solid;
-  border-radius: $border-borderless-border-radius;
-  box-shadow: $shadow-small-box-shadow;
+  color: var(--color-purple-800);
+  border: var(--border-width-1) solid var(--card-border-color);
+  background-color: var(--card-background-color);
+  border-radius: var(--border-borderless-border-radius);
+  box-shadow: var(--card-box-shadow);
+
+  --card-border-color: var(--color-gray-500);
+  --card-background-color: var(--color-white);
+  --card-box-shadow: var(--shadow-small-box-shadow);
+}
+
+.elevated {
+  --card-box-shadow: var(--shadow-large-box-shadow);
+}
+
+// Color styles ---------------------------
+.blue {
+  --card-background-color: var(--color-blue-100);
+  --card-border-color: var(--color-blue-400);
+}
+
+.gray {
+  --card-background-color: var(--color-gray-200);
+  --card-border-color: var(--color-gray-500);
+}
+
+.green {
+  --card-background-color: var(--color-green-100);
+  --card-border-color: var(--color-green-500);
+}
+
+.orange {
+  --card-background-color: var(--color-orange-100);
+  --card-border-color: var(--color-orange-600);
+}
+
+.purple {
+  --card-background-color: var(--color-purple-100);
+  --card-border-color: var(--color-purple-400);
 }
 
+.red {
+  --card-background-color: var(--color-red-100);
+  --card-border-color: var(--color-red-500);
+}
+
+.white {
+  --card-background-color: var(--color-white);
+  --card-border-color: var(--color-gray-500);
+}
+
+.yellow {
+  --card-background-color: var(--color-yellow-100);
+  --card-border-color: var(--color-yellow-700);
+}
+
+// Deprecated Variant styles ----------------
 .default {
   border-color: var(--color-gray-500);
   background-color: var(--color-white);
@@ -44,6 +95,4 @@
   background-color: $color-purple-100;
 }
 
-.elevated {
-  box-shadow: $shadow-large-box-shadow;
-}
+// --------------------------------------------

package/src/Card/Card.tsx

@@ -12,21 +12,43 @@ export type CardVariants =
   | "assertive"
   | "highlight"
 
-export type CardProps = OverrideClassName<HTMLAttributes<HTMLElement>> & {
+export type CardColors =
+  | "blue"
+  | "green"
+  | "gray"
+  | "orange"
+  | "purple"
+  | "red"
+  | "white"
+  | "yellow"
+
+export type CardProps = {
   children?: React.ReactNode
   /**
    * HTML elements that are allowed on Card.
    */
   tag?: "div" | "article" | "header" | "main" | "section" | "li"
-  /**
-   * determines the card background colour on the card. It should match to the type of content being conveyed.
-   */
-  variant?: CardVariants
   /**
    * Adds a larger box shadow to to the card container.
    */
   isElevated?: boolean
-}
+  /**
+   * If you are transitioning from `variant`:
+   * - `assertive` should be `orange`
+   * - `cautionary` should be `yellow`
+   * - `default` should be `white` OR you can remove the prop
+   * - `destructive` should be `red`
+   * - `highlight` should be `purple`
+   * - `informative` should be `blue`
+   * - `positive` should be `green`
+   * @default white
+   */
+  color?: CardColors
+  /**
+   * @deprecated Please use color instead
+   */
+  variant?: CardVariants
+} & OverrideClassName<Omit<HTMLAttributes<HTMLElement>, "color">>
 
 /**
  * {@link https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3082094938/Card Guidance} |
@@ -35,24 +57,26 @@ export type CardProps = OverrideClassName<HTMLAttributes<HTMLElement>> & {
 export const Card = ({
   children,
   tag = "div",
-  variant = "default",
+  variant,
+  color = "white",
   isElevated = false,
   classNameOverride,
   ...props
 }: CardProps): JSX.Element => {
-  const Tag = tag
+  const Element = tag
+
   return (
-    <Tag
+    <Element
       className={classnames(
         styles.wrapper,
-        styles[variant],
+        variant ? styles[variant] : styles[color],
         classNameOverride,
         isElevated && styles.elevated
       )}
       {...props}
     >
       {children}
-    </Tag>
+    </Element>
   )
 }
 

package/src/Card/_docs/Card.mdx

@@ -1,4 +1,4 @@
-import { Canvas, Controls, DocsStory, Meta } from "@storybook/blocks"
+import { Canvas, Controls, Meta } from "@storybook/blocks"
 import { ResourceLinks, KAIOInstallation } from "~storybook/components"
 import * as CardStories from "./Card.stories"
 
@@ -22,6 +22,9 @@ The `Card` component is a flexible container used to wrap primary content. It ha
 
 ## API
 
-<DocsStory of={CardStories.Variants} />
+### Colors
+<Canvas of={CardStories.Colors} />
+
+### Elevation
+<Canvas of={CardStories.Elevation} />
 
-<DocsStory of={CardStories.Elevation} />

package/src/Card/_docs/Card.stickersheet.stories.tsx

@@ -8,53 +8,58 @@ import { Card, CardProps } from "../index"
 
 export default {
   title: "Components/Card",
+  args: {
+    children: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
+  },
   parameters: {
     chromatic: { disable: false },
     controls: { disable: true },
   },
 } satisfies Meta
 
-const CardWrapper = (args: CardProps): JSX.Element => (
-  <Card {...args}>
-    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-  </Card>
-)
+const colors = [
+  "blue",
+  "green",
+  "gray",
+  "orange",
+  "purple",
+  "red",
+  "white",
+  "yellow",
+] satisfies Array<CardProps["color"]>
+
+const variants = [
+  "default",
+  "informative",
+  "positive",
+  "cautionary",
+  "destructive",
+  "assertive",
+  "highlight",
+] satisfies Array<CardProps["variant"]>
 
 const StickerSheetTemplate: StickerSheetStory = {
-  render: ({ isReversed }) => (
-    <StickerSheet isReversed={isReversed}>
-      <StickerSheet.Header
-        headings={[
-          "Base",
-          "Informative",
-          "Positive",
-          "Cautionary",
-          "Destructive",
-          "Assertive",
-          "Highlight",
-        ]}
-      />
-      <StickerSheet.Body>
-        <StickerSheet.Row>
-          <CardWrapper variant="default" />
-          <CardWrapper variant="informative" />
-          <CardWrapper variant="positive" />
-          <CardWrapper variant="cautionary" />
-          <CardWrapper variant="destructive" />
-          <CardWrapper variant="assertive" />
-          <CardWrapper variant="highlight" />
-        </StickerSheet.Row>
-        <StickerSheet.Row>
-          <CardWrapper variant="default" isElevated />
-          <CardWrapper variant="informative" isElevated />
-          <CardWrapper variant="positive" isElevated />
-          <CardWrapper variant="cautionary" isElevated />
-          <CardWrapper variant="destructive" isElevated />
-          <CardWrapper variant="assertive" isElevated />
-          <CardWrapper variant="highlight" isElevated />
-        </StickerSheet.Row>
-      </StickerSheet.Body>
-    </StickerSheet>
+  render: ({ isReversed, ...args }) => (
+    <>
+      <StickerSheet isReversed={isReversed} heading="Colors">
+        <StickerSheet.Body>
+          {colors.map(color => (
+            <StickerSheet.Row key={color} rowTitle={color}>
+              <Card {...args} color={color} />
+            </StickerSheet.Row>
+          ))}
+        </StickerSheet.Body>
+      </StickerSheet>
+      <StickerSheet isReversed={isReversed} heading="Variants (deprecated)">
+        <StickerSheet.Body>
+          {variants.map(variant => (
+            <StickerSheet.Row key={variant} rowTitle={variant}>
+              <Card {...args} variant={variant} />
+            </StickerSheet.Row>
+          ))}
+        </StickerSheet.Body>
+      </StickerSheet>
+    </>
   ),
 }