Merge pull request #108 from balena-io-modules/callout

Add callout variant and improve Alerts
balena-io-modules · Jul 5, 2024 · 4a693c2 · 4a693c2
2 parents 958ab84 + 0cf6345
commit 4a693c2
Show file tree

Hide file tree

Showing 5 changed files with 178 additions and 38 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -10,7 +10,7 @@
     "README.md"
   ],
   "dependencies": {
-    "@balena/design-tokens": "^0.8.0",
+    "@balena/design-tokens": "^0.9.0",
     "@emotion/react": "^11.10.6",
     "@emotion/styled": "^11.10.6",
     "@fortawesome/free-solid-svg-icons": "^6.5.1",

diff --git a/src/components/DownloadImageDialog/index.tsx b/src/components/DownloadImageDialog/index.tsx
@@ -454,7 +454,7 @@ export const DownloadImageDialog: React.FC<DownloadImageDialogProps> = ({
 						) : (
 							<>
 								{isEmpty(osVersions) && (
-									<Alert color="warning">
+									<Alert severity="warning">
 										No OS versions available for download
 									</Alert>
 								)}

diff --git a/src/docs/30_mui_components/Alert.stories.tsx b/src/docs/30_mui_components/Alert.stories.tsx
@@ -10,41 +10,41 @@ const meta = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-export const Default: Story = {
+export const Neutral: Story = {
 	args: {
 		children: (
 			<>
-				We no longer maintain versions of balenaOS for this device type. For
-				more information <a href="#">click here</a>.
+				We no longer maintain versions of balenaOS for this device type.{' '}
+				<a href="#">Learn more</a>.
 			</>
 		),
 	},
 };
 
 export const Info: Story = {
 	args: {
-		...Default.args,
+		...Neutral.args,
 		severity: 'info',
 	},
 };
 
 export const Success: Story = {
 	args: {
-		...Default.args,
+		...Neutral.args,
 		severity: 'success',
 	},
 };
 
 export const Warning: Story = {
 	args: {
-		...Default.args,
+		...Neutral.args,
 		severity: 'warning',
 	},
 };
 
 export const Danger: Story = {
 	args: {
-		...Default.args,
+		...Neutral.args,
 		severity: 'error',
 	},
 };
@@ -57,15 +57,49 @@ export const WithTitle: Story = {
 				This is an info alert with title.
 			</>
 		),
-		severity: 'info',
 	},
 };
 
 export const WithCloseIcon: Story = {
 	args: {
-		...Default.args,
+		...Neutral.args,
 		onClose() {
 			console.log('Close alert');
 		},
 	},
 };
+
+export const CalloutNeutral: Story = {
+	args: {
+		...Neutral.args,
+		variant: 'callout',
+	},
+};
+
+export const CalloutInfo: Story = {
+	args: {
+		...Info.args,
+		variant: 'callout',
+	},
+};
+
+export const CalloutSuccess: Story = {
+	args: {
+		...Success.args,
+		variant: 'callout',
+	},
+};
+
+export const CalloutWarning: Story = {
+	args: {
+		...Warning.args,
+		variant: 'callout',
+	},
+};
+
+export const CalloutError: Story = {
+	args: {
+		...Danger.args,
+		variant: 'callout',
+	},
+};
diff --git a/src/theme.tsx b/src/theme.tsx
@@ -8,6 +8,13 @@ import {
 import type {} from '@mui/x-data-grid/themeAugmentation';
 import { TypographyStyleOptions } from '@mui/material/styles/createTypography';
 import { color, typography } from '@balena/design-tokens';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import {
+	faCheckCircle,
+	faExclamationCircle,
+	faInfoCircle,
+	faWarning,
+} from '@fortawesome/free-solid-svg-icons';
 
 type CustomPaletteColor = PaletteColor & { xlight?: string };
 type CustomPaletteColorOptions = PaletteColorOptions & {
@@ -98,6 +105,16 @@ declare module '@mui/material/Typography' {
 	}
 }
 
+declare module '@mui/material/Alert' {
+	interface AlertPropsColorOverrides {
+		neutral: true;
+	}
+
+	interface AlertPropsVariantOverrides {
+		callout: true;
+	}
+}
+
 declare module '@mui/material/Button' {
 	interface ButtonPropsColorOverrides {
 		customBlue: true;
@@ -401,8 +418,108 @@ export const theme = createTheme({
 	spacing: [0, 4, 8, 16, 32, 64, 128],
 	components: {
 		MuiAlert: {
+			defaultProps: {
+				severity: 'neutral',
+				iconMapping: {
+					neutral: <FontAwesomeIcon icon={faInfoCircle} />,
+					info: <FontAwesomeIcon icon={faInfoCircle} />,
+					success: <FontAwesomeIcon icon={faCheckCircle} />,
+					warning: <FontAwesomeIcon icon={faWarning} />,
+					error: <FontAwesomeIcon icon={faExclamationCircle} />,
+				},
+			},
+			variants: [
+				{
+					props: { severity: 'neutral' },
+					style: {
+						borderColor: color.border.subtle.value,
+						'.MuiAlert-icon': {
+							color: color.icon.value,
+						},
+					},
+				},
+				{
+					props: { severity: 'info' },
+					style: {
+						borderColor: color.border.info.value,
+						'.MuiAlert-icon': {
+							color: color.icon.info.value,
+						},
+					},
+				},
+				{
+					props: { severity: 'success' },
+					style: {
+						borderColor: color.border.success.value,
+						'.MuiAlert-icon': {
+							color: color.icon.success.value,
+						},
+					},
+				},
+				{
+					props: { severity: 'warning' },
+					style: {
+						borderColor: color.border.warning.value,
+						'.MuiAlert-icon': {
+							color: color.icon.warning.value,
+						},
+					},
+				},
+				{
+					props: { severity: 'error' },
+					style: {
+						borderColor: color.border.danger.value,
+						'.MuiAlert-icon': {
+							color: color.icon.danger.value,
+						},
+					},
+				},
+				{
+					props: { variant: 'standard', severity: 'neutral' },
+					style: {
+						backgroundColor: color.bg.value,
+						color: color.text.info.value,
+					},
+				},
+				{
+					props: { variant: 'standard', severity: 'info' },
+					style: {
+						backgroundColor: color.bg.info.value,
+						color: color.text.info.value,
+					},
+				},
+				{
+					props: { variant: 'standard', severity: 'success' },
+					style: {
+						backgroundColor: color.bg.success.value,
+						color: color.text.success.value,
+					},
+				},
+				{
+					props: { variant: 'standard', severity: 'warning' },
+					style: {
+						backgroundColor: color.bg.warning.value,
+						color: color.text.warning.value,
+					},
+				},
+				{
+					props: { variant: 'standard', severity: 'error' },
+					style: {
+						backgroundColor: color.bg.danger.value,
+						color: color.text.danger.value,
+					},
+				},
+				{
+					props: { variant: 'callout' },
+					style: {
+						border: `1px solid ${color.border.subtle.value}`,
+						backgroundColor: 'transparent',
+					},
+				},
+			],
 			styleOverrides: {
-				root: {
+				root: ({ theme }) => ({
+					padding: theme.spacing(3),
 					fontSize: '1rem',
 					border: 'solid 1px',
 					a: {
@@ -417,30 +534,19 @@ export const theme = createTheme({
 					'.MuiPaper-rounded': {
 						borderRadius: '10px',
 					},
+				}),
+				message: {
+					padding: 0,
 				},
-				standardInfo: {
-					borderColor: color.border.info.value,
-					backgroundColor: color.bg.info.value,
-					color: color.text.info.value,
-				},
-				standardSuccess: {
-					borderColor: color.border.success.value,
-					backgroundColor: color.bg.success.value,
-					color: color.text.success.value,
-				},
-				standardWarning: {
-					borderColor: color.border.warning.value,
-					backgroundColor: color.bg.warning.value,
-					color: color.text.warning.value,
-				},
-				standardError: {
-					borderColor: color.border.danger.value,
-					backgroundColor: color.bg.danger.value,
-					color: color.text.danger.value,
-				},
-				action: {
+				action: ({ theme }) => ({
+					marginTop: `-${theme.spacing(2)}`,
+					marginBottom: `-${theme.spacing(2)}`,
 					paddingTop: 0,
-				},
+				}),
+				icon: ({ theme }) => ({
+					padding: theme.spacing('3px', 0, 0),
+					fontSize: '1rem',
+				}),
 			},
 		},
 		MuiAlertTitle: {