Modal (prev. modali) Storybook stories (#1508)

* export ModalOptions and ModalProps

* Modal stories

* use action and make modal smaller

* rename css variable to generic + variable defaults

src/components/WrapEtherBtn.tsx

@@ -71,7 +71,7 @@ const ModalWrapper = styled(ModalBodyWrapper)`
       margin-bottom: 0.5rem;
       padding-left: -0.5;
       font-size: 1.3rem;
-      color: var(--color-background-modali);
+      color: var(--color-background-opaque-grey);
     }
 
     a {

src/components/common/Modal.stories.tsx

@@ -0,0 +1,54 @@
+import React from 'react'
+import { action } from '@storybook/addon-actions'
+// also exported from '@storybook/react' if you can deal with breaking changes in 6.1
+import { Story, Meta } from '@storybook/react/types-6-0'
+import Modal, { ModalOptions, ModalProps, useModal } from 'components/common/Modal'
+import { LoremIpsum } from 'storybook/LoremIpsum'
+
+const { Modal: ModalComponent } = Modal
+
+export default {
+  title: 'Common/Modal',
+  component: ModalComponent,
+} as Meta
+
+const Template: Story<{ props: ModalProps; options?: ModalOptions }> = (args) => {
+  const [modalHook, toggleModal] = useModal(args.options)
+  return (
+    <>
+      <button onClick={toggleModal}>Open Modal</button>
+      <ModalComponent {...args} {...modalHook} />
+    </>
+  )
+}
+
+const LoremDefaultModalOptions = {
+  title: 'Lorem Ipsum',
+  message: (
+    <div style={{ height: '20rem', overflowY: 'auto' }}>
+      <LoremIpsum />
+    </div>
+  ),
+}
+
+export const LoremOneButton = Template.bind({})
+LoremOneButton.args = {
+  options: {
+    ...LoremDefaultModalOptions,
+    buttons: [
+      <>&nbsp;</>,
+      <Modal.Button label="Close" key="yes" isStyleDefault onClick={action('Close button clicked')} />,
+    ],
+  },
+}
+
+export const LoremTwoButtons = Template.bind({})
+LoremTwoButtons.args = {
+  options: {
+    ...LoremDefaultModalOptions,
+    buttons: [
+      <Modal.Button label="Cancel" key="cancel" isStyleCancel onClick={action('Close button clicked')} />,
+      <Modal.Button label="Confirm" key="confirm" isStyleDefault onClick={action('Confirm button clicked')} />,
+    ],
+  },
+}

src/components/common/Modal.tsx

@@ -1,9 +1,11 @@
 import React from 'react'
 import { createGlobalStyle } from 'styled-components'
-import Modali, { ModalHook, toggleModaliComponent, useModali } from 'modali'
+import Modali, { ModalHook, ModalOptions, ModalProps, toggleModaliComponent, useModali } from 'modali'
 
 import { MEDIA } from 'const'
 
+const MODALI_OVERLAY_COLOUR = '#2f3e4e80'
+
 const ModaliGlobalStyle = createGlobalStyle` 
 /* Hack to fix Modali screen flash */
   .modali-overlay {
@@ -17,18 +19,17 @@ const ModaliGlobalStyle = createGlobalStyle`
     left: 0;
     right: 0;
     content: "";
-    background-color: var(--color-background-modali);
+    background-color: var(--color-background-opaque-grey, ${MODALI_OVERLAY_COLOUR});
   }
 
   /* Hack to not darken view further when two modali are open */
   .modali-wrapper:nth-last-of-type(n+3)::before {
     display: none;
   }
-
   /* End hack */
   
   .modali-open .modali-overlay {
-    background-color: var(--color-background-modali);
+    background-color: var(--color-background-opaque-grey, ${MODALI_OVERLAY_COLOUR});
     opacity: 1;
   }
   
@@ -164,4 +165,11 @@ const Modal: React.FC<Modali.ModalProps> = (props) => (
 // To import default Modali and not change much code elsewhere
 const StyledModali = { ...Modali, Modal }
 
-export { StyledModali as default, ModalHook, toggleModaliComponent as toggleModal, useModali as useModal }
+export {
+  StyledModali as default,
+  ModalHook,
+  ModalOptions,
+  ModalProps,
+  toggleModaliComponent as toggleModal,
+  useModali as useModal,
+}

src/components/layout/SwapLayout/Card/Card.tsx

@@ -17,7 +17,7 @@ const CardRowDrawer = styled.tr`
   width: 100%;
   height: 100%;
   border-radius: 0.6rem;
-  background: var(--color-background-modali);
+  background: var(--color-background-opaque-grey);
 
   /* Inner td wrapper */
   > td {

src/styles/global.ts

@@ -362,7 +362,7 @@ const GlobalStyles = createGlobalStyle`
     
     button {
       &.Mui-selected.MuiTab-fullWidth:hover {
-        background: var(--color-background-modali);
+        background: var(--color-background-opaque-grey);
       }
 
       &.MuiPickersYear-yearButton.MuiPickersYear-yearSelected,
@@ -428,7 +428,7 @@ const GlobalStyles = createGlobalStyle`
       
 
       &.MuiPickersArrowSwitcher-iconButton {
-        background-color: var(--color-background-modali);
+        background-color: var(--color-background-opaque-grey);
       }
     }
 

src/styles/variables.ts

@@ -58,7 +58,7 @@ const LightColors = `
   --color-text-wallet: #000;
   --color-text-deposit-header: #000000;
   --color-background-nav-active: #DFE6EF;
-  --color-background-modali: #2f3e4e80;
+  --color-background-opaque-grey: #2f3e4e80;
   --color-text-modali: #526877;
 
   /* SVGs */