feat(badge): added badge component

Author: codebender828

src/App.vue

@@ -2,50 +2,17 @@
   <theme-provider :theme="theme" :icons="$kiwi.icons">
     <div class="root">
       <div class="wrapper">
-
-        <Alert mb="3" status="error">
-          <AlertIcon />
-          There was an error processing your request
-        </Alert>
-
-        <Alert mb="3" status="success">
-          <AlertIcon />
-          Data uploaded to the server. Fire on!
-        </Alert>
-
-        <Alert mb="3" status="warning">
-          <AlertIcon />
-          Seems your account is about expire, upgrade now
-        </Alert>
-
-        <Alert mb="3" status="info">
-          <AlertIcon />
-          Chakra is going live on August 30th. Get ready!
-        </Alert>
-
-        <Alert
-          status="success"
-          variant="subtle"
-          flexDirection="column"
-          justifyContent="center"
-          textAlign="center"
-          height="200px"
-        >
-          <AlertIcon size="40px" mr="0" />
-          <AlertTitle mt="4" mb="1" fontSize="lg">
-            Application submitted!
-          </AlertTitle>
-          <AlertDescription maxWidth="sm">
-            Thanks for submitting your application. Our team will get back to you soon.
-          </AlertDescription>
-        </Alert>
+        <Badge mx="2">Default</Badge>
+        <Badge mx="2" variant-color="green">Success</Badge>
+        <Badge mx="2" variant-color="red">Removed</Badge>
+        <Badge mx="2" variant-color="indigo">New</Badge>
       </div>
     </div>
   </theme-provider>
 </template>
 
 <script>
-import { ThemeProvider, Alert, AlertIcon, AlertTitle, AlertDescription } from './lib/core/'
+import { ThemeProvider, Badge } from './lib/core/'
 import theme from './lib/theme'
 
 export default {
@@ -59,10 +26,7 @@ export default {
   name: 'App',
   components: {
     ThemeProvider,
-    Alert,
-    AlertIcon,
-    AlertTitle,
-    AlertDescription
+    Badge
   },
   methods: {
     toggle () {
@@ -100,7 +64,6 @@ body {
 
   .wrapper {
     display: flex;
-    flex-direction: column;
     justify-content: center;
   }
 }

src/components/Badge/badge.styles.js

@@ -0,0 +1,69 @@
+import { addOpacity, generateAlphas, get } from '../../lib/utils'
+
+const solidStyle = ({ theme: { colors }, color }) => {
+  const _color = colors[color] && colors[color][500]
+  const darkModeBg = addOpacity(_color, 0.6)
+  return {
+    light: {
+      bg: get(color, 500),
+      color: 'white'
+    },
+    dark: {
+      bg: darkModeBg,
+      color: 'whiteAlpha.800'
+    }
+  }
+}
+
+const subtleStyle = ({ theme: { colors }, color }) => {
+  const _color = colors[color] && colors[color][200]
+  const alphaColors = generateAlphas(_color)
+  const darkModeBg = alphaColors[300]
+
+  return {
+    light: {
+      bg: get(color, 100),
+      color: get(color, 800)
+    },
+    dark: {
+      bg: darkModeBg,
+      color: get(color, 200)
+    }
+  }
+}
+
+const outlineStyle = ({ theme: { colors }, color }) => {
+  const _color = colors[color] && colors[color][200]
+  const darkModeColor = addOpacity(_color, 0.8)
+  const boxShadowColor = colors[color] && colors[color][500]
+  return {
+    light: {
+      boxShadow: `inset 0 0 0px 1px ` + boxShadowColor,
+      color: get(color, 500)
+    },
+    dark: {
+      boxShadow: `inset 0 0 0px 1px ` + darkModeColor,
+      color: darkModeColor
+    }
+  }
+}
+
+const variantProps = props => {
+  const { variant, colorMode } = props
+  switch (variant) {
+    case 'solid':
+      return solidStyle(props)[colorMode]
+    case 'subtle':
+      return subtleStyle(props)[colorMode]
+    case 'outline':
+      return outlineStyle(props)[colorMode]
+    default:
+      return {}
+  }
+}
+
+const useBadgeStyle = props => {
+  return variantProps(props)
+}
+
+export default useBadgeStyle

src/components/Badge/index.d.ts

@@ -0,0 +1,19 @@
+import Vue from 'vue'
+
+export interface IBadge {
+  /**
+   * The color scheme of the badge
+   */
+  variantColor?: string;
+  /**
+   * The variant of the badge
+   */
+  variant?: "solid" | "subtle" | "outline";
+}
+
+/**
+ * The Badge component is used for state, general text, and number labels.
+ */
+declare const Badge: Vue.Component<{}>;
+
+export default Badge;

src/components/Badge/index.js

@@ -0,0 +1,46 @@
+import { Box } from '../../lib/core/'
+import { forwardProps } from '../../lib/utils'
+import { baseProps } from '../../lib/config/props'
+import useBadgeStyles from './badge.styles'
+
+export default {
+  name: 'Badge',
+  inject: ['$theme', '$colorMode'],
+  props: {
+    variant: {
+      type: String,
+      default: 'subtle'
+    },
+    variantColor: {
+      type: String,
+      default: 'gray'
+    },
+    _ref: {
+      type: HTMLElement
+    },
+    ...baseProps
+  },
+  render (h) {
+    const badgeStyleProps = useBadgeStyles({
+      theme: this.$theme(),
+      colorMode: this.$colorMode,
+      color: this.variantColor,
+      variant: this.variant
+    })
+
+    return h(Box, {
+      props: {
+        d: 'inline-block',
+        textTransform: 'uppercase',
+        fontSize: 'xs',
+        px: 1,
+        rounded: 'sm',
+        fontWeight: 'bold',
+        whiteSpace: 'nowrap',
+        verticalAlign: 'middle',
+        ...badgeStyleProps,
+        ...forwardProps(this.$props)
+      }
+    }, this.$slots.default)
+  }
+}

src/components/Badge/index.vue

@@ -9,3 +9,4 @@ export { default as VisuallyHidden } from '../../components/VisuallyHidden'
 export { default as TransitionExpand } from '../../components/TransitionExpand'
 export { default as Text } from '../../components/Text'
 export * from '../../components/Alert'
+export { default as Badge } from '../../components/Badge'

src/lib/core/index.js

@@ -1,6 +1,14 @@
 // import css from '@styled-system/css'
 import Color from 'color'
 
+/**
+ * @description Gets color value from theme
+ * @param {String} color
+ * @param {Number} hue
+ * @returns {String} color
+ */
+export const get = (color, hue) => `${color}.${hue}`
+
 /**
  * @description Add opacity to a color
  * @param {String} color Hex color code

src/lib/utils/color.js

@@ -2,5 +2,5 @@ export { default as Logger } from './logger'
 export { provideTheme } from './provide-theme'
 export { transformAlias as tx } from './transform'
 export { pickProperty as forwardProps, filterPseudo } from './object'
-export { addOpacity, colorEmphasis, generateAlphas } from './color'
+export { addOpacity, colorEmphasis, generateAlphas, get } from './color'
 export { parsePackIcons } from './icons'