feat(alert): alert description and icons for alert statuses

Author: codebender828

src/App.vue

@@ -2,17 +2,50 @@
   <theme-provider :theme="theme" :icons="$kiwi.icons">
     <div class="root">
       <div class="wrapper">
-        <Alert mb="1">
+
+        <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>
       </div>
     </div>
   </theme-provider>
 </template>
 
 <script>
-import { ThemeProvider, Alert, AlertIcon } from './lib/core/'
+import { ThemeProvider, Alert, AlertIcon, AlertTitle, AlertDescription } from './lib/core/'
 import theme from './lib/theme'
 
 export default {
@@ -27,7 +60,9 @@ export default {
   components: {
     ThemeProvider,
     Alert,
-    AlertIcon
+    AlertIcon,
+    AlertTitle,
+    AlertDescription
   },
   methods: {
     toggle () {

src/components/Alert/index.d.ts

@@ -12,3 +12,8 @@ export const Alert: Vue.Component<{
  * Icon component for composing alerts
  */
 export const AlertIcon: Vue.Component<{}>;
+
+/**
+ * Alert title component for composing alert title.
+ */
+export const AlertTitle: Vue.Component<{}>;

src/components/Alert/index.js

@@ -4,10 +4,10 @@ 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' }
+  info: { icon: '_info', color: 'blue' },
+  warning: { icon: '_warning-2', color: 'orange' },
+  success: { icon: '_check-circle', color: 'green' },
+  error: { icon: '_warning', color: 'red' }
 }
 
 const Alert = {
@@ -38,6 +38,8 @@ const Alert = {
       theme: this.$theme()
     })
 
+    console.log({ alertStyles })
+
     return h(Box, {
       props: {
         ...alertStyles,
@@ -53,6 +55,12 @@ const Alert = {
 const AlertIcon = {
   name: 'AlertIcon',
   inject: ['_status', '_variant', '$colorMode', '$theme'],
+  props: {
+    size: {
+      default: 5
+    },
+    ...baseProps
+  },
 
   render (h) {
     const alertIconStyles = useAlertIconStyle({
@@ -63,8 +71,8 @@ const AlertIcon = {
 
     return h(Icon, {
       props: {
-        mr: 3,
-        size: 5,
+        mr: this.$props.mr || 3,
+        size: this.size,
         name: statuses[this._status] && statuses[this._status]['icon'],
         ...alertIconStyles,
         ...forwardProps(this.$props)
@@ -76,4 +84,30 @@ const AlertIcon = {
   }
 }
 
-export { Alert, AlertIcon }
+const AlertTitle = {
+  name: 'AlertTitle',
+  props: {
+    ...baseProps
+  },
+  render (h) {
+    return h(Box, {
+      props: {
+        fontWeight: 'bold',
+        lineHeight: 'normal',
+        ...forwardProps(this.$props)
+      }
+    }, this.$slots.default)
+  }
+}
+
+const AlertDescription = {
+  name: 'AlertDescription',
+  props: {
+    ...baseProps
+  },
+  render (h) {
+    return h(Box, { props: forwardProps(this.$props) }, this.$slots.default)
+  }
+}
+
+export { Alert, AlertIcon, AlertTitle, AlertDescription }

src/lib/config/props/props.js

@@ -14,6 +14,7 @@ const baseProps = {
   maxH: [String, Array],
   maxHeight: [Number, String, Array],
   d: [String, Array],
+  display: [String, Array],
   lineClamp: [String, Number, Array],
   truncate: [Boolean, Number],
   pt: [Number, String, Array],

src/lib/plugin/iconsPaths.js

@@ -27,14 +27,35 @@ const icons = {
     />
     `
   },
-  info: {
+  _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"
     />
     `
   },
+  '_warning-2': {
+    path: `
+      <path
+        fill="currentColor"
+        d="M23.119,20,13.772,2.15h0a2,2,0,0,0-3.543,0L.881,20a2,2,0,0,0,1.772,2.928H21.347A2,2,0,0,0,23.119,20ZM11,8.423a1,1,0,0,1,2,0v6a1,1,0,1,1-2,0Zm1.05,11.51h-.028a1.528,1.528,0,0,1-1.522-1.47,1.476,1.476,0,0,1,1.448-1.53h.028A1.527,1.527,0,0,1,13.5,18.4,1.475,1.475,0,0,1,12.05,19.933Z"
+      />`
+  },
+  '_check-circle': {
+    path: `
+      <path
+        fill="currentColor"
+        d="M12,0A12,12,0,1,0,24,12,12.014,12.014,0,0,0,12,0Zm6.927,8.2-6.845,9.289a1.011,1.011,0,0,1-1.43.188L5.764,13.769a1,1,0,1,1,1.25-1.562l4.076,3.261,6.227-8.451A1,1,0,1,1,18.927,8.2Z"
+      />`
+  },
+  _warning: {
+    path: `
+      <path
+        fill="currentColor"
+        d="M11.983,0a12.206,12.206,0,0,0-8.51,3.653A11.8,11.8,0,0,0,0,12.207,11.779,11.779,0,0,0,11.8,24h.214A12.111,12.111,0,0,0,24,11.791h0A11.766,11.766,0,0,0,11.983,0ZM10.5,16.542a1.476,1.476,0,0,1,1.449-1.53h.027a1.527,1.527,0,0,1,1.523,1.47,1.475,1.475,0,0,1-1.449,1.53h-.027A1.529,1.529,0,0,1,10.5,16.542ZM11,12.5v-6a1,1,0,0,1,2,0v6a1,1,0,1,1-2,0Z"
+      />`
+  },
   'question-outline': {
     viewBox: '0 0 24 24',
     path: `