fixup! fixup! Feat(web-react): Introduce new prop underline to Link c…

…omponent
lmc-eu · Aug 7, 2024 · ac61664 · ac61664
1 parent f6b8bf2
commit ac61664
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 5 deletions.
diff --git a/packages/web-react/src/components/Link/README.md b/packages/web-react/src/components/Link/README.md
@@ -55,8 +55,8 @@ The underline is never visible, even when the link is hovered over.
 | `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 |
-| `underline`    | `hover` \| `always` \| `never`                   | `hover`   | ✕        | Whether is the link underlined                                                       |
 | `ref`          | `ForwardedRef<HTMLAnchorElement>`                | —         | ✕        | Link element reference                                                               |
+| `underline`    | `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]

diff --git a/packages/web-react/src/components/Link/useLinkStyleProps.ts b/packages/web-react/src/components/Link/useLinkStyleProps.ts
@@ -1,7 +1,7 @@
 import classNames from 'classnames';
 import { ElementType } from 'react';
 import { useClassNamePrefix } from '../../hooks';
-import { SpiritLinkProps, LinkProps } from '../../types';
+import { SpiritLinkProps, LinkProps, UNDERLINE_OPTIONS } from '../../types';
 
 export interface LinkStyles<E extends ElementType = 'p'> {
   /** className props */
@@ -21,8 +21,8 @@ export function useLinkStyleProps<E extends ElementType = 'a', T = void>(props:
 
   const className = classNames(linkColorClass, {
     [linkDisabledClass]: isDisabled,
-    [linkUnderlinedClass]: isUnderlined || underline === 'always',
-    [linkNotUnderlinedClass]: underline === 'never',
+    [linkUnderlinedClass]: isUnderlined || underline === UNDERLINE_OPTIONS.ALWAYS,
+    [linkNotUnderlinedClass]: underline === UNDERLINE_OPTIONS.NEVER,
   });
 
   return {

diff --git a/packages/web-react/src/types/link.ts b/packages/web-react/src/types/link.ts
@@ -7,9 +7,15 @@ import {
   TransferProps,
 } from './shared';
 
+export const UNDERLINE_OPTIONS = {
+  ALWAYS: 'always',
+  HOVER: 'hover',
+  NEVER: 'never',
+} as const;
+
 export type LinkTarget = '_blank' | '_self' | '_parent' | '_top';
 
-export type UnderlinedOptions = 'always' | 'never' | 'hover';
+export type UnderlinedOptions = (typeof UNDERLINE_OPTIONS)[keyof typeof UNDERLINE_OPTIONS];
 
 export interface LinkBaseProps<C = void> extends ChildrenProps, StyleProps, TransferProps {
   /** Link's href attribute */