chore(hero): duplicate template changes

src/layouts/components/Homepage/HeroBody.tsx

@@ -182,7 +182,7 @@ const HeroSideSectionLayout = ({
   errors,
   title,
   subtitle,
-  size = "50%",
+  size = "md",
   alignment = "left",
 }: HeroSideSectionProps) => {
   const { onChange } = useEditableContext()
@@ -206,7 +206,7 @@ const HeroSideSectionLayout = ({
       <Box w="100%">
         <Text textStyle="subhead-1">Section size</Text>
         <Radio.RadioGroup
-          onChange={(nextSectionSize) => {
+          onChange={(nextSectionSize: SectionSize) => {
             onChange({
               target: {
                 id: "section-0-hero-size",
@@ -217,11 +217,11 @@ const HeroSideSectionLayout = ({
           defaultValue={size}
         >
           <HStack spacing="0.5rem">
-            <Radio value="50%" size="xs" w="50%" allowDeselect={false}>
+            <Radio value="md" size="xs" w="50%" allowDeselect={false}>
               Wide
             </Radio>
             <Spacer />
-            <Radio value="33%" size="xs" w="50%" allowDeselect={false}>
+            <Radio value="sm" size="xs" w="50%" allowDeselect={false}>
               Narrow
             </Radio>
           </HStack>

src/styles/isomer-template/components/homepage/_hero.scss

@@ -1,3 +1,5 @@
+@use "sass:map";
+
 .border-solid-gray {
   border: 1px solid $border-light;
 }
@@ -10,12 +12,88 @@
   background: rgba(0, 0, 0, 0.25);
 }
 
-.hero-body-padding {
+.with-padding {
   padding: 3rem 1.5rem;
 }
 
-@media screen and (min-width: 1024px) {
+@media screen and (min-width: map.get($breakpoints, "md")) {
   .hero-floating {
     padding: 3rem;
   }
 }
+
+// NOTE: This is to keep the infobox from exceeding
+// the width of the nav-bar.
+// Hence, any changes here or on nav-bar should be
+// duplicated to the other.
+.infobox-floating-container {
+  max-width: $container-max-width;
+  margin: 0 auto;
+}
+
+.hero-background-white {
+  .hero-text-color {
+    color: $content-base;
+  }
+  background-color: $canvas-base;
+}
+
+.hero-background-black {
+  .hero-text-color {
+    color: $content-inverse;
+  }
+  background-color: $canvas-inverse;
+}
+
+.hero-background-gray {
+  .hero-text-color {
+    color: $content-inverse;
+  }
+  background-color: $canvas-translucent-grey;
+}
+
+.hero-floating-sm {
+  width: 33%;
+}
+
+.hero-floating-md {
+  width: 50%;
+}
+
+.hero-alignment-left {
+  align-self: flex-end;
+}
+
+.hero-alignment-right {
+  align-self: flex-start;
+}
+
+@media screen and (min-width: map.get($breakpoints, "xl")) {
+  .hero-side-sm {
+    width: 50%;
+  }
+
+  .side-section-infobox-container {
+    width: 576px;
+  }
+
+  .side-section-container-left {
+    text-align: right;
+    align-self: flex-end;
+  }
+
+  .side-section-container-right {
+    text-align: left;
+    align-self: flex-start;
+  }
+}
+
+@media screen and ((max-width: map.get($breakpoints, "xl") - 1)) {
+  .hero-side-sm {
+    width: 33%;
+  }
+}
+
+.hero-side-md {
+  width: 50%;
+}

src/styles/isomer-template/theme/_breakpoints.scss

@@ -1,3 +1,5 @@
+@use "sass:map";
+
 // Minimum width before a media query is triggered
 $breakpoints: (
   "": 0px,
@@ -9,4 +11,4 @@ $breakpoints: (
 );
 
 // Maximum width of site contents
-$container-max-width: 1280px;
+$container-max-width: map.get($breakpoints, "xl");

src/styles/isomer-template/theme/_display.scss

@@ -0,0 +1,14 @@
+@use "sass:map";
+
+@media screen and (min-width: map.get($breakpoints, "lg")),
+  screen and (max-width: (map.get($breakpoints, "md") - 1)) {
+  .is-visible-tablet-only {
+    display: none !important;
+  }
+}
+
+.text-truncate-ellipsis {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}

src/styles/isomer-template/theme/_index.scss

@@ -3,3 +3,4 @@
 @import "_spacing.scss";
 @import "_colors.scss";
 @import "_text-styles.scss";
+@import "_display.scss";

src/templates/homepage/HeroSection/HeroButton.tsx

@@ -7,7 +7,7 @@ interface HeroButtonProps {
 }
 export const HeroButton = ({ button }: HeroButtonProps) => (
   <>
-    {button ? (
+    {button && (
       <div
         className={getClassNames(editorStyles, [
           "bp-button",
@@ -18,6 +18,6 @@ export const HeroButton = ({ button }: HeroButtonProps) => (
       >
         {button}
       </div>
-    ) : null}
+    )}
   </>
 )

src/templates/homepage/HeroSection/HeroFloatingLayout.tsx

@@ -0,0 +1,159 @@
+// 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 */
+
+import editorStyles from "styles/isomer-cms/pages/Editor.module.scss"
+
+import { getClassNames } from "templates/utils/stylingUtils"
+
+import {
+  SectionAlignment,
+  SectionBackgroundColor,
+  SectionSize,
+} from "types/hero"
+import { EditorHeroDropdownSection } from "types/homepage"
+
+import { HeroButton } from "./HeroButton"
+import { HeroDropdown } from "./HeroDropdown"
+import { HeroInfoboxDesktop } from "./HeroInfoboxDesktop"
+import { HeroInfoboxMobile } from "./HeroInfoboxMobile"
+
+interface HeroFloatingLayoutProps {
+  alignment: SectionAlignment
+  size: SectionSize
+  url?: string
+  button?: string
+  subtitle?: string
+  title: string
+  backgroundColor: SectionBackgroundColor
+  dropdownIsActive: boolean
+  toggleDropdown: () => void
+  dropdown?: EditorHeroDropdownSection["dropdown"]
+}
+export const HeroFloatingLayout = ({
+  alignment = "left",
+  size = "md",
+  url,
+  title,
+  subtitle,
+  button,
+  backgroundColor,
+  dropdownIsActive,
+  toggleDropdown,
+  dropdown,
+}: HeroFloatingLayoutProps) => {
+  return (
+    <div
+      className={getClassNames(editorStyles, ["hero-floating", "bp-hero-body"])}
+    >
+      {/* desktop view - done using css media queries */}
+      <div
+        className={getClassNames(editorStyles, [
+          "is-hidden-touch",
+          "infobox-floating-container",
+        ])}
+      >
+        <HeroInfoboxDesktop
+          variant="floating"
+          alignment={alignment}
+          size={size}
+          url={url}
+          button={button}
+          title={title}
+          subtitle={subtitle}
+          backgroundColor={backgroundColor}
+          dropdownIsActive={dropdownIsActive}
+          toggleDropdown={toggleDropdown}
+          dropdown={dropdown}
+        />
+      </div>
+
+      {/* tablet view - done using css media queries */}
+      <div
+        className={getClassNames(editorStyles, [
+          "mb-0",
+          "is-visible-tablet-only",
+        ])}
+      >
+        <div
+          className={getClassNames(editorStyles, [
+            "p-8",
+            `hero-background-${backgroundColor}`,
+          ])}
+        >
+          <div
+            className={getClassNames(editorStyles, [
+              "is-flex",
+              `${alignment === "right" ? "flex-end" : "flex-start"}`,
+            ])}
+          >
+            <div
+              style={{
+                display: "flex",
+                flexDirection: "column",
+              }}
+            >
+              <div className={getClassNames(editorStyles, ["mb-8"])}>
+                <h1
+                  className={getClassNames(editorStyles, [
+                    "h1",
+                    "hero-text-color",
+                  ])}
+                >
+                  <b>{title}</b>
+                </h1>
+              </div>
+
+              <div
+                className={getClassNames(editorStyles, [
+                  "is-flex",
+                  `${alignment === "right" ? "flex-end" : "flex-start"}`,
+                ])}
+                style={{
+                  display: "flex",
+                  alignContent: "center",
+                }}
+              >
+                {dropdown?.title ? (
+                  <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 && (
+                    <div
+                      className={getClassNames(editorStyles, [
+                        `hero-alignment-${alignment}`,
+                      ])}
+                    >
+                      <HeroButton button={button} />
+                    </div>
+                  )
+                )}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* mobile view - done using css media queries */}
+      <div className={getClassNames(editorStyles, ["is-hidden-tablet"])}>
+        <HeroInfoboxMobile
+          dropdownIsActive={dropdownIsActive}
+          toggleDropdown={toggleDropdown}
+          dropdown={dropdown}
+          url={url}
+          button={button}
+          title={title}
+          backgroundColor={backgroundColor}
+        />
+      </div>
+    </div>
+  )
+}