Table molecule

react/css/CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changelog
 
+## [0.0.2-beta.36] - 2024-09-23
+### Changed
+- Added Table css
+
 ## [0.0.2-beta.35] - 2024-09-19
 ### Changed
 - Added OTPInput css

react/css/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@egovernments/digit-ui-components-css",
-  "version": "0.0.2-beta.35",
+  "version": "0.0.2-beta.36",
   "license": "MIT",
   "main": "dist/index.css",
   "author": "Jagankumar <jagan.kumar@egovernments.org>",

react/css/src/digitv2/components/accordionV2.scss

@@ -26,6 +26,25 @@
 
 .digit-accordion-number {
     @extend .typography.heading-s;
+    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);
+    }
     color: theme(digitv2.lightTheme.text-primary);
     min-width: theme(digitv2.spacers.spacer6);
     height: theme(digitv2.spacers.spacer6);
@@ -36,6 +55,25 @@
 
 .digit-accordion-header-title {
     @extend .typography.heading-s;
+    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);
+    }
     color: theme(digitv2.lightTheme.text-primary);
     margin-top: 0.18rem;
     flex-grow: 1;

react/css/src/digitv2/components/landingpagecardV2.scss

@@ -1,4 +1,5 @@
 .digit-landing-page-card {
+    width: fit-content;
     background-color: theme(digitv2.lightTheme.paper-primary);
     box-shadow: theme(digitv2.spacers.spacer0) 0.063rem 0.125rem theme(digitv2.spacers.spacer0) #00000029;
     min-width: 15%;
@@ -68,6 +69,25 @@
 
         .ladingcard-moduleName {
             @extend .typography.heading-m;
+            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);
+            }
             color: theme(digitv2.lightTheme.primary-2);
             overflow: hidden;
             word-wrap: break-word;
@@ -109,6 +129,25 @@
 
             .metric-count {
                 @extend .typography.heading-m;
+                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);
+                }
                 color: theme(digitv2.lightTheme.text-primary);
             }
 
@@ -149,6 +188,11 @@
         justify-content: flex-start;
     }
 
+    @media (max-aspect-ratio: 9/16) {
+        /* Media query for mobile */
+        width: 100%;
+    }
+
 }
 
 .digit-landingpage-divider {

react/css/src/digitv2/components/menuCardV2.scss

@@ -44,6 +44,25 @@
 
         .digit-menuacard-menuName {
             @extend .typography.heading-m;
+            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);
+            }
             line-height: normal;
             color: theme(digitv2.lightTheme.primary-2);
         }

react/css/src/digitv2/components/multiSelectDropdownV2.scss

@@ -27,6 +27,7 @@
       @extend .typography.body-l;
       @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%;
       &:focus {
         @apply outline-none;
       }
@@ -100,6 +101,25 @@
   }
   .digit-category-name {
     @extend .typography.heading-s;
+    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);
+    }
     color: theme(digitv2.lightTheme.text-primary);
   }
   .digit-category-selectAll {
@@ -201,6 +221,25 @@
       border: 0.031rem solid theme(digitv2.lightTheme.primary-1);
       p {
         @extend .typography.heading-s;
+        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);
+        }
         color: theme(digitv2.lightTheme.paper-primary);
       }
       .digit-label {
@@ -244,6 +283,25 @@
       background: theme(digitv2.lightTheme.primary-1);
       p {
         @extend .typography.heading-s;
+        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);
+        }
         color: theme(digitv2.lightTheme.paper-primary);
       }
       .digit-label {
@@ -327,6 +385,25 @@
         .option-des-container {
           p {
             @extend .typography.heading-s;
+            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);
+            }
           }
         }
         .digit-multiselectdropodwn-custom-checkbox {
@@ -386,14 +463,10 @@
   .digit-multiselectdropdown-master-active {
     .digit-multiselectdropdown-label {
       p {
+        @extend .typography.body-l;
         white-space: pre;
           margin: auto;
           margin-left: theme(digitv2.spacers.spacer0);
-          padding-left: 1%;
-          font-size: theme(digitv2.spacers.spacer4);
-          line-height: theme(digitv2.spacers.spacer6);
-          font-family: theme(digitv2.fontFamily.sans);
-          font-weight: theme(digitv2.fontWeight.regular);
           text-align: left;
       }
     }

react/css/src/digitv2/components/panelV2.scss

@@ -107,6 +107,25 @@
 
     .digit-panel-response {
       @extend .typography.heading-m;
+      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);
+      }
       color: theme(digitv2.lightTheme.paper-primary);
       line-height: normal;
     }