feat(box): added some more props

Author: codebender828

src/App.vue

@@ -28,6 +28,9 @@
     <Box bg="red.200" border-left="4px" my="5" rounded="md" shadow="md" p="3" color="red.800">
       Lorem ipsum dolor sit amet consectetur, adipisicing elit. Debitis incidunt
     </Box>
+    <Anchor bg="indigo.200" p="3" bb="4px" rounded="sm">
+      Basic Link
+    </Anchor>
   </theme-provider>
 </template>
 
@@ -38,6 +41,8 @@ import Box from './components/Box'
 import theme from './lib/theme'
 import { useIncrement } from './use-increment'
 
+const Anchor = Box.withComponent('a')
+
 export default {
   setup () {
     const { state, increment } = useIncrement()
@@ -52,7 +57,8 @@ export default {
   components: {
     Button,
     ThemeProvider,
-    Box
+    Box,
+    Anchor
   }
 }
 </script>

src/components/Box/config.js

@@ -93,6 +93,26 @@ export const config = {
     property: 'boxShadow',
     scale: 'shadows'
   },
+  b: {
+    property: 'border',
+    scale: 'borders'
+  },
+  bl: {
+    property: 'border-left',
+    scale: 'borders'
+  },
+  bt: {
+    property: 'border-top',
+    scale: 'borders'
+  },
+  br: {
+    property: 'border-right',
+    scale: 'borders'
+  },
+  bb: {
+    property: 'border-bottom',
+    scale: 'borders'
+  },
   textDecoration: { property: 'textDecoration' },
   overflowX: true,
   overflowY: true,

src/components/Box/props.js

@@ -68,8 +68,16 @@ const allProps = {
   roundedTopLeft: [String, Array],
   roundedBottomRight: [String, Array],
   roundedBottomLeft: [String, Array],
+  b: [String, Array],
+  br: [String, Array],
+  bb: [String, Array],
+  bl: [String, Array],
+  bt: [String, Array],
   border: [String, Array],
   borderLeft: [String, Array],
+  borderRight: [String, Array],
+  borderTop: [String, Array],
+  borderBottom: [String, Array],
   shadow: [Number, String, Array],
   backgroundColor: String,
   pos: [String, Array],