storybook audit fixes-1 (#163)

egovernments · Dec 26, 2024 · b1a9b0e · b1a9b0e
1 parent 1024e04
commit b1a9b0e
Show file tree

Hide file tree

Showing 119 changed files with 3,377 additions and 5,359 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.43",
+  "version": "0.0.2-beta.44",
   "license": "MIT",
   "main": "dist/index.css",
   "author": "Jagankumar <[email protected]>",

diff --git a/...ss/src/digitv2/components/infoCardV2.scss → ...s/src/digitv2/components/alertCardV2.scss b/...ss/src/digitv2/components/infoCardV2.scss → ...s/src/digitv2/components/alertCardV2.scss
diff --git a/...ss/src/digitv2/components/uploaderV2.scss → .../src/digitv2/components/fileUploadV2.scss b/...ss/src/digitv2/components/uploaderV2.scss → .../src/digitv2/components/fileUploadV2.scss
@@ -20,8 +20,14 @@
       gap: theme(digitv2.spacers.spacer2) theme(digitv2.spacers.spacer0);
     }
 
+    .upload-options-svg-wrap{
+      width: theme(digitv2.spacers.spacer10);
+      height: theme(digitv2.spacers.spacer10);
+      cursor: pointer;
+    }
+
     .upload-options-label {
-      @extend .typography.label;
+      @extend .typography.button.large;
       @apply cursor-pointer;
       color: theme(digitv2.lightTheme.primary-1);
     }
@@ -108,7 +114,7 @@
     outline: none !important;
   }
 
-  .digit-uploader-content-uploadpopup {
+  .digit-uploader-content-uploadWidget {
     @apply flex flex-col w-full items-center justify-center max-w-full;
     gap: theme(digitv2.spacers.spacer4);
     border: 0.063rem solid theme(digitv2.lightTheme.generic-divider);
@@ -164,13 +170,20 @@
       }
     }
 
+    .drag-drop-link{
+      @extend .typography.link-S;
+      margin-left: theme(digitv2.spacers.spacer1);
+      color: theme(digitv2.lightTheme.primary-1);
+      cursor: pointer;
+    }
+
     &.error {
       border-style: dashed !important;
       border: 0.094rem solid theme(digitv2.lightTheme.alert-error);
     }
   }
 
-  .digit-uploadpopup-label {
+  .digit-uploadWidget-label {
     @extend .typography.body-s;
     font-family: theme(digitv2.fontFamily.sans);
     font-style: theme(digitv2.fontStyle.normal);
@@ -471,7 +484,7 @@
       }
     }
 
-    .digit-uploadpopup-close-icon {
+    .digit-uploadWidget-close-icon {
       @apply absolute top-0 right-0 w-6 h-6 items-center cursor-pointer;
       background: theme(digitv2.lightTheme.generic-background);
       border: 0.063rem solid theme(digitv2.lightTheme.generic-divider);
@@ -488,7 +501,7 @@
     &.error {
       border: 0.063rem solid theme(digitv2.lightTheme.alert-error);
 
-      .digit-uploadpopup-close-icon {
+      .digit-uploadWidget-close-icon {
         background: theme(digitv2.lightTheme.alert-error);
         border: 0.063rem solid theme(digitv2.lightTheme.alert-error);
         border-top: none;
@@ -505,7 +518,7 @@
         }
       }
 
-      .uploadpopup-error-card {
+      .uploadWidget-error-card {
         @apply w-full max-w-full;
         margin: theme(digitv2.spacers.spacer0);
       }

diff --git a/...s/src/digitv2/components/actionbarV2.scss → .../css/src/digitv2/components/footerV2.scss b/...s/src/digitv2/components/actionbarV2.scss → .../css/src/digitv2/components/footerV2.scss
diff --git a/...c/digitv2/components/mobilesidebarV2.scss → ...c/digitv2/components/mobilesidenavV2.scss b/...c/digitv2/components/mobilesidebarV2.scss → ...c/digitv2/components/mobilesidenavV2.scss
diff --git a/react/css/src/digitv2/components/multiSelectDropdownV2.scss b/react/css/src/digitv2/components/multiSelectDropdownV2.scss
@@ -463,6 +463,7 @@
         font-style: theme(digitv2.fontStyle.normal);
         font-weight: theme(digitv2.fontWeight.regular);
         line-height: theme(digitv2.lineHeight.lineheight2);
+        padding-left: theme(digitv2.spacers.spacer3);
 
         @media (max-aspect-ratio: 9/16) {
           /* Media query for mobile */

diff --git a/react/css/src/digitv2/components/radiobtnV2.scss b/react/css/src/digitv2/components/radiobtnV2.scss
@@ -61,6 +61,10 @@
       }
     }
 
+    &.label-first{
+      flex-direction: row-reverse;
+    }
+
   }
 
   .radio-option-container label:only-child {

diff --git a/react/css/src/digitv2/components/selectDropdownV2.scss b/react/css/src/digitv2/components/selectDropdownV2.scss
@@ -199,7 +199,7 @@
 }
 .digit-dropdown-item {
   @apply flex flex-row;
-  padding: 0.625rem;
+  padding: theme(digitv2.spacers.spacer3);
   gap: 0.625rem;
   min-height: 2.438rem;
   color: theme(digitv2.lightTheme.text-primary) !important;
@@ -318,7 +318,7 @@
   }
   &.nestedtextdropdown {
     min-height: 4.75rem;
-    padding: theme(digitv2.spacers.spacer2) 0.635rem theme(digitv2.spacers.spacer2) 0.635rem;
+    padding: theme(digitv2.spacers.spacer2) theme(digitv2.spacers.spacer3) theme(digitv2.spacers.spacer2) theme(digitv2.spacers.spacer3);
     color: theme(digitv2.lightTheme.text-secondary) !important;
     &:hover {
       border: 0.063rem solid theme(digitv2.lightTheme.primary-1);
@@ -356,7 +356,7 @@
   }
   &.profiledropdown {
     min-height: theme(digitv2.spacers.spacer12);
-    padding: theme(digitv2.spacers.spacer2) 0.625rem;
+    padding: theme(digitv2.spacers.spacer2) theme(digitv2.spacers.spacer3);
   }
   &.profilenestedtext {
     min-height: 4.75rem;

diff --git a/...c/digitv2/components/selectionCardV2.scss → ...rc/digitv2/components/selectionTagV2.scss b/...c/digitv2/components/selectionCardV2.scss → ...rc/digitv2/components/selectionTagV2.scss
@@ -19,13 +19,20 @@
       justify-content: center;
     }
 
+    &.hideContainer{
+      border: none;
+      background-color: transparent;
+      border-radius: theme(digitv2.spacers.spacer0);
+    }
+
   }
 
   .selection-card.error {
     border-color: theme(digitv2.lightTheme.alert-error); 
   }
 
   .option {
+    @extend .typography.body-s;
     display: flex;
     align-items: center;
     padding: theme(digitv2.spacers.spacer2) theme(digitv2.spacers.spacer4);
@@ -40,38 +47,54 @@
     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-l.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-l.tablet);
+      font-size: theme(digitv2.fontSize.body-s.tablet);
     }
 
     @media (min-aspect-ratio: 3/4) {
       /* Media query for desktop */
-      font-size: theme(digitv2.fontSize.body-l.desktop);
+      font-size: theme(digitv2.fontSize.body-s.desktop);
     }
   }
 
   .option.selected {
+    @extend .typography.heading-s;
     background-color: theme(digitv2.lightTheme.primary-1); 
     color: theme(digitv2.lightTheme.paper-primary);
     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);
+    }
   }
 
-  .option .selectioncard-option-label {
+  .option .selectiontag-option-label {
     width: 100%;
     display: flex;
     align-items: center;
     justify-content: center;
   }
 
 
-  .option .selectioncardicon {
+  .option .selectiontagicon {
     flex-shrink: 0;
     display: flex;
     align-items: center;

diff --git a/...c/digitv2/components/slideOverMenuV2.scss → ...s/src/digitv2/components/sidePanelV2.scss b/...c/digitv2/components/slideOverMenuV2.scss → ...s/src/digitv2/components/sidePanelV2.scss
@@ -102,8 +102,28 @@
 }
 
 .slider-header {
+  @extend .typography.heading-m;
   flex-shrink: 0;
   padding: theme(digitv2.spacers.spacer4);
+  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);
+  }
   border-bottom: 0.063rem solid #d6d5d4;
 
   .close-icon {

diff --git a/...css/src/digitv2/components/sidebarV2.scss → ...css/src/digitv2/components/sidenavV2.scss b/...css/src/digitv2/components/sidebarV2.scss → ...css/src/digitv2/components/sidenavV2.scss
diff --git a/react/css/src/digitv2/components/topbarV2.scss b/react/css/src/digitv2/components/topbarV2.scss
@@ -221,7 +221,7 @@
     .digit-dropdown-item {
       display: flex;
       flex-direction: row;
-      padding: 0.625rem;
+      padding: theme(digitv2.spacers.spacer3);
       column-gap: 0.625rem;
       color: theme(colors.text.secondary);
 

diff --git a/react/css/src/digitv2/components/treeSelectV2.scss b/react/css/src/digitv2/components/treeSelectV2.scss
@@ -18,7 +18,7 @@
     @apply relative cursor-pointer flex items-center;
     height: 2.4375rem;
     gap: theme(digitv2.spacers.spacer1);
-    padding: theme(digitv2.spacers.spacer4) 0.625rem;
+    padding: theme(digitv2.spacers.spacer4) theme(digitv2.spacers.spacer3);
     &:hover {
         background: theme(digitv2.lightTheme.primary-bg);
         border: 0.063rem solid theme(digitv2.lightTheme.primary-1);

diff --git a/react/css/src/digitv2/index.scss b/react/css/src/digitv2/index.scss
@@ -13,7 +13,7 @@
 @import url("./components/fieldV1.scss");
 @import url("./components/FormComposerV2.scss");
 @import url("./components/infobuttonV2.scss");
-@import url("./components/infoCardV2.scss"); 
+@import url("./components/alertCardV2.scss"); 
 @import url("./components/labelFieldPairV2.scss");
 @import url("./components/mobileNumberV2.scss");
 @import url("./components/multiSelectDropdownV2.scss");
@@ -25,29 +25,29 @@
 @import url("./components/selectDropdownV2.scss");
 @import url("./components/stepperV2.scss");
 @import url("./components/switchV2.scss");
-@import url("./components/selectionCardV2.scss");
+@import url("./components/selectionTagV2.scss");
 @import url("./components/textareaV2.scss");
 @import url("./components/textblockV2.scss");
 @import url("./components/textInputV2.scss");
 @import url("./components/timelineV2.scss");
 @import url("./components/toastV2.scss");
 @import url("./components/toggleV2.scss");
 @import url("./components/treeSelectV2.scss");
-@import url("./components/uploaderV2.scss");
+@import url("./components/fileUploadV2.scss");
 @import url("./components/viewCardFieldPairV2.scss");
-@import url("./components/actionbarV2.scss");
+@import url("./components/footerV2.scss");
 @import url("./components/headerdropdownV2.scss");
 @import url("./components/topbarV2.scss");
 @import url("./components/tabV2.scss");
-@import url("./components/sidebarV2.scss");
-@import url("./components/mobilesidebarV2.scss");
+@import url("./components/sidenavV2.scss");
+@import url("./components/mobilesidenavV2.scss");
 @import url("./components/tooltipwrapperV2.scss");
 @import url("./components/tagV2.scss");
 @import url("./components/landingpagecardV2.scss");
 @import url("./components/menuCardV2.scss");
 @import url("./components/otpInputV2.scss");
 @import url("./components/tableV2.scss");
-@import url("./components/slideOverMenuV2.scss");
+@import url("./components/sidePanelV2.scss");
 @import url("./components/metricCardV2.scss");
 @import url("./components/formCardV2.scss");
 @import url("./components/filterCardV2.scss");
@@ -322,4 +322,10 @@
       line-height: theme(digitv2.lineHeight.lineheight2);
     }
   }
+}
+
+.sb-main-padded{
+  &.sb-show-main{
+    background-color: theme(digitv2.lightTheme.paper-primary);
+  }
 }
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.59",
+    "@egovernments/digit-ui-components": "0.0.2-beta.60",
     "@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/example/public/index.html b/react/example/public/index.html
@@ -9,7 +9,7 @@
     rel='stylesheet' type='text/css'>
     <link
     rel="stylesheet"
-    href="https://unpkg.com/@egovernments/[email protected].43/dist/index.css"
+    href="https://unpkg.com/@egovernments/[email protected].44/dist/index.css"
   />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <meta name="theme-color" content="#00bcd1" />

diff --git a/react/modules/Project/package.json b/react/modules/Project/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.59",
+        "@egovernments/digit-ui-components": "0.0.2-beta.60",
         "lodash": "^4.17.21",
         "react": "17.0.2",
         "react-date-range": "^1.4.0",

diff --git a/react/modules/Project/src/pages/employee/CreateProject/CreateProjectResponse.js b/react/modules/Project/src/pages/employee/CreateProject/CreateProjectResponse.js
@@ -6,7 +6,7 @@ import {
   LinkLabel,
   Card,
   SubmitBar,
-  ActionBar,
+  Footer,
   ArrowLeftWhite,
   AddFileFilled,
 } from "@egovernments/digit-ui-components";
@@ -82,11 +82,11 @@ const CreateProjectResponse = () => {
           </LinkLabel>
         )}
       </div>
-      <ActionBar>
+      <Footer>
         <Link to={`/${window.contextPath}/employee`}>
           <SubmitBar label={t("CORE_COMMON_GO_TO_HOME")} />
         </Link>
-      </ActionBar>
+      </Footer>
     </Card>
   );
 };

diff --git a/react/modules/Project/src/pages/employee/ProjectDetails/index.js b/react/modules/Project/src/pages/employee/ProjectDetails/index.js
@@ -10,7 +10,7 @@ import {
   Card,
   Loader,
   SubmitBar,
-  ActionBar,
+  Footer,
   HorizontalNav,
   Toast,
 } from "@egovernments/digit-ui-components";
@@ -286,7 +286,7 @@ const ProjectDetails = () => {
         />
       </HorizontalNav>
       {!hideActionBar && (
-        <ActionBar>
+        <Footer>
           {showActions ? (
             <Menu
               localeKeyPrefix={`COMMON`}
@@ -301,7 +301,7 @@ const ProjectDetails = () => {
             label={t("WORKS_ACTIONS")}
             onSubmit={() => setShowActions(!showActions)}
           />
-        </ActionBar>
+        </Footer>
       )}
       {toast?.show && (
         <Toast

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.59",
+    "@egovernments/digit-ui-components": "0.0.2-beta.60",
     "@egovernments/digit-ui-react-components": "1.8.1-beta.4",
     "react": "17.0.2",
     "react-dom": "17.0.2",
-Original file line number
+Diff line change
@@ Expand Up / @@ -61,6 +61,10 @@ @@
           }
         }
+        &.label-first{
+          flex-direction: row-reverse;
+        }
       }
       .radio-option-container label:only-child {
@@ Expand Down @@