From 487ba63747491b08ddc56e20737f1c14f751d54c Mon Sep 17 00:00:00 2001
From: codebender828 <jbakebwa@163.com>
Date: Fri, 8 Nov 2019 00:35:34 +0800
Subject: [PATCH] feat(text): created text storbook

---
 src/App.vue                    |   2 +-
 src/components/Text/index.d.ts |   6 +-
 src/components/Text/index.js   |   2 +-
 stories/6-Text.stories.js      | 104 +++++++++++++++++++++++++++++++++
 4 files changed, 109 insertions(+), 5 deletions(-)
 create mode 100644 stories/6-Text.stories.js

diff --git a/src/App.vue b/src/App.vue
index 71259953..4e47366b 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -2,7 +2,7 @@
   <theme-provider :theme="theme" :icons="$kiwi.icons">
     <div class="root">
       <IconButton _aria-label="Search" variant-color="blue" mx="3" size="md" icon="star" />
-      <KText as="samp">Text Component</KText>
+      <KText as="kbd">Text Component</KText>
     </div>
   </theme-provider>
 </template>
diff --git a/src/components/Text/index.d.ts b/src/components/Text/index.d.ts
index d9538812..5661e0b7 100644
--- a/src/components/Text/index.d.ts
+++ b/src/components/Text/index.d.ts
@@ -1,10 +1,10 @@
 import * as Vue from 'vue';
 
 /**
- * The Text component is a composable text element.
+ * The KText component is a composable text element.
  */
-declare const Text: Vue.Component<{
+declare const KText: Vue.Component<{
   as?: String
 }>;
 
-export default Text;
+export default KText;
diff --git a/src/components/Text/index.js b/src/components/Text/index.js
index a9d95437..23aca71a 100644
--- a/src/components/Text/index.js
+++ b/src/components/Text/index.js
@@ -3,7 +3,7 @@ import { forwardProps } from '../../lib/utils'
 import { baseProps } from '../../lib/config/props'
 
 export default {
-  name: 'Text',
+  name: 'KText', // <-- Vue does not allow components to be registered using built-in or reserved HTML elements as component id: like "Text". So need to rename this.
   inject: ['$theme', '$colorMode'],
   props: {
     as: {
diff --git a/stories/6-Text.stories.js b/stories/6-Text.stories.js
new file mode 100644
index 00000000..e95accb8
--- /dev/null
+++ b/stories/6-Text.stories.js
@@ -0,0 +1,104 @@
+import { storiesOf } from '@storybook/vue'
+import centered from '@storybook/addon-centered/vue'
+import KText from '../src/components/Text'
+
+storiesOf('UI | Text', module)
+  .addDecorator(centered)
+  .add('Paragraph', () => ({
+    components: { KText },
+    template: `
+      <div>
+        <KText>Text Component</KText>
+      </div>
+    `
+  }))
+  .add('As underline', () => ({
+    components: { KText },
+    template: `
+      <div>
+        <KText as="u">Underline</KText>
+      </div>
+    `
+  }))
+  .add('As abbreviation', () => ({
+    components: { KText },
+    template: `
+      <div>
+        <KText as="abbr">I18N</KText>
+      </div>
+    `
+  }))
+  .add('As citation', () => ({
+    components: { KText },
+    template: `
+      <div>
+        <KText as="cite">Citation</KText>
+      </div>
+    `
+  }))
+  .add('As deleted', () => ({
+    components: { KText },
+    template: `
+      <div>
+        <KText as="del">Deleted</KText>
+      </div>
+    `
+  }))
+  .add('With emphasis', () => ({
+    components: { KText },
+    template: `
+      <div>
+        <KText as="em">Emphasis</KText>
+      </div>
+    `
+  }))
+  .add('As inserted', () => ({
+    components: { KText },
+    template: `
+      <div>
+        <KText as="ins">Inserted</KText>
+      </div>
+    `
+  }))
+  .add('As keyboard', () => ({
+    components: { KText },
+    template: `
+      <div>
+        <KText as="kbd">Ctrl + C</KText>
+      </div>
+    `
+  }))
+  .add('As highlighted', () => ({
+    components: { KText },
+    template: `
+      <div>
+        <KText as="mark">Highlighted</KText>
+      </div>
+    `
+  }))
+  .add('As strikethrough', () => ({
+    components: { KText },
+    template: `
+      <div>
+        <KText as="s">Strikethrough</KText>
+      </div>
+    `
+  }))
+  .add('As subscript', () => ({
+    components: { KText },
+    template: `
+      <div>
+        <KText d="inline-block">2</KText>
+        <KText as="sub">sub</KText>
+      </div>
+    `
+  }))
+  .add('As superscript', () => ({
+    components: { KText },
+    template: `
+      <div>
+        <KText d="inline-block">5</KText>
+        <KText as="sup">sup</KText>
+      </div>
+    `
+  }))