feat(alert): added alert and alert icon component

Author: codebender828

README.md

@@ -30,6 +30,8 @@ yarn serve
   - [x] Observe theme and set it dynamically in javascript with ease.
 - [x] Provide icons API for icons component
 - [x] Accessibility (Focus) Styling
+- [ ] Make `createContext` API for Kiwi
+  - [ ] This component should return provider and corresponding consumer. Should be used for component creation.
 - [ ] Setup NPM distribution
 - [ ] Set up type system for components with Typescript
 

package.json

@@ -28,6 +28,7 @@
     "register-service-worker": "^1.6.2",
     "style-loader": "^1.0.0",
     "vue": "^2.6.10",
+    "vue-create-context": "^1.1.0",
     "vue-router": "^3.0.3",
     "vue-styled-components": "git+https://github.com/codebender828/vue-styled-components.git"
   },

src/App.vue

@@ -1,33 +1,33 @@
 <template>
   <theme-provider :theme="theme" :icons="$kiwi.icons">
     <div class="root">
-      <IconButton _aria-label="Search" variant-color="blue" mx="3" size="md" icon="star" />
-      <KText as="kbd">Text Component</KText>
+      <div class="wrapper">
+        <Alert mb="1">
+          <AlertIcon />
+          Chakra is going live on August 30th. Get ready!
+        </Alert>
+      </div>
     </div>
   </theme-provider>
 </template>
 
 <script>
-import ThemeProvider from './components/ThemeProvider'
-import { IconButton, Text } from './lib/core/'
-import Badge from './components/Badge'
+import { ThemeProvider, Alert, AlertIcon } from './lib/core/'
 import theme from './lib/theme'
-import { setTimeout } from 'timers'
 
 export default {
   data () {
     return {
       theme,
       element: true,
-      Badge,
       loading: false
     }
   },
   name: 'App',
   components: {
     ThemeProvider,
-    IconButton,
-    KText: Text
+    Alert,
+    AlertIcon
   },
   methods: {
     toggle () {
@@ -59,7 +59,14 @@ body {
   height: 100vh;
   width: 100vw;
   display: flex;
+  flex-direction: column;
   justify-content: center;
   align-items: center;
+
+  .wrapper {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+  }
 }
 </style>

src/components/Alert/alert.styles.js

@@ -0,0 +1,151 @@
+import { colorEmphasis } from '../../lib/utils'
+
+export const statuses = {
+  info: { icon: 'info', color: 'blue' },
+  warning: { icon: 'warning-2', color: 'orange' },
+  success: { icon: 'check-circle', color: 'green' },
+  error: { icon: 'warning', color: 'red' }
+}
+
+const baseProps = {
+  display: 'flex',
+  alignItems: 'center',
+  position: 'relative',
+  overflow: 'hidden',
+  pl: 4,
+  pr: 4,
+  pt: 3,
+  pb: 3
+}
+
+/**
+ * @description Create leftAccent alert styles
+ * @param {Object} props
+ * @property {String} color
+ */
+const leftAccent = props => {
+  const { color } = props
+  return {
+    light: {
+      pl: 3,
+      ...subtle(props).light,
+      borderLeft: '4px',
+      borderColor: `${color}.500`
+    },
+    dark: {
+      pl: 3,
+      ...subtle(props).dark,
+      borderLeft: '4px',
+      borderColor: `${color}.200`
+    }
+  }
+}
+
+/**
+ * @description Create topAccent alert styles
+ * @param {Object} props
+ * @property {String} color
+ */
+const topAccent = props => {
+  const { color } = props
+  return {
+    light: {
+      pt: 2,
+      ...subtle(props).light,
+      borderTop: '4px',
+      borderColor: `${color}.500`
+    },
+    dark: {
+      pt: 2,
+      ...subtle(props).dark,
+      borderTop: '4px',
+      borderColor: `${color}.200`
+    }
+  }
+}
+
+/**
+ * @description Create solid alert styles
+ * @param {Object} props
+ * @property {String} color
+ */
+const solid = ({ color }) => {
+  return {
+    light: { bg: `${color}.500`, color: 'white' },
+    dark: { bg: `${color}.200`, color: 'gray.900' }
+  }
+}
+
+/**
+ * @description Create subtle alert styles
+ * @param {Object} props
+ * @property {String} color
+ */
+const subtle = ({ color, theme: { colors } }) => {
+  let darkBg = colors[color] && colors[color][200]
+  return {
+    light: {
+      bg: `${color}.100`
+    },
+    dark: { bg: colorEmphasis(darkBg, 'lowest') }
+  }
+}
+
+/**
+ * @description Evaluate variant styles
+ * @param {Object} props
+ * @returns {Object} Style props
+ */
+const statusStyleProps = props => {
+  switch (props.variant) {
+    case 'solid':
+      return solid(props)
+    case 'subtle':
+      return subtle(props)
+    case 'topAccent':
+      return topAccent(props)
+    case 'leftAccent':
+      return leftAccent(props)
+    default:
+      return {}
+  }
+}
+
+/**
+ * @description Create styles for alert component
+ * @param {Object} context
+ * @property {String} variant
+ * @property {String} color
+ * @property {String} colorMode
+ * @property {Object} theme
+ * @returns {Object} Style props
+ */
+const useAlertStyle = ({ variant, color, colorMode, theme }) => {
+  const _props = { variant, color, theme }
+  console.log({ _props })
+  return {
+    ...baseProps,
+    ...statusStyleProps(_props)[colorMode]
+  }
+}
+
+/**
+ * @description Create alert icon styles
+ * @param {Object} context
+ * @property {String} variant
+ * @property {String} colorMode
+ * @property {String} color
+ * @returns {Object} Style props
+ */
+export const useAlertIconStyle = ({ variant, colorMode, color }) => {
+  if (['left-accent', 'top-accent', 'subtle'].includes(variant)) {
+    let result = {
+      light: { color: `${color}.500` },
+      dark: { color: `${color}.200` }
+    }
+
+    return result[colorMode]
+  }
+}
+
+export default useAlertStyle

src/components/Alert/index.d.ts

@@ -0,0 +1,14 @@
+import Vue from 'vue'
+
+/**
+ * The alert component for relaying useful information to the UI
+ */
+export const Alert: Vue.Component<{
+  status?: String,
+  variant?: String
+}>;
+
+/**
+ * Icon component for composing alerts
+ */
+export const AlertIcon: Vue.Component<{}>;

src/components/Alert/index.js

@@ -0,0 +1,79 @@
+import { Box, Icon } from '../../lib/core'
+import { baseProps } from '../../lib/config/props'
+import { forwardProps } from '../../lib/utils'
+import useAlertStyle, { useAlertIconStyle } from './alert.styles'
+
+export const statuses = {
+  info: { icon: 'info', color: 'blue' },
+  warning: { icon: 'warning-2', color: 'orange' },
+  success: { icon: 'check-circle', color: 'green' },
+  error: { icon: 'warning', color: 'red' }
+}
+
+const Alert = {
+  name: 'Alert',
+  inject: ['$theme', '$colorMode'],
+  provide () {
+    return {
+      _status: this.status,
+      _variant: this.variant
+    }
+  },
+  props: {
+    status: {
+      type: [String, Array],
+      default: 'info'
+    },
+    variant: {
+      type: [String, Array],
+      default: 'subtle'
+    },
+    ...baseProps
+  },
+  render (h) {
+    const alertStyles = useAlertStyle({
+      variant: this.variant,
+      color: statuses[this.status] && statuses[this.status]['color'],
+      colorMode: this.$colorMode,
+      theme: this.$theme()
+    })
+
+    return h(Box, {
+      props: {
+        ...alertStyles,
+        ...forwardProps(this.$props)
+      },
+      attrs: {
+        role: 'alert'
+      }
+    }, this.$slots.default)
+  }
+}
+
+const AlertIcon = {
+  name: 'AlertIcon',
+  inject: ['_status', '_variant', '$colorMode', '$theme'],
+
+  render (h) {
+    const alertIconStyles = useAlertIconStyle({
+      variant: this._variant,
+      colorMode: this.$colorMode,
+      color: statuses[this._status] && statuses[this._status]['color']
+    })
+
+    return h(Icon, {
+      props: {
+        mr: 3,
+        size: 5,
+        name: statuses[this._status] && statuses[this._status]['icon'],
+        ...alertIconStyles,
+        ...forwardProps(this.$props)
+      },
+      attrs: {
+        focusable: false
+      }
+    })
+  }
+}
+
+export { Alert, AlertIcon }

src/components/IconButton/index.js

@@ -51,7 +51,6 @@ export default {
       ? h(Icon, {
         props: {
           ...baseStyles,
-          focusable: false,
           name: this.icon,
           color: 'currentColor',
           mb: '2px',

src/components/ThemeProvider/index.js

@@ -24,7 +24,7 @@ const ThemeProvider = {
       $icons: this.icons
     }
   },
-  render: function () {
+  render () {
     return this.$slots.default
   }
 }

src/lib/core/index.js

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

src/lib/plugin/iconsPaths.js

@@ -27,6 +27,14 @@ const icons = {
     />
     `
   },
+  info: {
+    path: `
+    <path
+      fill="currentColor"
+      d="M12,0A12,12,0,1,0,24,12,12.013,12.013,0,0,0,12,0Zm.25,5a1.5,1.5,0,1,1-1.5,1.5A1.5,1.5,0,0,1,12.25,5ZM14.5,18.5h-4a1,1,0,0,1,0-2h.75a.25.25,0,0,0,.25-.25v-4.5a.25.25,0,0,0-.25-.25H10.5a1,1,0,0,1,0-2h1a2,2,0,0,1,2,2v4.75a.25.25,0,0,0,.25.25h.75a1,1,0,1,1,0,2Z"
+    />
+    `
+  },
   'question-outline': {
     viewBox: '0 0 24 24',
     path: `