From fb7e9961ed04875fd9970408991bf48986a18b40 Mon Sep 17 00:00:00 2001 From: Swathi-eGov <137176788+Swathi-eGov@users.noreply.github.com> Date: Tue, 28 May 2024 09:27:11 +0530 Subject: [PATCH] Added Panels, Panel Card, Popup (#71) * added panels and panelcards * added textblock atom * added Popup * updated panels * updated versions * review-changes * updated panel cards --- react/css/README.md | 1 + react/css/package.json | 2 +- .../css/src/digitv2/components/panelcard.scss | 157 +++ react/css/src/digitv2/components/panels.scss | 73 ++ react/css/src/digitv2/components/popUpV2.scss | 289 +++++- .../css/src/digitv2/components/textblock.scss | 47 + react/css/src/digitv2/index.scss | 3 + react/css/src/digitv2/typography.scss | 2 +- react/example/package.json | 2 +- react/example/public/index.html | 2 +- react/modules/Project/package.json | 2 +- react/modules/core/package.json | 2 +- react/modules/sample/package.json | 2 +- react/package.json | 2 +- react/ui-components/README.md | 1 + react/ui-components/package.json | 7 +- react/ui-components/src/animations/error.json | 728 ++++++++++++++ .../ui-components/src/animations/success.json | 917 ++++++++++++++++++ react/ui-components/src/atoms/Animation.js | 20 + react/ui-components/src/atoms/Panels.js | 111 +++ react/ui-components/src/atoms/PopUp.js | 224 ++++- react/ui-components/src/atoms/TextBlock.js | 62 ++ react/ui-components/src/atoms/index.js | 6 + .../src/atoms/stories/Panels.stories.js | 22 + .../src/hoc/stories/Animation.stories.js | 48 + .../src/hoc/stories/Panels.stories.js | 134 +++ .../src/hoc/stories/PopUp.stories.js | 375 +++++++ .../src/hoc/stories/TextBlock.stories.js | 22 + react/ui-components/src/index.js | 11 +- .../ui-components/src/molecules/PanelCard.js | 131 +++ react/ui-components/src/molecules/index.js | 4 +- .../molecules/stories/PanelCard.stories.js | 286 ++++++ 32 files changed, 3670 insertions(+), 25 deletions(-) create mode 100644 react/css/src/digitv2/components/panelcard.scss create mode 100644 react/css/src/digitv2/components/panels.scss create mode 100644 react/css/src/digitv2/components/textblock.scss create mode 100644 react/ui-components/src/animations/error.json create mode 100644 react/ui-components/src/animations/success.json create mode 100644 react/ui-components/src/atoms/Animation.js create mode 100644 react/ui-components/src/atoms/Panels.js create mode 100644 react/ui-components/src/atoms/TextBlock.js create mode 100644 react/ui-components/src/atoms/stories/Panels.stories.js create mode 100644 react/ui-components/src/hoc/stories/Animation.stories.js create mode 100644 react/ui-components/src/hoc/stories/Panels.stories.js create mode 100644 react/ui-components/src/hoc/stories/PopUp.stories.js create mode 100644 react/ui-components/src/hoc/stories/TextBlock.stories.js create mode 100644 react/ui-components/src/molecules/PanelCard.js create mode 100644 react/ui-components/src/molecules/stories/PanelCard.stories.js diff --git a/react/css/README.md b/react/css/README.md index 92e1b1ffbb0..cf73764a722 100644 --- a/react/css/README.md +++ b/react/css/README.md @@ -42,6 +42,7 @@ frontend/micro-ui/web/public/index.html # Changelog ```bash +1.8.2-coreui.20 Added Popup,Panel and Panel Card css 1.8.2-coreui.19 Added Uploader Variants 1.8.2-coreui.18 Updated Text-Secondary color typography 1.8.2-coreui.17 Updated RemoveableTag styles diff --git a/react/css/package.json b/react/css/package.json index a7de5b0e49d..a49a0207594 100644 --- a/react/css/package.json +++ b/react/css/package.json @@ -1,6 +1,6 @@ { "name": "@egovernments/digit-ui-css", - "version": "1.8.2-coreui.19", + "version": "1.8.2-coreui.20", "license": "MIT", "main": "dist/index.css", "author": "Jagankumar ", diff --git a/react/css/src/digitv2/components/panelcard.scss b/react/css/src/digitv2/components/panelcard.scss new file mode 100644 index 00000000000..36cabf9a0e0 --- /dev/null +++ b/react/css/src/digitv2/components/panelcard.scss @@ -0,0 +1,157 @@ +.digit-panelcard-wrap { + @apply w-full flex-col; + display: flex; + height: fit-content; + border-radius: theme(digitv2.spacers.spacer1); + box-shadow: theme(digitv2.spacers.spacer0) 0.063rem 0.125rem theme(digitv2.spacers.spacer0) #00000029; + background: theme(digitv2.lightTheme.paper-primary); + + .digit-panelcard-header{ + + &.with-shadow { + box-shadow: theme(digitv2.spacers.spacer0) 0.063rem 0.125rem theme(digitv2.spacers.spacer0) #00000026; + } + + @media (min-width: 48rem) { + padding: theme(digitv2.spacers.spacer6); + padding-bottom: theme(digitv2.spacers.spacer0); + + &.with-shadow { + padding-bottom: theme(digitv2.spacers.spacer6); + } + } + + @media (min-width: 30.063rem) and (max-width: 47.938rem) { + padding: theme(digitv2.spacers.spacer5); + padding-bottom: theme(digitv2.spacers.spacer0); + + &.with-shadow { + padding-bottom: theme(digitv2.spacers.spacer5); + } + } + + @media (max-width: 30rem) { + padding: theme(digitv2.spacers.spacer4); + padding-bottom: theme(digitv2.spacers.spacer0); + + &.with-shadow { + padding-bottom: theme(digitv2.spacers.spacer4); + } + } + } + + .digit-panelcard-children-wrap { + @apply flex-col overflow-hidden overflow-y-auto ; + + display: flex; + flex: 1; + + &.inline { + flex-direction: row; + } + + @media (min-width: 48rem) { + gap: theme(digitv2.spacers.spacer6); + padding: theme(digitv2.spacers.spacer6) theme(digitv2.spacers.spacer6) theme(digitv2.spacers.spacer0) theme(digitv2.spacers.spacer6); + + &.with-shadow { + padding: theme(digitv2.spacers.spacer6); + } + + } + + @media (min-width: 30.063rem) and (max-width: 47.938rem) { + gap: theme(digitv2.spacers.spacer5); + padding: theme(digitv2.spacers.spacer5) theme(digitv2.spacers.spacer5) theme(digitv2.spacers.spacer0) theme(digitv2.spacers.spacer5); + + &.with-shadow{ + padding: theme(digitv2.spacers.spacer5); + } + + } + + @media (max-width: 30rem) { + gap: theme(digitv2.spacers.spacer4); + padding: theme(digitv2.spacers.spacer4) theme(digitv2.spacers.spacer4) theme(digitv2.spacers.spacer0) theme(digitv2.spacers.spacer4); + + &.with-shadow{ + padding: theme(digitv2.spacers.spacer4); + } + } + + .digit-panelcard-description { + @extend .typography.body-s; + color: theme(digitv2.lightTheme.generic-inputborder); + } + + } + + .digit-panelcard-footer { + @apply flex-wrap; + display: flex; + gap: theme(digitv2.spacers.spacer4); + + &.with-shadow { + box-shadow: theme(digitv2.spacers.spacer0) -0.063rem 0.125rem theme(digitv2.spacers.spacer0) #00000026; + } + + @media (min-width: 48rem) { + padding: theme(digitv2.spacers.spacer6); + } + + @media (min-width: 30.063rem) and (max-width: 47.938rem) { + @apply w-full; + padding: theme(digitv2.spacers.spacer5); + } + + @media (max-width: 30rem) { + @apply flex-col; + padding: theme(digitv2.spacers.spacer4); + } + } + + .digit-panelcard-footer-buttons { + margin-left: auto; + display: flex; + gap: theme(digitv2.spacers.spacer4); + + @media (min-width: 30.063rem) and (max-width: 47.938rem) { + @apply w-full; + + button { + flex: 1; + } + } + + @media (max-width: 30rem) { + @apply flex-col; + margin: theme(digitv2.spacers.spacer0); + + button { + width: 100%; + } + } + } + + .panelcard-infocard{ + margin: theme(digitv2.spacers.spacer0); + width: 100%; + max-width: 100%; + min-width: 100%; + } +} + +.digit-panelcard-children-wrap::-webkit-scrollbar { + width: theme(digitv2.spacers.spacer2); + background-color: theme(digitv2.lightTheme.generic-background); + } + + .digit-panelcard-children-wrap::-webkit-scrollbar-track { + background-color: theme(digitv2.lightTheme.generic-background); + border-radius: 0.563rem; + } + + .digit-panelcard-children-wrap::-webkit-scrollbar-thumb { + background-color: theme(digitv2.lightTheme.generic-divider); + border-radius: 0.563rem; + } \ No newline at end of file diff --git a/react/css/src/digitv2/components/panels.scss b/react/css/src/digitv2/components/panels.scss new file mode 100644 index 00000000000..4ae79bed04c --- /dev/null +++ b/react/css/src/digitv2/components/panels.scss @@ -0,0 +1,73 @@ +.digit-panel-wrapper { + @apply flex flex-col items-center; + gap: theme(digitv2.spacers.spacer6); + + @media (min-width: 48rem) { + padding: theme(digitv2.spacers.spacer10); + } + + @media (min-width: 30.063rem) and (max-width: 47.938rem) { + padding: theme(digitv2.spacers.spacer10); + } + + @media (max-width: 30rem) { + padding: theme(digitv2.spacers.spacer8) theme(digitv2.spacers.spacer10); + } + + &.success { + background-color: theme(digitv2.lightTheme.alert-success); + } + + &.error { + background-color: theme(digitv2.lightTheme.alert-error); + } + + .digit-panel-message-wrapper { + @apply items-center; + display: flex; + flex-direction: column !important; + + @media (min-width: 48rem) { + gap: theme(digitv2.spacers.spacer6); + } + + @media (min-width: 30.063rem) and (max-width: 47.938rem) { + gap: theme(digitv2.spacers.spacer5); + } + + @media (max-width: 30rem) { + gap: theme(digitv2.spacers.spacer4); + } + + .digit-panel-message { + @extend .typography.heading-xl; + @apply whitespace-pre-wrap break-words; + line-height: normal; + color: theme(digitv2.lightTheme.paper-primary); + } + } + + .digit-panel-info-wrapper { + display: flex; + flex-direction: column !important; + align-items: center; + gap: theme(digitv2.spacers.spacer1); + + .digit-panel-info { + @extend .typography.body-l; + color: theme(digitv2.lightTheme.paper-primary); + } + + .digit-panel-multiple-responses { + display: flex; + flex-direction: column; + gap: theme(digitv2.spacers.spacer1); + } + + .digit-panel-response { + @extend .typography.heading-m; + color: theme(digitv2.lightTheme.paper-primary); + } + + } +} \ No newline at end of file diff --git a/react/css/src/digitv2/components/popUpV2.scss b/react/css/src/digitv2/components/popUpV2.scss index 94f6fc0188a..3ae524ef813 100644 --- a/react/css/src/digitv2/components/popUpV2.scss +++ b/react/css/src/digitv2/components/popUpV2.scss @@ -1,16 +1,287 @@ .digit-popup-wrap { - background: rgba(0, 0, 0, 0.7); - @apply flex fixed w-full h-full overflow-auto top-0 left-0 min-h-screen; + @apply w-full h-auto flex-col absolute; z-index: 10000; -} + background-color: theme(digitv2.lightTheme.paper-primary); + border-radius: theme(digitv2.spacers.spacer1); + box-shadow: theme(digitv2.spacers.spacer0) 0.063rem 0.125rem theme(digitv2.spacers.spacer0) #00000029; + display: flex; + + @media (min-width: 48rem) { + max-height: 86%; + max-width: 51%; + } + + @media (min-width: 30.063rem) and (max-width: 47.938rem) { + max-height: 82%; + max-width: 74%; + } + + @media (max-width: 30rem) { + max-height: 80%; + max-width: 91%; + } + + &.alert { + text-align: center; + } -@screen dt { - .digit-popup-wrap { - background: rgba(0, 0, 0, 0.7); - @apply min-h-screen; + .digit-popup-close { + @apply items-center cursor-pointer absolute; + display: flex; + justify-content: flex-end; + width: theme(digitv2.spacers.spacer6); + height: theme(digitv2.spacers.spacer6); + + @media (min-width: 48rem) { + top: theme(digitv2.spacers.spacer3); + right: theme(digitv2.spacers.spacer3); + } + + @media (min-width: 30.063rem) and (max-width: 47.938rem) { + top: 0.625rem; + right: 0.625rem; + } + + @media (max-width: 30rem) { + top: theme(digitv2.spacers.spacer2); + right: theme(digitv2.spacers.spacer2); + } + + + svg { + flex-shrink: 0; + + @media (min-width: 48rem) { + width: theme(digitv2.spacers.spacer7) !important; + height: theme(digitv2.spacers.spacer7) !important; + } + + } } + + .digit-popup-header { + @apply flex-col; + display: flex !important; + gap: theme(digitv2.spacers.spacer4); + + .digit-popup-icon-header-container { + display: flex !important; + gap: theme(digitv2.spacers.spacer2); + + svg { + flex-shrink: 0; + } + + .digit-popup-heading-subheading-wrap { + @apply flex-col; + display: flex !important; + gap: theme(digitv2.spacers.spacer1); + color: theme(digitv2.lightTheme.text-primary); + + .digit-popup-heading { + @extend .typography.heading-l; + line-height: normal; + } + + .digit-popup-subheading { + @extend .typography.caption-s; + } + } + + .digit-popup-description { + @extend .typography.body-l; + color: theme(digitv2.lightTheme.text-primary); + } + } + + &.with-shadow { + box-shadow: theme(digitv2.spacers.spacer0) 0.063rem 0.125rem theme(digitv2.spacers.spacer0) #00000026; + } + + @media (min-width: 48rem) { + padding: theme(digitv2.spacers.spacer6); + padding-bottom: theme(digitv2.spacers.spacer0); + + &.with-shadow { + padding-bottom: theme(digitv2.spacers.spacer6); + } + } + + @media (min-width: 30.063rem) and (max-width: 47.938rem) { + padding: theme(digitv2.spacers.spacer5); + padding-bottom: theme(digitv2.spacers.spacer0); + + &.with-shadow { + padding-bottom: theme(digitv2.spacers.spacer5); + } + } + + @media (max-width: 30rem) { + padding: theme(digitv2.spacers.spacer4); + padding-bottom: theme(digitv2.spacers.spacer0); + + &.with-shadow { + padding-bottom: theme(digitv2.spacers.spacer4); + } + } + + } + + .digit-popup-children-wrap { + @apply overflow-hidden overflow-y-auto flex-col; + display: flex; + flex: 1; + + &.inline { + flex-direction: row; + } + + @media (min-width: 48rem) { + gap: theme(digitv2.spacers.spacer6); + padding: theme(digitv2.spacers.spacer6) theme(digitv2.spacers.spacer6) theme(digitv2.spacers.spacer0) theme(digitv2.spacers.spacer6); + + &.with-shadow { + padding: theme(digitv2.spacers.spacer6); + } + + } + + @media (min-width: 30.063rem) and (max-width: 47.938rem) { + gap: theme(digitv2.spacers.spacer5); + padding: theme(digitv2.spacers.spacer5) theme(digitv2.spacers.spacer5) theme(digitv2.spacers.spacer0) theme(digitv2.spacers.spacer5); + + &.with-shadow{ + padding: theme(digitv2.spacers.spacer5); + } + + } + + @media (max-width: 30rem) { + gap: theme(digitv2.spacers.spacer4); + padding: theme(digitv2.spacers.spacer4) theme(digitv2.spacers.spacer4) theme(digitv2.spacers.spacer0) theme(digitv2.spacers.spacer4); + + &.with-shadow{ + padding: theme(digitv2.spacers.spacer4); + } + } + } + + .digit-popup-footer { + @apply flex-wrap; + display: flex; + gap: theme(digitv2.spacers.spacer4); + + &.with-shadow { + box-shadow: theme(digitv2.spacers.spacer0) -0.063rem 0.125rem theme(digitv2.spacers.spacer0) #00000026; + } + + @media (min-width: 48rem) { + padding: theme(digitv2.spacers.spacer6); + } + + @media (min-width: 30.063rem) and (max-width: 47.938rem) { + @apply w-full; + padding: theme(digitv2.spacers.spacer5); + } + + @media (max-width: 30rem) { + @apply flex-col; + padding: theme(digitv2.spacers.spacer4); + } + } + + .digit-popup-footer-buttons { + margin-left: auto; + display: flex; + gap: theme(digitv2.spacers.spacer4); + + @media (min-width: 30.063rem) and (max-width: 47.938rem) { + @apply w-full; + + button { + flex: 1; + } + } + + @media (max-width: 30rem) { + @apply flex-col; + margin: theme(digitv2.spacers.spacer0); + + button { + width: 100%; + } + } + } + + + .digit-popup-alert-content { + @apply flex-col items-center; + display: flex; + gap: theme(digitv2.spacers.spacer2); + + .digit-popup-alert-heading { + @extend .typography.heading-l; + line-height: normal; + color: theme(digitv2.lightTheme.text-primary); + } + + .digit-popup-alert-message { + @extend .typography.caption-s; + text-align: center; + color: theme(digitv2.lightTheme.text-primary); + } + + &.with-shadow { + box-shadow: theme(digitv2.spacers.spacer0) 0.063rem 0.125rem theme(digitv2.spacers.spacer0) #00000026; + } + + @media (min-width: 48rem) { + padding: theme(digitv2.spacers.spacer6); + padding-bottom: theme(digitv2.spacers.spacer0); + + &.with-shadow { + padding-bottom: theme(digitv2.spacers.spacer6); + } + } + + @media (min-width: 30.063rem) and (max-width: 47.938rem) { + padding: theme(digitv2.spacers.spacer5); + padding-bottom: theme(digitv2.spacers.spacer0); + + &.with-shadow { + padding-bottom: theme(digitv2.spacers.spacer5); + } + } + + @media (max-width: 30rem) { + padding: theme(digitv2.spacers.spacer4); + padding-bottom: theme(digitv2.spacers.spacer0); + + &.with-shadow { + padding-bottom: theme(digitv2.spacers.spacer4); + } + } + } + + .popup-info-card { + margin: theme(digitv2.spacers.spacer0); + width: 100%; + max-width: 100%; + min-width: 100%; + } +} + +.digit-popup-children-wrap::-webkit-scrollbar { + width: theme(digitv2.spacers.spacer2); + background-color: theme(digitv2.lightTheme.generic-background); } -.digit-popup-close-icon { - @apply flex justify-end; +.digit-popup-children-wrap::-webkit-scrollbar-track { + background-color: theme(digitv2.lightTheme.generic-background); + border-radius: 0.563rem; } + +.digit-popup-children-wrap::-webkit-scrollbar-thumb { + background-color: theme(digitv2.lightTheme.generic-divider); + border-radius: 0.563rem; +} \ No newline at end of file diff --git a/react/css/src/digitv2/components/textblock.scss b/react/css/src/digitv2/components/textblock.scss new file mode 100644 index 00000000000..5fac69c3721 --- /dev/null +++ b/react/css/src/digitv2/components/textblock.scss @@ -0,0 +1,47 @@ +.digit-text-block-wrap { + + @apply flex flex-col; + + @media (min-width: 48rem) { + gap: theme(digitv2.spacers.spacer6); + } + + @media (min-width: 30.063rem) and (max-width: 47.938rem) { + gap: theme(digitv2.spacers.spacer5); + } + + @media (max-width: 30rem) { + gap: theme(digitv2.spacers.spacer4); + } + + + .digit-text-block-header-content { + .digit-text-block-caption { + @extend .typography.caption-s; + padding-bottom: theme(digitv2.spacers.spacer1); + color: theme(digitv2.lightTheme.text-secondary); + } + + .digit-text-block-header { + @extend .typography.heading-xl; + padding-bottom: theme(digitv2.spacers.spacer2); + color: theme(digitv2.lightTheme.text-primary); + line-height: normal; + + @media (max-width: 30rem) { + padding-bottom: theme(digitv2.spacers.spacer1); + } + } + + .digit-text-block-subheader { + @extend .typography.heading-m; + color: theme(digitv2.lightTheme.text-secondary); + line-height: normal; + } + } + + .digit-text-block-body { + @extend .typography.body-s; + color: theme(digitv2.lightTheme.generic-inputborder); + } +} \ No newline at end of file diff --git a/react/css/src/digitv2/index.scss b/react/css/src/digitv2/index.scss index db42a0a4e24..5520102089d 100644 --- a/react/css/src/digitv2/index.scss +++ b/react/css/src/digitv2/index.scss @@ -59,6 +59,9 @@ @import url("./components/timeline.scss"); @import url("./components/infobuttons.scss"); @import url("./components/uploader.scss"); +@import url("./components/textblock.scss"); +@import url("./components/panels.scss"); +@import url("./components/panelcard.scss"); /* pages */ @import url("./pages/employee/index.scss"); diff --git a/react/css/src/digitv2/typography.scss b/react/css/src/digitv2/typography.scss index 5fd2cb912f9..4ad7ff02a94 100644 --- a/react/css/src/digitv2/typography.scss +++ b/react/css/src/digitv2/typography.scss @@ -261,7 +261,7 @@ &.heading-xl { - font-family: theme(digitv2.fontFamily.rc); + font-family: theme(digitv2.fontFamily.sans); font-style: theme(digitv2.fontStyle.normal); font-weight: theme(digitv2.fontWeight.bold); line-height: theme(digitv2.lineHeight.lineheight1); diff --git a/react/example/package.json b/react/example/package.json index 0b1b565ae47..a096cc7f276 100644 --- a/react/example/package.json +++ b/react/example/package.json @@ -10,7 +10,7 @@ "build": "webpack --mode production" }, "dependencies": { - "@egovernments/digit-ui-components": "0.0.1-beta.28", + "@egovernments/digit-ui-components": "0.0.1-beta.29", "@egovernments/digit-ui-libraries": "1.8.2-beta.1", "@egovernments/digit-ui-module-common": "1.7.10", "@egovernments/digit-ui-module-core": "1.8.1-beta.6", diff --git a/react/example/public/index.html b/react/example/public/index.html index 2dfdc258dbe..f9e0a16cf42 100644 --- a/react/example/public/index.html +++ b/react/example/public/index.html @@ -9,7 +9,7 @@ rel='stylesheet' type='text/css'> diff --git a/react/modules/Project/package.json b/react/modules/Project/package.json index bf01a156be7..862375132d0 100644 --- a/react/modules/Project/package.json +++ b/react/modules/Project/package.json @@ -19,7 +19,7 @@ }, "dependencies": { "@egovernments/digit-ui-react-components": "1.8.1-beta.4", - "@egovernments/digit-ui-components": "0.0.1-beta.28", + "@egovernments/digit-ui-components": "0.0.1-beta.29", "lodash": "^4.17.21", "react": "17.0.2", "react-date-range": "^1.4.0", diff --git a/react/modules/core/package.json b/react/modules/core/package.json index e6d1ada4450..38ea742c650 100644 --- a/react/modules/core/package.json +++ b/react/modules/core/package.json @@ -14,7 +14,7 @@ "prepublish": "yarn build" }, "dependencies": { - "@egovernments/digit-ui-components": "0.0.1-beta.28", + "@egovernments/digit-ui-components": "0.0.1-beta.29", "@egovernments/digit-ui-react-components": "1.8.1-beta.4", "react": "17.0.2", "react-dom": "17.0.2", diff --git a/react/modules/sample/package.json b/react/modules/sample/package.json index 57c3908887b..8d1db35f02d 100644 --- a/react/modules/sample/package.json +++ b/react/modules/sample/package.json @@ -19,7 +19,7 @@ }, "dependencies": { "@egovernments/digit-ui-react-components": "1.8.1-beta.4", - "@egovernments/digit-ui-components": "0.0.1-beta.28", + "@egovernments/digit-ui-components": "0.0.1-beta.29", "react": "17.0.2", "react-date-range": "^1.4.0", "react-dom": "17.0.2", diff --git a/react/package.json b/react/package.json index 12891fc483e..eeb80660585 100644 --- a/react/package.json +++ b/react/package.json @@ -77,7 +77,7 @@ "@egovernments/digit-ui-module-sample": "0.0.1", "@egovernments/digit-ui-react-components": "1.7.10", "@egovernments/digit-ui-svg-components": "1.0.4", - "@egovernments/digit-ui-components": "0.0.1-beta.28", + "@egovernments/digit-ui-components": "0.0.1-beta.29", "babel-loader": "8.1.0", "clean-webpack-plugin": "4.0.0", "css-loader": "5.2.6", diff --git a/react/ui-components/README.md b/react/ui-components/README.md index f89328475bd..30a1f313f52 100644 --- a/react/ui-components/README.md +++ b/react/ui-components/README.md @@ -58,6 +58,7 @@ yarn storybook # Changelog ```bash +0.0.1-beta.29 Added PopUp,Panels and Panel Cards 0.0.1-beta.28 Added restrictSelection prop in MultiSelectDropdown 0.0.1-beta.27 Added uploader variants and its CSS 0.0.1-beta.26 Updated Toast Usage diff --git a/react/ui-components/package.json b/react/ui-components/package.json index e2b9a33cb7f..97773b67ab5 100644 --- a/react/ui-components/package.json +++ b/react/ui-components/package.json @@ -1,6 +1,6 @@ { "name": "@egovernments/digit-ui-components", - "version": "0.0.1-beta.28", + "version": "0.0.1-beta.29", "license": "MIT", "main": "dist/index.js", "module": "dist/index.modern.js", @@ -45,13 +45,14 @@ "react-query": "3.6.1", "react-responsive": "9.0.2", "react-router-dom": "5.3.0", - "react-scripts": "^4.0.1" + "react-scripts": "^4.0.1", + "react-lottie":"1.2.4" }, "files": [ "dist" ], "dependencies": { - "@egovernments/digit-ui-css": "1.8.2-coreui.19", + "@egovernments/digit-ui-css": "1.8.2-coreui.20", "@egovernments/digit-ui-libraries": "1.8.1-beta.1", "@egovernments/digit-ui-svg-components": "1.0.4", "@googlemaps/js-api-loader": "1.13.10", diff --git a/react/ui-components/src/animations/error.json b/react/ui-components/src/animations/error.json new file mode 100644 index 00000000000..ac0665f1701 --- /dev/null +++ b/react/ui-components/src/animations/error.json @@ -0,0 +1,728 @@ +{ + "nm": "ckeck", + "ddd": 0, + "h": 50, + "w": 50, + "meta": { + "g": "@lottiefiles/toolkit-js 0.33.2" + }, + "layers": [ + { + "ty": 4, + "nm": "! Outlines", + "sr": 1, + "st": 0, + "op": 213, + "ip": 0, + "hd": false, + "ddd": 0, + "bm": 0, + "hasMask": false, + "ao": 0, + "ks": { + "a": { + "a": 0, + "k": [ + 2, + 12, + 0 + ], + "ix": 1 + }, + "s": { + "a": 1, + "k": [ + { + "o": { + "x": 0.653, + "y": -0.834 + }, + "i": { + "x": 0.667, + "y": 1 + }, + "s": [ + 100, + 100, + 100 + ], + "t": 60 + }, + { + "o": { + "x": 0.167, + "y": 0.167 + }, + "i": { + "x": 0.833, + "y": 0.833 + }, + "s": [ + 115, + 115, + 100 + ], + "t": 73 + }, + { + "o": { + "x": 0.333, + "y": 0 + }, + "i": { + "x": 0.127, + "y": 1.695 + }, + "s": [ + 115, + 115, + 100 + ], + "t": 83 + }, + { + "s": [ + 100, + 100, + 100 + ], + "t": 90 + } + ], + "ix": 6 + }, + "sk": { + "a": 0, + "k": 0 + }, + "p": { + "a": 0, + "k": [ + 25, + 25, + 0 + ], + "ix": 2 + }, + "r": { + "a": 0, + "k": 0, + "ix": 10 + }, + "sa": { + "a": 0, + "k": 0 + }, + "o": { + "a": 0, + "k": 100, + "ix": 11 + } + }, + "ef": [], + "shapes": [ + { + "ty": "gr", + "bm": 0, + "hd": false, + "mn": "ADBE Vector Group", + "nm": "Group 1", + "ix": 1, + "cix": 2, + "np": 4, + "it": [ + { + "ty": "sh", + "bm": 0, + "hd": false, + "mn": "ADBE Vector Shape - Group", + "nm": "Path 1", + "ix": 1, + "d": 1, + "ks": { + "a": 0, + "k": { + "c": true, + "i": [ + [ + 0, + 1.104 + ], + [ + -1.104, + 0 + ], + [ + 0, + -1.104 + ], + [ + 1.104, + 0 + ] + ], + "o": [ + [ + 0, + -1.104 + ], + [ + 1.104, + 0 + ], + [ + 0, + 1.104 + ], + [ + -1.104, + 0 + ] + ], + "v": [ + [ + -2, + 10 + ], + [ + 0, + 8 + ], + [ + 2, + 10 + ], + [ + 0, + 12 + ] + ] + }, + "ix": 2 + } + }, + { + "ty": "sh", + "bm": 0, + "hd": false, + "mn": "ADBE Vector Shape - Group", + "nm": "Path 2", + "ix": 2, + "d": 1, + "ks": { + "a": 0, + "k": { + "c": true, + "i": [ + [ + 0, + 0 + ], + [ + 0, + 0 + ], + [ + 0, + 0 + ], + [ + 0, + 0 + ], + [ + 0, + 0 + ], + [ + 0, + 0 + ] + ], + "o": [ + [ + 0, + 0 + ], + [ + 0, + 0 + ], + [ + 0, + 0 + ], + [ + 0, + 0 + ], + [ + 0, + 0 + ], + [ + 0, + 0 + ] + ], + "v": [ + [ + -1.036, + 5 + ], + [ + -2, + -6.625 + ], + [ + -2, + -12 + ], + [ + 2, + -12 + ], + [ + 2, + -6.625 + ], + [ + 1.052, + 5 + ] + ] + }, + "ix": 2 + } + }, + { + "ty": "mm", + "bm": 0, + "hd": false, + "mn": "ADBE Vector Filter - Merge", + "nm": "Merge Paths 1", + "mm": 1 + }, + { + "ty": "fl", + "bm": 0, + "hd": false, + "mn": "ADBE Vector Graphic - Fill", + "nm": "Fill 1", + "c": { + "a": 0, + "k": [ + 1, + 1, + 1 + ], + "ix": 4 + }, + "r": 1, + "o": { + "a": 0, + "k": 100, + "ix": 5 + } + }, + { + "ty": "tr", + "a": { + "a": 0, + "k": [ + 0.099, + 9.982 + ], + "ix": 1 + }, + "s": { + "a": 0, + "k": [ + 100, + 100 + ], + "ix": 3 + }, + "sk": { + "a": 0, + "k": 0, + "ix": 4 + }, + "p": { + "a": 0, + "k": [ + 2.099, + 21.982 + ], + "ix": 2 + }, + "r": { + "a": 1, + "k": [ + { + "o": { + "x": 0.167, + "y": 0.167 + }, + "i": { + "x": 0.833, + "y": 0.833 + }, + "s": [ + 0 + ], + "t": 10 + }, + { + "o": { + "x": 0.167, + "y": 0.167 + }, + "i": { + "x": 0.833, + "y": 0.833 + }, + "s": [ + 5 + ], + "t": 12 + }, + { + "o": { + "x": 0.167, + "y": 0.167 + }, + "i": { + "x": 0.833, + "y": 0.833 + }, + "s": [ + -5 + ], + "t": 14 + }, + { + "o": { + "x": 0.167, + "y": 0.167 + }, + "i": { + "x": 0.833, + "y": 0.833 + }, + "s": [ + 5 + ], + "t": 16 + }, + { + "o": { + "x": 0.167, + "y": 0.167 + }, + "i": { + "x": 0.833, + "y": 0.833 + }, + "s": [ + -5 + ], + "t": 18 + }, + { + "o": { + "x": 0.167, + "y": 0.167 + }, + "i": { + "x": 0.833, + "y": 0.833 + }, + "s": [ + 5 + ], + "t": 20 + }, + { + "o": { + "x": 0.167, + "y": 0.167 + }, + "i": { + "x": 0.833, + "y": 0.833 + }, + "s": [ + -5 + ], + "t": 22 + }, + { + "s": [ + 0 + ], + "t": 24 + } + ], + "ix": 6 + }, + "sa": { + "a": 0, + "k": 0, + "ix": 5 + }, + "o": { + "a": 0, + "k": 100, + "ix": 7 + } + } + ] + } + ], + "ind": 1 + }, + { + "ty": 4, + "nm": "Shape Layer 1", + "sr": 1, + "st": 0, + "op": 193, + "ip": 0, + "hd": false, + "ddd": 0, + "bm": 0, + "hasMask": false, + "ao": 0, + "ks": { + "a": { + "a": 0, + "k": [ + 0, + 10, + 0 + ], + "ix": 1 + }, + "s": { + "a": 1, + "k": [ + { + "o": { + "x": 0.41, + "y": -0.602 + }, + "i": { + "x": 0.667, + "y": 1 + }, + "s": [ + 100, + 100, + 100 + ], + "t": 60 + }, + { + "o": { + "x": 0.333, + "y": 0 + }, + "i": { + "x": 0.436, + "y": 1.492 + }, + "s": [ + 115, + 115, + 100 + ], + "t": 83 + }, + { + "s": [ + 100, + 100, + 100 + ], + "t": 90 + } + ], + "ix": 6 + }, + "sk": { + "a": 0, + "k": 0 + }, + "p": { + "a": 0, + "k": [ + 25, + 35, + 0 + ], + "ix": 2 + }, + "r": { + "a": 0, + "k": 0, + "ix": 10 + }, + "sa": { + "a": 0, + "k": 0 + }, + "o": { + "a": 0, + "k": 100, + "ix": 11 + } + }, + "ef": [], + "shapes": [ + { + "ty": "gr", + "bm": 0, + "hd": false, + "mn": "ADBE Vector Group", + "nm": "Ellipse 1", + "ix": 1, + "cix": 2, + "np": 3, + "it": [ + { + "ty": "el", + "bm": 0, + "hd": false, + "mn": "ADBE Vector Shape - Ellipse", + "nm": "Ellipse Path 1", + "d": 1, + "p": { + "a": 0, + "k": [ + 0, + 0 + ], + "ix": 3 + }, + "s": { + "a": 0, + "k": [ + 40, + 40 + ], + "ix": 2 + } + }, + { + "ty": "st", + "bm": 0, + "hd": false, + "mn": "ADBE Vector Graphic - Stroke", + "nm": "Stroke 1", + "lc": 1, + "lj": 1, + "ml": 4, + "o": { + "a": 0, + "k": 100, + "ix": 4 + }, + "w": { + "a": 0, + "k": 2, + "ix": 5 + }, + "c": { + "a": 0, + "k": [ + 1, + 1, + 1 + ], + "ix": 3 + } + }, + { + "ty": "tr", + "a": { + "a": 0, + "k": [ + 0, + 0 + ], + "ix": 1 + }, + "s": { + "a": 0, + "k": [ + 100, + 100 + ], + "ix": 3 + }, + "sk": { + "a": 0, + "k": 0, + "ix": 4 + }, + "p": { + "a": 0, + "k": [ + 0, + 0 + ], + "ix": 2 + }, + "r": { + "a": 0, + "k": 0, + "ix": 6 + }, + "sa": { + "a": 0, + "k": 0, + "ix": 5 + }, + "o": { + "a": 0, + "k": 100, + "ix": 7 + } + } + ] + }, + { + "ty": "tm", + "bm": 0, + "hd": false, + "mn": "ADBE Vector Filter - Trim", + "nm": "Trim Paths 1", + "ix": 2, + "e": { + "a": 0, + "k": 100, + "ix": 2 + }, + "o": { + "a": 0, + "k": 0, + "ix": 3 + }, + "s": { + "a": 0, + "k": 0, + "ix": 1 + }, + "m": 1 + } + ], + "ind": 2 + } + ], + "v": "5.6.5", + "fr": 60, + "op": 180, + "ip": 0, + "assets": [] + } \ No newline at end of file diff --git a/react/ui-components/src/animations/success.json b/react/ui-components/src/animations/success.json new file mode 100644 index 00000000000..9b917c5210a --- /dev/null +++ b/react/ui-components/src/animations/success.json @@ -0,0 +1,917 @@ +{ + "nm": "sucess", + "ddd": 0, + "h": 120, + "w": 120, + "meta": { + "g": "LottieFiles AE 0.1.21" + }, + "layers": [ + { + "ty": 3, + "nm": "scale up null", + "sr": 1, + "st": 0, + "op": 300.00001221925, + "ip": 0, + "hd": false, + "ddd": 0, + "bm": 0, + "hasMask": false, + "ao": 0, + "ks": { + "a": { + "a": 0, + "k": [ + 0, + 0, + 0 + ], + "ix": 1 + }, + "s": { + "a": 1, + "k": [ + { + "o": { + "x": 0.167, + "y": 0 + }, + "i": { + "x": 0.833, + "y": 1 + }, + "s": [ + 111, + 111, + 100 + ], + "t": 27 + }, + { + "o": { + "x": 0.167, + "y": 0 + }, + "i": { + "x": 0.833, + "y": 1 + }, + "s": [ + 101, + 101, + 100 + ], + "t": 36 + }, + { + "s": [ + 121, + 121, + 100 + ], + "t": 42.0000017106951 + } + ], + "ix": 6 + }, + "sk": { + "a": 0, + "k": 0 + }, + "p": { + "a": 0, + "k": [ + 60, + 60, + 0 + ], + "ix": 2 + }, + "r": { + "a": 0, + "k": 0, + "ix": 10 + }, + "sa": { + "a": 0, + "k": 0 + }, + "o": { + "a": 0, + "k": 0, + "ix": 11 + } + }, + "ef": [], + "ind": 1 + }, + { + "ty": 4, + "nm": "spark", + "sr": 1, + "st": 35.0000014255792, + "op": 335.00001364483, + "ip": 35.0000014255792, + "hd": false, + "ddd": 0, + "bm": 0, + "hasMask": false, + "ao": 0, + "ks": { + "a": { + "a": 0, + "k": [ + 0, + 0, + 0 + ], + "ix": 1 + }, + "s": { + "a": 0, + "k": [ + 100, + 100, + 100 + ], + "ix": 6 + }, + "sk": { + "a": 0, + "k": 0 + }, + "p": { + "a": 0, + "k": [ + 0, + 0.5, + 0 + ], + "ix": 2 + }, + "r": { + "a": 0, + "k": 0, + "ix": 10 + }, + "sa": { + "a": 0, + "k": 0 + }, + "o": { + "a": 0, + "k": 100, + "ix": 11 + } + }, + "ef": [], + "shapes": [ + { + "ty": "gr", + "bm": 0, + "hd": false, + "mn": "ADBE Vector Group", + "nm": "Rectangle 1", + "ix": 1, + "cix": 2, + "np": 3, + "it": [ + { + "ty": "rc", + "bm": 0, + "hd": false, + "mn": "ADBE Vector Shape - Rect", + "nm": "Rectangle Path 1", + "d": 1, + "p": { + "a": 1, + "k": [ + { + "o": { + "x": 0.333, + "y": 0 + }, + "i": { + "x": 0.667, + "y": 1 + }, + "s": [ + 0, + -21 + ], + "t": 35, + "ti": [ + 0, + 1.5 + ], + "to": [ + 0, + -1.5 + ] + }, + { + "s": [ + 0, + -30 + ], + "t": 53.0000021587343 + } + ], + "ix": 3 + }, + "r": { + "a": 0, + "k": 0, + "ix": 4 + }, + "s": { + "a": 1, + "k": [ + { + "o": { + "x": 0.976, + "y": 0 + }, + "i": { + "x": 0.667, + "y": 1 + }, + "s": [ + 2, + 0 + ], + "t": 35 + }, + { + "o": { + "x": 0.33299999999999996, + "y": 0 + }, + "i": { + "x": 0.15355432054499818, + "y": 0.9999999999999999 + }, + "s": [ + 2, + 8 + ], + "t": 42 + }, + { + "s": [ + 1.633, + 0 + ], + "t": 53.0000021587343 + } + ], + "ix": 2 + } + }, + { + "ty": "fl", + "bm": 0, + "hd": false, + "mn": "ADBE Vector Graphic - Fill", + "nm": "Fill 1", + "c": { + "a": 0, + "k": [ + 0.9804, + 0.9804, + 0.9804 + ], + "ix": 4 + }, + "r": 1, + "o": { + "a": 0, + "k": 100, + "ix": 5 + } + }, + { + "ty": "tr", + "a": { + "a": 0, + "k": [ + 0, + 0 + ], + "ix": 1 + }, + "s": { + "a": 0, + "k": [ + 100, + 100 + ], + "ix": 3 + }, + "sk": { + "a": 0, + "k": 0, + "ix": 4 + }, + "p": { + "a": 0, + "k": [ + 0, + -8 + ], + "ix": 2 + }, + "r": { + "a": 0, + "k": 0, + "ix": 6 + }, + "sa": { + "a": 0, + "k": 0, + "ix": 5 + }, + "o": { + "a": 0, + "k": 100, + "ix": 7 + } + } + ] + }, + { + "ty": "rp", + "bm": 0, + "hd": false, + "mn": "ADBE Vector Filter - Repeater", + "nm": "Repeater 1", + "ix": 2, + "m": 1, + "c": { + "a": 0, + "k": 8, + "ix": 1 + }, + "o": { + "a": 0, + "k": 0, + "ix": 2 + }, + "tr": { + "a": { + "a": 0, + "k": [ + 0, + 0 + ], + "ix": 1 + }, + "s": { + "a": 0, + "k": [ + 100, + 100 + ], + "ix": 3 + }, + "sk": { + "a": 0, + "k": 0 + }, + "p": { + "a": 0, + "k": [ + 0, + 0 + ], + "ix": 2 + }, + "r": { + "a": 0, + "k": 45, + "ix": 4 + }, + "sa": { + "a": 0, + "k": 0 + }, + "so": { + "a": 0, + "k": 100, + "ix": 5 + }, + "eo": { + "a": 0, + "k": 100, + "ix": 6 + } + } + } + ], + "ind": 2, + "parent": 1 + }, + { + "ty": 4, + "nm": "check", + "sr": 1, + "st": 10.0000004073083, + "op": 310.000012626559, + "ip": 22.0000008960784, + "hd": false, + "ddd": 0, + "bm": 0, + "hasMask": false, + "ao": 0, + "ks": { + "a": { + "a": 0, + "k": [ + 0, + 0, + 0 + ], + "ix": 1 + }, + "s": { + "a": 0, + "k": [ + 100, + 100, + 100 + ], + "ix": 6 + }, + "sk": { + "a": 0, + "k": 0 + }, + "p": { + "a": 0, + "k": [ + 0, + 0, + 0 + ], + "ix": 2 + }, + "r": { + "a": 0, + "k": 0, + "ix": 10 + }, + "sa": { + "a": 0, + "k": 0 + }, + "o": { + "a": 0, + "k": 100, + "ix": 11 + } + }, + "ef": [], + "shapes": [ + { + "ty": "sh", + "bm": 0, + "hd": false, + "mn": "ADBE Vector Shape - Group", + "nm": "Path 1", + "ix": 1, + "d": 1, + "ks": { + "a": 0, + "k": { + "c": false, + "i": [ + [ + 0, + 0 + ], + [ + 0, + 0 + ], + [ + 3.5, + 3.75 + ], + [ + -12.973, + 5.349 + ], + [ + -6.124, + -9.992 + ], + [ + 12.125, + -7.431 + ], + [ + 7.431, + 12.125 + ] + ], + "o": [ + [ + 0, + 0 + ], + [ + 0, + 0 + ], + [ + -3.5, + -3.75 + ], + [ + 10.764, + -2.941 + ], + [ + 7.431, + 12.125 + ], + [ + -12.125, + 7.431 + ], + [ + -7.431, + -12.125 + ] + ], + "v": [ + [ + 15.25, + -9.688 + ], + [ + -5.75, + 10.062 + ], + [ + -16, + 0.25 + ], + [ + -6.777, + -24.849 + ], + [ + 21.955, + -13.456 + ], + [ + 13.456, + 21.955 + ], + [ + -21.955, + 13.456 + ] + ] + }, + "ix": 2 + } + }, + { + "ty": "tm", + "bm": 0, + "hd": false, + "mn": "ADBE Vector Filter - Trim", + "nm": "Trim Paths 1", + "ix": 2, + "e": { + "a": 1, + "k": [ + { + "o": { + "x": 0.714, + "y": 0 + }, + "i": { + "x": 0.351, + "y": 1 + }, + "s": [ + 100 + ], + "t": 10 + }, + { + "s": [ + 23 + ], + "t": 40.0000016292334 + } + ], + "ix": 2 + }, + "o": { + "a": 0, + "k": 0, + "ix": 3 + }, + "s": { + "a": 1, + "k": [ + { + "o": { + "x": 0.742, + "y": 0 + }, + "i": { + "x": 0.363, + "y": 1 + }, + "s": [ + 100 + ], + "t": 17 + }, + { + "s": [ + 0 + ], + "t": 45.0000018328876 + } + ], + "ix": 1 + }, + "m": 1 + }, + { + "ty": "st", + "bm": 0, + "hd": false, + "mn": "ADBE Vector Graphic - Stroke", + "nm": "Stroke 1", + "lc": 1, + "lj": 1, + "ml": 4, + "o": { + "a": 0, + "k": 100, + "ix": 4 + }, + "w": { + "a": 0, + "k": 4, + "ix": 5 + }, + "c": { + "a": 0, + "k": [ + 0.9804, + 0.9804, + 0.9804 + ], + "ix": 3 + } + } + ], + "ind": 3, + "parent": 1 + }, + { + "ty": 4, + "nm": "circle", + "sr": 1, + "st": 0, + "op": 300.00001221925, + "ip": 0, + "hd": false, + "ddd": 0, + "bm": 0, + "hasMask": false, + "ao": 0, + "ks": { + "a": { + "a": 0, + "k": [ + 0, + 0, + 0 + ], + "ix": 1 + }, + "s": { + "a": 0, + "k": [ + 100, + 100, + 100 + ], + "ix": 6 + }, + "sk": { + "a": 0, + "k": 0 + }, + "p": { + "a": 0, + "k": [ + 0, + 0, + 0 + ], + "ix": 2 + }, + "r": { + "a": 0, + "k": 0, + "ix": 10 + }, + "sa": { + "a": 0, + "k": 0 + }, + "o": { + "a": 0, + "k": 100, + "ix": 11 + } + }, + "ef": [], + "shapes": [ + { + "ty": "sh", + "bm": 0, + "hd": false, + "mn": "ADBE Vector Shape - Group", + "nm": "Path 1", + "ix": 1, + "d": 1, + "ks": { + "a": 0, + "k": { + "c": true, + "i": [ + [ + -14.221, + 0 + ], + [ + 0, + -14.221 + ], + [ + 14.221, + 0 + ], + [ + 0, + 14.221 + ] + ], + "o": [ + [ + 14.221, + 0 + ], + [ + 0, + 14.221 + ], + [ + -14.221, + 0 + ], + [ + 0, + -14.221 + ] + ], + "v": [ + [ + 0, + -25.75 + ], + [ + 25.75, + 0 + ], + [ + 0, + 25.75 + ], + [ + -25.75, + 0 + ] + ] + }, + "ix": 2 + } + }, + { + "ty": "st", + "bm": 0, + "hd": false, + "mn": "ADBE Vector Graphic - Stroke", + "nm": "Stroke 1", + "lc": 1, + "lj": 1, + "ml": 4, + "o": { + "a": 0, + "k": 100, + "ix": 4 + }, + "w": { + "a": 0, + "k": 4, + "ix": 5 + }, + "c": { + "a": 0, + "k": [ + 0.9804, + 0.9804, + 0.9804 + ], + "ix": 3 + } + }, + { + "ty": "tm", + "bm": 0, + "hd": false, + "mn": "ADBE Vector Filter - Trim", + "nm": "Trim Paths 1", + "ix": 3, + "e": { + "a": 1, + "k": [ + { + "o": { + "x": 0.714, + "y": 0 + }, + "i": { + "x": 0.351, + "y": 1 + }, + "s": [ + 100 + ], + "t": 0 + }, + { + "s": [ + 100 + ], + "t": 30.0000012219251 + } + ], + "ix": 2 + }, + "o": { + "a": 0, + "k": 0, + "ix": 3 + }, + "s": { + "a": 1, + "k": [ + { + "o": { + "x": 0.742, + "y": 0 + }, + "i": { + "x": 0.363, + "y": 1 + }, + "s": [ + 100 + ], + "t": 7 + }, + { + "s": [ + 0 + ], + "t": 33.0000013441176 + } + ], + "ix": 1 + }, + "m": 1 + } + ], + "ind": 4, + "parent": 1 + } + ], + "v": "5.5.7", + "fr": 29.9700012207031, + "op": 60.0000024438501, + "ip": 0, + "assets": [] + } \ No newline at end of file diff --git a/react/ui-components/src/atoms/Animation.js b/react/ui-components/src/atoms/Animation.js new file mode 100644 index 00000000000..795ee4647d4 --- /dev/null +++ b/react/ui-components/src/atoms/Animation.js @@ -0,0 +1,20 @@ +import React from 'react'; +import Lottie from 'react-lottie'; + +const Animation = (props) => { + + const defaultOptions = { + loop: props?.loop, + autoplay: props?.autoplay, + animationData: props?.animationData, + renderer: 'svg', + }; + + return ( +
+ +
+ ); +}; + +export default Animation; diff --git a/react/ui-components/src/atoms/Panels.js b/react/ui-components/src/atoms/Panels.js new file mode 100644 index 00000000000..6bebbd9529f --- /dev/null +++ b/react/ui-components/src/atoms/Panels.js @@ -0,0 +1,111 @@ +import React from "react"; +import { SVG } from "./SVG"; +import PropTypes from "prop-types"; +import Animation from "./Animation"; +import successAnimation from "../animations/success.json"; +import errorAnimation from "../animations/error.json"; + +const Panels = (props) => { + const IconRender = (iconReq, iconFill) => { + const fill = iconFill || "#FFFFFF"; + + try { + const components = require("@egovernments/digit-ui-svg-components"); + const DynamicIcon = components?.[iconReq]; + if (DynamicIcon) { + const svgElement = DynamicIcon({ + width: "56px", + height: "56px", + fill: fill, + className: "digit-panel-customIcon", + }); + return svgElement; + } else { + console.error("Icon not found"); + return null; + } + } catch (error) { + console.error("Icon not found"); + return null; + } + }; + + const icon = IconRender(props?.customIcon, props?.iconFill); + + return ( +
+
+ {props?.type === "success" ? ( + props?.customIcon ? ( + icon + ) : props?.showAsSvg ? ( + + ) : ( + + ) + ) : props?.customIcon ? ( + icon + ) : props?.showAsSvg ? ( + + ) : ( + + )} +
{props?.message}
+
+
+
{props?.info}
+
{props?.response}
+ {props?.multipleResponses && ( +
+ {props?.multipleResponses.map((response) => ( +
{response}
+ ))} +
+ )} +
+
+ ); +}; + +Panels.propTypes = { + className: PropTypes.string, + message: PropTypes.string, + type: PropTypes.string, + info: PropTypes.string, + response: PropTypes.string, + customIcon: PropTypes.string, + iconFill: PropTypes.string, + style: PropTypes.object, + multipleResponses: PropTypes.array, +}; + +Panels.defaultProps = { + type: "success", +}; + +export default Panels; diff --git a/react/ui-components/src/atoms/PopUp.js b/react/ui-components/src/atoms/PopUp.js index 7481b4d42ce..fe20a014db4 100644 --- a/react/ui-components/src/atoms/PopUp.js +++ b/react/ui-components/src/atoms/PopUp.js @@ -1,10 +1,222 @@ -import React from "react"; +import React, { useState, Fragment, useRef, useEffect } from "react"; import PropTypes from "prop-types"; +import { SVG } from "./SVG"; +import StringManipulator from "./StringManipulator"; const PopUp = (props) => { + const [isOverflowing, setIsOverflowing] = useState(false); + const childrenWrapRef = useRef(null); + + const [isMobileView, setIsMobileView] = useState(window.innerWidth <= 480); + + const checkOverflow = () => { + if (childrenWrapRef.current) { + const isOverflow = + childrenWrapRef.current.scrollHeight > + childrenWrapRef.current.clientHeight; + setIsOverflowing(isOverflow); + } + }; + + const onResize = () => { + if (window.innerWidth <= 480) { + if (!isMobileView) { + setIsMobileView(true); + } + } else { + if (isMobileView) { + setIsMobileView(false); + } + } + checkOverflow(); + }; + + useEffect(() => { + const handleScroll = () => checkOverflow(); + const childrenWrap = childrenWrapRef.current; + + if (childrenWrap) { + childrenWrap.addEventListener("scroll", handleScroll); + checkOverflow(); + } + + return () => { + if (childrenWrap) { + childrenWrap.removeEventListener("scroll", handleScroll); + } + }; + }, [props.children]); + + + useEffect(() => { + window.addEventListener("resize", onResize); + + checkOverflow(); + + return () => { + window.removeEventListener("resize", onResize); + }; + }, []); + + const IconRender = (type, iconReq, iconFill) => { + const fill = iconFill || "#D4351C"; + const width = type === "alert" ? "48px" : "32px"; + const height = type === "alert" ? "48px" : "32px"; + + try { + const components = require("@egovernments/digit-ui-svg-components"); + const DynamicIcon = components?.[iconReq]; + if (DynamicIcon) { + const svgElement = DynamicIcon({ + width: width, + height: height, + fill: fill, + className: `digit-popup-customIcon ${type ? type : ""}`, + }); + return svgElement; + } else { + console.error("Icon not found"); + return null; + } + } catch (error) { + console.error("Icon not found"); + return null; + } + }; + + const iconGenerated = IconRender( + props?.type, + props?.customIcon, + props?.iconFill + ); + + const allowedFooter = props?.footerChildren.slice( + 0, + props?.maxFooterButtonsAllowed || 5 + ); + + const sortedFooterButtons = [...allowedFooter].sort((a, b) => { + const typeOrder = { primary: 3, secondary: 2, tertiary: 1 }; + const getTypeOrder = (button) => + typeOrder[(button.props.variation || "").toLowerCase()]; + return getTypeOrder(a) - getTypeOrder(b); + }); + + const finalFooterArray = props?.sortFooterButtons + ? isMobileView + ? sortedFooterButtons.reverse() + : sortedFooterButtons + : allowedFooter; + return ( -
- {props?.children} +
+ {props?.type === "alert" ? ( +
+ {!props?.customIcon && ( + + )} + {props?.customIcon && iconGenerated} +
+ {props?.alertHeading || "Alert!"} +
+
+ {props?.alertMessage || "AlertMessage"} +
+
+ ) : ( + <> +
+
+
+ {props?.showIcon && !props?.customIcon && ( + + )} + {props?.showIcon && props?.customIcon && iconGenerated} +
+ {props?.heading && ( +
+ {StringManipulator( + "TOSENTENCECASE", + StringManipulator("TRUNCATESTRING", props?.heading, { + maxLength: props?.headerMaxLength || 256, + }) + )} +
+ )} + {props?.subheading && ( +
+ {StringManipulator( + "TOSENTENCECASE", + StringManipulator("TRUNCATESTRING", props?.subheading, { + maxLength: props?.subHeaderMaxLength || 256, + }) + )} +
+ )} +
+
+ props?.onClose()} + > + + +
+
+ + )} +
+ {props?.description && ( +
{props?.description}
+ )} + {props?.children} +
+
+
+ {finalFooterArray} +
+
); }; @@ -13,6 +225,12 @@ PopUp.propTypes = { className: PropTypes.string, style: PropTypes.object, children: PropTypes.node, + headerclassName: PropTypes.string, + footerclassName: PropTypes.string, + headerChildren: PropTypes.node, + footerChildren: PropTypes.node, + onClose: PropTypes.func, + type: PropTypes.string, }; export default PopUp; diff --git a/react/ui-components/src/atoms/TextBlock.js b/react/ui-components/src/atoms/TextBlock.js new file mode 100644 index 00000000000..984a1ac0154 --- /dev/null +++ b/react/ui-components/src/atoms/TextBlock.js @@ -0,0 +1,62 @@ +import React from "react"; +import PropTypes from "prop-types"; + +const TextBlock = ({ + wrapperClassName, + headerContentClassName, + caption, + captionClassName, + header, + headerClasName, + subHeader, + subHeaderClasName, + body, + bodyClasName, +}) => { + return ( +
+
+
+ {caption} +
+
+ {header} +
+
+ {subHeader} +
+
+
{body}
+
+ ); +}; + +TextBlock.propTypes = { + wrapperClassName: PropTypes.string, + headerContentClassName: PropTypes.string, + caption: PropTypes.string, + captionClassName: PropTypes.string, + header: PropTypes.string, + headerClasName: PropTypes.string, + subHeader: PropTypes.string, + subHeaderClasName: PropTypes.string, + body: PropTypes.string, + bodyClasName: PropTypes.string, +}; + +TextBlock.defaultProps = { + wrapperClassName: "", + headerContentClassName: "", + caption: "", + captionClassName: "", + header: "", + headerClasName: "", + subHeader: "", + subHeaderClasName: "", + body: "", + bodyClasName: "", +}; + +export default TextBlock; diff --git a/react/ui-components/src/atoms/index.js b/react/ui-components/src/atoms/index.js index 434cdfb826a..89ae550f0fe 100644 --- a/react/ui-components/src/atoms/index.js +++ b/react/ui-components/src/atoms/index.js @@ -72,6 +72,9 @@ import Uploader from "./Uploader"; import UploadPopup from "./UploadPopup"; import UploadImage from "./UploadImage"; import ErrorBoundary from "./ErrorBoundary"; +import TextBlock from "./TextBlock"; +import Panels from "./Panels"; +import Animation from "./Animation"; import { AnnouncementIcon, @@ -280,6 +283,9 @@ export { Uploader, UploadPopup, UploadImage, + TextBlock, + Panels, + Animation, InboxSearchLinks, SearchComponent, LinkLabel, diff --git a/react/ui-components/src/atoms/stories/Panels.stories.js b/react/ui-components/src/atoms/stories/Panels.stories.js new file mode 100644 index 00000000000..1cc2febd037 --- /dev/null +++ b/react/ui-components/src/atoms/stories/Panels.stories.js @@ -0,0 +1,22 @@ +import React from "react"; +import Panels from "../Panels"; + +export default { + title: "Atoms/Panels", + component: Panels, + argTypes: {}, +}; + +const Template = (args) => ; + + +export const Primary = Template.bind({}); +Primary.args = {}; + +export const Playground = Template.bind({}); +Playground.args = { + successful: true, + message: "Application Submitted", + whichSvg: "tick", + complaintNumber: "20230725-001", +}; diff --git a/react/ui-components/src/hoc/stories/Animation.stories.js b/react/ui-components/src/hoc/stories/Animation.stories.js new file mode 100644 index 00000000000..5f2cd52066d --- /dev/null +++ b/react/ui-components/src/hoc/stories/Animation.stories.js @@ -0,0 +1,48 @@ +import React from "react"; +import { Animation } from "../../atoms"; +import successAnimation from "../../animations/success.json"; +import errorAnimation from "../../animations/error.json"; + +export default { + title: "Atom-Groups/Animation", + component: Animation, + argTypes: { + loop: { + control: "boolean", + }, + autoplay: { + control: "boolean", + }, + animationData: { + control: { type: "object" }, + }, + width:{ + control:"number" + }, + height:{ + control:"number" + } + }, +}; + +const Template = (args) =>
; + +const commonArgs = { + animationData:{}, + loop:true, + autoplay:true, + width:56, + height:56 +}; + +export const SuccessAnimation = Template.bind({}); +SuccessAnimation.args = { + ...commonArgs, + animationData:successAnimation +}; + +export const ErrorAnimation = Template.bind({}); +ErrorAnimation.args = { + ...commonArgs, + animationData:errorAnimation +}; diff --git a/react/ui-components/src/hoc/stories/Panels.stories.js b/react/ui-components/src/hoc/stories/Panels.stories.js new file mode 100644 index 00000000000..8a40852d626 --- /dev/null +++ b/react/ui-components/src/hoc/stories/Panels.stories.js @@ -0,0 +1,134 @@ +import React from "react"; +import { Panels } from "../../atoms"; + +export default { + title: "Atom-Groups/Panels", + component: Panels, + argTypes: { + type: { control: "select", options: ["success", "error"] }, + className: { + control: "text", + }, + message: { + control: "text", + }, + info: { + control: "text", + }, + response: { + control: "text", + }, + customIcon: { + control: "text", + }, + iconFill: { + control: "text", + }, + style: { + control: { type: "object" }, + }, + multipleResponses: { + control: { + type: "array", + separator: ",", + }, + }, + showAsSvg:{ + control:"boolean" + }, + animationProps:{ + control: {type :"object"} + } + }, +}; + +const Template = (args) => ; + +const commonArgs = { + className: "", + message: "Message", + type: "success", + info: "Ref ID ", + response: "949749795479", + customIcon:"", + iconFill:"", + style: {}, + showAsSvg:false, + multipleResponses:[], + animationProps:{ + noAutoplay:false, + noLoop :false + } +}; + +export const SuccessPanel = Template.bind({}); +SuccessPanel.args = { + ...commonArgs, + type: "success", + message: "Success Message!", +}; + +export const SuccessPanelWithAnimationProperties = Template.bind({}); +SuccessPanelWithAnimationProperties.args = { + ...commonArgs, + type: "success", + message: "Success Message!", + animationProps:{ + ...commonArgs.animationProps, + noLoop :true, + width:100, + height:100 + } +}; + +export const SuccessPanelWithoutAnimation = Template.bind({}); +SuccessPanelWithoutAnimation.args = { + ...commonArgs, + type: "success", + message: "Success Message!", + showAsSvg:true +}; + +export const SuccessPanelWithMultipleResponses = Template.bind({}); +SuccessPanelWithMultipleResponses.args = { + ...commonArgs, + type: "success", + message: "Success Message!", + multipleResponses:["949749795469","949749795579","949749795499"] +}; + +export const ErrorPanel = Template.bind({}); +ErrorPanel.args = { + ...commonArgs, + type: "error", + message: "Error Message!", +}; + +export const ErrorPanelWithAnimationProperties = Template.bind({}); +ErrorPanelWithAnimationProperties.args = { + ...commonArgs, + type: "error", + message: "Error Message!", + animationProps:{ + noLoop :true, + width:100, + height:100 + } +}; + + +export const ErrorPanelWithoutAnimation = Template.bind({}); +ErrorPanelWithoutAnimation.args = { + ...commonArgs, + type: "error", + message: "Error Message!", + showAsSvg:true +}; + +export const ErrorPanelWithMultipleResponses = Template.bind({}); +ErrorPanelWithMultipleResponses.args = { + ...commonArgs, + type: "error", + message: "Success Message!", + multipleResponses:["949749795469","949749795579","949749795499"] +}; \ No newline at end of file diff --git a/react/ui-components/src/hoc/stories/PopUp.stories.js b/react/ui-components/src/hoc/stories/PopUp.stories.js new file mode 100644 index 00000000000..68aba3665a3 --- /dev/null +++ b/react/ui-components/src/hoc/stories/PopUp.stories.js @@ -0,0 +1,375 @@ +import React from "react"; +import { PopUp } from "../../atoms"; +import { Button } from "../../atoms"; +import { InfoCard } from "../../atoms"; +import { ButtonsGroup } from "../../atoms"; + +export default { + title: "Atom-Groups/PopUp", + component: PopUp, + argTypes: { + className: { + control: "text", + }, + type: { control: "select", options: ["default", "alert"] }, + headerclassName: { + control: "text", + }, + footerclassName: { + control: "text", + }, + style: { + control: { type: "object" }, + }, + children: { + control: "object", + }, + footerChildren: { + control: "object", + }, + onClose: { + control: "function", + }, + props: { + control: "object", + }, + showIcon: { + control: "boolean", + }, + heading: { + control: "text", + }, + subheading: { + control: "text", + }, + description: { + control: "text", + }, + alertHeading: { + control: "text", + }, + alertMessage: { + control: "text", + }, + iconFill: { + control: "text", + }, + customIcon: { + control: "text", + }, + showChildrenInline: { + control: "boolean", + }, + headerMaxLength: { + control: "text", + }, + subHeaderMaxLength: { + control: "text", + }, + sortFooterButtons: { + control: "boolean", + }, + maxFooterButtonsAllowed: { + control: "text", + }, + }, +}; + +const Template = (args) => ; + +const commonArgs = { + type: "default", + className: "", + headerclassName: "", + footerclassName: "", + style: {}, + onClose: () => { + console.log("Popup closed"); + }, + props: {}, + showIcon: true, + heading: "", + subheading: "", + description: "", + alertHeading: "", + alertMessage: "", + iconFill: "", + customIcon: "", + showChildrenInline: false, + headerMaxLength: "", + subHeaderMaxLength: "", + sortFooterButtons: true, + maxFooterButtonsAllowed: 5, +}; + +const footerChildrenWithTwoButtons = [ +