Add variants

kobotoolbox · Jan 21, 2025 · b9b0953 · b9b0953
1 parent 7065195
commit b9b0953
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 12 deletions.
diff --git a/jsapp/js/components/common/loader.stories.tsx b/jsapp/js/components/common/loader.stories.tsx
@@ -15,23 +15,32 @@ const meta: Meta<typeof Loader> = {
     ),
   ],
   argTypes: {
-    size: {
-      description: 'Select size',
-      options: ['sm', 'md', 'lg'],
+    type: {
+      description: 'Select loader type',
+      options: ['regular', 'big'],
       control: 'radio',
     },
   },
-  args: {
-    size: 'md',
-  },
 };
 
 type Story = StoryObj<typeof Loader>;
 
 /**
- * Basic usage of Loader component
+ * Regular variant
  */
-export const Basic: Story = {};
+export const Regular: Story = {
+  args: {
+    type: 'regular',
+  },
+};
 
+/**
+ * Big variant
+ */
+export const Big: Story = {
+  args: {
+    type: 'big',
+  },
+};
 
 export default meta;
diff --git a/jsapp/js/components/common/loadingOverlay.stories.tsx b/jsapp/js/components/common/loadingOverlay.stories.tsx
@@ -64,4 +64,14 @@ export const NotVisible: Story = {
   },
 };
 
+/**
+ * Using 'big' variant
+ */
+export const Big: Story = {
+  args: {
+    visible: true,
+    loaderProps: {type: 'big'},
+  },
+};
+
 export default meta;
diff --git a/jsapp/js/theme/kobo/Loader.tsx b/jsapp/js/theme/kobo/Loader.tsx
@@ -3,15 +3,27 @@ import {Box, Loader} from '@mantine/core';
 import LoadingSpinner from 'jsapp/js/components/common/loadingSpinner';
 import {forwardRef} from 'react';
 
-const KoboLoader: MantineLoaderComponent = forwardRef(({...others}, ref) => (
+const KoboLoaderRegular: MantineLoaderComponent = forwardRef(
+  ({...others}, ref) => (
+    <Box component='span' {...others} ref={ref}>
+      <LoadingSpinner message={false} />
+    </Box>
+  )
+);
+
+const KoboLoaderBig: MantineLoaderComponent = forwardRef(({...others}, ref) => (
   <Box component='span' {...others} ref={ref}>
-    <LoadingSpinner message={false} />
+    <LoadingSpinner message={false} type='big' />
   </Box>
 ));
 
 export const LoaderThemeKobo = Loader.extend({
   defaultProps: {
-    loaders: {...Loader.defaultLoaders, custom: KoboLoader},
-    type: 'custom',
+    loaders: {
+      ...Loader.defaultLoaders,
+      regular: KoboLoaderRegular,
+      big: KoboLoaderBig,
+    },
+    type: 'regular',
   },
 });