family hubs logo

src/components/FamilyHubsNetwork/FamilyHubsNetworkLogo.jsx

@@ -0,0 +1,34 @@
+import React from "react"
+import styled from "styled-components"
+import text from "./family-hubs-text.png"
+import { Crosshead } from "../DetailDialog/DetailDialog.styles"
+
+const FamilyHubsNetwork = styled(Crosshead)`
+  &:before {
+    content: "";
+    display: inline-block;
+    margin-right: 8px;
+    width: 307px;
+    height: 50px;
+    background-image: url(${text});
+    background-size: cover;
+    background-position: center;
+  }
+  > span {
+    clip: rect(0 0 0 0);
+    clip-path: inset(50%);
+    height: 1px;
+    overflow: hidden;
+    position: absolute;
+    white-space: nowrap;
+    width: 1px;
+  }
+`
+
+export const FamilyHubsNetworkLogo = () => {
+  return (
+    <FamilyHubsNetwork>
+      <span>Part of Family Hub Network</span>
+    </FamilyHubsNetwork>
+  )
+}

src/components/FamilyHubsNetwork/index.js

@@ -1 +1,2 @@
 export * from "./FamilyHubsNetworkTag"
+export * from "./FamilyHubsNetworkLogo"

src/themes/bfis/vars_bfis.jsx

@@ -4,8 +4,10 @@ import logo from "./logo.svg"
 import * as Styles from "../../components/Footer/Footer.styles"
 import ResponsiveSentence from "../../components/ResponsiveSentence"
 import { AStrong } from "../../components/A"
-import { FamilyHubsNetworkTag } from "../../components/FamilyHubsNetwork"
-import { Crosshead } from "../../components/DetailDialog/DetailDialog.styles"
+import {
+  FamilyHubsNetworkTag,
+  FamilyHubsNetworkLogo,
+} from "../../components/FamilyHubsNetwork"
 
 export const vars_bfis = {
   slug: "bfis",
@@ -199,19 +201,23 @@ export const vars_bfis = {
         .length > 0
     return <>{isFamilyHub && <FamilyHubsNetworkTag />}</>
   },
-  DetailDialogExtra: service => {
-    return (
-      <>
-        <Crosshead>Part of Family Hub Network</Crosshead>
-        <p>
-          The Family Hub network helps families with babies, children, and young
-          people from birth until they turn 19 (or up to 25 for those with
-          special educational needs and disabilities). As part of the Family Hub
-          Network in Buckinghamshire, we are committed to making it easier for
-          families to get the help and support they need.
-        </p>
-      </>
-    )
+  DetailDialogExtra: ({ service }) => {
+    if (service.meta?.some(m => m.key === "family-hub")) {
+      return (
+        <>
+          <FamilyHubsNetworkLogo />
+          <p>
+            The Family Hub network helps families with babies, children, and
+            young people from birth until they turn 19 (or up to 25 for those
+            with special educational needs and disabilities). As part of the
+            Family Hub Network in Buckinghamshire, we are committed to making it
+            easier for families to get the help and support they need.
+          </p>
+        </>
+      )
+    } else {
+      return <></>
+    }
   },
 }