Info ToolTip added (#1775)

* Added info icon on formula and assumptions * Incremented CSS version
egovernments · Nov 8, 2024 · 1fdc55b · 1fdc55b
1 parent 8161371
commit 1fdc55b
Show file tree

Hide file tree

Showing 5 changed files with 26 additions and 8 deletions.
diff --git a/health/micro-ui/web/micro-ui-internals/packages/css/package.json b/health/micro-ui/web/micro-ui-internals/packages/css/package.json
@@ -66,4 +66,4 @@
     "digit-ui",
     "css"
   ]
-}
+}
diff --git a/health/micro-ui/web/micro-ui-internals/packages/css/src/components/microplanning.scss b/health/micro-ui/web/micro-ui-internals/packages/css/src/components/microplanning.scss
@@ -2584,6 +2584,12 @@ $border-color: rgba(214, 213, 212, 1);
   flex-wrap: wrap;
   align-items: center;
   width: 40%;
+
+  .icon-wrapper {
+    position: relative;
+    top: 0.28rem;
+    margin-left: 0.2rem;
+  }
 }
 
 .kpi-container {

diff --git a/health/micro-ui/web/micro-ui-internals/packages/css/src/pages/employee/formulaConfig.scss b/health/micro-ui/web/micro-ui-internals/packages/css/src/pages/employee/formulaConfig.scss
@@ -17,14 +17,20 @@
   }
 
   .formula-label-field > span {
-    width: 20rem;
+    width: 25rem;
     font-size: 1.2rem;
     margin-right: 2rem;
     font-weight: bold;
 
     margin-top: 0.25rem;
   }
 
+  .icon-wrapper{
+    position: relative;
+    top: 0.28rem;
+    margin-left: 0.3rem;
+  }
+
 /* styles.css */
 .header-comp-blue {
   margin-top: 0;             /* Set margin-top to 0 */

diff --git a/.../web/micro-ui-internals/packages/modules/microplan/src/components/FormulaConfiguration.js b/.../web/micro-ui-internals/packages/modules/microplan/src/components/FormulaConfiguration.js
@@ -1,7 +1,7 @@
 import React, { useState, useEffect, Fragment, useContext, useRef } from "react";
 import { useTranslation } from "react-i18next";
-import { Header, DeleteIconv2, LabelFieldPair, AddIcon, CardText } from "@egovernments/digit-ui-react-components";
-import { Dropdown, CheckBox, PopUp, Card, Button, Divider } from "@egovernments/digit-ui-components";
+import { Header, DeleteIconv2, LabelFieldPair, AddIcon, CardText, InfoBannerIcon } from "@egovernments/digit-ui-react-components";
+import { Dropdown, CheckBox, PopUp, Card, Button, Divider, TooltipWrapper } from "@egovernments/digit-ui-components";
 import { PRIMARY_COLOR } from "../utils/utilities";
 import { useFormulaContext } from "./FormulaConfigWrapper";
 import _ from "lodash";
@@ -247,7 +247,11 @@ const FormulaConfiguration = ({ onSelect, category, customProps, formulas: initi
               <div>
                 <Card type="secondary">
                   <LabelFieldPair className="formula-label-field">
-                    <span>{`${t(formula.output)}`}</span>
+                    <span>{`${t(formula.output)}`}
+                    <span className="icon-wrapper">
+                      <TooltipWrapper content={t(`FORMULA_MESSAGE_FOR_${formula.output}`)} children={<InfoBannerIcon fill={'#C84C0E'} />} />
+                    </span>
+                    </span>
                     <div className="equals-icon">=</div>
                     <Dropdown
                       variant="select-dropdown"

diff --git a/...h/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/components/Hypothesis.js b/...h/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/components/Hypothesis.js
@@ -1,7 +1,7 @@
 import React, { useState, useEffect, Fragment, useContext, useRef } from "react";
 import { useTranslation } from "react-i18next";
-import { Header, DeleteIconv2, AddIcon, CardText, LabelFieldPair } from "@egovernments/digit-ui-react-components";
-import { Dropdown, FieldV1, PopUp, Card, Button, Divider } from "@egovernments/digit-ui-components";
+import { Header, DeleteIconv2, AddIcon, CardText, LabelFieldPair, InfoBannerIcon } from "@egovernments/digit-ui-react-components";
+import { Dropdown, FieldV1, PopUp, Card, Button, Divider, TooltipWrapper } from "@egovernments/digit-ui-components";
 import { PRIMARY_COLOR } from "../utils/utilities";
 import { useMyContext } from "../utils/context";
 import { useAssumptionContext } from "./HypothesisWrapper";
@@ -127,10 +127,12 @@ const Hypothesis = ({ category, assumptions: initialAssumptions,setShowToast,all
               <div className="assumption-label">
                 <span>{`${t(item)}`}
                   <span className="mandatory-span">*</span>
+                  <span className="icon-wrapper">
+                    <TooltipWrapper content={t(`HYPOTHEISIS_MESSAGE_FOR_${item}`)} children={<InfoBannerIcon fill={'#C84C0E'}/>} />
+                  </span>
                 </span>
               </div>
 
-
               <div className="fieldv1-deleteIcon-container">
                 <FieldV1
                   type="number"
-Original file line number
+Diff line change
@@ Expand Up / @@ -66,4 +66,4 @@ @@
         "digit-ui",
         "css"
       ]
-    }
+    }