Modifed date and updated stepper (#39)

* updated breadcrumb and sample config * changes required * added timline component and stringmanipulator * modified date and stepper * updated versions * added version changes for css --------- Co-authored-by: Jagankumar <[email protected]>
egovernments · Apr 4, 2024 · d3fbd6e · d3fbd6e
1 parent 53ffa9c
commit d3fbd6e
Show file tree

Hide file tree

Showing 21 changed files with 138 additions and 158 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.3 styles for stepper and fixed date issue
 1.8.0-beta.13 fixed the login text styling issue
 1.8.0-beta.1 styles for login dropdown and homepage dropdowns
 1.8.0-beta added workbench related css and some new Digit v2 constants based on em

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.2",
+  "version": "1.8.2-coreui.3",
   "license": "MIT",
   "main": "dist/index.css",
   "author": "Jagankumar <[email protected]>",

diff --git a/react/css/src/digitv2/components/stepper.scss b/react/css/src/digitv2/components/stepper.scss
@@ -22,32 +22,26 @@
       color: theme(digitv2.lightTheme.paper-primary);
     }
 
-    .secondary-color {
-      @apply text-center font-regular;
+    .stepper-label {
+      @extend .typography.body-s;
+      @apply text-center;
       color: theme(digitv2.lightTheme.text-secondary);
-      font-family: theme(digitv2.fontFamily.sans);
-      font-size: 1rem;
       line-height: 1.5rem;
       letter-spacing: 0rem;
       height: 1.5rem;
 
       @media (max-width: 30rem) {
-        font-size: 0.875rem;
         line-height: 1.25rem;
       }
 
-      &.text-done {
+      &.completed {
         color: theme(digitv2.lightTheme.text-primary);
       }
 
-      &.text-active {
+      &.current {
+        @extend .typography.heading-s;
         color: theme(digitv2.lightTheme.text-primary);
-        font-weight: theme(digitv2.fontWeight.bold);
         line-height: 1.172rem;
-
-        @media (max-width: 30rem) {
-          font-size: 1rem;
-        }
       }
     }
 
@@ -56,13 +50,13 @@
     }
   }
 
-  .circle {
+  .stepper-circle {
     @apply flex text-center justify-center items-center font-regular;
     width: 2rem;
     height: 2rem;
     background-color: theme(digitv2.lightTheme.text-disabled);
     border-radius: 50%;
-    margin-top:0.25rem;
+    margin-top: 0.25rem;
 
 
     @media (max-width: 30rem) {
@@ -77,7 +71,7 @@
     border-color: theme(digitv2.lightTheme.primary-orange);
   }
 
-  .line {
+  .stepper-connect {
     @apply absolute;
     top: 1.25rem;
     left: calc(50% + 0.5rem);
@@ -126,18 +120,16 @@
   }
 
   .digit-stepper-content:hover {
-    .circle.active {
+    .stepper-circle.active {
       outline: 0.25rem solid #F477381F;
     }
 
-    .text-done {
-      color: theme(digitv2.lightTheme.text-primary);
-      font-weight: theme(digitv2.fontWeight.bold);
-      line-height: 1.188rem;
-
-      @media (max-width: 30rem) {
-        font-size: 1rem;
-        line-height: 1.172rem;
+    .stepper-label{
+      font-size: 1rem;
+      line-height: 1.5rem;
+
+      &.completed{
+        @extend .typography.heading-s;
       }
     }
   }
@@ -149,13 +141,14 @@
 }
 
 .digit-stepper-container::-webkit-scrollbar {
-  width: 0.625rem;
+  width: 0.313rem;
+  height: 0.625rem;
   background-color: #F5F5F5;
 }
 
 .digit-stepper-container::-webkit-scrollbar-thumb {
   background-color: #C1C1C1;
-  border-radius: 0.625rem;
+  border-radius: 0.313rem;
 }
 
 .digit-stepper-container::-webkit-scrollbar-thumb:hover {

diff --git a/react/css/src/digitv2/components/textInputV2.scss b/react/css/src/digitv2/components/textInputV2.scss
@@ -103,8 +103,8 @@
     filter: invert(85%) sepia(0%) saturate(337%) hue-rotate(50deg) brightness(99%) contrast(99%);
   }
 
-  input[type="date"]:in-range::-webkit-datetime-edit,
-  input[type="time"]:in-range::-webkit-datetime-edit,
+  input[type="date"][value=""]::-webkit-datetime-edit,
+  input[type="time"][value=""]::-webkit-datetime-edit,
   input[type="date"]:disabled::-webkit-datetime-edit,
   input[type="time"]:disabled::-webkit-datetime-edit,
   input[type="search"]::-webkit-search-cancel-button,
@@ -197,30 +197,6 @@
       }
     }
   }
-
-  &.editableTime {
-
-    input[type="time"]:in-range::-webkit-datetime-edit,
-    input[type="time"]:disabled::-webkit-datetime-edit {
-      display: block !important;
-    }
-
-    input[type="time"][value=""]:not(:placeholder-shown)::before {
-      display: none !important;
-    }
-  }
-
-  &.editableDate {
-
-    input[type="date"]:in-range::-webkit-datetime-edit,
-    input[type="date"]:disabled::-webkit-datetime-edit {
-      display: block !important;
-    }
-
-    input[type="date"][value=""]:not(:placeholder-shown)::before {
-      display: none !important;
-    }
-  }
 }
 
 

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.3",
+    "@egovernments/digit-ui-components": "0.0.1-beta.4",
     "@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/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.3",
+        "@egovernments/digit-ui-components": "0.0.1-beta.4",
         "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.3",
+    "@egovernments/digit-ui-components": "0.0.1-beta.4",
     "@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.3",
+    "@egovernments/digit-ui-components": "0.0.1-beta.4",
     "react": "17.0.2",
     "react-date-range": "^1.4.0",
     "react-dom": "17.0.2",

diff --git a/react/modules/sample/src/configs/SampleConfig.js b/react/modules/sample/src/configs/SampleConfig.js
@@ -261,16 +261,7 @@ export const newConfig = [
         disable: false,
         infoMessage: "Select the date",
         populators: { name: "date-With Info", error: "Error!" },
-      },
-      {
-        inline: true,
-        label: "EditableDate",
-        isMandatory: false,
-        description: "",
-        type: "date",
-        disable: false,
-        populators: { name: "date-EditableDate", error: "Error!" ,editableDate:true},
-      },
+      }
     ],
   },
   {
@@ -333,15 +324,6 @@ export const newConfig = [
         infoMessage: "Select time",
         populators: { name: "time-With Info", error: "Error!" },
       },
-      {
-        inline: true,
-        label: "EditableTime",
-        isMandatory: false,
-        description: "",
-        type: "time",
-        disable: false,
-        populators: { name: "time-EditableTime", error: "Error!" ,editableTime:true},
-      },
     ],
   },
   {

diff --git a/react/modules/sample/src/pages/employee/Sample.js b/react/modules/sample/src/pages/employee/Sample.js
@@ -3,13 +3,12 @@ import {
   InfoCard,
   Stepper,
   Button,
-  Timeline
+  Timeline,
 } from "@egovernments/digit-ui-components";
 import { Header } from "@egovernments/digit-ui-react-components";
-import React from "react";
+import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { newConfig } from "../../configs/SampleConfig";
-import { useState } from "react";
 
 const Create = () => {
   const { t } = useTranslation();
@@ -186,6 +185,9 @@ const Create = () => {
     "password-Error": "password",
     "password-With Description": "password",
     "password-With InfoMessage": "password",
+
+    "date-Noneditable": "2024-04-03",
+    "time-Noneditable": "03:00",
   };
 
   const onSubmit = (data) => {

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.3",
+    "@egovernments/digit-ui-components": "0.0.1-beta.4",
     "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.4 fixed some date issues 
 0.0.3 Added new components
 0.0.1 base version
 ```

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.3",
+  "version": "0.0.1-beta.4",
   "license": "MIT",
   "main": "dist/index.js",
   "module": "dist/index.modern.js",
@@ -51,7 +51,7 @@
     "dist"
   ],
   "dependencies": {
-    "@egovernments/digit-ui-css": "1.8.2-coreui.2",
+    "@egovernments/digit-ui-css": "1.8.2-coreui.3",
     "@egovernments/digit-ui-libraries": "1.8.1-beta.1",
     "@egovernments/digit-ui-svg-components": "1.0.4",
     "@googlemaps/js-api-loader": "1.13.10",

diff --git a/react/ui-components/src/atoms/MultiSelectDropdown.js b/react/ui-components/src/atoms/MultiSelectDropdown.js
@@ -71,7 +71,7 @@ const MultiSelectDropdown = ({
   window?.Digit?.Hooks.useClickOutside(dropdownRef, handleOutsideClickAndSubmitSimultaneously, active, { capture: true });
   const filtOptns =
     searchQuery?.length > 0
-      ? options.filter(
+      ? options?.filter(
           (option) =>
             t(option[optionsKey] && typeof option[optionsKey] == "string" && option[optionsKey].toUpperCase())
               .toLowerCase()
@@ -86,7 +86,7 @@ const MultiSelectDropdown = ({
   function onSelectToAddToQueue(...props) {
     if (variant === "treemultiselect") {
       const currentoptions = props[0];
-      currentoptions.forEach((option) => {
+      currentoptions?.forEach((option) => {
         const isAlreadySelected = alreadyQueuedSelectedState.some((selectedOption) => selectedOption.code === option.code);
         if (!isAlreadySelected) {
           dispatch({ type: "ADD_TO_SELECTED_EVENT_QUEUE", payload: [null, option] });
@@ -142,7 +142,7 @@ const MultiSelectDropdown = ({
 
   const countFinalChildOptions = (totalselectedOptions) => {
     let count = 0;
-    totalselectedOptions.forEach((option) => {
+    totalselectedOptions?.forEach((option) => {
       if (!option.propsData[1]?.options) {
         count += 1;
       }
@@ -175,7 +175,7 @@ const MultiSelectDropdown = ({
 
   const filteredOptions =
     searchQuery?.length > 0
-      ? options.filter(
+      ? options?.filter(
           (option) =>
             t(option[optionsKey] && typeof option[optionsKey] == "string" && option[optionsKey].toUpperCase())
               .toLowerCase()
@@ -185,7 +185,7 @@ const MultiSelectDropdown = ({
 
   const flattenOptions = (options) => {
     let flattened = [];
-    options.forEach((option) => {
+    options?.forEach((option) => {
       if (option.options) {
         flattened.push(option);
         flattened = flattened.concat(option.options);
@@ -222,8 +222,13 @@ const MultiSelectDropdown = ({
           alreadyQueuedSelectedState.find((selectedOption) => selectedOption.code === option.code) ? "checked" : ""
         }`}
         onMouseDown={() => setIsActive(true)}
-      onMouseUp={() => setIsActive(false)}
-      onMouseLeave={() => setIsActive(false)}
+        onMouseUp={() => setIsActive(false)}
+        onMouseLeave={() => setIsActive(false)}
+        style={
+          index === optionIndex && !alreadyQueuedSelectedState.find((selectedOption) => selectedOption.code === option.code)
+            ? { opacity: 1, backgroundColor: "#FFFAF7", border: "0.5px solid #F47738" }
+            : {}
+        }
       >
         <input
           type="checkbox"
@@ -245,7 +250,11 @@ const MultiSelectDropdown = ({
           <div style={{ display: "flex", gap: "0.25rem", alignItems: "center", width: "100%" }}>
             {config?.showIcon &&
               option?.icon &&
-              IconRender(option?.icon, isActive,alreadyQueuedSelectedState.find((selectedOption) => selectedOption.code === option.code) ? true : false)}
+              IconRender(
+                option?.icon,
+                isActive,
+                alreadyQueuedSelectedState.find((selectedOption) => selectedOption.code === option.code) ? true : false
+              )}
             <p className="digit-label">{t(option[optionsKey] && typeof option[optionsKey] == "string" && option[optionsKey])}</p>
           </div>
           {variant === "nestedtextmultiselect" && option.description && <div className="option-description">{option.description}</div>}
@@ -257,7 +266,11 @@ const MultiSelectDropdown = ({
   const Menu = () => {
     const optionsToRender = variant === "nestedmultiselect" ? flattenedOptions : filteredOptions;
 
-    return optionsToRender.map((option, index) => {
+    if (!optionsToRender) {
+      return null; 
+    }
+
+    return optionsToRender?.map((option, index) => {
       if (option.options) {
         return (
           <div key={index} className="digit-nested-category">
@@ -350,7 +363,7 @@ const MultiSelectDropdown = ({
                 border: "1px solid #F47738",
                 background: "#FAFAFA",
               }}
-              textStyles={{height:"auto",fontSize: "0.875rem", fontWeight: "400", width: "100%", lineHeight: "16px", color: "#F47738" }}
+              textStyles={{ height: "auto", fontSize: "0.875rem", fontWeight: "400", width: "100%", lineHeight: "16px", color: "#F47738" }}
             />
           )}
         </div>