Modal and Confirm updates

eea · Jan 14, 2022 · 3b306c6 · 3b306c6
1 parent 24652a2
commit 3b306c6
Show file tree

Hide file tree

Showing 3 changed files with 153 additions and 48 deletions.
diff --git a/src/customizations/components/theme/Confirm/Confirm.stories.js b/src/customizations/components/theme/Confirm/Confirm.stories.js
@@ -13,40 +13,40 @@ export default {
     size: {
       control: { type: 'inline-radio' },
       options: ['mini', 'tiny', 'small', 'large'],
-      description:"confirmation modal size",
-      table:{
-        type:{summary:"string"},
-        defaultValue:{summary:'small'}
-      }
+      description: 'confirmation modal size',
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: 'small' },
+      },
     },
-    confirmHeader:{
-      description:"modal header",
-      table:{
-        type:{summary:'string'},
-        defaultValue:{summary:' \""\ '}
-      }
+    confirmHeader: {
+      description: 'modal header',
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: ' "" ' },
+      },
     },
-    content:{
-      description:"modal message",
-      table:{
-        type:{summary:'string'},
-        defaultValue:{summary:' \""\ '}
-      }
+    content: {
+      description: 'modal message',
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: ' "" ' },
+      },
     },
-    cancelButton:{
-      description:"cancel button text",
-      table:{
-        type:{summary:'string'},
-        defaultValue:{summary:' \""\ '}
-      }
+    cancelButton: {
+      description: 'cancel button text',
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: ' "" ' },
+      },
+    },
+    confirmButton: {
+      description: 'confirmation button text',
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: ' "" ' },
+      },
     },
-    confirmButton:{
-      description:"confirmation button text",
-      table:{
-        type:{summary:'string'},
-        defaultValue:{summary:' \""\ '}
-      }
-    }
   },
 };
 

diff --git a/src/customizations/components/theme/Modal/Modal.stories.js b/src/customizations/components/theme/Modal/Modal.stories.js
@@ -4,37 +4,142 @@ import { Button, Modal } from 'semantic-ui-react';
 export default {
   title: 'Components/Modal',
   component: Modal,
+  parameters: {
+    actions: {
+      handles: ['click'],
+    },
+  },
   argTypes: {
     size: {
-      control: { type: 'select' },
+      control: { type: 'inline-radio' },
       options: ['mini', 'tiny', 'small', 'large', 'fullscreen'],
+      description: 'modal size',
+      table: {
+        type: {
+          summary: 'string',
+        },
+        defaultValue: {
+          summary: 'large',
+        },
+      },
     },
     dimmer: {
       control: { type: 'select' },
       options: [true, 'inverted', 'blurring'],
+      description: 'modal background dimmer',
+      table: {
+        type: {
+          summary: 'bool|func|object|enum',
+        },
+        defaultValue: {
+          summary: true,
+        },
+      },
+    },
+    content: {
+      description: 'modal background dimmer',
+      table: {
+        type: {
+          summary: 'custom',
+        },
+        defaultValue: {
+          summary: ' "" ',
+        },
+      },
+    },
+    header: {
+      description: 'modal heading',
+      table: {
+        type: {
+          summary: 'string',
+        },
+        defaultValue: {
+          summary: ' "" ',
+        },
+      },
+    },
+    trigger: {
+      description:
+        'Element to be rendered in-place where the portal is defined',
+      table: {
+        type: {
+          summary: 'node',
+        },
+        defaultValue: {
+          summary: ' "" ',
+        },
+      },
     },
   },
 };
 
-const trigger = <Button>Show Modal</Button>;
+function ModalEEA({
+  trigger,
+  header,
+  content,
+  centered = false,
+  size,
+  dimmer = true,
+}) {
+  const [open, setOpen] = React.useState(false);
+  return (
+    <Modal
+      className="eeaModal"
+      onClose={() => setOpen(false)}
+      onOpen={() => setOpen(true)}
+      open={open}
+      trigger={trigger}
+      centered={centered}
+      size={size}
+      dimmer={dimmer}
+    >
+      <Modal.Header>{header}</Modal.Header>
+      <Modal.Content>
+        <Modal.Description>{content}</Modal.Description>
+      </Modal.Content>
+      <Modal.Actions>
+        <Button onClick={() => setOpen(false)} className="eeaCancelButton">
+          No
+        </Button>
+        <Button onClick={() => setOpen(false)} className="eeaActionButton">
+          Yes
+        </Button>
+      </Modal.Actions>
+    </Modal>
+  );
+}
 
-const Template = (args) => <Modal {...args} />;
+const trigger = <Button className="eeaPrimaryButton">Show Modal</Button>;
+
+const Template = (args) => <ModalEEA {...args}></ModalEEA>;
 
 export const Default = Template.bind({});
 Default.args = {
   trigger: trigger,
   header: 'Modal Header',
   content: 'Modal Content',
-  actions: ['Snooze', { key: 'done', content: 'Done', positive: true }],
 };
 
 export const Playground = Template.bind({});
 Playground.args = {
   trigger: trigger,
   header: 'Modal Header',
   content: 'Modal Content',
-  actions: ['Snooze', { key: 'done', content: 'Done', positive: true }],
   centered: true,
-  size: 'large',
+  size: 'mini',
   dimmer: true,
 };
+
+Playground.argTypes = {
+  centered: {
+    description: 'vertically centered in the viewport',
+    table: {
+      type: {
+        summary: 'boolean',
+      },
+      defaultValue: {
+        summary: true,
+      },
+    },
+  },
+};
diff --git a/theme/themes/eea/modules/modal.overrides b/theme/themes/eea/modules/modal.overrides
@@ -2,21 +2,21 @@
          Theme Overrides
 *******************************/
 
-.ui.modal {
-  border-radius: @borderRadius !important;
-}
+.ui.modal.eeaModal {
+  border-radius: @borderRadius;
 
-.ui.modal > .header {
-  border: @border !important;
-}
+  .header {
+    border: @border;
+  }
 
-.ui.modal > .actions {
-  border: @border !important;
-  background-color: @background !important;
-}
+  .actions {
+    border: @border;
+    background-color: @background;
+  }
 
-.ui.modal > .content {
-  padding: 1rem 1.5rem !important;
+  .content {
+    padding: 1rem 1.5rem;
+  }
 }
 
 /******************************************/