Docs(web-react): Introduce Migration Guide to version 3

docs/migrations/web-react/MIGRATION-v3.md

@@ -10,14 +10,20 @@ Introducing version 3 of the _spirit-web-react_ package.
 ## Overview
 
 - [Component Changes](#component-changes)
-  - [Button and ButtonLink: `isSquare` prop](#button-and-buttonlink-issquare-prop-renamed-to-issymmetrical)
-  - [Heading elementType prop is now mandatory](#heading-elementtype-prop-is-now-mandatory)
-  - [Link `hasVisitedStyleAllowed`](#link-hasvisitedstyleallowed)
-  - [Link `isUnderlined`](#link-isunderlined)
+  - [Button and ButtonLink: `isSquare` Prop Renamed to `isSymmetrical`](#button-and-buttonlink-issquare-prop-renamed-to-issymmetrical)
+  - [Button and ButtonLink: Removed `inverted` Variant](#button-and-buttonlink-removed-inverted-variant)
+  - [Header: Removed `inverted` Variant](#header-removed-inverted-variant)
+  - [Heading: `elementType` Prop is Now Mandatory](#heading-elementtype-prop-is-now-mandatory)
+  - [Link: Removed `isUnderlined` Prop](#link-removed-isunderlined-prop)
+  - [Link: Removed `inverted` Variant](#link-removed-inverted-variant)
+  - [Link: The `hasVisitedStyleAllowed` Prop](#link-the-hasvisitedstyleallowed-prop)
+  - [Pill: Update Color Palette](#pill-update-color-palette)
+  - [ProductLogo: Removed `inverted` Variant](#productlogo-removed-inverted-variant)
+  - [Toast: Renamed Color Variant `inverted` to `neutral` in `ToastBar`](#toast-renamed-color-variant-inverted-to-neutral-in-toastbar)
 
 ## Component Changes
 
-### Button and ButtonLink: `isSquare` prop renamed to `isSymmetrical`
+### Button and ButtonLink: `isSquare` Prop Renamed to `isSymmetrical`
 
 Button `isSquare` prop was renamed to `isSymmetrical`.
 
@@ -41,7 +47,17 @@ Manually replace the props in your project.
 - `<ButtonLink isSquare … />` → `<ButtonLink isSymmetrical … />`
 </details>
 
-### Heading elementType prop is now mandatory
+### Button and ButtonLink: Removed `inverted` Variant
+
+The `inverted` variant was removed from the `Button` and `ButtonLink` components.
+Use themes instead to switch the color scheme.
+
+### Header: Removed `inverted` Variant
+
+The `inverted` variant was removed from the `Header` component. Instead the `primary` variant
+was introduced. Use themes to switch the color scheme.
+
+### Heading: `elementType` Prop is Now Mandatory
 
 The `Heading` component previously had a default `elementType` of `"div"`.
 We've removed this default to encourage developers to explicitly choose a more appropriate semantic HTML element.
@@ -67,7 +83,34 @@ Manually replace the props in your project.
 - `<Heading … />` → `<Heading elementType="{/* Your semantic HTML element here */}" … />`
 </details>
 
-### Link: The `hasVisitedStyleAllowed` prop was added
+### Link: Removed `isUnderlined` Prop
+
+The `isUnderlined` property was removed, please use `underlined` instead.
+
+#### Migration Guide
+
+🪄 Use codemods to automatically update your codebase:
+
+```sh
+npx @lmc-eu/spirit-codemods -p <path> -t v3/web-react/link-underlined-prop
+```
+
+👉 See [Codemods documentation][readme-codemods] for more details.
+
+<details>
+  <summary>🔧 Manual Migration Steps</summary>
+
+Manually replace the props in your project.
+
+- `<Link isUnderlined … />` → `<Link underlined="always" … />`
+</details>
+
+### Link: Removed `inverted` Variant
+
+The `inverted` variant was removed from the `Link` component.
+Use themes instead to switch the color scheme.
+
+### Link: The `hasVisitedStyleAllowed` Prop
 
 The `hasVisitedStyleAllowed` property was added. This property allows the link to have visited state style. There is also a change in the use of the visited state style for the `Heading` component, which had previously this state set by default.
 Now a prop `hasVisitedStyleAllowed` has to be added to enable the visited state.
@@ -88,26 +131,42 @@ npx @lmc-eu/spirit-codemods -p <path> -t v3/web-react/link-hasVisitedStyleAllowe
 - `<Link … />` → `<Link hasVisitedStyleAllowed … />`
 </details>
 
-### Link `isUnderlined`
+### Pill: Update Color Palette
 
-The `isUnderlined` property was removed, please use `underlined` instead.
+The `color` prop of the `Pill` component no longer supports `primary`, `secondary`, `tertiary`, `inverted`
+and `unselected` variants. Instead, the `neutral` variant was added. The current list of variants is:
+
+- `neutral`
+- `danger`
+- `informative`
+- `success`
+- `warning`
+
+### ProductLogo: Removed `inverted` Variant
+
+The `inverted` variant was removed from the `ProductLogo` component.
+
+### Toast: Renamed Color Variant `inverted` to `neutral` in `ToastBar`
+
+The `ToastBar` `color` prop variant `inverted` was renamed to `neutral`.
 
 #### Migration Guide
 
 🪄 Use codemods to automatically update your codebase:
 
 ```sh
-npx @lmc-eu/spirit-codemods -p <path> -t v3/web-react/link-underlined-prop
+npx @lmc-eu/spirit-codemods -p <path> -t v3/web-react/toastbar-inverted-neutral
 ```
 
 👉 See [Codemods documentation][readme-codemods] for more details.
 
 <details>
   <summary>🔧 Manual Migration Steps</summary>
 
-Manually replace the props in your project.
+Manually replace the `ToastBar` prop color in your project.
+Instead of using `inverted`, use `neutral`.
 
-- `<Link isUnderlined … />` → `<Link underlined="always" … />`
+- `<ToastBar color="inverted" … />` → `<ToastBar color="neutral" … />`
 </details>
 
 ---

packages/codemods/README.md

@@ -42,5 +42,6 @@ npx @lmc-eu/spirit-codemods -p ./src -t v2/web-react/fileuploader-prop-names -e
 ## Available Scripts
 
 - [Web-React v2 Codemods](https://github.com/lmc-eu/spirit-design-system/blob/main/packages/codemods/src/transforms/v2/web-react/README.md)
+- [Web-React v3 Codemods](https://github.com/lmc-eu/spirit-design-system/blob/main/packages/codemods/src/transforms/v3/web-react/README.md)
 
 [jscodeshift]: https://github.com/facebook/jscodeshift

packages/codemods/src/transforms/v3/web-react/README.md

@@ -87,3 +87,19 @@ npx @lmc-eu/spirit-codemods -p <path> -t v3/web-react/link-hasVisitedStyleAllowe
 - <Heading><Link … /></Heading>
 + <Heading><Link hasVisitedStyleAllowed … /></Heading>
 ```
+
+### `v3/web-react/toastbar-inverted-neutral` — Replace `inverted` with `neutral` in ToastBar component `color` prop
+
+The `inverted` variant was removed from the `ToastBar` component.
+This codemod updates the `ToastBar` component by replacing the `inverted` value with `neutral` in the `color` prop.
+
+```sh
+npx @lmc-eu/spirit-codemods -p <path> -t v3/web-react/toastbar-inverted-neutral
+```
+
+#### Example
+
+```diff
+- <ToastBar color="inverted" … />
++ <ToastBar color="neutral" … />
+```

packages/codemods/src/transforms/v3/web-react/__testfixtures__/toastbar-inverted-neutral.input.tsx

@@ -0,0 +1,10 @@
+// @ts-ignore: No declaration -- The library is not installed; we don't need to install it for fixtures.
+import { ToastBar } from '@lmc-eu/spirit-web-react';
+
+export const MyComponent = () => (
+  <>
+    <ToastBar color="inverted" />
+    <ToastBar color="success" />
+    <ToastBar />
+  </>
+);

packages/codemods/src/transforms/v3/web-react/__testfixtures__/toastbar-inverted-neutral.output.tsx

@@ -0,0 +1,10 @@
+// @ts-ignore: No declaration -- The library is not installed; we don't need to install it for fixtures.
+import { ToastBar } from '@lmc-eu/spirit-web-react';
+
+export const MyComponent = () => (
+  <>
+    <ToastBar color="neutral" />
+    <ToastBar color="success" />
+    <ToastBar />
+  </>
+);

packages/codemods/src/transforms/v3/web-react/__tests__/toastbar-inverted-neutral.test.ts

@@ -0,0 +1,3 @@
+import { testTransform } from '../../../../../tests/testUtils';
+
+testTransform(__dirname, 'toastbar-inverted-neutral');

packages/codemods/src/transforms/v3/web-react/toastbar-inverted-neutral.ts

@@ -0,0 +1,52 @@
+import { API, FileInfo } from 'jscodeshift';
+
+const transform = (fileInfo: FileInfo, api: API) => {
+  const j = api.jscodeshift;
+  const root = j(fileInfo.source);
+
+  // Find import statements for the specific module and ToastBar specifier
+  const importStatements = root.find(j.ImportDeclaration, {
+    source: {
+      value: (value: string) => /^@lmc-eu\/spirit-web-react(\/.*)?$/.test(value),
+    },
+  });
+
+  // Check if the module is imported
+  if (importStatements.length > 0) {
+    const componentSpecifier = importStatements.find(j.ImportSpecifier, {
+      imported: {
+        type: 'Identifier',
+        name: 'ToastBar',
+      },
+    });
+
+    // Check if ToastBar specifier is present
+    if (componentSpecifier.length > 0) {
+      // Find ToastBar components in the module
+      const components = root.find(j.JSXOpeningElement, {
+        name: {
+          type: 'JSXIdentifier',
+          name: 'ToastBar',
+        },
+      });
+
+      // If color set to `inverted`, change it to `neutral`
+      components
+        .find(j.JSXAttribute, {
+          name: {
+            type: 'JSXIdentifier',
+            name: 'color',
+          },
+        })
+        .forEach((attributePath) => {
+          if (attributePath.node.value?.type === 'StringLiteral' && attributePath.node.value.value === 'inverted') {
+            attributePath.node.value.value = 'neutral';
+          }
+        });
+    }
+  }
+
+  return root.toSource();
+};
+
+export default transform;