feat: update mui link theme styles (#245) (#246)

Co-authored-by: Fran McDade <[email protected]>
DataBiosphere · Oct 29, 2024 · 7f401b8 · 7f401b8
1 parent 4b832ac
commit 7f401b8
Show file tree

Hide file tree

Showing 10 changed files with 40 additions and 38 deletions.
diff --git a/src/components/Index/components/TitleCell/titleCell.tsx b/src/components/Index/components/TitleCell/titleCell.tsx
@@ -4,7 +4,7 @@ import { TEXT_BODY_400 } from "../../../../theme/common/typography";
 import { Link, LinkProps } from "../../../Links/components/Link/link";
 import { TitleCell as Cell } from "./titleCell.styles";
 
-export interface TitleCellProps extends LinkProps {
+export interface TitleCellProps extends Omit<LinkProps, "title"> {
   title: ReactNode;
 }
 

diff --git a/src/components/Layout/components/Header/components/Content/components/Logo/logo.styles.ts b/src/components/Layout/components/Header/components/Content/components/Logo/logo.styles.ts
@@ -4,7 +4,6 @@ import { Link } from "../../../../../../../Links/components/Link/link";
 export const StyledLink = styled(Link)`
   &.MuiLink-root {
     flex: none;
-    text-decoration: none !important;
     img {
       margin: 0;
     }

diff --git a/src/components/Layout/components/Header/components/Content/components/Logo/logo.tsx b/src/components/Layout/components/Header/components/Content/components/Logo/logo.tsx
@@ -1,14 +1,14 @@
 import React from "react";
+import { BaseComponentProps } from "../../../../../../../../theme/common/types";
 import {
   ImageSrc,
   StaticImage,
 } from "../../../../../../../common/StaticImage/staticImage";
 import { ANCHOR_TARGET } from "../../../../../../../Links/common/entities";
 import { StyledLink } from "./logo.styles";
 
-export interface LogoProps {
+export interface LogoProps extends BaseComponentProps {
   alt: string;
-  className?: string;
   height?: number;
   link: string;
   src: ImageSrc;
@@ -30,6 +30,7 @@ export const Logo = ({
       className={className}
       label={<StaticImage alt={alt} height={height} src={src} width={width} />}
       target={target}
+      underline="none"
       url={link}
     />
   );

diff --git a/src/components/Links/components/Link/link.tsx b/src/components/Links/components/Link/link.tsx
@@ -6,6 +6,7 @@ import {
 import NLink from "next/link";
 import React, { ReactNode } from "react";
 import { isValidUrl } from "../../../../common/utils";
+import { BaseComponentProps } from "../../../../theme/common/types";
 import { CopyToClipboard } from "../../../common/CopyToClipboard/copyToClipboard";
 import { TypographyProps } from "../../../common/Typography/common/entities";
 import { ANCHOR_TARGET, REL_ATTRIBUTE, Url } from "../../common/entities";
@@ -16,11 +17,11 @@ import {
 } from "../../common/utils";
 import { ExploreViewLink } from "./components/ExploreViewLink/exploreViewLink";
 
-export interface LinkProps {
-  className?: string;
+export interface LinkProps
+  extends BaseComponentProps,
+    Omit<MLinkProps, "children" | "component"> {
   copyable?: boolean;
   label: ReactNode /* link label may be an element */;
-  noWrap?: MLinkProps["noWrap"];
   onClick?: () => void;
   target?: ANCHOR_TARGET;
   TypographyProps?: TypographyProps;
@@ -55,19 +56,19 @@ export const Link = ({
       /* Client-side navigation */
       return (
         <>
-          <NLink href={url} legacyBehavior passHref>
-            <MLink
-              className={className}
-              rel={REL_ATTRIBUTE.NO_OPENER}
-              noWrap={noWrap}
-              target={target || ANCHOR_TARGET.SELF}
-              onClick={onClick}
-              {...TypographyProps}
-              {...props}
-            >
-              {label}
-            </MLink>
-          </NLink>
+          <MLink
+            className={className}
+            component={NLink}
+            href={url}
+            noWrap={noWrap}
+            onClick={onClick}
+            rel={REL_ATTRIBUTE.NO_OPENER}
+            target={target || ANCHOR_TARGET.SELF}
+            {...TypographyProps}
+            {...props}
+          >
+            {label}
+          </MLink>
           {copyable && <CopyToClipboard copyStr={url} />}
         </>
       );

diff --git a/src/components/common/Banner/components/BannerPrimary/bannerPrimary.styles.ts b/src/components/common/Banner/components/BannerPrimary/bannerPrimary.styles.ts
@@ -16,5 +16,9 @@ export const Alert = styled(MAlert)`
   .MuiAlert-message {
     ${textBodySmall400};
     text-align: center;
+
+    .MuiLink-root {
+      color: inherit;
+    }
   }
 `;
diff --git a/src/components/common/Banner/components/CookieBanner/cookieBanner.styles.ts b/src/components/common/Banner/components/CookieBanner/cookieBanner.styles.ts
@@ -23,11 +23,6 @@ export const CookieBanner = styled(Banner)`
 
     .MuiLink-root {
       color: inherit;
-      text-decoration: underline;
-
-      &:hover {
-        text-decoration: none;
-      }
     }
   }
 

diff --git a/src/components/common/Banner/components/CookieBanner/cookieBanner.tsx b/src/components/common/Banner/components/CookieBanner/cookieBanner.tsx
@@ -3,12 +3,12 @@ import React, { forwardRef, Fragment, ReactNode } from "react";
 import { FLAG } from "../../../../../hooks/useFeatureFlag/common/entities";
 import { setLocalStorage } from "../../../../../hooks/useLocalStorage/common/utils";
 import { useLocalStorage } from "../../../../../hooks/useLocalStorage/useLocalStorage";
+import { BaseComponentProps } from "../../../../../theme/common/types";
 import { ButtonPrimary } from "../../../Button/components/ButtonPrimary/buttonPrimary";
 import { DismissibleBanner } from "../DismissibleBanner/dismissibleBanner";
 import { CookieBanner as Banner } from "./cookieBanner.styles";
 
-export interface CookieBannerProps extends MAlertProps {
-  className?: string;
+export interface CookieBannerProps extends BaseComponentProps, MAlertProps {
   localStorageKey: string;
   message?: ReactNode;
   secondaryAction?: ReactNode;

diff --git a/src/components/common/Breadcrumbs/breadcrumbs.tsx b/src/components/common/Breadcrumbs/breadcrumbs.tsx
@@ -1,20 +1,16 @@
 import ChevronRightRoundedIcon from "@mui/icons-material/ChevronRightRounded";
-import {
-  Link as BreadcrumbLink,
-  Breadcrumbs as MBreadcrumbs,
-  Typography,
-} from "@mui/material";
-import Link from "next/link";
+import { Link, Breadcrumbs as MBreadcrumbs, Typography } from "@mui/material";
+import NLink from "next/link";
 import React, { ReactNode } from "react";
+import { BaseComponentProps } from "../../../theme/common/types";
 
 export interface Breadcrumb {
   path: string;
   text: ReactNode;
 }
 
-export interface BreadcrumbsProps {
+export interface BreadcrumbsProps extends BaseComponentProps {
   breadcrumbs: Breadcrumb[];
-  className?: string;
   Separator?: ReactNode;
 }
 
@@ -29,8 +25,8 @@ export const Breadcrumbs = ({
         <MBreadcrumbs className={className} separator={Separator}>
           {breadcrumbs.map(({ path, text }, b) =>
             path ? (
-              <Link key={`${path}${b}`} href={path} legacyBehavior passHref>
-                <BreadcrumbLink>{text}</BreadcrumbLink>
+              <Link component={NLink} key={b} href={path}>
+                {text}
               </Link>
             ) : (
               <Typography key={`${path}${b}`} maxWidth={180} noWrap>

diff --git a/src/theme/common/components.ts b/src/theme/common/components.ts
@@ -1047,11 +1047,14 @@ export const MuiInputBase = (theme: Theme): Components["MuiInputBase"] => {
  */
 export const MuiLink: Components["MuiLink"] = {
   defaultProps: {
-    underline: "hover",
+    underline: "always",
   },
   styleOverrides: {
     root: {
       cursor: "pointer",
+      textDecorationColor: "currentColor",
+      textDecorationSkipInk: "none",
+      textUnderlinePosition: "from-font",
     },
   },
 };

diff --git a/src/theme/common/types.ts b/src/theme/common/types.ts
@@ -0,0 +1,3 @@
+export interface BaseComponentProps {
+  className?: string;
+}