Merge branch '1.x' into feature/SUP-190--textAreaParagraph

SU-SWS · May 10, 2024 · 5110c0b · 5110c0b
2 parents 612bb6d + 042caaf
commit 5110c0b
Show file tree

Hide file tree

Showing 14 changed files with 84 additions and 75 deletions.
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -51,7 +51,7 @@ const RootLayout = ({children, modal}: { children: React.ReactNode, modal: React
       <UserAnalytics/>
     }
     <DrupalWindowSync/>
-    <body>
+    <body className="text-stone-dark">
     <nav aria-label="Skip Links">
       <a href="#main-content" className="skiplink">Skip to main content</a>
     </nav>

diff --git a/app/search/page.tsx b/app/search/page.tsx
@@ -34,7 +34,7 @@ const Page = async ({searchParams}: { searchParams?: { [_key: string]: string }
 
   return (
     <div className="centered mt-32">
-      <div className="lg:w-9/12 mx-auto">
+      <div className="3xl:w-10/12 mx-auto">
         <H1 className="mb-44" id="page-title">Search</H1>
 
         {(siteSettingsConfig?.suSiteAlgoliaId && siteSettingsConfig?.suSiteAlgoliaIndex && siteSettingsConfig?.suSiteAlgoliaSearch) &&

diff --git a/public/default-book-image.jpg b/public/default-book-image.jpg
diff --git a/src/components/algolia-search/algolia-search-form.tsx b/src/components/algolia-search/algolia-search-form.tsx
@@ -105,7 +105,7 @@ const Form = ({searchIndex}: { searchIndex: string }) => {
   return (
     <div>
       <form role="search" aria-labelledby="page-title" onSubmit={(e) => e.preventDefault()}>
-        <div className="lg:w-2/3 mx-auto mb-20 flex gap-5 items-center">
+        <div className="md:w-2/3 mx-auto mb-20 flex gap-5 items-center">
           <label className="sr-only" htmlFor="search-input">
             Keywords Search
           </label>
@@ -132,10 +132,10 @@ const Form = ({searchIndex}: { searchIndex: string }) => {
           </button>
         </div>
 
-        <div className="hidden lg:block float-left w-1/4">
+        <div className="hidden md:block float-left w-1/4">
           <div className="border-b border-black-30 pb-20 mb-16">
             <H2 className="text-m1">
-              <span className="text-stone-dark">Filter by</span>
+              Filter by
             </H2>
 
             {currentRefinements.filter(refinement => refinement.attribute === "book_subject").length > 0 &&
@@ -144,7 +144,7 @@ const Form = ({searchIndex}: { searchIndex: string }) => {
                   return refinement.refinements.map((item, i) =>
                     <li
                       key={`refinement-${i}`}
-                      className="w-fit flex items-center gap-8 border-2 border-press-sand p-5 text-stone-dark"
+                      className="w-fit flex items-center gap-8 border-2 border-press-sand p-5"
                     >
                       {item.value}
                       <button
@@ -164,7 +164,7 @@ const Form = ({searchIndex}: { searchIndex: string }) => {
 
           <div className="border-b border-black-30 pb-16 mb-14">
             <label className="flex items-center justify-between gap-10">
-              <span className="text-stone-dark">Search only books</span>
+              <span>Search only books</span>
 
               <div className="relative">
                 <input
@@ -183,7 +183,7 @@ const Form = ({searchIndex}: { searchIndex: string }) => {
           </div>
 
           <fieldset className="border-b border-black-30 pb-16 mb-12">
-            <legend className="text-stone-dark font-medium text-m1 mb-6">Subject</legend>
+            <legend className="font-medium text-m1 mb-6">Subject</legend>
             {bookSubjectRefinementList.map(refinementOption =>
               <label key={refinementOption.value} className="flex items-center gap-5 mt-5 mb-8">
                 <div className="relative">
@@ -198,13 +198,13 @@ const Form = ({searchIndex}: { searchIndex: string }) => {
                   <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>
+                <span>{refinementOption.value}</span>
               </label>
             )}
           </fieldset>
 
           <fieldset>
-            <legend className="text-stone-dark font-medium text-m1 mb-6">Published Date</legend>
+            <legend className="font-medium text-m1 mb-6">Published Date</legend>
 
             <div className="flex gap-5 items-center">
               <div className="flex-grow flex-1">
@@ -246,7 +246,7 @@ const Form = ({searchIndex}: { searchIndex: string }) => {
         </div>
       </form>
 
-      <div className="lg:float-right lg:ml-20 lg:w-[calc(70%-5rem)]">
+      <div className="md:float-right md:ml-20 md:w-[calc(70%-5rem)]">
         <HitList searchIndex={searchIndex}/>
       </div>
     </div>

diff --git a/src/components/algolia-search/hits/sup-book.tsx b/src/components/algolia-search/hits/sup-book.tsx
@@ -15,7 +15,7 @@ const SupBookHit = ({hit}: { hit: HitType<BookHit> }) => {
 
   return (
     <article className="@container py-12">
-      <div className="flex flex-col @3xl:flex-row justify-between gap-20">
+      <div className="flex flex-col @2xl:flex-row justify-between gap-20">
         <div>
           <H2 className="text-m2">
             <Link className="text-stone-dark hocus:text-digital-red" href={hit.url.replace(hitUrl.origin, "")}>
@@ -38,17 +38,17 @@ const SupBookHit = ({hit}: { hit: HitType<BookHit> }) => {
             </div>
           }
           {hit.book_published &&
-            <div className="text-stone-dark">
+            <div>
               {hit.book_published}
             </div>
           }
         </div>
 
         {hit.photo &&
-          <div className="relative shrink-0 aspect-[2/3] w-[150px] mx-auto @3xl:ml-auto">
+          <div className="relative shrink-0 aspect-[2/3] w-[150px] mx-auto @2xl:mr-0">
             <Image
               className="object-cover"
-              src={hit.photo}
+              src={hit.photo.replace(hitUrl.origin, process.env.NEXT_PUBLIC_DRUPAL_BASE_URL as string)}
               alt=""
               fill
               sizes="300px"

diff --git a/src/components/elements/button.tsx b/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-cardinal-red no-underline hocus:underline py-6 px-12 font-normal": 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 border-2 border-cardinal-red": 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,
+      "btn bg-digital-red font-normal text-white hocus:bg-cardinal-red hocus:text-white py-4 px-8 no-underline hocus:underline transition border-2 border-cardinal-red": !big && !secondary,
     }
   )
 

diff --git a/src/components/menu/main-menu.tsx b/src/components/menu/main-menu.tsx
@@ -11,6 +11,7 @@ import {useCallback, useEffect, useId, useLayoutEffect, useRef, useState} from "
 import {usePathname} from "next/navigation";
 import usePageHasTopBanner from "@lib/hooks/usePageHasTopBanner";
 import getActiveTrail from "@lib/utils/get-active-trail";
+import {ShoppingCartIcon} from "@heroicons/react/24/outline";
 
 const menuLevelsToShow = 2;
 
@@ -66,7 +67,10 @@ const MainMenu = ({menuItems}: Props) => {
           <span className="sr-only">Search Site</span>
           <MagnifyingGlassIcon
             width={25}
-            className={clsx(" border-b border-transparent ", {"text-white group-hocus:border-b-white": pageHasBanner, "text-stone-dark group-hocus:border-b-stone-dark": !pageHasBanner})}
+            className={clsx("border-b border-transparent", {
+              "text-white group-hocus:border-b-white": pageHasBanner,
+              "text-stone-dark group-hocus:border-b-stone-dark": !pageHasBanner
+            })}
           />
         </a>
       </div>
@@ -130,8 +134,8 @@ const MenuItem = ({id, url, title, activeTrail, children, level}: MenuItemProps)
       "border-transparent lg:border-foggy-dark": !pageHasBanner && level === 0 && !isCurrent && inTrail,
       "lg:border-white": pageHasBanner && level === 0 && isCurrent,
       "lg:border-fog": pageHasBanner && level === 0 && !isCurrent && inTrail,
-
       "border-transparent": level === 0 && !isCurrent && !inTrail,
+      "flex items-center gap-5": title === "Cart",
     },
     // Child menu item styles.
     {
@@ -167,6 +171,9 @@ const MenuItem = ({id, url, title, activeTrail, children, level}: MenuItemProps)
           aria-current={isCurrent ? "true" : undefined}
         >
           {title}
+          {title === "Cart" &&
+            <ShoppingCartIcon width={30} className={clsx({"text-stone": !pageHasBanner})}/>
+          }
         </Link>
 
         {(children.length > 0 && level < menuLevelsToShow) &&

diff --git a/src/components/nodes/cards/sup-book/sup-book-card.tsx b/src/components/nodes/cards/sup-book/sup-book-card.tsx
@@ -4,6 +4,7 @@ import {HtmlHTMLAttributes} from "react";
 import {NodeSupBook} from "@lib/gql/__generated__/drupal.d";
 import Image from "next/image";
 import {BookmarkIcon} from "@heroicons/react/24/outline";
+import {twMerge} from "tailwind-merge";
 
 type Props = HtmlHTMLAttributes<HTMLDivElement> & {
   node: NodeSupBook
@@ -13,25 +14,25 @@ type Props = HtmlHTMLAttributes<HTMLDivElement> & {
 const SupBookCard = ({node, headingLevel, ...props}: Props) => {
   const Heading = headingLevel === "h3" ? H3 : H2;
   return (
-    <div {...props}>
+    <div {...props} className={twMerge("max-w-3xl mx-auto", props.className)}>
       <div className="relative">
-        {node.supBookImage &&
-          <div className="relative aspect-[9/16] w-full mb-8">
+
+          <div className="relative aspect-[2/3] w-full mb-8">
             <Image
               className="object-cover"
-              src={node.supBookImage.mediaImage.url}
-              alt={node.supBookImage.mediaImage.alt || ""}
+              src={node.supBookImage?.mediaImage.url || "/default-book-image.jpg"}
+              alt={node.supBookImage?.mediaImage.alt || ""}
               fill
               sizes="400px"
             />
             {node.supBookAwards &&
-              <div className="absolute top-0 left-5 pl-3 pr-5 py-2 flex gap-3 items-center bg-fog text-stone-dark">
+              <div className="absolute top-0 left-5 pl-3 pr-5 py-2 flex gap-3 items-center bg-fog">
                 <BookmarkIcon width={20} className="fill-stone-dark"/>
                 Award winner
               </div>
             }
           </div>
-        }
+
 
         <Heading className="font-normal text-m1 mb-8">
           <Link className="stretched-link text-stone-dark font-normal" href={node.path}>

diff --git a/src/components/nodes/pages/sup-book/book-awards.tsx b/src/components/nodes/pages/sup-book/book-awards.tsx
@@ -43,7 +43,7 @@ const BookAwards = ({children}: { children: JSX.Element[] }) => {
         }
       </ul>
 
-      {(bottom && !showingMore) &&
+      {(bottom.length > 0 && !showingMore) &&
         <button
           className="flex items-center gap-3"
           onClick={() => {

diff --git a/src/components/nodes/pages/sup-book/book-precart.tsx b/src/components/nodes/pages/sup-book/book-precart.tsx
@@ -96,8 +96,8 @@ const BookPreCart = ({
       {hasIntlCart &&
         <fieldset>
           <legend className="font-semibold">Region</legend>
-          <div className="flex border-2 border-black-40 p-1 mb-5">
-            <div className="flex-1">
+          <div className="flex flex-wrap border-2 border-black-40 p-1 mb-5">
+            <div className="flex-1 min-w-fit">
               <input
                 id="us-region"
                 className="sr-only peer"
@@ -109,12 +109,12 @@ const BookPreCart = ({
               />
               <label
                 htmlFor="us-region"
-                className="block text-center p-5 peer-checked:bg-cardinal-red-dark peer-checked:text-white cursor-pointer peer-focus-visible:underline hover:underline"
+                className="block text-center p-5 peer-checked:bg-cardinal-red-dark peer-checked:text-white peer-focus-visible:underline hover:underline hover:bg-fog-light hover:cursor-pointer"
               >
                 US/Canada
               </label>
             </div>
-            <div className="flex-1">
+            <div className="flex-1 min-w-fit">
               <input
                 id="intl-region"
                 className="sr-only peer"
@@ -126,7 +126,7 @@ const BookPreCart = ({
               />
               <label
                 htmlFor="intl-region"
-                className="block text-center p-5 peer-checked:bg-cardinal-red-dark peer-checked:text-white cursor-pointer peer-focus-visible:underline hover:underline"
+                className="block text-center p-5 peer-checked:bg-cardinal-red-dark peer-checked:text-white peer-focus-visible:underline hover:underline hover:bg-fog-light hover:cursor-pointer"
               >
                 International
               </label>
@@ -194,14 +194,14 @@ const UsFormatChoices = ({
           />
           <label
             htmlFor={`${id}-cloth`}
-            className="group flex items-center p-5 border-3 peer-checked:border-cardinal-red-dark peer-focus-visible:underline cursor-pointer"
+            className="group flex items-center p-5 border-3 peer-checked:border-cardinal-red-dark peer-focus-visible:underline peer-focus-visible:bg-fog-light hover:bg-fog-light hover:cursor-pointer"
           >
             <span className="flex w-full items-center">
               <span className="flex w-full flex-col @lg:flex-row justify-between">
-                <span className="font-semibold text-stone-dark group-hover:underline">Hardcover</span>
+                <span className="font-semibold group-hover:underline">Hardcover</span>
                 <span className="flex items-center">
                   <span className="text-press-sand-dark">US/CAN</span>
-                  <span className="text-stone-dark">{formatCurrency(clothPrice)}</span>
+                  <span>{formatCurrency(clothPrice)}</span>
                 </span>
               </span>
               <BookmarkIcon width={30} className="text-fog-dark"/>
@@ -222,14 +222,14 @@ const UsFormatChoices = ({
           />
           <label
             htmlFor={`${id}-paper`}
-            className="group flex items-center p-5 border-3 peer-checked:border-cardinal-red-dark peer-focus-visible:underline cursor-pointer"
+            className="group flex items-center p-5 border-3 peer-checked:border-cardinal-red-dark peer-focus-visible:underline peer-focus-visible:bg-fog-light hover:bg-fog-light hover:cursor-pointer"
           >
             <span className="flex w-full items-center">
               <span className="flex w-full flex-col @lg:flex-row justify-between">
-                <span className="font-semibold text-stone-dark group-hover:underline">Paperback</span>
+                <span className="font-semibold group-hover:underline">Paperback</span>
                 <span className="flex items-center">
                   <span className="text-press-sand-dark">US/CAN</span>
-                  <span className="text-stone-dark">{formatCurrency(paperPrice)}</span>
+                  <span>{formatCurrency(paperPrice)}</span>
                 </span>
               </span>
               <BookOpenIcon width={30} className="text-fog-dark"/>
@@ -250,14 +250,14 @@ const UsFormatChoices = ({
           />
           <label
             htmlFor={`${id}-digital`}
-            className="group flex items-center p-5 border-3 peer-checked:border-cardinal-red-dark peer-focus-visible:underline cursor-pointer"
+            className="group flex items-center p-5 border-3 peer-checked:border-cardinal-red-dark peer-focus-visible:underline peer-focus-visible:bg-fog-light hover:bg-fog-light hover:cursor-pointer"
           >
             <span className="flex w-full items-center">
               <span className="flex w-full flex-col @lg:flex-row justify-between">
-                <span className="font-semibold text-stone-dark group-hover:underline">eBook</span>
+                <span className="font-semibold group-hover:underline">eBook</span>
                 <span className="flex items-center">
                   <span className="text-press-sand-dark">US/CAN</span>
-                  <span className="text-stone-dark">{formatCurrency(digitalPrice)}</span>
+                  <span>{formatCurrency(digitalPrice)}</span>
                 </span>
               </span>
               <DeviceTabletIcon width={30} className="text-fog-dark"/>
@@ -295,10 +295,10 @@ const IntlFormatChoices = ({
           />
           <label
             htmlFor={`${id}-cloth`}
-            className="group flex items-center p-5 border-3 peer-checked:border-cardinal-red-dark peer-focus-visible:underline cursor-pointer"
+            className="group flex items-center p-5 border-3 peer-checked:border-cardinal-red-dark peer-focus-visible:underline peer-focus-visible:bg-fog-light hover:bg-fog-light hover:cursor-pointer"
           >
             <span className="flex w-full items-center justify-between font-semibold">
-              <span className="text-stone-dark group-hover:underline">Hardcover</span>
+              <span className="group-hover:underline">Hardcover</span>
               <BookmarkIcon width={30} className="text-fog-dark"/>
             </span>
           </label>
@@ -317,10 +317,10 @@ const IntlFormatChoices = ({
           />
           <label
             htmlFor={`${id}-paper`}
-            className="group flex items-center p-5 border-3 peer-checked:border-cardinal-red-dark peer-focus-visible:underline cursor-pointer"
+            className="group flex items-center p-5 border-3 peer-checked:border-cardinal-red-dark peer-focus-visible:underline peer-focus-visible:bg-fog-light hover:bg-fog-light hover:cursor-pointer"
           >
             <span className="flex w-full items-center justify-between font-semibold">
-              <span className="text-stone-dark group-hover:underline">Paperback</span>
+              <span className="group-hover:underline">Paperback</span>
               <BookOpenIcon width={30} className="text-fog-dark"/>
             </span>
           </label>

diff --git a/src/components/nodes/pages/sup-book/sup-book-desk-examination-page.tsx b/src/components/nodes/pages/sup-book/sup-book-desk-examination-page.tsx
@@ -22,12 +22,12 @@ const SupBookDeskExaminationPage = ({node, ...props}: Props) => {
         <div className="flex flex-col md:flex-row gap-20 mb-36">
 
           <div className="flex flex-col gap-10">
-            <div className="font-medium text-stone-dark text-m4">
+            <div className="font-medium text-m4">
               {node.title}
             </div>
 
             {node.supBookSubtitle &&
-              <div className="font-medium text-stone-dark text-m3">{node.supBookSubtitle}</div>
+              <div className="font-medium text-m3">{node.supBookSubtitle}</div>
             }
 
             {node.supBookAuthorsFull &&
@@ -189,7 +189,7 @@ const SupBookDeskExaminationPage = ({node, ...props}: Props) => {
 
       <Link href={node.path} className="pt-20 flex items-center gap-5 w-fit">
         <ArrowLeftIcon width={20} className="text-fog-dark"/>
-        <span className="text-stone-dark">Back to {node.title}</span>
+        <span>Back to {node.title}</span>
       </Link>
     </div>
   )

diff --git a/src/components/nodes/pages/sup-book/sup-book-excerpt-page.tsx b/src/components/nodes/pages/sup-book/sup-book-excerpt-page.tsx
@@ -20,12 +20,12 @@ const SupBookExcerptPage = ({node, ...props}: Props) => {
         <div className="flex flex-col md:flex-row gap-20 mb-36">
 
           <div className="flex flex-col gap-10">
-            <div className="font-medium text-stone-dark text-m4">
+            <div className="font-medium text-m4">
               {node.title}
             </div>
 
             {node.supBookSubtitle &&
-              <div className="font-medium text-stone-dark text-m3">{node.supBookSubtitle}</div>
+              <div className="font-medium text-m3">{node.supBookSubtitle}</div>
             }
 
             {node.supBookAuthorsFull &&
@@ -49,7 +49,7 @@ const SupBookExcerptPage = ({node, ...props}: Props) => {
 
       <Link href={node.path} className="pt-20 flex items-center gap-5 w-fit">
         <ArrowLeftIcon width={20} className="text-fog-dark"/>
-        <span className="text-stone-dark">Back to {node.title}</span>
+        <span>Back to {node.title}</span>
       </Link>
     </div>
   )