@kaizen/components 0.0.0-canary-package-bundler-v2-20241113071536 → 0.0.0-canary-link-button-wip-canary-20241121043208

package/dist/types/EmptyState/EmptyState.d.ts

@@ -17,6 +17,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;
@@ -27,6 +28,6 @@ export type EmptyStateProps = {
  * {@link https://cultureamp.design/?path=/docs/components-empty-state--docs Storybook}
  */
 export declare const EmptyState: {
-    ({ children, id, illustrationType, variant, layoutContext, headingProps, bodyText, straightCorners, isAnimated, loop, classNameOverride, ...props }: EmptyStateProps): JSX.Element;
+    ({ children, id, illustrationType, variant, layoutContext: _, headingProps, bodyText, straightCorners, isAnimated, loop, classNameOverride, ...props }: EmptyStateProps): JSX.Element;
     displayName: string;
 };

package/dist/types/__actions__/Button/v3/Button.d.ts

@@ -1,11 +1,24 @@
+import React from "react";
 import { ButtonProps as RACButtonProps } from "react-aria-components";
-export type ButtonVariants = "default";
-export type ButtonProps = RACButtonProps & {
+import { ButtonSizes, ButtonVariants, PendingButtonProps } from "./types";
+export type ButtonBaseProps = {
+    /** Visually hides the Button's child content used as the label and the `pendingLabel`. Use for icon-only `Button`. @default "false" */
+    hasHiddenLabel?: boolean;
     /** The visual style of the button.
      *  @default "default" */
     variant?: ButtonVariants;
     /** The visual size of the button. `medium` was formerly `regular`
      *  @default "medium" */
-    size?: "small" | "medium";
+    size?: ButtonSizes;
+    /** Renders an icon at the `iconPosition` provided. To the size scales with the button, we recommend using the `Icon` component from `"@kaizen/components/future"` */
+    icon?: JSX.Element;
+    /** Controls the position of the Icon passed in as props. @default "start" */
+    iconPosition?: "start" | "end";
+    /** Controls if the button inherits width from its parent. @default "false" */
+    isFullWidth?: boolean;
 };
-export declare const Button: ({ variant, className, size, children, ...otherProps }: ButtonProps) => JSX.Element;
+export type ButtonProps = ButtonBaseProps & PendingButtonProps & Omit<RACButtonProps, "children"> & {
+    /** Used as the label for the button. */
+    children: RACButtonProps["children"];
+};
+export declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;

package/dist/types/__actions__/Button/v3/index.d.ts

@@ -1 +1,2 @@
 export * from "./Button";
+export * from "./types";

package/dist/types/__actions__/Button/v3/subcomponents/ButtonContent/ButtonContent.d.ts

@@ -0,0 +1,11 @@
+import { HTMLAttributes } from "react";
+import { ButtonProps } from "../../Button";
+type ButtonContentProps = {
+    size?: ButtonProps["size"];
+    icon?: ButtonProps["icon"];
+    iconPosition?: ButtonProps["iconPosition"];
+    hasHiddenLabel?: ButtonProps["hasHiddenLabel"];
+} & HTMLAttributes<HTMLSpanElement>;
+/** Renders the inner content of the button, handling icon and label visibility */
+export declare const ButtonContent: ({ children, hasHiddenLabel, size, icon, iconPosition, className, ...restProps }: ButtonContentProps) => JSX.Element;
+export {};

package/dist/types/__actions__/Button/v3/subcomponents/ButtonContent/index.d.ts

@@ -0,0 +1 @@
+export * from "./ButtonContent";

package/dist/types/__actions__/Button/v3/subcomponents/PendingContent/PendingContent.d.ts

@@ -0,0 +1,5 @@
+import { ButtonSizes, PendingProps } from "../../types";
+/** Renders the pending content of the button, handling pending label visibility and spinner positioning */
+export declare const PendingContent: ({ pendingLabel, hasHiddenPendingLabel, size, }: PendingProps & {
+    size?: ButtonSizes;
+}) => JSX.Element;

package/dist/types/__actions__/Button/v3/subcomponents/PendingContent/index.d.ts

@@ -0,0 +1 @@
+export * from "./PendingContent";

package/dist/types/__actions__/Button/v3/subcomponents/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./PendingContent";
+export * from "./ButtonContent";

package/dist/types/__actions__/Button/v3/types.d.ts

@@ -0,0 +1,21 @@
+export type ButtonVariants = "primary" | "secondary" | "tertiary";
+export type ButtonSizes = "small" | "medium" | "large";
+export type PendingPropsUndefined = {
+    isPending?: undefined;
+    /** Rendered as the child while `isPending` is `true`. This determines the accessible label for the Button while pending. */
+    pendingLabel?: never;
+    /** Visually hides the `pendingLabel` and renders the loading spinner. This will maintain the width of the Button's `children` to avoid layout shifts.
+     * @default false
+     */
+    hasHiddenPendingLabel?: never;
+};
+export type PendingProps = {
+    isPending: boolean;
+    /** Rendered as the child while `pendingLabel` is `true`. This determines the accessible label for the Button while pending. */
+    pendingLabel: string;
+    /** Visually Hides the `pendingLabel` and renders the loading spinner. This will maintain the width of the Button's `children` to avoid layout shifts.
+     * @default false
+     */
+    hasHiddenPendingLabel?: boolean;
+};
+export type PendingButtonProps = PendingProps | PendingPropsUndefined;

package/dist/types/__actions__/LinkButton/index.d.ts

@@ -0,0 +1 @@
+export * from "./v3";

package/dist/types/__actions__/LinkButton/v3/LinkButton.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+import { LinkProps as RACLinkProps } from "react-aria-components";
+import { ButtonBaseProps } from "../../Button/v3";
+export type LinkButtonProps = ButtonBaseProps & Omit<RACLinkProps, "children"> & {
+    /** Used as the label for the LinkButton. */
+    children: RACLinkProps["children"];
+};
+export declare const LinkButton: React.ForwardRefExoticComponent<ButtonBaseProps & Omit<RACLinkProps, "children"> & {
+    /** Used as the label for the LinkButton. */
+    children: RACLinkProps["children"];
+} & React.RefAttributes<HTMLAnchorElement>>;

package/dist/types/__actions__/LinkButton/v3/index.d.ts

@@ -0,0 +1 @@
+export * from "./LinkButton";

package/dist/types/__actions__/v3.d.ts

@@ -1,2 +1,3 @@
 export * from "./Menu/v3";
 export * from "./Button/v3";
+export * from "./LinkButton/v3";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kaizen/components",
-  "version": "0.0.0-canary-package-bundler-v2-20241113071536",
+  "version": "0.0.0-canary-link-button-wip-canary-20241121043208",
   "description": "Kaizen component library",
   "author": "Geoffrey Chong <geoff.chong@cultureamp.com>",
   "homepage": "https://cultureamp.design",
@@ -77,7 +77,7 @@
     "react-focus-on": "^3.9.4",
     "react-media": "^1.10.0",
     "react-popper": "^2.3.0",
-    "react-select": "^5.8.2",
+    "react-select": "^5.8.3",
     "react-textfit": "^1.1.1",
     "resize-observer-polyfill": "^1.5.1",
     "use-debounce": "^10.0.4",
@@ -87,9 +87,9 @@
     "react-day-picker": "Version locked until a11y gets fixed (https://github.com/gpbl/react-day-picker/pull/1708)"
   },
   "devDependencies": {
-    "@cultureamp/frontend-apis": "^10.0.0",
+    "@cultureamp/frontend-apis": "^11.0.0",
     "@cultureamp/i18n-react-intl": "^2.7.1",
-    "@tanstack/react-query": "^5.59.16",
+    "@tanstack/react-query": "^5.60.5",
     "@testing-library/dom": "^10.4.0",
     "@types/jest-axe": "^3.5.9",
     "@types/lodash.debounce": "^4.0.9",
@@ -102,7 +102,7 @@
     "jest-axe": "^9.0.0",
     "lodash.isempty": "^4.4.0",
     "normalize.css": "^8.0.1",
-    "postcss": "^8.4.47",
+    "postcss": "^8.4.49",
     "postcss-cli": "^11.0.0",
     "postcss-import": "^16.1.0",
     "postcss-preset-env": "^10.0.8",
@@ -112,14 +112,14 @@
     "react-dom": "^18.3.1",
     "react-highlight": "^0.15.0",
     "react-intl": "^6.8.4",
-    "rollup": "^4.24.2",
+    "rollup": "^4.27.2",
     "sass": "1.79.6",
     "serialize-query-params": "^2.0.2",
     "svgo": "^3.3.2",
     "tslib": "^2.8.0",
     "tsx": "^4.19.2",
-    "@kaizen/design-tokens": "0.0.0-canary-package-bundler-v2-20241113071536",
-    "@kaizen/package-bundler": "0.0.0-canary-package-bundler-v2-20241113071536"
+    "@kaizen/package-bundler": "2.0.1",
+    "@kaizen/design-tokens": "10.8.4"
   },
   "devDependenciesComments": {
     "sass": "Prevent deprecation warnings introduced in 1.80 as we plan to move away from sass",

package/src/EmptyState/EmptyState.module.css

@@ -0,0 +1,114 @@
+.container {
+  --empty-state-border-width: var(--border-width-1);
+  --empty-state-illustration-max-height: 366px;
+  --empty-state-illustration-max-width: 420px;
+  --empty-state-text-container-max-width: 426px;
+
+  container-type: inline-size;
+  width: 100%;
+  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);
+  color: var(--color-purple-800);
+}
+
+.straightCorners {
+  border-radius: 0;
+}
+
+/** @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);
+}
+
+.content {
+  justify-content: center;
+  display: grid;
+  grid-template-columns: minmax(auto, var(--empty-state-illustration-max-width)) minmax(
+      auto,
+      var(--empty-state-text-container-max-width)
+    );
+  grid-template-rows: minmax(auto, var(--empty-state-illustration-max-height)) auto;
+  padding: var(--spacing-24);
+  grid-column-gap: var(--spacing-32);
+}
+
+.illustrationContainer {
+  display: flex;
+  align-items: center;
+}
+
+.illustration,
+.illustrationContainer video {
+  max-width: 100%;
+  max-height: var(--empty-state-illustration-max-height);
+  height: 100%;
+  width: auto;
+}
+
+.textContainer {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: var(--spacing-24);
+}
+
+@container (width <=1024px) {
+  .content {
+    padding: var(--spacing-16);
+  }
+}
+
+@container (width <=560px) {
+  .content {
+    grid-template-columns: 1fr;
+    grid-template-rows: auto;
+    grid-column-gap: unset;
+    grid-row-gap: var(--spacing-24);
+    padding: var(--spacing-24);
+  }
+
+  .illustrationContainer {
+    --empty-state-illustration-max-height: 210px;
+
+    justify-content: center;
+  }
+
+  .heading {
+    font-size: 1.25rem;
+    line-height: 1.5rem;
+  }
+}

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>
       </>
     )