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 <[email protected]>
isomerpages · Sep 20, 2023 · 178edae · 178edae
1 parent 9411888
commit 178edae
Show file tree

Hide file tree

Showing 16 changed files with 507 additions and 367 deletions.
diff --git a/src/assets/icons/BxGrayTranslucent.tsx b/src/assets/icons/BxGrayTranslucent.tsx
@@ -0,0 +1,46 @@
+// eslint-disable-next-line import/prefer-default-export
+export const BxGrayTranslucent = (
+  props: React.SVGProps<SVGSVGElement>
+): JSX.Element => {
+  return (
+    <svg
+      width="40"
+      height="40"
+      viewBox="0 0 40 40"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <mask
+        id="mask0_15241_43184"
+        style={{
+          maskType: "alpha",
+        }}
+        maskUnits="userSpaceOnUse"
+        x="0"
+        y="0"
+        width="40"
+        height="40"
+      >
+        <path d="M0 0H20V40H0V0Z" fill="#EAEAEA" />
+        <path d="M26 0H34V8H26V0Z" fill="#D9D9D9" />
+        <path d="M34 8H40V16H34V8Z" fill="#D9D9D9" />
+        <path d="M18 8H26V16H18V8Z" fill="#D9D9D9" />
+        <path d="M26 16H34V24H26V16Z" fill="#D9D9D9" />
+        <path d="M34 24H40V32H34V24Z" fill="#D9D9D9" />
+        <path d="M18 24H26V32H18V24Z" fill="#D9D9D9" />
+        <path d="M26 32H34V40H26V32Z" fill="#D9D9D9" />
+      </mask>
+      <g mask="url(#mask0_15241_43184)">
+        <path
+          d="M20 2.38498e-07C22.6264 2.69818e-07 25.2272 0.517316 27.6537 1.52241C30.0802 2.5275 32.285 4.00069 34.1421 5.85787C35.9993 7.71504 37.4725 9.91982 38.4776 12.3463C39.4827 14.7728 40 17.3736 40 20C40 22.6264 39.4827 25.2272 38.4776 27.6537C37.4725 30.0802 35.9993 32.285 34.1421 34.1421C32.285 35.9993 30.0802 37.4725 27.6537 38.4776C25.2272 39.4827 22.6264 40 20 40L20 20L20 2.38498e-07Z"
+          fill="#D9D9D9"
+        />
+      </g>
+      <path
+        d="M20 40C17.3736 40 14.7728 39.4827 12.3463 38.4776C9.91982 37.4725 7.71503 35.9993 5.85786 34.1421C4.00069 32.285 2.5275 30.0802 1.52241 27.6537C0.517314 25.2272 -1.10384e-06 22.6264 -8.74228e-07 20C-6.44617e-07 17.3736 0.517315 14.7728 1.52241 12.3463C2.5275 9.91982 4.00069 7.71503 5.85787 5.85786C7.71504 4.00069 9.91982 2.5275 12.3463 1.52241C14.7728 0.517315 17.3736 -3.44415e-07 20 0L20 20L20 40Z"
+        fill="black"
+      />
+    </svg>
+  )
+}
diff --git 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
@@ -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
@@ -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<HTMLDivElement>}
+                variant={section.hero.variant ?? "center"}
               />
             </>
           )}

diff --git 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
@@ -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,25 +252,26 @@ const HeroSideSectionLayout = ({
           <IconButton
             {...getIconButtonProps("grey")}
             onClick={() => setSectionBackgroundColor("translucent gray")}
+            icon={<BxGrayTranslucent />}
           />
         </HStack>
       </Box>
     </>
   )
 }
 
-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<HeroBannerLayouts>(
-    HERO_LAYOUTS.CENTERED.value
-  )
+const HeroLayoutForm = ({
+  variant,
+  children,
+}: HeroLayoutFormProps): JSX.Element => {
+  const { onChange } = useEditableContext()
 
   return (
     <VStack spacing="1rem" align="flex-start" w="100%">
@@ -287,14 +281,22 @@ const HeroLayoutForm = ({ children }: HeroLayoutFormProps): JSX.Element => {
         <SingleSelect
           isClearable={false}
           name="hero layout options"
-          value={currentLayout}
+          value={variant}
           items={_.values(HERO_LAYOUTS)}
           // NOTE: Safe cast - the possible values are given by `HERO_LAYOUTS`
-          onChange={(val) => 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,
+              },
+            })
+          }}
         />
       </FormControl>
       <VStack spacing="1rem" w="100%">
-        {children({ currentSelectedOption: currentLayout })}
+        {children({ currentSelectedOption: variant })}
       </VStack>
     </VStack>
   )
@@ -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 = ({
           </Flex>
         </FormControl>
         <Divider my="0.25rem" />
-        <HeroLayoutForm>
+        <HeroLayoutForm variant={variant}>
           {({ currentSelectedOption }) => {
             if (currentSelectedOption === HERO_LAYOUTS.CENTERED.value) {
               return <HeroCenteredLayout {...rest} />

diff --git 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
@@ -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
@@ -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
@@ -0,0 +1,7 @@
+.min-height-mobile {
+  min-height: 398px;
+}
+
+.gray-overlay {
+  background: rgba(0, 0, 0, 0.25);
+}