From 7040c8c6a680741197c4e50391e4ac23a0704078 Mon Sep 17 00:00:00 2001
From: Gerardo Rodriguez <mr.gerardo.rodriguez@gmail.com>
Date: Thu, 15 Jul 2021 16:26:11 -0700
Subject: [PATCH] Refine Button story code examples

---
 src/components/button/button.stories.mdx | 81 ++++++++++++++++--------
 1 file changed, 54 insertions(+), 27 deletions(-)

diff --git a/src/components/button/button.stories.mdx b/src/components/button/button.stories.mdx
index edf1237da..2ad95f6d7 100644
--- a/src/components/button/button.stories.mdx
+++ b/src/components/button/button.stories.mdx
@@ -1,5 +1,16 @@
 import { Story, Canvas, Meta } from '@storybook/addon-docs/blocks';
+// The '!!raw-loader!' syntax is a non-standard, Webpack-specific, syntax.
+// See: https://github.com/webpack-contrib/raw-loader#examples
+// For now, it seems likely Storybook is pretty tied to Webpack, therefore, we are
+// okay with the following Webpack-specific raw loader syntax. It's better to leave
+// the ESLint rule enabled globally, and only thoughtfully disable as needed (e.g.
+// within a Storybook docs page and not within an actual component).
+// This can be revisited in the future if Storybook no longer relies on Webpack.
+// eslint-disable-next-line @cloudfour/import/no-webpack-loader-syntax
+import stylesDemoSource from '!!raw-loader!./demo/styles.twig';
 import stylesDemo from './demo/styles.twig';
+// eslint-disable-next-line @cloudfour/import/no-webpack-loader-syntax
+import iconButtonCustomDemoSource from '!!raw-loader!./demo/icon-button-custom-demo.twig';
 import iconButtonCustomDemo from './demo/icon-button-custom-demo.twig';
 import button from './button.twig';
 const iconControlConfig = {
@@ -17,6 +28,22 @@ const iconControlConfig = {
   },
   defaultValue: '',
 };
+const buttonStory = (args) => {
+  // Don't bother with the inline options if they don't exist or are defaults
+  if (args.content_start_icon === '') {
+    delete args.content_start_icon;
+  }
+  if (args.content_end_icon === '') {
+    delete args.content_end_icon;
+  }
+  if (args.disabled === false) {
+    delete args.disabled;
+  }
+  if (args.type === 'button') {
+    delete args.type;
+  }
+  return button(args);
+};
 
 <Meta
   title="Components/Button"
@@ -43,10 +70,10 @@ The `c-button` class may be applied to button and link elements. The button appe
 
 <Canvas>
   <Story name="Button Element" args={{ label: 'Button', href: false }}>
-    {(args) => button(args)}
+    {(args) => buttonStory(args)}
   </Story>
   <Story name="Link Element" args={{ label: 'Link', tagName: 'a' }}>
-    {(args) => button(args)}
+    {(args) => buttonStory(args)}
   </Story>
 </Canvas>
 
@@ -55,13 +82,24 @@ The `c-button` class may be applied to button and link elements. The button appe
 Some buttons may not require as much emphasis as others. The `c-button--secondary` and `c-button--tertiary` modifiers reflect lesser importance with reduced contrast.
 
 <Canvas>
-  <Story name="Styles">{(args) => stylesDemo(args)}</Story>
+  <Story
+    name="Styles"
+    parameters={{ docs: { source: { code: stylesDemoSource } } }}
+  >
+    {(args) => stylesDemo(args)}
+  </Story>
 </Canvas>
 
 All the above visual styles will appear slightly different within [our dark theme](/docs/design-themes--dark). These versions retain their visual emphasis relative to one another while remaining visually distinct from form inputs.
 
 <Canvas>
-  <Story name="Styles (Dark)" parameters={{ theme: 't-dark' }}>
+  <Story
+    name="Styles (Dark)"
+    parameters={{
+      theme: 't-dark',
+      docs: { source: { code: stylesDemoSource } },
+    }}
+  >
     {(args) => stylesDemo(args)}
   </Story>
 </Canvas>
@@ -71,13 +109,6 @@ All the above visual styles will appear slightly different within [our dark them
 To add an icon, pass the name of any of the [available icons](/docs/design-icons--page)
 to the `content_start_icon` or `content_end_icon` properties.
 
-```twig
-{% embed '@cloudfour/components/button/button.twig' with {
-  label: 'Get notifications'
-  content_start_icon: 'bell'
-} only %}
-```
-
 <Canvas>
   <Story
     name="Icon"
@@ -86,7 +117,7 @@ to the `content_start_icon` or `content_end_icon` properties.
       label: 'Get notifications',
     }}
   >
-    {(args) => button(args)}
+    {(args) => buttonStory(args)}
   </Story>
 </Canvas>
 
@@ -100,19 +131,15 @@ CSS classes on the `<svg>` element.
 The `content_start`/`content_end` blocks override the
 `content_start_icon`/`content_end_icon` values.
 
-```twig
-{% embed '@cloudfour/components/button/button.twig' %}
-  {% block content %}Button with a custom icon{% endblock %}
-  {% block content_end %}
-    <svg viewBox="0 0 24 24" width="24" height="24" class="c-icon c-icon--inline">
-      <circle r="8" cx="12" cy="12"></circle>
-    </svg>
-  {% endblock %}
-{% endembed %}
-```
-
 <Canvas>
-  <Story name="Custom Icon">{(args) => iconButtonCustomDemo(args)}</Story>
+  <Story
+    name="Custom Icon"
+    parameters={{
+      docs: { source: { code: iconButtonCustomDemoSource } },
+    }}
+  >
+    {(args) => iconButtonCustomDemo(args)}
+  </Story>
 </Canvas>
 
 ## Toggling button
@@ -128,7 +155,7 @@ You can override the `content_start_icon` value to a different icon.
       aria_pressed: 'true',
     }}
   >
-    {(args) => button(args)}
+    {(args) => buttonStory(args)}
   </Story>
   <Story
     name="Secondary Toggling Button"
@@ -137,7 +164,7 @@ You can override the `content_start_icon` value to a different icon.
       aria_pressed: 'true',
     }}
   >
-    {(args) => button(args)}
+    {(args) => buttonStory(args)}
   </Story>
   <Story
     name="Tertiary Toggling Button"
@@ -146,7 +173,7 @@ You can override the `content_start_icon` value to a different icon.
       aria_pressed: 'true',
     }}
   >
-    {(args) => button(args)}
+    {(args) => buttonStory(args)}
   </Story>
   <Story name="Custom Icon Toggling Button" args={{ aria_pressed: 'true' }}>
     {(args) => iconButtonCustomDemo(args)}