sprint-asia-custom-component 0.1.64 → 0.1.66

package/package.json

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

package/src/components/alert/index.js

@@ -1,6 +1,7 @@
 import React from 'react'
-import { PiInfoFill, PiCheckCircleFill, PiX } from 'react-icons/pi'
+import { PiInfoFill, PiCheckCircleFill, PiX, PiCheck, PiCheckBold, PiXBold } from 'react-icons/pi'
 import OutlineButton from '../button/outlinebutton'
+import PrimaryButton from '../button/primarybutton'
 
 const Alert = ({
     title = "Title", 
@@ -8,6 +9,8 @@ const Alert = ({
     type = "primary",
     titleLeftButton,
     titleRightButton,
+    titleLeftButtonClient,
+    titleRightButtonClient,
     onCloseButton, 
     onClickLeftButton,
     onClickRightButton,
@@ -59,6 +62,18 @@ const Alert = ({
                     <OutlineButton title={titleRightButton} onClick={onClickRightButton} size='small'/>
                 </div>
             }
+            {
+                titleLeftButtonClient &&
+                <div className='m-1'>
+                    <OutlineButton title={titleLeftButtonClient} onClick={onClickLeftButton} size='client approval' icon={<PiXBold />} isIconVisible={true} color="blue" />
+                </div>
+            }
+            {
+                titleRightButtonClient &&
+                <div className='m-1'>
+                    <PrimaryButton title={titleRightButtonClient} onClick={onClickRightButton} size='client approval' icon={<PiCheckBold />} isIconVisible={true} color="blue"/>
+                </div>
+            }
         </div>
         {
             onCloseButton &&

package/src/components/button/outlinebutton/index.js

@@ -1,5 +1,4 @@
 import React, { useState } from 'react';
-import { PiDownloadSimpleDuotone } from 'react-icons/pi';
 
 const OutlineButton = ({
     title = "Button",
@@ -7,6 +6,7 @@ const OutlineButton = ({
     isActive = true,
     size = "large",
     isIconVisible = false,
+    icon = null,
     onClick = () => {}
 }) => {
     const [isPressed, setIsPressed] = useState(false);
@@ -23,34 +23,35 @@ const OutlineButton = ({
         onClick();
     };
 
-  return (
-    <button
-        className={`
-            ${(isPressed && isActive) ? 'bg-white text-primary500 border-2 border-primary500 text-primary500' : (isActive ? 'bg-white border-2 border-primary500 text-primary500' : 'bg-neutral30 text-neutral80 cursor-default')}
-            ${type === "full" && "w-full"}
-            ${size === "small" && "text-sm h-7 w-32"}
-            ${size === "medium" && "text-md h-8"}
-            ${size === "large" && "text-lg h-10"}
-            ${size === "very large" && "text-xl h-12"}
-            ${size === "extra very large" && "text-2xl h-14"}
-            ${size === "detail division" && "text-sm h-10 w-24"}
-            rounded-lg drop-shadow-md text-center py-1.5 px-4 flex justify-center items-center`
-        }
-        disabled={!isActive}
-        onClick={handleClick}
-        onMouseDown={handleButtonPress}
-        onMouseUp={handleButtonRelease}
-        onTouchStart={handleButtonPress}
-        onTouchEnd={handleButtonRelease}
-    >
-        <div className='flex items-center'>
-            {
-                isIconVisible && <PiDownloadSimpleDuotone size={16} className='mr-1'/>
+    return (
+        <button
+            className={`
+                ${(isPressed && isActive) ? 'bg-white text-primary500 border-2 border-primary500' : (isActive ? 'bg-white border-2 border-primary500 text-primary500' : 'bg-neutral30 text-neutral80 cursor-default')}
+                ${type === "full" && "w-full"}
+                ${size === "small" && "text-sm h-7 w-32"}
+                ${size === "medium" && "text-md h-8"}
+                ${size === "large" && "text-lg h-10"}
+                ${size === "very large" && "text-xl h-12"}
+                ${size === "extra very large" && "text-2xl h-14"}
+                ${size === "detail division" && "text-sm h-10 w-24"}
+                ${size === "client approval" && "text-sm h-8"}
+                rounded-lg drop-shadow-md text-center py-1.5 px-4 flex justify-center items-center`
             }
-            <p>{title}</p>
-        </div>
-    </button>
-  );
+            disabled={!isActive}
+            onClick={handleClick}
+            onMouseDown={handleButtonPress}
+            onMouseUp={handleButtonRelease}
+            onTouchStart={handleButtonPress}
+            onTouchEnd={handleButtonRelease}
+        >
+            <div className='flex items-center'>
+                {
+                    isIconVisible && icon && <span className='mr-1'>{icon}</span>
+                }
+                <p>{title}</p>
+            </div>
+        </button>
+    );
 };
 
-export default OutlineButton;
+export default OutlineButton;

package/src/components/button/primarybutton/index.js

@@ -5,6 +5,8 @@ const PrimaryButton = ({
     type = "wrap",
     isActive = true,
     size = "large",
+    isIconVisible = false,
+    icon = null,
     onClick = () => {}
 }) => {
     const [isPressed, setIsPressed] = useState(false);
@@ -32,6 +34,7 @@ const PrimaryButton = ({
             ${size === "very large" && "text-xl h-12"}
             ${size === "extra very large" && "text-2xl h-14"}
             ${size === "detail division" && "text-sm h-10"}
+            ${size === "client approval" && "text-sm h-8"}
             rounded-lg drop-shadow-md text-center py-1.5 px-4 flex justify-center items-center`
         }
         disabled={!isActive}
@@ -41,7 +44,12 @@ const PrimaryButton = ({
         onTouchStart={handleButtonPress}
         onTouchEnd={handleButtonRelease}
     >
-        {title}
+        <div className='flex items-center'>
+                {
+                    isIconVisible && icon && <span className='mr-1'>{icon}</span>
+                }
+                <p>{title}</p>
+            </div>
     </button>
   );
 };

package/src/components/chip/index.js

@@ -16,7 +16,7 @@ const Chip = ({
             ${type == "danger" && "text-danger800 border-danger800 bg-danger50"} 
             ' rounded-full text-xs border-2 flex items-center px-3.5`}>
 
-            <div className='flex items-center'>
+            <div className='flex items-center justify-center'>
                 <p className='py-1 text-center'>{title}</p>
                 {
                     type == "dropdown" && <p className='text-md pl-2 cursor-pointer' onClick={onClick}>x</p>

package/src/templates/index.js

@@ -863,6 +863,9 @@ const Templates = () => {
         <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" titleRightButton="Add Division" onClickLeftButton={() => console.log("left button clicked")} onClickRightButton={() => console.log("right button clicked")}/>
         </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.' titleLeftButtonClient="Reject" titleRightButtonClient="Approve" onClickLeftButton={() => console.log("left button clicked")} onClickRightButton={() => console.log("right button clicked")}/>
+        </div>
         {
           isOpenAlert &&
           <div className='w-full py-3'>