Merge branch 'main' into KDS-1754-migrate-toggle-switch-field-guidanc…

…e-block-scene-to-kaio

.changeset/rare-camels-occur.md

@@ -0,0 +1,5 @@
+---
+"@kaizen/components": patch
+---
+
+Update dependency rollup to ^4.3.0

.eslintignore

@@ -1,2 +1,2 @@
 /packages/**/dist
-/packages/components/src/Icons/subComponents/Template.tsx
+/packages/components/src/Icon/bin/Template.tsx

.github/pull_request_template.md

@@ -1,3 +1,6 @@
+## Important: Request PR reviews on Slack
+Please reach out to the design system team on Slack in `#prod_design_system` for PR reviews. GitHub notifications (e.g. from tagging a person) are not actively monitored.
+
 ## Why
 <!-- Why have you created this PR? - Is it a new feature, or a bug fix? Or something else? -->
 <!-- Reference any relevant Jira tickets so your reviewer can find more context if needed. -->

.github/workflows/changeset.yaml

@@ -11,6 +11,7 @@ jobs:
     outputs:
       hasChangesets: ${{ steps.changesets.outputs.hasChangesets }}
       hasPublished: ${{ steps.changesets.outputs.published }}
+      publishedPackages: ${{ steps.changesets.outputs.publishedPackages }}
     env:
       GITHUB_TOKEN: ${{ github.token }}
       NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
@@ -27,6 +28,22 @@ jobs:
           commit: "version packages"
           version: yarn ci:version
           publish: yarn ci:publish
+  # deployment:
+  #   runs-on: ubuntu-latest
+  #   needs: version
+  #   permissions:
+  #     deployments: write
+  #   steps:
+  #     - uses: actions/checkout@v3
+  #     - uses: ./.github/actions/setup
+  #     - uses: chrnorm/deployment-action@v2
+  #       name: Create GitHub deployment
+  #       id: deployment
+  #       with:
+  #         token: "$GITHUB_TOKEN"
+  #         environment-url: http://cultureamp.design
+  #         environment: production
+  #         description: ${{ needs.version.outputs.publishedPackages }}
   notify-slack:
     runs-on: ubuntu-latest
     needs:

.github/workflows/check-files.yml

@@ -43,4 +43,4 @@ jobs:
     steps:
       - uses: actions/checkout@v3
       - uses: ./.github/actions/setup
-      - run: yarn build
+      - run: yarn build && yarn test:treeshake

.github/workflows/deployment.yml

@@ -0,0 +1,24 @@
+name: "Deployment"
+
+on:
+  workflow_dispatch:
+    inputs:
+      environment:
+        description: "Environment to deploy to"
+        type: environment
+        required: true
+
+jobs:
+  deployment:
+    runs-on: ubuntu-latest
+    permissions:
+      deployments: write
+    steps:
+      - uses: actions/checkout@v3
+      - uses: chrnorm/deployment-action@v2
+        name: Create GitHub deployment
+        id: deployment
+        with:
+          token: ${{ github.token }}
+          environment-url: http://cultureamp.design
+          environment: ${{ github.event.inputs.environment }}

.prettierignore

@@ -17,3 +17,4 @@
 /storybook/public/
 /packages/**/dist
 /packages/components/locales
+/packages/design-tokens/css

.stylelintignore

@@ -1,2 +1,4 @@
 packages/design-tokens/**/*.scss
+packages/design-tokens/**/*.css
 packages/components/locales/*
+storybook/styles/*

CONTRIBUTING.md

@@ -203,12 +203,12 @@ yarn plop
 ## Adding icons
 
 1. Find the new svg in our [figma file](https://www.figma.com/file/eZKEE5kXbEMY3lx84oz8iN/%F0%9F%92%9C-UI-Kit%3A-Heart?type=design&node-id=35882-93662&mode=design&t=X18YN2TWqlxEIFc3-0)
-2. Export the svg in kebab-case (eg. `zoom-out.svg`), and save it in `/packages/components/icons`
+2. Export the svg in kebab-case with `.icon` suffix (eg. `zoom-out.icon.svg`), and save it in `/packages/components/assets/svgs/icons`
 3. In the root of Kaizen, run `yarn update-icons`
 
 This process will:
 
-- Add a new react icon component to `packages/components/src/Icons`
-- Export the new icon component from `packages/components/src/Icons/index.ts`
+- Add a new react icon component to `packages/components/src/Icon`
+- Export the new icon component from `packages/components/src/Icon/index.ts`
 
 To confirm that the process has been completed successfully, check to see that your icon is now visible in the Icons stickersheet in Storybook.

docs/Systems/Tailwind/UtilityClassReferences/color-tokens.stories.tsx

@@ -1,8 +1,8 @@
 import React, { HTMLAttributes } from "react"
 import { Meta, StoryFn } from "@storybook/react"
 import colorString from "color-string"
-import { useTheme } from "@kaizen/design-tokens"
 import { Heading } from "@kaizen/typography"
+import { tokens } from "~design-tokens/js"
 
 export default {
   title: "Systems/Tokens/Classname References/Color Tokens",
@@ -23,24 +23,20 @@ const Stack = ({
   ...divAttributes
 }: HTMLAttributes<HTMLDivElement> & {
   horizontal?: boolean
-  gapSize?: keyof typeof theme.spacing
-}): JSX.Element => {
-  const theme = useTheme()
-
-  return (
-    <div
-      style={{
-        display: "flex",
-        flexDirection: horizontal ? "row" : "column",
-        gap: gapSize && theme.spacing[gapSize],
-        ...style,
-      }}
-      {...divAttributes}
-    >
-      {children}
-    </div>
-  )
-}
+  gapSize?: keyof typeof tokens.spacing
+}): JSX.Element => (
+  <div
+    style={{
+      display: "flex",
+      flexDirection: horizontal ? "row" : "column",
+      gap: gapSize && tokens.spacing[gapSize],
+      ...style,
+    }}
+    {...divAttributes}
+  >
+    {children}
+  </div>
+)
 
 /**
  * A component to show a simple color block with a name
@@ -52,14 +48,13 @@ const ColorDemo = ({
   color: string
   name?: string
 }): JSX.Element | null => {
-  const theme = useTheme()
   const parsedColor = colorString.get(color)
 
   if (!parsedColor) return null
 
   return (
     <div style={{ display: "flex", alignItems: "center" }}>
-      <h4 style={{ ...theme.typography.heading4, writingMode: "vertical-lr" }}>
+      <h4 style={{ ...tokens.typography.heading4, writingMode: "vertical-lr" }}>
         {name}
       </h4>
 
@@ -114,89 +109,85 @@ const ComponentsSection = ({
   </div>
 )
 
-export const ColorTokens: StoryFn = () => {
-  const theme = useTheme()
-
-  return (
-    <div style={{ padding: theme.spacing[24] }}>
-      <Stack horizontal gapSize={48}>
-        <ComponentsSection>
-          <Stack gapSize={24}>
-            <Heading variant="heading-3">Purple</Heading>
-            <ColorDemo name="100" color={theme.color.purple[100]} />
-            <ColorDemo name="200" color={theme.color.purple[200]} />
-            <ColorDemo name="300" color={theme.color.purple[300]} />
-            <ColorDemo name="400" color={theme.color.purple[400]} />
-            <ColorDemo name="500" color={theme.color.purple[500]} />
-            <ColorDemo name="600" color={theme.color.purple[600]} />
-            <ColorDemo name="700" color={theme.color.purple[700]} />
-            <ColorDemo name="800" color={theme.color.purple[800]} />
-          </Stack>
-          <Stack gapSize={24}>
-            <Heading variant="heading-3">Blue</Heading>
-            <ColorDemo name="100" color={theme.color.blue[100]} />
-            <ColorDemo name="200" color={theme.color.blue[200]} />
-            <ColorDemo name="300" color={theme.color.blue[300]} />
-            <ColorDemo name="400" color={theme.color.blue[400]} />
-            <ColorDemo name="500" color={theme.color.blue[500]} />
-            <ColorDemo name="600" color={theme.color.blue[600]} />
-            <ColorDemo name="700" color={theme.color.blue[700]} />
-          </Stack>
-          <Stack gapSize={24}>
-            <Heading variant="heading-3">Red</Heading>
-            <ColorDemo name="100" color={theme.color.red[100]} />
-            <ColorDemo name="200" color={theme.color.red[200]} />
-            <ColorDemo name="300" color={theme.color.red[300]} />
-            <ColorDemo name="400" color={theme.color.red[400]} />
-            <ColorDemo name="500" color={theme.color.red[500]} />
-            <ColorDemo name="600" color={theme.color.red[600]} />
-            <ColorDemo name="700" color={theme.color.red[700]} />
-          </Stack>
-          <Stack gapSize={24}>
-            <Heading variant="heading-3">Orange</Heading>
-            <ColorDemo name="100" color={theme.color.orange[100]} />
-            <ColorDemo name="200" color={theme.color.orange[200]} />
-            <ColorDemo name="300" color={theme.color.orange[300]} />
-            <ColorDemo name="400" color={theme.color.orange[400]} />
-            <ColorDemo name="500" color={theme.color.orange[500]} />
-            <ColorDemo name="600" color={theme.color.orange[600]} />
-            <ColorDemo name="700" color={theme.color.orange[700]} />
-          </Stack>
-          <Stack gapSize={24}>
-            <Heading variant="heading-3">Green</Heading>
-            <ColorDemo name="100" color={theme.color.green[100]} />
-            <ColorDemo name="200" color={theme.color.green[200]} />
-            <ColorDemo name="300" color={theme.color.green[300]} />
-            <ColorDemo name="400" color={theme.color.green[400]} />
-            <ColorDemo name="500" color={theme.color.green[500]} />
-            <ColorDemo name="600" color={theme.color.green[600]} />
-            <ColorDemo name="700" color={theme.color.green[700]} />
-          </Stack>
-          <Stack gapSize={24}>
-            <Heading variant="heading-3">Yellow</Heading>
-            <ColorDemo name="100" color={theme.color.yellow[100]} />
-            <ColorDemo name="200" color={theme.color.yellow[200]} />
-            <ColorDemo name="300" color={theme.color.yellow[300]} />
-            <ColorDemo name="400" color={theme.color.yellow[400]} />
-            <ColorDemo name="500" color={theme.color.yellow[500]} />
-            <ColorDemo name="600" color={theme.color.yellow[600]} />
-            <ColorDemo name="700" color={theme.color.yellow[700]} />
-          </Stack>
-          <Stack gapSize={24}>
-            <Heading variant="heading-3">Gray</Heading>
-            <ColorDemo name="100" color={theme.color.gray[100]} />
-            <ColorDemo name="200" color={theme.color.gray[200]} />
-            <ColorDemo name="300" color={theme.color.gray[300]} />
-            <ColorDemo name="400" color={theme.color.gray[400]} />
-            <ColorDemo name="500" color={theme.color.gray[500]} />
-            <ColorDemo name="600" color={theme.color.gray[600]} />
-          </Stack>
-          <Stack gapSize={24}>
-            <Heading variant="heading-3">White</Heading>
-            <ColorDemo name="White" color={theme.color.white} />
-          </Stack>
-        </ComponentsSection>
-      </Stack>
-    </div>
-  )
-}
+export const ColorTokens: StoryFn = () => (
+  <div style={{ padding: tokens.spacing[24] }}>
+    <Stack horizontal gapSize={48}>
+      <ComponentsSection>
+        <Stack gapSize={24}>
+          <Heading variant="heading-3">Purple</Heading>
+          <ColorDemo name="100" color={tokens.color.purple[100]} />
+          <ColorDemo name="200" color={tokens.color.purple[200]} />
+          <ColorDemo name="300" color={tokens.color.purple[300]} />
+          <ColorDemo name="400" color={tokens.color.purple[400]} />
+          <ColorDemo name="500" color={tokens.color.purple[500]} />
+          <ColorDemo name="600" color={tokens.color.purple[600]} />
+          <ColorDemo name="700" color={tokens.color.purple[700]} />
+          <ColorDemo name="800" color={tokens.color.purple[800]} />
+        </Stack>
+        <Stack gapSize={24}>
+          <Heading variant="heading-3">Blue</Heading>
+          <ColorDemo name="100" color={tokens.color.blue[100]} />
+          <ColorDemo name="200" color={tokens.color.blue[200]} />
+          <ColorDemo name="300" color={tokens.color.blue[300]} />
+          <ColorDemo name="400" color={tokens.color.blue[400]} />
+          <ColorDemo name="500" color={tokens.color.blue[500]} />
+          <ColorDemo name="600" color={tokens.color.blue[600]} />
+          <ColorDemo name="700" color={tokens.color.blue[700]} />
+        </Stack>
+        <Stack gapSize={24}>
+          <Heading variant="heading-3">Red</Heading>
+          <ColorDemo name="100" color={tokens.color.red[100]} />
+          <ColorDemo name="200" color={tokens.color.red[200]} />
+          <ColorDemo name="300" color={tokens.color.red[300]} />
+          <ColorDemo name="400" color={tokens.color.red[400]} />
+          <ColorDemo name="500" color={tokens.color.red[500]} />
+          <ColorDemo name="600" color={tokens.color.red[600]} />
+          <ColorDemo name="700" color={tokens.color.red[700]} />
+        </Stack>
+        <Stack gapSize={24}>
+          <Heading variant="heading-3">Orange</Heading>
+          <ColorDemo name="100" color={tokens.color.orange[100]} />
+          <ColorDemo name="200" color={tokens.color.orange[200]} />
+          <ColorDemo name="300" color={tokens.color.orange[300]} />
+          <ColorDemo name="400" color={tokens.color.orange[400]} />
+          <ColorDemo name="500" color={tokens.color.orange[500]} />
+          <ColorDemo name="600" color={tokens.color.orange[600]} />
+          <ColorDemo name="700" color={tokens.color.orange[700]} />
+        </Stack>
+        <Stack gapSize={24}>
+          <Heading variant="heading-3">Green</Heading>
+          <ColorDemo name="100" color={tokens.color.green[100]} />
+          <ColorDemo name="200" color={tokens.color.green[200]} />
+          <ColorDemo name="300" color={tokens.color.green[300]} />
+          <ColorDemo name="400" color={tokens.color.green[400]} />
+          <ColorDemo name="500" color={tokens.color.green[500]} />
+          <ColorDemo name="600" color={tokens.color.green[600]} />
+          <ColorDemo name="700" color={tokens.color.green[700]} />
+        </Stack>
+        <Stack gapSize={24}>
+          <Heading variant="heading-3">Yellow</Heading>
+          <ColorDemo name="100" color={tokens.color.yellow[100]} />
+          <ColorDemo name="200" color={tokens.color.yellow[200]} />
+          <ColorDemo name="300" color={tokens.color.yellow[300]} />
+          <ColorDemo name="400" color={tokens.color.yellow[400]} />
+          <ColorDemo name="500" color={tokens.color.yellow[500]} />
+          <ColorDemo name="600" color={tokens.color.yellow[600]} />
+          <ColorDemo name="700" color={tokens.color.yellow[700]} />
+        </Stack>
+        <Stack gapSize={24}>
+          <Heading variant="heading-3">Gray</Heading>
+          <ColorDemo name="100" color={tokens.color.gray[100]} />
+          <ColorDemo name="200" color={tokens.color.gray[200]} />
+          <ColorDemo name="300" color={tokens.color.gray[300]} />
+          <ColorDemo name="400" color={tokens.color.gray[400]} />
+          <ColorDemo name="500" color={tokens.color.gray[500]} />
+          <ColorDemo name="600" color={tokens.color.gray[600]} />
+        </Stack>
+        <Stack gapSize={24}>
+          <Heading variant="heading-3">White</Heading>
+          <ColorDemo name="White" color={tokens.color.white} />
+        </Stack>
+      </ComponentsSection>
+    </Stack>
+  </div>
+)

docs/pages/app-starter.stories.mdx

@@ -12,9 +12,9 @@ Whilst the Kaizen Design System mainly focuses on the more atomic components in
 
 <InlineNotification persistent type="informative">You won't need to apply this if you started your app with the <a href="https://github.com/cultureamp/frontend-template" target="_blank" rel="noreferrer">Frontend template</a> or are using <a href="https://github.com/cultureamp/frontend-services/tree/main/packages/next-services">next-services</a>.</InlineNotification>
 
-## 1. Add the KaizenProvider (replaces ThemeProvider)
+## 1. Add the KaizenProvider
 
-The <LinkTo pageId="components-kaizen-provider-installation">KaizenProvider</LinkTo> feeds your entire app with the theme and various other defaults, so it's important that it goes at the very root of your application.
+The <LinkTo pageId="components-kaizen-provider-installation">KaizenProvider</LinkTo> feeds your entire app with Kaizen defaults so it's important that it goes at the very root of your application.
 ```tsx
 import { KaizenProvider } from "@kaizen/components";
 <KaizenProvider>