feat!: simplify alert components (#252)

DataBiosphere · Nov 5, 2024 · 5e60c4f · 5e60c4f
1 parent 1e494e0
commit 5e60c4f
Show file tree

Hide file tree

Showing 9 changed files with 84 additions and 181 deletions.
diff --git a/.../components/TerraSetUpForm/components/NIHAccountExpiryWarning/nihAccountExpiryWarning.tsx b/.../components/TerraSetUpForm/components/NIHAccountExpiryWarning/nihAccountExpiryWarning.tsx
@@ -3,7 +3,9 @@ import {
   expireTimeInSeconds,
   useAuthenticationNIHExpiry,
 } from "../../../../../../../../hooks/useAuthentication/useAuthenticationNIHExpiry";
-import { FluidAlert } from "../../../../../../../common/Alert/alert.styles";
+import { Alert } from "../../../../../../../common/Alert/alert";
+import { ALERT_PROPS } from "../../../../../../../common/Alert/constants";
+import { FluidPaper } from "../../../../../../../common/Paper/paper.styles";
 import { Link } from "../../../../../../../Links/components/Link/link";
 
 export const NIHAccountExpiryWarning = (): JSX.Element | null => {
@@ -14,23 +16,19 @@ export const NIHAccountExpiryWarning = (): JSX.Element | null => {
   if (!isReady) return null;
 
   return linkWillExpire || linkExpired ? (
-    <FluidAlert
-      severity="warning"
-      title={
-        <>
-          <span>{getExpiryMessage(linkExpired, linkExpireTime)}</span>{" "}
-          <span>
-            Please{" "}
-            <Link
-              label="renew your account"
-              url="https://support.terra.bio/hc/en-us/articles/360038086332-Linking-authorization-accessing-controlled-data-on-external-servers#heading-4"
-            />{" "}
-            link.
-          </span>
-        </>
-      }
-      variant="banner"
-    />
+    <Alert {...ALERT_PROPS.STANDARD_WARNING} component={FluidPaper}>
+      <span>
+        <span>{getExpiryMessage(linkExpired, linkExpireTime)}</span>{" "}
+        <span>
+          Please{" "}
+          <Link
+            label="renew your account"
+            url="https://support.terra.bio/hc/en-us/articles/360038086332-Linking-authorization-accessing-controlled-data-on-external-servers#heading-4"
+          />{" "}
+          link.
+        </span>
+      </span>
+    </Alert>
   ) : null;
 };
 

diff --git a/src/components/common/Alert/alert.stories.tsx b/src/components/common/Alert/alert.stories.tsx
diff --git a/src/components/common/Alert/alert.styles.ts b/src/components/common/Alert/alert.styles.ts
@@ -1,28 +1,25 @@
+import { css } from "@emotion/react";
 import styled from "@emotion/styled";
-import { TABLET } from "../../../theme/common/breakpoints";
-import { Alert } from "./alert";
+import { Alert } from "@mui/material";
+import { SIZE } from "../../../styles/common/constants/size";
+import {
+  textBody4002Lines,
+  textBodyLarge500,
+} from "../../../styles/common/mixins/fonts";
 
-/**
- * Flat alert - typically used when in full stretch or full "bleed" across a container.
- * e.g. the entire width of mobile viewports.
- */
-export const FlatAlert = styled(Alert)`
-  border-left: none;
-  border-radius: 0;
-  border-right: none;
-  box-shadow: none;
-`;
-
-/* eslint-disable valid-jsdoc -- disable require param */
-/**
- * Fluid alert - typically used to transition between flat paper (mobile) and rounded paper (tablet or desktop).
- */
-/* eslint-enable valid-jsdoc -- disable require param */
-export const FluidAlert = styled(Alert)`
-  ${({ theme }) => theme.breakpoints.down(TABLET)} {
-    border-left: none;
-    border-radius: 0;
-    border-right: none;
-    box-shadow: none;
-  }
+export const StyledAlert = styled(Alert)`
+  ${(props) =>
+    props.size === SIZE.LARGE &&
+    css`
+      padding: 20px;
+      .MuiAlert-icon {
+        padding: 2px 0;
+      }
+      .MuiAlert-message {
+        ${textBody4002Lines(props)};
+        .MuiAlertTitle-root {
+          ${textBodyLarge500(props)};
+        }
+      }
+    `}
 `;
diff --git a/src/components/common/Alert/alert.tsx b/src/components/common/Alert/alert.tsx
@@ -1,39 +1,18 @@
-import {
-  AlertTitle,
-  Alert as MAlert,
-  AlertProps as MAlertProps,
-} from "@mui/material";
-import React, { ReactNode } from "react";
+import { AlertProps } from "@mui/material";
+import React, { forwardRef } from "react";
+import { BaseComponentProps } from "../../types";
+import { StyledAlert } from "./alert.styles";
 
-export interface AlertProps {
-  children?: ReactNode;
-  className?: string;
-  color?: MAlertProps["color"];
-  icon?: MAlertProps["icon"];
-  severity: MAlertProps["severity"];
-  title?: ReactNode;
-  variant?: MAlertProps["variant"];
-}
-
-export const Alert = ({
-  children,
-  className,
-  color,
-  icon,
-  severity,
-  title,
-  variant = "standard",
-}: AlertProps): JSX.Element => {
+export const Alert = forwardRef<
+  HTMLDivElement,
+  AlertProps & BaseComponentProps
+>(function Alert(
+  { children, className, ...props }: AlertProps & BaseComponentProps,
+  ref
+): JSX.Element {
   return (
-    <MAlert
-      className={className}
-      color={color}
-      icon={icon}
-      severity={severity}
-      variant={variant}
-    >
-      {title && <AlertTitle>{title}</AlertTitle>}
+    <StyledAlert className={className} ref={ref} {...props}>
       {children}
-    </MAlert>
+    </StyledAlert>
   );
-};
+});
diff --git a/src/components/common/Alert/components/AlertText/alertText.styles.ts b/src/components/common/Alert/components/AlertText/alertText.styles.ts
diff --git a/src/components/common/Paper/paper.styles.ts b/src/components/common/Paper/paper.styles.ts
@@ -7,20 +7,24 @@ import { Paper } from "./paper";
  * e.g. the entire width of mobile viewports.
  */
 export const FlatPaper = styled(Paper)`
-  align-self: stretch;
-  border-left: none;
-  border-radius: 0;
-  border-right: none;
-  box-shadow: none;
+  & {
+    align-self: stretch;
+    border-left: none;
+    border-radius: 0;
+    border-right: none;
+    box-shadow: none;
+  }
 `;
 
 /**
  * Rounded paper - typically used when contained within a parent container.
  * To use RoundedPaper, wrap the styled paper around a single child element e.g. "Section" or "Sections" component. TODO
  */
 export const RoundedPaper = styled(Paper)`
-  align-self: stretch;
-  border-radius: 8px;
+  & {
+    align-self: stretch;
+    border-radius: 8px;
+  }
 `;
 
 /* eslint-disable valid-jsdoc -- disable require param */
@@ -30,11 +34,13 @@ export const RoundedPaper = styled(Paper)`
  */
 /* eslint-enable valid-jsdoc -- disable require param */
 export const FluidPaper = styled(RoundedPaper)`
-  ${({ theme }) => theme.breakpoints.down(TABLET)} {
-    border-left: none;
-    border-radius: 0;
-    border-right: none;
-    box-shadow: none;
+  & {
+    ${({ theme }) => theme.breakpoints.down(TABLET)} {
+      border-left: none;
+      border-radius: 0;
+      border-right: none;
+      box-shadow: none;
+    }
   }
 `;
 

diff --git a/src/styles/common/constants/size.ts b/src/styles/common/constants/size.ts
@@ -0,0 +1,5 @@
+export enum SIZE {
+  LARGE = "large",
+  MEDIUM = "medium",
+  SMALL = "small",
+}
diff --git a/src/theme/components/muiAlert.ts b/src/theme/components/muiAlert.ts
@@ -3,10 +3,11 @@ import { ErrorIcon } from "../../components/common/CustomIcon/components/ErrorIc
 import { InfoIcon } from "../../components/common/CustomIcon/components/InfoIcon/infoIcon";
 import { SuccessIcon } from "../../components/common/CustomIcon/components/SuccessIcon/successIcon";
 import { WarningIcon } from "../../components/common/CustomIcon/components/WarningIcon/warningIcon";
+import { SIZE } from "../../styles/common/constants/size";
 import { COLOR, SEVERITY, VARIANT } from "../../styles/common/mui/alert";
 import { FONT_SIZE } from "../../styles/common/mui/icon";
 import { alpha32 } from "../common/palette";
-import { TEXT_BODY_400_2_LINES, TEXT_BODY_500 } from "../common/typography";
+import { TEXT_BODY_500 } from "../common/typography";
 
 export const MuiAlert = (theme: Theme): Components["MuiAlert"] => {
   return {
@@ -18,14 +19,15 @@ export const MuiAlert = (theme: Theme): Components["MuiAlert"] => {
         success: SuccessIcon({ fontSize: FONT_SIZE.SMALL }),
         warning: WarningIcon({ fontSize: FONT_SIZE.SMALL }),
       },
+      size: SIZE.MEDIUM,
     },
     styleOverrides: {
       icon: {
         opacity: 1,
         padding: 0,
       },
       message: {
-        ...theme.typography[TEXT_BODY_400_2_LINES],
+        ...theme.typography[TEXT_BODY_500], // default size - "medium"
         display: "grid",
         gap: 4,
         padding: 0,
@@ -36,26 +38,6 @@ export const MuiAlert = (theme: Theme): Components["MuiAlert"] => {
         color: theme.palette.ink.main,
         padding: 16,
         variants: [
-          {
-            props: { severity: "info", variant: "neutral" },
-            style: {
-              backgroundColor: theme.palette.smoke.light,
-              padding: 16,
-            },
-          }, // TODO(cc) remove this variant when all alerts are updated.
-          {
-            props: { variant: "banner" },
-            style: {
-              padding: 16,
-              // eslint-disable-next-line sort-keys -- disabling key order for readability
-              "& .MuiAlert-icon": {
-                padding: 0,
-              },
-              "& .MuiAlertTitle-root": {
-                ...theme.typography[TEXT_BODY_500],
-              },
-            },
-          }, // TODO(cc) remove this variant when all alerts are updated.
           {
             props: { severity: SEVERITY.ERROR },
             style: {
@@ -136,9 +118,6 @@ export const MuiAlert = (theme: Theme): Components["MuiAlert"] => {
           },
         ],
       },
-      standard: {
-        padding: 20,
-      },
     },
   };
 };
diff --git a/types/data-explorer-ui.d.ts b/types/data-explorer-ui.d.ts
@@ -25,21 +25,21 @@ import {
   CustomFeatureTableState,
 } from "../src/components/Table/features/entities";
 import { GridTrackSize } from "../src/config/entities";
+import { SIZE } from "../src/styles/common/constants/size";
 
 /**
  * Alert prop options.
  */
 declare module "@mui/material/Alert" {
+  interface AlertProps {
+    size?: SIZE.MEDIUM | SIZE.LARGE;
+  }
+
   interface AlertPropsColorOverrides {
     ink: true;
     primary: true;
     smoke: true;
   }
-
-  interface AlertPropsVariantOverrides {
-    banner: true; // Single line alert.
-    neutral: true;
-  }
 }
 
 /**