From a52d9066c297c79bac4f74849af13516cb920855 Mon Sep 17 00:00:00 2001
From: Benny Powers <web@bennypowers.com>
Date: Thu, 24 Jun 2021 10:11:50 +0300
Subject: [PATCH] docs(web-components): kitchen sink dynamic source example

---
 .../addons/docs/dynamic-source.stories.mdx    | 41 +++++++++++++++++++
 1 file changed, 41 insertions(+)
 create mode 100644 examples/web-components-kitchen-sink/src/stories/addons/docs/dynamic-source.stories.mdx

diff --git a/examples/web-components-kitchen-sink/src/stories/addons/docs/dynamic-source.stories.mdx b/examples/web-components-kitchen-sink/src/stories/addons/docs/dynamic-source.stories.mdx
new file mode 100644
index 000000000000..6fdc095924b7
--- /dev/null
+++ b/examples/web-components-kitchen-sink/src/stories/addons/docs/dynamic-source.stories.mdx
@@ -0,0 +1,41 @@
+import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs';
+
+<Meta
+  title="Addons / Docs / Dynamic Source"
+  component="sb-button"
+  argTypes={{
+    size: { type: 'select', options: ['large', 'small'] },
+    label: { type: 'string' },
+    primary: { type: 'boolean' },
+    backgroundColor: { type: 'color', presetColors: ['white', 'transparent', 'blue'] },
+  }}
+/>
+
+# Dynamic Source
+
+Stories can use Dynamic Source to display the result of changes to controls.
+
+<Canvas withSource="open">
+  <Story
+    name="Button"
+    component="sb-button"
+    args={{
+      size: 'large',
+      label: 'Button',
+      primary: false,
+      backgroundColor: undefined,
+    }}
+  >
+    {(args) => html`
+      <sb-button
+        ?primary="${args.primary}"
+        .size="${args.size}"
+        .label="${args.label}"
+        .backgroundColor="${args.backgroundColor}"
+      >
+      </sb-button>
+    `}
+  </Story>
+</Canvas>
+
+<ArgsTable story="Button" />