Merge pull request #146 from wearefuturegov/staging

Production deploy

src/App.jsx

@@ -340,6 +340,8 @@ const App = ({ children, location, navigate }) => {
       <Layout
         headerComponents={
           <>
+            {theme.headerComponentsBeforeSearch ??
+              theme.headerComponentsBeforeSearch}
             <SearchBar
               keywords={keywords}
               setKeywords={setKeywords}

src/components/ResponsiveSentence/index.jsx

@@ -0,0 +1,31 @@
+import React from "react"
+import styled from "styled-components"
+
+const SentenceWrapper = styled.div`
+  .desktop {
+    display: none;
+  }
+  .mobile {
+    display: block;
+  }
+
+  @media screen and (min-width: ${props => props.theme.styles.breakpointM}) {
+    .desktop {
+      display: block;
+    }
+    .mobile {
+      display: none;
+    }
+  }
+`
+
+const ResponsiveSentence = ({ desktop, mobile }) => {
+  return (
+    <SentenceWrapper>
+      <span className="desktop">{desktop}</span>
+      <span className="mobile">{mobile}</span>
+    </SentenceWrapper>
+  )
+}
+
+export default ResponsiveSentence

src/themes/bfis-send/vars_bfis_send.jsx

@@ -1,4 +1,7 @@
+import React from "react"
 import { vars_bfis } from "./../bfis/vars_bfis"
+import ResponsiveSentence from "../../components/ResponsiveSentence"
+import { AStrong } from "../../components/A"
 
 export const vars_bfis_send = {
   ...vars_bfis,
@@ -14,6 +17,27 @@ export const vars_bfis_send = {
     }
     return sm
   }),
+  headerComponentsBeforeSearch: (
+    <ResponsiveSentence
+      desktop={
+        <>
+          Visit the{" "}
+          <AStrong href="https://directory.familyinfo.buckinghamshire.gov.uk/">
+            FIS directory
+          </AStrong>{" "}
+          to find all activities and organisations for families.
+        </>
+      }
+      mobile={
+        <>
+          For all services visit the{" "}
+          <AStrong href="https://directory.familyinfo.buckinghamshire.gov.uk/">
+            FIS directory
+          </AStrong>
+        </>
+      }
+    />
+  ),
 }
 
 export default vars_bfis_send

src/themes/bfis/vars_bfis.jsx

@@ -2,6 +2,8 @@ import React from "react"
 import SingleStrongLink from "../../components/SingleStrongLink"
 import logo from "./logo.svg"
 import * as Styles from "../../components/Footer/Footer.styles"
+import ResponsiveSentence from "../../components/ResponsiveSentence"
+import { AStrong } from "../../components/A"
 
 export const vars_bfis = {
   slug: "bfis",
@@ -148,6 +150,27 @@ export const vars_bfis = {
       url="https://familyinfo.buckinghamshire.gov.uk/directory-how-to"
     />
   ),
+  headerComponentsBeforeSearch: (
+    <ResponsiveSentence
+      desktop={
+        <>
+          Find activities, organisations, and services for adults (aged 18 plus)
+          in our{" "}
+          <AStrong href="https://directory.buckinghamshire.gov.uk/">
+            BOD directory
+          </AStrong>
+        </>
+      }
+      mobile={
+        <>
+          For adults visit our{" "}
+          <AStrong href="https://directory.buckinghamshire.gov.uk/">
+            BOD directory
+          </AStrong>
+        </>
+      }
+    />
+  ),
 }
 
 export default vars_bfis

src/themes/bod/vars_bod.jsx

@@ -1,6 +1,8 @@
 import React from "react"
 import logo from "./logo.svg"
 import * as Styles from "../../components/Footer/Footer.styles"
+import ResponsiveSentence from "../../components/ResponsiveSentence"
+import { AStrong } from "../../components/A"
 
 export const vars_bod = {
   slug: "bod",
@@ -89,6 +91,27 @@ export const vars_bod = {
     },
   ],
   noLocationIsCountywide: true,
+  headerComponentsBeforeSearch: (
+    <ResponsiveSentence
+      desktop={
+        <>
+          Find activities, organisations, and services for families and children
+          up to 19 years (25 with SEND) in our{" "}
+          <AStrong href="https://directory.familyinfo.buckinghamshire.gov.uk/">
+            FIS directory
+          </AStrong>
+        </>
+      }
+      mobile={
+        <>
+          For families visit our{" "}
+          <AStrong href="https://directory.familyinfo.buckinghamshire.gov.uk/">
+            FIS directory
+          </AStrong>
+        </>
+      }
+    />
+  ),
 }
 
 export default vars_bod

src/themes/theme_generator.jsx

@@ -85,6 +85,8 @@ const generate_theme = (vars, theme_vars) => {
     beta: vars.hasOwnProperty("beta") ? vars.beta : false,
     headerLogo: vars.headerLogo,
     headerComponents: vars.headerComponents ?? vars.headerComponents,
+    headerComponentsBeforeSearch:
+      vars.headerComponentsBeforeSearch ?? vars.headerComponentsBeforeSearch,
     cookiesDisabledMessage: vars.cookiesDisabledMessage,
     cookieMessage: vars.cookieMessage,
     cookieName: vars.cookieName,