From 96416c1cf630dd40227df2d0465175c2af848d46 Mon Sep 17 00:00:00 2001 From: Swathi-eGov <137176788+Swathi-eGov@users.noreply.github.com> Date: Fri, 31 May 2024 14:57:24 +0530 Subject: [PATCH] Dpg 2385 (#75) * updated success animation * updated success panel * updated ui-components version * updated css version --- react/css/README.md | 1 + react/css/package.json | 2 +- react/css/src/digitv2/components/panels.scss | 75 +- 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 | 4 +- .../ui-components/src/animations/success.json | 1630 ++++++++--------- react/ui-components/src/atoms/Panels.js | 16 +- react/ui-components/src/atoms/Stepper.js | 3 - .../src/hoc/stories/Animation.stories.js | 40 +- 15 files changed, 924 insertions(+), 860 deletions(-) diff --git a/react/css/README.md b/react/css/README.md index b21a6b34f2..61f05e4052 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.23 Updated Panel success animation styles 1.8.2-coreui.22 Updated tag, stepper styles 1.8.2-coreui.21 Updated Panel, Popup styles 1.8.2-coreui.20 Added Popup,Panel and Panel Card css diff --git a/react/css/package.json b/react/css/package.json index a098c9b3a5..6ea551815a 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.22", + "version": "1.8.2-coreui.23", "license": "MIT", "main": "dist/index.css", "author": "Jagankumar ", diff --git a/react/css/src/digitv2/components/panels.scss b/react/css/src/digitv2/components/panels.scss index bb55d0dadc..73fb113110 100644 --- a/react/css/src/digitv2/components/panels.scss +++ b/react/css/src/digitv2/components/panels.scss @@ -2,20 +2,40 @@ @apply flex flex-col items-center; gap: theme(digitv2.spacers.spacer6); - @media (min-width: 48rem) { - padding: theme(digitv2.spacers.spacer10); - } + &.success { + background-color: theme(digitv2.lightTheme.alert-success); - @media (min-width: 30.063rem) and (max-width: 47.938rem) { - padding: theme(digitv2.spacers.spacer10); - } + @media (min-width: 48rem) { + padding: theme(digitv2.spacers.spacer10); + padding-top: 0.703rem; + } + + @media (min-width: 30.063rem) and (max-width: 47.938rem) { + padding: theme(digitv2.spacers.spacer10); + padding-top: theme(digitv2.spacers.spacer4); + } + + @media (max-width: 30rem) { + padding: theme(digitv2.spacers.spacer8) theme(digitv2.spacers.spacer10); + padding-top: theme(digitv2.spacers.spacer4); + } - @media (max-width: 30rem) { - padding: theme(digitv2.spacers.spacer8) theme(digitv2.spacers.spacer10); } - &.success { - background-color: theme(digitv2.lightTheme.alert-success); + &.error, + &.with-svg { + + @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); + } } &.error { @@ -27,16 +47,37 @@ display: flex; flex-direction: column !important; - @media (min-width: 48rem) { - gap: theme(digitv2.spacers.spacer6); - } + &.success { - @media (min-width: 30.063rem) and (max-width: 47.938rem) { - gap: theme(digitv2.spacers.spacer5); + @media (min-width: 48rem) { + gap: 0.422rem; + } + + @media (min-width: 30.063rem) and (max-width: 47.938rem) { + gap: theme(digitv2.spacers.spacer2); + } + + @media (max-width: 30rem) { + gap: theme(digitv2.spacers.spacer2); + } } - @media (max-width: 30rem) { - gap: theme(digitv2.spacers.spacer4); + + &.error, + &.with-svg { + + @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 { diff --git a/react/example/package.json b/react/example/package.json index 94fe8d5419..d7a69046bd 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.31", + "@egovernments/digit-ui-components": "0.0.1-beta.32", "@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 011d2764d9..c93911c2a2 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 66f04069c1..35144f7597 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.31", + "@egovernments/digit-ui-components": "0.0.1-beta.32", "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 37801c9dcf..d974b6ba70 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.31", + "@egovernments/digit-ui-components": "0.0.1-beta.32", "@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 c53044abb7..f3e565fbe1 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.31", + "@egovernments/digit-ui-components": "0.0.1-beta.32", "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 bec3529fa1..e26683d33d 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.31", + "@egovernments/digit-ui-components": "0.0.1-beta.32", "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 88ed07b6b5..1c77736b9f 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.32 Updated Panel Success Animation 0.0.1-beta.31 Added new prop named activeSteps in Stepper 0.0.1-beta.30 Updated Panel Animation Styles 0.0.1-beta.29 Added PopUp,Panels and Panel Cards diff --git a/react/ui-components/package.json b/react/ui-components/package.json index 71a2cfdfdf..f99c189643 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.31", + "version": "0.0.1-beta.32", "license": "MIT", "main": "dist/index.js", "module": "dist/index.modern.js", @@ -51,7 +51,7 @@ "dist" ], "dependencies": { - "@egovernments/digit-ui-css": "1.8.2-coreui.22", + "@egovernments/digit-ui-css": "1.8.2-coreui.23", "@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/success.json b/react/ui-components/src/animations/success.json index 9b917c5210..43192f7084 100644 --- a/react/ui-components/src/animations/success.json +++ b/react/ui-components/src/animations/success.json @@ -1,364 +1,298 @@ { - "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 + "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 }, - { - "o": { - "x": 0.167, - "y": 0 - }, - "i": { - "x": 0.833, - "y": 1 - }, - "s": [ - 101, - 101, - 100 - ], - "t": 36 + "i": { + "x": 0.833, + "y": 1 }, - { - "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 - } + "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 }, - "ef": [], - "ind": 1 + "r": { + "a": 0, + "k": 0, + "ix": 10 + }, + "sa": { + "a": 0, + "k": 0 + }, + "o": { + "a": 0, + "k": 0, + "ix": 11 + } }, - { - "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": [], + "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 }, - "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 + "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 }, - { - "o": { - "x": 0.33299999999999996, - "y": 0 - }, - "i": { - "x": 0.15355432054499818, - "y": 0.9999999999999999 - }, - "s": [ - 2, - 8 - ], - "t": 42 + "i": { + "x": 0.667, + "y": 1 }, - { - "s": [ - 1.633, - 0 - ], - "t": 53.0000021587343 - } - ], - "ix": 2 - } + "s": [ + 0, + -21 + ], + "t": 35, + "ti": [ + 0, + 1.5 + ], + "to": [ + 0, + -1.5 + ] + }, + { + "s": [ + 0, + -30 + ], + "t": 53.0000021587343 + } + ], + "ix": 3 }, - { - "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 - } + "r": { + "a": 0, + "k": 0, + "ix": 4 }, - { - "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 - } + "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": "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 + { + "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 + } }, - "tr": { + { + "ty": "tr", "a": { "a": 0, "k": [ @@ -377,541 +311,607 @@ }, "sk": { "a": 0, - "k": 0 + "k": 0, + "ix": 4 }, "p": { "a": 0, "k": [ 0, - 0 + -8 ], "ix": 2 }, "r": { "a": 0, - "k": 45, - "ix": 4 + "k": 0, + "ix": 6 }, "sa": { "a": 0, - "k": 0 - }, - "so": { - "a": 0, - "k": 100, + "k": 0, "ix": 5 }, - "eo": { + "o": { "a": 0, "k": 100, - "ix": 6 + "ix": 7 } } - } - ], - "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": { + ] + }, + { + "ty": "rp", + "bm": 0, + "hd": false, + "mn": "ADBE Vector Filter - Repeater", + "nm": "Repeater 1", + "ix": 2, + "m": 1, + "c": { "a": 0, - "k": [ - 0, - 0, - 0 - ], + "k": 8, "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": { + "o": { "a": 0, "k": 0, - "ix": 10 - }, - "sa": { - "a": 0, - "k": 0 + "ix": 2 }, - "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": { + "tr": { + "a": { "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 - } + 0, + 0 ], - "ix": 2 + "ix": 1 }, - "o": { + "s": { "a": 0, - "k": 0, + "k": [ + 100, + 100 + ], "ix": 3 }, - "s": { - "a": 1, + "sk": { + "a": 0, + "k": 0 + }, + "p": { + "a": 0, "k": [ - { - "o": { - "x": 0.742, - "y": 0 - }, - "i": { - "x": 0.363, - "y": 1 - }, - "s": [ - 100 - ], - "t": 17 - }, - { - "s": [ - 0 - ], - "t": 45.0000018328876 - } + 0, + 0 ], - "ix": 1 + "ix": 2 }, - "m": 1 - }, - { - "ty": "st", - "bm": 0, - "hd": false, - "mn": "ADBE Vector Graphic - Stroke", - "nm": "Stroke 1", - "lc": 1, - "lj": 1, - "ml": 4, - "o": { + "r": { "a": 0, - "k": 100, + "k": 45, "ix": 4 }, - "w": { + "sa": { "a": 0, - "k": 4, + "k": 0 + }, + "so": { + "a": 0, + "k": 100, "ix": 5 }, - "c": { + "eo": { "a": 0, - "k": [ - 0.9804, - 0.9804, - 0.9804 - ], - "ix": 3 + "k": 100, + "ix": 6 } } - ], - "ind": 3, - "parent": 1 + } + ], + "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 + } }, - { - "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": { + "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": [ - 0, - 0, - 0 + { + "o": { + "x": 0.714, + "y": 0 + }, + "i": { + "x": 0.351, + "y": 1 + }, + "s": [ + 100 + ], + "t": 10 + }, + { + "s": [ + 23 + ], + "t": 40.0000016292334 + } ], - "ix": 1 + "ix": 2 }, - "s": { + "o": { "a": 0, + "k": 0, + "ix": 3 + }, + "s": { + "a": 1, "k": [ - 100, - 100, - 100 + { + "o": { + "x": 0.742, + "y": 0 + }, + "i": { + "x": 0.363, + "y": 1 + }, + "s": [ + 100 + ], + "t": 17 + }, + { + "s": [ + 0 + ], + "t": 45.0000018328876 + } ], - "ix": 6 + "ix": 1 }, - "sk": { + "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": 0 + "k": 100, + "ix": 4 }, - "p": { + "w": { + "a": 0, + "k": 4, + "ix": 5 + }, + "c": { "a": 0, "k": [ - 0, - 0, - 0 + 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 - }, - "r": { + } + }, + { + "ty": "st", + "bm": 0, + "hd": false, + "mn": "ADBE Vector Graphic - Stroke", + "nm": "Stroke 1", + "lc": 1, + "lj": 1, + "ml": 4, + "o": { "a": 0, - "k": 0, - "ix": 10 + "k": 100, + "ix": 4 }, - "sa": { + "w": { "a": 0, - "k": 0 + "k": 2, + "ix": 5 }, - "o": { + "c": { "a": 0, - "k": 100, - "ix": 11 + "k": [ + 0.9804, + 0.9804, + 0.9804 + ], + "ix": 3 } }, - "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 - ] - ] + { + "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 }, - "ix": 2 - } + { + "s": [ + 100 + ], + "t": 30.0000012219251 + } + ], + "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 - } + "o": { + "a": 0, + "k": 0, + "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": { + "a": 1, + "k": [ + { + "o": { + "x": 0.742, + "y": 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 + "i": { + "x": 0.363, + "y": 1 }, - { - "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 + "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/Panels.js b/react/ui-components/src/atoms/Panels.js index c881782fd1..5c81905639 100644 --- a/react/ui-components/src/atoms/Panels.js +++ b/react/ui-components/src/atoms/Panels.js @@ -64,7 +64,17 @@ const Panels = (props) => { height: props.animationProps.height, }; } - + if(props?.type === "success" && !props?.showAsSvg){ + switch (deviceType) { + case "mobile": + return { width: 80, height: 80 }; + case "tablet": + return { width: 100, height: 100 }; + case "desktop": + default: + return { width: 120, height: 120 }; + } + } switch (deviceType) { case "mobile": return { width: 56, height: 56 }; @@ -83,10 +93,10 @@ const Panels = (props) => {
-
+
{props?.type === "success" ? ( props?.customIcon ? ( icon diff --git a/react/ui-components/src/atoms/Stepper.js b/react/ui-components/src/atoms/Stepper.js index d3d4fe3e3a..3958ccbe3a 100644 --- a/react/ui-components/src/atoms/Stepper.js +++ b/react/ui-components/src/atoms/Stepper.js @@ -17,9 +17,6 @@ const Stepper = ({ }) => { const { t } = useTranslation(); - // const firstInactiveIndex = isActive.indexOf(false); - - const [isMobileView, setIsMobileView] = useState( (window.innerWidth / window.innerHeight <= 9/16) ); diff --git a/react/ui-components/src/hoc/stories/Animation.stories.js b/react/ui-components/src/hoc/stories/Animation.stories.js index 5f2cd52066..2a32b09edf 100644 --- a/react/ui-components/src/hoc/stories/Animation.stories.js +++ b/react/ui-components/src/hoc/stories/Animation.stories.js @@ -16,33 +16,47 @@ export default { animationData: { control: { type: "object" }, }, - width:{ - control:"number" + width: { + control: "number", + }, + height: { + control: "number", }, - height:{ - control:"number" - } }, }; -const Template = (args) =>
; +const Template = (args) => ( +
+ {" "} + {" "} +
+); const commonArgs = { - animationData:{}, - loop:true, - autoplay:true, - width:56, - height:56 + animationData: {}, + loop: true, + autoplay: true, + width: 74, + height: 74, }; export const SuccessAnimation = Template.bind({}); SuccessAnimation.args = { ...commonArgs, - animationData:successAnimation + animationData: successAnimation, }; export const ErrorAnimation = Template.bind({}); ErrorAnimation.args = { ...commonArgs, - animationData:errorAnimation + animationData: errorAnimation, };