From 902f89a9692ecef2e35559640f11c3441c5a8f60 Mon Sep 17 00:00:00 2001 From: Fran McDade Date: Mon, 28 Oct 2024 14:48:14 +1000 Subject: [PATCH] feat: update mui link theme styles (#245) --- .../Index/components/TitleCell/titleCell.tsx | 2 +- .../Content/components/Logo/logo.styles.ts | 1 - .../Content/components/Logo/logo.tsx | 5 +-- src/components/Links/components/Link/link.tsx | 33 ++++++++++--------- .../BannerPrimary/bannerPrimary.styles.ts | 4 +++ .../CookieBanner/cookieBanner.styles.ts | 5 --- .../components/CookieBanner/cookieBanner.tsx | 4 +-- .../common/Breadcrumbs/breadcrumbs.tsx | 16 ++++----- src/theme/common/components.ts | 5 ++- src/theme/common/types.ts | 3 ++ 10 files changed, 40 insertions(+), 38 deletions(-) create mode 100644 src/theme/common/types.ts diff --git a/src/components/Index/components/TitleCell/titleCell.tsx b/src/components/Index/components/TitleCell/titleCell.tsx index 68c35d2b..429ec854 100644 --- 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 { 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 index d06f2502..70184664 100644 --- 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 index 3c2d4751..2191a027 100644 --- 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,4 +1,5 @@ import React from "react"; +import { BaseComponentProps } from "../../../../../../../../theme/common/types"; import { ImageSrc, StaticImage, @@ -6,9 +7,8 @@ import { 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={} target={target} + underline="none" url={link} /> ); diff --git a/src/components/Links/components/Link/link.tsx b/src/components/Links/components/Link/link.tsx index 65c95f2c..b3d65225 100644 --- 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 { 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 ( <> - - - {label} - - + + {label} + {copyable && } ); diff --git a/src/components/common/Banner/components/BannerPrimary/bannerPrimary.styles.ts b/src/components/common/Banner/components/BannerPrimary/bannerPrimary.styles.ts index c4bca633..ac225b29 100644 --- 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 index e73c2291..bb3c73d5 100644 --- 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 index 039dbb2c..1c7d0442 100644 --- 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 index cbf9d955..bc93e962 100644 --- 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 = ({ {breadcrumbs.map(({ path, text }, b) => path ? ( - - {text} + + {text} ) : ( diff --git a/src/theme/common/components.ts b/src/theme/common/components.ts index 2f613224..917b2a95 100644 --- 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 new file mode 100644 index 00000000..0d12404e --- /dev/null +++ b/src/theme/common/types.ts @@ -0,0 +1,3 @@ +export interface BaseComponentProps { + className?: string; +}