feat(heroimageonlylayout): add dropdown

isomerpages · Sep 20, 2023 · c362658 · c362658
1 parent 4ec6618
commit c362658
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 3 deletions.
diff --git a/src/templates/homepage/HeroSection/HeroImageOnlyLayout.tsx b/src/templates/homepage/HeroSection/HeroImageOnlyLayout.tsx
@@ -2,7 +2,20 @@ import editorStyles from "styles/isomer-cms/pages/Editor.module.scss"
 
 import { getClassNames } from "templates/utils/stylingUtils"
 
-export const HeroImageOnlyLayout = () => {
+import { EditorHeroDropdownSection } from "types/homepage"
+
+import { HeroDropdown } from "./HeroDropdown"
+
+interface HeroImageOnlyLayoutProps {
+  dropdown?: EditorHeroDropdownSection["dropdown"]
+  dropdownIsActive: boolean
+  toggleDropdown: () => void
+}
+export const HeroImageOnlyLayout = ({
+  dropdown,
+  dropdownIsActive,
+  toggleDropdown,
+}: HeroImageOnlyLayoutProps) => {
   return (
     <div
       className={getClassNames(editorStyles, ["bp-hero-body, with-padding"])}
@@ -21,7 +34,23 @@ export const HeroImageOnlyLayout = () => {
             "ma",
           ])}
         >
-          <div className={getClassNames(editorStyles, ["min-height-mobile"])} />
+          <div
+            className={getClassNames(editorStyles, [
+              "min-height-mobile",
+              "is-flex",
+              "row",
+              "is-vcentered",
+            ])}
+          >
+            {dropdown && (
+              <HeroDropdown
+                title={dropdown.title}
+                options={dropdown.options}
+                isActive={dropdownIsActive}
+                toggleDropdown={toggleDropdown}
+              />
+            )}
+          </div>
         </div>
       </div>
     </div>

diff --git a/src/templates/homepage/HeroSection/HeroSection.tsx b/src/templates/homepage/HeroSection/HeroSection.tsx
@@ -151,7 +151,13 @@ export const TemplateHeroSection = forwardRef<
               toggleDropdown={toggleDropdown}
             />
           )}
-          {variant === "image" && <HeroImageOnlyLayout />}
+          {variant === "image" && (
+            <HeroImageOnlyLayout
+              dropdown={hero.dropdown}
+              dropdownIsActive={dropdownIsActive}
+              toggleDropdown={toggleDropdown}
+            />
+          )}
           {variant === "side" && (
             <HeroSideLayout
               {...hero}