Merge branch 'development' into users/sohesh/bug-1311-design-system-e…

…lements-pagination-advanced-dark-theme-pagination-is-not-display-proper
Wai-Technologies · Jan 31, 2025 · f7714b2 · f7714b2
2 parents 92d4381 + 560c1fe
commit f7714b2
Show file tree

Hide file tree

Showing 8 changed files with 80 additions and 10 deletions.
diff --git a/raaghu-components/src/rds-comp-forms-email/rds-comp-forms-email.tsx b/raaghu-components/src/rds-comp-forms-email/rds-comp-forms-email.tsx
@@ -10,6 +10,7 @@ export interface RdsCompFormsEmailProps {
 const RdsCompFormsEmail = (props: RdsCompFormsEmailProps) => {
     const [emailData, setEmailData] = useState(props.formsEmailData);
     const [inputReset, setInputReset] = useState(false);
+    const [errorMessageForEmail, setErrorMessageForEmail] = useState("");
 
     useEffect(() => {
         setEmailData(props.formsEmailData);
@@ -21,6 +22,17 @@ const RdsCompFormsEmail = (props: RdsCompFormsEmailProps) => {
 
     const handleDataChanges = (value: any, key: string) => {
         setEmailData((prevState: any) => ({ ...prevState, [key]: value }));
+
+        if (key === "to") {
+            const trimmedValue = value.trim();
+            if (trimmedValue === "") {
+                setErrorMessageForEmail("Email is required.");
+            } else if (!isEmailValid(trimmedValue)) {
+                setErrorMessageForEmail("Please enter a valid email address.");
+            } else {
+                setErrorMessageForEmail("");
+            }
+        }
     };
 
     const isEmailValid = (email: any) => {
@@ -47,14 +59,16 @@ const RdsCompFormsEmail = (props: RdsCompFormsEmailProps) => {
         <>
             <div className="ps-2 mt-3 custom-content-scroll">
                 <RdsInput
-                    required
                     reset={inputReset}
                     inputType="email"
                     placeholder="Enter email"
                     label="To"
                     onChange={(e) => handleDataChanges(e.target.value, "to")}
                     value={emailData?.to}
-                    dataTestId="email">
+                    dataTestId="email"
+                    required={true}
+                    validatonPattern={/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i}
+                    validationMsg={errorMessageForEmail}>
                 </RdsInput>
                 <RdsInput
                     label="Subject"

diff --git a/raaghu-components/src/rds-comp-grid/rds-comp-grid.tsx b/raaghu-components/src/rds-comp-grid/rds-comp-grid.tsx
@@ -196,7 +196,7 @@ const DraggableColumnHeader: React.FC<{
 
   return (
     <th
-      className={`text-nowrap ${isDragging ? 'dragging' : 'not-dragging'} ${column.fixed ? "fixed-column" : ""} ${column.frozen ? "frozen-column" : ""}`}
+      className={`text-nowrap ${isDragging ? 'dragging' : 'not-dragging'} ${column.fixed ? "fixed-auto" : ""} ${column.frozen ? "frozen-auto" : ""}`}
       ref={refheader}
 
     >
@@ -1215,7 +1215,7 @@ const updatedColumns = calculateLeftPositions();
           {updatedColumns.map((column, colIndex) => (
                   !column.hidden && (
                     <td
-                      className={`px-2 align-middle fw-medium ${column.wraptext ? "wrap-text" : "text-nowrap"} ${column.frozen ? "frozen-column" : ""}`}
+                      className={`px-2 align-middle fw-medium ${column.wraptext ? "wrap-text" : "text-nowrap"} ${column.frozen ? "frozen-auto" : ""}`}
                       key={column.key}
                       style={column.fixed ? { left: `${column.left}px` } : {}}
                     >

diff --git a/raaghu-components/src/rds-comp-password-setting/rds-comp-password-setting.tsx b/raaghu-components/src/rds-comp-password-setting/rds-comp-password-setting.tsx
@@ -10,8 +10,10 @@ export interface RdsCompPasswordSettingProps {
 const RdsCompPasswordSetting = (props: RdsCompPasswordSettingProps) => {
     const [formData, setFormData] = useState(props.passwordSettingData);
     const [inputReset, setInputReset] = useState(props.reset);
+    const [curPass, setCurPass] = useState("");
     const [newPassword, setNewPassword] = useState("");
     const [newConfirmPassoword, setNewConfirmPassoword] =useState("");
+    const [isValidConfirmNewPass, setIsValidConfirmNewPass] = useState(true);
     const [isValidConfirmPass, setIsValidConfirmPass] = useState(true);
     const [curPassError, setCurPassError] = useState("");
     const [newPassError, setNewPassError] = useState("");
@@ -32,7 +34,7 @@ const RdsCompPasswordSetting = (props: RdsCompPasswordSettingProps) => {
                     !isCurPassValid(value) ? setCurPassError("Password must be alphanumeric and at least 8 characters long") : setCurPassError("");
                     break;
                 case "newPass":
-                    !isNewPassValid(value) ? setNewPassError("Password must be alphanumeric and at least 8 characters long") : setNewPassError("");
+                    isCurrNewPassDifferent(value) ? setNewPassError("Current Password and New Password cannot be same") : (!isNewPassValid(value) ? setNewPassError("Password must be alphanumeric and at least 8 characters long") : setNewPassError(""));
                     break;
                 case "curNewPass":
                     !isCurNewPassValid(value) ? setCurNewPassError("New Password and Confirm New Password do not match. Please try again.") : setCurNewPassError("");
@@ -46,6 +48,10 @@ const RdsCompPasswordSetting = (props: RdsCompPasswordSettingProps) => {
         return curPass && curPass.length >= 8;
     };
 
+    const isCurrNewPassDifferent = (newPass: any) => {
+        return newPass === formData?.curPass ;
+    }
+
     const isNewPassValid = (newPass: any) => {
         return newPass && newPass.length >= 8;
     };
@@ -54,14 +60,18 @@ const RdsCompPasswordSetting = (props: RdsCompPasswordSettingProps) => {
         return curNewPass && curNewPass === formData.newPass && curNewPass.length >= 8;
     };
 
+    useEffect(() => {
+        (newPassword && newPassword !== curPass && newPassword.length >= 8) ? setIsValidConfirmNewPass(true) : setIsValidConfirmNewPass(false);
+    },[newPassword]);
+
     useEffect(() => {
         (newConfirmPassoword && newConfirmPassoword === newPassword && newConfirmPassoword.length >= 8) ? setIsValidConfirmPass(true) : setIsValidConfirmPass(false);
     },[newConfirmPassoword, newPassword]);
 
     const isFormValid =
         isCurNewPassValid(formData?.curNewPass) &&
         isCurPassValid(formData?.curPass) &&
-        isNewPassValid(formData?.newPass);
+        isNewPassValid(formData?.newPass) && isCurNewPassValid(formData?.curNewPass) && isValidConfirmNewPass && isValidConfirmPass;
 
         const emitSaveData = (event: any) => {
             event.preventDefault();
@@ -87,6 +97,7 @@ const RdsCompPasswordSetting = (props: RdsCompPasswordSettingProps) => {
                             placeholder="Current password"
                             inputType="password"
                             onChange={(e) => {
+                              setCurPass(e.target.value);
                               handleDataChanges(e.target.value, "curPass");
                             }}
                             value={formData?.curPass}
@@ -113,6 +124,7 @@ const RdsCompPasswordSetting = (props: RdsCompPasswordSettingProps) => {
                             showIcon= {true}
 			                dataTestId="new-password"
                             validatonPattern={/^(?=.*?[0-9])(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[^0-9A-Za-z]).{8,32}$/}
+                            isValidConfirmPass={isValidConfirmNewPass}
                             validationMsg={newPassError}
                         ></RdsInput>                       
                     </div>

diff --git a/raaghu-components/src/rds-comp-register-member/rds-comp-register-member.tsx b/raaghu-components/src/rds-comp-register-member/rds-comp-register-member.tsx
@@ -98,7 +98,7 @@ const isFormValid=isUserNameValid(registerMemberData?.userName) && isEmailValid(
             />
           </div>
 
-          <div className="form-group mb-2 pb-1">
+          <div className="form-group">
             <RdsInput
               fontWeight={"normal"}
               placeholder="Email"

diff --git a/raaghu-elements/src/rds-banner/rds-banner.tsx b/raaghu-elements/src/rds-banner/rds-banner.tsx
@@ -84,7 +84,7 @@ const RdsBanner = (props: RdsBannerProps) => {
       style={{ backgroundImage: `url(${bannerImage})`,
               backgroundRepeat:"no-repeat",
               backgroundSize:"cover" }}>
-        <div className="content">
+        <div className="content bg-layer bg-dark">
           <RdsHeader size="h3" headerText={props.headingText}></RdsHeader>
           <RdsHeader size="h1" headerText={props.titleText}></RdsHeader>
 

diff --git a/raaghu-elements/src/rds-input/rds-input.tsx b/raaghu-elements/src/rds-input/rds-input.tsx
@@ -63,7 +63,7 @@ const RdsInput = React.forwardRef<HTMLInputElement, RdsInputProps>(
     }, [props.value]);
 
     useEffect(() => { 
-      if(props?.name == "curNewPass")
+      if(props?.name == "curNewPass" || props?.name == "newPass")
       props.isValidConfirmPass ? setIsValid(true) : setIsValid(false);
     });
 

diff --git a/raaghu-elements/src/rds-stepper/rds-stepper.stories.tsx b/raaghu-elements/src/rds-stepper/rds-stepper.stories.tsx
@@ -158,4 +158,20 @@ NumberStepper.parameters = {
     controls: {
         include: ['state', 'steps', 'variant', 'Icon', 'StepIconName']
     }
-};
+};
+
+export const advanceStepper: Story = {
+    args: {
+        stepperType: "advance",
+        stepperSectionClass: "m-3",
+        headerClass: "fs-9 lh-base fw-semibold",
+        checkBoxClass: "float-end", 
+        showDetailsClass: "fs-9 fw-normal lh-sm mt-3", 
+        advanceList: [{headerContain: 'Header 1', type: "Circular", isDisabled: true, checkedValue: true, checkBoxLabel: '', checkBoxId: '1', checkBoxWithLabel: false, showDetails: false, detailsContain: 'Details of header 1'},
+                    {headerContain: 'Header 2', type: "Circular", isDisabled: true, checkedValue: true, checkBoxLabel: '', checkBoxId: '2', checkBoxWithLabel: false, showDetails: true, detailsContain: 'Details of header 2'},
+                    {headerContain: 'Header 3', type: "Circular", isDisabled: true, checkedValue: false, checkBoxLabel: '', checkBoxId: '3', checkBoxWithLabel: false, showDetails: false, detailsContain: 'Details of header 3'}
+                ]
+    },
+} satisfies Story;
+
+advanceStepper.parameters = { controls: { include: ['stepperType', 'stepperSectionClass', 'headerClass', 'checkBoxClass', 'showDetailsClass', 'advanceList'] } };
diff --git a/raaghu-elements/src/rds-stepper/rds-stepper.tsx b/raaghu-elements/src/rds-stepper/rds-stepper.tsx
@@ -11,6 +11,19 @@ interface StepperDetail {
         subtitle: string;
     };
 }
+
+interface RdsStepperAdvanceListProps {
+    headerContain: string;
+    type?: any;
+    isDisabled: boolean;
+    checkedValue: any;
+    checkBoxLabel: string;
+    checkBoxId: string;
+    checkBoxWithLabel: boolean;
+    showDetails: boolean;
+    detailsContain: string;
+  }
+
 export interface RdsStepperProps {
     detail: any;
     stepperType?: string;
@@ -45,6 +58,11 @@ export interface RdsStepperProps {
         iconStroke: boolean;
         iconFill: boolean;
     }[];
+    stepperSectionClass?: string;
+    headerClass?: string;
+    checkBoxClass?: string;
+    showDetailsClass?: string;
+    advanceList?: RdsStepperAdvanceListProps[];
 }
 
 const RdsStepper = (props: RdsStepperProps) => {
@@ -361,6 +379,16 @@ const RdsStepper = (props: RdsStepperProps) => {
                 </>
             )}
 
+            {props.stepperType == "advance" && (
+            <>
+            {props.advanceList?.map((e) => <div className={props.stepperSectionClass}>
+            <span className={props.headerClass}>{e.headerContain}</span>
+            <span className={props.checkBoxClass}><RdsCheckbox type={e.type} isDisabled={e.isDisabled} checked={e.checkedValue}label={e.checkBoxLabel} id={e.checkBoxId} withlabel={e.checkBoxWithLabel}/></span>
+            {e.showDetails && <div className={props.showDetailsClass}>{e.detailsContain}</div>}
+            </div>)}
+            </>
+            )}
+
         </>
     );
 };