From cfc140e48bd754bc24a1d1af8518247553297e60 Mon Sep 17 00:00:00 2001 From: Han Date: Tue, 19 Nov 2024 11:22:50 +0000 Subject: [PATCH] fix css build error --- src/components/DetailDialog/index.jsx | 3 +- src/components/Dialog/Dialog.styles.js | 50 +++++++++++++++++++ src/components/Dialog/index.jsx | 50 +------------------ .../FamilyHubsNetworkDetailDialog.jsx | 22 ++++++++ src/components/FamilyHubsNetwork/index.js | 1 + src/components/PinboardDialog/index.jsx | 3 +- src/components/ShareDialog/index.jsx | 2 +- src/themes/bfis/vars_bfis.jsx | 18 +------ 8 files changed, 81 insertions(+), 68 deletions(-) create mode 100644 src/components/Dialog/Dialog.styles.js create mode 100644 src/components/FamilyHubsNetwork/FamilyHubsNetworkDetailDialog.jsx diff --git a/src/components/DetailDialog/index.jsx b/src/components/DetailDialog/index.jsx index 9f9741b1..6aaf893c 100644 --- a/src/components/DetailDialog/index.jsx +++ b/src/components/DetailDialog/index.jsx @@ -12,7 +12,8 @@ import Description from "../Description" import LocalOffer from "../LocalOffer" import Loader from "../Loader" import { ButtonLink } from "../Button" -import Dialog, { Body as InheritedBody, Header, Title } from "../Dialog" +import { Body as InheritedBody, Header, Title } from "../Dialog/Dialog.styles" +import Dialog from "../Dialog" import SingleLocation from "./SingleLocation" import LocationAccordion from "./LocationAccordion" import { TickList, TickListItem } from "../TickList" diff --git a/src/components/Dialog/Dialog.styles.js b/src/components/Dialog/Dialog.styles.js new file mode 100644 index 00000000..5ff14bb1 --- /dev/null +++ b/src/components/Dialog/Dialog.styles.js @@ -0,0 +1,50 @@ +import styled from "styled-components" + +export const Icon = styled.img` + width: 30px; + height: 30px; +` + +export const CloseButton = styled.button` + position: absolute; + right: 5px; + top: 5px; + display: flex; + justify-content: center; + align-items: center; + background: none; + border: none; + cursor: pointer; + &:hover { + background: ${props => props.theme.styles.pale}; + } + &:focus { + outline: 3px solid ${props => props.theme.styles.focus}; + } +` + +export const Header = styled.header` + padding: 25px; + @media screen and (min-width: ${props => props.theme.styles.breakpointM}) { + padding: 45px; + } +` + +export const Body = styled.div` + padding: 25px; + @media screen and (min-width: ${props => props.theme.styles.breakpointM}) { + padding: 45px; + } + &:nth-of-type(even) { + background: ${props => props.theme.styles.pale}; + } +` + +export const Title = styled.h1` + color: ${props => props.theme.styles.text}; + margin-bottom: 0px; + font-size: 1.5rem; + @media screen and (min-width: ${props => props.theme.styles.breakpointM}) { + font-size: 2rem; + } +` diff --git a/src/components/Dialog/index.jsx b/src/components/Dialog/index.jsx index 2c64d6f9..071632dc 100644 --- a/src/components/Dialog/index.jsx +++ b/src/components/Dialog/index.jsx @@ -3,6 +3,7 @@ import styled from "styled-components" import { Dialog } from "@reach/dialog" import "@reach/dialog/styles.css" import close from "./close.svg" +import { Icon, CloseButton } from "./Dialog.styles" const StyledDialog = styled(Dialog)` position: relative; @@ -29,29 +30,6 @@ const StyledDialog = styled(Dialog)` } ` -export const Icon = styled.img` - width: 30px; - height: 30px; -` - -export const CloseButton = styled.button` - position: absolute; - right: 5px; - top: 5px; - display: flex; - justify-content: center; - align-items: center; - background: none; - border: none; - cursor: pointer; - &:hover { - background: ${props => props.theme.styles.pale}; - } - &:focus { - outline: 3px solid ${props => props.theme.styles.focus}; - } -` - export default ({ handleDismiss, dialogTitle, children }) => ( @@ -60,29 +38,3 @@ export default ({ handleDismiss, dialogTitle, children }) => ( {children} ) - -export const Header = styled.header` - padding: 25px; - @media screen and (min-width: ${props => props.theme.styles.breakpointM}) { - padding: 45px; - } -` - -export const Body = styled.div` - padding: 25px; - @media screen and (min-width: ${props => props.theme.styles.breakpointM}) { - padding: 45px; - } - &:nth-of-type(even) { - background: ${props => props.theme.styles.pale}; - } -` - -export const Title = styled.h1` - color: ${props => props.theme.styles.text}; - margin-bottom: 0px; - font-size: 1.5rem; - @media screen and (min-width: ${props => props.theme.styles.breakpointM}) { - font-size: 2rem; - } -` diff --git a/src/components/FamilyHubsNetwork/FamilyHubsNetworkDetailDialog.jsx b/src/components/FamilyHubsNetwork/FamilyHubsNetworkDetailDialog.jsx new file mode 100644 index 00000000..96ccfeab --- /dev/null +++ b/src/components/FamilyHubsNetwork/FamilyHubsNetworkDetailDialog.jsx @@ -0,0 +1,22 @@ +import React from "react" + +// import { theme } from "./../../themes/theme_generator" +import { FamilyHubsNetworkLogo } from "../../components/FamilyHubsNetwork" +import { Body } from "../../components/Dialog/Dialog.styles" + +export const FamilyHubsNetworkDetailDialog = () => { + return ( + <> + + +

+ 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. +

+ + + ) +} diff --git a/src/components/FamilyHubsNetwork/index.js b/src/components/FamilyHubsNetwork/index.js index 3e8974d1..f4e1bda9 100644 --- a/src/components/FamilyHubsNetwork/index.js +++ b/src/components/FamilyHubsNetwork/index.js @@ -1,2 +1,3 @@ export * from "./FamilyHubsNetworkTag" export * from "./FamilyHubsNetworkLogo" +export * from "./FamilyHubsNetworkDetailDialog" diff --git a/src/components/PinboardDialog/index.jsx b/src/components/PinboardDialog/index.jsx index d04fb044..5481baac 100644 --- a/src/components/PinboardDialog/index.jsx +++ b/src/components/PinboardDialog/index.jsx @@ -1,7 +1,8 @@ import React, { useState } from "react" import styled from "styled-components" -import Dialog, { Header, Title } from "../Dialog" +import { Header, Title } from "../Dialog/Dialog.styles" +import Dialog from "../Dialog" import { PinboardContextConsumer } from "../../contexts/pinboardContext" import ServiceCard from "../ServiceCard" import ShareDialog from "../ShareDialog" diff --git a/src/components/ShareDialog/index.jsx b/src/components/ShareDialog/index.jsx index 183b9608..e965a69f 100644 --- a/src/components/ShareDialog/index.jsx +++ b/src/components/ShareDialog/index.jsx @@ -2,7 +2,7 @@ import React, { useState } from "react" import styled from "styled-components" import { Dialog } from "@reach/dialog" -import { CloseButton, Icon } from "../Dialog" +import { CloseButton, Icon } from "../Dialog/Dialog.styles" import fetch from "isomorphic-unfetch" import { SolidButton } from "../Button" import close from "./close.svg" diff --git a/src/themes/bfis/vars_bfis.jsx b/src/themes/bfis/vars_bfis.jsx index c9a85216..3f22e4ba 100644 --- a/src/themes/bfis/vars_bfis.jsx +++ b/src/themes/bfis/vars_bfis.jsx @@ -6,9 +6,8 @@ import ResponsiveSentence from "../../components/ResponsiveSentence" import { AStrong } from "../../components/A" import { FamilyHubsNetworkTag, - FamilyHubsNetworkLogo, + FamilyHubsNetworkDetailDialog, } from "../../components/FamilyHubsNetwork" -import { Body } from "../../components/Dialog" export const vars_bfis = { slug: "bfis", @@ -204,20 +203,7 @@ export const vars_bfis = { }, DetailDialogExtra: ({ service }) => { if (service.meta?.some(m => m.key === "family-hub")) { - return ( - <> - - -

- 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. -

- - - ) + return } else { return null }