diff --git a/src/layouts/components/Homepage/HeroBody.tsx b/src/layouts/components/Homepage/HeroBody.tsx index fe8732b9b..33e664743 100644 --- 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 = ({ Section size { + onChange={(nextSectionSize: SectionSize) => { onChange({ target: { id: "section-0-hero-size", @@ -217,11 +217,11 @@ const HeroSideSectionLayout = ({ defaultValue={size} > - + Wide - + Narrow diff --git a/src/styles/isomer-template/components/homepage/_hero.scss b/src/styles/isomer-template/components/homepage/_hero.scss index d6c083c09..6883c1e2c 100644 --- a/src/styles/isomer-template/components/homepage/_hero.scss +++ b/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%; +} diff --git a/src/styles/isomer-template/theme/_breakpoints.scss b/src/styles/isomer-template/theme/_breakpoints.scss index f997cad6a..e3eb92f3e 100644 --- a/src/styles/isomer-template/theme/_breakpoints.scss +++ b/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"); diff --git a/src/styles/isomer-template/theme/_display.scss b/src/styles/isomer-template/theme/_display.scss new file mode 100644 index 000000000..09fff1a29 --- /dev/null +++ b/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; +} diff --git a/src/styles/isomer-template/theme/_index.scss b/src/styles/isomer-template/theme/_index.scss index d44e97fc2..abf303e68 100644 --- a/src/styles/isomer-template/theme/_index.scss +++ b/src/styles/isomer-template/theme/_index.scss @@ -3,3 +3,4 @@ @import "_spacing.scss"; @import "_colors.scss"; @import "_text-styles.scss"; +@import "_display.scss"; diff --git a/src/styles/templates/components/hero.scss b/src/styles/templates/components/hero.scss deleted file mode 100644 index 63de907cd..000000000 --- a/src/styles/templates/components/hero.scss +++ /dev/null @@ -1,17 +0,0 @@ -.min-height-mobile { - min-height: 398px; -} - -.gray-overlay { - background: rgba(0, 0, 0, 0.25); -} - -.with-padding { - padding: 3rem 1.5rem; -} - -@media screen and (min-width: 1024px) { - .hero-floating { - padding: 3rem; - } -} diff --git a/src/templates/homepage/HeroSection/HeroButton.tsx b/src/templates/homepage/HeroSection/HeroButton.tsx index 88333afa7..b5a40984d 100644 --- a/src/templates/homepage/HeroSection/HeroButton.tsx +++ b/src/templates/homepage/HeroSection/HeroButton.tsx @@ -7,7 +7,7 @@ interface HeroButtonProps { } export const HeroButton = ({ button }: HeroButtonProps) => ( <> - {button ? ( + {button && (
( > {button}
- ) : null} + )} ) diff --git a/src/templates/homepage/HeroSection/HeroFloatingLayout.tsx b/src/templates/homepage/HeroSection/HeroFloatingLayout.tsx new file mode 100644 index 000000000..89efe727b --- /dev/null +++ b/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 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 ( +
+ {/* desktop view - done using css media queries */} +
+ +
+ + {/* tablet view - done using css media queries */} +
+
+
+
+
+

+ {title} +

+
+ +
+ {dropdown?.title ? ( + + ) : ( + // NOTE: This is to mirror the template structure + // as closely as possible. + url && + button && ( +
+ +
+ ) + )} +
+
+
+
+
+ + {/* mobile view - done using css media queries */} +
+ +
+
+ ) +} diff --git a/src/templates/homepage/HeroSection/HeroInfoboxDesktop.tsx b/src/templates/homepage/HeroSection/HeroInfoboxDesktop.tsx new file mode 100644 index 000000000..6b45783a9 --- /dev/null +++ b/src/templates/homepage/HeroSection/HeroInfoboxDesktop.tsx @@ -0,0 +1,136 @@ +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" + +const getButtonStyling = (alignment: SectionAlignment = "left") => { + return `hero-alignment-${alignment}` +} + +interface HeroInfoboxDesktopProps { + alignment: SectionAlignment + + size: SectionSize + backgroundColor: SectionBackgroundColor + title: string + subtitle?: string + url?: string + button?: string + dropdown?: EditorHeroDropdownSection["dropdown"] + dropdownIsActive: boolean + toggleDropdown: () => void + variant: "side" | "floating" +} + +const BASE_TITLE_CONTAINER_STYLES = ["mb-8", "is-flex"] + +export const HeroInfoboxDesktop = ({ + variant, + alignment = "left", + size = "md", + backgroundColor = "white", + title, + subtitle, + dropdown, + dropdownIsActive, + toggleDropdown, + url, + button, +}: HeroInfoboxDesktopProps) => { + const SIDE_SECTION_TITLE_CONTAINER_STYLES = [ + "side-section-infobox-container", + `side-section-container-${alignment}`, + ] + + return ( +
+
+
+

+ {title} +

+ + {subtitle && ( +

+ {subtitle} +

+ )} +
+ + {dropdown?.title ? ( +
+ +
+ ) : ( + // NOTE: This is to mirror the template structure + // as closely as possible. + url && + button && ( +
+ +
+ ) + )} +
+
+ ) +} diff --git a/src/templates/homepage/HeroSection/HeroInfoboxMobile.tsx b/src/templates/homepage/HeroSection/HeroInfoboxMobile.tsx new file mode 100644 index 000000000..3f06fed2d --- /dev/null +++ b/src/templates/homepage/HeroSection/HeroInfoboxMobile.tsx @@ -0,0 +1,100 @@ +import editorStyles from "styles/isomer-cms/pages/Editor.module.scss" + +import { getClassNames } from "templates/utils/stylingUtils" + +import { SectionBackgroundColor } from "types/hero" +import { EditorHeroDropdownSection } from "types/homepage" + +import { HeroDropdown } from "./HeroDropdown" + +interface HeroInfoboxMobileProps { + backgroundColor: SectionBackgroundColor + title: string + url?: string + button?: string + dropdown?: EditorHeroDropdownSection["dropdown"] + dropdownIsActive: boolean + toggleDropdown: () => void +} +export const HeroInfoboxMobile = ({ + dropdown, + dropdownIsActive, + toggleDropdown, + url, + button, + title, + backgroundColor = "white", +}: HeroInfoboxMobileProps) => { + return ( + // NOTE: We set `mb-0` on the div because we have legacy css + // dictating negative margin on row:last-child, which causes + // the bottom padding to be smaller than the top. +
+
+
+

+ + {title} + +

+
+ {dropdown?.title ? ( + + ) : ( + // NOTE: This is to mirror the template structure + // as closely as possible. + url && + button && ( + + {button} + + ) + )} +
+
+ ) +} diff --git a/src/templates/homepage/HeroSection/HeroSection.tsx b/src/templates/homepage/HeroSection/HeroSection.tsx index 68de39886..93e9cda99 100644 --- a/src/templates/homepage/HeroSection/HeroSection.tsx +++ b/src/templates/homepage/HeroSection/HeroSection.tsx @@ -19,6 +19,7 @@ import { import { EditorHeroDropdownSection, HeroBannerLayouts } from "types/homepage" import { HeroCenteredLayout } from "./HeroCenteredLayout" +import { HeroFloatingLayout } from "./HeroFloatingLayout" import { HeroImageOnlyLayout } from "./HeroImageOnlyLayout" import { HeroSideLayout } from "./HeroSideLayout" @@ -168,14 +169,12 @@ export const TemplateHeroSection = forwardRef< /> )} {variant === "floating" && ( -
- -
+ )} {/* Key highlights */} diff --git a/src/templates/homepage/HeroSection/HeroSideLayout.tsx b/src/templates/homepage/HeroSection/HeroSideLayout.tsx index e356ca009..22684ed8e 100644 --- a/src/templates/homepage/HeroSection/HeroSideLayout.tsx +++ b/src/templates/homepage/HeroSection/HeroSideLayout.tsx @@ -7,101 +7,18 @@ import editorStyles from "styles/isomer-cms/pages/Editor.module.scss" import { getClassNames } from "templates/utils/stylingUtils" -import { SectionBackgroundColor, SectionSize } from "types/hero" +import { + SectionAlignment, + SectionBackgroundColor, + SectionSize, +} from "types/hero" import { EditorHeroDropdownSection } from "types/homepage" -import { HeroButton } from "./HeroButton" -import { HeroDropdown } from "./HeroDropdown" - -const TRANSLUCENT_GRAY = "#00000080" - -interface HeroInfoboxDesktopProps { - size: SectionSize - backgroundColor: SectionBackgroundColor - title: string - subtitle?: string - url?: string - button?: string - dropdown?: EditorHeroDropdownSection["dropdown"] - dropdownIsActive: boolean - toggleDropdown: () => void -} -const HeroInfoboxDesktop = ({ - size, - backgroundColor, - title, - subtitle, - dropdown, - dropdownIsActive, - toggleDropdown, - url, - button, -}: HeroInfoboxDesktopProps) => { - return ( -
-
-
-

- {title && ( - <> - - {title} - - - {title} - - - )} -

- - {subtitle && ( -

- {subtitle} -

- )} -
- - {dropdown?.title ? ( -
- -
- ) : ( - // NOTE: This is to mirror the template structure - // as closely as possible. - url && button && - )} -
-
- ) -} +import { HeroInfoboxDesktop } from "./HeroInfoboxDesktop" +import { HeroInfoboxMobile } from "./HeroInfoboxMobile" interface HeroSideLayoutProps { - alignment: "left" | "right" + alignment: SectionAlignment size: SectionSize url?: string button?: string @@ -114,7 +31,7 @@ interface HeroSideLayoutProps { } export const HeroSideLayout = ({ alignment = "left", - size = "50%", + size = "md", url, title, subtitle, @@ -127,8 +44,10 @@ export const HeroSideLayout = ({ return (
{/* desktop view - done using css media queries */} - {alignment === "left" ? ( +
- ) : ( -
- -
- )} +
{/* mobile view - done using css media queries */} -
-
-
-

- - {title} - -

-
- {dropdown?.title ? ( - - ) : ( - // NOTE: This is to mirror the template structure - // as closely as possible. - url && - button && ( - - {button} - - ) - )} -
+
+
) diff --git a/src/types/hero.ts b/src/types/hero.ts index 3b26cdea1..611e4ccb1 100644 --- a/src/types/hero.ts +++ b/src/types/hero.ts @@ -1,4 +1,4 @@ -export type SectionSize = "50%" | "33%" +export type SectionSize = "sm" | "md" export type SectionAlignment = "left" | "right"