refactor(herobody): change section size representation

isomerpages · Oct 3, 2023 · c0e0f5b · c0e0f5b
1 parent 8342628
commit c0e0f5b
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 5 deletions.
diff --git a/src/layouts/components/Homepage/HeroBody.tsx b/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>

diff --git a/src/templates/homepage/HeroSection/HeroInfoboxDesktop.tsx b/src/templates/homepage/HeroSection/HeroInfoboxDesktop.tsx
@@ -12,6 +12,10 @@ import { EditorHeroDropdownSection } from "types/homepage"
 import { HeroButton } from "./HeroButton"
 import { HeroDropdown } from "./HeroDropdown"
 
+const getButtonStyling = (alignment: SectionAlignment = "left") => {
+  return `hero-alignment-${alignment}`
+}
+
 interface HeroInfoboxDesktopProps {
   alignment: SectionAlignment
 
@@ -119,7 +123,7 @@ export const HeroInfoboxDesktop = ({
           button && (
             <div
               className={getClassNames(editorStyles, [
-                `hero-alignment-${alignment}`,
+                `${variant === "side" ? getButtonStyling(alignment) : ""}`,
               ])}
             >
               <HeroButton button={button} />