From 5907d32f428054cef25c6ed71faa998f1088a0a2 Mon Sep 17 00:00:00 2001
From: Han <apricot13@users.noreply.github.com>
Date: Wed, 28 Aug 2024 14:16:18 +0100
Subject: [PATCH] TOP-222 Add link between directories in header

---
 src/App.jsx                                 |  2 ++
 src/components/ResponsiveSentence/index.jsx | 31 +++++++++++++++++++++
 src/themes/bfis-send/vars_bfis_send.jsx     | 24 ++++++++++++++++
 src/themes/bfis/vars_bfis.jsx               | 23 +++++++++++++++
 src/themes/bod/vars_bod.jsx                 | 23 +++++++++++++++
 src/themes/theme_generator.jsx              |  2 ++
 6 files changed, 105 insertions(+)
 create mode 100644 src/components/ResponsiveSentence/index.jsx

diff --git a/src/App.jsx b/src/App.jsx
index 21ec1cfc..88875531 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -340,6 +340,8 @@ const App = ({ children, location, navigate }) => {
       <Layout
         headerComponents={
           <>
+            {theme.headerComponentsBeforeSearch ??
+              theme.headerComponentsBeforeSearch}
             <SearchBar
               keywords={keywords}
               setKeywords={setKeywords}
diff --git a/src/components/ResponsiveSentence/index.jsx b/src/components/ResponsiveSentence/index.jsx
new file mode 100644
index 00000000..0b9aa5a5
--- /dev/null
+++ b/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
diff --git a/src/themes/bfis-send/vars_bfis_send.jsx b/src/themes/bfis-send/vars_bfis_send.jsx
index f1e82532..81e46e5e 100644
--- a/src/themes/bfis-send/vars_bfis_send.jsx
+++ b/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
diff --git a/src/themes/bfis/vars_bfis.jsx b/src/themes/bfis/vars_bfis.jsx
index 927e08cd..d9781fd3 100644
--- a/src/themes/bfis/vars_bfis.jsx
+++ b/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
diff --git a/src/themes/bod/vars_bod.jsx b/src/themes/bod/vars_bod.jsx
index e3040a6d..90cd9d4c 100644
--- a/src/themes/bod/vars_bod.jsx
+++ b/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
diff --git a/src/themes/theme_generator.jsx b/src/themes/theme_generator.jsx
index 095d0789..7dcd382f 100644
--- a/src/themes/theme_generator.jsx
+++ b/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,