BC(web-react, web-twig): Remove isUnderlined from Link #DS-1509

apps/web-twig-demo/templates/partials/cover.html.twig

@@ -15,16 +15,16 @@
     <Breadcrumbs>
       <ol>
         <li class="d-flex">
-          <Link href="http://localhost:3456" color="primary" isUnderlined>Spirit</Link>
+          <Link href="http://localhost:3456" color="primary" underlined="always">Spirit</Link>
           <Icon name="chevron-right" />
         </li>
         <li class="d-flex">
-          <Link href="/" color="primary" isUnderlined>Web Twig</Link>
+          <Link href="/" color="primary" underlined="always">Web Twig</Link>
           <Icon name="chevron-right" />
         </li>
         {% if parentPageName %}
           <li class="d-flex">
-            <Link href="{{ parentPageUrl }}" color="primary" isUnderlined>{{ parentPageName }}</Link>
+            <Link href="{{ parentPageUrl }}" color="primary" underlined="always">{{ parentPageName }}</Link>
             <Icon name="chevron-right" />
           </li>
         {% endif %}

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

@@ -64,6 +64,28 @@ Manually replace the props in your project.
 - `<Heading … />` → `<Heading elementType="{/* Your semantic HTML element here */}" … />`
 </details>
 
+### Link `isUnderlined`
+
+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>
+
 ---
 
 Please refer back to these instructions or reach out to our team if you encounter any issues during migration.

packages/web-react/DEPRECATIONS.md

@@ -6,19 +6,8 @@ This document lists all deprecations that will be removed in the next major vers
 
 ## Deprecations
 
-👉 [What are deprecations?][readme-deprecations]
-
-### Link `isUnderlined`
-
-`isUnderlined` property will be replaced in the next major version. Please use `underlined` instead.
+Nothing here right now! 🎉
 
-#### Migration Guide
-
-We are providing a [codemod](https://github.com/lmc-eu/spirit-design-system/blob/main/packages/codemods/src/transforms/v3/web-react/README.md#v3web-reactlink-underlined-prop--link-isunderlined-to-udnerlined-prop-change) to assist with this change.
-
-```diff
-- <Link isUnderlined … />
-+ <Link underlined="always" … />
-```
+👉 [What are deprecations?][readme-deprecations]
 
 [readme-deprecations]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-react/README.md#deprecations

packages/web-react/src/components/Breadcrumbs/BreadcrumbsItem.tsx

@@ -30,7 +30,7 @@ export const BreadcrumbsItem = (props: SpiritBreadcrumbsItemProps) => {
         <Link
           href={href}
           color={isCurrent ? 'secondary' : 'primary'}
-          isUnderlined={!isCurrent}
+          underlined={isCurrent ? 'hover' : 'always'}
           aria-current={isCurrent ? 'page' : undefined}
         >
           {children}

packages/web-react/src/components/Breadcrumbs/README.md

@@ -45,7 +45,7 @@ Use custom content for the ordered list as component's children instead of passi
 <Breadcrumbs>
   {items.map((item) => (
     <li key={`BreadcrumbsItem_${item.title}`}>
-      <Link color="primary" isUnderlined>
+      <Link color="primary" underlined="always">
         {item.title}
       </Link>
     </li>

packages/web-react/src/components/Breadcrumbs/demo/BreadcrumbsCustom.tsx

@@ -29,7 +29,7 @@ const BreadcrumbsCustom = () => {
         const isLastItem = index === items.length - 1;
 
         const linkParams = {
-          isUnderlined: !isLastItem,
+          underlined: isLastItem ? 'hover' : 'always',
           'aria-current': isLastItem ? 'page' : undefined,
           color: isLastItem ? 'secondary' : 'primary',
         };
@@ -39,7 +39,7 @@ const BreadcrumbsCustom = () => {
             {index === items.length - 2 && (
               <li className="d-tablet-none">
                 <Icon name="chevron-left" />
-                <Link href={item.url} color="primary" isUnderlined>
+                <Link href={item.url} color="primary" underlined="always">
                   Back
                 </Link>
               </li>

packages/web-react/src/components/Link/Link.tsx

@@ -2,7 +2,7 @@
 
 import classNames from 'classnames';
 import React, { ElementType, forwardRef } from 'react';
-import { useDeprecationMessage, useStyleProps } from '../../hooks';
+import { useStyleProps } from '../../hooks';
 import { PolymorphicRef, SpiritLinkProps } from '../../types';
 import { useLinkStyleProps } from './useLinkStyleProps';
 
@@ -22,23 +22,11 @@ const _Link = <E extends ElementType = 'a', T = void>(
   const {
     elementType: ElementTag = defaultProps.elementType as ElementType,
     children,
-    /** @deprecated "isUnderlined" property will be replaced in the next major version. Please use "underlined" instead. */
-    isUnderlined,
     ...restProps
   } = propsWithDefaults;
-  const { classProps, props: modifiedProps } = useLinkStyleProps({ isUnderlined, ...restProps });
+  const { classProps, props: modifiedProps } = useLinkStyleProps(restProps);
   const { styleProps, props: otherProps } = useStyleProps(modifiedProps);
 
-  useDeprecationMessage({
-    method: 'property',
-    trigger: !!isUnderlined,
-    componentName: 'Link',
-    propertyProps: {
-      deprecatedName: 'isUnderlined',
-      newName: 'underlined',
-    },
-  });
-
   return (
     <ElementTag
       {...otherProps}

packages/web-react/src/components/Link/README.md

@@ -48,28 +48,19 @@ The underline is never visible, even when the link is hovered over.
 
 ## API
 
-| Name           | Type                                             | Default   | Required | Description                                                                          |
-| -------------- | ------------------------------------------------ | --------- | -------- | ------------------------------------------------------------------------------------ |
-| `color`        | [Action Link Color dictionary][dictionary-color] | `primary` | ✕        | Color of the link                                                                    |
-| `elementType`  | `ElementType`                                    | `a`       | ✕        | Type of element used as                                                              |
-| `href`         | `string`                                         | —         | ✕        | Link's href attribute                                                                |
-| `isDisabled`   | `bool`                                           | `false`   | ✕        | Whether is the link disabled                                                         |
-| `isUnderlined` | `bool`                                           | `false`   | ✕        | [**DEPRECATED**][deprecated] in favor of `underline`; Whether is the link underlined |
-| `ref`          | `ForwardedRef<HTMLAnchorElement>`                | —         | ✕        | Link element reference                                                               |
-| `underlined`   | `hover` \| `always` \| `never`                   | `hover`   | ✕        | When is the link underlined                                                          |
+| Name          | Type                                             | Default   | Required | Description                  |
+| ------------- | ------------------------------------------------ | --------- | -------- | ---------------------------- |
+| `color`       | [Action Link Color dictionary][dictionary-color] | `primary` | ✕        | Color of the link            |
+| `elementType` | `ElementType`                                    | `a`       | ✕        | Type of element used as      |
+| `href`        | `string`                                         | —         | ✕        | Link's href attribute        |
+| `isDisabled`  | `bool`                                           | `false`   | ✕        | Whether is the link disabled |
+| `ref`         | `ForwardedRef<HTMLAnchorElement>`                | —         | ✕        | Link element reference       |
+| `underlined`  | `hover` \| `always` \| `never`                   | `hover`   | ✕        | When is the link underlined  |
 
 On top of the API options, the components accept [additional attributes][readme-additional-attributes].
 If you need more control over the styling of a component, you can use [style props][readme-style-props]
 and [escape hatches][readme-escape-hatches].
 
-#### ⚠️ DEPRECATION NOTICE
-
-`isUnderlined` property will be replaced in the next major version. Please use `underlined` instead.
-
-We are providing a [codemod](https://github.com/lmc-eu/spirit-design-system/blob/main/packages/codemods/src/transforms/v3/web-react/README.md#v3web-reactlink-underlined-prop--link-isunderlined-to-udnerlined-prop-change) to assist with this change.
-
-[What are deprecations?][deprecated]
-
 ## Custom component
 
 Link classes are fabricated using `useLinkStyleProps` hook. You can use it to create your own custom Link component.
@@ -111,7 +102,6 @@ const CustomLinkRoot = <T extends ElementType = 'button'>(
 export const CustomLink = forwardRef(CustomLinkRoot);
 ```
 
-[deprecated]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/web-react/README.md#deprecations
 [dictionary-color]: https://github.com/lmc-eu/spirit-design-system/tree/main/docs/DICTIONARIES.md#color
 [readme-additional-attributes]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-react/README.md#additional-attributes
 [readme-escape-hatches]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-react/README.md#escape-hatches

packages/web-react/src/components/Link/__tests__/Link.test.tsx

@@ -18,31 +18,19 @@ describe('Link', () => {
 
   restPropsTest(Link, 'a');
 
-  it.each(linkPropsDataProvider)('should have class', (color, isUnderlined, isDisabled, expectedClassName) => {
+  it.each(linkPropsDataProvider)('should have class', (color, underlined, isDisabled, expectedClassName) => {
     render(
       <Link
         href="/"
         color={color as ActionLinkColorsDictionaryType<string>}
-        isUnderlined={isUnderlined as boolean}
-        isDisabled={isDisabled as boolean}
+        underlined={underlined}
+        isDisabled={isDisabled}
       />,
     );
 
     expect(screen.getByRole('link')).toHaveClass(expectedClassName as string);
   });
 
-  it('should have class link-underlined', () => {
-    render(<Link href="/" underlined="always" />);
-
-    expect(screen.getByRole('link')).toHaveClass('link-underlined');
-  });
-
-  it('should have class link-not-underlined', () => {
-    render(<Link href="/" underlined="never" />);
-
-    expect(screen.getByRole('link')).toHaveClass('link-not-underlined');
-  });
-
   it('should have correct href', () => {
     render(<Link href="/test" />);
 

packages/web-react/src/components/Link/__tests__/linkPropsDataProvider.ts

@@ -1,14 +1,17 @@
 const linkPropsDataProvider = [
-  // color, isUnderlined, isDisabled, expectedClassName
-  ['primary', false, false, 'link-primary'],
-  ['secondary', false, false, 'link-secondary'],
-  ['tertiary', false, false, 'link-tertiary'],
-  ['primary', true, false, 'link-primary link-underlined'],
-  ['secondary', true, false, 'link-secondary link-underlined'],
-  ['tertiary', true, false, 'link-tertiary link-underlined'],
-  ['primary', true, true, 'link-primary link-disabled link-underlined'],
-  ['secondary', true, true, 'link-secondary link-disabled link-underlined'],
-  ['tertiary', true, true, 'link-tertiary link-disabled link-underlined'],
+  // color, underlined, isDisabled, expectedClassName
+  ['primary', undefined, false, 'link-primary'],
+  ['secondary', undefined, false, 'link-secondary'],
+  ['tertiary', undefined, false, 'link-tertiary'],
+  ['primary', 'hover', false, 'link-primary'],
+  ['secondary', 'hover', false, 'link-secondary'],
+  ['tertiary', 'hover', false, 'link-tertiary'],
+  ['primary', 'hover', true, 'link-primary link-disabled'],
+  ['secondary', 'hover', true, 'link-secondary link-disabled'],
+  ['tertiary', 'hover', true, 'link-tertiary link-disabled'],
+  ['primary', 'hover', false, 'link-primary'],
+  ['primary', 'never', false, 'link-primary link-not-underlined'],
+  ['primary', 'always', false, 'link-primary link-underlined'],
 ];
 
 export default linkPropsDataProvider;

packages/web-react/src/components/Link/__tests__/useLinkStyleProps.test.ts

@@ -4,8 +4,8 @@ import { useLinkStyleProps } from '../useLinkStyleProps';
 import linkPropsDataProvider from './linkPropsDataProvider';
 
 describe('useLinkStyleProps', () => {
-  it.each(linkPropsDataProvider)('should return classname', (color, isUnderlined, isDisabled, expectedClassName) => {
-    const props = { color, isUnderlined, isDisabled } as SpiritLinkProps;
+  it.each(linkPropsDataProvider)('should return classname', (color, underlined, isDisabled, expectedClassName) => {
+    const props = { color, underlined, isDisabled } as SpiritLinkProps;
     const { result } = renderHook(() => useLinkStyleProps(props));
 
     expect(result.current.classProps).toBe(expectedClassName);

packages/web-react/src/components/Link/stories/Link.stories.tsx

@@ -37,13 +37,6 @@ const meta: Meta<typeof Link> = {
         defaultValue: { summary: 'false' },
       },
     },
-    isUnderlined: {
-      control: 'boolean',
-      description: '⚠️ **Deprecated**. Please use `underlined` instead. \n\n',
-      table: {
-        defaultValue: { summary: 'false' },
-      },
-    },
     target: {
       control: 'select',
       options: ['_blank', '_self', '_parent', '_top', undefined],
@@ -65,7 +58,6 @@ const meta: Meta<typeof Link> = {
     elementType: 'a',
     href: 'https://www.example.com',
     isDisabled: false,
-    isUnderlined: false,
     target: '_blank',
     underlined: undefined,
   },

packages/web-react/src/components/Link/useLinkStyleProps.ts

@@ -11,7 +11,7 @@ export interface LinkStyles<E extends ElementType = 'p'> {
 }
 
 export function useLinkStyleProps<E extends ElementType = 'a', T = void>(props: SpiritLinkProps<E, T>): LinkStyles<E> {
-  const { color, isDisabled, isUnderlined, underlined, ...restProps } = props;
+  const { color, isDisabled, underlined, ...restProps } = props;
 
   const linkClass = useClassNamePrefix('link');
   const linkColorClass = `${linkClass}-${color}`;
@@ -21,7 +21,7 @@ export function useLinkStyleProps<E extends ElementType = 'a', T = void>(props:
 
   const className = classNames(linkColorClass, {
     [linkDisabledClass]: isDisabled,
-    [linkUnderlinedClass]: isUnderlined || underlined === UNDERLINED_OPTIONS.ALWAYS,
+    [linkUnderlinedClass]: underlined === UNDERLINED_OPTIONS.ALWAYS,
     [linkNotUnderlinedClass]: underlined === UNDERLINED_OPTIONS.NEVER,
   });
 

packages/web-react/src/types/link.ts

@@ -24,9 +24,6 @@ export interface LinkBaseProps<C = void> extends ChildrenProps, StyleProps, Tran
   target?: LinkTarget;
   /** Color of the Link */
   color?: ActionLinkColorsDictionaryType<C>;
-  /** Whether is the Link underlined */
-  /** @deprecated "isUnderlined" property will be replaced in the next major version. Please use "underlined" instead. */
-  isUnderlined?: boolean;
   /** When is the Link underlined */
   underlined?: UnderlineOptions;
   /** Whether is the Link disabled */

packages/web-twig/src/Resources/components/Breadcrumbs/BreadcrumbsItem.twig

@@ -30,7 +30,7 @@
         <Link
             href={ _href }
             color="{{ _isCurrent ? 'secondary' : 'primary' }}"
-            isUnderlined="{{ _isCurrent is not same as(true) }}"
+            underlined="{{ _isCurrent ? 'hover' : 'always' }}"
             aria-current="{{ _isCurrent ? 'page' : 'false' }}"
         >
             {{ _children }}

packages/web-twig/src/Resources/components/Breadcrumbs/README.md

@@ -44,16 +44,16 @@ Example of custom usage:
 <Breadcrumbs>
   <ol>
     <li class="d-none d-tablet-flex">
-      <Link href="#rootUrl" color="primary" isUnderlined>Root</Link>
+      <Link href="#rootUrl" color="primary" underlined="always">Root</Link>
     </li>
     <li class="d-none d-tablet-flex">
-      <Link href="#categoryUrl" color="primary" isUnderlined>Category</Link>
+      <Link href="#categoryUrl" color="primary" underlined="always">Category</Link>
     </li>
     <li class="d-tablet-none">
-      <Link href="#subcategoryUrl" color="primary" isUnderlined>Custom go back link</Link>
+      <Link href="#subcategoryUrl" color="primary" underlined="always">Custom go back link</Link>
     </li>
     <li class="d-none d-tablet-flex">
-      <Link href="#subcategoryUrl" color="primary" isUnderlined>Subcategory</Link>
+      <Link href="#subcategoryUrl" color="primary" underlined="always">Subcategory</Link>
     </li>
     <li class="d-none d-tablet-flex">
       <Link href="#currentUrl" color="secondary" aria-current="page">Current page</Link>
@@ -70,16 +70,16 @@ Without lexer:
 }} %}
     {% block content %}
       <li class="d-none d-tablet-flex">
-        <Link href="#rootUrl" color="primary" isUnderlined>Root</Link>
+        <Link href="#rootUrl" color="primary" underlined="always">Root</Link>
       </li>
       <li class="d-none d-tablet-flex">
-        <Link href="#categoryUrl" color="primary" isUnderlined>Category</Link>
+        <Link href="#categoryUrl" color="primary" underlined="always">Category</Link>
       </li>
       <li class="d-tablet-none">
-        <Link href="#subcategoryUrl" color="primary" isUnderlined>Custom go back link</Link>
+        <Link href="#subcategoryUrl" color="primary" underlined="always">Custom go back link</Link>
       </li>
       <li class="d-none d-tablet-flex">
-        <Link href="#subcategoryUrl" color="primary" isUnderlined>Subcategory</Link>
+        <Link href="#subcategoryUrl" color="primary" underlined="always">Subcategory</Link>
       </li>
       <li class="d-none d-tablet-flex">
         <Link href="#currentUrl" color="secondary" aria-current="page">Current page</Link>

packages/web-twig/src/Resources/components/Breadcrumbs/__tests__/__fixtures__/breadcrumbsCustom.twig

@@ -23,14 +23,14 @@
             {% for item in customItems %}
                 {% if loop.index is same as(customItems|length - 1) %}
                     <li class="d-tablet-none">
-                        <Link href="{{ item.url }}" color="primary" isUnderlined>{{ _goBackTitle }}</Link>
+                        <Link href="{{ item.url }}" color="primary" underlined="always">{{ _goBackTitle }}</Link>
                     </li>
                 {% endif %}
                 <li class="d-none d-tablet-flex">
                     <Link
                         href="{{ item.url }}"
                         color="{{ loop.last ? 'secondary' : 'primary' }}"
-                        isUnderlined="{{ loop.last is not same as(true) }}"
+                        underlined="{{ loop.last ? 'hover' : 'always' }}"
                         aria-current="{{ loop.last ? 'page' : 'false' }}"
                     >{{ item.title }}</Link>
                 </li>