From 7404484d30eed3e95d01fa8571e948a16dc7f373 Mon Sep 17 00:00:00 2001 From: Fran McDade Date: Fri, 1 Nov 2024 14:53:47 +1000 Subject: [PATCH] feat!: update banner components (#253) --- src/components/common/Banner/banner.styles.ts | 29 ++++++++++++++++ src/components/common/Banner/banner.tsx | 29 +++++++--------- .../BannerPrimary/bannerPrimary.styles.ts | 24 -------------- .../BannerPrimary/bannerPrimary.tsx | 27 --------------- .../SessionTimeout/sessionTimeout.styles.ts | 22 ------------- .../SessionTimeout/sessionTimeout.tsx | 29 +++++++--------- .../SystemIndexing/systemIndexing.tsx | 33 +++++++------------ .../components/SystemStatus/systemStatus.tsx | 33 +++++++------------ src/components/common/Banner/constants.ts | 11 +++++++ src/components/types.ts | 6 ++++ 10 files changed, 91 insertions(+), 152 deletions(-) create mode 100644 src/components/common/Banner/banner.styles.ts delete mode 100644 src/components/common/Banner/components/BannerPrimary/bannerPrimary.styles.ts delete mode 100644 src/components/common/Banner/components/BannerPrimary/bannerPrimary.tsx delete mode 100644 src/components/common/Banner/components/SessionTimeout/sessionTimeout.styles.ts create mode 100644 src/components/common/Banner/constants.ts diff --git a/src/components/common/Banner/banner.styles.ts b/src/components/common/Banner/banner.styles.ts new file mode 100644 index 00000000..0af02b4b --- /dev/null +++ b/src/components/common/Banner/banner.styles.ts @@ -0,0 +1,29 @@ +import styled from "@emotion/styled"; +import { Alert } from "@mui/material"; +import { mediaDesktopUp } from "../../../styles/common/mixins/breakpoints"; +import { textBodySmall400 } from "../../../styles/common/mixins/fonts"; + +export const StyledAlert = styled(Alert)` + justify-content: center; + padding: 8px 12px; + text-align: center; + + .MuiAlert-message { + ${textBodySmall400}; + align-self: center; + flex: 1; + + .MuiLink-root { + color: inherit; + } + } + + .MuiAlert-action { + margin: -8px; + padding: 0; + } + + ${mediaDesktopUp} { + padding: 8px 16px; + } +`; diff --git a/src/components/common/Banner/banner.tsx b/src/components/common/Banner/banner.tsx index 7436d71f..f8eb9175 100644 --- a/src/components/common/Banner/banner.tsx +++ b/src/components/common/Banner/banner.tsx @@ -1,22 +1,15 @@ -import { Alert as MAlert, AlertProps as MAlertProps } from "@mui/material"; -import React, { forwardRef, ReactNode } from "react"; +import { AlertProps } from "@mui/material"; +import React, { forwardRef } from "react"; +import { BaseComponentProps } from "../../types"; +import { StyledAlert } from "./banner.styles"; +import { ALERT_PROPS } from "./constants"; -export interface BannerProps extends MAlertProps { - children: ReactNode; - className?: string; -} - -export const Banner = forwardRef(function Banner( - { - children, - className, - ...props /* Spread props to allow for Mui AlertProps specific prop overrides. */ - }: BannerProps, +export const Banner = forwardRef< + HTMLDivElement, + AlertProps & BaseComponentProps +>(function Alert( + { ...props }: AlertProps & BaseComponentProps, ref ): JSX.Element { - return ( - - {children} - - ); + return ; }); diff --git a/src/components/common/Banner/components/BannerPrimary/bannerPrimary.styles.ts b/src/components/common/Banner/components/BannerPrimary/bannerPrimary.styles.ts deleted file mode 100644 index ac225b29..00000000 --- a/src/components/common/Banner/components/BannerPrimary/bannerPrimary.styles.ts +++ /dev/null @@ -1,24 +0,0 @@ -import styled from "@emotion/styled"; -import { Alert as MAlert } from "@mui/material"; -import { primaryMain, white } from "../../../../../styles/common/mixins/colors"; -import { textBodySmall400 } from "../../../../../styles/common/mixins/fonts"; - -export const Alert = styled(MAlert)` - border-radius: 0; - justify-content: center; - padding: 8px; - - &.MuiAlert-standardPrimary { - background-color: ${primaryMain}; - color: ${white}; - } - - .MuiAlert-message { - ${textBodySmall400}; - text-align: center; - - .MuiLink-root { - color: inherit; - } - } -`; diff --git a/src/components/common/Banner/components/BannerPrimary/bannerPrimary.tsx b/src/components/common/Banner/components/BannerPrimary/bannerPrimary.tsx deleted file mode 100644 index 3f9b81b6..00000000 --- a/src/components/common/Banner/components/BannerPrimary/bannerPrimary.tsx +++ /dev/null @@ -1,27 +0,0 @@ -import { AlertProps as MAlertProps } from "@mui/material"; -import React, { ReactNode } from "react"; -import { Alert } from "./bannerPrimary.styles"; - -export interface BannerPrimaryProps extends MAlertProps { - children: ReactNode; - className?: string; -} - -export const BannerPrimary = ({ - children, - className, - ...props /* Spread props to allow for Mui AlertProps specific prop overrides. */ -}: BannerPrimaryProps): JSX.Element => { - return ( - - {children} - - ); -}; diff --git a/src/components/common/Banner/components/SessionTimeout/sessionTimeout.styles.ts b/src/components/common/Banner/components/SessionTimeout/sessionTimeout.styles.ts deleted file mode 100644 index 01cb2c83..00000000 --- a/src/components/common/Banner/components/SessionTimeout/sessionTimeout.styles.ts +++ /dev/null @@ -1,22 +0,0 @@ -import styled from "@emotion/styled"; -import { mediaDesktopUp } from "../../../../../styles/common/mixins/breakpoints"; -import { BannerPrimary } from "../BannerPrimary/bannerPrimary"; - -export const Banner = styled(BannerPrimary)` - gap: 12px; - padding: 8px 12px; - - ${mediaDesktopUp} { - padding: 8px 16px; - } - - .MuiAlert-message { - align-self: center; - flex: 1; - } - - .MuiAlert-action { - margin: -8px; - padding: 0; - } -`; diff --git a/src/components/common/Banner/components/SessionTimeout/sessionTimeout.tsx b/src/components/common/Banner/components/SessionTimeout/sessionTimeout.tsx index 3b3dee65..d2ee6151 100644 --- a/src/components/common/Banner/components/SessionTimeout/sessionTimeout.tsx +++ b/src/components/common/Banner/components/SessionTimeout/sessionTimeout.tsx @@ -1,26 +1,21 @@ -import { AlertProps as MAlertProps } from "@mui/material"; -import React, { Fragment, ReactNode } from "react"; +import { AlertProps, Fade } from "@mui/material"; +import React from "react"; import { useSessionTimeout } from "../../../../../hooks/useSessionTimeout"; -import { Banner } from "./sessionTimeout.styles"; - -export interface SessionTimeoutProps extends Omit { - className?: string; - title?: ReactNode; -} +import { BaseComponentProps, ContentProps } from "../../../../types"; +import { Banner } from "../../banner"; export const SessionTimeout = ({ + children, className, - title = "For your security, you have been logged out due to 15 minutes of inactivity.", + content, ...props -}: SessionTimeoutProps): JSX.Element => { +}: AlertProps & BaseComponentProps & ContentProps): JSX.Element => { const { clearSessionTimeout, isSessionTimeout } = useSessionTimeout(); return ( - - {isSessionTimeout && ( - - {title} - - )} - + + + {content || children} + + ); }; diff --git a/src/components/common/Banner/components/SystemIndexing/systemIndexing.tsx b/src/components/common/Banner/components/SystemIndexing/systemIndexing.tsx index 8610a91a..4b899c15 100644 --- a/src/components/common/Banner/components/SystemIndexing/systemIndexing.tsx +++ b/src/components/common/Banner/components/SystemIndexing/systemIndexing.tsx @@ -1,33 +1,22 @@ -import { AlertProps as MAlertProps } from "@mui/material"; -import React, { Fragment, ReactNode } from "react"; +import { AlertProps, Fade } from "@mui/material"; +import React from "react"; import { useSystemStatus } from "../../../../../hooks/useSystemStatus"; -import { BannerPrimary } from "../BannerPrimary/bannerPrimary"; - -export interface SystemIndexingProps extends Omit { - children?: ReactNode; - className?: string; - title?: ReactNode; -} +import { BaseComponentProps, ContentProps } from "../../../../types"; +import { Banner } from "../../banner"; export const SystemIndexing = ({ children, className, - title = "Data indexing in progress. Downloads and exports are disabled as search results may be incomplete.", + content, ...props -}: SystemIndexingProps): JSX.Element => { +}: AlertProps & BaseComponentProps & ContentProps): JSX.Element => { const systemStatus = useSystemStatus(); const { indexing, loading, ok } = systemStatus; - const showAlert = !loading && ok && indexing; return ( - - {showAlert && ( - - - {title} - {children} - - - )} - + + + {content || children} + + ); }; diff --git a/src/components/common/Banner/components/SystemStatus/systemStatus.tsx b/src/components/common/Banner/components/SystemStatus/systemStatus.tsx index cdf7b73a..ee9a94bd 100644 --- a/src/components/common/Banner/components/SystemStatus/systemStatus.tsx +++ b/src/components/common/Banner/components/SystemStatus/systemStatus.tsx @@ -1,33 +1,22 @@ -import { AlertProps as MAlertProps } from "@mui/material"; -import React, { Fragment, ReactNode } from "react"; +import { AlertProps, Fade } from "@mui/material"; +import React from "react"; import { useSystemStatus } from "../../../../../hooks/useSystemStatus"; -import { BannerPrimary } from "../BannerPrimary/bannerPrimary"; - -export interface SystemStatusProps extends Omit { - children?: ReactNode; - className?: string; - title?: ReactNode; -} +import { BaseComponentProps, ContentProps } from "../../../../types"; +import { Banner } from "../../banner"; export const SystemStatus = ({ children, className, - title = "One or more of the system components are currently unavailable. Functionality may be degraded.", + content, ...props -}: SystemStatusProps): JSX.Element => { +}: AlertProps & BaseComponentProps & ContentProps): JSX.Element => { const systemStatus = useSystemStatus(); const { loading, ok } = systemStatus; - const showAlert = !loading && !ok; return ( - - {showAlert && ( - - - {title} - {children} - - - )} - + + + {content || children} + + ); }; diff --git a/src/components/common/Banner/constants.ts b/src/components/common/Banner/constants.ts new file mode 100644 index 00000000..c104940d --- /dev/null +++ b/src/components/common/Banner/constants.ts @@ -0,0 +1,11 @@ +import { AlertProps } from "@mui/material"; +import { COLOR, VARIANT } from "../../../styles/common/mui/alert"; +import { FlatPaper } from "../Paper/paper.styles"; + +export const ALERT_PROPS: Partial = { + color: COLOR.PRIMARY, + component: FlatPaper, + elevation: 0, + icon: false, + variant: VARIANT.FILLED, +}; diff --git a/src/components/types.ts b/src/components/types.ts index 3ca98a44..d34bc719 100644 --- a/src/components/types.ts +++ b/src/components/types.ts @@ -1,7 +1,13 @@ +import { ReactNode } from "react"; + export interface BaseComponentProps { className?: string; } +export interface ContentProps { + content?: ReactNode; +} + export interface TestIdProps { testId?: string; }