@kaizen/components 1.61.3 → 1.63.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/{__layout__/Workflow/v3 → Workflow}/Workflow.d.ts

@@ -1,5 +1,5 @@
 import { HTMLAttributes } from "react";
-import { OverrideClassName } from "../../../types/OverrideClassName";
+import { OverrideClassName } from "../types/OverrideClassName";
 import { FooterProps, HeaderProps } from "./subcomponents";
 export type WorkflowProps = OverrideClassName<HTMLAttributes<HTMLDivElement>> & FooterProps & Pick<HeaderProps, "workflowName" | "statusTag" | "headerActions">;
 export declare const Workflow: {

package/dist/types/{__layout__/Workflow/v2 → Workflow}/subcomponents/Footer/Footer.d.ts

@@ -1,4 +1,4 @@
-import { OverrideClassName } from "../../../../../types/OverrideClassName";
+import { OverrideClassName } from "../../../types/OverrideClassName";
 import { ProgressStepperProps, FooterRootProps } from "./components";
 export type FooterProps = {
     /** An action to return to a previous step */

package/dist/types/{__layout__/Workflow/v1 → Workflow}/subcomponents/Footer/components/FooterActions/FooterActions.d.ts

@@ -1,5 +1,5 @@
 import { HTMLAttributes } from "react";
-import { OverrideClassName } from "../../../../../../../types/OverrideClassName";
+import { OverrideClassName } from "../../../../../types/OverrideClassName";
 export type FooterActionsProps = {
     actionType?: "Previous" | "Next";
     action?: JSX.Element;

package/dist/types/{__layout__/Workflow/v2 → Workflow}/subcomponents/Footer/components/Root/Root.d.ts

@@ -1,5 +1,5 @@
 import { HTMLAttributes } from "react";
-import { OverrideClassName } from "../../../../../../../types/OverrideClassName";
+import { OverrideClassName } from "../../../../../types/OverrideClassName";
 export type FooterRootProps = OverrideClassName<HTMLAttributes<HTMLHeadingElement>>;
 export declare const FooterRoot: {
     ({ children, classNameOverride, ...restProps }: FooterRootProps): JSX.Element;

package/dist/types/{__layout__/Workflow/v3 → Workflow}/subcomponents/Header/components/Actions/Actions.d.ts

@@ -1,5 +1,5 @@
 import { HTMLAttributes } from "react";
-import { OverrideClassName } from "../../../../../../../types/OverrideClassName";
+import { OverrideClassName } from "../../../../../types/OverrideClassName";
 export type WorkflowActionsProps = {
     /**
      * Header actions will render in order of the array.

package/dist/types/{__layout__/Workflow/v2 → Workflow}/subcomponents/Header/components/Branding/Branding.d.ts

@@ -1,6 +1,6 @@
 import { HTMLAttributes } from "react";
-import { BrandProps } from "../../../../../../../Brand";
-import { OverrideClassName } from "../../../../../../../types/OverrideClassName";
+import { BrandProps } from "../../../../../Brand";
+import { OverrideClassName } from "../../../../../types/OverrideClassName";
 export type WorflowBrandingProps = {
     variant?: BrandProps["variant"];
     alt: string;

package/dist/types/{__layout__/Workflow/v3 → Workflow}/subcomponents/Header/components/Root/Root.d.ts

@@ -1,5 +1,5 @@
 import { HTMLAttributes } from "react";
-import { OverrideClassName } from "../../../../../../../types/OverrideClassName";
+import { OverrideClassName } from "../../../../../types/OverrideClassName";
 export type HeaderRootProps = OverrideClassName<HTMLAttributes<HTMLHeadingElement>>;
 export declare const HeaderRoot: {
     ({ children, classNameOverride, ...restProps }: HeaderRootProps): JSX.Element;

package/dist/types/{__layout__/Workflow/v3 → Workflow}/subcomponents/Header/components/Titles/Titles.d.ts

@@ -1,5 +1,5 @@
 import { HTMLAttributes, ReactNode } from "react";
-import { OverrideClassName } from "../../../../../../../types/OverrideClassName";
+import { OverrideClassName } from "../../../../../types/OverrideClassName";
 export type WorkflowTitlesProps = {
     workflowName: string;
     stepName: string;

package/dist/types/{__layout__/Workflow/v1 → Workflow}/subcomponents/Main/Main.d.ts

@@ -1,5 +1,5 @@
 import { HTMLAttributes, ReactNode } from "react";
-import { OverrideClassName } from "../../../../../types/OverrideClassName";
+import { OverrideClassName } from "../../../types/OverrideClassName";
 export type WorkflowMainProps = OverrideClassName<HTMLAttributes<HTMLDivElement>> & {
     children: ReactNode;
 };

package/dist/types/{__layout__/Workflow/v3 → Workflow}/subcomponents/Wrapper/Wrapper.d.ts

@@ -1,5 +1,5 @@
 import { HTMLAttributes, ReactNode } from "react";
-import { OverrideClassName } from "../../../../../types/OverrideClassName";
+import { OverrideClassName } from "../../../types/OverrideClassName";
 export type WorkflowWrapperProps = OverrideClassName<HTMLAttributes<HTMLDivElement>> & {
     children: ReactNode;
 };

package/dist/types/__future__/index.d.ts

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

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";
@@ -56,8 +57,6 @@ export * from "./ToggleSwitch";
 export * from "./utils";
 export * from "./VisuallyHidden";
 export * from "./Well";
-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.3",
+  "version": "1.63.0",
   "description": "Kaizen component library",
   "author": "Geoffrey Chong <geoff.chong@cultureamp.com>",
   "homepage": "https://cultureamp.design",
@@ -121,7 +121,7 @@
     "tslib": "^2.6.3",
     "tsx": "^4.17.0",
     "@kaizen/design-tokens": "10.6.1",
-    "@kaizen/package-bundler": "1.1.4"
+    "@kaizen/package-bundler": "1.1.5"
   },
   "peerDependencies": {
     "@cultureamp/i18n-react-intl": "^2.5.9",

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/v2 → GuidanceBlock}/_docs/GuidanceBlock.mdx

@@ -4,7 +4,7 @@ import * as GuidanceBlockStories from "./GuidanceBlock.stories"
 
 <Meta of={GuidanceBlockStories} />
 
-# GuidanceBlock (V2)
+# 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="2" 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/{__layout__/Workflow/v3 → Workflow}/_docs/ProgressStepper.mdx

@@ -14,7 +14,7 @@ import * as ProgressStepperStories from "./ProgressStepper.stories"
 
 <Installation
   installCommand="pnpm add @kaizen/components"
-  importStatement='import { Workflow } from "@kaizen/components/v3/layout"'
+  importStatement='import { Workflow } from "@kaizen/components"'
 />
 
 ## Overview

package/src/{__layout__/Workflow/v3 → Workflow}/_docs/ProgressStepper.stories.tsx

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

package/src/{__layout__/Workflow/v3 → Workflow}/_docs/Workflow.mdx

@@ -15,7 +15,7 @@ import * as WorkflowHeader from "./WorkflowHeader.stories"
 
 <Installation
   installCommand="pnpm add @kaizen/components"
-  importStatement='import { Workflow } from "@kaizen/components/v3/layout"'
+  importStatement='import { Workflow } from "@kaizen/components"'
 />
 
 ## Overview

package/src/{__layout__/Workflow/v3 → Workflow}/_docs/Workflow.stories.tsx

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

package/src/{__layout__/Workflow/v2 → Workflow}/_docs/WorkflowFooter.mdx

@@ -15,7 +15,7 @@ import * as WorkflowFooterStories from "./WorkflowFooter.stories"
 
 <Installation
   installCommand="pnpm add @kaizen/components"
-  importStatement='import { Workflow } from "@kaizen/components/v2/layout"'
+  importStatement='import { Workflow } from "@kaizen/components"'
 />
 
 ## Overview

package/src/{__layout__/Workflow/v3 → Workflow}/_docs/WorkflowFooter.stories.tsx

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

package/src/{__layout__/Workflow/v1 → Workflow}/_docs/WorkflowHeader.mdx

@@ -15,7 +15,7 @@ import * as WorkflowHeaderStories from "./WorkflowHeader.stories"
 
 <Installation
   installCommand="pnpm add @kaizen/components"
-  importStatement='import { Workflow } from "@kaizen/components/v1/layout"'
+  importStatement='import { Workflow } from "@kaizen/components'
 />
 
 ## Overview

package/src/{__layout__/Workflow/v3 → Workflow}/_docs/WorkflowHeader.stories.tsx

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

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

@@ -45,6 +45,9 @@
   display: none;
   text-align: center;
   margin-bottom: var(--spacing-12);
+  font-family: var(--typography-paragraph-small-font-family);
+  font-size: var(--typography-paragraph-small-font-size);
+  line-height: var(--typography-paragraph-small-line-height);
   font-weight: var(--typography-paragraph-bold-font-weight);
   color: var(--color-gray-600);
 }
@@ -92,6 +95,10 @@
 .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);
 
   @media (width >= 768px) {
     /* sr hidden styles */

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

@@ -5,7 +5,6 @@ import {
   IndicatorInactiveIcon,
   SuccessIcon,
 } from "~components/Icon"
-import { Text } from "~components/Text"
 import { VisuallyHidden } from "~components/VisuallyHidden"
 import styles from "./ProgressStepper.module.css"
 
@@ -109,15 +108,14 @@ export const ProgressStepper = ({
                   {/* will need to be translated */}
                   {accessibleName}
                 </VisuallyHidden>
-                <Text
-                  classNameOverride={classnames(styles.stepName, {
+                <span
+                  className={classnames(styles.stepName, {
                     [styles.isCurrent]: isCurrentStep,
                   })}
-                  variant="small"
                   aria-hidden
                 >
                   {step.label}
-                </Text>
+                </span>
                 <div className={styles.stepIndicator}>
                   <span
                     className={classnames(styles.stepIcon, {
@@ -140,13 +138,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/__future__/Select/_docs/Select.mdx

@@ -101,3 +101,5 @@ By default, the Select's popover will attach itself to the `body` of the documen
 You can change the default behaviour by providing a `portalContainerId` to attach this to different element in the DOM. This can help to resolve issues that may arise with `z-index` or having a Select in a modal.
 
 <Canvas of={SelectStories.PortalContainer} />
+
+There is currently a known issue whereby a selected option will cause the page to scroll to the top of the window on open (click on [default to see example](https://cultureamp.design/?path=/docs/components-select-future--docs#portals)). This can be solved by setting a `portalContainerId` to the closest parent of the Select.

package/src/__future__/index.ts

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

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/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"
@@ -57,8 +57,6 @@ export * from "./ToggleSwitch"
 export * from "./utils"
 export * from "./VisuallyHidden"
 export * from "./Well"
-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))
-  })
-})