@kaizen/components 1.61.2 → 1.62.0

package/dist/types/{__containers__/GuidanceBlock/v1 → GuidanceBlock}/GuidanceBlock.d.ts

@@ -1,8 +1,8 @@
 import React from "react";
-import { HeadingProps } from "../../../Heading";
-import { SceneProps, SpotProps } from "../../../Illustration";
-import { ButtonProps } from "../../../__actions__/v2";
-import { TooltipProps } from "../../../__overlays__/Tooltip/v1";
+import { HeadingProps } from "../Heading";
+import { SceneProps, SpotProps } from "../Illustration";
+import { ButtonProps } from "../__actions__/v2";
+import { TooltipProps } from "../__overlays__/Tooltip/v1";
 import { VariantType } from "./types";
 export type ActionProps = ButtonProps & {
     tooltip?: TooltipProps;

package/dist/types/index.d.ts

@@ -20,6 +20,7 @@ export * from "./ErrorPage";
 export * from "./FieldGroup";
 export * from "./FieldMessage";
 export * from "./Filter";
+export * from "./GuidanceBlock";
 export * from "./Heading";
 export * from "./Icon";
 export * from "./Illustration";
@@ -60,4 +61,3 @@ export * from "./__layout__/Workflow/v1";
 export * from "./__overlays__/Tooltip/v1";
 export * from "./__actions__/Menu/v1";
 export * from "./__actions__/Button/v1";
-export * from "./__containers__/GuidanceBlock/v1";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kaizen/components",
-  "version": "1.61.2",
+  "version": "1.62.0",
   "description": "Kaizen component library",
   "author": "Geoffrey Chong <geoff.chong@cultureamp.com>",
   "homepage": "https://cultureamp.design",
@@ -120,8 +120,8 @@
     "svgo": "^3.3.2",
     "tslib": "^2.6.3",
     "tsx": "^4.17.0",
-    "@kaizen/design-tokens": "10.6.0",
-    "@kaizen/package-bundler": "1.1.4"
+    "@kaizen/design-tokens": "10.6.1",
+    "@kaizen/package-bundler": "1.1.5"
   },
   "peerDependencies": {
     "@cultureamp/i18n-react-intl": "^2.5.9",

package/src/Collapsible/Collapsible/_docs/Collapsible.mdx

@@ -30,8 +30,6 @@ Collapsibles are used to collapse and expand content inline on a page. This lets
 
 <DocsStory of={CollapsibleStories.CustomHeader} />
 
-<DocsStory of={CollapsibleStories.Sticky} sourceState="shown" />
-
 ### Controlled
 
 Control the open state using a `useState` (or similar) by setting the `controlled` prop to `true`

package/src/Filter/FilterSelect/FilterSelect.spec.tsx

@@ -107,9 +107,7 @@ describe("<FilterSelect>", () => {
         render(<FilterSelectWrapper isOpen />)
         expect(screen.queryByRole("listbox")).toBeVisible()
         await waitFor(() => {
-          expect(
-            screen.queryByRole("option", { name: "Regular" })
-          ).toHaveFocus()
+          expect(screen.queryByRole("listbox")).toHaveFocus()
         })
       })
 

package/src/{__containers__/GuidanceBlock/v1 → GuidanceBlock}/GuidanceBlock.module.scss

@@ -4,8 +4,8 @@
 @import "~@kaizen/design-tokens/sass/color";
 @import "~@kaizen/design-tokens/sass/animation";
 @import "~@kaizen/design-tokens/sass/spacing";
-@import "../../../../styles/utils/responsive";
-@import "../../../../styles/utils/button-reset";
+@import "../../styles/utils/responsive";
+@import "../../styles/utils/button-reset";
 
 @mixin guidance-block-under-480 {
   @media (max-width: 480px) {

package/src/{__containers__/GuidanceBlock/v1 → GuidanceBlock}/_docs/GuidanceBlock.mdx

@@ -4,7 +4,7 @@ import * as GuidanceBlockStories from "./GuidanceBlock.stories"
 
 <Meta of={GuidanceBlockStories} />
 
-# GuidanceBlock (V1)
+# GuidanceBlock
 
 <ResourceLinks
   sourceCode="https://github.com/cultureamp/kaizen-design-system/tree/main/packages/components/src/GuidanceBlock"
@@ -13,7 +13,7 @@ import * as GuidanceBlockStories from "./GuidanceBlock.stories"
 
 />
 
-<KAIOInstallation exportNames="GuidanceBlock" version="1" family="containers" />
+<KAIOInstallation exportNames="GuidanceBlock" />
 
 ## Overview
 

package/src/{__containers__/GuidanceBlock/v1 → GuidanceBlock}/_docs/GuidanceBlock.stickersheet.stories.tsx

@@ -12,7 +12,7 @@ import { GuidanceBlock, GuidanceBlockProps } from "../index"
 import { variantsMap } from "../types"
 
 export default {
-  title: "Containers/GuidanceBlock/v1",
+  title: "Containers/GuidanceBlock",
   parameters: {
     chromatic: { disable: false },
     controls: { disable: true },

package/src/{__containers__/GuidanceBlock/v1 → GuidanceBlock}/_docs/GuidanceBlock.stories.tsx

@@ -29,7 +29,7 @@ const defaultText = {
 }
 
 const meta = {
-  title: "Containers/GuidanceBlock/v1",
+  title: "Containers/GuidanceBlock",
   component: GuidanceBlock,
   args: {
     layout: "default",

package/src/Modal/ConfirmationModal/ConfirmationModal.tsx

@@ -210,7 +210,11 @@ export const ConfirmationModal = ({
         </ModalBody>
         <ModalFooter
           actions={footerActions}
-          appearance={mood === "negative" ? "destructive" : "primary"}
+          appearance={
+            mood === "negative" || variant == "warning"
+              ? "destructive"
+              : "primary"
+          }
           unpadded={unpadded}
         />
       </div>

package/src/MultiSelect/subcomponents/Popover/Popover.module.scss

@@ -10,6 +10,7 @@
   border-radius: $border-solid-border-radius;
   background: $color-white;
   overflow: auto;
+  z-index: 100000;
 
   &:focus {
     outline: none;

package/src/__future__/Select/Select.spec.tsx

@@ -194,11 +194,11 @@ describe("<Select />", () => {
       })
 
       describe("Given the menu is opened", () => {
-        it("moves the focus to the first focusable element inside the menu initially", async () => {
+        it("focuses the listbox initially", async () => {
           const { getByRole } = render(<SelectWrapper defaultOpen />)
           expect(getByRole("listbox")).toBeVisible()
           await waitFor(() => {
-            expect(getByRole("option", { name: "Short black" })).toHaveFocus()
+            expect(getByRole("listbox")).toHaveFocus()
           })
         })
         it("is closed when hits the escape key", async () => {
@@ -305,12 +305,12 @@ describe("<Select />", () => {
         })
       })
 
-      it("keeps the focus ring at the first element when hits arrow up key on it", async () => {
+      it("focuses the last item in the list on up arrow press", async () => {
         const { getByRole } = render(<SelectWrapper />)
         await user.tab()
         await user.keyboard("{ArrowUp}")
         await waitFor(() => {
-          expect(getByRole("option", { name: "Short black" })).toHaveFocus()
+          expect(getByRole("option", { name: "Magic" })).toHaveFocus()
         })
       })
 

package/src/__future__/Select/Select.tsx

@@ -191,16 +191,7 @@ export const Select = <Option extends SelectOption = SelectOption>({
           trigger(selectToggleProps, selectToggleProps.ref)
         )}
         {state.isOpen && (
-          <Popover
-            id={popoverId}
-            portalContainer={portalContainer}
-            refs={refs}
-            focusOnProps={{
-              onEscapeKey: state.close,
-              onClickOutside: state.close,
-              noIsolation: true,
-            }}
-          >
+          <Popover id={popoverId} portalContainer={portalContainer} refs={refs}>
             <SelectProvider<Option> state={state}>
               <SelectPopoverContents menuProps={menuProps}>
                 {children}

package/src/__future__/Select/subcomponents/ListBox/ListBox.module.scss

@@ -5,8 +5,8 @@
   padding: 0;
   display: grid;
   max-height: 22rem;
+}
 
-  &.focus {
-    outline: none;
-  }
+.listBox:focus-visible {
+  outline: none;
 }

package/src/__future__/Select/subcomponents/ListBox/ListBox.tsx

@@ -23,7 +23,7 @@ export const ListBox = <Option extends SelectOption>({
   const { state } = useSelectContext<Option>()
   const ref = React.useRef<HTMLUListElement>(null)
   const { listBoxProps } = useListBox(
-    { ...menuProps, disallowEmptySelection: true, autoFocus: "first" },
+    { ...menuProps, disallowEmptySelection: true },
     state,
     ref
   )

package/src/__layout__/Workflow/v2/subcomponents/Footer/components/ProgressStepper/ProgressStepper.module.scss

@@ -87,9 +87,15 @@ $indicator-size: 1.25rem;
 .stepperDescription {
   display: flex;
   justify-content: center;
+  color: var(--color-white);
+  font-family: var(--typography-paragraph-small-font-family);
+  font-weight: var(--typography-paragraph-small-font-weight);
+  font-size: var(--typography-paragraph-small-font-size);
+  line-height: var(--typography-paragraph-small-line-height);
+  letter-spacing: var(--typography-paragraph-small-letter-spacing);
 
-  @media (min-width: 768px) {
-    // sr hidden styles
+  @media (width >= 768px) {
+    /* sr hidden styles */
     position: absolute;
     width: 0;
     height: 0;

package/src/__layout__/Workflow/v2/subcomponents/Footer/components/ProgressStepper/ProgressStepper.tsx

@@ -133,14 +133,9 @@ export const ProgressStepper = ({
           )
         })}
       </ol>
-      <Text
-        classNameOverride={styles.stepperDescription}
-        variant="small"
-        color="white"
-        id="stepper-description"
-      >
+      <span className={styles.stepperDescription} id="stepper-description">
         Step {currentStepIndex + 1} of {steps.length}
-      </Text>
+      </span>
     </div>
   )
 }

package/src/__layout__/Workflow/v3/subcomponents/Footer/components/ProgressStepper/ProgressStepper.module.css

@@ -92,6 +92,11 @@
 .stepperDescription {
   display: flex;
   justify-content: center;
+  font-family: var(--typography-paragraph-small-font-family);
+  font-weight: var(--typography-paragraph-small-font-weight);
+  font-size: var(--typography-paragraph-small-font-size);
+  line-height: var(--typography-paragraph-small-line-height);
+  letter-spacing: var(--typography-paragraph-small-letter-spacing);
 
   @media (width >= 768px) {
     /* sr hidden styles */

package/src/__layout__/Workflow/v3/subcomponents/Footer/components/ProgressStepper/ProgressStepper.tsx

@@ -140,13 +140,9 @@ export const ProgressStepper = ({
           )
         })}
       </ol>
-      <Text
-        classNameOverride={styles.stepperDescription}
-        variant="small"
-        id="stepper-description"
-      >
+      <span className={styles.stepperDescription} id="stepper-description">
         Step {currentStepIndex + 1} of {steps.length}
-      </Text>
+      </span>
     </div>
   )
 }

package/src/index.ts

@@ -20,7 +20,7 @@ export * from "./ErrorPage"
 export * from "./FieldGroup"
 export * from "./FieldMessage"
 export * from "./Filter"
-
+export * from "./GuidanceBlock"
 export * from "./Heading"
 export * from "./Icon"
 export * from "./Illustration"
@@ -61,4 +61,3 @@ export * from "./__layout__/Workflow/v1"
 export * from "./__overlays__/Tooltip/v1"
 export * from "./__actions__/Menu/v1"
 export * from "./__actions__/Button/v1"
-export * from "./__containers__/GuidanceBlock/v1"

package/codemods/updateGuidanceBlockVariantProp/index.ts

@@ -1,19 +0,0 @@
-import { transformComponentsInDir } from "../utils"
-import { transformGuidanceBlockVariantProp } from "./transformGuidanceBlockVariantProp"
-/** This is here as a script runner that updates GuidanceBlock variants to v2 variants */
-const updateGuidanceBlockVariantProp = (): void => {
-  // eslint-disable-next-line no-console
-  console.log(" ~(-_- ~) Running GuidanceBlock transformer (~ -_-)~")
-  const targetDir = process.argv[2]
-  if (!targetDir) {
-    process.exit(1)
-  }
-
-  transformComponentsInDir(
-    targetDir,
-    transformGuidanceBlockVariantProp,
-    "GuidanceBlock"
-  )
-}
-
-updateGuidanceBlockVariantProp()

package/codemods/updateGuidanceBlockVariantProp/transformGuidanceBlockVariantProp.spec.ts

@@ -1,135 +0,0 @@
-import { parseJsx } from "../__tests__/utils"
-import { transformSource, printAst } from "../utils"
-import { transformGuidanceBlockVariantProp } from "./transformGuidanceBlockVariantProp"
-
-describe("transformGuidanceBlockVariantProp", () => {
-  it("updates the import statement for GuidanceBlock to the new family version", () => {
-    const inputAst = parseJsx(`
-      import { GuidanceBlock } from "@kaizen/components"
-      import { Card } from "@kaizen/components"
-    `)
-    const outputAst = parseJsx(`
-      import { GuidanceBlock } from "@kaizen/components/v2/containers"
-      import { Card } from "@kaizen/components"
-    `)
-    const transformed = transformSource({
-      sourceFile: inputAst,
-      astTransformer: transformGuidanceBlockVariantProp,
-      tagName: "GuidanceBlock",
-    })
-    expect(transformed).toBe(printAst(outputAst))
-  })
-
-  it("removes all instances of `positive`, `negative`, `informative`, `cautionary`, `assertive`", () => {
-    const inputAst = parseJsx(`
-      const TestComponent = () => <GuidanceBlock variant="positive" />
-      const TestComponent = () => <GuidanceBlock variant="negative" />
-      const TestComponent = () => <GuidanceBlock variant="informative" />
-      const TestComponent = () => <GuidanceBlock variant="cautionary" />
-      const TestComponent = () => <GuidanceBlock variant="assertive" />
-    `)
-    const outputAst = parseJsx(`
-      const TestComponent = () => <GuidanceBlock />
-      const TestComponent = () => <GuidanceBlock />
-      const TestComponent = () => <GuidanceBlock />
-      const TestComponent = () => <GuidanceBlock />
-      const TestComponent = () => <GuidanceBlock />
-    `)
-    const transformed = transformSource({
-      sourceFile: inputAst,
-      astTransformer: transformGuidanceBlockVariantProp,
-      tagName: "GuidanceBlock",
-    })
-    expect(transformed).toEqual(printAst(outputAst))
-  })
-
-  it('replaces variant="expert-advice" with variant="prominent"', () => {
-    const inputAst = parseJsx(`
-      export const TestComponent = () => <GuidanceBlock variant="expert-advice" />
-    `)
-    const outputAst = parseJsx(`
-      export const TestComponent = () => <GuidanceBlock variant="prominent" />
-    `)
-    const transformed = transformSource({
-      sourceFile: inputAst,
-      astTransformer: transformGuidanceBlockVariantProp,
-      tagName: "GuidanceBlock",
-    })
-    expect(transformed).toBe(printAst(outputAst))
-  })
-
-  it("handles multiple attributes and replace only variant", () => {
-    const inputAst = parseJsx(`
-      export const TestComponent = () => <GuidanceBlock variant="positive" id="123" />
-    `)
-    const outputAst = parseJsx(`
-      export const TestComponent = () => <GuidanceBlock id="123" />
-    `)
-    const transformed = transformSource({
-      sourceFile: inputAst,
-      astTransformer: transformGuidanceBlockVariantProp,
-      tagName: "GuidanceBlock",
-    })
-    expect(transformed).toBe(printAst(outputAst))
-  })
-
-  it("handles nested GuidanceBlock components", () => {
-    const inputAst = parseJsx(`
-      export const TestComponent = () => <div><GuidanceBlock variant="positive" id="123" /></div>
-    `)
-    const outputAst = parseJsx(`
-      export const TestComponent = () => <div><GuidanceBlock id="123" /></div>
-    `)
-    const transformed = transformSource({
-      sourceFile: inputAst,
-      astTransformer: transformGuidanceBlockVariantProp,
-      tagName: "GuidanceBlock",
-    })
-    expect(transformed).toBe(printAst(outputAst))
-  })
-
-  it("transforms multiple GuidanceBlock", () => {
-    const inputAst = parseJsx(`
-      export const TestComponent = () => <div><GuidanceBlock variant="positive" /><GuidanceBlock variant="positive" /></div>
-    `)
-    const outputAst = parseJsx(`
-      export const TestComponent = () => <div><GuidanceBlock /><GuidanceBlock /></div>
-    `)
-    const transformed = transformSource({
-      sourceFile: inputAst,
-      astTransformer: transformGuidanceBlockVariantProp,
-      tagName: "GuidanceBlock",
-    })
-    expect(transformed).toBe(printAst(outputAst))
-  })
-
-  it("transforms GuidanceBlock with arbitrary braces", () => {
-    const inputAst = parseJsx(`
-      export const TestComponent = () => <div><GuidanceBlock variant={"informative"} /><GuidanceBlock variant={'assertive'} /><GuidanceBlock variant={\`expert-advice\`} /></div>
-    `)
-    const outputAst = parseJsx(`
-      export const TestComponent = () => <div><GuidanceBlock /><GuidanceBlock /><GuidanceBlock variant="prominent" /></div>
-    `)
-    const transformed = transformSource({
-      sourceFile: inputAst,
-      astTransformer: transformGuidanceBlockVariantProp,
-      tagName: "GuidanceBlock",
-    })
-    expect(transformed).toBe(printAst(outputAst))
-  })
-
-  it("won't modify variants usings variables", () => {
-    const inputAst = parseJsx(`
-      export const TestComponent = () => <div><GuidanceBlock variant={varName} /></div>
-    `)
-    const outputAst = parseJsx(`
-      export const TestComponent = () => <div><GuidanceBlock variant={varName} /></div>
-    `)
-    const transformed = transformSource({
-      sourceFile: inputAst,
-      astTransformer: transformGuidanceBlockVariantProp,
-      tagName: "GuidanceBlock",
-    })
-    expect(transformed).toBe(printAst(outputAst))
-  })
-})

package/codemods/updateGuidanceBlockVariantProp/transformGuidanceBlockVariantProp.ts

@@ -1,77 +0,0 @@
-import ts from "typescript"
-import { getPropValueText } from "../utils/getPropValueText"
-
-/** Recurses through AST to find and update any jsx element that matched the tagName */
-export const transformGuidanceBlockVariantProp =
-  (context: ts.TransformationContext, tagName: string) =>
-  (rootNode: ts.Node): ts.Node => {
-    function visit(node: ts.Node): ts.Node {
-      if (ts.isImportDeclaration(node) && node.getText().includes(tagName)) {
-        const newModuleSpecifier = ts.factory.createStringLiteral(
-          "@kaizen/components/v2/containers"
-        )
-        return ts.factory.updateImportDeclaration(
-          node,
-          node.modifiers,
-          node.importClause,
-          newModuleSpecifier,
-          node.attributes
-        )
-      }
-
-      if (ts.isJsxSelfClosingElement(node)) {
-        if (node.tagName.getText() === tagName) {
-          const newAttributes = node.attributes.properties.reduce<
-            ts.JsxAttributeLike[]
-          >((acc, attr) => {
-            if (ts.isJsxAttribute(attr) && attr.name.getText() === "variant") {
-              const valueName =
-                attr.initializer && getPropValueText(attr.initializer)
-
-              const oldValues = [
-                "positive",
-                "negative",
-                "informative",
-                "cautionary",
-                "assertive",
-              ]
-
-              if (valueName) {
-                if (oldValues.includes(valueName)) {
-                  // Remove the attribute for old values
-                  return acc
-                }
-
-                if (valueName === "expert-advice") {
-                  // Replace the attribute value for expert-advice
-                  return [
-                    ...acc,
-                    ts.factory.createJsxAttribute(
-                      attr.name,
-                      ts.factory.createStringLiteral("prominent")
-                    ),
-                  ]
-                }
-
-                // Keep the attribute for other values
-                return [...acc, attr]
-              }
-            }
-
-            return [...acc, attr]
-          }, [])
-
-          if (ts.isJsxSelfClosingElement(node)) {
-            return ts.factory.updateJsxSelfClosingElement(
-              node,
-              node.tagName,
-              node.typeArguments,
-              ts.factory.createJsxAttributes(newAttributes)
-            )
-          }
-        }
-      }
-      return ts.visitEachChild(node, visit, context)
-    }
-    return ts.visitNode(rootNode, visit)
-  }