feat: add Image to component-library-pdf

components/img/docs/technology-pdf.nl.md

@@ -0,0 +1,10 @@
+<!-- @license CC0-1.0 -->
+
+# PDF
+
+Image moet opgebouwd worden met de `<Figure>` tag, met een tekst-alternatief in de `Alt` property.
+
+```text
+<Figure Alt="logo gemeente Utrecht"> {
+}
+```

packages/component-library-pdf/src/Image.test.tsx

@@ -0,0 +1,43 @@
+/* eslint-env jest */
+
+import { beforeAll, describe, expect, it } from '@jest/globals';
+import { Image } from '@utrecht/component-library-react/src/index';
+import { readFile } from 'fs/promises';
+import React from 'react';
+import { renderPdf } from './lib';
+
+describe('Image', () => {
+  let dataURL = '';
+
+  beforeAll(async () => {
+    const file = await readFile('./src/image.png');
+    dataURL = `data:image/png;base64,${file.toString('base64')}`;
+  });
+
+  it('renders a <Figure> tag', async () => {
+    const { sha256 } = await renderPdf({
+      id: 'pdf-image',
+      render: () => <Image src={dataURL} alt="" />,
+    });
+
+    expect(sha256).toBe('TODO');
+  });
+
+  it('renders a text alternative for `<img alt="Colorful gradients">`', async () => {
+    const { sha256 } = await renderPdf({
+      id: 'pdf-image-alt',
+      render: () => <Image src={dataURL} alt="Colorful gradients" />,
+    });
+
+    expect(sha256).toBe('TODO');
+  });
+
+  it('renders a visible text alternative for `<img alt="Text alternative">`', async () => {
+    const { sha256 } = await renderPdf({
+      id: 'pdf-image-actual-text',
+      render: () => <Image src="about:blank" alt="Text alternative for an image that is unavailable" />,
+    });
+
+    expect(sha256).toBe('TODO');
+  });
+});

packages/storybook-pdf/package.json

@@ -49,6 +49,7 @@
     "@utrecht/heading-4-css": "workspace:*",
     "@utrecht/heading-5-css": "workspace:*",
     "@utrecht/heading-6-css": "workspace:*",
+    "@utrecht/img-css": "workspace:*",
     "@utrecht/link-css": "workspace:*",
     "@utrecht/ordered-list-css": "workspace:*",
     "@utrecht/page-css": "workspace:*",

packages/storybook-pdf/src/Image.stories.tsx

@@ -0,0 +1,40 @@
+/* @license CC0-1.0 */
+
+import { Meta, StoryObj } from '@storybook/react';
+import { Image } from '@utrecht/component-library-react/src/Image';
+import readme from '@utrecht/img-css/README.md?raw';
+import pdfDocs from '@utrecht/img-css/docs/technology-pdf.nl.md?raw';
+import { mergeMarkdown } from '@utrecht/storybook-helpers/src/markdown';
+import React from 'react';
+import { PdfPreview } from './PdfPreview';
+
+const meta = {
+  title: 'PDF Component/Image',
+  id: 'pdf-image',
+  component: Image,
+  argTypes: {},
+  args: {},
+  parameters: {
+    bugs: 'https://github.com/nl-design-system/utrecht/issues?q=is%3Aissue+is%3Aopen+label%3Acomponent%2Fimage',
+    nldesignsystem: 'https://nldesignsystem.nl/image',
+    status: {
+      type: 'ALPHA',
+    },
+    docs: {
+      description: {
+        component: mergeMarkdown([readme, pdfDocs]),
+      },
+    },
+  },
+  render: () => <PdfPreview component="Link" src="pdf-image-alt-1.png" download="pdf-image-alt.pdf" />,
+} satisfies Meta<typeof Image>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+export const ImageNotFound: Story = {
+  render: () => <PdfPreview component="Link" src="pdf-image-actual-text-1.png" download="pdf-image-actual-text.pdf" />,
+};