From f226a376b139b7285ee1d1dbc1600f15eb4cf2c1 Mon Sep 17 00:00:00 2001
From: Jose Manuel Casani Guerra <jmpl3.soporte@gmail.com>
Date: Wed, 11 Nov 2020 18:14:42 -0500
Subject: [PATCH] refactor: update example of storybook (#17936)

## Change

- Update package versions
- Replace @storybook/addons, @storybook/addon-actions to @storybook/addon-essentials
- Replace examples of button, the action function is legacy: https://storybook.js.org/docs/react/essentials/actions#advanced--legacy-usage
---
 examples/with-storybook/.storybook/main.js    |  2 +-
 examples/with-storybook/package.json          |  7 +++---
 .../with-storybook/stories/button.stories.js  | 22 +++++++++++++------
 3 files changed, 19 insertions(+), 12 deletions(-)

diff --git a/examples/with-storybook/.storybook/main.js b/examples/with-storybook/.storybook/main.js
index bb74a535b0..974c2f95aa 100644
--- a/examples/with-storybook/.storybook/main.js
+++ b/examples/with-storybook/.storybook/main.js
@@ -1,4 +1,4 @@
 module.exports = {
   stories: ['../stories/*.stories.@(ts|tsx|js|jsx|mdx)'],
-  addons: ['@storybook/addon-actions', '@storybook/addon-links'],
+  addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
 }
diff --git a/examples/with-storybook/package.json b/examples/with-storybook/package.json
index fd39acc694..3b151db4e3 100644
--- a/examples/with-storybook/package.json
+++ b/examples/with-storybook/package.json
@@ -16,10 +16,9 @@
   },
   "license": "MIT",
   "devDependencies": {
-    "@storybook/addon-actions": "6.0.5",
-    "@storybook/addon-links": "6.0.5",
-    "@storybook/addons": "6.0.5",
-    "@storybook/react": "6.0.5",
+    "@storybook/addon-essentials": "6.0.26",
+    "@storybook/addon-links": "6.0.26",
+    "@storybook/react": "6.0.26",
     "babel-loader": "^8.0.5"
   }
 }
diff --git a/examples/with-storybook/stories/button.stories.js b/examples/with-storybook/stories/button.stories.js
index adcd12fa27..a8b486c538 100644
--- a/examples/with-storybook/stories/button.stories.js
+++ b/examples/with-storybook/stories/button.stories.js
@@ -1,17 +1,25 @@
 import React from 'react'
-import { action } from '@storybook/addon-actions'
 import { Button } from '@storybook/react/demo'
 
-export default { title: 'Button' }
+export default {
+  title: 'Button',
+  argTypes: { onClick: { action: 'clicked' } },
+}
 
-export const withText = () => (
-  <Button onClick={action('clicked')}>Hello Button</Button>
-)
+const TemplateWithText = (args) => <Button {...args}>Hello Button</Button>
 
-export const withSomeEmoji = () => (
-  <Button onClick={action('clicked')}>
+const TemplateWithEmoji = (args) => (
+  <Button {...args}>
     <span role="img" aria-label="so cool">
       😀 😎 👍 💯
     </span>
   </Button>
 )
+
+export const withText = TemplateWithText.bind({})
+
+withText.args = {}
+
+export const withSomeEmoji = TemplateWithEmoji.bind({})
+
+withSomeEmoji.args = {}