From 734215fc458f0390ad0265e47fbf11aa9eb8ac16 Mon Sep 17 00:00:00 2001
From: Liordino Neto <liordinoneto@gmail.com>
Date: Tue, 31 Mar 2020 20:57:25 -0300
Subject: [PATCH] feat: added the main help popup on the wizard

---
 .../src/pages/Triggers/NewTriggerWizard.js    | 44 +++++++++++++++++--
 .../src/pages/Triggers/Triggers.styles.js     | 17 +++++++
 2 files changed, 58 insertions(+), 3 deletions(-)

diff --git a/new-lamassu-admin/src/pages/Triggers/NewTriggerWizard.js b/new-lamassu-admin/src/pages/Triggers/NewTriggerWizard.js
index a2bc8584..89cbcc2e 100644
--- a/new-lamassu-admin/src/pages/Triggers/NewTriggerWizard.js
+++ b/new-lamassu-admin/src/pages/Triggers/NewTriggerWizard.js
@@ -1,24 +1,62 @@
-import React from 'react'
+import React, { useState } from 'react'
 import { makeStyles, Paper } from '@material-ui/core'
 
-import { H2 } from 'src/components/typography'
+import { H2, P } from 'src/components/typography'
 // import { Button } from 'src/components/buttons'
+import Popper from 'src/components/Popper'
 import { ReactComponent as CloseIcon } from 'src/styling/icons/action/close/zodiac.svg'
+import { ReactComponent as HelpIcon } from 'src/styling/icons/action/help/zodiac.svg'
 
 import { mainStyles } from './Triggers.styles'
 
 const useStyles = makeStyles(mainStyles)
 
 const NewTriggerWizard = ({ handleClose, save }) => {
+  const [mainHelpPopperAnchorEl, setMainHelpPopperAnchorEl] = useState(null)
+
   const classes = useStyles()
 
+  const handleOpenMainHelpPopper = event => {
+    setMainHelpPopperAnchorEl(
+      mainHelpPopperAnchorEl ? null : event.currentTarget
+    )
+  }
+
+  const handleCloseMainHelpPopper = () => {
+    setMainHelpPopperAnchorEl(null)
+  }
+
+  const mainHelpPopperOpen = Boolean(mainHelpPopperAnchorEl)
+
+  console.log(mainHelpPopperOpen)
+
   return (
     <Paper className={classes.paper}>
       <button onClick={handleClose}>
         <CloseIcon />
       </button>
       <div className={classes.modalHeader}>
-        <H2>New Compliance Trigger</H2>
+        <div className={classes.rowWrapper}>
+          <H2>New Compliance Trigger</H2>
+          <div className={classes.transparentButton}>
+            <button onClick={handleOpenMainHelpPopper}>
+              <HelpIcon />
+              <Popper
+                open={mainHelpPopperOpen}
+                anchorEl={mainHelpPopperAnchorEl}
+                placement="bottom"
+                onClose={handleCloseMainHelpPopper}>
+                <div className={classes.popoverContent}>
+                  <P>
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+                    Morbi tempor velit a dolor ultricies posuere. Proin massa
+                    sapien, euismod quis auctor vel, blandit in enim.
+                  </P>
+                </div>
+              </Popper>
+            </button>
+          </div>
+        </div>
       </div>
       <div className={classes.modalBody}></div>
     </Paper>
diff --git a/new-lamassu-admin/src/pages/Triggers/Triggers.styles.js b/new-lamassu-admin/src/pages/Triggers/Triggers.styles.js
index 11ec4f8e..0e208b6d 100644
--- a/new-lamassu-admin/src/pages/Triggers/Triggers.styles.js
+++ b/new-lamassu-admin/src/pages/Triggers/Triggers.styles.js
@@ -1,11 +1,14 @@
 import baseStyles from 'src/pages/Logs.styles'
+import { booleanPropertiesTableStyles } from 'src/components/booleanPropertiesTable/BooleanPropertiesTable.styles'
 
 const { titleWrapper, titleAndButtonsContainer, buttonsWrapper } = baseStyles
+const { rowWrapper } = booleanPropertiesTableStyles
 
 const mainStyles = {
   titleWrapper,
   titleAndButtonsContainer,
   buttonsWrapper,
+  rowWrapper,
   modal: {
     display: 'flex',
     alignItems: 'center',
@@ -46,6 +49,20 @@ const mainStyles = {
   modalBody: {
     display: 'flex',
     flexGrow: 2
+  },
+  transparentButton: {
+    '& > *': {
+      margin: 'auto 12px'
+    },
+    '& button': {
+      border: 'none',
+      backgroundColor: 'transparent',
+      cursor: 'pointer'
+    }
+  },
+  popoverContent: {
+    width: 272,
+    padding: [[10, 15]]
   }
 }