HYP-98: including the timeline component into the certificate page.

package.json

@@ -70,7 +70,7 @@
         "webpack-dev-server": "^4.15.1"
     },
     "dependencies": {
-        "@digicatapult/ui-component-library": "^0.14.6",
+        "@digicatapult/ui-component-library": "^0.16.0",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "react-router-dom": "^6.21.3",

src/pages/Certificates.js

@@ -4,14 +4,37 @@ import Nav from './components/Nav'
 import Header from './components/Header'
 import CertificateForm from './components/CertificateForm'
 
+const timelineProps = {
+  name: 'UK-HYPROOF-0001',
+  disclaimer:
+    'Your certification status is dynamic and may change  over time. Always refer to this page for the most up-to-date status.',
+  items: [
+    {
+      title: 'Initiation',
+      message:
+        'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit.',
+      checked: true,
+      status: 'in progress',
+    },
+    {
+      title: 'Carbon Embodiment',
+      status: 'pending',
+    },
+    {
+      title: 'Issuance',
+      status: 'pending',
+    },
+  ],
+}
+
 export default function Certificates() {
   const userName = 'Heidi Heidi'
   const companyName = "Heidi's Hydroelectric Hydrogen"
   return (
     <>
       <Nav />
       <Header userFullName={userName} companyName={companyName} />
-      <CertificateForm />
+      <CertificateForm variant="hyproof" {...timelineProps} />
     </>
   )
 }

src/pages/components/CertificateForm.js

@@ -1,12 +1,33 @@
 import React from 'react'
 import styled from 'styled-components'
 
-import { Grid } from '@digicatapult/ui-component-library'
+import { Grid, Timeline } from '@digicatapult/ui-component-library'
+
+export default function CertificateForm(props) {
+  const [items, setItems] = React.useState(props.items || undefined)
+
+  React.useEffect(() => {
+    // This is for api to retrieve status of a certificate
+    // once updated delete [timelineItems] variable
+    if (!items) {
+      fetch('localhost:3001/some-link/{id}')
+        .then((res) => res.json())
+        .then((data) => setItems(data))
+    }
+  }, [items])
 
-export default function CertificateForm() {
   return (
     <Form>
-      <Timeline area="timeline">timeline</Timeline>
+      <TimelineWrapper area="timeline">
+        <Timeline {...props}>
+          {items.map(({ message, ...rest }) => (
+            <Timeline.Item key={rest.title} {...props} {...rest}>
+              {message && <p>{message}</p>}
+            </Timeline.Item>
+          ))}
+        </Timeline>
+        <TimelineDisclaimer>{props.disclaimer}</TimelineDisclaimer>
+      </TimelineWrapper>
       <Grid.Panel area="main">
         <h1>Certificate Form</h1>
       </Grid.Panel>
@@ -21,16 +42,22 @@ const Form = styled.form`
   grid-area: 1 / 1 / -1 / -1;
 `
 
-const Timeline = styled(Grid.Panel)`
-  display: grid;
-  align-items: center;
-  justify-items: center;
-  min-width: 400px;
-  max-height: 600px;
-  color: white;
+const TimelineWrapper = styled(Grid.Panel)`
+  max-width: 400px;
+  max-height: 100%;
+  padding: 20px 0px;
+  overflow: hidden;
   background: #0c3b38;
 `
 
+const TimelineDisclaimer = styled('div')`
+  padding: 50px 20px;
+  color: #33e58c;
+  opacity: 0.5;
+  font-size: 12px;
+  line-height: 20px; /* 166.667% */
+`
+
 const Sidebar = styled(Grid.Panel)`
   display: grid;
   align-items: center;