@egovernments/digit-ui-components-css 0.0.2-beta.1 → 0.0.2-beta.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@egovernments/digit-ui-components-css",
-  "version": "0.0.2-beta.1",
+  "version": "0.0.2-beta.6",
   "license": "MIT",
   "main": "dist/index.css",
   "author": "Jagankumar <jagan.kumar@egov.org.in>",
@@ -12,6 +12,7 @@
   },
   "scripts": {
     "start": "gulp build",
+    "build": "NODE_ENV=production gulp build",
     "build:prod": "NODE_ENV=production gulp build",
     "prepublish": "yarn build:prod",
     "publish:css-develop": "npm publish --tag core-v0.1",

package/src/digitv2/components/backLinkV2.scss

@@ -0,0 +1,37 @@
+.digit-back-link {
+    gap: theme(digitv2.spacers.spacer1);
+    display: flex;
+    align-items: center;
+
+    .digit-back-link-icon {
+        flex-shrink: 0;
+        width: theme(digitv2.spacers.spacer6);
+        height: theme(digitv2.spacers.spacer6);
+        cursor: pointer;
+
+        @media (max-width: 30rem) {
+            width: theme(digitv2.spacers.spacer5);
+            height: theme(digitv2.spacers.spacer5);
+        }
+
+    }
+
+    .digit-back-link-label {
+        @extend .typography.body-l;
+        color: theme(digitv2.lightTheme.primary-1);
+        margin-top:0.063rem;
+        cursor: pointer;
+    }
+
+    &.disabled{
+        pointer-events: none;
+        .digit-back-link-label{
+            color: theme(digitv2.lightTheme.text-disabled);
+            cursor: default;
+        }
+
+        .digit-back-link-icon{
+            cursor: default;
+        }
+    }
+}

package/src/digitv2/components/breadcrumbV2.scss

@@ -0,0 +1,57 @@
+@import url("../index.scss");
+@import url("../typography.scss");
+
+.digit-bread-crumb {
+    display: flex;
+    gap: theme(digitv2.spacers.spacer2);
+    height: 1.375rem;
+    padding: unset;
+}
+
+.digit-bread-crumb--item {
+    display: flex;
+    gap: theme(digitv2.spacers.spacer2);
+
+
+    button {
+        outline: none;
+    }
+
+
+    .digit-bread-crumb-content {
+        @extend .typography.body-s;
+        display: flex !important;
+        gap: theme(digitv2.spacers.spacer1);
+        cursor: pointer;
+        text-decoration: none;
+
+        svg {
+            width: theme(digitv2.spacers.spacer5);
+            height: theme(digitv2.spacers.spacer5);
+        }
+
+        color: theme(digitv2.lightTheme.primary-1);
+
+        &:hover {
+            text-decoration: underline;
+        }
+    }
+
+    span {
+        cursor: pointer;
+    }
+
+    .digit-bread-crumb-content.current,
+    .digit-bread-crumb-seperator {
+        @extend .typography.body-s;
+        color: theme(digitv2.lightTheme.text-secondary);
+        text-decoration: none;
+        cursor: default;
+    }
+
+}
+
+ol,
+ul {
+    list-style: none;
+}

package/src/digitv2/components/{tagV2.scss → chipV2.scss}

@@ -118,4 +118,13 @@
       }
     }
   }
+}
+
+.cp{
+  cursor: pointer;
+}
+
+.nonclickable{
+  pointer-events: none;
+  cursor:none;
 }

package/src/digitv2/components/{ErrorMessage.scss → errorMessageV2.scss}

@@ -4,6 +4,8 @@
 .digit-error-icon-message-wrap {
   @apply flex w-full whitespace-pre-wrap break-words;
   gap: theme(digitv2.spacers.spacer1);
+  word-break: break-word;
+  cursor: default;
 
   .digit-error-icon{
       @apply flex items-center;

package/src/digitv2/components/popUpV2.scss

@@ -55,8 +55,8 @@
       }
   
       @media (min-width: 30.063rem) and (max-width: 47.938rem) {
-        top: 0.625rem;
-        right: 0.625rem;
+        top: theme(digitv2.spacers.spacer3);
+        right: theme(digitv2.spacers.spacer3);
       }
   
       @media (max-width: 30rem) {
@@ -104,11 +104,6 @@
             @extend .typography.caption-s;
           }
         }
-  
-        .digit-popup-description {
-          @extend .typography.body-l;
-          color: theme(digitv2.lightTheme.text-primary);
-        }
       }
   
       &.with-shadow {
@@ -145,9 +140,16 @@
     }
   
     .digit-popup-children-wrap {
+      @extend .typography.body-s;
       @apply overflow-hidden overflow-y-auto flex-col;
       display: flex;
       flex: 1;
+      color: theme(digitv2.lightTheme.text-primary);
+
+      .digit-popup-description {
+        @extend .typography.body-s;
+        color: theme(digitv2.lightTheme.text-primary);
+      }
   
       &.inline {
         flex-direction: row;
@@ -233,6 +235,15 @@
         }
       }
     }
+
+
+    &.equal-buttons{
+      width: 100%;
+
+      button{
+        flex:1;
+      }
+    }
   
   
     .digit-popup-alert-content {

package/src/digitv2/components/{selectdropdownV2.scss → selectDropdownV2.scss}

@@ -358,4 +358,8 @@
       }
     }
   }
+}
+
+.cp{
+  cursor: pointer;
 }

package/src/digitv2/components/{stepper.scss → stepperV2.scss}

@@ -13,32 +13,42 @@
   }
 
   .digit-stepper-content {
-    @apply flex flex-col items-center;
+    @apply flex flex-col items-center font-sans font-regular;
     min-height: 4rem;
     gap: theme(digitv2.spacers.spacer2);
+    color: theme(digitv2.lightTheme.text-secondary);
+    font-size: theme(digitv2.spacers.spacer4);
+    line-height: theme(digitv2.spacers.spacer6);
+    text-align: center;
+
 
     .stepper-label {
       @extend .typography.body-s;
       @apply text-center;
       color: theme(digitv2.lightTheme.text-secondary);
       letter-spacing: theme(digitv2.spacers.spacer0);
+
       &.completed {
         color: theme(digitv2.lightTheme.text-primary);
       }
+
       &.current {
         @extend .typography.heading-s;
-        line-height:1.37rem;
+        line-height: 1.37rem;
         color: theme(digitv2.lightTheme.text-primary);
       }
-      &.vertical{
+
+      &.vertical {
         @apply text-left;
-        margin-top:0.438rem;
+        margin-top: 0.438rem;
       }
     }
+
     &.vertical {
       @apply flex-row;
     }
   }
+
   .stepper-circle {
     @apply flex text-center justify-center items-center font-regular w-8 h-8;
     background-color: theme(digitv2.lightTheme.paper-primary);
@@ -46,16 +56,19 @@
     margin-top: theme(digitv2.spacers.spacer1);
     border: 0.125rem solid theme(digitv2.lightTheme.generic-divider);
     color: #787878;
+
     @media (max-aspect-ratio: 9/16) {
       @apply w-6 h-6;
     }
   }
+
   .active {
     @apply font-bold;
     background-color: theme(digitv2.lightTheme.primary-1);
     border-color: theme(digitv2.lightTheme.primary-1);
-    color:theme(digitv2.lightTheme.paper-primary);
+    color: theme(digitv2.lightTheme.paper-primary);
   }
+
   .stepper-connect {
     @apply absolute;
     top: theme(digitv2.spacers.spacer5);
@@ -64,25 +77,30 @@
     border-top: 0.125rem solid theme(colors.border);
     z-index: -1;
     height: 0.125rem;
+
     @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
       min-width: 6.313rem;
       max-width: 39.438rem;
     }
+
     @media (max-aspect-ratio: 9/16) {
       min-width: 4.313rem;
       max-width: 16.875rem;
       top: 0.875rem;
     }
+
     @media (min-aspect-ratio: 3/4) {
       min-width: 5.313rem;
       max-width: 82.688rem;
     }
+
     &.active {
       background-color: theme(digitv2.lightTheme.primary-1);
       border-color: theme(digitv2.lightTheme.primary-1);
-      height:theme(digitv2.spacers.spacer1);
+      height: theme(digitv2.spacers.spacer1);
       border-top: theme(digitv2.spacers.spacer1) solid theme(digitv2.lightTheme.primary-1);
     }
+
     &.vertical {
       top: calc(50% + (theme(digitv2.spacers.spacer2)));
       bottom: calc(-50% + (theme(digitv2.spacers.spacer2)));
@@ -90,20 +108,23 @@
       width: 0.125rem;
       height: auto;
       transform: rotate(90deg);
+
       &.active {
         background-color: transparent;
         border-color: theme(digitv2.lightTheme.primary-1);
       }
     }
   }
+
   .digit-stepper-content:hover {
     .stepper-circle.active {
       outline: theme(digitv2.spacers.spacer1) solid #F477381F;
     }
+
     .stepper-label {
       &.completed {
         @extend .typography.heading-s;
-        line-height:1.37rem;
+        line-height: 1.37rem;
         color: theme(digitv2.lightTheme.text-primary);
       }
     }
@@ -111,8 +132,8 @@
 }
 
 .digit-stepper-container::-webkit-scrollbar {
-  width:theme(digitv2.spacers.spacer2);
-  height:theme(digitv2.spacers.spacer2);
+  width: theme(digitv2.spacers.spacer2);
+  height: theme(digitv2.spacers.spacer2);
   background-color: theme(digitv2.lightTheme.generic-background);
 }
 

package/src/digitv2/components/{timeline.scss → timelineV2.scss}

@@ -1,5 +1,5 @@
 .digit-timeline-item {
-  @apply flex items-start;
+  @apply flex items-start relative ;
   gap: theme(digitv2.spacers.spacer4);
 }
 
@@ -13,6 +13,30 @@
   }
 }
 
+.connector-line {
+  @apply absolute bottom-0 border-solid border-border;
+  border-left-width: 0.125rem;
+  margin-left: 0.938rem;
+  top: theme(digitv2.spacers.spacer8);
+
+  &.completed,
+  &.inprogress,
+  &.nextActiveStep{
+    border-color: theme(digitv2.lightTheme.primary-1);
+  }
+
+  &.nextActiveStep{
+    border-style: dotted;
+  }
+
+  @media (max-aspect-ratio: 9/16) {
+    /* Media query for mobile */
+    margin-left: 0.688rem;
+    top: theme(digitv2.spacers.spacer6);
+    border-left-width: 0.063rem;
+  }
+}
+
 .timeline-content,
 .timeline-info {
   @apply flex flex-col w-full;
@@ -86,7 +110,7 @@ img {
 /* Circle Variants */
 .timeline-circle,
 .timeline-circle.upcoming {
-    background-color: theme(digitv2.lightTheme.text-disabled);
+  background-color: theme(digitv2.lightTheme.text-disabled);
 }
 
 .timeline-circle.inprogress {
@@ -124,4 +148,12 @@ img {
       height: 1.125rem;
     }
   }
-}
+}
+
+.digit-timeline-molecule{
+  @apply max-h-full;
+}
+
+.view-more-container {
+  margin-top: theme(digitv2.spacers.spacer4);
+}

package/src/digitv2/components/{uploader.scss → uploaderV2.scss}

@@ -68,6 +68,10 @@
     gap: theme(digitv2.spacers.spacer2);
   }
 
+  &.error{
+    gap:theme(digitv2.spacers.spacer1);
+  }
+
   .digit-upload-label {
     @extend .typography.label;
     @apply text-left;
@@ -188,9 +192,45 @@
       width: 6.25rem;
       min-height: 6.25rem;
 
+      .overlay {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 6.25rem !important;
+        height: 6.25rem !important;
+        background: #6f6f6fb2;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+
+        &.error{
+          background: rgba(185, 25, 0, 0.2);
+          
+          &:hover{
+            background: transparent;
+          }
+        }
+
+        &:hover{
+          background: transparent;
+        }
+      }
+
+
+      .digit-docupload-icon{
+        border: 0.063rem solid theme(digitv2.lightTheme.generic-divider);
+
+        &:hover{
+          box-shadow: 0rem 0.063rem 0.125rem 0rem #00000029;
+        }
+      }
+
       .preview-file-name{
+        @extend .typography.body-xs;
         @apply whitespace-pre-wrap break-words;
-        color: theme(digitv2.lightTheme.text-primary);
+        color: theme(digitv2.lightTheme.text-secondary);
+        word-break: break-word;
+        cursor: default;
       }
 
       img {
@@ -209,6 +249,17 @@
       }
     }
 
+    .preview-container.uploadImage.singleUpload {
+      width: 100%; 
+      height: 100%; 
+
+      img{
+        width: 100% !important;
+        height: 100% !important;
+        object-fit: cover; 
+      }
+    }
+
     @media (min-width: 30.063rem) and (max-width: 47.938rem) {
       min-width: 20.75rem;
     }
@@ -282,6 +333,10 @@
       gap: theme(digitv2.spacers.spacer4);
       margin-left: auto;
       margin-right: theme(digitv2.spacers.spacer6);
+
+      &.error-card{
+        margin-right: theme(digitv2.spacers.spacer0);
+      }
     }
 
     .digit-uploadpopup-close-icon {

package/src/digitv2/index.scss

@@ -1,67 +1,34 @@
-@import url("./components/actionbarV2.scss");
-@import url("./components/actionLinkV2.scss");
-@import url("./components/appContainerV2.scss");
-@import url("./components/backButtonV2.scss");
-@import url("./components/bannerV2.scss");
+@import url("./components/backLinkV2.scss");
 @import url("./components/bodyContainerV2.scss");
-@import url("./components/breadCrumbV2.scss");
-@import url("./components/breakLineV2.scss");
+@import url("./components/breadcrumbV2.scss");
 @import url("./components/buttonsV2.scss");
-@import url("./components/cardBasedOptionsV2.scss");
-@import url("./components/cardLabelV2.scss");
 @import url("./components/checkboxV2.scss");
-@import url("./components/checkpointV2.scss");
-@import url("./components/CitizenHomeCardV2.scss");
-@import url("./components/collapseAndExpandGroups.scss");
-@import url("./components/dateWrapV2.scss");
-@import url("./components/detailsCardV2.scss");
-@import url("./components/displayPhotosV2.scss");
-@import url("./components/ErrorMessage.scss");
-@import url("./components/footerV2.scss");
+@import url("./components/errorMessageV2.scss");
+@import url("./components/fieldV1.scss");
 @import url("./components/FormComposerV2.scss");
-@import url("./components/headerV2.scss");
-@import url("./components/headerBarV2.scss");
-@import url("./components/infoCardV2.scss");
-@import url("./components/keynoteV2.scss"); 
+@import url("./components/infobuttonV2.scss");
+@import url("./components/infoCardV2.scss"); 
 @import url("./components/labelFieldPairV2.scss");
-@import url("./components/loaderV2.scss");
 @import url("./components/mobileNumberV2.scss");
-@import url("./components/modalV2.scss");
 @import url("./components/multiSelectDropdownV2.scss");
-@import url("./components/multiUploadWrapperV2.scss");
-@import url("./components/navbarV2.scss");
-@import url("./components/noresultsfoundV2.scss");
-@import url("./components/otpInputV2.scss");
-@import url("./components/PageBasedInputV2.scss");
-@import url("./components/paragraphV2.scss");
+@import url("./components/panelCardV2.scss");
+@import url("./components/panelV2.scss");
 @import url("./components/popUpV2.scss");
 @import url("./components/radiobtnV2.scss");
-@import url("./components/ratingV2.scss");
-@import url("./components/searchActionV2.scss");
-@import url("./components/searchFormV2.scss");
-@import url("./components/selectdropdownV2.scss");
-@import url("./components/tagV2.scss");
-@import url("./components/telephoneV2.scss");
+@import url("./components/chipV2.scss");
+@import url("./components/selectDropdownV2.scss");
+@import url("./components/stepperV2.scss");
 @import url("./components/textareaV2.scss");
+@import url("./components/textblockV2.scss");
 @import url("./components/textInputV2.scss");
+@import url("./components/timelineV2.scss");
 @import url("./components/toastV2.scss");
-@import url("./components/topbarV2.scss");
-@import url("./components/uploadFileV2.scss");
-@import url("./components/WhatsNewCardV2.scss");
-@import url("./components/fieldV1.scss");
-@import url("./components/toggle.scss");
-@import url("./components/toggleswitchV2.scss");
+@import url("./components/toggleV2.scss");
 @import url("./components/treeSelectV2.scss");
-@import url("./components/cardV2.scss");
-@import url("./components/searchcomponent.scss");
-@import url("./components/sidebarV2.scss");
-@import url("./components/stepper.scss");
-@import url("./components/timeline.scss");
-@import url("./components/infobuttons.scss");
-@import url("./components/uploader.scss");
-@import url("./components/textblock.scss");
-@import url("./components/panels.scss");
-@import url("./components/panelcard.scss");
+@import url("./components/uploaderV2.scss");
+
+
+
 
 /* pages */
 @import url("./pages/employee/index.scss");

package/src/digitv2/typography.scss

@@ -1,25 +1,6 @@
 @import url("../index.scss");
 
 .typography {
-  &.text-heading-xl {
-    font-family: theme(digitv2.fontFamily.rc);
-    font-style: theme(digitv2.fontStyle.normal);
-    font-weight: theme(digitv2.fontWeight.bold);
-    color: theme(digitv2.lightTheme.text-primary);
-    line-height: theme(digitv2.lineHeight.normal);
-
-    @media (min-width: theme(digitv2.screens.desktop)) {
-      font-size: theme(digitv2.fontSize.heading-xl.desktop);
-    }
-
-    @media (min-width: theme(digitv2.screens.tablet)) {
-      font-size: theme(digitv2.fontSize.heading-xl.tablet);
-    }
-
-    @media (min-width: theme(digitv2.screens.mobile)) {
-      font-size: theme(digitv2.fontSize.heading-xl.mobile);
-    }
-  }
 
   &.text-heading-l {
     font-family: theme(digitv2.fontFamily.sans);
@@ -261,7 +242,7 @@
 
 
   &.heading-xl {
-    font-family: theme(digitv2.fontFamily.sans);
+    font-family: theme(digitv2.fontFamily.rc);
     font-style: theme(digitv2.fontStyle.normal);
     font-weight: theme(digitv2.fontWeight.bold);
     line-height: theme(digitv2.lineHeight.lineheight1);