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

@@ -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);
+}

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>`];