diff --git a/docs/migrations/web-react/MIGRATION-v3.md b/docs/migrations/web-react/MIGRATION-v3.md index 8d4460992c..a81ebe7bb5 100644 --- a/docs/migrations/web-react/MIGRATION-v3.md +++ b/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. - `` → `` -### 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. - `` → `` -### 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 -t v3/web-react/link-underlined-prop +``` + +👉 See [Codemods documentation][readme-codemods] for more details. + +
+ 🔧 Manual Migration Steps + +Manually replace the props in your project. + +- `` → `` +
+ +### 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,16 +131,31 @@ npx @lmc-eu/spirit-codemods -p -t v3/web-react/link-hasVisitedStyleAllowe - `` → `` -### 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 -t v3/web-react/link-underlined-prop +npx @lmc-eu/spirit-codemods -p -t v3/web-react/toastbar-inverted-neutral ``` 👉 See [Codemods documentation][readme-codemods] for more details. @@ -105,9 +163,10 @@ npx @lmc-eu/spirit-codemods -p -t v3/web-react/link-underlined-prop
🔧 Manual Migration Steps -Manually replace the props in your project. +Manually replace the `ToastBar` prop color in your project. +Instead of using `inverted`, use `neutral`. -- `` → `` +- `` → ``
--- diff --git a/packages/codemods/README.md b/packages/codemods/README.md index a010d32efb..cb6dc1da8f 100644 --- a/packages/codemods/README.md +++ b/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 diff --git a/packages/codemods/src/transforms/v3/web-react/README.md b/packages/codemods/src/transforms/v3/web-react/README.md index fb7428d168..afcbdccec6 100644 --- a/packages/codemods/src/transforms/v3/web-react/README.md +++ b/packages/codemods/src/transforms/v3/web-react/README.md @@ -87,3 +87,19 @@ npx @lmc-eu/spirit-codemods -p -t v3/web-react/link-hasVisitedStyleAllowe - + ``` + +### `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 -t v3/web-react/toastbar-inverted-neutral +``` + +#### Example + +```diff +- ++ +``` diff --git a/packages/codemods/src/transforms/v3/web-react/__testfixtures__/toastbar-inverted-neutral.input.tsx b/packages/codemods/src/transforms/v3/web-react/__testfixtures__/toastbar-inverted-neutral.input.tsx new file mode 100644 index 0000000000..5e4249ea01 --- /dev/null +++ b/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 = () => ( + <> + + + + +); diff --git a/packages/codemods/src/transforms/v3/web-react/__testfixtures__/toastbar-inverted-neutral.output.tsx b/packages/codemods/src/transforms/v3/web-react/__testfixtures__/toastbar-inverted-neutral.output.tsx new file mode 100644 index 0000000000..fefa506eb0 --- /dev/null +++ b/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 = () => ( + <> + + + + +); diff --git a/packages/codemods/src/transforms/v3/web-react/__tests__/toastbar-inverted-neutral.test.ts b/packages/codemods/src/transforms/v3/web-react/__tests__/toastbar-inverted-neutral.test.ts new file mode 100644 index 0000000000..f9efbd782e --- /dev/null +++ b/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'); diff --git a/packages/codemods/src/transforms/v3/web-react/toastbar-inverted-neutral.ts b/packages/codemods/src/transforms/v3/web-react/toastbar-inverted-neutral.ts new file mode 100644 index 0000000000..24a6e23c7e --- /dev/null +++ b/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;