fix: add actions props to Alert component

Author: joshenlim

src/components/Alert/Alert.stories.tsx

@@ -79,6 +79,13 @@ export const Closable = (args: any) => (
   </Alert>
 )
 
+export const WithAction = (args: any) => (
+  <Alert {...args}>
+    Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur amet
+    labore.
+  </Alert>
+)
+
 Neutral.args = {
   title: 'Success alert with icon',
   withIcon: true,
@@ -132,3 +139,10 @@ Closable.args = {
   title: 'Closable alert',
   closable: true,
 }
+
+WithAction.args = {
+  title: 'Alert with action',
+  variant: 'warning',
+  withIcon: true,
+  actions: <div>Hello</div>,
+}

src/components/Alert/Alert.tsx

@@ -18,6 +18,7 @@ interface Props {
   closable?: boolean
   children?: React.ReactNode
   icon?: React.ReactNode
+  actions?: React.ReactNode
 }
 
 const icons: Record<
@@ -39,6 +40,7 @@ function Alert({
   closable,
   children,
   icon,
+  actions,
 }: Props) {
   let __styles = styleHandler('alert')
 
@@ -59,30 +61,33 @@ function Alert({
     <>
       {visible && (
         <div className={containerClasses.join(' ')}>
-          {withIcon ? (
-            <div className={__styles.variant[variant].icon}>
-              {withIcon && icons[variant]}
+          <div className="flex space-x-4">
+            {withIcon ? (
+              <div className={__styles.variant[variant].icon}>
+                {withIcon && icons[variant]}
+              </div>
+            ) : null}
+            {icon && icon}
+            <div>
+              <h3
+                className={[
+                  __styles.variant[variant].header,
+                  __styles.header,
+                ].join(' ')}
+              >
+                {title}
+              </h3>
+              <div className={descriptionClasses.join(' ')}>{children}</div>
             </div>
-          ) : null}
-          {icon && icon}
-          <div>
-            <h3
-              className={[
-                __styles.variant[variant].header,
-                __styles.header,
-              ].join(' ')}
-            >
-              {title}
-            </h3>
-            <div className={descriptionClasses.join(' ')}>{children}</div>
           </div>
+          {actions}
           {closable && (
             <button
               aria-label="Close alert"
               onClick={() => setVisible(false)}
               className={closeButtonClasses.join(' ')}
             >
-              <IconX strokeWidth={1.5} size={14} />
+              <IconX strokeWidth={2} size={16} />
             </button>
           )}
         </div>

src/lib/theme/defaultTheme.ts

@@ -252,11 +252,8 @@ export default {
 
   alert: {
     base: `
-      relative
-      rounded 
-      py-4 px-6 
-      flex space-x-4 items-start 
-      border
+      relative rounded border py-4 px-6 
+      flex justify-between space-x-4 items-start 
     `,
     header: 'block text-sm font-normal mb-1',
     description: `text-xs`,