Stepper tag update (#74)

* updated stepper and tag styles * modified isActive prop to activeSteps
egovernments · May 30, 2024 · e1115bd · e1115bd
1 parent 76e334d
commit e1115bd
Show file tree

Hide file tree

Showing 16 changed files with 100 additions and 28 deletions.
diff --git a/react/css/README.md b/react/css/README.md
@@ -42,6 +42,7 @@ frontend/micro-ui/web/public/index.html
 # Changelog
 
 ```bash
+1.8.2-coreui.22 Updated tag, stepper styles 
 1.8.2-coreui.21 Updated Panel, Popup styles
 1.8.2-coreui.20 Added Popup,Panel and Panel Card css
 1.8.2-coreui.19 Added Uploader Variants

diff --git a/react/css/package.json b/react/css/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@egovernments/digit-ui-css",
-  "version": "1.8.2-coreui.21",
+  "version": "1.8.2-coreui.22",
   "license": "MIT",
   "main": "dist/index.css",
   "author": "Jagankumar <[email protected]>",

diff --git a/react/css/src/digitv2/components/buttonsV2.scss b/react/css/src/digitv2/components/buttonsV2.scss
@@ -236,6 +236,12 @@
       @extend .typography.button.small;
     }
   }
+
+  &:active{
+    h2{
+      font-weight: theme(digitv2.fontWeight.bold);
+    }
+  }
 }
 
 .digit-button-link {

diff --git a/react/css/src/digitv2/components/infoCardV2.scss b/react/css/src/digitv2/components/infoCardV2.scss
@@ -21,7 +21,7 @@
     }
   }
 
-  h2 {
+  .digit-infobanner-header {
     @apply w-full max-w-full overflow-hidden text-left;
     font-family: theme(digitv2.fontFamily.sans);
     font-weight: theme(digitv2.fontWeight.bold);
@@ -58,7 +58,7 @@
     border: 0.063rem solid theme(digitv2.lightTheme.alert-success);
     border-left-width: theme(digitv2.spacers.spacer1);
 
-    h2{
+    .digit-infobanner-header{
       color: theme(digitv2.lightTheme.alert-success);
     }
   }
@@ -68,7 +68,7 @@
     border: 0.063rem solid theme(digitv2.lightTheme.alert-warning);
     border-left-width: theme(digitv2.spacers.spacer1);
 
-    h2{
+    .digit-infobanner-header{
       color: theme(digitv2.lightTheme.alert-warning);
     }
   }
@@ -78,7 +78,7 @@
     border: 0.063rem solid theme(digitv2.lightTheme.alert-error);
     border-left-width: theme(digitv2.spacers.spacer1);
 
-    h2{
+    .digit-infobanner-header{
       color: theme(digitv2.lightTheme.alert-error);
     }
   }
@@ -112,6 +112,13 @@
   .additional-elements-inline {
     @apply flex flex-wrap items-start;
     gap: theme(digitv2.spacers.spacer2);
+
+    .individualElement{
+      h2{
+        margin: theme(digitv2.spacers.spacer0);
+        color: theme(digitv2.lightTheme.text-primary);
+      }
+    }
   }
 
   .additional-elements-column {
@@ -121,6 +128,11 @@
     .individualElement {
       @apply w-full max-w-full;
 
+      h2{
+        margin: theme(digitv2.spacers.spacer0);
+        color: theme(digitv2.lightTheme.text-primary);
+      }
+
     }
   }
 

diff --git a/react/css/src/digitv2/components/tagV2.scss b/react/css/src/digitv2/components/tagV2.scss
@@ -35,9 +35,19 @@
     margin: theme(digitv2.spacers.spacer0);
     border: 0.063rem solid theme(digitv2.lightTheme.generic-divider);
 
+    @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
+      /* Media query for tablets */
+      height: theme(digitv2.spacers.spacer9);
+    }
+
+    @media (max-aspect-ratio: 9/16) {
+      /* Media query for mobile */
+      height: theme(digitv2.spacers.spacer9);
+    }
+
 
     .digit-text {
-      @extend .typography.body-s;
+      @extend .typography.body-xs;
       @apply overflow-hidden items-center whitespace-no-wrap;
       max-width: calc(100% - (theme(digitv2.spacers.spacer7)));
       width: calc(100% - (theme(digitv2.spacers.spacer7)));
@@ -55,6 +65,18 @@
       display: flex !important;
       justify-content: center;
 
+      @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
+        /* Media query for tablets */
+        height: theme(digitv2.spacers.spacer5);
+        width: theme(digitv2.spacers.spacer5);
+      }
+
+      @media (max-aspect-ratio: 9/16) {
+        /* Media query for mobile */
+        height: theme(digitv2.spacers.spacer5);
+        width: theme(digitv2.spacers.spacer5);
+      }
+
       &.disabled{
         pointer-events: none;
       }
@@ -65,6 +87,18 @@
         height: theme(digitv2.spacers.spacer6);
         display: flex !important;
         justify-content: center;
+
+        @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
+          /* Media query for tablets */
+          height: theme(digitv2.spacers.spacer5);
+          width: theme(digitv2.spacers.spacer5);
+        }
+
+        @media (max-aspect-ratio: 9/16) {
+          /* Media query for mobile */
+          height: theme(digitv2.spacers.spacer5);
+          width: theme(digitv2.spacers.spacer5);
+        }
       }
     }
 
@@ -74,7 +108,7 @@
       box-shadow: 0.125rem 0.125rem theme(digitv2.spacers.spacer1) theme(digitv2.spacers.spacer0) #D4351C4D;
 
       .digit-text {
-        @extend .typography.heading-s;
+        @extend .typography.heading-xs;
         color: theme(digitv2.lightTheme.alert-error);
       }
 

diff --git a/react/example/package.json b/react/example/package.json
@@ -10,7 +10,7 @@
     "build": "webpack --mode production"
   },
   "dependencies": {
-    "@egovernments/digit-ui-components": "0.0.1-beta.30",
+    "@egovernments/digit-ui-components": "0.0.1-beta.31",
     "@egovernments/digit-ui-libraries": "1.8.2-beta.1",
     "@egovernments/digit-ui-module-common": "1.7.10",
     "@egovernments/digit-ui-module-core": "1.8.1-beta.6",

diff --git a/react/example/public/index.html b/react/example/public/index.html
@@ -9,7 +9,7 @@
     rel='stylesheet' type='text/css'>
     <link
     rel="stylesheet"
-    href="https://unpkg.com/@egovernments/[email protected].21/dist/index.css"
+    href="https://unpkg.com/@egovernments/[email protected].22/dist/index.css"
   />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <meta name="theme-color" content="#00bcd1" />

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.1-beta.30",
+        "@egovernments/digit-ui-components": "0.0.1-beta.31",
         "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.1-beta.30",
+    "@egovernments/digit-ui-components": "0.0.1-beta.31",
     "@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.1-beta.30",
+    "@egovernments/digit-ui-components": "0.0.1-beta.31",
     "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
@@ -77,7 +77,7 @@
     "@egovernments/digit-ui-module-sample": "0.0.1",
     "@egovernments/digit-ui-react-components": "1.7.10",
     "@egovernments/digit-ui-svg-components": "1.0.4",
-    "@egovernments/digit-ui-components": "0.0.1-beta.30",
+    "@egovernments/digit-ui-components": "0.0.1-beta.31",
     "babel-loader": "8.1.0",
     "clean-webpack-plugin": "4.0.0",
     "css-loader": "5.2.6",

diff --git a/react/ui-components/README.md b/react/ui-components/README.md
@@ -58,6 +58,7 @@ yarn storybook
 # Changelog
 
 ```bash
+0.0.1-beta.31 Added new prop named activeSteps in Stepper
 0.0.1-beta.30 Updated Panel Animation Styles
 0.0.1-beta.29 Added PopUp,Panels and Panel Cards
 0.0.1-beta.28 Added restrictSelection prop in MultiSelectDropdown

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.1-beta.30",
+  "version": "0.0.1-beta.31",
   "license": "MIT",
   "main": "dist/index.js",
   "module": "dist/index.modern.js",
@@ -45,14 +45,13 @@
     "react-query": "3.6.1",
     "react-responsive": "9.0.2",
     "react-router-dom": "5.3.0",
-    "react-scripts": "^4.0.1",
-    "react-lottie":"1.2.4"
+    "react-scripts": "^4.0.1"
   },
   "files": [
     "dist"
   ],
   "dependencies": {
-    "@egovernments/digit-ui-css": "1.8.2-coreui.21",
+    "@egovernments/digit-ui-css": "1.8.2-coreui.22",
     "@egovernments/digit-ui-libraries": "1.8.1-beta.1",
     "@egovernments/digit-ui-svg-components": "1.0.4",
     "@googlemaps/js-api-loader": "1.13.10",
@@ -64,7 +63,8 @@
     "react-table": "7.7.0",
     "react-drag-drop-files": "2.3.10",
     "@cyntler/react-doc-viewer": "1.10.3",
-    "react-webcam":"7.2.0"
+    "react-webcam":"7.2.0",
+    "react-lottie":"1.2.4"
   },
   "browserslist": {
     "production": [

diff --git a/react/ui-components/src/atoms/InfoCard.js b/react/ui-components/src/atoms/InfoCard.js
@@ -3,7 +3,7 @@ import { SVG } from "./SVG";
 import StringManipulator from "./StringManipulator";
 import PropTypes from "prop-types";
 
-const InfoCard = ({ label, text, variant, style, textStyle, additionalElements, inline, className}) => {
+const InfoCard = ({ label, text, variant, style, textStyle, additionalElements, inline, className, headerClassName}) => {
   const getIconAndLabelByVariant = (variant) => {
     switch (variant) {
       case "warning":
@@ -26,7 +26,7 @@ const InfoCard = ({ label, text, variant, style, textStyle, additionalElements,
     <div className={`digit-infobanner-wrap ${variant || "default"} ${className || ""}`} style={style}>
       <div height="24px">
         {icon}
-        <h2>{displayedLabel}</h2>
+        <h2 className={`digit-infobanner-header ${headerClassName || ""}`}>{displayedLabel}</h2>
       </div>
       {text && <p style={{ ...textStyle }}>{StringManipulator("TOSENTENCECASE", text)}</p>}
       {hasAdditionalElements && (

diff --git a/react/ui-components/src/atoms/Stepper.js b/react/ui-components/src/atoms/Stepper.js
@@ -1,4 +1,4 @@
-import React from "react";
+import React,{useState,useEffect} from "react";
 import PropTypes from "prop-types";
 import { useTranslation } from "react-i18next";
 import { SVG } from "./SVG";
@@ -12,11 +12,15 @@ const Stepper = ({
   direction,
   style,
   props,
-  className
+  className,
+  activeSteps
 }) => {
   const { t } = useTranslation();
 
-  const [isMobileView, setIsMobileView] = React.useState(
+  // const firstInactiveIndex = isActive.indexOf(false);
+
+
+  const [isMobileView, setIsMobileView] = useState(
     (window.innerWidth / window.innerHeight <= 9/16)
   );
   const onResize = () => {
@@ -30,7 +34,7 @@ const Stepper = ({
       }
     }
   };
-  React.useEffect(() => {
+  useEffect(() => {
     window.addEventListener("resize", () => {
       onResize();
     });
@@ -41,6 +45,11 @@ const Stepper = ({
     };
   });
 
+  useEffect(() => {
+    // This useEffect will trigger a re-render when number of activeSteps changes
+  }, [activeSteps]);
+
+
   const getAction = (totalSteps, customSteps) => {
     if (customSteps && Object.keys(customSteps).length !== 0) {
       return Object.values(customSteps);
@@ -74,10 +83,10 @@ const Stepper = ({
           >
             <span
               className={`stepper-circle ${
-                index <= currentStep - 1 && "active"
+                ((index <= currentStep - 1) || (index < activeSteps) ) && "active"
               }`}
             >
-              {index < currentStep - 1 ? (
+              {((index < currentStep - 1) || (index < activeSteps) ) ? (
                 <SVG.Check
                   width={isMobileView ? "18px" : "24px"}
                   height={isMobileView ? "18px" : "24px"}
@@ -89,7 +98,7 @@ const Stepper = ({
             </span>
             <span
               className={`stepper-label ${
-                index < currentStep - 1 && "completed"
+                ((index < currentStep - 1) || (index < activeSteps)) && "completed"
               } ${currentStep - 1 === index && "current"} ${direction ? direction : ""}`}
               style={{ ...props?.labelStyles }}
             >
@@ -101,7 +110,7 @@ const Stepper = ({
           {index < arr.length - 1 && (
             <span
               className={`stepper-connect ${
-                index < currentStep - 1 && "active"
+                ((index < currentStep - 1) || (index < activeSteps && index < activeSteps - 1 ) ) && "active"
               } ${direction ? direction : ""}`}
             ></span>
           )}

diff --git a/react/ui-components/src/hoc/stories/Stepper.stories.js b/react/ui-components/src/hoc/stories/Stepper.stories.js
@@ -23,6 +23,7 @@ export default {
     },
     style: { control: "object" },
     props: { control: "object" },
+    activeSteps: { action: "number" },
   },
 };
 
@@ -57,10 +58,18 @@ const commonArgs = {
   props: {
     labelStyles: {},
   },
+  activeSteps:""
 };
 
 //Default stepper
 export const Default = Template.bind({});
 Default.args = {
   ...commonArgs,
 };
+
+//Default stepper
+export const WithIsActive = Template.bind({});
+WithIsActive.args = {
+  ...commonArgs,
+  activeSteps:3
+};