From ad891c3a8f82d89ffc048ffcca7cbf9c6953f185 Mon Sep 17 00:00:00 2001
From: seaerchin <chin@Ers-MacBook-Pro.local>
Date: Wed, 13 Sep 2023 17:58:32 +0800
Subject: [PATCH] feat(hero): add dropdown

---
 .../HeroSection/HeroCenteredLayout.tsx        | 107 +----------
 .../homepage/HeroSection/HeroDropdown.tsx     | 100 ++++++++++
 .../homepage/HeroSection/HeroSection.tsx      |  14 +-
 .../homepage/HeroSection/HeroSideLayout.tsx   | 173 +++++++++++-------
 4 files changed, 221 insertions(+), 173 deletions(-)
 create mode 100644 src/templates/homepage/HeroSection/HeroDropdown.tsx

diff --git a/src/templates/homepage/HeroSection/HeroCenteredLayout.tsx b/src/templates/homepage/HeroSection/HeroCenteredLayout.tsx
index a132340a78..2d16c32598 100644
--- a/src/templates/homepage/HeroSection/HeroCenteredLayout.tsx
+++ b/src/templates/homepage/HeroSection/HeroCenteredLayout.tsx
@@ -1,16 +1,11 @@
-// 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 <a /> tag like so, this behaviour is preserved here.
-/* eslint-disable jsx-a11y/anchor-is-valid */
-
-/* eslint
-  react/no-array-index-key: 0
- */
-
 import editorStyles from "styles/isomer-cms/pages/Editor.module.scss"
 
 import { getClassNames } from "templates/utils/stylingUtils"
 
+import { EditorHeroDropdownSection } from "types/homepage"
+
+import { HeroDropdown } from "./HeroDropdown"
+
 interface HeroButtonProps {
   button?: string
 }
@@ -32,105 +27,13 @@ const HeroButton = ({ button }: HeroButtonProps) => (
   </>
 )
 
-interface HeroDropdownElemProps {
-  title: string
-}
-const HeroDropdownElem = ({ title }: HeroDropdownElemProps) => (
-  <div className={editorStyles["bp-dropdown-item"]}>
-    <h5>{title}</h5>
-  </div>
-)
-
-interface HeroDropdownProps {
-  title: string
-  isActive?: boolean
-  options: { title: string }[]
-  toggleDropdown: () => void
-}
-const HeroDropdown = ({
-  title,
-  options,
-  isActive,
-  toggleDropdown,
-}: HeroDropdownProps) => (
-  <div
-    className={getClassNames(editorStyles, [
-      "bp-dropdown",
-      "margin--top--sm",
-      `${isActive ? "is-active" : null}`,
-    ])}
-  >
-    <div className={editorStyles["bp-dropdown-trigger"]}>
-      <a
-        className={getClassNames(editorStyles, [
-          "bp-button",
-          "bp-dropdown-button",
-          "hero-dropdown",
-          "is-centered",
-        ])}
-        role="button"
-        tabIndex={0}
-        aria-haspopup="true"
-        aria-controls="hero-dropdown-menu"
-        onClick={toggleDropdown}
-        onKeyDown={toggleDropdown}
-      >
-        <span>
-          <b>
-            <p>{title}</p>
-          </b>
-        </span>
-        <span className={getClassNames(editorStyles, ["icon", "is-small"])}>
-          <i
-            className={getClassNames(editorStyles, [
-              "sgds-icon",
-              "sgds-icon-chevron-down",
-              "is-size-4",
-            ])}
-            aria-hidden="true"
-          />
-        </span>
-      </a>
-    </div>
-    <div
-      className={getClassNames(editorStyles, [
-        "bp-dropdown-menu",
-        "has-text-left",
-      ])}
-      id={editorStyles["hero-dropdown-menu"]}
-      role="menu"
-    >
-      <div
-        className={getClassNames(editorStyles, [
-          "bp-dropdown-content",
-          "is-centered",
-        ])}
-      >
-        {options
-          ? options.map((option, index) =>
-              option.title ? (
-                <HeroDropdownElem
-                  key={`dropdown-${index}`}
-                  title={option.title}
-                />
-              ) : null
-            )
-          : null}
-      </div>
-    </div>
-  </div>
-)
-
 interface HeroCenteredLayoutProps {
   hero: {
     background?: string
     title?: string
     subtitle?: string
     button?: string
-    dropdown: {
-      title: string
-      options: { title: string }[]
-    }
+    dropdown: EditorHeroDropdownSection["dropdown"]
   }
   dropdownIsActive: boolean
   toggleDropdown: () => void
diff --git a/src/templates/homepage/HeroSection/HeroDropdown.tsx b/src/templates/homepage/HeroSection/HeroDropdown.tsx
new file mode 100644
index 0000000000..3ddb09360b
--- /dev/null
+++ b/src/templates/homepage/HeroSection/HeroDropdown.tsx
@@ -0,0 +1,100 @@
+// 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 <a /> tag like so, this behaviour is preserved here.
+/* eslint-disable jsx-a11y/anchor-is-valid */
+
+/* eslint
+  react/no-array-index-key: 0
+ */
+import editorStyles from "styles/isomer-cms/pages/Editor.module.scss"
+
+import { getClassNames } from "templates/utils/stylingUtils"
+
+interface HeroDropdownElemProps {
+  title: string
+}
+const HeroDropdownElem = ({ title }: HeroDropdownElemProps) => (
+  <div className={editorStyles["bp-dropdown-item"]}>
+    <h5>{title}</h5>
+  </div>
+)
+
+interface HeroDropdownProps {
+  title: string
+  isActive?: boolean
+  options: { title: string }[]
+  toggleDropdown: () => void
+}
+export const HeroDropdown = ({
+  title,
+  options,
+  isActive,
+  toggleDropdown,
+}: HeroDropdownProps) => (
+  <div
+    className={getClassNames(editorStyles, [
+      "bp-dropdown",
+      "margin--top--sm",
+      `${isActive ? "is-active" : null}`,
+    ])}
+  >
+    <div className={editorStyles["bp-dropdown-trigger"]}>
+      <a
+        className={getClassNames(editorStyles, [
+          "bp-button",
+          "bp-dropdown-button",
+          "hero-dropdown",
+          "is-centered",
+        ])}
+        role="button"
+        tabIndex={0}
+        aria-haspopup="true"
+        aria-controls="hero-dropdown-menu"
+        onClick={toggleDropdown}
+        onKeyDown={toggleDropdown}
+      >
+        <span>
+          <b>
+            <p>{title}</p>
+          </b>
+        </span>
+        <span className={getClassNames(editorStyles, ["icon", "is-small"])}>
+          <i
+            className={getClassNames(editorStyles, [
+              "sgds-icon",
+              "sgds-icon-chevron-down",
+              "is-size-4",
+            ])}
+            aria-hidden="true"
+          />
+        </span>
+      </a>
+    </div>
+    <div
+      className={getClassNames(editorStyles, [
+        "bp-dropdown-menu",
+        "has-text-left",
+      ])}
+      id={editorStyles["hero-dropdown-menu"]}
+      role="menu"
+    >
+      <div
+        className={getClassNames(editorStyles, [
+          "bp-dropdown-content",
+          "is-centered",
+        ])}
+      >
+        {options
+          ? options.map((option, index) =>
+              option.title ? (
+                <HeroDropdownElem
+                  key={`dropdown-${index}`}
+                  title={option.title}
+                />
+              ) : null
+            )
+          : null}
+      </div>
+    </div>
+  </div>
+)
diff --git a/src/templates/homepage/HeroSection/HeroSection.tsx b/src/templates/homepage/HeroSection/HeroSection.tsx
index 24e39311e6..f88d086673 100644
--- a/src/templates/homepage/HeroSection/HeroSection.tsx
+++ b/src/templates/homepage/HeroSection/HeroSection.tsx
@@ -16,7 +16,7 @@ import {
   SectionBackgroundColor,
   SectionSize,
 } from "types/hero"
-import { HeroBannerLayouts } from "types/homepage"
+import { EditorHeroDropdownSection, HeroBannerLayouts } from "types/homepage"
 
 import { HeroCenteredLayout } from "./HeroCenteredLayout"
 import { HeroImageOnlyLayout } from "./HeroImageOnlyLayout"
@@ -103,10 +103,7 @@ interface TemplateHeroSectionProps {
     title?: string
     subtitle?: string
     button?: string
-    dropdown: {
-      title: string
-      options: { title: string }[]
-    }
+    dropdown: EditorHeroDropdownSection["dropdown"]
     // eslint-disable-next-line camelcase
     key_highlights: {
       title?: string
@@ -156,7 +153,12 @@ export const TemplateHeroSection = forwardRef<
           )}
           {variant === "image" && <HeroImageOnlyLayout />}
           {variant === "side" && (
-            <HeroSideLayout {...hero} title={hero.title || ""} />
+            <HeroSideLayout
+              {...hero}
+              title={hero.title || ""}
+              dropdownIsActive={dropdownIsActive}
+              toggleDropdown={toggleDropdown}
+            />
           )}
         </section>
         {/* Key highlights */}
diff --git a/src/templates/homepage/HeroSection/HeroSideLayout.tsx b/src/templates/homepage/HeroSection/HeroSideLayout.tsx
index 9961d8ea0b..e0cf609113 100644
--- a/src/templates/homepage/HeroSection/HeroSideLayout.tsx
+++ b/src/templates/homepage/HeroSection/HeroSideLayout.tsx
@@ -3,70 +3,35 @@ import editorStyles from "styles/isomer-cms/pages/Editor.module.scss"
 import { getClassNames } from "templates/utils/stylingUtils"
 
 import { SectionBackgroundColor, SectionSize } from "types/hero"
+import { EditorHeroDropdownSection } from "types/homepage"
+
+import { HeroDropdown } from "./HeroDropdown"
 
 const TRANSLUCENT_GRAY = "#00000080"
 
-interface HeroInfoboxProps {
+interface HeroInfoboxDesktopProps {
+  size: SectionSize
+  backgroundColor: SectionBackgroundColor
   title: string
   subtitle?: string
   url?: string
   button?: string
-}
-const HeroInfobox = ({ title, subtitle, url, button }: HeroInfoboxProps) => {
-  return (
-    <div className={getClassNames(editorStyles, ["py16"])}>
-      <div className={getClassNames(editorStyles, ["mb8"])}>
-        <h1 className={getClassNames(editorStyles, ["hero-title", "mb4"])}>
-          {title && (
-            <>
-              <b className={getClassNames(editorStyles, ["is-hidden-touch"])}>
-                {title}
-              </b>
-              <b className={getClassNames(editorStyles, ["is-hidden-desktop"])}>
-                {title}
-              </b>
-            </>
-          )}
-        </h1>
-
-        {subtitle && (
-          <p
-            className={getClassNames(editorStyles, [
-              "is-hidden-touch",
-              "hero-subtitle",
-            ])}
-          >
-            {subtitle}
-          </p>
-        )}
-
-        {url && button && (
-          <a
-            href="/"
-            className={getClassNames(editorStyles, [
-              "bp-button",
-              "is-secondary",
-              "is-uppercase",
-              "search-button",
-            ])}
-          >
-            {button}
-          </a>
-        )}
-      </div>
-    </div>
-  )
-}
-
-interface HeroInfoboxDesktopProps extends HeroInfoboxProps {
-  size: SectionSize
-  backgroundColor: SectionBackgroundColor
+  dropdown?: EditorHeroDropdownSection["dropdown"]
+  dropdownIsActive: boolean
+  toggleDropdown: () => void
 }
 const HeroInfoboxDesktop = ({
   size,
   backgroundColor,
-  ...rest
+  title,
+  subtitle,
+  dropdown,
+  dropdownIsActive,
+  toggleDropdown,
+  url,
+  button,
 }: HeroInfoboxDesktopProps) => {
+  console.log(dropdown)
   return (
     <div
       className={getClassNames(editorStyles, ["p16", "is-hidden-mobile"])}
@@ -76,7 +41,61 @@ const HeroInfoboxDesktop = ({
           backgroundColor === "gray" ? TRANSLUCENT_GRAY : backgroundColor,
       }}
     >
-      <HeroInfobox {...rest} />
+      <div className={getClassNames(editorStyles, ["py16"])}>
+        <div className={getClassNames(editorStyles, ["mb8"])}>
+          <h1 className={getClassNames(editorStyles, ["hero-title", "mb4"])}>
+            {title && (
+              <>
+                <b className={getClassNames(editorStyles, ["is-hidden-touch"])}>
+                  {title}
+                </b>
+                <b
+                  className={getClassNames(editorStyles, ["is-hidden-desktop"])}
+                >
+                  {title}
+                </b>
+              </>
+            )}
+          </h1>
+
+          {subtitle && (
+            <p
+              className={getClassNames(editorStyles, [
+                "is-hidden-touch",
+                "hero-subtitle",
+              ])}
+            >
+              {subtitle}
+            </p>
+          )}
+
+          {dropdown ? (
+            <HeroDropdown
+              title={dropdown.title}
+              options={dropdown.options}
+              isActive={dropdownIsActive}
+              toggleDropdown={toggleDropdown}
+            />
+          ) : (
+            // NOTE: This is to mirror the template structure
+            // as closely as possible.
+            url &&
+            button && (
+              <a
+                href="/"
+                className={getClassNames(editorStyles, [
+                  "bp-button",
+                  "is-secondary",
+                  "is-uppercase",
+                  "search-button",
+                ])}
+              >
+                {button}
+              </a>
+            )
+          )}
+        </div>
+      </div>
     </div>
   )
 }
@@ -89,6 +108,9 @@ interface HeroSideLayoutProps {
   subtitle?: string
   title: string
   backgroundColor: SectionBackgroundColor
+  dropdownIsActive: boolean
+  toggleDropdown: () => void
+  dropdown?: EditorHeroDropdownSection["dropdown"]
 }
 export const HeroSideLayout = ({
   alignment = "left",
@@ -98,6 +120,9 @@ export const HeroSideLayout = ({
   subtitle,
   button,
   backgroundColor,
+  dropdownIsActive,
+  toggleDropdown,
+  dropdown,
 }: HeroSideLayoutProps) => {
   return (
     <div className={getClassNames(editorStyles, ["bp-hero-body"])}>
@@ -110,6 +135,9 @@ export const HeroSideLayout = ({
           title={title}
           subtitle={subtitle}
           backgroundColor={backgroundColor}
+          dropdownIsActive={dropdownIsActive}
+          toggleDropdown={toggleDropdown}
+          dropdown={dropdown}
         />
       ) : (
         <div className={getClassNames(editorStyles, ["is-flex", "flex-end"])}>
@@ -120,6 +148,9 @@ export const HeroSideLayout = ({
             title={title}
             subtitle={subtitle}
             backgroundColor={backgroundColor}
+            dropdownIsActive={dropdownIsActive}
+            toggleDropdown={toggleDropdown}
+            dropdown={dropdown}
           />
         </div>
       )}
@@ -160,18 +191,30 @@ export const HeroSideLayout = ({
               </b>
             </h1>
           </div>
-          {url && button && (
-            <a
-              href="/"
-              className={getClassNames(editorStyles, [
-                "bp-button",
-                "is-secondary",
-                "is-uppercase",
-                "search-button",
-              ])}
-            >
-              {button}
-            </a>
+          {dropdown ? (
+            <HeroDropdown
+              title={dropdown.title}
+              options={dropdown.options}
+              isActive={dropdownIsActive}
+              toggleDropdown={toggleDropdown}
+            />
+          ) : (
+            // NOTE: This is to mirror the template structure
+            // as closely as possible.
+            url &&
+            button && (
+              <a
+                href="/"
+                className={getClassNames(editorStyles, [
+                  "bp-button",
+                  "is-secondary",
+                  "is-uppercase",
+                  "search-button",
+                ])}
+              >
+                {button}
+              </a>
+            )
           )}
         </div>
       </div>