feat(icon): implemented internal icons

refactor(themeprovider): made provider renderless
docs(button): made button stories
docs(icon): added icon stories

Author: codebender828

src/App.vue

@@ -1,41 +1,33 @@
 <template>
   <theme-provider :theme="theme">
-    <Box
-      w="100vw"
-      h="100vh"
-      m="0"
-      d="flex"
-      justify-content="center"
-      align-items="center"
-      bg="gray.50"
+    <Icon
+      name="star"
+      color="yellow.500"
+      size="5"
     >
-      <Button mx="3" variant-color="blue">Solid</Button>
-      <Button variant="outline" mx="3" variant-color="blue">Outlined</Button>
-      <Button variant="ghost" mx="3" variant-color="blue">Ghost</Button>
-      <Button variant="flat" mx="3" variant-color="blue">Flat</Button>
-      <Button variant="link" mx="3" variant-color="blue">Link</Button>
-    </Box>
+
+    </Icon>
   </theme-provider>
 </template>
 
 <script>
 import ThemeProvider from './components/ThemeProvider'
-import { Box, Button } from './lib/core/'
+import { Icon } from './lib/core/'
+import Badge from './components/Badge'
 import theme from './lib/theme'
 
 export default {
   data () {
     return {
       theme,
       element: true,
-      Box
+      Badge
     }
   },
   name: 'App',
   components: {
     ThemeProvider,
-    Box,
-    Button
+    Icon
   },
   methods: {
     toggle () {

src/components/Badge/index.vue

@@ -1,6 +1,6 @@
 <script lang="js">
 export default {
   name: 'Badge',
-  render: h => h('div')
+  render: h => h('div', 'Badge')
 }
 </script>

src/components/Button/button.styles.js

@@ -13,47 +13,6 @@ const baseStyles = {
   outline: 'none'
 }
 
-/**
- * @description Determine whether button should ripple
- * @param {Object} props - Props object
- * @returns {Object} Ripple styles object
- */
-const ripple = (props) => {
-  console.log(props)
-  if (props.ripple) {
-    return {
-      position: 'relative',
-      overflow: 'hidden',
-      transform: 'translate3d(0, 0, 0)',
-      _after: {
-        content: '',
-        display: 'block',
-        position: 'absolute',
-        width: '100%',
-        height: '100%',
-        top: '0',
-        left: '0',
-        pointerEvents: 'none',
-        backgroundImage: 'radial-gradient(circle, rgb(255, 255, 255) 10%, transparent 10.01%)',
-        backgroundRepeat: 'no-repeat',
-        backgroundPosition: '50%',
-        transform: 'scale(10, 10)',
-        opacity: '0',
-        transition: 'transform .5s, opacity 1s'
-      },
-      _active: {
-        _after: {
-          transform: 'scale(0, 0)',
-          opacity: '.2',
-          transition: '0s'
-        }
-      }
-    }
-  } else {
-    return {}
-  }
-}
-
 /**
  * Size values
  */
@@ -264,8 +223,7 @@ const createButtonStyles = (props) => {
     ...baseStyles,
     ...focusStyles,
     ...sizeProps(props),
-    ...getVariantStyles(props),
-    ...ripple(props)
+    ...getVariantStyles(props)
   }
 }
 

src/components/Button/button.test.js

@@ -1,5 +1,5 @@
 import { shallowMount } from '@vue/test-utils'
-import Button from './index.vue'
+import Button from '../../lib/core/'
 import Theme from '../../../kiwi.config'
 
 describe('===== Button Component =====', () => {

src/components/Button/index.d.ts

@@ -2,18 +2,16 @@ import * as Vue from 'vue';
 
 declare const Button: Vue.Component<{
   as?: String,
-  color?: String,
-  variant?: String,
-  active?: Boolean,
+  type?: String,
+  cast?: String,
+  variant?: String
+  variantColor?: [String, Array<String>],
   disabled?: Boolean,
   isLoading?: Boolean,
+  isActive?: Boolean,
   size?: String,
   loadingText?: String,
-  px?: String,
-  py?: String,
   iconSpacing?: String,
   rounded?: Boolean,
-  ripple?: Boolean,
-  shadow?: Boolean
 }>;
 export default Button;

src/components/Button/index.js

@@ -14,7 +14,7 @@ export default {
   inject: ['$theme', '$colorMode'],
   props: {
     as: {
-      type: String,
+      type: [String, Object],
       default: 'button'
     },
     type: {

src/components/Icon/Search.vue

@@ -0,0 +1,6 @@
+<template>
+  <path
+    fill="currentColor"
+    d="M23.384,21.619,16.855,15.09a9.284,9.284,0,1,0-1.768,1.768l6.529,6.529a1.266,1.266,0,0,0,1.768,0A1.251,1.251,0,0,0,23.384,21.619ZM2.75,9.5a6.75,6.75,0,1,1,6.75,6.75A6.758,6.758,0,0,1,2.75,9.5Z"
+  />
+</template>

src/components/Icon/icon.utils.js

@@ -0,0 +1,35 @@
+// @ts-check
+
+/**
+ * @description Evaluate icon size props
+ * @param {Object} props - Props object
+ * @property {String} size - Props object
+ * @property {Object} theme - Props object
+ * @returns {Object} Size style props object
+ */
+const sizeProps = ({ size, theme }) => {
+  const _theme = theme()
+  return {
+    w: _theme.sizes[size],
+    h: _theme.sizes[size]
+  }
+}
+
+/**
+ * @description Evaluate icon style props
+ * @param {Object} props - Props object
+ */
+export const iconStyles = (props) => {
+  return {
+    ...sizeProps(props)
+  }
+}
+
+/**
+ * @description Get reference to an Icon component if Font Awesome or MDI is used
+ * @param {String} name - Name of the registered icon.
+ * @returns {Object} Icon Component
+ */
+export const getIconComponent = (name) => {
+
+}

src/components/Icon/index.js

@@ -0,0 +1,99 @@
+// import styled from 'vue-styled-components'
+import { Box } from '../../lib/core/'
+import iconPaths from '../../lib/plugin/iconsPaths'
+// import styleProps from '../../lib/config/props'
+import { cleanProps } from '../../lib/utils'
+import { iconStyles } from './icon.utils'
+
+const fallbackIcon = iconPaths['question-outline']
+
+/**
+ * Features:
+ * 1) Register custom icons
+ * 2) Support Font Awesome icons.
+ * 3) Support MD icons.
+ *
+ * CUSTOM ICONS:
+ * - All icons exist as object.
+ * - Load them in at project build time
+ * - Should be extendable by users.
+ * - If "name" prop is provided, search icons config for icon.
+ *
+ * SUPPORT FONTAWESOME/MDI
+ * - Provide Object/Array of Fontawesome components
+ * - Iterate over array of components to globally register sprites as components
+ * - Accept "use" prop to calculate reference to globally registered component and feed it to Box component
+ * - ^^ Use "as" prop to render component passed.
+ */
+
+/**
+ * The Icon component renders SVGs for visual aid
+ */
+export default {
+  name: 'Icon',
+  inject: ['$theme', '$colorMode'],
+  props: {
+    name: {
+      type: [String, Array]
+    },
+    use: {
+      type: [String, Array],
+      required: false
+    },
+    pack: {
+      type: String,
+      required: false,
+      default: 'fas',
+      validator: (value) => value.match(/^(fas|fal|fad)$/)
+    },
+    size: {
+      type: [String, Number, Array],
+      default: '1em'
+    },
+    color: {
+      type: [String, Array],
+      default: 'currentColor'
+    }
+  },
+  render (h) {
+    let icon, viewBox
+    if (this.name) {
+      icon = iconPaths[this.name]
+    } else if (this.use) {
+      // icon =
+    } else {
+      console.warn(`[KiwiIcon]: You need to provide the "name" or "use" prop to for the Icon component`)
+    }
+
+    if (!icon) {
+      icon = fallbackIcon
+    }
+
+    viewBox = icon.viewBox || '0 0 24 24'
+
+    // Evaluate icon size
+    const iconSize = iconStyles({
+      size: this.size,
+      theme: this.$theme
+    })
+
+    return h(Box, {
+      props: {
+        as: 'svg',
+        color: this.color,
+        d: 'inline-block',
+        verticalAlign: 'middle',
+        ...iconSize,
+        ...cleanProps(this.$props)
+      },
+      attrs: {
+        viewBox,
+        role: 'presentation',
+        focusable: false
+      },
+      domProps: {
+        innerHTML: icon.path
+      }
+    })
+  }
+}

src/components/ThemeProvider/index.js

@@ -19,8 +19,8 @@ const ThemeProvider = {
       $colorMode: this.colorMode
     }
   },
-  render: function (createElement) {
-    return createElement('div', {}, this.$slots.default)
+  render: function () {
+    return this.$slots.default
   }
 }