Added banner left right overlay position for banner paragraph

pookmish · Feb 28, 2024 · 3677b01 · 3677b01
1 parent 1d32657
commit 3677b01
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 7 deletions.
diff --git a/src/components/paragraphs/stanford-banner/banner-paragraph.tsx b/src/components/paragraphs/stanford-banner/banner-paragraph.tsx
@@ -1,18 +1,26 @@
 import React, {HtmlHTMLAttributes} from "react";
 import {ParagraphStanfordBanner} from "@lib/gql/__generated__/drupal.d";
 import Image from "next/image";
-import {H2} from "@components/elements/headers";
+import {H2, H3, H4} from "@components/elements/headers";
 import Wysiwyg from "@components/elements/wysiwyg";
 import Button from "@components/elements/button";
+import {getParagraphBehaviors} from "@components/paragraphs/get-paragraph-behaviors";
+import {twMerge} from "tailwind-merge";
 
 type Props = HtmlHTMLAttributes<HTMLDivElement> & {
   paragraph: ParagraphStanfordBanner
   eagerLoadImage?: boolean
 }
 
 const BannerParagraph = ({paragraph, eagerLoadImage, ...props}: Props) => {
+  const behaviors = getParagraphBehaviors(paragraph);
   const hasCard = paragraph.suBannerHeader || paragraph.suBannerButton || paragraph.suBannerBody || paragraph.suBannerSupHeader
 
+  const headerTagChoice = (behaviors.hero_pattern?.heading || 'h2').split('.', 2);
+  const headerTag = headerTagChoice[0]
+  const headerClasses = headerTagChoice[1]?.replace('.', ' ').replace('su-font-splash', 'text-m2 font-bold')
+
+
   return (
     <div {...props}>
       <div className="@container md:min-h-[400px] mb-20">
@@ -32,13 +40,25 @@ const BannerParagraph = ({paragraph, eagerLoadImage, ...props}: Props) => {
 
         {hasCard &&
           <div
-            className="w-full relative shadow-lg flex flex-col gap-10 py-20 px-10 @6xl:bg-white @6xl:max-w-[550px] @6xl:my-20 @6xl:ml-20 @6xl:z-10">
+            className={twMerge("w-full relative shadow-lg flex flex-col gap-10 py-20 px-10 @6xl:bg-white @6xl:max-w-[550px] @6xl:my-20 @6xl:z-10", behaviors.hero_pattern?.overlay_position === "right" ? "@6xl:ml-auto @6xl:mr-20" : "@6xl:mr-auto @6xl:ml-20")}>
 
             {paragraph.suBannerHeader &&
-              <H2 className="order-2 text-m2 p-0 m-0">
-                {paragraph.suBannerHeader}
-              </H2>
+              <div className={twMerge("order-2", behaviors.hero_pattern?.hide_heading && "sr-only")}>
+                {headerTag === 'h2' &&
+                  <H2 className={headerClasses}>{paragraph.suBannerHeader}</H2>
+                }
+                {headerTag === 'h3' &&
+                  <H3 className={headerClasses}>{paragraph.suBannerHeader}</H3>
+                }
+                {headerTag === 'h4' &&
+                  <H4 className={headerClasses}>{paragraph.suBannerHeader}</H4>
+                }
+                {headerTag === 'div' &&
+                  <div className={headerClasses}>{paragraph.suBannerHeader}</div>
+                }
+              </div>
             }
+
             {paragraph.suBannerSupHeader &&
               <div className="order-1 font-semibold">
                 {paragraph.suBannerSupHeader}

diff --git a/src/lib/drupal/drupal-jsonapi.d.tsx b/src/lib/drupal/drupal-jsonapi.d.tsx
@@ -1,4 +1,3 @@
-
 export type LayoutParagraphBehaviors = {
   layout: "layout_paragraphs_1_column" | "layout_paragraphs_2_column" | "layout_paragraphs_3_column" | string
   config: { label?: string }
@@ -12,13 +11,20 @@ export type ListParagraphBehaviors = {
 }
 
 export type CardParagraphBehaviors = {
-  heading?: string
+  heading?: 'h2' | 'h3' | 'h4' | 'div.su-splash-font'
   hide_heading?: boolean
   link_style?: 'action' | 'button'
 }
 
+export type BannerParagraphBehaviors = {
+  overlay_position?: 'left' | 'right'
+  heading?: 'h2' | 'h3' | 'h4' | 'div.su-splash-font'
+  hide_heading?: string
+}
+
 export type ParagraphBehaviors = {
   layout_paragraphs?: LayoutParagraphBehaviors
   list_paragraph?: ListParagraphBehaviors
   su_card_styles?: CardParagraphBehaviors
+  hero_pattern?: BannerParagraphBehaviors
 }