Add codemod to update IconButton size

.changeset/four-sheep-mix.md

@@ -0,0 +1,5 @@
+---
+'@utilitywarehouse/ds-codemod': major
+---
+
+Add codemod to update IconButton size

packages/codemod/transforms/web-ui/v1/__testfixtures__/rename-icon-button-size-responsive.input.tsx

@@ -0,0 +1,31 @@
+// this is a comment at the beginning of the file
+import * as React from 'react';
+import { IconButton } from '@utilitywarehouse/web-ui';
+import { ChevronRightMediumIcon } from '@utilitywarehouse/react-icons';
+
+const Component = () => (
+  <div>
+    <IconButton
+      label="continue"
+      size={{
+        mobile: 'small',
+        desktop: 'large',
+      }}
+    >
+      <ChevronRightMediumIcon />
+    </IconButton>
+    <IconButton
+      label="continue"
+      size={{
+        mobile: 'small',
+        tablet: 'large',
+        desktop: 'small',
+        wide: 'large',
+      }}
+    >
+      <ChevronRightMediumIcon />
+    </IconButton>
+  </div>
+);
+
+export default Component;

packages/codemod/transforms/web-ui/v1/__testfixtures__/rename-icon-button-size-responsive.output.tsx

@@ -0,0 +1,31 @@
+// this is a comment at the beginning of the file
+import * as React from 'react';
+import { IconButton } from '@utilitywarehouse/web-ui';
+import { ChevronRightMediumIcon } from '@utilitywarehouse/react-icons';
+
+const Component = () => (
+  <div>
+    <IconButton
+      label="continue"
+      size={{
+        mobile: 'small',
+        desktop: 'medium',
+      }}
+    >
+      <ChevronRightMediumIcon />
+    </IconButton>
+    <IconButton
+      label="continue"
+      size={{
+        mobile: 'small',
+        tablet: 'medium',
+        desktop: 'small',
+        wide: 'medium',
+      }}
+    >
+      <ChevronRightMediumIcon />
+    </IconButton>
+  </div>
+);
+
+export default Component;

packages/codemod/transforms/web-ui/v1/__testfixtures__/rename-icon-button-size.input.tsx

@@ -0,0 +1,20 @@
+// this is a comment at the beginning of the file
+import * as React from 'react';
+import { IconButton } from '@utilitywarehouse/web-ui';
+import { ChevronRightMediumIcon } from '@utilitywarehouse/react-icons';
+
+const Component = () => (
+  <div>
+    <IconButton label="continue">
+        <ChevronRightMediumIcon/>
+    </IconButton>
+    <IconButton size='small' label="continue">
+        <ChevronRightMediumIcon/>
+    </IconButton>
+    <IconButton size='large' label="continue">
+        <ChevronRightMediumIcon/>
+    </IconButton>
+  </div>
+);
+
+export default Component;

packages/codemod/transforms/web-ui/v1/__testfixtures__/rename-icon-button-size.output.tsx

@@ -0,0 +1,20 @@
+// this is a comment at the beginning of the file
+import * as React from 'react';
+import { IconButton } from '@utilitywarehouse/web-ui';
+import { ChevronRightMediumIcon } from '@utilitywarehouse/react-icons';
+
+const Component = () => (
+  <div>
+    <IconButton label="continue">
+        <ChevronRightMediumIcon/>
+    </IconButton>
+    <IconButton size='small' label="continue">
+        <ChevronRightMediumIcon/>
+    </IconButton>
+    <IconButton size='medium' label="continue">
+        <ChevronRightMediumIcon/>
+    </IconButton>
+  </div>
+);
+
+export default Component;

packages/codemod/transforms/web-ui/v1/__tests__/rename-icon-button-size.test.js

@@ -0,0 +1,18 @@
+/* eslint-disable no-undef */
+const defineTest = require('jscodeshift/dist/testUtils').defineTest;
+
+const NAME = 'rename-icon-button-size';
+
+describe(NAME, () => {
+  defineTest(__dirname, NAME, {}, undefined, {
+    parser: 'tsx',
+  });
+});
+
+const RESPONSIVE_NAME = `${NAME}-responsive`;
+
+describe(RESPONSIVE_NAME, () => {
+  defineTest(__dirname, NAME, {}, RESPONSIVE_NAME, {
+    parser: 'tsx',
+  });
+});

packages/codemod/transforms/web-ui/v1/migration.js

@@ -1,9 +1,11 @@
 /* eslint-disable no-undef */
 const transformRenameLabButtonSize = require('./rename-lab-button-size');
+const transformRenameIconButtonSize = require('./rename-icon-button-size');
 
 function transformer(file, api, options) {
   // run this before migrating Button out of lab submodule
   file.source = transformRenameLabButtonSize(file, api, options);
+  file.source = transformRenameIconButtonSize(file, api, options);
   return file.source;
 }
 

packages/codemod/transforms/web-ui/v1/rename-icon-button-size.js

@@ -0,0 +1,38 @@
+function transformer(file, api) {
+  const j = api.jscodeshift;
+  const root = j(file.source);
+
+  const getFirstNode = () => root.find(j.Program).get('body', 0).node;
+  // Save the comments attached to the first node
+  const firstNode = getFirstNode();
+  const { comments } = firstNode;
+
+  const hasWebUIIconButton =
+    root
+      .find(j.ImportDeclaration)
+      .filter(path => path.value.source.value === '@utilitywarehouse/web-ui')
+      .find(j.ImportSpecifier)
+      .filter(path => path.node.imported.name === 'IconButton').length > 0;
+
+  if (hasWebUIIconButton) {
+    root
+      .findJSXElements('IconButton')
+      .find(j.JSXAttribute, { name: { type: 'JSXIdentifier', name: 'size' } })
+      .find(j.Literal)
+      .forEach(path => {
+        const value = path.node.value;
+        if (value === 'large') {
+          path.node.value = 'medium';
+        }
+      });
+  }
+
+  // If the first node has been modified or deleted, reattach the comments
+  const firstNode2 = getFirstNode();
+  if (firstNode2 !== firstNode) {
+    firstNode2.comments = comments;
+  }
+  return root.toSource({ quote: 'single' });
+}
+
+module.exports = transformer;

packages/web-ui/docs/web-ui/guides/migration/v1.mdx

@@ -71,14 +71,23 @@ npx @utilitywarehouse/ds-codemod web-ui/v1/migration <path>
 Included codemods:
 
 - `rename-lab-button-size`
+- `rename-icon-button-size`
 
 Please make sure you fix any linting or formatting issues before continuing to
 run any further codemods.
 
-### Rename lab button size
+### Rename lab Button size
 
-Updates the size value `large` to `medium` for the `Button` comopnent from the lab submodule.
+Updates the size value `large` to `medium` for the `Button` component from the lab submodule.
 
 ```console
 npx @utilitywarehouse/ds-codemod web-ui/v1/rename-lab-button-size <path>
 ```
+
+### Rename IconButton size
+
+Updates the size value `large` to `medium` for the `IconButton` component.
+
+```console
+npx @utilitywarehouse/ds-codemod web-ui/v1/rename-icon-button-size <path>
+```