feat(button): converted button to render function

Author: codebender828

src/App.vue

@@ -1,39 +1,24 @@
 <template>
   <theme-provider :theme="theme">
-    <PseudoBox
-      px="4"
-      py="2"
-      :as="element ? 'button' : 'section'"
-      bg="blue.400"
-      color="white"
-      :_hover="{
-        bg: 'red.200',
-        color: 'red.700'
-      }"
-      @click="toggle"
+    <Box
+      w="100vw"
+      h="100vh"
+      m="0"
+      d="flex"
+      justify-content="center"
+      align-items="center"
+      bg="gray.100"
     >
-      I am an anchor
-    </PseudoBox>
-    <PseudoBox
-      px="4"
-      py="2"
-      as="footer"
-      bg="blue.400"
-      color="white"
-      :_hover="{
-        bg: 'red.200',
-        color: 'red.700'
-      }"
-    >
-      I am an anchor
-
-    </PseudoBox>
+      <Button @click="alert">
+        I am a button
+      </Button>
+    </Box>
   </theme-provider>
 </template>
 
 <script>
 import ThemeProvider from './components/ThemeProvider'
-import { Box, PseudoBox } from './lib/core/'
+import { Box, Button } from './lib/core/'
 import theme from './lib/theme'
 
 export default {
@@ -47,22 +32,24 @@ export default {
   name: 'App',
   components: {
     ThemeProvider,
-    PseudoBox
+    Box,
+    Button
   },
   methods: {
     toggle () {
       this.element = !this.element
+    },
+    alert () {
+      alert('clicked')
     }
   }
 }
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 html,
 body {
-  font-family: Rubik, sans-serif
-}
-.top-box {
-  margin-bottom: 100px;
+  font-family: Rubik, sans-serif;
+  margin: 0
 }
 </style>

src/components/Box/index.js

@@ -54,7 +54,7 @@ const system = compose(
 
 /**
  * The Box component is the base reusable component which is the building block for all other Kiwi UI components.
- * The Box component by default renders a `<div/>` element.
+ * It by default renders the `<div/>` element.
  */
 const Box = styled('div', {
   ...baseProps

src/components/Button/button.styled.js renamed to src/components/Button/button.style.js

@@ -1,34 +1,29 @@
-<template>
-  <button
-    tabindex="0"
-    :style="{
-      borderRadius: rounded === true ? '999px' : '5px',
-      padding: `${py}em ${px}em`,
-      fontSize: size === 'sm' ? '0.8rem' :
-        size === 'lg' ? '1.5rem' : '1rem'
-    }"
-    :disabled="disabled"
-    class="k-button"
-    :class="[color, variant, { ripple, shadow, rounded, disabled }]"
-    @click="$emit('click', $event)"
-    @keydown.space="$emit('click', $event)"
-    @keydown.enter="$emit('click', $event)"
-  >
-    <slot></slot>
-  </button>
-</template>
-
 <script>
+import PseudoBox from '../PseudoBox'
+import styleProps from '../../lib/config/props'
+
+let generatedProps = {
+  lineHeight: '3rem'
+}
+/**
+ * @description The Button component is an accessible rich component that does what a button does :)
+ */
 export default {
   name: 'Button',
+  components: {
+    PseudoBox
+  },
   inject: ['$theme', '$colorMode'],
   props: {
     as: {
       type: String,
-      default: 'button',
-      validator: (value) => value.match(/^(button|div|a)$/)
+      default: 'button'
+    },
+    type: {
+      type: String,
+      default: 'button'
     },
-    color: {
+    cast: {
       type: String,
       default: 'primary',
       validator: (value) =>
@@ -40,9 +35,9 @@ export default {
       validator: (value) =>
         value.match(/^(solid|outlined|ghost|flat|link)$/)
     },
-    active: {
-      type: Boolean,
-      default: false
+    variantColor: {
+      type: [String, Array],
+      default: 'gray'
     },
     disabled: {
       type: Boolean,
@@ -52,6 +47,10 @@ export default {
       type: Boolean,
       default: false
     },
+    isActive: {
+      type: Boolean,
+      default: false
+    },
     size: {
       type: String,
       default: 'md',
@@ -62,14 +61,6 @@ export default {
       default: 'Loading',
       validator: (value) => typeof value === 'string'
     },
-    px: {
-      type: Number,
-      validator: (value) => value >= 0
-    },
-    py: {
-      type: Number,
-      validator: (value) => value >= 0
-    },
     iconSpacing: {
       type: String,
       validator: (value) => value >= 0
@@ -82,14 +73,37 @@ export default {
       type: Boolean,
       default: true
     },
-    shadow: {
-      type: Boolean,
-      default: false
-    }
+    ...styleProps
+  },
+  render (h) {
+    return h(PseudoBox, {
+      props: {
+        as: this.as,
+        p: '3',
+        outline: 'none',
+        cursor: 'pointer',
+        fontSize: 'md',
+        fontWeight: '700',
+        border: 'none',
+        transition: 'all 0.2s ease-in',
+        rounded: 'md',
+        _focus: {
+          outline: 'none',
+          boxShadow: 'outline'
+        },
+        ...generatedProps
+      },
+      attrs: {
+        type: this.type,
+        tabIndex: 0,
+        disabled: this.disabled || this.isLoading,
+        ariaDisabled: this.disabled || this.isLoading,
+        dataActive: this.isActive ? 'true' : undefined
+      },
+      on: {
+        click: ($event) => this.$emit('click', $event)
+      }
+    }, this.$slots.default)
   }
 }
 </script>
-
-<style lang="scss" scoped>
-@import "../../lib/styles/components/Button";
-</style>

src/components/Button/index.vue

@@ -0,0 +1,16 @@
+import styled from 'vue-styled-components'
+import Box from '../Box'
+
+const VisuallyHidden = styled(Box)`
+  border: 0px;
+  clip: rect(0px, 0px, 0px, 0px);
+  height: 1px;
+  width: 1px;
+  margin: -1px;
+  padding: 0px;
+  overflow: hidden;
+  white-space: nowrap;
+  position: absolute;
+`
+
+export default VisuallyHidden

src/components/VisuallyHidden/index.js

@@ -1,3 +1,18 @@
-export { default as baseProps } from './props'
+import baseProps from './props'
+import pseudoProps from './pseudo'
 export { default as propsConfig } from './props.config'
-export { default as pseudoProps } from './pseudo'
+
+export {
+  baseProps,
+  pseudoProps
+}
+
+/**
+ * Style props object
+ */
+const styleProps = {
+  ...baseProps,
+  ...pseudoProps
+}
+
+export default styleProps

src/lib/config/props/index.js

@@ -62,7 +62,20 @@ const baseProps = {
   overflowX: [String, Array],
   overflowY: [String, Array],
   textTransform: [String, Array],
-  animation: [String, Array]
+  animation: [String, Array],
+  alignItems: [String, Array],
+  alignContent: [String, Array],
+  justifyContent: [String, Array],
+  flexWrap: [String, Array],
+  flexBasis: [String, Array],
+  flexDirection: [String, Array],
+  flex: [String, Array],
+  justifySelf: [String, Array],
+  alignSelf: [String, Array],
+  order: [String, Array],
+  outline: [String, Array],
+  cursor: [String, Array],
+  transition: [String, Array]
   // appearance: [String, Array],
   // transform: [String, Array],
   // transformOrigin: [String, Array],
@@ -74,9 +87,7 @@ const baseProps = {
   // overflowWrap: [String, Array],
   // textOverflow: [String, Array],
   // boxSizing: [String, Array],
-  // cursor: [String, Array],
   // resize: [String, Array],
-  // transition: [String, Array],
   // listStyleType: [String, Array],
   // listStylePosition: [String, Array],
   // listStyleImage: [String, Array],
@@ -85,7 +96,6 @@ const baseProps = {
   // objectFit: [String, Array],
   // objectPosition: [String, Array],
   // backgroundAttachment: [String, Array],
-  // outline: [String, Array],
   // float: [String, Array],
   // willChange: [String, Array]
 }

src/lib/config/props/props.js

@@ -1,2 +1,3 @@
 export { default as Box } from '../../components/Box'
 export { default as PseudoBox } from '../../components/PseudoBox'
+export { default as Button } from '../../components/Button'