fix(textarea): add storybook example with event listener

peoray · peoray · commit 710e43aeee00 · 2021-09-29T01:50:40.000+01:00
diff --git a/packages/chakra-ui-core/src/CTextarea/CTextarea.stories.js b/packages/chakra-ui-core/src/CTextarea/CTextarea.stories.js
@@ -2,9 +2,10 @@ import { storiesOf } from '@storybook/vue'
 import { action } from '@storybook/addon-actions'
 import { CBox, CTextarea } from '..'
 
-storiesOf('UI | Textarea', module).add('Basic Usage', () => ({
-  components: { CBox, CTextarea },
-  template: `
+storiesOf('UI | Textarea', module)
+  .add('Basic Usage', () => ({
+    components: { CBox, CTextarea },
+    template: `
       <CBox w="300px">
         <CTextarea
           v-model="textareaContent"
@@ -17,12 +18,40 @@ storiesOf('UI | Textarea', module).add('Basic Usage', () => ({
         />
       </CBox>
     `,
-  data () {
-    return {
-      textareaContent: 'Jonathan Bakebwa is awesome'
+    data () {
+      return {
+        textareaContent: 'Jonathan Bakebwa is awesome'
+      }
+    },
+    methods: {
+      action: action()
     }
-  },
-  methods: {
-    action: action()
-  }
-}))
+  }))
+  .add('Basic Usage with Event', () => ({
+    components: { CBox, CTextarea },
+    template: `
+      <CBox w="300px">
+        <CTextarea
+          v-model="textareaContent"
+          maxWidth="sm"
+          mx="auto"
+          mt="2"
+          placeholder="Here is a sample placeholder"
+          size="md"
+          :value="textareaContent"
+          @change="handleChange"
+        />
+      </CBox>
+    `,
+    data () {
+      return {
+        textareaContent: 'Jonathan Bakebwa is awesome'
+      }
+    },
+    methods: {
+      action: action(),
+      handleChange (e) {
+        this.textareaContent = 'You are beautiful :)'
+      }
+    }
+  }))
