refactor(odyssey-react-mui): update all Alert styles to match rebrand

okta · Jun 8, 2023 · 37885b8 · 37885b8
1 parent 553d3bc
commit 37885b8
Show file tree

Hide file tree

Showing 4 changed files with 88 additions and 43 deletions.
diff --git a/packages/odyssey-design-tokens/src/typography.json b/packages/odyssey-design-tokens/src/typography.json
@@ -21,7 +21,6 @@
         "value": "{hue.neutral.300.value}"
       },
       "action": {
-        "comment": "Branded text color, primarily used within button",
         "value": "{palette.primary.text.value}"
       },
       "danger": {

diff --git a/packages/odyssey-react-mui/src/Banner.tsx b/packages/odyssey-react-mui/src/Banner.tsx
@@ -12,7 +12,7 @@
 
 import { AlertColor, AlertProps } from "@mui/material";
 import { memo } from "react";
-import { Alert, Link, ScreenReaderText } from "./";
+import { Alert, AlertTitle, Link, ScreenReaderText } from "./";
 import { useTranslation } from "react-i18next";
 
 export type BannerProps = {
@@ -60,7 +60,7 @@ const Banner = ({
   return (
     <Alert onClose={onClose} role={role} severity={severity} variant="banner">
       <ScreenReaderText>{t(`severity.${severity}`)}:</ScreenReaderText>
-      {text}
+      <AlertTitle>{text}</AlertTitle>
       {linkUrl && (
         <Link href={linkUrl} variant="monochrome">
           {linkText}

diff --git a/packages/odyssey-react-mui/src/theme/components.tsx b/packages/odyssey-react-mui/src/theme/components.tsx
@@ -12,7 +12,7 @@
 
 import { ThemeOptions } from "@mui/material";
 import type {} from "@mui/lab/themeAugmentation";
-//import radioClasses from "@mui/material";
+import { alertTitleClasses } from "@mui/material/AlertTitle";
 import { buttonClasses } from "@mui/material/Button";
 import { chipClasses } from "@mui/material/Chip";
 import { dialogActionsClasses } from "@mui/material/DialogActions";
@@ -59,43 +59,70 @@ export const components = (
       },
       styleOverrides: {
         root: ({ ownerState, theme }) => ({
-          padding: theme.spacing(4),
-          gap: theme.spacing(4),
+          padding: odysseyTokens.Spacing4,
+          gap: odysseyTokens.Spacing4,
           color: odysseyTokens.TypographyColorBody,
-          ...(ownerState.severity && {
-            backgroundColor: theme.palette[ownerState.severity].lighter,
-            borderColor: theme.palette[ownerState.severity].light,
+          border: 0,
+          ...(ownerState.severity === "success" && {
+            backgroundColor: odysseyTokens.HueGreen100,
+
+            [`& .${alertTitleClasses.root}`]: {
+              color: odysseyTokens.PaletteSuccessHeading,
+            },
+          }),
+          ...(ownerState.severity === "info" && {
+            backgroundColor: odysseyTokens.HueBlue100,
+
+            [`& .${alertTitleClasses.root}`]: {
+              color: odysseyTokens.PalettePrimaryHeading,
+            },
+          }),
+          ...(ownerState.severity === "error" && {
+            backgroundColor: odysseyTokens.HueRed100,
+
+            [`& .${alertTitleClasses.root}`]: {
+              color: odysseyTokens.PaletteDangerHeading,
+            },
+          }),
+          ...(ownerState.severity === "warning" && {
+            backgroundColor: odysseyTokens.HueYellow100,
+
+            [`& .${alertTitleClasses.root}`]: {
+              color: odysseyTokens.PaletteWarningHeading,
+            },
           }),
           ...(ownerState.variant === "banner" && {
             position: "relative",
             justifyContent: "center",
             alignItems: "center",
-            borderWidth: 0,
-            borderRadius: 0,
           }),
           ...(ownerState.variant === "infobox" && {
-            borderStyle: theme.mixins.borderStyle,
-            borderWidth: theme.mixins.borderWidth,
-            borderRadius: odysseyTokens.BorderRadiusMain,
+            borderRadius: odysseyTokens.BorderRadiusOuter,
             "&:not(:last-child)": {
               marginBottom: theme.spacing(4),
             },
+
+            [`& .${alertTitleClasses.root}`]: {
+              marginBlockEnd: odysseyTokens.Spacing2,
+
+              [`&:last-child`]: {
+                marginBlockEnd: 0,
+              },
+            },
           }),
           ...(ownerState.variant === "toast" && {
             maxWidth: theme.mixins.maxWidth,
-            borderStyle: theme.mixins.borderStyle,
-            borderWidth: theme.mixins.borderWidth,
-            borderRadius: theme.mixins.borderRadius,
+            borderRadius: odysseyTokens.BorderRadiusOuter,
             position: "relative",
             alignItems: "center",
           }),
         }),
-        action: ({ ownerState, theme }) => ({
+        action: ({ ownerState }) => ({
           ...(ownerState.variant === "banner" && {
             padding: 0,
             marginInlineEnd: 0,
             top: "50%",
-            right: theme.spacing(4),
+            right: odysseyTokens.Spacing2,
             position: "absolute",
             transform: "translateY(-50%)",
           }),
@@ -108,7 +135,7 @@ export const components = (
         icon: ({ ownerState, theme }) => ({
           marginInlineEnd: 0,
           padding: 0,
-          fontSize: "inherit",
+          height: `calc(${odysseyTokens.TypographySizeHeading6} * ${odysseyTokens.TypographyLineHeightHeading6})`,
           opacity: 1,
           ...(ownerState.severity && {
             color: theme.palette[ownerState.severity].main,
@@ -118,7 +145,8 @@ export const components = (
           }),
 
           [`& .${svgIconClasses.root}`]: {
-            fontSize: "1.429rem",
+            alignSelf: "center",
+            fontSize: odysseyTokens.TypographySizeHeading6,
           },
         }),
         message: ({ ownerState, theme }) => ({
@@ -138,17 +166,13 @@ export const components = (
     },
     MuiAlertTitle: {
       styleOverrides: {
-        root: ({ theme }) => ({
-          marginTop: 0,
-          marginBottom: theme.spacing(1),
-          lineHeight: theme.typography.h6.lineHeight,
-          fontSize: theme.typography.h6.fontSize,
-          fontWeight: theme.typography.fontWeightBold,
-
-          "&:last-child": {
-            marginBlockEnd: 0,
-          },
-        }),
+        root: {
+          marginBlock: 0,
+          lineHeight: odysseyTokens.TypographyLineHeightHeading6,
+          fontSize: odysseyTokens.TypographySizeHeading6,
+          fontWeight: odysseyTokens.TypographyWeightHeading,
+          fontFamily: odysseyTokens.TypographyFamilyHeading,
+        },
       },
     },
     MuiAutocomplete: {
@@ -2157,9 +2181,13 @@ export const components = (
         },
       },
       styleOverrides: {
-        paragraph: ({ theme }) => ({
-          marginBottom: theme.spacing(4),
-        }),
+        paragraph: {
+          marginBlockEnd: odysseyTokens.Spacing4,
+
+          [`&:last-child`]: {
+            marginBlockEnd: 0,
+          },
+        },
       },
     },
   };

diff --git a/packages/odyssey-storybook/src/components/odyssey-mui/Infobox/Infobox.stories.tsx b/packages/odyssey-storybook/src/components/odyssey-mui/Infobox/Infobox.stories.tsx
@@ -39,8 +39,11 @@ const storybookMeta: Meta<InfoboxProps> = {
     },
   },
   args: {
-    children:
-      "You are currently logged in from Moonbase Alpha-6, located on Luna.",
+    children: (
+      <Typography paragraph>
+        You're signed in from Moonbase Alpha-6, located on Luna.
+      </Typography>
+    ),
     severity: "info",
   },
   decorators: [MuiThemeDecorator],
@@ -50,15 +53,22 @@ export default storybookMeta;
 
 export const Info: StoryObj<InfoboxProps> = {
   args: {
-    children: "You're signed in from Moonbase Alpha-6, located on Luna.",
+    children: (
+      <Typography paragraph>
+        You're signed in from Moonbase Alpha-6, located on Luna.
+      </Typography>
+    ),
     severity: "info",
   },
 };
 
 export const Error: StoryObj<InfoboxProps> = {
   args: {
-    children:
-      "Reconfigure the fuel mixture ratios and perform safety checks again.",
+    children: (
+      <Typography paragraph>
+        Reconfigure the fuel mixture ratios and perform safety checks again.
+      </Typography>
+    ),
     role: "alert",
     severity: "error",
     title: "Safety checks failed",
@@ -67,8 +77,12 @@ export const Error: StoryObj<InfoboxProps> = {
 
 export const Warning: StoryObj<InfoboxProps> = {
   args: {
-    children:
-      "Complete all safety checks before requesting approval to launch your mission.",
+    children: (
+      <Typography paragraph>
+        Complete all safety checks before requesting approval to launch your
+        mission.
+      </Typography>
+    ),
     role: "status",
     severity: "warning",
     title: "Safety checks incomplete",
@@ -77,7 +91,11 @@ export const Warning: StoryObj<InfoboxProps> = {
 
 export const Success: StoryObj<InfoboxProps> = {
   args: {
-    children: "Safety checks are complete. Your mission is ready for liftoff.",
+    children: (
+      <Typography paragraph>
+        Safety checks are complete. Your mission is ready for liftoff.
+      </Typography>
+    ),
     role: "status",
     severity: "success",
     title: "Approved for launch",