sprint-asia-custom-component 0.1.52 → 0.1.54

package/dist/index.js

@@ -24043,6 +24043,8 @@
     placeholder = "Placeholder",
     isRequired = true,
     isEdited = true,
+    mode = "default",
+    footer = null,
     currentOption = {
       option: "Name 1",
       value: "Value 1"
@@ -24090,7 +24092,11 @@
       className: "rounded-md shadow-sm"
     }, /*#__PURE__*/React__default["default"].createElement("button", {
       type: "button",
-      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`,
+      className: `
+                        ${isEdited == false && "bg-neutral30 cursor-not-allowed"} 
+                        ${mode == "default" && "border-neutral50 bg-neutral20 cursor-pointer"} 
+                        ${mode == "danger" && "border-danger500 bg-danger50 cursor-pointer"} 
+                        flex items-center w-full py-2.5 text-left px-4 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"
@@ -24119,7 +24125,18 @@
       }
     }, /*#__PURE__*/React__default["default"].createElement("p", {
       className: "text-sm text-black"
-    }, option.option))))));
+    }, option.option))))), footer && /*#__PURE__*/React__default["default"].createElement("div", {
+      className: "mt-1"
+    }, mode === "danger" ? /*#__PURE__*/React__default["default"].createElement("div", {
+      className: "flex"
+    }, /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement(PiInfo, {
+      size: 16,
+      className: "text-danger500"
+    })), /*#__PURE__*/React__default["default"].createElement("p", {
+      className: "text-danger500 text-xs ml-1"
+    }, footer)) : /*#__PURE__*/React__default["default"].createElement("p", {
+      className: "text-black text-xs"
+    }, footer)));
   };
 
   function _extends$2() {
@@ -25914,7 +25931,8 @@
     required = false,
     onDrop,
     maxFiles = 1,
-    selectedFile
+    selectedFile,
+    error = ""
   }) => {
     const [errorMessage, setErrorMessage] = React.useState("");
     const onDropRejected = rejectedFiles => {
@@ -25950,7 +25968,7 @@
     }, /*#__PURE__*/React__default["default"].createElement("div", _extends$2({}, getRootProps({
       className: "dropzone"
     }), {
-      className: "bg-neutral20 w-full h-28 rounded-lg border-2 border-neutral50 border-dashed"
+      className: `bg-neutral20 w-full h-28 rounded-lg border-2 ${error ? "border-danger500" : "border-neutral50"} border-dashed`
     }), /*#__PURE__*/React__default["default"].createElement("input", _extends$2({}, getInputProps(), {
       required: required
     })), /*#__PURE__*/React__default["default"].createElement("div", {
@@ -25971,7 +25989,9 @@
       className: "text-neutral300"
     })), /*#__PURE__*/React__default["default"].createElement("p", {
       className: "text-sm text-black mt-2"
-    }, selectedFile?.name)))))), /*#__PURE__*/React__default["default"].createElement("p", {
+    }, selectedFile?.name)))))), error && /*#__PURE__*/React__default["default"].createElement("p", {
+      className: "text-danger500 text-xs mt-1"
+    }, error), /*#__PURE__*/React__default["default"].createElement("p", {
       className: "text-xs text-neutral300 mt-1"
     }, subtitle));
   };

package/package.json

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

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

@@ -1,5 +1,5 @@
 import React, { useState, useEffect, useRef } from 'react';
-import { PiCaretDown, PiCaretUp } from 'react-icons/pi';
+import { PiCaretDown, PiCaretUp, PiInfo } from 'react-icons/pi';
 
 const DropdownText = ({ 
     options = [
@@ -13,6 +13,8 @@ const DropdownText = ({
     placeholder = "Placeholder",
     isRequired = true,
     isEdited = true,
+    mode = "default",
+    footer = null,
     currentOption = {option : "Name 1", value:"Value 1"},
 }) => {
     const [isOpen, setIsOpen] = useState(false);
@@ -61,7 +63,11 @@ const DropdownText = ({
             <span className='rounded-md shadow-sm'>
                 <button
                     type='button'
-                    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`}
+                    className={`
+                        ${isEdited == false && "bg-neutral30 cursor-not-allowed"} 
+                        ${mode == "default" && "border-neutral50 bg-neutral20 cursor-pointer"} 
+                        ${mode == "danger" && "border-danger500 bg-danger50 cursor-pointer"} 
+                        flex items-center w-full py-2.5 text-left px-4 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>
@@ -96,6 +102,21 @@ const DropdownText = ({
                 </div>
             </div>
         )}
+
+        {footer && (
+            <div className='mt-1'>
+                {mode === "danger" ? (
+                    <div className='flex'>
+                        <div>
+                            <PiInfo size={16} className='text-danger500' />
+                        </div>
+                        <p className="text-danger500 text-xs ml-1">{footer}</p>
+                    </div>
+                ) : (
+                    <p className="text-black text-xs">{footer}</p>
+                )}
+            </div>
+        )}
     </div>
   );
 };

package/src/components/dropzone/uploadfile/index.js

@@ -9,6 +9,7 @@ const DropzoneUploadFile = ({
   onDrop,
   maxFiles = 1,
   selectedFile,
+  error = "",
 }) => {
   const [errorMessage, setErrorMessage] = useState("");
 
@@ -40,7 +41,9 @@ const DropzoneUploadFile = ({
       <div className="cursor-pointer">
         <div
           {...getRootProps({ className: "dropzone" })}
-          className="bg-neutral20 w-full h-28 rounded-lg border-2 border-neutral50 border-dashed"
+          className={`bg-neutral20 w-full h-28 rounded-lg border-2 ${
+            error ? "border-danger500" : "border-neutral50"
+          } border-dashed`}
         >
           <input {...getInputProps()} required={required} />
           <div className="flex w-full h-full justify-center items-center text-center">
@@ -65,6 +68,7 @@ const DropzoneUploadFile = ({
           </div>
         </div>
       </div>
+      {error && <p className="text-danger500 text-xs mt-1">{error}</p>}
       <p className="text-xs text-neutral300 mt-1">{subtitle}</p>
     </div>
   );