feat: Guidance and Contact Us pages

frontend/e2e/omrr.spec.ts

@@ -3,6 +3,8 @@ import { dashboard_page } from './pages/dashboard'
 import { authorization_list_page } from './pages/auth.list'
 import { authorization_details_page } from './pages/auth.details'
 import { map_page } from './pages/map'
+import { guidance_page } from './pages/guidance'
+import { contact_page } from './pages/contact'
 
 test.describe.parallel('Organics Info', () => {
   test('Dashboard Page', async ({ page }) => {
@@ -17,4 +19,10 @@ test.describe.parallel('Organics Info', () => {
   test('Map View', async ({ page }) => {
     await map_page(page)
   })
+  test('Guidance Page', async ({ page }) => {
+    await guidance_page(page)
+  })
+  test('Contact Us Page', async ({ page }) => {
+    await contact_page(page)
+  })
 })

frontend/e2e/pages/contact.ts

@@ -0,0 +1,38 @@
+import { Page } from 'playwright'
+import { expect } from '@playwright/test'
+
+import { baseURL } from '../utils'
+
+export const contact_page = async (page: Page) => {
+  await page.goto(baseURL)
+  const contactUsLink = page.getByRole('link', { name: 'Contact Us' })
+  await contactUsLink.click()
+
+  await expect(
+    page.getByRole('heading', {
+      name: 'Contact Us',
+    }),
+  ).toBeVisible()
+  await expect(
+    page.getByRole('heading', {
+      name: 'Organic matter',
+    }),
+  ).toBeVisible()
+  await expect(
+    page.getByRole('heading', {
+      name: 'Authorizations',
+    }),
+  ).toBeVisible()
+
+  await expect(
+    page.getByRole('heading', {
+      name: 'Report natural resource violations',
+    }),
+  ).toBeVisible()
+
+  await expect(
+    page.getByRole('link', {
+      name: '[email protected]',
+    }),
+  ).toBeVisible()
+}

frontend/e2e/pages/dashboard.ts

@@ -6,9 +6,10 @@ export const dashboard_page = async (page: Page) => {
   await page.goto(baseURL)
   await expect(page.getByText('Organics Info')).toBeVisible()
   await expect(page.getByAltText('Logo')).toBeVisible()
-  await expect(page.getByRole('button', { name: 'Map Search' })).toBeVisible()
-  await expect(page.getByRole('button', { name: 'Text Search' })).toBeVisible()
-  await expect(page.getByRole('button', { name: 'Contact Us' })).toBeVisible()
+  await expect(page.getByRole('link', { name: 'Map Search' })).toBeVisible()
+  await expect(page.getByRole('link', { name: 'Text Search' })).toBeVisible()
+  await expect(page.getByRole('link', { name: 'Guidance' })).toBeVisible()
+  await expect(page.getByRole('link', { name: 'Contact Us' })).toBeVisible()
   await expect(
     page.getByRole('heading', {
       name: 'Find an authorized compost and biosolid facility in British Columbia',

frontend/e2e/pages/guidance.ts

@@ -0,0 +1,38 @@
+import { Page } from 'playwright'
+import { expect } from '@playwright/test'
+
+import { baseURL } from '../utils'
+
+export const guidance_page = async (page: Page) => {
+  await page.goto(baseURL)
+  const guidanceLink = page.getByRole('link', { name: 'Guidance' })
+  await guidanceLink.click()
+
+  await expect(
+    page.getByRole('heading', {
+      name: 'Guidance',
+    }),
+  ).toBeVisible()
+  await expect(
+    page.getByRole('heading', {
+      name: 'How to interpret',
+    }),
+  ).toBeVisible()
+  await expect(
+    page.getByRole('heading', {
+      name: 'Map layers',
+    }),
+  ).toBeVisible()
+
+  await expect(
+    page.getByRole('link', {
+      name: 'Aquifers - All',
+    }),
+  ).toBeVisible()
+
+  await expect(
+    page.getByRole('heading', {
+      name: 'Other sources of information',
+    }),
+  ).toBeVisible()
+}

frontend/e2e/pages/map.ts

@@ -4,12 +4,11 @@ import { baseURL } from '../utils'
 
 export const map_page = async (page: Page) => {
   await page.goto(baseURL)
-
-  await page.getByRole('button', { name: 'Map Search' }).click()
+  await page.getByRole('link', { name: 'Map Search' }).click()
 
   await expect(page).toHaveTitle('Organics Info')
-  await expect(page.getByRole('button', { name: 'Map Search' })).toBeVisible()
-  await expect(page.getByRole('button', { name: 'Text Search' })).toBeVisible()
+  await expect(page.getByRole('link', { name: 'Map Search' })).toBeVisible()
+  await expect(page.getByRole('link', { name: 'Text Search' })).toBeVisible()
 
   await expect(page.getByTestId('map-view')).toBeVisible()
 

frontend/src/components/DataLayersCheckboxGroup.css

@@ -16,23 +16,13 @@
   padding: 0;
 }
 
-.data-layers-top-text,
+p.data-layers-top-text,
 .data-layers-top-link {
   color: var(--typography-color-disabled);
   font-size: 14px;
   font-style: italic;
 }
 
-.data-layers-top-link,
-.data-layers-top-link:hover {
-  text-decoration: underline;
-}
-
-.data-layers-type-text {
-  color: var(--typography-color-primary);
-  font-weight: 700;
-}
-
 .available-layers-row {
   display: flex;
   justify-content: space-between;
@@ -41,6 +31,8 @@
   flex: 0 0 28px;
 }
 
-.available-layers-text {
+p.available-layers-text {
   color: var(--typography-color-primary);
+  font-size: 18px;
+  font-weight: 700;
 }

frontend/src/components/DataLayersCheckboxGroup.test.tsx

@@ -26,13 +26,15 @@ describe('Test suite for DataLayersCheckboxGroup', () => {
     }
     const { user } = render(<TestComponent />, {
       withStateProvider: true,
+      withRouter: true,
     })
     return { user, state }
   }
 
   it('should render large DataLayersCheckboxGroup', async () => {
     const { user, state } = renderComponent(false, 'test-class')
     screen.getByText(/^All data layers sourced from GeoBC/)
+    screen.getByRole('link', { name: /^Click here to read our guidance/ })
     expect(state.dataLayers).toHaveLength(0)
     expect(state.hasDataLayersOn).toBe(false)
 

frontend/src/components/DataLayersCheckboxGroup.tsx

@@ -1,3 +1,4 @@
+import { NavLink } from 'react-router-dom'
 import { useDispatch } from 'react-redux'
 import { Button, Stack, Typography } from '@mui/material'
 import clsx from 'clsx'
@@ -34,8 +35,6 @@ export function DataLayersCheckboxGroup({
     dispatch(resetDataLayers())
   }
 
-  const isGuidanceReady = false
-
   return (
     <Stack
       direction="column"
@@ -51,19 +50,13 @@ export function DataLayersCheckboxGroup({
         <Typography className="data-layers-top-text">
           All data layers sourced from GeoBC.
         </Typography>
-        {isGuidanceReady && (
-          <Typography className="data-layers-top-link">
-            Click here to read our guidance page about map layers.
-          </Typography>
-        )}
+        <NavLink to="/guidance" className="data-layers-top-link">
+          Click here to read our guidance page about map layers.
+        </NavLink>
       </Stack>
       {isSmall && (
         <div className="available-layers-row">
-          <Typography
-            className="available-layers-text"
-            fontSize="18px"
-            fontWeight={700}
-          >
+          <Typography className="available-layers-text">
             Available Layers
           </Typography>
           {hasDataLayers && (

frontend/src/components/Footer.css

@@ -0,0 +1,55 @@
+footer.footer {
+  display: flex;
+  color: #ffffff;
+  background-color: var(--surface-color-primary-default);
+  padding: 24px;
+}
+
+div.footer-toolbar {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: var(--layout-margin-small);
+  align-self: stretch;
+}
+
+.footer a {
+  color: #FFF;
+  font-size: 14px;
+  line-height: 21px;
+  text-decoration: none;
+}
+
+.footer a:hover {
+  text-decoration: underline;
+}
+
+.footer-divider {
+  height: 1em;
+  border-color: #ffffff;
+  align-self: center;
+  margin: 0 4px;
+}
+
+button.footer-scroll-button {
+  position: fixed;
+  width: 40px;
+  height: 40px;
+  min-width: 40px;
+  bottom: 12px;
+  padding: 0;
+  background-color: var(--surface-color-brand-gold-60);
+  color: var(--icons-color-primary);
+  z-index: 9;
+}
+
+button.footer-scroll-button:hover {
+  background-color: var(--surface-color-brand-gold-50);
+  color: black;
+}
+
+button.footer-scroll-button--shift-up {
+  bottom: 88px;
+}

frontend/src/components/Footer.test.tsx

@@ -0,0 +1,29 @@
+import React from 'react'
+import { screen } from '@testing-library/react'
+
+import { render } from '@/test-utils'
+import { themeBreakpointValues } from '@/theme'
+import Footer from './Footer'
+
+describe('Test suite for Footer', () => {
+  it('should render Footer on large page', () => {
+    render(<Footer />, {
+      screenWidth: themeBreakpointValues.xxl,
+      withRouter: true,
+      route: '/map',
+    })
+
+    const links = screen.getAllByRole('link')
+    expect(links).toHaveLength(5)
+  })
+
+  it('should render Footer on small page with map view showing', () => {
+    render(<Footer />, {
+      screenWidth: themeBreakpointValues.sm - 10,
+      withRouter: true,
+      route: '/map',
+    })
+
+    expect(screen.queryByRole('footer')).not.toBeInTheDocument()
+  })
+})