@verifiedinc-public/shared-ui-elements 1.3.0 → 1.3.1

package/dist/styles/index.d.ts

@@ -1,2 +1,3 @@
 export * from './colors';
 export * from './theme';
+export * from './shadows';

package/dist/styles/shadows.d.ts

@@ -0,0 +1,3 @@
+export declare const shadows: {
+    bottomSheet: string;
+};

package/dist/styles/theme.d.ts

@@ -1,21 +1,34 @@
+declare module '@mui/material/Button' {
+    interface ButtonPropsColorOverrides {
+        neutralContrast: true;
+        warningContrast: true;
+        infoContrast: true;
+    }
+}
 declare module '@mui/material/styles' {
     interface Palette {
         neutral: Palette['primary'];
         neutralContrast: Palette['primary'];
+        warningContrast: Palette['primary'];
+        infoContrast: Palette['primary'];
     }
     interface PaletteOptions {
         neutral: PaletteOptions['primary'];
         neutralContrast: PaletteOptions['primary'];
+        warningContrast: PaletteOptions['primary'];
+        infoContrast: PaletteOptions['primary'];
     }
 }
 declare module '@mui/material' {
     interface ButtonPropsColorOverrides {
         neutral: true;
         neutralContrast: true;
+        warningContrast: true;
     }
     interface SvgIconPropsColorOverrides {
         neutral: true;
         neutralContrast: true;
+        warningContrast: true;
     }
 }
 interface ThemeOptions {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@verifiedinc-public/shared-ui-elements",
-  "version": "1.3.0",
+  "version": "1.3.1",
   "description": "A set of UI components, utilities that is shareable with the core apps.",
   "private": false,
   "keywords": [],

package/src/styles/index.ts

@@ -1,2 +1,3 @@
 export * from './colors';
 export * from './theme';
+export * from './shadows';

package/src/styles/shadows.ts

@@ -0,0 +1,6 @@
+const bottomSheet =
+  '0px -2px 4px -1px rgba(0,0,0,0.2), 0px -4px 5px 0px rgba(0,0,0,0.14), 0px -1px 10px 0px rgba(0,0,0,0.12)';
+
+export const shadows = {
+  bottomSheet,
+};

package/src/styles/theme.ts

@@ -2,16 +2,28 @@ import { createTheme } from '@mui/material';
 import { colors } from './colors';
 import { typography } from './typography';
 
+declare module '@mui/material/Button' {
+  interface ButtonPropsColorOverrides {
+    neutralContrast: true;
+    warningContrast: true;
+    infoContrast: true;
+  }
+}
+
 declare module '@mui/material/styles' {
   // custom palette
   interface Palette {
     neutral: Palette['primary'];
     neutralContrast: Palette['primary'];
+    warningContrast: Palette['primary'];
+    infoContrast: Palette['primary'];
   }
 
   interface PaletteOptions {
     neutral: PaletteOptions['primary'];
     neutralContrast: PaletteOptions['primary'];
+    warningContrast: PaletteOptions['primary'];
+    infoContrast: PaletteOptions['primary'];
   }
 }
 
@@ -20,10 +32,12 @@ declare module '@mui/material' {
   interface ButtonPropsColorOverrides {
     neutral: true;
     neutralContrast: true;
+    warningContrast: true;
   }
   interface SvgIconPropsColorOverrides {
     neutral: true;
     neutralContrast: true;
+    warningContrast: true;
   }
 }
 
@@ -96,8 +110,43 @@ export const theme = ({ primaryFontFace }: ThemeOptions) =>
         light: colors.lightGreyContrast,
         dark: colors.darkGreyContrast,
       },
+      // We can register custom color to our palette with the augmentColor method.
+      warningContrast: {
+        main: colors.warningContrast,
+      },
+      infoContrast: {
+        main: colors.infoContrast,
+      },
     },
     components: {
+      MuiAlert: {
+        styleOverrides: {
+          root: {
+            maxWidth: '339px',
+          },
+          action: {
+            // the action wrapper is pretty narrow (only fits about 5 characters of text) and the default is to wrap the text, which looks really bad
+            overflowWrap: 'normal',
+            // we want the action text, element, etc to be vertically centered if there are multiple lines of text in the alert body
+            display: 'flex',
+            alignItems: 'center',
+            padding: '8px 0',
+            marginRight: 0,
+            '& button, & a': {
+              lineHeight: '0',
+            },
+          },
+        },
+      },
+      MuiAlertTitle: {
+        styleOverrides: {
+          root: {
+            ...typography.body2,
+            fontSize: '1.1rem',
+            fontWeight: 700,
+          },
+        },
+      },
       MuiListItemIcon: {
         styleOverrides: {
           root: {
@@ -177,21 +226,6 @@ export const theme = ({ primaryFontFace }: ThemeOptions) =>
           },
         },
       },
-      MuiAlert: {
-        styleOverrides: {
-          root: {
-            maxWidth: '339px',
-          },
-          action: {
-            padding: '8px 0',
-            marginRight: 0,
-            alignItems: 'center',
-            '& button, & a': {
-              lineHeight: '0',
-            },
-          },
-        },
-      },
       MuiRadio: {
         styleOverrides: {
           root: {