feat(Link): add experimental underline

Ref UXD-1253
securityscorecard · Sep 27, 2023 · 5650034 · 5650034
1 parent 84791f6
commit 5650034
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 5 deletions.
diff --git a/src/components/_internal/BaseLink/BaseLink.ts b/src/components/_internal/BaseLink/BaseLink.ts
@@ -3,7 +3,7 @@ import { css } from 'styled-components';
 import { getFontWeight, getRadii, getToken } from '../../../utils';
 import { Colors } from './BaseLink.types';
 
-type LinkStylesProps = { $color: Colors };
+type LinkStylesProps = { $color: Colors; $isExperimental: boolean };
 
 export const LinkBaseStyles = css<LinkStylesProps>`
   margin: 0;
@@ -24,7 +24,7 @@ export const LinkFocusStyles = css<LinkStylesProps>`
   color: ${(p) => getToken(`color-action-link-${p.$color}-hover`, p)};
   text-decoration: underline;
   background-color: ${(p) =>
-    getToken(`color-action-link-background${p.$color}-focus`, p)};
+    getToken(`color-action-link-background-${p.$color}-focus`, p)};
   border-radius: ${getRadii('default')};
 `;
 export const LinkActiveStyles = css<LinkStylesProps>`

diff --git a/src/components/typographyLegacy/Link/Link.tsx b/src/components/typographyLegacy/Link/Link.tsx
@@ -1,6 +1,6 @@
-import React from 'react';
+import React, { useContext } from 'react';
 import PropTypes from 'prop-types';
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 import { isNotNull, isNull } from 'ramda-adjunct';
 import cls from 'classnames';
 
@@ -14,6 +14,24 @@ import {
   LinkHoverStyles,
 } from '../../_internal/BaseLink';
 import { CLX_TYPOGRAPHY } from '../../../theme/constants';
+import { DSContext } from '../../../theme/DSProvider/DSProvider';
+import { getColor, getFontWeight, getToken } from '../../../utils';
+
+const experimetalLink = css<Required<{ $color: LinkProps['color'] }>>`
+  text-decoration: underline;
+  font-weight: ${getFontWeight('regular')};
+
+  &:hover {
+    color: ${({ $color, theme }) =>
+      $color === LinkColors.secondary
+        ? getColor('neutral.700', { theme })
+        : getToken(`color-action-link-primary-hover`, { theme })};
+  }
+
+  &:focus-visible {
+    text-decoration: none;
+  }
+`;
 
 const LinkRoot = styled.a`
   ${LinkBaseStyles};
@@ -29,6 +47,8 @@ const LinkRoot = styled.a`
   &:active {
     ${LinkActiveStyles};
   }
+
+  ${({ $isExperimental }) => $isExperimental && experimetalLink}
 `;
 
 const Link: React.FC<LinkProps & React.ComponentProps<typeof LinkRoot>> = ({
@@ -45,6 +65,7 @@ const Link: React.FC<LinkProps & React.ComponentProps<typeof LinkRoot>> = ({
   if (isNull(as) && isNotNull(to)) {
     RouterLink = requireRouterLink();
   }
+  const { experimental } = useContext(DSContext);
 
   const domTag =
     as ||
@@ -67,6 +88,7 @@ const Link: React.FC<LinkProps & React.ComponentProps<typeof LinkRoot>> = ({
       to={to}
       onClick={onClick}
       {...props}
+      $isExperimental={experimental.accessibleLink}
     >
       {children}
     </LinkRoot>

diff --git a/src/theme/DSProvider/DSProvider.tsx b/src/theme/DSProvider/DSProvider.tsx
@@ -7,10 +7,13 @@ import { createTheme } from '../theme';
 import { GlobalStyles } from '../GlobalStyles';
 import { DSContextValue, DSProviderProps } from './DSProvider.types';
 
-export const defaultDSContext = {
+export const defaultDSContext: DSContextValue = {
   portalsContainerId: 'portals',
   hasIncludedGlobalStyles: true,
   debugMode: false,
+  experimental: {
+    accessibleLink: false,
+  },
 };
 export const DSContext = React.createContext<DSContextValue>(defaultDSContext);
 

diff --git a/src/theme/DSProvider/DSProvider.types.ts b/src/theme/DSProvider/DSProvider.types.ts
@@ -6,6 +6,9 @@ export interface DSContextValue {
   portalsContainerId: string;
   hasIncludedGlobalStyles: boolean;
   debugMode: boolean;
+  experimental: {
+    accessibleLink: boolean;
+  };
 }
 export interface DSProviderProps {
   /**