From 8b48e02065bd0ecf37fe561eb006894f090b29c4 Mon Sep 17 00:00:00 2001
From: Robbert Broersma <mail@robbertbroersma.nl>
Date: Sun, 27 Jun 2021 15:47:35 +0200
Subject: [PATCH] feat: use document component as wrapper for all stories

Inline components such as Link and Form Label don't declare a font-family,
usually only block level components do so. This changes fixes the font rendering
for all inline components that don't declare a custom font family.
---
 components/document/bem.css              | 12 ++++++++++++
 packages/storybook/.storybook/preview.js |  5 +++++
 2 files changed, 17 insertions(+)
 create mode 100644 components/document/bem.css

diff --git a/components/document/bem.css b/components/document/bem.css
new file mode 100644
index 00000000000..2f11b3f40d3
--- /dev/null
+++ b/components/document/bem.css
@@ -0,0 +1,12 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Robbert Broersma
+ */
+
+.utrecht-document {
+  background-color: var(--utrecht-document-background-color, inherit);
+  color: var(--utrecht-document-color, inherit);
+  font-family: var(--utrecht-document-font-family, inherit);
+  font-size: var(--utrecht-document-font-size, inherit);
+  line-height: var(--utrecht-document-line-height, inherit);
+}
diff --git a/packages/storybook/.storybook/preview.js b/packages/storybook/.storybook/preview.js
index 88cc610a6f6..3ce6919f56a 100644
--- a/packages/storybook/.storybook/preview.js
+++ b/packages/storybook/.storybook/preview.js
@@ -1,5 +1,8 @@
 import '@utrecht/design-tokens/dist/index.css';
 import '@utrecht/design-tokens/dist/custom.css';
+import '../../../components/document/bem.css';
+
+import React from 'react';
 
 const tokenContext = require.context('!!raw-loader!../src', true, /.\.(css|less|scss|svg)$/);
 
@@ -48,3 +51,5 @@ export const parameters = {
     },
   },
 };
+
+export const decorators = [(story) => `<div class="utrecht-document">${story()}</div>`];