migration complete

.github/actions/run-storybook/action.yml

@@ -16,8 +16,9 @@ runs:
       uses: actions/download-artifact@v3
       with:
         name: ${{ inputs.artifactName }}
+        path: "./storybook/public"
     - name: Run storybook
       uses: Eun/http-server-action@v1
       with:
-        directory: ${{ steps.download.outputs.download-path }}
+        directory: "./storybook/public"
         port: 6006

.github/workflows/canary-release.yml

@@ -4,7 +4,7 @@ on:
   workflow_dispatch:
     inputs:
       label:
-        description: 'Pick a label for the release, to be included in the version number — e.g. "fix-button-focus" will released as "@kaizen/button@1.0.0-fix-button-focus-20230719002814"'
+        description: 'Pick a label for the release, to be included in the version number — e.g. "fix-button-focus" will released as "@kaizen/button@0.0.0-canary-fix-button-focus-20230719002814"'
         required: true
         type: string
 
@@ -18,12 +18,17 @@ jobs:
     steps:
       - uses: actions/checkout@v3
       - uses: ./.github/actions/setup
-      - name: Create Release Pull Request or Publish to npm
-        id: changesets
+      - name: Set npm token
         run: |
           npm config set "//registry.npmjs.org/:_authToken" "$NPM_TOKEN"
-      - run: |
-          echo "Releasing canary for $LABEL"
+      - name: Create canary release and publish to npm
+        id: changesets
+        run: |
+          echo "🥚 Building canary-$LABEL"
           yarn build
-          yarn changeset version --snapshot "$LABEL"
-          yarn changeset publish --tag "$LABEL"
+          echo "🐣 Releasing canary-$LABEL"
+          yarn changeset version --snapshot "canary-$LABEL"
+          yarn changeset publish --tag "canary-$LABEL"
+      - name: Push tags
+        run: |
+          git push --follow-tags

.github/workflows/changeset.yaml

@@ -26,4 +26,30 @@ jobs:
           commit: "version packages"
           version: yarn ci:version
           publish: yarn ci:publish
-      - run: git push --follow-tags
+      - name: Push git tags
+        if: steps.changesets.outputs.published == 'true'
+        run: git push --follow-tags
+  slack-notify:
+    runs-on: ubuntu-latest
+    needs: version
+    steps:
+      - name: Notify Slack (success)
+        if: needs.version.outputs.published == 'true'
+        # https://github.com/marketplace/actions/post-to-slack
+        uses: pcolby/post-to-slack@v1
+        with:
+          url: ${{ secrets.SLACK_WEBHOOK_URL }}
+          channel: "#wol_kaizen"
+          username: "Release"
+          text: Complete
+          iconEmoji: ":squid:"
+      - name: Notify Slack (failure)
+        if: needs.version.outputs.published == 'false'
+        # https://github.com/marketplace/actions/post-to-slack
+        uses: pcolby/post-to-slack@v1
+        with:
+          url: ${{ secrets.SLACK_WEBHOOK_URL }}
+          channel: "#wol_kaizen"
+          username: "Release"
+          text: Something went wrong
+          iconEmoji: ":squid:"

.github/workflows/test-stories.yaml

@@ -27,6 +27,7 @@ env:
 
 jobs:
   build-storybook:
+    if: github.head_ref != 'changeset-release/main' && github.event.pull_request.draft == false
     runs-on: ubuntu-latest
     steps:
       - name: Checkout repository
@@ -48,7 +49,8 @@ jobs:
     steps:
       - uses: actions/checkout@v3
       - uses: ./.github/actions/setup
-      - uses: ./.github/actions/playwright
+      - name: Install Playwright
+        run: npx playwright install --with-deps
       - uses: ./.github/actions/run-storybook
         with:
           artifactName: ${{ env.ARTIFACT_NAME }}
@@ -63,7 +65,8 @@ jobs:
     steps:
       - uses: actions/checkout@v3
       - uses: ./.github/actions/setup
-      - uses: ./.github/actions/playwright
+      - name: Install Playwright
+        run: npx playwright install --with-deps
       - uses: ./.github/actions/run-storybook
         with:
           artifactName: ${{ env.ARTIFACT_NAME }}
@@ -78,7 +81,8 @@ jobs:
     steps:
       - uses: actions/checkout@v3
       - uses: ./.github/actions/setup
-      - uses: ./.github/actions/playwright
+      - name: Install Playwright
+        run: npx playwright install --with-deps
       - uses: ./.github/actions/run-storybook
         with:
           artifactName: ${{ env.ARTIFACT_NAME }}
@@ -87,7 +91,6 @@ jobs:
 
   chromatic:
     needs: build-storybook
-    if: github.head_ref != 'changeset-release/main' && github.event.pull_request.draft == false
     runs-on: ubuntu-latest
     outputs:
       storybookUrl: ${{ steps.publishChromatic.outputs.storybookUrl }}
@@ -101,13 +104,14 @@ jobs:
         uses: actions/download-artifact@v3
         with:
           name: ${{ env.ARTIFACT_NAME }}
+          path: "./storybook/public"
       - id: publishChromatic
         name: Publish to Chromatic
         uses: chromaui/action@v1
         with:
           token: ${{ github.token }}
           projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
-          storybookBuildDir: ${{ steps.download.outputs.download-path }}
+          storybookBuildDir: "./storybook/public"
           onlyChanged: "!(main)"
           externals: |
             [

.prettierignore

@@ -16,4 +16,4 @@
 **/node_modules/
 /storybook/public/
 /packages/**/dist
-/packages/components/locales
+/packages/component-library/styles/animations/vendor

draft-packages/avatar/package.json

@@ -3,8 +3,8 @@
   "version": "2.8.40",
   "description": "The draft avatar component",
   "scripts": {
-    "prepublish": "tsc --project tsconfig.dist.json",
-    "build": "yarn prepublish",
+    "prepublishOnly": "tsc --project tsconfig.dist.json",
+    "build": "yarn clean && yarn prepublishOnly",
     "clean": "rimraf -g '**/*.d.ts' '**/*.js' '**/*.map'"
   },
   "repository": {

draft-packages/badge/package.json

@@ -3,8 +3,8 @@
   "version": "1.13.12",
   "description": "The draft badge component",
   "scripts": {
-    "prepublish": "tsc --project tsconfig.dist.json",
-    "build": "yarn prepublish",
+    "prepublishOnly": "tsc --project tsconfig.dist.json",
+    "build": "yarn clean && yarn prepublishOnly",
     "clean": "rimraf -g '**/*.d.ts' '**/*.js' '**/*.map'"
   },
   "repository": {

draft-packages/card/package.json

@@ -3,8 +3,8 @@
   "version": "3.2.11",
   "description": "The draft card component",
   "scripts": {
-    "prepublish": "tsc --project tsconfig.dist.json",
-    "build": "yarn prepublish",
+    "prepublishOnly": "tsc --project tsconfig.dist.json",
+    "build": "yarn clean && yarn prepublishOnly",
     "clean": "rimraf -g '**/*.d.ts' '**/*.js' '**/*.map'"
   },
   "repository": {

draft-packages/collapsible/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Change Log
 
+## 3.5.40
+
+### Patch Changes
+
+- [#3945](https://github.com/cultureamp/kaizen-design-system/pull/3945) [`60c405966`](https://github.com/cultureamp/kaizen-design-system/commit/60c405966d5e3fc8c8b57d51bf038490fd8594db) - Make id props optional, using uuid to generate one if not supplied
+
 ## 3.5.39
 
 ### Patch Changes

draft-packages/collapsible/KaizenDraft/Collapsible/Collapsible.tsx

@@ -1,6 +1,7 @@
 import React, { HTMLAttributes } from "react"
 import classnames from "classnames"
 import AnimateHeight from "react-animate-height"
+import { v4 } from "uuid"
 import { IconButton } from "@kaizen/button"
 import { OverrideClassName } from "@kaizen/component-base"
 import chevronDown from "@kaizen/component-library/icons/chevron-down.icon.svg"
@@ -13,7 +14,6 @@ type Variant = "default" | "clear"
 
 export interface CollapsibleProps
   extends OverrideClassName<HTMLAttributes<HTMLDivElement>> {
-  id: string
   children: JSX.Element | JSX.Element[] | string
   title: string
   renderHeader?: (title: string) => JSX.Element | JSX.Element[]
@@ -48,6 +48,7 @@ export interface CollapsibleProps
 
 type State = {
   open: boolean
+  id: string
 }
 
 /**
@@ -57,11 +58,12 @@ type State = {
 export class Collapsible extends React.Component<CollapsibleProps, State> {
   public state = {
     open: !!this.props.open,
+    id: this.props.id || v4(),
   }
 
   public render(): JSX.Element {
     const {
-      id,
+      id: _,
       children,
       title,
       renderHeader,
@@ -78,6 +80,7 @@ export class Collapsible extends React.Component<CollapsibleProps, State> {
       classNameOverride,
       ...props
     } = this.props
+    const { id } = this.state
     const buttonId = `${id}-button`
     const sectionId = `${id}-section`
     const open = this.getOpen()
@@ -170,10 +173,10 @@ export class Collapsible extends React.Component<CollapsibleProps, State> {
     this.props.controlled ? this.props.open : this.state.open
 
   private handleSectionToggle = (): void => {
-    const { onToggle, id, controlled } = this.props
+    const { onToggle, controlled } = this.props
     const open = this.getOpen()
 
-    onToggle && onToggle(!open, id)
+    onToggle && onToggle(!open, this.state.id)
 
     if (!controlled) {
       this.setState({

draft-packages/collapsible/docs/CollapsibleGroup.stories.tsx

@@ -32,13 +32,13 @@ export const CollapsibleGroupDefault: StoryFn<
   typeof CollapsibleGroup
 > = args => (
   <CollapsibleGroup {...args}>
-    <Collapsible id="collapsible-separate-1" open title="First panel">
+    <Collapsible open title="First panel">
       <Paragraph variant="body">{lipsum}</Paragraph>
     </Collapsible>
-    <Collapsible id="collapsible-separate-2" title="Second panel">
+    <Collapsible title="Second panel">
       <Paragraph variant="body">{lipsum}</Paragraph>
     </Collapsible>
-    <Collapsible id="collapsible-separate-3" title="Third panel">
+    <Collapsible title="Third panel">
       <Paragraph variant="body">{lipsum}</Paragraph>
     </Collapsible>
   </CollapsibleGroup>
@@ -47,57 +47,44 @@ CollapsibleGroupDefault.storyName = "Collapsible Group"
 
 const CollapsibleGroupVariantClear = (): JSX.Element => (
   <CollapsibleGroup>
-    <Collapsible
-      variant="clear"
-      id="collapsible-separate-1"
-      open
-      title="First panel"
-    >
+    <Collapsible variant="clear" open title="First panel">
       <Paragraph variant="body">{lipsum}</Paragraph>
     </Collapsible>
-    <Collapsible
-      variant="clear"
-      id="collapsible-separate-2"
-      title="Second panel"
-    >
+    <Collapsible variant="clear" title="Second panel">
       <Paragraph variant="body">{lipsum}</Paragraph>
     </Collapsible>
-    <Collapsible
-      variant="clear"
-      id="collapsible-separate-3"
-      title="Third panel"
-    >
+    <Collapsible variant="clear" title="Third panel">
       <Paragraph variant="body">{lipsum}</Paragraph>
     </Collapsible>
   </CollapsibleGroup>
 )
 
 const CollapsibleGroupSeparated = (): JSX.Element => (
   <CollapsibleGroup separated>
-    <Collapsible id="collapsible-separate-1" open title="First panel">
+    <Collapsible open title="First panel">
       <Paragraph variant="body">{lipsum}</Paragraph>
     </Collapsible>
-    <Collapsible id="collapsible-separate-2" title="Second panel">
+    <Collapsible title="Second panel">
       <Paragraph variant="body">{lipsum}</Paragraph>
     </Collapsible>
-    <Collapsible id="collapsible-separate-3" title="Third panel">
+    <Collapsible title="Third panel">
       <Paragraph variant="body">{lipsum}</Paragraph>
     </Collapsible>
   </CollapsibleGroup>
 )
 
 const CollapsibleGroupStickyHeaders = (): JSX.Element => (
   <CollapsibleGroup separated sticky={{ top: "0" }}>
-    <Collapsible id="collapsible-separate-1" title="First panel" open>
+    <Collapsible title="First panel" open>
       <Paragraph variant="body">{lipsum}</Paragraph>
       <Paragraph variant="body">{lipsum}</Paragraph>
       <Paragraph variant="body">{lipsum}</Paragraph>
     </Collapsible>
-    <Collapsible id="collapsible-separate-2" title="Second panel" open>
+    <Collapsible title="Second panel" open>
       <Paragraph variant="body">{lipsum}</Paragraph>
       <Paragraph variant="body">{lipsum}</Paragraph>
     </Collapsible>
-    <Collapsible id="collapsible-separate-3" title="Third panel" open>
+    <Collapsible title="Third panel" open>
       <Paragraph variant="body">{lipsum}</Paragraph>
       <Paragraph variant="body">{lipsum}</Paragraph>
       <Paragraph variant="body">{lipsum}</Paragraph>

draft-packages/collapsible/docs/ExpertAdviceCollapsible.stories.tsx

@@ -28,7 +28,7 @@ export default {
 } satisfies Meta<typeof ExpertAdviceCollapsible>
 
 export const DefaultStory: StoryFn = args => (
-  <ExpertAdviceCollapsible id="123" title="Expert advice collapsible" {...args}>
+  <ExpertAdviceCollapsible title="Expert advice collapsible" {...args}>
     <Paragraph variant="body">{lipsum}</Paragraph>
   </ExpertAdviceCollapsible>
 )