feat(closebutton): added close button

Author: codebender828

src/App.vue

@@ -2,17 +2,14 @@
   <theme-provider :theme="theme" :icons="$kiwi.icons">
     <div class="root">
       <div class="wrapper">
-        <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>
+        <CloseButton />
       </div>
     </div>
   </theme-provider>
 </template>
 
 <script>
-import { ThemeProvider, Badge } from './lib/core/'
+import { ThemeProvider, CloseButton } from './lib/core/'
 import theme from './lib/theme'
 
 export default {
@@ -26,7 +23,7 @@ export default {
   name: 'App',
   components: {
     ThemeProvider,
-    Badge
+    CloseButton
   },
   methods: {
     toggle () {

src/components/CloseButton/index.d.ts

@@ -0,0 +1,29 @@
+import * as Vue from 'vue';
+
+interface ICloseButton {
+  /**
+   * The size of the close button
+   */
+  size?: "lg" | "md" | "sm";
+  /**
+   * If `true`, the close button will be disabled
+   */
+  isDisabled?: boolean;
+  /**
+   * The color of the close icon
+   */
+  color?: string;
+  /**
+   * An accessible label for the close button
+   */
+  "aria-label"?: string;
+}
+
+export type CloseButtonProps = ICloseButton;
+
+/**
+ * Close button component for UI interfaces
+ */
+declare const CloseButton: Vue.Component<CloseButtonProps>;
+
+export default CloseButton;

src/components/CloseButton/index.js

@@ -0,0 +1,98 @@
+import Icon from '../Icon'
+import PseudoBox from '../PseudoBox'
+import styleProps from '../../lib/config/props'
+import { forwardProps } from '../../lib/utils'
+
+const baseProps = {
+  display: 'inline-flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  rounded: 'md',
+  transition: 'all 0.2s',
+  flex: '0 0 auto',
+  _hover: { bg: 'blackAlpha.100' },
+  _active: { bg: 'blackAlpha.200' },
+  _disabled: {
+    cursor: 'not-allowed'
+  },
+  _focus: {
+    boxShadow: 'outline'
+  },
+  border: 'none'
+}
+
+const sizes = {
+  lg: {
+    button: '40px',
+    icon: '16px'
+  },
+  md: {
+    button: '32px',
+    icon: '12px'
+  },
+  sm: {
+    button: '24px',
+    icon: '10px'
+  }
+}
+
+export default {
+  name: 'CloseButton',
+  inject: ['$theme', '$colorMode'],
+  props: {
+    size: {
+      type: String,
+      default: 'md',
+      validator: value => value.match(/^(sm|md|lg)$/)
+    },
+    isDisabled: {
+      type: Boolean,
+      default: false
+    },
+    color: {
+      type: String
+    },
+    _ariaLabel: {
+      type: String,
+      default: 'Close'
+    },
+    ...styleProps
+  },
+  render (h) {
+    // Pseudo styles
+    const hoverColor = { light: 'blackAlpha.100', dark: 'whiteAlpha.100' }
+    const activeColor = { light: 'blackAlpha.200', dark: 'whiteAlpha.200' }
+
+    // Size styles
+    const buttonSize = sizes[this.size] && sizes[this.size]['button']
+    const iconSize = sizes[this.size] && sizes[this.size]['icon']
+
+    return h(PseudoBox, {
+      props: {
+        as: 'button',
+        outline: 'none',
+        h: buttonSize,
+        w: buttonSize,
+        disabled: this.isDisabled,
+        _hover: { bg: hoverColor[this.colorMode] },
+        _active: { bg: activeColor[this.colorMode] },
+        ...baseProps,
+        ...forwardProps(this.$props)
+      },
+      attrs: {
+        ariaLabel: this._ariaLabel,
+        ariaDisabled: this.isDisabled
+      }
+    }, [h(Icon, {
+      props: {
+        color: this.color,
+        name: 'close',
+        size: iconSize
+      },
+      attrs: {
+        focusable: false,
+        ariaHidden: true
+      }
+    })])
+  }
+}

src/components/Icon/index.js

@@ -32,7 +32,7 @@ export default {
       type: String,
       required: false,
       default: 'fas',
-      validator: (value) => value.match(/^(fas|fal|fad)$/)
+      validator: value => value.match(/^(fas|fal|fad)$/)
     },
     size: {
       type: [String, Number, Array],

src/components/Toast/index.js

@@ -10,3 +10,4 @@ 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'
+export { default as CloseButton } from '../../components/CloseButton'

src/lib/core/index.js

@@ -73,6 +73,13 @@ const icons = {
       <circle fill="none" strokeMiterlimit="10" cx="12" cy="12" r="11.25" />
     </g>
     `
+  },
+  close: {
+    path: `
+      <path
+        fill="currentColor"
+        d="M.439,21.44a1.5,1.5,0,0,0,2.122,2.121L11.823,14.3a.25.25,0,0,1,.354,0l9.262,9.263a1.5,1.5,0,1,0,2.122-2.121L14.3,12.177a.25.25,0,0,1,0-.354l9.263-9.262A1.5,1.5,0,0,0,21.439.44L12.177,9.7a.25.25,0,0,1-.354,0L2.561.44A1.5,1.5,0,0,0,.439,2.561L9.7,11.823a.25.25,0,0,1,0,.354Z"
+      />`
   }
 }