feat: add showIcon to show default icon

Author: bishalshrestha013

apps/demo/src/Views/Ui/components/Message.tsx

@@ -1,9 +1,51 @@
 import { useTranslation } from "@dzangolab/react-i18n";
-import { Button, Message, Page } from "@dzangolab/react-ui";
+import { Button, Message, Page, TDataTable } from "@dzangolab/react-ui";
 import { useNavigate } from "react-router-dom";
 
 import { CodeBlock, Section } from "../../../components/Demo";
 
+const data = [
+  {
+    default: "false",
+    description:
+      "Displays a close icon if true, allowing the message to be dismissed.",
+    prop: "enableClose",
+    type: "boolean",
+  },
+  {
+    default: "-",
+    description: "Icon to display alongside the message.",
+    prop: "icon",
+    type: "string | ReactNode	",
+  },
+  {
+    default: "-",
+    description: "The message text to display in the component.",
+    prop: "message",
+    type: "string",
+  },
+  {
+    default: "-",
+    description: "Function to be called when the message is closed.",
+    prop: "onClose",
+    type: "() => void",
+  },
+  {
+    default: "info",
+    description:
+      "Defines the styling severity of the message. Defaults to 'info'.",
+    prop: "severity",
+    type: `"info" | "success" | "warning" | "danger"`,
+  },
+  {
+    default: "true",
+    description:
+      "Show default icon based on severity or custom icon if provided.",
+    prop: "showIcon",
+    type: "boolean",
+  },
+];
+
 export const MessageDemo = () => {
   const [t] = useTranslation("ui");
   const navigate = useNavigate();
@@ -80,6 +122,30 @@ export const MessageDemo = () => {
 <Message message="Danger Message" severity="danger" />'
         />
       </Section>
+      <Section
+        title={t("headers.propertiesValue", {
+          value: "IButtonProperties",
+        })}
+      >
+        <TDataTable
+          columns={[
+            {
+              accessorKey: "prop",
+              header: "Properties",
+            },
+            {
+              accessorKey: "type",
+              header: "Type",
+            },
+            {
+              accessorKey: "description",
+              header: "Description",
+            },
+          ]}
+          data={data}
+          paginated={false}
+        />
+      </Section>
     </Page>
   );
 };

packages/ui/src/Message/index.tsx

@@ -2,10 +2,11 @@ import { ReactNode, useState } from "react";
 
 type MessageProperties = {
   enableClose?: boolean;
+  icon?: string | ReactNode;
   message: string;
   onClose?: () => void;
-  icon?: string | ReactNode;
   severity?: "info" | "success" | "warning" | "danger";
+  showIcon?: boolean;
 };
 
 const Message = ({
@@ -14,9 +15,17 @@ const Message = ({
   message,
   icon,
   severity = "info",
+  showIcon = true,
 }: MessageProperties) => {
   const [showMessage, setShowMessage] = useState(true);
 
+  const defaultSeverityIcons = {
+    info: "pi pi-info-circle",
+    success: "pi pi-check-circle",
+    warning: "pi pi-exclamation-triangle",
+    danger: "pi pi-times-circle",
+  };
+
   const handleClose = () => {
     setShowMessage(false);
     if (onClose) {
@@ -31,14 +40,20 @@ const Message = ({
   const renderIcon = () => {
     return (
       <span className="icon" data-testid="icon">
-        {typeof icon === "string" ? <i className={icon} /> : icon}
+        {!icon ? (
+          <i className={defaultSeverityIcons[severity]} />
+        ) : typeof icon === "string" ? (
+          <i className={icon} />
+        ) : (
+          icon
+        )}
       </span>
     );
   };
 
   return (
     <div className={`message ${severity}`}>
-      {icon && renderIcon()}
+      {showIcon && renderIcon()}
       <span className="message-content">{message}</span>
       {enableClose && (
         <span className="close-message" onClick={handleClose}>