HYP-96: merge conflicts.

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-id-generator": "^3.0.2",

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,7 +1,7 @@
 import React, { useState, useCallback } from 'react'
 import styled from 'styled-components'
 
-import { Grid } from '@digicatapult/ui-component-library'
+import { Grid, Timeline } from '@digicatapult/ui-component-library'
 
 import CertificateInputFields from './CertificateInputFields'
 import CertificateFormHeader from './CertificateFormHeader'
@@ -39,7 +39,16 @@ export default function CertificateForm() {
 
   return (
     <>
-      <Timeline area="timeline">Timeline</Timeline>
+      <TimelineWrapper area="timeline">
+        <Timeline {...props}>
+          {props.items.map(({ message, ...rest }) => (
+            <Timeline.Item key={rest.title} {...props} {...rest}>
+              {message && <p>{message}</p>}
+            </Timeline.Item>
+          ))}
+        </Timeline>
+        <TimelineDisclaimer>{props.disclaimer}</TimelineDisclaimer>
+      </TimelineWrapper>
       <Form action="" onSubmit={handleSubmit}>
         <Grid.Panel area="main">
           <CertificateFormHeader />
@@ -70,12 +79,27 @@ const Form = styled.form`
   grid-area: 1 / 1 / -1 / -1;
 `
 
-const Timeline = styled(Grid.Panel)`
+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;
   justify-items: center;
   min-width: 400px;
-  max-height: 600px;
   color: white;
   background: #0c3b38;
 `