Merge pull request #123 from egovernments/DPG-2491

Added LandingPageCrads, MenuCard Molecules
egovernments · Sep 6, 2024 · 8c44414 · 8c44414
2 parents 9cf6020 + 211f65f
commit 8c44414
Show file tree

Hide file tree

Showing 32 changed files with 1,063 additions and 32 deletions.
diff --git a/react/css/CHANGELOG.md b/react/css/CHANGELOG.md
@@ -1,5 +1,9 @@
 # Changelog
 
+## [0.0.2-beta.30] - 2024-09-06
+### Changed
+- Added LandingPageCard,MenuCard styles
+
 ## [0.0.2-beta.29] - 2024-09-05
 ### Changed
 - Added Accordion animation styles

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

diff --git a/react/css/src/digitv2/components/headerdropdownV2.scss b/react/css/src/digitv2/components/headerdropdownV2.scss
@@ -71,11 +71,15 @@
     box-shadow: theme(digitv2.spacers.spacer0) 0.063rem 0.275rem theme(digitv2.spacers.spacer0) #00000026;
     max-height: 80%;
     background-color: theme(digitv2.lightTheme.paper-primary);
-    margin-top: theme(digitv2.spacers.spacer5);
+    margin-top: theme(digitv2.spacers.spacer6);
     position: fixed;
     min-width: 14rem;
     max-width: 25rem;
     @apply z-30 overflow-y-auto overflow-x-hidden;
+
+    &.underProfile{
+      margin-top: theme(digitv2.spacers.spacer5);
+    }
   }
 
   .header-dropdown-search-container {

diff --git a/react/css/src/digitv2/components/landingpagecardV2.scss b/react/css/src/digitv2/components/landingpagecardV2.scss
@@ -0,0 +1,144 @@
+.digit-landing-page-card {
+    background-color: theme(digitv2.lightTheme.paper-primary);
+    box-shadow: theme(digitv2.spacers.spacer0) 1px 2px theme(digitv2.spacers.spacer0) #00000029;
+    max-width: 30%;
+    min-width: 15%;
+    gap: theme(digitv2.spacers.spacer4);
+    border-radius: theme(digitv2.spacers.spacer1) theme(digitv2.spacers.spacer0) theme(digitv2.spacers.spacer0) theme(digitv2.spacers.spacer0);
+
+    @media (max-aspect-ratio: 9/16) {
+        /* Media query for mobile */
+        max-width: 90%
+    }
+
+    @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
+        /* Media query for tablets */
+        max-width: 60%;
+    }
+
+    @media (min-aspect-ratio: 3/4) {
+        /* Media query for desktop */
+        max-width: 30%;
+    }
+
+    .icon-module-header {
+        display: flex !important;
+        align-items: center !important;
+        gap: theme(digitv2.spacers.spacer2);
+
+        .digit-landingpagecard-icon {
+            display: flex;
+            align-items: center;
+
+            &.iconBg {
+                background-color: theme(digitv2.lightTheme.primary-1);
+            }
+        }
+
+        svg {
+            flex-shrink: 0;
+        }
+
+        .ladingcard-moduleName {
+            @extend .typography.heading-m;
+            color: theme(digitv2.lightTheme.primary-2);
+            overflow: hidden;
+            word-wrap: break-word;
+            word-break: break-word;
+            line-height: normal;
+        }
+
+        &.left {
+            justify-content: space-between;
+        }
+    }
+
+    .metric-container {
+        display: flex !important;
+        align-items: flex-start;
+        justify-content: space-evenly;
+
+
+        &.left {
+            justify-content: unset;
+            /*gap: 7.5rem;*/
+        }
+
+        .metric-item {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            cursor: pointer;
+            flex: 1;
+
+            &.left {
+                align-items: flex-start;
+            }
+
+            .metric-count {
+                @extend .typography.heading-m;
+                color: theme(digitv2.lightTheme.text-primary);
+            }
+
+            .metric-label {
+                @extend .typography.body-xs;
+                overflow: hidden;
+                word-wrap: break-word;
+                word-break: break-word;
+                line-height: normal;
+                color: theme(digitv2.lightTheme.generic-inputborder);
+                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);
+                }
+            }
+        }
+    }
+
+    .digit-button-teritiary {
+        justify-content: flex-start;
+    }
+
+}
+
+.digit-landingpage-divider {
+    width: 100%;
+    margin: theme(digitv2.spacers.spacer0);
+}
+
+.digit-landing-page-wrapper {
+    display: flex;
+    justify-content: flex-start;
+    flex-wrap: wrap;
+
+    @media (max-aspect-ratio: 9/16) {
+        /* Media query for mobile */
+        flex-direction: column;
+        gap: theme(digitv2.spacers.spacer4);
+    }
+
+    @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
+        /* Media query for tablets */
+        gap: theme(digitv2.spacers.spacer5);
+    }
+
+    @media (min-aspect-ratio: 3/4) {
+        /* Media query for desktop */
+        gap: theme(digitv2.spacers.spacer6);
+    }
+}
diff --git a/react/css/src/digitv2/components/menuCardV2.scss b/react/css/src/digitv2/components/menuCardV2.scss
@@ -0,0 +1,92 @@
+.digit-menu-card {
+
+    display: flex;
+    flex-direction: column;
+    gap: theme(digitv2.spacers.spacer3);
+    justify-content: flex-start;
+    cursor: pointer;
+
+    .icon-menu-header {
+
+        display: flex !important;
+        align-items: center;
+        gap: theme(digitv2.spacers.spacer2);
+
+        .digit-menucard-icon {
+
+            @media (max-aspect-ratio: 9/16) {
+                /* Media query for mobile */
+                width: theme(digitv2.spacers.spacer6);
+                height: theme(digitv2.spacers.spacer6);
+            }
+
+            @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
+                /* Media query for tablets */
+                width: theme(digitv2.spacers.spacer8);
+                height: theme(digitv2.spacers.spacer8);
+            }
+
+            @media (min-aspect-ratio: 3/4) {
+                /* Media query for desktop */
+                width: theme(digitv2.spacers.spacer10);
+                height: theme(digitv2.spacers.spacer10);
+            }
+        }
+
+        svg {
+            flex-shrink: 0;
+        }
+
+        .digit-menuacard-menuName {
+            @extend .typography.heading-m;
+            line-height: normal;
+            color: theme(digitv2.lightTheme.primary-2);
+        }
+    }
+
+    .digit-menucard-description {
+        @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-primary);
+    }
+}
+
+.digit-menu-card-wrapper{
+    display: flex !important;
+    flex-direction: column;
+
+    @media (max-aspect-ratio: 9/16) {
+        /* Media query for mobile */
+        gap: theme(digitv2.spacers.spacer4);
+    }
+
+    @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
+        /* Media query for tablets */
+        gap: theme(digitv2.spacers.spacer5);
+    }
+
+    @media (min-aspect-ratio: 3/4) {
+        /* Media query for desktop */
+        gap: theme(digitv2.spacers.spacer6);
+    }
+
+}
diff --git a/react/css/src/digitv2/components/mobilesidebarV2.scss b/react/css/src/digitv2/components/mobilesidebarV2.scss
@@ -219,6 +219,7 @@
 .digit-msb-no-results{
   @extend .typography.body-s;
   display: flex;
+  text-align: center;
   flex-direction: column;
   height: theme(digitv2.spacers.spacer12);
   padding: theme(digitv2.spacers.spacer3) theme(digitv2.spacers.spacer6);

diff --git a/react/css/src/digitv2/components/sidebarV2.scss b/react/css/src/digitv2/components/sidebarV2.scss
@@ -11,6 +11,8 @@
     padding-top: 1.563rem;
     padding-left: theme(digitv2.spacers.spacer3);
     padding-right: theme(digitv2.spacers.spacer3);
+    transition: width 0.5s ease;
+    z-index: 10000;
 
     &.hovered {
         width: auto;

diff --git a/react/css/src/digitv2/components/topbarV2.scss b/react/css/src/digitv2/components/topbarV2.scss
@@ -195,7 +195,7 @@
     z-index: 9999999;
     display: flex;
     background-color: theme(digitv2.lightTheme.paper-primary);
-    height: 4rem;
+    height: 4.5rem;
     padding: theme(digitv2.spacers.spacer4) theme(digitv2.spacers.spacer10) theme(digitv2.spacers.spacer4) theme(digitv2.spacers.spacer10);
 
     .margin-top-10 {

diff --git a/react/css/src/digitv2/index.scss b/react/css/src/digitv2/index.scss
@@ -42,6 +42,8 @@
 @import url("./components/mobilesidebarV2.scss");
 @import url("./components/tooltipwrapperV2.scss");
 @import url("./components/tagV2.scss");
+@import url("./components/landingpagecardV2.scss");
+@import url("./components/menuCardV2.scss");
 
 /* pages */
 @import url("./pages/employee/index.scss");

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.34",
+    "@egovernments/digit-ui-components": "0.0.2-beta.35",
     "@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].29/dist/index.css"
+    href="https://unpkg.com/@egovernments/[email protected].30/dist/index.css"
   />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <meta name="theme-color" content="#00bcd1" />

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.34",
+    "@egovernments/digit-ui-components": "0.0.2-beta.35",
     "@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.34",
+    "@egovernments/digit-ui-components": "0.0.2-beta.35",
     "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
@@ -79,13 +79,13 @@
     "@babel/plugin-syntax-jsx": "^7.24.1",
     "@babel/preset-react": "^7.24.1",
     "@egovernments/digit-ui-libraries": "1.8.2-beta.1",
-    "@egovernments/digit-ui-components-css":"0.0.2-beta.29",
+    "@egovernments/digit-ui-components-css":"0.0.2-beta.30",
     "@egovernments/digit-ui-module-core": "1.8.1-beta.6",
     "@egovernments/digit-ui-module-project": "0.3.4",
     "@egovernments/digit-ui-module-sample": "0.0.1",
     "@egovernments/digit-ui-react-components": "1.7.10",
     "@egovernments/digit-ui-svg-components": "1.0.11",
-    "@egovernments/digit-ui-components": "0.0.2-beta.34",
+    "@egovernments/digit-ui-components": "0.0.2-beta.35",
     "babel-loader": "8.1.0",
     "clean-webpack-plugin": "4.0.0",
     "css-loader": "5.2.6",

diff --git a/react/ui-components/CHANGELOG.md b/react/ui-components/CHANGELOG.md
@@ -4,6 +4,10 @@ All notable changes to this project will be documented in this file.
 
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [0.0.2-beta.35] - 2024-09-06
+### New Changes
+- Added LandingPageCard,MenuCard Molecules
+
 ## [0.0.2-beta.34] - 2024-09-05
 ### New Changes
 - Updated Accordion with animation

diff --git a/react/ui-components/package.json b/react/ui-components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@egovernments/digit-ui-components",
-  "version": "0.0.2-beta.34",
+  "version": "0.0.2-beta.35",
   "license": "MIT",
   "main": "dist/index.js",
   "module": "dist/index.modern.js",

diff --git a/react/ui-components/src/atoms/Dropdown.js b/react/ui-components/src/atoms/Dropdown.js
@@ -555,6 +555,7 @@ const Dropdown = (props) => {
             onSelect={onSelect}
             showBottom={props?.showBottom}
             style={props?.menuStyles}
+            className={props?.profilePic ? "underProfile" : ""}
           />
         </div>
       )}

diff --git a/react/ui-components/src/atoms/Menu.js b/react/ui-components/src/atoms/Menu.js
@@ -48,7 +48,7 @@ const Menu = (props) => {
     <div
       className={`header-dropdown-menu ${
         props?.footerdropdown ? "footer-dropdown" : ""
-      } ${props?.showBottom ? "showBottom" : ""}`}
+      } ${props?.showBottom ? "showBottom" : ""} ${props?.className || ""}`}
       ref={props?.ref}
       style={props?.style}
     >