Refactor stories

src/components/input/input.stories.mdx

@@ -1,9 +1,28 @@
 import { Story, Canvas, Meta } from '@storybook/addon-docs/blocks';
 import { useEffect } from '@storybook/client-api';
-import textDemo from './demo/example.twig';
+import { makeTwigInclude } from '../../make-twig-include';
+// 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 selectDemoSource from '!!raw-loader!./demo/select.twig';
 import selectDemo from './demo/select.twig';
+import input from './input.twig';
 import './demo/styles.scss';
 import { createElasticTextArea } from './elastic-textarea.ts';
+const elasticTextAreaConfig = {
+  type: 'textarea',
+  value:
+    'We are a small, versatile team who care passionately about the web. We’re full of what our industry considers unicorns. Our designers code. Our developers went to art school.',
+  placeholder: 'Placeholder text…',
+  id: 'demo-elastic',
+  rows: 2,
+  class: 'c-input--elastic js-elastic-textarea',
+};
 
 <!--
 Inline stories disabled because when the same input element is rendered with
@@ -22,7 +41,6 @@ The `c-input` class styles text and text-like form elements in a consistent way.
 <Canvas>
   <Story
     name="Text Elements"
-    height="200px"
     argTypes={{
       type: {
         type: { name: 'enum' },
@@ -42,7 +60,7 @@ The `c-input` class styles text and text-like form elements in a consistent way.
       disabled: { type: { name: 'boolean' }, defaultValue: false },
     }}
   >
-    {(args) => textDemo(args)}
+    {(args) => input(args)}
   </Story>
 </Canvas>
 
@@ -51,11 +69,11 @@ You can also add `c-input` to `<select>` elements, in which case you’ll get a
 <Canvas>
   <Story
     name="Select Element"
-    height="200px"
     argTypes={{
       id: { type: { name: 'string' }, defaultValue: 'demo-input' },
       disabled: { type: { name: 'boolean' }, defaultValue: false },
     }}
+    parameters={{ docs: { source: { code: selectDemoSource } } }}
   >
     {(args) => selectDemo(args)}
   </Story>
@@ -70,30 +88,33 @@ If the `rows` attribute is set, it will be used as the minimum height.
 <Canvas>
   <Story
     name="Elastic Textarea"
-    height="350px"
+    height="250px"
     argTypes={{
       rows: { type: { name: 'number' }, defaultValue: 2 },
       class: {
         type: { name: 'string' },
         defaultValue: 'c-input--elastic js-elastic-textarea',
       },
     }}
+    args={elasticTextAreaConfig}
+    parameters={{
+      docs: {
+        source: {
+          code: makeTwigInclude(
+            '@cloudfour/components/input/input.twig',
+            elasticTextAreaConfig
+          ),
+        },
+      },
+    }}
   >
     {(args) => {
       // Use storybook hooks to trigger JS after story renders
       // @see https://github.com/storybookjs/storybook/issues/7786
       useEffect(() => {
         createElasticTextArea(document.querySelector('.js-elastic-textarea'));
       }, []);
-      return textDemo({
-        type: 'textarea',
-        value:
-          'We are a small, versatile team who care passionately about the web. We’re full of what our industry considers unicorns. Our designers code. Our developers went to art school.',
-        placeholder: 'Placeholder text…',
-        id: 'demo-elastic',
-        rows: args.rows,
-        class: args.class,
-      });
+      return input(args);
     }}
   </Story>
 </Canvas>