@egovernments/digit-ui-components-css 0.0.2-beta.9 → 0.2.0

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "@egovernments/digit-ui-components-css",
-  "version": "0.0.2-beta.9",
+  "version": "0.2.0",
   "license": "MIT",
   "main": "dist/index.css",
-  "author": "Jagankumar <jagan.kumar@egov.org.in>",
+  "author": "Jagankumar <jagan.kumar@egovernments.org>",
   "engines": {
     "node": ">=14"
   },
@@ -12,7 +12,7 @@
   },
   "scripts": {
     "start": "gulp build",
-    "build": "NODE_ENV=production gulp build",
+    "build": "cross-env NODE_ENV=production gulp build",
     "build:prod": "NODE_ENV=production gulp build",
     "prepublish": "yarn build:prod",
     "publish:css-develop": "npm publish --tag core-v0.1",
@@ -24,13 +24,11 @@
     "last 2 versions"
   ],
   "style": "./dist/index.css",
-  "dependencies": {
+  "dependencies": {},
+  "devDependencies": {
     "node-sass": "^4.14.1",
     "normalize.css": "^8.0.1",
-    "postcss-scss": "^3.0.1",
-    "tailwindcss": "^1.8.10"
-  },
-  "devDependencies": {
+    "tailwindcss": "^1.8.10",
     "autoprefixer": "^10.0.0",
     "cssnano": "^4.1.10",
     "gh-pages": "3.1.0",
@@ -63,6 +61,7 @@
     "egov",
     "dpg",
     "digit-ui",
-    "css"
+    "css",
+    "digit-ui-components"
   ]
 }

package/src/digitv2/components/accordionV2.scss

@@ -0,0 +1,214 @@
+.digit-accordion-title {
+    display: flex;
+    align-items: flex-start;
+    cursor: pointer;
+    background-color: transparent;
+    gap: theme(digitv2.spacers.spacer3);
+
+    @media (max-aspect-ratio: 9/16) {
+        padding: theme(digitv2.spacers.spacer4);
+    }
+
+    @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
+        padding: theme(digitv2.spacers.spacer5);
+    }
+
+    @media (min-aspect-ratio: 3/4) {
+        padding: theme(digitv2.spacers.spacer6);
+    }
+}
+
+.digit-accordion-icon {
+    width: theme(digitv2.spacers.spacer6);
+    height: theme(digitv2.spacers.spacer6);
+    flex-shrink: 0;
+}
+
+.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);
+    display: flex;
+    align-items: center;
+    justify-content: center
+}
+
+.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;
+}
+
+.digit-accordion-content {
+    max-height: 0;
+    overflow: hidden;
+    transition: max-height 0.3s ease, padding 0.3s ease;
+    background-color: transparent;
+    display: flex;
+    gap: 0.625rem;
+    flex-direction: column;
+    @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) {
+        font-size: theme(digitv2.fontSize.body-s.mobile);
+        padding: 0rem theme(digitv2.spacers.spacer4);
+    }
+
+    @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
+        font-size: theme(digitv2.fontSize.body-s.tablet);
+        padding: 0rem theme(digitv2.spacers.spacer5);
+    }
+
+    @media (min-aspect-ratio: 3/4) {
+        font-size: theme(digitv2.fontSize.body-s.desktop);
+        padding: 0rem theme(digitv2.spacers.spacer6);
+    }
+
+    color: theme(digitv2.lightTheme.text-primary);
+}
+
+.digit-accordion-content.open {
+    max-height: fit-content;
+
+    @media (max-aspect-ratio: 9/16) {
+        padding: theme(digitv2.spacers.spacer4);
+    }
+
+    @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
+        padding: theme(digitv2.spacers.spacer5);
+    }
+
+    @media (min-aspect-ratio: 3/4) {
+        padding: theme(digitv2.spacers.spacer6);
+    }
+}
+
+.digit-accordion {
+    &.border {
+        border: 0.063rem solid theme(digitv2.lightTheme.generic-divider);
+    }
+
+    &.borderRadius {
+        border-radius: theme(digitv2.spacers.spacer1);
+    }
+
+    &.withDivider {
+        .digit-accordion-content.open{
+            border-top: 1px solid theme(digitv2.lightTheme.generic-divider);
+        }
+    }
+
+    &.no-divider {
+        .digit-accordion-title {
+            padding-bottom: theme(digitv2.spacers.spacer0);
+        }
+    }
+
+    &.cardBg {
+        background-color: theme(digitv2.lightTheme.paper-primary);
+
+        &.nested {
+            background-color: theme(digitv2.lightTheme.paper-secondary);
+        }
+    }
+}
+
+@keyframes rotateOpen {
+    from {
+        transform: rotate(-180deg);
+    }
+
+    to {
+        transform: rotate(-90deg);
+    }
+}
+
+@keyframes rotateClose {
+    from {
+        transform: rotate(-90deg);
+    }
+
+    to {
+        transform: rotate(-180deg);
+    }
+}
+
+.digit-accordion-toggle{
+    display: flex;
+    align-items: center;
+    width: theme(digitv2.spacers.spacer6);
+    height: theme(digitv2.spacers.spacer6);
+}
+
+.digit-accordion-toggle.animate-open svg {
+    animation: rotateOpen 0.5s ease forwards;
+}
+
+.digit-accordion-toggle.animate-close svg {
+    animation: rotateClose 0.5s ease forwards;
+}
+
+.digit-accordion-wrapper {
+    display: flex;
+    flex-direction: column;
+
+    @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);
+    }
+}
+
+.digit-accordion-divider {
+    width: 100%;
+}

package/src/digitv2/components/{infoCardV2.scss → alertCardV2.scss}

@@ -2,7 +2,7 @@
 @import url("../typography.scss");
 
 .digit-infobanner-wrap {
-  @apply m-sm p-md flex flex-col; 
+  @apply p-md flex flex-col; 
   top: theme(digitv2.spacers.spacer5);
   left: theme(digitv2.spacers.spacer5);
   gap: theme(digitv2.spacers.spacer2);
@@ -86,19 +86,16 @@
   @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4)  {
     /* Media query for tablets */
     max-width: 44.5rem;
-    min-width: 22.5rem;
   }
 
   @media (max-aspect-ratio: 9/16) {
     /* Media query for mobile */
     max-width: 21.5rem;
-    min-width: 15rem;
   }
 
   @media (min-aspect-ratio: 3/4) {
     /* Media query for desktop */
     max-width: 87rem;
-    min-width: 25rem;
   }
 
   &.inline {

package/src/digitv2/components/backLinkV2.scss

@@ -18,7 +18,7 @@
 
     .digit-back-link-label {
         @extend .typography.body-l;
-        color: theme(digitv2.lightTheme.primary-1);
+        color: theme(digitv2.lightTheme.primary-2);
         margin-top:0.063rem;
         cursor: pointer;
     }

package/src/digitv2/components/bottomSheetV2.scss

@@ -0,0 +1,121 @@
+.digit-bottom-sheet {
+    position: fixed;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    transition: height 0.3s ease;
+    background-color: theme(digitv2.lightTheme.paper-primary);
+    box-shadow: theme(digitv2.spacers.spacer0) -0.063rem theme(digitv2.spacers.spacer1) -0.063rem #00000026;
+    overflow: hidden;
+    border-radius: theme(digitv2.spacers.spacer3) theme(digitv2.spacers.spacer3) theme(digitv2.spacers.spacer0) theme(digitv2.spacers.spacer0);
+    display: flex;
+    flex-direction: column;
+
+    &.full {
+        border-radius: theme(digitv2.spacers.spacer0);
+    }
+}
+
+.digit-bottom-sheet.closed {
+    &.actionsEnabled {
+        height: fit-content;
+    }
+}
+
+.digit-bottom-sheet-header {
+    display: flex;
+    justify-content: center;
+    height: theme(digitv2.spacers.spacer10);
+
+    &.actionsEnabled {
+        height: theme(digitv2.spacers.spacer6);
+    }
+}
+
+.digit-bottom-sheet-drag-cursor {
+    position: absolute;
+    top: 0;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 100%;
+    height: 100%;
+    background-color: transparent;
+    cursor: ns-resize;
+}
+
+.digit-bottom-sheet-handle-indicator {
+    width: 6.25rem;
+    height: 0.375rem;
+    border-radius: theme(digitv2.spacers.spacer1);
+    background-color: #D9D9D9;
+    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;
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+
+    @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);
+    }
+}
+
+.digit-bottom-sheet-actions {
+    padding: theme(digitv2.spacers.spacer4);
+    display: flex;
+    gap: theme(digitv2.spacers.spacer6);
+    background-color: #FFFFFF;
+    box-shadow: theme(digitv2.spacers.spacer0) 0.063rem 0.188rem 0.063rem #00000026;
+    box-shadow: theme(digitv2.spacers.spacer0) 0.063rem 0.125rem theme(digitv2.spacers.spacer0) #0000004D;
+    justify-content: flex-end;
+
+    &.equalButtons {
+        justify-content: flex-start;
+
+        button {
+            flex: 1;
+        }
+    }
+
+    @media (max-aspect-ratio: 9/16) {
+        justify-content: flex-start;
+
+        button {
+            flex: 1;
+        }
+    }
+}
+
+.digit-bottom-sheet-content::-webkit-scrollbar {
+    width: 0.375rem;
+    background-color: theme(digitv2.lightTheme.generic-background);
+}
+
+.digit-bottom-sheet-content::-webkit-scrollbar-track {
+    background-color: theme(digitv2.lightTheme.generic-background);
+    border-radius: 0.563rem;
+}
+
+.digit-bottom-sheet-content::-webkit-scrollbar-thumb {
+    background-color: theme(digitv2.lightTheme.generic-divider);
+    border-radius: 0.563rem;
+}

package/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;

package/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);
   }
 
@@ -145,6 +144,9 @@
     @apply bg-white;
     box-shadow: theme(digitv2.spacers.spacer0) -0.125rem theme(digitv2.spacers.spacer0) theme(digitv2.spacers.spacer0) theme(digitv2.lightTheme.primary-1) inset, theme(digitv2.spacers.spacer0) theme(digitv2.spacers.spacer1) theme(digitv2.spacers.spacer1) theme(digitv2.spacers.spacer0) #C84C0E33;
 
+    h2 {
+      font-weight: theme(digitv2.fontWeight.bold);
+    }
   }
 
   h2 {
@@ -153,6 +155,10 @@
     color: theme(digitv2.lightTheme.primary-1);
   }
 
+  .digit-button-label{
+    color: theme(digitv2.lightTheme.primary-1);
+  }
+
   &.disabled {
     @apply opacity-50;
     border: 0.063rem solid theme(digitv2.lightTheme.text-disabled);
@@ -165,7 +171,6 @@
   &.large{
     h2{
       @apply h-5;
-      margin-top: 0.125rem;
     }
   }
 
@@ -190,8 +195,8 @@
   @apply text-center cursor-pointer outline-none flex max-w-full items-center justify-center h-10;
   background: none;
   width: fit-content;
-  padding-left:  theme(digitv2.spacers.spacer2);
-  padding-right: theme(digitv2.spacers.spacer2);
+  padding-left:  theme(digitv2.spacers.spacer0);
+  padding-right: theme(digitv2.spacers.spacer0);
   gap:  theme(digitv2.spacers.spacer2);
   min-width: 6.5625rem;
 
@@ -249,8 +254,8 @@
   background: none;
   width: fit-content;
   height: fit-content;
-  padding-left:  theme(digitv2.spacers.spacer2);
-  padding-right: theme(digitv2.spacers.spacer2);
+  padding-left:  theme(digitv2.spacers.spacer0);
+  padding-right: theme(digitv2.spacers.spacer0);
   gap: theme(digitv2.spacers.spacer2);
   min-width: 4.875rem;
 
@@ -325,34 +330,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);
+    }
   }
 }
 
@@ -394,14 +409,50 @@
   }
 }
 
-@screen dt {
+.digit-submit-bar:focus {
+  @apply outline-none !important;
+}
+
+.digit-buttons-group {
+  display: flex;
+  flex-direction: row;
+  height: fit-content;
+  gap:theme(digitv2.spacers.spacer4);
+
+  @media (max-width: 30rem) {
+    flex-direction: column;
+
+    button{
+      width: 100%;
+    }
+  }
+
+  button{
+    flex: 1;
+  }
+}
+
+.header-dropdown-container {
+  position: relative; 
+
+  .header-dropdown-menu {
+    @apply absolute z-30;
+    bottom: theme(digitv2.spacers.spacer5);
+    right: 0;
+    max-height: unset;
+    margin-top: unset;
+  
+    &.showBottom{
+      bottom: unset;
+    }
+
+    @media (max-width: 30rem) {
+      width: 100% !important;
+    }
 
-  .digit-submit-bar,
-  .digit-submit-bar-disabled {
-    width: 15rem;
+    @media (max-width: 15.625rem) {
+      left:0 ;
+    }
   }
 }
 
-.digit-submit-bar:focus {
-  @apply outline-none !important;
-}