feat(organizations): add theming/story for Mantine Modal TASK-1423

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

@@ -0,0 +1,83 @@
+import type {ModalProps} from '@mantine/core';
+import {Button, Center, Modal, Stack, Text, Group} from '@mantine/core';
+import type {Meta, StoryObj} from '@storybook/react';
+import {useArgs} from '@storybook/preview-api';
+import {useDisclosure} from '@mantine/hooks';
+
+const RenderModal = ({...args}: ModalProps) => {
+  const [{opened}, updateArgs] = useArgs();
+
+  return (
+    <Center w={400} h={80}>
+      <Button onClick={() => updateArgs({opened: !opened})}>Open modal</Button>
+      <Modal {...args} onClose={() => updateArgs({opened: !opened})}>
+        <Stack>
+          <Text p='md'>
+            Example modal content. Press esc, click outside or close button to
+            close.
+          </Text>
+          <Group justify='flex-end'>
+            <Button variant='danger'>Won&apos;t close</Button>
+            <Button onClick={() => updateArgs({opened: false})}>Close</Button>
+          </Group>
+        </Stack>
+      </Modal>
+    </Center>
+  );
+};
+
+/**
+ * Mantine [Modal](https://mantine.dev/core/modal/) component stories.
+ */
+const meta: Meta<typeof Modal> = {
+  title: 'Common/Modal',
+  component: Modal,
+  render: RenderModal,
+  argTypes: {
+    opened: {
+      description: 'Modal opened state',
+      type: 'boolean',
+    },
+    size: {
+      description: 'Modal size',
+      type: 'string',
+      control: {
+        type: 'select',
+      },
+      options: ['auto', 'xs', 'sm', 'md', 'lg', 'xl', '50%', '75%', '100%'],
+    },
+    fullScreen: {
+      description: 'Modal fullscreen state',
+      type: 'boolean',
+    },
+    centered: {
+      description: 'Center modal content',
+      type: 'boolean',
+    },
+    withCloseButton: {
+      description: 'Render close button',
+      type: 'boolean',
+    },
+    title: {
+      description: 'Modal title',
+      type: 'string',
+    },
+  },
+  args: {
+    opened: false,
+    closeOnClickOutside: true,
+    withCloseButton: true,
+    title: 'Modal title',
+    centered: false,
+    size: 'md',
+    fullScreen: false,
+  },
+};
+
+type Story = StoryObj<typeof Modal>;
+
+export const Basic: Story = {
+  args: {},
+};
+
+export default meta;

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

@@ -0,0 +1,15 @@
+.close {
+  color: var(--mantine-color-gray-4);
+  background-color: transparent;
+
+  &:hover {
+    color: var(--mantine-color-gray-2);
+    background-color: transparent;
+  }
+}
+
+.title {
+  font-size: var(--mantine-font-size-xl);
+  font-weight: var(--mantine-heading-font-weight);
+  color: var(--mantine-color-gray-0);
+}

jsapp/js/theme/kobo/Modal.tsx

@@ -0,0 +1,18 @@
+import {Modal} from '@mantine/core';
+import Icon from 'jsapp/js/components/common/icon';
+import classes from './Modal.module.css';
+
+export const ModalThemeKobo = Modal.extend({
+  defaultProps: {
+    closeButtonProps: {
+      icon: <Icon name='close' />,
+    },
+    overlayProps: {
+      backgroundOpacity: 0.5,
+      color: 'var(--mantine-color-blue-9)',
+      zIndex: 3000,
+    },
+    zIndex: 4000,
+  },
+  classNames: classes,
+});

jsapp/js/theme/kobo/index.ts

@@ -7,6 +7,7 @@ import {MenuThemeKobo} from './Menu';
 import {AlertThemeKobo} from './Alert';
 import {SelectThemeKobo} from './Select';
 import {LoaderThemeKobo} from './Loader';
+import {ModalThemeKobo} from './Modal';
 
 export const themeKobo = createTheme({
   primaryColor: 'blue',
@@ -110,5 +111,6 @@ export const themeKobo = createTheme({
     Table: TableThemeKobo,
     Select: SelectThemeKobo,
     Loader: LoaderThemeKobo,
+    Modal: ModalThemeKobo,
   },
 });