Added MaterialUI Icons,Updated Colors and Spacers Stories (#135)

* Added MaterialUI Icons,Updated Colors and Spacers Stories * removed material icons dependency
egovernments · Oct 14, 2024 · aa08933 · aa08933
1 parent d867276
commit aa08933
Show file tree

Hide file tree

Showing 39 changed files with 1,050 additions and 550 deletions.
diff --git a/react/css/src/digitv2/components/bottomSheetV2.scss b/react/css/src/digitv2/components/bottomSheetV2.scss
@@ -24,7 +24,6 @@
 
 .digit-bottom-sheet-header {
     display: flex;
-    align-items: center;
     justify-content: center;
     height: theme(digitv2.spacers.spacer10);
 
@@ -95,6 +94,14 @@
             flex: 1;
         }
     }
+
+    @media (max-aspect-ratio: 9/16) {
+        justify-content: flex-start;
+
+        button {
+            flex: 1;
+        }
+    }
 }
 
 .digit-bottom-sheet-content::-webkit-scrollbar {

diff --git a/react/css/src/digitv2/components/buttonsV2.scss b/react/css/src/digitv2/components/buttonsV2.scss
@@ -144,6 +144,9 @@
     @apply bg-white;
     box-shadow: theme(digitv2.spacers.spacer0) -0.125rem theme(digitv2.spacers.spacer0) theme(digitv2.spacers.spacer0) theme(digitv2.lightTheme.primary-1) inset, theme(digitv2.spacers.spacer0) theme(digitv2.spacers.spacer1) theme(digitv2.spacers.spacer1) theme(digitv2.spacers.spacer0) #C84C0E33;
 
+    h2 {
+      font-weight: theme(digitv2.fontWeight.bold);
+    }
   }
 
   h2 {

diff --git a/react/css/src/digitv2/components/chipV2.scss b/react/css/src/digitv2/components/chipV2.scss
@@ -46,6 +46,10 @@
     }
 
 
+    svg{
+      flex-shrink: 0;
+    }
+
     .digit-text {
       @extend .typography.body-xs;
       @apply overflow-hidden items-center whitespace-no-wrap;
@@ -141,7 +145,13 @@
 
 .digit-tag{
   &.noClose{
-    display: inline;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    &.noIcon{
+      display: unset;
+    }
   }
 }
 

diff --git a/react/css/src/digitv2/components/fieldV1.scss b/react/css/src/digitv2/components/fieldV1.scss
@@ -1,5 +1,12 @@
 @import url("../index.scss");
 
+.label-field-wrapper{
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    gap: theme(digitv2.spacers.spacer1);
+}
+
 .digit-header-content {
 
     &.label {

diff --git a/react/css/src/digitv2/components/headerdropdownV2.scss b/react/css/src/digitv2/components/headerdropdownV2.scss
@@ -195,6 +195,26 @@
     @extend .typography.heading-s;
     background: theme(digitv2.lightTheme.primary-1) !important;
     color: theme(digitv2.lightTheme.paper-primary);
+
+    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-s.mobile);
+    }
+
+    @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
+      /* Media query for tablets */
+      font-size: theme(digitv2.fontSize.heading-s.tablet);
+    }
+
+    @media (min-aspect-ratio: 3/4) {
+      /* Media query for desktop */
+      font-size: theme(digitv2.fontSize.heading-s.desktop);
+    }
   }
 
   .header-dropdown-options::-webkit-scrollbar {

diff --git a/react/css/src/digitv2/components/multiSelectDropdownV2.scss b/react/css/src/digitv2/components/multiSelectDropdownV2.scss
@@ -24,7 +24,33 @@
     @apply relative h-10 w-full bg-white;
     border: 0.063rem solid theme(digitv2.lightTheme.generic-inputborder);
     input[type="text"] {
-      @extend .typography.body-l;
+      @extend .typography.body-s;
+      @media (max-aspect-ratio: 9/16) {
+        /* Media query for mobile */
+        font-size: theme(digitv2.fontSize.body-s.mobile);
+        font-family: theme(digitv2.fontFamily.sans);
+        font-style: theme(digitv2.fontStyle.normal);
+        font-weight: theme(digitv2.fontWeight.regular);
+        line-height: theme(digitv2.lineHeight.lineheight2);
+      }
+
+      @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
+        /* Media query for tablets */
+        font-size: theme(digitv2.fontSize.body-s.tablet);
+        font-family: theme(digitv2.fontFamily.sans);
+        font-style: theme(digitv2.fontStyle.normal);
+        font-weight: theme(digitv2.fontWeight.regular);
+        line-height: theme(digitv2.lineHeight.lineheight2);
+      }
+
+      @media (min-aspect-ratio: 3/4) {
+        /* Media query for desktop */
+        font-size: theme(digitv2.fontSize.body-s.desktop);
+        font-family: theme(digitv2.fontFamily.sans);
+        font-style: theme(digitv2.fontStyle.normal);
+        font-weight: theme(digitv2.fontWeight.regular);
+        line-height: theme(digitv2.lineHeight.lineheight2);
+      }
       @apply absolute top-0 left-0 p-sm min-h-full min-w-full opacity-0;
       letter-spacing: theme(digitv2.spacers.spacer0);
       padding-left: 1%;
@@ -463,7 +489,33 @@
   .digit-multiselectdropdown-master-active {
     .digit-multiselectdropdown-label {
       p {
-        @extend .typography.body-l;
+        @extend .typography.body-s;
+        @media (max-aspect-ratio: 9/16) {
+          /* Media query for mobile */
+          font-size: theme(digitv2.fontSize.body-s.mobile);
+          font-family: theme(digitv2.fontFamily.sans);
+          font-style: theme(digitv2.fontStyle.normal);
+          font-weight: theme(digitv2.fontWeight.regular);
+          line-height: theme(digitv2.lineHeight.lineheight2);
+        }
+
+        @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
+          /* Media query for tablets */
+          font-size: theme(digitv2.fontSize.body-s.tablet);
+          font-family: theme(digitv2.fontFamily.sans);
+          font-style: theme(digitv2.fontStyle.normal);
+          font-weight: theme(digitv2.fontWeight.regular);
+          line-height: theme(digitv2.lineHeight.lineheight2);
+        }
+
+        @media (min-aspect-ratio: 3/4) {
+          /* Media query for desktop */
+          font-size: theme(digitv2.fontSize.body-s.desktop);
+          font-family: theme(digitv2.fontFamily.sans);
+          font-style: theme(digitv2.fontStyle.normal);
+          font-weight: theme(digitv2.fontWeight.regular);
+          line-height: theme(digitv2.lineHeight.lineheight2);
+        }
         white-space: pre;
           margin: auto;
           margin-left: theme(digitv2.spacers.spacer0);

diff --git a/react/css/src/digitv2/components/selectDropdownV2.scss b/react/css/src/digitv2/components/selectDropdownV2.scss
@@ -27,7 +27,33 @@
       color: theme(digitv2.lightTheme.generic-divider) !important;
     }
     input[type="text"] {
-      @extend .typography.body-l;
+      @extend .typography.body-s;
+      @media (max-aspect-ratio: 9/16) {
+        /* Media query for mobile */
+        font-size: theme(digitv2.fontSize.body-s.mobile);
+        font-family: theme(digitv2.fontFamily.sans);
+        font-style: theme(digitv2.fontStyle.normal);
+        font-weight: theme(digitv2.fontWeight.regular);
+        line-height: theme(digitv2.lineHeight.lineheight2);
+      }
+
+      @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
+        /* Media query for tablets */
+        font-size: theme(digitv2.fontSize.body-s.tablet);
+        font-family: theme(digitv2.fontFamily.sans);
+        font-style: theme(digitv2.fontStyle.normal);
+        font-weight: theme(digitv2.fontWeight.regular);
+        line-height: theme(digitv2.lineHeight.lineheight2);
+      }
+
+      @media (min-aspect-ratio: 3/4) {
+        /* Media query for desktop */
+        font-size: theme(digitv2.fontSize.body-s.desktop);
+        font-family: theme(digitv2.fontFamily.sans);
+        font-style: theme(digitv2.fontStyle.normal);
+        font-weight: theme(digitv2.fontWeight.regular);
+        line-height: theme(digitv2.lineHeight.lineheight2);
+      }
       @apply absolute z-10 h-full outline-none;
       width:calc(100%- (theme(digitv2.spacers.spacer7)));
       background-color: transparent;
@@ -52,7 +78,33 @@
     @apply relative block w-full h-10 bg-white;
     border: 0.063rem solid theme(digitv2.lightTheme.primary-1);
     input[type="text"] {
-      @extend .typography.body-l;
+      @extend .typography.body-s;
+      @media (max-aspect-ratio: 9/16) {
+        /* Media query for mobile */
+        font-size: theme(digitv2.fontSize.body-s.mobile);
+        font-family: theme(digitv2.fontFamily.sans);
+        font-style: theme(digitv2.fontStyle.normal);
+        font-weight: theme(digitv2.fontWeight.regular);
+        line-height: theme(digitv2.lineHeight.lineheight2);
+      }
+
+      @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
+        /* Media query for tablets */
+        font-size: theme(digitv2.fontSize.body-s.tablet);
+        font-family: theme(digitv2.fontFamily.sans);
+        font-style: theme(digitv2.fontStyle.normal);
+        font-weight: theme(digitv2.fontWeight.regular);
+        line-height: theme(digitv2.lineHeight.lineheight2);
+      }
+
+      @media (min-aspect-ratio: 3/4) {
+        /* Media query for desktop */
+        font-size: theme(digitv2.fontSize.body-s.desktop);
+        font-family: theme(digitv2.fontFamily.sans);
+        font-style: theme(digitv2.fontStyle.normal);
+        font-weight: theme(digitv2.fontWeight.regular);
+        line-height: theme(digitv2.lineHeight.lineheight2);
+      }
       @apply absolute z-10 h-full outline-none;
       width:calc(100%- (theme(digitv2.spacers.spacer7)));
       background-color: transparent;
@@ -369,7 +421,33 @@
   }
 }
 .digit-dropdown-employee-select-wrap--elipses {
-  @extend .typography.body-l;
+  @extend .typography.body-s;
+  @media (max-aspect-ratio: 9/16) {
+    /* Media query for mobile */
+    font-size: theme(digitv2.fontSize.body-s.mobile);
+    font-family: theme(digitv2.fontFamily.sans);
+    font-style: theme(digitv2.fontStyle.normal);
+    font-weight: theme(digitv2.fontWeight.regular);
+    line-height: theme(digitv2.lineHeight.lineheight2);
+  }
+
+  @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
+    /* Media query for tablets */
+    font-size: theme(digitv2.fontSize.body-s.tablet);
+    font-family: theme(digitv2.fontFamily.sans);
+    font-style: theme(digitv2.fontStyle.normal);
+    font-weight: theme(digitv2.fontWeight.regular);
+    line-height: theme(digitv2.lineHeight.lineheight2);
+  }
+
+  @media (min-aspect-ratio: 3/4) {
+    /* Media query for desktop */
+    font-size: theme(digitv2.fontSize.body-s.desktop);
+    font-family: theme(digitv2.fontFamily.sans);
+    font-style: theme(digitv2.fontStyle.normal);
+    font-weight: theme(digitv2.fontWeight.regular);
+    line-height: theme(digitv2.lineHeight.lineheight2);
+  }
   @apply overflow-hidden whitespace-no-wrap;
   width:calc(100%- (theme(digitv2.spacers.spacer7)));
   text-overflow: ellipsis;
@@ -398,7 +476,33 @@
     @apply relative block w-full h-10 bg-white;
     border: 0.063rem solid theme(digitv2.lightTheme.text-secondary);
     input[type="text"] {
-      @extend .typography.body-l;
+      @extend .typography.body-s;
+      @media (max-aspect-ratio: 9/16) {
+        /* Media query for mobile */
+        font-size: theme(digitv2.fontSize.body-s.mobile);
+        font-family: theme(digitv2.fontFamily.sans);
+        font-style: theme(digitv2.fontStyle.normal);
+        font-weight: theme(digitv2.fontWeight.regular);
+        line-height: theme(digitv2.lineHeight.lineheight2);
+      }
+
+      @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
+        /* Media query for tablets */
+        font-size: theme(digitv2.fontSize.body-s.tablet);
+        font-family: theme(digitv2.fontFamily.sans);
+        font-style: theme(digitv2.fontStyle.normal);
+        font-weight: theme(digitv2.fontWeight.regular);
+        line-height: theme(digitv2.lineHeight.lineheight2);
+      }
+
+      @media (min-aspect-ratio: 3/4) {
+        /* Media query for desktop */
+        font-size: theme(digitv2.fontSize.body-s.desktop);
+        font-family: theme(digitv2.fontFamily.sans);
+        font-style: theme(digitv2.fontStyle.normal);
+        font-weight: theme(digitv2.fontWeight.regular);
+        line-height: theme(digitv2.lineHeight.lineheight2);
+      }
       @apply absolute z-10  h-full outline-none;
       width:calc(100%- (theme(digitv2.spacers.spacer7)));
       background-color: transparent;
@@ -428,7 +532,33 @@
     @apply relative block w-full h-10;
     border: 0.063rem solid theme(digitv2.lightTheme.primary-1);
     input[type="text"] {
-      @extend .typography.body-l;
+      @extend .typography.body-s;
+      @media (max-aspect-ratio: 9/16) {
+        /* Media query for mobile */
+        font-size: theme(digitv2.fontSize.body-s.mobile);
+        font-family: theme(digitv2.fontFamily.sans);
+        font-style: theme(digitv2.fontStyle.normal);
+        font-weight: theme(digitv2.fontWeight.regular);
+        line-height: theme(digitv2.lineHeight.lineheight2);
+      }
+
+      @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
+        /* Media query for tablets */
+        font-size: theme(digitv2.fontSize.body-s.tablet);
+        font-family: theme(digitv2.fontFamily.sans);
+        font-style: theme(digitv2.fontStyle.normal);
+        font-weight: theme(digitv2.fontWeight.regular);
+        line-height: theme(digitv2.lineHeight.lineheight2);
+      }
+
+      @media (min-aspect-ratio: 3/4) {
+        /* Media query for desktop */
+        font-size: theme(digitv2.fontSize.body-s.desktop);
+        font-family: theme(digitv2.fontFamily.sans);
+        font-style: theme(digitv2.fontStyle.normal);
+        font-weight: theme(digitv2.fontWeight.regular);
+        line-height: theme(digitv2.lineHeight.lineheight2);
+      }
       @apply absolute z-10  h-full outline-none;
       width:calc(100%- (theme(digitv2.spacers.spacer7)));
       background-color: transparent;

diff --git a/react/css/src/digitv2/components/textInputV2.scss b/react/css/src/digitv2/components/textInputV2.scss
@@ -139,13 +139,13 @@
       pointer-events: none !important;
       border: 0.063rem solid theme(digitv2.lightTheme.generic-inputborder);
       background: theme(digitv2.lightTheme.generic-background);
-      color: theme(digitv2.lightTheme.text-disabled);
+      color: theme(digitv2.lightTheme.text-secondary);
     }
 
     input {
       border: 0.063rem solid theme(digitv2.lightTheme.generic-inputborder);
       background: theme(digitv2.lightTheme.generic-background);
-      color: theme(digitv2.lightTheme.text-disabled);
+      color: theme(digitv2.lightTheme.text-secondary);
     }
 
     .digit-numeric-button-prefix,

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.2-beta.45",
+    "@egovernments/digit-ui-components": "0.0.2-beta.46",
     "@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/core/package.json b/react/modules/core/package.json
@@ -14,7 +14,7 @@
     "prepublish": "yarn build"
   },
   "dependencies": {
-    "@egovernments/digit-ui-components": "0.0.2-beta.45",
+    "@egovernments/digit-ui-components": "0.0.2-beta.46",
     "@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.2-beta.45",
+    "@egovernments/digit-ui-components": "0.0.2-beta.46",
     "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
@@ -85,7 +85,7 @@
     "@egovernments/digit-ui-module-sample": "0.0.1",
     "@egovernments/digit-ui-react-components": "1.7.10",
     "@egovernments/digit-ui-svg-components": "1.0.12",
-    "@egovernments/digit-ui-components": "0.0.2-beta.45",
+    "@egovernments/digit-ui-components": "0.0.2-beta.46",
     "babel-loader": "8.1.0",
     "clean-webpack-plugin": "4.0.0",
     "css-loader": "5.2.6",