Merged in fix/puffs-map-in-map (pull request #23)

fix: move puffs map to own container

Approved-by: Michael Zetterberg

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

@@ -0,0 +1,66 @@
+import { renderOptions } from "./renderOptions"
+
+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"
+import Image from "@/components/Image"
+
+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.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 className="content-teaser__body-wrapper">
+          <h3 className={styles.heading}>
+            {title}
+          </h3>
+        </header>
+        <JsonToHtml
+          embeds={text.embedded_itemsConnection.edges}
+          nodes={text.json.children}
+          renderOptions={renderOptions}
+        />
+      </section>
+    </article>
+  )
+}

components/Current/Asides/Puffs/Puff/puff.module.css

@@ -0,0 +1,47 @@
+.link {
+  display: inline-block;
+  transition: 200ms ease;
+}
+
+.link:hover {
+  text-decoration: none;
+  transform: scale(1.01);
+}
+
+.image {
+  height: auto;
+  object-fit: contain;
+  object-position: center;
+}
+
+.content {
+  padding: 20px 0px;
+}
+
+.heading {
+  color: #00838e;
+  font-family: Helvetica, Arial, sans-serif;
+  font-weight: 400;
+  line-height: normal;
+  margin-bottom: 0;
+  text-decoration: none;
+  text-transform: none;
+}
+
+.link:hover .heading {
+  text-decoration: underline;
+}
+
+.p {
+  color: #333;
+  line-height: 1.3;
+  margin-bottom: 0;
+  padding-top: 7px;
+  text-decoration: none;
+}
+
+@media screen and (min-width: 950px) {
+  .heading {
+    font-size: 1.375rem;
+  }
+}

components/Current/Asides/Puffs/Puff/renderOptions.tsx

@@ -0,0 +1,13 @@
+import styles from "./puff.module.css"
+
+import { RTETypeEnum } from "@/types/rte/enums"
+
+import type { EmbedByUid } from "@/types/components/jsontohtml"
+import type { RTENext, RTEDefaultNode } from "@/types/rte/node"
+import type { RenderOptions } from "@/types/rte/option"
+
+export const renderOptions: RenderOptions = {
+  [RTETypeEnum.p]: (node: RTEDefaultNode, embeds: EmbedByUid, next: RTENext, fullRenderOptions: RenderOptions) => {
+    return <p className={styles.p}>{next(node.children, embeds, fullRenderOptions)}</p>
+  },
+}

components/Current/Asides/Puffs/index.tsx

@@ -0,0 +1,16 @@
+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} />
+      ))}
+    </>
+  )
+}