added the changes of the id for every field

egovernments · Nov 26, 2024 · 5d9d4fc · 5d9d4fc
1 parent a895353
commit 5d9d4fc
Show file tree

Hide file tree

Showing 15 changed files with 44 additions and 20 deletions.
diff --git a/react/example/package.json b/react/example/package.json
@@ -10,8 +10,8 @@
     "build": "webpack --mode production"
   },
   "dependencies": {
-    "@egovernments/digit-ui-components": "0.0.2-beta.55",
-    "@egovernments/digit-ui-libraries": "1.8.2-beta.1",
+    "@egovernments/digit-ui-components": "0.0.2-beta.56",
+    "@egovernments/digit-ui-libraries": "1.8.5",
     "@egovernments/digit-ui-module-common": "1.7.10",
     "@egovernments/digit-ui-module-core": "1.8.1-beta.6",
     "@egovernments/digit-ui-module-project": "0.3.4",

diff --git a/react/modules/Project/package.json b/react/modules/Project/package.json
@@ -19,7 +19,7 @@
     },
     "dependencies": {
         "@egovernments/digit-ui-react-components": "1.8.1-beta.4",
-        "@egovernments/digit-ui-components": "0.0.2-beta.55",
+        "@egovernments/digit-ui-components": "0.0.2-beta.56",
         "lodash": "^4.17.21",
         "react": "17.0.2",
         "react-date-range": "^1.4.0",

diff --git a/react/modules/core/package.json b/react/modules/core/package.json
@@ -14,7 +14,7 @@
     "prepublish": "yarn build"
   },
   "dependencies": {
-    "@egovernments/digit-ui-components": "0.0.2-beta.55",
+    "@egovernments/digit-ui-components": "0.0.2-beta.56",
     "@egovernments/digit-ui-react-components": "1.8.1-beta.4",
     "react": "17.0.2",
     "react-dom": "17.0.2",

diff --git a/react/modules/sample/package.json b/react/modules/sample/package.json
@@ -19,7 +19,7 @@
   },
   "dependencies": {
     "@egovernments/digit-ui-react-components": "1.8.1-beta.4",
-    "@egovernments/digit-ui-components": "0.0.2-beta.55",
+    "@egovernments/digit-ui-components": "0.0.2-beta.56",
     "react": "17.0.2",
     "react-date-range": "^1.4.0",
     "react-dom": "17.0.2",

diff --git a/react/package.json b/react/package.json
@@ -79,14 +79,14 @@
   "dependencies": {
     "@babel/plugin-syntax-jsx": "^7.24.1",
     "@babel/preset-react": "^7.24.1",
-    "@egovernments/digit-ui-libraries": "1.8.2-beta.1",
+    "@egovernments/digit-ui-libraries": "1.8.5",
     "@egovernments/digit-ui-components-css":"0.0.2-beta.42",
     "@egovernments/digit-ui-module-core": "1.8.1-beta.6",
     "@egovernments/digit-ui-module-project": "0.3.4",
     "@egovernments/digit-ui-module-sample": "0.0.1",
     "@egovernments/digit-ui-react-components": "1.7.10",
     "@egovernments/digit-ui-svg-components": "1.0.12",
-    "@egovernments/digit-ui-components": "0.0.2-beta.55",
+    "@egovernments/digit-ui-components": "0.0.2-beta.56",
     "babel-loader": "8.1.0",
     "clean-webpack-plugin": "4.0.0",
     "css-loader": "5.2.6",

diff --git a/react/ui-components/CHANGELOG.md b/react/ui-components/CHANGELOG.md
@@ -5,6 +5,10 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
 
+## [0.0.2-beta.56] - 2024-11-16
+### New Changes
+- Added id for every field use with digit-ui-libraries with v1.8.5 for proper integartion
+
 ## [0.0.2-beta.54] - 2024-11-16
 ### New Changes
 - Fixed Navigation redirection for landing page card if it is an external url.

diff --git a/react/ui-components/package.json b/react/ui-components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@egovernments/digit-ui-components",
-  "version": "0.0.2-beta.55",
+  "version": "0.0.2-beta.56",
   "license": "MIT",
   "main": "dist/index.js",
   "module": "dist/index.modern.js",
@@ -53,7 +53,7 @@
   ],
   "dependencies": {    
     "@egovernments/digit-ui-components-css": "0.0.2-beta.42",
-    "@egovernments/digit-ui-libraries": "1.8.1-beta.1",
+    "@egovernments/digit-ui-libraries": "1.8.5",
     "@egovernments/digit-ui-svg-components": "1.0.12",
     "@googlemaps/js-api-loader": "1.13.10",
     "autoprefixer": "^10.4.15",

diff --git a/react/ui-components/src/atoms/Dropdown.js b/react/ui-components/src/atoms/Dropdown.js
@@ -488,6 +488,7 @@ const Dropdown = (props) => {
             setFilter={setFilter}
             forceSet={forceSet}
             setforceSet={setforceSet}
+            id={props?.id}
             setOptionIndex={setOptionIndex}
             keepNull={props.keepNull}
             selectedVal={

diff --git a/react/ui-components/src/atoms/MobileNumber.js b/react/ui-components/src/atoms/MobileNumber.js
@@ -28,6 +28,7 @@ const MobileNumber = (props) => {
             onChange={onChange}
             inputRef={props.inputRef}
             value={props.value}
+            id={props?.id}
             className={props.className}
             style={{ ...props.style }}
             maxLength={props.maxLength}

diff --git a/react/ui-components/src/atoms/RadioButtons.js b/react/ui-components/src/atoms/RadioButtons.js
@@ -31,11 +31,12 @@ const RadioButtons = (props) => {
                   onChange={() => selectOption(option)}
                   disabled={props?.disabled}
                   name={props?.name}
+                  id={props?.id}
                   ref={props?.inputRef}
                 />
                 <span className="digit-radio-btn-checkmark"></span>
               </span>
-              <label style={props?.inputStyle}>
+              <label style={props?.inputStyle} for={props?.id}>
                 {StringManipulator(
                   "TOSENTENCECASE",
                   t(option[props?.optionsKey])
@@ -55,11 +56,12 @@ const RadioButtons = (props) => {
                   onChange={() => selectOption(option)}
                   disabled={props?.disabled}
                   name={props?.name}
+                  id={props?.id}
                   ref={props?.inputRef}
                 />
                 <span className="digit-radio-btn-checkmark"></span>
               </span>
-              <label style={props?.inputStyle}>
+              <label style={props?.inputStyle} for={props?.id}>
                 {StringManipulator("TOSENTENCECASE",t(
                   props?.labelKey
                     ? `${props?.labelKey}_${option?.code}`
@@ -75,6 +77,7 @@ const RadioButtons = (props) => {
                 <input
                   className="digit-radio-btn"
                   type="radio"
+                  id={props?.id}
                   value={option}
                   checked={selected === option ? 1 : 0}
                   onChange={() => selectOption(option)}
@@ -85,7 +88,7 @@ const RadioButtons = (props) => {
                 <span className="digit-radio-btn-checkmark"></span>
               </span>
 
-              <label style={props?.inputStyle}>
+              <label style={props?.inputStyle} for={props?.id}>
                 {StringManipulator("TOSENTENCECASE", t(option))}
               </label>
             </div>

diff --git a/react/ui-components/src/atoms/TextInput.js b/react/ui-components/src/atoms/TextInput.js
@@ -184,11 +184,11 @@ const TextInput = (props) => {
             });
             return svgElement;
           } else {
-            console.log("Icon not found");
+            console.warn("Icon not found");
             return null;
           }
         } catch (error) {
-          console.error("Icon not found");
+          console.warn("Icon not found");
           return null;
         }
       }
@@ -245,7 +245,7 @@ const TextInput = (props) => {
                   : defaultType || "text"
               }
               name={props.name}
-              id={props.id}
+              id={props?.id}
               className={inputClassNameForMandatory}
               placeholder={StringManipulator(
                 "TOSENTENCECASE",

diff --git a/react/ui-components/src/hoc/FieldV1.js b/react/ui-components/src/hoc/FieldV1.js
@@ -59,6 +59,7 @@ const FieldV1 = ({
   const customValidation = config?.populators?.validation?.customValidation;
   const customRules = customValidation ? { validate: customValidation } : {};
   const customProps = config?.customProps;
+  const fieldId=Digit?.Utils.getFieldIdName?.(label)||"NA";
 
   const [currentCharCount, setCurrentCharCount] = useState(0);
 
@@ -151,6 +152,7 @@ const FieldV1 = ({
             customIcon={populators?.customIcon}
             customClass={populators?.customClass}
             onIconSelection={populators?.onIconSelection}
+            id={fieldId}
           />
         );
       case "textarea":
@@ -172,6 +174,7 @@ const FieldV1 = ({
               errorStyle={errors?.[populators?.name]}
               maxlength={populators?.validation?.maxlength}
               minlength={populators?.validation?.minlength}
+              id={fieldId}
             />
           </div>
         );
@@ -191,6 +194,7 @@ const FieldV1 = ({
             onChange={onChange}
             config={populators}
             disabled={disabled}
+            id={fieldId}
             errorStyle={errors?.[populators?.name]}
             variant={
               variant
@@ -217,6 +221,7 @@ const FieldV1 = ({
               customLabelMarkup={populators?.customLabelMarkup}
               disabled={disabled}
               isLabelFirst={populators?.isLabelFirst}
+              id={fieldId}
             />
           </div>
         );
@@ -228,6 +233,7 @@ const FieldV1 = ({
               optionsKey={populators?.optionsKey}
               chipsKey={populators?.chipsKey}
               props={props}
+              id={fieldId}
               isPropsNeeded={true}
               onSelect={(e) => {
                 onChange(
@@ -261,6 +267,7 @@ const FieldV1 = ({
               onChange={onChange}
               value={value}
               disable={disabled}
+              id={fieldId}
               errorStyle={errors?.[populators?.name]}
             />
           </div>
@@ -274,6 +281,7 @@ const FieldV1 = ({
             onSelect={controllerProps?.setValue}
             config={config}
             data={formData}
+            id={fieldId}
             formData={formData}
             register={controllerProps?.register}
             errors={errors}
@@ -300,6 +308,7 @@ const FieldV1 = ({
             register={controllerProps?.register}
             formData={formData}
             errors={errors}
+            id={fieldId}
             control={controllerProps?.control}
             customClass={config?.customClass}
             customErrorMsg={config?.error}
@@ -323,6 +332,7 @@ const FieldV1 = ({
             name={populators?.name}
             onChange={onChange}
             inputRef={ref}
+            id={fieldId}
             errorStyle={errors?.[populators?.name]}
             max={populators?.validation?.max}
             min={populators?.validation?.min}
@@ -348,6 +358,8 @@ const FieldV1 = ({
     }
   };
 
+
+
   return (
     <div className="label-field-wrapper">
       {!withoutLabel && (
@@ -361,7 +373,8 @@ const FieldV1 = ({
               populators?.wrapLabel ? "wraplabel" : ""
             }`}
           >
-            <div
+            <label
+              for={fieldId}
               className={`label-styles ${
                 populators?.wrapLabel ? "wraplabel" : ""
               }`}
@@ -372,7 +385,7 @@ const FieldV1 = ({
                   maxLength: 64,
                 })
               )}
-            </div>
+            </label>
             <div style={{ color: "#B91900" }}>{required ? " * " : null}</div>
             {infoMessage ? (
               <div className="info-icon">

diff --git a/react/ui-components/src/molecules/CustomDropdown.js b/react/ui-components/src/molecules/CustomDropdown.js
@@ -7,7 +7,7 @@ import Dropdown from "../atoms/Dropdown";
 import Toggle from "../atoms/Toggle";
 import { createFunction } from "./techMolecules/createFunction";
 
-const CustomDropdown = ({ t, config, inputRef, label, onChange, value, errorStyle, disabled, type, additionalWrapperClass = "",variant,mdmsv2}) => {
+const CustomDropdown = ({ t, config, inputRef, label, onChange,id, value, errorStyle, disabled, type, additionalWrapperClass = "",variant,mdmsv2}) => {
   const master = { name: config?.mdmsConfig?.masterName };
   if (config?.mdmsConfig?.filter) {
     master["filter"] = config?.mdmsConfig?.filter;
@@ -43,6 +43,7 @@ const CustomDropdown = ({ t, config, inputRef, label, onChange, value, errorStyl
             onSelect={(e) => {
               onChange(e, config.name);
             }}
+            id={id}
             disabled={disabled}
             selectedOption={value}
             defaultValue={value}
@@ -64,6 +65,7 @@ const CustomDropdown = ({ t, config, inputRef, label, onChange, value, errorStyl
             key={config.name}
             optionKey={config?.optionsKey}
             value={value}
+            id={id}
             select={(e) => {
               onChange(e, config.name);
             }}
@@ -86,6 +88,7 @@ const CustomDropdown = ({ t, config, inputRef, label, onChange, value, errorStyl
             key={config.name}
             optionsKey={config?.optionsKey}
             value={value}
+            id={id}
             onSelect={(e) => {
               onChange(e, config.name);
             }}

diff --git a/react/ui-components/src/utils/index.js b/react/ui-components/src/utils/index.js
@@ -1 +0,0 @@
-

diff --git a/react/ui-components/src/utils/inputAmountWrapper.js b/react/ui-components/src/utils/inputAmountWrapper.js
@@ -50,7 +50,7 @@ export const InputAmountWrapper = ({ ref, ...props }) => {
 
   return (
     <CurrencyInput
-      id="validationCustom01"
+      id={props?.id}
       name="input-1"
       customInput={TextInput}
       className={`form-control ${className} ${props?.variant}`}