feat(WEB-112): adjust current-blocks-page to new model

components/Current/Aside/Puff/index.tsx

@@ -0,0 +1,42 @@
+import { renderOptions } from "./renderOptions"
+
+import Image from "@/components/Image"
+import JsonToHtml from "@/components/JsonToHtml"
+
+import styles from "./puff.module.css"
+
+import type { PuffProps } from "@/types/components/current/asides/puff"
+
+export default function Puff({
+  imageConnection,
+  link,
+  text,
+  title,
+}: PuffProps) {
+  return (
+    <a className={styles.link} href={link.href}>
+      <article>
+        {imageConnection.edges.map((image) => (
+          <Image
+            alt={image.node.title}
+            className={styles.image}
+            height={image.node.dimension.height}
+            key={image.node.system.uid}
+            src={image.node.url}
+            width={image.node.dimension.width}
+          />
+        ))}
+        <section className={styles.content}>
+          <header>
+            <h3 className={styles.heading}>{title}</h3>
+          </header>
+          <JsonToHtml
+            embeds={[]}
+            nodes={text.json.children}
+            renderOptions={renderOptions}
+          />
+        </section>
+      </article>
+    </a>
+  )
+}

components/Current/Aside/Puffs/Puff/index.tsx

@@ -1,74 +0,0 @@
-import { renderOptions } from "./renderOptions"
-
-import Image from "@/components/Image"
-import JsonToHtml from "@/components/JsonToHtml"
-import Link from "next/link"
-
-import styles from "./puff.module.css"
-
-import type { PuffProps } from "@/types/components/current/asides/puff"
-
-export default function Puff({
-  imageConnection,
-  is_internal,
-  link,
-  pageConnection,
-  text,
-  title,
-}: PuffProps) {
-  if (is_internal) {
-    const page = pageConnection.edges[0]
-    if (!page?.node?.url) {
-      return null
-    }
-    return (
-      <Link className={styles.link} href={`/${page.node.system.locale}${page.node.url}`}>
-        <PuffContent
-          imageConnection={imageConnection}
-          text={text}
-          title={title}
-        />
-      </Link>
-    )
-  }
-  return (
-    <a className={styles.link} href={link.href} target="_blank">
-      <PuffContent
-        imageConnection={imageConnection}
-        text={text}
-        title={title}
-      />
-    </a>
-  )
-}
-
-function PuffContent({
-  imageConnection,
-  text,
-  title,
-}: Pick<PuffProps, "imageConnection" | "text" | "title">) {
-  return (
-    <article>
-      {imageConnection.edges.map((image) => (
-        <Image
-          alt={image.node.title}
-          className={styles.image}
-          height={image.node.dimension.height}
-          key={image.node.system.uid}
-          src={image.node.url}
-          width={image.node.dimension.width}
-        />
-      ))}
-      <section className={styles.content}>
-        <header>
-          <h3 className={styles.heading}>{title}</h3>
-        </header>
-        <JsonToHtml
-          embeds={text.embedded_itemsConnection.edges}
-          nodes={text.json.children}
-          renderOptions={renderOptions}
-        />
-      </section>
-    </article>
-  )
-}

components/Current/Aside/Puffs/index.tsx

@@ -1,16 +0,0 @@
-import Puff from "./Puff"
-
-import type { PuffsProps } from "@/types/components/current/asides/puffs"
-
-export default function Puffs({ puffs }: PuffsProps) {
-  if (!puffs.length) {
-    return null
-  }
-  return (
-    <>
-      {puffs.map((puff) => (
-        <Puff key={puff.node.system.uid} {...puff.node} />
-      ))}
-    </>
-  )
-}

components/Current/Aside/index.tsx

@@ -1,4 +1,4 @@
-import Puffs from "./Puffs"
+import Puff from "./Puff"
 import Contacts from "./Contacts"
 
 import { AsideTypenameEnum } from "@/types/requests/utils/typename"
@@ -25,9 +25,9 @@ export default function Aside({ blocks }: AsideProps) {
             )
           case AsideTypenameEnum.CurrentBlocksPageAsidePuff:
             return (
-              <Puffs
+              <Puff
                 key={`block-${idx}`}
-                puffs={block.puff.puffConnection.edges}
+                {...block.puff}
               />
             )
           default:

components/Current/Blocks/List/ListItem.tsx

@@ -1,4 +1,3 @@
-import Link from "next/link"
 import { cva } from "class-variance-authority"
 import { BlockListItemsEnum } from "@/types/requests/blocks/list"
 
@@ -63,27 +62,6 @@ export default function ListItem({ listItem }: { listItem: ListItem }) {
           )}
         </li>
       )
-    case BlockListItemsEnum.CurrentBlocksPageBlocksListBlockListItemsListItemInternalLink:
-      const link = listItem.list_item_internal_link.pageConnection.edges[0]
-      const linkUrlWithLocale = `/${link.node.system.locale}${link.node.url}`
-      return (
-        <li
-          key={link.node.system.uid}
-          className={listItemStyle({
-            type: listItem.list_item_internal_link.list_item_style,
-          })}
-        >
-          <Link href={linkUrlWithLocale} className={styles.link}>
-            {listItem.list_item_internal_link.link_text}
-          </Link>
-          {listItem.list_item_internal_link.subtitle && (
-            <span>
-              <br />
-              {listItem.list_item_internal_link.subtitle}
-            </span>
-          )}
-        </li>
-      )
 
     default:
       return null

components/Current/Blocks/List/index.tsx

@@ -1,17 +1,18 @@
-import type { ListProps } from "@/types/requests/blocks/list"
+import ListItem from "./ListItem"
 
 import styles from "./list.module.css"
-import ListItem from "./ListItem"
+
+import type { ListProps } from "@/types/requests/blocks/list"
 
 export default function List({ list }: ListProps) {
   return (
-    <div>
+    <>
       {list.title ? <h2 className={styles.title}>{list.title}</h2> : null}
       <ul className={styles.ul}>
         {list.list_items.map((item, i) => (
           <ListItem listItem={item} key={`list-item-${i}`} />
         ))}
       </ul>
-    </div>
+    </>
   )
 }

components/Current/Blocks/List/list.module.css

@@ -1,11 +1,16 @@
 .title {
+  color: #483729;
   font-family: BrandonText-Bold, Arial, Helvetica, sans-serif;
   font-size: 1.375rem;
-  line-height: 1.1em;
-  text-transform: uppercase;
   font-weight: 400;
-  color: #483729;
+  line-height: 1.1em;
   margin-bottom: 1rem;
+  margin-top: 2rem;
+  text-transform: uppercase;
+}
+
+.title:first-child {
+  margin-top: 0;
 }
 
 .ul {
@@ -64,4 +69,4 @@
   .title {
     font-size: 1.625rem;
   }
-}
+}

components/Current/ContentPage/index.tsx

@@ -12,8 +12,8 @@ import type { ContentPageProps } from "@/types/components/current/contentPage"
 export default function ContentPage({ data }: ContentPageProps) {
   const page = data.all_current_blocks_page.items[0]
   const images = page.hero?.imagesConnection
-  const breadcrumbs = page.breadcrumbs.parentsConnection
-  const parent = breadcrumbs.edges.at(-1)
+  const breadcrumbs = page.breadcrumbs.parents
+  const parent = breadcrumbs.at(-1)
 
   return (
     <>

components/Current/Header/MainMenu/index.tsx

@@ -2,7 +2,6 @@
 import { useState } from "react"
 
 import Image from "@/components/Image"
-import Link from "next/link"
 // import Mobile from "../LanguageSwitcher/Mobile"
 
 import styles from "./mainMenu.module.css"
@@ -40,7 +39,7 @@ export default function MainMenu({ frontpageLinkText, homeHref, links, logo, top
           <span className={styles.hiddenAccessible}>Menu</span>
         </button>
 
-        <Link
+        <a
           className={styles.logoLink}
           href={homeHref}
           id="scandic-logo"
@@ -59,7 +58,7 @@ export default function MainMenu({ frontpageLinkText, homeHref, links, logo, top
             src={logo.url}
             width={logo.dimension.width}
           />
-        </Link>
+        </a>
 
         <nav>
           <ul
@@ -67,26 +66,26 @@ export default function MainMenu({ frontpageLinkText, homeHref, links, logo, top
             data-collapsable="main-menu"
             id="main-menu"
           >
-            {links.map(({ link }) => (
+            {links.map(link => (
               <li
                 className={styles.li}
                 key={link.href}
               >
-                <Link
+                <a
                   className={styles.link}
                   href={link.href}
                 >
                   {link.title}
-                </Link>
+                </a>
               </li>
             ))}
 
             <ul className={styles.mobileList}>
               {topMenuMobileLinks.map(({ link }) => (
                 <li className={styles.mobileLi} key={link.href}>
-                  <Link className={styles.mobileLink} href={link.href}>
+                  <a className={styles.mobileLink} href={link.href}>
                     {link.title}
-                  </Link>
+                  </a>
                 </li>
               ))}
             </ul>

components/Current/Header/TopMenu/index.tsx

@@ -1,5 +1,4 @@
 // import Desktop from "../LanguageSwitcher/Desktop"
-import Link from "next/link"
 
 import styles from "./topMenu.module.css"
 
@@ -13,12 +12,12 @@ export default function TopMenu({ frontpageLinkText, homeHref, links }: TopMenuP
   return (
     <div className={styles.topMenu}>
       <div className={styles.container}>
-        <Link
+        <a
           className={styles.homeLink}
           href={homeHref}
         >
           {frontpageLinkText}
-        </Link>
+        </a>
 
         <ul className={styles.list}>
           {/* <li className="nav-secondary__item hidden-xxsmall hidden-xsmall hidden-small">
@@ -26,12 +25,12 @@ export default function TopMenu({ frontpageLinkText, homeHref, links }: TopMenuP
         </li> */}
           {links.map(({ link }) => (
             <li key={link.href}>
-              <Link
+              <a
                 className={styles.link}
                 href={link.href}
               >
                 {link.title}
-              </Link>
+              </a>
             </li>
           ))}
         </ul>

components/Current/Preamble/Breadcrumbs/index.tsx

@@ -1,5 +1,3 @@
-import Link from "next/link"
-
 import styles from "./breadcrumbs.module.css"
 
 import type { BreadcrumbsProps } from "@/types/components/current/breadcrumbs"
@@ -14,20 +12,20 @@ export default function Breadcrumbs({
       <ul className={styles.list}>
         {parent ? (
           <li className={styles.parent}>
-            <Link href={`/${parent.node.system.locale}${parent.node.url}`}>
-              {parent.node.breadcrumbs?.title ?? parent.node.title}
-            </Link>
+            <a href={parent.href}>
+              {parent.title}
+            </a>
           </li>
         ) : null}
-        {breadcrumbs.edges.map((breadcrumb) => (
+        {breadcrumbs.map((breadcrumb) => (
           <li
             className={styles.li}
             itemProp="breadcrumb"
-            key={breadcrumb.node.title}
+            key={breadcrumb.href}
           >
-            <Link className={styles.link} href={`/${breadcrumb.node.system.locale}${breadcrumb.node.url}`}>
-              {breadcrumb.node.breadcrumbs?.title ?? breadcrumb.node.title}
-            </Link>
+            <a className={styles.link} href={breadcrumb.href}>
+              {breadcrumb.title}
+            </a>
           </li>
         ))}
         <li className={styles.currentPage}>

components/Current/SubnavMobile.tsx

@@ -1,5 +1,3 @@
-import Link from "next/link"
-
 import type { SubnavMobileProps } from "@/types/components/current/subnavMobile"
 
 export default async function SubnavMobile({
@@ -13,16 +11,16 @@ export default async function SubnavMobile({
         <ul className="breadcrumb-list hidden-small hidden-medium hidden-large">
           {parent ? (
             <li className="breadcrumb-list__parent hidden-medium hidden-large">
-              <Link href={`/${parent.node.system.locale}${parent.node.url}`}>
-                {parent.node.breadcrumbs?.title ?? parent.node.title}
-              </Link>
+              <a href={parent.href}>
+                {parent.title}
+              </a>
             </li>
           ) : null}
-          {breadcrumbs.edges.map((breadcrumb) => (
-            <li className="breadcrumb-list__body" key={breadcrumb.node.url}>
-              <Link href={`/${breadcrumb.node.system.locale}${breadcrumb.node.url}`}>
-                {breadcrumb.node.breadcrumbs?.title ?? breadcrumb.node.title}
-              </Link>
+          {breadcrumbs.map((breadcrumb) => (
+            <li className="breadcrumb-list__body" key={breadcrumb.href}>
+              <a href={breadcrumb.href}>
+                {breadcrumb.title}
+              </a>
             </li>
           ))}
           <li className="breadcrumb-list__body">