fixup! fixup! fixup! Feat(web-twig): Introduce new prop underline to …

…Link component
lmc-eu · Aug 6, 2024 · f6b8bf2 · f6b8bf2
1 parent 707bbec
commit f6b8bf2
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 17 deletions.
diff --git a/packages/web-twig/src/Resources/components/Link/Link.twig b/packages/web-twig/src/Resources/components/Link/Link.twig
@@ -4,7 +4,7 @@
 {%- set _href = props.href -%}
 {%- set _isDisabled = props.isDisabled | default(false) -%}
 {%- set _isUnderlined = props.isUnderlined | default(false) -%}
-{%- set _underline = props.underline | default(null) -%}
+{%- set _underline = props.underline | default('hover') -%}
 
 {# Variables #}
 {%- set rootUnderlineClassName = '' %}

diff --git a/packages/web-twig/src/Resources/components/Link/README.md b/packages/web-twig/src/Resources/components/Link/README.md
@@ -1,4 +1,4 @@
-# Text
+# Link
 
 This is Twig implementation of the [Link][link] component.
 
@@ -14,7 +14,7 @@ Advanced example usage:
 <Link
     href="#"
     color="primary"
-    isUnderlined
+    underline="always"
 >
     Primary Underlined Link
 </Link>
@@ -33,22 +33,51 @@ Without lexer:
 {% endembed %}
 ```
 
+## Underline
+
+You can customize the underline behavior for links with three different settings:
+
+### Hover
+
+This is the **default** value, which makes the underline visible only when the component is hovered over.
+
+```html
+<Link href="/" underline="hover">…</Link>
+```
+
+Alternatively, you can omit this prop:
+
+```html
+<Link href="/">…</Link>
+```
+
+### Always
+
+The underline is constantly visible, regardless of interaction.
+
+```html
+<Link href="/" underline="always">…</Link>
+```
+
+### Never
+
+The underline is never visible, even when the link is hovered over.
+
+```html
+<Link href="/" underline="never">…</Link>
+```
+
 ## 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 |
-| `underline`    | `always`                                         | `never`   | —        | ✕                                                                                          | Whether is the link underlined\* |
-| `target`       | `string`                                         | `null`    | ✕        | Browsing context for the link                                                              |
-| `title`        | `string`                                         | `null`    | ✕        | Optional title to display on hover                                                         |
-
-\*Underline options:
-**default**: The underline is visible only when the component is hovered over.
-**always**: The underline is always visible.
-**never**: The underline is never visible.
+| 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 |
+| `underline`    | `hover` /                                        | `always` / | `never`  | `hover`                                                                                    | ✕   | Whether is the link underlined |
+| `target`       | `string`                                         | `null`     | ✕        | Browsing context for the link                                                              |
+| `title`        | `string`                                         | `null`     | ✕        | Optional title to display on hover                                                         |
 
 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]