Add header bar implementation

package.json

@@ -1,6 +1,6 @@
 {
     "name": "@digicatapult/dscp-hyproof-client",
-    "version": "0.0.8",
+    "version": "0.0.9",
     "description": "User interface for HyProof",
     "homepage": "https://github.com/digicatapult/dscp-hyproof-client",
     "main": "src/index.js",
@@ -70,7 +70,7 @@
         "webpack-dev-server": "^4.15.1"
     },
     "dependencies": {
-        "@digicatapult/ui-component-library": "^0.13.6",
+        "@digicatapult/ui-component-library": "^0.14.1",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "react-router-dom": "^6.21.2",

src/App.js

@@ -19,7 +19,7 @@ export default function App() {
         ['timeline', 'main', 'sidebar'],
       ]}
       columns={['auto', '1fr', 'auto']}
-      rows={['82px', '82px', '1fr']}
+      rows={['78px', '98px', '1fr']}
     >
       <RouterProvider router={router} />
     </FullScreenGrid>

src/pages/Certificates.js

@@ -5,10 +5,12 @@ import Header from './components/Header'
 import CertificateForm from './components/CertificateForm'
 
 export default function Certificates() {
+  const userName = 'Heidi Heidi'
+  const companyName = "Heidi's Hydroelectric Hydrogen"
   return (
     <>
       <Nav />
-      <Header />
+      <Header userFullName={userName} companyName={companyName} />
       <CertificateForm />
     </>
   )

src/pages/components/Header.js

@@ -1,18 +1,63 @@
 import React from 'react'
 import styled from 'styled-components'
 
-import { Grid } from '@digicatapult/ui-component-library'
+import { Grid, UserIcon } from '@digicatapult/ui-component-library'
 
-export default function Header() {
-  return <StyledHeader area="header">HEADER</StyledHeader>
+import LiveIndicatorPNG from '../../assets/images/liveIndicator.png'
+
+export default function Header({ userFullName, companyName }) {
+  return (
+    <StyledHeader area="header">
+      <UserIcon
+        fullName={userFullName}
+        bgColor="#9EDCFA"
+        outlineColor="white"
+        color="#1A1A1A"
+        size="70px"
+      />
+      <CompanyName>{companyName}</CompanyName>
+      <LiveIndicator>
+        <source srcSet={LiveIndicatorPNG} type="image/png" />
+        <img
+          src={LiveIndicatorPNG}
+          alt="Icon indicating certification system is live"
+          height="32px"
+          width="32px"
+        />
+      </LiveIndicator>
+      <LiveCert>Live Certification</LiveCert>
+    </StyledHeader>
+  )
 }
 
 const StyledHeader = styled(Grid.Panel)`
   color: white;
   display: grid;
+  grid-template-columns: auto 1fr auto auto;
+  gap: 33px;
   align-items: center;
-  justify-items: center;
   background: #1a1a1a;
   width: 100%;
   height: 100%;
+  padding: 0px 28px;
+`
+
+const CompanyName = styled.span`
+  font-family: Roboto;
+  font-size: 32px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 45px;
+`
+
+const LiveIndicator = styled.picture``
+
+const LiveCert = styled.span`
+  font-family: Roboto;
+  font-size: 24px;
+  font-style: normal;
+  font-weight: 300;
+  line-height: 36.746px;
+  padding-left: 33px;
+  border-left: 2px solid white;
 `

src/pages/components/Nav.js

@@ -15,7 +15,7 @@ export default function Nav() {
           <source srcSet={LogoPNG} type="image/png" />
           <img src={LogoPNG} alt="HII Initiative Logo" height="80px" />
         </HomeIcon>
-        <Button>Home</Button>
+        <Button variant="square">Home</Button>
       </Home>
       <Grid.Panel area="nav">
         <AppBar