@kaizen/components 1.57.1 → 1.58.0

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

@@ -1,6 +1,6 @@
 import React from "react"
 import { Meta, StoryObj } from "@storybook/react"
-import { Card } from "../index"
+import { Card, CardProps } from "../index"
 
 const meta = {
   title: "Components/Card",
@@ -8,6 +8,11 @@ const meta = {
   args: {
     children: "This is a default container",
   },
+  argTypes: {
+    variant: {
+      control: false,
+    },
+  },
 } satisfies Meta<typeof Card>
 
 export default meta
@@ -24,30 +29,25 @@ export const Playground: Story = {
   },
 }
 
-export const Variants: Story = {
+const colors = [
+  "blue",
+  "green",
+  "gray",
+  "orange",
+  "purple",
+  "red",
+  "white",
+  "yellow",
+] satisfies Array<CardProps["color"]>
+
+export const Colors: Story = {
   render: () => (
     <ul className="flex list-none gap-16">
-      <li>
-        <Card variant="default">Default</Card>
-      </li>
-      <li>
-        <Card variant="informative">Informative</Card>
-      </li>
-      <li>
-        <Card variant="positive">Positive</Card>
-      </li>
-      <li>
-        <Card variant="cautionary">Cautionary</Card>
-      </li>
-      <li>
-        <Card variant="destructive">Destructive</Card>
-      </li>
-      <li>
-        <Card variant="assertive">Assertive</Card>
-      </li>
-      <li>
-        <Card variant="highlight">Highlight</Card>
-      </li>
+      {colors.map(color => (
+        <li key={color}>
+          <Card color={color}>This is a default container</Card>
+        </li>
+      ))}
     </ul>
   ),
 }

package/src/EmptyState/EmptyState.module.scss

@@ -4,21 +4,22 @@
 @import "./mixins";
 
 .container {
-  --border-width: var(--border-width-1);
+  --empty-state-border-width: var(--border-width-1);
 
   display: flex;
   justify-content: space-around;
   width: 100%;
-  padding: calc(2% - var(--border-width))
-    calc(var(--spacing-24) - var(--border-width));
+  padding: calc(2% - var(--empty-state-border-width))
+    calc(var(--spacing-24) - var(--empty-state-border-width));
   color: $color-purple-800;
-  border: var(--border-width) var(--border-solid-border-style);
-  border-radius: $border-solid-border-radius;
+  border: var(--empty-state-border-width) solid var(--empty-state-border-color);
+  border-radius: var(--border-solid-border-radius);
+  background-color: var(--empty-state-background-color);
 
   @include small {
     flex-direction: column;
     align-items: center;
-    padding-block: calc(var(--spacing-24) - var(--border-width));
+    padding-block: calc(var(--spacing-24) - var(--empty-state-border-width));
   }
 
   &.straightCorners {
@@ -41,25 +42,42 @@
   }
 }
 
+/** @deprecated */
 .positive {
-  border-color: var(--color-green-500);
-  background-color: $color-green-100;
+  --empty-state-border-color: var(--color-green-500);
+  --empty-state-background-color: var(--color-green-100);
 }
 
 .negative,
 .action {
-  border-color: var(--color-red-500);
-  background-color: $color-red-100;
+  --empty-state-border-color: var(--color-red-500);
+  --empty-state-background-color: var(--color-red-100);
 }
 
 .neutral {
-  border-color: var(--color-purple-400);
-  background-color: $color-purple-100;
+  --empty-state-border-color: var(--color-purple-400);
+  --empty-state-background-color: var(--color-purple-100);
+}
+
+/** end @deprecated */
+.success {
+  --empty-state-border-color: var(--color-green-500);
+  --empty-state-background-color: var(--color-green-100);
+}
+
+.warning {
+  --empty-state-border-color: var(--color-red-500);
+  --empty-state-background-color: var(--color-red-100);
 }
 
 .informative {
-  border-color: var(--color-blue-400);
-  background-color: $color-blue-100;
+  --empty-state-border-color: var(--color-blue-400);
+  --empty-state-background-color: var(--color-blue-100);
+}
+
+.expert-advice {
+  --empty-state-border-color: var(--color-purple-400);
+  --empty-state-background-color: var(--color-purple-100);
 }
 
 .illustrationSide,

package/src/EmptyState/EmptyState.tsx

@@ -16,27 +16,41 @@ const ILLUSTRATIONS: Record<
   string,
   (props: AnimatedSceneProps) => JSX.Element
 > = {
+  success: EmptyStatesPositive,
+  warning: EmptyStatesNegative,
+  informative: EmptyStatesInformative,
+  "expert-advice": EmptyStatesNeutral,
+  /** @deprecated Replaced by success */
   positive: EmptyStatesPositive,
+  /** @deprecated Replaced by expert-advice */
   neutral: EmptyStatesNeutral,
+  /** @deprecated Replaced by warning */
   negative: EmptyStatesNegative,
-  informative: EmptyStatesInformative,
+  /** @deprecated Replaced by warning */
   action: EmptyStatesNegative,
 }
 
-type IllustrationType =
-  | "positive"
-  | "neutral"
-  | "negative"
-  | "informative"
-  | "action"
-
-type LayoutContextType = "sidebarAndContent" | "contentOnly"
-
 export type EmptyStateProps = {
   children?: React.ReactNode
   id?: string
-  illustrationType?: IllustrationType
-  layoutContext?: LayoutContextType
+  /** @deprecated Use `variant` instead */
+  illustrationType?:
+    | "positive"
+    | "informative"
+    | "negative"
+    | "action"
+    | "neutral"
+  /**
+   * If you are transitioning from `illustrationType`:
+   * - `positive` should be `success`
+   * - `informative` remains as `informative`
+   * - `negative` should be `warning`
+   * - `action` should be `warning`
+   * - `neutral` should be `expert-advice`
+   * @default informative
+   */
+  variant?: "success" | "warning" | "informative" | "expert-advice"
+  layoutContext?: "sidebarAndContent" | "contentOnly"
   bodyText: string | React.ReactNode
   straightCorners?: boolean
   headingProps?: HeadingProps
@@ -50,7 +64,8 @@ export type EmptyStateProps = {
 export const EmptyState = ({
   children,
   id,
-  illustrationType = "informative",
+  illustrationType,
+  variant = "informative",
   layoutContext = "sidebarAndContent",
   headingProps,
   bodyText,
@@ -60,17 +75,16 @@ export const EmptyState = ({
   classNameOverride,
   ...props
 }: EmptyStateProps): JSX.Element => {
-  const IllustrationComponent = ILLUSTRATIONS[illustrationType]
+  const IllustrationComponent = ILLUSTRATIONS[illustrationType ?? variant]
 
   return (
     <div
       className={classnames(
-        classNameOverride,
-        styles[illustrationType],
         styles.container,
-        styles.zen,
+        illustrationType ? styles[illustrationType] : styles[variant],
         styles[layoutContext],
-        straightCorners && styles.straightCorners
+        straightCorners && styles.straightCorners,
+        classNameOverride
       )}
       id={id}
       {...props}

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

@@ -1,5 +1,5 @@
 import React from "react"
-import { Meta, StoryFn } from "@storybook/react"
+import { Meta } from "@storybook/react"
 import isChromatic from "chromatic"
 import { ChevronRightIcon } from "~components/Icon"
 import { Button } from "~components/__actions__/v2"
@@ -8,7 +8,6 @@ import {
   StickerSheetStory,
 } from "~storybook/components/StickerSheet"
 import { EmptyState, EmptyStateProps } from "../index"
-import styles from "./EmptyState.stories.module.scss"
 
 export default {
   title: "Components/EmptyState",
@@ -20,141 +19,90 @@ export default {
 
 const IS_CHROMATIC = isChromatic()
 
-const EmptyStateWrapper: StoryFn<typeof EmptyState> = ({
+const EmptyStateWrapper = ({
   isAnimated,
   ...args
-}) => <EmptyState isAnimated={IS_CHROMATIC ? false : isAnimated} {...args} />
-
-const ButtonWrapper = (
-  <div className={styles.buttonContainer}>
-    <Button
-      label="Label"
-      icon={<ChevronRightIcon role="presentation" />}
-      iconPosition="end"
-    />
-  </div>
+}: EmptyStateProps): JSX.Element => (
+  <EmptyState isAnimated={IS_CHROMATIC ? false : isAnimated} {...args} />
 )
 
-const POSTIVE_PROPS: EmptyStateProps = {
-  children: ButtonWrapper,
-  headingProps: {
-    variant: "heading-3",
-    children: "Positive empty state",
-  },
-  bodyText:
-    "If providing further actions, include a link to an action or use a Default or Primary action.",
-  illustrationType: "positive",
-}
-
-const INFORMATIVE_PROPS: EmptyStateProps = {
-  headingProps: {
-    variant: "heading-3",
-    children: "Informative empty state",
-  },
-  bodyText:
-    "If providing further actions, include a link to an action or use a Default or Primary action.",
-  illustrationType: "informative",
-}
-
-const ACTION_PROPS: EmptyStateProps = {
-  children: ButtonWrapper,
-  headingProps: {
-    variant: "heading-3",
-    children: "Action empty state",
-  },
-  bodyText:
-    "If providing further actions, include a link to an action or use a Default or Primary action.",
-  illustrationType: "action",
-}
+const StickerSheetTemplate: StickerSheetStory = {
+  render: ({ isReversed }) => {
+    const defaultProps = {
+      headingProps: {
+        variant: "heading-3",
+        children: "Empty state",
+      },
+      bodyText:
+        "If providing further actions, include a link to an action or use a Default or Primary action.",
+    } satisfies EmptyStateProps
 
-const NEUTRAL_PROPS: EmptyStateProps = {
-  headingProps: {
-    variant: "heading-3",
-    children: "Neutral empty state",
-  },
-  bodyText:
-    "If providing further actions, include a link to an action or use a Default or Primary action.",
-  illustrationType: "neutral",
-}
+    const variants = [
+      "success",
+      "warning",
+      "informative",
+      "expert-advice",
+    ] satisfies Array<EmptyStateProps["variant"]>
 
-const NEGATIVE_PROPS: EmptyStateProps = {
-  children: ButtonWrapper,
-  headingProps: {
-    variant: "heading-3",
-    children: "Negative empty state",
-  },
-  bodyText:
-    "If providing further actions, include a link to an action or use a Default or Primary action.",
-  illustrationType: "negative",
-}
+    const illustrationTypes = [
+      "positive",
+      "neutral",
+      "negative",
+      "informative",
+      "action",
+    ] satisfies Array<EmptyStateProps["illustrationType"]>
 
-const STRAIGHT_CORNERS_PROPS: EmptyStateProps = {
-  children: ButtonWrapper,
-  headingProps: {
-    variant: "heading-3",
-    children: "Straight corners empty state",
-  },
-  bodyText:
-    "If providing further actions, include a link to an action or use a Default or Primary action.",
-  illustrationType: "action",
-  straightCorners: true,
-}
+    return (
+      <>
+        <StickerSheet isReversed={isReversed} heading="EmptyState">
+          <StickerSheet.Body>
+            {variants.map(variant => (
+              <StickerSheet.Row key={variant} rowTitle={variant}>
+                <EmptyStateWrapper {...defaultProps} variant={variant} />
+              </StickerSheet.Row>
+            ))}
+          </StickerSheet.Body>
+          <StickerSheet.Body>
+            <StickerSheet.Row rowTitle="straightCorners">
+              <EmptyStateWrapper {...defaultProps} straightCorners />
+            </StickerSheet.Row>
+          </StickerSheet.Body>
+        </StickerSheet>
 
-const CUSTOM_HEADING_PROPS: EmptyStateProps = {
-  children: ButtonWrapper,
-  bodyText:
-    "Customise heading level so that the correct semantic heading level can be used for your page.",
-  illustrationType: "neutral",
-  headingProps: {
-    variant: "heading-3",
-    children: "Custom heading empty state",
-    tag: "h2",
-    color: "dark-reduced-opacity",
+        <StickerSheet
+          isReversed={isReversed}
+          heading="Illustration type (deprecated)"
+        >
+          <StickerSheet.Body>
+            {illustrationTypes.map(illustrationType => (
+              <StickerSheet.Row
+                key={illustrationType}
+                rowTitle={illustrationType}
+              >
+                <EmptyStateWrapper
+                  {...defaultProps}
+                  illustrationType={illustrationType}
+                >
+                  <Button
+                    label="Label"
+                    icon={<ChevronRightIcon role="presentation" />}
+                    iconPosition="end"
+                  />
+                </EmptyStateWrapper>
+              </StickerSheet.Row>
+            ))}
+          </StickerSheet.Body>
+        </StickerSheet>
+      </>
+    )
   },
 }
 
-const StickerSheetTemplate: StickerSheetStory = {
-  render: ({ isReversed }) => (
-    <StickerSheet isReversed={isReversed}>
-      <StickerSheet.Body>
-        <StickerSheet.Row rowTitle="Positive">
-          <EmptyStateWrapper {...POSTIVE_PROPS} />
-        </StickerSheet.Row>
-        <StickerSheet.Row rowTitle="Informative">
-          <EmptyStateWrapper {...INFORMATIVE_PROPS} />
-        </StickerSheet.Row>
-        <StickerSheet.Row rowTitle="Action">
-          <EmptyStateWrapper {...ACTION_PROPS} />
-        </StickerSheet.Row>
-        <StickerSheet.Row rowTitle="Neutral">
-          <EmptyStateWrapper {...NEUTRAL_PROPS} />
-        </StickerSheet.Row>
-        <StickerSheet.Row rowTitle="Negative">
-          <EmptyStateWrapper {...NEGATIVE_PROPS} />
-        </StickerSheet.Row>
-        <StickerSheet.Row rowTitle="Straight Corners">
-          <EmptyStateWrapper {...STRAIGHT_CORNERS_PROPS} />
-        </StickerSheet.Row>
-        <StickerSheet.Row rowTitle="Custom heading">
-          <EmptyStateWrapper {...CUSTOM_HEADING_PROPS} />
-        </StickerSheet.Row>
-      </StickerSheet.Body>
-    </StickerSheet>
-  ),
-}
-
 export const StickerSheetDefault: StickerSheetStory = {
   ...StickerSheetTemplate,
   name: "Sticker Sheet (Default)",
 }
 
-export const StickerSheetReversed: StickerSheetStory = {
-  ...StickerSheetTemplate,
-  name: "Sticker Sheet (Reversed)",
-  parameters: { backgrounds: { default: "Purple 700" } },
-  args: { isReversed: true },
-}
-
 export const StickerSheetRTL: StickerSheetStory = {
   ...StickerSheetTemplate,
   name: "Sticker Sheet (RTL)",

package/src/EmptyState/_docs/EmptyState.stories.tsx

@@ -3,7 +3,6 @@ import { Meta, StoryObj } from "@storybook/react"
 import { ChevronRightIcon } from "~components/Icon"
 import { Button } from "~components/__actions__/v2"
 import { EmptyState } from "../index"
-import styles from "./EmptyState.stories.module.scss"
 
 const meta = {
   title: "Components/EmptyState",
@@ -16,16 +15,15 @@ const meta = {
       mapping: {
         "Default (no children)": undefined,
         "Button (chevron right)": (
-          <div className={styles.buttonContainer}>
-            <Button
-              label="Label"
-              icon={<ChevronRightIcon role="presentation" />}
-              iconPosition="end"
-            />
-          </div>
+          <Button
+            label="Label"
+            icon={<ChevronRightIcon role="presentation" />}
+            iconPosition="end"
+          />
         ),
       },
     },
+    illustrationType: { control: false },
   },
   args: {
     headingProps: {

package/src/ErrorPage/ErrorPage.tsx

@@ -64,7 +64,7 @@ export const ErrorPage = ({
           </>
         }
         illustration={<BrandMomentError isAnimated loop />}
-        mood="negative"
+        variant="warning"
         primaryAction={{
           ...actions.primary,
           icon: <ArrowRightIcon role="presentation" />,