@egovernments/digit-ui-components-css 0.0.1 → 0.0.2-beta.10

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;
@@ -78,6 +82,22 @@
   .digit-uploader-content {
     @apply flex w-full;
     gap: theme(digitv2.spacers.spacer3);
+
+    @media (min-width: 30.063rem) and (max-width: 47.938rem) {
+      max-width: 27.5rem;
+      min-width: 21rem;
+    }
+
+    @media (max-width: 30rem) {
+      max-width: 20.563rem;
+      min-width: 18rem;
+    }
+
+    @media (min-width: 48rem) {
+      max-width: 37.5rem;
+      min-width: 20.75rem;
+    }
+
   }
 
   label {
@@ -85,12 +105,13 @@
   }
 
   .digit-uploader-content-uploadpopup {
-    @apply flex flex-col w-full items-center justify-center max-w-full border-dashed;
+    @apply flex flex-col w-full items-center justify-center max-w-full;
     gap: theme(digitv2.spacers.spacer4);
     border: 0.063rem solid theme(digitv2.lightTheme.generic-divider);
     background: theme(digitv2.lightTheme.paper-secondary);
     padding: theme(digitv2.spacers.spacer4);
     height: 9rem;
+    border-style: dashed;
 
     @media (min-width: 30.063rem) and (max-width: 47.938rem) {
       min-width: 18.75rem;
@@ -121,7 +142,7 @@
     }
 
     &.error {
-      @apply border-dashed;
+      border-style: dashed !important;
       border: 0.094rem solid theme(digitv2.lightTheme.alert-error);
     }
   }
@@ -188,9 +209,44 @@
       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 {
@@ -207,18 +263,46 @@
           border: 0.063rem solid theme(digitv2.lightTheme.alert-error);
         }
       }
-    }
 
-    @media (min-width: 30.063rem) and (max-width: 47.938rem) {
-      min-width: 20.75rem;
+      &.single.imageFile{
+        width: 100%;
+
+        img{
+          width: 100% !important;
+        }
+
+        .overlay{
+          width: 100% !important;
+        }
+      }
     }
 
-    @media (max-width: 30rem) {
-      min-width: 18rem;
+    .preview-container.uploadImage.singleUpload {
+      width: 100%; 
+      height: 100%; 
+
+      img{
+        width: 100% !important;
+        height: 100% !important;
+        object-fit: cover; 
+      }
     }
 
-    @media (min-width: 48rem) {
-      min-width: 20.75rem;
+    &:not(.uploadImage){
+      @media (min-width: 30.063rem) and (max-width: 47.938rem) {
+        max-width: 27.5rem;
+        min-width: 21rem;
+      }
+  
+      @media (max-width: 30rem) {
+        max-width: 20.563rem;
+        min-width: 18rem;
+      }
+  
+      @media (min-width: 48rem) {
+        max-width: 37.5rem;
+        min-width: 20.75rem;
+      }
     }
   }
 
@@ -282,6 +366,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/components/viewCardFieldPairV2.scss

@@ -0,0 +1,45 @@
+.digit-viewcard-field-pair{
+    @apply w-full flex-col;
+    display: flex;
+    height: fit-content;
+    background-color: transparent;
+    gap: theme(digitv2.spacers.spacer1);
+
+    .digit-viewcard-label{
+        @extend .typography.heading-s;
+        @apply whitespace-pre-wrap break-words w-full;
+        word-break: break-word;
+        color: theme(digitv2.lightTheme.text-primary);
+    }
+
+    .digit-viewcard-value{
+        @extend .typography.body-s;
+        @apply whitespace-pre-wrap break-words w-full;
+        color: theme(digitv2.lightTheme.text-primary);
+    }
+
+    &.inline{
+        flex-direction: row;
+
+        @media (min-width: 48rem) {
+            gap: theme(digitv2.spacers.spacer6);
+        }
+    
+        @media (min-width: 30.063rem) and (max-width: 47.938rem) {
+            gap: theme(digitv2.spacers.spacer5);
+        }
+    
+        @media (max-width: 30rem) {
+            gap: theme(digitv2.spacers.spacer4);
+        }
+
+        .digit-viewcard-label{
+            width: 20%;
+        }
+
+        .digit-viewcard-value{
+            width: 80%;
+        }
+
+    }
+}

package/src/digitv2/index.scss

@@ -1,67 +1,38 @@
-@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/cardlabelV2.scss");
+@import url("./components/cardbasedoptionsV2.scss");
+@import url("./components/cardV2.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/dividerV2.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");
+@import url("./components/viewCardFieldPairV2.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);

package/src/index.scss

@@ -11,105 +11,12 @@
 @import "react-date-range/dist/styles.css";
 @import "react-date-range/dist/theme/default.css";
 
-@import "./components/loader.scss";
-
-@import "./components/body.scss";
-@import "./components/navbar.scss";
-@import "./components/card.scss";
-@import "./components/buttons.scss";
-@import "./components/radiobtn.scss";
-@import "./components/selectdropdown.scss";
-@import "./components/textfields.scss";
-@import "./components/bannercomponents.scss";
-@import "./components/datewrap.scss";
-@import "./components/datatable.scss";
-@import "./components/checkpoint.scss";
-@import "./components/checkbox.scss";
-@import "./components/inputotp.scss";
-@import "./components/map.scss";
-@import "./pages/employee/tooltip.scss";
-@import "./components/menu.scss";
-@import "./components/submiterrors.scss";
-@import "./components/ratingstar.scss";
-@import "./components/keynote.scss";
-@import "./components/statushighlight.scss";
-@import "./components/imageviewer.scss";
-@import "./components/actionbar.scss";
-@import "./components/table.scss";
-@import "./components/popup.scss";
-@import "./components/uploadcomponents.scss";
-@import "./components/toast.scss";
-@import "./components/detailscontainer.scss";
-@import "./components/telephone.scss";
-@import "./components/grey.scss";
-@import "./components/actionLink.scss";
-@import "./components/sectionalDropdown.scss";
-@import "./components/detailscard.scss";
-@import "./components/searchAction.scss";
-@import "./components/tag.scss";
-@import "./components/topbar.scss";
-@import "./components/languageSelector.scss";
-@import "./components/custombtn.scss";
-@import "./components/citizenInfoLabel.scss";
-@import "./components/roundedLabel.scss";
-@import "./components/changeLanguage.scss";
-@import "./components//metricsTable.scss";
-@import "./components/filters.scss";
-@import "./components//charts.scss";
-@import "./components/summary.scss";
-@import "./components/multiLink.scss";
-@import "./components/info-banner.scss";
-@import "./components/multiSelectDropdown.scss";
-@import "./components/EllipsisMenu.scss";
-@import "./components/CitizenHomeCard.scss";
-@import "./components/PropertySearchForm.scss";
-@import "./components/SearchForm.scss";
-@import "./components/cardHeaderWithOptions.scss";
-@import "./components/TimeLine.scss";
-@import "./components/PageBasedInput.scss";
-@import "./components/StandaloneSearchBar.scss";
-@import "./components/CardBasedOptions.scss";
-@import "./components/WhatsNewCard.scss";
-@import "./components/SearchOnRadioButton.scss";
-@import "./components/EventCalendarView.scss";
-@import "./components/OnGroundEventCard.scss";
-@import "./components/PopupHeadingLabel.scss";
-@import "./components/staticSideBar.scss";
-@import "./components/hoc/index.scss";
-@import "./components/FAQ.scss";
-@import "./components//howItWorks.scss";
-@import "./components/staticDynamicMessages.scss";
-@import "./components/toggleSwitch.scss";
-@import "./components/plusMinus.scss";
-
 @import "./pages/employee/index.scss";
-@import "./pages/employee/cardfix.scss";
-@import "./pages/employee/popupmodule.scss";
-@import "./pages/employee/container.scss";
-@import "./pages/employee/inbox.scss";
-@import "./pages/employee/response.scss";
-@import "./pages/employee/form-fields.scss";
-@import "./pages/employee/scroll-table.scss";
-@import "./pages/employee/EmployeeLogin.scss";
-@import "./pages/employee/updateNumber.scss";
-@import "./pages/employee/oldMobileInbox.scss";
-@import "./pages/employee/dss.scss";
-@import "./pages/employee/iframe.scss";
-
-@import "./pages/citizen/payment/payment-type.scss";
-@import "./pages/citizen/container.scss";
-@import "./pages/citizen/HomePageWrapper.scss";
-@import "./pages/citizen/CitizenEngagementNotificationWrapper.scss";
-@import "./pages/citizen/Events.scss";
-@import "./pages/citizen/DocumentList.scss";
-@import "./pages/citizen/SurveyList.scss";
-@import "./pages/citizen/updatePropertyNumber.scss";
-@import "./pages/citizen/citizenDocument.scss";
-@import "./pages/employee/surveys.scss";
+@import "./pages/employee/login.scss";
+
 @import "./digitv2/index.scss";
 @import "./digitv2/typography.scss";
-@import "./components/inboxv2/index.scss";
-@import "./components//sidebar.scss";
+
 
 .display-none {
   display: none;

package/src/pages/employee/index.scss

@@ -133,7 +133,7 @@
     height: 100%;
     color: theme(colors.white);
     margin-top: 83px;
-    z-index: 10000;
+    z-index: 999;
     transition: 0.3s ease all;
     white-space: nowrap;
     height: calc(100vh - 36px);

package/src/components/CardBasedOptions.scss

@@ -1,46 +0,0 @@
-.CardBasedOptions {
-  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.16);
-  @apply bg-white mb-md px-sm py-md mx-sm rounded w-full;
-  .headContent {
-    @apply flex justify-between mb-lg;
-    h2 {
-      @apply text-heading-s font-bold text-text-primary;
-    }
-    p {
-      @apply text-link text-primary-main font-medium cursor-pointer;
-    }
-  }
-
-  .mainContent {
-    @apply flex justify-evenly;
-    .CardBasedOptionsMainChildOption {
-      width: 25%;
-      @apply text-center;
-      .ChildOptionImageWrapper {
-        margin: auto !important;
-        background: rgba(244, 119, 56, 0.12);
-        mix-blend-mode: normal;
-        padding-top: 14px;
-        @apply h-12 w-12 rounded-full cursor-pointer;
-        svg {
-          height: 20px;
-          width: 20px;
-          fill: theme(colors.primary.main);
-          margin: auto;
-        }
-      }
-      .ChildOptionName {
-        font-size: 12px;
-        line-height: 14px;
-        padding-top: 1rem;
-      }
-    }
-  }
-}
-
-@screen dt {
-  .CardBasedOptions {
-    width: calc(50% - 16px);
-    @apply p-md;
-  }
-}

package/src/components/CitizenHomeCard.scss

@@ -1,56 +0,0 @@
-.CitizenHomeCard {
-  @apply bg-white mx-md p-md mb-lg;
-
-  .header {
-    @apply flex font-bold text-heading-l text-text-primary justify-between pb-sm;
-
-    svg {
-      width: 33px;
-      height: 33px;
-    }
-  }
-
-  .links {
-    @apply text-heading-s text-primary-main;
-
-    a {
-      @apply block pb-sm;
-    }
-  }
-}
-
-@screen dt {
-  .citizenAllServiceGrid {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    flex: 1;
-  }
-
-  .CitizenHomeCard {
-    @apply p-lg;
-    .header {
-      @apply pb-lg text-heading-l-dt;
-      svg {
-        @apply w-12 h-12;
-      }
-    }
-
-    .links {
-      @apply grid grid-cols-4 gap-px;
-      .linksWrapper {
-        height: 25px;
-        margin-bottom: 0.5em;
-      }
-      a {
-        @apply pb-md;
-        padding-left: 0.2em;
-        margin-bottom: 16px;
-        width: 100%;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        min-width: 0;
-      }
-    }
-  }
-}

package/src/components/EllipsisMenu.scss

@@ -1,17 +0,0 @@
-.ellipsis-menu-wrap{
-    @apply relative;
-    
-    .menu{
-        box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12), 0 5px 5px -3px rgba(0, 0, 0, 0.2);
-        @apply absolute right-0 bg-white z-30;
-        .item{
-            @apply flex items-center justify-between p-sm;
-            &:hover{
-                @apply bg-grey-mid cursor-pointer;
-            }
-            svg {
-              margin-right: 10px;
-            }
-        }
-    }
-}

package/src/components/EventCalendarView.scss

@@ -1,10 +0,0 @@
-.EventCalendarView{
-    .MonthViewInEventCalendar{
-        @apply bg-primary-main text-legend text-white font-medium text-center py-sm;
-    }
-
-    .DateViewInEventCalendar{
-        @apply bg-grey-mid text-heading-l font-bold text-primary-main text-center py-md;
-    }
-
-}

package/src/components/FAQ.scss

@@ -1,64 +0,0 @@
-.searchInputFAQs {
-    @apply mr-lg;
-    margin-bottom: 10px;
-    input{
-      margin-bottom: 0;
-      background: border-box;
-      @apply pr-xl;
-    }
-  }
-
-.faq-page{
-  width: 92%;
-  margin: 16px;
-}
-
-.faqs{
-  cursor: pointer;
-  .faq-question{
-    font-weight: 400;
-    margin: 16px;
-    background: #fff;
-    justify-content: space-between;
-    display: flex;
-    font-size: 16px;
-  }
-
-  .faqicon{
-    float: right;
-  }
-
-  .faq-answer{
-    background: #fff;
-    overflow: hidden;
-    margin: 5px;
-    @apply text-form-field text-text-secondary mb-sm;
-
-    span {
-      display: block; 
-      font-size: 14px;
-      font-weight: 400;
-      margin: 0px 12px 5px
-    }
-  }
-  .cs-box-border {
-    height: 1px;
-    position: relative;
-    border-bottom: 1px solid lightgray;;
-    background: lightgray;
-    margin-left: 16px;
-    margin-right: 16px;
-  }
-}
-
-.faq-list{
-  background: #fff;
-  margin: 5px 0;
-  padding-top: 4px;
-  padding-bottom: 4px;
-}
-  
-.rotate {
-  transform: rotate(90deg);
-}
-