@kaizen/components 1.67.21 → 1.67.22

package/src/EmptyState/EmptyState.tsx

@@ -10,7 +10,7 @@ import {
 } from "~components/Illustration"
 import { Text } from "~components/Text"
 import { OverrideClassName } from "~components/types/OverrideClassName"
-import styles from "./EmptyState.module.scss"
+import styles from "./EmptyState.module.css"
 
 const ILLUSTRATIONS: Record<
   string,
@@ -50,6 +50,7 @@ export type EmptyStateProps = {
    * @default informative
    */
   variant?: "success" | "warning" | "informative" | "expert-advice"
+  /** @deprecated - This prop no longer has any effect */
   layoutContext?: "sidebarAndContent" | "contentOnly"
   bodyText: string | React.ReactNode
   straightCorners?: boolean
@@ -66,7 +67,7 @@ export const EmptyState = ({
   id,
   illustrationType,
   variant = "informative",
-  layoutContext = "sidebarAndContent",
+  layoutContext: _,
   headingProps,
   bodyText,
   straightCorners,
@@ -82,33 +83,30 @@ export const EmptyState = ({
       className={classnames(
         styles.container,
         illustrationType ? styles[illustrationType] : styles[variant],
-        styles[layoutContext],
         straightCorners && styles.straightCorners,
         classNameOverride
       )}
       id={id}
       {...props}
     >
-      <div className={styles.illustrationSide}>
-        {isAnimated ? (
-          <IllustrationComponent
-            isAnimated
-            loop={loop}
-            classNameOverride={styles.illustration}
-          />
-        ) : (
-          <IllustrationComponent classNameOverride={styles.illustration} />
-        )}
-      </div>
-      <div className={styles.textSide}>
-        <div className={styles.textSideInner}>
+      <div className={styles.content}>
+        <div className={styles.illustrationContainer}>
+          {isAnimated ? (
+            <IllustrationComponent
+              isAnimated
+              loop={loop}
+              classNameOverride={styles.illustration}
+            />
+          ) : (
+            <IllustrationComponent classNameOverride={styles.illustration} />
+          )}
+        </div>
+        <div className={styles.textContainer}>
           {headingProps && (
             <Heading classNameOverride={styles.heading} {...headingProps} />
           )}
-          <Text variant="body" classNameOverride={styles.description}>
-            {bodyText}
-          </Text>
-          {children}
+          <Text variant="body">{bodyText}</Text>
+          {children && <span>{children}</span>}
         </div>
       </div>
     </div>

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

@@ -6,7 +6,7 @@ import { Icon } from "~components/__future__/Icon"
 import {
   StickerSheet,
   StickerSheetStory,
-} from "~storybook/components/StickerSheet"
+} from "~storybook/components/_future/StickerSheet"
 import { EmptyState, EmptyStateProps } from "../index"
 
 export default {
@@ -23,7 +23,9 @@ const EmptyStateWrapper = ({
   isAnimated,
   ...args
 }: EmptyStateProps): JSX.Element => (
-  <EmptyState isAnimated={IS_CHROMATIC ? false : isAnimated} {...args} />
+  <div>
+    <EmptyState isAnimated={IS_CHROMATIC ? false : isAnimated} {...args} />
+  </div>
 )
 
 const StickerSheetTemplate: StickerSheetStory = {
@@ -54,50 +56,64 @@ const StickerSheetTemplate: StickerSheetStory = {
 
     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 isReversed={isReversed} title="EmptyState">
+          {variants.map(variant => (
+            <StickerSheet.Row key={variant} header={variant}>
+              <EmptyStateWrapper {...defaultProps} variant={variant} />
             </StickerSheet.Row>
-          </StickerSheet.Body>
+          ))}
+          <StickerSheet.Row header="straightCorners">
+            <EmptyStateWrapper {...defaultProps} straightCorners />
+          </StickerSheet.Row>
+        </StickerSheet>
+
+        <StickerSheet isReversed={isReversed} title="Responsive breakpoints">
+          <StickerSheet.Row header="Above 1024px">
+            <StickerSheet.Cell style={{ width: 1025 }}>
+              <EmptyStateWrapper {...defaultProps} />
+            </StickerSheet.Cell>
+          </StickerSheet.Row>
+          <StickerSheet.Row header="Above 560px and below or equal to 1024px (max)">
+            <StickerSheet.Cell style={{ width: 1024 }}>
+              <EmptyStateWrapper {...defaultProps} />
+            </StickerSheet.Cell>
+          </StickerSheet.Row>
+          <StickerSheet.Row header="Above 560px and below or equal to 1024px (min)">
+            <StickerSheet.Cell style={{ width: 561 }}>
+              <EmptyStateWrapper {...defaultProps} />
+            </StickerSheet.Cell>
+          </StickerSheet.Row>
+          <StickerSheet.Row header="Below or equal to 560px">
+            <StickerSheet.Cell style={{ width: 560 }}>
+              <EmptyStateWrapper {...defaultProps} />
+            </StickerSheet.Cell>
+          </StickerSheet.Row>
         </StickerSheet>
 
         <StickerSheet
           isReversed={isReversed}
-          heading="Illustration type (deprecated)"
+          title="Illustration type (deprecated)"
         >
-          <StickerSheet.Body>
-            {illustrationTypes.map(illustrationType => (
-              <StickerSheet.Row
-                key={illustrationType}
-                rowTitle={illustrationType}
+          {illustrationTypes.map(illustrationType => (
+            <StickerSheet.Row key={illustrationType} header={illustrationType}>
+              <EmptyStateWrapper
+                {...defaultProps}
+                illustrationType={illustrationType}
               >
-                <EmptyStateWrapper
-                  {...defaultProps}
-                  illustrationType={illustrationType}
-                >
-                  <Button
-                    label="Label"
-                    icon={
-                      <Icon
-                        name="chevron_right"
-                        isPresentational
-                        shouldMirrorInRTL
-                      />
-                    }
-                    iconPosition="end"
-                  />
-                </EmptyStateWrapper>
-              </StickerSheet.Row>
-            ))}
-          </StickerSheet.Body>
+                <Button
+                  label="Label"
+                  icon={
+                    <Icon
+                      name="chevron_right"
+                      isPresentational
+                      shouldMirrorInRTL
+                    />
+                  }
+                  iconPosition="end"
+                />
+              </EmptyStateWrapper>
+            </StickerSheet.Row>
+          ))}
         </StickerSheet>
       </>
     )

package/dist/cjs/EmptyState/EmptyState.module.scss.cjs

@@ -1,23 +0,0 @@
-'use strict';
-
-var styles = {
-  "container": "EmptyState-module_container__-B5OU",
-  "straightCorners": "EmptyState-module_straightCorners__Aeou0",
-  "sidebarAndContent": "EmptyState-module_sidebarAndContent__Eysay",
-  "contentOnly": "EmptyState-module_contentOnly__RWVVX",
-  "positive": "EmptyState-module_positive__o3dXR",
-  "negative": "EmptyState-module_negative__e5ci6",
-  "action": "EmptyState-module_action__OdsgJ",
-  "neutral": "EmptyState-module_neutral__L6fBb",
-  "success": "EmptyState-module_success__y7jKP",
-  "warning": "EmptyState-module_warning__-PrRp",
-  "informative": "EmptyState-module_informative__x0GSr",
-  "expert-advice": "EmptyState-module_expert-advice__VVB8i",
-  "illustrationSide": "EmptyState-module_illustrationSide__ZSjF3",
-  "textSide": "EmptyState-module_textSide__tv54w",
-  "illustration": "EmptyState-module_illustration__HyD2k",
-  "textSideInner": "EmptyState-module_textSideInner__Yynhi",
-  "heading": "EmptyState-module_heading__y-yvC",
-  "description": "EmptyState-module_description__fsJOc"
-};
-module.exports = styles;

package/dist/esm/EmptyState/EmptyState.module.scss.mjs

@@ -1,21 +0,0 @@
-var styles = {
-  "container": "EmptyState-module_container__-B5OU",
-  "straightCorners": "EmptyState-module_straightCorners__Aeou0",
-  "sidebarAndContent": "EmptyState-module_sidebarAndContent__Eysay",
-  "contentOnly": "EmptyState-module_contentOnly__RWVVX",
-  "positive": "EmptyState-module_positive__o3dXR",
-  "negative": "EmptyState-module_negative__e5ci6",
-  "action": "EmptyState-module_action__OdsgJ",
-  "neutral": "EmptyState-module_neutral__L6fBb",
-  "success": "EmptyState-module_success__y7jKP",
-  "warning": "EmptyState-module_warning__-PrRp",
-  "informative": "EmptyState-module_informative__x0GSr",
-  "expert-advice": "EmptyState-module_expert-advice__VVB8i",
-  "illustrationSide": "EmptyState-module_illustrationSide__ZSjF3",
-  "textSide": "EmptyState-module_textSide__tv54w",
-  "illustration": "EmptyState-module_illustration__HyD2k",
-  "textSideInner": "EmptyState-module_textSideInner__Yynhi",
-  "heading": "EmptyState-module_heading__y-yvC",
-  "description": "EmptyState-module_description__fsJOc"
-};
-export { styles as default };

package/src/EmptyState/EmptyState.module.scss

@@ -1,186 +0,0 @@
-@import "~@kaizen/design-tokens/sass/spacing";
-@import "~@kaizen/design-tokens/sass/color";
-@import "~@kaizen/design-tokens/sass/border";
-@import "./mixins";
-
-.container {
-  --empty-state-border-width: var(--border-width-1);
-
-  display: flex;
-  width: 100%;
-  box-sizing: border-box;
-  justify-content: space-around;
-  padding: calc(2% - var(--empty-state-border-width))
-    calc(var(--spacing-24) - var(--empty-state-border-width));
-  color: $color-purple-800;
-  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);
-  flex-wrap: wrap;
-
-  @include small {
-    flex-direction: column;
-    align-items: center;
-    padding: calc(var(--spacing-24) - var(--empty-state-border-width));
-  }
-
-  &.straightCorners {
-    border-radius: 0;
-  }
-
-  // These class names must match the possible values of the component's layoutContext prop
-  &.sidebarAndContent {
-    @include large-sidebar-and-content {
-      padding-top: $spacing-md;
-      padding-bottom: $spacing-md;
-    }
-  }
-
-  &.contentOnly {
-    @include large-content-only {
-      padding-top: $spacing-md;
-      padding-bottom: $spacing-md;
-    }
-  }
-}
-
-/** @deprecated */
-.positive {
-  --empty-state-border-color: var(--color-green-500);
-  --empty-state-background-color: var(--color-green-100);
-}
-
-.negative,
-.action {
-  --empty-state-border-color: var(--color-red-500);
-  --empty-state-background-color: var(--color-red-100);
-}
-
-.neutral {
-  --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 {
-  --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,
-.textSide {
-  display: flex;
-  box-sizing: border-box;
-}
-
-.illustrationSide {
-  justify-content: center;
-  align-items: center;
-  flex: 0 1 auto;
-  min-width: 0;
-  max-width: 100%;
-  margin-bottom: $spacing-md;
-
-  @include small {
-    width: 100%;
-    max-width: 224px;
-  }
-
-  @include medium {
-    flex-direction: column;
-    justify-content: center;
-    align-items: flex-end;
-    margin-bottom: 0;
-    width: auto;
-    max-width: 40%;
-    padding-inline-end: $spacing-md;
-  }
-
-  .sidebarAndContent & {
-    @include large-sidebar-and-content {
-      flex-shrink: 1;
-      flex-basis: auto;
-    }
-  }
-
-  .contentOnly & {
-    @include large-content-only {
-      flex-shrink: 1;
-      flex-basis: auto;
-    }
-  }
-}
-
-.illustration,
-.illustrationSide video {
-  max-width: 100%;
-  max-height: 366px;
-  width: auto;
-  height: auto;
-
-  // Fixes for IE11 Flexbox issues
-  min-height: 196px;
-
-  @include small {
-    max-height: 196px;
-    width: 100%;
-  }
-}
-
-.textSide {
-  flex: 1 1 auto;
-  min-width: 0;
-  max-width: 100%;
-  align-items: center;
-  -webkit-font-smoothing: antialiased;
-
-  @include medium {
-    flex: 0 1 50%;
-  }
-}
-
-.textSideInner {
-  width: 100%;
-  max-width: 100%;
-  box-sizing: border-box;
-  margin: 0 $spacing-sm;
-  word-wrap: break-word;
-  overflow-wrap: break-word;
-
-  @include small {
-    margin-bottom: 0;
-  }
-
-  @include medium {
-    max-width: 426px;
-  }
-}
-
-.heading {
-  margin-bottom: $spacing-md;
-  max-width: 100%;
-
-  @media (max-width: (375px)) {
-    @include typography-heading-3-sm;
-  }
-}
-
-.description {
-  margin-bottom: $spacing-md;
-  max-width: 100%;
-}

package/src/EmptyState/EmptyState.spec.tsx

@@ -1,48 +0,0 @@
-import React from "react"
-import { cleanup, render } from "@testing-library/react"
-import { EmptyState, EmptyStateProps } from "./EmptyState"
-
-vi.mock("~components/Illustration", () => ({
-  EmptyStatesPositive: (): JSX.Element => (
-    <div>EmptyStatesPositive_Component</div>
-  ),
-  EmptyStatesNeutral: (): JSX.Element => (
-    <div>EmptyStatesNeutral_Component</div>
-  ),
-  EmptyStatesNegative: (): JSX.Element => (
-    <div>EmptyStatesNegative_Component</div>
-  ),
-  EmptyStatesInformative: (): JSX.Element => (
-    <div>EmptyStatesInformative_Component</div>
-  ),
-  EmptyStatesAction: (): JSX.Element => <div>EmptyStatesAction_Component</div>,
-}))
-
-describe("<EmptyState />", () => {
-  afterEach(cleanup)
-
-  const defaultProps: EmptyStateProps = {
-    id: "someId",
-    headingProps: {
-      children: "Some heading",
-      variant: "heading-1",
-    },
-    bodyText: "Lorem ipsum dolor...",
-  }
-
-  it("renders an `id` attribute", () => {
-    const { container } = render(<EmptyState {...defaultProps} />)
-
-    expect(container.querySelector("#someId")).toBeTruthy()
-  })
-
-  it("renders given children", () => {
-    const { getByText } = render(
-      <EmptyState {...defaultProps}>
-        <h1>Child Heading</h1>
-      </EmptyState>
-    )
-
-    expect(getByText("Child Heading")).toBeTruthy()
-  })
-})

package/src/EmptyState/_mixins.scss

@@ -1,44 +0,0 @@
-@import "~@kaizen/design-tokens/sass/layout";
-
-$small: 300px;
-$medium: $layout-breakpoints-medium;
-$large: $layout-breakpoints-large;
-
-// comes from ca-layout-padding x2 which is no longer used
-$side-padding: 48px;
-$sidebarWidth: 240px;
-$sidebarWithPadding: $sidebarWidth + $side-padding;
-
-$typography-heading-3-font-size-small: 1.25rem;
-$typography-heading-3-font-weight-small: 700;
-$typography-heading-3-line-height-small: 1.5rem;
-
-@mixin large-sidebar-and-content {
-  @media (min-width: ($large + $sidebarWithPadding + $side-padding)) {
-    @content;
-  }
-}
-
-@mixin large-content-only {
-  @media (min-width: ($large + $side-padding)) {
-    @content;
-  }
-}
-
-@mixin medium {
-  @media (min-width: ($medium + $side-padding)) {
-    @content;
-  }
-}
-
-@mixin small {
-  @media (max-width: ($medium + $side-padding - 1px)) {
-    @content;
-  }
-}
-
-@mixin typography-heading-3-sm {
-  font-size: $typography-heading-3-font-size-small;
-  line-height: $typography-heading-3-line-height-small;
-  font-weight: $typography-heading-3-font-weight-small;
-}