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 * 📝
openstax · Aug 19, 2024 · c58cf5c · c58cf5c
1 parent 90c4f40
commit c58cf5c
Show file tree

Hide file tree

Showing 7 changed files with 110 additions and 27 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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 <section
+        id={id}
         className={cn('content-block-hero', {'dark-background': isDark})}
-        style={{backgroundColor, '--padding-multiplier': padding} as React.CSSProperties}
+        data-analytics-nav={analytics}
+        style={{backgroundColor,
+            '--padding-multiplier': padding,
+            '--padding-top-multiplier': paddingTop,
+            '--padding-bottom-multiplier': paddingBottom,
+            '--image-vertical-align': imageVerticalAlign
+        } as React.CSSProperties}
     >
         <div className="hero-inner-wrapper">
-          {/* the order of these children should change based on the image alignment config */}
-          <div className="hero-content">
-              <ContentBlocks data={data.value.content} />
-          </div>
-          <div className="hero-image-container">
-              <Image
-                  className="hero-image"
-                  image={data.value.image}
-                  alt={data.value.imageAlt}
-              />
-          </div>
+          {imageRight ? <>
+            <div className="hero-content" style={{textAlign}}>
+                <ContentBlocks data={data.value.content} />
+            </div>
+            <div className="hero-image-container">
+                <Image
+                    className="hero-image"
+                    image={data.value.image}
+                    alt={data.value.imageAlt}
+                />
+            </div>
+          </> : <>
+            <div className="hero-image-container">
+                <Image
+                    className="hero-image"
+                    image={data.value.image}
+                    alt={data.value.imageAlt}
+                />
+            </div>
+            <div className="hero-content" style={{textAlign}}>
+                <ContentBlocks data={data.value.content} />
+            </div>
+          </>}
         </div>
     </section>;
 }
diff --git 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
@@ -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 <section
         id={id}
         className={cn('content-block-section', {'dark-background': isDark})}
+        data-analytics-nav={analytics}
         style={{backgroundColor,
             '--padding-multiplier': padding,
             '--padding-top-multiplier': paddingTop,

diff --git a/src/app/pages/flex-page/components/Link.tsx b/src/app/pages/flex-page/components/Link.tsx
@@ -5,8 +5,8 @@ export interface LinkFields {
     text: string;
     ariaLabel?: string;
     target: {
-      type: string;
-      value: string;
+        type: string;
+        value: string;
     };
 }
 
@@ -26,5 +26,10 @@ export function Link({link, ...props}: LinkProps) {
         }
     }, [link]);
 
-    return <a aria-label={link.ariaLabel} {...props} href={link.target.value} onClick={onClick}>{link.text}</a>;
+    return <a
+        aria-label={link.ariaLabel || undefined}
+        {...props}
+        href={link.target.value}
+        onClick={onClick}
+    >{link.text}</a>;
 }