React component changes (#126)

* added tab component * added search functionality for multiselectdropdown * updated landingpagecard * added hover state for menucard * updated stepper * updated preselected label color for radio btns * added stories for color and spacers * updated sidebar * enhancements * uodated versions * review changes * added long text stories * default value for allowMultipleOpen * updated versions * updated tab styles * updated animation name * added review changes * updated version
egovernments · Sep 13, 2024 · 0ab65f6 · 0ab65f6
1 parent 4d424ef
commit 0ab65f6
Show file tree

Hide file tree

Showing 50 changed files with 913 additions and 116 deletions.
diff --git a/react/css/CHANGELOG.md b/react/css/CHANGELOG.md
@@ -1,5 +1,10 @@
 # Changelog
 
+
+## [0.0.2-beta.33] - 2024-09-13
+### Changed
+- Added Tab Styles and other changes
+
 ## [0.0.2-beta.30] - 2024-09-12
 ### fixes 
 - Css version fix 

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.32",
+  "version": "0.0.2-beta.33",
   "license": "MIT",
   "main": "dist/index.css",
   "author": "Jagankumar <[email protected]>",

diff --git a/react/css/src/digitv2/components/bottomSheetV2.scss b/react/css/src/digitv2/components/bottomSheetV2.scss
@@ -52,6 +52,14 @@
     margin: theme(digitv2.spacers.spacer2) theme(digitv2.spacers.spacer0);
 }
 
+.digit-bottom-sheet-header{
+    &.full {
+        .digit-bottom-sheet-handle-indicator{
+            display: none;
+        }
+    }
+}
+
 .digit-bottom-sheet-content {
     padding: theme(digitv2.spacers.spacer4);
     overflow-y: scroll;

diff --git a/react/css/src/digitv2/components/buttonsV2.scss b/react/css/src/digitv2/components/buttonsV2.scss
@@ -4,8 +4,7 @@
   @apply flex max-w-full items-center;
   gap: theme(digitv2.spacers.spacer2);
 
-  &.small,
-  &.medium {
+  &.small{
     gap: theme(digitv2.spacers.spacer1);
   }
 

diff --git a/react/css/src/digitv2/components/chipV2.scss b/react/css/src/digitv2/components/chipV2.scss
@@ -49,6 +49,25 @@
     .digit-text {
       @extend .typography.body-xs;
       @apply overflow-hidden items-center whitespace-no-wrap;
+      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-xs.mobile);
+      }
+
+      @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
+        /* Media query for tablets */
+        font-size: theme(digitv2.fontSize.body-xs.tablet);
+      }
+
+      @media (min-aspect-ratio: 3/4) {
+        /* Media query for desktop */
+        font-size: theme(digitv2.fontSize.body-xs.desktop);
+      }
       max-width: calc(100% - (theme(digitv2.spacers.spacer7)));
       width: calc(100% - (theme(digitv2.spacers.spacer7)));
       text-overflow: clip;

diff --git a/react/css/src/digitv2/components/dividerV2.scss b/react/css/src/digitv2/components/dividerV2.scss
@@ -1,5 +1,6 @@
 .digit-divider {
     border: theme(digitv2.divider.dividerS);
+    width: 100%;
 
     &.medium {
         border: theme(digitv2.divider.dividerM);

diff --git a/react/css/src/digitv2/components/landingpagecardV2.scss b/react/css/src/digitv2/components/landingpagecardV2.scss
@@ -31,10 +31,17 @@
             align-items: center;
 
             &.iconBg {
-                background-color: theme(digitv2.lightTheme.primary-1);
+                background-color: theme(digitv2.lightTheme.primary-1);  
+                border-radius: 0.125rem;
             }
         }
 
+        &.right{
+            &.iconBg {
+            gap:theme(digitv2.spacers.spacer4);
+        }
+    }
+
         svg {
             flex-shrink: 0;
         }

diff --git a/react/css/src/digitv2/components/menuCardV2.scss b/react/css/src/digitv2/components/menuCardV2.scss
@@ -6,6 +6,11 @@
     justify-content: flex-start;
     cursor: pointer;
 
+    &.clickable:hover{
+        border: 0.063rem solid theme(digitv2.lightTheme.primary-1);
+        box-shadow: 0.063rem theme(digitv2.spacers.spacer1) theme(digitv2.spacers.spacer1) theme(digitv2.spacers.spacer0) #00000029;
+    }
+
     .icon-menu-header {
 
         display: flex !important;

diff --git a/react/css/src/digitv2/components/multiSelectDropdownV2.scss b/react/css/src/digitv2/components/multiSelectDropdownV2.scss
@@ -38,6 +38,23 @@
       }
     }
   }
+
+  .digit-multiselectdropdown-master-active{
+    &.serachable{
+      input[type="text"]{
+        opacity: 1;
+        width: calc(100%-24px);
+      }
+
+      .digit-multiselectdropdown-label {
+        svg {
+          z-index: 1;
+          cursor: pointer;
+        }
+      }
+    }
+  }
+
   .digit-multiselectdropdown-master {
     &.disabled {
       pointer-events: none !important;
@@ -153,7 +170,7 @@
         }
       }
     }
-    &.nestedmultiselect {
+    &.nestedmultiselect:not(.unsuccessfulresults){
       position: relative;
       &:not(.selectAll)::before {
         content: "";
@@ -334,6 +351,33 @@
         color: theme(digitv2.lightTheme.primary-1);
       }
     }
+    &.unsuccessfulresults {
+      background-color: theme(digitv2.lightTheme.paper-secondary);
+      pointer-events: none;
+      span {
+        @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);
+      }
+    }
   }
   .digit-cursorPointer {
     @apply cursor-pointer;
@@ -343,11 +387,14 @@
     .digit-multiselectdropdown-label {
       p {
         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);
+          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;
       }
     }
   }

diff --git a/react/css/src/digitv2/components/radiobtnV2.scss b/react/css/src/digitv2/components/radiobtnV2.scss
@@ -51,8 +51,7 @@
       pointer-events: none !important;
     }
 
-    &.disabled,
-    &.preselected {
+    &:not(.preselected):not(.has-preselected).disabled{
       label {
         color: theme(digitv2.lightTheme.text-disabled);
       }
@@ -80,6 +79,7 @@
     font-style: theme(digitv2.fontStyle.normal);
     font-weight: theme(digitv2.fontWeight.regular);
     line-height: theme(digitv2.lineHeight.lineheight2);
+    margin-top: 0.065rem;
 
     @media (max-aspect-ratio: 9/16) {
       /* Media query for mobile */

diff --git a/react/css/src/digitv2/components/selectDropdownV2.scss b/react/css/src/digitv2/components/selectDropdownV2.scss
@@ -49,7 +49,7 @@
     }
   }
   .digit-dropdown-select-active {
-    @apply relative block w-full h-10;
+    @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;
@@ -189,7 +189,7 @@
   &:not(.nesteddropdown, .treedropdown):not(:active):nth-of-type(even) {
     background: theme(digitv2.lightTheme.paper-secondary);
   }
-  &.nesteddropdown {
+  &:not(.unsuccessfulresults).nesteddropdown {
     position: relative;
     height: 2.4375rem;
     &::before {

diff --git a/react/css/src/digitv2/components/selectionCardV2.scss b/react/css/src/digitv2/components/selectionCardV2.scss
@@ -2,6 +2,7 @@
     display: flex;
     flex-direction: column;
     align-items: flex-start;
+    gap:theme(digitv2.spacers.spacer1);
   }
 
   .selection-card {

diff --git a/react/css/src/digitv2/components/stepperV2.scss b/react/css/src/digitv2/components/stepperV2.scss
@@ -10,6 +10,18 @@
     @apply relative flex-1;
     min-height: 4rem;
     z-index: 1;
+
+    @media (max-aspect-ratio: 9/16) {
+      min-width: 3.75rem;
+    }
+
+    @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
+      min-width: 5rem;
+    }
+
+    @media (min-aspect-ratio: 3/4) {
+      min-width: 6.25rem;
+    }
   }
 
   .digit-stepper-content {
@@ -98,18 +110,30 @@
     height: 0.125rem;
 
     @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
+      min-width: 6.313rem;
       max-width: 39.438rem;
     }
 
     @media (max-aspect-ratio: 9/16) {
+      min-width: 4.313rem;
       max-width: 16.875rem;
       top: 0.875rem;
     }
 
     @media (min-aspect-ratio: 3/4) {
+      min-width: 5.313rem;
       max-width: 82.688rem;
     }
 
+    &.lastbutone{
+      @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
+        min-width: unset;
+      }
+
+      @media (max-aspect-ratio: 9/16) {
+        min-width: unset;
+      }
+    }
     &.active {
       background-color: theme(digitv2.lightTheme.primary-1);
       border-color: theme(digitv2.lightTheme.primary-1);
@@ -129,6 +153,12 @@
         background-color: transparent;
         border-color: theme(digitv2.lightTheme.primary-1);
       }
+      @media (max-aspect-ratio: 9/16) {
+        left: -2.75rem;
+      }
+      @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
+        left: -3.5rem;
+      }
     }
   }
 
@@ -148,8 +178,8 @@
 }
 
 .digit-stepper-container::-webkit-scrollbar {
-  width: theme(digitv2.spacers.spacer2);
-  height: theme(digitv2.spacers.spacer2);
+  width: theme(digitv2.spacers.spacer0);
+  height: theme(digitv2.spacers.spacer0);
   background-color: theme(digitv2.lightTheme.generic-background);
 }
 
@@ -161,4 +191,10 @@
 .digit-stepper-container::-webkit-scrollbar-thumb {
   background-color: theme(digitv2.lightTheme.generic-divider);
   border-radius: 0.563rem;
+}
+
+.stepper-vertical-divider{
+  position: absolute;
+  left: theme(digitv2.spacers.spacer10);
+  margin: theme(digitv2.spacers.spacer0);
 }