Fix LinkAsButton focus styles

Author: Hector Arce De Las Heras

src/components/link/linkAsButton/linkAsButton.styled.ts

@@ -0,0 +1,32 @@
+import styled, { css } from 'styled-components';
+
+import { ButtonSizePropsType, ButtonStateKeyOfType, ButtonStateType } from '@/components/button';
+
+// Apply button border radius to the link when focus-visible
+export const LinkAsButtonWrapperStyled = styled.div<{
+  $styles?: ButtonStateKeyOfType;
+  $state: ButtonStateType;
+  $sizeStyles?: ButtonSizePropsType;
+}>`
+  display: inline;
+  > *:first-child {
+    display: block;
+    ${({ $sizeStyles, $styles, $state }) => {
+      if (!$styles?.[$state]) {
+        return css``;
+      }
+      const combinedStyles = { ...$sizeStyles, ...$styles[$state] };
+      return css`
+        ${combinedStyles.border_radius && `border-radius: ${combinedStyles.border_radius};`}
+        ${combinedStyles.border_top_left_radius &&
+        `border-top-left-radius: ${combinedStyles.border_top_left_radius};`}
+      ${combinedStyles.border_top_right_radius &&
+        `border-top-right-radius: ${combinedStyles.border_top_right_radius};`}
+      ${combinedStyles.border_bottom_left_radius &&
+        `border-bottom-left-radius: ${combinedStyles.border_bottom_left_radius};`}
+      ${combinedStyles.border_bottom_right_radius &&
+        `border-bottom-right-radius: ${combinedStyles.border_bottom_right_radius};`}
+      `;
+    }}
+  }
+`;

src/components/link/linkAsButton/linkAsButtonStandAlone.tsx

@@ -7,37 +7,45 @@ import { Text } from '@/components/text';
 import { TextDecorationType } from '@/components/text/types';
 
 import { ILinkAsButtonStandAlone } from '../types/link';
+import { LinkAsButtonWrapperStyled } from './linkAsButton.styled';
 
 // eslint-disable-next-line complexity
 export const LinkAsButtonStandAloneComponent = (
   { children, url, component, target, role, onClick, ...props }: ILinkAsButtonStandAlone,
   ref: React.ForwardedRef<HTMLElement> | undefined
 ): JSX.Element => {
   return (
-    <Text
-      ref={ref}
-      aria-label={props['aria-label']}
-      component={component}
-      dataTestId={props.dataTestId}
-      decoration={TextDecorationType.NONE}
-      isDisabled={props.state === ButtonStateType.DISABLED}
-      role={role}
-      target={target}
-      url={url}
-      onClick={onClick}
+    // Apply button border radius to the link when focus-visible
+    <LinkAsButtonWrapperStyled
+      $sizeStyles={props.sizeStyles}
+      $state={props.state}
+      $styles={props.styles}
     >
-      <ButtonStyled
-        as="span"
-        {...props}
-        $fullWidth={props.fullWidth}
-        $iconPosition={props.iconPosition}
-        $sizeStyles={props.sizeStyles}
-        $state={props.state}
-        $styles={props.styles}
+      <Text
+        ref={ref}
+        aria-label={props['aria-label']}
+        component={component}
+        dataTestId={props.dataTestId}
+        decoration={TextDecorationType.NONE}
+        isDisabled={props.state === ButtonStateType.DISABLED}
+        role={role}
+        target={target}
+        url={url}
+        onClick={onClick}
       >
-        <ButtonStandAloneStructure {...props}>{children}</ButtonStandAloneStructure>
-      </ButtonStyled>
-    </Text>
+        <ButtonStyled
+          as="span"
+          {...props}
+          $fullWidth={props.fullWidth}
+          $iconPosition={props.iconPosition}
+          $sizeStyles={props.sizeStyles}
+          $state={props.state}
+          $styles={props.styles}
+        >
+          <ButtonStandAloneStructure {...props}>{children}</ButtonStandAloneStructure>
+        </ButtonStyled>
+      </Text>
+    </LinkAsButtonWrapperStyled>
   );
 };