feat(organizations): add wrapped mantine alert component TASK-1380 (#…

…5422)

### 📣 Summary
Adds a wrapped mantine Alert component together with theming and
storybook entry.

### 👀 Preview steps
Compare the "demo" stories for `common/Alert` and
`commonDeprecated/InlineMessage` in storybook.

jsapp/js/components/common/alert.stories.tsx

@@ -0,0 +1,28 @@
+import Alert from './alert';
+
+export default {title: 'common/Alert'};
+
+export function Demo() {
+  const message =
+    'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam';
+  return (
+    <div>
+      <Alert type='default'>{message}</Alert>
+      <Alert iconName='alert' type='default'>
+        {message}
+      </Alert>
+      <Alert iconName='alert' type='error'>
+        {message}
+      </Alert>
+      <Alert iconName='alert' type='info'>
+        {message}
+      </Alert>
+      <Alert iconName='alert' type='success'>
+        {message}
+      </Alert>
+      <Alert iconName='alert' type='warning'>
+        {message}
+      </Alert>
+    </div>
+  );
+}

jsapp/js/components/common/alert.tsx

@@ -0,0 +1,24 @@
+import {Alert as AlertMantine} from '@mantine/core';
+import type {AlertProps as AlertPropsMantine} from '@mantine/core/lib/components';
+import Icon from './icon';
+import type {IconName} from 'jsapp/fonts/k-icons';
+import {forwardRef} from 'react';
+
+export type AlertType = 'default' | 'error' | 'success' | 'warning' | 'info';
+
+// We only use the Mantine variant 'light', so we omit the prop here.
+// We also remove the color prop in favor of a custom 'type' prop, since we are setting
+// the component colors by hand instead of using Mantine's color handling 
+export interface AlertProps extends Omit<AlertPropsMantine, 'icon' | 'variant' | 'color'> {
+  iconName?: IconName;
+  type: AlertType;
+}
+
+const Alert = forwardRef<HTMLDivElement, AlertProps>(
+  ({iconName, ...props}, ref) => {
+    const icon = iconName ? <Icon name={iconName} size='m' /> : null;
+    return <AlertMantine {...props} icon={icon} ref={ref} />;
+  }
+);
+
+export default Alert;

jsapp/js/components/common/inlineMessage.stories.tsx

@@ -3,7 +3,7 @@ import {ComponentStory, ComponentMeta} from '@storybook/react';
 import InlineMessage from 'js/components/common/inlineMessage';
 
 export default {
-  title: 'common/Inline Message',
+  title: 'commonDeprecated/Inline Message',
   component: InlineMessage,
   argTypes: {},
 } as ComponentMeta<typeof InlineMessage>;
@@ -18,3 +18,17 @@ Primary.args = {
   message:
     'If debugging is the process of removing software bugs, then programming must be the process of putting them in.',
 };
+
+export function Demo() {
+  const message = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam"
+  return (
+    <div>
+      <InlineMessage type='default' message={message}/>
+      <InlineMessage icon='alert' type='default' message={message}/>
+      <InlineMessage icon='alert' type='error' message={message}/>
+      <InlineMessage icon='alert' type='info' message={message}/>
+      <InlineMessage icon='alert' type='success' message={message}/>
+      <InlineMessage icon='alert' type='warning' message={message}/>
+    </div>
+  );
+}

jsapp/js/theme/kobo/Alert.module.css

@@ -0,0 +1,16 @@
+.root {
+  padding: 12px 24px;
+
+  &:not(:last-child) {
+    margin-bottom: 24px;
+  }
+
+  &:not(:first-child) {
+    margin-top: 24px;
+  }
+}
+
+.message {
+  font-size: var(--mantine-font-size-md);
+  color: var(--mantine-color-gray-1);
+}

jsapp/js/theme/kobo/Alert.ts

@@ -0,0 +1,39 @@
+import {Alert} from '@mantine/core';
+import classes from './Alert.module.css';
+import {AlertType} from 'jsapp/js/components/common/alert';
+
+declare module '@mantine/core' {
+  export interface AlertProps {
+    type: AlertType;
+  }
+}
+
+export const AlertThemeKobo = Alert.extend({
+  classNames: classes,
+  vars: (theme, props) => {
+    return {
+      root: {
+        ...(props.type === 'default' && {
+          '--alert-bg': theme.colors.gray[7],
+          '--alert-color': theme.colors.gray[4],
+        }),
+        ...(props.type === 'error' && {
+          '--alert-bg': theme.colors.red[9],
+          '--alert-color': theme.colors.red[7],
+        }),
+        ...(props.type === 'info' && {
+          '--alert-bg': theme.colors.blue[9],
+          '--alert-color': theme.colors.blue[6],
+        }),
+        ...(props.type === 'success' && {
+          '--alert-bg': theme.colors.teal[6],
+          '--alert-color': theme.colors.teal[4],
+        }),
+        ...(props.type === 'warning' && {
+          '--alert-bg': theme.colors.amber[7],
+          '--alert-color': theme.colors.amber[6],
+        }),
+      },
+    };
+  },
+});

jsapp/js/theme/kobo/index.ts

@@ -4,6 +4,7 @@ import {ButtonThemeKobo} from './Button';
 import {TableThemeKobo} from './Table';
 import {TooltipThemeKobo} from './Tooltip';
 import {MenuThemeKobo} from './Menu';
+import {AlertThemeKobo} from './Alert';
 
 export const themeKobo = createTheme({
   primaryColor: 'blue',
@@ -56,6 +57,18 @@ export const themeKobo = createTheme({
       'hsl(0, 100%, 90%)', // #ffcccc
       'hsl(0, 100%, 96%)', // #ffe9e9
     ],
+    amber: [
+      '#000',
+      '#000',
+      '#000',
+      '#000',
+      '#000',
+      'hsl(30, 100%, 25%)', // #803f00 ($kobo-dark-amber)
+      'hsl(29, 100%, 75%)', // #ffbe80 ($kobo-amber)
+      'hsl(30, 100%, 90%)', // #ffe8cc ($kobo-light-amber)
+      '#000',
+      '#000',
+    ]
   },
 
   // Typography
@@ -89,6 +102,7 @@ export const themeKobo = createTheme({
 
   components: {
     ActionIcon: ActionIconThemeKobo,
+    Alert: AlertThemeKobo,
     Button: ButtonThemeKobo,
     Menu: MenuThemeKobo,
     Tooltip: TooltipThemeKobo,