From 71df54364d6f3fbec88f1fea1c3265d182929274 Mon Sep 17 00:00:00 2001
From: Ruben Smit <rsmit@quintor.local>
Date: Wed, 14 Aug 2024 16:18:10 +0200
Subject: [PATCH 1/8] chore(blockquote): created storybook page

---
 .../storybook/src/community/blockquote.md     |  3 ++
 .../src/community/blockquote.stories.tsx      | 50 +++++++++++++++++++
 2 files changed, 53 insertions(+)
 create mode 100644 packages/storybook/src/community/blockquote.md
 create mode 100644 packages/storybook/src/community/blockquote.stories.tsx

diff --git a/packages/storybook/src/community/blockquote.md b/packages/storybook/src/community/blockquote.md
new file mode 100644
index 000000000..fc2f35513
--- /dev/null
+++ b/packages/storybook/src/community/blockquote.md
@@ -0,0 +1,3 @@
+<!-- @license CC0-1.0 -->
+
+# Rijkshuisstijl Community blockquote component
diff --git a/packages/storybook/src/community/blockquote.stories.tsx b/packages/storybook/src/community/blockquote.stories.tsx
new file mode 100644
index 000000000..3e80713b5
--- /dev/null
+++ b/packages/storybook/src/community/blockquote.stories.tsx
@@ -0,0 +1,50 @@
+/* @license CC0-1.0 */
+
+import { Meta, StoryObj } from '@storybook/react';
+import { Blockquote, Paragraph } from '@utrecht/component-library-react/dist/css-module';
+import readme from './blockquote.md?raw';
+
+const meta = {
+  title: 'React Component/Blockquote',
+  id: 'rijkshuisstijl-blockquote',
+  component: Blockquote,
+  argTypes: {
+    attribution: {
+      name: 'attribution',
+      type: { name: 'string', required: false },
+    },
+  },
+  args: {
+    children: (
+      <Paragraph>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
+        magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+        pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
+        laborum
+      </Paragraph>
+    ),
+  },
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component: readme,
+      },
+    },
+  },
+} as Meta<typeof Blockquote>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+export const Attribution: Story = {
+  name: 'Attribution',
+  args: {
+    children: 'hello, world',
+    attribution: <cite>The C Programming Language</cite>,
+  },
+};

From 4c1aec4586ae01b35047bcbfc0b0096a7c90e2aa Mon Sep 17 00:00:00 2001
From: Ruben Smit <rsmit@quintor.local>
Date: Thu, 15 Aug 2024 16:29:49 +0200
Subject: [PATCH 2/8] feat(blockquote): implemented component, styling,
 storybook and tests

---
 packages/components-css/blockquote/index.scss |  14 ++
 packages/components-css/index.scss            |   1 +
 .../components-react/src/Blockquote.test.tsx  | 125 ++++++++++++++++++
 packages/components-react/src/Blockquote.tsx  |  21 +++
 .../storybook/src/community/blockquote.md     |  11 ++
 .../src/community/blockquote.stories.tsx      |  18 +--
 packages/storybook/src/markdown.d.ts          |   4 +
 .../design-tokens/figma/figma.tokens.json     |   4 +
 .../design-tokens/token-transformer.mjs       |   1 -
 9 files changed, 185 insertions(+), 14 deletions(-)
 create mode 100644 packages/components-css/blockquote/index.scss
 create mode 100644 packages/components-react/src/Blockquote.test.tsx
 create mode 100644 packages/components-react/src/Blockquote.tsx
 create mode 100644 packages/storybook/src/markdown.d.ts

diff --git a/packages/components-css/blockquote/index.scss b/packages/components-css/blockquote/index.scss
new file mode 100644
index 000000000..b67c15b54
--- /dev/null
+++ b/packages/components-css/blockquote/index.scss
@@ -0,0 +1,14 @@
+@import "../node_modules/@utrecht/components/blockquote/src/";
+
+.utrecht-blockquote {
+  color: var(--utrecht-blockquote-content-color, inherit);
+  display: flex;
+  flex-direction: column;
+  font-family: var(--utrecht-blockquote-content-font-family, inherit);
+  font-size: var(--utrecht-blockquote-content-font-size, inherit);
+  gap: var(--utrecht-blockquote-row-gap);
+}
+
+.utrecht-blockquote__attribution {
+  font-family: var(--utrecht-blockquote-attribution-font-family, inherit);
+}
diff --git a/packages/components-css/index.scss b/packages/components-css/index.scss
index c8d5e94aa..01216d157 100644
--- a/packages/components-css/index.scss
+++ b/packages/components-css/index.scss
@@ -3,4 +3,5 @@
  * Copyright (c) 2021 Community for NL Design System
  */
 @import "accordion/index";
+@import "blockquote/index";
 @import "logo/index";
diff --git a/packages/components-react/src/Blockquote.test.tsx b/packages/components-react/src/Blockquote.test.tsx
new file mode 100644
index 000000000..f07b75d42
--- /dev/null
+++ b/packages/components-react/src/Blockquote.test.tsx
@@ -0,0 +1,125 @@
+import { render } from '@testing-library/react';
+import { createRef } from 'react';
+import { Blockquote } from './Blockquote';
+import '@testing-library/jest-dom';
+
+describe('Blockquote', () => {
+  it('renders an HTML blockquote element', () => {
+    const { container } = render(<Blockquote />);
+
+    const blockquote = container.querySelector('blockquote:only-child');
+
+    expect(blockquote).toBeInTheDocument();
+  });
+
+  it('renders a block element', () => {
+    const { container } = render(<Blockquote />);
+
+    const paragraph = container.querySelector(':only-child');
+
+    expect(paragraph).toHaveStyle({ display: 'block' });
+  });
+
+  it('renders a design system BEM class name: utrecht-blockquote', () => {
+    const { container } = render(<Blockquote />);
+
+    const paragraph = container.querySelector(':only-child');
+
+    expect(paragraph).toHaveClass('utrecht-blockquote');
+  });
+
+  it('renders rich text content', () => {
+    const { container } = render(
+      <Blockquote>
+        <code>Hello, world</code>
+      </Blockquote>,
+    );
+
+    const blockquote = container.querySelector(':only-child');
+
+    const richText = blockquote?.querySelector('code');
+
+    expect(richText).toBeInTheDocument();
+  });
+
+  // Make sure Blockquote isn't implemented as `<p>` element,
+  // because then it would be impossible to render `<p>` children.
+  it('can render multiple paragraph of rich text content', () => {
+    const { container } = render(
+      <Blockquote>
+        <p>Hello...</p>
+        <p>...world</p>
+      </Blockquote>,
+    );
+
+    const blockquote = container.querySelector(':only-child');
+
+    const richText = blockquote?.querySelector('p + p');
+
+    expect(richText).toBeInTheDocument();
+  });
+
+  it('can be hidden', () => {
+    const { container } = render(<Blockquote hidden />);
+
+    const blockquote = container.querySelector(':only-child');
+
+    expect(blockquote).not.toBeVisible();
+  });
+
+  it('can have a custom class name', () => {
+    const { container } = render(<Blockquote className="callout" />);
+
+    const blockquote = container.querySelector(':only-child');
+
+    expect(blockquote).toHaveClass('callout');
+  });
+
+  it('can have a additional class name', () => {
+    const { container } = render(<Blockquote className="callout" />);
+
+    const blockquote = container.querySelector(':only-child');
+
+    expect(blockquote).toHaveClass('callout');
+    expect(blockquote).toHaveClass('utrecht-blockquote');
+  });
+
+  describe('attribution', () => {
+    it('can contain rich text', () => {
+      const { container } = render(
+        <Blockquote attribution={<cite>The C Programming Language</cite>}>
+          <p>Hello, world</p>
+        </Blockquote>,
+      );
+
+      const richText = container.querySelector('cite');
+
+      expect(richText).toBeInTheDocument();
+    });
+
+    it('follows the the content in document order', () => {
+      const { container } = render(
+        <Blockquote attribution={<cite>The C Programming Language</cite>}>
+          <p>Hello, world</p>
+        </Blockquote>,
+      );
+
+      const attribution = container.querySelector('cite');
+      const content = container.querySelector('p');
+
+      if (attribution && content) {
+        expect(attribution.compareDocumentPosition(content)).toBe(2);
+      }
+    });
+  });
+
+  it('supports ForwardRef in React', () => {
+    const ref = createRef<HTMLQuoteElement>();
+
+    const { container } = render(<Blockquote ref={ref} />);
+
+    const blockquote = container.querySelector(':only-child');
+
+    expect(ref.current).toBe(blockquote);
+  });
+});
diff --git a/packages/components-react/src/Blockquote.tsx b/packages/components-react/src/Blockquote.tsx
new file mode 100644
index 000000000..c808ec94a
--- /dev/null
+++ b/packages/components-react/src/Blockquote.tsx
@@ -0,0 +1,21 @@
+import {
+  Blockquote as UtrechtBlockquote,
+  BlockquoteProps as UtrechtBlockquoteProps,
+} from '@utrecht/component-library-react';
+import { ForwardedRef, forwardRef, PropsWithChildren } from 'react';
+import '@rijkshuisstijl-community/components-css/index.scss';
+
+export type { UtrechtBlockquoteProps as BlockquoteProps };
+
+export const Blockquote = forwardRef(
+  (
+    { children, attribution, ...restProps }: PropsWithChildren<UtrechtBlockquoteProps>,
+    ref: ForwardedRef<HTMLQuoteElement>,
+  ) => (
+    <UtrechtBlockquote {...restProps} ref={ref} attribution={attribution}>
+      <div className="utrecht-blockquote__content">{children}</div>
+    </UtrechtBlockquote>
+  ),
+);
+
+Blockquote.displayName = 'Blockquote';
diff --git a/packages/storybook/src/community/blockquote.md b/packages/storybook/src/community/blockquote.md
index fc2f35513..178ac8e14 100644
--- a/packages/storybook/src/community/blockquote.md
+++ b/packages/storybook/src/community/blockquote.md
@@ -1,3 +1,14 @@
 <!-- @license CC0-1.0 -->
 
 # Rijkshuisstijl Community blockquote component
+
+Quotes worden gebruikt om uitspraken te accentueren. De quote bestaat uit een uitspraak en een bronvermelding.
+
+## Terminologie
+
+- **blockquote**: van het [HTML element `<blockquote>`](https://html.spec.whatwg.org/multipage/grouping-content.html#the-blockquote-element). MDN noemt het ["Block Quotation element"](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote), misschien zou dat nog wel beter zijn dan "Blockquote".
+- **attribution**: verwijzing naar de bron van het citaat. Experimentele naam.
+
+## Relevante WCAG eisen
+
+- [WCAG eis 3.1.2](https://www.w3.org/TR/WCAG21/#language-of-parts): wanneer het citaat in een andere taal is geschreven dan de pagina, dan moet het `lang` attribuut gebruikt worden om de taal duidelijk te maken.
diff --git a/packages/storybook/src/community/blockquote.stories.tsx b/packages/storybook/src/community/blockquote.stories.tsx
index 3e80713b5..ca7df8972 100644
--- a/packages/storybook/src/community/blockquote.stories.tsx
+++ b/packages/storybook/src/community/blockquote.stories.tsx
@@ -1,11 +1,11 @@
 /* @license CC0-1.0 */
 
+import { Blockquote } from '@rijkshuisstijl-community/components-react';
 import { Meta, StoryObj } from '@storybook/react';
-import { Blockquote, Paragraph } from '@utrecht/component-library-react/dist/css-module';
 import readme from './blockquote.md?raw';
 
 const meta = {
-  title: 'React Component/Blockquote',
+  title: 'Rijkshuisstijl/Blockquote',
   id: 'rijkshuisstijl-blockquote',
   component: Blockquote,
   argTypes: {
@@ -15,15 +15,7 @@ const meta = {
     },
   },
   args: {
-    children: (
-      <Paragraph>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
-        magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
-        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
-        pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
-        laborum
-      </Paragraph>
-    ),
+    children: 'Lorem ipsum dolor sit amet, consectetur ad * isicing elit, sed do eiusmod *',
   },
   tags: ['autodocs'],
   parameters: {
@@ -44,7 +36,7 @@ export const Default: Story = {};
 export const Attribution: Story = {
   name: 'Attribution',
   args: {
-    children: 'hello, world',
-    attribution: <cite>The C Programming Language</cite>,
+    children: '"Ik heb het nog nooit gedaan dus ik denk dat ik het wel kan"',
+    attribution: '— Pippi Langkous',
   },
 };
diff --git a/packages/storybook/src/markdown.d.ts b/packages/storybook/src/markdown.d.ts
new file mode 100644
index 000000000..9dbabb504
--- /dev/null
+++ b/packages/storybook/src/markdown.d.ts
@@ -0,0 +1,4 @@
+declare module '*.md?raw' {
+  const content: string;
+  export default content;
+}
diff --git a/proprietary/design-tokens/figma/figma.tokens.json b/proprietary/design-tokens/figma/figma.tokens.json
index 31d10a6d8..760685caf 100644
--- a/proprietary/design-tokens/figma/figma.tokens.json
+++ b/proprietary/design-tokens/figma/figma.tokens.json
@@ -1763,6 +1763,10 @@
           "value": "{rhc.space.0}",
           "type": "spacing"
         },
+        "row-gap": {
+          "value": "{rhc.space.150}",
+          "type": "spacing"
+        },
         "background-color": {
           "value": "transparent",
           "type": "color"
diff --git a/proprietary/design-tokens/token-transformer.mjs b/proprietary/design-tokens/token-transformer.mjs
index 0d67fe986..20327e57f 100644
--- a/proprietary/design-tokens/token-transformer.mjs
+++ b/proprietary/design-tokens/token-transformer.mjs
@@ -14,7 +14,6 @@ const init = async ({ input, output }) => {
     'components/alert',
     'components/avatar',
     'components/backdrop',
-    'components/blockquote',
     'components/breadcrumb',
     'components/button-group',
     'components/checkbox',

From 9809e6fa61842015928514a612a89f19bac3f0d2 Mon Sep 17 00:00:00 2001
From: Ruben Smit <rsmit@quintor.local>
Date: Thu, 15 Aug 2024 16:30:45 +0200
Subject: [PATCH 3/8] feat(accordion): updated accordion documentation

---
 packages/storybook/src/community/accordion.md | 50 +++++++++++++++++++
 .../src/community/accordion.stories.tsx       |  2 +-
 2 files changed, 51 insertions(+), 1 deletion(-)

diff --git a/packages/storybook/src/community/accordion.md b/packages/storybook/src/community/accordion.md
index aac3a530e..11c4d2b2c 100644
--- a/packages/storybook/src/community/accordion.md
+++ b/packages/storybook/src/community/accordion.md
@@ -1,3 +1,53 @@
 <!-- @license CC0-1.0 -->
 
 # Rijkshuisstijl Community accordion component
+
+Je kunt een accordion gebruiken lange pagina's korter te maken zodat de gebruiker niet lang moet scrollen om de relevante informatie te vinden.
+
+De inhoud verbergen heeft als nadeel dat "zoeken in pagina" geen resultaten oplevert de inhoud die verborgen is. Als je weet op welke zoekterm de gebruiker heeft gezocht om op de pagina met accordion te komen, dan kun je de sections die de zoekterm bevatten automatisch _expanded_ maken.
+
+## Tekst
+
+Het is belangrijk duidelijke koppen te hebben, omdat de gebruiker niet de verborgen inhoud kan "scannen" om relevante informatie te vinden.
+
+## HTML
+
+Gebruik een `<button>` element waarmee je de inhoud van de section kunt weergeven en verbergen. Gebruik altijd het `aria-expanded` attribuut zodat duidelijk wat het effect is van de button activeren. Gebruik `aria-expanded="true"` wanneer de inhoud beschikbaar is, gebruik `aria-expanded="false"` wanneer de inhoud verborgen is.
+
+Plaats de button in de heading, zodat gebruikers die via een overzicht van headings door de pagina navigeren de informatie makkelijk kunnen vinden.
+
+Plaats de inhoud van de _expandable region_ in een `<section>` element, zodat gebruikers die via een overzicht van _landmarks_ door de pagina navigeren de informatie makkelijk kunnen vinden (het `section` element maakt een `region` landmark). Gebruik `aria-labelledby` om de `section` te koppelen aan de heading, omdat het is belangrijk dat de landmark een duidelijk label heeft. Zonder label is de _landmark navigation_ onduidelijk omdat er meerdere regions zijn zonder naam, waarvan niet duidelijk is wat de inhoud is.
+
+Zelfs de inhoud van een verborgen _expandable region_ moet in de HTML-code staan, wanneer je _server-side rendering_ gebruikt zodat zoekmachines dan toch toegang hebben tot de volledige inhoud. De inhoud van een verborgen _expandable region_ kan met CSS onzichtbaar gemaakt worden.
+
+Wanneer je accordion heel veel onderdelen heeft, dan kunnen gebruikers van _landmark navigation_ moeilijker andere landmarks in de pagina vinden. Om bij de `contentinfo` landmark te komen (de page footer), moet de gebruiker eerst alle accordion onderdelen overslaan. Gebruik voor een accordion met heel veel onderdelen een `<div>` of `<section role="presentation">` element in plaats van het `<section>` element zodat het geen landmark wordt. Gebruikers kunnen de informatie dan nog wel vinden via _heading navigation_.
+
+### Zo moet het niet
+
+Verwijder het `aria-expanded` attribuut niet, want `aria-expanded="false"` is niet hetzelfde als geen `aria-expanded` attribuut hebben. "_Boolean attributes_" van ARIA werken niet hetzelfde als _boolean attributes_ van HTML. ([Boolean attributes in HTML and ARIA: what's the difference? — Hidde de Vries](https://hidde.blog/boolean-attributes-in-html-and-aria-whats-the-difference/)).
+
+Plaats niet de heading in de button in plaats van andersom, omdat de heading dan niet toegankelijk is voor hulpmiddelen die een overzicht maken van alle headings op een pagina.
+
+Wacht niet met het plaatsen van de inhoud van de _expandable region_ tot de gebruiker de button activeert, want zoekmachines gebruiken alleen de initiële inhoud van de pagina zonder op buttons te gebruiken.
+
+## Visueel ontwerp
+
+De icoon plaatsen vóór de heading is meest duidelijk. Als het icoon voor _expanded_ of _not expanded_ uitgelijnd is aan het eind van de regel, dan is het minder duidelijk dat de heading een button is die voor inklappen en uitklappen zorgt. Sommige gebruikers met een beperkt gezichtsveld kunnen het icoon bijvoorbeeld niet zien wanneer ze naar naar de heading kijken, als er grote afstand zit tussen de heading en het icoon.
+
+## Relevante WCAG eisen
+
+De WCAG eisen voor de button component en de heading component gelden ook voor de accordion header.
+
+Let extra op voor deze onderdelen:
+
+- [WCAG eis 1.3.1](https://www.w3.org/TR/WCAG21/#info-and-relationships): de _heading level_ van de accordion sections is afhankelijk van waar in de pagina de accordion is geplaatst, dit kan per pagina verschillen.
+- [WCAG eis 1.3.6](https://www.w3.org/TR/WCAG21/#identify-purpose): gebruik `aria-controls` voor de button, en gebruik een `region` landmark voor de _expandable region_ (gebruik daarvoor het HTML-element `<section>`)
+- [WCAG eis 1.4.3](https://www.w3.org/TR/WCAG21/#contrast-minimum): contrast tussen tekst en achtergrond en tussen icoon en achtergrond is voldoende in alle varianten, alle interactieve statussen en alle mogelijke combinaties.
+- [WCAG eis 3.2.1](https://www.w3.org/TR/WCAG21/#on-focus): maak de accordion niet automatisch _expanded_ als de button focus krijgt.
+- [WCAG eis 2.1.3](https://www.w3.org/TR/WCAG21/#keyboard-no-exception): ondersteun ook de optionele toetsen: `Down Arrow`, `Up Arrow`, `Home` en `End`. `Space` moet de button activeren, niet de pagina scrollen (gebruik `keypressEvt.preventDefault()`).
+- [WCAG eis 2.4.6](https://www.w3.org/TR/WCAG21/#headings-and-labels): de tekst die zowel wordt gebruikt als heading en als label voor de button moet duidelijk zijn, omdat de inhoud niet altijd zichtbaar is.
+- [WCAG eis 2.4.10](https://www.w3.org/TR/WCAG21/#section-headings): accordions die onderdeel vormen van de lopende tekst moeten section headings gebruiken.
+
+## Relevante info
+
+- [Accordion (Sections With Show/Hide Functionality) - W3C ARIA Authoring Practices Guide](https://www.w3.org/WAI/ARIA/apg/patterns/accordion/)
diff --git a/packages/storybook/src/community/accordion.stories.tsx b/packages/storybook/src/community/accordion.stories.tsx
index a7467e39e..dcb09031d 100644
--- a/packages/storybook/src/community/accordion.stories.tsx
+++ b/packages/storybook/src/community/accordion.stories.tsx
@@ -20,7 +20,7 @@ const AccordionStory = ({ expanded, label, body, appearance, icon, sections }: A
 
 const meta = {
   title: 'Rijkshuisstijl/Accordion',
-  id: 'react-accordion',
+  id: 'rijkshuisstijl-accordion',
   args: {
     label: '',
     body: '',

From 473c4e57a61da0cc4e71ceb71b8b103515e6fd49 Mon Sep 17 00:00:00 2001
From: Ruben Smit <rsmit@quintor.local>
Date: Thu, 15 Aug 2024 17:39:58 +0200
Subject: [PATCH 4/8] feat(rhc-templates): removed borders from blockquotes

---
 apps/rhc-templates/src/app/collage/page.tsx | 4 +---
 apps/rhc-templates/src/app/page/page.tsx    | 8 +++-----
 packages/storybook/package.json             | 1 -
 3 files changed, 4 insertions(+), 9 deletions(-)

diff --git a/apps/rhc-templates/src/app/collage/page.tsx b/apps/rhc-templates/src/app/collage/page.tsx
index 50f49434d..81cbaaa9a 100644
--- a/apps/rhc-templates/src/app/collage/page.tsx
+++ b/apps/rhc-templates/src/app/collage/page.tsx
@@ -120,9 +120,7 @@ export default function Collage() {
           In het NL Design System verzamelen we principes, handvatten, elementen, patronen en richtlijnen.
         </Paragraph>
       </div>
-      <div className="unstarted">
-        <Blockquote attribution="Pippi Langkous">Ik heb het nog nooit gedaan dus ik denk dat ik het wel kan</Blockquote>
-      </div>
+      <Blockquote attribution="Pippi Langkous">Ik heb het nog nooit gedaan dus ik denk dat ik het wel kan</Blockquote>
       <div className="unstarted">
         <Separator></Separator>
       </div>
diff --git a/apps/rhc-templates/src/app/page/page.tsx b/apps/rhc-templates/src/app/page/page.tsx
index 70e1b1b4e..3b896161c 100644
--- a/apps/rhc-templates/src/app/page/page.tsx
+++ b/apps/rhc-templates/src/app/page/page.tsx
@@ -179,11 +179,9 @@ export default function Page() {
             </span>
           </Paragraph>
         </div>
-        <div className="unstarted">
-          <Blockquote attribution="Label">
-            Lorem ipsum dolor sit amet, consectetur ad * isicing elit, sed do eiusmod *
-          </Blockquote>
-        </div>
+        <Blockquote attribution="Label">
+          Lorem ipsum dolor sit amet, consectetur ad * isicing elit, sed do eiusmod *
+        </Blockquote>
         <div className="unstarted">
           <Heading level={5}>Dit is een H5</Heading>
         </div>
diff --git a/packages/storybook/package.json b/packages/storybook/package.json
index 86ba645a6..a054818e4 100644
--- a/packages/storybook/package.json
+++ b/packages/storybook/package.json
@@ -36,7 +36,6 @@
     "@rijkshuisstijl-community/rivm-design-tokens": "workspace:*",
     "@rijkshuisstijl-community/web-components-stencil": "workspace:*",
     "@rijkshuisstijl-community/web-components-react": "workspace:*",
-    "@rijkshuisstijl-community/components-react": "workspace:*",
     "@storybook/addon-a11y": "8.2.4",
     "@storybook/addon-actions": "8.2.4",
     "@storybook/addon-docs": "8.2.4",

From a57e7bc1a74ca82e5ae912a4b12d51148a792598 Mon Sep 17 00:00:00 2001
From: Ruben Smit <rsmit@quintor.local>
Date: Fri, 16 Aug 2024 14:32:01 +0200
Subject: [PATCH 5/8] feat(blockquote): explicit attribution color

---
 packages/components-css/blockquote/index.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/components-css/blockquote/index.scss b/packages/components-css/blockquote/index.scss
index b67c15b54..35aeeb036 100644
--- a/packages/components-css/blockquote/index.scss
+++ b/packages/components-css/blockquote/index.scss
@@ -10,5 +10,6 @@
 }
 
 .utrecht-blockquote__attribution {
+  color: var(--utrecht-blockquote-attribution-color, inherit);
   font-family: var(--utrecht-blockquote-attribution-font-family, inherit);
 }

From 18ce88aca414ace01b515b99694247f1595222f3 Mon Sep 17 00:00:00 2001
From: Ruben Smit <rsmit@quintor.local>
Date: Fri, 16 Aug 2024 14:48:47 +0200
Subject: [PATCH 6/8] feat(rhc-templates): replaced blockquote imports with
 finished version

---
 apps/rhc-templates/src/app/collage/page.tsx | 5 ++---
 apps/rhc-templates/src/app/page/page.tsx    | 3 +--
 2 files changed, 3 insertions(+), 5 deletions(-)

diff --git a/apps/rhc-templates/src/app/collage/page.tsx b/apps/rhc-templates/src/app/collage/page.tsx
index 81cbaaa9a..fdb8aece3 100644
--- a/apps/rhc-templates/src/app/collage/page.tsx
+++ b/apps/rhc-templates/src/app/collage/page.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { AccordionProvider } from '@rijkshuisstijl-community/components-react';
+import { AccordionProvider, Blockquote } from '@rijkshuisstijl-community/components-react';
 import { Avatar, Pagination } from '@amsterdam/design-system-react';
 import {
   IconAlertTriangle,
@@ -13,7 +13,6 @@ import {
 import {
   Alert,
   BadgeCounter,
-  Blockquote,
   BreadcrumbNav,
   BreadcrumbNavLink,
   Button,
@@ -120,7 +119,7 @@ export default function Collage() {
           In het NL Design System verzamelen we principes, handvatten, elementen, patronen en richtlijnen.
         </Paragraph>
       </div>
-      <Blockquote attribution="Pippi Langkous">Ik heb het nog nooit gedaan dus ik denk dat ik het wel kan</Blockquote>
+      <Blockquote attribution="— Pippi Langkous">Ik heb het nog nooit gedaan dus ik denk dat ik het wel kan</Blockquote>
       <div className="unstarted">
         <Separator></Separator>
       </div>
diff --git a/apps/rhc-templates/src/app/page/page.tsx b/apps/rhc-templates/src/app/page/page.tsx
index 3b896161c..408ebb2e9 100644
--- a/apps/rhc-templates/src/app/page/page.tsx
+++ b/apps/rhc-templates/src/app/page/page.tsx
@@ -1,7 +1,6 @@
 'use client';
 
 import {
-  Blockquote,
   Button,
   ButtonLink,
   Heading,
@@ -32,7 +31,7 @@ import {
   Figure,
   FigureCaption,
 } from '@utrecht/component-library-react/dist/css-module';
-import { ActionGroup, Logo } from '@rijkshuisstijl-community/components-react';
+import { ActionGroup, Blockquote, Logo } from '@rijkshuisstijl-community/components-react';
 import { HeadingGroup } from '@utrecht/component-library-react';
 
 export default function Page() {

From 068258cb512bfd3ebd0ee47da98998b218850c79 Mon Sep 17 00:00:00 2001
From: Ruben Smit <rsmit@quintor.local>
Date: Fri, 16 Aug 2024 14:49:42 +0200
Subject: [PATCH 7/8] chore(figma-tokens): fixed utrecht document font size and
 color

---
 proprietary/design-tokens/figma/figma.tokens.json | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/proprietary/design-tokens/figma/figma.tokens.json b/proprietary/design-tokens/figma/figma.tokens.json
index 760685caf..c302efa60 100644
--- a/proprietary/design-tokens/figma/figma.tokens.json
+++ b/proprietary/design-tokens/figma/figma.tokens.json
@@ -810,7 +810,7 @@
         "type": "other"
       },
       "font-size": {
-        "value": "{rhc.font-size.md}",
+        "value": "{rhc.font-size.paragraph.default}",
         "type": "other"
       },
       "line-height": {
@@ -1012,7 +1012,7 @@
         "type": "other"
       },
       "color": {
-        "value": "{rhc.color.zwart}",
+        "value": "{rhc.color.lintblauw.500}",
         "type": "other"
       }
     }

From 78ff689b39c071abaf47a95b661e4a2633d5467e Mon Sep 17 00:00:00 2001
From: Ruben Smit <rsmit@quintor.local>
Date: Mon, 19 Aug 2024 12:30:03 +0200
Subject: [PATCH 8/8] chore(blockquote): explicitly set row-gap instead of gap

---
 packages/components-css/blockquote/index.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/components-css/blockquote/index.scss b/packages/components-css/blockquote/index.scss
index 35aeeb036..67815f7c8 100644
--- a/packages/components-css/blockquote/index.scss
+++ b/packages/components-css/blockquote/index.scss
@@ -6,7 +6,7 @@
   flex-direction: column;
   font-family: var(--utrecht-blockquote-content-font-family, inherit);
   font-size: var(--utrecht-blockquote-content-font-size, inherit);
-  gap: var(--utrecht-blockquote-row-gap);
+  row-gap: var(--utrecht-blockquote-row-gap);
 }
 
 .utrecht-blockquote__attribution {