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/Puff/puff.module.css

@@ -0,0 +1,55 @@
+.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;
+  width: 100%;
+}
+
+.content {
+  padding: 10px;
+  background-color: #fff;
+}
+
+.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: 740px) {
+  .content {
+    padding: 20px 0px;
+  }
+}
+
+@media screen and (min-width: 950px) {
+  .heading {
+    font-size: 1.375rem;
+  }
+}

components/Current/Aside/Puff/renderOptions.tsx

@@ -0,0 +1,22 @@
+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 key={node.uid} className={styles.p}>
+        {next(node.children, embeds, fullRenderOptions)}
+      </p>
+    )
+  },
+}