@kaizen/components 1.57.2 → 1.58.1

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

@@ -3,7 +3,7 @@ import { Meta, StoryObj } from "@storybook/react"
 import { Heading } from "~components/Heading"
 import { Text } from "~components/Text"
 import { Well } from "../index"
-import { borderStyleTypes, variantTypes } from "../types"
+import { borderStyleTypes } from "../types"
 
 const meta = {
   title: "Components/Well",
@@ -20,6 +20,9 @@ const meta = {
   },
   argTypes: {
     children: { control: false },
+    variant: {
+      control: false,
+    },
   },
 } satisfies Meta<typeof Well>
 
@@ -37,17 +40,41 @@ export const Playground: Story = {
   },
 }
 
-export const Variants: Story = {
+export const Colors: Story = {
   render: args => (
     <>
-      {variantTypes.map(variant => (
-        <>
-          <Heading tag="h3" variant="heading-6">
-            {variant}
-          </Heading>
-          <Well variant={variant} {...args} />
-        </>
-      ))}
+      <Heading tag="h4" variant="heading-6" classNameOverride="mb-12">
+        `white` is the new default when no color/variant is defined
+      </Heading>
+      <Well {...args} />
+      <Heading tag="h4" variant="heading-6" classNameOverride="mb-12">
+        `gray` is the accessible version of the former `default` variant
+      </Heading>
+      <Well {...args} color="gray" />
+      <Heading tag="h4" variant="heading-6" classNameOverride="mb-12">
+        `blue` replaces the `informative` variant
+      </Heading>
+      <Well {...args} color="blue" />
+      <Heading tag="h4" variant="heading-6" classNameOverride="mb-12">
+        `yellow` replaces the `cautionary` variant
+      </Heading>
+      <Well {...args} color="yellow" />
+      <Heading tag="h4" variant="heading-6" classNameOverride="mb-12">
+        `orange` replaces the `assertive` variant
+      </Heading>
+      <Well {...args} color="orange" />
+      <Heading tag="h4" variant="heading-6" classNameOverride="mb-12">
+        `red` replaces the `negative` variant
+      </Heading>
+      <Well {...args} color="red" />
+      <Heading tag="h4" variant="heading-6" classNameOverride="mb-12">
+        `green` replaces the `positive` variant
+      </Heading>
+      <Well {...args} color="green" />
+      <Heading tag="h4" variant="heading-6" classNameOverride="mb-12">
+        `purple` replaces the `prominent` variant
+      </Heading>
+      <Well {...args} color="purple" />
     </>
   ),
 }
@@ -57,10 +84,10 @@ export const BorderStyles: Story = {
     <>
       {borderStyleTypes.map(border => (
         <>
-          <Heading tag="h3" variant="heading-6">
+          <Heading tag="h4" variant="heading-6">
             {border}
           </Heading>
-          <Well borderStyle={border} {...args} />
+          <Well {...args} borderStyle={border} />
         </>
       ))}
     </>
@@ -69,23 +96,21 @@ export const BorderStyles: Story = {
 
 export const NoMargin: Story = {
   render: args => (
-    <>
-      <div className="flex gap-16">
-        <div>
-          <Heading tag="h3" variant="heading-6">
-            Margin (default)
-          </Heading>
-          <Well {...args} />
-          <Well {...args} />
-        </div>
-        <div>
-          <Heading tag="h3" variant="heading-6">
-            noMargin
-          </Heading>
-          <Well noMargin {...args} />
-          <Well {...args} />
-        </div>
+    <div className="flex gap-16">
+      <div>
+        <Heading tag="h4" variant="heading-6">
+          Margin (default)
+        </Heading>
+        <Well {...args} />
+        <Well {...args} />
       </div>
-    </>
+      <div>
+        <Heading tag="h4" variant="heading-6">
+          noMargin
+        </Heading>
+        <Well {...args} noMargin />
+        <Well {...args} />
+      </div>
+    </div>
   ),
 }

package/src/Well/types.ts

@@ -1,3 +1,4 @@
+/** @deprecated */
 export const variantTypes = [
   "positive",
   "negative",
@@ -8,8 +9,22 @@ export const variantTypes = [
   "prominent",
 ] as const
 
+/** @deprecated use `WellColors` and `color` prop instead  */
 export type WellVariantType = (typeof variantTypes)[number]
 
+export const wellColors = [
+  "white",
+  "gray",
+  "blue",
+  "yellow",
+  "orange",
+  "red",
+  "green",
+  "purple",
+] as const
+
+export type WellColors = (typeof wellColors)[number]
+
 export const borderStyleTypes = ["solid", "dashed", "none"] as const
 
 export type WellBorderStyleType = (typeof borderStyleTypes)[number]

package/src/__actions__/Button/v3/_docs/ApiSpecification.mdx

@@ -3,7 +3,7 @@ import { ResourceLinks, SbContent, KAIOInstallation } from "~storybook/component
 import * as docsStories from "./Button.docs.stories"
 import * as exampleStories from "./Button.stories"
 
-<Meta title="Actions/Button/v3/API specification" />
+<Meta title="Actions/Button/v3/API Specification" />
 
 <SbContent>
   # Button API Specification (v3)

package/src/{GuidanceBlock → __containers__/GuidanceBlock/v1}/GuidanceBlock.module.scss

@@ -4,8 +4,8 @@
 @import "~@kaizen/design-tokens/sass/color";
 @import "~@kaizen/design-tokens/sass/animation";
 @import "~@kaizen/design-tokens/sass/spacing";
-@import "../../styles/utils/responsive";
-@import "../../styles/utils/button-reset";
+@import "../../../../styles/utils/responsive";
+@import "../../../../styles/utils/button-reset";
 
 @mixin guidance-block-under-480 {
   @media (max-width: 480px) {

package/src/{GuidanceBlock → __containers__/GuidanceBlock/v1}/_docs/GuidanceBlock.mdx

@@ -4,7 +4,7 @@ import * as GuidanceBlockStories from "./GuidanceBlock.stories"
 
 <Meta of={GuidanceBlockStories} />
 
-# GuidanceBlock
+# GuidanceBlock (V1)
 
 <ResourceLinks
   sourceCode="https://github.com/cultureamp/kaizen-design-system/tree/main/packages/components/src/GuidanceBlock"
@@ -13,7 +13,7 @@ import * as GuidanceBlockStories from "./GuidanceBlock.stories"
 
 />
 
-<KAIOInstallation exportNames="GuidanceBlock" />
+<KAIOInstallation exportNames="GuidanceBlock" version="1" family="containers" />
 
 ## Overview
 

package/src/{GuidanceBlock → __containers__/GuidanceBlock/v1}/_docs/GuidanceBlock.stickersheet.stories.tsx

@@ -12,7 +12,7 @@ import { GuidanceBlock, GuidanceBlockProps } from "../index"
 import { variantsMap } from "../types"
 
 export default {
-  title: "Components/GuidanceBlock",
+  title: "Containers/GuidanceBlock/v1",
   parameters: {
     chromatic: { disable: false },
     controls: { disable: true },

package/src/{GuidanceBlock → __containers__/GuidanceBlock/v1}/_docs/GuidanceBlock.stories.tsx

@@ -29,7 +29,7 @@ const defaultText = {
 }
 
 const meta = {
-  title: "Components/GuidanceBlock",
+  title: "Containers/GuidanceBlock/v1",
   component: GuidanceBlock,
   args: {
     layout: "default",

package/src/__containers__/GuidanceBlock/v2/GuidanceBlock.module.scss

@@ -0,0 +1,356 @@
+@import "~@kaizen/design-tokens/sass/shadow";
+@import "~@kaizen/design-tokens/sass/border";
+@import "~@kaizen/design-tokens/sass/layout";
+@import "~@kaizen/design-tokens/sass/color";
+@import "~@kaizen/design-tokens/sass/animation";
+@import "~@kaizen/design-tokens/sass/spacing";
+@import "../../../../styles/utils/responsive";
+@import "../../../../styles/utils/button-reset";
+
+@mixin guidance-block-under-480 {
+  @media (max-width: 480px) {
+    @content;
+  }
+}
+
+$bannerPadding: $spacing-lg;
+$ca-banner-fade-out: opacity $animation-duration-slow ease;
+$ca-banner-collapse-height-delayed: margin-top $animation-duration-fast
+  $animation-duration-slow ease;
+$illustration-size: 155px;
+$scene-illustration-size: 300px;
+
+.rightMargin {
+  margin-right: $spacing-8;
+}
+
+.noRightMargin {
+  margin-right: 0;
+}
+
+.banner.noMaxWidth {
+  max-width: inherit;
+}
+
+.banner {
+  --border-width: var(--border-width-1);
+
+  display: flex;
+  flex-direction: column;
+  gap: $spacing-sm;
+  min-width: 320px;
+  max-width: $layout-breakpoints-large;
+  border: var(--border-width) var(--border-solid-border-style);
+  border-radius: $border-solid-border-radius;
+  padding: calc(#{$bannerPadding} - var(--border-width));
+  box-shadow: $shadow-small-box-shadow;
+  position: relative;
+  top: -1px;
+  transition: $ca-banner-fade-out, $ca-banner-collapse-height-delayed;
+  color: $color-purple-800;
+
+  @include ca-media-desktop {
+    min-height: calc(12rem - calc(#{$bannerPadding} * 2));
+    flex-direction: row;
+    gap: $spacing-md;
+    width: auto;
+    align-items: center;
+  }
+
+  @include ca-media-mobile {
+    min-width: unset;
+  }
+}
+
+.illustrationWrapper {
+  display: flex;
+
+  @include ca-media-tablet {
+    text-align: center;
+    justify-content: center;
+    align-self: center;
+    padding: $spacing-sm;
+  }
+
+  @include ca-media-mobile {
+    display: none;
+  }
+}
+
+.illustration {
+  width: $illustration-size;
+  height: $illustration-size;
+
+  // This has been created to handle scene illustrations consistently until the tile component is created
+  .hasSceneIllustration & {
+    display: flex;
+    justify-content: center;
+    max-width: $scene-illustration-size;
+    max-height: $scene-illustration-size;
+    width: $scene-illustration-size;
+    height: auto;
+
+    figure {
+      max-height: 100%;
+      max-width: 100%;
+      aspect-ratio: 4/3;
+    }
+
+    img {
+      height: 100%;
+      object-fit: contain;
+      object-position: center;
+    }
+  }
+}
+
+.descriptionContainer {
+  flex: 1;
+  text-align: center;
+  align-self: center;
+  max-width: 780px;
+
+  @include ca-media-desktop {
+    padding: 0 $spacing-sm;
+    text-align: left;
+  }
+
+  @include ca-media-mobile {
+    margin: $spacing-sm;
+    max-width: 100%;
+  }
+
+  [dir="rtl"] & {
+    @include ca-media-desktop {
+      padding: 0 $spacing-sm;
+      text-align: right;
+    }
+  }
+}
+
+.descriptionAndActions {
+  display: flex;
+  flex: 1;
+  align-items: center;
+  justify-content: space-between;
+  gap: $spacing-md;
+
+  @include ca-media-tablet-and-under {
+    flex-direction: column;
+    width: 100%;
+    align-items: unset;
+  }
+}
+
+.buttonContainer {
+  display: flex;
+  flex: 1 0 auto;
+  justify-content: center;
+  flex-direction: row-reverse;
+  gap: $spacing-sm;
+  min-width: max-content;
+
+  @include ca-media-tablet-and-up {
+    text-align: center;
+  }
+
+  @include ca-media-mobile {
+    flex-direction: column;
+    width: 100%;
+    margin-top: $spacing-xs;
+  }
+
+  [dir="rtl"] & svg {
+    transform: rotate(180deg);
+  }
+}
+
+.hidden {
+  opacity: 0%;
+  margin-bottom: 0;
+}
+
+.headingWrapper {
+  margin-bottom: $spacing-md;
+}
+
+.cancel {
+  @include button-reset;
+
+  cursor: pointer;
+
+  .icon {
+    opacity: 70%;
+    transition: $animation-duration-fast opacity;
+  }
+
+  &:disabled,
+  &.disabled {
+    .icon {
+      opacity: 30%;
+    }
+  }
+
+  &:not(:disabled, .disabled) {
+    &:hover,
+    &:focus,
+    &.hover {
+      .icon {
+        opacity: 100%;
+      }
+    }
+
+    &:active,
+    &.active {
+      .icon {
+        opacity: 100%;
+      }
+    }
+  }
+
+  position: absolute;
+  top: $spacing-sm;
+  right: $spacing-sm;
+  color: $color-purple-800;
+}
+
+.default {
+  border-color: var(--color-gray-500);
+  background: var(--color-white);
+}
+
+.expert-advice {
+  border-color: var(--color-purple-400);
+  background: $color-purple-100;
+}
+
+.inline,
+.stacked {
+  flex-flow: row wrap;
+  align-items: unset;
+  gap: $spacing-md;
+  min-width: unset;
+
+  @include ca-media-tablet-and-under {
+    flex-direction: unset;
+  }
+
+  .illustrationWrapper {
+    margin-right: $spacing-sm;
+
+    [dir="rtl"] & {
+      margin-left: $spacing-sm;
+      margin-right: inherit;
+    }
+
+    @include ca-media-tablet {
+      padding: 0;
+    }
+
+    @include ca-media-mobile {
+      display: flex;
+    }
+  }
+
+  .descriptionAndActions {
+    margin: auto 0;
+  }
+
+  .descriptionContainer {
+    text-align: left;
+    max-width: unset;
+    min-width: 320px;
+
+    @include ca-media-desktop {
+      padding: 0;
+    }
+
+    @include ca-media-mobile {
+      margin: 0;
+    }
+
+    [dir="rtl"] & {
+      text-align: right;
+
+      @include ca-media-desktop {
+        padding: 0;
+      }
+    }
+  }
+
+  .buttonContainer {
+    padding-left: $spacing-sm;
+    justify-content: flex-start;
+    width: unset;
+    min-width: unset;
+
+    @include ca-media-mobile {
+      flex-direction: row-reverse;
+    }
+
+    [dir="rtl"] & {
+      padding-left: 0;
+      padding-right: $spacing-sm;
+    }
+
+    > * {
+      width: unset;
+    }
+  }
+
+  &.hasSceneIllustration {
+    justify-content: center;
+  }
+
+  &.centerContent {
+    flex-direction: column;
+
+    &.hasSceneIllustration .illustration {
+      width: 100%;
+    }
+
+    .illustrationWrapper {
+      margin: 0 auto;
+      align-self: center;
+    }
+
+    .descriptionContainer {
+      text-align: center;
+      min-width: unset;
+
+      [dir="rtl"] & {
+        text-align: center;
+      }
+    }
+
+    .buttonContainer {
+      padding: 0;
+      flex-direction: column;
+      min-width: unset;
+      justify-content: center;
+    }
+  }
+
+  &.centerContent.smallScreenTextAlignment {
+    .descriptionContainer {
+      text-align: left;
+
+      [dir="rtl"] & {
+        text-align: right;
+      }
+    }
+  }
+}
+
+/* stylelint-disable no-descending-specificity */
+.stacked {
+  .descriptionAndActions {
+    flex-direction: column;
+    align-items: unset;
+  }
+
+  .descriptionContainer {
+    align-self: flex-start;
+  }
+}
+/* stylelint-enable no-descending-specificity */

package/src/__containers__/GuidanceBlock/v2/GuidanceBlock.spec.tsx

@@ -0,0 +1,82 @@
+import React from "react"
+import { cleanup, render, waitFor } from "@testing-library/react"
+import userEvent from "@testing-library/user-event"
+import { Informative } from "~components/Illustration"
+import { GuidanceBlock } from "./GuidanceBlock"
+
+const user = userEvent.setup()
+
+// eslint-disable-next-line ssr-friendly/no-dom-globals-in-module-scope
+window.matchMedia = jest.fn().mockImplementation(() => ({
+  matches: false,
+  media: "",
+  onchange: null,
+  addListener: jest.fn(),
+  removeListener: jest.fn(),
+}))
+
+describe("GuidanceBlock", () => {
+  afterEach(cleanup)
+
+  it("calls the action function when action button is clicked", async () => {
+    const onAction = jest.fn()
+    const { container } = render(
+      <GuidanceBlock
+        illustration={<Informative alt="" />}
+        text={{
+          title: "This is the call to action title",
+          description:
+            "Mussum Ipsum, cacilds vidis litro abertis. Suco de cevadiss, é um leite divinis.",
+        }}
+        actions={{
+          primary: { label: "Action!", onClick: onAction },
+        }}
+      />
+    )
+    const actionButton = container.querySelector("button")
+    actionButton && (await user.click(actionButton))
+
+    await waitFor(() => {
+      expect(onAction).toHaveBeenCalledTimes(1)
+    })
+  })
+
+  it("has a default title tag of h3", () => {
+    const { getByRole } = render(
+      <GuidanceBlock
+        illustration={<Informative alt="" />}
+        text={{
+          title: "This is the call to action title",
+          description:
+            "Mussum Ipsum, cacilds vidis litro abertis. Suco de cevadiss, é um leite divinis.",
+        }}
+      />
+    )
+    expect(
+      getByRole("heading", {
+        level: 3,
+        name: "This is the call to action title",
+      })
+    ).toBeInTheDocument()
+  })
+
+  it("can allow the user to override the title tag", () => {
+    const { getByRole } = render(
+      <GuidanceBlock
+        illustration={<Informative alt="" />}
+        text={{
+          title: "This is the call to action title",
+          description:
+            "Mussum Ipsum, cacilds vidis litro abertis. Suco de cevadiss, é um leite divinis.",
+          titleTag: "h2",
+        }}
+      />
+    )
+    expect(
+      getByRole("heading", {
+        level: 2,
+        name: "This is the call to action title",
+      })
+    ).toBeInTheDocument()
+  })
+})