Fix Font-Weight and Color Props of Link Component

This commit addresses two issues with the Link component: the 'font-weight' and 'color' props were not functioning correctly. When a user set a different value from the default in Storybook, the changes were not reflected visually in the component.

Key changes include:

link.tsx: Added receipt of 'weight' value via props. Previously, the 'styles.container' object wasn't storing the 'weight' value, so it was always undefined.
link.styled.ts: Included 'applyDevicePropsTextStyles' function to link's style. The 'color' is a text property and needs to be applied by 'TextStylesExtended' styles const.
These changes ensure that the 'font-weight' and 'color' props of the Link component function as expected, improving the component's flexibility and usability.

Author: Hector Arce De Las Heras

src/components/link/link.styled.ts

@@ -4,12 +4,14 @@ import styled, { css } from 'styled-components';
 import { focusVisibleAlt } from '@/styles/mixins';
 import { getStyles, getTypographyStyles } from '@/utils/getStyles/getStyles';
 
-import { TextPropsStylesType } from '../text/types';
+import { applyVariantStyles as applyTextVariantStyles } from '../text/text.styled';
+import { TextPropsStylesType, TextVariantStylesType } from '../text/types';
 import { LinkPositionType, LinkPropsStylesType, LinkPropsType, LinkStateType } from './types';
 
 type LinkPropsExtended = {
   linkStyles: LinkPropsStylesType;
   alignCenter: boolean;
+  textStyles?: TextVariantStylesType;
 };
 const applyDevicePropsTextStyles = (props: TextPropsStylesType) => {
   return css`
@@ -44,45 +46,52 @@ const applyPropsTextStyles = (props: TextPropsStylesType) => css`
   `}
 `;
 
+const applyLinkStateStyles = ({
+  textStyles,
+  linkPropsStyles,
+}: {
+  textStyles?: TextVariantStylesType;
+  linkPropsStyles?: LinkPropsStylesType;
+}) => {
+  return css`
+    ${getStyles(linkPropsStyles?.container)}
+    ${getTypographyStyles(linkPropsStyles?.container)}
+    // If textVariant is defined it should be applied before the own variant styles
+    ${applyTextVariantStyles(textStyles)}
+    // In alternative variants, the focus colors must be change
+    ${linkPropsStyles?.altVariant && focusVisibleAlt()}
+  `;
+};
+
 export const TextStyledExtended = styled.p.withConfig({
   shouldForwardProp: () => true,
 })<LinkPropsExtended>`
-  ${({ linkStyles }) => getStyles(linkStyles?.[LinkStateType.DEFAULT]?.container)}
-  ${({ linkStyles }) => getTypographyStyles(linkStyles?.[LinkStateType.DEFAULT]?.container)}
-  // In alternative variants, the focus colors must be change
-  ${({ linkStyles }) => linkStyles?.[LinkStateType.DEFAULT]?.altVariant && focusVisibleAlt()}
+  ${({ linkStyles, textStyles }) =>
+    applyLinkStateStyles({ textStyles, linkPropsStyles: linkStyles?.[LinkStateType.DEFAULT] })}
   ${({ alignCenter }) =>
     alignCenter &&
     css`
       margin: auto;
     `};
 
   &[aria-disabled='true'] {
-    ${({ linkStyles }) => getStyles(linkStyles?.[LinkStateType.DISABLED]?.container)}
-    ${({ linkStyles }) => getTypographyStyles(linkStyles?.[LinkStateType.DISABLED]?.container)}
-    // In alternative variants, the focus colors must be change
-    ${({ linkStyles }) => linkStyles?.[LinkStateType.DEFAULT]?.altVariant && focusVisibleAlt()}
+    ${({ linkStyles, textStyles }) =>
+      applyLinkStateStyles({ textStyles, linkPropsStyles: linkStyles?.[LinkStateType.DISABLED] })}
   }
 
   &:hover:not([aria-disabled='true']) {
-    ${({ linkStyles }) => getStyles(linkStyles?.[LinkStateType.HOVER]?.container)}
-    ${({ linkStyles }) => getTypographyStyles(linkStyles?.[LinkStateType.HOVER]?.container)}
-    // In alternative variants, the focus colors must be change
-    ${({ linkStyles }) => linkStyles?.[LinkStateType.HOVER]?.altVariant && focusVisibleAlt()}
+    ${({ linkStyles, textStyles }) =>
+      applyLinkStateStyles({ textStyles, linkPropsStyles: linkStyles?.[LinkStateType.HOVER] })}
   }
 
   &:active:not([aria-disabled='true']) {
-    ${({ linkStyles }) => getStyles(linkStyles?.[LinkStateType.PRESSED]?.container)}
-    ${({ linkStyles }) => getTypographyStyles(linkStyles?.[LinkStateType.PRESSED]?.container)}
-    // In alternative variants, the focus colors must be change
-    ${({ linkStyles }) => linkStyles?.[LinkStateType.PRESSED]?.altVariant && focusVisibleAlt()}
+    ${({ linkStyles, textStyles }) =>
+      applyLinkStateStyles({ textStyles, linkPropsStyles: linkStyles?.[LinkStateType.PRESSED] })}
   }
 
   &:visited:not([aria-disabled='true']) {
-    ${({ linkStyles }) => getStyles(linkStyles?.[LinkStateType.VISITED]?.container)}
-    ${({ linkStyles }) => getTypographyStyles(linkStyles?.[LinkStateType.VISITED]?.container)}
-    // In alternative variants, the focus colors must be change
-    ${({ linkStyles }) => linkStyles?.[LinkStateType.VISITED]?.altVariant && focusVisibleAlt()}
+    ${({ linkStyles, textStyles }) =>
+      applyLinkStateStyles({ textStyles, linkPropsStyles: linkStyles?.[LinkStateType.VISITED] })}
   }
 
   // Apply props tokens

src/components/link/link.tsx

@@ -1,9 +1,9 @@
 /* eslint-disable complexity */
 import * as React from 'react';
 
-import { TextDecorationType } from '@/components/text/types';
+import { TextDecorationType, TextVariantStylesType } from '@/components/text/types';
 import { STYLES_NAME } from '@/constants';
-import { States, useManageState } from '@/hooks';
+import { States, useManageState, useStylesV2 } from '@/hooks';
 import { useStyles } from '@/hooks/useStyles/useStyles';
 import { ErrorBoundary, FallbackComponent } from '@/provider/errorBoundary';
 import { useGenericComponents } from '@/provider/genericComponents/genericComponentsProvider';
@@ -26,7 +26,7 @@ const LinkComponent = React.forwardRef(
       alignCenter = false,
       disabled = false,
       color: colorLinkProp,
-      textVariant: textVariantProp,
+      textVariant,
       role: roleProp,
       variant,
       ctv,
@@ -38,11 +38,15 @@ const LinkComponent = React.forwardRef(
     const { role } = disabledLink(disabled, roleProp);
     const ariaDisabled = disabled || undefined;
     const actionStyles = useStyles<LinkPropsStylesType>(STYLES_NAME.LINK, action, ctv?.[action]);
+    const textStyles = useStylesV2<TextVariantStylesType>({
+      styleName: STYLES_NAME.TEXT,
+      variantName: textVariant,
+      isOptional: true,
+    });
     const styles = (variant && actionStyles?.[variant]) || {};
 
     const isInline = action === LinkActionType.INLINE;
     const textDecoration = isInline ? TextDecorationType.UNDERLINE : decoration;
-    const textVariant = textVariantProp ?? styles.container?.font_variant;
     const weight = props.weight || styles.container?.font_weight;
     const color = colorLinkProp || styles.font_color || styles.container?.color;
 
@@ -65,7 +69,7 @@ const LinkComponent = React.forwardRef(
         role={role}
         state={state as unknown as LinkStateType}
         styles={styles}
-        textVariant={textVariant}
+        textStyles={textStyles}
         weight={weight}
       />
     );

src/components/link/linkStandAlone.tsx

@@ -28,7 +28,7 @@ const LinkStandAloneComponent = (
       isDisabled={props.state === LinkStateType.DISABLED}
       linkStyles={props.styles}
       target={props.target}
-      variant={props.textVariant}
+      textStyles={props.textStyles}
       weight={props.weight}
       //We have to make this because even it was disabled, you could access to onClick by arrows
       onClick={props.state !== LinkStateType.DISABLED ? props.onClick : undefined}

src/components/link/types/link.ts

@@ -7,7 +7,11 @@ import {
   IButtonStandAlone,
 } from '@/components/button';
 import { IElementOrIcon } from '@/components/elementOrIcon';
-import { TextComponentType, TextDecorationType } from '@/components/text/types';
+import {
+  TextComponentType,
+  TextDecorationType,
+  TextVariantStylesType,
+} from '@/components/text/types';
 import { GenericLinkType } from '@/provider/genericComponents';
 import { CustomTokenTypes } from '@/types';
 
@@ -34,20 +38,24 @@ export interface ILinkStandAlone extends LinkAriaAttributes {
   role?: string;
   state: LinkStateType;
   styles: LinkPropsStylesType;
+  textStyles?: TextVariantStylesType;
   target?: LinkTargetType;
-  textVariant?: string;
   url: string;
   weight?: number;
   alignCenter: boolean;
   draggable?: boolean;
 }
 
 export interface ILink
-  extends Omit<ILinkStandAlone, 'styles' | 'component' | 'alignCenter' | 'state' | 'aria-disabled'>,
+  extends Omit<
+      ILinkStandAlone,
+      'styles' | 'component' | 'alignCenter' | 'state' | 'aria-disabled' | 'textStyles'
+    >,
     Omit<CustomTokenTypes<LinkStylesType<string>>, 'cts' | 'extraCt'> {
   alignCenter?: boolean;
   disabled?: boolean;
   variant: string;
+  textVariant?: string;
 }
 
 export interface ILinkAsButtonStandAlone extends Omit<IButtonStandAlone, 'showLoader'> {