Styled book page, author list, and file list components

SU-SWS · May 7, 2024 · 587cc90 · 587cc90
1 parent fd82dba
commit 587cc90
Show file tree

Hide file tree

Showing 19 changed files with 303 additions and 187 deletions.
diff --git a/app/search/algolia-search.tsx b/app/search/algolia-search.tsx
@@ -25,7 +25,6 @@ type Props = {
 
 const AlgoliaSearch = ({appId, searchIndex, searchApiKey, initialUiState = {}}: Props) => {
   const searchClient = useMemo(() => algoliasearch(appId, searchApiKey), [appId, searchApiKey])
-
   return (
     <div>
       <InstantSearchNext
@@ -193,7 +192,7 @@ const SearchForm = ({searchIndex}: { searchIndex: string }) => {
               <div className="flex-grow flex-1">
                 <div id={`${id}-min-year`}><span className="sr-only">Minimum&nbps;</span>Year</div>
                 <SelectList
-                  options={yearOptions.filter(option => parseInt(option.value) < (rangeChoices[1] || 3000) &&  parseInt(option.value) > (minYear || 0))}
+                  options={yearOptions.filter(option => parseInt(option.value) < (rangeChoices[1] || 3000) && parseInt(option.value) > (minYear || 0))}
                   value={(!rangeChoices[0] || !minYear || rangeChoices[0] <= minYear) ? null : `${rangeChoices[0]}`}
                   ariaLabelledby={`${id}-min-year`}
                   disabled={!canRefinePubYear}
@@ -234,7 +233,7 @@ const SearchForm = ({searchIndex}: { searchIndex: string }) => {
 
 const HitList = ({searchIndex}: { searchIndex: string }) => {
   const {hits} = useHits<HitType<AlgoliaHit>>({});
-  const {pages, nbPages, nbHits, refine: goToPage} = usePagination({padding: 2})
+  const {currentRefinement: currentPage, pages, nbPages, nbHits, refine: goToPage} = usePagination({padding: 2})
   const {options: sortOptions, refine: sortBy, currentRefinement: currentSort} = useSortBy({
     items: [
       {label: "Relevance", value: searchIndex},
@@ -277,24 +276,32 @@ const HitList = ({searchIndex}: { searchIndex: string }) => {
       </ul>
 
       {pages.length > 1 &&
-        <nav className="flex justify-between" aria-label="Search results pages">
-          {pages[0] > 0 &&
-            <button onClick={() => goToPage(0)}>
-              First
-            </button>
-          }
-
-          {pages.map(pageNum =>
-            <button key={`page-${pageNum}`} onClick={() => goToPage(pageNum)}>
-              {pageNum + 1}
-            </button>
-          )}
-
-          {pages[pages.length - 1] !== nbPages &&
-            <button onClick={() => goToPage(nbPages - 1)}>
-              Last
-            </button>
-          }
+        <nav aria-label="Search results pager">
+          <ul className="list-unstyled flex justify-between">
+            {pages[0] > 0 &&
+              <li>
+                <button onClick={() => goToPage(0)}>
+                  First
+                </button>
+              </li>
+            }
+
+            {pages.map(pageNum =>
+              <li key={`page-${pageNum}`} aria-current={currentPage === pageNum}>
+                <button onClick={() => goToPage(pageNum)}>
+                  {pageNum + 1}
+                </button>
+              </li>
+            )}
+
+            {pages[pages.length - 1] !== nbPages &&
+              <li>
+                <button onClick={() => goToPage(nbPages - 1)}>
+                  Last
+                </button>
+              </li>
+            }
+          </ul>
         </nav>
       }
     </div>

diff --git a/app/search/page.tsx b/app/search/page.tsx
@@ -20,13 +20,13 @@ const Page = async ({searchParams}: { searchParams?: { [_key: string]: string }
 
   const siteSettingsConfig = await getConfigPage<StanfordBasicSiteSetting>("StanfordBasicSiteSetting")
 
-  const initialState: IndexUiState = {}
+  const initialState: IndexUiState = {refinementList: {}}
   if (searchParams?.q) initialState.query = searchParams.q as string
-  if (searchParams?.subjects) {
-    initialState.refinementList = {book_subject: searchParams.subjects.split(",")}
+  if (searchParams?.subjects && initialState.refinementList) {
+    initialState.refinementList.book_subject = searchParams.subjects.split(",")
   }
-  if (!!searchParams?.books) {
-    initialState.refinementList = {book_type: ["book"]}
+  if (!!searchParams?.books && initialState.refinementList) {
+    initialState.refinementList.book_type = ["book"]
   }
   if (searchParams?.["published-min"] || searchParams?.["published-max"]) {
     initialState.range = {book_published: (searchParams["published-min"] || "0") + ":" + (searchParams["published-max"] || "3000")}

diff --git a/src/components/elements/paged-list.tsx b/src/components/elements/paged-list.tsx
@@ -1,7 +1,6 @@
 "use client";
 
 import {useLayoutEffect, useRef, HtmlHTMLAttributes, useEffect, useId} from "react";
-import Button from "@components/elements/button";
 import {useAutoAnimate} from "@formkit/auto-animate/react";
 import {useBoolean, useCounter} from "usehooks-ts";
 import {useRouter, useSearchParams} from "next/navigation";
@@ -25,9 +24,21 @@ type Props = HtmlHTMLAttributes<HTMLDivElement> & {
    * URL parameter used to save the users page position.
    */
   pageKey?: string | false
+  /**
+   * Number of sibling pager buttons.
+   */
+  pagerSiblingCount?: number
 }
 
-const PagedList = ({children, ulProps, liProps, itemsPerPage = 10, pageKey = "page", ...props}: Props) => {
+const PagedList = ({
+  children,
+  ulProps,
+  liProps,
+  itemsPerPage = 10,
+  pageKey = "page",
+  pagerSiblingCount = 2,
+  ...props
+}: Props) => {
   const id = useId();
   const items = Array.isArray(children) ? children : [children]
   const router = useRouter();
@@ -56,7 +67,7 @@ const PagedList = ({children, ulProps, liProps, itemsPerPage = 10, pageKey = "pa
   }, [focusOnElement, setFocusOnItem]);
 
   useEffect(() => {
-    if(!pageKey) return;
+    if (!pageKey) return;
 
     // Use search params to retain any other parameters.
     const params = new URLSearchParams(searchParams.toString());
@@ -68,7 +79,7 @@ const PagedList = ({children, ulProps, liProps, itemsPerPage = 10, pageKey = "pa
 
     router.replace(`?${params.toString()}`, {scroll: false})
   }, [router, currentPage, pageKey, searchParams]);
-  const paginationButtons = usePagination(items.length, currentPage, itemsPerPage, 2);
+  const paginationButtons = usePagination(items.length, currentPage, itemsPerPage, pagerSiblingCount);
 
   return (
     <div {...props}>
@@ -87,8 +98,8 @@ const PagedList = ({children, ulProps, liProps, itemsPerPage = 10, pageKey = "pa
       </ul>
 
       {paginationButtons.length > 1 &&
-        <nav aria-label="Pager">
-          <ul className="list-unstyled flex justify-between">
+        <nav aria-label="Pager" className="mx-auto w-fit">
+          <ul className="list-unstyled flex gap-5">
             {paginationButtons.map((pageNum, i) => (
               <PaginationButton
                 key={`page-button-${pageNum}--${i}`}
@@ -119,17 +130,17 @@ const PaginationButton = ({page, currentPage, total, onClick}: {
       </li>
     )
   }
-
+  const isCurrent = page == currentPage;
   return (
     <li>
-      <Button
-        className={page === currentPage ? "bg-black text-white" : ""}
+      <button
+        className="font-medium hocus:underline text-m2"
         onClick={onClick}
-        aria-current={page == currentPage || undefined}
+        aria-current={isCurrent}
       >
         <span className="sr-only">Go to page {page} of {total}</span>
-        <span aria-hidden>{page}</span>
-      </Button>
+        <span aria-hidden className={(isCurrent ? "text-stone-dark border-stone-dark" : "text-cardinal-red border-transparent") + " border-b-2 px-4"}>{page}</span>
+      </button>
     </li>
   )
 }

diff --git a/src/components/elements/select-list.tsx b/src/components/elements/select-list.tsx
@@ -164,6 +164,13 @@ const SelectList = ({
           </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})}>
+              {emptyLabel}
+            </div>
+          </div>
+        }
 
         {optionChosen &&
           <div className="overflow-hidden max-w-[calc(100%-30px)]">

diff --git a/src/components/elements/tabs.tsx b/src/components/elements/tabs.tsx
@@ -106,7 +106,7 @@ export const Tab = ({buttonProps, className, children, ...props}: TabProps) => {
     <button
       {...getRootProps()}
       {...buttonProps}
-      className={twMerge(clsx("text-left p-3 border-b-3 border-transparent", {"border-cardinal-red": selected}), className)}
+      className={twMerge(clsx("text-left p-3 border-b-3 border-transparent", {"border-press-bay": selected}), className)}
     >
       {children}
     </button>

diff --git a/src/components/nodes/pages/sup-book/book-awards.tsx b/src/components/nodes/pages/sup-book/book-awards.tsx
@@ -0,0 +1,60 @@
+"use client";
+
+import {JSX, useLayoutEffect, useRef} from "react";
+import {useBoolean} from "usehooks-ts";
+import useFocusOnRender from "@lib/hooks/useFocusOnRender";
+import {ChevronDownIcon} from "@heroicons/react/20/solid";
+
+const BookAwards = ({children}: { children: JSX.Element[] }) => {
+  const top = children.slice(0, 3)
+  const bottom = children.slice(3);
+  const firstBottomRef = useRef<HTMLLIElement>(null)
+  const {value: showingMore, setTrue: showMore} = useBoolean(false)
+  const {value: focusOnElement, setTrue: enableFocusElement, setFalse: disableFocusElement} = useBoolean(false)
+
+  const setFocusOnItem = useFocusOnRender(firstBottomRef, false);
+
+  useLayoutEffect(() => {
+    if (focusOnElement) setFocusOnItem()
+  }, [focusOnElement, setFocusOnItem]);
+
+  return (
+    <div>
+      <ul className="list-unstyled mb-10">
+        {top.map((item, i) =>
+          <li className="mb-10" key={`top-award-${i}`}>
+            {item}
+          </li>
+        )}
+        {showingMore &&
+          <>
+            {bottom.map((item, i) =>
+              <li
+                className="mb-10"
+                key={`bottom-award-${i}`}
+                ref={i === 0 ? firstBottomRef : undefined}
+                tabIndex={i === 0 ? 0 : undefined}
+                onBlur={disableFocusElement}
+              >
+                {item}
+              </li>
+            )}
+          </>
+        }
+      </ul>
+
+      {(bottom && !showingMore) &&
+        <button
+          className="flex items-center gap-3"
+          onClick={() => {
+            enableFocusElement()
+            showMore()
+          }}
+        >
+         <ChevronDownIcon width={24} className="text-fog-dark shrink-0"/> Read more
+        </button>
+      }
+    </div>
+  )
+}
+export default BookAwards;
diff --git a/src/components/nodes/pages/sup-book/book-precart.tsx b/src/components/nodes/pages/sup-book/book-precart.tsx
@@ -72,7 +72,7 @@ const BookPreCart = ({
   }
 
   return (
-    <form onSubmit={onFormSubmit}>
+    <form className="@container" onSubmit={onFormSubmit}>
       <fieldset className="mb-5">
         <legend className="sr-only">Format</legend>
         {!isIntl &&
@@ -196,10 +196,16 @@ const UsFormatChoices = ({
             htmlFor={`${id}-cloth`}
             className="flex items-center p-5 border-3 peer-checked:border-cardinal-red-dark peer-focus-visible:underline hover:underline cursor-pointer"
           >
-          <span className="flex w-full items-center justify-between">
-            <span>Hardcover</span> <span className="flex items-center"> US/CAN {formatCurrency(clothPrice)}
-            <BookmarkIcon width={30}/></span>
-          </span>
+            <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">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>
+              </span>
+              <BookmarkIcon width={30} className="text-fog-dark"/>
+            </span>
           </label>
         </div>
       }
@@ -218,10 +224,16 @@ const UsFormatChoices = ({
             htmlFor={`${id}-paper`}
             className="flex items-center p-5 border-3 peer-checked:border-cardinal-red-dark peer-focus-visible:underline hover:underline cursor-pointer"
           >
-          <span className="flex w-full items-center justify-between">
-            <span>Paperback</span> <span className="flex items-center"> US/CAN {formatCurrency(paperPrice)}
-            <BookOpenIcon width={30}/></span>
-          </span>
+            <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">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>
+              </span>
+              <BookOpenIcon width={30} className="text-fog-dark"/>
+            </span>
           </label>
         </div>
       }
@@ -240,10 +252,16 @@ const UsFormatChoices = ({
             htmlFor={`${id}-digital`}
             className="flex items-center p-5 border-3 peer-checked:border-cardinal-red-dark peer-focus-visible:underline hover:underline cursor-pointer"
           >
-          <span className="flex w-full items-center justify-between">
-            <span>eBook</span> <span className="flex items-center"> US/CAN {formatCurrency(digitalPrice)}
-            <DeviceTabletIcon width={30}/></span>
-          </span>
+            <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">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>
+              </span>
+              <DeviceTabletIcon width={30} className="text-fog-dark"/>
+            </span>
           </label>
         </div>
       }
@@ -279,7 +297,10 @@ const IntlFormatChoices = ({
             htmlFor={`${id}-cloth`}
             className="flex items-center p-5 border-3 peer-checked:border-cardinal-red-dark peer-focus-visible:underline hover:underline cursor-pointer"
           >
-            <span className="flex w-full items-center justify-between">Hardcover <BookmarkIcon width={30}/></span>
+            <span className="flex w-full items-center justify-between font-semibold">
+              <span className="text-stone-dark">Hardcover</span>
+              <BookmarkIcon width={30} className="text-fog-dark"/>
+            </span>
           </label>
         </div>
       }
@@ -298,7 +319,10 @@ const IntlFormatChoices = ({
             htmlFor={`${id}-paper`}
             className="flex items-center p-5 border-3 peer-checked:border-cardinal-red-dark peer-focus-visible:underline hover:underline cursor-pointer"
           >
-            <span className="flex w-full items-center justify-between">Paperback <BookOpenIcon width={30}/></span>
+            <span className="flex w-full items-center justify-between font-semibold">
+              <span className="text-stone-dark">Paperback</span>
+              <BookOpenIcon width={30} className="text-fog-dark"/>
+            </span>
           </label>
         </div>
       }