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 breadcrumbs = page.breadcrumbs.parents
-  const parent = breadcrumbs.edges.at(-1)
+  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}`}>
+            <a href={parent.href}>
-              {parent.node.breadcrumbs?.title ?? parent.node.title}
+              {parent.title}
-            </Link>
+            </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}`}>
+            <a className={styles.link} href={breadcrumb.href}>
-              {breadcrumb.node.breadcrumbs?.title ?? breadcrumb.node.title}
+              {breadcrumb.title}
-            </Link>
+            </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}`}>
+              <a href={parent.href}>
-                {parent.node.breadcrumbs?.title ?? parent.node.title}
+                {parent.title}
-              </Link>
+              </a>
             </li>
           ) : null}
-          {breadcrumbs.edges.map((breadcrumb) => (
+          {breadcrumbs.map((breadcrumb) => (
-            <li className="breadcrumb-list__body" key={breadcrumb.node.url}>
+            <li className="breadcrumb-list__body" key={breadcrumb.href}>
-              <Link href={`/${breadcrumb.node.system.locale}${breadcrumb.node.url}`}>
+              <a href={breadcrumb.href}>
-                {breadcrumb.node.breadcrumbs?.title ?? breadcrumb.node.title}
+                {breadcrumb.title}
-              </Link>
+              </a>
             </li>
           ))}
           <li className="breadcrumb-list__body">

lib/graphql/Fragments/Aside/Puff.graphql

@@ -2,13 +2,6 @@
 
 fragment PuffAside on CurrentBlocksPageAsidePuff {
   puff {
-    puffConnection {
+    ...Puff
-      totalCount
-      edges {
-        node {
-          ...Puff
-        }
-      }
-    }
   }
 }

lib/graphql/Fragments/Blocks/List.graphql

@@ -1,5 +1,3 @@
-#import "../PageLinks.graphql"
-
 fragment ListItem on CurrentBlocksPageBlocksListBlockListItemsListItem {
   list_item {
     list_item_style
@@ -19,30 +17,12 @@ fragment ListItemExternalLink on CurrentBlocksPageBlocksListBlockListItemsListIt
   }
 }
 
-fragment ListItemInternalLink on CurrentBlocksPageBlocksListBlockListItemsListItemInternalLink {
-  list_item_internal_link {
-    link_text
-    list_item_style
-    subtitle
-    pageConnection {
-      totalCount
-      edges {
-        node {
-          __typename
-          ...CurrentBlocksPageLink
-        }
-      }
-    }
-  }
-}
-
 fragment ListBlock on CurrentBlocksPageBlocksList {
   list {
     list_items {
       __typename
       ...ListItem
       ...ListItemExternalLink
-      ...ListItemInternalLink
     }
     title
   }

lib/graphql/Fragments/Blocks/Puff.graphql

@@ -2,11 +2,9 @@
 
 fragment PuffBlock on CurrentBlocksPageBlocksPuffs {
   puffs {
-    # We have to manually add a limit since Contentstack handles its complexity calculation in a certain way
+    puffs {
-    puffsConnection(limit: 9) {
+      ... on CurrentBlocksPageBlocksPuffsBlockPuffsPuff {
-      totalCount
+        puff {
-      edges {
-        node {
           ...Puff
         }
       }

lib/graphql/Fragments/Blocks/Text.graphql

@@ -1,5 +1,4 @@
 #import "../Image.graphql"
-#import "../PageLinks.graphql"
 
 fragment TextBlock on CurrentBlocksPageBlocksText {
   text {
@@ -9,7 +8,6 @@ fragment TextBlock on CurrentBlocksPageBlocksText {
         edges {
           node {
             __typename
-            ...CurrentBlocksPageLink
             ...Image
           }
         }

lib/graphql/Fragments/Breadcrumbs.graphql

@@ -1,19 +1,9 @@
-#import "./PageLinks.graphql"
-
 fragment Breadcrumbs on CurrentBlocksPage {
   breadcrumbs {
-    title
+    parents {
-    parentsConnection {
+      href
-      edges {
+      title
-        node {
-          ... on CurrentBlocksPage {
-            breadcrumbs {
-              title
-            }
-            ...CurrentBlocksPageLink
-          }
-        }
-      }
     }
+    title
   }
 }

lib/graphql/Fragments/Hero.graphql

@@ -1,5 +1,4 @@
 #import "./Image.graphql"
-#import "./PageLinks.graphql"
 
 fragment Hero on Hero {
   imagesConnection {

lib/graphql/Fragments/Preamble.graphql

@@ -1,5 +1,4 @@
 #import "./Image.graphql"
-#import "./PageLinks.graphql"
 
 fragment Preamble on CurrentBlocksPage {
   preamble {
@@ -9,7 +8,6 @@ fragment Preamble on CurrentBlocksPage {
         edges {
           node {
             __typename
-            ...CurrentBlocksPageLink
             ...Image
           }
         }

lib/graphql/Fragments/Puff.graphql

@@ -1,5 +1,4 @@
 #import "./Image.graphql"
-#import "./PageLinks.graphql"
 
 fragment Puff on Puff {
   imageConnection {
@@ -9,33 +8,12 @@ fragment Puff on Puff {
       }
     }
   }
-  is_internal
   link {
     href
     title
   }
-  pageConnection {
-    edges {
-      node {
-        __typename
-        ...CurrentBlocksPageLink
-      }
-    }
-  }
-  system {
-    uid
-  }
   text {
     json
-    embedded_itemsConnection {
-      totalCount
-      edges {
-        node {
-          __typename
-          ...Image
-        }
-      }
-    }
   }
   title
 }

lib/graphql/Query/CurrentBlockPage.graphql

@@ -27,13 +27,13 @@ query GetCurrentBlockPage($locale: String!, $url: String!) {
         ...Hero
       }
       ...Preamble
-      title
-      url
       system {
-        uid
         created_at
+        uid
         updated_at
       }
+      title
+      url
     }
     total
   }

types/components/current/breadcrumbs.ts

@@ -1,8 +1,7 @@
 import type { Breadcrumb } from "@/types/requests/currentBlockPage"
-import type { Edges, Node } from "@/types/requests/utils/edges"
 
 export type BreadcrumbsProps = {
-  breadcrumbs: Edges<Breadcrumb>
+  breadcrumbs: Breadcrumb[]
-  parent?: Node<Breadcrumb>
+  parent?: Breadcrumb
   title: string
 }

types/components/current/subnavMobile.ts

@@ -1,8 +1,7 @@
 import type { Breadcrumb } from "@/types/requests/currentBlockPage"
-import type { Edges, Node } from "@/types/requests/utils/edges"
 
 export type SubnavMobileProps = {
-  breadcrumbs: Edges<Breadcrumb>
+  breadcrumbs: Breadcrumb[]
-  parent?: Node<Breadcrumb>
+  parent?: Breadcrumb
   title: string
 }

types/requests/asides/puff.ts

@@ -1,8 +1,5 @@
 import type { Puff } from "../puff"
-import type { Edges } from "../utils/edges"
 
 export type PuffAside = {
-  puff: {
+  puff: Puff
-    puffConnection: Edges<Puff>
-  }
 }

types/requests/blocks/list.ts

@@ -1,5 +1,3 @@
-import type { Edges } from "../utils/edges"
-import type { PageLink } from "../utils/pageLink"
 import type { Typename } from "../utils/typename"
 
 enum ListItemStyleEnum {
@@ -12,7 +10,6 @@ type ListItemStyle = keyof typeof ListItemStyleEnum
 export enum BlockListItemsEnum {
   CurrentBlocksPageBlocksListBlockListItemsListItem = "CurrentBlocksPageBlocksListBlockListItemsListItem",
   CurrentBlocksPageBlocksListBlockListItemsListItemExternalLink = "CurrentBlocksPageBlocksListBlockListItemsListItemExternalLink",
-  CurrentBlocksPageBlocksListBlockListItemsListItemInternalLink = "CurrentBlocksPageBlocksListBlockListItemsListItemInternalLink",
 }
 
 type ExternalLinkListItem = Typename<
@@ -29,18 +26,6 @@ type ExternalLinkListItem = Typename<
   BlockListItemsEnum.CurrentBlocksPageBlocksListBlockListItemsListItemExternalLink
 >
 
-type InternalLinkListItem = Typename<
-  {
-    list_item_internal_link: {
-      link_text?: string
-      list_item_style: ListItemStyle
-      subtitle?: string
-      pageConnection: Edges<PageLink>
-    }
-  },
-  BlockListItemsEnum.CurrentBlocksPageBlocksListBlockListItemsListItemInternalLink
->
-
 type RegularListItem = Typename<
   {
     list_item: {
@@ -54,7 +39,6 @@ type RegularListItem = Typename<
 
 export type ListItem =
   | ExternalLinkListItem
-  | InternalLinkListItem
   | RegularListItem
 
 export type List = {

types/requests/blocks/puff.ts

@@ -1,8 +1,9 @@
-import type { Edges } from "../utils/edges"
 import type { Puff } from "../puff"
 
 export type PuffBlock = {
   puffs: {
-    puffsConnection: Edges<Puff>
+    puffs: {
+      puff: Puff
+    }[]
   }
 }

types/requests/currentBlockPage.ts

@@ -13,8 +13,6 @@ import type {
   Typename,
   PagesTypenameEnum,
 } from "./utils/typename"
-import type { EmbedEnum } from "./utils/embeds"
-import type { Edges } from "./utils/edges"
 
 export type Asides =
   | Typename<Contact, AsideTypenameEnum.CurrentBlocksPageAsideContact>
@@ -25,26 +23,13 @@ export type Blocks =
   | Typename<PuffBlock, BlocksTypenameEnum.CurrentBlocksPageBlocksPuffs>
   | Typename<Text, BlocksTypenameEnum.CurrentBlocksPageBlocksText>
 
-interface SharedBreadcrumb {
+export type Breadcrumb = {
-  breadcrumbs: {
+  href: string
-    title?: string
-  } | null
-  system: {
-    locale: string
-    uid: string
-  }
   title: string
-  url: string
 }
 
-export interface CurrentBlocksPageBreadcrumb extends SharedBreadcrumb {
-  __typename: EmbedEnum.CurrentBlocksPage
-}
-
-export type Breadcrumb = CurrentBlocksPageBreadcrumb
-
 export type Breadcrumbs = {
-  parentsConnection: Edges<Breadcrumb>
+  parents: Breadcrumb[]
   title: string
 }
 
@@ -55,13 +40,13 @@ export type BlockPage = {
   breadcrumbs: Breadcrumbs
   hero: Hero
   preamble: Preamble
-  title: string
-  url: string
   system: {
-    uid: string
     created_at: string
+    uid: string
     updated_at: string
   }
+  title: string
+  url: string
 }
 
 export type GetCurrentBlockPageData = {

types/requests/embeds.ts

@@ -1,4 +1,3 @@
 import type { SysAsset } from "./utils/asset"
-import type { PageLinkType } from "./utils/pageLink"
 
-export type Embeds = PageLinkType | SysAsset
+export type Embeds = SysAsset

types/requests/header.ts

@@ -2,10 +2,8 @@ import type { Edges } from "./utils/edges"
 import type { Image } from "../image"
 
 export type HeaderLink = {
-  link: {
+  href: string
-    href: string
+  title: string
-    title: string
-  }
 }
 
 export type TopMenuHeaderLink = {

types/requests/puff.ts

@@ -1,22 +1,14 @@
 import type { Image } from "../image"
 import type { Edges } from "./utils/edges"
-import type { Embeds } from "./embeds"
-import type { PageLink } from "./utils/pageLink"
 import type { RTEDocument } from "../rte/node"
 
 export type Puff = {
   imageConnection: Edges<Image>
-  is_internal: boolean
   link: {
     href: string
     title: string
   }
-  pageConnection: Edges<PageLink>
-  system: {
-    uid: string
-  }
   text: {
-    embedded_itemsConnection: Edges<Embeds>
     json: RTEDocument
   }
   title: string

types/requests/utils/typename.ts

@@ -7,7 +7,6 @@ export type AsideTypename = keyof typeof AsideTypenameEnum
 
 export enum BlocksTypenameEnum {
   CurrentBlocksPageBlocksList = "CurrentBlocksPageBlocksList",
-  CurrentBlocksPageBlocksPreamble = "CurrentBlocksPageBlocksPreamble",
   CurrentBlocksPageBlocksPuffs = "CurrentBlocksPageBlocksPuffs",
   CurrentBlocksPageBlocksText = "CurrentBlocksPageBlocksText",
 }