feat!: update banner components (#253) (#255)

Co-authored-by: Fran McDade <[email protected]>

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;
+  }
+`;

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<HTMLDivElement, BannerProps>(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 (
-    <MAlert className={className} ref={ref} {...props}>
-      {children}
-    </MAlert>
-  );
+  return <StyledAlert {...ALERT_PROPS} ref={ref} {...props} />;
 });

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<MAlertProps, "title"> {
-  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 (
-    <Fragment>
-      {isSessionTimeout && (
-        <Banner className={className} onClose={clearSessionTimeout} {...props}>
-          {title}
-        </Banner>
-      )}
-    </Fragment>
+    <Fade in={isSessionTimeout} unmountOnExit>
+      <Banner className={className} onClose={clearSessionTimeout} {...props}>
+        {content || children}
+      </Banner>
+    </Fade>
   );
 };

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<MAlertProps, "title"> {
-  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 (
-    <Fragment>
-      {showAlert && (
-        <BannerPrimary className={className} {...props}>
-          <Fragment>
-            {title}
-            {children}
-          </Fragment>
-        </BannerPrimary>
-      )}
-    </Fragment>
+    <Fade in={!loading && ok && indexing} unmountOnExit>
+      <Banner className={className} {...props}>
+        {content || children}
+      </Banner>
+    </Fade>
   );
 };

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<MAlertProps, "title"> {
-  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 (
-    <Fragment>
-      {showAlert && (
-        <BannerPrimary className={className} {...props}>
-          <Fragment>
-            {title}
-            {children}
-          </Fragment>
-        </BannerPrimary>
-      )}
-    </Fragment>
+    <Fade in={!loading && !ok} unmountOnExit>
+      <Banner className={className} {...props}>
+        {content || children}
+      </Banner>
+    </Fade>
   );
 };

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<AlertProps> = {
+  color: COLOR.PRIMARY,
+  component: FlatPaper,
+  elevation: 0,
+  icon: false,
+  variant: VARIANT.FILLED,
+};

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;
 }