component: tabs

.storybook/config.js

@@ -16,7 +16,9 @@ import {
   faCar,
   faCaretLeft,
   faBolt,
-  faUserSlash } from '@fortawesome/free-solid-svg-icons'
+  faUserSlash,
+  faCheckCircle,
+  faCog } from '@fortawesome/free-solid-svg-icons'
 
 import {
   faChevronCircleUp,
@@ -44,28 +46,13 @@ Vue.use(Kiwi, {
       faChevronCircleUp,
       faSearch,
       faTimesCircle,
-      faGithub
+      faGithub,
+      faCheckCircle,
+      faCog
     }
   }
 })
 
-const faIcons = {
-  faBraille,
-  faAnchor,
-  faPlus,
-  faCoffee,
-  faAmbulance,
-  faCalendar,
-  faCar,
-  faCaretLeft,
-  faBolt,
-  faUserSlash,
-  faChevronCircleUp,
-  faSearch,
-  faTimesCircle,
-  faGithub
-}
-
 addParameters({
   options: {
    theme: storyBookTheme

packages/docs/components/components.js

@@ -33,7 +33,7 @@ const components = [
   'Image',
   'Input',
   'Link',
-  // 'List',
+  'List',
   'Menu',
   'Modal',
   'NumberInput',
@@ -48,10 +48,10 @@ const components = [
   // 'Stat',
   'Stack',
   'Switch',
-  // 'Tabs',
+  'Tabs',
   'Tag',
   'Text',
-  // 'Textarea',
+  'Textarea',
   'Toast',
   'Tooltip'
 ]

packages/kiwi-core/src/Input/index.js

@@ -61,9 +61,10 @@ const Input = {
 
     return h(PseudoBox, {
       props: {
-        ...forwardProps(this.$props),
+        ...inputStyles,
         as: this.as,
-        ...inputStyles
+        fontFamily: 'body',
+        ...forwardProps(this.$props)
       },
       domProps: {
         value: this.value

packages/kiwi-core/src/List/index.js

@@ -0,0 +1,92 @@
+import { baseProps } from '../config'
+import Box from '../Box'
+import PseudoBox from '../PseudoBox'
+import Icon from '../Icon'
+import { cleanChildren, isDef, cloneVNodeElement, forwardProps } from '../utils'
+import { SNA } from '../config/props/props.types'
+import styleProps from '../config/props'
+
+const List = {
+  name: 'List',
+  props: {
+    ...baseProps,
+    styleType: {
+      type: String,
+      default: 'none'
+    },
+    stylePos: {
+      type: String,
+      default: 'inside'
+    },
+    spacing: SNA
+  },
+  render (h) {
+    const children = this.$slots.default
+    if (!isDef(children)) {
+      console.error('[Chakra-ui: List]: List component expects at east one child')
+      return null
+    }
+    const validChildren = cleanChildren(children)
+
+    const clones = validChildren.map((vnode, index) => {
+      const isLast = index + 1 === validChildren.length
+      if (isLast) {
+        return vnode
+      }
+
+      return cloneVNodeElement(vnode, {
+        props: {
+          spacing: this.spacing
+        }
+      }, h)
+    })
+
+    return h(Box, {
+      props: {
+        as: 'ul',
+        listStyleType: this.styleType,
+        listStylePosition: this.stylePos,
+        ...forwardProps(this.$props)
+      }
+    }, clones)
+  }
+}
+
+const ListItem = {
+  name: 'ListItem',
+  props: {
+    ...styleProps,
+    spacing: SNA
+  },
+  render (h) {
+    return h(PseudoBox, {
+      props: {
+        as: 'li',
+        mb: this.spacing
+      }
+    }, this.$slots.default)
+  }
+}
+
+const ListIcon = {
+  name: 'ListIcon',
+  props: {
+    ...baseProps,
+    icon: String
+  },
+  render (h) {
+    return h(Icon, {
+      props: {
+        name: this.icon,
+        mr: 2,
+        ...forwardProps(this.$props)
+      }
+    })
+  }
+}
+
+export default List
+export {
+  ListItem,
+  ListIcon
+}