BREAKING-CHANGE(web-twig): Remove isUnderlined prop from Link component

- removing deprecation - solving #DS-1509
lmc-eu · Oct 14, 2024 · b52deb6 · b52deb6
1 parent fa00d88
commit b52deb6
Show file tree

Hide file tree

Showing 8 changed files with 29 additions and 44 deletions.
diff --git a/apps/web-twig-demo/templates/partials/cover.html.twig b/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 %}

diff --git a/packages/web-twig/src/Resources/components/Breadcrumbs/BreadcrumbsItem.twig b/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 }}

diff --git a/packages/web-twig/src/Resources/components/Breadcrumbs/README.md b/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>

diff --git a/...b-twig/src/Resources/components/Breadcrumbs/__tests__/__fixtures__/breadcrumbsCustom.twig b/...b-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>

diff --git a/packages/web-twig/src/Resources/components/Breadcrumbs/stories/BreadcrumbsCustom.twig b/packages/web-twig/src/Resources/components/Breadcrumbs/stories/BreadcrumbsCustom.twig
@@ -1,19 +1,19 @@
 <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">
             <Icon name="chevron-right" />
-            <Link href="#categoryUrl" color="primary" isUnderlined>Category</Link>
+            <Link href="#categoryUrl" color="primary" underlined="always">Category</Link>
         </li>
         <li class="d-tablet-none">
             <Icon name="chevron-left" />
-            <Link href="#subcategoryUrl" color="primary" isUnderlined>Back</Link>
+            <Link href="#subcategoryUrl" color="primary" underlined="always">Back</Link>
         </li>
         <li class="d-none d-tablet-flex">
             <Icon name="chevron-right" />
-            <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">
             <Icon name="chevron-right" />

diff --git a/packages/web-twig/src/Resources/components/Link/Link.twig b/packages/web-twig/src/Resources/components/Link/Link.twig
@@ -3,7 +3,6 @@
 {%- set _color = props.color | default('primary') -%}
 {%- set _href = props.href -%}
 {%- set _isDisabled = props.isDisabled | default(false) -%}
-{%- set _isUnderlined = props.isUnderlined | default(false) -%}
 {%- set _underlined = props.underlined | default('hover') -%}
 
 {# Variables #}
@@ -12,22 +11,16 @@
 {# Class names #}
 {%- set _colorClassName = _spiritClassPrefix ~ 'link-' ~ _color -%}
 {%- set _rootDisabledClassName = _isDisabled ? _spiritClassPrefix ~ 'link-disabled' : null -%}
-{%- if _isUnderlined or _underlined is same as('always') %}
+{%- if _underlined is same as('always') %}
     {%- set rootUnderlinedClassName = _spiritClassPrefix ~ 'link-underlined' -%}
 {% elseif _underlined is same as('never') %}
     {%- set rootUnderlinedClassName = _spiritClassPrefix ~ 'link-not-underlined' -%}
 {% endif %}
 
-
 {# Miscellaneous #}
 {%- set _styleProps = useStyleProps(props) -%}
 {%- set _classNames = [ _colorClassName, _rootDisabledClassName, rootUnderlinedClassName, _styleProps.className ] -%}
 {%- set _allowedAttributes = [ 'target', 'title' ] -%}
-
-{% if _isUnderlined is defined %}
-    {% deprecated '"isUnderlined" property will be replaced in the next major version. Please use "underline" instead.' %}
-{% endif %}
-
 <a
     {{ mainProps(props, _allowedAttributes) }}
     href="{{ _href }}"

diff --git a/packages/web-twig/src/Resources/components/Link/README.md b/packages/web-twig/src/Resources/components/Link/README.md
@@ -69,29 +69,21 @@ 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 variant                                                                              |
-| `href`         | `string`                                         | —         | ✓        | Link URL                                                                                   |
-| `isDisabled`   | `bool`                                           | `false`   | ✕        | If true, Link is disabled                                                                  |
-| `isUnderlined` | `bool`                                           | `false`   | ✕        | [**DEPRECATED**][readme-deprecations] in favor of `underline`; If true, Link is underlined |
-| `target`       | `string`                                         | `null`    | ✕        | Browsing context for the link                                                              |
-| `title`        | `string`                                         | `null`    | ✕        | Optional title to display on hover                                                         |
-| `underlined`   | `hover` \| `always` \| `never`                   | `hover`   | ✕        | When is the link underlined                                                                |
+| Name         | Type                                             | Default   | Required | Description                        |
+| ------------ | ------------------------------------------------ | --------- | -------- | ---------------------------------- |
+| `color`      | [Action Link Color dictionary][dictionary-color] | `primary` | ✕        | Color variant                      |
+| `href`       | `string`                                         | —         | ✓        | Link URL                           |
+| `isDisabled` | `bool`                                           | `false`   | ✕        | If true, Link is disabled          |
+| `target`     | `string`                                         | `null`    | ✕        | Browsing context for the link      |
+| `title`      | `string`                                         | `null`    | ✕        | Optional title to display on hover |
+| `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.
-
-[What are deprecations?][readme-deprecations]
-
 [dictionary-color]: https://github.com/lmc-eu/spirit-design-system/tree/main/docs/DICTIONARIES.md#color
 [link]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/web-react/src/components/Link
 [readme-additional-attributes]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-twig/README.md#additional-attributes
-[readme-deprecations]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/web-twig/README.md#deprecations
 [readme-escape-hatches]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-twig/README.md#escape-hatches
 [readme-style-props]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-twig/README.md#style-props
diff --git a/packages/web-twig/src/Resources/components/Link/__tests__/__fixtures__/linkDefault.twig b/packages/web-twig/src/Resources/components/Link/__tests__/__fixtures__/linkDefault.twig
@@ -1,7 +1,7 @@
 <Link>Example link</Link>
 
 <!-- Render as an underlined secondary link -->
-<Link href="/" color="secondary" isUnderlined>
+<Link href="/" color="secondary" underlined="always">
     Example link
 </Link>
 
@@ -16,7 +16,7 @@
     UNSAFE_className="my-custom-class"
     href="https://spirit.design"
     isDisabled
-    isUnderlined
+    underlined="always"
     onclick="console.log('Hello!');"
     target="_blank"
     title="test title"