Update header choices

SU-SWS · Feb 29, 2024 · 9e729b3 · 9e729b3
1 parent 4c3a9e6
commit 9e729b3
Show file tree

Hide file tree

Showing 10 changed files with 177 additions and 49 deletions.
diff --git a/src/components/paragraph/index.tsx b/src/components/paragraph/index.tsx
@@ -10,7 +10,7 @@ import SulCollection from "@/components/paragraph/sul-collection";
 import SulFeaturedCollection from "@/components/paragraph/sul-featured-collection";
 import SulContactCard from "@/components/paragraph/sul-contact-card";
 import SulButton from "@/components/paragraph/sul-button";
-import {HTMLAttributes, Suspense, useId} from "react";
+import {ElementType, HTMLAttributes, Suspense, useId} from "react";
 import SulLibguides from "@/components/paragraph/sul-libguides";
 import {ParagraphUnion} from "@/lib/gql/__generated__/drupal.d";
 import {ParagraphBehaviors} from "@/lib/drupal/drupal";
@@ -25,6 +25,7 @@ const Paragraph = ({paragraph, singleRow = false, fullWidth = false, ...props}:
   const headerId = useId();
 
   const paragraphBehaviors = getParagraphBehaviors(paragraph);
+
   return (
     <>
       {paragraph.__typename === 'ParagraphStanfordCard' &&
@@ -41,6 +42,8 @@ const Paragraph = ({paragraph, singleRow = false, fullWidth = false, ...props}:
           singleRow={singleRow}
           headerId={headerId}
           fullWidth={fullWidth}
+          headingTag={(paragraphBehaviors.su_card_styles?.heading?.replace(/\..*/, '') || "h2") as ElementType}
+          hideHeading={paragraphBehaviors.su_card_styles?.hide_heading}
           {...props}
         />}
 
@@ -53,6 +56,8 @@ const Paragraph = ({paragraph, singleRow = false, fullWidth = false, ...props}:
           image={paragraph.suBannerImage}
           overlayPosition={paragraphBehaviors?.hero_pattern?.overlay_position}
           headerId={headerId}
+          headingTag={(paragraphBehaviors.hero_pattern?.heading?.replace(/\..*/, '') || "h2") as ElementType}
+          hideHeading={paragraphBehaviors.hero_pattern?.hide_heading}
           {...props}
         />
       }
@@ -83,6 +88,7 @@ const Paragraph = ({paragraph, singleRow = false, fullWidth = false, ...props}:
             behaviors={paragraphBehaviors}
             headerId={headerId}
             uuid={paragraph.id}
+            hideHeading={paragraphBehaviors.list_paragraph?.hide_heading}
             {...props}
           />
         </Suspense>
@@ -96,6 +102,7 @@ const Paragraph = ({paragraph, singleRow = false, fullWidth = false, ...props}:
           entities={paragraph.suEntityItem || []}
           styles={paragraphBehaviors?.sul_teaser_styles}
           headerId={headerId}
+          hideHeading={paragraphBehaviors.stanford_teaser?.hide_heading}
           {...props}
         />
       }

diff --git a/src/components/paragraph/stanford-banner.tsx b/src/components/paragraph/stanford-banner.tsx
@@ -3,7 +3,7 @@ import Image from "next/image";
 import Banner from "@/components/patterns/banner";
 import {buildUrl} from "@/lib/drupal/utils";
 import {MediaImage, Maybe, Link as LinkType} from "@/lib/gql/__generated__/drupal.d";
-import {HTMLAttributes} from "react";
+import {ElementType, HTMLAttributes} from "react";
 
 type Props = HTMLAttributes<HTMLDivElement> & {
   header?: Maybe<string>
@@ -14,9 +14,21 @@ type Props = HTMLAttributes<HTMLDivElement> & {
   overlayPosition?: Maybe<string>
   fullWidth?: Maybe<boolean>
   headerId?: string
+  headingTag?: ElementType
+  hideHeading?: boolean
 }
 
-const StanfordBanner = ({header, superHeader, body, image, link, overlayPosition, ...props}: Props) => {
+const StanfordBanner = ({
+  header,
+  superHeader,
+  body,
+  image,
+  link,
+  overlayPosition,
+  headingTag,
+  hideHeading,
+  ...props
+}: Props) => {
 
   const imageUrl = image?.mediaImage.url;
 
@@ -34,6 +46,8 @@ const StanfordBanner = ({header, superHeader, body, image, link, overlayPosition
       body={body}
       link={link}
       overlayPosition={overlayPosition}
+      headingTag={headingTag}
+      hideHeading={hideHeading}
       {...props}
     />
   )

diff --git a/src/components/paragraph/stanford-card.tsx b/src/components/paragraph/stanford-card.tsx
@@ -5,7 +5,7 @@ import HorizontalCard from "@/components/patterns/horizontal-card";
 import Oembed from "@/components/patterns/elements/oembed";
 import {buildUrl} from "@/lib/drupal/utils";
 import {MediaImage, Maybe, Link as LinkType} from "@/lib/gql/__generated__/drupal.d";
-import {HTMLAttributes} from "react";
+import {ElementType, HTMLAttributes} from "react";
 
 type Props = HTMLAttributes<HTMLDivElement> & {
   header?: Maybe<string>
@@ -20,9 +20,27 @@ type Props = HTMLAttributes<HTMLDivElement> & {
   fullWidth?: Maybe<boolean>
   headerId?: string
   singleRow?: Maybe<boolean>
+  headingTag?: ElementType
+  hideHeading?: boolean
 }
 
-const StanfordCard = ({headerId, header, superHeader, body, link, image, videoUrl, linkStyle, sprinklePosition, orientation, fullWidth = true, singleRow = false, ...props}: Props) => {
+const StanfordCard = ({
+  headerId,
+  header,
+  superHeader,
+  body,
+  link,
+  image,
+  videoUrl,
+  linkStyle,
+  sprinklePosition,
+  orientation,
+  headingTag = "h2",
+  fullWidth = true,
+  singleRow = false,
+  hideHeading,
+  ...props
+}: Props) => {
   const isHorizontal = orientation === 'horizontal';
 
   const imageUrl = image?.mediaImage.url;
@@ -34,7 +52,7 @@ const StanfordCard = ({headerId, header, superHeader, body, link, image, videoUr
   }
 
   return (
-    <div className={"relative" + (!isHorizontal ? " centered lg:max-w-[980px] w-full mx-auto": "")} {...props}>
+    <div className={"relative" + (!isHorizontal ? " centered lg:max-w-[980px] w-full mx-auto" : "")} {...props}>
       {isHorizontal &&
         <HorizontalCard
           video={videoUrl && <Oembed url={videoUrl} className="h-full"/>}
@@ -52,6 +70,8 @@ const StanfordCard = ({headerId, header, superHeader, body, link, image, videoUr
           backgroundSprinkles={sprinklePosition}
           fullWidth={singleRow && fullWidth}
           headerId={headerId}
+          headingLevel={headingTag}
+          hideHeading={hideHeading}
         />
       }
 
@@ -71,6 +91,8 @@ const StanfordCard = ({headerId, header, superHeader, body, link, image, videoUr
           link={link}
           linkStyle={linkStyle}
           headerId={headerId}
+          headingLevel={headingTag}
+          hideHeading={hideHeading}
         />
       }
     </div>

diff --git a/src/components/paragraph/stanford-entity.tsx b/src/components/paragraph/stanford-entity.tsx
@@ -4,6 +4,7 @@ import {DrupalLinkButton} from "@/components/patterns/link";
 import {PropsWithoutRef} from "react";
 import AboveHeaderBorder from "@/components/patterns/above-header-border";
 import {NodeUnion, Maybe, Link as LinkType} from "@/lib/gql/__generated__/drupal.d";
+import {twMerge} from "tailwind-merge";
 
 interface EntityProps extends PropsWithoutRef<any> {
   headline?: Maybe<string>
@@ -15,9 +16,19 @@ interface EntityProps extends PropsWithoutRef<any> {
     orientation?: Maybe<string>
     background?: Maybe<string>
   }
+  hideHeading?: boolean
 }
 
-const StanfordEntity = async ({headerId, headline, description, link, styles, entities = [], ...props}: EntityProps) => {
+const StanfordEntity = async ({
+  headerId,
+  headline,
+  description,
+  link,
+  styles,
+  hideHeading,
+  entities = [],
+  ...props
+}: EntityProps) => {
 
   const wrapperClasses = styles?.background === 'black' ? 'text-white py-40' : '';
 
@@ -40,7 +51,7 @@ const StanfordEntity = async ({headerId, headline, description, link, styles, en
     <div className="@container relative centered" {...props}>
       <div className={wrapperClasses}>
         {headline &&
-          <h2 id={headerId} className="text-left type-5 mb-40">
+          <h2 id={headerId} className={twMerge("text-left type-5 mb-40", hideHeading && "sr-only")}>
             <AboveHeaderBorder/>
             {headline}
           </h2>

diff --git a/src/components/paragraph/stanford-lists.tsx b/src/components/paragraph/stanford-lists.tsx
@@ -5,6 +5,7 @@ import {Maybe, Link as LinkType, ViewReference, NodeUnion} from "@/lib/gql/__gen
 import {ParagraphBehaviors} from "@/lib/drupal/drupal";
 import {graphqlClient} from "@/lib/gql/fetcher";
 import View from "@/components/views/view";
+import {twMerge} from "tailwind-merge";
 
 type ListProps = HTMLAttributes<HTMLDivElement> & {
   headline?: Maybe<string>
@@ -14,9 +15,10 @@ type ListProps = HTMLAttributes<HTMLDivElement> & {
   behaviors?: ParagraphBehaviors
   headerId?: string
   uuid: string
+  hideHeading?: boolean
 }
 
-const ListParagraph = async ({headerId, headline, description, link, view, behaviors, uuid}: ListProps) => {
+const ListParagraph = async ({headerId, headline, description, link, view, behaviors, uuid, hideHeading}: ListProps) => {
 
   const linkAttributes: Record<string, string> = {};
   if (link?.attributes?.ariaLabel) linkAttributes['aria-label'] = link.attributes.ariaLabel;
@@ -51,7 +53,7 @@ const ListParagraph = async ({headerId, headline, description, link, view, behav
     <div className="centered flex flex-col gap-xl">
       <div className="flex justify-between items-center mb-40">
         {headline &&
-          <h2 id={headerId} className="m-0">{headline}</h2>
+          <h2 id={headerId} className={twMerge("m-0", hideHeading && "sr-only")}>{headline}</h2>
         }
 
         {link?.url &&

diff --git a/src/components/patterns/banner.tsx b/src/components/patterns/banner.tsx
@@ -1,7 +1,7 @@
 import {ReactNodeLike} from "prop-types";
 import Card from "@/components/patterns/card";
 import {Maybe, Link as LinkType} from "@/lib/gql/__generated__/drupal.d";
-import {HTMLAttributes} from "react";
+import {ElementType, HTMLAttributes} from "react";
 
 type BannerProps = HTMLAttributes<HTMLDivElement> & {
   image?: Maybe<ReactNodeLike>;
@@ -11,9 +11,22 @@ type BannerProps = HTMLAttributes<HTMLDivElement> & {
   link?: Maybe<LinkType>
   overlayPosition?: Maybe<string>
   headerId?: string
+  headingTag?: ElementType
+  hideHeading?: boolean
 }
 
-const Banner = ({headerId, image, header, superHeader, body, link, overlayPosition, ...props}: BannerProps) => {
+const Banner = ({
+  headerId,
+  image,
+  header,
+  superHeader,
+  body,
+  link,
+  overlayPosition,
+  headingTag,
+  hideHeading,
+  ...props
+}: BannerProps) => {
 
   const hasCardText = header || superHeader || body || link;
 
@@ -35,6 +48,8 @@ const Banner = ({headerId, image, header, superHeader, body, link, overlayPositi
               body={body}
               link={link}
               headerId={headerId}
+              headingLevel={headingTag}
+              hideHeading={hideHeading}
             />
           </div>
         </div>

diff --git a/src/components/patterns/card.tsx b/src/components/patterns/card.tsx
@@ -4,6 +4,7 @@ import formatHtml from "@/lib/format-html";
 import {DrupalLink} from "@/components/patterns/link";
 import {ElementType} from "react";
 import {Maybe, Link as LinkType} from "@/lib/gql/__generated__/drupal.d";
+import {twMerge} from "tailwind-merge";
 
 interface CardProps {
   video?: Maybe<ReactNodeLike>
@@ -16,7 +17,8 @@ interface CardProps {
   linkStyle?: Maybe<string>
   className?: Maybe<string>
   headerId?: string
-  headingLevel?: Maybe<string>
+  headingLevel?: Maybe<ElementType>
+  hideHeading?: boolean
 }
 
 const Card = ({
@@ -29,9 +31,10 @@ const Card = ({
   body,
   link,
   linkStyle,
-  headingLevel = 'h3'
+  headingLevel,
+  hideHeading
 }: CardProps) => {
-  const Heading: ElementType = headingLevel === 'h2' ? 'h2' : 'h3';
+  const Heading: ElementType = headingLevel || "h2";
 
   const linkAttributes: Record<string, string> = {};
   if (link?.attributes?.ariaLabel) linkAttributes['aria-label'] = link.attributes.ariaLabel;
@@ -64,7 +67,7 @@ const Card = ({
         }
 
         {(header) &&
-          <Heading id={headerId} className="leading-tight font-bold type-2 mb-03em">
+          <Heading id={headerId} className={twMerge("leading-tight font-bold type-2 mb-03em", hideHeading && "sr-only")}>
             {header}
           </Heading>
         }

diff --git a/src/components/patterns/horizontal-card.tsx b/src/components/patterns/horizontal-card.tsx
@@ -7,6 +7,7 @@ import {ElementType, HTMLAttributes, useRef} from "react";
 import FullScreenBackground from "@/components/patterns/full-screen-background";
 import Link from "@/components/patterns/elements/drupal-link";
 import {Maybe, Link as LinkType} from "@/lib/gql/__generated__/drupal.d";
+import {twMerge} from "tailwind-merge";
 
 type CardProps = HTMLAttributes<HTMLDivElement> & {
   video?: Maybe<ReactNodeLike>
@@ -19,12 +20,27 @@ type CardProps = HTMLAttributes<HTMLDivElement> & {
   backgroundSprinkles?: 'top_right' | 'top_left' | 'bottom_right' | 'bottom_left'
   fullWidth?: Maybe<boolean>
   headerId?: string
-  headingLevel?: Maybe<string>
+  headingLevel?: Maybe<ElementType>
+  hideHeading?: boolean
 }
 
-const HorizontalCard = ({headerId, video, image, superHeader, header, footer, body, link, headingLevel = 'h2', fullWidth = true, backgroundSprinkles = 'top_right', ...props}: CardProps) => {
+const HorizontalCard = ({
+  headerId,
+  video,
+  image,
+  superHeader,
+  header,
+  footer,
+  body,
+  link,
+  headingLevel,
+  fullWidth = true,
+  backgroundSprinkles = 'top_right',
+  hideHeading,
+  ...props
+}: CardProps) => {
   const ref = useRef(null);
-  const Heading: ElementType = headingLevel === 'h2' ? 'h2' : 'h3';
+  const Heading: ElementType = headingLevel || 'h2';
 
   const linkAttributes: Record<string, string> = {};
   if (link?.attributes?.ariaLabel) linkAttributes['aria-label'] = link.attributes.ariaLabel;
@@ -70,7 +86,7 @@ const HorizontalCard = ({headerId, video, image, superHeader, header, footer, bo
             }
 
             {(header) &&
-              <Heading id={headerId} className="text-m5">{header}</Heading>
+              <Heading id={headerId} className={twMerge("text-m5", hideHeading && "sr-only")}>{header}</Heading>
             }
 
             {(body) &&

diff --git a/src/lib/drupal/drupal.d.ts b/src/lib/drupal/drupal.d.ts
@@ -15,14 +15,21 @@ export type ParagraphBehaviors = {
   sul_teaser_styles?: {}
   hero_pattern?: {
     overlay_position?: string
+    heading?: "h2" | "h3"| "h4"| "div.su-font-splash"
+    hide_heading?: boolean
+  }
+  su_card_styles?: {
+    heading?: "h2" | "h3"| "h4"| "div.su-font-splash"
+    hide_heading?: boolean
   }
   sul_card_styles?: {
     background_sprinkles?: "top_right" | "top_left" | "bottom_right" | "bottom_left"
     orientation?: string
     link_display_style?: string
   }
-  list_paragraph?: { hide_empty?: Maybe<boolean>, empty_message?: Maybe<string> }
+  list_paragraph?: { hide_empty?: Maybe<boolean>, empty_message?: Maybe<string>, hide_heading?: boolean }
   sul_list_styles?: { link_display_style?: Maybe<string> }
+  stanford_teaser?: {hide_heading?: boolean}
 }
 
 export type StanfordNode = BasicPage |