Merge branch 'main' into KZN-2653/icon--material-symbols

.changeset/proud-plants-mix.md

@@ -0,0 +1,5 @@
+---
+"@kaizen/components": patch
+---
+
+Styling fix for Workflow v3

.stylelintrc-css.mjs

@@ -4,5 +4,6 @@ export default {
   extends: "stylelint-config-standard",
   rules: {
     "selector-class-pattern": null,
+    "color-function-notation": ["modern", { ignore: ["with-var-inside"] }],
   },
 }

docs/components/index.ts

@@ -1,6 +1,5 @@
 export * from "./NoClipCanvas"
 export * from "./Installation"
-export * from "./KaioLegacyDocsNotification"
 export * from "./LinkTo"
 export * from "./ResourceLinks"
 export * from "./SbReleaseNotification"

packages/components/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Change Log
 
+## 1.61.0
+
+### Minor Changes
+
+- [#4978](https://github.com/cultureamp/kaizen-design-system/pull/4978) [`2d34341ea9e6d8c28af80645e6bef3cd60cb8f8e`](https://github.com/cultureamp/kaizen-design-system/commit/2d34341ea9e6d8c28af80645e6bef3cd60cb8f8e) - Create v3 Workflow component, changing footer to a white background
+
+  A few adjustments will need to be made on the implementation side when upgrading from future (v2) to v3:
+
+  - All footer buttons should have the `reversed` prop removed
+  - Next button in the footer should have `primary` prop added (not just the finish button as previously)
+  - The `status` prop has been renamed to `statusTag` and now takes a ReactNode. You'll need to create your own Tag and pass it in.
+
 ## 1.60.3
 
 ### Patch Changes

packages/components/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kaizen/components",
-  "version": "1.60.3",
+  "version": "1.61.0",
   "description": "Kaizen component library",
   "author": "Geoffrey Chong <geoff.chong@cultureamp.com>",
   "homepage": "https://cultureamp.design",

packages/components/rollup.config.mjs

@@ -10,6 +10,9 @@ export default rollupConfig({
     containersV1: "./src/__containers__/v1.ts",
     containersV2: "./src/__containers__/v2.ts",
     illustrationsV3: "./src/__illustrations__/v3.ts",
+    layoutV1: "./src/__layout__/v1.ts",
+    layoutV2: "./src/__layout__/v2.ts",
+    layoutV3: "./src/__layout__/v3.ts",
     overlaysV1: "./src/__overlays__/v1.ts",
     overlaysV2: "./src/__overlays__/v2.ts",
     overlaysV3: "./src/__overlays__/v3.ts",

packages/components/src/__future__/index.ts

@@ -1,3 +1,3 @@
 export * from "./Select"
 export * from "./Tag"
-export * from "./Workflow"
+export * from "../__layout__/Workflow/v2"

packages/components/src/__future__/Workflow/_docs/ProgressStepper.mdx → packages/components/src/__layout__/Workflow/v1/_docs/ProgressStepper.mdx

@@ -1,5 +1,5 @@
 import { Canvas, Controls, DocsStory, Meta } from "@storybook/blocks"
-import { KAIOInstallation, ResourceLinks, KaioLegacyDocsNotification } from "~storybook/components"
+import { Installation, ResourceLinks } from "~storybook/components"
 import * as ProgressStepperStories from "./ProgressStepper.stories"
 
 <Meta of={ProgressStepperStories} />
@@ -13,9 +13,10 @@ import * as ProgressStepperStories from "./ProgressStepper.stories"
 
 />
 
-<KaioLegacyDocsNotification version="1.16.0" />
-
-<KAIOInstallation exportNames="ProgressStepper" isFuture />
+<Installation
+  installCommand="pnpm add @kaizen/components"
+  importStatement='import { Workflow } from "@kaizen/components/v1/layout"'
+/>
 
 ## Overview
 

packages/components/src/Workflow/_docs/ProgressStepper.stories.tsx → packages/components/src/__layout__/Workflow/v1/_docs/ProgressStepper.stories.tsx

@@ -3,7 +3,7 @@ import { Meta, StoryObj } from "@storybook/react"
 import { Workflow } from "../"
 
 const meta = {
-  title: "Pages/Workflow/Components/Progress Stepper",
+  title: "Layout/Workflow/Workflow (v1)/Components/Progress Stepper",
   component: Workflow.ProgressStepper,
   args: {
     stepName: "Settings",

packages/components/src/Workflow/_docs/Workflow.mdx → packages/components/src/__layout__/Workflow/v1/_docs/Workflow.mdx

@@ -1,6 +1,5 @@
 import { ArgTypes, Canvas, Meta } from "@storybook/blocks"
-import { InlineNotification } from "~components/Notification"
-import { KAIOInstallation, ResourceLinks } from "~storybook/components"
+import { Installation, ResourceLinks } from "~storybook/components"
 import * as Workflow from "./Workflow.stories"
 import * as WorkflowFooter from "./WorkflowFooter.stories"
 import * as WorkflowHeader from "./WorkflowHeader.stories"
@@ -14,12 +13,10 @@ import * as WorkflowHeader from "./WorkflowHeader.stories"
 
 />
 
-<InlineNotification type="negative" persistent>
-  {`This version of the Workflow is deprecated and will be removed in the next major release.
-  Import from "@kaizen/components/future" for the latest version.`}
-</InlineNotification>
-
-<KAIOInstallation exportNames="Workflow" />
+<Installation
+  installCommand="pnpm add @kaizen/components"
+  importStatement='import { Workflow } from "@kaizen/components/v1/layout"'
+/>
 
 ## Overview
 

packages/components/src/Workflow/_docs/Workflow.stories.tsx → packages/components/src/__layout__/Workflow/v1/_docs/Workflow.stories.tsx

@@ -27,7 +27,7 @@ const MockContent = (): JSX.Element => (
 )
 
 const meta = {
-  title: "Pages/Workflow",
+  title: "Layout/Workflow/Workflow (v1)",
   component: Workflow,
   argTypes: { ...WorkflowControls },
   args: {

packages/components/src/__future__/Workflow/_docs/WorkflowFooter.mdx → packages/components/src/__layout__/Workflow/v1/_docs/WorkflowFooter.mdx

@@ -1,5 +1,5 @@
 import { Canvas, Controls, DocsStory, Meta } from "@storybook/blocks"
-import { KAIOInstallation, KaioLegacyDocsNotification, ResourceLinks } from "~storybook/components"
+import { Installation, ResourceLinks } from "~storybook/components"
 import * as WorkflowFooterStories from "./WorkflowFooter.stories"
 
 <Meta of={WorkflowFooterStories} />
@@ -13,10 +13,10 @@ import * as WorkflowFooterStories from "./WorkflowFooter.stories"
 
 />
 
-
-<KaioLegacyDocsNotification version="1.16.0" />
-
-<KAIOInstallation exportNames="WorkflowFooter" isFuture />
+<Installation
+  installCommand="pnpm add @kaizen/components"
+  importStatement='import { Workflow } from "@kaizen/components/v1/layout"'
+/>
 
 ## Overview
 

packages/components/src/Workflow/_docs/WorkflowFooter.stories.tsx → packages/components/src/__layout__/Workflow/v1/_docs/WorkflowFooter.stories.tsx

@@ -5,7 +5,7 @@ import { Workflow } from "../"
 import { WorkflowControls } from "./controls"
 
 const meta = {
-  title: "Pages/Workflow/Components/Footer",
+  title: "Layout/Workflow/Workflow (v1)/Components/Footer",
   component: Workflow.Footer,
   argTypes: {
     ...WorkflowControls.nextAction,

packages/components/src/__future__/Workflow/_docs/WorkflowHeader.mdx → packages/components/src/__layout__/Workflow/v1/_docs/WorkflowHeader.mdx

@@ -1,5 +1,5 @@
 import { Canvas, Controls, DocsStory, Meta } from "@storybook/blocks"
-import { KAIOInstallation, KaioLegacyDocsNotification, ResourceLinks } from "~storybook/components"
+import { Installation, ResourceLinks } from "~storybook/components"
 import * as WorkflowHeaderStories from "./WorkflowHeader.stories"
 
 <Meta of={WorkflowHeaderStories} />
@@ -13,10 +13,10 @@ import * as WorkflowHeaderStories from "./WorkflowHeader.stories"
 
 />
 
-
-<KaioLegacyDocsNotification version="1.16.0" />
-
-<KAIOInstallation exportNames="WorkflowHeader" isFuture />
+<Installation
+  installCommand="pnpm add @kaizen/components"
+  importStatement='import { Workflow } from "@kaizen/components/v1/layout"'
+/>
 
 ## Overview
 

packages/components/src/Workflow/_docs/WorkflowHeader.stories.tsx → packages/components/src/__layout__/Workflow/v1/_docs/WorkflowHeader.stories.tsx

@@ -6,7 +6,7 @@ import { Workflow } from "../"
 import { WorkflowControls } from "./controls"
 
 const meta = {
-  title: "Pages/Workflow/Components/Header",
+  title: "Layout/Workflow/Workflow (v1)/Components/Header",
   component: Workflow.Header,
   argTypes: {
     ...WorkflowControls.headerActions,

packages/components/src/__layout__/Workflow/v1/index.ts

@@ -0,0 +1,10 @@
+// Since we can't add a deprecation flag on a * export
+import {
+  Workflow as WorkflowV1,
+  WorkflowProps as WorkflowPropsV1,
+} from "./Workflow"
+
+/** * @deprecated upgrade to v3 for the latest release */
+export const Workflow = WorkflowV1
+/** * @deprecated upgrade to v3 for the latest release */
+export type WorkflowProps = WorkflowPropsV1

packages/components/src/Workflow/_docs/ProgressStepper.mdx → packages/components/src/__layout__/Workflow/v2/_docs/ProgressStepper.mdx

@@ -1,6 +1,5 @@
 import { Canvas, Controls, DocsStory, Meta } from "@storybook/blocks"
-import { InlineNotification } from "~components/Notification"
-import { KAIOInstallation, ResourceLinks } from "~storybook/components"
+import { Installation, ResourceLinks } from "~storybook/components"
 import * as ProgressStepperStories from "./ProgressStepper.stories"
 
 <Meta of={ProgressStepperStories} />
@@ -14,12 +13,10 @@ import * as ProgressStepperStories from "./ProgressStepper.stories"
 
 />
 
-<InlineNotification type="negative" persistent>
-  {`This version of the Workflow is deprecated and will be removed in the next major release.
-  Import from "@kaizen/components/future" for the latest version.`}
-</InlineNotification>
-
-<KAIOInstallation exportNames="Workflow" />
+<Installation
+  installCommand="pnpm add @kaizen/components"
+  importStatement='import { Workflow } from "@kaizen/components/v2/layout"'
+/>
 
 ## Overview
 

packages/components/src/__future__/Workflow/_docs/ProgressStepper.stories.tsx → packages/components/src/__layout__/Workflow/v2/_docs/ProgressStepper.stories.tsx

@@ -4,7 +4,7 @@ import { Workflow } from "../"
 import { WorkflowControls } from "./controls"
 
 const meta = {
-  title: "Pages/Workflow/Future/Components/Progress Stepper",
+  title: "Layout/Workflow/Workflow (v2)/Components/Progress Stepper",
   component: Workflow.ProgressStepper,
   argTypes: {
     currentStepId: WorkflowControls.currentStepId,

packages/components/src/__future__/Workflow/_docs/Workflow.mdx → packages/components/src/__layout__/Workflow/v2/_docs/Workflow.mdx

@@ -1,5 +1,5 @@
 import { ArgTypes, Canvas, Meta } from "@storybook/blocks"
-import { KAIOInstallation, KaioLegacyDocsNotification, ResourceLinks } from "~storybook/components"
+import { Installation, ResourceLinks } from "~storybook/components"
 import * as Workflow from "./Workflow.stories"
 import * as WorkflowFooter from "./WorkflowFooter.stories"
 import * as WorkflowHeader from "./WorkflowHeader.stories"
@@ -13,10 +13,10 @@ import * as WorkflowHeader from "./WorkflowHeader.stories"
 
 />
 
-
-<KaioLegacyDocsNotification version="1.16.0" />
-
-<KAIOInstallation exportNames="Workflow" isFuture />
+<Installation
+  installCommand="pnpm add @kaizen/components"
+  importStatement='import { Workflow } from "@kaizen/components/v2/layout"'
+/>
 
 ## Overview
 

packages/components/src/__future__/Workflow/_docs/Workflow.stories.tsx → packages/components/src/__layout__/Workflow/v2/_docs/Workflow.stories.tsx

@@ -27,7 +27,7 @@ const MockContent = (): JSX.Element => (
 )
 
 const meta = {
-  title: "Pages/Workflow/Future",
+  title: "Layout/Workflow/Workflow (v2)",
   component: Workflow,
   argTypes: WorkflowControls,
   args: {

packages/components/src/Workflow/_docs/WorkflowFooter.mdx → packages/components/src/__layout__/Workflow/v2/_docs/WorkflowFooter.mdx

@@ -1,6 +1,5 @@
 import { Canvas, Controls, DocsStory, Meta } from "@storybook/blocks"
-import { InlineNotification } from "~components/Notification"
-import { KAIOInstallation, ResourceLinks } from "~storybook/components"
+import { Installation, ResourceLinks } from "~storybook/components"
 import * as WorkflowFooterStories from "./WorkflowFooter.stories"
 
 <Meta of={WorkflowFooterStories} />
@@ -14,12 +13,10 @@ import * as WorkflowFooterStories from "./WorkflowFooter.stories"
 
 />
 
-<InlineNotification type="negative" persistent>
-  {`This version of the Workflow is deprecated and will be removed in the next major release.
-  Import from "@kaizen/components/future" for the latest version.`}
-</InlineNotification>
-
-<KAIOInstallation exportNames="Workflow" />
+<Installation
+  installCommand="pnpm add @kaizen/components"
+  importStatement='import { Workflow } from "@kaizen/components/v2/layout"'
+/>
 
 ## Overview
 

packages/components/src/__future__/Workflow/_docs/WorkflowFooter.stories.tsx → packages/components/src/__layout__/Workflow/v2/_docs/WorkflowFooter.stories.tsx

@@ -5,7 +5,7 @@ import { Workflow } from "../"
 import { WorkflowControls } from "./controls"
 
 const meta = {
-  title: "Pages/Workflow/Future/Components/Footer",
+  title: "Layout/Workflow/Workflow (v2)/Components/Footer",
   component: Workflow.Footer,
   argTypes: {
     ...WorkflowControls.nextAction,

packages/components/src/Workflow/_docs/WorkflowHeader.mdx → packages/components/src/__layout__/Workflow/v2/_docs/WorkflowHeader.mdx

@@ -1,6 +1,5 @@
 import { Canvas, Controls, DocsStory, Meta } from "@storybook/blocks"
-import { InlineNotification } from "~components/Notification"
-import { KAIOInstallation, ResourceLinks } from "~storybook/components"
+import { Installation, ResourceLinks } from "~storybook/components"
 import * as WorkflowHeaderStories from "./WorkflowHeader.stories"
 
 <Meta of={WorkflowHeaderStories} />
@@ -14,12 +13,10 @@ import * as WorkflowHeaderStories from "./WorkflowHeader.stories"
 
 />
 
-<InlineNotification type="negative" persistent>
-  {`This version of the Workflow is deprecated and will be removed in the next major release.
-  Import from "@kaizen/components/future" for the latest version.`}
-</InlineNotification>
-
-<KAIOInstallation exportNames="Workflow" />
+<Installation
+  installCommand="pnpm add @kaizen/components"
+  importStatement='import { Workflow } from "@kaizen/components/v2/layout"'
+/>
 
 ## Overview
 

packages/components/src/__future__/Workflow/_docs/WorkflowHeader.stories.tsx → packages/components/src/__layout__/Workflow/v2/_docs/WorkflowHeader.stories.tsx

@@ -6,7 +6,7 @@ import { Workflow } from "../"
 import { WorkflowControls } from "./controls"
 
 const meta = {
-  title: "Pages/Workflow/Future/Components/Header",
+  title: "Layout/Workflow/Workflow (v2)/Components/Header",
   component: Workflow.Header,
   argTypes: {
     ...WorkflowControls.headerActions,

packages/components/src/__layout__/Workflow/v2/index.ts

@@ -0,0 +1,10 @@
+// Since we can't add a deprecation flag on a * export
+import {
+  Workflow as WorkflowV2,
+  WorkflowProps as WorkflowPropsV2,
+} from "./Workflow"
+
+/** * @deprecated upgrade to v3 for the latest release */
+export const Workflow = WorkflowV2
+/** * @deprecated upgrade to v3 for the latest release */
+export type WorkflowProps = WorkflowPropsV2