feat: include distanced option in Storybook

nl-design-system · Jun 14, 2021 · 1263bbf · 1263bbf
1 parent 2566ae9
commit 1263bbf
Showing 1 changed file with 8 additions and 2 deletions.
diff --git a/components/blockquote/stories.mdx b/components/blockquote/stories.mdx
@@ -4,6 +4,7 @@ Copyright (c) 2021 Robbert Broersma
 -->
 
 import { Meta, Story, Canvas, ArgsTable } from "@storybook/addon-docs/blocks";
+import clsx from "clsx";
 
 <!-- Import component and component styles -->
 
@@ -13,8 +14,8 @@ import "./index.css";
 
 import README from "./README.md";
 
-export const Template = ({ content, attribution }) =>
-  `<blockquote class="utrecht-blockquote">
+export const Template = ({ content, attribution, distanced }) =>
+  `<blockquote class="${clsx("utrecht-blockquote", { "utrecht-blockquote--distanced": distanced })}">
     <div class="utrecht-blockquote__content">
       <p>${content}</p>${
     attribution
@@ -38,6 +39,11 @@ export const Template = ({ content, attribution }) =>
       control: "text",
       defaultValue: "",
     },
+    distanced: {
+      description: "Distance the element from adjacent content",
+      control: "boolean",
+      defaultValue: true,
+    },
   }}
   parameters={{
     docs: {