diff --git a/package-lock.json b/package-lock.json index 2707a741..ea7a1636 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,7 +9,7 @@ "version": "6.3.0", "license": "ISC", "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", @@ -2153,9 +2153,9 @@ } }, "node_modules/@balena/design-tokens": { - "version": "0.8.0", - "resolved": "https://registry.npmjs.org/@balena/design-tokens/-/design-tokens-0.8.0.tgz", - "integrity": "sha512-QUYjdjR1ahTN98NpH3KJ00gd7u42v88IdkIbpjqTY8QaMZVWgdF5N0WArya91cV581zvKw+Lv7Y6JHg9c6wSPw==" + "version": "0.9.0", + "resolved": "https://registry.npmjs.org/@balena/design-tokens/-/design-tokens-0.9.0.tgz", + "integrity": "sha512-TRTxl5CZbbuKdJ/eLLKuL1FC1CmUQghKkk/g8/aHD2RU4HRUHQwr5ZJGL3/oGTXfPg3VFfp9cu7g2tHIFI2jKQ==" }, "node_modules/@balena/lint": { "version": "6.2.2", diff --git a/package.json b/package.json index 23522a57..b9257bfa 100644 --- 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 index f26f4cca..96b2a7e4 100644 --- a/src/components/DownloadImageDialog/index.tsx +++ b/src/components/DownloadImageDialog/index.tsx @@ -454,7 +454,7 @@ export const DownloadImageDialog: React.FC = ({ ) : ( <> {isEmpty(osVersions) && ( - + No OS versions available for download )} diff --git a/src/docs/30_mui_components/Alert.stories.tsx b/src/docs/30_mui_components/Alert.stories.tsx index dd102051..b5dbec07 100644 --- a/src/docs/30_mui_components/Alert.stories.tsx +++ b/src/docs/30_mui_components/Alert.stories.tsx @@ -10,12 +10,12 @@ const meta = { export default meta; type Story = StoryObj; -export const Default: Story = { +export const Neutral: Story = { args: { children: ( <> - We no longer maintain versions of balenaOS for this device type. For - more information click here. + We no longer maintain versions of balenaOS for this device type.{' '} + Learn more. ), }, @@ -23,28 +23,28 @@ export const Default: Story = { 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 index fd9f402b..0f54c386 100644 --- 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: , + info: , + success: , + warning: , + error: , + }, + }, + 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: {