feat(iconbutton): icon button storybook

Author: codebender828

src/App.vue

@@ -1,10 +1,10 @@
 <template>
   <theme-provider :theme="theme" :icons="$kiwi.icons">
     <div class="root">
-      <Button size="md" variant-color="indigo" mr="3" left-icon="search" @click="setLoading" :is-loading="loading"> Search </Button>
-      <IconButton _aria-label="Search" size="sm" variant-color="blue" :is-round="true" icon="search" />
-      <IconButton _aria-label="Search" variant-color="blue" :is-round="true" size="md" icon="search" />
-      <IconButton _aria-label="Search" size="lg" variant-color="blue" :is-round="true" icon="search" />
+      <Button size="md" variant-color="indigo" mx="3" left-icon="search" @click="setLoading" loading-text="Submitting" :is-loading="loading"> Search </Button>
+      <IconButton _aria-label="Search" size="sm" variant-color="blue" mx="3" icon="search" />
+      <IconButton _aria-label="Search" variant-color="blue" mx="3" size="md" icon="star" />
+      <IconButton _aria-label="Search" size="lg" variant-color="blue" mx="3" :is-round="true" icon="phone" />
     </div>
   </theme-provider>
 </template>

src/components/Button/button.props.js

@@ -42,8 +42,7 @@ export const buttonProps = {
   },
   loadingText: {
     type: String,
-    default: 'Loading',
-    validator: (value) => typeof value === 'string'
+    default: null
   },
   iconSpacing: {
     type: [String, Number],

src/components/Button/index.js

@@ -93,6 +93,7 @@ export default {
       this.leftIcon && !this.isLoading && h(ButtonIcon, {
         props: {
           mr: this.iconSpacing,
+          mb: 'px',
           icon: this.leftIcon,
           size: '1em'
         }
@@ -110,6 +111,7 @@ export default {
       this.rightIcon && !this.isLoading && h(ButtonIcon, {
         props: {
           ml: this.iconSpacing,
+          mb: 'px',
           icon: this.rightIcon,
           size: '1em'
         }

src/components/Icon/index.js

@@ -2,7 +2,6 @@ import styled from 'vue-styled-components'
 import { Box } from '../../lib/core/'
 import iconPaths from '../../lib/plugin/iconsPaths'
 import { forwardProps } from '../../lib/utils'
-import { iconStyles } from './icon.utils'
 import { baseProps } from '../../lib/config/props'
 
 const fallbackIcon = iconPaths['question-outline']
@@ -59,19 +58,14 @@ export default {
 
     viewBox = icon.viewBox || '0 0 24 24'
 
-    // Evaluate icon size
-    const iconSize = iconStyles({
-      size: this.size,
-      theme: this.$theme
-    })
-
     return h(Svg, {
       props: {
         as: 'svg',
+        w: this.size,
+        h: this.size,
         color: this.color,
         d: 'inline-block',
         verticalAlign: 'middle',
-        ...iconSize,
         ...forwardProps(this.$props)
       },
       attrs: {

src/components/IconButton/index.js

@@ -1,7 +1,6 @@
 import { Button, Icon, Box } from '../../lib/core'
 import styleProps from '../../lib/config/props'
 import { forwardProps } from '../../lib/utils'
-import { setIconSizes } from '../Button/button.styles'
 import { buttonProps } from '../Button/button.props'
 
 const baseStyles = {
@@ -40,7 +39,7 @@ export default {
     return h(Button, {
       props: {
         p: 0,
-        borderRadius: this.isRound ? 'full' : 'md',
+        rounded: this.isRound ? 'full' : 'md',
         size: this.size,
         ...forwardProps(props)
       },
@@ -55,8 +54,8 @@ export default {
           focusable: false,
           name: this.icon,
           color: 'currentColor',
-          mb: '-2px',
-          ...setIconSizes(props)
+          mb: '2px',
+          size: '1em'
         },
         attrs: {
           focusable: false,

stories/5-IconButton.stories.js

@@ -0,0 +1,50 @@
+import { storiesOf } from '@storybook/vue'
+import centered from '@storybook/addon-centered/vue'
+import IconButton from '../src/components/IconButton'
+
+storiesOf('UI | IconButton', module)
+  .addDecorator(centered)
+  .add('Default IconButton', () => ({
+    components: { IconButton },
+    template: `
+      <div>
+        <IconButton _aria-label="Phone" variant-color="blue" icon="phone" />
+      </div>
+    `
+  }))
+  .add('With sizes', () => ({
+    components: { IconButton },
+    template: `
+      <div>
+        <IconButton _aria-label="Phone" size="sm" mx="3" variant-color="blue" icon="phone" />
+        <IconButton _aria-label="Phone" size="md" mx="3" variant-color="blue" icon="phone" />
+        <IconButton _aria-label="Phone" size="lg" mx="3" variant-color="blue" icon="phone" />
+      </div>
+    `
+  }))
+  .add('With colors', () => ({
+    components: { IconButton },
+    template: `
+      <div>
+        <IconButton _aria-label="Phone" size="sm" mx="3" variant-color="green" icon="phone" />
+        <IconButton _aria-label="Phone" size="md" mx="3" variant-color="orange" icon="star" />
+        <IconButton _aria-label="Phone" size="lg" mx="3" variant-color="red" icon="email" />
+      </div>
+    `
+  }))
+  .add('With Loading', () => ({
+    components: { IconButton },
+    template: `
+      <div>
+        <IconButton _aria-label="Phone" is-loading size="lg" mx="3" variant-color="indigo" icon="phone" />
+      </div>
+    `
+  }))
+  .add('With Rounding', () => ({
+    components: { IconButton },
+    template: `
+      <div>
+        <IconButton _aria-label="Phone" is-round size="lg" mx="3" variant-color="indigo" icon="star" />
+      </div>
+    `
+  }))