Merge pull request #274 from Availity/feat/inline-links

feat(mui-link): inline link styles
Availity · May 2, 2024 · d6f1468 · d6f1468
2 parents 4767c12 + 7ee4587
commit d6f1468
Show file tree

Hide file tree

Showing 4 changed files with 59 additions and 9 deletions.
diff --git a/packages/link/src/lib/Link.stories.tsx b/packages/link/src/lib/Link.stories.tsx
@@ -3,6 +3,8 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { SystemPropsList } from '../../../../data/MuiSystemProperties';
 import { Link, LinkProps } from './Link';
 
+const excludedProps = [...SystemPropsList, "align"]
+
 /**
  * Simple link component that renders an `<a>` tag with the href formatted to leverage loadApp so the link gets loaded inside the home page's iframe
  *
@@ -15,12 +17,12 @@ const meta: Meta<typeof Link> = {
   parameters: {
     docs: {
       controls: {
-        exclude: SystemPropsList,
+        exclude: excludedProps,
       },
     },
     canvas: {
       controls: {
-        exclude: SystemPropsList,
+        exclude: excludedProps,
       },
     },
   },
@@ -39,6 +41,17 @@ export const _Link: StoryObj<typeof Link> = {
   },
 };
 
+/** Inline styling is achieved with the `inherit` variant. */
+export const _Variants: StoryObj<typeof Link> = {
+  render: () => (
+    <div>
+      <Link href='#' gutterBottom>Medium standalone link (default)</Link><br />
+      <Link href='#' gutterBottom variant="body2">Small standalone link</Link><br />
+      <Link href='#' gutterBottom variant="inherit">Inline link</Link>
+    </div>
+  ),
+};
+
 /** The `OpenInNewIcon` has an accessible name to tell screenreaders that it opens in a new window.  */
 export const _NewWindow: StoryObj<typeof Link> = {
   render: (args: LinkProps) => <Link {...args} loadApp={false} target="_blank" />,
@@ -61,3 +74,17 @@ export const _RelativeUrl: StoryObj<typeof Link> = {
     children: 'Portal App',
   },
 };
+
+/** The `gutterBottom` prop achieves correct spacing for a list of links. */
+export const _Lists: StoryObj<typeof Link> = {
+  render: () => (
+    <div>
+      <Link href='#' gutterBottom>Link 1</Link><br />
+      <Link href='#' gutterBottom>Link 2</Link><br />
+      <Link href='#' gutterBottom>Link 3</Link><br />
+      <Link href='#' gutterBottom>Link 4</Link><br />
+      <Link href='#' gutterBottom>Link 5</Link><br />
+      <Link href='#' gutterBottom>Link 6</Link><br />
+    </div>
+  ),
+};
diff --git a/packages/link/src/lib/Link.tsx b/packages/link/src/lib/Link.tsx
@@ -53,7 +53,7 @@ export type LinkProps = {
   onClick?: (event: React.MouseEvent, url: string) => void;
   children?: ReactNode;
   rel?: string;
-} & Omit<MuiLinkProps, 'underline' | 'noWrap' | 'variantMapping' | 'variant'>;
+} & Omit<MuiLinkProps, 'underline' | 'noWrap' | 'variantMapping' >;
 
 export const Link = forwardRef<HTMLAnchorElement, LinkProps>((props, ref) => {
   const { href, target = '_self', children, onClick, loadApp = true, rel, ...rest } = props;
@@ -68,12 +68,11 @@ export const Link = forwardRef<HTMLAnchorElement, LinkProps>((props, ref) => {
       target={target}
       onClick={(event: React.MouseEvent) => onClick && onClick(event, url)}
       rel={rel || setRel(url, target, absolute)}
-      underline="hover"
       {...rest}
       ref={ref}
     >
       <span>
-        {children} {NewWindowIcon}
+        {NewWindowIcon}  {children}
       </span>
     </MuiLink>
   );

diff --git a/packages/theme/src/lib/legacy-theme.ts b/packages/theme/src/lib/legacy-theme.ts
@@ -1123,14 +1123,26 @@ export const legacyTheme = {
     MuiLink: {
       defaultProps: {
         underline: 'hover',
+        variant: 'body1',
       },
       styleOverrides: {
         root: {
           color: tokens.colorTextLink,
-          fontWeight: tokens.fontWeightsBold,
-          '&:hover': {
-            color: tokens.colorCommonBlack,
+          '&:active, &:hover': {
+            color: tokens.colorTextPrimary,
+          },
+          '&:not(.MuiTypography-inherit)': {
+            fontWeight: tokens.fontWeightsBold,
+          },
+          '&.MuiTypography-inherit': {
+            textDecoration: 'underline'
           },
+          '&.MuiTypography-gutterBottom': {
+            marginBottom: '.5rem'
+          },
+          '.MuiSvgIcon-root': {
+            fontSize: 'smaller',
+          }
         },
       },
     },

diff --git a/packages/theme/src/lib/light-theme.ts b/packages/theme/src/lib/light-theme.ts
@@ -1051,14 +1051,26 @@ export const lightTheme = {
     MuiLink: {
       defaultProps: {
         underline: 'hover',
+        variant: 'body1',
       },
       styleOverrides: {
         root: {
-          fontWeight: tokens.fontWeightsBold,
           color: tokens.colorTextLink,
           '&:active': {
             color: tokens.colorTextPrimary,
           },
+          '&:not(.MuiTypography-inherit)': {
+            fontWeight: tokens.fontWeightsBold,
+          },
+          '&.MuiTypography-inherit': {
+            textDecoration: 'underline'
+          },
+          '&.MuiTypography-gutterBottom': {
+            marginBottom: '.5rem'
+          },
+          '.MuiSvgIcon-root': {
+            fontSize: 'smaller',
+          }
         },
       },
     },