feat(components): alert variants

bootwindui · Nov 11, 2023 · 56fb318 · 56fb318
1 parent 9799df2
commit 56fb318
Show file tree

Hide file tree

Showing 3 changed files with 159 additions and 12 deletions.
diff --git a/packages/alert/src/index.tsx b/packages/alert/src/index.tsx
@@ -1,10 +1,11 @@
-import React, { useState } from 'react';
+import React, { ReactNode, useState } from 'react';
 import { GoInfo, GoXCircle, GoCheckCircle } from 'react-icons/go';
 
 interface AlertProps {
   type: 'warning' | 'danger' | 'success' | 'info';
-  title: string;
-  description?: string | React.ReactNode;
+  icon?: boolean | ReactNode
+  title?: string;
+  description?: string | ReactNode;
   actions?: React.ReactNode;
   link?: {
     url: string;
@@ -47,6 +48,7 @@ const classes = {
 const Alert: React.FC<AlertProps> = ({
   type,
   title,
+  icon,
   description,
   actions,
   link,
@@ -55,6 +57,11 @@ const Alert: React.FC<AlertProps> = ({
   const [isDismissed, setIsDismissed] = useState(false);
 
   const getIcon = () => {
+    // Use the provided ReactNode icon in props if exists
+    if (React.isValidElement(icon)) {
+      return icon
+    }
+
     switch (type) {
       case 'warning':
         return (
@@ -91,16 +98,26 @@ const Alert: React.FC<AlertProps> = ({
       className={`rounded-md p-4 ${classes[type].bg}`}
     >
       <div className="flex flex-col md:flex-row">
-        <div className="flex-shrink-0">{getIcon()}</div>
-        <div className="ml-3 flex-1">
-          <h3
-            className={`text-sm font-medium ${classes[type].text}`}
-          >
-            {title}
-          </h3>
+        {icon && (
+          <div className="flex-shrink-0 mr-3">{getIcon()}</div>
+        )}
+        <div className="flex-1">
+
+          {title && (
+            <h3
+              className={`text-sm font-medium ${classes[type].text}`}
+            >
+              {title}
+            </h3>
+          )}
+
+          {/* Create gap between title and desc */}
+          {title && description && <div className='mb-2'></div>}
+
+
           {description && (
             <div
-              className={`mt-2 text-sm ${classes[type].description}`}
+              className={`text-sm ${classes[type].description}`}
             >
               {typeof description === 'string' ? (
                 <p>{description}</p>

diff --git a/packages/alert/stories/Types.stories.tsx b/packages/alert/stories/Types.stories.tsx
@@ -0,0 +1,130 @@
+import React from 'react';
+import { Meta } from '@storybook/react';
+import Alert from '../src/index';
+
+export default {
+  title: 'Components/Alert/Types',
+  component: Alert,
+  argTypes: {},
+} as Meta;
+
+export const WithTitle = () => (
+  <>
+    <div className="mb-5">
+      <Alert
+        type="info"
+        title="With Title"
+        description="Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid pariatur, ipsum similique veniam quo totam eius aperiam dolorum."
+      />
+    </div>
+
+    <Alert
+      type="danger"
+      title="There were 2 errors with your submission"
+      description={
+        <ul role="list" className="list-disc space-y-1 pl-5">
+          <li>Your password must be at least 8 characters</li>
+          <li>
+            Your password must include at least one pro wrestling finishing move
+          </li>
+        </ul>
+      }
+    />
+  </>
+
+);
+
+export const WithoutTitle = () => (
+  <>
+    <div className="mb-5">
+      <Alert
+        type="success"
+        description="Order success"
+      />
+    </div>
+    <div className="mb-5">
+      <Alert
+        type="danger"
+        description="Failed placing your order"
+      />
+    </div>
+    <div className="mb-5">
+      <Alert
+        type="info"
+        description="Hello World!"
+      />
+    </div>
+    <div className="mb-5">
+      <Alert
+        type="warning"
+        description="You have 2 assignments to do"
+      />
+    </div>
+  </>
+);
+export const DismissLink = () => (
+  <>
+    <div className="mb-5">
+      <Alert
+        type="success"
+        dismissButton
+        description="Order success"
+      />
+    </div>
+    <div className="mb-5">
+      <Alert
+        type="danger"
+        dismissButton
+        description="Failed placing your order"
+      />
+    </div>
+    <div className="mb-5">
+      <Alert
+        type="info"
+        dismissButton
+        description="Hello World!"
+      />
+    </div>
+    <div className="mb-5">
+      <Alert
+        type="warning"
+        dismissButton
+        description="You have 2 assignments to do"
+      />
+    </div>
+  </>
+);
+
+export const WithIcon = () => (
+  <>
+    <div className="mb-5">
+      <Alert
+        icon={true}
+        description="A new software update is available. See what’s new in version 2.0.4."
+        type="info"
+        title="Information"
+      />
+    </div>
+    <div className="mb-5">
+      <Alert
+        icon={true}
+        type="warning"
+        description="You have 2 uncompleted assignment"
+      />
+    </div>
+    <div className="mb-5">
+      <Alert
+        icon={true}
+        type="success"
+        description="Order success!"
+      />
+    </div>
+    <div className="mb-5">
+      <Alert
+        icon={true}
+        type="danger"
+        description="Invalid credentials"
+      />
+    </div>
+  </>
+);
diff --git a/packages/alert/stories/Alert.stories.tsx → packages/alert/stories/Variants.stories.tsx b/packages/alert/stories/Alert.stories.tsx → packages/alert/stories/Variants.stories.tsx
@@ -3,7 +3,7 @@ import { Meta } from '@storybook/react';
 import Alert from '../src/index';
 
 export default {
-  title: 'Components/Alert',
+  title: 'Components/Alert/Variants',
   component: Alert,
   argTypes: {},
 } as Meta;