diff --git a/.changeset/rare-numbers-explode.md b/.changeset/rare-numbers-explode.md new file mode 100644 index 00000000000..9e101f3b46c --- /dev/null +++ b/.changeset/rare-numbers-explode.md @@ -0,0 +1,5 @@ +--- +"@utrecht/component-library-pdf": minor +--- + +Add Column Layout to the PDF component library. diff --git a/components/column-layout/docs/technology-pdf.nl.md b/components/column-layout/docs/technology-pdf.nl.md new file mode 100644 index 00000000000..de0122eed9c --- /dev/null +++ b/components/column-layout/docs/technology-pdf.nl.md @@ -0,0 +1,5 @@ + + +# 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 `
` tag hebben. De tekst binnen de `
` moet een logische leesvolgorde hebben.
diff --git a/packages/component-library-pdf/src/ColumnLayout.test.tsx b/packages/component-library-pdf/src/ColumnLayout.test.tsx
new file mode 100644
index 00000000000..2d27933ceec
--- /dev/null
+++ b/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: () => (
+
` 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: () => (
+