feat(hero): add dropdown

isomerpages · Sep 20, 2023 · 94fd7a1 · 94fd7a1
1 parent de687ad
commit 94fd7a1
Show file tree

Hide file tree

Showing 4 changed files with 220 additions and 172 deletions.
diff --git 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
@@ -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
@@ -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 */}