Certificate actions buttons and input fields (#16)

Added the form and the buttons 

---

Co-authored-by: Paulius Michelevicius <paulius.michelevicius@gmail.com>

package.json

@@ -73,6 +73,7 @@
         "@digicatapult/ui-component-library": "^0.16.0",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
+        "react-id-generator": "^3.0.2",
         "react-router-dom": "^6.21.3",
         "styled-components": "^6.1.8"
     }

src/index.html

@@ -7,7 +7,6 @@
 
     <style>
       body {
-        background-color: '#F5F5F5';
         margin: 0px;
         font-family: 'Roboto', sans-serif;
       }

src/pages/components/CertificateActionsButtons.js

@@ -0,0 +1,101 @@
+import React, { useState } from 'react'
+import styled from 'styled-components'
+
+import { Grid, Button } from '@digicatapult/ui-component-library'
+
+export default function CertificateActionsButtons() {
+  const [isWaitingVal, setIsWaitingVal] = useState(false)
+
+  const handleClickSaveDraft = () => alert('Saved')
+  const handleCancelDraft = () => alert('Cancelled')
+  const handleClickSubmit = (e) => {
+    e.preventDefault()
+    setIsWaitingVal(true)
+    setTimeout(() => {
+      e.target.form.requestSubmit()
+    }, 2000)
+  }
+
+  return (
+    <Sidebar area="sidebar">
+      <PaddedDiv>
+        <Grid
+          areas={[
+            ['div-left', 'div-right'],
+            ['div-double', 'div-double'],
+          ]}
+          rows={['40px', '60px']}
+          columns={['1fr', '1fr']}
+          gap="20px 10px"
+        >
+          <Grid.Panel area="div-left">
+            <SmallButton
+              variant="roundedPronounced"
+              onClick={handleClickSaveDraft}
+            >
+              Save draft
+            </SmallButton>
+          </Grid.Panel>
+          <Grid.Panel area="div-right">
+            <SmallButton
+              variant="roundedPronounced"
+              onClick={handleCancelDraft}
+            >
+              Cancel
+            </SmallButton>
+          </Grid.Panel>
+          <Grid.Panel area="div-double">
+            <LargeButton
+              variant="roundedPronounced"
+              onClick={handleClickSubmit}
+            >
+              Submit
+              {isWaitingVal && <span>...</span>}
+            </LargeButton>
+          </Grid.Panel>
+        </Grid>
+      </PaddedDiv>
+    </Sidebar>
+  )
+}
+
+const Sidebar = styled(Grid.Panel)`
+  align-items: center;
+  justify-items: center;
+  min-width: 340px;
+  color: white;
+  background: #0c3b38;
+`
+
+const PaddedDiv = styled.div`
+  padding: 34px 21px;
+  width: 100%;
+`
+
+const SmallButton = styled(Button)`
+  width: 100%;
+  min-width: 132px;
+  height: 100% !important;
+  font-family: Roboto;
+  font-style: normal;
+  font-weight: 500;
+  white-space: nowrap;
+
+  font-size: 15.5px;
+
+  color: #ffffff;
+  border: 1px solid #ffffff !important;
+  background: #124338 !important;
+
+  &:hover {
+    opacity: 0.6;
+  }
+`
+
+const LargeButton = styled(SmallButton)`
+  font-size: 21px;
+
+  color: #33e58c;
+  border: 1px solid #2fe181 !important;
+  background: #124338 !important;
+`

src/pages/components/CertificateForm.js

@@ -1,11 +1,47 @@
-import React from 'react'
+import React, { useState, useCallback } from 'react'
 import styled from 'styled-components'
 
 import { Grid, Timeline } from '@digicatapult/ui-component-library'
 
+import CertificateInputFields from './CertificateInputFields'
+import CertificateFormHeader from './CertificateFormHeader'
+import CertificateActionsButtons from './CertificateActionsButtons'
+
+const useCallbackChVal = (set) => useCallback((e) => set(e.target.value), [set])
+
 export default function CertificateForm(props) {
+  const [sdVal, setSdVal] = useState('2024-01-01')
+  const [stVal, setStVal] = useState('00:00')
+  const [edVal, setEdVal] = useState('2024-01-01')
+  const [etVal, setEtVal] = useState('23:55')
+  const [enVal, setEnVal] = useState('')
+  const [szVal, setSzVal] = useState('')
+
+  const handleSdChgeVal = useCallbackChVal(setSdVal)
+  const handleStChgeVal = useCallbackChVal(setStVal)
+  const handleEdChgeVal = useCallbackChVal(setEdVal)
+  const handleEtChgeVal = useCallbackChVal(setEtVal)
+  const handleEnChgeVal = useCallbackChVal(setEnVal)
+  const handleSzChgeVal = useCallbackChVal(setSzVal)
+
+  const handleSubmit = useCallback(
+    (event) => {
+      event.preventDefault()
+      const obj = {
+        startDateVal: sdVal,
+        startTimeVal: stVal,
+        endDateVal: edVal,
+        endTimeVal: etVal,
+        energyVal: enVal,
+        sizeVal: szVal,
+      }
+      alert('DATA:\n' + JSON.stringify(obj, null, 2))
+    },
+    [sdVal, stVal, edVal, etVal, enVal, szVal]
+  )
+
   return (
-    <Form>
+    <>
       <TimelineWrapper area="timeline">
         <Timeline {...props}>
           {props.items.map(({ message, ...rest }) => (
@@ -16,11 +52,27 @@ export default function CertificateForm(props) {
         </Timeline>
         <TimelineDisclaimer>{props.disclaimer}</TimelineDisclaimer>
       </TimelineWrapper>
-      <Grid.Panel area="main">
-        <h1>Certificate Form</h1>
-      </Grid.Panel>
-      <Sidebar area="sidebar">Sidebar</Sidebar>
-    </Form>
+      <Form action="" onSubmit={handleSubmit}>
+        <Grid.Panel area="main">
+          <CertificateFormHeader />
+          <CertificateInputFields
+            sdVal={sdVal}
+            handleSdChgeVal={handleSdChgeVal}
+            stVal={stVal}
+            handleStChgeVal={handleStChgeVal}
+            edVal={edVal}
+            handleEdChgeVal={handleEdChgeVal}
+            etVal={etVal}
+            handleEtChgeVal={handleEtChgeVal}
+            enVal={enVal}
+            handleEnChgeVal={handleEnChgeVal}
+            szVal={szVal}
+            handleSzChgeVal={handleSzChgeVal}
+          />
+        </Grid.Panel>
+        <CertificateActionsButtons />
+      </Form>
+    </>
   )
 }
 
@@ -43,14 +95,5 @@ const TimelineDisclaimer = styled('div')`
   color: #33e58c;
   opacity: 0.5;
   font-size: 12px;
-  line-height: 20px; /* 166.667% */
-`
-
-const Sidebar = styled(Grid.Panel)`
-  display: grid;
-  align-items: center;
-  justify-items: center;
-  min-width: 400px;
-  color: white;
-  background: #0c3b38;
+  line-height: 20px;
 `

src/pages/components/CertificateFormHeader.js

@@ -0,0 +1,59 @@
+import React from 'react'
+import styled from 'styled-components'
+
+import { Section } from '@digicatapult/ui-component-library'
+
+import BgImageSVG from '../../assets/images/molecules-bg-repeat.svg'
+
+export default function CertificateFormHeader() {
+  return (
+    <GreenBgDiv>
+      <WrapperDiv>
+        <Section
+          background="#e4e4e4"
+          headingGap="0ch"
+          headingLevel={3}
+          headingSize="0em"
+          height="auto"
+          padding="1ch 1ch"
+          title=""
+          width="33%"
+        >
+          <UnorderedList>
+            <ListItem>
+              Hydrogen Producer: <strong>Heidi</strong>
+            </ListItem>
+            <ListItem>
+              Energy Producer: <strong>Emma</strong>
+            </ListItem>
+            <ListItem>
+              Regulator: <strong>Reginald</strong>
+            </ListItem>
+          </UnorderedList>
+        </Section>
+      </WrapperDiv>
+    </GreenBgDiv>
+  )
+}
+
+const WrapperDiv = styled.div`
+  min-width: 250px;
+`
+
+const GreenBgDiv = styled.div`
+  background: #228077 url(${BgImageSVG}) repeat 25%;
+`
+
+const UnorderedList = styled.ul`
+  list-style-type: none;
+  margin: 0;
+  font-weight: 900;
+  padding: 0;
+`
+
+const ListItem = styled.li`
+  color: #1a1a1a;
+  font-family: Roboto;
+  font-weight: 100;
+  font-size: 16px;
+`