Updated heading behaviors for list and teaser paragraphs

SU-SWS · Mar 11, 2024 · c4ea1b6 · c4ea1b6
1 parent d32eb9f
commit c4ea1b6
Show file tree

Hide file tree

Showing 6 changed files with 100 additions and 102 deletions.
diff --git a/package.json b/package.json
@@ -15,22 +15,22 @@
     "@formkit/auto-animate": "^0.8.1",
     "@heroicons/react": "^2.1.1",
     "@mui/base": "^5.0.0-beta.38",
-    "@next/third-parties": "^14.1.2",
+    "@next/third-parties": "^14.1.3",
     "@tailwindcss/container-queries": "^0.1.1",
     "@tailwindcss/typography": "^0.5.10",
     "@tanstack/react-query": "^5.25.0",
     "@types/node": "^20.11.25",
-    "@types/react": "^18.2.63",
+    "@types/react": "^18.2.64",
     "autoprefixer": "^10.4.18",
     "axios": "^1.6.7",
-    "critters": "^0.0.21",
+    "critters": "^0.0.22",
     "decanter": "^7.2.0",
     "graphql": "^16.8.1",
     "graphql-request": "^6.1.0",
     "graphql-tag": "^2.12.6",
     "html-react-parser": "^5.1.8",
     "jsona": "^1.12.1",
-    "next": "^14.1.2",
+    "next": "^14.1.3",
     "next-drupal": "^1.6.0",
     "postcss": "^8.4.35",
     "react": "^18.2.0",
@@ -46,7 +46,7 @@
     "tailwind-merge": "^2.2.1",
     "tailwindcss": "^3.4.1",
     "typescript": "^5.4.2",
-    "usehooks-ts": "^2.16.0"
+    "usehooks-ts": "^3.0.1"
   },
   "devDependencies": {
     "@graphql-codegen/cli": "5.0.2",
@@ -55,7 +55,7 @@
     "@graphql-codegen/typescript-operations": "4.2.0",
     "@types/qs": "^6.9.12",
     "eslint": "^8.57.0",
-    "eslint-config-next": "^14.1.2",
+    "eslint-config-next": "^14.1.3",
     "eslint-plugin-deprecation": "^2.0.0",
     "eslint-plugin-unused-imports": "^3.1.0"
   },

diff --git a/src/components/paragraph/index.tsx b/src/components/paragraph/index.tsx
@@ -88,7 +88,7 @@ const Paragraph = ({paragraph, singleRow = false, fullWidth = false, ...props}:
             behaviors={paragraphBehaviors}
             headerId={headerId}
             uuid={paragraph.id}
-            hideHeading={paragraphBehaviors.list_paragraph?.hide_heading}
+            headingBehavior={paragraphBehaviors.list_paragraph?.heading_behavior}
             {...props}
           />
         </Suspense>
@@ -102,7 +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}
+          headingBehavior={paragraphBehaviors.stanford_teaser?.heading_behavior}
           {...props}
         />
       }

diff --git a/src/components/paragraph/stanford-entity.tsx b/src/components/paragraph/stanford-entity.tsx
@@ -16,7 +16,7 @@ interface EntityProps extends PropsWithoutRef<any> {
     orientation?: Maybe<string>
     background?: Maybe<string>
   }
-  hideHeading?: boolean
+  headingBehavior?: Maybe<'show' | 'hide' | 'remove'>
 }
 
 const StanfordEntity = async ({
@@ -25,7 +25,7 @@ const StanfordEntity = async ({
   description,
   link,
   styles,
-  hideHeading,
+  headingBehavior,
   entities = [],
   ...props
 }: EntityProps) => {
@@ -50,8 +50,8 @@ const StanfordEntity = async ({
   return (
     <div className="@container relative centered" {...props}>
       <div className={wrapperClasses}>
-        {headline &&
-          <h2 id={headerId} className={twMerge("text-left type-5 mb-40", hideHeading && "sr-only")}>
+        {(headline && headingBehavior !== "remove") &&
+          <h2 id={headerId} className={twMerge("text-left type-5 mb-40", headingBehavior === "hide" && "sr-only")}>
             <AboveHeaderBorder/>
             {headline}
           </h2>

diff --git a/src/components/paragraph/stanford-lists.tsx b/src/components/paragraph/stanford-lists.tsx
@@ -15,10 +15,10 @@ type ListProps = HTMLAttributes<HTMLDivElement> & {
   behaviors?: ParagraphBehaviors
   headerId?: string
   uuid: string
-  hideHeading?: boolean
+  headingBehavior?: Maybe<'show' | 'hide' | 'remove'>
 }
 
-const ListParagraph = async ({headerId, headline, description, link, view, behaviors, uuid, hideHeading}: ListProps) => {
+const ListParagraph = async ({headerId, headline, description, link, view, behaviors, uuid, headingBehavior}: ListProps) => {
 
   const linkAttributes: Record<string, string> = {};
   if (link?.attributes?.ariaLabel) linkAttributes['aria-label'] = link.attributes.ariaLabel;
@@ -52,8 +52,10 @@ const ListParagraph = async ({headerId, headline, description, link, view, behav
   return (
     <div className="centered flex flex-col gap-xl">
       <div className="flex justify-between items-center mb-20">
-        {headline &&
-          <h2 id={headerId} className={twMerge("m-0", hideHeading && "sr-only")}>{headline}</h2>
+        {(headline && headingBehavior !== "remove") &&
+          <h2 id={headerId} className={twMerge("m-0", headingBehavior === "hide" && "sr-only")}>
+            {headline}
+          </h2>
         }
 
         {link?.url &&

diff --git a/src/lib/drupal/drupal.d.ts b/src/lib/drupal/drupal.d.ts
@@ -27,9 +27,13 @@ export type ParagraphBehaviors = {
     orientation?: string
     link_display_style?: string
   }
-  list_paragraph?: { hide_empty?: Maybe<boolean>, empty_message?: Maybe<string>, hide_heading?: boolean }
+  list_paragraph?: {
+    hide_empty?: Maybe<boolean>,
+    empty_message?: Maybe<string>,
+    heading_behavior?: Maybe<'show' | 'hide' | 'remove'>
+  }
   sul_list_styles?: { link_display_style?: Maybe<string> }
-  stanford_teaser?: {hide_heading?: boolean}
+  stanford_teaser?: { heading_behavior?: Maybe<'show' | 'hide' | 'remove'> }
 }
 
 export type StanfordNode = BasicPage |