feat: add Column Layout to PDF component library

.changeset/rare-numbers-explode.md

@@ -0,0 +1,5 @@
+---
+"@utrecht/component-library-pdf": minor
+---
+
+Add Column Layout to the PDF component library.

components/column-layout/docs/technology-pdf.nl.md

@@ -0,0 +1,5 @@
+<!-- @license CC0-1.0 -->
+
+# PDF
+
+De inhoud van een Column Layout in PDF moet doorlopen, net als wanneer er geen kolommen zouden zijn. Een alinea tekst die over meerdere kolommen verdeeld is, moet 1 `<P>` tag hebben. De tekst binnen de `<P>` moet een logische leesvolgorde hebben.

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

@@ -0,0 +1,54 @@
+/* eslint-env jest */
+
+import { beforeAll, describe, expect, it } from '@jest/globals';
+import { ColumnLayout, Paragraph } from '@utrecht/component-library-react/src/index';
+import React from 'react';
+import { renderPdf } from './lib';
+
+describe('Column Layout', () => {
+  describe('with one paragraph spanning multiple columns and multiple pages', () => {
+    describe('default configuration', () => {
+      let sha256: string;
+
+      beforeAll(async () => {
+        ({ sha256 } = await renderPdf({
+          id: 'pdf-column-layout',
+          render: () => (
+            <ColumnLayout>
+              <Paragraph>{'The quick brown fox jumps over the lazy dog. '.repeat(100)}</Paragraph>
+            </ColumnLayout>
+          ),
+        }));
+      });
+
+      it('the file must contain one `<P>` tag, containing all text spanning multiple columns', async () => {
+        expect(sha256).toBe('c3e93b12aaf33634b4951c337efc4e802640e156961d69edd2875f929efa68cc');
+      });
+
+      it('renders 2 columns', async () => {
+        expect(sha256).toBe('c3e93b12aaf33634b4951c337efc4e802640e156961d69edd2875f929efa68cc');
+      });
+    });
+
+    describe('configured for 3 columns in print', () => {
+      it('renders 3 columns', async () => {
+        const { sha256 } = await renderPdf({
+          id: 'pdf-column-layout-column-count-3',
+          render: () => (
+            <ColumnLayout
+              style={
+                {
+                  '--utrecht-column-layout-print-column-count': 3,
+                } as any
+              }
+            >
+              <Paragraph>{'The quick brown fox jumps over the lazy dog. '.repeat(100)}</Paragraph>
+            </ColumnLayout>
+          ),
+        });
+
+        expect(sha256).toBe('70e639763a526bca6a335629ace1d4e1c70ed2cb58be618456448be6cc4d7b7a');
+      });
+    });
+  });
+});

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

@@ -0,0 +1,53 @@
+/* @license CC0-1.0 */
+
+import { Meta, StoryObj } from '@storybook/react';
+import readme from '@utrecht/column-layout-css/README.md?raw';
+import pdfDocs from '@utrecht/column-layout-css/docs/technology-pdf.nl.md?raw';
+import { ColumnLayout } from '@utrecht/component-library-react';
+import { mergeMarkdown } from '@utrecht/storybook-helpers/src/markdown';
+import React from 'react';
+import { PdfPreview } from './PdfPreview';
+
+const meta = {
+  title: 'PDF Component/Column Layout',
+  id: 'pdf-column-layout',
+  component: ColumnLayout,
+  argTypes: {
+    children: {
+      description: 'Content of the columns.',
+      control: 'text',
+    },
+  },
+  args: {
+    children: [],
+  },
+  parameters: {
+    bugs: 'https://github.com/nl-design-system/utrecht/issues?q=is%3Aissue+is%3Aopen+label%3Acomponent%2Fcolumn-layout',
+    status: {
+      type: 'WORK IN PROGRESS',
+    },
+    docs: {
+      description: {
+        component: mergeMarkdown([readme, pdfDocs]),
+      },
+    },
+  },
+  render: () => <PdfPreview component="Column Layout" src="pdf-column-layout-1.png" download="pdf-column-layout.pdf" />,
+} satisfies Meta<typeof ColumnLayout>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+export const ThreeColumns: Story = {
+  name: '3 columns',
+  render: () => (
+    <PdfPreview
+      component="Column Layout"
+      src="pdf-column-layout-column-count-3-1.png"
+      download="pdf-column-layout-column-count-3.pdf"
+    />
+  ),
+};