fix(hero): update panel styles for hero section (#1543)

* fix(herosidelayout): default to white bg * fix(herobody): style fixes * fix(hero): style fixes * fix(hero-image-only): change styling on small screens --------- Co-authored-by: seaerchin <[email protected]>
isomerpages · Oct 3, 2023 · 86e2ac6 · 86e2ac6
1 parent 55e0684
commit 86e2ac6
Show file tree

Hide file tree

Showing 9 changed files with 59 additions and 40 deletions.
diff --git a/src/layouts/components/Homepage/HeroBody.tsx b/src/layouts/components/Homepage/HeroBody.tsx
@@ -203,7 +203,7 @@ const HeroSideSectionLayout = ({
         title={title}
         subtitle={subtitle}
       />
-      <Box>
+      <Box w="100%">
         <Text textStyle="subhead-1">Section size</Text>
         <Radio.RadioGroup
           onChange={(nextSectionSize) => {
@@ -218,11 +218,11 @@ const HeroSideSectionLayout = ({
         >
           <HStack spacing="0.5rem">
             <Radio value="50%" size="xs" w="50%" allowDeselect={false}>
-              Half (1/2) of banner
+              Wide
             </Radio>
             <Spacer />
             <Radio value="33%" size="xs" w="50%" allowDeselect={false}>
-              Third (1/3) of banner
+              Narrow
             </Radio>
           </HStack>
         </Radio.RadioGroup>
@@ -253,24 +253,24 @@ const HeroSideSectionLayout = ({
       </Box>
       <Box w="100%">
         <Text textStyle="subhead-1">Section background colour</Text>
-        <HStack spacing="0.75rem" alignItems="flex-start">
-          <Tooltip label="black" hasArrow>
+        <HStack mt="0.5rem" spacing="0.75rem" alignItems="flex-start">
+          <Tooltip label="White" hasArrow>
             <IconButton
-              {...getIconButtonProps("black")}
-              onClick={() => onIconButtonClick("black")}
+              {...getIconButtonProps("white")}
+              onClick={() => onIconButtonClick("white")}
             >
-              <Icon as={BiInfoCircle} fill="black" fontSize="1rem" />
+              <Icon as={BiInfoCircle} fill="white" fontSize="1rem" />
             </IconButton>
           </Tooltip>
-          <Tooltip label="white" hasArrow>
+          <Tooltip label="Black" hasArrow>
             <IconButton
-              {...getIconButtonProps("white")}
-              onClick={() => onIconButtonClick("white")}
+              {...getIconButtonProps("black")}
+              onClick={() => onIconButtonClick("black")}
             >
-              <Icon as={BiInfoCircle} fill="white" fontSize="1rem" />
+              <Icon as={BiInfoCircle} fill="black" fontSize="1rem" />
             </IconButton>
           </Tooltip>
-          <Tooltip label="translucent gray" hasArrow>
+          <Tooltip label="Translucent grey" hasArrow>
             <IconButton
               {...getIconButtonProps("gray")}
               onClick={() => onIconButtonClick("gray")}
@@ -313,7 +313,7 @@ const HeroLayoutForm = ({
   }, [inView, showNewLayouts])
 
   return (
-    <Box>
+    <Box w="100%">
       {showFeatureTour && (
         <Box>
           <FeatureTourHandler
@@ -332,6 +332,7 @@ const HeroLayoutForm = ({
               <FormLabel textStyle="subhead-1">Layout</FormLabel>
               <SingleSelect
                 isClearable={false}
+                isSearchable={false}
                 name="hero layout options"
                 value={variant}
                 items={_.values(HERO_LAYOUTS)}
@@ -452,7 +453,7 @@ export const HeroBody = ({
           <Text textStyle="h5" mb="0.75rem">
             Hero Interactions
           </Text>
-          <Text textStyle="subhead-2" mb="0.25rem">
+          <Text textStyle="subhead-1" mb="0.25rem">
             Content type
           </Text>
           <Radio.RadioGroup

diff --git a/src/styles/isomer-template/components/homepage/_hero.scss b/src/styles/isomer-template/components/homepage/_hero.scss
@@ -1,3 +1,7 @@
+.border-solid-gray {
+  border: 1px solid $border-light;
+}
+
 .min-height-mobile {
   min-height: 398px;
 }

diff --git a/src/styles/isomer-template/theme/_colors.scss b/src/styles/isomer-template/theme/_colors.scss
@@ -7,3 +7,4 @@ $utility-secondary-color: var(--site-secondary-color);
 $canvas-translucent-grey: #00000080;
 $interaction-hover: #f9f9f9;
 $stroke-default: #d0d5dd;
+$border-light: #d6d6d6;
diff --git a/src/styles/isomer-template/theme/_layout.scss b/src/styles/isomer-template/theme/_layout.scss
@@ -5,3 +5,12 @@
 .w-100 {
   width: 100%;
 }
+
+.is-full-width {
+  width: 100%;
+}
+
+.is-vh-centered {
+  align-items: center;
+  justify-content: center;
+}
diff --git a/src/templates/homepage/HeroSection/HeroCenteredLayout.tsx b/src/templates/homepage/HeroSection/HeroCenteredLayout.tsx
@@ -75,7 +75,7 @@ export const HeroCenteredLayout = ({
               </p>
             ) : null}
             {/* Hero dropdown */}
-            {hero.dropdown ? (
+            {hero.dropdown.title ? (
               <HeroDropdown
                 title={hero.dropdown.title}
                 options={hero.dropdown.options}

diff --git a/src/templates/homepage/HeroSection/HeroDropdown.tsx b/src/templates/homepage/HeroSection/HeroDropdown.tsx
@@ -34,8 +34,9 @@ export const HeroDropdown = ({
   <div
     className={getClassNames(editorStyles, [
       "bp-dropdown",
-      "margin--top--sm",
       `${isActive ? "is-active" : null}`,
+      "border-solid-gray",
+      "is-full-width",
     ])}
   >
     <div className={editorStyles["bp-dropdown-trigger"]}>

diff --git a/src/templates/homepage/HeroSection/HeroImageOnlyLayout.tsx b/src/templates/homepage/HeroSection/HeroImageOnlyLayout.tsx
@@ -4,52 +4,53 @@ import { getClassNames } from "templates/utils/stylingUtils"
 
 import { EditorHeroDropdownSection } from "types/homepage"
 
+import { HeroButton } from "./HeroButton"
 import { HeroDropdown } from "./HeroDropdown"
 
 interface HeroImageOnlyLayoutProps {
   dropdown?: EditorHeroDropdownSection["dropdown"]
+  button?: string
   dropdownIsActive: boolean
   toggleDropdown: () => void
 }
 export const HeroImageOnlyLayout = ({
   dropdown,
+  button,
   dropdownIsActive,
   toggleDropdown,
 }: HeroImageOnlyLayoutProps) => {
   return (
     <div
-      className={getClassNames(editorStyles, ["bp-hero-body, with-padding"])}
+      className={getClassNames(editorStyles, [
+        "bp-hero-body, hero-body-padding",
+      ])}
     >
       <div
         className={getClassNames(editorStyles, [
           "bp-container",
           "margin--top--lg",
         ])}
       >
-        <div
-          className={getClassNames(editorStyles, [
-            "row",
-            "is-vcentered",
-            "is-centered",
-            "ma",
-          ])}
-        >
+        <div className={getClassNames(editorStyles, ["row"])}>
           <div
             className={getClassNames(editorStyles, [
               "min-height-mobile",
               "is-flex",
-              "row",
-              "is-vcentered",
-              "is-centered",
+              "is-full-width",
+              "is-vh-centered",
             ])}
           >
-            {dropdown && (
-              <HeroDropdown
-                title={dropdown.title}
-                options={dropdown.options}
-                isActive={dropdownIsActive}
-                toggleDropdown={toggleDropdown}
-              />
+            {dropdown?.title ? (
+              <div className={getClassNames(editorStyles, ["col", "is-9"])}>
+                <HeroDropdown
+                  title={dropdown.title}
+                  options={dropdown.options}
+                  isActive={dropdownIsActive}
+                  toggleDropdown={toggleDropdown}
+                />
+              </div>
+            ) : (
+              <HeroButton button={button} />
             )}
           </div>
         </div>

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

diff --git a/src/templates/homepage/HeroSection/HeroSideLayout.tsx b/src/templates/homepage/HeroSection/HeroSideLayout.tsx
@@ -75,7 +75,7 @@ const HeroInfoboxDesktop = ({
           )}
         </div>
 
-        {dropdown ? (
+        {dropdown?.title ? (
           <div
             className={getClassNames(editorStyles, ["is-flex"])}
             style={{
@@ -119,7 +119,7 @@ export const HeroSideLayout = ({
   title,
   subtitle,
   button,
-  backgroundColor,
+  backgroundColor = "white",
   dropdownIsActive,
   toggleDropdown,
   dropdown,
@@ -173,10 +173,11 @@ export const HeroSideLayout = ({
         <div
           className={getClassNames(editorStyles, [
             "p-8",
-            "row",
             "is-vcentered",
             "is-centered",
             "is-flex",
+            "col",
+            "is-9",
           ])}
           style={{
             flexDirection: "column",
@@ -191,7 +192,7 @@ export const HeroSideLayout = ({
               </b>
             </h1>
           </div>
-          {dropdown ? (
+          {dropdown?.title ? (
             <HeroDropdown
               title={dropdown.title}
               options={dropdown.options}