sprint-asia-custom-component 0.1.25 → 0.1.26

package/dist/index.js

@@ -146,19 +146,26 @@
   const Alert = ({
     title = "Title",
     subtitle = "Subtitle",
+    type = "primary",
     titleLeftButton,
     titleRightButton,
     onClickLeftButton,
     onClickRightButton
   }) => {
     return /*#__PURE__*/React__default["default"].createElement("div", {
-      className: "w-full flex justify-between p-3 bg-primary50 border border-primary600 rounded-md"
+      className: `
+        ${type === "primary" && "bg-primary50 border-primary600"} 
+        ${type === "warning" && "bg-warning50 border-warning600"} 
+        ${type === "danger" && "bg-danger50 border-danger600"} w-full flex justify-between p-3 border rounded-md`
     }, /*#__PURE__*/React__default["default"].createElement("div", {
       className: "w-full flex"
     }, /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement(PiInfoFill, {
       size: "24",
       variant: "Bold",
-      className: "text-primary600 mr-2"
+      className: `
+                        ${type === "primary" && "text-primary600"}
+                        ${type === "warning" && "text-warning600"}
+                        ${type === "danger" && "text-danger600"} mr-2`
     })), /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement("p", {
       className: "text-md font-semibold text-black"
     }, title), /*#__PURE__*/React__default["default"].createElement("p", {
@@ -23789,7 +23796,10 @@
   const Description = ({
     title = "Title",
     value = "Description",
-    textColor = "default"
+    textColor = "default",
+    subtitle,
+    linkSubtitle,
+    onClickSubtitle
   }) => {
     return /*#__PURE__*/React__default["default"].createElement("div", {
       className: "w-full"
@@ -23802,7 +23812,14 @@
               ${textColor == "default" && "text-black font-semibold text-base"} 
               ${textColor == "success" && "text-success500 font-semibold text-base"} 
             `
-    }, value)));
+    }, value)), subtitle && /*#__PURE__*/React__default["default"].createElement("div", {
+      className: "flex items-center mt-1"
+    }, /*#__PURE__*/React__default["default"].createElement("p", {
+      className: "text-sm font-normal text-black mr-1"
+    }, subtitle), linkSubtitle && /*#__PURE__*/React__default["default"].createElement("p", {
+      className: "m-0 text-sm font-semibold text-primary500 cursor-pointer",
+      onClick: onClickSubtitle
+    }, linkSubtitle)));
   };
 
   const DropdownCard = ({
@@ -46590,14 +46607,14 @@
     }, /*#__PURE__*/React__default["default"].createElement("div", {
       className: "flex items-center h-full"
     }, /*#__PURE__*/React__default["default"].createElement("div", {
-      className: "relative cursor-pointer border-neutral50 border-t border-b border-l rounded-tl-md rounded-bl-md",
+      className: `${filterSearch ? "border-black" : "border-neutral50"} relative cursor-pointer border-t border-b border-l rounded-tl-md rounded-bl-md`,
       onClick: () => setIsOpen(!isOpen)
     }, /*#__PURE__*/React__default["default"].createElement("div", {
       className: "flex items-center bg-white rounded-tl-md rounded-bl-md"
     }, /*#__PURE__*/React__default["default"].createElement("p", {
       className: "flex items-center w-full py-2.5 text-left pl-4 pr-4 bg-white rounded-md font-bold text-sm text-neutral300"
     }, filterDropdown), isOpen ? /*#__PURE__*/React__default["default"].createElement(PiCaretUp, null) : /*#__PURE__*/React__default["default"].createElement(PiCaretDown, null), /*#__PURE__*/React__default["default"].createElement("p", {
-      className: "text-neutral50 ml-3"
+      className: `${filterSearch ? "text-black" : "text-neutral50"} ml-3`
     }, "|")), isOpen && /*#__PURE__*/React__default["default"].createElement("div", {
       className: "z-10 origin-top-left absolute left-0 mt-2 w-full rounded-md shadow-md bg-white ring-1 ring-black ring-opacity-5 focus:outline-none overflow-hidden",
       role: "menu",
@@ -46616,7 +46633,7 @@
     }, option)))) : /*#__PURE__*/React__default["default"].createElement("div", {
       className: "text-sm font-normal text-black flex justify-center"
     }, /*#__PURE__*/React__default["default"].createElement("p", null, "Data Not Available"))))), /*#__PURE__*/React__default["default"].createElement("div", {
-      className: "relative border-neutral50 border-t border-b border-r rounded-tr-md rounded-br-md"
+      className: `${filterSearch ? "border-black" : "border-neutral50"} relative border-t border-b border-r rounded-tr-md rounded-br-md`
     }, /*#__PURE__*/React__default["default"].createElement("div", {
       className: "flex items-center bg-white rounded-tr-md rounded-br-md focus:outline-none"
     }, /*#__PURE__*/React__default["default"].createElement(PiMagnifyingGlass, {
@@ -46697,7 +46714,7 @@
       className: "flex"
     }, /*#__PURE__*/React__default["default"].createElement("button", {
       type: "button",
-      className: "flex items-center w-60 text-left px-4 bg-white border-neutral50 font-normal text-sm text-neutral300 rounded-md border focus:outline-none"
+      className: `${dataFilterCheckbox.length + dataFilterStatus.length > 0 ? "border-black text-black" : "border-neutral50 text-neutral300"} flex items-center w-60 text-left px-4 bg-white font-normal text-sm rounded-md border focus:outline-none`
     }, /*#__PURE__*/React__default["default"].createElement("span", {
       className: "flex-grow py-2.5",
       onClick: () => setShowFilterMenu(!showFilterMenu)
@@ -46706,7 +46723,7 @@
       onClick: handleResetFilter
     }, /*#__PURE__*/React__default["default"].createElement(PiX, {
       size: 16,
-      className: "text-neutral300"
+      className: "text-black"
     })) : /*#__PURE__*/React__default["default"].createElement("span", {
       className: "ml-2"
     }, /*#__PURE__*/React__default["default"].createElement(PiFunnel, {
@@ -46785,9 +46802,9 @@
     onClickRightButton
   }) => {
     return /*#__PURE__*/React__default["default"].createElement("div", {
-      className: "sticky bottom-0 flex w-full justify-end items-center py-1 px-6 bg-white"
+      className: "fixed bottom-0 flex justify-end w-full items-center py-1 px-6 bg-white"
     }, /*#__PURE__*/React__default["default"].createElement("div", {
-      className: "flex items-center"
+      className: "flex items-center mr-48"
     }, /*#__PURE__*/React__default["default"].createElement("div", {
       className: "m-1"
     }, /*#__PURE__*/React__default["default"].createElement(OutlineButton, {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "sprint-asia-custom-component",
   "main": "dist/index.js",
-  "version": "0.1.25",
+  "version": "0.1.26",
   "private": false,
   "dependencies": {
     "@headlessui/react": "^1.7.18",

package/src/components/alert/index.js

@@ -5,19 +5,26 @@ import OutlineButton from '../button/outlinebutton'
 const Alert = ({
     title = "Title", 
     subtitle = "Subtitle",
+    type = "primary",
     titleLeftButton,
     titleRightButton,
     onClickLeftButton,
     onClickRightButton,
 }) => {
   return (
-    <div className='w-full flex justify-between p-3 bg-primary50 border border-primary600 rounded-md'>
+    <div className={`
+        ${type === "primary" && "bg-primary50 border-primary600"} 
+        ${type === "warning" && "bg-warning50 border-warning600"} 
+        ${type === "danger" && "bg-danger50 border-danger600"} w-full flex justify-between p-3 border rounded-md`}>
         <div className='w-full flex'>
             <div>
                 <PiInfoFill
                     size="24"
                     variant="Bold"
-                    className="text-primary600 mr-2"
+                    className={`
+                        ${type === "primary" && "text-primary600"}
+                        ${type === "warning" && "text-warning600"}
+                        ${type === "danger" && "text-danger600"} mr-2`}
                 />
             </div>
             <div>

package/src/components/description/index.js

@@ -4,6 +4,9 @@ const Description = ({
     title = "Title",
     value = "Description",
     textColor = "default",
+    subtitle,
+    linkSubtitle,
+    onClickSubtitle
 }) => {
   return (
     <div className='w-full'>
@@ -14,6 +17,15 @@ const Description = ({
               ${textColor == "success" && "text-success500 font-semibold text-base"} 
             `}>{value}</p>
         </div>
+        {subtitle && 
+          <div className='flex items-center mt-1'>
+            <p className="text-sm font-normal text-black mr-1">{subtitle}</p>
+            {
+              linkSubtitle &&
+              <p className='m-0 text-sm font-semibold text-primary500 cursor-pointer' onClick={onClickSubtitle}>{linkSubtitle}</p>
+            }
+          </div>
+        }
     </div>
   );
 };

package/src/components/filter/filterDropdown/index.js

@@ -88,13 +88,13 @@ const FilterDropdown = ({
                         <div className='flex'>
                             <button
                                 type='button'
-                                className="flex items-center w-60 text-left px-4 bg-white border-neutral50 font-normal text-sm text-neutral300 rounded-md border focus:outline-none"
+                                className={`${dataFilterCheckbox.length + dataFilterStatus.length > 0 ? "border-black text-black" : "border-neutral50 text-neutral300"} flex items-center w-60 text-left px-4 bg-white font-normal text-sm rounded-md border focus:outline-none`}
                             >
                                 <span className='flex-grow py-2.5' onClick={() => setShowFilterMenu(!showFilterMenu)}>{buttonText}</span>
                                 {
                                     dataFilterCheckbox.length + dataFilterStatus.length > 0 ?
                                     <span className='ml-2' onClick={handleResetFilter}>
-                                        <PiX size={16} className='text-neutral300' />
+                                        <PiX size={16} className='text-black' />
                                     </span>
                                     :
                                     <span className='ml-2'>

package/src/components/footer/index.js

@@ -11,8 +11,8 @@ const Footer = ({
     onClickRightButton
 }) => {
   return (
-    <div className='sticky bottom-0 flex w-full justify-end items-center py-1 px-6 bg-white'>
-        <div className='flex items-center'>
+    <div className='fixed bottom-0 flex justify-end w-full items-center py-1 px-6 bg-white'>
+        <div className='flex items-center mr-48'>
             <div className='m-1'>
                 <OutlineButton 
                     title={titleLeftButton}

package/src/components/searchdropdown/index.js

@@ -30,13 +30,13 @@ const SearchDropdown = ({
     return (
       <div className='relative inline-block text-left w-full' ref={dropdownRef}>
         <div className='flex items-center h-full'>
-          <div className="relative cursor-pointer border-neutral50 border-t border-b border-l rounded-tl-md rounded-bl-md" onClick={() => setIsOpen(!isOpen)}>
+          <div className={`${filterSearch ? "border-black" : "border-neutral50"} relative cursor-pointer border-t border-b border-l rounded-tl-md rounded-bl-md`} onClick={() => setIsOpen(!isOpen)}>
             <div className='flex items-center bg-white rounded-tl-md rounded-bl-md'>
               <p className="flex items-center w-full py-2.5 text-left pl-4 pr-4 bg-white rounded-md font-bold text-sm text-neutral300">{filterDropdown}</p>
               {
                 isOpen ? <PiCaretUp /> : <PiCaretDown />
               }
-              <p className='text-neutral50 ml-3'>|</p>
+              <p className={`${filterSearch ? "text-black" : "text-neutral50"} ml-3`}>|</p>
             </div>
             {isOpen && (
               <div
@@ -68,7 +68,7 @@ const SearchDropdown = ({
             </div>
           )}
           </div>
-          <div className="relative border-neutral50 border-t border-b border-r rounded-tr-md rounded-br-md">
+          <div className={`${filterSearch ? "border-black" : "border-neutral50"} relative border-t border-b border-r rounded-tr-md rounded-br-md`}>
             <div className='flex items-center bg-white rounded-tr-md rounded-br-md focus:outline-none'>
                 <PiMagnifyingGlass className="absolute left-3 top-1/2 transform -translate-y-1/2 text-neutral50 w-4 h-4" />
                 <input

package/src/templates/index.js

@@ -728,9 +728,15 @@ const Templates = () => {
     <div>
         <div className='m-9'></div>
         <p className='text-black font-semibold text-xl text-left py-1'>Alert</p>
-        <div className='w-full'>
+        <div className='w-full py-3'>
             <Alert title='Client & Division Reminder' subtitle='Please ensure you have created the appropriate Client and division for the user before proceeding.'/>
         </div>
+        <div className='w-full py-3'>
+            <Alert title='Client & Division Reminder' subtitle='Please ensure you have created the appropriate Client and division for the user before proceeding.' type='warning'/>
+        </div>
+        <div className='w-full py-3'>
+            <Alert title='Client & Division Reminder' subtitle='Please ensure you have created the appropriate Client and division for the user before proceeding.' type='danger'/>
+        </div>
         <div className='w-full py-3'>
             <Alert title='Client & Division Reminder' subtitle='Please ensure you have created the appropriate Client and division for the user before proceeding.' titleLeftButton="Add Client" onClickLeftButton={() => console.log("left button clicked")}/>
         </div>