Merge pull request #113 from egovernments/Tab-Accordion

fixing toast issue and typography issue
egovernments · Aug 27, 2024 · d78e2d4 · d78e2d4
2 parents 0bdf809 + bebf9ac
commit d78e2d4
Show file tree

Hide file tree

Showing 32 changed files with 699 additions and 39 deletions.
diff --git a/react/css/package.json b/react/css/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@egovernments/digit-ui-components-css",
-  "version": "0.0.2-beta.24",
+  "version": "0.0.2-beta.25",
   "license": "MIT",
   "main": "dist/index.css",
   "author": "Jagankumar <jagan.kumar@egovernments.org>",

diff --git a/react/css/src/digitv2/components/bottomSheetV2.scss b/react/css/src/digitv2/components/bottomSheetV2.scss
@@ -64,7 +64,18 @@
   overflow-y: scroll;
   display: flex;
   flex-direction: column;
-  gap: theme(digitv2.spacers.spacer4);
+
+  @media (max-aspect-ratio: 9/16) {
+    gap:theme(digitv2.spacers.spacer4);
+  }
+
+  @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
+    gap:theme(digitv2.spacers.spacer5);
+  }
+
+  @media (min-aspect-ratio: 3/4) {
+    gap:theme(digitv2.spacers.spacer6);
+  }
 }
 
 

diff --git a/react/css/src/digitv2/components/breadcrumbV2.scss b/react/css/src/digitv2/components/breadcrumbV2.scss
@@ -20,6 +20,25 @@
 
     .digit-bread-crumb-content {
         @extend .typography.body-s;
+        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 (max-aspect-ratio: 9/16) {
+          /* Media query for mobile */
+          font-size: theme(digitv2.fontSize.body-s.mobile);
+        }
+
+        @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
+          /* Media query for tablets */
+          font-size: theme(digitv2.fontSize.body-s.tablet);
+        }
+
+        @media (min-aspect-ratio: 3/4) {
+          /* Media query for desktop */
+          font-size: theme(digitv2.fontSize.body-s.desktop);
+        }
         display: flex !important;
         gap: theme(digitv2.spacers.spacer1);
         cursor: pointer;
@@ -44,6 +63,25 @@
     .digit-bread-crumb-content.current,
     .digit-bread-crumb-seperator {
         @extend .typography.body-s;
+        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 (max-aspect-ratio: 9/16) {
+          /* Media query for mobile */
+          font-size: theme(digitv2.fontSize.body-s.mobile);
+        }
+
+        @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
+          /* Media query for tablets */
+          font-size: theme(digitv2.fontSize.body-s.tablet);
+        }
+
+        @media (min-aspect-ratio: 3/4) {
+          /* Media query for desktop */
+          font-size: theme(digitv2.fontSize.body-s.desktop);
+        }
         color: theme(digitv2.lightTheme.text-secondary);
         text-decoration: none;
         cursor: default;

diff --git a/react/css/src/digitv2/components/buttonsV2.scss b/react/css/src/digitv2/components/buttonsV2.scss
@@ -324,34 +324,44 @@
 }
 
 .digit-submit-bar {
-  /* @extend .light-primary-button;*/
-  @apply h-10 text-center w-full outline-none cursor-pointer;
-  box-shadow: inset theme(digitv2.spacers.spacer0) -0.125rem theme(digitv2.spacers.spacer0) theme(colors.text.primary);
+  @apply w-full text-center cursor-pointer outline-none flex max-w-full items-center justify-center h-10;
+  padding-left:  theme(digitv2.spacers.spacer6);
+  padding-right:  theme(digitv2.spacers.spacer6);
+  gap:  theme(digitv2.spacers.spacer2);
+  min-width: 15rem;
   background-color: theme(digitv2.lightTheme.primary-1);
 
-  &:focus {
-    @apply outline-none;
-  }
-
   h2 {
-    @apply font-medium text-legend text-white leading-normal;
+    @extend .typography.button.large;
+    @apply text-white;
     margin: 0;
-    font-family: theme(digitv2.fontFamily.sans)
+    width: 100%;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    @apply h-5;
+    margin-top: 0.125rem;
   }
-}
 
-.digit-submit-bar-disabled {
-  @apply h-10 text-center w-full outline-none opacity-50;
-  background-color: theme(digitv2.lightTheme.primary-1);
+  &.disabled {
+    @apply opacity-50;
+    background: theme(digitv2.lightTheme.text-disabled);
+  }
 
   &:focus {
     @apply outline-none;
   }
 
-  h2 {
-    @apply font-medium text-legend text-white leading-normal;
-    margin: 0;
-    font-family: theme(digitv2.fontFamily.sans)
+  &:hover {
+    box-shadow: theme(digitv2.spacers.spacer0) -0.125rem theme(digitv2.spacers.spacer0) theme(digitv2.spacers.spacer0) theme(digitv2.lightTheme.text-primary) inset;
+  }
+
+  &:active {
+    box-shadow: theme(digitv2.spacers.spacer0) -0.125rem theme(digitv2.spacers.spacer0) theme(digitv2.spacers.spacer0) #0B0C0C inset, theme(digitv2.spacers.spacer0) 0.063rem 0.175rem theme(digitv2.spacers.spacer0) #00000040;
+
+    h2 {
+      font-weight: theme(digitv2.fontWeight.bold);
+    }
   }
 }
 
@@ -393,14 +403,6 @@
   }
 }
 
-@screen dt {
-
-  .digit-submit-bar,
-  .digit-submit-bar-disabled {
-    width: 15rem;
-  }
-}
-
 .digit-submit-bar:focus {
   @apply outline-none !important;
 }

diff --git a/react/css/src/digitv2/components/checkboxV2.scss b/react/css/src/digitv2/components/checkboxV2.scss
@@ -62,6 +62,25 @@
 
   .label {
     @extend .typography.body-s;
+    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 (max-aspect-ratio: 9/16) {
+      /* Media query for mobile */
+      font-size: theme(digitv2.fontSize.body-s.mobile);
+    }
+
+    @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
+      /* Media query for tablets */
+      font-size: theme(digitv2.fontSize.body-s.tablet);
+    }
+
+    @media (min-aspect-ratio: 3/4) {
+      /* Media query for desktop */
+      font-size: theme(digitv2.fontSize.body-s.desktop);
+    }
     @apply text-left;
     word-break: break-word;
     letter-spacing: theme(digitv2.spacers.spacer0);

diff --git a/react/css/src/digitv2/components/fieldV1.scss b/react/css/src/digitv2/components/fieldV1.scss
@@ -35,6 +35,25 @@
         .info-icon .infotext {
             @extend .typography.body-s;
             @apply absolute text-center;
+            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 (max-aspect-ratio: 9/16) {
+              /* Media query for mobile */
+              font-size: theme(digitv2.fontSize.body-s.mobile);
+            }
+
+            @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
+              /* Media query for tablets */
+              font-size: theme(digitv2.fontSize.body-s.tablet);
+            }
+
+            @media (min-aspect-ratio: 3/4) {
+              /* Media query for desktop */
+              font-size: theme(digitv2.fontSize.body-s.desktop);
+            }
             visibility: hidden;
             width: 7.5rem;
             background-color: #555555;
@@ -75,6 +94,25 @@
         @apply flex justify-between items-baseline;
         color: theme(digitv2.lightTheme.text-secondary);
         gap: theme(digitv2.spacers.spacer2);
+        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 (max-aspect-ratio: 9/16) {
+          /* Media query for mobile */
+          font-size: theme(digitv2.fontSize.body-s.mobile);
+        }
+
+        @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
+          /* Media query for tablets */
+          font-size: theme(digitv2.fontSize.body-s.tablet);
+        }
+
+        @media (min-aspect-ratio: 3/4) {
+          /* Media query for desktop */
+          font-size: theme(digitv2.fontSize.body-s.desktop);
+        }
 
 
         @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4)  {

diff --git a/react/css/src/digitv2/components/headerdropdownV2.scss b/react/css/src/digitv2/components/headerdropdownV2.scss
@@ -31,6 +31,25 @@
   .header-dropdown-label {
     @extend .typography.body-s;
     cursor: pointer;
+    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 (max-aspect-ratio: 9/16) {
+      /* Media query for mobile */
+      font-size: theme(digitv2.fontSize.body-s.mobile);
+    }
+
+    @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
+      /* Media query for tablets */
+      font-size: theme(digitv2.fontSize.body-s.tablet);
+    }
+
+    @media (min-aspect-ratio: 3/4) {
+      /* Media query for desktop */
+      font-size: theme(digitv2.fontSize.body-s.desktop);
+    }
     display: flex;
     align-items: center;
     color: theme(digitv2.lightTheme.text-primary);
@@ -96,6 +115,25 @@
   .header-dropdown-option {
     @extend .typography.body-s;
     @apply whitespace-no-wrap w-full max-w-full overflow-hidden;
+    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 (max-aspect-ratio: 9/16) {
+      /* Media query for mobile */
+      font-size: theme(digitv2.fontSize.body-s.mobile);
+    }
+
+    @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
+      /* Media query for tablets */
+      font-size: theme(digitv2.fontSize.body-s.tablet);
+    }
+
+    @media (min-aspect-ratio: 3/4) {
+      /* Media query for desktop */
+      font-size: theme(digitv2.fontSize.body-s.desktop);
+    }
     padding: theme(digitv2.spacers.spacer4) 0.625rem;
     color: theme(digitv2.lightTheme.text-primary);
     gap: theme(digitv2.spacers.spacer2);
@@ -117,6 +155,25 @@
 
   .header-dropdown-nooption {
     @extend .typography.body-s;
+    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 (max-aspect-ratio: 9/16) {
+      /* Media query for mobile */
+      font-size: theme(digitv2.fontSize.body-s.mobile);
+    }
+
+    @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
+      /* Media query for tablets */
+      font-size: theme(digitv2.fontSize.body-s.tablet);
+    }
+
+    @media (min-aspect-ratio: 3/4) {
+      /* Media query for desktop */
+      font-size: theme(digitv2.fontSize.body-s.desktop);
+    }
     padding: theme(digitv2.spacers.spacer2);
     pointer-events: none;
     color: theme(digitv2.lightTheme.text-disabled);

diff --git a/react/css/src/digitv2/components/mobilesidebarV2.scss b/react/css/src/digitv2/components/mobilesidebarV2.scss
@@ -228,6 +228,25 @@
   ::placeholder {
     content: attr(placeholder);
     @extend .typography.body-s;
+    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 (max-aspect-ratio: 9/16) {
+      /* Media query for mobile */
+      font-size: theme(digitv2.fontSize.body-s.mobile);
+    }
+
+    @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
+      /* Media query for tablets */
+      font-size: theme(digitv2.fontSize.body-s.tablet);
+    }
+
+    @media (min-aspect-ratio: 3/4) {
+      /* Media query for desktop */
+      font-size: theme(digitv2.fontSize.body-s.desktop);
+    }
     color: theme(digitv2.lightTheme.text-disabled);
   }
 }
@@ -274,6 +293,25 @@
   ::placeholder {
     content: attr(placeholder);
     @extend .typography.body-s;
+    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 (max-aspect-ratio: 9/16) {
+      /* Media query for mobile */
+      font-size: theme(digitv2.fontSize.body-s.mobile);
+    }
+
+    @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
+      /* Media query for tablets */
+      font-size: theme(digitv2.fontSize.body-s.tablet);
+    }
+
+    @media (min-aspect-ratio: 3/4) {
+      /* Media query for desktop */
+      font-size: theme(digitv2.fontSize.body-s.desktop);
+    }
     color: theme(digitv2.lightTheme.generic-background);
   }
 }