ECHOES-1017 Allow discreet standalone links and default to them in breadcrumbs

Author: david-cho-lerat-sonarsource

src/components/breadcrumbs/BreadcrumbLink.tsx

@@ -36,11 +36,13 @@ export const BreadcrumbLink = forwardRef<HTMLAnchorElement, BreadcrumbLinkProps>
         {...linkProps}
         className={classNames(className, breadcrumbItemStyle)}
         highlight={LinkHighlight.Subtle}
+        isDiscreet
         ref={ref}
         title={title}>
         {linkElement}
       </LinkStandalone>
     </BreadcrumbItemBase>
   );
 });
+
 BreadcrumbLink.displayName = 'BreadcrumbLink';

src/components/links/LinkStandalone.tsx

@@ -27,7 +27,7 @@ import { LinkStandaloneProps } from './LinkTypes';
 import { cssVar } from '~utils/design-tokens';
 
 const LinkStandaloneBase = forwardRef<HTMLAnchorElement, LinkStandaloneProps>((props, ref) => {
-  const { children, iconLeft, ...linkProps } = props;
+  const { children, iconLeft, isDiscreet, ...linkProps } = props;
 
   return (
     <LinkBaseStyled {...linkProps} ref={ref}>
@@ -41,19 +41,25 @@ const LinkStandaloneBase = forwardRef<HTMLAnchorElement, LinkStandaloneProps>((p
 LinkStandaloneBase.displayName = 'LinkStandaloneBase';
 
 export const LinkStandalone = styled(LinkStandaloneBase)`
+  ${({ isDiscreet }) =>
+    isDiscreet &&
+    css`
+      font-weight: ${cssVar('font-weight-regular')};
+    `}
+
   text-decoration-line: ${cssVar('text-decoration-none')};
 
+  &:hover {
+    text-decoration-line: ${cssVar('text-decoration-underline')};
+  }
+
   &:hover,
   &:focus,
   &:active {
     color: var(--color);
     text-decoration-color: var(--color);
   }
 
-  &:hover {
-    text-decoration-line: ${cssVar('text-decoration-underline')};
-  }
-
   ${({ iconLeft }) =>
     iconLeft &&
     css`

src/components/links/LinkTypes.ts

@@ -65,7 +65,10 @@ interface LinkAsButtonProps extends LinkCommonProps, LinkPropsForbiddenForButton
 
 export type LinkProps = LinkAsLinkProps | LinkAsButtonProps;
 
-export type LinkStandaloneBaseProps = { iconLeft?: ReactNode };
+export type LinkStandaloneBaseProps = {
+  iconLeft?: ReactNode;
+  isDiscreet?: boolean;
+};
 
 export type LinkStandaloneProps = LinkProps & LinkStandaloneBaseProps;
 

stories/link/LinkStandalone-stories.tsx

@@ -32,6 +32,11 @@ const meta: Meta<typeof LinkStandaloneComp> = {
   component: LinkStandaloneComp,
   title: 'Echoes/Link/LinkStandalone',
   argTypes: {
+    isDiscreet: {
+      control: {
+        type: 'boolean',
+      },
+    },
     highlight: {
       control: {
         type: 'select',
@@ -51,7 +56,7 @@ export default meta;
 type Story = StoryObj<typeof LinkStandaloneComp>;
 
 const defaultArgs = {
-  highlight: undefined,
+  highlight: LinkHighlight.Accent,
   to: '/projects/new',
 };