feat(text): created text storbook

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>

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;

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: {

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>
+    `
+  }))