sprint-asia-custom-component 0.1.35 → 0.1.36

package/dist/index.js

@@ -143,28 +143,38 @@
     }), /*#__PURE__*/React__default["default"].createElement("p", null, title)));
   };
 
-  const Alert = _ref => {
-    let {
-      title = "Title",
-      subtitle = "Subtitle",
-      type = "primary",
-      titleLeftButton,
-      titleRightButton,
-      onClickLeftButton,
-      onClickRightButton
-    } = _ref;
+  const Alert = ({
+    title = "Title",
+    subtitle = "Subtitle",
+    type = "primary",
+    titleLeftButton,
+    titleRightButton,
+    onCloseButton,
+    onClickLeftButton,
+    onClickRightButton
+  }) => {
     return /*#__PURE__*/React__default["default"].createElement("div", {
-      className: "\n        ".concat(type === "primary" && "bg-primary50 border-primary600", " \n        ").concat(type === "warning" && "bg-warning50 border-warning800", " \n        ").concat(type === "success" && "bg-success50 border-success600", " \n        ").concat(type === "danger" && "bg-danger50 border-danger500", " \n        w-full flex justify-between p-3 border rounded-md")
+      className: `
+        ${type === "primary" && "bg-primary50 border-primary600"} 
+        ${type === "warning" && "bg-warning50 border-warning800"} 
+        ${type === "success" && "bg-success50 border-success600"} 
+        ${type === "danger" && "bg-danger50 border-danger500"} 
+        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, type === "success" ? /*#__PURE__*/React__default["default"].createElement(PiCheckCircleFill, {
       size: "24",
       variant: "Bold",
-      className: "\n                            ".concat(type === "success" && "text-success600", " mr-2")
+      className: `
+                            ${type === "success" && "text-success600"} mr-2`
     }) : /*#__PURE__*/React__default["default"].createElement(PiInfoFill, {
       size: "24",
       variant: "Bold",
-      className: "\n                            ".concat(type === "primary" && "text-primary600", "\n                            ").concat(type === "warning" && "text-warning800", "\n                            ").concat(type === "danger" && "text-danger500", " \n                            mr-2")
+      className: `
+                            ${type === "primary" && "text-primary600"}
+                            ${type === "warning" && "text-warning800"}
+                            ${type === "danger" && "text-danger500"} 
+                            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", {
@@ -183,6 +193,14 @@
       title: titleRightButton,
       onClick: onClickRightButton,
       size: "small"
+    }))), onCloseButton && /*#__PURE__*/React__default["default"].createElement("div", {
+      className: "flex"
+    }, /*#__PURE__*/React__default["default"].createElement("div", {
+      onClick: onCloseButton
+    }, /*#__PURE__*/React__default["default"].createElement(PiX, {
+      size: "16",
+      variant: "Bold",
+      className: "text-neutral300 cursor-pointer"
     }))));
   };
 
@@ -23995,14 +24013,12 @@
     options = [{
       option: "Name 1",
       value: "Value 1"
-    }, {
-      option: "Name 2",
-      value: "Value 2"
     }],
     onSelect,
     title = "Title Dropdown",
     placeholder = "Placeholder",
     isRequired = true,
+    isEdited = true,
     currentOption = {
       option: "Name 1",
       value: "Value 1"
@@ -24050,8 +24066,8 @@
       className: "rounded-md shadow-sm"
     }, /*#__PURE__*/React__default["default"].createElement("button", {
       type: "button",
-      className: "flex items-center w-full py-2.5 text-left px-4 bg-neutral20 border-neutral50 font-normal text-sm text-neutral300 rounded-md border focus:outline-none overflow-hidden",
-      onClick: handleToggleDropdownText
+      className: `${isEdited ? "bg-neutral20 cursor-pointer" : "bg-neutral30 cursor-not-allowed"} flex items-center w-full py-2.5 text-left px-4 border-neutral50 font-normal text-sm text-neutral300 rounded-md border focus:outline-none overflow-hidden`,
+      onClick: () => isEdited && handleToggleDropdownText()
     }, /*#__PURE__*/React__default["default"].createElement("span", {
       className: "flex-grow overflow-hidden"
     }, selectedOption ? selectedOption : currentOption.option ? currentOption.option : placeholder), /*#__PURE__*/React__default["default"].createElement("span", {
@@ -24062,7 +24078,7 @@
     }) : /*#__PURE__*/React__default["default"].createElement(PiCaretDown, {
       size: 16,
       className: "text-neutral300"
-    }))))), isOpen && /*#__PURE__*/React__default["default"].createElement("div", {
+    }))))), isOpen && isEdited && /*#__PURE__*/React__default["default"].createElement("div", {
       className: "z-10 origin-top-right 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",
       "aria-orientation": "vertical",

package/package.json

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

package/src/components/alert/index.js

@@ -1,5 +1,5 @@
 import React from 'react'
-import { PiInfoFill, PiCheckCircleFill } from 'react-icons/pi'
+import { PiInfoFill, PiCheckCircleFill, PiX } from 'react-icons/pi'
 import OutlineButton from '../button/outlinebutton'
 
 const Alert = ({
@@ -8,6 +8,7 @@ const Alert = ({
     type = "primary",
     titleLeftButton,
     titleRightButton,
+    onCloseButton, 
     onClickLeftButton,
     onClickRightButton,
 }) => {
@@ -59,6 +60,18 @@ const Alert = ({
                 </div>
             }
         </div>
+        {
+            onCloseButton &&
+            <div className='flex'>
+                <div onClick={onCloseButton}>
+                    <PiX 
+                        size="16"
+                        variant="Bold"
+                        className="text-neutral300 cursor-pointer"
+                    />
+                </div>
+            </div>
+        }
     </div>
   )
 }

package/src/components/dropdown/dropdownText/index.js

@@ -6,16 +6,13 @@ const DropdownText = ({
         {
             option: "Name 1",
             value: "Value 1"
-        },
-        {
-            option: "Name 2",
-            value: "Value 2"
         }
     ],
     onSelect,
     title = "Title Dropdown",
     placeholder = "Placeholder",
     isRequired = true,
+    isEdited = true,
     currentOption = {option : "Name 1", value:"Value 1"},
 }) => {
     const [isOpen, setIsOpen] = useState(false);
@@ -64,8 +61,8 @@ const DropdownText = ({
             <span className='rounded-md shadow-sm'>
                 <button
                     type='button'
-                    className="flex items-center w-full py-2.5 text-left px-4 bg-neutral20 border-neutral50 font-normal text-sm text-neutral300 rounded-md border focus:outline-none overflow-hidden"
-                    onClick={handleToggleDropdownText}
+                    className={`${isEdited ? "bg-neutral20 cursor-pointer" : "bg-neutral30 cursor-not-allowed"} flex items-center w-full py-2.5 text-left px-4 border-neutral50 font-normal text-sm text-neutral300 rounded-md border focus:outline-none overflow-hidden`}
+                    onClick={() => isEdited && handleToggleDropdownText()}
                 >
                     <span className='flex-grow overflow-hidden'>{selectedOption ? selectedOption : currentOption.option ? currentOption.option : placeholder}</span>
                     <span className='ml-2'>
@@ -75,7 +72,7 @@ const DropdownText = ({
             </span>
         </div>
 
-        {isOpen && (
+        {isOpen && isEdited && (
             <div
                 className='z-10 origin-top-right 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'

package/src/templates/index.js

@@ -104,6 +104,7 @@ const Templates = () => {
   ]);
 
   const [isOpen, setIsOpen] = useState(false);
+  const [isOpenAlert, setIsOpenAlert] = useState(true);
 
   const toggleOpen = () => setIsOpen(!isOpen);
 
@@ -756,6 +757,13 @@ 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>
+        {
+          isOpenAlert &&
+          <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.' onCloseButton={() => setIsOpenAlert(false)}/>
+          </div>
+        }
+
 
         <div className='m-9'></div>
         <p className='text-black font-bold text-2xl text-center py-2'>Primary Button</p>
@@ -925,6 +933,16 @@ const Templates = () => {
           title="Select an Option"
         />
 
+        <div className='m-9'></div>
+        <DropdownText
+          options={options}
+          currentOption={currentOption}
+          onSelectName={handleSelectName}
+          onSelectValue={handleSelectValue}
+          isEdited={false}
+          title="Cannot Edit"
+        />
+
         <div className='m-9'></div>
         <p className='text-black font-bold text-2xl text-center py-2'>Dropzone</p>
         <DropzoneUploadFile