diff --git a/packages/web-twig/src/Resources/components/Link/Link.twig b/packages/web-twig/src/Resources/components/Link/Link.twig index 13ba8ce7d4..9ded50f9ad 100644 --- 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 index 3defce93cb..5b961631ae 100644 --- 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: Primary Underlined 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 +… +``` + +Alternatively, you can omit this prop: + +```html +… +``` + +### Always + +The underline is constantly visible, regardless of interaction. + +```html +… +``` + +### Never + +The underline is never visible, even when the link is hovered over. + +```html +… +``` + ## 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]