From 67f0dfb70e74c3ec82d291bbddc80d49e754de05 Mon Sep 17 00:00:00 2001
From: Eric Olkowski <70952936+thatblindgeye@users.noreply.github.com>
Date: Tue, 28 May 2024 11:30:03 -0400
Subject: [PATCH] feat(Banner): added color and status props (#649)
* feat(Banner): added color and status props
* PR feedback
---
.../banner-replace-variantProp.md | 19 +++++
.../banner-replace-variantProp.test.ts | 82 +++++++++++++++++++
.../banner-replace-variantProp.ts | 51 ++++++++++++
.../bannerReplaceVariantPropInput.tsx | 8 ++
.../bannerReplaceVariantPropOutput.tsx | 8 ++
5 files changed, 168 insertions(+)
create mode 100644 packages/eslint-plugin-pf-codemods/src/rules/v6/bannerReplaceVariantProp/banner-replace-variantProp.md
create mode 100644 packages/eslint-plugin-pf-codemods/src/rules/v6/bannerReplaceVariantProp/banner-replace-variantProp.test.ts
create mode 100644 packages/eslint-plugin-pf-codemods/src/rules/v6/bannerReplaceVariantProp/banner-replace-variantProp.ts
create mode 100644 packages/eslint-plugin-pf-codemods/src/rules/v6/bannerReplaceVariantProp/bannerReplaceVariantPropInput.tsx
create mode 100644 packages/eslint-plugin-pf-codemods/src/rules/v6/bannerReplaceVariantProp/bannerReplaceVariantPropOutput.tsx
diff --git a/packages/eslint-plugin-pf-codemods/src/rules/v6/bannerReplaceVariantProp/banner-replace-variantProp.md b/packages/eslint-plugin-pf-codemods/src/rules/v6/bannerReplaceVariantProp/banner-replace-variantProp.md
new file mode 100644
index 000000000..ef6aa2a1a
--- /dev/null
+++ b/packages/eslint-plugin-pf-codemods/src/rules/v6/bannerReplaceVariantProp/banner-replace-variantProp.md
@@ -0,0 +1,19 @@
+### banner-replace-variantProp [(#9891)](https://github.com/patternfly/patternfly-react/pull/9891)
+
+The `variant` property has been removed from Banner. We recommend using our new `color` or `status` properties, depending on the original intent of the `variant` property.
+
+Running the fix for this rule will either replace the `variant` property with the `color` property, or remove the `variant` property entirely, but additional updates may need to be made.
+
+#### Examples
+
+In:
+
+```jsx
+%inputExample%
+```
+
+Out:
+
+```jsx
+%outputExample%
+```
diff --git a/packages/eslint-plugin-pf-codemods/src/rules/v6/bannerReplaceVariantProp/banner-replace-variantProp.test.ts b/packages/eslint-plugin-pf-codemods/src/rules/v6/bannerReplaceVariantProp/banner-replace-variantProp.test.ts
new file mode 100644
index 000000000..9a72a0ec4
--- /dev/null
+++ b/packages/eslint-plugin-pf-codemods/src/rules/v6/bannerReplaceVariantProp/banner-replace-variantProp.test.ts
@@ -0,0 +1,82 @@
+const ruleTester = require("../../ruletester");
+import * as rule from "./banner-replace-variantProp";
+
+const createErrorMessage = (hasValueOfDefault?: boolean) =>
+ `The variant property has been removed from Banner. We recommend using our new color or status properties, depending on the original intent of the variant property. Running the fix for this rule will ${
+ hasValueOfDefault
+ ? "remove the variant property"
+ : "replace the variant property with the color property"
+ }, but additional manual updates may need to be made.`;
+
+ruleTester.run("banner-replace-variantProp", rule, {
+ valid: [
+ {
+ code: ``,
+ },
+ {
+ code: `import { Banner } from '@patternfly/react-core'; `,
+ },
+ ],
+ invalid: [
+ {
+ code: `import { Banner } from '@patternfly/react-core'; `,
+ output: `import { Banner } from '@patternfly/react-core'; `,
+ errors: [
+ {
+ message: createErrorMessage(true),
+ type: "JSXOpeningElement",
+ },
+ ],
+ },
+ {
+ code: `import { Banner } from '@patternfly/react-core'; `,
+ output: `import { Banner } from '@patternfly/react-core'; `,
+ errors: [
+ {
+ message: createErrorMessage(),
+ type: "JSXOpeningElement",
+ },
+ ],
+ },
+ {
+ code: `import { Banner as CustomBanner } from '@patternfly/react-core'; `,
+ output: `import { Banner as CustomBanner } from '@patternfly/react-core'; `,
+ errors: [
+ {
+ message: createErrorMessage(true),
+ type: "JSXOpeningElement",
+ },
+ ],
+ },
+ {
+ code: `import { Banner } from '@patternfly/react-core/dist/esm/components/Banner/index.js'; `,
+ output: `import { Banner } from '@patternfly/react-core/dist/esm/components/Banner/index.js'; `,
+ errors: [
+ {
+ message: createErrorMessage(true),
+ type: "JSXOpeningElement",
+ },
+ ],
+ },
+ {
+ code: `import { Banner } from '@patternfly/react-core/dist/js/components/Banner/index.js'; `,
+ output: `import { Banner } from '@patternfly/react-core/dist/js/components/Banner/index.js'; `,
+ errors: [
+ {
+ message: createErrorMessage(true),
+ type: "JSXOpeningElement",
+ },
+ ],
+ },
+ {
+ code: `import { Banner } from '@patternfly/react-core/dist/dynamic/components/Banner/index.js'; `,
+ output: `import { Banner } from '@patternfly/react-core/dist/dynamic/components/Banner/index.js'; `,
+ errors: [
+ {
+ message: createErrorMessage(true),
+ type: "JSXOpeningElement",
+ },
+ ],
+ },
+ ],
+});
diff --git a/packages/eslint-plugin-pf-codemods/src/rules/v6/bannerReplaceVariantProp/banner-replace-variantProp.ts b/packages/eslint-plugin-pf-codemods/src/rules/v6/bannerReplaceVariantProp/banner-replace-variantProp.ts
new file mode 100644
index 000000000..9a67ec9e8
--- /dev/null
+++ b/packages/eslint-plugin-pf-codemods/src/rules/v6/bannerReplaceVariantProp/banner-replace-variantProp.ts
@@ -0,0 +1,51 @@
+import { Rule } from "eslint";
+import { JSXOpeningElement } from "estree-jsx";
+import { getFromPackage, getAttribute, getAttributeValue } from "../../helpers";
+
+// https://github.com/patternfly/patternfly-react/pull/9891
+module.exports = {
+ meta: { fixable: "code" },
+ create: function (context: Rule.RuleContext) {
+ const { imports } = getFromPackage(context, "@patternfly/react-core");
+
+ const bannerImport = imports.find(
+ (specifier) => specifier.imported.name === "Banner"
+ );
+
+ return !bannerImport
+ ? {}
+ : {
+ JSXOpeningElement(node: JSXOpeningElement) {
+ if (
+ node.name.type === "JSXIdentifier" &&
+ bannerImport.local.name === node.name.name
+ ) {
+ const attribute = getAttribute(node, "variant");
+ if (!attribute) {
+ return;
+ }
+ const attributeValue = getAttributeValue(
+ context,
+ attribute.value
+ );
+ const isValueDefault = attributeValue === "default";
+ const fixMessage = isValueDefault
+ ? "remove the variant property"
+ : "replace the variant property with the color property";
+
+ context.report({
+ node,
+ message: `The variant property has been removed from Banner. We recommend using our new color or status properties, depending on the original intent of the variant property. Running the fix for this rule will ${fixMessage}, but additional manual updates may need to be made.`,
+ fix(fixer) {
+ if (isValueDefault) {
+ return fixer.replaceText(attribute, "");
+ }
+
+ return fixer.replaceText(attribute.name, "color");
+ },
+ });
+ }
+ },
+ };
+ },
+};
diff --git a/packages/eslint-plugin-pf-codemods/src/rules/v6/bannerReplaceVariantProp/bannerReplaceVariantPropInput.tsx b/packages/eslint-plugin-pf-codemods/src/rules/v6/bannerReplaceVariantProp/bannerReplaceVariantPropInput.tsx
new file mode 100644
index 000000000..5cc68f84e
--- /dev/null
+++ b/packages/eslint-plugin-pf-codemods/src/rules/v6/bannerReplaceVariantProp/bannerReplaceVariantPropInput.tsx
@@ -0,0 +1,8 @@
+import { Banner } from "@patternfly/react-core";
+
+export const BannerReplaceVariantPropInput = () => (
+ <>
+
+
+
+);
diff --git a/packages/eslint-plugin-pf-codemods/src/rules/v6/bannerReplaceVariantProp/bannerReplaceVariantPropOutput.tsx b/packages/eslint-plugin-pf-codemods/src/rules/v6/bannerReplaceVariantProp/bannerReplaceVariantPropOutput.tsx
new file mode 100644
index 000000000..cf4529e60
--- /dev/null
+++ b/packages/eslint-plugin-pf-codemods/src/rules/v6/bannerReplaceVariantProp/bannerReplaceVariantPropOutput.tsx
@@ -0,0 +1,8 @@
+import { Banner } from "@patternfly/react-core";
+
+export const BannerReplaceVariantPropInput = () => (
+ <>
+
+
+
+);