Use article tags when appropriate for paragraphs

SU-SWS · Mar 5, 2024 · a5efc69 · a5efc69
1 parent b36ec1f
commit a5efc69
Show file tree

Hide file tree

Showing 23 changed files with 223 additions and 148 deletions.
diff --git a/src/components/elements/link.tsx b/src/components/elements/link.tsx
@@ -14,10 +14,9 @@ const DrupalLink = ({href, className, children, ...props}: Props) => {
   href = href || '#'
   const drupalBase: string = (process.env.NEXT_PUBLIC_DRUPAL_BASE_URL || '').replace(/\/$/, '');
 
-  if (href && !href.indexOf('/files/')) {
+  if (!href.indexOf('/files/')) {
     href = href.replace(drupalBase, '').replace('<front>', '/');
   }
-  className = className && className.length > 0 ? className : undefined;
 
   if (className?.includes('link--action')) {
     return (

diff --git a/src/components/layouts/interior-page.tsx b/src/components/layouts/interior-page.tsx
@@ -27,9 +27,9 @@ const InteriorPage = async ({children, currentPath, ...props}: Props) => {
         </aside>
       }
 
-      <section className="flex-grow" id="page-content">
+      <div className="flex-grow" id="page-content">
         {children}
-      </section>
+      </div>
     </div>
   )
 }

diff --git a/src/components/nodes/cards/stanford-course/stanford-course-card.tsx b/src/components/nodes/cards/stanford-course/stanford-course-card.tsx
@@ -11,8 +11,11 @@ type Props = HtmlHTMLAttributes<HTMLDivElement> & {
 const StanfordCourseCard = ({node, headingLevel, ...props}: Props) => {
   const Heading = headingLevel === 'h3' ? H3 : H2;
   return (
-    <article aria-labelledby={node.id}
-             className="mx-auto shadow-xl border border-black-20 p-10 overflow-hidden" {...props}>
+    <article
+      aria-labelledby={node.id}
+      className="mx-auto shadow-xl border border-black-20 p-10 overflow-hidden"
+      {...props}
+    >
       <div className="flex flex-col">
         <Heading className="text-m2 order-last" id={node.id}>
           <Link href={node.path}>

diff --git a/src/components/nodes/cards/stanford-event-series/stanford-event-series-card.tsx b/src/components/nodes/cards/stanford-event-series/stanford-event-series-card.tsx
@@ -11,8 +11,11 @@ type Props = HtmlHTMLAttributes<HTMLDivElement> & {
 const StanfordEventSeriesCard = ({node, headingLevel, ...props}: Props) => {
   const Heading = headingLevel === 'h3' ? H3 : H2;
   return (
-    <article aria-labelledby={node.id}
-             className="mx-auto shadow-xl border border-black-20 p-10 overflow-hidden" {...props}>
+    <article
+      aria-labelledby={node.id}
+      className="mx-auto shadow-xl border border-black-20 p-10 overflow-hidden"
+      {...props}
+    >
       <Heading className="text-m2 [&_a]:text-black [&_a]:hocus:text-digital-red" id={node.id}>
         <Link href={node.path}>
           {node.title}

diff --git a/src/components/nodes/cards/stanford-event/stanford-event-card.tsx b/src/components/nodes/cards/stanford-event/stanford-event-card.tsx
@@ -24,8 +24,11 @@ const StanfordEventCard = ({node, headingLevel, ...props}: Props) => {
   const dateTimeString = getEventTimeString(start, end, timeZone).replace(/[^a-zA-Z0-9 ,:\-|]/, ' ');
   const Heading = headingLevel === 'h3' ? H3 : H2;
   return (
-    <article aria-labelledby={node.id}
-             className="mx-auto shadow-lg border border-black-20 p-10 flex flex-col gap-5 overflow-hidden" {...props}>
+    <article
+      aria-labelledby={node.id}
+      className="mx-auto shadow-lg border border-black-20 p-10 flex flex-col gap-5 overflow-hidden"
+      {...props}
+    >
       <div aria-hidden className="flex flex-col items-start w-fit">
         <div className="text-m0 font-semibold mb-4 w-full text-center">
           {startMonth.toUpperCase()}

diff --git a/src/components/nodes/cards/stanford-news/stanford-news-card.tsx b/src/components/nodes/cards/stanford-news/stanford-news-card.tsx
@@ -23,7 +23,11 @@ const StanfordNewsCard = ({node, headingLevel, ...props}: Props) => {
   }) : undefined;
 
   return (
-    <article aria-labelledby={node.id} className="mx-auto shadow-xl border border-black-20 overflow-hidden" {...props}>
+    <article
+      aria-labelledby={node.id}
+      className="mx-auto shadow-xl border border-black-20 overflow-hidden"
+      {...props}
+    >
 
       {image?.url &&
         <div className="relative aspect-[16/9] w-full">

diff --git a/src/components/nodes/cards/stanford-page/stanford-page-card.tsx b/src/components/nodes/cards/stanford-page/stanford-page-card.tsx
@@ -16,7 +16,11 @@ const StanfordPageCard = ({node, headingLevel, ...props}: Props) => {
 
   const Heading = headingLevel === 'h3' ? H3 : H2;
   return (
-    <article aria-labelledby={node.id} className="mx-auto shadow-xl border border-black-20 overflow-hidden" {...props}>
+    <article
+      aria-labelledby={node.id}
+      className="mx-auto shadow-xl border border-black-20 overflow-hidden"
+      {...props}
+    >
       {image &&
         <div
           className="relative aspect-[16/9] w-full">

diff --git a/src/components/nodes/cards/stanford-person/stanford-person-card.tsx b/src/components/nodes/cards/stanford-person/stanford-person-card.tsx
@@ -14,7 +14,11 @@ const StanfordPersonCard = ({node, headingLevel, ...props}: Props) => {
 
   const Heading = headingLevel === 'h3' ? H3 : H2;
   return (
-    <article aria-labelledby={node.id} className="mx-auto text-center overflow-hidden" {...props}>
+    <article
+      aria-labelledby={node.id}
+      className="mx-auto text-center overflow-hidden"
+      {...props}
+    >
       {imageUrl &&
         <div className="relative aspect-[1/1] mx-auto mb-20 w-3/5">
           <Image

diff --git a/src/components/nodes/cards/stanford-policy/stanford-policy-card.tsx b/src/components/nodes/cards/stanford-policy/stanford-policy-card.tsx
@@ -19,9 +19,11 @@ const StanfordPolicyCard = ({node, headingLevel, ...props}: Props) => {
 
   const teaserSummary = node.body?.summary || (trimmedBodyText + '...');
   return (
-    <article aria-labelledby={node.id}
-             className="mx-auto shadow-xl border border-black-20 p-10 overflow-hidden" {...props}>
-
+    <article
+      aria-labelledby={node.id}
+      className="mx-auto shadow-xl border border-black-20 p-10 overflow-hidden"
+      {...props}
+    >
       <Heading className="text-m2" id={node.id}>
         <Link href={node.path}>
           {node.title}

diff --git a/src/components/nodes/cards/stanford-publication/stanford-publication-card.tsx b/src/components/nodes/cards/stanford-publication/stanford-publication-card.tsx
@@ -11,8 +11,11 @@ type Props = HtmlHTMLAttributes<HTMLDivElement> & {
 const StanfordPublicationCard = ({node, headingLevel, ...props}: Props) => {
   const Heading = headingLevel === 'h3' ? H3 : H2;
   return (
-    <article aria-labelledby={node.id}
-             className="mx-auto shadow-xl border border-black-20 p-10 overflow-hidden" {...props}>
+    <article
+      aria-labelledby={node.id}
+      className="mx-auto shadow-xl border border-black-20 p-10 overflow-hidden"
+      {...props}
+    >
 
       <div className="flex flex-col">
         <Heading className="text-m2 order-last [&_a]:text-black [&_a]:hocus:text-digital-red" id={node.id}>

diff --git a/src/components/nodes/list-item/stanford-course/stanford-course-list-item.tsx b/src/components/nodes/list-item/stanford-course/stanford-course-list-item.tsx
@@ -11,7 +11,10 @@ type Props = HtmlHTMLAttributes<HTMLDivElement> & {
 const StanfordCourseListItem = ({node, headingLevel, ...props}: Props) => {
   const Heading = headingLevel === 'h3' ? H3 : H2;
   return (
-    <article aria-labelledby={node.id} {...props}>
+    <article
+      aria-labelledby={node.id}
+      {...props}
+    >
       <Heading className="text-m2" id={node.id}>
         <Link href={node.path}>
           {node.title}

diff --git a/src/components/nodes/list-item/stanford-event-series/stanford-event-series-list-item.tsx b/src/components/nodes/list-item/stanford-event-series/stanford-event-series-list-item.tsx
@@ -11,8 +11,11 @@ type Props = HtmlHTMLAttributes<HTMLDivElement> & {
 const StanfordEventSeriesListItem = ({node, headingLevel, ...props}: Props) => {
   const Heading = headingLevel === 'h3' ? H3 : H2;
   return (
-    <article aria-labelledby={node.id}
-             className="max-w-[500px] w-full mx-auto shadow-xl border border-black-20 p-10" {...props}>
+    <article
+      aria-labelledby={node.id}
+      className="max-w-[500px] w-full mx-auto shadow-xl border border-black-20 p-10"
+      {...props}
+    >
 
       <Heading className="text-m2" id={node.id}>
         <Link href={node.path}>

diff --git a/src/components/nodes/list-item/stanford-event/stanford-event-list-item.tsx b/src/components/nodes/list-item/stanford-event/stanford-event-list-item.tsx
@@ -25,7 +25,11 @@ const StanfordEventListItem = ({node, headingLevel, ...props}: Props) => {
   const Heading = headingLevel === 'h3' ? H3 : H2;
 
   return (
-    <article aria-labelledby={node.id} className="w-full mx-auto py-10 flex gap-10" {...props}>
+    <article
+      aria-labelledby={node.id}
+      className="w-full mx-auto py-10 flex gap-10"
+      {...props}
+    >
       <div aria-hidden className="flex flex-col items-start w-fit">
         <div className="text-m0 font-semibold mb-4 w-full text-center">
           {startMonth.toUpperCase()}

diff --git a/src/components/nodes/list-item/stanford-news/stanford-news-list-item.tsx b/src/components/nodes/list-item/stanford-news/stanford-news-list-item.tsx
@@ -23,7 +23,11 @@ const StanfordNewsListItem = ({node, headingLevel, ...props}: Props) => {
   }) : undefined;
 
   return (
-    <article aria-labelledby={node.id} className="@container" {...props}>
+    <article
+      aria-labelledby={node.id}
+      className="@container"
+      {...props}
+    >
       <div className="flex w-full justify-between flex-col @3xl:flex-row py-10">
         <div className="order-2 @3xl::order-1">
 

diff --git a/src/components/nodes/list-item/stanford-page/stanford-page-list-item.tsx b/src/components/nodes/list-item/stanford-page/stanford-page-list-item.tsx
@@ -16,7 +16,11 @@ const StanfordPageListItem = ({node, headingLevel, ...props}: Props) => {
 
   const Heading = headingLevel === 'h3' ? H3 : H2;
   return (
-    <article aria-labelledby={node.id} className="@container py-10 ">
+    <article
+      aria-labelledby={node.id}
+      className="@container py-10"
+      {...props}
+    >
       <div className="flex flex-col @4xl:flex-row justify-between gap-20" {...props}>
         <div className="order-2 @4xl:order-1">
           <Heading className="text-m2" id={node.id}>

diff --git a/src/components/nodes/list-item/stanford-person/stanford-person-list-item.tsx b/src/components/nodes/list-item/stanford-person/stanford-person-list-item.tsx
@@ -14,7 +14,11 @@ const StanfordPersonListItem = ({node, headingLevel, ...props}: Props) => {
 
   const Heading = headingLevel === 'h3' ? H3 : H2;
   return (
-    <article aria-labelledby={node.id} className="max-w-[500px] w-full mx-auto shadow-lg p-20 text-center" {...props}>
+    <article
+      aria-labelledby={node.id}
+      className="max-w-[500px] w-full mx-auto shadow-lg p-20 text-center"
+      {...props}
+    >
       {imageUrl &&
         <div className="relative aspect-[1/1] w-full mx-auto mb-20">
           <Image

diff --git a/src/components/nodes/list-item/stanford-policy/stanford-policy-list-item.tsx b/src/components/nodes/list-item/stanford-policy/stanford-policy-list-item.tsx
@@ -13,7 +13,8 @@ const StanfordPolicyListItem = ({node, headingLevel, ...props}: Props) => {
   return (
     <article
       aria-labelledby={node.id}
-      className="max-w-[500px] w-full mx-auto shadow-xl border border-black-20 p-10" {...props}
+      className="max-w-[500px] w-full mx-auto shadow-xl border border-black-20 p-10"
+      {...props}
     >
 
       <Heading className="text-m2" id={node.id}>

diff --git a/src/components/nodes/list-item/stanford-publication/stanford-publication-list-item.tsx b/src/components/nodes/list-item/stanford-publication/stanford-publication-list-item.tsx
@@ -11,8 +11,11 @@ type Props = HtmlHTMLAttributes<HTMLDivElement> & {
 const StanfordPublicationListItem = ({node, headingLevel, ...props}: Props) => {
   const Heading = headingLevel === 'h3' ? H3 : H2;
   return (
-    <article aria-labelledby={node.id}
-             className="max-w-[500px] w-full mx-auto shadow-xl border border-black-20 p-10" {...props}>
+    <article
+      aria-labelledby={node.id}
+      className="max-w-[500px] w-full mx-auto shadow-xl border border-black-20 p-10"
+      {...props}
+    >
       <div className="flex flex-col">
         <Heading className="text-m2 order-first" id={node.id}>
           <Link href={node.path}>

diff --git a/src/components/paragraphs/stanford-banner/banner-paragraph.tsx b/src/components/paragraphs/stanford-banner/banner-paragraph.tsx
@@ -1,4 +1,4 @@
-import React, {HtmlHTMLAttributes} from "react";
+import React, {ElementType, HtmlHTMLAttributes} from "react";
 import {ParagraphStanfordBanner} from "@lib/gql/__generated__/drupal.d";
 import Image from "next/image";
 import {H2, H3, H4} from "@components/elements/headers";
@@ -20,65 +20,67 @@ const BannerParagraph = ({paragraph, eagerLoadImage, ...props}: Props) => {
   const headerTag = headerTagChoice[0]
   const headerClasses = headerTagChoice[1]?.replace('.', ' ').replace('su-font-splash', 'text-m2 font-bold')
 
+  const BannerWrapper: ElementType = paragraph.suBannerHeader ? 'article' : 'div';
 
   return (
-    <div {...props}>
-      <div className="@container md:min-h-[400px] rs-mb-5">
-        <div
-          className="aspect-[16/9] @6xl:aspect-auto relative @6xl:absolute w-full @6xl:h-full bg-cool-grey">
-          {paragraph.suBannerImage?.mediaImage.url &&
-            <Image
-              className="object-cover"
-              src={paragraph.suBannerImage.mediaImage.url}
-              alt={paragraph.suBannerImage.mediaImage.alt || ""}
-              loading={eagerLoadImage ? "eager" : "lazy"}
-              fill
-              sizes="100vw"
-            />
-          }
-        </div>
-
-        {hasCard &&
-          <div
-            className={twMerge("w-full relative shadow-lg flex flex-col gap-10 rs-p-2 @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")}>
+    <BannerWrapper
+      className="@container md:min-h-[400px] rs-mb-5"
+      aria-labelledby={paragraph.suBannerHeader ? paragraph.id : undefined}
+      {...props}
+    >
+      <div
+        className="aspect-[16/9] @6xl:aspect-auto relative @6xl:absolute w-full @6xl:h-full bg-cool-grey">
+        {paragraph.suBannerImage?.mediaImage.url &&
+          <Image
+            className="object-cover"
+            src={paragraph.suBannerImage.mediaImage.url}
+            alt={paragraph.suBannerImage.mediaImage.alt || ""}
+            loading={eagerLoadImage ? "eager" : "lazy"}
+            fill
+            sizes="100vw"
+          />
+        }
+      </div>
 
-            {paragraph.suBannerHeader &&
-              <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>
-            }
+      {hasCard &&
+        <div
+          className={twMerge("w-full relative shadow-lg flex flex-col gap-10 rs-p-2 @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.suBannerSupHeader &&
-              <div className="order-1 text-09em font-semibold">
-                {paragraph.suBannerSupHeader}
-              </div>
-            }
+          {paragraph.suBannerHeader &&
+            <div id={paragraph.id} 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>
+          }
 
-            <Wysiwyg html={paragraph.suBannerBody?.processed} className="order-3 text-m0"/>
+          {paragraph.suBannerSupHeader &&
+            <div className="order-1 text-09em font-semibold">
+              {paragraph.suBannerSupHeader}
+            </div>
+          }
 
-            {paragraph.suBannerButton?.url &&
-              <div className="order-4">
-                <Button href={paragraph.suBannerButton.url}>
-                  {paragraph.suBannerButton.title}
-                </Button>
-              </div>
-            }
-          </div>
-        }
+          <Wysiwyg html={paragraph.suBannerBody?.processed} className="order-3 text-m0"/>
 
-      </div>
-    </div>
+          {paragraph.suBannerButton?.url &&
+            <div className="order-4">
+              <Button href={paragraph.suBannerButton.url}>
+                {paragraph.suBannerButton.title}
+              </Button>
+            </div>
+          }
+        </div>
+      }
+    </BannerWrapper>
   )
 }
 export default BannerParagraph