diff --git a/src/components/Export/components/ExportToTerra/components/TerraSetUpForm/components/NIHAccountExpiryWarning/nihAccountExpiryWarning.tsx b/src/components/Export/components/ExportToTerra/components/TerraSetUpForm/components/NIHAccountExpiryWarning/nihAccountExpiryWarning.tsx index aa674d40..1434ff86 100644 --- a/src/components/Export/components/ExportToTerra/components/TerraSetUpForm/components/NIHAccountExpiryWarning/nihAccountExpiryWarning.tsx +++ b/src/components/Export/components/ExportToTerra/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 ? ( - - {getExpiryMessage(linkExpired, linkExpireTime)}{" "} - - Please{" "} - {" "} - link. - - - } - variant="banner" - /> + + + {getExpiryMessage(linkExpired, linkExpireTime)}{" "} + + Please{" "} + {" "} + link. + + + ) : null; }; diff --git a/src/components/common/Alert/alert.stories.tsx b/src/components/common/Alert/alert.stories.tsx deleted file mode 100644 index a6f9f8e4..00000000 --- a/src/components/common/Alert/alert.stories.tsx +++ /dev/null @@ -1,41 +0,0 @@ -import { Meta, StoryObj } from "@storybook/react"; -import { Alert } from "./alert"; - -export default { - argTypes: { - children: { - control: "text", - description: "Inner text", - }, - color: { - description: "Color of alert", - }, - icon: { - control: "text", - description: "Top left icon. If provided will replace severity.", - }, - severity: { - description: "Top left predefined icon. Combine with color.", - }, - title: { - control: "text", - description: "Highlighted text", - }, - variant: { - description: "Type of the alert", - }, - }, - component: Alert, - title: "Components/Common/Alert", -} as Meta; - -type Story = StoryObj; - -export const AlertStory: Story = { - args: { - children: "Something certainly happened", - color: "warning", - severity: "warning", - title: "Ouch!", - }, -}; diff --git a/src/components/common/Alert/alert.styles.ts b/src/components/common/Alert/alert.styles.ts index c78f37a6..edf0af0b 100644 --- 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 index 22002c21..8cf18389 100644 --- 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 ( - - {title && {title}} + {children} - + ); -}; +}); diff --git a/src/components/common/Alert/components/AlertText/alertText.styles.ts b/src/components/common/Alert/components/AlertText/alertText.styles.ts deleted file mode 100644 index 30c316ec..00000000 --- a/src/components/common/Alert/components/AlertText/alertText.styles.ts +++ /dev/null @@ -1,20 +0,0 @@ -import styled from "@emotion/styled"; - -export const AlertText = styled.div` - ul { - padding-left: 24px; - margin: 8px 0; - - li { - margin: 4px 0; - - &:last-child { - margin-bottom: 0; - } - } - } - - *:last-child { - margin-bottom: 0; - } -`; diff --git a/src/components/common/Paper/paper.styles.ts b/src/components/common/Paper/paper.styles.ts index a2e8376d..445205de 100644 --- a/src/components/common/Paper/paper.styles.ts +++ b/src/components/common/Paper/paper.styles.ts @@ -7,11 +7,13 @@ 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; + } `; /** @@ -19,8 +21,10 @@ export const FlatPaper = styled(Paper)` * 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 new file mode 100644 index 00000000..bc7dd30d --- /dev/null +++ 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 index 7862740f..76653097 100644 --- 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,6 +19,7 @@ export const MuiAlert = (theme: Theme): Components["MuiAlert"] => { success: SuccessIcon({ fontSize: FONT_SIZE.SMALL }), warning: WarningIcon({ fontSize: FONT_SIZE.SMALL }), }, + size: SIZE.MEDIUM, }, styleOverrides: { icon: { @@ -25,7 +27,7 @@ export const MuiAlert = (theme: Theme): Components["MuiAlert"] => { 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 index c7722d05..d84b36ef 100644 --- 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; - } } /**