@egovernments/digit-ui-components-css 0.2.0-beta.8 → 0.2.0-rc.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@egovernments/digit-ui-components-css",
-  "version": "0.2.0-beta.8",
+  "version": "0.2.0-rc.1",
   "license": "MIT",
   "main": "dist/index.css",
   "author": "Jagankumar <jagan.kumar@egovernments.org>",
@@ -24,7 +24,9 @@
     "last 2 versions"
   ],
   "style": "./dist/index.css",
-  "dependencies": {},
+  "dependencies": {
+    "react-datepicker": "4.8.0"
+  },
   "devDependencies": {
     "node-sass": "^4.14.1",
     "normalize.css": "^8.0.1",

package/src/digitv2/components/fieldV1.scss

@@ -23,6 +23,10 @@
             }
         }
 
+        &.boldLabel{
+          font-weight: 700;
+        }
+
         .label-container {
             @apply flex items-center w-full;
             gap: theme(digitv2.spacers.spacer1);

package/src/digitv2/components/textInputV2.scss

@@ -462,4 +462,20 @@
   &.disabled {
     @apply pointer-events-none;
   }
+}
+
+.digit-new-date-format{
+  position: absolute;
+  top: 50%;
+  right: 12px;
+  transform: translateY(-50%);
+  cursor: pointer;
+  z-index: 2;
+  pointer-events: auto;
+}
+
+.digit-new-date-format.disabled{
+  pointer-events: none;
+  opacity: 0.4;
+  cursor: not-allowed;
 }

package/src/digitv2/components/toggleV2.scss

@@ -108,4 +108,79 @@
 .digit-toggle-label {
   color: theme(digitv2.lightTheme.text-disabled);
   padding: theme(digitv2.spacers.spacer2) theme(digitv2.spacers.spacer3);
-}
+}
+
+
+.digit-toggle-toolbar.vertical-toggle {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+}
+
+.digit-toggle-toolbar.vertical-toggle .toggle-option-container {
+  width: fit-content !important;
+  max-width: 100% !important;
+}
+
+.digit-toggle-toolbar.vertical-toggle .digit-toggle-btn-wrap {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0.75rem;
+  background-color: theme(digitv2.lightTheme.paper-primary);
+  border: 1px solid #d6d6d6;
+  cursor: pointer;
+  transition:  all 0.2s ease;
+  width: 8.5rem !important; 
+  min-width: 6.25rem; 
+  height: 8.125rem;
+}
+
+.vertical-toggle .toggle-option-container:first-child .digit-toggle-btn-wrap {
+  border-top-left-radius: 0.5rem;
+  border-top-right-radius: 0.5rem;
+}
+
+.vertical-toggle .toggle-option-container:last-child .digit-toggle-btn-wrap {
+  border-bottom-left-radius: 0.5rem;
+  border-bottom-right-radius: 0.5rem;
+}
+
+.digit-toggle-toolbar.vertical-toggle .digit-toggle-btn-wrap.checked {
+  border: 2px solid theme(digitv2.lightTheme.primary-1);
+  background-color: theme(digitv2.lightTheme.paper-primary) !important;
+  color: theme(digitv2.lightTheme.primary-1);
+  width: 9rem !important;
+  transform: scaleX(1.05); 
+}
+
+.digit-toggle-toolbar.vertical-toggle .digit-toggle-label {
+  font-weight: bold;
+  font-size: theme(digitv2.fontSize.heading-s);
+  text-align: center;
+  width: 100%;
+  background-color: theme(digitv2.lightTheme.paper-primary);
+  color: theme(digitv2.lightTheme.primary-2);
+}
+
+.digit-toggle-input {
+  display: none;
+}
+.vertical-toggle .digit-toggle-btn-wrap input:checked + .digit-toggle-label {
+  background-color:theme(digitv2.lightTheme.paper-primary) !important;
+  color: theme(digitv2.lightTheme.primary-1) !important;
+  border-bottom-right-radius: 0.5rem;
+  border-top-right-radius: 0.5rem;
+}
+.vertical-toggle .digit-toggle-btn-wrap.checked {
+  border-bottom-right-radius: 0.5rem;
+  border-top-right-radius: 0.5rem;
+}
+.vertical-toggle{
+  .digit-toggle-label{
+    &.disabled{
+      color: theme(digitv2.lightTheme.text-disabled) !important;
+    }
+  }
+}

package/src/digitv2/pages/employee/boundaryFilter.scss

@@ -0,0 +1,63 @@
+.selecting-boundary-div {
+    padding-top: 0.5rem;
+   
+    gap:1.5rem;
+    .label-field-pair {
+        margin-bottom: 1.5rem;
+    }
+
+}
+
+
+
+.selecting-boundary-div.horizontal-layout {
+    display: grid; 
+    grid-template-columns: repeat(3, 1fr); 
+    align-items: flex-start;
+  }
+
+
+.digit-card-label.boundary-selection-label{
+    font-family: theme(digitv2.fontFamily.sans);
+    font-style: theme(digitv2.fontStyle.normal);
+    font-weight: theme(digitv2.fontWeight.bold);
+
+    @media (max-width: 30rem) {
+        /* Media query for mobile */
+        font-size: theme(digitv2.fontSize.heading-s.mobile);
+    }
+
+    @media (min-width: 30.063rem) and (max-width: 47.938rem) {
+        /* Media query for tablets */
+        font-size: theme(digitv2.fontSize.heading-s.tablet);
+    }
+
+    @media (min-width: 48rem) {
+        /* Media query for desktop */
+        font-size: theme(digitv2.fontSize.heading-s.desktop);
+    }
+
+    color: theme(digitv2.lightTheme.text-primary);
+    width:30%;
+} 
+.selecting-boundary-div.horizontal-layout .boundary-item {
+    display: flex;
+    justify-content: center;
+ }
+
+ .digit-field-full{
+    width:100%;
+ }
+
+ .digit-label-field-pair.boundary-item.vertical{
+    margin-bottom: 0rem;
+ } 
+ 
+ .padding-dropdown{
+    padding-bottom: 1.6rem;
+ }
+
+ .filter-card.filter-card-vertical .selecting-boundary-div {
+    max-width: 65%;
+  }
+  

package/src/digitv2/pages/employee/inboxsearchcomposer.scss

@@ -427,4 +427,74 @@
     display: flex;
     align-items: center;
     justify-content: center ;
+}
+
+.digit-custom-row-wrapper{
+    display: flex;
+    flex-direction: column;
+    gap: theme(digitv2.spacers.spacer6);
+}
+
+.footer-pagination-content {
+    &.digit-results-table{
+        margin-top:1.5rem;
+
+        td{
+            width: 100%;
+
+            .pagination{
+                border-top: none;
+            }
+        }
+    }
+}
+.digit-results-card-component {
+    .digit-results-card-heading-tags-wrapper {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+
+        .digit-results-card-heading {
+            color: theme(digitv2.lightTheme.primary-2);
+            font-family: theme(digitv2.fontFamily.sans);
+            font-style: theme(digitv2.fontStyle.normal);
+            font-weight: theme(digitv2.fontWeight.bold);
+            line-height: theme(digitv2.lineHeight.lineheight1);
+
+            @media (max-aspect-ratio: 9/16) {
+                /* Media query for mobile */
+                font-size: theme(digitv2.fontSize.heading-m.mobile);
+            }
+
+            @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
+                /* Media query for tablets */
+                font-size: theme(digitv2.fontSize.heading-m.tablet);
+            }
+
+            @media (min-aspect-ratio: 3/4) {
+                /* Media query for desktop */
+                font-size: theme(digitv2.fontSize.heading-m.desktop);
+            }
+        }
+
+        .digit-results-card-tags {
+            display: flex;
+            gap: theme(digitv2.spacers.spacer4);
+        }
+    }
+}
+
+.pagination {
+    &.custom-results {
+
+        button {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+
+            svg {
+                margin-left: theme(digitv2.spacers.spacer0);
+            }
+        }
+    }
 }

package/src/digitv2/pages/employee/index.scss

@@ -1,3 +1,4 @@
 @import url("./workbench.scss");
+@import url("./boundaryFilter.scss");
 @import url("./inboxsearchcomposer.scss");
-@import url("./reactdatatable.scss");
+@import url("./reactdatatable.scss");

package/src/index.scss

@@ -10,6 +10,7 @@
 
 @import "react-date-range/dist/styles.css";
 @import "react-date-range/dist/theme/default.css";
+@import "react-datepicker/dist/react-datepicker.css";
 
 @import "./pages/employee/index.scss";
 @import "./pages/employee/login.scss";