SUL23-703 | adjust column row layouts

SU-SWS · Jan 22, 2025 · 19b29d9 · 19b29d9
1 parent 0c22182
commit 19b29d9
Show file tree

Hide file tree

Showing 12 changed files with 3,398 additions and 21,239 deletions.
diff --git a/app/page.tsx b/app/page.tsx
@@ -1,5 +1,5 @@
 import HomePageBanner from "@/components/node/stanford-page/home-page/home-page-banner"
-import {ParagraphRows} from "@/components/paragraph/rows/rows"
+import Rows from "@/components/paragraph/rows/rows"
 import {notFound} from "next/navigation"
 import {getEntityFromPath} from "@/lib/gql/fetcher"
 import {NodeStanfordPage} from "@/lib/gql/__generated__/drupal.d"
@@ -32,7 +32,7 @@ const Page = async () => {
       {entity.suPageBanner?.__typename && <Paragraph paragraph={entity.suPageBanner} />}
       {!entity.suPageBanner?.__typename && <HomePageBanner />}
 
-      {entity.suPageComponents && <ParagraphRows items={entity.suPageComponents} fullWidth />}
+      {entity.suPageComponents && <Rows components={entity.suPageComponents} fullWidth />}
       <div className="rs-py-4 centered">Last updated {lastUpdated}</div>
     </main>
   )

diff --git a/src/components/node/stanford-page/page-display.tsx b/src/components/node/stanford-page/page-display.tsx
@@ -1,4 +1,4 @@
-import {ParagraphRows} from "@/components/paragraph/rows/rows"
+import Rows from "@/components/paragraph/rows/rows"
 import {NodeStanfordPage} from "@/lib/gql/__generated__/drupal.d"
 import StanfordPageMetadata from "@/components/node/stanford-page/stanford-page-metadata"
 
@@ -15,7 +15,7 @@ const StanfordPage = async ({node, ...props}: {node: NodeStanfordPage}) => {
   return (
     <div {...props}>
       <StanfordPageMetadata node={node} />
-      {node.suPageComponents && <ParagraphRows items={node.suPageComponents} fullWidth={fullWidth} />}
+      {node.suPageComponents && <Rows components={node.suPageComponents} fullWidth={fullWidth} />}
       <div className="rs-py-4 centered">Last updated {lastUpdated}</div>
     </div>
   )

diff --git a/src/components/node/stanford-publication/page-display.tsx b/src/components/node/stanford-publication/page-display.tsx
@@ -1,4 +1,4 @@
-import {ParagraphRows} from "@/components/paragraph/rows/rows"
+import Rows from "@/components/paragraph/rows/rows"
 import {DrupalLinkButton} from "@/components/patterns/link"
 import {NodeStanfordPublication} from "@/lib/gql/__generated__/drupal.d"
 
@@ -13,7 +13,7 @@ const StanfordPublication = async ({node, ...props}: {node: NodeStanfordPublicat
         {node.suPublicationComponents && (
           <div className="col-span-4">
             <div className="rs-mb-7 lg:w-11/12">
-              <ParagraphRows items={node.suPublicationComponents} />
+              <Rows components={node.suPublicationComponents} />
             </div>
           </div>
         )}

diff --git a/src/components/node/sul-library/page-display.tsx b/src/components/node/sul-library/page-display.tsx
@@ -1,4 +1,4 @@
-import {ParagraphRows} from "@/components/paragraph/rows/rows"
+import Rows from "@/components/paragraph/rows/rows"
 import LibraryAdditionalHours from "@/components/node/sul-library/library-additional-hours"
 import formatHtml from "@/lib/format-html"
 import {NodeSulLibrary} from "@/lib/gql/__generated__/drupal.d"
@@ -25,7 +25,7 @@ const SulLibrary = async ({node, ...props}: {node: NodeSulLibrary}) => {
         </div>
       )}
 
-      {node.suLibraryParagraphs && <ParagraphRows items={node.suLibraryParagraphs} fullWidth={fullWidth} />}
+      {node.suLibraryParagraphs && <Rows components={node.suLibraryParagraphs} fullWidth={fullWidth} />}
 
       {node.sulLibraryA11y && (
         <div className="centered mx-auto mb-50 w-full py-20 lg:max-w-[980px]">

diff --git a/src/components/paragraph/rows/one-column.tsx b/src/components/paragraph/rows/one-column.tsx
@@ -1,17 +1,36 @@
+// import Paragraph from "@/components/paragraph"
+// import {ParagraphUnion} from "@/lib/gql/__generated__/drupal.d"
+
+// interface LayoutProps {
+//   items: ParagraphUnion[]
+//   fullWidth?: boolean
+//   config?: Record<string, string>
+// }
+
+// const OneColumn = ({items, fullWidth = true}: LayoutProps) => {
+//   return (
+//     <div data-rows="one-column" className="relative flex flex-col gap-[90px]">
+//       {items.map(item => (
+//         <Paragraph key={item.id} paragraph={item} fullWidth={fullWidth} singleRow />
+//       ))}
+//     </div>
+//   )
+// }
+// export default OneColumn
+
 import Paragraph from "@/components/paragraph"
 import {ParagraphUnion} from "@/lib/gql/__generated__/drupal.d"
+import {isPreviewMode} from "@/lib/drupal/is-draft-mode"
 
-interface LayoutProps {
-  items: ParagraphUnion[]
-  fullWidth?: boolean
-  config?: Record<string, string>
-}
-
-const OneColumn = ({items, fullWidth = true}: LayoutProps) => {
+const OneColumn = ({items}: {items: ParagraphUnion[]}) => {
+  const draftProps: Record<string, string> = {}
+  if (isPreviewMode()) {
+    draftProps["data-columns"] = "1"
+  }
   return (
-    <div data-rows="one-column" className="relative flex flex-col gap-[90px]">
+    <div className="space-y-16 @container" {...draftProps}>
       {items.map(item => (
-        <Paragraph key={item.id} paragraph={item} fullWidth={fullWidth} singleRow />
+        <Paragraph paragraph={item} key={item.id} />
       ))}
     </div>
   )

diff --git a/src/components/paragraph/rows/rows.tsx b/src/components/paragraph/rows/rows.tsx
@@ -1,43 +1,46 @@
 import OneColumn from "@/components/paragraph/rows/one-column"
-import TwoColumn from "@/components/paragraph/rows/two-column"
+import TwoColumn, {TwoColumnConfig} from "@/components/paragraph/rows/two-column"
 import ThreeColumn from "@/components/paragraph/rows/three-column"
-import {ParagraphLayout, ParagraphUnion} from "@/lib/gql/__generated__/drupal.d"
+import {Maybe, ParagraphStanfordList, ParagraphUnion} from "@/lib/gql/__generated__/drupal.d"
 import {getParagraphBehaviors} from "@/components/paragraph"
-
-type RowProps = {
-  items: ParagraphUnion[]
-  fullWidth?: boolean
-}
+import {ParagraphBehaviors} from "@/lib/drupal/drupal"
+import {HTMLAttributes} from "react"
+import {twMerge} from "tailwind-merge"
 
 type Layout = Record<
   string,
   {
-    item: ParagraphLayout
-    layout: string
-    config?: Record<string, string>
+    item: ParagraphStanfordList
+    layout: NonNullable<ParagraphBehaviors["layout_paragraphs"]>["layout"]
+    config?: Record<string, unknown>
     children: ParagraphUnion[]
   }
 >
 
-export const ParagraphRows = ({items, fullWidth}: RowProps) => {
+type Props = HTMLAttributes<HTMLDivElement> & {
+  components?: Maybe<ParagraphUnion[]>
+}
+
+const Rows = async ({components, className, ...props}: Props) => {
+  if (!components) return
   const layouts: Layout = {}
 
   // Set the layouts first.
-  items.map(item => {
-    if (item.__typename === "ParagraphLayout") {
+  components.map(item => {
+    if (item.__typename === "ParagraphStanfordList") {
       const behaviors = getParagraphBehaviors(item)
 
       layouts[item.id] = {
         item,
-        layout: behaviors.layout_paragraphs?.layout || "sul_helper_1_column",
+        layout: behaviors.layout_paragraphs?.layout || "layout_paragraphs_1_column",
         config: behaviors.layout_paragraphs?.config,
         children: [],
       }
     }
   })
 
   // Add the components to each of the layouts.
-  items.map(item => {
+  components.map(item => {
     const behaviors = getParagraphBehaviors(item)
     const parentUUID = behaviors?.layout_paragraphs?.parent_uuid
     if (parentUUID && layouts[parentUUID]) {
@@ -46,14 +49,13 @@ export const ParagraphRows = ({items, fullWidth}: RowProps) => {
   })
 
   return (
-    <div className="mb-10 grid gap-32">
+    <div className={twMerge("space-y-32 @container", className)} {...props}>
       {Object.keys(layouts).map(layoutId => (
         <Row
           key={layoutId}
           layout={layouts[layoutId].layout}
           layoutSettings={layouts[layoutId].config}
           items={layouts[layoutId].children}
-          fullWidth={fullWidth}
         />
       ))}
     </div>
@@ -64,18 +66,17 @@ const Row = ({
   layout,
   layoutSettings,
   items,
-  fullWidth,
 }: {
-  layout: string
-  layoutSettings?: Record<string, string>
+  layout: NonNullable<ParagraphBehaviors["layout_paragraphs"]>["layout"]
+  layoutSettings?: Record<string, unknown>
   items: ParagraphUnion[]
-  fullWidth?: boolean
 }) => {
-  return (
-    <>
-      {layout === "sul_helper_1_column" && <OneColumn config={layoutSettings} items={items} fullWidth={fullWidth} />}
-      {layout === "sul_helper_2_column" && <TwoColumn config={layoutSettings} items={items} fullWidth={fullWidth} />}
-      {layout === "sul_helper_3_column" && <ThreeColumn items={items} fullWidth={fullWidth} />}
-    </>
-  )
+  if (layout === "layout_paragraphs_2_column")
+    return <TwoColumn config={layoutSettings as TwoColumnConfig} items={items} />
+  if (layout === "layout_paragraphs_3_column") return <ThreeColumn items={items} />
+
+  // Fall back to one column if the layout is unknown.
+  return <OneColumn items={items} />
 }
+
+export default Rows
diff --git a/src/components/paragraph/rows/three-column.tsx b/src/components/paragraph/rows/three-column.tsx
@@ -1,39 +1,25 @@
-import Paragraph, {getParagraphBehaviors} from "@/components/paragraph"
+import OneColumn from "@/components/paragraph/rows/one-column"
 import {ParagraphUnion} from "@/lib/gql/__generated__/drupal.d"
+import {getParagraphBehaviors} from "@/components/paragraph"
+import {isPreviewMode} from "@/lib/drupal/is-draft-mode"
 
-interface LayoutProps {
-  items: ParagraphUnion[]
-  fullWidth?: boolean
-}
+const ThreeColumn = ({items}: {items: ParagraphUnion[]}) => {
+  const leftItems = items.filter(item => getParagraphBehaviors(item).layout_paragraphs?.region === "left")
+  const mainItems = items.filter(
+    item => !["left", "right"].includes(getParagraphBehaviors(item).layout_paragraphs?.region || "main")
+  )
+  const rightItems = items.filter(item => getParagraphBehaviors(item).layout_paragraphs?.region === "right")
+
+  const draftProps: Record<string, string> = {}
+  if (isPreviewMode()) {
+    draftProps["data-columns"] = "3"
+  }
 
-const ThreeColumn = ({items}: LayoutProps) => {
-  const leftItems = items.filter(item => getParagraphBehaviors(item)?.layout_paragraphs?.region === "left")
-  const mainItems = items.filter(item => getParagraphBehaviors(item)?.layout_paragraphs?.region === "main")
-  const rightItems = items.filter(item => getParagraphBehaviors(item)?.layout_paragraphs?.region === "right")
   return (
-    <div data-rows="three-column" className="centered flex flex-col items-center gap-[90px]">
-      <div className="grid gap-[90px] md:grid-cols-2 lg:grid-cols-3">
-        <div className="relative flex min-w-0 flex-col gap-2xl">
-          {leftItems.map(item => (
-            <Paragraph key={item.id} paragraph={item} fullWidth={false} />
-          ))}
-        </div>
-        <div className="relative flex min-w-0 flex-col gap-2xl">
-          {mainItems.map(item => (
-            <Paragraph key={item.id} paragraph={item} fullWidth={false} />
-          ))}
-        </div>
-        <div className="relative hidden min-w-0 flex-col gap-2xl lg:block">
-          {rightItems.map(item => (
-            <Paragraph key={item.id} paragraph={item} fullWidth={false} />
-          ))}
-        </div>
-      </div>
-      <div className="relative flex w-full max-w-[47rem] flex-col items-center justify-center gap-2xl md:w-[calc(50%_-_45px)] lg:hidden">
-        {rightItems.map(item => (
-          <Paragraph key={item.id} paragraph={item} fullWidth={false} />
-        ))}
-      </div>
+    <div className="centered grid gap-10 @9xl:grid-cols-3 @9xl:gap-20" {...draftProps}>
+      <OneColumn items={leftItems} />
+      <OneColumn items={mainItems} />
+      <OneColumn items={rightItems} />
     </div>
   )
 }

diff --git a/src/components/paragraph/rows/two-column.tsx b/src/components/paragraph/rows/two-column.tsx
@@ -1,35 +1,34 @@
-import Paragraph, {getParagraphBehaviors} from "@/components/paragraph"
+import OneColumn from "@/components/paragraph/rows/one-column"
 import {ParagraphUnion} from "@/lib/gql/__generated__/drupal.d"
+import {getParagraphBehaviors} from "@/components/paragraph"
+import {isPreviewMode} from "@/lib/drupal/is-draft-mode"
+import {twMerge} from "tailwind-merge"
 
-interface LayoutProps {
+export type TwoColumnConfig = Record<string, string>
+type Props = {
   items: ParagraphUnion[]
-  fullWidth?: boolean
-  config?: Record<string, string>
+  config?: TwoColumnConfig
 }
+const TwoColumn = ({items, config}: Props) => {
+  const leftItems = items.filter(item => getParagraphBehaviors(item).layout_paragraphs?.region === "left")
+  const rightItems = items.filter(item => getParagraphBehaviors(item).layout_paragraphs?.region !== "left")
 
-const TwoColumn = ({config, items}: LayoutProps) => {
-  const leftItems = items.filter(item => getParagraphBehaviors(item)?.layout_paragraphs?.region === "left")
-  const rightItems = items.filter(item => getParagraphBehaviors(item)?.layout_paragraphs?.region !== "left")
-
-  let gridClass = "lg:grid-cols-2"
+  let gridCols = "md:grid-cols-2"
   if (config?.column_widths === "33-67") {
-    gridClass = "lg:grid-cols-1-2"
+    gridCols = "@6xl:grid-cols-1-2"
   } else if (config?.column_widths === "67-33") {
-    gridClass = "lg:grid-cols-2-1"
+    gridCols = "@6xl:grid-cols-2-1"
+  }
+
+  const draftProps: Record<string, string> = {}
+  if (isPreviewMode()) {
+    draftProps["data-columns"] = "2"
   }
 
   return (
-    <div data-rows="two-column" className={`centered grid gap-[90px] ${gridClass}`}>
-      <div className="relative flex min-w-0 flex-col gap-2xl">
-        {leftItems.map(item => (
-          <Paragraph key={item.id} paragraph={item} fullWidth={false} />
-        ))}
-      </div>
-      <div className="relative flex min-w-0 flex-col gap-2xl">
-        {rightItems.map(item => (
-          <Paragraph key={item.id} paragraph={item} fullWidth={false} />
-        ))}
-      </div>
+    <div className={twMerge("gutters grid gap-10 @6xl:gap-20", gridCols)} {...draftProps}>
+      <OneColumn items={leftItems} />
+      <OneColumn items={rightItems} />
     </div>
   )
 }

diff --git a/src/components/paragraph/sul-home-banner/sul-home-banner.client.tsx b/src/components/paragraph/sul-home-banner/sul-home-banner.client.tsx
@@ -38,17 +38,11 @@ export const SulHomeBannerFormClient = () => {
         </label>
         <MagnifyingGlassIcon width={40} className="hidden sm:block" />
         <input
-          className="hidden h-40 w-full min-w-[25rem] border-0 text-16 sm:block md:min-w-[32rem] md:text-20 xl:min-w-[35rem] xl:text-22"
+          className="block h-40 w-full min-w-[25rem] border-0 text-16 md:min-w-[32rem] md:text-20 xl:min-w-[35rem] xl:text-22"
           name="q"
           id={inputId}
           placeholder="Search for books, articles, and more"
         />
-        <input
-          className="block h-40 w-full min-w-150 border-0 text-16 sm:hidden"
-          name="q"
-          id={inputId}
-          placeholder="Search by keyword"
-        />
       </div>
       <div className="hidden h-50 w-[.5px] shrink-0 bg-black xs:block" />
 

diff --git a/src/lib/drupal/drupal.d.ts b/src/lib/drupal/drupal.d.ts
@@ -3,7 +3,7 @@ import {Maybe} from "@/lib/gql/__generated__/drupal.d"
 
 export type ParagraphBehaviors = {
   layout_paragraphs?: {
-    layout?: "sul_helper_1_column" | "sul_helper_2_column" | "sul_helper_3_column"
+    layout?: "layout_paragraphs_1_column" | "layout_paragraphs_2_column" | "layout_paragraphs_3_column" | string
     parent_uuid?: string
     region?: string
     config?: Record<string, string>

diff --git a/src/lib/drupal/is-draft-mode.tsx b/src/lib/drupal/is-draft-mode.tsx
@@ -1,11 +1,11 @@
+import {cookies, type UnsafeUnwrappedCookies} from "next/headers"
+
 /*
- Draft mode works only in normal builds, use environment variable during development.
+ * Draft mode works when in normal builds. Use environment variable during development.
  */
-import {cookies} from "next/headers"
-
-export const isPreviewMode = async (): Promise<boolean> => {
-  const cookieValues = await cookies()
+export const isPreviewMode = (): boolean => {
   return (
-    process.env.NODE_ENV === "development" || cookieValues.get("preview")?.value === process.env.DRUPAL_PREVIEW_SECRET
+    process.env.NODE_ENV === "development" ||
+    (cookies() as unknown as UnsafeUnwrappedCookies)?.get("preview")?.value === process.env.DRUPAL_PREVIEW_SECRET
   )
 }