@kaizen/components 1.66.0 → 1.67.0

package/codemods/README.md

@@ -33,3 +33,8 @@ kaizen-codemod src migrateWellVariantToColor
 - `migrateWellVariantToColor`: Migrates `Well` component prop from `variant` to `color`
 - `removeInputEditModalMood`: Removes `InputEditModal` component prop `mood`
 - `removePopoverVariant`: Removes `Popover` component props `variant` and `customIcon`
+- `upgradeIconV1`: Migrates `*Icon` components to a new equivalent
+  - `CaMonogramIcon` becomes `Brand`
+  - `SpinnerIcon` becomes `LoadingSpinner`
+  - All other Icons become future `Icon`
+    - **Note:** See [Icon API Specification (Future)](https://cultureamp.design/?path=/docs/illustrations-icon-icon-future-api-specification--docs) for setup instructions

package/codemods/upgradeIconV1/getNewIconPropsFromOldIconName.ts

@@ -0,0 +1,255 @@
+import * as OLD_ICONS from "~components/Icon"
+import { IconNames } from "~components/__future__/Icon/types"
+import { StringSuggestions } from "~components/types/StringSuggestions"
+
+// `undefined` means the icon has no usage, thus is not available in the new icon set
+type NewIconProps = { name: IconNames; isFilled?: boolean } | undefined
+
+const iconMap = new Map<keyof typeof OLD_ICONS, NewIconProps>([
+  ["AcademyIcon", { name: "school" }],
+  ["ActionOffIcon", undefined],
+  ["ActionOffWhiteIcon", undefined],
+  ["ActionOnIcon", { name: "flash_on" }],
+  ["AddIcon", { name: "add" }],
+  ["AddLinkIcon", { name: "add_link" }],
+  ["AddWhiteIcon", { name: "add_link" }],
+  ["AiIcon", { name: "auto_awesome" }],
+  ["ArchivedIcon", { name: "assignment_returned" }],
+  ["ArchivedWhiteIcon", undefined],
+  ["ArrowBackwardIcon", { name: "arrow_back" }],
+  ["ArrowDownIcon", { name: "arrow_downward" }],
+  ["ArrowForwardIcon", { name: "arrow_forward" }],
+  ["ArrowLeftIcon", { name: "arrow_back" }],
+  ["ArrowRightIcon", { name: "arrow_forward" }],
+  ["ArrowUpIcon", { name: "arrow_upward" }],
+  ["AssignmentIcon", { name: "assignment_add" }],
+  ["BlankIcon", undefined],
+  ["BoldIcon", { name: "format_bold" }],
+  ["BookmarkOffIcon", { name: "bookmark" }],
+  ["BookmarkOnIcon", { name: "bookmark", isFilled: true }],
+  ["BranchingIcon", { name: "reduce_capacity" }],
+  ["BullettedListIcon", { name: "format_list_bulleted" }],
+  ["CameraIcon", { name: "add_a_photo" }],
+  // "CaMonogramIcon" to shift usage to using Brand
+  ["CautionIcon", { name: "warning" }],
+  ["CautionWhiteIcon", { name: "warning" }],
+  ["CheckIcon", { name: "check" }],
+  ["ChevronDownIcon", { name: "keyboard_arrow_down" }],
+  ["ChevronLeftIcon", { name: "chevron_left" }],
+  ["ChevronRightIcon", { name: "chevron_right" }],
+  ["ChevronUpIcon", { name: "keyboard_arrow_up" }],
+  ["ClearIcon", { name: "cancel" }],
+  ["ClearWhiteIcon", { name: "cancel" }],
+  ["ClosedIcon", { name: "assignment_turned_in" }],
+  ["ClosedWhiteIcon", { name: "assignment_turned_in" }],
+  ["CloseIcon", { name: "close" }],
+  ["CommentAddIcon", { name: "add_comment" }],
+  ["CommentAddWhiteIcon", undefined],
+  ["CommentBankIcon", { name: "comment_bank" }],
+  ["CommentDisabledIcon", { name: "chat_error" }],
+  ["CommentDisabledWhiteIcon", undefined],
+  ["CommentIcon", { name: "sms" }],
+  ["CommentWhiteIcon", undefined],
+  ["CommunicationsIcon", { name: "forum" }],
+  ["CompetencyLibraryIcon", { name: "user_attributes" }],
+  ["ConfigureIcon", { name: "build" }],
+  ["ConnectIcon", { name: "power" }],
+  ["ConnectLineIcon", { name: "power" }],
+  ["CustomIcon", { name: "brush" }],
+  ["DashboardIcon", { name: "dashboard" }],
+  ["DateEndIcon", { name: "event" }],
+  ["DateEndWhiteIcon", undefined],
+  ["DateRangeIcon", { name: "date_range" }],
+  ["DateRangeWhiteIcon", { name: "date_range" }],
+  ["DateStartIcon", { name: "today" }],
+  ["DateStartWhiteIcon", { name: "today" }],
+  ["DecreaseIndentIcon", { name: "format_indent_decrease" }],
+  ["DeltaBareIcon", undefined],
+  ["DeltaBareWhiteIcon", undefined],
+  ["DeltaFlatIcon", { name: "horizontal_rule" }],
+  ["DeltaIcon", undefined],
+  ["DeltaNegativeIcon", { name: "south_east" }],
+  ["DeltaPositiveIcon", { name: "north_east" }],
+  ["DeltaWhiteIcon", undefined],
+  ["DemographicsIcon", { name: "tune" }],
+  ["DepartmentIcon", { name: "groups" }],
+  ["DraftIcon", { name: "note_alt" }],
+  ["DraftWhiteIcon", { name: "note_alt" }],
+  ["DragIcon", { name: "drag_indicator" }],
+  ["DuplicateIcon", { name: "content_copy" }],
+  ["EditIcon", { name: "edit" }],
+  ["EffectivenessIcon", { name: "potted_plant" }],
+  ["EllipsisIcon", { name: "more_horiz" }],
+  ["EmailIcon", { name: "mail" }],
+  ["EmptyIcon", { name: "radio_button_unchecked" }],
+  ["EmptyWhiteIcon", { name: "radio_button_unchecked" }],
+  ["EndIcon", { name: "keyboard_tab" }],
+  ["EngagementIcon", undefined],
+  ["EngagementWhiteIcon", undefined],
+  ["EqualIcon", undefined],
+  ["EqualWhiteIcon", undefined],
+  ["ExclamationIcon", { name: "error" }],
+  ["ExclamationOctagonIcon", { name: "warning" }],
+  ["ExclamationOctagonWhiteIcon", undefined],
+  ["ExclamationWhiteIcon", { name: "error" }],
+  ["ExperienceIcon", undefined],
+  ["ExportIcon", { name: "cloud_download" }],
+  ["ExportWhiteIcon", { name: "cloud_download" }],
+  ["ExternalLinkIcon", { name: "open_in_new" }],
+  ["FaceDissatisfiedIcon", { name: "sentiment_dissatisfied" }],
+  ["FaceDissatisfiedWhiteIcon", undefined],
+  ["FaceNeutralIcon", { name: "sentiment_neutral" }],
+  ["FaceNeutralWhiteIcon", undefined],
+  ["FaceSatisfiedIcon", { name: "sentiment_satisfied" }],
+  ["FaceSatisfiedWhiteIcon", undefined],
+  ["FaceVeryDissatisfiedIcon", undefined],
+  ["FaceVeryDissatisfiedWhiteIcon", undefined],
+  ["FaceVerySatisfiedIcon", { name: "sentiment_very_satisfied" }],
+  ["FaceVerySatisfiedWhiteIcon", undefined],
+  ["FactorsIcon", undefined],
+  ["FavoriteOffIcon", { name: "favorite" }],
+  ["FavoriteOnIcon", { name: "favorite", isFilled: true }],
+  ["FeedbackClassifyIcon", { name: "reviews" }],
+  ["FeedbackClassifyWhiteIcon", undefined],
+  ["FeedbackCompletedIcon", undefined],
+  ["FeedbackCompletedWhiteIcon", undefined],
+  ["FeedbackReportIcon", { name: "mms" }],
+  ["FeedbackReportWhiteIcon", undefined],
+  ["FeedbackReviewIcon", { name: "rate_review" }],
+  ["FeedbackReviewWhiteIcon", undefined],
+  ["FeedbackShareIcon", { name: "chat_paste_go" }],
+  ["FeedbackShareWhiteIcon", undefined],
+  ["FileIcon", { name: "draft" }],
+  ["FileWhiteIcon", { name: "draft" }],
+  ["FilterIcon", { name: "tune" }],
+  ["FlagOffIcon", { name: "flag" }],
+  ["FlagOffWhiteIcon", { name: "flag" }],
+  ["FlagOnIcon", { name: "flag", isFilled: true }],
+  ["FullIcon", { name: "radio_button_checked" }],
+  ["GridViewIcon", undefined],
+  ["GuidanceIcon", { name: "lightbulb" }],
+  ["HamburgerIcon", { name: "menu" }],
+  ["HeatmapIcon", { name: "local_fire_department" }],
+  ["HeatmapWhiteIcon", undefined],
+  ["HierarchyIcon", { name: "lan" }],
+  ["HomeIcon", { name: "home" }],
+  ["ImportIcon", { name: "backup" }],
+  ["ImportWhiteIcon", { name: "backup" }],
+  ["IncreaseIndentIcon", { name: "format_indent_increase" }],
+  ["IndicatorActiveIcon", { name: "radio_button_checked" }],
+  ["IndicatorInactiveIcon", { name: "radio_button_unchecked" }],
+  ["InformationIcon", { name: "info" }],
+  ["InformationWhiteIcon", { name: "info" }],
+  ["InsightIcon", { name: "find_in_page" }],
+  ["InsightsIcon", undefined],
+  ["InvisibleIcon", { name: "visibility_off" }],
+  ["ItalicsIcon", { name: "format_italic" }],
+  ["KebabIcon", { name: "more_vert" }],
+  ["KioskIcon", undefined],
+  ["KioskWhiteIcon", undefined],
+  ["LaunchIcon", { name: "play_circle" }],
+  ["LaunchWhiteIcon", undefined],
+  ["LeaderboardIcon", undefined],
+  ["ListViewIcon", { name: "list" }],
+  ["LiveIcon", { name: "sensors" }],
+  ["LockIcon", { name: "lock" }],
+  ["LockWhiteIcon", undefined],
+  ["LogOutIcon", { name: "logout" }],
+  ["MaximizeIcon", { name: "open_in_full" }],
+  ["MeatballsIcon", { name: "more_horiz" }],
+  ["MinimizeIcon", { name: "close_fullscreen" }],
+  ["MinusIcon", { name: "remove" }],
+  ["NavigatorIcon", undefined],
+  ["NotificationIcon", { name: "notifications_active" }],
+  ["NumberedListIcon", { name: "format_list_numbered" }],
+  ["NumberedListRtlIcon", { name: "format_list_numbered_rtl" }],
+  ["OpenIcon", undefined],
+  ["OpenWhiteIcon", { name: "assignment_ind" }],
+  ["OrganizationIcon", { name: "domain" }],
+  ["ParticipationIcon", { name: "front_hand" }],
+  ["ParticipationWhiteIcon", undefined],
+  ["PauseIcon", { name: "pause" }],
+  ["PauseWhiteIcon", undefined],
+  ["PercentageIcon", { name: "percent" }],
+  ["PermissionsIcon", { name: "key" }],
+  ["PersonIcon", undefined],
+  ["PhotoUploadIcon", { name: "add_a_photo" }],
+  ["PowerIcon", { name: "power_settings_new" }],
+  ["PrintIcon", { name: "print" }],
+  ["PrintWhiteIcon", undefined],
+  ["ProcessManagerIcon", { name: "playlist_add_check" }],
+  ["PromotionIcon", { name: "grade" }],
+  ["PromotionWhiteIcon", undefined],
+  ["QuestionIcon", { name: "help" }],
+  ["QuestionsIcon", undefined],
+  ["QuestionWhiteIcon", { name: "help" }],
+  ["RedoIcon", { name: "redo" }],
+  ["RefreshIcon", { name: "refresh" }],
+  ["RemoveLinkIcon", { name: "link_off" }],
+  ["RepeatsIcon", undefined],
+  ["ReportIcon", { name: "bar_chart" }],
+  ["ReportSharingIcon", { name: "forward" }],
+  ["RestoreIcon", { name: "history" }],
+  ["SaveIcon", undefined],
+  ["SearchIcon", { name: "search" }],
+  ["SearchWhiteIcon", { name: "search" }],
+  ["SecurityTipIcon", { name: "privacy_tip" }],
+  ["SendIcon", { name: "send" }],
+  ["SendRtlIcon", undefined],
+  ["SettingsIcon", { name: "settings" }],
+  ["SettingsWhiteIcon", undefined],
+  ["ShareIcon", { name: "forward" }],
+  ["SkipIcon", { name: "keyboard_tab" }],
+  ["SkipWhiteIcon", { name: "keyboard_tab" }],
+  ["SortAscendingIcon", { name: "arrow_drop_up" }],
+  ["SortDescendingIcon", { name: "arrow_drop_down" }],
+  // "SpinnerIcon" to be replaced with XS LoadingSpinner component
+  ["StarOffIcon", { name: "star" }],
+  ["StarOnIcon", { name: "star", isFilled: true }],
+  ["StartIcon", { name: "keyboard_tab_rtl" }],
+  ["SubtractIcon", { name: "remove" }],
+  ["SubtractWhiteIcon", undefined],
+  ["SuccessIcon", { name: "check_circle" }],
+  ["SuccessWhiteIcon", { name: "check_circle" }],
+  ["SupportIcon", { name: "support" }],
+  ["SurveysIcon", { name: "assignment" }],
+  ["SurveysWhiteIcon", { name: "assignment" }],
+  ["SyncIcon", { name: "cached" }],
+  ["TagIcon", { name: "label" }],
+  ["TasksIcon", undefined],
+  ["TasksWhiteIcon", undefined],
+  ["TemplateIcon", undefined],
+  ["TemplateWhiteIcon", undefined],
+  ["TextAnalyticsIcon", { name: "chat_apps_script" }],
+  ["TextAnalyticsWhiteIcon", undefined],
+  ["ThumbsDownIcon", { name: "thumb_down", isFilled: true }],
+  ["ThumbsDownOffIcon", { name: "thumb_down" }],
+  ["ThumbsDownOnIcon", { name: "thumb_down", isFilled: true }],
+  ["ThumbsUpIcon", { name: "thumb_up", isFilled: true }],
+  ["ThumbsUpOffIcon", { name: "thumb_up" }],
+  ["ThumbsUpOnIcon", { name: "thumb_up", isFilled: true }],
+  ["TimeIcon", { name: "schedule" }],
+  ["TimeWhiteIcon", undefined],
+  ["TranslationIcon", { name: "translate" }],
+  ["TrashIcon", { name: "delete" }],
+  ["UnattributedIcon", { name: "psychology_alt" }],
+  ["UnattributedWhiteIcon", undefined],
+  ["UnderlineIcon", { name: "format_underlined" }],
+  ["UndoIcon", { name: "undo" }],
+  ["UserAddIcon", { name: "person_add" }],
+  ["UserDeleteIcon", { name: "person_cancel" }],
+  ["UserExitIcon", undefined],
+  ["UserIcon", { name: "person" }],
+  ["UserSelectIcon", { name: "person_check" }],
+  ["UserSettingsIcon", { name: "manage_accounts" }],
+  ["UsersIcon", { name: "group" }],
+  ["UserUpdateIcon", undefined],
+  ["VisibleIcon", { name: "visibility" }],
+  ["WritingIcon", undefined],
+  ["ZoomInIcon", { name: "zoom_in" }],
+  ["ZoomOutIcon", { name: "zoom_out" }],
+])
+
+export const getNewIconPropsFromOldIconName = (
+  oldValue: StringSuggestions<keyof typeof OLD_ICONS>
+): NewIconProps => iconMap.get(oldValue as keyof typeof OLD_ICONS)

package/codemods/upgradeIconV1/index.ts

@@ -0,0 +1,33 @@
+import fs from "fs"
+import ts from "typescript"
+import { getKaioTagNamesByRegex, transformSource, traverseDir } from "../utils"
+import { upgradeIconV1 } from "./upgradeIconV1"
+
+const run = (): void => {
+  // eslint-disable-next-line no-console
+  console.log("~(-_- ~) Running Icon v1 to Future upgrade (~ -_-)~")
+  const targetDir = process.argv[2]
+  if (!targetDir) {
+    process.exit(1)
+  }
+
+  const transformFile = (
+    componentFilePath: string,
+    sourceFile: ts.SourceFile
+  ): void => {
+    const tagNames = getKaioTagNamesByRegex(sourceFile, "Icon$")
+    if (tagNames) {
+      const updatedSourceFile = transformSource({
+        sourceFile,
+        astTransformer: upgradeIconV1,
+        tagName: tagNames,
+      })
+
+      fs.writeFileSync(componentFilePath, updatedSourceFile, "utf8")
+    }
+  }
+
+  traverseDir(targetDir, transformFile)
+}
+
+run()

package/codemods/upgradeIconV1/transformCaMonogramIconToBrand.spec.ts

@@ -0,0 +1,83 @@
+import ts from "typescript"
+import { parseJsx } from "../__tests__/utils"
+import { printAst } from "../utils"
+import { transformCaMonogramIconToBrand } from "./transformCaMonogramIconToBrand"
+
+export const mockedTransformer =
+  (alias?: string) =>
+  (context: ts.TransformationContext) =>
+  (rootNode: ts.Node): ts.Node => {
+    const visit = (node: ts.Node): ts.Node => {
+      if (ts.isJsxOpeningElement(node) || ts.isJsxSelfClosingElement(node)) {
+        return transformCaMonogramIconToBrand(node, alias)
+      }
+      return ts.visitEachChild(node, visit, context)
+    }
+    return ts.visitNode(rootNode, visit)
+  }
+
+const transformInput = (sourceFile: ts.SourceFile, alias?: string): string => {
+  const result = ts.transform(sourceFile, [mockedTransformer(alias)])
+  const transformedSource = result.transformed[0] as ts.SourceFile
+  return printAst(transformedSource)
+}
+
+describe("transformCaMonogramIconToBrand()", () => {
+  it("replaces CaMonogramIcon with Brand variant enso and adds size", () => {
+    const inputAst = parseJsx("<CaMonogramIcon />")
+    const outputAst = parseJsx(
+      '<Brand variant="enso" style={{ width: "20px" }} />'
+    )
+    expect(transformInput(inputAst)).toEqual(printAst(outputAst))
+  })
+
+  it("uses alias if it is defined", () => {
+    const inputAst = parseJsx("<CaMonogramIcon />")
+    const outputAst = parseJsx(
+      '<KzBrand variant="enso" style={{ width: "20px" }} />'
+    )
+    expect(transformInput(inputAst, "KzBrand")).toEqual(printAst(outputAst))
+  })
+
+  describe("transform existing props", () => {
+    it("removes role and changes aria-label to alt", () => {
+      const inputAst = parseJsx(`
+          export const TestComponent = () => (
+            <>
+              <CaMonogramIcon role="presentation" />
+              <CaMonogramIcon role="img" aria-label="Add something" />
+            </>
+          )
+        `)
+      const outputAst = parseJsx(`
+          export const TestComponent = () => (
+            <>
+              <Brand variant="enso" style={{ width: "20px" }} alt="" />
+              <Brand variant="enso" style={{ width: "20px" }} alt="Add something" />
+            </>
+          )
+        `)
+      expect(transformInput(inputAst)).toEqual(printAst(outputAst))
+    })
+
+    it("leaves classNameOverride as is", () => {
+      const inputAst = parseJsx(`
+          export const TestComponent = () => <CaMonogramIcon classNameOverride="mt-16" />
+        `)
+      const outputAst = parseJsx(`
+          export const TestComponent = () => <Brand variant="enso" style={{ width: "20px" }} classNameOverride="mt-16" />
+        `)
+      expect(transformInput(inputAst)).toEqual(printAst(outputAst))
+    })
+
+    it("removes inheritSize and does not add size", () => {
+      const inputAst = parseJsx(`
+          export const TestComponent = () => <CaMonogramIcon inheritSize />
+        `)
+      const outputAst = parseJsx(`
+          export const TestComponent = () => <Brand variant="enso" />
+        `)
+      expect(transformInput(inputAst)).toEqual(printAst(outputAst))
+    })
+  })
+})

package/codemods/upgradeIconV1/transformCaMonogramIconToBrand.ts

@@ -0,0 +1,53 @@
+import ts from "typescript"
+import {
+  createStringProp,
+  createStyleProp,
+  getPropValueText,
+  updateJsxElementWithNewProps,
+} from "../utils"
+
+export const transformCaMonogramIconToBrand = (
+  node: ts.JsxOpeningElement | ts.JsxSelfClosingElement,
+  tagName: string = "Brand"
+): ts.Node => {
+  let shouldInheritSize = false
+  const newAttributes = node.attributes.properties.reduce<
+    ts.JsxAttributeLike[]
+  >((acc, attr) => {
+    if (ts.isJsxAttribute(attr)) {
+      const propName = attr.name.getText()
+
+      if (propName === "role") {
+        if (
+          attr.initializer &&
+          getPropValueText(attr.initializer) === "presentation"
+        ) {
+          acc.push(createStringProp("alt", ""))
+        }
+        return acc
+      }
+
+      if (propName === "aria-label") {
+        const value = attr.initializer && getPropValueText(attr.initializer)
+        if (value) acc.push(createStringProp("alt", value))
+        return acc
+      }
+
+      if (propName === "inheritSize") {
+        shouldInheritSize = true
+        return acc
+      }
+    }
+
+    acc.push(attr)
+    return acc
+  }, [])
+
+  if (!shouldInheritSize) {
+    newAttributes.unshift(createStyleProp({ width: "20px" }))
+  }
+
+  newAttributes.unshift(createStringProp("variant", "enso"))
+
+  return updateJsxElementWithNewProps(node, newAttributes, tagName)
+}

package/codemods/upgradeIconV1/transformIcon.spec.ts

@@ -0,0 +1,181 @@
+import ts from "typescript"
+import { parseJsx } from "../__tests__/utils"
+import { printAst } from "../utils"
+import { getNewIconPropsFromOldIconName } from "./getNewIconPropsFromOldIconName"
+import { transformIcon } from "./transformIcon"
+
+export const mockedTransformer =
+  (context: ts.TransformationContext) =>
+  (rootNode: ts.Node): ts.Node => {
+    const visit = (node: ts.Node): ts.Node => {
+      if (ts.isJsxOpeningElement(node) || ts.isJsxSelfClosingElement(node)) {
+        const oldIconName = node.tagName.getText()
+        const newIconProps = getNewIconPropsFromOldIconName(oldIconName)
+        return transformIcon(node, newIconProps!.name, newIconProps!.isFilled)
+      }
+      return ts.visitEachChild(node, visit, context)
+    }
+    return ts.visitNode(rootNode, visit)
+  }
+
+const transformInput = (sourceFile: ts.SourceFile): string => {
+  const result = ts.transform(sourceFile, [mockedTransformer])
+  const transformedSource = result.transformed[0] as ts.SourceFile
+  return printAst(transformedSource)
+}
+
+describe("transformIcon()", () => {
+  it("renames component and adds equivalent props", () => {
+    const inputAst = parseJsx(`
+      export const TestComponent = () => (
+        <>
+          <AddIcon />
+          <FlagOffIcon />
+          <FlagOffWhiteIcon />
+          <FlagOnIcon />
+          <MeatballsIcon />
+        </>
+      )
+    `)
+    const outputAst = parseJsx(`
+      export const TestComponent = () => (
+        <>
+          <Icon name="add" />
+          <Icon name="flag" />
+          <Icon name="flag" />
+          <Icon name="flag" isFilled />
+          <Icon name="more_horiz" />
+        </>
+      )
+    `)
+    expect(transformInput(inputAst)).toEqual(printAst(outputAst))
+  })
+
+  describe("transform existing props", () => {
+    it("replaces role and aria-label with equivalent prop", () => {
+      const inputAst = parseJsx(`
+        export const TestComponent = () => (
+          <>
+            <AddIcon role="presentation" />
+            <AddIcon role="img" aria-label="Add something" />
+            <AddIcon role="img" aria-label={alt} />
+          </>
+        )
+      `)
+      const outputAst = parseJsx(`
+        export const TestComponent = () => (
+          <>
+            <Icon name="add" isPresentational />
+            <Icon name="add" alt="Add something" />
+            <Icon name="add" alt={alt} />
+          </>
+        )
+      `)
+      expect(transformInput(inputAst)).toEqual(printAst(outputAst))
+    })
+
+    it("replaces classNameOverride with className prop", () => {
+      const inputAst = parseJsx(`
+        export const TestComponent = () => <AddIcon role="presentation" classNameOverride="mt-16" />
+      `)
+      const outputAst = parseJsx(`
+        export const TestComponent = () => <Icon name="add" isPresentational className="mt-16" />
+      `)
+      expect(transformInput(inputAst)).toEqual(printAst(outputAst))
+    })
+
+    it("leaves inheritSize - this should throw a TS error for the consumer", () => {
+      const inputAst = parseJsx(`
+        export const TestComponent = () => <AddIcon role="presentation" inheritSize />
+      `)
+      const outputAst = parseJsx(`
+        export const TestComponent = () => <Icon name="add" isPresentational
+        // @todo: Apply the correct --icon-size (eg. in Tailwind: className="[--icon-size:48]")
+        inheritSize />
+      `)
+      expect(transformInput(inputAst)).toEqual(printAst(outputAst))
+    })
+
+    it("removes aria-hidden", () => {
+      const inputAst = parseJsx(`
+        export const TestComponent = () => <AddIcon role="presentation" aria-hidden={true} />
+      `)
+      const outputAst = parseJsx(`
+        export const TestComponent = () => <Icon name="add" isPresentational />
+      `)
+      expect(transformInput(inputAst)).toEqual(printAst(outputAst))
+    })
+
+    it("removes fontSize", () => {
+      const inputAst = parseJsx(`
+        export const TestComponent = () => <AddIcon role="presentation" fontSize={20} />
+      `)
+      const outputAst = parseJsx(`
+        export const TestComponent = () => <Icon name="add" isPresentational />
+      `)
+      expect(transformInput(inputAst)).toEqual(printAst(outputAst))
+    })
+
+    it("removes viewBox", () => {
+      const inputAst = parseJsx(`
+        export const TestComponent = () => <AddIcon role="presentation" viewBox="0 0 24 24" />
+      `)
+      const outputAst = parseJsx(`
+        export const TestComponent = () => <Icon name="add" isPresentational />
+      `)
+      expect(transformInput(inputAst)).toEqual(printAst(outputAst))
+    })
+
+    describe("color prop to style", () => {
+      it("transforms a string value", () => {
+        const inputAst = parseJsx(`
+          export const TestComponent = () => (
+            <>
+              <AddIcon color="grey" />
+              <AddIcon color="#0168b3" />
+            </>
+          )
+        `)
+        const outputAst = parseJsx(`
+          export const TestComponent = () => (
+            <>
+              <Icon name="add" style={{ color: "grey" }} />
+              <Icon name="add" style={{ color: "#0168b3" }} />
+            </>
+          )
+        `)
+        expect(transformInput(inputAst)).toEqual(printAst(outputAst))
+      })
+
+      it("transforms a variable", () => {
+        const inputAst = parseJsx(`
+          export const TestComponent = () => (
+            <>
+              <AddIcon color={c.gray500} />
+              <AddIcon color={variableGrey} />
+            </>
+          )
+        `)
+        const outputAst = parseJsx(`
+          export const TestComponent = () => (
+            <>
+              <Icon name="add" style={{ color: c.gray500 }} />
+              <Icon name="add" style={{ color: variableGrey }} />
+            </>
+          )
+        `)
+        expect(transformInput(inputAst)).toEqual(printAst(outputAst))
+      })
+    })
+
+    it("transforms height and width to style", () => {
+      const inputAst = parseJsx(`
+        export const TestComponent = () => <AddIcon height={24} width={24} />
+      `)
+      const outputAst = parseJsx(`
+        export const TestComponent = () => <Icon name="add" style={{ height: 24, width: 24 }} />
+      `)
+      expect(transformInput(inputAst)).toEqual(printAst(outputAst))
+    })
+  })
+})