Merge pull request #671 from CodeForAfrica/feat/charterafrica_longfor…

…m_mediablock

@/charterafrica MediaBlock

apps/charterafrica/contrib/dokku/Dockerfile

@@ -1 +1 @@
-FROM codeforafrica/charterafrica-ui:0.1.17
+FROM codeforafrica/charterafrica-ui:0.1.18

apps/charterafrica/package.json

@@ -1,6 +1,6 @@
 {
   "name": "charterafrica",
-  "version": "0.1.17",
+  "version": "0.1.18",
   "private": true,
   "author": "Code for Africa <[email protected]>",
   "description": "This is the official code for https://charter.africa site",

apps/charterafrica/src/components/LongForm/LongForm.js

@@ -3,9 +3,11 @@ import { Box } from "@mui/material";
 import React from "react";
 
 import { secondary } from "@/charterafrica/colors";
+import LongFormMediaBlock from "@/charterafrica/components/LongFormMediaBlock";
 import LongFormRichText from "@/charterafrica/components/LongFormRichText";
 
 const COMPONENT_BY_LONG_FORM_TYPE = {
+  mediaBlock: LongFormMediaBlock,
   richText: LongFormRichText,
 };
 
@@ -30,10 +32,10 @@ const LongForm = React.forwardRef(function LongForm(props, ref) {
           py: { xs: 5, md: "74.5px" },
         }}
       >
-        {content.map((c) => {
+        {content.map((c, i) => {
           const Component = COMPONENT_BY_LONG_FORM_TYPE[c.slug];
           if (Component) {
-            return <Component {...c} key={c.slug} />;
+            return <Component {...c} key={c.id || `${c.slug}-${i}`} />;
           }
           return null;
         })}

apps/charterafrica/src/components/LongFormMediaBlock/LongFormMediaBlock.js

@@ -0,0 +1,44 @@
+import { RichTypography } from "@commons-ui/core";
+import { Figure } from "@commons-ui/next";
+import React from "react";
+
+const LongFormMediaBlock = React.forwardRef(
+  function LongFormMediaBlock(props, ref) {
+    const { mediaBlockFields: { image, caption } = {}, sx } = props;
+
+    return (
+      <Figure
+        ImageProps={{
+          src: image.url,
+          alt: image.alt || caption,
+          // We're going to set img size directly using style https://nextjs.org/docs/api-reference/next/image#style
+          fill: false,
+          height: 0,
+          width: 0,
+          style: { width: "100%", height: "auto" },
+        }}
+        sx={{
+          my: 2,
+          ...sx,
+        }}
+        ref={ref}
+      >
+        <RichTypography
+          component="figcaption"
+          html={false}
+          variant="caption"
+          sx={{
+            mt: 1,
+            typography: {
+              md: "p2",
+            },
+          }}
+        >
+          {caption}
+        </RichTypography>
+      </Figure>
+    );
+  },
+);
+
+export default LongFormMediaBlock;

apps/charterafrica/src/components/LongFormMediaBlock/LongFormMediaBlock.snap.js

@@ -0,0 +1,27 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<LongFormMediaBlock /> renders unchanged 1`] = `
+<div>
+  <figure
+    class="MuiBox-root css-g1fxym"
+  >
+    <img
+      alt="Featured Post"
+      class="css-g98gbd"
+      data-nimg="1"
+      decoding="async"
+      height="0"
+      loading="lazy"
+      src="/_next/image?url=https%3A%2F%2Fcharterafrica.dev.codeforafrica.org%2Fmedia%2Fa20443263ce3904ad42cc5c7934e1040.jpeg&w=16&q=75"
+      srcset="/_next/image?url=https%3A%2F%2Fcharterafrica.dev.codeforafrica.org%2Fmedia%2Fa20443263ce3904ad42cc5c7934e1040.jpeg&w=16&q=75 1x"
+      style="color: transparent; width: 100%; height: auto;"
+      width="0"
+    />
+    <figcaption
+      class="MuiTypography-root MuiTypography-caption css-18iyh8o-MuiTypography-root"
+    >
+      Image caption.
+    </figcaption>
+  </figure>
+</div>
+`;

apps/charterafrica/src/components/LongFormMediaBlock/LongFormMediaBlock.test.js

@@ -0,0 +1,29 @@
+import { createRender } from "@commons-ui/testing-library";
+import React from "react";
+
+import LongFormMediaBlock from "./LongFormMediaBlock";
+
+import theme from "@/charterafrica/theme";
+
+// eslint-disable-next-line testing-library/render-result-naming-convention
+const render = createRender({ theme });
+
+const defaultProps = {
+  mediaBlockFields: {
+    image: {
+      id: "63e238816b52a21599ce6c70",
+      alt: "Featured Post",
+      url: "https://charterafrica.dev.codeforafrica.org/media/a20443263ce3904ad42cc5c7934e1040.jpeg",
+    },
+    caption: "Image caption.",
+  },
+  id: "63fc4ec5aca2d71a6679674f",
+  slug: "mediaBlock",
+};
+
+describe("<LongFormMediaBlock />", () => {
+  it("renders unchanged", () => {
+    const { container } = render(<LongFormMediaBlock {...defaultProps} />);
+    expect(container).toMatchSnapshot();
+  });
+});

apps/charterafrica/src/components/LongFormMediaBlock/index.js

@@ -0,0 +1,3 @@
+import LongFormMediaBlock from "./LongFormMediaBlock";
+
+export default LongFormMediaBlock;

apps/charterafrica/src/payload/blocks/MediaBlock.js

@@ -15,6 +15,13 @@ const MediaBlock = {
             mimeType: { contains: "image" },
           },
         },
+        {
+          name: "caption",
+          type: "text",
+          label: { en: "Caption", fr: "Légende", pt: "Legenda" },
+          required: false,
+          localized: true,
+        },
       ],
     }),
   ],