Style select list and some of the card paragraph

app/@modal/(.)gallery/[...uuid]/page.tsx

@@ -4,14 +4,14 @@ import Link from "@components/elements/link";
 import {ParagraphStanfordGallery} from "@lib/gql/__generated__/drupal.d";
 import {graphqlClient} from "@lib/gql/gql-client";
 import {notFound} from "next/navigation";
-import {useId} from "react";
+import crypto from "crypto";
 
 type Props = {
   params: { uuid: string[] }
 }
 
 const Page = async ({params: {uuid}}: Props) => {
-  const captionId = useId();
+  const captionId = crypto.randomBytes(4).toString("hex")
   const [paragraphId, mediaUuid] = uuid
 
   const paragraphQuery = await graphqlClient().Paragraph({uuid: paragraphId});

src/components/algolia-search/algolia-search-form.tsx

@@ -163,7 +163,7 @@ const Form = ({searchIndex}: { searchIndex: string }) => {
           </div>
 
           <div className="border-b border-black-30 pb-16 mb-14">
-            <label className="flex items-center justify-between gap-15">
+            <label className="flex items-center justify-between gap-10">
               <span className="text-stone-dark">Search only books</span>
 
               <div className="relative">
@@ -174,7 +174,7 @@ const Form = ({searchIndex}: { searchIndex: string }) => {
                   onChange={() => refineBookType("book")}
                 />
                 <div
-                  className="w-16 h-6 bg-press-sand-light peer-checked:bg-press-grass-light rounded-full shadow-inner"/>
+                  className="w-16 h-6 bg-press-sand-light peer-checked:bg-press-bay-light rounded-full shadow-inner"/>
                 <div
                   className="absolute w-10 h-10 bg-white peer-checked:bg-press-grass rounded-full shadow border border-fog-dark -left-1 -top-2 transition peer-checked:translate-x-full peer-focus-visible:outline outline-press-grass-light"
                 />
@@ -194,8 +194,8 @@ const Form = ({searchIndex}: { searchIndex: string }) => {
                     name="subject"
                     onChange={() => refineBookSubjects(refinementOption.value)}
                   />
-                  <div className="peer-focus-visible:bg-press-grass-light w-14 h-14 rounded-full"/>
-                  <div className="absolute left-3 top-3 w-8 h-8 border-2 border-press-sand-light rounded peer-focus-visible:border-press-grass peer-checked:bg-press-grass-light peer-checked:border-press-grass"/>
+                  <div className="peer-focus-visible:bg-press-bay w-14 h-14 rounded-full"/>
+                  <div className="absolute left-3 top-3 w-8 h-8 border-2 border-press-sand-light rounded peer-focus-visible:border-press-grass peer-checked:bg-press-grass-light peer-checked:border-press-bay-dark"/>
                   <CheckIcon width={15} className="text-white absolute left-4 top-4 hidden peer-checked:block"/>
                 </div>
                 <span className="text-stone-dark">{refinementOption.value}</span>

src/components/elements/button.tsx

@@ -58,10 +58,10 @@ export const Button = ({
     {
       "flex items-center w-fit mx-auto": centered,
       "inline-block text-center w-fit": !centered,
-      "btn btn--big transition text-5xl text-white hocus:text-white bg-digital-red hocus:bg-black no-underline hocus:underline py-6 px-12 font-normal": big && !secondary,
-      "btn btn--secondary transition text-digital-red border-2 border-digital-red hocus:border-black no-underline hocus:underline py-4 px-8 font-normal": !big && secondary,
-      "btn  btn--big btn--secondary transition text-5xl text-digital-red border-2 border-digital-red hocus:border-black no-underline hocus:underline py-6 px-12 font-normal": big && secondary,
-      "btn bg-digital-red font-normal text-white hocus:bg-black hocus:text-white py-4 px-8 no-underline hocus:underline transition": !big && !secondary,
+      "btn btn--big transition text-5xl text-white hocus:text-white bg-digital-red hocus:bg-cardinal-red no-underline hocus:underline py-6 px-12 font-normal": big && !secondary,
+      "btn btn--secondary transition text-stone-dark border-2 border-fog-dark hocus:border-cardinal-red hocus:bg-cardinal-red hocus:text-white no-underline hocus:underline py-4 px-8 font-normal": !big && secondary,
+      "btn  btn--big btn--secondary transition text-5xl text-stone-dark border-2 border-fog-dark hocus:border-cardinal-red hocus:bg-cardinal-red hocus:text-white no-underline hocus:underline py-6 px-12 font-normal": big && secondary,
+      "btn bg-digital-red font-normal text-white hocus:bg-cardinal-red hocus:text-white py-4 px-8 no-underline hocus:underline transition": !big && !secondary,
     }
   )
 

src/components/elements/link.tsx

@@ -4,6 +4,7 @@ import {EnvelopeIcon} from "@heroicons/react/24/outline";
 import ActionLink from "@components/elements/action-link";
 import Button from "@components/elements/button";
 import {LinkProps} from "next/dist/client/link";
+import {twMerge} from "tailwind-merge";
 
 type Props = HtmlHTMLAttributes<HTMLAnchorElement | HTMLButtonElement> & LinkProps & {
   /**
@@ -43,7 +44,7 @@ const DrupalLink = ({href, children, ...props}: Props) => {
   }
 
   return (
-    <Link href={href} {...props}>
+    <Link href={href} {...props} className={twMerge("text-stone-dark hocus:text-archway-dark", props.className)}>
       {children}
       {href.startsWith("mailto") &&
         <EnvelopeIcon width={20} className="ml-4 inline-block"/>

src/components/elements/select-list.tsx

@@ -15,7 +15,7 @@ import {
   useRef,
   useState
 } from "react";
-import {ChevronDownIcon} from "@heroicons/react/20/solid";
+import {CheckIcon, ChevronDownIcon} from "@heroicons/react/20/solid";
 import {Maybe} from "@lib/gql/__generated__/drupal.d";
 import {twMerge} from "tailwind-merge";
 import {clsx} from "clsx";
@@ -74,12 +74,15 @@ function CustomOption(props: OptionProps) {
     <li
       {...otherProps}
       id={id}
-      className={twMerge(clsx("m-0 mb-2 py-2 px-10 cursor-pointer hocus:underline overflow-hidden hocus:bg-black-10 hocus:text-black", {
-        "bg-archway text-white": selected,
-        "bg-black-10 text-black underline": !selected && highlighted,
+      className={twMerge("flex items-center rounded-full mx-5 mb-5 py-2 px-5 cursor-pointer hocus:underline overflow-hidden hocus:bg-press-bay-light hocus:text-black", clsx({
+        "bg-press-bay-light text-black": selected,
+        "bg-press-bay-light text-black underline": !selected && highlighted,
       }))}
     >
       {children}
+      {selected &&
+        <CheckIcon width={20} className="text-stone-dark"/>
+      }
     </li>
   );
 }
@@ -150,23 +153,23 @@ const SelectList = ({
     <div className="relative h-fit">
       <button
         {...getButtonProps()}
-        className={clsx("text-stone w-full text-left p-5", {"border border-black-40 rounded": !borderless})}
+        className={clsx("w-full text-left p-5", {"border border-black-40 rounded": !borderless, "bg-black-30": props.disabled})}
         aria-labelledby={labeledBy}
       >
         {label &&
           <div className={clsx("relative max-w-[calc(100%-30px)]", {
             "text-m0 top-[-15px] w-full": optionChosen,
             "text-m1": !optionChosen
           })}>
-            <div id={labelId} className={clsx("bg-white w-fit px-5", {"bg-black-20": props.disabled})}>
+            <div id={labelId} className={clsx("bg-white w-fit px-5", {"bg-black-30": props.disabled})}>
               {label}
             </div>
           </div>
         }
 
         {(!label && emptyLabel && !optionChosen) &&
           <div className={clsx("relative max-w-[calc(100%-30px)] text-m1")}>
-            <div id={labelId} className={clsx("bg-white w-fit px-5", {"bg-black-20": props.disabled})}>
+            <div id={labelId} className={clsx("bg-white w-fit px-5", {"bg-black-30": props.disabled})}>
               {emptyLabel}
             </div>
           </div>
@@ -183,10 +186,13 @@ const SelectList = ({
         </span>
       </button>
 
-      <div ref={listboxContainerRef} className={clsx("absolute z-[10] w-full top-full left-0 max-h-[300px] pb-5 overflow-y-scroll shadow-lg border border-black-20 bg-white", {"hidden": !listboxVisible})}>
+      <div
+        ref={listboxContainerRef}
+        className={twMerge("absolute z-[10] w-full top-full left-0 max-h-[300px] pb-5 overflow-y-scroll shadow-lg border border-black-20 bg-white", clsx({"hidden": !listboxVisible}))}
+      >
         <ul
           {...getListboxProps()}
-          className={clsx("list-unstyled", {"hidden": !listboxVisible})}
+          className={clsx("list-unstyled my-5", {"hidden": !listboxVisible})}
           aria-hidden={!listboxVisible}
           aria-labelledby={labeledBy}
         >

src/components/layouts/interior-page.tsx

@@ -3,8 +3,8 @@ import SideNav from "@components/menu/side-nav";
 import {HtmlHTMLAttributes} from "react";
 import {isPreviewMode} from "@lib/drupal/utils";
 import {MenuAvailable} from "@lib/gql/__generated__/drupal.d";
-import useActiveTrail from "@lib/hooks/useActiveTrail";
 import {twMerge} from "tailwind-merge";
+import getActiveTrail from "@lib/utils/get-active-trail";
 
 type Props = HtmlHTMLAttributes<HTMLDivElement> & {
   /**
@@ -15,7 +15,7 @@ type Props = HtmlHTMLAttributes<HTMLDivElement> & {
 
 const InteriorPage = async ({children, currentPath, ...props}: Props) => {
   const menu = await getMenu(MenuAvailable.Main, isPreviewMode());
-  const activeTrail: string[] = useActiveTrail(menu, currentPath);
+  const activeTrail: string[] = getActiveTrail(menu, currentPath);
 
   // Peel off the menu items from the parent.
   const topMenuItem = activeTrail.length > 0 ? menu.find(item => item.id === activeTrail[0]) : undefined;

src/components/menu/main-menu.tsx

@@ -2,7 +2,6 @@
 
 import Link from "@components/elements/link";
 import SiteSearchForm from "@components/search/site-search-form";
-import useActiveTrail from "@lib/hooks/useActiveTrail";
 import useOutsideClick from "@lib/hooks/useOutsideClick";
 import {ChevronDownIcon, MagnifyingGlassIcon} from "@heroicons/react/20/solid";
 import {MenuItem as MenuItemType} from "@lib/gql/__generated__/drupal.d";
@@ -11,6 +10,7 @@ import {useBoolean, useEventListener} from "usehooks-ts";
 import {useCallback, useEffect, useId, useLayoutEffect, useRef, useState} from "react";
 import {usePathname} from "next/navigation";
 import usePageHasTopBanner from "@lib/hooks/usePageHasTopBanner";
+import getActiveTrail from "@lib/utils/get-active-trail";
 
 const menuLevelsToShow = 2;
 
@@ -28,7 +28,7 @@ const MainMenu = ({menuItems}: Props) => {
 
   const {value: menuOpen, setFalse: closeMenu, toggle: toggleMenu} = useBoolean(false)
   const browserUrl = usePathname()
-  const activeTrail = useActiveTrail(menuItems, usePathname() || "");
+  const activeTrail = getActiveTrail(menuItems, usePathname() || "");
 
   useOutsideClick(menuRef, closeMenu);
 

src/components/paragraphs/stanford-card/card-paragraph.tsx

@@ -5,10 +5,11 @@ import {H2, H3, H4} from "@components/elements/headers";
 import Wysiwyg from "@components/elements/wysiwyg";
 import ActionLink from "@components/elements/action-link";
 import Button from "@components/elements/button";
-import {twMerge} from "tailwind-merge";
 import ImageCard from "@components/patterns/image-card";
 import BackgroundImageCard from "@components/patterns/background-image-card";
 import {clsx} from "clsx";
+import {ChevronRightIcon} from "@heroicons/react/16/solid";
+import {twMerge} from "tailwind-merge";
 
 type Props = HtmlHTMLAttributes<HTMLDivElement> & {
   paragraph: ParagraphStanfordCard
@@ -26,7 +27,6 @@ const CardParagraph = ({paragraph, ...props}: Props) => {
 
   const hideHeader = behaviors.su_card_styles?.hide_heading;
   const Component = behaviors.su_card_styles?.card_style === "bg-image" ? BackgroundImageCard : ImageCard;
-
   return (
     <Component
       {...props}
@@ -35,56 +35,52 @@ const CardParagraph = ({paragraph, ...props}: Props) => {
       imageAlt={image?.alt}
       videoUrl={videoUrl}
       isArticle={!!paragraph.suCardHeader}
+      color={behaviors.su_card_styles?.bg_color}
     >
-      <div className={twMerge(clsx({
-        "h-full p-20 bg-opacity-25 text-white": !!behaviors.su_card_styles?.bg_color,
-        "bg-pink-600": behaviors.su_card_styles?.bg_color === "magenta",
-        "bg-purple-600": behaviors.su_card_styles?.bg_color === "indigo",
-        "bg-black-600": behaviors.su_card_styles?.bg_color === "steel",
-        "bg-green-600": behaviors.su_card_styles?.bg_color === "grass",
-        "bg-transparent": behaviors.su_card_styles?.card_style !== "bg-image"
-      }))}>
-        {paragraph.suCardHeader &&
-          <div id={paragraph.id} className={clsx("order-2", {"sr-only": hideHeader})}>
-            {headerTag === "h2" &&
-              <H2 className={headerClasses}>{paragraph.suCardHeader}</H2>
-            }
-            {headerTag === "h3" &&
-              <H3 className={headerClasses}>{paragraph.suCardHeader}</H3>
-            }
-            {headerTag === "h4" &&
-              <H4 className={headerClasses}>{paragraph.suCardHeader}</H4>
-            }
-            {headerTag === "div" &&
-              <div className={headerClasses}>{paragraph.suCardHeader}</div>
-            }
-          </div>
-        }
+      {paragraph.suCardHeader &&
+        <div id={paragraph.id} className={clsx("order-2", {"sr-only": hideHeader})}>
+          {headerTag === "h2" &&
+            <H2 className={twMerge("flex items-center", headerClasses)}>
+              {paragraph.suCardHeader}
+              <ChevronRightIcon width={50} className="text-digital-red"/>
+            </H2>
+          }
+          {headerTag === "h3" &&
+            <H3 className={headerClasses}>{paragraph.suCardHeader}</H3>
+          }
+          {headerTag === "h4" &&
+            <H4 className={headerClasses}>{paragraph.suCardHeader}</H4>
+          }
+          {headerTag === "div" &&
+            <div className={headerClasses}>{paragraph.suCardHeader}</div>
+          }
+
+        </div>
+      }
 
-        {paragraph.suCardSuperHeader &&
-          <div className="order-1 font-semibold">
-            {paragraph.suCardSuperHeader}
-          </div>
-        }
+      {paragraph.suCardSuperHeader &&
+        <div className="order-1 font-semibold">
+          {paragraph.suCardSuperHeader}
+        </div>
+      }
 
-        <Wysiwyg html={paragraph.suCardBody?.processed} className="order-3"/>
+      <Wysiwyg html={paragraph.suCardBody?.processed} className="order-3"/>
 
-        {paragraph.suCardLink?.url &&
-          <div className="order-4">
-            {behaviors.su_card_styles?.link_style === "action" &&
-              <ActionLink href={paragraph.suCardLink.url}>
-                {paragraph.suCardLink.title}
-              </ActionLink>
-            }
+      {paragraph.suCardLink?.url &&
+        <div className="order-4">
+          {behaviors.su_card_styles?.link_style === "action" &&
+            <ActionLink href={paragraph.suCardLink.url}>
+              {paragraph.suCardLink.title}
+            </ActionLink>
+          }
 
-            {behaviors.su_card_styles?.link_style != "action" &&
-              <Button href={paragraph.suCardLink.url}>
-                {paragraph.suCardLink.title}
-              </Button>
-            }
-          </div>
-        }
-      </div>
+          {behaviors.su_card_styles?.link_style != "action" &&
+            <Button href={paragraph.suCardLink.url}>
+              {paragraph.suCardLink.title}
+            </Button>
+          }
+        </div>
+      }
     </Component>
   )
 }

src/components/paragraphs/sup-author-list/filtering-author-list.tsx

@@ -51,6 +51,7 @@ const FilteringAuthorList = ({authors, ...props}: Props) => {
       <a href="#author-filter" className="skiplink">Skip to filter</a>
 
       <PagedList
+        className="flex-grow"
         itemsPerPage={50}
         ulProps={{className: "list-unstyled mb-36"}}
         pageKey={false}

src/components/patterns/background-image-card.tsx

@@ -3,6 +3,7 @@ import Image from "next/image";
 import Oembed from "@components/elements/ombed";
 import {ElementType, HTMLAttributes} from "react";
 import {Maybe} from "@lib/gql/__generated__/drupal";
+import {clsx} from "clsx";
 
 type Props = HTMLAttributes<HTMLElement | HTMLDivElement> & {
   /**
@@ -21,33 +22,45 @@ type Props = HTMLAttributes<HTMLElement | HTMLDivElement> & {
    * If the wrapper should be an article or a div, use an article if an appropriate heading is within the card.
    */
   isArticle?: Maybe<boolean>
+  /**
+   * Background color choice.
+   */
+  color?: "magenta" | "steel" | "indigo" | "grass"
 }
 
-const BackgroundImageCard = ({imageUrl, imageAlt, videoUrl, isArticle, children, ...props}: Props) => {
+const BackgroundImageCard = ({imageUrl, imageAlt, videoUrl, isArticle, children, color, ...props}: Props) => {
   const CardWrapper: ElementType = isArticle ? "article" : "div";
 
   return (
     <CardWrapper
       {...props}
-      className={twMerge("centered lg:max-w-[980px] w-full shadow-lg border border-black-10", props.className)}
+      className={twMerge("relative centered lg:max-w-[980px] w-full shadow-lg border border-black-10", props.className)}
     >
-      {imageUrl &&
-        <div className="relative aspect-[9/16] w-full">
+      <div
+        className={clsx("-z-10 absolute h-full w-full top-0 left-0", {
+          "bg-plum": color === "magenta",
+          "bg-press-grass": color === "grass",
+          "bg-black-true bg-opacity-70": color === "steel",
+          "bg-press-indigo": color === "indigo"
+        })}
+      >
+        {imageUrl &&
           <Image
-            className="object-cover object-center"
+            className="object-cover mix-blend-multiply"
             src={imageUrl}
             alt={imageAlt || ""}
             fill
             sizes="(max-width: 768px) 100vw, 1000px"
           />
-        </div>
-      }
+        }
+      </div>
+
 
       {videoUrl &&
         <Oembed url={videoUrl}/>
       }
 
-      <div className="absolute top-0 left-0 h-full w-full flex flex-col gap-5 text-center">
+      <div className={clsx("p-20", {"text-white": !!color})}>
         {children}
       </div>
     </CardWrapper>