From 92ec0eb40f5446e859164f61460b2bebda7e4f56 Mon Sep 17 00:00:00 2001 From: Jagankumar <53823168+jagankumar-egov@users.noreply.github.com> Date: Thu, 20 Jul 2023 09:33:57 +0530 Subject: [PATCH] added new styles DIGITV2 1.5.32 and svg components added 0.0.2 (#205) * Taken the recent fixes https://github.com/egovernments/DIGIT-Dev/commit/bb2173c4fbef4e529df1f85d2396e1237b409b18 https://github.com/egovernments/DIGIT-Dev/commit/567fd8f25543f8a4fd5b4a1885dcf0357ac6e9a1 https://github.com/egovernments/DIGIT-Dev/commit/1186f4c6fe21ada1a602681a219bf07b909c5c1a https://github.com/egovernments/DIGIT-Dev/commit/43f688be31286174f15e9073a7b5c9c4a45bb7bb * DPG-1531: Setup & Initialize new svg-component-library & taken the latest changes from digit-dev (#198) * PFM-3740 Show the Toast when password changed and need to logout from profile page (#5637) * SM-2880: FSM Truck Icon fill issue fix and react component package upgrade (#5645) * SM-2880: FSM Truck Icon fill issue fix * SM-2880: Readme update --------- Co-authored-by: nabeelmd-eGov * Corrected the CSS for inbox composers and default core ui * Updated the package versions * Taken the recent fixes https://github.com/egovernments/DIGIT-Dev/commit/bb2173c4fbef4e529df1f85d2396e1237b409b18 https://github.com/egovernments/DIGIT-Dev/commit/567fd8f25543f8a4fd5b4a1885dcf0357ac6e9a1 https://github.com/egovernments/DIGIT-Dev/commit/1186f4c6fe21ada1a602681a219bf07b909c5c1a https://github.com/egovernments/DIGIT-Dev/commit/43f688be31286174f15e9073a7b5c9c4a45bb7bb * Integrated Create Employee with session storage * Updated Edit flow accordingly * DPG-1531: Setup & Initialize new svg-component-library (#5644) * DPG-1531: Set Up SVG library * DPG-1531: SVG library setup * DPG-1531: svg library setup * DPG-1531: svg library set up & code clean up * clean up * Update index.html * Update index.html * Update index.html * Update index.html * Update index.html * Update index.html * Update index.html * cleanup * DPG-1531: Initializing svg-component Icons in react-component * Resolving PR issues, update svg readme file and stories * DPG-1531: Initialized stories for all svgs --------- Co-authored-by: nabeelmd-eGov * Revert "DPG-1531: Setup & Initialize new svg-component-library" (#5656) Revert "DPG-1531: Setup & Initialize new svg-component-library (#5644)" This reverts commit 17e43304017cb85b9cffbcbff4e36e83b6a8c8c5. * DPG-1531: Initializing svg-component Icons in react-component (#5657) * DPG-1531: Set Up SVG library * DPG-1531: SVG library setup * DPG-1531: svg library setup * DPG-1531: svg library set up & code clean up * clean up * Update index.html * Update index.html * Update index.html * Update index.html * Update index.html * Update index.html * Update index.html * cleanup * DPG-1531: Initializing svg-component Icons in react-component * Resolving PR issues, update svg readme file and stories * DPG-1531: Initialized stories for all svgs * added minor fixes and changes * removed env * Update build-config.yml * Update preview.js * dist-storybook * Update Dockerfile * Playground enabled and onclick added * corrected the compilation issue * added reference * Updated the story book compilcation * fixed the compilation issue * correceted * corrected for A * updated the ico * removed the compilation issues * Update preview.js * updated all package versions --------- Co-authored-by: nabeelmd-eGov Co-authored-by: nabeelmd-eGov <94039229+nabeelmd-eGov@users.noreply.github.com> * Update package.json * updated the order * taken the latest changes from digit-dev --------- Co-authored-by: vamshikrishnakole-wtt-egov <57343517+vamshikrishnakole-wtt-egov@users.noreply.github.com> Co-authored-by: nabeelmd-eGov <94039229+nabeelmd-eGov@users.noreply.github.com> Co-authored-by: nabeelmd-eGov Co-authored-by: Nipun Arora * updated the svg version and stories * addded the v2 stlyes , svg libraries (#204) * PFM-3740 Show the Toast when password changed and need to logout from profile page (#5637) * SM-2880: FSM Truck Icon fill issue fix and react component package upgrade (#5645) * SM-2880: FSM Truck Icon fill issue fix * SM-2880: Readme update --------- Co-authored-by: nabeelmd-eGov * DPG-1488: Initialized color palette an new classnames * Corrected the CSS for inbox composers and default core ui * Updated the package versions * DPG-1489: Setup work in progress * Taken the recent fixes https://github.com/egovernments/DIGIT-Dev/commit/bb2173c4fbef4e529df1f85d2396e1237b409b18 https://github.com/egovernments/DIGIT-Dev/commit/567fd8f25543f8a4fd5b4a1885dcf0357ac6e9a1 https://github.com/egovernments/DIGIT-Dev/commit/1186f4c6fe21ada1a602681a219bf07b909c5c1a https://github.com/egovernments/DIGIT-Dev/commit/43f688be31286174f15e9073a7b5c9c4a45bb7bb * Integrated Create Employee with session storage * Updated Edit flow accordingly * DPG-1489: Typography setup in progress * SM-DPG:1489:Added typography * SM-DPG:1489:identation * Revert "DPG-1489: Typography setup in progress" This reverts commit 5910c14dd200a92bdb2d83a8aef9fc5be4fed038. * SM-DPG:1489:Updated config for typography * remove comments * DPG-1531: Setup & Initialize new svg-component-library (#5644) * DPG-1531: Set Up SVG library * DPG-1531: SVG library setup * DPG-1531: svg library setup * DPG-1531: svg library set up & code clean up * clean up * Update index.html * Update index.html * Update index.html * Update index.html * Update index.html * Update index.html * Update index.html * cleanup * DPG-1531: Initializing svg-component Icons in react-component * Resolving PR issues, update svg readme file and stories * DPG-1531: Initialized stories for all svgs --------- Co-authored-by: nabeelmd-eGov * Revert "DPG-1531: Setup & Initialize new svg-component-library" (#5656) Revert "DPG-1531: Setup & Initialize new svg-component-library (#5644)" This reverts commit 17e43304017cb85b9cffbcbff4e36e83b6a8c8c5. * DPG-1531: Initializing svg-component Icons in react-component (#5657) * DPG-1531: Set Up SVG library * DPG-1531: SVG library setup * DPG-1531: svg library setup * DPG-1531: svg library set up & code clean up * clean up * Update index.html * Update index.html * Update index.html * Update index.html * Update index.html * Update index.html * Update index.html * cleanup * DPG-1531: Initializing svg-component Icons in react-component * Resolving PR issues, update svg readme file and stories * DPG-1531: Initialized stories for all svgs * added minor fixes and changes * removed env * Update build-config.yml * Update preview.js * dist-storybook * Update Dockerfile * Playground enabled and onclick added * corrected the compilation issue * added reference * Updated the story book compilcation * fixed the compilation issue * correceted * corrected for A * updated the ico * removed the compilation issues * Update preview.js * updated all package versions --------- Co-authored-by: nabeelmd-eGov Co-authored-by: nabeelmd-eGov <94039229+nabeelmd-eGov@users.noreply.github.com> * Update package.json * updated the order * taken the latest changes from digit-dev * DPG-1488: integrated color pallete with formcomposerv2 and inbox search composer * DPG-1489: updated all config * DPG-1531: Added playground and propTypes for all SVG and SVG stories (#5658) * Added proptypes in all file * Added playground * Code clean --------- Co-authored-by: nabeelmd-eGov * Update package.json * Multiple tool tip fix * updated version * Update README.md * DPG-1488: Added fixes and comments * Digit components core library created * redefine comments * added new styles added --------- Co-authored-by: vamshikrishnakole-wtt-egov <57343517+vamshikrishnakole-wtt-egov@users.noreply.github.com> Co-authored-by: nabeelmd-eGov <94039229+nabeelmd-eGov@users.noreply.github.com> Co-authored-by: nabeelmd-eGov Co-authored-by: Anil Singha <99383116+anilsingha-eGov@users.noreply.github.com> Co-authored-by: Nipun Arora Co-authored-by: ajay-egov * updated version and published --------- Co-authored-by: vamshikrishnakole-wtt-egov <57343517+vamshikrishnakole-wtt-egov@users.noreply.github.com> Co-authored-by: nabeelmd-eGov <94039229+nabeelmd-eGov@users.noreply.github.com> Co-authored-by: nabeelmd-eGov Co-authored-by: Nipun Arora Co-authored-by: Anil Singha <99383116+anilsingha-eGov@users.noreply.github.com> Co-authored-by: ajay-egov --- .../micro-ui-internals/example/package.json | 2 +- .../micro-ui-internals/packages/css/README.md | 3 +- .../packages/css/package.json | 2 +- .../src/components/inboxv2/InboxLinks.scss | 6 + .../src/components/inboxv2/horizontalNav.scss | 5 + .../src/components/inboxv2/inboxSearch.scss | 188 +- .../inboxv2/inboxSearchComposer.scss | 22 +- .../digitv2/components/FormComposerV2.scss | 116 ++ .../src/digitv2/components/actionbarV2.scss | 108 ++ .../css/src/digitv2/components/cardV2.scss | 431 +++++ .../src/digitv2/components/checkboxV2.scss | 59 + .../components/multiSelectDropdownV2.scss | 89 + .../src/digitv2/components/radiobtnV2.scss | 51 + .../digitv2/components/selectdropdownV2.scss | 190 ++ .../packages/css/src/digitv2/index.scss | 118 ++ .../packages/css/src/digitv2/typography.scss | 133 ++ .../packages/css/src/index.scss | 8 +- .../packages/css/tailwind.config.js | 73 +- .../packages/modules/dss/README.md | 1 + .../packages/modules/dss/package.json | 2 +- .../modules/dss/src/components/CustomTable.js | 5 +- .../components-core/.storybook/main.js | 9 + .../components-core/.storybook/preview.js | 48 + .../packages/components-core/README.md | 79 + .../components-core/docker/Dockerfile | 20 + .../components-core/docker/nginx.conf | 12 + .../packages/components-core/package.json | 63 + .../components-core/public/index.html | 40 + .../components-core/src/atoms-groups/index.js | 0 .../packages/components-core/src/atoms/SVG.js | 1575 +++++++++++++++++ .../components-core/src/atoms/index.js | 7 + .../packages/components-core/src/hoc/index.js | 0 .../packages/components-core/src/index.css | 8 + .../packages/components-core/src/index.js | 7 + .../components-core/src/molecules/index.js | 0 .../src/stories/SVG.stories.js | 26 + .../digitv2/components/FormComposerV2.scss | 116 ++ .../src/digitv2/components/actionbarV2.scss | 108 ++ .../css/src/digitv2/components/cardV2.scss | 431 +++++ .../src/digitv2/components/checkboxV2.scss | 59 + .../components/multiSelectDropdownV2.scss | 89 + .../src/digitv2/components/radiobtnV2.scss | 51 + .../digitv2/components/selectdropdownV2.scss | 190 ++ .../packages/css/src/digitv2/index.scss | 118 ++ .../packages/css/src/digitv2/typography.scss | 133 ++ 45 files changed, 4700 insertions(+), 101 deletions(-) create mode 100644 accelerators/frontend/micro-ui/web/micro-ui-internals/packages/css/src/digitv2/components/FormComposerV2.scss create mode 100644 accelerators/frontend/micro-ui/web/micro-ui-internals/packages/css/src/digitv2/components/actionbarV2.scss create mode 100644 accelerators/frontend/micro-ui/web/micro-ui-internals/packages/css/src/digitv2/components/cardV2.scss create mode 100644 accelerators/frontend/micro-ui/web/micro-ui-internals/packages/css/src/digitv2/components/checkboxV2.scss create mode 100644 accelerators/frontend/micro-ui/web/micro-ui-internals/packages/css/src/digitv2/components/multiSelectDropdownV2.scss create mode 100644 accelerators/frontend/micro-ui/web/micro-ui-internals/packages/css/src/digitv2/components/radiobtnV2.scss create mode 100644 accelerators/frontend/micro-ui/web/micro-ui-internals/packages/css/src/digitv2/components/selectdropdownV2.scss create mode 100644 accelerators/frontend/micro-ui/web/micro-ui-internals/packages/css/src/digitv2/index.scss create mode 100644 accelerators/frontend/micro-ui/web/micro-ui-internals/packages/css/src/digitv2/typography.scss create mode 100644 frontend/micro-ui/web/micro-ui-internals/packages/components-core/.storybook/main.js create mode 100644 frontend/micro-ui/web/micro-ui-internals/packages/components-core/.storybook/preview.js create mode 100644 frontend/micro-ui/web/micro-ui-internals/packages/components-core/README.md create mode 100644 frontend/micro-ui/web/micro-ui-internals/packages/components-core/docker/Dockerfile create mode 100644 frontend/micro-ui/web/micro-ui-internals/packages/components-core/docker/nginx.conf create mode 100644 frontend/micro-ui/web/micro-ui-internals/packages/components-core/package.json create mode 100644 frontend/micro-ui/web/micro-ui-internals/packages/components-core/public/index.html create mode 100644 frontend/micro-ui/web/micro-ui-internals/packages/components-core/src/atoms-groups/index.js create mode 100644 frontend/micro-ui/web/micro-ui-internals/packages/components-core/src/atoms/SVG.js create mode 100644 frontend/micro-ui/web/micro-ui-internals/packages/components-core/src/atoms/index.js create mode 100644 frontend/micro-ui/web/micro-ui-internals/packages/components-core/src/hoc/index.js create mode 100644 frontend/micro-ui/web/micro-ui-internals/packages/components-core/src/index.css create mode 100644 frontend/micro-ui/web/micro-ui-internals/packages/components-core/src/index.js create mode 100644 frontend/micro-ui/web/micro-ui-internals/packages/components-core/src/molecules/index.js create mode 100644 frontend/micro-ui/web/micro-ui-internals/packages/components-core/src/stories/SVG.stories.js create mode 100644 frontend/micro-ui/web/micro-ui-internals/packages/css/src/digitv2/components/FormComposerV2.scss create mode 100644 frontend/micro-ui/web/micro-ui-internals/packages/css/src/digitv2/components/actionbarV2.scss create mode 100644 frontend/micro-ui/web/micro-ui-internals/packages/css/src/digitv2/components/cardV2.scss create mode 100644 frontend/micro-ui/web/micro-ui-internals/packages/css/src/digitv2/components/checkboxV2.scss create mode 100644 frontend/micro-ui/web/micro-ui-internals/packages/css/src/digitv2/components/multiSelectDropdownV2.scss create mode 100644 frontend/micro-ui/web/micro-ui-internals/packages/css/src/digitv2/components/radiobtnV2.scss create mode 100644 frontend/micro-ui/web/micro-ui-internals/packages/css/src/digitv2/components/selectdropdownV2.scss create mode 100644 frontend/micro-ui/web/micro-ui-internals/packages/css/src/digitv2/index.scss create mode 100644 frontend/micro-ui/web/micro-ui-internals/packages/css/src/digitv2/typography.scss diff --git a/accelerators/frontend/micro-ui/web/micro-ui-internals/example/package.json b/accelerators/frontend/micro-ui/web/micro-ui-internals/example/package.json index d7be699b5ea..bc0cfef93a7 100644 --- a/accelerators/frontend/micro-ui/web/micro-ui-internals/example/package.json +++ b/accelerators/frontend/micro-ui/web/micro-ui-internals/example/package.json @@ -10,7 +10,7 @@ }, "devDependencies": { "@egovernments/digit-ui-libraries": "1.5.7", - "@egovernments/digit-ui-module-dss": "1.5.33", + "@egovernments/digit-ui-module-dss": "1.5.36", "@egovernments/digit-ui-module-core": "1.5.39", "@egovernments/digit-ui-module-common": "1.5.30", "@egovernments/digit-ui-module-hrms": "1.5.25", diff --git a/accelerators/frontend/micro-ui/web/micro-ui-internals/packages/css/README.md b/accelerators/frontend/micro-ui/web/micro-ui-internals/packages/css/README.md index 600bb6a68de..595bab51ec7 100644 --- a/accelerators/frontend/micro-ui/web/micro-ui-internals/packages/css/README.md +++ b/accelerators/frontend/micro-ui/web/micro-ui-internals/packages/css/README.md @@ -42,6 +42,7 @@ frontend/micro-ui/web/public/index.html # Changelog ```bash +1.5.32 newer css DIGITv2 added and corrected few existing issues 1.5.31 Corrected the CSS for inbox composers and default core ui 1.5.30 Updated the css for dynamic drodown filter dss 1.5.29 layout issues fixed @@ -54,7 +55,7 @@ frontend/micro-ui/web/public/index.html ``` ## Published from DIGIT Core -Digit Dev Repo (https://github.com/egovernments/DIGIT-Dev/tree/digit-ui-core) +Digit Core Repo (https://github.com/egovernments/Core-Platform/tree/digit-ui-core) ## License diff --git a/accelerators/frontend/micro-ui/web/micro-ui-internals/packages/css/package.json b/accelerators/frontend/micro-ui/web/micro-ui-internals/packages/css/package.json index c54eeb4e1c6..1a5f12f71a3 100644 --- a/accelerators/frontend/micro-ui/web/micro-ui-internals/packages/css/package.json +++ b/accelerators/frontend/micro-ui/web/micro-ui-internals/packages/css/package.json @@ -1,6 +1,6 @@ { "name": "@egovernments/digit-ui-css", - "version": "1.5.31", + "version": "1.5.32", "license": "MIT", "main": "dist/index.css", "author": "Jagankumar ", diff --git a/accelerators/frontend/micro-ui/web/micro-ui-internals/packages/css/src/components/inboxv2/InboxLinks.scss b/accelerators/frontend/micro-ui/web/micro-ui-internals/packages/css/src/components/inboxv2/InboxLinks.scss index 1930d2ca370..7549fe0b3d9 100644 --- a/accelerators/frontend/micro-ui/web/micro-ui-internals/packages/css/src/components/inboxv2/InboxLinks.scss +++ b/accelerators/frontend/micro-ui/web/micro-ui-internals/packages/css/src/components/inboxv2/InboxLinks.scss @@ -1,10 +1,14 @@ +@import url("../../digitv2/index.scss"); + .inbox-search-links-container { + @extend .light-paper-primary; height: 100%; width: 100% !important; display: flex; flex-direction: column; padding: 1rem; .header { + @extend .light-text-color-primary; display: grid; grid-template-columns: 20% 1fr; .logo { @@ -18,6 +22,7 @@ } } .text { + @extend .light-text-color-primary; line-height: 32px; font-weight: 700; color : black; @@ -44,6 +49,7 @@ display: flex; flex-direction: column; .link { + @extend .light-primary; padding: 8px; --text-opacity: 1; color: #f47738; diff --git a/accelerators/frontend/micro-ui/web/micro-ui-internals/packages/css/src/components/inboxv2/horizontalNav.scss b/accelerators/frontend/micro-ui/web/micro-ui-internals/packages/css/src/components/inboxv2/horizontalNav.scss index b97b7c8271d..13fd228d181 100644 --- a/accelerators/frontend/micro-ui/web/micro-ui-internals/packages/css/src/components/inboxv2/horizontalNav.scss +++ b/accelerators/frontend/micro-ui/web/micro-ui-internals/packages/css/src/components/inboxv2/horizontalNav.scss @@ -1,4 +1,8 @@ +@import url("../../digitv2/index.scss"); + .horizontal-nav { + @extend .light-paper-primary; + @extend .light-text-color-primary; overflow: auto; display: flex; margin-top: 3rem; @@ -21,6 +25,7 @@ background: none; .icon { + @extend .light-background; display: block; color: rgb(117, 117, 117); fill: rgb(117, 117, 117); diff --git a/accelerators/frontend/micro-ui/web/micro-ui-internals/packages/css/src/components/inboxv2/inboxSearch.scss b/accelerators/frontend/micro-ui/web/micro-ui-internals/packages/css/src/components/inboxv2/inboxSearch.scss index 22e8a977472..a24f8919f3b 100644 --- a/accelerators/frontend/micro-ui/web/micro-ui-internals/packages/css/src/components/inboxv2/inboxSearch.scss +++ b/accelerators/frontend/micro-ui/web/micro-ui-internals/packages/css/src/components/inboxv2/inboxSearch.scss @@ -1,104 +1,116 @@ +@import url("../../digitv2/index.scss"); + .search-wrapper { - height: 100%; - width: 100%; - padding: 1rem; + @extend .light-text-color-primary; + @extend .light-paper-primary; + height: 100%; + width: 100%; + padding: 1rem; - .popup-label { - display: flex; - font-size: large; - .header{ - width: 100%; - font-weight: normal; - font-size: large; - .icon { - margin-right: 12px; - margin-top: 5px; - } - } + .popup-label { + display: flex; + font-size: large; + @extend .light-text-color-primary; + .header { + @extend .light-text-color-primary; + width: 100%; + font-weight: normal; + font-size: large; + .icon { + @extend .light-primary; + margin-right: 12px; + margin-top: 5px; + } } + } - .filter-header-wrapper { - display: grid; - grid-template-columns: 15% 1fr 15%; - height: 3rem; - margin-bottom: 1rem; - .icon-refresh { - display: flex; - align-items: center; - justify-content: center; - border: 1px solid #00000017; - cursor: pointer; - svg { - height: 60%; - width: 40%; - } - } - .label { - display: flex; - align-items: center; - justify-content: flex-start; - } - - @media (min-width: 1024px) { - .label { - font-size:24px; - } - } + .filter-header-wrapper { + @extend .light-text-color-primary; + display: grid; + grid-template-columns: 15% 1fr 15%; + height: 3rem; + margin-bottom: 1rem; + .icon-refresh { + display: flex; + align-items: center; + justify-content: center; + border: 1px solid #00000017; + cursor: pointer; + svg { + height: 60%; + width: 40%; + } + } + .label { + @extend .light-text-color-primary; + display: flex; + align-items: center; + justify-content: flex-start; + } - @media (max-width: 1024px) { - .label { - font-size:16px; - } - } + @media (min-width: 1024px) { + .label { + font-size: 24px; + } + } - .icon-filter { - display: flex; - align-items: center; - justify-content: flex-start; - } + @media (max-width: 1024px) { + .label { + font-size: 16px; + } } - .search-field-wrapper { - display: grid; - row-gap: 0.25rem; - column-gap: 1rem; - &.inbox { - grid-template-columns: repeat(3, 1fr); - &.filter { - display: flex; - flex-direction: column; - } - } - &.search { - grid-template-columns: repeat(4, 1fr); - } + .icon-filter { + display: flex; + align-items: center; + justify-content: flex-start; } + } - .search-button-wrapper { + .search-field-wrapper { + display: grid; + row-gap: 0.25rem; + column-gap: 1rem; + &.inbox { + grid-template-columns: repeat(3, 1fr); + &.filter { display: flex; - align-items: center; - justify-content: flex-end; - gap: 1rem; - padding-top: 8px; - &.inbox { - grid-column: 2 / span 2; - &.filter { - button { - width: 100%; - } - } - } - &.search { - grid-column: 3 / span 2; + flex-direction: column; + } + } + &.search { + grid-template-columns: repeat(4, 1fr); + } + .text-input{ + @extend .light-primary; + } + } + + .search-button-wrapper { + display: flex; + align-items: center; + justify-content: flex-end; + gap: 1rem; + padding-top: 8px; + &.inbox { + grid-column: 2 / span 2; + &.filter { + button { + width: 100%; } + } + } + &.search { + grid-column: 3 / span 2; } + } } @screen sm { - .search-wrapper { - .search-field-wrapper { - display: flex; - flex-direction : column; - } - } -} \ No newline at end of file + .search-wrapper { + .search-field-wrapper { + display: flex; + flex-direction: column; + } + } +} diff --git a/accelerators/frontend/micro-ui/web/micro-ui-internals/packages/css/src/components/inboxv2/inboxSearchComposer.scss b/accelerators/frontend/micro-ui/web/micro-ui-internals/packages/css/src/components/inboxv2/inboxSearchComposer.scss index 93c81522139..0fe9372aa7c 100644 --- a/accelerators/frontend/micro-ui/web/micro-ui-internals/packages/css/src/components/inboxv2/inboxSearchComposer.scss +++ b/accelerators/frontend/micro-ui/web/micro-ui-internals/packages/css/src/components/inboxv2/inboxSearchComposer.scss @@ -1,15 +1,26 @@ +@import url("../../digitv2/index.scss"); + .inbox-search-wrapper { + @extend .light-background; height: 100%; .inbox-search-component-wrapper { + @extend .light-background; height: 100%; width: 100%; .sections-parent { + @extend .light-background; height: 100%; display: grid; grid-template-columns: 20% 1fr; gap : 1rem; &.inbox { + @extend .light-text-color-primary; .links{ + @extend .light-primary; + @extend .light-paper-primary; + .text{ + @extend .light-text-color-primary; + } .inbox-links-icon{ color:#f47738; fill:#f47738; @@ -31,15 +42,18 @@ } } .search-wrapper { + @extend .light-paper-primary; .search-field-wrapper.search.custom-both-clear-search{ .search-button-wrapper.search { grid-column: initial; } .search-button-wrapper{ .link-label{ + @extend .light-primary; white-space:initial; } .submit-bar { + @extend .light-primary-button; width: 60%; } } @@ -50,8 +64,10 @@ grid-template-columns: 100% } .section { + @extend .light-paper-primary; + @extend .light-text-color-primary; min-height: 10rem; - background-color: white; + /* background-color: white; */ display: flex; align-items: center; justify-content: center; @@ -69,7 +85,9 @@ } } &.filter { - height: fit-content; + @extend .light-paper-primary; + @extend .light-text-color-primary; + height: fit-content; } } } diff --git a/accelerators/frontend/micro-ui/web/micro-ui-internals/packages/css/src/digitv2/components/FormComposerV2.scss b/accelerators/frontend/micro-ui/web/micro-ui-internals/packages/css/src/digitv2/components/FormComposerV2.scss new file mode 100644 index 00000000000..faf345e932e --- /dev/null +++ b/accelerators/frontend/micro-ui/web/micro-ui-internals/packages/css/src/digitv2/components/FormComposerV2.scss @@ -0,0 +1,116 @@ +@import url("../index.scss"); + +.field-container { + display: flex; + align-items: center; + max-width: 540px; + @apply flex items-center; + + .component-in-front { + @apply flex justify-center items-center; + @extend .light-background; + @extend .light-input-border; + margin-top: 0; + border: 1px solid; + border-right: none; + padding: 7px; + } +} + +.card-date-input { + @apply absolute top-0 left-0 w-3/4 bg-white pl-sm border border-input-border border-solid border-r-0; + outline: transparent solid 1px; + height: 2.5rem; + @extend .light-input-border; +} +.text-input-width { + max-width: 540px; +} + +.text-input { + @apply relative w-full; + input { + background-color: transparent; + &:hover { + @apply border-2 border-solid border-primary-main; + @extend .light-input-border; + } + } +} +.employee-card-input-error { + @apply mb-lg pl-sm block w-full h-10 outline-none border-2 border-error border-solid bg-white leading-10 text-form-field text-text-primary; + @extend .light-input-border; + @extend .alert-error; +} +.card-input-error { + @apply mb-lg pl-sm block w-full h-10 outline-none border-2 border-error border-solid bg-white leading-10 text-form-field text-text-primary; + @extend .light-input-border; + @extend .alert-error; +} + +.employee-card-input { + @apply mb-lg pl-sm outline-none block border w-full h-10 border-input-border border-solid bg-white leading-10 text-form-field text-text-primary; + @extend .light-input-border; +} +.employee-card-input:disabled { + @apply border-grey-dark text-grey-dark !important; + pointer-events: none !important; + @extend .light-input-border; + @extend .light-text-color-disabled; +} +.employee-card-input--front { + width: fit-content !important; + display: flex; + align-items: center; + /* background: theme(colors.grey.mid); */ + @extend .light-background; + border-right: 0; + padding-right: 5px; +} +.employee-card-input-error { + @apply mb-lg pl-sm block w-full h-10 outline-none border-2 border-error border-solid bg-white leading-10 text-form-field text-text-primary; + @extend .light-input-border; + @extend .alert-error; +} + +.card-textarea, +.employee-card-textarea { + @apply block outline-none mt-md mb-lg border w-full border-input-border border-solid bg-white h-24 text-form-field text-text-primary p-sm; + @extend .light-input-border; +} +.employee-card-textarea { + @apply w-full; +} + +.citizen-card-input { + @apply mb-lg pl-sm outline-none block border w-full h-10 border-input-border border-solid bg-white leading-10 text-form-field text-text-primary; + @extend .light-input-border; +} +.citizen-card-input--front { + @extend .light-background; + width: fit-content !important; + display: flex; + align-items: center; + /* background: theme(colors.grey.mid); */ + border-right: 0; + padding-right: 5px; +} + +.break-line { + @extend .light-input-border; + @apply border-border my-lg; +} + +.primary-label-btn { + @apply flex; + gap: 10px; + + svg { + fill: theme(colors.primary.main); + } + + @extend .light-primary; + cursor: pointer; + font-weight: 500; + width: fit-content; +} diff --git a/accelerators/frontend/micro-ui/web/micro-ui-internals/packages/css/src/digitv2/components/actionbarV2.scss b/accelerators/frontend/micro-ui/web/micro-ui-internals/packages/css/src/digitv2/components/actionbarV2.scss new file mode 100644 index 00000000000..2b2bf7273b5 --- /dev/null +++ b/accelerators/frontend/micro-ui/web/micro-ui-internals/packages/css/src/digitv2/components/actionbarV2.scss @@ -0,0 +1,108 @@ +@import url("../index.scss"); + +.action-bar-wrap { + box-shadow: rgba(0, 0, 0, 0.16) 0 -2px 8px; + max-width: 480px; + z-index: 100; + @extend .light-background; + + @apply left-0 bottom-0 w-full bg-white py-sm px-sm fixed text-right; + + div { + @apply w-full; + } + .menu-wrap { + @apply absolute bg-white text-left mb-xs z-30 cursor-pointer; + @extend .light-background; + bottom: 45px; + box-shadow: rgba(0, 0, 0, 0.14) 0 8px 10px 1px, rgba(0, 0, 0, 0.12) 0 3px 14px 2px, rgba(0, 0, 0, 0.2) 0 5px 5px -3px; + width: calc(100% - 16px); + right: 8px; + + div { + @apply h-12 pl-sm py-md text-body-l text-text-primary; + @extend .light-primary; + + &:hover { + @apply bg-grey-mid w-full; + @extend .light-background; + } + } + } +} + +@screen dt { + .action-bar-wrap { + box-shadow: rgba(0, 0, 0, 0.16) 0 -2px 8px; + left: 0; + max-width: none; + z-index: 999; + + @apply fixed bottom-0 bg-white py-sm pr-lg text-right; + /* @extend .light-background; */ + + div { + width: calc(100% - 16px); + } + + .menu-wrap { + bottom: 45px; + top: unset; + box-shadow: rgba(0, 0, 0, 0.14) 0 8px 10px 1px, rgba(0, 0, 0, 0.12) 0 3px 14px 2px, rgba(0, 0, 0, 0.2) 0 5px 5px -3px; + @apply absolute h-auto bg-white text-left mb-xs z-30; + width: 240px; + right: 24px; + + div { + @apply h-12 pl-sm py-md text-body-l text-text-primary; + + &:hover { + @apply bg-grey-mid w-full; + /* @extend .light-background; */ + } + } + } + } +} + +.action-bar-wrap-registry { + div { + @apply w-full; + } + .menu-wrap { + @apply absolute bg-white text-left mb-xs z-30 cursor-pointer; + box-shadow: rgba(0, 0, 0, 0.14) 0 8px 10px 1px, rgba(0, 0, 0, 0.12) 0 3px 14px 2px, rgba(0, 0, 0, 0.2) 0 5px 5px -3px; + width: 160px; + right: 60px; + @extend .light-background; + + div { + @apply h-12 pl-sm py-md text-body-l text-text-primary; + + &:hover { + @apply bg-grey-mid w-full; + @extend .light-background; + } + } + } + + .search-add { + padding: 12px 16px; + @extend .light-primary; + color: rgb(244, 119, 56); + display: flex; + cursor: pointer; + } + + .search-add-icon { + @extend .light-primary-button; + background: rgb(244, 119, 56); + border-radius: 50%; + height: 24px; + width: 24px; + display: flex; + justify-content: center; + align-items: center; + margin-left: 10px; + } +} diff --git a/accelerators/frontend/micro-ui/web/micro-ui-internals/packages/css/src/digitv2/components/cardV2.scss b/accelerators/frontend/micro-ui/web/micro-ui-internals/packages/css/src/digitv2/components/cardV2.scss new file mode 100644 index 00000000000..e34ccf1bd92 --- /dev/null +++ b/accelerators/frontend/micro-ui/web/micro-ui-internals/packages/css/src/digitv2/components/cardV2.scss @@ -0,0 +1,431 @@ +@import url("../index.scss"); + +.card { + @apply bg-white m-sm px-md pt-md pb-lg shadow-card; + @extend .light-background; + border-radius: 4px; + max-width: 960px; + + .card-header { + @apply text-text-primary text-heading-xl font-bold font-rc align-middle text-left mb-md; + @extend .light-text-color-primary; + } + + .card-sub-header { + @apply text-text-primary text-caption-xl font-bold align-middle text-left mb-sm; + @extend .light-text-color-primary; + } + + .card-caption { + @apply text-text-secondary text-caption-xl mb-sm; + @extend .light-text-color-secondary; + } + + .card-text { + @apply text-text-secondary text-body-l align-middle text-left mb-lg; + @extend .light-text-color-secondary; + + span { + @apply text-text-primary; + @extend .light-text-color-primary; + } + } + + .card-text-primary { + @extend .light-text-color-primary; + + @apply text-text-primary text-body-l; + } + + .card-text-button { + @extend .light-text-color-primary; + + @apply text-primary-main text-text-btn; + } + + .card-label { + @extend .light-text-color-primary; + + @apply text-legend text-text-primary mb-sm; + } + + .card-label-error { + @extend .alert-error; + @apply block text-body-s text-error mb-md; + } + + .card-label-desc { + @extend .light-text-color-secondary; + @extend .light-text-color-secondary; + @apply font-bold text-text-secondary text-heading-s mb-md; + } + + .card-link { + @extend .light-text-color-primary; + @apply block text-center text-link text-primary-main mt-md cursor-pointer; + } +} + +.validation-error { + @extend .alert-error; + @apply block text-body-s text-error; +} + +.docsDescription { + @extend .light-text-color-primary; + color: theme(colors.text.primary) !important; +} + +.field-container { + @apply flex items-center; + /*@apply flex justify-center items-center;*/ +} + +.employeeCard { + @apply bg-white shadow-card p-md mb-xl; + @extend .light-background; + border-radius: 4px; + + .card-header { + @apply text-text-primary text-heading-xl font-bold font-rc align-middle text-left mb-md; + @extend .light-text-color-primary; + } + + .card-sub-header, + .employee-card-sub-header { + @extend .light-text-color-primary; + @apply text-text-primary text-caption-xl font-bold align-middle text-left; + } + + .card-section-header { + @extend .light-text-color-primary; + @apply text-text-primary text-heading-m font-bold; + } + + .card-section-sub-text { + @extend .light-text-color-primary; + @apply text-text-primary text-body-s; + } + + .card-caption { + @extend .light-text-color-secondary; + @apply text-text-secondary text-caption-xl mb-sm; + } + + .card-text { + @extend .light-text-color-secondary; + @apply text-text-secondary text-body-l align-middle text-left mb-lg; + + span { + @apply text-text-primary; + @extend .light-text-color-primary; + } + } + + .card-text-primary { + @extend .light-text-color-primary; + @apply text-text-primary text-body-l; + } + + .card-text-button { + @extend .light-text-color-primary; + @apply text-primary-main text-text-btn; + } + + .card-label { + @extend .light-text-color-primary; + @apply text-legend text-text-primary mb-md; + } + + .card-label-error { + @extend .alert-error; + @apply block text-body-s text-error mb-md; + } + + .card-label-desc { + @extend .light-text-color-secondary; + @apply font-bold text-text-secondary text-heading-s mb-md; + } + + .card-link { + @extend .light-primary; + @apply block text-center text-link text-link-normal mt-md; + } + + .card-search-heading { + margin-right: 0px !important; + margin-left: 0px !important; + margin-bottom: 0px !important; + padding-bottom: 0px; + padding-left: 25px; + } +} + +.header-wrap { + @apply flex mb-md; + + .header-start { + margin-right: auto; + } + + .header-content { + } + + .header-end { + margin-left: auto; + } +} + +.card-emp { + @extend .card; + padding-right: 0; + padding-top: 0; + padding-left: 0; + @apply bg-white m-sm; + @extend .light-background; +} + +.submit-bar { + @extend .light-primary-button; + /* @extend .light-text-color-primary; */ + @apply h-10 bg-primary-main text-center w-full outline-none; + box-shadow: inset 0px -2px 0px theme(colors.text.primary); + cursor: pointer; + + &:focus { + @apply outline-none; + } + + header { + /* @extend .light-text-color-primary; */ + @apply font-rc font-medium text-legend text-white leading-10; + } +} + +.submit-bar-disabled { + @extend .light-text-color-disabled; + @apply h-10 bg-primary-main text-center w-full outline-none opacity-50; + + &:focus { + @apply outline-none; + } + + header { + @apply font-rc font-medium text-legend text-white leading-10; + } +} + +@screen dt { + .submit-bar, + .submit-bar-disabled { + width: 240px; + } + + .card { + display: flex; + flex-direction: column; + + .card-header { + @apply text-heading-xl-dt; + } + + .card-sub-header { + @apply text-heading-l-dt; + } + + .card-caption { + @apply text-caption-xl-dt; + } + + .card-text, + .card-text-primary { + @apply text-body-l-dt; + } + + .card-link { + @apply text-left; + } + } + + .employeeCard { + @apply mb-md mx-md !important; + + &.filter { + margin-left: auto; + margin-right: auto; + } + + .card-header { + @apply text-heading-xl-dt; + } + + .card-sub-header { + @apply text-heading-l-dt; + } + + .employee-card-sub-header { + margin-bottom: 40px; + @apply text-heading-l-dt; + } + + .card-section-header { + margin-bottom: 40px; + @apply text-heading-m-dt; + } + + .card-section-sub-text { + @apply text-text-primary text-body-s-dt; + } + + .card-search-heading { + margin-right: 0px !important; + margin-left: 0px !important; + margin-bottom: 0px !important; + padding-bottom: 0px; + padding-left: 25px; + } + + .card-caption { + @apply text-caption-xl-dt; + } + + .card-text, + .card-text-primary { + @apply text-body-l-dt; + } + + .card-link { + @apply text-left; + } + + .label-field-pair { + @apply flex items-center; + + h2 { + width: 30%; + } + + .field { + width: 50%; + margin-right: 20%; + .field { + margin-right: unset; + } + } + } + + .field-container { + span { + border: 2px solid black; + background: rgb(247, 247, 247); + width: 40px; + height: 40px; + display: flex; + justify-content: center; + align-items: center; + margin-top: -16px; + border-right: none; + } + } + } + + .header-wrap { + @apply flex mb-md; + + .header-start { + margin-right: auto; + } + + .header-content { + } + + .header-end { + margin-left: auto; + } + } +} + +.card-section-header { + @extend .light-text-color-primary; + @apply text-text-primary text-heading-m font-bold; +} + +.card-search-heading { + margin-right: 0px !important; + margin-left: 0px !important; + margin-bottom: 0px !important; + padding-bottom: 0px; + padding-left: 25px; +} + +.button-sub-text { + width: 100%; +} + +.home-page-info-banner-wrap { + margin: "0px 16px 24px 16px"; +} + +@media (min-width: 780px) { + .button-sub-text { + width: 240px; + } + .home-page-info-banner-wrap { + max-width: 45%; + min-width: 40%; + margin-left: 0; + margin-right: 24px; + margin-bottom: 24px; + } + .info-banner-wrap-citizen-override { + } + .oc-aknowledgement-screen { + width: auto; + min-width: 240px; + max-width: 100%; + padding: 0px 10px; + } +} + +.card-label-error { + @extend .alert-error; + @apply block text-body-s text-error mb-md; +} + +.employeeCard-override { + margin-left: 0px !important; +} + +.BPAemployeeCard { + margin-left: 0px !important; + margin-right: 0px !important; + margin-bottom: 64px !important; +} + +.employee-application-details { + display: flex !important; + justify-content: space-between !important; + max-height: 60px !important; + height: 60px !important; +} +.employee-main-application-details { + padding: 10px !important; +} + +.employee-mulitlink-main-div { + @extend .light-primary; + z-index: 10 !important; + max-width: 41% !important; +} + +.employee-download-btn-className { + position: unset !important; + display: flex !important; + justify-content: flex-end !important; +} + +.employee-options-btn-className { + position: unset !important; + margin: 0 !important; + width: 100% !important; +} diff --git a/accelerators/frontend/micro-ui/web/micro-ui-internals/packages/css/src/digitv2/components/checkboxV2.scss b/accelerators/frontend/micro-ui/web/micro-ui-internals/packages/css/src/digitv2/components/checkboxV2.scss new file mode 100644 index 00000000000..49fee491a3d --- /dev/null +++ b/accelerators/frontend/micro-ui/web/micro-ui-internals/packages/css/src/digitv2/components/checkboxV2.scss @@ -0,0 +1,59 @@ +@import url("../index.scss"); + +.checkbox-wrap { + @apply flex mb-md relative items-baseline; + + input { + width: 38px; + height: 38px; + @apply opacity-0 absolute top-0 left-0 z-10; + @extend .light-input-border; + } + + .input-emp { + @extend input; + width: 24px; + height: 24px; + } + + .custom-checkbox { + width: 38px; + height: 38px; + @apply absolute top-0 left-0 border border-solid border-input-border z-0; + @extend .light-input-border; + + img { + @apply opacity-0; + } + + svg { + @apply opacity-0; + } + } + + .custom-checkbox-emp { + @extend .custom-checkbox; + width: 24px; + height: 24px; + } + + input:checked ~ .custom-checkbox, + input:hover ~ .custom-checkbox { + @apply border-2 border-primary-main; + @extend .light-input-border; + } + + input:checked ~ .custom-checkbox img { + @apply opacity-100; + } + + input:checked ~ .custom-checkbox svg { + @apply opacity-100; + } + + .label { + margin-left: 56px; + @apply text-form-field text-text-primary; + @extend .light-text-color-primary; + } +} diff --git a/accelerators/frontend/micro-ui/web/micro-ui-internals/packages/css/src/digitv2/components/multiSelectDropdownV2.scss b/accelerators/frontend/micro-ui/web/micro-ui-internals/packages/css/src/digitv2/components/multiSelectDropdownV2.scss new file mode 100644 index 00000000000..e5e4536a341 --- /dev/null +++ b/accelerators/frontend/micro-ui/web/micro-ui-internals/packages/css/src/digitv2/components/multiSelectDropdownV2.scss @@ -0,0 +1,89 @@ +@import url("../index.scss"); + +.multi-select-dropdown-wrap { + @apply relative text-form-field text-text-primary w-full; + @extend .light-text-color-primary; + .master, + .master-active { + @extend .light-input-border; + @apply relative border border-solid border-input-border h-10 w-full; + input[type="text"] { + @apply absolute top-0 left-0 p-sm pl-sm min-h-full min-w-full opacity-0; + &:focus { + @apply outline-none; + } + } + .label { + @apply flex justify-between p-sm w-full h-full; + svg { + @apply h-6 w-6; + } + } + + &:hover { + @extend .light-input-border; + + @apply border-2 border-solid border-primary-main; + } + } + + .master-active { + @apply border-2 border-primary-main; + @extend .light-input-border; + + input[type="text"] { + @apply opacity-100; + } + .label { + @apply hidden; + } + } + + .server { + box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12), 0 5px 5px -3px rgba(0, 0, 0, 0.2); + top: 40px; + + max-height: 20vmax; + overflow: scroll; + @apply absolute min-w-full z-20; + div { + @apply flex w-full bg-white; + @extend .light-background; + justify-content: flex-start; + align-items: center; + &:hover { + @apply bg-grey-mid; + @extend .light-background; + } + input { + height: 44px; + @apply absolute min-w-full opacity-0 z-20 cursor-pointer; + } + p { + padding: 12px; + margin-top: 5px; + margin-bottom: 5px; + @apply text-form-field text-text-primary; + @extend .light-text-color-primary; + } + .custom-checkbox { + height: 28px; + width: 28px; + @extend .light-input-border; + @apply border border-solid border-input-border m-sm; + svg { + @apply opacity-0 z-10; + } + } + input:checked ~ .custom-checkbox, + input:hover ~ .custom-checkbox { + @extend .light-input-border; + @apply border-2 border-primary-main; + } + + input:checked ~ .custom-checkbox svg { + @apply opacity-100; + } + } + } +} diff --git a/accelerators/frontend/micro-ui/web/micro-ui-internals/packages/css/src/digitv2/components/radiobtnV2.scss b/accelerators/frontend/micro-ui/web/micro-ui-internals/packages/css/src/digitv2/components/radiobtnV2.scss new file mode 100644 index 00000000000..e86f31bd33d --- /dev/null +++ b/accelerators/frontend/micro-ui/web/micro-ui-internals/packages/css/src/digitv2/components/radiobtnV2.scss @@ -0,0 +1,51 @@ +@import url("../index.scss"); + +.radio-wrap { + @apply my-sm block leading-10 mb-lg; + + div { + @apply block mb-md; + } + + .radio-btn-wrap { + @apply block float-left relative; + &:hover { + .radio-btn-checkmark { + @apply border-primary-main; + } + } + } + + .radio-btn { + @apply opacity-0 absolute cursor-pointer h-10 w-10; + } + + .radio-btn-checkmark { + @extend .light-input-border; + @apply h-10 w-10 border border-input-border border-solid rounded-full block; + } + + label { + @extend .light-text-color-primary; + @apply text-text-primary text-form-field ml-md; + } + + .radio-btn-checkmark:after { + content: ""; + } + + .radio-btn-wrap input:checked ~ .radio-btn-checkmark { + /* @extend .light-input-border; */ + @apply border-2 border-primary-main; + } + + .radio-btn-wrap input:checked ~ .radio-btn-checkmark:after { + /* @extend .light-background; */ + @apply block bg-primary-main h-5 w-5 rounded-full absolute top-10 left-10; + } +} +.reverse-radio-selection-wrapper { + div { + @apply flex flex-row-reverse place-content-between items-center; + } +} diff --git a/accelerators/frontend/micro-ui/web/micro-ui-internals/packages/css/src/digitv2/components/selectdropdownV2.scss b/accelerators/frontend/micro-ui/web/micro-ui-internals/packages/css/src/digitv2/components/selectdropdownV2.scss new file mode 100644 index 00000000000..0a8788d36ed --- /dev/null +++ b/accelerators/frontend/micro-ui/web/micro-ui-internals/packages/css/src/digitv2/components/selectdropdownV2.scss @@ -0,0 +1,190 @@ +/*.select { + + @apply mb-lg block border-2 border-input-border border-solid outline-none rounded-none w-full h-10 bg-white leading-10; + + option { + @apply h-10 text-form-field text-text-primary align-top text-left; + } + + } + +.select:active { + @apply border-focus border-2; +} + +@screen dt { + .select { + @apply w-2/5; + } +} +*/ +.employee-select-wrap { + @apply mb-lg relative; + + .select { + @extend .light-input-border; + @apply relative block w-full h-10 border border-solid border-input-border; + &:hover { + @extend .light-input-border; + @apply border-2 border-solid border-primary-main; + } + input[type="text"] { + width: calc(100% - 32px); + background-color: transparent; + @extend .light-input-border; + @extend .light-text-color-primary; + @apply absolute z-10 w-full h-full outline-none text-text-primary text-form-field pl-sm; + } + + p { + padding-top: 9px; + @extend .light-text-color-primary; + @apply text-form-field text-text-primary float-left ml-sm; + } + + img { + @apply float-right h-6 w-6 mt-sm mr-sm; + } + + svg { + @apply absolute right-0 float-right h-6 w-6 mt-sm mr-sm; + } + } + + .select-active { + @apply relative block w-full h-10 border-2 border-solid border-primary-main; + @extend .light-input-border; + + input[type="text"] { + width: calc(100% - 32px); + background-color: transparent; + @extend .light-background; + @extend .light-text-color-primary; + + @apply absolute z-10 w-full h-full outline-none text-text-primary text-form-field pl-sm; + } + + p { + @extend .light-text-color-primary; + @apply text-form-field text-text-primary float-left ml-sm; + } + + p { + padding-top: 9px; + } + + img { + @apply float-right h-6 w-6 mt-sm mr-sm; + } + + svg { + @apply absolute right-0 float-right h-6 w-6 mt-sm mr-sm; + } + } + + .options-card { + width: 100% !important; + box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12), 0 5px 5px -3px rgba(0, 0, 0, 0.2); + max-height: 400px; + overflow: auto; + @apply absolute z-20 mt-xs bg-white max-w-full; + + p { + padding-top: 14px; + @extend .light-text-color-primary; + @apply w-full h-12 pl-sm text-text-primary text-form-field; + + &:hover { + @apply bg-grey-mid; + @extend .light-background; + } + } + } +} + +.employee-select-wrap--elipses { + width: 85% !important; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +.select-wrap { + @apply mb-lg relative; + max-width: 540px; + + .select { + @apply relative block w-full h-10 border border-solid border-input-border; + @extend .light-input-border; + + input[type="text"] { + width: calc(100% - 32px); + background-color: transparent; + @extend .light-text-color-primary; + @apply absolute z-10 w-full h-full outline-none text-text-primary text-form-field pl-sm; + } + + p { + padding-top: 9px; + @extend .light-text-color-primary; + @apply text-form-field text-text-primary float-left ml-sm; + } + + img { + @apply float-right h-6 w-6 mt-sm mr-sm; + } + + svg { + @apply absolute right-0 float-right h-6 w-6 mt-sm mr-sm; + } + } + + .select-active { + @extend .light-input-border; + @apply relative block w-full h-10 border-2 border-solid border-primary-main; + + input[type="text"] { + width: calc(100% - 32px); + background-color: transparent; + @extend .light-text-color-primary; + @apply absolute z-10 w-full h-full outline-none text-text-primary text-form-field pl-sm; + } + + p { + @extend .light-text-color-primary; + @apply text-form-field text-text-primary float-left ml-sm; + } + + p { + padding-top: 9px; + } + + img { + @apply float-right h-6 w-6 mt-sm mr-sm; + } + + svg { + @apply absolute right-0 float-right h-6 w-6 mt-sm mr-sm; + } + } + + .options-card { + width: 100% !important; + box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12), 0 5px 5px -3px rgba(0, 0, 0, 0.2); + @extend .light-background; + @apply absolute z-20 mt-xs bg-white; + + p { + padding-top: 14px; + @extend .light-text-color-primary; + @apply w-full h-12 pl-sm text-text-primary text-form-field; + + &:hover { + @apply bg-grey-mid; + } + } + } +} + +@screen dt { +} diff --git a/accelerators/frontend/micro-ui/web/micro-ui-internals/packages/css/src/digitv2/index.scss b/accelerators/frontend/micro-ui/web/micro-ui-internals/packages/css/src/digitv2/index.scss new file mode 100644 index 00000000000..fc9b6672dec --- /dev/null +++ b/accelerators/frontend/micro-ui/web/micro-ui-internals/packages/css/src/digitv2/index.scss @@ -0,0 +1,118 @@ +@import url("./components/actionbarV2.scss"); +@import url("./components/cardV2.scss"); +@import url("./components/checkboxV2.scss"); +@import url("./components/FormComposerV2.scss"); +@import url("./components/multiSelectDropdownV2.scss"); +@import url("./components/radiobtnV2.scss"); +@import url("./components/selectdropdownV2.scss"); +@import url("./typography.scss"); + +/* important to be remove after fixing the components */ +.light { + &-primary { + color: theme(digitv2.lightTheme.primary) !important; + &-button { + background-color: theme(digitv2.lightTheme.primary) !important; + } + + &-bg { + background-color: theme(digitv2.lightTheme.primary-bg) !important; + } + } + + &-text-color { + &-primary { + color: theme(digitv2.lightTheme.text-color-primary) !important; + } + + &-secondary { + color: theme(digitv2.lightTheme.text-color-secondary) !important; + } + + &-disabled { + color: theme(digitv2.lightTheme.text-color-disabled) !important; + } + } + + &-background { + background-color: theme(digitv2.lightTheme.background) !important; + } + + &-paper { + &-primary { + background-color: theme(digitv2.lightTheme.paper) !important; + } + + &-secondary { + background-color: theme(digitv2.lightTheme.paper-secondary) !important; + } + } + + &-divider { + background-color: theme(digitv2.lightTheme.divider) !important; + } + + &-header-sidenav { + color: theme(digitv2.lightTheme.header-sidenav) !important; + } + + &-input-border { + border-color: theme(digitv2.lightTheme.input-border) !important; + } +} + +.alert { + &-error { + color: theme(digitv2.alert.error) !important; + + &-bg { + background-color: theme(digitv2.alert.error-bg) !important; + } + } + + &-success { + color: theme(digitv2.alert.success) !important; + + &-bg { + background-color: theme(digitv2.alert.success-bg) !important; + } + } + + &-info { + color: theme(digitv2.alert.info) !important; + + &-bg { + background-color: theme(digitv2.alert.info-bg) !important; + } + } +} + +.chart { + &-item-1 { + color: theme(digitv2.chart.chart-1) !important; + } + + &-item-1-gradient { + color: theme(digitv2.chart.chart-1-gradient) !important; + } + + &-item-2 { + color: theme(digitv2.chart.chart-2) !important; + } + + &-item-2-gradient { + color: theme(digitv2.chart.chart-2-gradient) !important; + } + + &-item-3 { + color: theme(digitv2.chart.chart-3) !important; + } + + &-item-4 { + color: theme(digitv2.chart.chart-4) !important; + } + + &-item-5 { + color: theme(digitv2.chart.chart-5) !important; + } +} diff --git a/accelerators/frontend/micro-ui/web/micro-ui-internals/packages/css/src/digitv2/typography.scss b/accelerators/frontend/micro-ui/web/micro-ui-internals/packages/css/src/digitv2/typography.scss new file mode 100644 index 00000000000..d1151ab5256 --- /dev/null +++ b/accelerators/frontend/micro-ui/web/micro-ui-internals/packages/css/src/digitv2/typography.scss @@ -0,0 +1,133 @@ +.typography { + &.text-heading-xl-dt { + font-family: theme(digitv2.fontFamily.rc); + font-size: theme(digitv2.fontSize.heading-xl-dt); + font-style: theme(digitv2.fontStyle.normal); + font-weight: theme(digitv2.fontWeight.bold); + + @media (max-width: theme(digitv2.screens.dt)) { + font-size: theme(digitv2.fontSize.heading-xl); + } + } + &.text-heading-l-dt { + font-family: theme(digitv2.fontFamily.rc); + font-size: theme(digitv2.fontSize.heading-l-dt); + font-style: theme(digitv2.fontStyle.normal); + font-weight: theme(digitv2.fontWeight.bold); + + @media (max-width: theme(digitv2.screens.dt)) { + font-size: theme(digitv2.fontSize.heading-l); + } + } + + &.text-heading-m-dt { + font-family: theme(digitv2.fontFamily.rc); + font-size: theme(digitv2.fontSize.heading-m-dt); + font-style: theme(digitv2.fontStyle.normal); + font-weight: theme(digitv2.fontWeight.bold); + + @media (max-width: theme(digitv2.screens.dt)) { + font-size: theme(digitv2.fontSize.heading-m); + } + } + + &.text-heading-m { + font-family: theme(digitv2.fontFamily.sans); + font-size: theme(digitv2.fontSize.heading-m); + font-style: theme(digitv2.fontStyle.normal); + font-weight: theme(digitv2.fontWeight.bold); + + @media (max-width: theme(digitv2.screens.sm.max)) { + font-size: theme(digitv2.fontSize.heading-m); + } + } + + &.text-heading-s { + font-family: theme(digitv2.fontFamily.sans); + font-size: theme(digitv2.fontSize.heading-s); + font-style: theme(digitv2.fontStyle.normal); + font-weight: theme(digitv2.fontWeight.bold); + } + + &.text-caption-xl-dt { + font-family: theme(digitv2.fontFamily.rc); + font-size: theme(digitv2.fontSize.caption-xl-dt); + font-style: theme(digitv2.fontStyle.normal); + font-weight: theme(digitv2.fontWeight.regular); + + @media (max-width: theme(digitv2.screens.dt)) { + font-size: theme(digitv2.fontSize.caption-xl); + } + } + + &.text-caption-l-dt { + font-family: theme(digitv2.fontFamily.rc); + font-size: theme(digitv2.fontSize.caption-l-dt); + font-style: theme(digitv2.fontStyle.normal); + font-weight: theme(digitv2.fontWeight.regular); + + @media (max-width: theme(digitv2.screens.dt)) { + font-size: theme(digitv2.fontSize.caption-l); + } + } + + &.text-caption-m-dt { + font-family: theme(digitv2.fontFamily.rc); + font-size: theme(digitv2.fontSize.caption-m-dt); + font-style: theme(digitv2.fontStyle.normal); + font-weight: theme(digitv2.fontWeight.regular); + + @media (max-width: theme(digitv2.screens.dt)) { + font-size: theme(digitv2.fontSize.caption-m); + } + } + &.text-body-l-dt { + font-family: theme(digitv2.fontFamily.rc); + font-size: theme(digitv2.fontSize.body-l-dt); + font-style: theme(digitv2.fontStyle.normal); + font-weight: theme(digitv2.fontWeight.regular); + + @media (max-width: theme(digitv2.screens.dt)) { + font-size: theme(digitv2.fontSize.body-l); + } + } + + &.text-body-s-dt { + font-family: theme(digitv2.fontFamily.rc); + font-size: theme(digitv2.fontSize.body-s-dt); + font-style: theme(digitv2.fontStyle.normal); + font-weight: theme(digitv2.fontWeight.regular); + + @media (max-width: theme(digitv2.screens.dt)) { + font-size: theme(digitv2.fontSize.body-s); + } + } + + &.text-body-xs { + @media (max-width: theme(digitv2.screens.sm.max)) { + font-size: theme(digitv2.fontSize.body-xs); + font-family: theme(digitv2.fontFamily.sans); + font-style: theme(digitv2.fontStyle.normal); + font-weight: theme(digitv2.fontWeight.regular); + } + } + + + &.text-link { + font-family: theme(digitv2.fontFamily.sans); + font-size: theme(digitv2.fontSize.link); + font-style: theme(digitv2.fontStyle.normal); + font-weight: theme(digitv2.fontWeight.regular); + } + &.text-label-dt { + font-family: theme(digitv2.fontFamily.sans); + font-size: theme(digitv2.fontSize.label-dt); + font-style: theme(digitv2.fontStyle.normal); + font-weight: theme(digitv2.fontWeight.regular); + @media (max-width: theme(digitv2.screens.dt)) { + font-size: theme(digitv2.fontSize.label-m); + + } + + } +} diff --git a/accelerators/frontend/micro-ui/web/micro-ui-internals/packages/css/src/index.scss b/accelerators/frontend/micro-ui/web/micro-ui-internals/packages/css/src/index.scss index 2e19e082de4..d54dbcd4da7 100644 --- a/accelerators/frontend/micro-ui/web/micro-ui-internals/packages/css/src/index.scss +++ b/accelerators/frontend/micro-ui/web/micro-ui-internals/packages/css/src/index.scss @@ -106,6 +106,8 @@ @import "./pages/citizen/updatePropertyNumber.scss"; @import "./pages/citizen/citizenDocument.scss"; @import "./pages/employee/surveys.scss"; +@import "./digitv2/index.scss"; +/* @import "./digitv2/typography.scss"; */ @import "./components/inboxv2/index.scss"; .display-none { @@ -555,11 +557,10 @@ input[type="number"] { .full-employee-card-link { width: 100% !important; margin: 7px 0px; - a{ + a { color: inherit; - text-decoration: inherit + text-decoration: inherit; } - } .full-employee-card-height { height: unset !important; @@ -732,4 +733,3 @@ input[type="number"] { max-height: 120px; margin-top: 90px; } - diff --git a/accelerators/frontend/micro-ui/web/micro-ui-internals/packages/css/tailwind.config.js b/accelerators/frontend/micro-ui/web/micro-ui-internals/packages/css/tailwind.config.js index 0ccfc7a5c8f..11d5eeed3f5 100644 --- a/accelerators/frontend/micro-ui/web/micro-ui-internals/packages/css/tailwind.config.js +++ b/accelerators/frontend/micro-ui/web/micro-ui-internals/packages/css/tailwind.config.js @@ -25,7 +25,7 @@ module.exports = { hover: "#003078", }, border: "#D6D5D4", - inputBorder:"#464646", + inputBorder: "#464646", "input-border": "#464646", focus: "#F47738", error: "#D4351C", @@ -101,6 +101,77 @@ module.exports = { 10: "10px", }, extend: {}, + digitv2: { + lightTheme: { + primary: "#F47738", + "text-color-primary": "#0B0C0C", + "text-color-secondary": "#505A5F", + "text-color-disabled": "#B1B4B6", + background: "#EEEEEE", + paper: "#FFFFFF", + "paper-secondary": "#FAFAFA", + divider: "#D6D5D4", + "header-sidenav": "#0B4B66", + "input-border": "#505A5F", + "primary-bg": "#E6D7D0", + }, + alert: { + error: "#D4351C", + "error-bg": "#EFC7C1", + success: "#00703C", + "success-bg": "#BAD6C9", + info: "#3498DB", + "info-bg": "#C7E0F1", + }, + chart: { + "chart-1": "#048BD0", + "chart-1-gradient": "#048BD0", + "chart-2": "#FBC02D", + "chart-2-gradient": "#FBC02D", + "chart-3": "#8E29BF", + "chart-4": "#EA8A3B", + "chart-5": "#0BABDE", + }, + fontSize: { + "heading-xl-dt": "3rem", + "heading-xl": "2rem", + "heading-l-dt": "2.25rem", + "heading-l": "1.5rem", + "heading-m-dt": "1.5rem", + "heading-m": "1.125rem", + "heading-s": "1rem", + "caption-xl-dt": "1.688rem", + "caption-xl": "1.125rem", + "caption-l-dt": "1.5rem", + "caption-l": "1.125rem", + "caption-m-dt": "1.1875rem", + "caption-m": "1rem", + "body-l-dt": "1.1875rem", + "body-l": "1rem", + "body-s-dt": "1rem", + "body-s": "0.875rem", + "body-xs": "0.75rem", + "label-dt":"1.1875rem", + "label-m":"1rem", + "link": "1rem", + }, + fontFamily: { + sans: ["Roboto"], + rc: ['"Roboto Condensed"'], + }, + fontStyle: { + normal: "normal", + }, + fontWeight: { + regular: 400, + medium: 500, + bold: 700, + }, + screens: { + dt: "780px", + sm: { max: "425px" }, + }, + }, }, variants: {}, plugins: [], diff --git a/accelerators/frontend/micro-ui/web/micro-ui-internals/packages/modules/dss/README.md b/accelerators/frontend/micro-ui/web/micro-ui-internals/packages/modules/dss/README.md index 332aa44fce0..815514a068a 100644 --- a/accelerators/frontend/micro-ui/web/micro-ui-internals/packages/modules/dss/README.md +++ b/accelerators/frontend/micro-ui/web/micro-ui-internals/packages/modules/dss/README.md @@ -153,6 +153,7 @@ const useGetCustomFilterRequestValues = (filterConfigs, config={}) => { # Changelog ```bash +1.5.36 Bug Fix::Multiple tooltips showing in Tables 1.5.35 Added the dynamic filter component 1.5.34 Count config added for Metric chart 1.5.33 Horizontal Bar and Pie chart alignment fixes diff --git a/accelerators/frontend/micro-ui/web/micro-ui-internals/packages/modules/dss/package.json b/accelerators/frontend/micro-ui/web/micro-ui-internals/packages/modules/dss/package.json index a9f608d3f25..7a75315eb4e 100644 --- a/accelerators/frontend/micro-ui/web/micro-ui-internals/packages/modules/dss/package.json +++ b/accelerators/frontend/micro-ui/web/micro-ui-internals/packages/modules/dss/package.json @@ -1,6 +1,6 @@ { "name": "@egovernments/digit-ui-module-dss", - "version": "1.5.35", + "version": "1.5.36", "license": "MIT", "main": "dist/index.js", "module": "dist/index.modern.js", diff --git a/accelerators/frontend/micro-ui/web/micro-ui-internals/packages/modules/dss/src/components/CustomTable.js b/accelerators/frontend/micro-ui/web/micro-ui-internals/packages/modules/dss/src/components/CustomTable.js index 361712bdb19..1200bb268cd 100644 --- a/accelerators/frontend/micro-ui/web/micro-ui-internals/packages/modules/dss/src/components/CustomTable.js +++ b/accelerators/frontend/micro-ui/web/micro-ui-internals/packages/modules/dss/src/components/CustomTable.js @@ -277,14 +277,15 @@ const CustomTable = ({ data = {}, onSearch, setChartData, setChartDenomination } const tableColumns = useMemo(() => { const columns = response?.responseData?.data?.find((row) => !!row); + const chartId = response?.responseData?.visualizationCode; return columns?.plots ?.filter((plot) => plot?.name !== "TankCapacity") .map((plot, index) => ({ Header: ( - + {renderHeader(plot)} - + {t(`TIP_DSS_HEADER_${Digit.Utils.locale.getTransformedLocale(plot?.name)}`)} {/* + +# digit-ui-components-core + +## Install + +```bash +npm install --save @egovernments/digit-ui-components-core +``` + +## Limitation + +```bash +This Package is more specific to DIGIT-UI's can be used across mission's +``` + +## Usage + +After adding the dependency make sure you have this dependency in + +```bash +frontend/micro-ui/web/package.json +``` + +```json +"@egovernments/digit-ui-components-core":"0.0.1", +``` + +then navigate to App.js + +```bash + frontend/micro-ui/web/src/App.js +``` + +# Syntax for importing any components + +```jsx +import { SVG } from "@egovernments/digit-ui-components-core"; + +; +``` + +# Local Development +Use Node 14 version + +Step 1 + + ```bash +yarn install +``` + +Step 2 + + ```bash +yarn storybook +``` + + +# Changelog + +```bash +0.0.1 base version +``` + +## Published from DIGIT Core + +Digit Core Repo (https://github.com/egovernments/Core-Platform/tree/digit-ui-core) + +# Contributors + +[nabeelmd-egov] [anilsingha-eGov] [nipunarora-eGov] [jagankumar-egov] + +# Reference + +Home Page (https://unified-dev.digit.org/storybook/) + +## License + +MIT © [jagankumar-egov](https://github.com/jagankumar-egov) diff --git a/frontend/micro-ui/web/micro-ui-internals/packages/components-core/docker/Dockerfile b/frontend/micro-ui/web/micro-ui-internals/packages/components-core/docker/Dockerfile new file mode 100644 index 00000000000..bdf0891c33e --- /dev/null +++ b/frontend/micro-ui/web/micro-ui-internals/packages/components-core/docker/Dockerfile @@ -0,0 +1,20 @@ +FROM egovio/alpine-node-builder-14:yarn AS build +RUN apk update && apk upgrade +RUN apk add --no-cache git>2.30.0 +ARG WORK_DIR +WORKDIR /app +ENV NODE_OPTIONS "--max-old-space-size=1792" + +COPY ${WORK_DIR} . + +#RUN node web/envs.js +RUN yarn install \ + && yarn build-storybook + +FROM nginx:mainline-alpine +ENV WORK_DIR=/var/storybook + +RUN mkdir -p ${WORK_DIR} + +COPY --from=build /app/dist-storybook ${WORK_DIR}/ +COPY --from=build /app/docker/nginx.conf /etc/nginx/conf.d/default.conf \ No newline at end of file diff --git a/frontend/micro-ui/web/micro-ui-internals/packages/components-core/docker/nginx.conf b/frontend/micro-ui/web/micro-ui-internals/packages/components-core/docker/nginx.conf new file mode 100644 index 00000000000..e7c7c215451 --- /dev/null +++ b/frontend/micro-ui/web/micro-ui-internals/packages/components-core/docker/nginx.conf @@ -0,0 +1,12 @@ +server +{ + listen 80; + underscores_in_headers on; + + location /storybook + { + root /var/; + index index.html index.htm; + try_files $uri $uri/ /storybook/index.html; + } +} \ No newline at end of file diff --git a/frontend/micro-ui/web/micro-ui-internals/packages/components-core/package.json b/frontend/micro-ui/web/micro-ui-internals/packages/components-core/package.json new file mode 100644 index 00000000000..97b5fda5625 --- /dev/null +++ b/frontend/micro-ui/web/micro-ui-internals/packages/components-core/package.json @@ -0,0 +1,63 @@ +{ + "name": "@egovernments/digit-ui-components-core", + "version": "0.0.1", + "main": "dist/index.js", + "module": "dist/index.modern.js", + "source": "src/index.js", + "engines": { + "node": ">=14" + }, + "homepage": "https://unified-dev.digit.org/storybook/", + "author": "Jagankumar ", + "license": "MIT", + "scripts": { + "example": "cd example && npm run start", + "build": "microbundle-crl --compress --no-sourcemap --format cjs", + "start": "microbundle-crl watch --no-compress --format modern,cjs", + "prepare": "yarn build", + "predeploy": "cd example && yarn install && yarn run build", + "deploy": "gh-pages -d example/build", + "storybook": "start-storybook -p 6006 -s public", + "build-storybook": "build-storybook -s public -o dist-storybook", + "deploy-storybook": "npm run build-storybook && surge --project dist-storybook --domain svg-components-$npm_package_version.surge.sh" + }, + "peerDependencies": { + "react": "17.0.2", + "react-dom": "17.0.2" + }, + "devDependencies": { + "@storybook/addon-actions": "6.4.20", + "@storybook/addon-essentials": "6.4.20", + "@storybook/addon-links": "6.4.20", + "@storybook/node-logger": "6.4.20", + "@storybook/preset-create-react-app": "3.2.0", + "@storybook/react": "6.4.20", + "babel-eslint": "10.1.0", + "cross-env": "7.0.3", + "husky": "7.0.4", + "lint-staged": "12.3.7", + "microbundle-crl": "0.13.11", + "react": "17.0.2", + "react-scripts": "^4.0.1", + "react-dom": "17.0.2" + }, + "dependencies": { + "@egovernments/digit-ui-svg-components":"0.0.2" + }, + "files": [ + "dist" + ], + "browserslist": { + "production": [ + ">0.2%", + "not dead", + "not op_mini all" + ], + "development": [ + "last 1 chrome version", + "last 1 firefox version", + "last 1 safari version" + ] + }, + "keywords": ["digit","core","components","dpg"] +} diff --git a/frontend/micro-ui/web/micro-ui-internals/packages/components-core/public/index.html b/frontend/micro-ui/web/micro-ui-internals/packages/components-core/public/index.html new file mode 100644 index 00000000000..5950eb6067a --- /dev/null +++ b/frontend/micro-ui/web/micro-ui-internals/packages/components-core/public/index.html @@ -0,0 +1,40 @@ + + + + + + + + + + + + DIGIT Component StoryBook + + + + +
+ + + + \ No newline at end of file diff --git a/frontend/micro-ui/web/micro-ui-internals/packages/components-core/src/atoms-groups/index.js b/frontend/micro-ui/web/micro-ui-internals/packages/components-core/src/atoms-groups/index.js new file mode 100644 index 00000000000..e69de29bb2d diff --git a/frontend/micro-ui/web/micro-ui-internals/packages/components-core/src/atoms/SVG.js b/frontend/micro-ui/web/micro-ui-internals/packages/components-core/src/atoms/SVG.js new file mode 100644 index 00000000000..16c7e91c3f5 --- /dev/null +++ b/frontend/micro-ui/web/micro-ui-internals/packages/components-core/src/atoms/SVG.js @@ -0,0 +1,1575 @@ +import { + Rotation3D, + SixFtApart, + Rotate360, + Accessibility, + AccessibilityNew, + Accessible, + AccessibleForward, + AccountBalance, + AccountBalanceWallet, + AccountBox, + AccountCircle, + AddAlert, + AddBusiness, + AddChart, + AddExpense, + AddExpenseTwo, + AddIcCall, + AddLocation, + AddLocationAlt, + AddModerator, + AddRoad, + AddShoppingCart, + AddTask, + AddToDrive, + AdminPanelSettings, + Agriculture, + Alarm, + AlarmAdd, + AlarmOff, + AlarmOn, + AllInbox, + AllOut, + AlternateEmail, + AltRoute, + Analytics, + Anchor, + Android, + Announcement, + Api, + AppBlocking, + AppRegistration, + Approval, + Apps, + AppSettingsAlt, + Architecture, + ArrowBack, + ArrowBackIos, + ArrowCircleDown, + ArrowCircleUp, + ArrowDownward, + ArrowDropDown, + ArrowDropDownCircle, + ArrowDropUp, + ArrowForward, + ArrowForwardIos, + ArrowForwardIosAlt, + ArrowLeft, + ArrowRight, + ArrowRightAlt, + ArrowUpward, + Article, + AspectRatio, + Assessment, + Assignment, + AssignmentInd, + AssignmentLate, + AssignmentReturn, + AssignmentReturned, + AssignmentTurnedIn, + AssistantDirection, + AssistantNavigation, + Atm, + AttachEmail, + Attachment, + Attractions, + AutoDelete, + AutoRenew, + Backup, + BackupTable, + Badge, + BakeryDining, + BatchPrediction, + BeenHere, + BikeScooter, + Book, + Bookmark, + BookmarkBorder, + Bookmarks, + BookOnline, + BreakfastDining, + BrunchDining, + BugReport, + Build, + BuildCircle, + BusAlert, + Business, + Cached, + Cake, + CalendarToday, + CalendarViewDay, + Call, + CallEnd, + CallMade, + CallMerge, + CallMissed, + CallMissedOutgoing, + CallReceived, + CallSplit, + CameraEnhance, + Campaign, + Cancel, + CancelPresentation, + CancelScheduleSend, + CardGiftcard, + CardMembership, + CardTravel, + CarRental, + CarRepair, + Category, + Celebration, + CellWifi, + ChangeHistory, + Chat, + ChatBubble, + ChatBubbleOutline, + Check, + CheckCircle, + CheckCircleOutline, + ChevronLeft, + ChevronRight, + ChromeReaderMode, + CircleNotifications, + Class, + CleanHands, + CleaningServices, + ClearAll, + Clock, + Close, + CloseFullscreen, + Cloud, + CloudCircle, + CloudDone, + CloudDownload, + CloudOff, + CloudQueue, + CloudUpload, + Code, + Comment, + CommentBank, + Commute, + CompareArrows, + CompassCalibration, + Compress, + ConnectWithoutContact, + Construction, + Contactless, + ContactMail, + ContactPage, + ContactPhone, + Contacts, + ContactSupport, + Copyright, + Coronavirus, + CreateNewFolder, + CreditCard, + Cut, + Dangerous, + Dashboard, + DashboardCustomize, + DateRange, + Deck, + Delete, + DeleteForever, + DeleteOutline, + DeliveryDining, + DepartureBoard, + Description, + DesignServices, + DesktopAccessDisabled, + DialerSip, + Dialpad, + DinnerDining, + Directions, + DirectionsBike, + DirectionsBoat, + DirectionsBus, + DirectionsCar, + DirectionsRailway, + DirectionsRun, + DirectionsSubway, + DirectionsTransit, + DirectionsWalk, + DisabledByDefault, + Dns, + Domain, + DomainDisabled, + DomainVerification, + Done, + DoneAll, + DoneOutline, + DonutLarge, + DonutSmall, + DoubleArrow, + DragIndicator, + DriveFileMove, + DriveFileMoveOutline, + DriveFileRenameOutline, + DriveFolderUpload, + DryCleaning, + DSOTruck, + Duo, + DynamicForm, + East, + Eco, + Edit, + EditAttributes, + EditLocation, + EditOff, + EditRoad, + Eject, + Elderly, + ElectricalServices, + ElectricBike, + ElectricCar, + ElectricMoped, + ElectricRickshaw, + ElectricScooter, + Email, + EmojiEmotions, + EmojiEvents, + EmojiFlags, + EmojiFoodBeverage, + EmojiNature, + EmojiObjects, + EmojiPeople, + EmojiSymbols, + EmojiTransportation, + Engineering, + Error, + ErrorOutline, + EuroSymbol, + Event, + EventSeat, + EvStation, + ExitToApp, + Expand, + ExpandLess, + ExpandMore, + Explore, + ExploreOff, + Extension, + Face, + Facebook, + FactCheck, + Fastfood, + Favorite, + FavoriteBorder, + Feedback, + Festival, + File, + FileDownload, + FileDownloadDone, + FilePresent, + FileUpload, + FilterAlt, + FilterListAlt, + FindInPage, + FindReplace, + Fingerprint, + Fireplace, + FirstPageAlt, + FirstPage, + FitScreen, + Flaky, + Flight, + FlightLand, + FlightTakeoff, + FlipToBack, + FlipToFront, + Folder, + FolderOpen, + FolderShared, + FollowTheSigns, + Forum, + ForwardToInbox, + Fullscreen, + FullscreenExit, + Gavel, + GetApp, + Gif, + Grade, + Grading, + GridView, + Group, + GroupAdd, + Groups, + GroupWork, + GTranslate, + Hail, + Handyman, + Hardware, + Help, + HelpCenter, + HelpOutline, + HighlightAlt, + HighlightOff, + History, + HistoryEdu, + HistoryToggleOff, + Home, + HomeFilled, + HomeRepairService, + HomeWork, + HorizontalSplit, + Hotel, + HourglassBottom, + HourglassDisabled, + HourglassEmpty, + HourglassFull, + HourglassTop, + Http, + Https, + Hvac, + Icecream, + IconSwerage, + IconSwerageAlt, + ImportantDevices, + ImportContacts, + ImportExport, + Info, + InfoOutline, + Input, + IntegrationInstructions, + InvertColors, + InvertColorsOff, + IosShare, + KingBed, + Label, + LabelImportant, + LabelImportantOutline, + LabelOff, + LabelOutline, + TranslateLanguage, + Language, + LastPageAlt, + LastPage, + Launch, + Layers, + LayersClear, + Leaderboard, + LegendToggle, + Lightbulb, + LightbulbOutline, + LineStyle, + LineWeight, + Liquor, + List, + ListAlt, + LiveHelp, + LocalActivity, + LocalAirport, + LocalAtm, + LocalBar, + LocalCafe, + LocalCarWash, + LocalConvenienceStore, + LocalDining, + LocalDrink, + LocalFireDepartment, + LocalFlorist, + LocalGasStation, + LocalGroceryStore, + LocalHospital, + LocalHotel, + LocalLaundryService, + LocalLibrary, + LocalMall, + LocalMovies, + LocalOffer, + LocalParking, + LocalPharmacy, + LocalPhone, + LocalPizza, + LocalPlay, + LocalPolice, + LocalPostOffice, + LocalPrintshop, + LocalSee, + LocalShipping, + LocalTaxi, + LocationCity, + LocationOff, + LocationOn, + LocationPin, + Lock, + LockClock, + LockOpen, + LockOutline, + Login, + Logout, + Loyalty, + Luggage, + LunchDining, + MailOutline, + Map, + MapsUgc, + MarkAsUnread, + MarkChatRead, + MarkChatUnread, + MarkEmailRead, + MarkEmailUnread, + MarkunreadMailbox, + Masks, + Maximize, + Mediation, + MedicalServices, + Menu, + MenuBook, + MenuOpen, + Message, + MilitaryTech, + Minimize, + MiscellaneousServices, + MobileScreenShare, + ModelTraining, + Money, + Mood, + MoodBad, + Moped, + MoreHoriz, + MoreTime, + MoreVert, + MultipleStop, + Museum, + MyLocation, + Nat, + Navigation, + NearMe, + NearMeDisabled, + NextPlan, + Nightlife, + NightlightRound, + NightsStay, + NoLuggage, + NoMeals, + NoMealsOuline, + North, + NorthEast, + NorthWest, + NoSim, + NotAccessible, + NoteAdd, + NotificationImportant, + Notifications, + NotificationsActive, + NotificationsNone, + NotificationsOff, + NotificationsPaused, + NotListedLocation, + NoTransfer, + NotStarted, + TorchNoun, + OfflineBolt, + OfflinePin, + OfflineShare, + OnlinePrediction, + Opacity, + OpenInBrowser, + OpenInFull, + OpenInNew, + OpenWith, + Outbond, + Outbox, + OutdoorGrill, + OutgoingMail, + Outlet, + Pages, + Pageview, + PanTool, + Park, + PartyMode, + PausePresentation, + Payment, + Payments, + PedalBike, + Pending, + PendingActions, + People, + PeopleAlt, + PeopleOutline, + PermCameraMic, + PermContactCalendar, + PermDataSetting, + PermDeviceInformation, + PermIdentity, + PermMedia, + PermPhoneMsg, + PermScanWifi, + Person, + PersonAdd, + PersonAddAlt, + PersonAddSecondary, + PersonAddDisabled, + PersonOutline, + PersonPin, + PersonPinCircle, + PersonRemove, + PersonRemoveAlt, + PersonSearch, + PestControl, + PestControlRodent, + Pets, + Phone, + PhoneDisabled, + PhoneEnabled, + PhonelinkErase, + PhonelinkLock, + PhonelinkRing, + PhonelinkSetup, + PictureInPicture, + PictureInPictureAlt, + PinDrop, + PivotTableChart, + Place, + Plagiarism, + PlayForWork, + Plumbing, + PlusOne, + Poll, + Polymer, + Population, + PortableWifiOff, + PowerSettingsNew, + PregnantWoman, + PresentToAll, + Preview, + Print, + PrintDisabled, + PrivacyTip, + Psychology, + Public, + PublicOff, + PublishedWithChanges, + QrCode, + QrCodeScanner, + QueryBuilder, + QuestionAnswer, + Quickreply, + RailwayAlert, + RamenDining, + RateReview, + ReadMore, + Receipt, + Recommend, + RecordVoiceOver, + Redeem, + ReduceCapacity, + Refresh, + RemoveDone, + RemoveModerator, + RemoveShoppingCart, + Reorder, + ReportProblem, + RequestPage, + RequestQuote, + Restaurant, + RestaurantMenu, + Restore, + RestoreFromTrash, + RestorePage, + RingVolume, + Room, + RoundedCorner, + Rowing, + RssFeed, + Rtt, + Rule, + RuleFolder, + RunCircle, + Sanitizer, + Satellite, + SavedSearch, + Schedule, + ScheduleSend, + School, + Science, + ScreenShare, + Search, + SearchOff, + Segment, + SelfImprovement, + SendAndArchive, + SentimentDissatisfied, + SentimentNeutral, + SentimentSatisfied, + SentimentSatisfiedAlt, + SentimentVeryDissatisfied, + SentimentVerySatisfied, + SetMeal, + Settings, + SettingsApplications, + SettingsBackupRestore, + SettingsBluetooth, + SettingsBrightness, + SettingsCell, + SettingsEthernet, + SettingsInputAntenna, + SettingsInputComponent, + SettingsInputComposite, + SettingsInputHdmi, + SettingsInputVideo, + SettingsOverscan, + SettingsPhone, + SettingsPower, + SettingsRemote, + SettingsVoice, + Share, + Shop, + ShoppingBag, + ShoppingBasket, + ShoppingCart, + ShopAlt, + Sick, + SingleBed, + SmartButton, + SnippetFolder, + Source, + South, + SouthEast, + SouthWest, + SpeakerNotes, + SpeakerNotesOff, + SpeakerPhone, + SpellCheck, + Sports, + SportsBaseball, + SportsBasketball, + SportsCricket, + SportsEsports, + SportsFootball, + SportsGolf, + SportsHandball, + SportsHockey, + SportsKabaddi, + SportsMma, + SportsMotorsports, + SportsRugby, + SportsSoccer, + SportsTennis, + SportsVolleyball, + StarRate, + Stars, + StayCurrentLandscape, + StayCurrentPortrait, + StayPrimaryLandscape, + StayPrimaryPortrait, + StickyNotesSecondary, + ScreenShareStop, + Store, + StoreMallDirectory, + StreetView, + SubdirectoryArrowLeft, + SubdirectoryArrowRight, + Subject, + SubtitlesOff, + Subway, + SupervisedUserCircle, + SupervisorAccount, + Support, + SwapCalls, + SwapHorizontal, + SwapHorizontalCircle, + SwapVertical, + SwapVerticalCircle, + Swipe, + SwitchAccount, + SwitchLeft, + SwitchRight, + SyncAlt, + SystemUpdateAlt, + Tab, + TableView, + TabUnselected, + TakeOutDining, + TaxiAlert, + Terrain, + TextRotateUp, + TextRotateVertical, + TextRotationAngleDown, + TextRotationAngleUp, + TextRotationDown, + TextRotationNone, + SMSText, + TextSnippet, + TheaterComedy, + Theaters, + ThumbDown, + ThumbDownAlt, + ThumbDownOffAlt, + ThumbsUpDown, + ThumbUp, + ThumbUpAlt, + ThumbUpOffAlt, + Timeline, + Toc, + Today, + Toll, + Topic, + Torch, + TouchApp, + Tour, + TrackChanges, + Traffic, + Train, + Tram, + TransferWithinStation, + TransitEnterExit, + Translate, + TrendingDown, + TrendingFlat, + TrendingUp, + TripOrigin, + TurnedIn, + TurnedInNot, + TwoWheeler, + UnfoldLess, + UnfoldMore, + Unpublished, + Unsubscribe, + Update, + UpdateExpense, + UpdateExpenseSecondary, + Upgrade, + UploadFile, + Verified, + VerifiedUser, + VerticalSplit, + ViewAgenda, + ViewArray, + ViewCarousel, + ViewColumn, + ViewDay, + ViewHeadline, + ViewInAr, + ViewList, + ViewModule, + ViewQuilt, + ViewSidebar, + ViewStream, + ViewWeek, + Visibility, + VisibilityOff, + Voicemail, + VoiceOverOff, + VolunteerActivism, + VpnKey, + Warning, + WatchLater, + WaterfallChart, + West, + Whatsapp, + Whatshot, + WifiCalling, + WifiProtectedSetup, + WineBar, + Work, + WorkOff, + WorkOutline, + WorkspacesFilled, + WorkspacesOutline, + WrongLocation, + Wysiwyg, + YoutubeSearchedFor, + ZoomIn, + ZoomOut, + ZoomOutMap, + } from "@egovernments/digit-ui-svg-components"; + import PropTypes from "prop-types"; + + + + export const SVG={ + Rotation3D, + SixFtApart, + Rotate360, + Accessibility, + AccessibilityNew, + Accessible, + AccessibleForward, + AccountBalance, + AccountBalanceWallet, + AccountBox, + AccountCircle, + AddAlert, + AddBusiness, + AddChart, + AddExpense, + AddExpenseTwo, + AddIcCall, + AddLocation, + AddLocationAlt, + AddModerator, + AddRoad, + AddShoppingCart, + AddTask, + AddToDrive, + AdminPanelSettings, + Agriculture, + Alarm, + AlarmAdd, + AlarmOff, + AlarmOn, + AllInbox, + AllOut, + AlternateEmail, + AltRoute, + Analytics, + Anchor, + Android, + Announcement, + Api, + AppBlocking, + AppRegistration, + Approval, + Apps, + AppSettingsAlt, + Architecture, + ArrowBack, + ArrowBackIos, + ArrowCircleDown, + ArrowCircleUp, + ArrowDownward, + ArrowDropDown, + ArrowDropDownCircle, + ArrowDropUp, + ArrowForward, + ArrowForwardIos, + ArrowForwardIosAlt, + ArrowLeft, + ArrowRight, + ArrowRightAlt, + ArrowUpward, + Article, + AspectRatio, + Assessment, + Assignment, + AssignmentInd, + AssignmentLate, + AssignmentReturn, + AssignmentReturned, + AssignmentTurnedIn, + AssistantDirection, + AssistantNavigation, + Atm, + AttachEmail, + Attachment, + Attractions, + AutoDelete, + AutoRenew, + Backup, + BackupTable, + Badge, + BakeryDining, + BatchPrediction, + BeenHere, + BikeScooter, + Book, + Bookmark, + BookmarkBorder, + Bookmarks, + BookOnline, + BreakfastDining, + BrunchDining, + BugReport, + Build, + BuildCircle, + BusAlert, + Business, + Cached, + Cake, + CalendarToday, + CalendarViewDay, + Call, + CallEnd, + CallMade, + CallMerge, + CallMissed, + CallMissedOutgoing, + CallReceived, + CallSplit, + CameraEnhance, + Campaign, + Cancel, + CancelPresentation, + CancelScheduleSend, + CardGiftcard, + CardMembership, + CardTravel, + CarRental, + CarRepair, + Category, + Celebration, + CellWifi, + ChangeHistory, + Chat, + ChatBubble, + ChatBubbleOutline, + Check, + CheckCircle, + CheckCircleOutline, + ChevronLeft, + ChevronRight, + ChromeReaderMode, + CircleNotifications, + Class, + CleanHands, + CleaningServices, + ClearAll, + Clock, + Close, + CloseFullscreen, + Cloud, + CloudCircle, + CloudDone, + CloudDownload, + CloudOff, + CloudQueue, + CloudUpload, + Code, + Comment, + CommentBank, + Commute, + CompareArrows, + CompassCalibration, + Compress, + ConnectWithoutContact, + Construction, + Contactless, + ContactMail, + ContactPage, + ContactPhone, + Contacts, + ContactSupport, + Copyright, + Coronavirus, + CreateNewFolder, + CreditCard, + Cut, + Dangerous, + Dashboard, + DashboardCustomize, + DateRange, + Deck, + Delete, + DeleteForever, + DeleteOutline, + DeliveryDining, + DepartureBoard, + Description, + DesignServices, + DesktopAccessDisabled, + DialerSip, + Dialpad, + DinnerDining, + Directions, + DirectionsBike, + DirectionsBoat, + DirectionsBus, + DirectionsCar, + DirectionsRailway, + DirectionsRun, + DirectionsSubway, + DirectionsTransit, + DirectionsWalk, + DisabledByDefault, + Dns, + Domain, + DomainDisabled, + DomainVerification, + Done, + DoneAll, + DoneOutline, + DonutLarge, + DonutSmall, + DoubleArrow, + DragIndicator, + DriveFileMove, + DriveFileMoveOutline, + DriveFileRenameOutline, + DriveFolderUpload, + DryCleaning, + DSOTruck, + Duo, + DynamicForm, + East, + Eco, + Edit, + EditAttributes, + EditLocation, + EditOff, + EditRoad, + Eject, + Elderly, + ElectricalServices, + ElectricBike, + ElectricCar, + ElectricMoped, + ElectricRickshaw, + ElectricScooter, + Email, + EmojiEmotions, + EmojiEvents, + EmojiFlags, + EmojiFoodBeverage, + EmojiNature, + EmojiObjects, + EmojiPeople, + EmojiSymbols, + EmojiTransportation, + Engineering, + Error, + ErrorOutline, + EuroSymbol, + Event, + EventSeat, + EvStation, + ExitToApp, + Expand, + ExpandLess, + ExpandMore, + Explore, + ExploreOff, + Extension, + Face, + Facebook, + FactCheck, + Fastfood, + Favorite, + FavoriteBorder, + Feedback, + Festival, + File, + FileDownload, + FileDownloadDone, + FilePresent, + FileUpload, + FilterAlt, + FilterListAlt, + FindInPage, + FindReplace, + Fingerprint, + Fireplace, + FirstPageAlt, + FirstPage, + FitScreen, + Flaky, + Flight, + FlightLand, + FlightTakeoff, + FlipToBack, + FlipToFront, + Folder, + FolderOpen, + FolderShared, + FollowTheSigns, + Forum, + ForwardToInbox, + Fullscreen, + FullscreenExit, + Gavel, + GetApp, + Gif, + Grade, + Grading, + GridView, + Group, + GroupAdd, + Groups, + GroupWork, + GTranslate, + Hail, + Handyman, + Hardware, + Help, + HelpCenter, + HelpOutline, + HighlightAlt, + HighlightOff, + History, + HistoryEdu, + HistoryToggleOff, + Home, + HomeFilled, + HomeRepairService, + HomeWork, + HorizontalSplit, + Hotel, + HourglassBottom, + HourglassDisabled, + HourglassEmpty, + HourglassFull, + HourglassTop, + Http, + Https, + Hvac, + Icecream, + IconSwerage, + IconSwerageAlt, + ImportantDevices, + ImportContacts, + ImportExport, + Info, + InfoOutline, + Input, + IntegrationInstructions, + InvertColors, + InvertColorsOff, + IosShare, + KingBed, + Label, + LabelImportant, + LabelImportantOutline, + LabelOff, + LabelOutline, + TranslateLanguage, + Language, + LastPageAlt, + LastPage, + Launch, + Layers, + LayersClear, + Leaderboard, + LegendToggle, + Lightbulb, + LightbulbOutline, + LineStyle, + LineWeight, + Liquor, + List, + ListAlt, + LiveHelp, + LocalActivity, + LocalAirport, + LocalAtm, + LocalBar, + LocalCafe, + LocalCarWash, + LocalConvenienceStore, + LocalDining, + LocalDrink, + LocalFireDepartment, + LocalFlorist, + LocalGasStation, + LocalGroceryStore, + LocalHospital, + LocalHotel, + LocalLaundryService, + LocalLibrary, + LocalMall, + LocalMovies, + LocalOffer, + LocalParking, + LocalPharmacy, + LocalPhone, + LocalPizza, + LocalPlay, + LocalPolice, + LocalPostOffice, + LocalPrintshop, + LocalSee, + LocalShipping, + LocalTaxi, + LocationCity, + LocationOff, + LocationOn, + LocationPin, + Lock, + LockClock, + LockOpen, + LockOutline, + Login, + Logout, + Loyalty, + Luggage, + LunchDining, + MailOutline, + Map, + MapsUgc, + MarkAsUnread, + MarkChatRead, + MarkChatUnread, + MarkEmailRead, + MarkEmailUnread, + MarkunreadMailbox, + Masks, + Maximize, + Mediation, + MedicalServices, + Menu, + MenuBook, + MenuOpen, + Message, + MilitaryTech, + Minimize, + MiscellaneousServices, + MobileScreenShare, + ModelTraining, + Money, + Mood, + MoodBad, + Moped, + MoreHoriz, + MoreTime, + MoreVert, + MultipleStop, + Museum, + MyLocation, + Nat, + Navigation, + NearMe, + NearMeDisabled, + NextPlan, + Nightlife, + NightlightRound, + NightsStay, + NoLuggage, + NoMeals, + NoMealsOuline, + North, + NorthEast, + NorthWest, + NoSim, + NotAccessible, + NoteAdd, + NotificationImportant, + Notifications, + NotificationsActive, + NotificationsNone, + NotificationsOff, + NotificationsPaused, + NotListedLocation, + NoTransfer, + NotStarted, + TorchNoun, + OfflineBolt, + OfflinePin, + OfflineShare, + OnlinePrediction, + Opacity, + OpenInBrowser, + OpenInFull, + OpenInNew, + OpenWith, + Outbond, + Outbox, + OutdoorGrill, + OutgoingMail, + Outlet, + Pages, + Pageview, + PanTool, + Park, + PartyMode, + PausePresentation, + Payment, + Payments, + PedalBike, + Pending, + PendingActions, + People, + PeopleAlt, + PeopleOutline, + PermCameraMic, + PermContactCalendar, + PermDataSetting, + PermDeviceInformation, + PermIdentity, + PermMedia, + PermPhoneMsg, + PermScanWifi, + Person, + PersonAdd, + PersonAddAlt, + PersonAddSecondary, + PersonAddDisabled, + PersonOutline, + PersonPin, + PersonPinCircle, + PersonRemove, + PersonRemoveAlt, + PersonSearch, + PestControl, + PestControlRodent, + Pets, + Phone, + PhoneDisabled, + PhoneEnabled, + PhonelinkErase, + PhonelinkLock, + PhonelinkRing, + PhonelinkSetup, + PictureInPicture, + PictureInPictureAlt, + PinDrop, + PivotTableChart, + Place, + Plagiarism, + PlayForWork, + Plumbing, + PlusOne, + Poll, + Polymer, + Population, + PortableWifiOff, + PowerSettingsNew, + PregnantWoman, + PresentToAll, + Preview, + Print, + PrintDisabled, + PrivacyTip, + Psychology, + Public, + PublicOff, + PublishedWithChanges, + QrCode, + QrCodeScanner, + QueryBuilder, + QuestionAnswer, + Quickreply, + RailwayAlert, + RamenDining, + RateReview, + ReadMore, + Receipt, + Recommend, + RecordVoiceOver, + Redeem, + ReduceCapacity, + Refresh, + RemoveDone, + RemoveModerator, + RemoveShoppingCart, + Reorder, + ReportProblem, + RequestPage, + RequestQuote, + Restaurant, + RestaurantMenu, + Restore, + RestoreFromTrash, + RestorePage, + RingVolume, + Room, + RoundedCorner, + Rowing, + RssFeed, + Rtt, + Rule, + RuleFolder, + RunCircle, + Sanitizer, + Satellite, + SavedSearch, + Schedule, + ScheduleSend, + School, + Science, + ScreenShare, + Search, + SearchOff, + Segment, + SelfImprovement, + SendAndArchive, + SentimentDissatisfied, + SentimentNeutral, + SentimentSatisfied, + SentimentSatisfiedAlt, + SentimentVeryDissatisfied, + SentimentVerySatisfied, + SetMeal, + Settings, + SettingsApplications, + SettingsBackupRestore, + SettingsBluetooth, + SettingsBrightness, + SettingsCell, + SettingsEthernet, + SettingsInputAntenna, + SettingsInputComponent, + SettingsInputComposite, + SettingsInputHdmi, + SettingsInputVideo, + SettingsOverscan, + SettingsPhone, + SettingsPower, + SettingsRemote, + SettingsVoice, + Share, + Shop, + ShoppingBag, + ShoppingBasket, + ShoppingCart, + ShopAlt, + Sick, + SingleBed, + SmartButton, + SnippetFolder, + Source, + South, + SouthEast, + SouthWest, + SpeakerNotes, + SpeakerNotesOff, + SpeakerPhone, + SpellCheck, + Sports, + SportsBaseball, + SportsBasketball, + SportsCricket, + SportsEsports, + SportsFootball, + SportsGolf, + SportsHandball, + SportsHockey, + SportsKabaddi, + SportsMma, + SportsMotorsports, + SportsRugby, + SportsSoccer, + SportsTennis, + SportsVolleyball, + StarRate, + Stars, + StayCurrentLandscape, + StayCurrentPortrait, + StayPrimaryLandscape, + StayPrimaryPortrait, + StickyNotesSecondary, + ScreenShareStop, + Store, + StoreMallDirectory, + StreetView, + SubdirectoryArrowLeft, + SubdirectoryArrowRight, + Subject, + SubtitlesOff, + Subway, + SupervisedUserCircle, + SupervisorAccount, + Support, + SwapCalls, + SwapHorizontal, + SwapHorizontalCircle, + SwapVertical, + SwapVerticalCircle, + Swipe, + SwitchAccount, + SwitchLeft, + SwitchRight, + SyncAlt, + SystemUpdateAlt, + Tab, + TableView, + TabUnselected, + TakeOutDining, + TaxiAlert, + Terrain, + TextRotateUp, + TextRotateVertical, + TextRotationAngleDown, + TextRotationAngleUp, + TextRotationDown, + TextRotationNone, + SMSText, + TextSnippet, + TheaterComedy, + Theaters, + ThumbDown, + ThumbDownAlt, + ThumbDownOffAlt, + ThumbsUpDown, + ThumbUp, + ThumbUpAlt, + ThumbUpOffAlt, + Timeline, + Toc, + Today, + Toll, + Topic, + Torch, + TouchApp, + Tour, + TrackChanges, + Traffic, + Train, + Tram, + TransferWithinStation, + TransitEnterExit, + Translate, + TrendingDown, + TrendingFlat, + TrendingUp, + TripOrigin, + TurnedIn, + TurnedInNot, + TwoWheeler, + UnfoldLess, + UnfoldMore, + Unpublished, + Unsubscribe, + Update, + UpdateExpense, + UpdateExpenseSecondary, + Upgrade, + UploadFile, + Verified, + VerifiedUser, + VerticalSplit, + ViewAgenda, + ViewArray, + ViewCarousel, + ViewColumn, + ViewDay, + ViewHeadline, + ViewInAr, + ViewList, + ViewModule, + ViewQuilt, + ViewSidebar, + ViewStream, + ViewWeek, + Visibility, + VisibilityOff, + Voicemail, + VoiceOverOff, + VolunteerActivism, + VpnKey, + Warning, + WatchLater, + WaterfallChart, + West, + Whatsapp, + Whatshot, + WifiCalling, + WifiProtectedSetup, + WineBar, + Work, + WorkOff, + WorkOutline, + WorkspacesFilled, + WorkspacesOutline, + WrongLocation, + Wysiwyg, + YoutubeSearchedFor, + ZoomIn, + ZoomOut, + ZoomOutMap, + } + + SVG.propTypes = { + /** custom width of the svg icon */ + width: PropTypes.string, + /** custom height of the svg icon */ + height: PropTypes.string, + /** custom colour of the svg icon */ + fill: PropTypes.string, + /** custom class of the svg icon */ + className: PropTypes.string, + /** custom style of the svg icon */ + style: PropTypes.object, + /** Click Event handler when icon is clicked */ + onClick: PropTypes.func, + }; \ No newline at end of file diff --git a/frontend/micro-ui/web/micro-ui-internals/packages/components-core/src/atoms/index.js b/frontend/micro-ui/web/micro-ui-internals/packages/components-core/src/atoms/index.js new file mode 100644 index 00000000000..6ab8ba61da5 --- /dev/null +++ b/frontend/micro-ui/web/micro-ui-internals/packages/components-core/src/atoms/index.js @@ -0,0 +1,7 @@ +import { SVG } from "./SVG"; + + + + + +export { SVG } \ No newline at end of file diff --git a/frontend/micro-ui/web/micro-ui-internals/packages/components-core/src/hoc/index.js b/frontend/micro-ui/web/micro-ui-internals/packages/components-core/src/hoc/index.js new file mode 100644 index 00000000000..e69de29bb2d diff --git a/frontend/micro-ui/web/micro-ui-internals/packages/components-core/src/index.css b/frontend/micro-ui/web/micro-ui-internals/packages/components-core/src/index.css new file mode 100644 index 00000000000..dcfd410299b --- /dev/null +++ b/frontend/micro-ui/web/micro-ui-internals/packages/components-core/src/index.css @@ -0,0 +1,8 @@ +.custom-class path{ + fill:orange; + } +.custom-class{ + border: 2px dotted blue; + width: 100px; + height: 100px; +} \ No newline at end of file diff --git a/frontend/micro-ui/web/micro-ui-internals/packages/components-core/src/index.js b/frontend/micro-ui/web/micro-ui-internals/packages/components-core/src/index.js new file mode 100644 index 00000000000..6b05eff08f7 --- /dev/null +++ b/frontend/micro-ui/web/micro-ui-internals/packages/components-core/src/index.js @@ -0,0 +1,7 @@ +import { SVG} from "./atoms"; + + + + + +export { SVG } \ No newline at end of file diff --git a/frontend/micro-ui/web/micro-ui-internals/packages/components-core/src/molecules/index.js b/frontend/micro-ui/web/micro-ui-internals/packages/components-core/src/molecules/index.js new file mode 100644 index 00000000000..e69de29bb2d diff --git a/frontend/micro-ui/web/micro-ui-internals/packages/components-core/src/stories/SVG.stories.js b/frontend/micro-ui/web/micro-ui-internals/packages/components-core/src/stories/SVG.stories.js new file mode 100644 index 00000000000..e0738e70879 --- /dev/null +++ b/frontend/micro-ui/web/micro-ui-internals/packages/components-core/src/stories/SVG.stories.js @@ -0,0 +1,26 @@ +import React from "react"; +import { SVG } from "../atoms"; + +export default { + tags: ["autodocs"], + argTypes: { + className: { + options: ["custom-class"], + control: { type: "check" }, + }, + }, + title: "SVG", + component: SVG, +}; + +const Template = (args) => ; + +export const Playground = Template.bind({}); +Playground.args = { + className: "custom-class", + style: { border: "3px solid green" }, + fill: "blue", + height: "50", + width: "50", + onClick:()=>{} +}; diff --git a/frontend/micro-ui/web/micro-ui-internals/packages/css/src/digitv2/components/FormComposerV2.scss b/frontend/micro-ui/web/micro-ui-internals/packages/css/src/digitv2/components/FormComposerV2.scss new file mode 100644 index 00000000000..faf345e932e --- /dev/null +++ b/frontend/micro-ui/web/micro-ui-internals/packages/css/src/digitv2/components/FormComposerV2.scss @@ -0,0 +1,116 @@ +@import url("../index.scss"); + +.field-container { + display: flex; + align-items: center; + max-width: 540px; + @apply flex items-center; + + .component-in-front { + @apply flex justify-center items-center; + @extend .light-background; + @extend .light-input-border; + margin-top: 0; + border: 1px solid; + border-right: none; + padding: 7px; + } +} + +.card-date-input { + @apply absolute top-0 left-0 w-3/4 bg-white pl-sm border border-input-border border-solid border-r-0; + outline: transparent solid 1px; + height: 2.5rem; + @extend .light-input-border; +} +.text-input-width { + max-width: 540px; +} + +.text-input { + @apply relative w-full; + input { + background-color: transparent; + &:hover { + @apply border-2 border-solid border-primary-main; + @extend .light-input-border; + } + } +} +.employee-card-input-error { + @apply mb-lg pl-sm block w-full h-10 outline-none border-2 border-error border-solid bg-white leading-10 text-form-field text-text-primary; + @extend .light-input-border; + @extend .alert-error; +} +.card-input-error { + @apply mb-lg pl-sm block w-full h-10 outline-none border-2 border-error border-solid bg-white leading-10 text-form-field text-text-primary; + @extend .light-input-border; + @extend .alert-error; +} + +.employee-card-input { + @apply mb-lg pl-sm outline-none block border w-full h-10 border-input-border border-solid bg-white leading-10 text-form-field text-text-primary; + @extend .light-input-border; +} +.employee-card-input:disabled { + @apply border-grey-dark text-grey-dark !important; + pointer-events: none !important; + @extend .light-input-border; + @extend .light-text-color-disabled; +} +.employee-card-input--front { + width: fit-content !important; + display: flex; + align-items: center; + /* background: theme(colors.grey.mid); */ + @extend .light-background; + border-right: 0; + padding-right: 5px; +} +.employee-card-input-error { + @apply mb-lg pl-sm block w-full h-10 outline-none border-2 border-error border-solid bg-white leading-10 text-form-field text-text-primary; + @extend .light-input-border; + @extend .alert-error; +} + +.card-textarea, +.employee-card-textarea { + @apply block outline-none mt-md mb-lg border w-full border-input-border border-solid bg-white h-24 text-form-field text-text-primary p-sm; + @extend .light-input-border; +} +.employee-card-textarea { + @apply w-full; +} + +.citizen-card-input { + @apply mb-lg pl-sm outline-none block border w-full h-10 border-input-border border-solid bg-white leading-10 text-form-field text-text-primary; + @extend .light-input-border; +} +.citizen-card-input--front { + @extend .light-background; + width: fit-content !important; + display: flex; + align-items: center; + /* background: theme(colors.grey.mid); */ + border-right: 0; + padding-right: 5px; +} + +.break-line { + @extend .light-input-border; + @apply border-border my-lg; +} + +.primary-label-btn { + @apply flex; + gap: 10px; + + svg { + fill: theme(colors.primary.main); + } + + @extend .light-primary; + cursor: pointer; + font-weight: 500; + width: fit-content; +} diff --git a/frontend/micro-ui/web/micro-ui-internals/packages/css/src/digitv2/components/actionbarV2.scss b/frontend/micro-ui/web/micro-ui-internals/packages/css/src/digitv2/components/actionbarV2.scss new file mode 100644 index 00000000000..2b2bf7273b5 --- /dev/null +++ b/frontend/micro-ui/web/micro-ui-internals/packages/css/src/digitv2/components/actionbarV2.scss @@ -0,0 +1,108 @@ +@import url("../index.scss"); + +.action-bar-wrap { + box-shadow: rgba(0, 0, 0, 0.16) 0 -2px 8px; + max-width: 480px; + z-index: 100; + @extend .light-background; + + @apply left-0 bottom-0 w-full bg-white py-sm px-sm fixed text-right; + + div { + @apply w-full; + } + .menu-wrap { + @apply absolute bg-white text-left mb-xs z-30 cursor-pointer; + @extend .light-background; + bottom: 45px; + box-shadow: rgba(0, 0, 0, 0.14) 0 8px 10px 1px, rgba(0, 0, 0, 0.12) 0 3px 14px 2px, rgba(0, 0, 0, 0.2) 0 5px 5px -3px; + width: calc(100% - 16px); + right: 8px; + + div { + @apply h-12 pl-sm py-md text-body-l text-text-primary; + @extend .light-primary; + + &:hover { + @apply bg-grey-mid w-full; + @extend .light-background; + } + } + } +} + +@screen dt { + .action-bar-wrap { + box-shadow: rgba(0, 0, 0, 0.16) 0 -2px 8px; + left: 0; + max-width: none; + z-index: 999; + + @apply fixed bottom-0 bg-white py-sm pr-lg text-right; + /* @extend .light-background; */ + + div { + width: calc(100% - 16px); + } + + .menu-wrap { + bottom: 45px; + top: unset; + box-shadow: rgba(0, 0, 0, 0.14) 0 8px 10px 1px, rgba(0, 0, 0, 0.12) 0 3px 14px 2px, rgba(0, 0, 0, 0.2) 0 5px 5px -3px; + @apply absolute h-auto bg-white text-left mb-xs z-30; + width: 240px; + right: 24px; + + div { + @apply h-12 pl-sm py-md text-body-l text-text-primary; + + &:hover { + @apply bg-grey-mid w-full; + /* @extend .light-background; */ + } + } + } + } +} + +.action-bar-wrap-registry { + div { + @apply w-full; + } + .menu-wrap { + @apply absolute bg-white text-left mb-xs z-30 cursor-pointer; + box-shadow: rgba(0, 0, 0, 0.14) 0 8px 10px 1px, rgba(0, 0, 0, 0.12) 0 3px 14px 2px, rgba(0, 0, 0, 0.2) 0 5px 5px -3px; + width: 160px; + right: 60px; + @extend .light-background; + + div { + @apply h-12 pl-sm py-md text-body-l text-text-primary; + + &:hover { + @apply bg-grey-mid w-full; + @extend .light-background; + } + } + } + + .search-add { + padding: 12px 16px; + @extend .light-primary; + color: rgb(244, 119, 56); + display: flex; + cursor: pointer; + } + + .search-add-icon { + @extend .light-primary-button; + background: rgb(244, 119, 56); + border-radius: 50%; + height: 24px; + width: 24px; + display: flex; + justify-content: center; + align-items: center; + margin-left: 10px; + } +} diff --git a/frontend/micro-ui/web/micro-ui-internals/packages/css/src/digitv2/components/cardV2.scss b/frontend/micro-ui/web/micro-ui-internals/packages/css/src/digitv2/components/cardV2.scss new file mode 100644 index 00000000000..e34ccf1bd92 --- /dev/null +++ b/frontend/micro-ui/web/micro-ui-internals/packages/css/src/digitv2/components/cardV2.scss @@ -0,0 +1,431 @@ +@import url("../index.scss"); + +.card { + @apply bg-white m-sm px-md pt-md pb-lg shadow-card; + @extend .light-background; + border-radius: 4px; + max-width: 960px; + + .card-header { + @apply text-text-primary text-heading-xl font-bold font-rc align-middle text-left mb-md; + @extend .light-text-color-primary; + } + + .card-sub-header { + @apply text-text-primary text-caption-xl font-bold align-middle text-left mb-sm; + @extend .light-text-color-primary; + } + + .card-caption { + @apply text-text-secondary text-caption-xl mb-sm; + @extend .light-text-color-secondary; + } + + .card-text { + @apply text-text-secondary text-body-l align-middle text-left mb-lg; + @extend .light-text-color-secondary; + + span { + @apply text-text-primary; + @extend .light-text-color-primary; + } + } + + .card-text-primary { + @extend .light-text-color-primary; + + @apply text-text-primary text-body-l; + } + + .card-text-button { + @extend .light-text-color-primary; + + @apply text-primary-main text-text-btn; + } + + .card-label { + @extend .light-text-color-primary; + + @apply text-legend text-text-primary mb-sm; + } + + .card-label-error { + @extend .alert-error; + @apply block text-body-s text-error mb-md; + } + + .card-label-desc { + @extend .light-text-color-secondary; + @extend .light-text-color-secondary; + @apply font-bold text-text-secondary text-heading-s mb-md; + } + + .card-link { + @extend .light-text-color-primary; + @apply block text-center text-link text-primary-main mt-md cursor-pointer; + } +} + +.validation-error { + @extend .alert-error; + @apply block text-body-s text-error; +} + +.docsDescription { + @extend .light-text-color-primary; + color: theme(colors.text.primary) !important; +} + +.field-container { + @apply flex items-center; + /*@apply flex justify-center items-center;*/ +} + +.employeeCard { + @apply bg-white shadow-card p-md mb-xl; + @extend .light-background; + border-radius: 4px; + + .card-header { + @apply text-text-primary text-heading-xl font-bold font-rc align-middle text-left mb-md; + @extend .light-text-color-primary; + } + + .card-sub-header, + .employee-card-sub-header { + @extend .light-text-color-primary; + @apply text-text-primary text-caption-xl font-bold align-middle text-left; + } + + .card-section-header { + @extend .light-text-color-primary; + @apply text-text-primary text-heading-m font-bold; + } + + .card-section-sub-text { + @extend .light-text-color-primary; + @apply text-text-primary text-body-s; + } + + .card-caption { + @extend .light-text-color-secondary; + @apply text-text-secondary text-caption-xl mb-sm; + } + + .card-text { + @extend .light-text-color-secondary; + @apply text-text-secondary text-body-l align-middle text-left mb-lg; + + span { + @apply text-text-primary; + @extend .light-text-color-primary; + } + } + + .card-text-primary { + @extend .light-text-color-primary; + @apply text-text-primary text-body-l; + } + + .card-text-button { + @extend .light-text-color-primary; + @apply text-primary-main text-text-btn; + } + + .card-label { + @extend .light-text-color-primary; + @apply text-legend text-text-primary mb-md; + } + + .card-label-error { + @extend .alert-error; + @apply block text-body-s text-error mb-md; + } + + .card-label-desc { + @extend .light-text-color-secondary; + @apply font-bold text-text-secondary text-heading-s mb-md; + } + + .card-link { + @extend .light-primary; + @apply block text-center text-link text-link-normal mt-md; + } + + .card-search-heading { + margin-right: 0px !important; + margin-left: 0px !important; + margin-bottom: 0px !important; + padding-bottom: 0px; + padding-left: 25px; + } +} + +.header-wrap { + @apply flex mb-md; + + .header-start { + margin-right: auto; + } + + .header-content { + } + + .header-end { + margin-left: auto; + } +} + +.card-emp { + @extend .card; + padding-right: 0; + padding-top: 0; + padding-left: 0; + @apply bg-white m-sm; + @extend .light-background; +} + +.submit-bar { + @extend .light-primary-button; + /* @extend .light-text-color-primary; */ + @apply h-10 bg-primary-main text-center w-full outline-none; + box-shadow: inset 0px -2px 0px theme(colors.text.primary); + cursor: pointer; + + &:focus { + @apply outline-none; + } + + header { + /* @extend .light-text-color-primary; */ + @apply font-rc font-medium text-legend text-white leading-10; + } +} + +.submit-bar-disabled { + @extend .light-text-color-disabled; + @apply h-10 bg-primary-main text-center w-full outline-none opacity-50; + + &:focus { + @apply outline-none; + } + + header { + @apply font-rc font-medium text-legend text-white leading-10; + } +} + +@screen dt { + .submit-bar, + .submit-bar-disabled { + width: 240px; + } + + .card { + display: flex; + flex-direction: column; + + .card-header { + @apply text-heading-xl-dt; + } + + .card-sub-header { + @apply text-heading-l-dt; + } + + .card-caption { + @apply text-caption-xl-dt; + } + + .card-text, + .card-text-primary { + @apply text-body-l-dt; + } + + .card-link { + @apply text-left; + } + } + + .employeeCard { + @apply mb-md mx-md !important; + + &.filter { + margin-left: auto; + margin-right: auto; + } + + .card-header { + @apply text-heading-xl-dt; + } + + .card-sub-header { + @apply text-heading-l-dt; + } + + .employee-card-sub-header { + margin-bottom: 40px; + @apply text-heading-l-dt; + } + + .card-section-header { + margin-bottom: 40px; + @apply text-heading-m-dt; + } + + .card-section-sub-text { + @apply text-text-primary text-body-s-dt; + } + + .card-search-heading { + margin-right: 0px !important; + margin-left: 0px !important; + margin-bottom: 0px !important; + padding-bottom: 0px; + padding-left: 25px; + } + + .card-caption { + @apply text-caption-xl-dt; + } + + .card-text, + .card-text-primary { + @apply text-body-l-dt; + } + + .card-link { + @apply text-left; + } + + .label-field-pair { + @apply flex items-center; + + h2 { + width: 30%; + } + + .field { + width: 50%; + margin-right: 20%; + .field { + margin-right: unset; + } + } + } + + .field-container { + span { + border: 2px solid black; + background: rgb(247, 247, 247); + width: 40px; + height: 40px; + display: flex; + justify-content: center; + align-items: center; + margin-top: -16px; + border-right: none; + } + } + } + + .header-wrap { + @apply flex mb-md; + + .header-start { + margin-right: auto; + } + + .header-content { + } + + .header-end { + margin-left: auto; + } + } +} + +.card-section-header { + @extend .light-text-color-primary; + @apply text-text-primary text-heading-m font-bold; +} + +.card-search-heading { + margin-right: 0px !important; + margin-left: 0px !important; + margin-bottom: 0px !important; + padding-bottom: 0px; + padding-left: 25px; +} + +.button-sub-text { + width: 100%; +} + +.home-page-info-banner-wrap { + margin: "0px 16px 24px 16px"; +} + +@media (min-width: 780px) { + .button-sub-text { + width: 240px; + } + .home-page-info-banner-wrap { + max-width: 45%; + min-width: 40%; + margin-left: 0; + margin-right: 24px; + margin-bottom: 24px; + } + .info-banner-wrap-citizen-override { + } + .oc-aknowledgement-screen { + width: auto; + min-width: 240px; + max-width: 100%; + padding: 0px 10px; + } +} + +.card-label-error { + @extend .alert-error; + @apply block text-body-s text-error mb-md; +} + +.employeeCard-override { + margin-left: 0px !important; +} + +.BPAemployeeCard { + margin-left: 0px !important; + margin-right: 0px !important; + margin-bottom: 64px !important; +} + +.employee-application-details { + display: flex !important; + justify-content: space-between !important; + max-height: 60px !important; + height: 60px !important; +} +.employee-main-application-details { + padding: 10px !important; +} + +.employee-mulitlink-main-div { + @extend .light-primary; + z-index: 10 !important; + max-width: 41% !important; +} + +.employee-download-btn-className { + position: unset !important; + display: flex !important; + justify-content: flex-end !important; +} + +.employee-options-btn-className { + position: unset !important; + margin: 0 !important; + width: 100% !important; +} diff --git a/frontend/micro-ui/web/micro-ui-internals/packages/css/src/digitv2/components/checkboxV2.scss b/frontend/micro-ui/web/micro-ui-internals/packages/css/src/digitv2/components/checkboxV2.scss new file mode 100644 index 00000000000..49fee491a3d --- /dev/null +++ b/frontend/micro-ui/web/micro-ui-internals/packages/css/src/digitv2/components/checkboxV2.scss @@ -0,0 +1,59 @@ +@import url("../index.scss"); + +.checkbox-wrap { + @apply flex mb-md relative items-baseline; + + input { + width: 38px; + height: 38px; + @apply opacity-0 absolute top-0 left-0 z-10; + @extend .light-input-border; + } + + .input-emp { + @extend input; + width: 24px; + height: 24px; + } + + .custom-checkbox { + width: 38px; + height: 38px; + @apply absolute top-0 left-0 border border-solid border-input-border z-0; + @extend .light-input-border; + + img { + @apply opacity-0; + } + + svg { + @apply opacity-0; + } + } + + .custom-checkbox-emp { + @extend .custom-checkbox; + width: 24px; + height: 24px; + } + + input:checked ~ .custom-checkbox, + input:hover ~ .custom-checkbox { + @apply border-2 border-primary-main; + @extend .light-input-border; + } + + input:checked ~ .custom-checkbox img { + @apply opacity-100; + } + + input:checked ~ .custom-checkbox svg { + @apply opacity-100; + } + + .label { + margin-left: 56px; + @apply text-form-field text-text-primary; + @extend .light-text-color-primary; + } +} diff --git a/frontend/micro-ui/web/micro-ui-internals/packages/css/src/digitv2/components/multiSelectDropdownV2.scss b/frontend/micro-ui/web/micro-ui-internals/packages/css/src/digitv2/components/multiSelectDropdownV2.scss new file mode 100644 index 00000000000..e5e4536a341 --- /dev/null +++ b/frontend/micro-ui/web/micro-ui-internals/packages/css/src/digitv2/components/multiSelectDropdownV2.scss @@ -0,0 +1,89 @@ +@import url("../index.scss"); + +.multi-select-dropdown-wrap { + @apply relative text-form-field text-text-primary w-full; + @extend .light-text-color-primary; + .master, + .master-active { + @extend .light-input-border; + @apply relative border border-solid border-input-border h-10 w-full; + input[type="text"] { + @apply absolute top-0 left-0 p-sm pl-sm min-h-full min-w-full opacity-0; + &:focus { + @apply outline-none; + } + } + .label { + @apply flex justify-between p-sm w-full h-full; + svg { + @apply h-6 w-6; + } + } + + &:hover { + @extend .light-input-border; + + @apply border-2 border-solid border-primary-main; + } + } + + .master-active { + @apply border-2 border-primary-main; + @extend .light-input-border; + + input[type="text"] { + @apply opacity-100; + } + .label { + @apply hidden; + } + } + + .server { + box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12), 0 5px 5px -3px rgba(0, 0, 0, 0.2); + top: 40px; + + max-height: 20vmax; + overflow: scroll; + @apply absolute min-w-full z-20; + div { + @apply flex w-full bg-white; + @extend .light-background; + justify-content: flex-start; + align-items: center; + &:hover { + @apply bg-grey-mid; + @extend .light-background; + } + input { + height: 44px; + @apply absolute min-w-full opacity-0 z-20 cursor-pointer; + } + p { + padding: 12px; + margin-top: 5px; + margin-bottom: 5px; + @apply text-form-field text-text-primary; + @extend .light-text-color-primary; + } + .custom-checkbox { + height: 28px; + width: 28px; + @extend .light-input-border; + @apply border border-solid border-input-border m-sm; + svg { + @apply opacity-0 z-10; + } + } + input:checked ~ .custom-checkbox, + input:hover ~ .custom-checkbox { + @extend .light-input-border; + @apply border-2 border-primary-main; + } + + input:checked ~ .custom-checkbox svg { + @apply opacity-100; + } + } + } +} diff --git a/frontend/micro-ui/web/micro-ui-internals/packages/css/src/digitv2/components/radiobtnV2.scss b/frontend/micro-ui/web/micro-ui-internals/packages/css/src/digitv2/components/radiobtnV2.scss new file mode 100644 index 00000000000..e86f31bd33d --- /dev/null +++ b/frontend/micro-ui/web/micro-ui-internals/packages/css/src/digitv2/components/radiobtnV2.scss @@ -0,0 +1,51 @@ +@import url("../index.scss"); + +.radio-wrap { + @apply my-sm block leading-10 mb-lg; + + div { + @apply block mb-md; + } + + .radio-btn-wrap { + @apply block float-left relative; + &:hover { + .radio-btn-checkmark { + @apply border-primary-main; + } + } + } + + .radio-btn { + @apply opacity-0 absolute cursor-pointer h-10 w-10; + } + + .radio-btn-checkmark { + @extend .light-input-border; + @apply h-10 w-10 border border-input-border border-solid rounded-full block; + } + + label { + @extend .light-text-color-primary; + @apply text-text-primary text-form-field ml-md; + } + + .radio-btn-checkmark:after { + content: ""; + } + + .radio-btn-wrap input:checked ~ .radio-btn-checkmark { + /* @extend .light-input-border; */ + @apply border-2 border-primary-main; + } + + .radio-btn-wrap input:checked ~ .radio-btn-checkmark:after { + /* @extend .light-background; */ + @apply block bg-primary-main h-5 w-5 rounded-full absolute top-10 left-10; + } +} +.reverse-radio-selection-wrapper { + div { + @apply flex flex-row-reverse place-content-between items-center; + } +} diff --git a/frontend/micro-ui/web/micro-ui-internals/packages/css/src/digitv2/components/selectdropdownV2.scss b/frontend/micro-ui/web/micro-ui-internals/packages/css/src/digitv2/components/selectdropdownV2.scss new file mode 100644 index 00000000000..0a8788d36ed --- /dev/null +++ b/frontend/micro-ui/web/micro-ui-internals/packages/css/src/digitv2/components/selectdropdownV2.scss @@ -0,0 +1,190 @@ +/*.select { + + @apply mb-lg block border-2 border-input-border border-solid outline-none rounded-none w-full h-10 bg-white leading-10; + + option { + @apply h-10 text-form-field text-text-primary align-top text-left; + } + + } + +.select:active { + @apply border-focus border-2; +} + +@screen dt { + .select { + @apply w-2/5; + } +} +*/ +.employee-select-wrap { + @apply mb-lg relative; + + .select { + @extend .light-input-border; + @apply relative block w-full h-10 border border-solid border-input-border; + &:hover { + @extend .light-input-border; + @apply border-2 border-solid border-primary-main; + } + input[type="text"] { + width: calc(100% - 32px); + background-color: transparent; + @extend .light-input-border; + @extend .light-text-color-primary; + @apply absolute z-10 w-full h-full outline-none text-text-primary text-form-field pl-sm; + } + + p { + padding-top: 9px; + @extend .light-text-color-primary; + @apply text-form-field text-text-primary float-left ml-sm; + } + + img { + @apply float-right h-6 w-6 mt-sm mr-sm; + } + + svg { + @apply absolute right-0 float-right h-6 w-6 mt-sm mr-sm; + } + } + + .select-active { + @apply relative block w-full h-10 border-2 border-solid border-primary-main; + @extend .light-input-border; + + input[type="text"] { + width: calc(100% - 32px); + background-color: transparent; + @extend .light-background; + @extend .light-text-color-primary; + + @apply absolute z-10 w-full h-full outline-none text-text-primary text-form-field pl-sm; + } + + p { + @extend .light-text-color-primary; + @apply text-form-field text-text-primary float-left ml-sm; + } + + p { + padding-top: 9px; + } + + img { + @apply float-right h-6 w-6 mt-sm mr-sm; + } + + svg { + @apply absolute right-0 float-right h-6 w-6 mt-sm mr-sm; + } + } + + .options-card { + width: 100% !important; + box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12), 0 5px 5px -3px rgba(0, 0, 0, 0.2); + max-height: 400px; + overflow: auto; + @apply absolute z-20 mt-xs bg-white max-w-full; + + p { + padding-top: 14px; + @extend .light-text-color-primary; + @apply w-full h-12 pl-sm text-text-primary text-form-field; + + &:hover { + @apply bg-grey-mid; + @extend .light-background; + } + } + } +} + +.employee-select-wrap--elipses { + width: 85% !important; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +.select-wrap { + @apply mb-lg relative; + max-width: 540px; + + .select { + @apply relative block w-full h-10 border border-solid border-input-border; + @extend .light-input-border; + + input[type="text"] { + width: calc(100% - 32px); + background-color: transparent; + @extend .light-text-color-primary; + @apply absolute z-10 w-full h-full outline-none text-text-primary text-form-field pl-sm; + } + + p { + padding-top: 9px; + @extend .light-text-color-primary; + @apply text-form-field text-text-primary float-left ml-sm; + } + + img { + @apply float-right h-6 w-6 mt-sm mr-sm; + } + + svg { + @apply absolute right-0 float-right h-6 w-6 mt-sm mr-sm; + } + } + + .select-active { + @extend .light-input-border; + @apply relative block w-full h-10 border-2 border-solid border-primary-main; + + input[type="text"] { + width: calc(100% - 32px); + background-color: transparent; + @extend .light-text-color-primary; + @apply absolute z-10 w-full h-full outline-none text-text-primary text-form-field pl-sm; + } + + p { + @extend .light-text-color-primary; + @apply text-form-field text-text-primary float-left ml-sm; + } + + p { + padding-top: 9px; + } + + img { + @apply float-right h-6 w-6 mt-sm mr-sm; + } + + svg { + @apply absolute right-0 float-right h-6 w-6 mt-sm mr-sm; + } + } + + .options-card { + width: 100% !important; + box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12), 0 5px 5px -3px rgba(0, 0, 0, 0.2); + @extend .light-background; + @apply absolute z-20 mt-xs bg-white; + + p { + padding-top: 14px; + @extend .light-text-color-primary; + @apply w-full h-12 pl-sm text-text-primary text-form-field; + + &:hover { + @apply bg-grey-mid; + } + } + } +} + +@screen dt { +} diff --git a/frontend/micro-ui/web/micro-ui-internals/packages/css/src/digitv2/index.scss b/frontend/micro-ui/web/micro-ui-internals/packages/css/src/digitv2/index.scss new file mode 100644 index 00000000000..fc9b6672dec --- /dev/null +++ b/frontend/micro-ui/web/micro-ui-internals/packages/css/src/digitv2/index.scss @@ -0,0 +1,118 @@ +@import url("./components/actionbarV2.scss"); +@import url("./components/cardV2.scss"); +@import url("./components/checkboxV2.scss"); +@import url("./components/FormComposerV2.scss"); +@import url("./components/multiSelectDropdownV2.scss"); +@import url("./components/radiobtnV2.scss"); +@import url("./components/selectdropdownV2.scss"); +@import url("./typography.scss"); + +/* important to be remove after fixing the components */ +.light { + &-primary { + color: theme(digitv2.lightTheme.primary) !important; + &-button { + background-color: theme(digitv2.lightTheme.primary) !important; + } + + &-bg { + background-color: theme(digitv2.lightTheme.primary-bg) !important; + } + } + + &-text-color { + &-primary { + color: theme(digitv2.lightTheme.text-color-primary) !important; + } + + &-secondary { + color: theme(digitv2.lightTheme.text-color-secondary) !important; + } + + &-disabled { + color: theme(digitv2.lightTheme.text-color-disabled) !important; + } + } + + &-background { + background-color: theme(digitv2.lightTheme.background) !important; + } + + &-paper { + &-primary { + background-color: theme(digitv2.lightTheme.paper) !important; + } + + &-secondary { + background-color: theme(digitv2.lightTheme.paper-secondary) !important; + } + } + + &-divider { + background-color: theme(digitv2.lightTheme.divider) !important; + } + + &-header-sidenav { + color: theme(digitv2.lightTheme.header-sidenav) !important; + } + + &-input-border { + border-color: theme(digitv2.lightTheme.input-border) !important; + } +} + +.alert { + &-error { + color: theme(digitv2.alert.error) !important; + + &-bg { + background-color: theme(digitv2.alert.error-bg) !important; + } + } + + &-success { + color: theme(digitv2.alert.success) !important; + + &-bg { + background-color: theme(digitv2.alert.success-bg) !important; + } + } + + &-info { + color: theme(digitv2.alert.info) !important; + + &-bg { + background-color: theme(digitv2.alert.info-bg) !important; + } + } +} + +.chart { + &-item-1 { + color: theme(digitv2.chart.chart-1) !important; + } + + &-item-1-gradient { + color: theme(digitv2.chart.chart-1-gradient) !important; + } + + &-item-2 { + color: theme(digitv2.chart.chart-2) !important; + } + + &-item-2-gradient { + color: theme(digitv2.chart.chart-2-gradient) !important; + } + + &-item-3 { + color: theme(digitv2.chart.chart-3) !important; + } + + &-item-4 { + color: theme(digitv2.chart.chart-4) !important; + } + + &-item-5 { + color: theme(digitv2.chart.chart-5) !important; + } +} diff --git a/frontend/micro-ui/web/micro-ui-internals/packages/css/src/digitv2/typography.scss b/frontend/micro-ui/web/micro-ui-internals/packages/css/src/digitv2/typography.scss new file mode 100644 index 00000000000..d1151ab5256 --- /dev/null +++ b/frontend/micro-ui/web/micro-ui-internals/packages/css/src/digitv2/typography.scss @@ -0,0 +1,133 @@ +.typography { + &.text-heading-xl-dt { + font-family: theme(digitv2.fontFamily.rc); + font-size: theme(digitv2.fontSize.heading-xl-dt); + font-style: theme(digitv2.fontStyle.normal); + font-weight: theme(digitv2.fontWeight.bold); + + @media (max-width: theme(digitv2.screens.dt)) { + font-size: theme(digitv2.fontSize.heading-xl); + } + } + &.text-heading-l-dt { + font-family: theme(digitv2.fontFamily.rc); + font-size: theme(digitv2.fontSize.heading-l-dt); + font-style: theme(digitv2.fontStyle.normal); + font-weight: theme(digitv2.fontWeight.bold); + + @media (max-width: theme(digitv2.screens.dt)) { + font-size: theme(digitv2.fontSize.heading-l); + } + } + + &.text-heading-m-dt { + font-family: theme(digitv2.fontFamily.rc); + font-size: theme(digitv2.fontSize.heading-m-dt); + font-style: theme(digitv2.fontStyle.normal); + font-weight: theme(digitv2.fontWeight.bold); + + @media (max-width: theme(digitv2.screens.dt)) { + font-size: theme(digitv2.fontSize.heading-m); + } + } + + &.text-heading-m { + font-family: theme(digitv2.fontFamily.sans); + font-size: theme(digitv2.fontSize.heading-m); + font-style: theme(digitv2.fontStyle.normal); + font-weight: theme(digitv2.fontWeight.bold); + + @media (max-width: theme(digitv2.screens.sm.max)) { + font-size: theme(digitv2.fontSize.heading-m); + } + } + + &.text-heading-s { + font-family: theme(digitv2.fontFamily.sans); + font-size: theme(digitv2.fontSize.heading-s); + font-style: theme(digitv2.fontStyle.normal); + font-weight: theme(digitv2.fontWeight.bold); + } + + &.text-caption-xl-dt { + font-family: theme(digitv2.fontFamily.rc); + font-size: theme(digitv2.fontSize.caption-xl-dt); + font-style: theme(digitv2.fontStyle.normal); + font-weight: theme(digitv2.fontWeight.regular); + + @media (max-width: theme(digitv2.screens.dt)) { + font-size: theme(digitv2.fontSize.caption-xl); + } + } + + &.text-caption-l-dt { + font-family: theme(digitv2.fontFamily.rc); + font-size: theme(digitv2.fontSize.caption-l-dt); + font-style: theme(digitv2.fontStyle.normal); + font-weight: theme(digitv2.fontWeight.regular); + + @media (max-width: theme(digitv2.screens.dt)) { + font-size: theme(digitv2.fontSize.caption-l); + } + } + + &.text-caption-m-dt { + font-family: theme(digitv2.fontFamily.rc); + font-size: theme(digitv2.fontSize.caption-m-dt); + font-style: theme(digitv2.fontStyle.normal); + font-weight: theme(digitv2.fontWeight.regular); + + @media (max-width: theme(digitv2.screens.dt)) { + font-size: theme(digitv2.fontSize.caption-m); + } + } + &.text-body-l-dt { + font-family: theme(digitv2.fontFamily.rc); + font-size: theme(digitv2.fontSize.body-l-dt); + font-style: theme(digitv2.fontStyle.normal); + font-weight: theme(digitv2.fontWeight.regular); + + @media (max-width: theme(digitv2.screens.dt)) { + font-size: theme(digitv2.fontSize.body-l); + } + } + + &.text-body-s-dt { + font-family: theme(digitv2.fontFamily.rc); + font-size: theme(digitv2.fontSize.body-s-dt); + font-style: theme(digitv2.fontStyle.normal); + font-weight: theme(digitv2.fontWeight.regular); + + @media (max-width: theme(digitv2.screens.dt)) { + font-size: theme(digitv2.fontSize.body-s); + } + } + + &.text-body-xs { + @media (max-width: theme(digitv2.screens.sm.max)) { + font-size: theme(digitv2.fontSize.body-xs); + font-family: theme(digitv2.fontFamily.sans); + font-style: theme(digitv2.fontStyle.normal); + font-weight: theme(digitv2.fontWeight.regular); + } + } + + + &.text-link { + font-family: theme(digitv2.fontFamily.sans); + font-size: theme(digitv2.fontSize.link); + font-style: theme(digitv2.fontStyle.normal); + font-weight: theme(digitv2.fontWeight.regular); + } + &.text-label-dt { + font-family: theme(digitv2.fontFamily.sans); + font-size: theme(digitv2.fontSize.label-dt); + font-style: theme(digitv2.fontStyle.normal); + font-weight: theme(digitv2.fontWeight.regular); + @media (max-width: theme(digitv2.screens.dt)) { + font-size: theme(digitv2.fontSize.label-m); + + } + + } +}