From 178edaea27bf4ac532b1d806edba39c4f7a40afd Mon Sep 17 00:00:00 2001 From: seaerchin <44049504+seaerchin@users.noreply.github.com> Date: Wed, 20 Sep 2023 16:49:08 +0800 Subject: [PATCH] feat(preview): add preview for new homepage variant (#1485) * feat(herobody): update variant in frontmatter * refactor(herosection): shift to ts * refactor(herosection): shift stuff out * refactor(hero): add css and update import * fix(hero): style fixes * fix(heorbody): update colours * refactor(herobody): use icon * refactor(hero): remove gray overlay on image only layout * fix(homepagepreview): add default if no variant * fix(use): shifted to previewpanel * fix(herodropdown): add missinng default --------- Co-authored-by: seaerchin --- src/assets/icons/BxGrayTranslucent.tsx | 46 +++ src/assets/icons/index.ts | 1 + src/constants/homepage.ts | 14 + src/layouts/EditHomepage/HomepagePreview.tsx | 7 +- .../LegacyEditHomepage/LegacyEditHomepage.jsx | 2 +- src/layouts/components/Homepage/HeroBody.tsx | 58 ++-- .../Homepage/HeroDropdownSection.tsx | 2 +- src/styles/isomer-template.scss | 2 +- src/styles/preview-panel.scss | 1 + src/styles/templates/components/hero.scss | 7 + src/templates/homepage/HeroSection.jsx | 328 ------------------ .../HeroSection/HeroCenteredLayout.tsx | 206 +++++++++++ .../HeroSection/HeroImageOnlyLayout.tsx | 27 ++ .../homepage/HeroSection/HeroSection.tsx | 158 +++++++++ src/templates/homepage/HeroSection/index.ts | 1 + src/types/homepage.ts | 14 +- 16 files changed, 507 insertions(+), 367 deletions(-) create mode 100644 src/assets/icons/BxGrayTranslucent.tsx create mode 100644 src/constants/homepage.ts create mode 100644 src/styles/templates/components/hero.scss delete mode 100644 src/templates/homepage/HeroSection.jsx create mode 100644 src/templates/homepage/HeroSection/HeroCenteredLayout.tsx create mode 100644 src/templates/homepage/HeroSection/HeroImageOnlyLayout.tsx create mode 100644 src/templates/homepage/HeroSection/HeroSection.tsx create mode 100644 src/templates/homepage/HeroSection/index.ts diff --git a/src/assets/icons/BxGrayTranslucent.tsx b/src/assets/icons/BxGrayTranslucent.tsx new file mode 100644 index 000000000..ddc5de9f4 --- /dev/null +++ b/src/assets/icons/BxGrayTranslucent.tsx @@ -0,0 +1,46 @@ +// eslint-disable-next-line import/prefer-default-export +export const BxGrayTranslucent = ( + props: React.SVGProps +): JSX.Element => { + return ( + + + + + + + + + + + + + + + + + ) +} diff --git a/src/assets/icons/index.ts b/src/assets/icons/index.ts index 26d0f33ba..a488c0e02 100644 --- a/src/assets/icons/index.ts +++ b/src/assets/icons/index.ts @@ -17,3 +17,4 @@ export * from "./BxLifeBuoy" export * from "./BxCopy" export * from "./BxDraggable" export * from "./BxDraggableVertical" +export * from "./BxGrayTranslucent" diff --git a/src/constants/homepage.ts b/src/constants/homepage.ts new file mode 100644 index 000000000..4147fadc2 --- /dev/null +++ b/src/constants/homepage.ts @@ -0,0 +1,14 @@ +export const HERO_LAYOUTS = { + CENTERED: { + value: "center", + label: "Centre-aligned text", + }, + IMAGE_ONLY: { + value: "image", + label: "Image only", + }, + SIDE_SECTION: { + value: "side", + label: "Side section", + }, +} as const diff --git a/src/layouts/EditHomepage/HomepagePreview.tsx b/src/layouts/EditHomepage/HomepagePreview.tsx index bb86e43de..9738db915 100644 --- a/src/layouts/EditHomepage/HomepagePreview.tsx +++ b/src/layouts/EditHomepage/HomepagePreview.tsx @@ -1,12 +1,11 @@ // NOTE: Below eslint disable is inherited from our legacy code :( /* eslint-disable react/no-array-index-key */ import { Ref, useState } from "react" -import { useParams } from "react-router-dom" import editorStyles from "styles/isomer-cms/pages/Editor.module.scss" import { TemplateAnnouncementsSection } from "templates/homepage/AnnouncementsSection" -import TemplateHeroSection from "templates/homepage/HeroSection" +import { TemplateHeroSection } from "templates/homepage/HeroSection" import TemplateInfobarSection from "templates/homepage/InfobarSection" import TemplateInfopicLeftSection from "templates/homepage/InfopicLeftSection" import TemplateInfopicRightSection from "templates/homepage/InfopicRightSection" @@ -39,7 +38,6 @@ export const HomepagePreview = ({ frontMatter, scrollRefs, }: HomepagePreviewProps) => { - const { siteName } = useParams<{ siteName: string }>() const [dropdownIsActive, setDropdownIsActive] = useState(false) const toggleDropdown = () => setDropdownIsActive((prevState) => !prevState) @@ -106,7 +104,8 @@ export const HomepagePreview = ({ hero={section.hero} dropdownIsActive={dropdownIsActive} toggleDropdown={toggleDropdown} - ref={scrollRefs[sectionIndex]} + ref={scrollRefs[sectionIndex] as Ref} + variant={section.hero.variant ?? "center"} /> )} diff --git a/src/layouts/LegacyEditHomepage/LegacyEditHomepage.jsx b/src/layouts/LegacyEditHomepage/LegacyEditHomepage.jsx index cdecaad41..9534bca5e 100644 --- a/src/layouts/LegacyEditHomepage/LegacyEditHomepage.jsx +++ b/src/layouts/LegacyEditHomepage/LegacyEditHomepage.jsx @@ -20,7 +20,7 @@ import useSiteColorsHook from "hooks/useSiteColorsHook" import elementStyles from "styles/isomer-cms/Elements.module.scss" import editorStyles from "styles/isomer-cms/pages/Editor.module.scss" -import TemplateHeroSection from "templates/homepage/HeroSection" +import { TemplateHeroSection } from "templates/homepage/HeroSection" import TemplateInfobarSection from "templates/homepage/InfobarSection" import TemplateInfopicLeftSection from "templates/homepage/InfopicLeftSection" import TemplateInfopicRightSection from "templates/homepage/InfopicRightSection" diff --git a/src/layouts/components/Homepage/HeroBody.tsx b/src/layouts/components/Homepage/HeroBody.tsx index 0abe1ee22..834f42065 100644 --- a/src/layouts/components/Homepage/HeroBody.tsx +++ b/src/layouts/components/Homepage/HeroBody.tsx @@ -24,11 +24,14 @@ import { BiInfoCircle } from "react-icons/bi" import { FormContext, FormError, FormTitle } from "components/Form" import FormFieldMedia from "components/FormFieldMedia" +import { HERO_LAYOUTS } from "constants/homepage" + import { useEditableContext } from "contexts/EditableContext" import { Editable } from "layouts/components/Editable" -import { HighlightOption } from "types/homepage" +import { BxGrayTranslucent } from "assets" +import { HeroBannerLayouts, HighlightOption } from "types/homepage" import { HeroDropdownFormFields } from "./HeroDropdownSection" @@ -42,33 +45,23 @@ export interface HeroBodyFormFields { background: string } -const HERO_LAYOUTS = { - CENTERED: { - value: "center", - label: "Centre-aligned text", - }, - IMAGE_ONLY: { - value: "image", - label: "Image only", - }, - SIDE_SECTION: { - value: "side", - label: "Side section", - }, -} as const - const getIconButtonProps = (color: "black" | "grey" | "white") => { return { "aria-label": `${color} background`, border: "1px solid", borderColor: "border.input.default", - bg: color, + bg: color === "grey" ? "base.divider.strong" : color, colorScheme: color, size: "sm", isRound: true, _focus: { boxShadow: "0 0 0 2px var(--chakra-colors-border-action-default)", }, + ...(color === "grey" && { + _hover: { + bg: "base.divider.strong", + }, + }), } } @@ -259,6 +252,7 @@ const HeroSideSectionLayout = ({ setSectionBackgroundColor("translucent gray")} + icon={} /> @@ -266,18 +260,18 @@ const HeroSideSectionLayout = ({ ) } -type HeroBannerLayouts = typeof HERO_LAYOUTS[keyof typeof HERO_LAYOUTS]["value"] - interface HeroLayoutFormProps { + variant: HeroBannerLayouts children: (props: { currentSelectedOption: HeroBannerLayouts }) => React.ReactNode } -const HeroLayoutForm = ({ children }: HeroLayoutFormProps): JSX.Element => { - const [currentLayout, setCurrentLayout] = useState( - HERO_LAYOUTS.CENTERED.value - ) +const HeroLayoutForm = ({ + variant, + children, +}: HeroLayoutFormProps): JSX.Element => { + const { onChange } = useEditableContext() return ( @@ -287,14 +281,22 @@ const HeroLayoutForm = ({ children }: HeroLayoutFormProps): JSX.Element => { setCurrentLayout(val as HeroBannerLayouts)} + onChange={(val) => { + onChange({ + target: { + // NOTE: Format is field type, index, section type, field + id: "section-0-hero-variant", + value: val as HeroBannerLayouts, + }, + }) + }} /> - {children({ currentSelectedOption: currentLayout })} + {children({ currentSelectedOption: variant })} ) @@ -315,9 +317,11 @@ interface HeroBodyProps extends HeroBodyFormFields { currentSelectedOption: HeroSectionType }) => React.ReactNode initialSectionType: HeroSectionType + variant: HeroBannerLayouts } export const HeroBody = ({ + variant = "center", handleHighlightDropdownToggle, notification, children, @@ -355,7 +359,7 @@ export const HeroBody = ({ - + {({ currentSelectedOption }) => { if (currentSelectedOption === HERO_LAYOUTS.CENTERED.value) { return diff --git a/src/layouts/components/Homepage/HeroDropdownSection.tsx b/src/layouts/components/Homepage/HeroDropdownSection.tsx index acf00cf23..b81968aa9 100644 --- a/src/layouts/components/Homepage/HeroDropdownSection.tsx +++ b/src/layouts/components/Homepage/HeroDropdownSection.tsx @@ -31,7 +31,7 @@ interface HeroDropdownSectionProps extends EditorHeroDropdownSection { export const HeroDropdownSection = ({ errors, - dropdown = { options: [] }, + dropdown = { options: [], title: "" }, title, }: HeroDropdownSectionProps) => { const { diff --git a/src/styles/isomer-template.scss b/src/styles/isomer-template.scss index c9dc0af44..d060852fe 100644 --- a/src/styles/isomer-template.scss +++ b/src/styles/isomer-template.scss @@ -1,4 +1,5 @@ @charset "UTF-8"; + .bg-media-color-0 { background-color: #4b268e; } @@ -10886,7 +10887,6 @@ a.navbar-link:hover { } .bp-hero-body { - background: rgba(0, 0, 0, 0.25); flex-grow: 1; flex-shrink: 0; padding: 3rem 1.5rem; diff --git a/src/styles/preview-panel.scss b/src/styles/preview-panel.scss index e91301ce2..757caa63c 100644 --- a/src/styles/preview-panel.scss +++ b/src/styles/preview-panel.scss @@ -1,4 +1,5 @@ @use "sass:meta"; +@use 'templates/components/hero.scss'; @include meta.load-css("sgds-govtech/css/sgds"); @include meta.load-css("./isomer-template.scss"); diff --git a/src/styles/templates/components/hero.scss b/src/styles/templates/components/hero.scss new file mode 100644 index 000000000..8e94019ce --- /dev/null +++ b/src/styles/templates/components/hero.scss @@ -0,0 +1,7 @@ +.min-height-mobile { + min-height: 398px; +} + +.gray-overlay { + background: rgba(0, 0, 0, 0.25); +} diff --git a/src/templates/homepage/HeroSection.jsx b/src/templates/homepage/HeroSection.jsx deleted file mode 100644 index ddb5e2c8e..000000000 --- a/src/templates/homepage/HeroSection.jsx +++ /dev/null @@ -1,328 +0,0 @@ -// NOTE: jsx-ally is disabled for this file as the output of this -// should match jekyll output as closely as possible. -// As jekyll outputs an tag like so, this behaviour is preserved here. -/* eslint-disable jsx-a11y/anchor-is-valid */ - -import PropTypes from "prop-types" -import { forwardRef } from "react" - -import { useFetchPreviewMedia } from "hooks/useFetchPreviewMedia" - -import editorStyles from "styles/isomer-cms/pages/Editor.module.scss" - -import { getClassNames } from "templates/utils/stylingUtils" - -/* eslint - react/no-array-index-key: 0 - */ - -const HeroButton = ({ button }) => ( - <> - {button ? ( -
- {button} -
- ) : null} - -) - -const HeroDropdownElem = ({ title }) => ( -
-
{title}
-
-) - -const HeroDropdown = ({ title, options, isActive, toggleDropdown }) => ( -
-