feat(components): spinner and icon components

Author: codebender828

Diff for: .npmrc

@@ -0,0 +1,2 @@
+@fortawesome:registry=https://npm.fontawesome.com/
+//npm.fontawesome.com/:_authToken=9EEF60B7-9FFF-4698-88EC-EE6087D439F8

Diff for: README.md

@@ -28,8 +28,8 @@ yarn serve
 - [x] Setup Vue.js plugin system
   - [x] Provide Theme
   - [x] Observe theme and set it dynamically in javascript with ease.
-- [ ] Provide icons API for icons component
-- [ ] Accessibility (Focus) Styling
+- [x] Provide icons API for icons component
+- [x] Accessibility (Focus) Styling
 - [ ] Setup NPM distribution
 - [ ] Set up type system for components with Typescript
 

Diff for: package.json

@@ -17,6 +17,7 @@
   "dependencies": {
     "@babel/preset-env": "^7.6.3",
     "@fortawesome/free-solid-svg-icons": "^5.11.2",
+    "@fortawesome/pro-light-svg-icons": "^5.11.2",
     "@styled-system/should-forward-prop": "^5.1.2",
     "@vue/composition-api": "^0.3.2",
     "color": "^3.1.2",

Diff for: src/App.vue

@@ -4,35 +4,43 @@
       <Icon
         name="star"
         color="yellow.500"
-        size="5"
+        size="6"
+        mx="3"
       />
       <Icon
         name="email"
-        color="teal.600"
-        size="8"
+        color="orange.400"
+        size="12"
+        mx="3"
       />
       <Icon
-        name="phone"
-        color="indigo.400"
-        size="10"
+        name="not-allowed"
+        color="red.400"
+        size="12"
+        mx="3"
       />
       <Icon
-        name="ambulance"
-        color="indigo.400"
-        size="10"
+        name="chevron-circle-up"
+        color="blue.500"
+        size="12"
+        mx="3"
       />
       <Icon
-        name="not-allowed"
-        color="teal.600"
-        size="12"
+        name="times-circle"
+        color="indigo.300"
+        size="24"
+        mx="3"
       />
+        <Button variant-color="blue" size="lg">Large</Button>
+        <Button variant-color="red" size="md">Medium</Button>
+        <Button variant-color="blue" size="sm">Small</Button>
     </div>
   </theme-provider>
 </template>
 
 <script>
 import ThemeProvider from './components/ThemeProvider'
-import { Icon } from './lib/core/'
+import { Icon, Button } from './lib/core/'
 import Badge from './components/Badge'
 import theme from './lib/theme'
 
@@ -47,7 +55,8 @@ export default {
   name: 'App',
   components: {
     ThemeProvider,
-    Icon
+    Icon,
+    Button
   },
   methods: {
     toggle () {

Diff for: src/components/Button/index.d.ts

@@ -1,5 +1,8 @@
 import * as Vue from 'vue';
 
+/**
+ * Kiwi Button component for UI interactions
+ */
 declare const Button: Vue.Component<{
   as?: String,
   type?: String,

Diff for: src/components/Spinner/index.js

@@ -0,0 +1,89 @@
+import { keyframes } from 'vue-styled-components'
+import { baseProps } from '../../lib/config/props'
+import { Box, VisuallyHidden } from '../../lib/core'
+import { forwardProps } from '../../lib/utils'
+
+const spin = keyframes`
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+`
+
+const sizes = {
+  xs: {
+    w: '0.75rem',
+    h: '0.75rem'
+  },
+  sm: {
+    w: '1rem',
+    h: '1rem'
+  },
+  md: {
+    w: '1.5rem',
+    h: '1.5rem'
+  },
+  lg: {
+    w: '2rem',
+    h: '2rem'
+  },
+  xl: {
+    w: '3rem',
+    h: '3rem'
+  }
+}
+
+const setSizes = (props) => {
+  return sizes[props.size] || sizes['md']
+}
+
+export default {
+  name: 'Spinner',
+  props: {
+    size: {
+      type: [String, Array],
+      default: 'md'
+    },
+    label: {
+      type: String,
+      default: 'Loading...'
+    },
+    thickness: {
+      type: [String, Array],
+      default: '2px'
+    },
+    speed: {
+      type: [String, Array],
+      default: '0.45s'
+    },
+    color: {
+      type: [String, Array],
+      default: 'gray.200'
+    },
+    emptyColor: {
+      type: [String, Array],
+      default: 'transparent'
+    },
+    _ref: Object,
+    ...baseProps
+  },
+  render (h) {
+    return h(Box, {
+      ref: this._ref,
+      props: {
+        d: 'inline-block',
+        borderWidth: this.thickness,
+        borderBottomColor: this.emptyColor,
+        borderLeftColor: this.emptyColor,
+        borderStyle: 'solid',
+        rounded: 'full',
+        color: this.color,
+        animation: `${spin} ${this.speed} linear infinite`,
+        ...setSizes(this.$props),
+        ...forwardProps(this.$props)
+      }
+    }, this.label && h(VisuallyHidden, {}, this.label))
+  }
+}

Diff for: src/lib/config/props/props.js

@@ -75,7 +75,13 @@ const baseProps = {
   order: [String, Array],
   outline: [String, Array],
   cursor: [String, Array],
-  transition: [String, Array]
+  transition: [String, Array],
+  borderBottomColor: [String, Array],
+  borderTopColor: [String, Array],
+  borderLeftColor: [String, Array],
+  borderRightColor: [String, Array],
+  borderColor: [String, Array],
+  borderStyle: [String, Array]
   // appearance: [String, Array],
   // transform: [String, Array],
   // transformOrigin: [String, Array],

Diff for: src/lib/core/index.js

@@ -2,3 +2,7 @@ export { default as Box } from '../../components/Box'
 export { default as PseudoBox } from '../../components/PseudoBox'
 export { default as Button } from '../../components/Button'
 export { default as Icon } from '../../components/Icon'
+export { default as Spinner } from '../../components/Spinner'
+export { default as VisuallyHidden } from '../../components/VisuallyHidden'
+export { default as TransitionExpand } from '../../components/TransitionExpand'
+export { default as ThemeProvider } from '../../components/ThemeProvider'

Diff for: src/main.js

@@ -10,13 +10,22 @@ import { faCoffee,
   faCalendar,
   faCar,
   faBraille,
-  faCaretLeft } from '@fortawesome/free-solid-svg-icons'
+  faCaretLeft,
+  faAnchor } from '@fortawesome/free-solid-svg-icons'
+import { faChevronCircleUp, faTimesCircle } from '@fortawesome/pro-light-svg-icons'
 
 Vue.config.productionTip = false
 Vue.use(VueCompositionApi)
 
 // Install Kiwi plugin
 Vue.use(Kiwi, {
+  // include theme property that can be extended by user.
+  /**
+   * theme: {
+   *  ...someImportedThemeObject
+   *  icons: Object
+   * }
+   */
   icons: {
     iconPack: 'fa',
     iconSet: {
@@ -25,7 +34,10 @@ Vue.use(Kiwi, {
       faCoffee,
       faBraille,
       faAmbulance,
-      faCaretLeft
+      faCaretLeft,
+      faAnchor,
+      faChevronCircleUp,
+      faTimesCircle
     },
     extend: {
       'not-allowed': {

Diff for: stories/4-Icon.stories.js

@@ -11,6 +11,7 @@ storiesOf('UI | Icon', module)
         <Icon name="star" mx="2" color="yellow.400" size="4" />
         <Icon name="email" mx="2" color="indigo.400" size="5" />
         <Icon name="phone" mx="2" color="green.400" size="6" />
+        <Icon name="anchor" mx="2" color="red.400" size="10" />
       </div>
     `
   }))

Diff for: yarn.lock

@@ -1154,6 +1154,13 @@
   dependencies:
     "@fortawesome/fontawesome-common-types" "^0.2.25"
 
+"@fortawesome/pro-light-svg-icons@^5.11.2":
+  version "5.11.2"
+  resolved "https://npm.fontawesome.com/@fortawesome/pro-light-svg-icons/-/pro-light-svg-icons-5.11.2.tgz#61543170feb34e04f4d4bd1843b08bbde6682833"
+  integrity sha512-NzN0K+hnKQ8fw4PLsr7WjLgtlnH1QjD4/N26YVUEMzLZiTgYBiqE7NDlRL6q/xJ9ittCj6PDPNY/IQ0T8XPLiA==
+  dependencies:
+    "@fortawesome/fontawesome-common-types" "^0.2.25"
+
 "@hapi/[email protected]":
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/@hapi/address/-/address-2.1.1.tgz#61395b5ed94c4cb19c2dc4c85969cff3d40d583f"