@kaizen/components 1.57.1 → 1.58.0

package/src/Tile/InformationTile/_docs/InformationTile.stories.tsx

@@ -1,6 +1,5 @@
 import React from "react"
 import { Meta, StoryObj } from "@storybook/react"
-import { moodsList } from "~components/Tile/subcomponents/GenericTile/types"
 import { InformationTile } from "../index"
 
 const meta = {
@@ -11,6 +10,9 @@ const meta = {
     metadata: "Side A",
     footer: <>Example Footer</>,
   },
+  argTypes: {
+    mood: { control: false },
+  },
 } satisfies Meta<typeof InformationTile>
 
 export default meta
@@ -27,14 +29,24 @@ export const Playground: Story = {
   },
 }
 
-export const Moods: Story = {
+export const Variants: Story = {
   render: args => (
-    <div className="flex gap-16 flex-wrap">
-      {moodsList.map(mood => (
-        <InformationTile key={mood} mood={mood} {...args} />
-      ))}
-    </div>
+    <>
+      <InformationTile {...args} variant="default" title="default" />
+      <InformationTile
+        {...args}
+        variant="expert-advice"
+        title="expert-advice"
+      />
+    </>
   ),
+  decorators: [
+    Story => (
+      <div className="flex gap-16 flex-wrap">
+        <Story />
+      </div>
+    ),
+  ],
 }
 
 export const Information: Story = {

package/src/Tile/MultiActionTile/_docs/MultiActionTile.mdx

@@ -24,8 +24,9 @@ A visually interesting item in a list consisting of a card, visual, title, metad
 
 ## API
 
-### Moods
-<Canvas of={MultiActionTileStories.Moods} />
+### Variants
+
+<Canvas of={MultiActionTileStories.Variants} />
 
 ### Secondary Action
 <Canvas of={MultiActionTileStories.SecondaryAction} />

package/src/Tile/MultiActionTile/_docs/MultiActionTile.stickersheet.stories.tsx

@@ -1,11 +1,10 @@
 import React from "react"
 import { Meta } from "@storybook/react"
-import { moodsList } from "~components/Tile/subcomponents/GenericTile/types"
 import {
   StickerSheet,
   StickerSheetStory,
 } from "~storybook/components/StickerSheet"
-import { MultiActionTile } from "../index"
+import { MultiActionTile, MultiActionTileProps } from "../index"
 
 export default {
   title: "Components/Tiles/MultiActionTile",
@@ -16,31 +15,70 @@ export default {
 } satisfies Meta
 
 const StickerSheetTemplate: StickerSheetStory = {
-  render: () => (
-    <StickerSheet>
-      <StickerSheet.Body>
-        {(["default", ...moodsList] as const).map(mood => (
-          <StickerSheet.Row key={mood} rowTitle={mood}>
-            <MultiActionTile
-              mood={mood === "default" ? undefined : mood}
-              title="Title"
-              metadata="Side A"
-              information="Side B"
-              primaryAction={{
-                label: "Take Action!",
-              }}
-              secondaryAction={{
-                label: "Nevermind",
-              }}
-            />
-          </StickerSheet.Row>
-        ))}
-      </StickerSheet.Body>
-    </StickerSheet>
-  ),
+  render: () => {
+    const defaultProps = {
+      title: "Title",
+      metadata: "Side A",
+      information: "Side B",
+      primaryAction: {
+        label: "Take Action!",
+      },
+      secondaryAction: {
+        label: "Nevermind",
+      },
+    } satisfies MultiActionTileProps
+
+    const variants = ["default", "expert-advice"] satisfies Array<
+      MultiActionTileProps["variant"]
+    >
+
+    const moods = [
+      "positive",
+      "informative",
+      "cautionary",
+      "assertive",
+      "negative",
+      "prominent",
+    ] satisfies Array<MultiActionTileProps["mood"]>
+
+    return (
+      <>
+        <StickerSheet heading="MultiActionTile">
+          <StickerSheet.Body>
+            {variants.map(variant => (
+              <StickerSheet.Row key={variant} rowTitle={variant}>
+                <MultiActionTile {...defaultProps} variant={variant} />
+              </StickerSheet.Row>
+            ))}
+          </StickerSheet.Body>
+        </StickerSheet>
+
+        <StickerSheet heading="Mood (deprecated)">
+          <StickerSheet.Body>
+            <>
+              <StickerSheet.Row rowTitle="default">
+                <MultiActionTile {...defaultProps} />
+              </StickerSheet.Row>
+              {moods.map(mood => (
+                <StickerSheet.Row key={mood} rowTitle={mood}>
+                  <MultiActionTile {...defaultProps} mood={mood} />
+                </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/Tile/MultiActionTile/_docs/MultiActionTile.stories.tsx

@@ -1,6 +1,5 @@
 import React from "react"
 import { Meta, StoryObj } from "@storybook/react"
-import { moodsList } from "~components/Tile/subcomponents/GenericTile/types"
 import { MultiActionTile } from "../index"
 
 const meta = {
@@ -13,6 +12,9 @@ const meta = {
       label: "Take Action!",
     },
   },
+  argTypes: {
+    mood: { control: false },
+  },
 } satisfies Meta<typeof MultiActionTile>
 
 export default meta
@@ -29,14 +31,24 @@ export const Playground: Story = {
   },
 }
 
-export const Moods: Story = {
+export const Variants: Story = {
   render: args => (
-    <div className="flex gap-16 flex-wrap">
-      {moodsList.map(mood => (
-        <MultiActionTile key={mood} mood={mood} {...args} />
-      ))}
-    </div>
+    <>
+      <MultiActionTile {...args} variant="default" title="default" />
+      <MultiActionTile
+        {...args}
+        variant="expert-advice"
+        title="expert-advice"
+      />
+    </>
   ),
+  decorators: [
+    Story => (
+      <div className="flex gap-16 flex-wrap">
+        <Story />
+      </div>
+    ),
+  ],
 }
 
 export const Information: Story = {

package/src/Tile/subcomponents/GenericTile/GenericTile.module.scss

@@ -44,9 +44,6 @@ $tilePaddingTop: $spacing-xl;
 
 .face {
   position: absolute;
-  background-color: $color-white;
-  border: var(--border-width-1) var(--border-solid-border-style);
-  border-radius: 7px;
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
@@ -54,6 +51,9 @@ $tilePaddingTop: $spacing-xl;
   width: 100%;
   height: 100%;
   backface-visibility: hidden;
+  border: var(--border-width-1) solid var(--generic-tile-border-color);
+  border-radius: var(--border-solid-border-radius);
+  background-color: var(--generic-tile-background-color);
 
   * {
     backface-visibility: hidden;
@@ -62,41 +62,53 @@ $tilePaddingTop: $spacing-xl;
 
 .faceFront {
   justify-content: space-between;
-  border-color: var(--color-gray-500);
   padding: $tilePaddingTop $spacing-md $spacing-md;
 }
 
 .faceBack {
+  --generic-tile-border-color: var(--color-blue-400);
+  --generic-tile-background-color: var(--color-blue-100);
+
   padding-top: $tilePaddingTop;
   transform: rotateY(180deg);
-  border-color: var(--color-blue-400);
-  background-color: $color-blue-100;
 }
 
-.faceMoodPositive {
-  border-color: var(--color-green-500);
-  background-color: $color-green-100;
+/** @deprecated */
+.positive {
+  --generic-tile-border-color: var(--color-green-500);
+  --generic-tile-background-color: var(--color-green-100);
+}
+
+.informative {
+  --generic-tile-border-color: var(--color-blue-400);
+  --generic-tile-background-color: var(--color-blue-100);
+}
+
+.cautionary {
+  --generic-tile-border-color: var(--color-yellow-700);
+  --generic-tile-background-color: var(--color-yellow-100);
 }
 
-.faceMoodInformative {
-  border-color: var(--color-blue-400);
-  background-color: $color-blue-100;
+.negative,
+.assertive {
+  --generic-tile-border-color: var(--color-red-500);
+  --generic-tile-background-color: var(--color-red-100);
 }
 
-.faceMoodCautionary {
-  border-color: var(--color-yellow-700);
-  background-color: $color-yellow-100;
+.prominent {
+  --generic-tile-border-color: var(--color-purple-400);
+  --generic-tile-background-color: var(--color-purple-100);
 }
 
-.faceMoodNegative,
-.faceMoodAssertive {
-  border-color: var(--color-red-500);
-  background-color: $color-red-100;
+/** end @deprecated */
+.default {
+  --generic-tile-border-color: var(--color-gray-500);
+  --generic-tile-background-color: var(--color-white);
 }
 
-.faceMoodProminent {
-  border-color: var(--color-purple-400);
-  background-color: $color-purple-100;
+.expert-advice {
+  --generic-tile-border-color: var(--color-purple-400);
+  --generic-tile-background-color: var(--color-purple-100);
 }
 
 .isFlipped {

package/src/Tile/subcomponents/GenericTile/GenericTile.tsx

@@ -7,7 +7,6 @@ import { GenericButtonProps } from "~components/__actions__/Button/v1/GenericBut
 import { IconButton } from "~components/__actions__/v2"
 import { OverrideClassName } from "~types/OverrideClassName"
 import Action from "./Action"
-import { Moods } from "./types"
 import styles from "./GenericTile.module.scss"
 
 export type TileAction = {
@@ -34,7 +33,21 @@ export type GenericTileProps = {
   titleTag?: AllowedHeadingTags
   metadata?: string
   information?: TileInformation | React.ReactNode
-  mood?: Moods
+  /** @deprecated Use `variant` instead */
+  mood?:
+    | "positive"
+    | "informative"
+    | "cautionary"
+    | "assertive"
+    | "negative"
+    | "prominent"
+  /**
+   * If you are transitioning from `mood`:
+   * - `prominent` should be `expert-advice`
+   * - all else should be `default`
+   * @default default
+   */
+  variant?: "default" | "expert-advice"
   footer: React.ReactNode
 } & OverrideClassName<Omit<HTMLAttributes<HTMLDivElement>, "title">>
 
@@ -45,6 +58,7 @@ export const GenericTile = ({
   metadata,
   information,
   mood,
+  variant = "default",
   footer,
   classNameOverride,
   ...restProps
@@ -84,12 +98,7 @@ export const GenericTile = ({
       className={classnames(
         styles.face,
         styles.faceFront,
-        mood === "positive" && styles.faceMoodPositive,
-        mood === "informative" && styles.faceMoodInformative,
-        mood === "cautionary" && styles.faceMoodCautionary,
-        mood === "assertive" && styles.faceMoodAssertive,
-        mood === "negative" && styles.faceMoodNegative,
-        mood === "prominent" && styles.faceMoodProminent
+        mood ? styles[mood] : styles[variant]
       )}
     >
       {information && (

package/src/Tile/subcomponents/GenericTile/_docs/GenericTile.stickersheet.stories.tsx

@@ -4,8 +4,7 @@ import {
   StickerSheet,
   StickerSheetStory,
 } from "~storybook/components/StickerSheet"
-import { GenericTile } from "../index"
-import { moodsList } from "../types"
+import { GenericTile, GenericTileProps } from "../index"
 
 export default {
   title: "Components/Tiles/GenericTile",
@@ -16,26 +15,65 @@ export default {
 } satisfies Meta
 
 const StickerSheetTemplate: StickerSheetStory = {
-  render: ({ isReversed }) => (
-    <StickerSheet isReversed={isReversed}>
-      <StickerSheet.Body>
-        {(["default", ...moodsList] as const).map(mood => (
-          <StickerSheet.Row key={mood} rowTitle={mood}>
-            <GenericTile
-              mood={mood === "default" ? undefined : mood}
-              title="Title"
-              metadata="metadata"
-              information="string"
-              footer={<>Footer</>}
-            />
-          </StickerSheet.Row>
-        ))}
-      </StickerSheet.Body>
-    </StickerSheet>
-  ),
+  render: () => {
+    const defaultProps = {
+      title: "Title",
+      metadata: "metadata",
+      information: "string",
+      footer: <>Footer</>,
+    } satisfies GenericTileProps
+
+    const variants = ["default", "expert-advice"] satisfies Array<
+      GenericTileProps["variant"]
+    >
+
+    const moods = [
+      "positive",
+      "informative",
+      "cautionary",
+      "assertive",
+      "negative",
+      "prominent",
+    ] satisfies Array<GenericTileProps["mood"]>
+
+    return (
+      <>
+        <StickerSheet heading="GenericTile">
+          <StickerSheet.Body>
+            {variants.map(variant => (
+              <StickerSheet.Row key={variant} rowTitle={variant}>
+                <GenericTile {...defaultProps} variant={variant} />
+              </StickerSheet.Row>
+            ))}
+          </StickerSheet.Body>
+        </StickerSheet>
+
+        <StickerSheet heading="Mood (deprecated)">
+          <StickerSheet.Body>
+            <>
+              <StickerSheet.Row rowTitle="default">
+                <GenericTile {...defaultProps} />
+              </StickerSheet.Row>
+              {moods.map(mood => (
+                <StickerSheet.Row key={mood} rowTitle={mood}>
+                  <GenericTile {...defaultProps} mood={mood} />
+                </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/Well/Well.module.scss

@@ -1,69 +1,106 @@
-@import "~@kaizen/design-tokens/sass/color";
-@import "~@kaizen/design-tokens/sass/border";
-@import "~@kaizen/design-tokens/sass/spacing";
-
 .container {
-  border-width: $border-width-1;
-  border-radius: $border-solid-border-radius;
-  margin-bottom: $spacing-md;
+  background-color: var(--background-color);
+  border-width: var(--border-width-1);
+  border-radius: var(--border-solid-border-radius);
+  border-style: var(--border-style);
+  margin-bottom: var(--spacing-24);
+  color: var(--color-purple-800);
+  border-color: var(--border-color);
 }
 
 .noMargin {
   margin: 0;
 }
 
-// Background Style Variations
-.default {
-  background-color: var(--color-gray-200);
-  border-color: $color-gray-500;
+.white {
+  --background-color: var(--color-white);
+  --border-color: var(--color-gray-500);
+}
+
+.gray {
+  --background-color: var(--color-gray-200);
+  --border-color: var(--color-gray-500);
+}
+
+.blue {
+  --background-color: var(--color-blue-100);
+  --border-color: var(--color-blue-400);
+}
+
+.yellow {
+  --background-color: var(--color-yellow-100);
+  --border-color: var(--color-yellow-700);
+}
+
+.orange {
+  --background-color: var(--color-orange-100);
+  --border-color: var(--color-orange-600);
+}
+
+.red {
+  --background-color: var(--color-red-100);
+  --border-color: var(--color-red-500);
+}
+
+.green {
+  --background-color: var(--color-green-100);
+  --border-color: var(--color-green-500);
+}
+
+.purple {
+  --background-color: var(--color-purple-100);
+  --border-color: var(--color-purple-400);
 }
 
 .positive {
-  background: $color-green-100;
-  border-color: $color-green-500;
-  color: $color-purple-800;
+  --background-color: var(--color-green-100);
+  --border-color: var(--color-green-500);
+}
+
+// These are @deprecated but must come after `color` so not everything will default to white
+// This will be @deprecated
+.default {
+  --background-color: var(--color-gray-200);
+  --border-color: var(--color-gray-500);
 }
 
 .negative {
-  background: $color-red-100;
-  border-color: $color-red-500;
-  color: $color-purple-800;
+  --background-color: var(--color-red-100);
+  --border-color: var(--color-red-500);
 }
 
 .informative {
-  background: $color-blue-100;
-  border-color: $color-blue-400;
-  color: $color-purple-800;
+  --background-color: var(--color-blue-100);
+  --border-color: var(--color-blue-400);
 }
 
 .cautionary {
-  background: $color-yellow-100;
-  border-color: $color-yellow-700;
-  color: $color-purple-800;
+  --background-color: var(--color-yellow-100);
+  --border-color: var(--color-yellow-700);
 }
 
 .assertive {
-  background: $color-orange-100;
-  border-color: $color-orange-600;
-  color: $color-purple-800;
+  --background-color: var(--color-orange-100);
+  --border-color: var(--color-orange-600);
 }
 
 .prominent {
-  background: $color-purple-100;
-  border-color: $color-purple-400;
-  color: $color-purple-800;
+  --background-color: var(--color-purple-100);
+  --border-color: var(--color-purple-400);
 }
 
+// @deprecated end
+
 // Border Style Variations
 .solid {
-  border-style: $border-solid-border-style;
+  --border-style: solid;
 }
 
 .dashed {
-  border-style: $border-dashed-border-style;
+  --border-style: dashed;
 }
 
 .none {
-  border-color: $border-borderless-border-color;
-  border-style: $border-borderless-border-style;
+  --border-color: transparent;
+  --border-style: none;
 }

package/src/Well/Well.tsx

@@ -1,12 +1,16 @@
 import React, { HTMLAttributes } from "react"
 import classnames from "classnames"
 import { OverrideClassName } from "~types/OverrideClassName"
-import { WellBorderStyleType, WellVariantType } from "./types"
+import { WellBorderStyleType, WellVariantType, WellColors } from "./types"
 import styles from "./Well.module.scss"
 
 export type WellProps = {
   children?: React.ReactNode
+  /** @deprecated This will not fallback to `default` variant. `default` can be used but must be explicitly passed to the Well component. It is recommended to use `color` prop and `gray` value if you need a gray background. */
   variant?: WellVariantType
+  /** @default `white` */
+  color?: WellColors
+  /** @default `solid` */
   borderStyle?: WellBorderStyleType
   noMargin?: boolean
 } & OverrideClassName<HTMLAttributes<HTMLDivElement>>
@@ -17,7 +21,8 @@ export type WellProps = {
  */
 export const Well = ({
   children,
-  variant = "default",
+  variant,
+  color = "white",
   borderStyle = "solid",
   noMargin = false,
   classNameOverride,
@@ -27,7 +32,8 @@ export const Well = ({
     className={classnames(
       styles.container,
       styles[borderStyle],
-      styles[variant],
+      styles[color],
+      variant && styles[variant],
       noMargin && styles.noMargin,
       classNameOverride
     )}

package/src/Well/_docs/Well.mdx

@@ -24,11 +24,18 @@ Wells are used as a visual container around secondary content.
 
 ## API
 
-### Variants
-<Canvas of={WellStories.Variants} />
+### Color
+
+Formerly controlled by `variant`, `color` sets the background and border color of the `Well`.
+
+All `variant`s have a corresponding `color` value, with some minor update to ensure minimum contrast ratios are met.
+
+<Canvas of={WellStories.Colors} />
+
 
 ### Border Styles
 <Canvas of={WellStories.BorderStyles} />
 
 ### No Margin
 <Canvas of={WellStories.NoMargin} />
+

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

@@ -6,7 +6,7 @@ import {
   StickerSheetStory,
 } from "~storybook/components/StickerSheet"
 import { Well, WellProps } from "../index"
-import { borderStyleTypes, variantTypes } from "../types"
+import { borderStyleTypes, wellColors, variantTypes } from "../types"
 
 export default {
   title: "Components/Well",
@@ -48,6 +48,15 @@ const StickerSheetTemplate: StickerSheetStory = {
             </StickerSheet.Row>
           ))}
         </StickerSheet.Body>
+        <StickerSheet.Body>
+          {wellColors.map(color => (
+            <StickerSheet.Row key={color} rowTitle={color}>
+              {borderStyleTypes.map(border => (
+                <WellWrapped key={border} color={color} borderStyle={border} />
+              ))}
+            </StickerSheet.Row>
+          ))}
+        </StickerSheet.Body>
       </StickerSheet>
       <StickerSheet>
         <StickerSheet.Header headings={["Margin", "No Margin"]} />