chore: add a Settings modal component

1 files changed, 65 insertions, 12 deletions

diff --git a/src/components/molecules/forms/select-with-tooltip.stories.tsx b/src/components/molecules/forms/select-with-tooltip.stories.tsx
index d2d36fa..c63e9b8 100644
--- a/src/components/molecules/forms/select-with-tooltip.stories.tsx
+++ b/src/components/molecules/forms/select-with-tooltip.stories.tsx
@@ -17,11 +17,25 @@ export default {
         required: true,
       },
     },
-    title: {
+    disabled: {
+      control: {
+        type: 'boolean',
+      },
+      description: 'Field state: either enabled or disabled.',
+      table: {
+        category: 'Options',
+        defaultValue: { summary: false },
+      },
+      type: {
+        name: 'boolean',
+        required: false,
+      },
+    },
+    id: {
       control: {
         type: 'text',
       },
-      description: 'The tooltip title',
+      description: 'Field id.',
       type: {
         name: 'string',
         required: true,
@@ -37,28 +51,31 @@ export default {
         required: true,
       },
     },
-    disabled: {
+    labelClassName: {
       control: {
-        type: 'boolean',
+        type: 'text',
       },
-      description: 'Field state: either enabled or disabled.',
+      description: 'Set additional classnames to the label.',
       table: {
-        category: 'Options',
-        defaultValue: { summary: false },
+        category: 'Styles',
       },
       type: {
-        name: 'boolean',
+        name: 'string',
         required: false,
       },
     },
-    id: {
+    labelSize: {
       control: {
-        type: 'text',
+        type: 'select',
+      },
+      description: 'The label size.',
+      options: ['medium', 'small'],
+      table: {
+        category: 'Options',
       },
-      description: 'Field id.',
       type: {
         name: 'string',
-        required: true,
+        required: false,
       },
     },
     name: {
@@ -98,6 +115,19 @@ export default {
         required: false,
       },
     },
+    selectClassName: {
+      control: {
+        type: 'text',
+      },
+      description: 'Set additional classnames to the select field.',
+      table: {
+        category: 'Styles',
+      },
+      type: {
+        name: 'string',
+        required: false,
+      },
+    },
     setValue: {
       control: {
         type: null,
@@ -111,6 +141,29 @@ export default {
         required: true,
       },
     },
+    title: {
+      control: {
+        type: 'text',
+      },
+      description: 'The tooltip title',
+      type: {
+        name: 'string',
+        required: true,
+      },
+    },
+    tooltipClassName: {
+      control: {
+        type: 'text',
+      },
+      description: 'Set additional classnames to the tooltip.',
+      table: {
+        category: 'Styles',
+      },
+      type: {
+        name: 'string',
+        required: false,
+      },
+    },
     value: {
       control: {
         type: 'text',