From c58cf5c91e55477c712e22f75476eec35963f968 Mon Sep 17 00:00:00 2001 From: Thomas Woodward Date: Mon, 19 Aug 2024 13:27:20 -0400 Subject: [PATCH] Flex enhancements 1 (#2662) * fix image alignment options that were unhandled * omit aria-label attribute when empty * fix margin-left on secondary cta links * add style for centered dividers * rearrange rich text margins a bit * hook up the other padding options on heroes * handle hero image alignment * analytics label and id support for sections/heroes * handle textAlign in heroed * :pencil: --- src/app/pages/flex-page/blocks/CTABlock.scss | 10 +-- .../pages/flex-page/blocks/DividerBlock.scss | 4 + src/app/pages/flex-page/blocks/HeroBlock.scss | 11 +-- src/app/pages/flex-page/blocks/HeroBlock.tsx | 80 +++++++++++++++---- .../pages/flex-page/blocks/RichTextBlock.scss | 16 ++++ .../pages/flex-page/blocks/SectionBlock.tsx | 5 ++ src/app/pages/flex-page/components/Link.tsx | 11 ++- 7 files changed, 110 insertions(+), 27 deletions(-) diff --git a/src/app/pages/flex-page/blocks/CTABlock.scss b/src/app/pages/flex-page/blocks/CTABlock.scss index 0b8d0f2e6..a52f08955 100644 --- a/src/app/pages/flex-page/blocks/CTABlock.scss +++ b/src/app/pages/flex-page/blocks/CTABlock.scss @@ -3,11 +3,6 @@ .flex-page.page div.content-block-cta-block { margin: ($normal-margin * 2) 0; - /* nth-child hack to raise speceficity */ - > a + a:nth-child(n) { - margin-left: $normal-margin; - } - > a:nth-of-type(1):not(.styled-button) { @include button(); @extend %primary; @@ -18,6 +13,11 @@ background-color: ui-color(white); @include body-font(2rem); } + + /* nth-child hack to raise specificity */ + > a + a:nth-child(n):nth-child(n) { + margin-left: $normal-margin; + } } .flex-page.page a.cta-link { diff --git a/src/app/pages/flex-page/blocks/DividerBlock.scss b/src/app/pages/flex-page/blocks/DividerBlock.scss index c84ffab90..b9e3ea8f0 100644 --- a/src/app/pages/flex-page/blocks/DividerBlock.scss +++ b/src/app/pages/flex-page/blocks/DividerBlock.scss @@ -17,6 +17,10 @@ &.align_content_right, &.align_body_right { text-align: right; } + + &.align_center { + text-align: center; + } img { height: auto; diff --git a/src/app/pages/flex-page/blocks/HeroBlock.scss b/src/app/pages/flex-page/blocks/HeroBlock.scss index 1a304ba48..21090b5d4 100644 --- a/src/app/pages/flex-page/blocks/HeroBlock.scss +++ b/src/app/pages/flex-page/blocks/HeroBlock.scss @@ -5,7 +5,7 @@ margin: 0; &.dark-background .hero-content { - color: text-color(white); + color: text-color(white); } > div.hero-inner-wrapper { @@ -17,10 +17,12 @@ grid-template: 1fr / 1fr 1fr; grid-gap: $normal-margin; - margin: auto; width: 100%; - padding: calc( #{$normal-margin} * var(--padding-multiplier, 0)) $normal-margin; max-width: var(--max-content-width); + margin: 0 auto; + padding: 0 $normal-margin; + margin-top: calc( #{$normal-margin} * var(--padding-top-multiplier, var(--padding-multiplier, 0))); + margin-bottom: calc( #{$normal-margin} * var(--padding-bottom-multiplier, var(--padding-multiplier, 0))); @include width-up-to($phone-max) { grid-template-columns: 100%; @@ -34,7 +36,6 @@ @include width-up-to($phone-max) { margin: 0 auto 2rem; - text-align: center; } } @@ -44,7 +45,7 @@ /* should change these based on the desired image alignment (if set) */ justify-content: center; - align-items: center; + align-items: var(--image-vertical-align); /* this assumes the image is wide, we can handle it better we know the image dimensions */ img { diff --git a/src/app/pages/flex-page/blocks/HeroBlock.tsx b/src/app/pages/flex-page/blocks/HeroBlock.tsx index 424d7f02c..d7404a945 100644 --- a/src/app/pages/flex-page/blocks/HeroBlock.tsx +++ b/src/app/pages/flex-page/blocks/HeroBlock.tsx @@ -7,10 +7,28 @@ import { findByType } from '../utils'; import './HeroBlock.scss'; export type HeroConfigOptions = { + type: 'text_alignment'; + value: 'left' | 'right' | 'center'; +} | { + type: 'background_color'; + value: string; +} | { type: 'padding'; value: string; } | { - type: 'background_color'; + type: 'padding_top'; + value: string; +} | { + type: 'padding_bottom'; + value: string; +} | { + type: 'analytics_label'; + value: string; +} | { + type: 'id'; + value: string; +} | { + type: 'image_alignment'; value: string; }; @@ -25,27 +43,61 @@ export interface HeroBlockConfig { }; } +const parseAlignment = (alignment: string) => { + if (alignment.includes('top')) {return 'flex-start';} + if (alignment.includes('bottom')) {return 'flex-end';} + return 'center'; +}; + export function HeroBlock({data}: {data: HeroBlockConfig}) { - const padding = findByType(data.value.config, 'padding')?.value ?? 0; + const id = findByType(data.value.config, 'id')?.value; + const textAlign = findByType(data.value.config, 'text_alignment')?.value; const backgroundColor = findByType(data.value.config, 'background_color')?.value; + const padding = findByType(data.value.config, 'padding')?.value ?? 0; + const paddingTop = findByType(data.value.config, 'padding_top')?.value; + const paddingBottom = findByType(data.value.config, 'padding_bottom')?.value; + const analytics = findByType(data.value.config, 'analytics_label')?.value; const isDark = backgroundColor && Color(backgroundColor).isDark(); // eslint-disable-line new-cap + const alignment = findByType(data.value.config, 'image_alignment')?.value.toLowerCase() ?? 'right'; + const imageRight = alignment.includes('right'); + const imageVerticalAlign = parseAlignment(alignment); + return
- {/* the order of these children should change based on the image alignment config */} -
- -
-
- {data.value.imageAlt} -
+ {imageRight ? <> +
+ +
+
+ {data.value.imageAlt} +
+ : <> +
+ {data.value.imageAlt} +
+
+ +
+ }
; } diff --git a/src/app/pages/flex-page/blocks/RichTextBlock.scss b/src/app/pages/flex-page/blocks/RichTextBlock.scss index 93450e909..8bdb6e753 100644 --- a/src/app/pages/flex-page/blocks/RichTextBlock.scss +++ b/src/app/pages/flex-page/blocks/RichTextBlock.scss @@ -1,15 +1,31 @@ @import 'pattern-library/core/pattern-library/headers'; .flex-page.page div.content-block-rich-text { + overflow: hidden; + width: 100%; + margin-bottom: 1rem; img.richtext-image.full-width { width: 100%; height: auto; } + + img.richtext-image.left { + float: left; + margin-right: $normal-margin; + } + + img.richtext-image.right { + float: right; + margin-left: $normal-margin; + } > *:first-child { margin-top: 0; } + > *:last-child { + margin-bottom: 0; + } h5, h6 { @extend %text-h4; diff --git a/src/app/pages/flex-page/blocks/SectionBlock.tsx b/src/app/pages/flex-page/blocks/SectionBlock.tsx index 231518dd0..63c2689f2 100644 --- a/src/app/pages/flex-page/blocks/SectionBlock.tsx +++ b/src/app/pages/flex-page/blocks/SectionBlock.tsx @@ -20,6 +20,9 @@ export type SectionConfigOptions = { } | { type: 'padding_bottom'; value: string; +} | { + type: 'analytics_label'; + value: string; } | { type: 'id'; value: string; @@ -41,11 +44,13 @@ export function SectionBlock({data}: {data: SectionBlockConfig}) { const padding = findByType(data.value.config, 'padding')?.value ?? 0; const paddingTop = findByType(data.value.config, 'padding_top')?.value; const paddingBottom = findByType(data.value.config, 'padding_bottom')?.value; + const analytics = findByType(data.value.config, 'analytics_label')?.value; const isDark = backgroundColor && Color(backgroundColor).isDark(); // eslint-disable-line new-cap return
{link.text}; + return {link.text}; }