Update buttons stories

lib/cli/src/frameworks/angular/1-Button.stories.ts

@@ -8,19 +8,21 @@ export default {
   component: Button,
 };
 
-export const Text = () => ({
+const ButtonStory = (args: Button) => ({
   component: Button,
-  props: {
-    text: 'Hello Button',
-  },
+  props: args,
 });
 
-export const Emoji = () => ({
-  component: Button,
-  props: {
-    text: '😀 😎 👍 💯',
-  },
-});
+export const Text = ButtonStory.bind({});
+Text.args = {
+  children: 'Button',
+  onClick: action('onClick'),
+};
+
+export const Emoji = ButtonStory.bind({});
+Emoji.args = {
+  children: '😀 😎 👍 💯',
+};
 
 Emoji.parameters = { notes: 'My notes on a button with emojis' };
 

lib/cli/src/frameworks/aurelia/1-Button.stories.ts

@@ -6,23 +6,26 @@ import Button from './button';
 export default {
   title: 'Button',
   component: Button,
+  argTypes: {
+    text: { control: 'text' },
+  },
 };
 
-export const Text = () => ({
+const ButtonStory = (args) => ({
   component: Button,
-  props: {
-    text: 'Hello Button',
-  },
+  props: args,
 });
 
-export const Emoji = () => ({
-  component: Button,
-  props: {
-    text: '😀 😎 👍 💯',
-  },
-});
+export const Text = ButtonStory.bind({});
+Text.args = {
+  children: 'Button',
+  onClick: action('onClick'),
+};
 
-Emoji.parameters = { notes: 'My notes on a button with emojis' };
+export const Emoji = ButtonStory.bind({});
+Emoji.args = {
+  children: '😀 😎 👍 💯',
+};
 
 export const TextWithAction = () => ({
   component: Button,

lib/cli/src/frameworks/ember/1-Button.stories.js

@@ -4,29 +4,26 @@ import { linkTo } from '@storybook/addon-links';
 
 export default {
   title: 'Button',
+  argTypes: {
+    children: { control: 'text' },
+  },
 };
 
-export const Text = () => ({
-  template: hbs`<button {{action onClick}}>Hello Button</button>`,
-  context: {
-    onClick: action('clicked'),
-  },
+const ButtonStory = (args) => ({
+  template: hbs`<button {{action onClick}}>{{children}}</button>`,
+  context: args,
 });
 
-export const Emoji = () => ({
-  template: hbs`
-    <button {{action onClick}}>
-      <span role="img" aria-label="so cool">
-        😀 😎 👍 💯
-      </span>
-    </button>
-  `,
-  context: {
-    onClick: action('clicked'),
-  },
-});
+export const Text = ButtonStory.bind({});
+Text.args = {
+  children: 'Button',
+  onClick: action('onClick'),
+};
 
-Emoji.parameters = { notes: 'My notes on a button with emojis' };
+export const Emoji = ButtonStory.bind({});
+Emoji.args = {
+  children: '😀 😎 👍 💯',
+};
 
 export const TextWithAction = () => ({
   template: hbs`

lib/cli/src/frameworks/html/1-Button.stories.js

@@ -3,25 +3,29 @@ import { linkTo } from '@storybook/addon-links';
 
 export default {
   title: 'Button',
+  argTypes: {
+    children: { control: 'text' },
+  },
 };
 
-export const Text = () => {
+const ButtonStory = ({ onClick, children }) => {
   const btn = document.createElement('button');
   btn.type = 'button';
-  btn.innerText = 'Hello Button';
-  btn.addEventListener('click', action('clicked'));
+  btn.innerText = children;
+  btn.addEventListener('click', onClick);
   return btn;
 };
 
-export const Emoji = () => {
-  const btn = document.createElement('button');
-  btn.type = 'button';
-  btn.innerText = '😀 😎 👍 💯';
-  btn.addEventListener('click', action('clicked'));
-  return btn;
+export const Text = ButtonStory.bind({});
+Text.args = {
+  children: 'Button',
+  onClick: action('onClick'),
 };
 
-Emoji.parameters = { notes: 'My notes on a button with emojis' };
+export const Emoji = ButtonStory.bind({});
+Emoji.args = {
+  children: '😀 😎 👍 💯',
+};
 
 export const TextWithAction = () => {
   const btn = document.createElement('button');

lib/cli/src/frameworks/mithril/1-Button.stories.js

@@ -6,22 +6,25 @@ import Button from './Button';
 export default {
   title: 'Button',
   component: Button,
+  argTypes: {
+    children: { control: 'text' },
+  },
 };
 
-export const Text = () => ({
-  view: () => m(Button, { onclick: action('clicked') }, 'Hello Button'),
+const ButtonStory = ({ children, ...args }) => ({
+  view: () => m(Button, args, children),
 });
 
-export const Emoji = () => ({
-  view: () =>
-    m(
-      Button,
-      { onclick: action('clicked') },
-      m('span', { role: 'img', ariaLabel: 'so cool' }, '😀 😎 👍 💯')
-    ),
-});
+export const Text = ButtonStory.bind({});
+Text.args = {
+  children: 'Button',
+  onClick: action('onClick'),
+};
 
-Emoji.parameters = { notes: 'My notes on a button with emojis' };
+export const Emoji = ButtonStory.bind({});
+Emoji.args = {
+  children: '😀 😎 👍 💯',
+};
 
 export const TextWithAction = () => ({
   view: () => m(Button, { onclick: () => action('This was clicked')() }, 'Trigger Action'),

lib/cli/src/frameworks/preact/1-Button.stories.js

@@ -8,19 +8,23 @@ import Button from './Button';
 export default {
   title: 'Button',
   component: Button,
+  argTypes: {
+    children: { control: 'text' },
+  },
 };
 
-export const Text = () => <Button onClick={action('clicked')}>Hello Button</Button>;
+const ButtonStory = (args) => <Button {...args} />;
 
-export const Emoji = () => (
-  <Button onClick={action('clicked')}>
-    <span role="img" aria-label="so cool">
-      😀 😎 👍 💯
-    </span>
-  </Button>
-);
+export const Text = ButtonStory.bind({});
+Text.args = {
+  children: 'Button',
+  onClick: action('onClick'),
+};
 
-Emoji.parameters = { notes: 'My notes on a button with emojis' };
+export const Emoji = ButtonStory.bind({});
+Emoji.args = {
+  children: '😀 😎 👍 💯',
+};
 
 export const TextWithAction = () => (
   <Button onClick={() => action('This was clicked')()}>Trigger Action</Button>

lib/cli/src/frameworks/rax/1-Button.stories.js

@@ -2,31 +2,35 @@ import { createElement } from 'rax';
 import { action } from '@storybook/addon-actions';
 import { linkTo } from '@storybook/addon-links';
 
-import Text from 'rax-text';
+import RaxText from 'rax-text';
 
 export default {
   title: 'Button',
+  argTypes: {
+    children: { control: 'text' },
+  },
 };
 
-export const text = () => (
-  <button type="button">
-    <Text>Hello Button</Text>
+const ButtonStory = ({ children, ...args }) => (
+  <button type="button" {...args}>
+    <RaxText>{children}</RaxText>
   </button>
 );
 
-export const Emoji = () => (
-  <button onClick={action('clicked')} type="button">
-    <Text role="img" aria-label="so cool">
-      😀 😎 👍 💯
-    </Text>
-  </button>
-);
+export const Text = ButtonStory.bind({});
+Text.args = {
+  children: 'Button',
+  onClick: action('onClick'),
+};
 
-Emoji.parameters = { notes: 'My notes on a button with emojis' };
+export const Emoji = ButtonStory.bind({});
+Emoji.args = {
+  children: '😀 😎 👍 💯',
+};
 
 export const TextWithAction = () => (
   <button onClick={() => action('This was clicked')()} type="button">
-    <Text>Trigger Action</Text>
+    <RaxText>Trigger Action</RaxText>
   </button>
 );
 
@@ -35,7 +39,7 @@ TextWithAction.parameters = { notes: 'My notes on a button with emojis' };
 
 export const ButtonWithLinkToAnotherStory = () => (
   <button onClick={linkTo('Welcome')} type="button">
-    <Text>Go to Welcome Story</Text>
+    <RaxText>Go to Welcome Story</RaxText>
   </button>
 );
 

lib/cli/src/frameworks/react/js/1-Button.stories.js

@@ -6,6 +6,9 @@ import { Button } from './Button';
 export default {
   title: 'Button',
   component: Button,
+  argTypes: {
+    children: { control: 'text' },
+  },
 };
 
 const ButtonStory = (args) => <Button {...args} />;

lib/cli/src/frameworks/riot/1-Button.stories.js

@@ -8,11 +8,23 @@ import './MyButton.tag';
 
 export default {
   title: 'Button',
+  argTypes: {
+    content: { control: 'text' },
+  },
 };
 
-export const Text = () => ({
-  tags: ['<my-button>Hello Button</my-button>'],
-});
+const ButtonStory = (args) => mount('my-button', args);
+
+export const Text = ButtonStory.bind({});
+Text.args = {
+  content: 'Button',
+  onClick: action('onClick'),
+};
+
+export const Emoji = ButtonStory.bind({});
+Emoji.args = {
+  content: '😀 😎 👍 💯',
+};
 
 export const WithScenario = () => ({
   tags: [{ content: MyButtonRaw, boundAs: 'MyButton' }],

lib/cli/src/frameworks/svelte/1-button.stories.js

@@ -6,23 +6,26 @@ import Button from './button.svelte';
 export default {
   title: 'Button',
   component: Button,
+  argTypes: {
+    children: { control: 'text' },
+  },
 };
 
-export const Text = () => ({
+const ButtonStory = (args) => ({
   Component: Button,
-  props: { text: 'Hello Button' },
-  on: { click: action('clicked') },
+  props: args,
 });
 
-export const Emoji = () => ({
-  Component: Button,
-  props: {
-    text: '😀 😎 👍 💯',
-  },
-  on: { click: action('clicked') },
-});
+export const Text = ButtonStory.bind({});
+Text.args = {
+  children: 'Button',
+  click: action('onClick'),
+};
 
-Emoji.parameters = { notes: 'My notes on a button with emojis' };
+export const Emoji = ButtonStory.bind({});
+Emoji.args = {
+  children: '😀 😎 👍 💯',
+};
 
 export const TextWithAction = () => ({
   Component: Button,

lib/cli/src/frameworks/vue/1-Button.stories.js

@@ -8,12 +8,23 @@ export default {
   component: MyButton,
 };
 
-export const Text = () => ({
+const ButtonStory = (args) => ({
+  props: Object.keys(args),
   components: { MyButton },
-  template: '<my-button @click="action">Hello Button</my-button>',
-  methods: { action: action('clicked') },
+  template: '<my-button :color="color" :rounded="rounded">{{label}}</my-button>',
 });
 
+export const Text = ButtonStory.bind({});
+Text.args = {
+  children: 'Button',
+  onClick: action('onClick'),
+};
+
+export const Emoji = ButtonStory.bind({});
+Emoji.args = {
+  children: '😀 😎 👍 💯',
+};
+
 export const TextWithAction = () => ({
   components: { MyButton },
   template: '<my-button @click="action">Trigger Action</my-button>',

lib/cli/src/frameworks/web-components/1-Button.stories.js

@@ -4,21 +4,27 @@ import { linkTo } from '@storybook/addon-links';
 
 export default {
   title: 'Button',
+  argTypes: {
+    children: { control: 'text' },
+  },
 };
 
-export const Text = () => html`
+const ButtonStory = (args) => html`
   <button @click=${action('clicked')}>
     Hello Button
   </button>
 `;
 
-export const Emoji = () => html`
-  <button @click=${action('clicked')}>
-    😀 😎 👍 💯
-  </button>
-`;
+export const Text = ButtonStory.bind({});
+Text.args = {
+  children: 'Button',
+  onClick: action('onClick'),
+};
 
-Emoji.parameters = { notes: 'My notes on a button with emojis' };
+export const Emoji = ButtonStory.bind({});
+Emoji.args = {
+  children: '😀 😎 👍 💯',
+};
 
 export const TextWithAction = () => html`
   <button @click=${() => action('This was clicked')()}>