Add application name bar to header

__tests__/components/ApplicationNameBar.test.tsx

@@ -0,0 +1,25 @@
+import '@testing-library/jest-dom/extend-expect'
+import { render, screen } from '@testing-library/react'
+
+import { axe, toHaveNoViolations } from 'jest-axe'
+
+import ApplicationNameBar from '../../components/ApplicationNameBar'
+
+expect.extend(toHaveNoViolations)
+
+describe('ApplicationNameBar', () => {
+  const sut = <ApplicationNameBar text="Test" href="/somelink" />
+
+  it('renders', () => {
+    render(sut)
+    const screenText = screen.getByText('Test')
+    expect(screenText).toBeInTheDocument()
+    expect(document.querySelector('a')?.getAttribute('href')).toBe('/somelink')
+  })
+
+  it('meets a11y', async () => {
+    const { container } = render(sut)
+    const results = await axe(container)
+    expect(results).toHaveNoViolations()
+  })
+})

components/ApplicationNameBar.tsx

@@ -0,0 +1,24 @@
+import { FC } from 'react'
+
+import Link from 'next/link'
+
+export interface ApplicationNameBarProps {
+  text: string
+  href: string
+}
+
+const ApplicationNameBar: FC<ApplicationNameBarProps> = ({ text, href }) => {
+  return (
+    <div id="app-bar" className="bg-blue-dark">
+      <section className="container mx-auto p-4">
+        <Link href={href}>
+          <a className="font-body md:text-[28px] text-lg font-bold text-white hover:underline">
+            {text}
+          </a>
+        </Link>
+      </section>
+    </div>
+  )
+}
+
+export default ApplicationNameBar

components/Header.tsx

@@ -6,6 +6,7 @@ import Image from 'next/future/image'
 import Link from 'next/link'
 import { useRouter } from 'next/router'
 
+import ApplicationNameBar from './ApplicationNameBar'
 import Banner from './Banner'
 
 export interface HeaderProps {
@@ -47,7 +48,7 @@ const Header: FC<HeaderProps> = ({ gocLink, skipToMainText }) => {
             description={t('banner.description')}
           />
         )}
-        <div className="container mx-auto flex flex-col justify-between px-4 pt-2.5 md:flex md:flex-row">
+        <div className="container mx-auto flex flex-col justify-between px-4 py-2.5 md:flex md:flex-row">
           <div className="flex flex-row content-center items-center justify-between md:mt-7">
             <a href={gocLink}>
               <Image
@@ -92,8 +93,10 @@ const Header: FC<HeaderProps> = ({ gocLink, skipToMainText }) => {
           </div>
         </div>
 
-        {/* Border */}
-        <div className="mb-2 mt-4 border-t pb-2"></div>
+        <ApplicationNameBar
+          text={t('application-name-bar')}
+          href="/expectations"
+        />
 
         {/* <Menu
           loginText={t('login')}

components/LinkButton.tsx

@@ -46,7 +46,7 @@ const LinkButton: FC<LinkButtonProps> = ({
   const styleClasses = styles[style ?? 'default']
 
   return (
-    <Link href={href} passHref>
+    <Link href={href}>
       <a
         target={external ? '_blank' : undefined}
         rel={external ? 'noopener noreferrer' : undefined}

cypress/e2e/email.cy.js

@@ -37,6 +37,15 @@ describe('email page loads', () => {
     cy.get('[data-cy=toggle-language-link]').should('contain.text', 'English')
   })
 
+  it('should have a bar in the header with the application name', () => {
+    cy.get('#app-bar').should("be.visible")
+  })
+
+  it('should redirect you to the expectations page when clicking the text in the application name bar', () => {
+    cy.get('#app-bar a').click()
+    cy.location('pathname').should("equal", "/en/expectations")
+  })
+
   it('has no detectable a11y violations on load', () => {
     cy.injectAxe()
     cy.wait(500)

cypress/e2e/expectations.cy.js

@@ -36,6 +36,15 @@ describe('expectations page loads', () => {
     cy.get('#btn-agree').first().click()
     cy.location('pathname').should("equal", "/en/landing")
   })
+
+  it('should have a bar in the header with the application name', () => {
+    cy.get('#app-bar').should("be.visible")
+  })
+
+  it('should redirect you to the expectations page when clicking the text in the application name bar', () => {
+    cy.get('#app-bar a').click()
+    cy.location('pathname').should("equal", "/en/expectations")
+  })
 
   it('has no detectable a11y violations on load', () => {
     cy.injectAxe()

cypress/e2e/landing.cy.js

@@ -32,6 +32,15 @@ describe('landing page loads', () => {
   it('should display the button for has ESRF',()=>{
       cy.get(`#with-esrf`).should('be.visible')
   })
+
+  it('should have a bar in the header with the application name', () => {
+    cy.get('#app-bar').should("be.visible")
+  })
+
+  it('should redirect you to the expectations page when clicking the text in the application name bar', () => {
+    cy.get('#app-bar a').click()
+    cy.location('pathname').should("equal", "/en/expectations")
+  })
 
   it('has no detectable a11y violations on load', () => {
     cy.injectAxe()

cypress/e2e/status.cy.js

@@ -37,6 +37,15 @@ describe('status page loads', () => {
     cy.get('[data-cy=toggle-language-link]').should('contain.text', 'English')
   })
 
+  it('should have a bar in the header with the application name', () => {
+    cy.get('#app-bar').should("be.visible")
+  })
+
+  it('should redirect you to the expectations page when clicking the text in the application name bar', () => {
+    cy.get('#app-bar a').click()
+    cy.location('pathname').should("equal", "/en/expectations")
+  })
+
   it('has no detectable a11y violations on load', () => {
     cy.injectAxe()
     cy.wait(500)

public/locales/en/common.json

@@ -59,5 +59,6 @@
   "banner": {
     "alert": "Test site",
     "description": "You cannot check the status of your passport application through this test site. Parts of this site may not work and will change."
-  }
+  },
+  "application-name-bar": "Passport application status checker"
 }

public/locales/fr/common.json

@@ -59,5 +59,6 @@
   "banner": {
     "alert": "Lieu de test",
     "description": "Vous ne pouvez pas vérifier l'état de votre demande de passeport via ce site de test. Certaines parties de ce site peuvent ne pas fonctionner et seront modifiées."
-  }
+  },
+  "application-name-bar": "Vérificateur de l'état de la demande de passeport"
 }