diff --git a/.eslintrc.js b/.eslintrc.js
index d044e9dbe7f0116e07d124bddcd786d1e411e75b..9d68cf3abd23e188c8e6ce7686ef59070cd408d9 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -5,6 +5,7 @@ module.exports = {
'plugin:react-hooks/recommended',
'prettier', // Uses eslint-config-prettier to disable ESLint rules from @typescript-eslint/eslint-plugin that would conflict with prettier
'plugin:prettier/recommended', // Enables eslint-plugin-prettier and displays prettier errors as ESLint errors. Make sure this is always the last configuration in the extends array.
+ 'plugin:jsx-a11y/recommended',
],
overrides: [
{
@@ -28,6 +29,7 @@ module.exports = {
'@typescript-eslint/prefer-as-const': 'error',
'@typescript-eslint/await-thenable': 'error',
'@typescript-eslint/no-var-requires': 'off',
+ '@typescript-eslint/no-unnecessary-type-assertion': 'error',
// JSDOC extends overrides: disable some of extends rules
// JSdoc is not always needed
@@ -40,6 +42,9 @@ module.exports = {
// Allow some params to be described and some to be omitted
'jsdoc/check-param-names': 0,
+
+ // a11y label fix, nesting is enough
+ 'jsx-a11y/label-has-associated-control': 0,
},
},
{
@@ -50,7 +55,7 @@ module.exports = {
},
},
],
- plugins: ['@typescript-eslint', 'react', 'react-hooks', 'jest'],
+ plugins: ['@typescript-eslint', 'react', 'react-hooks', 'jest', 'jsx-a11y'],
parser: '@typescript-eslint/parser', // Specifies the ESLint parser
parserOptions: {
ecmaVersion: 2020, // Allows for the parsing of modern ECMAScript features
diff --git a/.gitlab/merge_request_templates/[QA] Ecolyo.md b/.gitlab/merge_request_templates/[QA] Ecolyo.md
index 9ead54a6c85a35271412decffa5fd9b10f4d3bae..b29f263bfca947400863a8d25bebd477580493bd 100644
--- a/.gitlab/merge_request_templates/[QA] Ecolyo.md
+++ b/.gitlab/merge_request_templates/[QA] Ecolyo.md
@@ -4,76 +4,72 @@
# Cahier de recette pour la version _x.x.x_
-🚀 _Milestone(s) concernée(s)_ :
-
-## Tests de non régression
-
-### [Nouvelle instance](https://ecolyo.ecolyo-x-x.cozy.self-data.alpha.grandlyon.com/#/)
-
----
+## Tests de non régression sur la [Nouvelle instance](https://ecolyo.ecolyo-x-x.cozy.self-data.alpha.grandlyon.com/#/)
1. **Onboarding**
- [ ] Le chargement de l'application fonctionne correctement
- - [ ] La page tutoriel est présentée
+ - [ ] La modal "Vous êtes à mis chemin" est présentée
- [ ] Les CGU sont demandées
- ***
+
2. **Comportement sans connecteur connecté**
- [ ] La page conso pousse à la connexion
- [ ] La page analyse pousse à la connexion
- ***
+
3. **Lancement des connecteurs**
- [ ] SGE
- - [ ] GRDF
- [ ] EPGL
- ***
+ - [ ] GRDF
+
4. **Page Défis**
- [ ] L'utilisateur peut lancer le 1er défi
- ***
-5. **Analyse et conso**
+
+5. **Conso**
+
+**Premier lancement**
- [ ] La profondeur de données va jusqu'à 1 an dans la conso pour les pas de temps journalier
- - [ ] La profondeur de données à la 1/2h va jusqu'à 1 semaine au premier lancement, puis 1 mois le lendemain.
- - [ ] La profondeur de données à la 1/2h va jusqu'à 1 mois le lendemain.
- - [ ] La profondeur de données va jusqu'à 3 mois antérieur dans l'analyse
+ - [ ] La profondeur de données à la 1/2h (elec) va jusqu'à 1 semaine
+
+**Le landememain**
+ - [ ] La profondeur de données va jusqu'à 3 ans
+ - [ ] La profondeur de données à la 1/2h (elec) va jusqu'à 1 mois
+
+6. **Analyse**
+ - [ ] La profondeur de données va jusqu'à 3 mois antérieur
- [ ] Les modules de l'analyse sont tous fonctionnels (à l'exception du special elec qui devra être déclenché par un service)
- ***
-6. **Page Options**
+
+7. **Page Astuces**
+ - [ ] Chargement de la base des écogestes dans "Toutes"
+ - [ ] Lancement du module du choix des écogestes Ok
+ - [ ] Le profil raccourci est proposé si le profil complet n'est pas renseigné
+
+8. **Page Options**
- [ ] L'utilisateur est inscrit par défaut à la newsletter
- [ ] L'utilisateur n'est pas exclu des statistiques d'usage MATOMO
- [ ] L'accès au SAU est fonctionnel
- [ ] Les mentions légales et les CGU sont accessibles
- [ ] La page d'accessibilité est accessible
- - [ ] L'export de données fonctionne quand un connecteur est rattaché
- ***
-7. **Page Astuces**
- - [ ] Chargement de la base des écogestes dans "Toutes"
- - [ ] Lancement du module du choix des écogestes Ok
- - [ ] Le profil raccourci est proposé si le profil complet n'est pas renseigné
- ***
-8. **Icône raccourci**
+ - [ ] L'export de données fonctionne quand un connecteur est connecté
+
+
+9. **Icône raccourci**
- [ ] L'utilisateur peut ajouter l'application en raccourci (pwa android)
- [ ] L'utilisateur peut ajouter l'application en raccourci (pwa iPhone)
- ***
-9. **Autres**
- - [ ] Les informations de navigation remontent dans le matomo recette
- > 💡 Aller consulter des écogestes en particulier, repérer leurs id et vérifier dans le détails des pages sur matomo
-
----
-### [Instance historique](https://ecolyo.ecolyodemo.cozy.self-data.alpha.grandlyon.com)
+10. **Autres**
+ - [ ] Les informations de navigation remontent dans le matomo recette
+ > 💡 Aller consulter des écogestes en particulier, repérer leurs id et vérifier sur matomo dans "Comportement / Pages"
----
-1. **Migration**
- - [ ] Si une migration était nécessaire, vérifier quand c'est possible qu'elle a bien eu lieu
+## Tests des nouvelles fonctionnalités
----
+- [ ] 📝 _À mettre à jour selon les derniers développements_
-## Tests des nouvelles fonctionnalités
+## Migrations [Instance historique](https://ecolyo.ecolyodemo.cozy.self-data.alpha.grandlyon.com)
-📝 _À mettre à jour selon les derniers développements_
+- [ ] Si une migration était nécessaire, vérifier quand c'est possible qu'elle a bien eu lieu
## Autres évolutions associées
🔄 _connecteurs, backoffice..._
-# 🚀🚀
+## To release 🚀🚀
diff --git a/.vscode/settings.json b/.vscode/settings.json
index e0492b20994d9ddccd35028d4ca65a1fec28ff0d..bebf60a861ec7d68cb7291e9ffda595b275add63 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -121,6 +121,7 @@
"multifluid",
"MULTIFLUID",
"mutlifluid",
+ "notif",
"numerique",
"oeufs",
"picto",
@@ -141,7 +142,10 @@
"testid",
"Tétris",
"timestep",
+ "timesteps",
"TIMESTEP",
+ "UNCOMING",
+ "Unstarted",
"UNSTARTED",
"usageevent",
"Usain",
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 17dcda450d2b685a2cb80f53ed2a9109e59316e9..fdc49012ef7846932913e7a861a16485c54745c8 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,6 +2,31 @@
All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
+## [2.7.0](https://forge.grandlyon.com/web-et-numerique/factory/llle_project/ecolyo/compare/v2.6.0...v2.7.0) (2023-11-29)
+
+
+### Features
+
+* added ecolyo links in custom popups ([9180e37](https://forge.grandlyon.com/web-et-numerique/factory/llle_project/ecolyo/commit/9180e37ab324100e4325c57a8dbef1dcbec90f2e))
+* app EU logo ([f5d9edb](https://forge.grandlyon.com/web-et-numerique/factory/llle_project/ecolyo/commit/f5d9edb800b29afaaaeccb3e00ad9a25b299bcfb))
+* **conso:** change default date to today ([0500c95](https://forge.grandlyon.com/web-et-numerique/factory/llle_project/ecolyo/commit/0500c950886ff95d8d1c8fb25c6e1b98f5b7a6c1))
+* **conso:** placeholder bar multi fluid ([20e6094](https://forge.grandlyon.com/web-et-numerique/factory/llle_project/ecolyo/commit/20e60942243eb68d496e2f250c2f65d460483d33))
+* **ecogestures:** add new ecogetures ([2029ee5](https://forge.grandlyon.com/web-et-numerique/factory/llle_project/ecolyo/commit/2029ee5d20ab84693f7458a9696543762b2e37e7))
+* **mail:** add event icon ([0e6bb23](https://forge.grandlyon.com/web-et-numerique/factory/llle_project/ecolyo/commit/0e6bb23f5f6648f2aa652b04ba395daa380d5a30))
+
+
+### Bug Fixes
+
+* **accessibility:** add a11y linting and fix errors ([bded85a](https://forge.grandlyon.com/web-et-numerique/factory/llle_project/ecolyo/commit/bded85a6c94d3dcab5a3546cb16804587e659619))
+* **conso:** adjust placeholder values between 0 & 1 ([97460fe](https://forge.grandlyon.com/web-et-numerique/factory/llle_project/ecolyo/commit/97460fea0f9449bb10f205365fb1b03e1f18b359))
+* **customPopup:** center title ([6bc8137](https://forge.grandlyon.com/web-et-numerique/factory/llle_project/ecolyo/commit/6bc81378b2456d1e18c2bdf38b7a8dc4ad850f6e))
+* **deps:** update dependency cozy-client to v40 ([76298ac](https://forge.grandlyon.com/web-et-numerique/factory/llle_project/ecolyo/commit/76298acf111c0ae6c833144f87ba4a8900cae280))
+* **deps:** update dependency cozy-ui to v81.9.0 ([8b55ca8](https://forge.grandlyon.com/web-et-numerique/factory/llle_project/ecolyo/commit/8b55ca87553f2e4ded7a563b1b233c60b2d14203))
+* **fluidprices:** removed parallelization ([c0f665b](https://forge.grandlyon.com/web-et-numerique/factory/llle_project/ecolyo/commit/c0f665be420277c8134b6f2ed54ac20ae9076cf8))
+* randomize cron seconds for triggers ([c6c0592](https://forge.grandlyon.com/web-et-numerique/factory/llle_project/ecolyo/commit/c6c05929f863e4b956f129a3464ed50fc0136074))
+* **ui:** margin button today ([c900d7a](https://forge.grandlyon.com/web-et-numerique/factory/llle_project/ecolyo/commit/c900d7aa69e16044539fe4e55a8cde334005ac7a))
+* **ui:** primary button above secondary ([41b3fef](https://forge.grandlyon.com/web-et-numerique/factory/llle_project/ecolyo/commit/41b3fefea014da0fd30dad33968dab1abdf07272))
+
## [2.6.0](https://forge.grandlyon.com/web-et-numerique/factory/llle_project/ecolyo/compare/v2.5.1...v2.6.0) (2023-10-02)
diff --git a/Dockerfile b/Dockerfile
deleted file mode 100644
index 23abf5b04f68f2bbd74a521628371cb747b927d0..0000000000000000000000000000000000000000
--- a/Dockerfile
+++ /dev/null
@@ -1,19 +0,0 @@
-FROM node:10.15.0 AS builder
-ARG BUILD_CMD
-
-# Add application files
-COPY ./package.json /app/package.json
-WORKDIR /app
-# Copy the project
-COPY . /app
-# Install npm dependencies
-RUN yarn install
-# Build
-RUN yarn build
-
-FROM busybox
-
-# Add application files
-RUN mkdir -p /var/www/ecolyo
-
-COPY --from=builder /app/build /var/www/ecolyo
diff --git a/jest.config.js b/jest.config.js
index 6358f0010306c4fbb8435f2f88795297250e0e5e..f8fbe1db986d3b9223e1a84dfb17e6d80d5c14db 100644
--- a/jest.config.js
+++ b/jest.config.js
@@ -2,7 +2,7 @@
const config = {
testURL: 'http://localhost/',
moduleFileExtensions: ['js', 'jsx', 'ts', 'tsx', 'json', 'styl'],
- setupFiles: ['<rootDir>/tests/jestLib/setupTests.ts'],
+ setupFilesAfterEnv: ['<rootDir>/tests/jestLib/setupTests.ts'],
moduleDirectories: ['<rootDir>', 'node_modules'],
modulePaths: ['<rootDir>/src'],
moduleNameMapper: {
diff --git a/manifest.webapp b/manifest.webapp
index bc9e43b6e7eb3dcf624e2024d010bf1ccf4078e3..dfbb1ae27a3c1566cd6e47d2e8c58b55aaa271e6 100644
--- a/manifest.webapp
+++ b/manifest.webapp
@@ -3,7 +3,7 @@
"slug": "ecolyo",
"icon": "icon.svg",
"categories": ["energy"],
- "version": "2.6",
+ "version": "2.7.0",
"licence": "AGPL-3.0",
"editor": "Métropole de Lyon",
"default_locale": "fr",
diff --git a/package.json b/package.json
index 77321704923d9d63390cece65f1fa506bf089f0a..d8f47b78ff98f59b1feb564ba46919834f317bfd 100644
--- a/package.json
+++ b/package.json
@@ -1,18 +1,17 @@
{
"name": "ecolyo",
- "version": "2.6.0",
+ "version": "2.7.0",
"engines": {
- "node": ">=16.0.0"
+ "node": "16"
},
"scripts": {
"build": "yarn run build:css && yarn run build:browser",
- "build:browser": "cs build --browser ",
+ "build:analyse": "cs build --analyzer",
+ "build:browser": "cs build --browser",
"build:cs": "build:browser",
"build:css": "sass -c ./src/styles:build",
"build-dev": "yarn run build:css && yarn run build-dev:browser",
"build-dev:browser": "cs build --browser --config app.config.alpha.js",
- "build-dev:mobile": "cs build --mobile --config app.config.alpha.js",
- "build:mobile": "cs build --mobile",
"cozyPublish": "git fetch origin ${DEPLOY_BRANCH:-build}:${DEPLOY_BRANCH:-build} && cs publish --token $REGISTRY_TOKEN --build-commit $(git rev-parse ${DEPLOY_BRANCH:-build})",
"deploy": "git-directory-deploy --directory build/ --branch ${DEPLOY_BRANCH:-build}",
"deploy-dev": "git-directory-deploy --directory build/ --branch ${DEPLOY_BRANCH:-build-dev}",
@@ -20,17 +19,14 @@
"lint": "yarn lint:js",
"lint:js": "eslint src -c .eslintrc.js --fix",
"load-data": "cd test && importData.bat",
- "prebuild": "yarn lint",
"prepare": "husky install",
"release": "standard-version --no-verify",
- "start": "npm-run-all -p start:cs",
- "start:cs": "cs start --hot --browser --no-stack ",
- "start-stack": "cs start --hot --browser --stack",
+ "start": "cs start --browser",
+ "start:stack": "cs start --browser --stack",
"test": "cs test --verbose --coverage",
"tx": "tx pull --all || true",
"watch": "yarn watch:browser",
- "watch:browser": "cs start --browser",
- "watch:mobile": "cs watch --mobile"
+ "watch:browser": "cs watch --browser"
},
"repository": {
"type": "git",
@@ -55,7 +51,7 @@
"@simbathesailor/use-what-changed": "^2.0.0",
"classnames": "^2.3.2",
"cozy-bar": "8.15.0",
- "cozy-client": "35.6.0",
+ "cozy-client": "40.6.0",
"cozy-device-helper": ">=2.1.0",
"cozy-flags": ">2.8.6",
"cozy-harvest-lib": "9.26.14",
@@ -64,7 +60,7 @@
"cozy-logger": ">1.7.0",
"cozy-realtime": "4.2.8",
"cozy-scripts": "6.3.10",
- "cozy-ui": "81.5.0",
+ "cozy-ui": "81.9.0",
"d3": "^6.0.0",
"detect-browser": "^5.1.1",
"file-saver": "^2.0.5",
@@ -78,6 +74,7 @@
"object-hash": "^3.0.0",
"react": "16.14.0",
"react-dom": "16.14.0",
+ "react-inspector": "^5.1",
"react-redux": "^8.1.2",
"react-router-dom": "^6.6.1",
"react-swipeable-views": "0.14.0",
@@ -88,10 +85,12 @@
},
"devDependencies": {
"@babel/preset-typescript": "^7.7.4",
+ "@testing-library/dom": "^9.3.3",
+ "@testing-library/jest-dom": "^6.1.3",
+ "@testing-library/react": "^12.1.0",
"@testing-library/react-hooks": "^8.0.0",
+ "@testing-library/user-event": "^14.5.1",
"@types/d3": "^6.0.0",
- "@types/enzyme": "^3.10.8",
- "@types/enzyme-adapter-react-16": "^1.0.6",
"@types/file-saver": "^2.0.5",
"@types/history": "^5.0.0",
"@types/jest": "^29.4.0",
@@ -108,19 +107,17 @@
"@typescript-eslint/parser": "^5.56.0",
"axios": "^1.3.0",
"babel-polyfill": "^6.26.0",
- "babel-preset-cozy-app": "2.0.3",
+ "babel-preset-cozy-app": "2.1.0",
"copy-webpack-plugin": "6.4.1",
- "cozy-app-publish": "^0.31.0",
+ "cozy-app-publish": "^0.33.0",
"cozy-jobs-cli": "^2.0.0",
- "enzyme": "3.11.0",
- "enzyme-adapter-react-16": "1.15.6",
- "enzyme-to-json": "^3.6.2",
"eslint": "^8.49.0",
- "eslint-config-prettier": "^8.8.0",
+ "eslint-config-prettier": "^9.0.0",
"eslint-plugin-jest": "^27.2.3",
"eslint-plugin-jsdoc": "^46.8.2",
- "eslint-plugin-prettier": "^4.2.1",
- "eslint-plugin-react": "7.32.2",
+ "eslint-plugin-jsx-a11y": "^6.8.0",
+ "eslint-plugin-prettier": "^5.0.0",
+ "eslint-plugin-react": "7.33.2",
"eslint-plugin-react-hooks": "^4.6.0",
"git-directory-deploy": "1.5.1",
"husky": "^8.0.1",
@@ -131,8 +128,7 @@
"luxon": "^3.0.0",
"mjml": "^4.10.2",
"mjml-web": "^4.10.0",
- "npm-run-all": "^4.1.5",
- "prettier": "^2.8.5",
+ "prettier": "^3.0.0",
"prettier-eslint": "^15.0.1",
"raw-loader": "^4.0.2",
"react-test-renderer": "16.14.0",
diff --git a/src/assets/icons/email/logo-2030.png b/src/assets/icons/email/logo-2030.png
new file mode 100644
index 0000000000000000000000000000000000000000..9b3931dab6c1ca57fa41ea6f00e2f9632ec39821
Binary files /dev/null and b/src/assets/icons/email/logo-2030.png differ
diff --git a/src/assets/icons/email/logo-eu-funded.png b/src/assets/icons/email/logo-eu-funded.png
new file mode 100644
index 0000000000000000000000000000000000000000..a6ba41a6433477c8839cae535dbf3951a596f094
Binary files /dev/null and b/src/assets/icons/email/logo-eu-funded.png differ
diff --git a/src/assets/icons/email/logo-tiga-white.png b/src/assets/icons/email/logo-tiga-white.png
deleted file mode 100644
index 6e6cfed03e2884e875e7eaa20dc387579739e561..0000000000000000000000000000000000000000
Binary files a/src/assets/icons/email/logo-tiga-white.png and /dev/null differ
diff --git a/src/assets/icons/visu/ecogesture/ECOGESTURE0040.svg b/src/assets/icons/visu/ecogesture/ECOGESTURE0040.svg
index 73861c2dd1587de8ee94405b88b899ec112ef7b7..355063d907fde82b838a60245205766e3dcaca19 100644
--- a/src/assets/icons/visu/ecogesture/ECOGESTURE0040.svg
+++ b/src/assets/icons/visu/ecogesture/ECOGESTURE0040.svg
@@ -1,63 +1,101 @@
-<svg width="50" height="50" viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg">
- <circle r=".965" transform="matrix(-1 0 0 1 35.11 11.875)" fill="#90C3D3"/>
- <path d="M35.382 12.606a.964.964 0 0 1-.754-1.566.964.964 0 1 0 1.236 1.437.96.96 0 0 1-.482.13Z" fill="#5E8693"/>
- <path fill="#A2A2A2" d="M36.075 28.998h.5v2.5h-.5zm1 .301h.5v2.5h-.5zm1 .299h.5v2.5h-.5zm1 .4h.5v2.5h-.5zm1 .301h.5v2.5h-.5zm1 .399h.5v2.5h-.5zm1 .3h.5v2.5h-.5zm1 .301h.5v2.5h-.5z"/>
- <path fill="#484848" d="M39.675 23.498h.5v2.5h-.5zm1 .301h.5v2.5h-.5zm1 .299h.5v2.5h-.5zm1 .4h.5v2.5h-.5zm1 .301h.5v2.5h-.5zm1 .399h.5v2.5h-.5zm1 .3h.5v2.5h-.5zm1 .301h.5v2.5h-.5z"/>
- <path d="m42.172 14.019-.044 1.223.31 1.569 3.593.438c-.073-.188-.175-.632 0-.907.147-.231.364-1.127.497-1.747a5.216 5.216 0 0 0-.941-.44l-1.03-.376-1.776-.437-.609.677Z" fill="#C4C4C4"/>
- <path d="M47.446 16.85v-.315c0-.892 0-1.614-1.57-2.267l-.804.434c.374.446.374.934.374 1.487v.018l2 .643Z" fill="#494949"/>
- <path d="m45.446 24.193 2 .691v2l-2-.691v-2Z" fill="#C4C4C4"/>
- <path d="m45.446 22.193 2 .691v2l-2-.691v-2Zm-2 1.308 2 .692v2l-2-.692v-2Z" fill="#494949"/>
- <path d="m43.446 21.501 2 .692v2l-2-.692v-2Zm2-1.261 2 .691v2l-2-.692v-2Zm0-4.01 2 .692v2l-2-.692v-2Z" fill="#C4C4C4"/>
- <path d="m45.446 18.24 2 .691v2l-2-.692v-2Zm-2 1.308 2 .692v2l-2-.692v-2Zm0-4.009 2 .692v2l-2-.692v-2Z" fill="#494949"/>
- <path d="m43.446 17.548 2 .692v2l-2-.692v-2Z" fill="#C4C4C4"/>
- <path opacity=".35" d="m42.128 15.26.044-1.235.61-.683 1.776.441 1.029.38c.102.037.198.075.289.114 1.516.636 1.568 1.338 1.57 2.196v10.538l-4-1.396v-8.648l-1.009-.124-.31-1.583Z" fill="#000"/>
- <path fill-rule="evenodd" clip-rule="evenodd" d="M47.89 17.04a.5.5 0 0 1-.648.281l-10.054-3.954a.5.5 0 1 1 .366-.93l10.054 3.954a.5.5 0 0 1 .283.648Z" fill="#90C3D3"/>
- <path d="m48.76 17.91-2.982-1.173a.5.5 0 0 1 .239-.962l-9.995-3.932a.5.5 0 0 0-.366.93l12.977 5.105a.499.499 0 0 0 .127.032Z" fill="#5E8693"/>
- <circle r=".981" transform="matrix(-1 0 0 1 47.656 16.93)" fill="#90C3D3"/>
- <path d="M47.931 17.673a.98.98 0 0 1-.766-1.593.98.98 0 1 0 1.257 1.462.977.977 0 0 1-.49.13Z" fill="#5E8693"/>
- <ellipse cx="47.931" cy="16.492" rx=".428" ry=".29" transform="rotate(23.576 47.931 16.492)" fill="#fff"/>
- <ellipse cx="35.307" cy="11.327" rx=".305" ry=".207" transform="rotate(23.576 35.307 11.327)" fill="#fff"/>
- <path d="m41.9 29.807 2 .691v2l-2-.691v-2Z" fill="#fff"/>
- <path d="m41.9 27.807 2 .691v2l-2-.691v-2Z" fill="#494949"/>
- <path d="m37.9 28.412 2 .692v2l-2-.692v-2Z" fill="#fff"/>
- <path d="m37.9 26.412 2 .692v2l-2-.692v-2Zm2 2.703 2 .692v2l-2-.692v-2Z" fill="#494949"/>
- <path d="m39.9 27.115 2 .692v2l-2-.692v-2Z" fill="#fff"/>
- <path d="m35.9 27.72 2 .693v2l-2-.692v-2Z" fill="#494949"/>
- <path d="m35.9 25.72 2 .693v2l-2-.692v-2Zm6 .087 2 .691v2l-2-.691v-2Z" fill="#fff"/>
- <path d="m41.9 23.807 2 .691v2l-2-.691v-2Z" fill="#494949"/>
- <path d="m37.9 24.412 2 .692v2l-2-.692v-2Z" fill="#fff"/>
- <path d="m37.9 22.412 2 .692v2l-2-.692v-2Zm2 2.703 2 .692v2l-2-.692v-2Z" fill="#494949"/>
- <path d="m39.9 23.115 2 .692v2l-2-.692v-2Z" fill="#fff"/>
- <path d="m35.9 23.72 2 .693v2l-2-.692v-2Z" fill="#494949"/>
- <path d="m35.9 21.72 2 .693v2l-2-.692v-2Zm6 .087 2 .691v2l-2-.691v-2Z" fill="#fff"/>
- <path d="m41.9 19.807 2 .691v2l-2-.691v-2Z" fill="#494949"/>
- <path d="m37.9 20.412 2 .692v2l-2-.692v-2Z" fill="#fff"/>
- <path d="m37.9 18.412 2 .692v2l-2-.692v-2Zm2 2.703 2 .692v2l-2-.692v-2Z" fill="#494949"/>
- <path d="m39.9 19.115 2 .692v2l-2-.692v-2Z" fill="#fff"/>
- <path d="m35.9 19.72 2 .693v2l-2-.692v-2Z" fill="#494949"/>
- <path d="m35.9 17.72 2 .693v2l-2-.692v-2Zm6 .087 2 .691v2l-2-.691v-2Z" fill="#fff"/>
- <path d="m41.9 15.807 2 .691v2l-2-.691v-2Z" fill="#494949"/>
- <path d="m37.9 16.412 2 .692v2l-2-.692v-2Z" fill="#fff"/>
- <path d="m37.9 14.412 2 .692v2l-2-.692v-2Zm2 2.703 2 .692v2l-2-.692v-2Z" fill="#494949"/>
- <path d="m39.9 15.115 2 .692v2l-2-.692v-2Z" fill="#fff"/>
- <path d="m35.9 15.72 2 .693v2l-2-.692v-2Z" fill="#494949"/>
- <path d="m35.9 13.72 2 .692v2l-2-.691v-2Z" fill="#fff"/>
- <path d="M35.893 13.66v.052l1.986.7c.015-1.276.842-2.277 2.36-2.244a37.251 37.251 0 0 0-1.918-.786c-1.575-.066-2.428.965-2.428 2.278Zm4.007 1.516v.052l1.985.7c.015-1.276.843-2.277 2.36-2.244a37.251 37.251 0 0 0-1.918-.786c-1.575-.065-2.428.966-2.428 2.278Z" fill="#494949"/>
- <path d="M37.9 14.363v.052l1.985.7c.015-1.276.843-2.277 2.36-2.244a37.251 37.251 0 0 0-1.918-.786c-1.575-.065-2.428.966-2.428 2.278Zm4.005 1.517v.052l1.986.7c.016-1.276.843-2.277 2.36-2.244a37.251 37.251 0 0 0-1.918-.786c-1.575-.066-2.428.965-2.428 2.278Z" fill="#fff"/>
- <path d="m39.118 12.372-2.01-.778c.338-.154.743-.232 1.213-.212.576.211 1.45.448 2.148.75-.43-.008-1.035.1-1.351.24Zm3.98 1.528-2.01-.777c.343-.162.758-.245 1.24-.225.575.212 1.365.432 2.063.735a3.29 3.29 0 0 0-1.293.267Z" fill="#fff"/>
- <path d="m41.052 13.109-2.01-.777c.352-.177.782-.268 1.285-.247.576.211 1.22.484 1.917.786a2.573 2.573 0 0 0-1.192.238Zm1.961.758c.358-.189.8-.287 1.32-.265.576.211 1.22.483 1.917.786-.48-.01-.891.083-1.23.255l-2.007-.776Z" fill="#494949"/>
- <g opacity=".65" fill-rule="evenodd" clip-rule="evenodd" fill="#fff">
- <path d="M24.48 20.523h5.95v-.5h-5.95v.5Z"/>
- <path opacity=".6" d="M12.965 22.605h7.872v-.5h-7.872v.5ZM3.109 32.78h9.856v-.5H3.109v.5Z"/>
- <path d="M3.109 27.099h7.871v-.5H3.11v.5Zm12.718 14.572H23.7v-.5h-7.872v.5Z"/>
- <path opacity=".6" d="M19.024 43.623h5.456v-.5h-5.456v.5Z"/>
- </g>
- <ellipse rx="2.037" ry="2.135" transform="scale(-1 1) rotate(-20.772 53.328 84.101)" fill="#EEAF74"/>
- <path d="M27.513 22.246c.8.35 1.531 1.875.781 1.438 0 1.9-1.232 1.663-1.732 1.746-.291-.229-.905-.809-1.455-1.059-.688-.312-1.563-.5-3.063-.5.75-.25 1.771-.52 2.188-.625l-2.188-1h3.063l-1.563-1.125c1 .125 3.169.775 3.969 1.125Z" fill="#FFEB33"/>
- <path d="M28.497 23.284c.146.296.163.522-.042.471a3.18 3.18 0 0 0 .042-.471Zm-.277 1.113c-.23.936-.932.98-1.406 1.01-.095.006-.18.012-.252.023-.064-.05-.144-.118-.236-.196-.324-.273-.79-.668-1.22-.863-.687-.312-1.562-.5-3.062-.5.448-.149.993-.306 1.448-.43.788.076 1.347.232 1.818.446.428.195.929.395 1.253.668.091.078.213.07.324.125.13.067.358.08.453.075.373-.024.5-.047.88-.358Zm-3.97-1.147-2.206-1.004h.472l2.968.778c-.178.045-.902.136-1.234.227Zm.857-1.004 1.219.138-1.873-1.094c-.472-.12-.591-.129-.909-.169l1.563 1.125Z" fill="#F0C429"/>
- <path d="M33.496 18.978a.25.25 0 0 0-.34.1l-.896 1.642a2.521 2.521 0 0 0-.145-.342 17.905 17.905 0 0 1-.288-.545.25.25 0 0 0-.447.224c.04.079.153.299.297.562.057.103.141.34.227.621.049.158.095.32.134.464-.182.682-.433 1.233-.63 1.668-.09.198-.17.373-.227.525-.157.417-.803 1.649-1.106 2.212-.5.13-1.679.313-2.407 0-.337-.144-.799-.484-1.303-.856-.858-.633-1.839-1.356-2.536-1.356-.327 0-.665-.05-1.042-.108-.897-.136-2.011-.304-3.707.108-2.407.586-3.513 1.171-4.164 1.692l-.921.256a8.062 8.062 0 0 0-.146.027l-.71-.489a.25.25 0 0 0-.284.412l.403.278a1.078 1.078 0 0 0-.103.071l-1.049-.152a.25.25 0 1 0-.072.495l.378.055-.52.034a.25.25 0 1 0 .032.498l.656-.042-.574.153a.25.25 0 0 0 .129.483l1.543-.411c.107.012.219.014.336.005l-.432.7a.25.25 0 0 0 .425.263l.709-1.147a3.87 3.87 0 0 0 .916-.578c1.106-.911 3.448-.911 4.424-.911h1.561c-1.323 1.952-4.098 5.881-4.619 5.985-.65.13-2.797 1.041-3.383 1.496-.468.365-1.323 1.193-1.691 1.562-.499 0-1.757.13-2.798.65-1.3.65-2.927 1.302-3.448 1.302-.243 0-.444-.257-.642-.51-.225-.287-.447-.57-.724-.466-.26.097-.455.244-.683.414-.228.171-.488.366-.878.562-.781.39-1.822 1.3-1.822 1.821 0 .416.049.952.325.976.087.008.232-.124.435-.307.444-.404 1.167-1.06 2.168-1.06 1.821 0 5.074-.39 5.855-.52.315-.052.714-.073 1.16-.096.66-.034 1.42-.074 2.158-.229.989-.208 3.795-1.128 5.074-1.561.63.325 2.147.976 3.188.976h2.082c.238.932.872 3.044 1.496 4.033.605.958.78 1.916.89 2.51.03.173.057.315.086.418.023.08.046.183.071.297.12.53.293 1.306.775 1.199.266-.06.438-.226.607-.39.204-.197.404-.39.759-.39.65 0 2.277-.066 2.342-.716a7.01 7.01 0 0 1 .059-.415c.068-.422.136-.842-.059-.952-.1-.055-.372.067-.706.217-.543.244-1.25.562-1.636.304-.78-.52-1.366-1.496-1.366-2.407 0-.494-.249-1.35-.476-2.135-.193-.664-.37-1.275-.37-1.573 0-.12.018-.265.037-.424.086-.702.207-1.69-1.013-2.114-1.197-.416-2.667-1.17-3.253-1.496.087-.499.464-1.205.724-1.57.217-.303 1.86-1.202 2.672-1.952s.719-1.125.833-1.357c.91.216 3.032.52 4.229 0 1.496-.65 2.407-3.058 2.472-3.774.05-.547.252-.978.446-1.392a8.202 8.202 0 0 0 .29-.678l.136-.226 1.078-.207a.25.25 0 1 0-.094-.49l-.929.177c0-.011 0-.022-.002-.033l1.003-.793a.25.25 0 0 0-.31-.392l-.634.5.582-.772a.25.25 0 0 0-.4-.3l-.376.5.259-.474a.25.25 0 0 0-.1-.34Z" fill="#FFDDBD"/>
- <path d="M25.17 27.465c.624-.075 1.093.156 1.25.281-.438 0-2.032.75-3.626 1.688.344-.406 1.594-1.875 2.375-1.969Zm-6.87 8.24c.71.342 2.047.879 2.992.879h2.002v-.025c-.396-.188-1.306-.781-1.781-1.656a2.35 2.35 0 0 1-.103-.214c.53-.594.53-1.271.53-1.964a18.137 18.137 0 0 1-.323-.175c.017-.1.046-.207.084-.319-.35.423-.948 1.131-1.666 1.823-.7.675-1.498 1.317-2.274 1.67l.343-.116h.002c.03.016.108.049.214.092l-.02.005Z" fill="#EEAF74"/>
- <path fill-rule="evenodd" clip-rule="evenodd" d="M18.598 34.119a.269.269 0 0 1 .372-.08c.158.103.34.305.407.593.07.299.009.652-.256 1.032a.269.269 0 0 1-.44-.306c.193-.28.202-.479.173-.603a.446.446 0 0 0-.177-.265.269.269 0 0 1-.08-.371Z" fill="#FFDDBD"/>
- <path d="M21.422 25.877c.135-.185.255-.382.37-.57l.008-.014c.157-.259.305-.502.48-.716.177-.215.375-.392.624-.51.247-.12.56-.188.978-.165V23.9l-.053-.002c-.327 0-.665-.05-1.042-.108a37.227 37.227 0 0 0-.325-.048c-.225.146-.471.048-.845.161-.542.164-.62.164-1.292.516-.546.203-.967.58-1.406 1.17h2.698l-.195.288Z" fill="#EEAF74"/>
- <path d="M17.801 19.332s-.729-.484-1.748-.665c-.385-.068-.414-.654-.198-.98a.707.707 0 0 1 .98-.197c.712.473.966 1.842.966 1.842ZM4.776 29.721s-.868.106-1.76.631c-.337.198-.74-.228-.788-.616a.707.707 0 0 1 .616-.787c.85-.103 1.932.772 1.932.772Zm9.479-10.01s-.869.106-1.761.631c-.337.198-.74-.228-.787-.616a.707.707 0 0 1 .616-.787c.85-.103 1.932.772 1.932.772ZM9.758 40.823s-.764.427-1.794.53c-.389.039-.463.621-.272.962.19.34.62.462.962.272.746-.418 1.104-1.764 1.104-1.764Z" fill="#95ECFF"/>
+<svg width="221" height="220" viewBox="0 0 221 220" fill="none" xmlns="http://www.w3.org/2000/svg">
+<ellipse cx="4.24397" cy="4.24397" rx="4.24397" ry="4.24397" transform="matrix(-1 0 0 1 158.993 39.2071)" fill="#90C3D3"/>
+<path d="M155.944 46.6674C153.6 46.6674 151.7 44.7673 151.7 42.4234C151.7 41.4216 152.047 40.5009 152.628 39.7749C151.359 40.5087 150.506 41.8802 150.506 43.4511C150.506 45.795 152.406 47.6951 154.75 47.6951C156.092 47.6951 157.289 47.0721 158.066 46.0996C157.442 46.4607 156.717 46.6674 155.944 46.6674Z" fill="#5E8693"/>
+<rect x="158.993" y="118.793" width="2.20001" height="11" fill="#A2A2A2"/>
+<rect x="163.393" y="120.113" width="2.2" height="11" fill="#A2A2A2"/>
+<rect x="167.793" y="121.433" width="2.2" height="11" fill="#A2A2A2"/>
+<rect x="172.193" y="123.193" width="2.2" height="11" fill="#A2A2A2"/>
+<rect x="176.593" y="124.513" width="2.2" height="11" fill="#A2A2A2"/>
+<rect x="180.993" y="126.273" width="2.20001" height="11" fill="#A2A2A2"/>
+<rect x="185.393" y="127.593" width="2.2" height="11" fill="#A2A2A2"/>
+<rect x="189.793" y="128.913" width="2.2" height="11" fill="#A2A2A2"/>
+<rect x="174.834" y="94.5932" width="2.20001" height="11" fill="#484848"/>
+<rect x="179.234" y="95.9131" width="2.2" height="11" fill="#484848"/>
+<rect x="183.634" y="97.2331" width="2.2" height="11" fill="#484848"/>
+<rect x="188.034" y="98.9932" width="2.2" height="11" fill="#484848"/>
+<rect x="192.434" y="100.313" width="2.2" height="11" fill="#484848"/>
+<rect x="196.834" y="102.073" width="2.20001" height="11" fill="#484848"/>
+<rect x="201.234" y="103.393" width="2.2" height="11" fill="#484848"/>
+<rect x="205.634" y="104.713" width="2.2" height="11" fill="#484848"/>
+<path d="M185.822 52.8824L185.626 58.2666L186.989 65.1681L202.801 67.0931C202.481 66.2681 202.031 64.3156 202.801 63.1056C203.449 62.0879 204.402 58.1453 204.988 55.4181C203.917 54.7559 202.561 54.1122 200.846 53.4823C199.268 52.9025 197.746 52.3469 196.317 51.8276L188.501 49.9056L185.822 52.8824Z" fill="#C4C4C4"/>
+<path d="M209.026 65.3412V63.9538C209.026 60.0305 209.026 56.8525 202.118 53.9788L198.581 55.8888C200.226 57.8527 200.226 59.9979 200.226 62.4295V62.509L209.026 65.3412Z" fill="#494949"/>
+<path d="M200.225 97.6474L209.026 100.691V109.491L200.225 106.447V97.6474Z" fill="#C4C4C4"/>
+<path d="M200.225 88.8474L209.026 91.8911V100.691L200.225 97.6474V88.8474Z" fill="#494949"/>
+<path d="M191.425 94.6061L200.226 97.6498V106.45L191.425 103.406V94.6061Z" fill="#494949"/>
+<path d="M191.425 85.8061L200.226 88.8498V97.6498L191.425 94.6061V85.8061Z" fill="#C4C4C4"/>
+<path d="M200.225 80.2538L209.026 83.2975V92.0975L200.225 89.0538V80.2538Z" fill="#C4C4C4"/>
+<path d="M200.225 62.6129L209.026 65.6566V74.4566L200.225 71.4129V62.6129Z" fill="#C4C4C4"/>
+<path d="M200.225 71.4538L209.026 74.4975V83.2975L200.225 80.2538V71.4538Z" fill="#494949"/>
+<path d="M191.425 77.2124L200.226 80.2561V89.0561L191.425 86.0124V77.2124Z" fill="#494949"/>
+<path d="M191.425 59.5715L200.226 62.6152V71.4152L191.425 68.3715V59.5715Z" fill="#494949"/>
+<path d="M191.425 68.4124L200.226 71.4561V80.2561L191.425 77.2125V68.4124Z" fill="#C4C4C4"/>
+<path opacity="0.35" d="M185.625 58.3445L185.822 52.9101L188.501 49.9056L196.317 51.8455C197.746 52.3697 199.268 52.9305 200.846 53.5156C201.294 53.6817 201.718 53.8487 202.118 54.0168C208.79 56.8183 209.017 59.9063 209.025 63.6821L209.025 63.8309V110.047L191.425 103.905V65.8555L186.989 65.3104L185.625 58.3445Z" fill="black"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M210.983 66.1721C210.538 67.3028 209.261 67.8588 208.13 67.414L163.889 50.0158C162.758 49.571 162.202 48.2938 162.647 47.1632C163.092 46.0325 164.369 45.4764 165.5 45.9212L209.741 63.3194C210.871 63.7642 211.427 65.0414 210.983 66.1721Z" fill="#90C3D3"/>
+<path d="M214.806 70.0045L201.686 64.8434C200.555 64.3986 199.999 63.1214 200.444 61.9908C200.817 61.0437 201.773 60.4998 202.739 60.6095L158.762 43.3089C157.631 42.8641 156.354 43.4202 155.909 44.5509C155.465 45.6816 156.021 46.9587 157.151 47.4035L214.248 69.8651C214.431 69.9374 214.619 69.9832 214.806 70.0045Z" fill="#5E8693"/>
+<circle cx="4.31433" cy="4.31433" r="4.31433" transform="matrix(-1 0 0 1 214.263 61.3759)" fill="#90C3D3"/>
+<path d="M211.162 68.9597C208.78 68.9597 206.848 67.0281 206.848 64.6454C206.848 63.6269 207.201 62.6909 207.791 61.9529C206.501 62.6989 205.634 64.0932 205.634 65.6901C205.634 68.0728 207.565 70.0044 209.948 70.0044C211.312 70.0044 212.529 69.3711 213.319 68.3825C212.685 68.7496 211.948 68.9597 211.162 68.9597Z" fill="#5E8693"/>
+<ellipse cx="211.163" cy="63.7671" rx="1.88202" ry="1.27706" transform="rotate(23.5754 211.163 63.7671)" fill="white"/>
+<ellipse cx="155.616" cy="41.0384" rx="1.34162" ry="0.910363" transform="rotate(23.5754 155.616 41.0384)" fill="white"/>
+<path d="M184.621 122.349L193.421 125.393V134.193L184.621 131.149V122.349Z" fill="white"/>
+<path d="M184.621 113.549L193.421 116.593V125.393L184.621 122.349V113.549Z" fill="#494949"/>
+<path d="M167.021 116.212L175.821 119.256V128.056L167.021 125.012V116.212Z" fill="white"/>
+<path d="M167.021 107.412L175.821 110.456V119.256L167.021 116.212V107.412Z" fill="#494949"/>
+<path d="M175.821 119.308L184.621 122.351V131.151L175.821 128.108V119.308Z" fill="#494949"/>
+<path d="M175.821 110.508L184.621 113.551V122.351L175.821 119.308V110.508Z" fill="white"/>
+<path d="M158.221 113.171L167.021 116.215V125.015L158.221 121.971V113.171Z" fill="#494949"/>
+<path d="M158.221 104.371L167.021 107.415V116.215L158.221 113.171V104.371Z" fill="white"/>
+<path d="M184.621 104.749L193.421 107.793V116.593L184.621 113.549V104.749Z" fill="white"/>
+<path d="M184.621 95.9491L193.421 98.9928V107.793L184.621 104.749V95.9491Z" fill="#494949"/>
+<path d="M167.021 98.6124L175.821 101.656V110.456L167.021 107.412V98.6124Z" fill="white"/>
+<path d="M167.021 89.8124L175.821 92.8561V101.656L167.021 98.6124V89.8124Z" fill="#494949"/>
+<path d="M175.821 101.708L184.621 104.751V113.551L175.821 110.508V101.708Z" fill="#494949"/>
+<path d="M175.821 92.9077L184.621 95.9514V104.751L175.821 101.708V92.9077Z" fill="white"/>
+<path d="M158.221 95.571L167.021 98.6147V107.415L158.221 104.371V95.571Z" fill="#494949"/>
+<path d="M158.221 86.771L167.021 89.8147V98.6147L158.221 95.571V86.771Z" fill="white"/>
+<path d="M184.621 87.1491L193.421 90.1928V98.9928L184.621 95.9491V87.1491Z" fill="white"/>
+<path d="M184.621 78.3491L193.421 81.3928V90.1928L184.621 87.1491V78.3491Z" fill="#494949"/>
+<path d="M167.021 81.0124L175.821 84.0561V92.8561L167.021 89.8124V81.0124Z" fill="white"/>
+<path d="M167.021 72.2124L175.821 75.2561V84.0561L167.021 81.0124V72.2124Z" fill="#494949"/>
+<path d="M175.821 84.1077L184.621 87.1514V95.9514L175.821 92.9077V84.1077Z" fill="#494949"/>
+<path d="M175.821 75.3077L184.621 78.3514V87.1514L175.821 84.1077V75.3077Z" fill="white"/>
+<path d="M158.221 77.971L167.021 81.0147V89.8147L158.221 86.771V77.971Z" fill="#494949"/>
+<path d="M158.221 69.171L167.021 72.2147V81.0147L158.221 77.971V69.171Z" fill="white"/>
+<path d="M184.621 69.5492L193.421 72.5929V81.3929L184.621 78.3492V69.5492Z" fill="white"/>
+<path d="M184.621 60.7491L193.421 63.7928V72.5928L184.621 69.5491V60.7491Z" fill="#494949"/>
+<path d="M167.021 63.4124L175.821 66.4561V75.2561L167.021 72.2124V63.4124Z" fill="white"/>
+<path d="M167.021 54.6124L175.821 57.6561V66.4561L167.021 63.4124V54.6124Z" fill="#494949"/>
+<path d="M175.821 66.5078L184.621 69.5515V78.3515L175.821 75.3078V66.5078Z" fill="#494949"/>
+<path d="M175.821 57.7077L184.621 60.7514V69.5514L175.821 66.5077V57.7077Z" fill="white"/>
+<path d="M158.221 60.371L167.021 63.4147V72.2147L158.221 69.171V60.371Z" fill="#494949"/>
+<path d="M158.221 51.571L167.021 54.6147V63.4147L158.221 60.371V51.571Z" fill="white"/>
+<path d="M158.194 51.3021V51.5318L166.933 54.6124C166.999 48.9971 170.638 44.5937 177.312 44.7381C174.241 43.4069 171.41 42.2091 168.877 41.2804C161.948 40.9917 158.194 45.5274 158.194 51.3021Z" fill="#494949"/>
+<path d="M175.821 57.9745V58.2043L184.559 61.2848C184.626 55.6696 188.265 51.2661 194.939 51.4106C191.868 50.0794 189.037 48.8816 186.504 47.9529C179.574 47.6641 175.821 52.1998 175.821 57.9745Z" fill="#494949"/>
+<path d="M167.021 54.3974V54.6272L175.759 57.7077C175.826 52.0924 179.465 47.689 186.139 47.8334C183.068 46.5023 180.237 45.3045 177.704 44.3757C170.774 44.087 167.021 48.6227 167.021 54.3974Z" fill="white"/>
+<path d="M184.648 61.0699V61.2997L193.386 64.3802C193.453 58.7649 197.092 54.3615 203.766 54.506C200.695 53.1748 197.864 51.977 195.331 51.0483C188.401 50.7595 184.648 55.2952 184.648 61.0699Z" fill="white"/>
+<path d="M172.382 45.6347L163.538 42.215C165.025 41.5375 166.81 41.1942 168.877 41.2804C171.41 42.2091 175.256 43.2533 178.326 44.5845C176.436 44.5436 173.774 45.0213 172.382 45.6347Z" fill="white"/>
+<path d="M189.894 52.3588L181.052 48.9399C182.561 48.2278 184.384 47.8645 186.504 47.9529C189.037 48.8816 192.512 49.8533 195.583 51.1845C193.639 51.1424 191.31 51.7121 189.894 52.3588Z" fill="white"/>
+<path d="M180.891 48.8775L172.052 45.46C173.599 44.6839 175.49 44.2835 177.704 44.3757C180.237 45.3045 183.068 46.5023 186.139 47.8334C184.102 47.7894 182.347 48.169 180.891 48.8775Z" fill="#494949"/>
+<path d="M189.52 52.2143C191.096 51.3847 193.04 50.9528 195.331 51.0483C197.864 51.977 200.695 53.1748 203.766 54.506C201.653 54.4603 199.844 54.8705 198.356 55.6308L189.52 52.2143Z" fill="#494949"/>
+<g opacity="0.65">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M107.975 81.4999H134.153V79.2999H107.975V81.4999Z" fill="white"/>
+<path opacity="0.6" fill-rule="evenodd" clip-rule="evenodd" d="M57.3091 90.66H91.9453V88.46H57.3091V90.66Z" fill="white"/>
+<path opacity="0.6" fill-rule="evenodd" clip-rule="evenodd" d="M13.942 135.43H57.309V133.23H13.942V135.43Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M13.942 110.434H48.5782V108.234H13.942V110.434Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M69.904 174.554H104.54V172.354H69.904V174.554Z" fill="white"/>
+<path opacity="0.6" fill-rule="evenodd" clip-rule="evenodd" d="M83.9695 183.142H107.975V180.942H83.9695V183.142Z" fill="white"/>
+</g>
+<ellipse cx="8.96167" cy="9.39307" rx="8.96167" ry="9.39307" transform="matrix(-0.934997 -0.354657 -0.354657 0.934997 127.961 92.8689)" fill="#EEAF74"/>
+<path d="M121.321 89.0842C124.841 90.6242 128.059 97.3342 124.759 95.4092C124.759 103.769 119.339 102.727 117.139 103.094C115.856 102.086 113.154 99.5342 110.734 98.4342C107.709 97.0592 103.859 96.2342 97.2586 96.2342C100.559 95.1342 105.05 93.9425 106.884 93.4842L97.2586 89.0842H110.734L103.859 84.1342C108.259 84.6842 117.801 87.5442 121.321 89.0842Z" fill="#FFEB33"/>
+<path d="M125.649 93.6483C126.292 94.9499 126.367 95.9448 125.465 95.7219C125.57 95.1089 125.633 94.4208 125.649 93.6483Z" fill="#F0C429"/>
+<path d="M124.429 98.546C123.422 102.667 120.331 102.861 118.245 102.992C117.828 103.018 117.451 103.042 117.139 103.094C116.855 102.871 116.502 102.573 116.098 102.231C114.675 101.029 112.619 99.291 110.734 98.4342C107.709 97.0592 103.859 96.2342 97.2586 96.2342C99.2308 95.5768 101.629 94.8866 103.63 94.3398C107.096 94.6771 109.555 95.361 111.627 96.3029C113.512 97.1597 115.716 98.0412 117.139 99.2441C117.543 99.5855 118.08 99.5464 118.566 99.7941C119.139 100.086 120.142 100.147 120.559 100.121C122.203 100.017 122.759 99.9144 124.429 98.546Z" fill="#F0C429"/>
+<path d="M106.964 93.5035L97.2586 89.0842H99.3329L112.395 92.5066C111.609 92.7032 108.425 93.1021 106.964 93.5035Z" fill="#F0C429"/>
+<path d="M110.734 89.0842L116.098 89.6879L107.858 84.8754C105.781 84.3509 105.256 84.3088 103.859 84.1342L110.734 89.0842Z" fill="#F0C429"/>
+<path d="M147.647 74.7012C147.114 74.41 146.446 74.606 146.155 75.1392L142.207 82.366C141.992 81.7654 141.775 81.2304 141.572 80.8615C140.949 79.7285 140.464 78.7871 140.304 78.4666C140.032 77.9232 139.371 77.703 138.828 77.9747C138.285 78.2463 138.064 78.9071 138.336 79.4505C138.51 79.7979 139.008 80.7648 139.644 81.9218C139.895 82.3777 140.265 83.4228 140.642 84.6567C140.855 85.351 141.059 86.0654 141.231 86.6963C140.429 89.6999 139.328 92.1215 138.457 94.037C138.06 94.9103 137.71 95.6783 137.459 96.3483C136.772 98.1803 133.929 103.6 132.593 106.081C130.398 106.653 125.208 107.455 122.002 106.081C120.519 105.445 118.488 103.948 116.271 102.314C112.495 99.53 108.179 96.3483 105.113 96.3483C103.674 96.3483 102.185 96.1232 100.528 95.8725C96.5803 95.2754 91.6765 94.5337 84.2163 96.3483C73.625 98.9246 68.7587 101.501 65.8962 103.791L61.8416 104.92C61.6259 104.957 61.4108 104.997 61.1985 105.039L58.0765 102.886C57.5764 102.541 56.8913 102.666 56.5464 103.167C56.2015 103.667 56.3274 104.352 56.8275 104.697L58.6016 105.92C58.4387 106.02 58.287 106.125 58.1463 106.235L53.5311 105.565C52.9299 105.477 52.3717 105.894 52.2843 106.495C52.1969 107.096 52.6135 107.654 53.2147 107.742L54.8791 107.984L52.5859 108.132C51.9797 108.171 51.52 108.695 51.5593 109.301C51.5986 109.907 52.1219 110.367 52.7281 110.328L55.6179 110.14L53.0898 110.815C52.5027 110.971 52.1538 111.574 52.3103 112.161C52.4668 112.748 53.0696 113.097 53.6566 112.94L60.4463 111.13C60.9167 111.185 61.4107 111.195 61.9268 111.152L60.0227 114.233C59.7033 114.75 59.8634 115.428 60.3802 115.747C60.897 116.067 61.5748 115.907 61.8942 115.39L65.0135 110.342C66.2745 109.798 67.6231 108.969 69.045 107.798C73.9113 103.791 84.2163 103.791 88.5101 103.791H95.3801C89.5597 112.378 77.3463 129.668 75.0563 130.126C72.1937 130.699 62.7475 134.706 60.1712 136.71C58.1102 138.313 54.3507 141.958 52.7286 143.58C50.534 143.58 44.9998 144.152 40.4198 146.442C34.6948 149.305 27.5385 152.167 25.2485 152.167C24.1771 152.167 23.2937 151.04 22.4223 149.927C21.4313 148.662 20.4558 147.417 19.2372 147.874C18.0922 148.303 17.2335 148.947 16.2316 149.698C15.2297 150.45 14.0847 151.309 12.3671 152.167C8.93213 153.885 4.3521 157.892 4.3521 160.182C4.3521 162.014 4.56679 164.369 5.78336 164.476C6.16454 164.51 6.80142 163.932 7.6936 163.123C9.64891 161.35 12.8304 158.465 17.2334 158.465C25.2485 158.465 39.5611 156.747 42.9961 156.175C44.3816 155.944 46.1396 155.853 48.1011 155.751C51.0028 155.601 54.3498 155.427 57.5949 154.744C61.9459 153.828 74.2929 149.782 79.9225 147.874C82.6896 149.305 89.3689 152.167 93.9489 152.167H103.109C104.159 156.27 106.945 165.564 109.693 169.915C112.354 174.13 113.126 178.344 113.604 180.96C113.743 181.72 113.858 182.345 113.986 182.796C114.088 183.15 114.189 183.602 114.301 184.103C114.824 186.441 115.586 189.852 117.708 189.38C118.878 189.12 119.635 188.387 120.381 187.665C121.277 186.797 122.157 185.945 123.719 185.945C126.582 185.945 133.738 185.659 134.024 182.796C134.082 182.221 134.183 181.596 134.283 180.972C134.583 179.113 134.881 177.267 134.024 176.785C133.588 176.54 132.389 177.079 130.919 177.739C128.528 178.813 125.421 180.21 123.719 179.075C120.284 176.785 117.708 172.491 117.708 168.484C117.708 166.312 116.615 162.542 115.613 159.089C114.767 156.171 113.986 153.479 113.986 152.167C113.986 151.639 114.064 151.004 114.15 150.305C114.529 147.214 115.062 142.871 109.693 141.004C104.426 139.172 97.9564 135.851 95.3801 134.42C95.7618 132.225 97.4198 129.118 98.5649 127.515C99.5207 126.177 106.746 122.222 110.321 118.922C113.896 115.622 113.484 113.972 113.986 112.951C117.994 113.905 127.326 115.241 132.593 112.951C139.177 110.088 143.184 99.4971 143.47 96.3483C143.689 93.9406 144.579 92.0423 145.433 90.2206C145.695 89.66 145.955 89.1067 146.19 88.548C146.354 88.1577 146.536 87.7082 146.712 87.2387L147.309 86.2438L152.05 85.3344C152.647 85.22 153.038 84.6436 152.924 84.0469C152.809 83.4503 152.233 83.0594 151.636 83.1738L147.55 83.9576C147.549 83.9075 147.546 83.8591 147.54 83.8122L151.953 80.3223C152.43 79.9455 152.51 79.2537 152.134 78.7772C151.757 78.3006 151.065 78.2198 150.589 78.5966L147.802 80.8004L150.36 77.4017C150.726 76.9164 150.629 76.2267 150.143 75.8613C149.658 75.4959 148.968 75.5931 148.603 76.0785L146.946 78.2789L148.085 76.1939C148.376 75.6608 148.18 74.9925 147.647 74.7012Z" fill="#FFDDBD"/>
+<path d="M111.009 112.047C113.759 111.717 115.821 112.734 116.509 113.284C114.584 113.284 107.571 116.584 100.559 120.709C102.071 118.922 107.571 112.459 111.009 112.047Z" fill="#EEAF74"/>
+<path d="M80.7834 148.303C83.904 149.809 89.7912 152.167 93.9487 152.167H102.758V152.059C101.017 151.234 97.0112 148.622 94.9212 144.772C94.7426 144.443 94.5921 144.129 94.4671 143.831C96.7987 141.218 96.8013 138.239 96.8013 135.189C96.2499 134.897 95.7701 134.637 95.3798 134.42C95.4559 133.982 95.5828 133.508 95.7464 133.017C94.2083 134.876 91.5756 137.993 88.4167 141.037C85.3341 144.007 81.8271 146.832 78.4102 148.383C78.954 148.201 79.4607 148.03 79.9222 147.874C79.9252 147.875 79.9284 147.877 79.9314 147.878C80.064 147.945 80.4067 148.09 80.8714 148.279L80.7834 148.303Z" fill="#EEAF74"/>
+<path d="M94.519 105.056C95.116 104.246 95.6438 103.379 96.1461 102.552L96.1851 102.487C96.8751 101.351 97.5248 100.28 98.2979 99.3382C99.0747 98.3918 99.9467 97.6146 101.041 97.0909C102.131 96.5693 103.508 96.267 105.344 96.3699L105.345 96.3543C105.267 96.3503 105.189 96.3484 105.113 96.3484C103.674 96.3484 102.185 96.1232 100.528 95.8726C100.066 95.8026 99.5899 95.7306 99.0984 95.661C98.1054 96.3004 97.0243 95.8726 95.3801 96.3699C92.9961 97.0909 92.6524 97.0909 89.6961 98.6404C87.2899 99.5341 85.4398 101.188 83.5086 103.791H95.3801C95.1066 104.194 94.819 104.617 94.519 105.056Z" fill="#EEAF74"/>
+<path d="M78.5898 76.2623C78.5898 76.2623 75.3826 74.1325 70.8958 73.3367C69.2048 73.0367 69.0756 70.4566 70.0256 69.026C70.9757 67.5953 72.9057 67.2057 74.3363 68.1558C77.4731 70.2389 78.5898 76.2623 78.5898 76.2623Z" fill="#95ECFF"/>
+<path d="M21.2804 121.974C21.2804 121.974 17.4587 122.44 13.5314 124.751C12.0513 125.622 10.2763 123.745 10.0686 122.04C9.86095 120.336 11.0746 118.785 12.7794 118.578C16.5171 118.122 21.2804 121.974 21.2804 121.974Z" fill="#95ECFF"/>
+<path d="M62.9848 77.9296C62.9848 77.9296 59.1631 78.3952 55.2358 80.7062C53.7557 81.5772 51.9807 79.7002 51.773 77.9955C51.5653 76.2907 52.779 74.7403 54.4837 74.5327C58.2215 74.0774 62.9848 77.9296 62.9848 77.9296Z" fill="#95ECFF"/>
+<path d="M43.1989 170.823C43.1989 170.823 39.8387 172.702 35.3043 173.153C33.5954 173.324 33.2698 175.886 34.1081 177.385C34.9463 178.884 36.841 179.42 38.3399 178.581C41.6263 176.743 43.1989 170.823 43.1989 170.823Z" fill="#95ECFF"/>
</svg>
diff --git a/src/assets/icons/visu/ecogesture/ECOGESTURE0078.svg b/src/assets/icons/visu/ecogesture/ECOGESTURE0078.svg
new file mode 100644
index 0000000000000000000000000000000000000000..cfbccdea0982279f8dcae7747df220a883a77f33
--- /dev/null
+++ b/src/assets/icons/visu/ecogesture/ECOGESTURE0078.svg
@@ -0,0 +1,363 @@
+<svg width="220" height="221" viewBox="0 0 220 221" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_15162_4926)">
+<path d="M62.8678 70.5441L62.8372 70.529C62.9465 70.3099 63.034 70.0472 63.1214 69.7845C64.6631 65.1537 62.1809 60.1696 57.5691 58.6358C56.13 58.1571 54.636 58.0615 53.2071 58.3158C52.4255 54.1162 49.2704 51.9341 44.9203 50.4872C38.5422 48.3659 32.5946 48.6818 30.4624 55.0859C30.3643 55.0533 30.2335 55.0098 30.1353 54.9772C23.7573 52.8559 16.8509 56.3589 14.7187 62.7631C12.5866 69.1673 16.0268 76.0751 22.4049 78.1964C23.7459 78.6425 25.0981 78.8368 26.4177 78.8015C27.1566 81.9291 29.4554 84.627 32.7262 85.7148C35.7353 86.7157 38.8658 86.1518 41.2883 84.4405C42.3557 86.0357 43.925 87.3237 45.8548 87.9656C49.1583 89.0643 52.6381 88.1059 54.9412 85.7712C55.7259 86.3605 56.598 86.7965 57.5792 87.1228C62.5835 88.7872 68.0279 86.0746 69.7117 81.017C71.4174 76.003 69.4376 71.8081 62.8678 70.5441Z" fill="#4E626F"/>
+<path d="M14.1848 65.102C15.2727 68.7958 17.4525 73.2644 21.3742 74.5687C22.7152 75.0147 27.2175 75.728 28.7134 74.1745C27.9096 76.7958 30.1202 81.1693 33.391 82.2571C36.4001 83.2579 40.9266 83.1403 43.3491 81.429C44.4165 83.0243 45.36 84.4315 47.2898 85.0733C50.5933 86.1721 54.3879 84.579 56.6911 82.2443C57.4758 82.8336 58.9377 84.2427 59.9189 84.569C66.3459 85.6908 67.6284 81.0923 69.3122 76.0347C69.4604 75.5992 69.5753 75.1607 69.6583 74.7218C70.366 76.681 70.4369 78.8854 69.712 81.0163C68.0282 86.0739 62.5838 88.7865 57.5795 87.1221C56.5983 86.7958 55.7262 86.3598 54.9415 85.7705C52.6383 88.1052 49.1586 89.0636 45.8551 87.9649C43.9253 87.323 42.356 86.035 41.2886 84.4397C38.866 86.151 35.7356 86.7149 32.7264 85.7141C29.4556 84.6263 27.1569 81.9283 26.418 78.8008C25.0983 78.8361 23.7462 78.6417 22.4052 78.1957C16.7996 76.3313 13.4632 70.7696 14.1848 65.102Z" fill="#344550"/>
+<path d="M58.9846 65.8284C57.2695 64.9782 55.8134 64.6505 54.5427 64.597C52.2845 64.5021 49.9739 63.8453 48.7298 61.9593L48.2145 61.1782C46.8725 59.1438 44.1195 58.6102 42.1134 59.9958C40.4195 61.1657 38.144 60.9783 36.5362 59.6934C34.6906 58.2185 32.3416 56.6087 31.0396 56.7602C28.6782 57.035 23.5576 57.6495 22.3432 60.6735C24.2702 58.9812 25.3718 58.6064 27.8514 59.0296C30.2783 59.4439 33.3032 63.8039 34.4674 65.3019C33.9162 65.0287 31.3677 64.3986 28.0423 68.5632C31.6679 66.6769 32.5627 66.142 35.8239 68.1038C39.057 70.0486 37.4739 74.3126 36.0366 75.9791C36.7711 75.8827 38.7168 74.591 39.5238 73.3335C40.3309 72.0759 41.0827 70.4994 40.623 69.7343C41.9083 69.4506 42.9923 70.0799 44.0228 72.8008C45.0533 75.5217 44.4375 74.7331 44.0716 76.5085C45.3558 74.8429 46.776 70.9425 50.8167 71.564C55.7613 72.3246 57.7056 74.288 57.1574 77.93C58.0743 76.0823 58.1896 74.0675 57.0384 72.4034C54.9692 69.4121 52.6342 69.3087 50.9036 69.2864C52.3888 69.2135 54.7727 66.7047 56.3916 67.133C59.629 67.9895 61.8574 70.1877 62.5253 72.8785C62.912 68.4081 61.4647 67.0577 58.9846 65.8284Z" fill="#44555F"/>
+<g filter="url(#filter0_f_15162_4926)">
+<g filter="url(#filter1_f_15162_4926)">
+<path d="M41.8491 92.1865C46.5939 95.9768 43.588 98.9056 41.5466 100.106C36.7826 102.907 34.1717 98.8782 32.4858 95.3939C31.8885 94.1593 31.6218 91.8648 31.5395 89.3659C31.2671 87.0841 30.9401 82.1503 31.8116 80.6702C32.5749 81.9302 34.1329 84.1876 36.1847 86.5954C36.9814 87.5304 37.7136 81.8923 38.6417 82.823C38.1229 86.8779 40.7778 91.3306 41.8491 92.1865Z" fill="#DC4F00"/>
+</g>
+<g filter="url(#filter2_f_15162_4926)">
+<path d="M41.8491 92.1865C46.5939 95.9768 43.588 98.9056 41.5466 100.106C36.7826 102.907 34.1717 98.8782 32.4858 95.3939C31.8885 94.1593 31.6218 91.8648 31.5395 89.3659C31.2671 87.0841 30.9401 82.1503 31.8116 80.6702C32.5749 81.9302 34.1329 84.1876 36.1847 86.5954C36.9814 87.5304 37.7136 81.8923 38.6417 82.823C38.1229 86.8779 40.7778 91.3306 41.8491 92.1865Z" fill="#DC4F00"/>
+</g>
+</g>
+<g filter="url(#filter3_f_15162_4926)">
+<path d="M41.9778 94.7058C43.0302 96.3703 40.4644 98.8637 40.0442 99.2414C34.6105 102.262 32.439 92.8705 32.7388 89.0267C33.2527 93.4131 35.9752 96.5284 37.2723 97.5378C38.1961 98.1057 40.9255 93.0413 41.9778 94.7058Z" fill="#FFBC3A"/>
+</g>
+<g filter="url(#filter4_f_15162_4926)">
+<path d="M100.154 74.6347C97.5698 76.7928 87.9682 80.0562 76.0385 77.1191C58.2801 72.7471 52.2341 57.323 51.335 50.5263C53.1476 51.5338 57.8796 53.6967 62.307 54.289C58.6058 49.2037 56.0143 37.3819 57.44 26.7231C60.5765 29.4794 67.9111 30.0711 71.1863 30.0225C67.8807 26.6593 61.6203 17.3093 63.0241 6.8145C73.4059 16.5489 83.6429 13.3281 89.6537 18.305C95.6645 23.2818 92.1642 27.6124 96.0287 34.5972C96.0747 29.2621 100.043 21.2247 102.021 17.8729C102.021 17.8729 102.523 28.1635 104.379 33.0019C106.236 37.8403 110.635 39.2635 111.056 47.0395C111.392 53.2602 105.888 62.2745 103.094 66.0041C104.556 65.991 108.736 65.0061 113.755 61.1709C112.605 66.6504 102.737 72.4766 100.154 74.6347Z" fill="#DC4F00"/>
+</g>
+<g filter="url(#filter5_f_15162_4926)">
+<path d="M100.154 74.6347C97.5698 76.7928 87.9682 80.0562 76.0385 77.1191C58.2801 72.7471 52.2341 57.323 51.335 50.5263C53.1476 51.5338 57.8796 53.6967 62.307 54.289C58.6058 49.2037 56.0143 37.3819 57.44 26.7231C60.5765 29.4794 67.9111 30.0711 71.1863 30.0225C67.8807 26.6593 61.6203 17.3093 63.0241 6.8145C73.4059 16.5489 83.6429 13.3281 89.6537 18.305C95.6645 23.2818 92.1642 27.6124 96.0287 34.5972C96.0747 29.2621 100.043 21.2247 102.021 17.8729C102.021 17.8729 102.523 28.1635 104.379 33.0019C106.236 37.8403 110.635 39.2635 111.056 47.0395C111.392 53.2602 105.888 62.2745 103.094 66.0041C104.556 65.991 108.736 65.0061 113.755 61.1709C112.605 66.6504 102.737 72.4766 100.154 74.6347Z" fill="#DC4F00"/>
+</g>
+<g filter="url(#filter6_f_15162_4926)">
+<path d="M113.832 70.0624C115.219 71.2209 120.374 72.9729 126.778 71.3961C136.311 69.049 139.557 60.7688 140.04 57.12C139.067 57.6608 136.526 58.822 134.15 59.1399C136.137 56.4099 137.528 50.0635 136.762 44.3414C135.079 45.8211 131.141 46.1388 129.383 46.1127C131.157 44.3072 134.518 39.2877 133.765 33.6536C128.191 38.8795 122.696 37.1504 119.469 39.8222C116.242 42.494 118.121 44.8188 116.046 48.5686C116.022 45.7045 113.891 41.3897 112.829 39.5903C112.829 39.5903 112.56 45.1147 111.563 47.7122C110.567 50.3096 108.205 51.0736 107.979 55.2481C107.799 58.5877 110.753 63.4269 112.253 65.4291C111.468 65.4221 109.225 64.8934 106.53 62.8345C107.147 65.7761 112.445 68.9038 113.832 70.0624Z" fill="#DC4F00"/>
+</g>
+<g filter="url(#filter7_f_15162_4926)">
+<path d="M113.832 70.0624C115.219 71.2209 120.374 72.9729 126.778 71.3961C136.311 69.049 139.557 60.7688 140.04 57.12C139.067 57.6608 136.526 58.822 134.15 59.1399C136.137 56.4099 137.528 50.0635 136.762 44.3414C135.079 45.8211 131.141 46.1388 129.383 46.1127C131.157 44.3072 134.518 39.2877 133.765 33.6536C128.191 38.8795 122.696 37.1504 119.469 39.8222C116.242 42.494 118.121 44.8188 116.046 48.5686C116.022 45.7045 113.891 41.3897 112.829 39.5903C112.829 39.5903 112.56 45.1147 111.563 47.7122C110.567 50.3096 108.205 51.0736 107.979 55.2481C107.799 58.5877 110.753 63.4269 112.253 65.4291C111.468 65.4221 109.225 64.8934 106.53 62.8345C107.147 65.7761 112.445 68.9038 113.832 70.0624Z" fill="#DC4F00"/>
+</g>
+<g filter="url(#filter8_f_15162_4926)">
+<path d="M101.905 85.5051C100.015 87.4007 93.0827 90.3758 84.6028 88.0906C71.9799 84.6888 67.948 71.6082 67.4343 65.8105C68.712 66.6378 72.0566 68.3981 75.2132 68.8203C72.6619 64.5402 71.033 54.4756 72.2565 45.3294C74.4481 47.6277 79.6848 47.9941 82.0292 47.89C79.7281 45.0757 75.4271 37.1958 76.6317 28.1903C83.8744 36.3204 91.2605 33.3697 95.4664 37.513C99.6723 41.6562 97.0852 45.428 99.717 51.3301C99.8517 46.7648 102.844 39.8128 104.324 36.9075C104.324 36.9075 104.486 45.7019 105.722 49.806C106.958 53.91 122.218 44.6856 122.371 51.3303C122.493 56.646 125.241 52.3941 123.171 55.6382C124.217 55.5991 129.504 51.2669 133.169 47.89C135.569 65.8108 103.795 83.6095 101.905 85.5051Z" fill="#FFBC3A" fill-opacity="0.8"/>
+</g>
+<path d="M149.169 51.0464L149.214 51.0464C149.214 50.7238 149.264 50.3623 149.315 50.0008C150.208 43.6299 156.059 39.197 162.404 40.0851C164.384 40.3623 166.205 41.1239 167.743 42.2606C171.127 37.7587 176.131 37.0286 182.116 37.8664C190.891 39.0947 197.73 42.9491 196.495 51.7601C196.63 51.779 196.81 51.8041 196.945 51.823C205.72 53.0514 211.823 61.2309 210.589 70.0418C209.354 78.8527 201.244 84.9966 192.469 83.7683C190.624 83.51 188.913 82.9481 187.376 82.1339C184.67 85.3948 180.375 87.2352 175.875 86.6053C171.735 86.0258 168.369 83.5275 166.51 80.0885C164.315 81.3476 161.707 81.9501 159.052 81.5784C154.507 80.9422 150.96 77.7735 149.608 73.6683C148.336 73.9049 147.05 73.9092 145.7 73.7203C138.815 72.7565 133.976 66.3663 134.951 59.4079C135.874 52.4885 140.67 48.6934 149.169 51.0464Z" fill="#4E626F"/>
+<path d="M209.849 73.1164C206.4 76.8417 201.208 80.8428 195.812 80.0875C193.967 79.8292 188.232 78.0362 187.376 75.3259C186.79 78.892 181.616 82.7628 177.116 82.1329C172.976 81.5534 167.7 78.7649 165.842 75.3259C163.647 76.585 161.708 77.6946 159.053 77.3229C154.508 76.6867 150.96 72.5842 149.608 68.479C148.336 68.7156 145.784 69.5238 144.434 69.3349C136.187 66.8975 137.367 60.7164 138.342 53.7581C138.422 53.1571 138.544 52.572 138.703 52.0051C136.719 53.9045 135.344 56.4663 134.951 59.4069C133.976 66.3653 138.816 72.7555 145.701 73.7193C147.051 73.9082 148.336 73.9039 149.608 73.6673C150.96 77.7725 154.508 80.9412 159.053 81.5774C161.708 81.949 164.316 81.3466 166.511 80.0875C168.369 83.5265 171.736 86.0248 175.876 86.6043C180.375 87.2342 184.671 85.3938 187.376 82.1329C188.914 82.947 190.625 83.509 192.47 83.7672C200.182 84.8468 207.381 80.2318 209.849 73.1164Z" fill="#344550"/>
+<path d="M156.518 47.7515C159.387 47.7514 161.465 48.3526 163.093 49.188C165.616 50.4823 167.147 53.0593 168.223 55.6829C169.249 58.1848 172.147 59.335 174.61 58.2179L182.116 54.8125C182.116 54.8125 192.205 51.6936 194.833 53.4003C197.46 55.107 203.147 58.8302 202.809 63.1121C201.525 59.9856 200.444 58.8982 197.268 57.9466C194.159 57.0152 188.032 60.3934 185.78 61.4809C186.591 61.4809 189.97 62.2286 191.456 69.0933C188.28 64.7433 187.537 63.5879 182.536 63.9957C177.579 64.3999 176.95 70.362 177.67 73.1713C176.859 72.6276 175.319 69.9633 175.102 68.0058C174.886 66.0483 174.922 63.7465 175.913 63.1121C174.562 62.0246 172.913 62.1334 170.102 64.7433C167.29 67.3533 168.48 66.7824 167.872 69.0933C167.331 66.3746 167.939 60.9372 162.803 59.3059C156.518 57.3098 153.072 58.4903 151.585 63.1121C151.585 60.3934 152.63 57.9466 154.964 56.6552C159.16 54.334 161.978 55.5787 164.035 56.5653C162.324 55.61 160.979 51.2518 158.816 50.8099C154.491 49.9263 150.571 51.2178 148.206 54.0045C150.369 48.499 152.869 47.7515 156.518 47.7515Z" fill="#44555F"/>
+<path d="M171.717 40.8421C170.982 41.5763 170.399 42.4479 170.002 43.4072C169.604 44.3665 169.4 45.3947 169.4 46.433C169.4 47.4713 169.604 48.4995 170.002 49.4588C170.399 50.4181 170.982 51.2897 171.717 52.0239C172.451 52.7581 173.323 53.3406 174.283 53.7379C175.243 54.1353 176.272 54.3398 177.311 54.3398C178.349 54.3398 179.378 54.1353 180.338 53.7379C181.298 53.3406 182.17 52.7581 182.904 52.0239L178.567 51.7924C174.994 51.6017 172.139 48.7488 171.948 45.1774L171.717 40.8421Z" fill="#44555F"/>
+<path d="M42.962 194.147C43.4806 193.759 44.1106 193.55 44.758 193.55H168.242C168.889 193.55 169.519 193.759 170.038 194.147L188.771 208.147C191.082 209.874 189.86 213.55 186.975 213.55H26.0254C23.1398 213.55 21.9181 209.874 24.2295 208.147L42.962 194.147Z" fill="#1E1E1E"/>
+<path opacity="0.35" d="M49.0068 96.6657C49.0068 95.5611 49.9023 94.6657 51.0068 94.6657H154.389C155.494 94.6657 156.389 95.5611 156.389 96.6657V160.823C156.389 163.584 154.15 165.823 151.389 165.823H54.0068C51.2454 165.823 49.0068 163.584 49.0068 160.823V96.6657Z" fill="url(#paint0_radial_15162_4926)"/>
+<path d="M56.3145 94.9818H149.858V157.293C149.858 158.398 148.963 159.293 147.858 159.293H58.3144C57.2099 159.293 56.3145 158.398 56.3145 157.293V94.9818Z" fill="url(#paint1_linear_15162_4926)"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M48.7861 84.1232C46.0247 84.1232 43.7861 86.3618 43.7861 89.1232V168.491C43.7861 171.252 46.0247 173.491 48.7861 173.491H158.222C160.983 173.491 163.222 171.252 163.222 168.491V89.1232C163.222 86.3618 160.983 84.1232 158.222 84.1232H48.7861ZM149.858 94.9808H56.3144V157.292C56.3144 158.397 57.2098 159.292 58.3144 159.292H147.858C148.963 159.292 149.858 158.397 149.858 157.292V94.9808Z" fill="#838383"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M162.47 63.2424H43.7027C40.0586 63.2424 37.1045 66.5646 37.1045 70.6626V195.303C37.1045 199.401 40.0586 202.723 43.7027 202.723H162.47C166.114 202.723 169.068 199.401 169.068 195.303V70.6626C169.068 66.5646 166.114 63.2424 162.47 63.2424ZM48.7868 84.0245C46.0254 84.0245 43.7868 86.2631 43.7868 89.0245V168.392C43.7868 171.154 46.0254 173.392 48.7868 173.392H158.222C160.984 173.392 163.222 171.154 163.222 168.392V89.0245C163.222 86.2631 160.984 84.0245 158.222 84.0245H48.7868Z" fill="#C7C7C7"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M162.47 63.2424H43.7027C40.0586 63.2424 37.1045 66.5646 37.1045 70.6626V195.303C37.1045 199.401 40.0586 202.723 43.7027 202.723H162.47C166.114 202.723 169.068 199.401 169.068 195.303V70.6626C169.068 66.5646 166.114 63.2424 162.47 63.2424ZM48.7868 84.0245C46.0254 84.0245 43.7868 86.2631 43.7868 89.0245V168.392C43.7868 171.154 46.0254 173.392 48.7868 173.392H158.222C160.984 173.392 163.222 171.154 163.222 168.392V89.0245C163.222 86.2631 160.984 84.0245 158.222 84.0245H48.7868Z" fill="url(#paint2_linear_15162_4926)" fill-opacity="0.75"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M162.47 63.2424H43.7027C40.0586 63.2424 37.1045 66.5646 37.1045 70.6626V195.303C37.1045 196.953 37.5833 198.477 38.3931 199.709C38.3253 199.28 38.2899 198.838 38.2899 198.387V74.0828C38.2899 69.9958 41.191 66.6826 44.7696 66.6826H161.403C164.982 66.6826 167.883 69.9958 167.883 74.0828V198.387C167.883 198.838 167.847 199.28 167.779 199.709C168.589 198.477 169.068 196.953 169.068 195.303V70.6626C169.068 66.5646 166.114 63.2424 162.47 63.2424Z" fill="#FF6610" fill-opacity="0.4"/>
+<path d="M166.043 64.3047C166.693 64.8991 169.666 67.1508 169.666 71.2518V195.983C169.666 200.084 166.711 203.408 163.067 203.408H44.2936C40.6493 203.408 37.1006 200.084 37.1006 195.983L158.958 197.467C162.857 197.514 166.043 194.367 166.043 190.467V64.3047Z" fill="#878787"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M113.192 109.483H90.602V118.995H83.4684V130.884H77.5234V145.151H127.458V130.884H120.325V118.995H113.192V109.483Z" fill="#5F3929"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M113.192 109.483H90.602V118.995H83.4684V130.884H77.5234V145.151H127.458V130.884H120.325V118.995H113.192V109.483Z" fill="url(#paint3_linear_15162_4926)" fill-opacity="0.75"/>
+<rect x="112.003" y="130.884" width="13.0782" height="14.2671" fill="#492617"/>
+<rect x="83.4688" y="130.884" width="3.56677" height="14.2671" fill="#834E39"/>
+<rect x="89.4131" y="121.373" width="3.56677" height="10.7003" fill="#834E39"/>
+<rect x="94.168" y="111.861" width="2.37785" height="10.7003" fill="#834E39"/>
+<rect x="104.869" y="130.884" width="4.75569" height="14.2671" fill="#492617"/>
+<rect x="81.0898" y="130.884" width="1.18892" height="14.2671" fill="#834E39"/>
+<rect x="87.0352" y="121.373" width="1.18892" height="10.7003" fill="#834E39"/>
+<rect x="91.791" y="111.861" width="1.18892" height="10.7003" fill="#834E39"/>
+<rect x="110.813" y="118.995" width="7.13354" height="15.456" fill="#492617"/>
+<rect x="110.813" y="118.995" width="7.13354" height="15.456" fill="#492617"/>
+<rect x="101.302" y="118.995" width="3.56677" height="15.456" fill="#492617"/>
+<rect x="104.869" y="109.483" width="5.94462" height="10.7003" fill="#492617"/>
+<rect x="100.113" y="109.483" width="2.37785" height="10.7003" fill="#492617"/>
+<rect x="71.5791" y="144.547" width="63.4936" height="2.53975" rx="1.26987" fill="#D9D9D9"/>
+<path d="M79.1982 147.088H127.453C127.453 149.192 125.748 150.897 123.644 150.897H83.0079C80.9039 150.897 79.1982 149.192 79.1982 147.088Z" fill="#D9D9D9"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M126.944 148.992H79.7077C79.3837 148.432 79.1982 147.781 79.1982 147.088H127.453C127.453 147.781 127.268 148.432 126.944 148.992Z" fill="#858585"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M113.192 111.965C113.053 111.898 112.897 111.861 112.733 111.861H91.0915C90.9151 111.861 90.7487 111.904 90.602 111.98V113.886L92.3424 115.007C92.7399 115.264 93.2505 115.264 93.648 115.007L94.4814 114.47C95.3863 113.887 96.5487 113.887 97.4537 114.47C98.3586 115.053 99.521 115.053 100.426 114.47C101.331 113.887 102.493 113.887 103.398 114.47C104.303 115.053 105.466 115.053 106.371 114.47C107.276 113.887 108.438 113.887 109.343 114.47L110.176 115.007C110.574 115.264 111.084 115.264 111.482 115.007L113.192 113.906V111.965ZM120.325 121.385C120.266 121.377 120.205 121.373 120.143 121.373H83.6495C83.5881 121.373 83.5277 121.377 83.4684 121.385V124.194L86.3513 125.695C86.8729 125.967 87.4942 125.967 88.0157 125.695L89.7784 124.777C91.2258 124.023 92.9499 124.023 94.3973 124.777L94.6827 124.926C96.1301 125.68 97.8542 125.68 99.3016 124.926L99.587 124.777C101.034 124.023 102.759 124.023 104.206 124.777L104.491 124.926C105.939 125.68 107.663 125.68 109.11 124.926L109.396 124.777C110.843 124.023 112.567 124.023 114.014 124.777L115.777 125.695C116.299 125.967 116.92 125.967 117.442 125.695L120.325 124.194V121.385ZM127.458 132.155C127.258 132.102 127.047 132.073 126.83 132.073H78.183C77.9544 132.073 77.7332 132.105 77.5234 132.164V136.874L81.4307 138.727C82.0716 139.03 82.815 139.03 83.4559 138.727L86.9891 137.052C88.3447 136.409 89.9172 136.409 91.2729 137.052L93.6768 138.191C95.0324 138.834 96.6049 138.834 97.9605 138.191L100.365 137.052C101.72 136.409 103.293 136.409 104.648 137.052L107.052 138.191C108.408 138.834 109.98 138.834 111.336 138.191L113.74 137.052C115.095 136.409 116.668 136.409 118.024 137.052L121.557 138.727C122.198 139.03 122.941 139.03 123.582 138.727L127.458 136.889V132.155Z" fill="#492617"/>
+<line x1="95.8389" y1="104.424" x2="95.8389" y2="101.863" stroke="black" stroke-width="0.5"/>
+<path d="M95.0215 104.424C95.0215 103.952 95.4037 103.57 95.8751 103.57C96.3466 103.57 96.7288 103.952 96.7288 104.424V110.399H95.0215V104.424Z" fill="#D90034"/>
+<path d="M95.876 103.57C96.3474 103.57 96.7296 103.952 96.7296 104.424V110.399H95.876V103.57Z" fill="#950D2E"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M95.0225 104.937V106.073C95.35 105.903 95.6987 105.709 96.0402 105.5C96.2701 105.36 96.5041 105.208 96.7298 105.048V104.423C96.7298 104.233 96.6682 104.059 96.5639 103.917C96.2714 104.159 95.9118 104.407 95.5186 104.647C95.354 104.748 95.1874 104.845 95.0225 104.937ZM96.7298 105.481C96.4127 105.767 95.9898 106.066 95.5186 106.354C95.354 106.455 95.1874 106.552 95.0225 106.644V107.78C95.35 107.61 95.6987 107.416 96.0402 107.207C96.2701 107.067 96.5041 106.915 96.7298 106.755V105.481ZM96.7298 107.189C96.4127 107.475 95.9898 107.774 95.5186 108.062C95.354 108.163 95.1874 108.26 95.0225 108.352V109.488C95.35 109.318 95.6987 109.124 96.0402 108.915C96.2701 108.775 96.5041 108.623 96.7298 108.463V107.189ZM96.7298 108.896C96.4127 109.182 95.9898 109.481 95.5186 109.769C95.354 109.87 95.1874 109.967 95.0225 110.059V110.398H96.3943C96.5071 110.324 96.6194 110.248 96.7298 110.17V108.896Z" fill="#FFCF86"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M95.876 104.421V105.6C95.931 105.567 95.9859 105.534 96.0407 105.501C96.2704 105.36 96.5041 105.208 96.7296 105.048V104.423C96.7296 104.234 96.6681 104.059 96.564 103.917C96.3627 104.084 96.1298 104.253 95.876 104.421ZM96.7296 105.482C96.4951 105.693 96.2028 105.912 95.876 106.128V107.307C95.931 107.274 95.9859 107.241 96.0407 107.208C96.2704 107.067 96.5041 106.915 96.7296 106.755V105.482ZM96.7296 107.19C96.4951 107.401 96.2028 107.619 95.876 107.836V109.015C95.931 108.982 95.9859 108.949 96.0407 108.915C96.2704 108.775 96.5041 108.623 96.7296 108.463V107.19ZM96.7296 108.897C96.4951 109.108 96.2028 109.326 95.876 109.543V110.398H96.3947C96.5074 110.325 96.6195 110.248 96.7296 110.17V108.897Z" fill="#BC9254"/>
+<path opacity="0.75" d="M95.0215 104.424C95.0215 103.952 95.4037 103.57 95.8751 103.57C96.3466 103.57 96.7288 103.952 96.7288 104.424V106.131H95.0215V104.424Z" fill="url(#paint4_linear_15162_4926)"/>
+<g filter="url(#filter9_f_15162_4926)">
+<g filter="url(#filter10_f_15162_4926)">
+<path d="M96.9227 100.463C97.9225 101.262 97.2891 101.879 96.859 102.132C95.8551 102.722 95.3049 101.873 94.9497 101.139C94.8238 100.879 94.7676 100.395 94.7502 99.8689C94.6928 99.3881 94.6239 98.3484 94.8076 98.0365C94.9684 98.302 95.2967 98.7777 95.7291 99.2851C95.897 99.4821 96.0513 98.294 96.2468 98.4902C96.1375 99.3446 96.697 100.283 96.9227 100.463Z" fill="#DC4F00"/>
+</g>
+<g filter="url(#filter11_f_15162_4926)">
+<path d="M96.9227 100.463C97.9225 101.262 97.2891 101.879 96.859 102.132C95.8551 102.722 95.3049 101.873 94.9497 101.139C94.8238 100.879 94.7676 100.395 94.7502 99.8689C94.6928 99.3881 94.6239 98.3484 94.8076 98.0365C94.9684 98.302 95.2967 98.7777 95.7291 99.2851C95.897 99.4821 96.0513 98.294 96.2468 98.4902C96.1375 99.3446 96.697 100.283 96.9227 100.463Z" fill="#DC4F00"/>
+</g>
+</g>
+<g filter="url(#filter12_f_15162_4926)">
+<path d="M96.9495 100.995C97.1713 101.345 96.6306 101.871 96.5421 101.95C95.3971 102.587 94.9395 100.608 95.0027 99.7978C95.111 100.722 95.6847 101.379 95.958 101.591C96.1527 101.711 96.7278 100.644 96.9495 100.995Z" fill="#FFBC3A"/>
+</g>
+<line x1="101.814" y1="104.424" x2="101.814" y2="101.863" stroke="black" stroke-width="0.5"/>
+<path d="M100.997 104.424C100.997 103.952 101.379 103.57 101.851 103.57C102.322 103.57 102.704 103.952 102.704 104.424V110.399H100.997V104.424Z" fill="#D90034"/>
+<path d="M101.851 103.57C102.322 103.57 102.704 103.952 102.704 104.424V110.399H101.851V103.57Z" fill="#950D2E"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M100.997 104.938V106.074C101.325 105.904 101.673 105.71 102.015 105.501C102.245 105.361 102.479 105.209 102.704 105.048V104.424C102.704 104.234 102.643 104.059 102.538 103.918C102.246 104.159 101.886 104.408 101.493 104.648C101.329 104.749 101.162 104.846 100.997 104.938ZM102.704 105.482C102.387 105.767 101.964 106.067 101.493 106.355C101.329 106.456 101.162 106.553 100.997 106.645V107.781C101.325 107.611 101.673 107.417 102.015 107.208C102.245 107.068 102.479 106.916 102.704 106.755V105.482ZM102.704 107.19C102.387 107.475 101.964 107.775 101.493 108.063C101.329 108.164 101.162 108.261 100.997 108.353V109.489C101.325 109.318 101.673 109.125 102.015 108.916C102.245 108.776 102.479 108.624 102.704 108.463V107.19ZM102.704 108.897C102.387 109.182 101.964 109.482 101.493 109.77C101.329 109.871 101.162 109.968 100.997 110.06V110.399H102.369C102.482 110.325 102.594 110.249 102.704 110.17V108.897Z" fill="#FFCF86"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M101.852 104.421V105.6C101.906 105.568 101.961 105.535 102.016 105.501C102.246 105.361 102.48 105.209 102.705 105.049V104.424C102.705 104.234 102.644 104.06 102.539 103.918C102.338 104.084 102.105 104.254 101.852 104.421ZM102.705 105.482C102.471 105.694 102.178 105.912 101.852 106.128V107.307C101.906 107.275 101.961 107.242 102.016 107.208C102.246 107.068 102.48 106.916 102.705 106.756V105.482ZM102.705 107.19C102.471 107.401 102.178 107.62 101.852 107.836V109.015C101.906 108.983 101.961 108.95 102.016 108.916C102.246 108.776 102.48 108.624 102.705 108.464V107.19ZM102.705 108.897C102.471 109.108 102.178 109.327 101.852 109.543V110.399H102.37C102.483 110.325 102.595 110.249 102.705 110.171V108.897Z" fill="#BC9254"/>
+<path opacity="0.75" d="M100.997 104.424C100.997 103.952 101.379 103.57 101.851 103.57C102.322 103.57 102.704 103.952 102.704 104.424V106.131H100.997V104.424Z" fill="url(#paint5_linear_15162_4926)"/>
+<g filter="url(#filter13_f_15162_4926)">
+<g filter="url(#filter14_f_15162_4926)">
+<path d="M102.898 100.464C103.898 101.262 103.265 101.88 102.835 102.133C101.831 102.723 101.281 101.874 100.925 101.14C100.799 100.879 100.743 100.396 100.726 99.8694C100.668 99.3885 100.6 98.3489 100.783 98.037C100.944 98.3025 101.272 98.7782 101.705 99.2856C101.873 99.4826 102.027 98.2945 102.222 98.4906C102.113 99.3451 102.673 100.283 102.898 100.464Z" fill="#DC4F00"/>
+</g>
+<g filter="url(#filter15_f_15162_4926)">
+<path d="M102.898 100.464C103.898 101.262 103.265 101.88 102.835 102.133C101.831 102.723 101.281 101.874 100.925 101.14C100.799 100.879 100.743 100.396 100.726 99.8694C100.668 99.3885 100.6 98.3489 100.783 98.037C100.944 98.3025 101.272 98.7782 101.705 99.2856C101.873 99.4826 102.027 98.2945 102.222 98.4906C102.113 99.3451 102.673 100.283 102.898 100.464Z" fill="#DC4F00"/>
+</g>
+</g>
+<g filter="url(#filter16_f_15162_4926)">
+<path d="M102.925 100.995C103.147 101.345 102.606 101.871 102.518 101.95C101.373 102.587 100.915 100.608 100.978 99.7978C101.087 100.722 101.66 101.379 101.934 101.591C102.128 101.711 102.703 100.644 102.925 100.995Z" fill="#FFBC3A"/>
+</g>
+<line x1="107.79" y1="104.424" x2="107.79" y2="101.863" stroke="black" stroke-width="0.5"/>
+<path d="M106.973 104.424C106.973 103.952 107.355 103.57 107.826 103.57C108.298 103.57 108.68 103.952 108.68 104.424V110.399H106.973V104.424Z" fill="#D90034"/>
+<path d="M107.827 103.57C108.299 103.57 108.681 103.952 108.681 104.424V110.399H107.827V103.57Z" fill="#950D2E"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M106.974 104.938V106.073C107.301 105.903 107.65 105.71 107.991 105.501C108.221 105.36 108.455 105.209 108.681 105.048V104.423C108.681 104.234 108.619 104.059 108.515 103.917C108.223 104.159 107.863 104.407 107.47 104.648C107.305 104.748 107.139 104.845 106.974 104.938ZM108.681 105.482C108.364 105.767 107.941 106.067 107.47 106.355C107.305 106.455 107.139 106.552 106.974 106.645V107.78C107.301 107.61 107.65 107.417 107.991 107.208C108.221 107.067 108.455 106.916 108.681 106.755V105.482ZM108.681 107.19C108.364 107.475 107.941 107.775 107.47 108.063C107.305 108.163 107.139 108.26 106.974 108.352V109.488C107.301 109.318 107.65 109.125 107.991 108.916C108.221 108.775 108.455 108.624 108.681 108.463V107.19ZM108.681 108.897C108.364 109.182 107.941 109.482 107.47 109.77C107.305 109.87 107.139 109.967 106.974 110.059V110.399H108.345C108.458 110.325 108.571 110.248 108.681 110.17V108.897Z" fill="#FFCF86"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M107.827 104.421V105.6C107.882 105.567 107.937 105.534 107.991 105.501C108.221 105.36 108.455 105.209 108.681 105.048V104.423C108.681 104.234 108.619 104.059 108.515 103.918C108.314 104.084 108.081 104.253 107.827 104.421ZM108.681 105.482C108.446 105.693 108.154 105.912 107.827 106.128V107.307C107.882 107.274 107.937 107.241 107.991 107.208C108.221 107.067 108.455 106.916 108.681 106.755V105.482ZM108.681 107.19C108.446 107.401 108.154 107.62 107.827 107.836V109.015C107.882 108.982 107.937 108.949 107.991 108.916C108.221 108.775 108.455 108.624 108.681 108.463V107.19ZM108.681 108.897C108.446 109.108 108.154 109.327 107.827 109.543V110.399H108.345C108.458 110.325 108.571 110.249 108.681 110.17V108.897Z" fill="#BC9254"/>
+<path opacity="0.75" d="M106.973 104.424C106.973 103.952 107.355 103.57 107.826 103.57C108.298 103.57 108.68 103.952 108.68 104.424V106.131H106.973V104.424Z" fill="url(#paint6_linear_15162_4926)"/>
+<g filter="url(#filter17_f_15162_4926)">
+<g filter="url(#filter18_f_15162_4926)">
+<path d="M108.874 100.464C109.874 101.262 109.24 101.88 108.81 102.133C107.806 102.723 107.256 101.874 106.901 101.14C106.775 100.879 106.719 100.396 106.701 99.8694C106.644 99.3885 106.575 98.3489 106.759 98.037C106.92 98.3025 107.248 98.7782 107.68 99.2856C107.848 99.4826 108.002 98.2945 108.198 98.4906C108.089 99.3451 108.648 100.283 108.874 100.464Z" fill="#DC4F00"/>
+</g>
+<g filter="url(#filter19_f_15162_4926)">
+<path d="M108.874 100.464C109.874 101.262 109.24 101.88 108.81 102.133C107.806 102.723 107.256 101.874 106.901 101.14C106.775 100.879 106.719 100.396 106.701 99.8694C106.644 99.3885 106.575 98.3489 106.759 98.037C106.92 98.3025 107.248 98.7782 107.68 99.2856C107.848 99.4826 108.002 98.2945 108.198 98.4906C108.089 99.3451 108.648 100.283 108.874 100.464Z" fill="#DC4F00"/>
+</g>
+</g>
+<g filter="url(#filter20_f_15162_4926)">
+<path d="M108.901 100.995C109.122 101.345 108.582 101.871 108.493 101.95C107.348 102.587 106.891 100.608 106.954 99.7978C107.062 100.722 107.636 101.379 107.909 101.591C108.104 101.711 108.679 100.644 108.901 100.995Z" fill="#FFBC3A"/>
+</g>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M91.0918 109.483H112.733C113.323 109.483 113.802 109.962 113.802 110.552C113.802 110.915 113.617 111.253 113.312 111.45L111.482 112.629C111.085 112.886 110.574 112.886 110.177 112.629L109.343 112.092C108.438 111.509 107.276 111.509 106.371 112.092C105.466 112.676 104.304 112.676 103.399 112.092C102.494 111.509 101.331 111.509 100.426 112.092C99.5213 112.676 98.3589 112.676 97.4539 112.092C96.549 111.509 95.3866 111.509 94.4816 112.092L93.6483 112.629C93.2508 112.886 92.7402 112.886 92.3427 112.629L90.5129 111.45C90.2076 111.253 90.0232 110.915 90.0232 110.552C90.0232 109.962 90.5016 109.483 91.0918 109.483ZM120.144 118.995H83.6498C82.893 118.995 82.2795 119.608 82.2795 120.365C82.2795 120.876 82.5637 121.345 83.0169 121.581L86.3516 123.317C86.8731 123.589 87.4944 123.589 88.016 123.317L89.7787 122.399C91.226 121.646 92.9502 121.646 94.3975 122.399L94.683 122.548C96.1303 123.302 97.8545 123.302 99.3018 122.548L99.5873 122.399C101.035 121.646 102.759 121.646 104.206 122.399L104.492 122.548C105.939 123.302 107.663 123.302 109.11 122.548L109.396 122.399C110.843 121.646 112.567 121.646 114.015 122.399L115.777 123.317C116.299 123.589 116.92 123.589 117.442 123.317L120.777 121.581C121.23 121.345 121.514 120.876 121.514 120.365C121.514 119.608 120.9 118.995 120.144 118.995ZM126.83 129.695H78.1833C76.8427 129.695 75.7559 130.782 75.7559 132.123C75.7559 133.06 76.2961 133.914 77.1435 134.316L81.431 136.349C82.0718 136.652 82.8153 136.652 83.4561 136.349L86.9894 134.674C88.345 134.031 89.9175 134.031 91.2731 134.674L93.6771 135.813C95.0327 136.456 96.6052 136.456 97.9608 135.813L100.365 134.674C101.72 134.031 103.293 134.031 104.649 134.674L107.052 135.813C108.408 136.456 109.981 136.456 111.336 135.813L113.74 134.674C115.096 134.031 116.668 134.031 118.024 134.674L121.557 136.349C122.198 136.652 122.941 136.652 123.582 136.349L127.87 134.316C128.717 133.914 129.257 133.06 129.257 132.123C129.257 130.782 128.171 129.695 126.83 129.695Z" fill="#EA98E2"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M91.0918 109.483H112.733C113.323 109.483 113.802 109.962 113.802 110.552C113.802 110.915 113.617 111.253 113.312 111.45L111.482 112.629C111.085 112.886 110.574 112.886 110.177 112.629L109.343 112.092C108.438 111.509 107.276 111.509 106.371 112.092C105.466 112.676 104.304 112.676 103.399 112.092C102.494 111.509 101.331 111.509 100.426 112.092C99.5213 112.676 98.3589 112.676 97.4539 112.092C96.549 111.509 95.3866 111.509 94.4816 112.092L93.6483 112.629C93.2508 112.886 92.7402 112.886 92.3427 112.629L90.5129 111.45C90.2076 111.253 90.0232 110.915 90.0232 110.552C90.0232 109.962 90.5016 109.483 91.0918 109.483ZM120.144 118.995H83.6498C82.893 118.995 82.2795 119.608 82.2795 120.365C82.2795 120.876 82.5637 121.345 83.0169 121.581L86.3516 123.317C86.8731 123.589 87.4944 123.589 88.016 123.317L89.7787 122.399C91.226 121.646 92.9502 121.646 94.3975 122.399L94.683 122.548C96.1303 123.302 97.8545 123.302 99.3018 122.548L99.5873 122.399C101.035 121.646 102.759 121.646 104.206 122.399L104.492 122.548C105.939 123.302 107.663 123.302 109.11 122.548L109.396 122.399C110.843 121.646 112.567 121.646 114.015 122.399L115.777 123.317C116.299 123.589 116.92 123.589 117.442 123.317L120.777 121.581C121.23 121.345 121.514 120.876 121.514 120.365C121.514 119.608 120.9 118.995 120.144 118.995ZM126.83 129.695H78.1833C76.8427 129.695 75.7559 130.782 75.7559 132.123C75.7559 133.06 76.2961 133.914 77.1435 134.316L81.431 136.349C82.0718 136.652 82.8153 136.652 83.4561 136.349L86.9894 134.674C88.345 134.031 89.9175 134.031 91.2731 134.674L93.6771 135.813C95.0327 136.456 96.6052 136.456 97.9608 135.813L100.365 134.674C101.72 134.031 103.293 134.031 104.649 134.674L107.052 135.813C108.408 136.456 109.981 136.456 111.336 135.813L113.74 134.674C115.096 134.031 116.668 134.031 118.024 134.674L121.557 136.349C122.198 136.652 122.941 136.652 123.582 136.349L127.87 134.316C128.717 133.914 129.257 133.06 129.257 132.123C129.257 130.782 128.171 129.695 126.83 129.695Z" fill="url(#paint7_linear_15162_4926)" fill-opacity="0.75"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M90.2036 109.957C90.0897 110.127 90.0232 110.331 90.0232 110.551C90.0232 110.914 90.2076 111.253 90.5129 111.449L92.3427 112.629C92.7402 112.885 93.2508 112.885 93.6483 112.629L94.4816 112.092C95.3866 111.508 96.549 111.508 97.4539 112.092C98.3589 112.675 99.5213 112.675 100.426 112.092C101.331 111.508 102.494 111.508 103.399 112.092C104.304 112.675 105.466 112.675 106.371 112.092C107.276 111.508 108.438 111.508 109.343 112.092L110.177 112.629C110.574 112.885 111.085 112.885 111.482 112.629L113.312 111.449C113.617 111.253 113.802 110.914 113.802 110.551C113.802 110.331 113.735 110.127 113.621 109.957C113.541 110.076 113.437 110.18 113.312 110.261L111.482 111.44C111.085 111.696 110.574 111.696 110.177 111.44L109.343 110.903C108.438 110.32 107.276 110.32 106.371 110.903C105.466 111.486 104.304 111.486 103.399 110.903C102.494 110.32 101.331 110.32 100.426 110.903C99.5213 111.486 98.3589 111.486 97.4539 110.903C96.549 110.32 95.3866 110.32 94.4816 110.903L93.6483 111.44C93.2508 111.696 92.7402 111.696 92.3427 111.44L90.5129 110.261C90.3882 110.18 90.2837 110.076 90.2036 109.957ZM82.415 119.77C82.5411 120.032 82.7496 120.252 83.0169 120.391L86.3516 122.128C86.8731 122.399 87.4944 122.399 88.016 122.128L89.7787 121.21C91.226 120.456 92.9502 120.456 94.3975 121.21L94.683 121.358C96.1303 122.112 97.8545 122.112 99.3018 121.358L99.5873 121.21C101.035 120.456 102.759 120.456 104.206 121.21L104.492 121.358C105.939 122.112 107.663 122.112 109.11 121.358L109.396 121.21C110.843 120.456 112.567 120.456 114.015 121.21L115.777 122.128C116.299 122.399 116.92 122.399 117.442 122.128L120.777 120.391C121.044 120.252 121.252 120.032 121.378 119.77C121.465 119.95 121.514 120.152 121.514 120.365C121.514 120.876 121.23 121.344 120.777 121.58L117.442 123.317C116.92 123.588 116.299 123.588 115.777 123.317L114.015 122.399C112.567 121.645 110.843 121.645 109.396 122.399L109.11 122.548C107.663 123.301 105.939 123.301 104.492 122.548L104.206 122.399C102.759 121.645 101.035 121.645 99.5873 122.399L99.3018 122.548C97.8545 123.301 96.1303 123.301 94.683 122.548L94.3975 122.399C92.9502 121.645 91.226 121.645 89.7787 122.399L88.016 123.317C87.4944 123.588 86.8731 123.588 86.3516 123.317L83.0169 121.58C82.5637 121.344 82.2795 120.876 82.2795 120.365C82.2795 120.152 82.3282 119.95 82.415 119.77ZM75.8294 131.526C76.0041 132.219 76.4794 132.812 77.1435 133.126L81.431 135.159C82.0718 135.463 82.8153 135.463 83.4561 135.159L86.9894 133.484C88.345 132.841 89.9175 132.841 91.2731 133.484L93.6771 134.624C95.0327 135.266 96.6052 135.266 97.9608 134.624L100.365 133.484C101.72 132.841 103.293 132.841 104.649 133.484L107.052 134.624C108.408 135.266 109.981 135.266 111.336 134.624L113.74 133.484C115.096 132.841 116.668 132.841 118.024 133.484L121.557 135.159C122.198 135.463 122.941 135.463 123.582 135.159L127.87 133.126C128.534 132.812 129.009 132.219 129.184 131.526C129.232 131.717 129.257 131.916 129.257 132.122C129.257 133.06 128.717 133.913 127.87 134.315L123.582 136.348C122.941 136.652 122.198 136.652 121.557 136.348L118.024 134.673C116.668 134.03 115.096 134.03 113.74 134.673L111.336 135.812C109.981 136.455 108.408 136.455 107.052 135.812L104.649 134.673C103.293 134.03 101.72 134.03 100.365 134.673L97.9608 135.812C96.6052 136.455 95.0327 136.455 93.6771 135.812L91.2731 134.673C89.9175 134.03 88.345 134.03 86.9894 134.673L83.4561 136.348C82.8153 136.652 82.0718 136.652 81.431 136.348L77.1435 134.315C76.2961 133.913 75.7559 133.06 75.7559 132.122C75.7559 131.916 75.7814 131.717 75.8294 131.526Z" fill="#CD57C1"/>
+<path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M113.795 110.672H90.0297C90.0252 110.633 90.0229 110.593 90.0229 110.552C90.0229 109.962 90.5013 109.483 91.0915 109.483H112.733C113.323 109.483 113.801 109.962 113.801 110.552C113.801 110.593 113.799 110.633 113.795 110.672ZM121.502 120.184H82.2911C82.38 119.513 82.9543 118.995 83.6495 118.995H120.143C120.839 118.995 121.413 119.513 121.502 120.184ZM128.918 130.884C128.495 130.172 127.718 129.695 126.83 129.695H78.183C77.2947 129.695 76.5178 130.172 76.0947 130.884H128.918Z" fill="#FFBC3A"/>
+<path opacity="0.35" d="M49.0068 96.6657C49.0068 95.5611 49.9023 94.6657 51.0068 94.6657H154.389C155.494 94.6657 156.389 95.5611 156.389 96.6657V160.823C156.389 163.584 154.15 165.823 151.389 165.823H54.0068C51.2454 165.823 49.0068 163.584 49.0068 160.823V96.6657Z" fill="url(#paint8_radial_15162_4926)"/>
+<rect x="56.124" y="151.095" width="93.925" height="2.37785" fill="#1E1E1E"/>
+<path opacity="0.4" d="M89.0059 94.9818H103.085L67.8869 168.48H53.8076L89.0059 94.9818Z" fill="white"/>
+<path opacity="0.4" d="M116.588 94.9818H123.131L90.4185 168.48H83.876L116.588 94.9818Z" fill="white"/>
+<rect x="63.8516" y="71.4379" width="24.9674" height="8.32246" fill="#505050"/>
+<path d="M57.5286 76.3015C57.5286 78.3311 55.8833 79.9765 53.8536 79.9765C51.824 79.9765 50.1787 78.3311 50.1787 76.3015C50.1787 74.2719 51.824 72.6266 53.8536 72.6266C55.8833 72.6266 57.5286 74.2719 57.5286 76.3015Z" fill="#4B4B4B"/>
+<path d="M121.005 76.3015C121.005 78.3311 119.36 79.9764 117.33 79.9764C115.301 79.9764 113.655 78.3311 113.655 76.3015C113.655 74.2719 115.301 72.6265 117.33 72.6265C119.36 72.6265 121.005 74.2719 121.005 76.3015Z" fill="#4B4B4B"/>
+<path d="M133.533 76.3015C133.533 78.3311 131.888 79.9764 129.859 79.9764C127.829 79.9764 126.184 78.3311 126.184 76.3015C126.184 74.2719 127.829 72.6265 129.859 72.6265C131.888 72.6265 133.533 74.2719 133.533 76.3015Z" fill="#4B4B4B"/>
+<path d="M146.061 76.3015C146.061 78.3311 144.415 79.9764 142.386 79.9764C140.356 79.9764 138.711 78.3311 138.711 76.3015C138.711 74.2719 140.356 72.6265 142.386 72.6265C144.415 72.6265 146.061 74.2719 146.061 76.3015Z" fill="#4B4B4B"/>
+<path d="M158.589 76.3015C158.589 78.3311 156.944 79.9764 154.914 79.9764C152.885 79.9764 151.239 78.3311 151.239 76.3015C151.239 74.2719 152.885 72.6265 154.914 72.6265C156.944 72.6265 158.589 74.2719 158.589 76.3015Z" fill="#4B4B4B"/>
+<path d="M56.9827 75.2706C56.9827 77.3002 55.3374 78.9456 53.3077 78.9456C51.2781 78.9456 49.6328 77.3002 49.6328 75.2706C49.6328 73.241 51.2781 71.5957 53.3077 71.5957C55.3374 71.5957 56.9827 73.241 56.9827 75.2706Z" fill="#838383"/>
+<path d="M120.458 75.2706C120.458 77.3002 118.813 78.9456 116.783 78.9456C114.754 78.9456 113.108 77.3002 113.108 75.2706C113.108 73.241 114.754 71.5957 116.783 71.5957C118.813 71.5957 120.458 73.241 120.458 75.2706Z" fill="#838383"/>
+<path d="M118.87 73.9648C118.87 74.6794 118.291 75.2586 117.576 75.2586C116.861 75.2586 116.282 74.6794 116.282 73.9648C116.282 73.2503 116.861 72.6711 117.576 72.6711C118.291 72.6711 118.87 73.2503 118.87 73.9648Z" fill="#4B4B4B"/>
+<path d="M55.4752 73.9648C55.4752 74.6794 54.896 75.2586 54.1815 75.2586C53.4669 75.2586 52.8877 74.6794 52.8877 73.9648C52.8877 73.2503 53.4669 72.6711 54.1815 72.6711C54.896 72.6711 55.4752 73.2503 55.4752 73.9648Z" fill="#4B4B4B"/>
+<path d="M132.987 75.2706C132.987 77.3002 131.341 78.9456 129.312 78.9456C127.282 78.9456 125.637 77.3002 125.637 75.2706C125.637 73.241 127.282 71.5957 129.312 71.5957C131.341 71.5957 132.987 73.241 132.987 75.2706Z" fill="#838383"/>
+<path d="M145.515 75.2706C145.515 77.3002 143.87 78.9456 141.84 78.9456C139.81 78.9456 138.165 77.3002 138.165 75.2706C138.165 73.241 139.81 71.5957 141.84 71.5957C143.87 71.5957 145.515 73.241 145.515 75.2706Z" fill="#838383"/>
+<path d="M158.042 75.2706C158.042 77.3002 156.397 78.9456 154.367 78.9456C152.338 78.9456 150.692 77.3002 150.692 75.2706C150.692 73.241 152.338 71.5957 154.367 71.5957C156.397 71.5957 158.042 73.241 158.042 75.2706Z" fill="#838383"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M125.673 75.7857C125.924 74.0002 127.458 72.6264 129.312 72.6264C131.167 72.6264 132.701 74.0005 132.951 75.7862C132.975 75.6178 132.987 75.4456 132.987 75.2706C132.987 73.241 131.342 71.5957 129.312 71.5957C127.283 71.5957 125.637 73.241 125.637 75.2706C125.637 75.4455 125.649 75.6174 125.673 75.7857ZM113.144 75.7859C113.395 74.0004 114.929 72.6265 116.783 72.6265C118.638 72.6265 120.172 74.0006 120.422 75.7864C120.446 75.6179 120.458 75.4458 120.458 75.2709C120.458 73.2413 118.813 71.5959 116.783 71.5959C114.754 71.5959 113.108 73.2413 113.108 75.2709C113.108 75.4457 113.121 75.6176 113.144 75.7859ZM145.479 75.7862C145.502 75.6178 145.515 75.4456 145.515 75.2706C145.515 73.241 143.869 71.5957 141.84 71.5957C139.81 71.5957 138.165 73.241 138.165 75.2706C138.165 75.4455 138.177 75.6174 138.201 75.7858C138.451 74.0003 139.985 72.6264 141.84 72.6264C143.695 72.6264 145.228 74.0005 145.479 75.7862ZM150.729 75.7858C150.979 74.0003 152.513 72.6264 154.368 72.6264C156.223 72.6264 157.756 74.0005 158.007 75.7862C158.031 75.6178 158.043 75.4456 158.043 75.2706C158.043 73.241 156.397 71.5957 154.368 71.5957C152.338 71.5957 150.693 73.241 150.693 75.2706C150.693 75.4455 150.705 75.6174 150.729 75.7858Z" fill="#FF6610" fill-opacity="0.45"/>
+<path d="M57.9844 62.7372C57.9844 61.6326 58.8798 60.7372 59.9844 60.7372H94.4042C95.5087 60.7372 96.4042 61.6326 96.4042 62.7372V63.2428H57.9844V62.7372Z" fill="#535353"/>
+<path d="M110.603 62.7372C110.603 61.6326 111.498 60.7372 112.603 60.7372H153.704C154.809 60.7372 155.704 61.6326 155.704 62.7372V63.2428H110.603V62.7372Z" fill="#535353"/>
+<path d="M149.022 203.229C149.022 204.333 148.127 205.229 147.022 205.229L144.341 205.229C143.236 205.229 142.341 204.333 142.341 203.229L142.341 202.723L149.022 202.723L149.022 203.229Z" fill="#828282"/>
+<path d="M63.8311 203.229C63.8311 204.333 62.9356 205.229 61.8311 205.229L59.1494 205.229C58.0448 205.229 57.1494 204.333 57.1494 203.229L57.1494 202.723L63.8311 202.723L63.8311 203.229Z" fill="#828282"/>
+<path d="M49.0068 96.6657C49.0068 95.5611 49.9023 94.6657 51.0068 94.6657H154.389C155.494 94.6657 156.389 95.5611 156.389 96.6657V163.41C156.389 166.172 154.15 168.41 151.389 168.41H54.0068C51.2454 168.41 49.0068 166.172 49.0068 163.41V96.6657Z" stroke="#C7C7C7" stroke-width="2"/>
+<path d="M51.0068 94.1657C49.6261 94.1657 48.5068 95.285 48.5068 96.6657V163.41C48.5068 166.448 50.9693 168.91 54.0068 168.91H151.389C154.427 168.91 156.889 166.448 156.889 163.41V96.6657C156.889 95.285 155.77 94.1657 154.389 94.1657H51.0068Z" stroke="#5B5B5B"/>
+<rect opacity="0.5" x="51.3027" y="89.9689" width="103.566" height="5.01128" rx="2.50564" fill="#24373A" fill-opacity="0.5"/>
+<rect x="49.6328" y="88.2994" width="106.907" height="5.01128" rx="2.50564" fill="#C7C7C7"/>
+<rect x="50.3008" y="90.7845" width="104.795" height="1.29376" rx="0.646881" fill="#4B4B4B"/>
+<path d="M131.807 73.9648C131.807 74.6794 131.228 75.2586 130.513 75.2586C129.799 75.2586 129.22 74.6794 129.22 73.9648C129.22 73.2503 129.799 72.6711 130.513 72.6711C131.228 72.6711 131.807 73.2503 131.807 73.9648Z" fill="#4B4B4B"/>
+<path d="M143.452 73.9648C143.452 74.6794 142.873 75.2586 142.158 75.2586C141.443 75.2586 140.864 74.6794 140.864 73.9648C140.864 73.2503 141.443 72.6711 142.158 72.6711C142.873 72.6711 143.452 73.2503 143.452 73.9648Z" fill="#4B4B4B"/>
+<path d="M156.389 73.9648C156.389 74.6794 155.81 75.2586 155.096 75.2586C154.381 75.2586 153.802 74.6794 153.802 73.9648C153.802 73.2503 154.381 72.6711 155.096 72.6711C155.81 72.6711 156.389 73.2503 156.389 73.9648Z" fill="#4B4B4B"/>
+<path d="M45.4902 90.4434C45.4902 89.3389 46.3857 88.4434 47.4902 88.4434H133.41C134.514 88.4434 135.41 89.3389 135.41 90.4434V145.263C135.41 148.024 133.171 150.263 130.41 150.263H50.4902C47.7288 150.263 45.4902 148.024 45.4902 145.263V90.4434Z" fill="white" fill-opacity="0.1"/>
+<g filter="url(#filter21_f_15162_4926)">
+<rect x="65.6348" y="72.6266" width="1.18892" height="2.37785" fill="#FF0000"/>
+<rect x="71.5791" y="72.6265" width="1.18892" height="2.37785" fill="#FF0000"/>
+<rect x="84.6572" y="72.6265" width="1.18892" height="2.37785" fill="#FF0000"/>
+<rect x="87.0352" y="75.0049" width="1.18892" height="2.37785" transform="rotate(90 87.0352 75.0049)" fill="#FF0000"/>
+<rect x="81.0908" y="76.1936" width="1.18892" height="2.37785" fill="#FF0000"/>
+<rect x="81.0908" y="72.6265" width="1.18892" height="2.37785" fill="#FF0000"/>
+<rect x="70.3906" y="73.8162" width="1.18892" height="2.37785" transform="rotate(90 70.3906 73.8162)" fill="#FF0000"/>
+<rect x="76.335" y="73.8162" width="1.18892" height="1.18892" transform="rotate(90 76.335 73.8162)" fill="#FF0000"/>
+<rect x="81.0908" y="72.6265" width="1.18892" height="2.37785" transform="rotate(90 81.0908 72.6265)" fill="#FF0000"/>
+<rect x="70.3906" y="76.1936" width="1.18892" height="2.37785" transform="rotate(90 70.3906 76.1936)" fill="#FF0000"/>
+<rect x="76.335" y="76.1936" width="1.18892" height="1.18892" transform="rotate(90 76.335 76.1936)" fill="#FF0000"/>
+<rect x="81.0908" y="77.3823" width="1.18892" height="2.37785" transform="rotate(90 81.0908 77.3823)" fill="#FF0000"/>
+<rect x="81.0908" y="75.0049" width="1.18892" height="2.37785" transform="rotate(90 81.0908 75.0049)" fill="#FF0000"/>
+<rect x="65.6348" y="76.1936" width="1.18892" height="2.37785" fill="#FF0000"/>
+<rect x="71.5791" y="76.1936" width="1.18892" height="2.37785" fill="#FF0000"/>
+<rect x="87.0352" y="73.8162" width="1.18892" height="2.37785" fill="#FF0000"/>
+<rect x="87.0352" y="76.1936" width="1.18892" height="2.37785" fill="#FF0000"/>
+</g>
+<rect x="65.6348" y="72.6266" width="1.18892" height="2.37785" fill="#FF0000"/>
+<rect x="71.5791" y="72.6265" width="1.18892" height="2.37785" fill="#FF0000"/>
+<rect x="84.6572" y="72.6265" width="1.18892" height="2.37785" fill="#FF0000"/>
+<rect x="87.0352" y="75.0049" width="1.18892" height="2.37785" transform="rotate(90 87.0352 75.0049)" fill="#FF0000"/>
+<rect x="81.0908" y="76.1936" width="1.18892" height="2.37785" fill="#FF0000"/>
+<rect x="81.0908" y="72.6265" width="1.18892" height="2.37785" fill="#FF0000"/>
+<rect x="70.3906" y="73.8162" width="1.18892" height="2.37785" transform="rotate(90 70.3906 73.8162)" fill="#FF0000"/>
+<rect x="76.335" y="73.8162" width="1.18892" height="1.18892" transform="rotate(90 76.335 73.8162)" fill="#FF0000"/>
+<rect x="81.0908" y="72.6265" width="1.18892" height="2.37785" transform="rotate(90 81.0908 72.6265)" fill="#FF0000"/>
+<rect x="70.3906" y="76.1936" width="1.18892" height="2.37785" transform="rotate(90 70.3906 76.1936)" fill="#FF0000"/>
+<rect x="76.335" y="76.1936" width="1.18892" height="1.18892" transform="rotate(90 76.335 76.1936)" fill="#FF0000"/>
+<rect x="81.0908" y="77.3823" width="1.18892" height="2.37785" transform="rotate(90 81.0908 77.3823)" fill="#FF0000"/>
+<rect x="81.0908" y="75.0049" width="1.18892" height="2.37785" transform="rotate(90 81.0908 75.0049)" fill="#FF0000"/>
+<rect x="65.6348" y="76.1936" width="1.18892" height="2.37785" fill="#FF0000"/>
+<rect x="71.5791" y="76.1936" width="1.18892" height="2.37785" fill="#FF0000"/>
+<rect x="87.0352" y="73.8162" width="1.18892" height="2.37785" fill="#FF0000"/>
+<rect x="87.0352" y="76.1936" width="1.18892" height="2.37785" fill="#FF0000"/>
+<g filter="url(#filter22_f_15162_4926)">
+<path d="M137.203 24.0335C141.208 28.5278 141.028 30.4361 140.436 30.8284C142.602 30.2425 142.435 26.7255 139.425 23.7155C135.617 19.9081 138.302 16.0665 139.29 13.7073C136.926 15.2767 133.198 19.5391 137.203 24.0335Z" fill="#DC4F00"/>
+</g>
+<g filter="url(#filter23_f_15162_4926)">
+<path d="M137.203 24.0335C141.208 28.5278 141.028 30.4361 140.436 30.8284C142.602 30.2425 142.435 26.7255 139.425 23.7155C135.617 19.9081 138.302 16.0665 139.29 13.7073C136.926 15.2767 133.198 19.5391 137.203 24.0335Z" fill="#DC4F00"/>
+</g>
+<path d="M94.0119 37.4596L94.0362 37.4495C93.9635 37.2748 93.9099 37.0674 93.8563 36.8601C92.9113 33.2061 95.0895 29.4919 98.7285 28.5521C99.864 28.2588 101.022 28.2638 102.111 28.5355C102.935 25.3368 105.485 23.8199 108.917 22.9333C113.95 21.6334 118.522 22.1911 119.829 27.2445C119.906 27.2245 120.009 27.1978 120.087 27.1778C125.119 25.878 130.263 28.9452 131.569 33.9986C132.876 39.0519 129.857 44.1997 124.825 45.4995C123.767 45.7728 122.713 45.8514 121.697 45.7545C120.962 48.1284 119.046 50.0884 116.465 50.755C114.091 51.3683 111.705 50.768 109.927 49.3198C109.019 50.4942 107.74 51.4051 106.218 51.7984C103.611 52.4716 100.977 51.5485 99.3233 49.6257C98.6868 50.0389 97.991 50.3292 97.2167 50.5292C93.268 51.5491 89.211 49.1689 88.1789 45.178C87.1277 41.2197 88.8765 38.0879 94.0119 37.4596Z" fill="#4E626F"/>
+<path d="M131.858 35.8311C130.824 38.6234 128.906 41.9558 125.812 42.7551C124.754 43.0284 121.243 43.341 120.17 42.0634C120.652 44.1282 118.716 47.3856 116.135 48.0522C113.761 48.6655 110.275 48.3358 108.496 46.8876C107.588 48.062 106.786 49.0979 105.264 49.4912C102.657 50.1644 99.8134 48.735 98.1598 46.8122C97.5233 47.2254 96.321 48.2353 95.5468 48.4353C90.5292 48.9614 89.7825 45.3461 88.7504 41.3552C88.6591 41.0114 88.5936 40.667 88.5528 40.3241C87.9033 41.7982 87.7323 43.4952 88.179 45.1774C89.2111 49.1682 93.2682 51.5484 97.2168 50.5285C97.9911 50.3286 98.6869 50.0383 99.3234 49.625C100.977 51.5478 103.611 52.4709 106.218 51.7977C107.74 51.4044 109.019 50.4936 109.927 49.3192C111.705 50.7673 114.091 51.3676 116.465 50.7544C119.046 50.0878 120.962 48.1277 121.697 45.7538C122.713 45.8507 123.767 45.7722 124.825 45.4989C129.248 44.3564 132.116 40.2417 131.858 35.8311Z" fill="#344550"/>
+<path d="M97.2564 34.0265C98.6244 33.4612 99.7651 33.2852 100.748 33.3111C102.495 33.357 104.313 32.9723 105.372 31.5829L105.811 31.0075C106.954 29.5088 109.106 29.2426 110.58 30.4174C111.825 31.4095 113.591 31.385 114.899 30.4786C116.401 29.4382 118.298 28.3202 119.295 28.5058C121.102 28.8425 125.02 29.5869 125.797 31.9841C124.4 30.5767 123.57 30.2294 121.634 30.425C119.74 30.6165 117.176 33.8205 116.199 34.9147C116.639 34.733 118.638 34.3815 120.984 37.77C118.286 36.1233 117.624 35.6634 115.005 37.0048C112.408 38.3345 113.404 41.7077 114.425 43.0693C113.863 42.9562 112.43 41.8569 111.874 40.8441C111.318 39.8313 110.821 38.5753 111.216 38.0094C110.239 37.7226 109.37 38.1509 108.431 40.1957C107.493 42.2404 108.009 41.6645 108.198 43.0536C107.295 41.7008 106.405 38.6166 103.255 38.8828C99.4001 39.2086 97.7965 40.6206 98.0271 43.4594C97.4173 41.9854 97.4347 40.4249 98.4107 39.2019C100.165 37.0033 101.972 37.0469 103.308 37.121C102.166 36.9864 100.46 34.925 99.188 35.1699C96.6451 35.6598 94.8098 37.2381 94.1525 39.2787C94.0902 35.8095 95.278 34.8441 97.2564 34.0265Z" fill="#44555F"/>
+</g>
+<defs>
+<filter id="filter0_f_15162_4926" x="30.7863" y="80.2104" width="14.0543" height="21.2943" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.229883" result="effect1_foregroundBlur_15162_4926"/>
+</filter>
+<filter id="filter1_f_15162_4926" x="30.2461" y="79.6702" width="15.1348" height="22.3748" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.5" result="effect1_foregroundBlur_15162_4926"/>
+</filter>
+<filter id="filter2_f_15162_4926" x="21.2461" y="70.6702" width="33.1348" height="40.3748" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="5" result="effect1_foregroundBlur_15162_4926"/>
+</filter>
+<filter id="filter3_f_15162_4926" x="32.2521" y="88.5669" width="10.4371" height="11.7231" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.229883" result="effect1_foregroundBlur_15162_4926"/>
+</filter>
+<filter id="filter4_f_15162_4926" x="41.335" y="-3.18555" width="82.4209" height="91.4741" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="5" result="effect1_foregroundBlur_15162_4926"/>
+</filter>
+<filter id="filter5_f_15162_4926" x="49.335" y="4.81445" width="66.4209" height="75.4741" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="1" result="effect1_foregroundBlur_15162_4926"/>
+</filter>
+<filter id="filter6_f_15162_4926" x="96.5303" y="23.6537" width="53.5098" height="58.3702" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="5" result="effect1_foregroundBlur_15162_4926"/>
+</filter>
+<filter id="filter7_f_15162_4926" x="104.53" y="31.6537" width="37.5098" height="42.3702" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="1" result="effect1_foregroundBlur_15162_4926"/>
+</filter>
+<filter id="filter8_f_15162_4926" x="60.4346" y="21.1903" width="79.8643" height="74.7275" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="3.5" result="effect1_foregroundBlur_15162_4926"/>
+</filter>
+<filter id="filter9_f_15162_4926" x="94.2287" y="97.5767" width="3.68711" height="5.21299" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.229883" result="effect1_foregroundBlur_15162_4926"/>
+</filter>
+<filter id="filter10_f_15162_4926" x="93.6885" y="97.0365" width="4.76758" height="6.29346" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.5" result="effect1_foregroundBlur_15162_4926"/>
+</filter>
+<filter id="filter11_f_15162_4926" x="84.6885" y="88.0365" width="22.7676" height="24.2935" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="5" result="effect1_foregroundBlur_15162_4926"/>
+</filter>
+<filter id="filter12_f_15162_4926" x="94.5373" y="99.3381" width="2.92539" height="3.19608" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.229883" result="effect1_foregroundBlur_15162_4926"/>
+</filter>
+<filter id="filter13_f_15162_4926" x="100.204" y="97.5772" width="3.68711" height="5.21299" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.229883" result="effect1_foregroundBlur_15162_4926"/>
+</filter>
+<filter id="filter14_f_15162_4926" x="99.6641" y="97.037" width="4.76758" height="6.29346" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.5" result="effect1_foregroundBlur_15162_4926"/>
+</filter>
+<filter id="filter15_f_15162_4926" x="90.6641" y="88.037" width="22.7676" height="24.2935" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="5" result="effect1_foregroundBlur_15162_4926"/>
+</filter>
+<filter id="filter16_f_15162_4926" x="100.513" y="99.3381" width="2.92539" height="3.19608" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.229883" result="effect1_foregroundBlur_15162_4926"/>
+</filter>
+<filter id="filter17_f_15162_4926" x="106.18" y="97.5772" width="3.68711" height="5.21299" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.229883" result="effect1_foregroundBlur_15162_4926"/>
+</filter>
+<filter id="filter18_f_15162_4926" x="105.64" y="97.037" width="4.76758" height="6.29346" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.5" result="effect1_foregroundBlur_15162_4926"/>
+</filter>
+<filter id="filter19_f_15162_4926" x="96.6396" y="88.037" width="22.7676" height="24.2935" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="5" result="effect1_foregroundBlur_15162_4926"/>
+</filter>
+<filter id="filter20_f_15162_4926" x="106.488" y="99.3381" width="2.92539" height="3.19608" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.229883" result="effect1_foregroundBlur_15162_4926"/>
+</filter>
+<filter id="filter21_f_15162_4926" x="55.6348" y="62.6265" width="42.5889" height="25.9449" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="5" result="effect1_foregroundBlur_15162_4926"/>
+</filter>
+<filter id="filter22_f_15162_4926" x="134.436" y="12.7073" width="8.46094" height="19.1212" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.5" result="effect1_foregroundBlur_15162_4926"/>
+</filter>
+<filter id="filter23_f_15162_4926" x="125.436" y="3.70728" width="26.4609" height="37.1212" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="5" result="effect1_foregroundBlur_15162_4926"/>
+</filter>
+<radialGradient id="paint0_radial_15162_4926" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(57.3119 157.635) rotate(-32.3146) scale(116.764 170.013)">
+<stop stop-color="white"/>
+<stop offset="0.94367" stop-color="#382513" stop-opacity="0.145833"/>
+<stop offset="1" stop-color="#161616" stop-opacity="0"/>
+</radialGradient>
+<linearGradient id="paint1_linear_15162_4926" x1="103.086" y1="94.9818" x2="103.086" y2="159.293" gradientUnits="userSpaceOnUse">
+<stop stop-color="#303030"/>
+<stop offset="1" stop-color="#373737" stop-opacity="0.25"/>
+</linearGradient>
+<linearGradient id="paint2_linear_15162_4926" x1="21.8384" y1="47.4425" x2="167.387" y2="212.397" gradientUnits="userSpaceOnUse">
+<stop offset="0.0781769" stop-color="#818181"/>
+<stop offset="0.181754" stop-color="#C5C5C5"/>
+<stop offset="0.320353" stop-color="#818181"/>
+<stop offset="0.503398" stop-color="#C5C5C5"/>
+<stop offset="0.679648" stop-color="#818181"/>
+<stop offset="0.81279" stop-color="#C5C5C5"/>
+<stop offset="0.954465" stop-color="#818181"/>
+</linearGradient>
+<linearGradient id="paint3_linear_15162_4926" x1="127.458" y1="144.557" x2="101.302" y2="120.778" gradientUnits="userSpaceOnUse">
+<stop stop-color="#492617"/>
+<stop offset="1" stop-color="#5F3929"/>
+</linearGradient>
+<linearGradient id="paint4_linear_15162_4926" x1="95.8751" y1="103.57" x2="95.8751" y2="106.131" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FF800B"/>
+<stop offset="1" stop-color="#FF370B" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint5_linear_15162_4926" x1="101.851" y1="103.57" x2="101.851" y2="106.131" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FF800B"/>
+<stop offset="1" stop-color="#FF370B" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint6_linear_15162_4926" x1="107.826" y1="103.57" x2="107.826" y2="106.131" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FF800B"/>
+<stop offset="1" stop-color="#FF370B" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint7_linear_15162_4926" x1="128.647" y1="133.857" x2="90.007" y2="109.484" gradientUnits="userSpaceOnUse">
+<stop stop-color="#CD57C1"/>
+<stop offset="1" stop-color="#CD57C1" stop-opacity="0"/>
+</linearGradient>
+<radialGradient id="paint8_radial_15162_4926" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(182.228 74.6251) rotate(134.73) scale(156.031 227.186)">
+<stop stop-color="#FF7A00"/>
+<stop offset="0.677083" stop-color="#382513" stop-opacity="0.145833"/>
+<stop offset="1" stop-color="#161616" stop-opacity="0"/>
+</radialGradient>
+<clipPath id="clip0_15162_4926">
+<rect width="220" height="220" fill="white" transform="translate(0 0.25)"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/src/assets/icons/visu/ecogesture/ECOGESTURE0079.svg b/src/assets/icons/visu/ecogesture/ECOGESTURE0079.svg
new file mode 100644
index 0000000000000000000000000000000000000000..aa22d3170c6b66d67f7c41ab183530a2830e1e5a
--- /dev/null
+++ b/src/assets/icons/visu/ecogesture/ECOGESTURE0079.svg
@@ -0,0 +1,159 @@
+<svg width="220" height="220" viewBox="0 0 220 220" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_15201_1173)">
+<g opacity="0.1" filter="url(#filter0_f_15201_1173)">
+<circle cx="110.5" cy="102" r="84" fill="#67DAFE"/>
+</g>
+<ellipse cx="109.5" cy="183.5" rx="109.5" ry="18.5" fill="#1E1E1E"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M108.476 140.519C105.102 140.669 101.669 139.379 100.126 136.374C97.1331 130.547 96.4606 122.709 99.598 112.279C112.422 69.6469 149.848 67.3611 157.549 79.035C158.369 80.2775 160.094 82.48 160.76 81.1486C160.896 80.876 160.88 80.6034 160.863 80.3118C160.834 79.8202 160.802 79.2748 161.492 78.5851C161.992 78.0849 162.341 78.0402 162.641 78.0016C163 77.9555 163.29 77.9182 163.689 77.1202C164.422 75.6552 164.422 74.9227 164.056 73.824C163.689 72.7253 163.689 72.3591 165.154 71.2604C165.476 71.0195 165.779 70.8315 166.054 70.6615C167.031 70.0561 167.638 69.6799 167.352 67.9642C167.339 67.8889 167.327 67.8158 167.315 67.7447C166.983 65.7413 166.923 65.3755 165.154 64.6681C163.323 63.9356 160.027 62.1044 160.76 60.6395C161.492 59.1745 161.492 57.7096 159.661 57.3434C159.417 57.2946 158.765 56.9669 157.77 56.4673C151.291 53.2132 130.293 42.6662 113.149 54.4135C100.052 63.3874 92.4156 62.0816 88.1133 61.3459C85.919 60.9707 84.5919 60.7438 83.8498 62.1044C83.1755 63.3406 83.0185 64.1629 82.892 64.8255C82.6062 66.3221 82.4762 67.0029 76.8912 69.7954C68.834 73.824 57.4807 87.741 59.3119 107.152C59.6501 110.737 59.9884 113.935 60.292 116.806C61.6321 129.476 62.2977 135.769 59.3119 140.845C57.0928 144.618 55.1426 146.239 53.6243 147.501C52.6368 148.322 51.832 148.991 51.2547 150.001C50.7913 150.812 51.7938 151.55 53.5784 152.133C54.4877 152.431 54.4991 153.687 53.5551 153.843C48.0743 154.746 40.6344 155.971 41.014 159.665C41.3327 162.767 56.9982 162.847 70.3775 162.916C78.9614 162.959 86.6043 162.999 88.6492 163.828C91.3031 164.904 89.2454 165.762 86.9146 166.734C84.6502 167.678 82.128 168.729 83.4171 170.193C85.2418 172.265 125.797 171.89 133.122 170.193C137.847 169.098 135.495 167.793 132.88 166.343C131.441 165.545 129.922 164.703 129.459 163.828C128.699 162.388 143.685 165.555 160.942 169.201C179.296 173.079 200.219 177.5 207.5 177.5C216.167 177.5 210.427 171.236 205.541 165.904C202.462 162.545 199.723 159.556 201.139 158.736C204.326 156.889 199.193 155.365 196.083 154.441C195.619 154.303 195.2 154.178 194.86 154.068C193.294 153.56 193.65 153.169 194.525 152.208C195.111 151.564 195.93 150.665 196.56 149.302C197.816 146.587 186.489 144.733 183.873 144.308L180.778 143.566C167.171 140.304 153.168 139.002 139.192 139.698L133.538 139.98C124.579 139.98 116.18 140.178 108.476 140.519Z" fill="url(#paint0_radial_15201_1173)"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M88.6105 155.566C85.3769 155.405 82.2707 153.881 80.779 151.008C76.6438 143.042 75.6965 132.306 80.0001 118C97.5082 59.7972 148.603 56.6766 159.117 72.6141C160.236 74.3105 162.591 77.3175 163.5 75.4998C163.686 75.1276 163.664 74.7554 163.641 74.3573C163.602 73.6862 163.558 72.9416 164.5 72C165.183 71.3171 165.659 71.256 166.068 71.2034C166.559 71.1404 166.955 71.0895 167.5 70C168.5 68 168.5 67 168 65.5C167.5 64 167.5 63.5 169.5 62C169.938 61.6712 170.353 61.4144 170.727 61.1824C172.062 60.3558 172.89 59.8424 172.5 57.5C172.483 57.3972 172.466 57.2973 172.45 57.2003C171.997 54.4652 171.914 53.9658 169.5 53C167 52 162.5 49.5 163.5 47.5C164.5 45.5 164.5 43.5 162 43C161.667 42.9335 160.777 42.4861 159.419 41.804C150.574 37.3613 121.907 22.9623 98.5 39C80.6194 51.2516 70.1944 49.4689 64.3207 48.4645C61.3251 47.9522 59.5133 47.6424 58.5 49.5C57.5795 51.1876 57.3651 52.3104 57.1924 53.2148C56.8023 55.2581 56.6248 56.1876 49 60C38 65.5 22.5 84.5 25 111C25.4618 115.895 25.9236 120.261 26.3381 124.18C28.1677 141.478 29.0764 150.07 25 157C24.4777 157.888 23.9662 158.689 23.4668 159.415C22.0829 161.426 19.8498 162.608 17.4702 163.155C12.2107 164.364 6.55045 166.224 7.62376 168.545C8.48355 170.405 9.60194 171.633 10.4023 172.512C11.5968 173.824 12.083 174.358 9.9445 175.052C9.48082 175.202 8.90877 175.372 8.27526 175.56C4.02919 176.822 -2.97807 178.904 1.37288 181.424C6.37299 184.321 45.6595 185.479 64.9456 185.479C68.6459 185.479 72.2672 185.437 75.6886 185.396C90.1 185.227 100.964 185.099 99.2321 188.376C98.6005 189.571 96.5273 190.721 94.5628 191.81C90.9927 193.79 87.7814 195.571 94.232 197.066C104.232 199.383 159.6 199.894 162.091 197.066C163.851 195.067 160.407 193.632 157.316 192.343C154.134 191.016 151.324 189.845 154.948 188.376C157.739 187.244 168.174 187.19 179.893 187.131C198.159 187.037 219.546 186.928 219.981 182.693C220.499 177.65 210.342 175.977 202.859 174.744C200.028 174.277 197.579 173.874 196.237 173.375C193.37 172.309 194.431 171.449 195.737 170.389C197.14 169.251 198.826 167.882 196.237 165.782C191.237 161.727 150.808 155.818 93.6634 155.818L88.6105 155.566Z" fill="url(#paint1_radial_15201_1173)"/>
+<g opacity="0.3">
+<path d="M146 74.4999C147.477 74.6342 148.957 75.0725 150.336 75.6524C154.332 77.334 159.039 77.9769 162.757 75.746L163.479 75.3125C165.403 74.158 166.751 72.2453 167.191 70.045C167.395 69.0249 167.797 68.0546 168.374 67.189L172.918 60.3738C173.301 59.7992 173.545 59.1432 173.631 58.4579C173.854 56.6683 172.975 54.9207 171.405 54.0332L163.594 49.6183C162.867 49.2071 162.09 48.8874 161.346 48.508C159.785 47.7129 157.814 46.1942 157.5 44C157 40.4999 158 38.0001 153.5 36.0001C149 34.0001 155 46.0001 155 47.5001C155 49.0001 158.5 52.0001 160 53.4998C161.5 54.9995 166 61.5001 165.5 63.5001C165 65.5001 161.5 64.5001 158.5 63.5001C155.5 62.5001 154 59.4998 152 53.4998C150 47.4998 144.5 48.9998 142 50.9998C139.5 52.9998 146 56.4998 147.5 57.9998C149 59.4998 155.5 62.4998 156.5 65.4998C157.5 68.4998 158 71.4998 158 73.4998C158 75.4998 152.5 74.4999 150 72.9999C147.5 71.4999 141.5 69.4999 140.5 70.4999C139.5 71.4999 140.5 73.9999 146 74.4999Z" fill="url(#paint2_radial_15201_1173)"/>
+<path d="M146 74.4999C147.477 74.6342 148.957 75.0725 150.336 75.6524C154.332 77.334 159.039 77.9769 162.757 75.746L163.479 75.3125C165.403 74.158 166.751 72.2453 167.191 70.045C167.395 69.0249 167.797 68.0546 168.374 67.189L172.918 60.3738C173.301 59.7992 173.545 59.1432 173.631 58.4579C173.854 56.6683 172.975 54.9207 171.405 54.0332L163.594 49.6183C162.867 49.2071 162.09 48.8874 161.346 48.508C159.785 47.7129 157.814 46.1942 157.5 44C157 40.4999 158 38.0001 153.5 36.0001C149 34.0001 155 46.0001 155 47.5001C155 49.0001 158.5 52.0001 160 53.4998C161.5 54.9995 166 61.5001 165.5 63.5001C165 65.5001 161.5 64.5001 158.5 63.5001C155.5 62.5001 154 59.4998 152 53.4998C150 47.4998 144.5 48.9998 142 50.9998C139.5 52.9998 146 56.4998 147.5 57.9998C149 59.4998 155.5 62.4998 156.5 65.4998C157.5 68.4998 158 71.4998 158 73.4998C158 75.4998 152.5 74.4999 150 72.9999C147.5 71.4999 141.5 69.4999 140.5 70.4999C139.5 71.4999 140.5 73.9999 146 74.4999Z" fill="black" fill-opacity="0.2"/>
+</g>
+<path d="M153.742 68.1008C152.593 65.8002 147.835 65.8642 145.6 66.1837C141.768 66.2831 145.6 69.5385 148.952 69.0592C152.305 68.5799 150.389 71.4557 153.742 72.8935C157.095 74.3313 157.574 76.7278 156.137 78.645C154.7 80.5621 152.784 77.6864 150.389 78.645C147.994 79.6036 151.826 82 156.137 82C160.448 82 159.49 81.5207 160.448 79.6036C161.406 77.6864 162.364 76.7278 164.759 75.7692C167.154 74.8107 170.986 70.4971 170.986 67.1421C170.986 63.787 171.465 63.787 173.86 61.8699C176.255 59.9527 176.734 56.1185 174.818 54.2013C172.902 52.2841 171.465 51.8048 170.986 48.4498C170.507 45.0948 168.112 41.7398 168.112 46.0534C168.112 50.3669 163.778 52.7635 164.759 45.0948C165.74 37.4262 156.137 40.3019 159.49 41.7398C162.843 43.1777 160.448 45.0948 160.448 49.4084C160.448 53.722 170.986 53.722 172.423 56.1185C173.86 58.5149 169.549 60.9114 167.154 64.2664C164.759 67.6214 167.633 69.0593 165.238 71.4557C162.843 73.8521 161.885 73.8521 158.532 73.3729C155.179 72.8936 155.179 70.9766 153.742 68.1008Z" fill="#B8EDFF"/>
+<path opacity="0.5" d="M87.0001 63C94.4543 55.1908 110.86 49.9541 120.632 47.7092C122.835 47.2033 125.291 47.1501 127.071 48.5424C129.593 50.5155 128.548 53.366 113 55.5C87.5 59 85 75 91 71C97 67 102 78.5 89 85.5C76 92.5 82 90 76.5 107C71 124 66.5 140 63 129.5C59.5 119 77.5 93.5 66.5 97C55.5 100.5 58.5 113 58.5 121C58.5 129 53.5001 143 50.0001 133.5C46.5001 124 50.0001 107.5 60.0001 91.5C70.0001 75.5 76.5001 74 87.0001 63Z" fill="url(#paint3_radial_15201_1173)"/>
+<path d="M110 159.5L93.5 139.5L134.5 132.5L152.5 148L110 159.5Z" fill="#D9D9D9"/>
+<path d="M110 159.5L93.5 139.5L134.5 132.5L152.5 148L110 159.5Z" fill="url(#paint4_linear_15201_1173)" fill-opacity="0.35"/>
+<path d="M103 177L110 159.5L93.5 139.5L87 158L103 177Z" fill="#AFAFAF"/>
+<path d="M103 177L110 159.5L93.5 139.5L87 158L103 177Z" fill="url(#paint5_linear_15201_1173)" fill-opacity="0.35"/>
+<path d="M146 164L103 177L110 159.5L152.5 148L146 164Z" fill="#6A6A6A"/>
+<path d="M122.272 162.153C121.57 163.342 121.607 164.663 122.355 165.105L123.584 165.831L126.126 161.525L124.897 160.8C124.149 160.358 122.974 160.964 122.272 162.153Z" fill="#858585"/>
+<ellipse cx="124.688" cy="163.58" rx="1.57306" ry="2.5" transform="rotate(30.5628 124.688 163.58)" fill="#AFAFAF"/>
+<ellipse cx="124.388" cy="163.485" rx="0.5" ry="1" transform="rotate(30.5628 124.388 163.485)" fill="#858585"/>
+<path d="M129.272 160.153C128.57 161.342 128.607 162.663 129.355 163.105L130.584 163.831L133.126 159.525L131.897 158.8C131.149 158.358 129.974 158.964 129.272 160.153Z" fill="#858585"/>
+<ellipse cx="131.688" cy="161.58" rx="1.57306" ry="2.5" transform="rotate(30.5628 131.688 161.58)" fill="#AFAFAF"/>
+<ellipse cx="131.388" cy="161.485" rx="0.5" ry="1" transform="rotate(30.5628 131.388 161.485)" fill="#858585"/>
+<path d="M110.85 162.798L109.235 166.997C108.796 168.139 109.834 169.298 111.016 168.986L118.132 167.114C118.598 166.991 118.977 166.652 119.15 166.202L120.765 162.003C121.204 160.861 120.166 159.702 118.984 160.014L111.868 161.886C111.402 162.009 111.023 162.348 110.85 162.798Z" fill="#434343" stroke="#484848"/>
+<path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M119.772 160.549L117.167 166.8L116.952 166.907L116.127 167.125L118.627 160.625L119.111 160.497C119.348 160.435 119.576 160.461 119.772 160.549ZM116.591 161.16L114.457 167.564L111.574 168.323L114.308 161.761L116.591 161.16Z" fill="#D9D9D9"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M137.124 166.684L120.059 171.843C121.436 169.852 123.515 168.104 126.107 166.949C129.993 165.218 134.099 165.235 137.124 166.684Z" fill="url(#paint6_linear_15201_1173)"/>
+<path opacity="0.35" fill-rule="evenodd" clip-rule="evenodd" d="M110 159.5L103 177L87 158L87.3514 157H87.5C91.0041 159.285 99.5497 162.072 107.714 156.729L110 159.5Z" fill="#373737"/>
+<path opacity="0.35" fill-rule="evenodd" clip-rule="evenodd" d="M108.918 160L102.563 175.888L95 166.907C99.0152 168.003 103.942 167.186 108.918 160Z" fill="#373737"/>
+<path opacity="0.35" fill-rule="evenodd" clip-rule="evenodd" d="M103 177L146 164L147.422 160.499C125.321 168.099 113.797 163.295 110.337 159.409L110 159.5L103 177Z" fill="#414141"/>
+<path opacity="0.35" fill-rule="evenodd" clip-rule="evenodd" d="M115.405 173.25L103 177L106.407 168.482L106.5 168.5C107.794 170.203 110.688 172.185 115.405 173.25Z" fill="#414141"/>
+<path d="M84.1495 98.749C85.7795 95.563 89.5517 89.0177 91.6006 88.3246M122.025 53.0034C120.365 54.37 115.982 57.5946 111.729 59.5602C106.413 62.0173 99.2597 65.5348 99.7899 66.4532M79.5994 66.4773C79.8108 64.7226 81.2968 60.7217 85.5498 58.756C89.8028 56.7904 95.1519 53.8246 97.2948 52.5873M57 101.566C58.9015 100.265 62.9373 96.7915 63.8689 93.3149C64.8004 89.8382 69.7073 85.046 72.0443 83.0845" stroke="#A4CAD8" stroke-width="0.5" stroke-linecap="round"/>
+<path d="M32.7944 159.418C34.6819 157.713 38.4815 153.919 38.5805 152.385M57.2327 125C56.5999 126.391 55.1925 129.993 54.6253 133.275C53.9164 137.377 52.8174 142.934 52.0893 142.739M55.7869 156.605C56.9527 156.137 59.4261 154.381 59.9932 151.1C60.5603 147.818 61.6125 143.6 62.0677 141.902M35.8545 178.575C36.3985 177.03 38.0404 173.621 40.2559 172.342C42.4713 171.062 44.8587 166.812 45.7754 164.847" stroke="#A4CAD8" stroke-width="0.5" stroke-linecap="round"/>
+<ellipse cx="144.185" cy="38.2937" rx="4" ry="2" transform="rotate(47.1941 144.185 38.2937)" fill="#B8EDFF"/>
+<ellipse cx="121.185" cy="78.2937" rx="4" ry="2" transform="rotate(-16.0433 121.185 78.2937)" fill="#B8EDFF"/>
+<ellipse cx="159.397" cy="62.0274" rx="4" ry="2" transform="rotate(29.2225 159.397 62.0274)" fill="#B8EDFF"/>
+<ellipse cx="148.195" cy="23.2513" rx="2.09728" ry="1.04864" transform="rotate(47.1941 148.195 23.2513)" fill="#B8EDFF"/>
+<ellipse cx="141.194" cy="72.2514" rx="2.09728" ry="1.04864" transform="rotate(-16.7345 141.194 72.2514)" fill="#B8EDFF"/>
+<ellipse cx="132.31" cy="89.6083" rx="2.09728" ry="1.04864" transform="rotate(-49.4992 132.31 89.6083)" fill="#B8EDFF"/>
+<ellipse cx="1.51595" cy="0.757973" rx="1.51595" ry="0.757973" transform="matrix(0.998782 0.0493432 0.0493432 -0.998782 131.01 25.3271)" fill="#B8EDFF"/>
+<ellipse cx="1.51595" cy="0.757973" rx="1.51595" ry="0.757973" transform="matrix(0.998782 0.0493432 0.0493432 -0.998782 113 42.5142)" fill="#B8EDFF"/>
+<ellipse cx="1.51595" cy="0.757973" rx="1.51595" ry="0.757973" transform="matrix(0.926065 0.377363 0.377363 -0.926065 147.861 59.9619)" fill="#B8EDFF"/>
+<ellipse cx="91.5847" cy="137.213" rx="1.99777" ry="0.998886" transform="rotate(86.1254 91.5847 137.213)" fill="#B8EDFF"/>
+<ellipse cx="72.1138" cy="136.124" rx="1.99777" ry="0.998886" transform="rotate(45.416 72.1138 136.124)" fill="#B8EDFF"/>
+<ellipse cx="84.9041" cy="153.224" rx="1.99777" ry="0.998886" transform="rotate(58.0704 84.9041 153.224)" fill="#B8EDFF"/>
+<ellipse cx="101.831" cy="136.16" rx="1.04747" ry="0.523737" transform="rotate(108.653 101.831 136.16)" fill="#B8EDFF"/>
+<ellipse cx="77.3415" cy="147.6" rx="1.04747" ry="0.523737" transform="rotate(44.7248 77.3415 147.6)" fill="#B8EDFF"/>
+<ellipse cx="67.6066" cy="147.844" rx="1.04747" ry="0.523737" transform="rotate(11.9601 67.6066 147.844)" fill="#B8EDFF"/>
+<ellipse cx="0.757128" cy="0.378564" rx="0.757128" ry="0.378564" transform="matrix(0.433854 0.900983 0.900983 -0.433854 95.499 131.934)" fill="#B8EDFF"/>
+<ellipse cx="0.757128" cy="0.378564" rx="0.757128" ry="0.378564" transform="matrix(0.433854 0.900983 0.900983 -0.433854 83.6611 128.134)" fill="#B8EDFF"/>
+<ellipse cx="0.757128" cy="0.378564" rx="0.757128" ry="0.378564" transform="matrix(0.110953 0.993826 0.993826 -0.110953 84.3242 147.593)" fill="#B8EDFF"/>
+<ellipse cx="60.432" cy="160.098" rx="1.99777" ry="0.998886" transform="rotate(159.666 60.432 160.098)" fill="#B8EDFF"/>
+<ellipse cx="61.0671" cy="167.564" rx="1.04747" ry="0.523737" transform="rotate(-177.806 61.0671 167.564)" fill="#B8EDFF"/>
+<ellipse cx="0.757128" cy="0.378564" rx="0.757128" ry="0.378564" transform="matrix(-0.741136 0.671355 0.671355 0.741136 66.123 160)" fill="#B8EDFF"/>
+<ellipse cx="0.757128" cy="0.378564" rx="0.757128" ry="0.378564" transform="matrix(-0.269368 0.963037 0.963037 0.269368 55.4082 159)" fill="#B8EDFF"/>
+<ellipse cx="160.052" cy="140.17" rx="1.99777" ry="0.998886" transform="rotate(130.243 160.052 140.17)" fill="#B8EDFF"/>
+<ellipse cx="152.132" cy="158.266" rx="1.99777" ry="0.998886" transform="rotate(175.509 152.132 158.266)" fill="#B8EDFF"/>
+<ellipse cx="155.071" cy="148.141" rx="1.04747" ry="0.523737" transform="rotate(129.552 155.071 148.141)" fill="#B8EDFF"/>
+<ellipse cx="151.643" cy="140.102" rx="1.04747" ry="0.523737" transform="rotate(96.7874 151.643 140.102)" fill="#B8EDFF"/>
+<ellipse cx="0.757128" cy="0.378564" rx="0.757128" ry="0.378564" transform="matrix(-0.979775 0.200102 0.200102 0.979775 159.483 154)" fill="#B8EDFF"/>
+<path d="M53.1633 163.065C52.7784 163.665 53.1633 164.149 53.4039 164.315C55.5692 166.066 55.8098 166.316 56.0504 166.566C56.2909 166.816 56.5315 167.066 56.7721 168.316C57.0127 169.566 58.6968 168.816 58.9374 168.316C59.178 167.816 58.6968 166.566 57.9751 165.815C57.2533 165.065 56.0504 165.315 55.8098 165.065C55.5692 164.815 55.3286 164.065 54.8474 163.065C54.3662 162.065 54.6068 162.315 54.3662 162.065C54.1256 161.815 53.6445 162.315 53.1633 163.065Z" fill="#B8EDFF"/>
+<path d="M182.5 161C181.3 160.6 179.667 161.167 179 161.5C175.5 163 183.5 165 186 165C188.5 165 190.5 165 193 165.5C195.5 166 195 168 193.5 169.5C192 171 192 172 193 174.5C194 177 197.5 176 198 175C198.5 174 196.5 173.5 195.5 172C194.5 170.5 198.5 170 199 168C199.5 166 196.5 166.5 195 164.5C193.5 162.5 189.5 163 187 162.5C184.5 162 184 161.5 182.5 161Z" fill="#B8EDFF"/>
+<path d="M157.838 180.12C155.01 179.933 152.957 181.129 152.284 181.75C151.779 181.982 150.467 182.262 149.255 181.517C147.741 180.585 153.294 178.956 157.333 178.956C161.372 178.956 163.391 179.421 165.915 178.956C168.439 178.49 164.906 177.559 166.42 177.093C167.935 176.627 168.439 178.024 168.944 178.723C169.449 179.421 166.42 180.12 163.896 180.353C161.372 180.586 161.372 180.353 157.838 180.12Z" fill="#B8EDFF"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M120.454 138.951C119.997 138.877 119.365 138.877 118.5 139C115.818 139.383 113.43 143.877 112.235 146.181C113.606 145.21 115.701 143.72 116.775 142.933C117.886 142.118 119.502 140.18 120.454 138.951ZM111.01 147.601C110.334 148.771 109.407 150.204 108.941 150.338C108.58 150.441 108.268 149.85 107.982 149.029C107.988 149.02 107.994 149.01 108 149C109.027 147.288 110.055 147.452 110.761 147.565C110.849 147.579 110.932 147.592 111.01 147.601Z" fill="#D8AA80"/>
+<path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M107.793 144.004C108.129 144.563 108.96 145 109.5 145C110.098 145 110.921 144.253 111.507 143.598C111.432 143.094 110.99 142.365 109.692 142.933C108.958 143.253 108.284 143.594 107.793 144.004ZM111.867 143.171C111.906 143.114 111.947 143.054 111.99 142.991C111.993 142.994 111.996 142.997 112 143C111.96 143.053 111.915 143.111 111.867 143.171Z" fill="#D8AA80"/>
+<path d="M10.5001 172C10.1001 171.6 8 170.333 7.5 169C7 166.5 9.5 168 9 168C8.5 168 10.5001 170.5 11.5001 171C12.5001 171.5 12.5001 172 13.0001 173C13.5001 174 15.5001 174.5 17.5001 174C19.5001 173.5 21.0001 173 23.0001 173C25.0001 173 25.5 174 25 175C24.5 176 23.5001 175.5 22.0001 174.5C20.5001 173.5 19.5001 175 15.5001 175.5C11.5001 176 13.5001 175 12.0001 174.5C10.5001 174 11.0001 172.5 10.5001 172Z" fill="#B8EDFF"/>
+<path opacity="0.25" d="M107 144.5C103 147.7 112 154.5 117 157.5C124.6 163.67 118.166 170.737 114 173.5C121.333 172.167 136.6 168.8 139 166C141.4 163.2 141.333 154.833 141 151C140 149.833 137.6 147.4 136 147C134 146.5 136.5 152 122.5 150.5C108.5 149 112 140.5 107 144.5Z" fill="#242424"/>
+<path d="M141.929 104.456C142.626 104.507 143.295 103.135 143.423 101.391C143.551 99.6472 143.089 98.1923 142.391 98.1412L141.627 98.0852L141.165 104.4L141.929 104.456Z" fill="#9D3A3A"/>
+<ellipse cx="141.495" cy="101.25" rx="1.2663" ry="3.16576" transform="rotate(4.18717 141.495 101.25)" fill="#BC5B5B"/>
+<ellipse cx="141.306" cy="101.216" rx="0.924999" ry="2.5" transform="rotate(4.18717 141.306 101.216)" fill="black"/>
+<path d="M165.275 115.037C163.48 115.578 153.426 117.97 148.624 119.098L151.154 113.902C151.674 113.653 153.366 113.017 155.971 112.466C159.228 111.778 164.522 112.076 165.915 112.457C167.307 112.839 169.339 112.427 170.242 111.847L172.409 110.455C172.796 110.461 173.5 110.724 173.221 111.719C172.872 112.963 171.686 112.705 170.602 113.401C169.519 114.097 167.519 114.36 165.275 115.037Z" fill="#D8AA80"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M152.889 118.09C157.848 116.911 163.918 115.445 165.275 115.036C165.988 114.822 166.676 114.648 167.319 114.49C163.087 114.364 160.408 113.082 159.138 112.096C158.707 112.117 158.28 112.147 157.865 112.188L152.5 118L152.889 118.09Z" fill="#B98454"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M162.826 115.682C160.069 116.375 155.715 117.42 152.137 118.269L157 113C157.629 113.754 159.528 115.077 162.826 115.682Z" fill="#966232"/>
+<path d="M138.347 144.159C138.518 142.614 139.205 139.509 139.528 138.149L134.376 136.217C134.662 137.72 135.235 141.154 135.235 142.871C135.235 145.018 135.449 145.125 135.235 146.842C135.02 148.559 135.127 149.418 137.274 149.418C138.991 149.418 138.704 148.345 138.347 147.808C138.275 147.236 138.175 145.704 138.347 144.159Z" fill="#D8AA80"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M138.507 143.057C137.1 143.382 136.009 143.13 135.233 142.687C135.196 140.919 134.652 137.668 134.376 136.217L139.528 138.149C139.271 139.233 138.781 141.428 138.507 143.057Z" fill="#B98454"/>
+<path d="M122.356 132.844C124.331 131.814 130.691 129.124 133.625 127.908C134.555 128.909 140.837 130.397 146.074 134.776C140.493 140.035 137.918 139.391 130.405 138.425C127.084 137.998 122.642 138.425 120.854 138.425C120.031 139.534 118.063 141.988 116.775 142.933C115.488 143.877 112.733 145.83 111.517 146.689C110.909 147.833 109.542 150.166 108.941 150.338C108.19 150.552 107.653 147.762 107.117 146.152C106.58 144.542 107.975 143.684 109.692 142.933C111.066 142.332 111.481 143.183 111.517 143.684C111.91 143.111 112.955 141.58 113.985 140.035C115.273 138.103 119.888 134.132 122.356 132.844Z" fill="#FFDDBD"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M132.187 138.657C131.954 138.627 131.715 138.595 131.471 138.564C131.127 138.519 130.772 138.472 130.405 138.425C127.996 138.115 124.997 138.255 122.849 138.355C122.05 138.392 121.369 138.424 120.88 138.425C120.199 137.823 120 136.971 120 136.5C122.375 136.203 123.692 135.378 124.684 134.756C125.364 134.33 125.891 134 126.5 134C127.622 134 130.582 136.916 132.187 138.657Z" fill="#D8AA80"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M132.206 138.659C131.966 138.628 131.722 138.596 131.471 138.564C131.127 138.519 130.772 138.472 130.405 138.425C127.996 138.115 124.997 138.255 122.849 138.355C122.07 138.391 121.403 138.422 120.917 138.425C120.92 138.416 120.923 138.406 120.926 138.397C120.958 138.301 121 138.176 121 138C123.228 137.722 125.146 137.133 126.667 136.666C127.877 136.294 128.836 136 129.5 136C130.286 136 130.686 136.572 131.289 137.434C131.544 137.798 131.835 138.213 132.206 138.659Z" fill="#B98454"/>
+<path d="M139.098 111.426C135.234 110.997 130.929 109.181 130.5 108L129.176 108.5C129.176 108.5 131.336 113.247 134 115C136.367 116.558 140.493 119.368 143.928 121.085C147.362 122.802 150.474 124.841 153.157 123.446C155.84 122.051 157.665 119.046 158.845 116.47C160.026 113.895 158.523 112.5 157.665 111.426C156.806 110.353 154.767 112.178 153.157 112.5C151.548 112.822 143.928 111.963 139.098 111.426Z" fill="#FFDDBD"/>
+<path d="M126.894 104.635C130.094 105.835 130.894 107.801 130.894 108.635H129.395C128.395 108.134 125.894 106.635 124.894 105.635C123.894 104.635 122.894 103.135 126.894 104.635Z" fill="#FFDDBD"/>
+<path d="M145.967 112.821L147.684 108.529L151.762 106.275L153.748 106.811L151.762 115.075L145.967 112.821Z" fill="#FFDDBD"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M146.123 112.43L147.684 108.529L151.762 106.275L153.747 106.811L153.047 109.728C151.147 111.614 148.374 112.468 146.123 112.43Z" fill="#D8AA80"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M153.389 106.714C152.263 109.282 149.877 111.199 147.769 111.907C147.157 112.202 146.601 112.396 146.095 112.502L147.684 108.529L151.762 106.275L153.389 106.714Z" fill="#B98454"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M145.404 110.307C149.229 110.786 155.385 108.354 155.385 102.149C155.385 97.2136 151.072 96.0752 147.247 95.5961C143.458 95.1217 141.603 98.0304 141.073 102.033L139.84 103.574C139.657 103.803 139.709 104.14 139.953 104.302L140.784 104.856C140.627 107.851 141.268 110.307 145.404 110.307Z" fill="#FFDDBD"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M143.293 108.372C147.118 108.851 153.274 106.419 153.274 100.215C153.274 98.9036 152.97 97.8604 152.451 97.0264C154.167 97.9754 155.386 99.526 155.386 102.149C155.386 108.354 149.23 110.786 145.405 110.307C142.927 110.307 141.703 109.426 141.154 108.075C141.734 108.268 142.439 108.372 143.293 108.372Z" fill="#D8AA80"/>
+<path d="M125.612 131.375C125.551 132.387 125.648 133.432 125.99 134.415C126.454 135.749 127.471 137.18 128.429 138.312C129.11 138.34 129.778 138.39 130.405 138.471C130.772 138.518 131.127 138.564 131.471 138.609C138.176 139.486 140.765 139.824 146.074 134.822C142.65 131.959 138.779 130.332 136.25 129.269C134.91 128.706 133.947 128.3 133.624 127.954C131.695 128.754 128.283 130.191 125.612 131.375Z" fill="#206777"/>
+<path d="M125.612 131.375C125.551 132.387 125.648 133.432 125.99 134.415C126.454 135.749 127.471 137.18 128.429 138.312C129.11 138.34 129.778 138.39 130.405 138.471C130.772 138.518 131.127 138.564 131.471 138.609C138.176 139.486 140.765 139.824 146.074 134.822C142.65 131.959 138.779 130.332 136.25 129.269C134.91 128.706 133.947 128.3 133.624 127.954C131.695 128.754 128.283 130.191 125.612 131.375Z" fill="url(#paint7_linear_15201_1173)" fill-opacity="0.4"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M140.125 131.012L140 131C140.333 132.5 140.4 135.7 138 136.5C135.9 137.2 133.8 136.185 131.7 135.17C130.8 134.735 129.9 134.3 129 134C127.799 133.599 126.715 133.683 125.848 133.951C125.889 134.107 125.937 134.262 125.99 134.415C126.454 135.749 127.471 137.18 128.429 138.312C129.111 138.34 129.778 138.39 130.405 138.471C130.772 138.518 131.127 138.564 131.471 138.609L131.471 138.609C138.176 139.486 140.766 139.824 146.074 134.822C144.126 133.193 142.033 131.965 140.125 131.012Z" fill="#064351"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M158.993 113.324C158.792 113.475 158.579 113.656 158.338 113.861C157.114 114.898 155.179 116.538 150.5 118C144.156 119.982 133.687 114.105 130.581 111.08C131.455 112.489 132.664 114.121 134 115C134.284 115.187 134.594 115.393 134.926 115.612C137.349 117.218 140.906 119.575 143.928 121.085C144.381 121.312 144.83 121.545 145.272 121.774C148.177 123.281 150.829 124.657 153.157 123.446C155.84 122.051 157.665 119.046 158.845 116.47C159.45 115.15 159.35 114.139 158.993 113.324Z" fill="#D8AA80"/>
+<path d="M155.463 114.379C155.432 113.657 155.206 113.08 155.012 112.585C154.904 112.309 154.805 112.057 154.757 111.821L156.097 111.403C156.155 111.687 156.319 112.002 156.502 112.351C156.792 112.907 157.129 113.552 157.162 114.307C157.212 115.502 157.152 116.872 156.731 117.874C156.351 118.776 155.554 120.047 154.757 121.222C154.642 121.391 154.526 121.559 154.411 121.726L154.637 121.7C154.96 121.664 155.222 121.634 155.411 121.622C155.188 121.916 154.828 122.378 154.395 122.933C152.88 124.874 150.472 127.959 149.938 129.027C149.497 129.909 149.877 130.297 150.554 130.989C151.196 131.644 152.104 132.573 152.835 134.452C150.26 134.774 145.001 134.715 142.211 133.749C139.978 132.976 135.485 129.564 133.518 127.954C134.162 126.702 135.707 123.811 136.737 122.266C137.768 120.72 139.027 119.118 139.528 118.51C140.058 118.837 140.982 119.34 142.14 119.859C143.105 118.323 144.208 116.485 144.654 115.481C144.922 114.879 144.992 114.153 144.947 113.45C144.902 112.75 144.748 112.143 144.632 111.824L146.207 111.824C146.253 111.949 146.301 112.054 146.349 112.158C146.479 112.44 146.603 112.709 146.644 113.341C146.699 114.202 146.626 115.229 146.207 116.172C145.742 117.219 144.682 118.999 143.732 120.52C144.888 120.96 146.168 121.362 147.469 121.622C149.133 121.955 150.797 121.982 152.192 121.913C152.562 121.405 152.962 120.839 153.35 120.267C154.152 119.086 154.857 117.942 155.164 117.214C155.429 116.584 155.512 115.54 155.463 114.379Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M124.022 104.191C125.128 104.629 126.82 105.48 127.5 106.5C127.803 106.955 128.107 107.319 128.369 107.632C128.61 107.92 128.815 108.166 128.952 108.401C127.789 107.765 125.769 106.509 124.894 105.635C124.391 105.132 123.888 104.502 124.022 104.191Z" fill="#D8AA80"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M146.14 111.824C146.627 115.992 143.754 119.746 140 123.5C136.874 126.626 141.37 128.384 145.179 129.873C147.463 130.766 149.501 131.563 149.501 132.5C149.501 134.212 146.08 134.336 143.632 134.128C146.534 134.724 150.651 134.726 152.836 134.452C152.105 132.573 151.196 131.644 150.554 130.989C149.877 130.297 149.497 129.909 149.938 129.027C150.472 127.959 152.88 124.874 154.395 122.933C154.829 122.378 155.189 121.916 155.412 121.622C155.223 121.635 154.96 121.664 154.638 121.7L154.411 121.726C154.527 121.559 154.643 121.391 154.757 121.222C155.555 120.047 156.351 118.776 156.731 117.874C157.038 117.145 157.153 116.221 157.174 115.312C156.624 115.533 156.044 115.671 155.454 115.722C155.415 116.323 155.322 116.841 155.165 117.214C154.858 117.943 154.152 119.086 153.351 120.267C152.962 120.839 152.562 121.405 152.193 121.913C150.798 121.982 149.134 121.955 147.47 121.622C146.169 121.362 144.888 120.96 143.733 120.52C144.683 118.999 145.742 117.219 146.208 116.172C146.627 115.229 146.699 114.202 146.644 113.342C146.604 112.709 146.48 112.44 146.349 112.158C146.302 112.055 146.253 111.949 146.208 111.824L146.14 111.824Z" fill="#D9D9D9"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M151.897 126.176C150.998 127.375 150.216 128.472 149.938 129.027C149.742 129.42 149.708 129.716 149.792 129.983C148.8 129.438 147.769 128.884 147 128.5C146.436 128.218 145.753 127.975 145.119 127.751C143.503 127.178 142.205 126.718 144 126C144.826 125.669 145.652 125.939 146.605 126.251C147.979 126.7 149.617 127.236 151.897 126.176Z" fill="#BABABA"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M120.427 138.986C119.472 140.217 117.876 142.126 116.775 142.933C115.65 143.758 113.404 145.354 112.044 146.316C113.662 143.048 116.911 138.356 120.427 138.986Z" fill="#D8AA80"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M111.286 147.114C110.612 148.33 109.475 150.185 108.941 150.338C108.661 150.418 108.411 150.08 108.18 149.543C108.82 148.021 110.04 146.152 111.286 147.114Z" fill="#D8AA80"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M107.184 144.731C107.579 143.964 108.566 143.425 109.693 142.932C111.042 142.342 111.466 143.153 111.515 143.657C111.267 144.114 110.683 144.605 109.5 145C108.166 145.444 107.491 145.189 107.184 144.731Z" fill="#D8AA80" fill-opacity="0.5"/>
+<path d="M141.5 107.533L141.5 106.467C141.5 106.209 141.709 106 141.967 106L143 106C143.552 106 144 106.448 144 107C144 107.552 143.552 108 143 108L141.967 108C141.709 108 141.5 107.791 141.5 107.533Z" fill="black"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M142.023 107.801C142.049 107.872 142.095 107.939 142.158 108L143.333 108C143.701 108 143.999 107.702 143.999 107.333C143.999 107.278 143.993 107.224 143.98 107.172C143.769 107.065 143.491 107 143.185 107C142.612 107 142.134 107.229 142.023 107.532L142.023 107.801Z" fill="#E5A4A4"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M142.871 108C142.834 107.948 142.814 107.892 142.814 107.833C142.814 107.557 143.257 107.333 143.802 107.333C143.87 107.333 143.936 107.337 144 107.343C143.995 107.707 143.698 108 143.334 108L142.871 108Z" fill="#D07474"/>
+<path d="M142.706 104.221C143.404 104.272 144.073 102.9 144.2 101.156C144.328 99.4124 143.866 97.9574 143.169 97.9063L142.404 97.8504L141.942 104.165L142.706 104.221Z" fill="#9D3A3A"/>
+<ellipse cx="142.272" cy="101.015" rx="1.2663" ry="3.16576" transform="rotate(4.18717 142.272 101.015)" fill="#BC5B5B"/>
+<ellipse cx="142.084" cy="100.981" rx="0.924999" ry="2.5" transform="rotate(4.18717 142.084 100.981)" fill="black"/>
+<path d="M149.674 101.273L143.265 99.8007L143.192 100.798L149.638 101.771L149.674 101.273Z" fill="#BC5B5B"/>
+<path d="M149.638 101.771L143.69 100.835L143.654 101.333L149.601 102.27L149.638 101.771Z" fill="#9D3A3A"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M142.854 97.4745C143.713 97.081 145.5 96.5 145.5 97C145.5 98.9223 145.633 99.174 146.501 100.811C146.537 100.877 146.573 100.945 146.61 101.016C147.383 102.476 149.723 105.416 150.796 106.704H150.824L151.762 108.743C152.37 109.494 154.08 111.362 156.055 112.821C157.785 114.1 159.251 114.271 161.045 114.481C161.811 114.571 162.636 114.668 163.567 114.86C161.593 114.088 159.883 111.39 159.275 110.138C160.026 110.603 162.43 111.92 166.036 113.465C169.642 115.01 177.197 113.68 180.524 112.821C178.02 112.785 172.432 112.585 170.114 112.07C167.796 111.555 165.213 108.779 164.211 107.455C165.177 107.169 168.289 107.026 173.012 108.743C172.349 107.419 169.644 106.158 166.768 105.208C167.065 105.195 167.357 105.193 167.645 105.202C168.072 105.214 168.507 105.224 168.946 105.234C171.976 105.303 175.173 105.375 177.105 106.508C177.207 106.573 177.309 106.638 177.411 106.704C177.313 106.635 177.211 106.57 177.105 106.508C170.239 102.15 162.364 99.7898 159.097 99.1138C162.105 99.715 168.781 100.383 172.582 98.4403C164.104 97.4745 160.991 97.0452 157.772 94.8988C156.947 94.3493 156.264 93.7857 155.631 93.2639C153.792 91.7474 152.38 90.5836 149.186 91.1425C148.428 91.2751 147.748 91.3843 147.136 91.4825C144.279 91.9406 142.917 92.1591 142.21 93.3963C141.523 94.5983 142.353 96.616 142.854 97.4745Z" fill="#E19030"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M173.305 114.052C166.772 110.966 157.736 104.683 155.5 102C153 99 147.501 95 146.001 95C145.077 95 144.884 95.9877 144.92 96.8226C145.263 96.7792 145.5 96.8178 145.5 97C145.5 98.9223 145.634 99.174 146.502 100.811L146.611 101.016C147.384 102.476 149.723 105.416 150.796 106.704H150.824L151.763 108.743C152.371 109.494 154.081 111.362 156.055 112.821C157.785 114.1 159.252 114.271 161.046 114.481C161.605 114.547 162.197 114.616 162.838 114.724L162.958 114.559C162.869 114.505 162.781 114.449 162.693 114.389C147.54 108.861 150.524 98.5433 154 105C156.304 109.278 165.309 112.496 171.77 114.152C172.278 114.131 172.792 114.097 173.305 114.052Z" fill="#B26B16"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M168.246 107.48C167.443 106.976 166.615 106.425 165.827 105.901C163.321 104.234 161.207 102.827 161.5 104C161.807 105.23 163.317 106.539 164.529 107.382C165.23 107.254 166.494 107.207 168.246 107.48Z" fill="#B26B16"/>
+<path opacity="0.5" d="M155.5 169.5C151.5 168.3 140.5 168 135.5 168C131.1 166 120.667 170.833 116 173.5C119.167 173.333 125.7 173.2 126.5 174C127.5 175 138.5 176.5 137.5 178C136.5 179.5 129 183 129.5 186C130 189 136 184.5 138 182C140 179.5 143.5 179.5 147 178.5C150.5 177.5 163 177.5 165.5 173C168 168.5 160.5 171 155.5 169.5Z" fill="url(#paint8_radial_15201_1173)"/>
+<path d="M87.5 157.5C86.7 157.1 86.5 159 86.5 160C87 162.5 89 162.5 88.5 164C88 165.5 91.5 169 93.5 170C95.5 171 99 175.5 98.5 178.5C98 181.5 103 181.5 107 181C111 180.5 112 179.5 115.5 178C119 176.5 123.5 176.5 125 174.5C126.5 172.5 128.5 172 132.5 171C136.5 170 140.5 169.5 141.5 168C142.5 166.5 145.5 166 147.5 165.5C149.5 165 152.5 163 147.5 163C142.5 163 142.5 165 139 165C135.5 165 133 167 130 169C127 171 124.5 171 119.5 171.5C114.5 172 114 175 110.5 174C107 173 106 175.5 104 175.5C102 175.5 101 174.5 100.5 174C100 173.5 99 171.5 97 168.5C95 165.5 93 166 93 163.5C93 161 91 162 89.5 161C88 160 88.5 158 87.5 157.5Z" fill="#B8EDFF"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M86.8829 157.752C87.6173 159.683 88.8921 161.814 91 163.5C94.75 166.5 95.125 167.813 95.5 169.125C95.625 169.563 95.75 170 96 170.5C96.6411 171.782 98.1042 173.475 99.4671 175.053C100.23 175.936 100.962 176.782 101.5 177.5C103 179.5 108.5 179 112 177.5C113.044 177.052 114.044 176.427 115.053 175.796C117.424 174.312 119.843 172.798 123 173.5C123.95 173.711 124.922 173.699 125.889 173.535C125.569 173.814 125.276 174.132 125 174.5C124.086 175.718 122.059 176.195 119.823 176.72C118.388 177.057 116.868 177.414 115.5 178C114.569 178.399 113.815 178.763 113.134 179.091C111.256 179.997 109.936 180.633 107 181C103 181.5 98 181.5 98.5 178.5C99 175.5 95.5 171 93.5 170C91.5 169 88 165.5 88.5 164C88.75 163.25 88.375 162.875 87.875 162.375C87.375 161.875 86.75 161.25 86.5 160C86.5 159.335 86.5884 158.272 86.8829 157.752ZM148.957 163.079C148.554 164.122 148.02 165.027 147.326 165.543C147.385 165.529 147.443 165.514 147.5 165.5C149.263 165.059 151.802 163.454 148.957 163.079ZM145.36 166.016C141.914 166.179 137.351 167.589 135 169C134.61 169.234 134.158 169.53 133.657 169.857C132.99 170.294 132.234 170.788 131.418 171.272C131.761 171.185 132.122 171.095 132.5 171C133.425 170.769 134.349 170.564 135.236 170.368C138.189 169.715 140.731 169.153 141.5 168C142.178 166.982 143.777 166.425 145.36 166.016Z" fill="#82D3EE"/>
+</g>
+<defs>
+<filter id="filter0_f_15201_1173" x="6.5" y="-2" width="208" height="208" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="10" result="effect1_foregroundBlur_15201_1173"/>
+</filter>
+<radialGradient id="paint0_radial_15201_1173" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(95.7904 113.784) rotate(-36.5861) scale(81.7856 80.6058)">
+<stop offset="0.09375" stop-color="#00536D"/>
+<stop offset="1" stop-color="#008AB6"/>
+</radialGradient>
+<radialGradient id="paint1_radial_15201_1173" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(76 124) rotate(-42.1471) scale(106.552 101.157)">
+<stop offset="0.09375" stop-color="#0089B4"/>
+<stop offset="1" stop-color="#67DAFE"/>
+</radialGradient>
+<radialGradient id="paint2_radial_15201_1173" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(162.818 65.4977) rotate(-143.678) scale(26.5273 36.0191)">
+<stop stop-color="#0089B4"/>
+<stop offset="1" stop-color="#68DBFF"/>
+</radialGradient>
+<radialGradient id="paint3_radial_15201_1173" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(74.1378 92.2162) rotate(-48.1126) scale(45.7017 46.78)">
+<stop offset="0.09375" stop-color="#00536D"/>
+<stop offset="1" stop-color="#008AB6"/>
+</radialGradient>
+<linearGradient id="paint4_linear_15201_1173" x1="133.5" y1="152.5" x2="122" y2="133" gradientUnits="userSpaceOnUse">
+<stop/>
+<stop offset="1" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint5_linear_15201_1173" x1="103" y1="177" x2="93.5" y2="139" gradientUnits="userSpaceOnUse">
+<stop offset="0.236538" stop-color="#373737"/>
+<stop offset="1" stop-color="#AFAFAF" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint6_linear_15201_1173" x1="128.591" y1="165.622" x2="129.007" y2="181.127" gradientUnits="userSpaceOnUse">
+<stop stop-color="#424242"/>
+<stop offset="1"/>
+</linearGradient>
+<linearGradient id="paint7_linear_15201_1173" x1="141.5" y1="138.5" x2="132.5" y2="128" gradientUnits="userSpaceOnUse">
+<stop stop-color="#064351"/>
+<stop offset="1" stop-color="#064351" stop-opacity="0"/>
+</linearGradient>
+<radialGradient id="paint8_radial_15201_1173" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(132.022 177.343) rotate(-21.0359) scale(20.5744 14.1951)">
+<stop offset="0.09375" stop-color="#00536D"/>
+<stop offset="1" stop-color="#008AB6"/>
+</radialGradient>
+<clipPath id="clip0_15201_1173">
+<rect width="220" height="220" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/src/assets/icons/visu/ecogesture/ECOGESTURE0080.svg b/src/assets/icons/visu/ecogesture/ECOGESTURE0080.svg
new file mode 100644
index 0000000000000000000000000000000000000000..a7d4a30406c068ce00df493481d9bf3d322e6899
--- /dev/null
+++ b/src/assets/icons/visu/ecogesture/ECOGESTURE0080.svg
@@ -0,0 +1,103 @@
+<svg width="220" height="221" viewBox="0 0 220 221" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_15179_1604)">
+<path opacity="0.55" fill-rule="evenodd" clip-rule="evenodd" d="M17.4847 146.047C17.0114 145.762 16.8586 145.148 17.1432 144.674L21.2919 137.777C21.5766 137.304 22.191 137.151 22.6643 137.436C23.1375 137.721 23.2904 138.335 23.0057 138.808L18.8571 145.705C18.5724 146.179 17.958 146.331 17.4847 146.047ZM29.9307 125.356C29.4575 125.071 29.3046 124.457 29.5893 123.983L37.8866 110.189C38.1713 109.716 38.7857 109.563 39.259 109.848C39.7323 110.133 39.8852 110.747 39.6005 111.22L31.3031 125.014C31.0184 125.488 30.404 125.64 29.9307 125.356ZM46.5255 97.7678C46.0522 97.4831 45.8993 96.8687 46.184 96.3954L54.4814 82.6014C54.766 82.1282 55.3805 81.9753 55.8537 82.26C56.327 82.5446 56.4799 83.1591 56.1952 83.6323L47.8978 97.4263C47.6132 97.8996 46.9987 98.0525 46.5255 97.7678ZM63.1202 70.1798C62.6469 69.8951 62.4941 69.2807 62.7787 68.8074L71.0761 55.0134C71.3608 54.5402 71.9752 54.3873 72.4485 54.672C72.9217 54.9566 73.0746 55.5711 72.7899 56.0443L64.4926 69.8383C64.2079 70.3116 63.5935 70.4645 63.1202 70.1798ZM79.7149 42.5918C79.2417 42.3071 79.0888 41.6927 79.3735 41.2194L87.6708 27.4254C87.9555 26.9522 88.5699 26.7993 89.0432 27.084C89.5165 27.3687 89.6693 27.9831 89.3847 28.4563L81.0873 42.2503C80.8026 42.7236 80.1882 42.8765 79.7149 42.5918ZM96.3096 15.0038C95.8364 14.7191 95.6835 14.1047 95.9682 13.6315L100.117 6.73445C100.402 6.2612 101.016 6.10831 101.489 6.39299C101.963 6.67766 102.115 7.2921 101.831 7.76536L97.682 14.6624C97.3973 15.1356 96.7829 15.2885 96.3096 15.0038ZM26.742 104.049C26.4659 104.528 26.6298 105.139 27.1081 105.415C27.5864 105.691 28.1979 105.528 28.4741 105.049L32.8491 97.4715C33.1252 96.9932 32.9614 96.3816 32.4831 96.1055C32.0048 95.8293 31.3932 95.9932 31.117 96.4715L26.742 104.049ZM39.867 81.3161C39.5909 81.7943 39.7548 82.4059 40.2331 82.6821C40.7114 82.9582 41.3229 82.7943 41.5991 82.3161L50.3491 67.1606C50.6252 66.6823 50.4613 66.0707 49.9831 65.7946C49.5048 65.5184 48.8932 65.6823 48.617 66.1606L39.867 81.3161ZM57.367 51.0052C57.0909 51.4835 57.2548 52.0951 57.7331 52.3712C58.2113 52.6473 58.8229 52.4835 59.0991 52.0052L67.8491 36.8497C68.1252 36.3714 67.9613 35.7598 67.4831 35.4837C67.0048 35.2076 66.3932 35.3714 66.117 35.8497L57.367 51.0052ZM74.867 20.6943C74.5909 21.1726 74.7548 21.7842 75.2331 22.0603C75.7113 22.3364 76.3229 22.1726 76.5991 21.6943L80.9741 14.1166C81.2502 13.6383 81.0863 13.0267 80.6081 12.7505C80.1298 12.4744 79.5182 12.6383 79.242 13.1166L74.867 20.6943ZM93.9106 142.811C93.627 143.284 93.7813 143.899 94.2552 144.182C94.729 144.466 95.3431 144.312 95.6268 143.838L99.1828 137.896C99.4664 137.422 99.3122 136.808 98.8383 136.525C98.3644 136.241 97.7503 136.395 97.4667 136.869L93.9106 142.811ZM104.579 124.986C104.295 125.46 104.449 126.074 104.923 126.357C105.397 126.641 106.011 126.487 106.295 126.013L113.407 114.13C113.691 113.656 113.536 113.042 113.062 112.758C112.589 112.475 111.974 112.629 111.691 113.103L104.579 124.986ZM118.803 101.22C118.519 101.693 118.673 102.308 119.147 102.591C119.621 102.875 120.235 102.721 120.519 102.247L127.631 90.3636C127.915 89.8897 127.76 89.2756 127.287 88.9919C126.813 88.7083 126.199 88.8626 125.915 89.3365L118.803 101.22ZM133.027 77.4533C132.743 77.9272 132.898 78.5413 133.371 78.8249C133.845 79.1086 134.459 78.9543 134.743 78.4804L138.299 72.5388C138.583 72.065 138.429 71.4509 137.955 71.1672C137.481 70.8836 136.867 71.0379 136.583 71.5117L133.027 77.4533ZM85.4266 184.119C85.1505 184.597 85.3143 185.208 85.7926 185.485C86.2709 185.761 86.8825 185.597 87.1587 185.119L90.7837 178.84C91.0598 178.362 90.8959 177.75 90.4176 177.474C89.9393 177.198 89.3278 177.362 89.0516 177.84L85.4266 184.119ZM96.3016 165.283C96.0255 165.761 96.1893 166.372 96.6676 166.649C97.1459 166.925 97.7575 166.761 98.0337 166.283L105.284 153.725C105.56 153.247 105.396 152.635 104.918 152.359C104.439 152.083 103.828 152.247 103.552 152.725L96.3016 165.283ZM110.802 140.168C110.525 140.646 110.689 141.258 111.168 141.534C111.646 141.81 112.258 141.646 112.534 141.168L119.784 128.61C120.06 128.132 119.896 127.521 119.418 127.244C118.939 126.968 118.328 127.132 118.052 127.61L110.802 140.168ZM125.302 115.053C125.025 115.531 125.189 116.143 125.668 116.419C126.146 116.695 126.758 116.531 127.034 116.053L134.284 103.496C134.56 103.017 134.396 102.406 133.918 102.13C133.439 101.854 132.828 102.017 132.552 102.496L125.302 115.053ZM139.802 89.9383C139.525 90.4166 139.689 91.0282 140.168 91.3043C140.646 91.5805 141.258 91.4166 141.534 90.9383L148.784 78.3809C149.06 77.9026 148.896 77.291 148.418 77.0149C147.939 76.7388 147.328 76.9026 147.052 77.3809L139.802 89.9383ZM154.302 64.8236C154.025 65.3019 154.189 65.9134 154.668 66.1896C155.146 66.4657 155.758 66.3019 156.034 65.8236L159.659 59.5449C159.935 59.0666 159.771 58.455 159.293 58.1789C158.814 57.9027 158.203 58.0666 157.927 58.5449L154.302 64.8236ZM66.3538 91.1217C65.8887 90.8238 65.7533 90.2053 66.0512 89.7403L70.6296 82.5938C70.9275 82.1287 71.546 81.9933 72.011 82.2912C72.4761 82.5891 72.6115 83.2076 72.3136 83.6726L67.7352 90.8191C67.4373 91.2842 66.8188 91.4196 66.3538 91.1217ZM80.0889 69.6823C79.6238 69.3843 79.4884 68.7658 79.7863 68.3008L84.3647 61.1543C84.6626 60.6893 85.2811 60.5538 85.7461 60.8517C86.2112 61.1497 86.3466 61.7682 86.0487 62.2332L81.4703 69.3797C81.1724 69.8447 80.5539 69.9802 80.0889 69.6823ZM131.825 127.754C131.543 128.229 131.699 128.843 132.174 129.125C132.649 129.406 133.263 129.25 133.545 128.775L138.074 121.143C138.356 120.668 138.199 120.054 137.724 119.772C137.249 119.491 136.636 119.647 136.354 120.122L131.825 127.754ZM145.413 104.858C145.131 105.333 145.287 105.946 145.762 106.228C146.237 106.51 146.851 106.353 147.133 105.878L156.191 90.6139C156.473 90.1389 156.317 89.5254 155.842 89.2436C155.367 88.9617 154.753 89.1182 154.471 89.5932L145.413 104.858ZM163.53 74.3288C163.248 74.8037 163.405 75.4173 163.88 75.6991C164.355 75.981 164.968 75.8244 165.25 75.3495L174.309 60.0851C174.591 59.6101 174.434 58.9966 173.959 58.7148C173.484 58.4329 172.871 58.5894 172.589 59.0644L163.53 74.3288ZM181.647 43.8C181.366 44.2749 181.522 44.8884 181.997 45.1703C182.472 45.4522 183.086 45.2956 183.367 44.8207L187.897 37.1885C188.179 36.7135 188.022 36.1 187.547 35.8182C187.072 35.5363 186.459 35.6928 186.177 36.1678L181.647 43.8ZM62.3893 125.785C61.9102 125.51 61.7446 124.899 62.0195 124.42L66.2406 117.062C66.5154 116.582 67.1265 116.417 67.6056 116.692C68.0846 116.967 68.2502 117.578 67.9754 118.057L63.7543 125.415C63.4795 125.894 62.8683 126.06 62.3893 125.785ZM75.0526 103.71C74.5735 103.435 74.408 102.824 74.6828 102.345L83.125 87.6284C83.3998 87.1494 84.011 86.9838 84.49 87.2586C84.9691 87.5334 85.1346 88.1445 84.8598 88.6236L76.4176 103.34C76.1428 103.819 75.5317 103.985 75.0526 103.71ZM91.937 74.2769C91.458 74.0021 91.2924 73.3909 91.5672 72.9119L100.009 58.1953C100.284 57.7163 100.895 57.5507 101.374 57.8255C101.854 58.1003 102.019 58.7114 101.744 59.1905L93.302 73.9071C93.0272 74.3861 92.4161 74.5517 91.937 74.2769ZM108.821 44.8438C108.342 44.569 108.177 43.9578 108.452 43.4788L112.673 36.1205C112.948 35.6414 113.559 35.4759 114.038 35.7507C114.517 36.0255 114.682 36.6366 114.408 37.1157L110.186 44.4739C109.912 44.953 109.301 45.1186 108.821 44.8438ZM127.323 162.106C127.041 162.581 127.198 163.195 127.673 163.476C128.148 163.758 128.761 163.601 129.043 163.126L132.517 157.268C132.799 156.793 132.642 156.179 132.167 155.898C131.692 155.616 131.079 155.773 130.797 156.248L127.323 162.106ZM137.746 144.531C137.464 145.006 137.621 145.62 138.096 145.902C138.571 146.183 139.184 146.027 139.466 145.552L146.415 133.835C146.696 133.36 146.54 132.747 146.064 132.465C145.589 132.183 144.976 132.34 144.694 132.815L137.746 144.531ZM151.643 121.098C151.361 121.573 151.518 122.187 151.993 122.469C152.468 122.75 153.081 122.594 153.363 122.119L160.312 110.402C160.594 109.927 160.437 109.314 159.962 109.032C159.487 108.75 158.873 108.907 158.592 109.382L151.643 121.098ZM165.54 97.6654C165.259 98.1404 165.415 98.7539 165.89 99.0356C166.365 99.3174 166.979 99.1607 167.26 98.6856L170.735 92.8274C171.016 92.3524 170.86 91.7389 170.385 91.4572C169.91 91.1755 169.296 91.3322 169.015 91.8072L165.54 97.6654ZM57.2772 158.629C56.7996 158.351 56.6373 157.739 56.9147 157.262L60.6956 150.753C60.973 150.275 61.585 150.113 62.0625 150.39C62.5401 150.668 62.7024 151.28 62.425 151.757L58.6442 158.266C58.3668 158.744 57.7547 158.906 57.2772 158.629ZM68.6196 139.102C68.1421 138.824 67.9798 138.212 68.2572 137.735L75.8188 124.716C76.0962 124.239 76.7083 124.076 77.1858 124.354C77.6634 124.631 77.8257 125.243 77.5483 125.721L69.9866 138.739C69.7092 139.217 69.0972 139.379 68.6196 139.102ZM83.7429 113.065C83.2654 112.788 83.1031 112.176 83.3805 111.698L90.9421 98.68C91.2195 98.2024 91.8316 98.0401 92.3091 98.3175C92.7867 98.5949 92.949 99.2069 92.6716 99.6845L85.1099 112.703C84.8325 113.18 84.2205 113.343 83.7429 113.065ZM98.8662 87.0287C98.3887 86.7514 98.2264 86.1393 98.5038 85.6618L106.065 72.6436C106.343 72.166 106.955 72.0037 107.432 72.2811C107.91 72.5585 108.072 73.1706 107.795 73.6481L100.233 86.6663C99.9558 87.1439 99.3438 87.3061 98.8662 87.0287ZM113.99 60.9924C113.512 60.715 113.35 60.103 113.627 59.6254L117.408 53.1163C117.685 52.6387 118.297 52.4765 118.775 52.7539C119.252 53.0312 119.415 53.6433 119.137 54.1208L115.356 60.6299C115.079 61.1075 114.467 61.2698 113.99 60.9924ZM123.042 195.434C122.762 195.91 122.921 196.523 123.397 196.803C123.874 197.083 124.486 196.924 124.766 196.447L128.443 190.19C128.722 189.714 128.563 189.101 128.087 188.821C127.611 188.542 126.998 188.701 126.718 189.177L123.042 195.434ZM134.071 176.662C133.792 177.139 133.951 177.751 134.427 178.031C134.903 178.311 135.516 178.152 135.796 177.676L143.149 165.161C143.429 164.685 143.27 164.072 142.793 163.792C142.317 163.512 141.704 163.672 141.425 164.148L134.071 176.662ZM148.778 151.633C148.498 152.109 148.657 152.722 149.133 153.002C149.609 153.282 150.222 153.123 150.502 152.646L157.855 140.132C158.135 139.656 157.976 139.043 157.5 138.763C157.023 138.483 156.411 138.643 156.131 139.119L148.778 151.633ZM163.484 126.604C163.204 127.08 163.363 127.693 163.84 127.973C164.316 128.253 164.929 128.094 165.208 127.617L172.561 115.103C172.841 114.627 172.682 114.014 172.206 113.734C171.73 113.454 171.117 113.613 170.837 114.09L163.484 126.604ZM178.19 101.575C177.91 102.051 178.07 102.664 178.546 102.944C179.022 103.224 179.635 103.064 179.915 102.588L187.268 90.0737C187.547 89.5976 187.388 88.9848 186.912 88.705C186.436 88.4252 185.823 88.5844 185.543 89.0606L178.19 101.575ZM192.896 76.546C192.617 77.0222 192.776 77.635 193.252 77.9148C193.728 78.1946 194.341 78.0354 194.621 77.5592L198.297 71.3019C198.577 70.8257 198.418 70.2129 197.942 69.9331C197.466 69.6534 196.853 69.8126 196.573 70.2887L192.896 76.546ZM87.8806 131.265C87.4011 130.991 87.2344 130.38 87.5083 129.9L91.9527 122.119C92.2266 121.64 92.8374 121.473 93.317 121.747C93.7965 122.021 93.9632 122.632 93.6893 123.111L89.2449 130.892C88.971 131.372 88.3602 131.539 87.8806 131.265ZM101.214 107.922C100.734 107.648 100.567 107.037 100.841 106.558L109.73 90.9958C110.004 90.5162 110.615 90.3495 111.094 90.6234C111.574 90.8974 111.741 91.5082 111.467 91.9877L102.578 107.55C102.304 108.029 101.693 108.196 101.214 107.922ZM118.991 76.7982C118.512 76.5243 118.345 75.9135 118.619 75.4339L127.508 59.8721C127.782 59.3925 128.392 59.2258 128.872 59.4997C129.352 59.7737 129.518 60.3845 129.244 60.8641L120.356 76.4259C120.082 76.9055 119.471 77.0722 118.991 76.7982ZM136.769 45.6746C136.289 45.4006 136.123 44.7898 136.396 44.3102L140.841 36.5293C141.115 36.0498 141.726 35.883 142.205 36.157C142.685 36.4309 142.851 37.0417 142.577 37.5213L138.133 45.3022C137.859 45.7818 137.248 45.9485 136.769 45.6746ZM153.893 168.213C153.613 168.689 153.772 169.302 154.249 169.582C154.725 169.862 155.338 169.702 155.617 169.226L159.265 163.015C159.545 162.539 159.386 161.926 158.91 161.647C158.434 161.367 157.821 161.526 157.541 162.002L153.893 168.213ZM164.837 149.581C164.558 150.057 164.717 150.67 165.193 150.95C165.669 151.23 166.282 151.07 166.562 150.594L173.858 138.173C174.138 137.697 173.979 137.084 173.502 136.804C173.026 136.524 172.413 136.684 172.134 137.16L164.837 149.581ZM179.43 124.739C179.15 125.215 179.31 125.828 179.786 126.107C180.262 126.387 180.875 126.228 181.155 125.751L188.451 113.33C188.731 112.854 188.571 112.241 188.095 111.961C187.619 111.682 187.006 111.841 186.727 112.317L179.43 124.739ZM194.023 99.8959C193.743 100.372 193.902 100.985 194.379 101.265C194.855 101.544 195.468 101.385 195.747 100.909L203.044 88.4875C203.324 88.0113 203.164 87.3985 202.688 87.1188C202.212 86.839 201.599 86.9983 201.319 87.4745L194.023 99.8959ZM208.616 75.0532C208.336 75.5294 208.495 76.1422 208.971 76.4219C209.448 76.7017 210.06 76.5424 210.34 76.0662L213.988 69.8555C214.268 69.3793 214.109 68.7665 213.633 68.4868C213.156 68.2071 212.544 68.3663 212.264 68.8425L208.616 75.0532Z" fill="url(#paint0_radial_15179_1604)"/>
+<g opacity="0.25" filter="url(#filter0_f_15179_1604)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M3.4847 156.047C3.01143 155.762 2.85856 155.148 3.14323 154.675L7.29191 147.778C7.57659 147.304 8.19102 147.152 8.66429 147.436C9.13755 147.721 9.29043 148.335 9.00575 148.809L4.85707 155.706C4.57239 156.179 3.95796 156.332 3.4847 156.047ZM15.9307 135.356C15.4575 135.071 15.3046 134.457 15.5893 133.984L23.8866 120.19C24.1713 119.716 24.7857 119.564 25.259 119.848C25.7323 120.133 25.8852 120.747 25.6005 121.221L17.3031 135.015C17.0184 135.488 16.404 135.641 15.9307 135.356ZM32.5255 107.768C32.0522 107.483 31.8993 106.869 32.184 106.396L40.4814 92.6017C40.766 92.1284 41.3805 91.9755 41.8537 92.2602C42.327 92.5449 42.4799 93.1593 42.1952 93.6326L33.8978 107.427C33.6132 107.9 32.9987 108.053 32.5255 107.768ZM49.1202 80.18C48.6469 79.8954 48.4941 79.2809 48.7787 78.8077L57.0761 65.0137C57.3608 64.5404 57.9752 64.3875 58.4485 64.6722C58.9217 64.9569 59.0746 65.5713 58.7899 66.0446L50.4926 79.8386C50.2079 80.3118 49.5935 80.4647 49.1202 80.18ZM65.7149 52.5921C65.2417 52.3074 65.0888 51.6929 65.3735 51.2197L73.6708 37.4257C73.9555 36.9524 74.5699 36.7995 75.0432 37.0842C75.5165 37.3689 75.6693 37.9833 75.3847 38.4566L67.0873 52.2506C66.8026 52.7239 66.1882 52.8767 65.7149 52.5921ZM82.3096 25.0041C81.8364 24.7194 81.6835 24.105 81.9682 23.6317L86.1169 16.7347C86.4015 16.2614 87.016 16.1086 87.4892 16.3932C87.9625 16.6779 88.1154 17.2923 87.8307 17.7656L83.682 24.6626C83.3973 25.1359 82.7829 25.2887 82.3096 25.0041ZM12.742 114.049C12.4659 114.528 12.6298 115.139 13.1081 115.415C13.5864 115.692 14.1979 115.528 14.4741 115.049L18.8491 107.472C19.1252 106.993 18.9614 106.382 18.4831 106.106C18.0048 105.83 17.3932 105.993 17.117 106.472L12.742 114.049ZM25.867 91.3163C25.5909 91.7946 25.7548 92.4062 26.2331 92.6823C26.7114 92.9585 27.3229 92.7946 27.5991 92.3163L36.3491 77.1609C36.6252 76.6826 36.4613 76.071 35.9831 75.7948C35.5048 75.5187 34.8932 75.6826 34.617 76.1609L25.867 91.3163ZM43.367 61.0054C43.0909 61.4837 43.2548 62.0953 43.7331 62.3714C44.2113 62.6476 44.8229 62.4837 45.0991 62.0054L53.8491 46.85C54.1252 46.3717 53.9613 45.7601 53.4831 45.4839C53.0048 45.2078 52.3932 45.3717 52.117 45.85L43.367 61.0054ZM60.867 30.6945C60.5909 31.1728 60.7548 31.7844 61.2331 32.0605C61.7113 32.3367 62.3229 32.1728 62.5991 31.6945L66.9741 24.1168C67.2502 23.6385 67.0863 23.0269 66.6081 22.7508C66.1298 22.4746 65.5182 22.6385 65.242 23.1168L60.867 30.6945ZM79.9106 152.811C79.627 153.285 79.7813 153.899 80.2552 154.182C80.729 154.466 81.3431 154.312 81.6268 153.838L85.1828 147.896C85.4664 147.422 85.3122 146.808 84.8383 146.525C84.3644 146.241 83.7503 146.395 83.4667 146.869L79.9106 152.811ZM90.5787 134.986C90.2951 135.46 90.4494 136.074 90.9232 136.358C91.3971 136.641 92.0112 136.487 92.2949 136.013L99.4069 124.13C99.6905 123.656 99.5363 123.042 99.0624 122.758C98.5885 122.475 97.9744 122.629 97.6908 123.103L90.5787 134.986ZM104.803 111.22C104.519 111.694 104.673 112.308 105.147 112.591C105.621 112.875 106.235 112.721 106.519 112.247L113.631 100.364C113.915 99.8899 113.76 99.2758 113.287 98.9922C112.813 98.7086 112.199 98.8628 111.915 99.3367L104.803 111.22ZM119.027 87.4536C118.743 87.9275 118.898 88.5415 119.371 88.8252C119.845 89.1088 120.459 88.9546 120.743 88.4807L124.299 82.5391C124.583 82.0652 124.429 81.4511 123.955 81.1675C123.481 80.8839 122.867 81.0381 122.583 81.512L119.027 87.4536ZM71.4266 194.119C71.1505 194.597 71.3143 195.209 71.7926 195.485C72.2709 195.761 72.8825 195.597 73.1587 195.119L76.7837 188.84C77.0598 188.362 76.8959 187.75 76.4176 187.474C75.9393 187.198 75.3278 187.362 75.0516 187.84L71.4266 194.119ZM82.3016 175.283C82.0255 175.761 82.1893 176.373 82.6676 176.649C83.1459 176.925 83.7575 176.761 84.0337 176.283L91.2837 163.725C91.5598 163.247 91.3959 162.635 90.9176 162.359C90.4393 162.083 89.8278 162.247 89.5516 162.725L82.3016 175.283ZM96.8016 150.168C96.5255 150.646 96.6893 151.258 97.1676 151.534C97.6459 151.81 98.2575 151.646 98.5337 151.168L105.784 138.611C106.06 138.132 105.896 137.521 105.418 137.245C104.939 136.968 104.328 137.132 104.052 137.611L96.8016 150.168ZM111.302 125.053C111.025 125.532 111.189 126.143 111.668 126.419C112.146 126.695 112.758 126.532 113.034 126.053L120.284 113.496C120.56 113.018 120.396 112.406 119.918 112.13C119.439 111.854 118.828 112.018 118.552 112.496L111.302 125.053ZM125.802 99.9385C125.525 100.417 125.689 101.028 126.168 101.305C126.646 101.581 127.258 101.417 127.534 100.939L134.784 88.3812C135.06 87.9029 134.896 87.2913 134.418 87.0152C133.939 86.739 133.328 86.9029 133.052 87.3812L125.802 99.9385ZM140.302 74.8238C140.025 75.3021 140.189 75.9137 140.668 76.1898C141.146 76.466 141.758 76.3021 142.034 75.8238L145.659 69.5451C145.935 69.0668 145.771 68.4552 145.293 68.1791C144.814 67.903 144.203 68.0668 143.927 68.5451L140.302 74.8238ZM52.3538 101.122C51.8887 100.824 51.7533 100.206 52.0512 99.7405L56.6296 92.594C56.9275 92.129 57.546 91.9935 58.011 92.2914C58.4761 92.5894 58.6115 93.2079 58.3136 93.6729L53.7352 100.819C53.4373 101.284 52.8188 101.42 52.3538 101.122ZM66.0889 79.6825C65.6238 79.3846 65.4884 78.7661 65.7863 78.301L70.3647 71.1546C70.6626 70.6895 71.2811 70.5541 71.7461 70.852C72.2112 71.1499 72.3466 71.7684 72.0487 72.2334L67.4703 79.3799C67.1724 79.845 66.5539 79.9804 66.0889 79.6825ZM117.825 137.754C117.543 138.229 117.699 138.843 118.174 139.125C118.649 139.407 119.263 139.25 119.545 138.775L124.074 131.143C124.356 130.668 124.199 130.054 123.724 129.773C123.249 129.491 122.636 129.647 122.354 130.122L117.825 137.754ZM131.413 114.858C131.131 115.333 131.287 115.946 131.762 116.228C132.237 116.51 132.851 116.353 133.133 115.879L142.191 100.614C142.473 100.139 142.317 99.5257 141.842 99.2438C141.367 98.962 140.753 99.1185 140.471 99.5934L131.413 114.858ZM149.53 84.329C149.248 84.804 149.405 85.4175 149.88 85.6993C150.355 85.9812 150.968 85.8247 151.25 85.3497L160.309 70.0853C160.591 69.6104 160.434 68.9969 159.959 68.715C159.484 68.4332 158.871 68.5897 158.589 69.0646L149.53 84.329ZM167.647 53.8002C167.366 54.2752 167.522 54.8887 167.997 55.1705C168.472 55.4524 169.086 55.2959 169.367 54.8209L173.897 47.1887C174.179 46.7138 174.022 46.1003 173.547 45.8184C173.072 45.5365 172.459 45.6931 172.177 46.168L167.647 53.8002ZM48.3893 135.785C47.9102 135.51 47.7446 134.899 48.0195 134.42L52.2406 127.062C52.5154 126.583 53.1265 126.417 53.6056 126.692C54.0846 126.967 54.2502 127.578 53.9754 128.057L49.7543 135.415C49.4795 135.894 48.8683 136.06 48.3893 135.785ZM61.0526 113.71C60.5735 113.435 60.408 112.824 60.6828 112.345L69.125 97.6287C69.3998 97.1496 70.011 96.984 70.49 97.2588C70.9691 97.5337 71.1346 98.1448 70.8598 98.6238L62.4176 113.34C62.1428 113.819 61.5317 113.985 61.0526 113.71ZM77.937 84.2771C77.458 84.0023 77.2924 83.3912 77.5672 82.9121L86.0094 68.1956C86.2843 67.7165 86.8954 67.5509 87.3745 67.8257C87.8535 68.1006 88.0191 68.7117 87.7443 69.1907L79.302 83.9073C79.0272 84.3864 78.4161 84.5519 77.937 84.2771ZM94.8215 54.844C94.3424 54.5692 94.1769 53.9581 94.4517 53.479L98.6728 46.1207C98.9476 45.6417 99.5587 45.4761 100.038 45.7509C100.517 46.0257 100.682 46.6369 100.408 47.1159L96.1865 54.4742C95.9117 54.9532 95.3005 55.1188 94.8215 54.844ZM113.323 172.106C113.041 172.581 113.198 173.195 113.673 173.476C114.148 173.758 114.761 173.602 115.043 173.126L118.517 167.268C118.799 166.793 118.642 166.18 118.167 165.898C117.692 165.616 117.079 165.773 116.797 166.248L113.323 172.106ZM123.746 154.532C123.464 155.007 123.621 155.62 124.096 155.902C124.571 156.183 125.184 156.027 125.466 155.552L132.415 143.835C132.696 143.36 132.54 142.747 132.064 142.465C131.589 142.183 130.976 142.34 130.694 142.815L123.746 154.532ZM137.643 131.099C137.361 131.574 137.518 132.187 137.993 132.469C138.468 132.751 139.081 132.594 139.363 132.119L146.312 120.402C146.594 119.927 146.437 119.314 145.962 119.032C145.487 118.75 144.873 118.907 144.592 119.382L137.643 131.099ZM151.54 107.666C151.259 108.141 151.415 108.754 151.89 109.036C152.365 109.318 152.979 109.161 153.26 108.686L156.735 102.828C157.016 102.353 156.86 101.739 156.385 101.457C155.91 101.176 155.296 101.332 155.015 101.807L151.54 107.666ZM43.2772 168.629C42.7996 168.352 42.6373 167.74 42.9147 167.262L46.6956 160.753C46.973 160.275 47.585 160.113 48.0625 160.391C48.5401 160.668 48.7024 161.28 48.425 161.757L44.6442 168.267C44.3668 168.744 43.7547 168.906 43.2772 168.629ZM54.6196 149.102C54.1421 148.824 53.9798 148.212 54.2572 147.735L61.8188 134.717C62.0962 134.239 62.7083 134.077 63.1858 134.354C63.6634 134.632 63.8257 135.244 63.5483 135.721L55.9866 148.739C55.7092 149.217 55.0972 149.379 54.6196 149.102ZM69.7429 123.065C69.2654 122.788 69.1031 122.176 69.3805 121.698L76.9421 108.68C77.2195 108.203 77.8316 108.04 78.3091 108.318C78.7867 108.595 78.949 109.207 78.6716 109.685L71.1099 122.703C70.8325 123.18 70.2205 123.343 69.7429 123.065ZM84.8662 97.029C84.3887 96.7516 84.2264 96.1396 84.5038 95.662L92.0654 82.6438C92.3428 82.1663 92.9548 82.004 93.4324 82.2814C93.91 82.5588 94.0722 83.1708 93.7948 83.6484L86.2332 96.6666C85.9558 97.1441 85.3438 97.3064 84.8662 97.029ZM99.9895 70.9926C99.5119 70.7152 99.3497 70.1032 99.6271 69.6256L103.408 63.1165C103.685 62.639 104.297 62.4767 104.775 62.7541C105.252 63.0315 105.415 63.6435 105.137 64.1211L101.356 70.6302C101.079 71.1077 100.467 71.27 99.9895 70.9926ZM109.042 205.434C108.762 205.911 108.921 206.523 109.397 206.803C109.874 207.083 110.486 206.924 110.766 206.448L114.443 200.19C114.722 199.714 114.563 199.101 114.087 198.822C113.611 198.542 112.998 198.701 112.718 199.177L109.042 205.434ZM120.071 186.663C119.792 187.139 119.951 187.752 120.427 188.031C120.903 188.311 121.516 188.152 121.796 187.676L129.149 175.161C129.429 174.685 129.27 174.072 128.793 173.793C128.317 173.513 127.704 173.672 127.425 174.148L120.071 186.663ZM134.778 161.634C134.498 162.11 134.657 162.723 135.133 163.002C135.609 163.282 136.222 163.123 136.502 162.647L143.855 150.132C144.135 149.656 143.976 149.043 143.5 148.763C143.023 148.484 142.411 148.643 142.131 149.119L134.778 161.634ZM149.484 136.604C149.204 137.081 149.363 137.693 149.84 137.973C150.316 138.253 150.929 138.094 151.208 137.618L158.561 125.103C158.841 124.627 158.682 124.014 158.206 123.734C157.73 123.455 157.117 123.614 156.837 124.09L149.484 136.604ZM164.19 111.575C163.91 112.052 164.07 112.664 164.546 112.944C165.022 113.224 165.635 113.065 165.915 112.589L173.268 100.074C173.547 99.5978 173.388 98.985 172.912 98.7052C172.436 98.4254 171.823 98.5846 171.543 99.0608L164.19 111.575ZM178.896 86.5463C178.617 87.0224 178.776 87.6353 179.252 87.915C179.728 88.1948 180.341 88.0356 180.621 87.5594L184.297 81.3022C184.577 80.826 184.418 80.2132 183.942 79.9334C183.466 79.6536 182.853 79.8128 182.573 80.289L178.896 86.5463ZM73.8806 141.265C73.4011 140.991 73.2344 140.38 73.5083 139.901L77.9527 132.12C78.2266 131.64 78.8374 131.473 79.317 131.747C79.7965 132.021 79.9632 132.632 79.6893 133.112L75.2449 140.893C74.971 141.372 74.3602 141.539 73.8806 141.265ZM87.2138 117.922C86.7342 117.648 86.5675 117.037 86.8414 116.558L95.7302 100.996C96.0041 100.516 96.6149 100.35 97.0945 100.624C97.5741 100.898 97.7408 101.508 97.4668 101.988L88.5781 117.55C88.3042 118.029 87.6933 118.196 87.2138 117.922ZM104.991 86.7985C104.512 86.5246 104.345 85.9137 104.619 85.4342L113.508 69.8723C113.782 69.3928 114.392 69.2261 114.872 69.5C115.352 69.7739 115.518 70.3847 115.244 70.8643L106.356 86.4261C106.082 86.9057 105.471 87.0724 104.991 86.7985ZM122.769 55.6748C122.289 55.4009 122.123 54.79 122.396 54.3105L126.841 46.5296C127.115 46.05 127.726 45.8833 128.205 46.1572C128.685 46.4311 128.851 47.042 128.577 47.5215L124.133 55.3024C123.859 55.782 123.248 55.9487 122.769 55.6748ZM139.893 178.213C139.613 178.69 139.772 179.302 140.249 179.582C140.725 179.862 141.338 179.703 141.617 179.226L145.265 173.016C145.545 172.54 145.386 171.927 144.91 171.647C144.434 171.367 143.821 171.527 143.541 172.003L139.893 178.213ZM150.837 159.581C150.558 160.058 150.717 160.67 151.193 160.95C151.669 161.23 152.282 161.071 152.562 160.594L159.858 148.173C160.138 147.697 159.979 147.084 159.502 146.804C159.026 146.525 158.413 146.684 158.134 147.16L150.837 159.581ZM165.43 134.739C165.15 135.215 165.31 135.828 165.786 136.107C166.262 136.387 166.875 136.228 167.155 135.752L174.451 123.33C174.731 122.854 174.571 122.241 174.095 121.962C173.619 121.682 173.006 121.841 172.727 122.317L165.43 134.739ZM180.023 109.896C179.743 110.372 179.902 110.985 180.379 111.265C180.855 111.545 181.468 111.385 181.747 110.909L189.044 98.4877C189.324 98.0115 189.164 97.3987 188.688 97.119C188.212 96.8393 187.599 96.9986 187.319 97.4748L180.023 109.896ZM194.616 85.0534C194.336 85.5296 194.495 86.1424 194.971 86.4222C195.448 86.7019 196.06 86.5426 196.34 86.0664L199.988 79.8558C200.268 79.3796 200.109 78.7668 199.633 78.487C199.156 78.2073 198.544 78.3666 198.264 78.8428L194.616 85.0534Z" fill="url(#paint1_radial_15179_1604)"/>
+</g>
+<ellipse cx="110" cy="210.75" rx="76" ry="9.5" fill="#1E1E1E"/>
+<g opacity="0.2" filter="url(#filter1_f_15179_1604)">
+<circle cx="104" cy="97.25" r="52" fill="#D6E1FF"/>
+</g>
+<g filter="url(#filter2_dd_15179_1604)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M161.007 58.25C173.157 58.25 183.007 48.4003 183.007 36.25C183.007 24.0997 173.157 14.25 161.007 14.25C156.577 14.25 152.453 15.5594 149 17.8124C157.552 20.8285 163.681 28.9813 163.681 38.5657C163.681 46.2858 159.705 53.0771 153.688 57.0032C155.978 57.8107 158.441 58.25 161.007 58.25Z" fill="#D6E1FF"/>
+</g>
+<path d="M98 126.25C102 130.083 108.8 141.15 104 154.75C98 171.75 102.5 190.75 111.5 197.75" stroke="#7F9C40" stroke-width="7" stroke-linecap="round"/>
+<path d="M111.5 197.75C107.543 194.673 104.456 189.276 102.749 182.75" stroke="#536A23" stroke-width="7" stroke-linecap="round"/>
+<path d="M111.5 197.75C109.707 196.356 108.093 194.486 106.705 192.25" stroke="#2D3E0A" stroke-width="7" stroke-linecap="round"/>
+<path d="M104 156.75C107.667 151.916 116.9 144.55 124.5 153.75C132.1 162.95 139.333 151.583 142 144.75" stroke="#7F9C40" stroke-width="7" stroke-linecap="round"/>
+<path d="M102 156.75C98.3333 151.916 89.1 144.55 81.5 153.75C73.9 162.95 66.6667 151.583 64 144.75" stroke="#7F9C40" stroke-width="7" stroke-linecap="round"/>
+<path d="M98 126.25C101.18 129.298 106.131 136.919 105.613 146.75" stroke="#536A23" stroke-width="7" stroke-linecap="round"/>
+<path d="M98 126.25C100.498 128.644 104.088 133.859 105.263 140.75" stroke="#2D3E0A" stroke-width="7" stroke-linecap="round"/>
+<path d="M139.915 144.75C137.415 141.75 134.215 133.85 141.415 126.25C144.415 131.417 148.315 142.35 139.915 144.75Z" fill="#536A23"/>
+<path d="M143.774 143.681C144.027 142.1 145.592 138.834 149.829 138.423C149.046 140.8 146.739 145.179 143.774 143.681Z" fill="#6B960F"/>
+<path d="M63 144.25C60.8333 141.917 55.2 137.95 50 140.75C50.8333 144.417 54.6 150.25 63 144.25Z" fill="#536A23"/>
+<path d="M64.4998 142.25C63.6665 141.25 62.4998 138.45 64.4998 135.25C65.8331 136.417 67.6997 139.45 64.4998 142.25Z" fill="#A4C361"/>
+<path d="M60.417 215.818H51.7122C48.1103 215.818 50.8117 213.717 54.1135 212.816C55.5419 212.426 54.8991 210.339 53.5126 209.82C53.0302 209.639 52.6078 209.436 52.3126 209.214C51.1119 208.313 53.5132 208.013 57.7155 207.713C61.9178 207.413 59.5165 207.113 60.417 205.312C61.3175 203.511 63.1185 202.61 66.7204 200.209C70.3224 197.808 68.2213 199.009 72.1234 199.009H76.926C80.8281 199.009 79.3273 199.009 81.4285 197.808C83.5296 196.607 82.329 196.007 87.1316 196.007C91.9342 196.007 88.3322 194.806 94.9359 193.606C101.539 192.405 98.2377 194.506 100.039 196.007C101.84 197.508 105.141 199.009 107.843 199.009C114.111 199.009 109.344 199.009 113.846 196.007C118.349 193.005 117.148 194.806 120.15 193.606C123.151 192.405 129.455 195.107 134.558 196.007C139.66 196.908 139.96 197.808 139.96 199.009C139.96 200.209 157.37 202.01 158.571 203.811C159.771 205.612 158.305 208.937 160.071 210.115C161.872 211.315 167.227 212.644 166.675 213.416C165.174 215.517 151.667 210.415 151.667 212.816C151.667 215.217 148.965 213.717 148.365 214.917C147.765 216.118 151.067 214.917 156.169 214.917C161.272 214.917 161.572 216.418 160.071 218.519C158.571 220.62 155.869 218.519 153.468 219.72C151.067 220.921 151.667 218.519 149.866 217.319C148.065 216.118 146.864 217.319 144.163 218.519C141.461 219.72 139.96 219.72 136.959 219.72H136.959C133.957 219.72 130.655 219.72 129.455 218.519C128.254 217.319 131.256 218.519 133.357 217.319C135.458 216.118 139.96 214.917 139.96 213.717C139.96 212.516 136.358 213.717 133.357 214.917C130.355 216.118 122.851 214.917 121.35 214.917C119.849 214.917 118.349 214.917 115.647 215.818C115.158 215.981 114.747 216.105 114.402 216.211C112.653 216.748 111.162 218.519 109.331 218.519C107.905 218.519 106.366 217.638 104.941 217.585L104.939 217.585C103.941 217.548 102.77 217.504 101.84 216.418C104.541 215.818 102.14 214.917 100.039 213.717C97.9375 212.516 95.5362 214.917 92.2344 215.818C88.9326 216.718 88.3322 215.818 86.2311 215.818C84.13 215.818 83.2295 215.818 81.4285 214.917C79.6275 214.017 76.0255 213.717 72.1234 213.717C68.2213 213.717 69.4219 214.317 68.2213 215.818C67.0206 217.319 66.1201 215.818 60.417 215.818Z" fill="#6F4F41"/>
+<path d="M60.417 215.818H51.7122C48.1103 215.818 50.8117 213.717 54.1135 212.816C55.5419 212.426 54.8991 210.339 53.5126 209.82C53.0302 209.639 52.6078 209.436 52.3126 209.214C51.1119 208.313 53.5132 208.013 57.7155 207.713C61.9178 207.413 59.5165 207.113 60.417 205.312C61.3175 203.511 63.1185 202.61 66.7204 200.209C70.3224 197.808 68.2213 199.009 72.1234 199.009H76.926C80.8281 199.009 79.3273 199.009 81.4285 197.808C83.5296 196.607 82.329 196.007 87.1316 196.007C91.9342 196.007 88.3322 194.806 94.9359 193.606C101.539 192.405 98.2377 194.506 100.039 196.007C101.84 197.508 105.141 199.009 107.843 199.009C114.111 199.009 109.344 199.009 113.846 196.007C118.349 193.005 117.148 194.806 120.15 193.606C123.151 192.405 129.455 195.107 134.558 196.007C139.66 196.908 139.96 197.808 139.96 199.009C139.96 200.209 157.37 202.01 158.571 203.811C159.771 205.612 158.305 208.937 160.071 210.115C161.872 211.315 167.227 212.644 166.675 213.416C165.174 215.517 151.667 210.415 151.667 212.816C151.667 215.217 148.965 213.717 148.365 214.917C147.765 216.118 151.067 214.917 156.169 214.917C161.272 214.917 161.572 216.418 160.071 218.519C158.571 220.62 155.869 218.519 153.468 219.72C151.067 220.921 151.667 218.519 149.866 217.319C148.065 216.118 146.864 217.319 144.163 218.519C141.461 219.72 139.96 219.72 136.959 219.72H136.959C133.957 219.72 130.655 219.72 129.455 218.519C128.254 217.319 131.256 218.519 133.357 217.319C135.458 216.118 139.96 214.917 139.96 213.717C139.96 212.516 136.358 213.717 133.357 214.917C130.355 216.118 122.851 214.917 121.35 214.917C119.849 214.917 118.349 214.917 115.647 215.818C115.158 215.981 114.747 216.105 114.402 216.211C112.653 216.748 111.162 218.519 109.331 218.519C107.905 218.519 106.366 217.638 104.941 217.585L104.939 217.585C103.941 217.548 102.77 217.504 101.84 216.418C104.541 215.818 102.14 214.917 100.039 213.717C97.9375 212.516 95.5362 214.917 92.2344 215.818C88.9326 216.718 88.3322 215.818 86.2311 215.818C84.13 215.818 83.2295 215.818 81.4285 214.917C79.6275 214.017 76.0255 213.717 72.1234 213.717C68.2213 213.717 69.4219 214.317 68.2213 215.818C67.0206 217.319 66.1201 215.818 60.417 215.818Z" fill="url(#paint2_radial_15179_1604)" fill-opacity="0.75"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M98.1262 193.255C95.6068 194.565 93.2 196.206 94.0349 197.208C95.1155 198.504 94.9513 198.868 94.5505 199.754C94.3946 200.098 94.203 200.522 94.0349 201.11C93.4344 203.211 94.6351 203.811 95.5356 203.811C95.801 203.811 96.2228 203.942 96.6935 204.087C97.8199 204.435 99.226 204.87 99.4377 203.811C99.5383 203.308 99.504 202.805 99.4705 202.313C99.404 201.338 99.3405 200.407 100.338 199.609C101.368 198.785 103.246 199.657 104.808 200.383C105.522 200.715 106.171 201.016 106.642 201.11C107.25 201.231 107.513 201.452 107.751 201.651C108.1 201.943 108.394 202.189 109.643 202.01C111.744 201.71 112.945 199.009 112.945 198.108C112.945 197.743 112.748 197.477 112.373 197.169C111.509 198.031 111.629 198.489 111.453 198.733C111.253 199.009 110.672 199.009 107.843 199.009C105.141 199.009 101.839 197.508 100.039 196.007C99.4301 195.5 99.404 194.925 99.3817 194.431C99.3533 193.804 99.3309 193.309 98.1262 193.255ZM158.747 204.124C158.702 204.236 158.646 204.336 158.57 204.412C158.083 204.899 157.2 204.793 156.724 204.736C156.614 204.722 156.525 204.712 156.469 204.712C156.311 204.712 155.741 205.042 154.974 205.487C154.279 205.889 153.423 206.385 152.567 206.813C151.542 207.326 151.295 206.574 151.05 205.831C150.866 205.269 150.683 204.712 150.166 204.712C148.965 204.712 147.764 204.712 146.263 205.312C145.698 205.538 145.516 205.679 145.397 205.815C144.941 206.333 144.249 206.413 143.542 206.496C143.042 206.554 142.534 206.613 142.097 206.828C142.02 206.867 141.939 206.908 141.854 206.951L141.853 206.951C141.582 207.09 141.265 207.251 140.86 207.413C139.433 207.984 140.449 208.826 143.391 209.94C143.702 210.058 144.03 210.13 144.361 210.169C145.719 210.331 145.99 210.499 146.345 210.718C146.61 210.882 146.921 211.074 147.764 211.315C148.723 211.589 149.557 211.988 150.295 212.341C150.792 212.579 151.246 212.796 151.664 212.94C151.666 212.9 151.667 212.859 151.667 212.816C151.667 212.177 152.624 212.069 154.057 212.216C154.268 211.748 154.368 211.183 154.368 210.715C154.368 210.4 154.698 210.25 155.143 210.049C155.545 209.867 156.041 209.642 156.469 209.214C156.814 208.869 157.29 208.789 157.899 208.686C158.273 208.622 158.697 208.55 159.17 208.404C159.107 207.919 159.108 207.388 159.109 206.849C159.111 205.886 159.113 204.901 158.747 204.124ZM160.766 216.204C160.567 216.147 160.333 216.118 160.071 216.118C159.271 216.118 159.271 216.385 159.271 216.652C159.271 216.785 159.271 216.918 159.17 217.018C159.02 217.169 158.72 217.169 158.232 217.169C157.745 217.169 157.069 217.169 156.169 217.319C154.763 217.553 154.454 217.787 153.958 218.165C153.819 218.271 153.665 218.388 153.467 218.519C153.012 218.823 153.172 219.302 153.478 219.715C154.544 219.186 155.669 219.306 156.721 219.418C158.036 219.557 159.239 219.685 160.071 218.519C160.72 217.611 161.032 216.815 160.766 216.204ZM147.501 216.969C147.69 216.799 147.892 216.612 147.939 216.364C147.992 216.087 147.629 216.102 146.849 216.277C146.391 216.379 145.916 216.464 145.44 216.55L145.439 216.55C144.731 216.677 144.019 216.806 143.346 216.993C143.319 217 143.29 217.009 143.262 217.018C143.25 217.022 143.239 217.026 143.227 217.031C143.218 217.034 143.209 217.037 143.199 217.041C142.123 217.463 142.777 218.468 143.778 218.686C143.903 218.633 144.032 218.578 144.163 218.519C144.755 218.256 145.275 217.993 145.745 217.755C146.41 217.419 146.974 217.133 147.501 216.969ZM130.76 215.405C131.063 215.24 131.328 214.996 131.555 214.617C132.239 213.478 131.365 213.376 130.379 213.262C130.067 213.226 129.743 213.189 129.454 213.116C128.968 212.995 128.58 212.972 128.171 212.947C127.57 212.912 126.924 212.873 125.852 212.516C124.807 212.168 124.874 211.819 124.997 211.178C125.086 210.714 125.204 210.096 124.952 209.214C124.617 208.044 124.656 207.525 124.703 206.88C124.741 206.368 124.785 205.775 124.652 204.712C124.478 203.325 124.105 203.54 123.358 203.969C122.811 204.283 122.065 204.712 121.05 204.712C119.735 204.712 119.32 204.982 118.869 205.275C118.496 205.518 118.098 205.777 117.147 205.912C115.046 206.213 115.647 207.713 116.847 209.214C117.577 210.126 117.531 210.262 117.315 210.902C117.175 211.315 116.965 211.938 116.847 213.116C116.638 215.21 116.136 214.967 115.648 214.73C115.437 214.628 115.228 214.526 115.046 214.617C114.65 214.816 114.53 215.661 114.948 215.809C115.062 215.849 115.178 215.891 115.294 215.933C115.407 215.897 115.524 215.859 115.647 215.818C118.349 214.917 119.849 214.917 121.35 214.917C121.708 214.917 122.408 214.986 123.306 215.073C125.325 215.271 128.349 215.566 130.76 215.405ZM99.2311 213.425C99.4631 213.163 99.7082 212.913 99.988 212.705C100.718 212.163 100.903 212.039 101.089 211.916C101.314 211.766 101.539 211.615 102.74 210.715C104.235 209.594 103.519 209.869 102.186 210.381C101.378 210.691 100.344 211.089 99.4377 211.315C98.237 211.616 97.7868 211.616 97.0739 211.616C96.3611 211.616 95.3856 211.616 93.1344 211.916C92.0362 211.916 91.7542 211.916 91.4843 211.973C91.3911 211.993 91.2993 212.02 91.1757 212.056C90.8752 212.143 90.3867 212.285 89.2322 212.516C86.8886 212.985 87.4728 213.453 88.413 214.208C88.677 214.42 88.969 214.654 89.2322 214.917C89.769 215.454 90.1858 215.871 90.5094 216.168C90.9951 216.111 91.558 216.002 92.2342 215.818C93.4195 215.495 94.4888 214.978 95.4697 214.504C96.8781 213.823 98.1045 213.231 99.2311 213.425ZM69.7206 213.905C69.0588 213.682 68.4137 213.425 67.9206 213.116C67.5052 212.909 67.1616 212.988 66.8651 213.057C66.3045 213.187 65.9119 213.279 65.5193 211.315C65.3037 210.453 64.1595 210.829 62.7534 211.554C62.2814 211.798 61.8909 212.18 61.5033 212.559C60.9951 213.056 60.4918 213.548 59.8162 213.717C58.6155 214.017 58.0151 214.317 56.8145 215.818C56.8145 215.818 56.8145 215.818 56.8145 215.818H60.4169C62.9112 215.818 64.4869 216.105 65.5708 216.302C65.8057 216.345 66.0175 216.384 66.2106 216.414C66.6815 216.349 67.2308 216.272 67.8684 216.18C67.9863 216.086 68.1023 215.966 68.2211 215.818C68.5483 215.409 68.6972 215.067 68.8196 214.785C69.0049 214.359 69.1296 214.073 69.7206 213.905ZM86.9662 196.007C86.4059 196.511 85.8966 197.205 85.6242 197.842C85.3131 198.568 84.9218 199.24 84.4295 199.609C84.1418 199.825 83.8886 200.041 83.6451 200.248C82.8722 200.907 82.197 201.482 80.8275 201.71C80.2272 201.81 79.7936 201.81 79.3934 201.81C78.593 201.81 77.9259 201.81 76.3251 202.611C75.4425 203.052 74.6004 203.29 73.948 203.475C72.8253 203.793 72.2639 203.952 73.0233 204.712C74.0382 205.727 76.1255 205.669 77.6535 205.627L77.6537 205.627C77.9333 205.619 78.1941 205.612 78.4263 205.612C78.9159 205.612 79.3416 205.453 79.7764 205.289C80.6744 204.952 81.611 204.601 83.2289 205.612C83.7493 205.938 84.171 206.263 84.5185 206.557C85.7917 207.637 85.7364 206.331 84.378 205.36C82.8865 204.295 81.8482 203.881 81.4279 203.811C80.9277 203.711 80.5875 203.331 83.2289 202.611C84.3901 202.294 85.2172 202.126 85.8277 202.002C86.953 201.773 87.3422 201.694 87.7314 201.11C88.3317 200.209 88.6319 199.009 88.6319 198.108C88.6319 197.895 88.7661 197.615 88.9115 197.312C89.1425 196.83 89.4017 196.289 89.1976 195.864C88.7586 195.956 88.1248 196.007 87.1315 196.007C87.0756 196.007 87.0205 196.007 86.9662 196.007Z" fill="#55392C"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M78.0762 70.3262C73.3459 75.0565 74.1617 83.5417 79.8985 89.2785C85.6353 95.0152 94.1205 95.8311 98.8508 91.1008C103.581 86.3705 102.765 77.8853 97.0285 72.1485C91.2917 66.4117 82.8065 65.5959 78.0762 70.3262ZM110.149 91.1009C114.88 95.8313 123.365 95.0154 129.102 89.2786C134.838 83.5419 135.654 75.0566 130.924 70.3263C126.194 65.596 117.709 66.4119 111.972 72.1486C106.235 77.8854 105.419 86.3706 110.149 91.1009ZM97.0285 121.352C91.2918 127.089 82.8065 127.904 78.0762 123.174C73.3459 118.444 74.1618 109.959 79.8986 104.222C85.6353 98.4851 94.1206 97.6692 98.8509 102.4C103.581 107.13 102.765 115.615 97.0285 121.352ZM110.149 102.399C105.419 107.13 106.235 115.615 111.972 121.352C117.708 127.088 126.194 127.904 130.924 123.174C135.654 118.444 134.838 109.958 129.102 104.222C123.365 98.4849 114.88 97.6691 110.149 102.399Z" fill="#D7E2F6"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M78.0762 70.3262C73.3459 75.0565 74.1617 83.5417 79.8985 89.2785C85.6353 95.0152 94.1205 95.8311 98.8508 91.1008C103.581 86.3705 102.765 77.8853 97.0285 72.1485C91.2917 66.4117 82.8065 65.5959 78.0762 70.3262ZM110.149 91.1009C114.88 95.8313 123.365 95.0154 129.102 89.2786C134.838 83.5419 135.654 75.0566 130.924 70.3263C126.194 65.596 117.709 66.4119 111.972 72.1486C106.235 77.8854 105.419 86.3706 110.149 91.1009ZM97.0285 121.352C91.2918 127.089 82.8065 127.904 78.0762 123.174C73.3459 118.444 74.1618 109.959 79.8986 104.222C85.6353 98.4851 94.1206 97.6692 98.8509 102.4C103.581 107.13 102.765 115.615 97.0285 121.352ZM110.149 102.399C105.419 107.13 106.235 115.615 111.972 121.352C117.708 127.088 126.194 127.904 130.924 123.174C135.654 118.444 134.838 109.958 129.102 104.222C123.365 98.4849 114.88 97.6691 110.149 102.399Z" fill="url(#paint3_radial_15179_1604)"/>
+<circle cx="107.138" cy="97.6293" r="26.9655" fill="#ACB4DB"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M104.5 88.5188C111.392 88.5188 116.979 81.7429 116.979 73.3844C116.979 65.0259 111.392 58.25 104.5 58.25C97.6079 58.25 92.0207 65.0259 92.0207 73.3844C92.0207 81.7429 97.6079 88.5188 104.5 88.5188ZM104.5 135.25C111.392 135.25 116.979 128.474 116.979 120.115C116.979 111.757 111.392 104.981 104.5 104.981C97.6079 104.981 92.0207 111.757 92.0207 120.115C92.0207 128.474 97.6079 135.25 104.5 135.25ZM127.865 109.229C119.507 109.229 112.731 103.642 112.731 96.7498C112.731 89.8577 119.507 84.2705 127.865 84.2705C136.224 84.2705 143 89.8577 143 96.7498C143 103.642 136.224 109.229 127.865 109.229ZM66 96.7498C66 103.642 72.7759 109.229 81.1344 109.229C89.4929 109.229 96.2688 103.642 96.2688 96.7498C96.2688 89.8577 89.4929 84.2705 81.1344 84.2705C72.7759 84.2705 66 89.8577 66 96.7498Z" fill="#F5F7FF"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M115.514 80.5054C113.414 85.274 109.269 88.5188 104.5 88.5188C99.9128 88.5188 95.9038 85.5172 93.7353 81.0452C96.8873 78.6598 100.783 77.25 105 77.25C108.888 77.25 112.503 78.4486 115.514 80.5054ZM120.695 85.7571C115.954 87.8644 112.731 91.9968 112.731 96.7498C112.731 101.503 115.954 105.635 120.696 107.743C122.781 104.613 124 100.828 124 96.75C124 92.6723 122.78 88.8869 120.695 85.7571ZM115.514 112.995C113.414 108.226 109.269 104.981 104.5 104.981C99.9128 104.981 95.9037 107.983 93.7352 112.455C96.8872 114.84 100.783 116.25 105 116.25C108.888 116.25 112.503 115.051 115.514 112.995ZM89.068 107.379C93.3889 105.182 96.2688 101.243 96.2688 96.7498C96.2688 92.2566 93.389 88.3181 89.0682 86.1207C87.1276 89.1782 86 92.8289 86 96.75C86 100.671 87.1276 104.322 89.068 107.379Z" fill="#D7DEF7"/>
+<circle cx="105.086" cy="97.3362" r="16.7069" fill="#FCB500"/>
+<circle cx="103.913" cy="96.1637" r="14.3621" fill="#FFD569"/>
+<ellipse cx="98.5" cy="93.2499" rx="1.5" ry="3" fill="black"/>
+<ellipse cx="111.5" cy="93.2499" rx="1.5" ry="3" fill="black"/>
+<circle cx="99.5" cy="91.7499" r="0.5" fill="white"/>
+<circle cx="112.5" cy="91.7499" r="0.5" fill="white"/>
+<path opacity="0.55" d="M125.5 162.25C130.333 164.583 141.2 165.75 146 151.75" stroke="white" stroke-linecap="round"/>
+<path opacity="0.55" d="M131.5 166.25C133.5 167.083 138.6 167.45 143 162.25" stroke="white" stroke-linecap="round"/>
+<path opacity="0.55" d="M74 145.75C74.8333 144.417 77.3 141.55 80.5 140.75" stroke="white" stroke-linecap="round"/>
+<path opacity="0.55" d="M80 145.75C81.1667 144.583 84.5 142.35 88.5 142.75" stroke="white" stroke-linecap="round"/>
+<path opacity="0.55" d="M59.5 150.25C60.1667 153.083 63.4 159.35 71 161.75" stroke="white" stroke-linecap="round"/>
+<path opacity="0.55" d="M64.5 161.75C65.8333 162.75 69.4 164.75 73 164.75" stroke="white" stroke-linecap="round"/>
+<ellipse cx="105" cy="102.75" rx="6" ry="2.5" fill="black"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M108.994 104.616C107.934 105.01 106.534 105.25 105 105.25C103.466 105.25 102.067 105.01 101.006 104.616C101.118 103.297 102.863 102.25 105 102.25C107.137 102.25 108.883 103.297 108.994 104.616Z" fill="#E6A4A4"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M106.993 105.109C106.37 105.2 105.699 105.25 105.001 105.25C103.527 105.25 102.177 105.029 101.133 104.661C101.51 103.844 102.651 103.25 104.001 103.25C105.586 103.25 106.885 104.07 106.993 105.109Z" fill="#D07474"/>
+<path d="M73.6288 37.0653L73.5878 37.045C73.7343 36.7511 73.8517 36.3987 73.969 36.0462C76.0372 29.8341 72.7073 23.1478 66.5205 21.0901C64.5899 20.448 62.5857 20.3197 60.6688 20.6609C59.6203 15.0271 55.3878 12.0998 49.552 10.1589C40.9958 7.31313 33.017 7.73679 30.1567 16.328C30.0251 16.2843 29.8495 16.2259 29.7179 16.1821C21.1617 13.3364 11.8968 18.0358 9.03646 26.627C6.17616 35.2183 10.7913 44.4852 19.3475 47.3309C21.1465 47.9293 22.9604 48.19 24.7307 48.1426C25.7219 52.3383 28.8058 55.9576 33.1936 57.4169C37.2303 58.7595 41.4298 58.0031 44.6797 55.7074C46.1116 57.8474 48.2169 59.5753 50.8057 60.4363C55.2374 61.9103 59.9055 60.6245 62.9952 57.4926C64.0479 58.2831 65.2178 58.868 66.5341 59.3058C73.2474 61.5386 80.551 57.8996 82.8099 51.1147C85.098 44.3885 82.4422 38.761 73.6288 37.0653Z" fill="#4E626F"/>
+<path d="M8.32 29.7643C9.77938 34.7196 12.7036 40.7141 17.9645 42.4639C19.7635 43.0622 25.8034 44.0191 27.8102 41.9351C26.7318 45.4516 29.6973 51.3186 34.0851 52.778C38.1219 54.1206 44.1942 53.9628 47.4441 51.6671C48.876 53.8071 50.1417 55.6949 52.7305 56.556C57.1622 58.0299 62.2527 55.8928 65.3424 52.7608C66.3951 53.5513 68.3562 55.4416 69.6726 55.8794C78.2944 57.3842 80.0149 51.2154 82.2738 44.4305C82.4725 43.8464 82.6266 43.2581 82.738 42.6693C83.6875 45.2976 83.7825 48.2548 82.8101 51.1133C80.5512 57.8982 73.2476 61.5372 66.5342 59.3044C65.2179 58.8666 64.048 58.2817 62.9953 57.4912C59.9056 60.6232 55.2375 61.9089 50.8058 60.4349C48.217 59.5739 46.1118 57.8461 44.6799 55.706C41.43 58.0017 37.2305 58.7582 33.1937 57.4155C28.8059 55.9562 25.7221 52.3369 24.7308 48.1413C22.9605 48.1886 21.1466 47.9279 19.3476 47.3296C11.8277 44.8285 7.35199 37.3674 8.32 29.7643Z" fill="#344550"/>
+<path d="M68.419 30.7396C66.1182 29.5991 64.1648 29.1595 62.4601 29.0878C59.4307 28.9603 56.3311 28.0793 54.662 25.5492L53.9708 24.5013C52.1704 21.7722 48.4773 21.0564 45.7861 22.9151C43.5137 24.4846 40.4611 24.2332 38.3042 22.5095C35.8284 20.5309 32.6771 18.3713 30.9305 18.5746C27.7628 18.9432 20.8933 19.7676 19.2643 23.8244C21.8494 21.5541 23.3272 21.0513 26.6535 21.619C29.9092 22.1748 33.9671 28.0238 35.5289 30.0333C34.7896 29.6668 31.3707 28.8215 26.9096 34.4084C31.7734 31.8778 32.9738 31.1604 37.3488 33.7921C41.6859 36.4011 39.5622 42.1212 37.634 44.3569C38.6194 44.2276 41.2295 42.4947 42.3122 40.8077C43.3949 39.1208 44.4034 37.0058 43.7867 35.9795C45.511 35.5988 46.9651 36.4431 48.3476 40.0932C49.73 43.7433 48.9039 42.6853 48.413 45.0671C50.1358 42.8327 52.0411 37.6002 57.4617 38.4341C64.0949 39.4544 66.7031 42.0883 65.9678 46.9741C67.1977 44.4953 67.3524 41.7924 65.8081 39.56C63.0322 35.5472 59.8998 35.4085 57.5783 35.3785C59.5706 35.2808 62.7687 31.9152 64.9404 32.4897C69.2835 33.6387 72.2729 36.5876 73.1689 40.1974C73.6876 34.2004 71.7461 32.3888 68.419 30.7396Z" fill="#44555F"/>
+<path d="M158.9 61.3516L158.941 61.3516C158.94 61.0596 158.986 60.7324 159.032 60.4053C159.84 54.6386 165.137 50.6262 170.88 51.4302C172.672 51.681 174.319 52.3704 175.712 53.3993C178.775 49.3244 183.304 48.6636 188.722 49.4219C196.664 50.5337 202.854 54.0225 201.737 61.9976C201.859 62.0147 202.022 62.0375 202.144 62.0546C210.087 63.1664 215.611 70.57 214.493 78.5452C213.376 86.5203 206.035 92.0813 198.092 90.9695C196.422 90.7358 194.874 90.2271 193.482 89.4902C191.034 92.4418 187.146 94.1076 183.073 93.5375C179.325 93.0129 176.278 90.7516 174.596 87.6389C172.609 88.7785 170.249 89.3238 167.846 88.9874C163.732 88.4116 160.521 85.5434 159.297 81.8276C158.146 82.0418 156.982 82.0457 155.76 81.8747C149.528 81.0024 145.148 75.2183 146.03 68.92C146.866 62.6569 151.207 59.2219 158.9 61.3516Z" fill="#4E626F"/>
+<path d="M213.823 81.3283C210.702 84.7002 206.002 88.3217 201.118 87.6381C199.448 87.4043 194.257 85.7814 193.482 83.3282C192.951 86.556 188.269 90.0596 184.196 89.4895C180.448 88.9649 175.672 86.4409 173.99 83.3282C172.003 84.4679 170.249 85.4722 167.846 85.1358C163.732 84.5599 160.52 80.8466 159.297 77.1308C158.146 77.3449 155.836 78.0765 154.614 77.9054C147.149 75.6993 148.217 70.1046 149.099 63.8063C149.172 63.2623 149.282 62.7327 149.426 62.2196C147.63 63.9388 146.385 66.2576 146.03 68.9193C145.148 75.2176 149.528 81.0016 155.76 81.8739C156.982 82.045 158.146 82.041 159.297 81.8269C160.52 85.5427 163.732 88.4108 167.846 88.9867C170.249 89.3231 172.609 88.7778 174.596 87.6381C176.278 90.7509 179.325 93.0122 183.072 93.5367C187.146 94.1069 191.034 92.441 193.482 89.4895C194.874 90.2264 196.422 90.735 198.092 90.9688C205.073 91.9459 211.589 87.7687 213.823 81.3283Z" fill="#344550"/>
+<path d="M165.552 58.3696C168.148 58.3695 170.029 58.9137 171.503 59.6698C173.787 60.8414 175.173 63.1739 176.147 65.5487C177.075 67.8132 179.698 68.8543 181.927 67.8432L188.722 64.7608C188.722 64.7608 197.854 61.9378 200.232 63.4826C202.61 65.0274 207.758 68.3973 207.452 72.2731C206.29 69.4432 205.311 68.4589 202.436 67.5976C199.622 66.7545 194.077 69.8123 192.038 70.7966C192.772 70.7966 195.83 71.4734 197.176 77.6869C194.301 73.7496 193.628 72.7038 189.102 73.0729C184.615 73.4388 184.045 78.8353 184.698 81.3781C183.964 80.886 182.569 78.4744 182.373 76.7026C182.178 74.9308 182.21 72.8473 183.107 72.2731C181.884 71.2888 180.392 71.3872 177.847 73.7496C175.302 76.112 176.379 75.5953 175.828 77.6869C175.339 75.2261 175.89 70.3045 171.241 68.828C165.552 67.0212 162.433 68.0897 161.087 72.2731C161.087 69.8123 162.032 67.5976 164.145 66.4287C167.944 64.3277 170.494 65.4543 172.356 66.3473C170.807 65.4826 169.589 61.5378 167.632 61.1379C163.717 60.3381 160.169 61.5071 158.028 64.0294C159.986 59.0462 162.249 58.3696 165.552 58.3696Z" fill="#44555F"/>
+<path d="M179.308 52.115C178.643 52.7796 178.116 53.5685 177.756 54.4368C177.396 55.3051 177.211 56.2358 177.211 57.1756C177.211 58.1154 177.396 59.0461 177.756 59.9144C178.116 60.7827 178.643 61.5716 179.308 62.2362C179.973 62.9007 180.762 63.4279 181.631 63.7876C182.5 64.1472 183.431 64.3323 184.371 64.3323C185.311 64.3323 186.243 64.1472 187.111 63.7876C187.98 63.4279 188.769 62.9007 189.434 62.2362L186.104 62.0584C182.531 61.8677 179.677 59.0148 179.486 55.4434L179.308 52.115Z" fill="#44555F"/>
+</g>
+<defs>
+<filter id="filter0_f_15179_1604" x="1" y="14.25" width="201.126" height="194.691" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="1" result="effect1_foregroundBlur_15179_1604"/>
+</filter>
+<filter id="filter1_f_15179_1604" x="32" y="25.25" width="144" height="144" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="10" result="effect1_foregroundBlur_15179_1604"/>
+</filter>
+<filter id="filter2_dd_15179_1604" x="129" y="-1.75" width="74.0068" height="84" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="4"/>
+<feGaussianBlur stdDeviation="10"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.839216 0 0 0 0 0.882353 0 0 0 0 1 0 0 0 0.5 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_15179_1604"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset/>
+<feGaussianBlur stdDeviation="2"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.75 0"/>
+<feBlend mode="normal" in2="effect1_dropShadow_15179_1604" result="effect2_dropShadow_15179_1604"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_15179_1604" result="shape"/>
+</filter>
+<radialGradient id="paint0_radial_15179_1604" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(116.284 41.8673) rotate(90) scale(128 89.6824)">
+<stop offset="0.09375" stop-color="#0089B4"/>
+<stop offset="1" stop-color="#67DAFE"/>
+</radialGradient>
+<radialGradient id="paint1_radial_15179_1604" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(102.284 51.8675) rotate(90) scale(128 89.6824)">
+<stop offset="0.09375" stop-color="#0089B4"/>
+<stop offset="1" stop-color="#67DAFE"/>
+</radialGradient>
+<radialGradient id="paint2_radial_15179_1604" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(140.261 222.558) rotate(-144.7) scale(50.3864 33.4759)">
+<stop offset="0.139159" stop-color="#55392C"/>
+<stop offset="1" stop-color="#6E4F41"/>
+</radialGradient>
+<radialGradient id="paint3_radial_15179_1604" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(106.259 97.1899) rotate(47.4471) scale(36.4049 38.1669)">
+<stop offset="0.439825" stop-color="#ACB1DB"/>
+<stop offset="1" stop-color="#D7E3F6"/>
+</radialGradient>
+<clipPath id="clip0_15179_1604">
+<rect width="220" height="220" fill="white" transform="translate(0 0.25)"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/src/assets/icons/visu/ecogesture/ECOGESTURE0081.svg b/src/assets/icons/visu/ecogesture/ECOGESTURE0081.svg
new file mode 100644
index 0000000000000000000000000000000000000000..c2fec34e10cf1bce5409499be805309cbda1eeaa
--- /dev/null
+++ b/src/assets/icons/visu/ecogesture/ECOGESTURE0081.svg
@@ -0,0 +1,162 @@
+<svg width="220" height="221" viewBox="0 0 220 221" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_15162_4927)">
+<g opacity="0.75" filter="url(#filter0_f_15162_4927)">
+<path opacity="0.7" d="M70.1263 13.0448C99.8739 14.1363 94.4443 35.042 87.6519 47.5541C82.9543 52.0711 71.3157 53.2518 60.8024 59.4343C57.2031 61.5509 52.9855 61.8626 50.1136 64.023C46.7267 66.5708 44.791 70.9048 41.8461 72.4134C41.144 72.8941 36.4137 72.678 37.2429 71.295C38.2794 69.5662 38.258 67.2138 35.6169 68.5126C32.9757 69.8114 31.215 73.5778 31.2534 71.295C31.2918 69.0121 37.6043 65.0798 37.2429 63.6344C36.9425 62.4332 34.5872 63.7618 33.0875 65.0798C31.5877 66.3978 26.4535 73.1619 25.7228 72.6795C24.9922 72.197 34.7437 59.9763 34.3522 59.2981C33.9606 58.6199 27.5399 63.4424 27.667 62.731C29.4738 52.6131 40.9943 52.0218 41.8461 50.6257C45.3468 43.6228 30.7974 52.5813 35.1525 47.1153C39.1475 42.1013 45.0579 39.2335 48.7216 34.9858C61.3631 20.329 63.6174 16.2395 70.1263 13.0448Z" fill="url(#paint0_radial_15162_4927)"/>
+<path opacity="0.5" d="M74.9006 51.7463C77.4261 51.7351 79.3073 50.634 79.8963 50.2185C73.7363 41.1152 61.4869 23.5009 60.2032 23.1569C58.5985 22.727 56.6922 26.5493 55.2216 27.8416C53.7217 29.1596 43.8634 40.2769 45.2006 40.6352C46.5378 40.9935 50.9514 34.1501 53.8075 32.049C56.6636 29.9479 56.8018 33.7112 55.1063 34.6901C53.4108 35.669 50.1247 39.3748 51.5144 40.6071C52.904 41.8394 53.6206 39.165 55.407 36.7772C57.1934 34.3894 57.723 38.831 56.5432 41.0946C55.3633 43.3583 61.1946 44.0608 57.9469 45.4837C54.6992 46.9066 52.9793 53.3252 55.2289 51.3482C57.4785 49.3712 58.4434 47.9099 61.4236 46.4153C64.4039 44.9207 65.6502 46.6879 65.2727 49.1665C64.8952 51.6452 63.8971 51.0911 60.4729 51.0335C57.0486 50.9759 59.2022 54.706 65.5542 52.395C71.9063 50.0841 75.0107 49.196 75.3306 50.1417C75.6505 51.0873 71.7438 51.7604 74.9006 51.7463Z" fill="#DAF6FF"/>
+<ellipse cx="50.0424" cy="64.2904" rx="1.38437" ry="0.55375" transform="rotate(-40.7052 50.0424 64.2904)" fill="#81B0C0"/>
+<ellipse cx="38.4472" cy="60.0952" rx="1.05246" ry="0.622755" transform="rotate(-40.7052 38.4472 60.0952)" fill="#81B0C0"/>
+<ellipse cx="41.0744" cy="41.2067" rx="0.632916" ry="0.619686" transform="rotate(-40.7052 41.0744 41.2067)" fill="#81B0C0"/>
+<ellipse cx="72.2275" cy="54.5483" rx="0.632916" ry="0.336428" transform="rotate(-40.7052 72.2275 54.5483)" fill="#81B0C0"/>
+<path d="M55.3684 55.1117C53.2446 56.2625 48.6398 59.0416 47.2107 60.9518M40.8779 62.1214C41.4797 60.945 42.8726 58.5282 43.6291 58.2723M54.863 45.2304C54.25 45.735 52.6315 46.9257 51.0612 47.6515C49.0982 48.5587 46.4571 49.8575 46.6529 50.1966M42.8443 45.7473C42.9224 45.0994 43.4711 43.6221 45.0415 42.8963C46.6118 42.1705 48.5869 41.0754 49.3781 40.6186M32.0037 57.3106C32.7058 56.8299 34.6851 55.4167 35.9786 55.1117C38.1467 54.6005 40.015 53.518 40.8779 52.7937" stroke="#81B0C0" stroke-width="0.5" stroke-linecap="round"/>
+<ellipse cx="18.5795" cy="20.4761" rx="18.5795" ry="20.4761" transform="matrix(0.828363 -0.560192 0.587218 0.809429 50.6611 25.0662)" fill="#BE996E"/>
+<ellipse cx="18.0024" cy="19.8804" rx="18.0024" ry="19.8804" transform="matrix(0.828363 -0.560192 0.587218 0.809429 51.6172 24.4194)" fill="#FFEEDB"/>
+<ellipse cx="12.1481" cy="13.4154" rx="12.1481" ry="13.4154" transform="matrix(0.828363 -0.560192 0.587218 0.809429 60.2236 26.6927)" fill="#BE996E"/>
+<ellipse cx="11.4335" cy="12.3563" rx="11.4335" ry="12.3563" transform="matrix(0.828363 -0.560192 0.587218 0.809429 61.3486 27.6357)" fill="#FFEEDB"/>
+<g style="mix-blend-mode:multiply">
+<path d="M91.2627 23.7799C90.2378 21.6792 87.3423 17.4901 88.3074 21.7959C89.0487 25.8756 87.1116 22.2544 86.4522 23.7541C85.7927 25.2538 87.5095 26.1541 88.555 26.3766C89.6005 26.5992 90.7124 32.7188 91.2796 33.1248C91.8467 33.5308 92.4481 30.8065 91.9425 29.1301C91.4369 27.4537 92.5439 26.4058 91.2627 23.7799Z" fill="url(#paint1_radial_15162_4927)"/>
+</g>
+<g style="mix-blend-mode:multiply">
+<path d="M77.3015 39.6326C76.5904 38.874 75.7038 39.7317 75.3493 40.2553C75.0194 40.6556 74.8238 39.9235 74.5874 40.5597C74.351 41.1958 75.2957 41.2346 75.9275 42.1914C76.5593 43.1482 75.7813 42.9643 74.9681 44.3176C74.1549 45.671 75.5073 45.068 76.3572 44.8306C77.2071 44.5932 75.714 43.5251 76.9922 43.2736C78.2705 43.0222 76.7888 42.3028 76.9258 41.2509C77.0628 40.1991 78.1903 40.581 77.3015 39.6326Z" fill="url(#paint2_radial_15162_4927)"/>
+</g>
+<g style="mix-blend-mode:multiply">
+<path d="M70.0564 20.4719C72.2242 20.077 72.2615 26.8934 72.0091 30.351C71.9135 32.3995 72.5934 34.2481 71.2948 33.473C69.9963 32.698 69.7291 33.6614 67.7755 34.1573C65.8218 34.6531 67.1854 31.9186 66.5221 30.4897C65.8589 29.0608 60.0653 31.397 59.8968 29.2753C59.7283 27.1535 62.042 24.2675 64.4847 24.7372C66.9274 25.207 67.3466 20.9656 70.0564 20.4719Z" fill="url(#paint3_radial_15162_4927)"/>
+</g>
+<path opacity="0.3" d="M95.0596 34.5453C94.8789 35.8101 97.2277 35.268 97.9505 33.8226C98.2396 28.1854 94.9392 22.8013 93.2528 20.8139C89.2779 12.8641 80.4247 11.78 78.4373 11.5993C76.4498 11.4186 75.9078 11.78 75.5465 12.864C75.1851 13.9481 78.9794 13.7674 81.5088 13.9481C84.0383 14.1288 81.8702 19.9105 86.2064 19.7298C90.5427 19.5491 95.0596 25.1501 95.7823 27.1376C96.505 29.125 95.2403 33.2806 95.0596 34.5453Z" fill="url(#paint4_radial_15162_4927)"/>
+<path d="M80.2443 11.238C79.0879 10.6599 76.6307 11.4789 75.5467 11.9608C74.2819 12.6835 78.7989 12.5028 79.8829 12.1414C80.967 11.7801 83.3158 12.8641 84.0385 13.2255C84.7612 13.5868 85.8453 15.2129 88.0134 15.5743C90.1815 15.9356 91.8076 20.2719 92.8917 20.8139C93.9757 21.356 94.3371 23.5241 94.8791 24.7888C95.4212 26.0536 95.7825 26.5956 96.8666 28.2217C97.9506 29.8478 96.6859 30.7512 96.8666 32.1966C97.0472 33.642 97.4086 34.184 97.77 34.0034C98.1313 33.8227 98.854 31.4739 97.77 29.3057C96.6859 27.1376 96.6859 25.6922 96.3245 24.4275C95.9632 23.1627 92.169 18.2844 90.9042 17.2004C89.6395 16.1163 88.7361 15.3936 87.652 14.3095C86.568 13.2255 81.6897 11.9608 80.2443 11.238Z" fill="#81B0C0"/>
+</g>
+<g opacity="0.4" filter="url(#filter1_f_15162_4927)">
+<path opacity="0.7" d="M185.126 111.045C214.874 112.136 209.444 133.042 202.652 145.554C197.954 150.071 186.316 151.252 175.802 157.434C172.203 159.551 167.986 159.863 165.114 162.023C161.727 164.571 159.791 168.905 156.846 170.413C156.144 170.894 151.414 170.678 152.243 169.295C153.279 167.566 153.258 165.214 150.617 166.513C147.976 167.811 146.215 171.578 146.253 169.295C146.292 167.012 152.604 163.08 152.243 161.634C151.942 160.433 149.587 161.762 148.087 163.08C146.588 164.398 141.453 171.162 140.723 170.679C139.992 170.197 149.744 157.976 149.352 157.298C148.961 156.62 142.54 161.442 142.667 160.731C144.474 150.613 155.994 150.022 156.846 148.626C160.347 141.623 145.797 150.581 150.153 145.115C154.147 140.101 160.058 137.233 163.722 132.986C176.363 118.329 178.617 114.24 185.126 111.045Z" fill="url(#paint5_radial_15162_4927)"/>
+<path opacity="0.5" d="M189.901 149.746C192.426 149.735 194.307 148.634 194.896 148.219C188.736 139.115 176.487 121.501 175.203 121.157C173.599 120.727 171.692 124.549 170.222 125.842C168.722 127.16 158.863 138.277 160.201 138.635C161.538 138.993 165.951 132.15 168.808 130.049C171.664 127.948 171.802 131.711 170.106 132.69C168.411 133.669 165.125 137.375 166.514 138.607C167.904 139.839 168.621 137.165 170.407 134.777C172.193 132.389 172.723 136.831 171.543 139.095C170.363 141.358 176.195 142.061 172.947 143.484C169.699 144.907 167.979 151.325 170.229 149.348C172.479 147.371 173.443 145.91 176.424 144.415C179.404 142.921 180.65 144.688 180.273 147.167C179.895 149.645 178.897 149.091 175.473 149.033C172.049 148.976 174.202 152.706 180.554 150.395C186.906 148.084 190.011 147.196 190.331 148.142C190.65 149.087 186.744 149.76 189.901 149.746Z" fill="#DAF6FF"/>
+<ellipse cx="165.042" cy="162.29" rx="1.38437" ry="0.55375" transform="rotate(-40.7052 165.042 162.29)" fill="#81B0C0"/>
+<ellipse cx="153.447" cy="158.095" rx="1.05246" ry="0.622755" transform="rotate(-40.7052 153.447 158.095)" fill="#81B0C0"/>
+<ellipse cx="156.074" cy="139.207" rx="0.632916" ry="0.619686" transform="rotate(-40.7052 156.074 139.207)" fill="#81B0C0"/>
+<ellipse cx="187.228" cy="152.548" rx="0.632916" ry="0.336428" transform="rotate(-40.7052 187.228 152.548)" fill="#81B0C0"/>
+<path d="M170.368 153.112C168.245 154.263 163.64 157.042 162.211 158.952M155.878 160.121C156.48 158.945 157.873 156.528 158.629 156.272M169.863 143.23C169.25 143.735 167.632 144.926 166.061 145.652C164.098 146.559 161.457 147.858 161.653 148.197M157.844 143.747C157.922 143.099 158.471 141.622 160.041 140.896C161.612 140.171 163.587 139.075 164.378 138.619M147.004 155.311C147.706 154.83 149.685 153.417 150.979 153.112C153.147 152.601 155.015 151.518 155.878 150.794" stroke="#81B0C0" stroke-width="0.5" stroke-linecap="round"/>
+<ellipse cx="18.5795" cy="20.4761" rx="18.5795" ry="20.4761" transform="matrix(0.828363 -0.560192 0.587218 0.809429 165.661 123.066)" fill="#BE996E"/>
+<ellipse cx="18.0024" cy="19.8804" rx="18.0024" ry="19.8804" transform="matrix(0.828363 -0.560192 0.587218 0.809429 166.617 122.419)" fill="#FFEEDB"/>
+<ellipse cx="12.1481" cy="13.4154" rx="12.1481" ry="13.4154" transform="matrix(0.828363 -0.560192 0.587218 0.809429 175.224 124.693)" fill="#BE996E"/>
+<ellipse cx="11.4335" cy="12.3563" rx="11.4335" ry="12.3563" transform="matrix(0.828363 -0.560192 0.587218 0.809429 176.349 125.636)" fill="#FFEEDB"/>
+<g style="mix-blend-mode:multiply">
+<path d="M184.277 130.603C183.252 128.502 180.357 124.313 181.322 128.619C182.063 132.699 180.126 129.078 179.467 130.577C178.807 132.077 180.524 132.977 181.57 133.2C182.615 133.422 183.727 139.542 184.294 139.948C184.861 140.354 185.463 137.63 184.957 135.953C184.452 134.277 185.559 133.229 184.277 130.603Z" fill="url(#paint6_radial_15162_4927)"/>
+</g>
+<g style="mix-blend-mode:multiply">
+<path d="M202.796 136.581C202.085 135.823 201.198 136.68 200.843 137.204C200.514 137.604 200.318 136.872 200.082 137.508C199.845 138.144 200.79 138.183 201.422 139.14C202.053 140.097 201.275 139.913 200.462 141.266C199.649 142.62 201.001 142.017 201.851 141.779C202.701 141.542 201.208 140.474 202.486 140.222C203.765 139.971 202.283 139.251 202.42 138.2C202.557 137.148 203.684 137.53 202.796 136.581Z" fill="url(#paint7_radial_15162_4927)"/>
+</g>
+<g style="mix-blend-mode:multiply">
+<path d="M198.905 125.456C198.846 127.659 192.167 126.294 188.836 125.336C186.85 124.822 184.902 125.107 185.927 123.996C186.953 122.884 186.065 122.424 185.981 120.411C185.897 118.397 188.293 120.293 189.828 119.938C191.363 119.583 190.267 113.433 192.378 113.704C194.489 113.975 196.838 116.833 195.876 119.127C194.914 121.421 198.979 122.703 198.905 125.456Z" fill="url(#paint8_radial_15162_4927)"/>
+</g>
+<path opacity="0.3" d="M210.06 132.545C209.879 133.81 212.228 133.268 212.95 131.823C213.24 126.185 209.939 120.801 208.253 118.814C204.278 110.864 195.425 109.78 193.437 109.599C191.45 109.419 190.908 109.78 190.546 110.864C190.185 111.948 193.979 111.767 196.509 111.948C199.038 112.129 196.87 117.91 201.206 117.73C205.543 117.549 210.06 123.15 210.782 125.138C211.505 127.125 210.24 131.281 210.06 132.545Z" fill="url(#paint9_radial_15162_4927)"/>
+<path d="M195.244 109.238C194.088 108.66 191.631 109.479 190.547 109.961C189.282 110.683 193.799 110.503 194.883 110.141C195.967 109.78 198.316 110.864 199.038 111.225C199.761 111.587 200.845 113.213 203.013 113.574C205.182 113.936 206.808 118.272 207.892 118.814C208.976 119.356 209.337 121.524 209.879 122.789C210.421 124.054 210.783 124.596 211.867 126.222C212.951 127.848 211.686 128.751 211.867 130.197C212.047 131.642 212.409 132.184 212.77 132.003C213.131 131.823 213.854 129.474 212.77 127.306C211.686 125.138 211.686 123.692 211.325 122.427C210.963 121.163 207.169 116.284 205.904 115.2C204.639 114.116 203.736 113.394 202.652 112.31C201.568 111.225 196.69 109.961 195.244 109.238Z" fill="#81B0C0"/>
+</g>
+<path opacity="0.7" d="M134 22.2504C216.323 25.2708 201.297 83.1248 182.5 117.75C169.5 130.25 137.292 133.518 108.197 150.627C98.237 156.484 86.5653 157.347 78.6178 163.326C69.245 170.376 63.8882 182.37 55.7384 186.545C53.7955 187.875 40.705 187.277 42.9997 183.45C45.8681 178.666 45.809 172.156 38.5 175.75C31.191 179.344 26.3182 189.767 26.4245 183.45C26.5308 177.132 44 166.25 42.9997 162.25C42.1684 158.926 35.6504 162.603 31.5001 166.25C27.3498 169.898 13.1415 188.616 11.1195 187.281C9.09747 185.946 36.0836 152.127 35 150.25C33.9164 148.373 16.1481 161.719 16.4997 159.75C21.4997 131.75 53.3812 130.114 55.7384 126.25C65.4262 106.871 25.1626 131.662 37.2149 116.536C48.2703 102.66 64.6269 94.724 74.7655 82.9691C109.749 42.4084 115.988 31.0914 134 22.2504Z" fill="url(#paint10_radial_15162_4927)"/>
+<path opacity="0.5" d="M147.213 129.352C154.202 129.321 159.408 126.273 161.038 125.124C143.991 99.9315 110.092 51.1862 106.54 50.2343C102.099 49.0445 96.8237 59.6222 92.754 63.1985C88.6034 66.8458 61.3217 97.6114 65.0222 98.603C68.7227 99.5945 80.9369 80.6565 88.8408 74.8419C96.7448 69.0273 97.1272 79.4419 92.4351 82.1509C87.743 84.8599 78.6492 95.1151 82.4949 98.5253C86.3406 101.935 88.3237 94.5344 93.2672 87.9266C98.2108 81.3188 99.6764 93.6101 96.4114 99.8745C93.1463 106.139 109.284 108.083 100.296 112.021C91.3084 115.958 86.549 133.721 92.7744 128.25C98.9999 122.779 101.67 118.735 109.917 114.599C118.165 110.463 121.614 115.353 120.569 122.212C119.525 129.072 116.762 127.538 107.286 127.379C97.8101 127.22 103.77 137.542 121.348 131.147C138.927 124.752 147.518 122.294 148.403 124.911C149.288 127.528 138.477 129.391 147.213 129.352Z" fill="#DAF6FF"/>
+<ellipse cx="78.4193" cy="164.066" rx="3.83107" ry="1.53243" transform="rotate(-40.7052 78.4193 164.066)" fill="#81B0C0"/>
+<ellipse cx="46.3319" cy="152.456" rx="2.91255" ry="1.72339" transform="rotate(-40.7052 46.3319 152.456)" fill="#81B0C0"/>
+<ellipse cx="53.6044" cy="100.184" rx="1.75151" ry="1.7149" transform="rotate(-40.7052 53.6044 100.184)" fill="#81B0C0"/>
+<ellipse cx="139.816" cy="137.106" rx="1.75151" ry="0.931019" transform="rotate(-40.7052 139.816 137.106)" fill="#81B0C0"/>
+<path d="M93.1581 138.665C87.2809 141.85 74.5378 149.54 70.5829 154.827M53.0576 158.063C54.7231 154.808 58.5776 148.12 60.6712 147.411M91.7595 111.32C90.0632 112.716 85.5843 116.011 81.2386 118.02C75.8064 120.53 68.4974 124.125 69.0391 125.063M58.4995 112.75C58.7156 110.957 60.2341 106.869 64.5798 104.86C68.9256 102.852 74.3913 99.8214 76.581 98.5572M28.4995 144.75C30.4425 143.42 35.9198 139.509 39.4995 138.665C45.4995 137.25 50.6696 134.254 53.0576 132.25" stroke="#81B0C0" stroke-width="0.5" stroke-linecap="round"/>
+<ellipse cx="51.4163" cy="56.665" rx="51.4163" ry="56.665" transform="matrix(0.828363 -0.560192 0.587218 0.809429 80.1338 55.5178)" fill="#BE996E"/>
+<ellipse cx="49.8192" cy="55.0162" rx="49.8192" ry="55.0162" transform="matrix(0.828363 -0.560192 0.587218 0.809429 82.7793 53.7283)" fill="#FFEEDB"/>
+<ellipse cx="33.6183" cy="37.1254" rx="33.6183" ry="37.1254" transform="matrix(0.828363 -0.560192 0.587218 0.809429 106.597 60.0193)" fill="#BE996E"/>
+<ellipse cx="31.6408" cy="34.1944" rx="31.6408" ry="34.1944" transform="matrix(0.828363 -0.560192 0.587218 0.809429 109.711 62.6286)" fill="#FFEEDB"/>
+<g style="mix-blend-mode:multiply">
+<path d="M152.974 31.3877C148.48 32.2945 138.932 37.6219 147.357 40.4559C155.221 43.8565 147.357 46.1234 149.604 51.2243C151.85 56.3252 154.659 50.6575 155.782 46.6902C156.906 42.7228 168.701 47.8237 169.824 46.1234C170.947 44.4231 166.454 37.6221 163.084 37.0553C159.714 36.4886 158.591 30.2541 152.974 31.3877Z" fill="url(#paint11_radial_15162_4927)"/>
+</g>
+<g style="mix-blend-mode:multiply">
+<path d="M140.5 97.2502C134.9 101.25 140.834 106.584 144.5 108.75C147.289 110.75 142 111.75 146.5 113.25C151 114.75 151.5 109.25 158.5 105.75C165.5 102.25 164 106.75 173.5 111.75C183 116.75 179 108.75 177.5 103.75C176 98.7502 168 107.25 166.5 99.7502C165 92.2502 159.5 100.75 152 99.7502C144.5 98.7502 147.5 92.2502 140.5 97.2502Z" fill="url(#paint12_radial_15162_4927)"/>
+</g>
+<g style="mix-blend-mode:multiply">
+<path d="M165 67.7502C162.6 60.9502 179 54.5835 187.5 52.2502C192.5 50.6896 196.5 46.7502 195.5 51.7502C194.5 56.7502 197 56.7502 199.5 62.7502C202 68.7502 194.5 66.7502 191.5 70.2502C188.5 73.7502 198 90.7502 193 93.2502C188 95.7502 179.5 90.7502 179 82.2502C178.5 73.7502 168 76.2502 165 67.7502Z" fill="url(#paint13_radial_15162_4927)"/>
+</g>
+<path opacity="0.3" d="M203 81.7501C202.5 85.2501 209 83.7501 211 79.7501C211.8 64.1499 202.667 49.2501 198 43.7502C187 21.7502 162.5 18.75 157 18.25C151.5 17.75 150 18.75 149 21.75C148 24.75 158.5 24.25 165.5 24.75C172.5 25.25 166.5 41.2501 178.5 40.7501C190.5 40.2501 203 55.7501 205 61.2501C207 66.7501 203.5 78.2501 203 81.7501Z" fill="url(#paint14_radial_15162_4927)"/>
+<path d="M162 17.2503C158.8 15.6503 152 17.9169 149 19.2503C145.5 21.2503 158 20.7502 161 19.7502C164 18.7502 170.5 21.7502 172.5 22.7502C174.5 23.7502 177.5 28.2502 183.5 29.2502C189.5 30.2502 194 42.2502 197 43.7502C200 45.2502 201 51.2502 202.5 54.7502C204 58.2502 205 59.7502 208 64.2502C211 68.7502 207.5 71.2502 208 75.2502C208.5 79.2502 209.5 80.7502 210.5 80.2502C211.5 79.7502 213.5 73.2502 210.5 67.2502C207.5 61.2502 207.5 57.2502 206.5 53.7502C205.5 50.2502 195 36.7502 191.5 33.7502C188 30.7502 185.5 28.7502 182.5 25.7502C179.5 22.7502 166 19.2503 162 17.2503Z" fill="#81B0C0"/>
+<path opacity="0.7" d="M94 38.7504C98 39.5504 103.333 38.4171 105.5 37.7504C108.5 35.7506 103.5 31.7503 101 30.7503C98.5 29.7503 99.5 32.7503 99.5 33.7503C99.5 34.7503 97.5 35.7504 94 35.2504C90.5 34.7504 89 37.7504 94 38.7504Z" fill="url(#paint15_radial_15162_4927)"/>
+<path opacity="0.7" d="M159.319 144.382C157.943 142.078 162.26 136.807 164.591 134.459C167.386 131.24 171.571 133.934 167.807 137.226C164.043 140.517 169.403 145.128 170.202 149.08C171 153.031 166.899 151.835 165.49 146.425C164.081 141.016 161.04 147.261 159.319 144.382Z" fill="url(#paint16_radial_15162_4927)"/>
+<path opacity="0.5" d="M103.58 34.4113C101.58 32.5779 98.28 28.6113 101.08 27.4113C104.58 25.9113 106.08 35.4113 103.58 34.4113Z" fill="#DAF6FF"/>
+<path opacity="0.5" d="M164 139.25C162.8 137.25 165.834 136.417 167.5 136.25C170.5 136.25 168.5 138.75 169 140.25C169.5 141.75 165.5 141.75 164 139.25Z" fill="#DAF6FF"/>
+<path opacity="0.5" d="M160 151.75C159.2 151.35 160.666 149.584 161.5 148.75C164 148.25 162.5 149.25 162.5 150.25C162.5 151.25 161 152.25 160 151.75Z" fill="#DAF6FF"/>
+</g>
+<defs>
+<filter id="filter0_f_15162_4927" x="23.6836" y="9.03918" width="76.6592" height="65.6649" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="1" result="effect1_foregroundBlur_15162_4927"/>
+</filter>
+<filter id="filter1_f_15162_4927" x="138.684" y="107.039" width="76.6592" height="65.6649" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="1" result="effect1_foregroundBlur_15162_4927"/>
+</filter>
+<radialGradient id="paint0_radial_15162_4927" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(78.7929 33.0048) rotate(130.35) scale(54.3596 59.8412)">
+<stop stop-color="#0089B4"/>
+<stop offset="1" stop-color="#68DBFF"/>
+</radialGradient>
+<radialGradient id="paint1_radial_15162_4927" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(91.4439 25.1124) rotate(-178.345) scale(5.38615 5.84623)">
+<stop stop-color="#866B0D"/>
+<stop offset="1" stop-color="#B3631A"/>
+</radialGradient>
+<radialGradient id="paint2_radial_15162_4927" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(77.4835 41.8642) rotate(-165.905) scale(3.23187 2.61318)">
+<stop stop-color="#866B0D"/>
+<stop offset="1" stop-color="#B3631A"/>
+</radialGradient>
+<radialGradient id="paint3_radial_15162_4927" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(72.7484 27.5884) rotate(-155.041) scale(13.1882 6.53536)">
+<stop stop-color="#866B0D"/>
+<stop offset="1" stop-color="#B3631A"/>
+</radialGradient>
+<radialGradient id="paint4_radial_15162_4927" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(90.5517 27.6647) rotate(-149.002) scale(16.537 20.7707)">
+<stop stop-color="#0089B4"/>
+<stop offset="1" stop-color="#68DBFF"/>
+</radialGradient>
+<radialGradient id="paint5_radial_15162_4927" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(193.793 131.005) rotate(130.35) scale(54.3596 59.8412)">
+<stop stop-color="#0089B4"/>
+<stop offset="1" stop-color="#68DBFF"/>
+</radialGradient>
+<radialGradient id="paint6_radial_15162_4927" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(184.459 131.935) rotate(-178.345) scale(5.38615 5.84623)">
+<stop stop-color="#866B0D"/>
+<stop offset="1" stop-color="#B3631A"/>
+</radialGradient>
+<radialGradient id="paint7_radial_15162_4927" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(202.978 138.813) rotate(-165.905) scale(3.23187 2.61318)">
+<stop stop-color="#866B0D"/>
+<stop offset="1" stop-color="#B3631A"/>
+</radialGradient>
+<radialGradient id="paint8_radial_15162_4927" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(191.387 126.628) rotate(-53.1774) scale(13.1882 6.53536)">
+<stop stop-color="#866B0D"/>
+<stop offset="1" stop-color="#B3631A"/>
+</radialGradient>
+<radialGradient id="paint9_radial_15162_4927" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(205.552 125.665) rotate(-149.002) scale(16.537 20.7707)">
+<stop stop-color="#0089B4"/>
+<stop offset="1" stop-color="#68DBFF"/>
+</radialGradient>
+<radialGradient id="paint10_radial_15162_4927" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(157.984 77.487) rotate(130.35) scale(150.433 165.603)">
+<stop stop-color="#0089B4"/>
+<stop offset="1" stop-color="#68DBFF"/>
+</radialGradient>
+<radialGradient id="paint11_radial_15162_4927" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(155.5 32.7502) rotate(100.305) scale(22.3607 12.0263)">
+<stop stop-color="#866B0D"/>
+<stop offset="1" stop-color="#B3631A"/>
+</radialGradient>
+<radialGradient id="paint12_radial_15162_4927" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(156.523 96.6162) rotate(109.374) scale(19.211 18.3721)">
+<stop stop-color="#866B0D"/>
+<stop offset="1" stop-color="#B3631A"/>
+</radialGradient>
+<radialGradient id="paint13_radial_15162_4927" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(180.349 52.3383) rotate(96.931) scale(44.9257 16.446)">
+<stop stop-color="#866B0D"/>
+<stop offset="1" stop-color="#B3631A"/>
+</radialGradient>
+<radialGradient id="paint14_radial_15162_4927" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(190.525 62.709) rotate(-149.002) scale(45.7639 57.4801)">
+<stop stop-color="#0089B4"/>
+<stop offset="1" stop-color="#68DBFF"/>
+</radialGradient>
+<radialGradient id="paint15_radial_15162_4927" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(102.366 36.9235) rotate(-161.977) scale(11.488 9.61645)">
+<stop stop-color="#0089B4"/>
+<stop offset="1" stop-color="#68DBFF"/>
+</radialGradient>
+<radialGradient id="paint16_radial_15162_4927" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(169 133.25) rotate(113.199) scale(15.2315 21.6634)">
+<stop stop-color="#0089B4"/>
+<stop offset="1" stop-color="#68DBFF"/>
+</radialGradient>
+<clipPath id="clip0_15162_4927">
+<rect width="220" height="220" fill="white" transform="translate(0 0.25)"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/src/assets/icons/visu/ecogesture/ECOGESTURE0082.svg b/src/assets/icons/visu/ecogesture/ECOGESTURE0082.svg
new file mode 100644
index 0000000000000000000000000000000000000000..35a31b5531b6b4749200492af3e90a222a2a327f
--- /dev/null
+++ b/src/assets/icons/visu/ecogesture/ECOGESTURE0082.svg
@@ -0,0 +1,156 @@
+<svg width="220" height="221" viewBox="0 0 220 221" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_15174_1062)">
+<path opacity="0.5" d="M11.2079 179.653C9.5871 175.286 24.2075 172.305 27.5842 171.622L29.6434 171.008C48.4398 165.394 68.0795 163.144 87.6584 164.359L92.5544 164.663C146.582 164.663 184.806 171.622 189.533 176.399C194.26 181.175 183.912 182.737 189.533 185.341C194.155 187.482 212.657 188.128 211.982 196.316C211.307 204.503 157.249 199.597 150.496 203.009C143.743 206.42 160.626 208.467 157.249 213.243C154.894 216.575 102.547 215.972 93.0921 213.243C83.6373 210.514 96.1369 206.975 97.8195 203.009C99.8455 198.232 83.6373 199.597 65.4032 199.597C47.169 199.597 10.0254 198.232 5.298 194.821C0.570619 191.409 10.0254 188.68 13.4021 187.316C16.7788 185.951 13.2339 185.111 11.2079 179.653Z" fill="url(#paint0_radial_15174_1062)"/>
+<path opacity="0.5" d="M51.308 203.009C46.0644 203.009 42.6274 203.431 40.4607 203.959C38.1916 204.511 35.6561 206.731 37.9765 206.996C41.6302 207.413 49.5291 207.165 54.592 206.595C62.5675 205.699 61.16 207.791 75.2344 207.492C89.3088 207.193 72.8887 205.998 75.2344 203.756C77.5801 201.515 64.4441 203.009 51.308 203.009Z" fill="url(#paint1_radial_15174_1062)"/>
+<path opacity="0.5" d="M166.346 215.932C162.097 216.966 164.576 218.303 166.346 218.841C167.794 219.272 170.884 219.941 171.657 219.165C172.623 218.195 173.588 219.165 179.865 218.841C186.141 218.518 191.452 216.902 190.969 215.932C190.487 214.962 185.176 215.932 180.83 216.578C176.485 217.225 171.657 214.639 166.346 215.932Z" fill="url(#paint2_radial_15174_1062)"/>
+<path d="M30.0006 192.522H15.5006C9.50061 192.522 14.0006 189.022 19.5006 187.521C21.8799 186.873 20.8091 183.395 18.4996 182.53C17.696 182.229 16.9924 181.89 16.5006 181.521C14.5006 180.021 18.5006 179.521 25.5006 179.021C32.5006 178.521 28.5006 178.021 30.0006 175.021C31.5006 172.021 34.5006 170.521 40.5006 166.521C46.5006 162.521 43.0006 164.522 49.5006 164.522H57.5006C64.0006 164.522 61.5006 164.522 65.0006 162.521C68.5006 160.521 66.5006 159.522 74.5006 159.522C82.5006 159.522 76.5006 157.521 87.5006 155.522C98.5006 153.522 93.0006 157.021 96.0006 159.522C99.0006 162.022 104.5 164.522 109.001 164.522C119.441 164.522 111.501 164.522 119.001 159.522C126.501 154.522 124.501 157.522 129.501 155.522C134.501 153.522 145.001 158.022 153.501 159.522C162.001 161.022 162.501 162.522 162.501 164.522C162.501 166.522 191.501 169.522 193.501 172.522C195.501 175.522 193.059 181.06 196.001 183.021C199 185.021 207.92 187.235 207 188.521C204.5 192.021 182 183.521 182 187.521C182 191.521 177.501 189.022 176.501 191.022C175.501 193.022 181.001 191.022 189.501 191.022C198.001 191.022 198.501 193.522 196.001 197.022C193.501 200.522 189.001 197.022 185.001 199.022C181.001 201.022 182.001 197.022 179.001 195.022C176.001 193.022 174.001 195.022 169.501 197.022C165.001 199.022 162.501 199.022 157.501 199.022C152.501 199.022 147.001 199.022 145.001 197.022C143.001 195.022 148.001 197.022 151.501 195.022C155.001 193.022 162.501 191.022 162.501 189.022C162.501 187.022 156.501 189.022 151.501 191.022C146.501 193.022 134.001 191.022 131.501 191.022C129.001 191.022 126.501 191.022 122.001 192.522C117.501 194.022 117.001 193.522 117.001 197.022C117.001 200.522 120.001 197.022 129.501 199.022C139.001 201.022 128.001 201.522 126.501 203.022C125.001 204.522 120.001 204.522 117.001 207.022C114.001 209.522 101.667 212.021 100.5 208.521C99.5005 205.521 104.501 206.522 109.001 204.522C113.501 202.522 108.501 200.022 107.501 197.022C106.501 194.022 102.001 197.022 99.0006 193.522C103.501 192.522 99.5006 191.022 96.0006 189.022C92.5006 187.022 88.5006 191.022 83.0006 192.522C77.5006 194.022 76.5006 192.522 73.0006 192.522C69.5006 192.522 68.0006 192.522 65.0006 191.022C62.0006 189.522 56.0006 189.022 49.5006 189.022C43.0006 189.022 45.0006 190.022 43.0006 192.522C41.0006 195.022 39.5006 192.522 30.0006 192.522Z" fill="#6F4F41"/>
+<path d="M30.0006 192.522H15.5006C9.50061 192.522 14.0006 189.022 19.5006 187.521C21.8799 186.873 20.8091 183.395 18.4996 182.53C17.696 182.229 16.9924 181.89 16.5006 181.521C14.5006 180.021 18.5006 179.521 25.5006 179.021C32.5006 178.521 28.5006 178.021 30.0006 175.021C31.5006 172.021 34.5006 170.521 40.5006 166.521C46.5006 162.521 43.0006 164.522 49.5006 164.522H57.5006C64.0006 164.522 61.5006 164.522 65.0006 162.521C68.5006 160.521 66.5006 159.522 74.5006 159.522C82.5006 159.522 76.5006 157.521 87.5006 155.522C98.5006 153.522 93.0006 157.021 96.0006 159.522C99.0006 162.022 104.5 164.522 109.001 164.522C119.441 164.522 111.501 164.522 119.001 159.522C126.501 154.522 124.501 157.522 129.501 155.522C134.501 153.522 145.001 158.022 153.501 159.522C162.001 161.022 162.501 162.522 162.501 164.522C162.501 166.522 191.501 169.522 193.501 172.522C195.501 175.522 193.059 181.06 196.001 183.021C199 185.021 207.92 187.235 207 188.521C204.5 192.021 182 183.521 182 187.521C182 191.521 177.501 189.022 176.501 191.022C175.501 193.022 181.001 191.022 189.501 191.022C198.001 191.022 198.501 193.522 196.001 197.022C193.501 200.522 189.001 197.022 185.001 199.022C181.001 201.022 182.001 197.022 179.001 195.022C176.001 193.022 174.001 195.022 169.501 197.022C165.001 199.022 162.501 199.022 157.501 199.022C152.501 199.022 147.001 199.022 145.001 197.022C143.001 195.022 148.001 197.022 151.501 195.022C155.001 193.022 162.501 191.022 162.501 189.022C162.501 187.022 156.501 189.022 151.501 191.022C146.501 193.022 134.001 191.022 131.501 191.022C129.001 191.022 126.501 191.022 122.001 192.522C117.501 194.022 117.001 193.522 117.001 197.022C117.001 200.522 120.001 197.022 129.501 199.022C139.001 201.022 128.001 201.522 126.501 203.022C125.001 204.522 120.001 204.522 117.001 207.022C114.001 209.522 101.667 212.021 100.5 208.521C99.5005 205.521 104.501 206.522 109.001 204.522C113.501 202.522 108.501 200.022 107.501 197.022C106.501 194.022 102.001 197.022 99.0006 193.522C103.501 192.522 99.5006 191.022 96.0006 189.022C92.5006 187.022 88.5006 191.022 83.0006 192.522C77.5006 194.022 76.5006 192.522 73.0006 192.522C69.5006 192.522 68.0006 192.522 65.0006 191.022C62.0006 189.522 56.0006 189.022 49.5006 189.022C43.0006 189.022 45.0006 190.022 43.0006 192.522C41.0006 195.022 39.5006 192.522 30.0006 192.522Z" fill="url(#paint3_radial_15174_1062)" fill-opacity="0.75"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M92.8152 154.938C88.6185 157.12 84.6094 159.853 86.0002 161.522C87.8003 163.682 87.5267 164.287 86.859 165.762C86.5994 166.336 86.2802 167.042 86.0002 168.022C85 171.522 87 172.522 88.5 172.522C88.9421 172.522 89.6448 172.739 90.4288 172.981C92.3051 173.561 94.6474 174.285 95 172.522C95.1676 171.684 95.1105 170.846 95.0546 170.026C94.9438 168.402 94.8381 166.851 96.5 165.522C98.2155 164.149 101.344 165.602 103.946 166.811C105.136 167.363 106.215 167.865 107 168.022C108.013 168.224 108.451 168.591 108.847 168.923C109.429 169.409 109.918 169.819 112 169.522C115.5 169.022 117.5 164.522 117.5 163.022C117.5 162.414 117.171 161.97 116.547 161.457C115.107 162.894 115.307 163.657 115.013 164.062C114.68 164.522 113.713 164.522 109 164.522C104.5 164.522 99.0003 162.022 96.0003 159.522C94.9868 158.677 94.9434 157.719 94.9062 156.896C94.8589 155.851 94.8216 155.027 92.8152 154.938ZM193.794 173.044C193.72 173.23 193.626 173.396 193.5 173.522C192.688 174.334 191.217 174.157 190.425 174.061C190.241 174.039 190.094 174.022 190 174.022C189.738 174.022 188.787 174.572 187.509 175.312C186.352 175.983 184.926 176.809 183.5 177.522C181.792 178.376 181.381 177.123 180.974 175.886C180.667 174.949 180.362 174.022 179.5 174.022C177.5 174.022 175.5 174.022 173 175.022C171.845 175.484 171.651 175.732 171.43 176.014C171.283 176.202 171.125 176.405 170.662 176.696C170.018 177.1 169.253 177.091 168.478 177.081C168.055 177.075 167.629 177.07 167.217 177.132C166.724 177.207 166.258 177.445 165.654 177.752C165.202 177.983 164.674 178.252 164 178.522C161.573 179.493 163.388 180.935 168.53 182.849C168.841 182.965 169.17 183.038 169.5 183.074C172.051 183.356 172.517 183.644 173.136 184.027C173.577 184.3 174.096 184.62 175.5 185.022C177.098 185.478 178.487 186.143 179.715 186.731C180.544 187.127 181.299 187.489 181.996 187.728C181.999 187.661 182 187.592 182 187.522C182 186.465 183.57 186.281 185.927 186.517C186.134 185.959 186.265 185.328 186.382 184.76C186.407 184.637 186.432 184.516 186.457 184.4C186.484 184.275 186.5 184.148 186.5 184.022C186.5 183.497 187.051 183.248 187.791 182.912C188.461 182.609 189.287 182.235 190 181.522C190.574 180.947 191.369 180.813 192.383 180.641C193.005 180.536 193.711 180.416 194.499 180.172C194.394 179.364 194.395 178.479 194.397 177.583C194.4 175.978 194.404 174.338 193.794 173.044ZM197.157 193.165C196.826 193.069 196.437 193.022 196 193.022C194.667 193.022 194.667 193.466 194.667 193.911C194.667 194.133 194.667 194.355 194.5 194.522C194.25 194.772 193.75 194.772 192.938 194.772C192.125 194.772 191 194.772 189.5 195.022C187.158 195.412 186.644 195.803 185.818 196.431C185.586 196.607 185.329 196.803 185 197.022C184.242 197.527 184.509 198.326 185.018 199.013C186.794 198.133 188.667 198.332 190.42 198.518C192.611 198.751 194.613 198.964 196 197.022C197.081 195.509 197.601 194.183 197.157 193.165ZM175.062 194.44C175.114 194.393 175.165 194.346 175.216 194.298C175.408 194.117 175.586 193.916 175.702 193.679C176.13 192.805 175.158 192.979 172.786 193.572C172.421 193.663 172.056 193.793 171.689 193.923C170.919 194.197 170.144 194.473 169.356 194.394C168.962 194.355 168.51 194.352 168 194.522C167.415 194.717 166.982 195.14 166.701 195.643C166.149 196.632 166.853 197.483 167.858 197.697C168.379 197.502 168.923 197.278 169.5 197.022C170.487 196.584 171.353 196.145 172.136 195.749C173.243 195.189 174.184 194.713 175.062 194.44ZM147.175 191.833C147.68 191.56 148.122 191.152 148.5 190.522C149.639 188.623 148.183 188.455 146.541 188.265C146.021 188.204 145.481 188.142 145 188.022C144.19 187.819 143.544 187.781 142.862 187.74C141.862 187.681 140.785 187.617 139 187.022C137.259 186.441 137.37 185.861 137.575 184.793C137.723 184.019 137.92 182.991 137.5 181.522C136.943 179.572 137.007 178.708 137.086 177.634C137.149 176.78 137.222 175.793 137 174.022C136.711 171.712 136.089 172.07 134.845 172.784C133.935 173.307 132.691 174.022 131 174.022C128.81 174.022 128.119 174.471 127.367 174.96C126.746 175.365 126.084 175.795 124.5 176.022C121 176.522 122 179.022 124 181.522C125.215 183.04 125.138 183.268 124.779 184.333C124.547 185.021 124.196 186.059 124 188.022C123.651 191.51 122.816 191.105 122.003 190.71C121.651 190.539 121.303 190.371 121 190.522C120 191.022 118.5 191.022 116 191.022C114.605 191.022 114.611 191.489 114.629 192.685C114.641 193.529 114.658 194.737 114.192 196.399C114.075 196.813 113.856 197.191 113.626 197.555C113.169 198.281 113.393 198.404 113.916 198.691C114.323 198.914 114.912 199.237 115.5 200.022C116.357 201.165 116.888 201.001 118.025 200.651C118.878 200.389 120.071 200.022 122 200.022H129.12C129.876 200.022 130.546 199.79 131.149 199.406C130.686 199.284 130.14 199.157 129.5 199.022C124.959 198.066 121.904 198.367 119.951 198.559C117.818 198.769 117 198.849 117 197.022C117 194.072 117.355 193.964 120.161 193.104C120.684 192.944 121.293 192.758 122 192.522C126.5 191.022 129 191.022 131.5 191.022C132.097 191.022 133.262 191.136 134.758 191.282C138.122 191.61 143.159 192.102 147.175 191.833ZM94.6357 188.532C94.9043 188.19 95.205 187.868 95.5527 187.608C97.0752 186.472 97.4125 186.247 97.7501 186.022C98.1251 185.772 98.5004 185.521 100.5 184.022C102.991 182.154 101.798 182.612 99.5778 183.465C98.2323 183.982 96.5094 184.644 95 185.022C92.9999 185.522 92.25 185.522 91.0625 185.522C89.8751 185.522 88.2502 185.522 84.5002 186.022C82.6709 186.022 82.2011 186.022 81.7516 186.117C81.5963 186.15 81.4433 186.195 81.2376 186.255C80.7368 186.4 79.9232 186.637 78.0002 187.022C74.0963 187.803 75.0693 188.583 76.6355 189.84C77.0752 190.193 77.5617 190.583 78.0002 191.022C78.8943 191.916 79.5886 192.61 80.1276 193.105C80.9366 193.01 81.8741 192.829 83.0003 192.522C84.9747 191.983 86.7558 191.123 88.3898 190.333C90.7276 189.203 92.7644 188.219 94.6357 188.532ZM45.4983 189.335C44.396 188.964 43.3216 188.535 42.5002 188.022C41.8082 187.676 41.2359 187.809 40.742 187.923C39.8082 188.14 39.1542 188.292 38.5002 185.022C38.0976 183.411 35.7498 184.394 33.0232 185.883C32.4501 186.195 32.0483 186.738 31.6509 187.274C31.1748 187.917 30.705 188.552 29.9543 188.772C29.7021 188.846 29.3891 188.924 29.0006 189.022L29.0002 189.022C27.0002 189.522 26.0001 190.022 24.0001 192.522C24 192.522 24 192.522 24 192.522H30.0003C34.1553 192.522 36.78 193 38.5855 193.329C38.9768 193.4 39.3296 193.465 39.6513 193.515C40.4357 193.407 41.3507 193.278 42.4127 193.125C42.6092 192.968 42.8023 192.769 43.0003 192.522C43.5453 191.84 43.7933 191.271 43.9972 190.802C44.3059 190.092 44.5136 189.615 45.4983 189.335ZM73.3144 159.53C73.0338 159.9 72.8103 160.325 72.6607 160.779C72.0713 162.567 71.2224 164.605 70 165.522C69.5208 165.881 69.099 166.241 68.6934 166.586L68.6933 166.586C67.406 167.683 66.2812 168.641 64 169.022C63 169.188 62.2777 169.188 61.611 169.188C60.2777 169.188 59.1666 169.188 56.5 170.522C55.0298 171.257 53.6271 171.654 52.5403 171.962C50.6702 172.492 49.7351 172.757 51 174.022C52.6906 175.712 56.1676 175.617 58.7129 175.547L58.713 175.547L58.7138 175.546C59.1793 175.534 59.6136 175.522 60.0001 175.522C60.8157 175.522 61.5248 175.256 62.2491 174.984C63.7449 174.423 65.305 173.837 68.0001 175.522C69.4909 176.453 70.4955 177.385 71.221 178.058C71.3268 178.156 71.4267 178.249 71.5213 178.335C72.7544 179.461 72.6928 177.259 71.3878 176.218C68.1138 173.605 65.8314 172.66 65.0001 172.522C64.1668 172.355 63.6001 171.722 68.0001 170.522C69.9344 169.994 71.3121 169.714 72.329 169.507C74.2034 169.126 74.8518 168.994 75.5001 168.022C76.5001 166.522 77.0001 164.522 77.0001 163.022C77.0001 162.667 77.2236 162.201 77.466 161.695C77.8506 160.893 78.2825 159.992 77.9424 159.283C77.2112 159.436 76.1554 159.522 74.5003 159.522C74.0779 159.522 73.6833 159.525 73.3144 159.53Z" fill="#55392C"/>
+<path d="M58 180.75C54.8 183.55 49.6667 181.25 47.5 179.75L47 181.25C52.6 184.85 56.6667 182.417 58 180.75Z" fill="#7F9C40"/>
+<path d="M57 179.75L58 180.75C55 183.75 49.1667 181.25 47.5 179.75C49.1 180.95 54.5 183.25 57 179.75Z" fill="#EEDC9E"/>
+<g opacity="0.35" filter="url(#filter0_f_15174_1062)">
+<path d="M192.141 90.0308C191.44 89.4935 190.465 90.139 190.551 91.0181C190.722 92.778 190.795 95.3706 190.276 98.2194C189.92 100.176 192.669 101.357 194.605 100.903C196.542 100.448 197.743 98.5098 197.288 96.5734C196.661 93.9004 194.015 91.4669 192.141 90.0308Z" fill="url(#paint4_radial_15174_1062)"/>
+<path d="M170.971 128.031C171.672 127.494 172.646 128.139 172.56 129.018C172.389 130.778 172.317 133.371 172.835 136.219C173.192 138.176 170.443 139.357 168.506 138.903C166.57 138.448 165.368 136.51 165.823 134.573C166.45 131.9 169.096 129.467 170.971 128.031Z" fill="url(#paint5_radial_15174_1062)"/>
+<path d="M101.439 83.6565C100.904 82.9543 99.7942 83.3219 99.6464 84.1927C99.3503 85.9359 98.7409 88.4569 97.4935 91.0701C96.6368 92.8652 98.9802 94.7253 100.968 94.7942C102.956 94.8631 104.623 93.3075 104.692 91.3197C104.787 88.5757 102.872 85.5337 101.439 83.6565Z" fill="url(#paint6_radial_15174_1062)"/>
+<path d="M34.9295 121.855C35.7419 121.508 36.5257 122.375 36.2249 123.205C35.6228 124.868 34.9098 127.362 34.7062 130.25C34.5664 132.234 31.6104 132.697 29.847 131.776C28.0837 130.856 27.4004 128.681 28.3207 126.917C29.5911 124.483 32.7578 122.781 34.9295 121.855Z" fill="url(#paint7_radial_15174_1062)"/>
+<path d="M126.737 28.0685C125.875 27.8756 125.262 28.8706 125.709 29.6324C126.604 31.1575 127.759 33.4796 128.485 36.2828C128.984 38.2082 131.975 38.1247 133.541 36.8986C135.107 35.6726 135.383 33.409 134.157 31.8428C132.465 29.6808 129.041 28.5842 126.737 28.0685Z" fill="url(#paint8_radial_15174_1062)"/>
+<path d="M53.4327 68.2513C53.2415 67.389 52.0805 67.2564 51.5804 67.9845C50.5793 69.442 48.967 71.4736 46.7371 73.3209C45.2054 74.5898 46.5504 77.2624 48.3253 78.1602C50.1002 79.0579 52.2668 78.3469 53.1646 76.572C54.4039 74.1219 53.9437 70.5565 53.4327 68.2513Z" fill="url(#paint9_radial_15174_1062)"/>
+<path d="M36.6866 36.0462C37.5693 36.0142 37.9898 37.1045 37.411 37.7717C36.2524 39.1074 34.6919 41.179 33.4652 43.802C32.6226 45.6038 29.6975 44.9747 28.382 43.4828C27.0665 41.9909 27.2094 39.7151 28.7012 38.3996C30.7606 36.5836 34.327 36.1318 36.6866 36.0462Z" fill="url(#paint10_radial_15174_1062)"/>
+</g>
+<g opacity="0.75">
+<path d="M27.5228 96.1056C28.2271 95.5726 29.1984 96.2213 29.1077 97.0999C28.9132 98.9843 28.8141 101.832 29.3856 104.97C29.7669 107.065 26.8248 108.328 24.7524 107.842C22.68 107.356 21.3943 105.281 21.8808 103.209C22.5672 100.284 25.5114 97.6277 27.5228 96.1056Z" fill="url(#paint11_radial_15174_1062)"/>
+<path d="M50.2985 140.106C49.5942 139.573 48.6228 140.221 48.7135 141.1C48.9081 142.984 49.0072 145.832 48.4357 148.97C48.0544 151.065 50.9965 152.328 53.0689 151.842C55.1413 151.356 56.4269 149.281 55.9405 147.209C55.2541 144.284 52.3098 141.628 50.2985 140.106Z" fill="url(#paint12_radial_15174_1062)"/>
+<path d="M113.928 101.134C114.468 100.435 115.575 100.807 115.718 101.678C116.024 103.548 116.675 106.322 118.049 109.201C118.966 111.122 116.458 113.113 114.331 113.186C112.203 113.26 110.419 111.595 110.345 109.468C110.241 106.466 112.386 103.13 113.928 101.134Z" fill="url(#paint13_radial_15174_1062)"/>
+<path d="M176.928 146.405C177.468 145.706 178.575 146.078 178.718 146.949C179.024 148.819 179.675 151.593 181.049 154.472C181.966 156.393 179.458 158.384 177.331 158.458C175.203 158.531 173.419 156.866 173.345 154.739C173.241 151.737 175.386 148.401 176.928 146.405Z" fill="url(#paint14_radial_15174_1062)"/>
+<path d="M65.4803 17.0102C66.3433 16.8225 66.9522 17.8193 66.5007 18.5785C65.5325 20.2068 64.246 22.7493 63.4459 25.8373C62.9121 27.898 59.7112 27.8086 58.035 26.4964C56.3588 25.1843 56.0637 22.7617 57.3759 21.0855C59.2276 18.7202 63.0155 17.5464 65.4803 17.0102Z" fill="url(#paint15_radial_15174_1062)"/>
+<path d="M161.24 69.8876C161.437 69.0264 162.598 68.8982 163.094 69.6292C164.157 71.197 165.913 73.441 168.37 75.476C170.009 76.834 168.569 79.6943 166.67 80.6551C164.77 81.6159 162.452 80.855 161.491 78.9554C160.135 76.2749 160.68 72.3469 161.24 69.8876Z" fill="url(#paint16_radial_15174_1062)"/>
+<path d="M178.959 35.5782C178.076 35.5515 177.659 36.6429 178.242 37.3067C179.492 38.7303 181.222 40.9947 182.573 43.8843C183.475 45.8125 186.605 45.1392 188.013 43.5426C189.421 41.946 189.268 39.5103 187.672 38.1024C185.419 36.1156 181.48 35.6545 178.959 35.5782Z" fill="url(#paint17_radial_15174_1062)"/>
+</g>
+<ellipse opacity="0.5" cx="116.5" cy="170.25" rx="28.5" ry="4" fill="#1E1E1E"/>
+<path d="M65.0505 134.344C98.833 124.882 112.95 149.443 116.463 166.016C116.852 167.853 116.058 169.778 114.331 170.517C99.4112 176.903 76.3152 156.737 62.9567 141.758C60.6951 139.222 61.7784 135.261 65.0505 134.344Z" fill="#536A23"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M97.3412 169.225C99.8874 156.891 84.3691 139.764 76 132.521L76.3901 132.335C102.072 130.668 113.372 151.434 116.463 166.016C116.852 167.853 116.058 169.778 114.331 170.517C109.356 172.647 103.471 171.824 97.3412 169.225Z" fill="#425616"/>
+<path d="M94.0003 66.0215C93.1669 88.3548 96.8003 140.121 118 168.521" stroke="#7F9C40" stroke-width="7" stroke-linecap="round"/>
+<path d="M117.999 168.521C115.274 164.87 112.839 160.833 110.666 156.521" stroke="#536A23" stroke-width="7" stroke-linecap="round"/>
+<path d="M118 168.521C116.016 165.864 114.187 163.002 112.5 159.979" stroke="#2D3E0A" stroke-width="7" stroke-linecap="round"/>
+<path d="M94.0003 66.0215C93.5654 77.6748 94.3467 97.3418 98.2052 117.521" stroke="#536A23" stroke-width="7" stroke-linecap="round"/>
+<path d="M94.0003 66.0215C93.6599 75.1436 94.0647 89.1763 96.1074 104.521" stroke="#425616" stroke-width="7" stroke-linecap="round"/>
+<path d="M133.64 104.338C113.23 110.856 112.43 146.017 115.101 167.078C115.422 169.614 117.71 171.44 120.24 171.076C154.733 166.105 147.89 128.526 138.743 106.882C137.889 104.861 135.731 103.671 133.64 104.338Z" fill="#7F9C40"/>
+<path d="M133.64 104.338C113.23 110.856 112.43 146.017 115.101 167.078C115.422 169.614 117.71 171.44 120.24 171.076C154.733 166.105 147.89 128.526 138.743 106.882C137.889 104.861 135.731 103.671 133.64 104.338Z" fill="url(#paint18_linear_15174_1062)" fill-opacity="0.75"/>
+<g opacity="0.2" filter="url(#filter1_f_15174_1062)">
+<circle cx="98" cy="61.25" r="46" fill="#FCB500"/>
+</g>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M67.4478 30.6979C62.068 36.0777 62.9959 45.728 69.5203 52.2524C76.0448 58.7769 85.6951 59.7048 91.0749 54.325C96.4547 48.9452 95.5268 39.2949 89.0023 32.7704C82.4779 26.246 72.8276 25.3181 67.4478 30.6979ZM103.925 54.3252C109.305 59.705 118.955 58.7771 125.479 52.2526C132.004 45.7282 132.932 36.0779 127.552 30.6981C122.172 25.3182 112.522 26.2462 105.997 32.7706C99.473 39.2951 98.5451 48.9454 103.925 54.3252ZM89.0024 88.7297C82.478 95.2541 72.8276 96.182 67.4478 90.8022C62.068 85.4224 62.9959 75.7721 69.5204 69.2477C76.0448 62.7232 85.6951 61.7953 91.075 67.1751C96.4548 72.5549 95.5268 82.2052 89.0024 88.7297ZM103.925 67.1749C98.545 72.5547 99.4729 82.2051 105.997 88.7295C112.522 95.2539 122.172 96.1819 127.552 90.8021C132.932 85.4222 132.004 75.7719 125.479 69.2475C118.955 62.723 109.305 61.7951 103.925 67.1749Z" fill="#F6E2D7"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M67.4478 30.6979C62.068 36.0777 62.9959 45.728 69.5203 52.2524C76.0448 58.7769 85.6951 59.7048 91.0749 54.325C96.4547 48.9452 95.5268 39.2949 89.0023 32.7704C82.4779 26.246 72.8276 25.3181 67.4478 30.6979ZM103.925 54.3252C109.305 59.705 118.955 58.7771 125.479 52.2526C132.004 45.7282 132.932 36.0779 127.552 30.6981C122.172 25.3182 112.522 26.2462 105.997 32.7706C99.473 39.2951 98.5451 48.9454 103.925 54.3252ZM89.0024 88.7297C82.478 95.2541 72.8276 96.182 67.4478 90.8022C62.068 85.4224 62.9959 75.7721 69.5204 69.2477C76.0448 62.7232 85.6951 61.7953 91.075 67.1751C96.4548 72.5549 95.5268 82.2052 89.0024 88.7297ZM103.925 67.1749C98.545 72.5547 99.4729 82.2051 105.997 88.7295C112.522 95.2539 122.172 96.1819 127.552 90.8021C132.932 85.4222 132.004 75.7719 125.479 69.2475C118.955 62.723 109.305 61.7951 103.925 67.1749Z" fill="url(#paint19_radial_15174_1062)"/>
+<circle cx="100.138" cy="61.6293" r="26.9655" fill="#DBBDAC"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M97.5002 51.6638C105.108 51.6638 111.276 44.1839 111.276 34.9569C111.276 25.7299 105.108 18.25 97.5002 18.25C89.892 18.25 83.7243 25.7299 83.7243 34.9569C83.7243 44.1839 89.892 51.6638 97.5002 51.6638ZM97.5002 103.25C105.108 103.25 111.276 95.7703 111.276 86.5433C111.276 77.3164 105.108 69.8364 97.5002 69.8364C89.892 69.8364 83.7243 77.3164 83.7243 86.5433C83.7243 95.7703 89.892 103.25 97.5002 103.25ZM123.293 74.5258C114.066 74.5258 106.586 68.3582 106.586 60.75C106.586 53.1418 114.066 46.9741 123.293 46.9741C132.52 46.9741 140 53.1418 140 60.75C140 68.3582 132.52 74.5258 123.293 74.5258ZM55 60.75C55 68.3582 62.4799 74.5258 71.7069 74.5258C80.9339 74.5258 88.4138 68.3582 88.4138 60.75C88.4138 53.1418 80.9339 46.9741 71.7069 46.9741C62.4799 46.9741 55 53.1418 55 60.75Z" fill="#FFF9F5"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M109.425 43.3292C107.04 48.3125 102.593 51.6638 97.5007 51.6638C93.3178 51.6638 89.5703 49.4028 87.0438 45.8336C90.5967 42.885 95.1605 41.1123 100.138 41.1123C103.481 41.1123 106.636 41.9115 109.425 43.3292ZM115.837 48.4189C110.353 50.678 106.587 55.3513 106.587 60.75C106.587 66.4878 110.841 71.4063 116.891 73.4778C119.262 70.1313 120.656 66.0432 120.656 61.6295C120.656 56.5973 118.844 51.9882 115.837 48.4189ZM110.036 79.6057C107.864 73.8416 103.068 69.8364 97.5007 69.8364C92.894 69.8364 88.8154 72.5787 86.3143 76.7907C89.9612 80.1178 94.8128 82.1468 100.138 82.1468C103.728 82.1468 107.101 81.2252 110.036 79.6057ZM82.1494 71.5043C85.9687 68.9797 88.4143 65.1003 88.4143 60.75C88.4143 56.6877 86.2818 53.0361 82.8896 50.5147C80.8215 53.7176 79.6211 57.5334 79.6211 61.6295C79.6211 65.2092 80.5378 68.5748 82.1494 71.5043Z" fill="#F7E2D7"/>
+<circle cx="98.0858" cy="61.3362" r="16.7069" fill="#FCB500"/>
+<circle cx="96.9128" cy="60.1637" r="14.3621" fill="#FFD569"/>
+<ellipse cx="91.5" cy="56.25" rx="1.5" ry="3" fill="black"/>
+<ellipse cx="104.5" cy="56.25" rx="1.5" ry="3" fill="black"/>
+<circle cx="92.5" cy="54.75" r="0.5" fill="white"/>
+<circle cx="105.5" cy="54.75" r="0.5" fill="white"/>
+<path d="M101.851 62.25H94.1494C93.6683 62.25 93.3884 62.7938 93.6681 63.1853C95.7912 66.1577 100.209 66.1577 102.332 63.1853C102.612 62.7938 102.332 62.25 101.851 62.25Z" fill="black"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M138.085 105.777L138 105.75C148 150.95 126.5 160.25 114.5 159.25L114.343 159.336C114.533 162.06 114.794 164.662 115.101 167.078C115.422 169.614 117.71 171.44 120.24 171.076C154.733 166.105 147.89 128.526 138.743 106.882C138.572 106.478 138.349 106.107 138.085 105.777Z" fill="#536A23"/>
+<path d="M165 173.75C161.4 172.95 156.167 175.417 154 176.75L155.5 177.75C155.5 175.75 165 176.25 165 175.75V173.75Z" fill="#FF823C"/>
+<path d="M155.5 158.25C153.5 158.25 153.666 160.25 154 161.25H156C157.2 160.85 156.833 159.75 156.5 159.25L155.5 158.25Z" fill="#D5BB38"/>
+<path d="M200.5 186.25C200.1 183.85 196.333 183.583 194.5 183.75L193.5 185.75C195.264 184.95 197.235 186.083 198 186.75L200.5 186.25Z" fill="#7F9C40"/>
+<path d="M54 164.25L48.5 165.25L48 166.75L54 165.75V164.25Z" fill="#FF823B"/>
+<path d="M103 173.75C104.2 173.35 106.5 175.917 107.5 177.25L109.5 176.25C109.5 174.65 106.5 172.917 105 172.25L103 173.75Z" fill="#C65959"/>
+</g>
+<defs>
+<filter id="filter0_f_15174_1062" x="24.4814" y="25.0442" width="175.903" height="116.956" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="1.5" result="effect1_foregroundBlur_15174_1062"/>
+</filter>
+<filter id="filter1_f_15174_1062" x="32" y="-4.75" width="132" height="132" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="10" result="effect1_foregroundBlur_15174_1062"/>
+</filter>
+<radialGradient id="paint0_radial_15174_1062" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(111.391 150.051) rotate(98.3763) scale(65.821 233.861)">
+<stop offset="0.09375" stop-color="#0089B4"/>
+<stop offset="1" stop-color="#67DAFE"/>
+</radialGradient>
+<radialGradient id="paint1_radial_15174_1062" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(79.4567 201.366) rotate(169.639) scale(51.5077 11.4687)">
+<stop stop-color="#0089B4"/>
+<stop offset="1" stop-color="#68DBFF"/>
+</radialGradient>
+<radialGradient id="paint2_radial_15174_1062" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(169.726 213.346) rotate(34.6004) scale(19.3564 16.9859)">
+<stop stop-color="#0089B4"/>
+<stop offset="1" stop-color="#68DBFF"/>
+</radialGradient>
+<radialGradient id="paint3_radial_15174_1062" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(163 203.75) rotate(-144.7) scale(83.9315 55.7627)">
+<stop offset="0.139159" stop-color="#55392C"/>
+<stop offset="1" stop-color="#6E4F41"/>
+</radialGradient>
+<radialGradient id="paint4_radial_15174_1062" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(198.275 93.2002) rotate(163.027) scale(9.06056 14.6278)">
+<stop offset="0.09375" stop-color="#0089B4"/>
+<stop offset="1" stop-color="#67DAFE"/>
+</radialGradient>
+<radialGradient id="paint5_radial_15174_1062" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(164.836 131.2) rotate(16.9727) scale(9.06056 14.6278)">
+<stop offset="0.09375" stop-color="#0089B4"/>
+<stop offset="1" stop-color="#67DAFE"/>
+</radialGradient>
+<radialGradient id="paint6_radial_15174_1062" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(106.528 88.3231) rotate(178.223) scale(9.06057 14.6278)">
+<stop offset="0.09375" stop-color="#0089B4"/>
+<stop offset="1" stop-color="#67DAFE"/>
+</radialGradient>
+<radialGradient id="paint7_radial_15174_1062" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(28.201 123.405) rotate(31.3247) scale(9.06057 14.6278)">
+<stop offset="0.09375" stop-color="#0089B4"/>
+<stop offset="1" stop-color="#67DAFE"/>
+</radialGradient>
+<radialGradient id="paint8_radial_15174_1062" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(133.635 28.3672) rotate(138.182) scale(9.06057 14.6278)">
+<stop offset="0.09375" stop-color="#0089B4"/>
+<stop offset="1" stop-color="#67DAFE"/>
+</radialGradient>
+<radialGradient id="paint9_radial_15174_1062" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(56.0901 74.6242) rotate(-156.932) scale(9.06057 14.6278)">
+<stop offset="0.09375" stop-color="#0089B4"/>
+<stop offset="1" stop-color="#67DAFE"/>
+</radialGradient>
+<radialGradient id="paint10_radial_15174_1062" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(29.8501 35.0781) rotate(52.3566) scale(9.06057 14.6278)">
+<stop offset="0.09375" stop-color="#0089B4"/>
+<stop offset="1" stop-color="#67DAFE"/>
+</radialGradient>
+<radialGradient id="paint11_radial_15174_1062" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(20.8248 99.5988) rotate(16.9727) scale(9.69682 15.655)">
+<stop offset="0.09375" stop-color="#0089B4"/>
+<stop offset="1" stop-color="#67DAFE"/>
+</radialGradient>
+<radialGradient id="paint12_radial_15174_1062" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(56.9965 143.599) rotate(163.027) scale(9.69682 15.655)">
+<stop offset="0.09375" stop-color="#0089B4"/>
+<stop offset="1" stop-color="#67DAFE"/>
+</radialGradient>
+<radialGradient id="paint13_radial_15174_1062" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(108.38 106.261) rotate(1.77743) scale(9.69683 15.655)">
+<stop offset="0.09375" stop-color="#0089B4"/>
+<stop offset="1" stop-color="#67DAFE"/>
+</radialGradient>
+<radialGradient id="paint14_radial_15174_1062" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(171.38 151.532) rotate(1.77743) scale(9.69683 15.655)">
+<stop offset="0.09375" stop-color="#0089B4"/>
+<stop offset="1" stop-color="#67DAFE"/>
+</radialGradient>
+<radialGradient id="paint15_radial_15174_1062" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(57.9345 17.3659) rotate(41.8176) scale(9.69683 15.655)">
+<stop offset="0.09375" stop-color="#0089B4"/>
+<stop offset="1" stop-color="#67DAFE"/>
+</radialGradient>
+<radialGradient id="paint16_radial_15174_1062" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(158.36 76.8709) rotate(-23.0679) scale(9.69683 15.655)">
+<stop offset="0.09375" stop-color="#0089B4"/>
+<stop offset="1" stop-color="#67DAFE"/>
+</radialGradient>
+<radialGradient id="paint17_radial_15174_1062" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(186.442 34.5477) rotate(127.643) scale(9.69683 15.655)">
+<stop offset="0.09375" stop-color="#0089B4"/>
+<stop offset="1" stop-color="#67DAFE"/>
+</radialGradient>
+<linearGradient id="paint18_linear_15174_1062" x1="130.081" y1="103.521" x2="137.5" y2="159.75" gradientUnits="userSpaceOnUse">
+<stop offset="0.430688" stop-color="#7F9C40"/>
+<stop offset="1" stop-color="#536A23"/>
+</linearGradient>
+<radialGradient id="paint19_radial_15174_1062" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(99.5 61.2501) rotate(47.447) scale(41.4035 43.4074)">
+<stop offset="0.439825" stop-color="#DBBDAC"/>
+<stop offset="1" stop-color="#F6E2D7"/>
+</radialGradient>
+<clipPath id="clip0_15174_1062">
+<rect width="220" height="220" fill="white" transform="translate(0 0.25)"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/src/assets/icons/visu/ecogesture/ECOGESTURE0083.svg b/src/assets/icons/visu/ecogesture/ECOGESTURE0083.svg
new file mode 100644
index 0000000000000000000000000000000000000000..8d9346f59ef837445712f4644a3e0baa7fee933c
--- /dev/null
+++ b/src/assets/icons/visu/ecogesture/ECOGESTURE0083.svg
@@ -0,0 +1,280 @@
+<svg width="220" height="221" viewBox="0 0 220 221" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M197 178.161C197 184.739 181.39 189.25 162.133 189.25C142.877 189.25 128 184.739 128 178.161C128 171.583 142.877 166.25 162.133 166.25C181.39 166.25 197 171.583 197 178.161Z" fill="#1E1E1E"/>
+<path opacity="0.3" d="M143.079 178.422C142.612 177.103 146.829 176.203 147.803 175.997C153.614 174.181 159.71 173.452 165.785 173.847L166.545 173.896C182.129 173.896 193.155 175.997 194.519 177.439C195.883 178.881 192.898 179.353 194.519 180.139C195.852 180.785 201.19 180.98 200.995 183.452C200.8 185.924 185.207 184.443 183.258 185.473C181.31 186.502 186.181 187.12 185.207 188.562C184.527 189.568 169.427 189.386 166.7 188.562C163.972 187.738 167.578 186.67 168.063 185.473C168.648 184.031 163.972 184.443 158.712 184.443C153.453 184.443 142.738 184.031 141.374 183.001C140.011 181.971 142.738 181.147 143.712 180.735C144.686 180.323 143.664 180.07 143.079 178.422Z" fill="url(#paint0_radial_15162_4928)"/>
+<ellipse cx="11.3135" cy="24.4038" rx="11.3135" ry="24.4038" transform="matrix(0.620902 -0.783888 0.994172 0.107801 132 180.988)" fill="#BE996E"/>
+<ellipse cx="10.5538" cy="23.5918" rx="10.5538" ry="23.5918" transform="matrix(0.620902 -0.783888 0.994172 0.107801 132.943 179.796)" fill="#FFEEDB"/>
+<ellipse cx="9.52181" cy="23.5249" rx="9.52181" ry="23.5249" transform="matrix(0.620902 -0.783888 0.994172 0.107801 134.225 178.178)" fill="#947D63"/>
+<ellipse cx="7.12178" cy="15.9199" rx="7.12178" ry="15.9199" transform="matrix(0.620902 -0.783888 0.994172 0.107801 142.908 178.066)" fill="#BE996E"/>
+<ellipse cx="6.70285" cy="14.6631" rx="6.70285" ry="14.6631" transform="matrix(0.620902 -0.783888 0.994172 0.107801 144.703 178.082)" fill="#FFEEDB"/>
+<ellipse cx="11.3135" cy="24.4038" rx="11.3135" ry="24.4038" transform="matrix(0.620902 -0.783888 0.994172 0.107801 133 176.988)" fill="#BE996E"/>
+<ellipse cx="10.5538" cy="23.5918" rx="10.5538" ry="23.5918" transform="matrix(0.620902 -0.783888 0.994172 0.107801 133.943 175.796)" fill="#FFEEDB"/>
+<ellipse cx="9.52181" cy="23.5249" rx="9.52181" ry="23.5249" transform="matrix(0.620902 -0.783888 0.994172 0.107801 135.225 174.178)" fill="#947D63"/>
+<ellipse cx="7.12178" cy="15.9199" rx="7.12178" ry="15.9199" transform="matrix(0.620902 -0.783888 0.994172 0.107801 143.908 174.066)" fill="#BE996E"/>
+<ellipse cx="6.70285" cy="14.6631" rx="6.70285" ry="14.6631" transform="matrix(0.620902 -0.783888 0.994172 0.107801 145.703 174.082)" fill="#FFEEDB"/>
+<ellipse cx="11.3135" cy="24.4038" rx="11.3135" ry="24.4038" transform="matrix(0.620902 -0.783888 0.994172 0.107801 131 172.988)" fill="#BE996E"/>
+<ellipse cx="10.5538" cy="23.5918" rx="10.5538" ry="23.5918" transform="matrix(0.620902 -0.783888 0.994172 0.107801 131.943 171.796)" fill="#FFEEDB"/>
+<ellipse cx="10.1092" cy="23.8917" rx="10.1092" ry="23.8917" transform="matrix(0.620902 -0.783888 0.994172 0.107801 132.495 171.099)" fill="#947D63"/>
+<ellipse cx="7.12178" cy="15.9199" rx="7.12178" ry="15.9199" transform="matrix(0.620902 -0.783888 0.994172 0.107801 141.908 170.066)" fill="#BE996E"/>
+<ellipse cx="6.70285" cy="14.6631" rx="6.70285" ry="14.6631" transform="matrix(0.620902 -0.783888 0.994172 0.107801 143.703 170.082)" fill="#FFEEDB"/>
+<ellipse cx="11.3135" cy="24.4038" rx="11.3135" ry="24.4038" transform="matrix(0.620902 -0.783888 0.994172 0.107801 132 169.988)" fill="#BE996E"/>
+<ellipse cx="10.5538" cy="23.5918" rx="10.5538" ry="23.5918" transform="matrix(0.620902 -0.783888 0.994172 0.107801 132.943 168.796)" fill="#FFEEDB"/>
+<ellipse cx="10.1095" cy="22.5986" rx="10.1095" ry="22.5986" transform="matrix(0.620902 -0.783888 0.994172 0.107801 133.495 168.099)" fill="#947D63"/>
+<ellipse cx="7.12178" cy="15.9199" rx="7.12178" ry="15.9199" transform="matrix(0.620902 -0.783888 0.994172 0.107801 142.908 167.066)" fill="#BE996E"/>
+<ellipse cx="6.70285" cy="14.6631" rx="6.70285" ry="14.6631" transform="matrix(0.620902 -0.783888 0.994172 0.107801 144.703 167.082)" fill="#FFEEDB"/>
+<ellipse cx="11.3135" cy="24.4038" rx="11.3135" ry="24.4038" transform="matrix(0.620902 -0.783888 0.994172 0.107801 128 166.988)" fill="#BE996E"/>
+<ellipse cx="10.5538" cy="23.5918" rx="10.5538" ry="23.5918" transform="matrix(0.620902 -0.783888 0.994172 0.107801 128.943 165.796)" fill="#FFEEDB"/>
+<ellipse cx="7.12178" cy="15.9199" rx="7.12178" ry="15.9199" transform="matrix(0.620902 -0.783888 0.994172 0.107801 138.908 164.066)" fill="#BE996E"/>
+<ellipse cx="6.255" cy="14.6631" rx="6.255" ry="14.6631" transform="matrix(0.620902 -0.783888 0.994172 0.107801 140.901 163.832)" fill="#FFEEDB"/>
+<path opacity="0.5" d="M180 157.875C180 159.877 175.249 161.25 169.388 161.25C163.528 161.25 159 159.877 159 157.875C159 155.873 163.528 154.25 169.388 154.25C175.249 154.25 180 155.873 180 157.875Z" fill="#947D63"/>
+<path d="M168.342 158.586C172.744 156.187 175.829 153.356 175.233 152.262L171.824 146.006L155.883 154.694L159.292 160.95C159.888 162.043 163.94 160.985 168.342 158.586Z" fill="#F4F4F4"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M160.663 161.376L156.761 154.215L159.395 152.779L163.699 160.677C162.489 161.095 161.441 161.337 160.663 161.376ZM168.274 158.623C167.01 159.308 165.777 159.883 164.647 160.327L160.273 152.301L163.785 150.387L168.274 158.623ZM169.932 147.037L170.81 146.558L172.006 148.754C172.138 148.996 172.049 149.3 171.806 149.432C171.564 149.564 171.26 149.475 171.128 149.232L169.932 147.037ZM168.176 147.994L169.054 147.516L171.686 152.345C171.818 152.587 171.728 152.891 171.486 153.023C171.243 153.155 170.94 153.066 170.808 152.823L168.176 147.994ZM164.663 149.908L165.541 149.43L168.652 155.137C168.784 155.38 168.695 155.683 168.452 155.815C168.21 155.948 167.906 155.858 167.774 155.616L164.663 149.908Z" fill="#D9D9D9"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M162.389 148.87C162.147 149.002 162.057 149.306 162.189 149.548L166.496 157.451C166.628 157.693 166.932 157.783 167.174 157.651C167.417 157.518 167.506 157.215 167.374 156.972L163.067 149.07C162.935 148.827 162.632 148.738 162.389 148.87ZM157.399 153.298C157.267 153.055 157.357 152.751 157.599 152.619C157.842 152.487 158.145 152.576 158.278 152.819L161.149 158.087C161.281 158.33 161.191 158.634 160.949 158.766C160.707 158.898 160.403 158.808 160.271 158.566L157.399 153.298ZM160.912 151.383C160.78 151.141 160.869 150.837 161.111 150.705C161.354 150.573 161.658 150.662 161.79 150.905L164.661 156.173C164.793 156.416 164.704 156.719 164.461 156.852C164.219 156.984 163.915 156.894 163.783 156.652L160.912 151.383Z" fill="#969696"/>
+<path d="M197.213 126.744L171.926 144.25L169.426 143.25L196.926 124.25L197.538 125.474C197.76 125.919 197.622 126.46 197.213 126.744Z" fill="#4D9B9F"/>
+<path d="M171.926 144.25L169.426 143.25L179.926 135.996L181.315 137.75L171.926 144.25Z" fill="#346668"/>
+<path d="M165.41 152.813C170.406 150.091 173.907 146.877 173.231 145.636L171.289 142.071L153.196 151.931L155.139 155.495C155.815 156.736 160.414 155.536 165.41 152.813Z" fill="#4D9B9F"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M164.058 153.516L161.109 147.617L153.76 151.622L155.794 155.917C157.198 156.248 160.431 155.323 164.058 153.516Z" fill="#346668"/>
+<ellipse cx="162.271" cy="147.053" rx="10.3021" ry="2.55938" transform="rotate(-28.5876 162.271 147.053)" fill="#ACE1E4"/>
+<path d="M195.226 124.721L169.926 141.75L170.926 142.75L196.972 124.904C197.262 124.705 197.121 124.25 196.769 124.25C196.219 124.25 195.682 124.414 195.226 124.721Z" fill="#ACE1E4"/>
+<path opacity="0.5" d="M176.96 164.664C177.194 165.323 175.085 165.773 174.598 165.876C171.693 166.784 168.645 167.149 165.608 166.951L165.228 166.927C157.435 166.927 151.922 165.876 151.24 165.155C150.559 164.434 152.051 164.199 151.24 163.806C150.574 163.482 147.905 163.385 148.003 162.149C148.1 160.913 155.897 161.654 156.871 161.139C157.845 160.624 155.41 160.315 155.897 159.594C156.236 159.091 163.787 159.182 165.15 159.594C166.514 160.006 164.711 160.54 164.468 161.139C164.176 161.86 166.514 161.654 169.144 161.654C171.774 161.654 177.131 161.86 177.813 162.375C178.495 162.89 177.131 163.302 176.644 163.507C176.157 163.713 176.668 163.84 176.96 164.664Z" fill="url(#paint1_radial_15162_4928)"/>
+<ellipse cx="167.095" cy="161.179" rx="11.6893" ry="1.48908" transform="rotate(3.35869 167.095 161.179)" fill="white"/>
+<path d="M167.152 160.498C167.517 160.559 167.862 160.312 167.923 159.947C167.984 159.582 167.738 159.237 167.373 159.176C167.008 159.115 166.662 159.361 166.601 159.726C166.54 160.091 166.787 160.437 167.152 160.498Z" fill="#D7D7D7"/>
+<path d="M169.501 160.891C169.866 160.952 170.212 160.706 170.273 160.341C170.334 159.976 170.087 159.63 169.722 159.569C169.357 159.508 169.012 159.754 168.951 160.119C168.89 160.484 169.136 160.83 169.501 160.891Z" fill="#D7D7D7"/>
+<path d="M166.004 160.576C166.425 160.647 166.824 160.363 166.894 159.941C166.965 159.52 166.681 159.122 166.26 159.051C165.838 158.981 165.44 159.265 165.369 159.686C165.299 160.107 165.583 160.506 166.004 160.576Z" fill="#D7D7D7"/>
+<path d="M176.943 161.533C177.226 161.58 177.495 161.389 177.543 161.105C177.59 160.821 177.399 160.552 177.115 160.505C176.831 160.457 176.562 160.649 176.515 160.933C176.467 161.217 176.659 161.485 176.943 161.533Z" fill="#D7D7D7"/>
+<path d="M168.277 160.535C168.602 160.59 168.909 160.371 168.963 160.046C169.018 159.722 168.799 159.415 168.474 159.36C168.15 159.306 167.843 159.525 167.788 159.85C167.734 160.174 167.953 160.481 168.277 160.535Z" fill="#D7D7D7"/>
+<path d="M164.592 160.166C164.967 160.229 165.321 159.976 165.384 159.602C165.446 159.227 165.194 158.873 164.819 158.81C164.445 158.748 164.091 159 164.028 159.375C163.965 159.749 164.218 160.103 164.592 160.166Z" fill="#D7D7D7"/>
+<path d="M171.974 161.003C172.298 161.058 172.6 160.871 172.647 160.588C172.695 160.304 172.47 160.03 172.146 159.975C171.822 159.921 171.52 160.107 171.473 160.391C171.425 160.675 171.65 160.949 171.974 161.003Z" fill="#D7D7D7"/>
+<path d="M173.1 161.041C173.465 161.102 173.81 160.855 173.871 160.49C173.932 160.125 173.686 159.78 173.321 159.719C172.956 159.658 172.611 159.904 172.55 160.269C172.488 160.634 172.735 160.98 173.1 161.041Z" fill="#D7D7D7"/>
+<path d="M174.201 161.225C174.526 161.279 174.833 161.06 174.887 160.736C174.941 160.411 174.722 160.104 174.398 160.05C174.074 159.996 173.767 160.215 173.712 160.539C173.658 160.864 173.877 161.171 174.201 161.225Z" fill="#D7D7D7"/>
+<path d="M175.253 161.703C175.618 161.764 175.958 161.55 176.013 161.226C176.067 160.902 175.815 160.589 175.45 160.528C175.085 160.467 174.745 160.68 174.691 161.005C174.636 161.329 174.888 161.642 175.253 161.703Z" fill="#D7D7D7"/>
+<path d="M162.733 160.827C163.138 160.895 163.522 160.622 163.59 160.216C163.658 159.81 163.384 159.427 162.978 159.359C162.573 159.291 162.189 159.565 162.121 159.97C162.053 160.376 162.327 160.76 162.733 160.827Z" fill="#D7D7D7"/>
+<path d="M156.979 160.921C157.384 160.989 157.768 160.716 157.836 160.31C157.904 159.904 157.63 159.521 157.225 159.453C156.819 159.385 156.435 159.659 156.367 160.064C156.299 160.47 156.573 160.853 156.979 160.921Z" fill="#D7D7D7"/>
+<path d="M158.277 160.384C158.602 160.438 158.909 160.219 158.963 159.895C159.018 159.57 158.799 159.263 158.474 159.209C158.15 159.154 157.843 159.373 157.788 159.698C157.734 160.022 157.953 160.329 158.277 160.384Z" fill="#D7D7D7"/>
+<path d="M159.574 160.752C159.98 160.82 160.364 160.546 160.432 160.141C160.5 159.735 160.226 159.351 159.82 159.283C159.415 159.215 159.031 159.489 158.963 159.895C158.895 160.3 159.169 160.684 159.574 160.752Z" fill="#D7D7D7"/>
+<path d="M167.116 160.278C167.481 160.339 167.827 160.093 167.888 159.728C167.949 159.363 167.703 159.017 167.338 158.956C166.973 158.895 166.627 159.141 166.566 159.506C166.505 159.871 166.751 160.217 167.116 160.278Z" fill="white"/>
+<path d="M164.945 163.102C165.251 163.141 165.714 162.999 165.752 162.767C165.806 162.446 165.54 162.154 165.131 162.085C164.722 162.017 164.337 162.131 164.269 162.54C164.213 162.87 164.611 163.06 164.945 163.102Z" fill="#D7D7D7"/>
+<path d="M161.702 162.47C162.008 162.509 162.47 162.367 162.509 162.135C162.563 161.814 162.296 161.521 161.888 161.453C161.479 161.384 161.094 161.499 161.025 161.907C160.97 162.237 161.368 162.427 161.702 162.47Z" fill="#D7D7D7"/>
+<path d="M167.817 165.229C168.073 165.261 168.459 165.142 168.492 164.949C168.537 164.681 168.314 164.436 167.973 164.379C167.631 164.322 167.31 164.418 167.253 164.759C167.206 165.034 167.539 165.193 167.817 165.229Z" fill="#D7D7D7"/>
+<path d="M160.856 162.507C161.031 162.529 161.294 162.451 161.316 162.322C161.346 162.143 161.193 161.979 160.96 161.94C160.727 161.901 160.507 161.964 160.469 162.192C160.438 162.376 160.666 162.483 160.856 162.507Z" fill="#D7D7D7"/>
+<path d="M160.125 162.377C160.3 162.399 160.564 162.321 160.585 162.192C160.615 162.013 160.463 161.849 160.229 161.81C159.996 161.771 159.777 161.834 159.739 162.062C159.708 162.246 159.935 162.352 160.125 162.377Z" fill="#D7D7D7"/>
+<path d="M154.427 162.079C154.602 162.102 154.865 162.023 154.887 161.894C154.917 161.715 154.764 161.551 154.531 161.512C154.298 161.473 154.078 161.536 154.04 161.764C154.01 161.948 154.237 162.055 154.427 162.079Z" fill="#D7D7D7"/>
+<path d="M166.557 163.044C167.035 163.042 167.716 162.724 167.729 162.353C167.748 161.839 167.28 161.436 166.639 161.413C165.999 161.391 165.431 161.649 165.407 162.304C165.389 162.831 166.037 163.047 166.557 163.044Z" fill="#D7D7D7"/>
+<path d="M168.883 164.993C169.29 164.991 169.871 164.726 169.882 164.416C169.897 163.986 169.498 163.65 168.952 163.63C168.406 163.611 167.921 163.827 167.902 164.373C167.887 164.814 168.44 164.994 168.883 164.993Z" fill="#D7D7D7"/>
+<path d="M163.258 159.903C163.679 159.973 164.078 159.689 164.148 159.268C164.219 158.847 163.935 158.448 163.514 158.378C163.092 158.307 162.694 158.591 162.623 159.013C162.553 159.434 162.837 159.832 163.258 159.903Z" fill="white"/>
+<path d="M169.466 160.672C169.831 160.733 170.176 160.486 170.238 160.121C170.299 159.756 170.052 159.411 169.687 159.35C169.322 159.289 168.977 159.535 168.916 159.9C168.855 160.265 169.101 160.61 169.466 160.672Z" fill="white"/>
+<path d="M165.97 160.357C166.391 160.427 166.79 160.143 166.86 159.722C166.931 159.301 166.647 158.902 166.225 158.832C165.804 158.761 165.406 159.045 165.335 159.466C165.265 159.888 165.549 160.286 165.97 160.357Z" fill="white"/>
+<path d="M176.908 161.313C177.192 161.361 177.461 161.169 177.508 160.885C177.556 160.601 177.364 160.333 177.08 160.285C176.797 160.238 176.528 160.429 176.48 160.713C176.433 160.997 176.624 161.266 176.908 161.313Z" fill="white"/>
+<path d="M175.88 161.141C176.245 161.202 176.585 160.989 176.639 160.664C176.694 160.34 176.442 160.027 176.077 159.966C175.712 159.905 175.372 160.118 175.318 160.443C175.263 160.767 175.515 161.08 175.88 161.141Z" fill="white"/>
+<path d="M168.242 160.316C168.567 160.37 168.874 160.151 168.928 159.826C168.982 159.502 168.763 159.195 168.439 159.141C168.115 159.086 167.808 159.305 167.753 159.63C167.699 159.954 167.918 160.261 168.242 160.316Z" fill="white"/>
+<path d="M164.557 159.946C164.932 160.009 165.286 159.756 165.349 159.382C165.411 159.008 165.159 158.653 164.784 158.591C164.41 158.528 164.056 158.781 163.993 159.155C163.93 159.529 164.183 159.884 164.557 159.946Z" fill="white"/>
+<path d="M164.989 162.96C165.295 162.999 165.557 162.936 165.748 162.762C165.816 162.353 165.54 161.966 165.132 161.898C164.723 161.83 164.336 162.105 164.268 162.514C164.268 162.733 164.655 162.918 164.989 162.96Z" fill="white"/>
+<path d="M161.745 162.328C162.051 162.367 162.313 162.304 162.504 162.13C162.572 161.721 162.296 161.334 161.887 161.266C161.479 161.197 161.092 161.473 161.024 161.882C161.024 162.101 161.411 162.285 161.745 162.328Z" fill="white"/>
+<path d="M167.853 165.111C168.109 165.143 168.328 165.091 168.487 164.945C168.544 164.604 168.314 164.281 167.973 164.224C167.631 164.166 167.308 164.397 167.251 164.738C167.251 164.921 167.575 165.075 167.853 165.111Z" fill="white"/>
+<path d="M160.885 162.41C161.055 162.431 161.2 162.396 161.306 162.3C161.344 162.073 161.191 161.859 160.965 161.821C160.738 161.783 160.524 161.936 160.486 162.163C160.486 162.284 160.701 162.386 160.885 162.41Z" fill="white"/>
+<path d="M160.155 162.279C160.325 162.301 160.47 162.266 160.575 162.17C160.613 161.943 160.46 161.729 160.234 161.691C160.008 161.653 159.794 161.806 159.756 162.032C159.756 162.153 159.97 162.256 160.155 162.279Z" fill="white"/>
+<path d="M154.458 161.982C154.627 162.003 154.773 161.968 154.878 161.872C154.916 161.645 154.763 161.431 154.537 161.393C154.31 161.355 154.096 161.508 154.058 161.735C154.058 161.856 154.273 161.958 154.458 161.982Z" fill="white"/>
+<path d="M166.621 162.83C167.108 162.828 167.506 162.675 167.768 162.363C167.791 161.709 167.28 161.16 166.626 161.137C165.972 161.114 165.423 161.626 165.4 162.28C165.445 162.622 166.09 162.832 166.621 162.83Z" fill="white"/>
+<path d="M168.916 164.799C169.323 164.798 169.655 164.67 169.874 164.41C169.893 163.863 169.466 163.405 168.92 163.386C168.374 163.366 167.915 163.794 167.896 164.34C167.933 164.626 168.472 164.801 168.916 164.799Z" fill="white"/>
+<path d="M171.939 160.784C172.263 160.838 172.565 160.652 172.612 160.368C172.66 160.084 172.435 159.81 172.111 159.756C171.786 159.701 171.485 159.887 171.437 160.171C171.39 160.455 171.614 160.729 171.939 160.784Z" fill="white"/>
+<path d="M173.065 160.821C173.43 160.882 173.775 160.636 173.836 160.271C173.897 159.906 173.651 159.56 173.286 159.499C172.921 159.438 172.575 159.685 172.514 160.05C172.453 160.415 172.7 160.76 173.065 160.821Z" fill="white"/>
+<path d="M174.166 161.005C174.491 161.059 174.798 160.84 174.852 160.516C174.906 160.192 174.687 159.885 174.363 159.83C174.038 159.776 173.731 159.995 173.677 160.319C173.623 160.644 173.842 160.951 174.166 161.005Z" fill="white"/>
+<path d="M175.218 161.483C175.583 161.544 175.923 161.331 175.977 161.006C176.032 160.682 175.78 160.369 175.415 160.308C175.05 160.247 174.71 160.461 174.656 160.785C174.601 161.109 174.853 161.422 175.218 161.483Z" fill="white"/>
+<path d="M158.621 160.97C158.865 161.011 159.095 160.846 159.136 160.603C159.176 160.36 159.012 160.129 158.769 160.089C158.525 160.048 158.295 160.212 158.254 160.455C158.214 160.699 158.378 160.929 158.621 160.97Z" fill="white"/>
+<path d="M171.449 162.362C171.814 162.423 172.154 162.209 172.208 161.885C172.262 161.56 172.01 161.248 171.645 161.187C171.28 161.126 170.94 161.339 170.886 161.664C170.832 161.988 171.084 162.301 171.449 162.362Z" fill="white"/>
+<path d="M175.34 162.56C175.543 162.594 175.735 162.457 175.769 162.255C175.803 162.052 175.666 161.86 175.463 161.826C175.26 161.792 175.068 161.929 175.034 162.132C175 162.334 175.137 162.526 175.34 162.56Z" fill="white"/>
+<path d="M156.015 160.395C156.299 160.443 156.562 160.284 156.603 160.04C156.643 159.797 156.446 159.561 156.162 159.514C155.879 159.466 155.615 159.625 155.575 159.868C155.534 160.112 155.731 160.348 156.015 160.395Z" fill="white"/>
+<path d="M162.697 160.608C163.103 160.676 163.487 160.402 163.555 159.997C163.623 159.591 163.349 159.207 162.943 159.139C162.538 159.072 162.154 159.345 162.086 159.751C162.018 160.156 162.292 160.54 162.697 160.608Z" fill="white"/>
+<path d="M161.571 160.57C161.936 160.631 162.282 160.385 162.343 160.02C162.404 159.655 162.158 159.309 161.793 159.248C161.428 159.187 161.082 159.434 161.021 159.799C160.96 160.164 161.206 160.509 161.571 160.57Z" fill="white"/>
+<path d="M163.922 160.511C164.165 160.551 164.39 160.42 164.424 160.217C164.458 160.015 164.288 159.817 164.045 159.776C163.802 159.736 163.577 159.867 163.543 160.07C163.509 160.273 163.679 160.47 163.922 160.511Z" fill="white"/>
+<path d="M168.204 161.983C168.772 162.078 169.309 161.694 169.405 161.127C169.5 160.559 169.116 160.022 168.549 159.927C167.981 159.832 167.443 160.215 167.348 160.783C167.253 161.35 167.637 161.888 168.204 161.983Z" fill="white"/>
+<path d="M156.945 160.702C157.35 160.77 157.734 160.496 157.802 160.091C157.87 159.685 157.596 159.301 157.19 159.233C156.785 159.165 156.401 159.439 156.333 159.845C156.265 160.25 156.539 160.634 156.945 160.702Z" fill="white"/>
+<path d="M158.242 160.164C158.567 160.218 158.874 159.999 158.928 159.675C158.982 159.35 158.763 159.043 158.439 158.989C158.115 158.935 157.808 159.154 157.753 159.478C157.699 159.803 157.918 160.11 158.242 160.164Z" fill="white"/>
+<path d="M159.539 160.532C159.945 160.6 160.329 160.326 160.397 159.92C160.464 159.515 160.191 159.131 159.785 159.063C159.38 158.995 158.996 159.269 158.928 159.675C158.86 160.08 159.134 160.464 159.539 160.532Z" fill="white"/>
+<path d="M160.886 160.607C161.373 160.688 161.833 160.36 161.915 159.873C161.996 159.386 161.668 158.926 161.181 158.844C160.694 158.763 160.234 159.091 160.152 159.578C160.071 160.065 160.399 160.525 160.886 160.607Z" fill="white"/>
+<path d="M178.188 160.724C177.739 160.676 177.336 161.001 177.288 161.45C177.24 161.899 177.565 162.302 178.014 162.35C178.462 162.398 178.865 162.073 178.913 161.624C178.961 161.175 178.636 160.773 178.188 160.724Z" fill="white"/>
+<path d="M157 196.339C157 205.777 133.698 212.25 104.953 212.25C76.2079 212.25 54 205.777 54 196.339C54 186.901 76.2079 179.25 104.953 179.25C133.698 179.25 157 186.901 157 196.339Z" fill="#1E1E1E"/>
+<path d="M102 178.161C102 184.739 86.3897 189.25 67.1334 189.25C47.8771 189.25 33 184.739 33 178.161C33 171.583 47.8771 166.25 67.1334 166.25C86.3897 166.25 102 171.583 102 178.161Z" fill="#1E1E1E"/>
+<path opacity="0.5" d="M66.073 179.03C71.2841 179.03 74.3823 179.965 76.1056 181.01C77.6734 181.962 79.7093 184.201 78.3303 185.41C75.9341 187.511 66.5445 188.825 61.4995 187.75C54.7647 186.316 54.3848 182.728 42.4998 182.25C30.6147 181.772 44.9806 178.836 42.9998 175.25C41.0189 171.664 54.9803 179.03 66.073 179.03Z" fill="url(#paint2_radial_15162_4928)"/>
+<ellipse cx="11.3135" cy="24.4038" rx="11.3135" ry="24.4038" transform="matrix(0.620902 -0.783888 0.994172 0.107801 37 180.988)" fill="#BE996E"/>
+<ellipse cx="10.5538" cy="23.5918" rx="10.5538" ry="23.5918" transform="matrix(0.620902 -0.783888 0.994172 0.107801 37.9434 179.796)" fill="#FFEEDB"/>
+<ellipse cx="9.52181" cy="23.5249" rx="9.52181" ry="23.5249" transform="matrix(0.620902 -0.783888 0.994172 0.107801 39.2246 178.178)" fill="#947D63"/>
+<ellipse cx="7.12178" cy="15.9199" rx="7.12178" ry="15.9199" transform="matrix(0.620902 -0.783888 0.994172 0.107801 47.9082 178.066)" fill="#BE996E"/>
+<ellipse cx="6.70285" cy="14.6631" rx="6.70285" ry="14.6631" transform="matrix(0.620902 -0.783888 0.994172 0.107801 49.7031 178.082)" fill="#FFEEDB"/>
+<ellipse cx="11.3135" cy="24.4038" rx="11.3135" ry="24.4038" transform="matrix(0.620902 -0.783888 0.994172 0.107801 38 176.988)" fill="#BE996E"/>
+<ellipse cx="10.5538" cy="23.5918" rx="10.5538" ry="23.5918" transform="matrix(0.620902 -0.783888 0.994172 0.107801 38.9434 175.796)" fill="#FFEEDB"/>
+<ellipse cx="9.52181" cy="23.5249" rx="9.52181" ry="23.5249" transform="matrix(0.620902 -0.783888 0.994172 0.107801 40.2246 174.178)" fill="#947D63"/>
+<ellipse cx="7.12178" cy="15.9199" rx="7.12178" ry="15.9199" transform="matrix(0.620902 -0.783888 0.994172 0.107801 48.9082 174.066)" fill="#BE996E"/>
+<ellipse cx="6.70285" cy="14.6631" rx="6.70285" ry="14.6631" transform="matrix(0.620902 -0.783888 0.994172 0.107801 50.7031 174.082)" fill="#FFEEDB"/>
+<ellipse cx="11.3135" cy="24.4038" rx="11.3135" ry="24.4038" transform="matrix(0.620902 -0.783888 0.994172 0.107801 36 172.988)" fill="#BE996E"/>
+<ellipse cx="10.5538" cy="23.5918" rx="10.5538" ry="23.5918" transform="matrix(0.620902 -0.783888 0.994172 0.107801 36.9434 171.796)" fill="#FFEEDB"/>
+<ellipse cx="10.1092" cy="23.8917" rx="10.1092" ry="23.8917" transform="matrix(0.620902 -0.783888 0.994172 0.107801 37.4951 171.099)" fill="#947D63"/>
+<ellipse cx="7.12178" cy="15.9199" rx="7.12178" ry="15.9199" transform="matrix(0.620902 -0.783888 0.994172 0.107801 46.9082 170.066)" fill="#BE996E"/>
+<ellipse cx="6.70285" cy="14.6631" rx="6.70285" ry="14.6631" transform="matrix(0.620902 -0.783888 0.994172 0.107801 48.7031 170.082)" fill="#FFEEDB"/>
+<ellipse cx="11.3135" cy="24.4038" rx="11.3135" ry="24.4038" transform="matrix(0.620902 -0.783888 0.994172 0.107801 37 169.988)" fill="#BE996E"/>
+<ellipse cx="10.5538" cy="23.5918" rx="10.5538" ry="23.5918" transform="matrix(0.620902 -0.783888 0.994172 0.107801 37.9434 168.796)" fill="#FFEEDB"/>
+<ellipse cx="10.1095" cy="22.5986" rx="10.1095" ry="22.5986" transform="matrix(0.620902 -0.783888 0.994172 0.107801 38.4951 168.099)" fill="#947D63"/>
+<ellipse cx="7.12178" cy="15.9199" rx="7.12178" ry="15.9199" transform="matrix(0.620902 -0.783888 0.994172 0.107801 47.9082 167.066)" fill="#BE996E"/>
+<ellipse cx="6.70285" cy="14.6631" rx="6.70285" ry="14.6631" transform="matrix(0.620902 -0.783888 0.994172 0.107801 49.7031 167.082)" fill="#FFEEDB"/>
+<ellipse cx="11.3135" cy="24.4038" rx="11.3135" ry="24.4038" transform="matrix(0.620902 -0.783888 0.994172 0.107801 33 166.988)" fill="#BE996E"/>
+<ellipse cx="10.5538" cy="23.5918" rx="10.5538" ry="23.5918" transform="matrix(0.620902 -0.783888 0.994172 0.107801 33.9434 165.796)" fill="#FFEEDB"/>
+<ellipse cx="7.12178" cy="15.9199" rx="7.12178" ry="15.9199" transform="matrix(0.620902 -0.783888 0.994172 0.107801 43.9082 164.066)" fill="#BE996E"/>
+<ellipse cx="6.255" cy="14.6631" rx="6.255" ry="14.6631" transform="matrix(0.620902 -0.783888 0.994172 0.107801 45.9014 163.832)" fill="#FFEEDB"/>
+<path d="M60 154.75L64.5 156.75V152.25C62.9 152.65 60.1667 154.25 60 154.75Z" fill="#373737"/>
+<path d="M60 158.25V154.75L64.5 156.25V160.75L60 158.25Z" fill="#212021"/>
+<path d="M104.575 208.25C126.901 208.25 145 203.187 145 195.804V148.25L64.5 147.94V195.25C64.5 202.633 82.2488 208.25 104.575 208.25Z" fill="#838383"/>
+<path d="M104.575 208.25C126.901 208.25 145 203.187 145 195.804V148.25L64.5 147.94V195.25C64.5 202.633 82.2488 208.25 104.575 208.25Z" fill="url(#paint3_linear_15162_4928)" fill-opacity="0.65"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M145 151.843C138.325 170.184 109.386 183.984 74.6976 183.984C71.2532 183.984 67.8656 183.848 64.5508 183.585V148.47H145V151.843Z" fill="#3C3C3C"/>
+<path d="M148 147.232C148 154.954 128.544 160.25 104.543 160.25C80.5425 160.25 62 154.954 62 147.232C62 139.51 80.5425 133.25 104.543 133.25C128.544 133.25 148 139.51 148 147.232Z" fill="#808080"/>
+<path d="M105 162.25C128.748 162.25 148 155.758 148 147.75C148 147.379 147.959 147.012 147.878 146.648C146.24 152.728 128.359 157.517 106.543 157.517C83.6467 157.517 65.0856 152.243 65.0856 145.736C65.0856 139.23 83.6467 133.955 106.543 133.955C115.894 133.955 124.523 134.835 131.459 136.319C124.162 134.396 114.978 133.25 105 133.25C81.2518 133.25 62 139.742 62 147.75C62 155.758 81.2518 162.25 105 162.25Z" fill="#565656"/>
+<path opacity="0.2" d="M148 147.232C148 154.954 128.77 160.25 105.048 160.25C81.3269 160.25 63 154.954 63 147.232C63 139.51 81.3269 133.25 105.048 133.25C128.77 133.25 148 139.51 148 147.232Z" fill="#91D0FE"/>
+<ellipse cx="105" cy="145.75" rx="38" ry="11.5" fill="#646464"/>
+<ellipse cx="105" cy="148.25" rx="36" ry="9" fill="#465366"/>
+<ellipse cx="105" cy="150.75" rx="33" ry="6.5" fill="#272627"/>
+<ellipse cx="105" cy="150.75" rx="33" ry="6.5" fill="url(#paint4_radial_15162_4928)"/>
+<path opacity="0.45" fill-rule="evenodd" clip-rule="evenodd" d="M129.225 152.229C124.815 153.437 115.524 154.269 104.776 154.269C94.027 154.269 84.7358 153.437 80.3262 152.229C83.7014 154.255 93.3721 155.718 104.776 155.718C116.179 155.718 125.85 154.255 129.225 152.229ZM129.225 149.06C124.815 147.853 115.524 147.021 104.776 147.021C94.027 147.021 84.7358 147.853 80.3262 149.06C83.7014 147.034 93.3721 145.571 104.776 145.571C116.179 145.571 125.85 147.034 129.225 149.06Z" fill="#DAF6FF"/>
+<ellipse opacity="0.45" cx="104.5" cy="150.75" rx="16.5" ry="1.5" stroke="#DAF6FF"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M157.591 67.7448L157.59 67.7449C157.348 68.5053 157.121 69.2128 157.047 69.8176C156.626 73.2478 152.066 77.4007 145.958 79.8973C145.145 81.4098 144.385 82.7469 143.766 83.7881L114.841 82.5365C112.179 80.1821 106.575 74.9686 105.463 72.9497C105.38 72.8 105.295 72.636 105.207 72.459C104.485 71.4778 103.841 70.4434 103.37 69.3531C103.134 68.0686 102.957 66.6718 102.858 65.2084C102.474 63.2191 102.309 61.203 102.581 59.5331C103.26 55.3509 104.5 49.7051 106.032 48.553C108.605 44.0787 112.928 40.7663 119.784 40.3578C136.246 39.3773 152.14 44.823 157.168 60.4868C157.613 61.8753 157.947 63.7475 158.117 65.9304C157.972 66.5511 157.776 67.1632 157.591 67.7444L157.591 67.7446L157.591 67.7448ZM97.4546 107.126C95.5975 108.017 93.76 109.129 92.1053 110.449C89.2334 112.739 86.9785 115.6 86.0451 118.965C84.217 125.555 87.2964 134.975 103.583 146.948C104.15 147.365 104.272 148.163 103.855 148.73C103.438 149.298 102.64 149.419 102.073 149.002C85.5722 136.872 81.3129 126.488 83.5888 118.284C84.7074 114.251 87.3652 110.968 90.5159 108.456C91.8103 107.423 93.1991 106.512 94.6201 105.723C95.4318 105.084 97.3032 104.169 99.6267 103.033C105.947 99.9419 115.615 95.2147 116.402 89.9656C116.803 87.2917 116.449 85.4422 115.641 84.0359C117.892 84.7299 120.349 85.2516 122.995 85.5763C137.564 87.3645 154.714 82.4318 158.09 73.1847C157.323 82.9992 153.566 94.7483 144.14 99.4363C136.668 103.153 118.17 104.969 106.45 106.119H106.45H106.45C102.394 106.517 99.1489 106.836 97.4546 107.126Z" fill="url(#paint5_radial_15162_4928)"/>
+<g filter="url(#filter0_f_15162_4928)">
+<path d="M157.591 67.7449C157.777 67.1636 157.973 66.5513 158.118 65.9304C157.948 63.7476 157.614 61.8754 157.168 60.4868C152.141 44.8231 136.246 39.3773 119.785 40.3579C112.929 40.7663 108.605 44.0788 106.033 48.553C104.5 49.7051 103.261 55.351 102.581 59.5331C102.31 61.203 102.475 63.2191 102.859 65.2084C102.957 66.6719 103.135 68.0687 103.371 69.3532C103.842 70.4434 104.485 71.4778 105.208 72.459C105.295 72.636 105.381 72.8 105.463 72.9497C106.576 74.9687 112.179 80.1822 114.842 82.5365L143.767 83.7881C144.386 82.7469 145.146 81.4098 145.959 79.8974C152.067 77.4007 156.626 73.2479 157.048 69.8176C157.122 69.2128 157.348 68.5053 157.591 67.7449Z" fill="url(#paint6_radial_15162_4928)"/>
+<path d="M94.3147 106.792C94.4263 106.492 94.5281 106.218 94.2067 106.179C94.4533 105.563 96.6754 104.476 99.6274 103.033C105.948 99.942 115.615 95.2148 116.403 89.9656C116.804 87.2918 116.449 85.4422 115.642 84.0359C117.893 84.73 120.35 85.2517 122.995 85.5764C137.565 87.3645 154.715 82.4319 158.091 73.1848C157.324 82.9992 153.566 94.7483 144.141 99.4363C136.668 103.153 118.171 104.969 106.451 106.119C101.557 106.599 97.8446 106.964 96.6108 107.302C93.843 108.061 94.0973 107.377 94.3147 106.792Z" fill="url(#paint7_radial_15162_4928)"/>
+<path d="M137.321 18.5081C135.494 22.5306 132.862 25.4714 130.583 29.017C127.852 33.2665 127.881 34.3065 127.869 34.3063C127.856 34.3061 127.794 33.0893 124.14 33.3996C117.849 33.934 111.416 36.1954 108.569 45.8312C105.4 39.1733 105.533 31.3212 109.634 24.9387C115.353 16.0399 127.308 14.3983 137.321 18.5081Z" fill="url(#paint8_radial_15162_4928)"/>
+<path d="M114.617 19.8624C115.488 24.4367 116.992 28.7276 119.455 31.6647C122.671 35.501 125.82 36.9706 129.18 38.5386C133.252 40.4389 137.633 42.4837 142.82 49.0612C142.942 48.9205 143.064 48.7777 143.183 48.6328C150.347 39.9596 149.12 27.1241 140.443 19.9637C132.824 13.6771 121.995 13.8554 114.617 19.8624Z" fill="url(#paint9_radial_15162_4928)"/>
+<path d="M101.135 104.304C88.1513 108.367 70.0417 123.872 102.829 147.975" stroke="#3BA7F6" stroke-width="3" stroke-linecap="round"/>
+</g>
+<path d="M141.748 49.2396C136.534 60.5582 123.662 63.7885 115.671 57.5992C107.68 51.4098 106.252 35.2855 112.811 26.826C119.37 18.3664 131.165 16.5261 139.156 22.7154C147.146 28.9047 148.307 40.78 141.748 49.2396Z" fill="#FFDDBD"/>
+<path d="M116.84 58.4171C124.866 63.4636 136.782 60.0209 141.747 49.2396C148.307 40.78 147.146 28.9048 139.156 22.7154C137.118 21.1374 134.834 20.0814 132.452 19.5239C133.076 19.8923 133.683 20.3033 134.27 20.7577C142.26 26.947 143.42 38.8223 136.861 47.2819C132.833 56.0287 124.23 59.9453 116.84 58.4171Z" fill="#EEAF74"/>
+<path d="M137.32 18.5081C135.493 22.5306 132.861 25.4714 130.582 29.017C127.851 33.2665 127.88 34.3065 127.868 34.3063C127.855 34.3061 127.793 33.0893 124.139 33.3996C117.849 33.934 111.415 36.1954 108.568 45.8312C105.399 39.1733 105.532 31.3212 109.633 24.9387C115.352 16.0399 127.307 14.3983 137.32 18.5081Z" fill="url(#paint10_radial_15162_4928)"/>
+<path d="M110.186 40.4908L110.182 40.5562L108.201 44.5717L109.791 49.2457L112.817 41.9234C114.154 38.6865 115.827 36.9941 117.477 36.044C119.18 35.0636 121.154 34.7022 123.368 34.6436C123.626 34.6368 123.827 34.6417 123.978 34.6509C124.038 34.7113 124.103 34.7725 124.175 34.8331C124.534 35.1361 125.106 35.4684 125.868 35.5274C127.297 35.6379 128.141 34.7474 128.34 34.5213C128.605 34.2187 128.744 33.9336 128.787 33.8428C128.887 33.6352 128.94 33.4587 128.951 33.4237L128.952 33.4203L128.961 33.3884C128.979 33.3499 129.014 33.2776 129.074 33.1672C129.306 32.7429 129.851 31.8642 131.048 30.3194C131.13 30.2141 131.212 30.108 131.293 30.0011C129.979 30.0973 128.654 30.1979 127.364 30.2984C126.261 31.8976 126.124 32.4571 126.102 32.5445C126.1 32.5531 126.099 32.5572 126.098 32.5571C126.098 32.5571 126.097 32.5539 126.097 32.5481C126.086 32.4504 125.991 31.5941 123.29 31.6655L123.254 31.6665C119.346 31.7753 115.27 32.7465 112.211 36.8934C111.471 37.896 110.791 39.0842 110.186 40.4908Z" fill="#1B57B2"/>
+<path d="M114.617 19.8624C115.488 24.4367 116.992 28.7276 119.455 31.6647C122.671 35.501 125.82 36.9706 129.18 38.5386C133.252 40.4389 137.633 42.4837 142.82 49.0612C142.942 48.9205 143.064 48.7777 143.183 48.6328C150.347 39.9596 149.12 27.1241 140.443 19.9637C132.824 13.6771 121.995 13.8554 114.617 19.8624Z" fill="url(#paint11_radial_15162_4928)"/>
+<path d="M138.95 44.7924C140.191 45.9628 141.479 47.3605 142.82 49.0611C142.942 48.9203 143.064 48.7775 143.183 48.6326C150.347 39.9595 149.12 27.1239 140.443 19.9636C137.919 17.8808 135.042 16.5077 132.056 15.8209C133.059 16.3932 134.027 17.0588 134.948 17.819C143.076 24.5258 144.668 36.2117 138.95 44.7924Z" fill="#1471DF"/>
+<path d="M138.95 44.7924C140.191 45.9628 141.479 47.3605 142.82 49.0611C142.942 48.9203 143.064 48.7775 143.183 48.6326C150.347 39.9595 149.12 27.1239 140.443 19.9636C137.919 17.8808 135.042 16.5077 132.056 15.8209C133.059 16.3932 134.027 17.0588 134.948 17.819C143.076 24.5258 144.668 36.2117 138.95 44.7924Z" fill="url(#paint12_radial_15162_4928)"/>
+<path d="M115.912 23.1267L115.656 22.8999C115.31 22.1777 114.837 21.0205 114.458 19.7424C114.242 19.9145 114.03 20.0914 113.82 20.2731L112.478 21.4369L112.864 23.1707C113.782 27.2976 115.341 31.5579 118.052 34.5944C121.379 38.3229 124.651 39.7285 127.63 41.0084L127.741 41.0561C131.133 42.5134 134.473 43.9487 138.684 48.9622L140.995 51.7137L142.899 49.3908L141.941 47.8997C141.452 47.1386 140.852 46.4556 140.159 45.8735L139.122 45.0019C139.06 44.9383 138.998 44.8754 138.936 44.8131C135.162 41.0019 131.922 39.6097 128.878 38.3021C125.928 37.0344 123.163 35.8463 120.276 32.6113C118.179 30.2615 116.797 26.8337 115.912 23.1267Z" fill="#1B57B2"/>
+<path d="M142.115 78.1255C146.249 77.4332 151.558 73.795 153.695 72.0624L156.248 75.6137C155.306 76.6782 151.729 79.4325 144.958 81.9335C138.188 84.4346 126.552 84.2035 121.58 83.7753C119.568 83.8069 117.886 83.8154 114.982 82.0164C111.805 80.0482 106.882 75.3721 105.595 72.2928C103.707 70.6233 108.563 74.4387 111.079 76.0423C114.224 78.0468 120.86 78.7392 125.307 79.5657C129.753 80.3921 136.948 78.9908 142.115 78.1255Z" fill="#1471DF"/>
+<path d="M142.115 78.1255C146.249 77.4332 151.558 73.795 153.695 72.0624L156.248 75.6137C155.306 76.6782 151.729 79.4325 144.958 81.9335C138.188 84.4346 126.552 84.2035 121.58 83.7753C119.568 83.8069 117.886 83.8154 114.982 82.0164C111.805 80.0482 106.882 75.3721 105.595 72.2928C103.707 70.6233 108.563 74.4387 111.079 76.0423C114.224 78.0468 120.86 78.7392 125.307 79.5657C129.753 80.3921 136.948 78.9908 142.115 78.1255Z" fill="url(#paint13_radial_15162_4928)"/>
+<path d="M158.078 67.8552C158.264 67.2739 158.46 66.6616 158.605 66.0407C158.568 65.5702 158.524 65.1141 158.473 64.6742C159.394 69.5481 158.831 75.4473 158.331 78.2317L157.849 78.7771C158.201 76.9219 158.439 75.0766 158.578 73.2951C155.202 82.5422 138.052 87.4748 123.483 85.6867C120.837 85.3619 118.38 84.8403 116.129 84.1462C116.317 84.4734 116.481 84.8247 116.616 85.2047C115.233 83.3201 112.567 81.2194 111.163 79.0919C112.853 80.1234 116.07 81.01 118.47 81.6799C117.83 80.1322 117.576 78.2067 117.845 76.1764C118.122 74.0958 118.9 72.2649 119.961 70.9287C116.572 70.2588 113.669 69.222 111.243 67.8875L110.757 64.606C110.655 62.4431 110.879 57.8259 111.413 58.0647C111.699 58.1925 112.176 59.9652 112.674 61.8152C113.222 63.8491 113.795 65.9766 114.167 66.1151C116.943 67.1503 120.407 68.0933 123.401 68.4608C130.786 69.3672 138.877 68.4298 145.181 66.0603C145.612 65.8984 149.151 60.9403 149.151 60.9403C149.151 60.9403 147.419 67.3356 147.876 68.184C141.088 71.1286 132.093 72.3804 123.826 71.5076C123.383 71.8701 122.861 72.3494 122.596 72.6445C121.849 73.477 121.172 74.8492 120.941 76.5871C120.71 78.325 121.006 79.8263 121.51 80.8249C121.769 81.3395 122.221 82.0511 122.601 82.5581C123.008 82.6205 123.423 82.6778 123.846 82.7297C131.231 83.6361 139.322 82.6988 145.626 80.3293C152.143 77.8802 157.095 73.51 157.535 69.9279C157.609 69.3231 157.836 68.6156 158.078 67.8552Z" fill="#1B57B2"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M132.886 22.4599C131.082 21.9987 129.317 21.8981 128.288 21.9431C127.466 21.979 126.77 21.3418 126.734 20.5199C126.698 19.6981 127.336 19.0027 128.158 18.9668C129.453 18.9103 131.512 19.0336 133.625 19.5736C135.718 20.1085 138.049 21.0997 139.679 22.9161C142.553 26.1181 144.173 29.8996 144.649 31.4761C144.887 32.2637 144.441 33.0948 143.653 33.3324C142.865 33.5699 142.033 33.124 141.795 32.3364C141.419 31.0893 139.986 27.7194 137.46 24.9053C136.391 23.7136 134.711 22.9262 132.886 22.4599Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M148.93 53.3599C147.54 52.1688 146.191 51.4142 145.487 51.2366C144.788 51.0603 144.411 50.3631 144.645 49.6794C144.88 48.9956 145.637 48.5843 146.336 48.7606C147.608 49.0814 149.304 50.1289 150.788 51.4017C152.295 52.6938 153.797 54.3988 154.539 56.2091C155.207 57.8389 155.789 59.6756 156.193 61.27C156.395 62.0679 156.556 62.8182 156.66 63.4618C156.761 64.078 156.824 64.6836 156.788 65.1536C156.733 65.8597 156.093 66.4303 155.357 66.4281C154.622 66.4259 154.07 65.8517 154.125 65.1456C154.137 64.9828 154.116 64.6149 154.021 64.0286C153.93 63.4697 153.785 62.7884 153.595 62.0373C153.214 60.5336 152.664 58.8023 152.043 57.2869C151.496 55.952 150.296 54.5315 148.93 53.3599Z" fill="white"/>
+<ellipse cx="1.48956" cy="1.48956" rx="1.48956" ry="1.48956" transform="matrix(0.749143 0.662409 -0.662786 0.748809 127.78 43.4163)" fill="black"/>
+<ellipse cx="1.48956" cy="1.48956" rx="1.48956" ry="1.48956" transform="matrix(0.749143 0.662409 -0.662786 0.748809 116.783 43.0818)" fill="black"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M113.114 50.1605C117.831 53.388 120.569 52.8828 121.923 51.4928C122.096 51.6529 122.283 51.7812 122.462 51.8595C127.806 54.1973 130.578 51.2569 131.345 49.4075C131.36 49.3757 131.372 49.3434 131.383 49.3106C131.371 49.3425 131.358 49.3748 131.345 49.4075C130.784 50.6065 127.516 50.9989 125.86 50.585C125.225 50.426 124.648 50.0888 124.11 49.7733C123.515 49.4256 122.966 49.1043 122.433 49.0776C121.707 48.526 120.636 49.384 119.828 50.0316C119.525 50.2739 119.259 50.4867 119.062 50.5853C118.202 51.0151 115.239 51.0102 113.114 50.1605ZM121.878 55.9853L122.461 56.958L122.8 56.1103C123.117 55.3175 123.161 54.3052 122.331 54.1081C121.517 53.9149 121.447 55.2681 121.878 55.9853Z" fill="black"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M152.46 54.0547C152.431 54.6917 152.352 55.3295 152.277 55.935L152.264 56.0347C153.21 57.8675 153.546 60.0864 153.445 62.5604C153.585 62.1078 153.694 61.6508 153.77 61.1899C154.285 65.9607 154.186 71.3142 152.976 76.2835C155.587 74.2404 157.286 71.9573 157.535 69.9274C157.609 69.3226 157.835 68.6151 158.078 67.8547L158.078 67.8546L158.078 67.8545L158.078 67.8544C158.264 67.2732 158.46 66.661 158.605 66.0402C158.435 63.8573 158.101 61.9851 157.655 60.5966C156.205 56.0783 153.851 52.4102 150.839 49.5013C151.42 50.7133 151.977 52.2636 152.46 54.0547ZM101.797 105.248C100.314 105.874 98.507 106.717 97.0215 107.433C97.0467 107.426 97.0721 107.419 97.0978 107.412C98.3316 107.074 102.044 106.709 106.938 106.229C118.658 105.078 137.155 103.263 144.628 99.5461C154.054 94.8581 157.811 83.109 158.578 73.2945C157.479 76.3026 154.924 78.8541 151.473 80.8662C150.031 84.2646 147.905 87.2904 144.899 89.5609C138.239 94.59 120.393 99.7811 109.085 103.07L109.085 103.07C106.085 103.943 103.545 104.681 101.797 105.248Z" fill="#1471DF"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M152.46 54.0547C152.431 54.6917 152.352 55.3295 152.277 55.935L152.264 56.0347C153.21 57.8675 153.546 60.0864 153.445 62.5604C153.585 62.1078 153.694 61.6508 153.77 61.1899C154.285 65.9607 154.186 71.3142 152.976 76.2835C155.587 74.2404 157.286 71.9573 157.535 69.9274C157.609 69.3226 157.835 68.6151 158.078 67.8547L158.078 67.8546L158.078 67.8545L158.078 67.8544C158.264 67.2732 158.46 66.661 158.605 66.0402C158.435 63.8573 158.101 61.9851 157.655 60.5966C156.205 56.0783 153.851 52.4102 150.839 49.5013C151.42 50.7133 151.977 52.2636 152.46 54.0547ZM101.797 105.248C100.314 105.874 98.507 106.717 97.0215 107.433C97.0467 107.426 97.0721 107.419 97.0978 107.412C98.3316 107.074 102.044 106.709 106.938 106.229C118.658 105.078 137.155 103.263 144.628 99.5461C154.054 94.8581 157.811 83.109 158.578 73.2945C157.479 76.3026 154.924 78.8541 151.473 80.8662C150.031 84.2646 147.905 87.2904 144.899 89.5609C138.239 94.59 120.393 99.7811 109.085 103.07L109.085 103.07C106.085 103.943 103.545 104.681 101.797 105.248Z" fill="url(#paint14_radial_15162_4928)"/>
+<path d="M145 156.75C145.8 160.35 141 163.917 138.5 165.25L143 167.25C148.6 165.25 149.667 159.417 149.5 156.75H145Z" fill="#A6A6A6"/>
+<path d="M143 170.25V167.25L138.5 165.25V174.25L143 170.25Z" fill="#616161"/>
+<path d="M149.5 156.75C149.5 162.25 146 165.75 143 167.25V170.25C149 167.25 149.5 163.75 149.5 162.75V156.75Z" fill="#828282"/>
+<path d="M149.633 162.062C149.167 163.801 147.717 165.406 146.398 166.508C145.807 167.003 145.855 167.984 146.538 168.342L147.432 168.811C147.961 169.089 148.598 169.131 149.11 168.823C151.807 167.201 152.752 163.979 152.955 161.686C153.026 160.883 152.356 160.25 151.55 160.25C150.599 160.25 149.878 161.144 149.633 162.062Z" fill="#212021"/>
+<path d="M149.141 161.447C148.882 163.088 147.579 164.63 146.361 165.694C145.785 166.198 145.834 167.171 146.509 167.53L147.436 168.025C147.704 168.167 148.025 168.185 148.293 168.043C151.023 166.596 151.865 163.326 151.984 161.198C152.014 160.666 151.573 160.25 151.041 160.25H150.333C149.707 160.25 149.238 160.829 149.141 161.447Z" fill="#373737"/>
+<g opacity="0.5" filter="url(#filter1_f_15162_4928)">
+<path d="M105 157.25C123.225 157.25 138 154.34 138 150.75L192 27.75C164.5 21.0833 95.2 11.75 38 27.75L72 150.75C72 154.34 86.7746 157.25 105 157.25Z" fill="url(#paint15_linear_15162_4928)"/>
+</g>
+<circle cx="85" cy="62.25" r="1" fill="#D9D9D9"/>
+<circle cx="79" cy="36.25" r="2" fill="#68DBFF"/>
+<circle cx="174" cy="68.25" r="2" fill="#68DBFF"/>
+<circle cx="63" cy="68.25" r="2" fill="#68DBFF"/>
+<circle cx="152" cy="115.25" r="2" fill="#68DBFF"/>
+<circle cx="72" cy="48.25" r="1" fill="#68DBFF"/>
+<circle cx="182" cy="51.25" r="1" fill="#68DBFF"/>
+<circle cx="168" cy="99.25" r="1" fill="#68DBFF"/>
+<circle cx="71" cy="88.25" r="1" fill="#68DBFF"/>
+<circle cx="155" cy="45.25" r="1" fill="#68DBFF"/>
+<circle cx="92" cy="77.25" r="3" fill="#68DBFF"/>
+<circle cx="171" cy="44.25" r="3" fill="#68DBFF"/>
+<circle cx="55" cy="29.25" r="3" fill="#68DBFF"/>
+<g filter="url(#filter2_f_15162_4928)">
+<circle cx="79" cy="36.25" r="2" fill="#68DBFF"/>
+<circle cx="174" cy="68.25" r="2" fill="#68DBFF"/>
+<circle cx="63" cy="68.25" r="2" fill="#68DBFF"/>
+<circle cx="152" cy="115.25" r="2" fill="#68DBFF"/>
+<circle cx="72" cy="48.25" r="1" fill="#68DBFF"/>
+<circle cx="182" cy="51.25" r="1" fill="#68DBFF"/>
+<circle cx="168" cy="99.25" r="1" fill="#68DBFF"/>
+<circle cx="71" cy="88.25" r="1" fill="#68DBFF"/>
+<circle cx="155" cy="45.25" r="1" fill="#68DBFF"/>
+<circle cx="92" cy="77.25" r="3" fill="#68DBFF"/>
+<circle cx="171" cy="44.25" r="3" fill="#68DBFF"/>
+<circle cx="55" cy="29.25" r="3" fill="#68DBFF"/>
+</g>
+<path d="M62 156.25L64.5 157.25V154.25C62.9 154.65 62.1667 155.75 62 156.25Z" fill="#A6A6A6"/>
+<path d="M62 159.75V156.25L64.5 157.25V162.75L62 159.75Z" fill="#616161"/>
+<defs>
+<filter id="filter0_f_15162_4928" x="72.7959" y="5.30292" width="95.3223" height="154.172" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="5" result="effect1_foregroundBlur_15162_4928"/>
+</filter>
+<filter id="filter1_f_15162_4928" x="26" y="6.91553" width="178" height="162.334" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="6" result="effect1_foregroundBlur_15162_4928"/>
+</filter>
+<filter id="filter2_f_15162_4928" x="46" y="20.25" width="143" height="103" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="3" result="effect1_foregroundBlur_15162_4928"/>
+</filter>
+<radialGradient id="paint0_radial_15162_4928" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(169.813 176.735) rotate(92.7715) scale(12.4229 42.3071)">
+<stop offset="0.09375" stop-color="#0089B4"/>
+<stop offset="1" stop-color="#67DAFE"/>
+</radialGradient>
+<radialGradient id="paint1_radial_15162_4928" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(163.593 165.507) rotate(-87.2285) scale(6.21143 21.1535)">
+<stop offset="0.09375" stop-color="#0089B4"/>
+<stop offset="1" stop-color="#67DAFE"/>
+</radialGradient>
+<radialGradient id="paint2_radial_15162_4928" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(42.3028 176.401) rotate(19.1076) scale(45.2808 17.6264)">
+<stop stop-color="#0089B4"/>
+<stop offset="1" stop-color="#68DBFF"/>
+</radialGradient>
+<linearGradient id="paint3_linear_15162_4928" x1="65" y1="193.75" x2="145" y2="182.75" gradientUnits="userSpaceOnUse">
+<stop offset="0.249044" stop-color="#272627"/>
+<stop offset="1" stop-color="#282A2C" stop-opacity="0"/>
+</linearGradient>
+<radialGradient id="paint4_radial_15162_4928" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(105.254 157.322) rotate(-100.684) scale(13.0575 30.2522)">
+<stop stop-color="#68DBFF"/>
+<stop offset="1" stop-color="#0089B4"/>
+</radialGradient>
+<radialGradient id="paint5_radial_15162_4928" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(138.646 123.834) rotate(-123.417) scale(73.5677 96.1025)">
+<stop stop-color="#0089B4"/>
+<stop offset="1" stop-color="#68DBFF"/>
+</radialGradient>
+<radialGradient id="paint6_radial_15162_4928" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(95.2061 108.916) rotate(-50.1764) scale(79.6884 30.9746)">
+<stop offset="0.266796" stop-color="#68DBFF"/>
+<stop offset="1" stop-color="#0089B4"/>
+</radialGradient>
+<radialGradient id="paint7_radial_15162_4928" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(95.2061 108.916) rotate(-50.1764) scale(79.6884 30.9746)">
+<stop offset="0.266796" stop-color="#68DBFF"/>
+<stop offset="1" stop-color="#0089B4"/>
+</radialGradient>
+<radialGradient id="paint8_radial_15162_4928" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(108.355 45.9459) rotate(-58.4008) scale(38.0325 9.87146)">
+<stop offset="0.266796" stop-color="#68DBFF"/>
+<stop offset="1" stop-color="#0089B4"/>
+</radialGradient>
+<radialGradient id="paint9_radial_15162_4928" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(126.135 37.8395) rotate(-54.211) scale(22.5213 19.4811)">
+<stop offset="0.266796" stop-color="#68DBFF"/>
+<stop offset="1" stop-color="#0089B4"/>
+</radialGradient>
+<radialGradient id="paint10_radial_15162_4928" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(117.692 40.3355) rotate(-116.774) scale(19.9273 28.1396)">
+<stop offset="0.47386" stop-color="#68DBFF"/>
+<stop offset="1" stop-color="#0089B4"/>
+</radialGradient>
+<radialGradient id="paint11_radial_15162_4928" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(126.135 37.8395) rotate(-54.211) scale(22.5213 19.4811)">
+<stop offset="0.266796" stop-color="#68DBFF"/>
+<stop offset="1" stop-color="#0089B4"/>
+</radialGradient>
+<radialGradient id="paint12_radial_15162_4928" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(140.358 40.0691) rotate(-115.717) scale(22.9099 21.839)">
+<stop stop-color="#006BB8"/>
+<stop offset="1" stop-color="#0080F5"/>
+</radialGradient>
+<radialGradient id="paint13_radial_15162_4928" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(132.303 86.703) rotate(-112.274) scale(31.7003 35.7787)">
+<stop stop-color="#006BB8"/>
+<stop offset="1" stop-color="#0080F5"/>
+</radialGradient>
+<radialGradient id="paint14_radial_15162_4928" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(126.361 108.844) rotate(-83.8541) scale(41.47 55.7108)">
+<stop stop-color="#006BB8"/>
+<stop offset="1" stop-color="#0080F5"/>
+</radialGradient>
+<linearGradient id="paint15_linear_15162_4928" x1="105.5" y1="157.25" x2="110" y2="19.25" gradientUnits="userSpaceOnUse">
+<stop stop-color="#68DBFF"/>
+<stop offset="1" stop-color="#68DBFF" stop-opacity="0"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/src/assets/icons/visu/ecogesture/ECOGESTURE0084.svg b/src/assets/icons/visu/ecogesture/ECOGESTURE0084.svg
new file mode 100644
index 0000000000000000000000000000000000000000..86970573f373affc38b81ea721076df956a5f3a5
--- /dev/null
+++ b/src/assets/icons/visu/ecogesture/ECOGESTURE0084.svg
@@ -0,0 +1,385 @@
+<svg width="220" height="221" viewBox="0 0 220 221" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_15199_973)">
+<g filter="url(#filter0_f_15199_973)">
+<g filter="url(#filter1_f_15199_973)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M73.6379 17.4032C73.6379 17.1832 73.8162 17.0049 74.0362 17.0049C74.2562 17.0049 74.4345 17.1832 74.4345 17.4032V18.7742L75.2351 17.3876C75.3084 17.2606 75.4708 17.2171 75.5978 17.2904C75.7249 17.3637 75.7684 17.5261 75.695 17.6531L74.4345 19.8364V21.5293L76.1836 20.5195L77.3783 18.4502C77.4516 18.3232 77.6141 18.2797 77.7411 18.353C77.8681 18.4264 77.9116 18.5888 77.8383 18.7158L77.1035 19.9884L78.1755 19.3695C78.366 19.2595 78.6096 19.3248 78.7196 19.5153C78.8296 19.7058 78.7643 19.9494 78.5738 20.0594L77.4249 20.7227L78.9564 20.7227C79.103 20.7227 79.2219 20.8416 79.2219 20.9883C79.2219 21.135 79.103 21.2538 78.9564 21.2538L76.505 21.2538L75.0015 22.1219L76.7496 23.1312L79.1405 23.1312C79.2872 23.1312 79.4061 23.2501 79.4061 23.3968C79.4061 23.5434 79.2872 23.6623 79.1405 23.6623L77.6695 23.6623L78.7424 24.2817C78.9329 24.3917 78.9982 24.6353 78.8882 24.8259C78.7782 25.0164 78.5346 25.0817 78.344 24.9717L77.0044 24.1982L77.8211 25.6127C77.8944 25.7397 77.8509 25.9022 77.7239 25.9755C77.5969 26.0488 77.4345 26.0053 77.3612 25.8783L76.0845 23.6671L74.4345 22.7145V24.8231L75.7359 27.0772C75.8092 27.2042 75.7657 27.3666 75.6387 27.44C75.5117 27.5133 75.3493 27.4698 75.276 27.3428L74.4345 25.8854V27.2287C74.4345 27.4487 74.2562 27.627 74.0362 27.627C73.8162 27.627 73.6379 27.4487 73.6379 27.2287V26.0501L72.9031 27.3227C72.8298 27.4497 72.6674 27.4933 72.5403 27.4199C72.4133 27.3466 72.3698 27.1842 72.4431 27.0572L73.6379 24.9879V22.9092L72.2114 23.7327L70.7784 26.2148C70.7051 26.3419 70.5426 26.3854 70.4156 26.312C70.2886 26.2387 70.2451 26.0763 70.3184 25.9493L71.2915 24.2639L70.0647 24.9722C69.8742 25.0822 69.6306 25.0169 69.5206 24.8264C69.4106 24.6358 69.4758 24.3922 69.6664 24.2822L70.6873 23.6928H69.2168C69.0701 23.6928 68.9512 23.5739 68.9512 23.4272C68.9512 23.2806 69.0701 23.1617 69.2168 23.1617H71.6072L73.4081 22.1219L71.9034 21.2532H69.1249C68.9783 21.2532 68.8594 21.1343 68.8594 20.9876C68.8594 20.841 68.9783 20.7221 69.1249 20.7221H70.9835L69.8349 20.0589C69.6444 19.9489 69.5791 19.7053 69.6891 19.5148C69.7991 19.3243 70.0427 19.259 70.2332 19.369L71.2539 19.9582L70.5191 18.6855C70.4457 18.5585 70.4892 18.3961 70.6163 18.3228C70.7433 18.2494 70.9057 18.2929 70.979 18.42L72.1738 20.4893L73.6379 21.3346V19.7025L72.4432 17.6332C72.3698 17.5062 72.4134 17.3438 72.5404 17.2705C72.6674 17.1972 72.8298 17.2407 72.9031 17.3677L73.6379 18.6403V17.4032Z" fill="url(#paint0_linear_15199_973)"/>
+</g>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M73.6379 17.4032C73.6379 17.1832 73.8162 17.0049 74.0362 17.0049C74.2562 17.0049 74.4345 17.1832 74.4345 17.4032V18.7742L75.2351 17.3876C75.3084 17.2606 75.4708 17.2171 75.5978 17.2904C75.7249 17.3637 75.7684 17.5261 75.695 17.6531L74.4345 19.8364V21.5293L76.1836 20.5195L77.3783 18.4502C77.4516 18.3232 77.6141 18.2797 77.7411 18.353C77.8681 18.4264 77.9116 18.5888 77.8383 18.7158L77.1035 19.9884L78.1755 19.3695C78.366 19.2595 78.6096 19.3248 78.7196 19.5153C78.8296 19.7058 78.7643 19.9494 78.5738 20.0594L77.4249 20.7227L78.9564 20.7227C79.103 20.7227 79.2219 20.8416 79.2219 20.9883C79.2219 21.135 79.103 21.2538 78.9564 21.2538L76.505 21.2538L75.0015 22.1219L76.7496 23.1312L79.1405 23.1312C79.2872 23.1312 79.4061 23.2501 79.4061 23.3968C79.4061 23.5434 79.2872 23.6623 79.1405 23.6623L77.6695 23.6623L78.7424 24.2817C78.9329 24.3917 78.9982 24.6353 78.8882 24.8259C78.7782 25.0164 78.5346 25.0817 78.344 24.9717L77.0044 24.1982L77.8211 25.6127C77.8944 25.7397 77.8509 25.9022 77.7239 25.9755C77.5969 26.0488 77.4345 26.0053 77.3612 25.8783L76.0845 23.6671L74.4345 22.7145V24.8231L75.7359 27.0772C75.8092 27.2042 75.7657 27.3666 75.6387 27.44C75.5117 27.5133 75.3493 27.4698 75.276 27.3428L74.4345 25.8854V27.2287C74.4345 27.4487 74.2562 27.627 74.0362 27.627C73.8162 27.627 73.6379 27.4487 73.6379 27.2287V26.0501L72.9031 27.3227C72.8298 27.4497 72.6674 27.4933 72.5403 27.4199C72.4133 27.3466 72.3698 27.1842 72.4431 27.0572L73.6379 24.9879V22.9092L72.2114 23.7327L70.7784 26.2148C70.7051 26.3419 70.5426 26.3854 70.4156 26.312C70.2886 26.2387 70.2451 26.0763 70.3184 25.9493L71.2915 24.2639L70.0647 24.9722C69.8742 25.0822 69.6306 25.0169 69.5206 24.8264C69.4106 24.6358 69.4758 24.3922 69.6664 24.2822L70.6873 23.6928H69.2168C69.0701 23.6928 68.9512 23.5739 68.9512 23.4272C68.9512 23.2806 69.0701 23.1617 69.2168 23.1617H71.6072L73.4081 22.1219L71.9034 21.2532H69.1249C68.9783 21.2532 68.8594 21.1343 68.8594 20.9876C68.8594 20.841 68.9783 20.7221 69.1249 20.7221H70.9835L69.8349 20.0589C69.6444 19.9489 69.5791 19.7053 69.6891 19.5148C69.7991 19.3243 70.0427 19.259 70.2332 19.369L71.2539 19.9582L70.5191 18.6855C70.4457 18.5585 70.4892 18.3961 70.6163 18.3228C70.7433 18.2494 70.9057 18.2929 70.979 18.42L72.1738 20.4893L73.6379 21.3346V19.7025L72.4432 17.6332C72.3698 17.5062 72.4134 17.3438 72.5404 17.2705C72.6674 17.1972 72.8298 17.2407 72.9031 17.3677L73.6379 18.6403V17.4032Z" fill="url(#paint1_linear_15199_973)"/>
+</g>
+<g filter="url(#filter2_f_15199_973)">
+<g filter="url(#filter3_f_15199_973)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M170.924 68.7437C170.924 68.471 171.145 68.25 171.418 68.25C171.69 68.25 171.911 68.471 171.911 68.7437V70.4427L172.903 68.7245C172.994 68.5671 173.196 68.5132 173.353 68.604C173.51 68.6949 173.564 68.8962 173.473 69.0536L171.911 71.7592V73.8571L174.079 72.6057L175.56 70.0411C175.651 69.8837 175.852 69.8298 176.009 69.9207C176.167 70.0115 176.221 70.2128 176.13 70.3703L175.219 71.9474L176.547 71.1807C176.783 71.0443 177.085 71.1252 177.222 71.3614C177.358 71.5975 177.277 71.8994 177.041 72.0358L175.617 72.8576H177.515C177.697 72.8576 177.845 73.005 177.845 73.1867C177.845 73.3685 177.697 73.5159 177.515 73.5159H174.477L172.613 74.5924L174.779 75.8434L177.742 75.8434C177.924 75.8434 178.071 75.9908 178.071 76.1725C178.071 76.3543 177.924 76.5017 177.742 76.5017L175.92 76.5017L177.249 77.2691C177.485 77.4054 177.566 77.7074 177.429 77.9435C177.293 78.1796 176.991 78.2605 176.755 78.1242L175.095 77.1659L176.107 78.9187C176.198 79.0761 176.144 79.2774 175.987 79.3683C175.829 79.4592 175.628 79.4052 175.537 79.2478L173.955 76.5077L171.911 75.3277V77.9404L173.524 80.7337C173.615 80.8911 173.561 81.0924 173.404 81.1833C173.246 81.2741 173.045 81.2202 172.954 81.0628L171.911 79.2569V80.9214C171.911 81.1941 171.69 81.4151 171.418 81.4151C171.145 81.4151 170.924 81.1941 170.924 80.9214V79.4603L170.013 81.0382C169.922 81.1957 169.721 81.2496 169.563 81.1587C169.406 81.0678 169.352 80.8665 169.443 80.7091L170.924 78.1438V75.5673L169.155 76.5884L167.379 79.6651C167.288 79.8226 167.087 79.8765 166.93 79.7856C166.772 79.6947 166.718 79.4934 166.809 79.336L168.015 77.2467L166.495 78.1246C166.259 78.2609 165.957 78.18 165.82 77.9439C165.684 77.7078 165.765 77.4058 166.001 77.2695L167.266 76.5389H165.444C165.262 76.5389 165.115 76.3915 165.115 76.2098C165.115 76.028 165.262 75.8806 165.444 75.8806L168.407 75.8806L170.638 74.5924L168.772 73.5153H165.329C165.147 73.5153 165 73.3679 165 73.1862C165 73.0044 165.147 72.857 165.329 72.857L167.632 72.857L166.209 72.0353C165.973 71.899 165.892 71.5971 166.028 71.3609C166.165 71.1248 166.466 71.0439 166.703 71.1802L167.968 71.9109L167.057 70.3328C166.966 70.1754 167.02 69.9741 167.177 69.8832C167.335 69.7923 167.536 69.8462 167.627 70.0036L169.108 72.5692L170.924 73.6175V71.5939L169.443 69.0286C169.352 68.8712 169.406 68.6699 169.563 68.579C169.721 68.4881 169.922 68.5421 170.013 68.6995L170.924 70.2774V68.7437Z" fill="url(#paint2_linear_15199_973)"/>
+</g>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M170.924 68.7437C170.924 68.471 171.145 68.25 171.418 68.25C171.69 68.25 171.911 68.471 171.911 68.7437V70.4427L172.903 68.7245C172.994 68.5671 173.196 68.5132 173.353 68.604C173.51 68.6949 173.564 68.8962 173.473 69.0536L171.911 71.7592V73.8571L174.079 72.6057L175.56 70.0411C175.651 69.8837 175.852 69.8298 176.009 69.9207C176.167 70.0115 176.221 70.2128 176.13 70.3703L175.219 71.9474L176.547 71.1807C176.783 71.0443 177.085 71.1252 177.222 71.3614C177.358 71.5975 177.277 71.8994 177.041 72.0358L175.617 72.8576H177.515C177.697 72.8576 177.845 73.005 177.845 73.1867C177.845 73.3685 177.697 73.5159 177.515 73.5159H174.477L172.613 74.5924L174.779 75.8434L177.742 75.8434C177.924 75.8434 178.071 75.9908 178.071 76.1725C178.071 76.3543 177.924 76.5017 177.742 76.5017L175.92 76.5017L177.249 77.2691C177.485 77.4054 177.566 77.7074 177.429 77.9435C177.293 78.1796 176.991 78.2605 176.755 78.1242L175.095 77.1659L176.107 78.9187C176.198 79.0761 176.144 79.2774 175.987 79.3683C175.829 79.4592 175.628 79.4052 175.537 79.2478L173.955 76.5077L171.911 75.3277V77.9404L173.524 80.7337C173.615 80.8911 173.561 81.0924 173.404 81.1833C173.246 81.2741 173.045 81.2202 172.954 81.0628L171.911 79.2569V80.9214C171.911 81.1941 171.69 81.4151 171.418 81.4151C171.145 81.4151 170.924 81.1941 170.924 80.9214V79.4603L170.013 81.0382C169.922 81.1957 169.721 81.2496 169.563 81.1587C169.406 81.0678 169.352 80.8665 169.443 80.7091L170.924 78.1438V75.5673L169.155 76.5884L167.379 79.6651C167.288 79.8226 167.087 79.8765 166.93 79.7856C166.772 79.6947 166.718 79.4934 166.809 79.336L168.015 77.2467L166.495 78.1246C166.259 78.2609 165.957 78.18 165.82 77.9439C165.684 77.7078 165.765 77.4058 166.001 77.2695L167.266 76.5389H165.444C165.262 76.5389 165.115 76.3915 165.115 76.2098C165.115 76.028 165.262 75.8806 165.444 75.8806L168.407 75.8806L170.638 74.5924L168.772 73.5153H165.329C165.147 73.5153 165 73.3679 165 73.1862C165 73.0044 165.147 72.857 165.329 72.857L167.632 72.857L166.209 72.0353C165.973 71.899 165.892 71.5971 166.028 71.3609C166.165 71.1248 166.466 71.0439 166.703 71.1802L167.968 71.9109L167.057 70.3328C166.966 70.1754 167.02 69.9741 167.177 69.8832C167.335 69.7923 167.536 69.8462 167.627 70.0036L169.108 72.5692L170.924 73.6175V71.5939L169.443 69.0286C169.352 68.8712 169.406 68.6699 169.563 68.579C169.721 68.4881 169.922 68.5421 170.013 68.6995L170.924 70.2774V68.7437Z" fill="url(#paint3_linear_15199_973)"/>
+</g>
+<g filter="url(#filter4_f_15199_973)">
+<g filter="url(#filter5_f_15199_973)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M40.5798 115.648C40.5798 115.428 40.7581 115.25 40.9781 115.25C41.1981 115.25 41.3764 115.428 41.3764 115.648V117.019L42.177 115.633C42.2503 115.506 42.4128 115.462 42.5398 115.536C42.6668 115.609 42.7103 115.771 42.637 115.898L41.3764 118.082V119.775L43.1258 118.765L44.3205 116.695C44.3938 116.568 44.5562 116.525 44.6832 116.598C44.8102 116.671 44.8537 116.834 44.7804 116.961L44.0457 118.233L45.1176 117.615C45.3081 117.505 45.5518 117.57 45.6618 117.76C45.7718 117.951 45.7065 118.194 45.516 118.304L44.367 118.968H45.8985C46.0452 118.968 46.1641 119.087 46.1641 119.233C46.1641 119.38 46.0452 119.499 45.8985 119.499L43.4471 119.499L41.9431 120.367L43.691 121.376L46.0819 121.376C46.2286 121.376 46.3475 121.495 46.3475 121.642C46.3475 121.789 46.2286 121.907 46.0819 121.907H44.6109L45.6838 122.527C45.8743 122.637 45.9396 122.881 45.8296 123.071C45.7196 123.262 45.476 123.327 45.2855 123.217L43.9459 122.443L44.7625 123.858C44.8358 123.985 44.7923 124.147 44.6653 124.221C44.5383 124.294 44.3759 124.25 44.3026 124.123L43.0259 121.912L41.3764 120.96V123.068L42.6778 125.322C42.7512 125.449 42.7076 125.612 42.5806 125.685C42.4536 125.758 42.2912 125.715 42.2179 125.588L41.3764 124.13V125.474C41.3764 125.694 41.1981 125.872 40.9781 125.872C40.7581 125.872 40.5798 125.694 40.5798 125.474V124.295L39.845 125.568C39.7717 125.695 39.6093 125.738 39.4823 125.665C39.3553 125.592 39.3117 125.429 39.3851 125.302L40.5798 123.233V121.154L39.1536 121.978L37.7205 124.46C37.6472 124.587 37.4848 124.63 37.3578 124.557C37.2308 124.484 37.1872 124.321 37.2606 124.194L38.2337 122.509L37.0068 123.217C36.8163 123.327 36.5727 123.262 36.4627 123.071C36.3527 122.881 36.418 122.637 36.6085 122.527L37.6295 121.938L36.1589 121.938C36.0123 121.938 35.8934 121.819 35.8934 121.672C35.8934 121.526 36.0123 121.407 36.1589 121.407H38.5494L40.3498 120.367L38.8448 119.498H36.0663C35.9197 119.498 35.8008 119.379 35.8008 119.233C35.8008 119.086 35.9197 118.967 36.0663 118.967L37.9249 118.967L36.7763 118.304C36.5858 118.194 36.5205 117.95 36.6305 117.76C36.7405 117.569 36.9841 117.504 37.1747 117.614L38.1953 118.203L37.4605 116.931C37.3871 116.804 37.4306 116.641 37.5577 116.568C37.6847 116.495 37.8471 116.538 37.9204 116.665L39.1152 118.735L40.5798 119.58V117.948L39.3851 115.878C39.3118 115.751 39.3553 115.589 39.4823 115.516C39.6093 115.442 39.7717 115.486 39.845 115.613L40.5798 116.885V115.648Z" fill="url(#paint4_linear_15199_973)"/>
+</g>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M40.5798 115.648C40.5798 115.428 40.7581 115.25 40.9781 115.25C41.1981 115.25 41.3764 115.428 41.3764 115.648V117.019L42.177 115.633C42.2503 115.506 42.4128 115.462 42.5398 115.536C42.6668 115.609 42.7103 115.771 42.637 115.898L41.3764 118.082V119.775L43.1258 118.765L44.3205 116.695C44.3938 116.568 44.5562 116.525 44.6832 116.598C44.8102 116.671 44.8537 116.834 44.7804 116.961L44.0457 118.233L45.1176 117.615C45.3081 117.505 45.5518 117.57 45.6618 117.76C45.7718 117.951 45.7065 118.194 45.516 118.304L44.367 118.968H45.8985C46.0452 118.968 46.1641 119.087 46.1641 119.233C46.1641 119.38 46.0452 119.499 45.8985 119.499L43.4471 119.499L41.9431 120.367L43.691 121.376L46.0819 121.376C46.2286 121.376 46.3475 121.495 46.3475 121.642C46.3475 121.789 46.2286 121.907 46.0819 121.907H44.6109L45.6838 122.527C45.8743 122.637 45.9396 122.881 45.8296 123.071C45.7196 123.262 45.476 123.327 45.2855 123.217L43.9459 122.443L44.7625 123.858C44.8358 123.985 44.7923 124.147 44.6653 124.221C44.5383 124.294 44.3759 124.25 44.3026 124.123L43.0259 121.912L41.3764 120.96V123.068L42.6778 125.322C42.7512 125.449 42.7076 125.612 42.5806 125.685C42.4536 125.758 42.2912 125.715 42.2179 125.588L41.3764 124.13V125.474C41.3764 125.694 41.1981 125.872 40.9781 125.872C40.7581 125.872 40.5798 125.694 40.5798 125.474V124.295L39.845 125.568C39.7717 125.695 39.6093 125.738 39.4823 125.665C39.3553 125.592 39.3117 125.429 39.3851 125.302L40.5798 123.233V121.154L39.1536 121.978L37.7205 124.46C37.6472 124.587 37.4848 124.63 37.3578 124.557C37.2308 124.484 37.1872 124.321 37.2606 124.194L38.2337 122.509L37.0068 123.217C36.8163 123.327 36.5727 123.262 36.4627 123.071C36.3527 122.881 36.418 122.637 36.6085 122.527L37.6295 121.938L36.1589 121.938C36.0123 121.938 35.8934 121.819 35.8934 121.672C35.8934 121.526 36.0123 121.407 36.1589 121.407H38.5494L40.3498 120.367L38.8448 119.498H36.0663C35.9197 119.498 35.8008 119.379 35.8008 119.233C35.8008 119.086 35.9197 118.967 36.0663 118.967L37.9249 118.967L36.7763 118.304C36.5858 118.194 36.5205 117.95 36.6305 117.76C36.7405 117.569 36.9841 117.504 37.1747 117.614L38.1953 118.203L37.4605 116.931C37.3871 116.804 37.4306 116.641 37.5577 116.568C37.6847 116.495 37.8471 116.538 37.9204 116.665L39.1152 118.735L40.5798 119.58V117.948L39.3851 115.878C39.3118 115.751 39.3553 115.589 39.4823 115.516C39.6093 115.442 39.7717 115.486 39.845 115.613L40.5798 116.885V115.648Z" fill="url(#paint5_linear_15199_973)"/>
+</g>
+<g opacity="0.2" filter="url(#filter6_f_15199_973)">
+<circle cx="110" cy="110.25" r="84" fill="#009DC9"/>
+</g>
+<rect opacity="0.35" x="61" y="59.3936" width="101" height="111" fill="url(#paint6_linear_15199_973)"/>
+<path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M64.6855 66.6264V59.0264L105.943 59.0264H113.543H154.8H156.971H162.4V170.855H154.8V120.912H113.543V170.855H105.943V120.912H64.6855V113.312H105.943V66.6264L64.6855 66.6264ZM113.543 113.312H154.8V66.6264L113.543 66.6264V113.312Z" fill="url(#paint7_linear_15199_973)"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M164.572 56.8545H59.2578V172.917H164.572V56.8545ZM156.972 64.455H66.8579V165.426H156.972V64.455Z" fill="#351E0C"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M165 57.25H59V173.25H165V57.25ZM160 61.25H64V168.25H160V61.25Z" fill="#4F311A"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M165 57.25H59V173.25H165V57.25ZM160 61.25H64V168.25H160V61.25Z" fill="url(#paint8_linear_15199_973)" fill-opacity="0.75"/>
+<rect x="108.262" y="61.1978" width="4.25867" height="106.982" fill="#442711"/>
+<rect x="111.455" y="61.1968" width="4.25867" height="106.982" fill="#4F311A"/>
+<rect x="63.5996" y="118.774" width="4.35612" height="96.7764" transform="rotate(-90 63.5996 118.774)" fill="#442711"/>
+<rect x="109.199" y="118.74" width="9.77143" height="6.51429" transform="rotate(-90 109.199 118.74)" fill="#442711"/>
+<rect x="63.5996" y="115.483" width="3.25715" height="96.6286" transform="rotate(-90 63.5996 115.483)" fill="#4F311A"/>
+<mask id="path-17-inside-1_15199_973" fill="white">
+<path d="M59 97.25C59 96.6977 59.4477 96.25 60 96.25H164C164.552 96.25 165 96.6977 165 97.25V101.25C165 101.802 164.552 102.25 164 102.25H60C59.4477 102.25 59 101.802 59 101.25V97.25Z"/>
+</mask>
+<path d="M59 97.25C59 96.6977 59.4477 96.25 60 96.25H164C164.552 96.25 165 96.6977 165 97.25V101.25C165 101.802 164.552 102.25 164 102.25H60C59.4477 102.25 59 101.802 59 101.25V97.25Z" fill="#D9D9D9"/>
+<path d="M59 97.25C59 96.6977 59.4477 96.25 60 96.25H164C164.552 96.25 165 96.6977 165 97.25V101.25C165 101.802 164.552 102.25 164 102.25H60C59.4477 102.25 59 101.802 59 101.25V97.25Z" fill="url(#paint9_linear_15199_973)"/>
+<path d="M59 97.25C59 96.1454 59.8954 95.25 61 95.25H163C164.105 95.25 165 96.1454 165 97.25C165 97.25 164.552 97.25 164 97.25H60C59.4477 97.25 59 97.25 59 97.25ZM165 102.25H59H165ZM59 102.25V96.25V102.25ZM165 96.25V102.25V96.25Z" fill="#696969" mask="url(#path-17-inside-1_15199_973)"/>
+<path opacity="0.5" d="M59 99.75C59 99.4739 59.2239 99.25 59.5 99.25H164.5C164.776 99.25 165 99.4739 165 99.75C165 100.026 164.776 100.25 164.5 100.25H59.5C59.2239 100.25 59 100.026 59 99.75Z" fill="#7B7B7B"/>
+<mask id="path-20-inside-2_15199_973" fill="white">
+<path d="M59 91.25C59 90.6977 59.4477 90.25 60 90.25H164C164.552 90.25 165 90.6977 165 91.25V95.25C165 95.8023 164.552 96.25 164 96.25H60C59.4477 96.25 59 95.8023 59 95.25V91.25Z"/>
+</mask>
+<path d="M59 91.25C59 90.6977 59.4477 90.25 60 90.25H164C164.552 90.25 165 90.6977 165 91.25V95.25C165 95.8023 164.552 96.25 164 96.25H60C59.4477 96.25 59 95.8023 59 95.25V91.25Z" fill="#D9D9D9"/>
+<path d="M59 91.25C59 90.6977 59.4477 90.25 60 90.25H164C164.552 90.25 165 90.6977 165 91.25V95.25C165 95.8023 164.552 96.25 164 96.25H60C59.4477 96.25 59 95.8023 59 95.25V91.25Z" fill="url(#paint10_linear_15199_973)"/>
+<path d="M59 91.25C59 90.1454 59.8954 89.25 61 89.25H163C164.105 89.25 165 90.1454 165 91.25C165 91.25 164.552 91.25 164 91.25H60C59.4477 91.25 59 91.25 59 91.25ZM165 96.25H59H165ZM59 96.25V90.25V96.25ZM165 90.25V96.25V90.25Z" fill="#696969" mask="url(#path-20-inside-2_15199_973)"/>
+<path opacity="0.5" d="M59 93.75C59 93.4739 59.2239 93.25 59.5 93.25H164.5C164.776 93.25 165 93.4739 165 93.75C165 94.0261 164.776 94.25 164.5 94.25H59.5C59.2239 94.25 59 94.0261 59 93.75Z" fill="#7B7B7B"/>
+<mask id="path-23-inside-3_15199_973" fill="white">
+<path d="M59 85.25C59 84.6977 59.4477 84.25 60 84.25H164C164.552 84.25 165 84.6977 165 85.25V89.25C165 89.8023 164.552 90.25 164 90.25H60C59.4477 90.25 59 89.8023 59 89.25V85.25Z"/>
+</mask>
+<path d="M59 85.25C59 84.6977 59.4477 84.25 60 84.25H164C164.552 84.25 165 84.6977 165 85.25V89.25C165 89.8023 164.552 90.25 164 90.25H60C59.4477 90.25 59 89.8023 59 89.25V85.25Z" fill="#D9D9D9"/>
+<path d="M59 85.25C59 84.6977 59.4477 84.25 60 84.25H164C164.552 84.25 165 84.6977 165 85.25V89.25C165 89.8023 164.552 90.25 164 90.25H60C59.4477 90.25 59 89.8023 59 89.25V85.25Z" fill="url(#paint11_linear_15199_973)"/>
+<path d="M59 85.25C59 84.1454 59.8954 83.25 61 83.25H163C164.105 83.25 165 84.1454 165 85.25C165 85.25 164.552 85.25 164 85.25H60C59.4477 85.25 59 85.25 59 85.25ZM165 90.25H59H165ZM59 90.25V84.25V90.25ZM165 84.25V90.25V84.25Z" fill="#696969" mask="url(#path-23-inside-3_15199_973)"/>
+<path opacity="0.5" d="M59 87.75C59 87.4739 59.2239 87.25 59.5 87.25H164.5C164.776 87.25 165 87.4739 165 87.75C165 88.0261 164.776 88.25 164.5 88.25H59.5C59.2239 88.25 59 88.0261 59 87.75Z" fill="#7B7B7B"/>
+<mask id="path-26-inside-4_15199_973" fill="white">
+<path d="M59 79.25C59 78.6977 59.4477 78.25 60 78.25H164C164.552 78.25 165 78.6977 165 79.25V83.25C165 83.8023 164.552 84.25 164 84.25H60C59.4477 84.25 59 83.8023 59 83.25V79.25Z"/>
+</mask>
+<path d="M59 79.25C59 78.6977 59.4477 78.25 60 78.25H164C164.552 78.25 165 78.6977 165 79.25V83.25C165 83.8023 164.552 84.25 164 84.25H60C59.4477 84.25 59 83.8023 59 83.25V79.25Z" fill="#D9D9D9"/>
+<path d="M59 79.25C59 78.6977 59.4477 78.25 60 78.25H164C164.552 78.25 165 78.6977 165 79.25V83.25C165 83.8023 164.552 84.25 164 84.25H60C59.4477 84.25 59 83.8023 59 83.25V79.25Z" fill="url(#paint12_linear_15199_973)"/>
+<path d="M59 79.25C59 78.1454 59.8954 77.25 61 77.25H163C164.105 77.25 165 78.1454 165 79.25C165 79.25 164.552 79.25 164 79.25H60C59.4477 79.25 59 79.25 59 79.25ZM165 84.25H59H165ZM59 84.25V78.25V84.25ZM165 78.25V84.25V78.25Z" fill="#696969" mask="url(#path-26-inside-4_15199_973)"/>
+<path opacity="0.5" d="M59 81.75C59 81.4739 59.2239 81.25 59.5 81.25H164.5C164.776 81.25 165 81.4739 165 81.75C165 82.0261 164.776 82.25 164.5 82.25H59.5C59.2239 82.25 59 82.0261 59 81.75Z" fill="#7B7B7B"/>
+<mask id="path-29-inside-5_15199_973" fill="white">
+<path d="M59 67.25C59 66.6977 59.4477 66.25 60 66.25H164C164.552 66.25 165 66.6977 165 67.25V71.25C165 71.8023 164.552 72.25 164 72.25H60C59.4477 72.25 59 71.8023 59 71.25V67.25Z"/>
+</mask>
+<path d="M59 67.25C59 66.6977 59.4477 66.25 60 66.25H164C164.552 66.25 165 66.6977 165 67.25V71.25C165 71.8023 164.552 72.25 164 72.25H60C59.4477 72.25 59 71.8023 59 71.25V67.25Z" fill="#D9D9D9"/>
+<path d="M59 67.25C59 66.6977 59.4477 66.25 60 66.25H164C164.552 66.25 165 66.6977 165 67.25V71.25C165 71.8023 164.552 72.25 164 72.25H60C59.4477 72.25 59 71.8023 59 71.25V67.25Z" fill="url(#paint13_linear_15199_973)"/>
+<path d="M59 67.25C59 66.1454 59.8954 65.25 61 65.25H163C164.105 65.25 165 66.1454 165 67.25C165 67.25 164.552 67.25 164 67.25H60C59.4477 67.25 59 67.25 59 67.25ZM165 72.25H59H165ZM59 72.25V66.25V72.25ZM165 66.25V72.25V66.25Z" fill="#696969" mask="url(#path-29-inside-5_15199_973)"/>
+<path opacity="0.5" d="M59 69.75C59 69.4739 59.2239 69.25 59.5 69.25H164.5C164.776 69.25 165 69.4739 165 69.75C165 70.0261 164.776 70.25 164.5 70.25H59.5C59.2239 70.25 59 70.0261 59 69.75Z" fill="#7B7B7B"/>
+<mask id="path-32-inside-6_15199_973" fill="white">
+<path d="M59 61.25C59 60.6977 59.4477 60.25 60 60.25H164C164.552 60.25 165 60.6977 165 61.25V65.25C165 65.8023 164.552 66.25 164 66.25H60C59.4477 66.25 59 65.8023 59 65.25V61.25Z"/>
+</mask>
+<path d="M59 61.25C59 60.6977 59.4477 60.25 60 60.25H164C164.552 60.25 165 60.6977 165 61.25V65.25C165 65.8023 164.552 66.25 164 66.25H60C59.4477 66.25 59 65.8023 59 65.25V61.25Z" fill="#D9D9D9"/>
+<path d="M59 61.25C59 60.6977 59.4477 60.25 60 60.25H164C164.552 60.25 165 60.6977 165 61.25V65.25C165 65.8023 164.552 66.25 164 66.25H60C59.4477 66.25 59 65.8023 59 65.25V61.25Z" fill="url(#paint14_linear_15199_973)"/>
+<path d="M59 61.25C59 60.1454 59.8954 59.25 61 59.25H163C164.105 59.25 165 60.1454 165 61.25C165 61.25 164.552 61.25 164 61.25H60C59.4477 61.25 59 61.25 59 61.25ZM165 66.25H59H165ZM59 66.25V60.25V66.25ZM165 60.25V66.25V60.25Z" fill="#696969" mask="url(#path-32-inside-6_15199_973)"/>
+<path opacity="0.5" d="M59 63.75C59 63.4739 59.2239 63.25 59.5 63.25H164.5C164.776 63.25 165 63.4739 165 63.75C165 64.0261 164.776 64.25 164.5 64.25H59.5C59.2239 64.25 59 64.0261 59 63.75Z" fill="#7B7B7B"/>
+<mask id="path-35-inside-7_15199_973" fill="white">
+<path d="M59 55.25C59 54.6977 59.4477 54.25 60 54.25H164C164.552 54.25 165 54.6977 165 55.25V59.25C165 59.8023 164.552 60.25 164 60.25H60C59.4477 60.25 59 59.8023 59 59.25V55.25Z"/>
+</mask>
+<path d="M59 55.25C59 54.6977 59.4477 54.25 60 54.25H164C164.552 54.25 165 54.6977 165 55.25V59.25C165 59.8023 164.552 60.25 164 60.25H60C59.4477 60.25 59 59.8023 59 59.25V55.25Z" fill="#D9D9D9"/>
+<path d="M59 55.25C59 54.6977 59.4477 54.25 60 54.25H164C164.552 54.25 165 54.6977 165 55.25V59.25C165 59.8023 164.552 60.25 164 60.25H60C59.4477 60.25 59 59.8023 59 59.25V55.25Z" fill="url(#paint15_linear_15199_973)"/>
+<path d="M59 55.25C59 54.1454 59.8954 53.25 61 53.25H163C164.105 53.25 165 54.1454 165 55.25C165 55.25 164.552 55.25 164 55.25H60C59.4477 55.25 59 55.25 59 55.25ZM165 60.25H59H165ZM59 60.25V54.25V60.25ZM165 54.25V60.25V54.25Z" fill="#696969" mask="url(#path-35-inside-7_15199_973)"/>
+<path opacity="0.5" d="M59 57.75C59 57.4739 59.2239 57.25 59.5 57.25H164.5C164.776 57.25 165 57.4739 165 57.75C165 58.0261 164.776 58.25 164.5 58.25H59.5C59.2239 58.25 59 58.0261 59 57.75Z" fill="#7B7B7B"/>
+<mask id="path-38-inside-8_15199_973" fill="white">
+<path d="M59 73.25C59 72.6977 59.4477 72.25 60 72.25H164C164.552 72.25 165 72.6977 165 73.25V77.25C165 77.8023 164.552 78.25 164 78.25H60C59.4477 78.25 59 77.8023 59 77.25V73.25Z"/>
+</mask>
+<path d="M59 73.25C59 72.6977 59.4477 72.25 60 72.25H164C164.552 72.25 165 72.6977 165 73.25V77.25C165 77.8023 164.552 78.25 164 78.25H60C59.4477 78.25 59 77.8023 59 77.25V73.25Z" fill="#D9D9D9"/>
+<path d="M59 73.25C59 72.6977 59.4477 72.25 60 72.25H164C164.552 72.25 165 72.6977 165 73.25V77.25C165 77.8023 164.552 78.25 164 78.25H60C59.4477 78.25 59 77.8023 59 77.25V73.25Z" fill="url(#paint16_linear_15199_973)"/>
+<path d="M59 73.25C59 72.1454 59.8954 71.25 61 71.25H163C164.105 71.25 165 72.1454 165 73.25C165 73.25 164.552 73.25 164 73.25H60C59.4477 73.25 59 73.25 59 73.25ZM165 78.25H59H165ZM59 78.25V72.25V78.25ZM165 72.25V78.25V72.25Z" fill="#696969" mask="url(#path-38-inside-8_15199_973)"/>
+<path opacity="0.5" d="M59 75.75C59 75.4739 59.2239 75.25 59.5 75.25H164.5C164.776 75.25 165 75.4739 165 75.75C165 76.0261 164.776 76.25 164.5 76.25H59.5C59.2239 76.25 59 76.0261 59 75.75Z" fill="#7B7B7B"/>
+<path opacity="0.25" d="M59 54.25H165V102.25L153.404 99.5741C144.075 97.4212 135.746 92.1826 129.765 84.7064C121.697 74.621 109.481 68.75 96.5658 68.75H59V54.25Z" fill="#181818"/>
+<path opacity="0.35" d="M59 54.25H165V78.75L147.24 74.6515C141.769 73.389 136.482 71.4336 131.506 68.8326L131.043 68.5907C121.818 63.7685 111.563 61.25 101.154 61.25C92.5036 61.25 83.9719 63.2641 76.2346 67.1327L59 75.75V54.25Z" fill="#181818"/>
+<rect x="59" y="55.25" width="106" height="46" fill="url(#paint17_linear_15199_973)" fill-opacity="0.4"/>
+<path opacity="0.35" d="M59 107.25C59 106.698 59.4477 106.25 60 106.25H164C164.552 106.25 165 106.698 165 107.25V124.25C165 124.802 164.552 125.25 164 125.25H60C59.4477 125.25 59 124.802 59 124.25V107.25Z" fill="#181818"/>
+<path opacity="0.35" d="M59 107.25C59 106.698 59.4477 106.25 60 106.25H164C164.552 106.25 165 106.698 165 107.25V110.25C165 110.802 164.552 111.25 164 111.25H60C59.4477 111.25 59 110.802 59 110.25V107.25Z" fill="#181818"/>
+<path d="M59 103.25C59 102.698 59.4477 102.25 60 102.25H164C164.552 102.25 165 102.698 165 103.25V108.25C165 108.802 164.552 109.25 164 109.25H60C59.4477 109.25 59 108.802 59 108.25V103.25Z" fill="#585858"/>
+<path d="M63 107.25C63 106.698 63.4477 106.25 64 106.25H164C164.552 106.25 165 106.698 165 107.25V108.25C165 108.802 164.552 109.25 164 109.25H64C63.4477 109.25 63 108.802 63 108.25V107.25Z" fill="#464646"/>
+<g filter="url(#filter7_d_15199_973)">
+<path d="M118.53 81.479C117.077 85.354 118.772 88.9881 121.679 88.9875C127.976 88.9875 137.18 81.479 142.267 81.479C147.353 81.479 150.986 92.863 153.166 93.1052C155.346 93.3474 154.13 85.2405 153.166 81.479C151.905 76.5581 150.502 72.0332 146.384 69.6111C142.267 67.1889 119.983 77.6041 118.53 81.479Z" fill="#4F311A"/>
+</g>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M153.806 92.8596C153.433 92.1463 153.028 91.3008 152.585 90.3763C150.377 85.7679 147.228 79.1968 142.5 77.2501C136.512 74.7842 124.655 80.7979 118.268 86.1388C118.791 87.8365 120.043 88.9878 121.679 88.9875C124.996 88.9875 129.119 86.9048 133.022 84.9332C136.53 83.1613 139.86 81.4791 142.267 81.4791C145.383 81.4791 147.954 85.7512 149.979 89.1169C151.26 91.2454 152.322 93.0114 153.167 93.1052C153.426 93.134 153.637 93.045 153.806 92.8596Z" fill="#351E0C"/>
+<circle opacity="0.25" cx="140" cy="95.25" r="7" fill="#2B2B2B"/>
+<circle cx="139" cy="94.25" r="6" fill="white"/>
+<circle cx="139" cy="94.25" r="6" fill="url(#paint18_linear_15199_973)" fill-opacity="0.2"/>
+<circle cx="139" cy="94.25" r="6" fill="url(#paint19_radial_15199_973)" fill-opacity="0.6"/>
+<circle cx="139" cy="94.25" r="3" fill="black"/>
+<circle cx="141.926" cy="92.9404" r="2" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M165.427 79.3757C169.002 75.692 171 71.5783 171 67.2387C171 51.4601 144.585 38.6689 112 38.6689C79.4152 38.6689 53 51.4601 53 67.2387C53 71.5784 54.9981 75.692 58.5732 79.3757C60.1478 65.7825 83.4658 54.9941 112 54.9941C140.534 54.9941 163.852 65.7824 165.427 79.3757Z" fill="#405FAD"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M165.427 79.3757C169.002 75.692 171 71.5783 171 67.2387C171 51.4601 144.585 38.6689 112 38.6689C79.4152 38.6689 53 51.4601 53 67.2387C53 71.5784 54.9981 75.692 58.5732 79.3757C60.1478 65.7825 83.4658 54.9941 112 54.9941C140.534 54.9941 163.852 65.7824 165.427 79.3757Z" fill="url(#paint20_radial_15199_973)" fill-opacity="0.75"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M128.738 56.2843C129.07 56.3372 129.401 56.3915 129.731 56.4474C129.801 55.077 129.836 53.6848 129.836 52.2747C129.836 47.9257 129.495 43.747 128.867 39.854C128.522 39.8043 128.177 39.7562 127.83 39.7095C128.48 43.63 128.836 47.8593 128.836 52.2747C128.836 53.6299 128.803 54.9677 128.738 56.2843ZM118.421 38.8367C118.705 43.0156 118.86 47.5445 118.86 52.2747C118.86 53.2603 118.853 54.2371 118.84 55.2039C118.508 55.1834 118.175 55.1644 117.841 55.1469C117.854 54.199 117.86 53.2412 117.86 52.2747C117.86 47.519 117.703 42.9729 117.416 38.7882C117.752 38.803 118.087 38.8192 118.421 38.8367ZM106.584 38.7882C106.248 38.803 105.913 38.8192 105.578 38.8367C105.295 43.0156 105.139 47.5445 105.139 52.2747C105.139 53.2603 105.146 54.2371 105.159 55.2039C105.491 55.1834 105.825 55.1644 106.159 55.1469C106.146 54.199 106.139 53.2412 106.139 52.2747C106.139 47.519 106.297 42.9729 106.584 38.7882ZM95.2608 56.2845C95.1955 54.9678 95.162 53.63 95.162 52.2747C95.162 47.8593 95.5179 43.6301 96.1686 39.7096C95.8217 39.7563 95.476 39.8045 95.1317 39.8541C94.5032 43.7471 94.162 47.9258 94.162 52.2747C94.162 53.6849 94.1979 55.0771 94.2678 56.4476C94.5973 56.3917 94.9284 56.3373 95.2608 56.2845ZM81.8475 59.4858C81.5803 57.5841 81.4412 55.6299 81.4412 53.6351C81.4412 49.6851 81.9866 45.8943 82.992 42.3552C82.6158 42.4583 82.2422 42.5632 81.8712 42.6701C80.942 46.1329 80.4412 49.816 80.4412 53.6351C80.4412 55.7397 80.5933 57.803 80.8853 59.8109C81.2035 59.7009 81.5242 59.5925 81.8475 59.4858ZM69.3439 65.2335C68.2842 62.4025 67.7205 59.4244 67.7205 56.3561C67.7205 53.2978 68.2805 50.3291 69.3336 47.5064C68.8934 47.7295 68.4605 47.9561 68.0353 48.186C67.1762 50.8032 66.7205 53.5397 66.7205 56.3561C66.7205 59.631 67.3367 62.7978 68.4867 65.7947C68.7673 65.6057 69.0531 65.4186 69.3439 65.2335ZM58.2435 55.4476C57.2582 57.5033 56.7441 59.6317 56.7441 61.798C56.7441 65.5901 58.3195 69.266 61.2395 72.6394C61.0403 72.9272 60.8513 73.2172 60.6726 73.5094C57.506 69.9355 55.7441 65.9713 55.7441 61.798C55.7441 60.4453 55.9293 59.1145 56.2874 57.8118C56.8683 57.0067 57.5216 56.218 58.2435 55.4476ZM167.713 57.813C167.132 57.0079 166.479 56.2192 165.757 55.4488C166.742 57.5041 167.256 59.6321 167.256 61.798C167.256 65.5902 165.68 69.2662 162.76 72.6397C162.959 72.9275 163.148 73.2175 163.327 73.5097C166.494 69.9357 168.256 65.9714 168.256 61.798C168.256 60.4457 168.071 59.1153 167.713 57.813ZM155.512 65.7945C156.662 62.7977 157.279 59.6309 157.279 56.3561C157.279 53.5396 156.823 50.803 155.964 48.1858C155.538 47.9559 155.106 47.7293 154.665 47.5062C155.719 50.329 156.279 53.2977 156.279 56.3561C156.279 59.4243 155.715 62.4023 154.655 65.2333C154.946 65.4184 155.232 65.6055 155.512 65.7945ZM143.113 59.8107C143.405 57.8029 143.558 55.7397 143.558 53.6351C143.558 49.8159 143.057 46.1328 142.127 42.6699C141.756 42.563 141.383 42.4581 141.007 42.355C142.012 45.8941 142.558 49.685 142.558 53.6351C142.558 55.6298 142.418 57.584 142.151 59.4856C142.475 59.5923 142.795 59.7007 143.113 59.8107Z" fill="#284796"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M169.93 72.6811C168.996 75.0277 167.468 77.2721 165.426 79.3762C163.851 65.7829 140.534 54.9946 111.999 54.9946C83.4651 54.9946 60.1472 65.7829 58.5725 79.3762C56.5305 77.2721 55.0029 75.0277 54.0684 72.6811C59.3158 59.5052 83.2575 49.5532 111.999 49.5532C140.741 49.5532 164.683 59.5052 169.93 72.6811Z" fill="#284796"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M169.317 74.0414C168.381 75.8973 167.071 77.6821 165.427 79.376C163.852 65.7827 140.534 54.9944 112 54.9944C83.4658 54.9944 60.1479 65.7828 58.5732 79.376C56.9292 77.6821 55.6187 75.8973 54.6826 74.0414C60.9847 61.5468 84.2561 52.2739 112 52.2739C139.744 52.2739 163.015 61.5468 169.317 74.0414Z" fill="#143588"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M165.166 54.8357C155.631 45.2688 135.407 38.6685 112.001 38.6685C88.5936 38.6685 68.3703 45.2688 58.835 54.8356C61.8713 30.424 84.5161 11.4595 112.001 11.4595C139.485 11.4595 162.13 30.424 165.166 54.8357Z" fill="#405FAD"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M165.166 54.8357C155.631 45.2688 135.407 38.6685 112.001 38.6685C88.5936 38.6685 68.3703 45.2688 58.835 54.8356C61.8713 30.424 84.5161 11.4595 112.001 11.4595C139.485 11.4595 162.13 30.424 165.166 54.8357Z" fill="url(#paint21_radial_15199_973)" fill-opacity="0.75"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M112.001 38.6689C135.407 38.6689 155.631 45.2693 165.166 54.8361C163.966 45.1869 159.702 36.3888 153.287 29.2765C143.526 26.595 132.247 25.0645 120.232 25.0645C96.1272 25.0645 74.9848 31.2253 63.1174 40.4815C60.9355 44.9522 59.4642 49.7772 58.835 54.836C68.3703 45.2693 88.5936 38.6689 112.001 38.6689Z" fill="#284796"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M112.001 38.6677C135.407 38.6677 155.631 45.2681 165.166 54.8349C164.592 50.2158 163.315 45.7918 161.437 41.6544C150.055 38.0772 135.759 35.9473 120.232 35.9473C93.3205 35.9473 70.1017 42.3464 59.3594 51.5901C59.1461 52.6599 58.9709 53.7419 58.835 54.8348C68.3703 45.268 88.5936 38.6677 112.001 38.6677Z" fill="#143588"/>
+<g filter="url(#filter8_d_15199_973)">
+<path d="M105.857 81.479C107.31 85.354 105.615 88.9881 102.708 88.9875C96.4107 88.9875 87.2065 81.479 82.12 81.479C77.0336 81.479 73.4004 92.863 71.2204 93.1052C69.0405 93.3474 70.2567 85.2405 71.2204 81.479C72.4813 76.5581 73.8848 72.0332 78.0024 69.6111C82.12 67.1889 104.404 77.6041 105.857 81.479Z" fill="#4F311A"/>
+</g>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M70.581 92.8596C70.9534 92.1463 71.3586 91.3008 71.8016 90.3763C74.0097 85.7679 77.1585 79.1968 81.8862 77.2501C87.8747 74.7842 99.7317 80.7979 106.119 86.1388C105.596 87.8365 104.344 88.9878 102.708 88.9875C99.391 88.9875 95.268 86.9048 91.365 84.9332C87.8572 83.1613 84.5271 81.4791 82.1195 81.4791C79.0036 81.4791 76.433 85.7512 74.4078 89.1169C73.1271 91.2454 72.0645 93.0114 71.2199 93.1052C70.9611 93.134 70.7501 93.045 70.581 92.8596Z" fill="#351E0C"/>
+<circle opacity="0.25" cx="7" cy="7" r="7" transform="matrix(-1 0 0 1 93 88.25)" fill="#2B2B2B"/>
+<circle cx="6" cy="6" r="6" transform="matrix(-1 0 0 1 91.3867 88.25)" fill="white"/>
+<circle cx="6" cy="6" r="6" transform="matrix(-1 0 0 1 91.3867 88.25)" fill="url(#paint22_linear_15199_973)" fill-opacity="0.2"/>
+<circle cx="6" cy="6" r="6" transform="matrix(-1 0 0 1 91.3867 88.25)" fill="url(#paint23_radial_15199_973)" fill-opacity="0.6"/>
+<circle cx="3" cy="3" r="3" transform="matrix(-1 0 0 1 88.3867 91.25)" fill="black"/>
+<circle cx="2" cy="2" r="2" transform="matrix(-1 0 0 1 90 90.9404)" fill="white"/>
+<path d="M188.172 184.024C189.7 184.788 193.159 184.342 194.698 184.024C193.582 184.695 190.851 186.001 188.85 185.852C186.85 185.704 181.516 181.07 179.099 178.771C181.964 179.089 186.262 183.069 188.172 184.024Z" fill="#9E715D"/>
+<path d="M170.417 188.353C173.826 189.317 182.274 190.978 186.071 191.688C183.293 192.615 169.768 191.04 166.063 189.65C163.099 188.539 153.589 185.852 149.204 184.648C152.909 185.272 166.156 187.149 170.417 188.353Z" fill="#9E715D"/>
+<path d="M66.2199 157.108C59.1176 158.167 51.9778 159.948 51.9778 159.948C51.5671 159.674 50.4994 159.012 49.5138 158.552C48.7725 158.206 48.2989 158.187 47.5024 158.155C46.9752 158.134 46.3065 158.108 45.3251 157.977C42.8611 157.648 42.3683 157.073 42.3683 155.759C42.3683 154.708 44.3395 153.733 45.3251 153.378C44.7002 153.456 43.6064 153.552 42.5259 153.559L42.3962 153.921C41.7672 154.137 40.726 154.397 39.4481 154.717C36.3754 155.487 31.9351 156.598 28.5716 158.242C23.7754 160.587 19.5881 165.763 17.6689 168.994L17.2085 170.405C17.1201 172.244 17.1998 176.435 18.2254 178.487C17.9202 181.845 17.4928 189.293 18.2254 192.223C18.3313 192.647 18.4397 193.107 18.5539 193.592C19.4272 197.303 20.6426 202.466 23.7201 203.762C24.6616 204.159 25.6835 204.823 26.8222 205.564C29.8922 207.56 33.8106 210.108 39.2883 209.44C43.0357 208.983 46.099 207.979 48.8877 207.064C51.6873 206.146 54.2103 205.319 56.8712 205.227C62.1827 205.044 72.8057 201.198 79.7656 197.535C82.2052 196.251 87.6602 192.874 93.9221 188.998C105.525 181.816 119.897 172.918 122.99 172.443C125.687 172.028 128.207 172.905 130.618 173.744C132.464 174.387 134.246 175.007 135.994 175.007C137.964 175.007 140.284 174.296 143.276 173.379C146.403 172.42 150.264 171.236 155.225 170.405C156.596 170.176 157.825 169.975 158.924 169.795C165.61 168.702 167.523 168.389 167.68 167.131C167.697 166.998 167.718 166.85 167.741 166.689C167.971 165.08 168.379 162.219 166.215 160.721C163.834 159.072 148.449 150.83 144.969 150.83C143.749 150.83 142.596 150.943 141.503 151.05C139.479 151.248 137.659 151.425 135.994 150.83C135.392 150.616 134.912 150.38 134.448 150.153C132.935 149.414 131.602 148.762 126.836 149.182C124.174 149.417 118.128 150.523 111.55 151.726C102.745 153.336 92.9854 155.122 89.1065 155.226C86.9635 155.284 73.3222 156.049 66.2199 157.108Z" fill="#4F311A"/>
+<path d="M91.6767 190.385L91.6709 190.393C100.157 192.407 118.961 197.023 126.287 199.367C130.42 200.69 134.182 202.463 137.886 204.208C142.39 206.33 146.807 208.411 151.696 209.591C157.462 210.983 165.271 211.456 170.611 211.456C173.818 211.456 177.792 211.678 181.394 211.879C184.379 212.046 187.109 212.199 188.935 212.199C192.159 212.199 194.616 209.531 195.226 208.249C195.402 208.179 195.626 208.097 195.885 208.003C196.977 207.607 198.683 206.988 199.908 206.055C201.956 204.494 203.444 198.951 203.077 196.204C202.905 194.911 203.424 192.406 203.971 189.765C204.586 186.793 205.237 183.648 204.979 181.867C204.797 180.607 205.633 178.685 206.477 176.747C207.458 174.496 208.447 172.223 207.856 170.943C206.757 168.562 195.53 153.839 180.694 151.824C168.826 150.212 161.697 154.677 160.354 157.241L160.14 157.272C163.029 158.799 165.394 160.15 166.215 160.718C168.38 162.217 167.971 165.078 167.741 166.686C167.718 166.847 167.697 166.996 167.68 167.129C167.523 168.387 165.61 168.7 158.925 169.793C157.825 169.972 156.597 170.173 155.226 170.403C150.264 171.234 146.403 172.417 143.276 173.376C140.285 174.293 137.964 175.004 135.994 175.004C134.247 175.004 132.464 174.384 130.618 173.741C128.207 172.903 125.687 172.025 122.99 172.44C119.898 172.916 105.525 181.813 93.9225 188.995C93.1606 189.467 92.4107 189.931 91.6767 190.385Z" fill="#4F311A"/>
+<path d="M167.456 193.771C172.199 194.395 184.93 194.031 190.702 193.771L187.867 197.061C183.54 197.135 173.4 197.239 167.456 197.061C161.512 196.884 141.455 191.049 132.17 188.154H139.374C144.834 188.154 161.528 192.99 167.456 193.771Z" fill="#A4805F" fill-opacity="0.5"/>
+<path d="M181.646 172.086C190.05 173.614 193.106 177.392 193.583 179.09C189.286 182.273 184.988 175.906 180.054 174.633C175.12 173.359 162.386 175.747 159.839 175.906C157.802 176.034 149.652 175.11 145.832 174.633C148.644 174.155 154.714 173.264 156.496 173.519C158.725 173.837 171.14 170.176 181.646 172.086Z" fill="#A4805F" fill-opacity="0.5"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M159.763 156.967C159.409 155.932 160.203 151.768 161.052 149.766C161.901 147.765 165.348 144.208 165.348 144.208C165.348 144.208 165.053 140.371 163.469 136.002C162.065 132.13 161.177 127.142 161.632 124.492C162.365 120.228 162.509 116.25 162.509 116.25C164.946 117.02 168.495 118.028 170.457 118.586C171.125 118.775 171.609 118.913 171.802 118.971C171.971 119.022 172.582 119.129 173.492 119.29C177.703 120.034 188.326 121.909 191.223 124.492C194.745 127.634 198.759 135.834 199.79 138.01C200.874 140.298 203.997 147.697 204.566 149.178C204.62 149.318 204.744 149.608 204.917 150.013C205.877 152.256 208.346 158.026 208.738 161.352C209.059 164.081 209.31 170.187 208.072 171.52C208.059 171.534 208.041 171.546 208.017 171.556C207.993 171.334 207.941 171.129 207.856 170.945C206.757 168.564 195.529 153.841 180.694 151.826C168.924 150.227 161.816 154.604 160.389 157.178C160.177 157.107 159.969 157.037 159.763 156.967Z" fill="#4F311A"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M61.6666 119.303C61.6304 119.308 61.594 119.314 61.5576 119.319C59.0909 119.692 56.245 120.121 53.8603 120.121C49.2962 119.839 39.6096 121.715 35.0118 125.636C29.2646 130.539 17.3784 150.85 17.2094 157.274C17.1856 158.178 17.1579 159.088 17.1307 159.985C17.0031 164.182 16.8844 168.09 17.2094 169.808C18.8434 166.709 23.3462 160.794 28.5717 158.24C31.9352 156.595 36.3755 155.484 39.4482 154.714C40.726 154.394 41.7673 154.134 42.3963 153.918C46.7162 153.918 55.0371 153.513 59.9733 152.053C59.977 151.791 59.9808 151.527 59.9845 151.262C60.1085 142.532 60.2557 132.166 61.6632 125.41C62.0977 123.324 62.0449 121.297 61.6666 119.303Z" fill="#4F311A"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M167.852 118.691C171.913 120.414 180.849 124.673 184.098 127.922C186.673 130.497 188.654 134.26 190.419 137.611C191.437 139.544 192.383 141.34 193.328 142.691C195.879 146.335 197.359 154.234 195.443 158.078C201.212 162.189 205.39 167.188 207.096 169.687C207.549 167.227 207.732 163.599 206.535 160.117C204.481 154.141 193.042 126.052 187.437 124.657C183.512 123.68 177.206 121.668 172.036 120.019C170.512 119.533 169.088 119.078 167.852 118.691Z" fill="#442711"/>
+<path d="M161.051 149.764C160.202 151.765 159.341 156.147 159.695 157.183L160.319 157.394C160.935 156.281 162.625 154.791 165.295 153.587C164.972 152.638 164.641 151.633 164.374 150.755C163.753 148.715 164.779 145.632 165.297 144.301C165.814 142.971 165.122 142.044 165.115 142.036C164.618 142.556 161.828 147.933 161.051 149.764Z" fill="#442711"/>
+<path d="M30.1964 144.735C29.356 142.424 34.7478 131.343 37.5487 126.092C37.5487 125.823 35.2117 126.99 32.239 130.547C29.3027 134.059 23.7963 146.183 22.0918 152.785C24.4549 148.945 31.1069 148.163 33.2573 148.313C32.5871 148.083 31.0367 147.046 30.1964 144.735Z" fill="#442711"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M163.984 168.925L167.435 167.633C165.808 166.59 161.378 164.505 156.673 164.505C151.968 164.505 142.2 165.172 137.903 165.506C138.946 164.547 140.907 162.402 140.406 161.501C139.906 160.6 138.529 161.126 137.903 161.501C117.507 170.052 75.4869 187.429 70.5817 188.53C67.3451 189.257 62.958 191.796 59.0951 194.032C55.6398 196.033 52.604 197.79 51.186 197.79C50.333 197.79 48.9954 197.851 47.46 197.92C43.5897 198.095 38.4624 198.328 36.6706 197.79C34.6684 197.189 36.3369 195.871 37.4214 195.287C35.878 194.37 32.5161 192.434 31.4149 192.034C30.3138 191.633 31.4149 188.53 53.4274 183.109C28.409 188.384 31.2364 179.76 32.6753 175.371C32.7153 175.249 32.7542 175.131 32.7914 175.016C33.8926 171.612 39.0064 168.092 41.4256 166.757C40.8 166.924 37.6216 168.083 29.9134 171.387C22.428 174.595 18.8209 181.446 17.8547 184.742C17.7701 187.647 17.823 190.614 18.2248 192.221C18.3307 192.645 18.439 193.105 18.5532 193.59L18.5532 193.59C19.4266 197.301 20.642 202.464 23.7195 203.76C24.661 204.157 25.6829 204.821 26.8216 205.562C29.8916 207.558 33.81 210.106 39.2877 209.438C43.0351 208.981 46.0984 207.977 48.8871 207.062C51.6867 206.144 54.2097 205.317 56.8706 205.225C62.1821 205.042 72.8051 201.196 79.765 197.533C82.2046 196.249 87.6596 192.872 93.9214 188.996C105.524 181.814 119.897 172.916 122.99 172.441C125.686 172.026 128.206 172.903 130.617 173.742C132.464 174.385 134.246 175.005 135.994 175.005C137.964 175.005 140.284 174.294 143.275 173.377C146.403 172.418 150.264 171.234 155.225 170.403C156.596 170.174 157.824 169.973 158.924 169.793C161.069 169.443 162.722 169.172 163.984 168.925Z" fill="#442711"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M91.6709 190.392L91.6767 190.384C92.4004 189.936 93.1395 189.479 93.8903 189.014L93.9225 188.994C105.525 181.812 119.898 172.915 122.99 172.439C125.143 172.108 127.183 172.6 129.145 173.239C127.143 173.503 124.401 173.961 122.085 174.623C118.795 175.563 106.611 183.731 100.931 187.697C105.877 187.942 117.032 188.52 122.085 188.873C125.336 189.099 132.476 191.038 140.244 193.146C147.571 195.136 155.457 197.276 161.162 198.275C168.836 199.618 177.513 198.831 182.611 198.368C185.319 198.123 187.017 197.969 187.017 198.275C187.017 198.98 185.156 200.331 184.226 200.919C185.488 201.378 196.566 201.688 202.33 201.793C201.748 203.632 200.893 205.303 199.908 206.053C198.683 206.987 196.977 207.606 195.885 208.002L195.884 208.003C195.625 208.096 195.401 208.178 195.226 208.248C194.616 209.53 192.159 212.198 188.935 212.198C187.109 212.198 184.38 212.045 181.394 211.878L181.394 211.878L181.394 211.878C177.792 211.677 173.818 211.454 170.611 211.454C165.271 211.454 157.462 210.982 151.696 209.59C146.807 208.41 142.39 206.329 137.886 204.206L137.886 204.206C134.182 202.461 130.42 200.688 126.287 199.366C118.961 197.022 100.157 192.406 91.6709 190.392Z" fill="#442711"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M51.9778 159.946C51.9778 159.946 59.4837 157.134 66.456 156.419C73.4283 155.705 86.9635 155.282 89.1065 155.224C92.9854 155.12 102.745 153.334 111.55 151.724C114.812 151.127 117.943 150.555 120.596 150.1L127.549 149.38C119.292 152.286 101.248 158.494 95.1311 160.084C88.8094 161.728 71.1979 164.94 63.4723 166.348C61.8541 166.644 60.6697 166.86 60.1135 166.966C63.6122 164.894 70.6451 160.951 73.3261 160.207C62.502 162.108 40.6472 166.354 34.4237 169.106C27.5326 172.154 20.0673 179.337 17.9001 183.488C17.9814 181.549 18.1119 179.734 18.2254 178.485C17.1998 176.433 17.1201 172.242 17.2085 170.403L17.6689 168.992C19.5881 165.761 23.7754 160.585 28.5716 158.24C29.1782 157.944 29.8198 157.665 30.482 157.402C29.993 159.968 29.4439 163.347 29.5533 164.725V166.966C30.0267 165.905 31.126 163.461 31.7363 162.173C32.195 161.205 32.5228 158.628 32.7053 156.597C35.0897 155.806 37.5342 155.194 39.4481 154.715C40.726 154.395 41.7672 154.135 42.3962 153.919L42.5259 153.557C43.6064 153.55 44.7002 153.454 45.3251 153.376C44.3395 153.731 42.3683 154.706 42.3683 155.757C42.3683 157.071 42.8611 157.646 45.3251 157.975C46.3065 158.106 46.9752 158.132 47.5024 158.153C48.2989 158.185 48.7725 158.204 49.5138 158.55C50.4994 159.01 51.5671 159.672 51.9778 159.946Z" fill="#A4805F" fill-opacity="0.5"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M82.1236 155.248C81.3622 153.445 79.2865 149.573 77.0746 148.516C76.1831 148.09 75.4791 147.801 74.8941 147.561C73.6645 147.056 72.9603 146.767 72.1457 145.871C71.7897 145.48 71.3915 144.856 70.9449 144.157C69.8834 142.495 68.5484 140.404 66.8562 139.981C65.2341 139.575 62.5722 139.284 60.2895 139.034C59.1885 138.914 58.1758 138.803 57.4104 138.694C55.0581 138.358 47.7993 138.963 47.1272 139.232C46.5895 139.447 46.9032 139.821 47.1272 139.981C45.322 139.732 40.566 139.167 40.0375 140.74C39.6342 141.94 40.3713 142.298 41.2189 142.698C39.9322 142.725 37.0795 142.879 35.9625 143.273C34.5662 143.766 31.6094 145.408 32.4308 146.722C32.5254 146.874 32.6113 147.013 32.6907 147.142C33.3008 148.132 33.5299 148.504 34.4019 148.94C34.0734 149.652 33.7449 151.24 35.059 151.897C36.306 152.52 37.6951 152.812 39.0465 153.097C39.4752 153.187 39.9001 153.276 40.3154 153.375C40.9076 153.516 41.7127 153.561 42.5253 153.556L42.5262 153.554C43.6066 153.547 44.7004 153.451 45.3253 153.373C45.322 153.374 45.3187 153.375 45.3154 153.376C45.3187 153.376 45.3221 153.376 45.3255 153.375C44.3399 153.731 42.3687 154.706 42.3687 155.757C42.3687 155.835 42.3705 155.91 42.3742 155.983C42.4347 157.137 43.009 157.663 45.3253 157.972C46.3068 158.103 46.9755 158.13 47.5027 158.151C48.2991 158.182 48.7728 158.201 49.5141 158.547C50.4997 159.007 51.5674 159.67 51.978 159.943C51.978 159.943 59.484 157.132 66.4562 156.417C70.1037 156.043 75.5472 155.749 80.2162 155.545L82.1236 155.248Z" fill="#4F311A"/>
+<path d="M34.5215 151.489C34.6582 151.646 34.8346 151.785 35.0587 151.897C36.3058 152.521 37.6949 152.813 39.0463 153.097C39.4749 153.187 39.8998 153.277 40.3152 153.375C40.9076 153.516 41.7131 153.562 42.5261 153.556L42.5723 153.556C43.6376 153.547 44.7092 153.452 45.3252 153.375C45.3005 153.384 45.2752 153.394 45.2494 153.403C47.0079 153.086 48.9344 152.793 51.485 153.057C53.5258 153.268 55.813 153.969 57.9527 154.625C59.3651 155.057 60.7132 155.47 61.8838 155.71C60.9805 154.773 58.5715 152.799 56.1628 152.398C53.1519 151.896 46.4273 151.695 45.0222 151.695C44.3821 151.695 42.8881 151.528 41.2612 151.347C39.3167 151.13 37.1825 150.892 36.0895 150.892C34.836 150.892 34.5202 151.218 34.5215 151.489Z" fill="#442711"/>
+<path d="M54.4853 159.093C53.7757 158.341 51.9403 156.888 49.9658 156.796C48.1044 156.709 46.4355 156.751 45.3395 156.778C44.9567 156.788 44.6438 156.796 44.417 156.796C43.7714 156.796 42.8451 156.168 42.3682 155.779C42.3737 157.078 42.8748 157.648 45.3249 157.975C46.3063 158.106 46.975 158.132 47.5022 158.153C48.2986 158.185 48.7723 158.204 49.5136 158.55C50.4992 159.01 51.5669 159.672 51.9776 159.946C51.9776 159.946 52.9357 159.587 54.4853 159.093Z" fill="#442711"/>
+<path d="M53.996 138.647C54.4791 138.998 55.3002 139.793 54.7206 140.162C54.2963 140.432 53.3074 140.476 52.0448 140.532C51.151 140.572 50.1202 140.618 49.0553 140.755C46.7907 141.045 46.9322 141.456 46.9322 141.456C46.9322 141.456 46.6289 141.54 46.5635 141.54C46.1435 141.54 44.6845 141.707 43.5265 141.456C43.1373 141.372 42.8246 141.304 42.6799 141.285C42.6637 141.283 42.6456 141.28 42.6257 141.278C42.1911 141.22 40.9009 141.049 40.0117 140.818C40.0195 140.792 40.0277 140.766 40.0366 140.74C40.5651 139.167 45.3211 139.733 47.1263 139.981C46.9023 139.821 46.5886 139.447 47.1263 139.232C47.5789 139.051 51.0178 138.717 53.9343 138.621C53.9563 138.63 53.9768 138.638 53.996 138.647Z" fill="#A4805F" fill-opacity="0.5"/>
+<path d="M32.4404 145.696C33.4034 145.941 34.4305 146.11 35.063 146.15C36.1828 146.223 37.6831 145.895 39.2232 145.559C40.6068 145.257 42.0225 144.949 43.2231 144.916C45.2528 144.861 52.663 144.893 56.1144 144.916C56.3658 144.848 57.7968 141.993 55.2901 142.23C54.8929 142.268 54.4574 142.31 53.9949 142.355C50.8108 142.663 45.8106 143.386 43.703 143.339C42.816 143.318 42.0534 143.215 41.2568 143.108C40.4435 142.998 39.5947 142.883 38.5418 142.847C37.5228 142.938 36.5231 143.075 35.9618 143.273C34.9155 143.642 32.9928 144.657 32.4404 145.696Z" fill="#A4805F" fill-opacity="0.5"/>
+<path d="M34.1279 149.927C34.4123 150.156 35.2295 150.264 36.8466 150.264C38.3472 150.264 39.4569 150.003 40.6024 149.734C41.6554 149.486 42.7387 149.232 44.1838 149.166C46.3344 149.068 47.9276 149.458 49.4849 149.84C50.1123 149.993 50.7338 150.145 51.3837 150.264C53.6466 150.676 57.2123 150.332 57.8979 150.264C58.4465 150.209 58.628 148.069 57.8979 148.069H50.6295C49.8288 148.069 48.9643 147.978 47.9292 147.868C46.1275 147.678 43.8093 147.433 40.4124 147.521C35.5787 147.644 35.0573 148.272 34.4956 148.949C34.4357 149.021 34.3755 149.094 34.3094 149.166C34.3093 149.166 34.3096 149.166 34.3094 149.166C34.2301 149.384 34.1605 149.648 34.1279 149.927Z" fill="#A4805F" fill-opacity="0.5"/>
+<path d="M42.4355 155.412C43.3887 155.577 45.1623 155.422 46.4457 154.994C47.8857 154.514 50.9714 154.24 52.2743 154.377C53.5771 154.514 55.8399 154.446 54.4685 153.623C52.8914 153.188 49.0789 152.416 46.4457 152.799C45.4626 152.943 44.6079 153.202 43.9147 153.503C44.4755 153.467 44.9738 153.418 45.3245 153.374C44.4475 153.691 42.7901 154.497 42.4355 155.412Z" fill="#A4805F" fill-opacity="0.5"/>
+<path d="M60.4859 184.896C56.1118 185.956 40.9905 189.314 33.9766 190.861C38.5052 191.634 51.0419 192.352 64.9594 189.038C78.8769 185.725 105.552 172.967 117.15 167.002C100.084 172.525 64.86 183.836 60.4859 184.896Z" fill="#A4805F" fill-opacity="0.5"/>
+<path d="M177.293 166.175V156.897C181.269 155.837 182.595 156.456 182.761 156.897V166.175H177.293Z" fill="#A4805F" fill-opacity="0.5"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M170.892 151.863V166.551L177.327 168.105L167.608 167.411C167.644 167.321 167.668 167.227 167.68 167.127C167.697 166.994 167.718 166.845 167.741 166.684C167.971 165.076 168.38 162.215 166.215 160.716C165.395 160.148 163.03 158.797 160.14 157.27L160.354 157.239C161.273 155.486 164.897 152.843 170.892 151.863Z" fill="#442711"/>
+<path opacity="0.25" fill-rule="evenodd" clip-rule="evenodd" d="M56.0038 122.435C73.6147 126.445 120.449 132.06 166.9 122.435V119.296C168.818 121.737 171.503 127.456 166.9 130.804C160.271 132.072 150.342 133.508 138.553 134.53C139.894 139.825 140.103 144.979 139.962 147.787C139.949 148.05 139.731 148.25 139.469 148.25H125.307C124.923 148.25 124.664 147.826 124.775 147.458C125.537 144.935 124.925 140.058 123.985 135.502C102.697 136.498 77.9399 135.779 56.0038 130.804C53.7371 129.758 50.5636 125.783 56.0038 118.25V122.435Z" fill="#242424"/>
+<path d="M165 119.25C120.6 128.45 75.8334 123.083 59.0001 119.25V115.25C53.8001 122.45 56.8334 126.25 59.0001 127.25C97.8001 136.05 145.833 130.917 165 127.25C169.4 124.05 166.833 118.583 165 116.25V119.25Z" fill="#143588"/>
+<path d="M165 116.25C120.6 125.45 75.8334 120.083 59.0001 116.25V112.25C53.8001 119.45 56.8334 123.25 59.0001 124.25C97.8001 133.05 145.833 127.917 165 124.25C169.4 121.05 166.833 115.583 165 113.25V116.25Z" fill="#405FAD"/>
+<path d="M137.146 146.104L137.754 145.496C137.902 145.348 137.942 145.124 137.855 144.934L127.404 122.132C127.242 121.777 126.741 121.769 126.566 122.118C126.523 122.204 126.507 122.296 126.521 122.391C127.271 127.517 127.173 140.667 127.017 145.734C127.008 146.017 127.235 146.25 127.518 146.25H136.793C136.926 146.25 137.053 146.197 137.146 146.104Z" fill="#143588"/>
+<path d="M128.654 144.602C129.511 140.069 128.044 127.878 127.087 121.795C127.041 121.502 127.257 121.235 127.553 121.217L135.095 120.774C135.331 120.76 135.544 120.912 135.605 121.141C137.829 129.578 138.144 140.067 138.015 144.77C138.008 145.039 137.787 145.25 137.518 145.25H129.172C128.837 145.25 128.592 144.931 128.654 144.602Z" fill="#405FAD"/>
+<g filter="url(#filter9_f_15199_973)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M57.7797 38.9237C57.7797 38.598 58.0437 38.334 58.3694 38.334C58.695 38.334 58.9591 38.598 58.9591 38.9237V40.9521L60.1436 38.9003C60.2522 38.7123 60.4926 38.6479 60.6807 38.7564C60.8687 38.865 60.9331 39.1054 60.8246 39.2935L58.9591 42.5246V45.0316L61.5482 43.5368L63.3168 40.4734C63.4254 40.2854 63.6658 40.221 63.8539 40.3295C64.0419 40.4381 64.1063 40.6785 63.9978 40.8665L62.9101 42.7505L64.4961 41.8348C64.7781 41.672 65.1388 41.7686 65.3016 42.0507C65.4645 42.3327 65.3678 42.6934 65.0858 42.8562L63.3852 43.838L65.6525 43.838C65.8696 43.838 66.0456 44.014 66.0456 44.2312C66.0456 44.4483 65.8696 44.6243 65.6525 44.6243L62.0234 44.6243L59.7961 45.9102L62.3855 47.4052H65.9236C66.1407 47.4052 66.3168 47.5812 66.3168 47.7983C66.3168 48.0155 66.1407 48.1915 65.9236 48.1915H63.7473L65.3341 49.1076C65.6161 49.2704 65.7128 49.6311 65.5499 49.9131C65.3871 50.1952 65.0264 50.2918 64.7444 50.129L62.7608 48.9837L63.9701 51.0783C64.0786 51.2663 64.0142 51.5067 63.8262 51.6153C63.6381 51.7239 63.3977 51.6594 63.2891 51.4714L61.3989 48.1975L58.9591 46.7888V49.9095L60.885 53.2454C60.9936 53.4334 60.9292 53.6739 60.7411 53.7824C60.5531 53.891 60.3127 53.8266 60.2041 53.6385L58.9591 51.482V53.4697C58.9591 53.7954 58.695 54.0594 58.3694 54.0594C58.0437 54.0594 57.7797 53.7954 57.7797 53.4697V51.724L56.6912 53.6093C56.5826 53.7974 56.3422 53.8618 56.1541 53.7532C55.9661 53.6447 55.9017 53.4042 56.0102 53.2162L57.7797 50.1515V47.0744L55.6678 48.2937L53.5455 51.9696C53.437 52.1576 53.1965 52.2221 53.0085 52.1135C52.8205 52.0049 52.756 51.7645 52.8646 51.5765L54.306 49.0799L52.4886 50.1292C52.2065 50.2921 51.8459 50.1954 51.683 49.9134C51.5202 49.6313 51.6168 49.2707 51.8989 49.1078L53.41 48.2354H51.2334C51.0163 48.2354 50.8403 48.0594 50.8403 47.8422C50.8403 47.6251 51.0163 47.4491 51.2334 47.4491H54.7719L57.4373 45.9102L55.2092 44.6239H51.0963C50.8791 44.6239 50.7031 44.4478 50.7031 44.2307C50.7031 44.0136 50.8791 43.8376 51.0963 43.8376L53.8474 43.8376L52.1472 42.856C51.8651 42.6931 51.7685 42.3325 51.9313 42.0504C52.0942 41.7684 52.4548 41.6717 52.7369 41.8346L54.248 42.707L53.1599 40.8224C53.0514 40.6344 53.1158 40.394 53.3038 40.2854C53.4919 40.1769 53.7323 40.2413 53.8409 40.4293L55.6099 43.4933L57.7797 44.746V42.3287L56.0103 39.264C55.9017 39.076 55.9661 38.8355 56.1542 38.727C56.3422 38.6184 56.5826 38.6828 56.6912 38.8709L57.7797 40.7561V38.9237Z" fill="url(#paint24_linear_15199_973)"/>
+</g>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M57.7797 38.9237C57.7797 38.598 58.0437 38.334 58.3694 38.334C58.695 38.334 58.9591 38.598 58.9591 38.9237V40.9521L60.1436 38.9003C60.2522 38.7123 60.4926 38.6479 60.6807 38.7564C60.8687 38.865 60.9331 39.1054 60.8246 39.2935L58.9591 42.5246V45.0316L61.5482 43.5368L63.3168 40.4734C63.4254 40.2854 63.6658 40.221 63.8539 40.3295C64.0419 40.4381 64.1063 40.6785 63.9978 40.8665L62.9101 42.7505L64.4961 41.8348C64.7781 41.672 65.1388 41.7686 65.3016 42.0507C65.4645 42.3327 65.3678 42.6934 65.0858 42.8562L63.3852 43.838L65.6525 43.838C65.8696 43.838 66.0456 44.014 66.0456 44.2312C66.0456 44.4483 65.8696 44.6243 65.6525 44.6243L62.0234 44.6243L59.7961 45.9102L62.3855 47.4052H65.9236C66.1407 47.4052 66.3168 47.5812 66.3168 47.7983C66.3168 48.0155 66.1407 48.1915 65.9236 48.1915H63.7473L65.3341 49.1076C65.6161 49.2704 65.7128 49.6311 65.5499 49.9131C65.3871 50.1952 65.0264 50.2918 64.7444 50.129L62.7608 48.9837L63.9701 51.0783C64.0786 51.2663 64.0142 51.5067 63.8262 51.6153C63.6381 51.7239 63.3977 51.6594 63.2891 51.4714L61.3989 48.1975L58.9591 46.7888V49.9095L60.885 53.2454C60.9936 53.4334 60.9292 53.6739 60.7411 53.7824C60.5531 53.891 60.3127 53.8266 60.2041 53.6385L58.9591 51.482V53.4697C58.9591 53.7954 58.695 54.0594 58.3694 54.0594C58.0437 54.0594 57.7797 53.7954 57.7797 53.4697V51.724L56.6912 53.6093C56.5826 53.7974 56.3422 53.8618 56.1541 53.7532C55.9661 53.6447 55.9017 53.4042 56.0102 53.2162L57.7797 50.1515V47.0744L55.6678 48.2937L53.5455 51.9696C53.437 52.1576 53.1965 52.2221 53.0085 52.1135C52.8205 52.0049 52.756 51.7645 52.8646 51.5765L54.306 49.0799L52.4886 50.1292C52.2065 50.2921 51.8459 50.1954 51.683 49.9134C51.5202 49.6313 51.6168 49.2707 51.8989 49.1078L53.41 48.2354H51.2334C51.0163 48.2354 50.8403 48.0594 50.8403 47.8422C50.8403 47.6251 51.0163 47.4491 51.2334 47.4491H54.7719L57.4373 45.9102L55.2092 44.6239H51.0963C50.8791 44.6239 50.7031 44.4478 50.7031 44.2307C50.7031 44.0136 50.8791 43.8376 51.0963 43.8376L53.8474 43.8376L52.1472 42.856C51.8651 42.6931 51.7685 42.3325 51.9313 42.0504C52.0942 41.7684 52.4548 41.6717 52.7369 41.8346L54.248 42.707L53.1599 40.8224C53.0514 40.6344 53.1158 40.394 53.3038 40.2854C53.4919 40.1769 53.7323 40.2413 53.8409 40.4293L55.6099 43.4933L57.7797 44.746V42.3287L56.0103 39.264C55.9017 39.076 55.9661 38.8355 56.1542 38.727C56.3422 38.6184 56.5826 38.6828 56.6912 38.8709L57.7797 40.7561V38.9237Z" fill="url(#paint25_linear_15199_973)"/>
+<g filter="url(#filter10_f_15199_973)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M194.183 118.04C194.183 117.715 194.447 117.451 194.773 117.451C195.098 117.451 195.362 117.715 195.362 118.04V120.069L196.547 118.017C196.656 117.829 196.896 117.765 197.084 117.873C197.272 117.982 197.336 118.222 197.228 118.41L195.362 121.641V124.149L197.952 122.654L199.72 119.59C199.829 119.402 200.069 119.338 200.257 119.447C200.445 119.555 200.51 119.796 200.401 119.984L199.314 121.868L200.9 120.952C201.182 120.789 201.542 120.886 201.705 121.168C201.868 121.45 201.771 121.81 201.489 121.973L199.789 122.955L202.056 122.955C202.273 122.955 202.449 123.131 202.449 123.348C202.449 123.565 202.273 123.741 202.056 123.741L198.427 123.741L196.2 125.027L198.789 126.522H202.327C202.544 126.522 202.72 126.698 202.72 126.915C202.72 127.132 202.544 127.308 202.327 127.308H200.151L201.737 128.224C202.019 128.387 202.116 128.748 201.953 129.03C201.79 129.312 201.43 129.409 201.148 129.246L199.164 128.1L200.373 130.195C200.482 130.383 200.418 130.623 200.229 130.732C200.041 130.841 199.801 130.776 199.692 130.588L197.802 127.314L195.362 125.906V129.026L197.288 132.362C197.397 132.55 197.333 132.791 197.144 132.899C196.956 133.008 196.716 132.943 196.607 132.755L195.362 130.599V132.586C195.362 132.912 195.098 133.176 194.773 133.176C194.447 133.176 194.183 132.912 194.183 132.586V130.841L193.094 132.726C192.986 132.914 192.745 132.979 192.557 132.87C192.369 132.761 192.305 132.521 192.414 132.333L194.183 129.268V126.192L192.071 127.411L189.949 131.087C189.841 131.275 189.6 131.339 189.412 131.231C189.224 131.122 189.16 130.882 189.268 130.693L190.71 128.197L188.892 129.246C188.61 129.409 188.249 129.312 188.087 129.03C187.924 128.748 188.02 128.388 188.302 128.225L189.814 127.352H187.637C187.42 127.352 187.244 127.176 187.244 126.959C187.244 126.742 187.42 126.566 187.637 126.566H191.175L193.841 125.027L191.613 123.741H187.5C187.282 123.741 187.106 123.565 187.106 123.347C187.106 123.13 187.282 122.954 187.5 122.954H190.251L188.551 121.973C188.268 121.81 188.172 121.449 188.335 121.167C188.498 120.885 188.858 120.788 189.14 120.951L190.651 121.824L189.563 119.939C189.455 119.751 189.519 119.511 189.707 119.402C189.895 119.294 190.136 119.358 190.244 119.546L192.013 122.61L194.183 123.863V121.445L192.414 118.381C192.305 118.193 192.369 117.952 192.557 117.844C192.746 117.735 192.986 117.8 193.095 117.988L194.183 119.873V118.04Z" fill="url(#paint26_linear_15199_973)"/>
+</g>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M194.183 118.04C194.183 117.715 194.447 117.451 194.773 117.451C195.098 117.451 195.362 117.715 195.362 118.04V120.069L196.547 118.017C196.656 117.829 196.896 117.765 197.084 117.873C197.272 117.982 197.336 118.222 197.228 118.41L195.362 121.641V124.149L197.952 122.654L199.72 119.59C199.829 119.402 200.069 119.338 200.257 119.447C200.445 119.555 200.51 119.796 200.401 119.984L199.314 121.868L200.9 120.952C201.182 120.789 201.542 120.886 201.705 121.168C201.868 121.45 201.771 121.81 201.489 121.973L199.789 122.955L202.056 122.955C202.273 122.955 202.449 123.131 202.449 123.348C202.449 123.565 202.273 123.741 202.056 123.741L198.427 123.741L196.2 125.027L198.789 126.522H202.327C202.544 126.522 202.72 126.698 202.72 126.915C202.72 127.132 202.544 127.308 202.327 127.308H200.151L201.737 128.224C202.019 128.387 202.116 128.748 201.953 129.03C201.79 129.312 201.43 129.409 201.148 129.246L199.164 128.1L200.373 130.195C200.482 130.383 200.418 130.623 200.229 130.732C200.041 130.841 199.801 130.776 199.692 130.588L197.802 127.314L195.362 125.906V129.026L197.288 132.362C197.397 132.55 197.333 132.791 197.144 132.899C196.956 133.008 196.716 132.943 196.607 132.755L195.362 130.599V132.586C195.362 132.912 195.098 133.176 194.773 133.176C194.447 133.176 194.183 132.912 194.183 132.586V130.841L193.094 132.726C192.986 132.914 192.745 132.979 192.557 132.87C192.369 132.761 192.305 132.521 192.414 132.333L194.183 129.268V126.192L192.071 127.411L189.949 131.087C189.841 131.275 189.6 131.339 189.412 131.231C189.224 131.122 189.16 130.882 189.268 130.693L190.71 128.197L188.892 129.246C188.61 129.409 188.249 129.312 188.087 129.03C187.924 128.748 188.02 128.388 188.302 128.225L189.814 127.352H187.637C187.42 127.352 187.244 127.176 187.244 126.959C187.244 126.742 187.42 126.566 187.637 126.566H191.175L193.841 125.027L191.613 123.741H187.5C187.282 123.741 187.106 123.565 187.106 123.347C187.106 123.13 187.282 122.954 187.5 122.954H190.251L188.551 121.973C188.268 121.81 188.172 121.449 188.335 121.167C188.498 120.885 188.858 120.788 189.14 120.951L190.651 121.824L189.563 119.939C189.455 119.751 189.519 119.511 189.707 119.402C189.895 119.294 190.136 119.358 190.244 119.546L192.013 122.61L194.183 123.863V121.445L192.414 118.381C192.305 118.193 192.369 117.952 192.557 117.844C192.746 117.735 192.986 117.8 193.095 117.988L194.183 119.873V118.04Z" fill="url(#paint27_linear_15199_973)"/>
+<g filter="url(#filter11_f_15199_973)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M150.629 13.1009C150.629 12.631 151.01 12.25 151.48 12.25C151.95 12.25 152.331 12.631 152.331 13.1009V16.0286L154.04 13.0675C154.197 12.7962 154.544 12.7032 154.815 12.8599C155.087 13.0165 155.18 13.3635 155.023 13.6348L152.331 18.2977V21.9135L156.067 19.7566L158.618 15.3371C158.775 15.0657 159.122 14.9728 159.393 15.1294C159.665 15.2861 159.758 15.633 159.601 15.9043L158.032 18.622L160.32 17.3011C160.727 17.0661 161.247 17.2056 161.482 17.6126C161.717 18.0195 161.578 18.5399 161.171 18.7749L158.716 20.1919L161.988 20.1919C162.302 20.1919 162.556 20.4458 162.556 20.7591C162.556 21.0724 162.302 21.3264 161.988 21.3264L156.751 21.3264L153.539 23.1813L157.275 25.3384H162.38C162.693 25.3384 162.947 25.5924 162.947 25.9057C162.947 26.219 162.693 26.473 162.38 26.473H159.24L161.529 27.7949C161.936 28.0299 162.076 28.5503 161.841 28.9572C161.606 29.3642 161.086 29.5037 160.679 29.2687L157.817 27.6165L159.561 30.6384C159.718 30.9097 159.625 31.2566 159.354 31.4133C159.083 31.5699 158.736 31.4769 158.579 31.2056L155.852 26.4819L152.331 24.4491V28.9522L155.11 33.7663C155.267 34.0376 155.174 34.3846 154.903 34.5412C154.631 34.6979 154.284 34.6049 154.128 34.3336L152.331 31.2213V34.09C152.331 34.56 151.95 34.9409 151.48 34.9409C151.01 34.9409 150.629 34.56 150.629 34.09V31.5712L149.058 34.2916C148.902 34.5629 148.555 34.6559 148.283 34.4992C148.012 34.3426 147.919 33.9957 148.076 33.7243L150.629 29.3021V24.8612L147.581 26.6207L144.519 31.9253C144.362 32.1967 144.015 32.2896 143.744 32.133C143.472 31.9763 143.38 31.6294 143.536 31.3581L145.616 27.7552L142.994 29.2695C142.587 29.5044 142.066 29.365 141.831 28.958C141.596 28.551 141.736 28.0306 142.143 27.7957L144.323 26.5367L141.182 26.5368C140.869 26.5367 140.615 26.2828 140.615 25.9695C140.615 25.6562 140.869 25.4022 141.182 25.4022H146.288L150.135 23.1813L146.92 21.3253L140.985 21.3253C140.672 21.3253 140.418 21.0714 140.418 20.7581C140.418 20.4448 140.672 20.1908 140.985 20.1908L144.955 20.1908L142.501 18.7741C142.094 18.5392 141.955 18.0188 142.19 17.6118C142.425 17.2048 142.945 17.0654 143.352 17.3003L145.533 18.5593L143.963 15.8398C143.806 15.5685 143.899 15.2216 144.17 15.0649C144.442 14.9083 144.789 15.0012 144.945 15.2726L147.498 19.6938L150.629 21.5015V18.0144L148.076 13.5921C147.919 13.3208 148.012 12.9738 148.283 12.8172C148.555 12.6605 148.902 12.7535 149.058 13.0248L150.629 15.7453V13.1009Z" fill="url(#paint28_linear_15199_973)"/>
+</g>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M150.629 13.1009C150.629 12.631 151.01 12.25 151.48 12.25C151.95 12.25 152.331 12.631 152.331 13.1009V16.0286L154.04 13.0675C154.197 12.7962 154.544 12.7032 154.815 12.8599C155.087 13.0165 155.18 13.3635 155.023 13.6348L152.331 18.2977V21.9135L156.067 19.7566L158.618 15.3371C158.775 15.0657 159.122 14.9728 159.393 15.1294C159.665 15.2861 159.758 15.633 159.601 15.9043L158.032 18.622L160.32 17.3011C160.727 17.0661 161.247 17.2056 161.482 17.6126C161.717 18.0195 161.578 18.5399 161.171 18.7749L158.716 20.1919L161.988 20.1919C162.302 20.1919 162.556 20.4458 162.556 20.7591C162.556 21.0724 162.302 21.3264 161.988 21.3264L156.751 21.3264L153.539 23.1813L157.275 25.3384H162.38C162.693 25.3384 162.947 25.5924 162.947 25.9057C162.947 26.219 162.693 26.473 162.38 26.473H159.24L161.529 27.7949C161.936 28.0299 162.076 28.5503 161.841 28.9572C161.606 29.3642 161.086 29.5037 160.679 29.2687L157.817 27.6165L159.561 30.6384C159.718 30.9097 159.625 31.2566 159.354 31.4133C159.083 31.5699 158.736 31.4769 158.579 31.2056L155.852 26.4819L152.331 24.4491V28.9522L155.11 33.7663C155.267 34.0376 155.174 34.3846 154.903 34.5412C154.631 34.6979 154.284 34.6049 154.128 34.3336L152.331 31.2213V34.09C152.331 34.56 151.95 34.9409 151.48 34.9409C151.01 34.9409 150.629 34.56 150.629 34.09V31.5712L149.058 34.2916C148.902 34.5629 148.555 34.6559 148.283 34.4992C148.012 34.3426 147.919 33.9957 148.076 33.7243L150.629 29.3021V24.8612L147.581 26.6207L144.519 31.9253C144.362 32.1967 144.015 32.2896 143.744 32.133C143.472 31.9763 143.38 31.6294 143.536 31.3581L145.616 27.7552L142.994 29.2695C142.587 29.5044 142.066 29.365 141.831 28.958C141.596 28.551 141.736 28.0306 142.143 27.7957L144.323 26.5367L141.182 26.5368C140.869 26.5367 140.615 26.2828 140.615 25.9695C140.615 25.6562 140.869 25.4022 141.182 25.4022H146.288L150.135 23.1813L146.92 21.3253L140.985 21.3253C140.672 21.3253 140.418 21.0714 140.418 20.7581C140.418 20.4448 140.672 20.1908 140.985 20.1908L144.955 20.1908L142.501 18.7741C142.094 18.5392 141.955 18.0188 142.19 17.6118C142.425 17.2048 142.945 17.0654 143.352 17.3003L145.533 18.5593L143.963 15.8398C143.806 15.5685 143.899 15.2216 144.17 15.0649C144.442 14.9083 144.789 15.0012 144.945 15.2726L147.498 19.6938L150.629 21.5015V18.0144L148.076 13.5921C147.919 13.3208 148.012 12.9738 148.283 12.8172C148.555 12.6605 148.902 12.7535 149.058 13.0248L150.629 15.7453V13.1009Z" fill="url(#paint29_linear_15199_973)"/>
+<g filter="url(#filter12_f_15199_973)">
+<g filter="url(#filter13_f_15199_973)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M28.211 73.8001C28.211 73.3302 28.5919 72.9492 29.0619 72.9492C29.5318 72.9492 29.9128 73.3302 29.9128 73.8001V76.7278L31.6224 73.7667C31.7791 73.4954 32.126 73.4024 32.3973 73.5591C32.6686 73.7157 32.7616 74.0627 32.6049 74.334L29.9128 78.9969V82.6129L33.6485 80.4562L36.2001 76.0367C36.3567 75.7653 36.7037 75.6724 36.975 75.829C37.2463 75.9857 37.3393 76.3326 37.1826 76.6039L35.6136 79.3216L37.9015 78.0007C38.3084 77.7657 38.8289 77.9052 39.0638 78.3121C39.2988 78.7191 39.1594 79.2395 38.7524 79.4745L36.2981 80.8915L39.5703 80.8915C39.8835 80.8915 40.1375 81.1454 40.1375 81.4587C40.1375 81.772 39.8835 82.026 39.5703 82.026H34.333L31.1207 83.8806L34.8568 86.0376H39.9621C40.2754 86.0376 40.5294 86.2916 40.5294 86.6049C40.5294 86.9182 40.2754 87.1722 39.9621 87.1722H36.8219L39.1115 88.4941C39.5185 88.7291 39.6579 89.2495 39.4229 89.6565C39.188 90.0635 38.6676 90.2029 38.2606 89.9679L35.3988 88.3157L37.1435 91.3376C37.3001 91.6089 37.2072 91.9558 36.9359 92.1125C36.6645 92.2691 36.3176 92.1762 36.1609 91.9048L33.4337 87.1811L29.9128 85.1483V89.6514L32.6922 94.4655C32.8489 94.7368 32.7559 95.0838 32.4846 95.2404C32.2133 95.3971 31.8663 95.3041 31.7097 95.0328L29.9128 91.9205V94.7892C29.9128 95.2592 29.5318 95.6401 29.0619 95.6401C28.5919 95.6401 28.211 95.2592 28.211 94.7892V92.2704L26.6404 94.9908C26.4837 95.2621 26.1368 95.3551 25.8655 95.1985C25.5941 95.0418 25.5012 94.6949 25.6578 94.4235L28.211 90.0013V85.5606L25.1631 87.3203L22.1005 92.6249C21.9438 92.8962 21.5969 92.9892 21.3256 92.8326C21.0543 92.6759 20.9613 92.329 21.1179 92.0576L23.198 88.4548L20.5753 89.9691C20.1683 90.204 19.6479 90.0646 19.4129 89.6576C19.1779 89.2506 19.3174 88.7302 19.7244 88.4952L21.9048 87.2363H18.7642C18.4509 87.2363 18.197 86.9824 18.197 86.6691C18.197 86.3558 18.4509 86.1018 18.7642 86.1018L23.8699 86.1018L27.7171 83.8806L24.5023 82.0246H18.5673C18.254 82.0246 18 81.7706 18 81.4573C18 81.144 18.254 80.89 18.5673 80.89L22.5372 80.89L20.0835 79.4734C19.6765 79.2384 19.5371 78.718 19.772 78.311C20.007 77.904 20.5274 77.7646 20.9344 77.9995L23.1149 79.2585L21.5449 76.5391C21.3882 76.2677 21.4812 75.9208 21.7525 75.7641C22.0238 75.6075 22.3708 75.7005 22.5274 75.9718L25.08 80.393L28.211 82.2007V78.7136L25.6578 74.2913C25.5011 74.02 25.5941 73.6731 25.8654 73.5164C26.1367 73.3598 26.4837 73.4527 26.6403 73.724L28.211 76.4445V73.8001Z" fill="url(#paint30_linear_15199_973)"/>
+</g>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M28.211 73.8001C28.211 73.3302 28.5919 72.9492 29.0619 72.9492C29.5318 72.9492 29.9128 73.3302 29.9128 73.8001V76.7278L31.6224 73.7667C31.7791 73.4954 32.126 73.4024 32.3973 73.5591C32.6686 73.7157 32.7616 74.0627 32.6049 74.334L29.9128 78.9969V82.6129L33.6485 80.4562L36.2001 76.0367C36.3567 75.7653 36.7037 75.6724 36.975 75.829C37.2463 75.9857 37.3393 76.3326 37.1826 76.6039L35.6136 79.3216L37.9015 78.0007C38.3084 77.7657 38.8289 77.9052 39.0638 78.3121C39.2988 78.7191 39.1594 79.2395 38.7524 79.4745L36.2981 80.8915L39.5703 80.8915C39.8835 80.8915 40.1375 81.1454 40.1375 81.4587C40.1375 81.772 39.8835 82.026 39.5703 82.026H34.333L31.1207 83.8806L34.8568 86.0376H39.9621C40.2754 86.0376 40.5294 86.2916 40.5294 86.6049C40.5294 86.9182 40.2754 87.1722 39.9621 87.1722H36.8219L39.1115 88.4941C39.5185 88.7291 39.6579 89.2495 39.4229 89.6565C39.188 90.0635 38.6676 90.2029 38.2606 89.9679L35.3988 88.3157L37.1435 91.3376C37.3001 91.6089 37.2072 91.9558 36.9359 92.1125C36.6645 92.2691 36.3176 92.1762 36.1609 91.9048L33.4337 87.1811L29.9128 85.1483V89.6514L32.6922 94.4655C32.8489 94.7368 32.7559 95.0838 32.4846 95.2404C32.2133 95.3971 31.8663 95.3041 31.7097 95.0328L29.9128 91.9205V94.7892C29.9128 95.2592 29.5318 95.6401 29.0619 95.6401C28.5919 95.6401 28.211 95.2592 28.211 94.7892V92.2704L26.6404 94.9908C26.4837 95.2621 26.1368 95.3551 25.8655 95.1985C25.5941 95.0418 25.5012 94.6949 25.6578 94.4235L28.211 90.0013V85.5606L25.1631 87.3203L22.1005 92.6249C21.9438 92.8962 21.5969 92.9892 21.3256 92.8326C21.0543 92.6759 20.9613 92.329 21.1179 92.0576L23.198 88.4548L20.5753 89.9691C20.1683 90.204 19.6479 90.0646 19.4129 89.6576C19.1779 89.2506 19.3174 88.7302 19.7244 88.4952L21.9048 87.2363H18.7642C18.4509 87.2363 18.197 86.9824 18.197 86.6691C18.197 86.3558 18.4509 86.1018 18.7642 86.1018L23.8699 86.1018L27.7171 83.8806L24.5023 82.0246H18.5673C18.254 82.0246 18 81.7706 18 81.4573C18 81.144 18.254 80.89 18.5673 80.89L22.5372 80.89L20.0835 79.4734C19.6765 79.2384 19.5371 78.718 19.772 78.311C20.007 77.904 20.5274 77.7646 20.9344 77.9995L23.1149 79.2585L21.5449 76.5391C21.3882 76.2677 21.4812 75.9208 21.7525 75.7641C22.0238 75.6075 22.3708 75.7005 22.5274 75.9718L25.08 80.393L28.211 82.2007V78.7136L25.6578 74.2913C25.5011 74.02 25.5941 73.6731 25.8654 73.5164C26.1367 73.3598 26.4837 73.4527 26.6403 73.724L28.211 76.4445V73.8001Z" fill="url(#paint31_linear_15199_973)"/>
+</g>
+</g>
+<defs>
+<filter id="filter0_f_15199_973" x="67.8594" y="16.0049" width="12.5469" height="12.6221" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.5" result="effect1_foregroundBlur_15199_973"/>
+</filter>
+<filter id="filter1_f_15199_973" x="54.8594" y="3.00488" width="38.5469" height="38.6221" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="7" result="effect1_foregroundBlur_15199_973"/>
+</filter>
+<filter id="filter2_f_15199_973" x="164" y="67.25" width="15.0713" height="15.1651" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.5" result="effect1_foregroundBlur_15199_973"/>
+</filter>
+<filter id="filter3_f_15199_973" x="151" y="54.25" width="41.0713" height="41.1651" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="7" result="effect1_foregroundBlur_15199_973"/>
+</filter>
+<filter id="filter4_f_15199_973" x="34.8008" y="114.25" width="12.5469" height="12.6221" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.5" result="effect1_foregroundBlur_15199_973"/>
+</filter>
+<filter id="filter5_f_15199_973" x="21.8008" y="101.25" width="38.5469" height="38.6221" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="7" result="effect1_foregroundBlur_15199_973"/>
+</filter>
+<filter id="filter6_f_15199_973" x="6" y="6.25" width="208" height="208" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="10" result="effect1_foregroundBlur_15199_973"/>
+</filter>
+<filter id="filter7_d_15199_973" x="118" y="69.25" width="36.3867" height="25.8605" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="2"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_15199_973"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_15199_973" result="shape"/>
+</filter>
+<filter id="filter8_d_15199_973" x="70" y="69.25" width="36.3867" height="25.8605" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="2"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_15199_973"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_15199_973" result="shape"/>
+</filter>
+<filter id="filter9_f_15199_973" x="36.7031" y="24.334" width="43.6133" height="43.7254" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="7" result="effect1_foregroundBlur_15199_973"/>
+</filter>
+<filter id="filter10_f_15199_973" x="173.106" y="103.451" width="43.6133" height="43.7254" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="7" result="effect1_foregroundBlur_15199_973"/>
+</filter>
+<filter id="filter11_f_15199_973" x="126.418" y="-1.75" width="50.5293" height="50.6909" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="7" result="effect1_foregroundBlur_15199_973"/>
+</filter>
+<filter id="filter12_f_15199_973" x="15" y="69.9492" width="28.5293" height="28.6909" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="1.5" result="effect1_foregroundBlur_15199_973"/>
+</filter>
+<filter id="filter13_f_15199_973" x="4" y="58.9492" width="50.5293" height="50.6909" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="7" result="effect1_foregroundBlur_15199_973"/>
+</filter>
+<linearGradient id="paint0_linear_15199_973" x1="80.0576" y1="15.1508" x2="72.5065" y2="28.9974" gradientUnits="userSpaceOnUse">
+<stop stop-color="#67E4FF" stop-opacity="0.45"/>
+<stop offset="1" stop-color="#5FE2FF"/>
+</linearGradient>
+<linearGradient id="paint1_linear_15199_973" x1="80.0576" y1="15.1508" x2="72.5065" y2="28.9974" gradientUnits="userSpaceOnUse">
+<stop stop-color="#67E4FF" stop-opacity="0.45"/>
+<stop offset="1" stop-color="#5FE2FF"/>
+</linearGradient>
+<linearGradient id="paint2_linear_15199_973" x1="178.879" y1="65.9521" x2="169.52" y2="83.1136" gradientUnits="userSpaceOnUse">
+<stop stop-color="#67E4FF" stop-opacity="0.45"/>
+<stop offset="1" stop-color="#5FE2FF"/>
+</linearGradient>
+<linearGradient id="paint3_linear_15199_973" x1="178.879" y1="65.9521" x2="169.52" y2="83.1136" gradientUnits="userSpaceOnUse">
+<stop stop-color="#67E4FF" stop-opacity="0.45"/>
+<stop offset="1" stop-color="#5FE2FF"/>
+</linearGradient>
+<linearGradient id="paint4_linear_15199_973" x1="46.999" y1="113.396" x2="39.4479" y2="127.243" gradientUnits="userSpaceOnUse">
+<stop stop-color="#67E4FF" stop-opacity="0.45"/>
+<stop offset="1" stop-color="#5FE2FF"/>
+</linearGradient>
+<linearGradient id="paint5_linear_15199_973" x1="46.999" y1="113.396" x2="39.4479" y2="127.243" gradientUnits="userSpaceOnUse">
+<stop stop-color="#67E4FF" stop-opacity="0.45"/>
+<stop offset="1" stop-color="#5FE2FF"/>
+</linearGradient>
+<linearGradient id="paint6_linear_15199_973" x1="168.284" y1="40.0189" x2="86.0726" y2="179.176" gradientUnits="userSpaceOnUse">
+<stop stop-color="#BBF3FF" stop-opacity="0.45"/>
+<stop offset="1" stop-color="#95ECFF"/>
+</linearGradient>
+<linearGradient id="paint7_linear_15199_973" x1="168.48" y1="39.5071" x2="84.0731" y2="176.708" gradientUnits="userSpaceOnUse">
+<stop stop-color="#BBF3FF" stop-opacity="0.45"/>
+<stop offset="1" stop-color="#95ECFF"/>
+</linearGradient>
+<linearGradient id="paint8_linear_15199_973" x1="165" y1="173.25" x2="81.5" y2="85.25" gradientUnits="userSpaceOnUse">
+<stop stop-color="#442711"/>
+<stop offset="1" stop-color="#4F311A"/>
+</linearGradient>
+<linearGradient id="paint9_linear_15199_973" x1="116" y1="102.25" x2="116" y2="97.75" gradientUnits="userSpaceOnUse">
+<stop stop-color="#AFAFAF"/>
+<stop offset="1" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint10_linear_15199_973" x1="116" y1="96.25" x2="116" y2="91.75" gradientUnits="userSpaceOnUse">
+<stop stop-color="#AFAFAF"/>
+<stop offset="1" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint11_linear_15199_973" x1="116" y1="90.25" x2="116" y2="85.75" gradientUnits="userSpaceOnUse">
+<stop stop-color="#AFAFAF"/>
+<stop offset="1" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint12_linear_15199_973" x1="116" y1="84.25" x2="116" y2="79.75" gradientUnits="userSpaceOnUse">
+<stop stop-color="#AFAFAF"/>
+<stop offset="1" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint13_linear_15199_973" x1="116" y1="72.25" x2="116" y2="67.75" gradientUnits="userSpaceOnUse">
+<stop stop-color="#AFAFAF"/>
+<stop offset="1" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint14_linear_15199_973" x1="116" y1="66.25" x2="116" y2="61.75" gradientUnits="userSpaceOnUse">
+<stop stop-color="#AFAFAF"/>
+<stop offset="1" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint15_linear_15199_973" x1="116" y1="60.25" x2="116" y2="55.75" gradientUnits="userSpaceOnUse">
+<stop stop-color="#AFAFAF"/>
+<stop offset="1" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint16_linear_15199_973" x1="116" y1="78.25" x2="116" y2="73.75" gradientUnits="userSpaceOnUse">
+<stop stop-color="#AFAFAF"/>
+<stop offset="1" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint17_linear_15199_973" x1="112" y1="55.25" x2="112" y2="101.25" gradientUnits="userSpaceOnUse">
+<stop stop-color="#181818"/>
+<stop offset="1" stop-color="#181818" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint18_linear_15199_973" x1="139" y1="88.25" x2="139" y2="100.25" gradientUnits="userSpaceOnUse">
+<stop/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<radialGradient id="paint19_radial_15199_973" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(139 94.25) rotate(90) scale(6)">
+<stop/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint20_radial_15199_973" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(168.339 82.0778) rotate(-153.875) scale(89.8842 52.3077)">
+<stop stop-color="#143588"/>
+<stop offset="0.731598" stop-color="#405FAD"/>
+</radialGradient>
+<radialGradient id="paint21_radial_15199_973" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(162.768 57.7149) rotate(-149.889) scale(84.0653 53.7025)">
+<stop stop-color="#143588"/>
+<stop offset="0.731598" stop-color="#405FAD"/>
+</radialGradient>
+<linearGradient id="paint22_linear_15199_973" x1="6" y1="0" x2="6" y2="12" gradientUnits="userSpaceOnUse">
+<stop/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<radialGradient id="paint23_radial_15199_973" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(6 6) rotate(90) scale(6)">
+<stop/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</radialGradient>
+<linearGradient id="paint24_linear_15199_973" x1="67.2813" y1="35.5892" x2="56.1024" y2="56.0882" gradientUnits="userSpaceOnUse">
+<stop stop-color="#67E4FF" stop-opacity="0.45"/>
+<stop offset="1" stop-color="#5FE2FF"/>
+</linearGradient>
+<linearGradient id="paint25_linear_15199_973" x1="67.2813" y1="35.5892" x2="56.1024" y2="56.0882" gradientUnits="userSpaceOnUse">
+<stop stop-color="#67E4FF" stop-opacity="0.45"/>
+<stop offset="1" stop-color="#5FE2FF"/>
+</linearGradient>
+<linearGradient id="paint26_linear_15199_973" x1="203.685" y1="114.706" x2="192.506" y2="135.205" gradientUnits="userSpaceOnUse">
+<stop stop-color="#67E4FF" stop-opacity="0.45"/>
+<stop offset="1" stop-color="#5FE2FF"/>
+</linearGradient>
+<linearGradient id="paint27_linear_15199_973" x1="203.685" y1="114.706" x2="192.506" y2="135.205" gradientUnits="userSpaceOnUse">
+<stop stop-color="#67E4FF" stop-opacity="0.45"/>
+<stop offset="1" stop-color="#5FE2FF"/>
+</linearGradient>
+<linearGradient id="paint28_linear_15199_973" x1="164.339" y1="8.28938" x2="148.208" y2="37.8682" gradientUnits="userSpaceOnUse">
+<stop stop-color="#67E4FF" stop-opacity="0.45"/>
+<stop offset="1" stop-color="#5FE2FF"/>
+</linearGradient>
+<linearGradient id="paint29_linear_15199_973" x1="164.339" y1="8.28938" x2="148.208" y2="37.8682" gradientUnits="userSpaceOnUse">
+<stop stop-color="#67E4FF" stop-opacity="0.45"/>
+<stop offset="1" stop-color="#5FE2FF"/>
+</linearGradient>
+<linearGradient id="paint30_linear_15199_973" x1="41.9212" y1="68.9886" x2="25.7904" y2="98.5674" gradientUnits="userSpaceOnUse">
+<stop stop-color="#67E4FF" stop-opacity="0.45"/>
+<stop offset="1" stop-color="#5FE2FF"/>
+</linearGradient>
+<linearGradient id="paint31_linear_15199_973" x1="41.9212" y1="68.9886" x2="25.7904" y2="98.5674" gradientUnits="userSpaceOnUse">
+<stop stop-color="#67E4FF" stop-opacity="0.45"/>
+<stop offset="1" stop-color="#5FE2FF"/>
+</linearGradient>
+<clipPath id="clip0_15199_973">
+<rect width="220" height="220" fill="white" transform="translate(0 0.25)"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/src/assets/icons/visu/ecogesture/ECOGESTURE0085.svg b/src/assets/icons/visu/ecogesture/ECOGESTURE0085.svg
new file mode 100644
index 0000000000000000000000000000000000000000..e2f81df81e2f998341b82a14840a3a3c08e8722a
--- /dev/null
+++ b/src/assets/icons/visu/ecogesture/ECOGESTURE0085.svg
@@ -0,0 +1,412 @@
+<svg width="220" height="221" viewBox="0 0 220 221" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<g clip-path="url(#clip0_15171_992)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M104.263 24.2585C104.607 23.656 105.256 23.25 106 23.25C106.811 23.25 107.509 23.7325 107.823 24.426C108.195 24.3116 108.59 24.25 109 24.25C111.209 24.25 113 26.0409 113 28.25C113 28.6597 112.938 29.0549 112.824 29.4271C113.518 29.7411 114 30.4392 114 31.25C114 31.9938 113.594 32.6427 112.992 32.9873C112.997 33.0742 113 33.1617 113 33.25C113 35.4591 111.209 37.25 109 37.25C107.805 37.25 106.733 36.7262 106 35.8958C105.267 36.7262 104.195 37.25 103 37.25C102.361 37.25 101.757 37.1002 101.221 36.8338C100.884 37.0948 100.46 37.25 100 37.25C98.8954 37.25 98 36.3546 98 35.25C98 34.5062 98.406 33.8573 99.0085 33.5127C99.0029 33.4258 99 33.3383 99 33.25C99 31.9974 99.5757 30.8794 100.477 30.1459C100.173 29.5817 100 28.936 100 28.25C100 26.0409 101.791 24.25 104 24.25C104.088 24.25 104.176 24.2529 104.263 24.2585Z" fill="#EFEFEF"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M104.076 29.9659C104.463 29.6964 104.716 29.2484 104.716 28.7414C104.716 27.9177 104.048 27.25 103.224 27.25C102.717 27.25 102.269 27.503 102 27.8898C102.241 27.7215 102.535 27.6228 102.852 27.6228C103.675 27.6228 104.343 28.2906 104.343 29.1142C104.343 29.4308 104.244 29.7244 104.076 29.9659Z" fill="#B3B3B3"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M106.624 31.5935C107.344 31.9817 108.236 32.0236 109.022 31.6276C110.299 30.9838 110.812 29.4266 110.168 28.1495C109.772 27.3627 109.029 26.8658 108.218 26.7506C108.668 26.9935 109.051 27.3719 109.299 27.8634C109.943 29.1405 109.429 30.6977 108.152 31.3415C107.662 31.5887 107.13 31.6653 106.624 31.5935Z" fill="#B3B3B3"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M106 23.25C105.256 23.25 104.607 23.656 104.263 24.2585C104.176 24.2529 104.088 24.25 104 24.25C102.64 24.25 101.439 24.9287 100.716 25.9659C101.363 25.5146 102.151 25.25 103 25.25C103.088 25.25 103.176 25.2529 103.263 25.2585C103.607 24.656 104.256 24.25 105 24.25C105.811 24.25 106.509 24.7325 106.823 25.426C107.195 25.3116 107.59 25.25 108 25.25C110.209 25.25 112 27.0409 112 29.25C112 29.6597 111.938 30.0549 111.824 30.4271C112.517 30.7411 113 31.4392 113 32.25C113 32.9938 112.594 33.6427 111.991 33.9873C111.997 34.0742 112 34.1617 112 34.25C112 35.0992 111.735 35.8865 111.284 36.5341C112.321 35.8114 113 34.61 113 33.25C113 33.1617 112.997 33.0742 112.991 32.9873C113.594 32.6427 114 31.9938 114 31.25C114 30.4392 113.517 29.7411 112.824 29.4271C112.938 29.0549 113 28.6597 113 28.25C113 26.0409 111.209 24.25 109 24.25C108.59 24.25 108.195 24.3116 107.823 24.426C107.509 23.7325 106.811 23.25 106 23.25Z" fill="#B3B3B3"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M113.892 31.8986C113.734 32.3616 113.41 32.7479 112.992 32.9873C112.997 33.0742 113 33.1617 113 33.25C113 35.4591 111.209 37.25 109 37.25C107.805 37.25 106.733 36.7262 106 35.8958C105.267 36.7262 104.195 37.25 103 37.25C102.361 37.25 101.757 37.1002 101.221 36.8338C100.884 37.0948 100.46 37.25 100 37.25C98.8954 37.25 98 36.3546 98 35.25C98 34.5062 98.406 33.8573 99.0085 33.5127C99.0029 33.4258 99 33.3383 99 33.25C99 32.739 99.0958 32.2503 99.2705 31.8011C101.551 31.4388 103.895 31.25 106.287 31.25C108.886 31.25 111.428 31.4727 113.892 31.8986Z" fill="#B3B3B3"/>
+<path d="M148 161.119C135.2 158.319 121 162.952 115.5 165.619C111 170.119 101.8 180.219 101 184.619C100 190.119 124 194.119 137 196.119C150 198.119 172 196.119 183 194.119C194 192.119 201 194.119 208.5 194.119C216 194.119 211.5 190.119 198.5 188.619C185.5 187.119 164 164.619 148 161.119Z" fill="#284796"/>
+<path d="M161.5 180.25C154.3 175.45 144.166 169.917 140 167.75C131.5 167.75 136 186.25 141.5 187.25C147 188.25 170.5 186.25 161.5 180.25Z" fill="#143588"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M69.7217 175.171H142.278V185.789C142.278 185.789 142.278 185.789 142.278 185.789C142.277 187.744 126.035 189.329 106 189.329C85.9646 189.329 69.7226 187.744 69.7217 185.789C69.7217 185.789 69.7217 185.789 69.7217 185.789V175.171Z" fill="url(#paint0_linear_15171_992)"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M69.7217 175.171H142.278V185.789C142.278 185.789 142.278 185.789 142.278 185.789C142.277 187.744 126.035 189.329 106 189.329C85.9646 189.329 69.7226 187.744 69.7217 185.789C69.7217 185.789 69.7217 185.789 69.7217 185.789V175.171Z" fill="url(#paint1_linear_15171_992)"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M69.7217 175.171H142.278V185.789C142.278 185.789 142.278 185.789 142.278 185.789C142.277 187.744 126.035 189.329 106 189.329C85.9646 189.329 69.7226 187.744 69.7217 185.789C69.7217 185.789 69.7217 185.789 69.7217 185.789V175.171Z" fill="url(#paint2_linear_15171_992)" fill-opacity="0.75"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M65 167.25H147V179.25C147 181.459 128.644 183.25 106 183.25C83.3563 183.25 65 181.459 65 179.25V167.25Z" fill="url(#paint3_linear_15171_992)"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M65 167.25H147V179.25C147 181.459 128.644 183.25 106 183.25C83.3563 183.25 65 181.459 65 179.25V167.25Z" fill="url(#paint4_linear_15171_992)"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M65 167.25H147V179.25C147 181.459 128.644 183.25 106 183.25C83.3563 183.25 65 181.459 65 179.25V167.25Z" fill="url(#paint5_linear_15171_992)" fill-opacity="0.75"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M147 88.25V168.25C147 170.459 128.644 172.25 106 172.25C83.3563 172.25 65 170.459 65 168.25V88.25C65 65.6063 83.3563 47.25 106 47.25C128.644 47.25 147 65.6063 147 88.25Z" fill="url(#paint6_linear_15171_992)"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M147 168.25V88.2499C147 73.608 139.325 60.7587 127.778 53.5059V121.949C127.778 133.973 119.827 144.548 108.276 147.887L65 160.397V168.25C65 170.459 83.3563 172.25 106 172.25C128.644 172.25 147 170.459 147 168.25Z" fill="black" fill-opacity="0.15"/>
+<path d="M106.287 185.181H96.7852C97.0771 181.834 101.432 174.323 106.287 174.323V185.181Z" fill="url(#paint7_linear_15171_992)"/>
+<path d="M106.287 185.181H115.789C115.497 181.834 110.439 174.323 106.287 174.323V185.181Z" fill="url(#paint8_linear_15171_992)"/>
+<path d="M111.543 179.332H101.059V182.837H111.543V179.332Z" fill="#CBCDCF"/>
+<path d="M106.314 179.332H101.059V182.837H106.314V179.332Z" fill="#F7F8F8"/>
+<path d="M105.823 134.521C105.823 134.521 95.4385 135.818 95.4385 127.647C95.4385 119.475 99.6107 101.335 105.823 101.221C112.036 101.335 116.209 119.475 116.209 127.647C116.209 135.818 105.823 134.521 105.823 134.521Z" fill="url(#paint9_linear_15171_992)"/>
+<path d="M101.283 127.189C101.283 129.67 103.323 131.696 105.822 131.696V122.683C103.323 122.683 101.283 124.708 101.283 127.189Z" fill="#F7F8F8"/>
+<path d="M110.361 127.189C110.361 129.67 108.321 131.696 105.822 131.696V122.683C108.344 122.683 110.361 124.708 110.361 127.189Z" fill="#CBCDCF"/>
+<path d="M105.823 114.766H101.766V119.751H105.823V114.766Z" fill="#F7F8F8"/>
+<path d="M109.88 114.764H105.822V119.749H109.88V114.764Z" fill="#CBCDCF"/>
+<path opacity="0.2" d="M130.511 161.485C130.511 162.233 129.809 162.846 128.952 162.846H108.9C108.043 162.846 107.341 162.233 107.341 161.485V151.569C107.341 150.82 108.043 150.208 108.9 150.208H128.952C129.809 150.208 130.511 150.82 130.511 151.569V161.485Z" fill="url(#paint10_linear_15171_992)"/>
+<path opacity="0.2" d="M99.4498 153.29C99.4498 158.029 95.6007 161.87 90.8519 161.87C86.103 161.87 82.2539 158.029 82.2539 153.29C82.2539 148.551 86.103 144.709 90.8519 144.709C95.6007 144.709 99.4498 148.554 99.4498 153.29Z" fill="url(#paint11_linear_15171_992)"/>
+<path d="M99.4498 152.1C99.4498 156.839 95.6007 160.68 90.8519 160.68C86.103 160.68 82.2539 156.839 82.2539 152.1C82.2539 147.361 86.103 143.52 90.8519 143.52C95.6007 143.52 99.4498 147.361 99.4498 152.1Z" fill="url(#paint12_linear_15171_992)"/>
+<path d="M90.8497 159.493C94.9406 159.493 98.257 156.184 98.257 152.101C98.257 148.019 94.9406 144.709 90.8497 144.709C86.7588 144.709 83.4424 148.019 83.4424 152.101C83.4424 156.184 86.7588 159.493 90.8497 159.493Z" fill="url(#paint13_linear_15171_992)"/>
+<path d="M97.6141 152.103C97.6141 155.831 94.5862 158.853 90.85 158.853C87.1139 158.853 84.0859 155.831 84.0859 152.103C84.0859 148.375 87.1139 145.353 90.85 145.353C94.5862 145.353 97.6141 148.375 97.6141 152.103Z" fill="#F5F5F5"/>
+<path opacity="0.1" d="M84.1377 151.306H97.5666C97.1732 147.953 94.3163 145.355 90.8505 145.355C87.388 145.352 84.5312 147.953 84.1377 151.306Z" fill="url(#paint14_linear_15171_992)"/>
+<path d="M90.2487 152.297C90.1324 152.297 90.04 152.205 90.04 152.09C90.04 151.974 90.1324 151.882 90.2487 151.882H94.2757C94.392 151.882 94.4844 151.974 94.4844 152.09C94.4844 152.205 94.392 152.297 94.2757 152.297H90.2487Z" fill="#ED1C24"/>
+<path opacity="0.7" d="M90.2487 152.294H94.2757C94.392 152.294 94.4844 152.201 94.4844 152.085H90.04C90.04 152.201 90.1324 152.294 90.2487 152.294Z" fill="url(#paint15_linear_15171_992)"/>
+<path opacity="0.3" d="M94.2771 151.938H90.2502C90.1612 151.938 90.0928 152.009 90.0928 152.094H94.4379C94.4345 152.009 94.3627 151.938 94.2771 151.938Z" fill="url(#paint16_linear_15171_992)"/>
+<rect x="90.3555" y="151.614" width="0.985359" height="0.983316" fill="url(#pattern0)"/>
+<path d="M90.9883 150.408V150.254H90.718V150.408C90.6359 150.455 90.5812 150.541 90.5812 150.643C90.5812 150.793 90.7044 150.913 90.8515 150.913C91.002 150.913 91.1218 150.79 91.1218 150.643C91.1252 150.544 91.0705 150.455 90.9883 150.408ZM91.1081 150.346V149.11C91.1081 148.97 90.9918 148.854 90.8515 148.854C90.7112 148.854 90.5949 148.97 90.5949 149.11V150.346C90.5093 150.421 90.458 150.53 90.458 150.643C90.458 150.858 90.6325 151.036 90.8515 151.036C91.067 151.036 91.2449 150.862 91.2449 150.643C91.2449 150.53 91.1936 150.421 91.1081 150.346ZM90.8515 150.971C90.6701 150.971 90.5264 150.824 90.5264 150.647C90.5264 150.547 90.5709 150.452 90.6496 150.39L90.6633 150.38V149.113C90.6633 149.008 90.7488 148.922 90.8549 148.922C90.961 148.922 91.0465 149.008 91.0465 149.113V149.236H90.8789C90.8549 149.236 90.8344 149.257 90.8344 149.281C90.8344 149.305 90.8549 149.325 90.8789 149.325H91.0465V149.629H90.8789C90.8549 149.629 90.8344 149.65 90.8344 149.673C90.8344 149.697 90.8549 149.718 90.8789 149.718H91.0465V150.022H90.8789C90.8549 150.022 90.8344 150.042 90.8344 150.066C90.8344 150.09 90.8549 150.11 90.8789 150.11H91.0465V150.38L91.0602 150.39C91.1389 150.452 91.1833 150.547 91.1833 150.647C91.1799 150.824 91.0328 150.971 90.8515 150.971Z" fill="black"/>
+<path d="M87.8906 147.57L88.4894 148.604C88.6536 148.491 88.8247 148.392 89.006 148.307L88.4073 147.272C88.2293 147.361 88.0583 147.464 87.8906 147.57Z" fill="#3F44C6"/>
+<path d="M89.5469 146.853L89.7556 148.031C89.9917 147.966 90.238 147.925 90.4912 147.901L90.2825 146.723C90.0293 146.75 89.7864 146.791 89.5469 146.853Z" fill="#3D23DF"/>
+<path d="M86.5684 148.799L87.4819 149.564C87.5708 149.444 87.6666 149.332 87.7693 149.222L86.8523 148.454C86.7565 148.567 86.6607 148.679 86.5684 148.799Z" fill="#005DB2"/>
+<path d="M85.4414 152.022C85.4414 152.046 85.4414 152.073 85.4414 152.096C85.4414 152.12 85.4414 152.147 85.4414 152.171H86.6355C86.6355 152.147 86.6355 152.12 86.6355 152.096C86.6355 152.073 86.6355 152.049 86.6355 152.022H85.4414Z" fill="#00AEEF"/>
+<path d="M85.7148 150.387L86.8371 150.793C86.8679 150.698 86.9021 150.605 86.9397 150.513L85.8175 150.107C85.7798 150.199 85.7456 150.295 85.7148 150.387Z" fill="#008BA9"/>
+<path d="M95.6676 149.631L94.5352 150.044C94.7507 150.43 94.9081 150.853 94.997 151.304L96.1295 150.891C96.0269 150.447 95.8729 150.024 95.6676 149.631Z" fill="#F12254"/>
+<path d="M96.2126 151.353H95.0049C95.0494 151.595 95.0699 151.844 95.0699 152.097C95.0699 152.35 95.0459 152.599 95.0049 152.841H96.2126C96.2468 152.599 96.264 152.35 96.264 152.097C96.2674 151.844 96.2468 151.598 96.2126 151.353Z" fill="#ED1C24"/>
+<path d="M93.0929 147.178L92.4941 148.216C92.8192 148.352 93.1203 148.53 93.3974 148.738L93.9996 147.7C93.7156 147.499 93.4145 147.325 93.0929 147.178Z" fill="#7D1AFA"/>
+<path d="M94.5883 148.187L93.668 148.958C93.9656 149.224 94.2257 149.532 94.4378 149.87L95.3581 149.098C95.1357 148.767 94.8791 148.463 94.5883 148.187Z" fill="#F520C6"/>
+<path d="M91.1387 147.895C91.4432 147.915 91.7374 147.966 92.0214 148.048L92.2301 146.87C91.9461 146.795 91.6485 146.744 91.3474 146.717L91.1387 147.895Z" fill="#7305FF"/>
+<path d="M128.949 158.7C128.949 159.492 128.299 160.14 127.505 160.14H108.93C108.136 160.14 107.486 159.492 107.486 158.7V148.204C107.486 147.412 108.136 146.763 108.93 146.763H127.505C128.299 146.763 128.949 147.412 128.949 148.204V158.7Z" fill="white"/>
+<path opacity="0.05" d="M118.753 154.402C118.753 156.29 117.22 157.82 115.328 157.82C113.436 157.82 111.903 156.29 111.903 154.402C111.903 152.514 113.436 150.984 115.328 150.984C117.22 150.988 118.753 152.517 118.753 154.402Z" fill="url(#paint17_linear_15171_992)"/>
+<path opacity="0.1" d="M127.505 146.763H108.93C108.136 146.763 107.486 147.412 107.486 148.204V158.7C107.486 159.492 108.136 160.14 108.93 160.14H127.505C128.299 160.14 128.949 159.492 128.949 158.7V148.204C128.949 147.412 128.299 146.763 127.505 146.763ZM128.227 158.7C128.227 159.096 127.902 159.42 127.505 159.42H108.93C108.533 159.42 108.208 159.096 108.208 158.7V148.204C108.208 147.808 108.533 147.484 108.93 147.484H127.505C127.902 147.484 128.227 147.808 128.227 148.204V158.7Z" fill="black"/>
+<path d="M118.753 153.932C118.753 155.82 117.22 157.35 115.328 157.35C113.436 157.35 111.903 155.82 111.903 153.932C111.903 152.044 113.436 150.514 115.328 150.514C117.22 150.514 118.753 152.044 118.753 153.932Z" fill="url(#paint18_linear_15171_992)"/>
+<path d="M118.366 153.938C118.366 155.611 117.008 156.966 115.332 156.966C113.655 156.966 112.297 155.611 112.297 153.938C112.297 152.265 113.655 150.909 115.332 150.909C117.008 150.909 118.366 152.265 118.366 153.938Z" fill="url(#paint19_linear_15171_992)"/>
+<path d="M111.873 155.843L110.898 156.403C110.863 156.424 110.85 156.468 110.87 156.502C110.884 156.526 110.908 156.54 110.932 156.54C110.946 156.54 110.956 156.537 110.97 156.53L111.945 155.97C111.979 155.949 111.993 155.905 111.972 155.871C111.951 155.833 111.907 155.823 111.873 155.843ZM111.585 154.935C111.575 154.898 111.534 154.874 111.496 154.884L110.408 155.174C110.371 155.185 110.347 155.225 110.357 155.263C110.364 155.297 110.395 155.318 110.429 155.318C110.436 155.318 110.443 155.318 110.446 155.314L111.534 155.024C111.572 155.014 111.596 154.976 111.585 154.935ZM110.97 151.337C110.935 151.316 110.891 151.33 110.87 151.364C110.85 151.398 110.863 151.442 110.898 151.463L111.873 152.026C111.883 152.033 111.897 152.037 111.91 152.037C111.934 152.037 111.958 152.023 111.975 151.999C111.996 151.965 111.982 151.92 111.948 151.9L110.97 151.337ZM112.855 149.51C112.834 149.476 112.79 149.462 112.756 149.483C112.721 149.503 112.708 149.548 112.728 149.582L113.289 150.555C113.303 150.579 113.327 150.592 113.351 150.592C113.365 150.592 113.375 150.589 113.388 150.582C113.423 150.562 113.436 150.517 113.416 150.483L112.855 149.51ZM118.688 151.999C118.702 152.023 118.726 152.037 118.75 152.037C118.763 152.037 118.774 152.033 118.787 152.026L119.762 151.466C119.797 151.446 119.81 151.402 119.79 151.367C119.769 151.333 119.725 151.32 119.691 151.34L118.716 151.9C118.681 151.92 118.671 151.965 118.688 151.999ZM111.452 153.935C111.452 153.894 111.418 153.863 111.38 153.863H110.254C110.213 153.863 110.183 153.894 110.183 153.935C110.183 153.976 110.213 154.007 110.254 154.007H111.38C111.421 154.007 111.452 153.976 111.452 153.935ZM119.078 152.931C119.085 152.965 119.116 152.986 119.15 152.986C119.157 152.986 119.164 152.986 119.167 152.982L120.255 152.692C120.293 152.682 120.317 152.641 120.307 152.603C120.296 152.566 120.255 152.542 120.218 152.552L119.13 152.842C119.088 152.853 119.068 152.894 119.078 152.931ZM110.408 152.692L111.496 152.982C111.503 152.986 111.51 152.986 111.517 152.986C111.548 152.986 111.579 152.965 111.589 152.931C111.599 152.894 111.575 152.853 111.537 152.842L110.449 152.552C110.412 152.542 110.371 152.566 110.361 152.603C110.347 152.644 110.371 152.682 110.408 152.692ZM111.794 150.302C111.767 150.275 111.719 150.275 111.691 150.302C111.664 150.329 111.664 150.377 111.691 150.405L112.485 151.2C112.499 151.214 112.519 151.221 112.537 151.221C112.554 151.221 112.574 151.214 112.588 151.2C112.615 151.173 112.615 151.125 112.588 151.098L111.794 150.302ZM113.997 148.971C113.96 148.981 113.936 149.022 113.946 149.059L114.237 150.145C114.244 150.176 114.275 150.2 114.305 150.2C114.312 150.2 114.319 150.2 114.322 150.196C114.36 150.186 114.384 150.145 114.374 150.107L114.083 149.022C114.076 148.984 114.039 148.96 113.997 148.971ZM118.791 155.843C118.757 155.823 118.712 155.837 118.692 155.871C118.671 155.905 118.685 155.949 118.719 155.97L119.694 156.533C119.704 156.54 119.718 156.543 119.732 156.543C119.756 156.543 119.78 156.53 119.793 156.506C119.814 156.472 119.8 156.427 119.766 156.407L118.791 155.843ZM120.252 155.174L119.167 154.884C119.13 154.874 119.088 154.898 119.078 154.935C119.068 154.973 119.092 155.014 119.13 155.024L120.218 155.314C120.224 155.314 120.231 155.318 120.235 155.318C120.265 155.318 120.296 155.297 120.307 155.263C120.313 155.225 120.293 155.185 120.252 155.174ZM120.406 153.863H119.28C119.239 153.863 119.208 153.894 119.208 153.935C119.208 153.976 119.239 154.007 119.28 154.007H120.406C120.447 154.007 120.478 153.976 120.478 153.935C120.481 153.894 120.447 153.863 120.406 153.863ZM118.972 150.302C118.945 150.275 118.897 150.275 118.87 150.302L118.072 151.094C118.045 151.122 118.045 151.169 118.072 151.197C118.086 151.21 118.103 151.217 118.124 151.217C118.141 151.217 118.161 151.21 118.175 151.197L118.972 150.405C119 150.374 119 150.329 118.972 150.302ZM115.332 148.796C115.291 148.796 115.26 148.831 115.26 148.868V149.991C115.26 150.032 115.291 150.063 115.332 150.063C115.373 150.063 115.404 150.029 115.404 149.991V148.868C115.404 148.831 115.369 148.796 115.332 148.796ZM117.805 149.51L117.241 150.483C117.22 150.517 117.234 150.562 117.268 150.582C117.279 150.589 117.292 150.592 117.306 150.592C117.33 150.592 117.354 150.579 117.368 150.555L117.932 149.582C117.953 149.548 117.939 149.503 117.905 149.483C117.87 149.466 117.826 149.476 117.805 149.51ZM116.663 148.971C116.625 148.96 116.584 148.984 116.574 149.022L116.283 150.104C116.273 150.142 116.297 150.183 116.334 150.193C116.341 150.196 116.348 150.196 116.351 150.196C116.382 150.196 116.413 150.176 116.42 150.142L116.711 149.059C116.724 149.022 116.704 148.981 116.663 148.971Z" fill="#A7A9AC"/>
+<path d="M126.17 150.173C126.17 150.795 125.664 151.3 125.041 151.3C124.418 151.3 123.912 150.795 123.912 150.173C123.912 149.552 124.418 149.046 125.041 149.046C125.664 149.046 126.17 149.552 126.17 150.173Z" fill="url(#paint20_linear_15171_992)"/>
+<path d="M125.99 150.17C125.99 150.696 125.562 151.12 125.039 151.12C124.512 151.12 124.088 150.696 124.088 150.17C124.088 149.645 124.516 149.221 125.039 149.221C125.566 149.221 125.99 149.645 125.99 150.17Z" fill="#EF3836"/>
+<path d="M126.169 153.456C126.169 154.078 125.663 154.583 125.04 154.583C124.417 154.583 123.911 154.078 123.911 153.456C123.911 152.835 124.417 152.33 125.04 152.33C125.663 152.33 126.169 152.835 126.169 153.456Z" fill="url(#paint21_linear_15171_992)"/>
+<path d="M125.043 154.4C125.568 154.4 125.994 153.975 125.994 153.451C125.994 152.927 125.568 152.502 125.043 152.502C124.518 152.502 124.092 152.927 124.092 153.451C124.092 153.975 124.518 154.4 125.043 154.4Z" fill="#505153"/>
+<path d="M126.169 156.733C126.169 157.355 125.663 157.86 125.04 157.86C124.417 157.86 123.911 157.355 123.911 156.733C123.911 156.112 124.417 155.606 125.04 155.606C125.663 155.606 126.169 156.112 126.169 156.733Z" fill="url(#paint22_linear_15171_992)"/>
+<path d="M125.992 156.728C125.992 157.254 125.564 157.677 125.041 157.677C124.514 157.677 124.09 157.254 124.09 156.728C124.09 156.202 124.518 155.779 125.041 155.779C125.568 155.779 125.992 156.206 125.992 156.728Z" fill="#00A2DD"/>
+<path d="M217 197.536C217 202.112 168.812 205.25 109.368 205.25C49.925 205.25 4 202.112 4 197.536C4 192.96 49.925 189.25 109.368 189.25C168.812 189.25 217 192.96 217 197.536Z" fill="#1E1E1E"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M147.297 86.8268C150.041 83.975 151.574 80.7905 151.574 77.431C151.574 65.2161 131.299 55.314 106.287 55.314C81.2758 55.314 61 65.2161 61 77.431C61 80.7905 62.5337 83.975 65.2779 86.8267C66.4869 76.3038 84.3851 67.9523 106.287 67.9523C128.189 67.9523 146.088 76.3038 147.297 86.8268Z" fill="#405FAD"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M147.297 86.8268C150.041 83.975 151.574 80.7905 151.574 77.431C151.574 65.2161 131.299 55.314 106.287 55.314C81.2758 55.314 61 65.2161 61 77.431C61 80.7905 62.5337 83.975 65.2779 86.8267C66.4869 76.3038 84.3851 67.9523 106.287 67.9523C128.189 67.9523 146.088 76.3038 147.297 86.8268Z" fill="#405FAD"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M147.297 86.8268C150.041 83.975 151.574 80.7905 151.574 77.431C151.574 65.2161 131.299 55.314 106.287 55.314C81.2758 55.314 61 65.2161 61 77.431C61 80.7905 62.5337 83.975 65.2779 86.8267C66.4869 76.3038 84.3851 67.9523 106.287 67.9523C128.189 67.9523 146.088 76.3038 147.297 86.8268Z" fill="url(#paint23_radial_15171_992)" fill-opacity="0.75"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M118.904 68.9143C119.237 68.9666 119.568 69.0209 119.898 69.0772C119.951 68.016 119.979 66.938 119.979 65.8461C119.979 62.4796 119.717 59.2448 119.235 56.2312C118.891 56.1812 118.545 56.1331 118.198 56.087C118.702 59.1278 118.979 62.413 118.979 65.8461C118.979 66.8832 118.954 67.9068 118.904 68.9143ZM111.216 55.4436C111.434 58.6786 111.553 62.1844 111.553 65.8461C111.553 66.6093 111.548 67.3658 111.538 68.1144C111.206 68.0938 110.873 68.0751 110.539 68.0583C110.548 67.3283 110.553 66.5905 110.553 65.8461C110.553 62.1593 110.432 58.6365 110.211 55.396C110.547 55.4101 110.882 55.426 111.216 55.4436ZM102.364 55.396C102.028 55.4101 101.692 55.426 101.358 55.4436C101.141 58.6786 101.021 62.1844 101.021 65.8461C101.021 66.6093 101.027 67.3658 101.037 68.1144C101.369 68.0938 101.702 68.0751 102.036 68.0583C102.026 67.3283 102.021 66.5905 102.021 65.8461C102.021 62.1593 102.143 58.6365 102.364 55.396ZM93.6702 68.9143C93.621 67.9068 93.5958 66.8832 93.5958 65.8461C93.5958 62.413 93.8723 59.1278 94.3767 56.087C94.0295 56.1331 93.6839 56.1812 93.34 56.2312C92.8577 59.2448 92.5958 62.4796 92.5958 65.8461C92.5958 66.938 92.6234 68.016 92.6771 69.0772C93.0062 69.0209 93.3373 68.9666 93.6702 68.9143ZM83.3673 71.3551C83.1678 69.907 83.0639 68.4188 83.0639 66.8993C83.0639 63.8109 83.4929 60.852 84.282 58.096C83.9051 58.1986 83.5316 58.3036 83.1614 58.4112C82.4482 61.0918 82.0639 63.9428 82.0639 66.8993C82.0639 68.5287 82.1806 70.1262 82.4049 71.6808C82.7223 71.5701 83.0432 71.4615 83.3673 71.3551ZM73.7459 75.7512C72.9529 73.5975 72.532 71.3347 72.532 69.0056C72.532 66.5828 72.9875 64.2316 73.8435 62.0003C73.3997 62.2228 72.9655 62.4499 72.5411 62.6813C71.8817 64.7072 71.532 66.8255 71.532 69.0056C71.532 71.5411 72.005 73.9928 72.8879 76.313C73.1673 76.1232 73.4534 75.9359 73.7459 75.7512ZM65.5753 67.7324C64.6104 69.503 64.1064 71.3453 64.1064 73.2184C64.1064 76.0708 65.2751 78.8518 67.4608 81.4172C67.2574 81.7036 67.067 81.993 66.8898 82.2851C64.459 79.5183 63.1064 76.4493 63.1064 73.2184C63.1064 72.1716 63.2484 71.1418 63.5231 70.1338C64.1124 69.31 64.7987 68.5084 65.5753 67.7324ZM149.052 70.1338C148.462 69.31 147.776 68.5084 146.999 67.7324C147.964 69.503 148.468 71.3453 148.468 73.2184C148.468 76.0708 147.299 78.8518 145.114 81.4172C145.317 81.7036 145.508 81.993 145.685 82.2851C148.116 79.5183 149.468 76.4493 149.468 73.2184C149.468 72.1716 149.326 71.1418 149.052 70.1338ZM139.687 76.313C140.57 73.9928 141.043 71.5411 141.043 69.0056C141.043 66.8255 140.693 64.7072 140.034 62.6813C139.609 62.4499 139.175 62.2228 138.731 62.0003C139.587 64.2316 140.043 66.5828 140.043 69.0056C140.043 71.3347 139.622 73.5975 138.829 75.7512C139.121 75.9359 139.407 76.1232 139.687 76.313ZM130.17 71.6808C130.394 70.1262 130.511 68.5287 130.511 66.8993C130.511 63.9428 130.126 61.0918 129.413 58.4112C129.043 58.3036 128.669 58.1986 128.293 58.096C129.082 60.852 129.511 63.8109 129.511 66.8993C129.511 68.4188 129.407 69.907 129.207 71.3551C129.531 71.4615 129.852 71.5701 130.17 71.6808Z" fill="#284796"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M150.754 81.644C150.036 83.4606 148.864 85.1981 147.296 86.827C146.087 76.304 128.189 67.9525 106.287 67.9525C84.3849 67.9525 66.4866 76.304 65.2776 86.827C63.7102 85.1981 62.5377 83.4606 61.8203 81.644C65.8481 71.444 84.2253 63.7397 106.287 63.7397C128.349 63.7397 146.726 71.444 150.754 81.644Z" fill="#284796"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M150.282 82.6968C149.564 84.1335 148.558 85.5152 147.296 86.8266C146.087 76.3036 128.189 67.9521 106.287 67.9521C84.3846 67.9521 66.4863 76.3036 65.2773 86.8266C64.0155 85.5152 63.0096 84.1335 62.291 82.6968C67.1284 73.0242 84.991 65.8457 106.287 65.8457C127.582 65.8457 145.445 73.0242 150.282 82.6968Z" fill="#143588"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M147.297 126.848C150.041 123.997 151.574 120.812 151.574 117.452C151.574 105.238 131.299 95.3354 106.287 95.3354C81.2758 95.3354 61 105.238 61 117.452C61 120.812 62.5337 123.997 65.2779 126.848C66.4869 116.325 84.3851 107.974 106.287 107.974C128.189 107.974 146.088 116.325 147.297 126.848Z" fill="#AD4040"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M150.754 121.665C150.036 123.482 148.864 125.219 147.296 126.848C146.088 116.325 128.189 107.973 106.287 107.973C84.3848 107.973 66.4864 116.325 65.2776 126.848C63.7102 125.219 62.5377 123.482 61.8203 121.665C65.8481 111.465 84.2253 103.761 106.287 103.761C128.349 103.761 146.726 111.465 150.754 121.665Z" fill="#962828"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M150.282 122.718C149.564 124.155 148.558 125.537 147.296 126.848C146.087 116.325 128.189 107.973 106.287 107.973C84.3845 107.973 66.4861 116.325 65.2773 126.848C64.0155 125.537 63.0095 124.155 62.291 122.718C67.1284 113.046 84.991 105.867 106.287 105.867C127.582 105.867 145.445 113.046 150.282 122.718Z" fill="#881414"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M147.096 67.8295C139.777 60.4234 124.254 55.3138 106.287 55.3138C88.3207 55.3138 72.7976 60.4234 65.4785 67.8295C67.809 48.9313 85.1908 34.25 106.287 34.25C127.384 34.25 144.766 48.9313 147.096 67.8295Z" fill="#405FAD"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M147.096 67.8295C139.777 60.4234 124.254 55.3138 106.287 55.3138C88.3207 55.3138 72.7976 60.4234 65.4785 67.8295C67.809 48.9313 85.1908 34.25 106.287 34.25C127.384 34.25 144.766 48.9313 147.096 67.8295Z" fill="url(#paint24_radial_15171_992)" fill-opacity="0.75"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M106.287 55.3143C124.254 55.3143 139.777 60.4239 147.096 67.83C146.175 60.36 142.902 53.5488 137.978 48.0428C130.486 45.967 121.829 44.7822 112.606 44.7822C94.1033 44.7822 77.8746 49.5518 68.7655 56.7177C67.0907 60.1786 65.9615 63.9138 65.4785 67.83C72.7976 60.4239 88.3207 55.3143 106.287 55.3143Z" fill="#284796"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M106.287 55.314C124.254 55.314 139.777 60.4237 147.096 67.8297C146.655 64.2537 145.675 60.8286 144.233 57.6254C135.497 54.8563 124.524 53.2075 112.606 53.2075C91.949 53.2075 74.1265 58.1615 65.881 65.3176C65.7174 66.1459 65.5829 66.9836 65.4785 67.8297C72.7976 60.4237 88.3207 55.314 106.287 55.314Z" fill="#143588"/>
+<path d="M124.322 132.948C125.939 125.066 125.621 104.1 125 97.2499L133.5 99.7499C135.45 109.65 135.499 134.077 133.1 134.256C133.034 134.261 132.967 134.25 132.901 134.25H125.347C124.676 134.25 124.187 133.605 124.322 132.948Z" fill="#962828"/>
+<path d="M126.332 131.907C127.875 123.778 126.878 97.8025 125 97.25C126.667 96.9167 130.7 96.95 133.5 99.75C135.401 108.494 134.893 126.512 134.122 132.426C134.06 132.909 133.644 133.25 133.158 133.25H127.387C126.705 133.25 126.205 132.577 126.332 131.907Z" fill="#AD4040"/>
+<path d="M68.4998 163.249C47.6998 150.049 42.1664 166.083 41.9998 175.749C41.7191 179.249 43.225 182.314 44.5 183.25C52 188.75 34.4998 190.75 20.4998 192.75C6.49978 194.75 34.4998 200.25 56.9998 198.25C79.4998 196.25 134 197.75 163.5 200.25C193 202.75 187 184.75 175.5 185.25C164 185.75 124.5 183.75 122 183.25C119.5 182.75 94.4998 179.749 68.4998 163.249Z" fill="#405FAD"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M42.3389 179.443C44.3447 180.879 47.3012 181.75 51.5002 181.75C74.0002 181.75 103.5 187.75 110.5 190.75C113.856 192.188 121.924 191.673 129.525 191.187C137.778 190.66 145.48 190.168 146 192.25C147 196.25 49.0001 190.75 44.0001 188.25C43.9483 188.224 43.8956 188.197 43.8417 188.169C46.6003 186.902 47.3302 185.325 44.4999 183.25C43.7072 182.668 42.8252 181.263 42.3389 179.443Z" fill="#284796"/>
+<path d="M76.0001 174.75C72.0001 174.35 54.1668 165.583 51.0001 162.25C44.5001 161.25 57.1894 169.861 63 173.25C69.0001 176.75 81.0001 175.25 76.0001 174.75Z" fill="#284796"/>
+<path d="M177 191.75C177.4 194.55 162 196.481 157.5 194.75C151 192.25 167 194.595 171 192.75C175 190.905 168.5 190.25 169 189.25C169.5 188.25 176.5 188.25 177 191.75Z" fill="#284796"/>
+<ellipse cx="85.4325" cy="78.6738" rx="14.0917" ry="14.0917" fill="#A9F5FF" fill-opacity="0.55"/>
+<ellipse cx="123.901" cy="78.7813" rx="14.1183" ry="13.4124" fill="#A9F5FF" fill-opacity="0.55"/>
+<path d="M111.34 75.7301C110.717 75.7301 110.175 75.3361 109.854 74.8028C108.818 73.0797 106.93 71.9269 104.773 71.9269C102.616 71.9269 100.728 73.0797 99.6924 74.8028C99.3717 75.3361 98.8292 75.7301 98.2069 75.7301C97.2299 75.7301 96.5124 74.8037 96.9509 73.9306C98.3885 71.0678 101.351 69.1032 104.773 69.1032C108.195 69.1032 111.158 71.0678 112.596 73.9306C113.034 74.8037 112.317 75.7301 111.34 75.7301Z" fill="#AD4040"/>
+<rect x="69.5459" y="71.2129" width="5.64731" height="4.23548" rx="1.38689" fill="#AD4040"/>
+<rect x="134.353" y="71.2129" width="5.64732" height="4.23548" rx="1.38689" fill="#AD4040"/>
+<circle cx="122" cy="79.25" r="4" fill="black"/>
+<circle cx="87" cy="79.25" r="4" fill="black"/>
+<g opacity="0.65">
+<path opacity="0.6" d="M83.4342 66.393L90.344 67.8374L76.7394 88.0711L72.9136 82.2232L83.4342 66.393Z" fill="#EAFCFF"/>
+<path opacity="0.6" d="M121.877 66.393L128.786 67.8374L115.182 88.0711L111.356 82.2232L121.877 66.393Z" fill="#EAFCFF"/>
+<path opacity="0.6" d="M91.348 68.6596L93.9675 69.9283L79.383 91.3996L77.4545 90.2753L91.348 68.6596Z" fill="#EAFCFF"/>
+<path opacity="0.6" d="M129.789 68.6593L132.409 69.928L117.824 91.3992L115.896 90.2749L129.789 68.6593Z" fill="#EAFCFF"/>
+</g>
+<path d="M98.1373 78.6741C98.1373 85.6908 92.4492 91.3789 85.4325 91.3789C78.4158 91.3789 72.7277 85.6908 72.7277 78.6741C72.7277 71.6574 78.4158 65.9693 85.4325 65.9693C92.4492 65.9693 98.1373 71.6574 98.1373 78.6741Z" stroke="#AD4040" stroke-width="2.77378"/>
+<path d="M136.579 78.6741C136.579 85.6908 130.891 91.3789 123.874 91.3789C116.857 91.3789 111.169 85.6908 111.169 78.6741C111.169 71.6574 116.857 65.9693 123.874 65.9693C130.891 65.9693 136.579 71.6574 136.579 78.6741Z" stroke="#AD4040" stroke-width="2.77378"/>
+<g filter="url(#filter0_f_15171_992)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M64.2852 30.4892C64.2852 30.233 64.4929 30.0254 64.749 30.0254C65.0051 30.0254 65.2128 30.233 65.2128 30.4892V32.085L66.1448 30.4706C66.2302 30.3227 66.4193 30.2721 66.5672 30.3574C66.7151 30.4428 66.7658 30.6319 66.6804 30.7798L65.2128 33.3218V35.2934L67.2491 34.1177L68.6404 31.7078C68.7258 31.5599 68.9149 31.5093 69.0628 31.5946C69.2107 31.68 69.2614 31.8691 69.176 32.017L68.3202 33.4993L69.5681 32.7788C69.7899 32.6507 70.0736 32.7268 70.2017 32.9486C70.3297 33.1704 70.2537 33.4541 70.0319 33.5821L68.6948 34.3541H70.4777C70.6484 34.3541 70.7869 34.4926 70.7869 34.6633C70.7869 34.8341 70.6484 34.9725 70.4777 34.9725L67.6237 34.9725L65.8714 35.9842L67.9079 37.16L70.6908 37.16C70.8615 37.16 71 37.2985 71 37.4692C71 37.64 70.8615 37.7784 70.6908 37.7784L68.979 37.7784L70.2269 38.4989C70.4488 38.627 70.5248 38.9106 70.3967 39.1325C70.2686 39.3543 69.985 39.4303 69.7631 39.3022L68.2031 38.4016L69.154 40.0485C69.2394 40.1964 69.1887 40.3855 69.0409 40.4709C68.893 40.5563 68.7039 40.5056 68.6185 40.3577L67.1321 37.7832L65.2128 36.6751V39.129L66.728 41.7533C66.8133 41.9012 66.7627 42.0903 66.6148 42.1757C66.4669 42.2611 66.2778 42.2104 66.1924 42.0625L65.2128 40.3658V41.9295C65.2128 42.1856 65.0051 42.3933 64.749 42.3933C64.4929 42.3933 64.2852 42.1856 64.2852 41.9295V40.5568L63.4293 42.0392C63.3439 42.1871 63.1548 42.2378 63.0069 42.1524C62.8591 42.067 62.8084 41.8779 62.8938 41.73L64.2852 39.32V36.9L62.6245 37.8588L60.9555 40.7496C60.8701 40.8974 60.681 40.9481 60.5331 40.8627C60.3853 40.7774 60.3346 40.5883 60.42 40.4404L61.5534 38.4772L60.1243 39.3023C59.9025 39.4303 59.6189 39.3543 59.4908 39.1325C59.3627 38.9107 59.4387 38.627 59.6605 38.499L60.849 37.8128H59.1373C58.9665 37.8128 58.8281 37.6744 58.8281 37.5036C58.8281 37.3329 58.9665 37.1944 59.1373 37.1944H61.92L64.0162 35.9842L62.2637 34.9725L59.0289 34.9725C58.8582 34.9725 58.7197 34.834 58.7197 34.6633C58.7197 34.4925 58.8582 34.3541 59.0289 34.3541H61.1927L59.8556 33.5821C59.6337 33.454 59.5577 33.1704 59.6858 32.9485C59.8139 32.7267 60.0975 32.6507 60.3194 32.7788L61.5079 33.465L60.652 31.9825C60.5666 31.8346 60.6173 31.6455 60.7652 31.5601C60.9131 31.4748 61.1022 31.5254 61.1876 31.6733L62.579 34.0834L64.2852 35.0685V33.1668L62.8937 30.7567C62.8083 30.6088 62.859 30.4197 63.0069 30.3343C63.1548 30.2489 63.3439 30.2996 63.4292 30.4475L64.2852 31.93V30.4892Z" fill="url(#paint25_linear_15171_992)"/>
+</g>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M64.2852 30.4892C64.2852 30.233 64.4929 30.0254 64.749 30.0254C65.0051 30.0254 65.2128 30.233 65.2128 30.4892V32.085L66.1448 30.4706C66.2302 30.3227 66.4193 30.2721 66.5672 30.3574C66.7151 30.4428 66.7658 30.6319 66.6804 30.7798L65.2128 33.3218V35.2934L67.2491 34.1177L68.6404 31.7078C68.7258 31.5599 68.9149 31.5093 69.0628 31.5946C69.2107 31.68 69.2614 31.8691 69.176 32.017L68.3202 33.4993L69.5681 32.7788C69.7899 32.6507 70.0736 32.7268 70.2017 32.9486C70.3297 33.1704 70.2537 33.4541 70.0319 33.5821L68.6948 34.3541H70.4777C70.6484 34.3541 70.7869 34.4926 70.7869 34.6633C70.7869 34.8341 70.6484 34.9725 70.4777 34.9725L67.6237 34.9725L65.8714 35.9842L67.9079 37.16L70.6908 37.16C70.8615 37.16 71 37.2985 71 37.4692C71 37.64 70.8615 37.7784 70.6908 37.7784L68.979 37.7784L70.2269 38.4989C70.4488 38.627 70.5248 38.9106 70.3967 39.1325C70.2686 39.3543 69.985 39.4303 69.7631 39.3022L68.2031 38.4016L69.154 40.0485C69.2394 40.1964 69.1887 40.3855 69.0409 40.4709C68.893 40.5563 68.7039 40.5056 68.6185 40.3577L67.1321 37.7832L65.2128 36.6751V39.129L66.728 41.7533C66.8133 41.9012 66.7627 42.0903 66.6148 42.1757C66.4669 42.2611 66.2778 42.2104 66.1924 42.0625L65.2128 40.3658V41.9295C65.2128 42.1856 65.0051 42.3933 64.749 42.3933C64.4929 42.3933 64.2852 42.1856 64.2852 41.9295V40.5568L63.4293 42.0392C63.3439 42.1871 63.1548 42.2378 63.0069 42.1524C62.8591 42.067 62.8084 41.8779 62.8938 41.73L64.2852 39.32V36.9L62.6245 37.8588L60.9555 40.7496C60.8701 40.8974 60.681 40.9481 60.5331 40.8627C60.3853 40.7774 60.3346 40.5883 60.42 40.4404L61.5534 38.4772L60.1243 39.3023C59.9025 39.4303 59.6189 39.3543 59.4908 39.1325C59.3627 38.9107 59.4387 38.627 59.6605 38.499L60.849 37.8128H59.1373C58.9665 37.8128 58.8281 37.6744 58.8281 37.5036C58.8281 37.3329 58.9665 37.1944 59.1373 37.1944H61.92L64.0162 35.9842L62.2637 34.9725L59.0289 34.9725C58.8582 34.9725 58.7197 34.834 58.7197 34.6633C58.7197 34.4925 58.8582 34.3541 59.0289 34.3541H61.1927L59.8556 33.5821C59.6337 33.454 59.5577 33.1704 59.6858 32.9485C59.8139 32.7267 60.0975 32.6507 60.3194 32.7788L61.5079 33.465L60.652 31.9825C60.5666 31.8346 60.6173 31.6455 60.7652 31.5601C60.9131 31.4748 61.1022 31.5254 61.1876 31.6733L62.579 34.0834L64.2852 35.0685V33.1668L62.8937 30.7567C62.8083 30.6088 62.859 30.4197 63.0069 30.3343C63.1548 30.2489 63.3439 30.2996 63.4292 30.4475L64.2852 31.93V30.4892Z" fill="url(#paint26_linear_15171_992)"/>
+<g filter="url(#filter1_f_15171_992)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M171.565 92.7138C171.565 92.4576 171.773 92.25 172.029 92.25C172.285 92.25 172.493 92.4576 172.493 92.7138V94.3096L173.425 92.6952C173.51 92.5473 173.7 92.4967 173.847 92.5821C173.995 92.6674 174.046 92.8565 173.961 93.0044L172.493 95.5464V97.518L174.529 96.3423L175.921 93.9324C176.006 93.7845 176.195 93.7339 176.343 93.8192C176.491 93.9046 176.542 94.0937 176.456 94.2416L175.6 95.7239L176.848 95.0034C177.07 94.8754 177.354 94.9514 177.482 95.1732C177.61 95.395 177.534 95.6787 177.312 95.8067L175.975 96.5787H177.758C177.929 96.5787 178.067 96.7172 178.067 96.8879C178.067 97.0587 177.929 97.1971 177.758 97.1971L174.904 97.1971L173.152 98.2088L175.188 99.3846L177.971 99.3846C178.142 99.3846 178.28 99.5231 178.28 99.6938C178.28 99.8646 178.142 100.003 177.971 100.003L176.259 100.003L177.507 100.724C177.729 100.852 177.805 101.135 177.677 101.357C177.549 101.579 177.265 101.655 177.043 101.527L175.483 100.626L176.434 102.273C176.52 102.421 176.469 102.61 176.321 102.696C176.173 102.781 175.984 102.73 175.899 102.582L174.412 100.008L172.493 98.8997V101.354L174.008 103.978C174.094 104.126 174.043 104.315 173.895 104.4C173.747 104.486 173.558 104.435 173.473 104.287L172.493 102.59V104.154C172.493 104.41 172.285 104.618 172.029 104.618C171.773 104.618 171.565 104.41 171.565 104.154V102.781L170.71 104.264C170.624 104.412 170.435 104.462 170.287 104.377C170.139 104.292 170.089 104.103 170.174 103.955L171.565 101.545V99.1246L169.905 100.083L168.236 102.974C168.15 103.122 167.961 103.173 167.813 103.087C167.666 103.002 167.615 102.813 167.7 102.665L168.834 100.702L167.405 101.527C167.183 101.655 166.899 101.579 166.771 101.357C166.643 101.135 166.719 100.852 166.941 100.724L168.129 100.037H166.418C166.247 100.037 166.108 99.899 166.108 99.7282C166.108 99.5575 166.247 99.419 166.418 99.419H169.2L171.296 98.2088L169.544 97.1971L166.309 97.1971C166.138 97.1971 166 97.0586 166 96.8879C166 96.7171 166.138 96.5787 166.309 96.5787H168.473L167.136 95.8067C166.914 95.6786 166.838 95.395 166.966 95.1732C167.094 94.9513 167.378 94.8753 167.6 95.0034L168.788 95.6896L167.932 94.2071C167.847 94.0592 167.898 93.8701 168.045 93.7847C168.193 93.6994 168.382 93.75 168.468 93.8979L169.859 96.308L171.565 97.2931V95.3914L170.174 92.9813C170.089 92.8334 170.139 92.6443 170.287 92.5589C170.435 92.4735 170.624 92.5242 170.71 92.6721L171.565 94.1547V92.7138Z" fill="url(#paint27_linear_15171_992)"/>
+</g>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M171.565 92.7138C171.565 92.4576 171.773 92.25 172.029 92.25C172.285 92.25 172.493 92.4576 172.493 92.7138V94.3096L173.425 92.6952C173.51 92.5473 173.7 92.4967 173.847 92.5821C173.995 92.6674 174.046 92.8565 173.961 93.0044L172.493 95.5464V97.518L174.529 96.3423L175.921 93.9324C176.006 93.7845 176.195 93.7339 176.343 93.8192C176.491 93.9046 176.542 94.0937 176.456 94.2416L175.6 95.7239L176.848 95.0034C177.07 94.8754 177.354 94.9514 177.482 95.1732C177.61 95.395 177.534 95.6787 177.312 95.8067L175.975 96.5787H177.758C177.929 96.5787 178.067 96.7172 178.067 96.8879C178.067 97.0587 177.929 97.1971 177.758 97.1971L174.904 97.1971L173.152 98.2088L175.188 99.3846L177.971 99.3846C178.142 99.3846 178.28 99.5231 178.28 99.6938C178.28 99.8646 178.142 100.003 177.971 100.003L176.259 100.003L177.507 100.724C177.729 100.852 177.805 101.135 177.677 101.357C177.549 101.579 177.265 101.655 177.043 101.527L175.483 100.626L176.434 102.273C176.52 102.421 176.469 102.61 176.321 102.696C176.173 102.781 175.984 102.73 175.899 102.582L174.412 100.008L172.493 98.8997V101.354L174.008 103.978C174.094 104.126 174.043 104.315 173.895 104.4C173.747 104.486 173.558 104.435 173.473 104.287L172.493 102.59V104.154C172.493 104.41 172.285 104.618 172.029 104.618C171.773 104.618 171.565 104.41 171.565 104.154V102.781L170.71 104.264C170.624 104.412 170.435 104.462 170.287 104.377C170.139 104.292 170.089 104.103 170.174 103.955L171.565 101.545V99.1246L169.905 100.083L168.236 102.974C168.15 103.122 167.961 103.173 167.813 103.087C167.666 103.002 167.615 102.813 167.7 102.665L168.834 100.702L167.405 101.527C167.183 101.655 166.899 101.579 166.771 101.357C166.643 101.135 166.719 100.852 166.941 100.724L168.129 100.037H166.418C166.247 100.037 166.108 99.899 166.108 99.7282C166.108 99.5575 166.247 99.419 166.418 99.419H169.2L171.296 98.2088L169.544 97.1971L166.309 97.1971C166.138 97.1971 166 97.0586 166 96.8879C166 96.7171 166.138 96.5787 166.309 96.5787H168.473L167.136 95.8067C166.914 95.6786 166.838 95.395 166.966 95.1732C167.094 94.9513 167.378 94.8753 167.6 95.0034L168.788 95.6896L167.932 94.2071C167.847 94.0592 167.898 93.8701 168.045 93.7847C168.193 93.6994 168.382 93.75 168.468 93.8979L169.859 96.308L171.565 97.2931V95.3914L170.174 92.9813C170.089 92.8334 170.139 92.6443 170.287 92.5589C170.435 92.4735 170.624 92.5242 170.71 92.6721L171.565 94.1547V92.7138Z" fill="url(#paint28_linear_15171_992)"/>
+<g filter="url(#filter2_f_15171_992)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M137.312 10.18C137.312 9.81037 137.611 9.51074 137.981 9.51074C138.351 9.51074 138.65 9.81037 138.65 10.18V12.4819L139.995 10.1535C140.118 9.94006 140.391 9.86695 140.604 9.99015C140.818 10.1133 140.891 10.3862 140.767 10.5996L138.65 14.2665V17.1116L141.589 15.4152L143.596 11.9387C143.719 11.7253 143.992 11.6522 144.205 11.7754C144.419 11.8986 144.492 12.1715 144.368 12.3849L143.134 14.5229L144.934 13.4838C145.254 13.2989 145.663 13.4086 145.848 13.7287C146.033 14.0488 145.923 14.4581 145.603 14.6429L143.673 15.7571H146.246C146.493 15.7571 146.692 15.9569 146.692 16.2033C146.692 16.4497 146.493 16.6494 146.246 16.6494L142.128 16.6494L139.601 18.1084L142.539 19.8049H146.554C146.801 19.8049 147.001 20.0047 147.001 20.2511C147.001 20.4975 146.801 20.6972 146.554 20.6972L144.085 20.6972L145.885 21.7369C146.206 21.9217 146.315 22.331 146.13 22.6511C145.946 22.9712 145.536 23.0808 145.216 22.896L142.965 21.5963L144.337 23.9734C144.461 24.1867 144.388 24.4596 144.174 24.5828C143.961 24.706 143.688 24.6329 143.565 24.4195L141.42 20.704L138.65 19.1052V22.6474L140.836 26.4332C140.959 26.6466 140.886 26.9195 140.673 27.0427C140.459 27.1659 140.187 27.0927 140.063 26.8794L138.65 24.432V26.6877C138.65 27.0573 138.351 27.3569 137.981 27.3569C137.611 27.3569 137.312 27.0573 137.312 26.6877V24.7066L136.077 26.8462C135.953 27.0596 135.681 27.1327 135.467 27.0095C135.254 26.8863 135.181 26.6135 135.304 26.4001L137.312 22.922V19.4299L134.915 20.8137L132.507 24.9853C132.383 25.1987 132.111 25.2719 131.897 25.1486C131.684 25.0254 131.611 24.7526 131.734 24.5392L133.37 21.706L131.307 22.8968C130.987 23.0816 130.578 22.9719 130.393 22.6518C130.208 22.3317 130.318 21.9224 130.638 21.7376L132.353 20.7475H129.883C129.636 20.7475 129.437 20.5477 129.437 20.3013C129.437 20.0549 129.636 19.8552 129.883 19.8552H133.898L136.924 18.1084L134.395 16.6485H129.727C129.481 16.6485 129.281 16.4487 129.281 16.2023C129.281 15.9559 129.481 15.7562 129.727 15.7562H132.85L130.92 14.6422C130.6 14.4574 130.49 14.0481 130.675 13.728C130.86 13.4079 131.269 13.2982 131.589 13.483L133.304 14.4731L132.069 12.3344C131.946 12.121 132.019 11.8481 132.233 11.7249C132.446 11.6017 132.719 11.6748 132.842 11.8882L134.85 15.3654L137.312 16.787V14.0442L135.304 10.5662C135.181 10.3528 135.254 10.0799 135.467 9.95674C135.681 9.83354 135.953 9.90665 136.077 10.12L137.312 12.2595V10.18Z" fill="url(#paint29_linear_15171_992)"/>
+</g>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M137.312 10.18C137.312 9.81037 137.611 9.51074 137.981 9.51074C138.351 9.51074 138.65 9.81037 138.65 10.18V12.4819L139.995 10.1535C140.118 9.94006 140.391 9.86695 140.604 9.99015C140.818 10.1133 140.891 10.3862 140.767 10.5996L138.65 14.2665V17.1116L141.589 15.4152L143.596 11.9387C143.719 11.7253 143.992 11.6522 144.205 11.7754C144.419 11.8986 144.492 12.1715 144.368 12.3849L143.134 14.5229L144.934 13.4838C145.254 13.2989 145.663 13.4086 145.848 13.7287C146.033 14.0488 145.923 14.4581 145.603 14.6429L143.673 15.7571H146.246C146.493 15.7571 146.692 15.9569 146.692 16.2033C146.692 16.4497 146.493 16.6494 146.246 16.6494L142.128 16.6494L139.601 18.1084L142.539 19.8049H146.554C146.801 19.8049 147.001 20.0047 147.001 20.2511C147.001 20.4975 146.801 20.6972 146.554 20.6972L144.085 20.6972L145.885 21.7369C146.206 21.9217 146.315 22.331 146.13 22.6511C145.946 22.9712 145.536 23.0808 145.216 22.896L142.965 21.5963L144.337 23.9734C144.461 24.1867 144.388 24.4596 144.174 24.5828C143.961 24.706 143.688 24.6329 143.565 24.4195L141.42 20.704L138.65 19.1052V22.6474L140.836 26.4332C140.959 26.6466 140.886 26.9195 140.673 27.0427C140.459 27.1659 140.187 27.0927 140.063 26.8794L138.65 24.432V26.6877C138.65 27.0573 138.351 27.3569 137.981 27.3569C137.611 27.3569 137.312 27.0573 137.312 26.6877V24.7066L136.077 26.8462C135.953 27.0596 135.681 27.1327 135.467 27.0095C135.254 26.8863 135.181 26.6135 135.304 26.4001L137.312 22.922V19.4299L134.915 20.8137L132.507 24.9853C132.383 25.1987 132.111 25.2719 131.897 25.1486C131.684 25.0254 131.611 24.7526 131.734 24.5392L133.37 21.706L131.307 22.8968C130.987 23.0816 130.578 22.9719 130.393 22.6518C130.208 22.3317 130.318 21.9224 130.638 21.7376L132.353 20.7475H129.883C129.636 20.7475 129.437 20.5477 129.437 20.3013C129.437 20.0549 129.636 19.8552 129.883 19.8552H133.898L136.924 18.1084L134.395 16.6485H129.727C129.481 16.6485 129.281 16.4487 129.281 16.2023C129.281 15.9559 129.481 15.7562 129.727 15.7562H132.85L130.92 14.6422C130.6 14.4574 130.49 14.0481 130.675 13.728C130.86 13.4079 131.269 13.2982 131.589 13.483L133.304 14.4731L132.069 12.3344C131.946 12.121 132.019 11.8481 132.233 11.7249C132.446 11.6017 132.719 11.6748 132.842 11.8882L134.85 15.3654L137.312 16.787V14.0442L135.304 10.5662C135.181 10.3528 135.254 10.0799 135.467 9.95674C135.681 9.83354 135.953 9.90665 136.077 10.12L137.312 12.2595V10.18Z" fill="url(#paint30_linear_15171_992)"/>
+<g filter="url(#filter3_f_15171_992)">
+<g filter="url(#filter4_f_15171_992)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M41.0306 57.9192C41.0306 57.5496 41.3302 57.25 41.6999 57.25C42.0695 57.25 42.3691 57.5496 42.3691 57.9192V60.2212L43.7134 57.8927C43.8366 57.6793 44.1095 57.6062 44.3229 57.7294C44.5363 57.8526 44.6094 58.1255 44.4862 58.3389L42.3691 62.0058V64.8509L45.3073 63.1545L47.3145 59.678C47.4377 59.4646 47.7105 59.3915 47.9239 59.5147C48.1373 59.6379 48.2104 59.9107 48.0872 60.1241L46.8528 62.2622L48.6527 61.223C48.9728 61.0382 49.3821 61.1479 49.5669 61.468C49.7517 61.7881 49.642 62.1974 49.3219 62.3822L47.3921 63.4964H49.9651C50.2115 63.4964 50.4112 63.6961 50.4112 63.9425C50.4112 64.1889 50.2115 64.3887 49.9651 64.3887L45.8466 64.3887L43.3195 65.8477L46.2579 67.5442H50.2732C50.5196 67.5442 50.7194 67.7439 50.7194 67.9903C50.7194 68.2367 50.5196 68.4365 50.2732 68.4365L47.8034 68.4365L49.6042 69.4761C49.9243 69.6609 50.0339 70.0702 49.8491 70.3903C49.6643 70.7104 49.255 70.8201 48.9349 70.6353L46.6838 69.3356L48.0562 71.7126C48.1794 71.926 48.1063 72.1989 47.8929 72.3221C47.6795 72.4453 47.4066 72.3722 47.2834 72.1588L45.1383 68.4433L42.3691 66.8445V70.3867L44.5548 74.1725C44.678 74.3859 44.6049 74.6587 44.3915 74.7819C44.1781 74.9051 43.9053 74.832 43.7821 74.6186L42.3691 72.1713V74.427C42.3691 74.7966 42.0695 75.0962 41.6999 75.0962C41.3302 75.0962 41.0306 74.7966 41.0306 74.427V72.4459L39.7953 74.5855C39.6721 74.7989 39.3993 74.872 39.1859 74.7488C38.9725 74.6256 38.8994 74.3527 39.0226 74.1393L41.0306 70.6613V67.1692L38.6339 68.5529L36.2253 72.7246C36.1021 72.938 35.8293 73.0111 35.6159 72.8879C35.4025 72.7647 35.3294 72.4918 35.4526 72.2784L37.0883 69.4452L35.0258 70.636C34.7057 70.8208 34.2964 70.7112 34.1116 70.3911C33.9268 70.071 34.0365 69.6617 34.3566 69.4769L36.0715 68.4868H33.6014C33.355 68.4868 33.1553 68.287 33.1553 68.0406C33.1553 67.7942 33.355 67.5944 33.6014 67.5944H37.6171L40.6425 65.8477L38.1138 64.3877H33.4462C33.1997 64.3877 33 64.188 33 63.9416C33 63.6952 33.1997 63.4954 33.4462 63.4954H36.5683L34.6388 62.3814C34.3187 62.1966 34.2091 61.7873 34.3939 61.4672C34.5787 61.1471 34.988 61.0375 35.3081 61.2223L37.023 62.2124L35.7882 60.0736C35.665 59.8602 35.7381 59.5874 35.9515 59.4642C36.1649 59.341 36.4377 59.4141 36.5609 59.6275L38.5685 63.1047L41.0306 64.5262V61.7834L39.0226 58.3055C38.8994 58.0921 38.9725 57.8192 39.1859 57.696C39.3993 57.5728 39.6722 57.6459 39.7954 57.8593L41.0306 59.9988V57.9192Z" fill="url(#paint31_linear_15171_992)"/>
+</g>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M41.0306 57.9192C41.0306 57.5496 41.3302 57.25 41.6999 57.25C42.0695 57.25 42.3691 57.5496 42.3691 57.9192V60.2212L43.7134 57.8927C43.8366 57.6793 44.1095 57.6062 44.3229 57.7294C44.5363 57.8526 44.6094 58.1255 44.4862 58.3389L42.3691 62.0058V64.8509L45.3073 63.1545L47.3145 59.678C47.4377 59.4646 47.7105 59.3915 47.9239 59.5147C48.1373 59.6379 48.2104 59.9107 48.0872 60.1241L46.8528 62.2622L48.6527 61.223C48.9728 61.0382 49.3821 61.1479 49.5669 61.468C49.7517 61.7881 49.642 62.1974 49.3219 62.3822L47.3921 63.4964H49.9651C50.2115 63.4964 50.4112 63.6961 50.4112 63.9425C50.4112 64.1889 50.2115 64.3887 49.9651 64.3887L45.8466 64.3887L43.3195 65.8477L46.2579 67.5442H50.2732C50.5196 67.5442 50.7194 67.7439 50.7194 67.9903C50.7194 68.2367 50.5196 68.4365 50.2732 68.4365L47.8034 68.4365L49.6042 69.4761C49.9243 69.6609 50.0339 70.0702 49.8491 70.3903C49.6643 70.7104 49.255 70.8201 48.9349 70.6353L46.6838 69.3356L48.0562 71.7126C48.1794 71.926 48.1063 72.1989 47.8929 72.3221C47.6795 72.4453 47.4066 72.3722 47.2834 72.1588L45.1383 68.4433L42.3691 66.8445V70.3867L44.5548 74.1725C44.678 74.3859 44.6049 74.6587 44.3915 74.7819C44.1781 74.9051 43.9053 74.832 43.7821 74.6186L42.3691 72.1713V74.427C42.3691 74.7966 42.0695 75.0962 41.6999 75.0962C41.3302 75.0962 41.0306 74.7966 41.0306 74.427V72.4459L39.7953 74.5855C39.6721 74.7989 39.3993 74.872 39.1859 74.7488C38.9725 74.6256 38.8994 74.3527 39.0226 74.1393L41.0306 70.6613V67.1692L38.6339 68.5529L36.2253 72.7246C36.1021 72.938 35.8293 73.0111 35.6159 72.8879C35.4025 72.7647 35.3294 72.4918 35.4526 72.2784L37.0883 69.4452L35.0258 70.636C34.7057 70.8208 34.2964 70.7112 34.1116 70.3911C33.9268 70.071 34.0365 69.6617 34.3566 69.4769L36.0715 68.4868H33.6014C33.355 68.4868 33.1553 68.287 33.1553 68.0406C33.1553 67.7942 33.355 67.5944 33.6014 67.5944H37.6171L40.6425 65.8477L38.1138 64.3877H33.4462C33.1997 64.3877 33 64.188 33 63.9416C33 63.6952 33.1997 63.4954 33.4462 63.4954H36.5683L34.6388 62.3814C34.3187 62.1966 34.2091 61.7873 34.3939 61.4672C34.5787 61.1471 34.988 61.0375 35.3081 61.2223L37.023 62.2124L35.7882 60.0736C35.665 59.8602 35.7381 59.5874 35.9515 59.4642C36.1649 59.341 36.4377 59.4141 36.5609 59.6275L38.5685 63.1047L41.0306 64.5262V61.7834L39.0226 58.3055C38.8994 58.0921 38.9725 57.8192 39.1859 57.696C39.3993 57.5728 39.6722 57.6459 39.7954 57.8593L41.0306 59.9988V57.9192Z" fill="url(#paint32_linear_15171_992)"/>
+</g>
+<g filter="url(#filter5_f_15171_992)">
+<g filter="url(#filter6_f_15171_992)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M156.659 55.6383C156.659 55.4238 156.833 55.25 157.047 55.25C157.262 55.25 157.436 55.4238 157.436 55.6383V56.9742L158.216 55.623C158.287 55.4992 158.446 55.4568 158.569 55.5283C158.693 55.5998 158.736 55.7581 158.664 55.8819L157.436 58.0097V59.66L159.141 58.6756L160.305 56.6589C160.377 56.5351 160.535 56.4927 160.659 56.5642C160.783 56.6357 160.825 56.794 160.753 56.9178L160.037 58.1579L161.081 57.5552C161.267 57.4479 161.505 57.5116 161.612 57.6973C161.719 57.883 161.655 58.1205 161.47 58.2277L160.35 58.8743L161.843 58.8743C161.986 58.8743 162.102 58.9902 162.102 59.1331C162.102 59.2761 161.986 59.392 161.843 59.392H159.453L157.987 60.2383L159.692 61.2226L162.022 61.2226C162.165 61.2226 162.28 61.3385 162.28 61.4814C162.28 61.6244 162.165 61.7403 162.022 61.7403H160.589L161.634 62.3435C161.819 62.4507 161.883 62.6882 161.776 62.8739C161.668 63.0596 161.431 63.1232 161.245 63.016L159.939 62.2621L160.735 63.641C160.807 63.7648 160.765 63.9231 160.641 63.9946C160.517 64.0661 160.359 64.0237 160.287 63.8999L159.043 61.7444L157.436 60.8166V62.8715L158.704 65.0682C158.776 65.192 158.733 65.3503 158.609 65.4218C158.485 65.4933 158.327 65.4509 158.256 65.3271L157.436 63.9069V65.2159C157.436 65.4304 157.262 65.6042 157.047 65.6042C156.833 65.6042 156.659 65.4304 156.659 65.2159V64.0666L155.942 65.3079C155.871 65.4317 155.713 65.4742 155.589 65.4027C155.465 65.3312 155.423 65.1729 155.494 65.0491L156.659 63.0312V61.0051L155.269 61.8078L153.871 64.2284C153.8 64.3522 153.641 64.3946 153.518 64.3232C153.394 64.2517 153.351 64.0934 153.423 63.9696L154.372 62.3255L153.175 63.0165C152.99 63.1237 152.752 63.0601 152.645 62.8744C152.538 62.6887 152.601 62.4512 152.787 62.344L153.782 61.7695L152.349 61.7695C152.206 61.7695 152.09 61.6536 152.09 61.5107C152.09 61.3677 152.206 61.2518 152.349 61.2518H154.679L156.434 60.2383L154.967 59.3913H152.259C152.116 59.3913 152 59.2754 152 59.1325C152 58.9895 152.116 58.8736 152.259 58.8736H154.07L152.951 58.2272C152.765 58.12 152.701 57.8825 152.809 57.6968C152.916 57.5111 153.153 57.4474 153.339 57.5547L154.334 58.1291L153.618 56.8882C153.546 56.7644 153.589 56.6061 153.712 56.5346C153.836 56.4631 153.994 56.5055 154.066 56.6294L155.231 58.6468L156.659 59.4716V57.8804L155.494 55.8624C155.423 55.7386 155.465 55.5803 155.589 55.5088C155.713 55.4373 155.871 55.4798 155.942 55.6036L156.659 56.845V55.6383Z" fill="url(#paint33_linear_15171_992)"/>
+</g>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M156.659 55.6383C156.659 55.4238 156.833 55.25 157.047 55.25C157.262 55.25 157.436 55.4238 157.436 55.6383V56.9742L158.216 55.623C158.287 55.4992 158.446 55.4568 158.569 55.5283C158.693 55.5998 158.736 55.7581 158.664 55.8819L157.436 58.0097V59.66L159.141 58.6756L160.305 56.6589C160.377 56.5351 160.535 56.4927 160.659 56.5642C160.783 56.6357 160.825 56.794 160.753 56.9178L160.037 58.1579L161.081 57.5552C161.267 57.4479 161.505 57.5116 161.612 57.6973C161.719 57.883 161.655 58.1205 161.47 58.2277L160.35 58.8743L161.843 58.8743C161.986 58.8743 162.102 58.9902 162.102 59.1331C162.102 59.2761 161.986 59.392 161.843 59.392H159.453L157.987 60.2383L159.692 61.2226L162.022 61.2226C162.165 61.2226 162.28 61.3385 162.28 61.4814C162.28 61.6244 162.165 61.7403 162.022 61.7403H160.589L161.634 62.3435C161.819 62.4507 161.883 62.6882 161.776 62.8739C161.668 63.0596 161.431 63.1232 161.245 63.016L159.939 62.2621L160.735 63.641C160.807 63.7648 160.765 63.9231 160.641 63.9946C160.517 64.0661 160.359 64.0237 160.287 63.8999L159.043 61.7444L157.436 60.8166V62.8715L158.704 65.0682C158.776 65.192 158.733 65.3503 158.609 65.4218C158.485 65.4933 158.327 65.4509 158.256 65.3271L157.436 63.9069V65.2159C157.436 65.4304 157.262 65.6042 157.047 65.6042C156.833 65.6042 156.659 65.4304 156.659 65.2159V64.0666L155.942 65.3079C155.871 65.4317 155.713 65.4742 155.589 65.4027C155.465 65.3312 155.423 65.1729 155.494 65.0491L156.659 63.0312V61.0051L155.269 61.8078L153.871 64.2284C153.8 64.3522 153.641 64.3946 153.518 64.3232C153.394 64.2517 153.351 64.0934 153.423 63.9696L154.372 62.3255L153.175 63.0165C152.99 63.1237 152.752 63.0601 152.645 62.8744C152.538 62.6887 152.601 62.4512 152.787 62.344L153.782 61.7695L152.349 61.7695C152.206 61.7695 152.09 61.6536 152.09 61.5107C152.09 61.3677 152.206 61.2518 152.349 61.2518H154.679L156.434 60.2383L154.967 59.3913H152.259C152.116 59.3913 152 59.2754 152 59.1325C152 58.9895 152.116 58.8736 152.259 58.8736H154.07L152.951 58.2272C152.765 58.12 152.701 57.8825 152.809 57.6968C152.916 57.5111 153.153 57.4474 153.339 57.5547L154.334 58.1291L153.618 56.8882C153.546 56.7644 153.589 56.6061 153.712 56.5346C153.836 56.4631 153.994 56.5055 154.066 56.6294L155.231 58.6468L156.659 59.4716V57.8804L155.494 55.8624C155.423 55.7386 155.465 55.5803 155.589 55.5088C155.713 55.4373 155.871 55.4798 155.942 55.6036L156.659 56.845V55.6383Z" fill="url(#paint34_linear_15171_992)"/>
+</g>
+<g filter="url(#filter7_f_15171_992)">
+<g filter="url(#filter8_f_15171_992)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M76.7591 13.5633C76.7591 13.3903 76.8993 13.25 77.0723 13.25C77.2454 13.25 77.3856 13.3903 77.3856 13.5633V14.6414L78.0151 13.5511C78.0728 13.4512 78.2005 13.417 78.3004 13.4747C78.4003 13.5323 78.4345 13.6601 78.3769 13.76L77.3856 15.4768V16.8081L78.761 16.0141L79.7006 14.3867C79.7583 14.2868 79.886 14.2525 79.9859 14.3102C80.0858 14.3679 80.12 14.4956 80.0623 14.5955L79.4845 15.5964L80.3273 15.1098C80.4771 15.0233 80.6687 15.0746 80.7552 15.2244C80.8418 15.3743 80.7904 15.5659 80.6406 15.6524L79.7373 16.1739L80.9417 16.1739C81.0571 16.1739 81.1506 16.2674 81.1506 16.3828C81.1506 16.4981 81.0571 16.5916 80.9417 16.5916L79.0138 16.5916L77.8306 17.2747L79.2058 18.0686L81.0859 18.0686C81.2013 18.0686 81.2948 18.1621 81.2948 18.2775C81.2948 18.3928 81.2013 18.4863 81.0859 18.4863H79.9293L80.7728 18.9733C80.9226 19.0598 80.9739 19.2514 80.8874 19.4013C80.8009 19.5511 80.6093 19.6025 80.4595 19.516L79.4062 18.9079L80.0484 20.0201C80.1061 20.12 80.0718 20.2477 79.9719 20.3054C79.872 20.3631 79.7443 20.3289 79.6866 20.229L78.6827 18.4902L77.3856 17.7413V19.3993L78.409 21.1718C78.4667 21.2717 78.4324 21.3994 78.3325 21.4571C78.2327 21.5148 78.1049 21.4806 78.0472 21.3807L77.3856 20.2347V21.2909C77.3856 21.464 77.2454 21.6042 77.0723 21.6042C76.8993 21.6042 76.7591 21.464 76.7591 21.2909V20.3638L76.1809 21.3651C76.1233 21.465 75.9955 21.4992 75.8956 21.4415C75.7957 21.3839 75.7615 21.2561 75.8192 21.1562L76.7591 19.5283V17.8934L75.6367 18.5414L74.5095 20.4938C74.4518 20.5937 74.324 20.6279 74.2242 20.5703C74.1243 20.5126 74.09 20.3848 74.1477 20.285L74.9132 18.9591L73.9482 19.5162C73.7984 19.6027 73.6068 19.5514 73.5203 19.4016C73.4338 19.2517 73.4851 19.0601 73.6349 18.9736L74.438 18.51H73.2814C73.166 18.51 73.0725 18.4165 73.0725 18.3011C73.0725 18.1858 73.166 18.0923 73.2814 18.0923H75.1615L76.5775 17.2747L75.3937 16.5913L73.2089 16.5913C73.0935 16.5913 73 16.4977 73 16.3824C73 16.2671 73.0935 16.1735 73.2089 16.1735L74.6702 16.1735L73.7671 15.6521C73.6173 15.5656 73.5659 15.374 73.6525 15.2242C73.739 15.0743 73.9306 15.023 74.0804 15.1095L74.8835 15.5732L74.3053 14.5717C74.2477 14.4718 74.2819 14.3441 74.3818 14.2864C74.4817 14.2287 74.6094 14.263 74.6671 14.3629L75.607 15.9909L76.7591 16.656V15.3719L75.8192 13.7441C75.7615 13.6442 75.7958 13.5165 75.8957 13.4588C75.9955 13.4011 76.1233 13.4353 76.181 13.5352L76.7591 14.5365V13.5633Z" fill="url(#paint35_linear_15171_992)"/>
+</g>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M76.7591 13.5633C76.7591 13.3903 76.8993 13.25 77.0723 13.25C77.2454 13.25 77.3856 13.3903 77.3856 13.5633V14.6414L78.0151 13.5511C78.0728 13.4512 78.2005 13.417 78.3004 13.4747C78.4003 13.5323 78.4345 13.6601 78.3769 13.76L77.3856 15.4768V16.8081L78.761 16.0141L79.7006 14.3867C79.7583 14.2868 79.886 14.2525 79.9859 14.3102C80.0858 14.3679 80.12 14.4956 80.0623 14.5955L79.4845 15.5964L80.3273 15.1098C80.4771 15.0233 80.6687 15.0746 80.7552 15.2244C80.8418 15.3743 80.7904 15.5659 80.6406 15.6524L79.7373 16.1739L80.9417 16.1739C81.0571 16.1739 81.1506 16.2674 81.1506 16.3828C81.1506 16.4981 81.0571 16.5916 80.9417 16.5916L79.0138 16.5916L77.8306 17.2747L79.2058 18.0686L81.0859 18.0686C81.2013 18.0686 81.2948 18.1621 81.2948 18.2775C81.2948 18.3928 81.2013 18.4863 81.0859 18.4863H79.9293L80.7728 18.9733C80.9226 19.0598 80.9739 19.2514 80.8874 19.4013C80.8009 19.5511 80.6093 19.6025 80.4595 19.516L79.4062 18.9079L80.0484 20.0201C80.1061 20.12 80.0718 20.2477 79.9719 20.3054C79.872 20.3631 79.7443 20.3289 79.6866 20.229L78.6827 18.4902L77.3856 17.7413V19.3993L78.409 21.1718C78.4667 21.2717 78.4324 21.3994 78.3325 21.4571C78.2327 21.5148 78.1049 21.4806 78.0472 21.3807L77.3856 20.2347V21.2909C77.3856 21.464 77.2454 21.6042 77.0723 21.6042C76.8993 21.6042 76.7591 21.464 76.7591 21.2909V20.3638L76.1809 21.3651C76.1233 21.465 75.9955 21.4992 75.8956 21.4415C75.7957 21.3839 75.7615 21.2561 75.8192 21.1562L76.7591 19.5283V17.8934L75.6367 18.5414L74.5095 20.4938C74.4518 20.5937 74.324 20.6279 74.2242 20.5703C74.1243 20.5126 74.09 20.3848 74.1477 20.285L74.9132 18.9591L73.9482 19.5162C73.7984 19.6027 73.6068 19.5514 73.5203 19.4016C73.4338 19.2517 73.4851 19.0601 73.6349 18.9736L74.438 18.51H73.2814C73.166 18.51 73.0725 18.4165 73.0725 18.3011C73.0725 18.1858 73.166 18.0923 73.2814 18.0923H75.1615L76.5775 17.2747L75.3937 16.5913L73.2089 16.5913C73.0935 16.5913 73 16.4977 73 16.3824C73 16.2671 73.0935 16.1735 73.2089 16.1735L74.6702 16.1735L73.7671 15.6521C73.6173 15.5656 73.5659 15.374 73.6525 15.2242C73.739 15.0743 73.9306 15.023 74.0804 15.1095L74.8835 15.5732L74.3053 14.5717C74.2477 14.4718 74.2819 14.3441 74.3818 14.2864C74.4817 14.2287 74.6094 14.263 74.6671 14.3629L75.607 15.9909L76.7591 16.656V15.3719L75.8192 13.7441C75.7615 13.6442 75.7958 13.5165 75.8957 13.4588C75.9955 13.4011 76.1233 13.4353 76.181 13.5352L76.7591 14.5365V13.5633Z" fill="url(#paint36_linear_15171_992)"/>
+</g>
+<g filter="url(#filter9_f_15171_992)">
+<g filter="url(#filter10_f_15171_992)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M50.7591 97.5633C50.7591 97.3903 50.8993 97.25 51.0723 97.25C51.2454 97.25 51.3856 97.3903 51.3856 97.5633V98.6414L52.0151 97.5511C52.0728 97.4512 52.2005 97.417 52.3004 97.4747C52.4003 97.5323 52.4345 97.6601 52.3769 97.76L51.3856 99.4768V100.808L52.761 100.014L53.7006 98.3867C53.7583 98.2868 53.886 98.2525 53.9859 98.3102C54.0858 98.3679 54.12 98.4956 54.0623 98.5955L53.4845 99.5964L54.3273 99.1098C54.4771 99.0233 54.6687 99.0746 54.7552 99.2244C54.8418 99.3743 54.7904 99.5659 54.6406 99.6524L53.7373 100.174L54.9417 100.174C55.0571 100.174 55.1506 100.267 55.1506 100.383C55.1506 100.498 55.0571 100.592 54.9417 100.592L53.0138 100.592L51.8306 101.275L53.2058 102.069L55.0859 102.069C55.2013 102.069 55.2948 102.162 55.2948 102.277C55.2948 102.393 55.2013 102.486 55.0859 102.486H53.9293L54.7728 102.973C54.9226 103.06 54.9739 103.251 54.8874 103.401C54.8009 103.551 54.6093 103.602 54.4595 103.516L53.4062 102.908L54.0484 104.02C54.1061 104.12 54.0718 104.248 53.9719 104.305C53.872 104.363 53.7443 104.329 53.6866 104.229L52.6827 102.49L51.3856 101.741V103.399L52.409 105.172C52.4667 105.272 52.4324 105.399 52.3325 105.457C52.2327 105.515 52.1049 105.481 52.0472 105.381L51.3856 104.235V105.291C51.3856 105.464 51.2454 105.604 51.0723 105.604C50.8993 105.604 50.7591 105.464 50.7591 105.291V104.364L50.1809 105.365C50.1233 105.465 49.9955 105.499 49.8956 105.442C49.7957 105.384 49.7615 105.256 49.8192 105.156L50.7591 103.528V101.893L49.6367 102.541L48.5095 104.494C48.4518 104.594 48.324 104.628 48.2242 104.57C48.1243 104.513 48.09 104.385 48.1477 104.285L48.9132 102.959L47.9482 103.516C47.7984 103.603 47.6068 103.551 47.5203 103.402C47.4338 103.252 47.4851 103.06 47.6349 102.974L48.438 102.51H47.2814C47.166 102.51 47.0725 102.416 47.0725 102.301C47.0725 102.186 47.166 102.092 47.2814 102.092H49.1615L50.5775 101.275L49.3937 100.591L47.2089 100.591C47.0935 100.591 47 100.498 47 100.382C47 100.267 47.0935 100.174 47.2089 100.174L48.6702 100.174L47.7671 99.6521C47.6173 99.5656 47.5659 99.374 47.6525 99.2242C47.739 99.0743 47.9306 99.023 48.0804 99.1095L48.8835 99.5732L48.3053 98.5717C48.2477 98.4718 48.2819 98.3441 48.3818 98.2864C48.4817 98.2287 48.6094 98.263 48.6671 98.3629L49.607 99.9909L50.7591 100.656V99.3719L49.8192 97.7441C49.7615 97.6442 49.7958 97.5165 49.8957 97.4588C49.9955 97.4011 50.1233 97.4353 50.181 97.5352L50.7591 98.5365V97.5633Z" fill="url(#paint37_linear_15171_992)"/>
+</g>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M50.7591 97.5633C50.7591 97.3903 50.8993 97.25 51.0723 97.25C51.2454 97.25 51.3856 97.3903 51.3856 97.5633V98.6414L52.0151 97.5511C52.0728 97.4512 52.2005 97.417 52.3004 97.4747C52.4003 97.5323 52.4345 97.6601 52.3769 97.76L51.3856 99.4768V100.808L52.761 100.014L53.7006 98.3867C53.7583 98.2868 53.886 98.2525 53.9859 98.3102C54.0858 98.3679 54.12 98.4956 54.0623 98.5955L53.4845 99.5964L54.3273 99.1098C54.4771 99.0233 54.6687 99.0746 54.7552 99.2244C54.8418 99.3743 54.7904 99.5659 54.6406 99.6524L53.7373 100.174L54.9417 100.174C55.0571 100.174 55.1506 100.267 55.1506 100.383C55.1506 100.498 55.0571 100.592 54.9417 100.592L53.0138 100.592L51.8306 101.275L53.2058 102.069L55.0859 102.069C55.2013 102.069 55.2948 102.162 55.2948 102.277C55.2948 102.393 55.2013 102.486 55.0859 102.486H53.9293L54.7728 102.973C54.9226 103.06 54.9739 103.251 54.8874 103.401C54.8009 103.551 54.6093 103.602 54.4595 103.516L53.4062 102.908L54.0484 104.02C54.1061 104.12 54.0718 104.248 53.9719 104.305C53.872 104.363 53.7443 104.329 53.6866 104.229L52.6827 102.49L51.3856 101.741V103.399L52.409 105.172C52.4667 105.272 52.4324 105.399 52.3325 105.457C52.2327 105.515 52.1049 105.481 52.0472 105.381L51.3856 104.235V105.291C51.3856 105.464 51.2454 105.604 51.0723 105.604C50.8993 105.604 50.7591 105.464 50.7591 105.291V104.364L50.1809 105.365C50.1233 105.465 49.9955 105.499 49.8956 105.442C49.7957 105.384 49.7615 105.256 49.8192 105.156L50.7591 103.528V101.893L49.6367 102.541L48.5095 104.494C48.4518 104.594 48.324 104.628 48.2242 104.57C48.1243 104.513 48.09 104.385 48.1477 104.285L48.9132 102.959L47.9482 103.516C47.7984 103.603 47.6068 103.551 47.5203 103.402C47.4338 103.252 47.4851 103.06 47.6349 102.974L48.438 102.51H47.2814C47.166 102.51 47.0725 102.416 47.0725 102.301C47.0725 102.186 47.166 102.092 47.2814 102.092H49.1615L50.5775 101.275L49.3937 100.591L47.2089 100.591C47.0935 100.591 47 100.498 47 100.382C47 100.267 47.0935 100.174 47.2089 100.174L48.6702 100.174L47.7671 99.6521C47.6173 99.5656 47.5659 99.374 47.6525 99.2242C47.739 99.0743 47.9306 99.023 48.0804 99.1095L48.8835 99.5732L48.3053 98.5717C48.2477 98.4718 48.2819 98.3441 48.3818 98.2864C48.4817 98.2287 48.6094 98.263 48.6671 98.3629L49.607 99.9909L50.7591 100.656V99.3719L49.8192 97.7441C49.7615 97.6442 49.7958 97.5165 49.8957 97.4588C49.9955 97.4011 50.1233 97.4353 50.181 97.5352L50.7591 98.5365V97.5633Z" fill="url(#paint38_linear_15171_992)"/>
+</g>
+</g>
+<defs>
+<pattern id="pattern0" patternContentUnits="objectBoundingBox" width="1" height="1">
+<use xlink:href="#image0_15171_992" transform="scale(0.0588235)"/>
+</pattern>
+<filter id="filter0_f_15171_992" x="44.7197" y="16.0254" width="40.2803" height="40.3679" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="7" result="effect1_foregroundBlur_15171_992"/>
+</filter>
+<filter id="filter1_f_15171_992" x="152" y="78.25" width="40.2803" height="40.3679" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="7" result="effect1_foregroundBlur_15171_992"/>
+</filter>
+<filter id="filter2_f_15171_992" x="115.281" y="-4.48926" width="45.7197" height="45.8462" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="7" result="effect1_foregroundBlur_15171_992"/>
+</filter>
+<filter id="filter3_f_15171_992" x="30" y="54.25" width="23.7197" height="23.8462" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="1.5" result="effect1_foregroundBlur_15171_992"/>
+</filter>
+<filter id="filter4_f_15171_992" x="19" y="43.25" width="45.7197" height="45.8462" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="7" result="effect1_foregroundBlur_15171_992"/>
+</filter>
+<filter id="filter5_f_15171_992" x="151" y="54.25" width="12.2803" height="12.3542" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.5" result="effect1_foregroundBlur_15171_992"/>
+</filter>
+<filter id="filter6_f_15171_992" x="138" y="41.25" width="38.2803" height="38.3542" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="7" result="effect1_foregroundBlur_15171_992"/>
+</filter>
+<filter id="filter7_f_15171_992" x="72" y="12.25" width="10.2949" height="10.3542" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.5" result="effect1_foregroundBlur_15171_992"/>
+</filter>
+<filter id="filter8_f_15171_992" x="59" y="-0.75" width="36.2949" height="36.3542" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="7" result="effect1_foregroundBlur_15171_992"/>
+</filter>
+<filter id="filter9_f_15171_992" x="46" y="96.25" width="10.2949" height="10.3542" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.5" result="effect1_foregroundBlur_15171_992"/>
+</filter>
+<filter id="filter10_f_15171_992" x="33" y="83.25" width="36.2949" height="36.3542" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="7" result="effect1_foregroundBlur_15171_992"/>
+</filter>
+<linearGradient id="paint0_linear_15171_992" x1="69.7223" y1="182.25" x2="142.278" y2="182.25" gradientUnits="userSpaceOnUse">
+<stop stop-color="#E6E6E6"/>
+<stop offset="0.1" stop-color="#F2F2F2"/>
+<stop offset="0.1619" stop-color="#E9E9E9"/>
+<stop offset="0.2886" stop-color="#DDDDDD"/>
+<stop offset="0.411" stop-color="#D9D9D9"/>
+<stop offset="0.5325" stop-color="#E2E2E2"/>
+<stop offset="0.7117" stop-color="#F7F7F7"/>
+<stop offset="0.8282" stop-color="#EEEEEE"/>
+<stop offset="1" stop-color="#D9D9D9"/>
+</linearGradient>
+<linearGradient id="paint1_linear_15171_992" x1="69.7223" y1="182.25" x2="142.278" y2="182.25" gradientUnits="userSpaceOnUse">
+<stop stop-color="#E6E6E6"/>
+<stop offset="0.1" stop-color="#F2F2F2"/>
+<stop offset="0.1619" stop-color="#E9E9E9"/>
+<stop offset="0.2886" stop-color="#DDDDDD"/>
+<stop offset="0.411" stop-color="#D9D9D9"/>
+<stop offset="0.5325" stop-color="#E2E2E2"/>
+<stop offset="0.7117" stop-color="#F7F7F7"/>
+<stop offset="0.8282" stop-color="#EEEEEE"/>
+<stop offset="1" stop-color="#D9D9D9"/>
+</linearGradient>
+<linearGradient id="paint2_linear_15171_992" x1="106" y1="163.172" x2="106" y2="189.329" gradientUnits="userSpaceOnUse">
+<stop stop-color="#5F5F5F" stop-opacity="0"/>
+<stop offset="1"/>
+</linearGradient>
+<linearGradient id="paint3_linear_15171_992" x1="65.0007" y1="175.25" x2="146.999" y2="175.25" gradientUnits="userSpaceOnUse">
+<stop stop-color="#E6E6E6"/>
+<stop offset="0.1" stop-color="#F2F2F2"/>
+<stop offset="0.1619" stop-color="#E9E9E9"/>
+<stop offset="0.2886" stop-color="#DDDDDD"/>
+<stop offset="0.411" stop-color="#D9D9D9"/>
+<stop offset="0.5325" stop-color="#E2E2E2"/>
+<stop offset="0.7117" stop-color="#F7F7F7"/>
+<stop offset="0.8282" stop-color="#EEEEEE"/>
+<stop offset="1" stop-color="#D9D9D9"/>
+</linearGradient>
+<linearGradient id="paint4_linear_15171_992" x1="65.0007" y1="175.25" x2="146.999" y2="175.25" gradientUnits="userSpaceOnUse">
+<stop stop-color="#E6E6E6"/>
+<stop offset="0.1" stop-color="#F2F2F2"/>
+<stop offset="0.1619" stop-color="#E9E9E9"/>
+<stop offset="0.2886" stop-color="#DDDDDD"/>
+<stop offset="0.411" stop-color="#D9D9D9"/>
+<stop offset="0.5325" stop-color="#E2E2E2"/>
+<stop offset="0.7117" stop-color="#F7F7F7"/>
+<stop offset="0.8282" stop-color="#EEEEEE"/>
+<stop offset="1" stop-color="#D9D9D9"/>
+</linearGradient>
+<linearGradient id="paint5_linear_15171_992" x1="106" y1="153.689" x2="106" y2="183.25" gradientUnits="userSpaceOnUse">
+<stop stop-color="#5F5F5F" stop-opacity="0"/>
+<stop offset="1"/>
+</linearGradient>
+<linearGradient id="paint6_linear_15171_992" x1="65.0007" y1="109.75" x2="146.999" y2="109.75" gradientUnits="userSpaceOnUse">
+<stop stop-color="#E6E6E6"/>
+<stop offset="0.1" stop-color="#F2F2F2"/>
+<stop offset="0.1619" stop-color="#E9E9E9"/>
+<stop offset="0.2886" stop-color="#DDDDDD"/>
+<stop offset="0.411" stop-color="#D9D9D9"/>
+<stop offset="0.5325" stop-color="#E2E2E2"/>
+<stop offset="0.7117" stop-color="#F7F7F7"/>
+<stop offset="0.8282" stop-color="#EEEEEE"/>
+<stop offset="1" stop-color="#D9D9D9"/>
+</linearGradient>
+<linearGradient id="paint7_linear_15171_992" x1="96.7852" y1="179.752" x2="115.789" y2="179.752" gradientUnits="userSpaceOnUse">
+<stop stop-color="#9A9A9A"/>
+<stop offset="0.1" stop-color="#878787"/>
+<stop offset="0.1619" stop-color="#878787"/>
+<stop offset="0.2886" stop-color="#9A9A9A"/>
+<stop offset="0.411" stop-color="#959595"/>
+<stop offset="0.55" stop-color="#B7B7B7"/>
+<stop offset="0.7117" stop-color="#BEBEBE"/>
+<stop offset="0.8105" stop-color="#9D9D9D"/>
+<stop offset="0.9713" stop-color="#959595"/>
+<stop offset="1" stop-color="#828282"/>
+</linearGradient>
+<linearGradient id="paint8_linear_15171_992" x1="96.7852" y1="179.752" x2="115.789" y2="179.752" gradientUnits="userSpaceOnUse">
+<stop stop-color="#9A9A9A"/>
+<stop offset="0.1" stop-color="#878787"/>
+<stop offset="0.1619" stop-color="#878787"/>
+<stop offset="0.2886" stop-color="#9A9A9A"/>
+<stop offset="0.411" stop-color="#959595"/>
+<stop offset="0.55" stop-color="#B7B7B7"/>
+<stop offset="0.7117" stop-color="#BEBEBE"/>
+<stop offset="0.8105" stop-color="#9D9D9D"/>
+<stop offset="0.9713" stop-color="#959595"/>
+<stop offset="1" stop-color="#828282"/>
+</linearGradient>
+<linearGradient id="paint9_linear_15171_992" x1="95.438" y1="117.908" x2="116.208" y2="117.908" gradientUnits="userSpaceOnUse">
+<stop/>
+<stop offset="0.0199" stop-color="#050505"/>
+<stop offset="0.1314" stop-color="#1D1D1D"/>
+<stop offset="0.2" stop-color="#262626"/>
+<stop offset="0.2299" stop-color="#212121"/>
+<stop offset="0.3972" stop-color="#090909"/>
+<stop offset="0.5"/>
+<stop offset="0.75" stop-color="#262626"/>
+<stop offset="0.8357" stop-color="#1D1D1D"/>
+<stop offset="0.9751" stop-color="#050505"/>
+<stop offset="1"/>
+</linearGradient>
+<linearGradient id="paint10_linear_15171_992" x1="118.928" y1="150.208" x2="118.928" y2="162.847" gradientUnits="userSpaceOnUse">
+<stop/>
+<stop offset="1" stop-color="#999999"/>
+</linearGradient>
+<linearGradient id="paint11_linear_15171_992" x1="90.8532" y1="144.711" x2="90.8532" y2="161.871" gradientUnits="userSpaceOnUse">
+<stop/>
+<stop offset="1" stop-color="#999999"/>
+</linearGradient>
+<linearGradient id="paint12_linear_15171_992" x1="90.8532" y1="143.519" x2="90.8532" y2="160.679" gradientUnits="userSpaceOnUse">
+<stop stop-color="#E6E6E6"/>
+<stop offset="1" stop-color="#999999"/>
+</linearGradient>
+<linearGradient id="paint13_linear_15171_992" x1="90.851" y1="159.491" x2="90.851" y2="144.711" gradientUnits="userSpaceOnUse">
+<stop stop-color="#E6E6E6"/>
+<stop offset="1" stop-color="#999999"/>
+</linearGradient>
+<linearGradient id="paint14_linear_15171_992" x1="90.8518" y1="145.352" x2="90.8518" y2="151.304" gradientUnits="userSpaceOnUse">
+<stop/>
+<stop offset="1" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint15_linear_15171_992" x1="92.261" y1="152.295" x2="92.261" y2="152.086" gradientUnits="userSpaceOnUse">
+<stop/>
+<stop offset="1" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint16_linear_15171_992" x1="92.2624" y1="152.095" x2="92.2624" y2="151.938" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint17_linear_15171_992" x1="111.907" y1="154.403" x2="118.754" y2="154.403" gradientUnits="userSpaceOnUse">
+<stop/>
+<stop offset="1" stop-color="#999999"/>
+</linearGradient>
+<linearGradient id="paint18_linear_15171_992" x1="115.331" y1="150.514" x2="115.331" y2="157.347" gradientUnits="userSpaceOnUse">
+<stop stop-color="#E6E6E6"/>
+<stop offset="1" stop-color="#CCCCCC"/>
+</linearGradient>
+<linearGradient id="paint19_linear_15171_992" x1="115.331" y1="156.964" x2="115.331" y2="150.908" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F2F2F2"/>
+<stop offset="1" stop-color="#CCCCCC"/>
+</linearGradient>
+<linearGradient id="paint20_linear_15171_992" x1="125.041" y1="149.046" x2="125.041" y2="151.298" gradientUnits="userSpaceOnUse">
+<stop stop-color="#BFBFBF"/>
+<stop offset="1" stop-color="#808080"/>
+</linearGradient>
+<linearGradient id="paint21_linear_15171_992" x1="125.04" y1="152.33" x2="125.04" y2="154.582" gradientUnits="userSpaceOnUse">
+<stop stop-color="#BFBFBF"/>
+<stop offset="1" stop-color="#808080"/>
+</linearGradient>
+<linearGradient id="paint22_linear_15171_992" x1="125.04" y1="155.609" x2="125.04" y2="157.861" gradientUnits="userSpaceOnUse">
+<stop stop-color="#BFBFBF"/>
+<stop offset="1" stop-color="#808080"/>
+</linearGradient>
+<radialGradient id="paint23_radial_15171_992" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(149.532 88.9186) rotate(-153.682) scale(69.1081 40.4263)">
+<stop stop-color="#143588"/>
+<stop offset="0.731598" stop-color="#405FAD"/>
+</radialGradient>
+<radialGradient id="paint24_radial_15171_992" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(145.256 70.0585) rotate(-149.676) scale(64.6663 41.484)">
+<stop stop-color="#143588"/>
+<stop offset="0.731598" stop-color="#405FAD"/>
+</radialGradient>
+<linearGradient id="paint25_linear_15171_992" x1="71.7586" y1="27.8666" x2="62.9666" y2="43.989" gradientUnits="userSpaceOnUse">
+<stop stop-color="#67E4FF" stop-opacity="0.45"/>
+<stop offset="1" stop-color="#5FE2FF"/>
+</linearGradient>
+<linearGradient id="paint26_linear_15171_992" x1="71.7586" y1="27.8666" x2="62.9666" y2="43.989" gradientUnits="userSpaceOnUse">
+<stop stop-color="#67E4FF" stop-opacity="0.45"/>
+<stop offset="1" stop-color="#5FE2FF"/>
+</linearGradient>
+<linearGradient id="paint27_linear_15171_992" x1="179.039" y1="90.0912" x2="170.247" y2="106.214" gradientUnits="userSpaceOnUse">
+<stop stop-color="#67E4FF" stop-opacity="0.45"/>
+<stop offset="1" stop-color="#5FE2FF"/>
+</linearGradient>
+<linearGradient id="paint28_linear_15171_992" x1="179.039" y1="90.0912" x2="170.247" y2="106.214" gradientUnits="userSpaceOnUse">
+<stop stop-color="#67E4FF" stop-opacity="0.45"/>
+<stop offset="1" stop-color="#5FE2FF"/>
+</linearGradient>
+<linearGradient id="paint29_linear_15171_992" x1="148.095" y1="6.39576" x2="135.409" y2="29.6593" gradientUnits="userSpaceOnUse">
+<stop stop-color="#67E4FF" stop-opacity="0.45"/>
+<stop offset="1" stop-color="#5FE2FF"/>
+</linearGradient>
+<linearGradient id="paint30_linear_15171_992" x1="148.095" y1="6.39576" x2="135.409" y2="29.6593" gradientUnits="userSpaceOnUse">
+<stop stop-color="#67E4FF" stop-opacity="0.45"/>
+<stop offset="1" stop-color="#5FE2FF"/>
+</linearGradient>
+<linearGradient id="paint31_linear_15171_992" x1="51.814" y1="54.135" x2="39.1274" y2="77.3986" gradientUnits="userSpaceOnUse">
+<stop stop-color="#67E4FF" stop-opacity="0.45"/>
+<stop offset="1" stop-color="#5FE2FF"/>
+</linearGradient>
+<linearGradient id="paint32_linear_15171_992" x1="51.814" y1="54.135" x2="39.1274" y2="77.3986" gradientUnits="userSpaceOnUse">
+<stop stop-color="#67E4FF" stop-opacity="0.45"/>
+<stop offset="1" stop-color="#5FE2FF"/>
+</linearGradient>
+<linearGradient id="paint33_linear_15171_992" x1="162.916" y1="53.4427" x2="155.555" y2="66.9401" gradientUnits="userSpaceOnUse">
+<stop stop-color="#67E4FF" stop-opacity="0.45"/>
+<stop offset="1" stop-color="#5FE2FF"/>
+</linearGradient>
+<linearGradient id="paint34_linear_15171_992" x1="162.916" y1="53.4427" x2="155.555" y2="66.9401" gradientUnits="userSpaceOnUse">
+<stop stop-color="#67E4FF" stop-opacity="0.45"/>
+<stop offset="1" stop-color="#5FE2FF"/>
+</linearGradient>
+<linearGradient id="paint35_linear_15171_992" x1="81.8073" y1="11.7918" x2="75.8684" y2="22.682" gradientUnits="userSpaceOnUse">
+<stop stop-color="#67E4FF" stop-opacity="0.45"/>
+<stop offset="1" stop-color="#5FE2FF"/>
+</linearGradient>
+<linearGradient id="paint36_linear_15171_992" x1="81.8073" y1="11.7918" x2="75.8684" y2="22.682" gradientUnits="userSpaceOnUse">
+<stop stop-color="#67E4FF" stop-opacity="0.45"/>
+<stop offset="1" stop-color="#5FE2FF"/>
+</linearGradient>
+<linearGradient id="paint37_linear_15171_992" x1="55.8073" y1="95.7918" x2="49.8684" y2="106.682" gradientUnits="userSpaceOnUse">
+<stop stop-color="#67E4FF" stop-opacity="0.45"/>
+<stop offset="1" stop-color="#5FE2FF"/>
+</linearGradient>
+<linearGradient id="paint38_linear_15171_992" x1="55.8073" y1="95.7918" x2="49.8684" y2="106.682" gradientUnits="userSpaceOnUse">
+<stop stop-color="#67E4FF" stop-opacity="0.45"/>
+<stop offset="1" stop-color="#5FE2FF"/>
+</linearGradient>
+<clipPath id="clip0_15171_992">
+<rect width="220" height="220" fill="white" transform="translate(0 0.25)"/>
+</clipPath>
+<image id="image0_15171_992" width="17" height="17" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAARCAYAAAA7bUf6AAAACXBIWXMAAC4jAAAuIwF4pT92AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAVFJREFUeNrcU8FSgzAUXFIEgVatWK899gPqL9T/P/VoL1qtdpwipSQkJL6E0akzwelV9wJJ2H37Ng/gXyHwbUbxuRkNM9Sco1EKSojgZJGLyysznU4RRxFWqwcwFkJrhWK/d+d9YsFx9cXiHsYYZMOh29Nti5fnNZbLJUTTkCvpFWI/Fow5gTM26CrQ+jq/wXx+hzAMe9v5FpnNZuSiqy6oon3ymkNRJi21dDuZICKhMI6NV8S2IsmulA1aIls1rTUGA+beeV2jJbE0SYkQ+J1oGFRV5T6UUhJPOxGL3e4dRVEiSbOugAfhUepm87rBeDyG4JFrwTrgQrgPq6rswhU88IpY1ETIsgyy6UhfTpRqUZYf4Fy4fHqdWGy3b0EcRy60JE0cef30SAMn3NwIErdtnzSxeZ4bO1w2QEsaURbV4eDOfK38CnuV9tb+1l/8KcAAI7nCkIZFmYoAAAAASUVORK5CYII="/>
+</defs>
+</svg>
diff --git a/src/assets/icons/visu/ecogesture/ECOGESTURE0086.svg b/src/assets/icons/visu/ecogesture/ECOGESTURE0086.svg
new file mode 100644
index 0000000000000000000000000000000000000000..8076d253bb9ded360bd1f9572d007c5ae5327462
--- /dev/null
+++ b/src/assets/icons/visu/ecogesture/ECOGESTURE0086.svg
@@ -0,0 +1,110 @@
+<svg width="220" height="221" viewBox="0 0 220 221" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_15183_1717)">
+<path d="M153 105.25C153.526 105.25 153.952 105.158 153.952 105.044L155 88.25L151 88.25L152.048 105.044C152.048 105.158 152.474 105.25 153 105.25Z" fill="#D9D9D9"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M154.975 96.5753C154.453 96.5968 153.912 96.6083 153.355 96.6083C152.473 96.6083 151.606 96.5795 150.773 96.5281L150 87.5552H155.753L154.975 96.5753Z" fill="#999999"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M155.402 91.6173C154.75 91.6515 154.066 91.6702 153.355 91.6702C152.321 91.6702 151.307 91.6307 150.345 91.5614L150 87.5552L155.753 87.5552L155.402 91.6173Z" fill="#676767"/>
+<g opacity="0.2" filter="url(#filter0_f_15183_1717)">
+<circle cx="61" cy="71.25" r="30" fill="#FC7900"/>
+</g>
+<ellipse cx="110.5" cy="206.75" rx="109.5" ry="13.5" fill="#1E1E1E"/>
+<ellipse cx="179" cy="195.75" rx="39" ry="6.5" fill="#1E1E1E"/>
+<path opacity="0.65" d="M137.356 195.745C136.827 194.344 141.606 193.388 142.71 193.169C149.302 191.238 156.179 190.464 163.036 190.881L163.95 190.937C181.613 190.937 194.11 193.169 195.655 194.701C197.201 196.233 193.817 196.734 195.655 197.569C197.166 198.256 203.215 198.463 202.994 201.09C202.773 203.716 185.101 202.142 182.893 203.236C180.685 204.331 186.205 204.987 185.101 206.519C184.331 207.588 167.217 207.395 164.126 206.519C161.035 205.644 165.122 204.509 165.672 203.236C166.334 201.704 161.035 202.142 155.074 202.142C149.113 202.142 136.97 201.704 135.424 200.61C133.879 199.516 136.97 198.641 138.074 198.203C139.178 197.765 138.019 197.496 137.356 195.745Z" fill="url(#paint0_radial_15183_1717)"/>
+<path d="M184 22.25L184 168.25" stroke="#808080" stroke-width="7" stroke-linecap="round"/>
+<path d="M185 22.25L185 168.25" stroke="#9B9A9A" stroke-width="3" stroke-linecap="round"/>
+<path d="M185 169.25L201.426 174.577C202.662 174.978 203.5 176.131 203.5 177.431V193.75" stroke="#525151" stroke-width="7" stroke-linecap="round"/>
+<path d="M184 169.25L167.574 174.577C166.338 174.978 165.5 176.131 165.5 177.431V193.75" stroke="#808080" stroke-width="7" stroke-linecap="round"/>
+<path d="M184 169.25L167.574 174.577C166.338 174.978 165.5 176.131 165.5 177.431V193.75" stroke="#9B9A9A" stroke-width="2" stroke-linecap="round"/>
+<path d="M184 169.25L193.318 176.35C194.063 176.917 194.5 177.8 194.5 178.736V197.75" stroke="#808080" stroke-width="7" stroke-linecap="round"/>
+<path d="M185 168.25L194.318 175.35C195.063 175.917 195.5 176.8 195.5 177.736V196.75" stroke="#9B9A9A" stroke-width="2" stroke-linecap="round"/>
+<path d="M83.5495 134.217C117.765 141.968 118.496 170.287 113.702 186.535C113.17 188.337 111.555 189.652 109.685 189.48C93.5235 187.999 82.8037 159.273 78.1809 139.742C77.3982 136.435 80.2355 133.467 83.5495 134.217Z" fill="#536A23"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M95.3563 180.26C103.464 170.623 97.9632 148.176 94.0478 137.824L94.4798 137.845C117.861 148.598 117.921 172.239 113.702 186.535C113.17 188.337 111.555 189.652 109.685 189.481C104.296 188.986 99.5113 185.462 95.3563 180.26Z" fill="#425616"/>
+<path d="M38.8798 213.848H26.3062C21.1034 213.848 25.0055 210.813 29.7748 209.512C31.8379 208.949 30.9094 205.934 28.9068 205.184C28.2099 204.923 27.5999 204.629 27.1734 204.309C25.4391 203.008 28.9077 202.575 34.9776 202.141C41.0476 201.708 37.5791 201.274 38.8798 198.673C40.1805 196.071 42.7819 194.771 47.9847 191.302C53.1876 187.834 50.1526 189.568 55.789 189.568H62.7261C68.3626 189.568 66.1947 189.568 69.2297 187.834C72.2647 186.099 70.5304 185.232 77.4675 185.232C84.4047 185.232 79.2018 183.498 88.7403 181.764C98.2789 180.03 93.5096 183.064 96.111 185.232C98.7125 187.401 103.482 189.568 107.384 189.568C116.437 189.568 109.552 189.568 116.055 185.232C122.559 180.897 120.825 183.498 125.16 181.764C129.496 180.03 138.601 183.932 145.972 185.232C153.342 186.533 153.776 187.834 153.776 189.568C153.776 191.302 178.923 193.904 180.657 196.505C182.392 199.107 180.274 203.909 182.825 205.61C185.426 207.344 193.161 209.264 192.364 210.379C190.196 213.414 170.685 206.044 170.685 209.512C170.685 212.981 166.783 210.813 165.916 212.547C165.049 214.281 169.818 212.547 177.189 212.547C184.559 212.547 184.993 214.715 182.825 217.75C180.657 220.785 176.755 217.75 173.287 219.484C169.818 221.219 170.685 217.75 168.084 216.016C165.482 214.282 163.748 216.016 159.846 217.75C155.944 219.484 153.776 219.484 149.44 219.484H149.44C145.104 219.484 140.335 219.484 138.601 217.75C136.867 216.016 141.202 217.75 144.237 216.016C147.272 214.282 153.776 212.547 153.776 210.813C153.776 209.079 148.573 210.813 144.237 212.547C139.902 214.281 129.062 212.547 126.895 212.547C124.727 212.547 122.559 212.547 118.657 213.848C117.949 214.084 117.356 214.262 116.859 214.415C114.331 215.192 112.178 217.75 109.534 217.75C107.473 217.75 105.251 216.478 103.192 216.401L103.189 216.401C101.748 216.347 100.057 216.284 98.7125 214.715C102.615 213.848 99.146 212.547 96.111 210.813C93.076 209.079 89.6075 212.547 84.8382 213.848C80.0689 215.149 79.2018 213.848 76.1668 213.848C73.1318 213.848 71.8311 213.848 69.2297 212.547C66.6283 211.246 61.4254 210.813 55.789 210.813C50.1526 210.813 51.8869 211.68 50.1526 213.848C48.4183 216.016 47.1176 213.848 38.8798 213.848Z" fill="#6F4F41"/>
+<path d="M38.8798 213.848H26.3062C21.1034 213.848 25.0055 210.813 29.7748 209.512C31.8379 208.949 30.9094 205.934 28.9068 205.184C28.2099 204.923 27.5999 204.629 27.1734 204.309C25.4391 203.008 28.9077 202.575 34.9776 202.141C41.0476 201.708 37.5791 201.274 38.8798 198.673C40.1805 196.071 42.7819 194.771 47.9847 191.302C53.1876 187.834 50.1526 189.568 55.789 189.568H62.7261C68.3626 189.568 66.1947 189.568 69.2297 187.834C72.2647 186.099 70.5304 185.232 77.4675 185.232C84.4047 185.232 79.2018 183.498 88.7403 181.764C98.2789 180.03 93.5096 183.064 96.111 185.232C98.7125 187.401 103.482 189.568 107.384 189.568C116.437 189.568 109.552 189.568 116.055 185.232C122.559 180.897 120.825 183.498 125.16 181.764C129.496 180.03 138.601 183.932 145.972 185.232C153.342 186.533 153.776 187.834 153.776 189.568C153.776 191.302 178.923 193.904 180.657 196.505C182.392 199.107 180.274 203.909 182.825 205.61C185.426 207.344 193.161 209.264 192.364 210.379C190.196 213.414 170.685 206.044 170.685 209.512C170.685 212.981 166.783 210.813 165.916 212.547C165.049 214.281 169.818 212.547 177.189 212.547C184.559 212.547 184.993 214.715 182.825 217.75C180.657 220.785 176.755 217.75 173.287 219.484C169.818 221.219 170.685 217.75 168.084 216.016C165.482 214.282 163.748 216.016 159.846 217.75C155.944 219.484 153.776 219.484 149.44 219.484H149.44C145.104 219.484 140.335 219.484 138.601 217.75C136.867 216.016 141.202 217.75 144.237 216.016C147.272 214.282 153.776 212.547 153.776 210.813C153.776 209.079 148.573 210.813 144.237 212.547C139.902 214.281 129.062 212.547 126.895 212.547C124.727 212.547 122.559 212.547 118.657 213.848C117.949 214.084 117.356 214.262 116.859 214.415C114.331 215.192 112.178 217.75 109.534 217.75C107.473 217.75 105.251 216.478 103.192 216.401L103.189 216.401C101.748 216.347 100.057 216.284 98.7125 214.715C102.615 213.848 99.146 212.547 96.111 210.813C93.076 209.079 89.6075 212.547 84.8382 213.848C80.0689 215.149 79.2018 213.848 76.1668 213.848C73.1318 213.848 71.8311 213.848 69.2297 212.547C66.6283 211.246 61.4254 210.813 55.789 210.813C50.1526 210.813 51.8869 211.68 50.1526 213.848C48.4183 216.016 47.1176 213.848 38.8798 213.848Z" fill="url(#paint1_radial_15183_1717)" fill-opacity="0.75"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M93.3493 181.257C89.7101 183.15 86.2335 185.52 87.4395 186.967C89.0005 188.84 88.7632 189.364 88.1843 190.644C87.9591 191.142 87.6824 191.754 87.4395 192.603C86.5722 195.638 88.3065 196.505 89.6072 196.505C89.9906 196.505 90.5999 196.694 91.2798 196.904C92.9067 197.407 94.9378 198.034 95.2436 196.505C95.389 195.779 95.3394 195.052 95.291 194.341C95.1949 192.933 95.1032 191.588 96.5443 190.435C98.0319 189.245 100.744 190.505 103.001 191.553C104.033 192.032 104.969 192.467 105.649 192.603C106.528 192.779 106.908 193.097 107.251 193.384C107.755 193.806 108.18 194.162 109.985 193.904C113.02 193.47 114.754 189.568 114.754 188.268C114.754 187.74 114.469 187.355 113.928 186.911C112.679 188.156 112.853 188.818 112.598 189.17C112.309 189.568 111.47 189.568 107.384 189.568C103.481 189.568 98.7123 187.401 96.1109 185.233C95.232 184.5 95.1944 183.669 95.1622 182.956C95.1212 182.05 95.0888 181.335 93.3493 181.257ZM180.912 196.958C180.848 197.12 180.766 197.263 180.657 197.372C179.953 198.076 178.677 197.923 177.99 197.841C177.831 197.821 177.704 197.806 177.622 197.806C177.395 197.806 176.57 198.283 175.462 198.925L175.462 198.925L175.462 198.925L175.462 198.925C174.458 199.507 173.222 200.223 171.986 200.841C170.505 201.581 170.148 200.495 169.795 199.422C169.529 198.61 169.264 197.806 168.517 197.806C166.783 197.806 165.049 197.806 162.881 198.673C161.879 199.074 161.71 199.289 161.519 199.534C161.417 199.665 161.307 199.806 161.057 199.988C160.483 200.405 159.767 200.413 159.04 200.421C158.561 200.426 158.076 200.432 157.625 200.554C157.282 200.648 156.935 200.825 156.511 201.041C156.119 201.241 155.661 201.475 155.076 201.708C152.981 202.546 154.531 203.789 158.942 205.437C159.253 205.553 159.583 205.626 159.914 205.663C162.066 205.906 162.467 206.154 162.999 206.482C163.381 206.718 163.831 206.997 165.049 207.345C166.434 207.74 167.638 208.317 168.704 208.827C169.422 209.17 170.077 209.484 170.681 209.691C170.684 209.633 170.685 209.574 170.685 209.512C170.685 208.59 172.066 208.434 174.133 208.645C174.429 207.977 174.572 207.173 174.587 206.507L174.587 206.488L174.587 206.477C174.587 206.022 175.065 205.806 175.706 205.516C176.288 205.252 177.004 204.928 177.622 204.31C178.12 203.812 178.809 203.695 179.688 203.546C180.228 203.454 180.839 203.351 181.523 203.139C181.432 202.439 181.433 201.671 181.435 200.894C181.438 199.502 181.44 198.08 180.912 196.958ZM183.828 214.406C183.541 214.323 183.204 214.282 182.825 214.282C181.669 214.282 181.669 214.667 181.669 215.052C181.669 215.245 181.669 215.438 181.524 215.582C181.307 215.799 180.874 215.799 180.169 215.799C179.465 215.799 178.489 215.799 177.189 216.016C175.157 216.355 174.712 216.693 173.995 217.238C173.794 217.391 173.572 217.56 173.286 217.75C172.629 218.189 172.86 218.881 173.302 219.477C174.841 218.714 176.466 218.886 177.986 219.048C179.886 219.25 181.622 219.434 182.825 217.75C183.762 216.438 184.213 215.289 183.828 214.406ZM164.669 215.511C164.701 215.482 164.732 215.453 164.763 215.424C164.956 215.244 165.139 215.045 165.246 214.804C165.545 214.129 164.774 214.244 162.932 214.7C162.603 214.781 162.271 214.883 161.939 214.985C161.127 215.233 160.305 215.485 159.477 215.455C159.196 215.445 158.885 215.469 158.545 215.582C158.149 215.715 157.833 215.967 157.598 216.28C156.916 217.184 157.601 218.055 158.6 218.268C158.998 218.115 159.411 217.944 159.846 217.75C160.701 217.37 161.452 216.99 162.131 216.646C163.092 216.16 163.907 215.748 164.669 215.511ZM140.487 213.251C140.925 213.014 141.308 212.66 141.636 212.114C142.623 210.468 141.361 210.322 139.937 210.157C139.486 210.104 139.018 210.05 138.601 209.946C137.898 209.77 137.338 209.737 136.747 209.702C135.879 209.65 134.945 209.595 133.398 209.079C131.888 208.576 131.985 208.073 132.162 207.146C132.29 206.475 132.461 205.583 132.097 204.31C131.614 202.619 131.669 201.87 131.738 200.938C131.793 200.198 131.856 199.342 131.664 197.806C131.413 195.803 130.874 196.113 129.795 196.733C129.006 197.186 127.927 197.806 126.461 197.806C124.562 197.806 123.962 198.196 123.311 198.62C122.772 198.97 122.198 199.344 120.824 199.54C117.789 199.974 118.657 202.142 120.391 204.31C121.444 205.626 121.378 205.823 121.066 206.747C120.865 207.344 120.561 208.244 120.391 209.946C120.088 212.971 119.364 212.619 118.659 212.277C118.353 212.129 118.052 211.983 117.789 212.114C117.216 212.4 117.043 213.621 117.647 213.835C117.812 213.894 117.979 213.954 118.147 214.015C118.31 213.962 118.48 213.907 118.657 213.848C122.559 212.547 124.727 212.547 126.894 212.547C127.411 212.547 128.422 212.646 129.72 212.773C132.636 213.058 137.004 213.484 140.487 213.251ZM94.9299 210.389C95.1873 210.074 95.4687 209.777 95.794 209.534C97.0537 208.595 97.341 208.403 97.6284 208.212C97.9535 207.995 98.279 207.778 100.013 206.477C102.173 204.858 101.139 205.255 99.2132 205.995C98.0464 206.443 96.5524 207.017 95.2436 207.345C93.5093 207.778 92.8589 207.778 91.8293 207.778C90.7996 207.778 89.3906 207.778 86.1388 208.212C84.5526 208.212 84.1452 208.212 83.7554 208.295C83.6207 208.323 83.4881 208.362 83.3096 208.414C82.8755 208.54 82.1699 208.745 80.5024 209.079C77.1172 209.756 77.9609 210.433 79.319 211.523C79.7003 211.829 80.1222 212.167 80.5024 212.547L80.5024 212.547L80.5025 212.548L80.5025 212.548C81.2777 213.323 81.8796 213.925 82.347 214.353C83.0485 214.272 83.8615 214.114 84.8381 213.848C86.5502 213.381 88.0946 212.635 89.5116 211.95C91.5397 210.97 93.3066 210.116 94.9299 210.389ZM52.3184 211.085C51.3627 210.763 50.4311 210.391 49.7189 209.946C49.1188 209.646 48.6226 209.761 48.1943 209.861C47.3846 210.049 46.8174 210.18 46.2503 207.345C45.9146 206.002 44.0195 206.738 41.7723 207.944C41.2107 208.246 40.7849 208.747 40.3634 209.242C39.8356 209.863 39.3148 210.476 38.5429 210.679C38.3871 210.719 38.2112 210.763 38.0125 210.813C36.2782 211.247 35.411 211.68 33.6768 213.848H38.8796C42.4826 213.848 44.7586 214.263 46.3242 214.548C46.6637 214.61 46.9699 214.666 47.2489 214.71C47.9289 214.616 48.7222 214.504 49.6427 214.371C49.8132 214.235 49.9807 214.063 50.1525 213.848C50.6251 213.257 50.8401 212.763 51.0169 212.357C51.2846 211.742 51.4647 211.328 52.3184 211.085ZM76.5765 185.238C76.2189 185.653 75.9335 186.155 75.7496 186.686C75.2453 188.141 74.5431 189.702 73.5651 190.435C73.1496 190.747 72.7838 191.059 72.432 191.358C71.3157 192.31 70.3404 193.141 68.3623 193.47C67.4951 193.615 66.8688 193.615 66.2907 193.615C65.1345 193.615 64.171 193.615 61.8587 194.771C60.5838 195.408 59.3675 195.753 58.4251 196.02C56.8034 196.479 55.9926 196.709 57.0894 197.806C58.5554 199.272 61.5704 199.189 63.7776 199.128C64.1815 199.117 64.5584 199.107 64.8938 199.107C65.601 199.107 66.2159 198.876 66.844 198.64C68.141 198.154 69.4939 197.646 71.8309 199.107C73.116 199.91 73.9844 200.713 74.6127 201.296C75.8368 202.431 75.7957 200.508 74.4791 199.482C71.795 197.389 69.9255 196.621 69.2295 196.505C68.5069 196.361 68.0155 195.812 71.8309 194.771C73.5082 194.314 74.7029 194.071 75.5847 193.891C77.2101 193.561 77.7723 193.447 78.3344 192.603C79.2016 191.302 79.6352 189.568 79.6352 188.268C79.6352 187.96 79.829 187.556 80.0391 187.117C80.3727 186.421 80.7473 185.64 80.4522 185.025C79.8182 185.158 78.9026 185.233 77.4674 185.233C77.153 185.233 76.8565 185.234 76.5765 185.238Z" fill="#55392C"/>
+<path d="M107.5 195.25C118.333 180.25 139 140.85 135 103.25C131 65.65 97.6667 68.5833 81.5 74.75" stroke="#7F9C40" stroke-width="7" stroke-linecap="round"/>
+<path d="M107.5 195.25C118.333 180.25 139 140.85 135 103.25C131 65.65 97.6667 68.5833 81.5 74.75" stroke="url(#paint2_linear_15183_1717)" stroke-opacity="0.75" stroke-width="7" stroke-linecap="round"/>
+<path d="M107.5 195.25C113.078 187.526 121.263 173.334 127.345 156.25M81.5 74.7498C94.313 69.8623 117.909 67.0059 129.139 84.75" stroke="#536A23" stroke-width="7" stroke-linecap="round"/>
+<path d="M107.5 195.25C111.466 189.758 116.75 180.997 121.659 170.25M81.5 74.7498C89.6299 71.6487 102.101 69.3652 113 72.6431" stroke="#2D3E0A" stroke-width="7" stroke-linecap="round"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M86.294 84.1825C76.5153 84.1825 68.5882 78.2403 68.5882 70.9102C68.5882 63.5801 76.5153 57.6379 86.294 57.6379C96.0726 57.6379 104 63.5801 104 70.9102C104 78.2403 96.0726 84.1825 86.294 84.1825ZM73.558 95.7607C73.558 104.65 67.0216 111.857 58.9585 111.857C50.8954 111.857 44.3589 104.65 44.3589 95.7607C44.3589 86.871 50.8954 79.6645 58.9585 79.6645C67.0216 79.6645 73.558 86.871 73.558 95.7607ZM46.2409 62.8043C36.1017 62.2193 22.926 63.189 21.5221 76.7598C19.7672 93.7234 33.806 93.1383 37.9007 86.1189C41.1764 80.5034 42.3412 79.9627 46.2409 79.7677V62.8043Z" fill="#FFF9F5"/>
+<path d="M67.2541 37.2239C76.6133 42.8394 71.5438 53.2125 67.8391 57.6972L49.7057 58.2824C45.0261 45.4135 36.2518 53.0176 37.4217 45.9982C38.5916 38.9788 55.5551 30.2045 67.2541 37.2239Z" fill="#FFF9F5"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M70.4958 53.6524C69.674 55.2374 68.7181 56.6332 67.839 57.6973L49.7055 58.2825C49.3894 57.4133 49.0547 56.6374 48.7056 55.9442C52.3402 53.4615 56.8584 51.9903 61.7547 51.9903C64.864 51.9903 67.8208 52.5836 70.4958 53.6524ZM78.3925 59.03C72.5804 61.2066 68.5891 65.709 68.5891 70.9103C68.5891 76.4383 73.0976 81.177 79.5087 83.1729C82.0217 79.9486 83.4987 76.0099 83.4987 71.7576C83.4987 66.9094 81.5788 62.4688 78.3925 59.03ZM72.2445 89.0767C69.9422 83.5233 64.8595 79.6646 58.9594 79.6646C54.0773 79.6646 49.7549 82.3066 47.1043 86.3646C50.9692 89.57 56.1108 91.5248 61.7547 91.5248C65.5585 91.5248 69.1341 90.6369 72.2445 89.0767ZM42.1606 80.3381C43.738 79.9962 45.1678 79.8216 46.2405 79.768V62.8045C45.0845 62.7379 43.7922 62.7077 42.4075 62.7266C40.8755 65.4336 40.0107 68.5038 40.0107 71.7576C40.0107 74.8322 40.7829 77.7429 42.1606 80.3381Z" fill="#F7E2D7"/>
+<ellipse cx="59.5798" cy="71.475" rx="17.7058" ry="16.0962" fill="#FCB500"/>
+<ellipse cx="58.338" cy="70.3456" rx="15.2208" ry="13.8371" fill="#FFD569"/>
+<path d="M25 111.75C21 116.95 15.3333 116.583 13 115.75L17.5 120.25C21.6667 119.75 30.9 117.85 34.5 114.25C39 109.75 30 105.25 25 111.75Z" fill="#DBBDAC"/>
+<path d="M15.8261 116.307C22.8844 118.448 31.2417 115.806 34.538 114.218C29.2939 123.849 18.2497 124.013 12.9169 121.602C7.58413 119.192 7.00338 113.632 15.8261 116.307Z" fill="#FFF9F5"/>
+<path d="M96.8848 140.875C90.4848 139.675 85.2181 131.375 83.3848 127.375C84.5514 133.708 88.5848 146.775 95.3848 148.375C103.885 150.375 104.885 142.375 96.8848 140.875Z" fill="#FFF9F5"/>
+<path d="M95.8854 128.874C95.8854 135.674 99.2187 141.041 100.885 142.874C99.3855 143.874 86.3854 139.374 83.3854 127.374C80.3854 115.374 95.8854 120.374 95.8854 128.874Z" fill="#DBBDAC"/>
+<path d="M38.5003 203.75C38.9003 201.35 42.3336 196.417 44.0003 194.25C41.6669 193.917 36.3003 194.45 33.5003 199.25C30.0003 205.25 38.0003 206.75 38.5003 203.75Z" fill="#FFF9F5"/>
+<path d="M46.3468 164.734C46.9132 161.903 46.1108 150.811 45.6388 145.619C44.4589 152.463 42.3822 166.434 43.5149 167.566C44.9309 168.982 45.6388 168.274 46.3468 164.734Z" fill="#DBBDAC"/>
+<path d="M41.3915 164.734C37.9932 157.372 41.8634 148.451 44.2233 144.911C47.0552 142.787 47.7633 146.327 45.6394 154.115C43.5154 161.903 45.6393 173.938 41.3915 164.734Z" fill="#FFF9F5"/>
+<path d="M164 170.25C147.891 168.493 130.442 177.351 118.523 185.754C116.641 187.081 113.577 184.491 114.719 182.493L118 176.75L156.5 159.75L164 170.25Z" fill="#536A23"/>
+<path d="M152 156.25C132.798 152.473 119.149 169.297 111.931 183.867C110.931 185.885 113.436 187.275 114.935 185.595C141.311 156.037 156.786 170.791 171 171.25C186.5 171.75 182.5 162.25 152 156.25Z" fill="#7F9C40"/>
+<path d="M152 156.25C132.798 152.473 119.149 169.297 111.931 183.867C110.931 185.885 113.436 187.275 114.935 185.595C141.311 156.037 156.786 170.791 171 171.25C186.5 171.75 182.5 162.25 152 156.25Z" fill="url(#paint3_linear_15183_1717)" fill-opacity="0.75"/>
+<path d="M53 73C53.7546 73.7273 54.8111 75.5455 53 77" stroke="black" stroke-linecap="round"/>
+<path d="M53 64C53.7546 64.7273 54.8111 66.5455 53 68" stroke="black" stroke-linecap="round"/>
+<path d="M67.0001 68.9881H62.4287V72.4167C62.4287 73.679 63.4521 74.7024 64.7144 74.7024C65.9768 74.7024 67.0001 73.679 67.0001 72.4167V68.9881Z" fill="black"/>
+<path d="M62.4287 68.9881V72.4166C62.4287 73.679 63.4521 74.7023 64.7144 74.7023V74.7023C65.9768 74.7023 67.0001 73.679 67.0001 72.4166V66.1309" stroke="black" stroke-linecap="round"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M67 70.5897C66.6638 70.2979 66.2734 70.1309 65.857 70.1309C64.5946 70.1309 63.5713 71.6659 63.5713 73.5595C63.5713 73.8633 63.5976 74.1579 63.6471 74.4384C63.9657 74.6069 64.3288 74.7023 64.7143 74.7023C65.9767 74.7023 67 73.679 67 72.4166V70.5897Z" fill="#E5A4A4"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M67.0006 71.4364C66.8218 71.3311 66.6295 71.2738 66.4291 71.2738C65.4824 71.2738 64.7148 72.553 64.7148 74.1309C64.7148 74.3266 64.7266 74.5176 64.7491 74.7021C65.9957 74.6838 67.0006 73.6676 67.0006 72.4167V71.4364Z" fill="#D07474"/>
+<path opacity="0.75" d="M145.937 141.483C146.302 140.679 147.467 140.854 147.8 141.672C148.14 142.505 148.623 143.487 149.293 144.467C149.941 145.414 148.771 146.683 147.643 146.9C146.516 147.116 145.426 146.377 145.21 145.25C144.978 144.04 145.423 142.619 145.937 141.483Z" fill="url(#paint4_radial_15183_1717)"/>
+<path opacity="0.75" d="M160.348 154.545C159.517 154.246 158.83 155.202 159.184 156.012C159.544 156.836 159.911 157.867 160.145 159.031C160.372 160.156 162.098 160.202 163.04 159.545C163.981 158.888 164.211 157.592 163.554 156.651C162.849 155.641 161.52 154.968 160.348 154.545Z" fill="url(#paint5_radial_15183_1717)"/>
+<path d="M170.5 32.75L183 29.25" stroke="#525252" stroke-width="4" stroke-linecap="round"/>
+<path d="M170.5 32.75L176.75 31" stroke="#3D3C3C" stroke-width="4" stroke-linecap="round"/>
+<ellipse opacity="0.55" cx="153.283" cy="15.25" rx="17" ry="3" fill="#D9D9D9"/>
+<path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M168.449 18.4602C168.552 18.3411 168.604 18.2194 168.604 18.0955C168.604 16.6853 161.745 15.542 153.283 15.542C144.821 15.542 137.962 16.6853 137.962 18.0955C137.962 18.2194 138.015 18.3411 138.117 18.4602H137.962L137.962 63.6948L137.962 64.0592C137.962 64.2699 138.115 64.4746 138.404 64.6704L145.987 81.4259C145.987 82.1096 149.619 83.0288 153.648 83.0288C157.677 83.0288 160.579 82.1096 160.579 81.4259L168.163 64.6704C168.451 64.4746 168.605 64.2699 168.605 64.0592L168.605 63.6948L168.605 18.4602H168.449Z" fill="url(#paint6_radial_15183_1717)"/>
+<ellipse opacity="0.55" cx="153.283" cy="17.75" rx="15" ry="2.5" fill="url(#paint7_radial_15183_1717)"/>
+<path opacity="0.75" d="M152.13 107.719C152.555 106.945 153.707 107.142 153.982 107.981C154.573 109.781 155.644 112.421 157.446 115.054C158.648 116.81 156.477 119.164 154.387 119.565C152.296 119.966 150.276 118.597 149.875 116.506C149.309 113.556 150.914 109.93 152.13 107.719Z" fill="url(#paint8_radial_15183_1717)"/>
+<path opacity="0.4" fill-rule="evenodd" clip-rule="evenodd" d="M136 66.5684H136L136 66.5684V66.5684ZM136.498 67.6695L145.053 86.57C145.053 87.3413 149.149 88.3781 153.695 88.3781C158.24 88.3781 161.513 87.3413 161.513 86.57L170.068 67.6695C168.214 68.9273 161.402 69.8604 153.283 69.8604C145.164 69.8604 138.352 68.9273 136.498 67.6695Z" fill="#AAAAAA"/>
+<path opacity="0.55" fill-rule="evenodd" clip-rule="evenodd" d="M168.706 16.4321C169.896 16.0412 170.566 15.5989 170.566 15.1305C170.566 13.5397 162.828 12.25 153.283 12.25C143.738 12.25 136 13.5397 136 15.1305C136 15.5989 136.671 16.0412 137.861 16.4321C137.72 16.2765 137.646 16.1166 137.646 15.9535C137.646 14.3627 144.647 13.073 153.283 13.073C161.919 13.073 168.92 14.3627 168.92 15.9535C168.92 16.1166 168.847 16.2765 168.706 16.4321Z" fill="#979797"/>
+<path opacity="0.4" fill-rule="evenodd" clip-rule="evenodd" d="M136.175 15.542L136 15.542L136 66.98C136 68.5709 143.738 69.8606 153.283 69.8606C162.828 69.8606 170.566 68.5709 170.566 66.98L170.566 15.542L170.391 15.542C169.193 16.9379 161.99 18.011 153.283 18.011C144.576 18.011 137.373 16.9379 136.175 15.542Z" fill="#D9D9D9"/>
+<path opacity="0.4" fill-rule="evenodd" clip-rule="evenodd" d="M162.379 69.4299L162.336 69.4494C161.513 73.8388 160.196 79.9016 158.221 82.206C156.414 84.3141 147.812 82.6801 142.684 81.3363L145.053 86.5705C145.053 87.3418 149.149 88.3786 153.694 88.3786C158.24 88.3786 161.513 87.3418 161.513 86.5705L170.068 67.6695C168.976 68.4103 166.165 69.0386 162.379 69.4299ZM170.566 66.5692V66.5688H170.566L170.566 66.5692Z" fill="#7D7D7D"/>
+<path opacity="0.55" fill-rule="evenodd" clip-rule="evenodd" d="M162.336 17.5847V69.4343C167.274 68.9272 170.566 68.0177 170.566 66.98L170.566 15.542H170.391C169.65 16.4058 166.609 17.1459 162.336 17.5847Z" fill="#BFBFBF"/>
+<path d="M136 31.8838C134.1 32.4239 133 33.0639 133 33.7499C133 35.6829 141.73 37.2499 152.5 37.2499C163.27 37.2499 172 35.6829 172 33.7499C172 33.2973 171.521 32.8648 170.65 32.4678" stroke="#525252" stroke-width="4"/>
+</g>
+<defs>
+<filter id="filter0_f_15183_1717" x="11" y="21.25" width="100" height="100" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="10" result="effect1_foregroundBlur_15183_1717"/>
+</filter>
+<radialGradient id="paint0_radial_15183_1717" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(170.109 186.25) rotate(98.535) scale(21.1211 76.4231)">
+<stop offset="0.09375" stop-color="#0089B4"/>
+<stop offset="1" stop-color="#67DAFE"/>
+</radialGradient>
+<radialGradient id="paint1_radial_15183_1717" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(154.209 223.584) rotate(-144.7) scale(72.7804 48.3541)">
+<stop offset="0.139159" stop-color="#55392C"/>
+<stop offset="1" stop-color="#6E4F41"/>
+</radialGradient>
+<linearGradient id="paint2_linear_15183_1717" x1="95.5" y1="71.2502" x2="110" y2="196.25" gradientUnits="userSpaceOnUse">
+<stop offset="0.218878" stop-color="#536A23"/>
+<stop offset="1" stop-color="#78943C"/>
+</linearGradient>
+<linearGradient id="paint3_linear_15183_1717" x1="174.5" y1="155.25" x2="113.318" y2="156.686" gradientUnits="userSpaceOnUse">
+<stop offset="0.15625" stop-color="#7F9C40"/>
+<stop offset="1" stop-color="#536A23"/>
+</linearGradient>
+<radialGradient id="paint4_radial_15183_1717" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(143.896 143.705) rotate(-7.09772) scale(5.22977 8.44319)">
+<stop offset="0.09375" stop-color="#0089B4"/>
+<stop offset="1" stop-color="#67DAFE"/>
+</radialGradient>
+<radialGradient id="paint5_radial_15183_1717" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(163.363 154.631) rotate(141.321) scale(5.22977 8.44319)">
+<stop offset="0.09375" stop-color="#0089B4"/>
+<stop offset="1" stop-color="#67DAFE"/>
+</radialGradient>
+<radialGradient id="paint6_radial_15183_1717" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(153.783 -0.337251) rotate(90.976) scale(82.9302 34.8189)">
+<stop offset="0.09375" stop-color="#0089B4"/>
+<stop offset="1" stop-color="#67DAFE"/>
+</radialGradient>
+<radialGradient id="paint7_radial_15183_1717" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(153.772 14.0735) rotate(102.687) scale(6.29702 33.2613)">
+<stop offset="0.09375" stop-color="#0089B4"/>
+<stop offset="1" stop-color="#67DAFE"/>
+</radialGradient>
+<radialGradient id="paint8_radial_15183_1717" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(147.439 113.641) rotate(-7.09772) scale(9.69683 15.655)">
+<stop offset="0.09375" stop-color="#0089B4"/>
+<stop offset="1" stop-color="#67DAFE"/>
+</radialGradient>
+<clipPath id="clip0_15183_1717">
+<rect width="220" height="220" fill="white" transform="translate(0 0.25)"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/src/assets/icons/visu/ecogesture/event.svg b/src/assets/icons/visu/ecogesture/event.svg
new file mode 100644
index 0000000000000000000000000000000000000000..6a5922e2bb2b5bd964333c4b3bf46aa1167782bb
--- /dev/null
+++ b/src/assets/icons/visu/ecogesture/event.svg
@@ -0,0 +1,44 @@
+<svg width="100" height="100" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_15248_1397)">
+<path d="M88.717 87.6148C90.8649 85.4669 91.1918 83.0186 90.8383 81.9579L79.8781 39.885L41.3408 78.4224L83.0601 89.7361C84.1208 90.0896 86.5691 89.7626 88.717 87.6148Z" fill="url(#paint0_linear_15248_1397)"/>
+<path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M90.6104 84.6976L66.8794 58.0002L72.7013 47.0621L79.8781 39.8853L90.8383 81.9581C91.0334 82.5433 91.0213 83.551 90.6104 84.6976Z" fill="#BD7E06"/>
+<path opacity="0.7" fill-rule="evenodd" clip-rule="evenodd" d="M90.6378 84.6199L70.8794 53.5004L72.6379 47.1257L76.4228 43.3408L90.8414 83.8936C90.7912 84.1267 90.724 84.3698 90.6378 84.6199Z" fill="#A86F03"/>
+<path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M84.5024 89.763L48.5028 76.5L42.5122 76.8744L41.9556 77.431L83.8155 89.851C84.0305 89.8385 84.2607 89.81 84.5024 89.763Z" fill="#BD7E06"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M68.8392 67.5989C73.8721 59.2697 75.9769 50.6468 74.8794 44.8841L77.5984 42.165C80.7605 47.4372 78.9965 58.1115 72.8143 68.3427C68.6249 75.276 63.3118 80.5077 58.4118 83.0521L54.8521 82.0868C59.6354 79.4676 64.7679 74.3367 68.8392 67.5989ZM67.8735 85.618C72.2825 82.8327 76.8787 78.024 80.5922 71.8784C82.7554 68.2983 84.3777 64.664 85.4373 61.2258L82.9408 51.6425C82.9411 57.1499 80.7815 64.2427 76.6171 71.1346C73.0061 77.1106 68.5603 81.8225 64.2637 84.6391L67.8735 85.618ZM81.0654 44.4433L80.549 42.4612C79.9778 42.3813 79.382 42.3656 78.7662 42.4114C78.8781 42.4701 78.9884 42.5323 79.0972 42.598C79.8717 43.0661 80.5272 43.6883 81.0654 44.4433ZM75.9706 87.8142C79.4411 85.8831 83.1342 82.4833 86.246 78.0553C87.1934 76.7072 88.0328 75.3406 88.7604 73.9813L87.539 69.2928C86.5411 71.894 85.0944 74.6188 83.2297 77.2723C80.1305 81.6823 76.4547 85.0726 72.9965 87.0076L75.9706 87.8142Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M87.539 69.2929L88.7604 73.9814C88.0328 75.3407 87.1934 76.7072 86.246 78.0553C86.0185 78.379 85.7879 78.6972 85.5546 79.0097L83.5713 76.7786C85.2719 74.2819 86.6029 71.733 87.539 69.2929ZM80.0276 72.7919C80.2179 72.4908 80.4062 72.1863 80.5922 71.8784C82.7555 68.2983 84.3777 64.664 85.4373 61.2258L82.9408 51.6425C82.9411 56.8002 81.047 63.3486 77.386 69.8201L80.0276 72.7919ZM74.0896 66.1117L71.3174 62.9929C74.538 56.1945 75.7751 49.5869 74.8794 44.8841L77.5984 42.165C80.5312 47.0548 79.2265 56.5914 74.0896 66.1117ZM80.5491 42.4612L81.0654 44.4433C80.5272 43.6883 79.8718 43.0661 79.0972 42.598C78.9884 42.5323 78.8781 42.4701 78.7662 42.4114C79.3821 42.3656 79.9778 42.3813 80.5491 42.4612Z" fill="#E0E0E0"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M82.1412 69.1335L79.8216 64.9216C80.274 63.8696 80.6781 62.8255 81.0332 61.7958L83.3025 66.7756C82.9418 67.5594 82.5546 68.3462 82.1412 69.1335ZM86.6954 77.4029L85.0567 74.4275C85.3924 73.8525 85.7082 73.2774 86.004 72.7041L87.5458 76.0874C87.2737 76.5268 86.9902 76.9656 86.6954 77.4029ZM78.2298 55.6438C77.8987 56.9759 77.4778 58.3469 76.9687 59.7412L74.2695 54.8402C74.7889 52.7357 75.0839 50.7293 75.1491 48.8833L78.2298 55.6438Z" fill="#BBBBBB"/>
+<path d="M15.2935 46.7679L17.7767 45.1596L19.3849 47.6427L21.868 46.0345L23.4763 48.5176" stroke="#45D1B8" stroke-linecap="round"/>
+<path d="M69.1626 20.7032L66.4892 21.9702L67.7562 24.6436L65.0828 25.9106L66.3498 28.5841" stroke="#45D1B8" stroke-linecap="round"/>
+<path d="M16.9286 75.018L19.8092 75.6923L20.4835 72.8117L23.3641 73.486L24.0384 70.6054L26.919 71.2798L27.5933 68.3992L30.4739 69.0735" stroke="#F1C017" stroke-linecap="round"/>
+<path d="M38.7144 26.9998L38.99 29.9454L41.9356 29.6698L42.2111 32.6154L45.1567 32.3399L45.4323 35.2855L48.3779 35.0099L48.6534 37.9555" stroke="#F1C017" stroke-linecap="round"/>
+<ellipse cx="58.0882" cy="56.7089" rx="28.1689" ry="13.8457" transform="rotate(-45 58.0882 56.7089)" fill="white"/>
+<ellipse cx="57.672" cy="56.7454" rx="24.4869" ry="11.6179" transform="rotate(-45 57.672 56.7454)" fill="#F1C017"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M46.792 51.4046C47.625 50.434 48.5144 49.4731 49.4571 48.5304C59.0198 38.9677 70.4499 34.8936 74.987 39.4307C79.524 43.9677 75.4499 55.3978 65.8872 64.9606C65.6119 65.2359 65.335 65.5067 65.0568 65.7728L46.792 51.4046Z" fill="url(#paint1_linear_15248_1397)"/>
+<ellipse cx="58.7174" cy="57.7904" rx="21.3715" ry="10.1398" transform="rotate(-45 58.7174 57.7904)" fill="#BE7F06"/>
+<ellipse cx="58.7174" cy="57.7904" rx="21.3715" ry="10.1398" transform="rotate(-45 58.7174 57.7904)" fill="url(#paint2_radial_15248_1397)" fill-opacity="0.46"/>
+<path d="M49.8794 68.4764C44.8794 62.4764 30.9794 52.2764 15.3794 59.4764" stroke="#3A98EC" stroke-width="3" stroke-linecap="round"/>
+<path d="M63.8519 48.7812C57.9813 43.63 48.1388 29.4746 55.7339 14.0631" stroke="#3A98EC" stroke-width="3" stroke-linecap="round"/>
+<path d="M41.8794 46.5L23.5398 30.1186C21.074 27.916 17.2946 28.109 15.066 30.5512L14.7074 30.9442C12.6599 33.1879 12.8189 36.6667 15.0627 38.7142L16.3553 39.8939C17.8852 41.2899 20.257 41.1815 21.6531 39.6516L21.9901 39.2823C23.2 37.9564 23.106 35.9008 21.7802 34.6909L20.8569 33.8483C20.041 33.1037 18.7759 33.1616 18.0314 33.9775V33.9775" stroke="#D87B39" stroke-width="2" stroke-linecap="round"/>
+<path d="M36.0029 34.2016L22.1683 21.4887C19.6045 19.1328 19.4693 15.1329 21.8681 12.6092L22.3143 12.1399C24.3962 9.9496 27.8453 9.82033 30.0853 11.8486L31.4318 13.0679C32.967 14.458 33.0846 16.8295 31.6945 18.3647L31.3589 18.7353C30.1541 20.0659 28.0989 20.1678 26.7684 18.963L25.8418 18.124C25.023 17.3826 24.9603 16.1178 25.7017 15.299V15.299" stroke="#3A98EC" stroke-width="2" stroke-linecap="round"/>
+</g>
+<defs>
+<linearGradient id="paint0_linear_15248_1397" x1="68.8794" y1="85.5" x2="85.3794" y2="61" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F1C017"/>
+<stop offset="0.182776" stop-color="#FFE280"/>
+<stop offset="0.330306" stop-color="#F1C017"/>
+<stop offset="0.774307" stop-color="#DB930B"/>
+<stop offset="1" stop-color="#F1C017"/>
+</linearGradient>
+<linearGradient id="paint1_linear_15248_1397" x1="74.3794" y1="39" x2="40.3794" y2="74.5" gradientUnits="userSpaceOnUse">
+<stop offset="0.17209" stop-color="#975C00"/>
+<stop offset="1" stop-color="#975C00" stop-opacity="0"/>
+</linearGradient>
+<radialGradient id="paint2_radial_15248_1397" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(60.805 67.9526) rotate(-98.9726) scale(20.4022 43.0016)">
+<stop offset="0.150884" stop-color="#804500"/>
+<stop offset="1" stop-color="#804500" stop-opacity="0"/>
+</radialGradient>
+<clipPath id="clip0_15248_1397">
+<rect width="100" height="100" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/src/assets/png/logos_partenaires.svg b/src/assets/png/logos_partenaires.svg
index 9ada9a882c0073ea6277413af9971ded34999d17..843bb04eb014de9907516b7115058eeb13088eef 100644
--- a/src/assets/png/logos_partenaires.svg
+++ b/src/assets/png/logos_partenaires.svg
@@ -1,85 +1,91 @@
-<svg width="360" height="127" viewBox="0 0 360 127" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g clip-path="url(#clip0_627_41819)">
-<path d="M160.262 37.9602C160.318 37.9602 160.364 38.0046 160.364 38.0616V38.7481C160.364 41.9748 158.887 43.3586 156.574 43.3586C154.261 43.3586 152.725 41.9748 152.725 38.7481V37.5137C152.725 34.2124 154.277 32.8303 156.574 32.8303C158.623 32.8303 159.941 33.9474 160.3 36.0267C160.311 36.0889 160.262 36.1459 160.2 36.1459H158.728C158.682 36.1459 158.641 36.1121 158.63 36.0676C158.365 34.9292 157.712 34.3316 156.574 34.3316C155.2 34.3316 154.455 35.2245 154.455 37.439V38.7481C154.455 40.9644 155.2 41.8556 156.574 41.8556C157.947 41.8556 158.536 41.0907 158.661 39.4899C158.661 39.4756 158.65 39.4614 158.636 39.4614H156.72C156.665 39.4614 156.618 39.4169 156.618 39.36V38.0598C156.618 38.0046 156.663 37.9584 156.72 37.9584H160.262V37.9602Z" fill="white"/>
-<path d="M165.567 37.5741C167.026 37.5741 167.739 37.1881 167.739 36.0319C167.739 34.8758 167.026 34.4755 165.567 34.4755H163.94C163.926 34.4755 163.915 34.4862 163.915 34.5004V37.5492C163.915 37.5634 163.926 37.5741 163.94 37.5741H165.567ZM167.861 43.1522L165.916 39.0718C165.916 39.0718 165.904 39.0575 165.893 39.0575H163.94C163.926 39.0575 163.915 39.0682 163.915 39.0824V43.1077C163.915 43.1628 163.871 43.2091 163.814 43.2091H162.29C162.235 43.2091 162.189 43.1646 162.189 43.1077V33.0775C162.189 33.0223 162.233 32.9761 162.29 32.9761H165.686C168.051 32.9761 169.466 33.9988 169.466 36.0301C169.466 37.4282 168.806 38.33 167.632 38.764C167.618 38.7694 167.611 38.7854 167.618 38.7978L169.721 43.0615C169.755 43.129 169.705 43.2073 169.63 43.2073H167.952C167.912 43.2073 167.877 43.1842 167.861 43.1504" fill="white"/>
-<path d="M173.83 39.6054H176.498C176.516 39.6054 176.527 39.5894 176.522 39.5716L175.188 35.5392C175.18 35.5161 175.147 35.5161 175.139 35.5392L173.805 39.5716C173.8 39.5876 173.812 39.6054 173.828 39.6054M170.82 43.0739L174.321 33.0437C174.335 33.0028 174.372 32.9761 174.417 32.9761H175.91C175.953 32.9761 175.992 33.0028 176.006 33.0437L179.507 43.0739C179.531 43.1397 179.481 43.2073 179.411 43.2073H177.797C177.754 43.2073 177.715 43.1788 177.701 43.1379L177.03 41.1049C177.026 41.0942 177.018 41.0871 177.007 41.0871H173.338C173.327 41.0871 173.317 41.0942 173.315 41.1049L172.644 43.1379C172.63 43.1788 172.592 43.2073 172.548 43.2073H170.918C170.848 43.2073 170.8 43.1397 170.821 43.0739" fill="white"/>
-<path d="M187.974 33.0794V43.1097C187.974 43.1648 187.929 43.211 187.872 43.211H186.499C186.463 43.211 186.431 43.1933 186.412 43.1612L182.308 36.3345C182.295 36.3131 182.261 36.322 182.261 36.3469V43.1097C182.261 43.1648 182.217 43.211 182.16 43.211H180.695C180.64 43.211 180.594 43.1666 180.594 43.1097V33.0794C180.594 33.0243 180.638 32.978 180.695 32.978H182.024C182.06 32.978 182.092 32.9958 182.111 33.0278L186.26 39.9435C186.272 39.9649 186.306 39.956 186.306 39.9311V33.0794C186.306 33.0243 186.351 32.978 186.408 32.978H187.872C187.928 32.978 187.974 33.0225 187.974 33.0794Z" fill="white"/>
-<path d="M195.433 38.7018V37.4851C195.433 35.3791 194.779 34.4755 193.305 34.4755H191.59C191.575 34.4755 191.565 34.4862 191.565 34.5004V41.7007C191.565 41.715 191.575 41.7256 191.59 41.7256H193.305C194.779 41.7256 195.433 40.806 195.433 38.7M189.84 43.1077V33.0775C189.84 33.0223 189.884 32.9761 189.942 32.9761H193.307C195.613 32.9761 197.16 34.207 197.16 37.4834V38.7C197.16 41.9764 195.612 43.2073 193.307 43.2073H189.942C189.886 43.2073 189.84 43.1628 189.84 43.1059" fill="white"/>
-<path d="M229.767 34.8831C228.742 34.8831 228.191 35.6248 228.191 37.3003V38.9012C228.191 40.5768 228.74 41.3185 229.767 41.3185C230.795 41.3185 231.344 40.5768 231.344 38.9012V37.3003C231.344 35.6248 230.795 34.8831 229.767 34.8831Z" fill="white"/>
-<path d="M203.404 25.2441V50.9592H251.187V25.2441H203.404ZM217.65 43.1168C217.65 43.1719 217.605 43.2182 217.548 43.2182H211.268C211.213 43.2182 211.166 43.1737 211.166 43.1168V33.0865C211.166 33.0314 211.211 32.9852 211.268 32.9852H213.533C213.588 32.9852 213.635 33.0296 213.635 33.0865V41.146C213.635 41.1602 213.645 41.1709 213.66 41.1709H217.548C217.603 41.1709 217.65 41.2153 217.65 41.2722V43.1168ZM225.246 33.1328L222.128 39.1182C222.128 39.1182 222.125 39.1253 222.125 39.1307V43.1168C222.125 43.1719 222.08 43.2182 222.023 43.2182H219.756C219.701 43.2182 219.654 43.1737 219.654 43.1168V39.1307C219.654 39.1307 219.654 39.1218 219.651 39.1182L216.533 33.1328C216.497 33.0652 216.547 32.9852 216.622 32.9852H219.23C219.269 32.9852 219.305 33.0083 219.323 33.0439L220.864 36.4483C220.873 36.4679 220.901 36.4679 220.91 36.4483L222.451 33.0439C222.467 33.0083 222.503 32.9852 222.544 32.9852H225.151C225.228 32.9852 225.276 33.0652 225.241 33.1328H225.246ZM233.811 38.9012C233.811 41.9553 232.1 43.364 229.766 43.364C227.431 43.364 225.72 41.9553 225.72 38.9012V37.3003C225.72 34.216 227.431 32.8375 229.766 32.8375C232.1 32.8375 233.811 34.216 233.811 37.3003V38.9012ZM243.424 43.115C243.424 43.1701 243.38 43.2164 243.323 43.2164H241.486C241.452 43.2164 241.42 43.2004 241.402 43.1719L237.701 37.6223C237.687 37.601 237.655 37.6116 237.655 37.6365V43.1168C237.655 43.1719 237.61 43.2182 237.553 43.2182H235.436C235.38 43.2182 235.334 43.1737 235.334 43.1168V33.0865C235.334 33.0314 235.379 32.9852 235.436 32.9852H237.243C237.276 32.9852 237.308 33.0029 237.326 33.0296L241.056 38.654C241.07 38.6753 241.102 38.6646 241.102 38.6397V33.0848C241.102 33.0296 241.147 32.9834 241.204 32.9834H243.321C243.376 32.9834 243.423 33.0278 243.423 33.0848V43.115H243.424Z" fill="white"/>
-<path d="M148.521 10.8292H147.445C147.431 10.8292 147.42 10.8398 147.42 10.8541V13.0721C147.42 13.0864 147.431 13.097 147.445 13.097H148.521C149.518 13.097 150.231 12.9636 150.231 11.9996C150.231 11.0355 149.518 10.8274 148.521 10.8274V10.8292Z" fill="white"/>
-<path d="M177.021 10.6816C175.995 10.6816 175.444 11.4234 175.444 13.0989V14.6998C175.444 16.3753 175.994 17.1171 177.021 17.1171C178.048 17.1171 178.598 16.3753 178.598 14.6998V13.0989C178.598 11.4234 178.048 10.6816 177.021 10.6816Z" fill="white"/>
-<path d="M158.225 10.6816C157.2 10.6816 156.649 11.4234 156.649 13.0989V14.6998C156.649 16.3753 157.198 17.1171 158.225 17.1171C159.253 17.1171 159.802 16.3753 159.802 14.6998V13.0989C159.802 11.4234 159.253 10.6816 158.225 10.6816Z" fill="white"/>
-<path d="M167.213 10.8293H166.287C166.273 10.8293 166.262 10.84 166.262 10.8542V13.4885C166.262 13.5028 166.273 13.5134 166.287 13.5134H167.213C168.506 13.5134 169.072 13.1275 169.072 12.1047C169.072 11.274 168.506 10.8293 167.213 10.8293Z" fill="white"/>
-<path d="M108.056 1.04272V26.756H204.922V1.04272H108.056ZM125.958 18.9154C125.958 18.9705 125.914 19.0168 125.857 19.0168H123.74C123.684 19.0168 123.638 18.9723 123.638 18.9154V13.3373C123.638 13.3106 123.602 13.3017 123.59 13.3266L121.555 17.2718C121.537 17.3056 121.503 17.327 121.465 17.327H120.265C120.228 17.327 120.192 17.3056 120.174 17.2718L118.184 13.3729C118.171 13.3497 118.136 13.3586 118.136 13.3835V18.9171C118.136 18.9723 118.091 19.0185 118.034 19.0185H115.917C115.861 19.0185 115.815 18.9741 115.815 18.9171V8.88691C115.815 8.83177 115.86 8.78552 115.917 8.78552H118.045C118.082 8.78552 118.116 8.80687 118.134 8.83888L120.863 13.9332C120.872 13.9509 120.898 13.9509 120.907 13.9332L123.622 8.83888C123.64 8.80509 123.674 8.78552 123.711 8.78552H125.853C125.908 8.78552 125.955 8.82999 125.955 8.88691V18.9171L125.958 18.9154ZM134.004 10.7297C134.004 10.7848 133.958 10.8311 133.903 10.8311H130.016C130.002 10.8311 129.991 10.8417 129.991 10.856V12.6738C129.991 12.688 130.002 12.6987 130.016 12.6987H133.458C133.514 12.6987 133.558 12.7432 133.558 12.7983V14.6446C133.558 14.6998 133.512 14.746 133.457 14.746H130.016C130.002 14.746 129.991 14.7567 129.991 14.7709V16.9445C129.991 16.9588 130.002 16.9694 130.016 16.9694H133.904C133.96 16.9694 134.004 17.0139 134.004 17.069V18.9154C134.004 18.9705 133.958 19.0168 133.903 19.0168H127.622C127.567 19.0168 127.523 18.9723 127.523 18.9171V8.88513C127.523 8.82999 127.569 8.78374 127.624 8.78374H128.955C128.964 8.78374 128.973 8.77841 128.976 8.77129L129.939 7.15443C129.959 7.12597 129.991 7.10818 130.027 7.10818H132.527C132.613 7.10818 132.659 7.20601 132.608 7.27182L131.532 8.74283C131.52 8.75884 131.532 8.78374 131.552 8.78374H133.903C133.958 8.78374 134.002 8.82821 134.002 8.88335V10.7297H134.004ZM143.384 10.7297C143.384 10.7848 143.34 10.8311 143.282 10.8311H140.732C140.718 10.8311 140.707 10.8417 140.707 10.856V18.9154C140.707 18.9705 140.662 19.0168 140.605 19.0168H138.34C138.285 19.0168 138.238 18.9723 138.238 18.9154V10.856C138.238 10.8417 138.228 10.8311 138.213 10.8311H135.663C135.608 10.8311 135.561 10.7866 135.561 10.7297V8.88513C135.561 8.82999 135.606 8.78374 135.663 8.78374H143.282C143.338 8.78374 143.384 8.82821 143.384 8.88513V10.7297ZM152.957 19.015H150.476C150.436 19.015 150.399 18.9919 150.383 18.9545L148.706 15.1587C148.703 15.1498 148.694 15.1445 148.683 15.1445H147.445C147.431 15.1445 147.42 15.1551 147.42 15.1694V18.9136C147.42 18.9687 147.376 19.015 147.319 19.015H145.054C144.998 19.015 144.952 18.9705 144.952 18.9136V8.88335C144.952 8.82821 144.997 8.78196 145.054 8.78196H148.819C151.184 8.78196 152.7 9.86521 152.7 11.9997C152.7 13.3248 152.113 14.2249 151.088 14.7033C151.075 14.7087 151.07 14.7247 151.075 14.7371L153.048 18.8709C153.08 18.9385 153.03 19.015 152.957 19.015ZM162.271 14.6998C162.271 17.7539 160.56 19.1626 158.225 19.1626C155.891 19.1626 154.18 17.7539 154.18 14.6998V13.0989C154.18 10.0146 155.891 8.63611 158.225 8.63611C160.56 8.63611 162.271 10.0146 162.271 13.0989V14.6998ZM167.661 15.5589H166.289C166.275 15.5589 166.264 15.5696 166.264 15.5838V18.9136C166.264 18.9687 166.22 19.015 166.162 19.015H163.897C163.842 19.015 163.796 18.9705 163.796 18.9136V8.88335C163.796 8.82821 163.84 8.78196 163.897 8.78196H167.662C170.028 8.78196 171.544 9.82074 171.544 12.1028C171.544 14.385 170.042 15.5571 167.662 15.5571L167.661 15.5589ZM181.066 14.6998C181.066 17.7539 179.356 19.1626 177.021 19.1626C174.686 19.1626 172.976 17.7539 172.976 14.6998V13.0989C172.976 10.0146 174.686 8.63611 177.021 8.63611C179.356 8.63611 181.066 10.0146 181.066 13.0989V14.6998ZM189.103 18.9136C189.103 18.9687 189.059 19.015 189.001 19.015H182.721C182.666 19.015 182.62 18.9705 182.62 18.9136V8.88335C182.62 8.82821 182.664 8.78196 182.721 8.78196H184.987C185.042 8.78196 185.088 8.82643 185.088 8.88335V16.9428C185.088 16.957 185.099 16.9677 185.113 16.9677H189.001C189.057 16.9677 189.103 17.0121 189.103 17.069V18.9136ZM197.16 10.7279C197.16 10.783 197.115 10.8293 197.058 10.8293H193.17C193.155 10.8293 193.145 10.84 193.145 10.8542V12.672C193.145 12.6863 193.155 12.6969 193.17 12.6969H196.612C196.667 12.6969 196.714 12.7414 196.714 12.7983V14.6429C196.714 14.698 196.669 14.7443 196.612 14.7443H193.17C193.155 14.7443 193.145 14.7549 193.145 14.7692V16.9428C193.145 16.957 193.155 16.9677 193.17 16.9677H197.058C197.113 16.9677 197.16 17.0121 197.16 17.069V18.9136C197.16 18.9687 197.115 19.015 197.058 19.015H190.778C190.723 19.015 190.676 18.9705 190.676 18.9136V8.88335C190.676 8.82821 190.721 8.78196 190.778 8.78196H197.058C197.113 8.78196 197.16 8.82643 197.16 8.88335V10.7279Z" fill="white"/>
-<path d="M257.853 92.8526H258.466V91.575H259.443V91.069H258.466V90.3573H259.616V89.8514H257.853V92.8526Z" fill="white"/>
-<path d="M260.199 92.8526H260.812V91.6393H261.128L261.935 92.8526H262.657L261.711 91.5235C262.022 91.382 262.199 91.1119 262.199 90.7475C262.199 90.1901 261.789 89.8514 261.123 89.8514H260.199V92.8526ZM261.158 90.3573C261.417 90.3573 261.568 90.5117 261.568 90.7389C261.568 90.9833 261.417 91.1333 261.158 91.1333H260.812V90.3573H261.158Z" fill="white"/>
-<path d="M262.839 92.8526H263.492L263.781 92.0723H264.991L265.28 92.8526H265.933L264.788 89.8514H263.984L262.839 92.8526ZM263.971 91.5535L264.386 90.4259L264.801 91.5535H263.971Z" fill="white"/>
-<path d="M266.443 92.8526H267.056V90.6832L268.409 92.8526H269.195V89.8514H268.582V92.0209L267.229 89.8514H266.443V92.8526Z" fill="white"/>
-<path d="M271.432 92.3681C270.862 92.3681 270.456 91.9265 270.456 91.352C270.456 90.7775 270.862 90.3359 271.432 90.3359C271.778 90.3359 272.05 90.5031 272.223 90.7475L272.707 90.3745C272.43 90.01 271.981 89.7656 271.432 89.7656C270.477 89.7656 269.825 90.4945 269.825 91.352C269.825 92.2095 270.477 92.9384 271.432 92.9384C271.981 92.9384 272.43 92.6983 272.707 92.3253L272.223 91.9565C272.05 92.2009 271.778 92.3681 271.432 92.3681Z" fill="white"/>
-<path d="M273.282 92.8526H275.045V92.3467H273.896V91.575H274.872V91.069H273.896V90.3573H275.045V89.8514H273.282V92.8526Z" fill="white"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M269.688 99.605C270.459 98.9088 270.942 97.9055 270.942 96.79C270.942 95.6746 270.459 94.6713 269.688 93.9751C269.901 94.1019 270.098 94.2518 270.276 94.4212C270.777 95.0804 271.074 95.9008 271.074 96.79C271.074 97.6793 270.777 98.4997 270.276 99.1589C270.098 99.3283 269.901 99.4782 269.688 99.605ZM268.404 100.046C269.71 99.5327 270.634 98.2684 270.634 96.79C270.634 95.3117 269.71 94.0474 268.404 93.5345C268.268 93.5175 268.129 93.5088 267.988 93.5088C267.954 93.5088 267.92 93.5093 267.885 93.5104C269.385 93.8596 270.501 95.1955 270.501 96.79C270.501 98.3846 269.385 99.7204 267.885 100.07C267.92 100.071 267.954 100.071 267.988 100.071C268.129 100.071 268.268 100.063 268.404 100.046ZM266.746 93.7482C266.864 93.7346 266.985 93.7275 267.107 93.7275C268.811 93.7275 270.193 95.0987 270.193 96.79C270.193 98.4814 268.811 99.8525 267.107 99.8525C266.985 99.8525 266.864 99.8455 266.746 99.8319C266.59 99.7689 266.439 99.6945 266.296 99.6095C266.554 99.6823 266.826 99.7213 267.107 99.7213C268.738 99.7213 270.06 98.4089 270.06 96.79C270.06 95.1712 268.738 93.8588 267.107 93.8588C266.826 93.8588 266.554 93.8977 266.296 93.9705C266.439 93.8856 266.59 93.8111 266.746 93.7482ZM265.315 98.7211C265.159 98.509 265.028 98.2777 264.927 98.0314C265.36 98.7798 266.174 99.2838 267.107 99.2838C268.494 99.2838 269.62 98.1673 269.62 96.79C269.62 95.4128 268.494 94.2963 267.107 94.2963C266.174 94.2963 265.36 94.8002 264.927 95.5486C265.028 95.3024 265.159 95.0711 265.315 94.859C265.786 94.4282 266.415 94.165 267.107 94.165C268.568 94.165 269.752 95.3403 269.752 96.79C269.752 98.2398 268.568 99.415 267.107 99.415C266.415 99.415 265.786 99.1519 265.315 98.7211ZM267.107 98.8463C268.251 98.8463 269.179 97.9257 269.179 96.79C269.179 95.6544 268.251 94.7338 267.107 94.7338C265.962 94.7338 265.035 95.6544 265.035 96.79C265.035 97.9257 265.962 98.8463 267.107 98.8463ZM267.107 98.9775C268.324 98.9775 269.311 97.9982 269.311 96.79C269.311 95.5819 268.324 94.6025 267.107 94.6025C265.889 94.6025 264.902 95.5819 264.902 96.79C264.902 97.9982 265.889 98.9775 267.107 98.9775ZM268.738 96.79C268.738 97.684 268.008 98.4088 267.107 98.4088C266.206 98.4088 265.475 97.684 265.475 96.79C265.475 95.896 266.206 95.1713 267.107 95.1713C268.008 95.1713 268.738 95.896 268.738 96.79ZM268.87 96.79C268.87 97.7565 268.081 98.54 267.107 98.54C266.133 98.54 265.343 97.7565 265.343 96.79C265.343 95.8235 266.133 95.04 267.107 95.04C268.081 95.04 268.87 95.8235 268.87 96.79ZM267.107 97.9713C267.764 97.9713 268.297 97.4424 268.297 96.79C268.297 96.1377 267.764 95.6088 267.107 95.6088C266.449 95.6088 265.916 96.1377 265.916 96.79C265.916 97.4424 266.449 97.9713 267.107 97.9713ZM267.107 98.1025C267.837 98.1025 268.429 97.5149 268.429 96.79C268.429 96.0652 267.837 95.4775 267.107 95.4775C266.376 95.4775 265.784 96.0652 265.784 96.79C265.784 97.5149 266.376 98.1025 267.107 98.1025ZM267.856 96.79C267.856 97.2008 267.521 97.5338 267.107 97.5338C266.693 97.5338 266.357 97.2008 266.357 96.79C266.357 96.3793 266.693 96.0463 267.107 96.0463C267.521 96.0463 267.856 96.3793 267.856 96.79ZM267.988 96.79C267.988 97.2733 267.594 97.665 267.107 97.665C266.62 97.665 266.225 97.2733 266.225 96.79C266.225 96.3068 266.62 95.915 267.107 95.915C267.594 95.915 267.988 96.3068 267.988 96.79ZM267.415 96.79C267.415 96.9592 267.277 97.0963 267.107 97.0963C266.936 97.0963 266.798 96.9592 266.798 96.79C266.798 96.6209 266.936 96.4838 267.107 96.4838C267.277 96.4838 267.415 96.6209 267.415 96.79ZM267.547 96.79C267.547 97.0317 267.35 97.2275 267.107 97.2275C266.863 97.2275 266.666 97.0317 266.666 96.79C266.666 96.5484 266.863 96.3525 267.107 96.3525C267.35 96.3525 267.547 96.5484 267.547 96.79Z" fill="white"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M272.753 93.646C272.244 93.8286 271.854 94.1863 271.57 94.6793L271.655 94.7354L272.753 93.646ZM272.03 94.982L271.774 94.8135L273.03 93.5667C273.182 93.5337 273.343 93.5144 273.513 93.5098L272.03 94.982ZM272.405 95.2286L272.149 95.0602L273.71 93.5112C273.841 93.517 273.967 93.5329 274.088 93.5582L272.405 95.2286ZM273.677 94.5851C273.624 94.577 273.569 94.5729 273.511 94.5729C273.409 94.5729 273.314 94.5856 273.225 94.6103L274.246 93.5976C274.354 93.6289 274.457 93.6684 274.553 93.7154L273.677 94.5851ZM272.57 96.9211V96.4985L272.991 96.0805H273.417L272.57 96.9211ZM271.59 99.1312C271.529 99.0521 271.471 98.9685 271.416 98.8805L272.279 98.0244C272.327 98.1245 272.376 98.2164 272.427 98.3003L271.59 99.1312ZM271.885 99.4571C271.812 99.3898 271.743 99.3175 271.677 99.2401L272.504 98.4197C272.565 98.5076 272.629 98.585 272.696 98.6523L271.885 99.4571ZM272.238 99.7255C272.151 99.6723 272.069 99.6134 271.99 99.5488L272.799 98.746C272.881 98.8134 272.968 98.8671 273.062 98.9079L272.238 99.7255ZM272.659 99.9258C272.556 99.8894 272.457 99.8464 272.363 99.797L273.207 98.9599C273.319 98.9916 273.44 99.007 273.57 99.007C273.575 99.007 273.58 99.0069 273.585 99.0069L272.659 99.9258ZM273.163 100.045C273.04 100.028 272.922 100.004 272.809 99.9729L273.805 98.9848C274.193 98.9089 274.479 98.6428 274.547 98.2491L275.514 97.2893C275.563 97.3856 275.602 97.4874 275.633 97.5939L273.163 100.045ZM273.766 100.065C273.704 100.069 273.642 100.071 273.578 100.071C273.497 100.071 273.419 100.068 273.342 100.063L275.67 97.7529C275.692 97.8705 275.703 97.9932 275.703 98.1202C275.703 98.1276 275.703 98.1351 275.703 98.1426L273.766 100.065ZM274.591 99.8649C274.407 99.9481 274.204 100.007 273.988 100.041L275.691 98.3506C275.67 98.5554 275.619 98.746 275.543 98.9199L274.591 99.8649ZM275.259 96.9231C275.328 96.998 275.389 97.0784 275.443 97.1637L274.561 98.0386C274.558 97.9097 274.533 97.7922 274.489 97.6878L275.259 96.9231ZM274.922 96.6394C275.008 96.6955 275.088 96.7574 275.161 96.8246L274.42 97.5594C274.366 97.4753 274.296 97.4025 274.213 97.3425L274.922 96.6394ZM274.876 96.489C274.847 96.5133 274.817 96.5367 274.787 96.5593C274.79 96.5615 274.794 96.5636 274.798 96.5657L274.091 97.2679C273.995 97.2192 273.887 97.1842 273.769 97.1642L275.423 95.5228C275.37 95.822 275.246 96.0884 275.058 96.3082L274.876 96.489ZM275.432 94.8952C275.446 94.9852 275.453 95.0789 275.453 95.1759C275.453 95.2179 275.452 95.2595 275.45 95.3006L273.59 97.1459C273.57 97.1451 273.549 97.1446 273.528 97.1446H273.165L275.432 94.8952ZM275.284 94.4237C275.332 94.5201 275.371 94.6231 275.399 94.7323L272.968 97.1446H272.57V97.1171L273.627 96.0675C273.997 96.0106 274.261 95.7697 274.299 95.4015L275.284 94.4237ZM275.028 94.0592C275.097 94.1323 275.159 94.212 275.213 94.2978L274.298 95.2064C274.284 95.0852 274.246 94.9799 274.189 94.8918L275.028 94.0592ZM274.681 93.7845C274.77 93.837 274.852 93.8966 274.927 93.9628L274.1 94.7839C274.027 94.7133 273.938 94.6596 273.835 94.624L274.681 93.7845ZM272.793 96.0805H272.57V96.3025L272.793 96.0805ZM271.699 98.4037L271.295 98.67C271.31 98.6995 271.327 98.7286 271.343 98.7573L271.699 98.4037Z" fill="white"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M262.696 93.7467C262.596 93.734 262.493 93.7275 262.388 93.7275C262.268 93.7275 262.152 93.734 262.04 93.7467H262.696ZM260.86 94.1843C261.038 94.0604 261.231 93.9595 261.44 93.8843L263.236 93.8843C263.424 93.9595 263.595 94.0605 263.742 94.1843L260.86 94.1843ZM260.375 94.6217C260.47 94.5129 260.572 94.4127 260.681 94.3217H263.886C263.971 94.4127 264.044 94.513 264.105 94.6217H260.375ZM260.061 95.0592L260.053 95.0546C260.118 94.9511 260.187 94.8525 260.26 94.7592H262.102C261.849 94.7919 261.641 94.8978 261.459 95.0592H260.061ZM260.796 95.4966L260.292 95.1966H261.322C261.241 95.2859 261.166 95.3865 261.093 95.4966H260.796ZM263.025 95.9342C263.063 95.8391 263.088 95.7403 263.098 95.6342L264.291 95.6342C264.278 95.7372 264.257 95.8371 264.228 95.9342H263.025ZM262.747 96.3717C262.832 96.2707 262.903 96.1723 262.959 96.0717H264.181C264.142 96.1747 264.094 96.2745 264.04 96.3717H262.747ZM262.333 96.8092L262.336 96.8071C262.442 96.7016 262.539 96.6034 262.626 96.5092H263.957C263.891 96.612 263.818 96.7118 263.74 96.8092H262.333ZM261.878 97.2466L262.19 96.9466L263.624 96.9466C263.534 97.049 263.439 97.1488 263.342 97.2466H261.878ZM261.422 97.6842L261.735 97.3842L263.201 97.3842C263.185 97.3989 263.17 97.4135 263.155 97.4281L262.883 97.6842H261.422ZM260.966 98.1217L261.279 97.8217H262.737L262.418 98.1217H260.966ZM260.511 98.5593L260.823 98.2593H262.272L261.953 98.5593H260.511ZM260.245 98.9967V98.8147L260.368 98.6967H261.808L261.682 98.8147H264.462V98.9967H260.245ZM260.245 99.4342V99.1342H264.462V99.4342H260.245ZM264.462 99.5718V99.8525H260.245V99.5718H264.462ZM264.303 95.4966H263.102C263.098 95.3854 263.076 95.2851 263.039 95.1966H264.292C264.3 95.2665 264.305 95.3383 264.305 95.4119C264.305 95.4404 264.304 95.4686 264.303 95.4966ZM264.173 94.7592C264.214 94.8539 264.247 94.954 264.269 95.0592H262.962C262.843 94.8951 262.657 94.7915 262.431 94.7592H264.173Z" fill="white"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M279.01 100.064C279.083 100.069 279.156 100.071 279.23 100.071C279.257 100.071 279.283 100.071 279.31 100.07L279.31 93.5097C279.283 93.5091 279.257 93.5088 279.23 93.5088C279.156 93.5088 279.083 93.5112 279.01 93.516L279.01 100.064ZM278.087 93.7103C278.183 93.6752 278.281 93.6443 278.381 93.618L278.813 100.045C278.282 99.9791 277.791 99.788 277.369 99.5026L275.993 96.1191C276.026 95.9594 276.072 95.8039 276.127 95.6537L277.682 99.4766L276.335 95.2049C276.398 95.0906 276.469 94.9805 276.545 94.8751L277.834 98.9587L276.79 94.5756C276.869 94.4899 276.953 94.4084 277.041 94.3314L278.347 99.8207L277.523 93.9796C277.614 93.925 277.708 93.8746 277.804 93.8287L278.359 97.7556L278.087 93.7103ZM276.005 97.5173C275.952 97.2834 275.924 97.04 275.924 96.79C275.924 96.7588 275.924 96.7277 275.925 96.6967L277.339 99.4816C276.785 99.098 276.356 98.5507 276.122 97.9105L276.708 98.9014L276.005 97.5173ZM279.756 93.5501L279.318 100.07C280.277 100.045 281.134 99.6156 281.722 98.9469L282.345 97.8942C282.447 97.6093 282.511 97.3063 282.531 96.9912L281.428 98.8544L282.535 96.6747C282.528 96.4912 282.507 96.3117 282.471 96.1371L280.686 99.6542L282.324 95.6285C282.274 95.4994 282.217 95.3741 282.152 95.2533L280.454 99.4296L281.898 94.8515C281.827 94.7556 281.751 94.6637 281.671 94.5761L280.303 98.9117L281.397 94.3118C281.314 94.2401 281.227 94.1725 281.137 94.1092L279.789 99.7737L280.63 93.8164C280.537 93.7731 280.441 93.734 280.343 93.6994L279.778 97.7086L280.053 93.6112C279.956 93.5865 279.857 93.566 279.756 93.5501Z" fill="white"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M276.088 84.1838C273.827 82.7497 271.119 81.915 268.209 81.915C260.296 81.915 253.881 88.0851 253.881 95.6963C253.881 103.307 260.296 109.478 268.209 109.478C271.119 109.478 273.827 108.643 276.088 107.209C273.689 108.911 270.738 109.915 267.548 109.915C259.513 109.915 252.999 103.549 252.999 95.6963C252.999 87.8435 259.513 81.4775 267.548 81.4775C270.738 81.4775 273.689 82.4815 276.088 84.1838Z" fill="white"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M267.548 84.54C265.059 84.54 262.743 85.2184 260.805 86.3855C262.928 84.6853 265.643 83.665 268.602 83.665C274.398 83.665 279.259 87.5803 280.566 92.8525C279.897 92.8525 279.316 92.4096 279.056 91.7932C277.265 87.5485 272.787 84.54 267.548 84.54ZM279.787 100.728C279.142 100.728 278.561 101.096 278.216 101.641C276.076 105.02 272.099 107.29 267.548 107.29C266.176 107.29 264.856 107.084 263.624 106.703C265.146 107.362 266.83 107.728 268.602 107.728C273.562 107.728 277.838 104.86 279.787 100.728Z" fill="white"/>
-<path d="M284.988 88.117H286.625V92.415H287.288V88.117H288.924V87.515H284.988V88.117Z" fill="white"/>
-<path d="M290.666 92.415H293.318V91.855H291.329V90.196H293.036V89.643H291.329V88.075H293.318V87.515H290.666V92.415Z" fill="white"/>
-<path d="M295.346 92.415H296.009V90.266H296.658C296.707 90.266 296.763 90.266 296.813 90.259L298.245 92.415H299.028L297.434 90.133C297.963 89.923 298.266 89.482 298.266 88.894C298.266 88.054 297.652 87.515 296.658 87.515H295.346V92.415ZM296.686 88.075C297.25 88.075 297.582 88.383 297.582 88.88C297.582 89.405 297.25 89.706 296.686 89.706H296.009V88.075H296.686Z" fill="white"/>
-<path d="M300.57 92.415H301.233V90.266H301.882C301.931 90.266 301.988 90.266 302.037 90.259L303.469 92.415H304.252L302.658 90.133C303.187 89.923 303.49 89.482 303.49 88.894C303.49 88.054 302.876 87.515 301.882 87.515H300.57V92.415ZM301.91 88.075C302.474 88.075 302.806 88.383 302.806 88.88C302.806 89.405 302.474 89.706 301.91 89.706H301.233V88.075H301.91Z" fill="white"/>
-<path d="M305.794 92.415H306.457V87.515H305.794V92.415Z" fill="white"/>
-<path d="M308.195 88.117H309.832V92.415H310.495V88.117H312.131V87.515H308.195V88.117Z" fill="white"/>
-<path d="M315.79 87.375C314.246 87.375 313.195 88.565 313.195 89.965C313.195 91.365 314.246 92.555 315.79 92.555C317.328 92.555 318.379 91.365 318.379 89.965C318.379 88.565 317.328 87.375 315.79 87.375ZM315.79 91.939C314.676 91.939 313.879 91.057 313.879 89.965C313.879 88.873 314.676 87.991 315.79 87.991C316.898 87.991 317.695 88.873 317.695 89.965C317.695 91.057 316.898 91.939 315.79 91.939Z" fill="white"/>
-<path d="M320.227 92.415H320.89V87.515H320.227V92.415Z" fill="white"/>
-<path d="M323.164 92.415H323.827V90.266H324.476C324.525 90.266 324.582 90.266 324.631 90.259L326.063 92.415H326.846L325.252 90.133C325.781 89.923 326.084 89.482 326.084 88.894C326.084 88.054 325.47 87.515 324.476 87.515H323.164V92.415ZM324.504 88.075C325.068 88.075 325.4 88.383 325.4 88.88C325.4 89.405 325.068 89.706 324.504 89.706H323.827V88.075H324.504Z" fill="white"/>
-<path d="M328.388 92.415H331.04V91.855H329.051V90.196H330.758V89.643H329.051V88.075H331.04V87.515H328.388V92.415Z" fill="white"/>
-<path d="M332.694 91.743C333.124 92.275 333.661 92.548 334.387 92.548C335.262 92.548 335.918 92.009 335.918 91.162C335.918 89.531 333.583 89.783 333.583 88.684C333.583 88.264 333.893 87.963 334.38 87.963C334.803 87.963 335.149 88.194 335.438 88.607L335.939 88.173C335.572 87.69 335.064 87.375 334.373 87.375C333.512 87.375 332.906 87.97 332.906 88.698C332.906 90.315 335.248 90.077 335.248 91.183C335.248 91.631 334.93 91.96 334.38 91.96C333.921 91.96 333.526 91.729 333.188 91.295L332.694 91.743Z" fill="white"/>
-<path d="M285.468 98.1025H287.408C288.973 98.1025 290.032 96.9755 290.032 95.6525C290.032 94.3295 288.973 93.2025 287.408 93.2025H285.468V98.1025ZM287.422 94.1055C288.339 94.1055 289.002 94.7775 289.002 95.6525C289.002 96.5205 288.339 97.1995 287.422 97.1995H286.469V94.1055H287.422Z" fill="white"/>
-<path d="M293.534 98.1025H294.535V93.2025H293.534V98.1025Z" fill="white"/>
-<path d="M296.268 98.1025H297.27V94.5605L299.477 98.1025H300.761V93.2025H299.76V96.7445L297.552 93.2025H296.268V98.1025Z" fill="white"/>
-<path d="M302.495 98.1025H303.496V94.5605L305.704 98.1025H306.988V93.2025H305.986V96.7445L303.779 93.2025H302.495V98.1025Z" fill="white"/>
-<path d="M310.922 93.0625C309.364 93.0625 308.298 94.2525 308.298 95.6525C308.298 97.0525 309.364 98.2425 310.922 98.2425C312.474 98.2425 313.539 97.0525 313.539 95.6525C313.539 94.2525 312.474 93.0625 310.922 93.0625ZM310.922 97.3115C309.991 97.3115 309.328 96.5905 309.328 95.6525C309.328 94.7145 309.991 93.9935 310.922 93.9935C311.847 93.9935 312.51 94.7145 312.51 95.6525C312.51 96.5905 311.847 97.3115 310.922 97.3115Z" fill="white"/>
-<path d="M314.121 93.2025L315.99 98.1025H317.302L319.172 93.2025H318.107L316.646 97.0315L315.186 93.2025H314.121Z" fill="white"/>
-<path d="M319.232 98.1025H320.297L320.77 96.8285H322.745L323.217 98.1025H324.283L322.413 93.2025H321.101L319.232 98.1025ZM321.08 95.9815L321.757 94.1405L322.435 95.9815H321.08Z" fill="white"/>
-<path d="M324.394 94.1055H325.918V98.1025H326.919V94.1055H328.443V93.2025H324.394V94.1055Z" fill="white"/>
-<path d="M329.675 98.1025H330.677V93.2025H329.675V98.1025Z" fill="white"/>
-<path d="M334.61 93.0625C333.051 93.0625 331.986 94.2525 331.986 95.6525C331.986 97.0525 333.051 98.2425 334.61 98.2425C336.162 98.2425 337.227 97.0525 337.227 95.6525C337.227 94.2525 336.162 93.0625 334.61 93.0625ZM334.61 97.3115C333.679 97.3115 333.016 96.5905 333.016 95.6525C333.016 94.7145 333.679 93.9935 334.61 93.9935C335.534 93.9935 336.197 94.7145 336.197 95.6525C336.197 96.5905 335.534 97.3115 334.61 97.3115Z" fill="white"/>
-<path d="M338.54 98.1025H339.542V94.5605L341.749 98.1025H343.033V93.2025H342.032V96.7445L339.824 93.2025H338.54V98.1025Z" fill="white"/>
-<path d="M290.832 94.3257V92.9863H292.078V94.0438C292.078 94.6163 292.012 95.0286 291.878 95.2806C291.693 95.6267 291.405 95.8873 291.013 96.0625L290.729 95.6075C290.961 95.5135 291.133 95.3661 291.245 95.1653C291.362 94.9602 291.426 94.6804 291.439 94.3257H290.832Z" fill="white"/>
-<path d="M282.096 99.8525H343.375V100.728H282.096V99.8525Z" fill="white"/>
-<g clip-path="url(#clip1_627_41819)">
-<path d="M155.022 98.6216H152.912V105.05H151.354V98.6216H149.278V97.127H155.022V98.6216ZM160.766 103.556V105.05H155.996V97.1428H160.77V98.6374H157.534V100.322H160.49V101.796H157.534V103.572L160.766 103.556ZM164.723 102.299H163.555V105.066H161.997V97.1586H165.112C165.453 97.1576 165.79 97.2247 166.105 97.3561C166.42 97.4876 166.706 97.6807 166.947 97.9245C167.188 98.1684 167.38 98.4581 167.511 98.7772C167.642 99.0962 167.709 99.4384 167.71 99.784C167.701 100.274 167.554 100.752 167.287 101.161C167.02 101.57 166.644 101.893 166.203 102.093L167.932 105.082H166.269L164.723 102.299ZM163.555 100.931H165.14C165.415 100.887 165.667 100.746 165.848 100.53C166.03 100.315 166.13 100.042 166.13 99.7583C166.13 99.475 166.03 99.2011 165.848 98.9861C165.667 98.771 165.415 98.6291 165.14 98.586H163.555V100.931ZM171.686 102.299H170.517V105.066H168.979V97.1586H172.095C172.776 97.1575 173.43 97.4292 173.916 97.9147C174.401 98.4003 174.679 99.0605 174.688 99.7523C174.679 100.243 174.533 100.721 174.266 101.13C173.999 101.539 173.623 101.862 173.181 102.061L174.91 105.05H173.251L171.686 102.299ZM170.517 100.931H172.102C172.378 100.887 172.63 100.746 172.811 100.53C172.993 100.315 173.093 100.042 173.093 99.7583C173.093 99.475 172.993 99.2011 172.811 98.9861C172.63 98.771 172.378 98.6291 172.102 98.586H170.517V100.931ZM177.476 105.05H175.919V97.1428H177.476V105.05ZM184.202 98.6216H182.087V105.05H180.549V98.6216H178.45V97.127H184.194L184.202 98.6216ZM184.369 101.089C184.368 100.273 184.606 99.4758 185.052 98.7975C185.498 98.1193 186.132 97.5906 186.874 97.2785C187.616 96.9664 188.433 96.885 189.221 97.0445C190.008 97.204 190.732 97.5972 191.299 98.1744C191.866 98.7516 192.252 99.4868 192.408 100.287C192.563 101.087 192.482 101.916 192.173 102.669C191.864 103.422 191.342 104.064 190.673 104.516C190.004 104.967 189.219 105.207 188.415 105.205C187.881 105.209 187.352 105.105 186.858 104.899C186.364 104.693 185.915 104.389 185.538 104.006C185.161 103.622 184.863 103.165 184.662 102.663C184.46 102.161 184.36 101.623 184.365 101.081L184.369 101.089ZM190.935 101.081C190.928 100.576 190.774 100.085 190.493 99.6694C190.212 99.2535 189.816 98.9311 189.355 98.743C188.894 98.5548 188.389 98.5092 187.903 98.6119C187.416 98.7145 186.971 98.9609 186.622 99.3201C186.273 99.6792 186.036 100.135 185.942 100.63C185.847 101.126 185.899 101.638 186.091 102.103C186.283 102.569 186.606 102.966 187.019 103.246C187.433 103.525 187.918 103.674 188.415 103.675C188.751 103.681 189.084 103.618 189.395 103.49C189.706 103.361 189.988 103.17 190.224 102.927C190.46 102.685 190.644 102.396 190.767 102.078C190.889 101.761 190.946 101.421 190.935 101.081ZM195.219 105.035H193.68V97.127H195.219V105.035ZM199.502 102.267H198.334V105.035H196.776V97.127H199.892C200.232 97.1254 200.57 97.1922 200.885 97.3234C201.2 97.4547 201.486 97.6478 201.728 97.8917C201.969 98.1357 202.16 98.4256 202.291 98.7449C202.422 99.0642 202.489 99.4066 202.489 99.7523C202.481 100.243 202.335 100.72 202.069 101.129C201.802 101.538 201.427 101.861 200.986 102.061L202.727 105.05H201.052L199.502 102.267ZM198.334 100.899H199.919C200.195 100.856 200.446 100.714 200.628 100.499C200.809 100.284 200.909 100.01 200.909 99.7266C200.909 99.4434 200.809 99.1694 200.628 98.9544C200.446 98.7394 200.195 98.5975 199.919 98.5543H198.334V100.899ZM208.529 103.524V105.019H203.731V97.1112H208.502V98.6057H205.27V100.29H208.225V101.765H205.27V103.54L208.529 103.524ZM209.378 103.22L210.694 102.429C210.808 102.809 211.045 103.138 211.365 103.365C211.686 103.593 212.072 103.704 212.462 103.682C213.389 103.682 213.712 103.287 213.712 102.844C213.712 102.255 213.186 102.03 212.026 101.69C210.866 101.35 209.689 100.828 209.689 99.3174C209.689 97.8071 210.916 96.9451 212.256 96.9451C212.842 96.9295 213.419 97.0901 213.915 97.4067C214.411 97.7232 214.804 98.1817 215.044 98.7244L213.751 99.4835C213.633 99.1782 213.424 98.9179 213.153 98.7387C212.882 98.5594 212.563 98.4702 212.24 98.4832C211.594 98.4832 211.212 98.8232 211.212 99.2739C211.212 99.7247 211.516 100.021 212.696 100.381C213.934 100.776 215.25 101.199 215.25 102.817C215.25 104.299 214.082 105.209 212.419 105.209C210.823 105.209 209.775 104.418 209.351 103.232" fill="white"/>
-<path d="M202.59 85.7992V93.608H202.041V92.3151C201.817 92.7525 201.477 93.1175 201.059 93.369C200.641 93.6205 200.163 93.7485 199.677 93.7385C198.917 93.7385 198.188 93.4319 197.651 92.8862C197.113 92.3404 196.811 91.6003 196.811 90.8285C196.811 90.0567 197.113 89.3165 197.651 88.7708C198.188 88.2251 198.917 87.9185 199.677 87.9185C200.162 87.9077 200.64 88.0345 201.058 88.2846C201.475 88.5346 201.816 88.8981 202.041 89.3339V85.7992H202.59ZM202.041 90.8206C202.041 90.3514 201.904 89.8927 201.647 89.5026C201.391 89.1125 201.026 88.8084 200.599 88.6289C200.172 88.4493 199.702 88.4023 199.249 88.4939C198.795 88.5854 198.379 88.8113 198.052 89.1431C197.726 89.4749 197.503 89.8976 197.413 90.3578C197.323 90.8179 197.369 91.2949 197.546 91.7284C197.723 92.1619 198.022 92.5324 198.406 92.7931C198.791 93.0537 199.242 93.1929 199.705 93.1929C200.012 93.1966 200.318 93.1377 200.603 93.0198C200.888 92.9019 201.147 92.7273 201.365 92.5063C201.583 92.2853 201.755 92.0223 201.871 91.7328C201.987 91.4433 202.045 91.1331 202.041 90.8206ZM209.83 90.8403C209.83 90.9313 209.83 91.0222 209.83 91.1092H204.864C204.91 91.6972 205.18 92.244 205.616 92.6337C206.052 93.0234 206.621 93.2254 207.201 93.1968C207.579 93.2173 207.955 93.1337 208.289 92.9548C208.624 92.7759 208.904 92.5084 209.101 92.1807L209.584 92.4693C209.327 92.8751 208.971 93.2057 208.549 93.4283C208.128 93.6509 207.656 93.7579 207.181 93.7385C206.798 93.7563 206.416 93.6931 206.058 93.5531C205.7 93.4131 205.375 93.1992 205.102 92.9249C204.83 92.6507 204.617 92.3221 204.476 91.9599C204.335 91.5976 204.27 91.2097 204.284 90.8206C204.271 90.4364 204.335 90.0535 204.473 89.6956C204.611 89.3377 204.82 89.0123 205.087 88.7396C205.354 88.4668 205.673 88.2525 206.024 88.11C206.376 87.9674 206.752 87.8995 207.131 87.9106C208.798 87.9106 209.857 89.3142 209.857 90.8403H209.83ZM204.872 90.5636H209.288C209.276 89.9958 209.045 89.4556 208.644 89.0593C208.244 88.663 207.706 88.4421 207.146 88.4443C206.567 88.4249 206.003 88.6374 205.576 89.036C205.149 89.4346 204.894 89.9874 204.864 90.5754L204.872 90.5636ZM215.161 92.157C215.161 93.0742 214.382 93.7385 213.194 93.7385C212.096 93.7385 211.372 93.2126 211.111 92.5009L211.582 92.2202C211.781 92.8252 212.361 93.2047 213.194 93.2047C214.028 93.2047 214.612 92.8568 214.612 92.153C214.612 90.6387 211.286 91.5085 211.286 89.5C211.286 88.6183 212.03 87.9185 213.151 87.9185C213.537 87.8953 213.92 87.9889 214.253 88.1874C214.586 88.3859 214.853 88.6804 215.021 89.0334L214.557 89.2984C214.435 89.029 214.235 88.8038 213.984 88.6526C213.733 88.5015 213.443 88.4316 213.151 88.4522C212.439 88.4522 211.835 88.8476 211.835 89.5C211.835 90.9945 215.161 90.1128 215.161 92.153V92.157ZM155.435 91.4848C155.436 91.7639 155.383 92.0405 155.278 92.2986C155.173 92.5566 155.019 92.7911 154.825 92.9885C154.63 93.1858 154.399 93.3422 154.145 93.4485C153.891 93.5549 153.619 93.6091 153.344 93.608H150.034V85.8309H153.091C153.625 85.8319 154.138 86.048 154.516 86.4319C154.894 86.8157 155.107 87.3361 155.108 87.8789C155.113 88.2273 155.023 88.5703 154.85 88.8708C154.676 89.1712 154.425 89.4175 154.123 89.583C154.508 89.7276 154.84 89.9886 155.075 90.3307C155.309 90.6729 155.435 91.0798 155.435 91.4967V91.4848ZM150.614 86.3765V89.3577H153.091C153.48 89.3577 153.853 89.2006 154.129 88.9211C154.404 88.6415 154.559 88.2624 154.559 87.8671C154.559 87.4717 154.404 87.0926 154.129 86.8131C153.853 86.5335 153.48 86.3765 153.091 86.3765H150.614ZM154.855 91.4848C154.859 91.28 154.823 91.0763 154.749 90.8856C154.675 90.695 154.565 90.5211 154.424 90.374C154.284 90.2269 154.116 90.1096 153.93 90.0288C153.745 89.948 153.546 89.9053 153.344 89.9033H150.618V93.0426H153.344C153.545 93.04 153.745 92.997 153.93 92.9161C154.115 92.8351 154.283 92.7177 154.423 92.5708C154.563 92.4238 154.674 92.2501 154.748 92.0597C154.822 91.8692 154.858 91.6658 154.855 91.4611V91.4848ZM161.498 91.6034H157.651L156.903 93.5803H156.292L159.271 85.8309H159.89L162.861 93.6199H162.227L161.498 91.6034ZM161.288 91.0499L159.578 86.5425L157.869 91.0736L161.288 91.0499ZM169.816 85.8309V93.6199H169.302L164.773 86.9102V93.608H164.193V85.8309H164.699L169.236 92.5523V85.8309H169.816ZM180.997 91.0064V85.8309H181.577V91.0064C181.577 92.2756 182.356 93.1652 183.804 93.1652C185.253 93.1652 186.04 92.2756 186.04 91.0064V85.8309H186.62V91.0064C186.62 92.6512 185.491 93.7306 183.804 93.7306C182.118 93.7306 180.997 92.6512 180.997 91.0064ZM192.991 93.0545V93.608H188.629V85.8309H192.991V86.3883H189.21V89.3893H192.714V89.9468H189.21V93.0426L192.991 93.0545ZM179.412 89.7135C179.41 88.9188 179.177 88.1425 178.74 87.4827C178.304 86.8228 177.685 86.3092 176.961 86.0067C176.237 85.7043 175.442 85.6265 174.674 85.7834C173.907 85.9402 173.203 86.3246 172.651 86.8879C172.099 87.4512 171.723 88.1681 171.573 88.9479C171.422 89.7277 171.502 90.5354 171.804 91.2687C172.105 92.0021 172.614 92.6282 173.266 93.0678C173.918 93.5074 174.684 93.7408 175.467 93.7385C176.117 93.7381 176.757 93.5766 177.332 93.268L176.908 92.8449C176.458 93.0621 175.965 93.1742 175.467 93.1731C174.794 93.1778 174.134 92.9794 173.572 92.6029C173.01 92.2265 172.57 91.6891 172.309 91.0588C172.049 90.4285 171.978 89.7338 172.106 89.0627C172.235 88.3916 172.557 87.7743 173.031 87.2892C173.506 86.8041 174.112 86.473 174.772 86.3379C175.432 86.2028 176.116 86.2697 176.739 86.5303C177.362 86.7908 177.894 87.2332 178.269 87.8013C178.643 88.3694 178.843 89.0377 178.843 89.7214C178.841 90.1853 178.748 90.6441 178.57 91.0711C178.391 91.4981 178.131 91.8848 177.803 92.2084L176.039 90.4568L175.65 90.8245L179.217 94.4146L179.606 94.0469L178.205 92.6077C178.586 92.232 178.89 91.7822 179.098 91.2851C179.305 90.7879 179.412 90.2534 179.412 89.7135Z" fill="white"/>
-<path d="M125.543 103.576L123 102.136V88.8596L129.441 85.2181L132.046 86.6968L125.539 90.3739L125.543 103.576ZM141.198 99.1434L143.717 97.6924V88.8596L133.359 83L130.746 84.4787L141.198 90.3739V99.1434ZM133.359 105.046L126.812 101.342V104.295L133.359 107.996L143.717 102.136V99.183L133.359 105.046Z" fill="white"/>
+<svg width="360" height="124" viewBox="0 0 360 124" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_3832_18513)">
+<path d="M160.641 41.9602C160.696 41.9602 160.742 42.0046 160.742 42.0616V42.7481C160.742 45.9748 159.266 47.3586 156.952 47.3586C154.639 47.3586 153.103 45.9748 153.103 42.7481V41.5137C153.103 38.2124 154.655 36.8303 156.952 36.8303C159.002 36.8303 160.32 37.9474 160.678 40.0267C160.689 40.0889 160.641 40.1459 160.578 40.1459H159.107C159.06 40.1459 159.019 40.1121 159.009 40.0676C158.743 38.9292 158.09 38.3316 156.952 38.3316C155.579 38.3316 154.833 39.2245 154.833 41.439V42.7481C154.833 44.9644 155.579 45.8556 156.952 45.8556C158.326 45.8556 158.914 45.0907 159.039 43.4899C159.039 43.4756 159.028 43.4614 159.014 43.4614H157.099C157.043 43.4614 156.997 43.4169 156.997 43.36V42.0598C156.997 42.0046 157.041 41.9584 157.099 41.9584H160.641V41.9602Z" fill="white"/>
+<path d="M165.945 41.5741C167.404 41.5741 168.118 41.1881 168.118 40.0319C168.118 38.8758 167.404 38.4755 165.945 38.4755H164.319C164.304 38.4755 164.294 38.4862 164.294 38.5004V41.5492C164.294 41.5634 164.304 41.5741 164.319 41.5741H165.945ZM168.239 47.1522L166.295 43.0718C166.295 43.0718 166.282 43.0575 166.272 43.0575H164.319C164.304 43.0575 164.294 43.0682 164.294 43.0824V47.1077C164.294 47.1628 164.249 47.2091 164.192 47.2091H162.669C162.614 47.2091 162.567 47.1646 162.567 47.1077V37.0775C162.567 37.0223 162.612 36.9761 162.669 36.9761H166.065C168.43 36.9761 169.844 37.9988 169.844 40.0301C169.844 41.4282 169.184 42.33 168.011 42.764C167.996 42.7694 167.989 42.7854 167.996 42.7978L170.099 47.0615C170.133 47.129 170.083 47.2073 170.008 47.2073H168.33C168.291 47.2073 168.255 47.1842 168.239 47.1504" fill="white"/>
+<path d="M174.209 43.6054H176.877C176.895 43.6054 176.905 43.5894 176.9 43.5716L175.566 39.5392C175.559 39.5161 175.525 39.5161 175.518 39.5392L174.184 43.5716C174.178 43.5876 174.191 43.6054 174.207 43.6054M171.198 47.0739L174.699 37.0437C174.713 37.0028 174.751 36.9761 174.795 36.9761H176.288C176.331 36.9761 176.37 37.0028 176.385 37.0437L179.886 47.0739C179.909 47.1397 179.859 47.2073 179.79 47.2073H178.175C178.133 47.2073 178.093 47.1788 178.079 47.1379L177.408 45.1049C177.405 45.0942 177.396 45.0871 177.385 45.0871H173.716C173.706 45.0871 173.695 45.0942 173.693 45.1049L173.023 47.1379C173.008 47.1788 172.971 47.2073 172.926 47.2073H171.296C171.226 47.2073 171.178 47.1397 171.2 47.0739" fill="white"/>
+<path d="M188.352 37.0794V47.1097C188.352 47.1648 188.308 47.211 188.251 47.211H186.877C186.842 47.211 186.81 47.1933 186.79 47.1612L182.686 40.3345C182.673 40.3131 182.64 40.322 182.64 40.3469V47.1097C182.64 47.1648 182.595 47.211 182.538 47.211H181.074C181.018 47.211 180.972 47.1666 180.972 47.1097V37.0794C180.972 37.0243 181.017 36.978 181.074 36.978H182.402C182.438 36.978 182.47 36.9958 182.49 37.0278L186.638 43.9435C186.651 43.9649 186.685 43.956 186.685 43.9311V37.0794C186.685 37.0243 186.729 36.978 186.786 36.978H188.251C188.306 36.978 188.352 37.0225 188.352 37.0794Z" fill="white"/>
+<path d="M195.812 42.7018V41.4851C195.812 39.3791 195.157 38.4755 193.684 38.4755H191.968C191.954 38.4755 191.943 38.4862 191.943 38.5004V45.7007C191.943 45.715 191.954 45.7256 191.968 45.7256H193.684C195.157 45.7256 195.812 44.806 195.812 42.7M190.218 47.1077V37.0775C190.218 37.0223 190.263 36.9761 190.32 36.9761H193.686C195.992 36.9761 197.538 38.207 197.538 41.4834V42.7C197.538 45.9764 195.99 47.2073 193.686 47.2073H190.32C190.265 47.2073 190.218 47.1628 190.218 47.1059" fill="white"/>
+<path d="M230.146 38.8831C229.12 38.8831 228.569 39.6248 228.569 41.3003V42.9012C228.569 44.5768 229.118 45.3185 230.146 45.3185C231.173 45.3185 231.722 44.5768 231.722 42.9012V41.3003C231.722 39.6248 231.173 38.8831 230.146 38.8831Z" fill="white"/>
+<path d="M203.782 29.2441V54.9592H251.565V29.2441H203.782ZM218.028 47.1168C218.028 47.1719 217.983 47.2182 217.926 47.2182H211.646C211.591 47.2182 211.545 47.1737 211.545 47.1168V37.0865C211.545 37.0314 211.589 36.9852 211.646 36.9852H213.912C213.967 36.9852 214.013 37.0296 214.013 37.0865V45.146C214.013 45.1602 214.024 45.1709 214.038 45.1709H217.926C217.982 45.1709 218.028 45.2153 218.028 45.2722V47.1168ZM225.624 37.1328L222.507 43.1182C222.507 43.1182 222.503 43.1253 222.503 43.1307V47.1168C222.503 47.1719 222.459 47.2182 222.401 47.2182H220.135C220.079 47.2182 220.033 47.1737 220.033 47.1168V43.1307C220.033 43.1307 220.033 43.1218 220.029 43.1182L216.912 37.1328C216.876 37.0652 216.926 36.9852 217.001 36.9852H219.608C219.648 36.9852 219.683 37.0083 219.701 37.0439L221.242 40.4483C221.251 40.4679 221.28 40.4679 221.288 40.4483L222.83 37.0439C222.846 37.0083 222.881 36.9852 222.922 36.9852H225.53C225.607 36.9852 225.655 37.0652 225.619 37.1328H225.624ZM234.189 42.9012C234.189 45.9553 232.479 47.364 230.144 47.364C227.809 47.364 226.099 45.9553 226.099 42.9012V41.3003C226.099 38.216 227.809 36.8375 230.144 36.8375C232.479 36.8375 234.189 38.216 234.189 41.3003V42.9012ZM243.803 47.115C243.803 47.1701 243.758 47.2164 243.701 47.2164H241.864C241.83 47.2164 241.798 47.2004 241.78 47.1719L238.079 41.6223C238.065 41.601 238.033 41.6116 238.033 41.6365V47.1168C238.033 47.1719 237.988 47.2182 237.931 47.2182H235.814C235.759 47.2182 235.712 47.1737 235.712 47.1168V37.0865C235.712 37.0314 235.757 36.9852 235.814 36.9852H237.621C237.655 36.9852 237.687 37.0029 237.705 37.0296L241.434 42.654C241.449 42.6753 241.481 42.6646 241.481 42.6397V37.0848C241.481 37.0296 241.525 36.9834 241.582 36.9834H243.699C243.755 36.9834 243.801 37.0278 243.801 37.0848V47.115H243.803Z" fill="white"/>
+<path d="M148.899 14.8292H147.824C147.81 14.8292 147.799 14.8398 147.799 14.8541V17.0721C147.799 17.0864 147.81 17.097 147.824 17.097H148.899C149.896 17.097 150.61 16.9636 150.61 15.9996C150.61 15.0355 149.896 14.8274 148.899 14.8274V14.8292Z" fill="white"/>
+<path d="M177.399 14.6816C176.374 14.6816 175.823 15.4234 175.823 17.0989V18.6998C175.823 20.3753 176.372 21.1171 177.399 21.1171C178.427 21.1171 178.976 20.3753 178.976 18.6998V17.0989C178.976 15.4234 178.427 14.6816 177.399 14.6816Z" fill="white"/>
+<path d="M158.604 14.6816C157.578 14.6816 157.027 15.4234 157.027 17.0989V18.6998C157.027 20.3753 157.576 21.1171 158.604 21.1171C159.631 21.1171 160.181 20.3753 160.181 18.6998V17.0989C160.181 15.4234 159.631 14.6816 158.604 14.6816Z" fill="white"/>
+<path d="M167.592 14.8293H166.666C166.652 14.8293 166.641 14.84 166.641 14.8542V17.4885C166.641 17.5028 166.652 17.5134 166.666 17.5134H167.592C168.885 17.5134 169.45 17.1275 169.45 16.1047C169.45 15.274 168.885 14.8293 167.592 14.8293Z" fill="white"/>
+<path d="M108.435 5.04272V30.756H205.3V5.04272H108.435ZM126.337 22.9154C126.337 22.9705 126.292 23.0168 126.235 23.0168H124.118C124.063 23.0168 124.016 22.9723 124.016 22.9154V17.3373C124.016 17.3106 123.981 17.3017 123.968 17.3266L121.933 21.2718C121.915 21.3056 121.881 21.327 121.844 21.327H120.644C120.606 21.327 120.57 21.3056 120.553 21.2718L118.562 17.3729C118.55 17.3497 118.514 17.3586 118.514 17.3835V22.9171C118.514 22.9723 118.469 23.0185 118.412 23.0185H116.295C116.24 23.0185 116.193 22.9741 116.193 22.9171V12.8869C116.193 12.8318 116.238 12.7855 116.295 12.7855H118.423C118.46 12.7855 118.494 12.8069 118.512 12.8389L121.241 17.9332C121.25 17.9509 121.277 17.9509 121.286 17.9332L124 12.8389C124.018 12.8051 124.052 12.7855 124.089 12.7855H126.232C126.287 12.7855 126.333 12.83 126.333 12.8869V22.9171L126.337 22.9154ZM134.383 14.7297C134.383 14.7848 134.336 14.8311 134.281 14.8311H130.394C130.38 14.8311 130.37 14.8417 130.37 14.856V16.6738C130.37 16.688 130.38 16.6987 130.394 16.6987H133.837C133.892 16.6987 133.937 16.7432 133.937 16.7983V18.6446C133.937 18.6998 133.89 18.746 133.835 18.746H130.394C130.38 18.746 130.37 18.7567 130.37 18.7709V20.9445C130.37 20.9588 130.38 20.9694 130.394 20.9694H134.283C134.338 20.9694 134.383 21.0139 134.383 21.069V22.9154C134.383 22.9705 134.336 23.0168 134.281 23.0168H128.001C127.946 23.0168 127.901 22.9723 127.901 22.9171V12.8851C127.901 12.83 127.947 12.7837 128.003 12.7837H129.333C129.342 12.7837 129.351 12.7784 129.355 12.7713L130.318 11.1544C130.337 11.126 130.37 11.1082 130.405 11.1082H132.906C132.991 11.1082 133.038 11.206 132.986 11.2718L131.911 12.7428C131.898 12.7588 131.911 12.7837 131.93 12.7837H134.281C134.336 12.7837 134.381 12.8282 134.381 12.8834V14.7297H134.383ZM143.763 14.7297C143.763 14.7848 143.718 14.8311 143.661 14.8311H141.11C141.096 14.8311 141.085 14.8417 141.085 14.856V22.9154C141.085 22.9705 141.041 23.0168 140.984 23.0168H138.719C138.663 23.0168 138.617 22.9723 138.617 22.9154V14.856C138.617 14.8417 138.606 14.8311 138.592 14.8311H136.041C135.986 14.8311 135.94 14.7866 135.94 14.7297V12.8851C135.94 12.83 135.984 12.7837 136.041 12.7837H143.661C143.716 12.7837 143.763 12.8282 143.763 12.8851V14.7297ZM153.335 23.015H150.854C150.815 23.015 150.777 22.9919 150.761 22.9545L149.085 19.1587C149.081 19.1498 149.072 19.1445 149.062 19.1445H147.824C147.81 19.1445 147.799 19.1551 147.799 19.1694V22.9136C147.799 22.9687 147.754 23.015 147.697 23.015H145.432C145.377 23.015 145.33 22.9705 145.33 22.9136V12.8834C145.33 12.8282 145.375 12.782 145.432 12.782H149.197C151.562 12.782 153.078 13.8652 153.078 15.9997C153.078 17.3248 152.491 18.2249 151.466 18.7033C151.453 18.7087 151.448 18.7247 151.453 18.7371L153.426 22.8709C153.458 22.9385 153.408 23.015 153.335 23.015ZM162.649 18.6998C162.649 21.7539 160.939 23.1626 158.604 23.1626C156.269 23.1626 154.559 21.7539 154.559 18.6998V17.0989C154.559 14.0146 156.269 12.6361 158.604 12.6361C160.939 12.6361 162.649 14.0146 162.649 17.0989V18.6998ZM168.039 19.5589H166.668C166.653 19.5589 166.643 19.5696 166.643 19.5838V22.9136C166.643 22.9687 166.598 23.015 166.541 23.015H164.276C164.22 23.015 164.174 22.9705 164.174 22.9136V12.8834C164.174 12.8282 164.219 12.782 164.276 12.782H168.041C170.406 12.782 171.922 13.8207 171.922 16.1028C171.922 18.385 170.42 19.5571 168.041 19.5571L168.039 19.5589ZM181.445 18.6998C181.445 21.7539 179.734 23.1626 177.399 23.1626C175.065 23.1626 173.354 21.7539 173.354 18.6998V17.0989C173.354 14.0146 175.065 12.6361 177.399 12.6361C179.734 12.6361 181.445 14.0146 181.445 17.0989V18.6998ZM189.482 22.9136C189.482 22.9687 189.437 23.015 189.38 23.015H183.1C183.045 23.015 182.998 22.9705 182.998 22.9136V12.8834C182.998 12.8282 183.043 12.782 183.1 12.782H185.365C185.42 12.782 185.467 12.8264 185.467 12.8834V20.9428C185.467 20.957 185.477 20.9677 185.492 20.9677H189.38C189.435 20.9677 189.482 21.0121 189.482 21.069V22.9136ZM197.538 14.7279C197.538 14.783 197.493 14.8293 197.436 14.8293H193.548C193.534 14.8293 193.523 14.84 193.523 14.8542V16.672C193.523 16.6863 193.534 16.6969 193.548 16.6969H196.99C197.046 16.6969 197.092 16.7414 197.092 16.7983V18.6429C197.092 18.698 197.048 18.7443 196.99 18.7443H193.548C193.534 18.7443 193.523 18.7549 193.523 18.7692V20.9428C193.523 20.957 193.534 20.9677 193.548 20.9677H197.436C197.492 20.9677 197.538 21.0121 197.538 21.069V22.9136C197.538 22.9687 197.493 23.015 197.436 23.015H191.156C191.101 23.015 191.055 22.9705 191.055 22.9136V12.8834C191.055 12.8282 191.099 12.782 191.156 12.782H197.436C197.492 12.782 197.538 12.8264 197.538 12.8834V14.7279Z" fill="white"/>
+<g clip-path="url(#clip1_3832_18513)">
+<path d="M27.6942 102.646C26.6623 102.646 25.9166 101.882 25.9166 100.888C25.9166 99.8942 26.6246 99.1302 27.6189 99.1302C28.2215 99.1302 28.696 99.4195 28.9973 99.8423L29.8409 99.1969C29.3589 98.5664 28.5755 98.1436 27.6189 98.1436C25.9543 98.1436 24.8169 99.4046 24.8169 100.888C24.8169 102.372 25.9844 103.633 27.6942 103.633C28.681 103.633 29.502 103.218 29.9916 102.572V100.391H27.5813V101.289H28.922V102.194C28.6207 102.476 28.1914 102.646 27.6942 102.646Z" fill="white"/>
+<path d="M33.8537 98.1436C32.189 98.1436 31.0516 99.4046 31.0516 100.888C31.0516 102.372 32.189 103.633 33.8537 103.633C35.5108 103.633 36.6481 102.372 36.6481 100.888C36.6481 99.4046 35.5108 98.1436 33.8537 98.1436ZM33.8537 102.646C32.8594 102.646 32.1514 101.882 32.1514 100.888C32.1514 99.8942 32.8594 99.1302 33.8537 99.1302C34.8404 99.1302 35.5484 99.8942 35.5484 100.888C35.5484 101.882 34.8404 102.646 33.8537 102.646Z" fill="white"/>
+<path d="M41.0464 101.541C41.0464 102.238 40.6396 102.646 39.9843 102.646C39.3139 102.646 38.9147 102.238 38.9147 101.541V98.2919H37.8451V101.452C37.8451 102.817 38.6586 103.633 39.9768 103.633C41.3025 103.633 42.116 102.817 42.116 101.452V98.2919H41.0464V101.541Z" fill="white"/>
+<path d="M43.0454 98.2919L45.0415 103.485H46.4425L48.4386 98.2919H47.3012L45.742 102.35L44.1828 98.2919H43.0454Z" fill="white"/>
+<path d="M49.5164 103.485H52.5896V102.609H50.586V101.274H52.2883V100.399H50.586V99.1673H52.5896V98.2919H49.5164V103.485Z" fill="white"/>
+<path d="M54.0961 103.485H55.1657V101.385H55.7155L57.1241 103.485H58.382L56.7324 101.185C57.2747 100.94 57.5835 100.473 57.5835 99.8423C57.5835 98.878 56.868 98.2919 55.708 98.2919H54.0961V103.485ZM55.7683 99.1673C56.2202 99.1673 56.4838 99.4343 56.4838 99.8275C56.4838 100.25 56.2202 100.51 55.7683 100.51H55.1657V99.1673H55.7683Z" fill="white"/>
+<path d="M59.3231 103.485H60.3927V99.731L62.7503 103.485H64.1212V98.2919H63.0516V102.046L60.694 98.2919H59.3231V103.485Z" fill="white"/>
+<path d="M65.8594 103.485H68.9326V102.609H66.929V101.274H68.6313V100.399H66.929V99.1673H68.9326V98.2919H65.8594V103.485Z" fill="white"/>
+<path d="M70.4391 103.485H71.5087V99.7607L72.6838 101.704H73.437L74.612 99.7607V103.485H75.6816V98.2919H74.3484L73.0604 100.473L71.7724 98.2919H70.4391V103.485Z" fill="white"/>
+<path d="M77.4168 103.485H80.49V102.609H78.4864V101.274H80.1887V100.399H78.4864V99.1673H80.49V98.2919H77.4168V103.485Z" fill="white"/>
+<path d="M81.9965 103.485H83.0661V99.731L85.4237 103.485H86.7946V98.2919H85.725V102.046L83.3674 98.2919H81.9965V103.485Z" fill="white"/>
+<path d="M87.9905 99.2489H89.6175V103.485H90.6871V99.2489H92.3141V98.2919H87.9905V99.2489Z" fill="white"/>
+<path d="M33.477 94.0055C33.5653 93.9186 33.6536 93.8316 33.7419 93.7157C33.9184 93.5417 34.0656 93.3388 34.2716 93.1939C34.3305 93.1359 34.3893 93.107 34.4482 93.049C34.4776 93.02 34.4776 92.991 34.4776 92.991C34.3893 93.02 34.3599 93.078 34.2716 93.107C34.2422 93.107 34.2422 93.078 34.2422 93.078C34.3011 93.049 34.3599 92.991 34.4188 92.962C34.3894 92.962 34.3894 92.933 34.3894 92.933C34.1833 92.933 34.0362 93.049 33.889 93.1939C33.8596 93.2229 33.8302 93.1649 33.8007 93.1649C33.5653 93.2519 33.3887 93.4548 33.1532 93.5417V93.5128C33.0649 93.5417 32.9766 93.5997 32.8589 93.6287C32.7118 93.6577 32.594 93.6577 32.4763 93.6577C32.2997 93.6867 32.0937 93.7157 31.9171 93.7446C31.9171 93.7446 31.9171 93.7446 31.8877 93.7446C31.7994 93.7736 31.6816 93.8026 31.5933 93.8606L31.5639 93.8896C31.5345 93.9186 31.5051 93.9475 31.4462 93.9765C31.3579 94.0345 31.2696 94.1215 31.1813 94.1794H31.1519C31.0636 94.2664 30.9753 94.3533 30.887 94.4113C30.887 94.4113 30.8576 94.4113 30.8281 94.4113C30.8281 94.4113 30.8281 94.4113 30.8281 94.3823C30.8281 94.3533 30.8576 94.3244 30.8576 94.3244C30.887 94.2954 30.887 94.2664 30.9164 94.2664C30.9459 94.2374 30.9459 94.2084 30.9753 94.1794V94.1504C30.9753 94.1504 30.9753 94.1504 30.9459 94.1504C31.0341 94.0635 31.1224 94.0055 31.2107 93.9475C31.2107 93.9475 31.1813 93.9475 31.1813 93.9186L31.2107 93.8896C31.2402 93.8896 31.2107 93.9186 31.2107 93.9186C31.1813 93.9475 31.1519 94.0345 31.093 94.0055H31.0636C31.0636 94.0055 31.0636 94.0055 31.0341 94.0055C31.0341 94.0055 31.0341 94.0055 31.0341 93.9765C31.0341 93.9765 31.0342 93.9475 31.0636 93.9475C31.0636 93.9475 31.0636 93.9475 31.0636 93.9186C31.0636 93.9186 31.0636 93.8896 31.093 93.8896V93.8606C31.1224 93.8316 31.1519 93.8026 31.2107 93.7736C31.2696 93.7446 31.3285 93.7157 31.3873 93.6867L31.4168 93.6577C31.3285 93.6867 31.2402 93.7157 31.1519 93.7736H31.1224H31.093C31.1224 93.7446 31.1519 93.7157 31.1813 93.6867C31.2107 93.6867 31.2107 93.6867 31.2107 93.7157C31.7111 93.3388 32.4174 93.4258 33.0061 93.2229C33.0649 93.1939 33.0944 93.1649 33.1532 93.1359C33.2415 93.107 33.3004 93.02 33.3887 92.991C33.5064 92.9041 33.5947 92.7881 33.6536 92.6432C33.6536 92.6142 33.6241 92.6142 33.6241 92.6142C33.4181 92.8461 33.1827 92.991 32.9178 93.1359C32.594 93.3099 32.2114 93.2809 31.8877 93.3099C31.9171 93.2809 31.9465 93.2809 31.976 93.2809C31.976 93.2229 32.0054 93.2229 32.0348 93.1939H32.0937C32.1231 93.1939 32.1231 93.1649 32.1231 93.1649C32.1525 93.1649 32.2114 93.1359 32.182 93.1359C32.1231 93.078 32.0348 93.1939 31.9465 93.1359C31.976 93.107 31.976 93.049 32.0054 93.049H32.0643C32.0643 93.02 32.0937 92.991 32.0937 92.991C32.3291 92.8461 32.5646 92.7301 32.7706 92.6142C32.7118 92.6142 32.6823 92.6722 32.6529 92.6432C32.6823 92.6432 32.6529 92.5852 32.6823 92.5852C32.8589 92.5272 33.0061 92.4403 33.1827 92.3823C33.1238 92.3823 33.0649 92.4403 33.0061 92.3823C33.0355 92.3533 33.0649 92.3243 33.0944 92.3243V92.2664C33.0944 92.2374 33.1238 92.2374 33.1238 92.2374C33.0944 92.2374 33.0944 92.2084 33.0944 92.2084C33.1238 92.1794 33.1532 92.1794 33.1827 92.1504C33.1532 92.1504 33.1238 92.1504 33.1238 92.1214C33.1827 92.0635 33.2415 92.0345 33.3298 92.0345C33.3004 92.0055 33.271 92.0345 33.271 92.0055C33.271 91.9765 33.3004 91.9765 33.3004 91.9765C33.271 91.9475 33.271 91.9185 33.271 91.9185C33.3592 91.8026 33.3592 91.6577 33.4181 91.5417C33.3887 91.5417 33.3887 91.5417 33.3887 91.5127C33.2415 91.6867 32.9766 91.7446 32.7412 91.8026H32.6529C32.5646 91.8316 32.4763 91.8316 32.388 91.7736C32.3291 91.7446 32.2997 91.6867 32.2408 91.6577C32.1231 91.5707 31.976 91.5127 31.8582 91.4838C31.4462 91.3678 31.0341 91.3098 30.6515 91.3098C30.8281 91.2229 31.0047 91.2229 31.2107 91.1649C31.4756 91.078 31.7405 90.991 32.0054 91.02C31.9465 90.991 31.8877 91.02 31.8582 91.02C31.6228 90.991 31.4168 91.078 31.1813 91.1069C31.0341 91.1359 30.887 91.1939 30.7104 91.2229C30.6221 91.2519 30.5632 91.3388 30.4455 91.3388V91.2809C30.5927 91.1069 30.7987 90.904 31.0341 90.904C31.3285 90.8461 31.5933 90.904 31.8582 90.933C32.0643 90.962 32.2408 90.991 32.4469 91.049C32.5352 91.049 32.5352 91.1649 32.594 91.1939C32.6823 91.2229 32.7706 91.1939 32.8883 91.2519C32.8883 91.2229 32.8589 91.1939 32.8883 91.1649C32.9472 91.1069 33.0355 91.1939 33.0944 91.1359C33.2121 91.049 32.9766 90.933 32.9178 90.8171C32.9178 90.7881 32.9472 90.7881 32.9472 90.7881C33.0649 90.904 33.1532 91.02 33.3298 91.1069C33.4181 91.1359 33.5947 91.1939 33.5653 91.078C33.477 90.904 33.3298 90.7591 33.2121 90.6142V90.5562C33.1827 90.5562 33.1827 90.5272 33.1532 90.5272V90.4403C33.0944 90.4113 33.0944 90.3533 33.0649 90.2953C33.0061 90.2084 33.0355 90.1214 33.0061 90.0055C33.0061 89.9475 33.0061 89.8606 32.9766 89.7736C32.9178 89.5127 32.8589 89.2809 32.8295 89.02C32.8 88.7301 33.0061 88.4982 33.1532 88.2374C33.271 88.0635 33.3887 87.8606 33.5947 87.7446C33.6536 87.5707 33.7713 87.3968 33.889 87.2519C34.0067 87.1069 34.2128 87.02 34.3894 86.933C34.5954 86.8461 34.8014 86.7881 34.8014 86.7881H24V94.991H31.6522C31.9465 94.7881 32.2408 94.6722 32.6823 94.4693C32.8589 94.3823 33.3298 94.1794 33.477 94.0055ZM31.0341 92.9041C31.0047 92.9041 30.9459 92.933 30.9459 92.8751C30.9753 92.7881 31.0636 92.7881 31.1224 92.7591C31.1519 92.7301 31.2107 92.7012 31.2402 92.7301C31.2696 92.7881 31.3285 92.7591 31.3579 92.7881C31.2696 92.9041 31.1519 92.8751 31.0341 92.9041ZM28.6208 92.5562L28.5913 92.5272C28.7973 92.2664 28.9445 92.0055 29.0917 91.7446C29.2977 91.6287 29.4743 91.4838 29.6214 91.3098C29.8863 91.02 30.1806 90.7881 30.5044 90.6142C30.6221 90.5562 30.7987 90.5852 30.9164 90.6432C30.8576 90.7011 30.7987 90.7011 30.7398 90.7301C30.7104 90.7301 30.7104 90.7301 30.681 90.7011C30.7104 90.6722 30.7104 90.6722 30.7104 90.6432C30.5632 90.8171 30.3278 90.904 30.2101 91.1069C30.1218 91.2519 30.0629 91.4548 29.8569 91.5127C29.798 91.5417 29.8863 91.4548 29.8275 91.4838C29.3565 91.8026 29.0034 92.1504 28.6208 92.5562ZM29.9452 91.5417C29.9157 91.5707 29.9157 91.5707 29.8863 91.5997C29.8569 91.6287 29.8569 91.6577 29.8275 91.6577C29.798 91.6577 29.798 91.6577 29.798 91.6287C29.8275 91.5707 29.8569 91.5127 29.9157 91.4838C29.9452 91.5127 29.9452 91.5127 29.9452 91.5417ZM30.681 93.8606C30.681 93.8896 30.6515 93.8896 30.6515 93.9186C30.681 93.9186 30.681 93.9186 30.681 93.9475C30.6515 93.9765 30.6221 94.0055 30.5632 94.0345C30.5632 94.0345 30.5632 94.0345 30.5338 94.0345C30.5044 94.0635 30.5044 94.0635 30.4749 94.0925C30.4455 94.1215 30.3572 94.0925 30.3867 94.0635C30.4161 94.0345 30.4749 93.9765 30.5044 93.9475C30.5338 93.9186 30.5632 93.9186 30.5632 93.8896L30.5927 93.8606C30.5927 93.8316 30.681 93.8316 30.681 93.8606ZM30.3867 93.7446C30.3278 93.8026 30.2689 93.8316 30.2101 93.8606C30.1512 93.8896 30.0629 93.9186 30.004 93.9475H29.9746C29.9157 93.9765 29.8569 94.0345 29.8275 94.0635C29.8275 94.0635 29.8275 94.0635 29.798 94.0925L29.7686 94.1215L29.7392 94.1504C29.7392 94.1504 29.7392 94.1794 29.7097 94.1794H29.6803H29.6509H29.6214C29.592 94.2084 29.592 94.2084 29.5626 94.2374C29.5331 94.2664 29.5037 94.2954 29.4743 94.3244C29.4743 94.3244 29.4743 94.3244 29.4743 94.3533V94.3244C29.5037 94.2954 29.5037 94.2954 29.5331 94.2664C29.5331 94.2664 29.5331 94.2664 29.5626 94.2374L29.592 94.2084C29.6214 94.1794 29.6214 94.1504 29.6509 94.1504L29.6803 94.1215C29.6803 94.1215 29.6803 94.0925 29.7097 94.0925C29.7097 94.0925 29.7097 94.0635 29.7392 94.0635C29.7392 94.0635 29.7392 94.0635 29.7392 94.0345V94.0055C29.7686 93.9765 29.7686 93.9475 29.798 93.9186C29.7686 93.9186 29.7686 93.9475 29.7392 93.9765C29.7097 93.9765 29.6803 93.9765 29.7097 93.9475L29.7392 93.9186C29.7686 93.8896 29.798 93.8606 29.8275 93.8316C29.8569 93.8316 29.8569 93.8026 29.8863 93.8026L29.9157 93.7736C30.0629 93.6287 30.3278 93.6287 30.5338 93.5417C30.6221 93.5128 30.7104 93.5707 30.7987 93.5417C30.8576 93.5417 30.887 93.5417 30.9459 93.5707C30.6515 93.5707 30.5338 93.6577 30.3867 93.7446ZM30.7104 92.6722C30.681 92.6432 30.7693 92.6722 30.7693 92.6432H30.6515C30.6221 92.6432 30.6221 92.6142 30.6221 92.6142C30.5338 92.6432 30.4455 92.6722 30.3572 92.6722C30.2395 92.7012 30.1512 92.7881 30.0335 92.8171C29.8569 92.8751 29.7097 93.02 29.5331 93.078C29.5037 93.078 29.5037 93.049 29.5037 93.049C29.5331 92.991 29.592 92.991 29.6214 92.933C29.6214 92.9041 29.6214 92.9041 29.592 92.9041C29.7097 92.7301 29.8863 92.6432 30.0629 92.4983V92.4403C30.1218 92.3823 30.1806 92.3533 30.2101 92.2664C30.2395 92.2084 30.2984 92.1504 30.3572 92.1214C30.3278 92.0925 30.2984 92.0925 30.2984 92.0635C30.2395 92.0635 30.1806 92.0925 30.1218 92.0345C30.1512 92.0055 30.1806 91.9765 30.2101 91.9765C30.2101 91.9765 30.1806 91.9765 30.1806 91.9475C30.1512 91.9185 30.2101 91.8896 30.2689 91.8606C30.3278 91.8316 30.4161 91.8316 30.4455 91.8026C30.3278 91.7736 30.2101 91.8316 30.0923 91.7736C30.1806 91.5707 30.2984 91.3968 30.4749 91.3098C30.5044 91.3098 30.5338 91.3098 30.5338 91.3388C30.5338 91.4258 30.4749 91.4838 30.4161 91.4838C30.5338 91.5127 30.681 91.5127 30.7987 91.5707C30.7693 91.5997 30.7398 91.5997 30.7398 91.5997C30.8281 91.6577 30.9164 91.6287 31.0047 91.6867C30.9459 91.7446 30.9164 91.6867 30.8576 91.6867C31.3579 91.8316 31.8582 91.9475 32.2703 92.2374C31.9171 92.4113 31.5639 92.4983 31.1813 92.5562C31.1224 92.5562 31.093 92.5562 31.0636 92.5272C31.0636 92.5562 31.0636 92.5852 31.0341 92.5852C30.9753 92.5852 30.9164 92.5852 30.887 92.6142C30.8576 92.7012 30.7693 92.7012 30.7104 92.6722Z" fill="white"/>
+<path d="M46.927 86.759H37.9504C37.9504 86.759 37.9798 86.759 38.0387 86.788C38.0975 86.817 38.2153 86.875 38.2741 86.904C38.3919 86.9619 38.5096 87.0489 38.5685 87.1648C38.5979 87.2228 38.6567 87.3098 38.6273 87.3677C38.5979 87.4547 38.5685 87.5706 38.5096 87.5996C38.4213 87.6576 38.3036 87.6576 38.1858 87.6286C38.127 87.6286 38.0681 87.5996 38.0093 87.5996C38.2447 87.6866 38.4802 87.8025 38.6273 88.0054C38.6567 88.0344 38.7156 88.0634 38.7745 88.0634C38.8039 88.0634 38.8039 88.0924 38.8039 88.1214C38.7745 88.1503 38.745 88.1793 38.745 88.2083H38.8039C38.8922 88.1793 38.8628 88.0344 38.9805 88.0634C39.0688 88.1214 39.0982 88.2083 39.0394 88.2953C38.9805 88.3532 38.9216 88.4112 38.8628 88.4402C38.8333 88.4692 38.8333 88.5272 38.8628 88.5561C38.9216 88.6141 38.9216 88.6721 38.9511 88.7301C39.0099 88.846 39.0099 88.9619 39.0688 89.0779C39.1277 89.3098 39.1865 89.5417 39.1865 89.7735C39.1865 89.8895 39.1277 90.0054 39.1571 90.1214C39.1865 90.2373 39.2748 90.3533 39.3337 90.4402C39.3925 90.5272 39.4514 90.5851 39.5103 90.7011C39.5986 90.846 39.7751 91.0199 39.6869 91.1938C39.628 91.3098 39.4514 91.2808 39.3631 91.3388C39.2748 91.4257 39.3337 91.5417 39.3925 91.6286C39.4808 91.7736 39.3042 91.8605 39.1865 91.9185C39.2159 91.9765 39.2748 91.9475 39.3042 91.9765C39.3337 92.0634 39.3925 92.0924 39.3631 92.1794C39.3042 92.2663 39.0982 92.3243 39.2159 92.4692C39.2748 92.5851 39.2454 92.7011 39.1865 92.817C39.1277 92.962 39.0099 93.0199 38.8922 93.0489C38.8039 93.0779 38.6862 93.0779 38.5979 93.0779C38.4802 93.0489 38.4507 93.0489 38.4213 93.0489C38.1564 93.0199 37.8915 92.933 37.6266 92.933C37.5383 92.962 37.4795 92.962 37.4206 92.9909C37.3618 93.0489 37.2735 93.1069 37.244 93.1649L37.2146 93.1938C37.2146 93.1938 37.2146 93.2228 37.1852 93.2228C37.1852 93.2228 37.1852 93.2228 37.1852 93.2518C37.1263 93.3098 37.0969 93.3678 37.0674 93.4257V93.4547C37.0086 93.5417 36.9791 93.6576 36.9497 93.7446C36.832 94.0924 36.8909 94.4112 36.9791 94.4692C37.0086 94.4982 37.5089 94.6431 37.8327 94.7881C38.0093 94.846 38.0975 94.904 38.2153 94.962H47.0153V86.759H46.927Z" fill="white"/>
+<path d="M43.9401 119.086C44.104 119.086 44.2405 119.19 44.1586 119.474L43.4214 119.629C43.5579 119.345 43.7763 119.086 43.9401 119.086ZM44.3497 120.224H44.2132C44.022 120.431 43.8309 120.586 43.6398 120.586C43.4487 120.586 43.3395 120.483 43.3395 120.224C43.3395 120.121 43.3395 120.017 43.3668 119.914L44.5408 119.552C44.7592 119.035 44.4862 118.802 44.1586 118.802C43.6125 118.802 42.9572 119.681 42.9572 120.457C42.9572 120.793 43.121 121 43.3941 121C43.749 121 44.0767 120.69 44.3497 120.224ZM44.104 118.595L44.9231 117.871V117.794H44.4862L43.9674 118.621H44.104V118.595ZM41.5647 119.112H41.947L41.319 120.715C41.2644 120.845 41.3463 121 41.4828 121C41.8378 121 42.4111 120.664 42.6023 120.224H42.4931C42.3292 120.379 42.0289 120.586 41.7832 120.638L42.3565 119.138H42.9299L43.0118 118.905H42.4384L42.6569 118.337H42.4384L42.0289 118.905L41.5374 118.957V119.112H41.5647ZM41.046 119.035C41.1006 118.88 40.9914 118.802 40.9095 118.802C40.5818 118.802 40.1723 119.086 40.0084 119.5H40.1177C40.2269 119.345 40.418 119.19 40.5818 119.164L39.9265 120.767C39.8719 120.922 39.9811 121 40.063 121C40.3907 121 40.7729 120.715 40.9368 120.302H40.8275C40.7183 120.457 40.5272 120.612 40.3634 120.638L41.046 119.035ZM41.1552 118.233C41.319 118.233 41.4282 118.104 41.4282 117.975C41.4282 117.819 41.2917 117.716 41.1552 117.716C40.9914 117.716 40.8822 117.845 40.8822 117.975C40.8822 118.104 40.9914 118.233 41.1552 118.233ZM37.4146 120.69C37.3327 120.871 37.4146 121 37.6057 121C37.715 121 37.7696 120.974 37.8242 120.845L38.2883 119.707C38.5068 119.474 38.9163 119.216 39.1074 119.216C39.2439 119.216 39.2166 119.319 39.1347 119.448L38.4521 120.715C38.3975 120.845 38.4794 121 38.616 121C38.9436 121 39.3532 120.715 39.517 120.302H39.4078C39.2986 120.457 39.1074 120.612 38.9436 120.638L39.5443 119.5C39.6262 119.345 39.6535 119.216 39.6535 119.112C39.6535 118.931 39.5443 118.802 39.3259 118.802C39.0255 118.802 38.7252 119.112 38.3702 119.5V119.19C38.3702 118.983 38.2883 118.776 38.0972 118.776C37.9607 118.776 37.8515 118.88 37.7423 119.035V119.086C37.9607 119.086 38.0699 119.397 37.9061 119.707L37.4146 120.69ZM37.4146 119.293C37.4965 119.035 37.4419 118.802 37.2508 118.802C37.0051 118.802 36.9232 118.983 36.6774 119.5V119.19C36.6774 118.983 36.5955 118.776 36.4044 118.776C36.1587 118.776 35.9402 119.138 35.7764 119.474H35.8856C35.9948 119.319 36.104 119.216 36.186 119.216C36.2952 119.216 36.3498 119.371 36.186 119.707L35.7218 120.664C35.6399 120.845 35.7218 120.974 35.9129 120.974C36.0221 120.974 36.0767 120.948 36.1313 120.819L36.5955 119.681C36.732 119.526 36.8412 119.397 36.9778 119.267H37.4146V119.293ZM34.7935 119.086C34.9573 119.086 35.0938 119.19 35.0119 119.474L34.2747 119.629C34.4112 119.345 34.6297 119.086 34.7935 119.086ZM35.203 120.224H35.0665C34.8754 120.431 34.6843 120.586 34.4931 120.586C34.302 120.586 34.1928 120.483 34.1928 120.224C34.1928 120.121 34.1928 120.017 34.2201 119.914L35.3942 119.552C35.6126 119.035 35.3395 118.802 35.0119 118.802C34.4658 118.802 33.8106 119.681 33.8106 120.457C33.8106 120.793 33.9744 121 34.2474 121C34.6024 121 34.93 120.69 35.203 120.224ZM32.4181 119.112H32.8003L32.1723 120.715C32.1177 120.845 32.1997 121 32.3362 121C32.6911 121 33.2645 120.664 33.4556 120.224H33.3464C33.1826 120.379 32.8822 120.586 32.6365 120.638L33.2099 119.138H33.7833L33.8652 118.905H33.2918L33.5102 118.337H33.2918L32.8822 118.905L32.3908 118.957V119.112H32.4181ZM30.2611 120.353C30.2611 119.862 30.8345 119.19 31.1621 119.19C31.244 119.19 31.2986 119.19 31.3532 119.216L31.0256 120.069C30.8345 120.302 30.5341 120.56 30.3976 120.56C30.3157 120.586 30.2611 120.509 30.2611 120.353ZM32.0631 118.699H31.872L31.6809 118.88H31.6263C30.6434 118.88 29.8242 119.914 29.8242 120.664C29.8242 120.871 29.9608 121 30.1792 121C30.4249 121 30.6707 120.664 30.9437 120.302V120.431C30.9164 120.793 31.0256 121 31.244 121C31.4898 121 31.7082 120.638 31.872 120.302H31.7628C31.6536 120.457 31.5444 120.56 31.4625 120.56C31.3805 120.56 31.2986 120.405 31.4625 120.069L32.0631 118.699ZM29.9881 119.293C30.07 119.035 30.0154 118.802 29.8242 118.802C29.5785 118.802 29.4966 118.983 29.2509 119.5V119.19C29.2509 118.983 29.169 118.776 28.9778 118.776C28.7321 118.776 28.5137 119.138 28.3499 119.474H28.4591C28.5683 119.319 28.6775 119.216 28.7594 119.216C28.8686 119.216 28.9232 119.371 28.7594 119.707L28.2953 120.664C28.2133 120.845 28.2953 120.974 28.4864 120.974C28.5956 120.974 28.6502 120.948 28.7048 120.819L29.169 119.681C29.3055 119.526 29.4147 119.397 29.5512 119.267H29.9881V119.293ZM26.739 120.896L26.7936 120.767C26.2202 120.664 26.1656 120.664 26.384 120.095L26.6024 119.5H27.2304C27.5035 119.5 27.5035 119.604 27.4762 119.888H27.64L28.0222 118.905H27.8584C27.7219 119.138 27.6127 119.293 27.3123 119.293H26.6844L27.012 118.44C27.1212 118.181 27.1758 118.104 27.5581 118.104H27.8311C28.2133 118.104 28.268 118.207 28.268 118.595H28.4318L28.5683 117.923H26.2202L26.1656 118.052C26.6297 118.13 26.657 118.181 26.4386 118.724L25.9199 120.043C25.7014 120.586 25.6195 120.638 25.1007 120.715L25.0734 120.845H26.739V120.896ZM38.2337 114.07C38.3975 114.07 38.5341 114.174 38.4521 114.458L37.7149 114.613C37.8515 114.303 38.0699 114.07 38.2337 114.07ZM38.6433 115.182H38.5068C38.3156 115.389 38.1245 115.544 37.9334 115.544C37.7423 115.544 37.633 115.441 37.633 115.182C37.633 115.079 37.633 114.975 37.6603 114.872L38.8344 114.51C39.0528 113.993 38.7798 113.76 38.4521 113.76C37.9061 113.76 37.2508 114.639 37.2508 115.415C37.2508 115.751 37.4146 115.958 37.6876 115.958C38.0426 115.958 38.3702 115.673 38.6433 115.182ZM38.4248 113.553L39.2439 112.829V112.752H38.8071L38.2883 113.579H38.4248V113.553ZM35.8856 114.07H36.2679L35.6399 115.673C35.5853 115.803 35.6672 115.958 35.8037 115.958C36.1587 115.958 36.732 115.622 36.9232 115.182H36.8139C36.6501 115.337 36.3498 115.544 36.104 115.596L36.6774 114.096H37.2508L37.3327 113.863H36.7593L36.9778 113.295H36.7593L36.3498 113.863L35.8583 113.915V114.07H35.8856ZM35.3395 113.993C35.3942 113.837 35.2849 113.76 35.203 113.76C34.8754 113.76 34.4658 114.044 34.302 114.458H34.4112C34.5204 114.303 34.7116 114.148 34.8754 114.122L34.2201 115.725C34.1655 115.88 34.2747 115.958 34.3566 115.958C34.6843 115.958 35.0665 115.673 35.2303 115.26H35.1211C35.0119 115.415 34.8208 115.57 34.657 115.596L35.3395 113.993ZM35.4761 113.191C35.6399 113.191 35.7491 113.062 35.7491 112.933C35.7491 112.777 35.6126 112.674 35.4761 112.674C35.3122 112.674 35.203 112.803 35.203 112.933C35.1757 113.088 35.3122 113.191 35.4761 113.191ZM33.2099 115.596L34.3839 112.648L34.3566 112.596L33.6194 112.674V112.752L33.7559 112.855C33.8925 112.958 33.8379 113.036 33.7286 113.346L32.8003 115.647C32.7457 115.777 32.8276 115.932 32.9641 115.932C33.2918 115.932 33.674 115.647 33.8379 115.234H33.7286C33.6194 115.415 33.3737 115.57 33.2099 115.596ZM30.9437 115.337C30.9437 114.846 31.5171 114.174 31.8447 114.174C31.9266 114.174 31.9812 114.174 32.0358 114.199L31.7082 115.053C31.5171 115.285 31.2167 115.544 31.0802 115.544C30.9983 115.544 30.9437 115.466 30.9437 115.337ZM32.7457 113.682H32.5546L32.3635 113.863H32.3089C31.3259 113.863 30.5068 114.898 30.5068 115.647C30.5068 115.854 30.6434 115.984 30.8618 115.984C31.1075 115.984 31.3532 115.647 31.6263 115.285V115.415C31.599 115.777 31.7082 115.984 31.9266 115.984C32.1723 115.984 32.3908 115.622 32.5546 115.285H32.4454C32.3362 115.441 32.227 115.544 32.145 115.544C32.0631 115.544 31.9812 115.389 32.145 115.053L32.7457 113.682ZM28.4045 116.346C28.4045 116.139 28.6229 116.009 28.9232 115.88C29.0324 115.932 29.169 115.984 29.3874 116.035C29.715 116.139 29.8242 116.165 29.8242 116.268C29.8242 116.475 29.4693 116.604 28.9778 116.604C28.5956 116.63 28.4045 116.552 28.4045 116.346ZM29.2782 115.053C29.1417 115.053 29.0871 114.949 29.0871 114.82C29.0871 114.458 29.2782 113.941 29.6058 113.941C29.7423 113.941 29.7969 114.044 29.7969 114.174C29.8242 114.51 29.6058 115.053 29.2782 115.053ZM30.2065 116.139C30.2065 115.88 29.9608 115.777 29.5785 115.673C29.2509 115.57 29.0871 115.544 29.0871 115.441C29.0871 115.363 29.169 115.26 29.3055 115.182C29.8516 115.156 30.2338 114.691 30.2338 114.277C30.2338 114.199 30.2065 114.122 30.1792 114.044H30.6434L30.7253 113.812H29.9881C29.9062 113.76 29.7969 113.734 29.6877 113.734C29.0871 113.734 28.7048 114.225 28.7048 114.613C28.7048 114.923 28.8959 115.104 29.169 115.156C28.8959 115.285 28.7321 115.415 28.7321 115.57C28.7321 115.673 28.7594 115.725 28.8413 115.777C28.2133 115.958 27.9403 116.165 27.9403 116.449C27.9403 116.733 28.3226 116.837 28.7867 116.837C29.5512 116.889 30.2065 116.475 30.2065 116.139ZM27.2304 114.432C27.5035 114.432 27.5035 114.536 27.4762 114.82H27.64L28.0222 113.838H27.8584C27.7219 114.07 27.6127 114.225 27.3123 114.225H26.6844L26.9847 113.424C27.0939 113.165 27.1485 113.114 27.5308 113.114H27.8038C28.186 113.114 28.2406 113.217 28.2406 113.579H28.4045L28.541 112.907H26.1929L26.1383 113.036C26.6024 113.114 26.6297 113.165 26.4113 113.708L25.8926 115.027C25.6741 115.57 25.5922 115.622 25.0734 115.699L25.0461 115.828H27.6673L28.1314 115.13H27.9676C27.6673 115.389 27.285 115.647 26.7663 115.647C26.0837 115.647 26.1383 115.622 26.3567 115.027L26.6024 114.38H27.2304V114.432ZM27.5854 112.726L28.4045 112.183V112.105H27.913L27.4488 112.726H27.5854ZM37.9607 109.028C38.1245 109.028 38.261 109.132 38.1791 109.416L37.4419 109.571C37.5784 109.261 37.7969 109.028 37.9607 109.028ZM38.3702 110.14H38.2337C38.0426 110.347 37.8515 110.502 37.6603 110.502C37.4692 110.502 37.36 110.399 37.36 110.14C37.36 110.037 37.36 109.933 37.3873 109.83L38.5614 109.468C38.7798 108.951 38.5068 108.718 38.1791 108.718C37.633 108.718 36.9778 109.597 36.9778 110.373C36.9778 110.709 37.1416 110.916 37.4146 110.916C37.7696 110.916 38.0972 110.631 38.3702 110.14ZM38.1518 108.511L38.9709 107.787V107.709H38.5341L38.0153 108.537H38.1518V108.511ZM35.6945 109.028H35.9948L35.3669 110.631C35.3122 110.761 35.3942 110.916 35.5307 110.916C35.8856 110.916 36.459 110.58 36.6501 110.14H36.5409C36.3771 110.295 36.0767 110.502 35.831 110.554L36.4044 109.054H36.9778L37.0597 108.821H36.4863L36.7047 108.252H36.4863L36.0767 108.821L35.6672 108.873V109.028H35.6945ZM35.3942 109.209C35.4761 108.951 35.4215 108.718 35.2303 108.718C34.9846 108.718 34.9027 108.899 34.657 109.416V109.106C34.657 108.899 34.5751 108.692 34.3839 108.692C34.1382 108.692 33.9198 109.054 33.7559 109.39H33.8652C33.9744 109.235 34.0836 109.132 34.1655 109.132C34.2747 109.132 34.3293 109.287 34.1655 109.623L33.7013 110.58C33.6194 110.761 33.7013 110.89 33.8925 110.89C34.0017 110.89 34.0563 110.864 34.1109 110.735L34.5751 109.597C34.7116 109.442 34.8208 109.313 34.9573 109.183H35.3942V109.209ZM32.773 109.028C32.9368 109.028 33.0734 109.132 32.9915 109.416L32.2543 109.571C32.3908 109.261 32.6092 109.028 32.773 109.028ZM33.1826 110.14H33.0461C32.8549 110.347 32.6638 110.502 32.4727 110.502C32.2816 110.502 32.1723 110.399 32.1723 110.14C32.1723 110.037 32.1723 109.933 32.1997 109.83L33.3737 109.468C33.5921 108.951 33.3191 108.718 32.9915 108.718C32.4454 108.718 31.7901 109.597 31.7901 110.373C31.7901 110.709 31.9539 110.916 32.227 110.916C32.5819 110.916 32.9095 110.631 33.1826 110.14ZM30.2884 110.605C30.1792 110.605 30.0154 110.502 30.0154 110.424C30.0154 110.399 30.07 110.269 30.1246 110.114L30.3157 109.623C30.5068 109.39 30.8345 109.157 30.9983 109.157C31.1075 109.157 31.1894 109.209 31.1894 109.364C31.2167 109.804 30.7799 110.605 30.2884 110.605ZM31.6536 109.183C31.6536 108.847 31.5171 108.744 31.2986 108.744C30.9983 108.744 30.7253 109.054 30.4522 109.416L31.1621 107.658L31.1348 107.606L30.3976 107.684V107.761L30.5341 107.865C30.6707 107.968 30.616 108.071 30.5068 108.356L29.7423 110.218C29.6877 110.347 29.6058 110.528 29.6058 110.554C29.6058 110.735 29.8789 110.916 30.1246 110.916C30.6707 110.916 31.6536 109.933 31.6536 109.183ZM29.3328 108.951C29.3874 108.795 29.2782 108.718 29.1963 108.718C28.8686 108.718 28.4591 109.002 28.2953 109.416H28.4045C28.5137 109.261 28.7048 109.106 28.8686 109.08L28.2133 110.683C28.1587 110.838 28.268 110.916 28.3499 110.916C28.6775 110.916 29.0598 110.631 29.2236 110.218H29.1144C29.0051 110.373 28.814 110.528 28.6502 110.554L29.3328 108.951ZM29.442 108.149C29.6058 108.149 29.715 108.02 29.715 107.89C29.715 107.735 29.5785 107.632 29.442 107.632C29.2782 107.632 29.169 107.761 29.169 107.89C29.169 108.046 29.2782 108.149 29.442 108.149ZM27.7219 107.89H26.1656L26.111 108.02C26.5751 108.097 26.6024 108.149 26.384 108.692L25.8926 110.011C25.6741 110.554 25.5922 110.605 25.0734 110.683L25.0461 110.812H27.4215L27.9403 109.959H27.7492C27.4488 110.269 27.1212 110.631 26.6024 110.631C26.2202 110.631 26.1656 110.58 26.384 110.011L26.8755 108.692C27.0939 108.149 27.1758 108.097 27.6946 108.02L27.7219 107.89Z" fill="white"/>
</g>
-<g clip-path="url(#clip2_627_41819)">
-<path d="M16.7182 94.1067C15.6795 94.1067 14.9289 93.3202 14.9289 92.2969C14.9289 91.2736 15.6416 90.4871 16.6424 90.4871C17.2489 90.4871 17.7265 90.7849 18.0298 91.2202L18.8789 90.5558C18.3937 89.9067 17.6052 89.4714 16.6424 89.4714C14.9668 89.4714 13.822 90.7696 13.822 92.2969C13.822 93.8242 14.9972 95.1223 16.7182 95.1223C17.7114 95.1223 18.5377 94.6947 19.0305 94.0303V91.7853H16.6044V92.7093H17.954V93.6409C17.6507 93.9311 17.2186 94.1067 16.7182 94.1067Z" fill="white"/>
-<path d="M22.9179 89.4714C21.2423 89.4714 20.0975 90.7696 20.0975 92.2969C20.0975 93.8242 21.2423 95.1223 22.9179 95.1223C24.5858 95.1223 25.7306 93.8242 25.7306 92.2969C25.7306 90.7696 24.5858 89.4714 22.9179 89.4714ZM22.9179 94.1067C21.9171 94.1067 21.2044 93.3202 21.2044 92.2969C21.2044 91.2736 21.9171 90.4871 22.9179 90.4871C23.911 90.4871 24.6237 91.2736 24.6237 92.2969C24.6237 93.3202 23.911 94.1067 22.9179 94.1067Z" fill="white"/>
-<path d="M30.1576 92.9689C30.1576 93.6867 29.7482 94.1067 29.0886 94.1067C28.4138 94.1067 28.012 93.6867 28.012 92.9689V89.6242H26.9354V92.8773C26.9354 94.2823 27.7542 95.1223 29.081 95.1223C30.4153 95.1223 31.2341 94.2823 31.2341 92.8773V89.6242H30.1576V92.9689Z" fill="white"/>
-<path d="M32.1697 89.6242L34.1788 94.9696H35.589L37.5981 89.6242H36.4533L34.8839 93.8013L33.3145 89.6242H32.1697Z" fill="white"/>
-<path d="M38.6829 94.9696H41.7762V94.0685H39.7595V92.694H41.473V91.7929H39.7595V90.5253H41.7762V89.6242H38.6829V94.9696Z" fill="white"/>
-<path d="M43.2926 94.9696H44.3692V92.8085H44.9226L46.3404 94.9696H47.6065L45.9461 92.6023C46.492 92.3503 46.8028 91.8693 46.8028 91.2202C46.8028 90.2274 46.0826 89.6242 44.915 89.6242H43.2926V94.9696ZM44.9757 90.5253C45.4306 90.5253 45.6959 90.8002 45.6959 91.2049C45.6959 91.6402 45.4306 91.9074 44.9757 91.9074H44.3692V90.5253H44.9757Z" fill="white"/>
-<path d="M48.5538 94.9696H49.6303V91.1056L52.0034 94.9696H53.3832V89.6242H52.3066V93.4882L49.9336 89.6242H48.5538V94.9696Z" fill="white"/>
-<path d="M55.1328 94.9696H58.2261V94.0685H56.2094V92.694H57.9228V91.7929H56.2094V90.5253H58.2261V89.6242H55.1328V94.9696Z" fill="white"/>
-<path d="M59.7424 94.9696H60.819V91.1362L62.0017 93.1369H62.7599L63.9426 91.1362V94.9696H65.0192V89.6242H63.6773L62.3808 91.8693L61.0844 89.6242H59.7424V94.9696Z" fill="white"/>
-<path d="M66.7657 94.9696H69.859V94.0685H67.8423V92.694H69.5557V91.7929H67.8423V90.5253H69.859V89.6242H66.7657V94.9696Z" fill="white"/>
-<path d="M71.3754 94.9696H72.4519V91.1056L74.825 94.9696H76.2048V89.6242H75.1282V93.4882L72.7552 89.6242H71.3754V94.9696Z" fill="white"/>
-<path d="M77.4086 90.6093H79.0462V94.9696H80.1227V90.6093H81.7604V89.6242H77.4086V90.6093Z" fill="white"/>
-<path d="M22.5389 85.2117C22.6278 85.1222 22.7167 85.0327 22.8055 84.9133C22.9833 84.7343 23.1314 84.5254 23.3388 84.3762C23.398 84.3165 23.4573 84.2867 23.5165 84.227C23.5461 84.1972 23.5461 84.1674 23.5461 84.1674C23.4573 84.1972 23.4276 84.2569 23.3388 84.2867C23.3091 84.2867 23.3091 84.2569 23.3091 84.2569C23.3684 84.227 23.4276 84.1674 23.4869 84.1375C23.4573 84.1375 23.4573 84.1077 23.4573 84.1077C23.2499 84.1077 23.1018 84.227 22.9536 84.3762C22.924 84.4061 22.8944 84.3464 22.8648 84.3464C22.6278 84.4359 22.45 84.6448 22.213 84.7343V84.7044C22.1242 84.7343 22.0353 84.794 21.9168 84.8238C21.7687 84.8536 21.6502 84.8536 21.5317 84.8536C21.354 84.8835 21.1466 84.9133 20.9688 84.9431C20.9688 84.9431 20.9688 84.9431 20.9392 84.9431C20.8503 84.973 20.7319 85.0028 20.643 85.0625L20.6134 85.0923C20.5837 85.1222 20.5541 85.152 20.4949 85.1818C20.406 85.2415 20.3171 85.331 20.2282 85.3907H20.1986C20.1097 85.4802 20.0209 85.5697 19.932 85.6294C19.932 85.6294 19.9024 85.6294 19.8728 85.6294C19.8728 85.6294 19.8728 85.6294 19.8728 85.5996C19.8728 85.5697 19.9024 85.5399 19.9024 85.5399C19.932 85.5101 19.932 85.4802 19.9616 85.4802C19.9913 85.4504 19.9913 85.4206 20.0209 85.3907V85.3609C20.0209 85.3609 20.0209 85.3609 19.9913 85.3609C20.0801 85.2714 20.169 85.2117 20.2579 85.152C20.2579 85.152 20.2282 85.152 20.2282 85.1222L20.2579 85.0923C20.2875 85.0923 20.2579 85.1222 20.2579 85.1222C20.2282 85.152 20.1986 85.2415 20.1394 85.2117H20.1097C20.1097 85.2117 20.1097 85.2117 20.0801 85.2117C20.0801 85.2117 20.0801 85.2117 20.0801 85.1818C20.0801 85.1818 20.0801 85.152 20.1097 85.152C20.1097 85.152 20.1097 85.152 20.1097 85.1222C20.1097 85.1222 20.1097 85.0923 20.1394 85.0923V85.0625C20.169 85.0327 20.1986 85.0028 20.2579 84.973C20.3171 84.9431 20.3764 84.9133 20.4356 84.8835L20.4652 84.8536C20.3764 84.8835 20.2875 84.9133 20.1986 84.973H20.169H20.1394C20.169 84.9431 20.1986 84.9133 20.2282 84.8835C20.2579 84.8835 20.2579 84.8835 20.2579 84.9133C20.7615 84.5254 21.4724 84.6149 22.0649 84.4061C22.1242 84.3762 22.1538 84.3464 22.213 84.3165C22.3019 84.2867 22.3612 84.1972 22.45 84.1674C22.5685 84.0778 22.6574 83.9585 22.7167 83.8093C22.7167 83.7795 22.687 83.7795 22.687 83.7795C22.4797 84.0182 22.2427 84.1674 21.9761 84.3165C21.6502 84.4956 21.2651 84.4657 20.9392 84.4956C20.9688 84.4657 20.9985 84.4657 21.0281 84.4657C21.0281 84.4061 21.0577 84.4061 21.0873 84.3762H21.1466C21.1762 84.3762 21.1762 84.3464 21.1762 84.3464C21.2058 84.3464 21.2651 84.3165 21.2355 84.3165C21.1762 84.2569 21.0873 84.3762 20.9985 84.3165C21.0281 84.2867 21.0281 84.227 21.0577 84.227H21.117C21.117 84.1972 21.1466 84.1674 21.1466 84.1674C21.3836 84.0182 21.6206 83.8988 21.8279 83.7795C21.7687 83.7795 21.7391 83.8391 21.7094 83.8093C21.7391 83.8093 21.7094 83.7496 21.7391 83.7496C21.9168 83.6899 22.0649 83.6004 22.2427 83.5407C22.1834 83.5407 22.1242 83.6004 22.0649 83.5407C22.0946 83.5109 22.1242 83.4811 22.1538 83.4811V83.4214C22.1538 83.3916 22.1834 83.3916 22.1834 83.3916C22.1538 83.3916 22.1538 83.3617 22.1538 83.3617C22.1834 83.3319 22.213 83.3319 22.2427 83.302C22.213 83.302 22.1834 83.302 22.1834 83.2722C22.2427 83.2125 22.3019 83.1827 22.3908 83.1827C22.3612 83.1529 22.3315 83.1827 22.3315 83.1529C22.3315 83.123 22.3612 83.123 22.3612 83.123C22.3315 83.0932 22.3315 83.0633 22.3315 83.0633C22.4204 82.944 22.4204 82.7948 22.4797 82.6754C22.45 82.6754 22.45 82.6754 22.45 82.6456C22.3019 82.8246 22.0353 82.8843 21.7983 82.944H21.7094C21.6206 82.9738 21.5317 82.9738 21.4428 82.9141C21.3836 82.8843 21.354 82.8246 21.2947 82.7948C21.1762 82.7053 21.0281 82.6456 20.9096 82.6158C20.4949 82.4964 20.0801 82.4367 19.695 82.4367C19.8728 82.3472 20.0505 82.3472 20.2579 82.2875C20.5245 82.198 20.7911 82.1085 21.0577 82.1384C20.9985 82.1085 20.9392 82.1384 20.9096 82.1384C20.6726 82.1085 20.4652 82.198 20.2282 82.2279C20.0801 82.2577 19.932 82.3174 19.7543 82.3472C19.6654 82.3771 19.6061 82.4666 19.4876 82.4666V82.4069C19.6358 82.2279 19.8431 82.019 20.0801 82.019C20.3764 81.9593 20.643 82.019 20.9096 82.0488C21.117 82.0787 21.2947 82.1085 21.5021 82.1682C21.5909 82.1682 21.5909 82.2875 21.6502 82.3174C21.7391 82.3472 21.8279 82.3174 21.9464 82.3771C21.9464 82.3472 21.9168 82.3174 21.9464 82.2875C22.0057 82.2279 22.0946 82.3174 22.1538 82.2577C22.2723 82.1682 22.0353 82.0488 21.9761 81.9295C21.9761 81.8996 22.0057 81.8997 22.0057 81.8997C22.1242 82.019 22.213 82.1384 22.3908 82.2279C22.4797 82.2577 22.6574 82.3174 22.6278 82.198C22.5389 82.019 22.3908 81.8698 22.2723 81.7206V81.6609C22.2427 81.6609 22.2427 81.6311 22.213 81.6311V81.5416C22.1538 81.5118 22.1538 81.4521 22.1242 81.3924C22.0649 81.3029 22.0946 81.2134 22.0649 81.094C22.0649 81.0343 22.0649 80.9448 22.0353 80.8553C21.9761 80.5868 21.9168 80.3481 21.8872 80.0795C21.8576 79.7811 22.0649 79.5424 22.213 79.2739C22.3315 79.0949 22.45 78.886 22.6574 78.7666C22.7167 78.5876 22.8352 78.4086 22.9536 78.2594C23.0721 78.1102 23.2795 78.0207 23.4573 77.9312C23.6646 77.8417 23.872 77.782 23.872 77.782H13V86.2262H20.7022C20.9985 86.0173 21.2947 85.898 21.7391 85.6891C21.9168 85.5996 22.3908 85.3907 22.5389 85.2117ZM20.0801 84.0778C20.0505 84.0778 19.9913 84.1077 19.9913 84.048C20.0209 83.9585 20.1097 83.9585 20.169 83.9286C20.1986 83.8988 20.2579 83.869 20.2875 83.8988C20.3171 83.9585 20.3764 83.9286 20.406 83.9585C20.3171 84.0778 20.1986 84.048 20.0801 84.0778ZM17.651 83.7198L17.6213 83.6899C17.8287 83.4214 17.9768 83.1529 18.1249 82.8843C18.3323 82.765 18.5101 82.6158 18.6582 82.4367C18.9248 82.1384 19.221 81.8996 19.5469 81.7206C19.6654 81.6609 19.8431 81.6908 19.9616 81.7505C19.9024 81.8101 19.8431 81.8101 19.7839 81.84C19.7543 81.84 19.7543 81.84 19.7246 81.8101C19.7543 81.7803 19.7543 81.7803 19.7543 81.7505C19.6061 81.9295 19.3691 82.019 19.2507 82.2279C19.1618 82.3771 19.1025 82.5859 18.8952 82.6456C18.8359 82.6754 18.9248 82.5859 18.8655 82.6158C18.3916 82.944 18.0361 83.302 17.651 83.7198ZM18.984 82.6754C18.9544 82.7053 18.9544 82.7053 18.9248 82.7351C18.8952 82.765 18.8952 82.7948 18.8655 82.7948C18.8359 82.7948 18.8359 82.7948 18.8359 82.765C18.8655 82.7053 18.8952 82.6456 18.9544 82.6158C18.984 82.6456 18.984 82.6456 18.984 82.6754ZM19.7246 85.0625C19.7246 85.0923 19.695 85.0923 19.695 85.1222C19.7246 85.1222 19.7246 85.1222 19.7246 85.152C19.695 85.1818 19.6654 85.2117 19.6061 85.2415C19.6061 85.2415 19.6061 85.2415 19.5765 85.2415C19.5469 85.2714 19.5469 85.2714 19.5173 85.3012C19.4876 85.331 19.3988 85.3012 19.4284 85.2714C19.458 85.2415 19.5173 85.1818 19.5469 85.152C19.5765 85.1222 19.6061 85.1222 19.6061 85.0923L19.6358 85.0625C19.6358 85.0327 19.7246 85.0327 19.7246 85.0625ZM19.4284 84.9431C19.3691 85.0028 19.3099 85.0327 19.2507 85.0625C19.1914 85.0923 19.1025 85.1222 19.0433 85.152H19.0137C18.9544 85.1818 18.8952 85.2415 18.8655 85.2714C18.8655 85.2714 18.8655 85.2714 18.8359 85.3012L18.8063 85.331L18.7767 85.3609C18.7767 85.3609 18.7767 85.3907 18.747 85.3907H18.7174H18.6878H18.6582C18.6286 85.4206 18.6286 85.4206 18.5989 85.4504C18.5693 85.4802 18.5397 85.5101 18.5101 85.5399C18.5101 85.5399 18.5101 85.5399 18.5101 85.5697V85.5399C18.5397 85.5101 18.5397 85.5101 18.5693 85.4802C18.5693 85.4802 18.5693 85.4802 18.5989 85.4504L18.6286 85.4206C18.6582 85.3907 18.6582 85.3609 18.6878 85.3609L18.7174 85.331C18.7174 85.331 18.7174 85.3012 18.747 85.3012C18.747 85.3012 18.747 85.2714 18.7767 85.2714C18.7767 85.2714 18.7767 85.2714 18.7767 85.2415V85.2117C18.8063 85.1818 18.8063 85.152 18.8359 85.1222C18.8063 85.1222 18.8063 85.152 18.7767 85.1818C18.747 85.1818 18.7174 85.1818 18.747 85.152L18.7767 85.1222C18.8063 85.0923 18.8359 85.0625 18.8655 85.0327C18.8952 85.0327 18.8952 85.0028 18.9248 85.0028L18.9544 84.973C19.1025 84.8238 19.3691 84.8238 19.5765 84.7343C19.6654 84.7044 19.7543 84.7641 19.8431 84.7343C19.9024 84.7343 19.932 84.7343 19.9913 84.7641C19.695 84.7641 19.5765 84.8536 19.4284 84.9431ZM19.7543 83.8391C19.7246 83.8093 19.8135 83.8391 19.8135 83.8093H19.695C19.6654 83.8093 19.6654 83.7795 19.6654 83.7795C19.5765 83.8093 19.4876 83.8391 19.3988 83.8391C19.2803 83.869 19.1914 83.9585 19.0729 83.9883C18.8952 84.048 18.747 84.1972 18.5693 84.2569C18.5397 84.2569 18.5397 84.227 18.5397 84.227C18.5693 84.1674 18.6286 84.1674 18.6582 84.1077C18.6582 84.0778 18.6582 84.0778 18.6286 84.0778C18.747 83.8988 18.9248 83.8093 19.1025 83.6601V83.6004C19.1618 83.5407 19.221 83.5109 19.2507 83.4214C19.2803 83.3617 19.3395 83.302 19.3988 83.2722C19.3691 83.2424 19.3395 83.2424 19.3395 83.2125C19.2803 83.2125 19.221 83.2424 19.1618 83.1827C19.1914 83.1529 19.221 83.123 19.2507 83.123C19.2507 83.123 19.221 83.123 19.221 83.0932C19.1914 83.0633 19.2507 83.0335 19.3099 83.0037C19.3691 82.9738 19.458 82.9738 19.4876 82.944C19.3691 82.9141 19.2507 82.9738 19.1322 82.9141C19.221 82.7053 19.3395 82.5263 19.5173 82.4367C19.5469 82.4367 19.5765 82.4367 19.5765 82.4666C19.5765 82.5561 19.5173 82.6158 19.458 82.6158C19.5765 82.6456 19.7246 82.6456 19.8431 82.7053C19.8135 82.7351 19.7839 82.7351 19.7839 82.7351C19.8728 82.7948 19.9616 82.765 20.0505 82.8246C19.9913 82.8843 19.9616 82.8246 19.9024 82.8246C20.406 82.9738 20.9096 83.0932 21.3243 83.3916C20.9688 83.5706 20.6134 83.6601 20.2282 83.7198C20.169 83.7198 20.1394 83.7198 20.1097 83.6899C20.1097 83.7198 20.1097 83.7496 20.0801 83.7496C20.0209 83.7496 19.9616 83.7496 19.932 83.7795C19.9024 83.869 19.8135 83.869 19.7543 83.8391Z" fill="white"/>
-<path d="M36.0769 77.752H27.0416C27.0416 77.752 27.0712 77.752 27.1305 77.7818C27.1897 77.8116 27.3082 77.8713 27.3675 77.9011C27.4859 77.9608 27.6044 78.0503 27.6637 78.1697C27.6933 78.2294 27.7526 78.3189 27.7229 78.3786C27.6933 78.4681 27.6637 78.5874 27.6044 78.6173C27.5156 78.6769 27.3971 78.6769 27.2786 78.6471C27.2193 78.6471 27.1601 78.6173 27.1008 78.6173C27.3378 78.7068 27.5748 78.8261 27.7229 79.035C27.7526 79.0648 27.8118 79.0947 27.8711 79.0947C27.9007 79.0947 27.9007 79.1245 27.9007 79.1543C27.8711 79.1842 27.8414 79.214 27.8414 79.2439H27.9007C27.9896 79.214 27.9599 79.0648 28.0784 79.0947C28.1673 79.1543 28.1969 79.2439 28.1377 79.3334C28.0784 79.3931 28.0192 79.4527 27.9599 79.4826C27.9303 79.5124 27.9303 79.5721 27.9599 79.6019C28.0192 79.6616 28.0192 79.7213 28.0488 79.7809C28.1081 79.9003 28.1081 80.0197 28.1673 80.139C28.2265 80.3777 28.2858 80.6164 28.2858 80.8551C28.2858 80.9745 28.2265 81.0938 28.2562 81.2132C28.2858 81.3325 28.3747 81.4519 28.4339 81.5414C28.4932 81.6309 28.5524 81.6906 28.6117 81.8099C28.7005 81.9591 28.8783 82.1382 28.7894 82.3172C28.7302 82.4365 28.5524 82.4067 28.4635 82.4664C28.3747 82.5559 28.4339 82.6753 28.4932 82.7648C28.582 82.914 28.4043 83.0035 28.2858 83.0631C28.3154 83.1228 28.3747 83.093 28.4043 83.1228C28.4339 83.2123 28.4932 83.2422 28.4635 83.3317C28.4043 83.4212 28.1969 83.4809 28.3154 83.6301C28.3747 83.7494 28.345 83.8688 28.2858 83.9881C28.2265 84.1373 28.1081 84.197 27.9896 84.2268C27.9007 84.2567 27.7822 84.2567 27.6933 84.2567C27.5748 84.2268 27.5452 84.2268 27.5156 84.2268C27.249 84.197 26.9823 84.1075 26.7157 84.1075C26.6269 84.1373 26.5676 84.1373 26.5084 84.1672C26.4491 84.2268 26.3602 84.2865 26.3306 84.3462L26.301 84.376C26.301 84.376 26.301 84.4059 26.2714 84.4059C26.2714 84.4059 26.2714 84.4059 26.2714 84.4357C26.2121 84.4954 26.1825 84.5551 26.1529 84.6147V84.6446C26.0936 84.7341 26.064 84.8534 26.0344 84.943C25.9159 85.301 25.9751 85.6292 26.064 85.6889C26.0936 85.7187 26.5972 85.8679 26.9231 86.0171C27.1008 86.0768 27.1897 86.1365 27.3082 86.1962H36.1658V77.752H36.0769Z" fill="white"/>
-<path d="M33.0705 111.03C33.2354 111.03 33.3728 111.137 33.2903 111.43L32.5483 111.589C32.6857 111.297 32.9056 111.03 33.0705 111.03ZM33.4827 112.202H33.3453C33.1529 112.414 32.9605 112.574 32.7682 112.574C32.5758 112.574 32.4659 112.468 32.4659 112.202C32.4659 112.095 32.4659 111.989 32.4933 111.882L33.6751 111.509C33.8949 110.977 33.6201 110.738 33.2903 110.738C32.7407 110.738 32.0811 111.643 32.0811 112.441C32.0811 112.787 32.246 113 32.5208 113C32.8781 113 33.2079 112.681 33.4827 112.202ZM33.2354 110.525L34.0598 109.779V109.699H33.6201L33.0979 110.551H33.2354V110.525ZM30.6795 111.057H31.0643L30.4322 112.707C30.3772 112.84 30.4597 113 30.5971 113C30.9544 113 31.5315 112.654 31.7239 112.202H31.6139C31.449 112.361 31.1467 112.574 30.8994 112.627L31.4765 111.084H32.0536L32.1361 110.844H31.559L31.7788 110.258H31.559L31.1467 110.844L30.6521 110.897V111.057H30.6795ZM30.1574 110.977C30.2123 110.817 30.1024 110.738 30.02 110.738C29.6902 110.738 29.278 111.03 29.1131 111.456H29.223C29.3329 111.297 29.5253 111.137 29.6902 111.11L29.0306 112.76C28.9757 112.92 29.0856 113 29.168 113C29.4978 113 29.8826 112.707 30.0475 112.281H29.9375C29.8276 112.441 29.6352 112.601 29.4703 112.627L30.1574 110.977ZM30.2673 110.152C30.4322 110.152 30.5421 110.019 30.5421 109.886C30.5421 109.726 30.4047 109.62 30.2673 109.62C30.1024 109.62 29.9925 109.753 29.9925 109.886C29.9925 110.019 30.1024 110.152 30.2673 110.152ZM26.5023 112.681C26.4198 112.867 26.5023 113 26.6947 113C26.8046 113 26.8596 112.973 26.9145 112.84L27.3817 111.669C27.6016 111.43 28.0138 111.163 28.2062 111.163C28.3436 111.163 28.3161 111.27 28.2336 111.403L27.5466 112.707C27.4916 112.84 27.5741 113 27.7115 113C28.0413 113 28.4535 112.707 28.6184 112.281H28.5085C28.3985 112.441 28.2062 112.601 28.0413 112.627L28.6459 111.456C28.7283 111.297 28.7558 111.163 28.7558 111.057C28.7558 110.871 28.6459 110.738 28.426 110.738C28.1237 110.738 27.8214 111.057 27.4642 111.456V111.137C27.4642 110.924 27.3817 110.711 27.1893 110.711C27.0519 110.711 26.942 110.817 26.8321 110.977V111.03C27.0519 111.03 27.1619 111.35 26.997 111.669L26.5023 112.681ZM26.5023 111.243C26.5847 110.977 26.5298 110.738 26.3374 110.738C26.0901 110.738 26.0076 110.924 25.7603 111.456V111.137C25.7603 110.924 25.6778 110.711 25.4855 110.711C25.2381 110.711 25.0183 111.084 24.8534 111.43H24.9633C25.0732 111.27 25.1832 111.163 25.2656 111.163C25.3755 111.163 25.4305 111.323 25.2656 111.669L24.7984 112.654C24.716 112.84 24.7984 112.973 24.9908 112.973C25.1007 112.973 25.1557 112.947 25.2106 112.814L25.6778 111.643C25.8152 111.483 25.9252 111.35 26.0626 111.217H26.5023V111.243ZM23.864 111.03C24.0289 111.03 24.1663 111.137 24.0839 111.43L23.3419 111.589C23.4793 111.297 23.6991 111.03 23.864 111.03ZM24.2763 112.202H24.1388C23.9465 112.414 23.7541 112.574 23.5617 112.574C23.3693 112.574 23.2594 112.468 23.2594 112.202C23.2594 112.095 23.2594 111.989 23.2869 111.882L24.4686 111.509C24.6885 110.977 24.4137 110.738 24.0839 110.738C23.5342 110.738 22.8747 111.643 22.8747 112.441C22.8747 112.787 23.0396 113 23.3144 113C23.6716 113 24.0014 112.681 24.2763 112.202ZM21.4731 111.057H21.8578L21.2258 112.707C21.1708 112.84 21.2532 113 21.3907 113C21.7479 113 22.325 112.654 22.5174 112.202H22.4075C22.2426 112.361 21.9403 112.574 21.693 112.627L22.2701 111.084H22.8472L22.9296 110.844H22.3525L22.5724 110.258H22.3525L21.9403 110.844L21.4456 110.897V111.057H21.4731ZM19.302 112.335C19.302 111.829 19.8791 111.137 20.2089 111.137C20.2914 111.137 20.3463 111.137 20.4013 111.163L20.0715 112.042C19.8791 112.281 19.5768 112.548 19.4394 112.548C19.357 112.574 19.302 112.494 19.302 112.335ZM21.1158 110.631H20.9235L20.7311 110.817H20.6761C19.6868 110.817 18.8623 111.882 18.8623 112.654C18.8623 112.867 18.9997 113 19.2196 113C19.4669 113 19.7143 112.654 19.9891 112.281V112.414C19.9616 112.787 20.0715 113 20.2914 113C20.5387 113 20.7586 112.627 20.9235 112.281H20.8135C20.7036 112.441 20.5937 112.548 20.5112 112.548C20.4288 112.548 20.3463 112.388 20.5112 112.042L21.1158 110.631ZM19.0272 111.243C19.1097 110.977 19.0547 110.738 18.8623 110.738C18.615 110.738 18.5325 110.924 18.2852 111.456V111.137C18.2852 110.924 18.2027 110.711 18.0104 110.711C17.763 110.711 17.5432 111.084 17.3783 111.43H17.4882C17.5981 111.27 17.7081 111.163 17.7905 111.163C17.9004 111.163 17.9554 111.323 17.7905 111.669L17.3233 112.654C17.2409 112.84 17.3233 112.973 17.5157 112.973C17.6256 112.973 17.6806 112.947 17.7356 112.814L18.2027 111.643C18.3402 111.483 18.4501 111.35 18.5875 111.217H19.0272V111.243ZM15.7569 112.894L15.8118 112.76C15.2347 112.654 15.1797 112.654 15.3996 112.068L15.6194 111.456H16.2515C16.5264 111.456 16.5264 111.563 16.4989 111.855H16.6638L17.0485 110.844H16.8836C16.7462 111.084 16.6363 111.243 16.334 111.243H15.7019L16.0317 110.365C16.1416 110.099 16.1966 110.019 16.5813 110.019H16.8561C17.2409 110.019 17.2958 110.125 17.2958 110.525H17.4607L17.5981 109.833H15.2347L15.1797 109.966C15.6469 110.045 15.6744 110.099 15.4546 110.658L14.9324 112.015C14.7125 112.574 14.6301 112.627 14.1079 112.707L14.0805 112.84H15.7569V112.894ZM27.3267 105.867C27.4916 105.867 27.629 105.973 27.5466 106.266L26.8046 106.426C26.942 106.106 27.1619 105.867 27.3267 105.867ZM27.739 107.011H27.6016C27.4092 107.224 27.2168 107.384 27.0244 107.384C26.8321 107.384 26.7221 107.277 26.7221 107.011C26.7221 106.905 26.7221 106.798 26.7496 106.692L27.9313 106.319C28.1512 105.787 27.8764 105.547 27.5466 105.547C26.997 105.547 26.3374 106.452 26.3374 107.251C26.3374 107.597 26.5023 107.81 26.7771 107.81C27.1344 107.81 27.4642 107.517 27.739 107.011ZM27.5191 105.334L28.3436 104.589V104.509H27.9039L27.3817 105.361H27.5191V105.334ZM24.9633 105.867H25.348L24.716 107.517C24.661 107.65 24.7434 107.81 24.8809 107.81C25.2381 107.81 25.8152 107.464 26.0076 107.011H25.8977C25.7328 107.171 25.4305 107.384 25.1832 107.437L25.7603 105.893H26.3374L26.4198 105.654H25.8427L26.0626 105.068H25.8427L25.4305 105.654L24.9358 105.707V105.867H24.9633ZM24.4137 105.787C24.4686 105.627 24.3587 105.547 24.2763 105.547C23.9465 105.547 23.5342 105.84 23.3693 106.266H23.4793C23.5892 106.106 23.7816 105.946 23.9465 105.92L23.2869 107.57C23.2319 107.73 23.3419 107.81 23.4243 107.81C23.7541 107.81 24.1388 107.517 24.3037 107.091H24.1938C24.0839 107.251 23.8915 107.41 23.7266 107.437L24.4137 105.787ZM24.5511 104.962C24.716 104.962 24.8259 104.828 24.8259 104.695C24.8259 104.536 24.6885 104.429 24.5511 104.429C24.3862 104.429 24.2763 104.562 24.2763 104.695C24.2488 104.855 24.3862 104.962 24.5511 104.962ZM22.2701 107.437L23.4518 104.403L23.4243 104.349L22.6823 104.429V104.509L22.8197 104.616C22.9571 104.722 22.9022 104.802 22.7922 105.121L21.8578 107.49C21.8029 107.623 21.8853 107.783 22.0227 107.783C22.3525 107.783 22.7373 107.49 22.9022 107.064H22.7922C22.6823 107.251 22.435 107.41 22.2701 107.437ZM19.9891 107.171C19.9891 106.665 20.5662 105.973 20.896 105.973C20.9784 105.973 21.0334 105.973 21.0883 106L20.7586 106.878C20.5662 107.118 20.2639 107.384 20.1265 107.384C20.044 107.384 19.9891 107.304 19.9891 107.171ZM21.8029 105.467H21.6105L21.4181 105.654H21.3632C20.3738 105.654 19.5494 106.718 19.5494 107.49C19.5494 107.703 19.6868 107.836 19.9066 107.836C20.154 107.836 20.4013 107.49 20.6761 107.118V107.251C20.6486 107.623 20.7586 107.836 20.9784 107.836C21.2258 107.836 21.4456 107.464 21.6105 107.118H21.5006C21.3907 107.277 21.2807 107.384 21.1983 107.384C21.1158 107.384 21.0334 107.224 21.1983 106.878L21.8029 105.467ZM17.4333 108.209C17.4333 107.996 17.6531 107.863 17.9554 107.73C18.0653 107.783 18.2027 107.836 18.4226 107.889C18.7524 107.996 18.8623 108.023 18.8623 108.129C18.8623 108.342 18.505 108.475 18.0104 108.475C17.6256 108.502 17.4333 108.422 17.4333 108.209ZM18.3127 106.878C18.1753 106.878 18.1203 106.772 18.1203 106.638C18.1203 106.266 18.3127 105.733 18.6425 105.733C18.7799 105.733 18.8348 105.84 18.8348 105.973C18.8623 106.319 18.6425 106.878 18.3127 106.878ZM19.2471 107.996C19.2471 107.73 18.9997 107.623 18.615 107.517C18.2852 107.41 18.1203 107.384 18.1203 107.277C18.1203 107.197 18.2027 107.091 18.3402 107.011C18.8898 106.984 19.2745 106.505 19.2745 106.079C19.2745 106 19.2471 105.92 19.2196 105.84H19.6868L19.7692 105.6H19.0272C18.9448 105.547 18.8348 105.521 18.7249 105.521C18.1203 105.521 17.7356 106.026 17.7356 106.426C17.7356 106.745 17.9279 106.931 18.2027 106.984C17.9279 107.118 17.763 107.251 17.763 107.41C17.763 107.517 17.7905 107.57 17.873 107.623C17.2409 107.81 16.9661 108.023 16.9661 108.315C16.9661 108.608 17.3508 108.715 17.818 108.715C18.5875 108.768 19.2471 108.342 19.2471 107.996ZM16.2515 106.239C16.5264 106.239 16.5264 106.346 16.4989 106.638H16.6638L17.0485 105.627H16.8836C16.7462 105.867 16.6363 106.026 16.334 106.026H15.7019L16.0042 105.201C16.1141 104.935 16.1691 104.882 16.5538 104.882H16.8287C17.2134 104.882 17.2684 104.988 17.2684 105.361H17.4333L17.5707 104.669H15.2072L15.1523 104.802C15.6194 104.882 15.6469 104.935 15.4271 105.494L14.9049 106.851C14.6851 107.41 14.6026 107.464 14.0805 107.543L14.053 107.677H16.6912L17.1584 106.958H16.9935C16.6912 107.224 16.3065 107.49 15.7843 107.49C15.0973 107.49 15.1523 107.464 15.3721 106.851L15.6194 106.186H16.2515V106.239ZM16.6088 104.482L17.4333 103.923V103.844H16.9386L16.4714 104.482H16.6088ZM27.0519 100.676C27.2168 100.676 27.3542 100.783 27.2718 101.075L26.5298 101.235C26.6672 100.916 26.887 100.676 27.0519 100.676ZM27.4642 101.821H27.3267C27.1344 102.034 26.942 102.193 26.7496 102.193C26.5573 102.193 26.4473 102.087 26.4473 101.821C26.4473 101.714 26.4473 101.608 26.4748 101.501L27.6565 101.129C27.8764 100.596 27.6016 100.357 27.2718 100.357C26.7221 100.357 26.0626 101.262 26.0626 102.06C26.0626 102.406 26.2275 102.619 26.5023 102.619C26.8596 102.619 27.1893 102.326 27.4642 101.821ZM27.2443 100.144L28.0688 99.3985V99.3186H27.629L27.1069 100.17H27.2443V100.144ZM24.7709 100.676H25.0732L24.4411 102.326C24.3862 102.459 24.4686 102.619 24.606 102.619C24.9633 102.619 25.5404 102.273 25.7328 101.821H25.6229C25.458 101.98 25.1557 102.193 24.9083 102.247L25.4855 100.703H26.0626L26.145 100.463H25.5679L25.7878 99.8776H25.5679L25.1557 100.463L24.7434 100.516V100.676H24.7709ZM24.4686 100.862C24.5511 100.596 24.4961 100.357 24.3037 100.357C24.0564 100.357 23.974 100.543 23.7266 101.075V100.756C23.7266 100.543 23.6442 100.33 23.4518 100.33C23.2045 100.33 22.9846 100.703 22.8197 101.049H22.9296C23.0396 100.889 23.1495 100.783 23.2319 100.783C23.3419 100.783 23.3968 100.942 23.2319 101.288L22.7647 102.273C22.6823 102.459 22.7647 102.593 22.9571 102.593C23.067 102.593 23.122 102.566 23.177 102.433L23.6442 101.262C23.7816 101.102 23.8915 100.969 24.0289 100.836H24.4686V100.862ZM21.8304 100.676C21.9953 100.676 22.1327 100.783 22.0502 101.075L21.3082 101.235C21.4456 100.916 21.6655 100.676 21.8304 100.676ZM22.2426 101.821H22.1052C21.9128 102.034 21.7204 102.193 21.5281 102.193C21.3357 102.193 21.2258 102.087 21.2258 101.821C21.2258 101.714 21.2258 101.608 21.2532 101.501L22.435 101.129C22.6548 100.596 22.38 100.357 22.0502 100.357C21.5006 100.357 20.841 101.262 20.841 102.06C20.841 102.406 21.0059 102.619 21.2807 102.619C21.638 102.619 21.9678 102.326 22.2426 101.821ZM19.3295 102.3C19.2196 102.3 19.0547 102.193 19.0547 102.113C19.0547 102.087 19.1097 101.954 19.1646 101.794L19.357 101.288C19.5494 101.049 19.8791 100.809 20.044 100.809C20.154 100.809 20.2364 100.862 20.2364 101.022C20.2639 101.475 19.8242 102.3 19.3295 102.3ZM20.7036 100.836C20.7036 100.49 20.5662 100.383 20.3463 100.383C20.044 100.383 19.7692 100.703 19.4944 101.075L20.2089 99.2654L20.1814 99.2122L19.4394 99.292V99.3719L19.5768 99.4783C19.7143 99.5848 19.6593 99.6913 19.5494 99.9841L18.7799 101.901C18.7249 102.034 18.6425 102.22 18.6425 102.247C18.6425 102.433 18.9173 102.619 19.1646 102.619C19.7143 102.619 20.7036 101.608 20.7036 100.836ZM18.3676 100.596C18.4226 100.437 18.3127 100.357 18.2302 100.357C17.9004 100.357 17.4882 100.65 17.3233 101.075H17.4333C17.5432 100.916 17.7356 100.756 17.9004 100.729L17.2409 102.38C17.1859 102.539 17.2958 102.619 17.3783 102.619C17.7081 102.619 18.0928 102.326 18.2577 101.901H18.1478C18.0379 102.06 17.8455 102.22 17.6806 102.247L18.3676 100.596ZM18.4776 99.7711C18.6425 99.7711 18.7524 99.638 18.7524 99.505C18.7524 99.3452 18.615 99.2388 18.4776 99.2388C18.3127 99.2388 18.2027 99.3719 18.2027 99.505C18.2027 99.6647 18.3127 99.7711 18.4776 99.7711ZM16.7462 99.505H15.1797L15.1248 99.638C15.592 99.7179 15.6194 99.7711 15.3996 100.33L14.9049 101.688C14.6851 102.247 14.6026 102.3 14.0805 102.38L14.053 102.513H16.4439L16.9661 101.634H16.7737C16.4714 101.954 16.1416 102.326 15.6194 102.326C15.2347 102.326 15.1797 102.273 15.3996 101.688L15.8943 100.33C16.1141 99.7711 16.1966 99.7179 16.7187 99.638L16.7462 99.505Z" fill="white"/>
+<g clip-path="url(#clip2_3832_18513)">
+<path d="M145.913 106.372H144.292V111.258H143.097V106.372H141.504V105.236H145.913V106.372ZM150.321 110.122V111.258H146.66V105.248H150.324V106.384H147.841V107.664H150.109V108.785H147.841V110.134L150.321 110.122ZM153.358 109.167H152.462V111.27H151.266V105.26H153.657C153.919 105.26 154.177 105.311 154.419 105.411C154.661 105.51 154.88 105.657 155.066 105.843C155.251 106.028 155.398 106.248 155.498 106.491C155.599 106.733 155.651 106.993 155.651 107.256C155.644 107.628 155.531 107.992 155.327 108.302C155.122 108.613 154.833 108.859 154.494 109.011L155.821 111.282H154.545L153.358 109.167ZM152.462 108.127H153.678C153.89 108.094 154.083 107.986 154.222 107.823C154.362 107.66 154.438 107.451 154.438 107.236C154.438 107.021 154.362 106.813 154.222 106.649C154.083 106.486 153.89 106.378 153.678 106.345H152.462V108.127ZM158.703 109.167H157.806V111.27H156.625V105.26H159.017C159.54 105.26 160.042 105.466 160.415 105.835C160.787 106.204 161 106.706 161.007 107.232C161.001 107.605 160.888 107.968 160.683 108.279C160.479 108.589 160.19 108.835 159.851 108.987L161.178 111.258H159.904L158.703 109.167ZM157.806 108.127H159.023C159.234 108.094 159.427 107.986 159.567 107.823C159.706 107.66 159.783 107.451 159.783 107.236C159.783 107.021 159.706 106.813 159.567 106.649C159.427 106.486 159.234 106.378 159.023 106.345H157.806V108.127ZM163.148 111.258H161.952V105.248H163.148V111.258ZM168.31 106.372H166.687V111.258H165.506V106.372H163.895V105.236H168.304L168.31 106.372ZM168.438 108.247C168.438 107.628 168.62 107.022 168.962 106.506C169.305 105.991 169.791 105.589 170.361 105.352C170.931 105.114 171.557 105.052 172.162 105.174C172.767 105.295 173.322 105.594 173.757 106.032C174.193 106.471 174.489 107.03 174.609 107.638C174.728 108.246 174.665 108.876 174.428 109.448C174.191 110.02 173.791 110.509 173.277 110.852C172.764 111.195 172.16 111.377 171.544 111.375C171.134 111.379 170.728 111.3 170.348 111.143C169.969 110.987 169.625 110.756 169.335 110.464C169.046 110.172 168.817 109.825 168.663 109.444C168.508 109.062 168.431 108.653 168.435 108.241L168.438 108.247ZM173.478 108.241C173.473 107.858 173.355 107.485 173.139 107.169C172.923 106.853 172.619 106.608 172.266 106.465C171.912 106.322 171.524 106.287 171.15 106.365C170.777 106.443 170.435 106.63 170.167 106.903C169.899 107.176 169.718 107.523 169.645 107.899C169.573 108.275 169.613 108.665 169.76 109.018C169.907 109.372 170.155 109.674 170.472 109.887C170.79 110.099 171.163 110.213 171.544 110.213C171.802 110.218 172.058 110.17 172.296 110.072C172.535 109.975 172.751 109.829 172.932 109.645C173.113 109.46 173.255 109.241 173.349 108.999C173.442 108.758 173.486 108.5 173.478 108.241ZM176.766 111.246H175.585V105.236H176.766V111.246ZM180.054 109.143H179.157V111.246H177.961V105.236H180.353C180.614 105.235 180.873 105.286 181.115 105.386C181.357 105.485 181.577 105.632 181.762 105.818C181.947 106.003 182.094 106.223 182.195 106.466C182.295 106.709 182.346 106.969 182.346 107.232C182.34 107.604 182.228 107.967 182.024 108.278C181.819 108.589 181.531 108.835 181.193 108.987L182.529 111.258H181.244L180.054 109.143ZM179.157 108.103H180.374C180.585 108.07 180.778 107.962 180.918 107.799C181.057 107.636 181.134 107.427 181.134 107.212C181.134 106.997 181.057 106.789 180.918 106.625C180.778 106.462 180.585 106.354 180.374 106.321H179.157V108.103ZM186.983 110.098V111.234H183.3V105.224H186.962V106.36H184.481V107.64H186.749V108.761H184.481V110.11L186.983 110.098ZM187.634 109.867L188.644 109.266C188.732 109.554 188.914 109.805 189.16 109.978C189.406 110.15 189.702 110.235 190.002 110.219C190.713 110.219 190.961 109.918 190.961 109.582C190.961 109.134 190.557 108.963 189.667 108.704C188.776 108.446 187.873 108.049 187.873 106.901C187.873 105.753 188.815 105.098 189.843 105.098C190.293 105.086 190.736 105.208 191.117 105.449C191.497 105.69 191.799 106.038 191.983 106.45L190.991 107.027C190.9 106.795 190.739 106.598 190.532 106.461C190.324 106.325 190.079 106.257 189.831 106.267C189.335 106.267 189.042 106.526 189.042 106.868C189.042 107.211 189.275 107.436 190.181 107.709C191.131 108.01 192.142 108.331 192.142 109.56C192.142 110.687 191.245 111.378 189.969 111.378C188.743 111.378 187.939 110.777 187.613 109.876" fill="white"/>
+<path d="M182.424 96.6275V102.562H182.003V101.58C181.831 101.912 181.57 102.189 181.249 102.381C180.928 102.572 180.561 102.669 180.188 102.661C179.605 102.661 179.045 102.428 178.633 102.014C178.22 101.599 177.988 101.036 177.988 100.45C177.988 99.8632 178.22 99.3007 178.633 98.8859C179.045 98.4712 179.605 98.2382 180.188 98.2382C180.56 98.23 180.927 98.3264 181.248 98.5164C181.568 98.7064 181.83 98.9826 182.003 99.3139V96.6275H182.424ZM182.003 100.444C182.003 100.087 181.898 99.7386 181.7 99.4421C181.503 99.1456 181.223 98.9145 180.896 98.7781C180.568 98.6416 180.207 98.6059 179.859 98.6755C179.511 98.745 179.192 98.9167 178.941 99.1689C178.69 99.421 178.519 99.7423 178.45 100.092C178.381 100.442 178.417 100.804 178.552 101.134C178.688 101.463 178.918 101.745 179.213 101.943C179.508 102.141 179.855 102.247 180.209 102.247C180.446 102.25 180.68 102.205 180.899 102.115C181.118 102.026 181.317 101.893 181.484 101.725C181.651 101.557 181.783 101.357 181.872 101.137C181.961 100.917 182.005 100.681 182.003 100.444ZM187.981 100.459C187.981 100.528 187.981 100.597 187.981 100.663H184.17C184.205 101.11 184.412 101.526 184.747 101.822C185.081 102.118 185.518 102.271 185.963 102.25C186.253 102.265 186.542 102.202 186.798 102.066C187.055 101.93 187.271 101.727 187.422 101.477L187.793 101.697C187.595 102.005 187.321 102.256 186.998 102.426C186.675 102.595 186.313 102.676 185.948 102.661C185.654 102.675 185.361 102.627 185.086 102.52C184.811 102.414 184.561 102.251 184.352 102.043C184.143 101.835 183.98 101.585 183.872 101.31C183.763 101.034 183.713 100.739 183.724 100.444C183.714 100.152 183.763 99.8608 183.869 99.5888C183.975 99.3168 184.136 99.0695 184.34 98.8622C184.545 98.6549 184.79 98.492 185.06 98.3837C185.33 98.2753 185.619 98.2237 185.909 98.2321C187.189 98.2321 188.002 99.2989 188.002 100.459H187.981ZM184.176 100.248H187.565C187.556 99.8169 187.378 99.4064 187.071 99.1052C186.764 98.804 186.351 98.6361 185.921 98.6378C185.476 98.6231 185.044 98.7845 184.716 99.0875C184.388 99.3904 184.192 99.8105 184.17 100.257L184.176 100.248ZM192.073 101.459C192.073 102.157 191.475 102.661 190.563 102.661C189.72 102.661 189.165 102.262 188.964 101.721L189.326 101.507C189.478 101.967 189.924 102.256 190.563 102.256C191.203 102.256 191.651 101.991 191.651 101.456C191.651 100.306 189.099 100.967 189.099 99.4401C189.099 98.77 189.67 98.2382 190.531 98.2382C190.826 98.2205 191.121 98.2917 191.376 98.4425C191.632 98.5934 191.837 98.8172 191.965 99.0855L191.61 99.2869C191.516 99.0822 191.363 98.911 191.17 98.7961C190.977 98.6812 190.754 98.6281 190.531 98.6438C189.984 98.6438 189.52 98.9443 189.52 99.4401C189.52 100.576 192.073 99.9059 192.073 101.456V101.459ZM146.229 100.949C146.23 101.161 146.189 101.371 146.109 101.567C146.028 101.763 145.91 101.941 145.761 102.091C145.612 102.241 145.435 102.36 145.239 102.441C145.044 102.522 144.835 102.563 144.624 102.562H142.083V96.6516H144.43C144.84 96.6524 145.234 96.8166 145.524 97.1083C145.814 97.4001 145.977 97.7955 145.978 98.2081C145.982 98.4728 145.913 98.7336 145.78 98.9619C145.647 99.1902 145.454 99.3775 145.222 99.5032C145.518 99.6131 145.773 99.8114 145.953 100.071C146.133 100.331 146.229 100.641 146.229 100.958V100.949ZM142.529 97.0662V99.3319H144.43C144.729 99.3319 145.015 99.2126 145.227 99.0001C145.438 98.7877 145.557 98.4995 145.557 98.1991C145.557 97.8986 145.438 97.6105 145.227 97.398C145.015 97.1856 144.729 97.0662 144.43 97.0662H142.529ZM145.784 100.949C145.787 100.793 145.76 100.638 145.703 100.493C145.646 100.348 145.561 100.216 145.454 100.104C145.346 99.9926 145.217 99.9034 145.075 99.842C144.932 99.7806 144.779 99.7482 144.624 99.7466H142.532V102.133H144.624C144.779 102.131 144.932 102.098 145.074 102.036C145.216 101.975 145.345 101.886 145.453 101.774C145.56 101.662 145.645 101.53 145.702 101.385C145.759 101.241 145.787 101.086 145.784 100.931V100.949ZM150.883 101.039H147.93L147.356 102.541H146.887L149.174 96.6516H149.649L151.93 102.571H151.442L150.883 101.039ZM150.722 100.618L149.41 97.1924L148.098 100.636L150.722 100.618ZM157.268 96.6516V102.571H156.873L153.397 97.4719V102.562H152.952V96.6516H153.34L156.823 101.76V96.6516H157.268ZM165.85 100.585V96.6516H166.295V100.585C166.295 101.55 166.893 102.226 168.005 102.226C169.117 102.226 169.721 101.55 169.721 100.585V96.6516H170.166V100.585C170.166 101.835 169.299 102.655 168.005 102.655C166.711 102.655 165.85 101.835 165.85 100.585ZM175.056 102.142V102.562H171.708V96.6516H175.056V97.0753H172.154V99.356H174.844V99.7797H172.154V102.133L175.056 102.142ZM164.633 99.6024C164.632 98.9984 164.453 98.4084 164.118 97.9069C163.783 97.4055 163.308 97.0151 162.752 96.7852C162.197 96.5553 161.586 96.4963 160.997 96.6155C160.408 96.7347 159.867 97.0268 159.444 97.4549C159.02 97.883 158.732 98.4279 158.616 99.0205C158.5 99.6132 158.562 100.227 158.794 100.784C159.025 101.342 159.416 101.818 159.916 102.152C160.417 102.486 161.004 102.663 161.605 102.661C162.104 102.661 162.596 102.538 163.037 102.304L162.711 101.982C162.366 102.147 161.988 102.232 161.605 102.232C161.088 102.235 160.582 102.084 160.151 101.798C159.719 101.512 159.382 101.104 159.182 100.625C158.981 100.146 158.927 99.6178 159.026 99.1078C159.124 98.5977 159.372 98.1286 159.736 97.7599C160.1 97.3912 160.565 97.1396 161.072 97.0369C161.578 96.9342 162.104 96.9851 162.582 97.1831C163.06 97.3811 163.468 97.7173 163.756 98.1491C164.043 98.5809 164.197 99.0888 164.197 99.6084C164.195 99.9609 164.124 100.31 163.987 100.634C163.85 100.959 163.65 101.253 163.399 101.498L162.045 100.167L161.746 100.447L164.484 103.175L164.783 102.896L163.707 101.802C164 101.516 164.233 101.175 164.392 100.797C164.551 100.419 164.633 100.013 164.633 99.6024Z" fill="white"/>
+<path d="M123.285 110.138L121.333 109.044V98.9533L126.277 96.1858L128.277 97.3096L123.282 100.104L123.285 110.138ZM135.301 106.769L137.235 105.666V98.9533L129.284 94.5L127.279 95.6238L135.301 100.104V106.769ZM129.284 111.255L124.26 108.44V110.684L129.284 113.497L137.235 109.044V106.799L129.284 111.255Z" fill="white"/>
+</g>
+<path d="M229.528 100.974H230.229V99.5141H231.345V98.9359H230.229V98.1225H231.542V97.5443H229.528V100.974Z" fill="white"/>
+<path d="M232.209 100.974H232.91V99.5876H233.27L234.193 100.974H235.018L233.937 99.4553C234.292 99.2936 234.495 98.9849 234.495 98.5684C234.495 97.9314 234.026 97.5443 233.265 97.5443H232.209V100.974ZM233.305 98.1225C233.601 98.1225 233.774 98.2989 233.774 98.5586C233.774 98.8379 233.601 99.0094 233.305 99.0094H232.91V98.1225H233.305Z" fill="white"/>
+<path d="M235.227 100.974H235.972L236.303 100.082H237.685L238.016 100.974H238.762L237.453 97.5443H236.535L235.227 100.974ZM236.52 99.4896L236.994 98.2009L237.468 99.4896H236.52Z" fill="white"/>
+<path d="M239.345 100.974H240.046V98.4949L241.592 100.974H242.49V97.5443H241.789V100.024L240.244 97.5443H239.345V100.974Z" fill="white"/>
+<path d="M245.047 100.421C244.395 100.421 243.931 99.9159 243.931 99.2593C243.931 98.6027 244.395 98.098 245.047 98.098C245.442 98.098 245.753 98.2891 245.95 98.5684L246.503 98.1421C246.187 97.7256 245.674 97.4463 245.047 97.4463C243.956 97.4463 243.21 98.2793 243.21 99.2593C243.21 100.239 243.956 101.072 245.047 101.072C245.674 101.072 246.187 100.798 246.503 100.372L245.95 99.9502C245.753 100.229 245.442 100.421 245.047 100.421Z" fill="white"/>
+<path d="M247.161 100.974H249.176V100.396H247.862V99.5141H248.978V98.9359H247.862V98.1225H249.176V97.5443H247.161V100.974Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M243.052 108.693C243.933 107.897 244.486 106.75 244.486 105.474C244.486 104.199 243.933 103.052 243.052 102.256C243.295 102.401 243.52 102.572 243.724 102.765C244.297 103.519 244.637 104.457 244.637 105.474C244.637 106.492 244.297 107.43 243.724 108.184C243.52 108.377 243.295 108.548 243.052 108.693ZM241.585 109.195C243.078 108.609 244.134 107.164 244.134 105.474C244.134 103.785 243.078 102.34 241.585 101.754C241.43 101.734 241.272 101.724 241.111 101.724C241.072 101.724 241.032 101.725 240.993 101.726C242.707 102.125 243.982 103.652 243.982 105.474C243.982 107.297 242.707 108.823 240.993 109.223C241.032 109.224 241.072 109.224 241.111 109.224C241.272 109.224 241.43 109.214 241.585 109.195ZM239.692 101.998C239.827 101.982 239.964 101.974 240.103 101.974C242.051 101.974 243.63 103.541 243.63 105.474C243.63 107.407 242.051 108.974 240.103 108.974C239.964 108.974 239.827 108.966 239.692 108.951C239.513 108.879 239.342 108.794 239.178 108.697C239.472 108.78 239.782 108.824 240.103 108.824C241.967 108.824 243.479 107.325 243.479 105.474C243.479 103.624 241.967 102.124 240.103 102.124C239.782 102.124 239.472 102.169 239.178 102.252C239.342 102.155 239.513 102.07 239.692 101.998ZM238.057 107.682C237.879 107.44 237.729 107.177 237.613 106.896C238.109 107.75 239.039 108.324 240.103 108.324C241.689 108.324 242.975 107.048 242.975 105.474C242.975 103.9 241.689 102.624 240.103 102.624C239.039 102.624 238.109 103.199 237.613 104.053C237.729 103.772 237.879 103.508 238.057 103.266C238.595 102.775 239.314 102.474 240.103 102.474C241.773 102.474 243.126 103.818 243.126 105.474C243.126 107.131 241.773 108.474 240.103 108.474C239.314 108.474 238.595 108.174 238.057 107.682ZM240.103 107.824C241.411 107.824 242.471 106.772 242.471 105.474C242.471 104.176 241.411 103.124 240.103 103.124C238.795 103.124 237.735 104.176 237.735 105.474C237.735 106.772 238.795 107.824 240.103 107.824ZM240.103 107.974C241.494 107.974 242.622 106.855 242.622 105.474C242.622 104.094 241.494 102.974 240.103 102.974C238.712 102.974 237.584 104.094 237.584 105.474C237.584 106.855 238.712 107.974 240.103 107.974ZM241.967 105.474C241.967 106.496 241.133 107.324 240.103 107.324C239.074 107.324 238.239 106.496 238.239 105.474C238.239 104.453 239.074 103.624 240.103 103.624C241.133 103.624 241.967 104.453 241.967 105.474ZM242.119 105.474C242.119 106.579 241.216 107.474 240.103 107.474C238.99 107.474 238.088 106.579 238.088 105.474C238.088 104.37 238.99 103.474 240.103 103.474C241.216 103.474 242.119 104.37 242.119 105.474ZM240.103 106.824C240.854 106.824 241.463 106.22 241.463 105.474C241.463 104.729 240.854 104.124 240.103 104.124C239.351 104.124 238.742 104.729 238.742 105.474C238.742 106.22 239.351 106.824 240.103 106.824ZM240.103 106.974C240.937 106.974 241.614 106.303 241.614 105.474C241.614 104.646 240.937 103.974 240.103 103.974C239.268 103.974 238.591 104.646 238.591 105.474C238.591 106.303 239.268 106.974 240.103 106.974ZM240.959 105.474C240.959 105.944 240.576 106.324 240.103 106.324C239.63 106.324 239.246 105.944 239.246 105.474C239.246 105.005 239.63 104.624 240.103 104.624C240.576 104.624 240.959 105.005 240.959 105.474ZM241.11 105.474C241.11 106.027 240.659 106.474 240.103 106.474C239.546 106.474 239.095 106.027 239.095 105.474C239.095 104.922 239.546 104.474 240.103 104.474C240.659 104.474 241.11 104.922 241.11 105.474ZM240.455 105.474C240.455 105.668 240.297 105.824 240.103 105.824C239.908 105.824 239.75 105.668 239.75 105.474C239.75 105.281 239.908 105.124 240.103 105.124C240.297 105.124 240.455 105.281 240.455 105.474ZM240.607 105.474C240.607 105.751 240.381 105.974 240.103 105.974C239.824 105.974 239.599 105.751 239.599 105.474C239.599 105.198 239.824 104.974 240.103 104.974C240.381 104.974 240.607 105.198 240.607 105.474Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M246.556 101.881C245.974 102.09 245.529 102.499 245.204 103.062L245.301 103.126L246.556 101.881ZM245.73 103.408L245.474 103.24L246.949 101.775C247.1 101.747 247.259 101.73 247.425 101.726L245.73 103.408ZM246.158 103.69L245.902 103.522L247.707 101.73C247.836 101.739 247.962 101.756 248.082 101.781L246.158 103.69ZM247.612 102.955C247.551 102.945 247.488 102.941 247.423 102.941C247.336 102.941 247.254 102.949 247.176 102.964L248.309 101.84C248.415 101.873 248.517 101.914 248.613 101.961L247.612 102.955ZM246.347 105.625V105.202L246.889 104.664H247.315L246.347 105.625ZM245.227 108.15C245.166 108.071 245.108 107.988 245.052 107.901L246.034 106.926C246.082 107.025 246.132 107.116 246.183 107.201L245.227 108.15ZM245.564 108.522C245.491 108.455 245.422 108.383 245.355 108.307L246.297 107.372C246.359 107.458 246.423 107.535 246.491 107.603L245.564 108.522ZM245.967 108.829C245.88 108.776 245.797 108.718 245.717 108.654L246.642 107.737C246.726 107.801 246.815 107.854 246.909 107.895L245.967 108.829ZM246.449 109.058C246.346 109.022 246.246 108.979 246.151 108.932L247.123 107.967C247.238 107.995 247.359 108.008 247.49 108.008C247.496 108.008 247.501 108.008 247.507 108.008L246.449 109.058ZM247.025 109.194C246.901 109.178 246.782 109.154 246.668 109.125L247.838 107.965C248.216 107.865 248.497 107.6 248.59 107.218L249.731 106.086C249.778 106.184 249.817 106.286 249.847 106.393L247.025 109.194ZM247.714 109.217C247.643 109.222 247.572 109.224 247.499 109.224C247.427 109.224 247.356 109.222 247.287 109.219L249.899 106.626C249.918 106.745 249.928 106.868 249.928 106.995C249.928 107.003 249.928 107.012 249.928 107.02L247.714 109.217ZM248.658 108.988C248.468 109.074 248.261 109.138 248.042 109.177L249.906 107.327C249.878 107.536 249.823 107.73 249.745 107.91L248.658 108.988ZM249.449 105.658C249.516 105.735 249.577 105.816 249.63 105.902L248.623 106.901C248.619 106.772 248.597 106.652 248.557 106.544L249.449 105.658ZM249.071 105.326C249.156 105.384 249.235 105.447 249.308 105.514L248.462 106.354C248.407 106.27 248.339 106.195 248.259 106.132L249.071 105.326ZM248.982 105.13C248.949 105.158 248.915 105.185 248.88 105.211C248.885 105.213 248.889 105.216 248.894 105.218L248.085 106.021C247.99 105.972 247.884 105.935 247.769 105.912L249.593 104.101C249.526 104.413 249.39 104.691 249.19 104.924L248.982 105.13ZM249.625 103.362C249.636 103.449 249.642 103.538 249.642 103.63C249.642 103.678 249.641 103.726 249.638 103.773L247.513 105.881C247.49 105.88 247.466 105.88 247.442 105.88H247.089L249.625 103.362ZM249.468 102.811C249.514 102.909 249.552 103.014 249.58 103.123L246.802 105.88H246.376L247.631 104.635C247.99 104.555 248.249 104.315 248.313 103.958L249.468 102.811ZM249.185 102.385C249.253 102.46 249.314 102.54 249.368 102.626L248.321 103.665C248.308 103.543 248.273 103.435 248.22 103.343L249.185 102.385ZM248.798 102.063C248.885 102.117 248.966 102.177 249.041 102.243L248.096 103.182C248.023 103.112 247.936 103.056 247.837 103.016L248.798 102.063ZM246.603 104.664H246.347V104.918L246.603 104.664ZM245.353 107.318L244.889 107.623C244.908 107.657 244.926 107.69 244.945 107.723L245.353 107.318Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M235.062 101.996C234.947 101.982 234.83 101.974 234.71 101.974C234.574 101.974 234.442 101.982 234.314 101.996L235.062 101.996ZM232.965 102.496C233.135 102.377 233.319 102.276 233.516 102.196L235.78 102.196C235.956 102.276 236.116 102.377 236.258 102.496L232.965 102.496ZM232.409 102.996C232.504 102.889 232.604 102.789 232.71 102.696L236.461 102.696C236.542 102.789 236.613 102.889 236.673 102.996H232.409ZM232.051 103.496L232.042 103.491C232.106 103.388 232.174 103.29 232.246 103.196H234.178C233.978 103.255 233.805 103.357 233.649 103.496H232.051ZM232.891 103.996L232.387 103.696H233.454C233.376 103.787 233.302 103.888 233.23 103.996H232.891ZM235.438 104.496C235.477 104.4 235.503 104.301 235.517 104.196H236.879C236.864 104.299 236.842 104.399 236.813 104.496H235.438ZM235.121 104.996C235.205 104.895 235.278 104.796 235.338 104.696H236.743C236.701 104.799 236.653 104.899 236.598 104.996H235.121ZM234.648 105.496L234.651 105.494C234.756 105.389 234.853 105.291 234.942 105.196H236.476C236.408 105.299 236.334 105.398 236.255 105.496H234.648ZM234.127 105.996L234.44 105.696H236.085C235.994 105.798 235.898 105.898 235.8 105.996H234.127ZM233.606 106.496L233.919 106.196H235.594C235.592 106.199 235.589 106.201 235.587 106.204L235.276 106.496H233.606ZM233.086 106.996L233.398 106.696H235.063L234.745 106.996H233.086ZM232.565 107.496L232.877 107.196H234.532L234.214 107.496H232.565ZM232.261 107.996V107.788L232.357 107.696H234.001L233.904 107.788H237.08V107.996H232.261ZM232.261 108.496V108.196H237.08V108.496H232.261ZM237.08 108.696V108.974H232.261V108.696H237.08ZM236.899 103.996H235.526C235.522 103.887 235.503 103.786 235.471 103.696H236.891C236.897 103.762 236.901 103.83 236.901 103.899C236.901 103.932 236.9 103.964 236.899 103.996ZM236.769 103.196C236.807 103.292 236.838 103.392 236.86 103.496H235.366C235.264 103.356 235.119 103.254 234.944 103.196H236.769Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M254.059 109.223C254.22 109.219 254.378 109.205 254.534 109.181L255.538 102.066C255.444 102.024 255.349 101.985 255.251 101.949L254.483 107.393L254.857 101.831C254.759 101.807 254.66 101.787 254.56 101.772L254.059 109.223ZM253.706 101.733C253.79 101.727 253.874 101.724 253.959 101.724C253.975 101.724 253.99 101.724 254.006 101.725L254.006 109.224C253.99 109.224 253.975 109.224 253.959 109.224C253.874 109.224 253.79 109.222 253.706 109.216L253.706 101.733ZM252.693 101.94C252.79 101.906 252.888 101.876 252.988 101.849L253.482 109.195C253.315 109.174 253.153 109.143 252.994 109.101L252.027 102.251C252.119 102.197 252.213 102.146 252.309 102.1L253.063 107.447L252.693 101.94ZM251.188 102.925C251.267 102.84 251.351 102.758 251.438 102.681L252.964 109.093C252.736 109.031 252.516 108.949 252.307 108.848L250.663 103.638C250.728 103.524 250.798 103.414 250.874 103.308L252.522 108.533L251.188 102.925ZM250.267 104.671C250.302 104.512 250.347 104.357 250.402 104.206L252.285 108.838C252.139 108.766 251.998 108.685 251.863 108.595L250.267 104.671ZM250.255 106.223C250.206 105.981 250.18 105.731 250.18 105.474C250.18 105.454 250.18 105.434 250.18 105.413L251.759 108.524C251.536 108.365 251.33 108.182 251.147 107.979L250.255 106.223ZM257.553 106.635L256.734 108.019C256.411 108.366 256.024 108.652 255.59 108.858L257.669 104.762C257.703 104.937 257.725 105.116 257.733 105.298L256.151 108.416L257.727 105.751C257.705 106.057 257.645 106.353 257.553 106.635ZM257.311 103.743C257.375 103.864 257.432 103.989 257.483 104.118L255.546 108.878C255.235 109.022 254.9 109.124 254.549 109.179L256.157 102.424C256.247 102.488 256.333 102.555 256.417 102.626L255.024 108.479L256.765 102.963C256.845 103.051 256.921 103.143 256.992 103.238L255.178 108.988L257.311 103.743ZM251.013 107.824C250.783 107.539 250.593 107.221 250.453 106.877L251.013 107.824Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M250.367 91.0672C247.784 89.4283 244.689 88.4744 241.363 88.4744C232.32 88.4744 224.988 95.5259 224.988 104.224C224.988 112.923 232.32 119.974 241.363 119.974C244.689 119.974 247.784 119.02 250.367 117.382C247.626 119.327 244.254 120.474 240.607 120.474C231.425 120.474 223.981 113.199 223.981 104.224C223.981 95.2497 231.425 87.9744 240.607 87.9744C244.254 87.9744 247.626 89.1217 250.367 91.0672Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M240.607 91.4744C237.764 91.4744 235.116 92.2497 232.901 93.5834C235.327 91.6404 238.43 90.4744 241.812 90.4744C248.436 90.4744 253.991 94.949 255.485 100.974C254.721 100.974 254.057 100.468 253.76 99.7637C251.712 94.9126 246.596 91.4744 240.607 91.4744ZM254.595 109.974C253.858 109.974 253.194 110.396 252.8 111.018C250.354 114.88 245.809 117.474 240.607 117.474C239.04 117.474 237.532 117.239 236.123 116.804C237.862 117.556 239.787 117.974 241.812 117.974C247.481 117.974 252.368 114.697 254.595 109.974Z" fill="white"/>
+<g clip-path="url(#clip3_3832_18513)">
+<path d="M321.845 99.0431L321.077 98.4949L320.312 99.0431L320.603 98.1583L319.825 97.6121H320.784L321.077 96.7173L321.372 97.6121H322.332L321.554 98.1583L321.845 99.0431ZM320.793 102.937L320.025 102.389L319.258 102.937L319.551 102.052L318.773 101.506H319.732L320.027 100.611L320.322 101.506H321.282L320.504 102.052L320.797 102.937H320.793ZM317.603 91.459L317.894 92.3438L317.128 91.7956L316.361 92.3438L316.652 91.459L315.874 90.9108H316.833L317.126 90.016L317.419 90.9108H318.381L317.603 91.459ZM317.883 105.779L317.116 105.232L316.348 105.779L316.639 104.894L315.861 104.348H316.821L317.116 103.453L317.409 104.348H318.368L317.59 104.894L317.883 105.779ZM313.92 106.809L313.154 106.262L312.387 106.809L312.678 105.924L311.9 105.378H312.859L313.152 104.483L313.445 105.378H314.405L313.627 105.924L313.918 106.809H313.92ZM312.859 89.8709L313.152 88.976L313.445 89.8709H314.405L313.627 90.4171L313.918 91.3018L313.15 90.7556L312.383 91.3018L312.674 90.4171L311.896 89.8709H312.855H312.859ZM309.958 105.779L309.193 105.232L308.425 105.779L308.716 104.894L307.938 104.348H308.898L309.191 103.453L309.484 104.348H310.443L309.665 104.894L309.956 105.779H309.958ZM308.892 90.9129L309.185 90.016L309.478 90.9108H310.437L309.659 91.457L309.95 92.3418L309.185 91.7956L308.417 92.3418L308.708 91.457L307.93 90.9108H308.89L308.892 90.9129ZM306.758 94.3008L307.049 95.1856L306.282 94.6394L305.514 95.1856L305.805 94.3008L305.027 93.7546H305.987L306.28 92.8598L306.573 93.7546H307.532L306.754 94.3008H306.758ZM307.049 102.939L306.282 102.391L305.514 102.939L305.805 102.054L305.027 101.508H305.987L306.28 100.613L306.573 101.508H307.532L306.754 102.054L307.045 102.939H307.049ZM303.965 97.6262H304.924L305.217 96.7314L305.51 97.6262H306.469L305.692 98.1724L305.983 99.0572L305.217 98.511L304.45 99.0572L304.74 98.1724L303.963 97.6262H303.965ZM319.732 93.7465L320.027 92.8497L320.322 93.7445H321.282L320.504 94.2907L320.797 95.1755L320.029 94.6293L319.262 95.1755L319.555 94.2907L318.777 93.7445H319.736L319.732 93.7465ZM294.991 86.1423V109.805H331.328V86.1423H294.991Z" fill="white"/>
+<path d="M303.519 116.545V113.514H305.644V114.028H304.144V114.745H305.44V115.257H304.144V116.545H303.519Z" fill="white"/>
+<path d="M307.636 116.545V116.216C307.553 116.333 307.446 116.426 307.314 116.493C307.18 116.559 307.039 116.593 306.891 116.593C306.742 116.593 306.604 116.561 306.484 116.497C306.365 116.432 306.278 116.341 306.224 116.225C306.171 116.108 306.144 115.946 306.144 115.739V114.35H306.738V115.358C306.738 115.666 306.748 115.856 306.771 115.924C306.794 115.995 306.833 116.049 306.891 116.089C306.948 116.13 307.023 116.15 307.111 116.15C307.213 116.15 307.303 116.124 307.384 116.069C307.464 116.015 307.52 115.948 307.549 115.866C307.578 115.785 307.594 115.588 307.594 115.273V114.348H308.189V116.543H307.636V116.545Z" fill="white"/>
+<path d="M310.848 116.545H310.254V115.425C310.254 115.187 310.241 115.034 310.217 114.965C310.192 114.895 310.151 114.842 310.093 114.804C310.035 114.766 309.967 114.745 309.887 114.745C309.783 114.745 309.691 114.774 309.61 114.828C309.528 114.882 309.472 114.957 309.441 115.048C309.41 115.138 309.395 115.308 309.395 115.552V116.545H308.801V114.35H309.354V114.673C309.55 114.425 309.798 114.302 310.095 114.302C310.227 114.302 310.347 114.324 310.454 114.371C310.563 114.417 310.644 114.475 310.699 114.548C310.755 114.618 310.794 114.701 310.815 114.792C310.838 114.882 310.848 115.013 310.848 115.183V116.547V116.545Z" fill="white"/>
+<path d="M311.923 115.4C311.923 115.634 311.956 115.803 312.022 115.908C312.117 116.059 312.253 116.136 312.424 116.136C312.561 116.136 312.678 116.079 312.773 115.965C312.868 115.852 312.918 115.68 312.918 115.455C312.918 115.203 312.872 115.021 312.777 114.91C312.684 114.8 312.565 114.743 312.42 114.743C312.276 114.743 312.16 114.798 312.065 114.908C311.97 115.017 311.923 115.183 311.923 115.4ZM313.51 116.545H312.957V116.223C312.864 116.347 312.757 116.442 312.633 116.503C312.509 116.563 312.383 116.595 312.255 116.595C311.997 116.595 311.777 116.495 311.593 116.291C311.409 116.087 311.316 115.803 311.316 115.441C311.316 115.078 311.405 114.786 311.585 114.592C311.764 114.399 311.991 114.302 312.263 114.302C312.515 114.302 312.732 114.403 312.915 114.608V113.518H313.51V116.547V116.545Z" fill="white"/>
+<path d="M315.433 115.259C315.428 115.092 315.383 114.963 315.301 114.876C315.216 114.79 315.113 114.745 314.991 114.745C314.861 114.745 314.754 114.792 314.669 114.884C314.585 114.977 314.543 115.102 314.543 115.261H315.433V115.259ZM315.4 115.846L315.992 115.942C315.915 116.154 315.796 116.317 315.631 116.426C315.466 116.537 315.261 116.591 315.014 116.591C314.624 116.591 314.335 116.466 314.147 116.217C313.999 116.017 313.924 115.765 313.924 115.461C313.924 115.098 314.021 114.812 314.217 114.606C314.411 114.401 314.659 114.298 314.956 114.298C315.29 114.298 315.554 114.405 315.748 114.62C315.942 114.836 316.033 115.167 316.025 115.612H314.535C314.539 115.785 314.587 115.918 314.679 116.013C314.77 116.11 314.886 116.156 315.022 116.156C315.115 116.156 315.193 116.132 315.257 116.082C315.321 116.031 315.369 115.953 315.402 115.842L315.4 115.846Z" fill="white"/>
+<path d="M316.98 115.4C316.98 115.634 317.013 115.803 317.079 115.908C317.174 116.059 317.31 116.136 317.481 116.136C317.618 116.136 317.735 116.079 317.83 115.965C317.925 115.852 317.975 115.68 317.975 115.455C317.975 115.203 317.929 115.021 317.834 114.91C317.741 114.8 317.622 114.743 317.477 114.743C317.333 114.743 317.217 114.798 317.122 114.908C317.027 115.017 316.98 115.183 316.98 115.4ZM318.567 116.545H318.014V116.223C317.921 116.347 317.814 116.442 317.69 116.503C317.566 116.563 317.438 116.595 317.312 116.595C317.054 116.595 316.834 116.495 316.648 116.291C316.464 116.087 316.371 115.803 316.371 115.441C316.371 115.078 316.46 114.786 316.64 114.592C316.819 114.399 317.046 114.302 317.318 114.302C317.57 114.302 317.787 114.403 317.97 114.608V113.518H318.565V116.547L318.567 116.545Z" fill="white"/>
+<path d="M320.921 115.4C320.921 115.628 320.958 115.795 321.03 115.904C321.133 116.057 321.269 116.136 321.441 116.136C321.573 116.136 321.684 116.082 321.775 115.971C321.868 115.862 321.913 115.688 321.913 115.453C321.913 115.203 321.866 115.021 321.773 114.911C321.68 114.8 321.56 114.743 321.416 114.743C321.272 114.743 321.156 114.798 321.061 114.904C320.966 115.013 320.919 115.177 320.919 115.398L320.921 115.4ZM320.331 116.545V113.516H320.925V114.606C321.109 114.403 321.325 114.3 321.577 114.3C321.851 114.3 322.076 114.397 322.256 114.59C322.435 114.784 322.524 115.062 322.524 115.424C322.524 115.787 322.433 116.088 322.25 116.291C322.068 116.495 321.845 116.595 321.583 116.595C321.455 116.595 321.329 116.565 321.203 116.501C321.08 116.438 320.97 116.346 320.882 116.223V116.545H320.329H320.331Z" fill="white"/>
+<path d="M322.722 114.35H323.356L323.894 115.908L324.418 114.35H325.033L324.241 116.462L324.098 116.845C324.047 116.974 323.997 117.071 323.95 117.139C323.902 117.208 323.849 117.262 323.787 117.305C323.725 117.347 323.651 117.379 323.56 117.403C323.471 117.428 323.37 117.438 323.257 117.438C323.143 117.438 323.03 117.426 322.92 117.403L322.867 116.95C322.959 116.968 323.044 116.976 323.118 116.976C323.257 116.976 323.36 116.936 323.426 116.857C323.492 116.779 323.543 116.678 323.578 116.555L322.724 114.354L322.722 114.35Z" fill="white"/>
+<path d="M294.308 119.429V119.893H293.902V120.777C293.902 120.957 293.906 121.062 293.914 121.09C293.923 121.12 293.939 121.144 293.968 121.162C293.995 121.182 294.03 121.191 294.069 121.191C294.125 121.191 294.203 121.172 294.308 121.134L294.36 121.584C294.222 121.642 294.065 121.67 293.89 121.67C293.782 121.67 293.685 121.652 293.599 121.618C293.512 121.584 293.45 121.537 293.409 121.481C293.37 121.424 293.341 121.35 293.326 121.255C293.314 121.187 293.308 121.051 293.308 120.846V119.889H293.035V119.425H293.308V118.99L293.904 118.651V119.425H294.311L294.308 119.429Z" fill="white"/>
+<path d="M295.314 118.593V119.707C295.506 119.488 295.735 119.379 296.001 119.379C296.137 119.379 296.261 119.403 296.372 119.453C296.482 119.504 296.564 119.566 296.62 119.643C296.675 119.719 296.715 119.806 296.733 119.899C296.754 119.991 296.764 120.139 296.764 120.334V121.622H296.17V120.463C296.17 120.233 296.16 120.086 296.137 120.026C296.114 119.963 296.075 119.915 296.017 119.879C295.96 119.842 295.889 119.824 295.803 119.824C295.704 119.824 295.615 119.848 295.539 119.895C295.46 119.941 295.404 120.012 295.367 120.106C295.332 120.201 295.314 120.34 295.314 120.526V121.626H294.719V118.597H295.314V118.593Z" fill="white"/>
+<path d="M298.703 120.338C298.699 120.171 298.654 120.042 298.569 119.955C298.485 119.868 298.381 119.824 298.26 119.824C298.13 119.824 298.022 119.87 297.938 119.963C297.853 120.056 297.812 120.181 297.814 120.34H298.703V120.338ZM298.67 120.924L299.262 121.021C299.186 121.233 299.066 121.394 298.901 121.505C298.736 121.616 298.532 121.672 298.284 121.672C297.895 121.672 297.606 121.547 297.418 121.297C297.269 121.098 297.195 120.846 297.195 120.542C297.195 120.179 297.292 119.893 297.488 119.687C297.682 119.481 297.93 119.379 298.227 119.379C298.561 119.379 298.825 119.487 299.017 119.701C299.211 119.917 299.302 120.247 299.293 120.693H297.804C297.808 120.866 297.855 120.999 297.948 121.094C298.039 121.191 298.154 121.237 298.291 121.237C298.384 121.237 298.462 121.213 298.526 121.162C298.59 121.112 298.637 121.033 298.67 120.922V120.924Z" fill="white"/>
+<path d="M300.985 121.624V118.593H303.286V119.107H301.613V119.778H303.168V120.288H301.613V121.112H303.346V121.624H300.985Z" fill="white"/>
+<path d="M305.351 121.624V121.295C305.269 121.412 305.162 121.505 305.029 121.571C304.895 121.638 304.755 121.672 304.607 121.672C304.458 121.672 304.32 121.64 304.2 121.575C304.08 121.511 303.994 121.42 303.94 121.303C303.886 121.186 303.86 121.025 303.86 120.818V119.429H304.454V120.437C304.454 120.745 304.464 120.935 304.487 121.003C304.51 121.074 304.549 121.128 304.607 121.168C304.664 121.209 304.739 121.229 304.827 121.229C304.928 121.229 305.019 121.203 305.1 121.148C305.18 121.094 305.236 121.027 305.265 120.945C305.294 120.864 305.31 120.666 305.31 120.352V119.427H305.904V121.622H305.351V121.624Z" fill="white"/>
+<path d="M307.086 121.624H306.492V119.429H307.045V119.741C307.14 119.594 307.225 119.498 307.301 119.449C307.377 119.403 307.462 119.379 307.559 119.379C307.695 119.379 307.825 119.415 307.951 119.487L307.767 119.993C307.666 119.931 307.573 119.899 307.489 119.899C307.404 119.899 307.334 119.921 307.276 119.965C307.218 120.009 307.173 120.09 307.14 120.207C307.107 120.324 307.091 120.57 307.091 120.943V121.62L307.086 121.624Z" fill="white"/>
+<path d="M308.677 120.525C308.677 120.743 308.731 120.91 308.836 121.025C308.941 121.14 309.073 121.199 309.228 121.199C309.383 121.199 309.513 121.14 309.618 121.025C309.723 120.91 309.775 120.741 309.775 120.521C309.775 120.302 309.723 120.14 309.618 120.026C309.513 119.911 309.383 119.852 309.228 119.852C309.073 119.852 308.943 119.911 308.836 120.026C308.731 120.14 308.677 120.308 308.677 120.525ZM308.069 120.495C308.069 120.302 308.118 120.116 308.215 119.935C308.312 119.756 308.45 119.616 308.628 119.522C308.805 119.427 309.005 119.379 309.226 119.379C309.567 119.379 309.845 119.487 310.062 119.701C310.278 119.917 310.388 120.189 310.388 120.519C310.388 120.85 310.278 121.126 310.06 121.346C309.841 121.563 309.564 121.672 309.232 121.672C309.026 121.672 308.83 121.626 308.642 121.535C308.454 121.444 308.314 121.311 308.215 121.136C308.118 120.961 308.069 120.747 308.069 120.495Z" fill="white"/>
+<path d="M311.424 120.489C311.424 120.735 311.473 120.919 311.574 121.036C311.675 121.152 311.797 121.213 311.94 121.213C312.082 121.213 312.193 121.158 312.284 121.052C312.375 120.943 312.422 120.765 312.422 120.52C312.422 120.29 312.375 120.119 312.28 120.008C312.185 119.897 312.067 119.84 311.929 119.84C311.791 119.84 311.663 119.895 311.568 120.006C311.473 120.114 311.424 120.278 311.424 120.491V120.489ZM310.836 119.429H311.391V119.752C311.463 119.641 311.56 119.552 311.682 119.484C311.803 119.415 311.94 119.381 312.09 119.381C312.35 119.381 312.573 119.48 312.755 119.681C312.936 119.881 313.027 120.159 313.027 120.516C313.027 120.872 312.936 121.167 312.752 121.37C312.569 121.574 312.346 121.674 312.086 121.674C311.962 121.674 311.849 121.65 311.75 121.602C311.649 121.553 311.543 121.471 311.432 121.354V122.46H310.838V119.431L310.836 119.429Z" fill="white"/>
+<path d="M314.832 120.338C314.828 120.171 314.782 120.042 314.698 119.955C314.613 119.868 314.51 119.824 314.388 119.824C314.258 119.824 314.151 119.87 314.067 119.963C313.982 120.056 313.941 120.181 313.943 120.34H314.832V120.338ZM314.799 120.924L315.391 121.021C315.315 121.233 315.195 121.394 315.03 121.505C314.865 121.616 314.661 121.672 314.413 121.672C314.023 121.672 313.734 121.547 313.547 121.297C313.398 121.098 313.324 120.846 313.324 120.542C313.324 120.179 313.421 119.893 313.617 119.687C313.811 119.481 314.058 119.379 314.355 119.379C314.69 119.379 314.954 119.487 315.148 119.701C315.342 119.917 315.432 120.247 315.424 120.693H313.934C313.939 120.866 313.986 120.999 314.079 121.094C314.17 121.191 314.285 121.237 314.421 121.237C314.514 121.237 314.593 121.213 314.657 121.162C314.721 121.112 314.768 121.033 314.801 120.922L314.799 120.924Z" fill="white"/>
+<path d="M317.147 120.57C317.071 120.594 316.951 120.624 316.786 120.658C316.621 120.693 316.514 120.727 316.462 120.759C316.384 120.814 316.347 120.882 316.347 120.965C316.347 121.047 316.377 121.116 316.439 121.176C316.501 121.235 316.58 121.265 316.677 121.265C316.784 121.265 316.887 121.231 316.984 121.162C317.056 121.11 317.104 121.045 317.126 120.971C317.141 120.92 317.149 120.828 317.149 120.689V120.574L317.147 120.57ZM316.351 120.098L315.812 120.003C315.872 119.792 315.977 119.635 316.126 119.532C316.274 119.429 316.493 119.379 316.786 119.379C317.052 119.379 317.248 119.409 317.378 119.471C317.508 119.532 317.599 119.61 317.653 119.705C317.706 119.8 317.731 119.973 317.731 120.225L317.725 120.902C317.725 121.096 317.735 121.237 317.754 121.33C317.772 121.42 317.807 121.519 317.861 121.624H317.273C317.258 121.586 317.238 121.527 317.215 121.453C317.205 121.418 317.199 121.396 317.195 121.384C317.093 121.481 316.984 121.553 316.869 121.602C316.753 121.65 316.629 121.674 316.497 121.674C316.266 121.674 316.084 121.612 315.95 121.491C315.816 121.368 315.75 121.213 315.75 121.025C315.75 120.902 315.781 120.791 315.841 120.693C315.901 120.596 315.988 120.521 316.097 120.469C316.206 120.417 316.363 120.372 316.569 120.334C316.848 120.284 317.04 120.235 317.147 120.191V120.132C317.147 120.022 317.118 119.941 317.062 119.895C317.007 119.846 316.899 119.824 316.743 119.824C316.637 119.824 316.555 119.844 316.495 119.885C316.435 119.925 316.388 119.997 316.351 120.098Z" fill="white"/>
+<path d="M320.362 121.624H319.767V120.503C319.767 120.266 319.755 120.112 319.73 120.044C319.706 119.973 319.664 119.921 319.607 119.881C319.549 119.842 319.481 119.822 319.4 119.822C319.297 119.822 319.204 119.85 319.124 119.905C319.041 119.959 318.986 120.032 318.955 120.124C318.924 120.215 318.909 120.384 318.909 120.628V121.622H318.315V119.427H318.868V119.75C319.064 119.502 319.312 119.377 319.609 119.377C319.741 119.377 319.86 119.399 319.968 119.445C320.077 119.492 320.157 119.55 320.213 119.623C320.269 119.695 320.308 119.776 320.329 119.866C320.351 119.957 320.362 120.088 320.362 120.257V121.622V121.624Z" fill="white"/>
+<path d="M322.167 118.593H322.794V120.233C322.794 120.493 322.802 120.662 322.817 120.739C322.844 120.862 322.908 120.963 323.009 121.037C323.11 121.112 323.248 121.15 323.421 121.15C323.595 121.15 323.733 121.114 323.824 121.043C323.915 120.973 323.968 120.886 323.987 120.781C324.005 120.679 324.014 120.507 324.014 120.267V118.591H324.641V120.183C324.641 120.546 324.624 120.804 324.589 120.955C324.556 121.106 324.492 121.231 324.402 121.336C324.311 121.438 324.189 121.521 324.036 121.581C323.884 121.644 323.686 121.674 323.44 121.674C323.145 121.674 322.92 121.64 322.767 121.573C322.615 121.507 322.493 121.42 322.404 121.313C322.316 121.207 322.258 121.094 322.229 120.977C322.188 120.804 322.167 120.548 322.167 120.209V118.593Z" fill="white"/>
+<path d="M327.339 121.624H326.745V120.503C326.745 120.266 326.733 120.112 326.708 120.044C326.683 119.973 326.642 119.921 326.584 119.881C326.526 119.842 326.458 119.822 326.378 119.822C326.275 119.822 326.182 119.85 326.101 119.905C326.019 119.959 325.963 120.032 325.934 120.124C325.903 120.215 325.889 120.384 325.889 120.628V121.622H325.295V119.427H325.848V119.75C326.044 119.502 326.291 119.377 326.588 119.377C326.718 119.377 326.84 119.399 326.947 119.445C327.057 119.492 327.139 119.55 327.193 119.623C327.249 119.695 327.288 119.776 327.31 119.866C327.331 119.957 327.344 120.088 327.344 120.257V121.622L327.339 121.624Z" fill="white"/>
+<path d="M327.944 121.624V119.429H328.538V121.624H327.944ZM327.944 119.131V118.593H328.538V119.131H327.944Z" fill="white"/>
+<path d="M329.62 120.525C329.62 120.743 329.673 120.91 329.778 121.025C329.884 121.14 330.016 121.199 330.17 121.199C330.325 121.199 330.455 121.14 330.56 121.025C330.666 120.91 330.717 120.741 330.717 120.521C330.717 120.302 330.666 120.14 330.56 120.026C330.455 119.911 330.325 119.852 330.17 119.852C330.016 119.852 329.886 119.911 329.778 120.026C329.673 120.14 329.62 120.308 329.62 120.525ZM329.011 120.495C329.011 120.302 329.06 120.116 329.157 119.935C329.254 119.756 329.393 119.616 329.57 119.522C329.75 119.427 329.948 119.379 330.168 119.379C330.509 119.379 330.787 119.487 331.004 119.701C331.221 119.917 331.33 120.189 331.33 120.519C331.33 120.85 331.221 121.126 331 121.346C330.781 121.563 330.505 121.672 330.172 121.672C329.966 121.672 329.77 121.626 329.582 121.535C329.397 121.444 329.252 121.311 329.155 121.136C329.058 120.961 329.009 120.747 329.009 120.495H329.011Z" fill="white"/>
+<path d="M333.837 121.624H333.243V120.503C333.243 120.266 333.23 120.112 333.206 120.044C333.181 119.973 333.14 119.921 333.082 119.881C333.024 119.842 332.956 119.822 332.875 119.822C332.772 119.822 332.679 119.85 332.599 119.905C332.516 119.959 332.461 120.032 332.432 120.124C332.401 120.215 332.386 120.384 332.386 120.628V121.622H331.792V119.427H332.345V119.75C332.541 119.502 332.789 119.377 333.086 119.377C333.218 119.377 333.338 119.399 333.445 119.445C333.554 119.492 333.637 119.55 333.69 119.623C333.746 119.695 333.785 119.776 333.806 119.866C333.827 119.957 333.839 120.088 333.839 120.257V121.622L333.837 121.624Z" fill="white"/>
</g>
</g>
<defs>
-<clipPath id="clip0_627_41819">
-<rect width="360" height="127" fill="white"/>
+<clipPath id="clip0_3832_18513">
+<rect width="360" height="124" fill="white"/>
+</clipPath>
+<clipPath id="clip1_3832_18513">
+<rect width="68" height="34" fill="white" transform="translate(24 87)"/>
</clipPath>
-<clipPath id="clip1_627_41819">
-<rect width="92.5" height="25" fill="white" transform="translate(123 83)"/>
+<clipPath id="clip2_3832_18513">
+<rect width="71" height="19" fill="white" transform="translate(121.333 94.5)"/>
</clipPath>
-<clipPath id="clip2_627_41819">
-<rect width="68.4444" height="35" fill="white" transform="translate(13 78)"/>
+<clipPath id="clip3_3832_18513">
+<rect width="45" height="37" fill="white" transform="translate(291 85.5)"/>
</clipPath>
</defs>
</svg>
diff --git a/src/components/Action/ActionBegin/ActionBegin.spec.tsx b/src/components/Action/ActionBegin/ActionBegin.spec.tsx
index 68c77e405bf58032d455c5e847fa934e0987fa9b..f4e0ba50d1ed2e4016e6142ab11685a0f3bf6ede 100644
--- a/src/components/Action/ActionBegin/ActionBegin.spec.tsx
+++ b/src/components/Action/ActionBegin/ActionBegin.spec.tsx
@@ -1,6 +1,5 @@
-import { Button } from '@material-ui/core'
-import { mount } from 'enzyme'
-import toJson from 'enzyme-to-json'
+import { render, screen, waitFor } from '@testing-library/react'
+import { userEvent } from '@testing-library/user-event'
import React from 'react'
import { Provider } from 'react-redux'
import {
@@ -13,18 +12,14 @@ import {
mockGlobalState,
mockProfileState,
} from 'tests/__mocks__/store'
-import { waitForComponentToPaint } from 'tests/__mocks__/testUtils'
import { userChallengeData } from 'tests/__mocks__/userChallengeData.mock'
-import ActionModal from '../ActionModal/ActionModal'
import ActionBegin from './ActionBegin'
-const mockgetCustomActions = jest.fn()
-const mockgetDefaultActions = jest.fn()
+const mockGetCustomActions = jest.fn()
jest.mock('services/action.service', () => {
return jest.fn(() => ({
- getCustomActions: mockgetCustomActions,
- getDefaultActions: mockgetDefaultActions,
+ getCustomActions: mockGetCustomActions,
}))
})
@@ -35,7 +30,7 @@ describe('ActionBegin component', () => {
profile: mockProfileState,
})
- const wrapper = mount(
+ const { container } = render(
<Provider store={store}>
<ActionBegin
action={defaultEcogestureData[1]}
@@ -44,11 +39,11 @@ describe('ActionBegin component', () => {
/>
</Provider>
)
- await waitForComponentToPaint(wrapper)
- expect(toJson(wrapper)).toMatchSnapshot()
+ await waitFor(() => null, { container })
+ expect(container).toMatchSnapshot()
})
it('should render correctly with custom action', async () => {
- mockgetCustomActions.mockResolvedValue([
+ mockGetCustomActions.mockResolvedValue([
AllEcogestureData[0],
AllEcogestureData[5],
AllEcogestureData[2],
@@ -57,7 +52,7 @@ describe('ActionBegin component', () => {
global: { ...mockGlobalState, fluidTypes: [0, 1, 2] },
profile: { ...mockProfileState, isProfileTypeCompleted: true },
})
- const wrapper = mount(
+ const { container } = render(
<Provider store={store}>
<ActionBegin
action={mockedEcogesturesData[1]}
@@ -66,26 +61,9 @@ describe('ActionBegin component', () => {
/>
</Provider>
)
- await waitForComponentToPaint(wrapper)
- expect(wrapper.find('.action-title').text()).toBe('Coup de vent')
- })
- it('should render chosen action', async () => {
- const store = createMockEcolyoStore({
- global: { ...mockGlobalState, fluidTypes: [0, 1, 2] },
- profile: mockProfileState,
- })
-
- const wrapper = mount(
- <Provider store={store}>
- <ActionBegin
- action={defaultEcogestureData[1]}
- setShowList={jest.fn()}
- userChallenge={userChallengeData[1]}
- />
- </Provider>
- )
- await waitForComponentToPaint(wrapper)
- expect(wrapper.find(ActionBegin).exists()).toBeTruthy()
+ await waitFor(() => null, { container })
+ const title = screen.getByRole('heading')
+ expect(title).toHaveTextContent('Coup de vent')
})
it('should open launch Modal', async () => {
const store = createMockEcolyoStore({
@@ -93,27 +71,7 @@ describe('ActionBegin component', () => {
profile: mockProfileState,
})
- const wrapper = mount(
- <Provider store={store}>
- <ActionBegin
- action={defaultEcogestureData[1]}
- setShowList={jest.fn()}
- userChallenge={userChallengeData[1]}
- />
- </Provider>
- )
- await waitForComponentToPaint(wrapper)
- wrapper.find(Button).first().simulate('click')
- expect(wrapper.find(ActionModal).exists()).toBeTruthy()
- expect(wrapper.find(ActionModal).prop('open')).toBeTruthy()
- })
- it('should go to the list', async () => {
- const store = createMockEcolyoStore({
- global: { ...mockGlobalState, fluidTypes: [0, 1, 2] },
- profile: mockProfileState,
- })
-
- const wrapper = mount(
+ render(
<Provider store={store}>
<ActionBegin
action={defaultEcogestureData[1]}
@@ -122,7 +80,7 @@ describe('ActionBegin component', () => {
/>
</Provider>
)
- await waitForComponentToPaint(wrapper)
- wrapper.find(Button).at(1).simulate('click')
+ await userEvent.click(await screen.findByText('action.apply'))
+ expect(await screen.findByRole('dialog')).toBeInTheDocument()
})
})
diff --git a/src/components/Action/ActionBegin/ActionBegin.tsx b/src/components/Action/ActionBegin/ActionBegin.tsx
index c2a39a4a75c3bbb6cc19f34611bad7e687b4523a..50281d6965e06d6d98e6d0653ae37a159d685318 100644
--- a/src/components/Action/ActionBegin/ActionBegin.tsx
+++ b/src/components/Action/ActionBegin/ActionBegin.tsx
@@ -3,7 +3,7 @@ import defaultIcon from 'assets/icons/visu/ecogesture/default.svg'
import ActionModal from 'components/Action/ActionModal/ActionModal'
import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
import StarsContainer from 'components/CommonKit/StarsContainer/StarsContainer'
-import { Client, useClient } from 'cozy-client'
+import { useClient } from 'cozy-client'
import { useI18n } from 'cozy-ui/transpiled/react/I18n'
import { Ecogesture, UserChallenge } from 'models'
import React, { useCallback, useEffect, useState } from 'react'
@@ -23,8 +23,8 @@ const ActionBegin = ({
setShowList,
userChallenge,
}: ActionBeginProps) => {
- const client: Client = useClient()
const { t } = useI18n()
+ const client = useClient()
const {
global: { fluidTypes },
profile: { isProfileTypeCompleted },
@@ -87,9 +87,7 @@ const ActionBegin = ({
result={userChallenge.progress.actionProgress}
isQuizBegin={true}
/>
- <div className="action-title text-20-bold">
- {currentAction.shortName}
- </div>
+ <h1 className="text-20-bold">{currentAction.shortName}</h1>
<div className="action-duration text-18">
{t('action.duration', {
smartCount: currentAction.actionDuration,
@@ -99,21 +97,12 @@ const ActionBegin = ({
{currentAction.actionName}
</div>
<div className="action-buttons">
- <Button
- onClick={toggleLaunchModal}
- classes={{
- root: 'btn-secondary-negative',
- label: 'text-16-normal',
- }}
- >
+ <Button onClick={toggleLaunchModal} className="btnSecondary">
{t('action.apply')}
</Button>
<Button
onClick={() => setShowList(true)}
- classes={{
- root: 'btn-secondary-negative',
- label: 'text-16-normal',
- }}
+ className="btnSecondary"
>
{t('action.other')}
</Button>
diff --git a/src/components/Action/ActionBegin/__snapshots__/ActionBegin.spec.tsx.snap b/src/components/Action/ActionBegin/__snapshots__/ActionBegin.spec.tsx.snap
index 72c90f35e2cbce3c8ffb4a40d599b0ffc929dc63..8bf9c264ef663084bce0d1a421a4ecc092f8ae3b 100644
--- a/src/components/Action/ActionBegin/__snapshots__/ActionBegin.spec.tsx.snap
+++ b/src/components/Action/ActionBegin/__snapshots__/ActionBegin.spec.tsx.snap
@@ -1,1238 +1,133 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`ActionBegin component should render correctly 1`] = `
-<Provider
- store={
- Object {
- "clearActions": [Function],
- "dispatch": [Function],
- "getActions": [Function],
- "getState": [Function],
- "replaceReducer": [Function],
- "subscribe": [Function],
- }
- }
->
- <ActionBegin
- action={
- Object {
- "_id": "ECOGESTURE0014",
- "action": true,
- "actionDuration": 3,
- "actionName": "J’attends que les plats chauds aient refroidi avant de les mettre au réfrigérateur et je les couvre.",
- "difficulty": 1,
- "doing": false,
- "efficiency": 1,
- "equipment": false,
- "equipmentInstallation": true,
- "equipmentType": Array [],
- "fluidTypes": Array [
- 0,
- ],
- "id": "ECOGESTURE0014",
- "impactLevel": 2,
- "investment": null,
- "longDescription": "En plaçant des plats chauds au réfrigérateur, vous réchauffez l’enceinte de l’appareil, ce qui entraîne une surconsommation. De plus, si les plats ne sont pas couverts, de la vapeur d’eau va se former et provoquer l’apparition du givre. Et couvrir les plats, c’est aussi éviter que les bactéries et les odeurs ne se répandent.",
- "longName": "J’attends que les plats chauds aient refroidi avant de les mettre au réfrigérateur et je les couvre.",
- "objective": false,
- "room": Array [
- 2,
- ],
- "season": "Sans saison",
- "shortName": "Chat échaudé",
- "usage": 5,
- "viewedInSelection": false,
- }
- }
- setShowList={[MockFunction]}
- userChallenge={
- Object {
- "action": Object {
- "ecogesture": null,
- "startDate": null,
- "state": 0,
- },
- "description": "Description challenge 2",
- "duel": Object {
- "description": "Je parie un ours polaire que vous ne pouvez pas consommer moins que #CONSUMPTION € en 1 semaine",
- "duration": "P30D",
- "fluidTypes": Array [],
- "id": "DUEL001",
- "startDate": null,
- "state": 0,
- "threshold": 0,
- "title": "Title DUEL001",
- "userConsumption": 0,
- },
- "endingDate": null,
- "exploration": Object {
- "complementary_description": "Refaire un tour dans son profil si déjà fait",
- "date": null,
- "description": "Avoir complété son profil",
- "ecogesture_id": "",
- "fluid_condition": Array [],
- "id": "EXPLORATION001",
- "message_success": "Vous avez complété votre profil ou refait un tour dans votre profil",
- "progress": 0,
- "state": 0,
- "target": 1,
- "type": 1,
- },
- "id": "CHALLENGE0002",
- "progress": Object {
- "actionProgress": 0,
- "explorationProgress": 0,
- "quizProgress": 0,
- },
- "quiz": Object {
- "customQuestion": Object {
- "interval": 20,
- "period": Object {},
- "questionLabel": "Custom1",
- "result": 0,
- "singleFluid": false,
- "timeStep": 20,
- "type": 0,
- },
- "id": "QUIZ001",
- "questions": Array [
- Object {
- "answers": Array [
- Object {
- "answerLabel": "86 km",
- "isTrue": true,
- },
- Object {
- "answerLabel": "78 km",
- "isTrue": false,
- },
- Object {
- "answerLabel": "56 km",
- "isTrue": false,
- },
- ],
- "explanation": "L’aqueduc du Gier est un des aqueducs antiques de Lyon desservant la ville antique de Lugdunum. Avec ses 86 km il est le plus long des quatre aqueducs ayant alimenté la ville en eau, et celui dont les structures sont le mieux conservées. Il doit son nom au fait qu'il puise aux sources du Gier, affluent du Rhône",
- "questionLabel": "Quelle longueur faisait l’aqueduc du Gier pour acheminer l’eau sur Lyon à l’époque romaine ?",
- "result": 0,
- "source": "string",
- },
- Object {
- "answers": Array [
- Object {
- "answerLabel": "1 point d’eau public pour 800 habitants.",
- "isTrue": true,
- },
- Object {
- "answerLabel": "1 point d’eau public pour 400 habitants.",
- "isTrue": false,
- },
- Object {
- "answerLabel": "1 point d’eau public pour 200 habitants.",
- "isTrue": false,
- },
- ],
- "explanation": "string",
- "questionLabel": "En 1800 à Lyon, combien de points d'eau y avait-il par habitants ?",
- "result": 0,
- "source": "string",
- },
- Object {
- "answers": Array [
- Object {
- "answerLabel": "François Mitterrand",
- "isTrue": false,
- },
- Object {
- "answerLabel": "Napoléon Ier",
- "isTrue": true,
- },
- Object {
- "answerLabel": "Napoléon III",
- "isTrue": false,
- },
- ],
- "explanation": "string",
- "questionLabel": "Qui officialise la création de la Compagnie Générale des eaux ?",
- "result": 0,
- "source": "string",
- },
- Object {
- "answers": Array [
- Object {
- "answerLabel": "string",
- "isTrue": false,
- },
- Object {
- "answerLabel": "string",
- "isTrue": false,
- },
- Object {
- "answerLabel": "Aristide Dumont",
- "isTrue": true,
- },
- ],
- "explanation": "string",
- "questionLabel": "Quel ingénieur est à l’origine du projet d’alimentation en eau en 1856 ?",
- "result": 0,
- "source": "string",
- },
- ],
- "result": 0,
- "startDate": null,
- "state": 0,
- },
- "startDate": null,
- "state": 4,
- "success": 1,
- "target": 15,
- "title": "Challenge 2",
- }
- }
+<div>
+ <div
+ class="action-begin"
>
<div
- className="action-begin"
+ class="action-container"
>
<div
- className="action-container"
+ class="action-begin-container"
>
<div
- className="action-begin-container"
+ class="icon-container"
>
- <div
- className="icon-container"
+ <svg
+ aria-hidden="true"
+ class="action-icon styles__icon___23x3R"
+ height="100"
+ width="100"
>
- <StyledIcon
- className="action-icon"
- icon="test-file-stub"
- size={100}
- >
- <Icon
- aria-hidden={true}
- className="action-icon"
- icon="test-file-stub"
- size={100}
- spin={false}
- >
- <Component
- aria-hidden={true}
- className="action-icon styles__icon___23x3R"
- height={100}
- style={Object {}}
- width={100}
- >
- <svg
- aria-hidden={true}
- className="action-icon styles__icon___23x3R"
- height={100}
- style={Object {}}
- width={100}
- >
- <use
- xlinkHref="#test-file-stub"
- />
- </svg>
- </Component>
- </Icon>
- </StyledIcon>
- </div>
- <StarsContainer
- isQuizBegin={true}
- result={0}
+ <use
+ xlink:href="#test-file-stub"
+ />
+ </svg>
+ </div>
+ <div
+ class="stars"
+ >
+ <svg
+ aria-hidden="true"
+ class="star styles__icon___23x3R"
+ height="25"
+ width="25"
>
- <div
- className="stars"
- >
- <StyledIcon
- className="star"
- icon="test-file-stub"
- key="1"
- size={25}
- >
- <Icon
- aria-hidden={true}
- className="star"
- icon="test-file-stub"
- size={25}
- spin={false}
- >
- <Component
- aria-hidden={true}
- className="star styles__icon___23x3R"
- height={25}
- style={Object {}}
- width={25}
- >
- <svg
- aria-hidden={true}
- className="star styles__icon___23x3R"
- height={25}
- style={Object {}}
- width={25}
- >
- <use
- xlinkHref="#test-file-stub"
- />
- </svg>
- </Component>
- </Icon>
- </StyledIcon>
- <StyledIcon
- className="star"
- icon="test-file-stub"
- key="2"
- size={25}
- >
- <Icon
- aria-hidden={true}
- className="star"
- icon="test-file-stub"
- size={25}
- spin={false}
- >
- <Component
- aria-hidden={true}
- className="star styles__icon___23x3R"
- height={25}
- style={Object {}}
- width={25}
- >
- <svg
- aria-hidden={true}
- className="star styles__icon___23x3R"
- height={25}
- style={Object {}}
- width={25}
- >
- <use
- xlinkHref="#test-file-stub"
- />
- </svg>
- </Component>
- </Icon>
- </StyledIcon>
- <StyledIcon
- className="star"
- icon="test-file-stub"
- key="3"
- size={25}
- >
- <Icon
- aria-hidden={true}
- className="star"
- icon="test-file-stub"
- size={25}
- spin={false}
- >
- <Component
- aria-hidden={true}
- className="star styles__icon___23x3R"
- height={25}
- style={Object {}}
- width={25}
- >
- <svg
- aria-hidden={true}
- className="star styles__icon___23x3R"
- height={25}
- style={Object {}}
- width={25}
- >
- <use
- xlinkHref="#test-file-stub"
- />
- </svg>
- </Component>
- </Icon>
- </StyledIcon>
- <StyledIcon
- className="star"
- icon="test-file-stub"
- key="4"
- size={25}
- >
- <Icon
- aria-hidden={true}
- className="star"
- icon="test-file-stub"
- size={25}
- spin={false}
- >
- <Component
- aria-hidden={true}
- className="star styles__icon___23x3R"
- height={25}
- style={Object {}}
- width={25}
- >
- <svg
- aria-hidden={true}
- className="star styles__icon___23x3R"
- height={25}
- style={Object {}}
- width={25}
- >
- <use
- xlinkHref="#test-file-stub"
- />
- </svg>
- </Component>
- </Icon>
- </StyledIcon>
- <StyledIcon
- className="star"
- icon="test-file-stub"
- key="5"
- size={25}
- >
- <Icon
- aria-hidden={true}
- className="star"
- icon="test-file-stub"
- size={25}
- spin={false}
- >
- <Component
- aria-hidden={true}
- className="star styles__icon___23x3R"
- height={25}
- style={Object {}}
- width={25}
- >
- <svg
- aria-hidden={true}
- className="star styles__icon___23x3R"
- height={25}
- style={Object {}}
- width={25}
- >
- <use
- xlinkHref="#test-file-stub"
- />
- </svg>
- </Component>
- </Icon>
- </StyledIcon>
- </div>
- </StarsContainer>
- <div
- className="action-title text-20-bold"
+ <use
+ xlink:href="#test-file-stub"
+ />
+ </svg>
+ <svg
+ aria-hidden="true"
+ class="star styles__icon___23x3R"
+ height="25"
+ width="25"
>
- Chat échaudé
- </div>
- <div
- className="action-duration text-18"
+ <use
+ xlink:href="#test-file-stub"
+ />
+ </svg>
+ <svg
+ aria-hidden="true"
+ class="star styles__icon___23x3R"
+ height="25"
+ width="25"
>
- action.duration
- </div>
- <div
- className="action-text text-18-bold"
+ <use
+ xlink:href="#test-file-stub"
+ />
+ </svg>
+ <svg
+ aria-hidden="true"
+ class="star styles__icon___23x3R"
+ height="25"
+ width="25"
>
- J’attends que les plats chauds aient refroidi avant de les mettre au réfrigérateur et je les couvre.
- </div>
- <div
- className="action-buttons"
+ <use
+ xlink:href="#test-file-stub"
+ />
+ </svg>
+ <svg
+ aria-hidden="true"
+ class="star styles__icon___23x3R"
+ height="25"
+ width="25"
>
- <WithStyles(ForwardRef(Button))
- classes={
- Object {
- "label": "text-16-normal",
- "root": "btn-secondary-negative",
- }
- }
- onClick={[Function]}
- >
- <ForwardRef(Button)
- classes={
- Object {
- "colorInherit": "MuiButton-colorInherit",
- "contained": "MuiButton-contained",
- "containedPrimary": "MuiButton-containedPrimary",
- "containedSecondary": "MuiButton-containedSecondary",
- "containedSizeLarge": "MuiButton-containedSizeLarge",
- "containedSizeSmall": "MuiButton-containedSizeSmall",
- "disableElevation": "MuiButton-disableElevation",
- "disabled": "Mui-disabled",
- "endIcon": "MuiButton-endIcon",
- "focusVisible": "Mui-focusVisible",
- "fullWidth": "MuiButton-fullWidth",
- "iconSizeLarge": "MuiButton-iconSizeLarge",
- "iconSizeMedium": "MuiButton-iconSizeMedium",
- "iconSizeSmall": "MuiButton-iconSizeSmall",
- "label": "MuiButton-label text-16-normal",
- "outlined": "MuiButton-outlined",
- "outlinedPrimary": "MuiButton-outlinedPrimary",
- "outlinedSecondary": "MuiButton-outlinedSecondary",
- "outlinedSizeLarge": "MuiButton-outlinedSizeLarge",
- "outlinedSizeSmall": "MuiButton-outlinedSizeSmall",
- "root": "MuiButton-root btn-secondary-negative",
- "sizeLarge": "MuiButton-sizeLarge",
- "sizeSmall": "MuiButton-sizeSmall",
- "startIcon": "MuiButton-startIcon",
- "text": "MuiButton-text",
- "textPrimary": "MuiButton-textPrimary",
- "textSecondary": "MuiButton-textSecondary",
- "textSizeLarge": "MuiButton-textSizeLarge",
- "textSizeSmall": "MuiButton-textSizeSmall",
- }
- }
- onClick={[Function]}
- >
- <WithStyles(ForwardRef(ButtonBase))
- className="MuiButton-root btn-secondary-negative MuiButton-text"
- component="button"
- disabled={false}
- focusRipple={true}
- focusVisibleClassName="Mui-focusVisible"
- onClick={[Function]}
- type="button"
- >
- <ForwardRef(ButtonBase)
- className="MuiButton-root btn-secondary-negative MuiButton-text"
- classes={
- Object {
- "disabled": "Mui-disabled",
- "focusVisible": "Mui-focusVisible",
- "root": "MuiButtonBase-root",
- }
- }
- component="button"
- disabled={false}
- focusRipple={true}
- focusVisibleClassName="Mui-focusVisible"
- onClick={[Function]}
- type="button"
- >
- <button
- className="MuiButtonBase-root MuiButton-root btn-secondary-negative MuiButton-text"
- disabled={false}
- onBlur={[Function]}
- onClick={[Function]}
- onDragLeave={[Function]}
- onFocus={[Function]}
- onKeyDown={[Function]}
- onKeyUp={[Function]}
- onMouseDown={[Function]}
- onMouseLeave={[Function]}
- onMouseUp={[Function]}
- onTouchEnd={[Function]}
- onTouchMove={[Function]}
- onTouchStart={[Function]}
- tabIndex={0}
- type="button"
- >
- <span
- className="MuiButton-label text-16-normal"
- >
- action.apply
- </span>
- <WithStyles(memo)
- center={false}
- >
- <ForwardRef(TouchRipple)
- center={false}
- classes={
- Object {
- "child": "MuiTouchRipple-child",
- "childLeaving": "MuiTouchRipple-childLeaving",
- "childPulsate": "MuiTouchRipple-childPulsate",
- "ripple": "MuiTouchRipple-ripple",
- "ripplePulsate": "MuiTouchRipple-ripplePulsate",
- "rippleVisible": "MuiTouchRipple-rippleVisible",
- "root": "MuiTouchRipple-root",
- }
- }
- >
- <span
- className="MuiTouchRipple-root"
- >
- <TransitionGroup
- childFactory={[Function]}
- component={null}
- exit={true}
- />
- </span>
- </ForwardRef(TouchRipple)>
- </WithStyles(memo)>
- </button>
- </ForwardRef(ButtonBase)>
- </WithStyles(ForwardRef(ButtonBase))>
- </ForwardRef(Button)>
- </WithStyles(ForwardRef(Button))>
- <WithStyles(ForwardRef(Button))
- classes={
- Object {
- "label": "text-16-normal",
- "root": "btn-secondary-negative",
- }
- }
- onClick={[Function]}
- >
- <ForwardRef(Button)
- classes={
- Object {
- "colorInherit": "MuiButton-colorInherit",
- "contained": "MuiButton-contained",
- "containedPrimary": "MuiButton-containedPrimary",
- "containedSecondary": "MuiButton-containedSecondary",
- "containedSizeLarge": "MuiButton-containedSizeLarge",
- "containedSizeSmall": "MuiButton-containedSizeSmall",
- "disableElevation": "MuiButton-disableElevation",
- "disabled": "Mui-disabled",
- "endIcon": "MuiButton-endIcon",
- "focusVisible": "Mui-focusVisible",
- "fullWidth": "MuiButton-fullWidth",
- "iconSizeLarge": "MuiButton-iconSizeLarge",
- "iconSizeMedium": "MuiButton-iconSizeMedium",
- "iconSizeSmall": "MuiButton-iconSizeSmall",
- "label": "MuiButton-label text-16-normal",
- "outlined": "MuiButton-outlined",
- "outlinedPrimary": "MuiButton-outlinedPrimary",
- "outlinedSecondary": "MuiButton-outlinedSecondary",
- "outlinedSizeLarge": "MuiButton-outlinedSizeLarge",
- "outlinedSizeSmall": "MuiButton-outlinedSizeSmall",
- "root": "MuiButton-root btn-secondary-negative",
- "sizeLarge": "MuiButton-sizeLarge",
- "sizeSmall": "MuiButton-sizeSmall",
- "startIcon": "MuiButton-startIcon",
- "text": "MuiButton-text",
- "textPrimary": "MuiButton-textPrimary",
- "textSecondary": "MuiButton-textSecondary",
- "textSizeLarge": "MuiButton-textSizeLarge",
- "textSizeSmall": "MuiButton-textSizeSmall",
- }
- }
- onClick={[Function]}
- >
- <WithStyles(ForwardRef(ButtonBase))
- className="MuiButton-root btn-secondary-negative MuiButton-text"
- component="button"
- disabled={false}
- focusRipple={true}
- focusVisibleClassName="Mui-focusVisible"
- onClick={[Function]}
- type="button"
- >
- <ForwardRef(ButtonBase)
- className="MuiButton-root btn-secondary-negative MuiButton-text"
- classes={
- Object {
- "disabled": "Mui-disabled",
- "focusVisible": "Mui-focusVisible",
- "root": "MuiButtonBase-root",
- }
- }
- component="button"
- disabled={false}
- focusRipple={true}
- focusVisibleClassName="Mui-focusVisible"
- onClick={[Function]}
- type="button"
- >
- <button
- className="MuiButtonBase-root MuiButton-root btn-secondary-negative MuiButton-text"
- disabled={false}
- onBlur={[Function]}
- onClick={[Function]}
- onDragLeave={[Function]}
- onFocus={[Function]}
- onKeyDown={[Function]}
- onKeyUp={[Function]}
- onMouseDown={[Function]}
- onMouseLeave={[Function]}
- onMouseUp={[Function]}
- onTouchEnd={[Function]}
- onTouchMove={[Function]}
- onTouchStart={[Function]}
- tabIndex={0}
- type="button"
- >
- <span
- className="MuiButton-label text-16-normal"
- >
- action.other
- </span>
- <WithStyles(memo)
- center={false}
- >
- <ForwardRef(TouchRipple)
- center={false}
- classes={
- Object {
- "child": "MuiTouchRipple-child",
- "childLeaving": "MuiTouchRipple-childLeaving",
- "childPulsate": "MuiTouchRipple-childPulsate",
- "ripple": "MuiTouchRipple-ripple",
- "ripplePulsate": "MuiTouchRipple-ripplePulsate",
- "rippleVisible": "MuiTouchRipple-rippleVisible",
- "root": "MuiTouchRipple-root",
- }
- }
- >
- <span
- className="MuiTouchRipple-root"
- >
- <TransitionGroup
- childFactory={[Function]}
- component={null}
- exit={true}
- />
- </span>
- </ForwardRef(TouchRipple)>
- </WithStyles(memo)>
- </button>
- </ForwardRef(ButtonBase)>
- </WithStyles(ForwardRef(ButtonBase))>
- </ForwardRef(Button)>
- </WithStyles(ForwardRef(Button))>
- </div>
+ <use
+ xlink:href="#test-file-stub"
+ />
+ </svg>
+ </div>
+ <h1
+ class="text-20-bold"
+ >
+ Chat échaudé
+ </h1>
+ <div
+ class="action-duration text-18"
+ >
+ action.duration
</div>
- <ActionModal
- action={
- Object {
- "_id": "ECOGESTURE0014",
- "action": true,
- "actionDuration": 3,
- "actionName": "J’attends que les plats chauds aient refroidi avant de les mettre au réfrigérateur et je les couvre.",
- "difficulty": 1,
- "doing": false,
- "efficiency": 1,
- "equipment": false,
- "equipmentInstallation": true,
- "equipmentType": Array [],
- "fluidTypes": Array [
- 0,
- ],
- "id": "ECOGESTURE0014",
- "impactLevel": 2,
- "investment": null,
- "longDescription": "En plaçant des plats chauds au réfrigérateur, vous réchauffez l’enceinte de l’appareil, ce qui entraîne une surconsommation. De plus, si les plats ne sont pas couverts, de la vapeur d’eau va se former et provoquer l’apparition du givre. Et couvrir les plats, c’est aussi éviter que les bactéries et les odeurs ne se répandent.",
- "longName": "J’attends que les plats chauds aient refroidi avant de les mettre au réfrigérateur et je les couvre.",
- "objective": false,
- "room": Array [
- 2,
- ],
- "season": "Sans saison",
- "shortName": "Chat échaudé",
- "usage": 5,
- "viewedInSelection": false,
- }
- }
- handleCloseClick={[Function]}
- open={false}
- userChallenge={
- Object {
- "action": Object {
- "ecogesture": null,
- "startDate": null,
- "state": 0,
- },
- "description": "Description challenge 2",
- "duel": Object {
- "description": "Je parie un ours polaire que vous ne pouvez pas consommer moins que #CONSUMPTION € en 1 semaine",
- "duration": "P30D",
- "fluidTypes": Array [],
- "id": "DUEL001",
- "startDate": null,
- "state": 0,
- "threshold": 0,
- "title": "Title DUEL001",
- "userConsumption": 0,
- },
- "endingDate": null,
- "exploration": Object {
- "complementary_description": "Refaire un tour dans son profil si déjà fait",
- "date": null,
- "description": "Avoir complété son profil",
- "ecogesture_id": "",
- "fluid_condition": Array [],
- "id": "EXPLORATION001",
- "message_success": "Vous avez complété votre profil ou refait un tour dans votre profil",
- "progress": 0,
- "state": 0,
- "target": 1,
- "type": 1,
- },
- "id": "CHALLENGE0002",
- "progress": Object {
- "actionProgress": 0,
- "explorationProgress": 0,
- "quizProgress": 0,
- },
- "quiz": Object {
- "customQuestion": Object {
- "interval": 20,
- "period": Object {},
- "questionLabel": "Custom1",
- "result": 0,
- "singleFluid": false,
- "timeStep": 20,
- "type": 0,
- },
- "id": "QUIZ001",
- "questions": Array [
- Object {
- "answers": Array [
- Object {
- "answerLabel": "86 km",
- "isTrue": true,
- },
- Object {
- "answerLabel": "78 km",
- "isTrue": false,
- },
- Object {
- "answerLabel": "56 km",
- "isTrue": false,
- },
- ],
- "explanation": "L’aqueduc du Gier est un des aqueducs antiques de Lyon desservant la ville antique de Lugdunum. Avec ses 86 km il est le plus long des quatre aqueducs ayant alimenté la ville en eau, et celui dont les structures sont le mieux conservées. Il doit son nom au fait qu'il puise aux sources du Gier, affluent du Rhône",
- "questionLabel": "Quelle longueur faisait l’aqueduc du Gier pour acheminer l’eau sur Lyon à l’époque romaine ?",
- "result": 0,
- "source": "string",
- },
- Object {
- "answers": Array [
- Object {
- "answerLabel": "1 point d’eau public pour 800 habitants.",
- "isTrue": true,
- },
- Object {
- "answerLabel": "1 point d’eau public pour 400 habitants.",
- "isTrue": false,
- },
- Object {
- "answerLabel": "1 point d’eau public pour 200 habitants.",
- "isTrue": false,
- },
- ],
- "explanation": "string",
- "questionLabel": "En 1800 à Lyon, combien de points d'eau y avait-il par habitants ?",
- "result": 0,
- "source": "string",
- },
- Object {
- "answers": Array [
- Object {
- "answerLabel": "François Mitterrand",
- "isTrue": false,
- },
- Object {
- "answerLabel": "Napoléon Ier",
- "isTrue": true,
- },
- Object {
- "answerLabel": "Napoléon III",
- "isTrue": false,
- },
- ],
- "explanation": "string",
- "questionLabel": "Qui officialise la création de la Compagnie Générale des eaux ?",
- "result": 0,
- "source": "string",
- },
- Object {
- "answers": Array [
- Object {
- "answerLabel": "string",
- "isTrue": false,
- },
- Object {
- "answerLabel": "string",
- "isTrue": false,
- },
- Object {
- "answerLabel": "Aristide Dumont",
- "isTrue": true,
- },
- ],
- "explanation": "string",
- "questionLabel": "Quel ingénieur est à l’origine du projet d’alimentation en eau en 1856 ?",
- "result": 0,
- "source": "string",
- },
- ],
- "result": 0,
- "startDate": null,
- "state": 0,
- },
- "startDate": null,
- "state": 4,
- "success": 1,
- "target": 15,
- "title": "Challenge 2",
- }
- }
+ <div
+ class="action-text text-18-bold"
>
- <WithStyles(ForwardRef(Dialog))
- aria-labelledby="accessibility-title"
- classes={
- Object {
- "paper": "modal-paper",
- "root": "modal-root",
- }
- }
- onClose={[Function]}
- open={false}
+ J’attends que les plats chauds aient refroidi avant de les mettre au réfrigérateur et je les couvre.
+ </div>
+ <div
+ class="action-buttons"
+ >
+ <button
+ class="MuiButtonBase-root MuiButton-root MuiButton-text btnSecondary"
+ tabindex="0"
+ type="button"
+ >
+ <span
+ class="MuiButton-label"
+ >
+ action.apply
+ </span>
+ <span
+ class="MuiTouchRipple-root"
+ />
+ </button>
+ <button
+ class="MuiButtonBase-root MuiButton-root MuiButton-text btnSecondary"
+ tabindex="0"
+ type="button"
>
- <ForwardRef(Dialog)
- aria-labelledby="accessibility-title"
- classes={
- Object {
- "container": "MuiDialog-container",
- "paper": "MuiDialog-paper modal-paper",
- "paperFullScreen": "MuiDialog-paperFullScreen",
- "paperFullWidth": "MuiDialog-paperFullWidth",
- "paperScrollBody": "MuiDialog-paperScrollBody",
- "paperScrollPaper": "MuiDialog-paperScrollPaper",
- "paperWidthFalse": "MuiDialog-paperWidthFalse",
- "paperWidthLg": "MuiDialog-paperWidthLg",
- "paperWidthMd": "MuiDialog-paperWidthMd",
- "paperWidthSm": "MuiDialog-paperWidthSm",
- "paperWidthXl": "MuiDialog-paperWidthXl",
- "paperWidthXs": "MuiDialog-paperWidthXs",
- "root": "MuiDialog-root modal-root",
- "scrollBody": "MuiDialog-scrollBody",
- "scrollPaper": "MuiDialog-scrollPaper",
- }
- }
- onClose={[Function]}
- open={false}
+ <span
+ class="MuiButton-label"
>
- <ForwardRef(Modal)
- BackdropComponent={
- Object {
- "$$typeof": Symbol(react.forward_ref),
- "Naked": Object {
- "$$typeof": Symbol(react.forward_ref),
- "propTypes": Object {
- "children": [Function],
- "className": [Function],
- "classes": [Function],
- "invisible": [Function],
- "open": [Function],
- "transitionDuration": [Function],
- },
- "render": [Function],
- },
- "displayName": "WithStyles(ForwardRef(Backdrop))",
- "options": Object {
- "defaultTheme": Object {
- "breakpoints": Object {
- "between": [Function],
- "down": [Function],
- "keys": Array [
- "xs",
- "sm",
- "md",
- "lg",
- "xl",
- ],
- "only": [Function],
- "up": [Function],
- "values": Object {
- "lg": 1280,
- "md": 960,
- "sm": 600,
- "xl": 1920,
- "xs": 0,
- },
- "width": [Function],
- },
- "direction": "ltr",
- "mixins": Object {
- "gutters": [Function],
- "toolbar": Object {
- "@media (min-width:0px) and (orientation: landscape)": Object {
- "minHeight": 48,
- },
- "@media (min-width:600px)": Object {
- "minHeight": 64,
- },
- "minHeight": 56,
- },
- },
- "overrides": Object {},
- "palette": Object {
- "action": Object {
- "activatedOpacity": 0.12,
- "active": "rgba(0, 0, 0, 0.54)",
- "disabled": "rgba(0, 0, 0, 0.26)",
- "disabledBackground": "rgba(0, 0, 0, 0.12)",
- "disabledOpacity": 0.38,
- "focus": "rgba(0, 0, 0, 0.12)",
- "focusOpacity": 0.12,
- "hover": "rgba(0, 0, 0, 0.04)",
- "hoverOpacity": 0.04,
- "selected": "rgba(0, 0, 0, 0.08)",
- "selectedOpacity": 0.08,
- },
- "augmentColor": [Function],
- "background": Object {
- "default": "#fafafa",
- "paper": "#fff",
- },
- "common": Object {
- "black": "#000",
- "white": "#fff",
- },
- "contrastThreshold": 3,
- "divider": "rgba(0, 0, 0, 0.12)",
- "error": Object {
- "contrastText": "#fff",
- "dark": "#d32f2f",
- "light": "#e57373",
- "main": "#f44336",
- },
- "getContrastText": [Function],
- "grey": Object {
- "100": "#f5f5f5",
- "200": "#eeeeee",
- "300": "#e0e0e0",
- "400": "#bdbdbd",
- "50": "#fafafa",
- "500": "#9e9e9e",
- "600": "#757575",
- "700": "#616161",
- "800": "#424242",
- "900": "#212121",
- "A100": "#d5d5d5",
- "A200": "#aaaaaa",
- "A400": "#303030",
- "A700": "#616161",
- },
- "info": Object {
- "contrastText": "#fff",
- "dark": "#1976d2",
- "light": "#64b5f6",
- "main": "#2196f3",
- },
- "primary": Object {
- "contrastText": "#fff",
- "dark": "#303f9f",
- "light": "#7986cb",
- "main": "#3f51b5",
- },
- "secondary": Object {
- "contrastText": "#fff",
- "dark": "#c51162",
- "light": "#ff4081",
- "main": "#f50057",
- },
- "success": Object {
- "contrastText": "rgba(0, 0, 0, 0.87)",
- "dark": "#388e3c",
- "light": "#81c784",
- "main": "#4caf50",
- },
- "text": Object {
- "disabled": "rgba(0, 0, 0, 0.38)",
- "hint": "rgba(0, 0, 0, 0.38)",
- "primary": "rgba(0, 0, 0, 0.87)",
- "secondary": "rgba(0, 0, 0, 0.54)",
- },
- "tonalOffset": 0.2,
- "type": "light",
- "warning": Object {
- "contrastText": "rgba(0, 0, 0, 0.87)",
- "dark": "#f57c00",
- "light": "#ffb74d",
- "main": "#ff9800",
- },
- },
- "props": Object {},
- "shadows": Array [
- "none",
- "0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12)",
- "0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12)",
- "0px 3px 3px -2px rgba(0,0,0,0.2),0px 3px 4px 0px rgba(0,0,0,0.14),0px 1px 8px 0px rgba(0,0,0,0.12)",
- "0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12)",
- "0px 3px 5px -1px rgba(0,0,0,0.2),0px 5px 8px 0px rgba(0,0,0,0.14),0px 1px 14px 0px rgba(0,0,0,0.12)",
- "0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12)",
- "0px 4px 5px -2px rgba(0,0,0,0.2),0px 7px 10px 1px rgba(0,0,0,0.14),0px 2px 16px 1px rgba(0,0,0,0.12)",
- "0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12)",
- "0px 5px 6px -3px rgba(0,0,0,0.2),0px 9px 12px 1px rgba(0,0,0,0.14),0px 3px 16px 2px rgba(0,0,0,0.12)",
- "0px 6px 6px -3px rgba(0,0,0,0.2),0px 10px 14px 1px rgba(0,0,0,0.14),0px 4px 18px 3px rgba(0,0,0,0.12)",
- "0px 6px 7px -4px rgba(0,0,0,0.2),0px 11px 15px 1px rgba(0,0,0,0.14),0px 4px 20px 3px rgba(0,0,0,0.12)",
- "0px 7px 8px -4px rgba(0,0,0,0.2),0px 12px 17px 2px rgba(0,0,0,0.14),0px 5px 22px 4px rgba(0,0,0,0.12)",
- "0px 7px 8px -4px rgba(0,0,0,0.2),0px 13px 19px 2px rgba(0,0,0,0.14),0px 5px 24px 4px rgba(0,0,0,0.12)",
- "0px 7px 9px -4px rgba(0,0,0,0.2),0px 14px 21px 2px rgba(0,0,0,0.14),0px 5px 26px 4px rgba(0,0,0,0.12)",
- "0px 8px 9px -5px rgba(0,0,0,0.2),0px 15px 22px 2px rgba(0,0,0,0.14),0px 6px 28px 5px rgba(0,0,0,0.12)",
- "0px 8px 10px -5px rgba(0,0,0,0.2),0px 16px 24px 2px rgba(0,0,0,0.14),0px 6px 30px 5px rgba(0,0,0,0.12)",
- "0px 8px 11px -5px rgba(0,0,0,0.2),0px 17px 26px 2px rgba(0,0,0,0.14),0px 6px 32px 5px rgba(0,0,0,0.12)",
- "0px 9px 11px -5px rgba(0,0,0,0.2),0px 18px 28px 2px rgba(0,0,0,0.14),0px 7px 34px 6px rgba(0,0,0,0.12)",
- "0px 9px 12px -6px rgba(0,0,0,0.2),0px 19px 29px 2px rgba(0,0,0,0.14),0px 7px 36px 6px rgba(0,0,0,0.12)",
- "0px 10px 13px -6px rgba(0,0,0,0.2),0px 20px 31px 3px rgba(0,0,0,0.14),0px 8px 38px 7px rgba(0,0,0,0.12)",
- "0px 10px 13px -6px rgba(0,0,0,0.2),0px 21px 33px 3px rgba(0,0,0,0.14),0px 8px 40px 7px rgba(0,0,0,0.12)",
- "0px 10px 14px -6px rgba(0,0,0,0.2),0px 22px 35px 3px rgba(0,0,0,0.14),0px 8px 42px 7px rgba(0,0,0,0.12)",
- "0px 11px 14px -7px rgba(0,0,0,0.2),0px 23px 36px 3px rgba(0,0,0,0.14),0px 9px 44px 8px rgba(0,0,0,0.12)",
- "0px 11px 15px -7px rgba(0,0,0,0.2),0px 24px 38px 3px rgba(0,0,0,0.14),0px 9px 46px 8px rgba(0,0,0,0.12)",
- ],
- "shape": Object {
- "borderRadius": 4,
- },
- "spacing": [Function],
- "transitions": Object {
- "create": [Function],
- "duration": Object {
- "complex": 375,
- "enteringScreen": 225,
- "leavingScreen": 195,
- "short": 250,
- "shorter": 200,
- "shortest": 150,
- "standard": 300,
- },
- "easing": Object {
- "easeIn": "cubic-bezier(0.4, 0, 1, 1)",
- "easeInOut": "cubic-bezier(0.4, 0, 0.2, 1)",
- "easeOut": "cubic-bezier(0.0, 0, 0.2, 1)",
- "sharp": "cubic-bezier(0.4, 0, 0.6, 1)",
- },
- "getAutoHeightDuration": [Function],
- },
- "typography": Object {
- "body1": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "1rem",
- "fontWeight": 400,
- "letterSpacing": "0.00938em",
- "lineHeight": 1.5,
- },
- "body2": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "0.875rem",
- "fontWeight": 400,
- "letterSpacing": "0.01071em",
- "lineHeight": 1.43,
- },
- "button": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "0.875rem",
- "fontWeight": 500,
- "letterSpacing": "0.02857em",
- "lineHeight": 1.75,
- "textTransform": "uppercase",
- },
- "caption": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "0.75rem",
- "fontWeight": 400,
- "letterSpacing": "0.03333em",
- "lineHeight": 1.66,
- },
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": 14,
- "fontWeightBold": 700,
- "fontWeightLight": 300,
- "fontWeightMedium": 500,
- "fontWeightRegular": 400,
- "h1": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "6rem",
- "fontWeight": 300,
- "letterSpacing": "-0.01562em",
- "lineHeight": 1.167,
- },
- "h2": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "3.75rem",
- "fontWeight": 300,
- "letterSpacing": "-0.00833em",
- "lineHeight": 1.2,
- },
- "h3": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "3rem",
- "fontWeight": 400,
- "letterSpacing": "0em",
- "lineHeight": 1.167,
- },
- "h4": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "2.125rem",
- "fontWeight": 400,
- "letterSpacing": "0.00735em",
- "lineHeight": 1.235,
- },
- "h5": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "1.5rem",
- "fontWeight": 400,
- "letterSpacing": "0em",
- "lineHeight": 1.334,
- },
- "h6": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "1.25rem",
- "fontWeight": 500,
- "letterSpacing": "0.0075em",
- "lineHeight": 1.6,
- },
- "htmlFontSize": 16,
- "overline": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "0.75rem",
- "fontWeight": 400,
- "letterSpacing": "0.08333em",
- "lineHeight": 2.66,
- "textTransform": "uppercase",
- },
- "pxToRem": [Function],
- "round": [Function],
- "subtitle1": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "1rem",
- "fontWeight": 400,
- "letterSpacing": "0.00938em",
- "lineHeight": 1.75,
- },
- "subtitle2": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "0.875rem",
- "fontWeight": 500,
- "letterSpacing": "0.00714em",
- "lineHeight": 1.57,
- },
- },
- "zIndex": Object {
- "appBar": 1100,
- "drawer": 1200,
- "mobileStepper": 1000,
- "modal": 1300,
- "snackbar": 1400,
- "speedDial": 1050,
- "tooltip": 1500,
- },
- },
- "name": "MuiBackdrop",
- },
- "propTypes": Object {
- "classes": [Function],
- "innerRef": [Function],
- },
- "render": [Function],
- "useStyles": [Function],
- }
- }
- BackdropProps={
- Object {
- "transitionDuration": Object {
- "enter": 225,
- "exit": 195,
- },
- }
- }
- className="MuiDialog-root modal-root"
- closeAfterTransition={true}
- disableEscapeKeyDown={false}
- onClose={[Function]}
- open={false}
- />
- </ForwardRef(Dialog)>
- </WithStyles(ForwardRef(Dialog))>
- </ActionModal>
+ action.other
+ </span>
+ <span
+ class="MuiTouchRipple-root"
+ />
+ </button>
+ </div>
</div>
</div>
- </ActionBegin>
-</Provider>
+ </div>
+</div>
`;
diff --git a/src/components/Action/ActionBegin/actionBegin.scss b/src/components/Action/ActionBegin/actionBegin.scss
index 06c170409b17adcaaea2736f0c89dac2573d6dda..36f0ca97ff68e2ce8b7532a227d8643b709b8abc 100644
--- a/src/components/Action/ActionBegin/actionBegin.scss
+++ b/src/components/Action/ActionBegin/actionBegin.scss
@@ -69,13 +69,13 @@
}
}
.action-buttons {
- button {
- padding: 0.7rem;
- border-color: $grey-bright;
- margin-top: 0.5rem;
- span {
- font-weight: 700;
- }
- }
+ display: flex;
+ flex-direction: column;
+ gap: 1rem;
+ width: 100%;
}
}
+
+h1 {
+ color: $white;
+}
diff --git a/src/components/Action/ActionCard/ActionCard.spec.tsx b/src/components/Action/ActionCard/ActionCard.spec.tsx
index fee4477b804e9af5d1fbc67c7d044293ecaa758e..6da3d6ac9cbbf3d88c792275d9ff1d3878f25f85 100644
--- a/src/components/Action/ActionCard/ActionCard.spec.tsx
+++ b/src/components/Action/ActionCard/ActionCard.spec.tsx
@@ -1,12 +1,9 @@
-import { Button } from '@material-ui/core'
-import EcogestureModal from 'components/Ecogesture/EcogestureModal/EcogestureModal'
-import { mount } from 'enzyme'
-import toJson from 'enzyme-to-json'
+import { render, screen, waitFor } from '@testing-library/react'
+import { userEvent } from '@testing-library/user-event'
import React from 'react'
import { Provider } from 'react-redux'
import { defaultEcogestureData } from 'tests/__mocks__/actionData.mock'
import { createMockEcolyoStore } from 'tests/__mocks__/store'
-import { waitForComponentToPaint } from 'tests/__mocks__/testUtils'
import { userChallengeData } from 'tests/__mocks__/userChallengeData.mock'
import ActionCard from './ActionCard'
@@ -17,7 +14,7 @@ describe('ActionCard component', () => {
},
})
it('should be rendered correctly', async () => {
- const wrapper = mount(
+ const { container } = render(
<Provider store={store}>
<ActionCard
setShowList={jest.fn()}
@@ -26,11 +23,11 @@ describe('ActionCard component', () => {
/>
</Provider>
)
- await waitForComponentToPaint(wrapper)
- expect(toJson(wrapper)).toMatchSnapshot()
+ await waitFor(() => null, { container })
+ expect(container).toMatchSnapshot()
})
- it('should open modal', async () => {
- const wrapper = mount(
+ it('should open Ecogesture modal', async () => {
+ render(
<Provider store={store}>
<ActionCard
setShowList={jest.fn()}
@@ -39,8 +36,7 @@ describe('ActionCard component', () => {
/>
</Provider>
)
- await waitForComponentToPaint(wrapper)
- wrapper.find(Button).first().simulate('click')
- expect(wrapper.find(EcogestureModal).exists()).toBeTruthy()
+ await userEvent.click(await screen.findByRole('button'))
+ expect(await screen.findByRole('dialog')).toBeInTheDocument()
})
})
diff --git a/src/components/Action/ActionCard/ActionCard.tsx b/src/components/Action/ActionCard/ActionCard.tsx
index 7c4fa8b98a06bd6182b84a2ba640c7a0be66bd96..909829154ee4ead6e682b18a35d2b1b87c39c35b 100644
--- a/src/components/Action/ActionCard/ActionCard.tsx
+++ b/src/components/Action/ActionCard/ActionCard.tsx
@@ -22,10 +22,10 @@ const ActionCard = ({
setSelectedAction,
setShowList,
}: ActionCardProps) => {
- const [actionIcon, setActionIcon] = useState<string>('')
- const [openEcogestureModal, setOpenEcogestureModal] = useState<boolean>(false)
const client = useClient()
const { currentChallenge } = useAppSelector(state => state.ecolyo.challenge)
+ const [actionIcon, setActionIcon] = useState<string>('')
+ const [openEcogestureModal, setOpenEcogestureModal] = useState<boolean>(false)
const toggleModal = useCallback(() => {
setOpenEcogestureModal(prev => !prev)
}, [])
diff --git a/src/components/Action/ActionCard/__snapshots__/ActionCard.spec.tsx.snap b/src/components/Action/ActionCard/__snapshots__/ActionCard.spec.tsx.snap
index c13a977776a73c81d568d62c49d558da4da21ff0..b18981baeba655d5ed392dd15b2de3cb7ae9b1fa 100644
--- a/src/components/Action/ActionCard/__snapshots__/ActionCard.spec.tsx.snap
+++ b/src/components/Action/ActionCard/__snapshots__/ActionCard.spec.tsx.snap
@@ -1,616 +1,34 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`ActionCard component should be rendered correctly 1`] = `
-<Provider
- store={
- Object {
- "clearActions": [Function],
- "dispatch": [Function],
- "getActions": [Function],
- "getState": [Function],
- "replaceReducer": [Function],
- "subscribe": [Function],
- }
- }
->
- <ActionCard
- action={
- Object {
- "_id": "ECOGESTURE0014",
- "action": true,
- "actionDuration": 3,
- "actionName": "J’attends que les plats chauds aient refroidi avant de les mettre au réfrigérateur et je les couvre.",
- "difficulty": 1,
- "doing": false,
- "efficiency": 1,
- "equipment": false,
- "equipmentInstallation": true,
- "equipmentType": Array [],
- "fluidTypes": Array [
- 0,
- ],
- "id": "ECOGESTURE0014",
- "impactLevel": 2,
- "investment": null,
- "longDescription": "En plaçant des plats chauds au réfrigérateur, vous réchauffez l’enceinte de l’appareil, ce qui entraîne une surconsommation. De plus, si les plats ne sont pas couverts, de la vapeur d’eau va se former et provoquer l’apparition du givre. Et couvrir les plats, c’est aussi éviter que les bactéries et les odeurs ne se répandent.",
- "longName": "J’attends que les plats chauds aient refroidi avant de les mettre au réfrigérateur et je les couvre.",
- "objective": false,
- "room": Array [
- 2,
- ],
- "season": "Sans saison",
- "shortName": "Chat échaudé",
- "usage": 5,
- "viewedInSelection": false,
- }
- }
- setSelectedAction={[MockFunction]}
- setShowList={[MockFunction]}
+<div>
+ <button
+ class="MuiButtonBase-root MuiButton-root MuiButton-text action-card"
+ tabindex="0"
+ type="button"
>
- <WithStyles(ForwardRef(Button))
- className="action-card"
- key="ECOGESTURE0014"
- onClick={[Function]}
+ <span
+ class="MuiButton-label"
>
- <ForwardRef(Button)
- className="action-card"
- classes={
- Object {
- "colorInherit": "MuiButton-colorInherit",
- "contained": "MuiButton-contained",
- "containedPrimary": "MuiButton-containedPrimary",
- "containedSecondary": "MuiButton-containedSecondary",
- "containedSizeLarge": "MuiButton-containedSizeLarge",
- "containedSizeSmall": "MuiButton-containedSizeSmall",
- "disableElevation": "MuiButton-disableElevation",
- "disabled": "Mui-disabled",
- "endIcon": "MuiButton-endIcon",
- "focusVisible": "Mui-focusVisible",
- "fullWidth": "MuiButton-fullWidth",
- "iconSizeLarge": "MuiButton-iconSizeLarge",
- "iconSizeMedium": "MuiButton-iconSizeMedium",
- "iconSizeSmall": "MuiButton-iconSizeSmall",
- "label": "MuiButton-label",
- "outlined": "MuiButton-outlined",
- "outlinedPrimary": "MuiButton-outlinedPrimary",
- "outlinedSecondary": "MuiButton-outlinedSecondary",
- "outlinedSizeLarge": "MuiButton-outlinedSizeLarge",
- "outlinedSizeSmall": "MuiButton-outlinedSizeSmall",
- "root": "MuiButton-root",
- "sizeLarge": "MuiButton-sizeLarge",
- "sizeSmall": "MuiButton-sizeSmall",
- "startIcon": "MuiButton-startIcon",
- "text": "MuiButton-text",
- "textPrimary": "MuiButton-textPrimary",
- "textSecondary": "MuiButton-textSecondary",
- "textSizeLarge": "MuiButton-textSizeLarge",
- "textSizeSmall": "MuiButton-textSizeSmall",
- }
- }
- onClick={[Function]}
+ <svg
+ aria-hidden="true"
+ class="action-icon styles__icon___23x3R"
+ height="100"
+ width="100"
>
- <WithStyles(ForwardRef(ButtonBase))
- className="MuiButton-root MuiButton-text action-card"
- component="button"
- disabled={false}
- focusRipple={true}
- focusVisibleClassName="Mui-focusVisible"
- onClick={[Function]}
- type="button"
- >
- <ForwardRef(ButtonBase)
- className="MuiButton-root MuiButton-text action-card"
- classes={
- Object {
- "disabled": "Mui-disabled",
- "focusVisible": "Mui-focusVisible",
- "root": "MuiButtonBase-root",
- }
- }
- component="button"
- disabled={false}
- focusRipple={true}
- focusVisibleClassName="Mui-focusVisible"
- onClick={[Function]}
- type="button"
- >
- <button
- className="MuiButtonBase-root MuiButton-root MuiButton-text action-card"
- disabled={false}
- onBlur={[Function]}
- onClick={[Function]}
- onDragLeave={[Function]}
- onFocus={[Function]}
- onKeyDown={[Function]}
- onKeyUp={[Function]}
- onMouseDown={[Function]}
- onMouseLeave={[Function]}
- onMouseUp={[Function]}
- onTouchEnd={[Function]}
- onTouchMove={[Function]}
- onTouchStart={[Function]}
- tabIndex={0}
- type="button"
- >
- <span
- className="MuiButton-label"
- >
- <StyledIcon
- className="action-icon"
- icon="test-file-stub"
- size={100}
- >
- <Icon
- aria-hidden={true}
- className="action-icon"
- icon="test-file-stub"
- size={100}
- spin={false}
- >
- <Component
- aria-hidden={true}
- className="action-icon styles__icon___23x3R"
- height={100}
- style={Object {}}
- width={100}
- >
- <svg
- aria-hidden={true}
- className="action-icon styles__icon___23x3R"
- height={100}
- style={Object {}}
- width={100}
- >
- <use
- xlinkHref="#test-file-stub"
- />
- </svg>
- </Component>
- </Icon>
- </StyledIcon>
- <div
- className="action-title text-18-bold"
- >
- Chat échaudé
- </div>
- </span>
- <WithStyles(memo)
- center={false}
- >
- <ForwardRef(TouchRipple)
- center={false}
- classes={
- Object {
- "child": "MuiTouchRipple-child",
- "childLeaving": "MuiTouchRipple-childLeaving",
- "childPulsate": "MuiTouchRipple-childPulsate",
- "ripple": "MuiTouchRipple-ripple",
- "ripplePulsate": "MuiTouchRipple-ripplePulsate",
- "rippleVisible": "MuiTouchRipple-rippleVisible",
- "root": "MuiTouchRipple-root",
- }
- }
- >
- <span
- className="MuiTouchRipple-root"
- >
- <TransitionGroup
- childFactory={[Function]}
- component={null}
- exit={true}
- />
- </span>
- </ForwardRef(TouchRipple)>
- </WithStyles(memo)>
- </button>
- </ForwardRef(ButtonBase)>
- </WithStyles(ForwardRef(ButtonBase))>
- </ForwardRef(Button)>
- </WithStyles(ForwardRef(Button))>
- <EcogestureModal
- ecogesture={
- Object {
- "_id": "ECOGESTURE0014",
- "action": true,
- "actionDuration": 3,
- "actionName": "J’attends que les plats chauds aient refroidi avant de les mettre au réfrigérateur et je les couvre.",
- "difficulty": 1,
- "doing": false,
- "efficiency": 1,
- "equipment": false,
- "equipmentInstallation": true,
- "equipmentType": Array [],
- "fluidTypes": Array [
- 0,
- ],
- "id": "ECOGESTURE0014",
- "impactLevel": 2,
- "investment": null,
- "longDescription": "En plaçant des plats chauds au réfrigérateur, vous réchauffez l’enceinte de l’appareil, ce qui entraîne une surconsommation. De plus, si les plats ne sont pas couverts, de la vapeur d’eau va se former et provoquer l’apparition du givre. Et couvrir les plats, c’est aussi éviter que les bactéries et les odeurs ne se répandent.",
- "longName": "J’attends que les plats chauds aient refroidi avant de les mettre au réfrigérateur et je les couvre.",
- "objective": false,
- "room": Array [
- 2,
- ],
- "season": "Sans saison",
- "shortName": "Chat échaudé",
- "usage": 5,
- "viewedInSelection": false,
- }
- }
- handleCloseClick={[Function]}
- isAction={true}
- open={false}
- selectEcogesture={[Function]}
- >
- <WithStyles(ForwardRef(Dialog))
- aria-labelledby="accessibility-title"
- classes={
- Object {
- "paper": "modal-paper no-padding blue-border",
- "root": "modal-root",
- }
- }
- onClose={[Function]}
- open={false}
+ <use
+ xlink:href="#test-file-stub"
+ />
+ </svg>
+ <div
+ class="action-title text-18-bold"
>
- <ForwardRef(Dialog)
- aria-labelledby="accessibility-title"
- classes={
- Object {
- "container": "MuiDialog-container",
- "paper": "MuiDialog-paper modal-paper no-padding blue-border",
- "paperFullScreen": "MuiDialog-paperFullScreen",
- "paperFullWidth": "MuiDialog-paperFullWidth",
- "paperScrollBody": "MuiDialog-paperScrollBody",
- "paperScrollPaper": "MuiDialog-paperScrollPaper",
- "paperWidthFalse": "MuiDialog-paperWidthFalse",
- "paperWidthLg": "MuiDialog-paperWidthLg",
- "paperWidthMd": "MuiDialog-paperWidthMd",
- "paperWidthSm": "MuiDialog-paperWidthSm",
- "paperWidthXl": "MuiDialog-paperWidthXl",
- "paperWidthXs": "MuiDialog-paperWidthXs",
- "root": "MuiDialog-root modal-root",
- "scrollBody": "MuiDialog-scrollBody",
- "scrollPaper": "MuiDialog-scrollPaper",
- }
- }
- onClose={[Function]}
- open={false}
- >
- <ForwardRef(Modal)
- BackdropComponent={
- Object {
- "$$typeof": Symbol(react.forward_ref),
- "Naked": Object {
- "$$typeof": Symbol(react.forward_ref),
- "propTypes": Object {
- "children": [Function],
- "className": [Function],
- "classes": [Function],
- "invisible": [Function],
- "open": [Function],
- "transitionDuration": [Function],
- },
- "render": [Function],
- },
- "displayName": "WithStyles(ForwardRef(Backdrop))",
- "options": Object {
- "defaultTheme": Object {
- "breakpoints": Object {
- "between": [Function],
- "down": [Function],
- "keys": Array [
- "xs",
- "sm",
- "md",
- "lg",
- "xl",
- ],
- "only": [Function],
- "up": [Function],
- "values": Object {
- "lg": 1280,
- "md": 960,
- "sm": 600,
- "xl": 1920,
- "xs": 0,
- },
- "width": [Function],
- },
- "direction": "ltr",
- "mixins": Object {
- "gutters": [Function],
- "toolbar": Object {
- "@media (min-width:0px) and (orientation: landscape)": Object {
- "minHeight": 48,
- },
- "@media (min-width:600px)": Object {
- "minHeight": 64,
- },
- "minHeight": 56,
- },
- },
- "overrides": Object {},
- "palette": Object {
- "action": Object {
- "activatedOpacity": 0.12,
- "active": "rgba(0, 0, 0, 0.54)",
- "disabled": "rgba(0, 0, 0, 0.26)",
- "disabledBackground": "rgba(0, 0, 0, 0.12)",
- "disabledOpacity": 0.38,
- "focus": "rgba(0, 0, 0, 0.12)",
- "focusOpacity": 0.12,
- "hover": "rgba(0, 0, 0, 0.04)",
- "hoverOpacity": 0.04,
- "selected": "rgba(0, 0, 0, 0.08)",
- "selectedOpacity": 0.08,
- },
- "augmentColor": [Function],
- "background": Object {
- "default": "#fafafa",
- "paper": "#fff",
- },
- "common": Object {
- "black": "#000",
- "white": "#fff",
- },
- "contrastThreshold": 3,
- "divider": "rgba(0, 0, 0, 0.12)",
- "error": Object {
- "contrastText": "#fff",
- "dark": "#d32f2f",
- "light": "#e57373",
- "main": "#f44336",
- },
- "getContrastText": [Function],
- "grey": Object {
- "100": "#f5f5f5",
- "200": "#eeeeee",
- "300": "#e0e0e0",
- "400": "#bdbdbd",
- "50": "#fafafa",
- "500": "#9e9e9e",
- "600": "#757575",
- "700": "#616161",
- "800": "#424242",
- "900": "#212121",
- "A100": "#d5d5d5",
- "A200": "#aaaaaa",
- "A400": "#303030",
- "A700": "#616161",
- },
- "info": Object {
- "contrastText": "#fff",
- "dark": "#1976d2",
- "light": "#64b5f6",
- "main": "#2196f3",
- },
- "primary": Object {
- "contrastText": "#fff",
- "dark": "#303f9f",
- "light": "#7986cb",
- "main": "#3f51b5",
- },
- "secondary": Object {
- "contrastText": "#fff",
- "dark": "#c51162",
- "light": "#ff4081",
- "main": "#f50057",
- },
- "success": Object {
- "contrastText": "rgba(0, 0, 0, 0.87)",
- "dark": "#388e3c",
- "light": "#81c784",
- "main": "#4caf50",
- },
- "text": Object {
- "disabled": "rgba(0, 0, 0, 0.38)",
- "hint": "rgba(0, 0, 0, 0.38)",
- "primary": "rgba(0, 0, 0, 0.87)",
- "secondary": "rgba(0, 0, 0, 0.54)",
- },
- "tonalOffset": 0.2,
- "type": "light",
- "warning": Object {
- "contrastText": "rgba(0, 0, 0, 0.87)",
- "dark": "#f57c00",
- "light": "#ffb74d",
- "main": "#ff9800",
- },
- },
- "props": Object {},
- "shadows": Array [
- "none",
- "0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12)",
- "0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12)",
- "0px 3px 3px -2px rgba(0,0,0,0.2),0px 3px 4px 0px rgba(0,0,0,0.14),0px 1px 8px 0px rgba(0,0,0,0.12)",
- "0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12)",
- "0px 3px 5px -1px rgba(0,0,0,0.2),0px 5px 8px 0px rgba(0,0,0,0.14),0px 1px 14px 0px rgba(0,0,0,0.12)",
- "0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12)",
- "0px 4px 5px -2px rgba(0,0,0,0.2),0px 7px 10px 1px rgba(0,0,0,0.14),0px 2px 16px 1px rgba(0,0,0,0.12)",
- "0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12)",
- "0px 5px 6px -3px rgba(0,0,0,0.2),0px 9px 12px 1px rgba(0,0,0,0.14),0px 3px 16px 2px rgba(0,0,0,0.12)",
- "0px 6px 6px -3px rgba(0,0,0,0.2),0px 10px 14px 1px rgba(0,0,0,0.14),0px 4px 18px 3px rgba(0,0,0,0.12)",
- "0px 6px 7px -4px rgba(0,0,0,0.2),0px 11px 15px 1px rgba(0,0,0,0.14),0px 4px 20px 3px rgba(0,0,0,0.12)",
- "0px 7px 8px -4px rgba(0,0,0,0.2),0px 12px 17px 2px rgba(0,0,0,0.14),0px 5px 22px 4px rgba(0,0,0,0.12)",
- "0px 7px 8px -4px rgba(0,0,0,0.2),0px 13px 19px 2px rgba(0,0,0,0.14),0px 5px 24px 4px rgba(0,0,0,0.12)",
- "0px 7px 9px -4px rgba(0,0,0,0.2),0px 14px 21px 2px rgba(0,0,0,0.14),0px 5px 26px 4px rgba(0,0,0,0.12)",
- "0px 8px 9px -5px rgba(0,0,0,0.2),0px 15px 22px 2px rgba(0,0,0,0.14),0px 6px 28px 5px rgba(0,0,0,0.12)",
- "0px 8px 10px -5px rgba(0,0,0,0.2),0px 16px 24px 2px rgba(0,0,0,0.14),0px 6px 30px 5px rgba(0,0,0,0.12)",
- "0px 8px 11px -5px rgba(0,0,0,0.2),0px 17px 26px 2px rgba(0,0,0,0.14),0px 6px 32px 5px rgba(0,0,0,0.12)",
- "0px 9px 11px -5px rgba(0,0,0,0.2),0px 18px 28px 2px rgba(0,0,0,0.14),0px 7px 34px 6px rgba(0,0,0,0.12)",
- "0px 9px 12px -6px rgba(0,0,0,0.2),0px 19px 29px 2px rgba(0,0,0,0.14),0px 7px 36px 6px rgba(0,0,0,0.12)",
- "0px 10px 13px -6px rgba(0,0,0,0.2),0px 20px 31px 3px rgba(0,0,0,0.14),0px 8px 38px 7px rgba(0,0,0,0.12)",
- "0px 10px 13px -6px rgba(0,0,0,0.2),0px 21px 33px 3px rgba(0,0,0,0.14),0px 8px 40px 7px rgba(0,0,0,0.12)",
- "0px 10px 14px -6px rgba(0,0,0,0.2),0px 22px 35px 3px rgba(0,0,0,0.14),0px 8px 42px 7px rgba(0,0,0,0.12)",
- "0px 11px 14px -7px rgba(0,0,0,0.2),0px 23px 36px 3px rgba(0,0,0,0.14),0px 9px 44px 8px rgba(0,0,0,0.12)",
- "0px 11px 15px -7px rgba(0,0,0,0.2),0px 24px 38px 3px rgba(0,0,0,0.14),0px 9px 46px 8px rgba(0,0,0,0.12)",
- ],
- "shape": Object {
- "borderRadius": 4,
- },
- "spacing": [Function],
- "transitions": Object {
- "create": [Function],
- "duration": Object {
- "complex": 375,
- "enteringScreen": 225,
- "leavingScreen": 195,
- "short": 250,
- "shorter": 200,
- "shortest": 150,
- "standard": 300,
- },
- "easing": Object {
- "easeIn": "cubic-bezier(0.4, 0, 1, 1)",
- "easeInOut": "cubic-bezier(0.4, 0, 0.2, 1)",
- "easeOut": "cubic-bezier(0.0, 0, 0.2, 1)",
- "sharp": "cubic-bezier(0.4, 0, 0.6, 1)",
- },
- "getAutoHeightDuration": [Function],
- },
- "typography": Object {
- "body1": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "1rem",
- "fontWeight": 400,
- "letterSpacing": "0.00938em",
- "lineHeight": 1.5,
- },
- "body2": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "0.875rem",
- "fontWeight": 400,
- "letterSpacing": "0.01071em",
- "lineHeight": 1.43,
- },
- "button": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "0.875rem",
- "fontWeight": 500,
- "letterSpacing": "0.02857em",
- "lineHeight": 1.75,
- "textTransform": "uppercase",
- },
- "caption": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "0.75rem",
- "fontWeight": 400,
- "letterSpacing": "0.03333em",
- "lineHeight": 1.66,
- },
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": 14,
- "fontWeightBold": 700,
- "fontWeightLight": 300,
- "fontWeightMedium": 500,
- "fontWeightRegular": 400,
- "h1": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "6rem",
- "fontWeight": 300,
- "letterSpacing": "-0.01562em",
- "lineHeight": 1.167,
- },
- "h2": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "3.75rem",
- "fontWeight": 300,
- "letterSpacing": "-0.00833em",
- "lineHeight": 1.2,
- },
- "h3": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "3rem",
- "fontWeight": 400,
- "letterSpacing": "0em",
- "lineHeight": 1.167,
- },
- "h4": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "2.125rem",
- "fontWeight": 400,
- "letterSpacing": "0.00735em",
- "lineHeight": 1.235,
- },
- "h5": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "1.5rem",
- "fontWeight": 400,
- "letterSpacing": "0em",
- "lineHeight": 1.334,
- },
- "h6": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "1.25rem",
- "fontWeight": 500,
- "letterSpacing": "0.0075em",
- "lineHeight": 1.6,
- },
- "htmlFontSize": 16,
- "overline": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "0.75rem",
- "fontWeight": 400,
- "letterSpacing": "0.08333em",
- "lineHeight": 2.66,
- "textTransform": "uppercase",
- },
- "pxToRem": [Function],
- "round": [Function],
- "subtitle1": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "1rem",
- "fontWeight": 400,
- "letterSpacing": "0.00938em",
- "lineHeight": 1.75,
- },
- "subtitle2": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "0.875rem",
- "fontWeight": 500,
- "letterSpacing": "0.00714em",
- "lineHeight": 1.57,
- },
- },
- "zIndex": Object {
- "appBar": 1100,
- "drawer": 1200,
- "mobileStepper": 1000,
- "modal": 1300,
- "snackbar": 1400,
- "speedDial": 1050,
- "tooltip": 1500,
- },
- },
- "name": "MuiBackdrop",
- },
- "propTypes": Object {
- "classes": [Function],
- "innerRef": [Function],
- },
- "render": [Function],
- "useStyles": [Function],
- }
- }
- BackdropProps={
- Object {
- "transitionDuration": Object {
- "enter": 225,
- "exit": 195,
- },
- }
- }
- className="MuiDialog-root modal-root"
- closeAfterTransition={true}
- disableEscapeKeyDown={false}
- onClose={[Function]}
- open={false}
- />
- </ForwardRef(Dialog)>
- </WithStyles(ForwardRef(Dialog))>
- </EcogestureModal>
- </ActionCard>
-</Provider>
+ Chat échaudé
+ </div>
+ </span>
+ <span
+ class="MuiTouchRipple-root"
+ />
+ </button>
+</div>
`;
diff --git a/src/components/Action/ActionChoose/ActionChoose.spec.tsx b/src/components/Action/ActionChoose/ActionChoose.spec.tsx
index 93f2bcdac3ccd81c76135f09db10b4a2ba320ef7..c7f251918247054dcc6f0eacbb711aa37269d06c 100644
--- a/src/components/Action/ActionChoose/ActionChoose.spec.tsx
+++ b/src/components/Action/ActionChoose/ActionChoose.spec.tsx
@@ -1,21 +1,29 @@
-import { mount } from 'enzyme'
-import toJson from 'enzyme-to-json'
+import { render, screen, waitFor } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
import React from 'react'
import { Provider } from 'react-redux'
+import { AllEcogestureData } from 'tests/__mocks__/actionData.mock'
import {
createMockEcolyoStore,
+ mockChallengeState,
mockGlobalState,
mockProfileState,
} from 'tests/__mocks__/store'
-import { waitForComponentToPaint } from 'tests/__mocks__/testUtils'
import { userChallengeData } from 'tests/__mocks__/userChallengeData.mock'
-import ActionBegin from '../ActionBegin/ActionBegin'
import ActionChoose from './ActionChoose'
-const mockGetEcogesturesByIds = jest.fn(() => [])
jest.mock('services/ecogesture.service', () => {
return jest.fn(() => ({
- getEcogesturesByIds: mockGetEcogesturesByIds,
+ getEcogesturesByIds: jest.fn(() => []),
+ }))
+})
+
+const mockGetDefaultActions = jest.fn()
+
+jest.mock('services/action.service', () => {
+ return jest.fn(() => ({
+ getCustomActions: jest.fn(),
+ getDefaultActions: mockGetDefaultActions,
}))
})
@@ -25,20 +33,40 @@ describe('ActionChoose component', () => {
profile: mockProfileState,
})
it('should render correctly', async () => {
- const wrapper = mount(
+ mockGetDefaultActions.mockResolvedValue([
+ AllEcogestureData[0],
+ AllEcogestureData[5],
+ AllEcogestureData[2],
+ ])
+ const { container } = render(
<Provider store={store}>
<ActionChoose userChallenge={userChallengeData[1]} />
</Provider>
)
- await waitForComponentToPaint(wrapper)
- expect(toJson(wrapper)).toMatchSnapshot()
+ await waitFor(() => null, { container })
+ expect(container).toMatchSnapshot()
})
- it('should render ActionBegin component', async () => {
- const wrapper = mount(
+
+ it('should go to the Action list', async () => {
+ const store = createMockEcolyoStore({
+ challenge: mockChallengeState,
+ global: { ...mockGlobalState, fluidTypes: [0, 1, 2] },
+ profile: mockProfileState,
+ })
+
+ mockGetDefaultActions.mockResolvedValue([
+ AllEcogestureData[0],
+ AllEcogestureData[5],
+ AllEcogestureData[2],
+ ])
+
+ const { container } = render(
<Provider store={store}>
<ActionChoose userChallenge={userChallengeData[1]} />
</Provider>
)
- expect(wrapper.find(ActionBegin).exists()).toBeTruthy()
+ await userEvent.click(await screen.findByText('action.other'))
+ const elements = container.getElementsByClassName('action-list-container')
+ expect(elements.item(0)).toBeInTheDocument()
})
})
diff --git a/src/components/Action/ActionChoose/__snapshots__/ActionChoose.spec.tsx.snap b/src/components/Action/ActionChoose/__snapshots__/ActionChoose.spec.tsx.snap
index 7110cbf34e9e6cb1444e6729042e460634500239..1d41b8754042458a3a1addbdfefd8e2a277e623d 100644
--- a/src/components/Action/ActionChoose/__snapshots__/ActionChoose.spec.tsx.snap
+++ b/src/components/Action/ActionChoose/__snapshots__/ActionChoose.spec.tsx.snap
@@ -1,313 +1,131 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`ActionChoose component should render correctly 1`] = `
-<Provider
- store={
- Object {
- "clearActions": [Function],
- "dispatch": [Function],
- "getActions": [Function],
- "getState": [Function],
- "replaceReducer": [Function],
- "subscribe": [Function],
- }
- }
->
- <ActionChoose
- userChallenge={
- Object {
- "action": Object {
- "ecogesture": null,
- "startDate": null,
- "state": 0,
- },
- "description": "Description challenge 2",
- "duel": Object {
- "description": "Je parie un ours polaire que vous ne pouvez pas consommer moins que #CONSUMPTION € en 1 semaine",
- "duration": "P30D",
- "fluidTypes": Array [],
- "id": "DUEL001",
- "startDate": null,
- "state": 0,
- "threshold": 0,
- "title": "Title DUEL001",
- "userConsumption": 0,
- },
- "endingDate": null,
- "exploration": Object {
- "complementary_description": "Refaire un tour dans son profil si déjà fait",
- "date": null,
- "description": "Avoir complété son profil",
- "ecogesture_id": "",
- "fluid_condition": Array [],
- "id": "EXPLORATION001",
- "message_success": "Vous avez complété votre profil ou refait un tour dans votre profil",
- "progress": 0,
- "state": 0,
- "target": 1,
- "type": 1,
- },
- "id": "CHALLENGE0002",
- "progress": Object {
- "actionProgress": 0,
- "explorationProgress": 0,
- "quizProgress": 0,
- },
- "quiz": Object {
- "customQuestion": Object {
- "interval": 20,
- "period": Object {},
- "questionLabel": "Custom1",
- "result": 0,
- "singleFluid": false,
- "timeStep": 20,
- "type": 0,
- },
- "id": "QUIZ001",
- "questions": Array [
- Object {
- "answers": Array [
- Object {
- "answerLabel": "86 km",
- "isTrue": true,
- },
- Object {
- "answerLabel": "78 km",
- "isTrue": false,
- },
- Object {
- "answerLabel": "56 km",
- "isTrue": false,
- },
- ],
- "explanation": "L’aqueduc du Gier est un des aqueducs antiques de Lyon desservant la ville antique de Lugdunum. Avec ses 86 km il est le plus long des quatre aqueducs ayant alimenté la ville en eau, et celui dont les structures sont le mieux conservées. Il doit son nom au fait qu'il puise aux sources du Gier, affluent du Rhône",
- "questionLabel": "Quelle longueur faisait l’aqueduc du Gier pour acheminer l’eau sur Lyon à l’époque romaine ?",
- "result": 0,
- "source": "string",
- },
- Object {
- "answers": Array [
- Object {
- "answerLabel": "1 point d’eau public pour 800 habitants.",
- "isTrue": true,
- },
- Object {
- "answerLabel": "1 point d’eau public pour 400 habitants.",
- "isTrue": false,
- },
- Object {
- "answerLabel": "1 point d’eau public pour 200 habitants.",
- "isTrue": false,
- },
- ],
- "explanation": "string",
- "questionLabel": "En 1800 à Lyon, combien de points d'eau y avait-il par habitants ?",
- "result": 0,
- "source": "string",
- },
- Object {
- "answers": Array [
- Object {
- "answerLabel": "François Mitterrand",
- "isTrue": false,
- },
- Object {
- "answerLabel": "Napoléon Ier",
- "isTrue": true,
- },
- Object {
- "answerLabel": "Napoléon III",
- "isTrue": false,
- },
- ],
- "explanation": "string",
- "questionLabel": "Qui officialise la création de la Compagnie Générale des eaux ?",
- "result": 0,
- "source": "string",
- },
- Object {
- "answers": Array [
- Object {
- "answerLabel": "string",
- "isTrue": false,
- },
- Object {
- "answerLabel": "string",
- "isTrue": false,
- },
- Object {
- "answerLabel": "Aristide Dumont",
- "isTrue": true,
- },
- ],
- "explanation": "string",
- "questionLabel": "Quel ingénieur est à l’origine du projet d’alimentation en eau en 1856 ?",
- "result": 0,
- "source": "string",
- },
- ],
- "result": 0,
- "startDate": null,
- "state": 0,
- },
- "startDate": null,
- "state": 4,
- "success": 1,
- "target": 15,
- "title": "Challenge 2",
- }
- }
+<div>
+ <div
+ class="action-begin"
>
- <ActionBegin
- setShowList={[Function]}
- userChallenge={
- Object {
- "action": Object {
- "ecogesture": null,
- "startDate": null,
- "state": 0,
- },
- "description": "Description challenge 2",
- "duel": Object {
- "description": "Je parie un ours polaire que vous ne pouvez pas consommer moins que #CONSUMPTION € en 1 semaine",
- "duration": "P30D",
- "fluidTypes": Array [],
- "id": "DUEL001",
- "startDate": null,
- "state": 0,
- "threshold": 0,
- "title": "Title DUEL001",
- "userConsumption": 0,
- },
- "endingDate": null,
- "exploration": Object {
- "complementary_description": "Refaire un tour dans son profil si déjà fait",
- "date": null,
- "description": "Avoir complété son profil",
- "ecogesture_id": "",
- "fluid_condition": Array [],
- "id": "EXPLORATION001",
- "message_success": "Vous avez complété votre profil ou refait un tour dans votre profil",
- "progress": 0,
- "state": 0,
- "target": 1,
- "type": 1,
- },
- "id": "CHALLENGE0002",
- "progress": Object {
- "actionProgress": 0,
- "explorationProgress": 0,
- "quizProgress": 0,
- },
- "quiz": Object {
- "customQuestion": Object {
- "interval": 20,
- "period": Object {},
- "questionLabel": "Custom1",
- "result": 0,
- "singleFluid": false,
- "timeStep": 20,
- "type": 0,
- },
- "id": "QUIZ001",
- "questions": Array [
- Object {
- "answers": Array [
- Object {
- "answerLabel": "86 km",
- "isTrue": true,
- },
- Object {
- "answerLabel": "78 km",
- "isTrue": false,
- },
- Object {
- "answerLabel": "56 km",
- "isTrue": false,
- },
- ],
- "explanation": "L’aqueduc du Gier est un des aqueducs antiques de Lyon desservant la ville antique de Lugdunum. Avec ses 86 km il est le plus long des quatre aqueducs ayant alimenté la ville en eau, et celui dont les structures sont le mieux conservées. Il doit son nom au fait qu'il puise aux sources du Gier, affluent du Rhône",
- "questionLabel": "Quelle longueur faisait l’aqueduc du Gier pour acheminer l’eau sur Lyon à l’époque romaine ?",
- "result": 0,
- "source": "string",
- },
- Object {
- "answers": Array [
- Object {
- "answerLabel": "1 point d’eau public pour 800 habitants.",
- "isTrue": true,
- },
- Object {
- "answerLabel": "1 point d’eau public pour 400 habitants.",
- "isTrue": false,
- },
- Object {
- "answerLabel": "1 point d’eau public pour 200 habitants.",
- "isTrue": false,
- },
- ],
- "explanation": "string",
- "questionLabel": "En 1800 à Lyon, combien de points d'eau y avait-il par habitants ?",
- "result": 0,
- "source": "string",
- },
- Object {
- "answers": Array [
- Object {
- "answerLabel": "François Mitterrand",
- "isTrue": false,
- },
- Object {
- "answerLabel": "Napoléon Ier",
- "isTrue": true,
- },
- Object {
- "answerLabel": "Napoléon III",
- "isTrue": false,
- },
- ],
- "explanation": "string",
- "questionLabel": "Qui officialise la création de la Compagnie Générale des eaux ?",
- "result": 0,
- "source": "string",
- },
- Object {
- "answers": Array [
- Object {
- "answerLabel": "string",
- "isTrue": false,
- },
- Object {
- "answerLabel": "string",
- "isTrue": false,
- },
- Object {
- "answerLabel": "Aristide Dumont",
- "isTrue": true,
- },
- ],
- "explanation": "string",
- "questionLabel": "Quel ingénieur est à l’origine du projet d’alimentation en eau en 1856 ?",
- "result": 0,
- "source": "string",
- },
- ],
- "result": 0,
- "startDate": null,
- "state": 0,
- },
- "startDate": null,
- "state": 4,
- "success": 1,
- "target": 15,
- "title": "Challenge 2",
- }
- }
+ <div
+ class="action-container"
>
<div
- className="action-begin"
- />
- </ActionBegin>
- </ActionChoose>
-</Provider>
+ class="action-begin-container"
+ >
+ <div
+ class="icon-container"
+ >
+ <svg
+ aria-hidden="true"
+ class="action-icon styles__icon___23x3R"
+ height="100"
+ width="100"
+ >
+ <use
+ xlink:href="#test-file-stub"
+ />
+ </svg>
+ </div>
+ <div
+ class="stars"
+ >
+ <svg
+ aria-hidden="true"
+ class="star styles__icon___23x3R"
+ height="25"
+ width="25"
+ >
+ <use
+ xlink:href="#test-file-stub"
+ />
+ </svg>
+ <svg
+ aria-hidden="true"
+ class="star styles__icon___23x3R"
+ height="25"
+ width="25"
+ >
+ <use
+ xlink:href="#test-file-stub"
+ />
+ </svg>
+ <svg
+ aria-hidden="true"
+ class="star styles__icon___23x3R"
+ height="25"
+ width="25"
+ >
+ <use
+ xlink:href="#test-file-stub"
+ />
+ </svg>
+ <svg
+ aria-hidden="true"
+ class="star styles__icon___23x3R"
+ height="25"
+ width="25"
+ >
+ <use
+ xlink:href="#test-file-stub"
+ />
+ </svg>
+ <svg
+ aria-hidden="true"
+ class="star styles__icon___23x3R"
+ height="25"
+ width="25"
+ >
+ <use
+ xlink:href="#test-file-stub"
+ />
+ </svg>
+ </div>
+ <h1
+ class="text-20-bold"
+ >
+ Bonhomme de neige
+ </h1>
+ <div
+ class="action-duration text-18"
+ >
+ action.duration
+ </div>
+ <div
+ class="action-text text-18-bold"
+ />
+ <div
+ class="action-buttons"
+ >
+ <button
+ class="MuiButtonBase-root MuiButton-root MuiButton-text btnSecondary"
+ tabindex="0"
+ type="button"
+ >
+ <span
+ class="MuiButton-label"
+ >
+ action.apply
+ </span>
+ <span
+ class="MuiTouchRipple-root"
+ />
+ </button>
+ <button
+ class="MuiButtonBase-root MuiButton-root MuiButton-text btnSecondary"
+ tabindex="0"
+ type="button"
+ >
+ <span
+ class="MuiButton-label"
+ >
+ action.other
+ </span>
+ <span
+ class="MuiTouchRipple-root"
+ />
+ </button>
+ </div>
+ </div>
+ </div>
+ </div>
+</div>
`;
diff --git a/src/components/Action/ActionDone/ActionDone.spec.tsx b/src/components/Action/ActionDone/ActionDone.spec.tsx
index 768da199887dc48d1a6ca651b3a44471b085fb8b..d293d094852cb135f96e457666bc624988e9cc67 100644
--- a/src/components/Action/ActionDone/ActionDone.spec.tsx
+++ b/src/components/Action/ActionDone/ActionDone.spec.tsx
@@ -1,12 +1,10 @@
-import { Button } from '@material-ui/core'
-import { mount } from 'enzyme'
-import toJson from 'enzyme-to-json'
+import { render, screen } from '@testing-library/react'
+import { userEvent } from '@testing-library/user-event'
import React from 'react'
import { Provider } from 'react-redux'
import UsageEventService from 'services/usageEvent.service'
import * as challengeActions from 'store/challenge/challenge.slice'
import { createMockEcolyoStore } from 'tests/__mocks__/store'
-import { waitForComponentToPaint } from 'tests/__mocks__/testUtils'
import { userChallengeData } from 'tests/__mocks__/userChallengeData.mock'
import ActionDone from './ActionDone'
@@ -24,13 +22,12 @@ jest.mock('services/challenge.service', () => {
describe('ActionDone component', () => {
const store = createMockEcolyoStore()
it('should be rendered correctly', async () => {
- const wrapper = mount(
+ const { container } = render(
<Provider store={store}>
<ActionDone currentChallenge={userChallengeData[1]} />
</Provider>
)
- await waitForComponentToPaint(wrapper)
- expect(toJson(wrapper)).toMatchSnapshot()
+ expect(container).toMatchSnapshot()
})
it('should click on button and update action to done', async () => {
const updateChallengeSpy = jest.spyOn(
@@ -38,13 +35,12 @@ describe('ActionDone component', () => {
'updateUserChallengeList'
)
mockUpdateUserChallenge.mockResolvedValueOnce(userChallengeData[1])
- const wrapper = mount(
+ render(
<Provider store={store}>
<ActionDone currentChallenge={userChallengeData[1]} />
</Provider>
)
- wrapper.find(Button).first().simulate('click')
- await waitForComponentToPaint(wrapper)
+ await userEvent.click(await screen.findByText('action.ok'))
expect(updateChallengeSpy).toHaveBeenCalledTimes(1)
})
})
diff --git a/src/components/Action/ActionDone/ActionDone.tsx b/src/components/Action/ActionDone/ActionDone.tsx
index 0fb8bf669abe747d9cb6589a0ae79a38c5627ad6..39b6ccce33c1c025191f17e5b819ac131b9eca72 100644
--- a/src/components/Action/ActionDone/ActionDone.tsx
+++ b/src/components/Action/ActionDone/ActionDone.tsx
@@ -25,11 +25,10 @@ const ActionDone = ({
const navigate = useNavigate()
const handleEndAction = useCallback(async () => {
const challengeService = new ChallengeService(client)
- const updatedChallenge: UserChallenge =
- await challengeService.updateUserChallenge(
- currentChallenge,
- UserChallengeUpdateFlag.ACTION_DONE
- )
+ const updatedChallenge = await challengeService.updateUserChallenge(
+ currentChallenge,
+ UserChallengeUpdateFlag.ACTION_DONE
+ )
await UsageEventService.addEvent(client, {
type: UsageEventType.ACTION_END_EVENT,
target: currentChallenge.action.ecogesture
@@ -47,29 +46,15 @@ const ActionDone = ({
<div className="action-done-container">
<div className="action-done">
<div className="result-title"> {t('action.finished')}</div>
- <div className="result-text text-16-normal">
- {t('action.resultText1')}
- </div>
- <div className="result-text text-16-normal">
- {t('action.resultText2')}
- </div>
- <div className="result-text text-16-normal">
- {t('action.resultText3')}
- </div>
- <div className="result-text text-16-normal">
- {t('action.resultText4')}
- </div>
+ <div>{t('action.resultText1')}</div>
+ <div>{t('action.resultText2')}</div>
+ <div>{t('action.resultText3')}</div>
+ <div>{t('action.resultText4')}</div>
<div className="stars">
<span>5</span>
<StyledIcon icon={starFilled} size={33} />
</div>
- <Button
- classes={{
- root: 'btn-secondary-negative btn-detail',
- label: 'text-16-normal',
- }}
- onClick={handleEndAction}
- >
+ <Button className="btnSecondary" onClick={handleEndAction}>
{t('action.ok')}
</Button>
</div>
diff --git a/src/components/Action/ActionDone/__snapshots__/ActionDone.spec.tsx.snap b/src/components/Action/ActionDone/__snapshots__/ActionDone.spec.tsx.snap
index a2b535dc1d65d8f2051464b904be4b09efd62930..87b0fe92d3e35faa3b3de410562cef4968a55709 100644
--- a/src/components/Action/ActionDone/__snapshots__/ActionDone.spec.tsx.snap
+++ b/src/components/Action/ActionDone/__snapshots__/ActionDone.spec.tsx.snap
@@ -1,361 +1,63 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`ActionDone component should be rendered correctly 1`] = `
-<Provider
- store={
- Object {
- "clearActions": [Function],
- "dispatch": [Function],
- "getActions": [Function],
- "getState": [Function],
- "replaceReducer": [Function],
- "subscribe": [Function],
- }
- }
->
- <ActionDone
- currentChallenge={
- Object {
- "action": Object {
- "ecogesture": null,
- "startDate": null,
- "state": 0,
- },
- "description": "Description challenge 2",
- "duel": Object {
- "description": "Je parie un ours polaire que vous ne pouvez pas consommer moins que #CONSUMPTION € en 1 semaine",
- "duration": "P30D",
- "fluidTypes": Array [],
- "id": "DUEL001",
- "startDate": null,
- "state": 0,
- "threshold": 0,
- "title": "Title DUEL001",
- "userConsumption": 0,
- },
- "endingDate": null,
- "exploration": Object {
- "complementary_description": "Refaire un tour dans son profil si déjà fait",
- "date": null,
- "description": "Avoir complété son profil",
- "ecogesture_id": "",
- "fluid_condition": Array [],
- "id": "EXPLORATION001",
- "message_success": "Vous avez complété votre profil ou refait un tour dans votre profil",
- "progress": 0,
- "state": 0,
- "target": 1,
- "type": 1,
- },
- "id": "CHALLENGE0002",
- "progress": Object {
- "actionProgress": 0,
- "explorationProgress": 0,
- "quizProgress": 0,
- },
- "quiz": Object {
- "customQuestion": Object {
- "interval": 20,
- "period": Object {},
- "questionLabel": "Custom1",
- "result": 0,
- "singleFluid": false,
- "timeStep": 20,
- "type": 0,
- },
- "id": "QUIZ001",
- "questions": Array [
- Object {
- "answers": Array [
- Object {
- "answerLabel": "86 km",
- "isTrue": true,
- },
- Object {
- "answerLabel": "78 km",
- "isTrue": false,
- },
- Object {
- "answerLabel": "56 km",
- "isTrue": false,
- },
- ],
- "explanation": "L’aqueduc du Gier est un des aqueducs antiques de Lyon desservant la ville antique de Lugdunum. Avec ses 86 km il est le plus long des quatre aqueducs ayant alimenté la ville en eau, et celui dont les structures sont le mieux conservées. Il doit son nom au fait qu'il puise aux sources du Gier, affluent du Rhône",
- "questionLabel": "Quelle longueur faisait l’aqueduc du Gier pour acheminer l’eau sur Lyon à l’époque romaine ?",
- "result": 0,
- "source": "string",
- },
- Object {
- "answers": Array [
- Object {
- "answerLabel": "1 point d’eau public pour 800 habitants.",
- "isTrue": true,
- },
- Object {
- "answerLabel": "1 point d’eau public pour 400 habitants.",
- "isTrue": false,
- },
- Object {
- "answerLabel": "1 point d’eau public pour 200 habitants.",
- "isTrue": false,
- },
- ],
- "explanation": "string",
- "questionLabel": "En 1800 à Lyon, combien de points d'eau y avait-il par habitants ?",
- "result": 0,
- "source": "string",
- },
- Object {
- "answers": Array [
- Object {
- "answerLabel": "François Mitterrand",
- "isTrue": false,
- },
- Object {
- "answerLabel": "Napoléon Ier",
- "isTrue": true,
- },
- Object {
- "answerLabel": "Napoléon III",
- "isTrue": false,
- },
- ],
- "explanation": "string",
- "questionLabel": "Qui officialise la création de la Compagnie Générale des eaux ?",
- "result": 0,
- "source": "string",
- },
- Object {
- "answers": Array [
- Object {
- "answerLabel": "string",
- "isTrue": false,
- },
- Object {
- "answerLabel": "string",
- "isTrue": false,
- },
- Object {
- "answerLabel": "Aristide Dumont",
- "isTrue": true,
- },
- ],
- "explanation": "string",
- "questionLabel": "Quel ingénieur est à l’origine du projet d’alimentation en eau en 1856 ?",
- "result": 0,
- "source": "string",
- },
- ],
- "result": 0,
- "startDate": null,
- "state": 0,
- },
- "startDate": null,
- "state": 4,
- "success": 1,
- "target": 15,
- "title": "Challenge 2",
- }
- }
+<div>
+ <div
+ class="action-done-container"
>
<div
- className="action-done-container"
+ class="action-done"
>
<div
- className="action-done"
+ class="result-title"
>
- <div
- className="result-title"
- >
-
- action.finished
- </div>
- <div
- className="result-text text-16-normal"
- >
- action.resultText1
- </div>
- <div
- className="result-text text-16-normal"
- >
- action.resultText2
- </div>
- <div
- className="result-text text-16-normal"
- >
- action.resultText3
- </div>
- <div
- className="result-text text-16-normal"
- >
- action.resultText4
- </div>
- <div
- className="stars"
- >
- <span>
- 5
- </span>
- <StyledIcon
- icon="test-file-stub"
- size={33}
- >
- <Icon
- aria-hidden={true}
- icon="test-file-stub"
- size={33}
- spin={false}
- >
- <Component
- aria-hidden={true}
- className="styles__icon___23x3R"
- height={33}
- style={Object {}}
- width={33}
- >
- <svg
- aria-hidden={true}
- className="styles__icon___23x3R"
- height={33}
- style={Object {}}
- width={33}
- >
- <use
- xlinkHref="#test-file-stub"
- />
- </svg>
- </Component>
- </Icon>
- </StyledIcon>
- </div>
- <WithStyles(ForwardRef(Button))
- classes={
- Object {
- "label": "text-16-normal",
- "root": "btn-secondary-negative btn-detail",
- }
- }
- onClick={[Function]}
+
+ action.finished
+ </div>
+ <div>
+ action.resultText1
+ </div>
+ <div>
+ action.resultText2
+ </div>
+ <div>
+ action.resultText3
+ </div>
+ <div>
+ action.resultText4
+ </div>
+ <div
+ class="stars"
+ >
+ <span>
+ 5
+ </span>
+ <svg
+ aria-hidden="true"
+ class="styles__icon___23x3R"
+ height="33"
+ width="33"
>
- <ForwardRef(Button)
- classes={
- Object {
- "colorInherit": "MuiButton-colorInherit",
- "contained": "MuiButton-contained",
- "containedPrimary": "MuiButton-containedPrimary",
- "containedSecondary": "MuiButton-containedSecondary",
- "containedSizeLarge": "MuiButton-containedSizeLarge",
- "containedSizeSmall": "MuiButton-containedSizeSmall",
- "disableElevation": "MuiButton-disableElevation",
- "disabled": "Mui-disabled",
- "endIcon": "MuiButton-endIcon",
- "focusVisible": "Mui-focusVisible",
- "fullWidth": "MuiButton-fullWidth",
- "iconSizeLarge": "MuiButton-iconSizeLarge",
- "iconSizeMedium": "MuiButton-iconSizeMedium",
- "iconSizeSmall": "MuiButton-iconSizeSmall",
- "label": "MuiButton-label text-16-normal",
- "outlined": "MuiButton-outlined",
- "outlinedPrimary": "MuiButton-outlinedPrimary",
- "outlinedSecondary": "MuiButton-outlinedSecondary",
- "outlinedSizeLarge": "MuiButton-outlinedSizeLarge",
- "outlinedSizeSmall": "MuiButton-outlinedSizeSmall",
- "root": "MuiButton-root btn-secondary-negative btn-detail",
- "sizeLarge": "MuiButton-sizeLarge",
- "sizeSmall": "MuiButton-sizeSmall",
- "startIcon": "MuiButton-startIcon",
- "text": "MuiButton-text",
- "textPrimary": "MuiButton-textPrimary",
- "textSecondary": "MuiButton-textSecondary",
- "textSizeLarge": "MuiButton-textSizeLarge",
- "textSizeSmall": "MuiButton-textSizeSmall",
- }
- }
- onClick={[Function]}
- >
- <WithStyles(ForwardRef(ButtonBase))
- className="MuiButton-root btn-secondary-negative btn-detail MuiButton-text"
- component="button"
- disabled={false}
- focusRipple={true}
- focusVisibleClassName="Mui-focusVisible"
- onClick={[Function]}
- type="button"
- >
- <ForwardRef(ButtonBase)
- className="MuiButton-root btn-secondary-negative btn-detail MuiButton-text"
- classes={
- Object {
- "disabled": "Mui-disabled",
- "focusVisible": "Mui-focusVisible",
- "root": "MuiButtonBase-root",
- }
- }
- component="button"
- disabled={false}
- focusRipple={true}
- focusVisibleClassName="Mui-focusVisible"
- onClick={[Function]}
- type="button"
- >
- <button
- className="MuiButtonBase-root MuiButton-root btn-secondary-negative btn-detail MuiButton-text"
- disabled={false}
- onBlur={[Function]}
- onClick={[Function]}
- onDragLeave={[Function]}
- onFocus={[Function]}
- onKeyDown={[Function]}
- onKeyUp={[Function]}
- onMouseDown={[Function]}
- onMouseLeave={[Function]}
- onMouseUp={[Function]}
- onTouchEnd={[Function]}
- onTouchMove={[Function]}
- onTouchStart={[Function]}
- tabIndex={0}
- type="button"
- >
- <span
- className="MuiButton-label text-16-normal"
- >
- action.ok
- </span>
- <WithStyles(memo)
- center={false}
- >
- <ForwardRef(TouchRipple)
- center={false}
- classes={
- Object {
- "child": "MuiTouchRipple-child",
- "childLeaving": "MuiTouchRipple-childLeaving",
- "childPulsate": "MuiTouchRipple-childPulsate",
- "ripple": "MuiTouchRipple-ripple",
- "ripplePulsate": "MuiTouchRipple-ripplePulsate",
- "rippleVisible": "MuiTouchRipple-rippleVisible",
- "root": "MuiTouchRipple-root",
- }
- }
- >
- <span
- className="MuiTouchRipple-root"
- >
- <TransitionGroup
- childFactory={[Function]}
- component={null}
- exit={true}
- />
- </span>
- </ForwardRef(TouchRipple)>
- </WithStyles(memo)>
- </button>
- </ForwardRef(ButtonBase)>
- </WithStyles(ForwardRef(ButtonBase))>
- </ForwardRef(Button)>
- </WithStyles(ForwardRef(Button))>
+ <use
+ xlink:href="#test-file-stub"
+ />
+ </svg>
</div>
+ <button
+ class="MuiButtonBase-root MuiButton-root MuiButton-text btnSecondary"
+ tabindex="0"
+ type="button"
+ >
+ <span
+ class="MuiButton-label"
+ >
+ action.ok
+ </span>
+ <span
+ class="MuiTouchRipple-root"
+ />
+ </button>
</div>
- </ActionDone>
-</Provider>
+ </div>
+</div>
`;
diff --git a/src/components/Action/ActionDone/actionDone.scss b/src/components/Action/ActionDone/actionDone.scss
index ce2f02bcfcc24ce0030964bb18aa0da532c267e4..3ddbc3295d3215f0768c5b9a36b4acf424e8d2ba 100644
--- a/src/components/Action/ActionDone/actionDone.scss
+++ b/src/components/Action/ActionDone/actionDone.scss
@@ -16,6 +16,7 @@
align-items: center;
justify-content: center;
text-align: center;
+ gap: 1rem;
padding: 3rem 1.2rem;
color: white;
background: $grey-linear-gradient-background;
@@ -26,9 +27,7 @@
color: white;
text-transform: uppercase;
}
- .result-text {
- padding: 0.7rem 0;
- }
+
.stars {
display: flex;
align-items: center;
@@ -39,7 +38,7 @@
margin-right: 0.5rem;
}
}
- button.btn-detail {
+ button {
max-width: 210px;
}
}
diff --git a/src/components/Action/ActionList/ActionList.spec.tsx b/src/components/Action/ActionList/ActionList.spec.tsx
index aad7a7a4c8c1a3be11d95e0535f18849194a303b..d18557624a55ff37a41dd51094a74d6b838c5c8e 100644
--- a/src/components/Action/ActionList/ActionList.spec.tsx
+++ b/src/components/Action/ActionList/ActionList.spec.tsx
@@ -1,4 +1,4 @@
-import { mount } from 'enzyme'
+import { render, screen, waitFor } from '@testing-library/react'
import React from 'react'
import { Provider } from 'react-redux'
import { defaultEcogestureData } from 'tests/__mocks__/actionData.mock'
@@ -7,34 +7,31 @@ import {
mockChallengeState,
mockProfileState,
} from 'tests/__mocks__/store'
-import { waitForComponentToPaint } from 'tests/__mocks__/testUtils'
-import ActionCard from '../ActionCard/ActionCard'
import ActionList from './ActionList'
-const mockGetCustomActions = jest.fn()
const mockGetDefaultActions = jest.fn()
jest.mock('services/action.service', () => {
return jest.fn(() => ({
- getCustomActions: mockGetCustomActions,
getDefaultActions: mockGetDefaultActions,
}))
})
describe('ActionList component', () => {
- it('should be rendered correctly', async () => {
+ it('should match snapshot and render correctly 3 buttons', async () => {
mockGetDefaultActions.mockResolvedValueOnce(defaultEcogestureData)
const store = createMockEcolyoStore({
challenge: { ...mockChallengeState },
global: { fluidTypes: [0, 1, 2] },
profile: mockProfileState,
})
- const wrapper = mount(
+ const { container } = render(
<Provider store={store}>
<ActionList setSelectedAction={jest.fn()} setShowList={jest.fn()} />
</Provider>
)
- await waitForComponentToPaint(wrapper)
- expect(wrapper.find(ActionCard)).toBeTruthy()
+ await waitFor(() => null, { container })
+ expect(container).toMatchSnapshot()
+ expect((await screen.findAllByRole('button')).length).toBe(3)
})
})
diff --git a/src/components/Action/ActionList/ActionList.tsx b/src/components/Action/ActionList/ActionList.tsx
index a9ff78bb19ceecae75a24f23cd949fcb92aef6f1..b79e28bc2c2ebf569577c2506278007f063d01a9 100644
--- a/src/components/Action/ActionList/ActionList.tsx
+++ b/src/components/Action/ActionList/ActionList.tsx
@@ -1,5 +1,5 @@
import ActionCard from 'components/Action/ActionCard/ActionCard'
-import { Client, useClient } from 'cozy-client'
+import { useClient } from 'cozy-client'
import { Ecogesture } from 'models'
import React, { useEffect, useState } from 'react'
import ActionService from 'services/action.service'
@@ -12,7 +12,7 @@ interface ActionListProps {
}
const ActionList = ({ setSelectedAction, setShowList }: ActionListProps) => {
- const client: Client = useClient()
+ const client = useClient()
const {
global: { fluidTypes },
profile: { isProfileTypeCompleted },
diff --git a/src/components/Action/ActionList/__snapshots__/ActionList.spec.tsx.snap b/src/components/Action/ActionList/__snapshots__/ActionList.spec.tsx.snap
new file mode 100644
index 0000000000000000000000000000000000000000..0b0de6e974f935ad6a181f16e5c8c5081c12f75e
--- /dev/null
+++ b/src/components/Action/ActionList/__snapshots__/ActionList.spec.tsx.snap
@@ -0,0 +1,94 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ActionList component should match snapshot and render correctly 3 buttons 1`] = `
+<div>
+ <div
+ class="action-list-container"
+ >
+ <button
+ class="MuiButtonBase-root MuiButton-root MuiButton-text action-card"
+ tabindex="0"
+ type="button"
+ >
+ <span
+ class="MuiButton-label"
+ >
+ <svg
+ aria-hidden="true"
+ class="action-icon styles__icon___23x3R"
+ height="100"
+ width="100"
+ >
+ <use
+ xlink:href="#test-file-stub"
+ />
+ </svg>
+ <div
+ class="action-title text-18-bold"
+ >
+ Poings de glace
+ </div>
+ </span>
+ <span
+ class="MuiTouchRipple-root"
+ />
+ </button>
+ <button
+ class="MuiButtonBase-root MuiButton-root MuiButton-text action-card"
+ tabindex="0"
+ type="button"
+ >
+ <span
+ class="MuiButton-label"
+ >
+ <svg
+ aria-hidden="true"
+ class="action-icon styles__icon___23x3R"
+ height="100"
+ width="100"
+ >
+ <use
+ xlink:href="#test-file-stub"
+ />
+ </svg>
+ <div
+ class="action-title text-18-bold"
+ >
+ Chat échaudé
+ </div>
+ </span>
+ <span
+ class="MuiTouchRipple-root"
+ />
+ </button>
+ <button
+ class="MuiButtonBase-root MuiButton-root MuiButton-text action-card"
+ tabindex="0"
+ type="button"
+ >
+ <span
+ class="MuiButton-label"
+ >
+ <svg
+ aria-hidden="true"
+ class="action-icon styles__icon___23x3R"
+ height="100"
+ width="100"
+ >
+ <use
+ xlink:href="#test-file-stub"
+ />
+ </svg>
+ <div
+ class="action-title text-18-bold"
+ >
+ Reine du Puzzle
+ </div>
+ </span>
+ <span
+ class="MuiTouchRipple-root"
+ />
+ </button>
+ </div>
+</div>
+`;
diff --git a/src/components/Action/ActionModal/ActionModal.spec.tsx b/src/components/Action/ActionModal/ActionModal.spec.tsx
index 4507b4c42146b6cae0d2cf481ba60fee067887fb..a3c59c54d2523c2f93e0c264740a6389efe9afd2 100644
--- a/src/components/Action/ActionModal/ActionModal.spec.tsx
+++ b/src/components/Action/ActionModal/ActionModal.spec.tsx
@@ -1,13 +1,10 @@
-import { Button } from '@material-ui/core'
-import { mount } from 'enzyme'
-import toJson from 'enzyme-to-json'
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
import React from 'react'
import { Provider } from 'react-redux'
-import UsageEventService from 'services/usageEvent.service'
import * as challengeActions from 'store/challenge/challenge.slice'
import { defaultEcogestureData } from 'tests/__mocks__/actionData.mock'
import { createMockEcolyoStore } from 'tests/__mocks__/store'
-import { waitForComponentToPaint } from 'tests/__mocks__/testUtils'
import { userChallengeData } from 'tests/__mocks__/userChallengeData.mock'
import ActionModal from './ActionModal'
@@ -17,14 +14,11 @@ jest.mock('services/challenge.service', () => {
updateUserChallenge: mockUpdateUserChallenge,
}))
})
-jest.mock('services/usageEvent.service')
-const mockAddEvent = jest.fn()
-UsageEventService.addEvent = mockAddEvent
describe('ActionModal component', () => {
const store = createMockEcolyoStore()
it('should render correctly', async () => {
- const wrapper = mount(
+ const { baseElement } = render(
<Provider store={store}>
<ActionModal
open={true}
@@ -34,8 +28,7 @@ describe('ActionModal component', () => {
/>
</Provider>
)
- await waitForComponentToPaint(wrapper)
- expect(toJson(wrapper)).toMatchSnapshot()
+ expect(baseElement).toMatchSnapshot()
})
it('should click on button and update action to ongoing', async () => {
const updateChallengeSpy = jest.spyOn(
@@ -44,7 +37,7 @@ describe('ActionModal component', () => {
)
mockUpdateUserChallenge.mockResolvedValueOnce(userChallengeData[1])
- const wrapper = mount(
+ render(
<Provider store={store}>
<ActionModal
open={true}
@@ -54,8 +47,7 @@ describe('ActionModal component', () => {
/>
</Provider>
)
- wrapper.find(Button).first().simulate('click')
- await waitForComponentToPaint(wrapper)
+ await userEvent.click(await screen.findByText('action_modal.accept'))
expect(updateChallengeSpy).toHaveBeenCalledTimes(1)
})
})
diff --git a/src/components/Action/ActionModal/ActionModal.tsx b/src/components/Action/ActionModal/ActionModal.tsx
index c8de7f28d15013698ac854b46ab1c4b21e31ac94..8cd832e88df0deb8dbaf0598c1f83e2fbe282f69 100644
--- a/src/components/Action/ActionModal/ActionModal.tsx
+++ b/src/components/Action/ActionModal/ActionModal.tsx
@@ -30,14 +30,13 @@ const ActionModal = ({
const dispatch = useAppDispatch()
const launchAction = useCallback(async () => {
const challengeService = new ChallengeService(client)
- const updatedChallenge: UserChallenge =
- await challengeService.updateUserChallenge(
- userChallenge,
- UserChallengeUpdateFlag.ACTION_START,
- undefined,
- undefined,
- action
- )
+ const updatedChallenge = await challengeService.updateUserChallenge(
+ userChallenge,
+ UserChallengeUpdateFlag.ACTION_START,
+ undefined,
+ undefined,
+ action
+ )
dispatch(updateUserChallengeList(updatedChallenge))
}, [action, client, dispatch, userChallenge])
@@ -65,20 +64,14 @@ const ActionModal = ({
<div className="buttons">
<Button
aria-label={t('action_modal.accessibility.button_accept')}
- classes={{
- root: 'btn-secondary-negative',
- label: 'text-16-normal',
- }}
+ className="btnSecondary"
onClick={launchAction}
>
{t('action_modal.accept')}
</Button>
<Button
aria-label={t('action_modal.accessibility.button_refuse')}
- classes={{
- root: 'btn-secondary-negative',
- label: 'text-16-normal',
- }}
+ className="btnSecondary"
onClick={handleCloseClick}
>
{t('action_modal.refuse')}
diff --git a/src/components/Action/ActionModal/__snapshots__/ActionModal.spec.tsx.snap b/src/components/Action/ActionModal/__snapshots__/ActionModal.spec.tsx.snap
index 0c8806398fa551f57e1bcda0c2843a113133186f..2825edc3a9a03ccf4537cc5e822eafeab09ec7d3 100644
--- a/src/components/Action/ActionModal/__snapshots__/ActionModal.spec.tsx.snap
+++ b/src/components/Action/ActionModal/__snapshots__/ActionModal.spec.tsx.snap
@@ -1,1187 +1,105 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`ActionModal component should render correctly 1`] = `
-<Provider
- store={
- Object {
- "clearActions": [Function],
- "dispatch": [Function],
- "getActions": [Function],
- "getState": [Function],
- "replaceReducer": [Function],
- "subscribe": [Function],
- }
- }
+<body
+ style="padding-right: 0px; overflow: hidden;"
>
- <ActionModal
- action={
- Object {
- "_id": "ECOGESTURE0014",
- "action": true,
- "actionDuration": 3,
- "actionName": "J’attends que les plats chauds aient refroidi avant de les mettre au réfrigérateur et je les couvre.",
- "difficulty": 1,
- "doing": false,
- "efficiency": 1,
- "equipment": false,
- "equipmentInstallation": true,
- "equipmentType": Array [],
- "fluidTypes": Array [
- 0,
- ],
- "id": "ECOGESTURE0014",
- "impactLevel": 2,
- "investment": null,
- "longDescription": "En plaçant des plats chauds au réfrigérateur, vous réchauffez l’enceinte de l’appareil, ce qui entraîne une surconsommation. De plus, si les plats ne sont pas couverts, de la vapeur d’eau va se former et provoquer l’apparition du givre. Et couvrir les plats, c’est aussi éviter que les bactéries et les odeurs ne se répandent.",
- "longName": "J’attends que les plats chauds aient refroidi avant de les mettre au réfrigérateur et je les couvre.",
- "objective": false,
- "room": Array [
- 2,
- ],
- "season": "Sans saison",
- "shortName": "Chat échaudé",
- "usage": 5,
- "viewedInSelection": false,
- }
- }
- handleCloseClick={[MockFunction]}
- open={true}
- userChallenge={
- Object {
- "action": Object {
- "ecogesture": null,
- "startDate": null,
- "state": 0,
- },
- "description": "Description challenge 2",
- "duel": Object {
- "description": "Je parie un ours polaire que vous ne pouvez pas consommer moins que #CONSUMPTION € en 1 semaine",
- "duration": "P30D",
- "fluidTypes": Array [],
- "id": "DUEL001",
- "startDate": null,
- "state": 0,
- "threshold": 0,
- "title": "Title DUEL001",
- "userConsumption": 0,
- },
- "endingDate": null,
- "exploration": Object {
- "complementary_description": "Refaire un tour dans son profil si déjà fait",
- "date": null,
- "description": "Avoir complété son profil",
- "ecogesture_id": "",
- "fluid_condition": Array [],
- "id": "EXPLORATION001",
- "message_success": "Vous avez complété votre profil ou refait un tour dans votre profil",
- "progress": 0,
- "state": 0,
- "target": 1,
- "type": 1,
- },
- "id": "CHALLENGE0002",
- "progress": Object {
- "actionProgress": 0,
- "explorationProgress": 0,
- "quizProgress": 0,
- },
- "quiz": Object {
- "customQuestion": Object {
- "interval": 20,
- "period": Object {},
- "questionLabel": "Custom1",
- "result": 0,
- "singleFluid": false,
- "timeStep": 20,
- "type": 0,
- },
- "id": "QUIZ001",
- "questions": Array [
- Object {
- "answers": Array [
- Object {
- "answerLabel": "86 km",
- "isTrue": true,
- },
- Object {
- "answerLabel": "78 km",
- "isTrue": false,
- },
- Object {
- "answerLabel": "56 km",
- "isTrue": false,
- },
- ],
- "explanation": "L’aqueduc du Gier est un des aqueducs antiques de Lyon desservant la ville antique de Lugdunum. Avec ses 86 km il est le plus long des quatre aqueducs ayant alimenté la ville en eau, et celui dont les structures sont le mieux conservées. Il doit son nom au fait qu'il puise aux sources du Gier, affluent du Rhône",
- "questionLabel": "Quelle longueur faisait l’aqueduc du Gier pour acheminer l’eau sur Lyon à l’époque romaine ?",
- "result": 0,
- "source": "string",
- },
- Object {
- "answers": Array [
- Object {
- "answerLabel": "1 point d’eau public pour 800 habitants.",
- "isTrue": true,
- },
- Object {
- "answerLabel": "1 point d’eau public pour 400 habitants.",
- "isTrue": false,
- },
- Object {
- "answerLabel": "1 point d’eau public pour 200 habitants.",
- "isTrue": false,
- },
- ],
- "explanation": "string",
- "questionLabel": "En 1800 à Lyon, combien de points d'eau y avait-il par habitants ?",
- "result": 0,
- "source": "string",
- },
- Object {
- "answers": Array [
- Object {
- "answerLabel": "François Mitterrand",
- "isTrue": false,
- },
- Object {
- "answerLabel": "Napoléon Ier",
- "isTrue": true,
- },
- Object {
- "answerLabel": "Napoléon III",
- "isTrue": false,
- },
- ],
- "explanation": "string",
- "questionLabel": "Qui officialise la création de la Compagnie Générale des eaux ?",
- "result": 0,
- "source": "string",
- },
- Object {
- "answers": Array [
- Object {
- "answerLabel": "string",
- "isTrue": false,
- },
- Object {
- "answerLabel": "string",
- "isTrue": false,
- },
- Object {
- "answerLabel": "Aristide Dumont",
- "isTrue": true,
- },
- ],
- "explanation": "string",
- "questionLabel": "Quel ingénieur est à l’origine du projet d’alimentation en eau en 1856 ?",
- "result": 0,
- "source": "string",
- },
- ],
- "result": 0,
- "startDate": null,
- "state": 0,
- },
- "startDate": null,
- "state": 4,
- "success": 1,
- "target": 15,
- "title": "Challenge 2",
- }
- }
+ <div
+ aria-hidden="true"
+ />
+ <div
+ class="MuiDialog-root modal-root"
+ role="presentation"
+ style="position: fixed; z-index: 1300; right: 0px; bottom: 0px; top: 0px; left: 0px;"
>
- <WithStyles(ForwardRef(Dialog))
- aria-labelledby="accessibility-title"
- classes={
- Object {
- "paper": "modal-paper",
- "root": "modal-root",
- }
- }
- onClose={[MockFunction]}
- open={true}
+ <div
+ aria-hidden="true"
+ class="MuiBackdrop-root"
+ style="opacity: 1; webkit-transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"
+ />
+ <div
+ data-test="sentinelStart"
+ tabindex="0"
+ />
+ <div
+ class="MuiDialog-container MuiDialog-scrollPaper"
+ role="none presentation"
+ style="opacity: 1; webkit-transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"
+ tabindex="-1"
>
- <ForwardRef(Dialog)
+ <div
aria-labelledby="accessibility-title"
- classes={
- Object {
- "container": "MuiDialog-container",
- "paper": "MuiDialog-paper modal-paper",
- "paperFullScreen": "MuiDialog-paperFullScreen",
- "paperFullWidth": "MuiDialog-paperFullWidth",
- "paperScrollBody": "MuiDialog-paperScrollBody",
- "paperScrollPaper": "MuiDialog-paperScrollPaper",
- "paperWidthFalse": "MuiDialog-paperWidthFalse",
- "paperWidthLg": "MuiDialog-paperWidthLg",
- "paperWidthMd": "MuiDialog-paperWidthMd",
- "paperWidthSm": "MuiDialog-paperWidthSm",
- "paperWidthXl": "MuiDialog-paperWidthXl",
- "paperWidthXs": "MuiDialog-paperWidthXs",
- "root": "MuiDialog-root modal-root",
- "scrollBody": "MuiDialog-scrollBody",
- "scrollPaper": "MuiDialog-scrollPaper",
- }
- }
- onClose={[MockFunction]}
- open={true}
+ class="MuiPaper-root MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm MuiPaper-elevation24 MuiPaper-rounded"
+ role="dialog"
>
- <ForwardRef(Modal)
- BackdropComponent={
- Object {
- "$$typeof": Symbol(react.forward_ref),
- "Naked": Object {
- "$$typeof": Symbol(react.forward_ref),
- "propTypes": Object {
- "children": [Function],
- "className": [Function],
- "classes": [Function],
- "invisible": [Function],
- "open": [Function],
- "transitionDuration": [Function],
- },
- "render": [Function],
- },
- "displayName": "WithStyles(ForwardRef(Backdrop))",
- "options": Object {
- "defaultTheme": Object {
- "breakpoints": Object {
- "between": [Function],
- "down": [Function],
- "keys": Array [
- "xs",
- "sm",
- "md",
- "lg",
- "xl",
- ],
- "only": [Function],
- "up": [Function],
- "values": Object {
- "lg": 1280,
- "md": 960,
- "sm": 600,
- "xl": 1920,
- "xs": 0,
- },
- "width": [Function],
- },
- "direction": "ltr",
- "mixins": Object {
- "gutters": [Function],
- "toolbar": Object {
- "@media (min-width:0px) and (orientation: landscape)": Object {
- "minHeight": 48,
- },
- "@media (min-width:600px)": Object {
- "minHeight": 64,
- },
- "minHeight": 56,
- },
- },
- "overrides": Object {},
- "palette": Object {
- "action": Object {
- "activatedOpacity": 0.12,
- "active": "rgba(0, 0, 0, 0.54)",
- "disabled": "rgba(0, 0, 0, 0.26)",
- "disabledBackground": "rgba(0, 0, 0, 0.12)",
- "disabledOpacity": 0.38,
- "focus": "rgba(0, 0, 0, 0.12)",
- "focusOpacity": 0.12,
- "hover": "rgba(0, 0, 0, 0.04)",
- "hoverOpacity": 0.04,
- "selected": "rgba(0, 0, 0, 0.08)",
- "selectedOpacity": 0.08,
- },
- "augmentColor": [Function],
- "background": Object {
- "default": "#fafafa",
- "paper": "#fff",
- },
- "common": Object {
- "black": "#000",
- "white": "#fff",
- },
- "contrastThreshold": 3,
- "divider": "rgba(0, 0, 0, 0.12)",
- "error": Object {
- "contrastText": "#fff",
- "dark": "#d32f2f",
- "light": "#e57373",
- "main": "#f44336",
- },
- "getContrastText": [Function],
- "grey": Object {
- "100": "#f5f5f5",
- "200": "#eeeeee",
- "300": "#e0e0e0",
- "400": "#bdbdbd",
- "50": "#fafafa",
- "500": "#9e9e9e",
- "600": "#757575",
- "700": "#616161",
- "800": "#424242",
- "900": "#212121",
- "A100": "#d5d5d5",
- "A200": "#aaaaaa",
- "A400": "#303030",
- "A700": "#616161",
- },
- "info": Object {
- "contrastText": "#fff",
- "dark": "#1976d2",
- "light": "#64b5f6",
- "main": "#2196f3",
- },
- "primary": Object {
- "contrastText": "#fff",
- "dark": "#303f9f",
- "light": "#7986cb",
- "main": "#3f51b5",
- },
- "secondary": Object {
- "contrastText": "#fff",
- "dark": "#c51162",
- "light": "#ff4081",
- "main": "#f50057",
- },
- "success": Object {
- "contrastText": "rgba(0, 0, 0, 0.87)",
- "dark": "#388e3c",
- "light": "#81c784",
- "main": "#4caf50",
- },
- "text": Object {
- "disabled": "rgba(0, 0, 0, 0.38)",
- "hint": "rgba(0, 0, 0, 0.38)",
- "primary": "rgba(0, 0, 0, 0.87)",
- "secondary": "rgba(0, 0, 0, 0.54)",
- },
- "tonalOffset": 0.2,
- "type": "light",
- "warning": Object {
- "contrastText": "rgba(0, 0, 0, 0.87)",
- "dark": "#f57c00",
- "light": "#ffb74d",
- "main": "#ff9800",
- },
- },
- "props": Object {},
- "shadows": Array [
- "none",
- "0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12)",
- "0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12)",
- "0px 3px 3px -2px rgba(0,0,0,0.2),0px 3px 4px 0px rgba(0,0,0,0.14),0px 1px 8px 0px rgba(0,0,0,0.12)",
- "0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12)",
- "0px 3px 5px -1px rgba(0,0,0,0.2),0px 5px 8px 0px rgba(0,0,0,0.14),0px 1px 14px 0px rgba(0,0,0,0.12)",
- "0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12)",
- "0px 4px 5px -2px rgba(0,0,0,0.2),0px 7px 10px 1px rgba(0,0,0,0.14),0px 2px 16px 1px rgba(0,0,0,0.12)",
- "0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12)",
- "0px 5px 6px -3px rgba(0,0,0,0.2),0px 9px 12px 1px rgba(0,0,0,0.14),0px 3px 16px 2px rgba(0,0,0,0.12)",
- "0px 6px 6px -3px rgba(0,0,0,0.2),0px 10px 14px 1px rgba(0,0,0,0.14),0px 4px 18px 3px rgba(0,0,0,0.12)",
- "0px 6px 7px -4px rgba(0,0,0,0.2),0px 11px 15px 1px rgba(0,0,0,0.14),0px 4px 20px 3px rgba(0,0,0,0.12)",
- "0px 7px 8px -4px rgba(0,0,0,0.2),0px 12px 17px 2px rgba(0,0,0,0.14),0px 5px 22px 4px rgba(0,0,0,0.12)",
- "0px 7px 8px -4px rgba(0,0,0,0.2),0px 13px 19px 2px rgba(0,0,0,0.14),0px 5px 24px 4px rgba(0,0,0,0.12)",
- "0px 7px 9px -4px rgba(0,0,0,0.2),0px 14px 21px 2px rgba(0,0,0,0.14),0px 5px 26px 4px rgba(0,0,0,0.12)",
- "0px 8px 9px -5px rgba(0,0,0,0.2),0px 15px 22px 2px rgba(0,0,0,0.14),0px 6px 28px 5px rgba(0,0,0,0.12)",
- "0px 8px 10px -5px rgba(0,0,0,0.2),0px 16px 24px 2px rgba(0,0,0,0.14),0px 6px 30px 5px rgba(0,0,0,0.12)",
- "0px 8px 11px -5px rgba(0,0,0,0.2),0px 17px 26px 2px rgba(0,0,0,0.14),0px 6px 32px 5px rgba(0,0,0,0.12)",
- "0px 9px 11px -5px rgba(0,0,0,0.2),0px 18px 28px 2px rgba(0,0,0,0.14),0px 7px 34px 6px rgba(0,0,0,0.12)",
- "0px 9px 12px -6px rgba(0,0,0,0.2),0px 19px 29px 2px rgba(0,0,0,0.14),0px 7px 36px 6px rgba(0,0,0,0.12)",
- "0px 10px 13px -6px rgba(0,0,0,0.2),0px 20px 31px 3px rgba(0,0,0,0.14),0px 8px 38px 7px rgba(0,0,0,0.12)",
- "0px 10px 13px -6px rgba(0,0,0,0.2),0px 21px 33px 3px rgba(0,0,0,0.14),0px 8px 40px 7px rgba(0,0,0,0.12)",
- "0px 10px 14px -6px rgba(0,0,0,0.2),0px 22px 35px 3px rgba(0,0,0,0.14),0px 8px 42px 7px rgba(0,0,0,0.12)",
- "0px 11px 14px -7px rgba(0,0,0,0.2),0px 23px 36px 3px rgba(0,0,0,0.14),0px 9px 44px 8px rgba(0,0,0,0.12)",
- "0px 11px 15px -7px rgba(0,0,0,0.2),0px 24px 38px 3px rgba(0,0,0,0.14),0px 9px 46px 8px rgba(0,0,0,0.12)",
- ],
- "shape": Object {
- "borderRadius": 4,
- },
- "spacing": [Function],
- "transitions": Object {
- "create": [Function],
- "duration": Object {
- "complex": 375,
- "enteringScreen": 225,
- "leavingScreen": 195,
- "short": 250,
- "shorter": 200,
- "shortest": 150,
- "standard": 300,
- },
- "easing": Object {
- "easeIn": "cubic-bezier(0.4, 0, 1, 1)",
- "easeInOut": "cubic-bezier(0.4, 0, 0.2, 1)",
- "easeOut": "cubic-bezier(0.0, 0, 0.2, 1)",
- "sharp": "cubic-bezier(0.4, 0, 0.6, 1)",
- },
- "getAutoHeightDuration": [Function],
- },
- "typography": Object {
- "body1": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "1rem",
- "fontWeight": 400,
- "letterSpacing": "0.00938em",
- "lineHeight": 1.5,
- },
- "body2": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "0.875rem",
- "fontWeight": 400,
- "letterSpacing": "0.01071em",
- "lineHeight": 1.43,
- },
- "button": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "0.875rem",
- "fontWeight": 500,
- "letterSpacing": "0.02857em",
- "lineHeight": 1.75,
- "textTransform": "uppercase",
- },
- "caption": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "0.75rem",
- "fontWeight": 400,
- "letterSpacing": "0.03333em",
- "lineHeight": 1.66,
- },
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": 14,
- "fontWeightBold": 700,
- "fontWeightLight": 300,
- "fontWeightMedium": 500,
- "fontWeightRegular": 400,
- "h1": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "6rem",
- "fontWeight": 300,
- "letterSpacing": "-0.01562em",
- "lineHeight": 1.167,
- },
- "h2": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "3.75rem",
- "fontWeight": 300,
- "letterSpacing": "-0.00833em",
- "lineHeight": 1.2,
- },
- "h3": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "3rem",
- "fontWeight": 400,
- "letterSpacing": "0em",
- "lineHeight": 1.167,
- },
- "h4": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "2.125rem",
- "fontWeight": 400,
- "letterSpacing": "0.00735em",
- "lineHeight": 1.235,
- },
- "h5": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "1.5rem",
- "fontWeight": 400,
- "letterSpacing": "0em",
- "lineHeight": 1.334,
- },
- "h6": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "1.25rem",
- "fontWeight": 500,
- "letterSpacing": "0.0075em",
- "lineHeight": 1.6,
- },
- "htmlFontSize": 16,
- "overline": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "0.75rem",
- "fontWeight": 400,
- "letterSpacing": "0.08333em",
- "lineHeight": 2.66,
- "textTransform": "uppercase",
- },
- "pxToRem": [Function],
- "round": [Function],
- "subtitle1": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "1rem",
- "fontWeight": 400,
- "letterSpacing": "0.00938em",
- "lineHeight": 1.75,
- },
- "subtitle2": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "0.875rem",
- "fontWeight": 500,
- "letterSpacing": "0.00714em",
- "lineHeight": 1.57,
- },
- },
- "zIndex": Object {
- "appBar": 1100,
- "drawer": 1200,
- "mobileStepper": 1000,
- "modal": 1300,
- "snackbar": 1400,
- "speedDial": 1050,
- "tooltip": 1500,
- },
- },
- "name": "MuiBackdrop",
- },
- "propTypes": Object {
- "classes": [Function],
- "innerRef": [Function],
- },
- "render": [Function],
- "useStyles": [Function],
- }
- }
- BackdropProps={
- Object {
- "transitionDuration": Object {
- "enter": 225,
- "exit": 195,
- },
- }
- }
- className="MuiDialog-root modal-root"
- closeAfterTransition={true}
- disableEscapeKeyDown={false}
- onClose={[MockFunction]}
- open={true}
+ <div
+ id="accessibility-title"
>
- <ForwardRef(Portal)
- disablePortal={false}
+ action_modal.accessibility.window_title
+ </div>
+ <div
+ class="action-modal"
+ >
+ <svg
+ class="styles__icon___23x3R"
+ height="75"
+ width="75"
+ >
+ <use
+ xlink:href="#test-file-stub"
+ />
+ </svg>
+ <div
+ class="action-title text-16-normal"
+ >
+ action.duration
+ </div>
+ <div
+ class="action-text text-16-normal"
>
- <Portal
- containerInfo={
- <body
- style="padding-right: 0px; overflow: hidden;"
- >
- <div
- class="MuiDialog-root modal-root"
- role="presentation"
- style="position: fixed; z-index: 1300; right: 0px; bottom: 0px; top: 0px; left: 0px;"
- >
- <div
- aria-hidden="true"
- class="MuiBackdrop-root"
- style="opacity: 1; webkit-transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"
- />
- <div
- data-test="sentinelStart"
- tabindex="0"
- />
- <div
- class="MuiDialog-container MuiDialog-scrollPaper"
- role="none presentation"
- style="opacity: 1; webkit-transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"
- tabindex="-1"
- >
- <div
- aria-labelledby="accessibility-title"
- class="MuiPaper-root MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm MuiPaper-elevation24 MuiPaper-rounded"
- role="dialog"
- >
- <div
- id="accessibility-title"
- >
- action_modal.accessibility.window_title
- </div>
- <div
- class="action-modal"
- >
- <svg
- class="styles__icon___23x3R"
- height="75"
- width="75"
- >
- <use
- xlink:href="#test-file-stub"
- />
- </svg>
- <div
- class="action-title text-16-normal"
- >
- action.duration
- </div>
- <div
- class="action-text text-16-normal"
- >
- J’attends que les plats chauds aient refroidi avant de les mettre au réfrigérateur et je les couvre.
- </div>
- <div
- class="buttons"
- >
- <button
- aria-label="action_modal.accessibility.button_accept"
- class="MuiButtonBase-root MuiButton-root btn-secondary-negative MuiButton-text"
- tabindex="0"
- type="button"
- >
- <span
- class="MuiButton-label text-16-normal"
- >
- action_modal.accept
- </span>
- <span
- class="MuiTouchRipple-root"
- />
- </button>
- <button
- aria-label="action_modal.accessibility.button_refuse"
- class="MuiButtonBase-root MuiButton-root btn-secondary-negative MuiButton-text"
- tabindex="0"
- type="button"
- >
- <span
- class="MuiButton-label text-16-normal"
- >
- action_modal.refuse
- </span>
- <span
- class="MuiTouchRipple-root"
- />
- </button>
- </div>
- </div>
- </div>
- </div>
- <div
- data-test="sentinelEnd"
- tabindex="0"
- />
- </div>
- </body>
- }
+ J’attends que les plats chauds aient refroidi avant de les mettre au réfrigérateur et je les couvre.
+ </div>
+ <div
+ class="buttons"
+ >
+ <button
+ aria-label="action_modal.accessibility.button_accept"
+ class="MuiButtonBase-root MuiButton-root MuiButton-text btnSecondary"
+ tabindex="0"
+ type="button"
+ >
+ <span
+ class="MuiButton-label"
+ >
+ action_modal.accept
+ </span>
+ <span
+ class="MuiTouchRipple-root"
+ />
+ </button>
+ <button
+ aria-label="action_modal.accessibility.button_refuse"
+ class="MuiButtonBase-root MuiButton-root MuiButton-text btnSecondary"
+ tabindex="0"
+ type="button"
>
- <div
- className="MuiDialog-root modal-root"
- onKeyDown={[Function]}
- role="presentation"
- style={
- Object {
- "bottom": 0,
- "left": 0,
- "position": "fixed",
- "right": 0,
- "top": 0,
- "zIndex": 1300,
- }
- }
+ <span
+ class="MuiButton-label"
>
- <WithStyles(ForwardRef(Backdrop))
- onClick={[Function]}
- open={true}
- transitionDuration={
- Object {
- "enter": 225,
- "exit": 195,
- }
- }
- >
- <ForwardRef(Backdrop)
- classes={
- Object {
- "invisible": "MuiBackdrop-invisible",
- "root": "MuiBackdrop-root",
- }
- }
- onClick={[Function]}
- open={true}
- transitionDuration={
- Object {
- "enter": 225,
- "exit": 195,
- }
- }
- >
- <ForwardRef(Fade)
- in={true}
- onClick={[Function]}
- timeout={
- Object {
- "enter": 225,
- "exit": 195,
- }
- }
- >
- <Transition
- appear={true}
- enter={true}
- exit={true}
- in={true}
- mountOnEnter={false}
- onClick={[Function]}
- onEnter={[Function]}
- onEntered={[Function]}
- onEntering={[Function]}
- onExit={[Function]}
- onExited={[Function]}
- onExiting={[Function]}
- timeout={
- Object {
- "enter": 225,
- "exit": 195,
- }
- }
- unmountOnExit={false}
- >
- <div
- aria-hidden={true}
- className="MuiBackdrop-root"
- onClick={[Function]}
- style={
- Object {
- "opacity": 1,
- "visibility": undefined,
- }
- }
- />
- </Transition>
- </ForwardRef(Fade)>
- </ForwardRef(Backdrop)>
- </WithStyles(ForwardRef(Backdrop))>
- <Unstable_TrapFocus
- disableAutoFocus={false}
- disableEnforceFocus={false}
- disableRestoreFocus={false}
- getDoc={[Function]}
- isEnabled={[Function]}
- open={true}
- >
- <div
- data-test="sentinelStart"
- tabIndex={0}
- />
- <ForwardRef(Fade)
- appear={true}
- in={true}
- onEnter={[Function]}
- onExited={[Function]}
- role="none presentation"
- tabIndex="-1"
- timeout={
- Object {
- "enter": 225,
- "exit": 195,
- }
- }
- >
- <Transition
- appear={true}
- enter={true}
- exit={true}
- in={true}
- mountOnEnter={false}
- onEnter={[Function]}
- onEntered={[Function]}
- onEntering={[Function]}
- onExit={[Function]}
- onExited={[Function]}
- onExiting={[Function]}
- role="none presentation"
- tabIndex="-1"
- timeout={
- Object {
- "enter": 225,
- "exit": 195,
- }
- }
- unmountOnExit={false}
- >
- <div
- className="MuiDialog-container MuiDialog-scrollPaper"
- onMouseDown={[Function]}
- onMouseUp={[Function]}
- role="none presentation"
- style={
- Object {
- "opacity": 1,
- "visibility": undefined,
- }
- }
- tabIndex="-1"
- >
- <WithStyles(ForwardRef(Paper))
- aria-labelledby="accessibility-title"
- className="MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm"
- elevation={24}
- role="dialog"
- >
- <ForwardRef(Paper)
- aria-labelledby="accessibility-title"
- className="MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm"
- classes={
- Object {
- "elevation0": "MuiPaper-elevation0",
- "elevation1": "MuiPaper-elevation1",
- "elevation10": "MuiPaper-elevation10",
- "elevation11": "MuiPaper-elevation11",
- "elevation12": "MuiPaper-elevation12",
- "elevation13": "MuiPaper-elevation13",
- "elevation14": "MuiPaper-elevation14",
- "elevation15": "MuiPaper-elevation15",
- "elevation16": "MuiPaper-elevation16",
- "elevation17": "MuiPaper-elevation17",
- "elevation18": "MuiPaper-elevation18",
- "elevation19": "MuiPaper-elevation19",
- "elevation2": "MuiPaper-elevation2",
- "elevation20": "MuiPaper-elevation20",
- "elevation21": "MuiPaper-elevation21",
- "elevation22": "MuiPaper-elevation22",
- "elevation23": "MuiPaper-elevation23",
- "elevation24": "MuiPaper-elevation24",
- "elevation3": "MuiPaper-elevation3",
- "elevation4": "MuiPaper-elevation4",
- "elevation5": "MuiPaper-elevation5",
- "elevation6": "MuiPaper-elevation6",
- "elevation7": "MuiPaper-elevation7",
- "elevation8": "MuiPaper-elevation8",
- "elevation9": "MuiPaper-elevation9",
- "outlined": "MuiPaper-outlined",
- "root": "MuiPaper-root",
- "rounded": "MuiPaper-rounded",
- }
- }
- elevation={24}
- role="dialog"
- >
- <div
- aria-labelledby="accessibility-title"
- className="MuiPaper-root MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm MuiPaper-elevation24 MuiPaper-rounded"
- role="dialog"
- >
- <div
- id="accessibility-title"
- >
- action_modal.accessibility.window_title
- </div>
- <div
- className="action-modal"
- >
- <Icon
- icon="test-file-stub"
- size={75}
- spin={false}
- >
- <Component
- className="styles__icon___23x3R"
- height={75}
- style={Object {}}
- width={75}
- >
- <svg
- className="styles__icon___23x3R"
- height={75}
- style={Object {}}
- width={75}
- >
- <use
- xlinkHref="#test-file-stub"
- />
- </svg>
- </Component>
- </Icon>
- <div
- className="action-title text-16-normal"
- >
- action.duration
- </div>
- <div
- className="action-text text-16-normal"
- >
- J’attends que les plats chauds aient refroidi avant de les mettre au réfrigérateur et je les couvre.
- </div>
- <div
- className="buttons"
- >
- <WithStyles(ForwardRef(Button))
- aria-label="action_modal.accessibility.button_accept"
- classes={
- Object {
- "label": "text-16-normal",
- "root": "btn-secondary-negative",
- }
- }
- onClick={[Function]}
- >
- <ForwardRef(Button)
- aria-label="action_modal.accessibility.button_accept"
- classes={
- Object {
- "colorInherit": "MuiButton-colorInherit",
- "contained": "MuiButton-contained",
- "containedPrimary": "MuiButton-containedPrimary",
- "containedSecondary": "MuiButton-containedSecondary",
- "containedSizeLarge": "MuiButton-containedSizeLarge",
- "containedSizeSmall": "MuiButton-containedSizeSmall",
- "disableElevation": "MuiButton-disableElevation",
- "disabled": "Mui-disabled",
- "endIcon": "MuiButton-endIcon",
- "focusVisible": "Mui-focusVisible",
- "fullWidth": "MuiButton-fullWidth",
- "iconSizeLarge": "MuiButton-iconSizeLarge",
- "iconSizeMedium": "MuiButton-iconSizeMedium",
- "iconSizeSmall": "MuiButton-iconSizeSmall",
- "label": "MuiButton-label text-16-normal",
- "outlined": "MuiButton-outlined",
- "outlinedPrimary": "MuiButton-outlinedPrimary",
- "outlinedSecondary": "MuiButton-outlinedSecondary",
- "outlinedSizeLarge": "MuiButton-outlinedSizeLarge",
- "outlinedSizeSmall": "MuiButton-outlinedSizeSmall",
- "root": "MuiButton-root btn-secondary-negative",
- "sizeLarge": "MuiButton-sizeLarge",
- "sizeSmall": "MuiButton-sizeSmall",
- "startIcon": "MuiButton-startIcon",
- "text": "MuiButton-text",
- "textPrimary": "MuiButton-textPrimary",
- "textSecondary": "MuiButton-textSecondary",
- "textSizeLarge": "MuiButton-textSizeLarge",
- "textSizeSmall": "MuiButton-textSizeSmall",
- }
- }
- onClick={[Function]}
- >
- <WithStyles(ForwardRef(ButtonBase))
- aria-label="action_modal.accessibility.button_accept"
- className="MuiButton-root btn-secondary-negative MuiButton-text"
- component="button"
- disabled={false}
- focusRipple={true}
- focusVisibleClassName="Mui-focusVisible"
- onClick={[Function]}
- type="button"
- >
- <ForwardRef(ButtonBase)
- aria-label="action_modal.accessibility.button_accept"
- className="MuiButton-root btn-secondary-negative MuiButton-text"
- classes={
- Object {
- "disabled": "Mui-disabled",
- "focusVisible": "Mui-focusVisible",
- "root": "MuiButtonBase-root",
- }
- }
- component="button"
- disabled={false}
- focusRipple={true}
- focusVisibleClassName="Mui-focusVisible"
- onClick={[Function]}
- type="button"
- >
- <button
- aria-label="action_modal.accessibility.button_accept"
- className="MuiButtonBase-root MuiButton-root btn-secondary-negative MuiButton-text"
- disabled={false}
- onBlur={[Function]}
- onClick={[Function]}
- onDragLeave={[Function]}
- onFocus={[Function]}
- onKeyDown={[Function]}
- onKeyUp={[Function]}
- onMouseDown={[Function]}
- onMouseLeave={[Function]}
- onMouseUp={[Function]}
- onTouchEnd={[Function]}
- onTouchMove={[Function]}
- onTouchStart={[Function]}
- tabIndex={0}
- type="button"
- >
- <span
- className="MuiButton-label text-16-normal"
- >
- action_modal.accept
- </span>
- <WithStyles(memo)
- center={false}
- >
- <ForwardRef(TouchRipple)
- center={false}
- classes={
- Object {
- "child": "MuiTouchRipple-child",
- "childLeaving": "MuiTouchRipple-childLeaving",
- "childPulsate": "MuiTouchRipple-childPulsate",
- "ripple": "MuiTouchRipple-ripple",
- "ripplePulsate": "MuiTouchRipple-ripplePulsate",
- "rippleVisible": "MuiTouchRipple-rippleVisible",
- "root": "MuiTouchRipple-root",
- }
- }
- >
- <span
- className="MuiTouchRipple-root"
- >
- <TransitionGroup
- childFactory={[Function]}
- component={null}
- exit={true}
- />
- </span>
- </ForwardRef(TouchRipple)>
- </WithStyles(memo)>
- </button>
- </ForwardRef(ButtonBase)>
- </WithStyles(ForwardRef(ButtonBase))>
- </ForwardRef(Button)>
- </WithStyles(ForwardRef(Button))>
- <WithStyles(ForwardRef(Button))
- aria-label="action_modal.accessibility.button_refuse"
- classes={
- Object {
- "label": "text-16-normal",
- "root": "btn-secondary-negative",
- }
- }
- onClick={[MockFunction]}
- >
- <ForwardRef(Button)
- aria-label="action_modal.accessibility.button_refuse"
- classes={
- Object {
- "colorInherit": "MuiButton-colorInherit",
- "contained": "MuiButton-contained",
- "containedPrimary": "MuiButton-containedPrimary",
- "containedSecondary": "MuiButton-containedSecondary",
- "containedSizeLarge": "MuiButton-containedSizeLarge",
- "containedSizeSmall": "MuiButton-containedSizeSmall",
- "disableElevation": "MuiButton-disableElevation",
- "disabled": "Mui-disabled",
- "endIcon": "MuiButton-endIcon",
- "focusVisible": "Mui-focusVisible",
- "fullWidth": "MuiButton-fullWidth",
- "iconSizeLarge": "MuiButton-iconSizeLarge",
- "iconSizeMedium": "MuiButton-iconSizeMedium",
- "iconSizeSmall": "MuiButton-iconSizeSmall",
- "label": "MuiButton-label text-16-normal",
- "outlined": "MuiButton-outlined",
- "outlinedPrimary": "MuiButton-outlinedPrimary",
- "outlinedSecondary": "MuiButton-outlinedSecondary",
- "outlinedSizeLarge": "MuiButton-outlinedSizeLarge",
- "outlinedSizeSmall": "MuiButton-outlinedSizeSmall",
- "root": "MuiButton-root btn-secondary-negative",
- "sizeLarge": "MuiButton-sizeLarge",
- "sizeSmall": "MuiButton-sizeSmall",
- "startIcon": "MuiButton-startIcon",
- "text": "MuiButton-text",
- "textPrimary": "MuiButton-textPrimary",
- "textSecondary": "MuiButton-textSecondary",
- "textSizeLarge": "MuiButton-textSizeLarge",
- "textSizeSmall": "MuiButton-textSizeSmall",
- }
- }
- onClick={[MockFunction]}
- >
- <WithStyles(ForwardRef(ButtonBase))
- aria-label="action_modal.accessibility.button_refuse"
- className="MuiButton-root btn-secondary-negative MuiButton-text"
- component="button"
- disabled={false}
- focusRipple={true}
- focusVisibleClassName="Mui-focusVisible"
- onClick={[MockFunction]}
- type="button"
- >
- <ForwardRef(ButtonBase)
- aria-label="action_modal.accessibility.button_refuse"
- className="MuiButton-root btn-secondary-negative MuiButton-text"
- classes={
- Object {
- "disabled": "Mui-disabled",
- "focusVisible": "Mui-focusVisible",
- "root": "MuiButtonBase-root",
- }
- }
- component="button"
- disabled={false}
- focusRipple={true}
- focusVisibleClassName="Mui-focusVisible"
- onClick={[MockFunction]}
- type="button"
- >
- <button
- aria-label="action_modal.accessibility.button_refuse"
- className="MuiButtonBase-root MuiButton-root btn-secondary-negative MuiButton-text"
- disabled={false}
- onBlur={[Function]}
- onClick={[MockFunction]}
- onDragLeave={[Function]}
- onFocus={[Function]}
- onKeyDown={[Function]}
- onKeyUp={[Function]}
- onMouseDown={[Function]}
- onMouseLeave={[Function]}
- onMouseUp={[Function]}
- onTouchEnd={[Function]}
- onTouchMove={[Function]}
- onTouchStart={[Function]}
- tabIndex={0}
- type="button"
- >
- <span
- className="MuiButton-label text-16-normal"
- >
- action_modal.refuse
- </span>
- <WithStyles(memo)
- center={false}
- >
- <ForwardRef(TouchRipple)
- center={false}
- classes={
- Object {
- "child": "MuiTouchRipple-child",
- "childLeaving": "MuiTouchRipple-childLeaving",
- "childPulsate": "MuiTouchRipple-childPulsate",
- "ripple": "MuiTouchRipple-ripple",
- "ripplePulsate": "MuiTouchRipple-ripplePulsate",
- "rippleVisible": "MuiTouchRipple-rippleVisible",
- "root": "MuiTouchRipple-root",
- }
- }
- >
- <span
- className="MuiTouchRipple-root"
- >
- <TransitionGroup
- childFactory={[Function]}
- component={null}
- exit={true}
- />
- </span>
- </ForwardRef(TouchRipple)>
- </WithStyles(memo)>
- </button>
- </ForwardRef(ButtonBase)>
- </WithStyles(ForwardRef(ButtonBase))>
- </ForwardRef(Button)>
- </WithStyles(ForwardRef(Button))>
- </div>
- </div>
- </div>
- </ForwardRef(Paper)>
- </WithStyles(ForwardRef(Paper))>
- </div>
- </Transition>
- </ForwardRef(Fade)>
- <div
- data-test="sentinelEnd"
- tabIndex={0}
- />
- </Unstable_TrapFocus>
- </div>
- </Portal>
- </ForwardRef(Portal)>
- </ForwardRef(Modal)>
- </ForwardRef(Dialog)>
- </WithStyles(ForwardRef(Dialog))>
- </ActionModal>
-</Provider>
+ action_modal.refuse
+ </span>
+ <span
+ class="MuiTouchRipple-root"
+ />
+ </button>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div
+ data-test="sentinelEnd"
+ tabindex="0"
+ />
+ </div>
+</body>
`;
diff --git a/src/components/Action/ActionModal/actionModal.scss b/src/components/Action/ActionModal/actionModal.scss
index ff9d610dd92a77744ee8286fee2793ae44da5f62..9fc0a38531134834ae1596bc99269650ac9f33cc 100644
--- a/src/components/Action/ActionModal/actionModal.scss
+++ b/src/components/Action/ActionModal/actionModal.scss
@@ -15,8 +15,11 @@
.action-text {
margin: 1.6rem 0;
}
- .buttons button {
- margin-top: 0.5rem;
+ .buttons {
+ width: 100%;
+ display: flex;
+ flex-direction: column;
+ gap: 1rem;
}
}
diff --git a/src/components/Action/ActionOnGoing/ActionOnGoing.spec.tsx b/src/components/Action/ActionOnGoing/ActionOnGoing.spec.tsx
index de69a0814379f8b24950e6235fc664908603cf8c..899e6e3cdeb3b9216ac26e2433901bf913bc08cb 100644
--- a/src/components/Action/ActionOnGoing/ActionOnGoing.spec.tsx
+++ b/src/components/Action/ActionOnGoing/ActionOnGoing.spec.tsx
@@ -1,22 +1,21 @@
-import { Button } from '@material-ui/core'
-import EcogestureModal from 'components/Ecogesture/EcogestureModal/EcogestureModal'
+import { render, screen, waitFor } from '@testing-library/react'
+import { userEvent } from '@testing-library/user-event'
import { UserActionState } from 'enums'
-import { mount } from 'enzyme'
-import toJson from 'enzyme-to-json'
import { DateTime } from 'luxon'
import { UserAction } from 'models'
import React from 'react'
import { Provider } from 'react-redux'
-import { defaultEcogestureData } from 'tests/__mocks__/actionData.mock'
+import {
+ defaultEcogestureData,
+ ecogestureDefault,
+} from 'tests/__mocks__/actionData.mock'
import { createMockEcolyoStore } from 'tests/__mocks__/store'
-import { waitForComponentToPaint } from 'tests/__mocks__/testUtils'
import ActionOnGoing from './ActionOnGoing'
describe('ActionOnGoing component', () => {
const store = createMockEcolyoStore()
const userAction: UserAction = {
- // TODO if ecogesture is null snapshot test is useless
- ecogesture: null,
+ ecogesture: ecogestureDefault,
startDate: DateTime.local(2020, 1, 1)
.setZone('utc', {
keepLocalTime: true,
@@ -25,13 +24,13 @@ describe('ActionOnGoing component', () => {
state: UserActionState.ONGOING,
}
it('should render correctly', async () => {
- const wrapper = mount(
+ const { container } = render(
<Provider store={store}>
<ActionOnGoing userAction={userAction} />
</Provider>
)
- await waitForComponentToPaint(wrapper)
- expect(toJson(wrapper)).toMatchSnapshot()
+ await waitFor(() => null, { container })
+ expect(container).toMatchSnapshot()
})
it('should click on button open ecogesture Modal', async () => {
const userAction1: UserAction = {
@@ -40,13 +39,13 @@ describe('ActionOnGoing component', () => {
state: UserActionState.ONGOING,
}
- const wrapper = mount(
+ const { container } = render(
<Provider store={store}>
<ActionOnGoing userAction={userAction1} />
</Provider>
)
- await waitForComponentToPaint(wrapper)
- wrapper.find(Button).first().simulate('click')
- expect(wrapper.find(EcogestureModal).exists()).toBeTruthy()
+ await waitFor(() => null, { container })
+ await userEvent.click(await screen.findByText('action.details'))
+ expect(screen.findByRole('dialog')).toBeTruthy()
})
})
diff --git a/src/components/Action/ActionOnGoing/ActionOnGoing.tsx b/src/components/Action/ActionOnGoing/ActionOnGoing.tsx
index 5e869ec44ac786f1566741342d72d6b0f2030141..81d15d6abb3eaec8e75a98ac99d64f00f6799e3b 100644
--- a/src/components/Action/ActionOnGoing/ActionOnGoing.tsx
+++ b/src/components/Action/ActionOnGoing/ActionOnGoing.tsx
@@ -88,13 +88,7 @@ const ActionOnGoing = ({ userAction }: { userAction: UserAction }) => {
</div>
<div className="result-title text-18-bold"> {t('action.result')}</div>
<div className="result-date text-24-bold">{getResultDate()}</div>
- <Button
- classes={{
- root: 'btn-secondary-negative btn-detail',
- label: 'text-16-normal',
- }}
- onClick={toggleEcogestureModal}
- >
+ <Button className="btnSecondary" onClick={toggleEcogestureModal}>
{t('action.details')}
</Button>
<EcogestureModal
diff --git a/src/components/Action/ActionOnGoing/__snapshots__/ActionOnGoing.spec.tsx.snap b/src/components/Action/ActionOnGoing/__snapshots__/ActionOnGoing.spec.tsx.snap
index bb9fa52a80a3e3659e68e396e173ac96dc8ffde6..e86fdfe3d246cad1efe9072557c48bb824fd1461 100644
--- a/src/components/Action/ActionOnGoing/__snapshots__/ActionOnGoing.spec.tsx.snap
+++ b/src/components/Action/ActionOnGoing/__snapshots__/ActionOnGoing.spec.tsx.snap
@@ -1,30 +1,62 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`ActionOnGoing component should render correctly 1`] = `
-<Provider
- store={
- Object {
- "clearActions": [Function],
- "dispatch": [Function],
- "getActions": [Function],
- "getState": [Function],
- "replaceReducer": [Function],
- "subscribe": [Function],
- }
- }
->
- <ActionOnGoing
- userAction={
- Object {
- "ecogesture": null,
- "startDate": "2020-01-01T00:00:00.000Z",
- "state": 1,
- }
- }
+<div>
+ <div
+ class="action-ongoing"
>
<div
- className="action-ongoing"
- />
- </ActionOnGoing>
-</Provider>
+ class="duration text-18-normal"
+ >
+ action.duration
+ </div>
+ <div
+ class="description text-18-bold"
+ >
+ Je me lave les mains à l'eau froide.
+ </div>
+ <div
+ class="duration-image"
+ >
+ <svg
+ aria-hidden="true"
+ class="duration-icon styles__icon___23x3R"
+ height="230"
+ width="230"
+ >
+ <use
+ xlink:href="#test-file-stub"
+ />
+ </svg>
+ <div
+ class="pie"
+ />
+ </div>
+ <div
+ class="result-title text-18-bold"
+ >
+
+ action.result
+ </div>
+ <div
+ class="result-date text-24-bold"
+ >
+ samedi 04 janvier
+ </div>
+ <button
+ class="MuiButtonBase-root MuiButton-root MuiButton-text btnSecondary"
+ tabindex="0"
+ type="button"
+ >
+ <span
+ class="MuiButton-label"
+ >
+ action.details
+ </span>
+ <span
+ class="MuiTouchRipple-root"
+ />
+ </button>
+ </div>
+</div>
`;
diff --git a/src/components/Action/ActionOnGoing/actionOnGoing.scss b/src/components/Action/ActionOnGoing/actionOnGoing.scss
index 8aa859eb56f35ce0c9e9a2923e9b8ea8ddea80d2..bced79a459361957a10d0f1de56df14bd2538d87 100644
--- a/src/components/Action/ActionOnGoing/actionOnGoing.scss
+++ b/src/components/Action/ActionOnGoing/actionOnGoing.scss
@@ -24,9 +24,6 @@
color: $blue-light;
margin-bottom: 2rem;
}
- button.btn-detail {
- padding: 0.3rem;
- }
.duration-image {
position: relative;
padding: 1rem;
diff --git a/src/components/Action/ActionView.spec.tsx b/src/components/Action/ActionView.spec.tsx
index 8f8936c0d3cf2af2b1ed9abf4ccbc39efda0fb70..22933cb1b1df0c435f1afc00b8aaf0e5d3458bfe 100644
--- a/src/components/Action/ActionView.spec.tsx
+++ b/src/components/Action/ActionView.spec.tsx
@@ -1,26 +1,29 @@
+import { render } from '@testing-library/react'
import ActionView from 'components/Action/ActionView'
import { UserActionState } from 'enums'
-import { mount } from 'enzyme'
-import toJson from 'enzyme-to-json'
import React from 'react'
import { Provider } from 'react-redux'
import { createMockEcolyoStore } from 'tests/__mocks__/store'
-import { waitForComponentToPaint } from 'tests/__mocks__/testUtils'
import { userChallengeData } from 'tests/__mocks__/userChallengeData.mock'
-import ActionChoose from './ActionChoose/ActionChoose'
-import ActionDone from './ActionDone/ActionDone'
-import ActionOnGoing from './ActionOnGoing/ActionOnGoing'
jest.mock('components/Header/CozyBar', () => 'mock-cozybar')
jest.mock('components/Header/Header', () => 'mock-header')
jest.mock('components/Content/Content', () => 'mock-content')
jest.mock(
- 'components/Action/ActionBegin/ActionBegin.tsx',
- () => 'mock-action-begin'
+ 'components/Action/ActionChoose/ActionChoose.tsx',
+ () => 'mock-action-choose'
+)
+jest.mock(
+ 'components/Action/ActionOnGoing/ActionOnGoing.tsx',
+ () => 'mock-action-onGoing'
+)
+jest.mock(
+ 'components/Action/ActionDone/ActionDone.tsx',
+ () => 'mock-action-done'
)
describe('ActionView component', () => {
- it('should render ActionChoose component', async () => {
+ it('should render match snapshot with "Unstarted" state', async () => {
const store = createMockEcolyoStore({
challenge: {
currentChallenge: {
@@ -32,16 +35,33 @@ describe('ActionView component', () => {
},
},
})
- const wrapper = mount(
+ const { container } = render(
<Provider store={store}>
<ActionView />
</Provider>
)
- expect(wrapper.find(ActionChoose).exists()).toBeTruthy()
- await waitForComponentToPaint(wrapper)
- expect(toJson(wrapper)).toMatchSnapshot()
+ expect(container).toMatchSnapshot()
})
- it('should render ActionDone component', () => {
+ it('should render match snapshot with "onGoing" state', async () => {
+ const store = createMockEcolyoStore({
+ challenge: {
+ currentChallenge: {
+ ...userChallengeData[1],
+ action: {
+ ...userChallengeData[1].action,
+ state: UserActionState.ONGOING,
+ },
+ },
+ },
+ })
+ const { container } = render(
+ <Provider store={store}>
+ <ActionView />
+ </Provider>
+ )
+ expect(container).toMatchSnapshot()
+ })
+ it('should render match snapshot with "Notification" state', async () => {
const store = createMockEcolyoStore({
challenge: {
currentChallenge: {
@@ -53,30 +73,29 @@ describe('ActionView component', () => {
},
},
})
- const wrapper = mount(
+ const { container } = render(
<Provider store={store}>
<ActionView />
</Provider>
)
- expect(wrapper.find(ActionDone).exists()).toBeTruthy()
+ expect(container).toMatchSnapshot()
})
- it('should render ActionOnGoing component', () => {
+ it('should render match snapshot with default case', async () => {
const store = createMockEcolyoStore({
challenge: {
currentChallenge: {
...userChallengeData[1],
action: {
...userChallengeData[1].action,
- state: UserActionState.ONGOING,
},
},
},
})
- const wrapper = mount(
+ const { container } = render(
<Provider store={store}>
<ActionView />
</Provider>
)
- expect(wrapper.find(ActionOnGoing).exists()).toBeTruthy()
+ expect(container).toMatchSnapshot()
})
})
diff --git a/src/components/Action/__snapshots__/ActionView.spec.tsx.snap b/src/components/Action/__snapshots__/ActionView.spec.tsx.snap
index 1136e5081d41803e638e3814c6f018eb3c839794..6197c430c16f23523cbf9163f61e433bc862f146 100644
--- a/src/components/Action/__snapshots__/ActionView.spec.tsx.snap
+++ b/src/components/Action/__snapshots__/ActionView.spec.tsx.snap
@@ -1,324 +1,81 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
-exports[`ActionView component should render ActionChoose component 1`] = `
-<Provider
- store={
- Object {
- "clearActions": [Function],
- "dispatch": [Function],
- "getActions": [Function],
- "getState": [Function],
- "replaceReducer": [Function],
- "subscribe": [Function],
- }
- }
->
- <ActionView>
- <mock-cozybar
- displayBackArrow={true}
- titleKey="common.title_action"
+exports[`ActionView component should render match snapshot with "Notification" state 1`] = `
+<div>
+ <mock-cozybar
+ displaybackarrow="true"
+ titlekey="common.title_action"
+ />
+ <mock-header
+ desktoptitlekey="common.title_action"
+ displaybackarrow="true"
+ />
+ <mock-content
+ heightoffset="0"
+ >
+ <mock-action-done
+ currentchallenge="[object Object]"
/>
- <mock-header
- desktopTitleKey="common.title_action"
- displayBackArrow={true}
- setHeaderHeight={[Function]}
+ </mock-content>
+</div>
+`;
+
+exports[`ActionView component should render match snapshot with "Unstarted" state 1`] = `
+<div>
+ <mock-cozybar
+ displaybackarrow="true"
+ titlekey="common.title_action"
+ />
+ <mock-header
+ desktoptitlekey="common.title_action"
+ displaybackarrow="true"
+ />
+ <mock-content
+ heightoffset="0"
+ >
+ <mock-action-choose
+ userchallenge="[object Object]"
+ />
+ </mock-content>
+</div>
+`;
+
+exports[`ActionView component should render match snapshot with "onGoing" state 1`] = `
+<div>
+ <mock-cozybar
+ displaybackarrow="true"
+ titlekey="common.title_action"
+ />
+ <mock-header
+ desktoptitlekey="common.title_action"
+ displaybackarrow="true"
+ />
+ <mock-content
+ heightoffset="0"
+ >
+ <mock-action-ongoing
+ useraction="[object Object]"
+ />
+ </mock-content>
+</div>
+`;
+
+exports[`ActionView component should render match snapshot with default case 1`] = `
+<div>
+ <mock-cozybar
+ displaybackarrow="true"
+ titlekey="common.title_action"
+ />
+ <mock-header
+ desktoptitlekey="common.title_action"
+ displaybackarrow="true"
+ />
+ <mock-content
+ heightoffset="0"
+ >
+ <mock-action-choose
+ userchallenge="[object Object]"
/>
- <mock-content
- heightOffset={0}
- >
- <ActionChoose
- userChallenge={
- Object {
- "action": Object {
- "ecogesture": null,
- "startDate": null,
- "state": 0,
- },
- "description": "Description challenge 2",
- "duel": Object {
- "description": "Je parie un ours polaire que vous ne pouvez pas consommer moins que #CONSUMPTION € en 1 semaine",
- "duration": "P30D",
- "fluidTypes": Array [],
- "id": "DUEL001",
- "startDate": null,
- "state": 0,
- "threshold": 0,
- "title": "Title DUEL001",
- "userConsumption": 0,
- },
- "endingDate": null,
- "exploration": Object {
- "complementary_description": "Refaire un tour dans son profil si déjà fait",
- "date": null,
- "description": "Avoir complété son profil",
- "ecogesture_id": "",
- "fluid_condition": Array [],
- "id": "EXPLORATION001",
- "message_success": "Vous avez complété votre profil ou refait un tour dans votre profil",
- "progress": 0,
- "state": 0,
- "target": 1,
- "type": 1,
- },
- "id": "CHALLENGE0002",
- "progress": Object {
- "actionProgress": 0,
- "explorationProgress": 0,
- "quizProgress": 0,
- },
- "quiz": Object {
- "customQuestion": Object {
- "interval": 20,
- "period": Object {},
- "questionLabel": "Custom1",
- "result": 0,
- "singleFluid": false,
- "timeStep": 20,
- "type": 0,
- },
- "id": "QUIZ001",
- "questions": Array [
- Object {
- "answers": Array [
- Object {
- "answerLabel": "86 km",
- "isTrue": true,
- },
- Object {
- "answerLabel": "78 km",
- "isTrue": false,
- },
- Object {
- "answerLabel": "56 km",
- "isTrue": false,
- },
- ],
- "explanation": "L’aqueduc du Gier est un des aqueducs antiques de Lyon desservant la ville antique de Lugdunum. Avec ses 86 km il est le plus long des quatre aqueducs ayant alimenté la ville en eau, et celui dont les structures sont le mieux conservées. Il doit son nom au fait qu'il puise aux sources du Gier, affluent du Rhône",
- "questionLabel": "Quelle longueur faisait l’aqueduc du Gier pour acheminer l’eau sur Lyon à l’époque romaine ?",
- "result": 0,
- "source": "string",
- },
- Object {
- "answers": Array [
- Object {
- "answerLabel": "1 point d’eau public pour 800 habitants.",
- "isTrue": true,
- },
- Object {
- "answerLabel": "1 point d’eau public pour 400 habitants.",
- "isTrue": false,
- },
- Object {
- "answerLabel": "1 point d’eau public pour 200 habitants.",
- "isTrue": false,
- },
- ],
- "explanation": "string",
- "questionLabel": "En 1800 à Lyon, combien de points d'eau y avait-il par habitants ?",
- "result": 0,
- "source": "string",
- },
- Object {
- "answers": Array [
- Object {
- "answerLabel": "François Mitterrand",
- "isTrue": false,
- },
- Object {
- "answerLabel": "Napoléon Ier",
- "isTrue": true,
- },
- Object {
- "answerLabel": "Napoléon III",
- "isTrue": false,
- },
- ],
- "explanation": "string",
- "questionLabel": "Qui officialise la création de la Compagnie Générale des eaux ?",
- "result": 0,
- "source": "string",
- },
- Object {
- "answers": Array [
- Object {
- "answerLabel": "string",
- "isTrue": false,
- },
- Object {
- "answerLabel": "string",
- "isTrue": false,
- },
- Object {
- "answerLabel": "Aristide Dumont",
- "isTrue": true,
- },
- ],
- "explanation": "string",
- "questionLabel": "Quel ingénieur est à l’origine du projet d’alimentation en eau en 1856 ?",
- "result": 0,
- "source": "string",
- },
- ],
- "result": 0,
- "startDate": null,
- "state": 0,
- },
- "startDate": null,
- "state": 4,
- "success": 1,
- "target": 15,
- "title": "Challenge 2",
- }
- }
- >
- <mock-action-begin
- setShowList={[Function]}
- userChallenge={
- Object {
- "action": Object {
- "ecogesture": null,
- "startDate": null,
- "state": 0,
- },
- "description": "Description challenge 2",
- "duel": Object {
- "description": "Je parie un ours polaire que vous ne pouvez pas consommer moins que #CONSUMPTION € en 1 semaine",
- "duration": "P30D",
- "fluidTypes": Array [],
- "id": "DUEL001",
- "startDate": null,
- "state": 0,
- "threshold": 0,
- "title": "Title DUEL001",
- "userConsumption": 0,
- },
- "endingDate": null,
- "exploration": Object {
- "complementary_description": "Refaire un tour dans son profil si déjà fait",
- "date": null,
- "description": "Avoir complété son profil",
- "ecogesture_id": "",
- "fluid_condition": Array [],
- "id": "EXPLORATION001",
- "message_success": "Vous avez complété votre profil ou refait un tour dans votre profil",
- "progress": 0,
- "state": 0,
- "target": 1,
- "type": 1,
- },
- "id": "CHALLENGE0002",
- "progress": Object {
- "actionProgress": 0,
- "explorationProgress": 0,
- "quizProgress": 0,
- },
- "quiz": Object {
- "customQuestion": Object {
- "interval": 20,
- "period": Object {},
- "questionLabel": "Custom1",
- "result": 0,
- "singleFluid": false,
- "timeStep": 20,
- "type": 0,
- },
- "id": "QUIZ001",
- "questions": Array [
- Object {
- "answers": Array [
- Object {
- "answerLabel": "86 km",
- "isTrue": true,
- },
- Object {
- "answerLabel": "78 km",
- "isTrue": false,
- },
- Object {
- "answerLabel": "56 km",
- "isTrue": false,
- },
- ],
- "explanation": "L’aqueduc du Gier est un des aqueducs antiques de Lyon desservant la ville antique de Lugdunum. Avec ses 86 km il est le plus long des quatre aqueducs ayant alimenté la ville en eau, et celui dont les structures sont le mieux conservées. Il doit son nom au fait qu'il puise aux sources du Gier, affluent du Rhône",
- "questionLabel": "Quelle longueur faisait l’aqueduc du Gier pour acheminer l’eau sur Lyon à l’époque romaine ?",
- "result": 0,
- "source": "string",
- },
- Object {
- "answers": Array [
- Object {
- "answerLabel": "1 point d’eau public pour 800 habitants.",
- "isTrue": true,
- },
- Object {
- "answerLabel": "1 point d’eau public pour 400 habitants.",
- "isTrue": false,
- },
- Object {
- "answerLabel": "1 point d’eau public pour 200 habitants.",
- "isTrue": false,
- },
- ],
- "explanation": "string",
- "questionLabel": "En 1800 à Lyon, combien de points d'eau y avait-il par habitants ?",
- "result": 0,
- "source": "string",
- },
- Object {
- "answers": Array [
- Object {
- "answerLabel": "François Mitterrand",
- "isTrue": false,
- },
- Object {
- "answerLabel": "Napoléon Ier",
- "isTrue": true,
- },
- Object {
- "answerLabel": "Napoléon III",
- "isTrue": false,
- },
- ],
- "explanation": "string",
- "questionLabel": "Qui officialise la création de la Compagnie Générale des eaux ?",
- "result": 0,
- "source": "string",
- },
- Object {
- "answers": Array [
- Object {
- "answerLabel": "string",
- "isTrue": false,
- },
- Object {
- "answerLabel": "string",
- "isTrue": false,
- },
- Object {
- "answerLabel": "Aristide Dumont",
- "isTrue": true,
- },
- ],
- "explanation": "string",
- "questionLabel": "Quel ingénieur est à l’origine du projet d’alimentation en eau en 1856 ?",
- "result": 0,
- "source": "string",
- },
- ],
- "result": 0,
- "startDate": null,
- "state": 0,
- },
- "startDate": null,
- "state": 4,
- "success": 1,
- "target": 15,
- "title": "Challenge 2",
- }
- }
- />
- </ActionChoose>
- </mock-content>
- </ActionView>
-</Provider>
+ </mock-content>
+</div>
`;
diff --git a/src/components/Analysis/AnalysisView.spec.tsx b/src/components/Analysis/AnalysisView.spec.tsx
index 6c2515b5bddbd28e139821fb3c3f6486befa8453..6be3d34fd982adc52708f5ae0ee4bb254aecb820 100644
--- a/src/components/Analysis/AnalysisView.spec.tsx
+++ b/src/components/Analysis/AnalysisView.spec.tsx
@@ -1,5 +1,5 @@
+import { render } from '@testing-library/react'
import AnalysisView from 'components/Analysis/AnalysisView'
-import { mount } from 'enzyme'
import React from 'react'
import { Provider } from 'react-redux'
import * as globalActions from 'store/global/global.slice'
@@ -39,15 +39,13 @@ describe('AnalysisView component', () => {
})
it('should be rendered correctly', () => {
- const wrapper = mount(
+ const { container } = render(
<Provider store={store}>
<AnalysisView />
</Provider>
)
- expect(wrapper.find('mock-cozybar').exists()).toBeTruthy()
- expect(wrapper.find('mock-header').exists()).toBeTruthy()
- expect(wrapper.find('mock-datenavigator').exists()).toBeTruthy()
- expect(wrapper.find('mock-monthlyanalysis').exists()).toBeTruthy()
+ expect(container.querySelector('mock-datenavigator')).toBeInTheDocument()
+ expect(container.querySelector('mock-monthlyanalysis')).toBeInTheDocument()
})
it('should update profile and toggle analysis notification to false if notification is true', () => {
@@ -58,15 +56,13 @@ describe('AnalysisView component', () => {
profile: { ...mockProfileState, haveSeenLastAnalysis: true },
})
mockAppDispatch.mockReturnValue(jest.fn())
- const wrapper = mount(
+ const { container } = render(
<Provider store={store}>
<AnalysisView />
</Provider>
)
- expect(wrapper.find('mock-cozybar').exists()).toBeTruthy()
- expect(wrapper.find('mock-header').exists()).toBeTruthy()
- expect(wrapper.find('mock-datenavigator').exists()).toBeTruthy()
- expect(wrapper.find('mock-monthlyanalysis').exists()).toBeTruthy()
+ expect(container.querySelector('mock-datenavigator')).toBeInTheDocument()
+ expect(container.querySelector('mock-monthlyanalysis')).toBeInTheDocument()
expect(updateProfileSpy).toHaveBeenCalledTimes(1)
expect(updateProfileSpy).toHaveBeenCalledWith({
haveSeenLastAnalysis: true,
diff --git a/src/components/Analysis/AnalysisView.tsx b/src/components/Analysis/AnalysisView.tsx
index 424dcb2f2ee56666b019cecdd4d36673ff59e146..0047d6c501a1a73776a2652111f7b460de643e6e 100644
--- a/src/components/Analysis/AnalysisView.tsx
+++ b/src/components/Analysis/AnalysisView.tsx
@@ -94,12 +94,6 @@ const AnalysisView = () => {
client,
])
- const disablePrev =
- analysisMonth <
- DateTime.local(0, 1, 1).setZone('utc', {
- keepLocalTime: true,
- })
-
const handleMoveDate = (increment: number) => {
const updatedDate = dateChartService.incrementDate(
TimeStep.MONTH,
@@ -118,7 +112,7 @@ const AnalysisView = () => {
>
<DateNavigator
disableNext={isLastDateReached(analysisMonth, TimeStep.MONTH)}
- disablePrev={disablePrev}
+ disablePrev={false}
handleNextDate={() => handleMoveDate(1)}
handlePrevDate={() => handleMoveDate(-1)}
inlineDateDisplay={true}
diff --git a/src/components/Analysis/Comparison/comparison.scss b/src/components/Analysis/Comparison/comparison.scss
index ad321b9c06d3afe6598b6c5d800ad3136736caa9..e19bbf60914f78b8c9b2f3136744b442608348d3 100644
--- a/src/components/Analysis/Comparison/comparison.scss
+++ b/src/components/Analysis/Comparison/comparison.scss
@@ -10,12 +10,14 @@
background: linear-gradient(0deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)),
linear-gradient(180deg, #323339 0%, #25262b 100%);
border-radius: 4px 4px 0px 0px;
- color: #ffffff;
- text-transform: none;
- font-size: 0.75rem;
- line-height: 1.3;
- padding: 0.5rem 0;
box-shadow: 6px 0px 12px rgba(0, 0, 0, 0.3);
+ padding: 0.5rem 0;
+ span {
+ color: #ffffff;
+ text-transform: none;
+ font-size: 0.75rem;
+ line-height: 1.3;
+ }
&.active {
background: #5e5e5e;
}
diff --git a/src/components/Analysis/ElecHalfHourMonthlyAnalysis/ElecHalfHourChart.spec.tsx b/src/components/Analysis/ElecHalfHourMonthlyAnalysis/ElecHalfHourChart.spec.tsx
index 58ecd0b3ad642f3c2f5a56a1b92fb606a45aeb30..dabce7334c669a599f8df2b25cd9cc87fd2546b9 100644
--- a/src/components/Analysis/ElecHalfHourMonthlyAnalysis/ElecHalfHourChart.spec.tsx
+++ b/src/components/Analysis/ElecHalfHourMonthlyAnalysis/ElecHalfHourChart.spec.tsx
@@ -1,5 +1,4 @@
-import { mount } from 'enzyme'
-import toJson from 'enzyme-to-json'
+import { render } from '@testing-library/react'
import { DateTime } from 'luxon'
import React from 'react'
import { Provider } from 'react-redux'
@@ -23,19 +22,19 @@ describe('ElecHalfHourChart component', () => {
global: mockGlobalState,
})
it('should be rendered correctly', () => {
- const wrapper = mount(
+ const { container } = render(
<Provider store={store}>
<ElecHalfHourChart dataLoad={dataLoadArray} isWeekend={true} />
</Provider>
)
- expect(toJson(wrapper)).toMatchSnapshot()
+ expect(container).toMatchSnapshot()
})
it('should render week data', () => {
- const wrapper = mount(
+ const { container } = render(
<Provider store={store}>
<ElecHalfHourChart dataLoad={dataLoadArray} isWeekend={false} />
</Provider>
)
- expect(wrapper.find('.week')).toBeTruthy()
+ expect(container.getElementsByClassName('week').length).toBeTruthy()
})
})
diff --git a/src/components/Analysis/ElecHalfHourMonthlyAnalysis/ElecHalfHourChart.tsx b/src/components/Analysis/ElecHalfHourMonthlyAnalysis/ElecHalfHourChart.tsx
index 1911da91c9b913697383a83c73f6b13aab9b21cb..51fb203428079b883f30e49696061b6077779e78 100644
--- a/src/components/Analysis/ElecHalfHourMonthlyAnalysis/ElecHalfHourChart.tsx
+++ b/src/components/Analysis/ElecHalfHourMonthlyAnalysis/ElecHalfHourChart.tsx
@@ -56,7 +56,7 @@ const ElecHalfHourChart = ({ dataLoad, isWeekend }: ElecHalfHourChartProps) => {
<g transform={`translate(${10},${0})`}>
{dataLoad.map((value, index) => (
<Bar
- key={index}
+ key={value.date.toISO()}
index={index}
dataload={value}
compareDataload={null}
diff --git a/src/components/Analysis/ElecHalfHourMonthlyAnalysis/ElecHalfHourMonthlyAnalysis.spec.tsx b/src/components/Analysis/ElecHalfHourMonthlyAnalysis/ElecHalfHourMonthlyAnalysis.spec.tsx
index 88c4aa8ec70d728fbe32848d9bc463299b0af6e5..f62d1ff5506e91ef57d8d556b8d805d03f32eaaf 100644
--- a/src/components/Analysis/ElecHalfHourMonthlyAnalysis/ElecHalfHourMonthlyAnalysis.spec.tsx
+++ b/src/components/Analysis/ElecHalfHourMonthlyAnalysis/ElecHalfHourMonthlyAnalysis.spec.tsx
@@ -1,6 +1,5 @@
-import { IconButton } from '@material-ui/core'
-import { mount } from 'enzyme'
-import toJson from 'enzyme-to-json'
+import { render, screen, waitFor } from '@testing-library/react'
+import { userEvent } from '@testing-library/user-event'
import { PerformanceIndicator } from 'models'
import React from 'react'
import { Provider } from 'react-redux'
@@ -10,7 +9,6 @@ import {
} from 'tests/__mocks__/enedisMonthlyAnalysisData.mock'
import { allLastFluidPrices } from 'tests/__mocks__/fluidPrice.mock'
import { createMockEcolyoStore } from 'tests/__mocks__/store'
-import { waitForComponentToPaint } from 'tests/__mocks__/testUtils'
import ElecHalfHourMonthlyAnalysis from './ElecHalfHourMonthlyAnalysis'
jest.mock('components/Hooks/useExploration', () => {
@@ -21,10 +19,6 @@ jest.mock(
'components/Analysis/ElecHalfHourMonthlyAnalysis/ElecHalfHourChart',
() => 'mock-elechalfhourchart'
)
-jest.mock(
- 'components/Analysis/ElecHalfHourMonthlyAnalysis/ElecInfoModal',
- () => 'mock-elecinfomodal'
-)
const mockCheckDoctypeEntries = jest.fn()
jest.mock('services/consumption.service', () => {
@@ -62,13 +56,13 @@ describe('ElecHalfHourMonthlyAnalysis component', () => {
it('should be rendered correctly when isHalfHourActivated is false', async () => {
mockCheckDoctypeEntries.mockResolvedValueOnce(false)
mockGetPrices.mockResolvedValue(allLastFluidPrices[0])
- const wrapper = mount(
+ const { container } = render(
<Provider store={store}>
<ElecHalfHourMonthlyAnalysis perfIndicator={mockPerfIndicator} />
</Provider>
)
- await waitForComponentToPaint(wrapper)
- expect(toJson(wrapper)).toMatchSnapshot()
+ await waitFor(() => null, { container })
+ expect(container).toMatchSnapshot()
})
it('should be rendered correctly when isHalfHourActivated is true', async () => {
@@ -81,13 +75,13 @@ describe('ElecHalfHourMonthlyAnalysis component', () => {
)
mockGetPrices.mockResolvedValue(allLastFluidPrices[0])
- const wrapper = mount(
+ const { container } = render(
<Provider store={store}>
<ElecHalfHourMonthlyAnalysis perfIndicator={mockPerfIndicator} />
</Provider>
)
- await waitForComponentToPaint(wrapper)
- expect(toJson(wrapper)).toMatchSnapshot()
+ await waitFor(() => null, { container })
+ expect(container).toMatchSnapshot()
})
it('should change from weekend to week', async () => {
@@ -99,15 +93,14 @@ describe('ElecHalfHourMonthlyAnalysis component', () => {
mockDataLoadEnedisAnalysis
)
mockGetPrices.mockResolvedValue(allLastFluidPrices[0])
- const wrapper = mount(
+ const { container } = render(
<Provider store={store}>
<ElecHalfHourMonthlyAnalysis perfIndicator={mockPerfIndicator} />
</Provider>
)
- await waitForComponentToPaint(wrapper)
- wrapper.find(IconButton).first().simulate('click')
- await waitForComponentToPaint(wrapper)
- expect(wrapper.find('.week').exists()).toBeTruthy()
+ await waitFor(() => null, { container })
+ await userEvent.click(screen.getAllByRole('button')[0])
+ expect(container.getElementsByClassName('week').length).toBeTruthy()
})
it('should call the ElecInfoModal with open = true when click on the button', async () => {
@@ -120,16 +113,13 @@ describe('ElecHalfHourMonthlyAnalysis component', () => {
)
mockGetPrices.mockResolvedValue(allLastFluidPrices[0])
- const wrapper = mount(
+ const { container } = render(
<Provider store={store}>
<ElecHalfHourMonthlyAnalysis perfIndicator={mockPerfIndicator} />
</Provider>
)
- await waitForComponentToPaint(wrapper)
- wrapper.find('.showmodal').first().simulate('click')
- await waitForComponentToPaint(wrapper)
- expect(wrapper.find('mock-elecinfomodal').prop('open')?.valueOf()).toBe(
- true
- )
+ await waitFor(() => null, { container })
+ await userEvent.click(await screen.findByText('special_elec.showModal'))
+ expect(await screen.findByRole('dialog')).toBeInTheDocument()
})
})
diff --git a/src/components/Analysis/ElecHalfHourMonthlyAnalysis/ElecHalfHourMonthlyAnalysis.tsx b/src/components/Analysis/ElecHalfHourMonthlyAnalysis/ElecHalfHourMonthlyAnalysis.tsx
index 362cfc35ad3ad2907fb2db7dcfe974675f658d17..4656b493d2289f96eab56868efd15bb8da8908b1 100644
--- a/src/components/Analysis/ElecHalfHourMonthlyAnalysis/ElecHalfHourMonthlyAnalysis.tsx
+++ b/src/components/Analysis/ElecHalfHourMonthlyAnalysis/ElecHalfHourMonthlyAnalysis.tsx
@@ -1,3 +1,4 @@
+import { Button } from '@material-ui/core'
import IconButton from '@material-ui/core/IconButton'
import LeftArrowIcon from 'assets/icons/ico/left-arrow.svg'
import MaxPowerIcon from 'assets/icons/ico/maxPower.svg'
@@ -233,9 +234,9 @@ const ElecHalfHourMonthlyAnalysis = ({
</div>
</div>
- <div onClick={toggleOpenModal} className="showmodal">
+ <Button className="btnText" onClick={toggleOpenModal}>
{t('special_elec.showModal')}
- </div>
+ </Button>
</div>
)}
</>
diff --git a/src/components/Analysis/ElecHalfHourMonthlyAnalysis/ElecInfoModal.spec.tsx b/src/components/Analysis/ElecHalfHourMonthlyAnalysis/ElecInfoModal.spec.tsx
index 9524348096134b9c11095febedd2255ee79e62ab..f41b110bfd9928fd4e04cdd8b6d7a72aceec2cf1 100644
--- a/src/components/Analysis/ElecHalfHourMonthlyAnalysis/ElecInfoModal.spec.tsx
+++ b/src/components/Analysis/ElecHalfHourMonthlyAnalysis/ElecInfoModal.spec.tsx
@@ -1,13 +1,12 @@
-import { mount } from 'enzyme'
-import toJson from 'enzyme-to-json'
+import { render } from '@testing-library/react'
import React from 'react'
import ElecInfoModal from './ElecInfoModal'
describe('ElecInfoModal component', () => {
it('should be rendered correctly', () => {
- const component = mount(
+ const { baseElement } = render(
<ElecInfoModal open={true} handleCloseClick={jest.fn()} />
)
- expect(toJson(component)).toMatchSnapshot()
+ expect(baseElement).toMatchSnapshot()
})
})
diff --git a/src/components/Analysis/ElecHalfHourMonthlyAnalysis/__snapshots__/ElecHalfHourChart.spec.tsx.snap b/src/components/Analysis/ElecHalfHourMonthlyAnalysis/__snapshots__/ElecHalfHourChart.spec.tsx.snap
index 1e7bcab26ddfd1f3f6c32c02827d8e24dfb1e12d..8c4b0ebdce5bb65be7f044c0c3a84336cc594f8c 100644
--- a/src/components/Analysis/ElecHalfHourMonthlyAnalysis/__snapshots__/ElecHalfHourChart.spec.tsx.snap
+++ b/src/components/Analysis/ElecHalfHourMonthlyAnalysis/__snapshots__/ElecHalfHourChart.spec.tsx.snap
@@ -1,134 +1,119 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`ElecHalfHourChart component should be rendered correctly 1`] = `
-<Provider
- store={
- Object {
- "clearActions": [Function],
- "dispatch": [Function],
- "getActions": [Function],
- "getState": [Function],
- "replaceReducer": [Function],
- "subscribe": [Function],
- }
- }
->
- <ElecHalfHourChart
- dataLoad={
- Array [
- Object {
- "date": "2021-09-23T00:00:00.000Z",
- "state": "VALID",
- "value": 12,
- "valueDetail": null,
- },
- Object {
- "date": "2021-09-23T00:00:00.000Z",
- "state": "VALID",
- "value": 12,
- "valueDetail": null,
- },
- Object {
- "date": "2021-09-23T00:00:00.000Z",
- "state": "VALID",
- "value": 12,
- "valueDetail": null,
- },
- Object {
- "date": "2021-09-23T00:00:00.000Z",
- "state": "VALID",
- "value": 12,
- "valueDetail": null,
- },
- ]
- }
- isWeekend={true}
+<div>
+ <div
+ class="graph-elec-half-hour"
>
- <div
- className="graph-elec-half-hour"
+ <svg
+ height="170"
+ width="940"
>
- <svg
- height={170}
- width={940}
+ <g
+ class="axis y"
+ fill="none"
+ font-family="sans-serif"
+ font-size="10"
+ text-anchor="start"
+ transform="translate(880, 0)"
>
- <AxisRight
- fluidType={0}
- isAnalysis={true}
- marginRight={60}
- marginTop={0}
- width={940}
- yScale={[Function]}
+ <g
+ class="tick"
+ opacity="1"
+ transform="translate(0,140.5)"
>
- <g
- className="axis y"
- transform="translate(880, 0)"
+ <line
+ stroke="currentColor"
+ x2="-940"
/>
- </AxisRight>
+ <text
+ class="chart-ticks-y-text"
+ dy="0.32em"
+ fill="currentColor"
+ x="3"
+ >
+ 0
+ </text>
+ </g>
<g
- transform="translate(10,0)"
+ class="tick"
+ opacity="1"
+ transform="translate(0,82.16666666666666)"
>
- <Bar
- compare={false}
- compareDataload={null}
- dataload={
- Object {
- "date": "2021-09-23T00:00:00.000Z",
- "state": "VALID",
- "value": 12,
- "valueDetail": null,
- }
- }
- fluidType={0}
- height={140}
- index={0}
- isDuel={false}
- isSwitching={false}
- key="0"
- timeStep={10}
- weekdays="weekend"
- xScale={[Function]}
- yScale={[Function]}
+ <line
+ stroke="currentColor"
+ x2="-940"
+ />
+ <text
+ class="chart-ticks-y-text"
+ dy="0.32em"
+ fill="currentColor"
+ x="3"
+ >
+ 5 FLUID.ELECTRICITY.UNIT
+ </text>
+ </g>
+ <g
+ class="tick"
+ opacity="1"
+ transform="translate(0,23.83333333333333)"
+ >
+ <line
+ stroke="currentColor"
+ x2="-940"
+ />
+ <text
+ class="chart-ticks-y-text"
+ dy="0.32em"
+ fill="currentColor"
+ x="3"
+ >
+ 10 FLUID.ELECTRICITY.UNIT
+ </text>
+ </g>
+ </g>
+ <g
+ transform="translate(10,0)"
+ >
+ <g>
+ <g
+ class="barContainer "
+ transform="translate(79.09090909090912, -40)"
+ >
+ <rect
+ class="background-undefined"
+ fill="#E0E0E0"
+ height="180"
+ width="711.8181818181818"
+ x="0"
+ y="0"
+ />
+ </g>
+ <g
+ class="barFill"
+ transform="translate(79.09090909090912, 0)"
>
- <g>
- <g
- className="barContainer "
- transform="translate(79.09090909090912, -40)"
+ <defs>
+ <lineargradient
+ id="gradient"
+ x1="0"
+ x2="0"
+ y1="0"
+ y2="1"
>
- <rect
- className="background-undefined"
- fill="#E0E0E0"
- height={180}
- onClick={[Function]}
- width={711.8181818181818}
- x="0"
- y="0"
+ <stop
+ id="stop-color-1"
+ offset="0%"
/>
- </g>
- <g
- transform="translate(79.09090909090912, 0)"
- >
- <defs>
- <linearGradient
- className="bar-ELECTRICITY weekend bounce-3 delay--0"
- id="gradient"
- x1="0"
- x2="0"
- y1="0"
- y2="1"
- >
- <stop
- id="stop-color-1"
- offset="0%"
- />
- <stop
- id="stop-color-2"
- offset="100%"
- />
- </linearGradient>
- </defs>
- <path
- className="bar-ELECTRICITY weekend bounce-3 delay--0"
- d="
+ <stop
+ id="stop-color-2"
+ offset="100%"
+ />
+ </lineargradient>
+ </defs>
+ <path
+ class="bar-ELECTRICITY weekend bounce-3 delay--0"
+ d="
M0,4
a4,4 0 0 1 4,-4
h-5
@@ -136,74 +121,33 @@ exports[`ElecHalfHourChart component should be rendered correctly 1`] = `
v136
h-3
z"
- onAnimationEnd={[Function]}
- onClick={[Function]}
- />
- </g>
- </g>
- </Bar>
- <Bar
- compare={false}
- compareDataload={null}
- dataload={
- Object {
- "date": "2021-09-23T00:00:00.000Z",
- "state": "VALID",
- "value": 12,
- "valueDetail": null,
- }
- }
- fluidType={0}
- height={140}
- index={1}
- isDuel={false}
- isSwitching={false}
- key="1"
- timeStep={10}
- weekdays="weekend"
- xScale={[Function]}
- yScale={[Function]}
+ />
+ </g>
+ <g
+ transform="translate(79.09090909090912, 0)"
>
- <g>
- <g
- className="barContainer "
- transform="translate(79.09090909090912, -40)"
+ <defs>
+ <lineargradient
+ class="bar-ELECTRICITY weekend bounce-3 delay--0"
+ id="gradient"
+ x1="0"
+ x2="0"
+ y1="0"
+ y2="1"
>
- <rect
- className="background-undefined"
- fill="#E0E0E0"
- height={180}
- onClick={[Function]}
- width={711.8181818181818}
- x="0"
- y="0"
+ <stop
+ id="stop-color-1"
+ offset="0%"
/>
- </g>
- <g
- transform="translate(79.09090909090912, 0)"
- >
- <defs>
- <linearGradient
- className="bar-ELECTRICITY weekend bounce-3 delay--1"
- id="gradient"
- x1="0"
- x2="0"
- y1="0"
- y2="1"
- >
- <stop
- id="stop-color-1"
- offset="0%"
- />
- <stop
- id="stop-color-2"
- offset="100%"
- />
- </linearGradient>
- </defs>
- <path
- className="bar-ELECTRICITY weekend bounce-3 delay--1"
- d="
+ <stop
+ id="stop-color-2"
+ offset="100%"
+ />
+ </lineargradient>
+ </defs>
+ <path
+ class="bar-ELECTRICITY weekend bounce-3 delay--0"
+ d="
M0,4
a4,4 0 0 1 4,-4
h-5
@@ -211,74 +155,82 @@ exports[`ElecHalfHourChart component should be rendered correctly 1`] = `
v136
h-3
z"
- onAnimationEnd={[Function]}
- onClick={[Function]}
- />
- </g>
- </g>
- </Bar>
- <Bar
- compare={false}
- compareDataload={null}
- dataload={
- Object {
- "date": "2021-09-23T00:00:00.000Z",
- "state": "VALID",
- "value": 12,
- "valueDetail": null,
- }
- }
- fluidType={0}
- height={140}
- index={2}
- isDuel={false}
- isSwitching={false}
- key="2"
- timeStep={10}
- weekdays="weekend"
- xScale={[Function]}
- yScale={[Function]}
+ />
+ </g>
+ </g>
+ <g>
+ <g
+ class="barContainer "
+ transform="translate(79.09090909090912, -40)"
>
- <g>
- <g
- className="barContainer "
- transform="translate(79.09090909090912, -40)"
+ <rect
+ class="background-undefined"
+ fill="#E0E0E0"
+ height="180"
+ width="711.8181818181818"
+ x="0"
+ y="0"
+ />
+ </g>
+ <g
+ class="barFill"
+ transform="translate(79.09090909090912, 0)"
+ >
+ <defs>
+ <lineargradient
+ id="gradient"
+ x1="0"
+ x2="0"
+ y1="0"
+ y2="1"
>
- <rect
- className="background-undefined"
- fill="#E0E0E0"
- height={180}
- onClick={[Function]}
- width={711.8181818181818}
- x="0"
- y="0"
+ <stop
+ id="stop-color-1"
+ offset="0%"
+ />
+ <stop
+ id="stop-color-2"
+ offset="100%"
/>
- </g>
- <g
- transform="translate(79.09090909090912, 0)"
+ </lineargradient>
+ </defs>
+ <path
+ class="bar-ELECTRICITY weekend bounce-3 delay--1"
+ d="
+ M0,4
+ a4,4 0 0 1 4,-4
+ h-5
+ a4,4 0 0 1 4,4
+ v136
+ h-3
+ z"
+ />
+ </g>
+ <g
+ transform="translate(79.09090909090912, 0)"
+ >
+ <defs>
+ <lineargradient
+ class="bar-ELECTRICITY weekend bounce-3 delay--1"
+ id="gradient"
+ x1="0"
+ x2="0"
+ y1="0"
+ y2="1"
>
- <defs>
- <linearGradient
- className="bar-ELECTRICITY weekend bounce-3 delay--2"
- id="gradient"
- x1="0"
- x2="0"
- y1="0"
- y2="1"
- >
- <stop
- id="stop-color-1"
- offset="0%"
- />
- <stop
- id="stop-color-2"
- offset="100%"
- />
- </linearGradient>
- </defs>
- <path
- className="bar-ELECTRICITY weekend bounce-3 delay--2"
- d="
+ <stop
+ id="stop-color-1"
+ offset="0%"
+ />
+ <stop
+ id="stop-color-2"
+ offset="100%"
+ />
+ </lineargradient>
+ </defs>
+ <path
+ class="bar-ELECTRICITY weekend bounce-3 delay--1"
+ d="
M0,4
a4,4 0 0 1 4,-4
h-5
@@ -286,74 +238,131 @@ exports[`ElecHalfHourChart component should be rendered correctly 1`] = `
v136
h-3
z"
- onAnimationEnd={[Function]}
- onClick={[Function]}
+ />
+ </g>
+ </g>
+ <g>
+ <g
+ class="barContainer "
+ transform="translate(79.09090909090912, -40)"
+ >
+ <rect
+ class="background-undefined"
+ fill="#E0E0E0"
+ height="180"
+ width="711.8181818181818"
+ x="0"
+ y="0"
+ />
+ </g>
+ <g
+ class="barFill"
+ transform="translate(79.09090909090912, 0)"
+ >
+ <defs>
+ <lineargradient
+ id="gradient"
+ x1="0"
+ x2="0"
+ y1="0"
+ y2="1"
+ >
+ <stop
+ id="stop-color-1"
+ offset="0%"
/>
- </g>
- </g>
- </Bar>
- <Bar
- compare={false}
- compareDataload={null}
- dataload={
- Object {
- "date": "2021-09-23T00:00:00.000Z",
- "state": "VALID",
- "value": 12,
- "valueDetail": null,
- }
- }
- fluidType={0}
- height={140}
- index={3}
- isDuel={false}
- isSwitching={false}
- key="3"
- timeStep={10}
- weekdays="weekend"
- xScale={[Function]}
- yScale={[Function]}
+ <stop
+ id="stop-color-2"
+ offset="100%"
+ />
+ </lineargradient>
+ </defs>
+ <path
+ class="bar-ELECTRICITY weekend bounce-3 delay--2"
+ d="
+ M0,4
+ a4,4 0 0 1 4,-4
+ h-5
+ a4,4 0 0 1 4,4
+ v136
+ h-3
+ z"
+ />
+ </g>
+ <g
+ transform="translate(79.09090909090912, 0)"
>
- <g>
- <g
- className="barContainer "
- transform="translate(79.09090909090912, -40)"
+ <defs>
+ <lineargradient
+ class="bar-ELECTRICITY weekend bounce-3 delay--2"
+ id="gradient"
+ x1="0"
+ x2="0"
+ y1="0"
+ y2="1"
>
- <rect
- className="background-undefined"
- fill="#E0E0E0"
- height={180}
- onClick={[Function]}
- width={711.8181818181818}
- x="0"
- y="0"
+ <stop
+ id="stop-color-1"
+ offset="0%"
/>
- </g>
- <g
- transform="translate(79.09090909090912, 0)"
+ <stop
+ id="stop-color-2"
+ offset="100%"
+ />
+ </lineargradient>
+ </defs>
+ <path
+ class="bar-ELECTRICITY weekend bounce-3 delay--2"
+ d="
+ M0,4
+ a4,4 0 0 1 4,-4
+ h-5
+ a4,4 0 0 1 4,4
+ v136
+ h-3
+ z"
+ />
+ </g>
+ </g>
+ <g>
+ <g
+ class="barContainer "
+ transform="translate(79.09090909090912, -40)"
+ >
+ <rect
+ class="background-undefined"
+ fill="#E0E0E0"
+ height="180"
+ width="711.8181818181818"
+ x="0"
+ y="0"
+ />
+ </g>
+ <g
+ class="barFill"
+ transform="translate(79.09090909090912, 0)"
+ >
+ <defs>
+ <lineargradient
+ id="gradient"
+ x1="0"
+ x2="0"
+ y1="0"
+ y2="1"
>
- <defs>
- <linearGradient
- className="bar-ELECTRICITY weekend bounce-3 delay--3"
- id="gradient"
- x1="0"
- x2="0"
- y1="0"
- y2="1"
- >
- <stop
- id="stop-color-1"
- offset="0%"
- />
- <stop
- id="stop-color-2"
- offset="100%"
- />
- </linearGradient>
- </defs>
- <path
- className="bar-ELECTRICITY weekend bounce-3 delay--3"
- d="
+ <stop
+ id="stop-color-1"
+ offset="0%"
+ />
+ <stop
+ id="stop-color-2"
+ offset="100%"
+ />
+ </lineargradient>
+ </defs>
+ <path
+ class="bar-ELECTRICITY weekend bounce-3 delay--3"
+ d="
M0,4
a4,4 0 0 1 4,-4
h-5
@@ -361,158 +370,84 @@ exports[`ElecHalfHourChart component should be rendered correctly 1`] = `
v136
h-3
z"
- onAnimationEnd={[Function]}
- onClick={[Function]}
+ />
+ </g>
+ <g
+ transform="translate(79.09090909090912, 0)"
+ >
+ <defs>
+ <lineargradient
+ class="bar-ELECTRICITY weekend bounce-3 delay--3"
+ id="gradient"
+ x1="0"
+ x2="0"
+ y1="0"
+ y2="1"
+ >
+ <stop
+ id="stop-color-1"
+ offset="0%"
+ />
+ <stop
+ id="stop-color-2"
+ offset="100%"
/>
- </g>
- </g>
- </Bar>
+ </lineargradient>
+ </defs>
+ <path
+ class="bar-ELECTRICITY weekend bounce-3 delay--3"
+ d="
+ M0,4
+ a4,4 0 0 1 4,-4
+ h-5
+ a4,4 0 0 1 4,4
+ v136
+ h-3
+ z"
+ />
+ </g>
</g>
- <AxisBottom
- data={
- Array [
- Object {
- "date": "2021-09-23T00:00:00.000Z",
- "state": "VALID",
- "value": 12,
- "valueDetail": null,
- },
- Object {
- "date": "2021-09-23T00:00:00.000Z",
- "state": "VALID",
- "value": 12,
- "valueDetail": null,
- },
- Object {
- "date": "2021-09-23T00:00:00.000Z",
- "state": "VALID",
- "value": 12,
- "valueDetail": null,
- },
- Object {
- "date": "2021-09-23T00:00:00.000Z",
- "state": "VALID",
- "value": 12,
- "valueDetail": null,
- },
- ]
- }
- height={170}
- isDuel={false}
- marginBottom={30}
- marginLeft={10}
- timeStep={10}
- xScale={[Function]}
+ </g>
+ <g
+ class="axis x"
+ transform="translate(10, 140)"
+ >
+ <g
+ class="tick"
+ opacity="1"
+ transform="translate(79.09090909090912, 0)"
>
- <g
- className="axis x"
- transform="translate(10, 140)"
+ <text
+ class="chart-ticks-y-text"
+ dy="0.71em"
+ x="355.9090909090909"
+ y="10"
>
- <g
- className="tick"
- key="0"
- opacity="1"
- transform="translate(79.09090909090912, 0)"
- >
- <TextAxis
- dataload={
- Object {
- "date": "2021-09-23T00:00:00.000Z",
- "state": "VALID",
- "value": 12,
- "valueDetail": null,
- }
- }
- displayAllDays={false}
- index={0}
- selectedDate={"2021-07-01T00:00:00.000Z"}
- timeStep={10}
- width={355.9090909090909}
- >
- <text
- dy="0.71em"
- x={355.9090909090909}
- y="10"
- >
- <tspan
- className="tick-text chart-ticks-x-text"
- textAnchor="middle"
- >
- 0
- </tspan>
- </text>
- </TextAxis>
- </g>
- <g
- className="tick"
- key="1"
- opacity="1"
- transform="translate(79.09090909090912, 0)"
- >
- <TextAxis
- dataload={
- Object {
- "date": "2021-09-23T00:00:00.000Z",
- "state": "VALID",
- "value": 12,
- "valueDetail": null,
- }
- }
- displayAllDays={false}
- index={1}
- selectedDate={"2021-07-01T00:00:00.000Z"}
- timeStep={10}
- width={355.9090909090909}
- />
- </g>
- <g
- className="tick"
- key="2"
- opacity="1"
- transform="translate(79.09090909090912, 0)"
+ <tspan
+ class="tick-text chart-ticks-x-text"
+ text-anchor="middle"
>
- <TextAxis
- dataload={
- Object {
- "date": "2021-09-23T00:00:00.000Z",
- "state": "VALID",
- "value": 12,
- "valueDetail": null,
- }
- }
- displayAllDays={false}
- index={2}
- selectedDate={"2021-07-01T00:00:00.000Z"}
- timeStep={10}
- width={355.9090909090909}
- />
- </g>
- <g
- className="tick"
- key="3"
- opacity="1"
- transform="translate(79.09090909090912, 0)"
- >
- <TextAxis
- dataload={
- Object {
- "date": "2021-09-23T00:00:00.000Z",
- "state": "VALID",
- "value": 12,
- "valueDetail": null,
- }
- }
- displayAllDays={false}
- index={3}
- selectedDate={"2021-07-01T00:00:00.000Z"}
- timeStep={10}
- width={355.9090909090909}
- />
- </g>
- </g>
- </AxisBottom>
- </svg>
- </div>
- </ElecHalfHourChart>
-</Provider>
+ 0
+ </tspan>
+ </text>
+ </g>
+ <g
+ class="tick"
+ opacity="1"
+ transform="translate(79.09090909090912, 0)"
+ />
+ <g
+ class="tick"
+ opacity="1"
+ transform="translate(79.09090909090912, 0)"
+ />
+ <g
+ class="tick"
+ opacity="1"
+ transform="translate(79.09090909090912, 0)"
+ />
+ </g>
+ </svg>
+ </div>
+</div>
`;
diff --git a/src/components/Analysis/ElecHalfHourMonthlyAnalysis/__snapshots__/ElecHalfHourMonthlyAnalysis.spec.tsx.snap b/src/components/Analysis/ElecHalfHourMonthlyAnalysis/__snapshots__/ElecHalfHourMonthlyAnalysis.spec.tsx.snap
index 001bf7012bf8018fbd8c6957ecdaccdb47b07921..e4058feef99e3df1d3e78658d97e488bcf281631 100644
--- a/src/components/Analysis/ElecHalfHourMonthlyAnalysis/__snapshots__/ElecHalfHourMonthlyAnalysis.spec.tsx.snap
+++ b/src/components/Analysis/ElecHalfHourMonthlyAnalysis/__snapshots__/ElecHalfHourMonthlyAnalysis.spec.tsx.snap
@@ -1,413 +1,127 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`ElecHalfHourMonthlyAnalysis component should be rendered correctly when isHalfHourActivated is false 1`] = `
-<Provider
- store={
- Object {
- "clearActions": [Function],
- "dispatch": [Function],
- "getActions": [Function],
- "getState": [Function],
- "replaceReducer": [Function],
- "subscribe": [Function],
- }
- }
->
- <ElecHalfHourMonthlyAnalysis
- perfIndicator={
- Object {
- "compareValue": null,
- "percentageVariation": null,
- "price": null,
- "value": 10,
- }
- }
+<div>
+ <div
+ class="special-elec-container"
>
- <div
- className="special-elec-container"
+ <svg
+ class="elec-icon styles__icon___23x3R"
+ height="42"
+ width="42"
>
- <Icon
- className="elec-icon"
- icon="test-file-stub"
- size={42}
- spin={false}
- >
- <Component
- className="elec-icon styles__icon___23x3R"
- height={42}
- style={Object {}}
- width={42}
- >
- <svg
- className="elec-icon styles__icon___23x3R"
- height={42}
- style={Object {}}
- width={42}
- >
- <use
- xlinkHref="#test-file-stub"
- />
- </svg>
- </Component>
- </Icon>
- <div
- className="text-18-normal title"
- >
- special_elec.title
- </div>
- <div
- className="activation-text text-18-normal"
- >
- timestep.half_an_hour.analysis_waiting_data
- </div>
- <mock-elecinfomodal
- handleCloseClick={[Function]}
- open={false}
+ <use
+ xlink:href="#test-file-stub"
/>
+ </svg>
+ <div
+ class="text-18-normal title"
+ >
+ special_elec.title
</div>
- </ElecHalfHourMonthlyAnalysis>
-</Provider>
+ <div
+ class="activation-text text-18-normal"
+ >
+ timestep.half_an_hour.analysis_waiting_data
+ </div>
+ </div>
+</div>
`;
exports[`ElecHalfHourMonthlyAnalysis component should be rendered correctly when isHalfHourActivated is true 1`] = `
-<Provider
- store={
- Object {
- "clearActions": [Function],
- "dispatch": [Function],
- "getActions": [Function],
- "getState": [Function],
- "replaceReducer": [Function],
- "subscribe": [Function],
- }
- }
->
- <ElecHalfHourMonthlyAnalysis
- perfIndicator={
- Object {
- "compareValue": null,
- "percentageVariation": null,
- "price": null,
- "value": 10,
- }
- }
+<div>
+ <div
+ class="special-elec-container"
>
+ <svg
+ class="elec-icon styles__icon___23x3R"
+ height="42"
+ width="42"
+ >
+ <use
+ xlink:href="#test-file-stub"
+ />
+ </svg>
<div
- className="special-elec-container"
+ class="text-18-normal title"
>
- <Icon
- className="elec-icon"
- icon="test-file-stub"
- size={42}
- spin={false}
+ special_elec.title
+ </div>
+ <div
+ class="navigator"
+ >
+ <button
+ aria-label="consumption.accessibility.button_previous_value"
+ class="MuiButtonBase-root MuiIconButton-root arrow-prev"
+ tabindex="0"
+ type="button"
>
- <Component
- className="elec-icon styles__icon___23x3R"
- height={42}
- style={Object {}}
- width={42}
+ <span
+ class="MuiIconButton-label"
>
<svg
- className="elec-icon styles__icon___23x3R"
- height={42}
- style={Object {}}
- width={42}
+ class="styles__icon___23x3R"
+ height="24"
+ width="24"
>
<use
- xlinkHref="#test-file-stub"
+ xlink:href="#test-file-stub"
/>
</svg>
- </Component>
- </Icon>
- <div
- className="text-18-normal title"
- >
- special_elec.title
- </div>
+ </span>
+ <span
+ class="MuiTouchRipple-root"
+ />
+ </button>
<div
- className="navigator"
+ class="average text-18-normal"
>
- <WithStyles(ForwardRef(IconButton))
- aria-label="consumption.accessibility.button_previous_value"
- className="arrow-prev"
- onClick={[Function]}
- >
- <ForwardRef(IconButton)
- aria-label="consumption.accessibility.button_previous_value"
- className="arrow-prev"
- classes={
- Object {
- "colorInherit": "MuiIconButton-colorInherit",
- "colorPrimary": "MuiIconButton-colorPrimary",
- "colorSecondary": "MuiIconButton-colorSecondary",
- "disabled": "Mui-disabled",
- "edgeEnd": "MuiIconButton-edgeEnd",
- "edgeStart": "MuiIconButton-edgeStart",
- "label": "MuiIconButton-label",
- "root": "MuiIconButton-root",
- "sizeSmall": "MuiIconButton-sizeSmall",
- }
- }
- onClick={[Function]}
- >
- <WithStyles(ForwardRef(ButtonBase))
- aria-label="consumption.accessibility.button_previous_value"
- centerRipple={true}
- className="MuiIconButton-root arrow-prev"
- disabled={false}
- focusRipple={true}
- onClick={[Function]}
- >
- <ForwardRef(ButtonBase)
- aria-label="consumption.accessibility.button_previous_value"
- centerRipple={true}
- className="MuiIconButton-root arrow-prev"
- classes={
- Object {
- "disabled": "Mui-disabled",
- "focusVisible": "Mui-focusVisible",
- "root": "MuiButtonBase-root",
- }
- }
- disabled={false}
- focusRipple={true}
- onClick={[Function]}
- >
- <button
- aria-label="consumption.accessibility.button_previous_value"
- className="MuiButtonBase-root MuiIconButton-root arrow-prev"
- disabled={false}
- onBlur={[Function]}
- onClick={[Function]}
- onDragLeave={[Function]}
- onFocus={[Function]}
- onKeyDown={[Function]}
- onKeyUp={[Function]}
- onMouseDown={[Function]}
- onMouseLeave={[Function]}
- onMouseUp={[Function]}
- onTouchEnd={[Function]}
- onTouchMove={[Function]}
- onTouchStart={[Function]}
- tabIndex={0}
- type="button"
- >
- <span
- className="MuiIconButton-label"
- >
- <Icon
- icon="test-file-stub"
- size={24}
- spin={false}
- >
- <Component
- className="styles__icon___23x3R"
- height={24}
- style={Object {}}
- width={24}
- >
- <svg
- className="styles__icon___23x3R"
- height={24}
- style={Object {}}
- width={24}
- >
- <use
- xlinkHref="#test-file-stub"
- />
- </svg>
- </Component>
- </Icon>
- </span>
- <WithStyles(memo)
- center={true}
- >
- <ForwardRef(TouchRipple)
- center={true}
- classes={
- Object {
- "child": "MuiTouchRipple-child",
- "childLeaving": "MuiTouchRipple-childLeaving",
- "childPulsate": "MuiTouchRipple-childPulsate",
- "ripple": "MuiTouchRipple-ripple",
- "ripplePulsate": "MuiTouchRipple-ripplePulsate",
- "rippleVisible": "MuiTouchRipple-rippleVisible",
- "root": "MuiTouchRipple-root",
- }
- }
- >
- <span
- className="MuiTouchRipple-root"
- >
- <TransitionGroup
- childFactory={[Function]}
- component={null}
- exit={true}
- />
- </span>
- </ForwardRef(TouchRipple)>
- </WithStyles(memo)>
- </button>
- </ForwardRef(ButtonBase)>
- </WithStyles(ForwardRef(ButtonBase))>
- </ForwardRef(IconButton)>
- </WithStyles(ForwardRef(IconButton))>
<div
- className="average text-18-normal"
+ class="text-1"
>
- <div
- className="text-1"
- >
- special_elec.average
- </div>
- <div
- className="text-2 text-18-bold"
- >
- special_elec.weektype
-
- <span
- className="weekend"
- >
- special_elec.weekend
- </span>
- </div>
+ special_elec.average
</div>
- <WithStyles(ForwardRef(IconButton))
- aria-label="consumption.accessibility.button_previous_value"
- className="arrow-next"
- onClick={[Function]}
+ <div
+ class="text-2 text-18-bold"
>
- <ForwardRef(IconButton)
- aria-label="consumption.accessibility.button_previous_value"
- className="arrow-next"
- classes={
- Object {
- "colorInherit": "MuiIconButton-colorInherit",
- "colorPrimary": "MuiIconButton-colorPrimary",
- "colorSecondary": "MuiIconButton-colorSecondary",
- "disabled": "Mui-disabled",
- "edgeEnd": "MuiIconButton-edgeEnd",
- "edgeStart": "MuiIconButton-edgeStart",
- "label": "MuiIconButton-label",
- "root": "MuiIconButton-root",
- "sizeSmall": "MuiIconButton-sizeSmall",
- }
- }
- onClick={[Function]}
+ special_elec.weektype
+
+ <span
+ class="weekend"
>
- <WithStyles(ForwardRef(ButtonBase))
- aria-label="consumption.accessibility.button_previous_value"
- centerRipple={true}
- className="MuiIconButton-root arrow-next"
- disabled={false}
- focusRipple={true}
- onClick={[Function]}
- >
- <ForwardRef(ButtonBase)
- aria-label="consumption.accessibility.button_previous_value"
- centerRipple={true}
- className="MuiIconButton-root arrow-next"
- classes={
- Object {
- "disabled": "Mui-disabled",
- "focusVisible": "Mui-focusVisible",
- "root": "MuiButtonBase-root",
- }
- }
- disabled={false}
- focusRipple={true}
- onClick={[Function]}
- >
- <button
- aria-label="consumption.accessibility.button_previous_value"
- className="MuiButtonBase-root MuiIconButton-root arrow-next"
- disabled={false}
- onBlur={[Function]}
- onClick={[Function]}
- onDragLeave={[Function]}
- onFocus={[Function]}
- onKeyDown={[Function]}
- onKeyUp={[Function]}
- onMouseDown={[Function]}
- onMouseLeave={[Function]}
- onMouseUp={[Function]}
- onTouchEnd={[Function]}
- onTouchMove={[Function]}
- onTouchStart={[Function]}
- tabIndex={0}
- type="button"
- >
- <span
- className="MuiIconButton-label"
- >
- <Icon
- icon="test-file-stub"
- size={24}
- spin={false}
- >
- <Component
- className="styles__icon___23x3R"
- height={24}
- style={Object {}}
- width={24}
- >
- <svg
- className="styles__icon___23x3R"
- height={24}
- style={Object {}}
- width={24}
- >
- <use
- xlinkHref="#test-file-stub"
- />
- </svg>
- </Component>
- </Icon>
- </span>
- <WithStyles(memo)
- center={true}
- >
- <ForwardRef(TouchRipple)
- center={true}
- classes={
- Object {
- "child": "MuiTouchRipple-child",
- "childLeaving": "MuiTouchRipple-childLeaving",
- "childPulsate": "MuiTouchRipple-childPulsate",
- "ripple": "MuiTouchRipple-ripple",
- "ripplePulsate": "MuiTouchRipple-ripplePulsate",
- "rippleVisible": "MuiTouchRipple-rippleVisible",
- "root": "MuiTouchRipple-root",
- }
- }
- >
- <span
- className="MuiTouchRipple-root"
- >
- <TransitionGroup
- childFactory={[Function]}
- component={null}
- exit={true}
- />
- </span>
- </ForwardRef(TouchRipple)>
- </WithStyles(memo)>
- </button>
- </ForwardRef(ButtonBase)>
- </WithStyles(ForwardRef(ButtonBase))>
- </ForwardRef(IconButton)>
- </WithStyles(ForwardRef(IconButton))>
+ special_elec.weekend
+ </span>
+ </div>
</div>
- <p
- className="text-20-bold no_data"
+ <button
+ aria-label="consumption.accessibility.button_previous_value"
+ class="MuiButtonBase-root MuiIconButton-root arrow-next"
+ tabindex="0"
+ type="button"
>
- analysis.no_data
- </p>
- <mock-elecinfomodal
- handleCloseClick={[Function]}
- open={false}
- />
+ <span
+ class="MuiIconButton-label"
+ >
+ <svg
+ class="styles__icon___23x3R"
+ height="24"
+ width="24"
+ >
+ <use
+ xlink:href="#test-file-stub"
+ />
+ </svg>
+ </span>
+ <span
+ class="MuiTouchRipple-root"
+ />
+ </button>
</div>
- </ElecHalfHourMonthlyAnalysis>
-</Provider>
+ <p
+ class="text-20-bold no_data"
+ >
+ analysis.no_data
+ </p>
+ </div>
+</div>
`;
diff --git a/src/components/Analysis/ElecHalfHourMonthlyAnalysis/__snapshots__/ElecInfoModal.spec.tsx.snap b/src/components/Analysis/ElecHalfHourMonthlyAnalysis/__snapshots__/ElecInfoModal.spec.tsx.snap
index d77706c0830547b97016cdb499cc9751fc49dbf1..55b41b0e8aa630ef74c40b99539bdeea6581b22d 100644
--- a/src/components/Analysis/ElecHalfHourMonthlyAnalysis/__snapshots__/ElecInfoModal.spec.tsx.snap
+++ b/src/components/Analysis/ElecHalfHourMonthlyAnalysis/__snapshots__/ElecInfoModal.spec.tsx.snap
@@ -1,849 +1,101 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`ElecInfoModal component should be rendered correctly 1`] = `
-<ElecInfoModal
- handleCloseClick={[MockFunction]}
- open={true}
+<body
+ style="padding-right: 0px; overflow: hidden;"
>
- <WithStyles(ForwardRef(Dialog))
- aria-labelledby="accessibility-title"
- classes={
- Object {
- "paper": "modal-paper",
- "root": "modal-root",
- }
- }
- onClose={[MockFunction]}
- open={true}
+ <div
+ aria-hidden="true"
+ />
+ <div
+ class="MuiDialog-root modal-root"
+ role="presentation"
+ style="position: fixed; z-index: 1300; right: 0px; bottom: 0px; top: 0px; left: 0px;"
>
- <ForwardRef(Dialog)
- aria-labelledby="accessibility-title"
- classes={
- Object {
- "container": "MuiDialog-container",
- "paper": "MuiDialog-paper modal-paper",
- "paperFullScreen": "MuiDialog-paperFullScreen",
- "paperFullWidth": "MuiDialog-paperFullWidth",
- "paperScrollBody": "MuiDialog-paperScrollBody",
- "paperScrollPaper": "MuiDialog-paperScrollPaper",
- "paperWidthFalse": "MuiDialog-paperWidthFalse",
- "paperWidthLg": "MuiDialog-paperWidthLg",
- "paperWidthMd": "MuiDialog-paperWidthMd",
- "paperWidthSm": "MuiDialog-paperWidthSm",
- "paperWidthXl": "MuiDialog-paperWidthXl",
- "paperWidthXs": "MuiDialog-paperWidthXs",
- "root": "MuiDialog-root modal-root",
- "scrollBody": "MuiDialog-scrollBody",
- "scrollPaper": "MuiDialog-scrollPaper",
- }
- }
- onClose={[MockFunction]}
- open={true}
+ <div
+ aria-hidden="true"
+ class="MuiBackdrop-root"
+ style="opacity: 1; webkit-transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"
+ />
+ <div
+ data-test="sentinelStart"
+ tabindex="0"
+ />
+ <div
+ class="MuiDialog-container MuiDialog-scrollPaper"
+ role="none presentation"
+ style="opacity: 1; webkit-transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"
+ tabindex="-1"
>
- <ForwardRef(Modal)
- BackdropComponent={
- Object {
- "$$typeof": Symbol(react.forward_ref),
- "Naked": Object {
- "$$typeof": Symbol(react.forward_ref),
- "propTypes": Object {
- "children": [Function],
- "className": [Function],
- "classes": [Function],
- "invisible": [Function],
- "open": [Function],
- "transitionDuration": [Function],
- },
- "render": [Function],
- },
- "displayName": "WithStyles(ForwardRef(Backdrop))",
- "options": Object {
- "defaultTheme": Object {
- "breakpoints": Object {
- "between": [Function],
- "down": [Function],
- "keys": Array [
- "xs",
- "sm",
- "md",
- "lg",
- "xl",
- ],
- "only": [Function],
- "up": [Function],
- "values": Object {
- "lg": 1280,
- "md": 960,
- "sm": 600,
- "xl": 1920,
- "xs": 0,
- },
- "width": [Function],
- },
- "direction": "ltr",
- "mixins": Object {
- "gutters": [Function],
- "toolbar": Object {
- "@media (min-width:0px) and (orientation: landscape)": Object {
- "minHeight": 48,
- },
- "@media (min-width:600px)": Object {
- "minHeight": 64,
- },
- "minHeight": 56,
- },
- },
- "overrides": Object {},
- "palette": Object {
- "action": Object {
- "activatedOpacity": 0.12,
- "active": "rgba(0, 0, 0, 0.54)",
- "disabled": "rgba(0, 0, 0, 0.26)",
- "disabledBackground": "rgba(0, 0, 0, 0.12)",
- "disabledOpacity": 0.38,
- "focus": "rgba(0, 0, 0, 0.12)",
- "focusOpacity": 0.12,
- "hover": "rgba(0, 0, 0, 0.04)",
- "hoverOpacity": 0.04,
- "selected": "rgba(0, 0, 0, 0.08)",
- "selectedOpacity": 0.08,
- },
- "augmentColor": [Function],
- "background": Object {
- "default": "#fafafa",
- "paper": "#fff",
- },
- "common": Object {
- "black": "#000",
- "white": "#fff",
- },
- "contrastThreshold": 3,
- "divider": "rgba(0, 0, 0, 0.12)",
- "error": Object {
- "contrastText": "#fff",
- "dark": "#d32f2f",
- "light": "#e57373",
- "main": "#f44336",
- },
- "getContrastText": [Function],
- "grey": Object {
- "100": "#f5f5f5",
- "200": "#eeeeee",
- "300": "#e0e0e0",
- "400": "#bdbdbd",
- "50": "#fafafa",
- "500": "#9e9e9e",
- "600": "#757575",
- "700": "#616161",
- "800": "#424242",
- "900": "#212121",
- "A100": "#d5d5d5",
- "A200": "#aaaaaa",
- "A400": "#303030",
- "A700": "#616161",
- },
- "info": Object {
- "contrastText": "#fff",
- "dark": "#1976d2",
- "light": "#64b5f6",
- "main": "#2196f3",
- },
- "primary": Object {
- "contrastText": "#fff",
- "dark": "#303f9f",
- "light": "#7986cb",
- "main": "#3f51b5",
- },
- "secondary": Object {
- "contrastText": "#fff",
- "dark": "#c51162",
- "light": "#ff4081",
- "main": "#f50057",
- },
- "success": Object {
- "contrastText": "rgba(0, 0, 0, 0.87)",
- "dark": "#388e3c",
- "light": "#81c784",
- "main": "#4caf50",
- },
- "text": Object {
- "disabled": "rgba(0, 0, 0, 0.38)",
- "hint": "rgba(0, 0, 0, 0.38)",
- "primary": "rgba(0, 0, 0, 0.87)",
- "secondary": "rgba(0, 0, 0, 0.54)",
- },
- "tonalOffset": 0.2,
- "type": "light",
- "warning": Object {
- "contrastText": "rgba(0, 0, 0, 0.87)",
- "dark": "#f57c00",
- "light": "#ffb74d",
- "main": "#ff9800",
- },
- },
- "props": Object {},
- "shadows": Array [
- "none",
- "0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12)",
- "0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12)",
- "0px 3px 3px -2px rgba(0,0,0,0.2),0px 3px 4px 0px rgba(0,0,0,0.14),0px 1px 8px 0px rgba(0,0,0,0.12)",
- "0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12)",
- "0px 3px 5px -1px rgba(0,0,0,0.2),0px 5px 8px 0px rgba(0,0,0,0.14),0px 1px 14px 0px rgba(0,0,0,0.12)",
- "0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12)",
- "0px 4px 5px -2px rgba(0,0,0,0.2),0px 7px 10px 1px rgba(0,0,0,0.14),0px 2px 16px 1px rgba(0,0,0,0.12)",
- "0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12)",
- "0px 5px 6px -3px rgba(0,0,0,0.2),0px 9px 12px 1px rgba(0,0,0,0.14),0px 3px 16px 2px rgba(0,0,0,0.12)",
- "0px 6px 6px -3px rgba(0,0,0,0.2),0px 10px 14px 1px rgba(0,0,0,0.14),0px 4px 18px 3px rgba(0,0,0,0.12)",
- "0px 6px 7px -4px rgba(0,0,0,0.2),0px 11px 15px 1px rgba(0,0,0,0.14),0px 4px 20px 3px rgba(0,0,0,0.12)",
- "0px 7px 8px -4px rgba(0,0,0,0.2),0px 12px 17px 2px rgba(0,0,0,0.14),0px 5px 22px 4px rgba(0,0,0,0.12)",
- "0px 7px 8px -4px rgba(0,0,0,0.2),0px 13px 19px 2px rgba(0,0,0,0.14),0px 5px 24px 4px rgba(0,0,0,0.12)",
- "0px 7px 9px -4px rgba(0,0,0,0.2),0px 14px 21px 2px rgba(0,0,0,0.14),0px 5px 26px 4px rgba(0,0,0,0.12)",
- "0px 8px 9px -5px rgba(0,0,0,0.2),0px 15px 22px 2px rgba(0,0,0,0.14),0px 6px 28px 5px rgba(0,0,0,0.12)",
- "0px 8px 10px -5px rgba(0,0,0,0.2),0px 16px 24px 2px rgba(0,0,0,0.14),0px 6px 30px 5px rgba(0,0,0,0.12)",
- "0px 8px 11px -5px rgba(0,0,0,0.2),0px 17px 26px 2px rgba(0,0,0,0.14),0px 6px 32px 5px rgba(0,0,0,0.12)",
- "0px 9px 11px -5px rgba(0,0,0,0.2),0px 18px 28px 2px rgba(0,0,0,0.14),0px 7px 34px 6px rgba(0,0,0,0.12)",
- "0px 9px 12px -6px rgba(0,0,0,0.2),0px 19px 29px 2px rgba(0,0,0,0.14),0px 7px 36px 6px rgba(0,0,0,0.12)",
- "0px 10px 13px -6px rgba(0,0,0,0.2),0px 20px 31px 3px rgba(0,0,0,0.14),0px 8px 38px 7px rgba(0,0,0,0.12)",
- "0px 10px 13px -6px rgba(0,0,0,0.2),0px 21px 33px 3px rgba(0,0,0,0.14),0px 8px 40px 7px rgba(0,0,0,0.12)",
- "0px 10px 14px -6px rgba(0,0,0,0.2),0px 22px 35px 3px rgba(0,0,0,0.14),0px 8px 42px 7px rgba(0,0,0,0.12)",
- "0px 11px 14px -7px rgba(0,0,0,0.2),0px 23px 36px 3px rgba(0,0,0,0.14),0px 9px 44px 8px rgba(0,0,0,0.12)",
- "0px 11px 15px -7px rgba(0,0,0,0.2),0px 24px 38px 3px rgba(0,0,0,0.14),0px 9px 46px 8px rgba(0,0,0,0.12)",
- ],
- "shape": Object {
- "borderRadius": 4,
- },
- "spacing": [Function],
- "transitions": Object {
- "create": [Function],
- "duration": Object {
- "complex": 375,
- "enteringScreen": 225,
- "leavingScreen": 195,
- "short": 250,
- "shorter": 200,
- "shortest": 150,
- "standard": 300,
- },
- "easing": Object {
- "easeIn": "cubic-bezier(0.4, 0, 1, 1)",
- "easeInOut": "cubic-bezier(0.4, 0, 0.2, 1)",
- "easeOut": "cubic-bezier(0.0, 0, 0.2, 1)",
- "sharp": "cubic-bezier(0.4, 0, 0.6, 1)",
- },
- "getAutoHeightDuration": [Function],
- },
- "typography": Object {
- "body1": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "1rem",
- "fontWeight": 400,
- "letterSpacing": "0.00938em",
- "lineHeight": 1.5,
- },
- "body2": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "0.875rem",
- "fontWeight": 400,
- "letterSpacing": "0.01071em",
- "lineHeight": 1.43,
- },
- "button": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "0.875rem",
- "fontWeight": 500,
- "letterSpacing": "0.02857em",
- "lineHeight": 1.75,
- "textTransform": "uppercase",
- },
- "caption": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "0.75rem",
- "fontWeight": 400,
- "letterSpacing": "0.03333em",
- "lineHeight": 1.66,
- },
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": 14,
- "fontWeightBold": 700,
- "fontWeightLight": 300,
- "fontWeightMedium": 500,
- "fontWeightRegular": 400,
- "h1": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "6rem",
- "fontWeight": 300,
- "letterSpacing": "-0.01562em",
- "lineHeight": 1.167,
- },
- "h2": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "3.75rem",
- "fontWeight": 300,
- "letterSpacing": "-0.00833em",
- "lineHeight": 1.2,
- },
- "h3": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "3rem",
- "fontWeight": 400,
- "letterSpacing": "0em",
- "lineHeight": 1.167,
- },
- "h4": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "2.125rem",
- "fontWeight": 400,
- "letterSpacing": "0.00735em",
- "lineHeight": 1.235,
- },
- "h5": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "1.5rem",
- "fontWeight": 400,
- "letterSpacing": "0em",
- "lineHeight": 1.334,
- },
- "h6": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "1.25rem",
- "fontWeight": 500,
- "letterSpacing": "0.0075em",
- "lineHeight": 1.6,
- },
- "htmlFontSize": 16,
- "overline": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "0.75rem",
- "fontWeight": 400,
- "letterSpacing": "0.08333em",
- "lineHeight": 2.66,
- "textTransform": "uppercase",
- },
- "pxToRem": [Function],
- "round": [Function],
- "subtitle1": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "1rem",
- "fontWeight": 400,
- "letterSpacing": "0.00938em",
- "lineHeight": 1.75,
- },
- "subtitle2": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "0.875rem",
- "fontWeight": 500,
- "letterSpacing": "0.00714em",
- "lineHeight": 1.57,
- },
- },
- "zIndex": Object {
- "appBar": 1100,
- "drawer": 1200,
- "mobileStepper": 1000,
- "modal": 1300,
- "snackbar": 1400,
- "speedDial": 1050,
- "tooltip": 1500,
- },
- },
- "name": "MuiBackdrop",
- },
- "propTypes": Object {
- "classes": [Function],
- "innerRef": [Function],
- },
- "render": [Function],
- "useStyles": [Function],
- }
- }
- BackdropProps={
- Object {
- "transitionDuration": Object {
- "enter": 225,
- "exit": 195,
- },
- }
- }
- className="MuiDialog-root modal-root"
- closeAfterTransition={true}
- disableEscapeKeyDown={false}
- onClose={[MockFunction]}
- open={true}
+ <div
+ aria-labelledby="accessibility-title"
+ class="MuiPaper-root MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm MuiPaper-elevation24 MuiPaper-rounded"
+ role="dialog"
>
- <ForwardRef(Portal)
- disablePortal={false}
+ <div
+ id="accessibility-title"
>
- <Portal
- containerInfo={
- <body
- style="padding-right: 0px; overflow: hidden;"
- >
- <div
- class="MuiDialog-root modal-root"
- role="presentation"
- style="position: fixed; z-index: 1300; right: 0px; bottom: 0px; top: 0px; left: 0px;"
- >
- <div
- aria-hidden="true"
- class="MuiBackdrop-root"
- style="opacity: 1; webkit-transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"
- />
- <div
- data-test="sentinelStart"
- tabindex="0"
- />
- <div
- class="MuiDialog-container MuiDialog-scrollPaper"
- role="none presentation"
- style="opacity: 1; webkit-transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"
- tabindex="-1"
- >
- <div
- aria-labelledby="accessibility-title"
- class="MuiPaper-root MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm MuiPaper-elevation24 MuiPaper-rounded"
- role="dialog"
- >
- <div
- id="accessibility-title"
- >
- elec_info_modal.accessibility.window_title
- </div>
- <button
- aria-label="elec_info_modal.accessibility.button_close"
- class="MuiButtonBase-root MuiIconButton-root modal-paper-close-button"
- tabindex="0"
- type="button"
- >
- <span
- class="MuiIconButton-label"
- >
- <svg
- class="styles__icon___23x3R"
- height="16"
- width="16"
- >
- <use
- xlink:href="#test-file-stub"
- />
- </svg>
- </span>
- <span
- class="MuiTouchRipple-root"
- />
- </button>
- <div
- class="elecInfoModal"
- >
- <div
- class="title text-18-bold"
- >
- elec_info_modal.title1
- </div>
- <div
- class="text"
- >
- elec_info_modal.text1
- <br />
- elec_info_modal.text2
- </div>
- <div
- class="title text-18-bold"
- >
- elec_info_modal.title2
- </div>
- <div
- class="text"
- >
- elec_info_modal.text3
- <br />
- elec_info_modal.text4
- <br />
- elec_info_modal.text5
- </div>
- </div>
- </div>
- </div>
- <div
- data-test="sentinelEnd"
- tabindex="0"
- />
- </div>
- </body>
- }
+ elec_info_modal.accessibility.window_title
+ </div>
+ <button
+ aria-label="elec_info_modal.accessibility.button_close"
+ class="MuiButtonBase-root MuiIconButton-root modal-paper-close-button"
+ tabindex="0"
+ type="button"
+ >
+ <span
+ class="MuiIconButton-label"
>
- <div
- className="MuiDialog-root modal-root"
- onKeyDown={[Function]}
- role="presentation"
- style={
- Object {
- "bottom": 0,
- "left": 0,
- "position": "fixed",
- "right": 0,
- "top": 0,
- "zIndex": 1300,
- }
- }
+ <svg
+ class="styles__icon___23x3R"
+ height="16"
+ width="16"
>
- <WithStyles(ForwardRef(Backdrop))
- onClick={[Function]}
- open={true}
- transitionDuration={
- Object {
- "enter": 225,
- "exit": 195,
- }
- }
- >
- <ForwardRef(Backdrop)
- classes={
- Object {
- "invisible": "MuiBackdrop-invisible",
- "root": "MuiBackdrop-root",
- }
- }
- onClick={[Function]}
- open={true}
- transitionDuration={
- Object {
- "enter": 225,
- "exit": 195,
- }
- }
- >
- <ForwardRef(Fade)
- in={true}
- onClick={[Function]}
- timeout={
- Object {
- "enter": 225,
- "exit": 195,
- }
- }
- >
- <Transition
- appear={true}
- enter={true}
- exit={true}
- in={true}
- mountOnEnter={false}
- onClick={[Function]}
- onEnter={[Function]}
- onEntered={[Function]}
- onEntering={[Function]}
- onExit={[Function]}
- onExited={[Function]}
- onExiting={[Function]}
- timeout={
- Object {
- "enter": 225,
- "exit": 195,
- }
- }
- unmountOnExit={false}
- >
- <div
- aria-hidden={true}
- className="MuiBackdrop-root"
- onClick={[Function]}
- style={
- Object {
- "opacity": 1,
- "visibility": undefined,
- }
- }
- />
- </Transition>
- </ForwardRef(Fade)>
- </ForwardRef(Backdrop)>
- </WithStyles(ForwardRef(Backdrop))>
- <Unstable_TrapFocus
- disableAutoFocus={false}
- disableEnforceFocus={false}
- disableRestoreFocus={false}
- getDoc={[Function]}
- isEnabled={[Function]}
- open={true}
- >
- <div
- data-test="sentinelStart"
- tabIndex={0}
- />
- <ForwardRef(Fade)
- appear={true}
- in={true}
- onEnter={[Function]}
- onExited={[Function]}
- role="none presentation"
- tabIndex="-1"
- timeout={
- Object {
- "enter": 225,
- "exit": 195,
- }
- }
- >
- <Transition
- appear={true}
- enter={true}
- exit={true}
- in={true}
- mountOnEnter={false}
- onEnter={[Function]}
- onEntered={[Function]}
- onEntering={[Function]}
- onExit={[Function]}
- onExited={[Function]}
- onExiting={[Function]}
- role="none presentation"
- tabIndex="-1"
- timeout={
- Object {
- "enter": 225,
- "exit": 195,
- }
- }
- unmountOnExit={false}
- >
- <div
- className="MuiDialog-container MuiDialog-scrollPaper"
- onMouseDown={[Function]}
- onMouseUp={[Function]}
- role="none presentation"
- style={
- Object {
- "opacity": 1,
- "visibility": undefined,
- }
- }
- tabIndex="-1"
- >
- <WithStyles(ForwardRef(Paper))
- aria-labelledby="accessibility-title"
- className="MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm"
- elevation={24}
- role="dialog"
- >
- <ForwardRef(Paper)
- aria-labelledby="accessibility-title"
- className="MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm"
- classes={
- Object {
- "elevation0": "MuiPaper-elevation0",
- "elevation1": "MuiPaper-elevation1",
- "elevation10": "MuiPaper-elevation10",
- "elevation11": "MuiPaper-elevation11",
- "elevation12": "MuiPaper-elevation12",
- "elevation13": "MuiPaper-elevation13",
- "elevation14": "MuiPaper-elevation14",
- "elevation15": "MuiPaper-elevation15",
- "elevation16": "MuiPaper-elevation16",
- "elevation17": "MuiPaper-elevation17",
- "elevation18": "MuiPaper-elevation18",
- "elevation19": "MuiPaper-elevation19",
- "elevation2": "MuiPaper-elevation2",
- "elevation20": "MuiPaper-elevation20",
- "elevation21": "MuiPaper-elevation21",
- "elevation22": "MuiPaper-elevation22",
- "elevation23": "MuiPaper-elevation23",
- "elevation24": "MuiPaper-elevation24",
- "elevation3": "MuiPaper-elevation3",
- "elevation4": "MuiPaper-elevation4",
- "elevation5": "MuiPaper-elevation5",
- "elevation6": "MuiPaper-elevation6",
- "elevation7": "MuiPaper-elevation7",
- "elevation8": "MuiPaper-elevation8",
- "elevation9": "MuiPaper-elevation9",
- "outlined": "MuiPaper-outlined",
- "root": "MuiPaper-root",
- "rounded": "MuiPaper-rounded",
- }
- }
- elevation={24}
- role="dialog"
- >
- <div
- aria-labelledby="accessibility-title"
- className="MuiPaper-root MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm MuiPaper-elevation24 MuiPaper-rounded"
- role="dialog"
- >
- <div
- id="accessibility-title"
- >
- elec_info_modal.accessibility.window_title
- </div>
- <WithStyles(ForwardRef(IconButton))
- aria-label="elec_info_modal.accessibility.button_close"
- className="modal-paper-close-button"
- onClick={[MockFunction]}
- >
- <ForwardRef(IconButton)
- aria-label="elec_info_modal.accessibility.button_close"
- className="modal-paper-close-button"
- classes={
- Object {
- "colorInherit": "MuiIconButton-colorInherit",
- "colorPrimary": "MuiIconButton-colorPrimary",
- "colorSecondary": "MuiIconButton-colorSecondary",
- "disabled": "Mui-disabled",
- "edgeEnd": "MuiIconButton-edgeEnd",
- "edgeStart": "MuiIconButton-edgeStart",
- "label": "MuiIconButton-label",
- "root": "MuiIconButton-root",
- "sizeSmall": "MuiIconButton-sizeSmall",
- }
- }
- onClick={[MockFunction]}
- >
- <WithStyles(ForwardRef(ButtonBase))
- aria-label="elec_info_modal.accessibility.button_close"
- centerRipple={true}
- className="MuiIconButton-root modal-paper-close-button"
- disabled={false}
- focusRipple={true}
- onClick={[MockFunction]}
- >
- <ForwardRef(ButtonBase)
- aria-label="elec_info_modal.accessibility.button_close"
- centerRipple={true}
- className="MuiIconButton-root modal-paper-close-button"
- classes={
- Object {
- "disabled": "Mui-disabled",
- "focusVisible": "Mui-focusVisible",
- "root": "MuiButtonBase-root",
- }
- }
- disabled={false}
- focusRipple={true}
- onClick={[MockFunction]}
- >
- <button
- aria-label="elec_info_modal.accessibility.button_close"
- className="MuiButtonBase-root MuiIconButton-root modal-paper-close-button"
- disabled={false}
- onBlur={[Function]}
- onClick={[MockFunction]}
- onDragLeave={[Function]}
- onFocus={[Function]}
- onKeyDown={[Function]}
- onKeyUp={[Function]}
- onMouseDown={[Function]}
- onMouseLeave={[Function]}
- onMouseUp={[Function]}
- onTouchEnd={[Function]}
- onTouchMove={[Function]}
- onTouchStart={[Function]}
- tabIndex={0}
- type="button"
- >
- <span
- className="MuiIconButton-label"
- >
- <Icon
- icon="test-file-stub"
- size={16}
- spin={false}
- >
- <Component
- className="styles__icon___23x3R"
- height={16}
- style={Object {}}
- width={16}
- >
- <svg
- className="styles__icon___23x3R"
- height={16}
- style={Object {}}
- width={16}
- >
- <use
- xlinkHref="#test-file-stub"
- />
- </svg>
- </Component>
- </Icon>
- </span>
- <WithStyles(memo)
- center={true}
- >
- <ForwardRef(TouchRipple)
- center={true}
- classes={
- Object {
- "child": "MuiTouchRipple-child",
- "childLeaving": "MuiTouchRipple-childLeaving",
- "childPulsate": "MuiTouchRipple-childPulsate",
- "ripple": "MuiTouchRipple-ripple",
- "ripplePulsate": "MuiTouchRipple-ripplePulsate",
- "rippleVisible": "MuiTouchRipple-rippleVisible",
- "root": "MuiTouchRipple-root",
- }
- }
- >
- <span
- className="MuiTouchRipple-root"
- >
- <TransitionGroup
- childFactory={[Function]}
- component={null}
- exit={true}
- />
- </span>
- </ForwardRef(TouchRipple)>
- </WithStyles(memo)>
- </button>
- </ForwardRef(ButtonBase)>
- </WithStyles(ForwardRef(ButtonBase))>
- </ForwardRef(IconButton)>
- </WithStyles(ForwardRef(IconButton))>
- <div
- className="elecInfoModal"
- >
- <div
- className="title text-18-bold"
- >
- elec_info_modal.title1
- </div>
- <div
- className="text"
- >
- elec_info_modal.text1
- <br />
- elec_info_modal.text2
- </div>
- <div
- className="title text-18-bold"
- >
- elec_info_modal.title2
- </div>
- <div
- className="text"
- >
- elec_info_modal.text3
- <br />
- elec_info_modal.text4
- <br />
- elec_info_modal.text5
- </div>
- </div>
- </div>
- </ForwardRef(Paper)>
- </WithStyles(ForwardRef(Paper))>
- </div>
- </Transition>
- </ForwardRef(Fade)>
- <div
- data-test="sentinelEnd"
- tabIndex={0}
- />
- </Unstable_TrapFocus>
- </div>
- </Portal>
- </ForwardRef(Portal)>
- </ForwardRef(Modal)>
- </ForwardRef(Dialog)>
- </WithStyles(ForwardRef(Dialog))>
-</ElecInfoModal>
+ <use
+ xlink:href="#test-file-stub"
+ />
+ </svg>
+ </span>
+ <span
+ class="MuiTouchRipple-root"
+ />
+ </button>
+ <div
+ class="elecInfoModal"
+ >
+ <div
+ class="title text-18-bold"
+ >
+ elec_info_modal.title1
+ </div>
+ <div
+ class="text"
+ >
+ elec_info_modal.text1
+ <br />
+ elec_info_modal.text2
+ </div>
+ <div
+ class="title text-18-bold"
+ >
+ elec_info_modal.title2
+ </div>
+ <div
+ class="text"
+ >
+ elec_info_modal.text3
+ <br />
+ elec_info_modal.text4
+ <br />
+ elec_info_modal.text5
+ </div>
+ </div>
+ </div>
+ </div>
+ <div
+ data-test="sentinelEnd"
+ tabindex="0"
+ />
+ </div>
+</body>
`;
diff --git a/src/components/Analysis/ElecHalfHourMonthlyAnalysis/elecHalfHourMonthlyAnalysis.scss b/src/components/Analysis/ElecHalfHourMonthlyAnalysis/elecHalfHourMonthlyAnalysis.scss
index 582ffd247a66d746c36f5af83ad4a139fa3f1638..3e0e4b36eeb61c61c7bc4a09ffe3ff483f5410c4 100644
--- a/src/components/Analysis/ElecHalfHourMonthlyAnalysis/elecHalfHourMonthlyAnalysis.scss
+++ b/src/components/Analysis/ElecHalfHourMonthlyAnalysis/elecHalfHourMonthlyAnalysis.scss
@@ -77,12 +77,9 @@
text-align: center;
color: white;
}
- .showmodal {
- cursor: pointer;
- margin: 1.5rem 0 0.5rem;
- text-align: center;
- color: $grey-bright;
- text-decoration: underline;
+ button {
+ display: flex;
+ margin: auto;
}
}
.graph-elec-half-hour {
diff --git a/src/components/Analysis/IncompleteDataWarning/IncompleteDataWarning.spec.tsx b/src/components/Analysis/IncompleteDataWarning/IncompleteDataWarning.spec.tsx
index 85a452c6db5e384be71fdd6129a52102096fbf82..01090f414664dc1c87ae48cda7eaea5e1d4b19dd 100644
--- a/src/components/Analysis/IncompleteDataWarning/IncompleteDataWarning.spec.tsx
+++ b/src/components/Analysis/IncompleteDataWarning/IncompleteDataWarning.spec.tsx
@@ -1,15 +1,17 @@
+import { render, screen } from '@testing-library/react'
import { FluidType } from 'enums'
-import { mount } from 'enzyme'
import React from 'react'
import IncompleteDataWarning from './IncompleteDataWarning'
describe('IncompleteDataWarning', () => {
- it('renders component correctly', () => {
+ it('renders component correctly and have correct snapshot', async () => {
const incompleteFluidTypes = [FluidType.ELECTRICITY, FluidType.GAS]
- const wrapper = mount(
+ const { container } = render(
<IncompleteDataWarning incompleteDataFluids={incompleteFluidTypes} />
)
- expect(wrapper.find('h1').text()).toBe('analysis.warning_title')
- expect(wrapper.find('p').text()).toBe('analysis.warning_text')
+ expect(await screen.findByRole('heading')).toHaveTextContent(
+ 'analysis.warning_title'
+ )
+ expect(container).toMatchSnapshot()
})
})
diff --git a/src/components/Analysis/IncompleteDataWarning/__snapshots__/IncompleteDataWarning.spec.tsx.snap b/src/components/Analysis/IncompleteDataWarning/__snapshots__/IncompleteDataWarning.spec.tsx.snap
new file mode 100644
index 0000000000000000000000000000000000000000..a289c727dac65068df8abecf0c6ec289f80bf64d
--- /dev/null
+++ b/src/components/Analysis/IncompleteDataWarning/__snapshots__/IncompleteDataWarning.spec.tsx.snap
@@ -0,0 +1,34 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`IncompleteDataWarning renders component correctly and have correct snapshot 1`] = `
+<div>
+ <div
+ class="analysis-warning"
+ >
+ <div
+ class="warning-header"
+ >
+ <svg
+ aria-hidden="true"
+ class="styles__icon___23x3R"
+ height="30"
+ width="30"
+ >
+ <use
+ xlink:href="#test-file-stub"
+ />
+ </svg>
+ <h1>
+ analysis.warning_title
+ </h1>
+ </div>
+ <div
+ class="warning-content"
+ >
+ <p>
+ analysis.warning_text
+ </p>
+ </div>
+ </div>
+</div>
+`;
diff --git a/src/components/Analysis/MaxConsumptionCard/MaxConsumptionCard.spec.tsx b/src/components/Analysis/MaxConsumptionCard/MaxConsumptionCard.spec.tsx
index 8dda881935a9c200430556bf76648e16b79fa0f0..18977eb0ddad4f84dfd778067a7610ab5b7d9b52 100644
--- a/src/components/Analysis/MaxConsumptionCard/MaxConsumptionCard.spec.tsx
+++ b/src/components/Analysis/MaxConsumptionCard/MaxConsumptionCard.spec.tsx
@@ -1,70 +1,71 @@
+import { render, screen, waitFor } from '@testing-library/react'
+import { userEvent } from '@testing-library/user-event'
import { FluidType } from 'enums'
-import { mount } from 'enzyme'
-import toJson from 'enzyme-to-json'
import React from 'react'
import { Provider } from 'react-redux'
import { graphData } from 'tests/__mocks__/chartData.mock'
import { createMockEcolyoStore } from 'tests/__mocks__/store'
-import { waitForComponentToPaint } from 'tests/__mocks__/testUtils'
import MaxConsumptionCard from './MaxConsumptionCard'
-const mockGetMaxLoad = jest.fn(() => 0)
const mockGetGraphData = jest.fn(() => graphData)
jest.mock('services/consumption.service', () => {
return jest.fn(() => ({
- getMaxLoad: mockGetMaxLoad,
+ getMaxLoad: jest.fn(() => 0),
getGraphData: mockGetGraphData,
}))
})
-jest.mock('components/Charts/BarChart', () => 'mock-BarChart')
-
describe('MaxConsumptionCard component', () => {
const store = createMockEcolyoStore()
it('should be rendered correctly', async () => {
- const wrapper = mount(
+ const { container } = render(
<Provider store={store}>
<MaxConsumptionCard
fluidsWithData={[FluidType.ELECTRICITY, FluidType.GAS]}
/>
</Provider>
)
- await waitForComponentToPaint(wrapper)
- expect(toJson(wrapper)).toMatchSnapshot()
- expect(wrapper.find('mock-BarChart').exists()).toBeTruthy()
+ await waitFor(() => null, { container })
+ expect(container).toMatchSnapshot()
})
it('should be rendered with one fluid and not display arrows', async () => {
- const wrapper = mount(
+ const { container } = render(
<Provider store={store}>
<MaxConsumptionCard fluidsWithData={[FluidType.ELECTRICITY]} />
</Provider>
)
- await waitForComponentToPaint(wrapper)
- expect(wrapper.find('.arrow').exists()).toBeFalsy()
+ await waitFor(() => null, { container })
+ const [prevButton, nextButton] = screen.getAllByRole('button')
+ expect(prevButton).toBeDisabled()
+ expect(nextButton).toBeDisabled()
})
it('should be rendered with several fluids and click navigate between fluid', async () => {
- const wrapper = mount(
+ const { container } = render(
<Provider store={store}>
<MaxConsumptionCard
fluidsWithData={[FluidType.ELECTRICITY, FluidType.GAS]}
/>
</Provider>
)
- await waitForComponentToPaint(wrapper)
- expect(wrapper.find('.arrow-next').exists()).toBeTruthy()
+ await waitFor(() => null, { container })
+ const [prevButton, nextButton] = screen.getAllByRole('button')
+
// navigate next
- wrapper.find('.arrow-next').first().simulate('click')
- await waitForComponentToPaint(wrapper)
- expect(wrapper.find('.fluid').text()).toBe('FLUID.GAS.LABEL')
- wrapper.find('.arrow-next').first().simulate('click')
- await waitForComponentToPaint(wrapper)
- expect(wrapper.find('.fluid').text()).toBe('FLUID.ELECTRICITY.LABEL')
+ await userEvent.click(nextButton)
+ await waitFor(() => null, { container })
+ expect(screen.getByText('FLUID.GAS.LABEL')).toBeInTheDocument()
+
+ await userEvent.click(nextButton)
+ await waitFor(() => null, { container })
+ expect(screen.getByText('FLUID.ELECTRICITY.LABEL')).toBeInTheDocument()
+
// navigate prev
- wrapper.find('.arrow-prev').first().simulate('click')
- await waitForComponentToPaint(wrapper)
- expect(wrapper.find('.fluid').text()).toBe('FLUID.GAS.LABEL')
- wrapper.find('.arrow-prev').first().simulate('click')
- await waitForComponentToPaint(wrapper)
- expect(wrapper.find('.fluid').text()).toBe('FLUID.ELECTRICITY.LABEL')
+ await userEvent.click(prevButton)
+ await waitFor(() => null, { container })
+ expect(screen.getByText('FLUID.GAS.LABEL')).toBeInTheDocument()
+
+ await userEvent.click(prevButton)
+ await waitFor(() => null, { container })
+ expect(screen.getByText('FLUID.ELECTRICITY.LABEL')).toBeInTheDocument()
})
})
diff --git a/src/components/Analysis/MaxConsumptionCard/MaxConsumptionCard.tsx b/src/components/Analysis/MaxConsumptionCard/MaxConsumptionCard.tsx
index 3f71b5b1e9143890683e03ac244492606594c03f..42429b5af412be83452c3d86aceef5db57b6677a 100644
--- a/src/components/Analysis/MaxConsumptionCard/MaxConsumptionCard.tsx
+++ b/src/components/Analysis/MaxConsumptionCard/MaxConsumptionCard.tsx
@@ -112,6 +112,7 @@ const MaxConsumptionCard = ({
aria-label={t('consumption.accessibility.button_previous_value')}
onClick={() => handleFluidChange(-1)}
className="arrow-prev"
+ disabled={fluidsWithData.length <= 1}
>
<Icon icon={LeftArrowIcon} size={24} />
</IconButton>
@@ -122,6 +123,7 @@ const MaxConsumptionCard = ({
aria-label={t('consumption.accessibility.button_next_value')}
onClick={() => handleFluidChange(1)}
className="arrow-next"
+ disabled={fluidsWithData.length <= 1}
>
<Icon icon={RightArrowIcon} size={24} />
</IconButton>
@@ -132,11 +134,11 @@ const MaxConsumptionCard = ({
<StyledIcon icon={GraphIcon} size={38} />
<div className="text-16-normal title">{t('analysis.max_day')}</div>
<div className="fluid-navigation">
- {fluidsWithData.length > 1 && buttonPrev()}
+ {buttonPrev()}
<div className={`text-20-bold fluid ${currentFluidSlug.toLowerCase()}`}>
{t(`FLUID.${currentFluidSlug}.LABEL`)}
</div>
- {fluidsWithData.length > 1 && buttonNext()}
+ {buttonNext()}
</div>
<div className="data-container">
diff --git a/src/components/Analysis/MaxConsumptionCard/__snapshots__/MaxConsumptionCard.spec.tsx.snap b/src/components/Analysis/MaxConsumptionCard/__snapshots__/MaxConsumptionCard.spec.tsx.snap
index 10886a7a5e2e3a63fc7d358651ab0e4b56f360b9..c7b9d88446a2c31b5f36e58cee76e0d97662e27e 100644
--- a/src/components/Analysis/MaxConsumptionCard/__snapshots__/MaxConsumptionCard.spec.tsx.snap
+++ b/src/components/Analysis/MaxConsumptionCard/__snapshots__/MaxConsumptionCard.spec.tsx.snap
@@ -1,540 +1,456 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`MaxConsumptionCard component should be rendered correctly 1`] = `
-<Provider
- store={
- Object {
- "clearActions": [Function],
- "dispatch": [Function],
- "getActions": [Function],
- "getState": [Function],
- "replaceReducer": [Function],
- "subscribe": [Function],
- }
- }
->
- <MaxConsumptionCard
- fluidsWithData={
- Array [
- 0,
- 2,
- ]
- }
+<div>
+ <div
+ class="max-consumption-container"
>
+ <svg
+ aria-hidden="true"
+ class="styles__icon___23x3R"
+ height="38"
+ width="38"
+ >
+ <use
+ xlink:href="#test-file-stub"
+ />
+ </svg>
+ <div
+ class="text-16-normal title"
+ >
+ analysis.max_day
+ </div>
<div
- className="max-consumption-container"
+ class="fluid-navigation"
>
- <StyledIcon
- icon="test-file-stub"
- size={38}
+ <button
+ aria-label="consumption.accessibility.button_previous_value"
+ class="MuiButtonBase-root MuiIconButton-root arrow-prev"
+ tabindex="0"
+ type="button"
>
- <Icon
- aria-hidden={true}
- icon="test-file-stub"
- size={38}
- spin={false}
+ <span
+ class="MuiIconButton-label"
>
- <Component
- aria-hidden={true}
- className="styles__icon___23x3R"
- height={38}
- style={Object {}}
- width={38}
+ <svg
+ class="styles__icon___23x3R"
+ height="24"
+ width="24"
>
- <svg
- aria-hidden={true}
- className="styles__icon___23x3R"
- height={38}
- style={Object {}}
- width={38}
- >
- <use
- xlinkHref="#test-file-stub"
- />
- </svg>
- </Component>
- </Icon>
- </StyledIcon>
+ <use
+ xlink:href="#test-file-stub"
+ />
+ </svg>
+ </span>
+ <span
+ class="MuiTouchRipple-root"
+ />
+ </button>
<div
- className="text-16-normal title"
+ class="text-20-bold fluid electricity"
>
- analysis.max_day
+ FLUID.ELECTRICITY.LABEL
</div>
- <div
- className="fluid-navigation"
+ <button
+ aria-label="consumption.accessibility.button_next_value"
+ class="MuiButtonBase-root MuiIconButton-root arrow-next"
+ tabindex="0"
+ type="button"
>
- <WithStyles(ForwardRef(IconButton))
- aria-label="consumption.accessibility.button_previous_value"
- className="arrow-prev"
- onClick={[Function]}
+ <span
+ class="MuiIconButton-label"
>
- <ForwardRef(IconButton)
- aria-label="consumption.accessibility.button_previous_value"
- className="arrow-prev"
- classes={
- Object {
- "colorInherit": "MuiIconButton-colorInherit",
- "colorPrimary": "MuiIconButton-colorPrimary",
- "colorSecondary": "MuiIconButton-colorSecondary",
- "disabled": "Mui-disabled",
- "edgeEnd": "MuiIconButton-edgeEnd",
- "edgeStart": "MuiIconButton-edgeStart",
- "label": "MuiIconButton-label",
- "root": "MuiIconButton-root",
- "sizeSmall": "MuiIconButton-sizeSmall",
- }
- }
- onClick={[Function]}
+ <svg
+ class="styles__icon___23x3R"
+ height="24"
+ width="24"
>
- <WithStyles(ForwardRef(ButtonBase))
- aria-label="consumption.accessibility.button_previous_value"
- centerRipple={true}
- className="MuiIconButton-root arrow-prev"
- disabled={false}
- focusRipple={true}
- onClick={[Function]}
- >
- <ForwardRef(ButtonBase)
- aria-label="consumption.accessibility.button_previous_value"
- centerRipple={true}
- className="MuiIconButton-root arrow-prev"
- classes={
- Object {
- "disabled": "Mui-disabled",
- "focusVisible": "Mui-focusVisible",
- "root": "MuiButtonBase-root",
- }
- }
- disabled={false}
- focusRipple={true}
- onClick={[Function]}
- >
- <button
- aria-label="consumption.accessibility.button_previous_value"
- className="MuiButtonBase-root MuiIconButton-root arrow-prev"
- disabled={false}
- onBlur={[Function]}
- onClick={[Function]}
- onDragLeave={[Function]}
- onFocus={[Function]}
- onKeyDown={[Function]}
- onKeyUp={[Function]}
- onMouseDown={[Function]}
- onMouseLeave={[Function]}
- onMouseUp={[Function]}
- onTouchEnd={[Function]}
- onTouchMove={[Function]}
- onTouchStart={[Function]}
- tabIndex={0}
- type="button"
- >
- <span
- className="MuiIconButton-label"
- >
- <Icon
- icon="test-file-stub"
- size={24}
- spin={false}
- >
- <Component
- className="styles__icon___23x3R"
- height={24}
- style={Object {}}
- width={24}
- >
- <svg
- className="styles__icon___23x3R"
- height={24}
- style={Object {}}
- width={24}
- >
- <use
- xlinkHref="#test-file-stub"
- />
- </svg>
- </Component>
- </Icon>
- </span>
- <WithStyles(memo)
- center={true}
- >
- <ForwardRef(TouchRipple)
- center={true}
- classes={
- Object {
- "child": "MuiTouchRipple-child",
- "childLeaving": "MuiTouchRipple-childLeaving",
- "childPulsate": "MuiTouchRipple-childPulsate",
- "ripple": "MuiTouchRipple-ripple",
- "ripplePulsate": "MuiTouchRipple-ripplePulsate",
- "rippleVisible": "MuiTouchRipple-rippleVisible",
- "root": "MuiTouchRipple-root",
- }
- }
- >
- <span
- className="MuiTouchRipple-root"
- >
- <TransitionGroup
- childFactory={[Function]}
- component={null}
- exit={true}
- />
- </span>
- </ForwardRef(TouchRipple)>
- </WithStyles(memo)>
- </button>
- </ForwardRef(ButtonBase)>
- </WithStyles(ForwardRef(ButtonBase))>
- </ForwardRef(IconButton)>
- </WithStyles(ForwardRef(IconButton))>
+ <use
+ xlink:href="#test-file-stub"
+ />
+ </svg>
+ </span>
+ <span
+ class="MuiTouchRipple-root"
+ />
+ </button>
+ </div>
+ <div
+ class="data-container"
+ >
+ <div
+ class="text-24-bold maxDay-date"
+ >
+ jeudi 01 octobre
+ </div>
+ <div>
<div
- className="text-20-bold fluid electricity"
- >
- FLUID.ELECTRICITY.LABEL
- </div>
- <WithStyles(ForwardRef(IconButton))
- aria-label="consumption.accessibility.button_next_value"
- className="arrow-next"
- onClick={[Function]}
+ class="dataloadvisualizer-section"
>
- <ForwardRef(IconButton)
- aria-label="consumption.accessibility.button_next_value"
- className="arrow-next"
- classes={
- Object {
- "colorInherit": "MuiIconButton-colorInherit",
- "colorPrimary": "MuiIconButton-colorPrimary",
- "colorSecondary": "MuiIconButton-colorSecondary",
- "disabled": "Mui-disabled",
- "edgeEnd": "MuiIconButton-edgeEnd",
- "edgeStart": "MuiIconButton-edgeStart",
- "label": "MuiIconButton-label",
- "root": "MuiIconButton-root",
- "sizeSmall": "MuiIconButton-sizeSmall",
- }
- }
- onClick={[Function]}
+ <div
+ class="dataloadvisualizer-value text-36-bold electricity"
>
- <WithStyles(ForwardRef(ButtonBase))
- aria-label="consumption.accessibility.button_next_value"
- centerRipple={true}
- className="MuiIconButton-root arrow-next"
- disabled={false}
- focusRipple={true}
- onClick={[Function]}
+ 69,18
+ <span
+ class="text-18-normal"
>
- <ForwardRef(ButtonBase)
- aria-label="consumption.accessibility.button_next_value"
- centerRipple={true}
- className="MuiIconButton-root arrow-next"
- classes={
- Object {
- "disabled": "Mui-disabled",
- "focusVisible": "Mui-focusVisible",
- "root": "MuiButtonBase-root",
- }
- }
- disabled={false}
- focusRipple={true}
- onClick={[Function]}
- >
- <button
- aria-label="consumption.accessibility.button_next_value"
- className="MuiButtonBase-root MuiIconButton-root arrow-next"
- disabled={false}
- onBlur={[Function]}
- onClick={[Function]}
- onDragLeave={[Function]}
- onFocus={[Function]}
- onKeyDown={[Function]}
- onKeyUp={[Function]}
- onMouseDown={[Function]}
- onMouseLeave={[Function]}
- onMouseUp={[Function]}
- onTouchEnd={[Function]}
- onTouchMove={[Function]}
- onTouchStart={[Function]}
- tabIndex={0}
- type="button"
- >
- <span
- className="MuiIconButton-label"
- >
- <Icon
- icon="test-file-stub"
- size={24}
- spin={false}
- >
- <Component
- className="styles__icon___23x3R"
- height={24}
- style={Object {}}
- width={24}
- >
- <svg
- className="styles__icon___23x3R"
- height={24}
- style={Object {}}
- width={24}
- >
- <use
- xlinkHref="#test-file-stub"
- />
- </svg>
- </Component>
- </Icon>
- </span>
- <WithStyles(memo)
- center={true}
- >
- <ForwardRef(TouchRipple)
- center={true}
- classes={
- Object {
- "child": "MuiTouchRipple-child",
- "childLeaving": "MuiTouchRipple-childLeaving",
- "childPulsate": "MuiTouchRipple-childPulsate",
- "ripple": "MuiTouchRipple-ripple",
- "ripplePulsate": "MuiTouchRipple-ripplePulsate",
- "rippleVisible": "MuiTouchRipple-rippleVisible",
- "root": "MuiTouchRipple-root",
- }
- }
- >
- <span
- className="MuiTouchRipple-root"
- >
- <TransitionGroup
- childFactory={[Function]}
- component={null}
- exit={true}
- />
- </span>
- </ForwardRef(TouchRipple)>
- </WithStyles(memo)>
- </button>
- </ForwardRef(ButtonBase)>
- </WithStyles(ForwardRef(ButtonBase))>
- </ForwardRef(IconButton)>
- </WithStyles(ForwardRef(IconButton))>
+ FLUID.ELECTRICITY.UNIT
+ </span>
+ </div>
+ <div
+ class="dataloadvisualizer-euro text-16-normal electricity"
+ >
+ 12,04 €
+ </div>
+ </div>
</div>
- <div
- className="data-container"
+ <svg
+ height="250"
+ width="940"
>
- <div
- className="text-24-bold maxDay-date"
+ <g
+ class="axis y"
+ fill="none"
+ font-family="sans-serif"
+ font-size="10"
+ text-anchor="start"
+ transform="translate(885, 20)"
>
- jeudi 01 octobre
- </div>
- <div>
- <DataloadSection
- dataload={
- Object {
- "date": "2020-10-01T00:00:00.000Z",
- "state": "AGGREGATED_VALID",
- "value": 69.18029999999999,
- "valueDetail": Array [
- Object {
- "state": "VALID",
- "value": 45.127739999999996,
- },
- Object {
- "state": "VALID",
- "value": 0.9048899999999999,
- },
- Object {
- "state": "VALID",
- "value": 23.147669999999998,
- },
- ],
- }
- }
- dataloadSectionType="NO_COMPARE"
- fluidType={0}
- toggleEstimationModal={[Function]}
+ <g
+ class="tick"
+ opacity="1"
+ transform="translate(0,180.5)"
+ >
+ <line
+ stroke="currentColor"
+ x2="-940"
+ />
+ <text
+ class="chart-ticks-y-text"
+ dy="0.32em"
+ fill="currentColor"
+ x="3"
+ >
+ 0
+ </text>
+ </g>
+ <g
+ class="tick"
+ opacity="1"
+ transform="translate(0,128.46206434490742)"
+ >
+ <line
+ stroke="currentColor"
+ x2="-940"
+ />
+ <text
+ class="chart-ticks-y-text"
+ dy="0.32em"
+ fill="currentColor"
+ x="3"
+ >
+ 20 FLUID.ELECTRICITY.UNIT
+ </text>
+ </g>
+ <g
+ class="tick"
+ opacity="1"
+ transform="translate(0,76.42412868981485)"
>
- <div
- className="dataloadvisualizer-section"
+ <line
+ stroke="currentColor"
+ x2="-940"
+ />
+ <text
+ class="chart-ticks-y-text"
+ dy="0.32em"
+ fill="currentColor"
+ x="3"
>
- <div
- className="dataloadvisualizer-value text-36-bold electricity"
- >
- <DataloadSectionValue
- dataload={
- Object {
- "date": "2020-10-01T00:00:00.000Z",
- "state": "AGGREGATED_VALID",
- "value": 69.18029999999999,
- "valueDetail": Array [
- Object {
- "state": "VALID",
- "value": 45.127739999999996,
- },
- Object {
- "state": "VALID",
- "value": 0.9048899999999999,
- },
- Object {
- "state": "VALID",
- "value": 23.147669999999998,
- },
- ],
- }
- }
- dataloadSectionType="NO_COMPARE"
- fluidType={0}
- toggleEstimationModal={[Function]}
+ 40 FLUID.ELECTRICITY.UNIT
+ </text>
+ </g>
+ <g
+ class="tick"
+ opacity="1"
+ transform="translate(0,24.386193034722293)"
+ >
+ <line
+ stroke="currentColor"
+ x2="-940"
+ />
+ <text
+ class="chart-ticks-y-text"
+ dy="0.32em"
+ fill="currentColor"
+ x="3"
+ >
+ 60 FLUID.ELECTRICITY.UNIT
+ </text>
+ </g>
+ </g>
+ <g
+ transform="translate(10,20)"
+ >
+ <g>
+ <g
+ class="barContainer disabled"
+ transform="translate(54.6875, -40)"
+ >
+ <rect
+ class="background-false"
+ fill="#E0E0E0"
+ height="220"
+ width="218.75"
+ x="0"
+ y="0"
+ />
+ </g>
+ <g
+ class="barFill"
+ transform="translate(54.6875, 168.73935065329292)"
+ >
+ <defs>
+ <lineargradient
+ id="gradient"
+ x1="0"
+ x2="0"
+ y1="0"
+ y2="1"
>
- 69,18
- <span
- className="text-18-normal"
- >
- FLUID.ELECTRICITY.UNIT
- </span>
- </DataloadSectionValue>
- </div>
- <DataloadSectionDetail
- dataload={
- Object {
- "date": "2020-10-01T00:00:00.000Z",
- "state": "AGGREGATED_VALID",
- "value": 69.18029999999999,
- "valueDetail": Array [
- Object {
- "state": "VALID",
- "value": 45.127739999999996,
- },
- Object {
- "state": "VALID",
- "value": 0.9048899999999999,
- },
- Object {
- "state": "VALID",
- "value": 23.147669999999998,
- },
- ],
- }
- }
- dataloadSectionType="NO_COMPARE"
- fluidType={0}
- >
- <div
- className="dataloadvisualizer-euro text-16-normal electricity"
+ <stop
+ id="stop-color-1"
+ offset="0%"
+ />
+ <stop
+ id="stop-color-2"
+ offset="100%"
+ />
+ </lineargradient>
+ </defs>
+ <path
+ class="bar-ELECTRICITY undefined disabled bounce-3 delay--0"
+ d="
+ M0,4
+ a4,4 0 0 1 4,-4
+ h210.75
+ a4,4 0 0 1 4,4
+ v7.260649346707083
+ h-218.75
+ z"
+ />
+ </g>
+ <g
+ transform="translate(54.6875, 168.73935065329292)"
+ >
+ <defs>
+ <lineargradient
+ class="bar-ELECTRICITY undefined disabled bounce-3 delay--0"
+ id="gradient"
+ x1="0"
+ x2="0"
+ y1="0"
+ y2="1"
>
- 12,04 €
- </div>
- </DataloadSectionDetail>
- </div>
- </DataloadSection>
- </div>
- <mock-BarChart
- chartData={
- Object {
- "actualData": Array [
- Object {
- "date": "2020-10-01T00:00:00.000Z",
- "state": "AGGREGATED_VALID",
- "value": 69.18029999999999,
- "valueDetail": Array [
- Object {
- "state": "VALID",
- "value": 45.127739999999996,
- },
- Object {
- "state": "VALID",
- "value": 0.9048899999999999,
- },
- Object {
- "state": "VALID",
- "value": 23.147669999999998,
- },
- ],
- },
- Object {
- "date": "2020-10-02T00:00:00.000Z",
- "state": "AGGREGATED_VALID",
- "value": 61.65554999999999,
- "valueDetail": Array [
- Object {
- "state": "VALID",
- "value": 40.21918999999999,
- },
- Object {
- "state": "VALID",
- "value": 0.8064649999999999,
- },
- Object {
- "state": "VALID",
- "value": 20.629894999999998,
- },
- ],
- },
- Object {
- "date": "2020-10-03T00:00:00.000Z",
- "state": "EMPTY",
- "value": -1,
- "valueDetail": null,
- },
- ],
- "comparisonData": Array [
- Object {
- "date": "2020-09-01T00:00:00.000Z",
- "state": "AGGREGATED_VALID",
- "value": 54.090509999999995,
- "valueDetail": Array [
- Object {
- "state": "VALID",
- "value": 35.284358,
- },
- Object {
- "state": "VALID",
- "value": 0.707513,
- },
- Object {
- "state": "VALID",
- "value": 18.098639,
- },
- ],
- },
- Object {
- "date": "2020-09-02T00:00:00.000Z",
- "state": "AGGREGATED_VALID",
- "value": 56.57427,
- "valueDetail": Array [
- Object {
- "state": "VALID",
- "value": 36.904565999999996,
- },
- Object {
- "state": "VALID",
- "value": 0.740001,
- },
- Object {
- "state": "VALID",
- "value": 18.929703,
- },
- ],
- },
- Object {
- "date": "2020-09-03T00:00:00.000Z",
- "state": "EMPTY",
- "value": -1,
- "valueDetail": null,
- },
- ],
- }
- }
- clickable={false}
- fluidType={0}
- height={250}
- isSwitching={false}
- showCompare={false}
- timeStep={20}
- width={940}
- />
- </div>
+ <stop
+ id="stop-color-1"
+ offset="0%"
+ />
+ <stop
+ id="stop-color-2"
+ offset="100%"
+ />
+ </lineargradient>
+ </defs>
+ <path
+ class="bar-ELECTRICITY undefined disabled bounce-3 delay--0"
+ d="
+ M0,4
+ a4,4 0 0 1 4,-4
+ h210.75
+ a4,4 0 0 1 4,4
+ v7.260649346707083
+ h-218.75
+ z"
+ />
+ </g>
+ </g>
+ <g>
+ <g
+ class="barContainer disabled"
+ transform="translate(328.125, -40)"
+ >
+ <rect
+ class="background-false"
+ fill="#E0E0E0"
+ height="220"
+ width="218.75"
+ x="0"
+ y="0"
+ />
+ </g>
+ <g
+ class="barFill"
+ transform="translate(328.125, 168.73935065329292)"
+ >
+ <defs>
+ <lineargradient
+ id="gradient"
+ x1="0"
+ x2="0"
+ y1="0"
+ y2="1"
+ >
+ <stop
+ id="stop-color-1"
+ offset="0%"
+ />
+ <stop
+ id="stop-color-2"
+ offset="100%"
+ />
+ </lineargradient>
+ </defs>
+ <path
+ class="bar-ELECTRICITY undefined disabled bounce-3 delay--1"
+ d="
+ M0,4
+ a4,4 0 0 1 4,-4
+ h210.75
+ a4,4 0 0 1 4,4
+ v7.260649346707083
+ h-218.75
+ z"
+ />
+ </g>
+ <g
+ transform="translate(328.125, 168.73935065329292)"
+ >
+ <defs>
+ <lineargradient
+ class="bar-ELECTRICITY undefined disabled bounce-3 delay--1"
+ id="gradient"
+ x1="0"
+ x2="0"
+ y1="0"
+ y2="1"
+ >
+ <stop
+ id="stop-color-1"
+ offset="0%"
+ />
+ <stop
+ id="stop-color-2"
+ offset="100%"
+ />
+ </lineargradient>
+ </defs>
+ <path
+ class="bar-ELECTRICITY undefined disabled bounce-3 delay--1"
+ d="
+ M0,4
+ a4,4 0 0 1 4,-4
+ h210.75
+ a4,4 0 0 1 4,4
+ v7.260649346707083
+ h-218.75
+ z"
+ />
+ </g>
+ </g>
+ <g>
+ <g
+ class="barContainer disabled"
+ transform="translate(601.5625, -40)"
+ >
+ <rect
+ class="background-false"
+ fill="#E0E0E0"
+ height="220"
+ width="218.75"
+ x="0"
+ y="0"
+ />
+ </g>
+ <g
+ class="barFill"
+ transform="translate(601.5625, 168.73935065329292)"
+ >
+ <defs>
+ <lineargradient
+ id="gradient"
+ x1="0"
+ x2="0"
+ y1="0"
+ y2="1"
+ >
+ <stop
+ id="stop-color-1"
+ offset="0%"
+ />
+ <stop
+ id="stop-color-2"
+ offset="100%"
+ />
+ </lineargradient>
+ </defs>
+ <path
+ class="bar-ELECTRICITY bar-UNCOMING undefined disabled bounce-3 delay--2"
+ d="
+ M0,4
+ a4,4 0 0 1 4,-4
+ h210.75
+ a4,4 0 0 1 4,4
+ v7.260649346707083
+ h-218.75
+ z"
+ />
+ </g>
+ </g>
+ </g>
+ <g
+ class="axis x"
+ transform="translate(10, 200)"
+ >
+ <g
+ class="tick"
+ opacity="1"
+ transform="translate(54.6875, 0)"
+ >
+ <text
+ class="chart-ticks-y-text"
+ dy="0.71em"
+ transform="translate(109.375)"
+ y="10"
+ />
+ </g>
+ <g
+ class="tick"
+ opacity="1"
+ transform="translate(328.125, 0)"
+ >
+ <text
+ class="chart-ticks-y-text"
+ dy="0.71em"
+ transform="translate(109.375)"
+ y="10"
+ />
+ </g>
+ <g
+ class="tick"
+ opacity="1"
+ transform="translate(601.5625, 0)"
+ >
+ <text
+ class="chart-ticks-y-text"
+ dy="0.71em"
+ transform="translate(109.375)"
+ y="10"
+ />
+ </g>
+ </g>
+ </svg>
</div>
- </MaxConsumptionCard>
-</Provider>
+ </div>
+</div>
`;
diff --git a/src/components/Analysis/MonthlyAnalysis.spec.tsx b/src/components/Analysis/MonthlyAnalysis.spec.tsx
index b6f18e5460fa79ce0379d5e9560cfb91fee9f7f3..061b40454e8797e69f5397a17c55e3ff396a1ad6 100644
--- a/src/components/Analysis/MonthlyAnalysis.spec.tsx
+++ b/src/components/Analysis/MonthlyAnalysis.spec.tsx
@@ -1,12 +1,10 @@
+import { render, waitFor } from '@testing-library/react'
import MonthlyAnalysis from 'components/Analysis/MonthlyAnalysis'
-import { mount } from 'enzyme'
-import toJson from 'enzyme-to-json'
import { PerformanceIndicator } from 'models'
import React from 'react'
import { Provider } from 'react-redux'
import { BrowserRouter } from 'react-router-dom'
import { createMockEcolyoStore } from 'tests/__mocks__/store'
-import { waitForComponentToPaint } from 'tests/__mocks__/testUtils'
const mockPI: PerformanceIndicator[] = [
{ value: 5, compareValue: 10, percentageVariation: 50 },
@@ -14,13 +12,11 @@ const mockPI: PerformanceIndicator[] = [
]
jest.mock('services/consumption.service', () => {
- return jest.fn(() => {
- return {
- getFluidsWithDataForTimePeriod: jest.fn(() => [0, 1, 2]),
- getFluidsWithIncompleteData: jest.fn(() => [0]),
- getPerformanceIndicators: jest.fn(() => mockPI),
- }
- })
+ return jest.fn(() => ({
+ getFluidsWithDataForTimePeriod: jest.fn(() => [0, 1, 2]),
+ getFluidsWithIncompleteData: jest.fn(() => [0]),
+ getPerformanceIndicators: jest.fn(() => mockPI),
+ }))
})
jest.mock('components/Analysis/Comparison/Comparison', () => 'mock-comparison')
@@ -46,7 +42,7 @@ window.scrollTo = jest.fn()
describe('MonthlyAnalysis component', () => {
it('should be rendered correctly', async () => {
const store = createMockEcolyoStore()
- const wrapper = mount(
+ const { container } = render(
<BrowserRouter>
<Provider store={store}>
<MonthlyAnalysis
@@ -56,7 +52,7 @@ describe('MonthlyAnalysis component', () => {
</Provider>
</BrowserRouter>
)
- await waitForComponentToPaint(wrapper)
- expect(toJson(wrapper)).toMatchSnapshot()
+ await waitFor(() => null, { container })
+ expect(container).toMatchSnapshot()
})
})
diff --git a/src/components/Analysis/NoKonnector/NoAnalysisModal.spec.tsx b/src/components/Analysis/NoKonnector/NoAnalysisModal.spec.tsx
index fd629dca0cdd45dd563fb49607c3840e39e1ceb3..8245f6e52dbcebc615b1e833afadd06d4132e2cf 100644
--- a/src/components/Analysis/NoKonnector/NoAnalysisModal.spec.tsx
+++ b/src/components/Analysis/NoKonnector/NoAnalysisModal.spec.tsx
@@ -1,13 +1,11 @@
-import Button from '@material-ui/core/Button'
-import Dialog from '@material-ui/core/Dialog'
-import { mount } from 'enzyme'
+import { render, screen } from '@testing-library/react'
import React from 'react'
import NoAnalysisModal from './NoAnalysisModal'
describe('NoAnalysisModal component', () => {
- it('should be rendered correctly', () => {
- const wrapper = mount(<NoAnalysisModal open={true} onClose={jest.fn()} />)
- expect(wrapper.find(Dialog).exists()).toBeTruthy()
- expect(wrapper.find(Button).exists()).toBeTruthy()
+ it('should be render a modal with a button', () => {
+ render(<NoAnalysisModal open={true} onClose={jest.fn()} />)
+ expect(screen.getByRole('dialog')).toBeInTheDocument()
+ expect(screen.getAllByRole('button').length).toBe(2)
})
})
diff --git a/src/components/Analysis/NoKonnector/NoAnalysisModal.tsx b/src/components/Analysis/NoKonnector/NoAnalysisModal.tsx
index 09e0b8c749d2b0e44d236dc1870d29b0a3a9a834..c543f56bd904e0c4eae38680945db8f50aa2518b 100644
--- a/src/components/Analysis/NoKonnector/NoAnalysisModal.tsx
+++ b/src/components/Analysis/NoKonnector/NoAnalysisModal.tsx
@@ -46,27 +46,21 @@ const NoAnalysisModal = ({
<div className="analysis-error-button">
<Button
aria-label={t(
- 'analysis_error_modal.accessibility.button_understood'
+ 'analysis_error_modal.accessibility.button_goto_konnector'
)}
- onClick={close}
- classes={{
- root: 'btn-secondary-positive',
- label: 'text-16-normal',
- }}
+ onClick={goToConsumption}
+ className="btnPrimary"
>
- {t('analysis_error_modal.understood')}
+ {t('analysis_error_modal.go_to_conso')}
</Button>
<Button
aria-label={t(
- 'analysis_error_modal.accessibility.button_goto_konnector'
+ 'analysis_error_modal.accessibility.button_understood'
)}
- onClick={goToConsumption}
- classes={{
- root: 'btn-highlight',
- label: 'text-16-bold',
- }}
+ onClick={close}
+ className="btnSecondary"
>
- {t('analysis_error_modal.go_to_conso')}
+ {t('analysis_error_modal.understood')}
</Button>
</div>
</div>
diff --git a/src/components/Analysis/NoKonnector/noAnalysisModal.scss b/src/components/Analysis/NoKonnector/noAnalysisModal.scss
index 4f89990b3f6f2be0af45c5f253e741fd9c5e9122..5e5986b88232eede2c7a6cb60e3f094bdb504808 100644
--- a/src/components/Analysis/NoKonnector/noAnalysisModal.scss
+++ b/src/components/Analysis/NoKonnector/noAnalysisModal.scss
@@ -12,20 +12,7 @@
}
.analysis-error-button {
display: flex;
- justify-content: space-between;
+ flex-wrap: wrap;
gap: 1rem;
- button {
- margin: 0;
- height: 45px;
- &.btn-secondary-positive {
- margin-bottom: 0;
- }
- }
- @media #{$large-phone} {
- flex-direction: column-reverse;
- button {
- width: 100%;
- }
- }
}
}
diff --git a/src/components/Analysis/ProfileComparator/ProfileComparator.spec.tsx b/src/components/Analysis/ProfileComparator/ProfileComparator.spec.tsx
index 8bb603abffedaf7fcc092ff60504c77e2440f05c..20b645a30b567aa285443488c39d063fcc157972 100644
--- a/src/components/Analysis/ProfileComparator/ProfileComparator.spec.tsx
+++ b/src/components/Analysis/ProfileComparator/ProfileComparator.spec.tsx
@@ -1,18 +1,13 @@
-/* eslint-disable react/display-name */
-import { Accordion } from '@material-ui/core'
-import Button from '@material-ui/core/Button'
-import { FluidType } from 'enums'
-import { mount } from 'enzyme'
-import { PerformanceIndicator } from 'models'
+import { render, screen, waitFor } from '@testing-library/react'
+import { userEvent } from '@testing-library/user-event'
import React from 'react'
import { Provider } from 'react-redux'
import { profileData } from 'tests/__mocks__/profileData.mock'
import {
- mockMonthlyForecastJanuaryTestProfile1,
- profileTypeData,
-} from 'tests/__mocks__/profileType.mock'
-import { createMockEcolyoStore, mockAnalysisState } from 'tests/__mocks__/store'
-import { waitForComponentToPaint } from 'tests/__mocks__/testUtils'
+ createMockEcolyoStore,
+ mockAnalysisState,
+ mockProfileState,
+} from 'tests/__mocks__/store'
import ProfileComparator from './ProfileComparator'
const mockedNavigate = jest.fn()
@@ -28,10 +23,9 @@ jest.mock('services/profileType.service', () => {
}))
})
-const mockGetProfileTypeData = jest.fn()
jest.mock('services/profileTypeEntity.service', () => {
return jest.fn(() => ({
- getProfileType: mockGetProfileTypeData,
+ getProfileType: jest.fn(),
}))
})
@@ -40,9 +34,9 @@ jest.mock(
() => 'mock-profileComparatorRow'
)
-const modifiedProfile = { ...profileData, isProfileTypeCompleted: true }
-const store = createMockEcolyoStore({
- profile: modifiedProfile,
+const profileCompleted = { ...profileData, isProfileTypeCompleted: true }
+const storeProfileCompleted = createMockEcolyoStore({
+ profile: profileCompleted,
analysis: mockAnalysisState,
})
@@ -70,141 +64,41 @@ const performanceIndicators = [
]
describe('AnalysisConsumption component', () => {
- it('should be rendered correctly', async () => {
- const wrapper = mount(
- <Provider store={store}>
- <ProfileComparator
- aggregatedPerformanceIndicator={performanceIndicator}
- performanceIndicators={performanceIndicators}
- />
- </Provider>
- )
- await waitForComponentToPaint(wrapper)
- expect(wrapper.find(Accordion).exists()).toBeTruthy()
- expect(wrapper.find('mock-profileComparatorRow').length).toBe(4)
- })
-
- it('should be rendered correctly with no profil set', async () => {
- const mockAggregatedPerformanceIndicator: PerformanceIndicator = {
- compareValue: 160.42797399999998,
- percentageVariation: null,
- value: null,
- }
- const wrapper = mount(
- <Provider store={store}>
- <ProfileComparator
- aggregatedPerformanceIndicator={mockAggregatedPerformanceIndicator}
- performanceIndicators={performanceIndicators}
- />
- </Provider>
- )
- await waitForComponentToPaint(wrapper)
- expect(wrapper.find(Button).exists()).toBeTruthy()
- })
-
- it('should be rendered correctly with null aggregated performance indicator', async () => {
- const mockAggregatedPerformanceIndicator: PerformanceIndicator = {
- compareValue: 160.42797399999998,
- percentageVariation: null,
- value: null,
- }
- const wrapper = mount(
- <Provider store={store}>
- <ProfileComparator
- aggregatedPerformanceIndicator={mockAggregatedPerformanceIndicator}
- performanceIndicators={performanceIndicators}
- />
- </Provider>
- )
- await waitForComponentToPaint(wrapper)
- expect(wrapper.find(Accordion).exists()).toBeTruthy()
- expect(wrapper.find('mock-profileComparatorRow').length).toBe(4)
- })
-
- it('should be rendered correctly without fluid', async () => {
- const wrapper = mount(
- <Provider store={store}>
- <ProfileComparator
- aggregatedPerformanceIndicator={performanceIndicator}
- performanceIndicators={performanceIndicators}
- />
- </Provider>
- )
- await waitForComponentToPaint(wrapper)
- expect(
- wrapper.find('mock-profileComparatorRow').first().prop('fluid')
- ).toBe(FluidType.MULTIFLUID)
- })
-
- it('should be rendered correctly with all fluids connected', async () => {
- const store = createMockEcolyoStore({
- profile: modifiedProfile,
- profileType: profileTypeData,
- global: {
- fluidTypes: [FluidType.ELECTRICITY, FluidType.WATER, FluidType.GAS],
- },
- analysis: {
- ...mockAnalysisState,
- analysisMonth: profileData.monthlyAnalysisDate,
- },
+ it('should be rendered correctly with profile NOT completed and go to profile button', async () => {
+ const storeProfileNotCompleted = createMockEcolyoStore({
+ profile: mockProfileState,
+ analysis: mockAnalysisState,
})
- mockGetMonthlyForecast.mockReturnValue(
- mockMonthlyForecastJanuaryTestProfile1
- )
- const wrapper = mount(
- <Provider store={store}>
+ const { container } = render(
+ <Provider store={storeProfileNotCompleted}>
<ProfileComparator
aggregatedPerformanceIndicator={performanceIndicator}
performanceIndicators={performanceIndicators}
/>
</Provider>
)
- await waitForComponentToPaint(wrapper)
- expect(mockGetMonthlyForecast).toHaveBeenCalledWith(
- profileData.monthlyAnalysisDate.month - 1
- )
- expect(
- wrapper.find('mock-profileComparatorRow').first().prop('fluid')
- ).toBe(FluidType.MULTIFLUID)
- })
-
- it('should be rendered correctly with 2 fluids connected', async () => {
- const store = createMockEcolyoStore({
- profile: modifiedProfile,
- global: { fluidTypes: [FluidType.ELECTRICITY, FluidType.WATER] },
- analysis: { analysisMonth: profileData.monthlyAnalysisDate },
- })
- mockGetMonthlyForecast.mockReturnValue(
- mockMonthlyForecastJanuaryTestProfile1
- )
- const wrapper = mount(
- <Provider store={store}>
- <ProfileComparator
- aggregatedPerformanceIndicator={performanceIndicator}
- performanceIndicators={performanceIndicators}
- />
- </Provider>
- )
- await waitForComponentToPaint(wrapper)
- expect(mockGetMonthlyForecast).toHaveBeenCalledWith(
- profileData.monthlyAnalysisDate.month - 1
- )
- expect(
- wrapper.find('mock-profileComparatorRow').first().prop('fluid')
- ).toBe(FluidType.MULTIFLUID)
+ await waitFor(() => null, { container })
+ expect(container).toMatchSnapshot()
+ expect(screen.getByTestId('goToProfile')).toBeInTheDocument()
+ expect(screen.queryByTestId('iconGoToProfile')).not.toBeInTheDocument()
})
- it('should redirect to profileType form when click on mui button', async () => {
- const wrapper = mount(
- <Provider store={store}>
+ it('should be rendered correctly with profile completed and go to profile edition on click', async () => {
+ const { container } = render(
+ <Provider store={storeProfileCompleted}>
<ProfileComparator
aggregatedPerformanceIndicator={performanceIndicator}
performanceIndicators={performanceIndicators}
/>
</Provider>
)
- await waitForComponentToPaint(wrapper)
- wrapper.find(Button).first().simulate('click')
+ await waitFor(() => null, { container })
+ expect(container).toMatchSnapshot()
+ const rows = container.querySelectorAll('mock-profilecomparatorrow')
+ expect(rows.length).toBe(4)
+ expect(screen.getByTestId('iconGoToProfile')).toBeInTheDocument()
+ expect(screen.queryByTestId('goToProfile')).not.toBeInTheDocument()
+ await userEvent.click(screen.getByTestId('iconGoToProfile'))
expect(mockedNavigate).toHaveBeenCalledWith('/profileType')
})
})
diff --git a/src/components/Analysis/ProfileComparator/ProfileComparator.tsx b/src/components/Analysis/ProfileComparator/ProfileComparator.tsx
index 29ae370e40395e327ba1fa1a89fa5518dbd771fc..7635f1ede663a2c653ed98ec146e17210f4671a7 100644
--- a/src/components/Analysis/ProfileComparator/ProfileComparator.tsx
+++ b/src/components/Analysis/ProfileComparator/ProfileComparator.tsx
@@ -136,9 +136,11 @@ const ProfileComparator = ({
aria-label={t('analysis.accessibility.button_go_to_profil')}
onClick={() => navigate('/profileType')}
classes={{
- root: 'btn-highlight',
+ root: 'btnPrimary',
label: 'text-18-bold',
}}
+ size="large"
+ data-testid="goToProfile"
>
{t('analysis.accessibility.button_go_to_profil')}
</Button>
@@ -177,7 +179,7 @@ const ProfileComparator = ({
(indicator, index) =>
indicator.value && (
<ProfileComparatorRow
- key={index}
+ key={FluidType[index]}
fluid={index}
userPriceConsumption={userPriceConsumption}
homePriceConsumption={homePriceConsumption}
@@ -251,10 +253,8 @@ const ProfileComparator = ({
<Button
aria-label={t('analysis.accessibility.button_go_to_profil')}
onClick={() => navigate('/profileType')}
- classes={{
- root: 'btn-secondary-negative',
- label: 'text-16-normal',
- }}
+ className="btnIcon"
+ data-testid="iconGoToProfile"
>
<StyledIcon icon={ProfileEditIcon} size={40} />
</Button>
diff --git a/src/components/Analysis/ProfileComparator/ProfileComparatorRow.spec.tsx b/src/components/Analysis/ProfileComparator/ProfileComparatorRow.spec.tsx
index bf62f78673d796a587fb730f9716389a48084137..c1f7609879ef1d7bd1bd3e18a9515a17f560732e 100644
--- a/src/components/Analysis/ProfileComparator/ProfileComparatorRow.spec.tsx
+++ b/src/components/Analysis/ProfileComparator/ProfileComparatorRow.spec.tsx
@@ -1,5 +1,5 @@
+import { render, screen } from '@testing-library/react'
import { FluidType } from 'enums'
-import { mount } from 'enzyme'
import { MonthlyForecast } from 'models'
import React from 'react'
import { mockMonthlyForecastJanuaryTestProfile1 } from 'tests/__mocks__/profileType.mock'
@@ -8,152 +8,182 @@ import ProfileComparatorRow from './ProfileComparatorRow'
describe('AnalysisConsumptionRow component', () => {
const userPriceConsumption = 20
const homePriceConsumption = 18
- const performanceValue: number | null = 25
- const forecast: MonthlyForecast = mockMonthlyForecastJanuaryTestProfile1
- const connected = true
- const noData = false
+ const performanceValue = 25
- it('should be rendered correctly for Multifluid and at least fluid connected', async () => {
- const mockPerformanceValue: number | null = null
- const wrapper = mount(
- <ProfileComparatorRow
- fluid={FluidType.MULTIFLUID}
- userPriceConsumption={userPriceConsumption}
- homePriceConsumption={homePriceConsumption}
- performanceValue={mockPerformanceValue}
- forecast={forecast}
- connected={connected}
- noData={noData}
- />
- )
- expect(wrapper.find('.consumption-multifluid').exists()).toBeTruthy()
- expect(wrapper.find('.price').first().text()).toBe('20,00 €')
- expect(wrapper.find('.price').last().text()).toBe('18,00 €')
- expect(wrapper.find('.graph').exists()).toBeTruthy()
- expect(wrapper.find('.not-connected').exists()).toBeFalsy()
- })
+ describe('Multifluid row', () => {
+ it('should be rendered correctly for Multifluid and at least fluid connected', async () => {
+ const { container } = render(
+ <ProfileComparatorRow
+ fluid={FluidType.MULTIFLUID}
+ userPriceConsumption={20}
+ homePriceConsumption={18}
+ performanceValue={null}
+ forecast={mockMonthlyForecastJanuaryTestProfile1}
+ connected={true}
+ noData={false}
+ />
+ )
+ expect(
+ container.getElementsByClassName('consumption-multifluid').length
+ ).toBeTruthy()
+ expect(screen.getByTestId('userPrice')).toHaveTextContent('20,00 €')
+ expect(screen.getByTestId('averagePrice')).toHaveTextContent('18,00 €')
+ expect(container.getElementsByClassName('graph').length).toBeTruthy()
+ expect(
+ container.getElementsByClassName('not-connected').length
+ ).toBeFalsy()
+ })
- it('should be rendered correctly for Multifluid and at none fluid connected', async () => {
- const mockPerformanceValue: number | null = null
- const mockConnected = false
- const wrapper = mount(
- <ProfileComparatorRow
- fluid={FluidType.MULTIFLUID}
- userPriceConsumption={userPriceConsumption}
- homePriceConsumption={homePriceConsumption}
- performanceValue={mockPerformanceValue}
- forecast={forecast}
- connected={mockConnected}
- noData={noData}
- />
- )
- expect(wrapper.find('.consumption-multifluid').exists()).toBeTruthy()
- expect(wrapper.find('.price').first().text()).toBe('analysis.no_data')
- expect(wrapper.find('.price').last().text()).toBe('18,00 €')
- expect(wrapper.find('.graph').exists()).toBeFalsy()
- expect(wrapper.find('.not-connected').exists()).toBeTruthy()
+ it('should be rendered correctly for Multifluid and at none fluid connected', async () => {
+ const mockConnected = false
+ const { container } = render(
+ <ProfileComparatorRow
+ fluid={FluidType.MULTIFLUID}
+ userPriceConsumption={userPriceConsumption}
+ homePriceConsumption={homePriceConsumption}
+ performanceValue={null}
+ forecast={mockMonthlyForecastJanuaryTestProfile1}
+ connected={mockConnected}
+ noData={false}
+ />
+ )
+ expect(
+ container.getElementsByClassName('consumption-multifluid').length
+ ).toBeTruthy()
+ expect(screen.getByTestId('userPrice')).toHaveTextContent(
+ 'analysis.no_data'
+ )
+ expect(screen.getByTestId('averagePrice')).toHaveTextContent('18,00 €')
+ expect(container.getElementsByClassName('graph').length).toBeFalsy()
+ expect(
+ container.getElementsByClassName('not-connected').length
+ ).toBeTruthy()
+ })
})
- it('should be rendered correctly for singleFluid connected for average', async () => {
- const wrapper = mount(
- <ProfileComparatorRow
- fluid={FluidType.ELECTRICITY}
- userPriceConsumption={userPriceConsumption}
- homePriceConsumption={homePriceConsumption}
- performanceValue={performanceValue}
- forecast={forecast}
- connected={connected}
- noData={noData}
- />
- )
- expect(wrapper.find('.consumption-electricity').exists()).toBeTruthy()
- expect(wrapper.find('.price').first().text()).toBe(
- '25 FLUID.ELECTRICITY.UNIT'
- )
- expect(wrapper.find('.price').last().text()).toBe(
- '4340 FLUID.ELECTRICITY.UNIT'
- )
- expect(wrapper.find('.graph').exists()).toBeTruthy()
- expect(wrapper.find('.not-connected').exists()).toBeFalsy()
- })
+ describe('Single fluid row', () => {
+ it('should be rendered correctly for singleFluid connected for average', async () => {
+ const { container } = render(
+ <ProfileComparatorRow
+ fluid={FluidType.ELECTRICITY}
+ userPriceConsumption={userPriceConsumption}
+ homePriceConsumption={homePriceConsumption}
+ performanceValue={performanceValue}
+ forecast={mockMonthlyForecastJanuaryTestProfile1}
+ connected={true}
+ noData={false}
+ />
+ )
- it('should be rendered correctly for singleFluid not connected', async () => {
- const mockConnected = false
- const wrapper = mount(
- <ProfileComparatorRow
- fluid={FluidType.ELECTRICITY}
- userPriceConsumption={userPriceConsumption}
- homePriceConsumption={homePriceConsumption}
- performanceValue={performanceValue}
- forecast={forecast}
- connected={mockConnected}
- noData={noData}
- />
- )
- expect(wrapper.find('.consumption-electricity').exists()).toBeTruthy()
- expect(wrapper.find('.price').first().text()).toBe('analysis.no_data')
- expect(wrapper.find('.price').last().text()).toBe(
- '4340 FLUID.ELECTRICITY.UNIT'
- )
- expect(wrapper.find('.graph').exists()).toBeFalsy()
- expect(wrapper.find('.not-connected').exists()).toBeTruthy()
- })
+ expect(
+ container.getElementsByClassName('consumption-electricity').length
+ ).toBeTruthy()
+ expect(screen.getByTestId('userPrice')).toHaveTextContent(
+ '25 FLUID.ELECTRICITY.UNIT'
+ )
+ expect(screen.getByTestId('averagePrice')).toHaveTextContent(
+ '4340 FLUID.ELECTRICITY.UNIT'
+ )
+ expect(container.getElementsByClassName('graph').length).toBeTruthy()
+ expect(
+ container.getElementsByClassName('not-connected').length
+ ).toBeFalsy()
+ })
- it('should be rendered correctly for singleFluid with none performance value', async () => {
- const mockPerformanceValue: number | null = null
- const wrapper = mount(
- <ProfileComparatorRow
- fluid={FluidType.ELECTRICITY}
- userPriceConsumption={userPriceConsumption}
- homePriceConsumption={homePriceConsumption}
- performanceValue={mockPerformanceValue}
- forecast={forecast}
- connected={connected}
- noData={noData}
- />
- )
- expect(wrapper.find('.consumption-electricity').exists()).toBeTruthy()
- expect(wrapper.find('.price').first().text()).toBe('-')
- expect(wrapper.find('.price').last().text()).toBe(
- '4340 FLUID.ELECTRICITY.UNIT'
- )
- expect(wrapper.find('.graph').exists()).toBeTruthy()
- expect(wrapper.find('.not-connected').exists()).toBeFalsy()
- })
+ it('should be rendered correctly for singleFluid not connected', async () => {
+ const mockConnected = false
+ const { container } = render(
+ <ProfileComparatorRow
+ fluid={FluidType.ELECTRICITY}
+ userPriceConsumption={userPriceConsumption}
+ homePriceConsumption={homePriceConsumption}
+ performanceValue={performanceValue}
+ forecast={mockMonthlyForecastJanuaryTestProfile1}
+ connected={mockConnected}
+ noData={false}
+ />
+ )
+
+ expect(
+ container.getElementsByClassName('consumption-electricity').length
+ ).toBeTruthy()
+ expect(screen.getByTestId('userPrice')).toHaveTextContent(
+ 'analysis.no_data'
+ )
+ expect(screen.getByTestId('averagePrice')).toHaveTextContent(
+ '4340 FLUID.ELECTRICITY.UNIT'
+ )
+ expect(container.getElementsByClassName('graph').length).toBeFalsy()
+ expect(
+ container.getElementsByClassName('not-connected').length
+ ).toBeTruthy()
+ })
+
+ it('should be rendered correctly for singleFluid with none performance value', async () => {
+ const mockPerformanceValue: number | null = null
+ const { container } = render(
+ <ProfileComparatorRow
+ fluid={FluidType.ELECTRICITY}
+ userPriceConsumption={userPriceConsumption}
+ homePriceConsumption={homePriceConsumption}
+ performanceValue={mockPerformanceValue}
+ forecast={mockMonthlyForecastJanuaryTestProfile1}
+ connected={true}
+ noData={false}
+ />
+ )
+
+ expect(
+ container.getElementsByClassName('consumption-electricity').length
+ ).toBeTruthy()
+ expect(screen.getByTestId('userPrice')).toHaveTextContent('-')
+ expect(screen.getByTestId('averagePrice')).toHaveTextContent(
+ '4340 FLUID.ELECTRICITY.UNIT'
+ )
+ expect(container.getElementsByClassName('graph').length).toBeTruthy()
+ expect(
+ container.getElementsByClassName('not-connected').length
+ ).toBeFalsy()
+ })
- it('should be rendered correctly with unit', async () => {
- const mockforecast: MonthlyForecast = {
- ...mockMonthlyForecastJanuaryTestProfile1,
- fluidForecast: [
- {
- detailsMonthlyForecast:
- mockMonthlyForecastJanuaryTestProfile1.fluidForecast[0]
- .detailsMonthlyForecast,
- fluidType: 0,
- load: 50,
- value: 25,
- },
- ],
- }
- const wrapper = mount(
- <ProfileComparatorRow
- fluid={FluidType.ELECTRICITY}
- userPriceConsumption={userPriceConsumption}
- homePriceConsumption={homePriceConsumption}
- performanceValue={performanceValue}
- forecast={mockforecast}
- connected={connected}
- noData={noData}
- />
- )
- expect(wrapper.find('.consumption-electricity').exists()).toBeTruthy()
- expect(wrapper.find('.price').first().text()).toBe(
- '25 FLUID.ELECTRICITY.UNIT'
- )
- expect(wrapper.find('.price').last().text()).toBe(
- '50 FLUID.ELECTRICITY.UNIT'
- )
- expect(wrapper.find('.graph').exists()).toBeTruthy()
- expect(wrapper.find('.not-connected').exists()).toBeFalsy()
+ it('should be rendered correctly with unit', async () => {
+ const mockForecast: MonthlyForecast = {
+ ...mockMonthlyForecastJanuaryTestProfile1,
+ fluidForecast: [
+ {
+ detailsMonthlyForecast:
+ mockMonthlyForecastJanuaryTestProfile1.fluidForecast[0]
+ .detailsMonthlyForecast,
+ fluidType: 0,
+ load: 50,
+ value: 25,
+ },
+ ],
+ }
+ const { container } = render(
+ <ProfileComparatorRow
+ fluid={FluidType.ELECTRICITY}
+ userPriceConsumption={userPriceConsumption}
+ homePriceConsumption={homePriceConsumption}
+ performanceValue={performanceValue}
+ forecast={mockForecast}
+ connected={true}
+ noData={false}
+ />
+ )
+ expect(
+ container.getElementsByClassName('consumption-electricity').length
+ ).toBeTruthy()
+ expect(screen.getByTestId('userPrice')).toHaveTextContent(
+ '25 FLUID.ELECTRICITY.UNIT'
+ )
+ expect(screen.getByTestId('averagePrice')).toHaveTextContent(
+ '50 FLUID.ELECTRICITY.UNIT'
+ )
+ expect(container.getElementsByClassName('graph').length).toBeTruthy()
+ expect(
+ container.getElementsByClassName('not-connected').length
+ ).toBeFalsy()
+ })
})
})
diff --git a/src/components/Analysis/ProfileComparator/ProfileComparatorRow.tsx b/src/components/Analysis/ProfileComparator/ProfileComparatorRow.tsx
index adea63d2cefc1d774c9a6ab354ec8227e64d318e..0ba4dd6f8bd20e733be73cf931d4f7fc505be4e2 100644
--- a/src/components/Analysis/ProfileComparator/ProfileComparatorRow.tsx
+++ b/src/components/Analysis/ProfileComparator/ProfileComparatorRow.tsx
@@ -118,6 +118,7 @@ const ProfileComparatorRow = ({
className={classNames('price', 'text-15-bold', {
['not-connected']: !connected || noData,
})}
+ data-testid="userPrice"
>
{comparaisonText}
</div>
@@ -156,6 +157,7 @@ const ProfileComparatorRow = ({
className={classNames('price', 'text-15-bold', {
['not-connected']: !connected,
})}
+ data-testid="averagePrice"
>
{formatFluidConsumptionForForecast(fluid)}
</div>
diff --git a/src/components/Analysis/ProfileComparator/__snapshots__/ProfileComparator.spec.tsx.snap b/src/components/Analysis/ProfileComparator/__snapshots__/ProfileComparator.spec.tsx.snap
new file mode 100644
index 0000000000000000000000000000000000000000..bcb5b25883c896920cc746a8a40bb53224c071e4
--- /dev/null
+++ b/src/components/Analysis/ProfileComparator/__snapshots__/ProfileComparator.spec.tsx.snap
@@ -0,0 +1,241 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`AnalysisConsumption component should be rendered correctly with profile NOT completed and go to profile button 1`] = `
+<div>
+ <div
+ class="status-header"
+ >
+ <div>
+ <svg
+ aria-hidden="true"
+ class="styles__icon___23x3R"
+ height="44"
+ width="44"
+ >
+ <use
+ xlink:href="#test-file-stub"
+ />
+ </svg>
+ <p
+ class="text-16-normal"
+ >
+ analysis.compare.title
+ </p>
+ </div>
+ </div>
+ <div
+ class="analysis-graph"
+ >
+ <div
+ class="no-profile"
+ >
+ <div
+ class="text-16-normal"
+ >
+ analysis.approximative_description
+ </div>
+ <button
+ aria-label="analysis.accessibility.button_go_to_profil"
+ class="MuiButtonBase-root MuiButton-root btnPrimary MuiButton-text MuiButton-textSizeLarge MuiButton-sizeLarge"
+ data-testid="goToProfile"
+ tabindex="0"
+ type="button"
+ >
+ <span
+ class="MuiButton-label text-18-bold"
+ >
+ analysis.accessibility.button_go_to_profil
+ </span>
+ <span
+ class="MuiTouchRipple-root"
+ />
+ </button>
+ <svg
+ alt="pas de profil remplis"
+ class="styles__icon___23x3R"
+ height="60%"
+ width="100%"
+ >
+ <use
+ xlink:href="#test-file-stub"
+ />
+ </svg>
+ </div>
+ </div>
+</div>
+`;
+
+exports[`AnalysisConsumption component should be rendered correctly with profile completed and go to profile edition on click 1`] = `
+<div>
+ <div
+ class="status-header"
+ >
+ <div>
+ <svg
+ aria-hidden="true"
+ class="styles__icon___23x3R"
+ height="44"
+ width="44"
+ >
+ <use
+ xlink:href="#test-file-stub"
+ />
+ </svg>
+ <p
+ class="text-16-normal"
+ >
+ analysis.compare.title
+ </p>
+ </div>
+ <button
+ aria-label="analysis.accessibility.button_go_to_profil"
+ class="MuiButtonBase-root MuiButton-root MuiButton-text btnIcon"
+ data-testid="iconGoToProfile"
+ tabindex="0"
+ type="button"
+ >
+ <span
+ class="MuiButton-label"
+ >
+ <svg
+ aria-hidden="true"
+ class="styles__icon___23x3R"
+ height="40"
+ width="40"
+ >
+ <use
+ xlink:href="#test-file-stub"
+ />
+ </svg>
+ </span>
+ <span
+ class="MuiTouchRipple-root"
+ />
+ </button>
+ </div>
+ <div
+ class="analysis-graph"
+ >
+ <div
+ class="analysis-graph"
+ >
+ <div
+ class="consumption-title text-20-bold"
+ >
+ <div
+ class="user-title"
+ >
+ analysis.user_consumption
+ </div>
+ <div />
+ <div
+ class="average-title"
+ >
+ analysis.comparison
+ </div>
+ </div>
+ <mock-profilecomparatorrow
+ connected="true"
+ fluid="3"
+ homepriceconsumption="0"
+ nodata="false"
+ userpriceconsumption="156.161853"
+ />
+ <mock-profilecomparatorrow
+ connected="true"
+ fluid="0"
+ homepriceconsumption="0"
+ nodata="false"
+ performancevalue="178.54"
+ userpriceconsumption="156.161853"
+ />
+ <mock-profilecomparatorrow
+ connected="true"
+ fluid="1"
+ homepriceconsumption="0"
+ nodata="false"
+ performancevalue="7763.98"
+ userpriceconsumption="156.161853"
+ />
+ <mock-profilecomparatorrow
+ connected="true"
+ fluid="2"
+ homepriceconsumption="0"
+ nodata="false"
+ performancevalue="1317.67"
+ userpriceconsumption="156.161853"
+ />
+ <div
+ class="MuiPaper-root MuiAccordion-root expansion-panel-root MuiAccordion-rounded MuiPaper-elevation1 MuiPaper-rounded"
+ >
+ <div
+ aria-disabled="false"
+ aria-expanded="false"
+ aria-label="profile_type.accessibility.button_toggle_average_home"
+ class="MuiButtonBase-root MuiAccordionSummary-root expansion-panel-summary"
+ role="button"
+ tabindex="0"
+ >
+ <div
+ class="MuiAccordionSummary-content expansion-panel-content"
+ >
+ <div
+ class="accordion-title accordion-title"
+ >
+ analysis.average_home
+ </div>
+ </div>
+ <div
+ aria-disabled="false"
+ aria-hidden="true"
+ class="MuiButtonBase-root MuiIconButton-root MuiAccordionSummary-expandIcon MuiIconButton-edgeEnd"
+ >
+ <span
+ class="MuiIconButton-label"
+ >
+ <svg
+ class="accordion-icon styles__icon___23x3R"
+ height="16"
+ width="16"
+ >
+ <use
+ xlink:href="#test-file-stub"
+ />
+ </svg>
+ </span>
+ <span
+ class="MuiTouchRipple-root"
+ />
+ </div>
+ </div>
+ <div
+ class="MuiCollapse-root MuiCollapse-hidden"
+ style="min-height: 0px;"
+ >
+ <div
+ class="MuiCollapse-wrapper"
+ >
+ <div
+ class="MuiCollapse-wrapperInner"
+ >
+ <div
+ role="region"
+ >
+ <div
+ class="MuiAccordionDetails-root expansion-panel-details"
+ >
+ <span
+ class="accordion-desc text-16-normal"
+ >
+ analysis.average_home_description
+ </span>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+</div>
+`;
diff --git a/src/components/Analysis/ProfileComparator/profileComparator.scss b/src/components/Analysis/ProfileComparator/profileComparator.scss
index 65a183b8473c8bbe3e2f5f743bebdd8d8b813d9a..6ca14b923405df814f974b0c4906662aa26cf16a 100644
--- a/src/components/Analysis/ProfileComparator/profileComparator.scss
+++ b/src/components/Analysis/ProfileComparator/profileComparator.scss
@@ -62,6 +62,5 @@
}
button {
max-width: $width-small-phone;
- margin-top: 0;
}
}
diff --git a/src/components/Analysis/TotalAnalysisChart/PieChart.spec.tsx b/src/components/Analysis/TotalAnalysisChart/PieChart.spec.tsx
index c866cabdfc46bb9b18fb06bc7a13fe3ceb9305ca..39dcf7202b3615c56b1b76bd70b05684b4c43d62 100644
--- a/src/components/Analysis/TotalAnalysisChart/PieChart.spec.tsx
+++ b/src/components/Analysis/TotalAnalysisChart/PieChart.spec.tsx
@@ -1,6 +1,5 @@
+import { render } from '@testing-library/react'
import { DataloadState } from 'enums'
-import { mount } from 'enzyme'
-import toJson from 'enzyme-to-json'
import { DataloadValueDetail } from 'models'
import React from 'react'
import PieChart from './PieChart'
@@ -12,7 +11,7 @@ describe('PieChart component', () => {
{ value: 30, state: DataloadState.VALID },
]
it('should be rendered correctly', () => {
- const wrapper = mount(
+ const { container } = render(
<PieChart
radius={300}
outerRadius={300}
@@ -22,6 +21,6 @@ describe('PieChart component', () => {
child with value and text to render
</PieChart>
)
- expect(toJson(wrapper)).toMatchSnapshot()
+ expect(container).toMatchSnapshot()
})
})
diff --git a/src/components/Analysis/TotalAnalysisChart/TotalAnalysisChart.spec.tsx b/src/components/Analysis/TotalAnalysisChart/TotalAnalysisChart.spec.tsx
index 4bcfcc3a643b781db65fc4cb74f4a0d43d3d1f1e..9770921aa26098e5f3a68a5c116231044e40645b 100644
--- a/src/components/Analysis/TotalAnalysisChart/TotalAnalysisChart.spec.tsx
+++ b/src/components/Analysis/TotalAnalysisChart/TotalAnalysisChart.spec.tsx
@@ -1,13 +1,11 @@
+import { render, waitFor } from '@testing-library/react'
import { DataloadState, FluidType } from 'enums'
-import { mount } from 'enzyme'
-import toJson from 'enzyme-to-json'
import { DateTime } from 'luxon'
import { Datachart } from 'models'
import React from 'react'
import { Provider } from 'react-redux'
import { graphMonthData } from 'tests/__mocks__/chartData.mock'
import { createMockEcolyoStore } from 'tests/__mocks__/store'
-import { waitForComponentToPaint } from 'tests/__mocks__/testUtils'
import TotalAnalysisChart from './TotalAnalysisChart'
const mockGetGraphData = jest.fn()
@@ -28,17 +26,17 @@ jest.mock(
describe('TotalAnalysisChart component', () => {
const store = createMockEcolyoStore()
it('should be rendered correctly', async () => {
- const wrapper = mount(
+ const { container } = render(
<Provider store={store}>
<TotalAnalysisChart fluidsWithData={[FluidType.ELECTRICITY]} />
</Provider>
)
- await waitForComponentToPaint(wrapper)
- expect(toJson(wrapper)).toMatchSnapshot()
+ await waitFor(() => null, { container })
+ expect(container).toMatchSnapshot()
})
it('should render several fluids and display month data', async () => {
mockGetGraphData.mockResolvedValue(graphMonthData)
- const wrapper = mount(
+ const { container } = render(
<Provider store={store}>
<TotalAnalysisChart
fluidsWithData={[
@@ -49,8 +47,8 @@ describe('TotalAnalysisChart component', () => {
/>
</Provider>
)
- await waitForComponentToPaint(wrapper)
- expect(wrapper.find('.fluidconso').exists()).toBeTruthy()
+ await waitFor(() => null, { container })
+ expect(container.getElementsByClassName('fluidconso').length).toBeTruthy()
})
it('should render empty price', async () => {
const emptyData: Datachart = {
@@ -67,15 +65,17 @@ describe('TotalAnalysisChart component', () => {
comparisonData: null,
}
mockGetGraphData.mockResolvedValue(emptyData)
- const wrapper = mount(
+ const { container } = render(
<Provider store={store}>
<TotalAnalysisChart
fluidsWithData={[FluidType.ELECTRICITY, FluidType.WATER]}
/>
</Provider>
)
- await waitForComponentToPaint(wrapper)
- expect(wrapper.find('.fluidconso').text()).toBe('--- €')
+ await waitFor(() => null, { container })
+ expect(
+ container.getElementsByClassName('fluidconso').item(0)
+ ).toHaveTextContent('--- €')
})
it('should render empty price for one fluid', async () => {
const emptyData: Datachart = {
@@ -92,12 +92,12 @@ describe('TotalAnalysisChart component', () => {
comparisonData: null,
}
mockGetGraphData.mockResolvedValue(emptyData)
- const wrapper = mount(
+ const { container } = render(
<Provider store={store}>
<TotalAnalysisChart fluidsWithData={[FluidType.ELECTRICITY]} />
</Provider>
)
- await waitForComponentToPaint(wrapper)
- expect(wrapper.find('.fluidconso').exists()).toBe(false)
+ await waitFor(() => null, { container })
+ expect(container.getElementsByClassName('fluidconso').length).toBe(0)
})
})
diff --git a/src/components/Analysis/TotalAnalysisChart/TotalAnalysisChart.tsx b/src/components/Analysis/TotalAnalysisChart/TotalAnalysisChart.tsx
index f2b7e412e65a908505e1c4a28341377f72bde2d7..fd512fb31d2d47fd0ec432c8c6a64700f2b7b3d8 100644
--- a/src/components/Analysis/TotalAnalysisChart/TotalAnalysisChart.tsx
+++ b/src/components/Analysis/TotalAnalysisChart/TotalAnalysisChart.tsx
@@ -1,3 +1,4 @@
+import { Button } from '@material-ui/core'
import EstimatedConsumptionModal from 'components/ConsumptionVisualizer/EstimatedConsumptionModal'
import Loader from 'components/Loader/Loader'
import { useClient } from 'cozy-client'
@@ -105,8 +106,8 @@ const TotalAnalysisChart = ({
{t('analysis_pie.month') +
getMonthNameWithPrep(analysisMonth.minus({ month: 1 }))}
</div>
- <div
- className="text-14-normal estimation-text"
+ <Button
+ className="btnText"
onClick={() => setOpenEstimationModal(true)}
>
<span
@@ -115,7 +116,7 @@ const TotalAnalysisChart = ({
__html: t('analysis_pie.estimation'),
}}
/>
- </div>
+ </Button>
</PieChart>
<EstimatedConsumptionModal
open={openEstimationModal}
diff --git a/src/components/Analysis/TotalAnalysisChart/__snapshots__/PieChart.spec.tsx.snap b/src/components/Analysis/TotalAnalysisChart/__snapshots__/PieChart.spec.tsx.snap
index 03b1ba56bc4c61e0cb75e8ac3c6e4ce7d50fc623..a64f3b602ba4bb7cafaa83dbb124dbb29b1f0064 100644
--- a/src/components/Analysis/TotalAnalysisChart/__snapshots__/PieChart.spec.tsx.snap
+++ b/src/components/Analysis/TotalAnalysisChart/__snapshots__/PieChart.spec.tsx.snap
@@ -1,39 +1,14 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`PieChart component should be rendered correctly 1`] = `
-<PieChart
- dataloadValueDetailArray={
- Array [
- Object {
- "state": "VALID",
- "value": 10,
- },
- Object {
- "state": "VALID",
- "value": 20,
- },
- Object {
- "state": "VALID",
- "value": 30,
- },
- ]
- }
- innerRadius={300}
- outerRadius={300}
- radius={300}
->
+<div>
<div
- className="pie-container"
- style={
- Object {
- "height": 300,
- "width": 300,
- }
- }
+ class="pie-container"
+ style="width: 300px; height: 300px;"
>
<svg
- height={300}
- width={300}
+ height="300"
+ width="300"
>
<defs>
<filter
@@ -43,48 +18,65 @@ exports[`PieChart component should be rendered correctly 1`] = `
x="-75%"
y="-75%"
>
- <feGaussianBlur
+ <fegaussianblur
result="coloredBlur"
stdDeviation="10"
/>
- <feMerge>
- <feMergeNode
+ <femerge>
+ <femergenode
in="coloredBlur"
/>
- <feMergeNode
+ <femergenode
in="SourceGraphic"
/>
- </feMerge>
+ </femerge>
</filter>
</defs>
<g
transform="translate(300 300)"
- />
+ >
+ <g
+ class="arc"
+ filter="url(#glow)"
+ >
+ <path
+ class="arc"
+ d="M1.8369701987210297e-14,-300A300,300,0,0,1,259.8076211353316,-150A300,300,0,0,0,1.8369701987210297e-14,-300Z"
+ fill="#D87B39"
+ />
+ </g>
+ <g
+ class="arc"
+ filter="url(#glow)"
+ >
+ <path
+ class="arc"
+ d="M259.8076211353316,-150A300,300,0,0,1,1.8369701987210297e-14,300A300,300,0,0,0,259.8076211353316,-150Z"
+ fill="#3A98EC"
+ />
+ </g>
+ <g
+ class="arc"
+ filter="url(#glow)"
+ >
+ <path
+ class="arc"
+ d="M1.8369701987210297e-14,300A300,300,0,1,1,-5.510910596163089e-14,-300A300,300,0,1,0,1.8369701987210297e-14,300Z"
+ fill="#45D1B8"
+ />
+ </g>
+ </g>
</svg>
<div
- className="pie-center"
- style={
- Object {
- "height": 300,
- "left": 0,
- "top": 0,
- "width": 300,
- }
- }
+ class="pie-center"
+ style="width: 300px; height: 300px; top: 0px; left: 0px;"
>
child with value and text to render
<div
- className="circle"
- style={
- Object {
- "height": 300,
- "left": 0,
- "top": 0,
- "width": 300,
- }
- }
+ class="circle"
+ style="width: 300px; height: 300px; top: 0px; left: 0px;"
/>
</div>
</div>
-</PieChart>
+</div>
`;
diff --git a/src/components/Analysis/TotalAnalysisChart/__snapshots__/TotalAnalysisChart.spec.tsx.snap b/src/components/Analysis/TotalAnalysisChart/__snapshots__/TotalAnalysisChart.spec.tsx.snap
index 9daddac9757bf7b5981c9b335677645cebeb6137..fa1ae890431cdfee5d4df73a942af9cdae1db911 100644
--- a/src/components/Analysis/TotalAnalysisChart/__snapshots__/TotalAnalysisChart.spec.tsx.snap
+++ b/src/components/Analysis/TotalAnalysisChart/__snapshots__/TotalAnalysisChart.spec.tsx.snap
@@ -1,61 +1,38 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`TotalAnalysisChart component should be rendered correctly 1`] = `
-<Provider
- store={
- Object {
- "clearActions": [Function],
- "dispatch": [Function],
- "getActions": [Function],
- "getState": [Function],
- "replaceReducer": [Function],
- "subscribe": [Function],
- }
- }
->
- <TotalAnalysisChart
- fluidsWithData={
- Array [
- 0,
- ]
- }
+<div>
+ <div
+ class="totalAnalysis-container"
+ style="min-height: 475px;"
>
<div
- className="totalAnalysis-container"
- style={
- Object {
- "minHeight": 475,
- }
- }
+ class="text-24-normal title"
+ >
+ analysis_pie.total
+ </div>
+ <mock-piechart
+ dataloadvaluedetailarray=""
+ innerradius="157.5"
+ outerradius="187.5"
+ radius="375"
>
<div
- className="text-24-normal title"
+ class="text-36-bold"
>
- analysis_pie.total
+ 0,00
+ <span
+ class="euro-unit"
+ >
+ FLUID.MULTIFLUID.UNIT
+ </span>
</div>
- <mock-piechart
- dataloadValueDetailArray={Array []}
- innerRadius={157.5}
- outerRadius={187.5}
- radius={375}
+ <div
+ class="text-20-bold no_data"
>
- <div
- className="text-36-bold"
- >
- 0,00
- <span
- className="euro-unit"
- >
- FLUID.MULTIFLUID.UNIT
- </span>
- </div>
- <div
- className="text-20-bold no_data"
- >
- analysis.no_data
- </div>
- </mock-piechart>
- </div>
- </TotalAnalysisChart>
-</Provider>
+ analysis.no_data
+ </div>
+ </mock-piechart>
+ </div>
+</div>
`;
diff --git a/src/components/Analysis/TotalAnalysisChart/totalAnalysisChart.scss b/src/components/Analysis/TotalAnalysisChart/totalAnalysisChart.scss
index efe2023b8a502e6598304d6322a9a460b913d65b..7af8f1620cbcd0a5de0d99530f5504b009be1581 100644
--- a/src/components/Analysis/TotalAnalysisChart/totalAnalysisChart.scss
+++ b/src/components/Analysis/TotalAnalysisChart/totalAnalysisChart.scss
@@ -44,11 +44,11 @@
text-transform: uppercase;
color: $soft-grey;
display: inline-block;
- margin: 0.5rem 0;
+ margin: 4px 0;
}
- .estimated {
- display: block;
- text-decoration: underline;
+ button .estimated {
+ line-height: 20px;
+ font-weight: 700;
}
.circle {
box-sizing: border-box;
@@ -96,7 +96,4 @@
font-size: 1rem;
}
}
- .estimation-text {
- cursor: pointer;
- }
}
diff --git a/src/components/Analysis/__snapshots__/MonthlyAnalysis.spec.tsx.snap b/src/components/Analysis/__snapshots__/MonthlyAnalysis.spec.tsx.snap
index e6d74e926365b96a4f8ac6ff342c75b182eb9806..34d20704df4e3baf4914755c134fd50401fdb940 100644
--- a/src/components/Analysis/__snapshots__/MonthlyAnalysis.spec.tsx.snap
+++ b/src/components/Analysis/__snapshots__/MonthlyAnalysis.spec.tsx.snap
@@ -1,632 +1,96 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`MonthlyAnalysis component should be rendered correctly 1`] = `
-<BrowserRouter>
- <Router
- location={
- Object {
- "hash": "",
- "key": "default",
- "pathname": "/",
- "search": "",
- "state": null,
- }
- }
- navigationType="POP"
- navigator={
- Object {
- "action": "POP",
- "createHref": [Function],
- "encodeLocation": [Function],
- "go": [Function],
- "listen": [Function],
- "location": Object {
- "hash": "",
- "key": "default",
- "pathname": "/",
- "search": "",
- "state": null,
- },
- "push": [Function],
- "replace": [Function],
- }
- }
+<div>
+ <div
+ class="analysis-root"
+ style="opacity: 1; webkit-transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"
>
- <Provider
- store={
- Object {
- "clearActions": [Function],
- "dispatch": [Function],
- "getActions": [Function],
- "getState": [Function],
- "replaceReducer": [Function],
- "subscribe": [Function],
- }
- }
+ <div
+ class="analysis-content"
>
- <MonthlyAnalysis
- saveLastScrollPosition={[MockFunction]}
- scrollPosition={0}
+ <div
+ class="analysis-warning"
>
- <NoAnalysisModal
- onClose={[Function]}
- open={false}
+ <div
+ class="warning-header"
>
- <WithStyles(ForwardRef(Dialog))
- aria-labelledby="accessibility-title"
- classes={
- Object {
- "paper": "modal-paper",
- "root": "modal-root",
- }
- }
- onClose={[Function]}
- open={false}
+ <svg
+ aria-hidden="true"
+ class="styles__icon___23x3R"
+ height="30"
+ width="30"
>
- <ForwardRef(Dialog)
- aria-labelledby="accessibility-title"
- classes={
- Object {
- "container": "MuiDialog-container",
- "paper": "MuiDialog-paper modal-paper",
- "paperFullScreen": "MuiDialog-paperFullScreen",
- "paperFullWidth": "MuiDialog-paperFullWidth",
- "paperScrollBody": "MuiDialog-paperScrollBody",
- "paperScrollPaper": "MuiDialog-paperScrollPaper",
- "paperWidthFalse": "MuiDialog-paperWidthFalse",
- "paperWidthLg": "MuiDialog-paperWidthLg",
- "paperWidthMd": "MuiDialog-paperWidthMd",
- "paperWidthSm": "MuiDialog-paperWidthSm",
- "paperWidthXl": "MuiDialog-paperWidthXl",
- "paperWidthXs": "MuiDialog-paperWidthXs",
- "root": "MuiDialog-root modal-root",
- "scrollBody": "MuiDialog-scrollBody",
- "scrollPaper": "MuiDialog-scrollPaper",
- }
- }
- onClose={[Function]}
- open={false}
- >
- <ForwardRef(Modal)
- BackdropComponent={
- Object {
- "$$typeof": Symbol(react.forward_ref),
- "Naked": Object {
- "$$typeof": Symbol(react.forward_ref),
- "propTypes": Object {
- "children": [Function],
- "className": [Function],
- "classes": [Function],
- "invisible": [Function],
- "open": [Function],
- "transitionDuration": [Function],
- },
- "render": [Function],
- },
- "displayName": "WithStyles(ForwardRef(Backdrop))",
- "options": Object {
- "defaultTheme": Object {
- "breakpoints": Object {
- "between": [Function],
- "down": [Function],
- "keys": Array [
- "xs",
- "sm",
- "md",
- "lg",
- "xl",
- ],
- "only": [Function],
- "up": [Function],
- "values": Object {
- "lg": 1280,
- "md": 960,
- "sm": 600,
- "xl": 1920,
- "xs": 0,
- },
- "width": [Function],
- },
- "direction": "ltr",
- "mixins": Object {
- "gutters": [Function],
- "toolbar": Object {
- "@media (min-width:0px) and (orientation: landscape)": Object {
- "minHeight": 48,
- },
- "@media (min-width:600px)": Object {
- "minHeight": 64,
- },
- "minHeight": 56,
- },
- },
- "overrides": Object {},
- "palette": Object {
- "action": Object {
- "activatedOpacity": 0.12,
- "active": "rgba(0, 0, 0, 0.54)",
- "disabled": "rgba(0, 0, 0, 0.26)",
- "disabledBackground": "rgba(0, 0, 0, 0.12)",
- "disabledOpacity": 0.38,
- "focus": "rgba(0, 0, 0, 0.12)",
- "focusOpacity": 0.12,
- "hover": "rgba(0, 0, 0, 0.04)",
- "hoverOpacity": 0.04,
- "selected": "rgba(0, 0, 0, 0.08)",
- "selectedOpacity": 0.08,
- },
- "augmentColor": [Function],
- "background": Object {
- "default": "#fafafa",
- "paper": "#fff",
- },
- "common": Object {
- "black": "#000",
- "white": "#fff",
- },
- "contrastThreshold": 3,
- "divider": "rgba(0, 0, 0, 0.12)",
- "error": Object {
- "contrastText": "#fff",
- "dark": "#d32f2f",
- "light": "#e57373",
- "main": "#f44336",
- },
- "getContrastText": [Function],
- "grey": Object {
- "100": "#f5f5f5",
- "200": "#eeeeee",
- "300": "#e0e0e0",
- "400": "#bdbdbd",
- "50": "#fafafa",
- "500": "#9e9e9e",
- "600": "#757575",
- "700": "#616161",
- "800": "#424242",
- "900": "#212121",
- "A100": "#d5d5d5",
- "A200": "#aaaaaa",
- "A400": "#303030",
- "A700": "#616161",
- },
- "info": Object {
- "contrastText": "#fff",
- "dark": "#1976d2",
- "light": "#64b5f6",
- "main": "#2196f3",
- },
- "primary": Object {
- "contrastText": "#fff",
- "dark": "#303f9f",
- "light": "#7986cb",
- "main": "#3f51b5",
- },
- "secondary": Object {
- "contrastText": "#fff",
- "dark": "#c51162",
- "light": "#ff4081",
- "main": "#f50057",
- },
- "success": Object {
- "contrastText": "rgba(0, 0, 0, 0.87)",
- "dark": "#388e3c",
- "light": "#81c784",
- "main": "#4caf50",
- },
- "text": Object {
- "disabled": "rgba(0, 0, 0, 0.38)",
- "hint": "rgba(0, 0, 0, 0.38)",
- "primary": "rgba(0, 0, 0, 0.87)",
- "secondary": "rgba(0, 0, 0, 0.54)",
- },
- "tonalOffset": 0.2,
- "type": "light",
- "warning": Object {
- "contrastText": "rgba(0, 0, 0, 0.87)",
- "dark": "#f57c00",
- "light": "#ffb74d",
- "main": "#ff9800",
- },
- },
- "props": Object {},
- "shadows": Array [
- "none",
- "0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12)",
- "0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12)",
- "0px 3px 3px -2px rgba(0,0,0,0.2),0px 3px 4px 0px rgba(0,0,0,0.14),0px 1px 8px 0px rgba(0,0,0,0.12)",
- "0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12)",
- "0px 3px 5px -1px rgba(0,0,0,0.2),0px 5px 8px 0px rgba(0,0,0,0.14),0px 1px 14px 0px rgba(0,0,0,0.12)",
- "0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12)",
- "0px 4px 5px -2px rgba(0,0,0,0.2),0px 7px 10px 1px rgba(0,0,0,0.14),0px 2px 16px 1px rgba(0,0,0,0.12)",
- "0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12)",
- "0px 5px 6px -3px rgba(0,0,0,0.2),0px 9px 12px 1px rgba(0,0,0,0.14),0px 3px 16px 2px rgba(0,0,0,0.12)",
- "0px 6px 6px -3px rgba(0,0,0,0.2),0px 10px 14px 1px rgba(0,0,0,0.14),0px 4px 18px 3px rgba(0,0,0,0.12)",
- "0px 6px 7px -4px rgba(0,0,0,0.2),0px 11px 15px 1px rgba(0,0,0,0.14),0px 4px 20px 3px rgba(0,0,0,0.12)",
- "0px 7px 8px -4px rgba(0,0,0,0.2),0px 12px 17px 2px rgba(0,0,0,0.14),0px 5px 22px 4px rgba(0,0,0,0.12)",
- "0px 7px 8px -4px rgba(0,0,0,0.2),0px 13px 19px 2px rgba(0,0,0,0.14),0px 5px 24px 4px rgba(0,0,0,0.12)",
- "0px 7px 9px -4px rgba(0,0,0,0.2),0px 14px 21px 2px rgba(0,0,0,0.14),0px 5px 26px 4px rgba(0,0,0,0.12)",
- "0px 8px 9px -5px rgba(0,0,0,0.2),0px 15px 22px 2px rgba(0,0,0,0.14),0px 6px 28px 5px rgba(0,0,0,0.12)",
- "0px 8px 10px -5px rgba(0,0,0,0.2),0px 16px 24px 2px rgba(0,0,0,0.14),0px 6px 30px 5px rgba(0,0,0,0.12)",
- "0px 8px 11px -5px rgba(0,0,0,0.2),0px 17px 26px 2px rgba(0,0,0,0.14),0px 6px 32px 5px rgba(0,0,0,0.12)",
- "0px 9px 11px -5px rgba(0,0,0,0.2),0px 18px 28px 2px rgba(0,0,0,0.14),0px 7px 34px 6px rgba(0,0,0,0.12)",
- "0px 9px 12px -6px rgba(0,0,0,0.2),0px 19px 29px 2px rgba(0,0,0,0.14),0px 7px 36px 6px rgba(0,0,0,0.12)",
- "0px 10px 13px -6px rgba(0,0,0,0.2),0px 20px 31px 3px rgba(0,0,0,0.14),0px 8px 38px 7px rgba(0,0,0,0.12)",
- "0px 10px 13px -6px rgba(0,0,0,0.2),0px 21px 33px 3px rgba(0,0,0,0.14),0px 8px 40px 7px rgba(0,0,0,0.12)",
- "0px 10px 14px -6px rgba(0,0,0,0.2),0px 22px 35px 3px rgba(0,0,0,0.14),0px 8px 42px 7px rgba(0,0,0,0.12)",
- "0px 11px 14px -7px rgba(0,0,0,0.2),0px 23px 36px 3px rgba(0,0,0,0.14),0px 9px 44px 8px rgba(0,0,0,0.12)",
- "0px 11px 15px -7px rgba(0,0,0,0.2),0px 24px 38px 3px rgba(0,0,0,0.14),0px 9px 46px 8px rgba(0,0,0,0.12)",
- ],
- "shape": Object {
- "borderRadius": 4,
- },
- "spacing": [Function],
- "transitions": Object {
- "create": [Function],
- "duration": Object {
- "complex": 375,
- "enteringScreen": 225,
- "leavingScreen": 195,
- "short": 250,
- "shorter": 200,
- "shortest": 150,
- "standard": 300,
- },
- "easing": Object {
- "easeIn": "cubic-bezier(0.4, 0, 1, 1)",
- "easeInOut": "cubic-bezier(0.4, 0, 0.2, 1)",
- "easeOut": "cubic-bezier(0.0, 0, 0.2, 1)",
- "sharp": "cubic-bezier(0.4, 0, 0.6, 1)",
- },
- "getAutoHeightDuration": [Function],
- },
- "typography": Object {
- "body1": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "1rem",
- "fontWeight": 400,
- "letterSpacing": "0.00938em",
- "lineHeight": 1.5,
- },
- "body2": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "0.875rem",
- "fontWeight": 400,
- "letterSpacing": "0.01071em",
- "lineHeight": 1.43,
- },
- "button": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "0.875rem",
- "fontWeight": 500,
- "letterSpacing": "0.02857em",
- "lineHeight": 1.75,
- "textTransform": "uppercase",
- },
- "caption": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "0.75rem",
- "fontWeight": 400,
- "letterSpacing": "0.03333em",
- "lineHeight": 1.66,
- },
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": 14,
- "fontWeightBold": 700,
- "fontWeightLight": 300,
- "fontWeightMedium": 500,
- "fontWeightRegular": 400,
- "h1": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "6rem",
- "fontWeight": 300,
- "letterSpacing": "-0.01562em",
- "lineHeight": 1.167,
- },
- "h2": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "3.75rem",
- "fontWeight": 300,
- "letterSpacing": "-0.00833em",
- "lineHeight": 1.2,
- },
- "h3": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "3rem",
- "fontWeight": 400,
- "letterSpacing": "0em",
- "lineHeight": 1.167,
- },
- "h4": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "2.125rem",
- "fontWeight": 400,
- "letterSpacing": "0.00735em",
- "lineHeight": 1.235,
- },
- "h5": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "1.5rem",
- "fontWeight": 400,
- "letterSpacing": "0em",
- "lineHeight": 1.334,
- },
- "h6": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "1.25rem",
- "fontWeight": 500,
- "letterSpacing": "0.0075em",
- "lineHeight": 1.6,
- },
- "htmlFontSize": 16,
- "overline": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "0.75rem",
- "fontWeight": 400,
- "letterSpacing": "0.08333em",
- "lineHeight": 2.66,
- "textTransform": "uppercase",
- },
- "pxToRem": [Function],
- "round": [Function],
- "subtitle1": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "1rem",
- "fontWeight": 400,
- "letterSpacing": "0.00938em",
- "lineHeight": 1.75,
- },
- "subtitle2": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "0.875rem",
- "fontWeight": 500,
- "letterSpacing": "0.00714em",
- "lineHeight": 1.57,
- },
- },
- "zIndex": Object {
- "appBar": 1100,
- "drawer": 1200,
- "mobileStepper": 1000,
- "modal": 1300,
- "snackbar": 1400,
- "speedDial": 1050,
- "tooltip": 1500,
- },
- },
- "name": "MuiBackdrop",
- },
- "propTypes": Object {
- "classes": [Function],
- "innerRef": [Function],
- },
- "render": [Function],
- "useStyles": [Function],
- }
- }
- BackdropProps={
- Object {
- "transitionDuration": Object {
- "enter": 225,
- "exit": 195,
- },
- }
- }
- className="MuiDialog-root modal-root"
- closeAfterTransition={true}
- disableEscapeKeyDown={false}
- onClose={[Function]}
- open={false}
- />
- </ForwardRef(Dialog)>
- </WithStyles(ForwardRef(Dialog))>
- </NoAnalysisModal>
- <ForwardRef(Fade)
- in={true}
+ <use
+ xlink:href="#test-file-stub"
+ />
+ </svg>
+ <h1>
+ analysis.warning_title
+ </h1>
+ </div>
+ <div
+ class="warning-content"
>
- <Transition
- appear={true}
- enter={true}
- exit={true}
- in={true}
- mountOnEnter={false}
- onEnter={[Function]}
- onEntered={[Function]}
- onEntering={[Function]}
- onExit={[Function]}
- onExited={[Function]}
- onExiting={[Function]}
- timeout={
- Object {
- "enter": 225,
- "exit": 195,
- }
- }
- unmountOnExit={false}
- >
- <div
- className="analysis-root"
- style={
- Object {
- "opacity": 1,
- "visibility": undefined,
- }
- }
- >
- <div
- className="analysis-content"
- >
- <IncompleteDataWarning
- incompleteDataFluids={
- Array [
- 0,
- ]
- }
- >
- <div
- className="analysis-warning"
- >
- <div
- className="warning-header"
- >
- <StyledIcon
- icon="test-file-stub"
- size={30}
- >
- <Icon
- aria-hidden={true}
- icon="test-file-stub"
- size={30}
- spin={false}
- >
- <Component
- aria-hidden={true}
- className="styles__icon___23x3R"
- height={30}
- style={Object {}}
- width={30}
- >
- <svg
- aria-hidden={true}
- className="styles__icon___23x3R"
- height={30}
- style={Object {}}
- width={30}
- >
- <use
- xlinkHref="#test-file-stub"
- />
- </svg>
- </Component>
- </Icon>
- </StyledIcon>
- <h1>
- analysis.warning_title
- </h1>
- </div>
- <div
- className="warning-content"
- >
- <p>
- analysis.warning_text
- </p>
- </div>
- </div>
- </IncompleteDataWarning>
- </div>
- <div
- className="analysis-content"
- >
- <mock-comparison
- fluidsWithData={
- Array [
- 0,
- 1,
- 2,
- ]
- }
- monthPerformanceIndicators={
- Array [
- Object {
- "compareValue": 10,
- "percentageVariation": 50,
- "value": 5,
- },
- Object {
- "compareValue": 10,
- "percentageVariation": 50,
- "value": 5,
- },
- ]
- }
- />
- </div>
- <div
- className="analysis-content"
- >
- <div
- className="card rich-card"
- >
- <mock-total-analysis
- fluidsWithData={
- Array [
- 0,
- 1,
- 2,
- ]
- }
- />
- </div>
- </div>
- <div
- className="analysis-content"
- >
- <div
- className="card rich-card"
- >
- <mock-max-consumption
- fluidsWithData={
- Array [
- 0,
- 1,
- 2,
- ]
- }
- />
- </div>
- </div>
- <div
- className="analysis-content"
- >
- <div
- className="card rich-card"
- >
- <mock-analysis
- aggregatedPerformanceIndicator={
- Object {
- "compareValue": 1.7718999999999998,
- "percentageVariation": -0.5,
- "value": 0.8859499999999999,
- }
- }
- performanceIndicators={
- Array [
- Object {
- "compareValue": 10,
- "percentageVariation": 50,
- "value": 5,
- },
- Object {
- "compareValue": 10,
- "percentageVariation": 50,
- "value": 5,
- },
- ]
- }
- />
- </div>
- </div>
- <div
- className="analysis-content"
- >
- <div
- className="card"
- >
- <mock-half-hour-analysis
- perfIndicator={
- Object {
- "compareValue": 10,
- "percentageVariation": 50,
- "value": 5,
- }
- }
- />
- </div>
- </div>
- </div>
- </Transition>
- </ForwardRef(Fade)>
- </MonthlyAnalysis>
- </Provider>
- </Router>
-</BrowserRouter>
+ <p>
+ analysis.warning_text
+ </p>
+ </div>
+ </div>
+ </div>
+ <div
+ class="analysis-content"
+ >
+ <mock-comparison
+ fluidswithdata="0,1,2"
+ monthperformanceindicators="[object Object],[object Object]"
+ />
+ </div>
+ <div
+ class="analysis-content"
+ >
+ <div
+ class="card rich-card"
+ >
+ <mock-total-analysis
+ fluidswithdata="0,1,2"
+ />
+ </div>
+ </div>
+ <div
+ class="analysis-content"
+ >
+ <div
+ class="card rich-card"
+ >
+ <mock-max-consumption
+ fluidswithdata="0,1,2"
+ />
+ </div>
+ </div>
+ <div
+ class="analysis-content"
+ >
+ <div
+ class="card rich-card"
+ >
+ <mock-analysis
+ aggregatedperformanceindicator="[object Object]"
+ performanceindicators="[object Object],[object Object]"
+ />
+ </div>
+ </div>
+ <div
+ class="analysis-content"
+ >
+ <div
+ class="card"
+ >
+ <mock-half-hour-analysis
+ perfindicator="[object Object]"
+ />
+ </div>
+ </div>
+ </div>
+</div>
`;
diff --git a/src/components/Analysis/monthlyanalysis.scss b/src/components/Analysis/monthlyanalysis.scss
index 10241fe3a73757a53172831b2ae2bb92f351b897..15f293d72097d6eeab8e3212c9e6f473ae7679d0 100644
--- a/src/components/Analysis/monthlyanalysis.scss
+++ b/src/components/Analysis/monthlyanalysis.scss
@@ -35,7 +35,8 @@
display: flex;
justify-self: end;
}
- button.btn-secondary-negative {
+ button.btnIcon {
+ border: 1px solid $grey-bright;
min-width: 40px;
width: 40px;
height: 40px;
diff --git a/src/components/App.tsx b/src/components/App.tsx
index 5cfeb0f21cd9c288dd8b4c81fadedac567abdc3d..7c4621ff74e7b5f7124b5b84ab84d7c001e6f744 100644
--- a/src/components/App.tsx
+++ b/src/components/App.tsx
@@ -1,13 +1,16 @@
+import { ThemeProvider } from '@material-ui/core'
import Navbar from 'components/Navbar/Navbar'
import AppRoutes from 'components/Routes/Routes'
import SplashRoot from 'components/Splash/SplashRoot'
import WelcomeModal from 'components/WelcomeModal/WelcomeModal'
+import CozyDevtools from 'cozy-client/dist/devtools'
import { useWebviewIntent } from 'cozy-intent'
import { Layout } from 'cozy-ui/transpiled/react/Layout'
import React, { useEffect } from 'react'
import { useLocation } from 'react-router-dom'
import { useAppSelector } from 'store/hooks'
import MatomoTracker from 'utils/matomoTracker'
+import { theme } from './theme'
interface AppProps {
tracker: undefined | MatomoTracker
@@ -36,17 +39,20 @@ export const App = ({ tracker }: AppProps) => {
return (
<Layout>
- <SplashRoot>
- {termsStatus.accepted && (
- <>
- <WelcomeModal open={!onboarding.isWelcomeSeen} />
- <Navbar />
- </>
- )}
- <main className="app-content">
- <AppRoutes termsStatus={termsStatus} />
- </main>
- </SplashRoot>
+ <ThemeProvider theme={theme}>
+ <SplashRoot>
+ {termsStatus.accepted && (
+ <>
+ <WelcomeModal open={!onboarding.isWelcomeSeen} />
+ <Navbar />
+ </>
+ )}
+ <main className="app-content">
+ <AppRoutes termsStatus={termsStatus} />
+ </main>
+ </SplashRoot>
+ {process.env.NODE_ENV !== 'production' ? <CozyDevtools /> : null}
+ </ThemeProvider>
</Layout>
)
}
diff --git a/src/components/Challenge/ChallengeCard/ChallengeCard.spec.tsx b/src/components/Challenge/ChallengeCard/ChallengeCard.spec.tsx
index 9c4a0a2f27cd73a15d69acde9b1ad4786a9582ee..ea845feaaeaefc81f429d2fff33ffb7bd367905b 100644
--- a/src/components/Challenge/ChallengeCard/ChallengeCard.spec.tsx
+++ b/src/components/Challenge/ChallengeCard/ChallengeCard.spec.tsx
@@ -1,64 +1,71 @@
-import { shallow } from 'enzyme'
+import { render } from '@testing-library/react'
import React from 'react'
+import { Provider } from 'react-redux'
+import { createMockEcolyoStore } from 'tests/__mocks__/store'
import { userChallengeData } from 'tests/__mocks__/userChallengeData.mock'
-import ChallengeCardLocked from '../ChallengeCardLocked/ChallengeCardLocked'
-import ChallengeCardOnGoing from '../ChallengeCardOnGoing/ChallengeCardOnGoing'
-import ChallengeCardUnlocked from '../ChallengeCardUnlocked/ChallengeCardUnlocked'
import ChallengeCard from './ChallengeCard'
-const mockMoveToSlide = jest.fn()
+const store = createMockEcolyoStore()
describe('ChallengeCard component', () => {
it('should be rendered correctly', () => {
- const component = shallow(
- <ChallengeCard
- userChallenge={userChallengeData[1]}
- indexSlider={0}
- index={0}
- cardWidth={200}
- cardHeight={400}
- moveToSlide={mockMoveToSlide}
- />
- ).getElement()
- expect(component).toMatchSnapshot()
+ const { container } = render(
+ <Provider store={store}>
+ <ChallengeCard
+ userChallenge={userChallengeData[1]}
+ indexSlider={0}
+ index={0}
+ cardWidth={200}
+ cardHeight={400}
+ moveToSlide={jest.fn()}
+ />
+ </Provider>
+ )
+ expect(container).toMatchSnapshot()
})
it('should render locked Card', () => {
- const wrapper = shallow(
- <ChallengeCard
- userChallenge={userChallengeData[4]}
- indexSlider={0}
- index={0}
- cardWidth={200}
- cardHeight={400}
- moveToSlide={mockMoveToSlide}
- />
+ const { container } = render(
+ <Provider store={store}>
+ <ChallengeCard
+ userChallenge={userChallengeData[4]}
+ indexSlider={0}
+ index={0}
+ cardWidth={200}
+ cardHeight={400}
+ moveToSlide={jest.fn()}
+ />
+ </Provider>
)
- expect(wrapper.find(ChallengeCardLocked).exists()).toBeTruthy()
+ expect(container.getElementsByClassName('cardLocked').length).toBeTruthy()
})
it('should render unlocked Card', () => {
- const wrapper = shallow(
- <ChallengeCard
- userChallenge={userChallengeData[3]}
- indexSlider={0}
- index={0}
- cardWidth={200}
- cardHeight={400}
- moveToSlide={mockMoveToSlide}
- />
+ const { container } = render(
+ <Provider store={store}>
+ <ChallengeCard
+ userChallenge={userChallengeData[3]}
+ indexSlider={0}
+ index={0}
+ cardWidth={200}
+ cardHeight={400}
+ moveToSlide={jest.fn()}
+ />
+ </Provider>
)
- expect(wrapper.find(ChallengeCardUnlocked).exists()).toBeTruthy()
+ expect(container.getElementsByClassName('cardUnlocked').length).toBeTruthy()
})
it('should render ongoing Card', () => {
- const wrapper = shallow(
- <ChallengeCard
- userChallenge={userChallengeData[2]}
- indexSlider={0}
- index={0}
- cardWidth={200}
- cardHeight={400}
- moveToSlide={mockMoveToSlide}
- />
+ const { container } = render(
+ <Provider store={store}>
+ <ChallengeCard
+ userChallenge={userChallengeData[2]}
+ indexSlider={0}
+ index={0}
+ cardWidth={200}
+ cardHeight={400}
+ moveToSlide={jest.fn()}
+ />
+ </Provider>
)
- expect(wrapper.find(ChallengeCardOnGoing).exists()).toBeTruthy()
+ expect(container.getElementsByClassName('onGoing').length).toBeTruthy()
})
})
diff --git a/src/components/Challenge/ChallengeCard/ChallengeCard.tsx b/src/components/Challenge/ChallengeCard/ChallengeCard.tsx
index dc44d0da9da2d967f59135f2f4d3ab1bd356f528..b8a5e91037a7e06959a4e983fbefdef8cae288ca 100644
--- a/src/components/Challenge/ChallengeCard/ChallengeCard.tsx
+++ b/src/components/Challenge/ChallengeCard/ChallengeCard.tsx
@@ -9,12 +9,11 @@ import ChallengeCardUnlocked from '../ChallengeCardUnlocked/ChallengeCardUnlocke
import './challengeCard.scss'
interface ChallengeCardProps {
- userChallenge?: UserChallenge
+ userChallenge: UserChallenge | undefined
indexSlider: number
index: number
cardWidth: number
cardHeight: number
- isChallengeCardLast?: boolean
moveToSlide: (slideIndex: number) => void
}
@@ -24,12 +23,10 @@ const ChallengeCard = ({
index,
cardWidth,
cardHeight,
- isChallengeCardLast = false,
moveToSlide,
}: ChallengeCardProps) => {
const renderCard = (userChallenge: UserChallenge | undefined) => {
- if (!userChallenge || isChallengeCardLast) return <ChallengeCardLast />
- switch (userChallenge.state) {
+ switch (userChallenge?.state) {
case UserChallengeState.LOCKED:
return <ChallengeCardLocked userChallenge={userChallenge} />
case UserChallengeState.UNLOCKED:
@@ -40,7 +37,7 @@ const ChallengeCard = ({
case UserChallengeState.DUEL:
return <ChallengeCardOnGoing userChallenge={userChallenge} />
default:
- return <ChallengeCardLocked userChallenge={userChallenge} />
+ return <ChallengeCardLast />
}
}
diff --git a/src/components/Challenge/ChallengeCard/__snapshots__/ChallengeCard.spec.tsx.snap b/src/components/Challenge/ChallengeCard/__snapshots__/ChallengeCard.spec.tsx.snap
index 146757e10e7a0afa620a3943624821d65b205f68..457e831873e25c8b68b34837237b03bc42e06aca 100644
--- a/src/components/Challenge/ChallengeCard/__snapshots__/ChallengeCard.spec.tsx.snap
+++ b/src/components/Challenge/ChallengeCard/__snapshots__/ChallengeCard.spec.tsx.snap
@@ -1,161 +1,91 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`ChallengeCard component should be rendered correctly 1`] = `
-<div
- className="slide active"
- onClick={[Function]}
- style={
- Object {
- "height": "400px",
- "maxWidth": "200px",
- "minWidth": "200px",
- }
- }
->
- <ChallengeCardDone
- userChallenge={
- Object {
- "action": Object {
- "ecogesture": null,
- "startDate": null,
- "state": 0,
- },
- "description": "Description challenge 2",
- "duel": Object {
- "description": "Je parie un ours polaire que vous ne pouvez pas consommer moins que #CONSUMPTION € en 1 semaine",
- "duration": "P30D",
- "fluidTypes": Array [],
- "id": "DUEL001",
- "startDate": null,
- "state": 0,
- "threshold": 0,
- "title": "Title DUEL001",
- "userConsumption": 0,
- },
- "endingDate": null,
- "exploration": Object {
- "complementary_description": "Refaire un tour dans son profil si déjà fait",
- "date": null,
- "description": "Avoir complété son profil",
- "ecogesture_id": "",
- "fluid_condition": Array [],
- "id": "EXPLORATION001",
- "message_success": "Vous avez complété votre profil ou refait un tour dans votre profil",
- "progress": 0,
- "state": 0,
- "target": 1,
- "type": 1,
- },
- "id": "CHALLENGE0002",
- "progress": Object {
- "actionProgress": 0,
- "explorationProgress": 0,
- "quizProgress": 0,
- },
- "quiz": Object {
- "customQuestion": Object {
- "interval": 20,
- "period": Object {},
- "questionLabel": "Custom1",
- "result": 0,
- "singleFluid": false,
- "timeStep": 20,
- "type": 0,
- },
- "id": "QUIZ001",
- "questions": Array [
- Object {
- "answers": Array [
- Object {
- "answerLabel": "86 km",
- "isTrue": true,
- },
- Object {
- "answerLabel": "78 km",
- "isTrue": false,
- },
- Object {
- "answerLabel": "56 km",
- "isTrue": false,
- },
- ],
- "explanation": "L’aqueduc du Gier est un des aqueducs antiques de Lyon desservant la ville antique de Lugdunum. Avec ses 86 km il est le plus long des quatre aqueducs ayant alimenté la ville en eau, et celui dont les structures sont le mieux conservées. Il doit son nom au fait qu'il puise aux sources du Gier, affluent du Rhône",
- "questionLabel": "Quelle longueur faisait l’aqueduc du Gier pour acheminer l’eau sur Lyon à l’époque romaine ?",
- "result": 0,
- "source": "string",
- },
- Object {
- "answers": Array [
- Object {
- "answerLabel": "1 point d’eau public pour 800 habitants.",
- "isTrue": true,
- },
- Object {
- "answerLabel": "1 point d’eau public pour 400 habitants.",
- "isTrue": false,
- },
- Object {
- "answerLabel": "1 point d’eau public pour 200 habitants.",
- "isTrue": false,
- },
- ],
- "explanation": "string",
- "questionLabel": "En 1800 à Lyon, combien de points d'eau y avait-il par habitants ?",
- "result": 0,
- "source": "string",
- },
- Object {
- "answers": Array [
- Object {
- "answerLabel": "François Mitterrand",
- "isTrue": false,
- },
- Object {
- "answerLabel": "Napoléon Ier",
- "isTrue": true,
- },
- Object {
- "answerLabel": "Napoléon III",
- "isTrue": false,
- },
- ],
- "explanation": "string",
- "questionLabel": "Qui officialise la création de la Compagnie Générale des eaux ?",
- "result": 0,
- "source": "string",
- },
- Object {
- "answers": Array [
- Object {
- "answerLabel": "string",
- "isTrue": false,
- },
- Object {
- "answerLabel": "string",
- "isTrue": false,
- },
- Object {
- "answerLabel": "Aristide Dumont",
- "isTrue": true,
- },
- ],
- "explanation": "string",
- "questionLabel": "Quel ingénieur est à l’origine du projet d’alimentation en eau en 1856 ?",
- "result": 0,
- "source": "string",
- },
- ],
- "result": 0,
- "startDate": null,
- "state": 0,
- },
- "startDate": null,
- "state": 4,
- "success": 1,
- "target": 15,
- "title": "Challenge 2",
- }
- }
- />
+<div>
+ <div
+ class="slide active"
+ style="min-width: 200px; max-width: 200px; height: 400px;"
+ >
+ <div
+ class="cardContent cardDone"
+ >
+ <div
+ class="challengeName text-22-bold"
+ >
+ Jean-Jacques
+RUISSEAU
+ </div>
+ <div
+ class="iconResult"
+ >
+ <svg
+ aria-hidden="true"
+ class="imgResult styles__icon___23x3R"
+ height="180"
+ width="180"
+ >
+ <use
+ xlink:href="#test-file-stub"
+ />
+ </svg>
+ </div>
+ <div
+ class="statsResult"
+ >
+ <div
+ class="labelResult lost"
+ >
+ challenge.card_done.lost
+ </div>
+ <span
+ class="text-18"
+ >
+ challenge.card_done.depense
+ <span
+ class="text-18-bold"
+ >
+ 0,00
+ €
+ </span>
+ <br />
+ challenge.card_done.final_defi
+ </span>
+ </div>
+ <div
+ class="buttons"
+ >
+ <button
+ aria-label="challenge.card_done.final_defi_view"
+ class="MuiButtonBase-root MuiButton-root MuiButton-text btnSecondary"
+ tabindex="0"
+ type="button"
+ >
+ <span
+ class="MuiButton-label"
+ >
+ challenge.card_done.final_defi_view
+ </span>
+ <span
+ class="MuiTouchRipple-root"
+ />
+ </button>
+ <button
+ aria-label="challenge.card_done.reset_defi"
+ class="MuiButtonBase-root MuiButton-root MuiButton-text btnPrimaryNegative"
+ tabindex="0"
+ type="button"
+ >
+ <span
+ class="MuiButton-label"
+ >
+ challenge.card_done.reset_defi
+ </span>
+ <span
+ class="MuiTouchRipple-root"
+ />
+ </button>
+ </div>
+ </div>
+ </div>
</div>
`;
diff --git a/src/components/Challenge/ChallengeCardDone/ChallengeCardDone.spec.tsx b/src/components/Challenge/ChallengeCardDone/ChallengeCardDone.spec.tsx
index 21a0b674c6d80993b88513fccaa4060c288f00e6..56ef37bff49697a3fc05c852f9ef7586b8b3c7eb 100644
--- a/src/components/Challenge/ChallengeCardDone/ChallengeCardDone.spec.tsx
+++ b/src/components/Challenge/ChallengeCardDone/ChallengeCardDone.spec.tsx
@@ -1,12 +1,10 @@
-import { Button } from '@material-ui/core'
+import { render, screen } from '@testing-library/react'
+import { userEvent } from '@testing-library/user-event'
import ChallengeCardDone from 'components/Challenge/ChallengeCardDone/ChallengeCardDone'
-import { mount } from 'enzyme'
-import toJson from 'enzyme-to-json'
import React from 'react'
import { Provider } from 'react-redux'
import configureStore from 'redux-mock-store'
import * as storeHooks from 'store/hooks'
-import { waitForComponentToPaint } from 'tests/__mocks__/testUtils'
import { userChallengeData } from 'tests/__mocks__/userChallengeData.mock'
const mockUpdateUserChallenge = jest.fn()
@@ -27,13 +25,12 @@ describe('ChallengeCardDone component', () => {
},
})
it('should be rendered correctly', async () => {
- const wrapper = mount(
+ const { container } = render(
<Provider store={storeNoCurrentChallenge}>
<ChallengeCardDone userChallenge={userChallengeData[0]} />
</Provider>
)
- await waitForComponentToPaint(wrapper)
- expect(toJson(wrapper)).toMatchSnapshot()
+ expect(container).toMatchSnapshot()
})
describe('Reset final challenge', () => {
@@ -42,14 +39,15 @@ describe('ChallengeCardDone component', () => {
})
it('should reset challenge if no other challenge is on going', async () => {
mockAppDispatch.mockImplementationOnce(() => mockDispatch)
- const wrapper = mount(
+ render(
<Provider store={storeNoCurrentChallenge}>
<ChallengeCardDone userChallenge={userChallengeData[0]} />
</Provider>
)
- wrapper.find(Button).last().simulate('click')
- await waitForComponentToPaint(wrapper)
- expect(mockDispatch).toHaveBeenCalledTimes(1)
+ const resetButton = screen.getByRole('button', {
+ name: 'challenge.card_done.reset_defi',
+ })
+ await userEvent.click(resetButton)
expect(mockDispatch).toHaveBeenCalledWith({
type: 'challenge/updateUserChallengeList',
})
@@ -62,35 +60,39 @@ describe('ChallengeCardDone component', () => {
challenge: { currentChallenge: userChallengeData[1] },
},
})
- const wrapper = mount(
+ render(
<Provider store={store}>
<ChallengeCardDone userChallenge={userChallengeData[0]} />
</Provider>
)
- wrapper.find(Button).last().simulate('click')
- await waitForComponentToPaint(wrapper)
+ const resetButton = screen.getByRole('button', {
+ name: 'challenge.card_done.reset_defi',
+ })
+ expect(resetButton).toHaveProperty('disabled')
expect(mockDispatch).toHaveBeenCalledTimes(0)
expect(mockUpdateUserChallenge).toHaveBeenCalledTimes(0)
})
it('should be primary button is challenge is lost', async () => {
- const wrapper = mount(
+ render(
<Provider store={storeNoCurrentChallenge}>
<ChallengeCardDone userChallenge={userChallengeData[1]} />
</Provider>
)
- await waitForComponentToPaint(wrapper)
- const resetButton = wrapper.find('button').last()
- expect(resetButton.hasClass('btn-primary-challenge')).toBe(true)
+ const resetButton = screen.getByRole('button', {
+ name: 'challenge.card_done.reset_defi',
+ })
+ expect(resetButton).toHaveClass('btnPrimaryNegative')
})
it('should be secondary button is challenge is won', async () => {
- const wrapper = mount(
+ render(
<Provider store={storeNoCurrentChallenge}>
<ChallengeCardDone userChallenge={userChallengeData[0]} />
</Provider>
)
- await waitForComponentToPaint(wrapper)
- const resetButton = wrapper.find('button').last()
- expect(resetButton.hasClass('btn-secondary-negative')).toBe(true)
+ const resetButton = screen.getByRole('button', {
+ name: 'challenge.card_done.reset_defi',
+ })
+ expect(resetButton).toHaveClass('btnSecondary')
})
})
})
diff --git a/src/components/Challenge/ChallengeCardDone/ChallengeCardDone.tsx b/src/components/Challenge/ChallengeCardDone/ChallengeCardDone.tsx
index 59e2c9e272a1334bd9a70876578837457e0601c3..ec66ecbaaa8c37c70d9a38835794d5d0c6f96097 100644
--- a/src/components/Challenge/ChallengeCardDone/ChallengeCardDone.tsx
+++ b/src/components/Challenge/ChallengeCardDone/ChallengeCardDone.tsx
@@ -93,8 +93,8 @@ const ChallengeCardDone = ({
<div className="statsResult">
<div
className={classNames('labelResult', {
- ['win']: userChallenge.success === UserChallengeSuccess.WIN,
- ['lost']: userChallenge.success === UserChallengeSuccess.LOST,
+ win: userChallenge.success === UserChallengeSuccess.WIN,
+ lost: userChallenge.success === UserChallengeSuccess.LOST,
})}
>
{getResultLabel(userChallenge)}
@@ -118,23 +118,18 @@ const ChallengeCardDone = ({
<Button
aria-label={t('challenge.card_done.final_defi_view')}
onClick={goDuel}
- classes={{
- root: 'btn-secondary-negative grey-border',
- label: 'text-15-bold',
- }}
+ className="btnSecondary"
>
{t('challenge.card_done.final_defi_view')}
</Button>
<Button
aria-label={t('challenge.card_done.reset_defi')}
onClick={handleChallengeReset}
- classes={{
- root:
- userChallenge.success === UserChallengeSuccess.WIN
- ? 'btn-secondary-negative grey-border'
- : 'btn-primary-challenge',
- label: 'text-15-bold',
- }}
+ className={
+ userChallenge.success === UserChallengeSuccess.WIN
+ ? 'btnSecondary'
+ : 'btnPrimaryNegative'
+ }
disabled={currentChallenge !== null}
>
{t('challenge.card_done.reset_defi')}
diff --git a/src/components/Challenge/ChallengeCardDone/__snapshots__/ChallengeCardDone.spec.tsx.snap b/src/components/Challenge/ChallengeCardDone/__snapshots__/ChallengeCardDone.spec.tsx.snap
index 5395d8e193876cc7176b2022e6717eac11544c5e..7df066b7f28a181089a3075beb5f502a88dba5ae 100644
--- a/src/components/Challenge/ChallengeCardDone/__snapshots__/ChallengeCardDone.spec.tsx.snap
+++ b/src/components/Challenge/ChallengeCardDone/__snapshots__/ChallengeCardDone.spec.tsx.snap
@@ -1,500 +1,86 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`ChallengeCardDone component should be rendered correctly 1`] = `
-<Provider
- store={
- Object {
- "clearActions": [Function],
- "dispatch": [Function],
- "getActions": [Function],
- "getState": [Function],
- "replaceReducer": [Function],
- "subscribe": [Function],
- }
- }
->
- <ChallengeCardDone
- userChallenge={
- Object {
- "action": Object {
- "ecogesture": null,
- "startDate": null,
- "state": 0,
- },
- "description": "Description challenge 1",
- "duel": Object {
- "description": "Je parie un ours polaire que vous ne pouvez pas consommer moins que #CONSUMPTION € en 1 semaine",
- "duration": "P30D",
- "fluidTypes": Array [],
- "id": "DUEL001",
- "startDate": null,
- "state": 0,
- "threshold": 0,
- "title": "Title DUEL001",
- "userConsumption": 0,
- },
- "endingDate": null,
- "exploration": Object {
- "complementary_description": "Refaire un tour dans son profil si déjà fait",
- "date": null,
- "description": "Avoir complété son profil",
- "ecogesture_id": "",
- "fluid_condition": Array [],
- "id": "EXPLORATION001",
- "message_success": "Vous avez complété votre profil ou refait un tour dans votre profil",
- "progress": 0,
- "state": 0,
- "target": 1,
- "type": 1,
- },
- "id": "CHALLENGE0001",
- "progress": Object {
- "actionProgress": 0,
- "explorationProgress": 0,
- "quizProgress": 0,
- },
- "quiz": Object {
- "customQuestion": Object {
- "interval": 20,
- "period": Object {},
- "questionLabel": "Custom1",
- "result": 0,
- "singleFluid": false,
- "timeStep": 20,
- "type": 0,
- },
- "id": "QUIZ001",
- "questions": Array [
- Object {
- "answers": Array [
- Object {
- "answerLabel": "86 km",
- "isTrue": true,
- },
- Object {
- "answerLabel": "78 km",
- "isTrue": false,
- },
- Object {
- "answerLabel": "56 km",
- "isTrue": false,
- },
- ],
- "explanation": "L’aqueduc du Gier est un des aqueducs antiques de Lyon desservant la ville antique de Lugdunum. Avec ses 86 km il est le plus long des quatre aqueducs ayant alimenté la ville en eau, et celui dont les structures sont le mieux conservées. Il doit son nom au fait qu'il puise aux sources du Gier, affluent du Rhône",
- "questionLabel": "Quelle longueur faisait l’aqueduc du Gier pour acheminer l’eau sur Lyon à l’époque romaine ?",
- "result": 0,
- "source": "string",
- },
- Object {
- "answers": Array [
- Object {
- "answerLabel": "1 point d’eau public pour 800 habitants.",
- "isTrue": true,
- },
- Object {
- "answerLabel": "1 point d’eau public pour 400 habitants.",
- "isTrue": false,
- },
- Object {
- "answerLabel": "1 point d’eau public pour 200 habitants.",
- "isTrue": false,
- },
- ],
- "explanation": "string",
- "questionLabel": "En 1800 à Lyon, combien de points d'eau y avait-il par habitants ?",
- "result": 0,
- "source": "string",
- },
- Object {
- "answers": Array [
- Object {
- "answerLabel": "François Mitterrand",
- "isTrue": false,
- },
- Object {
- "answerLabel": "Napoléon Ier",
- "isTrue": true,
- },
- Object {
- "answerLabel": "Napoléon III",
- "isTrue": false,
- },
- ],
- "explanation": "string",
- "questionLabel": "Qui officialise la création de la Compagnie Générale des eaux ?",
- "result": 0,
- "source": "string",
- },
- Object {
- "answers": Array [
- Object {
- "answerLabel": "string",
- "isTrue": false,
- },
- Object {
- "answerLabel": "string",
- "isTrue": false,
- },
- Object {
- "answerLabel": "Aristide Dumont",
- "isTrue": true,
- },
- ],
- "explanation": "string",
- "questionLabel": "Quel ingénieur est à l’origine du projet d’alimentation en eau en 1856 ?",
- "result": 0,
- "source": "string",
- },
- ],
- "result": 0,
- "startDate": null,
- "state": 0,
- },
- "startDate": null,
- "state": 4,
- "success": 2,
- "target": 15,
- "title": "Challenge 1",
- }
- }
+<div>
+ <div
+ class="cardContent cardDone"
>
<div
- className="cardContent cardDone"
+ class="challengeName text-22-bold"
>
- <div
- className="challengeName text-22-bold"
- >
- Simone
+ Simone
VEILLE
- </div>
+ </div>
+ <div
+ class="iconResult"
+ >
+ <svg
+ aria-hidden="true"
+ class="imgResult styles__icon___23x3R"
+ height="180"
+ width="180"
+ >
+ <use
+ xlink:href="#test-file-stub"
+ />
+ </svg>
+ </div>
+ <div
+ class="statsResult"
+ >
<div
- className="iconResult"
+ class="labelResult win"
>
- <StyledIcon
- className="imgResult"
- icon="test-file-stub"
- size={180}
- >
- <Icon
- aria-hidden={true}
- className="imgResult"
- icon="test-file-stub"
- size={180}
- spin={false}
- >
- <Component
- aria-hidden={true}
- className="imgResult styles__icon___23x3R"
- height={180}
- style={Object {}}
- width={180}
- >
- <svg
- aria-hidden={true}
- className="imgResult styles__icon___23x3R"
- height={180}
- style={Object {}}
- width={180}
- >
- <use
- xlinkHref="#test-file-stub"
- />
- </svg>
- </Component>
- </Icon>
- </StyledIcon>
+ challenge.card_done.win
</div>
- <div
- className="statsResult"
+ <span
+ class="text-18"
>
- <div
- className="labelResult win"
- >
- challenge.card_done.win
- </div>
+ challenge.card_done.saving
<span
- className="text-18"
+ class="text-18-bold"
>
- challenge.card_done.saving
- <span
- className="text-18-bold"
- >
- 0,00
- €
- </span>
- <br />
- challenge.card_done.final_defi
+ 0,00
+ €
</span>
- </div>
- <div
- className="buttons"
+ <br />
+ challenge.card_done.final_defi
+ </span>
+ </div>
+ <div
+ class="buttons"
+ >
+ <button
+ aria-label="challenge.card_done.final_defi_view"
+ class="MuiButtonBase-root MuiButton-root MuiButton-text btnSecondary"
+ tabindex="0"
+ type="button"
>
- <WithStyles(ForwardRef(Button))
- aria-label="challenge.card_done.final_defi_view"
- classes={
- Object {
- "label": "text-15-bold",
- "root": "btn-secondary-negative grey-border",
- }
- }
- onClick={[Function]}
+ <span
+ class="MuiButton-label"
>
- <ForwardRef(Button)
- aria-label="challenge.card_done.final_defi_view"
- classes={
- Object {
- "colorInherit": "MuiButton-colorInherit",
- "contained": "MuiButton-contained",
- "containedPrimary": "MuiButton-containedPrimary",
- "containedSecondary": "MuiButton-containedSecondary",
- "containedSizeLarge": "MuiButton-containedSizeLarge",
- "containedSizeSmall": "MuiButton-containedSizeSmall",
- "disableElevation": "MuiButton-disableElevation",
- "disabled": "Mui-disabled",
- "endIcon": "MuiButton-endIcon",
- "focusVisible": "Mui-focusVisible",
- "fullWidth": "MuiButton-fullWidth",
- "iconSizeLarge": "MuiButton-iconSizeLarge",
- "iconSizeMedium": "MuiButton-iconSizeMedium",
- "iconSizeSmall": "MuiButton-iconSizeSmall",
- "label": "MuiButton-label text-15-bold",
- "outlined": "MuiButton-outlined",
- "outlinedPrimary": "MuiButton-outlinedPrimary",
- "outlinedSecondary": "MuiButton-outlinedSecondary",
- "outlinedSizeLarge": "MuiButton-outlinedSizeLarge",
- "outlinedSizeSmall": "MuiButton-outlinedSizeSmall",
- "root": "MuiButton-root btn-secondary-negative grey-border",
- "sizeLarge": "MuiButton-sizeLarge",
- "sizeSmall": "MuiButton-sizeSmall",
- "startIcon": "MuiButton-startIcon",
- "text": "MuiButton-text",
- "textPrimary": "MuiButton-textPrimary",
- "textSecondary": "MuiButton-textSecondary",
- "textSizeLarge": "MuiButton-textSizeLarge",
- "textSizeSmall": "MuiButton-textSizeSmall",
- }
- }
- onClick={[Function]}
- >
- <WithStyles(ForwardRef(ButtonBase))
- aria-label="challenge.card_done.final_defi_view"
- className="MuiButton-root btn-secondary-negative grey-border MuiButton-text"
- component="button"
- disabled={false}
- focusRipple={true}
- focusVisibleClassName="Mui-focusVisible"
- onClick={[Function]}
- type="button"
- >
- <ForwardRef(ButtonBase)
- aria-label="challenge.card_done.final_defi_view"
- className="MuiButton-root btn-secondary-negative grey-border MuiButton-text"
- classes={
- Object {
- "disabled": "Mui-disabled",
- "focusVisible": "Mui-focusVisible",
- "root": "MuiButtonBase-root",
- }
- }
- component="button"
- disabled={false}
- focusRipple={true}
- focusVisibleClassName="Mui-focusVisible"
- onClick={[Function]}
- type="button"
- >
- <button
- aria-label="challenge.card_done.final_defi_view"
- className="MuiButtonBase-root MuiButton-root btn-secondary-negative grey-border MuiButton-text"
- disabled={false}
- onBlur={[Function]}
- onClick={[Function]}
- onDragLeave={[Function]}
- onFocus={[Function]}
- onKeyDown={[Function]}
- onKeyUp={[Function]}
- onMouseDown={[Function]}
- onMouseLeave={[Function]}
- onMouseUp={[Function]}
- onTouchEnd={[Function]}
- onTouchMove={[Function]}
- onTouchStart={[Function]}
- tabIndex={0}
- type="button"
- >
- <span
- className="MuiButton-label text-15-bold"
- >
- challenge.card_done.final_defi_view
- </span>
- <WithStyles(memo)
- center={false}
- >
- <ForwardRef(TouchRipple)
- center={false}
- classes={
- Object {
- "child": "MuiTouchRipple-child",
- "childLeaving": "MuiTouchRipple-childLeaving",
- "childPulsate": "MuiTouchRipple-childPulsate",
- "ripple": "MuiTouchRipple-ripple",
- "ripplePulsate": "MuiTouchRipple-ripplePulsate",
- "rippleVisible": "MuiTouchRipple-rippleVisible",
- "root": "MuiTouchRipple-root",
- }
- }
- >
- <span
- className="MuiTouchRipple-root"
- >
- <TransitionGroup
- childFactory={[Function]}
- component={null}
- exit={true}
- />
- </span>
- </ForwardRef(TouchRipple)>
- </WithStyles(memo)>
- </button>
- </ForwardRef(ButtonBase)>
- </WithStyles(ForwardRef(ButtonBase))>
- </ForwardRef(Button)>
- </WithStyles(ForwardRef(Button))>
- <WithStyles(ForwardRef(Button))
- aria-label="challenge.card_done.reset_defi"
- classes={
- Object {
- "label": "text-15-bold",
- "root": "btn-secondary-negative grey-border",
- }
- }
- disabled={false}
- onClick={[Function]}
+ challenge.card_done.final_defi_view
+ </span>
+ <span
+ class="MuiTouchRipple-root"
+ />
+ </button>
+ <button
+ aria-label="challenge.card_done.reset_defi"
+ class="MuiButtonBase-root MuiButton-root MuiButton-text btnSecondary"
+ tabindex="0"
+ type="button"
+ >
+ <span
+ class="MuiButton-label"
>
- <ForwardRef(Button)
- aria-label="challenge.card_done.reset_defi"
- classes={
- Object {
- "colorInherit": "MuiButton-colorInherit",
- "contained": "MuiButton-contained",
- "containedPrimary": "MuiButton-containedPrimary",
- "containedSecondary": "MuiButton-containedSecondary",
- "containedSizeLarge": "MuiButton-containedSizeLarge",
- "containedSizeSmall": "MuiButton-containedSizeSmall",
- "disableElevation": "MuiButton-disableElevation",
- "disabled": "Mui-disabled",
- "endIcon": "MuiButton-endIcon",
- "focusVisible": "Mui-focusVisible",
- "fullWidth": "MuiButton-fullWidth",
- "iconSizeLarge": "MuiButton-iconSizeLarge",
- "iconSizeMedium": "MuiButton-iconSizeMedium",
- "iconSizeSmall": "MuiButton-iconSizeSmall",
- "label": "MuiButton-label text-15-bold",
- "outlined": "MuiButton-outlined",
- "outlinedPrimary": "MuiButton-outlinedPrimary",
- "outlinedSecondary": "MuiButton-outlinedSecondary",
- "outlinedSizeLarge": "MuiButton-outlinedSizeLarge",
- "outlinedSizeSmall": "MuiButton-outlinedSizeSmall",
- "root": "MuiButton-root btn-secondary-negative grey-border",
- "sizeLarge": "MuiButton-sizeLarge",
- "sizeSmall": "MuiButton-sizeSmall",
- "startIcon": "MuiButton-startIcon",
- "text": "MuiButton-text",
- "textPrimary": "MuiButton-textPrimary",
- "textSecondary": "MuiButton-textSecondary",
- "textSizeLarge": "MuiButton-textSizeLarge",
- "textSizeSmall": "MuiButton-textSizeSmall",
- }
- }
- disabled={false}
- onClick={[Function]}
- >
- <WithStyles(ForwardRef(ButtonBase))
- aria-label="challenge.card_done.reset_defi"
- className="MuiButton-root btn-secondary-negative grey-border MuiButton-text"
- component="button"
- disabled={false}
- focusRipple={true}
- focusVisibleClassName="Mui-focusVisible"
- onClick={[Function]}
- type="button"
- >
- <ForwardRef(ButtonBase)
- aria-label="challenge.card_done.reset_defi"
- className="MuiButton-root btn-secondary-negative grey-border MuiButton-text"
- classes={
- Object {
- "disabled": "Mui-disabled",
- "focusVisible": "Mui-focusVisible",
- "root": "MuiButtonBase-root",
- }
- }
- component="button"
- disabled={false}
- focusRipple={true}
- focusVisibleClassName="Mui-focusVisible"
- onClick={[Function]}
- type="button"
- >
- <button
- aria-label="challenge.card_done.reset_defi"
- className="MuiButtonBase-root MuiButton-root btn-secondary-negative grey-border MuiButton-text"
- disabled={false}
- onBlur={[Function]}
- onClick={[Function]}
- onDragLeave={[Function]}
- onFocus={[Function]}
- onKeyDown={[Function]}
- onKeyUp={[Function]}
- onMouseDown={[Function]}
- onMouseLeave={[Function]}
- onMouseUp={[Function]}
- onTouchEnd={[Function]}
- onTouchMove={[Function]}
- onTouchStart={[Function]}
- tabIndex={0}
- type="button"
- >
- <span
- className="MuiButton-label text-15-bold"
- >
- challenge.card_done.reset_defi
- </span>
- <WithStyles(memo)
- center={false}
- >
- <ForwardRef(TouchRipple)
- center={false}
- classes={
- Object {
- "child": "MuiTouchRipple-child",
- "childLeaving": "MuiTouchRipple-childLeaving",
- "childPulsate": "MuiTouchRipple-childPulsate",
- "ripple": "MuiTouchRipple-ripple",
- "ripplePulsate": "MuiTouchRipple-ripplePulsate",
- "rippleVisible": "MuiTouchRipple-rippleVisible",
- "root": "MuiTouchRipple-root",
- }
- }
- >
- <span
- className="MuiTouchRipple-root"
- >
- <TransitionGroup
- childFactory={[Function]}
- component={null}
- exit={true}
- />
- </span>
- </ForwardRef(TouchRipple)>
- </WithStyles(memo)>
- </button>
- </ForwardRef(ButtonBase)>
- </WithStyles(ForwardRef(ButtonBase))>
- </ForwardRef(Button)>
- </WithStyles(ForwardRef(Button))>
- </div>
+ challenge.card_done.reset_defi
+ </span>
+ <span
+ class="MuiTouchRipple-root"
+ />
+ </button>
</div>
- </ChallengeCardDone>
-</Provider>
+ </div>
+</div>
`;
diff --git a/src/components/Challenge/ChallengeCardDone/challengeCardDone.scss b/src/components/Challenge/ChallengeCardDone/challengeCardDone.scss
index d4ff21eb97b218ed8b8f6936b84a6d7bf176e641..2dee0dd35261aaeb868aee9e3b9179b565b76c2d 100644
--- a/src/components/Challenge/ChallengeCardDone/challengeCardDone.scss
+++ b/src/components/Challenge/ChallengeCardDone/challengeCardDone.scss
@@ -30,7 +30,6 @@
font-size: 28px;
line-height: 120%;
text-transform: uppercase;
- margin-bottom: 0.5rem;
}
.win {
color: $gold-shadow;
@@ -40,20 +39,16 @@
}
.statsResult {
text-align: center;
+ display: flex;
+ flex-direction: column;
+ gap: 0.5rem;
}
+
.buttons {
display: flex;
flex-direction: column;
- gap: 8px;
+ gap: 1rem;
width: 100%;
-
- button {
- padding: 0.625rem;
- margin: 0;
- &.grey-border {
- border: 1px solid $grey-bright;
- }
- }
}
}
}
diff --git a/src/components/Challenge/ChallengeCardLast/ChallengeCardLast.spec.tsx b/src/components/Challenge/ChallengeCardLast/ChallengeCardLast.spec.tsx
index 7cd4d37df410927a86fa7683458f2d2a8465521e..17fb028e94d666557241b6bbe591b932a966472f 100644
--- a/src/components/Challenge/ChallengeCardLast/ChallengeCardLast.spec.tsx
+++ b/src/components/Challenge/ChallengeCardLast/ChallengeCardLast.spec.tsx
@@ -1,5 +1,5 @@
-import { mount } from 'enzyme'
-import toJson from 'enzyme-to-json'
+import { render, screen } from '@testing-library/react'
+import { userEvent } from '@testing-library/user-event'
import React from 'react'
import ChallengeCardLast from './ChallengeCardLast'
@@ -8,15 +8,15 @@ declare let __SAU_IDEA_DIRECT_LINK__: string
describe('ChallengeCardLast component', () => {
it('should be rendered correctly', async () => {
- const wrapper = mount(<ChallengeCardLast />)
- expect(toJson(wrapper)).toMatchSnapshot()
+ const { container } = render(<ChallengeCardLast />)
+ expect(container).toMatchSnapshot()
})
- it('should open SAU new idea link', () => {
+ it('should open SAU new idea link', async () => {
global.open = jest.fn()
- const wrapper = mount(<ChallengeCardLast />)
- wrapper.find('.btn_lastCard').first().simulate('click')
+ render(<ChallengeCardLast />)
+ await userEvent.click(screen.getByRole('button'))
expect(window.open).toHaveBeenCalledTimes(1)
expect(global.open).toHaveBeenCalledWith(
`${__SAU_IDEA_DIRECT_LINK__}?version=0.0.0`
diff --git a/src/components/Challenge/ChallengeCardLast/ChallengeCardLast.tsx b/src/components/Challenge/ChallengeCardLast/ChallengeCardLast.tsx
index c811000446f86b208f252d79a020f4f2ce764516..2fef4046dc7682b742ff8e871321843be3dc119a 100644
--- a/src/components/Challenge/ChallengeCardLast/ChallengeCardLast.tsx
+++ b/src/components/Challenge/ChallengeCardLast/ChallengeCardLast.tsx
@@ -21,22 +21,12 @@ const ChallengeCardLast = () => {
return (
<div className="cardLast">
<StyledIcon icon={ecolyoIcon} size={62} />
- <div className="content">
- <div className="text-22-bold title-last">
- {t('challenge.card_last.title')}
- </div>
- <div className="text-18-normal message">
- {t('challenge.card_last.message1')}
- </div>
- </div>
+ <div className="text-22-bold">{t('challenge.card_last.title')}</div>
+ <div className="text-18-normal">{t('challenge.card_last.message1')}</div>
<Button
aria-label={t('challenge.card_last.button')}
onClick={handleClickFeedbacks}
- className="btn1"
- classes={{
- root: 'btn-secondary-negative btn_lastCard',
- label: 'text-15-bold',
- }}
+ className="btnSecondary"
>
{t('challenge.card_last.button')}
</Button>
diff --git a/src/components/Challenge/ChallengeCardLast/__snapshots__/ChallengeCardLast.spec.tsx.snap b/src/components/Challenge/ChallengeCardLast/__snapshots__/ChallengeCardLast.spec.tsx.snap
index 2242865caf89c2e64c3b73bf1ffd5d778fcfb83a..7d36624206fb1815aa9f10d018895ebf36b1e652 100644
--- a/src/components/Challenge/ChallengeCardLast/__snapshots__/ChallengeCardLast.spec.tsx.snap
+++ b/src/components/Challenge/ChallengeCardLast/__snapshots__/ChallengeCardLast.spec.tsx.snap
@@ -1,188 +1,45 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`ChallengeCardLast component should be rendered correctly 1`] = `
-<ChallengeCardLast>
+<div>
<div
- className="cardLast"
+ class="cardLast"
>
- <StyledIcon
- icon="test-file-stub"
- size={62}
+ <svg
+ aria-hidden="true"
+ class="styles__icon___23x3R"
+ height="62"
+ width="62"
>
- <Icon
- aria-hidden={true}
- icon="test-file-stub"
- size={62}
- spin={false}
- >
- <Component
- aria-hidden={true}
- className="styles__icon___23x3R"
- height={62}
- style={Object {}}
- width={62}
- >
- <svg
- aria-hidden={true}
- className="styles__icon___23x3R"
- height={62}
- style={Object {}}
- width={62}
- >
- <use
- xlinkHref="#test-file-stub"
- />
- </svg>
- </Component>
- </Icon>
- </StyledIcon>
+ <use
+ xlink:href="#test-file-stub"
+ />
+ </svg>
<div
- className="content"
+ class="text-22-bold"
>
- <div
- className="text-22-bold title-last"
- >
- challenge.card_last.title
- </div>
- <div
- className="text-18-normal message"
- >
- challenge.card_last.message1
- </div>
+ challenge.card_last.title
+ </div>
+ <div
+ class="text-18-normal"
+ >
+ challenge.card_last.message1
</div>
- <WithStyles(ForwardRef(Button))
+ <button
aria-label="challenge.card_last.button"
- className="btn1"
- classes={
- Object {
- "label": "text-15-bold",
- "root": "btn-secondary-negative btn_lastCard",
- }
- }
- onClick={[Function]}
+ class="MuiButtonBase-root MuiButton-root MuiButton-text btnSecondary"
+ tabindex="0"
+ type="button"
>
- <ForwardRef(Button)
- aria-label="challenge.card_last.button"
- className="btn1"
- classes={
- Object {
- "colorInherit": "MuiButton-colorInherit",
- "contained": "MuiButton-contained",
- "containedPrimary": "MuiButton-containedPrimary",
- "containedSecondary": "MuiButton-containedSecondary",
- "containedSizeLarge": "MuiButton-containedSizeLarge",
- "containedSizeSmall": "MuiButton-containedSizeSmall",
- "disableElevation": "MuiButton-disableElevation",
- "disabled": "Mui-disabled",
- "endIcon": "MuiButton-endIcon",
- "focusVisible": "Mui-focusVisible",
- "fullWidth": "MuiButton-fullWidth",
- "iconSizeLarge": "MuiButton-iconSizeLarge",
- "iconSizeMedium": "MuiButton-iconSizeMedium",
- "iconSizeSmall": "MuiButton-iconSizeSmall",
- "label": "MuiButton-label text-15-bold",
- "outlined": "MuiButton-outlined",
- "outlinedPrimary": "MuiButton-outlinedPrimary",
- "outlinedSecondary": "MuiButton-outlinedSecondary",
- "outlinedSizeLarge": "MuiButton-outlinedSizeLarge",
- "outlinedSizeSmall": "MuiButton-outlinedSizeSmall",
- "root": "MuiButton-root btn-secondary-negative btn_lastCard",
- "sizeLarge": "MuiButton-sizeLarge",
- "sizeSmall": "MuiButton-sizeSmall",
- "startIcon": "MuiButton-startIcon",
- "text": "MuiButton-text",
- "textPrimary": "MuiButton-textPrimary",
- "textSecondary": "MuiButton-textSecondary",
- "textSizeLarge": "MuiButton-textSizeLarge",
- "textSizeSmall": "MuiButton-textSizeSmall",
- }
- }
- onClick={[Function]}
+ <span
+ class="MuiButton-label"
>
- <WithStyles(ForwardRef(ButtonBase))
- aria-label="challenge.card_last.button"
- className="MuiButton-root btn-secondary-negative btn_lastCard MuiButton-text btn1"
- component="button"
- disabled={false}
- focusRipple={true}
- focusVisibleClassName="Mui-focusVisible"
- onClick={[Function]}
- type="button"
- >
- <ForwardRef(ButtonBase)
- aria-label="challenge.card_last.button"
- className="MuiButton-root btn-secondary-negative btn_lastCard MuiButton-text btn1"
- classes={
- Object {
- "disabled": "Mui-disabled",
- "focusVisible": "Mui-focusVisible",
- "root": "MuiButtonBase-root",
- }
- }
- component="button"
- disabled={false}
- focusRipple={true}
- focusVisibleClassName="Mui-focusVisible"
- onClick={[Function]}
- type="button"
- >
- <button
- aria-label="challenge.card_last.button"
- className="MuiButtonBase-root MuiButton-root btn-secondary-negative btn_lastCard MuiButton-text btn1"
- disabled={false}
- onBlur={[Function]}
- onClick={[Function]}
- onDragLeave={[Function]}
- onFocus={[Function]}
- onKeyDown={[Function]}
- onKeyUp={[Function]}
- onMouseDown={[Function]}
- onMouseLeave={[Function]}
- onMouseUp={[Function]}
- onTouchEnd={[Function]}
- onTouchMove={[Function]}
- onTouchStart={[Function]}
- tabIndex={0}
- type="button"
- >
- <span
- className="MuiButton-label text-15-bold"
- >
- challenge.card_last.button
- </span>
- <WithStyles(memo)
- center={false}
- >
- <ForwardRef(TouchRipple)
- center={false}
- classes={
- Object {
- "child": "MuiTouchRipple-child",
- "childLeaving": "MuiTouchRipple-childLeaving",
- "childPulsate": "MuiTouchRipple-childPulsate",
- "ripple": "MuiTouchRipple-ripple",
- "ripplePulsate": "MuiTouchRipple-ripplePulsate",
- "rippleVisible": "MuiTouchRipple-rippleVisible",
- "root": "MuiTouchRipple-root",
- }
- }
- >
- <span
- className="MuiTouchRipple-root"
- >
- <TransitionGroup
- childFactory={[Function]}
- component={null}
- exit={true}
- />
- </span>
- </ForwardRef(TouchRipple)>
- </WithStyles(memo)>
- </button>
- </ForwardRef(ButtonBase)>
- </WithStyles(ForwardRef(ButtonBase))>
- </ForwardRef(Button)>
- </WithStyles(ForwardRef(Button))>
+ challenge.card_last.button
+ </span>
+ <span
+ class="MuiTouchRipple-root"
+ />
+ </button>
</div>
-</ChallengeCardLast>
+</div>
`;
diff --git a/src/components/Challenge/ChallengeCardLast/challengeCardLast.scss b/src/components/Challenge/ChallengeCardLast/challengeCardLast.scss
index 261e1bd0c3943cf0963800bd0ab74fb3c9c95790..b4cdf2d1b932027afd3d32d79af767911ecb5f3b 100644
--- a/src/components/Challenge/ChallengeCardLast/challengeCardLast.scss
+++ b/src/components/Challenge/ChallengeCardLast/challengeCardLast.scss
@@ -2,40 +2,20 @@
@import 'src/styles/base/color';
.cardLast {
- width: 100%;
height: inherit;
box-sizing: border-box;
- padding: 5%;
+ padding: 1rem;
transition: all 300ms ease;
border: 1px solid $grey-bright;
border-radius: 4px;
- align-items: center;
text-align: center;
display: flex;
flex-direction: column;
- .content {
- max-height: 350px;
- flex-direction: column;
- display: flex;
- }
+ align-items: center;
+ justify-content: space-between;
+
svg {
max-height: 150px;
- }
- .title-last {
- padding: 1rem 2.3rem 1.5rem;
- }
- .message {
- margin: 0 0 0.7rem;
- }
- .btn_lastCard {
- padding: 8px;
- max-height: 40px;
- }
- .content,
- .title-last,
- .message,
- .btn_lastCard,
- svg {
flex: 1;
}
}
diff --git a/src/components/Challenge/ChallengeCardLocked/ChallengeCardLocked.spec.tsx b/src/components/Challenge/ChallengeCardLocked/ChallengeCardLocked.spec.tsx
index 0cf83e9a1b06f17772d8146401b3366ac861c282..21d15c0f42361f2857c8ee9a12091ae9ca8dff21 100644
--- a/src/components/Challenge/ChallengeCardLocked/ChallengeCardLocked.spec.tsx
+++ b/src/components/Challenge/ChallengeCardLocked/ChallengeCardLocked.spec.tsx
@@ -1,13 +1,13 @@
-import { shallow } from 'enzyme'
+import { render } from '@testing-library/react'
import React from 'react'
import { userChallengeData } from 'tests/__mocks__/userChallengeData.mock'
import ChallengeCardLocked from './ChallengeCardLocked'
describe('ChallengeCardLocked component', () => {
it('should be rendered correctly', () => {
- const component = shallow(
+ const { container } = render(
<ChallengeCardLocked userChallenge={userChallengeData[3]} />
- ).getElement()
- expect(component).toMatchSnapshot()
+ )
+ expect(container).toMatchSnapshot()
})
})
diff --git a/src/components/Challenge/ChallengeCardLocked/__snapshots__/ChallengeCardLocked.spec.tsx.snap b/src/components/Challenge/ChallengeCardLocked/__snapshots__/ChallengeCardLocked.spec.tsx.snap
index fda39f814bb35524b8a1bbc95e8f9e1740ddfdea..8ca50446cc8afe7de841dca6da0ba37da65811b6 100644
--- a/src/components/Challenge/ChallengeCardLocked/__snapshots__/ChallengeCardLocked.spec.tsx.snap
+++ b/src/components/Challenge/ChallengeCardLocked/__snapshots__/ChallengeCardLocked.spec.tsx.snap
@@ -1,23 +1,31 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`ChallengeCardLocked component should be rendered correctly 1`] = `
-<div
- className="cardContent cardLocked"
->
- <span
- className="challengeTitle"
+<div>
+ <div
+ class="cardContent cardLocked"
>
- Bernard
+ <span
+ class="challengeTitle"
+ >
+ Bernard
PIV'EAU
- </span>
- <StyledIcon
- className="challengeIcon"
- icon="test-file-stub"
- />
- <p
- className="toUnlock text-16-normal-150"
- >
- challenge.card.locked.desc
- </p>
+ </span>
+ <svg
+ aria-hidden="true"
+ class="challengeIcon styles__icon___23x3R"
+ height="16"
+ width="16"
+ >
+ <use
+ xlink:href="#test-file-stub"
+ />
+ </svg>
+ <p
+ class="toUnlock text-16-normal-150"
+ >
+ challenge.card.locked.desc
+ </p>
+ </div>
</div>
`;
diff --git a/src/components/Challenge/ChallengeCardOnGoing/ChallengeCardOnGoing.tsx b/src/components/Challenge/ChallengeCardOnGoing/ChallengeCardOnGoing.tsx
index 9d449c427f23834fe7568d805ffb4982e8608e4f..028d698b59eac6ab1ff51946552ec155364d1d8c 100644
--- a/src/components/Challenge/ChallengeCardOnGoing/ChallengeCardOnGoing.tsx
+++ b/src/components/Challenge/ChallengeCardOnGoing/ChallengeCardOnGoing.tsx
@@ -51,6 +51,10 @@ const ChallengeCardOnGoing = ({
duel,
} = userChallenge
+ const quizFinished = userChallenge.progress.quizProgress === 5
+ const explorationFinished = userChallenge.progress.explorationProgress === 5
+ const actionFinished = userChallenge.progress.actionProgress === 5
+
const toggleNoFluidModal = useCallback(() => {
setIsOneFluidUp(prev => !prev)
}, [])
@@ -70,7 +74,7 @@ const ChallengeCardOnGoing = ({
dispatch(updateUserChallengeList(updatedChallenge))
}
setIsLoading(false)
- navigate('/challenges/duel?id=' + userChallenge.id)
+ navigate(`/challenges/duel?id=${userChallenge.id}`)
} else {
setIsLoading(false)
toggleNoFluidModal()
@@ -157,19 +161,15 @@ const ChallengeCardOnGoing = ({
const quizButton = () => (
<Button
title={t('challenge.card.ongoing.quiz')}
- tabIndex={userChallenge.progress.quizProgress === 5 ? -1 : 0}
+ tabIndex={quizFinished ? -1 : 0}
className={classNames('smallCard', {
- ['finished']: userChallenge.progress.quizProgress === 5,
+ ['finished']: quizFinished,
})}
onClick={goQuiz}
>
<StyledIcon
className="cardIcon"
- icon={
- userChallenge.progress.quizProgress === 5
- ? circleChecked
- : circleUnchecked
- }
+ icon={quizFinished ? circleChecked : circleUnchecked}
size={25}
/>
<div className="content">
@@ -182,19 +182,15 @@ const ChallengeCardOnGoing = ({
const explorationButton = () => (
<Button
title={t('challenge.card.ongoing.exploration')}
- tabIndex={userChallenge.progress.explorationProgress === 5 ? -1 : 0}
+ tabIndex={explorationFinished ? -1 : 0}
className={classNames('smallCard explorationCard', {
- ['finished']: userChallenge.progress.explorationProgress === 5,
+ ['finished']: explorationFinished,
})}
onClick={goExploration}
>
<StyledIcon
className="cardIcon"
- icon={
- userChallenge.progress.explorationProgress === 5
- ? circleChecked
- : circleUnchecked
- }
+ icon={explorationFinished ? circleChecked : circleUnchecked}
size={25}
/>
{userChallenge.exploration.state ===
@@ -211,19 +207,15 @@ const ChallengeCardOnGoing = ({
const actionButton = () => (
<Button
title={t('challenge.card.ongoing.action')}
- tabIndex={userChallenge.progress.actionProgress === 5 ? -1 : 0}
+ tabIndex={actionFinished ? -1 : 0}
className={classNames('smallCard actionCard', {
- ['finished']: userChallenge.progress.actionProgress === 5,
+ ['finished']: actionFinished,
})}
onClick={goAction}
>
<StyledIcon
className="cardIcon"
- icon={
- userChallenge.progress.actionProgress === 5
- ? circleChecked
- : circleUnchecked
- }
+ icon={actionFinished ? circleChecked : circleUnchecked}
size={25}
/>
{userChallenge.action.state === UserActionState.NOTIFICATION && (
diff --git a/src/components/Challenge/ChallengeCardOnGoing/challengeCardOnGoing.scss b/src/components/Challenge/ChallengeCardOnGoing/challengeCardOnGoing.scss
index 7c00250c8078cc0077acb4a9ab0151b781e68a59..64325543a8cf93f098d8ab8ffce8333bd790e6b1 100644
--- a/src/components/Challenge/ChallengeCardOnGoing/challengeCardOnGoing.scss
+++ b/src/components/Challenge/ChallengeCardOnGoing/challengeCardOnGoing.scss
@@ -14,6 +14,10 @@
flex-direction: column;
justify-content: center;
gap: 1rem;
+
+ button {
+ height: unset;
+ }
}
.titleBlock {
position: absolute;
diff --git a/src/components/Challenge/ChallengeCardUnlocked/ChallengeCardUnlocked.spec.tsx b/src/components/Challenge/ChallengeCardUnlocked/ChallengeCardUnlocked.spec.tsx
index 04014cf96f27ac15071b2dab80342001f909dbdf..7ac922efb3966c92c59af76cc516215f42c6f369 100644
--- a/src/components/Challenge/ChallengeCardUnlocked/ChallengeCardUnlocked.spec.tsx
+++ b/src/components/Challenge/ChallengeCardUnlocked/ChallengeCardUnlocked.spec.tsx
@@ -1,6 +1,6 @@
-import { Button } from '@material-ui/core'
+import { render, screen } from '@testing-library/react'
+import { userEvent } from '@testing-library/user-event'
import { FluidType } from 'enums'
-import { mount } from 'enzyme'
import React from 'react'
import { Provider } from 'react-redux'
import UsageEventService from 'services/usageEvent.service'
@@ -9,9 +9,7 @@ import {
mockChallengeState,
mockGlobalState,
} from 'tests/__mocks__/store'
-import { waitForComponentToPaint } from 'tests/__mocks__/testUtils'
import { userChallengeData } from 'tests/__mocks__/userChallengeData.mock'
-import ChallengeNoFluidModal from '../ChallengeNoFluidModal/ChallengeNoFluidModal'
import ChallengeCardUnlocked from './ChallengeCardUnlocked'
const mockStartUserChallenge = jest.fn()
@@ -22,35 +20,32 @@ jest.mock('services/challenge.service', () => {
})
jest.mock('services/usageEvent.service')
-const mockAddEvent = jest.fn()
-UsageEventService.addEvent = mockAddEvent
+UsageEventService.addEvent = jest.fn()
describe('ChallengeCardUnlocked component', () => {
const store = createMockEcolyoStore()
it('should be rendered correctly', () => {
- const wrapper = mount(
+ render(
<Provider store={store}>
<ChallengeCardUnlocked userChallenge={userChallengeData[0]} />
</Provider>
)
- expect(wrapper.find('.challengeTitle').text()).toEqual('Simone\nVEILLE')
- expect(wrapper.find('.btn-duel-active').exists()).toBeTruthy()
- expect(wrapper.find(ChallengeNoFluidModal).exists()).toBeTruthy()
- expect(wrapper.find(ChallengeNoFluidModal).prop('open')).toBeFalsy()
+ expect(screen.getByText('Simone VEILLE')).toBeInTheDocument()
+ expect(screen.getByRole('button')).toBeInTheDocument()
+ expect(screen.queryAllByRole('dialog').length).toBeFalsy()
})
- it('should display ChallengeNoFluidModal when launching challenge without configured fluid', () => {
- const wrapper = mount(
+ it('should display ChallengeNoFluidModal when launching challenge without configured fluid', async () => {
+ render(
<Provider store={store}>
<ChallengeCardUnlocked userChallenge={userChallengeData[0]} />
</Provider>
)
- wrapper.find('.btn-duel-active').first().simulate('click')
- expect(wrapper.find(ChallengeNoFluidModal).exists()).toBeTruthy()
- expect(wrapper.find(ChallengeNoFluidModal).prop('open')).toBeTruthy()
+ await userEvent.click(screen.getByRole('button'))
+ expect(screen.queryAllByRole('dialog').length).toBeTruthy()
})
- it('should not display ChallengeNoFluidModal and update userChallenge when launching challenge with configured fluid', () => {
+ it('should not display ChallengeNoFluidModal and update userChallenge when launching challenge with configured fluid', async () => {
const store = createMockEcolyoStore({
global: {
fluidTypes: [FluidType.ELECTRICITY],
@@ -58,18 +53,17 @@ describe('ChallengeCardUnlocked component', () => {
},
challenge: mockChallengeState,
})
- const wrapper = mount(
+ render(
<Provider store={store}>
<ChallengeCardUnlocked userChallenge={userChallengeData[0]} />
</Provider>
)
- wrapper.find('.btn-duel-active').first().simulate('click')
- expect(wrapper.find(ChallengeNoFluidModal).exists()).toBeTruthy()
- expect(wrapper.find(ChallengeNoFluidModal).prop('open')).toBeFalsy()
+ await userEvent.click(screen.getByRole('button'))
+ expect(screen.queryAllByRole('dialog').length).toBeFalsy()
expect(mockStartUserChallenge).toHaveBeenCalledWith(userChallengeData[0])
})
- it('should not be able to launch challenge if another one is active', () => {
+ it('should not be able to launch challenge if another one is active', async () => {
const store = createMockEcolyoStore({
global: mockGlobalState,
challenge: {
@@ -77,13 +71,12 @@ describe('ChallengeCardUnlocked component', () => {
currentChallenge: userChallengeData[1],
},
})
- const wrapper = mount(
+ render(
<Provider store={store}>
<ChallengeCardUnlocked userChallenge={userChallengeData[0]} />
</Provider>
)
- waitForComponentToPaint(wrapper)
- const resetButton = wrapper.find(Button).last()
- expect(resetButton.prop('disabled')).toBe(true)
+ const resetButton = screen.getByRole('button')
+ expect(resetButton).toHaveAttribute('disabled')
})
})
diff --git a/src/components/Challenge/ChallengeCardUnlocked/ChallengeCardUnlocked.tsx b/src/components/Challenge/ChallengeCardUnlocked/ChallengeCardUnlocked.tsx
index 97aad463f6ff9bdea280ea1e81ab68f3144b027e..be661f7eb8a4002db535d7d089470063483d0d97 100644
--- a/src/components/Challenge/ChallengeCardUnlocked/ChallengeCardUnlocked.tsx
+++ b/src/components/Challenge/ChallengeCardUnlocked/ChallengeCardUnlocked.tsx
@@ -46,9 +46,8 @@ const ChallengeCardUnlocked = ({
const launchChallenge = useCallback(async () => {
if (fluidTypes.length > 0 && statusRequirementOk) {
const challengeService = new ChallengeService(client)
- const updatedChallenge = await challengeService.startUserChallenge(
- userChallenge
- )
+ const updatedChallenge =
+ await challengeService.startUserChallenge(userChallenge)
await UsageEventService.addEvent(client, {
type: UsageEventType.CHALLENGE_LAUNCH_EVENT,
target: userChallenge.id,
@@ -88,10 +87,7 @@ const ChallengeCardUnlocked = ({
<Button
aria-label={t('challenge.accessibility.button_launch')}
onClick={launchChallenge}
- classes={{
- root: 'btn-duel-active',
- label: 'text-16-bold',
- }}
+ className="btnPrimaryNegative"
disabled={currentChallenge !== null}
>
{t('challenge.card_unlocked.button_launch')}
diff --git a/src/components/Challenge/ChallengeCardUnlocked/challengeCardUnlocked.scss b/src/components/Challenge/ChallengeCardUnlocked/challengeCardUnlocked.scss
index 8bfb434765f3c984b73688c66c7404f51adb41a1..13f1fb50eb5218856b079a985f2254d9fc596ef6 100644
--- a/src/components/Challenge/ChallengeCardUnlocked/challengeCardUnlocked.scss
+++ b/src/components/Challenge/ChallengeCardUnlocked/challengeCardUnlocked.scss
@@ -9,13 +9,14 @@
background: linear-gradient(180deg, #323339 0%, $dark-light 100%);
filter: drop-shadow(0px 4px 16px rgba(0, 0, 0, 0.55));
- button.btn-duel-active {
- padding: 1.2rem 1.5rem;
- }
.challengeIcon {
@media all and(max-height: 700px) {
width: 65%;
margin: auto;
}
}
+
+ button {
+ height: 60px;
+ }
}
diff --git a/src/components/Challenge/ChallengeNoFluidModal/ChallengeNoFluidModal.spec.tsx b/src/components/Challenge/ChallengeNoFluidModal/ChallengeNoFluidModal.spec.tsx
index 310572994d34e6d7e4e3a479e080c996d8c603fc..a31250957e1df1417544bdc548fda8e4853db64b 100644
--- a/src/components/Challenge/ChallengeNoFluidModal/ChallengeNoFluidModal.spec.tsx
+++ b/src/components/Challenge/ChallengeNoFluidModal/ChallengeNoFluidModal.spec.tsx
@@ -1,13 +1,13 @@
-import { shallow } from 'enzyme'
+import { render, screen } from '@testing-library/react'
import React from 'react'
import ChallengeNoFluidModal from './ChallengeNoFluidModal'
describe('ChallengeNoFluidModal component', () => {
it('should be rendered correctly opened', () => {
- const handleClose = jest.fn()
- const component = shallow(
- <ChallengeNoFluidModal open={true} handleCloseClick={handleClose} />
- ).getElement()
- expect(component).toMatchSnapshot()
+ const { baseElement } = render(
+ <ChallengeNoFluidModal open={true} handleCloseClick={jest.fn()} />
+ )
+ expect(baseElement).toMatchSnapshot()
+ expect(screen.getByRole('dialog')).toBeInTheDocument()
})
})
diff --git a/src/components/Challenge/ChallengeNoFluidModal/ChallengeNoFluidModal.tsx b/src/components/Challenge/ChallengeNoFluidModal/ChallengeNoFluidModal.tsx
index b696d9722b077d6c40d0a711658e2a2f47fc215a..f59ef96d038a97a10d24ec3b4ef4e908f16b6649 100644
--- a/src/components/Challenge/ChallengeNoFluidModal/ChallengeNoFluidModal.tsx
+++ b/src/components/Challenge/ChallengeNoFluidModal/ChallengeNoFluidModal.tsx
@@ -43,10 +43,7 @@ const ChallengeNoFluidModal = ({
'challenge_no_fluid_modal.accessibility.button_validate'
)}
onClick={handleCloseClick}
- classes={{
- root: 'btn-secondary-negative',
- label: 'text-16-normal',
- }}
+ className="btnSecondary"
>
{t('challenge_no_fluid_modal.button_validate')}
</Button>
diff --git a/src/components/Challenge/ChallengeNoFluidModal/__snapshots__/ChallengeNoFluidModal.spec.tsx.snap b/src/components/Challenge/ChallengeNoFluidModal/__snapshots__/ChallengeNoFluidModal.spec.tsx.snap
index 924173886a3f52fcf8ccf580a5407f05b7494f8d..7c16ed69c5186f6b8d18e0afbcf400f827c2540a 100644
--- a/src/components/Challenge/ChallengeNoFluidModal/__snapshots__/ChallengeNoFluidModal.spec.tsx.snap
+++ b/src/components/Challenge/ChallengeNoFluidModal/__snapshots__/ChallengeNoFluidModal.spec.tsx.snap
@@ -1,48 +1,77 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`ChallengeNoFluidModal component should be rendered correctly opened 1`] = `
-<WithStyles(ForwardRef(Dialog))
- aria-labelledby="accessibility-title"
- classes={
- Object {
- "paper": "modal-paper",
- "root": "modal-root",
- }
- }
- disableEscapeKeyDown={true}
- onClose={[Function]}
- open={true}
+<body
+ style="padding-right: 0px; overflow: hidden;"
>
<div
- id="accessibility-title"
- >
- challenge_no_fluid_modal.accessibility.window_title
- </div>
+ aria-hidden="true"
+ />
<div
- className="noFluidModal"
+ class="MuiDialog-root modal-root"
+ role="presentation"
+ style="position: fixed; z-index: 1300; right: 0px; bottom: 0px; top: 0px; left: 0px;"
>
<div
- className="no-fluid-title"
- >
- challenge_no_fluid_modal.title
- </div>
+ aria-hidden="true"
+ class="MuiBackdrop-root"
+ style="opacity: 1; webkit-transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"
+ />
<div
- className="no-fluid-content"
+ data-test="sentinelStart"
+ tabindex="0"
+ />
+ <div
+ class="MuiDialog-container MuiDialog-scrollPaper"
+ role="none presentation"
+ style="opacity: 1; webkit-transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"
+ tabindex="-1"
>
- challenge_no_fluid_modal.content
+ <div
+ aria-labelledby="accessibility-title"
+ class="MuiPaper-root MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm MuiPaper-elevation24 MuiPaper-rounded"
+ role="dialog"
+ >
+ <div
+ id="accessibility-title"
+ >
+ challenge_no_fluid_modal.accessibility.window_title
+ </div>
+ <div
+ class="noFluidModal"
+ >
+ <div
+ class="no-fluid-title"
+ >
+ challenge_no_fluid_modal.title
+ </div>
+ <div
+ class="no-fluid-content"
+ >
+ challenge_no_fluid_modal.content
+ </div>
+ <button
+ aria-label="challenge_no_fluid_modal.accessibility.button_validate"
+ class="MuiButtonBase-root MuiButton-root MuiButton-text btnSecondary"
+ tabindex="0"
+ type="button"
+ >
+ <span
+ class="MuiButton-label"
+ >
+ challenge_no_fluid_modal.button_validate
+ </span>
+ <span
+ class="MuiTouchRipple-root"
+ />
+ </button>
+ </div>
+ </div>
</div>
- <WithStyles(ForwardRef(Button))
- aria-label="challenge_no_fluid_modal.accessibility.button_validate"
- classes={
- Object {
- "label": "text-16-normal",
- "root": "btn-secondary-negative",
- }
- }
- onClick={[MockFunction]}
- >
- challenge_no_fluid_modal.button_validate
- </WithStyles(ForwardRef(Button))>
+ <div
+ data-test="sentinelEnd"
+ tabindex="0"
+ />
</div>
-</WithStyles(ForwardRef(Dialog))>
+</body>
`;
diff --git a/src/components/Challenge/ChallengeNoFluidModal/challengeNoFluidModal.scss b/src/components/Challenge/ChallengeNoFluidModal/challengeNoFluidModal.scss
index 01b40b1757680f8a4f4ecf4f5bcdd2fe6c5ec132..49dcc527410c785cfe834955e9e0e06dd8851595 100644
--- a/src/components/Challenge/ChallengeNoFluidModal/challengeNoFluidModal.scss
+++ b/src/components/Challenge/ChallengeNoFluidModal/challengeNoFluidModal.scss
@@ -3,27 +3,17 @@
.noFluidModal {
padding: 1rem;
max-width: 20rem;
+ text-align: center;
+ display: flex;
+ flex-direction: column;
+ gap: 1rem;
.no-fluid-title {
text-transform: uppercase;
font-size: 1.8rem;
- color: white;
- font-family: $text-font;
- margin: 0.5rem auto;
- text-align: center;
}
.no-fluid-content {
font-size: 1.1rem;
- color: white;
- font-family: $text-font;
- text-align: center;
- }
- button.btn-secondary-negative {
- display: block;
- text-align: center;
- margin: auto;
- margin-top: 3.5rem;
- margin-bottom: 0;
}
}
.nofluid-portal {
diff --git a/src/components/Challenge/ChallengeView.spec.tsx b/src/components/Challenge/ChallengeView.spec.tsx
index 1d8f8cb1abce23621b028e2b7b91bbe4d4f0db25..91d1abd6664a3c6325958722629811042e68ee57 100644
--- a/src/components/Challenge/ChallengeView.spec.tsx
+++ b/src/components/Challenge/ChallengeView.spec.tsx
@@ -1,6 +1,5 @@
+import { render } from '@testing-library/react'
import ChallengeView from 'components/Challenge/ChallengeView'
-import { mount } from 'enzyme'
-import toJson from 'enzyme-to-json'
import React from 'react'
import { Provider } from 'react-redux'
import { challengeStateDataFull } from 'tests/__mocks__/challengeStateData.mock'
@@ -24,12 +23,11 @@ describe('ChallengeView component', () => {
})
it('should be rendered correctly', () => {
- const wrapper = mount(
+ const { container } = render(
<Provider store={store}>
<ChallengeView />
</Provider>
)
-
- expect(toJson(wrapper)).toMatchSnapshot()
+ expect(container).toMatchSnapshot()
})
})
diff --git a/src/components/Challenge/ChallengeView.tsx b/src/components/Challenge/ChallengeView.tsx
index b2de63cc4a49ac93f02b48fa8f90b73a2b9c3165..d55765ebf5596fe03eb72362b2959a7031e826b7 100644
--- a/src/components/Challenge/ChallengeView.tsx
+++ b/src/components/Challenge/ChallengeView.tsx
@@ -1,3 +1,5 @@
+/* eslint-disable jsx-a11y/no-static-element-interactions */
+/* eslint-disable jsx-a11y/click-events-have-key-events */
import LeftArrowIcon from 'assets/icons/ico/left-arrow.svg'
import RightArrowIcon from 'assets/icons/ico/right-arrow.svg'
import StyledIconButton from 'components/CommonKit/IconButton/StyledIconButton'
@@ -23,10 +25,13 @@ const ChallengeView = () => {
const [touchStart, setTouchStart] = useState<number>()
const [touchEnd, setTouchEnd] = useState<number>()
const [index, setIndex] = useState<number>(0)
- const [isLastDuelDone, setIsLastDuelDone] = useState<boolean>(false)
const [containerTranslation, setContainerTranslation] =
useState<number>(marginPx)
+ const isLastDuelDone =
+ userChallengeList[userChallengeList.length - 1].state ==
+ UserChallengeState.DONE
+
const resetValues = () => {
// Method used to cancel a swipe on a simple click
setTouchEnd(0)
@@ -34,10 +39,7 @@ const ChallengeView = () => {
}
const moveSliderRight = useCallback(() => {
- if (
- index < userChallengeList.length - 1 ||
- (isLastDuelDone && index < userChallengeList.length)
- ) {
+ if (index < userChallengeList.length - (isLastDuelDone ? 0 : 1)) {
setContainerTranslation(prev => prev - cardWidth - marginPx)
setIndex(prev => prev + 1)
}
@@ -94,15 +96,6 @@ const ChallengeView = () => {
setIndex(currentChallengeIndex)
}, [userChallengeList, cardWidth, isLastDuelDone])
- useEffect(() => {
- if (
- userChallengeList[userChallengeList.length - 1].state ==
- UserChallengeState.DONE
- ) {
- setIsLastDuelDone(true)
- }
- }, [userChallengeList])
-
return (
<>
<CozyBar titleKey="common.title_challenge" />
@@ -141,11 +134,11 @@ const ChallengeView = () => {
{isLastDuelDone && (
<ChallengeCard
+ userChallenge={undefined}
indexSlider={index}
index={userChallengeList.length}
cardWidth={cardWidth}
cardHeight={cardHeight}
- isChallengeCardLast={true}
moveToSlide={moveToSlide}
/>
)}
diff --git a/src/components/Challenge/__snapshots__/ChallengeView.spec.tsx.snap b/src/components/Challenge/__snapshots__/ChallengeView.spec.tsx.snap
index 7736d9c4a786f8ec1dd48586ae88ad01b4aefce4..3f3366ca5dc5e7798dbbe06ec4710fca25d1e5c3 100644
--- a/src/components/Challenge/__snapshots__/ChallengeView.spec.tsx.snap
+++ b/src/components/Challenge/__snapshots__/ChallengeView.spec.tsx.snap
@@ -1,1256 +1,119 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`ChallengeView component should be rendered correctly 1`] = `
-<Provider
- store={
- Object {
- "clearActions": [Function],
- "dispatch": [Function],
- "getActions": [Function],
- "getState": [Function],
- "replaceReducer": [Function],
- "subscribe": [Function],
- }
- }
->
- <ChallengeView>
- <mock-cozybar
- titleKey="common.title_challenge"
- />
- <mock-header
- desktopTitleKey="common.title_challenge"
- setHeaderHeight={[Function]}
- />
- <mock-content
- heightOffset={0}
+<div>
+ <mock-cozybar
+ titlekey="common.title_challenge"
+ />
+ <mock-header
+ desktoptitlekey="common.title_challenge"
+ />
+ <mock-content
+ heightoffset="0"
+ >
+ <div
+ class="challengeSlider"
>
<div
- className="challengeSlider"
- onClick={[Function]}
- onMouseDown={[Function]}
- onMouseMove={[Function]}
- onMouseUp={[Function]}
- onTouchEnd={[Function]}
- onTouchMove={[Function]}
- onTouchStart={[Function]}
+ class="challenge-container"
+ style="transform: translateX(-586px);"
>
- <div
- className="challenge-container"
- style={
- Object {
- "transform": "translateX(-586px)",
- }
- }
- >
- <mock-challengecard
- cardHeight={499.20000000000005}
- cardWidth={285}
- index={0}
- indexSlider={2}
- key="CHALLENGE0001"
- moveToSlide={[Function]}
- userChallenge={
- Object {
- "action": Object {
- "ecogesture": null,
- "startDate": null,
- "state": 0,
- },
- "description": "Description challenge 1",
- "duel": Object {
- "description": "Je parie un ours polaire que vous ne pouvez pas consommer moins que #CONSUMPTION € en 1 semaine",
- "duration": "P30D",
- "fluidTypes": Array [],
- "id": "DUEL001",
- "startDate": null,
- "state": 0,
- "threshold": 0,
- "title": "Title DUEL001",
- "userConsumption": 0,
- },
- "endingDate": null,
- "exploration": Object {
- "complementary_description": "Refaire un tour dans son profil si déjà fait",
- "date": null,
- "description": "Avoir complété son profil",
- "ecogesture_id": "",
- "fluid_condition": Array [],
- "id": "EXPLORATION001",
- "message_success": "Vous avez complété votre profil ou refait un tour dans votre profil",
- "progress": 0,
- "state": 0,
- "target": 1,
- "type": 1,
- },
- "id": "CHALLENGE0001",
- "progress": Object {
- "actionProgress": 0,
- "explorationProgress": 0,
- "quizProgress": 0,
- },
- "quiz": Object {
- "customQuestion": Object {
- "interval": 20,
- "period": Object {},
- "questionLabel": "Custom1",
- "result": 0,
- "singleFluid": false,
- "timeStep": 20,
- "type": 0,
- },
- "id": "QUIZ001",
- "questions": Array [
- Object {
- "answers": Array [
- Object {
- "answerLabel": "86 km",
- "isTrue": true,
- },
- Object {
- "answerLabel": "78 km",
- "isTrue": false,
- },
- Object {
- "answerLabel": "56 km",
- "isTrue": false,
- },
- ],
- "explanation": "L’aqueduc du Gier est un des aqueducs antiques de Lyon desservant la ville antique de Lugdunum. Avec ses 86 km il est le plus long des quatre aqueducs ayant alimenté la ville en eau, et celui dont les structures sont le mieux conservées. Il doit son nom au fait qu'il puise aux sources du Gier, affluent du Rhône",
- "questionLabel": "Quelle longueur faisait l’aqueduc du Gier pour acheminer l’eau sur Lyon à l’époque romaine ?",
- "result": 0,
- "source": "string",
- },
- Object {
- "answers": Array [
- Object {
- "answerLabel": "1 point d’eau public pour 800 habitants.",
- "isTrue": true,
- },
- Object {
- "answerLabel": "1 point d’eau public pour 400 habitants.",
- "isTrue": false,
- },
- Object {
- "answerLabel": "1 point d’eau public pour 200 habitants.",
- "isTrue": false,
- },
- ],
- "explanation": "string",
- "questionLabel": "En 1800 à Lyon, combien de points d'eau y avait-il par habitants ?",
- "result": 0,
- "source": "string",
- },
- Object {
- "answers": Array [
- Object {
- "answerLabel": "François Mitterrand",
- "isTrue": false,
- },
- Object {
- "answerLabel": "Napoléon Ier",
- "isTrue": true,
- },
- Object {
- "answerLabel": "Napoléon III",
- "isTrue": false,
- },
- ],
- "explanation": "string",
- "questionLabel": "Qui officialise la création de la Compagnie Générale des eaux ?",
- "result": 0,
- "source": "string",
- },
- Object {
- "answers": Array [
- Object {
- "answerLabel": "string",
- "isTrue": false,
- },
- Object {
- "answerLabel": "string",
- "isTrue": false,
- },
- Object {
- "answerLabel": "Aristide Dumont",
- "isTrue": true,
- },
- ],
- "explanation": "string",
- "questionLabel": "Quel ingénieur est à l’origine du projet d’alimentation en eau en 1856 ?",
- "result": 0,
- "source": "string",
- },
- ],
- "result": 0,
- "startDate": null,
- "state": 0,
- },
- "startDate": null,
- "state": 4,
- "success": 2,
- "target": 15,
- "title": "Challenge 1",
- }
- }
- />
- <mock-challengecard
- cardHeight={499.20000000000005}
- cardWidth={285}
- index={1}
- indexSlider={2}
- key="CHALLENGE0002"
- moveToSlide={[Function]}
- userChallenge={
- Object {
- "action": Object {
- "ecogesture": null,
- "startDate": null,
- "state": 0,
- },
- "description": "Description challenge 2",
- "duel": Object {
- "description": "Je parie un ours polaire que vous ne pouvez pas consommer moins que #CONSUMPTION € en 1 semaine",
- "duration": "P30D",
- "fluidTypes": Array [],
- "id": "DUEL001",
- "startDate": null,
- "state": 0,
- "threshold": 0,
- "title": "Title DUEL001",
- "userConsumption": 0,
- },
- "endingDate": null,
- "exploration": Object {
- "complementary_description": "Refaire un tour dans son profil si déjà fait",
- "date": null,
- "description": "Avoir complété son profil",
- "ecogesture_id": "",
- "fluid_condition": Array [],
- "id": "EXPLORATION001",
- "message_success": "Vous avez complété votre profil ou refait un tour dans votre profil",
- "progress": 0,
- "state": 0,
- "target": 1,
- "type": 1,
- },
- "id": "CHALLENGE0002",
- "progress": Object {
- "actionProgress": 0,
- "explorationProgress": 0,
- "quizProgress": 0,
- },
- "quiz": Object {
- "customQuestion": Object {
- "interval": 20,
- "period": Object {},
- "questionLabel": "Custom1",
- "result": 0,
- "singleFluid": false,
- "timeStep": 20,
- "type": 0,
- },
- "id": "QUIZ001",
- "questions": Array [
- Object {
- "answers": Array [
- Object {
- "answerLabel": "86 km",
- "isTrue": true,
- },
- Object {
- "answerLabel": "78 km",
- "isTrue": false,
- },
- Object {
- "answerLabel": "56 km",
- "isTrue": false,
- },
- ],
- "explanation": "L’aqueduc du Gier est un des aqueducs antiques de Lyon desservant la ville antique de Lugdunum. Avec ses 86 km il est le plus long des quatre aqueducs ayant alimenté la ville en eau, et celui dont les structures sont le mieux conservées. Il doit son nom au fait qu'il puise aux sources du Gier, affluent du Rhône",
- "questionLabel": "Quelle longueur faisait l’aqueduc du Gier pour acheminer l’eau sur Lyon à l’époque romaine ?",
- "result": 0,
- "source": "string",
- },
- Object {
- "answers": Array [
- Object {
- "answerLabel": "1 point d’eau public pour 800 habitants.",
- "isTrue": true,
- },
- Object {
- "answerLabel": "1 point d’eau public pour 400 habitants.",
- "isTrue": false,
- },
- Object {
- "answerLabel": "1 point d’eau public pour 200 habitants.",
- "isTrue": false,
- },
- ],
- "explanation": "string",
- "questionLabel": "En 1800 à Lyon, combien de points d'eau y avait-il par habitants ?",
- "result": 0,
- "source": "string",
- },
- Object {
- "answers": Array [
- Object {
- "answerLabel": "François Mitterrand",
- "isTrue": false,
- },
- Object {
- "answerLabel": "Napoléon Ier",
- "isTrue": true,
- },
- Object {
- "answerLabel": "Napoléon III",
- "isTrue": false,
- },
- ],
- "explanation": "string",
- "questionLabel": "Qui officialise la création de la Compagnie Générale des eaux ?",
- "result": 0,
- "source": "string",
- },
- Object {
- "answers": Array [
- Object {
- "answerLabel": "string",
- "isTrue": false,
- },
- Object {
- "answerLabel": "string",
- "isTrue": false,
- },
- Object {
- "answerLabel": "Aristide Dumont",
- "isTrue": true,
- },
- ],
- "explanation": "string",
- "questionLabel": "Quel ingénieur est à l’origine du projet d’alimentation en eau en 1856 ?",
- "result": 0,
- "source": "string",
- },
- ],
- "result": 0,
- "startDate": null,
- "state": 0,
- },
- "startDate": null,
- "state": 4,
- "success": 1,
- "target": 15,
- "title": "Challenge 2",
- }
- }
- />
- <mock-challengecard
- cardHeight={499.20000000000005}
- cardWidth={285}
- index={2}
- indexSlider={2}
- key="CHALLENGE0003"
- moveToSlide={[Function]}
- userChallenge={
- Object {
- "action": Object {
- "ecogesture": null,
- "startDate": null,
- "state": 0,
- },
- "description": "Description challenge 3",
- "duel": Object {
- "description": "Je parie un ours polaire que vous ne pouvez pas consommer moins que #CONSUMPTION € en 1 semaine",
- "duration": "P30D",
- "fluidTypes": Array [],
- "id": "DUEL001",
- "startDate": null,
- "state": 0,
- "threshold": 0,
- "title": "Title DUEL001",
- "userConsumption": 0,
- },
- "endingDate": null,
- "exploration": Object {
- "complementary_description": "Refaire un tour dans son profil si déjà fait",
- "date": null,
- "description": "Avoir complété son profil",
- "ecogesture_id": "",
- "fluid_condition": Array [],
- "id": "EXPLORATION001",
- "message_success": "Vous avez complété votre profil ou refait un tour dans votre profil",
- "progress": 0,
- "state": 0,
- "target": 1,
- "type": 1,
- },
- "id": "CHALLENGE0003",
- "progress": Object {
- "actionProgress": 0,
- "explorationProgress": 0,
- "quizProgress": 0,
- },
- "quiz": Object {
- "customQuestion": Object {
- "interval": 20,
- "period": Object {},
- "questionLabel": "Custom1",
- "result": 0,
- "singleFluid": false,
- "timeStep": 20,
- "type": 0,
- },
- "id": "QUIZ001",
- "questions": Array [
- Object {
- "answers": Array [
- Object {
- "answerLabel": "86 km",
- "isTrue": true,
- },
- Object {
- "answerLabel": "78 km",
- "isTrue": false,
- },
- Object {
- "answerLabel": "56 km",
- "isTrue": false,
- },
- ],
- "explanation": "L’aqueduc du Gier est un des aqueducs antiques de Lyon desservant la ville antique de Lugdunum. Avec ses 86 km il est le plus long des quatre aqueducs ayant alimenté la ville en eau, et celui dont les structures sont le mieux conservées. Il doit son nom au fait qu'il puise aux sources du Gier, affluent du Rhône",
- "questionLabel": "Quelle longueur faisait l’aqueduc du Gier pour acheminer l’eau sur Lyon à l’époque romaine ?",
- "result": 0,
- "source": "string",
- },
- Object {
- "answers": Array [
- Object {
- "answerLabel": "1 point d’eau public pour 800 habitants.",
- "isTrue": true,
- },
- Object {
- "answerLabel": "1 point d’eau public pour 400 habitants.",
- "isTrue": false,
- },
- Object {
- "answerLabel": "1 point d’eau public pour 200 habitants.",
- "isTrue": false,
- },
- ],
- "explanation": "string",
- "questionLabel": "En 1800 à Lyon, combien de points d'eau y avait-il par habitants ?",
- "result": 0,
- "source": "string",
- },
- Object {
- "answers": Array [
- Object {
- "answerLabel": "François Mitterrand",
- "isTrue": false,
- },
- Object {
- "answerLabel": "Napoléon Ier",
- "isTrue": true,
- },
- Object {
- "answerLabel": "Napoléon III",
- "isTrue": false,
- },
- ],
- "explanation": "string",
- "questionLabel": "Qui officialise la création de la Compagnie Générale des eaux ?",
- "result": 0,
- "source": "string",
- },
- Object {
- "answers": Array [
- Object {
- "answerLabel": "string",
- "isTrue": false,
- },
- Object {
- "answerLabel": "string",
- "isTrue": false,
- },
- Object {
- "answerLabel": "Aristide Dumont",
- "isTrue": true,
- },
- ],
- "explanation": "string",
- "questionLabel": "Quel ingénieur est à l’origine du projet d’alimentation en eau en 1856 ?",
- "result": 0,
- "source": "string",
- },
- ],
- "result": 0,
- "startDate": null,
- "state": 0,
- },
- "startDate": null,
- "state": 2,
- "success": 0,
- "target": 15,
- "title": "Challenge 3",
- }
- }
- />
- <mock-challengecard
- cardHeight={499.20000000000005}
- cardWidth={285}
- index={3}
- indexSlider={2}
- key="CHALLENGE0004"
- moveToSlide={[Function]}
- userChallenge={
- Object {
- "action": Object {
- "ecogesture": null,
- "startDate": null,
- "state": 0,
- },
- "description": "Description challenge 4",
- "duel": Object {
- "description": "Je parie un ours polaire que vous ne pouvez pas consommer moins que #CONSUMPTION € en 1 semaine",
- "duration": "P30D",
- "fluidTypes": Array [],
- "id": "DUEL001",
- "startDate": null,
- "state": 0,
- "threshold": 0,
- "title": "Title DUEL001",
- "userConsumption": 0,
- },
- "endingDate": null,
- "exploration": Object {
- "complementary_description": "Refaire un tour dans son profil si déjà fait",
- "date": null,
- "description": "Avoir complété son profil",
- "ecogesture_id": "",
- "fluid_condition": Array [],
- "id": "EXPLORATION001",
- "message_success": "Vous avez complété votre profil ou refait un tour dans votre profil",
- "progress": 0,
- "state": 0,
- "target": 1,
- "type": 1,
- },
- "id": "CHALLENGE0004",
- "progress": Object {
- "actionProgress": 0,
- "explorationProgress": 0,
- "quizProgress": 0,
- },
- "quiz": Object {
- "customQuestion": Object {
- "interval": 20,
- "period": Object {},
- "questionLabel": "Custom1",
- "result": 0,
- "singleFluid": false,
- "timeStep": 20,
- "type": 0,
- },
- "id": "QUIZ001",
- "questions": Array [
- Object {
- "answers": Array [
- Object {
- "answerLabel": "86 km",
- "isTrue": true,
- },
- Object {
- "answerLabel": "78 km",
- "isTrue": false,
- },
- Object {
- "answerLabel": "56 km",
- "isTrue": false,
- },
- ],
- "explanation": "L’aqueduc du Gier est un des aqueducs antiques de Lyon desservant la ville antique de Lugdunum. Avec ses 86 km il est le plus long des quatre aqueducs ayant alimenté la ville en eau, et celui dont les structures sont le mieux conservées. Il doit son nom au fait qu'il puise aux sources du Gier, affluent du Rhône",
- "questionLabel": "Quelle longueur faisait l’aqueduc du Gier pour acheminer l’eau sur Lyon à l’époque romaine ?",
- "result": 0,
- "source": "string",
- },
- Object {
- "answers": Array [
- Object {
- "answerLabel": "1 point d’eau public pour 800 habitants.",
- "isTrue": true,
- },
- Object {
- "answerLabel": "1 point d’eau public pour 400 habitants.",
- "isTrue": false,
- },
- Object {
- "answerLabel": "1 point d’eau public pour 200 habitants.",
- "isTrue": false,
- },
- ],
- "explanation": "string",
- "questionLabel": "En 1800 à Lyon, combien de points d'eau y avait-il par habitants ?",
- "result": 0,
- "source": "string",
- },
- Object {
- "answers": Array [
- Object {
- "answerLabel": "François Mitterrand",
- "isTrue": false,
- },
- Object {
- "answerLabel": "Napoléon Ier",
- "isTrue": true,
- },
- Object {
- "answerLabel": "Napoléon III",
- "isTrue": false,
- },
- ],
- "explanation": "string",
- "questionLabel": "Qui officialise la création de la Compagnie Générale des eaux ?",
- "result": 0,
- "source": "string",
- },
- Object {
- "answers": Array [
- Object {
- "answerLabel": "string",
- "isTrue": false,
- },
- Object {
- "answerLabel": "string",
- "isTrue": false,
- },
- Object {
- "answerLabel": "Aristide Dumont",
- "isTrue": true,
- },
- ],
- "explanation": "string",
- "questionLabel": "Quel ingénieur est à l’origine du projet d’alimentation en eau en 1856 ?",
- "result": 0,
- "source": "string",
- },
- ],
- "result": 0,
- "startDate": null,
- "state": 0,
- },
- "startDate": null,
- "state": 1,
- "success": 0,
- "target": 15,
- "title": "Challenge 4",
- }
- }
- />
- <mock-challengecard
- cardHeight={499.20000000000005}
- cardWidth={285}
- index={4}
- indexSlider={2}
- key="CHALLENGE0005"
- moveToSlide={[Function]}
- userChallenge={
- Object {
- "action": Object {
- "ecogesture": null,
- "startDate": null,
- "state": 0,
- },
- "description": "Description challenge 5",
- "duel": Object {
- "description": "Je parie un ours polaire que vous ne pouvez pas consommer moins que #CONSUMPTION € en 1 semaine",
- "duration": "P30D",
- "fluidTypes": Array [],
- "id": "DUEL001",
- "startDate": null,
- "state": 0,
- "threshold": 0,
- "title": "Title DUEL001",
- "userConsumption": 0,
- },
- "endingDate": null,
- "exploration": Object {
- "complementary_description": "Refaire un tour dans son profil si déjà fait",
- "date": null,
- "description": "Avoir complété son profil",
- "ecogesture_id": "",
- "fluid_condition": Array [],
- "id": "EXPLORATION001",
- "message_success": "Vous avez complété votre profil ou refait un tour dans votre profil",
- "progress": 0,
- "state": 0,
- "target": 1,
- "type": 1,
- },
- "id": "CHALLENGE0005",
- "progress": Object {
- "actionProgress": 0,
- "explorationProgress": 0,
- "quizProgress": 0,
- },
- "quiz": Object {
- "customQuestion": Object {
- "interval": 20,
- "period": Object {},
- "questionLabel": "Custom1",
- "result": 0,
- "singleFluid": false,
- "timeStep": 20,
- "type": 0,
- },
- "id": "QUIZ001",
- "questions": Array [
- Object {
- "answers": Array [
- Object {
- "answerLabel": "86 km",
- "isTrue": true,
- },
- Object {
- "answerLabel": "78 km",
- "isTrue": false,
- },
- Object {
- "answerLabel": "56 km",
- "isTrue": false,
- },
- ],
- "explanation": "L’aqueduc du Gier est un des aqueducs antiques de Lyon desservant la ville antique de Lugdunum. Avec ses 86 km il est le plus long des quatre aqueducs ayant alimenté la ville en eau, et celui dont les structures sont le mieux conservées. Il doit son nom au fait qu'il puise aux sources du Gier, affluent du Rhône",
- "questionLabel": "Quelle longueur faisait l’aqueduc du Gier pour acheminer l’eau sur Lyon à l’époque romaine ?",
- "result": 0,
- "source": "string",
- },
- Object {
- "answers": Array [
- Object {
- "answerLabel": "1 point d’eau public pour 800 habitants.",
- "isTrue": true,
- },
- Object {
- "answerLabel": "1 point d’eau public pour 400 habitants.",
- "isTrue": false,
- },
- Object {
- "answerLabel": "1 point d’eau public pour 200 habitants.",
- "isTrue": false,
- },
- ],
- "explanation": "string",
- "questionLabel": "En 1800 à Lyon, combien de points d'eau y avait-il par habitants ?",
- "result": 0,
- "source": "string",
- },
- Object {
- "answers": Array [
- Object {
- "answerLabel": "François Mitterrand",
- "isTrue": false,
- },
- Object {
- "answerLabel": "Napoléon Ier",
- "isTrue": true,
- },
- Object {
- "answerLabel": "Napoléon III",
- "isTrue": false,
- },
- ],
- "explanation": "string",
- "questionLabel": "Qui officialise la création de la Compagnie Générale des eaux ?",
- "result": 0,
- "source": "string",
- },
- Object {
- "answers": Array [
- Object {
- "answerLabel": "string",
- "isTrue": false,
- },
- Object {
- "answerLabel": "string",
- "isTrue": false,
- },
- Object {
- "answerLabel": "Aristide Dumont",
- "isTrue": true,
- },
- ],
- "explanation": "string",
- "questionLabel": "Quel ingénieur est à l’origine du projet d’alimentation en eau en 1856 ?",
- "result": 0,
- "source": "string",
- },
- ],
- "result": 0,
- "startDate": null,
- "state": 0,
- },
- "startDate": null,
- "state": 0,
- "success": 0,
- "target": 15,
- "title": "Challenge 5",
- }
- }
- />
- <mock-challengecard
- cardHeight={499.20000000000005}
- cardWidth={285}
- index={5}
- indexSlider={2}
- key="CHALLENGE0006"
- moveToSlide={[Function]}
- userChallenge={
- Object {
- "action": Object {
- "ecogesture": null,
- "startDate": null,
- "state": 0,
- },
- "description": "Description challenge 6",
- "duel": Object {
- "description": "Je parie un ours polaire que vous ne pouvez pas consommer moins que #CONSUMPTION € en 1 semaine",
- "duration": "P30D",
- "fluidTypes": Array [],
- "id": "DUEL001",
- "startDate": null,
- "state": 0,
- "threshold": 0,
- "title": "Title DUEL001",
- "userConsumption": 0,
- },
- "endingDate": null,
- "exploration": Object {
- "complementary_description": "Refaire un tour dans son profil si déjà fait",
- "date": null,
- "description": "Avoir complété son profil",
- "ecogesture_id": "",
- "fluid_condition": Array [],
- "id": "EXPLORATION001",
- "message_success": "Vous avez complété votre profil ou refait un tour dans votre profil",
- "progress": 0,
- "state": 0,
- "target": 1,
- "type": 1,
- },
- "id": "CHALLENGE0006",
- "progress": Object {
- "actionProgress": 0,
- "explorationProgress": 0,
- "quizProgress": 0,
- },
- "quiz": Object {
- "customQuestion": Object {
- "interval": 20,
- "period": Object {},
- "questionLabel": "Custom1",
- "result": 0,
- "singleFluid": false,
- "timeStep": 20,
- "type": 0,
- },
- "id": "QUIZ001",
- "questions": Array [
- Object {
- "answers": Array [
- Object {
- "answerLabel": "86 km",
- "isTrue": true,
- },
- Object {
- "answerLabel": "78 km",
- "isTrue": false,
- },
- Object {
- "answerLabel": "56 km",
- "isTrue": false,
- },
- ],
- "explanation": "L’aqueduc du Gier est un des aqueducs antiques de Lyon desservant la ville antique de Lugdunum. Avec ses 86 km il est le plus long des quatre aqueducs ayant alimenté la ville en eau, et celui dont les structures sont le mieux conservées. Il doit son nom au fait qu'il puise aux sources du Gier, affluent du Rhône",
- "questionLabel": "Quelle longueur faisait l’aqueduc du Gier pour acheminer l’eau sur Lyon à l’époque romaine ?",
- "result": 0,
- "source": "string",
- },
- Object {
- "answers": Array [
- Object {
- "answerLabel": "1 point d’eau public pour 800 habitants.",
- "isTrue": true,
- },
- Object {
- "answerLabel": "1 point d’eau public pour 400 habitants.",
- "isTrue": false,
- },
- Object {
- "answerLabel": "1 point d’eau public pour 200 habitants.",
- "isTrue": false,
- },
- ],
- "explanation": "string",
- "questionLabel": "En 1800 à Lyon, combien de points d'eau y avait-il par habitants ?",
- "result": 0,
- "source": "string",
- },
- Object {
- "answers": Array [
- Object {
- "answerLabel": "François Mitterrand",
- "isTrue": false,
- },
- Object {
- "answerLabel": "Napoléon Ier",
- "isTrue": true,
- },
- Object {
- "answerLabel": "Napoléon III",
- "isTrue": false,
- },
- ],
- "explanation": "string",
- "questionLabel": "Qui officialise la création de la Compagnie Générale des eaux ?",
- "result": 0,
- "source": "string",
- },
- Object {
- "answers": Array [
- Object {
- "answerLabel": "string",
- "isTrue": false,
- },
- Object {
- "answerLabel": "string",
- "isTrue": false,
- },
- Object {
- "answerLabel": "Aristide Dumont",
- "isTrue": true,
- },
- ],
- "explanation": "string",
- "questionLabel": "Quel ingénieur est à l’origine du projet d’alimentation en eau en 1856 ?",
- "result": 0,
- "source": "string",
- },
- ],
- "result": 0,
- "startDate": null,
- "state": 0,
- },
- "startDate": null,
- "state": 0,
- "success": 0,
- "target": 15,
- "title": "Challenge 6",
- }
- }
- />
- </div>
+ <mock-challengecard
+ cardheight="499.20000000000005"
+ cardwidth="285"
+ index="0"
+ indexslider="2"
+ userchallenge="[object Object]"
+ />
+ <mock-challengecard
+ cardheight="499.20000000000005"
+ cardwidth="285"
+ index="1"
+ indexslider="2"
+ userchallenge="[object Object]"
+ />
+ <mock-challengecard
+ cardheight="499.20000000000005"
+ cardwidth="285"
+ index="2"
+ indexslider="2"
+ userchallenge="[object Object]"
+ />
+ <mock-challengecard
+ cardheight="499.20000000000005"
+ cardwidth="285"
+ index="3"
+ indexslider="2"
+ userchallenge="[object Object]"
+ />
+ <mock-challengecard
+ cardheight="499.20000000000005"
+ cardwidth="285"
+ index="4"
+ indexslider="2"
+ userchallenge="[object Object]"
+ />
+ <mock-challengecard
+ cardheight="499.20000000000005"
+ cardwidth="285"
+ index="5"
+ indexslider="2"
+ userchallenge="[object Object]"
+ />
</div>
- <div
- className="sliderButtons"
+ </div>
+ <div
+ class="sliderButtons"
+ >
+ <button
+ aria-label="challenge.accessibility.button_slider_previous"
+ class="MuiButtonBase-root MuiIconButton-root WithStyles(ForwardRef(IconButton))-root-1"
+ tabindex="0"
+ type="button"
>
- <StyledIconButton
- aria-label="challenge.accessibility.button_slider_previous"
- icon="test-file-stub"
- onClick={[Function]}
- sized={16}
+ <span
+ class="MuiIconButton-label"
>
- <WithStyles(WithStyles(ForwardRef(IconButton)))
- aria-label="challenge.accessibility.button_slider_previous"
- onClick={[Function]}
+ <svg
+ aria-hidden="true"
+ class="styles__icon___23x3R"
+ height="16"
+ width="16"
>
- <WithStyles(ForwardRef(IconButton))
- aria-label="challenge.accessibility.button_slider_previous"
- classes={
- Object {
- "root": "WithStyles(ForwardRef(IconButton))-root-1",
- }
- }
- onClick={[Function]}
- >
- <ForwardRef(IconButton)
- aria-label="challenge.accessibility.button_slider_previous"
- classes={
- Object {
- "colorInherit": "MuiIconButton-colorInherit",
- "colorPrimary": "MuiIconButton-colorPrimary",
- "colorSecondary": "MuiIconButton-colorSecondary",
- "disabled": "Mui-disabled",
- "edgeEnd": "MuiIconButton-edgeEnd",
- "edgeStart": "MuiIconButton-edgeStart",
- "label": "MuiIconButton-label",
- "root": "MuiIconButton-root WithStyles(ForwardRef(IconButton))-root-1",
- "sizeSmall": "MuiIconButton-sizeSmall",
- }
- }
- onClick={[Function]}
- >
- <WithStyles(ForwardRef(ButtonBase))
- aria-label="challenge.accessibility.button_slider_previous"
- centerRipple={true}
- className="MuiIconButton-root WithStyles(ForwardRef(IconButton))-root-1"
- disabled={false}
- focusRipple={true}
- onClick={[Function]}
- >
- <ForwardRef(ButtonBase)
- aria-label="challenge.accessibility.button_slider_previous"
- centerRipple={true}
- className="MuiIconButton-root WithStyles(ForwardRef(IconButton))-root-1"
- classes={
- Object {
- "disabled": "Mui-disabled",
- "focusVisible": "Mui-focusVisible",
- "root": "MuiButtonBase-root",
- }
- }
- disabled={false}
- focusRipple={true}
- onClick={[Function]}
- >
- <button
- aria-label="challenge.accessibility.button_slider_previous"
- className="MuiButtonBase-root MuiIconButton-root WithStyles(ForwardRef(IconButton))-root-1"
- disabled={false}
- onBlur={[Function]}
- onClick={[Function]}
- onDragLeave={[Function]}
- onFocus={[Function]}
- onKeyDown={[Function]}
- onKeyUp={[Function]}
- onMouseDown={[Function]}
- onMouseLeave={[Function]}
- onMouseUp={[Function]}
- onTouchEnd={[Function]}
- onTouchMove={[Function]}
- onTouchStart={[Function]}
- tabIndex={0}
- type="button"
- >
- <span
- className="MuiIconButton-label"
- >
- <StyledIcon
- icon="test-file-stub"
- size={16}
- >
- <Icon
- aria-hidden={true}
- icon="test-file-stub"
- size={16}
- spin={false}
- >
- <Component
- aria-hidden={true}
- className="styles__icon___23x3R"
- height={16}
- style={Object {}}
- width={16}
- >
- <svg
- aria-hidden={true}
- className="styles__icon___23x3R"
- height={16}
- style={Object {}}
- width={16}
- >
- <use
- xlinkHref="#test-file-stub"
- />
- </svg>
- </Component>
- </Icon>
- </StyledIcon>
- </span>
- <WithStyles(memo)
- center={true}
- >
- <ForwardRef(TouchRipple)
- center={true}
- classes={
- Object {
- "child": "MuiTouchRipple-child",
- "childLeaving": "MuiTouchRipple-childLeaving",
- "childPulsate": "MuiTouchRipple-childPulsate",
- "ripple": "MuiTouchRipple-ripple",
- "ripplePulsate": "MuiTouchRipple-ripplePulsate",
- "rippleVisible": "MuiTouchRipple-rippleVisible",
- "root": "MuiTouchRipple-root",
- }
- }
- >
- <span
- className="MuiTouchRipple-root"
- >
- <TransitionGroup
- childFactory={[Function]}
- component={null}
- exit={true}
- />
- </span>
- </ForwardRef(TouchRipple)>
- </WithStyles(memo)>
- </button>
- </ForwardRef(ButtonBase)>
- </WithStyles(ForwardRef(ButtonBase))>
- </ForwardRef(IconButton)>
- </WithStyles(ForwardRef(IconButton))>
- </WithStyles(WithStyles(ForwardRef(IconButton)))>
- </StyledIconButton>
- <StyledIconButton
- aria-label="challenge.accessibility.button_slider_next"
- icon="test-file-stub"
- onClick={[Function]}
- sized={16}
+ <use
+ xlink:href="#test-file-stub"
+ />
+ </svg>
+ </span>
+ <span
+ class="MuiTouchRipple-root"
+ />
+ </button>
+ <button
+ aria-label="challenge.accessibility.button_slider_next"
+ class="MuiButtonBase-root MuiIconButton-root WithStyles(ForwardRef(IconButton))-root-1"
+ tabindex="0"
+ type="button"
+ >
+ <span
+ class="MuiIconButton-label"
>
- <WithStyles(WithStyles(ForwardRef(IconButton)))
- aria-label="challenge.accessibility.button_slider_next"
- onClick={[Function]}
+ <svg
+ aria-hidden="true"
+ class="styles__icon___23x3R"
+ height="16"
+ width="16"
>
- <WithStyles(ForwardRef(IconButton))
- aria-label="challenge.accessibility.button_slider_next"
- classes={
- Object {
- "root": "WithStyles(ForwardRef(IconButton))-root-1",
- }
- }
- onClick={[Function]}
- >
- <ForwardRef(IconButton)
- aria-label="challenge.accessibility.button_slider_next"
- classes={
- Object {
- "colorInherit": "MuiIconButton-colorInherit",
- "colorPrimary": "MuiIconButton-colorPrimary",
- "colorSecondary": "MuiIconButton-colorSecondary",
- "disabled": "Mui-disabled",
- "edgeEnd": "MuiIconButton-edgeEnd",
- "edgeStart": "MuiIconButton-edgeStart",
- "label": "MuiIconButton-label",
- "root": "MuiIconButton-root WithStyles(ForwardRef(IconButton))-root-1",
- "sizeSmall": "MuiIconButton-sizeSmall",
- }
- }
- onClick={[Function]}
- >
- <WithStyles(ForwardRef(ButtonBase))
- aria-label="challenge.accessibility.button_slider_next"
- centerRipple={true}
- className="MuiIconButton-root WithStyles(ForwardRef(IconButton))-root-1"
- disabled={false}
- focusRipple={true}
- onClick={[Function]}
- >
- <ForwardRef(ButtonBase)
- aria-label="challenge.accessibility.button_slider_next"
- centerRipple={true}
- className="MuiIconButton-root WithStyles(ForwardRef(IconButton))-root-1"
- classes={
- Object {
- "disabled": "Mui-disabled",
- "focusVisible": "Mui-focusVisible",
- "root": "MuiButtonBase-root",
- }
- }
- disabled={false}
- focusRipple={true}
- onClick={[Function]}
- >
- <button
- aria-label="challenge.accessibility.button_slider_next"
- className="MuiButtonBase-root MuiIconButton-root WithStyles(ForwardRef(IconButton))-root-1"
- disabled={false}
- onBlur={[Function]}
- onClick={[Function]}
- onDragLeave={[Function]}
- onFocus={[Function]}
- onKeyDown={[Function]}
- onKeyUp={[Function]}
- onMouseDown={[Function]}
- onMouseLeave={[Function]}
- onMouseUp={[Function]}
- onTouchEnd={[Function]}
- onTouchMove={[Function]}
- onTouchStart={[Function]}
- tabIndex={0}
- type="button"
- >
- <span
- className="MuiIconButton-label"
- >
- <StyledIcon
- icon="test-file-stub"
- size={16}
- >
- <Icon
- aria-hidden={true}
- icon="test-file-stub"
- size={16}
- spin={false}
- >
- <Component
- aria-hidden={true}
- className="styles__icon___23x3R"
- height={16}
- style={Object {}}
- width={16}
- >
- <svg
- aria-hidden={true}
- className="styles__icon___23x3R"
- height={16}
- style={Object {}}
- width={16}
- >
- <use
- xlinkHref="#test-file-stub"
- />
- </svg>
- </Component>
- </Icon>
- </StyledIcon>
- </span>
- <WithStyles(memo)
- center={true}
- >
- <ForwardRef(TouchRipple)
- center={true}
- classes={
- Object {
- "child": "MuiTouchRipple-child",
- "childLeaving": "MuiTouchRipple-childLeaving",
- "childPulsate": "MuiTouchRipple-childPulsate",
- "ripple": "MuiTouchRipple-ripple",
- "ripplePulsate": "MuiTouchRipple-ripplePulsate",
- "rippleVisible": "MuiTouchRipple-rippleVisible",
- "root": "MuiTouchRipple-root",
- }
- }
- >
- <span
- className="MuiTouchRipple-root"
- >
- <TransitionGroup
- childFactory={[Function]}
- component={null}
- exit={true}
- />
- </span>
- </ForwardRef(TouchRipple)>
- </WithStyles(memo)>
- </button>
- </ForwardRef(ButtonBase)>
- </WithStyles(ForwardRef(ButtonBase))>
- </ForwardRef(IconButton)>
- </WithStyles(ForwardRef(IconButton))>
- </WithStyles(WithStyles(ForwardRef(IconButton)))>
- </StyledIconButton>
- </div>
- </mock-content>
- </ChallengeView>
-</Provider>
+ <use
+ xlink:href="#test-file-stub"
+ />
+ </svg>
+ </span>
+ <span
+ class="MuiTouchRipple-root"
+ />
+ </button>
+ </div>
+ </mock-content>
+</div>
`;
diff --git a/src/components/Charts/AxisBottom.spec.tsx b/src/components/Charts/AxisBottom.spec.tsx
index c10ede15c1f41fca123b0f9e5473e1845e292fad..a0b36f53cda2b3104720409d0d954777e4b906a7 100644
--- a/src/components/Charts/AxisBottom.spec.tsx
+++ b/src/components/Charts/AxisBottom.spec.tsx
@@ -1,6 +1,6 @@
+import { render } from '@testing-library/react'
import { scaleBand, ScaleBand } from 'd3-scale'
import { TimeStep } from 'enums'
-import { mount } from 'enzyme'
import { DateTime } from 'luxon'
import React from 'react'
import { Provider } from 'react-redux'
@@ -31,68 +31,68 @@ describe('AxisBottom component test', () => {
})
it('should correctly render YEAR format of AxisBottom', () => {
- const wrapper = mount(
+ const { container } = render(
<Provider store={store}>
<svg>
<AxisBottom {...mockProps} timeStep={TimeStep.YEAR} />
</svg>
</Provider>
)
- expect(wrapper.getElement()).toMatchSnapshot()
+ expect(container).toMatchSnapshot()
})
it('should correctly render MONTH format of AxisBottom', () => {
- const wrapper = mount(
+ const { container } = render(
<Provider store={store}>
<svg>
<AxisBottom {...mockProps} timeStep={TimeStep.MONTH} />
</svg>
</Provider>
)
- expect(wrapper.getElement()).toMatchSnapshot()
+ expect(container).toMatchSnapshot()
})
it('should correctly render DAY format of AxisBottom without duel', () => {
- const wrapper = mount(
+ const { container } = render(
<Provider store={store}>
<svg>
<AxisBottom {...mockProps} timeStep={TimeStep.DAY} />
</svg>
</Provider>
)
- expect(wrapper.getElement()).toMatchSnapshot()
+ expect(container).toMatchSnapshot()
})
it('should correctly render DAY format of AxisBottom with duel', () => {
- const wrapper = mount(
+ const { container } = render(
<Provider store={store}>
<svg>
<AxisBottom {...mockProps} timeStep={TimeStep.DAY} isDuel={true} />
</svg>
</Provider>
)
- expect(wrapper.getElement()).toMatchSnapshot()
+ expect(container).toMatchSnapshot()
})
it('should correctly render WEEK format of AxisBottom', () => {
- const wrapper = mount(
+ const { container } = render(
<Provider store={store}>
<svg>
<AxisBottom {...mockProps} timeStep={TimeStep.WEEK} />
</svg>
</Provider>
)
- expect(wrapper.getElement()).toMatchSnapshot()
+ expect(container).toMatchSnapshot()
})
it('should correctly render HALF_AN_HOUR format of AxisBottom', () => {
- const wrapper = mount(
+ const { container } = render(
<Provider store={store}>
<svg>
<AxisBottom {...mockProps} timeStep={TimeStep.HALF_AN_HOUR} />
</svg>
</Provider>
)
- expect(wrapper.getElement()).toMatchSnapshot()
+ expect(container).toMatchSnapshot()
})
})
diff --git a/src/components/Charts/AxisBottom.tsx b/src/components/Charts/AxisBottom.tsx
index 66724b1de05cd7b9e818e6e51b566c6c8ed9a440..86cb03e3e4f8e3646c697cb9e396c470e02a9ee3 100644
--- a/src/components/Charts/AxisBottom.tsx
+++ b/src/components/Charts/AxisBottom.tsx
@@ -149,7 +149,7 @@ const AxisBottom = ({
>
{data.map((d, index) => (
<g
- key={index}
+ key={d.date.toISO()}
className="tick"
opacity="1"
transform={`translate(${xScale(
diff --git a/src/components/Charts/AxisRight.spec.tsx b/src/components/Charts/AxisRight.spec.tsx
index 0ff617522637e524d35052ef38840788e4c87b1e..cd7f3c94e6bfacf9578dda87ce1b12a38471c629 100644
--- a/src/components/Charts/AxisRight.spec.tsx
+++ b/src/components/Charts/AxisRight.spec.tsx
@@ -1,6 +1,6 @@
+import { render } from '@testing-library/react'
import { scaleLinear } from 'd3'
import { FluidType } from 'enums'
-import { mount } from 'enzyme'
import React from 'react'
import AxisRight from './AxisRight'
@@ -14,11 +14,11 @@ const mockProps = {
describe('AxisRight component test', () => {
it('should render correctly AxisRight', () => {
- const wrapper = mount(
+ const { container } = render(
<svg>
<AxisRight {...mockProps} />
</svg>
)
- expect(wrapper.getElement()).toMatchSnapshot()
+ expect(container).toMatchSnapshot()
})
})
diff --git a/src/components/Charts/AxisRight.tsx b/src/components/Charts/AxisRight.tsx
index d7257ec00b3f5989849258748324968c858a8e12..71b7dac5e957d07822b173b39ec51f0656aa850e 100644
--- a/src/components/Charts/AxisRight.tsx
+++ b/src/components/Charts/AxisRight.tsx
@@ -1,4 +1,5 @@
import { useI18n } from 'cozy-ui/transpiled/react/I18n'
+import { NumberValue } from 'd3'
import { axisRight } from 'd3-axis'
import { ScaleLinear } from 'd3-scale'
import { select, selectAll } from 'd3-selection'
@@ -25,10 +26,26 @@ const AxisRight = ({
const { t } = useI18n()
const fluidStyle =
fluidType === FluidType.MULTIFLUID ? 'MULTIFLUID' : FluidType[fluidType]
+ const isMultiFluid = fluidStyle !== 'MULTIFLUID'
const yAxisRef = useRef<SVGGElement>(null)
const newMarginRight =
fluidType === FluidType.MULTIFLUID ? marginRight - 10 : marginRight
+ const formatFluidValue = (value: NumberValue, unit: 'UNIT' | 'MEGAUNIT') => {
+ const fluidUnit = t(`FLUID.${fluidStyle}.${unit}`)
+ return `${value.valueOf()} ${fluidUnit}`
+ }
+
+ const formatSingleFluidValue = (value: NumberValue) => {
+ return value === 0 ? '0' : formatFluidValue(value, 'UNIT')
+ }
+
+ const formatMultiFluidValue = (value: NumberValue) => {
+ return typeof value === 'number'
+ ? formatFluidValue(value / 1000, 'MEGAUNIT')
+ : formatFluidValue(value.valueOf() / 1000, 'MEGAUNIT')
+ }
+
const drawYAxis = () => {
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
select(yAxisRef.current!).call(
@@ -37,13 +54,9 @@ const AxisRight = ({
.tickSize(-width)
.tickSizeOuter(0)
.tickFormat(d =>
- Number(d) >= 1000 && fluidStyle !== 'MULTIFLUID'
- ? typeof d === 'number'
- ? `${d / 1000} ${t(`FLUID.${fluidStyle}.MEGAUNIT`)}`
- : `${d.valueOf() / 1000} ${t(`FLUID.${fluidStyle}.MEGAUNIT`)}`
- : d === 0
- ? `${d}`
- : `${d} ${t(`FLUID.${fluidStyle}.UNIT`)}`
+ Number(d) >= 1000 && isMultiFluid
+ ? formatMultiFluidValue(d)
+ : formatSingleFluidValue(d)
)
)
selectAll('.tick text').attr('class', 'chart-ticks-y-text')
diff --git a/src/components/Charts/Bar.spec.tsx b/src/components/Charts/Bar.spec.tsx
index e1de4c716c79e7bca1c5baa56278d45bbf06960f..adb15d3502c845b9494097d54d3d5d16d6a5e585 100644
--- a/src/components/Charts/Bar.spec.tsx
+++ b/src/components/Charts/Bar.spec.tsx
@@ -1,23 +1,16 @@
-import { scaleBand, ScaleBand, scaleLinear } from 'd3'
+import { render } from '@testing-library/react'
+import { userEvent } from '@testing-library/user-event'
+import { scaleLinear } from 'd3'
import { FluidType, TimeStep } from 'enums'
-import { mount } from 'enzyme'
import { DateTime } from 'luxon'
import React from 'react'
import { Provider } from 'react-redux'
import * as chartActions from 'store/chart/chart.slice'
import { graphData } from 'tests/__mocks__/chartData.mock'
import { createMockEcolyoStore, mockGlobalState } from 'tests/__mocks__/store'
+import { mockXScale } from 'tests/__mocks__/xScale.mock'
import Bar from './Bar'
-const mockXScale: ScaleBand<string> = scaleBand()
- .domain(
- graphData.actualData.map(d =>
- d.date.toLocaleString(DateTime.DATETIME_SHORT)
- )
- )
- .range([0, 10])
- .padding(0.2)
-
const mockParam = {
index: 4,
dataload: graphData.actualData[0],
@@ -45,91 +38,91 @@ describe('Bar component test', () => {
})
it('should correctly render Multifluid Bar', () => {
- const wrapper = mount(
+ const { container } = render(
<Provider store={store}>
<svg>
<Bar {...mockParam} />
</svg>
</Provider>
)
- expect(wrapper.getElement()).toMatchSnapshot()
+ expect(container).toMatchSnapshot()
})
it('should correctly render Electricity Bar', () => {
- const wrapper = mount(
+ const { container } = render(
<Provider store={store}>
<svg>
<Bar {...mockParam} fluidType={FluidType.ELECTRICITY} />
</svg>
</Provider>
)
- expect(wrapper.getElement()).toMatchSnapshot()
+ expect(container).toMatchSnapshot()
})
it('should correctly render Water Bar', () => {
- const wrapper = mount(
+ const { container } = render(
<Provider store={store}>
<svg>
<Bar {...mockParam} fluidType={FluidType.WATER} />
</svg>
</Provider>
)
- expect(wrapper.getElement()).toMatchSnapshot()
+ expect(container).toMatchSnapshot()
})
it('should correctly render Gas Bar', () => {
- const wrapper = mount(
+ const { container } = render(
<Provider store={store}>
<svg>
<Bar {...mockParam} fluidType={FluidType.GAS} />
</svg>
</Provider>
)
- expect(wrapper.getElement()).toMatchSnapshot()
+ expect(container).toMatchSnapshot()
})
it('should correctly render Bar with showCompare', () => {
- const wrapper = mount(
+ const { container } = render(
<Provider store={store}>
<svg>
<Bar {...mockParam} compare={true} />
</svg>
</Provider>
)
- expect(wrapper.getElement()).toMatchSnapshot()
+ expect(container).toMatchSnapshot()
})
it('should correctly render Bar with isSwitching', () => {
- const wrapper = mount(
+ const { container } = render(
<Provider store={store}>
<svg>
<Bar {...mockParam} isSwitching={true} />
</svg>
</Provider>
)
- expect(wrapper.getElement()).toMatchSnapshot()
+ expect(container).toMatchSnapshot()
})
it('should correctly render Bar with isDuel', () => {
- const wrapper = mount(
+ const { container } = render(
<Provider store={store}>
<svg>
<Bar {...mockParam} isDuel={true} />
</svg>
</Provider>
)
- expect(wrapper.getElement()).toMatchSnapshot()
+ expect(container).toMatchSnapshot()
})
- it('should dispatch selected date when bar is clicked', () => {
- const wrapper = mount(
+ it('should dispatch selected date when bar is clicked', async () => {
+ const { container } = render(
<Provider store={store}>
<svg>
<Bar {...mockParam} />
</svg>
</Provider>
)
- wrapper.find('rect').first().simulate('click')
+ await userEvent.click(container.querySelector('rect') as Element)
expect(setSelectedDateSpy).toHaveBeenCalledTimes(1)
expect(setSelectedDateSpy).toHaveBeenCalledWith(
graphData.actualData[0].date
diff --git a/src/components/Charts/Bar.tsx b/src/components/Charts/Bar.tsx
index d0ccd177170d02496e14e84a7c5f146569861175..45a4b36c61b54eda6fdbafcb9242a822bab3f0c1 100644
--- a/src/components/Charts/Bar.tsx
+++ b/src/components/Charts/Bar.tsx
@@ -58,6 +58,7 @@ const Bar = ({
const fluidStyle =
fluidType === FluidType.MULTIFLUID ? 'MULTIFLUID' : FluidType[fluidType]
+ const isMulti = fluidType === FluidType.MULTIFLUID
const handleClick = () => {
if (!isSwitching && !isDuel && clickable) {
@@ -76,14 +77,32 @@ const Bar = ({
setCompareAnimationEnded(true)
}
+ /** Get date of each fluid to display placeholder bar for multifluid */
+ const lastDataDates = fluidStatus.map(
+ fluid => fluid.lastDataDate ?? DateTime.local(0)
+ )
+ const lastDataDate = isMulti
+ ? DateTime.max(...lastDataDates)
+ : lastDataDates[fluidType]
+
+ const dataMissingUpcoming = Boolean(
+ dataload.date > lastDataDate && dataload.date < DateTime.local()
+ )
+
let value = dataload.value
- /**
- * Use 10% of average as the placeholder if average is above 1,
- * otherwise use a minimum of 1 as the placeholder.
- */
- if (value === -1 && average) {
- value = average > 1 ? average * 0.1 : 1
+
+ /** Adjust value for upcoming data (placeholder bars) */
+ if (dataMissingUpcoming && average) {
+ if (average > 1) {
+ // Use 10% of average if average is above 1
+ value = average * 0.1
+ } else if (average < 1) {
+ value = 0.2
+ } else {
+ value = average
+ }
}
+
const yScaleValue = yScale(value) ?? 0
const yScaleCompareValue = yScale(compareDataload?.value ?? 0) ?? 0
@@ -130,15 +149,6 @@ const Bar = ({
return compare ? xScale.bandwidth() / 2 : xScale.bandwidth()
}
- const lastDataDate =
- fluidType !== FluidType.MULTIFLUID && fluidStatus[fluidType].lastDataDate
-
- const dataMissingUpcoming = Boolean(
- lastDataDate &&
- dataload.date > lastDataDate &&
- dataload.date < DateTime.local()
- )
-
const topRoundedRect = (
x: number,
y: number,
@@ -208,7 +218,7 @@ const Bar = ({
/>
</g>
)}
- {/* hashed bars */}
+ {/* hashed or filled bars */}
{height > 0 && dataload.value >= 0 && isMultiMissingFluid ? (
<g
transform={`translate(${xScaleValue}, ${yScaleValue})`}
diff --git a/src/components/Charts/BarChart.spec.tsx b/src/components/Charts/BarChart.spec.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..49177db68e7e4c4cd4283af85d475a5a67ea96f3
--- /dev/null
+++ b/src/components/Charts/BarChart.spec.tsx
@@ -0,0 +1,33 @@
+import { render } from '@testing-library/react'
+import { FluidType, TimeStep } from 'enums'
+import { DateTime } from 'luxon'
+import React from 'react'
+import { Provider } from 'react-redux'
+import { graphData } from 'tests/__mocks__/chartData.mock'
+import { createMockEcolyoStore, mockGlobalState } from 'tests/__mocks__/store'
+import BarChart from './BarChart'
+
+describe('BarChart component', () => {
+ const store = createMockEcolyoStore({
+ chart: {
+ selectedDate: DateTime.fromISO('2020-10-01T00:00:00.000Z', {
+ zone: 'utc',
+ }),
+ },
+ global: mockGlobalState,
+ })
+ it('should render correctly', () => {
+ const { container } = render(
+ <Provider store={store}>
+ <BarChart
+ chartData={graphData}
+ fluidType={FluidType.ELECTRICITY}
+ isSwitching={false}
+ showCompare={false}
+ timeStep={TimeStep.MONTH}
+ />
+ </Provider>
+ )
+ expect(container).toMatchSnapshot()
+ })
+})
diff --git a/src/components/Charts/BarChart.tsx b/src/components/Charts/BarChart.tsx
index bc3e796cc49aad8a4b842e4bc45c5abc4dcdab0a..658f78036c58b91f7e8477d8ad4f2fd46c11642b 100644
--- a/src/components/Charts/BarChart.tsx
+++ b/src/components/Charts/BarChart.tsx
@@ -78,7 +78,7 @@ const BarChart = ({
.range([getContentHeight(), 0])
const sum = chartData.actualData.reduce((a, b) => a + b.value, 0)
- const averageConsumption = sum / chartData.actualData.length
+ const averageConsumption = Math.abs(sum / chartData.actualData.length)
return (
<svg width={width} height={height}>
diff --git a/src/components/Charts/UncomingBar.spec.tsx b/src/components/Charts/UncomingBar.spec.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..30f5cb0cc48a9a054940be9528373826093c53b8
--- /dev/null
+++ b/src/components/Charts/UncomingBar.spec.tsx
@@ -0,0 +1,24 @@
+import { render } from '@testing-library/react'
+import { scaleLinear } from 'd3'
+import React from 'react'
+import { dataLoadArray } from 'tests/__mocks__/chartData.mock'
+import { mockXScale } from 'tests/__mocks__/xScale.mock'
+import UncomingBar from './UncomingBar'
+
+describe('Uncoming component', () => {
+ it('should match snapshot', () => {
+ const { container } = render(
+ <svg>
+ <UncomingBar
+ index={0}
+ average={10}
+ dataload={dataLoadArray[0]}
+ height={50}
+ xScale={mockXScale}
+ yScale={scaleLinear()}
+ />
+ </svg>
+ )
+ expect(container).toMatchSnapshot()
+ })
+})
diff --git a/src/components/Charts/UncomingBar.tsx b/src/components/Charts/UncomingBar.tsx
index 7f0380b878bdfcfd61fdbfc062d1fb5f15589860..32dcb3c1544e50f9764f8ac90f9ed4632136451e 100644
--- a/src/components/Charts/UncomingBar.tsx
+++ b/src/components/Charts/UncomingBar.tsx
@@ -27,15 +27,12 @@ const UncomingBar = ({
setAnimationEnded(true)
}
- const barClass = `bar-UNCOMING ${
- animationEnded
- ? ''
- : `bounce-${browser?.name !== 'edge' ? '1' : '3'} delay--${index % 13}`
- }`
-
- const getBandWidth = (): number => {
- return xScale.bandwidth()
+ let animationClass = ''
+ if (!animationEnded) {
+ animationClass = browser?.name !== 'edge' ? 'bounce-1' : 'bounce-3'
+ animationClass += ` delay--${index % 13}`
}
+ const barClass = `bar-UNCOMING ${animationClass}`
const topRoundedRectDashedLine = (
x: number,
@@ -85,7 +82,7 @@ const UncomingBar = ({
<rect
x="0"
y="0"
- width={getBandWidth()}
+ width={xScale.bandwidth()}
height={height + 40}
className="background-false"
fill="#E0E0E0"
@@ -102,7 +99,7 @@ const UncomingBar = ({
d={topRoundedRectDashedLine(
0,
0,
- getBandWidth(),
+ xScale.bandwidth(),
height - yScale(average)
)}
fill="url(#gradient)"
diff --git a/src/components/Charts/__snapshots__/AxisBottom.spec.tsx.snap b/src/components/Charts/__snapshots__/AxisBottom.spec.tsx.snap
index 08178300f2b50684d832be691757d305c1ecb88d..f468fcd4dbd5c46e5528dbf9e34a4a8e16e8a4a3 100644
--- a/src/components/Charts/__snapshots__/AxisBottom.spec.tsx.snap
+++ b/src/components/Charts/__snapshots__/AxisBottom.spec.tsx.snap
@@ -1,440 +1,404 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`AxisBottom component test should correctly render DAY format of AxisBottom with duel 1`] = `
-<Provider
- store={
- Object {
- "clearActions": [Function],
- "dispatch": [Function],
- "getActions": [Function],
- "getState": [Function],
- "replaceReducer": [Function],
- "subscribe": [Function],
- }
- }
->
+<div>
<svg>
- <AxisBottom
- data={
- Array [
- Object {
- "date": "2020-10-01T00:00:00.000Z",
- "state": "AGGREGATED_VALID",
- "value": 69.18029999999999,
- "valueDetail": Array [
- Object {
- "state": "VALID",
- "value": 45.127739999999996,
- },
- Object {
- "state": "VALID",
- "value": 0.9048899999999999,
- },
- Object {
- "state": "VALID",
- "value": 23.147669999999998,
- },
- ],
- },
- Object {
- "date": "2020-10-02T00:00:00.000Z",
- "state": "AGGREGATED_VALID",
- "value": 61.65554999999999,
- "valueDetail": Array [
- Object {
- "state": "VALID",
- "value": 40.21918999999999,
- },
- Object {
- "state": "VALID",
- "value": 0.8064649999999999,
- },
- Object {
- "state": "VALID",
- "value": 20.629894999999998,
- },
- ],
- },
- Object {
- "date": "2020-10-03T00:00:00.000Z",
- "state": "EMPTY",
- "value": -1,
- "valueDetail": null,
- },
- ]
- }
- height={20}
- isDuel={true}
- marginBottom={10}
- marginLeft={10}
- timeStep={20}
- xScale={[Function]}
- />
+ <g
+ class="axis x"
+ transform="translate(10, 10)"
+ >
+ <g
+ class="tick"
+ opacity="1"
+ transform="translate(undefined, 0)"
+ >
+ <text
+ dy="0.71em"
+ transform="translate(18.181818181818183)"
+ y="10"
+ >
+ <tspan
+ class="tick-text tick-text-selected chart-ticks-x-text"
+ text-anchor="middle"
+ x="0"
+ >
+ T
+ </tspan>
+ <tspan
+ class="tick-text tick-text-selected chart-ticks-x-text"
+ dy="1.2em"
+ text-anchor="middle"
+ x="0"
+ >
+ 1
+ </tspan>
+ </text>
+ </g>
+ <g
+ class="tick"
+ opacity="1"
+ transform="translate(undefined, 0)"
+ >
+ <text
+ dy="0.71em"
+ transform="translate(18.181818181818183)"
+ y="10"
+ >
+ <tspan
+ class="tick-text chart-ticks-x-text"
+ text-anchor="middle"
+ x="0"
+ >
+ F
+ </tspan>
+ <tspan
+ class="tick-text chart-ticks-x-text"
+ dy="1.2em"
+ text-anchor="middle"
+ x="0"
+ >
+ 2
+ </tspan>
+ </text>
+ </g>
+ <g
+ class="tick"
+ opacity="1"
+ transform="translate(undefined, 0)"
+ >
+ <text
+ dy="0.71em"
+ transform="translate(18.181818181818183)"
+ y="10"
+ >
+ <tspan
+ class="tick-text chart-ticks-x-text"
+ text-anchor="middle"
+ x="0"
+ >
+ S
+ </tspan>
+ <tspan
+ class="tick-text chart-ticks-x-text"
+ dy="1.2em"
+ text-anchor="middle"
+ x="0"
+ >
+ 3
+ </tspan>
+ </text>
+ </g>
+ </g>
</svg>
-</Provider>
+</div>
`;
exports[`AxisBottom component test should correctly render DAY format of AxisBottom without duel 1`] = `
-<Provider
- store={
- Object {
- "clearActions": [Function],
- "dispatch": [Function],
- "getActions": [Function],
- "getState": [Function],
- "replaceReducer": [Function],
- "subscribe": [Function],
- }
- }
->
+<div>
<svg>
- <AxisBottom
- data={
- Array [
- Object {
- "date": "2020-10-01T00:00:00.000Z",
- "state": "AGGREGATED_VALID",
- "value": 69.18029999999999,
- "valueDetail": Array [
- Object {
- "state": "VALID",
- "value": 45.127739999999996,
- },
- Object {
- "state": "VALID",
- "value": 0.9048899999999999,
- },
- Object {
- "state": "VALID",
- "value": 23.147669999999998,
- },
- ],
- },
- Object {
- "date": "2020-10-02T00:00:00.000Z",
- "state": "AGGREGATED_VALID",
- "value": 61.65554999999999,
- "valueDetail": Array [
- Object {
- "state": "VALID",
- "value": 40.21918999999999,
- },
- Object {
- "state": "VALID",
- "value": 0.8064649999999999,
- },
- Object {
- "state": "VALID",
- "value": 20.629894999999998,
- },
- ],
- },
- Object {
- "date": "2020-10-03T00:00:00.000Z",
- "state": "EMPTY",
- "value": -1,
- "valueDetail": null,
- },
- ]
- }
- height={20}
- marginBottom={10}
- marginLeft={10}
- timeStep={20}
- xScale={[Function]}
- />
+ <g
+ class="axis x"
+ transform="translate(10, 10)"
+ >
+ <g
+ class="tick"
+ opacity="1"
+ transform="translate(undefined, 0)"
+ >
+ <text
+ dy="0.71em"
+ transform="translate(18.181818181818183)"
+ y="10"
+ />
+ </g>
+ <g
+ class="tick"
+ opacity="1"
+ transform="translate(undefined, 0)"
+ >
+ <text
+ dy="0.71em"
+ transform="translate(18.181818181818183)"
+ y="10"
+ />
+ </g>
+ <g
+ class="tick"
+ opacity="1"
+ transform="translate(undefined, 0)"
+ >
+ <text
+ dy="0.71em"
+ transform="translate(18.181818181818183)"
+ y="10"
+ />
+ </g>
+ </g>
</svg>
-</Provider>
+</div>
`;
exports[`AxisBottom component test should correctly render HALF_AN_HOUR format of AxisBottom 1`] = `
-<Provider
- store={
- Object {
- "clearActions": [Function],
- "dispatch": [Function],
- "getActions": [Function],
- "getState": [Function],
- "replaceReducer": [Function],
- "subscribe": [Function],
- }
- }
->
+<div>
<svg>
- <AxisBottom
- data={
- Array [
- Object {
- "date": "2020-10-01T00:00:00.000Z",
- "state": "AGGREGATED_VALID",
- "value": 69.18029999999999,
- "valueDetail": Array [
- Object {
- "state": "VALID",
- "value": 45.127739999999996,
- },
- Object {
- "state": "VALID",
- "value": 0.9048899999999999,
- },
- Object {
- "state": "VALID",
- "value": 23.147669999999998,
- },
- ],
- },
- Object {
- "date": "2020-10-02T00:00:00.000Z",
- "state": "AGGREGATED_VALID",
- "value": 61.65554999999999,
- "valueDetail": Array [
- Object {
- "state": "VALID",
- "value": 40.21918999999999,
- },
- Object {
- "state": "VALID",
- "value": 0.8064649999999999,
- },
- Object {
- "state": "VALID",
- "value": 20.629894999999998,
- },
- ],
- },
- Object {
- "date": "2020-10-03T00:00:00.000Z",
- "state": "EMPTY",
- "value": -1,
- "valueDetail": null,
- },
- ]
- }
- height={20}
- marginBottom={10}
- marginLeft={10}
- timeStep={10}
- xScale={[Function]}
- />
+ <g
+ class="axis x"
+ transform="translate(10, 10)"
+ >
+ <g
+ class="tick"
+ opacity="1"
+ transform="translate(undefined, 0)"
+ >
+ <text
+ dy="0.71em"
+ x="18.181818181818183"
+ y="10"
+ >
+ <tspan
+ class="tick-text tick-text-selected chart-ticks-x-text"
+ text-anchor="middle"
+ >
+ 0
+ </tspan>
+ </text>
+ </g>
+ <g
+ class="tick"
+ opacity="1"
+ transform="translate(undefined, 0)"
+ />
+ <g
+ class="tick"
+ opacity="1"
+ transform="translate(undefined, 0)"
+ />
+ </g>
</svg>
-</Provider>
+</div>
`;
exports[`AxisBottom component test should correctly render MONTH format of AxisBottom 1`] = `
-<Provider
- store={
- Object {
- "clearActions": [Function],
- "dispatch": [Function],
- "getActions": [Function],
- "getState": [Function],
- "replaceReducer": [Function],
- "subscribe": [Function],
- }
- }
->
+<div>
<svg>
- <AxisBottom
- data={
- Array [
- Object {
- "date": "2020-10-01T00:00:00.000Z",
- "state": "AGGREGATED_VALID",
- "value": 69.18029999999999,
- "valueDetail": Array [
- Object {
- "state": "VALID",
- "value": 45.127739999999996,
- },
- Object {
- "state": "VALID",
- "value": 0.9048899999999999,
- },
- Object {
- "state": "VALID",
- "value": 23.147669999999998,
- },
- ],
- },
- Object {
- "date": "2020-10-02T00:00:00.000Z",
- "state": "AGGREGATED_VALID",
- "value": 61.65554999999999,
- "valueDetail": Array [
- Object {
- "state": "VALID",
- "value": 40.21918999999999,
- },
- Object {
- "state": "VALID",
- "value": 0.8064649999999999,
- },
- Object {
- "state": "VALID",
- "value": 20.629894999999998,
- },
- ],
- },
- Object {
- "date": "2020-10-03T00:00:00.000Z",
- "state": "EMPTY",
- "value": -1,
- "valueDetail": null,
- },
- ]
- }
- height={20}
- marginBottom={10}
- marginLeft={10}
- timeStep={40}
- xScale={[Function]}
- />
+ <g
+ class="axis x"
+ transform="translate(10, 10)"
+ >
+ <g
+ class="tick"
+ opacity="1"
+ transform="translate(undefined, 0)"
+ >
+ <text
+ dy="0.71em"
+ transform="translate(18.181818181818183)"
+ y="10"
+ >
+ <tspan
+ class="tick-text tick-text-selected chart-ticks-x-text"
+ text-anchor="middle"
+ >
+ O
+ </tspan>
+ </text>
+ </g>
+ <g
+ class="tick"
+ opacity="1"
+ transform="translate(undefined, 0)"
+ >
+ <text
+ dy="0.71em"
+ transform="translate(18.181818181818183)"
+ y="10"
+ >
+ <tspan
+ class="tick-text tick-text-selected chart-ticks-x-text"
+ text-anchor="middle"
+ >
+ O
+ </tspan>
+ </text>
+ </g>
+ <g
+ class="tick"
+ opacity="1"
+ transform="translate(undefined, 0)"
+ >
+ <text
+ dy="0.71em"
+ transform="translate(18.181818181818183)"
+ y="10"
+ >
+ <tspan
+ class="tick-text tick-text-selected chart-ticks-x-text"
+ text-anchor="middle"
+ >
+ O
+ </tspan>
+ </text>
+ </g>
+ </g>
</svg>
-</Provider>
+</div>
`;
exports[`AxisBottom component test should correctly render WEEK format of AxisBottom 1`] = `
-<Provider
- store={
- Object {
- "clearActions": [Function],
- "dispatch": [Function],
- "getActions": [Function],
- "getState": [Function],
- "replaceReducer": [Function],
- "subscribe": [Function],
- }
- }
->
+<div>
<svg>
- <AxisBottom
- data={
- Array [
- Object {
- "date": "2020-10-01T00:00:00.000Z",
- "state": "AGGREGATED_VALID",
- "value": 69.18029999999999,
- "valueDetail": Array [
- Object {
- "state": "VALID",
- "value": 45.127739999999996,
- },
- Object {
- "state": "VALID",
- "value": 0.9048899999999999,
- },
- Object {
- "state": "VALID",
- "value": 23.147669999999998,
- },
- ],
- },
- Object {
- "date": "2020-10-02T00:00:00.000Z",
- "state": "AGGREGATED_VALID",
- "value": 61.65554999999999,
- "valueDetail": Array [
- Object {
- "state": "VALID",
- "value": 40.21918999999999,
- },
- Object {
- "state": "VALID",
- "value": 0.8064649999999999,
- },
- Object {
- "state": "VALID",
- "value": 20.629894999999998,
- },
- ],
- },
- Object {
- "date": "2020-10-03T00:00:00.000Z",
- "state": "EMPTY",
- "value": -1,
- "valueDetail": null,
- },
- ]
- }
- height={20}
- marginBottom={10}
- marginLeft={10}
- timeStep={30}
- xScale={[Function]}
- />
+ <g
+ class="axis x"
+ transform="translate(10, 10)"
+ >
+ <g
+ class="tick"
+ opacity="1"
+ transform="translate(undefined, 0)"
+ >
+ <text
+ dy="0.71em"
+ transform="translate(18.181818181818183)"
+ y="10"
+ >
+ <tspan
+ class="tick-text tick-text-selected chart-ticks-x-text"
+ text-anchor="middle"
+ x="0"
+ >
+ T
+ </tspan>
+ <tspan
+ class="tick-text tick-text-selected chart-ticks-x-text"
+ dy="1.2em"
+ text-anchor="middle"
+ x="0"
+ >
+ 1
+ </tspan>
+ </text>
+ </g>
+ <g
+ class="tick"
+ opacity="1"
+ transform="translate(undefined, 0)"
+ >
+ <text
+ dy="0.71em"
+ transform="translate(18.181818181818183)"
+ y="10"
+ >
+ <tspan
+ class="tick-text chart-ticks-x-text"
+ text-anchor="middle"
+ x="0"
+ >
+ F
+ </tspan>
+ <tspan
+ class="tick-text chart-ticks-x-text"
+ dy="1.2em"
+ text-anchor="middle"
+ x="0"
+ >
+ 2
+ </tspan>
+ </text>
+ </g>
+ <g
+ class="tick"
+ opacity="1"
+ transform="translate(undefined, 0)"
+ >
+ <text
+ dy="0.71em"
+ transform="translate(18.181818181818183)"
+ y="10"
+ >
+ <tspan
+ class="tick-text chart-ticks-x-text"
+ text-anchor="middle"
+ x="0"
+ >
+ S
+ </tspan>
+ <tspan
+ class="tick-text chart-ticks-x-text"
+ dy="1.2em"
+ text-anchor="middle"
+ x="0"
+ >
+ 3
+ </tspan>
+ </text>
+ </g>
+ </g>
</svg>
-</Provider>
+</div>
`;
exports[`AxisBottom component test should correctly render YEAR format of AxisBottom 1`] = `
-<Provider
- store={
- Object {
- "clearActions": [Function],
- "dispatch": [Function],
- "getActions": [Function],
- "getState": [Function],
- "replaceReducer": [Function],
- "subscribe": [Function],
- }
- }
->
+<div>
<svg>
- <AxisBottom
- data={
- Array [
- Object {
- "date": "2020-10-01T00:00:00.000Z",
- "state": "AGGREGATED_VALID",
- "value": 69.18029999999999,
- "valueDetail": Array [
- Object {
- "state": "VALID",
- "value": 45.127739999999996,
- },
- Object {
- "state": "VALID",
- "value": 0.9048899999999999,
- },
- Object {
- "state": "VALID",
- "value": 23.147669999999998,
- },
- ],
- },
- Object {
- "date": "2020-10-02T00:00:00.000Z",
- "state": "AGGREGATED_VALID",
- "value": 61.65554999999999,
- "valueDetail": Array [
- Object {
- "state": "VALID",
- "value": 40.21918999999999,
- },
- Object {
- "state": "VALID",
- "value": 0.8064649999999999,
- },
- Object {
- "state": "VALID",
- "value": 20.629894999999998,
- },
- ],
- },
- Object {
- "date": "2020-10-03T00:00:00.000Z",
- "state": "EMPTY",
- "value": -1,
- "valueDetail": null,
- },
- ]
- }
- height={20}
- marginBottom={10}
- marginLeft={10}
- timeStep={50}
- xScale={[Function]}
- />
+ <g
+ class="axis x"
+ transform="translate(10, 10)"
+ >
+ <g
+ class="tick"
+ opacity="1"
+ transform="translate(undefined, 0)"
+ >
+ <text
+ dy="0.71em"
+ transform="translate(18.181818181818183)"
+ y="10"
+ >
+ <tspan
+ class="tick-text tick-text-selected chart-ticks-x-text"
+ text-anchor="middle"
+ >
+ 2020
+ </tspan>
+ </text>
+ </g>
+ <g
+ class="tick"
+ opacity="1"
+ transform="translate(undefined, 0)"
+ >
+ <text
+ dy="0.71em"
+ transform="translate(18.181818181818183)"
+ y="10"
+ >
+ <tspan
+ class="tick-text tick-text-selected chart-ticks-x-text"
+ text-anchor="middle"
+ >
+ 2020
+ </tspan>
+ </text>
+ </g>
+ <g
+ class="tick"
+ opacity="1"
+ transform="translate(undefined, 0)"
+ >
+ <text
+ dy="0.71em"
+ transform="translate(18.181818181818183)"
+ y="10"
+ >
+ <tspan
+ class="tick-text tick-text-selected chart-ticks-x-text"
+ text-anchor="middle"
+ >
+ 2020
+ </tspan>
+ </text>
+ </g>
+ </g>
</svg>
-</Provider>
+</div>
`;
diff --git a/src/components/Charts/__snapshots__/AxisRight.spec.tsx.snap b/src/components/Charts/__snapshots__/AxisRight.spec.tsx.snap
index 0bca2ffa079cd30e5b5b55b31aabb0ff8de82467..0c40c3183cfaf98fdc66ea4e37734b429b5f74e1 100644
--- a/src/components/Charts/__snapshots__/AxisRight.spec.tsx.snap
+++ b/src/components/Charts/__snapshots__/AxisRight.spec.tsx.snap
@@ -1,13 +1,125 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`AxisRight component test should render correctly AxisRight 1`] = `
-<svg>
- <AxisRight
- fluidType={0}
- marginRight={5}
- marginTop={5}
- width={40}
- yScale={[Function]}
- />
-</svg>
+<div>
+ <svg>
+ <g
+ class="axis y"
+ fill="none"
+ font-family="sans-serif"
+ font-size="10"
+ text-anchor="start"
+ transform="translate(35, 5)"
+ >
+ <g
+ class="tick"
+ opacity="1"
+ transform="translate(0,0.5)"
+ >
+ <line
+ stroke="currentColor"
+ x2="-40"
+ />
+ <text
+ class="chart-ticks-y-text"
+ dy="0.32em"
+ fill="currentColor"
+ x="3"
+ >
+ 0
+ </text>
+ </g>
+ <g
+ class="tick"
+ opacity="1"
+ transform="translate(0,0.7)"
+ >
+ <line
+ stroke="currentColor"
+ x2="-40"
+ />
+ <text
+ class="chart-ticks-y-text"
+ dy="0.32em"
+ fill="currentColor"
+ x="3"
+ >
+ 0.2 FLUID.ELECTRICITY.UNIT
+ </text>
+ </g>
+ <g
+ class="tick"
+ opacity="1"
+ transform="translate(0,0.9)"
+ >
+ <line
+ stroke="currentColor"
+ x2="-40"
+ />
+ <text
+ class="chart-ticks-y-text"
+ dy="0.32em"
+ fill="currentColor"
+ x="3"
+ >
+ 0.4 FLUID.ELECTRICITY.UNIT
+ </text>
+ </g>
+ <g
+ class="tick"
+ opacity="1"
+ transform="translate(0,1.1)"
+ >
+ <line
+ stroke="currentColor"
+ x2="-40"
+ />
+ <text
+ class="chart-ticks-y-text"
+ dy="0.32em"
+ fill="currentColor"
+ x="3"
+ >
+ 0.6 FLUID.ELECTRICITY.UNIT
+ </text>
+ </g>
+ <g
+ class="tick"
+ opacity="1"
+ transform="translate(0,1.3)"
+ >
+ <line
+ stroke="currentColor"
+ x2="-40"
+ />
+ <text
+ class="chart-ticks-y-text"
+ dy="0.32em"
+ fill="currentColor"
+ x="3"
+ >
+ 0.8 FLUID.ELECTRICITY.UNIT
+ </text>
+ </g>
+ <g
+ class="tick"
+ opacity="1"
+ transform="translate(0,1.5)"
+ >
+ <line
+ stroke="currentColor"
+ x2="-40"
+ />
+ <text
+ class="chart-ticks-y-text"
+ dy="0.32em"
+ fill="currentColor"
+ x="3"
+ >
+ 1 FLUID.ELECTRICITY.UNIT
+ </text>
+ </g>
+ </g>
+ </svg>
+</div>
`;
diff --git a/src/components/Charts/__snapshots__/Bar.spec.tsx.snap b/src/components/Charts/__snapshots__/Bar.spec.tsx.snap
index 69202aa01e7422d77f93202e20ff8d9c6f6dfb0f..e3916b074b4eaaf5f36842494457fd46f1c40607 100644
--- a/src/components/Charts/__snapshots__/Bar.spec.tsx.snap
+++ b/src/components/Charts/__snapshots__/Bar.spec.tsx.snap
@@ -1,498 +1,665 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Bar component test should correctly render Bar with isDuel 1`] = `
-<Provider
- store={
- Object {
- "clearActions": [Function],
- "dispatch": [Function],
- "getActions": [Function],
- "getState": [Function],
- "replaceReducer": [Function],
- "subscribe": [Function],
- }
- }
->
+<div>
<svg>
- <Bar
- compare={false}
- compareDataload={
- Object {
- "date": "2020-10-02T00:00:00.000Z",
- "state": "AGGREGATED_VALID",
- "value": 61.65554999999999,
- "valueDetail": Array [
- Object {
- "state": "VALID",
- "value": 40.21918999999999,
- },
- Object {
- "state": "VALID",
- "value": 0.8064649999999999,
- },
- Object {
- "state": "VALID",
- "value": 20.629894999999998,
- },
- ],
- }
- }
- dataload={
- Object {
- "date": "2020-10-01T00:00:00.000Z",
- "state": "AGGREGATED_VALID",
- "value": 69.18029999999999,
- "valueDetail": Array [
- Object {
- "state": "VALID",
- "value": 45.127739999999996,
- },
- Object {
- "state": "VALID",
- "value": 0.9048899999999999,
- },
- Object {
- "state": "VALID",
- "value": 23.147669999999998,
- },
- ],
- }
- }
- fluidType={3}
- height={20}
- index={4}
- isDuel={true}
- isSwitching={false}
- timeStep={20}
- xScale={[Function]}
- yScale={[Function]}
- />
+ <g>
+ <g
+ class="barContainer "
+ transform="translate(0.625, -40)"
+ >
+ <rect
+ class="background-false"
+ fill="#E0E0E0"
+ height="60"
+ width="2.5000000000000004"
+ x="0"
+ y="0"
+ />
+ </g>
+ <g
+ class="barFill"
+ transform="translate(0.625, 69.18029999999999)"
+ >
+ <defs>
+ <lineargradient
+ id="gradient"
+ x1="0"
+ x2="0"
+ y1="0"
+ y2="1"
+ >
+ <stop
+ id="stop-color-1"
+ offset="0%"
+ />
+ <stop
+ id="stop-color-2"
+ offset="100%"
+ />
+ </lineargradient>
+ </defs>
+ <path
+ class="bar-MULTIFLUID undefined bounce-3 delay--4"
+ d="
+ M0,-12.295074999999997
+ a-12.295074999999997,-12.295074999999997 0 0 1 -12.295074999999997,12.295074999999997
+ h27.090149999999994
+ a-12.295074999999997,-12.295074999999997 0 0 1 -12.295074999999997,-12.295074999999997
+ v-36.88522499999999
+ h-2.5000000000000004
+ z"
+ />
+ </g>
+ <g
+ transform="translate(0.625, 69.18029999999999)"
+ >
+ <defs>
+ <lineargradient
+ class="bar-MULTIFLUID undefined bounce-3 delay--4"
+ id="gradient"
+ x1="0"
+ x2="0"
+ y1="0"
+ y2="1"
+ >
+ <stop
+ id="stop-color-1"
+ offset="0%"
+ />
+ <stop
+ id="stop-color-2"
+ offset="100%"
+ />
+ </lineargradient>
+ </defs>
+ <path
+ class="bar-duel"
+ d="
+ M0,-12.295074999999997
+ a-12.295074999999997,-12.295074999999997 0 0 1 -12.295074999999997,12.295074999999997
+ h27.090149999999994
+ a-12.295074999999997,-12.295074999999997 0 0 1 -12.295074999999997,-12.295074999999997
+ v-36.88522499999999
+ h-2.5000000000000004
+ z"
+ />
+ </g>
+ </g>
</svg>
-</Provider>
+</div>
`;
exports[`Bar component test should correctly render Bar with isSwitching 1`] = `
-<Provider
- store={
- Object {
- "clearActions": [Function],
- "dispatch": [Function],
- "getActions": [Function],
- "getState": [Function],
- "replaceReducer": [Function],
- "subscribe": [Function],
- }
- }
->
+<div>
<svg>
- <Bar
- compare={false}
- compareDataload={
- Object {
- "date": "2020-10-02T00:00:00.000Z",
- "state": "AGGREGATED_VALID",
- "value": 61.65554999999999,
- "valueDetail": Array [
- Object {
- "state": "VALID",
- "value": 40.21918999999999,
- },
- Object {
- "state": "VALID",
- "value": 0.8064649999999999,
- },
- Object {
- "state": "VALID",
- "value": 20.629894999999998,
- },
- ],
- }
- }
- dataload={
- Object {
- "date": "2020-10-01T00:00:00.000Z",
- "state": "AGGREGATED_VALID",
- "value": 69.18029999999999,
- "valueDetail": Array [
- Object {
- "state": "VALID",
- "value": 45.127739999999996,
- },
- Object {
- "state": "VALID",
- "value": 0.9048899999999999,
- },
- Object {
- "state": "VALID",
- "value": 23.147669999999998,
- },
- ],
- }
- }
- fluidType={3}
- height={20}
- index={4}
- isDuel={false}
- isSwitching={true}
- timeStep={20}
- xScale={[Function]}
- yScale={[Function]}
- />
+ <g>
+ <g
+ class="barContainer "
+ transform="translate(0.625, -40)"
+ >
+ <rect
+ class="background-true"
+ fill="#E0E0E0"
+ height="60"
+ width="2.5000000000000004"
+ x="0"
+ y="0"
+ />
+ </g>
+ <g
+ class="barFill"
+ transform="translate(0.625, 69.18029999999999)"
+ >
+ <defs>
+ <lineargradient
+ id="gradient"
+ x1="0"
+ x2="0"
+ y1="0"
+ y2="1"
+ >
+ <stop
+ id="stop-color-1"
+ offset="0%"
+ />
+ <stop
+ id="stop-color-2"
+ offset="100%"
+ />
+ </lineargradient>
+ </defs>
+ <path
+ class="bar-MULTIFLUID undefined selected bounce-2 delay"
+ d="
+ M0,-12.295074999999997
+ a-12.295074999999997,-12.295074999999997 0 0 1 -12.295074999999997,12.295074999999997
+ h27.090149999999994
+ a-12.295074999999997,-12.295074999999997 0 0 1 -12.295074999999997,-12.295074999999997
+ v-36.88522499999999
+ h-2.5000000000000004
+ z"
+ />
+ </g>
+ <g
+ transform="translate(0.625, 69.18029999999999)"
+ >
+ <defs>
+ <lineargradient
+ class="bar-MULTIFLUID undefined selected bounce-2 delay"
+ id="gradient"
+ x1="0"
+ x2="0"
+ y1="0"
+ y2="1"
+ >
+ <stop
+ id="stop-color-1"
+ offset="0%"
+ />
+ <stop
+ id="stop-color-2"
+ offset="100%"
+ />
+ </lineargradient>
+ </defs>
+ <path
+ class="bar-MULTIFLUID undefined selected bounce-2 delay"
+ d="
+ M0,-12.295074999999997
+ a-12.295074999999997,-12.295074999999997 0 0 1 -12.295074999999997,12.295074999999997
+ h27.090149999999994
+ a-12.295074999999997,-12.295074999999997 0 0 1 -12.295074999999997,-12.295074999999997
+ v-36.88522499999999
+ h-2.5000000000000004
+ z"
+ />
+ </g>
+ </g>
</svg>
-</Provider>
+</div>
`;
exports[`Bar component test should correctly render Bar with showCompare 1`] = `
-<Provider
- store={
- Object {
- "clearActions": [Function],
- "dispatch": [Function],
- "getActions": [Function],
- "getState": [Function],
- "replaceReducer": [Function],
- "subscribe": [Function],
- }
- }
->
+<div>
<svg>
- <Bar
- compare={true}
- compareDataload={
- Object {
- "date": "2020-10-02T00:00:00.000Z",
- "state": "AGGREGATED_VALID",
- "value": 61.65554999999999,
- "valueDetail": Array [
- Object {
- "state": "VALID",
- "value": 40.21918999999999,
- },
- Object {
- "state": "VALID",
- "value": 0.8064649999999999,
- },
- Object {
- "state": "VALID",
- "value": 20.629894999999998,
- },
- ],
- }
- }
- dataload={
- Object {
- "date": "2020-10-01T00:00:00.000Z",
- "state": "AGGREGATED_VALID",
- "value": 69.18029999999999,
- "valueDetail": Array [
- Object {
- "state": "VALID",
- "value": 45.127739999999996,
- },
- Object {
- "state": "VALID",
- "value": 0.9048899999999999,
- },
- Object {
- "state": "VALID",
- "value": 23.147669999999998,
- },
- ],
- }
- }
- fluidType={3}
- height={20}
- index={4}
- isDuel={false}
- isSwitching={false}
- timeStep={20}
- xScale={[Function]}
- yScale={[Function]}
- />
+ <g>
+ <g
+ class="barContainer "
+ transform="translate(0.625, -40)"
+ >
+ <rect
+ class="background-true"
+ fill="#E0E0E0"
+ height="60"
+ width="2.5000000000000004"
+ x="0"
+ y="0"
+ />
+ </g>
+ <g
+ class="barFill"
+ transform="translate(0.625, 69.18029999999999)"
+ >
+ <defs>
+ <lineargradient
+ id="gradient"
+ x1="0"
+ x2="0"
+ y1="0"
+ y2="1"
+ >
+ <stop
+ id="stop-color-1"
+ offset="0%"
+ />
+ <stop
+ id="stop-color-2"
+ offset="100%"
+ />
+ </lineargradient>
+ </defs>
+ <path
+ class="bar-MULTIFLUID undefined selected bounce-2 delay"
+ d="
+ M1.2500000000000002,-12.295074999999997
+ a-12.295074999999997,-12.295074999999997 0 0 1 -12.295074999999997,12.295074999999997
+ h25.840149999999994
+ a-12.295074999999997,-12.295074999999997 0 0 1 -12.295074999999997,-12.295074999999997
+ v-36.88522499999999
+ h-1.2500000000000002
+ z"
+ />
+ </g>
+ <g
+ transform="translate(0.625, 69.18029999999999)"
+ >
+ <defs>
+ <lineargradient
+ class="bar-MULTIFLUID undefined selected bounce-2 delay"
+ id="gradient"
+ x1="0"
+ x2="0"
+ y1="0"
+ y2="1"
+ >
+ <stop
+ id="stop-color-1"
+ offset="0%"
+ />
+ <stop
+ id="stop-color-2"
+ offset="100%"
+ />
+ </lineargradient>
+ </defs>
+ <path
+ class="bar-MULTIFLUID undefined selected bounce-2 delay"
+ d="
+ M1.2500000000000002,-12.295074999999997
+ a-12.295074999999997,-12.295074999999997 0 0 1 -12.295074999999997,12.295074999999997
+ h25.840149999999994
+ a-12.295074999999997,-12.295074999999997 0 0 1 -12.295074999999997,-12.295074999999997
+ v-36.88522499999999
+ h-1.2500000000000002
+ z"
+ />
+ </g>
+ <g
+ transform="translate(0.625, 61.65554999999999)"
+ >
+ <defs>
+ <lineargradient
+ class="bar-compare-MULTIFLUID selected bounce-2 delay--0 bounce-2 delay"
+ id="gradient-compare"
+ x1="0"
+ x2="0"
+ y1="0"
+ y2="1"
+ >
+ <stop
+ id="stop-compare-color-1"
+ offset="0%"
+ />
+ <stop
+ id="stop-compare-color-2"
+ offset="100%"
+ />
+ </lineargradient>
+ </defs>
+ <path
+ class="bar-compare-MULTIFLUID selected bounce-2 delay--0 bounce-2 delay"
+ d="
+ M0,-10.413887499999998
+ a-10.413887499999998,-10.413887499999998 0 0 1 -10.413887499999998,10.413887499999998
+ h22.077774999999995
+ a-10.413887499999998,-10.413887499999998 0 0 1 -10.413887499999998,-10.413887499999998
+ v-31.241662499999993
+ h-1.2500000000000002
+ z"
+ />
+ </g>
+ </g>
</svg>
-</Provider>
+</div>
`;
exports[`Bar component test should correctly render Electricity Bar 1`] = `
-<Provider
- store={
- Object {
- "clearActions": [Function],
- "dispatch": [Function],
- "getActions": [Function],
- "getState": [Function],
- "replaceReducer": [Function],
- "subscribe": [Function],
- }
- }
->
+<div>
<svg>
- <Bar
- compare={false}
- compareDataload={
- Object {
- "date": "2020-10-02T00:00:00.000Z",
- "state": "AGGREGATED_VALID",
- "value": 61.65554999999999,
- "valueDetail": Array [
- Object {
- "state": "VALID",
- "value": 40.21918999999999,
- },
- Object {
- "state": "VALID",
- "value": 0.8064649999999999,
- },
- Object {
- "state": "VALID",
- "value": 20.629894999999998,
- },
- ],
- }
- }
- dataload={
- Object {
- "date": "2020-10-01T00:00:00.000Z",
- "state": "AGGREGATED_VALID",
- "value": 69.18029999999999,
- "valueDetail": Array [
- Object {
- "state": "VALID",
- "value": 45.127739999999996,
- },
- Object {
- "state": "VALID",
- "value": 0.9048899999999999,
- },
- Object {
- "state": "VALID",
- "value": 23.147669999999998,
- },
- ],
- }
- }
- fluidType={0}
- height={20}
- index={4}
- isDuel={false}
- isSwitching={false}
- timeStep={20}
- xScale={[Function]}
- yScale={[Function]}
- />
+ <g>
+ <g
+ class="barContainer "
+ transform="translate(0.625, -40)"
+ >
+ <rect
+ class="background-true"
+ fill="#E0E0E0"
+ height="60"
+ width="2.5000000000000004"
+ x="0"
+ y="0"
+ />
+ </g>
+ <g
+ class="barFill"
+ transform="translate(0.625, 69.18029999999999)"
+ >
+ <defs>
+ <lineargradient
+ id="gradient"
+ x1="0"
+ x2="0"
+ y1="0"
+ y2="1"
+ >
+ <stop
+ id="stop-color-1"
+ offset="0%"
+ />
+ <stop
+ id="stop-color-2"
+ offset="100%"
+ />
+ </lineargradient>
+ </defs>
+ <path
+ class="bar-ELECTRICITY undefined selected bounce-2 delay"
+ d="
+ M0,-12.295074999999997
+ a-12.295074999999997,-12.295074999999997 0 0 1 -12.295074999999997,12.295074999999997
+ h27.090149999999994
+ a-12.295074999999997,-12.295074999999997 0 0 1 -12.295074999999997,-12.295074999999997
+ v-36.88522499999999
+ h-2.5000000000000004
+ z"
+ />
+ </g>
+ <g
+ transform="translate(0.625, 69.18029999999999)"
+ >
+ <defs>
+ <lineargradient
+ class="bar-ELECTRICITY undefined selected bounce-2 delay"
+ id="gradient"
+ x1="0"
+ x2="0"
+ y1="0"
+ y2="1"
+ >
+ <stop
+ id="stop-color-1"
+ offset="0%"
+ />
+ <stop
+ id="stop-color-2"
+ offset="100%"
+ />
+ </lineargradient>
+ </defs>
+ <path
+ class="bar-ELECTRICITY undefined selected bounce-2 delay"
+ d="
+ M0,-12.295074999999997
+ a-12.295074999999997,-12.295074999999997 0 0 1 -12.295074999999997,12.295074999999997
+ h27.090149999999994
+ a-12.295074999999997,-12.295074999999997 0 0 1 -12.295074999999997,-12.295074999999997
+ v-36.88522499999999
+ h-2.5000000000000004
+ z"
+ />
+ </g>
+ </g>
</svg>
-</Provider>
+</div>
`;
exports[`Bar component test should correctly render Gas Bar 1`] = `
-<Provider
- store={
- Object {
- "clearActions": [Function],
- "dispatch": [Function],
- "getActions": [Function],
- "getState": [Function],
- "replaceReducer": [Function],
- "subscribe": [Function],
- }
- }
->
+<div>
<svg>
- <Bar
- compare={false}
- compareDataload={
- Object {
- "date": "2020-10-02T00:00:00.000Z",
- "state": "AGGREGATED_VALID",
- "value": 61.65554999999999,
- "valueDetail": Array [
- Object {
- "state": "VALID",
- "value": 40.21918999999999,
- },
- Object {
- "state": "VALID",
- "value": 0.8064649999999999,
- },
- Object {
- "state": "VALID",
- "value": 20.629894999999998,
- },
- ],
- }
- }
- dataload={
- Object {
- "date": "2020-10-01T00:00:00.000Z",
- "state": "AGGREGATED_VALID",
- "value": 69.18029999999999,
- "valueDetail": Array [
- Object {
- "state": "VALID",
- "value": 45.127739999999996,
- },
- Object {
- "state": "VALID",
- "value": 0.9048899999999999,
- },
- Object {
- "state": "VALID",
- "value": 23.147669999999998,
- },
- ],
- }
- }
- fluidType={2}
- height={20}
- index={4}
- isDuel={false}
- isSwitching={false}
- timeStep={20}
- xScale={[Function]}
- yScale={[Function]}
- />
+ <g>
+ <g
+ class="barContainer "
+ transform="translate(0.625, -40)"
+ >
+ <rect
+ class="background-true"
+ fill="#E0E0E0"
+ height="60"
+ width="2.5000000000000004"
+ x="0"
+ y="0"
+ />
+ </g>
+ <g
+ class="barFill"
+ transform="translate(0.625, 69.18029999999999)"
+ >
+ <defs>
+ <lineargradient
+ id="gradient"
+ x1="0"
+ x2="0"
+ y1="0"
+ y2="1"
+ >
+ <stop
+ id="stop-color-1"
+ offset="0%"
+ />
+ <stop
+ id="stop-color-2"
+ offset="100%"
+ />
+ </lineargradient>
+ </defs>
+ <path
+ class="bar-GAS undefined selected bounce-2 delay"
+ d="
+ M0,-12.295074999999997
+ a-12.295074999999997,-12.295074999999997 0 0 1 -12.295074999999997,12.295074999999997
+ h27.090149999999994
+ a-12.295074999999997,-12.295074999999997 0 0 1 -12.295074999999997,-12.295074999999997
+ v-36.88522499999999
+ h-2.5000000000000004
+ z"
+ />
+ </g>
+ <g
+ transform="translate(0.625, 69.18029999999999)"
+ >
+ <defs>
+ <lineargradient
+ class="bar-GAS undefined selected bounce-2 delay"
+ id="gradient"
+ x1="0"
+ x2="0"
+ y1="0"
+ y2="1"
+ >
+ <stop
+ id="stop-color-1"
+ offset="0%"
+ />
+ <stop
+ id="stop-color-2"
+ offset="100%"
+ />
+ </lineargradient>
+ </defs>
+ <path
+ class="bar-GAS undefined selected bounce-2 delay"
+ d="
+ M0,-12.295074999999997
+ a-12.295074999999997,-12.295074999999997 0 0 1 -12.295074999999997,12.295074999999997
+ h27.090149999999994
+ a-12.295074999999997,-12.295074999999997 0 0 1 -12.295074999999997,-12.295074999999997
+ v-36.88522499999999
+ h-2.5000000000000004
+ z"
+ />
+ </g>
+ </g>
</svg>
-</Provider>
+</div>
`;
exports[`Bar component test should correctly render Multifluid Bar 1`] = `
-<Provider
- store={
- Object {
- "clearActions": [Function],
- "dispatch": [Function],
- "getActions": [Function],
- "getState": [Function],
- "replaceReducer": [Function],
- "subscribe": [Function],
- }
- }
->
+<div>
<svg>
- <Bar
- compare={false}
- compareDataload={
- Object {
- "date": "2020-10-02T00:00:00.000Z",
- "state": "AGGREGATED_VALID",
- "value": 61.65554999999999,
- "valueDetail": Array [
- Object {
- "state": "VALID",
- "value": 40.21918999999999,
- },
- Object {
- "state": "VALID",
- "value": 0.8064649999999999,
- },
- Object {
- "state": "VALID",
- "value": 20.629894999999998,
- },
- ],
- }
- }
- dataload={
- Object {
- "date": "2020-10-01T00:00:00.000Z",
- "state": "AGGREGATED_VALID",
- "value": 69.18029999999999,
- "valueDetail": Array [
- Object {
- "state": "VALID",
- "value": 45.127739999999996,
- },
- Object {
- "state": "VALID",
- "value": 0.9048899999999999,
- },
- Object {
- "state": "VALID",
- "value": 23.147669999999998,
- },
- ],
- }
- }
- fluidType={3}
- height={20}
- index={4}
- isDuel={false}
- isSwitching={false}
- timeStep={20}
- xScale={[Function]}
- yScale={[Function]}
- />
+ <g>
+ <g
+ class="barContainer "
+ transform="translate(0.625, -40)"
+ >
+ <rect
+ class="background-true"
+ fill="#E0E0E0"
+ height="60"
+ width="2.5000000000000004"
+ x="0"
+ y="0"
+ />
+ </g>
+ <g
+ class="barFill"
+ transform="translate(0.625, 69.18029999999999)"
+ >
+ <defs>
+ <lineargradient
+ id="gradient"
+ x1="0"
+ x2="0"
+ y1="0"
+ y2="1"
+ >
+ <stop
+ id="stop-color-1"
+ offset="0%"
+ />
+ <stop
+ id="stop-color-2"
+ offset="100%"
+ />
+ </lineargradient>
+ </defs>
+ <path
+ class="bar-MULTIFLUID undefined selected bounce-2 delay"
+ d="
+ M0,-12.295074999999997
+ a-12.295074999999997,-12.295074999999997 0 0 1 -12.295074999999997,12.295074999999997
+ h27.090149999999994
+ a-12.295074999999997,-12.295074999999997 0 0 1 -12.295074999999997,-12.295074999999997
+ v-36.88522499999999
+ h-2.5000000000000004
+ z"
+ />
+ </g>
+ <g
+ transform="translate(0.625, 69.18029999999999)"
+ >
+ <defs>
+ <lineargradient
+ class="bar-MULTIFLUID undefined selected bounce-2 delay"
+ id="gradient"
+ x1="0"
+ x2="0"
+ y1="0"
+ y2="1"
+ >
+ <stop
+ id="stop-color-1"
+ offset="0%"
+ />
+ <stop
+ id="stop-color-2"
+ offset="100%"
+ />
+ </lineargradient>
+ </defs>
+ <path
+ class="bar-MULTIFLUID undefined selected bounce-2 delay"
+ d="
+ M0,-12.295074999999997
+ a-12.295074999999997,-12.295074999999997 0 0 1 -12.295074999999997,12.295074999999997
+ h27.090149999999994
+ a-12.295074999999997,-12.295074999999997 0 0 1 -12.295074999999997,-12.295074999999997
+ v-36.88522499999999
+ h-2.5000000000000004
+ z"
+ />
+ </g>
+ </g>
</svg>
-</Provider>
+</div>
`;
exports[`Bar component test should correctly render Water Bar 1`] = `
-<Provider
- store={
- Object {
- "clearActions": [Function],
- "dispatch": [Function],
- "getActions": [Function],
- "getState": [Function],
- "replaceReducer": [Function],
- "subscribe": [Function],
- }
- }
->
+<div>
<svg>
- <Bar
- compare={false}
- compareDataload={
- Object {
- "date": "2020-10-02T00:00:00.000Z",
- "state": "AGGREGATED_VALID",
- "value": 61.65554999999999,
- "valueDetail": Array [
- Object {
- "state": "VALID",
- "value": 40.21918999999999,
- },
- Object {
- "state": "VALID",
- "value": 0.8064649999999999,
- },
- Object {
- "state": "VALID",
- "value": 20.629894999999998,
- },
- ],
- }
- }
- dataload={
- Object {
- "date": "2020-10-01T00:00:00.000Z",
- "state": "AGGREGATED_VALID",
- "value": 69.18029999999999,
- "valueDetail": Array [
- Object {
- "state": "VALID",
- "value": 45.127739999999996,
- },
- Object {
- "state": "VALID",
- "value": 0.9048899999999999,
- },
- Object {
- "state": "VALID",
- "value": 23.147669999999998,
- },
- ],
- }
- }
- fluidType={1}
- height={20}
- index={4}
- isDuel={false}
- isSwitching={false}
- timeStep={20}
- xScale={[Function]}
- yScale={[Function]}
- />
+ <g>
+ <g
+ class="barContainer "
+ transform="translate(0.625, -40)"
+ >
+ <rect
+ class="background-true"
+ fill="#E0E0E0"
+ height="60"
+ width="2.5000000000000004"
+ x="0"
+ y="0"
+ />
+ </g>
+ <g
+ class="barFill"
+ transform="translate(0.625, 69.18029999999999)"
+ >
+ <defs>
+ <lineargradient
+ id="gradient"
+ x1="0"
+ x2="0"
+ y1="0"
+ y2="1"
+ >
+ <stop
+ id="stop-color-1"
+ offset="0%"
+ />
+ <stop
+ id="stop-color-2"
+ offset="100%"
+ />
+ </lineargradient>
+ </defs>
+ <path
+ class="bar-WATER undefined selected bounce-2 delay"
+ d="
+ M0,-12.295074999999997
+ a-12.295074999999997,-12.295074999999997 0 0 1 -12.295074999999997,12.295074999999997
+ h27.090149999999994
+ a-12.295074999999997,-12.295074999999997 0 0 1 -12.295074999999997,-12.295074999999997
+ v-36.88522499999999
+ h-2.5000000000000004
+ z"
+ />
+ </g>
+ <g
+ transform="translate(0.625, 69.18029999999999)"
+ >
+ <defs>
+ <lineargradient
+ class="bar-WATER undefined selected bounce-2 delay"
+ id="gradient"
+ x1="0"
+ x2="0"
+ y1="0"
+ y2="1"
+ >
+ <stop
+ id="stop-color-1"
+ offset="0%"
+ />
+ <stop
+ id="stop-color-2"
+ offset="100%"
+ />
+ </lineargradient>
+ </defs>
+ <path
+ class="bar-WATER undefined selected bounce-2 delay"
+ d="
+ M0,-12.295074999999997
+ a-12.295074999999997,-12.295074999999997 0 0 1 -12.295074999999997,12.295074999999997
+ h27.090149999999994
+ a-12.295074999999997,-12.295074999999997 0 0 1 -12.295074999999997,-12.295074999999997
+ v-36.88522499999999
+ h-2.5000000000000004
+ z"
+ />
+ </g>
+ </g>
</svg>
-</Provider>
+</div>
`;
diff --git a/src/components/Charts/__snapshots__/BarChart.spec.tsx.snap b/src/components/Charts/__snapshots__/BarChart.spec.tsx.snap
new file mode 100644
index 0000000000000000000000000000000000000000..57ffaf1973a018c655d6a057bfe19515c1e904a5
--- /dev/null
+++ b/src/components/Charts/__snapshots__/BarChart.spec.tsx.snap
@@ -0,0 +1,373 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`BarChart component should render correctly 1`] = `
+<div>
+ <svg
+ height="400"
+ width="600"
+ >
+ <g
+ class="axis y"
+ fill="none"
+ font-family="sans-serif"
+ font-size="10"
+ text-anchor="start"
+ transform="translate(545, 20)"
+ >
+ <g
+ class="tick"
+ opacity="1"
+ transform="translate(0,330.5)"
+ >
+ <line
+ stroke="currentColor"
+ x2="-600"
+ />
+ <text
+ class="chart-ticks-y-text"
+ dy="0.32em"
+ fill="currentColor"
+ x="3"
+ >
+ 0
+ </text>
+ </g>
+ <g
+ class="tick"
+ opacity="1"
+ transform="translate(0,235.09711796566359)"
+ >
+ <line
+ stroke="currentColor"
+ x2="-600"
+ />
+ <text
+ class="chart-ticks-y-text"
+ dy="0.32em"
+ fill="currentColor"
+ x="3"
+ >
+ 20 FLUID.ELECTRICITY.UNIT
+ </text>
+ </g>
+ <g
+ class="tick"
+ opacity="1"
+ transform="translate(0,139.69423593132723)"
+ >
+ <line
+ stroke="currentColor"
+ x2="-600"
+ />
+ <text
+ class="chart-ticks-y-text"
+ dy="0.32em"
+ fill="currentColor"
+ x="3"
+ >
+ 40 FLUID.ELECTRICITY.UNIT
+ </text>
+ </g>
+ <g
+ class="tick"
+ opacity="1"
+ transform="translate(0,44.29135389699087)"
+ >
+ <line
+ stroke="currentColor"
+ x2="-600"
+ />
+ <text
+ class="chart-ticks-y-text"
+ dy="0.32em"
+ fill="currentColor"
+ x="3"
+ >
+ 60 FLUID.ELECTRICITY.UNIT
+ </text>
+ </g>
+ </g>
+ <g
+ transform="translate(10,20)"
+ >
+ <g>
+ <g
+ class="barContainer "
+ transform="translate(33.43750000000003, -40)"
+ >
+ <rect
+ class="background-true"
+ fill="#E0E0E0"
+ height="370"
+ width="133.75"
+ x="0"
+ y="0"
+ />
+ </g>
+ <g
+ class="barFill"
+ transform="translate(33.43750000000003, 309.3554761977037)"
+ >
+ <defs>
+ <lineargradient
+ id="gradient"
+ x1="0"
+ x2="0"
+ y1="0"
+ y2="1"
+ >
+ <stop
+ id="stop-color-1"
+ offset="0%"
+ />
+ <stop
+ id="stop-color-2"
+ offset="100%"
+ />
+ </lineargradient>
+ </defs>
+ <path
+ class="bar-ELECTRICITY undefined selected bounce-2 delay"
+ d="
+ M0,4
+ a4,4 0 0 1 4,-4
+ h125.75
+ a4,4 0 0 1 4,4
+ v16.644523802296305
+ h-133.75
+ z"
+ />
+ </g>
+ <g
+ transform="translate(33.43750000000003, 309.3554761977037)"
+ >
+ <defs>
+ <lineargradient
+ class="bar-ELECTRICITY undefined selected bounce-2 delay"
+ id="gradient"
+ x1="0"
+ x2="0"
+ y1="0"
+ y2="1"
+ >
+ <stop
+ id="stop-color-1"
+ offset="0%"
+ />
+ <stop
+ id="stop-color-2"
+ offset="100%"
+ />
+ </lineargradient>
+ </defs>
+ <path
+ class="bar-ELECTRICITY undefined selected bounce-2 delay"
+ d="
+ M0,4
+ a4,4 0 0 1 4,-4
+ h125.75
+ a4,4 0 0 1 4,4
+ v16.644523802296305
+ h-133.75
+ z"
+ />
+ </g>
+ </g>
+ <g>
+ <g
+ class="barContainer "
+ transform="translate(200.62500000000003, -40)"
+ >
+ <rect
+ class="background-true"
+ fill="#E0E0E0"
+ height="370"
+ width="133.75"
+ x="0"
+ y="0"
+ />
+ </g>
+ <g
+ class="barFill"
+ transform="translate(200.62500000000003, 309.3554761977037)"
+ >
+ <defs>
+ <lineargradient
+ id="gradient"
+ x1="0"
+ x2="0"
+ y1="0"
+ y2="1"
+ >
+ <stop
+ id="stop-color-1"
+ offset="0%"
+ />
+ <stop
+ id="stop-color-2"
+ offset="100%"
+ />
+ </lineargradient>
+ </defs>
+ <path
+ class="bar-ELECTRICITY undefined selected bounce-2 delay"
+ d="
+ M0,4
+ a4,4 0 0 1 4,-4
+ h125.75
+ a4,4 0 0 1 4,4
+ v16.644523802296305
+ h-133.75
+ z"
+ />
+ </g>
+ <g
+ transform="translate(200.62500000000003, 309.3554761977037)"
+ >
+ <defs>
+ <lineargradient
+ class="bar-ELECTRICITY undefined selected bounce-2 delay"
+ id="gradient"
+ x1="0"
+ x2="0"
+ y1="0"
+ y2="1"
+ >
+ <stop
+ id="stop-color-1"
+ offset="0%"
+ />
+ <stop
+ id="stop-color-2"
+ offset="100%"
+ />
+ </lineargradient>
+ </defs>
+ <path
+ class="bar-ELECTRICITY undefined selected bounce-2 delay"
+ d="
+ M0,4
+ a4,4 0 0 1 4,-4
+ h125.75
+ a4,4 0 0 1 4,4
+ v16.644523802296305
+ h-133.75
+ z"
+ />
+ </g>
+ </g>
+ <g>
+ <g
+ class="barContainer "
+ transform="translate(367.8125, -40)"
+ >
+ <rect
+ class="background-true"
+ fill="#E0E0E0"
+ height="370"
+ width="133.75"
+ x="0"
+ y="0"
+ />
+ </g>
+ <g
+ class="barFill"
+ transform="translate(367.8125, 309.3554761977037)"
+ >
+ <defs>
+ <lineargradient
+ id="gradient"
+ x1="0"
+ x2="0"
+ y1="0"
+ y2="1"
+ >
+ <stop
+ id="stop-color-1"
+ offset="0%"
+ />
+ <stop
+ id="stop-color-2"
+ offset="100%"
+ />
+ </lineargradient>
+ </defs>
+ <path
+ class="bar-ELECTRICITY bar-UNCOMING undefined selected bounce-2 delay"
+ d="
+ M0,4
+ a4,4 0 0 1 4,-4
+ h125.75
+ a4,4 0 0 1 4,4
+ v16.644523802296305
+ h-133.75
+ z"
+ />
+ </g>
+ </g>
+ </g>
+ <g
+ class="axis x"
+ transform="translate(10, 350)"
+ >
+ <g
+ class="tick"
+ opacity="1"
+ transform="translate(33.43750000000003, 0)"
+ >
+ <text
+ class="chart-ticks-y-text"
+ dy="0.71em"
+ transform="translate(66.875)"
+ y="10"
+ >
+ <tspan
+ class="tick-text tick-text-selected chart-ticks-x-text"
+ text-anchor="middle"
+ >
+ O
+ </tspan>
+ </text>
+ </g>
+ <g
+ class="tick"
+ opacity="1"
+ transform="translate(200.62500000000003, 0)"
+ >
+ <text
+ class="chart-ticks-y-text"
+ dy="0.71em"
+ transform="translate(66.875)"
+ y="10"
+ >
+ <tspan
+ class="tick-text tick-text-selected chart-ticks-x-text"
+ text-anchor="middle"
+ >
+ O
+ </tspan>
+ </text>
+ </g>
+ <g
+ class="tick"
+ opacity="1"
+ transform="translate(367.8125, 0)"
+ >
+ <text
+ class="chart-ticks-y-text"
+ dy="0.71em"
+ transform="translate(66.875)"
+ y="10"
+ >
+ <tspan
+ class="tick-text tick-text-selected chart-ticks-x-text"
+ text-anchor="middle"
+ >
+ O
+ </tspan>
+ </text>
+ </g>
+ </g>
+ </svg>
+</div>
+`;
diff --git a/src/components/Charts/__snapshots__/UncomingBar.spec.tsx.snap b/src/components/Charts/__snapshots__/UncomingBar.spec.tsx.snap
new file mode 100644
index 0000000000000000000000000000000000000000..0b62bbcd9d26f68c31cfcd922a16a6c611442d1d
--- /dev/null
+++ b/src/components/Charts/__snapshots__/UncomingBar.spec.tsx.snap
@@ -0,0 +1,33 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Uncoming component should match snapshot 1`] = `
+<div>
+ <svg>
+ <g>
+ <g
+ transform="translate(undefined, -40)"
+ >
+ <rect
+ class="background-false"
+ fill="#E0E0E0"
+ height="90"
+ width="2.5000000000000004"
+ x="0"
+ y="0"
+ />
+ </g>
+ <g
+ transform="translate(undefined, 10)"
+ >
+ <path
+ class="bar-UNCOMING bounce-1 delay--0"
+ d="M0,40v-36 a4,4 0 0 1 4,-4h-5.5a4,4 0 0 1 4,4v36"
+ fill="url(#gradient)"
+ stroke="#61f0f2"
+ stroke-dasharray="5"
+ />
+ </g>
+ </g>
+ </svg>
+</div>
+`;
diff --git a/src/components/CommonKit/Card/StyledCard.spec.tsx b/src/components/CommonKit/Card/StyledCard.spec.tsx
index 0ef9813d20279296deef175ef9da1b8e0f11dce4..bfbf4c3ddc4ad8a1c1acb97825d77ca2825d94d3 100644
--- a/src/components/CommonKit/Card/StyledCard.spec.tsx
+++ b/src/components/CommonKit/Card/StyledCard.spec.tsx
@@ -1,27 +1,27 @@
import { FluidType } from 'enums'
-import { mount } from 'enzyme'
import React from 'react'
import StyledCard from './StyledCard'
+import { render } from '@testing-library/react'
describe('StyledCard component test', () => {
it('should render correctly Electricity StyledCard', () => {
- const wrapper = mount(
+ const { container } = render(
<StyledCard fluidType={FluidType.ELECTRICITY}>children</StyledCard>
)
- expect(wrapper.getElement()).toMatchSnapshot()
+ expect(container).toMatchSnapshot()
})
it('should render correctly Water StyledCard', () => {
- const wrapper = mount(
+ const { container } = render(
<StyledCard fluidType={FluidType.WATER}>children</StyledCard>
)
- expect(wrapper.getElement()).toMatchSnapshot()
+ expect(container).toMatchSnapshot()
})
it('should render correctly Gas StyledCard', () => {
- const wrapper = mount(
+ const { container } = render(
<StyledCard fluidType={FluidType.GAS}>children</StyledCard>
)
- expect(wrapper.getElement()).toMatchSnapshot()
+ expect(container).toMatchSnapshot()
})
})
diff --git a/src/components/CommonKit/Card/StyledEcogestureCard.spec.tsx b/src/components/CommonKit/Card/StyledEcogestureCard.spec.tsx
index 6b6aac0e0bf49307d28d643ecc56cae8bd037e98..44d47325068f3c671b1e00d833b80bcbfbb2dd71 100644
--- a/src/components/CommonKit/Card/StyledEcogestureCard.spec.tsx
+++ b/src/components/CommonKit/Card/StyledEcogestureCard.spec.tsx
@@ -1,20 +1,10 @@
-import { mount } from 'enzyme'
+import { render } from '@testing-library/react'
import React from 'react'
import StyledEcogestureCard from './StyledEcogestureCard'
describe('StyledEcogestureCard component test', () => {
it('should render correctly border StyledEcogestureCard', () => {
- const wrapper = mount(<StyledEcogestureCard />)
- expect(wrapper.getElement()).toMatchSnapshot()
- })
-
- it('should render correctly new ecogesture StyledEcogestureCard with newEcogesture', () => {
- const wrapper = mount(<StyledEcogestureCard newEcogesture={true} />)
- expect(wrapper.getElement()).toMatchSnapshot()
- })
-
- it('should render correctly border StyledEcogestureCard with border', () => {
- const wrapper = mount(<StyledEcogestureCard border={true} />)
- expect(wrapper.getElement()).toMatchSnapshot()
+ const { container } = render(<StyledEcogestureCard />)
+ expect(container).toMatchSnapshot()
})
})
diff --git a/src/components/CommonKit/Card/__snapshots__/StyledCard.spec.tsx.snap b/src/components/CommonKit/Card/__snapshots__/StyledCard.spec.tsx.snap
index 520b007502483267ab35c3da4be31661e364b39d..11a9f998a2067203a9602760a8eab49bb2e26bbd 100644
--- a/src/components/CommonKit/Card/__snapshots__/StyledCard.spec.tsx.snap
+++ b/src/components/CommonKit/Card/__snapshots__/StyledCard.spec.tsx.snap
@@ -1,25 +1,67 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`StyledCard component test should render correctly Electricity StyledCard 1`] = `
-<StyledCard
- fluidType={0}
->
- children
-</StyledCard>
+<div>
+ <button
+ class="MuiButtonBase-root MuiCardActionArea-root WithStyles(ForwardRef(CardActionArea))-root-1 undefined electricity"
+ tabindex="0"
+ type="button"
+ >
+ <div
+ class="MuiCardContent-root WithStyles(ForwardRef(CardContent))-root-2"
+ >
+ children
+ </div>
+ <span
+ class="MuiCardActionArea-focusHighlight"
+ />
+ <span
+ class="MuiTouchRipple-root"
+ />
+ </button>
+</div>
`;
exports[`StyledCard component test should render correctly Gas StyledCard 1`] = `
-<StyledCard
- fluidType={2}
->
- children
-</StyledCard>
+<div>
+ <button
+ class="MuiButtonBase-root MuiCardActionArea-root WithStyles(ForwardRef(CardActionArea))-root-5 undefined gas"
+ tabindex="0"
+ type="button"
+ >
+ <div
+ class="MuiCardContent-root WithStyles(ForwardRef(CardContent))-root-6"
+ >
+ children
+ </div>
+ <span
+ class="MuiCardActionArea-focusHighlight"
+ />
+ <span
+ class="MuiTouchRipple-root"
+ />
+ </button>
+</div>
`;
exports[`StyledCard component test should render correctly Water StyledCard 1`] = `
-<StyledCard
- fluidType={1}
->
- children
-</StyledCard>
+<div>
+ <button
+ class="MuiButtonBase-root MuiCardActionArea-root WithStyles(ForwardRef(CardActionArea))-root-3 undefined water"
+ tabindex="0"
+ type="button"
+ >
+ <div
+ class="MuiCardContent-root WithStyles(ForwardRef(CardContent))-root-4"
+ >
+ children
+ </div>
+ <span
+ class="MuiCardActionArea-focusHighlight"
+ />
+ <span
+ class="MuiTouchRipple-root"
+ />
+ </button>
+</div>
`;
diff --git a/src/components/CommonKit/Card/__snapshots__/StyledEcogestureCard.spec.tsx.snap b/src/components/CommonKit/Card/__snapshots__/StyledEcogestureCard.spec.tsx.snap
index a370edbdadc7988390d0c53c7a4c0defcd6ecde1..b5e28e392f275b9041d4a7fde6225f64396a16c4 100644
--- a/src/components/CommonKit/Card/__snapshots__/StyledEcogestureCard.spec.tsx.snap
+++ b/src/components/CommonKit/Card/__snapshots__/StyledEcogestureCard.spec.tsx.snap
@@ -1,15 +1,21 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
-exports[`StyledEcogestureCard component test should render correctly border StyledEcogestureCard 1`] = `<StyledEcogestureCard />`;
-
-exports[`StyledEcogestureCard component test should render correctly border StyledEcogestureCard with border 1`] = `
-<StyledEcogestureCard
- border={true}
-/>
-`;
-
-exports[`StyledEcogestureCard component test should render correctly new ecogesture StyledEcogestureCard with newEcogesture 1`] = `
-<StyledEcogestureCard
- newEcogesture={true}
-/>
+exports[`StyledEcogestureCard component test should render correctly border StyledEcogestureCard 1`] = `
+<div>
+ <button
+ class="MuiButtonBase-root MuiCardActionArea-root WithStyles(ForwardRef(CardActionArea))-root-1"
+ tabindex="0"
+ type="button"
+ >
+ <div
+ class="MuiCardContent-root WithStyles(ForwardRef(CardContent))-root-2"
+ />
+ <span
+ class="MuiCardActionArea-focusHighlight"
+ />
+ <span
+ class="MuiTouchRipple-root"
+ />
+ </button>
+</div>
`;
diff --git a/src/components/CommonKit/FormNavigation/FormNavigation.spec.tsx b/src/components/CommonKit/FormNavigation/FormNavigation.spec.tsx
index 27cd6d1eed3ab8978b06f3d21398a5890c2fce85..c28c8322612668f9fbbf3e0637f934beb1fa87ff 100644
--- a/src/components/CommonKit/FormNavigation/FormNavigation.spec.tsx
+++ b/src/components/CommonKit/FormNavigation/FormNavigation.spec.tsx
@@ -1,32 +1,25 @@
-import Button from '@material-ui/core/Button'
+import { render, screen } from '@testing-library/react'
+import { userEvent } from '@testing-library/user-event'
import { ProfileTypeStepForm } from 'enums'
-import { mount } from 'enzyme'
import React from 'react'
-import { Provider } from 'react-redux'
-import { createMockEcolyoStore } from 'tests/__mocks__/store'
import FormNavigation from './FormNavigation'
describe('FormNavigation component', () => {
- const store = createMockEcolyoStore()
-
- it('should be rendered correctly', () => {
+ it('should call next & previous methods', async () => {
const mockHandlePrevious = jest.fn()
const mockHandleNext = jest.fn()
- const wrapper = mount(
- <Provider store={store}>
- <FormNavigation
- step={ProfileTypeStepForm.COOKING_FLUID}
- handlePrevious={mockHandlePrevious}
- handleNext={mockHandleNext}
- disableNextButton={false}
- />
- </Provider>
+ render(
+ <FormNavigation
+ step={ProfileTypeStepForm.COOKING_FLUID}
+ handlePrevious={mockHandlePrevious}
+ handleNext={mockHandleNext}
+ disableNextButton={false}
+ />
)
- wrapper.find(Button).at(0).simulate('click')
- wrapper.find(Button).at(1).simulate('click')
- expect(wrapper.find('profile-navigation')).toBeTruthy()
- expect(wrapper.find(Button)).toBeTruthy()
- expect(mockHandlePrevious.mock.calls.length).toEqual(1)
- expect(mockHandleNext.mock.calls.length).toEqual(1)
+ const [prevButton, nextButton] = screen.getAllByRole('button')
+ await userEvent.click(prevButton)
+ expect(mockHandlePrevious).toHaveBeenCalled()
+ await userEvent.click(nextButton)
+ expect(mockHandleNext).toHaveBeenCalled()
})
})
diff --git a/src/components/CommonKit/FormNavigation/FormNavigation.tsx b/src/components/CommonKit/FormNavigation/FormNavigation.tsx
index 7669a380caa421d978f7225640163710e32ca60b..be6e49794736fb118e6d1215b314976f231b4c62 100644
--- a/src/components/CommonKit/FormNavigation/FormNavigation.tsx
+++ b/src/components/CommonKit/FormNavigation/FormNavigation.tsx
@@ -1,5 +1,4 @@
import Button from '@material-ui/core/Button'
-import classNames from 'classnames'
import { useI18n } from 'cozy-ui/transpiled/react/I18n'
import { EcogestureStepForm, ProfileTypeStepForm, SgeStep } from 'enums'
import React, { useCallback } from 'react'
@@ -50,7 +49,7 @@ const FormNavigation = ({
) {
return t('profile_type.form.button_end')
} else {
- return `${t('profile_type.form.button_next')} >`
+ return t('profile_type.form.button_next')
}
}, [isEcogesture, isLastConnectStep, isLoading, step, t])
@@ -59,16 +58,12 @@ const FormNavigation = ({
<Button
aria-label={t('profile_type.accessibility.button_previous')}
onClick={handlePreviousClick}
- className="profile-navigation-button"
+ className="btnSecondary"
disabled={
disablePrevButton || step === ProfileTypeStepForm.HOUSING_TYPE
}
- classes={{
- root: 'btn-profile-back',
- label: 'text-16-bold',
- }}
>
- {`< ${t('profile_type.form.button_previous')}`}
+ {t('profile_type.form.button_previous')}
</Button>
<Button
aria-label={
@@ -78,14 +73,8 @@ const FormNavigation = ({
: t('profile_type.accessibility.button_next')
}
onClick={handleNextClick}
- className={classNames('profile-navigation-button', {
- ['disabled']: disableNextButton,
- })}
+ className="btnPrimary"
disabled={disableNextButton}
- classes={{
- root: 'btn-profile-next',
- label: 'text-16-bold',
- }}
>
{getSecondButtonLabel()}
</Button>
diff --git a/src/components/CommonKit/FormNavigation/formNavigation.scss b/src/components/CommonKit/FormNavigation/formNavigation.scss
index 92c4c331090d526d53c4e9d77dfdd01a41c16be4..c954b8d9fa16d6c5cedec0b8ebf08792f4748418 100644
--- a/src/components/CommonKit/FormNavigation/formNavigation.scss
+++ b/src/components/CommonKit/FormNavigation/formNavigation.scss
@@ -3,7 +3,6 @@
.profile-navigation {
border-top: 1px solid $grey-dark;
- background: $dark-2;
display: flex;
justify-content: center;
align-items: center;
@@ -15,9 +14,7 @@
height: 3rem;
}
- button.profile-navigation-button {
+ button {
max-width: 12.5rem;
- margin: 0;
- padding: 0.5rem 1rem;
}
}
diff --git a/src/components/CommonKit/Icon/StyledIcon.spec.tsx b/src/components/CommonKit/Icon/StyledIcon.spec.tsx
index 737e4c756c54de1a4ee64b6c72577aa5ef299dbe..1649ff7ef3d3aed23b0bbcba008e71bdaf1d0b4f 100644
--- a/src/components/CommonKit/Icon/StyledIcon.spec.tsx
+++ b/src/components/CommonKit/Icon/StyledIcon.spec.tsx
@@ -1,23 +1,12 @@
-import { mount } from 'enzyme'
+import { render } from '@testing-library/react'
import React from 'react'
import StyledIcon from './StyledIcon'
describe('StyledIcon component test', () => {
it('should render correctly Icon', () => {
- const mockProps = {
- className: 'className',
- icon: 'icon',
- size: 10,
- }
-
- const wrapper = mount(
- <StyledIcon
- className={mockProps.className}
- icon={mockProps.icon}
- size={mockProps.size}
- />
+ const { container } = render(
+ <StyledIcon className="class" icon="icon" size={10} />
)
-
- expect(wrapper.getElement()).toMatchSnapshot()
+ expect(container).toMatchSnapshot()
})
})
diff --git a/src/components/CommonKit/Icon/__snapshots__/StyledIcon.spec.tsx.snap b/src/components/CommonKit/Icon/__snapshots__/StyledIcon.spec.tsx.snap
index d0fc8b8724902ba99b9ab064d4e7b29f06822dfb..995720a23dfbafe207b4510e273807b8919913fe 100644
--- a/src/components/CommonKit/Icon/__snapshots__/StyledIcon.spec.tsx.snap
+++ b/src/components/CommonKit/Icon/__snapshots__/StyledIcon.spec.tsx.snap
@@ -1,9 +1,16 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`StyledIcon component test should render correctly Icon 1`] = `
-<StyledIcon
- className="className"
- icon="icon"
- size={10}
-/>
+<div>
+ <svg
+ aria-hidden="true"
+ class="class styles__icon___23x3R"
+ height="10"
+ width="10"
+ >
+ <use
+ xlink:href="#icon"
+ />
+ </svg>
+</div>
`;
diff --git a/src/components/CommonKit/IconButton/StyledIconButton.spec.tsx b/src/components/CommonKit/IconButton/StyledIconButton.spec.tsx
index d621190f29c518c206db6daeae52808e1c6ffbcd..b202c401e96a4e5414ca2531d37c5aec10a10eac 100644
--- a/src/components/CommonKit/IconButton/StyledIconButton.spec.tsx
+++ b/src/components/CommonKit/IconButton/StyledIconButton.spec.tsx
@@ -1,18 +1,10 @@
-import { shallow } from 'enzyme'
+import { render } from '@testing-library/react'
import React from 'react'
import StyledIconButton from './StyledIconButton'
describe('StyledIconButton component test', () => {
it('should render correctly StyledIconButton', () => {
- const mockProps = {
- icon: 'icon',
- size: 15,
- }
-
- const wrapper = shallow(
- <StyledIconButton icon={mockProps.icon} sized={mockProps.size} />
- )
-
- expect(wrapper.getElement()).toMatchSnapshot()
+ const { container } = render(<StyledIconButton icon="icon" sized={15} />)
+ expect(container).toMatchSnapshot()
})
})
diff --git a/src/components/CommonKit/IconButton/__snapshots__/StyledIconButton.spec.tsx.snap b/src/components/CommonKit/IconButton/__snapshots__/StyledIconButton.spec.tsx.snap
index f91cdd49811fe980afd9c27de7cd25b30dd99de0..1b037586548e7a7a42b743ff6f58d07f5747cf2e 100644
--- a/src/components/CommonKit/IconButton/__snapshots__/StyledIconButton.spec.tsx.snap
+++ b/src/components/CommonKit/IconButton/__snapshots__/StyledIconButton.spec.tsx.snap
@@ -1,10 +1,29 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`StyledIconButton component test should render correctly StyledIconButton 1`] = `
-<WithStyles(WithStyles(ForwardRef(IconButton)))>
- <StyledIcon
- icon="icon"
- size={15}
- />
-</WithStyles(WithStyles(ForwardRef(IconButton)))>
+<div>
+ <button
+ class="MuiButtonBase-root MuiIconButton-root WithStyles(ForwardRef(IconButton))-root-1"
+ tabindex="0"
+ type="button"
+ >
+ <span
+ class="MuiIconButton-label"
+ >
+ <svg
+ aria-hidden="true"
+ class="styles__icon___23x3R"
+ height="15"
+ width="15"
+ >
+ <use
+ xlink:href="#icon"
+ />
+ </svg>
+ </span>
+ <span
+ class="MuiTouchRipple-root"
+ />
+ </button>
+</div>
`;
diff --git a/src/components/CommonKit/Switch/StyledSwitch.spec.tsx b/src/components/CommonKit/Switch/StyledSwitch.spec.tsx
index 8af7bc846b26a09e14909a28e083b2aaa2fa8de1..17a5b04deb234b43cdf45a4301d116c77bf40b28 100644
--- a/src/components/CommonKit/Switch/StyledSwitch.spec.tsx
+++ b/src/components/CommonKit/Switch/StyledSwitch.spec.tsx
@@ -1,24 +1,23 @@
+import { render } from '@testing-library/react'
import { FluidType } from 'enums'
-import { mount } from 'enzyme'
import React from 'react'
import StyledSwitch from './StyledSwitch'
describe('StyledSwitch component test', () => {
it('should render correctly electricity StyledSwitch', () => {
- const wrapper = mount(<StyledSwitch fluidType={FluidType.ELECTRICITY} />)
-
- expect(wrapper.getElement()).toMatchSnapshot()
+ const { container } = render(
+ <StyledSwitch fluidType={FluidType.ELECTRICITY} />
+ )
+ expect(container).toMatchSnapshot()
})
it('should render correctly water StyledSwitch', () => {
- const wrapper = mount(<StyledSwitch fluidType={FluidType.WATER} />)
-
- expect(wrapper.getElement()).toMatchSnapshot()
+ const { container } = render(<StyledSwitch fluidType={FluidType.WATER} />)
+ expect(container).toMatchSnapshot()
})
it('should render correctly gas StyledSwitch', () => {
- const wrapper = mount(<StyledSwitch fluidType={FluidType.GAS} />)
-
- expect(wrapper.getElement()).toMatchSnapshot()
+ const { container } = render(<StyledSwitch fluidType={FluidType.GAS} />)
+ expect(container).toMatchSnapshot()
})
})
diff --git a/src/components/CommonKit/Switch/__snapshots__/StyledSwitch.spec.tsx.snap b/src/components/CommonKit/Switch/__snapshots__/StyledSwitch.spec.tsx.snap
index a69f06614469b151eed0b9a94b44c6d9ebfd0247..b93dd31b3fa8e9df25c3529abe2c7569c75a260b 100644
--- a/src/components/CommonKit/Switch/__snapshots__/StyledSwitch.spec.tsx.snap
+++ b/src/components/CommonKit/Switch/__snapshots__/StyledSwitch.spec.tsx.snap
@@ -1,19 +1,97 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`StyledSwitch component test should render correctly electricity StyledSwitch 1`] = `
-<StyledSwitch
- fluidType={0}
-/>
+<div>
+ <span
+ class="MuiSwitch-root WithStyles(ForwardRef(Switch))-root-4"
+ >
+ <span
+ aria-disabled="false"
+ class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-8 MuiSwitch-switchBase WithStyles(ForwardRef(Switch))-switchBase-5 WithStyles(WithStyles(ForwardRef(Switch)))-switchBase-1 MuiSwitch-colorSecondary"
+ >
+ <span
+ class="MuiIconButton-label"
+ >
+ <input
+ class="PrivateSwitchBase-input-11 MuiSwitch-input"
+ type="checkbox"
+ value=""
+ />
+ <span
+ class="MuiSwitch-thumb"
+ />
+ </span>
+ <span
+ class="MuiTouchRipple-root"
+ />
+ </span>
+ <span
+ class="MuiSwitch-track WithStyles(ForwardRef(Switch))-track-7 WithStyles(WithStyles(ForwardRef(Switch)))-track-3"
+ />
+ </span>
+</div>
`;
exports[`StyledSwitch component test should render correctly gas StyledSwitch 1`] = `
-<StyledSwitch
- fluidType={2}
-/>
+<div>
+ <span
+ class="MuiSwitch-root WithStyles(ForwardRef(Switch))-root-26"
+ >
+ <span
+ aria-disabled="false"
+ class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-30 MuiSwitch-switchBase WithStyles(ForwardRef(Switch))-switchBase-27 WithStyles(WithStyles(ForwardRef(Switch)))-switchBase-23 MuiSwitch-colorSecondary"
+ >
+ <span
+ class="MuiIconButton-label"
+ >
+ <input
+ class="PrivateSwitchBase-input-33 MuiSwitch-input"
+ type="checkbox"
+ value=""
+ />
+ <span
+ class="MuiSwitch-thumb"
+ />
+ </span>
+ <span
+ class="MuiTouchRipple-root"
+ />
+ </span>
+ <span
+ class="MuiSwitch-track WithStyles(ForwardRef(Switch))-track-29 WithStyles(WithStyles(ForwardRef(Switch)))-track-25"
+ />
+ </span>
+</div>
`;
exports[`StyledSwitch component test should render correctly water StyledSwitch 1`] = `
-<StyledSwitch
- fluidType={1}
-/>
+<div>
+ <span
+ class="MuiSwitch-root WithStyles(ForwardRef(Switch))-root-15"
+ >
+ <span
+ aria-disabled="false"
+ class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-19 MuiSwitch-switchBase WithStyles(ForwardRef(Switch))-switchBase-16 WithStyles(WithStyles(ForwardRef(Switch)))-switchBase-12 MuiSwitch-colorSecondary"
+ >
+ <span
+ class="MuiIconButton-label"
+ >
+ <input
+ class="PrivateSwitchBase-input-22 MuiSwitch-input"
+ type="checkbox"
+ value=""
+ />
+ <span
+ class="MuiSwitch-thumb"
+ />
+ </span>
+ <span
+ class="MuiTouchRipple-root"
+ />
+ </span>
+ <span
+ class="MuiSwitch-track WithStyles(ForwardRef(Switch))-track-18 WithStyles(WithStyles(ForwardRef(Switch)))-track-14"
+ />
+ </span>
+</div>
`;
diff --git a/src/components/Connection/Connection.spec.tsx b/src/components/Connection/Connection.spec.tsx
index ba59c476150e5239a40ca42fe343f9305220116f..0eebac9db1516da621ea572c83853caaf9b4ec7b 100644
--- a/src/components/Connection/Connection.spec.tsx
+++ b/src/components/Connection/Connection.spec.tsx
@@ -1,32 +1,30 @@
+import { render } from '@testing-library/react'
import Connection from 'components/Connection/Connection'
import { FluidType } from 'enums'
-import { mount } from 'enzyme'
-import toJson from 'enzyme-to-json'
import React from 'react'
import { Provider } from 'react-redux'
import { createMockEcolyoStore } from 'tests/__mocks__/store'
jest.mock('components/Connection/EPGLConnect/EpglInit', () => 'mock-EpglInit')
-
jest.mock('components/Connection/GRDFConnect/GrdfInit', () => 'mock-GrdfInit')
describe('Connection component test', () => {
const store = createMockEcolyoStore()
it('should call GrdfInit', () => {
- const wrapper = mount(
+ const { container } = render(
<Provider store={store}>
<Connection fluidType={FluidType.GAS} />
</Provider>
)
- expect(toJson(wrapper)).toMatchSnapshot()
+ expect(container).toMatchSnapshot()
})
it('should call EpglInit', () => {
- const wrapper = mount(
+ const { container } = render(
<Provider store={store}>
<Connection fluidType={FluidType.WATER} />
</Provider>
)
- expect(toJson(wrapper)).toMatchSnapshot()
+ expect(container).toMatchSnapshot()
})
})
diff --git a/src/components/Connection/EPGLConnect/EpglBill.tsx b/src/components/Connection/EPGLConnect/EpglBill.tsx
index 2141111af9f9473bb61c88c65462e8dd4061918d..113c53dc041a033cc9ecb5b12e3de39feeccebee 100644
--- a/src/components/Connection/EPGLConnect/EpglBill.tsx
+++ b/src/components/Connection/EPGLConnect/EpglBill.tsx
@@ -31,19 +31,13 @@ const EpglBill = () => {
<Button
aria-label={t('auth.eglgrandlyon.accessibility.connect')}
onClick={() => dispatch(openConnectionModal(true))}
- classes={{
- root: 'btn-highlight',
- label: 'text-16-bold',
- }}
+ className="btnPrimary"
>
{t('auth.eglgrandlyon.connect')}
</Button>
{currentFluidStatus.firstDataDate && (
<Button
- classes={{
- root: 'btn-secondary',
- label: 'text-16-bold',
- }}
+ className="btnSecondary"
onClick={() => dispatch(setShowOfflineData(true))}
>
{t('auth.button_showOfflineData')}
diff --git a/src/components/Connection/EPGLConnect/FormLogin/FormLogin.tsx b/src/components/Connection/EPGLConnect/FormLogin/FormLogin.tsx
index f2216ea1d7d6e144ec27a8af7b580c00e280168a..3d17b4adb881229e024a767a57496c4e2edf94f5 100644
--- a/src/components/Connection/EPGLConnect/FormLogin/FormLogin.tsx
+++ b/src/components/Connection/EPGLConnect/FormLogin/FormLogin.tsx
@@ -1,6 +1,7 @@
import Button from '@material-ui/core/Button'
import * as Sentry from '@sentry/react'
import TrailingIcon from 'assets/icons/ico/trailing-icon.svg'
+import classNames from 'classnames'
import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
import StyledIconButton from 'components/CommonKit/IconButton/StyledIconButton'
import useKonnectorAuth from 'components/Hooks/useKonnectorAuth'
@@ -28,6 +29,7 @@ const FormLogin = () => {
const [password, setPassword] = useState<string>('')
const [error, setError] = useState<string>('')
const [loading, setLoading] = useState<boolean>(false)
+ const [showPassword, setShowPassword] = useState(false)
const icon = getPartnerPicto(konnectorSlug)
const [connect, update, connectError] = useKonnectorAuth(
@@ -48,19 +50,7 @@ const FormLogin = () => {
setPassword(value)
}
- const revealPassword = (idInput: string) => {
- const input = document.getElementById(idInput)
- if (input) {
- if (input.getAttribute('type') === 'password') {
- input.setAttribute('type', 'text')
- } else {
- input.setAttribute('type', 'password')
- }
- }
- }
-
- const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
- e.preventDefault()
+ const handleSubmit = async () => {
try {
setError('')
setLoading(true)
@@ -100,25 +90,16 @@ const FormLogin = () => {
}, [account, lastEpglLogin, t])
return (
- <form
- className="form"
- onSubmit={(e: React.FormEvent<HTMLFormElement>) => handleSubmit(e)}
- >
+ <form>
<div className="form-group">
<input
id={'idFieldLogin' + fluidName}
type="number"
- className={
- error === ''
- ? 'form-control form-input'
- : 'form-control form-input --error'
- }
+ className={classNames('inputText', { error: error !== '' })}
aria-label={t(`auth.${konnectorSlug}.connect_form.login`)}
placeholder={t(`auth.${konnectorSlug}.connect_form.login`)}
name="login"
- onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
- changeLogin(e.target.value)
- }
+ onChange={e => changeLogin(e.target.value)}
value={login}
inputMode="numeric"
/>
@@ -126,18 +107,12 @@ const FormLogin = () => {
<div className="form-group">
<input
id={'idFieldPassword' + fluidName}
- type="password"
- className={
- error === ''
- ? 'form-control form-input'
- : 'form-control form-input --error'
- }
+ name="password"
+ type={showPassword ? 'text' : 'password'}
+ className={classNames('inputText', { error: error !== '' })}
aria-label={t(`auth.${konnectorSlug}.connect_form.password`)}
placeholder={t(`auth.${konnectorSlug}.connect_form.password`)}
- name="password"
- onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
- changePassword(e.target.value)
- }
+ onChange={e => changePassword(e.target.value)}
value={password}
/>
<span>
@@ -146,20 +121,20 @@ const FormLogin = () => {
aria-label={t('auth.accessibility.button_reveal_password')}
className="form-trailing-icon"
sized={22}
- onClick={() => revealPassword('idFieldPassword' + fluidName)}
+ onClick={() => setShowPassword(prev => !prev)}
/>
</span>
</div>
<div className="form-message">{error === '' ? null : error}</div>
<div className="connection-form-connect-button">
<Button
- type="submit"
aria-label={t('auth.accessibility.button_connect')}
disabled={loading}
classes={{
- root: 'btn-highlight',
+ root: 'btnPrimary',
label: 'text-18-bold',
}}
+ onClick={handleSubmit}
>
<div className="connection-form-connect-button-content">
<div className="connection-form-connect-button-content-icon">
diff --git a/src/components/Connection/EPGLConnect/FormLogin/formLogin.scss b/src/components/Connection/EPGLConnect/FormLogin/formLogin.scss
index 861494685a143dc12d1d0ec945f917e05372792f..92be631cd3d13a41bc390b45a8e520e2de1256ab 100644
--- a/src/components/Connection/EPGLConnect/FormLogin/formLogin.scss
+++ b/src/components/Connection/EPGLConnect/FormLogin/formLogin.scss
@@ -1,11 +1,13 @@
@import 'src/styles/base/color';
@import 'src/styles/base/breakpoint';
+@import 'src/styles/components/input';
+
+form {
+ margin-top: 1rem;
+ display: flex;
+ flex-direction: column;
+ gap: 1rem;
-.form {
- margin: 0 1.3rem 1rem;
- @media #{$large-phone} {
- margin: 0 0 0.25rem;
- }
.form-info-provider {
padding: 0;
margin: 0;
@@ -19,25 +21,16 @@
color: $grey-bright;
margin-top: 0rem;
}
- .form-input {
- background: rgba(0, 0, 0, 0.3);
- border: 1px solid #7b7b7b;
- border-radius: 4px;
- color: $grey-bright;
- padding: 0 5%;
- outline-offset: -1px;
- &.--error {
- border: 1px solid $red-primary;
- }
- }
- .form-input:focus {
- outline: none;
- border: 1px solid $gold-shadow;
- }
+
.form-group {
display: flex;
flex-direction: column;
- margin: 0.75rem 0 0 0;
+ input {
+ max-width: unset;
+ &.error {
+ border: 1px solid $red-primary;
+ }
+ }
.form-trailing-icon {
float: right;
position: relative;
@@ -45,22 +38,9 @@
margin-right: 15px;
}
}
- .form-control {
- height: 3rem;
- @media #{$large-phone} {
- max-width: 100vw;
- }
- }
.form-message {
color: $red-primary;
min-height: 1.25rem;
margin-top: 0.25rem;
}
- button.btn-highlight {
- margin-top: 0.75rem;
- }
- ::placeholder {
- color: $grey-bright;
- opacity: 0.6;
- }
}
diff --git a/src/components/Connection/ExpiredConsentModal/ExpiredConsentModal.spec.tsx b/src/components/Connection/ExpiredConsentModal/ExpiredConsentModal.spec.tsx
index de738abe48d8e42a4f067e58b9190c7e04879028..cf6cc00505123e43982dd9e58a8caae962f7ca0e 100644
--- a/src/components/Connection/ExpiredConsentModal/ExpiredConsentModal.spec.tsx
+++ b/src/components/Connection/ExpiredConsentModal/ExpiredConsentModal.spec.tsx
@@ -1,7 +1,6 @@
-import { Button } from '@material-ui/core'
+import { render, screen } from '@testing-library/react'
+import { userEvent } from '@testing-library/user-event'
import { FluidType } from 'enums'
-import { mount } from 'enzyme'
-import toJson from 'enzyme-to-json'
import React from 'react'
import { Provider } from 'react-redux'
import * as storeHooks from 'store/hooks'
@@ -15,7 +14,6 @@ jest.mock('react-router-dom', () => ({
useNavigate: () => mockedNavigate,
}))
const mockAppDispatch = jest.spyOn(storeHooks, 'useAppDispatch')
-const mockToggleModal = jest.fn()
const mockHandleCloseClick = jest.fn()
describe('ExpiredConsentModal component', () => {
@@ -24,63 +22,69 @@ describe('ExpiredConsentModal component', () => {
jest.clearAllMocks()
})
it('should be rendered correctly', () => {
- const component = mount(
+ const { baseElement } = render(
<Provider store={store}>
<ExpiredConsentModal
open={true}
handleCloseClick={jest.fn()}
fluidType={FluidType.ELECTRICITY}
- toggleModal={mockToggleModal}
+ toggleModal={jest.fn()}
/>
</Provider>
)
- expect(toJson(component)).toMatchSnapshot()
+ expect(baseElement).toMatchSnapshot()
})
- it('should launch the update consent process for GRDF', () => {
- const component = mount(
+ it('should launch the update consent process for GRDF', async () => {
+ render(
<Provider store={store}>
<ExpiredConsentModal
open={true}
handleCloseClick={jest.fn()}
fluidType={FluidType.GAS}
- toggleModal={mockToggleModal}
+ toggleModal={jest.fn()}
/>
</Provider>
)
- component.find(Button).at(1).simulate('click')
+ await userEvent.click(
+ screen.getByRole('button', { name: 'consent_outdated.go' })
+ )
expect(mockAppDispatch).toHaveBeenCalledTimes(1)
expect(mockedNavigate).toHaveBeenCalledTimes(1)
})
- it('should launch the update consent process for Enedis', () => {
+ it('should launch the update consent process for Enedis', async () => {
const store = createMockEcolyoStore({
global: { fluidStatus: fluidStatusConnectedData },
})
- const component = mount(
+ render(
<Provider store={store}>
<ExpiredConsentModal
open={true}
handleCloseClick={jest.fn()}
fluidType={FluidType.ELECTRICITY}
- toggleModal={mockToggleModal}
+ toggleModal={jest.fn()}
/>
</Provider>
)
- component.find(Button).at(1).simulate('click')
+ await userEvent.click(
+ screen.getByRole('button', { name: 'consent_outdated.go' })
+ )
expect(mockAppDispatch).toHaveBeenCalledTimes(1)
expect(mockedNavigate).toHaveBeenCalledTimes(1)
})
- it('should click on close modal', () => {
- const component = mount(
+ it('should click on close modal', async () => {
+ render(
<Provider store={store}>
<ExpiredConsentModal
open={true}
handleCloseClick={mockHandleCloseClick}
fluidType={FluidType.ELECTRICITY}
- toggleModal={mockToggleModal}
+ toggleModal={jest.fn()}
/>
</Provider>
)
- component.find(Button).at(0).simulate('click')
+ await userEvent.click(
+ screen.getByRole('button', { name: 'consent_outdated.later' })
+ )
expect(mockHandleCloseClick).toHaveBeenCalled()
})
})
diff --git a/src/components/Connection/ExpiredConsentModal/ExpiredConsentModal.tsx b/src/components/Connection/ExpiredConsentModal/ExpiredConsentModal.tsx
index 6060c4ecea8c7fcde90ac452a1816db1e4fa476b..f922cb1ce2f99aed1e069ea04521dbcec4e033d6 100644
--- a/src/components/Connection/ExpiredConsentModal/ExpiredConsentModal.tsx
+++ b/src/components/Connection/ExpiredConsentModal/ExpiredConsentModal.tsx
@@ -90,37 +90,29 @@ const ExpiredConsentModal = ({
<div className={`text-20-bold title ${getFluidName(fluidType)}`}>
{t(`consent_outdated.title.${fluidType}`)}
</div>
- <div className="text-16-normal text1">
- {t(`consent_outdated.text1.${fluidType}`)}
- </div>
- <div className="text-16-normal justified-text">
+ <div>{t(`consent_outdated.text1.${fluidType}`)}</div>
+ <div className="text-16-bold">
{t(`consent_outdated.text2.${fluidType}`)}
</div>
<div className="buttons">
- <Button
- aria-label={t('consent_outdated.later')}
- onClick={handleCloseClick}
- classes={{
- root: 'btn-secondary-positive',
- label: 'text-16-normal',
- }}
- >
- {fluidType === FluidType.ELECTRICITY
- ? t('consent_outdated.no')
- : t('consent_outdated.later')}
- </Button>
<Button
aria-label={t('consent_outdated.go')}
onClick={launchUpdateConsent}
- classes={{
- root: 'btn-highlight',
- label: 'text-16-bold',
- }}
+ className="btnPrimary"
>
{fluidType === FluidType.ELECTRICITY
? t('consent_outdated.yes')
: t('consent_outdated.go')}
</Button>
+ <Button
+ aria-label={t('consent_outdated.later')}
+ onClick={handleCloseClick}
+ className="btnSecondary"
+ >
+ {fluidType === FluidType.ELECTRICITY
+ ? t('consent_outdated.no')
+ : t('consent_outdated.later')}
+ </Button>
</div>
</div>
</Dialog>
diff --git a/src/components/Connection/ExpiredConsentModal/__snapshots__/ExpiredConsentModal.spec.tsx.snap b/src/components/Connection/ExpiredConsentModal/__snapshots__/ExpiredConsentModal.spec.tsx.snap
index 4288ee9d7a22a3dfc207be38ea715fca1ae4b6cd..bc66bb1e283bd4a9e6c9812c6648c9ebed507686 100644
--- a/src/components/Connection/ExpiredConsentModal/__snapshots__/ExpiredConsentModal.spec.tsx.snap
+++ b/src/components/Connection/ExpiredConsentModal/__snapshots__/ExpiredConsentModal.spec.tsx.snap
@@ -1,1182 +1,135 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`ExpiredConsentModal component should be rendered correctly 1`] = `
-<Provider
- store={
- Object {
- "clearActions": [Function],
- "dispatch": [Function],
- "getActions": [Function],
- "getState": [Function],
- "replaceReducer": [Function],
- "subscribe": [Function],
- }
- }
+<body
+ style="padding-right: 0px; overflow: hidden;"
>
- <ExpiredConsentModal
- fluidType={0}
- handleCloseClick={[MockFunction]}
- open={true}
- toggleModal={[MockFunction]}
+ <div
+ aria-hidden="true"
+ />
+ <div
+ class="MuiDialog-root modal-root"
+ role="presentation"
+ style="position: fixed; z-index: 1300; right: 0px; bottom: 0px; top: 0px; left: 0px;"
>
- <WithStyles(ForwardRef(Dialog))
- aria-labelledby="accessibility-title"
- classes={
- Object {
- "paper": "modal-paper",
- "root": "modal-root",
- }
- }
- onClose={[MockFunction]}
- open={true}
+ <div
+ aria-hidden="true"
+ class="MuiBackdrop-root"
+ style="opacity: 1; webkit-transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"
+ />
+ <div
+ data-test="sentinelStart"
+ tabindex="0"
+ />
+ <div
+ class="MuiDialog-container MuiDialog-scrollPaper"
+ role="none presentation"
+ style="opacity: 1; webkit-transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"
+ tabindex="-1"
>
- <ForwardRef(Dialog)
+ <div
aria-labelledby="accessibility-title"
- classes={
- Object {
- "container": "MuiDialog-container",
- "paper": "MuiDialog-paper modal-paper",
- "paperFullScreen": "MuiDialog-paperFullScreen",
- "paperFullWidth": "MuiDialog-paperFullWidth",
- "paperScrollBody": "MuiDialog-paperScrollBody",
- "paperScrollPaper": "MuiDialog-paperScrollPaper",
- "paperWidthFalse": "MuiDialog-paperWidthFalse",
- "paperWidthLg": "MuiDialog-paperWidthLg",
- "paperWidthMd": "MuiDialog-paperWidthMd",
- "paperWidthSm": "MuiDialog-paperWidthSm",
- "paperWidthXl": "MuiDialog-paperWidthXl",
- "paperWidthXs": "MuiDialog-paperWidthXs",
- "root": "MuiDialog-root modal-root",
- "scrollBody": "MuiDialog-scrollBody",
- "scrollPaper": "MuiDialog-scrollPaper",
- }
- }
- onClose={[MockFunction]}
- open={true}
+ class="MuiPaper-root MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm MuiPaper-elevation24 MuiPaper-rounded"
+ role="dialog"
>
- <ForwardRef(Modal)
- BackdropComponent={
- Object {
- "$$typeof": Symbol(react.forward_ref),
- "Naked": Object {
- "$$typeof": Symbol(react.forward_ref),
- "propTypes": Object {
- "children": [Function],
- "className": [Function],
- "classes": [Function],
- "invisible": [Function],
- "open": [Function],
- "transitionDuration": [Function],
- },
- "render": [Function],
- },
- "displayName": "WithStyles(ForwardRef(Backdrop))",
- "options": Object {
- "defaultTheme": Object {
- "breakpoints": Object {
- "between": [Function],
- "down": [Function],
- "keys": Array [
- "xs",
- "sm",
- "md",
- "lg",
- "xl",
- ],
- "only": [Function],
- "up": [Function],
- "values": Object {
- "lg": 1280,
- "md": 960,
- "sm": 600,
- "xl": 1920,
- "xs": 0,
- },
- "width": [Function],
- },
- "direction": "ltr",
- "mixins": Object {
- "gutters": [Function],
- "toolbar": Object {
- "@media (min-width:0px) and (orientation: landscape)": Object {
- "minHeight": 48,
- },
- "@media (min-width:600px)": Object {
- "minHeight": 64,
- },
- "minHeight": 56,
- },
- },
- "overrides": Object {},
- "palette": Object {
- "action": Object {
- "activatedOpacity": 0.12,
- "active": "rgba(0, 0, 0, 0.54)",
- "disabled": "rgba(0, 0, 0, 0.26)",
- "disabledBackground": "rgba(0, 0, 0, 0.12)",
- "disabledOpacity": 0.38,
- "focus": "rgba(0, 0, 0, 0.12)",
- "focusOpacity": 0.12,
- "hover": "rgba(0, 0, 0, 0.04)",
- "hoverOpacity": 0.04,
- "selected": "rgba(0, 0, 0, 0.08)",
- "selectedOpacity": 0.08,
- },
- "augmentColor": [Function],
- "background": Object {
- "default": "#fafafa",
- "paper": "#fff",
- },
- "common": Object {
- "black": "#000",
- "white": "#fff",
- },
- "contrastThreshold": 3,
- "divider": "rgba(0, 0, 0, 0.12)",
- "error": Object {
- "contrastText": "#fff",
- "dark": "#d32f2f",
- "light": "#e57373",
- "main": "#f44336",
- },
- "getContrastText": [Function],
- "grey": Object {
- "100": "#f5f5f5",
- "200": "#eeeeee",
- "300": "#e0e0e0",
- "400": "#bdbdbd",
- "50": "#fafafa",
- "500": "#9e9e9e",
- "600": "#757575",
- "700": "#616161",
- "800": "#424242",
- "900": "#212121",
- "A100": "#d5d5d5",
- "A200": "#aaaaaa",
- "A400": "#303030",
- "A700": "#616161",
- },
- "info": Object {
- "contrastText": "#fff",
- "dark": "#1976d2",
- "light": "#64b5f6",
- "main": "#2196f3",
- },
- "primary": Object {
- "contrastText": "#fff",
- "dark": "#303f9f",
- "light": "#7986cb",
- "main": "#3f51b5",
- },
- "secondary": Object {
- "contrastText": "#fff",
- "dark": "#c51162",
- "light": "#ff4081",
- "main": "#f50057",
- },
- "success": Object {
- "contrastText": "rgba(0, 0, 0, 0.87)",
- "dark": "#388e3c",
- "light": "#81c784",
- "main": "#4caf50",
- },
- "text": Object {
- "disabled": "rgba(0, 0, 0, 0.38)",
- "hint": "rgba(0, 0, 0, 0.38)",
- "primary": "rgba(0, 0, 0, 0.87)",
- "secondary": "rgba(0, 0, 0, 0.54)",
- },
- "tonalOffset": 0.2,
- "type": "light",
- "warning": Object {
- "contrastText": "rgba(0, 0, 0, 0.87)",
- "dark": "#f57c00",
- "light": "#ffb74d",
- "main": "#ff9800",
- },
- },
- "props": Object {},
- "shadows": Array [
- "none",
- "0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12)",
- "0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12)",
- "0px 3px 3px -2px rgba(0,0,0,0.2),0px 3px 4px 0px rgba(0,0,0,0.14),0px 1px 8px 0px rgba(0,0,0,0.12)",
- "0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12)",
- "0px 3px 5px -1px rgba(0,0,0,0.2),0px 5px 8px 0px rgba(0,0,0,0.14),0px 1px 14px 0px rgba(0,0,0,0.12)",
- "0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12)",
- "0px 4px 5px -2px rgba(0,0,0,0.2),0px 7px 10px 1px rgba(0,0,0,0.14),0px 2px 16px 1px rgba(0,0,0,0.12)",
- "0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12)",
- "0px 5px 6px -3px rgba(0,0,0,0.2),0px 9px 12px 1px rgba(0,0,0,0.14),0px 3px 16px 2px rgba(0,0,0,0.12)",
- "0px 6px 6px -3px rgba(0,0,0,0.2),0px 10px 14px 1px rgba(0,0,0,0.14),0px 4px 18px 3px rgba(0,0,0,0.12)",
- "0px 6px 7px -4px rgba(0,0,0,0.2),0px 11px 15px 1px rgba(0,0,0,0.14),0px 4px 20px 3px rgba(0,0,0,0.12)",
- "0px 7px 8px -4px rgba(0,0,0,0.2),0px 12px 17px 2px rgba(0,0,0,0.14),0px 5px 22px 4px rgba(0,0,0,0.12)",
- "0px 7px 8px -4px rgba(0,0,0,0.2),0px 13px 19px 2px rgba(0,0,0,0.14),0px 5px 24px 4px rgba(0,0,0,0.12)",
- "0px 7px 9px -4px rgba(0,0,0,0.2),0px 14px 21px 2px rgba(0,0,0,0.14),0px 5px 26px 4px rgba(0,0,0,0.12)",
- "0px 8px 9px -5px rgba(0,0,0,0.2),0px 15px 22px 2px rgba(0,0,0,0.14),0px 6px 28px 5px rgba(0,0,0,0.12)",
- "0px 8px 10px -5px rgba(0,0,0,0.2),0px 16px 24px 2px rgba(0,0,0,0.14),0px 6px 30px 5px rgba(0,0,0,0.12)",
- "0px 8px 11px -5px rgba(0,0,0,0.2),0px 17px 26px 2px rgba(0,0,0,0.14),0px 6px 32px 5px rgba(0,0,0,0.12)",
- "0px 9px 11px -5px rgba(0,0,0,0.2),0px 18px 28px 2px rgba(0,0,0,0.14),0px 7px 34px 6px rgba(0,0,0,0.12)",
- "0px 9px 12px -6px rgba(0,0,0,0.2),0px 19px 29px 2px rgba(0,0,0,0.14),0px 7px 36px 6px rgba(0,0,0,0.12)",
- "0px 10px 13px -6px rgba(0,0,0,0.2),0px 20px 31px 3px rgba(0,0,0,0.14),0px 8px 38px 7px rgba(0,0,0,0.12)",
- "0px 10px 13px -6px rgba(0,0,0,0.2),0px 21px 33px 3px rgba(0,0,0,0.14),0px 8px 40px 7px rgba(0,0,0,0.12)",
- "0px 10px 14px -6px rgba(0,0,0,0.2),0px 22px 35px 3px rgba(0,0,0,0.14),0px 8px 42px 7px rgba(0,0,0,0.12)",
- "0px 11px 14px -7px rgba(0,0,0,0.2),0px 23px 36px 3px rgba(0,0,0,0.14),0px 9px 44px 8px rgba(0,0,0,0.12)",
- "0px 11px 15px -7px rgba(0,0,0,0.2),0px 24px 38px 3px rgba(0,0,0,0.14),0px 9px 46px 8px rgba(0,0,0,0.12)",
- ],
- "shape": Object {
- "borderRadius": 4,
- },
- "spacing": [Function],
- "transitions": Object {
- "create": [Function],
- "duration": Object {
- "complex": 375,
- "enteringScreen": 225,
- "leavingScreen": 195,
- "short": 250,
- "shorter": 200,
- "shortest": 150,
- "standard": 300,
- },
- "easing": Object {
- "easeIn": "cubic-bezier(0.4, 0, 1, 1)",
- "easeInOut": "cubic-bezier(0.4, 0, 0.2, 1)",
- "easeOut": "cubic-bezier(0.0, 0, 0.2, 1)",
- "sharp": "cubic-bezier(0.4, 0, 0.6, 1)",
- },
- "getAutoHeightDuration": [Function],
- },
- "typography": Object {
- "body1": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "1rem",
- "fontWeight": 400,
- "letterSpacing": "0.00938em",
- "lineHeight": 1.5,
- },
- "body2": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "0.875rem",
- "fontWeight": 400,
- "letterSpacing": "0.01071em",
- "lineHeight": 1.43,
- },
- "button": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "0.875rem",
- "fontWeight": 500,
- "letterSpacing": "0.02857em",
- "lineHeight": 1.75,
- "textTransform": "uppercase",
- },
- "caption": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "0.75rem",
- "fontWeight": 400,
- "letterSpacing": "0.03333em",
- "lineHeight": 1.66,
- },
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": 14,
- "fontWeightBold": 700,
- "fontWeightLight": 300,
- "fontWeightMedium": 500,
- "fontWeightRegular": 400,
- "h1": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "6rem",
- "fontWeight": 300,
- "letterSpacing": "-0.01562em",
- "lineHeight": 1.167,
- },
- "h2": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "3.75rem",
- "fontWeight": 300,
- "letterSpacing": "-0.00833em",
- "lineHeight": 1.2,
- },
- "h3": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "3rem",
- "fontWeight": 400,
- "letterSpacing": "0em",
- "lineHeight": 1.167,
- },
- "h4": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "2.125rem",
- "fontWeight": 400,
- "letterSpacing": "0.00735em",
- "lineHeight": 1.235,
- },
- "h5": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "1.5rem",
- "fontWeight": 400,
- "letterSpacing": "0em",
- "lineHeight": 1.334,
- },
- "h6": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "1.25rem",
- "fontWeight": 500,
- "letterSpacing": "0.0075em",
- "lineHeight": 1.6,
- },
- "htmlFontSize": 16,
- "overline": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "0.75rem",
- "fontWeight": 400,
- "letterSpacing": "0.08333em",
- "lineHeight": 2.66,
- "textTransform": "uppercase",
- },
- "pxToRem": [Function],
- "round": [Function],
- "subtitle1": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "1rem",
- "fontWeight": 400,
- "letterSpacing": "0.00938em",
- "lineHeight": 1.75,
- },
- "subtitle2": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "0.875rem",
- "fontWeight": 500,
- "letterSpacing": "0.00714em",
- "lineHeight": 1.57,
- },
- },
- "zIndex": Object {
- "appBar": 1100,
- "drawer": 1200,
- "mobileStepper": 1000,
- "modal": 1300,
- "snackbar": 1400,
- "speedDial": 1050,
- "tooltip": 1500,
- },
- },
- "name": "MuiBackdrop",
- },
- "propTypes": Object {
- "classes": [Function],
- "innerRef": [Function],
- },
- "render": [Function],
- "useStyles": [Function],
- }
- }
- BackdropProps={
- Object {
- "transitionDuration": Object {
- "enter": 225,
- "exit": 195,
- },
- }
- }
- className="MuiDialog-root modal-root"
- closeAfterTransition={true}
- disableEscapeKeyDown={false}
- onClose={[MockFunction]}
- open={true}
+ <div
+ id="accessibility-title"
>
- <ForwardRef(Portal)
- disablePortal={false}
+ consumption_visualizer.modal.window_title
+ </div>
+ <button
+ aria-label="consumption_visualizer.modal.close"
+ class="MuiButtonBase-root MuiIconButton-root modal-paper-close-button"
+ tabindex="0"
+ type="button"
+ >
+ <span
+ class="MuiIconButton-label"
+ >
+ <svg
+ class="styles__icon___23x3R"
+ height="16"
+ width="16"
+ >
+ <use
+ xlink:href="#test-file-stub"
+ />
+ </svg>
+ </span>
+ <span
+ class="MuiTouchRipple-root"
+ />
+ </button>
+ <div
+ class="expired-consent-modal"
+ >
+ <div
+ class="icon-main"
+ >
+ <svg
+ class="styles__icon___23x3R"
+ height="135"
+ width="135"
+ >
+ <use
+ xlink:href="#test-file-stub"
+ />
+ </svg>
+ </div>
+ <div
+ class="text-20-bold title electricity"
+ >
+ consent_outdated.title.0
+ </div>
+ <div>
+ consent_outdated.text1.0
+ </div>
+ <div
+ class="text-16-bold"
+ >
+ consent_outdated.text2.0
+ </div>
+ <div
+ class="buttons"
>
- <Portal
- containerInfo={
- <body
- style="padding-right: 0px; overflow: hidden;"
- >
- <div
- class="MuiDialog-root modal-root"
- role="presentation"
- style="position: fixed; z-index: 1300; right: 0px; bottom: 0px; top: 0px; left: 0px;"
- >
- <div
- aria-hidden="true"
- class="MuiBackdrop-root"
- style="opacity: 1; webkit-transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"
- />
- <div
- data-test="sentinelStart"
- tabindex="0"
- />
- <div
- class="MuiDialog-container MuiDialog-scrollPaper"
- role="none presentation"
- style="opacity: 1; webkit-transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"
- tabindex="-1"
- >
- <div
- aria-labelledby="accessibility-title"
- class="MuiPaper-root MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm MuiPaper-elevation24 MuiPaper-rounded"
- role="dialog"
- >
- <div
- id="accessibility-title"
- >
- consumption_visualizer.modal.window_title
- </div>
- <button
- aria-label="consumption_visualizer.modal.close"
- class="MuiButtonBase-root MuiIconButton-root modal-paper-close-button"
- tabindex="0"
- type="button"
- >
- <span
- class="MuiIconButton-label"
- >
- <svg
- class="styles__icon___23x3R"
- height="16"
- width="16"
- >
- <use
- xlink:href="#test-file-stub"
- />
- </svg>
- </span>
- <span
- class="MuiTouchRipple-root"
- />
- </button>
- <div
- class="expired-consent-modal"
- >
- <div
- class="icon-main"
- >
- <svg
- class="styles__icon___23x3R"
- height="135"
- width="135"
- >
- <use
- xlink:href="#test-file-stub"
- />
- </svg>
- </div>
- <div
- class="text-20-bold title electricity"
- >
- consent_outdated.title.0
- </div>
- <div
- class="text-16-normal text1"
- >
- consent_outdated.text1.0
- </div>
- <div
- class="text-16-normal justified-text"
- >
- consent_outdated.text2.0
- </div>
- <div
- class="buttons"
- >
- <button
- aria-label="consent_outdated.later"
- class="MuiButtonBase-root MuiButton-root btn-secondary-positive MuiButton-text"
- tabindex="0"
- type="button"
- >
- <span
- class="MuiButton-label text-16-normal"
- >
- consent_outdated.no
- </span>
- <span
- class="MuiTouchRipple-root"
- />
- </button>
- <button
- aria-label="consent_outdated.go"
- class="MuiButtonBase-root MuiButton-root btn-highlight MuiButton-text"
- tabindex="0"
- type="button"
- >
- <span
- class="MuiButton-label text-16-bold"
- >
- consent_outdated.yes
- </span>
- <span
- class="MuiTouchRipple-root"
- />
- </button>
- </div>
- </div>
- </div>
- </div>
- <div
- data-test="sentinelEnd"
- tabindex="0"
- />
- </div>
- </body>
- }
+ <button
+ aria-label="consent_outdated.go"
+ class="MuiButtonBase-root MuiButton-root MuiButton-text btnPrimary"
+ tabindex="0"
+ type="button"
+ >
+ <span
+ class="MuiButton-label"
+ >
+ consent_outdated.yes
+ </span>
+ <span
+ class="MuiTouchRipple-root"
+ />
+ </button>
+ <button
+ aria-label="consent_outdated.later"
+ class="MuiButtonBase-root MuiButton-root MuiButton-text btnSecondary"
+ tabindex="0"
+ type="button"
>
- <div
- className="MuiDialog-root modal-root"
- onKeyDown={[Function]}
- role="presentation"
- style={
- Object {
- "bottom": 0,
- "left": 0,
- "position": "fixed",
- "right": 0,
- "top": 0,
- "zIndex": 1300,
- }
- }
+ <span
+ class="MuiButton-label"
>
- <WithStyles(ForwardRef(Backdrop))
- onClick={[Function]}
- open={true}
- transitionDuration={
- Object {
- "enter": 225,
- "exit": 195,
- }
- }
- >
- <ForwardRef(Backdrop)
- classes={
- Object {
- "invisible": "MuiBackdrop-invisible",
- "root": "MuiBackdrop-root",
- }
- }
- onClick={[Function]}
- open={true}
- transitionDuration={
- Object {
- "enter": 225,
- "exit": 195,
- }
- }
- >
- <ForwardRef(Fade)
- in={true}
- onClick={[Function]}
- timeout={
- Object {
- "enter": 225,
- "exit": 195,
- }
- }
- >
- <Transition
- appear={true}
- enter={true}
- exit={true}
- in={true}
- mountOnEnter={false}
- onClick={[Function]}
- onEnter={[Function]}
- onEntered={[Function]}
- onEntering={[Function]}
- onExit={[Function]}
- onExited={[Function]}
- onExiting={[Function]}
- timeout={
- Object {
- "enter": 225,
- "exit": 195,
- }
- }
- unmountOnExit={false}
- >
- <div
- aria-hidden={true}
- className="MuiBackdrop-root"
- onClick={[Function]}
- style={
- Object {
- "opacity": 1,
- "visibility": undefined,
- }
- }
- />
- </Transition>
- </ForwardRef(Fade)>
- </ForwardRef(Backdrop)>
- </WithStyles(ForwardRef(Backdrop))>
- <Unstable_TrapFocus
- disableAutoFocus={false}
- disableEnforceFocus={false}
- disableRestoreFocus={false}
- getDoc={[Function]}
- isEnabled={[Function]}
- open={true}
- >
- <div
- data-test="sentinelStart"
- tabIndex={0}
- />
- <ForwardRef(Fade)
- appear={true}
- in={true}
- onEnter={[Function]}
- onExited={[Function]}
- role="none presentation"
- tabIndex="-1"
- timeout={
- Object {
- "enter": 225,
- "exit": 195,
- }
- }
- >
- <Transition
- appear={true}
- enter={true}
- exit={true}
- in={true}
- mountOnEnter={false}
- onEnter={[Function]}
- onEntered={[Function]}
- onEntering={[Function]}
- onExit={[Function]}
- onExited={[Function]}
- onExiting={[Function]}
- role="none presentation"
- tabIndex="-1"
- timeout={
- Object {
- "enter": 225,
- "exit": 195,
- }
- }
- unmountOnExit={false}
- >
- <div
- className="MuiDialog-container MuiDialog-scrollPaper"
- onMouseDown={[Function]}
- onMouseUp={[Function]}
- role="none presentation"
- style={
- Object {
- "opacity": 1,
- "visibility": undefined,
- }
- }
- tabIndex="-1"
- >
- <WithStyles(ForwardRef(Paper))
- aria-labelledby="accessibility-title"
- className="MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm"
- elevation={24}
- role="dialog"
- >
- <ForwardRef(Paper)
- aria-labelledby="accessibility-title"
- className="MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm"
- classes={
- Object {
- "elevation0": "MuiPaper-elevation0",
- "elevation1": "MuiPaper-elevation1",
- "elevation10": "MuiPaper-elevation10",
- "elevation11": "MuiPaper-elevation11",
- "elevation12": "MuiPaper-elevation12",
- "elevation13": "MuiPaper-elevation13",
- "elevation14": "MuiPaper-elevation14",
- "elevation15": "MuiPaper-elevation15",
- "elevation16": "MuiPaper-elevation16",
- "elevation17": "MuiPaper-elevation17",
- "elevation18": "MuiPaper-elevation18",
- "elevation19": "MuiPaper-elevation19",
- "elevation2": "MuiPaper-elevation2",
- "elevation20": "MuiPaper-elevation20",
- "elevation21": "MuiPaper-elevation21",
- "elevation22": "MuiPaper-elevation22",
- "elevation23": "MuiPaper-elevation23",
- "elevation24": "MuiPaper-elevation24",
- "elevation3": "MuiPaper-elevation3",
- "elevation4": "MuiPaper-elevation4",
- "elevation5": "MuiPaper-elevation5",
- "elevation6": "MuiPaper-elevation6",
- "elevation7": "MuiPaper-elevation7",
- "elevation8": "MuiPaper-elevation8",
- "elevation9": "MuiPaper-elevation9",
- "outlined": "MuiPaper-outlined",
- "root": "MuiPaper-root",
- "rounded": "MuiPaper-rounded",
- }
- }
- elevation={24}
- role="dialog"
- >
- <div
- aria-labelledby="accessibility-title"
- className="MuiPaper-root MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm MuiPaper-elevation24 MuiPaper-rounded"
- role="dialog"
- >
- <div
- id="accessibility-title"
- >
- consumption_visualizer.modal.window_title
- </div>
- <WithStyles(ForwardRef(IconButton))
- aria-label="consumption_visualizer.modal.close"
- className="modal-paper-close-button"
- onClick={[MockFunction]}
- >
- <ForwardRef(IconButton)
- aria-label="consumption_visualizer.modal.close"
- className="modal-paper-close-button"
- classes={
- Object {
- "colorInherit": "MuiIconButton-colorInherit",
- "colorPrimary": "MuiIconButton-colorPrimary",
- "colorSecondary": "MuiIconButton-colorSecondary",
- "disabled": "Mui-disabled",
- "edgeEnd": "MuiIconButton-edgeEnd",
- "edgeStart": "MuiIconButton-edgeStart",
- "label": "MuiIconButton-label",
- "root": "MuiIconButton-root",
- "sizeSmall": "MuiIconButton-sizeSmall",
- }
- }
- onClick={[MockFunction]}
- >
- <WithStyles(ForwardRef(ButtonBase))
- aria-label="consumption_visualizer.modal.close"
- centerRipple={true}
- className="MuiIconButton-root modal-paper-close-button"
- disabled={false}
- focusRipple={true}
- onClick={[MockFunction]}
- >
- <ForwardRef(ButtonBase)
- aria-label="consumption_visualizer.modal.close"
- centerRipple={true}
- className="MuiIconButton-root modal-paper-close-button"
- classes={
- Object {
- "disabled": "Mui-disabled",
- "focusVisible": "Mui-focusVisible",
- "root": "MuiButtonBase-root",
- }
- }
- disabled={false}
- focusRipple={true}
- onClick={[MockFunction]}
- >
- <button
- aria-label="consumption_visualizer.modal.close"
- className="MuiButtonBase-root MuiIconButton-root modal-paper-close-button"
- disabled={false}
- onBlur={[Function]}
- onClick={[MockFunction]}
- onDragLeave={[Function]}
- onFocus={[Function]}
- onKeyDown={[Function]}
- onKeyUp={[Function]}
- onMouseDown={[Function]}
- onMouseLeave={[Function]}
- onMouseUp={[Function]}
- onTouchEnd={[Function]}
- onTouchMove={[Function]}
- onTouchStart={[Function]}
- tabIndex={0}
- type="button"
- >
- <span
- className="MuiIconButton-label"
- >
- <Icon
- icon="test-file-stub"
- size={16}
- spin={false}
- >
- <Component
- className="styles__icon___23x3R"
- height={16}
- style={Object {}}
- width={16}
- >
- <svg
- className="styles__icon___23x3R"
- height={16}
- style={Object {}}
- width={16}
- >
- <use
- xlinkHref="#test-file-stub"
- />
- </svg>
- </Component>
- </Icon>
- </span>
- <WithStyles(memo)
- center={true}
- >
- <ForwardRef(TouchRipple)
- center={true}
- classes={
- Object {
- "child": "MuiTouchRipple-child",
- "childLeaving": "MuiTouchRipple-childLeaving",
- "childPulsate": "MuiTouchRipple-childPulsate",
- "ripple": "MuiTouchRipple-ripple",
- "ripplePulsate": "MuiTouchRipple-ripplePulsate",
- "rippleVisible": "MuiTouchRipple-rippleVisible",
- "root": "MuiTouchRipple-root",
- }
- }
- >
- <span
- className="MuiTouchRipple-root"
- >
- <TransitionGroup
- childFactory={[Function]}
- component={null}
- exit={true}
- />
- </span>
- </ForwardRef(TouchRipple)>
- </WithStyles(memo)>
- </button>
- </ForwardRef(ButtonBase)>
- </WithStyles(ForwardRef(ButtonBase))>
- </ForwardRef(IconButton)>
- </WithStyles(ForwardRef(IconButton))>
- <div
- className="expired-consent-modal"
- >
- <div
- className="icon-main"
- >
- <Icon
- icon="test-file-stub"
- size={135}
- spin={false}
- >
- <Component
- className="styles__icon___23x3R"
- height={135}
- style={Object {}}
- width={135}
- >
- <svg
- className="styles__icon___23x3R"
- height={135}
- style={Object {}}
- width={135}
- >
- <use
- xlinkHref="#test-file-stub"
- />
- </svg>
- </Component>
- </Icon>
- </div>
- <div
- className="text-20-bold title electricity"
- >
- consent_outdated.title.0
- </div>
- <div
- className="text-16-normal text1"
- >
- consent_outdated.text1.0
- </div>
- <div
- className="text-16-normal justified-text"
- >
- consent_outdated.text2.0
- </div>
- <div
- className="buttons"
- >
- <WithStyles(ForwardRef(Button))
- aria-label="consent_outdated.later"
- classes={
- Object {
- "label": "text-16-normal",
- "root": "btn-secondary-positive",
- }
- }
- onClick={[MockFunction]}
- >
- <ForwardRef(Button)
- aria-label="consent_outdated.later"
- classes={
- Object {
- "colorInherit": "MuiButton-colorInherit",
- "contained": "MuiButton-contained",
- "containedPrimary": "MuiButton-containedPrimary",
- "containedSecondary": "MuiButton-containedSecondary",
- "containedSizeLarge": "MuiButton-containedSizeLarge",
- "containedSizeSmall": "MuiButton-containedSizeSmall",
- "disableElevation": "MuiButton-disableElevation",
- "disabled": "Mui-disabled",
- "endIcon": "MuiButton-endIcon",
- "focusVisible": "Mui-focusVisible",
- "fullWidth": "MuiButton-fullWidth",
- "iconSizeLarge": "MuiButton-iconSizeLarge",
- "iconSizeMedium": "MuiButton-iconSizeMedium",
- "iconSizeSmall": "MuiButton-iconSizeSmall",
- "label": "MuiButton-label text-16-normal",
- "outlined": "MuiButton-outlined",
- "outlinedPrimary": "MuiButton-outlinedPrimary",
- "outlinedSecondary": "MuiButton-outlinedSecondary",
- "outlinedSizeLarge": "MuiButton-outlinedSizeLarge",
- "outlinedSizeSmall": "MuiButton-outlinedSizeSmall",
- "root": "MuiButton-root btn-secondary-positive",
- "sizeLarge": "MuiButton-sizeLarge",
- "sizeSmall": "MuiButton-sizeSmall",
- "startIcon": "MuiButton-startIcon",
- "text": "MuiButton-text",
- "textPrimary": "MuiButton-textPrimary",
- "textSecondary": "MuiButton-textSecondary",
- "textSizeLarge": "MuiButton-textSizeLarge",
- "textSizeSmall": "MuiButton-textSizeSmall",
- }
- }
- onClick={[MockFunction]}
- >
- <WithStyles(ForwardRef(ButtonBase))
- aria-label="consent_outdated.later"
- className="MuiButton-root btn-secondary-positive MuiButton-text"
- component="button"
- disabled={false}
- focusRipple={true}
- focusVisibleClassName="Mui-focusVisible"
- onClick={[MockFunction]}
- type="button"
- >
- <ForwardRef(ButtonBase)
- aria-label="consent_outdated.later"
- className="MuiButton-root btn-secondary-positive MuiButton-text"
- classes={
- Object {
- "disabled": "Mui-disabled",
- "focusVisible": "Mui-focusVisible",
- "root": "MuiButtonBase-root",
- }
- }
- component="button"
- disabled={false}
- focusRipple={true}
- focusVisibleClassName="Mui-focusVisible"
- onClick={[MockFunction]}
- type="button"
- >
- <button
- aria-label="consent_outdated.later"
- className="MuiButtonBase-root MuiButton-root btn-secondary-positive MuiButton-text"
- disabled={false}
- onBlur={[Function]}
- onClick={[MockFunction]}
- onDragLeave={[Function]}
- onFocus={[Function]}
- onKeyDown={[Function]}
- onKeyUp={[Function]}
- onMouseDown={[Function]}
- onMouseLeave={[Function]}
- onMouseUp={[Function]}
- onTouchEnd={[Function]}
- onTouchMove={[Function]}
- onTouchStart={[Function]}
- tabIndex={0}
- type="button"
- >
- <span
- className="MuiButton-label text-16-normal"
- >
- consent_outdated.no
- </span>
- <WithStyles(memo)
- center={false}
- >
- <ForwardRef(TouchRipple)
- center={false}
- classes={
- Object {
- "child": "MuiTouchRipple-child",
- "childLeaving": "MuiTouchRipple-childLeaving",
- "childPulsate": "MuiTouchRipple-childPulsate",
- "ripple": "MuiTouchRipple-ripple",
- "ripplePulsate": "MuiTouchRipple-ripplePulsate",
- "rippleVisible": "MuiTouchRipple-rippleVisible",
- "root": "MuiTouchRipple-root",
- }
- }
- >
- <span
- className="MuiTouchRipple-root"
- >
- <TransitionGroup
- childFactory={[Function]}
- component={null}
- exit={true}
- />
- </span>
- </ForwardRef(TouchRipple)>
- </WithStyles(memo)>
- </button>
- </ForwardRef(ButtonBase)>
- </WithStyles(ForwardRef(ButtonBase))>
- </ForwardRef(Button)>
- </WithStyles(ForwardRef(Button))>
- <WithStyles(ForwardRef(Button))
- aria-label="consent_outdated.go"
- classes={
- Object {
- "label": "text-16-bold",
- "root": "btn-highlight",
- }
- }
- onClick={[Function]}
- >
- <ForwardRef(Button)
- aria-label="consent_outdated.go"
- classes={
- Object {
- "colorInherit": "MuiButton-colorInherit",
- "contained": "MuiButton-contained",
- "containedPrimary": "MuiButton-containedPrimary",
- "containedSecondary": "MuiButton-containedSecondary",
- "containedSizeLarge": "MuiButton-containedSizeLarge",
- "containedSizeSmall": "MuiButton-containedSizeSmall",
- "disableElevation": "MuiButton-disableElevation",
- "disabled": "Mui-disabled",
- "endIcon": "MuiButton-endIcon",
- "focusVisible": "Mui-focusVisible",
- "fullWidth": "MuiButton-fullWidth",
- "iconSizeLarge": "MuiButton-iconSizeLarge",
- "iconSizeMedium": "MuiButton-iconSizeMedium",
- "iconSizeSmall": "MuiButton-iconSizeSmall",
- "label": "MuiButton-label text-16-bold",
- "outlined": "MuiButton-outlined",
- "outlinedPrimary": "MuiButton-outlinedPrimary",
- "outlinedSecondary": "MuiButton-outlinedSecondary",
- "outlinedSizeLarge": "MuiButton-outlinedSizeLarge",
- "outlinedSizeSmall": "MuiButton-outlinedSizeSmall",
- "root": "MuiButton-root btn-highlight",
- "sizeLarge": "MuiButton-sizeLarge",
- "sizeSmall": "MuiButton-sizeSmall",
- "startIcon": "MuiButton-startIcon",
- "text": "MuiButton-text",
- "textPrimary": "MuiButton-textPrimary",
- "textSecondary": "MuiButton-textSecondary",
- "textSizeLarge": "MuiButton-textSizeLarge",
- "textSizeSmall": "MuiButton-textSizeSmall",
- }
- }
- onClick={[Function]}
- >
- <WithStyles(ForwardRef(ButtonBase))
- aria-label="consent_outdated.go"
- className="MuiButton-root btn-highlight MuiButton-text"
- component="button"
- disabled={false}
- focusRipple={true}
- focusVisibleClassName="Mui-focusVisible"
- onClick={[Function]}
- type="button"
- >
- <ForwardRef(ButtonBase)
- aria-label="consent_outdated.go"
- className="MuiButton-root btn-highlight MuiButton-text"
- classes={
- Object {
- "disabled": "Mui-disabled",
- "focusVisible": "Mui-focusVisible",
- "root": "MuiButtonBase-root",
- }
- }
- component="button"
- disabled={false}
- focusRipple={true}
- focusVisibleClassName="Mui-focusVisible"
- onClick={[Function]}
- type="button"
- >
- <button
- aria-label="consent_outdated.go"
- className="MuiButtonBase-root MuiButton-root btn-highlight MuiButton-text"
- disabled={false}
- onBlur={[Function]}
- onClick={[Function]}
- onDragLeave={[Function]}
- onFocus={[Function]}
- onKeyDown={[Function]}
- onKeyUp={[Function]}
- onMouseDown={[Function]}
- onMouseLeave={[Function]}
- onMouseUp={[Function]}
- onTouchEnd={[Function]}
- onTouchMove={[Function]}
- onTouchStart={[Function]}
- tabIndex={0}
- type="button"
- >
- <span
- className="MuiButton-label text-16-bold"
- >
- consent_outdated.yes
- </span>
- <WithStyles(memo)
- center={false}
- >
- <ForwardRef(TouchRipple)
- center={false}
- classes={
- Object {
- "child": "MuiTouchRipple-child",
- "childLeaving": "MuiTouchRipple-childLeaving",
- "childPulsate": "MuiTouchRipple-childPulsate",
- "ripple": "MuiTouchRipple-ripple",
- "ripplePulsate": "MuiTouchRipple-ripplePulsate",
- "rippleVisible": "MuiTouchRipple-rippleVisible",
- "root": "MuiTouchRipple-root",
- }
- }
- >
- <span
- className="MuiTouchRipple-root"
- >
- <TransitionGroup
- childFactory={[Function]}
- component={null}
- exit={true}
- />
- </span>
- </ForwardRef(TouchRipple)>
- </WithStyles(memo)>
- </button>
- </ForwardRef(ButtonBase)>
- </WithStyles(ForwardRef(ButtonBase))>
- </ForwardRef(Button)>
- </WithStyles(ForwardRef(Button))>
- </div>
- </div>
- </div>
- </ForwardRef(Paper)>
- </WithStyles(ForwardRef(Paper))>
- </div>
- </Transition>
- </ForwardRef(Fade)>
- <div
- data-test="sentinelEnd"
- tabIndex={0}
- />
- </Unstable_TrapFocus>
- </div>
- </Portal>
- </ForwardRef(Portal)>
- </ForwardRef(Modal)>
- </ForwardRef(Dialog)>
- </WithStyles(ForwardRef(Dialog))>
- </ExpiredConsentModal>
-</Provider>
+ consent_outdated.no
+ </span>
+ <span
+ class="MuiTouchRipple-root"
+ />
+ </button>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div
+ data-test="sentinelEnd"
+ tabindex="0"
+ />
+ </div>
+</body>
`;
diff --git a/src/components/Connection/ExpiredConsentModal/expiredConsentModal.scss b/src/components/Connection/ExpiredConsentModal/expiredConsentModal.scss
index c98e678e88aee9d88611af579fc0f3cfcfab04fc..929dea4460217dddf286f52f02f557ff0b8ec407 100644
--- a/src/components/Connection/ExpiredConsentModal/expiredConsentModal.scss
+++ b/src/components/Connection/ExpiredConsentModal/expiredConsentModal.scss
@@ -1,12 +1,18 @@
@import 'src/styles/base/color';
.expired-consent-modal {
+ display: flex;
+ flex-direction: column;
+ gap: 1rem;
+ color: $grey-bright;
+
.icon-main {
display: flex;
svg {
margin: auto;
}
}
+
.title {
text-align: center;
&.electricity {
@@ -16,14 +22,10 @@
color: $gas-color;
}
}
- .text1 {
- color: $grey-bright;
- margin: 1rem 0;
- }
+
.buttons {
display: flex;
- button.btn-secondary-positive {
- margin-right: 1rem;
- }
+ flex-direction: column;
+ gap: 1rem;
}
}
diff --git a/src/components/Connection/GRDFConnect/GrdfBill.tsx b/src/components/Connection/GRDFConnect/GrdfBill.tsx
index 37a52dd2b6dbdb51127424dcc9ea802d408a1b7c..2ca3a67747bd2612f56271b14658dd7d388b5901 100644
--- a/src/components/Connection/GRDFConnect/GrdfBill.tsx
+++ b/src/components/Connection/GRDFConnect/GrdfBill.tsx
@@ -30,19 +30,13 @@ const GrdfBill = () => {
<Button
aria-label={t('auth.grdfgrandlyon.accessibility.connect')}
onClick={() => dispatch(openConnectionModal(true))}
- classes={{
- root: 'btn-highlight',
- label: 'text-16-bold',
- }}
+ className="btnPrimary"
>
{t('auth.grdfgrandlyon.connect')}
</Button>
{currentFluidStatus.firstDataDate && (
<Button
- classes={{
- root: 'btn-secondary',
- label: 'text-16-bold',
- }}
+ className="btnSecondary"
onClick={() => dispatch(setShowOfflineData(true))}
>
{t('auth.button_showOfflineData')}
diff --git a/src/components/Connection/GRDFConnect/GrdfForm.tsx b/src/components/Connection/GRDFConnect/GrdfForm.tsx
index 070083929ac756efb6df51a5af879f4d8b00ab2a..77dd226b7ab96be2a0d7c3c5f51ecdc9017371e3 100644
--- a/src/components/Connection/GRDFConnect/GrdfForm.tsx
+++ b/src/components/Connection/GRDFConnect/GrdfForm.tsx
@@ -25,7 +25,7 @@ const GrdfForm = () => {
aria-label={t('auth.accessibility.button_connect')}
onClick={() => dispatch(openConnectionModal(true))}
classes={{
- root: 'btn-highlight',
+ root: 'btnPrimary',
label: 'text-18-bold',
}}
>
diff --git a/src/components/Connection/GRDFDeleteAccountModal/DeleteGRDFAccountModal.spec.tsx b/src/components/Connection/GRDFDeleteAccountModal/DeleteGRDFAccountModal.spec.tsx
index ea767693397e0a5b816c5b3b0929a703902c491b..9826c86b36f19a970fdf49bf23a18ff45ca65ae1 100644
--- a/src/components/Connection/GRDFDeleteAccountModal/DeleteGRDFAccountModal.spec.tsx
+++ b/src/components/Connection/GRDFDeleteAccountModal/DeleteGRDFAccountModal.spec.tsx
@@ -1,31 +1,31 @@
-import { Button } from '@material-ui/core'
-import { mount } from 'enzyme'
-import toJson from 'enzyme-to-json'
+import { render, screen } from '@testing-library/react'
+import { userEvent } from '@testing-library/user-event'
import React from 'react'
import DeleteGRDFAccountModal from './DeleteGRDFAccountModal'
describe('DeleteGRDFAccountModal component', () => {
it('should be rendered correctly', () => {
- const component = mount(
+ const { baseElement } = render(
<DeleteGRDFAccountModal
open={true}
handleCloseClick={jest.fn()}
deleteAccount={jest.fn()}
/>
)
- expect(toJson(component)).toMatchSnapshot()
+ expect(baseElement).toMatchSnapshot()
})
- it('should launch the deletion process and close modal', () => {
+ it('should launch the deletion process and close modal', async () => {
const mockDelete = jest.fn()
- const mockClose = jest.fn()
- const component = mount(
+ render(
<DeleteGRDFAccountModal
open={true}
- handleCloseClick={mockClose}
+ handleCloseClick={jest.fn()}
deleteAccount={mockDelete}
/>
)
- component.find(Button).at(1).simulate('click')
+ await userEvent.click(
+ screen.getByRole('button', { name: 'delete_grdf_modal.go' })
+ )
expect(mockDelete).toHaveBeenCalledTimes(1)
})
})
diff --git a/src/components/Connection/GRDFDeleteAccountModal/DeleteGRDFAccountModal.tsx b/src/components/Connection/GRDFDeleteAccountModal/DeleteGRDFAccountModal.tsx
index ace29175463e200c4de63077f52ecaf906930b70..f47a29865b9029c859b923bdfb9be1e28ceb91d4 100644
--- a/src/components/Connection/GRDFDeleteAccountModal/DeleteGRDFAccountModal.tsx
+++ b/src/components/Connection/GRDFDeleteAccountModal/DeleteGRDFAccountModal.tsx
@@ -60,26 +60,20 @@ const DeleteGRDFAccountModal = ({
{t(`delete_grdf_modal.text3`)}
</div>
<div className="buttons">
- <Button
- aria-label={t(`delete_grdf_modal.cancel`)}
- onClick={handleCloseClick}
- classes={{
- root: 'btn-secondary-positive',
- label: 'text-16-normal',
- }}
- >
- {t(`delete_grdf_modal.cancel`)}
- </Button>
<Button
aria-label={t(`delete_grdf_modal.go`)}
onClick={handleDelete}
- classes={{
- root: 'btn-highlight',
- label: 'text-16-bold',
- }}
+ className="btnPrimary"
>
{t(`delete_grdf_modal.go`)}
</Button>
+ <Button
+ aria-label={t(`delete_grdf_modal.cancel`)}
+ onClick={handleCloseClick}
+ className="btnSecondary"
+ >
+ {t(`delete_grdf_modal.cancel`)}
+ </Button>
</div>
</div>
</Dialog>
diff --git a/src/components/Connection/GRDFDeleteAccountModal/__snapshots__/DeleteGRDFAccountModal.spec.tsx.snap b/src/components/Connection/GRDFDeleteAccountModal/__snapshots__/DeleteGRDFAccountModal.spec.tsx.snap
index a4e7f3907e8a2eb069fa1ead7e820147dc35f397..901dd8ffa45493404d270d6f3fb91fd995d534a2 100644
--- a/src/components/Connection/GRDFDeleteAccountModal/__snapshots__/DeleteGRDFAccountModal.spec.tsx.snap
+++ b/src/components/Connection/GRDFDeleteAccountModal/__snapshots__/DeleteGRDFAccountModal.spec.tsx.snap
@@ -1,1168 +1,137 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`DeleteGRDFAccountModal component should be rendered correctly 1`] = `
-<DeleteGRDFAccountModal
- deleteAccount={[MockFunction]}
- handleCloseClick={[MockFunction]}
- open={true}
+<body
+ style="padding-right: 0px; overflow: hidden;"
>
- <WithStyles(ForwardRef(Dialog))
- aria-labelledby="accessibility-title"
- classes={
- Object {
- "paper": "modal-paper",
- "root": "modal-root",
- }
- }
- onClose={[MockFunction]}
- open={true}
+ <div
+ aria-hidden="true"
+ />
+ <div
+ class="MuiDialog-root modal-root"
+ role="presentation"
+ style="position: fixed; z-index: 1300; right: 0px; bottom: 0px; top: 0px; left: 0px;"
>
- <ForwardRef(Dialog)
- aria-labelledby="accessibility-title"
- classes={
- Object {
- "container": "MuiDialog-container",
- "paper": "MuiDialog-paper modal-paper",
- "paperFullScreen": "MuiDialog-paperFullScreen",
- "paperFullWidth": "MuiDialog-paperFullWidth",
- "paperScrollBody": "MuiDialog-paperScrollBody",
- "paperScrollPaper": "MuiDialog-paperScrollPaper",
- "paperWidthFalse": "MuiDialog-paperWidthFalse",
- "paperWidthLg": "MuiDialog-paperWidthLg",
- "paperWidthMd": "MuiDialog-paperWidthMd",
- "paperWidthSm": "MuiDialog-paperWidthSm",
- "paperWidthXl": "MuiDialog-paperWidthXl",
- "paperWidthXs": "MuiDialog-paperWidthXs",
- "root": "MuiDialog-root modal-root",
- "scrollBody": "MuiDialog-scrollBody",
- "scrollPaper": "MuiDialog-scrollPaper",
- }
- }
- onClose={[MockFunction]}
- open={true}
+ <div
+ aria-hidden="true"
+ class="MuiBackdrop-root"
+ style="opacity: 1; webkit-transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"
+ />
+ <div
+ data-test="sentinelStart"
+ tabindex="0"
+ />
+ <div
+ class="MuiDialog-container MuiDialog-scrollPaper"
+ role="none presentation"
+ style="opacity: 1; webkit-transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"
+ tabindex="-1"
>
- <ForwardRef(Modal)
- BackdropComponent={
- Object {
- "$$typeof": Symbol(react.forward_ref),
- "Naked": Object {
- "$$typeof": Symbol(react.forward_ref),
- "propTypes": Object {
- "children": [Function],
- "className": [Function],
- "classes": [Function],
- "invisible": [Function],
- "open": [Function],
- "transitionDuration": [Function],
- },
- "render": [Function],
- },
- "displayName": "WithStyles(ForwardRef(Backdrop))",
- "options": Object {
- "defaultTheme": Object {
- "breakpoints": Object {
- "between": [Function],
- "down": [Function],
- "keys": Array [
- "xs",
- "sm",
- "md",
- "lg",
- "xl",
- ],
- "only": [Function],
- "up": [Function],
- "values": Object {
- "lg": 1280,
- "md": 960,
- "sm": 600,
- "xl": 1920,
- "xs": 0,
- },
- "width": [Function],
- },
- "direction": "ltr",
- "mixins": Object {
- "gutters": [Function],
- "toolbar": Object {
- "@media (min-width:0px) and (orientation: landscape)": Object {
- "minHeight": 48,
- },
- "@media (min-width:600px)": Object {
- "minHeight": 64,
- },
- "minHeight": 56,
- },
- },
- "overrides": Object {},
- "palette": Object {
- "action": Object {
- "activatedOpacity": 0.12,
- "active": "rgba(0, 0, 0, 0.54)",
- "disabled": "rgba(0, 0, 0, 0.26)",
- "disabledBackground": "rgba(0, 0, 0, 0.12)",
- "disabledOpacity": 0.38,
- "focus": "rgba(0, 0, 0, 0.12)",
- "focusOpacity": 0.12,
- "hover": "rgba(0, 0, 0, 0.04)",
- "hoverOpacity": 0.04,
- "selected": "rgba(0, 0, 0, 0.08)",
- "selectedOpacity": 0.08,
- },
- "augmentColor": [Function],
- "background": Object {
- "default": "#fafafa",
- "paper": "#fff",
- },
- "common": Object {
- "black": "#000",
- "white": "#fff",
- },
- "contrastThreshold": 3,
- "divider": "rgba(0, 0, 0, 0.12)",
- "error": Object {
- "contrastText": "#fff",
- "dark": "#d32f2f",
- "light": "#e57373",
- "main": "#f44336",
- },
- "getContrastText": [Function],
- "grey": Object {
- "100": "#f5f5f5",
- "200": "#eeeeee",
- "300": "#e0e0e0",
- "400": "#bdbdbd",
- "50": "#fafafa",
- "500": "#9e9e9e",
- "600": "#757575",
- "700": "#616161",
- "800": "#424242",
- "900": "#212121",
- "A100": "#d5d5d5",
- "A200": "#aaaaaa",
- "A400": "#303030",
- "A700": "#616161",
- },
- "info": Object {
- "contrastText": "#fff",
- "dark": "#1976d2",
- "light": "#64b5f6",
- "main": "#2196f3",
- },
- "primary": Object {
- "contrastText": "#fff",
- "dark": "#303f9f",
- "light": "#7986cb",
- "main": "#3f51b5",
- },
- "secondary": Object {
- "contrastText": "#fff",
- "dark": "#c51162",
- "light": "#ff4081",
- "main": "#f50057",
- },
- "success": Object {
- "contrastText": "rgba(0, 0, 0, 0.87)",
- "dark": "#388e3c",
- "light": "#81c784",
- "main": "#4caf50",
- },
- "text": Object {
- "disabled": "rgba(0, 0, 0, 0.38)",
- "hint": "rgba(0, 0, 0, 0.38)",
- "primary": "rgba(0, 0, 0, 0.87)",
- "secondary": "rgba(0, 0, 0, 0.54)",
- },
- "tonalOffset": 0.2,
- "type": "light",
- "warning": Object {
- "contrastText": "rgba(0, 0, 0, 0.87)",
- "dark": "#f57c00",
- "light": "#ffb74d",
- "main": "#ff9800",
- },
- },
- "props": Object {},
- "shadows": Array [
- "none",
- "0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12)",
- "0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12)",
- "0px 3px 3px -2px rgba(0,0,0,0.2),0px 3px 4px 0px rgba(0,0,0,0.14),0px 1px 8px 0px rgba(0,0,0,0.12)",
- "0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12)",
- "0px 3px 5px -1px rgba(0,0,0,0.2),0px 5px 8px 0px rgba(0,0,0,0.14),0px 1px 14px 0px rgba(0,0,0,0.12)",
- "0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12)",
- "0px 4px 5px -2px rgba(0,0,0,0.2),0px 7px 10px 1px rgba(0,0,0,0.14),0px 2px 16px 1px rgba(0,0,0,0.12)",
- "0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12)",
- "0px 5px 6px -3px rgba(0,0,0,0.2),0px 9px 12px 1px rgba(0,0,0,0.14),0px 3px 16px 2px rgba(0,0,0,0.12)",
- "0px 6px 6px -3px rgba(0,0,0,0.2),0px 10px 14px 1px rgba(0,0,0,0.14),0px 4px 18px 3px rgba(0,0,0,0.12)",
- "0px 6px 7px -4px rgba(0,0,0,0.2),0px 11px 15px 1px rgba(0,0,0,0.14),0px 4px 20px 3px rgba(0,0,0,0.12)",
- "0px 7px 8px -4px rgba(0,0,0,0.2),0px 12px 17px 2px rgba(0,0,0,0.14),0px 5px 22px 4px rgba(0,0,0,0.12)",
- "0px 7px 8px -4px rgba(0,0,0,0.2),0px 13px 19px 2px rgba(0,0,0,0.14),0px 5px 24px 4px rgba(0,0,0,0.12)",
- "0px 7px 9px -4px rgba(0,0,0,0.2),0px 14px 21px 2px rgba(0,0,0,0.14),0px 5px 26px 4px rgba(0,0,0,0.12)",
- "0px 8px 9px -5px rgba(0,0,0,0.2),0px 15px 22px 2px rgba(0,0,0,0.14),0px 6px 28px 5px rgba(0,0,0,0.12)",
- "0px 8px 10px -5px rgba(0,0,0,0.2),0px 16px 24px 2px rgba(0,0,0,0.14),0px 6px 30px 5px rgba(0,0,0,0.12)",
- "0px 8px 11px -5px rgba(0,0,0,0.2),0px 17px 26px 2px rgba(0,0,0,0.14),0px 6px 32px 5px rgba(0,0,0,0.12)",
- "0px 9px 11px -5px rgba(0,0,0,0.2),0px 18px 28px 2px rgba(0,0,0,0.14),0px 7px 34px 6px rgba(0,0,0,0.12)",
- "0px 9px 12px -6px rgba(0,0,0,0.2),0px 19px 29px 2px rgba(0,0,0,0.14),0px 7px 36px 6px rgba(0,0,0,0.12)",
- "0px 10px 13px -6px rgba(0,0,0,0.2),0px 20px 31px 3px rgba(0,0,0,0.14),0px 8px 38px 7px rgba(0,0,0,0.12)",
- "0px 10px 13px -6px rgba(0,0,0,0.2),0px 21px 33px 3px rgba(0,0,0,0.14),0px 8px 40px 7px rgba(0,0,0,0.12)",
- "0px 10px 14px -6px rgba(0,0,0,0.2),0px 22px 35px 3px rgba(0,0,0,0.14),0px 8px 42px 7px rgba(0,0,0,0.12)",
- "0px 11px 14px -7px rgba(0,0,0,0.2),0px 23px 36px 3px rgba(0,0,0,0.14),0px 9px 44px 8px rgba(0,0,0,0.12)",
- "0px 11px 15px -7px rgba(0,0,0,0.2),0px 24px 38px 3px rgba(0,0,0,0.14),0px 9px 46px 8px rgba(0,0,0,0.12)",
- ],
- "shape": Object {
- "borderRadius": 4,
- },
- "spacing": [Function],
- "transitions": Object {
- "create": [Function],
- "duration": Object {
- "complex": 375,
- "enteringScreen": 225,
- "leavingScreen": 195,
- "short": 250,
- "shorter": 200,
- "shortest": 150,
- "standard": 300,
- },
- "easing": Object {
- "easeIn": "cubic-bezier(0.4, 0, 1, 1)",
- "easeInOut": "cubic-bezier(0.4, 0, 0.2, 1)",
- "easeOut": "cubic-bezier(0.0, 0, 0.2, 1)",
- "sharp": "cubic-bezier(0.4, 0, 0.6, 1)",
- },
- "getAutoHeightDuration": [Function],
- },
- "typography": Object {
- "body1": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "1rem",
- "fontWeight": 400,
- "letterSpacing": "0.00938em",
- "lineHeight": 1.5,
- },
- "body2": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "0.875rem",
- "fontWeight": 400,
- "letterSpacing": "0.01071em",
- "lineHeight": 1.43,
- },
- "button": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "0.875rem",
- "fontWeight": 500,
- "letterSpacing": "0.02857em",
- "lineHeight": 1.75,
- "textTransform": "uppercase",
- },
- "caption": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "0.75rem",
- "fontWeight": 400,
- "letterSpacing": "0.03333em",
- "lineHeight": 1.66,
- },
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": 14,
- "fontWeightBold": 700,
- "fontWeightLight": 300,
- "fontWeightMedium": 500,
- "fontWeightRegular": 400,
- "h1": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "6rem",
- "fontWeight": 300,
- "letterSpacing": "-0.01562em",
- "lineHeight": 1.167,
- },
- "h2": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "3.75rem",
- "fontWeight": 300,
- "letterSpacing": "-0.00833em",
- "lineHeight": 1.2,
- },
- "h3": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "3rem",
- "fontWeight": 400,
- "letterSpacing": "0em",
- "lineHeight": 1.167,
- },
- "h4": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "2.125rem",
- "fontWeight": 400,
- "letterSpacing": "0.00735em",
- "lineHeight": 1.235,
- },
- "h5": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "1.5rem",
- "fontWeight": 400,
- "letterSpacing": "0em",
- "lineHeight": 1.334,
- },
- "h6": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "1.25rem",
- "fontWeight": 500,
- "letterSpacing": "0.0075em",
- "lineHeight": 1.6,
- },
- "htmlFontSize": 16,
- "overline": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "0.75rem",
- "fontWeight": 400,
- "letterSpacing": "0.08333em",
- "lineHeight": 2.66,
- "textTransform": "uppercase",
- },
- "pxToRem": [Function],
- "round": [Function],
- "subtitle1": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "1rem",
- "fontWeight": 400,
- "letterSpacing": "0.00938em",
- "lineHeight": 1.75,
- },
- "subtitle2": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "0.875rem",
- "fontWeight": 500,
- "letterSpacing": "0.00714em",
- "lineHeight": 1.57,
- },
- },
- "zIndex": Object {
- "appBar": 1100,
- "drawer": 1200,
- "mobileStepper": 1000,
- "modal": 1300,
- "snackbar": 1400,
- "speedDial": 1050,
- "tooltip": 1500,
- },
- },
- "name": "MuiBackdrop",
- },
- "propTypes": Object {
- "classes": [Function],
- "innerRef": [Function],
- },
- "render": [Function],
- "useStyles": [Function],
- }
- }
- BackdropProps={
- Object {
- "transitionDuration": Object {
- "enter": 225,
- "exit": 195,
- },
- }
- }
- className="MuiDialog-root modal-root"
- closeAfterTransition={true}
- disableEscapeKeyDown={false}
- onClose={[MockFunction]}
- open={true}
+ <div
+ aria-labelledby="accessibility-title"
+ class="MuiPaper-root MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm MuiPaper-elevation24 MuiPaper-rounded"
+ role="dialog"
>
- <ForwardRef(Portal)
- disablePortal={false}
+ <div
+ id="accessibility-title"
>
- <Portal
- containerInfo={
- <body
- style="padding-right: 0px; overflow: hidden;"
- >
- <div
- class="MuiDialog-root modal-root"
- role="presentation"
- style="position: fixed; z-index: 1300; right: 0px; bottom: 0px; top: 0px; left: 0px;"
- >
- <div
- aria-hidden="true"
- class="MuiBackdrop-root"
- style="opacity: 1; webkit-transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"
- />
- <div
- data-test="sentinelStart"
- tabindex="0"
- />
- <div
- class="MuiDialog-container MuiDialog-scrollPaper"
- role="none presentation"
- style="opacity: 1; webkit-transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"
- tabindex="-1"
- >
- <div
- aria-labelledby="accessibility-title"
- class="MuiPaper-root MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm MuiPaper-elevation24 MuiPaper-rounded"
- role="dialog"
- >
- <div
- id="accessibility-title"
- >
- consumption_visualizer.modal.window_title
- </div>
- <button
- aria-label="consumption_visualizer.modal.close"
- class="MuiButtonBase-root MuiIconButton-root modal-paper-close-button"
- tabindex="0"
- type="button"
- >
- <span
- class="MuiIconButton-label"
- >
- <svg
- class="styles__icon___23x3R"
- height="16"
- width="16"
- >
- <use
- xlink:href="#test-file-stub"
- />
- </svg>
- </span>
- <span
- class="MuiTouchRipple-root"
- />
- </button>
- <div
- class="delete-grdf-modal"
- >
- <div
- class="icon-main"
- >
- <svg
- class="styles__icon___23x3R"
- height="135"
- width="135"
- >
- <use
- xlink:href="#test-file-stub"
- />
- </svg>
- </div>
- <div
- class="text-15-normal text1"
- >
- delete_grdf_modal.text1
- </div>
- <div
- class="text-16-normal text2"
- >
- delete_grdf_modal.text2
- </div>
- <div
- class="text-15-normal text3"
- >
- delete_grdf_modal.text3
- </div>
- <div
- class="buttons"
- >
- <button
- aria-label="delete_grdf_modal.cancel"
- class="MuiButtonBase-root MuiButton-root btn-secondary-positive MuiButton-text"
- tabindex="0"
- type="button"
- >
- <span
- class="MuiButton-label text-16-normal"
- >
- delete_grdf_modal.cancel
- </span>
- <span
- class="MuiTouchRipple-root"
- />
- </button>
- <button
- aria-label="delete_grdf_modal.go"
- class="MuiButtonBase-root MuiButton-root btn-highlight MuiButton-text"
- tabindex="0"
- type="button"
- >
- <span
- class="MuiButton-label text-16-bold"
- >
- delete_grdf_modal.go
- </span>
- <span
- class="MuiTouchRipple-root"
- />
- </button>
- </div>
- </div>
- </div>
- </div>
- <div
- data-test="sentinelEnd"
- tabindex="0"
- />
- </div>
- </body>
- }
+ consumption_visualizer.modal.window_title
+ </div>
+ <button
+ aria-label="consumption_visualizer.modal.close"
+ class="MuiButtonBase-root MuiIconButton-root modal-paper-close-button"
+ tabindex="0"
+ type="button"
+ >
+ <span
+ class="MuiIconButton-label"
+ >
+ <svg
+ class="styles__icon___23x3R"
+ height="16"
+ width="16"
+ >
+ <use
+ xlink:href="#test-file-stub"
+ />
+ </svg>
+ </span>
+ <span
+ class="MuiTouchRipple-root"
+ />
+ </button>
+ <div
+ class="delete-grdf-modal"
+ >
+ <div
+ class="icon-main"
>
- <div
- className="MuiDialog-root modal-root"
- onKeyDown={[Function]}
- role="presentation"
- style={
- Object {
- "bottom": 0,
- "left": 0,
- "position": "fixed",
- "right": 0,
- "top": 0,
- "zIndex": 1300,
- }
- }
+ <svg
+ class="styles__icon___23x3R"
+ height="135"
+ width="135"
>
- <WithStyles(ForwardRef(Backdrop))
- onClick={[Function]}
- open={true}
- transitionDuration={
- Object {
- "enter": 225,
- "exit": 195,
- }
- }
+ <use
+ xlink:href="#test-file-stub"
+ />
+ </svg>
+ </div>
+ <div
+ class="text-15-normal text1"
+ >
+ delete_grdf_modal.text1
+ </div>
+ <div
+ class="text-16-normal text2"
+ >
+ delete_grdf_modal.text2
+ </div>
+ <div
+ class="text-15-normal text3"
+ >
+ delete_grdf_modal.text3
+ </div>
+ <div
+ class="buttons"
+ >
+ <button
+ aria-label="delete_grdf_modal.go"
+ class="MuiButtonBase-root MuiButton-root MuiButton-text btnPrimary"
+ tabindex="0"
+ type="button"
+ >
+ <span
+ class="MuiButton-label"
>
- <ForwardRef(Backdrop)
- classes={
- Object {
- "invisible": "MuiBackdrop-invisible",
- "root": "MuiBackdrop-root",
- }
- }
- onClick={[Function]}
- open={true}
- transitionDuration={
- Object {
- "enter": 225,
- "exit": 195,
- }
- }
- >
- <ForwardRef(Fade)
- in={true}
- onClick={[Function]}
- timeout={
- Object {
- "enter": 225,
- "exit": 195,
- }
- }
- >
- <Transition
- appear={true}
- enter={true}
- exit={true}
- in={true}
- mountOnEnter={false}
- onClick={[Function]}
- onEnter={[Function]}
- onEntered={[Function]}
- onEntering={[Function]}
- onExit={[Function]}
- onExited={[Function]}
- onExiting={[Function]}
- timeout={
- Object {
- "enter": 225,
- "exit": 195,
- }
- }
- unmountOnExit={false}
- >
- <div
- aria-hidden={true}
- className="MuiBackdrop-root"
- onClick={[Function]}
- style={
- Object {
- "opacity": 1,
- "visibility": undefined,
- }
- }
- />
- </Transition>
- </ForwardRef(Fade)>
- </ForwardRef(Backdrop)>
- </WithStyles(ForwardRef(Backdrop))>
- <Unstable_TrapFocus
- disableAutoFocus={false}
- disableEnforceFocus={false}
- disableRestoreFocus={false}
- getDoc={[Function]}
- isEnabled={[Function]}
- open={true}
+ delete_grdf_modal.go
+ </span>
+ <span
+ class="MuiTouchRipple-root"
+ />
+ </button>
+ <button
+ aria-label="delete_grdf_modal.cancel"
+ class="MuiButtonBase-root MuiButton-root MuiButton-text btnSecondary"
+ tabindex="0"
+ type="button"
+ >
+ <span
+ class="MuiButton-label"
>
- <div
- data-test="sentinelStart"
- tabIndex={0}
- />
- <ForwardRef(Fade)
- appear={true}
- in={true}
- onEnter={[Function]}
- onExited={[Function]}
- role="none presentation"
- tabIndex="-1"
- timeout={
- Object {
- "enter": 225,
- "exit": 195,
- }
- }
- >
- <Transition
- appear={true}
- enter={true}
- exit={true}
- in={true}
- mountOnEnter={false}
- onEnter={[Function]}
- onEntered={[Function]}
- onEntering={[Function]}
- onExit={[Function]}
- onExited={[Function]}
- onExiting={[Function]}
- role="none presentation"
- tabIndex="-1"
- timeout={
- Object {
- "enter": 225,
- "exit": 195,
- }
- }
- unmountOnExit={false}
- >
- <div
- className="MuiDialog-container MuiDialog-scrollPaper"
- onMouseDown={[Function]}
- onMouseUp={[Function]}
- role="none presentation"
- style={
- Object {
- "opacity": 1,
- "visibility": undefined,
- }
- }
- tabIndex="-1"
- >
- <WithStyles(ForwardRef(Paper))
- aria-labelledby="accessibility-title"
- className="MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm"
- elevation={24}
- role="dialog"
- >
- <ForwardRef(Paper)
- aria-labelledby="accessibility-title"
- className="MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm"
- classes={
- Object {
- "elevation0": "MuiPaper-elevation0",
- "elevation1": "MuiPaper-elevation1",
- "elevation10": "MuiPaper-elevation10",
- "elevation11": "MuiPaper-elevation11",
- "elevation12": "MuiPaper-elevation12",
- "elevation13": "MuiPaper-elevation13",
- "elevation14": "MuiPaper-elevation14",
- "elevation15": "MuiPaper-elevation15",
- "elevation16": "MuiPaper-elevation16",
- "elevation17": "MuiPaper-elevation17",
- "elevation18": "MuiPaper-elevation18",
- "elevation19": "MuiPaper-elevation19",
- "elevation2": "MuiPaper-elevation2",
- "elevation20": "MuiPaper-elevation20",
- "elevation21": "MuiPaper-elevation21",
- "elevation22": "MuiPaper-elevation22",
- "elevation23": "MuiPaper-elevation23",
- "elevation24": "MuiPaper-elevation24",
- "elevation3": "MuiPaper-elevation3",
- "elevation4": "MuiPaper-elevation4",
- "elevation5": "MuiPaper-elevation5",
- "elevation6": "MuiPaper-elevation6",
- "elevation7": "MuiPaper-elevation7",
- "elevation8": "MuiPaper-elevation8",
- "elevation9": "MuiPaper-elevation9",
- "outlined": "MuiPaper-outlined",
- "root": "MuiPaper-root",
- "rounded": "MuiPaper-rounded",
- }
- }
- elevation={24}
- role="dialog"
- >
- <div
- aria-labelledby="accessibility-title"
- className="MuiPaper-root MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm MuiPaper-elevation24 MuiPaper-rounded"
- role="dialog"
- >
- <div
- id="accessibility-title"
- >
- consumption_visualizer.modal.window_title
- </div>
- <WithStyles(ForwardRef(IconButton))
- aria-label="consumption_visualizer.modal.close"
- className="modal-paper-close-button"
- onClick={[MockFunction]}
- >
- <ForwardRef(IconButton)
- aria-label="consumption_visualizer.modal.close"
- className="modal-paper-close-button"
- classes={
- Object {
- "colorInherit": "MuiIconButton-colorInherit",
- "colorPrimary": "MuiIconButton-colorPrimary",
- "colorSecondary": "MuiIconButton-colorSecondary",
- "disabled": "Mui-disabled",
- "edgeEnd": "MuiIconButton-edgeEnd",
- "edgeStart": "MuiIconButton-edgeStart",
- "label": "MuiIconButton-label",
- "root": "MuiIconButton-root",
- "sizeSmall": "MuiIconButton-sizeSmall",
- }
- }
- onClick={[MockFunction]}
- >
- <WithStyles(ForwardRef(ButtonBase))
- aria-label="consumption_visualizer.modal.close"
- centerRipple={true}
- className="MuiIconButton-root modal-paper-close-button"
- disabled={false}
- focusRipple={true}
- onClick={[MockFunction]}
- >
- <ForwardRef(ButtonBase)
- aria-label="consumption_visualizer.modal.close"
- centerRipple={true}
- className="MuiIconButton-root modal-paper-close-button"
- classes={
- Object {
- "disabled": "Mui-disabled",
- "focusVisible": "Mui-focusVisible",
- "root": "MuiButtonBase-root",
- }
- }
- disabled={false}
- focusRipple={true}
- onClick={[MockFunction]}
- >
- <button
- aria-label="consumption_visualizer.modal.close"
- className="MuiButtonBase-root MuiIconButton-root modal-paper-close-button"
- disabled={false}
- onBlur={[Function]}
- onClick={[MockFunction]}
- onDragLeave={[Function]}
- onFocus={[Function]}
- onKeyDown={[Function]}
- onKeyUp={[Function]}
- onMouseDown={[Function]}
- onMouseLeave={[Function]}
- onMouseUp={[Function]}
- onTouchEnd={[Function]}
- onTouchMove={[Function]}
- onTouchStart={[Function]}
- tabIndex={0}
- type="button"
- >
- <span
- className="MuiIconButton-label"
- >
- <Icon
- icon="test-file-stub"
- size={16}
- spin={false}
- >
- <Component
- className="styles__icon___23x3R"
- height={16}
- style={Object {}}
- width={16}
- >
- <svg
- className="styles__icon___23x3R"
- height={16}
- style={Object {}}
- width={16}
- >
- <use
- xlinkHref="#test-file-stub"
- />
- </svg>
- </Component>
- </Icon>
- </span>
- <WithStyles(memo)
- center={true}
- >
- <ForwardRef(TouchRipple)
- center={true}
- classes={
- Object {
- "child": "MuiTouchRipple-child",
- "childLeaving": "MuiTouchRipple-childLeaving",
- "childPulsate": "MuiTouchRipple-childPulsate",
- "ripple": "MuiTouchRipple-ripple",
- "ripplePulsate": "MuiTouchRipple-ripplePulsate",
- "rippleVisible": "MuiTouchRipple-rippleVisible",
- "root": "MuiTouchRipple-root",
- }
- }
- >
- <span
- className="MuiTouchRipple-root"
- >
- <TransitionGroup
- childFactory={[Function]}
- component={null}
- exit={true}
- />
- </span>
- </ForwardRef(TouchRipple)>
- </WithStyles(memo)>
- </button>
- </ForwardRef(ButtonBase)>
- </WithStyles(ForwardRef(ButtonBase))>
- </ForwardRef(IconButton)>
- </WithStyles(ForwardRef(IconButton))>
- <div
- className="delete-grdf-modal"
- >
- <div
- className="icon-main"
- >
- <Icon
- icon="test-file-stub"
- size={135}
- spin={false}
- >
- <Component
- className="styles__icon___23x3R"
- height={135}
- style={Object {}}
- width={135}
- >
- <svg
- className="styles__icon___23x3R"
- height={135}
- style={Object {}}
- width={135}
- >
- <use
- xlinkHref="#test-file-stub"
- />
- </svg>
- </Component>
- </Icon>
- </div>
- <div
- className="text-15-normal text1"
- >
- delete_grdf_modal.text1
- </div>
- <div
- className="text-16-normal text2"
- >
- delete_grdf_modal.text2
- </div>
- <div
- className="text-15-normal text3"
- >
- delete_grdf_modal.text3
- </div>
- <div
- className="buttons"
- >
- <WithStyles(ForwardRef(Button))
- aria-label="delete_grdf_modal.cancel"
- classes={
- Object {
- "label": "text-16-normal",
- "root": "btn-secondary-positive",
- }
- }
- onClick={[MockFunction]}
- >
- <ForwardRef(Button)
- aria-label="delete_grdf_modal.cancel"
- classes={
- Object {
- "colorInherit": "MuiButton-colorInherit",
- "contained": "MuiButton-contained",
- "containedPrimary": "MuiButton-containedPrimary",
- "containedSecondary": "MuiButton-containedSecondary",
- "containedSizeLarge": "MuiButton-containedSizeLarge",
- "containedSizeSmall": "MuiButton-containedSizeSmall",
- "disableElevation": "MuiButton-disableElevation",
- "disabled": "Mui-disabled",
- "endIcon": "MuiButton-endIcon",
- "focusVisible": "Mui-focusVisible",
- "fullWidth": "MuiButton-fullWidth",
- "iconSizeLarge": "MuiButton-iconSizeLarge",
- "iconSizeMedium": "MuiButton-iconSizeMedium",
- "iconSizeSmall": "MuiButton-iconSizeSmall",
- "label": "MuiButton-label text-16-normal",
- "outlined": "MuiButton-outlined",
- "outlinedPrimary": "MuiButton-outlinedPrimary",
- "outlinedSecondary": "MuiButton-outlinedSecondary",
- "outlinedSizeLarge": "MuiButton-outlinedSizeLarge",
- "outlinedSizeSmall": "MuiButton-outlinedSizeSmall",
- "root": "MuiButton-root btn-secondary-positive",
- "sizeLarge": "MuiButton-sizeLarge",
- "sizeSmall": "MuiButton-sizeSmall",
- "startIcon": "MuiButton-startIcon",
- "text": "MuiButton-text",
- "textPrimary": "MuiButton-textPrimary",
- "textSecondary": "MuiButton-textSecondary",
- "textSizeLarge": "MuiButton-textSizeLarge",
- "textSizeSmall": "MuiButton-textSizeSmall",
- }
- }
- onClick={[MockFunction]}
- >
- <WithStyles(ForwardRef(ButtonBase))
- aria-label="delete_grdf_modal.cancel"
- className="MuiButton-root btn-secondary-positive MuiButton-text"
- component="button"
- disabled={false}
- focusRipple={true}
- focusVisibleClassName="Mui-focusVisible"
- onClick={[MockFunction]}
- type="button"
- >
- <ForwardRef(ButtonBase)
- aria-label="delete_grdf_modal.cancel"
- className="MuiButton-root btn-secondary-positive MuiButton-text"
- classes={
- Object {
- "disabled": "Mui-disabled",
- "focusVisible": "Mui-focusVisible",
- "root": "MuiButtonBase-root",
- }
- }
- component="button"
- disabled={false}
- focusRipple={true}
- focusVisibleClassName="Mui-focusVisible"
- onClick={[MockFunction]}
- type="button"
- >
- <button
- aria-label="delete_grdf_modal.cancel"
- className="MuiButtonBase-root MuiButton-root btn-secondary-positive MuiButton-text"
- disabled={false}
- onBlur={[Function]}
- onClick={[MockFunction]}
- onDragLeave={[Function]}
- onFocus={[Function]}
- onKeyDown={[Function]}
- onKeyUp={[Function]}
- onMouseDown={[Function]}
- onMouseLeave={[Function]}
- onMouseUp={[Function]}
- onTouchEnd={[Function]}
- onTouchMove={[Function]}
- onTouchStart={[Function]}
- tabIndex={0}
- type="button"
- >
- <span
- className="MuiButton-label text-16-normal"
- >
- delete_grdf_modal.cancel
- </span>
- <WithStyles(memo)
- center={false}
- >
- <ForwardRef(TouchRipple)
- center={false}
- classes={
- Object {
- "child": "MuiTouchRipple-child",
- "childLeaving": "MuiTouchRipple-childLeaving",
- "childPulsate": "MuiTouchRipple-childPulsate",
- "ripple": "MuiTouchRipple-ripple",
- "ripplePulsate": "MuiTouchRipple-ripplePulsate",
- "rippleVisible": "MuiTouchRipple-rippleVisible",
- "root": "MuiTouchRipple-root",
- }
- }
- >
- <span
- className="MuiTouchRipple-root"
- >
- <TransitionGroup
- childFactory={[Function]}
- component={null}
- exit={true}
- />
- </span>
- </ForwardRef(TouchRipple)>
- </WithStyles(memo)>
- </button>
- </ForwardRef(ButtonBase)>
- </WithStyles(ForwardRef(ButtonBase))>
- </ForwardRef(Button)>
- </WithStyles(ForwardRef(Button))>
- <WithStyles(ForwardRef(Button))
- aria-label="delete_grdf_modal.go"
- classes={
- Object {
- "label": "text-16-bold",
- "root": "btn-highlight",
- }
- }
- onClick={[Function]}
- >
- <ForwardRef(Button)
- aria-label="delete_grdf_modal.go"
- classes={
- Object {
- "colorInherit": "MuiButton-colorInherit",
- "contained": "MuiButton-contained",
- "containedPrimary": "MuiButton-containedPrimary",
- "containedSecondary": "MuiButton-containedSecondary",
- "containedSizeLarge": "MuiButton-containedSizeLarge",
- "containedSizeSmall": "MuiButton-containedSizeSmall",
- "disableElevation": "MuiButton-disableElevation",
- "disabled": "Mui-disabled",
- "endIcon": "MuiButton-endIcon",
- "focusVisible": "Mui-focusVisible",
- "fullWidth": "MuiButton-fullWidth",
- "iconSizeLarge": "MuiButton-iconSizeLarge",
- "iconSizeMedium": "MuiButton-iconSizeMedium",
- "iconSizeSmall": "MuiButton-iconSizeSmall",
- "label": "MuiButton-label text-16-bold",
- "outlined": "MuiButton-outlined",
- "outlinedPrimary": "MuiButton-outlinedPrimary",
- "outlinedSecondary": "MuiButton-outlinedSecondary",
- "outlinedSizeLarge": "MuiButton-outlinedSizeLarge",
- "outlinedSizeSmall": "MuiButton-outlinedSizeSmall",
- "root": "MuiButton-root btn-highlight",
- "sizeLarge": "MuiButton-sizeLarge",
- "sizeSmall": "MuiButton-sizeSmall",
- "startIcon": "MuiButton-startIcon",
- "text": "MuiButton-text",
- "textPrimary": "MuiButton-textPrimary",
- "textSecondary": "MuiButton-textSecondary",
- "textSizeLarge": "MuiButton-textSizeLarge",
- "textSizeSmall": "MuiButton-textSizeSmall",
- }
- }
- onClick={[Function]}
- >
- <WithStyles(ForwardRef(ButtonBase))
- aria-label="delete_grdf_modal.go"
- className="MuiButton-root btn-highlight MuiButton-text"
- component="button"
- disabled={false}
- focusRipple={true}
- focusVisibleClassName="Mui-focusVisible"
- onClick={[Function]}
- type="button"
- >
- <ForwardRef(ButtonBase)
- aria-label="delete_grdf_modal.go"
- className="MuiButton-root btn-highlight MuiButton-text"
- classes={
- Object {
- "disabled": "Mui-disabled",
- "focusVisible": "Mui-focusVisible",
- "root": "MuiButtonBase-root",
- }
- }
- component="button"
- disabled={false}
- focusRipple={true}
- focusVisibleClassName="Mui-focusVisible"
- onClick={[Function]}
- type="button"
- >
- <button
- aria-label="delete_grdf_modal.go"
- className="MuiButtonBase-root MuiButton-root btn-highlight MuiButton-text"
- disabled={false}
- onBlur={[Function]}
- onClick={[Function]}
- onDragLeave={[Function]}
- onFocus={[Function]}
- onKeyDown={[Function]}
- onKeyUp={[Function]}
- onMouseDown={[Function]}
- onMouseLeave={[Function]}
- onMouseUp={[Function]}
- onTouchEnd={[Function]}
- onTouchMove={[Function]}
- onTouchStart={[Function]}
- tabIndex={0}
- type="button"
- >
- <span
- className="MuiButton-label text-16-bold"
- >
- delete_grdf_modal.go
- </span>
- <WithStyles(memo)
- center={false}
- >
- <ForwardRef(TouchRipple)
- center={false}
- classes={
- Object {
- "child": "MuiTouchRipple-child",
- "childLeaving": "MuiTouchRipple-childLeaving",
- "childPulsate": "MuiTouchRipple-childPulsate",
- "ripple": "MuiTouchRipple-ripple",
- "ripplePulsate": "MuiTouchRipple-ripplePulsate",
- "rippleVisible": "MuiTouchRipple-rippleVisible",
- "root": "MuiTouchRipple-root",
- }
- }
- >
- <span
- className="MuiTouchRipple-root"
- >
- <TransitionGroup
- childFactory={[Function]}
- component={null}
- exit={true}
- />
- </span>
- </ForwardRef(TouchRipple)>
- </WithStyles(memo)>
- </button>
- </ForwardRef(ButtonBase)>
- </WithStyles(ForwardRef(ButtonBase))>
- </ForwardRef(Button)>
- </WithStyles(ForwardRef(Button))>
- </div>
- </div>
- </div>
- </ForwardRef(Paper)>
- </WithStyles(ForwardRef(Paper))>
- </div>
- </Transition>
- </ForwardRef(Fade)>
- <div
- data-test="sentinelEnd"
- tabIndex={0}
- />
- </Unstable_TrapFocus>
- </div>
- </Portal>
- </ForwardRef(Portal)>
- </ForwardRef(Modal)>
- </ForwardRef(Dialog)>
- </WithStyles(ForwardRef(Dialog))>
-</DeleteGRDFAccountModal>
+ delete_grdf_modal.cancel
+ </span>
+ <span
+ class="MuiTouchRipple-root"
+ />
+ </button>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div
+ data-test="sentinelEnd"
+ tabindex="0"
+ />
+ </div>
+</body>
`;
diff --git a/src/components/Connection/GRDFDeleteAccountModal/deleteGRDFAccountModal.scss b/src/components/Connection/GRDFDeleteAccountModal/deleteGRDFAccountModal.scss
index aafc248d0f1e42c872a9726d4401f4de802ed8c9..84b0d3caa520462824848fa9d933dc53e7f16d72 100644
--- a/src/components/Connection/GRDFDeleteAccountModal/deleteGRDFAccountModal.scss
+++ b/src/components/Connection/GRDFDeleteAccountModal/deleteGRDFAccountModal.scss
@@ -19,8 +19,6 @@
}
.buttons {
display: flex;
- button.btn-secondary-positive {
- margin-right: 1rem;
- }
+ gap: 1rem;
}
}
diff --git a/src/components/Connection/PartnerConnectModal/EpglConnectModal.tsx b/src/components/Connection/PartnerConnectModal/EpglConnectModal.tsx
index f32093cd6c8e96f72beb6a0a660eb86546f343dd..404ab89396ad58811c9c2f1147789f310bae02a6 100644
--- a/src/components/Connection/PartnerConnectModal/EpglConnectModal.tsx
+++ b/src/components/Connection/PartnerConnectModal/EpglConnectModal.tsx
@@ -51,51 +51,33 @@ const EpglConnectModal = ({
const steps: Record<StepEnum, StepContent> = {
[StepEnum.DoYouHaveAccount]: {
content: <EpglDoYouHaveAccount />,
- leftButton: (
- <Button
- onClick={() => setCurrentStep(StepEnum.CreateAccount)}
- classes={{
- root: 'btn-profile-back',
- label: 'text-16-bold',
- }}
- >
- {t('auth.button_create_account')}
+ topButton: (
+ <Button onClick={handleShowForm} className="btnPrimary">
+ {t('auth.button_connect')}
</Button>
),
- rightButton: (
+ bottomButton: (
<Button
- onClick={handleShowForm}
- classes={{
- root: 'btn-profile-next',
- label: 'text-16-bold',
- }}
+ onClick={() => setCurrentStep(StepEnum.CreateAccount)}
+ className="btnSecondary"
>
- {t('auth.button_connect')}
+ {t('auth.button_create_account')}
</Button>
),
},
[StepEnum.CreateAccount]: {
content: <EpglCreateAccount />,
- leftButton: (
- <Button
- onClick={() => setCurrentStep(StepEnum.DoYouHaveAccount)}
- classes={{
- root: 'btn-profile-back',
- label: 'text-16-bold',
- }}
- >
- {`< ${t('auth.button_previous')}`}
+ topButton: (
+ <Button onClick={handleGoToPartnerSite} className="btnPrimary">
+ {t('auth.eglgrandlyon.button_go_to_partner_site')}
</Button>
),
- rightButton: (
+ bottomButton: (
<Button
- onClick={handleGoToPartnerSite}
- classes={{
- root: 'btn-profile-next',
- label: 'text-16-bold',
- }}
+ onClick={() => setCurrentStep(StepEnum.DoYouHaveAccount)}
+ className="btnSecondary"
>
- {t('auth.eglgrandlyon.button_go_to_partner_site')}
+ {t('auth.button_previous')}
</Button>
),
},
@@ -121,8 +103,8 @@ const EpglConnectModal = ({
{steps[currentStep].content}
</div>
<div className="partners-connection-step-navigation">
- {steps[currentStep].leftButton}
- {steps[currentStep].rightButton}
+ {steps[currentStep].topButton}
+ {steps[currentStep].bottomButton}
</div>
</Dialog>
)
diff --git a/src/components/Connection/PartnerConnectModal/GrdfConnectModal.tsx b/src/components/Connection/PartnerConnectModal/GrdfConnectModal.tsx
index 20d12143ecc8e46692e03c81caf9f32a4c0fd192..5e5ca5cf272ae7c72267a9c6a4ad29bbf92a1613 100644
--- a/src/components/Connection/PartnerConnectModal/GrdfConnectModal.tsx
+++ b/src/components/Connection/PartnerConnectModal/GrdfConnectModal.tsx
@@ -56,68 +56,47 @@ const GrdfConnectModal = ({
const steps: Record<StepEnum, StepContent> = {
[StepEnum.DoYouHaveAccount]: {
content: <GrdfDoYouHaveAccount />,
- leftButton: (
+ topButton: (
<Button
- onClick={() => setCurrentStep(StepEnum.CreateAccount)}
- classes={{
- root: 'btn-profile-back',
- label: 'text-16-bold',
- }}
+ onClick={() => setCurrentStep(StepEnum.GiveConsent)}
+ className="btnPrimary"
>
- {t('auth.button_create_account')}
+ {t('auth.button_has_account')}
</Button>
),
- rightButton: (
+ bottomButton: (
<Button
- onClick={() => setCurrentStep(StepEnum.GiveConsent)}
- classes={{
- root: 'btn-profile-next',
- label: 'text-16-bold',
- }}
+ onClick={() => setCurrentStep(StepEnum.CreateAccount)}
+ className="btnSecondary"
>
- {t('auth.button_has_account')}
+ {t('auth.button_create_account')}
</Button>
),
},
[StepEnum.CreateAccount]: {
content: <GrdfCreateAccount />,
- leftButton: (
- <Button
- onClick={() => setCurrentStep(StepEnum.DoYouHaveAccount)}
- classes={{
- root: 'btn-profile-back',
- label: 'text-16-bold',
- }}
- >
- {`< ${t('auth.button_previous')}`}
+ topButton: (
+ <Button onClick={handleGoToPartnerSite} className="btnPrimary">
+ {t('auth.grdfgrandlyon.button_go_to_partner_site')}
</Button>
),
- rightButton: (
+ bottomButton: (
<Button
- onClick={handleGoToPartnerSite}
- classes={{
- root: 'btn-profile-next',
- label: 'text-16-bold',
- }}
+ onClick={() => setCurrentStep(StepEnum.DoYouHaveAccount)}
+ className="btnSecondary"
>
- {t('auth.grdfgrandlyon.button_go_to_partner_site')}
+ {t('auth.button_previous')}
</Button>
),
},
[StepEnum.GiveConsent]: {
content: <GrdfGiveConsent />,
- leftButton: (
- <Button
- onClick={handleGiveConsentPrevious}
- classes={{
- root: 'btn-profile-back',
- label: 'text-16-bold',
- }}
- >
- {`< ${t('auth.button_previous')}`}
+ topButton: <GrdfFormOAuth onSuccess={handleSuccess} />,
+ bottomButton: (
+ <Button onClick={handleGiveConsentPrevious} className="btnSecondary">
+ {t('auth.button_previous')}
</Button>
),
- rightButton: <GrdfFormOAuth onSuccess={handleSuccess} />,
},
}
@@ -141,8 +120,8 @@ const GrdfConnectModal = ({
{steps[currentStep].content}
</div>
<div className="partners-connection-step-navigation">
- {steps[currentStep].leftButton}
- {steps[currentStep].rightButton}
+ {steps[currentStep].topButton}
+ {steps[currentStep].bottomButton}
</div>
</Dialog>
)
diff --git a/src/components/Connection/PartnerConnectModal/PartnerConnectModal.scss b/src/components/Connection/PartnerConnectModal/PartnerConnectModal.scss
index fcfc53632e881d38267a63d2486156bb06818933..e5394492ba08706b7c7b2151bc3dd98f27ea2c4f 100644
--- a/src/components/Connection/PartnerConnectModal/PartnerConnectModal.scss
+++ b/src/components/Connection/PartnerConnectModal/PartnerConnectModal.scss
@@ -3,36 +3,14 @@
.partners-connection-step-content {
padding: 0.5rem 0.5rem 0;
text-align: center;
-
- .footer {
- button.btn-highlight {
- width: 100%;
- display: flex;
- align-items: center;
- justify-content: space-evenly;
- margin: 1.5rem 0 1rem;
- padding: 1rem 2rem;
- transition: all 300ms ease;
- }
- }
}
.partners-connection-step-navigation {
width: 100%;
display: flex;
justify-content: center;
+ flex-direction: column;
gap: 1rem;
-
- .disabled {
- opacity: 0;
- }
-
- button {
- max-width: 10rem;
- min-height: 2.5rem;
- margin-top: 0.5rem;
- padding: 0rem 1rem;
- }
}
#accessibility-title {
diff --git a/src/components/Connection/PartnerConnectModal/StepContent.interface.ts b/src/components/Connection/PartnerConnectModal/StepContent.interface.ts
index 636a1283d26f7a2ff05a211541362bdfb7229a2b..8e62bd015db93f7bba4b275c4da809787e6576d9 100644
--- a/src/components/Connection/PartnerConnectModal/StepContent.interface.ts
+++ b/src/components/Connection/PartnerConnectModal/StepContent.interface.ts
@@ -1,5 +1,5 @@
export interface StepContent {
content: JSX.Element
- leftButton: JSX.Element
- rightButton: JSX.Element
+ topButton: JSX.Element
+ bottomButton: JSX.Element
}
diff --git a/src/components/Connection/PartnerConnectModal/Steps/GrdfFormOAuth.tsx b/src/components/Connection/PartnerConnectModal/Steps/GrdfFormOAuth.tsx
index 287f55d0d558879517fbc87f6f9a2b3612936975..30941eb12345ab546420212726d5f09d88f371fb 100644
--- a/src/components/Connection/PartnerConnectModal/Steps/GrdfFormOAuth.tsx
+++ b/src/components/Connection/PartnerConnectModal/Steps/GrdfFormOAuth.tsx
@@ -71,10 +71,7 @@ const GrdfFormOAuth = ({
aria-label={t('auth.accessibility.button_connect')}
onClick={startOAuth}
disabled={isWaiting}
- classes={{
- root: 'btn-highlight',
- label: 'text-16-bold',
- }}
+ className="btnPrimary"
>
{isWaiting
? t('auth.connect_oauth.loading')
diff --git a/src/components/Connection/SGEConnect/SgeConnect.scss b/src/components/Connection/SGEConnect/SgeConnect.scss
index cc76bd39863df6426034ce80897757cbc033b146..8e7b745ae7caf6b2ef5fdfbb282cea3e9ec22eb0 100644
--- a/src/components/Connection/SGEConnect/SgeConnect.scss
+++ b/src/components/Connection/SGEConnect/SgeConnect.scss
@@ -1,6 +1,7 @@
@import 'src/styles/base/color';
@import 'src/styles/base/mixins';
@import 'src/styles/base/breakpoint';
+@import 'src/styles/components/input';
.sge-view {
box-sizing: border-box;
@@ -14,16 +15,27 @@
padding: 1rem;
.sge-step-container {
+ margin-top: 1rem;
+ display: flex;
+ flex-direction: column;
+ gap: 1rem;
color: $grey-bright;
- .title,
+
.head {
margin-top: 1rem;
}
label {
- display: block;
- margin-top: 1rem;
- margin-bottom: 0.625rem;
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ gap: 10px;
+ &.inline {
+ flex-direction: row;
+ align-items: center;
+ gap: 0.5rem;
+ }
cursor: pointer;
+
span span {
color: $gold-shadow;
}
@@ -31,24 +43,7 @@
#zipCode {
max-width: 115px;
}
- @include checkBox();
- input:not([type='checkbox']) {
- appearance: none;
- max-width: 280px;
- width: 100%;
- height: 45px;
- border-radius: 4px;
- border: 1px solid $grey-dark;
- background: rgba(0, 0, 0, 0.3);
- transition: all 300ms ease;
- color: $grey-bright;
- padding: 0 0.5rem;
- &:focus,
- &:focus-visible {
- border: 1px solid $gold-shadow;
- outline: none;
- }
- }
+
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
@@ -59,18 +54,12 @@
input[type='number'] {
-moz-appearance: textfield;
}
- .pdl-hint {
- display: inline-block;
- cursor: pointer;
- border-bottom: solid 1px $grey-bright;
- text-align: center;
- margin: 1rem auto auto;
- padding: 0.2rem;
- @media (min-width: $width-tablet) {
- margin-left: 0;
- }
+
+ .btnText {
+ max-width: 280px;
}
ul {
+ margin: 0;
padding: 0 1rem 1rem;
line-height: 130%;
border-bottom: 1px solid $grey-dark;
@@ -114,4 +103,7 @@
height: 80px;
}
}
+ button {
+ margin-top: 1rem;
+ }
}
diff --git a/src/components/Connection/SGEConnect/SgeConnectView.spec.tsx b/src/components/Connection/SGEConnect/SgeConnectView.spec.tsx
index 30d79f957431c78317760898f2ea0b05bba533f6..02d958a4e4a22cd6962b356a853e5ca3f4988234 100644
--- a/src/components/Connection/SGEConnect/SgeConnectView.spec.tsx
+++ b/src/components/Connection/SGEConnect/SgeConnectView.spec.tsx
@@ -1,112 +1,38 @@
-import { SgeStep } from 'enums'
-import { mount } from 'enzyme'
-import toJson from 'enzyme-to-json'
+import { render, screen } from '@testing-library/react'
+import { userEvent } from '@testing-library/user-event'
import React from 'react'
import { Provider } from 'react-redux'
import * as storeHooks from 'store/hooks'
-import { createMockEcolyoStore, mockGlobalState } from 'tests/__mocks__/store'
+import { createMockEcolyoStore } from 'tests/__mocks__/store'
import SgeConnectView from './SgeConnectView'
jest.mock('components/Content/Content', () => 'mock-content')
jest.mock('components/Header/CozyBar', () => 'mock-cozybar')
const mockAppDispatch = jest.spyOn(storeHooks, 'useAppDispatch')
+const store = createMockEcolyoStore()
describe('SgeConnectView component', () => {
beforeEach(() => {
jest.clearAllMocks()
})
it('should be rendered correctly', () => {
- const store = createMockEcolyoStore()
- const wrapper = mount(
+ const { container } = render(
<Provider store={store}>
<SgeConnectView />
</Provider>
)
- expect(toJson(wrapper)).toMatchSnapshot()
- })
- it('should render address Step', () => {
- const store = createMockEcolyoStore({
- global: {
- sgeConnect: {
- ...mockGlobalState.sgeConnect,
- currentStep: SgeStep.Address,
- },
- },
- })
- const wrapper = mount(
- <Provider store={store}>
- <SgeConnectView />
- </Provider>
- )
- expect(wrapper.find('.stepAddress')).toBeTruthy()
- })
- it('should render identity Step', () => {
- const store = createMockEcolyoStore({
- global: {
- sgeConnect: {
- ...mockGlobalState.sgeConnect,
- currentStep: SgeStep.IdentityAndPDL,
- },
- },
- })
- const wrapper = mount(
- <Provider store={store}>
- <SgeConnectView />
- </Provider>
- )
- expect(wrapper.find('.stepIdentity')).toBeTruthy()
- })
- it('should render consent Step', () => {
- const store = createMockEcolyoStore({
- global: {
- sgeConnect: {
- ...mockGlobalState.sgeConnect,
- currentStep: SgeStep.Consent,
- },
- },
- })
- const wrapper = mount(
- <Provider store={store}>
- <SgeConnectView />
- </Provider>
- )
- expect(wrapper.find('.stepConsent')).toBeTruthy()
- })
- it('should render default Step', () => {
- const store = createMockEcolyoStore({
- global: {
- sgeConnect: {
- ...mockGlobalState.sgeConnect,
- currentStep: 99,
- },
- },
- })
- const wrapper = mount(
- <Provider store={store}>
- <SgeConnectView />
- </Provider>
- )
- expect(wrapper.find('.stepIdentity')).toBeTruthy()
+ expect(container).toMatchSnapshot()
})
+
describe('SgeConnectView Navigation methods', () => {
- const store = createMockEcolyoStore()
- it('should call nextStep method', () => {
- const wrapper = mount(
- <Provider store={store}>
- <SgeConnectView />
- </Provider>
- )
- wrapper.find('.profile-navigation-button').last().simulate('click')
- expect(mockAppDispatch).toHaveBeenCalled()
- })
- it('should not call disabled nextStep method', () => {
- const wrapper = mount(
+ it('should call nextStep method', async () => {
+ render(
<Provider store={store}>
<SgeConnectView />
</Provider>
)
- wrapper.find('.profile-navigation-button').last().simulate('click')
+ await userEvent.click(screen.getAllByRole('button')[1])
expect(mockAppDispatch).toHaveBeenCalled()
})
})
diff --git a/src/components/Connection/SGEConnect/SgeConnectView.tsx b/src/components/Connection/SGEConnect/SgeConnectView.tsx
index c59382fa73b47645795e15980b7a733f95e96510..d09bc8f7292733bea6dc556aee98b317007192a5 100644
--- a/src/components/Connection/SGEConnect/SgeConnectView.tsx
+++ b/src/components/Connection/SGEConnect/SgeConnectView.tsx
@@ -29,7 +29,7 @@ const SgeConnectView = () => {
const [isLoading, setIsLoading] = useState(false)
const [currentSgeState, setCurrentSgeState] = useState<SgeStore>(sgeConnect)
const [currentStep, setCurrentStep] = useState<SgeStep>(
- sgeConnect.currentStep
+ SgeStep.IdentityAndPDL
)
const [headerHeight, setHeaderHeight] = useState<number>(0)
diff --git a/src/components/Connection/SGEConnect/SgeInit.spec.tsx b/src/components/Connection/SGEConnect/SgeInit.spec.tsx
index cd01cfb542a872b7cc810cc3e3db94545f6b4fad..b4789725b6d52711005d5e5ebca6808d409b9f20 100644
--- a/src/components/Connection/SGEConnect/SgeInit.spec.tsx
+++ b/src/components/Connection/SGEConnect/SgeInit.spec.tsx
@@ -1,11 +1,9 @@
-import { Button } from '@material-ui/core'
-import { mount } from 'enzyme'
-import toJson from 'enzyme-to-json'
+import { render, screen } from '@testing-library/react'
+import { userEvent } from '@testing-library/user-event'
import React from 'react'
import { Provider } from 'react-redux'
import { SgeStatusWithAccount } from 'tests/__mocks__/fluidStatusData.mock'
import { createMockEcolyoStore, mockGlobalState } from 'tests/__mocks__/store'
-import { waitForComponentToPaint } from 'tests/__mocks__/testUtils'
import SgeInit from './SgeInit'
const mockedNavigate = jest.fn()
@@ -24,20 +22,20 @@ jest.mock('components/Hooks/useKonnectorAuth', () =>
describe('SgeInit component', () => {
const store = createMockEcolyoStore()
it('should be rendered correctly', () => {
- const wrapper = mount(
+ const { container } = render(
<Provider store={store}>
<SgeInit />
</Provider>
)
- expect(toJson(wrapper)).toMatchSnapshot()
+ expect(container).toMatchSnapshot()
})
- it('should go to sge connect steps', () => {
- const wrapper = mount(
+ it('should go to sge connect steps', async () => {
+ render(
<Provider store={store}>
<SgeInit />
</Provider>
)
- wrapper.find(Button).first().simulate('click')
+ await userEvent.click(screen.getAllByRole('button')[0])
expect(mockedNavigate).toHaveBeenCalled()
})
it('should launch account and trigger creation process', async () => {
@@ -51,12 +49,11 @@ describe('SgeInit component', () => {
},
})
- const wrapper = mount(
+ render(
<Provider store={store}>
<SgeInit />
</Provider>
)
- await waitForComponentToPaint(wrapper)
expect(mockConnect).toHaveBeenCalled()
})
it('should launch existing account update process', async () => {
@@ -70,12 +67,11 @@ describe('SgeInit component', () => {
},
},
})
- const wrapper = mount(
+ render(
<Provider store={store}>
<SgeInit />
</Provider>
)
- await waitForComponentToPaint(wrapper)
expect(mockUpdate).toHaveBeenCalled()
})
})
diff --git a/src/components/Connection/SGEConnect/SgeInit.tsx b/src/components/Connection/SGEConnect/SgeInit.tsx
index c36fecbf61a44c02b469b72473c5870a1ca12600..5d349bc50929ef1bf6ec174a29abb81aacc1258e 100644
--- a/src/components/Connection/SGEConnect/SgeInit.tsx
+++ b/src/components/Connection/SGEConnect/SgeInit.tsx
@@ -58,19 +58,13 @@ const SgeInit = () => {
onClick={() => {
navigate('/sge-connect')
}}
- classes={{
- root: 'btn-highlight',
- label: 'text-16-bold',
- }}
+ className="btnPrimary"
>
{t(`auth.${konnectorSlug}.connect`)}
</Button>
{currentFluidStatus.firstDataDate && (
<Button
- classes={{
- root: 'btn-secondary',
- label: 'text-16-bold',
- }}
+ className="btnSecondary"
onClick={() => dispatch(setShowOfflineData(true))}
>
{t('auth.button_showOfflineData')}
diff --git a/src/components/Connection/SGEConnect/SgeModalHint.spec.tsx b/src/components/Connection/SGEConnect/SgeModalHint.spec.tsx
index eab06f6c662dab4514e4bfa2d2700f528cade3c2..a9efcf721f220b7a715f2e1793ace2a6a087f6be 100644
--- a/src/components/Connection/SGEConnect/SgeModalHint.spec.tsx
+++ b/src/components/Connection/SGEConnect/SgeModalHint.spec.tsx
@@ -1,19 +1,12 @@
-import { mount } from 'enzyme'
-import toJson from 'enzyme-to-json'
+import { render } from '@testing-library/react'
import React from 'react'
-import { Provider } from 'react-redux'
-import { createMockEcolyoStore } from 'tests/__mocks__/store'
import SgeModalHint from './SgeModalHint'
describe('SgeModalHint component', () => {
it('should be rendered correctly', () => {
- const mockClose = jest.fn()
- const store = createMockEcolyoStore()
- const wrapper = mount(
- <Provider store={store}>
- <SgeModalHint open={true} handleCloseClick={mockClose} />
- </Provider>
+ const { baseElement } = render(
+ <SgeModalHint open={true} handleCloseClick={jest.fn()} />
)
- expect(toJson(wrapper)).toMatchSnapshot()
+ expect(baseElement).toMatchSnapshot()
})
})
diff --git a/src/components/Connection/SGEConnect/SgeModalHint.tsx b/src/components/Connection/SGEConnect/SgeModalHint.tsx
index 9b2696e1d98ee16fd8be8385802ad8b9fac7a911..788896228f53ad018c000daeba9515d667e729be 100644
--- a/src/components/Connection/SGEConnect/SgeModalHint.tsx
+++ b/src/components/Connection/SGEConnect/SgeModalHint.tsx
@@ -56,11 +56,7 @@ const SgeModalHint = ({ open, handleCloseClick }: SgeModalHintProps) => {
'auth.enedissgegrandlyon.modalHint.button-accessibility'
)}
onClick={handleCloseClick}
- classes={{
- root: 'btn-highlight',
- label: 'text-16-bold',
- }}
- style={{ height: '40px' }}
+ className="btnPrimary"
>
{t('auth.enedissgegrandlyon.modalHint.button')}
</Button>
diff --git a/src/components/Connection/SGEConnect/StepAddress.spec.tsx b/src/components/Connection/SGEConnect/StepAddress.spec.tsx
index 785ca968a3de16578d2baa84243cf8257fdbf9a8..d5aae6a3af4b54692c0c3549c89de48388bd5bf2 100644
--- a/src/components/Connection/SGEConnect/StepAddress.spec.tsx
+++ b/src/components/Connection/SGEConnect/StepAddress.spec.tsx
@@ -1,70 +1,64 @@
-import { mount } from 'enzyme'
-import toJson from 'enzyme-to-json'
+import { render, screen } from '@testing-library/react'
+import { userEvent } from '@testing-library/user-event'
import React from 'react'
-import { Provider } from 'react-redux'
-import { createMockEcolyoStore, mockGlobalState } from 'tests/__mocks__/store'
+import { mockGlobalState } from 'tests/__mocks__/store'
import StepAddress from './StepAddress'
const mockHandleChange = jest.fn()
describe('StepAddress component', () => {
- const store = createMockEcolyoStore()
it('should be rendered correctly', () => {
- const wrapper = mount(
- <Provider store={store}>
- <StepAddress
- sgeState={mockGlobalState.sgeConnect}
- onChange={mockHandleChange}
- />
- </Provider>
+ const { container } = render(
+ <StepAddress
+ sgeState={mockGlobalState.sgeConnect}
+ onChange={mockHandleChange}
+ />
)
- expect(toJson(wrapper)).toMatchSnapshot()
+ expect(container).toMatchSnapshot()
})
- it('should change address value', () => {
- const wrapper = mount(
- <Provider store={store}>
- <StepAddress
- sgeState={mockGlobalState.sgeConnect}
- onChange={mockHandleChange}
- />
- </Provider>
- )
- wrapper.find('#address').first().simulate('change')
- expect(mockHandleChange).toHaveBeenCalledWith('address', '')
- })
- it('should change zipCode value', () => {
- const wrapper = mount(
- <Provider store={store}>
+
+ describe('should change inputs', () => {
+ beforeEach(() => {
+ render(
<StepAddress
sgeState={mockGlobalState.sgeConnect}
onChange={mockHandleChange}
/>
- </Provider>
- )
- wrapper.find('#zipCode').first().simulate('change')
- expect(mockHandleChange).toHaveBeenCalledWith('zipCode', '', 5)
+ )
+ })
+ it('should change address value', async () => {
+ const input = screen.getByRole('textbox', {
+ name: 'auth.enedissgegrandlyon.address',
+ })
+ await userEvent.type(input, 't')
+ expect(mockHandleChange).toHaveBeenCalledWith('address', 't')
+ })
+ it('should change zipCode value', async () => {
+ const input = screen.getByRole('spinbutton', {
+ name: 'auth.enedissgegrandlyon.zipCode',
+ })
+ await userEvent.type(input, '0')
+ expect(mockHandleChange).toHaveBeenCalledWith('zipCode', '0', 5)
+ })
+
+ it('should change city value', async () => {
+ const input = screen.getByRole('textbox', {
+ name: 'auth.enedissgegrandlyon.city',
+ })
+ await userEvent.type(input, 'c')
+ expect(mockHandleChange).toHaveBeenCalledWith('city', 'c')
+ })
})
it('should have an existing zipCode value', () => {
- const wrapper = mount(
- <Provider store={store}>
- <StepAddress
- sgeState={{ ...mockGlobalState.sgeConnect, zipCode: 69200 }}
- onChange={mockHandleChange}
- />
- </Provider>
- )
- expect(wrapper.find('#zipCode').first().props().value).toBe(69200)
- })
- it('should change city value', () => {
- const wrapper = mount(
- <Provider store={store}>
- <StepAddress
- sgeState={mockGlobalState.sgeConnect}
- onChange={mockHandleChange}
- />
- </Provider>
+ render(
+ <StepAddress
+ sgeState={{ ...mockGlobalState.sgeConnect, zipCode: 69200 }}
+ onChange={mockHandleChange}
+ />
)
- wrapper.find('#city').first().simulate('change')
- expect(mockHandleChange).toHaveBeenCalledWith('city', '')
+ const input = screen.getByRole('spinbutton', {
+ name: 'auth.enedissgegrandlyon.zipCode',
+ })
+ expect(input).toHaveValue(69200)
})
})
diff --git a/src/components/Connection/SGEConnect/StepAddress.tsx b/src/components/Connection/SGEConnect/StepAddress.tsx
index da040f5010bbc81bc832fd9af18beb223045ee85..0f5ef8712df848f61df65946a3d064c833e6cf4a 100644
--- a/src/components/Connection/SGEConnect/StepAddress.tsx
+++ b/src/components/Connection/SGEConnect/StepAddress.tsx
@@ -17,36 +17,39 @@ const StepAddress = ({ sgeState, onChange }: StepAddressProps) => {
</div>
<label htmlFor="address" className="text-16-normal">
{t('auth.enedissgegrandlyon.address')}
+ <input
+ type="text"
+ id="address"
+ name="address"
+ className="inputText"
+ value={sgeState.address}
+ onChange={e => onChange('address', e.target.value)}
+ />
</label>
- <input
- type="text"
- id="address"
- name="address"
- value={sgeState.address}
- onChange={e => onChange('address', e.target.value)}
- />
<label htmlFor="zipCode" className="text-16-normal">
{t('auth.enedissgegrandlyon.zipCode')}
+ <input
+ type="number"
+ min={0}
+ id="zipCode"
+ name="zipCode"
+ className="inputText"
+ value={sgeState.zipCode !== null ? sgeState.zipCode : undefined}
+ onChange={e => onChange('zipCode', e.target.value, 5)}
+ />
</label>
- <input
- type="number"
- min={0}
- id="zipCode"
- name="zipCode"
- value={sgeState.zipCode !== null ? sgeState.zipCode : undefined}
- onChange={e => onChange('zipCode', e.target.value, 5)}
- />
<label htmlFor="city" className="text-16-normal">
{t('auth.enedissgegrandlyon.city')}
+ <input
+ type="text"
+ id="city"
+ name="city"
+ className="inputText"
+ value={sgeState.city}
+ onChange={e => onChange('city', e.target.value)}
+ />
</label>
- <input
- type="text"
- id="city"
- name="city"
- value={sgeState.city}
- onChange={e => onChange('city', e.target.value)}
- />
</div>
)
}
diff --git a/src/components/Connection/SGEConnect/StepConsent.spec.tsx b/src/components/Connection/SGEConnect/StepConsent.spec.tsx
index c2ca84554bed9594ee4cbedefd83143ca964127e..ebca791acb68896b788aee05439f6c553790e861 100644
--- a/src/components/Connection/SGEConnect/StepConsent.spec.tsx
+++ b/src/components/Connection/SGEConnect/StepConsent.spec.tsx
@@ -1,47 +1,39 @@
-import { mount } from 'enzyme'
-import toJson from 'enzyme-to-json'
+import { render, screen } from '@testing-library/react'
+import { userEvent } from '@testing-library/user-event'
import React from 'react'
-import { Provider } from 'react-redux'
-import { createMockEcolyoStore, mockGlobalState } from 'tests/__mocks__/store'
+import { mockGlobalState } from 'tests/__mocks__/store'
import StepConsent from './StepConsent'
const mockHandleChange = jest.fn()
describe('StepConsent component', () => {
- const store = createMockEcolyoStore()
it('should be rendered correctly', () => {
- const wrapper = mount(
- <Provider store={store}>
- <StepConsent
- sgeState={mockGlobalState.sgeConnect}
- onChange={mockHandleChange}
- />
- </Provider>
+ const { container } = render(
+ <StepConsent
+ sgeState={mockGlobalState.sgeConnect}
+ onChange={mockHandleChange}
+ />
)
- expect(toJson(wrapper)).toMatchSnapshot()
+ expect(container).toMatchSnapshot()
})
- it('should change pdlConfirm value', () => {
- const wrapper = mount(
- <Provider store={store}>
- <StepConsent
- sgeState={mockGlobalState.sgeConnect}
- onChange={mockHandleChange}
- />
- </Provider>
- )
- wrapper.find('#pdlConfirm').first().simulate('change')
- expect(mockHandleChange).toHaveBeenCalledWith('pdlConfirm', false)
- })
- it('should change dataConsent value', () => {
- const wrapper = mount(
- <Provider store={store}>
- <StepConsent
- sgeState={mockGlobalState.sgeConnect}
- onChange={mockHandleChange}
- />
- </Provider>
+
+ it('should change dataConsent and pdlConfirm value', async () => {
+ render(
+ <StepConsent
+ sgeState={mockGlobalState.sgeConnect}
+ onChange={mockHandleChange}
+ />
)
- wrapper.find('#dataConsent').first().simulate('change')
- expect(mockHandleChange).toHaveBeenCalledWith('dataConsent', false)
+ const consentCheckbox = screen.getByRole('checkbox', {
+ name: 'auth.enedissgegrandlyon.consentCheck1',
+ })
+ await userEvent.click(consentCheckbox)
+ expect(mockHandleChange).toHaveBeenCalledWith('dataConsent', true)
+
+ const pdlCheckbox = screen.getByRole('checkbox', {
+ name: 'auth.enedissgegrandlyon.consentCheck2',
+ })
+ await userEvent.click(pdlCheckbox)
+ expect(mockHandleChange).toHaveBeenCalledWith('pdlConfirm', true)
})
})
diff --git a/src/components/Connection/SGEConnect/StepConsent.tsx b/src/components/Connection/SGEConnect/StepConsent.tsx
index c8dc887a81d7c938d9d26ea228109240375686d8..e320304fa1f7dbfddec4a4ef160c714a66ead0c5 100644
--- a/src/components/Connection/SGEConnect/StepConsent.tsx
+++ b/src/components/Connection/SGEConnect/StepConsent.tsx
@@ -1,4 +1,3 @@
-import classNames from 'classnames'
import { useI18n } from 'cozy-ui/transpiled/react/I18n'
import { SgeStore } from 'models'
import React from 'react'
@@ -25,18 +24,13 @@ const StepConsent = ({ sgeState, onChange }: StepConsentProps) => {
<li>{t('auth.enedissgegrandlyon.consentLi3')}</li>
<li>{t('auth.enedissgegrandlyon.consentLi4')}</li>
</ul>
- <label
- className={classNames('checkbox', {
- ['answer-checked']: sgeState.dataConsent,
- })}
- >
+ <label className="inline">
<input
id="dataConsent"
type="checkbox"
name="Data-consent-validation"
- onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
- onChange('dataConsent', e.target.checked)
- }
+ className="inputCheckbox"
+ onChange={e => onChange('dataConsent', e.target.checked)}
checked={sgeState.dataConsent}
/>
<span
@@ -45,18 +39,13 @@ const StepConsent = ({ sgeState, onChange }: StepConsentProps) => {
}}
/>
</label>
- <label
- className={classNames('checkbox', {
- ['answer-checked']: sgeState.pdlConfirm,
- })}
- >
+ <label className="inline">
<input
id="pdlConfirm"
type="checkbox"
name="Data-consent-validation"
- onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
- onChange('pdlConfirm', e.target.checked)
- }
+ className="inputCheckbox"
+ onChange={e => onChange('pdlConfirm', e.target.checked)}
checked={sgeState.pdlConfirm}
/>
<span
diff --git a/src/components/Connection/SGEConnect/StepIdentityAndPdl.spec.tsx b/src/components/Connection/SGEConnect/StepIdentityAndPdl.spec.tsx
index 562541f5d959e1480967fe4c37ccec4fe39de638..88ac266d83c8d89262674911480394e8a452e0e3 100644
--- a/src/components/Connection/SGEConnect/StepIdentityAndPdl.spec.tsx
+++ b/src/components/Connection/SGEConnect/StepIdentityAndPdl.spec.tsx
@@ -1,82 +1,71 @@
-import { mount } from 'enzyme'
-import toJson from 'enzyme-to-json'
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
import React from 'react'
-import { Provider } from 'react-redux'
-import { createMockEcolyoStore, mockGlobalState } from 'tests/__mocks__/store'
+import { mockGlobalState } from 'tests/__mocks__/store'
import StepIdentityAndPdl from './StepIdentityAndPdl'
const mockHandleChange = jest.fn()
describe('StepIdentityAndPdl component', () => {
- const store = createMockEcolyoStore()
it('should be rendered correctly', () => {
- const wrapper = mount(
- <Provider store={store}>
- <StepIdentityAndPdl
- sgeState={mockGlobalState.sgeConnect}
- onChange={mockHandleChange}
- />
- </Provider>
- )
- expect(toJson(wrapper)).toMatchSnapshot()
- })
- it('should change firstName value', () => {
- const wrapper = mount(
- <Provider store={store}>
- <StepIdentityAndPdl
- sgeState={mockGlobalState.sgeConnect}
- onChange={mockHandleChange}
- />
- </Provider>
+ const { container } = render(
+ <StepIdentityAndPdl
+ sgeState={mockGlobalState.sgeConnect}
+ onChange={mockHandleChange}
+ />
)
- wrapper.find('#firstName').first().simulate('change')
- expect(mockHandleChange).toHaveBeenCalledWith('firstName', '')
+ expect(container).toMatchSnapshot()
})
- it('should change lastName value', () => {
- const wrapper = mount(
- <Provider store={store}>
- <StepIdentityAndPdl
- sgeState={mockGlobalState.sgeConnect}
- onChange={mockHandleChange}
- />
- </Provider>
- )
- wrapper.find('#lastName').first().simulate('change')
- expect(mockHandleChange).toHaveBeenCalledWith('lastName', '')
- })
- it('should change pdl value', () => {
- const wrapper = mount(
- <Provider store={store}>
- <StepIdentityAndPdl
- sgeState={mockGlobalState.sgeConnect}
- onChange={mockHandleChange}
- />
- </Provider>
- )
- wrapper.find('#pdl').first().simulate('change')
- expect(mockHandleChange).toHaveBeenCalledWith('pdl', '', 14)
- })
- it('should open hint modal', () => {
- const wrapper = mount(
- <Provider store={store}>
+
+ describe('should change fields', () => {
+ beforeEach(() => {
+ jest.clearAllMocks()
+ render(
<StepIdentityAndPdl
sgeState={mockGlobalState.sgeConnect}
onChange={mockHandleChange}
/>
- </Provider>
- )
- wrapper.find('.pdl-hint').first().simulate('click')
- expect(wrapper.find('.sgeHintModal')).toBeTruthy()
+ )
+ })
+ it('should change firstName value', async () => {
+ const firstNameInput = screen.getByRole('textbox', {
+ name: 'auth.enedissgegrandlyon.firstName',
+ })
+ await userEvent.type(firstNameInput, 'n')
+ expect(mockHandleChange).toHaveBeenCalledWith('firstName', 'n')
+ })
+ it('should change lastName value', async () => {
+ const lastNameInput = screen.getByRole('textbox', {
+ name: 'auth.enedissgegrandlyon.lastName',
+ })
+ await userEvent.type(lastNameInput, 'n')
+ expect(mockHandleChange).toHaveBeenCalledWith('lastName', 'n')
+ })
+ it('should change pdl value', async () => {
+ const pdlInput = screen.getByRole('spinbutton', {
+ name: 'auth.enedissgegrandlyon.pdlLabel',
+ })
+ await userEvent.type(pdlInput, '0')
+ expect(mockHandleChange).toHaveBeenCalledWith('pdl', '0', 14)
+ })
+ it('should open hint modal', async () => {
+ const pdlHint = screen.getByRole('button', {
+ name: 'auth.enedissgegrandlyon.pdlHint',
+ })
+ await userEvent.click(pdlHint)
+ expect(screen.getByRole('dialog')).toBeInTheDocument()
+ })
})
it('should have an existing pdl value', () => {
- const wrapper = mount(
- <Provider store={store}>
- <StepIdentityAndPdl
- sgeState={{ ...mockGlobalState.sgeConnect, pdl: 11111111111111 }}
- onChange={mockHandleChange}
- />
- </Provider>
+ render(
+ <StepIdentityAndPdl
+ sgeState={{ ...mockGlobalState.sgeConnect, pdl: 11111111111111 }}
+ onChange={mockHandleChange}
+ />
)
- expect(wrapper.find('#pdl').first().props().value).toBe(11111111111111)
+ const pdlInput = screen.getByRole('spinbutton', {
+ name: 'auth.enedissgegrandlyon.pdlLabel',
+ })
+ expect(pdlInput).toHaveValue(11111111111111)
})
})
diff --git a/src/components/Connection/SGEConnect/StepIdentityAndPdl.tsx b/src/components/Connection/SGEConnect/StepIdentityAndPdl.tsx
index b0e067d66c88ff44b32814311e056a8f006b8ebe..973590f570cb079d9c29d13d8d0ec416c1fc9716 100644
--- a/src/components/Connection/SGEConnect/StepIdentityAndPdl.tsx
+++ b/src/components/Connection/SGEConnect/StepIdentityAndPdl.tsx
@@ -1,7 +1,8 @@
+import { Button } from '@material-ui/core'
import SgeModalHint from 'components/Connection/SGEConnect/SgeModalHint'
import { useI18n } from 'cozy-ui/transpiled/react/I18n'
import { SgeStore } from 'models'
-import React, { useCallback, useState } from 'react'
+import React, { useState } from 'react'
import { SGEKeysForm } from './SgeConnectView'
interface StepIdentityAndPdlProps {
@@ -19,9 +20,7 @@ const StepIdentityAndPdl = ({
}: StepIdentityAndPdlProps) => {
const { t } = useI18n()
const [openHintModal, setOpenHintModal] = useState<boolean>(false)
- const toggleModal = useCallback(() => {
- setOpenHintModal(prev => !prev)
- }, [])
+ const toggleModal = () => setOpenHintModal(prev => !prev)
return (
<div className="sge-step-container stepIdentity">
@@ -30,46 +29,48 @@ const StepIdentityAndPdl = ({
</div>
<label htmlFor="firstName" className="text-16-normal">
{t('auth.enedissgegrandlyon.firstName')}
+ <input
+ type="text"
+ id="firstName"
+ name="firstName"
+ className="inputText"
+ value={sgeState.firstName}
+ onChange={e => onChange('firstName', e.target.value)}
+ required
+ />
</label>
- <input
- type="text"
- id="firstName"
- name="firstName"
- value={sgeState.firstName}
- onChange={e => onChange('firstName', e.target.value)}
- required
- />
<label htmlFor="lastName" className="text-16-normal">
{t('auth.enedissgegrandlyon.lastName')}
+ <input
+ type="text"
+ id="lastName"
+ name="lastName"
+ className="inputText"
+ value={sgeState.lastName}
+ onChange={e => onChange('lastName', e.target.value)}
+ required
+ />
</label>
- <input
- type="text"
- id="lastName"
- name="lastName"
- value={sgeState.lastName}
- onChange={e => onChange('lastName', e.target.value)}
- required
- />
<div className="title text-22-bold">
{t('auth.enedissgegrandlyon.pdlTitle')}
</div>
<label htmlFor="pdl" className="text-16-normal">
{t('auth.enedissgegrandlyon.pdlLabel')}
+ <input
+ id="pdl"
+ name="pdl"
+ type="number"
+ min={0}
+ className="inputText"
+ value={sgeState.pdl ? sgeState.pdl : undefined}
+ onChange={e => onChange('pdl', e.target.value, 14)}
+ inputMode="numeric"
+ required
+ />
</label>
- <input
- id="pdl"
- name="pdl"
- type="number"
- min={0}
- value={sgeState.pdl ? sgeState.pdl : undefined}
- onChange={e => onChange('pdl', e.target.value, 14)}
- inputMode="numeric"
- required
- />
- <br />
- <div onClick={toggleModal} className="pdl-hint text-16-normal">
+ <Button className="btnText" onClick={toggleModal}>
{t('auth.enedissgegrandlyon.pdlHint')}
- </div>
+ </Button>
<SgeModalHint open={openHintModal} handleCloseClick={toggleModal} />
</div>
)
diff --git a/src/components/Connection/SGEConnect/__snapshots__/SgeConnectView.spec.tsx.snap b/src/components/Connection/SGEConnect/__snapshots__/SgeConnectView.spec.tsx.snap
index 7d7e809cf6dcae84cdda6e96df7c7a7c53340240..921a6dd18d944d8834f8cd247257329dd02687d4 100644
--- a/src/components/Connection/SGEConnect/__snapshots__/SgeConnectView.spec.tsx.snap
+++ b/src/components/Connection/SGEConnect/__snapshots__/SgeConnectView.spec.tsx.snap
@@ -1,1029 +1,212 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`SgeConnectView component should be rendered correctly 1`] = `
-<Provider
- store={
- Object {
- "clearActions": [Function],
- "dispatch": [Function],
- "getActions": [Function],
- "getState": [Function],
- "replaceReducer": [Function],
- "subscribe": [Function],
- }
- }
->
- <SgeConnectView>
- <mock-cozybar
- displayBackArrow={true}
- titleKey="common.title_sge_connect"
- />
- <Header
- desktopTitleKey="common.title_sge_connect"
- displayBackArrow={true}
- setHeaderHeight={[Function]}
+<div>
+ <mock-cozybar
+ displaybackarrow="true"
+ titlekey="common.title_sge_connect"
+ />
+ <header>
+ <div
+ class="header-top"
>
<div
- className="header"
+ class="header-content"
>
<div
- className="header-top"
+ class="header-content-top"
>
<div
- className="header-content"
+ class="header-text-desktop text-14-normal-uppercase"
>
- <div
- className="header-content-top"
+ <button
+ aria-label="header.accessibility.button_back"
+ class="MuiButtonBase-root MuiIconButton-root header-back-button"
+ tabindex="0"
+ type="button"
>
- <div
- className="header-text-desktop text-14-normal-uppercase"
- >
- <WithStyles(ForwardRef(IconButton))
- aria-label="header.accessibility.button_back"
- className="header-back-button"
- onClick={[Function]}
- >
- <ForwardRef(IconButton)
- aria-label="header.accessibility.button_back"
- className="header-back-button"
- classes={
- Object {
- "colorInherit": "MuiIconButton-colorInherit",
- "colorPrimary": "MuiIconButton-colorPrimary",
- "colorSecondary": "MuiIconButton-colorSecondary",
- "disabled": "Mui-disabled",
- "edgeEnd": "MuiIconButton-edgeEnd",
- "edgeStart": "MuiIconButton-edgeStart",
- "label": "MuiIconButton-label",
- "root": "MuiIconButton-root",
- "sizeSmall": "MuiIconButton-sizeSmall",
- }
- }
- onClick={[Function]}
- >
- <WithStyles(ForwardRef(ButtonBase))
- aria-label="header.accessibility.button_back"
- centerRipple={true}
- className="MuiIconButton-root header-back-button"
- disabled={false}
- focusRipple={true}
- onClick={[Function]}
- >
- <ForwardRef(ButtonBase)
- aria-label="header.accessibility.button_back"
- centerRipple={true}
- className="MuiIconButton-root header-back-button"
- classes={
- Object {
- "disabled": "Mui-disabled",
- "focusVisible": "Mui-focusVisible",
- "root": "MuiButtonBase-root",
- }
- }
- disabled={false}
- focusRipple={true}
- onClick={[Function]}
- >
- <button
- aria-label="header.accessibility.button_back"
- className="MuiButtonBase-root MuiIconButton-root header-back-button"
- disabled={false}
- onBlur={[Function]}
- onClick={[Function]}
- onDragLeave={[Function]}
- onFocus={[Function]}
- onKeyDown={[Function]}
- onKeyUp={[Function]}
- onMouseDown={[Function]}
- onMouseLeave={[Function]}
- onMouseUp={[Function]}
- onTouchEnd={[Function]}
- onTouchMove={[Function]}
- onTouchStart={[Function]}
- tabIndex={0}
- type="button"
- >
- <span
- className="MuiIconButton-label"
- >
- <Icon
- icon="test-file-stub"
- size={16}
- spin={false}
- >
- <Component
- className="styles__icon___23x3R"
- height={16}
- style={Object {}}
- width={16}
- >
- <svg
- className="styles__icon___23x3R"
- height={16}
- style={Object {}}
- width={16}
- >
- <use
- xlinkHref="#test-file-stub"
- />
- </svg>
- </Component>
- </Icon>
- </span>
- <WithStyles(memo)
- center={true}
- >
- <ForwardRef(TouchRipple)
- center={true}
- classes={
- Object {
- "child": "MuiTouchRipple-child",
- "childLeaving": "MuiTouchRipple-childLeaving",
- "childPulsate": "MuiTouchRipple-childPulsate",
- "ripple": "MuiTouchRipple-ripple",
- "ripplePulsate": "MuiTouchRipple-ripplePulsate",
- "rippleVisible": "MuiTouchRipple-rippleVisible",
- "root": "MuiTouchRipple-root",
- }
- }
- >
- <span
- className="MuiTouchRipple-root"
- >
- <TransitionGroup
- childFactory={[Function]}
- component={null}
- exit={true}
- />
- </span>
- </ForwardRef(TouchRipple)>
- </WithStyles(memo)>
- </button>
- </ForwardRef(ButtonBase)>
- </WithStyles(ForwardRef(ButtonBase))>
- </ForwardRef(IconButton)>
- </WithStyles(ForwardRef(IconButton))>
- <span>
- common.title_sge_connect
- </span>
- </div>
- <WithStyles(ForwardRef(IconButton))
- aria-label="header.accessibility.button_open_feedbacks"
- className="header-feedbacks-button"
- onClick={[Function]}
+ <span
+ class="MuiIconButton-label"
>
- <ForwardRef(IconButton)
- aria-label="header.accessibility.button_open_feedbacks"
- className="header-feedbacks-button"
- classes={
- Object {
- "colorInherit": "MuiIconButton-colorInherit",
- "colorPrimary": "MuiIconButton-colorPrimary",
- "colorSecondary": "MuiIconButton-colorSecondary",
- "disabled": "Mui-disabled",
- "edgeEnd": "MuiIconButton-edgeEnd",
- "edgeStart": "MuiIconButton-edgeStart",
- "label": "MuiIconButton-label",
- "root": "MuiIconButton-root",
- "sizeSmall": "MuiIconButton-sizeSmall",
- }
- }
- onClick={[Function]}
+ <svg
+ class="styles__icon___23x3R"
+ height="16"
+ width="16"
>
- <WithStyles(ForwardRef(ButtonBase))
- aria-label="header.accessibility.button_open_feedbacks"
- centerRipple={true}
- className="MuiIconButton-root header-feedbacks-button"
- disabled={false}
- focusRipple={true}
- onClick={[Function]}
- >
- <ForwardRef(ButtonBase)
- aria-label="header.accessibility.button_open_feedbacks"
- centerRipple={true}
- className="MuiIconButton-root header-feedbacks-button"
- classes={
- Object {
- "disabled": "Mui-disabled",
- "focusVisible": "Mui-focusVisible",
- "root": "MuiButtonBase-root",
- }
- }
- disabled={false}
- focusRipple={true}
- onClick={[Function]}
- >
- <button
- aria-label="header.accessibility.button_open_feedbacks"
- className="MuiButtonBase-root MuiIconButton-root header-feedbacks-button"
- disabled={false}
- onBlur={[Function]}
- onClick={[Function]}
- onDragLeave={[Function]}
- onFocus={[Function]}
- onKeyDown={[Function]}
- onKeyUp={[Function]}
- onMouseDown={[Function]}
- onMouseLeave={[Function]}
- onMouseUp={[Function]}
- onTouchEnd={[Function]}
- onTouchMove={[Function]}
- onTouchStart={[Function]}
- tabIndex={0}
- type="button"
- >
- <span
- className="MuiIconButton-label"
- >
- <Icon
- icon="test-file-stub"
- size={40}
- spin={false}
- >
- <Component
- className="styles__icon___23x3R"
- height={40}
- style={Object {}}
- width={40}
- >
- <svg
- className="styles__icon___23x3R"
- height={40}
- style={Object {}}
- width={40}
- >
- <use
- xlinkHref="#test-file-stub"
- />
- </svg>
- </Component>
- </Icon>
- </span>
- <WithStyles(memo)
- center={true}
- >
- <ForwardRef(TouchRipple)
- center={true}
- classes={
- Object {
- "child": "MuiTouchRipple-child",
- "childLeaving": "MuiTouchRipple-childLeaving",
- "childPulsate": "MuiTouchRipple-childPulsate",
- "ripple": "MuiTouchRipple-ripple",
- "ripplePulsate": "MuiTouchRipple-ripplePulsate",
- "rippleVisible": "MuiTouchRipple-rippleVisible",
- "root": "MuiTouchRipple-root",
- }
- }
- >
- <span
- className="MuiTouchRipple-root"
- >
- <TransitionGroup
- childFactory={[Function]}
- component={null}
- exit={true}
- />
- </span>
- </ForwardRef(TouchRipple)>
- </WithStyles(memo)>
- </button>
- </ForwardRef(ButtonBase)>
- </WithStyles(ForwardRef(ButtonBase))>
- </ForwardRef(IconButton)>
- </WithStyles(ForwardRef(IconButton))>
- </div>
+ <use
+ xlink:href="#test-file-stub"
+ />
+ </svg>
+ </span>
+ <span
+ class="MuiTouchRipple-root"
+ />
+ </button>
+ <span>
+ common.title_sge_connect
+ </span>
</div>
+ <button
+ aria-label="header.accessibility.button_open_feedbacks"
+ class="MuiButtonBase-root MuiIconButton-root header-feedbacks-button"
+ tabindex="0"
+ type="button"
+ >
+ <span
+ class="MuiIconButton-label"
+ >
+ <svg
+ class="styles__icon___23x3R"
+ height="40"
+ width="40"
+ >
+ <use
+ xlink:href="#test-file-stub"
+ />
+ </svg>
+ </span>
+ <span
+ class="MuiTouchRipple-root"
+ />
+ </button>
</div>
- <div
- className="header-bar"
- />
</div>
- </Header>
- <mock-content
- heightOffset={-48}
+ </div>
+ <div
+ class="header-bar"
+ />
+ </header>
+ <mock-content
+ heightoffset="-48"
+ >
+ <div
+ class="sge-view"
>
<div
- className="sge-view"
+ class="sge-container"
>
<div
- className="sge-container"
+ class="profile-type-progress"
>
- <FormProgress
- formType="sge"
- step={0}
+ <div
+ class="profile-type-progress-label"
>
- <div
- className="profile-type-progress"
- >
- <div
- className="profile-type-progress-label"
- >
- 1
- %
- </div>
- <div
- className="profile-type-progress-bar-container"
- >
- <div
- className="profile-type-progress-bar-content"
- style={
- Object {
- "width": "1%",
- }
- }
- />
- </div>
- </div>
- </FormProgress>
- <StepIdentityAndPdl
- onChange={[Function]}
- sgeState={
- Object {
- "address": "",
- "city": "",
- "currentStep": 0,
- "dataConsent": false,
- "firstName": "",
- "lastName": "",
- "pdl": null,
- "pdlConfirm": false,
- "shouldLaunchAccount": false,
- "zipCode": null,
- }
- }
+ 1
+ %
+ </div>
+ <div
+ class="profile-type-progress-bar-container"
>
<div
- className="sge-step-container stepIdentity"
- >
- <div
- className="title text-22-bold"
- >
- auth.enedissgegrandlyon.identityTitle
- </div>
- <label
- className="text-16-normal"
- htmlFor="firstName"
- >
- auth.enedissgegrandlyon.firstName
- </label>
- <input
- id="firstName"
- name="firstName"
- onChange={[Function]}
- required={true}
- type="text"
- value=""
- />
- <label
- className="text-16-normal"
- htmlFor="lastName"
- >
- auth.enedissgegrandlyon.lastName
- </label>
- <input
- id="lastName"
- name="lastName"
- onChange={[Function]}
- required={true}
- type="text"
- value=""
- />
- <div
- className="title text-22-bold"
- >
- auth.enedissgegrandlyon.pdlTitle
- </div>
- <label
- className="text-16-normal"
- htmlFor="pdl"
- >
- auth.enedissgegrandlyon.pdlLabel
- </label>
- <input
- id="pdl"
- inputMode="numeric"
- min={0}
- name="pdl"
- onChange={[Function]}
- required={true}
- type="number"
- />
- <br />
- <div
- className="pdl-hint text-16-normal"
- onClick={[Function]}
- >
- auth.enedissgegrandlyon.pdlHint
- </div>
- <SgeModalHint
- handleCloseClick={[Function]}
- open={false}
- >
- <WithStyles(ForwardRef(Dialog))
- aria-labelledby="accessibility-title"
- classes={
- Object {
- "paper": "modal-paper",
- "root": "modal-root",
- }
- }
- disableEscapeKeyDown={true}
- onClose={[Function]}
- open={false}
- >
- <ForwardRef(Dialog)
- aria-labelledby="accessibility-title"
- classes={
- Object {
- "container": "MuiDialog-container",
- "paper": "MuiDialog-paper modal-paper",
- "paperFullScreen": "MuiDialog-paperFullScreen",
- "paperFullWidth": "MuiDialog-paperFullWidth",
- "paperScrollBody": "MuiDialog-paperScrollBody",
- "paperScrollPaper": "MuiDialog-paperScrollPaper",
- "paperWidthFalse": "MuiDialog-paperWidthFalse",
- "paperWidthLg": "MuiDialog-paperWidthLg",
- "paperWidthMd": "MuiDialog-paperWidthMd",
- "paperWidthSm": "MuiDialog-paperWidthSm",
- "paperWidthXl": "MuiDialog-paperWidthXl",
- "paperWidthXs": "MuiDialog-paperWidthXs",
- "root": "MuiDialog-root modal-root",
- "scrollBody": "MuiDialog-scrollBody",
- "scrollPaper": "MuiDialog-scrollPaper",
- }
- }
- disableEscapeKeyDown={true}
- onClose={[Function]}
- open={false}
- >
- <ForwardRef(Modal)
- BackdropComponent={
- Object {
- "$$typeof": Symbol(react.forward_ref),
- "Naked": Object {
- "$$typeof": Symbol(react.forward_ref),
- "propTypes": Object {
- "children": [Function],
- "className": [Function],
- "classes": [Function],
- "invisible": [Function],
- "open": [Function],
- "transitionDuration": [Function],
- },
- "render": [Function],
- },
- "displayName": "WithStyles(ForwardRef(Backdrop))",
- "options": Object {
- "defaultTheme": Object {
- "breakpoints": Object {
- "between": [Function],
- "down": [Function],
- "keys": Array [
- "xs",
- "sm",
- "md",
- "lg",
- "xl",
- ],
- "only": [Function],
- "up": [Function],
- "values": Object {
- "lg": 1280,
- "md": 960,
- "sm": 600,
- "xl": 1920,
- "xs": 0,
- },
- "width": [Function],
- },
- "direction": "ltr",
- "mixins": Object {
- "gutters": [Function],
- "toolbar": Object {
- "@media (min-width:0px) and (orientation: landscape)": Object {
- "minHeight": 48,
- },
- "@media (min-width:600px)": Object {
- "minHeight": 64,
- },
- "minHeight": 56,
- },
- },
- "overrides": Object {},
- "palette": Object {
- "action": Object {
- "activatedOpacity": 0.12,
- "active": "rgba(0, 0, 0, 0.54)",
- "disabled": "rgba(0, 0, 0, 0.26)",
- "disabledBackground": "rgba(0, 0, 0, 0.12)",
- "disabledOpacity": 0.38,
- "focus": "rgba(0, 0, 0, 0.12)",
- "focusOpacity": 0.12,
- "hover": "rgba(0, 0, 0, 0.04)",
- "hoverOpacity": 0.04,
- "selected": "rgba(0, 0, 0, 0.08)",
- "selectedOpacity": 0.08,
- },
- "augmentColor": [Function],
- "background": Object {
- "default": "#fafafa",
- "paper": "#fff",
- },
- "common": Object {
- "black": "#000",
- "white": "#fff",
- },
- "contrastThreshold": 3,
- "divider": "rgba(0, 0, 0, 0.12)",
- "error": Object {
- "contrastText": "#fff",
- "dark": "#d32f2f",
- "light": "#e57373",
- "main": "#f44336",
- },
- "getContrastText": [Function],
- "grey": Object {
- "100": "#f5f5f5",
- "200": "#eeeeee",
- "300": "#e0e0e0",
- "400": "#bdbdbd",
- "50": "#fafafa",
- "500": "#9e9e9e",
- "600": "#757575",
- "700": "#616161",
- "800": "#424242",
- "900": "#212121",
- "A100": "#d5d5d5",
- "A200": "#aaaaaa",
- "A400": "#303030",
- "A700": "#616161",
- },
- "info": Object {
- "contrastText": "#fff",
- "dark": "#1976d2",
- "light": "#64b5f6",
- "main": "#2196f3",
- },
- "primary": Object {
- "contrastText": "#fff",
- "dark": "#303f9f",
- "light": "#7986cb",
- "main": "#3f51b5",
- },
- "secondary": Object {
- "contrastText": "#fff",
- "dark": "#c51162",
- "light": "#ff4081",
- "main": "#f50057",
- },
- "success": Object {
- "contrastText": "rgba(0, 0, 0, 0.87)",
- "dark": "#388e3c",
- "light": "#81c784",
- "main": "#4caf50",
- },
- "text": Object {
- "disabled": "rgba(0, 0, 0, 0.38)",
- "hint": "rgba(0, 0, 0, 0.38)",
- "primary": "rgba(0, 0, 0, 0.87)",
- "secondary": "rgba(0, 0, 0, 0.54)",
- },
- "tonalOffset": 0.2,
- "type": "light",
- "warning": Object {
- "contrastText": "rgba(0, 0, 0, 0.87)",
- "dark": "#f57c00",
- "light": "#ffb74d",
- "main": "#ff9800",
- },
- },
- "props": Object {},
- "shadows": Array [
- "none",
- "0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12)",
- "0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12)",
- "0px 3px 3px -2px rgba(0,0,0,0.2),0px 3px 4px 0px rgba(0,0,0,0.14),0px 1px 8px 0px rgba(0,0,0,0.12)",
- "0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12)",
- "0px 3px 5px -1px rgba(0,0,0,0.2),0px 5px 8px 0px rgba(0,0,0,0.14),0px 1px 14px 0px rgba(0,0,0,0.12)",
- "0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12)",
- "0px 4px 5px -2px rgba(0,0,0,0.2),0px 7px 10px 1px rgba(0,0,0,0.14),0px 2px 16px 1px rgba(0,0,0,0.12)",
- "0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12)",
- "0px 5px 6px -3px rgba(0,0,0,0.2),0px 9px 12px 1px rgba(0,0,0,0.14),0px 3px 16px 2px rgba(0,0,0,0.12)",
- "0px 6px 6px -3px rgba(0,0,0,0.2),0px 10px 14px 1px rgba(0,0,0,0.14),0px 4px 18px 3px rgba(0,0,0,0.12)",
- "0px 6px 7px -4px rgba(0,0,0,0.2),0px 11px 15px 1px rgba(0,0,0,0.14),0px 4px 20px 3px rgba(0,0,0,0.12)",
- "0px 7px 8px -4px rgba(0,0,0,0.2),0px 12px 17px 2px rgba(0,0,0,0.14),0px 5px 22px 4px rgba(0,0,0,0.12)",
- "0px 7px 8px -4px rgba(0,0,0,0.2),0px 13px 19px 2px rgba(0,0,0,0.14),0px 5px 24px 4px rgba(0,0,0,0.12)",
- "0px 7px 9px -4px rgba(0,0,0,0.2),0px 14px 21px 2px rgba(0,0,0,0.14),0px 5px 26px 4px rgba(0,0,0,0.12)",
- "0px 8px 9px -5px rgba(0,0,0,0.2),0px 15px 22px 2px rgba(0,0,0,0.14),0px 6px 28px 5px rgba(0,0,0,0.12)",
- "0px 8px 10px -5px rgba(0,0,0,0.2),0px 16px 24px 2px rgba(0,0,0,0.14),0px 6px 30px 5px rgba(0,0,0,0.12)",
- "0px 8px 11px -5px rgba(0,0,0,0.2),0px 17px 26px 2px rgba(0,0,0,0.14),0px 6px 32px 5px rgba(0,0,0,0.12)",
- "0px 9px 11px -5px rgba(0,0,0,0.2),0px 18px 28px 2px rgba(0,0,0,0.14),0px 7px 34px 6px rgba(0,0,0,0.12)",
- "0px 9px 12px -6px rgba(0,0,0,0.2),0px 19px 29px 2px rgba(0,0,0,0.14),0px 7px 36px 6px rgba(0,0,0,0.12)",
- "0px 10px 13px -6px rgba(0,0,0,0.2),0px 20px 31px 3px rgba(0,0,0,0.14),0px 8px 38px 7px rgba(0,0,0,0.12)",
- "0px 10px 13px -6px rgba(0,0,0,0.2),0px 21px 33px 3px rgba(0,0,0,0.14),0px 8px 40px 7px rgba(0,0,0,0.12)",
- "0px 10px 14px -6px rgba(0,0,0,0.2),0px 22px 35px 3px rgba(0,0,0,0.14),0px 8px 42px 7px rgba(0,0,0,0.12)",
- "0px 11px 14px -7px rgba(0,0,0,0.2),0px 23px 36px 3px rgba(0,0,0,0.14),0px 9px 44px 8px rgba(0,0,0,0.12)",
- "0px 11px 15px -7px rgba(0,0,0,0.2),0px 24px 38px 3px rgba(0,0,0,0.14),0px 9px 46px 8px rgba(0,0,0,0.12)",
- ],
- "shape": Object {
- "borderRadius": 4,
- },
- "spacing": [Function],
- "transitions": Object {
- "create": [Function],
- "duration": Object {
- "complex": 375,
- "enteringScreen": 225,
- "leavingScreen": 195,
- "short": 250,
- "shorter": 200,
- "shortest": 150,
- "standard": 300,
- },
- "easing": Object {
- "easeIn": "cubic-bezier(0.4, 0, 1, 1)",
- "easeInOut": "cubic-bezier(0.4, 0, 0.2, 1)",
- "easeOut": "cubic-bezier(0.0, 0, 0.2, 1)",
- "sharp": "cubic-bezier(0.4, 0, 0.6, 1)",
- },
- "getAutoHeightDuration": [Function],
- },
- "typography": Object {
- "body1": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "1rem",
- "fontWeight": 400,
- "letterSpacing": "0.00938em",
- "lineHeight": 1.5,
- },
- "body2": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "0.875rem",
- "fontWeight": 400,
- "letterSpacing": "0.01071em",
- "lineHeight": 1.43,
- },
- "button": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "0.875rem",
- "fontWeight": 500,
- "letterSpacing": "0.02857em",
- "lineHeight": 1.75,
- "textTransform": "uppercase",
- },
- "caption": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "0.75rem",
- "fontWeight": 400,
- "letterSpacing": "0.03333em",
- "lineHeight": 1.66,
- },
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": 14,
- "fontWeightBold": 700,
- "fontWeightLight": 300,
- "fontWeightMedium": 500,
- "fontWeightRegular": 400,
- "h1": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "6rem",
- "fontWeight": 300,
- "letterSpacing": "-0.01562em",
- "lineHeight": 1.167,
- },
- "h2": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "3.75rem",
- "fontWeight": 300,
- "letterSpacing": "-0.00833em",
- "lineHeight": 1.2,
- },
- "h3": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "3rem",
- "fontWeight": 400,
- "letterSpacing": "0em",
- "lineHeight": 1.167,
- },
- "h4": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "2.125rem",
- "fontWeight": 400,
- "letterSpacing": "0.00735em",
- "lineHeight": 1.235,
- },
- "h5": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "1.5rem",
- "fontWeight": 400,
- "letterSpacing": "0em",
- "lineHeight": 1.334,
- },
- "h6": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "1.25rem",
- "fontWeight": 500,
- "letterSpacing": "0.0075em",
- "lineHeight": 1.6,
- },
- "htmlFontSize": 16,
- "overline": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "0.75rem",
- "fontWeight": 400,
- "letterSpacing": "0.08333em",
- "lineHeight": 2.66,
- "textTransform": "uppercase",
- },
- "pxToRem": [Function],
- "round": [Function],
- "subtitle1": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "1rem",
- "fontWeight": 400,
- "letterSpacing": "0.00938em",
- "lineHeight": 1.75,
- },
- "subtitle2": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "0.875rem",
- "fontWeight": 500,
- "letterSpacing": "0.00714em",
- "lineHeight": 1.57,
- },
- },
- "zIndex": Object {
- "appBar": 1100,
- "drawer": 1200,
- "mobileStepper": 1000,
- "modal": 1300,
- "snackbar": 1400,
- "speedDial": 1050,
- "tooltip": 1500,
- },
- },
- "name": "MuiBackdrop",
- },
- "propTypes": Object {
- "classes": [Function],
- "innerRef": [Function],
- },
- "render": [Function],
- "useStyles": [Function],
- }
- }
- BackdropProps={
- Object {
- "transitionDuration": Object {
- "enter": 225,
- "exit": 195,
- },
- }
- }
- className="MuiDialog-root modal-root"
- closeAfterTransition={true}
- disableEscapeKeyDown={true}
- onClose={[Function]}
- open={false}
- />
- </ForwardRef(Dialog)>
- </WithStyles(ForwardRef(Dialog))>
- </SgeModalHint>
- </div>
- </StepIdentityAndPdl>
+ class="profile-type-progress-bar-content"
+ style="width: 1%;"
+ />
+ </div>
</div>
- <FormNavigation
- disableNextButton={true}
- disablePrevButton={true}
- handleNext={[Function]}
- handlePrevious={[Function]}
- isEcogesture={false}
- isLastConnectStep={false}
- isLoading={false}
- step={0}
+ <div
+ class="sge-step-container stepIdentity"
>
<div
- className="profile-navigation"
+ class="title text-22-bold"
>
- <WithStyles(ForwardRef(Button))
- aria-label="profile_type.accessibility.button_previous"
- className="profile-navigation-button"
- classes={
- Object {
- "label": "text-16-bold",
- "root": "btn-profile-back",
- }
- }
- disabled={true}
- onClick={[Function]}
- >
- <ForwardRef(Button)
- aria-label="profile_type.accessibility.button_previous"
- className="profile-navigation-button"
- classes={
- Object {
- "colorInherit": "MuiButton-colorInherit",
- "contained": "MuiButton-contained",
- "containedPrimary": "MuiButton-containedPrimary",
- "containedSecondary": "MuiButton-containedSecondary",
- "containedSizeLarge": "MuiButton-containedSizeLarge",
- "containedSizeSmall": "MuiButton-containedSizeSmall",
- "disableElevation": "MuiButton-disableElevation",
- "disabled": "Mui-disabled",
- "endIcon": "MuiButton-endIcon",
- "focusVisible": "Mui-focusVisible",
- "fullWidth": "MuiButton-fullWidth",
- "iconSizeLarge": "MuiButton-iconSizeLarge",
- "iconSizeMedium": "MuiButton-iconSizeMedium",
- "iconSizeSmall": "MuiButton-iconSizeSmall",
- "label": "MuiButton-label text-16-bold",
- "outlined": "MuiButton-outlined",
- "outlinedPrimary": "MuiButton-outlinedPrimary",
- "outlinedSecondary": "MuiButton-outlinedSecondary",
- "outlinedSizeLarge": "MuiButton-outlinedSizeLarge",
- "outlinedSizeSmall": "MuiButton-outlinedSizeSmall",
- "root": "MuiButton-root btn-profile-back",
- "sizeLarge": "MuiButton-sizeLarge",
- "sizeSmall": "MuiButton-sizeSmall",
- "startIcon": "MuiButton-startIcon",
- "text": "MuiButton-text",
- "textPrimary": "MuiButton-textPrimary",
- "textSecondary": "MuiButton-textSecondary",
- "textSizeLarge": "MuiButton-textSizeLarge",
- "textSizeSmall": "MuiButton-textSizeSmall",
- }
- }
- disabled={true}
- onClick={[Function]}
- >
- <WithStyles(ForwardRef(ButtonBase))
- aria-label="profile_type.accessibility.button_previous"
- className="MuiButton-root btn-profile-back MuiButton-text profile-navigation-button Mui-disabled"
- component="button"
- disabled={true}
- focusRipple={true}
- focusVisibleClassName="Mui-focusVisible"
- onClick={[Function]}
- type="button"
- >
- <ForwardRef(ButtonBase)
- aria-label="profile_type.accessibility.button_previous"
- className="MuiButton-root btn-profile-back MuiButton-text profile-navigation-button Mui-disabled"
- classes={
- Object {
- "disabled": "Mui-disabled",
- "focusVisible": "Mui-focusVisible",
- "root": "MuiButtonBase-root",
- }
- }
- component="button"
- disabled={true}
- focusRipple={true}
- focusVisibleClassName="Mui-focusVisible"
- onClick={[Function]}
- type="button"
- >
- <button
- aria-label="profile_type.accessibility.button_previous"
- className="MuiButtonBase-root MuiButton-root btn-profile-back MuiButton-text profile-navigation-button Mui-disabled Mui-disabled"
- disabled={true}
- onBlur={[Function]}
- onClick={[Function]}
- onDragLeave={[Function]}
- onFocus={[Function]}
- onKeyDown={[Function]}
- onKeyUp={[Function]}
- onMouseDown={[Function]}
- onMouseLeave={[Function]}
- onMouseUp={[Function]}
- onTouchEnd={[Function]}
- onTouchMove={[Function]}
- onTouchStart={[Function]}
- tabIndex={-1}
- type="button"
- >
- <span
- className="MuiButton-label text-16-bold"
- >
- < profile_type.form.button_previous
- </span>
- </button>
- </ForwardRef(ButtonBase)>
- </WithStyles(ForwardRef(ButtonBase))>
- </ForwardRef(Button)>
- </WithStyles(ForwardRef(Button))>
- <WithStyles(ForwardRef(Button))
- aria-label="profile_type.accessibility.button_next"
- className="profile-navigation-button disabled"
- classes={
- Object {
- "label": "text-16-bold",
- "root": "btn-profile-next",
- }
- }
- disabled={true}
- onClick={[Function]}
- >
- <ForwardRef(Button)
- aria-label="profile_type.accessibility.button_next"
- className="profile-navigation-button disabled"
- classes={
- Object {
- "colorInherit": "MuiButton-colorInherit",
- "contained": "MuiButton-contained",
- "containedPrimary": "MuiButton-containedPrimary",
- "containedSecondary": "MuiButton-containedSecondary",
- "containedSizeLarge": "MuiButton-containedSizeLarge",
- "containedSizeSmall": "MuiButton-containedSizeSmall",
- "disableElevation": "MuiButton-disableElevation",
- "disabled": "Mui-disabled",
- "endIcon": "MuiButton-endIcon",
- "focusVisible": "Mui-focusVisible",
- "fullWidth": "MuiButton-fullWidth",
- "iconSizeLarge": "MuiButton-iconSizeLarge",
- "iconSizeMedium": "MuiButton-iconSizeMedium",
- "iconSizeSmall": "MuiButton-iconSizeSmall",
- "label": "MuiButton-label text-16-bold",
- "outlined": "MuiButton-outlined",
- "outlinedPrimary": "MuiButton-outlinedPrimary",
- "outlinedSecondary": "MuiButton-outlinedSecondary",
- "outlinedSizeLarge": "MuiButton-outlinedSizeLarge",
- "outlinedSizeSmall": "MuiButton-outlinedSizeSmall",
- "root": "MuiButton-root btn-profile-next",
- "sizeLarge": "MuiButton-sizeLarge",
- "sizeSmall": "MuiButton-sizeSmall",
- "startIcon": "MuiButton-startIcon",
- "text": "MuiButton-text",
- "textPrimary": "MuiButton-textPrimary",
- "textSecondary": "MuiButton-textSecondary",
- "textSizeLarge": "MuiButton-textSizeLarge",
- "textSizeSmall": "MuiButton-textSizeSmall",
- }
- }
- disabled={true}
- onClick={[Function]}
- >
- <WithStyles(ForwardRef(ButtonBase))
- aria-label="profile_type.accessibility.button_next"
- className="MuiButton-root btn-profile-next MuiButton-text profile-navigation-button disabled Mui-disabled"
- component="button"
- disabled={true}
- focusRipple={true}
- focusVisibleClassName="Mui-focusVisible"
- onClick={[Function]}
- type="button"
- >
- <ForwardRef(ButtonBase)
- aria-label="profile_type.accessibility.button_next"
- className="MuiButton-root btn-profile-next MuiButton-text profile-navigation-button disabled Mui-disabled"
- classes={
- Object {
- "disabled": "Mui-disabled",
- "focusVisible": "Mui-focusVisible",
- "root": "MuiButtonBase-root",
- }
- }
- component="button"
- disabled={true}
- focusRipple={true}
- focusVisibleClassName="Mui-focusVisible"
- onClick={[Function]}
- type="button"
- >
- <button
- aria-label="profile_type.accessibility.button_next"
- className="MuiButtonBase-root MuiButton-root btn-profile-next MuiButton-text profile-navigation-button disabled Mui-disabled Mui-disabled"
- disabled={true}
- onBlur={[Function]}
- onClick={[Function]}
- onDragLeave={[Function]}
- onFocus={[Function]}
- onKeyDown={[Function]}
- onKeyUp={[Function]}
- onMouseDown={[Function]}
- onMouseLeave={[Function]}
- onMouseUp={[Function]}
- onTouchEnd={[Function]}
- onTouchMove={[Function]}
- onTouchStart={[Function]}
- tabIndex={-1}
- type="button"
- >
- <span
- className="MuiButton-label text-16-bold"
- >
- profile_type.form.button_next >
- </span>
- </button>
- </ForwardRef(ButtonBase)>
- </WithStyles(ForwardRef(ButtonBase))>
- </ForwardRef(Button)>
- </WithStyles(ForwardRef(Button))>
+ auth.enedissgegrandlyon.identityTitle
</div>
- </FormNavigation>
+ <label
+ class="text-16-normal"
+ for="firstName"
+ >
+ auth.enedissgegrandlyon.firstName
+ <input
+ class="inputText"
+ id="firstName"
+ name="firstName"
+ required=""
+ type="text"
+ value=""
+ />
+ </label>
+ <label
+ class="text-16-normal"
+ for="lastName"
+ >
+ auth.enedissgegrandlyon.lastName
+ <input
+ class="inputText"
+ id="lastName"
+ name="lastName"
+ required=""
+ type="text"
+ value=""
+ />
+ </label>
+ <div
+ class="title text-22-bold"
+ >
+ auth.enedissgegrandlyon.pdlTitle
+ </div>
+ <label
+ class="text-16-normal"
+ for="pdl"
+ >
+ auth.enedissgegrandlyon.pdlLabel
+ <input
+ class="inputText"
+ id="pdl"
+ inputmode="numeric"
+ min="0"
+ name="pdl"
+ required=""
+ type="number"
+ value=""
+ />
+ </label>
+ <button
+ class="MuiButtonBase-root MuiButton-root MuiButton-text btnText"
+ tabindex="0"
+ type="button"
+ >
+ <span
+ class="MuiButton-label"
+ >
+ auth.enedissgegrandlyon.pdlHint
+ </span>
+ <span
+ class="MuiTouchRipple-root"
+ />
+ </button>
+ </div>
+ </div>
+ <div
+ class="profile-navigation"
+ >
+ <button
+ aria-label="profile_type.accessibility.button_previous"
+ class="MuiButtonBase-root MuiButton-root MuiButton-text btnSecondary Mui-disabled Mui-disabled"
+ disabled=""
+ tabindex="-1"
+ type="button"
+ >
+ <span
+ class="MuiButton-label"
+ >
+ profile_type.form.button_previous
+ </span>
+ </button>
+ <button
+ aria-label="profile_type.accessibility.button_next"
+ class="MuiButtonBase-root MuiButton-root MuiButton-text btnPrimary Mui-disabled Mui-disabled"
+ disabled=""
+ tabindex="-1"
+ type="button"
+ >
+ <span
+ class="MuiButton-label"
+ >
+ profile_type.form.button_next
+ </span>
+ </button>
</div>
- </mock-content>
- </SgeConnectView>
-</Provider>
+ </div>
+ </mock-content>
+</div>
`;
diff --git a/src/components/Connection/SGEConnect/__snapshots__/SgeInit.spec.tsx.snap b/src/components/Connection/SGEConnect/__snapshots__/SgeInit.spec.tsx.snap
index d59746e33a69f42117eff9e6430a81fa8788b571..4658462c50026aba4d736556c29c9cc6a13f1c90 100644
--- a/src/components/Connection/SGEConnect/__snapshots__/SgeInit.spec.tsx.snap
+++ b/src/components/Connection/SGEConnect/__snapshots__/SgeInit.spec.tsx.snap
@@ -1,202 +1,49 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`SgeInit component should be rendered correctly 1`] = `
-<Provider
- store={
- Object {
- "clearActions": [Function],
- "dispatch": [Function],
- "getActions": [Function],
- "getState": [Function],
- "replaceReducer": [Function],
- "subscribe": [Function],
- }
- }
->
- <SgeInit>
- <div
- className="connection-form"
+<div>
+ <div
+ class="connection-form"
+ >
+ <p
+ class="connection-form-title enedissgegrandlyon text-20-bold"
>
- <p
- className="connection-form-title enedissgegrandlyon text-20-bold"
- >
- auth.enedissgegrandlyon.title
- </p>
- <StyledIcon
- icon="test-file-stub"
- size={180}
- >
- <Icon
- aria-hidden={true}
- icon="test-file-stub"
- size={180}
- spin={false}
- >
- <Component
- aria-hidden={true}
- className="styles__icon___23x3R"
- height={180}
- style={Object {}}
- width={180}
- >
- <svg
- aria-hidden={true}
- className="styles__icon___23x3R"
- height={180}
- style={Object {}}
- width={180}
- >
- <use
- xlinkHref="#test-file-stub"
- />
- </svg>
- </Component>
- </Icon>
- </StyledIcon>
- <p
- className="connection-form-subtitle enedissgegrandlyon text-16-regular"
- dangerouslySetInnerHTML={
- Object {
- "__html": "auth.enedissgegrandlyon.bill",
- }
- }
+ auth.enedissgegrandlyon.title
+ </p>
+ <svg
+ aria-hidden="true"
+ class="styles__icon___23x3R"
+ height="180"
+ width="180"
+ >
+ <use
+ xlink:href="#test-file-stub"
/>
- <div
- className="connection-form-button"
+ </svg>
+ <p
+ class="connection-form-subtitle enedissgegrandlyon text-16-regular"
+ >
+ auth.enedissgegrandlyon.bill
+ </p>
+ <div
+ class="connection-form-button"
+ >
+ <button
+ aria-label="auth.enedissgegrandlyon.accessibility.connect"
+ class="MuiButtonBase-root MuiButton-root MuiButton-text btnPrimary"
+ tabindex="0"
+ type="button"
>
- <WithStyles(ForwardRef(Button))
- aria-label="auth.enedissgegrandlyon.accessibility.connect"
- classes={
- Object {
- "label": "text-16-bold",
- "root": "btn-highlight",
- }
- }
- onClick={[Function]}
+ <span
+ class="MuiButton-label"
>
- <ForwardRef(Button)
- aria-label="auth.enedissgegrandlyon.accessibility.connect"
- classes={
- Object {
- "colorInherit": "MuiButton-colorInherit",
- "contained": "MuiButton-contained",
- "containedPrimary": "MuiButton-containedPrimary",
- "containedSecondary": "MuiButton-containedSecondary",
- "containedSizeLarge": "MuiButton-containedSizeLarge",
- "containedSizeSmall": "MuiButton-containedSizeSmall",
- "disableElevation": "MuiButton-disableElevation",
- "disabled": "Mui-disabled",
- "endIcon": "MuiButton-endIcon",
- "focusVisible": "Mui-focusVisible",
- "fullWidth": "MuiButton-fullWidth",
- "iconSizeLarge": "MuiButton-iconSizeLarge",
- "iconSizeMedium": "MuiButton-iconSizeMedium",
- "iconSizeSmall": "MuiButton-iconSizeSmall",
- "label": "MuiButton-label text-16-bold",
- "outlined": "MuiButton-outlined",
- "outlinedPrimary": "MuiButton-outlinedPrimary",
- "outlinedSecondary": "MuiButton-outlinedSecondary",
- "outlinedSizeLarge": "MuiButton-outlinedSizeLarge",
- "outlinedSizeSmall": "MuiButton-outlinedSizeSmall",
- "root": "MuiButton-root btn-highlight",
- "sizeLarge": "MuiButton-sizeLarge",
- "sizeSmall": "MuiButton-sizeSmall",
- "startIcon": "MuiButton-startIcon",
- "text": "MuiButton-text",
- "textPrimary": "MuiButton-textPrimary",
- "textSecondary": "MuiButton-textSecondary",
- "textSizeLarge": "MuiButton-textSizeLarge",
- "textSizeSmall": "MuiButton-textSizeSmall",
- }
- }
- onClick={[Function]}
- >
- <WithStyles(ForwardRef(ButtonBase))
- aria-label="auth.enedissgegrandlyon.accessibility.connect"
- className="MuiButton-root btn-highlight MuiButton-text"
- component="button"
- disabled={false}
- focusRipple={true}
- focusVisibleClassName="Mui-focusVisible"
- onClick={[Function]}
- type="button"
- >
- <ForwardRef(ButtonBase)
- aria-label="auth.enedissgegrandlyon.accessibility.connect"
- className="MuiButton-root btn-highlight MuiButton-text"
- classes={
- Object {
- "disabled": "Mui-disabled",
- "focusVisible": "Mui-focusVisible",
- "root": "MuiButtonBase-root",
- }
- }
- component="button"
- disabled={false}
- focusRipple={true}
- focusVisibleClassName="Mui-focusVisible"
- onClick={[Function]}
- type="button"
- >
- <button
- aria-label="auth.enedissgegrandlyon.accessibility.connect"
- className="MuiButtonBase-root MuiButton-root btn-highlight MuiButton-text"
- disabled={false}
- onBlur={[Function]}
- onClick={[Function]}
- onDragLeave={[Function]}
- onFocus={[Function]}
- onKeyDown={[Function]}
- onKeyUp={[Function]}
- onMouseDown={[Function]}
- onMouseLeave={[Function]}
- onMouseUp={[Function]}
- onTouchEnd={[Function]}
- onTouchMove={[Function]}
- onTouchStart={[Function]}
- tabIndex={0}
- type="button"
- >
- <span
- className="MuiButton-label text-16-bold"
- >
- auth.enedissgegrandlyon.connect
- </span>
- <WithStyles(memo)
- center={false}
- >
- <ForwardRef(TouchRipple)
- center={false}
- classes={
- Object {
- "child": "MuiTouchRipple-child",
- "childLeaving": "MuiTouchRipple-childLeaving",
- "childPulsate": "MuiTouchRipple-childPulsate",
- "ripple": "MuiTouchRipple-ripple",
- "ripplePulsate": "MuiTouchRipple-ripplePulsate",
- "rippleVisible": "MuiTouchRipple-rippleVisible",
- "root": "MuiTouchRipple-root",
- }
- }
- >
- <span
- className="MuiTouchRipple-root"
- >
- <TransitionGroup
- childFactory={[Function]}
- component={null}
- exit={true}
- />
- </span>
- </ForwardRef(TouchRipple)>
- </WithStyles(memo)>
- </button>
- </ForwardRef(ButtonBase)>
- </WithStyles(ForwardRef(ButtonBase))>
- </ForwardRef(Button)>
- </WithStyles(ForwardRef(Button))>
- </div>
+ auth.enedissgegrandlyon.connect
+ </span>
+ <span
+ class="MuiTouchRipple-root"
+ />
+ </button>
</div>
- </SgeInit>
-</Provider>
+ </div>
+</div>
`;
diff --git a/src/components/Connection/SGEConnect/__snapshots__/SgeModalHint.spec.tsx.snap b/src/components/Connection/SGEConnect/__snapshots__/SgeModalHint.spec.tsx.snap
index eff1752825bab266d4a25c487d26d8a29d4d18db..78b078c6f75ee3ef999c2c06b7d2fee8b572816b 100644
--- a/src/components/Connection/SGEConnect/__snapshots__/SgeModalHint.spec.tsx.snap
+++ b/src/components/Connection/SGEConnect/__snapshots__/SgeModalHint.spec.tsx.snap
@@ -1,1106 +1,135 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`SgeModalHint component should be rendered correctly 1`] = `
-<Provider
- store={
- Object {
- "clearActions": [Function],
- "dispatch": [Function],
- "getActions": [Function],
- "getState": [Function],
- "replaceReducer": [Function],
- "subscribe": [Function],
- }
- }
+<body
+ style="padding-right: 0px; overflow: hidden;"
>
- <SgeModalHint
- handleCloseClick={[MockFunction]}
- open={true}
+ <div
+ aria-hidden="true"
+ />
+ <div
+ class="MuiDialog-root modal-root"
+ role="presentation"
+ style="position: fixed; z-index: 1300; right: 0px; bottom: 0px; top: 0px; left: 0px;"
>
- <WithStyles(ForwardRef(Dialog))
- aria-labelledby="accessibility-title"
- classes={
- Object {
- "paper": "modal-paper",
- "root": "modal-root",
- }
- }
- disableEscapeKeyDown={true}
- onClose={[MockFunction]}
- open={true}
+ <div
+ aria-hidden="true"
+ class="MuiBackdrop-root"
+ style="opacity: 1; webkit-transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"
+ />
+ <div
+ data-test="sentinelStart"
+ tabindex="0"
+ />
+ <div
+ class="MuiDialog-container MuiDialog-scrollPaper"
+ role="none presentation"
+ style="opacity: 1; webkit-transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"
+ tabindex="-1"
>
- <ForwardRef(Dialog)
+ <div
aria-labelledby="accessibility-title"
- classes={
- Object {
- "container": "MuiDialog-container",
- "paper": "MuiDialog-paper modal-paper",
- "paperFullScreen": "MuiDialog-paperFullScreen",
- "paperFullWidth": "MuiDialog-paperFullWidth",
- "paperScrollBody": "MuiDialog-paperScrollBody",
- "paperScrollPaper": "MuiDialog-paperScrollPaper",
- "paperWidthFalse": "MuiDialog-paperWidthFalse",
- "paperWidthLg": "MuiDialog-paperWidthLg",
- "paperWidthMd": "MuiDialog-paperWidthMd",
- "paperWidthSm": "MuiDialog-paperWidthSm",
- "paperWidthXl": "MuiDialog-paperWidthXl",
- "paperWidthXs": "MuiDialog-paperWidthXs",
- "root": "MuiDialog-root modal-root",
- "scrollBody": "MuiDialog-scrollBody",
- "scrollPaper": "MuiDialog-scrollPaper",
- }
- }
- disableEscapeKeyDown={true}
- onClose={[MockFunction]}
- open={true}
+ class="MuiPaper-root MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm MuiPaper-elevation24 MuiPaper-rounded"
+ role="dialog"
>
- <ForwardRef(Modal)
- BackdropComponent={
- Object {
- "$$typeof": Symbol(react.forward_ref),
- "Naked": Object {
- "$$typeof": Symbol(react.forward_ref),
- "propTypes": Object {
- "children": [Function],
- "className": [Function],
- "classes": [Function],
- "invisible": [Function],
- "open": [Function],
- "transitionDuration": [Function],
- },
- "render": [Function],
- },
- "displayName": "WithStyles(ForwardRef(Backdrop))",
- "options": Object {
- "defaultTheme": Object {
- "breakpoints": Object {
- "between": [Function],
- "down": [Function],
- "keys": Array [
- "xs",
- "sm",
- "md",
- "lg",
- "xl",
- ],
- "only": [Function],
- "up": [Function],
- "values": Object {
- "lg": 1280,
- "md": 960,
- "sm": 600,
- "xl": 1920,
- "xs": 0,
- },
- "width": [Function],
- },
- "direction": "ltr",
- "mixins": Object {
- "gutters": [Function],
- "toolbar": Object {
- "@media (min-width:0px) and (orientation: landscape)": Object {
- "minHeight": 48,
- },
- "@media (min-width:600px)": Object {
- "minHeight": 64,
- },
- "minHeight": 56,
- },
- },
- "overrides": Object {},
- "palette": Object {
- "action": Object {
- "activatedOpacity": 0.12,
- "active": "rgba(0, 0, 0, 0.54)",
- "disabled": "rgba(0, 0, 0, 0.26)",
- "disabledBackground": "rgba(0, 0, 0, 0.12)",
- "disabledOpacity": 0.38,
- "focus": "rgba(0, 0, 0, 0.12)",
- "focusOpacity": 0.12,
- "hover": "rgba(0, 0, 0, 0.04)",
- "hoverOpacity": 0.04,
- "selected": "rgba(0, 0, 0, 0.08)",
- "selectedOpacity": 0.08,
- },
- "augmentColor": [Function],
- "background": Object {
- "default": "#fafafa",
- "paper": "#fff",
- },
- "common": Object {
- "black": "#000",
- "white": "#fff",
- },
- "contrastThreshold": 3,
- "divider": "rgba(0, 0, 0, 0.12)",
- "error": Object {
- "contrastText": "#fff",
- "dark": "#d32f2f",
- "light": "#e57373",
- "main": "#f44336",
- },
- "getContrastText": [Function],
- "grey": Object {
- "100": "#f5f5f5",
- "200": "#eeeeee",
- "300": "#e0e0e0",
- "400": "#bdbdbd",
- "50": "#fafafa",
- "500": "#9e9e9e",
- "600": "#757575",
- "700": "#616161",
- "800": "#424242",
- "900": "#212121",
- "A100": "#d5d5d5",
- "A200": "#aaaaaa",
- "A400": "#303030",
- "A700": "#616161",
- },
- "info": Object {
- "contrastText": "#fff",
- "dark": "#1976d2",
- "light": "#64b5f6",
- "main": "#2196f3",
- },
- "primary": Object {
- "contrastText": "#fff",
- "dark": "#303f9f",
- "light": "#7986cb",
- "main": "#3f51b5",
- },
- "secondary": Object {
- "contrastText": "#fff",
- "dark": "#c51162",
- "light": "#ff4081",
- "main": "#f50057",
- },
- "success": Object {
- "contrastText": "rgba(0, 0, 0, 0.87)",
- "dark": "#388e3c",
- "light": "#81c784",
- "main": "#4caf50",
- },
- "text": Object {
- "disabled": "rgba(0, 0, 0, 0.38)",
- "hint": "rgba(0, 0, 0, 0.38)",
- "primary": "rgba(0, 0, 0, 0.87)",
- "secondary": "rgba(0, 0, 0, 0.54)",
- },
- "tonalOffset": 0.2,
- "type": "light",
- "warning": Object {
- "contrastText": "rgba(0, 0, 0, 0.87)",
- "dark": "#f57c00",
- "light": "#ffb74d",
- "main": "#ff9800",
- },
- },
- "props": Object {},
- "shadows": Array [
- "none",
- "0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12)",
- "0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12)",
- "0px 3px 3px -2px rgba(0,0,0,0.2),0px 3px 4px 0px rgba(0,0,0,0.14),0px 1px 8px 0px rgba(0,0,0,0.12)",
- "0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12)",
- "0px 3px 5px -1px rgba(0,0,0,0.2),0px 5px 8px 0px rgba(0,0,0,0.14),0px 1px 14px 0px rgba(0,0,0,0.12)",
- "0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12)",
- "0px 4px 5px -2px rgba(0,0,0,0.2),0px 7px 10px 1px rgba(0,0,0,0.14),0px 2px 16px 1px rgba(0,0,0,0.12)",
- "0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12)",
- "0px 5px 6px -3px rgba(0,0,0,0.2),0px 9px 12px 1px rgba(0,0,0,0.14),0px 3px 16px 2px rgba(0,0,0,0.12)",
- "0px 6px 6px -3px rgba(0,0,0,0.2),0px 10px 14px 1px rgba(0,0,0,0.14),0px 4px 18px 3px rgba(0,0,0,0.12)",
- "0px 6px 7px -4px rgba(0,0,0,0.2),0px 11px 15px 1px rgba(0,0,0,0.14),0px 4px 20px 3px rgba(0,0,0,0.12)",
- "0px 7px 8px -4px rgba(0,0,0,0.2),0px 12px 17px 2px rgba(0,0,0,0.14),0px 5px 22px 4px rgba(0,0,0,0.12)",
- "0px 7px 8px -4px rgba(0,0,0,0.2),0px 13px 19px 2px rgba(0,0,0,0.14),0px 5px 24px 4px rgba(0,0,0,0.12)",
- "0px 7px 9px -4px rgba(0,0,0,0.2),0px 14px 21px 2px rgba(0,0,0,0.14),0px 5px 26px 4px rgba(0,0,0,0.12)",
- "0px 8px 9px -5px rgba(0,0,0,0.2),0px 15px 22px 2px rgba(0,0,0,0.14),0px 6px 28px 5px rgba(0,0,0,0.12)",
- "0px 8px 10px -5px rgba(0,0,0,0.2),0px 16px 24px 2px rgba(0,0,0,0.14),0px 6px 30px 5px rgba(0,0,0,0.12)",
- "0px 8px 11px -5px rgba(0,0,0,0.2),0px 17px 26px 2px rgba(0,0,0,0.14),0px 6px 32px 5px rgba(0,0,0,0.12)",
- "0px 9px 11px -5px rgba(0,0,0,0.2),0px 18px 28px 2px rgba(0,0,0,0.14),0px 7px 34px 6px rgba(0,0,0,0.12)",
- "0px 9px 12px -6px rgba(0,0,0,0.2),0px 19px 29px 2px rgba(0,0,0,0.14),0px 7px 36px 6px rgba(0,0,0,0.12)",
- "0px 10px 13px -6px rgba(0,0,0,0.2),0px 20px 31px 3px rgba(0,0,0,0.14),0px 8px 38px 7px rgba(0,0,0,0.12)",
- "0px 10px 13px -6px rgba(0,0,0,0.2),0px 21px 33px 3px rgba(0,0,0,0.14),0px 8px 40px 7px rgba(0,0,0,0.12)",
- "0px 10px 14px -6px rgba(0,0,0,0.2),0px 22px 35px 3px rgba(0,0,0,0.14),0px 8px 42px 7px rgba(0,0,0,0.12)",
- "0px 11px 14px -7px rgba(0,0,0,0.2),0px 23px 36px 3px rgba(0,0,0,0.14),0px 9px 44px 8px rgba(0,0,0,0.12)",
- "0px 11px 15px -7px rgba(0,0,0,0.2),0px 24px 38px 3px rgba(0,0,0,0.14),0px 9px 46px 8px rgba(0,0,0,0.12)",
- ],
- "shape": Object {
- "borderRadius": 4,
- },
- "spacing": [Function],
- "transitions": Object {
- "create": [Function],
- "duration": Object {
- "complex": 375,
- "enteringScreen": 225,
- "leavingScreen": 195,
- "short": 250,
- "shorter": 200,
- "shortest": 150,
- "standard": 300,
- },
- "easing": Object {
- "easeIn": "cubic-bezier(0.4, 0, 1, 1)",
- "easeInOut": "cubic-bezier(0.4, 0, 0.2, 1)",
- "easeOut": "cubic-bezier(0.0, 0, 0.2, 1)",
- "sharp": "cubic-bezier(0.4, 0, 0.6, 1)",
- },
- "getAutoHeightDuration": [Function],
- },
- "typography": Object {
- "body1": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "1rem",
- "fontWeight": 400,
- "letterSpacing": "0.00938em",
- "lineHeight": 1.5,
- },
- "body2": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "0.875rem",
- "fontWeight": 400,
- "letterSpacing": "0.01071em",
- "lineHeight": 1.43,
- },
- "button": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "0.875rem",
- "fontWeight": 500,
- "letterSpacing": "0.02857em",
- "lineHeight": 1.75,
- "textTransform": "uppercase",
- },
- "caption": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "0.75rem",
- "fontWeight": 400,
- "letterSpacing": "0.03333em",
- "lineHeight": 1.66,
- },
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": 14,
- "fontWeightBold": 700,
- "fontWeightLight": 300,
- "fontWeightMedium": 500,
- "fontWeightRegular": 400,
- "h1": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "6rem",
- "fontWeight": 300,
- "letterSpacing": "-0.01562em",
- "lineHeight": 1.167,
- },
- "h2": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "3.75rem",
- "fontWeight": 300,
- "letterSpacing": "-0.00833em",
- "lineHeight": 1.2,
- },
- "h3": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "3rem",
- "fontWeight": 400,
- "letterSpacing": "0em",
- "lineHeight": 1.167,
- },
- "h4": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "2.125rem",
- "fontWeight": 400,
- "letterSpacing": "0.00735em",
- "lineHeight": 1.235,
- },
- "h5": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "1.5rem",
- "fontWeight": 400,
- "letterSpacing": "0em",
- "lineHeight": 1.334,
- },
- "h6": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "1.25rem",
- "fontWeight": 500,
- "letterSpacing": "0.0075em",
- "lineHeight": 1.6,
- },
- "htmlFontSize": 16,
- "overline": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "0.75rem",
- "fontWeight": 400,
- "letterSpacing": "0.08333em",
- "lineHeight": 2.66,
- "textTransform": "uppercase",
- },
- "pxToRem": [Function],
- "round": [Function],
- "subtitle1": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "1rem",
- "fontWeight": 400,
- "letterSpacing": "0.00938em",
- "lineHeight": 1.75,
- },
- "subtitle2": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "0.875rem",
- "fontWeight": 500,
- "letterSpacing": "0.00714em",
- "lineHeight": 1.57,
- },
- },
- "zIndex": Object {
- "appBar": 1100,
- "drawer": 1200,
- "mobileStepper": 1000,
- "modal": 1300,
- "snackbar": 1400,
- "speedDial": 1050,
- "tooltip": 1500,
- },
- },
- "name": "MuiBackdrop",
- },
- "propTypes": Object {
- "classes": [Function],
- "innerRef": [Function],
- },
- "render": [Function],
- "useStyles": [Function],
- }
- }
- BackdropProps={
- Object {
- "transitionDuration": Object {
- "enter": 225,
- "exit": 195,
- },
- }
- }
- className="MuiDialog-root modal-root"
- closeAfterTransition={true}
- disableEscapeKeyDown={true}
- onClose={[MockFunction]}
- open={true}
+ <div
+ id="accessibility-title"
>
- <ForwardRef(Portal)
- disablePortal={false}
+ challenge_no_fluid_modal.accessibility.window_title
+ </div>
+ <button
+ aria-label="feedback.accessibility.button_close"
+ class="MuiButtonBase-root MuiIconButton-root modal-paper-close-button"
+ tabindex="0"
+ type="button"
+ >
+ <span
+ class="MuiIconButton-label"
+ >
+ <svg
+ class="styles__icon___23x3R"
+ height="16"
+ width="16"
+ >
+ <use
+ xlink:href="#test-file-stub"
+ />
+ </svg>
+ </span>
+ <span
+ class="MuiTouchRipple-root"
+ />
+ </button>
+ <div
+ class="sgeHintModal"
+ >
+ <div
+ class="title text-20-bold"
>
- <Portal
- containerInfo={
- <body
- style="padding-right: 0px; overflow: hidden;"
- >
- <div
- class="MuiDialog-root modal-root"
- role="presentation"
- style="position: fixed; z-index: 1300; right: 0px; bottom: 0px; top: 0px; left: 0px;"
- >
- <div
- aria-hidden="true"
- class="MuiBackdrop-root"
- style="opacity: 1; webkit-transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"
- />
- <div
- data-test="sentinelStart"
- tabindex="0"
- />
- <div
- class="MuiDialog-container MuiDialog-scrollPaper"
- role="none presentation"
- style="opacity: 1; webkit-transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"
- tabindex="-1"
- >
- <div
- aria-labelledby="accessibility-title"
- class="MuiPaper-root MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm MuiPaper-elevation24 MuiPaper-rounded"
- role="dialog"
- >
- <div
- id="accessibility-title"
- >
- challenge_no_fluid_modal.accessibility.window_title
- </div>
- <button
- aria-label="feedback.accessibility.button_close"
- class="MuiButtonBase-root MuiIconButton-root modal-paper-close-button"
- tabindex="0"
- type="button"
- >
- <span
- class="MuiIconButton-label"
- >
- <svg
- class="styles__icon___23x3R"
- height="16"
- width="16"
- >
- <use
- xlink:href="#test-file-stub"
- />
- </svg>
- </span>
- <span
- class="MuiTouchRipple-root"
- />
- </button>
- <div
- class="sgeHintModal"
- >
- <div
- class="title text-20-bold"
- >
- auth.enedissgegrandlyon.modalHint.title
- </div>
- <div
- class="pdl"
- >
- <p>
- auth.enedissgegrandlyon.pdlModal.txt1
- </p>
- <p>
- auth.enedissgegrandlyon.pdlModal.txt2
- </p>
- <div
- class="bill"
- >
- <svg
- alt="Facture"
- class="bill styles__icon___23x3R"
- height="16"
- width="16"
- >
- <use
- xlink:href="#test-file-stub"
- />
- </svg>
- <p>
- auth.enedissgegrandlyon.pdlModal.txt3
- </p>
- </div>
- <p>
- auth.enedissgegrandlyon.pdlModal.txt4
- </p>
- <svg
- alt="PDL"
- class="prm styles__icon___23x3R"
- height="16"
- width="16"
- >
- <use
- xlink:href="#test-file-stub"
- />
- </svg>
- </div>
- <button
- aria-label="auth.enedissgegrandlyon.modalHint.button-accessibility"
- class="MuiButtonBase-root MuiButton-root btn-highlight MuiButton-text"
- style="height: 40px;"
- tabindex="0"
- type="button"
- >
- <span
- class="MuiButton-label text-16-bold"
- >
- auth.enedissgegrandlyon.modalHint.button
- </span>
- <span
- class="MuiTouchRipple-root"
- />
- </button>
- </div>
- </div>
- </div>
- <div
- data-test="sentinelEnd"
- tabindex="0"
- />
- </div>
- </body>
- }
+ auth.enedissgegrandlyon.modalHint.title
+ </div>
+ <div
+ class="pdl"
+ >
+ <p>
+ auth.enedissgegrandlyon.pdlModal.txt1
+ </p>
+ <p>
+ auth.enedissgegrandlyon.pdlModal.txt2
+ </p>
+ <div
+ class="bill"
>
- <div
- className="MuiDialog-root modal-root"
- onKeyDown={[Function]}
- role="presentation"
- style={
- Object {
- "bottom": 0,
- "left": 0,
- "position": "fixed",
- "right": 0,
- "top": 0,
- "zIndex": 1300,
- }
- }
+ <svg
+ alt="Facture"
+ class="bill styles__icon___23x3R"
+ height="16"
+ width="16"
>
- <WithStyles(ForwardRef(Backdrop))
- onClick={[Function]}
- open={true}
- transitionDuration={
- Object {
- "enter": 225,
- "exit": 195,
- }
- }
- >
- <ForwardRef(Backdrop)
- classes={
- Object {
- "invisible": "MuiBackdrop-invisible",
- "root": "MuiBackdrop-root",
- }
- }
- onClick={[Function]}
- open={true}
- transitionDuration={
- Object {
- "enter": 225,
- "exit": 195,
- }
- }
- >
- <ForwardRef(Fade)
- in={true}
- onClick={[Function]}
- timeout={
- Object {
- "enter": 225,
- "exit": 195,
- }
- }
- >
- <Transition
- appear={true}
- enter={true}
- exit={true}
- in={true}
- mountOnEnter={false}
- onClick={[Function]}
- onEnter={[Function]}
- onEntered={[Function]}
- onEntering={[Function]}
- onExit={[Function]}
- onExited={[Function]}
- onExiting={[Function]}
- timeout={
- Object {
- "enter": 225,
- "exit": 195,
- }
- }
- unmountOnExit={false}
- >
- <div
- aria-hidden={true}
- className="MuiBackdrop-root"
- onClick={[Function]}
- style={
- Object {
- "opacity": 1,
- "visibility": undefined,
- }
- }
- />
- </Transition>
- </ForwardRef(Fade)>
- </ForwardRef(Backdrop)>
- </WithStyles(ForwardRef(Backdrop))>
- <Unstable_TrapFocus
- disableAutoFocus={false}
- disableEnforceFocus={false}
- disableRestoreFocus={false}
- getDoc={[Function]}
- isEnabled={[Function]}
- open={true}
- >
- <div
- data-test="sentinelStart"
- tabIndex={0}
- />
- <ForwardRef(Fade)
- appear={true}
- in={true}
- onEnter={[Function]}
- onExited={[Function]}
- role="none presentation"
- tabIndex="-1"
- timeout={
- Object {
- "enter": 225,
- "exit": 195,
- }
- }
- >
- <Transition
- appear={true}
- enter={true}
- exit={true}
- in={true}
- mountOnEnter={false}
- onEnter={[Function]}
- onEntered={[Function]}
- onEntering={[Function]}
- onExit={[Function]}
- onExited={[Function]}
- onExiting={[Function]}
- role="none presentation"
- tabIndex="-1"
- timeout={
- Object {
- "enter": 225,
- "exit": 195,
- }
- }
- unmountOnExit={false}
- >
- <div
- className="MuiDialog-container MuiDialog-scrollPaper"
- onMouseDown={[Function]}
- onMouseUp={[Function]}
- role="none presentation"
- style={
- Object {
- "opacity": 1,
- "visibility": undefined,
- }
- }
- tabIndex="-1"
- >
- <WithStyles(ForwardRef(Paper))
- aria-labelledby="accessibility-title"
- className="MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm"
- elevation={24}
- role="dialog"
- >
- <ForwardRef(Paper)
- aria-labelledby="accessibility-title"
- className="MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm"
- classes={
- Object {
- "elevation0": "MuiPaper-elevation0",
- "elevation1": "MuiPaper-elevation1",
- "elevation10": "MuiPaper-elevation10",
- "elevation11": "MuiPaper-elevation11",
- "elevation12": "MuiPaper-elevation12",
- "elevation13": "MuiPaper-elevation13",
- "elevation14": "MuiPaper-elevation14",
- "elevation15": "MuiPaper-elevation15",
- "elevation16": "MuiPaper-elevation16",
- "elevation17": "MuiPaper-elevation17",
- "elevation18": "MuiPaper-elevation18",
- "elevation19": "MuiPaper-elevation19",
- "elevation2": "MuiPaper-elevation2",
- "elevation20": "MuiPaper-elevation20",
- "elevation21": "MuiPaper-elevation21",
- "elevation22": "MuiPaper-elevation22",
- "elevation23": "MuiPaper-elevation23",
- "elevation24": "MuiPaper-elevation24",
- "elevation3": "MuiPaper-elevation3",
- "elevation4": "MuiPaper-elevation4",
- "elevation5": "MuiPaper-elevation5",
- "elevation6": "MuiPaper-elevation6",
- "elevation7": "MuiPaper-elevation7",
- "elevation8": "MuiPaper-elevation8",
- "elevation9": "MuiPaper-elevation9",
- "outlined": "MuiPaper-outlined",
- "root": "MuiPaper-root",
- "rounded": "MuiPaper-rounded",
- }
- }
- elevation={24}
- role="dialog"
- >
- <div
- aria-labelledby="accessibility-title"
- className="MuiPaper-root MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm MuiPaper-elevation24 MuiPaper-rounded"
- role="dialog"
- >
- <div
- id="accessibility-title"
- >
- challenge_no_fluid_modal.accessibility.window_title
- </div>
- <WithStyles(ForwardRef(IconButton))
- aria-label="feedback.accessibility.button_close"
- className="modal-paper-close-button"
- onClick={[MockFunction]}
- >
- <ForwardRef(IconButton)
- aria-label="feedback.accessibility.button_close"
- className="modal-paper-close-button"
- classes={
- Object {
- "colorInherit": "MuiIconButton-colorInherit",
- "colorPrimary": "MuiIconButton-colorPrimary",
- "colorSecondary": "MuiIconButton-colorSecondary",
- "disabled": "Mui-disabled",
- "edgeEnd": "MuiIconButton-edgeEnd",
- "edgeStart": "MuiIconButton-edgeStart",
- "label": "MuiIconButton-label",
- "root": "MuiIconButton-root",
- "sizeSmall": "MuiIconButton-sizeSmall",
- }
- }
- onClick={[MockFunction]}
- >
- <WithStyles(ForwardRef(ButtonBase))
- aria-label="feedback.accessibility.button_close"
- centerRipple={true}
- className="MuiIconButton-root modal-paper-close-button"
- disabled={false}
- focusRipple={true}
- onClick={[MockFunction]}
- >
- <ForwardRef(ButtonBase)
- aria-label="feedback.accessibility.button_close"
- centerRipple={true}
- className="MuiIconButton-root modal-paper-close-button"
- classes={
- Object {
- "disabled": "Mui-disabled",
- "focusVisible": "Mui-focusVisible",
- "root": "MuiButtonBase-root",
- }
- }
- disabled={false}
- focusRipple={true}
- onClick={[MockFunction]}
- >
- <button
- aria-label="feedback.accessibility.button_close"
- className="MuiButtonBase-root MuiIconButton-root modal-paper-close-button"
- disabled={false}
- onBlur={[Function]}
- onClick={[MockFunction]}
- onDragLeave={[Function]}
- onFocus={[Function]}
- onKeyDown={[Function]}
- onKeyUp={[Function]}
- onMouseDown={[Function]}
- onMouseLeave={[Function]}
- onMouseUp={[Function]}
- onTouchEnd={[Function]}
- onTouchMove={[Function]}
- onTouchStart={[Function]}
- tabIndex={0}
- type="button"
- >
- <span
- className="MuiIconButton-label"
- >
- <Icon
- icon="test-file-stub"
- size={16}
- spin={false}
- >
- <Component
- className="styles__icon___23x3R"
- height={16}
- style={Object {}}
- width={16}
- >
- <svg
- className="styles__icon___23x3R"
- height={16}
- style={Object {}}
- width={16}
- >
- <use
- xlinkHref="#test-file-stub"
- />
- </svg>
- </Component>
- </Icon>
- </span>
- <WithStyles(memo)
- center={true}
- >
- <ForwardRef(TouchRipple)
- center={true}
- classes={
- Object {
- "child": "MuiTouchRipple-child",
- "childLeaving": "MuiTouchRipple-childLeaving",
- "childPulsate": "MuiTouchRipple-childPulsate",
- "ripple": "MuiTouchRipple-ripple",
- "ripplePulsate": "MuiTouchRipple-ripplePulsate",
- "rippleVisible": "MuiTouchRipple-rippleVisible",
- "root": "MuiTouchRipple-root",
- }
- }
- >
- <span
- className="MuiTouchRipple-root"
- >
- <TransitionGroup
- childFactory={[Function]}
- component={null}
- exit={true}
- />
- </span>
- </ForwardRef(TouchRipple)>
- </WithStyles(memo)>
- </button>
- </ForwardRef(ButtonBase)>
- </WithStyles(ForwardRef(ButtonBase))>
- </ForwardRef(IconButton)>
- </WithStyles(ForwardRef(IconButton))>
- <div
- className="sgeHintModal"
- >
- <div
- className="title text-20-bold"
- >
- auth.enedissgegrandlyon.modalHint.title
- </div>
- <div
- className="pdl"
- >
- <p>
- auth.enedissgegrandlyon.pdlModal.txt1
- </p>
- <p>
- auth.enedissgegrandlyon.pdlModal.txt2
- </p>
- <div
- className="bill"
- >
- <Icon
- alt="Facture"
- className="bill"
- icon="test-file-stub"
- spin={false}
- >
- <Component
- alt="Facture"
- className="bill styles__icon___23x3R"
- height="16"
- style={Object {}}
- width="16"
- >
- <svg
- alt="Facture"
- className="bill styles__icon___23x3R"
- height="16"
- style={Object {}}
- width="16"
- >
- <use
- xlinkHref="#test-file-stub"
- />
- </svg>
- </Component>
- </Icon>
- <p>
- auth.enedissgegrandlyon.pdlModal.txt3
- </p>
- </div>
- <p>
- auth.enedissgegrandlyon.pdlModal.txt4
- </p>
- <Icon
- alt="PDL"
- className="prm"
- icon="test-file-stub"
- spin={false}
- >
- <Component
- alt="PDL"
- className="prm styles__icon___23x3R"
- height="16"
- style={Object {}}
- width="16"
- >
- <svg
- alt="PDL"
- className="prm styles__icon___23x3R"
- height="16"
- style={Object {}}
- width="16"
- >
- <use
- xlinkHref="#test-file-stub"
- />
- </svg>
- </Component>
- </Icon>
- </div>
- <WithStyles(ForwardRef(Button))
- aria-label="auth.enedissgegrandlyon.modalHint.button-accessibility"
- classes={
- Object {
- "label": "text-16-bold",
- "root": "btn-highlight",
- }
- }
- onClick={[MockFunction]}
- style={
- Object {
- "height": "40px",
- }
- }
- >
- <ForwardRef(Button)
- aria-label="auth.enedissgegrandlyon.modalHint.button-accessibility"
- classes={
- Object {
- "colorInherit": "MuiButton-colorInherit",
- "contained": "MuiButton-contained",
- "containedPrimary": "MuiButton-containedPrimary",
- "containedSecondary": "MuiButton-containedSecondary",
- "containedSizeLarge": "MuiButton-containedSizeLarge",
- "containedSizeSmall": "MuiButton-containedSizeSmall",
- "disableElevation": "MuiButton-disableElevation",
- "disabled": "Mui-disabled",
- "endIcon": "MuiButton-endIcon",
- "focusVisible": "Mui-focusVisible",
- "fullWidth": "MuiButton-fullWidth",
- "iconSizeLarge": "MuiButton-iconSizeLarge",
- "iconSizeMedium": "MuiButton-iconSizeMedium",
- "iconSizeSmall": "MuiButton-iconSizeSmall",
- "label": "MuiButton-label text-16-bold",
- "outlined": "MuiButton-outlined",
- "outlinedPrimary": "MuiButton-outlinedPrimary",
- "outlinedSecondary": "MuiButton-outlinedSecondary",
- "outlinedSizeLarge": "MuiButton-outlinedSizeLarge",
- "outlinedSizeSmall": "MuiButton-outlinedSizeSmall",
- "root": "MuiButton-root btn-highlight",
- "sizeLarge": "MuiButton-sizeLarge",
- "sizeSmall": "MuiButton-sizeSmall",
- "startIcon": "MuiButton-startIcon",
- "text": "MuiButton-text",
- "textPrimary": "MuiButton-textPrimary",
- "textSecondary": "MuiButton-textSecondary",
- "textSizeLarge": "MuiButton-textSizeLarge",
- "textSizeSmall": "MuiButton-textSizeSmall",
- }
- }
- onClick={[MockFunction]}
- style={
- Object {
- "height": "40px",
- }
- }
- >
- <WithStyles(ForwardRef(ButtonBase))
- aria-label="auth.enedissgegrandlyon.modalHint.button-accessibility"
- className="MuiButton-root btn-highlight MuiButton-text"
- component="button"
- disabled={false}
- focusRipple={true}
- focusVisibleClassName="Mui-focusVisible"
- onClick={[MockFunction]}
- style={
- Object {
- "height": "40px",
- }
- }
- type="button"
- >
- <ForwardRef(ButtonBase)
- aria-label="auth.enedissgegrandlyon.modalHint.button-accessibility"
- className="MuiButton-root btn-highlight MuiButton-text"
- classes={
- Object {
- "disabled": "Mui-disabled",
- "focusVisible": "Mui-focusVisible",
- "root": "MuiButtonBase-root",
- }
- }
- component="button"
- disabled={false}
- focusRipple={true}
- focusVisibleClassName="Mui-focusVisible"
- onClick={[MockFunction]}
- style={
- Object {
- "height": "40px",
- }
- }
- type="button"
- >
- <button
- aria-label="auth.enedissgegrandlyon.modalHint.button-accessibility"
- className="MuiButtonBase-root MuiButton-root btn-highlight MuiButton-text"
- disabled={false}
- onBlur={[Function]}
- onClick={[MockFunction]}
- onDragLeave={[Function]}
- onFocus={[Function]}
- onKeyDown={[Function]}
- onKeyUp={[Function]}
- onMouseDown={[Function]}
- onMouseLeave={[Function]}
- onMouseUp={[Function]}
- onTouchEnd={[Function]}
- onTouchMove={[Function]}
- onTouchStart={[Function]}
- style={
- Object {
- "height": "40px",
- }
- }
- tabIndex={0}
- type="button"
- >
- <span
- className="MuiButton-label text-16-bold"
- >
- auth.enedissgegrandlyon.modalHint.button
- </span>
- <WithStyles(memo)
- center={false}
- >
- <ForwardRef(TouchRipple)
- center={false}
- classes={
- Object {
- "child": "MuiTouchRipple-child",
- "childLeaving": "MuiTouchRipple-childLeaving",
- "childPulsate": "MuiTouchRipple-childPulsate",
- "ripple": "MuiTouchRipple-ripple",
- "ripplePulsate": "MuiTouchRipple-ripplePulsate",
- "rippleVisible": "MuiTouchRipple-rippleVisible",
- "root": "MuiTouchRipple-root",
- }
- }
- >
- <span
- className="MuiTouchRipple-root"
- >
- <TransitionGroup
- childFactory={[Function]}
- component={null}
- exit={true}
- />
- </span>
- </ForwardRef(TouchRipple)>
- </WithStyles(memo)>
- </button>
- </ForwardRef(ButtonBase)>
- </WithStyles(ForwardRef(ButtonBase))>
- </ForwardRef(Button)>
- </WithStyles(ForwardRef(Button))>
- </div>
- </div>
- </ForwardRef(Paper)>
- </WithStyles(ForwardRef(Paper))>
- </div>
- </Transition>
- </ForwardRef(Fade)>
- <div
- data-test="sentinelEnd"
- tabIndex={0}
- />
- </Unstable_TrapFocus>
- </div>
- </Portal>
- </ForwardRef(Portal)>
- </ForwardRef(Modal)>
- </ForwardRef(Dialog)>
- </WithStyles(ForwardRef(Dialog))>
- </SgeModalHint>
-</Provider>
+ <use
+ xlink:href="#test-file-stub"
+ />
+ </svg>
+ <p>
+ auth.enedissgegrandlyon.pdlModal.txt3
+ </p>
+ </div>
+ <p>
+ auth.enedissgegrandlyon.pdlModal.txt4
+ </p>
+ <svg
+ alt="PDL"
+ class="prm styles__icon___23x3R"
+ height="16"
+ width="16"
+ >
+ <use
+ xlink:href="#test-file-stub"
+ />
+ </svg>
+ </div>
+ <button
+ aria-label="auth.enedissgegrandlyon.modalHint.button-accessibility"
+ class="MuiButtonBase-root MuiButton-root MuiButton-text btnPrimary"
+ tabindex="0"
+ type="button"
+ >
+ <span
+ class="MuiButton-label"
+ >
+ auth.enedissgegrandlyon.modalHint.button
+ </span>
+ <span
+ class="MuiTouchRipple-root"
+ />
+ </button>
+ </div>
+ </div>
+ </div>
+ <div
+ data-test="sentinelEnd"
+ tabindex="0"
+ />
+ </div>
+</body>
`;
diff --git a/src/components/Connection/SGEConnect/__snapshots__/StepAddress.spec.tsx.snap b/src/components/Connection/SGEConnect/__snapshots__/StepAddress.spec.tsx.snap
index bffbbf9d0daf4c604fe6515786a9fa9d54a83c71..9917baafdc610e195ddc092c046f40e288211fe8 100644
--- a/src/components/Connection/SGEConnect/__snapshots__/StepAddress.spec.tsx.snap
+++ b/src/components/Connection/SGEConnect/__snapshots__/StepAddress.spec.tsx.snap
@@ -1,83 +1,55 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`StepAddress component should be rendered correctly 1`] = `
-<Provider
- store={
- Object {
- "clearActions": [Function],
- "dispatch": [Function],
- "getActions": [Function],
- "getState": [Function],
- "replaceReducer": [Function],
- "subscribe": [Function],
- }
- }
->
- <StepAddress
- onChange={[MockFunction]}
- sgeState={
- Object {
- "address": "",
- "city": "",
- "currentStep": 0,
- "dataConsent": false,
- "firstName": "",
- "lastName": "",
- "pdl": null,
- "pdlConfirm": false,
- "shouldLaunchAccount": false,
- "zipCode": null,
- }
- }
+<div>
+ <div
+ class="sge-step-container stepAddress"
>
<div
- className="sge-step-container stepAddress"
+ class="title text-22-bold"
>
- <div
- className="title text-22-bold"
- >
- auth.enedissgegrandlyon.addressTitle
- </div>
- <label
- className="text-16-normal"
- htmlFor="address"
- >
- auth.enedissgegrandlyon.address
- </label>
+ auth.enedissgegrandlyon.addressTitle
+ </div>
+ <label
+ class="text-16-normal"
+ for="address"
+ >
+ auth.enedissgegrandlyon.address
<input
+ class="inputText"
id="address"
name="address"
- onChange={[Function]}
type="text"
value=""
/>
- <label
- className="text-16-normal"
- htmlFor="zipCode"
- >
- auth.enedissgegrandlyon.zipCode
- </label>
+ </label>
+ <label
+ class="text-16-normal"
+ for="zipCode"
+ >
+ auth.enedissgegrandlyon.zipCode
<input
+ class="inputText"
id="zipCode"
- min={0}
+ min="0"
name="zipCode"
- onChange={[Function]}
type="number"
+ value=""
/>
- <label
- className="text-16-normal"
- htmlFor="city"
- >
- auth.enedissgegrandlyon.city
- </label>
+ </label>
+ <label
+ class="text-16-normal"
+ for="city"
+ >
+ auth.enedissgegrandlyon.city
<input
+ class="inputText"
id="city"
name="city"
- onChange={[Function]}
type="text"
value=""
/>
- </div>
- </StepAddress>
-</Provider>
+ </label>
+ </div>
+</div>
`;
diff --git a/src/components/Connection/SGEConnect/__snapshots__/StepConsent.spec.tsx.snap b/src/components/Connection/SGEConnect/__snapshots__/StepConsent.spec.tsx.snap
index d474fdf8d8147abb417524d5915fac4afaab15fe..4d4e94cc71c5da336220e045dc7e6da2d59f05de 100644
--- a/src/components/Connection/SGEConnect/__snapshots__/StepConsent.spec.tsx.snap
+++ b/src/components/Connection/SGEConnect/__snapshots__/StepConsent.spec.tsx.snap
@@ -1,101 +1,62 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`StepConsent component should be rendered correctly 1`] = `
-<Provider
- store={
- Object {
- "clearActions": [Function],
- "dispatch": [Function],
- "getActions": [Function],
- "getState": [Function],
- "replaceReducer": [Function],
- "subscribe": [Function],
- }
- }
->
- <StepConsent
- onChange={[MockFunction]}
- sgeState={
- Object {
- "address": "",
- "city": "",
- "currentStep": 0,
- "dataConsent": false,
- "firstName": "",
- "lastName": "",
- "pdl": null,
- "pdlConfirm": false,
- "shouldLaunchAccount": false,
- "zipCode": null,
- }
- }
+<div>
+ <div
+ class="sge-step-container stepConsent"
>
<div
- className="sge-step-container stepConsent"
+ class="head text-16-normal"
>
- <div
- className="head text-16-normal"
- >
- auth.enedissgegrandlyon.headConsent
- </div>
- <div
- className="title text-22-bold"
- >
- auth.enedissgegrandlyon.textConsent
- </div>
- <ul
- className="text-16-normal"
- >
- <li>
- auth.enedissgegrandlyon.consentLi1
- </li>
- <li>
- auth.enedissgegrandlyon.consentLi2
- </li>
- <li>
- auth.enedissgegrandlyon.consentLi3
- </li>
- <li>
- auth.enedissgegrandlyon.consentLi4
- </li>
- </ul>
- <label
- className="checkbox"
- >
- <input
- checked={false}
- id="dataConsent"
- name="Data-consent-validation"
- onChange={[Function]}
- type="checkbox"
- />
- <span
- dangerouslySetInnerHTML={
- Object {
- "__html": "auth.enedissgegrandlyon.consentCheck1",
- }
- }
- />
- </label>
- <label
- className="checkbox"
- >
- <input
- checked={false}
- id="pdlConfirm"
- name="Data-consent-validation"
- onChange={[Function]}
- type="checkbox"
- />
- <span
- dangerouslySetInnerHTML={
- Object {
- "__html": "auth.enedissgegrandlyon.consentCheck2",
- }
- }
- />
- </label>
+ auth.enedissgegrandlyon.headConsent
</div>
- </StepConsent>
-</Provider>
+ <div
+ class="title text-22-bold"
+ >
+ auth.enedissgegrandlyon.textConsent
+ </div>
+ <ul
+ class="text-16-normal"
+ >
+ <li>
+ auth.enedissgegrandlyon.consentLi1
+ </li>
+ <li>
+ auth.enedissgegrandlyon.consentLi2
+ </li>
+ <li>
+ auth.enedissgegrandlyon.consentLi3
+ </li>
+ <li>
+ auth.enedissgegrandlyon.consentLi4
+ </li>
+ </ul>
+ <label
+ class="inline"
+ >
+ <input
+ class="inputCheckbox"
+ id="dataConsent"
+ name="Data-consent-validation"
+ type="checkbox"
+ />
+ <span>
+ auth.enedissgegrandlyon.consentCheck1
+ </span>
+ </label>
+ <label
+ class="inline"
+ >
+ <input
+ class="inputCheckbox"
+ id="pdlConfirm"
+ name="Data-consent-validation"
+ type="checkbox"
+ />
+ <span>
+ auth.enedissgegrandlyon.consentCheck2
+ </span>
+ </label>
+ </div>
+</div>
`;
diff --git a/src/components/Connection/SGEConnect/__snapshots__/StepIdentityAndPdl.spec.tsx.snap b/src/components/Connection/SGEConnect/__snapshots__/StepIdentityAndPdl.spec.tsx.snap
index 171bb6590ba3ba466e4d50f40aac68569570a4d6..b719879711be267defd23465fc7e0353b80721ab 100644
--- a/src/components/Connection/SGEConnect/__snapshots__/StepIdentityAndPdl.spec.tsx.snap
+++ b/src/components/Connection/SGEConnect/__snapshots__/StepIdentityAndPdl.spec.tsx.snap
@@ -1,473 +1,78 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`StepIdentityAndPdl component should be rendered correctly 1`] = `
-<Provider
- store={
- Object {
- "clearActions": [Function],
- "dispatch": [Function],
- "getActions": [Function],
- "getState": [Function],
- "replaceReducer": [Function],
- "subscribe": [Function],
- }
- }
->
- <StepIdentityAndPdl
- onChange={[MockFunction]}
- sgeState={
- Object {
- "address": "",
- "city": "",
- "currentStep": 0,
- "dataConsent": false,
- "firstName": "",
- "lastName": "",
- "pdl": null,
- "pdlConfirm": false,
- "shouldLaunchAccount": false,
- "zipCode": null,
- }
- }
+<div>
+ <div
+ class="sge-step-container stepIdentity"
>
<div
- className="sge-step-container stepIdentity"
+ class="title text-22-bold"
>
- <div
- className="title text-22-bold"
- >
- auth.enedissgegrandlyon.identityTitle
- </div>
- <label
- className="text-16-normal"
- htmlFor="firstName"
- >
- auth.enedissgegrandlyon.firstName
- </label>
+ auth.enedissgegrandlyon.identityTitle
+ </div>
+ <label
+ class="text-16-normal"
+ for="firstName"
+ >
+ auth.enedissgegrandlyon.firstName
<input
+ class="inputText"
id="firstName"
name="firstName"
- onChange={[Function]}
- required={true}
+ required=""
type="text"
value=""
/>
- <label
- className="text-16-normal"
- htmlFor="lastName"
- >
- auth.enedissgegrandlyon.lastName
- </label>
+ </label>
+ <label
+ class="text-16-normal"
+ for="lastName"
+ >
+ auth.enedissgegrandlyon.lastName
<input
+ class="inputText"
id="lastName"
name="lastName"
- onChange={[Function]}
- required={true}
+ required=""
type="text"
value=""
/>
- <div
- className="title text-22-bold"
- >
- auth.enedissgegrandlyon.pdlTitle
- </div>
- <label
- className="text-16-normal"
- htmlFor="pdl"
- >
- auth.enedissgegrandlyon.pdlLabel
- </label>
+ </label>
+ <div
+ class="title text-22-bold"
+ >
+ auth.enedissgegrandlyon.pdlTitle
+ </div>
+ <label
+ class="text-16-normal"
+ for="pdl"
+ >
+ auth.enedissgegrandlyon.pdlLabel
<input
+ class="inputText"
id="pdl"
- inputMode="numeric"
- min={0}
+ inputmode="numeric"
+ min="0"
name="pdl"
- onChange={[Function]}
- required={true}
+ required=""
type="number"
+ value=""
/>
- <br />
- <div
- className="pdl-hint text-16-normal"
- onClick={[Function]}
+ </label>
+ <button
+ class="MuiButtonBase-root MuiButton-root MuiButton-text btnText"
+ tabindex="0"
+ type="button"
+ >
+ <span
+ class="MuiButton-label"
>
auth.enedissgegrandlyon.pdlHint
- </div>
- <SgeModalHint
- handleCloseClick={[Function]}
- open={false}
- >
- <WithStyles(ForwardRef(Dialog))
- aria-labelledby="accessibility-title"
- classes={
- Object {
- "paper": "modal-paper",
- "root": "modal-root",
- }
- }
- disableEscapeKeyDown={true}
- onClose={[Function]}
- open={false}
- >
- <ForwardRef(Dialog)
- aria-labelledby="accessibility-title"
- classes={
- Object {
- "container": "MuiDialog-container",
- "paper": "MuiDialog-paper modal-paper",
- "paperFullScreen": "MuiDialog-paperFullScreen",
- "paperFullWidth": "MuiDialog-paperFullWidth",
- "paperScrollBody": "MuiDialog-paperScrollBody",
- "paperScrollPaper": "MuiDialog-paperScrollPaper",
- "paperWidthFalse": "MuiDialog-paperWidthFalse",
- "paperWidthLg": "MuiDialog-paperWidthLg",
- "paperWidthMd": "MuiDialog-paperWidthMd",
- "paperWidthSm": "MuiDialog-paperWidthSm",
- "paperWidthXl": "MuiDialog-paperWidthXl",
- "paperWidthXs": "MuiDialog-paperWidthXs",
- "root": "MuiDialog-root modal-root",
- "scrollBody": "MuiDialog-scrollBody",
- "scrollPaper": "MuiDialog-scrollPaper",
- }
- }
- disableEscapeKeyDown={true}
- onClose={[Function]}
- open={false}
- >
- <ForwardRef(Modal)
- BackdropComponent={
- Object {
- "$$typeof": Symbol(react.forward_ref),
- "Naked": Object {
- "$$typeof": Symbol(react.forward_ref),
- "propTypes": Object {
- "children": [Function],
- "className": [Function],
- "classes": [Function],
- "invisible": [Function],
- "open": [Function],
- "transitionDuration": [Function],
- },
- "render": [Function],
- },
- "displayName": "WithStyles(ForwardRef(Backdrop))",
- "options": Object {
- "defaultTheme": Object {
- "breakpoints": Object {
- "between": [Function],
- "down": [Function],
- "keys": Array [
- "xs",
- "sm",
- "md",
- "lg",
- "xl",
- ],
- "only": [Function],
- "up": [Function],
- "values": Object {
- "lg": 1280,
- "md": 960,
- "sm": 600,
- "xl": 1920,
- "xs": 0,
- },
- "width": [Function],
- },
- "direction": "ltr",
- "mixins": Object {
- "gutters": [Function],
- "toolbar": Object {
- "@media (min-width:0px) and (orientation: landscape)": Object {
- "minHeight": 48,
- },
- "@media (min-width:600px)": Object {
- "minHeight": 64,
- },
- "minHeight": 56,
- },
- },
- "overrides": Object {},
- "palette": Object {
- "action": Object {
- "activatedOpacity": 0.12,
- "active": "rgba(0, 0, 0, 0.54)",
- "disabled": "rgba(0, 0, 0, 0.26)",
- "disabledBackground": "rgba(0, 0, 0, 0.12)",
- "disabledOpacity": 0.38,
- "focus": "rgba(0, 0, 0, 0.12)",
- "focusOpacity": 0.12,
- "hover": "rgba(0, 0, 0, 0.04)",
- "hoverOpacity": 0.04,
- "selected": "rgba(0, 0, 0, 0.08)",
- "selectedOpacity": 0.08,
- },
- "augmentColor": [Function],
- "background": Object {
- "default": "#fafafa",
- "paper": "#fff",
- },
- "common": Object {
- "black": "#000",
- "white": "#fff",
- },
- "contrastThreshold": 3,
- "divider": "rgba(0, 0, 0, 0.12)",
- "error": Object {
- "contrastText": "#fff",
- "dark": "#d32f2f",
- "light": "#e57373",
- "main": "#f44336",
- },
- "getContrastText": [Function],
- "grey": Object {
- "100": "#f5f5f5",
- "200": "#eeeeee",
- "300": "#e0e0e0",
- "400": "#bdbdbd",
- "50": "#fafafa",
- "500": "#9e9e9e",
- "600": "#757575",
- "700": "#616161",
- "800": "#424242",
- "900": "#212121",
- "A100": "#d5d5d5",
- "A200": "#aaaaaa",
- "A400": "#303030",
- "A700": "#616161",
- },
- "info": Object {
- "contrastText": "#fff",
- "dark": "#1976d2",
- "light": "#64b5f6",
- "main": "#2196f3",
- },
- "primary": Object {
- "contrastText": "#fff",
- "dark": "#303f9f",
- "light": "#7986cb",
- "main": "#3f51b5",
- },
- "secondary": Object {
- "contrastText": "#fff",
- "dark": "#c51162",
- "light": "#ff4081",
- "main": "#f50057",
- },
- "success": Object {
- "contrastText": "rgba(0, 0, 0, 0.87)",
- "dark": "#388e3c",
- "light": "#81c784",
- "main": "#4caf50",
- },
- "text": Object {
- "disabled": "rgba(0, 0, 0, 0.38)",
- "hint": "rgba(0, 0, 0, 0.38)",
- "primary": "rgba(0, 0, 0, 0.87)",
- "secondary": "rgba(0, 0, 0, 0.54)",
- },
- "tonalOffset": 0.2,
- "type": "light",
- "warning": Object {
- "contrastText": "rgba(0, 0, 0, 0.87)",
- "dark": "#f57c00",
- "light": "#ffb74d",
- "main": "#ff9800",
- },
- },
- "props": Object {},
- "shadows": Array [
- "none",
- "0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12)",
- "0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12)",
- "0px 3px 3px -2px rgba(0,0,0,0.2),0px 3px 4px 0px rgba(0,0,0,0.14),0px 1px 8px 0px rgba(0,0,0,0.12)",
- "0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12)",
- "0px 3px 5px -1px rgba(0,0,0,0.2),0px 5px 8px 0px rgba(0,0,0,0.14),0px 1px 14px 0px rgba(0,0,0,0.12)",
- "0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12)",
- "0px 4px 5px -2px rgba(0,0,0,0.2),0px 7px 10px 1px rgba(0,0,0,0.14),0px 2px 16px 1px rgba(0,0,0,0.12)",
- "0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12)",
- "0px 5px 6px -3px rgba(0,0,0,0.2),0px 9px 12px 1px rgba(0,0,0,0.14),0px 3px 16px 2px rgba(0,0,0,0.12)",
- "0px 6px 6px -3px rgba(0,0,0,0.2),0px 10px 14px 1px rgba(0,0,0,0.14),0px 4px 18px 3px rgba(0,0,0,0.12)",
- "0px 6px 7px -4px rgba(0,0,0,0.2),0px 11px 15px 1px rgba(0,0,0,0.14),0px 4px 20px 3px rgba(0,0,0,0.12)",
- "0px 7px 8px -4px rgba(0,0,0,0.2),0px 12px 17px 2px rgba(0,0,0,0.14),0px 5px 22px 4px rgba(0,0,0,0.12)",
- "0px 7px 8px -4px rgba(0,0,0,0.2),0px 13px 19px 2px rgba(0,0,0,0.14),0px 5px 24px 4px rgba(0,0,0,0.12)",
- "0px 7px 9px -4px rgba(0,0,0,0.2),0px 14px 21px 2px rgba(0,0,0,0.14),0px 5px 26px 4px rgba(0,0,0,0.12)",
- "0px 8px 9px -5px rgba(0,0,0,0.2),0px 15px 22px 2px rgba(0,0,0,0.14),0px 6px 28px 5px rgba(0,0,0,0.12)",
- "0px 8px 10px -5px rgba(0,0,0,0.2),0px 16px 24px 2px rgba(0,0,0,0.14),0px 6px 30px 5px rgba(0,0,0,0.12)",
- "0px 8px 11px -5px rgba(0,0,0,0.2),0px 17px 26px 2px rgba(0,0,0,0.14),0px 6px 32px 5px rgba(0,0,0,0.12)",
- "0px 9px 11px -5px rgba(0,0,0,0.2),0px 18px 28px 2px rgba(0,0,0,0.14),0px 7px 34px 6px rgba(0,0,0,0.12)",
- "0px 9px 12px -6px rgba(0,0,0,0.2),0px 19px 29px 2px rgba(0,0,0,0.14),0px 7px 36px 6px rgba(0,0,0,0.12)",
- "0px 10px 13px -6px rgba(0,0,0,0.2),0px 20px 31px 3px rgba(0,0,0,0.14),0px 8px 38px 7px rgba(0,0,0,0.12)",
- "0px 10px 13px -6px rgba(0,0,0,0.2),0px 21px 33px 3px rgba(0,0,0,0.14),0px 8px 40px 7px rgba(0,0,0,0.12)",
- "0px 10px 14px -6px rgba(0,0,0,0.2),0px 22px 35px 3px rgba(0,0,0,0.14),0px 8px 42px 7px rgba(0,0,0,0.12)",
- "0px 11px 14px -7px rgba(0,0,0,0.2),0px 23px 36px 3px rgba(0,0,0,0.14),0px 9px 44px 8px rgba(0,0,0,0.12)",
- "0px 11px 15px -7px rgba(0,0,0,0.2),0px 24px 38px 3px rgba(0,0,0,0.14),0px 9px 46px 8px rgba(0,0,0,0.12)",
- ],
- "shape": Object {
- "borderRadius": 4,
- },
- "spacing": [Function],
- "transitions": Object {
- "create": [Function],
- "duration": Object {
- "complex": 375,
- "enteringScreen": 225,
- "leavingScreen": 195,
- "short": 250,
- "shorter": 200,
- "shortest": 150,
- "standard": 300,
- },
- "easing": Object {
- "easeIn": "cubic-bezier(0.4, 0, 1, 1)",
- "easeInOut": "cubic-bezier(0.4, 0, 0.2, 1)",
- "easeOut": "cubic-bezier(0.0, 0, 0.2, 1)",
- "sharp": "cubic-bezier(0.4, 0, 0.6, 1)",
- },
- "getAutoHeightDuration": [Function],
- },
- "typography": Object {
- "body1": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "1rem",
- "fontWeight": 400,
- "letterSpacing": "0.00938em",
- "lineHeight": 1.5,
- },
- "body2": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "0.875rem",
- "fontWeight": 400,
- "letterSpacing": "0.01071em",
- "lineHeight": 1.43,
- },
- "button": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "0.875rem",
- "fontWeight": 500,
- "letterSpacing": "0.02857em",
- "lineHeight": 1.75,
- "textTransform": "uppercase",
- },
- "caption": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "0.75rem",
- "fontWeight": 400,
- "letterSpacing": "0.03333em",
- "lineHeight": 1.66,
- },
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": 14,
- "fontWeightBold": 700,
- "fontWeightLight": 300,
- "fontWeightMedium": 500,
- "fontWeightRegular": 400,
- "h1": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "6rem",
- "fontWeight": 300,
- "letterSpacing": "-0.01562em",
- "lineHeight": 1.167,
- },
- "h2": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "3.75rem",
- "fontWeight": 300,
- "letterSpacing": "-0.00833em",
- "lineHeight": 1.2,
- },
- "h3": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "3rem",
- "fontWeight": 400,
- "letterSpacing": "0em",
- "lineHeight": 1.167,
- },
- "h4": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "2.125rem",
- "fontWeight": 400,
- "letterSpacing": "0.00735em",
- "lineHeight": 1.235,
- },
- "h5": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "1.5rem",
- "fontWeight": 400,
- "letterSpacing": "0em",
- "lineHeight": 1.334,
- },
- "h6": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "1.25rem",
- "fontWeight": 500,
- "letterSpacing": "0.0075em",
- "lineHeight": 1.6,
- },
- "htmlFontSize": 16,
- "overline": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "0.75rem",
- "fontWeight": 400,
- "letterSpacing": "0.08333em",
- "lineHeight": 2.66,
- "textTransform": "uppercase",
- },
- "pxToRem": [Function],
- "round": [Function],
- "subtitle1": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "1rem",
- "fontWeight": 400,
- "letterSpacing": "0.00938em",
- "lineHeight": 1.75,
- },
- "subtitle2": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "0.875rem",
- "fontWeight": 500,
- "letterSpacing": "0.00714em",
- "lineHeight": 1.57,
- },
- },
- "zIndex": Object {
- "appBar": 1100,
- "drawer": 1200,
- "mobileStepper": 1000,
- "modal": 1300,
- "snackbar": 1400,
- "speedDial": 1050,
- "tooltip": 1500,
- },
- },
- "name": "MuiBackdrop",
- },
- "propTypes": Object {
- "classes": [Function],
- "innerRef": [Function],
- },
- "render": [Function],
- "useStyles": [Function],
- }
- }
- BackdropProps={
- Object {
- "transitionDuration": Object {
- "enter": 225,
- "exit": 195,
- },
- }
- }
- className="MuiDialog-root modal-root"
- closeAfterTransition={true}
- disableEscapeKeyDown={true}
- onClose={[Function]}
- open={false}
- />
- </ForwardRef(Dialog)>
- </WithStyles(ForwardRef(Dialog))>
- </SgeModalHint>
- </div>
- </StepIdentityAndPdl>
-</Provider>
+ </span>
+ <span
+ class="MuiTouchRipple-root"
+ />
+ </button>
+ </div>
+</div>
`;
diff --git a/src/components/Connection/__snapshots__/Connection.spec.tsx.snap b/src/components/Connection/__snapshots__/Connection.spec.tsx.snap
index 231973b119e83bc5c5972c545c7242f1beec4092..8e69db5839cbc322067bfa00ad82c754bccb8451 100644
--- a/src/components/Connection/__snapshots__/Connection.spec.tsx.snap
+++ b/src/components/Connection/__snapshots__/Connection.spec.tsx.snap
@@ -1,53 +1,21 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Connection component test should call EpglInit 1`] = `
-<Provider
- store={
- Object {
- "clearActions": [Function],
- "dispatch": [Function],
- "getActions": [Function],
- "getState": [Function],
- "replaceReducer": [Function],
- "subscribe": [Function],
- }
- }
->
- <Connection
- fluidType={1}
+<div>
+ <div
+ class="konnector-form"
>
- <div
- className="konnector-form"
- >
- <mock-EpglInit />
- </div>
- </Connection>
-</Provider>
+ <mock-epglinit />
+ </div>
+</div>
`;
exports[`Connection component test should call GrdfInit 1`] = `
-<Provider
- store={
- Object {
- "clearActions": [Function],
- "dispatch": [Function],
- "getActions": [Function],
- "getState": [Function],
- "replaceReducer": [Function],
- "subscribe": [Function],
- }
- }
->
- <Connection
- fluidType={2}
+<div>
+ <div
+ class="konnector-form"
>
- <div
- className="konnector-form"
- >
- <mock-GrdfInit
- onSuccess={[Function]}
- />
- </div>
- </Connection>
-</Provider>
+ <mock-grdfinit />
+ </div>
+</div>
`;
diff --git a/src/components/Connection/connection.scss b/src/components/Connection/connection.scss
index dba6ead256a7f487f925308624793d2c3b135cfd..ae93a0111e53974968b023e1ebe562daee2f5f88 100644
--- a/src/components/Connection/connection.scss
+++ b/src/components/Connection/connection.scss
@@ -37,12 +37,6 @@
color: $grey-bright;
}
- button.btn-secondary-positive {
- span:first-child {
- color: $grey-bright;
- }
- }
-
.connection-form-button {
display: flex;
flex-direction: column;
@@ -55,12 +49,9 @@
}
}
.connection-form-connect-button {
- margin: 0 0.5rem;
button {
- padding: 0.5rem;
- height: 5rem;
+ height: auto;
}
-
&.grdf {
margin-top: 2rem;
}
@@ -80,7 +71,7 @@
flex-direction: column;
align-items: flex-start;
text-align: left;
- max-width: 13.5rem;
+ max-width: 19.5rem;
}
}
}
diff --git a/src/components/Consumption/ConsumptionDetails/ConsumptionDetails.spec.tsx b/src/components/Consumption/ConsumptionDetails/ConsumptionDetails.spec.tsx
index 939ab0b35537bc2dce47ce8195a6ae29ec30f0db..78b2dc508218534047f0cde124a05df356038db7 100644
--- a/src/components/Consumption/ConsumptionDetails/ConsumptionDetails.spec.tsx
+++ b/src/components/Consumption/ConsumptionDetails/ConsumptionDetails.spec.tsx
@@ -1,47 +1,19 @@
+import { render } from '@testing-library/react'
import { FluidType } from 'enums'
-import { mount } from 'enzyme'
-import toJson from 'enzyme-to-json'
import React from 'react'
import { Provider } from 'react-redux'
import { createMockEcolyoStore } from 'tests/__mocks__/store'
-import { waitForComponentToPaint } from 'tests/__mocks__/testUtils'
import ConsumptionDetails from './ConsumptionDetails'
describe('ConsumptionDetails component', () => {
const store = createMockEcolyoStore()
it('should be rendered correctly', async () => {
- const wrapper = mount(
+ const { container } = render(
<Provider store={store}>
<ConsumptionDetails fluidType={FluidType.ELECTRICITY} />
</Provider>
)
- await waitForComponentToPaint(wrapper)
- expect(toJson(wrapper)).toMatchSnapshot()
- })
-
- it('should not render connection card', () => {
- const wrapper = mount(
- <Provider store={store}>
- <ConsumptionDetails fluidType={FluidType.MULTIFLUID} />
- </Provider>
- )
- expect(wrapper.contains('.fluidcard-link')).toBeFalsy()
- })
- it('should render one connection card', () => {
- const wrapper = mount(
- <Provider store={store}>
- <ConsumptionDetails fluidType={FluidType.MULTIFLUID} />
- </Provider>
- )
- expect(wrapper.find('.fluidcard-link')).toBeTruthy()
- })
- it('should not render connection card and show multifluid link', () => {
- const wrapper = mount(
- <Provider store={store}>
- <ConsumptionDetails fluidType={FluidType.ELECTRICITY} />
- </Provider>
- )
- expect(wrapper.find('.multi-link')).toBeTruthy()
+ expect(container).toMatchSnapshot()
})
})
diff --git a/src/components/Consumption/ConsumptionDetails/ConsumptionDetails.tsx b/src/components/Consumption/ConsumptionDetails/ConsumptionDetails.tsx
index 01c5077addf3b167981450552b80adeb48e86a91..d74c3bf9c519405750a6acce40e17bb5a896a874 100644
--- a/src/components/Consumption/ConsumptionDetails/ConsumptionDetails.tsx
+++ b/src/components/Consumption/ConsumptionDetails/ConsumptionDetails.tsx
@@ -13,30 +13,27 @@ const ConsumptionDetails = ({ fluidType }: { fluidType: FluidType }) => {
)
return (
- <>
- <div className="consumption-details-root">
- <div className="consumption-details-content">
- <div className="consumption-details-header text-16-normal-uppercase details-title">
- {convertDateToShortDateString(
- currentDatachart.actualData,
- currentTimeStep
- )}
- {showCompare && (
- <div className="consumption-details-header compare">
- {t('consumption.compared')}
- {currentTimeStep === TimeStep.DAY && ' '}
- {currentTimeStep !== TimeStep.DAY && ' AU '}
- {convertDateToShortDateString(
- currentDatachart.comparisonData,
- currentTimeStep
- )}
- </div>
- )}
- </div>
- <TotalConsumption fluidType={fluidType} />
+ <div className="consumption-details-root">
+ <div className="consumption-details-content">
+ <div className="consumption-details-header text-16-normal-uppercase details-title">
+ {convertDateToShortDateString(
+ currentDatachart.actualData,
+ currentTimeStep
+ )}
+ {showCompare && (
+ <div className="consumption-details-header compare">
+ {t('consumption.compared')}
+ {currentTimeStep === TimeStep.DAY ? ' ' : ' AU '}
+ {convertDateToShortDateString(
+ currentDatachart.comparisonData,
+ currentTimeStep
+ )}
+ </div>
+ )}
</div>
+ <TotalConsumption fluidType={fluidType} />
</div>
- </>
+ </div>
)
}
diff --git a/src/components/Consumption/ConsumptionDetails/__snapshots__/ConsumptionDetails.spec.tsx.snap b/src/components/Consumption/ConsumptionDetails/__snapshots__/ConsumptionDetails.spec.tsx.snap
index 77eb4e2b0d3fb4d9348ff85138d62a5014dad889..8c78033304758d0eafb1a1cf706afff8f575341b 100644
--- a/src/components/Consumption/ConsumptionDetails/__snapshots__/ConsumptionDetails.spec.tsx.snap
+++ b/src/components/Consumption/ConsumptionDetails/__snapshots__/ConsumptionDetails.spec.tsx.snap
@@ -1,85 +1,45 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`ConsumptionDetails component should be rendered correctly 1`] = `
-<Provider
- store={
- Object {
- "clearActions": [Function],
- "dispatch": [Function],
- "getActions": [Function],
- "getState": [Function],
- "replaceReducer": [Function],
- "subscribe": [Function],
- }
- }
->
- <ConsumptionDetails
- fluidType={0}
+<div>
+ <div
+ class="consumption-details-root"
>
<div
- className="consumption-details-root"
+ class="consumption-details-content"
>
<div
- className="consumption-details-content"
+ class="consumption-details-header text-16-normal-uppercase details-title"
>
- <div
- className="consumption-details-header text-16-normal-uppercase details-title"
- />
- <TotalConsumption
- fluidType={0}
+
+ </div>
+ <div
+ class="icon-line "
+ >
+ <svg
+ aria-hidden="true"
+ class="pile-icon styles__icon___23x3R"
+ height="36"
+ width="36"
>
- <div
- className="icon-line "
+ <use
+ xlink:href="#test-file-stub"
+ />
+ </svg>
+ <div>
+ <span
+ class="euro-value"
+ >
+ -----
+ </span>
+ <span
+ class="euro-symbol"
>
- <StyledIcon
- className="pile-icon"
- icon="test-file-stub"
- size={36}
- >
- <Icon
- aria-hidden={true}
- className="pile-icon"
- icon="test-file-stub"
- size={36}
- spin={false}
- >
- <Component
- aria-hidden={true}
- className="pile-icon styles__icon___23x3R"
- height={36}
- style={Object {}}
- width={36}
- >
- <svg
- aria-hidden={true}
- className="pile-icon styles__icon___23x3R"
- height={36}
- style={Object {}}
- width={36}
- >
- <use
- xlinkHref="#test-file-stub"
- />
- </svg>
- </Component>
- </Icon>
- </StyledIcon>
- <div>
- <span
- className="euro-value"
- >
- -----
- </span>
- <span
- className="euro-symbol"
- >
- €
- </span>
- </div>
- </div>
- </TotalConsumption>
+ €
+ </span>
+ </div>
</div>
</div>
- </ConsumptionDetails>
-</Provider>
+ </div>
+</div>
`;
diff --git a/src/components/Consumption/ConsumptionView.spec.tsx b/src/components/Consumption/ConsumptionView.spec.tsx
index 75ce5755c9f38d4c15dd4d29afa7687580e14fc0..124c51accc0156479fc86be1bff71ee0f3e76bf9 100644
--- a/src/components/Consumption/ConsumptionView.spec.tsx
+++ b/src/components/Consumption/ConsumptionView.spec.tsx
@@ -1,6 +1,5 @@
-import Loader from 'components/Loader/Loader'
+import { render, screen } from '@testing-library/react'
import { FluidState, FluidType, TimeStep } from 'enums'
-import { mount } from 'enzyme'
import React from 'react'
import { Provider } from 'react-redux'
import * as chartActions from 'store/chart/chart.slice'
@@ -43,15 +42,6 @@ jest.mock(
'components/Konnector/KonnectorViewerCard',
() => 'mock-konnectorViewerCard'
)
-jest.mock(
- 'components/PartnerIssue/PartnerIssueModal',
- () => 'mock-partnerIssueModal'
-)
-jest.mock('components/CustomPopup/CustomPopupModal', () => 'mock-customPopup')
-jest.mock(
- 'components/ReleaseNotesModal/ReleaseNotesModal',
- () => 'mock-releaseNotes'
-)
jest.mock(
'components/Connection/SGEConnect/SgeConnectView',
() => 'mock-SgeConnectView'
@@ -78,17 +68,19 @@ describe('ConsumptionView component', () => {
},
modal: mockModalState,
})
- const wrapper = mount(
+ const { container } = render(
<Provider store={store}>
<ConsumptionView fluidType={FluidType.ELECTRICITY} />
</Provider>
)
- expect(wrapper.find('mock-cozybar').exists()).toBeTruthy()
- expect(wrapper.find('mock-header').exists()).toBeTruthy()
- expect(wrapper.find('mock-dateNavigator').exists()).toBeTruthy()
- expect(wrapper.find('mock-fluidButtons').exists()).toBeTruthy()
- expect(wrapper.find('mock-fluidchart').exists()).toBeTruthy()
- expect(wrapper.find('mock-consumptionDetails').exists()).toBeTruthy()
+ expect(container.getElementsByTagName('mock-cozybar')[0]).toBeTruthy()
+ expect(container.getElementsByTagName('mock-header')[0]).toBeTruthy()
+ expect(container.getElementsByTagName('mock-dateNavigator')[0]).toBeTruthy()
+ expect(container.getElementsByTagName('mock-fluidButtons')[0]).toBeTruthy()
+ expect(container.getElementsByTagName('mock-fluidchart')[0]).toBeTruthy()
+ expect(
+ container.getElementsByTagName('mock-consumptionDetails')[0]
+ ).toBeTruthy()
})
it('should display a spinner when fluid connected and is loading', () => {
@@ -104,15 +96,12 @@ describe('ConsumptionView component', () => {
},
modal: mockModalState,
})
- const wrapper = mount(
+ render(
<Provider store={store}>
<ConsumptionView fluidType={FluidType.ELECTRICITY} />
</Provider>
)
- expect(wrapper.find('mock-cozybar').exists()).toBeTruthy()
- expect(wrapper.find('mock-header').exists()).toBeTruthy()
- expect(wrapper.find('mock-dateNavigator').exists()).toBeTruthy()
- expect(wrapper.find(Loader).exists()).toBeTruthy()
+ expect(screen.getByRole('progressbar')).toBeInTheDocument()
})
it('should set CurrentTimeStep to WEEK when fluid != ELECTRICITY and timeStep = HALF_AN_HOUR', () => {
@@ -127,7 +116,7 @@ describe('ConsumptionView component', () => {
},
modal: mockModalState,
})
- mount(
+ render(
<Provider store={store}>
<ConsumptionView fluidType={FluidType.GAS} />
</Provider>
@@ -145,12 +134,14 @@ describe('ConsumptionView component', () => {
},
modal: mockModalState,
})
- const wrapper = mount(
+ const { container } = render(
<Provider store={store}>
<ConsumptionView fluidType={FluidType.MULTIFLUID} />
</Provider>
)
- expect(wrapper.find('mock-consumptionDetails').exists()).toBeTruthy()
+ expect(
+ container.getElementsByTagName('mock-consumptionDetails')[0]
+ ).toBeTruthy()
})
it('should render mutlifluid consumption if at least one fluid is connected', () => {
@@ -162,12 +153,14 @@ describe('ConsumptionView component', () => {
},
modal: mockModalState,
})
- const wrapper = mount(
+ const { container } = render(
<Provider store={store}>
<ConsumptionView fluidType={FluidType.MULTIFLUID} />
</Provider>
)
- expect(wrapper.find('.consumptionview-content').exists()).toBeTruthy()
+ expect(
+ container.getElementsByClassName('consumptionview-content')[0]
+ ).toBeInTheDocument()
})
it('should render Electricity when elec is connected', () => {
@@ -179,13 +172,17 @@ describe('ConsumptionView component', () => {
},
modal: mockModalState,
})
- const wrapper = mount(
+ const { container } = render(
<Provider store={store}>
<ConsumptionView fluidType={FluidType.ELECTRICITY} />
</Provider>
)
- expect(wrapper.find('.consumptionview-content').exists()).toBeTruthy()
- expect(wrapper.find('mock-consumptionDetails').exists()).toBeTruthy()
+ expect(
+ container.getElementsByClassName('consumptionview-content').item(0)
+ ).toBeInTheDocument()
+ expect(
+ container.getElementsByTagName('mock-consumptionDetails').item(0)
+ ).toBeInTheDocument()
})
// todo describe and add multiple fluids ?
@@ -198,15 +195,18 @@ describe('ConsumptionView component', () => {
fluidStatus: updatedStatus,
releaseNotes: mockInitialEcolyoState.global.releaseNotes,
},
- modal: { partnersIssueModal: { enedis: false, grdf: false, egl: true } },
+ modal: {
+ ...mockModalState,
+ partnersIssueModal: { enedis: false, grdf: false, egl: true },
+ },
})
mockUpdateProfile.mockResolvedValue(mockTestProfile1)
- const wrapper = mount(
+ render(
<Provider store={store}>
<ConsumptionView fluidType={FluidType.ELECTRICITY} />
</Provider>
)
- expect(wrapper.find('mock-partnerIssueModal').exists()).toBeTruthy()
+ expect(screen.getByRole('dialog')).toBeInTheDocument()
})
it('should show expired modal when a GRDF consent is expired', () => {
const updatedStatus = mockInitialEcolyoState.global.fluidStatus
@@ -219,12 +219,12 @@ describe('ConsumptionView component', () => {
},
modal: mockModalState,
})
- const wrapper = mount(
+ render(
<Provider store={store}>
<ConsumptionView fluidType={FluidType.GAS} />
</Provider>
)
- expect(wrapper.find('.title').text()).toBe('consent_outdated.title.2')
+ expect(screen.getByText('consent_outdated.title.2')).toBeInTheDocument()
})
it('should show expired modal when a Enedis consent is expired', () => {
const updatedStatus = mockInitialEcolyoState.global.fluidStatus
@@ -237,13 +237,12 @@ describe('ConsumptionView component', () => {
},
modal: mockModalState,
})
- const wrapper = mount(
+ render(
<Provider store={store}>
<ConsumptionView fluidType={FluidType.ELECTRICITY} />
</Provider>
)
-
- expect(wrapper.find('.title').text()).toBe('consent_outdated.title.0')
+ expect(screen.getByText('consent_outdated.title.0')).toBeInTheDocument()
})
it('should render customPopup Modal', async () => {
const store = createMockEcolyoStore({
@@ -258,12 +257,12 @@ describe('ConsumptionView component', () => {
},
})
mockUpdateProfile.mockResolvedValue(mockTestProfile1)
- const wrapper = mount(
+ render(
<Provider store={store}>
<ConsumptionView fluidType={FluidType.ELECTRICITY} />
</Provider>
)
- expect(wrapper.find('mock-customPopup').exists()).toBeTruthy()
+ expect(screen.getByRole('dialog')).toBeInTheDocument()
})
it('should render releaseNotesModal if releaseNotes.show is true', async () => {
const store = createMockEcolyoStore({
@@ -278,11 +277,11 @@ describe('ConsumptionView component', () => {
modal: mockModalState,
})
mockUpdateProfile.mockResolvedValue(mockTestProfile1)
- const wrapper = mount(
+ render(
<Provider store={store}>
<ConsumptionView fluidType={FluidType.ELECTRICITY} />
</Provider>
)
- expect(wrapper.find('mock-releaseNotes').exists()).toBeTruthy()
+ expect(screen.getByRole('dialog')).toBeInTheDocument()
})
})
diff --git a/src/components/Consumption/FluidButtons/FluidButton.spec.tsx b/src/components/Consumption/FluidButtons/FluidButton.spec.tsx
index 28699710e7d5fa9239d9b75d879c894a85d1104a..dac6e52ceb74f3fad1ce7ee4c889971a420d16d1 100644
--- a/src/components/Consumption/FluidButtons/FluidButton.spec.tsx
+++ b/src/components/Consumption/FluidButtons/FluidButton.spec.tsx
@@ -1,54 +1,55 @@
+import { render } from '@testing-library/react'
+import { userEvent } from '@testing-library/user-event'
import { FluidState, FluidType } from 'enums'
-import { mount } from 'enzyme'
-import toJson from 'enzyme-to-json'
import { GlobalState } from 'models'
import React from 'react'
import { Provider } from 'react-redux'
import UsageEventService from 'services/usageEvent.service'
import { createMockEcolyoStore, mockGlobalState } from 'tests/__mocks__/store'
-import { waitForComponentToPaint } from 'tests/__mocks__/testUtils'
import FluidButton from './FluidButton'
+const mockAddEvent = jest.fn()
+jest.mock('services/usageEvent.service')
+UsageEventService.addEvent = mockAddEvent
+
describe('FluidButton component', () => {
const store = createMockEcolyoStore()
it('should be rendered correctly', async () => {
- const wrapper = mount(
+ const { container } = render(
<Provider store={store}>
<FluidButton fluidType={FluidType.ELECTRICITY} isActive={false} />
</Provider>
)
- await waitForComponentToPaint(wrapper)
- expect(toJson(wrapper)).toMatchSnapshot()
+ expect(container).toMatchSnapshot()
})
it('should render multifluidButton', () => {
- const wrapper = mount(
+ const { container } = render(
<Provider store={store}>
<FluidButton fluidType={FluidType.MULTIFLUID} isActive={false} />
</Provider>
)
- expect(wrapper.find('.multifluid')).toBeTruthy()
+ const element = container.getElementsByClassName('multifluid').item(0)
+ expect(element).toBeInTheDocument()
})
it('should render active button', () => {
- const wrapper = mount(
+ const { container } = render(
<Provider store={store}>
- <FluidButton fluidType={FluidType.GAS} isActive={false} />
+ <FluidButton fluidType={FluidType.GAS} isActive={true} />
</Provider>
)
- expect(wrapper.find('.active')).toBeTruthy()
+ expect(container.getElementsByClassName('active').length).toBeTruthy()
})
- it('should trigger nav event', () => {
- jest.mock('services/usageEvent.service')
- const mockAddEvent = jest.fn()
- UsageEventService.addEvent = mockAddEvent
- const wrapper = mount(
+ it('should trigger nav event', async () => {
+ const { container } = render(
<Provider store={store}>
<FluidButton fluidType={FluidType.GAS} isActive={false} />
</Provider>
)
- wrapper.find('.fluid-button').simulate('click')
+ const navButton = container.getElementsByClassName('fluid-button')[0]
+ await userEvent.click(navButton)
expect(mockAddEvent).toHaveBeenCalled()
})
@@ -60,11 +61,12 @@ describe('FluidButton component', () => {
const store = createMockEcolyoStore({
global: updatedInitialState,
})
- const wrapper = mount(
+ const { container } = render(
<Provider store={store}>
<FluidButton fluidType={FluidType.GAS} isActive={false} />
</Provider>
)
- expect(wrapper.find('.notif-error')).toBeTruthy()
+ const element = container.getElementsByClassName('notif-error').item(0)
+ expect(element).toBeInTheDocument()
})
})
diff --git a/src/components/Consumption/FluidButtons/FluidButton.tsx b/src/components/Consumption/FluidButtons/FluidButton.tsx
index 0d78a7cc350dc20b364284efcd6bb63cd8968dda..80e2a2da4ee4c94231c9159900a4c81493fa3207 100644
--- a/src/components/Consumption/FluidButtons/FluidButton.tsx
+++ b/src/components/Consumption/FluidButtons/FluidButton.tsx
@@ -1,3 +1,4 @@
+import { IconButton } from '@material-ui/core'
import ErrorNotif from 'assets/icons/ico/notif_error.svg'
import PartnerIssueNotif from 'assets/icons/ico/notif_maintenance.svg'
import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
@@ -64,10 +65,10 @@ const FluidButton = ({ fluidType, isActive }: FluidButtonProps) => {
}
}, [fluidStatus, fluidType, isConnected, isErrored])
return (
- <div
- className={`fluid-title ${FluidType[
+ <IconButton
+ className={`fluid-title fluid-button ${FluidType[
fluidType
- ].toLowerCase()} fluid-button`}
+ ].toLowerCase()}`}
onClick={goToFluid}
>
<StyledIcon
@@ -93,7 +94,7 @@ const FluidButton = ({ fluidType, isActive }: FluidButtonProps) => {
>
{t(`FLUID.${FluidType[fluidType]}.LABEL`)}
</div>
- </div>
+ </IconButton>
)
}
diff --git a/src/components/Consumption/FluidButtons/FluidButtons.spec.tsx b/src/components/Consumption/FluidButtons/FluidButtons.spec.tsx
index 4517997e1748978a089adc3a5dcf152e6c69f8ee..111456ecb5c280068e07928dbedfe1e66b91a0bc 100644
--- a/src/components/Consumption/FluidButtons/FluidButtons.spec.tsx
+++ b/src/components/Consumption/FluidButtons/FluidButtons.spec.tsx
@@ -1,22 +1,19 @@
+import { render } from '@testing-library/react'
import { FluidType } from 'enums'
-import { mount } from 'enzyme'
-import toJson from 'enzyme-to-json'
import React from 'react'
import { Provider } from 'react-redux'
import { createMockEcolyoStore } from 'tests/__mocks__/store'
-import { waitForComponentToPaint } from 'tests/__mocks__/testUtils'
import FluidButtons from './FluidButtons'
describe('FluidButtons component', () => {
const store = createMockEcolyoStore()
it('should be rendered correctly', async () => {
- const wrapper = mount(
+ const { container } = render(
<Provider store={store}>
<FluidButtons activeFluid={FluidType.ELECTRICITY} />
</Provider>
)
- await waitForComponentToPaint(wrapper)
- expect(toJson(wrapper)).toMatchSnapshot()
+ expect(container).toMatchSnapshot()
})
})
diff --git a/src/components/Consumption/FluidButtons/__snapshots__/FluidButton.spec.tsx.snap b/src/components/Consumption/FluidButtons/__snapshots__/FluidButton.spec.tsx.snap
index bc20bd2d993c50ea082e2e9273a3cde505707457..fe1b616b62680d6c6b7ee1b248b93117710d356b 100644
--- a/src/components/Consumption/FluidButtons/__snapshots__/FluidButton.spec.tsx.snap
+++ b/src/components/Consumption/FluidButtons/__snapshots__/FluidButton.spec.tsx.snap
@@ -1,65 +1,34 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`FluidButton component should be rendered correctly 1`] = `
-<Provider
- store={
- Object {
- "clearActions": [Function],
- "dispatch": [Function],
- "getActions": [Function],
- "getState": [Function],
- "replaceReducer": [Function],
- "subscribe": [Function],
- }
- }
->
- <FluidButton
- fluidType={0}
- isActive={false}
+<div>
+ <button
+ class="MuiButtonBase-root MuiIconButton-root fluid-title fluid-button electricity"
+ tabindex="0"
+ type="button"
>
- <div
- className="fluid-title electricity fluid-button"
- onClick={[Function]}
+ <span
+ class="MuiIconButton-label"
>
- <StyledIcon
- className="fluid-icon"
- icon="test-file-stub"
- size={32}
+ <svg
+ aria-hidden="true"
+ class="fluid-icon styles__icon___23x3R"
+ height="32"
+ width="32"
>
- <Icon
- aria-hidden={true}
- className="fluid-icon"
- icon="test-file-stub"
- size={32}
- spin={false}
- >
- <Component
- aria-hidden={true}
- className="fluid-icon styles__icon___23x3R"
- height={32}
- style={Object {}}
- width={32}
- >
- <svg
- aria-hidden={true}
- className="fluid-icon styles__icon___23x3R"
- height={32}
- style={Object {}}
- width={32}
- >
- <use
- xlinkHref="#test-file-stub"
- />
- </svg>
- </Component>
- </Icon>
- </StyledIcon>
+ <use
+ xlink:href="#test-file-stub"
+ />
+ </svg>
<div
- className="fluid-title electricity false text-14-normal"
+ class="fluid-title electricity false text-14-normal"
>
FLUID.ELECTRICITY.LABEL
</div>
- </div>
- </FluidButton>
-</Provider>
+ </span>
+ <span
+ class="MuiTouchRipple-root"
+ />
+ </button>
+</div>
`;
diff --git a/src/components/Consumption/FluidButtons/__snapshots__/FluidButtons.spec.tsx.snap b/src/components/Consumption/FluidButtons/__snapshots__/FluidButtons.spec.tsx.snap
index 3925c6abe1b2547a032e4a5584952504432ed89e..d7c42349c2df0fcf66d258cf58ac289aee11f4da 100644
--- a/src/components/Consumption/FluidButtons/__snapshots__/FluidButtons.spec.tsx.snap
+++ b/src/components/Consumption/FluidButtons/__snapshots__/FluidButtons.spec.tsx.snap
@@ -1,225 +1,126 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`FluidButtons component should be rendered correctly 1`] = `
-<Provider
- store={
- Object {
- "clearActions": [Function],
- "dispatch": [Function],
- "getActions": [Function],
- "getState": [Function],
- "replaceReducer": [Function],
- "subscribe": [Function],
- }
- }
->
- <FluidButtons
- activeFluid={0}
+<div>
+ <div
+ class="fluid-buttons"
>
<div
- className="fluid-buttons"
+ class="content"
>
- <div
- className="content"
+ <button
+ class="MuiButtonBase-root MuiIconButton-root fluid-title fluid-button multifluid"
+ tabindex="0"
+ type="button"
>
- <FluidButton
- fluidType={3}
- isActive={false}
- key="3"
+ <span
+ class="MuiIconButton-label"
>
+ <svg
+ aria-hidden="true"
+ class="fluid-icon styles__icon___23x3R"
+ height="36"
+ width="36"
+ >
+ <use
+ xlink:href="#test-file-stub"
+ />
+ </svg>
<div
- className="fluid-title multifluid fluid-button"
- onClick={[Function]}
+ class="fluid-title multifluid false text-14-normal"
>
- <StyledIcon
- className="fluid-icon"
- icon="test-file-stub"
- size={36}
- >
- <Icon
- aria-hidden={true}
- className="fluid-icon"
- icon="test-file-stub"
- size={36}
- spin={false}
- >
- <Component
- aria-hidden={true}
- className="fluid-icon styles__icon___23x3R"
- height={36}
- style={Object {}}
- width={36}
- >
- <svg
- aria-hidden={true}
- className="fluid-icon styles__icon___23x3R"
- height={36}
- style={Object {}}
- width={36}
- >
- <use
- xlinkHref="#test-file-stub"
- />
- </svg>
- </Component>
- </Icon>
- </StyledIcon>
- <div
- className="fluid-title multifluid false text-14-normal"
- >
- FLUID.MULTIFLUID.LABEL
- </div>
+ FLUID.MULTIFLUID.LABEL
</div>
- </FluidButton>
- <FluidButton
- fluidType={0}
- isActive={true}
- key="0"
+ </span>
+ <span
+ class="MuiTouchRipple-root"
+ />
+ </button>
+ <button
+ class="MuiButtonBase-root MuiIconButton-root fluid-title fluid-button electricity"
+ tabindex="0"
+ type="button"
+ >
+ <span
+ class="MuiIconButton-label"
>
+ <svg
+ aria-hidden="true"
+ class="fluid-icon styles__icon___23x3R"
+ height="32"
+ width="32"
+ >
+ <use
+ xlink:href="#test-file-stub"
+ />
+ </svg>
<div
- className="fluid-title electricity fluid-button"
- onClick={[Function]}
+ class="fluid-title electricity active text-14-normal"
>
- <StyledIcon
- className="fluid-icon"
- icon="test-file-stub"
- size={32}
- >
- <Icon
- aria-hidden={true}
- className="fluid-icon"
- icon="test-file-stub"
- size={32}
- spin={false}
- >
- <Component
- aria-hidden={true}
- className="fluid-icon styles__icon___23x3R"
- height={32}
- style={Object {}}
- width={32}
- >
- <svg
- aria-hidden={true}
- className="fluid-icon styles__icon___23x3R"
- height={32}
- style={Object {}}
- width={32}
- >
- <use
- xlinkHref="#test-file-stub"
- />
- </svg>
- </Component>
- </Icon>
- </StyledIcon>
- <div
- className="fluid-title electricity active text-14-normal"
- >
- FLUID.ELECTRICITY.LABEL
- </div>
+ FLUID.ELECTRICITY.LABEL
</div>
- </FluidButton>
- <FluidButton
- fluidType={1}
- isActive={false}
- key="1"
+ </span>
+ <span
+ class="MuiTouchRipple-root"
+ />
+ </button>
+ <button
+ class="MuiButtonBase-root MuiIconButton-root fluid-title fluid-button water"
+ tabindex="0"
+ type="button"
+ >
+ <span
+ class="MuiIconButton-label"
>
+ <svg
+ aria-hidden="true"
+ class="fluid-icon styles__icon___23x3R"
+ height="32"
+ width="32"
+ >
+ <use
+ xlink:href="#test-file-stub"
+ />
+ </svg>
<div
- className="fluid-title water fluid-button"
- onClick={[Function]}
+ class="fluid-title water false text-14-normal"
>
- <StyledIcon
- className="fluid-icon"
- icon="test-file-stub"
- size={32}
- >
- <Icon
- aria-hidden={true}
- className="fluid-icon"
- icon="test-file-stub"
- size={32}
- spin={false}
- >
- <Component
- aria-hidden={true}
- className="fluid-icon styles__icon___23x3R"
- height={32}
- style={Object {}}
- width={32}
- >
- <svg
- aria-hidden={true}
- className="fluid-icon styles__icon___23x3R"
- height={32}
- style={Object {}}
- width={32}
- >
- <use
- xlinkHref="#test-file-stub"
- />
- </svg>
- </Component>
- </Icon>
- </StyledIcon>
- <div
- className="fluid-title water false text-14-normal"
- >
- FLUID.WATER.LABEL
- </div>
+ FLUID.WATER.LABEL
</div>
- </FluidButton>
- <FluidButton
- fluidType={2}
- isActive={false}
- key="2"
+ </span>
+ <span
+ class="MuiTouchRipple-root"
+ />
+ </button>
+ <button
+ class="MuiButtonBase-root MuiIconButton-root fluid-title fluid-button gas"
+ tabindex="0"
+ type="button"
+ >
+ <span
+ class="MuiIconButton-label"
>
+ <svg
+ aria-hidden="true"
+ class="fluid-icon styles__icon___23x3R"
+ height="32"
+ width="32"
+ >
+ <use
+ xlink:href="#test-file-stub"
+ />
+ </svg>
<div
- className="fluid-title gas fluid-button"
- onClick={[Function]}
+ class="fluid-title gas false text-14-normal"
>
- <StyledIcon
- className="fluid-icon"
- icon="test-file-stub"
- size={32}
- >
- <Icon
- aria-hidden={true}
- className="fluid-icon"
- icon="test-file-stub"
- size={32}
- spin={false}
- >
- <Component
- aria-hidden={true}
- className="fluid-icon styles__icon___23x3R"
- height={32}
- style={Object {}}
- width={32}
- >
- <svg
- aria-hidden={true}
- className="fluid-icon styles__icon___23x3R"
- height={32}
- style={Object {}}
- width={32}
- >
- <use
- xlinkHref="#test-file-stub"
- />
- </svg>
- </Component>
- </Icon>
- </StyledIcon>
- <div
- className="fluid-title gas false text-14-normal"
- >
- FLUID.GAS.LABEL
- </div>
+ FLUID.GAS.LABEL
</div>
- </FluidButton>
- </div>
+ </span>
+ <span
+ class="MuiTouchRipple-root"
+ />
+ </button>
</div>
- </FluidButtons>
-</Provider>
+ </div>
+</div>
`;
diff --git a/src/components/Consumption/FluidButtons/fluidButtons.scss b/src/components/Consumption/FluidButtons/fluidButtons.scss
index a2fe1396ee284b6ce10cdf9fd4bb1a2514e5dff2..fa69ea60a74c195fe770053c1cc2a84d3e6e3213 100644
--- a/src/components/Consumption/FluidButtons/fluidButtons.scss
+++ b/src/components/Consumption/FluidButtons/fluidButtons.scss
@@ -2,7 +2,6 @@
@import 'src/styles/base/breakpoint';
.fluid-buttons {
- width: 100%;
background: $dark-light-2;
padding-top: 0.5rem;
box-shadow: inset 0px 4px 8px #000000;
@@ -10,7 +9,6 @@
display: flex;
align-items: center;
justify-content: space-evenly;
- padding: 0.6rem 0;
box-sizing: border-box;
width: 45.75rem;
margin: auto;
@@ -19,14 +17,12 @@
}
}
.fluid-button {
- cursor: pointer;
- min-width: 70px;
- margin: 0 0.3rem;
- display: flex;
- flex-direction: column;
- justify-content: center;
- align-items: center;
- position: relative;
+ min-width: 80px;
+ span {
+ display: flex;
+ flex-direction: column;
+ }
+
.fluid-title {
text-align: center;
color: $grey-dark;
diff --git a/src/components/ConsumptionVisualizer/DataloadConsumptionVisualizer.spec.tsx b/src/components/ConsumptionVisualizer/DataloadConsumptionVisualizer.spec.tsx
index 7dda1e01b6dc024cb11e920b99b21fda890d103e..f492d59e1824998ce1162220e7946128b106057d 100644
--- a/src/components/ConsumptionVisualizer/DataloadConsumptionVisualizer.spec.tsx
+++ b/src/components/ConsumptionVisualizer/DataloadConsumptionVisualizer.spec.tsx
@@ -1,15 +1,17 @@
+import { render, screen } from '@testing-library/react'
+import { userEvent } from '@testing-library/user-event'
import { DataloadState, FluidType } from 'enums'
-import { mount } from 'enzyme'
-import toJson from 'enzyme-to-json'
import { DateTime } from 'luxon'
import { Dataload } from 'models'
import React from 'react'
import { Provider } from 'react-redux'
import { BrowserRouter } from 'react-router-dom'
import UsageEventService from 'services/usageEvent.service'
-import { baseDataLoad } from 'tests/__mocks__/chartData.mock'
+import {
+ baseDataLoad,
+ baseMultiFluidDataLoad,
+} from 'tests/__mocks__/chartData.mock'
import { createMockEcolyoStore, mockChartState } from 'tests/__mocks__/store'
-import { waitForComponentToPaint } from 'tests/__mocks__/testUtils'
import DataloadConsumptionVisualizer from './DataloadConsumptionVisualizer'
jest.mock('services/fluidsPrices.service', () => {
@@ -43,9 +45,23 @@ const dataLoadWithValueDetail: Dataload = {
describe('Dataload consumption visualizer component', () => {
const store = createMockEcolyoStore()
+
+ it('should render with single fluid', async () => {
+ const { container } = render(
+ <Provider store={store}>
+ <DataloadConsumptionVisualizer
+ fluidType={FluidType.ELECTRICITY}
+ dataload={baseDataLoad}
+ compareDataload={baseDataLoad}
+ setActive={jest.fn()}
+ />
+ </Provider>
+ )
+ expect(container).toMatchSnapshot()
+ })
describe('should render nothing', () => {
it('should render nothing if dataload is null', () => {
- const wrapper = mount(
+ const { container } = render(
<Provider store={store}>
<DataloadConsumptionVisualizer
fluidType={FluidType.ELECTRICITY}
@@ -55,12 +71,13 @@ describe('Dataload consumption visualizer component', () => {
/>
</Provider>
)
- expect(wrapper.find('.dataloadvisualizer-root').children()).toHaveLength(
- 0
- )
+ const element = container
+ .getElementsByClassName('dataloadvisualizer-root')
+ .item(0)
+ expect(element?.children.length).toBe(0)
})
it('should render nothing if dataload is in the future', () => {
- const wrapper = mount(
+ const { container } = render(
<Provider store={store}>
<DataloadConsumptionVisualizer
fluidType={FluidType.ELECTRICITY}
@@ -70,14 +87,15 @@ describe('Dataload consumption visualizer component', () => {
/>
</Provider>
)
- expect(wrapper.find('.dataloadvisualizer-root').children()).toHaveLength(
- 0
- )
+ const element = container
+ .getElementsByClassName('dataloadvisualizer-root')
+ .item(0)
+ expect(element?.children.length).toBe(0)
})
})
it('should render DataloadNoValue if dataload.state is not valid', () => {
- const wrapper = mount(
+ const { container } = render(
<Provider store={store}>
<DataloadConsumptionVisualizer
fluidType={FluidType.ELECTRICITY}
@@ -87,45 +105,33 @@ describe('Dataload consumption visualizer component', () => {
/>
</Provider>
)
- expect(wrapper.find('mock-DataloadNoValue').exists()).toBeTruthy()
+ expect(
+ container.getElementsByTagName('mock-DataloadNoValue').item(0)
+ ).toBeInTheDocument()
})
- it('should render with single fluid', async () => {
- const wrapper = mount(
- <Provider store={store}>
- <DataloadConsumptionVisualizer
- fluidType={FluidType.ELECTRICITY}
- dataload={baseDataLoad}
- compareDataload={baseDataLoad}
- setActive={jest.fn()}
- />
- </Provider>
- )
- await waitForComponentToPaint(wrapper)
- expect(toJson(wrapper)).toMatchSnapshot()
- })
it('should render correctly multifluid and 3 clickable links', () => {
- const store = createMockEcolyoStore()
- const wrapper = mount(
+ render(
<Provider store={store}>
<BrowserRouter>
<DataloadConsumptionVisualizer
fluidType={FluidType.MULTIFLUID}
- dataload={baseDataLoad}
- compareDataload={baseDataLoad}
+ dataload={baseMultiFluidDataLoad}
+ compareDataload={null}
setActive={jest.fn()}
/>
</BrowserRouter>
</Provider>
)
- expect(wrapper.find('.dataloadvisualizer-euro-link').length).toBe(3)
+ const links = screen.getAllByRole('link')
+ expect(links.length).toBe(3)
})
it('should render with no value to compare available', async () => {
const store = createMockEcolyoStore({
chart: { ...mockChartState, showCompare: true },
})
- const wrapper = mount(
+ const { container } = render(
<Provider store={store}>
<DataloadConsumptionVisualizer
fluidType={FluidType.WATER}
@@ -135,13 +141,16 @@ describe('Dataload consumption visualizer component', () => {
/>
</Provider>
)
- expect(wrapper.find('.dataloadvisualizer-novalue').exists()).toBeTruthy()
+ const element = container
+ .getElementsByClassName('dataloadvisualizer-novalue')
+ .item(0)
+ expect(element).toBeInTheDocument()
})
it('should render with water comparison data', async () => {
const store = createMockEcolyoStore({
chart: { ...mockChartState, showCompare: true },
})
- const wrapper = mount(
+ const { container } = render(
<Provider store={store}>
<DataloadConsumptionVisualizer
fluidType={FluidType.WATER}
@@ -151,10 +160,11 @@ describe('Dataload consumption visualizer component', () => {
/>
</Provider>
)
- expect(wrapper.find('.water-compare').exists()).toBeTruthy()
+ const element = container.getElementsByClassName('water-compare').item(0)
+ expect(element).toBeInTheDocument()
})
it('should render multifluid with no compare and display estimation modal', async () => {
- const wrapper = mount(
+ const { container } = render(
<Provider store={store}>
<DataloadConsumptionVisualizer
fluidType={FluidType.MULTIFLUID}
@@ -164,7 +174,10 @@ describe('Dataload consumption visualizer component', () => {
/>
</Provider>
)
- expect(wrapper.find('mock-EstimatedConsumptionModal').exists()).toBeTruthy()
+ const element = container
+ .getElementsByTagName('mock-EstimatedConsumptionModal')
+ .item(0)
+ expect(element).toBeInTheDocument()
})
it('should render multifluid with no compare and navigate to singleFluid page', async () => {
jest.mock('services/converter.service', () => {
@@ -173,7 +186,7 @@ describe('Dataload consumption visualizer component', () => {
}))
})
- const wrapper = mount(
+ render(
<Provider store={store}>
<BrowserRouter>
<DataloadConsumptionVisualizer
@@ -189,8 +202,8 @@ describe('Dataload consumption visualizer component', () => {
const mockAddEvent = jest.fn()
UsageEventService.addEvent = mockAddEvent
- // Render Navlinks to fluids
- wrapper.find('.dataloadvisualizer-euro-fluid').first().simulate('click')
+ const links = screen.getAllByRole('link')
+ await userEvent.click(links[0])
expect(mockAddEvent).toHaveBeenCalled()
})
})
diff --git a/src/components/ConsumptionVisualizer/DataloadNoValue.spec.tsx b/src/components/ConsumptionVisualizer/DataloadNoValue.spec.tsx
index 8d9f0618371c50cd34c33e139e928162ce35aa4d..4045300323387423250a533581a554488d9d6b0a 100644
--- a/src/components/ConsumptionVisualizer/DataloadNoValue.spec.tsx
+++ b/src/components/ConsumptionVisualizer/DataloadNoValue.spec.tsx
@@ -1,114 +1,110 @@
+import { render, screen } from '@testing-library/react'
+import { userEvent } from '@testing-library/user-event'
import { DataloadState, FluidType } from 'enums'
-import { mount } from 'enzyme'
-import toJson from 'enzyme-to-json'
-import { Dataload } from 'models'
import React from 'react'
import { baseDataLoad } from 'tests/__mocks__/chartData.mock'
import DataloadNoValue from './DataloadNoValue'
-const mockSetActive = jest.fn()
-
describe('DataloadNoValue component', () => {
- const mockDataload: Dataload = baseDataLoad
-
it('should render correctly', () => {
- const wrapper = mount(
+ const { container } = render(
<DataloadNoValue
- dataload={mockDataload}
+ dataload={baseDataLoad}
fluidType={FluidType.ELECTRICITY}
- setActive={mockSetActive}
+ setActive={jest.fn()}
/>
)
- expect(toJson(wrapper)).toMatchSnapshot()
+ expect(container).toMatchSnapshot()
})
describe('should render correctly no data', () => {
it('case state EMPTY', () => {
- const _mockdataLoad = { ...mockDataload, state: DataloadState.EMPTY }
- const wrapper = mount(
+ const mockDataLoad = { ...baseDataLoad, state: DataloadState.EMPTY }
+ render(
<DataloadNoValue
- dataload={_mockdataLoad}
+ dataload={mockDataLoad}
fluidType={FluidType.ELECTRICITY}
- setActive={mockSetActive}
+ setActive={jest.fn()}
/>
)
- expect(wrapper.find('.dataloadvisualizer-value').text()).toBe(
- 'consumption_visualizer.no_data'
- )
+ expect(
+ screen.getByText('consumption_visualizer.no_data')
+ ).toBeInTheDocument()
})
it('case state HOLE', () => {
- const _mockdataLoad = { ...mockDataload, state: DataloadState.HOLE }
- const wrapper = mount(
+ const mockDataLoad = { ...baseDataLoad, state: DataloadState.HOLE }
+ render(
<DataloadNoValue
- dataload={_mockdataLoad}
+ dataload={mockDataLoad}
fluidType={FluidType.ELECTRICITY}
- setActive={mockSetActive}
+ setActive={jest.fn()}
/>
)
- expect(wrapper.find('.dataloadvisualizer-value').text()).toBe(
- 'consumption_visualizer.no_data'
- )
+ expect(
+ screen.getByText('consumption_visualizer.no_data')
+ ).toBeInTheDocument()
})
it('case state AGGREGATED_EMPTY', () => {
- const _mockdataLoad = {
- ...mockDataload,
+ const mockDataLoad = {
+ ...baseDataLoad,
state: DataloadState.AGGREGATED_EMPTY,
}
- const wrapper = mount(
+ render(
<DataloadNoValue
- dataload={_mockdataLoad}
+ dataload={mockDataLoad}
fluidType={FluidType.MULTIFLUID}
- setActive={mockSetActive}
+ setActive={jest.fn()}
/>
)
- expect(wrapper.find('.dataloadvisualizer-value').text()).toBe(
- 'consumption_visualizer.no_data'
- )
+ expect(
+ screen.getByText('consumption_visualizer.no_data')
+ ).toBeInTheDocument()
})
})
describe('should render correctly missing data', () => {
it('case state MISSING', () => {
- const _mockdataLoad = { ...mockDataload, state: DataloadState.MISSING }
- const wrapper = mount(
+ const mockDataLoad = { ...baseDataLoad, state: DataloadState.MISSING }
+ render(
<DataloadNoValue
- dataload={_mockdataLoad}
+ dataload={mockDataLoad}
fluidType={FluidType.ELECTRICITY}
- setActive={mockSetActive}
+ setActive={jest.fn()}
/>
)
- expect(wrapper.find('.dataloadvisualizer-content').text()).toBe(
- 'consumption_visualizer.missing_data'
- )
+ expect(
+ screen.getByText('consumption_visualizer.missing_data')
+ ).toBeInTheDocument()
})
it('case state AGGREGATED_HOLE_OR_MISSING', () => {
- const _mockdataLoad = {
- ...mockDataload,
+ const mockDataLoad = {
+ ...baseDataLoad,
state: DataloadState.AGGREGATED_HOLE_OR_MISSING,
}
- const wrapper = mount(
+ render(
<DataloadNoValue
- dataload={_mockdataLoad}
+ dataload={mockDataLoad}
fluidType={FluidType.MULTIFLUID}
- setActive={mockSetActive}
+ setActive={jest.fn()}
/>
)
- expect(wrapper.find('.dataloadvisualizer-content').text()).toBe(
- 'consumption_visualizer.missing_data'
- )
+ expect(
+ screen.getByText('consumption_visualizer.missing_data')
+ ).toBeInTheDocument()
})
})
- it('should call setActive when missing message is clicked', () => {
- const _mockdataLoad = { ...mockDataload, state: DataloadState.MISSING }
- const wrapper = mount(
+ it('should call setActive when missing message is clicked', async () => {
+ const mockSetActive = jest.fn()
+ const mockDataLoad = { ...baseDataLoad, state: DataloadState.MISSING }
+ render(
<DataloadNoValue
- dataload={_mockdataLoad}
+ dataload={mockDataLoad}
fluidType={FluidType.ELECTRICITY}
setActive={mockSetActive}
/>
)
- wrapper.find('.dataloadvisualizer-content').simulate('click')
+ await userEvent.click(screen.getByRole('button'))
expect(mockSetActive).toHaveBeenCalledWith(true)
})
})
diff --git a/src/components/ConsumptionVisualizer/DataloadNoValue.tsx b/src/components/ConsumptionVisualizer/DataloadNoValue.tsx
index 6133a012ded8eb94843dbea17730bed04adfc79b..3c55e9ed03502b456ecf0c5de3a4923ac3c8cb5d 100644
--- a/src/components/ConsumptionVisualizer/DataloadNoValue.tsx
+++ b/src/components/ConsumptionVisualizer/DataloadNoValue.tsx
@@ -1,4 +1,4 @@
-import classNames from 'classnames'
+import { Button } from '@material-ui/core'
import { useI18n } from 'cozy-ui/transpiled/react/I18n'
import { DataloadState, FluidType } from 'enums'
import { Dataload } from 'models'
@@ -64,12 +64,12 @@ const DataloadNoValue = ({
dataload.state === DataloadState.AGGREGATED_HOLE_OR_MISSING
) {
return (
- <div
+ <Button
onClick={handleToggleKonnectionCard}
- className={classNames('dataloadvisualizer-content text-22-normal')}
+ classes={{ root: 'btnText', label: 'text-22-normal' }}
>
{t('consumption_visualizer.missing_data')}
- </div>
+ </Button>
)
}
diff --git a/src/components/ConsumptionVisualizer/DataloadSection.spec.tsx b/src/components/ConsumptionVisualizer/DataloadSection.spec.tsx
index aef6fc33e7a13cfca6e51e8647c945e6ce906d91..073b60d0c07942d6fa2e98f86d65570998ab02cb 100644
--- a/src/components/ConsumptionVisualizer/DataloadSection.spec.tsx
+++ b/src/components/ConsumptionVisualizer/DataloadSection.spec.tsx
@@ -1,7 +1,5 @@
+import { render, screen } from '@testing-library/react'
import { DataloadSectionType, FluidType } from 'enums'
-import { mount } from 'enzyme'
-import toJson from 'enzyme-to-json'
-import { Dataload } from 'models'
import React from 'react'
import { baseDataLoad } from 'tests/__mocks__/chartData.mock'
import DataloadSection from './DataloadSection'
@@ -15,35 +13,31 @@ jest.mock(
() => 'mock-dataloadsectiondetail'
)
-const mockToggleEstimationModal = jest.fn()
-
describe('DataloadSection component', () => {
- const mockDataload: Dataload = baseDataLoad
-
it('should render correctly', () => {
- const wrapper = mount(
+ const { container } = render(
<DataloadSection
- dataload={mockDataload}
+ dataload={baseDataLoad}
fluidType={FluidType.ELECTRICITY}
dataloadSectionType={DataloadSectionType.NO_COMPARE}
- toggleEstimationModal={mockToggleEstimationModal}
+ toggleEstimationModal={jest.fn()}
/>
)
- expect(toJson(wrapper)).toMatchSnapshot()
+ expect(container).toMatchSnapshot()
})
it('should render no_data when dataload value is -1 and section is left', () => {
- const _mockDatalaod = { ...mockDataload, value: -1 }
- const wrapper = mount(
+ const mockDataLoad = { ...baseDataLoad, value: -1 }
+ render(
<DataloadSection
- dataload={_mockDatalaod}
+ dataload={mockDataLoad}
fluidType={FluidType.ELECTRICITY}
dataloadSectionType={DataloadSectionType.LEFT}
- toggleEstimationModal={mockToggleEstimationModal}
+ toggleEstimationModal={jest.fn()}
/>
)
- expect(wrapper.find('.dataloadvisualizer-novalue').text()).toBe(
- 'consumption_visualizer.no_data'
- )
+ expect(
+ screen.getByText('consumption_visualizer.no_data')
+ ).toBeInTheDocument()
})
})
diff --git a/src/components/ConsumptionVisualizer/DataloadSection.tsx b/src/components/ConsumptionVisualizer/DataloadSection.tsx
index 19d7739bdac8e14ee7fd4a8dff7a654131a40c13..16d52ce901cad4382a9606699a12cc0853b53ba8 100644
--- a/src/components/ConsumptionVisualizer/DataloadSection.tsx
+++ b/src/components/ConsumptionVisualizer/DataloadSection.tsx
@@ -39,25 +39,25 @@ const DataloadSection = ({
)
}
+ const isLeft = dataloadSectionType === DataloadSectionType.LEFT
+ const isRight = dataloadSectionType === DataloadSectionType.RIGHT
+ const noCompare = dataloadSectionType === DataloadSectionType.NO_COMPARE
+ const isMulti = fluidType === FluidType.MULTIFLUID
+ const fluidName = getFluidName(fluidType)
+
return (
<div
className={classNames('dataloadvisualizer-section', {
- ['dataloadvisualizer-section-left']:
- dataloadSectionType === DataloadSectionType.LEFT,
- ['dataloadvisualizer-section-right']:
- dataloadSectionType === DataloadSectionType.RIGHT,
+ 'dataloadvisualizer-section-left': isLeft,
+ 'dataloadvisualizer-section-right': isRight,
})}
>
<div
className={classNames('dataloadvisualizer-value', 'text-36-bold', {
- [`${getFluidName(fluidType)}-compare`]:
- dataloadSectionType === DataloadSectionType.LEFT,
- [`${getFluidName(fluidType)}`]:
- dataloadSectionType === DataloadSectionType.NO_COMPARE ||
- dataloadSectionType === DataloadSectionType.RIGHT,
- ['multifluid-compare-color']:
- dataloadSectionType === DataloadSectionType.RIGHT &&
- fluidType === FluidType.MULTIFLUID,
+ [fluidName]: noCompare || isRight,
+ [`${fluidName}-compare`]: isLeft,
+ 'multifluid-compare-color': isRight && isMulti,
+ alignTop: isMulti,
})}
>
<DataloadSectionValue
diff --git a/src/components/ConsumptionVisualizer/DataloadSectionDetail.spec.tsx b/src/components/ConsumptionVisualizer/DataloadSectionDetail.spec.tsx
index 144cbc4d6b1f190b943ee7654f0139a6f7a306aa..3492352f81c088351e053904164c3664b72339f3 100644
--- a/src/components/ConsumptionVisualizer/DataloadSectionDetail.spec.tsx
+++ b/src/components/ConsumptionVisualizer/DataloadSectionDetail.spec.tsx
@@ -1,54 +1,51 @@
+import { render } from '@testing-library/react'
import { DataloadSectionType, DataloadState, FluidType } from 'enums'
-import { mount } from 'enzyme'
-import toJson from 'enzyme-to-json'
import { Dataload } from 'models'
import React from 'react'
import { baseDataLoad } from 'tests/__mocks__/chartData.mock'
import DataloadSectionDetail from './DataloadSectionDetail'
describe('DataloadSectionDetail component', () => {
- const mockDataload: Dataload = baseDataLoad
-
it('should render correctly', () => {
- const wrapper = mount(
+ const { container } = render(
<DataloadSectionDetail
- dataload={mockDataload}
+ dataload={baseDataLoad}
fluidType={FluidType.ELECTRICITY}
dataloadSectionType={DataloadSectionType.NO_COMPARE}
/>
)
- expect(toJson(wrapper)).toMatchSnapshot()
+ expect(container).toMatchSnapshot()
})
it('should not display if multifluid and comparison', () => {
- const wrapper = mount(
+ const { container } = render(
<DataloadSectionDetail
- dataload={mockDataload}
+ dataload={baseDataLoad}
fluidType={FluidType.MULTIFLUID}
dataloadSectionType={DataloadSectionType.RIGHT}
/>
)
- expect(toJson(wrapper)).toMatchSnapshot()
+ expect(container).toMatchSnapshot()
})
it('should not display value details if multifluid, no valueDetail and comparison', () => {
const mockMultiDataload: Dataload = {
- ...mockDataload,
+ ...baseDataLoad,
state: DataloadState.AGGREGATED_EMPTY,
valueDetail: null,
}
- const wrapper = mount(
+ const { container } = render(
<DataloadSectionDetail
dataload={mockMultiDataload}
fluidType={FluidType.MULTIFLUID}
dataloadSectionType={DataloadSectionType.RIGHT}
/>
)
- expect(toJson(wrapper)).toMatchSnapshot()
+ expect(container).toMatchSnapshot()
})
describe('should display value details if multifluid and no comparison', () => {
it('case all valid data', () => {
const mockMultiDataload: Dataload = {
- ...mockDataload,
+ ...baseDataLoad,
state: DataloadState.AGGREGATED_VALID,
valueDetail: [
{ value: 1, state: DataloadState.VALID },
@@ -56,18 +53,18 @@ describe('DataloadSectionDetail component', () => {
{ value: 3, state: DataloadState.VALID },
],
}
- const wrapper = mount(
+ const { container } = render(
<DataloadSectionDetail
dataload={mockMultiDataload}
fluidType={FluidType.MULTIFLUID}
dataloadSectionType={DataloadSectionType.RIGHT}
/>
)
- expect(toJson(wrapper)).toMatchSnapshot()
+ expect(container).toMatchSnapshot()
})
it('case valid and coming data', () => {
const mockMultiDataload: Dataload = {
- ...mockDataload,
+ ...baseDataLoad,
state: DataloadState.AGGREGATED_WITH_COMING,
valueDetail: [
{ value: 1, state: DataloadState.VALID },
@@ -75,18 +72,18 @@ describe('DataloadSectionDetail component', () => {
{ value: 3, state: DataloadState.VALID },
],
}
- const wrapper = mount(
+ const { container } = render(
<DataloadSectionDetail
dataload={mockMultiDataload}
fluidType={FluidType.MULTIFLUID}
dataloadSectionType={DataloadSectionType.RIGHT}
/>
)
- expect(toJson(wrapper)).toMatchSnapshot()
+ expect(container).toMatchSnapshot()
})
it('case valid and missing data', () => {
const mockMultiDataload: Dataload = {
- ...mockDataload,
+ ...baseDataLoad,
state: DataloadState.AGGREGATED_WITH_HOLE_OR_MISSING,
valueDetail: [
{ value: 1, state: DataloadState.VALID },
@@ -94,18 +91,18 @@ describe('DataloadSectionDetail component', () => {
{ value: 3, state: DataloadState.VALID },
],
}
- const wrapper = mount(
+ const { container } = render(
<DataloadSectionDetail
dataload={mockMultiDataload}
fluidType={FluidType.MULTIFLUID}
dataloadSectionType={DataloadSectionType.RIGHT}
/>
)
- expect(toJson(wrapper)).toMatchSnapshot()
+ expect(container).toMatchSnapshot()
})
it('case valid and hole data', () => {
const mockMultiDataload: Dataload = {
- ...mockDataload,
+ ...baseDataLoad,
state: DataloadState.AGGREGATED_WITH_HOLE_OR_MISSING,
valueDetail: [
{ value: 1, state: DataloadState.VALID },
@@ -113,14 +110,14 @@ describe('DataloadSectionDetail component', () => {
{ value: 3, state: DataloadState.VALID },
],
}
- const wrapper = mount(
+ const { container } = render(
<DataloadSectionDetail
dataload={mockMultiDataload}
fluidType={FluidType.MULTIFLUID}
dataloadSectionType={DataloadSectionType.RIGHT}
/>
)
- expect(toJson(wrapper)).toMatchSnapshot()
+ expect(container).toMatchSnapshot()
})
})
})
diff --git a/src/components/ConsumptionVisualizer/DataloadSectionDetail.tsx b/src/components/ConsumptionVisualizer/DataloadSectionDetail.tsx
index 18a607e312cae5990e94fd6c33cd4d02c31e042a..91ad2308e6373f01ab92e4b54bf6bec977856b1b 100644
--- a/src/components/ConsumptionVisualizer/DataloadSectionDetail.tsx
+++ b/src/components/ConsumptionVisualizer/DataloadSectionDetail.tsx
@@ -31,6 +31,9 @@ const DataloadSectionDetail = ({
const { t } = useI18n()
const converterService = new ConverterService()
+ const isMulti = fluidType === FluidType.MULTIFLUID
+ const isCompare = dataloadSectionType === DataloadSectionType.NO_COMPARE
+
const emitNavEvent = useCallback(
async (targetPage: string) => {
await UsageEventService.addEvent(client, {
@@ -41,7 +44,7 @@ const DataloadSectionDetail = ({
[client]
)
- if (fluidType !== FluidType.MULTIFLUID) {
+ if (!isMulti) {
return (
<div
className={classNames('dataloadvisualizer-euro text-16-normal', {
@@ -62,38 +65,33 @@ const DataloadSectionDetail = ({
)
}
- if (
- fluidType === FluidType.MULTIFLUID &&
- dataloadSectionType !== DataloadSectionType.NO_COMPARE
- ) {
+ if (isMulti && !isCompare) {
return <div className="dataloadvisualizer-euro text-16-normal" />
}
- if (
- fluidType === FluidType.MULTIFLUID &&
- dataloadSectionType === DataloadSectionType.NO_COMPARE &&
- dataload.valueDetail
- ) {
+ if (isMulti && isCompare && dataload.valueDetail) {
return (
<div className="dataloadvisualizer-euro text-16-normal">
- {dataload.valueDetail.map((valueDetail, index) => {
+ {dataload.valueDetail.map((value, index) => {
+ const isValid = value.state === DataloadState.VALID
+ const isUpcoming = value.state === DataloadState.UPCOMING
+ const isComing = value.state === DataloadState.COMING
+ const isEmpty = value.state === DataloadState.EMPTY
+ const isHole = value.state === DataloadState.HOLE
+ const isMissing = value.state === DataloadState.MISSING
return (
<NavLink
- key={index}
+ key={FluidType[index]}
to={`/consumption/${FluidType[index].toLowerCase()}`}
className="dataloadvisualizer-euro-link"
+ onClick={() => emitNavEvent(FluidType[index].toLowerCase())}
>
<div
className={classNames('dataloadvisualizer-euro-fluid', {
- [` ${FluidType[index].toLowerCase()}`]:
- valueDetail.state === DataloadState.VALID ||
- valueDetail.state === DataloadState.UPCOMING ||
- valueDetail.state === DataloadState.COMING ||
- valueDetail.state === DataloadState.EMPTY ||
- valueDetail.state === DataloadState.HOLE,
- [` error`]: valueDetail.state === DataloadState.MISSING,
+ [FluidType[index].toLowerCase()]:
+ isValid || isUpcoming || isComing || isEmpty || isHole,
+ error: isMissing,
})}
- onClick={() => emitNavEvent(FluidType[index].toLowerCase())}
>
<Icon
className="dataloadvisualizer-euro-fluid-icon"
@@ -101,16 +99,12 @@ const DataloadSectionDetail = ({
size={22}
/>
<div>
- {valueDetail.state === DataloadState.VALID &&
- `${formatNumberValues(valueDetail.value)} €`}
- {(valueDetail.state === DataloadState.UPCOMING ||
- valueDetail.state === DataloadState.COMING) &&
+ {isValid && `${formatNumberValues(value.value)} €`}
+ {(isUpcoming || isComing) &&
t('consumption_visualizer.data_to_come')}
- {(valueDetail.state === DataloadState.EMPTY ||
- valueDetail.state === DataloadState.HOLE) &&
+ {(isEmpty || isHole) &&
t('consumption_visualizer.data_empty')}
- {valueDetail.state === DataloadState.MISSING &&
- t('consumption_visualizer.aie')}
+ {isMissing && t('consumption_visualizer.aie')}
</div>
</div>
</NavLink>
diff --git a/src/components/ConsumptionVisualizer/DataloadSectionValue.spec.tsx b/src/components/ConsumptionVisualizer/DataloadSectionValue.spec.tsx
index f29778adad0504ebdeef92f847779da38c684715..4b9d037bbc525929eaa3ba0fa2b1cf77b3d9cdb0 100644
--- a/src/components/ConsumptionVisualizer/DataloadSectionValue.spec.tsx
+++ b/src/components/ConsumptionVisualizer/DataloadSectionValue.spec.tsx
@@ -1,6 +1,6 @@
+import { render, screen } from '@testing-library/react'
+import { userEvent } from '@testing-library/user-event'
import { DataloadSectionType, FluidType } from 'enums'
-import { mount } from 'enzyme'
-import toJson from 'enzyme-to-json'
import { Dataload } from 'models'
import React from 'react'
import {
@@ -12,99 +12,83 @@ import DataloadSectionValue from './DataloadSectionValue'
const mockToggleEstimationModal = jest.fn()
describe('DataloadSectionValue component', () => {
- const mockDataload: Dataload = baseDataLoad
- const mockMultiDataload: Dataload = baseMultiFluidDataLoad
it('should render correctly', () => {
- const wrapper = mount(
+ const { container } = render(
<DataloadSectionValue
- dataload={mockDataload}
+ dataload={baseDataLoad}
fluidType={FluidType.ELECTRICITY}
dataloadSectionType={DataloadSectionType.NO_COMPARE}
toggleEstimationModal={mockToggleEstimationModal}
/>
)
- expect(toJson(wrapper)).toMatchSnapshot()
+ expect(container).toMatchSnapshot()
})
- describe('case Singlefluid', () => {
+ describe('case SingleFluid', () => {
it('should render with unit when value < 1000', () => {
- const wrapper = mount(
+ render(
<DataloadSectionValue
- dataload={mockDataload}
+ dataload={baseDataLoad}
fluidType={FluidType.ELECTRICITY}
dataloadSectionType={DataloadSectionType.NO_COMPARE}
toggleEstimationModal={mockToggleEstimationModal}
/>
)
- expect(
- wrapper.find(DataloadSectionValue).first().contains('12,00')
- ).toBeTruthy()
- expect(wrapper.find('.text-18-normal').text()).toBe(
- 'FLUID.ELECTRICITY.UNIT'
- )
+ expect(screen.getByText('12,00')).toBeInTheDocument()
+ expect(screen.getByText('FLUID.ELECTRICITY.UNIT')).toBeInTheDocument()
})
it('should render with mega unit when value >= 1000', () => {
- const _mockDatalaod: Dataload = { ...mockDataload, value: 1000 }
- const wrapper = mount(
+ const mockDataLoad: Dataload = { ...baseDataLoad, value: 1000 }
+ render(
<DataloadSectionValue
- dataload={_mockDatalaod}
+ dataload={mockDataLoad}
fluidType={FluidType.ELECTRICITY}
dataloadSectionType={DataloadSectionType.NO_COMPARE}
toggleEstimationModal={mockToggleEstimationModal}
/>
)
- expect(
- wrapper.find(DataloadSectionValue).first().contains('1,00')
- ).toBeTruthy()
- expect(wrapper.find('.text-18-normal').text()).toBe(
- 'FLUID.ELECTRICITY.MEGAUNIT'
- )
+ expect(screen.getByText('1,00')).toBeInTheDocument()
+ expect(screen.getByText('FLUID.ELECTRICITY.MEGAUNIT')).toBeInTheDocument()
})
})
describe('case Multifluid', () => {
it('should render correctly when comparison', () => {
- const wrapper = mount(
+ render(
<DataloadSectionValue
- dataload={mockMultiDataload}
+ dataload={baseMultiFluidDataLoad}
fluidType={FluidType.MULTIFLUID}
dataloadSectionType={DataloadSectionType.RIGHT}
toggleEstimationModal={mockToggleEstimationModal}
/>
)
- expect(
- wrapper.find(DataloadSectionValue).first().contains('12,00')
- ).toBeTruthy()
- expect(wrapper.find('.euroUnit').exists()).toBeTruthy()
+ expect(screen.getByText('12,00')).toBeInTheDocument()
+ expect(screen.getByText('FLUID.MULTIFLUID.UNIT')).toBeInTheDocument()
})
it('should render correctly with a estimated link when no comparison', () => {
- const wrapper = mount(
+ render(
<DataloadSectionValue
- dataload={mockMultiDataload}
+ dataload={baseMultiFluidDataLoad}
fluidType={FluidType.MULTIFLUID}
dataloadSectionType={DataloadSectionType.NO_COMPARE}
toggleEstimationModal={mockToggleEstimationModal}
/>
)
+ expect(screen.getByText('12,00')).toBeInTheDocument()
expect(
- wrapper.find(DataloadSectionValue).first().contains('12,00')
- ).toBeTruthy()
- expect(wrapper.find('.euroUnit').exists()).toBeTruthy()
- expect(wrapper.find('.estimated').exists()).toBeTruthy()
- expect(wrapper.find('.estimated').text()).toBe(
- 'consumption_visualizer.estimated'
- )
+ screen.getByText('consumption_visualizer.estimated')
+ ).toBeInTheDocument()
})
- it('should call toggleEstimationModal when click on the estimated link', () => {
- const wrapper = mount(
+ it('should call toggleEstimationModal when click on the estimated link', async () => {
+ render(
<DataloadSectionValue
- dataload={mockMultiDataload}
+ dataload={baseMultiFluidDataLoad}
fluidType={FluidType.MULTIFLUID}
dataloadSectionType={DataloadSectionType.NO_COMPARE}
toggleEstimationModal={mockToggleEstimationModal}
/>
)
- wrapper.find('.estimated').simulate('click')
+ await userEvent.click(screen.getByRole('button'))
expect(mockToggleEstimationModal).toHaveBeenCalled()
})
})
diff --git a/src/components/ConsumptionVisualizer/DataloadSectionValue.tsx b/src/components/ConsumptionVisualizer/DataloadSectionValue.tsx
index 649f993e2221af0e9a3aa7b5ae3a9f38e90fbf7a..cfb77c138b854bcbd7d459aea4ffd44d84351c1a 100644
--- a/src/components/ConsumptionVisualizer/DataloadSectionValue.tsx
+++ b/src/components/ConsumptionVisualizer/DataloadSectionValue.tsx
@@ -1,3 +1,4 @@
+import { Button } from '@material-ui/core'
import { useI18n } from 'cozy-ui/transpiled/react/I18n'
import { DataloadSectionType, FluidType } from 'enums'
import { Dataload } from 'models'
@@ -23,16 +24,20 @@ const DataloadSectionValue = ({
return (
<>
{formatNumberValues(dataload.value)}
- <span className="text-18-normal euroUnit">
+ <div className="text-18-normal euroUnit">
{t(`FLUID.${FluidType[fluidType]}.UNIT`)}
- </span>
+ </div>
{dataloadSectionType === DataloadSectionType.NO_COMPARE && (
- <span
- className="text-14-normal estimated"
+ <Button
+ classes={{
+ root: 'btnText',
+ label: 'text-14-normal',
+ }}
+ size="small"
onClick={toggleEstimationModal}
>
{t('consumption_visualizer.estimated')}
- </span>
+ </Button>
)}
</>
)
diff --git a/src/components/ConsumptionVisualizer/EstimatedConsumptionModal.spec.tsx b/src/components/ConsumptionVisualizer/EstimatedConsumptionModal.spec.tsx
index b7e0256198e84b91442a3e4a8a8a911d0c760cff..a362aa740509e42e6792918e7353cada49f2e520 100644
--- a/src/components/ConsumptionVisualizer/EstimatedConsumptionModal.spec.tsx
+++ b/src/components/ConsumptionVisualizer/EstimatedConsumptionModal.spec.tsx
@@ -1,5 +1,4 @@
-import { mount } from 'enzyme'
-import toJson from 'enzyme-to-json'
+import { render } from '@testing-library/react'
import React from 'react'
import EstimatedConsumptionModal from './EstimatedConsumptionModal'
@@ -12,9 +11,9 @@ jest.mock('services/fluidsPrices.service', () => {
describe('EstimatedConsumptionModal component', () => {
it('should render correctly', async () => {
- const wrapper = mount(
+ const { baseElement } = render(
<EstimatedConsumptionModal open={true} handleCloseClick={jest.fn()} />
)
- expect(toJson(wrapper)).toMatchSnapshot()
+ expect(baseElement).toMatchSnapshot()
})
})
diff --git a/src/components/ConsumptionVisualizer/InfoDataConsumptionVisualizer.spec.tsx b/src/components/ConsumptionVisualizer/InfoDataConsumptionVisualizer.spec.tsx
index 820c51c87f34f60aae8393d871386b55e919efca..5c2018b0bdf54affb32cc73edda5c72f6954ecb3 100644
--- a/src/components/ConsumptionVisualizer/InfoDataConsumptionVisualizer.spec.tsx
+++ b/src/components/ConsumptionVisualizer/InfoDataConsumptionVisualizer.spec.tsx
@@ -1,15 +1,13 @@
+import { render, screen } from '@testing-library/react'
+import { userEvent } from '@testing-library/user-event'
import { DataloadState, FluidType } from 'enums'
-import { mount } from 'enzyme'
-import toJson from 'enzyme-to-json'
import { DateTime } from 'luxon'
-import { Dataload } from 'models'
import React from 'react'
import { Provider } from 'react-redux'
import * as storeHooks from 'store/hooks'
import { baseDataLoad } from 'tests/__mocks__/chartData.mock'
import { createMockEcolyoStore } from 'tests/__mocks__/store'
import InfoDataConsumptionVisualizer from './InfoDataConsumptionVisualizer'
-import NoDataModal from './NoDataModal'
const mockAppDispatch = jest.spyOn(storeHooks, 'useAppDispatch')
@@ -17,206 +15,206 @@ describe('InfoDataConsumptionVisualizer component', () => {
const mockLastDataDate = DateTime.fromISO('2020-10-01T00:00:00.000Z', {
zone: 'utc',
})
- const mockDataload: Dataload = baseDataLoad
const store = createMockEcolyoStore()
it('should render correctly when data valid', () => {
- const wrapper = mount(
+ const mockDataLoad = { ...baseDataLoad, state: DataloadState.UPCOMING }
+ const { container } = render(
<Provider store={store}>
<InfoDataConsumptionVisualizer
- dataload={mockDataload}
+ dataload={mockDataLoad}
fluidType={FluidType.ELECTRICITY}
lastDataDate={mockLastDataDate}
/>
</Provider>
)
- expect(toJson(wrapper)).toMatchSnapshot()
+ expect(container).toMatchSnapshot()
})
describe('should render correctly consumption_visualizer.last_available_data', () => {
- it('case state MISSING', () => {
- const _mockdataLoad = { ...mockDataload, state: DataloadState.MISSING }
- const wrapper = mount(
+ it('case state MISSING', async () => {
+ const mockDataLoad = { ...baseDataLoad, state: DataloadState.MISSING }
+ render(
<Provider store={store}>
<InfoDataConsumptionVisualizer
- dataload={_mockdataLoad}
+ dataload={mockDataLoad}
fluidType={FluidType.ELECTRICITY}
lastDataDate={mockLastDataDate}
/>
</Provider>
)
- expect(wrapper.find('span').text()).toBe(
- 'consumption_visualizer.last_available_data'
- )
+ expect(
+ await screen.findByText('consumption_visualizer.last_available_data')
+ ).toBeInTheDocument()
})
- it('case state UPCOMING', () => {
- const _mockdataLoad = { ...mockDataload, state: DataloadState.UPCOMING }
- const wrapper = mount(
+ it('case state UPCOMING', async () => {
+ const mockDataLoad = { ...baseDataLoad, state: DataloadState.UPCOMING }
+ render(
<Provider store={store}>
<InfoDataConsumptionVisualizer
- dataload={_mockdataLoad}
+ dataload={mockDataLoad}
fluidType={FluidType.ELECTRICITY}
lastDataDate={mockLastDataDate}
/>
</Provider>
)
- expect(wrapper.find('span').text()).toBe(
- 'consumption_visualizer.last_available_data'
- )
+ expect(
+ await screen.findByText('consumption_visualizer.last_available_data')
+ ).toBeInTheDocument()
})
- it('case state COMING', () => {
- const _mockdataLoad = {
- ...mockDataload,
+ it('case state COMING', async () => {
+ const mockDataLoad = {
+ ...baseDataLoad,
state: DataloadState.COMING,
}
- const wrapper = mount(
+ render(
<Provider store={store}>
<InfoDataConsumptionVisualizer
- dataload={_mockdataLoad}
+ dataload={mockDataLoad}
fluidType={FluidType.ELECTRICITY}
lastDataDate={mockLastDataDate}
/>
</Provider>
)
- expect(wrapper.find('span').text()).toBe(
- 'consumption_visualizer.last_available_data'
- )
+ expect(
+ await screen.findByText('consumption_visualizer.last_available_data')
+ ).toBeInTheDocument()
})
- it('case state AGGREGATED_HOLE_OR_MISSING', () => {
- const _mockdataLoad = {
- ...mockDataload,
+ it('case state AGGREGATED_HOLE_OR_MISSING', async () => {
+ const mockDataLoad = {
+ ...baseDataLoad,
state: DataloadState.AGGREGATED_HOLE_OR_MISSING,
}
- const wrapper = mount(
+ render(
<Provider store={store}>
<InfoDataConsumptionVisualizer
- dataload={_mockdataLoad}
+ dataload={mockDataLoad}
fluidType={FluidType.MULTIFLUID}
lastDataDate={mockLastDataDate}
/>
</Provider>
)
- expect(wrapper.find('span').text()).toBe(
- 'consumption_visualizer.last_valid_data_multi'
- )
+ expect(
+ await screen.findByText('consumption_visualizer.last_valid_data_multi')
+ ).toBeInTheDocument()
})
- it('case state AGGREGATED_WITH_HOLE_OR_MISSING', () => {
- const _mockdataLoad = {
- ...mockDataload,
+ it('case state AGGREGATED_WITH_HOLE_OR_MISSING', async () => {
+ const mockDataLoad = {
+ ...baseDataLoad,
state: DataloadState.AGGREGATED_WITH_HOLE_OR_MISSING,
}
- const wrapper = mount(
+ render(
<Provider store={store}>
<InfoDataConsumptionVisualizer
- dataload={_mockdataLoad}
+ dataload={mockDataLoad}
fluidType={FluidType.MULTIFLUID}
lastDataDate={mockLastDataDate}
/>
</Provider>
)
- expect(wrapper.find('span').text()).toBe(
- 'consumption_visualizer.last_valid_data_multi'
- )
+ expect(
+ await screen.findByText('consumption_visualizer.last_valid_data_multi')
+ ).toBeInTheDocument()
})
- it('case state AGGREGATED_COMING', () => {
- const _mockdataLoad = {
- ...mockDataload,
+ it('case state AGGREGATED_COMING', async () => {
+ const mockDataLoad = {
+ ...baseDataLoad,
state: DataloadState.AGGREGATED_COMING,
}
- const wrapper = mount(
+ render(
<Provider store={store}>
<InfoDataConsumptionVisualizer
- dataload={_mockdataLoad}
+ dataload={mockDataLoad}
fluidType={FluidType.MULTIFLUID}
lastDataDate={mockLastDataDate}
/>
</Provider>
)
- expect(wrapper.find('span').text()).toBe(
- 'consumption_visualizer.last_valid_data_multi'
- )
+ expect(
+ await screen.findByText('consumption_visualizer.last_valid_data_multi')
+ ).toBeInTheDocument()
})
})
describe('should render correctly with why_no_data', () => {
- it('case state EMPTY', () => {
- const _mockdataLoad = { ...mockDataload, state: DataloadState.EMPTY }
- const wrapper = mount(
+ it('case state EMPTY', async () => {
+ const mockDataLoad = { ...baseDataLoad, state: DataloadState.EMPTY }
+ render(
<Provider store={store}>
<InfoDataConsumptionVisualizer
- dataload={_mockdataLoad}
+ dataload={mockDataLoad}
fluidType={FluidType.ELECTRICITY}
lastDataDate={mockLastDataDate}
/>
</Provider>
)
- expect(wrapper.find('span').text()).toBe(
- 'consumption_visualizer.why_no_data'
- )
+ expect(
+ await screen.findByText('consumption_visualizer.why_no_data')
+ ).toBeInTheDocument()
})
- it('case state HOLE', () => {
- const _mockdataLoad = { ...mockDataload, state: DataloadState.HOLE }
- const wrapper = mount(
+ it('case state HOLE', async () => {
+ const mockDataLoad = { ...baseDataLoad, state: DataloadState.HOLE }
+ render(
<Provider store={store}>
<InfoDataConsumptionVisualizer
- dataload={_mockdataLoad}
+ dataload={mockDataLoad}
fluidType={FluidType.ELECTRICITY}
lastDataDate={mockLastDataDate}
/>
</Provider>
)
- expect(wrapper.find('span').text()).toBe(
- 'consumption_visualizer.why_no_data'
- )
+ expect(
+ await screen.findByText('consumption_visualizer.why_no_data')
+ ).toBeInTheDocument()
})
- it('case state AGGREGATED_EMPTY', () => {
- const _mockdataLoad = {
- ...mockDataload,
+ it('case state AGGREGATED_EMPTY', async () => {
+ const mockDataLoad = {
+ ...baseDataLoad,
state: DataloadState.AGGREGATED_EMPTY,
}
- const wrapper = mount(
+ render(
<Provider store={store}>
<InfoDataConsumptionVisualizer
- dataload={_mockdataLoad}
+ dataload={mockDataLoad}
fluidType={FluidType.MULTIFLUID}
lastDataDate={mockLastDataDate}
/>
</Provider>
)
- expect(wrapper.find('span').text()).toBe(
- 'consumption_visualizer.why_no_data'
- )
+ expect(
+ await screen.findByText('consumption_visualizer.why_no_data')
+ ).toBeInTheDocument()
})
})
it('should click on last valid data date and move to it', async () => {
- const _mockdataLoad = { ...mockDataload, state: DataloadState.EMPTY }
- const wrapper = mount(
+ const mockDataLoad = { ...baseDataLoad, state: DataloadState.EMPTY }
+ render(
<Provider store={store}>
<InfoDataConsumptionVisualizer
- dataload={_mockdataLoad}
+ dataload={mockDataLoad}
fluidType={FluidType.ELECTRICITY}
lastDataDate={mockLastDataDate}
/>
</Provider>
)
- wrapper.find('.error-line').simulate('click')
- expect(wrapper.find(NoDataModal).prop('open')).toBeTruthy()
+ await userEvent.click(screen.getByRole('button'))
+ expect(screen.getByRole('dialog')).toBeInTheDocument()
})
it('should click to display NoDataModal', async () => {
- const _mockdataLoad = { ...mockDataload, state: DataloadState.EMPTY }
- const wrapper = mount(
+ const mockDataLoad = { ...baseDataLoad, state: DataloadState.EMPTY }
+ render(
<Provider store={store}>
<InfoDataConsumptionVisualizer
- dataload={_mockdataLoad}
+ dataload={mockDataLoad}
fluidType={FluidType.ELECTRICITY}
lastDataDate={mockLastDataDate}
/>
</Provider>
)
- wrapper.find('.error-line').simulate('click')
+ await userEvent.click(screen.getByRole('button'))
expect(mockAppDispatch).toHaveBeenCalled()
})
})
diff --git a/src/components/ConsumptionVisualizer/InfoDataConsumptionVisualizer.tsx b/src/components/ConsumptionVisualizer/InfoDataConsumptionVisualizer.tsx
index 27968b8c50078c589e374fe34b5bea7fe07eb02d..f88a939c5fd228261016f74c02f0c3a674a14e70 100644
--- a/src/components/ConsumptionVisualizer/InfoDataConsumptionVisualizer.tsx
+++ b/src/components/ConsumptionVisualizer/InfoDataConsumptionVisualizer.tsx
@@ -1,3 +1,4 @@
+import { Button } from '@material-ui/core'
import { useI18n } from 'cozy-ui/transpiled/react/I18n'
import { DataloadState, FluidType } from 'enums'
import { DateTime } from 'luxon'
@@ -23,16 +24,16 @@ const InfoDataConsumptionVisualizer = ({
const { t } = useI18n()
const dispatch = useAppDispatch()
const { currentTimeStep } = useAppSelector(state => state.ecolyo.chart)
- const [openNodataModal, setopenNodataModal] = useState<boolean>(false)
+ const [openNoDataModal, setOpenNoDataModal] = useState<boolean>(false)
const toggleNoDataModal = useCallback(() => {
- setopenNodataModal(prev => !prev)
+ setOpenNoDataModal(prev => !prev)
}, [])
const moveToDate = () => {
if (lastDataDate) {
const dateChartService = new DateChartService()
- const updatedIndex: number = dateChartService.defineDateIndex(
+ const updatedIndex = dateChartService.defineDateIndex(
currentTimeStep,
lastDataDate
)
@@ -54,18 +55,16 @@ const InfoDataConsumptionVisualizer = ({
dataload.state === DataloadState.AGGREGATED_COMING
) {
const lastDate = lastDataDate ? lastDataDate.toFormat("dd'/'MM'/'yy") : '-'
+ const key =
+ fluidType === FluidType.MULTIFLUID
+ ? 'last_valid_data_multi'
+ : 'last_available_data'
return (
- <div onClick={() => moveToDate()} className="error-line">
- <span className="text-16-bold underlined-error">
- {fluidType === FluidType.MULTIFLUID
- ? t('consumption_visualizer.last_valid_data_multi', {
- date: lastDate,
- })
- : t('consumption_visualizer.last_available_data', {
- date: lastDate,
- })}
- </span>
- </div>
+ <Button className="btnText" onClick={moveToDate}>
+ {t(`consumption_visualizer.${key}`, {
+ date: lastDate,
+ })}
+ </Button>
)
}
@@ -76,13 +75,13 @@ const InfoDataConsumptionVisualizer = ({
) {
return (
<>
- <div className="error-line" onClick={toggleNoDataModal}>
+ <Button className="btnText" onClick={toggleNoDataModal}>
<span className="text-16-normal underlined-error">
{t('consumption_visualizer.why_no_data')}
</span>
- </div>
+ </Button>
<NoDataModal
- open={openNodataModal}
+ open={openNoDataModal}
handleCloseClick={toggleNoDataModal}
/>
</>
diff --git a/src/components/ConsumptionVisualizer/NoDataModal.spec.tsx b/src/components/ConsumptionVisualizer/NoDataModal.spec.tsx
index 3f79b27a926a75fb72caf145534616e1c18385fb..c9ff69e6525aa1d2e4a0dbf18c4f52017af31b9c 100644
--- a/src/components/ConsumptionVisualizer/NoDataModal.spec.tsx
+++ b/src/components/ConsumptionVisualizer/NoDataModal.spec.tsx
@@ -1,13 +1,12 @@
-import { mount } from 'enzyme'
-import toJson from 'enzyme-to-json'
+import { render } from '@testing-library/react'
import React from 'react'
import NoDataModal from './NoDataModal'
describe('NoDataModal component', () => {
it('should render correctly', async () => {
- const wrapper = mount(
+ const { baseElement } = render(
<NoDataModal open={true} handleCloseClick={jest.fn()} />
)
- expect(toJson(wrapper)).toMatchSnapshot()
+ expect(baseElement).toMatchSnapshot()
})
})
diff --git a/src/components/ConsumptionVisualizer/NoDataModal.tsx b/src/components/ConsumptionVisualizer/NoDataModal.tsx
index 964bccfd787ee26252643056c3d339a3537f0884..8462aa25dbfde8220f91859007fa9c8b8dc50d33 100644
--- a/src/components/ConsumptionVisualizer/NoDataModal.tsx
+++ b/src/components/ConsumptionVisualizer/NoDataModal.tsx
@@ -55,10 +55,7 @@ const NoDataModal = ({ open, handleCloseClick }: NoDataModalProps) => {
<Button
aria-label={t('ecogesture_info_modal.button_close')}
onClick={handleCloseClick}
- classes={{
- root: 'btn-highlight',
- label: 'text-16-bold',
- }}
+ className="btnPrimary"
>
{t('ecogesture_info_modal.button_close')}
</Button>
diff --git a/src/components/ConsumptionVisualizer/__snapshots__/DataloadConsumptionVisualizer.spec.tsx.snap b/src/components/ConsumptionVisualizer/__snapshots__/DataloadConsumptionVisualizer.spec.tsx.snap
index b4d99a41bedd42fec249565c4f81d93a3ba58130..d6b5dfbc129dd95076aceeb30e40b708302778d1 100644
--- a/src/components/ConsumptionVisualizer/__snapshots__/DataloadConsumptionVisualizer.spec.tsx.snap
+++ b/src/components/ConsumptionVisualizer/__snapshots__/DataloadConsumptionVisualizer.spec.tsx.snap
@@ -1,110 +1,36 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Dataload consumption visualizer component should render with single fluid 1`] = `
-<Provider
- store={
- Object {
- "clearActions": [Function],
- "dispatch": [Function],
- "getActions": [Function],
- "getState": [Function],
- "replaceReducer": [Function],
- "subscribe": [Function],
- }
- }
->
- <DataloadConsumptionVisualizer
- compareDataload={
- Object {
- "date": "2021-09-23T00:00:00.000Z",
- "state": "VALID",
- "value": 12,
- "valueDetail": null,
- }
- }
- dataload={
- Object {
- "date": "2021-09-23T00:00:00.000Z",
- "state": "VALID",
- "value": 12,
- "valueDetail": null,
- }
- }
- fluidType={0}
- setActive={[MockFunction]}
+<div>
+ <div
+ class="dataloadvisualizer-root"
>
<div
- className="dataloadvisualizer-root"
+ class="dataloadvisualizer-content"
>
<div
- className="dataloadvisualizer-content"
+ class="dataloadvisualizer-section"
>
- <DataloadSection
- dataload={
- Object {
- "date": "2021-09-23T00:00:00.000Z",
- "state": "VALID",
- "value": 12,
- "valueDetail": null,
- }
- }
- dataloadSectionType="NO_COMPARE"
- fluidType={0}
- toggleEstimationModal={[Function]}
+ <div
+ class="dataloadvisualizer-value text-36-bold electricity"
>
- <div
- className="dataloadvisualizer-section"
+ 12,00
+ <span
+ class="text-18-normal"
>
- <div
- className="dataloadvisualizer-value text-36-bold electricity"
- >
- <DataloadSectionValue
- dataload={
- Object {
- "date": "2021-09-23T00:00:00.000Z",
- "state": "VALID",
- "value": 12,
- "valueDetail": null,
- }
- }
- dataloadSectionType="NO_COMPARE"
- fluidType={0}
- toggleEstimationModal={[Function]}
- >
- 12,00
- <span
- className="text-18-normal"
- >
- FLUID.ELECTRICITY.UNIT
- </span>
- </DataloadSectionValue>
- </div>
- <DataloadSectionDetail
- dataload={
- Object {
- "date": "2021-09-23T00:00:00.000Z",
- "state": "VALID",
- "value": 12,
- "valueDetail": null,
- }
- }
- dataloadSectionType="NO_COMPARE"
- fluidType={0}
- >
- <div
- className="dataloadvisualizer-euro text-16-normal electricity"
- >
- 2,09 €
- </div>
- </DataloadSectionDetail>
- </div>
- </DataloadSection>
+ FLUID.ELECTRICITY.UNIT
+ </span>
+ </div>
+ <div
+ class="dataloadvisualizer-euro text-16-normal electricity"
+ >
+ 2,09 €
+ </div>
</div>
- <mock-EstimatedConsumptionModal
- handleCloseClick={[Function]}
- open={false}
- />
</div>
- </DataloadConsumptionVisualizer>
-</Provider>
+ <mock-estimatedconsumptionmodal
+ open="false"
+ />
+ </div>
+</div>
`;
diff --git a/src/components/ConsumptionVisualizer/__snapshots__/DataloadNoValue.spec.tsx.snap b/src/components/ConsumptionVisualizer/__snapshots__/DataloadNoValue.spec.tsx.snap
index e70438172e75594f67fc1bfd8b2a592df5b78e1f..07fe03fbf1a4708328ccff0e2d3d065b6a325f60 100644
--- a/src/components/ConsumptionVisualizer/__snapshots__/DataloadNoValue.spec.tsx.snap
+++ b/src/components/ConsumptionVisualizer/__snapshots__/DataloadNoValue.spec.tsx.snap
@@ -1,30 +1,19 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`DataloadNoValue component should render correctly 1`] = `
-<DataloadNoValue
- dataload={
- Object {
- "date": "2021-09-23T00:00:00.000Z",
- "state": "VALID",
- "value": 12,
- "valueDetail": null,
- }
- }
- fluidType={0}
- setActive={[MockFunction]}
->
+<div>
<div
- className="dataloadvisualizer-content text-22-normal"
+ class="dataloadvisualizer-content text-22-normal"
>
<div
- className="dataloadvisualizer-section"
+ class="dataloadvisualizer-section"
>
<div
- className="dataloadvisualizer-value electricity upper to-come"
+ class="dataloadvisualizer-value electricity upper to-come"
>
consumption_visualizer.data_to_come
</div>
</div>
</div>
-</DataloadNoValue>
+</div>
`;
diff --git a/src/components/ConsumptionVisualizer/__snapshots__/DataloadSection.spec.tsx.snap b/src/components/ConsumptionVisualizer/__snapshots__/DataloadSection.spec.tsx.snap
index 325b7cc8616a4a6658bc4675860cc86b99c37c9f..46f81e81efde54fe0b8f5950427f45535cc5c8e5 100644
--- a/src/components/ConsumptionVisualizer/__snapshots__/DataloadSection.spec.tsx.snap
+++ b/src/components/ConsumptionVisualizer/__snapshots__/DataloadSection.spec.tsx.snap
@@ -1,51 +1,24 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`DataloadSection component should render correctly 1`] = `
-<DataloadSection
- dataload={
- Object {
- "date": "2021-09-23T00:00:00.000Z",
- "state": "VALID",
- "value": 12,
- "valueDetail": null,
- }
- }
- dataloadSectionType="NO_COMPARE"
- fluidType={0}
- toggleEstimationModal={[MockFunction]}
->
+<div>
<div
- className="dataloadvisualizer-section"
+ class="dataloadvisualizer-section"
>
<div
- className="dataloadvisualizer-value text-36-bold electricity"
+ class="dataloadvisualizer-value text-36-bold electricity"
>
<mock-dataloadsectionvalue
- dataload={
- Object {
- "date": "2021-09-23T00:00:00.000Z",
- "state": "VALID",
- "value": 12,
- "valueDetail": null,
- }
- }
- dataloadSectionType="NO_COMPARE"
- fluidType={0}
- toggleEstimationModal={[MockFunction]}
+ dataload="[object Object]"
+ dataloadsectiontype="NO_COMPARE"
+ fluidtype="0"
/>
</div>
<mock-dataloadsectiondetail
- dataload={
- Object {
- "date": "2021-09-23T00:00:00.000Z",
- "state": "VALID",
- "value": 12,
- "valueDetail": null,
- }
- }
- dataloadSectionType="NO_COMPARE"
- fluidType={0}
+ dataload="[object Object]"
+ dataloadsectiontype="NO_COMPARE"
+ fluidtype="0"
/>
</div>
-</DataloadSection>
+</div>
`;
diff --git a/src/components/ConsumptionVisualizer/__snapshots__/DataloadSectionDetail.spec.tsx.snap b/src/components/ConsumptionVisualizer/__snapshots__/DataloadSectionDetail.spec.tsx.snap
index 8a77ee10d05efd830cedb86e08a933b02803b93d..485dca8a00bef798f0388319bf310f5beb07f114 100644
--- a/src/components/ConsumptionVisualizer/__snapshots__/DataloadSectionDetail.spec.tsx.snap
+++ b/src/components/ConsumptionVisualizer/__snapshots__/DataloadSectionDetail.spec.tsx.snap
@@ -1,188 +1,59 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`DataloadSectionDetail component should display value details if multifluid and no comparison case all valid data 1`] = `
-<DataloadSectionDetail
- dataload={
- Object {
- "date": "2021-09-23T00:00:00.000Z",
- "state": "AGGREGATED_VALID",
- "value": 12,
- "valueDetail": Array [
- Object {
- "state": "VALID",
- "value": 1,
- },
- Object {
- "state": "VALID",
- "value": 2,
- },
- Object {
- "state": "VALID",
- "value": 3,
- },
- ],
- }
- }
- dataloadSectionType="RIGHT"
- fluidType={3}
->
+<div>
<div
- className="dataloadvisualizer-euro text-16-normal"
+ class="dataloadvisualizer-euro text-16-normal"
/>
-</DataloadSectionDetail>
+</div>
`;
exports[`DataloadSectionDetail component should display value details if multifluid and no comparison case valid and coming data 1`] = `
-<DataloadSectionDetail
- dataload={
- Object {
- "date": "2021-09-23T00:00:00.000Z",
- "state": "AGGREGATED_WITH_UPCOMING",
- "value": 12,
- "valueDetail": Array [
- Object {
- "state": "VALID",
- "value": 1,
- },
- Object {
- "state": "COMING",
- "value": -1,
- },
- Object {
- "state": "VALID",
- "value": 3,
- },
- ],
- }
- }
- dataloadSectionType="RIGHT"
- fluidType={3}
->
+<div>
<div
- className="dataloadvisualizer-euro text-16-normal"
+ class="dataloadvisualizer-euro text-16-normal"
/>
-</DataloadSectionDetail>
+</div>
`;
exports[`DataloadSectionDetail component should display value details if multifluid and no comparison case valid and hole data 1`] = `
-<DataloadSectionDetail
- dataload={
- Object {
- "date": "2021-09-23T00:00:00.000Z",
- "state": "AGGREGATED_WITH_HOLE_OR_MISSING",
- "value": 12,
- "valueDetail": Array [
- Object {
- "state": "VALID",
- "value": 1,
- },
- Object {
- "state": "HOLE",
- "value": -1,
- },
- Object {
- "state": "VALID",
- "value": 3,
- },
- ],
- }
- }
- dataloadSectionType="RIGHT"
- fluidType={3}
->
+<div>
<div
- className="dataloadvisualizer-euro text-16-normal"
+ class="dataloadvisualizer-euro text-16-normal"
/>
-</DataloadSectionDetail>
+</div>
`;
exports[`DataloadSectionDetail component should display value details if multifluid and no comparison case valid and missing data 1`] = `
-<DataloadSectionDetail
- dataload={
- Object {
- "date": "2021-09-23T00:00:00.000Z",
- "state": "AGGREGATED_WITH_HOLE_OR_MISSING",
- "value": 12,
- "valueDetail": Array [
- Object {
- "state": "VALID",
- "value": 1,
- },
- Object {
- "state": "MISSING",
- "value": -1,
- },
- Object {
- "state": "VALID",
- "value": 3,
- },
- ],
- }
- }
- dataloadSectionType="RIGHT"
- fluidType={3}
->
+<div>
<div
- className="dataloadvisualizer-euro text-16-normal"
+ class="dataloadvisualizer-euro text-16-normal"
/>
-</DataloadSectionDetail>
+</div>
`;
exports[`DataloadSectionDetail component should not display if multifluid and comparison 1`] = `
-<DataloadSectionDetail
- dataload={
- Object {
- "date": "2021-09-23T00:00:00.000Z",
- "state": "VALID",
- "value": 12,
- "valueDetail": null,
- }
- }
- dataloadSectionType="RIGHT"
- fluidType={3}
->
+<div>
<div
- className="dataloadvisualizer-euro text-16-normal"
+ class="dataloadvisualizer-euro text-16-normal"
/>
-</DataloadSectionDetail>
+</div>
`;
exports[`DataloadSectionDetail component should not display value details if multifluid, no valueDetail and comparison 1`] = `
-<DataloadSectionDetail
- dataload={
- Object {
- "date": "2021-09-23T00:00:00.000Z",
- "state": "AGGREGATED_EMPTY",
- "value": 12,
- "valueDetail": null,
- }
- }
- dataloadSectionType="RIGHT"
- fluidType={3}
->
+<div>
<div
- className="dataloadvisualizer-euro text-16-normal"
+ class="dataloadvisualizer-euro text-16-normal"
/>
-</DataloadSectionDetail>
+</div>
`;
exports[`DataloadSectionDetail component should render correctly 1`] = `
-<DataloadSectionDetail
- dataload={
- Object {
- "date": "2021-09-23T00:00:00.000Z",
- "state": "VALID",
- "value": 12,
- "valueDetail": null,
- }
- }
- dataloadSectionType="NO_COMPARE"
- fluidType={0}
->
+<div>
<div
- className="dataloadvisualizer-euro text-16-normal electricity"
+ class="dataloadvisualizer-euro text-16-normal electricity"
>
2,09 €
</div>
-</DataloadSectionDetail>
+</div>
`;
diff --git a/src/components/ConsumptionVisualizer/__snapshots__/DataloadSectionValue.spec.tsx.snap b/src/components/ConsumptionVisualizer/__snapshots__/DataloadSectionValue.spec.tsx.snap
index ba54ac2c063fd7a1ee4845f20d13e328aa999872..40c0c232211606a21bc360620ced413ca8db2721 100644
--- a/src/components/ConsumptionVisualizer/__snapshots__/DataloadSectionValue.spec.tsx.snap
+++ b/src/components/ConsumptionVisualizer/__snapshots__/DataloadSectionValue.spec.tsx.snap
@@ -1,24 +1,12 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`DataloadSectionValue component should render correctly 1`] = `
-<DataloadSectionValue
- dataload={
- Object {
- "date": "2021-09-23T00:00:00.000Z",
- "state": "VALID",
- "value": 12,
- "valueDetail": null,
- }
- }
- dataloadSectionType="NO_COMPARE"
- fluidType={0}
- toggleEstimationModal={[MockFunction]}
->
+<div>
12,00
<span
- className="text-18-normal"
+ class="text-18-normal"
>
FLUID.ELECTRICITY.UNIT
</span>
-</DataloadSectionValue>
+</div>
`;
diff --git a/src/components/ConsumptionVisualizer/__snapshots__/EstimatedConsumptionModal.spec.tsx.snap b/src/components/ConsumptionVisualizer/__snapshots__/EstimatedConsumptionModal.spec.tsx.snap
index c4aa35b596c03103bd7e812d7b7348f7b45778eb..c864e8304fa7049b021cf603cdf0f491e8f1e608 100644
--- a/src/components/ConsumptionVisualizer/__snapshots__/EstimatedConsumptionModal.spec.tsx.snap
+++ b/src/components/ConsumptionVisualizer/__snapshots__/EstimatedConsumptionModal.spec.tsx.snap
@@ -1,891 +1,122 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`EstimatedConsumptionModal component should render correctly 1`] = `
-<EstimatedConsumptionModal
- handleCloseClick={[MockFunction]}
- open={true}
+<body
+ style="padding-right: 0px; overflow: hidden;"
>
- <WithStyles(ForwardRef(Dialog))
- aria-labelledby="accessibility-title"
- classes={
- Object {
- "paper": "modal-paper",
- "root": "modal-root",
- }
- }
- onClose={[MockFunction]}
- open={true}
+ <div
+ aria-hidden="true"
+ />
+ <div
+ class="MuiDialog-root modal-root"
+ role="presentation"
+ style="position: fixed; z-index: 1300; right: 0px; bottom: 0px; top: 0px; left: 0px;"
>
- <ForwardRef(Dialog)
- aria-labelledby="accessibility-title"
- classes={
- Object {
- "container": "MuiDialog-container",
- "paper": "MuiDialog-paper modal-paper",
- "paperFullScreen": "MuiDialog-paperFullScreen",
- "paperFullWidth": "MuiDialog-paperFullWidth",
- "paperScrollBody": "MuiDialog-paperScrollBody",
- "paperScrollPaper": "MuiDialog-paperScrollPaper",
- "paperWidthFalse": "MuiDialog-paperWidthFalse",
- "paperWidthLg": "MuiDialog-paperWidthLg",
- "paperWidthMd": "MuiDialog-paperWidthMd",
- "paperWidthSm": "MuiDialog-paperWidthSm",
- "paperWidthXl": "MuiDialog-paperWidthXl",
- "paperWidthXs": "MuiDialog-paperWidthXs",
- "root": "MuiDialog-root modal-root",
- "scrollBody": "MuiDialog-scrollBody",
- "scrollPaper": "MuiDialog-scrollPaper",
- }
- }
- onClose={[MockFunction]}
- open={true}
+ <div
+ aria-hidden="true"
+ class="MuiBackdrop-root"
+ style="opacity: 1; webkit-transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"
+ />
+ <div
+ data-test="sentinelStart"
+ tabindex="0"
+ />
+ <div
+ class="MuiDialog-container MuiDialog-scrollPaper"
+ role="none presentation"
+ style="opacity: 1; webkit-transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"
+ tabindex="-1"
>
- <ForwardRef(Modal)
- BackdropComponent={
- Object {
- "$$typeof": Symbol(react.forward_ref),
- "Naked": Object {
- "$$typeof": Symbol(react.forward_ref),
- "propTypes": Object {
- "children": [Function],
- "className": [Function],
- "classes": [Function],
- "invisible": [Function],
- "open": [Function],
- "transitionDuration": [Function],
- },
- "render": [Function],
- },
- "displayName": "WithStyles(ForwardRef(Backdrop))",
- "options": Object {
- "defaultTheme": Object {
- "breakpoints": Object {
- "between": [Function],
- "down": [Function],
- "keys": Array [
- "xs",
- "sm",
- "md",
- "lg",
- "xl",
- ],
- "only": [Function],
- "up": [Function],
- "values": Object {
- "lg": 1280,
- "md": 960,
- "sm": 600,
- "xl": 1920,
- "xs": 0,
- },
- "width": [Function],
- },
- "direction": "ltr",
- "mixins": Object {
- "gutters": [Function],
- "toolbar": Object {
- "@media (min-width:0px) and (orientation: landscape)": Object {
- "minHeight": 48,
- },
- "@media (min-width:600px)": Object {
- "minHeight": 64,
- },
- "minHeight": 56,
- },
- },
- "overrides": Object {},
- "palette": Object {
- "action": Object {
- "activatedOpacity": 0.12,
- "active": "rgba(0, 0, 0, 0.54)",
- "disabled": "rgba(0, 0, 0, 0.26)",
- "disabledBackground": "rgba(0, 0, 0, 0.12)",
- "disabledOpacity": 0.38,
- "focus": "rgba(0, 0, 0, 0.12)",
- "focusOpacity": 0.12,
- "hover": "rgba(0, 0, 0, 0.04)",
- "hoverOpacity": 0.04,
- "selected": "rgba(0, 0, 0, 0.08)",
- "selectedOpacity": 0.08,
- },
- "augmentColor": [Function],
- "background": Object {
- "default": "#fafafa",
- "paper": "#fff",
- },
- "common": Object {
- "black": "#000",
- "white": "#fff",
- },
- "contrastThreshold": 3,
- "divider": "rgba(0, 0, 0, 0.12)",
- "error": Object {
- "contrastText": "#fff",
- "dark": "#d32f2f",
- "light": "#e57373",
- "main": "#f44336",
- },
- "getContrastText": [Function],
- "grey": Object {
- "100": "#f5f5f5",
- "200": "#eeeeee",
- "300": "#e0e0e0",
- "400": "#bdbdbd",
- "50": "#fafafa",
- "500": "#9e9e9e",
- "600": "#757575",
- "700": "#616161",
- "800": "#424242",
- "900": "#212121",
- "A100": "#d5d5d5",
- "A200": "#aaaaaa",
- "A400": "#303030",
- "A700": "#616161",
- },
- "info": Object {
- "contrastText": "#fff",
- "dark": "#1976d2",
- "light": "#64b5f6",
- "main": "#2196f3",
- },
- "primary": Object {
- "contrastText": "#fff",
- "dark": "#303f9f",
- "light": "#7986cb",
- "main": "#3f51b5",
- },
- "secondary": Object {
- "contrastText": "#fff",
- "dark": "#c51162",
- "light": "#ff4081",
- "main": "#f50057",
- },
- "success": Object {
- "contrastText": "rgba(0, 0, 0, 0.87)",
- "dark": "#388e3c",
- "light": "#81c784",
- "main": "#4caf50",
- },
- "text": Object {
- "disabled": "rgba(0, 0, 0, 0.38)",
- "hint": "rgba(0, 0, 0, 0.38)",
- "primary": "rgba(0, 0, 0, 0.87)",
- "secondary": "rgba(0, 0, 0, 0.54)",
- },
- "tonalOffset": 0.2,
- "type": "light",
- "warning": Object {
- "contrastText": "rgba(0, 0, 0, 0.87)",
- "dark": "#f57c00",
- "light": "#ffb74d",
- "main": "#ff9800",
- },
- },
- "props": Object {},
- "shadows": Array [
- "none",
- "0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12)",
- "0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12)",
- "0px 3px 3px -2px rgba(0,0,0,0.2),0px 3px 4px 0px rgba(0,0,0,0.14),0px 1px 8px 0px rgba(0,0,0,0.12)",
- "0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12)",
- "0px 3px 5px -1px rgba(0,0,0,0.2),0px 5px 8px 0px rgba(0,0,0,0.14),0px 1px 14px 0px rgba(0,0,0,0.12)",
- "0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12)",
- "0px 4px 5px -2px rgba(0,0,0,0.2),0px 7px 10px 1px rgba(0,0,0,0.14),0px 2px 16px 1px rgba(0,0,0,0.12)",
- "0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12)",
- "0px 5px 6px -3px rgba(0,0,0,0.2),0px 9px 12px 1px rgba(0,0,0,0.14),0px 3px 16px 2px rgba(0,0,0,0.12)",
- "0px 6px 6px -3px rgba(0,0,0,0.2),0px 10px 14px 1px rgba(0,0,0,0.14),0px 4px 18px 3px rgba(0,0,0,0.12)",
- "0px 6px 7px -4px rgba(0,0,0,0.2),0px 11px 15px 1px rgba(0,0,0,0.14),0px 4px 20px 3px rgba(0,0,0,0.12)",
- "0px 7px 8px -4px rgba(0,0,0,0.2),0px 12px 17px 2px rgba(0,0,0,0.14),0px 5px 22px 4px rgba(0,0,0,0.12)",
- "0px 7px 8px -4px rgba(0,0,0,0.2),0px 13px 19px 2px rgba(0,0,0,0.14),0px 5px 24px 4px rgba(0,0,0,0.12)",
- "0px 7px 9px -4px rgba(0,0,0,0.2),0px 14px 21px 2px rgba(0,0,0,0.14),0px 5px 26px 4px rgba(0,0,0,0.12)",
- "0px 8px 9px -5px rgba(0,0,0,0.2),0px 15px 22px 2px rgba(0,0,0,0.14),0px 6px 28px 5px rgba(0,0,0,0.12)",
- "0px 8px 10px -5px rgba(0,0,0,0.2),0px 16px 24px 2px rgba(0,0,0,0.14),0px 6px 30px 5px rgba(0,0,0,0.12)",
- "0px 8px 11px -5px rgba(0,0,0,0.2),0px 17px 26px 2px rgba(0,0,0,0.14),0px 6px 32px 5px rgba(0,0,0,0.12)",
- "0px 9px 11px -5px rgba(0,0,0,0.2),0px 18px 28px 2px rgba(0,0,0,0.14),0px 7px 34px 6px rgba(0,0,0,0.12)",
- "0px 9px 12px -6px rgba(0,0,0,0.2),0px 19px 29px 2px rgba(0,0,0,0.14),0px 7px 36px 6px rgba(0,0,0,0.12)",
- "0px 10px 13px -6px rgba(0,0,0,0.2),0px 20px 31px 3px rgba(0,0,0,0.14),0px 8px 38px 7px rgba(0,0,0,0.12)",
- "0px 10px 13px -6px rgba(0,0,0,0.2),0px 21px 33px 3px rgba(0,0,0,0.14),0px 8px 40px 7px rgba(0,0,0,0.12)",
- "0px 10px 14px -6px rgba(0,0,0,0.2),0px 22px 35px 3px rgba(0,0,0,0.14),0px 8px 42px 7px rgba(0,0,0,0.12)",
- "0px 11px 14px -7px rgba(0,0,0,0.2),0px 23px 36px 3px rgba(0,0,0,0.14),0px 9px 44px 8px rgba(0,0,0,0.12)",
- "0px 11px 15px -7px rgba(0,0,0,0.2),0px 24px 38px 3px rgba(0,0,0,0.14),0px 9px 46px 8px rgba(0,0,0,0.12)",
- ],
- "shape": Object {
- "borderRadius": 4,
- },
- "spacing": [Function],
- "transitions": Object {
- "create": [Function],
- "duration": Object {
- "complex": 375,
- "enteringScreen": 225,
- "leavingScreen": 195,
- "short": 250,
- "shorter": 200,
- "shortest": 150,
- "standard": 300,
- },
- "easing": Object {
- "easeIn": "cubic-bezier(0.4, 0, 1, 1)",
- "easeInOut": "cubic-bezier(0.4, 0, 0.2, 1)",
- "easeOut": "cubic-bezier(0.0, 0, 0.2, 1)",
- "sharp": "cubic-bezier(0.4, 0, 0.6, 1)",
- },
- "getAutoHeightDuration": [Function],
- },
- "typography": Object {
- "body1": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "1rem",
- "fontWeight": 400,
- "letterSpacing": "0.00938em",
- "lineHeight": 1.5,
- },
- "body2": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "0.875rem",
- "fontWeight": 400,
- "letterSpacing": "0.01071em",
- "lineHeight": 1.43,
- },
- "button": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "0.875rem",
- "fontWeight": 500,
- "letterSpacing": "0.02857em",
- "lineHeight": 1.75,
- "textTransform": "uppercase",
- },
- "caption": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "0.75rem",
- "fontWeight": 400,
- "letterSpacing": "0.03333em",
- "lineHeight": 1.66,
- },
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": 14,
- "fontWeightBold": 700,
- "fontWeightLight": 300,
- "fontWeightMedium": 500,
- "fontWeightRegular": 400,
- "h1": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "6rem",
- "fontWeight": 300,
- "letterSpacing": "-0.01562em",
- "lineHeight": 1.167,
- },
- "h2": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "3.75rem",
- "fontWeight": 300,
- "letterSpacing": "-0.00833em",
- "lineHeight": 1.2,
- },
- "h3": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "3rem",
- "fontWeight": 400,
- "letterSpacing": "0em",
- "lineHeight": 1.167,
- },
- "h4": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "2.125rem",
- "fontWeight": 400,
- "letterSpacing": "0.00735em",
- "lineHeight": 1.235,
- },
- "h5": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "1.5rem",
- "fontWeight": 400,
- "letterSpacing": "0em",
- "lineHeight": 1.334,
- },
- "h6": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "1.25rem",
- "fontWeight": 500,
- "letterSpacing": "0.0075em",
- "lineHeight": 1.6,
- },
- "htmlFontSize": 16,
- "overline": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "0.75rem",
- "fontWeight": 400,
- "letterSpacing": "0.08333em",
- "lineHeight": 2.66,
- "textTransform": "uppercase",
- },
- "pxToRem": [Function],
- "round": [Function],
- "subtitle1": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "1rem",
- "fontWeight": 400,
- "letterSpacing": "0.00938em",
- "lineHeight": 1.75,
- },
- "subtitle2": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "0.875rem",
- "fontWeight": 500,
- "letterSpacing": "0.00714em",
- "lineHeight": 1.57,
- },
- },
- "zIndex": Object {
- "appBar": 1100,
- "drawer": 1200,
- "mobileStepper": 1000,
- "modal": 1300,
- "snackbar": 1400,
- "speedDial": 1050,
- "tooltip": 1500,
- },
- },
- "name": "MuiBackdrop",
- },
- "propTypes": Object {
- "classes": [Function],
- "innerRef": [Function],
- },
- "render": [Function],
- "useStyles": [Function],
- }
- }
- BackdropProps={
- Object {
- "transitionDuration": Object {
- "enter": 225,
- "exit": 195,
- },
- }
- }
- className="MuiDialog-root modal-root"
- closeAfterTransition={true}
- disableEscapeKeyDown={false}
- onClose={[MockFunction]}
- open={true}
+ <div
+ aria-labelledby="accessibility-title"
+ class="MuiPaper-root MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm MuiPaper-elevation24 MuiPaper-rounded"
+ role="dialog"
>
- <ForwardRef(Portal)
- disablePortal={false}
+ <div
+ id="accessibility-title"
>
- <Portal
- containerInfo={
- <body
- style="padding-right: 0px; overflow: hidden;"
- >
- <div
- class="MuiDialog-root modal-root"
- role="presentation"
- style="position: fixed; z-index: 1300; right: 0px; bottom: 0px; top: 0px; left: 0px;"
- >
- <div
- aria-hidden="true"
- class="MuiBackdrop-root"
- style="opacity: 1; webkit-transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"
- />
- <div
- data-test="sentinelStart"
- tabindex="0"
- />
- <div
- class="MuiDialog-container MuiDialog-scrollPaper"
- role="none presentation"
- style="opacity: 1; webkit-transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"
- tabindex="-1"
- >
- <div
- aria-labelledby="accessibility-title"
- class="MuiPaper-root MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm MuiPaper-elevation24 MuiPaper-rounded"
- role="dialog"
- >
- <div
- id="accessibility-title"
- >
- consumption_visualizer.modal.window_title
- </div>
- <button
- aria-label="consumption_visualizer.modal.close"
- class="MuiButtonBase-root MuiIconButton-root modal-paper-close-button"
- tabindex="0"
- type="button"
- >
- <span
- class="MuiIconButton-label"
- >
- <svg
- class="styles__icon___23x3R"
- height="16"
- width="16"
- >
- <use
- xlink:href="#test-file-stub"
- />
- </svg>
- </span>
- <span
- class="MuiTouchRipple-root"
- />
- </button>
- <div
- class="estimation-modal"
- >
- <div
- class="text-20-normal modal-title"
- >
- consumption_visualizer.modal.title
- </div>
- <div
- class="text-16-normal"
- >
- consumption_visualizer.modal.part1
- </div>
- <br />
- <div
- class="text-16-normal"
- >
- consumption_visualizer.modal.part2
- </div>
- <ul>
- <li>
- <span
- class="electricity"
- >
- FLUID.ELECTRICITY.LABEL
- </span>
- consumption_visualizer.modal.list1
- </li>
- <li>
- <span
- class="water"
- >
- FLUID.WATER.LABEL
- </span>
- consumption_visualizer.modal.list3
- </li>
- <li>
- <span
- class="gas"
- >
- FLUID.GAS.LABEL
- </span>
- consumption_visualizer.modal.list2
- </li>
- </ul>
- <div
- class="text-16-normal"
- >
- consumption_visualizer.modal.part3
- </div>
- </div>
- </div>
- </div>
- <div
- data-test="sentinelEnd"
- tabindex="0"
- />
- </div>
- </body>
- }
+ consumption_visualizer.modal.window_title
+ </div>
+ <button
+ aria-label="consumption_visualizer.modal.close"
+ class="MuiButtonBase-root MuiIconButton-root modal-paper-close-button"
+ tabindex="0"
+ type="button"
+ >
+ <span
+ class="MuiIconButton-label"
>
- <div
- className="MuiDialog-root modal-root"
- onKeyDown={[Function]}
- role="presentation"
- style={
- Object {
- "bottom": 0,
- "left": 0,
- "position": "fixed",
- "right": 0,
- "top": 0,
- "zIndex": 1300,
- }
- }
+ <svg
+ class="styles__icon___23x3R"
+ height="16"
+ width="16"
>
- <WithStyles(ForwardRef(Backdrop))
- onClick={[Function]}
- open={true}
- transitionDuration={
- Object {
- "enter": 225,
- "exit": 195,
- }
- }
+ <use
+ xlink:href="#test-file-stub"
+ />
+ </svg>
+ </span>
+ <span
+ class="MuiTouchRipple-root"
+ />
+ </button>
+ <div
+ class="estimation-modal"
+ >
+ <div
+ class="text-20-normal modal-title"
+ >
+ consumption_visualizer.modal.title
+ </div>
+ <div
+ class="text-16-normal"
+ >
+ consumption_visualizer.modal.part1
+ </div>
+ <br />
+ <div
+ class="text-16-normal"
+ >
+ consumption_visualizer.modal.part2
+ </div>
+ <ul>
+ <li>
+ <span
+ class="electricity"
>
- <ForwardRef(Backdrop)
- classes={
- Object {
- "invisible": "MuiBackdrop-invisible",
- "root": "MuiBackdrop-root",
- }
- }
- onClick={[Function]}
- open={true}
- transitionDuration={
- Object {
- "enter": 225,
- "exit": 195,
- }
- }
- >
- <ForwardRef(Fade)
- in={true}
- onClick={[Function]}
- timeout={
- Object {
- "enter": 225,
- "exit": 195,
- }
- }
- >
- <Transition
- appear={true}
- enter={true}
- exit={true}
- in={true}
- mountOnEnter={false}
- onClick={[Function]}
- onEnter={[Function]}
- onEntered={[Function]}
- onEntering={[Function]}
- onExit={[Function]}
- onExited={[Function]}
- onExiting={[Function]}
- timeout={
- Object {
- "enter": 225,
- "exit": 195,
- }
- }
- unmountOnExit={false}
- >
- <div
- aria-hidden={true}
- className="MuiBackdrop-root"
- onClick={[Function]}
- style={
- Object {
- "opacity": 1,
- "visibility": undefined,
- }
- }
- />
- </Transition>
- </ForwardRef(Fade)>
- </ForwardRef(Backdrop)>
- </WithStyles(ForwardRef(Backdrop))>
- <Unstable_TrapFocus
- disableAutoFocus={false}
- disableEnforceFocus={false}
- disableRestoreFocus={false}
- getDoc={[Function]}
- isEnabled={[Function]}
- open={true}
+ FLUID.ELECTRICITY.LABEL
+ </span>
+ consumption_visualizer.modal.list1
+ </li>
+ <li>
+ <span
+ class="water"
>
- <div
- data-test="sentinelStart"
- tabIndex={0}
- />
- <ForwardRef(Fade)
- appear={true}
- in={true}
- onEnter={[Function]}
- onExited={[Function]}
- role="none presentation"
- tabIndex="-1"
- timeout={
- Object {
- "enter": 225,
- "exit": 195,
- }
- }
- >
- <Transition
- appear={true}
- enter={true}
- exit={true}
- in={true}
- mountOnEnter={false}
- onEnter={[Function]}
- onEntered={[Function]}
- onEntering={[Function]}
- onExit={[Function]}
- onExited={[Function]}
- onExiting={[Function]}
- role="none presentation"
- tabIndex="-1"
- timeout={
- Object {
- "enter": 225,
- "exit": 195,
- }
- }
- unmountOnExit={false}
- >
- <div
- className="MuiDialog-container MuiDialog-scrollPaper"
- onMouseDown={[Function]}
- onMouseUp={[Function]}
- role="none presentation"
- style={
- Object {
- "opacity": 1,
- "visibility": undefined,
- }
- }
- tabIndex="-1"
- >
- <WithStyles(ForwardRef(Paper))
- aria-labelledby="accessibility-title"
- className="MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm"
- elevation={24}
- role="dialog"
- >
- <ForwardRef(Paper)
- aria-labelledby="accessibility-title"
- className="MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm"
- classes={
- Object {
- "elevation0": "MuiPaper-elevation0",
- "elevation1": "MuiPaper-elevation1",
- "elevation10": "MuiPaper-elevation10",
- "elevation11": "MuiPaper-elevation11",
- "elevation12": "MuiPaper-elevation12",
- "elevation13": "MuiPaper-elevation13",
- "elevation14": "MuiPaper-elevation14",
- "elevation15": "MuiPaper-elevation15",
- "elevation16": "MuiPaper-elevation16",
- "elevation17": "MuiPaper-elevation17",
- "elevation18": "MuiPaper-elevation18",
- "elevation19": "MuiPaper-elevation19",
- "elevation2": "MuiPaper-elevation2",
- "elevation20": "MuiPaper-elevation20",
- "elevation21": "MuiPaper-elevation21",
- "elevation22": "MuiPaper-elevation22",
- "elevation23": "MuiPaper-elevation23",
- "elevation24": "MuiPaper-elevation24",
- "elevation3": "MuiPaper-elevation3",
- "elevation4": "MuiPaper-elevation4",
- "elevation5": "MuiPaper-elevation5",
- "elevation6": "MuiPaper-elevation6",
- "elevation7": "MuiPaper-elevation7",
- "elevation8": "MuiPaper-elevation8",
- "elevation9": "MuiPaper-elevation9",
- "outlined": "MuiPaper-outlined",
- "root": "MuiPaper-root",
- "rounded": "MuiPaper-rounded",
- }
- }
- elevation={24}
- role="dialog"
- >
- <div
- aria-labelledby="accessibility-title"
- className="MuiPaper-root MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm MuiPaper-elevation24 MuiPaper-rounded"
- role="dialog"
- >
- <div
- id="accessibility-title"
- >
- consumption_visualizer.modal.window_title
- </div>
- <WithStyles(ForwardRef(IconButton))
- aria-label="consumption_visualizer.modal.close"
- className="modal-paper-close-button"
- onClick={[MockFunction]}
- >
- <ForwardRef(IconButton)
- aria-label="consumption_visualizer.modal.close"
- className="modal-paper-close-button"
- classes={
- Object {
- "colorInherit": "MuiIconButton-colorInherit",
- "colorPrimary": "MuiIconButton-colorPrimary",
- "colorSecondary": "MuiIconButton-colorSecondary",
- "disabled": "Mui-disabled",
- "edgeEnd": "MuiIconButton-edgeEnd",
- "edgeStart": "MuiIconButton-edgeStart",
- "label": "MuiIconButton-label",
- "root": "MuiIconButton-root",
- "sizeSmall": "MuiIconButton-sizeSmall",
- }
- }
- onClick={[MockFunction]}
- >
- <WithStyles(ForwardRef(ButtonBase))
- aria-label="consumption_visualizer.modal.close"
- centerRipple={true}
- className="MuiIconButton-root modal-paper-close-button"
- disabled={false}
- focusRipple={true}
- onClick={[MockFunction]}
- >
- <ForwardRef(ButtonBase)
- aria-label="consumption_visualizer.modal.close"
- centerRipple={true}
- className="MuiIconButton-root modal-paper-close-button"
- classes={
- Object {
- "disabled": "Mui-disabled",
- "focusVisible": "Mui-focusVisible",
- "root": "MuiButtonBase-root",
- }
- }
- disabled={false}
- focusRipple={true}
- onClick={[MockFunction]}
- >
- <button
- aria-label="consumption_visualizer.modal.close"
- className="MuiButtonBase-root MuiIconButton-root modal-paper-close-button"
- disabled={false}
- onBlur={[Function]}
- onClick={[MockFunction]}
- onDragLeave={[Function]}
- onFocus={[Function]}
- onKeyDown={[Function]}
- onKeyUp={[Function]}
- onMouseDown={[Function]}
- onMouseLeave={[Function]}
- onMouseUp={[Function]}
- onTouchEnd={[Function]}
- onTouchMove={[Function]}
- onTouchStart={[Function]}
- tabIndex={0}
- type="button"
- >
- <span
- className="MuiIconButton-label"
- >
- <Icon
- icon="test-file-stub"
- size={16}
- spin={false}
- >
- <Component
- className="styles__icon___23x3R"
- height={16}
- style={Object {}}
- width={16}
- >
- <svg
- className="styles__icon___23x3R"
- height={16}
- style={Object {}}
- width={16}
- >
- <use
- xlinkHref="#test-file-stub"
- />
- </svg>
- </Component>
- </Icon>
- </span>
- <WithStyles(memo)
- center={true}
- >
- <ForwardRef(TouchRipple)
- center={true}
- classes={
- Object {
- "child": "MuiTouchRipple-child",
- "childLeaving": "MuiTouchRipple-childLeaving",
- "childPulsate": "MuiTouchRipple-childPulsate",
- "ripple": "MuiTouchRipple-ripple",
- "ripplePulsate": "MuiTouchRipple-ripplePulsate",
- "rippleVisible": "MuiTouchRipple-rippleVisible",
- "root": "MuiTouchRipple-root",
- }
- }
- >
- <span
- className="MuiTouchRipple-root"
- >
- <TransitionGroup
- childFactory={[Function]}
- component={null}
- exit={true}
- />
- </span>
- </ForwardRef(TouchRipple)>
- </WithStyles(memo)>
- </button>
- </ForwardRef(ButtonBase)>
- </WithStyles(ForwardRef(ButtonBase))>
- </ForwardRef(IconButton)>
- </WithStyles(ForwardRef(IconButton))>
- <div
- className="estimation-modal"
- >
- <div
- className="text-20-normal modal-title"
- >
- consumption_visualizer.modal.title
- </div>
- <div
- className="text-16-normal"
- >
- consumption_visualizer.modal.part1
- </div>
- <br />
- <div
- className="text-16-normal"
- >
- consumption_visualizer.modal.part2
- </div>
- <ul>
- <li>
- <span
- className="electricity"
- >
- FLUID.ELECTRICITY.LABEL
- </span>
- consumption_visualizer.modal.list1
- </li>
- <li>
- <span
- className="water"
- >
- FLUID.WATER.LABEL
- </span>
- consumption_visualizer.modal.list3
- </li>
- <li>
- <span
- className="gas"
- >
- FLUID.GAS.LABEL
- </span>
- consumption_visualizer.modal.list2
- </li>
- </ul>
- <div
- className="text-16-normal"
- >
- consumption_visualizer.modal.part3
- </div>
- </div>
- </div>
- </ForwardRef(Paper)>
- </WithStyles(ForwardRef(Paper))>
- </div>
- </Transition>
- </ForwardRef(Fade)>
- <div
- data-test="sentinelEnd"
- tabIndex={0}
- />
- </Unstable_TrapFocus>
- </div>
- </Portal>
- </ForwardRef(Portal)>
- </ForwardRef(Modal)>
- </ForwardRef(Dialog)>
- </WithStyles(ForwardRef(Dialog))>
-</EstimatedConsumptionModal>
+ FLUID.WATER.LABEL
+ </span>
+ consumption_visualizer.modal.list3
+ </li>
+ <li>
+ <span
+ class="gas"
+ >
+ FLUID.GAS.LABEL
+ </span>
+ consumption_visualizer.modal.list2
+ </li>
+ </ul>
+ <div
+ class="text-16-normal"
+ >
+ consumption_visualizer.modal.part3
+ </div>
+ </div>
+ </div>
+ </div>
+ <div
+ data-test="sentinelEnd"
+ tabindex="0"
+ />
+ </div>
+</body>
`;
diff --git a/src/components/ConsumptionVisualizer/__snapshots__/InfoDataConsumptionVisualizer.spec.tsx.snap b/src/components/ConsumptionVisualizer/__snapshots__/InfoDataConsumptionVisualizer.spec.tsx.snap
index 151a98bdd258e3755248640676bf77b747bab782..41ed4044abb04d88c77a57f53f4c00475bdedc57 100644
--- a/src/components/ConsumptionVisualizer/__snapshots__/InfoDataConsumptionVisualizer.spec.tsx.snap
+++ b/src/components/ConsumptionVisualizer/__snapshots__/InfoDataConsumptionVisualizer.spec.tsx.snap
@@ -1,29 +1,20 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`InfoDataConsumptionVisualizer component should render correctly when data valid 1`] = `
-<Provider
- store={
- Object {
- "clearActions": [Function],
- "dispatch": [Function],
- "getActions": [Function],
- "getState": [Function],
- "replaceReducer": [Function],
- "subscribe": [Function],
- }
- }
->
- <InfoDataConsumptionVisualizer
- dataload={
- Object {
- "date": "2021-09-23T00:00:00.000Z",
- "state": "VALID",
- "value": 12,
- "valueDetail": null,
- }
- }
- fluidType={0}
- lastDataDate={"2020-10-01T00:00:00.000Z"}
- />
-</Provider>
+<div>
+ <button
+ class="MuiButtonBase-root MuiButton-root MuiButton-text btnText"
+ tabindex="0"
+ type="button"
+ >
+ <span
+ class="MuiButton-label"
+ >
+ consumption_visualizer.last_available_data
+ </span>
+ <span
+ class="MuiTouchRipple-root"
+ />
+ </button>
+</div>
`;
diff --git a/src/components/ConsumptionVisualizer/__snapshots__/NoDataModal.spec.tsx.snap b/src/components/ConsumptionVisualizer/__snapshots__/NoDataModal.spec.tsx.snap
index e36ce72786e54b7fb820a9a8c2c1a126fefef6ae..971b2e6f4b797334794ace1f0a9db07b5491ff43 100644
--- a/src/components/ConsumptionVisualizer/__snapshots__/NoDataModal.spec.tsx.snap
+++ b/src/components/ConsumptionVisualizer/__snapshots__/NoDataModal.spec.tsx.snap
@@ -1,1031 +1,127 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`NoDataModal component should render correctly 1`] = `
-<NoDataModal
- handleCloseClick={[MockFunction]}
- open={true}
+<body
+ style="padding-right: 0px; overflow: hidden;"
>
- <WithStyles(ForwardRef(Dialog))
- aria-labelledby="accessibility-title"
- classes={
- Object {
- "paper": "modal-paper",
- "root": "modal-root",
- }
- }
- onClose={[MockFunction]}
- open={true}
+ <div
+ aria-hidden="true"
+ />
+ <div
+ class="MuiDialog-root modal-root"
+ role="presentation"
+ style="position: fixed; z-index: 1300; right: 0px; bottom: 0px; top: 0px; left: 0px;"
>
- <ForwardRef(Dialog)
- aria-labelledby="accessibility-title"
- classes={
- Object {
- "container": "MuiDialog-container",
- "paper": "MuiDialog-paper modal-paper",
- "paperFullScreen": "MuiDialog-paperFullScreen",
- "paperFullWidth": "MuiDialog-paperFullWidth",
- "paperScrollBody": "MuiDialog-paperScrollBody",
- "paperScrollPaper": "MuiDialog-paperScrollPaper",
- "paperWidthFalse": "MuiDialog-paperWidthFalse",
- "paperWidthLg": "MuiDialog-paperWidthLg",
- "paperWidthMd": "MuiDialog-paperWidthMd",
- "paperWidthSm": "MuiDialog-paperWidthSm",
- "paperWidthXl": "MuiDialog-paperWidthXl",
- "paperWidthXs": "MuiDialog-paperWidthXs",
- "root": "MuiDialog-root modal-root",
- "scrollBody": "MuiDialog-scrollBody",
- "scrollPaper": "MuiDialog-scrollPaper",
- }
- }
- onClose={[MockFunction]}
- open={true}
+ <div
+ aria-hidden="true"
+ class="MuiBackdrop-root"
+ style="opacity: 1; webkit-transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"
+ />
+ <div
+ data-test="sentinelStart"
+ tabindex="0"
+ />
+ <div
+ class="MuiDialog-container MuiDialog-scrollPaper"
+ role="none presentation"
+ style="opacity: 1; webkit-transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"
+ tabindex="-1"
>
- <ForwardRef(Modal)
- BackdropComponent={
- Object {
- "$$typeof": Symbol(react.forward_ref),
- "Naked": Object {
- "$$typeof": Symbol(react.forward_ref),
- "propTypes": Object {
- "children": [Function],
- "className": [Function],
- "classes": [Function],
- "invisible": [Function],
- "open": [Function],
- "transitionDuration": [Function],
- },
- "render": [Function],
- },
- "displayName": "WithStyles(ForwardRef(Backdrop))",
- "options": Object {
- "defaultTheme": Object {
- "breakpoints": Object {
- "between": [Function],
- "down": [Function],
- "keys": Array [
- "xs",
- "sm",
- "md",
- "lg",
- "xl",
- ],
- "only": [Function],
- "up": [Function],
- "values": Object {
- "lg": 1280,
- "md": 960,
- "sm": 600,
- "xl": 1920,
- "xs": 0,
- },
- "width": [Function],
- },
- "direction": "ltr",
- "mixins": Object {
- "gutters": [Function],
- "toolbar": Object {
- "@media (min-width:0px) and (orientation: landscape)": Object {
- "minHeight": 48,
- },
- "@media (min-width:600px)": Object {
- "minHeight": 64,
- },
- "minHeight": 56,
- },
- },
- "overrides": Object {},
- "palette": Object {
- "action": Object {
- "activatedOpacity": 0.12,
- "active": "rgba(0, 0, 0, 0.54)",
- "disabled": "rgba(0, 0, 0, 0.26)",
- "disabledBackground": "rgba(0, 0, 0, 0.12)",
- "disabledOpacity": 0.38,
- "focus": "rgba(0, 0, 0, 0.12)",
- "focusOpacity": 0.12,
- "hover": "rgba(0, 0, 0, 0.04)",
- "hoverOpacity": 0.04,
- "selected": "rgba(0, 0, 0, 0.08)",
- "selectedOpacity": 0.08,
- },
- "augmentColor": [Function],
- "background": Object {
- "default": "#fafafa",
- "paper": "#fff",
- },
- "common": Object {
- "black": "#000",
- "white": "#fff",
- },
- "contrastThreshold": 3,
- "divider": "rgba(0, 0, 0, 0.12)",
- "error": Object {
- "contrastText": "#fff",
- "dark": "#d32f2f",
- "light": "#e57373",
- "main": "#f44336",
- },
- "getContrastText": [Function],
- "grey": Object {
- "100": "#f5f5f5",
- "200": "#eeeeee",
- "300": "#e0e0e0",
- "400": "#bdbdbd",
- "50": "#fafafa",
- "500": "#9e9e9e",
- "600": "#757575",
- "700": "#616161",
- "800": "#424242",
- "900": "#212121",
- "A100": "#d5d5d5",
- "A200": "#aaaaaa",
- "A400": "#303030",
- "A700": "#616161",
- },
- "info": Object {
- "contrastText": "#fff",
- "dark": "#1976d2",
- "light": "#64b5f6",
- "main": "#2196f3",
- },
- "primary": Object {
- "contrastText": "#fff",
- "dark": "#303f9f",
- "light": "#7986cb",
- "main": "#3f51b5",
- },
- "secondary": Object {
- "contrastText": "#fff",
- "dark": "#c51162",
- "light": "#ff4081",
- "main": "#f50057",
- },
- "success": Object {
- "contrastText": "rgba(0, 0, 0, 0.87)",
- "dark": "#388e3c",
- "light": "#81c784",
- "main": "#4caf50",
- },
- "text": Object {
- "disabled": "rgba(0, 0, 0, 0.38)",
- "hint": "rgba(0, 0, 0, 0.38)",
- "primary": "rgba(0, 0, 0, 0.87)",
- "secondary": "rgba(0, 0, 0, 0.54)",
- },
- "tonalOffset": 0.2,
- "type": "light",
- "warning": Object {
- "contrastText": "rgba(0, 0, 0, 0.87)",
- "dark": "#f57c00",
- "light": "#ffb74d",
- "main": "#ff9800",
- },
- },
- "props": Object {},
- "shadows": Array [
- "none",
- "0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12)",
- "0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12)",
- "0px 3px 3px -2px rgba(0,0,0,0.2),0px 3px 4px 0px rgba(0,0,0,0.14),0px 1px 8px 0px rgba(0,0,0,0.12)",
- "0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12)",
- "0px 3px 5px -1px rgba(0,0,0,0.2),0px 5px 8px 0px rgba(0,0,0,0.14),0px 1px 14px 0px rgba(0,0,0,0.12)",
- "0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12)",
- "0px 4px 5px -2px rgba(0,0,0,0.2),0px 7px 10px 1px rgba(0,0,0,0.14),0px 2px 16px 1px rgba(0,0,0,0.12)",
- "0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12)",
- "0px 5px 6px -3px rgba(0,0,0,0.2),0px 9px 12px 1px rgba(0,0,0,0.14),0px 3px 16px 2px rgba(0,0,0,0.12)",
- "0px 6px 6px -3px rgba(0,0,0,0.2),0px 10px 14px 1px rgba(0,0,0,0.14),0px 4px 18px 3px rgba(0,0,0,0.12)",
- "0px 6px 7px -4px rgba(0,0,0,0.2),0px 11px 15px 1px rgba(0,0,0,0.14),0px 4px 20px 3px rgba(0,0,0,0.12)",
- "0px 7px 8px -4px rgba(0,0,0,0.2),0px 12px 17px 2px rgba(0,0,0,0.14),0px 5px 22px 4px rgba(0,0,0,0.12)",
- "0px 7px 8px -4px rgba(0,0,0,0.2),0px 13px 19px 2px rgba(0,0,0,0.14),0px 5px 24px 4px rgba(0,0,0,0.12)",
- "0px 7px 9px -4px rgba(0,0,0,0.2),0px 14px 21px 2px rgba(0,0,0,0.14),0px 5px 26px 4px rgba(0,0,0,0.12)",
- "0px 8px 9px -5px rgba(0,0,0,0.2),0px 15px 22px 2px rgba(0,0,0,0.14),0px 6px 28px 5px rgba(0,0,0,0.12)",
- "0px 8px 10px -5px rgba(0,0,0,0.2),0px 16px 24px 2px rgba(0,0,0,0.14),0px 6px 30px 5px rgba(0,0,0,0.12)",
- "0px 8px 11px -5px rgba(0,0,0,0.2),0px 17px 26px 2px rgba(0,0,0,0.14),0px 6px 32px 5px rgba(0,0,0,0.12)",
- "0px 9px 11px -5px rgba(0,0,0,0.2),0px 18px 28px 2px rgba(0,0,0,0.14),0px 7px 34px 6px rgba(0,0,0,0.12)",
- "0px 9px 12px -6px rgba(0,0,0,0.2),0px 19px 29px 2px rgba(0,0,0,0.14),0px 7px 36px 6px rgba(0,0,0,0.12)",
- "0px 10px 13px -6px rgba(0,0,0,0.2),0px 20px 31px 3px rgba(0,0,0,0.14),0px 8px 38px 7px rgba(0,0,0,0.12)",
- "0px 10px 13px -6px rgba(0,0,0,0.2),0px 21px 33px 3px rgba(0,0,0,0.14),0px 8px 40px 7px rgba(0,0,0,0.12)",
- "0px 10px 14px -6px rgba(0,0,0,0.2),0px 22px 35px 3px rgba(0,0,0,0.14),0px 8px 42px 7px rgba(0,0,0,0.12)",
- "0px 11px 14px -7px rgba(0,0,0,0.2),0px 23px 36px 3px rgba(0,0,0,0.14),0px 9px 44px 8px rgba(0,0,0,0.12)",
- "0px 11px 15px -7px rgba(0,0,0,0.2),0px 24px 38px 3px rgba(0,0,0,0.14),0px 9px 46px 8px rgba(0,0,0,0.12)",
- ],
- "shape": Object {
- "borderRadius": 4,
- },
- "spacing": [Function],
- "transitions": Object {
- "create": [Function],
- "duration": Object {
- "complex": 375,
- "enteringScreen": 225,
- "leavingScreen": 195,
- "short": 250,
- "shorter": 200,
- "shortest": 150,
- "standard": 300,
- },
- "easing": Object {
- "easeIn": "cubic-bezier(0.4, 0, 1, 1)",
- "easeInOut": "cubic-bezier(0.4, 0, 0.2, 1)",
- "easeOut": "cubic-bezier(0.0, 0, 0.2, 1)",
- "sharp": "cubic-bezier(0.4, 0, 0.6, 1)",
- },
- "getAutoHeightDuration": [Function],
- },
- "typography": Object {
- "body1": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "1rem",
- "fontWeight": 400,
- "letterSpacing": "0.00938em",
- "lineHeight": 1.5,
- },
- "body2": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "0.875rem",
- "fontWeight": 400,
- "letterSpacing": "0.01071em",
- "lineHeight": 1.43,
- },
- "button": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "0.875rem",
- "fontWeight": 500,
- "letterSpacing": "0.02857em",
- "lineHeight": 1.75,
- "textTransform": "uppercase",
- },
- "caption": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "0.75rem",
- "fontWeight": 400,
- "letterSpacing": "0.03333em",
- "lineHeight": 1.66,
- },
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": 14,
- "fontWeightBold": 700,
- "fontWeightLight": 300,
- "fontWeightMedium": 500,
- "fontWeightRegular": 400,
- "h1": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "6rem",
- "fontWeight": 300,
- "letterSpacing": "-0.01562em",
- "lineHeight": 1.167,
- },
- "h2": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "3.75rem",
- "fontWeight": 300,
- "letterSpacing": "-0.00833em",
- "lineHeight": 1.2,
- },
- "h3": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "3rem",
- "fontWeight": 400,
- "letterSpacing": "0em",
- "lineHeight": 1.167,
- },
- "h4": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "2.125rem",
- "fontWeight": 400,
- "letterSpacing": "0.00735em",
- "lineHeight": 1.235,
- },
- "h5": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "1.5rem",
- "fontWeight": 400,
- "letterSpacing": "0em",
- "lineHeight": 1.334,
- },
- "h6": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "1.25rem",
- "fontWeight": 500,
- "letterSpacing": "0.0075em",
- "lineHeight": 1.6,
- },
- "htmlFontSize": 16,
- "overline": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "0.75rem",
- "fontWeight": 400,
- "letterSpacing": "0.08333em",
- "lineHeight": 2.66,
- "textTransform": "uppercase",
- },
- "pxToRem": [Function],
- "round": [Function],
- "subtitle1": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "1rem",
- "fontWeight": 400,
- "letterSpacing": "0.00938em",
- "lineHeight": 1.75,
- },
- "subtitle2": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "0.875rem",
- "fontWeight": 500,
- "letterSpacing": "0.00714em",
- "lineHeight": 1.57,
- },
- },
- "zIndex": Object {
- "appBar": 1100,
- "drawer": 1200,
- "mobileStepper": 1000,
- "modal": 1300,
- "snackbar": 1400,
- "speedDial": 1050,
- "tooltip": 1500,
- },
- },
- "name": "MuiBackdrop",
- },
- "propTypes": Object {
- "classes": [Function],
- "innerRef": [Function],
- },
- "render": [Function],
- "useStyles": [Function],
- }
- }
- BackdropProps={
- Object {
- "transitionDuration": Object {
- "enter": 225,
- "exit": 195,
- },
- }
- }
- className="MuiDialog-root modal-root"
- closeAfterTransition={true}
- disableEscapeKeyDown={false}
- onClose={[MockFunction]}
- open={true}
+ <div
+ aria-labelledby="accessibility-title"
+ class="MuiPaper-root MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm MuiPaper-elevation24 MuiPaper-rounded"
+ role="dialog"
>
- <ForwardRef(Portal)
- disablePortal={false}
+ <div
+ id="accessibility-title"
>
- <Portal
- containerInfo={
- <body
- style="padding-right: 0px; overflow: hidden;"
- >
- <div
- class="MuiDialog-root modal-root"
- role="presentation"
- style="position: fixed; z-index: 1300; right: 0px; bottom: 0px; top: 0px; left: 0px;"
- >
- <div
- aria-hidden="true"
- class="MuiBackdrop-root"
- style="opacity: 1; webkit-transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"
- />
- <div
- data-test="sentinelStart"
- tabindex="0"
- />
- <div
- class="MuiDialog-container MuiDialog-scrollPaper"
- role="none presentation"
- style="opacity: 1; webkit-transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"
- tabindex="-1"
- >
- <div
- aria-labelledby="accessibility-title"
- class="MuiPaper-root MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm MuiPaper-elevation24 MuiPaper-rounded"
- role="dialog"
- >
- <div
- id="accessibility-title"
- >
- consumption_visualizer.modal.window_title
- </div>
- <button
- aria-label="consumption_visualizer.modal.close"
- class="MuiButtonBase-root MuiIconButton-root modal-paper-close-button"
- tabindex="0"
- type="button"
- >
- <span
- class="MuiIconButton-label"
- >
- <svg
- class="styles__icon___23x3R"
- height="16"
- width="16"
- >
- <use
- xlink:href="#test-file-stub"
- />
- </svg>
- </span>
- <span
- class="MuiTouchRipple-root"
- />
- </button>
- <div
- class="nodata-modal"
- >
- <div
- class="question-mark"
- >
- <svg
- class="styles__icon___23x3R"
- height="36"
- width="36"
- >
- <use
- xlink:href="#test-file-stub"
- />
- </svg>
- </div>
- <div
- class="text-20-normal title"
- >
- consumption_visualizer.why_no_data
- </div>
- <div
- class="text-16-normal"
- >
- consumption_visualizer.dataModal.list_title
- </div>
- <ul>
- <li>
- consumption_visualizer.dataModal.item1
- </li>
- <li>
- consumption_visualizer.dataModal.item2
- </li>
- <li>
- consumption_visualizer.dataModal.item3
- </li>
- <li>
- consumption_visualizer.dataModal.item4
- </li>
- </ul>
- <button
- aria-label="ecogesture_info_modal.button_close"
- class="MuiButtonBase-root MuiButton-root btn-highlight MuiButton-text"
- tabindex="0"
- type="button"
- >
- <span
- class="MuiButton-label text-16-bold"
- >
- ecogesture_info_modal.button_close
- </span>
- <span
- class="MuiTouchRipple-root"
- />
- </button>
- </div>
- </div>
- </div>
- <div
- data-test="sentinelEnd"
- tabindex="0"
- />
- </div>
- </body>
- }
+ consumption_visualizer.modal.window_title
+ </div>
+ <button
+ aria-label="consumption_visualizer.modal.close"
+ class="MuiButtonBase-root MuiIconButton-root modal-paper-close-button"
+ tabindex="0"
+ type="button"
+ >
+ <span
+ class="MuiIconButton-label"
+ >
+ <svg
+ class="styles__icon___23x3R"
+ height="16"
+ width="16"
+ >
+ <use
+ xlink:href="#test-file-stub"
+ />
+ </svg>
+ </span>
+ <span
+ class="MuiTouchRipple-root"
+ />
+ </button>
+ <div
+ class="nodata-modal"
+ >
+ <div
+ class="question-mark"
+ >
+ <svg
+ class="styles__icon___23x3R"
+ height="36"
+ width="36"
+ >
+ <use
+ xlink:href="#test-file-stub"
+ />
+ </svg>
+ </div>
+ <div
+ class="text-20-normal title"
+ >
+ consumption_visualizer.why_no_data
+ </div>
+ <div
+ class="text-16-normal"
+ >
+ consumption_visualizer.dataModal.list_title
+ </div>
+ <ul>
+ <li>
+ consumption_visualizer.dataModal.item1
+ </li>
+ <li>
+ consumption_visualizer.dataModal.item2
+ </li>
+ <li>
+ consumption_visualizer.dataModal.item3
+ </li>
+ <li>
+ consumption_visualizer.dataModal.item4
+ </li>
+ </ul>
+ <button
+ aria-label="ecogesture_info_modal.button_close"
+ class="MuiButtonBase-root MuiButton-root MuiButton-text btnPrimary"
+ tabindex="0"
+ type="button"
>
- <div
- className="MuiDialog-root modal-root"
- onKeyDown={[Function]}
- role="presentation"
- style={
- Object {
- "bottom": 0,
- "left": 0,
- "position": "fixed",
- "right": 0,
- "top": 0,
- "zIndex": 1300,
- }
- }
+ <span
+ class="MuiButton-label"
>
- <WithStyles(ForwardRef(Backdrop))
- onClick={[Function]}
- open={true}
- transitionDuration={
- Object {
- "enter": 225,
- "exit": 195,
- }
- }
- >
- <ForwardRef(Backdrop)
- classes={
- Object {
- "invisible": "MuiBackdrop-invisible",
- "root": "MuiBackdrop-root",
- }
- }
- onClick={[Function]}
- open={true}
- transitionDuration={
- Object {
- "enter": 225,
- "exit": 195,
- }
- }
- >
- <ForwardRef(Fade)
- in={true}
- onClick={[Function]}
- timeout={
- Object {
- "enter": 225,
- "exit": 195,
- }
- }
- >
- <Transition
- appear={true}
- enter={true}
- exit={true}
- in={true}
- mountOnEnter={false}
- onClick={[Function]}
- onEnter={[Function]}
- onEntered={[Function]}
- onEntering={[Function]}
- onExit={[Function]}
- onExited={[Function]}
- onExiting={[Function]}
- timeout={
- Object {
- "enter": 225,
- "exit": 195,
- }
- }
- unmountOnExit={false}
- >
- <div
- aria-hidden={true}
- className="MuiBackdrop-root"
- onClick={[Function]}
- style={
- Object {
- "opacity": 1,
- "visibility": undefined,
- }
- }
- />
- </Transition>
- </ForwardRef(Fade)>
- </ForwardRef(Backdrop)>
- </WithStyles(ForwardRef(Backdrop))>
- <Unstable_TrapFocus
- disableAutoFocus={false}
- disableEnforceFocus={false}
- disableRestoreFocus={false}
- getDoc={[Function]}
- isEnabled={[Function]}
- open={true}
- >
- <div
- data-test="sentinelStart"
- tabIndex={0}
- />
- <ForwardRef(Fade)
- appear={true}
- in={true}
- onEnter={[Function]}
- onExited={[Function]}
- role="none presentation"
- tabIndex="-1"
- timeout={
- Object {
- "enter": 225,
- "exit": 195,
- }
- }
- >
- <Transition
- appear={true}
- enter={true}
- exit={true}
- in={true}
- mountOnEnter={false}
- onEnter={[Function]}
- onEntered={[Function]}
- onEntering={[Function]}
- onExit={[Function]}
- onExited={[Function]}
- onExiting={[Function]}
- role="none presentation"
- tabIndex="-1"
- timeout={
- Object {
- "enter": 225,
- "exit": 195,
- }
- }
- unmountOnExit={false}
- >
- <div
- className="MuiDialog-container MuiDialog-scrollPaper"
- onMouseDown={[Function]}
- onMouseUp={[Function]}
- role="none presentation"
- style={
- Object {
- "opacity": 1,
- "visibility": undefined,
- }
- }
- tabIndex="-1"
- >
- <WithStyles(ForwardRef(Paper))
- aria-labelledby="accessibility-title"
- className="MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm"
- elevation={24}
- role="dialog"
- >
- <ForwardRef(Paper)
- aria-labelledby="accessibility-title"
- className="MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm"
- classes={
- Object {
- "elevation0": "MuiPaper-elevation0",
- "elevation1": "MuiPaper-elevation1",
- "elevation10": "MuiPaper-elevation10",
- "elevation11": "MuiPaper-elevation11",
- "elevation12": "MuiPaper-elevation12",
- "elevation13": "MuiPaper-elevation13",
- "elevation14": "MuiPaper-elevation14",
- "elevation15": "MuiPaper-elevation15",
- "elevation16": "MuiPaper-elevation16",
- "elevation17": "MuiPaper-elevation17",
- "elevation18": "MuiPaper-elevation18",
- "elevation19": "MuiPaper-elevation19",
- "elevation2": "MuiPaper-elevation2",
- "elevation20": "MuiPaper-elevation20",
- "elevation21": "MuiPaper-elevation21",
- "elevation22": "MuiPaper-elevation22",
- "elevation23": "MuiPaper-elevation23",
- "elevation24": "MuiPaper-elevation24",
- "elevation3": "MuiPaper-elevation3",
- "elevation4": "MuiPaper-elevation4",
- "elevation5": "MuiPaper-elevation5",
- "elevation6": "MuiPaper-elevation6",
- "elevation7": "MuiPaper-elevation7",
- "elevation8": "MuiPaper-elevation8",
- "elevation9": "MuiPaper-elevation9",
- "outlined": "MuiPaper-outlined",
- "root": "MuiPaper-root",
- "rounded": "MuiPaper-rounded",
- }
- }
- elevation={24}
- role="dialog"
- >
- <div
- aria-labelledby="accessibility-title"
- className="MuiPaper-root MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm MuiPaper-elevation24 MuiPaper-rounded"
- role="dialog"
- >
- <div
- id="accessibility-title"
- >
- consumption_visualizer.modal.window_title
- </div>
- <WithStyles(ForwardRef(IconButton))
- aria-label="consumption_visualizer.modal.close"
- className="modal-paper-close-button"
- onClick={[MockFunction]}
- >
- <ForwardRef(IconButton)
- aria-label="consumption_visualizer.modal.close"
- className="modal-paper-close-button"
- classes={
- Object {
- "colorInherit": "MuiIconButton-colorInherit",
- "colorPrimary": "MuiIconButton-colorPrimary",
- "colorSecondary": "MuiIconButton-colorSecondary",
- "disabled": "Mui-disabled",
- "edgeEnd": "MuiIconButton-edgeEnd",
- "edgeStart": "MuiIconButton-edgeStart",
- "label": "MuiIconButton-label",
- "root": "MuiIconButton-root",
- "sizeSmall": "MuiIconButton-sizeSmall",
- }
- }
- onClick={[MockFunction]}
- >
- <WithStyles(ForwardRef(ButtonBase))
- aria-label="consumption_visualizer.modal.close"
- centerRipple={true}
- className="MuiIconButton-root modal-paper-close-button"
- disabled={false}
- focusRipple={true}
- onClick={[MockFunction]}
- >
- <ForwardRef(ButtonBase)
- aria-label="consumption_visualizer.modal.close"
- centerRipple={true}
- className="MuiIconButton-root modal-paper-close-button"
- classes={
- Object {
- "disabled": "Mui-disabled",
- "focusVisible": "Mui-focusVisible",
- "root": "MuiButtonBase-root",
- }
- }
- disabled={false}
- focusRipple={true}
- onClick={[MockFunction]}
- >
- <button
- aria-label="consumption_visualizer.modal.close"
- className="MuiButtonBase-root MuiIconButton-root modal-paper-close-button"
- disabled={false}
- onBlur={[Function]}
- onClick={[MockFunction]}
- onDragLeave={[Function]}
- onFocus={[Function]}
- onKeyDown={[Function]}
- onKeyUp={[Function]}
- onMouseDown={[Function]}
- onMouseLeave={[Function]}
- onMouseUp={[Function]}
- onTouchEnd={[Function]}
- onTouchMove={[Function]}
- onTouchStart={[Function]}
- tabIndex={0}
- type="button"
- >
- <span
- className="MuiIconButton-label"
- >
- <Icon
- icon="test-file-stub"
- size={16}
- spin={false}
- >
- <Component
- className="styles__icon___23x3R"
- height={16}
- style={Object {}}
- width={16}
- >
- <svg
- className="styles__icon___23x3R"
- height={16}
- style={Object {}}
- width={16}
- >
- <use
- xlinkHref="#test-file-stub"
- />
- </svg>
- </Component>
- </Icon>
- </span>
- <WithStyles(memo)
- center={true}
- >
- <ForwardRef(TouchRipple)
- center={true}
- classes={
- Object {
- "child": "MuiTouchRipple-child",
- "childLeaving": "MuiTouchRipple-childLeaving",
- "childPulsate": "MuiTouchRipple-childPulsate",
- "ripple": "MuiTouchRipple-ripple",
- "ripplePulsate": "MuiTouchRipple-ripplePulsate",
- "rippleVisible": "MuiTouchRipple-rippleVisible",
- "root": "MuiTouchRipple-root",
- }
- }
- >
- <span
- className="MuiTouchRipple-root"
- >
- <TransitionGroup
- childFactory={[Function]}
- component={null}
- exit={true}
- />
- </span>
- </ForwardRef(TouchRipple)>
- </WithStyles(memo)>
- </button>
- </ForwardRef(ButtonBase)>
- </WithStyles(ForwardRef(ButtonBase))>
- </ForwardRef(IconButton)>
- </WithStyles(ForwardRef(IconButton))>
- <div
- className="nodata-modal"
- >
- <div
- className="question-mark"
- >
- <Icon
- icon="test-file-stub"
- size={36}
- spin={false}
- >
- <Component
- className="styles__icon___23x3R"
- height={36}
- style={Object {}}
- width={36}
- >
- <svg
- className="styles__icon___23x3R"
- height={36}
- style={Object {}}
- width={36}
- >
- <use
- xlinkHref="#test-file-stub"
- />
- </svg>
- </Component>
- </Icon>
- </div>
- <div
- className="text-20-normal title"
- >
- consumption_visualizer.why_no_data
- </div>
- <div
- className="text-16-normal"
- >
- consumption_visualizer.dataModal.list_title
- </div>
- <ul>
- <li>
- consumption_visualizer.dataModal.item1
- </li>
- <li>
- consumption_visualizer.dataModal.item2
- </li>
- <li>
- consumption_visualizer.dataModal.item3
- </li>
- <li>
- consumption_visualizer.dataModal.item4
- </li>
- </ul>
- <WithStyles(ForwardRef(Button))
- aria-label="ecogesture_info_modal.button_close"
- classes={
- Object {
- "label": "text-16-bold",
- "root": "btn-highlight",
- }
- }
- onClick={[MockFunction]}
- >
- <ForwardRef(Button)
- aria-label="ecogesture_info_modal.button_close"
- classes={
- Object {
- "colorInherit": "MuiButton-colorInherit",
- "contained": "MuiButton-contained",
- "containedPrimary": "MuiButton-containedPrimary",
- "containedSecondary": "MuiButton-containedSecondary",
- "containedSizeLarge": "MuiButton-containedSizeLarge",
- "containedSizeSmall": "MuiButton-containedSizeSmall",
- "disableElevation": "MuiButton-disableElevation",
- "disabled": "Mui-disabled",
- "endIcon": "MuiButton-endIcon",
- "focusVisible": "Mui-focusVisible",
- "fullWidth": "MuiButton-fullWidth",
- "iconSizeLarge": "MuiButton-iconSizeLarge",
- "iconSizeMedium": "MuiButton-iconSizeMedium",
- "iconSizeSmall": "MuiButton-iconSizeSmall",
- "label": "MuiButton-label text-16-bold",
- "outlined": "MuiButton-outlined",
- "outlinedPrimary": "MuiButton-outlinedPrimary",
- "outlinedSecondary": "MuiButton-outlinedSecondary",
- "outlinedSizeLarge": "MuiButton-outlinedSizeLarge",
- "outlinedSizeSmall": "MuiButton-outlinedSizeSmall",
- "root": "MuiButton-root btn-highlight",
- "sizeLarge": "MuiButton-sizeLarge",
- "sizeSmall": "MuiButton-sizeSmall",
- "startIcon": "MuiButton-startIcon",
- "text": "MuiButton-text",
- "textPrimary": "MuiButton-textPrimary",
- "textSecondary": "MuiButton-textSecondary",
- "textSizeLarge": "MuiButton-textSizeLarge",
- "textSizeSmall": "MuiButton-textSizeSmall",
- }
- }
- onClick={[MockFunction]}
- >
- <WithStyles(ForwardRef(ButtonBase))
- aria-label="ecogesture_info_modal.button_close"
- className="MuiButton-root btn-highlight MuiButton-text"
- component="button"
- disabled={false}
- focusRipple={true}
- focusVisibleClassName="Mui-focusVisible"
- onClick={[MockFunction]}
- type="button"
- >
- <ForwardRef(ButtonBase)
- aria-label="ecogesture_info_modal.button_close"
- className="MuiButton-root btn-highlight MuiButton-text"
- classes={
- Object {
- "disabled": "Mui-disabled",
- "focusVisible": "Mui-focusVisible",
- "root": "MuiButtonBase-root",
- }
- }
- component="button"
- disabled={false}
- focusRipple={true}
- focusVisibleClassName="Mui-focusVisible"
- onClick={[MockFunction]}
- type="button"
- >
- <button
- aria-label="ecogesture_info_modal.button_close"
- className="MuiButtonBase-root MuiButton-root btn-highlight MuiButton-text"
- disabled={false}
- onBlur={[Function]}
- onClick={[MockFunction]}
- onDragLeave={[Function]}
- onFocus={[Function]}
- onKeyDown={[Function]}
- onKeyUp={[Function]}
- onMouseDown={[Function]}
- onMouseLeave={[Function]}
- onMouseUp={[Function]}
- onTouchEnd={[Function]}
- onTouchMove={[Function]}
- onTouchStart={[Function]}
- tabIndex={0}
- type="button"
- >
- <span
- className="MuiButton-label text-16-bold"
- >
- ecogesture_info_modal.button_close
- </span>
- <WithStyles(memo)
- center={false}
- >
- <ForwardRef(TouchRipple)
- center={false}
- classes={
- Object {
- "child": "MuiTouchRipple-child",
- "childLeaving": "MuiTouchRipple-childLeaving",
- "childPulsate": "MuiTouchRipple-childPulsate",
- "ripple": "MuiTouchRipple-ripple",
- "ripplePulsate": "MuiTouchRipple-ripplePulsate",
- "rippleVisible": "MuiTouchRipple-rippleVisible",
- "root": "MuiTouchRipple-root",
- }
- }
- >
- <span
- className="MuiTouchRipple-root"
- >
- <TransitionGroup
- childFactory={[Function]}
- component={null}
- exit={true}
- />
- </span>
- </ForwardRef(TouchRipple)>
- </WithStyles(memo)>
- </button>
- </ForwardRef(ButtonBase)>
- </WithStyles(ForwardRef(ButtonBase))>
- </ForwardRef(Button)>
- </WithStyles(ForwardRef(Button))>
- </div>
- </div>
- </ForwardRef(Paper)>
- </WithStyles(ForwardRef(Paper))>
- </div>
- </Transition>
- </ForwardRef(Fade)>
- <div
- data-test="sentinelEnd"
- tabIndex={0}
- />
- </Unstable_TrapFocus>
- </div>
- </Portal>
- </ForwardRef(Portal)>
- </ForwardRef(Modal)>
- </ForwardRef(Dialog)>
- </WithStyles(ForwardRef(Dialog))>
-</NoDataModal>
+ ecogesture_info_modal.button_close
+ </span>
+ <span
+ class="MuiTouchRipple-root"
+ />
+ </button>
+ </div>
+ </div>
+ </div>
+ <div
+ data-test="sentinelEnd"
+ tabindex="0"
+ />
+ </div>
+</body>
`;
diff --git a/src/components/ConsumptionVisualizer/dataloadConsumptionVisualizer.scss b/src/components/ConsumptionVisualizer/dataloadConsumptionVisualizer.scss
index d7c31f56252b7913e0ba71ec1514c320bab647d1..a116495e40a7d6b79a81e242827a4193b840e3fb 100644
--- a/src/components/ConsumptionVisualizer/dataloadConsumptionVisualizer.scss
+++ b/src/components/ConsumptionVisualizer/dataloadConsumptionVisualizer.scss
@@ -43,23 +43,11 @@
padding: 0.5rem 0.5rem;
}
.dataloadvisualizer-value {
- flex-direction: row;
- & span {
- align-self: flex-end;
- margin-left: 0.5em;
- }
- .euroUnit {
- margin-left: 0.4em;
- position: relative;
- top: -12px;
- }
- .estimated {
- cursor: pointer;
- font-weight: 500;
- text-decoration: underline;
- margin-left: 0.5rem;
- position: relative;
- top: -12px;
+ display: flex;
+ gap: 0.4rem;
+ align-items: center;
+ &.alignTop {
+ align-items: flex-start;
}
}
.upper {
diff --git a/src/components/Content/Content.spec.tsx b/src/components/Content/Content.spec.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..33f8405641d3a810e3aeba704fb74c7eee72e220
--- /dev/null
+++ b/src/components/Content/Content.spec.tsx
@@ -0,0 +1,39 @@
+import { render, screen, waitFor } from '@testing-library/react'
+import React from 'react'
+import { Provider } from 'react-redux'
+import {
+ createMockEcolyoStore,
+ mockChallengeState,
+ mockGlobalState,
+} from 'tests/__mocks__/store'
+import Content from './Content'
+
+window.scrollTo = jest.fn()
+
+const store = createMockEcolyoStore()
+describe('Content component', () => {
+ it('should match snapshot', async () => {
+ const { container } = render(
+ <Provider store={store}>
+ <Content>children</Content>
+ </Provider>
+ )
+ await waitFor(() => null, { container })
+ expect(container).toMatchSnapshot()
+ })
+
+ it('should be rendered with feedback modal opened', async () => {
+ const store = createMockEcolyoStore({
+ global: mockGlobalState,
+ challenge: mockChallengeState,
+ modal: { isFeedbacksOpen: true },
+ })
+ const { container } = render(
+ <Provider store={store}>
+ <Content>children</Content>
+ </Provider>
+ )
+ await waitFor(() => null, { container })
+ expect(screen.getByRole('dialog')).toBeInTheDocument()
+ })
+})
diff --git a/src/components/Content/__snapshots__/Content.spec.tsx.snap b/src/components/Content/__snapshots__/Content.spec.tsx.snap
new file mode 100644
index 0000000000000000000000000000000000000000..9fc72e1b3ca438b10ddb746aec2a30352432ed49
--- /dev/null
+++ b/src/components/Content/__snapshots__/Content.spec.tsx.snap
@@ -0,0 +1,12 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Content component should match snapshot 1`] = `
+<div>
+ <div
+ class="content-view"
+ style="margin-top: 0px; padding-bottom: 0px; min-height: calc(100vh - 0px - 48px - 56px - env(safe-area-inset-top) - env(safe-area-inset-bottom) - env(safe-area-inset-bottom));"
+ >
+ children
+ </div>
+</div>
+`;
diff --git a/src/components/CustomPopup/CustomPopupModal.spec.tsx b/src/components/CustomPopup/CustomPopupModal.spec.tsx
index 5c7a807be742818b637fdd9bbfdf7363de51112e..1503e148ed3cff773276022130c3d56ba88b0ef7 100644
--- a/src/components/CustomPopup/CustomPopupModal.spec.tsx
+++ b/src/components/CustomPopup/CustomPopupModal.spec.tsx
@@ -1,6 +1,5 @@
-import { Button } from '@material-ui/core'
-import { mount } from 'enzyme'
-import toJson from 'enzyme-to-json'
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
import React from 'react'
import {
mockCustomPopup,
@@ -12,38 +11,61 @@ import CustomPopupModal from './CustomPopupModal'
const mockHandleClose = jest.fn()
describe('CustomPopupModal component', () => {
- const wrapper = mount(
- <CustomPopupModal
- customPopup={mockCustomPopup}
- handleCloseClick={mockHandleClose}
- />
- )
it('should render correctly', () => {
- expect(toJson(wrapper)).toMatchSnapshot()
+ const { baseElement } = render(
+ <CustomPopupModal
+ customPopup={mockCustomPopup}
+ handleCloseClick={mockHandleClose}
+ />
+ )
+ expect(baseElement).toMatchSnapshot()
})
- it('should close modal', () => {
- wrapper.find(Button).simulate('click')
- expect(mockHandleClose).toHaveBeenCalled()
+ it('should render correct title and description', () => {
+ render(
+ <CustomPopupModal
+ customPopup={mockCustomPopup}
+ handleCloseClick={mockHandleClose}
+ />
+ )
+ expect(screen.getByTestId('title')).toHaveTextContent(mockCustomPopup.title)
+ expect(screen.getByTestId('description')).toHaveTextContent(
+ mockCustomPopup.description
+ )
})
it('should not be rendered, popup not enabled', () => {
- const wrapper = mount(
+ render(
<CustomPopupModal
customPopup={mockCustomPopupOff}
handleCloseClick={mockHandleClose}
/>
)
- expect(wrapper.find('div.customPopupModal').exists()).toBeFalsy()
+ const modal = screen.queryByTestId('title')
+ expect(modal).not.toBeInTheDocument()
})
it('should not be rendered, popup outdated', () => {
- const wrapper = mount(
+ render(
<CustomPopupModal
customPopup={mockCustomPopupOutdated}
handleCloseClick={mockHandleClose}
/>
)
- expect(wrapper.find('div.customPopupModal').exists()).toBeFalsy()
+ const modal = screen.queryByTestId('title')
+ expect(modal).not.toBeInTheDocument()
+ })
+
+ it('should close modal', async () => {
+ render(
+ <CustomPopupModal
+ customPopup={mockCustomPopup}
+ handleCloseClick={mockHandleClose}
+ />
+ )
+ await userEvent.click(
+ screen.getByText('consumption.partner_issue_modal.ok')
+ )
+ expect(mockHandleClose).toHaveBeenCalled()
})
})
diff --git a/src/components/CustomPopup/CustomPopupModal.tsx b/src/components/CustomPopup/CustomPopupModal.tsx
index 3dcc5e49aa0597994118ab204e480c94a69df3c3..17f70a4af88a2a22ae82fd40f5c75fb6a0665b74 100644
--- a/src/components/CustomPopup/CustomPopupModal.tsx
+++ b/src/components/CustomPopup/CustomPopupModal.tsx
@@ -48,24 +48,19 @@ const CustomPopupModal = ({
<div className="customPopupModal">
<StyledIcon icon={Speaker} size={100} />
- <div className="customPopup-title text-20-bold">
+ <div className="customPopup-title text-20-bold" data-testid="title">
{customPopup.title}
</div>
<div
className="customPopup-content text-16-normal"
+ data-testid="description"
dangerouslySetInnerHTML={{
__html: customPopup.description,
}}
/>
- <Button
- onClick={handleCloseClick}
- classes={{
- root: 'btn-highlight ',
- label: 'text-16-bold',
- }}
- >
+ <Button onClick={handleCloseClick} className="btnPrimary">
{t('consumption.partner_issue_modal.ok')}
</Button>
</div>
diff --git a/src/components/CustomPopup/__snapshots__/CustomPopupModal.spec.tsx.snap b/src/components/CustomPopup/__snapshots__/CustomPopupModal.spec.tsx.snap
index 7a89a437bc8205c4758d0a148d7120fb50dcaf50..95b7473c4ce76b511f56cff07aa80cf143a5476b 100644
--- a/src/components/CustomPopup/__snapshots__/CustomPopupModal.spec.tsx.snap
+++ b/src/components/CustomPopup/__snapshots__/CustomPopupModal.spec.tsx.snap
@@ -1,1010 +1,111 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`CustomPopupModal component should render correctly 1`] = `
-<CustomPopupModal
- customPopup={
- Object {
- "description": "Interesting description",
- "endDate": "2099-10-04T15:10:53.219+02:00",
- "popupEnabled": true,
- "title": "Bold title",
- }
- }
- handleCloseClick={[MockFunction]}
+<body
+ style="padding-right: 0px; overflow: hidden;"
>
- <WithStyles(ForwardRef(Dialog))
- aria-labelledby="accessibility-title"
- classes={
- Object {
- "paper": "modal-paper customPopupRoot",
- "root": "modal-root",
- }
- }
- disableEscapeKeyDown={true}
- onClose={[Function]}
- open={true}
+ <div
+ aria-hidden="true"
+ />
+ <div
+ class="MuiDialog-root modal-root"
+ role="presentation"
+ style="position: fixed; z-index: 1300; right: 0px; bottom: 0px; top: 0px; left: 0px;"
>
- <ForwardRef(Dialog)
- aria-labelledby="accessibility-title"
- classes={
- Object {
- "container": "MuiDialog-container",
- "paper": "MuiDialog-paper modal-paper customPopupRoot",
- "paperFullScreen": "MuiDialog-paperFullScreen",
- "paperFullWidth": "MuiDialog-paperFullWidth",
- "paperScrollBody": "MuiDialog-paperScrollBody",
- "paperScrollPaper": "MuiDialog-paperScrollPaper",
- "paperWidthFalse": "MuiDialog-paperWidthFalse",
- "paperWidthLg": "MuiDialog-paperWidthLg",
- "paperWidthMd": "MuiDialog-paperWidthMd",
- "paperWidthSm": "MuiDialog-paperWidthSm",
- "paperWidthXl": "MuiDialog-paperWidthXl",
- "paperWidthXs": "MuiDialog-paperWidthXs",
- "root": "MuiDialog-root modal-root",
- "scrollBody": "MuiDialog-scrollBody",
- "scrollPaper": "MuiDialog-scrollPaper",
- }
- }
- disableEscapeKeyDown={true}
- onClose={[Function]}
- open={true}
+ <div
+ aria-hidden="true"
+ class="MuiBackdrop-root"
+ style="opacity: 1; webkit-transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"
+ />
+ <div
+ data-test="sentinelStart"
+ tabindex="0"
+ />
+ <div
+ class="MuiDialog-container MuiDialog-scrollPaper"
+ role="none presentation"
+ style="opacity: 1; webkit-transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"
+ tabindex="-1"
>
- <ForwardRef(Modal)
- BackdropComponent={
- Object {
- "$$typeof": Symbol(react.forward_ref),
- "Naked": Object {
- "$$typeof": Symbol(react.forward_ref),
- "propTypes": Object {
- "children": [Function],
- "className": [Function],
- "classes": [Function],
- "invisible": [Function],
- "open": [Function],
- "transitionDuration": [Function],
- },
- "render": [Function],
- },
- "displayName": "WithStyles(ForwardRef(Backdrop))",
- "options": Object {
- "defaultTheme": Object {
- "breakpoints": Object {
- "between": [Function],
- "down": [Function],
- "keys": Array [
- "xs",
- "sm",
- "md",
- "lg",
- "xl",
- ],
- "only": [Function],
- "up": [Function],
- "values": Object {
- "lg": 1280,
- "md": 960,
- "sm": 600,
- "xl": 1920,
- "xs": 0,
- },
- "width": [Function],
- },
- "direction": "ltr",
- "mixins": Object {
- "gutters": [Function],
- "toolbar": Object {
- "@media (min-width:0px) and (orientation: landscape)": Object {
- "minHeight": 48,
- },
- "@media (min-width:600px)": Object {
- "minHeight": 64,
- },
- "minHeight": 56,
- },
- },
- "overrides": Object {},
- "palette": Object {
- "action": Object {
- "activatedOpacity": 0.12,
- "active": "rgba(0, 0, 0, 0.54)",
- "disabled": "rgba(0, 0, 0, 0.26)",
- "disabledBackground": "rgba(0, 0, 0, 0.12)",
- "disabledOpacity": 0.38,
- "focus": "rgba(0, 0, 0, 0.12)",
- "focusOpacity": 0.12,
- "hover": "rgba(0, 0, 0, 0.04)",
- "hoverOpacity": 0.04,
- "selected": "rgba(0, 0, 0, 0.08)",
- "selectedOpacity": 0.08,
- },
- "augmentColor": [Function],
- "background": Object {
- "default": "#fafafa",
- "paper": "#fff",
- },
- "common": Object {
- "black": "#000",
- "white": "#fff",
- },
- "contrastThreshold": 3,
- "divider": "rgba(0, 0, 0, 0.12)",
- "error": Object {
- "contrastText": "#fff",
- "dark": "#d32f2f",
- "light": "#e57373",
- "main": "#f44336",
- },
- "getContrastText": [Function],
- "grey": Object {
- "100": "#f5f5f5",
- "200": "#eeeeee",
- "300": "#e0e0e0",
- "400": "#bdbdbd",
- "50": "#fafafa",
- "500": "#9e9e9e",
- "600": "#757575",
- "700": "#616161",
- "800": "#424242",
- "900": "#212121",
- "A100": "#d5d5d5",
- "A200": "#aaaaaa",
- "A400": "#303030",
- "A700": "#616161",
- },
- "info": Object {
- "contrastText": "#fff",
- "dark": "#1976d2",
- "light": "#64b5f6",
- "main": "#2196f3",
- },
- "primary": Object {
- "contrastText": "#fff",
- "dark": "#303f9f",
- "light": "#7986cb",
- "main": "#3f51b5",
- },
- "secondary": Object {
- "contrastText": "#fff",
- "dark": "#c51162",
- "light": "#ff4081",
- "main": "#f50057",
- },
- "success": Object {
- "contrastText": "rgba(0, 0, 0, 0.87)",
- "dark": "#388e3c",
- "light": "#81c784",
- "main": "#4caf50",
- },
- "text": Object {
- "disabled": "rgba(0, 0, 0, 0.38)",
- "hint": "rgba(0, 0, 0, 0.38)",
- "primary": "rgba(0, 0, 0, 0.87)",
- "secondary": "rgba(0, 0, 0, 0.54)",
- },
- "tonalOffset": 0.2,
- "type": "light",
- "warning": Object {
- "contrastText": "rgba(0, 0, 0, 0.87)",
- "dark": "#f57c00",
- "light": "#ffb74d",
- "main": "#ff9800",
- },
- },
- "props": Object {},
- "shadows": Array [
- "none",
- "0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12)",
- "0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12)",
- "0px 3px 3px -2px rgba(0,0,0,0.2),0px 3px 4px 0px rgba(0,0,0,0.14),0px 1px 8px 0px rgba(0,0,0,0.12)",
- "0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12)",
- "0px 3px 5px -1px rgba(0,0,0,0.2),0px 5px 8px 0px rgba(0,0,0,0.14),0px 1px 14px 0px rgba(0,0,0,0.12)",
- "0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12)",
- "0px 4px 5px -2px rgba(0,0,0,0.2),0px 7px 10px 1px rgba(0,0,0,0.14),0px 2px 16px 1px rgba(0,0,0,0.12)",
- "0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12)",
- "0px 5px 6px -3px rgba(0,0,0,0.2),0px 9px 12px 1px rgba(0,0,0,0.14),0px 3px 16px 2px rgba(0,0,0,0.12)",
- "0px 6px 6px -3px rgba(0,0,0,0.2),0px 10px 14px 1px rgba(0,0,0,0.14),0px 4px 18px 3px rgba(0,0,0,0.12)",
- "0px 6px 7px -4px rgba(0,0,0,0.2),0px 11px 15px 1px rgba(0,0,0,0.14),0px 4px 20px 3px rgba(0,0,0,0.12)",
- "0px 7px 8px -4px rgba(0,0,0,0.2),0px 12px 17px 2px rgba(0,0,0,0.14),0px 5px 22px 4px rgba(0,0,0,0.12)",
- "0px 7px 8px -4px rgba(0,0,0,0.2),0px 13px 19px 2px rgba(0,0,0,0.14),0px 5px 24px 4px rgba(0,0,0,0.12)",
- "0px 7px 9px -4px rgba(0,0,0,0.2),0px 14px 21px 2px rgba(0,0,0,0.14),0px 5px 26px 4px rgba(0,0,0,0.12)",
- "0px 8px 9px -5px rgba(0,0,0,0.2),0px 15px 22px 2px rgba(0,0,0,0.14),0px 6px 28px 5px rgba(0,0,0,0.12)",
- "0px 8px 10px -5px rgba(0,0,0,0.2),0px 16px 24px 2px rgba(0,0,0,0.14),0px 6px 30px 5px rgba(0,0,0,0.12)",
- "0px 8px 11px -5px rgba(0,0,0,0.2),0px 17px 26px 2px rgba(0,0,0,0.14),0px 6px 32px 5px rgba(0,0,0,0.12)",
- "0px 9px 11px -5px rgba(0,0,0,0.2),0px 18px 28px 2px rgba(0,0,0,0.14),0px 7px 34px 6px rgba(0,0,0,0.12)",
- "0px 9px 12px -6px rgba(0,0,0,0.2),0px 19px 29px 2px rgba(0,0,0,0.14),0px 7px 36px 6px rgba(0,0,0,0.12)",
- "0px 10px 13px -6px rgba(0,0,0,0.2),0px 20px 31px 3px rgba(0,0,0,0.14),0px 8px 38px 7px rgba(0,0,0,0.12)",
- "0px 10px 13px -6px rgba(0,0,0,0.2),0px 21px 33px 3px rgba(0,0,0,0.14),0px 8px 40px 7px rgba(0,0,0,0.12)",
- "0px 10px 14px -6px rgba(0,0,0,0.2),0px 22px 35px 3px rgba(0,0,0,0.14),0px 8px 42px 7px rgba(0,0,0,0.12)",
- "0px 11px 14px -7px rgba(0,0,0,0.2),0px 23px 36px 3px rgba(0,0,0,0.14),0px 9px 44px 8px rgba(0,0,0,0.12)",
- "0px 11px 15px -7px rgba(0,0,0,0.2),0px 24px 38px 3px rgba(0,0,0,0.14),0px 9px 46px 8px rgba(0,0,0,0.12)",
- ],
- "shape": Object {
- "borderRadius": 4,
- },
- "spacing": [Function],
- "transitions": Object {
- "create": [Function],
- "duration": Object {
- "complex": 375,
- "enteringScreen": 225,
- "leavingScreen": 195,
- "short": 250,
- "shorter": 200,
- "shortest": 150,
- "standard": 300,
- },
- "easing": Object {
- "easeIn": "cubic-bezier(0.4, 0, 1, 1)",
- "easeInOut": "cubic-bezier(0.4, 0, 0.2, 1)",
- "easeOut": "cubic-bezier(0.0, 0, 0.2, 1)",
- "sharp": "cubic-bezier(0.4, 0, 0.6, 1)",
- },
- "getAutoHeightDuration": [Function],
- },
- "typography": Object {
- "body1": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "1rem",
- "fontWeight": 400,
- "letterSpacing": "0.00938em",
- "lineHeight": 1.5,
- },
- "body2": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "0.875rem",
- "fontWeight": 400,
- "letterSpacing": "0.01071em",
- "lineHeight": 1.43,
- },
- "button": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "0.875rem",
- "fontWeight": 500,
- "letterSpacing": "0.02857em",
- "lineHeight": 1.75,
- "textTransform": "uppercase",
- },
- "caption": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "0.75rem",
- "fontWeight": 400,
- "letterSpacing": "0.03333em",
- "lineHeight": 1.66,
- },
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": 14,
- "fontWeightBold": 700,
- "fontWeightLight": 300,
- "fontWeightMedium": 500,
- "fontWeightRegular": 400,
- "h1": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "6rem",
- "fontWeight": 300,
- "letterSpacing": "-0.01562em",
- "lineHeight": 1.167,
- },
- "h2": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "3.75rem",
- "fontWeight": 300,
- "letterSpacing": "-0.00833em",
- "lineHeight": 1.2,
- },
- "h3": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "3rem",
- "fontWeight": 400,
- "letterSpacing": "0em",
- "lineHeight": 1.167,
- },
- "h4": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "2.125rem",
- "fontWeight": 400,
- "letterSpacing": "0.00735em",
- "lineHeight": 1.235,
- },
- "h5": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "1.5rem",
- "fontWeight": 400,
- "letterSpacing": "0em",
- "lineHeight": 1.334,
- },
- "h6": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "1.25rem",
- "fontWeight": 500,
- "letterSpacing": "0.0075em",
- "lineHeight": 1.6,
- },
- "htmlFontSize": 16,
- "overline": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "0.75rem",
- "fontWeight": 400,
- "letterSpacing": "0.08333em",
- "lineHeight": 2.66,
- "textTransform": "uppercase",
- },
- "pxToRem": [Function],
- "round": [Function],
- "subtitle1": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "1rem",
- "fontWeight": 400,
- "letterSpacing": "0.00938em",
- "lineHeight": 1.75,
- },
- "subtitle2": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "0.875rem",
- "fontWeight": 500,
- "letterSpacing": "0.00714em",
- "lineHeight": 1.57,
- },
- },
- "zIndex": Object {
- "appBar": 1100,
- "drawer": 1200,
- "mobileStepper": 1000,
- "modal": 1300,
- "snackbar": 1400,
- "speedDial": 1050,
- "tooltip": 1500,
- },
- },
- "name": "MuiBackdrop",
- },
- "propTypes": Object {
- "classes": [Function],
- "innerRef": [Function],
- },
- "render": [Function],
- "useStyles": [Function],
- }
- }
- BackdropProps={
- Object {
- "transitionDuration": Object {
- "enter": 225,
- "exit": 195,
- },
- }
- }
- className="MuiDialog-root modal-root"
- closeAfterTransition={true}
- disableEscapeKeyDown={true}
- onClose={[Function]}
- open={true}
+ <div
+ aria-labelledby="accessibility-title"
+ class="MuiPaper-root MuiDialog-paper modal-paper customPopupRoot MuiDialog-paperScrollPaper MuiDialog-paperWidthSm MuiPaper-elevation24 MuiPaper-rounded"
+ role="dialog"
>
- <ForwardRef(Portal)
- disablePortal={false}
+ <div
+ id="accessibility-title"
>
- <Portal
- containerInfo={
- <body
- style="padding-right: 0px; overflow: hidden;"
- >
- <div
- class="MuiDialog-root modal-root"
- role="presentation"
- style="position: fixed; z-index: 1300; right: 0px; bottom: 0px; top: 0px; left: 0px;"
- >
- <div
- aria-hidden="true"
- class="MuiBackdrop-root"
- style="opacity: 1; webkit-transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"
- />
- <div
- data-test="sentinelStart"
- tabindex="0"
- />
- <div
- class="MuiDialog-container MuiDialog-scrollPaper"
- role="none presentation"
- style="opacity: 1; webkit-transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"
- tabindex="-1"
- >
- <div
- aria-labelledby="accessibility-title"
- class="MuiPaper-root MuiDialog-paper modal-paper customPopupRoot MuiDialog-paperScrollPaper MuiDialog-paperWidthSm MuiPaper-elevation24 MuiPaper-rounded"
- role="dialog"
- >
- <div
- id="accessibility-title"
- >
- Bold title
- </div>
- <button
- aria-label="feedback.accessibility.button_close"
- class="MuiButtonBase-root MuiIconButton-root modal-paper-close-button"
- tabindex="0"
- type="button"
- >
- <span
- class="MuiIconButton-label"
- >
- <svg
- class="styles__icon___23x3R"
- height="16"
- width="16"
- >
- <use
- xlink:href="#test-file-stub"
- />
- </svg>
- </span>
- <span
- class="MuiTouchRipple-root"
- />
- </button>
- <div
- class="customPopupModal"
- >
- <svg
- aria-hidden="true"
- class="styles__icon___23x3R"
- height="100"
- width="100"
- >
- <use
- xlink:href="#test-file-stub"
- />
- </svg>
- <div
- class="customPopup-title text-20-bold"
- >
- Bold title
- </div>
- <div
- class="customPopup-content text-16-normal"
- >
- Interesting description
- </div>
- <button
- class="MuiButtonBase-root MuiButton-root btn-highlight MuiButton-text"
- tabindex="0"
- type="button"
- >
- <span
- class="MuiButton-label text-16-bold"
- >
- consumption.partner_issue_modal.ok
- </span>
- <span
- class="MuiTouchRipple-root"
- />
- </button>
- </div>
- </div>
- </div>
- <div
- data-test="sentinelEnd"
- tabindex="0"
- />
- </div>
- </body>
- }
+ Bold title
+ </div>
+ <button
+ aria-label="feedback.accessibility.button_close"
+ class="MuiButtonBase-root MuiIconButton-root modal-paper-close-button"
+ tabindex="0"
+ type="button"
+ >
+ <span
+ class="MuiIconButton-label"
+ >
+ <svg
+ class="styles__icon___23x3R"
+ height="16"
+ width="16"
+ >
+ <use
+ xlink:href="#test-file-stub"
+ />
+ </svg>
+ </span>
+ <span
+ class="MuiTouchRipple-root"
+ />
+ </button>
+ <div
+ class="customPopupModal"
+ >
+ <svg
+ aria-hidden="true"
+ class="styles__icon___23x3R"
+ height="100"
+ width="100"
+ >
+ <use
+ xlink:href="#test-file-stub"
+ />
+ </svg>
+ <div
+ class="customPopup-title text-20-bold"
+ data-testid="title"
+ >
+ Bold title
+ </div>
+ <div
+ class="customPopup-content text-16-normal"
+ data-testid="description"
+ >
+ Interesting description
+ </div>
+ <button
+ class="MuiButtonBase-root MuiButton-root MuiButton-text btnPrimary"
+ tabindex="0"
+ type="button"
>
- <div
- className="MuiDialog-root modal-root"
- onKeyDown={[Function]}
- role="presentation"
- style={
- Object {
- "bottom": 0,
- "left": 0,
- "position": "fixed",
- "right": 0,
- "top": 0,
- "zIndex": 1300,
- }
- }
+ <span
+ class="MuiButton-label"
>
- <WithStyles(ForwardRef(Backdrop))
- onClick={[Function]}
- open={true}
- transitionDuration={
- Object {
- "enter": 225,
- "exit": 195,
- }
- }
- >
- <ForwardRef(Backdrop)
- classes={
- Object {
- "invisible": "MuiBackdrop-invisible",
- "root": "MuiBackdrop-root",
- }
- }
- onClick={[Function]}
- open={true}
- transitionDuration={
- Object {
- "enter": 225,
- "exit": 195,
- }
- }
- >
- <ForwardRef(Fade)
- in={true}
- onClick={[Function]}
- timeout={
- Object {
- "enter": 225,
- "exit": 195,
- }
- }
- >
- <Transition
- appear={true}
- enter={true}
- exit={true}
- in={true}
- mountOnEnter={false}
- onClick={[Function]}
- onEnter={[Function]}
- onEntered={[Function]}
- onEntering={[Function]}
- onExit={[Function]}
- onExited={[Function]}
- onExiting={[Function]}
- timeout={
- Object {
- "enter": 225,
- "exit": 195,
- }
- }
- unmountOnExit={false}
- >
- <div
- aria-hidden={true}
- className="MuiBackdrop-root"
- onClick={[Function]}
- style={
- Object {
- "opacity": 1,
- "visibility": undefined,
- }
- }
- />
- </Transition>
- </ForwardRef(Fade)>
- </ForwardRef(Backdrop)>
- </WithStyles(ForwardRef(Backdrop))>
- <Unstable_TrapFocus
- disableAutoFocus={false}
- disableEnforceFocus={false}
- disableRestoreFocus={false}
- getDoc={[Function]}
- isEnabled={[Function]}
- open={true}
- >
- <div
- data-test="sentinelStart"
- tabIndex={0}
- />
- <ForwardRef(Fade)
- appear={true}
- in={true}
- onEnter={[Function]}
- onExited={[Function]}
- role="none presentation"
- tabIndex="-1"
- timeout={
- Object {
- "enter": 225,
- "exit": 195,
- }
- }
- >
- <Transition
- appear={true}
- enter={true}
- exit={true}
- in={true}
- mountOnEnter={false}
- onEnter={[Function]}
- onEntered={[Function]}
- onEntering={[Function]}
- onExit={[Function]}
- onExited={[Function]}
- onExiting={[Function]}
- role="none presentation"
- tabIndex="-1"
- timeout={
- Object {
- "enter": 225,
- "exit": 195,
- }
- }
- unmountOnExit={false}
- >
- <div
- className="MuiDialog-container MuiDialog-scrollPaper"
- onMouseDown={[Function]}
- onMouseUp={[Function]}
- role="none presentation"
- style={
- Object {
- "opacity": 1,
- "visibility": undefined,
- }
- }
- tabIndex="-1"
- >
- <WithStyles(ForwardRef(Paper))
- aria-labelledby="accessibility-title"
- className="MuiDialog-paper modal-paper customPopupRoot MuiDialog-paperScrollPaper MuiDialog-paperWidthSm"
- elevation={24}
- role="dialog"
- >
- <ForwardRef(Paper)
- aria-labelledby="accessibility-title"
- className="MuiDialog-paper modal-paper customPopupRoot MuiDialog-paperScrollPaper MuiDialog-paperWidthSm"
- classes={
- Object {
- "elevation0": "MuiPaper-elevation0",
- "elevation1": "MuiPaper-elevation1",
- "elevation10": "MuiPaper-elevation10",
- "elevation11": "MuiPaper-elevation11",
- "elevation12": "MuiPaper-elevation12",
- "elevation13": "MuiPaper-elevation13",
- "elevation14": "MuiPaper-elevation14",
- "elevation15": "MuiPaper-elevation15",
- "elevation16": "MuiPaper-elevation16",
- "elevation17": "MuiPaper-elevation17",
- "elevation18": "MuiPaper-elevation18",
- "elevation19": "MuiPaper-elevation19",
- "elevation2": "MuiPaper-elevation2",
- "elevation20": "MuiPaper-elevation20",
- "elevation21": "MuiPaper-elevation21",
- "elevation22": "MuiPaper-elevation22",
- "elevation23": "MuiPaper-elevation23",
- "elevation24": "MuiPaper-elevation24",
- "elevation3": "MuiPaper-elevation3",
- "elevation4": "MuiPaper-elevation4",
- "elevation5": "MuiPaper-elevation5",
- "elevation6": "MuiPaper-elevation6",
- "elevation7": "MuiPaper-elevation7",
- "elevation8": "MuiPaper-elevation8",
- "elevation9": "MuiPaper-elevation9",
- "outlined": "MuiPaper-outlined",
- "root": "MuiPaper-root",
- "rounded": "MuiPaper-rounded",
- }
- }
- elevation={24}
- role="dialog"
- >
- <div
- aria-labelledby="accessibility-title"
- className="MuiPaper-root MuiDialog-paper modal-paper customPopupRoot MuiDialog-paperScrollPaper MuiDialog-paperWidthSm MuiPaper-elevation24 MuiPaper-rounded"
- role="dialog"
- >
- <div
- id="accessibility-title"
- >
- Bold title
- </div>
- <WithStyles(ForwardRef(IconButton))
- aria-label="feedback.accessibility.button_close"
- className="modal-paper-close-button"
- onClick={[MockFunction]}
- >
- <ForwardRef(IconButton)
- aria-label="feedback.accessibility.button_close"
- className="modal-paper-close-button"
- classes={
- Object {
- "colorInherit": "MuiIconButton-colorInherit",
- "colorPrimary": "MuiIconButton-colorPrimary",
- "colorSecondary": "MuiIconButton-colorSecondary",
- "disabled": "Mui-disabled",
- "edgeEnd": "MuiIconButton-edgeEnd",
- "edgeStart": "MuiIconButton-edgeStart",
- "label": "MuiIconButton-label",
- "root": "MuiIconButton-root",
- "sizeSmall": "MuiIconButton-sizeSmall",
- }
- }
- onClick={[MockFunction]}
- >
- <WithStyles(ForwardRef(ButtonBase))
- aria-label="feedback.accessibility.button_close"
- centerRipple={true}
- className="MuiIconButton-root modal-paper-close-button"
- disabled={false}
- focusRipple={true}
- onClick={[MockFunction]}
- >
- <ForwardRef(ButtonBase)
- aria-label="feedback.accessibility.button_close"
- centerRipple={true}
- className="MuiIconButton-root modal-paper-close-button"
- classes={
- Object {
- "disabled": "Mui-disabled",
- "focusVisible": "Mui-focusVisible",
- "root": "MuiButtonBase-root",
- }
- }
- disabled={false}
- focusRipple={true}
- onClick={[MockFunction]}
- >
- <button
- aria-label="feedback.accessibility.button_close"
- className="MuiButtonBase-root MuiIconButton-root modal-paper-close-button"
- disabled={false}
- onBlur={[Function]}
- onClick={[MockFunction]}
- onDragLeave={[Function]}
- onFocus={[Function]}
- onKeyDown={[Function]}
- onKeyUp={[Function]}
- onMouseDown={[Function]}
- onMouseLeave={[Function]}
- onMouseUp={[Function]}
- onTouchEnd={[Function]}
- onTouchMove={[Function]}
- onTouchStart={[Function]}
- tabIndex={0}
- type="button"
- >
- <span
- className="MuiIconButton-label"
- >
- <Icon
- icon="test-file-stub"
- size={16}
- spin={false}
- >
- <Component
- className="styles__icon___23x3R"
- height={16}
- style={Object {}}
- width={16}
- >
- <svg
- className="styles__icon___23x3R"
- height={16}
- style={Object {}}
- width={16}
- >
- <use
- xlinkHref="#test-file-stub"
- />
- </svg>
- </Component>
- </Icon>
- </span>
- <WithStyles(memo)
- center={true}
- >
- <ForwardRef(TouchRipple)
- center={true}
- classes={
- Object {
- "child": "MuiTouchRipple-child",
- "childLeaving": "MuiTouchRipple-childLeaving",
- "childPulsate": "MuiTouchRipple-childPulsate",
- "ripple": "MuiTouchRipple-ripple",
- "ripplePulsate": "MuiTouchRipple-ripplePulsate",
- "rippleVisible": "MuiTouchRipple-rippleVisible",
- "root": "MuiTouchRipple-root",
- }
- }
- >
- <span
- className="MuiTouchRipple-root"
- >
- <TransitionGroup
- childFactory={[Function]}
- component={null}
- exit={true}
- />
- </span>
- </ForwardRef(TouchRipple)>
- </WithStyles(memo)>
- </button>
- </ForwardRef(ButtonBase)>
- </WithStyles(ForwardRef(ButtonBase))>
- </ForwardRef(IconButton)>
- </WithStyles(ForwardRef(IconButton))>
- <div
- className="customPopupModal"
- >
- <StyledIcon
- icon="test-file-stub"
- size={100}
- >
- <Icon
- aria-hidden={true}
- icon="test-file-stub"
- size={100}
- spin={false}
- >
- <Component
- aria-hidden={true}
- className="styles__icon___23x3R"
- height={100}
- style={Object {}}
- width={100}
- >
- <svg
- aria-hidden={true}
- className="styles__icon___23x3R"
- height={100}
- style={Object {}}
- width={100}
- >
- <use
- xlinkHref="#test-file-stub"
- />
- </svg>
- </Component>
- </Icon>
- </StyledIcon>
- <div
- className="customPopup-title text-20-bold"
- >
- Bold title
- </div>
- <div
- className="customPopup-content text-16-normal"
- dangerouslySetInnerHTML={
- Object {
- "__html": "Interesting description",
- }
- }
- />
- <WithStyles(ForwardRef(Button))
- classes={
- Object {
- "label": "text-16-bold",
- "root": "btn-highlight ",
- }
- }
- onClick={[MockFunction]}
- >
- <ForwardRef(Button)
- classes={
- Object {
- "colorInherit": "MuiButton-colorInherit",
- "contained": "MuiButton-contained",
- "containedPrimary": "MuiButton-containedPrimary",
- "containedSecondary": "MuiButton-containedSecondary",
- "containedSizeLarge": "MuiButton-containedSizeLarge",
- "containedSizeSmall": "MuiButton-containedSizeSmall",
- "disableElevation": "MuiButton-disableElevation",
- "disabled": "Mui-disabled",
- "endIcon": "MuiButton-endIcon",
- "focusVisible": "Mui-focusVisible",
- "fullWidth": "MuiButton-fullWidth",
- "iconSizeLarge": "MuiButton-iconSizeLarge",
- "iconSizeMedium": "MuiButton-iconSizeMedium",
- "iconSizeSmall": "MuiButton-iconSizeSmall",
- "label": "MuiButton-label text-16-bold",
- "outlined": "MuiButton-outlined",
- "outlinedPrimary": "MuiButton-outlinedPrimary",
- "outlinedSecondary": "MuiButton-outlinedSecondary",
- "outlinedSizeLarge": "MuiButton-outlinedSizeLarge",
- "outlinedSizeSmall": "MuiButton-outlinedSizeSmall",
- "root": "MuiButton-root btn-highlight ",
- "sizeLarge": "MuiButton-sizeLarge",
- "sizeSmall": "MuiButton-sizeSmall",
- "startIcon": "MuiButton-startIcon",
- "text": "MuiButton-text",
- "textPrimary": "MuiButton-textPrimary",
- "textSecondary": "MuiButton-textSecondary",
- "textSizeLarge": "MuiButton-textSizeLarge",
- "textSizeSmall": "MuiButton-textSizeSmall",
- }
- }
- onClick={[MockFunction]}
- >
- <WithStyles(ForwardRef(ButtonBase))
- className="MuiButton-root btn-highlight MuiButton-text"
- component="button"
- disabled={false}
- focusRipple={true}
- focusVisibleClassName="Mui-focusVisible"
- onClick={[MockFunction]}
- type="button"
- >
- <ForwardRef(ButtonBase)
- className="MuiButton-root btn-highlight MuiButton-text"
- classes={
- Object {
- "disabled": "Mui-disabled",
- "focusVisible": "Mui-focusVisible",
- "root": "MuiButtonBase-root",
- }
- }
- component="button"
- disabled={false}
- focusRipple={true}
- focusVisibleClassName="Mui-focusVisible"
- onClick={[MockFunction]}
- type="button"
- >
- <button
- className="MuiButtonBase-root MuiButton-root btn-highlight MuiButton-text"
- disabled={false}
- onBlur={[Function]}
- onClick={[MockFunction]}
- onDragLeave={[Function]}
- onFocus={[Function]}
- onKeyDown={[Function]}
- onKeyUp={[Function]}
- onMouseDown={[Function]}
- onMouseLeave={[Function]}
- onMouseUp={[Function]}
- onTouchEnd={[Function]}
- onTouchMove={[Function]}
- onTouchStart={[Function]}
- tabIndex={0}
- type="button"
- >
- <span
- className="MuiButton-label text-16-bold"
- >
- consumption.partner_issue_modal.ok
- </span>
- <WithStyles(memo)
- center={false}
- >
- <ForwardRef(TouchRipple)
- center={false}
- classes={
- Object {
- "child": "MuiTouchRipple-child",
- "childLeaving": "MuiTouchRipple-childLeaving",
- "childPulsate": "MuiTouchRipple-childPulsate",
- "ripple": "MuiTouchRipple-ripple",
- "ripplePulsate": "MuiTouchRipple-ripplePulsate",
- "rippleVisible": "MuiTouchRipple-rippleVisible",
- "root": "MuiTouchRipple-root",
- }
- }
- >
- <span
- className="MuiTouchRipple-root"
- >
- <TransitionGroup
- childFactory={[Function]}
- component={null}
- exit={true}
- />
- </span>
- </ForwardRef(TouchRipple)>
- </WithStyles(memo)>
- </button>
- </ForwardRef(ButtonBase)>
- </WithStyles(ForwardRef(ButtonBase))>
- </ForwardRef(Button)>
- </WithStyles(ForwardRef(Button))>
- </div>
- </div>
- </ForwardRef(Paper)>
- </WithStyles(ForwardRef(Paper))>
- </div>
- </Transition>
- </ForwardRef(Fade)>
- <div
- data-test="sentinelEnd"
- tabIndex={0}
- />
- </Unstable_TrapFocus>
- </div>
- </Portal>
- </ForwardRef(Portal)>
- </ForwardRef(Modal)>
- </ForwardRef(Dialog)>
- </WithStyles(ForwardRef(Dialog))>
-</CustomPopupModal>
+ consumption.partner_issue_modal.ok
+ </span>
+ <span
+ class="MuiTouchRipple-root"
+ />
+ </button>
+ </div>
+ </div>
+ </div>
+ <div
+ data-test="sentinelEnd"
+ tabindex="0"
+ />
+ </div>
+</body>
`;
diff --git a/src/components/CustomPopup/customPopupModal.scss b/src/components/CustomPopup/customPopupModal.scss
index d0b9c013d1771554a0f0a10dc030c2c803424d1e..3e86e2fffa9086c1be3e842aec4c2df1dca9c3f1 100644
--- a/src/components/CustomPopup/customPopupModal.scss
+++ b/src/components/CustomPopup/customPopupModal.scss
@@ -11,13 +11,13 @@
align-items: center;
padding: 1rem;
max-width: 20rem;
+ text-align: center;
.customPopup-title {
color: $gold-shadow;
margin: 1rem auto;
}
.customPopup-content {
- text-align: center;
font-weight: 700;
p {
color: $grey-bright;
@@ -27,12 +27,6 @@
color: $gold-shadow;
}
}
-
- button.btn-highlight {
- padding: 0.65rem 2.5rem;
- margin-top: 1rem;
- width: unset;
- }
}
#accessibility-title {
diff --git a/src/components/DateNavigator/DateNavigator.spec.tsx b/src/components/DateNavigator/DateNavigator.spec.tsx
index 8cd2494ef27ec449db23f6afc6184dce346eb196..1708d74e8b7efe019174f6b90eddb8126c5acab5 100644
--- a/src/components/DateNavigator/DateNavigator.spec.tsx
+++ b/src/components/DateNavigator/DateNavigator.spec.tsx
@@ -1,10 +1,8 @@
-import { IconButton } from '@material-ui/core'
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
import { TimeStep } from 'enums'
-import { mount } from 'enzyme'
-import toJson from 'enzyme-to-json'
import { DateTime } from 'luxon'
import React from 'react'
-import { waitForComponentToPaint } from 'tests/__mocks__/testUtils'
import DateNavigator from './DateNavigator'
jest.mock(
@@ -17,90 +15,56 @@ const mockedDate = DateTime.local(2021, 7, 1)
keepLocalTime: true,
})
.startOf('day')
+
describe('DateNavigator component', () => {
- const mockHandleNextDate = jest.fn()
- const mockHandlePrevDate = jest.fn()
- beforeEach(() => {
- jest.clearAllMocks()
- })
it('should be rendered correctly', async () => {
- const wrapper = mount(
+ const { container } = render(
<DateNavigator
disableNext={false}
disablePrev={false}
- handleNextDate={mockHandleNextDate}
- handlePrevDate={mockHandlePrevDate}
+ handleNextDate={jest.fn()}
+ handlePrevDate={jest.fn()}
navigatorDate={mockedDate}
timeStep={TimeStep.MONTH}
/>
)
- await waitForComponentToPaint(wrapper)
- expect(toJson(wrapper)).toMatchSnapshot()
+ expect(container).toMatchSnapshot()
})
- describe('should test navigation functions', () => {
- describe('should test previous arrow', () => {
- it('should call handlePrevDate', async () => {
- const wrapper = mount(
- <DateNavigator
- disableNext={false}
- disablePrev={false}
- handleNextDate={mockHandleNextDate}
- handlePrevDate={mockHandlePrevDate}
- navigatorDate={mockedDate}
- timeStep={TimeStep.MONTH}
- />
- )
- wrapper.find(IconButton).first().simulate('click')
- expect(mockHandlePrevDate).toHaveBeenCalledTimes(1)
- })
-
- it('should NOT call handlePrevDate if disablePrev is true', async () => {
- const wrapper = mount(
- <DateNavigator
- disableNext={false}
- disablePrev={true}
- handleNextDate={mockHandleNextDate}
- handlePrevDate={mockHandlePrevDate}
- navigatorDate={mockedDate}
- timeStep={TimeStep.MONTH}
- />
- )
- wrapper.find(IconButton).first().simulate('click')
- expect(mockHandlePrevDate).toHaveBeenCalledTimes(0)
- })
- })
+ it('should test navigation functions', async () => {
+ const mockHandleNextDate = jest.fn()
+ const mockHandlePrevDate = jest.fn()
+ render(
+ <DateNavigator
+ disableNext={false}
+ disablePrev={false}
+ handleNextDate={mockHandleNextDate}
+ handlePrevDate={mockHandlePrevDate}
+ navigatorDate={mockedDate}
+ timeStep={TimeStep.MONTH}
+ />
+ )
+ const [prevIcon, nextIcon] = screen.getAllByRole('button')
+ await userEvent.click(prevIcon)
+ expect(mockHandlePrevDate).toHaveBeenCalledTimes(1)
- describe('should test next arrow', () => {
- it('should call mockHandleNextDate', async () => {
- const wrapper = mount(
- <DateNavigator
- disableNext={false}
- disablePrev={false}
- handleNextDate={mockHandleNextDate}
- handlePrevDate={mockHandlePrevDate}
- navigatorDate={mockedDate}
- timeStep={TimeStep.MONTH}
- />
- )
- wrapper.find(IconButton).at(1).simulate('click')
- expect(mockHandleNextDate).toHaveBeenCalledTimes(1)
- })
+ await userEvent.click(nextIcon)
+ expect(mockHandleNextDate).toHaveBeenCalledTimes(1)
+ })
- it('should NOT call mockHandleNextDate if disableNext is true', async () => {
- const wrapper = mount(
- <DateNavigator
- disableNext={true}
- disablePrev={false}
- handleNextDate={mockHandleNextDate}
- handlePrevDate={mockHandlePrevDate}
- navigatorDate={mockedDate}
- timeStep={TimeStep.MONTH}
- />
- )
- wrapper.find(IconButton).at(1).simulate('click')
- expect(mockHandleNextDate).toHaveBeenCalledTimes(0)
- })
- })
+ it('should not be able to click nav buttons', async () => {
+ render(
+ <DateNavigator
+ disableNext={true}
+ disablePrev={true}
+ handleNextDate={jest.fn()}
+ handlePrevDate={jest.fn()}
+ navigatorDate={mockedDate}
+ timeStep={TimeStep.MONTH}
+ />
+ )
+ const [prevIcon, nextButton] = screen.getAllByRole('button')
+ expect(prevIcon).toBeDisabled()
+ expect(nextButton).toBeDisabled()
})
})
diff --git a/src/components/DateNavigator/__snapshots__/DateNavigator.spec.tsx.snap b/src/components/DateNavigator/__snapshots__/DateNavigator.spec.tsx.snap
index 8daf2089343eeaee62c17f6c24f86038176a0d71..aef335f2e5a5c2279374f2c02a5e1c608975850e 100644
--- a/src/components/DateNavigator/__snapshots__/DateNavigator.spec.tsx.snap
+++ b/src/components/DateNavigator/__snapshots__/DateNavigator.spec.tsx.snap
@@ -1,276 +1,61 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`DateNavigator component should be rendered correctly 1`] = `
-<DateNavigator
- disableNext={false}
- disablePrev={false}
- handleNextDate={[MockFunction]}
- handlePrevDate={[MockFunction]}
- navigatorDate={"2021-07-01T00:00:00.000Z"}
- timeStep={40}
->
+<div>
<div
- className="date-navigator"
+ class="date-navigator"
>
- <WithStyles(ForwardRef(IconButton))
+ <button
aria-label="consumption.accessibility.button_previous_value"
- className="date-navigator-button"
- disabled={false}
- onClick={[MockFunction]}
+ class="MuiButtonBase-root MuiIconButton-root date-navigator-button"
+ tabindex="0"
+ type="button"
>
- <ForwardRef(IconButton)
- aria-label="consumption.accessibility.button_previous_value"
- className="date-navigator-button"
- classes={
- Object {
- "colorInherit": "MuiIconButton-colorInherit",
- "colorPrimary": "MuiIconButton-colorPrimary",
- "colorSecondary": "MuiIconButton-colorSecondary",
- "disabled": "Mui-disabled",
- "edgeEnd": "MuiIconButton-edgeEnd",
- "edgeStart": "MuiIconButton-edgeStart",
- "label": "MuiIconButton-label",
- "root": "MuiIconButton-root",
- "sizeSmall": "MuiIconButton-sizeSmall",
- }
- }
- disabled={false}
- onClick={[MockFunction]}
+ <span
+ class="MuiIconButton-label"
>
- <WithStyles(ForwardRef(ButtonBase))
- aria-label="consumption.accessibility.button_previous_value"
- centerRipple={true}
- className="MuiIconButton-root date-navigator-button"
- disabled={false}
- focusRipple={true}
- onClick={[MockFunction]}
+ <svg
+ class="styles__icon___23x3R"
+ height="16"
+ width="16"
>
- <ForwardRef(ButtonBase)
- aria-label="consumption.accessibility.button_previous_value"
- centerRipple={true}
- className="MuiIconButton-root date-navigator-button"
- classes={
- Object {
- "disabled": "Mui-disabled",
- "focusVisible": "Mui-focusVisible",
- "root": "MuiButtonBase-root",
- }
- }
- disabled={false}
- focusRipple={true}
- onClick={[MockFunction]}
- >
- <button
- aria-label="consumption.accessibility.button_previous_value"
- className="MuiButtonBase-root MuiIconButton-root date-navigator-button"
- disabled={false}
- onBlur={[Function]}
- onClick={[MockFunction]}
- onDragLeave={[Function]}
- onFocus={[Function]}
- onKeyDown={[Function]}
- onKeyUp={[Function]}
- onMouseDown={[Function]}
- onMouseLeave={[Function]}
- onMouseUp={[Function]}
- onTouchEnd={[Function]}
- onTouchMove={[Function]}
- onTouchStart={[Function]}
- tabIndex={0}
- type="button"
- >
- <span
- className="MuiIconButton-label"
- >
- <Icon
- icon="test-file-stub"
- size={16}
- spin={false}
- >
- <Component
- className="styles__icon___23x3R"
- height={16}
- style={Object {}}
- width={16}
- >
- <svg
- className="styles__icon___23x3R"
- height={16}
- style={Object {}}
- width={16}
- >
- <use
- xlinkHref="#test-file-stub"
- />
- </svg>
- </Component>
- </Icon>
- </span>
- <WithStyles(memo)
- center={true}
- >
- <ForwardRef(TouchRipple)
- center={true}
- classes={
- Object {
- "child": "MuiTouchRipple-child",
- "childLeaving": "MuiTouchRipple-childLeaving",
- "childPulsate": "MuiTouchRipple-childPulsate",
- "ripple": "MuiTouchRipple-ripple",
- "ripplePulsate": "MuiTouchRipple-ripplePulsate",
- "rippleVisible": "MuiTouchRipple-rippleVisible",
- "root": "MuiTouchRipple-root",
- }
- }
- >
- <span
- className="MuiTouchRipple-root"
- >
- <TransitionGroup
- childFactory={[Function]}
- component={null}
- exit={true}
- />
- </span>
- </ForwardRef(TouchRipple)>
- </WithStyles(memo)>
- </button>
- </ForwardRef(ButtonBase)>
- </WithStyles(ForwardRef(ButtonBase))>
- </ForwardRef(IconButton)>
- </WithStyles(ForwardRef(IconButton))>
+ <use
+ xlink:href="#test-file-stub"
+ />
+ </svg>
+ </span>
+ <span
+ class="MuiTouchRipple-root"
+ />
+ </button>
<mock-date-navigator-format
- date={"2021-07-01T00:00:00.000Z"}
- inline={false}
- timeStep={40}
+ date="1625097600000"
+ inline="false"
+ timestep="40"
/>
- <WithStyles(ForwardRef(IconButton))
+ <button
aria-label="consumption.accessibility.button_next_value"
- className="date-navigator-button"
- disabled={false}
- onClick={[MockFunction]}
+ class="MuiButtonBase-root MuiIconButton-root date-navigator-button"
+ tabindex="0"
+ type="button"
>
- <ForwardRef(IconButton)
- aria-label="consumption.accessibility.button_next_value"
- className="date-navigator-button"
- classes={
- Object {
- "colorInherit": "MuiIconButton-colorInherit",
- "colorPrimary": "MuiIconButton-colorPrimary",
- "colorSecondary": "MuiIconButton-colorSecondary",
- "disabled": "Mui-disabled",
- "edgeEnd": "MuiIconButton-edgeEnd",
- "edgeStart": "MuiIconButton-edgeStart",
- "label": "MuiIconButton-label",
- "root": "MuiIconButton-root",
- "sizeSmall": "MuiIconButton-sizeSmall",
- }
- }
- disabled={false}
- onClick={[MockFunction]}
+ <span
+ class="MuiIconButton-label"
>
- <WithStyles(ForwardRef(ButtonBase))
- aria-label="consumption.accessibility.button_next_value"
- centerRipple={true}
- className="MuiIconButton-root date-navigator-button"
- disabled={false}
- focusRipple={true}
- onClick={[MockFunction]}
+ <svg
+ class="styles__icon___23x3R"
+ height="16"
+ width="16"
>
- <ForwardRef(ButtonBase)
- aria-label="consumption.accessibility.button_next_value"
- centerRipple={true}
- className="MuiIconButton-root date-navigator-button"
- classes={
- Object {
- "disabled": "Mui-disabled",
- "focusVisible": "Mui-focusVisible",
- "root": "MuiButtonBase-root",
- }
- }
- disabled={false}
- focusRipple={true}
- onClick={[MockFunction]}
- >
- <button
- aria-label="consumption.accessibility.button_next_value"
- className="MuiButtonBase-root MuiIconButton-root date-navigator-button"
- disabled={false}
- onBlur={[Function]}
- onClick={[MockFunction]}
- onDragLeave={[Function]}
- onFocus={[Function]}
- onKeyDown={[Function]}
- onKeyUp={[Function]}
- onMouseDown={[Function]}
- onMouseLeave={[Function]}
- onMouseUp={[Function]}
- onTouchEnd={[Function]}
- onTouchMove={[Function]}
- onTouchStart={[Function]}
- tabIndex={0}
- type="button"
- >
- <span
- className="MuiIconButton-label"
- >
- <Icon
- icon="test-file-stub"
- size={16}
- spin={false}
- >
- <Component
- className="styles__icon___23x3R"
- height={16}
- style={Object {}}
- width={16}
- >
- <svg
- className="styles__icon___23x3R"
- height={16}
- style={Object {}}
- width={16}
- >
- <use
- xlinkHref="#test-file-stub"
- />
- </svg>
- </Component>
- </Icon>
- </span>
- <WithStyles(memo)
- center={true}
- >
- <ForwardRef(TouchRipple)
- center={true}
- classes={
- Object {
- "child": "MuiTouchRipple-child",
- "childLeaving": "MuiTouchRipple-childLeaving",
- "childPulsate": "MuiTouchRipple-childPulsate",
- "ripple": "MuiTouchRipple-ripple",
- "ripplePulsate": "MuiTouchRipple-ripplePulsate",
- "rippleVisible": "MuiTouchRipple-rippleVisible",
- "root": "MuiTouchRipple-root",
- }
- }
- >
- <span
- className="MuiTouchRipple-root"
- >
- <TransitionGroup
- childFactory={[Function]}
- component={null}
- exit={true}
- />
- </span>
- </ForwardRef(TouchRipple)>
- </WithStyles(memo)>
- </button>
- </ForwardRef(ButtonBase)>
- </WithStyles(ForwardRef(ButtonBase))>
- </ForwardRef(IconButton)>
- </WithStyles(ForwardRef(IconButton))>
+ <use
+ xlink:href="#test-file-stub"
+ />
+ </svg>
+ </span>
+ <span
+ class="MuiTouchRipple-root"
+ />
+ </button>
</div>
-</DateNavigator>
+</div>
`;
diff --git a/src/components/DateNavigator/datenavigator.scss b/src/components/DateNavigator/datenavigator.scss
index 101639886b6f06d89edd528592c346d33e32ee3a..34451ece836569368a1c60fb1f3485cc438b4b62 100644
--- a/src/components/DateNavigator/datenavigator.scss
+++ b/src/components/DateNavigator/datenavigator.scss
@@ -10,15 +10,8 @@
padding-bottom: 0.6rem;
max-width: 45.75rem;
.date-navigator-button {
- border: none;
- background: none;
- color: $soft-grey;
- text-decoration: underline;
&.disable {
opacity: 0.3;
}
- &.disable:hover {
- cursor: default;
- }
}
}
diff --git a/src/components/Duel/DuelChart/DuelBar.tsx b/src/components/Duel/DuelChart/DuelBar.tsx
index 70485c60aeef70cab163f8c3b1ed1b9486d91ff4..a23d20f574bc89df850b1a9ed20f4cdca8e53a2b 100644
--- a/src/components/Duel/DuelChart/DuelBar.tsx
+++ b/src/components/Duel/DuelChart/DuelBar.tsx
@@ -96,11 +96,11 @@ const DuelBar = ({
marginTop={marginTop}
/>
<g transform={`translate(${marginLeft},${marginTop})`}>
- {dataload.map((d: Dataload, index: number) => {
+ {dataload.map((d, index) => {
if (!isUpcoming(d)) {
return (
<Bar
- key={index}
+ key={d.date.toISO()}
index={index}
dataload={d}
compareDataload={null}
@@ -117,7 +117,7 @@ const DuelBar = ({
} else {
return (
<UncomingBar
- key={index}
+ key={d.date.toISO()}
index={index}
dataload={d}
xScale={xScale}
diff --git a/src/components/Duel/DuelEmptyValueModal/DuelEmptyValueModal.tsx b/src/components/Duel/DuelEmptyValueModal/DuelEmptyValueModal.tsx
index 6eac38bd25668b6de9e1bc76c52e6565303bfa60..70e1f0261ac08777fe51fd2e49d15184c91da5a0 100644
--- a/src/components/Duel/DuelEmptyValueModal/DuelEmptyValueModal.tsx
+++ b/src/components/Duel/DuelEmptyValueModal/DuelEmptyValueModal.tsx
@@ -51,10 +51,7 @@ const DuelEmptyValueModal = ({
<Button
aria-label={t('duel_empty_value_modal.accessibility.button_validate')}
onClick={handleCloseClick}
- classes={{
- root: 'btn-secondary-negative',
- label: 'text-16-normal',
- }}
+ className="btnSecondary"
>
{t('duel_empty_value_modal.button')}
</Button>
diff --git a/src/components/Duel/DuelEmptyValueModal/duelEmptyValueModal.scss b/src/components/Duel/DuelEmptyValueModal/duelEmptyValueModal.scss
index 1c515d4f2ced42d3491f45fc09b40843fdbf763f..088f10cf69e1a2b16a6bbd461983725cf1b3aead 100644
--- a/src/components/Duel/DuelEmptyValueModal/duelEmptyValueModal.scss
+++ b/src/components/Duel/DuelEmptyValueModal/duelEmptyValueModal.scss
@@ -5,15 +5,9 @@
flex-direction: column;
justify-content: center;
align-items: center;
- padding: 1.5rem 0.5rem;
+ padding: 1.5rem 0.5rem 0;
text-align: center;
- .modal-empty-value-title {
- margin: 2rem 0 1rem;
- }
-
- button.btn-secondary-negative {
- margin: 2rem 0.25rem 1.5rem;
- }
+ gap: 1rem;
}
#accessibility-title {
diff --git a/src/components/Duel/DuelError/DuelError.spec.tsx b/src/components/Duel/DuelError/DuelError.spec.tsx
index c8763df63e5fbb524b73033abcabce425d044f75..7e2f3d3ee2a67e00a24793530c55245205d474d7 100644
--- a/src/components/Duel/DuelError/DuelError.spec.tsx
+++ b/src/components/Duel/DuelError/DuelError.spec.tsx
@@ -1,10 +1,10 @@
-import { shallow } from 'enzyme'
+import { render } from '@testing-library/react'
import React from 'react'
import DuelError from './DuelError'
describe('DuelError component', () => {
it('should be rendered correctly', () => {
- const component = shallow(<DuelError />).getElement()
- expect(component).toMatchSnapshot()
+ const { container } = render(<DuelError />)
+ expect(container).toMatchSnapshot()
})
})
diff --git a/src/components/Duel/DuelError/DuelError.tsx b/src/components/Duel/DuelError/DuelError.tsx
index 0ae106637ceb376670be433162cef6f663506916..6d9f119e6740e2b8bda49f8c02c8652400a3a524 100644
--- a/src/components/Duel/DuelError/DuelError.tsx
+++ b/src/components/Duel/DuelError/DuelError.tsx
@@ -19,10 +19,7 @@ const DuelError = () => {
<Button
aria-label={t('duel.accessibility.button_go_back')}
onClick={goBack}
- classes={{
- root: 'btn-secondary-negative',
- label: 'text-16-normal',
- }}
+ className="btnSecondary"
>
{t('duel.button_go_back')}
</Button>
diff --git a/src/components/Duel/DuelError/__snapshots__/DuelError.spec.tsx.snap b/src/components/Duel/DuelError/__snapshots__/DuelError.spec.tsx.snap
index 98ad5aab1bde389e62d58636113233e0953c59e8..4680b10b3f5a98ffc276d6707a66fcd1045dee4d 100644
--- a/src/components/Duel/DuelError/__snapshots__/DuelError.spec.tsx.snap
+++ b/src/components/Duel/DuelError/__snapshots__/DuelError.spec.tsx.snap
@@ -1,29 +1,34 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`DuelError component should be rendered correctly 1`] = `
-<div
- className="duel-error-container"
->
+<div>
<div
- className="duel-error-message"
+ class="duel-error-container"
>
- duel.global_error
- </div>
- <div
- className="duel-error-button"
- >
- <WithStyles(ForwardRef(Button))
- aria-label="duel.accessibility.button_go_back"
- classes={
- Object {
- "label": "text-16-normal",
- "root": "btn-secondary-negative",
- }
- }
- onClick={[Function]}
+ <div
+ class="duel-error-message"
+ >
+ duel.global_error
+ </div>
+ <div
+ class="duel-error-button"
>
- duel.button_go_back
- </WithStyles(ForwardRef(Button))>
+ <button
+ aria-label="duel.accessibility.button_go_back"
+ class="MuiButtonBase-root MuiButton-root MuiButton-text btnSecondary"
+ tabindex="0"
+ type="button"
+ >
+ <span
+ class="MuiButton-label"
+ >
+ duel.button_go_back
+ </span>
+ <span
+ class="MuiTouchRipple-root"
+ />
+ </button>
+ </div>
</div>
</div>
`;
diff --git a/src/components/Duel/DuelOngoing/DuelOngoing.spec.tsx b/src/components/Duel/DuelOngoing/DuelOngoing.spec.tsx
index 2f9eb9c8db8afaa204d5f76f903226a6592ed7e4..caadee189cd8e0b9668787c3b9b32c6a82407cc5 100644
--- a/src/components/Duel/DuelOngoing/DuelOngoing.spec.tsx
+++ b/src/components/Duel/DuelOngoing/DuelOngoing.spec.tsx
@@ -1,13 +1,11 @@
+import { render, screen, waitFor } from '@testing-library/react'
import { UserChallengeState } from 'enums'
-import { mount } from 'enzyme'
import { DateTime } from 'luxon'
import { UserChallenge } from 'models'
import React from 'react'
import { Provider } from 'react-redux'
import { createMockEcolyoStore } from 'tests/__mocks__/store'
-import { waitForComponentToPaint } from 'tests/__mocks__/testUtils'
import { userChallengeData } from 'tests/__mocks__/userChallengeData.mock'
-import DuelResultModal from '../DuelResultModal/DuelResultModal'
import DuelOngoing from './DuelOngoing'
const mockUserChallengeUpdateFlag = jest.fn()
@@ -20,10 +18,6 @@ jest.mock('services/challenge.service', () => {
})
jest.mock('components/Duel/DuelChart/DuelChart', () => 'mock-duelchart')
-jest.mock(
- 'components/Duel/DuelResultModal/DuelResultModal',
- () => 'mock-duelModal'
-)
describe('DuelOngoing component', () => {
const store = createMockEcolyoStore()
@@ -33,19 +27,15 @@ describe('DuelOngoing component', () => {
isWin: false,
isEmpty: false,
})
- const wrapper = mount(
+ const { container } = render(
<Provider store={store}>
<DuelOngoing userChallenge={userChallengeData[0]} />
</Provider>
)
- await waitForComponentToPaint(wrapper)
- expect(wrapper.find('.duel-title').text()).toEqual(
- userChallengeData[1].duel.title
- )
- expect(wrapper.find('.duel-goal').exists()).toBeTruthy()
- expect(wrapper.find('.duel-consumption').exists()).toBeTruthy()
- expect(wrapper.find('.duel-chart').exists()).toBeTruthy()
- expect(wrapper.find('.caption-icon').exists()).toBeTruthy()
+ expect(container).toMatchSnapshot()
+ expect(
+ screen.getByText(userChallengeData[1].duel.title)
+ ).toBeInTheDocument()
})
it('should display the result Modal when duel is done', async () => {
@@ -59,12 +49,12 @@ describe('DuelOngoing component', () => {
isWin: true,
})
mockUserChallengeUpdateFlag.mockResolvedValue(updatedUserChallenge)
- const wrapper = mount(
+ const { container } = render(
<Provider store={store}>
<DuelOngoing userChallenge={updatedUserChallenge} />
</Provider>
)
- await waitForComponentToPaint(wrapper)
- expect(wrapper.find(DuelResultModal).exists()).toBeTruthy()
+ await waitFor(() => null, { container })
+ expect(screen.getByRole('dialog')).toBeInTheDocument()
})
})
diff --git a/src/components/Duel/DuelOngoing/DuelOngoing.tsx b/src/components/Duel/DuelOngoing/DuelOngoing.tsx
index dc8073ada3b6b20a648693155d83922dac95a69d..574bf643e97845bca6bfa021d8b5e2932a33c816 100644
--- a/src/components/Duel/DuelOngoing/DuelOngoing.tsx
+++ b/src/components/Duel/DuelOngoing/DuelOngoing.tsx
@@ -11,7 +11,7 @@ import {
UserChallengeUpdateFlag,
UserDuelState,
} from 'enums'
-import { Dataload, UserChallenge, UserDuel } from 'models'
+import { Dataload, UserChallenge } from 'models'
import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
import { useNavigate } from 'react-router-dom'
import ChallengeService from 'services/challenge.service'
@@ -36,29 +36,28 @@ interface DuelOngoingProps {
const DuelOngoing = ({ userChallenge, isFinished }: DuelOngoingProps) => {
const { t } = useI18n()
const client = useClient()
+ const navigate = useNavigate()
+ const dispatch = useAppDispatch()
const { currentDataload, userChallengeList } = useAppSelector(
state => state.ecolyo.challenge
)
- const dispatch = useAppDispatch()
- const navigate = useNavigate()
const [resultModal, setResultModal] = useState<boolean>(false)
const [winChallenge, setWinChallenge] = useState<boolean>(false)
- const [isLastDuel, setIsLastDuel] = useState<boolean>(false)
+ const [showLastDuelModal, setShowLastDuelModal] = useState<boolean>(false)
const [finishedDataLoad, setFinishedDataLoad] = useState<Dataload[]>()
const chartContainer = useRef<HTMLDivElement>(null)
const { height, width } = useChartResize(chartContainer, false)
const challengeService = useMemo(() => new ChallengeService(client), [client])
- const duel: UserDuel = userChallenge.duel
- const title: string = duel.title
- const durationInDays: number = duel.duration.days
+ const duel = userChallenge.duel
+
+ const isLastDuel =
+ userChallenge.id == userChallengeList[userChallengeList.length - 1]?.id
- const userConsumption: string = formatNumberValues(
+ const userConsumption = formatNumberValues(
userChallenge.duel.userConsumption
).toString()
- const average: string = formatNumberValues(
- userChallenge.duel.threshold
- ).toString()
+ const average = formatNumberValues(userChallenge.duel.threshold).toString()
const setResult = useCallback(async () => {
const challengeService = new ChallengeService(client)
@@ -83,21 +82,12 @@ const DuelOngoing = ({ userChallenge, isFinished }: DuelOngoingProps) => {
dispatch(unlockNextUserChallenge(updatedChallenge))
dispatch(toggleChallengeDuelNotification(false))
- if (
- userChallenge.id == userChallengeList[userChallengeList.length - 1].id
- ) {
- setIsLastDuel(true)
+ if (isLastDuel) {
+ setShowLastDuelModal(true)
} else {
navigate('/challenges')
}
- }, [
- client,
- userChallenge,
- winChallenge,
- dispatch,
- userChallengeList,
- navigate,
- ])
+ }, [client, userChallenge, winChallenge, dispatch, isLastDuel, navigate])
useEffect(() => {
let subscribed = true
@@ -147,13 +137,11 @@ const DuelOngoing = ({ userChallenge, isFinished }: DuelOngoingProps) => {
) : (
<div className="duel-goal text-18-normal">
{t('duel.goal1', {
- durationInDays,
- smartCount: durationInDays,
+ durationInDays: duel.duration.days,
})}
<span> </span>
{t('duel.goal2', {
- title,
- smartCount: title,
+ title: duel.title,
})}
</div>
)}
@@ -203,7 +191,7 @@ const DuelOngoing = ({ userChallenge, isFinished }: DuelOngoingProps) => {
handleCloseClick={setResult}
/>
<LastDuelModal
- open={isLastDuel}
+ open={showLastDuelModal}
handleCloseClick={() => navigate('/challenges')}
/>
</>
diff --git a/src/components/Duel/DuelOngoing/__snapshots__/DuelOngoing.spec.tsx.snap b/src/components/Duel/DuelOngoing/__snapshots__/DuelOngoing.spec.tsx.snap
new file mode 100644
index 0000000000000000000000000000000000000000..f04488e4ae9cba174bae61d3bdba4812ef221d0d
--- /dev/null
+++ b/src/components/Duel/DuelOngoing/__snapshots__/DuelOngoing.spec.tsx.snap
@@ -0,0 +1,104 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`DuelOngoing component should be rendered correctly 1`] = `
+<div>
+ <div
+ class="duel-ongoing-container"
+ >
+ <div
+ class="duel-title text-16-normal"
+ >
+ Title DUEL001
+ </div>
+ <div
+ class="duel-goal text-18-normal"
+ >
+ duel.goal1
+ <span>
+
+ </span>
+ duel.goal2
+ </div>
+ <div
+ class="duel-consumption text-28-normal"
+ >
+ <span
+ class="consumption"
+ >
+ 0,00
+ </span>
+ / 0,00 €
+ </div>
+ <div
+ class="duel-chart fs-root"
+ >
+ <mock-duelchart
+ height="300"
+ userchallenge="[object Object]"
+ width="940"
+ />
+ </div>
+ <div
+ class="duel-chart-caption text-15-normal"
+ >
+ <div
+ class="duel-caption"
+ >
+ <svg
+ aria-hidden="true"
+ class="caption-icon styles__icon___23x3R"
+ height="25"
+ width="25"
+ >
+ <use
+ xlink:href="#test-file-stub"
+ />
+ </svg>
+ <div
+ class="caption-label"
+ >
+ duel.caption_average
+ </div>
+ </div>
+ <div
+ class="duel-caption"
+ >
+ <svg
+ aria-hidden="true"
+ class="caption-icon styles__icon___23x3R"
+ height="25"
+ width="25"
+ >
+ <use
+ xlink:href="#test-file-stub"
+ />
+ </svg>
+ <div
+ class="caption-label"
+ >
+ duel.caption_consumption
+ </div>
+ </div>
+ <div
+ class="duel-caption"
+ >
+ <svg
+ aria-hidden="true"
+ class="caption-icon styles__icon___23x3R"
+ height="25"
+ width="25"
+ >
+ <use
+ xlink:href="#test-file-stub"
+ />
+ </svg>
+ <div
+ class="caption-label"
+ >
+ duel.caption_incoming
+ </div>
+ </div>
+ </div>
+ </div>
+</div>
+`;
diff --git a/src/components/Duel/DuelResultModal/DuelResultModal.spec.tsx b/src/components/Duel/DuelResultModal/DuelResultModal.spec.tsx
index 4a73f4cf35e6d2c5551678bb6a8639c2fdf4607c..199878a12050aecaccad580936213290144de33a 100644
--- a/src/components/Duel/DuelResultModal/DuelResultModal.spec.tsx
+++ b/src/components/Duel/DuelResultModal/DuelResultModal.spec.tsx
@@ -1,13 +1,11 @@
-import { mount } from 'enzyme'
-import toJson from 'enzyme-to-json'
+import { render, screen } from '@testing-library/react'
import React from 'react'
-import { waitForComponentToPaint } from 'tests/__mocks__/testUtils'
import { userChallengeData } from 'tests/__mocks__/userChallengeData.mock'
import DuelResultModal from './DuelResultModal'
describe('DuelResultModal component', () => {
- it('should render correctly', async () => {
- const wrapper = mount(
+ it('should render correctly', () => {
+ const { baseElement } = render(
<DuelResultModal
open={true}
handleCloseClick={jest.fn()}
@@ -15,11 +13,10 @@ describe('DuelResultModal component', () => {
win={true}
/>
)
- await waitForComponentToPaint(wrapper)
- expect(toJson(wrapper)).toMatchSnapshot()
+ expect(baseElement).toMatchSnapshot()
})
it('should render a loss modal', async () => {
- const wrapper = mount(
+ render(
<DuelResultModal
open={true}
handleCloseClick={jest.fn()}
@@ -27,7 +24,6 @@ describe('DuelResultModal component', () => {
win={false}
/>
)
- await waitForComponentToPaint(wrapper)
- expect(wrapper.find('.title').text()).toBe('duel_result_modal.lost.title')
+ expect(screen.getByText('duel_result_modal.lost.title')).toBeInTheDocument()
})
})
diff --git a/src/components/Duel/DuelResultModal/DuelResultModal.tsx b/src/components/Duel/DuelResultModal/DuelResultModal.tsx
index b6d946bf69d5cdeac94f3439e7fafcef4f06bff2..7b23acb614d1cc6da4d9a060c55dc6fa2c60380b 100644
--- a/src/components/Duel/DuelResultModal/DuelResultModal.tsx
+++ b/src/components/Duel/DuelResultModal/DuelResultModal.tsx
@@ -54,7 +54,7 @@ const DuelResultModal = ({
<div id="accessibility-title">
{t('duel_result_modal.accessibility.window_title')}
</div>
- <div className="duel-result-modal-root ">
+ <div className="duel-result-modal-root">
<div className="imgResultContainer">
{win && (
<Icon className="challengeWon" icon={challengeWon} size={300} />
@@ -78,12 +78,8 @@ const DuelResultModal = ({
</div>
<Button
aria-label={t('duel_result_modal.accessibility.button_validate')}
- className="buttonCloseModal"
+ className="btnSecondary"
onClick={handleCloseClick}
- classes={{
- root: 'btn-secondary-negative',
- label: 'text-16-normal',
- }}
>
{t(`duel_result_modal.${statusKey}.button_validate`)}
</Button>
diff --git a/src/components/Duel/DuelResultModal/__snapshots__/DuelResultModal.spec.tsx.snap b/src/components/Duel/DuelResultModal/__snapshots__/DuelResultModal.spec.tsx.snap
index c56eab4eef66848d8bb71598d8b4557e534f5822..aa23ded2d78cd0d202f78d5202ed92f1a4540c17 100644
--- a/src/components/Duel/DuelResultModal/__snapshots__/DuelResultModal.spec.tsx.snap
+++ b/src/components/Duel/DuelResultModal/__snapshots__/DuelResultModal.spec.tsx.snap
@@ -1,1045 +1,104 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`DuelResultModal component should render correctly 1`] = `
-<DuelResultModal
- handleCloseClick={[MockFunction]}
- open={true}
- userChallenge={
- Object {
- "action": Object {
- "ecogesture": null,
- "startDate": null,
- "state": 0,
- },
- "description": "Description challenge 2",
- "duel": Object {
- "description": "Je parie un ours polaire que vous ne pouvez pas consommer moins que #CONSUMPTION € en 1 semaine",
- "duration": "P30D",
- "fluidTypes": Array [],
- "id": "DUEL001",
- "startDate": null,
- "state": 0,
- "threshold": 0,
- "title": "Title DUEL001",
- "userConsumption": 0,
- },
- "endingDate": null,
- "exploration": Object {
- "complementary_description": "Refaire un tour dans son profil si déjà fait",
- "date": null,
- "description": "Avoir complété son profil",
- "ecogesture_id": "",
- "fluid_condition": Array [],
- "id": "EXPLORATION001",
- "message_success": "Vous avez complété votre profil ou refait un tour dans votre profil",
- "progress": 0,
- "state": 0,
- "target": 1,
- "type": 1,
- },
- "id": "CHALLENGE0002",
- "progress": Object {
- "actionProgress": 0,
- "explorationProgress": 0,
- "quizProgress": 0,
- },
- "quiz": Object {
- "customQuestion": Object {
- "interval": 20,
- "period": Object {},
- "questionLabel": "Custom1",
- "result": 0,
- "singleFluid": false,
- "timeStep": 20,
- "type": 0,
- },
- "id": "QUIZ001",
- "questions": Array [
- Object {
- "answers": Array [
- Object {
- "answerLabel": "86 km",
- "isTrue": true,
- },
- Object {
- "answerLabel": "78 km",
- "isTrue": false,
- },
- Object {
- "answerLabel": "56 km",
- "isTrue": false,
- },
- ],
- "explanation": "L’aqueduc du Gier est un des aqueducs antiques de Lyon desservant la ville antique de Lugdunum. Avec ses 86 km il est le plus long des quatre aqueducs ayant alimenté la ville en eau, et celui dont les structures sont le mieux conservées. Il doit son nom au fait qu'il puise aux sources du Gier, affluent du Rhône",
- "questionLabel": "Quelle longueur faisait l’aqueduc du Gier pour acheminer l’eau sur Lyon à l’époque romaine ?",
- "result": 0,
- "source": "string",
- },
- Object {
- "answers": Array [
- Object {
- "answerLabel": "1 point d’eau public pour 800 habitants.",
- "isTrue": true,
- },
- Object {
- "answerLabel": "1 point d’eau public pour 400 habitants.",
- "isTrue": false,
- },
- Object {
- "answerLabel": "1 point d’eau public pour 200 habitants.",
- "isTrue": false,
- },
- ],
- "explanation": "string",
- "questionLabel": "En 1800 à Lyon, combien de points d'eau y avait-il par habitants ?",
- "result": 0,
- "source": "string",
- },
- Object {
- "answers": Array [
- Object {
- "answerLabel": "François Mitterrand",
- "isTrue": false,
- },
- Object {
- "answerLabel": "Napoléon Ier",
- "isTrue": true,
- },
- Object {
- "answerLabel": "Napoléon III",
- "isTrue": false,
- },
- ],
- "explanation": "string",
- "questionLabel": "Qui officialise la création de la Compagnie Générale des eaux ?",
- "result": 0,
- "source": "string",
- },
- Object {
- "answers": Array [
- Object {
- "answerLabel": "string",
- "isTrue": false,
- },
- Object {
- "answerLabel": "string",
- "isTrue": false,
- },
- Object {
- "answerLabel": "Aristide Dumont",
- "isTrue": true,
- },
- ],
- "explanation": "string",
- "questionLabel": "Quel ingénieur est à l’origine du projet d’alimentation en eau en 1856 ?",
- "result": 0,
- "source": "string",
- },
- ],
- "result": 0,
- "startDate": null,
- "state": 0,
- },
- "startDate": null,
- "state": 4,
- "success": 1,
- "target": 15,
- "title": "Challenge 2",
- }
- }
- win={true}
+<body
+ style="padding-right: 0px; overflow: hidden;"
>
- <WithStyles(ForwardRef(Dialog))
- aria-labelledby="accessibility-title"
- classes={
- Object {
- "paper": "modal-paper blue-border",
- "root": "modal-root",
- }
- }
- onClose={[MockFunction]}
- open={true}
+ <div
+ aria-hidden="true"
+ />
+ <div
+ class="MuiDialog-root modal-root"
+ role="presentation"
+ style="position: fixed; z-index: 1300; right: 0px; bottom: 0px; top: 0px; left: 0px;"
>
- <ForwardRef(Dialog)
- aria-labelledby="accessibility-title"
- classes={
- Object {
- "container": "MuiDialog-container",
- "paper": "MuiDialog-paper modal-paper blue-border",
- "paperFullScreen": "MuiDialog-paperFullScreen",
- "paperFullWidth": "MuiDialog-paperFullWidth",
- "paperScrollBody": "MuiDialog-paperScrollBody",
- "paperScrollPaper": "MuiDialog-paperScrollPaper",
- "paperWidthFalse": "MuiDialog-paperWidthFalse",
- "paperWidthLg": "MuiDialog-paperWidthLg",
- "paperWidthMd": "MuiDialog-paperWidthMd",
- "paperWidthSm": "MuiDialog-paperWidthSm",
- "paperWidthXl": "MuiDialog-paperWidthXl",
- "paperWidthXs": "MuiDialog-paperWidthXs",
- "root": "MuiDialog-root modal-root",
- "scrollBody": "MuiDialog-scrollBody",
- "scrollPaper": "MuiDialog-scrollPaper",
- }
- }
- onClose={[MockFunction]}
- open={true}
+ <div
+ aria-hidden="true"
+ class="MuiBackdrop-root"
+ style="opacity: 1; webkit-transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"
+ />
+ <div
+ data-test="sentinelStart"
+ tabindex="0"
+ />
+ <div
+ class="MuiDialog-container MuiDialog-scrollPaper"
+ role="none presentation"
+ style="opacity: 1; webkit-transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"
+ tabindex="-1"
>
- <ForwardRef(Modal)
- BackdropComponent={
- Object {
- "$$typeof": Symbol(react.forward_ref),
- "Naked": Object {
- "$$typeof": Symbol(react.forward_ref),
- "propTypes": Object {
- "children": [Function],
- "className": [Function],
- "classes": [Function],
- "invisible": [Function],
- "open": [Function],
- "transitionDuration": [Function],
- },
- "render": [Function],
- },
- "displayName": "WithStyles(ForwardRef(Backdrop))",
- "options": Object {
- "defaultTheme": Object {
- "breakpoints": Object {
- "between": [Function],
- "down": [Function],
- "keys": Array [
- "xs",
- "sm",
- "md",
- "lg",
- "xl",
- ],
- "only": [Function],
- "up": [Function],
- "values": Object {
- "lg": 1280,
- "md": 960,
- "sm": 600,
- "xl": 1920,
- "xs": 0,
- },
- "width": [Function],
- },
- "direction": "ltr",
- "mixins": Object {
- "gutters": [Function],
- "toolbar": Object {
- "@media (min-width:0px) and (orientation: landscape)": Object {
- "minHeight": 48,
- },
- "@media (min-width:600px)": Object {
- "minHeight": 64,
- },
- "minHeight": 56,
- },
- },
- "overrides": Object {},
- "palette": Object {
- "action": Object {
- "activatedOpacity": 0.12,
- "active": "rgba(0, 0, 0, 0.54)",
- "disabled": "rgba(0, 0, 0, 0.26)",
- "disabledBackground": "rgba(0, 0, 0, 0.12)",
- "disabledOpacity": 0.38,
- "focus": "rgba(0, 0, 0, 0.12)",
- "focusOpacity": 0.12,
- "hover": "rgba(0, 0, 0, 0.04)",
- "hoverOpacity": 0.04,
- "selected": "rgba(0, 0, 0, 0.08)",
- "selectedOpacity": 0.08,
- },
- "augmentColor": [Function],
- "background": Object {
- "default": "#fafafa",
- "paper": "#fff",
- },
- "common": Object {
- "black": "#000",
- "white": "#fff",
- },
- "contrastThreshold": 3,
- "divider": "rgba(0, 0, 0, 0.12)",
- "error": Object {
- "contrastText": "#fff",
- "dark": "#d32f2f",
- "light": "#e57373",
- "main": "#f44336",
- },
- "getContrastText": [Function],
- "grey": Object {
- "100": "#f5f5f5",
- "200": "#eeeeee",
- "300": "#e0e0e0",
- "400": "#bdbdbd",
- "50": "#fafafa",
- "500": "#9e9e9e",
- "600": "#757575",
- "700": "#616161",
- "800": "#424242",
- "900": "#212121",
- "A100": "#d5d5d5",
- "A200": "#aaaaaa",
- "A400": "#303030",
- "A700": "#616161",
- },
- "info": Object {
- "contrastText": "#fff",
- "dark": "#1976d2",
- "light": "#64b5f6",
- "main": "#2196f3",
- },
- "primary": Object {
- "contrastText": "#fff",
- "dark": "#303f9f",
- "light": "#7986cb",
- "main": "#3f51b5",
- },
- "secondary": Object {
- "contrastText": "#fff",
- "dark": "#c51162",
- "light": "#ff4081",
- "main": "#f50057",
- },
- "success": Object {
- "contrastText": "rgba(0, 0, 0, 0.87)",
- "dark": "#388e3c",
- "light": "#81c784",
- "main": "#4caf50",
- },
- "text": Object {
- "disabled": "rgba(0, 0, 0, 0.38)",
- "hint": "rgba(0, 0, 0, 0.38)",
- "primary": "rgba(0, 0, 0, 0.87)",
- "secondary": "rgba(0, 0, 0, 0.54)",
- },
- "tonalOffset": 0.2,
- "type": "light",
- "warning": Object {
- "contrastText": "rgba(0, 0, 0, 0.87)",
- "dark": "#f57c00",
- "light": "#ffb74d",
- "main": "#ff9800",
- },
- },
- "props": Object {},
- "shadows": Array [
- "none",
- "0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12)",
- "0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12)",
- "0px 3px 3px -2px rgba(0,0,0,0.2),0px 3px 4px 0px rgba(0,0,0,0.14),0px 1px 8px 0px rgba(0,0,0,0.12)",
- "0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12)",
- "0px 3px 5px -1px rgba(0,0,0,0.2),0px 5px 8px 0px rgba(0,0,0,0.14),0px 1px 14px 0px rgba(0,0,0,0.12)",
- "0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12)",
- "0px 4px 5px -2px rgba(0,0,0,0.2),0px 7px 10px 1px rgba(0,0,0,0.14),0px 2px 16px 1px rgba(0,0,0,0.12)",
- "0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12)",
- "0px 5px 6px -3px rgba(0,0,0,0.2),0px 9px 12px 1px rgba(0,0,0,0.14),0px 3px 16px 2px rgba(0,0,0,0.12)",
- "0px 6px 6px -3px rgba(0,0,0,0.2),0px 10px 14px 1px rgba(0,0,0,0.14),0px 4px 18px 3px rgba(0,0,0,0.12)",
- "0px 6px 7px -4px rgba(0,0,0,0.2),0px 11px 15px 1px rgba(0,0,0,0.14),0px 4px 20px 3px rgba(0,0,0,0.12)",
- "0px 7px 8px -4px rgba(0,0,0,0.2),0px 12px 17px 2px rgba(0,0,0,0.14),0px 5px 22px 4px rgba(0,0,0,0.12)",
- "0px 7px 8px -4px rgba(0,0,0,0.2),0px 13px 19px 2px rgba(0,0,0,0.14),0px 5px 24px 4px rgba(0,0,0,0.12)",
- "0px 7px 9px -4px rgba(0,0,0,0.2),0px 14px 21px 2px rgba(0,0,0,0.14),0px 5px 26px 4px rgba(0,0,0,0.12)",
- "0px 8px 9px -5px rgba(0,0,0,0.2),0px 15px 22px 2px rgba(0,0,0,0.14),0px 6px 28px 5px rgba(0,0,0,0.12)",
- "0px 8px 10px -5px rgba(0,0,0,0.2),0px 16px 24px 2px rgba(0,0,0,0.14),0px 6px 30px 5px rgba(0,0,0,0.12)",
- "0px 8px 11px -5px rgba(0,0,0,0.2),0px 17px 26px 2px rgba(0,0,0,0.14),0px 6px 32px 5px rgba(0,0,0,0.12)",
- "0px 9px 11px -5px rgba(0,0,0,0.2),0px 18px 28px 2px rgba(0,0,0,0.14),0px 7px 34px 6px rgba(0,0,0,0.12)",
- "0px 9px 12px -6px rgba(0,0,0,0.2),0px 19px 29px 2px rgba(0,0,0,0.14),0px 7px 36px 6px rgba(0,0,0,0.12)",
- "0px 10px 13px -6px rgba(0,0,0,0.2),0px 20px 31px 3px rgba(0,0,0,0.14),0px 8px 38px 7px rgba(0,0,0,0.12)",
- "0px 10px 13px -6px rgba(0,0,0,0.2),0px 21px 33px 3px rgba(0,0,0,0.14),0px 8px 40px 7px rgba(0,0,0,0.12)",
- "0px 10px 14px -6px rgba(0,0,0,0.2),0px 22px 35px 3px rgba(0,0,0,0.14),0px 8px 42px 7px rgba(0,0,0,0.12)",
- "0px 11px 14px -7px rgba(0,0,0,0.2),0px 23px 36px 3px rgba(0,0,0,0.14),0px 9px 44px 8px rgba(0,0,0,0.12)",
- "0px 11px 15px -7px rgba(0,0,0,0.2),0px 24px 38px 3px rgba(0,0,0,0.14),0px 9px 46px 8px rgba(0,0,0,0.12)",
- ],
- "shape": Object {
- "borderRadius": 4,
- },
- "spacing": [Function],
- "transitions": Object {
- "create": [Function],
- "duration": Object {
- "complex": 375,
- "enteringScreen": 225,
- "leavingScreen": 195,
- "short": 250,
- "shorter": 200,
- "shortest": 150,
- "standard": 300,
- },
- "easing": Object {
- "easeIn": "cubic-bezier(0.4, 0, 1, 1)",
- "easeInOut": "cubic-bezier(0.4, 0, 0.2, 1)",
- "easeOut": "cubic-bezier(0.0, 0, 0.2, 1)",
- "sharp": "cubic-bezier(0.4, 0, 0.6, 1)",
- },
- "getAutoHeightDuration": [Function],
- },
- "typography": Object {
- "body1": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "1rem",
- "fontWeight": 400,
- "letterSpacing": "0.00938em",
- "lineHeight": 1.5,
- },
- "body2": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "0.875rem",
- "fontWeight": 400,
- "letterSpacing": "0.01071em",
- "lineHeight": 1.43,
- },
- "button": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "0.875rem",
- "fontWeight": 500,
- "letterSpacing": "0.02857em",
- "lineHeight": 1.75,
- "textTransform": "uppercase",
- },
- "caption": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "0.75rem",
- "fontWeight": 400,
- "letterSpacing": "0.03333em",
- "lineHeight": 1.66,
- },
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": 14,
- "fontWeightBold": 700,
- "fontWeightLight": 300,
- "fontWeightMedium": 500,
- "fontWeightRegular": 400,
- "h1": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "6rem",
- "fontWeight": 300,
- "letterSpacing": "-0.01562em",
- "lineHeight": 1.167,
- },
- "h2": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "3.75rem",
- "fontWeight": 300,
- "letterSpacing": "-0.00833em",
- "lineHeight": 1.2,
- },
- "h3": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "3rem",
- "fontWeight": 400,
- "letterSpacing": "0em",
- "lineHeight": 1.167,
- },
- "h4": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "2.125rem",
- "fontWeight": 400,
- "letterSpacing": "0.00735em",
- "lineHeight": 1.235,
- },
- "h5": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "1.5rem",
- "fontWeight": 400,
- "letterSpacing": "0em",
- "lineHeight": 1.334,
- },
- "h6": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "1.25rem",
- "fontWeight": 500,
- "letterSpacing": "0.0075em",
- "lineHeight": 1.6,
- },
- "htmlFontSize": 16,
- "overline": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "0.75rem",
- "fontWeight": 400,
- "letterSpacing": "0.08333em",
- "lineHeight": 2.66,
- "textTransform": "uppercase",
- },
- "pxToRem": [Function],
- "round": [Function],
- "subtitle1": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "1rem",
- "fontWeight": 400,
- "letterSpacing": "0.00938em",
- "lineHeight": 1.75,
- },
- "subtitle2": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "0.875rem",
- "fontWeight": 500,
- "letterSpacing": "0.00714em",
- "lineHeight": 1.57,
- },
- },
- "zIndex": Object {
- "appBar": 1100,
- "drawer": 1200,
- "mobileStepper": 1000,
- "modal": 1300,
- "snackbar": 1400,
- "speedDial": 1050,
- "tooltip": 1500,
- },
- },
- "name": "MuiBackdrop",
- },
- "propTypes": Object {
- "classes": [Function],
- "innerRef": [Function],
- },
- "render": [Function],
- "useStyles": [Function],
- }
- }
- BackdropProps={
- Object {
- "transitionDuration": Object {
- "enter": 225,
- "exit": 195,
- },
- }
- }
- className="MuiDialog-root modal-root"
- closeAfterTransition={true}
- disableEscapeKeyDown={false}
- onClose={[MockFunction]}
- open={true}
+ <div
+ aria-labelledby="accessibility-title"
+ class="MuiPaper-root MuiDialog-paper modal-paper blue-border MuiDialog-paperScrollPaper MuiDialog-paperWidthSm MuiPaper-elevation24 MuiPaper-rounded"
+ role="dialog"
>
- <ForwardRef(Portal)
- disablePortal={false}
+ <div
+ id="accessibility-title"
>
- <Portal
- containerInfo={
- <body
- style="padding-right: 0px; overflow: hidden;"
- >
- <div
- class="MuiDialog-root modal-root"
- role="presentation"
- style="position: fixed; z-index: 1300; right: 0px; bottom: 0px; top: 0px; left: 0px;"
- >
- <div
- aria-hidden="true"
- class="MuiBackdrop-root"
- style="opacity: 1; webkit-transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"
- />
- <div
- data-test="sentinelStart"
- tabindex="0"
- />
- <div
- class="MuiDialog-container MuiDialog-scrollPaper"
- role="none presentation"
- style="opacity: 1; webkit-transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"
- tabindex="-1"
- >
- <div
- aria-labelledby="accessibility-title"
- class="MuiPaper-root MuiDialog-paper modal-paper blue-border MuiDialog-paperScrollPaper MuiDialog-paperWidthSm MuiPaper-elevation24 MuiPaper-rounded"
- role="dialog"
- >
- <div
- id="accessibility-title"
- >
- duel_result_modal.accessibility.window_title
- </div>
- <div
- class="duel-result-modal-root "
- >
- <div
- class="imgResultContainer"
- >
- <svg
- class="challengeWon styles__icon___23x3R"
- height="300"
- width="300"
- >
- <use
- xlink:href="#test-file-stub"
- />
- </svg>
- <svg
- class="imgResult styles__icon___23x3R"
- height="180"
- width="180"
- >
- <use
- xlink:href="#test-file-stub"
- />
- </svg>
- </div>
- <div
- class="text-28-normal-uppercase title"
- >
- duel_result_modal.success.title
- </div>
- <div
- class="text-18-bold"
- >
- duel_result_modal.success.message1
- </div>
- <div
- class="text-18-bold"
- >
- duel_result_modal.success.message2
- </div>
- <button
- aria-label="duel_result_modal.accessibility.button_validate"
- class="MuiButtonBase-root MuiButton-root btn-secondary-negative MuiButton-text buttonCloseModal"
- tabindex="0"
- type="button"
- >
- <span
- class="MuiButton-label text-16-normal"
- >
- duel_result_modal.success.button_validate
- </span>
- <span
- class="MuiTouchRipple-root"
- />
- </button>
- </div>
- </div>
- </div>
- <div
- data-test="sentinelEnd"
- tabindex="0"
- />
- </div>
- </body>
- }
+ duel_result_modal.accessibility.window_title
+ </div>
+ <div
+ class="duel-result-modal-root"
+ >
+ <div
+ class="imgResultContainer"
+ >
+ <svg
+ class="challengeWon styles__icon___23x3R"
+ height="300"
+ width="300"
+ >
+ <use
+ xlink:href="#test-file-stub"
+ />
+ </svg>
+ <svg
+ class="imgResult styles__icon___23x3R"
+ height="180"
+ width="180"
+ >
+ <use
+ xlink:href="#test-file-stub"
+ />
+ </svg>
+ </div>
+ <div
+ class="text-28-normal-uppercase title"
+ >
+ duel_result_modal.success.title
+ </div>
+ <div
+ class="text-18-bold"
+ >
+ duel_result_modal.success.message1
+ </div>
+ <div
+ class="text-18-bold"
+ >
+ duel_result_modal.success.message2
+ </div>
+ <button
+ aria-label="duel_result_modal.accessibility.button_validate"
+ class="MuiButtonBase-root MuiButton-root MuiButton-text btnSecondary"
+ tabindex="0"
+ type="button"
>
- <div
- className="MuiDialog-root modal-root"
- onKeyDown={[Function]}
- role="presentation"
- style={
- Object {
- "bottom": 0,
- "left": 0,
- "position": "fixed",
- "right": 0,
- "top": 0,
- "zIndex": 1300,
- }
- }
+ <span
+ class="MuiButton-label"
>
- <WithStyles(ForwardRef(Backdrop))
- onClick={[Function]}
- open={true}
- transitionDuration={
- Object {
- "enter": 225,
- "exit": 195,
- }
- }
- >
- <ForwardRef(Backdrop)
- classes={
- Object {
- "invisible": "MuiBackdrop-invisible",
- "root": "MuiBackdrop-root",
- }
- }
- onClick={[Function]}
- open={true}
- transitionDuration={
- Object {
- "enter": 225,
- "exit": 195,
- }
- }
- >
- <ForwardRef(Fade)
- in={true}
- onClick={[Function]}
- timeout={
- Object {
- "enter": 225,
- "exit": 195,
- }
- }
- >
- <Transition
- appear={true}
- enter={true}
- exit={true}
- in={true}
- mountOnEnter={false}
- onClick={[Function]}
- onEnter={[Function]}
- onEntered={[Function]}
- onEntering={[Function]}
- onExit={[Function]}
- onExited={[Function]}
- onExiting={[Function]}
- timeout={
- Object {
- "enter": 225,
- "exit": 195,
- }
- }
- unmountOnExit={false}
- >
- <div
- aria-hidden={true}
- className="MuiBackdrop-root"
- onClick={[Function]}
- style={
- Object {
- "opacity": 1,
- "visibility": undefined,
- }
- }
- />
- </Transition>
- </ForwardRef(Fade)>
- </ForwardRef(Backdrop)>
- </WithStyles(ForwardRef(Backdrop))>
- <Unstable_TrapFocus
- disableAutoFocus={false}
- disableEnforceFocus={false}
- disableRestoreFocus={false}
- getDoc={[Function]}
- isEnabled={[Function]}
- open={true}
- >
- <div
- data-test="sentinelStart"
- tabIndex={0}
- />
- <ForwardRef(Fade)
- appear={true}
- in={true}
- onEnter={[Function]}
- onExited={[Function]}
- role="none presentation"
- tabIndex="-1"
- timeout={
- Object {
- "enter": 225,
- "exit": 195,
- }
- }
- >
- <Transition
- appear={true}
- enter={true}
- exit={true}
- in={true}
- mountOnEnter={false}
- onEnter={[Function]}
- onEntered={[Function]}
- onEntering={[Function]}
- onExit={[Function]}
- onExited={[Function]}
- onExiting={[Function]}
- role="none presentation"
- tabIndex="-1"
- timeout={
- Object {
- "enter": 225,
- "exit": 195,
- }
- }
- unmountOnExit={false}
- >
- <div
- className="MuiDialog-container MuiDialog-scrollPaper"
- onMouseDown={[Function]}
- onMouseUp={[Function]}
- role="none presentation"
- style={
- Object {
- "opacity": 1,
- "visibility": undefined,
- }
- }
- tabIndex="-1"
- >
- <WithStyles(ForwardRef(Paper))
- aria-labelledby="accessibility-title"
- className="MuiDialog-paper modal-paper blue-border MuiDialog-paperScrollPaper MuiDialog-paperWidthSm"
- elevation={24}
- role="dialog"
- >
- <ForwardRef(Paper)
- aria-labelledby="accessibility-title"
- className="MuiDialog-paper modal-paper blue-border MuiDialog-paperScrollPaper MuiDialog-paperWidthSm"
- classes={
- Object {
- "elevation0": "MuiPaper-elevation0",
- "elevation1": "MuiPaper-elevation1",
- "elevation10": "MuiPaper-elevation10",
- "elevation11": "MuiPaper-elevation11",
- "elevation12": "MuiPaper-elevation12",
- "elevation13": "MuiPaper-elevation13",
- "elevation14": "MuiPaper-elevation14",
- "elevation15": "MuiPaper-elevation15",
- "elevation16": "MuiPaper-elevation16",
- "elevation17": "MuiPaper-elevation17",
- "elevation18": "MuiPaper-elevation18",
- "elevation19": "MuiPaper-elevation19",
- "elevation2": "MuiPaper-elevation2",
- "elevation20": "MuiPaper-elevation20",
- "elevation21": "MuiPaper-elevation21",
- "elevation22": "MuiPaper-elevation22",
- "elevation23": "MuiPaper-elevation23",
- "elevation24": "MuiPaper-elevation24",
- "elevation3": "MuiPaper-elevation3",
- "elevation4": "MuiPaper-elevation4",
- "elevation5": "MuiPaper-elevation5",
- "elevation6": "MuiPaper-elevation6",
- "elevation7": "MuiPaper-elevation7",
- "elevation8": "MuiPaper-elevation8",
- "elevation9": "MuiPaper-elevation9",
- "outlined": "MuiPaper-outlined",
- "root": "MuiPaper-root",
- "rounded": "MuiPaper-rounded",
- }
- }
- elevation={24}
- role="dialog"
- >
- <div
- aria-labelledby="accessibility-title"
- className="MuiPaper-root MuiDialog-paper modal-paper blue-border MuiDialog-paperScrollPaper MuiDialog-paperWidthSm MuiPaper-elevation24 MuiPaper-rounded"
- role="dialog"
- >
- <div
- id="accessibility-title"
- >
- duel_result_modal.accessibility.window_title
- </div>
- <div
- className="duel-result-modal-root "
- >
- <div
- className="imgResultContainer"
- >
- <Icon
- className="challengeWon"
- icon="test-file-stub"
- size={300}
- spin={false}
- >
- <Component
- className="challengeWon styles__icon___23x3R"
- height={300}
- style={Object {}}
- width={300}
- >
- <svg
- className="challengeWon styles__icon___23x3R"
- height={300}
- style={Object {}}
- width={300}
- >
- <use
- xlinkHref="#test-file-stub"
- />
- </svg>
- </Component>
- </Icon>
- <Icon
- className="imgResult"
- icon="test-file-stub"
- size={180}
- spin={false}
- >
- <Component
- className="imgResult styles__icon___23x3R"
- height={180}
- style={Object {}}
- width={180}
- >
- <svg
- className="imgResult styles__icon___23x3R"
- height={180}
- style={Object {}}
- width={180}
- >
- <use
- xlinkHref="#test-file-stub"
- />
- </svg>
- </Component>
- </Icon>
- </div>
- <div
- className="text-28-normal-uppercase title"
- >
- duel_result_modal.success.title
- </div>
- <div
- className="text-18-bold"
- >
- duel_result_modal.success.message1
- </div>
- <div
- className="text-18-bold"
- >
- duel_result_modal.success.message2
- </div>
- <WithStyles(ForwardRef(Button))
- aria-label="duel_result_modal.accessibility.button_validate"
- className="buttonCloseModal"
- classes={
- Object {
- "label": "text-16-normal",
- "root": "btn-secondary-negative",
- }
- }
- onClick={[MockFunction]}
- >
- <ForwardRef(Button)
- aria-label="duel_result_modal.accessibility.button_validate"
- className="buttonCloseModal"
- classes={
- Object {
- "colorInherit": "MuiButton-colorInherit",
- "contained": "MuiButton-contained",
- "containedPrimary": "MuiButton-containedPrimary",
- "containedSecondary": "MuiButton-containedSecondary",
- "containedSizeLarge": "MuiButton-containedSizeLarge",
- "containedSizeSmall": "MuiButton-containedSizeSmall",
- "disableElevation": "MuiButton-disableElevation",
- "disabled": "Mui-disabled",
- "endIcon": "MuiButton-endIcon",
- "focusVisible": "Mui-focusVisible",
- "fullWidth": "MuiButton-fullWidth",
- "iconSizeLarge": "MuiButton-iconSizeLarge",
- "iconSizeMedium": "MuiButton-iconSizeMedium",
- "iconSizeSmall": "MuiButton-iconSizeSmall",
- "label": "MuiButton-label text-16-normal",
- "outlined": "MuiButton-outlined",
- "outlinedPrimary": "MuiButton-outlinedPrimary",
- "outlinedSecondary": "MuiButton-outlinedSecondary",
- "outlinedSizeLarge": "MuiButton-outlinedSizeLarge",
- "outlinedSizeSmall": "MuiButton-outlinedSizeSmall",
- "root": "MuiButton-root btn-secondary-negative",
- "sizeLarge": "MuiButton-sizeLarge",
- "sizeSmall": "MuiButton-sizeSmall",
- "startIcon": "MuiButton-startIcon",
- "text": "MuiButton-text",
- "textPrimary": "MuiButton-textPrimary",
- "textSecondary": "MuiButton-textSecondary",
- "textSizeLarge": "MuiButton-textSizeLarge",
- "textSizeSmall": "MuiButton-textSizeSmall",
- }
- }
- onClick={[MockFunction]}
- >
- <WithStyles(ForwardRef(ButtonBase))
- aria-label="duel_result_modal.accessibility.button_validate"
- className="MuiButton-root btn-secondary-negative MuiButton-text buttonCloseModal"
- component="button"
- disabled={false}
- focusRipple={true}
- focusVisibleClassName="Mui-focusVisible"
- onClick={[MockFunction]}
- type="button"
- >
- <ForwardRef(ButtonBase)
- aria-label="duel_result_modal.accessibility.button_validate"
- className="MuiButton-root btn-secondary-negative MuiButton-text buttonCloseModal"
- classes={
- Object {
- "disabled": "Mui-disabled",
- "focusVisible": "Mui-focusVisible",
- "root": "MuiButtonBase-root",
- }
- }
- component="button"
- disabled={false}
- focusRipple={true}
- focusVisibleClassName="Mui-focusVisible"
- onClick={[MockFunction]}
- type="button"
- >
- <button
- aria-label="duel_result_modal.accessibility.button_validate"
- className="MuiButtonBase-root MuiButton-root btn-secondary-negative MuiButton-text buttonCloseModal"
- disabled={false}
- onBlur={[Function]}
- onClick={[MockFunction]}
- onDragLeave={[Function]}
- onFocus={[Function]}
- onKeyDown={[Function]}
- onKeyUp={[Function]}
- onMouseDown={[Function]}
- onMouseLeave={[Function]}
- onMouseUp={[Function]}
- onTouchEnd={[Function]}
- onTouchMove={[Function]}
- onTouchStart={[Function]}
- tabIndex={0}
- type="button"
- >
- <span
- className="MuiButton-label text-16-normal"
- >
- duel_result_modal.success.button_validate
- </span>
- <WithStyles(memo)
- center={false}
- >
- <ForwardRef(TouchRipple)
- center={false}
- classes={
- Object {
- "child": "MuiTouchRipple-child",
- "childLeaving": "MuiTouchRipple-childLeaving",
- "childPulsate": "MuiTouchRipple-childPulsate",
- "ripple": "MuiTouchRipple-ripple",
- "ripplePulsate": "MuiTouchRipple-ripplePulsate",
- "rippleVisible": "MuiTouchRipple-rippleVisible",
- "root": "MuiTouchRipple-root",
- }
- }
- >
- <span
- className="MuiTouchRipple-root"
- >
- <TransitionGroup
- childFactory={[Function]}
- component={null}
- exit={true}
- />
- </span>
- </ForwardRef(TouchRipple)>
- </WithStyles(memo)>
- </button>
- </ForwardRef(ButtonBase)>
- </WithStyles(ForwardRef(ButtonBase))>
- </ForwardRef(Button)>
- </WithStyles(ForwardRef(Button))>
- </div>
- </div>
- </ForwardRef(Paper)>
- </WithStyles(ForwardRef(Paper))>
- </div>
- </Transition>
- </ForwardRef(Fade)>
- <div
- data-test="sentinelEnd"
- tabIndex={0}
- />
- </Unstable_TrapFocus>
- </div>
- </Portal>
- </ForwardRef(Portal)>
- </ForwardRef(Modal)>
- </ForwardRef(Dialog)>
- </WithStyles(ForwardRef(Dialog))>
-</DuelResultModal>
+ duel_result_modal.success.button_validate
+ </span>
+ <span
+ class="MuiTouchRipple-root"
+ />
+ </button>
+ </div>
+ </div>
+ </div>
+ <div
+ data-test="sentinelEnd"
+ tabindex="0"
+ />
+ </div>
+</body>
`;
diff --git a/src/components/Duel/DuelResultModal/duelResultModal.scss b/src/components/Duel/DuelResultModal/duelResultModal.scss
index 0c34d5c749566b0d3ca14c16aef87a990e85d396..e8a2945eda2f011ff209d9cb7f1504dcf1666ad1 100644
--- a/src/components/Duel/DuelResultModal/duelResultModal.scss
+++ b/src/components/Duel/DuelResultModal/duelResultModal.scss
@@ -7,6 +7,10 @@
margin: 2rem 0 1rem;
color: $grey-bright;
}
+
+ button {
+ margin-top: 1rem;
+ }
}
#accessibility-title {
@@ -27,7 +31,3 @@
transform: translate(-50%, 32%);
}
}
-
-.buttonCloseModal {
- margin-top: 1rem !important;
-}
diff --git a/src/components/Duel/DuelUnlocked/DuelUnlocked.spec.tsx b/src/components/Duel/DuelUnlocked/DuelUnlocked.spec.tsx
index 822eff26b405e9e7c99bc755697de2a10d4f7583..d1835e74fdd1ee74d2612e44db56a6e8bfa932e7 100644
--- a/src/components/Duel/DuelUnlocked/DuelUnlocked.spec.tsx
+++ b/src/components/Duel/DuelUnlocked/DuelUnlocked.spec.tsx
@@ -1,7 +1,6 @@
-import Button from '@material-ui/core/Button'
-import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
+import { render, screen } from '@testing-library/react'
+import { userEvent } from '@testing-library/user-event'
import { FluidType, UserChallengeUpdateFlag } from 'enums'
-import { mount } from 'enzyme'
import React from 'react'
import { Provider } from 'react-redux'
import { createMockEcolyoStore, mockGlobalState } from 'tests/__mocks__/store'
@@ -24,40 +23,39 @@ describe('DuelUnlocked component', () => {
const store = createMockEcolyoStore()
it('should be rendered correctly', () => {
- const average: string = formatNumberValues(
+ const average = formatNumberValues(
userChallengeData[1].duel.threshold
).toString()
- const description: string =
+ const description =
'"' +
userChallengeData[1].duel.description.replace('#CONSUMPTION', average) +
'"'
- const wrapper = mount(
+ const { container } = render(
<Provider store={store}>
<DuelUnlocked userChallenge={userChallengeData[0]} />
</Provider>
)
- expect(wrapper.find('.duel-title').text()).toEqual(
- userChallengeData[1].duel.title
- )
- expect(wrapper.find(StyledIcon).exists()).toBeTruthy()
- expect(wrapper.find('.duel-description').text()).toEqual(description)
- expect(wrapper.find('.duel-average-info').exists()).toBeTruthy()
- expect(wrapper.find('.button-start').exists()).toBeTruthy()
+ expect(container).toMatchSnapshot()
+ expect(
+ screen.getByText(userChallengeData[1].duel.title)
+ ).toBeInTheDocument()
+ expect(screen.getByText(description)).toBeInTheDocument()
+ expect(screen.getByRole('button')).toBeInTheDocument()
})
- it('should update userChallenge when launching duel with configured fluid', () => {
+ it('should update userChallenge when launching duel with configured fluid', async () => {
const store = createMockEcolyoStore({
global: {
...mockGlobalState,
fluidTypes: [FluidType.ELECTRICITY],
},
})
- const wrapper = mount(
+ render(
<Provider store={store}>
<DuelUnlocked userChallenge={userChallengeData[0]} />
</Provider>
)
- wrapper.find('.button-start').find(Button).simulate('click')
+ await userEvent.click(screen.getByRole('button'))
expect(mockUserChallengeUpdateFlag).toHaveBeenCalledWith(
userChallengeData[0],
UserChallengeUpdateFlag.DUEL_START
diff --git a/src/components/Duel/DuelUnlocked/DuelUnlocked.tsx b/src/components/Duel/DuelUnlocked/DuelUnlocked.tsx
index c5da4d74ed98df664d3aa769f0033eb33fcd92ff..27b865cea43441de5a0f32ebacdcb06433df7645 100644
--- a/src/components/Duel/DuelUnlocked/DuelUnlocked.tsx
+++ b/src/components/Duel/DuelUnlocked/DuelUnlocked.tsx
@@ -34,9 +34,8 @@ const DuelUnlocked = ({ userChallenge }: { userChallenge: UserChallenge }) => {
userChallenge,
UserChallengeUpdateFlag.DUEL_START
)
- const dataloads = await challengeService.getUserChallengeDataload(
- updatedChallenge
- )
+ const dataloads =
+ await challengeService.getUserChallengeDataload(updatedChallenge)
await UsageEventService.addEvent(client, {
type: UsageEventType.DUEL_LAUNCH_EVENT,
target: userChallenge.duel.id,
@@ -76,10 +75,7 @@ const DuelUnlocked = ({ userChallenge }: { userChallenge: UserChallenge }) => {
<Button
aria-label={t('duel.accessibility.button_start_duel')}
onClick={launchDuel}
- classes={{
- root: 'btn-secondary-negative',
- label: 'text-16-normal',
- }}
+ className="btnSecondary"
>
{t('duel.button_start')}
</Button>
diff --git a/src/components/Duel/DuelUnlocked/__snapshots__/DuelUnlocked.spec.tsx.snap b/src/components/Duel/DuelUnlocked/__snapshots__/DuelUnlocked.spec.tsx.snap
new file mode 100644
index 0000000000000000000000000000000000000000..3713f41953be338f9a5890b7717f731e2670516e
--- /dev/null
+++ b/src/components/Duel/DuelUnlocked/__snapshots__/DuelUnlocked.spec.tsx.snap
@@ -0,0 +1,54 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`DuelUnlocked component should be rendered correctly 1`] = `
+<div>
+ <div
+ class="duel-unlocked-container"
+ >
+ <svg
+ aria-hidden="true"
+ class="duel-icon styles__icon___23x3R"
+ height="219"
+ width="219"
+ >
+ <use
+ xlink:href="#test-file-stub"
+ />
+ </svg>
+ <div
+ class="duel-description text-20-italic"
+ >
+ "Je parie un ours polaire que vous ne pouvez pas consommer moins que 0,00 € en 1 semaine"
+ </div>
+ <div
+ class="duel-title text-16-normal"
+ >
+ Title DUEL001
+ </div>
+ <div
+ class="duel-average-info text-18-normal"
+ >
+ duel.average_info
+ </div>
+ <div
+ class="button-start"
+ >
+ <button
+ aria-label="duel.accessibility.button_start_duel"
+ class="MuiButtonBase-root MuiButton-root MuiButton-text btnSecondary"
+ tabindex="0"
+ type="button"
+ >
+ <span
+ class="MuiButton-label"
+ >
+ duel.button_start
+ </span>
+ <span
+ class="MuiTouchRipple-root"
+ />
+ </button>
+ </div>
+ </div>
+</div>
+`;
diff --git a/src/components/Duel/DuelUnlocked/duelUnlocked.scss b/src/components/Duel/DuelUnlocked/duelUnlocked.scss
index a7a72ad803bc2bd2584c2ee865c954d14d4cf10a..36b7a4d4fce99ba9fda686833f7c5e3af0be92d6 100644
--- a/src/components/Duel/DuelUnlocked/duelUnlocked.scss
+++ b/src/components/Duel/DuelUnlocked/duelUnlocked.scss
@@ -28,7 +28,3 @@
width: 100%;
max-width: 175px;
}
-button.btn-secondary-negative {
- margin: 0;
- padding: 0.5rem;
-}
diff --git a/src/components/Duel/DuelView.spec.tsx b/src/components/Duel/DuelView.spec.tsx
index 9908eb501c43b047fdac9f60389f55d9c344847e..65d11f79f881276aba6fb8bd843f170cb11f2faa 100644
--- a/src/components/Duel/DuelView.spec.tsx
+++ b/src/components/Duel/DuelView.spec.tsx
@@ -1,14 +1,11 @@
+import { render, waitFor } from '@testing-library/react'
import DuelView from 'components/Duel/DuelView'
import { UserChallengeState, UserDuelState } from 'enums'
-import { mount } from 'enzyme'
import React from 'react'
import { Provider } from 'react-redux'
import { challengeStateData } from 'tests/__mocks__/challengeStateData.mock'
import { createMockEcolyoStore, mockChartState } from 'tests/__mocks__/store'
import { userChallengeData } from 'tests/__mocks__/userChallengeData.mock'
-import DuelError from './DuelError/DuelError'
-import DuelOngoing from './DuelOngoing/DuelOngoing'
-import DuelUnlocked from './DuelUnlocked/DuelUnlocked'
jest.mock('components/Header/CozyBar', () => 'mock-cozybar')
jest.mock('components/Header/Header', () => 'mock-header')
@@ -22,17 +19,19 @@ jest.mock('react-router-dom', () => ({
}))
describe('DuelView component', () => {
- it('should be rendered with DuelError component when no current challenge', () => {
+ it('should be rendered with DuelError component with no current challenge', () => {
const store = createMockEcolyoStore({ challenge: challengeStateData })
- const wrapper = mount(
+ const { container } = render(
<Provider store={store}>
<DuelView />
</Provider>
)
- expect(wrapper.find(DuelError).exists()).toBeTruthy()
+ expect(
+ container.getElementsByClassName('duel-error-container').length
+ ).toBeTruthy()
})
- it('should be rendered with DuelOngoing component when current challenge with state = duel and duel state = done', () => {
+ it('should be rendered with DuelOngoing component when current challenge with state = duel and duel state = done', async () => {
const updatedUserChallenge = {
...userChallengeData[1],
state: UserChallengeState.DUEL,
@@ -48,12 +47,15 @@ describe('DuelView component', () => {
challenge: updatedChallengeState,
chart: mockChartState,
})
- const wrapper = mount(
+ const { container } = render(
<Provider store={store}>
<DuelView />
</Provider>
)
- expect(wrapper.find(DuelOngoing).exists()).toBeTruthy()
+ await waitFor(() => null, { container })
+ expect(
+ container.getElementsByClassName('duel-ongoing-container').length
+ ).toBeTruthy()
})
it('should be rendered with DuelError component when current challenge with state = duel and duel state = locked', () => {
@@ -69,12 +71,14 @@ describe('DuelView component', () => {
}
updatedChallengeState.userChallengeList[1] = updatedUserChallenge
const store = createMockEcolyoStore({ challenge: updatedChallengeState })
- const wrapper = mount(
+ const { container } = render(
<Provider store={store}>
<DuelView />
</Provider>
)
- expect(wrapper.find(DuelError).exists()).toBeTruthy()
+ expect(
+ container.getElementsByClassName('duel-error-container').length
+ ).toBeTruthy()
})
it('should be rendered with DuelError component when current challenge with state != duel', () => {
@@ -89,12 +93,14 @@ describe('DuelView component', () => {
}
updatedChallengeState.userChallengeList[1] = updatedUserChallenge
const store = createMockEcolyoStore({ challenge: updatedChallengeState })
- const wrapper = mount(
+ const { container } = render(
<Provider store={store}>
<DuelView />
</Provider>
)
- expect(wrapper.find(DuelError).exists()).toBeTruthy()
+ expect(
+ container.getElementsByClassName('duel-error-container').length
+ ).toBeTruthy()
})
it('should be rendered with DuelUnlocked component when current challenge with state = duel and duel state = unlocked', () => {
@@ -110,12 +116,14 @@ describe('DuelView component', () => {
}
updatedChallengeState.userChallengeList[1] = updatedUserChallenge
const store = createMockEcolyoStore({ challenge: updatedChallengeState })
- const wrapper = mount(
+ const { container } = render(
<Provider store={store}>
<DuelView />
</Provider>
)
- expect(wrapper.find(DuelUnlocked).exists()).toBeTruthy()
+ expect(
+ container.getElementsByClassName('duel-unlocked-container').length
+ ).toBeTruthy()
})
it('should be rendered with DuelOngoing component when current challenge with state = duel and duel state = ongoing', () => {
@@ -134,11 +142,13 @@ describe('DuelView component', () => {
challenge: updatedChallengeState,
chart: mockChartState,
})
- const wrapper = mount(
+ const { container } = render(
<Provider store={store}>
<DuelView />
</Provider>
)
- expect(wrapper.find(DuelOngoing).exists()).toBeTruthy()
+ expect(
+ container.getElementsByClassName('duel-ongoing-container').length
+ ).toBeTruthy()
})
})
diff --git a/src/components/Duel/DuelView.tsx b/src/components/Duel/DuelView.tsx
index 5e29d720c8f6bd2e45a47d42b0a722f5178fbf3b..1c60115ab09cdfac9793d86f43417f5f6763b3c2 100644
--- a/src/components/Duel/DuelView.tsx
+++ b/src/components/Duel/DuelView.tsx
@@ -1,7 +1,7 @@
import Content from 'components/Content/Content'
import CozyBar from 'components/Header/CozyBar'
import Header from 'components/Header/Header'
-import { UserChallengeState, UserDuelState } from 'enums'
+import { UserDuelState } from 'enums'
import { UserChallenge } from 'models'
import React, { useState } from 'react'
import { useLocation, useNavigate } from 'react-router-dom'
@@ -23,8 +23,8 @@ const DuelView = () => {
const goBackToChallenge = () => {
navigate('/challenges')
}
- const renderDuel = (challenge: UserChallenge) => {
- switch (challenge.duel.state) {
+ const renderDuel = (challenge: UserChallenge | undefined) => {
+ switch (challenge?.duel.state) {
case UserDuelState.UNLOCKED:
return <DuelUnlocked userChallenge={challenge} />
case UserDuelState.ONGOING:
@@ -52,15 +52,7 @@ const DuelView = () => {
displayBackArrow={true}
/>
<Content heightOffset={headerHeight}>
- <div>
- {challengeToDisplay &&
- (challengeToDisplay.state === UserChallengeState.DUEL ||
- challengeToDisplay.state === UserChallengeState.DONE) ? (
- renderDuel(challengeToDisplay)
- ) : (
- <DuelError />
- )}
- </div>
+ {renderDuel(challengeToDisplay)}
</Content>
</>
)
diff --git a/src/components/Duel/LastDuelModal/__snapshots__/lastDuelModal.spec.tsx.snap b/src/components/Duel/LastDuelModal/__snapshots__/lastDuelModal.spec.tsx.snap
index 14af31e26777e73662c46c65845fac26cffe9ac2..94080d04db0112ac94524c000602b89c7c440d93 100644
--- a/src/components/Duel/LastDuelModal/__snapshots__/lastDuelModal.spec.tsx.snap
+++ b/src/components/Duel/LastDuelModal/__snapshots__/lastDuelModal.spec.tsx.snap
@@ -1,781 +1,106 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`lastDuelModal component should render correctly 1`] = `
-<LastDuelModal
- handleCloseClick={[MockFunction]}
- open={true}
+<body
+ style="padding-right: 0px; overflow: hidden;"
>
- <WithStyles(ForwardRef(Dialog))
- aria-labelledby="accessibility-title"
- classes={
- Object {
- "paper": "modal-paper blue-light-border",
- "root": "modal-root",
- }
- }
- onClose={[MockFunction]}
- open={true}
+ <div
+ aria-hidden="true"
+ />
+ <div
+ class="MuiDialog-root modal-root"
+ role="presentation"
+ style="position: fixed; z-index: 1300; right: 0px; bottom: 0px; top: 0px; left: 0px;"
>
- <ForwardRef(Dialog)
- aria-labelledby="accessibility-title"
- classes={
- Object {
- "container": "MuiDialog-container",
- "paper": "MuiDialog-paper modal-paper blue-light-border",
- "paperFullScreen": "MuiDialog-paperFullScreen",
- "paperFullWidth": "MuiDialog-paperFullWidth",
- "paperScrollBody": "MuiDialog-paperScrollBody",
- "paperScrollPaper": "MuiDialog-paperScrollPaper",
- "paperWidthFalse": "MuiDialog-paperWidthFalse",
- "paperWidthLg": "MuiDialog-paperWidthLg",
- "paperWidthMd": "MuiDialog-paperWidthMd",
- "paperWidthSm": "MuiDialog-paperWidthSm",
- "paperWidthXl": "MuiDialog-paperWidthXl",
- "paperWidthXs": "MuiDialog-paperWidthXs",
- "root": "MuiDialog-root modal-root",
- "scrollBody": "MuiDialog-scrollBody",
- "scrollPaper": "MuiDialog-scrollPaper",
- }
- }
- onClose={[MockFunction]}
- open={true}
+ <div
+ aria-hidden="true"
+ class="MuiBackdrop-root"
+ style="opacity: 1; webkit-transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"
+ />
+ <div
+ data-test="sentinelStart"
+ tabindex="0"
+ />
+ <div
+ class="MuiDialog-container MuiDialog-scrollPaper"
+ role="none presentation"
+ style="opacity: 1; webkit-transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"
+ tabindex="-1"
>
- <ForwardRef(Modal)
- BackdropComponent={
- Object {
- "$$typeof": Symbol(react.forward_ref),
- "Naked": Object {
- "$$typeof": Symbol(react.forward_ref),
- "propTypes": Object {
- "children": [Function],
- "className": [Function],
- "classes": [Function],
- "invisible": [Function],
- "open": [Function],
- "transitionDuration": [Function],
- },
- "render": [Function],
- },
- "displayName": "WithStyles(ForwardRef(Backdrop))",
- "options": Object {
- "defaultTheme": Object {
- "breakpoints": Object {
- "between": [Function],
- "down": [Function],
- "keys": Array [
- "xs",
- "sm",
- "md",
- "lg",
- "xl",
- ],
- "only": [Function],
- "up": [Function],
- "values": Object {
- "lg": 1280,
- "md": 960,
- "sm": 600,
- "xl": 1920,
- "xs": 0,
- },
- "width": [Function],
- },
- "direction": "ltr",
- "mixins": Object {
- "gutters": [Function],
- "toolbar": Object {
- "@media (min-width:0px) and (orientation: landscape)": Object {
- "minHeight": 48,
- },
- "@media (min-width:600px)": Object {
- "minHeight": 64,
- },
- "minHeight": 56,
- },
- },
- "overrides": Object {},
- "palette": Object {
- "action": Object {
- "activatedOpacity": 0.12,
- "active": "rgba(0, 0, 0, 0.54)",
- "disabled": "rgba(0, 0, 0, 0.26)",
- "disabledBackground": "rgba(0, 0, 0, 0.12)",
- "disabledOpacity": 0.38,
- "focus": "rgba(0, 0, 0, 0.12)",
- "focusOpacity": 0.12,
- "hover": "rgba(0, 0, 0, 0.04)",
- "hoverOpacity": 0.04,
- "selected": "rgba(0, 0, 0, 0.08)",
- "selectedOpacity": 0.08,
- },
- "augmentColor": [Function],
- "background": Object {
- "default": "#fafafa",
- "paper": "#fff",
- },
- "common": Object {
- "black": "#000",
- "white": "#fff",
- },
- "contrastThreshold": 3,
- "divider": "rgba(0, 0, 0, 0.12)",
- "error": Object {
- "contrastText": "#fff",
- "dark": "#d32f2f",
- "light": "#e57373",
- "main": "#f44336",
- },
- "getContrastText": [Function],
- "grey": Object {
- "100": "#f5f5f5",
- "200": "#eeeeee",
- "300": "#e0e0e0",
- "400": "#bdbdbd",
- "50": "#fafafa",
- "500": "#9e9e9e",
- "600": "#757575",
- "700": "#616161",
- "800": "#424242",
- "900": "#212121",
- "A100": "#d5d5d5",
- "A200": "#aaaaaa",
- "A400": "#303030",
- "A700": "#616161",
- },
- "info": Object {
- "contrastText": "#fff",
- "dark": "#1976d2",
- "light": "#64b5f6",
- "main": "#2196f3",
- },
- "primary": Object {
- "contrastText": "#fff",
- "dark": "#303f9f",
- "light": "#7986cb",
- "main": "#3f51b5",
- },
- "secondary": Object {
- "contrastText": "#fff",
- "dark": "#c51162",
- "light": "#ff4081",
- "main": "#f50057",
- },
- "success": Object {
- "contrastText": "rgba(0, 0, 0, 0.87)",
- "dark": "#388e3c",
- "light": "#81c784",
- "main": "#4caf50",
- },
- "text": Object {
- "disabled": "rgba(0, 0, 0, 0.38)",
- "hint": "rgba(0, 0, 0, 0.38)",
- "primary": "rgba(0, 0, 0, 0.87)",
- "secondary": "rgba(0, 0, 0, 0.54)",
- },
- "tonalOffset": 0.2,
- "type": "light",
- "warning": Object {
- "contrastText": "rgba(0, 0, 0, 0.87)",
- "dark": "#f57c00",
- "light": "#ffb74d",
- "main": "#ff9800",
- },
- },
- "props": Object {},
- "shadows": Array [
- "none",
- "0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12)",
- "0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12)",
- "0px 3px 3px -2px rgba(0,0,0,0.2),0px 3px 4px 0px rgba(0,0,0,0.14),0px 1px 8px 0px rgba(0,0,0,0.12)",
- "0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12)",
- "0px 3px 5px -1px rgba(0,0,0,0.2),0px 5px 8px 0px rgba(0,0,0,0.14),0px 1px 14px 0px rgba(0,0,0,0.12)",
- "0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12)",
- "0px 4px 5px -2px rgba(0,0,0,0.2),0px 7px 10px 1px rgba(0,0,0,0.14),0px 2px 16px 1px rgba(0,0,0,0.12)",
- "0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12)",
- "0px 5px 6px -3px rgba(0,0,0,0.2),0px 9px 12px 1px rgba(0,0,0,0.14),0px 3px 16px 2px rgba(0,0,0,0.12)",
- "0px 6px 6px -3px rgba(0,0,0,0.2),0px 10px 14px 1px rgba(0,0,0,0.14),0px 4px 18px 3px rgba(0,0,0,0.12)",
- "0px 6px 7px -4px rgba(0,0,0,0.2),0px 11px 15px 1px rgba(0,0,0,0.14),0px 4px 20px 3px rgba(0,0,0,0.12)",
- "0px 7px 8px -4px rgba(0,0,0,0.2),0px 12px 17px 2px rgba(0,0,0,0.14),0px 5px 22px 4px rgba(0,0,0,0.12)",
- "0px 7px 8px -4px rgba(0,0,0,0.2),0px 13px 19px 2px rgba(0,0,0,0.14),0px 5px 24px 4px rgba(0,0,0,0.12)",
- "0px 7px 9px -4px rgba(0,0,0,0.2),0px 14px 21px 2px rgba(0,0,0,0.14),0px 5px 26px 4px rgba(0,0,0,0.12)",
- "0px 8px 9px -5px rgba(0,0,0,0.2),0px 15px 22px 2px rgba(0,0,0,0.14),0px 6px 28px 5px rgba(0,0,0,0.12)",
- "0px 8px 10px -5px rgba(0,0,0,0.2),0px 16px 24px 2px rgba(0,0,0,0.14),0px 6px 30px 5px rgba(0,0,0,0.12)",
- "0px 8px 11px -5px rgba(0,0,0,0.2),0px 17px 26px 2px rgba(0,0,0,0.14),0px 6px 32px 5px rgba(0,0,0,0.12)",
- "0px 9px 11px -5px rgba(0,0,0,0.2),0px 18px 28px 2px rgba(0,0,0,0.14),0px 7px 34px 6px rgba(0,0,0,0.12)",
- "0px 9px 12px -6px rgba(0,0,0,0.2),0px 19px 29px 2px rgba(0,0,0,0.14),0px 7px 36px 6px rgba(0,0,0,0.12)",
- "0px 10px 13px -6px rgba(0,0,0,0.2),0px 20px 31px 3px rgba(0,0,0,0.14),0px 8px 38px 7px rgba(0,0,0,0.12)",
- "0px 10px 13px -6px rgba(0,0,0,0.2),0px 21px 33px 3px rgba(0,0,0,0.14),0px 8px 40px 7px rgba(0,0,0,0.12)",
- "0px 10px 14px -6px rgba(0,0,0,0.2),0px 22px 35px 3px rgba(0,0,0,0.14),0px 8px 42px 7px rgba(0,0,0,0.12)",
- "0px 11px 14px -7px rgba(0,0,0,0.2),0px 23px 36px 3px rgba(0,0,0,0.14),0px 9px 44px 8px rgba(0,0,0,0.12)",
- "0px 11px 15px -7px rgba(0,0,0,0.2),0px 24px 38px 3px rgba(0,0,0,0.14),0px 9px 46px 8px rgba(0,0,0,0.12)",
- ],
- "shape": Object {
- "borderRadius": 4,
- },
- "spacing": [Function],
- "transitions": Object {
- "create": [Function],
- "duration": Object {
- "complex": 375,
- "enteringScreen": 225,
- "leavingScreen": 195,
- "short": 250,
- "shorter": 200,
- "shortest": 150,
- "standard": 300,
- },
- "easing": Object {
- "easeIn": "cubic-bezier(0.4, 0, 1, 1)",
- "easeInOut": "cubic-bezier(0.4, 0, 0.2, 1)",
- "easeOut": "cubic-bezier(0.0, 0, 0.2, 1)",
- "sharp": "cubic-bezier(0.4, 0, 0.6, 1)",
- },
- "getAutoHeightDuration": [Function],
- },
- "typography": Object {
- "body1": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "1rem",
- "fontWeight": 400,
- "letterSpacing": "0.00938em",
- "lineHeight": 1.5,
- },
- "body2": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "0.875rem",
- "fontWeight": 400,
- "letterSpacing": "0.01071em",
- "lineHeight": 1.43,
- },
- "button": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "0.875rem",
- "fontWeight": 500,
- "letterSpacing": "0.02857em",
- "lineHeight": 1.75,
- "textTransform": "uppercase",
- },
- "caption": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "0.75rem",
- "fontWeight": 400,
- "letterSpacing": "0.03333em",
- "lineHeight": 1.66,
- },
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": 14,
- "fontWeightBold": 700,
- "fontWeightLight": 300,
- "fontWeightMedium": 500,
- "fontWeightRegular": 400,
- "h1": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "6rem",
- "fontWeight": 300,
- "letterSpacing": "-0.01562em",
- "lineHeight": 1.167,
- },
- "h2": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "3.75rem",
- "fontWeight": 300,
- "letterSpacing": "-0.00833em",
- "lineHeight": 1.2,
- },
- "h3": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "3rem",
- "fontWeight": 400,
- "letterSpacing": "0em",
- "lineHeight": 1.167,
- },
- "h4": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "2.125rem",
- "fontWeight": 400,
- "letterSpacing": "0.00735em",
- "lineHeight": 1.235,
- },
- "h5": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "1.5rem",
- "fontWeight": 400,
- "letterSpacing": "0em",
- "lineHeight": 1.334,
- },
- "h6": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "1.25rem",
- "fontWeight": 500,
- "letterSpacing": "0.0075em",
- "lineHeight": 1.6,
- },
- "htmlFontSize": 16,
- "overline": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "0.75rem",
- "fontWeight": 400,
- "letterSpacing": "0.08333em",
- "lineHeight": 2.66,
- "textTransform": "uppercase",
- },
- "pxToRem": [Function],
- "round": [Function],
- "subtitle1": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "1rem",
- "fontWeight": 400,
- "letterSpacing": "0.00938em",
- "lineHeight": 1.75,
- },
- "subtitle2": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "0.875rem",
- "fontWeight": 500,
- "letterSpacing": "0.00714em",
- "lineHeight": 1.57,
- },
- },
- "zIndex": Object {
- "appBar": 1100,
- "drawer": 1200,
- "mobileStepper": 1000,
- "modal": 1300,
- "snackbar": 1400,
- "speedDial": 1050,
- "tooltip": 1500,
- },
- },
- "name": "MuiBackdrop",
- },
- "propTypes": Object {
- "classes": [Function],
- "innerRef": [Function],
- },
- "render": [Function],
- "useStyles": [Function],
- }
- }
- BackdropProps={
- Object {
- "transitionDuration": Object {
- "enter": 225,
- "exit": 195,
- },
- }
- }
- className="MuiDialog-root modal-root"
- closeAfterTransition={true}
- disableEscapeKeyDown={false}
- onClose={[MockFunction]}
- open={true}
+ <div
+ aria-labelledby="accessibility-title"
+ class="MuiPaper-root MuiDialog-paper modal-paper blue-light-border MuiDialog-paperScrollPaper MuiDialog-paperWidthSm MuiPaper-elevation24 MuiPaper-rounded"
+ role="dialog"
>
- <ForwardRef(Portal)
- disablePortal={false}
+ <div
+ id="accessibility-title"
>
- <Portal
- containerInfo={
- <body
- style="padding-right: 0px; overflow: hidden;"
- >
- <div
- class="MuiDialog-root modal-root"
- role="presentation"
- style="position: fixed; z-index: 1300; right: 0px; bottom: 0px; top: 0px; left: 0px;"
- >
- <div
- aria-hidden="true"
- class="MuiBackdrop-root"
- style="opacity: 1; webkit-transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"
- />
- <div
- data-test="sentinelStart"
- tabindex="0"
- />
- <div
- class="MuiDialog-container MuiDialog-scrollPaper"
- role="none presentation"
- style="opacity: 1; webkit-transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"
- tabindex="-1"
- >
- <div
- aria-labelledby="accessibility-title"
- class="MuiPaper-root MuiDialog-paper modal-paper blue-light-border MuiDialog-paperScrollPaper MuiDialog-paperWidthSm MuiPaper-elevation24 MuiPaper-rounded"
- role="dialog"
- >
- <div
- id="accessibility-title"
- >
- last_duel_modal.title
- </div>
- <div
- class="duel-last-modal-root"
- >
- <div>
- <svg
- aria-hidden="true"
- class="closeIcon styles__icon___23x3R"
- height="16"
- width="16"
- >
- <use
- xlink:href="#test-file-stub"
- />
- </svg>
- </div>
- <svg
- aria-hidden="true"
- class="icon styles__icon___23x3R"
- height="48"
- width="48"
- >
- <use
- xlink:href="#test-file-stub"
- />
- </svg>
- <div
- class="text-28-bold title"
- >
- last_duel_modal.title
- </div>
- <div
- class="text-22-bold subtitle"
- >
- last_duel_modal.subtitle
- </div>
- <div
- class="text-18-normal content"
- >
- last_duel_modal.message1
- </div>
- <div
- class="text-18-normal content"
- >
- last_duel_modal.message2
- </div>
- </div>
- </div>
- </div>
- <div
- data-test="sentinelEnd"
- tabindex="0"
- />
- </div>
- </body>
- }
+ last_duel_modal.title
+ </div>
+ <div
+ class="duel-last-modal-root"
+ >
+ <button
+ class="MuiButtonBase-root MuiIconButton-root modal-paper-close-button"
+ tabindex="0"
+ type="button"
>
- <div
- className="MuiDialog-root modal-root"
- onKeyDown={[Function]}
- role="presentation"
- style={
- Object {
- "bottom": 0,
- "left": 0,
- "position": "fixed",
- "right": 0,
- "top": 0,
- "zIndex": 1300,
- }
- }
+ <span
+ class="MuiIconButton-label"
>
- <WithStyles(ForwardRef(Backdrop))
- onClick={[Function]}
- open={true}
- transitionDuration={
- Object {
- "enter": 225,
- "exit": 195,
- }
- }
- >
- <ForwardRef(Backdrop)
- classes={
- Object {
- "invisible": "MuiBackdrop-invisible",
- "root": "MuiBackdrop-root",
- }
- }
- onClick={[Function]}
- open={true}
- transitionDuration={
- Object {
- "enter": 225,
- "exit": 195,
- }
- }
- >
- <ForwardRef(Fade)
- in={true}
- onClick={[Function]}
- timeout={
- Object {
- "enter": 225,
- "exit": 195,
- }
- }
- >
- <Transition
- appear={true}
- enter={true}
- exit={true}
- in={true}
- mountOnEnter={false}
- onClick={[Function]}
- onEnter={[Function]}
- onEntered={[Function]}
- onEntering={[Function]}
- onExit={[Function]}
- onExited={[Function]}
- onExiting={[Function]}
- timeout={
- Object {
- "enter": 225,
- "exit": 195,
- }
- }
- unmountOnExit={false}
- >
- <div
- aria-hidden={true}
- className="MuiBackdrop-root"
- onClick={[Function]}
- style={
- Object {
- "opacity": 1,
- "visibility": undefined,
- }
- }
- />
- </Transition>
- </ForwardRef(Fade)>
- </ForwardRef(Backdrop)>
- </WithStyles(ForwardRef(Backdrop))>
- <Unstable_TrapFocus
- disableAutoFocus={false}
- disableEnforceFocus={false}
- disableRestoreFocus={false}
- getDoc={[Function]}
- isEnabled={[Function]}
- open={true}
+ <svg
+ class="styles__icon___23x3R"
+ height="16"
+ width="16"
>
- <div
- data-test="sentinelStart"
- tabIndex={0}
+ <use
+ xlink:href="#test-file-stub"
/>
- <ForwardRef(Fade)
- appear={true}
- in={true}
- onEnter={[Function]}
- onExited={[Function]}
- role="none presentation"
- tabIndex="-1"
- timeout={
- Object {
- "enter": 225,
- "exit": 195,
- }
- }
- >
- <Transition
- appear={true}
- enter={true}
- exit={true}
- in={true}
- mountOnEnter={false}
- onEnter={[Function]}
- onEntered={[Function]}
- onEntering={[Function]}
- onExit={[Function]}
- onExited={[Function]}
- onExiting={[Function]}
- role="none presentation"
- tabIndex="-1"
- timeout={
- Object {
- "enter": 225,
- "exit": 195,
- }
- }
- unmountOnExit={false}
- >
- <div
- className="MuiDialog-container MuiDialog-scrollPaper"
- onMouseDown={[Function]}
- onMouseUp={[Function]}
- role="none presentation"
- style={
- Object {
- "opacity": 1,
- "visibility": undefined,
- }
- }
- tabIndex="-1"
- >
- <WithStyles(ForwardRef(Paper))
- aria-labelledby="accessibility-title"
- className="MuiDialog-paper modal-paper blue-light-border MuiDialog-paperScrollPaper MuiDialog-paperWidthSm"
- elevation={24}
- role="dialog"
- >
- <ForwardRef(Paper)
- aria-labelledby="accessibility-title"
- className="MuiDialog-paper modal-paper blue-light-border MuiDialog-paperScrollPaper MuiDialog-paperWidthSm"
- classes={
- Object {
- "elevation0": "MuiPaper-elevation0",
- "elevation1": "MuiPaper-elevation1",
- "elevation10": "MuiPaper-elevation10",
- "elevation11": "MuiPaper-elevation11",
- "elevation12": "MuiPaper-elevation12",
- "elevation13": "MuiPaper-elevation13",
- "elevation14": "MuiPaper-elevation14",
- "elevation15": "MuiPaper-elevation15",
- "elevation16": "MuiPaper-elevation16",
- "elevation17": "MuiPaper-elevation17",
- "elevation18": "MuiPaper-elevation18",
- "elevation19": "MuiPaper-elevation19",
- "elevation2": "MuiPaper-elevation2",
- "elevation20": "MuiPaper-elevation20",
- "elevation21": "MuiPaper-elevation21",
- "elevation22": "MuiPaper-elevation22",
- "elevation23": "MuiPaper-elevation23",
- "elevation24": "MuiPaper-elevation24",
- "elevation3": "MuiPaper-elevation3",
- "elevation4": "MuiPaper-elevation4",
- "elevation5": "MuiPaper-elevation5",
- "elevation6": "MuiPaper-elevation6",
- "elevation7": "MuiPaper-elevation7",
- "elevation8": "MuiPaper-elevation8",
- "elevation9": "MuiPaper-elevation9",
- "outlined": "MuiPaper-outlined",
- "root": "MuiPaper-root",
- "rounded": "MuiPaper-rounded",
- }
- }
- elevation={24}
- role="dialog"
- >
- <div
- aria-labelledby="accessibility-title"
- className="MuiPaper-root MuiDialog-paper modal-paper blue-light-border MuiDialog-paperScrollPaper MuiDialog-paperWidthSm MuiPaper-elevation24 MuiPaper-rounded"
- role="dialog"
- >
- <div
- id="accessibility-title"
- >
- last_duel_modal.title
- </div>
- <div
- className="duel-last-modal-root"
- >
- <div
- onClick={[MockFunction]}
- >
- <StyledIcon
- className="closeIcon"
- icon="test-file-stub"
- size={16}
- >
- <Icon
- aria-hidden={true}
- className="closeIcon"
- icon="test-file-stub"
- size={16}
- spin={false}
- >
- <Component
- aria-hidden={true}
- className="closeIcon styles__icon___23x3R"
- height={16}
- style={Object {}}
- width={16}
- >
- <svg
- aria-hidden={true}
- className="closeIcon styles__icon___23x3R"
- height={16}
- style={Object {}}
- width={16}
- >
- <use
- xlinkHref="#test-file-stub"
- />
- </svg>
- </Component>
- </Icon>
- </StyledIcon>
- </div>
- <StyledIcon
- className="icon"
- icon="test-file-stub"
- size={48}
- >
- <Icon
- aria-hidden={true}
- className="icon"
- icon="test-file-stub"
- size={48}
- spin={false}
- >
- <Component
- aria-hidden={true}
- className="icon styles__icon___23x3R"
- height={48}
- style={Object {}}
- width={48}
- >
- <svg
- aria-hidden={true}
- className="icon styles__icon___23x3R"
- height={48}
- style={Object {}}
- width={48}
- >
- <use
- xlinkHref="#test-file-stub"
- />
- </svg>
- </Component>
- </Icon>
- </StyledIcon>
- <div
- className="text-28-bold title"
- >
- last_duel_modal.title
- </div>
- <div
- className="text-22-bold subtitle"
- >
- last_duel_modal.subtitle
- </div>
- <div
- className="text-18-normal content"
- >
- last_duel_modal.message1
- </div>
- <div
- className="text-18-normal content"
- >
- last_duel_modal.message2
- </div>
- </div>
- </div>
- </ForwardRef(Paper)>
- </WithStyles(ForwardRef(Paper))>
- </div>
- </Transition>
- </ForwardRef(Fade)>
- <div
- data-test="sentinelEnd"
- tabIndex={0}
- />
- </Unstable_TrapFocus>
- </div>
- </Portal>
- </ForwardRef(Portal)>
- </ForwardRef(Modal)>
- </ForwardRef(Dialog)>
- </WithStyles(ForwardRef(Dialog))>
-</LastDuelModal>
+ </svg>
+ </span>
+ <span
+ class="MuiTouchRipple-root"
+ />
+ </button>
+ <svg
+ aria-hidden="true"
+ class="icon styles__icon___23x3R"
+ height="48"
+ width="48"
+ >
+ <use
+ xlink:href="#test-file-stub"
+ />
+ </svg>
+ <h1
+ class="text-28-bold"
+ >
+ last_duel_modal.title
+ </h1>
+ <div>
+ <h2
+ class="text-22-bold"
+ >
+ last_duel_modal.subtitle
+ </h2>
+ <p
+ class="text-18-normal"
+ >
+ last_duel_modal.message1
+ </p>
+ <p
+ class="text-18-normal"
+ >
+ last_duel_modal.message2
+ </p>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div
+ data-test="sentinelEnd"
+ tabindex="0"
+ />
+ </div>
+</body>
`;
diff --git a/src/components/Duel/LastDuelModal/lastDuelModal.scss b/src/components/Duel/LastDuelModal/lastDuelModal.scss
index 05a14432af96c886a876407a8e54f65b0d6f4c60..d5dd373730a53a4397b44d1b7c21a51d859e59b0 100644
--- a/src/components/Duel/LastDuelModal/lastDuelModal.scss
+++ b/src/components/Duel/LastDuelModal/lastDuelModal.scss
@@ -2,22 +2,22 @@
.duel-last-modal-root {
text-align: center;
- .closeIcon {
- float: right;
- cursor: pointer;
- }
+ display: flex;
+ flex-direction: column;
+ gap: 1rem;
+
.icon {
- margin: 2rem 0 0;
+ margin: auto;
}
- .title {
- margin: 1rem 0 1rem;
+ h1 {
+ color: $white;
}
- .subtitle {
+ h2 {
color: $blue-light;
- margin: 1rem 0 0.5rem;
+ margin: 0;
}
- .content {
- margin: 0.5rem 0;
+ p {
+ color: $grey-bright;
}
}
diff --git a/src/components/Duel/LastDuelModal/lastDuelModal.spec.tsx b/src/components/Duel/LastDuelModal/lastDuelModal.spec.tsx
index ed1f8b01bfd824f6031c9d867e765570efac1432..b2496be0e9bd3e3351dffef9666ec7ed43c3e1c7 100644
--- a/src/components/Duel/LastDuelModal/lastDuelModal.spec.tsx
+++ b/src/components/Duel/LastDuelModal/lastDuelModal.spec.tsx
@@ -1,15 +1,12 @@
-import { mount } from 'enzyme'
-import toJson from 'enzyme-to-json'
+import { render } from '@testing-library/react'
import React from 'react'
-import { waitForComponentToPaint } from 'tests/__mocks__/testUtils'
import LastDuelModal from './lastDuelModal'
describe('lastDuelModal component', () => {
- it('should render correctly', async () => {
- const wrapper = mount(
+ it('should render correctly', () => {
+ const { baseElement } = render(
<LastDuelModal open={true} handleCloseClick={jest.fn()} />
)
- await waitForComponentToPaint(wrapper)
- expect(toJson(wrapper)).toMatchSnapshot()
+ expect(baseElement).toMatchSnapshot()
})
})
diff --git a/src/components/Duel/LastDuelModal/lastDuelModal.tsx b/src/components/Duel/LastDuelModal/lastDuelModal.tsx
index 92deec333ef696c3f46f3c09f511108eaa2c3148..2e13dfff83fa585f7aed4b97b0c1bc3cac8b84fd 100644
--- a/src/components/Duel/LastDuelModal/lastDuelModal.tsx
+++ b/src/components/Duel/LastDuelModal/lastDuelModal.tsx
@@ -1,8 +1,10 @@
+import { IconButton } from '@material-ui/core'
import Dialog from '@material-ui/core/Dialog'
import CloseIcon from 'assets/icons/ico/close.svg'
import star from 'assets/icons/visu/duel/star.svg'
import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
import { useI18n } from 'cozy-ui/transpiled/react/I18n'
+import Icon from 'cozy-ui/transpiled/react/Icon'
import React from 'react'
import './lastDuelModal.scss'
@@ -26,19 +28,18 @@ const LastDuelModal = ({ open, handleCloseClick }: LastDuelModalProps) => {
>
<div id="accessibility-title">{t('last_duel_modal.title')}</div>
<div className="duel-last-modal-root">
- <div onClick={handleCloseClick}>
- <StyledIcon className="closeIcon" icon={CloseIcon} size={16} />
- </div>
+ <IconButton
+ className="modal-paper-close-button"
+ onClick={handleCloseClick}
+ >
+ <Icon size={16} icon={CloseIcon} />
+ </IconButton>
<StyledIcon className="icon" icon={star} size={48} />
- <div className="text-28-bold title">{t('last_duel_modal.title')}</div>
- <div className="text-22-bold subtitle">
- {t('last_duel_modal.subtitle')}
- </div>
- <div className="text-18-normal content">
- {t('last_duel_modal.message1')}
- </div>
- <div className="text-18-normal content">
- {t('last_duel_modal.message2')}
+ <h1 className="text-28-bold">{t('last_duel_modal.title')}</h1>
+ <div>
+ <h2 className="text-22-bold">{t('last_duel_modal.subtitle')}</h2>
+ <p className="text-18-normal">{t('last_duel_modal.message1')}</p>
+ <p className="text-18-normal">{t('last_duel_modal.message2')}</p>
</div>
</div>
</Dialog>
diff --git a/src/components/Ecogesture/EcogestureCard/EcogestureCard.spec.tsx b/src/components/Ecogesture/EcogestureCard/EcogestureCard.spec.tsx
index 836668c817c2485778f5debce45af380ada292d5..7bf0a567e00af787773164dc4b57a4b2adf090bc 100644
--- a/src/components/Ecogesture/EcogestureCard/EcogestureCard.spec.tsx
+++ b/src/components/Ecogesture/EcogestureCard/EcogestureCard.spec.tsx
@@ -1,29 +1,26 @@
-/* eslint-disable react/display-name */
+import { render, waitFor } from '@testing-library/react'
import EcogestureCard from 'components/Ecogesture/EcogestureCard/EcogestureCard'
-import { mount } from 'enzyme'
-import toJson from 'enzyme-to-json'
import React from 'react'
import { BrowserRouter } from 'react-router-dom'
import { mockedEcogesturesData } from 'tests/__mocks__/ecogesturesData.mock'
-import { waitForComponentToPaint } from 'tests/__mocks__/testUtils'
describe('EcogestureCard component', () => {
it('should be rendered correctly', async () => {
- const wrapper = mount(
+ const { container } = render(
<BrowserRouter>
<EcogestureCard ecogesture={mockedEcogesturesData[0]} />
</BrowserRouter>
)
- await waitForComponentToPaint(wrapper)
- expect(toJson(wrapper)).toMatchSnapshot()
+ await waitFor(() => null, { container })
+ expect(container).toMatchSnapshot()
})
it('should be with default icon', async () => {
- const wrapper = mount(
+ const { container } = render(
<BrowserRouter>
<EcogestureCard ecogesture={mockedEcogesturesData[0]} />
</BrowserRouter>
)
- await waitForComponentToPaint(wrapper)
- expect(wrapper.find('.Icon').exists()).toBeTruthy()
+ await waitFor(() => null, { container })
+ expect(container.getElementsByClassName('Icon').length).toBeTruthy()
})
})
diff --git a/src/components/Ecogesture/EcogestureCard/EcogestureCard.tsx b/src/components/Ecogesture/EcogestureCard/EcogestureCard.tsx
index cb5842537012afc4ff28f714d8563779b9262e46..2ae4fb300120eff93e1a2ed31a8c902fe3146868 100644
--- a/src/components/Ecogesture/EcogestureCard/EcogestureCard.tsx
+++ b/src/components/Ecogesture/EcogestureCard/EcogestureCard.tsx
@@ -1,16 +1,17 @@
-import { Link } from '@material-ui/core/'
import defaultIcon from 'assets/icons/visu/ecogesture/default.svg'
import StyledEcogestureCard from 'components/CommonKit/Card/StyledEcogestureCard'
import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
import { Ecogesture } from 'models'
import React, { useEffect, useState } from 'react'
-import { Link as RouterLink } from 'react-router-dom'
+import { useNavigate } from 'react-router-dom'
import { importIconById } from 'utils/utils'
import EfficiencyRating from '../EfficiencyRating/EfficiencyRating'
import './ecogestureCard.scss'
const EcogestureCard = ({ ecogesture }: { ecogesture: Ecogesture }) => {
+ const navigate = useNavigate()
const [ecogestureIcon, setEcogestureIcon] = useState<string>('')
+
useEffect(() => {
async function handleEcogestureIcon() {
const icon = await importIconById(ecogesture.id, 'ecogesture')
@@ -22,23 +23,18 @@ const EcogestureCard = ({ ecogesture }: { ecogesture: Ecogesture }) => {
}, [ecogesture])
return (
- <Link
- to={{
- pathname: `/ecogesture/${ecogesture.id}`,
- }}
- component={RouterLink}
+ <StyledEcogestureCard
+ onClick={() => navigate(`/ecogesture/${ecogesture.id}`)}
className="ecogesture-list-item"
>
- <StyledEcogestureCard>
- <div className="ec-content">
- <StyledIcon className="Icon" icon={ecogestureIcon} size={50} />
- <div className="ec-content-short-name text-15-bold">
- {ecogesture.shortName}
- </div>
- <EfficiencyRating result={Math.round(ecogesture.efficiency)} />
+ <div className="ec-content">
+ <StyledIcon className="Icon" icon={ecogestureIcon} size={50} />
+ <div className="ec-content-short-name text-15-bold">
+ {ecogesture.shortName}
</div>
- </StyledEcogestureCard>
- </Link>
+ <EfficiencyRating result={Math.round(ecogesture.efficiency)} />
+ </div>
+ </StyledEcogestureCard>
)
}
diff --git a/src/components/Ecogesture/EcogestureCard/__snapshots__/EcogestureCard.spec.tsx.snap b/src/components/Ecogesture/EcogestureCard/__snapshots__/EcogestureCard.spec.tsx.snap
index 67ce554e79c991ea674a77a280ee4997b9e497da..3096c7c182a2bb6559e467571b1def474a743d07 100644
--- a/src/components/Ecogesture/EcogestureCard/__snapshots__/EcogestureCard.spec.tsx.snap
+++ b/src/components/Ecogesture/EcogestureCard/__snapshots__/EcogestureCard.spec.tsx.snap
@@ -1,538 +1,95 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`EcogestureCard component should be rendered correctly 1`] = `
-<BrowserRouter>
- <Router
- location={
- Object {
- "hash": "",
- "key": "default",
- "pathname": "/",
- "search": "",
- "state": null,
- }
- }
- navigationType="POP"
- navigator={
- Object {
- "action": "POP",
- "createHref": [Function],
- "encodeLocation": [Function],
- "go": [Function],
- "listen": [Function],
- "location": Object {
- "hash": "",
- "key": "default",
- "pathname": "/",
- "search": "",
- "state": null,
- },
- "push": [Function],
- "replace": [Function],
- }
- }
+<div>
+ <button
+ class="MuiButtonBase-root MuiCardActionArea-root WithStyles(ForwardRef(CardActionArea))-root-1 ecogesture-list-item"
+ tabindex="0"
+ type="button"
>
- <EcogestureCard
- ecogesture={
- Object {
- "_id": "ECOGESTURE001",
- "_rev": "1-67f1ea36efdd892c96bf64a8943154cd",
- "_type": "com.grandlyon.ecolyo.ecogesture",
- "action": false,
- "actionDuration": 3,
- "actionName": null,
- "difficulty": 1,
- "doing": false,
- "efficiency": 4,
- "equipment": false,
- "equipmentInstallation": true,
- "equipmentType": Array [],
- "fluidTypes": Array [
- 0,
- 2,
- ],
- "id": "ECOGESTURE001",
- "impactLevel": 8,
- "investment": null,
- "longDescription": "On se demande parfois si cela vaut le coup de \\"couper le chauffage\\" quand on s’absente… dès qu’il s’agit d’un week-end la réponse est « oui sûrement » ! Attention cependant au retour à ne pas faire de la surchauffe ! L’idéal est bien évidemment de régler sa programmation pour que le chauffage se relance quelques heures avant votre retour…",
- "longName": "Je baisse le chauffage en mode hors gel lorsque je m'absente plus de 2 jours.",
- "objective": false,
- "room": Array [
- 0,
- ],
- "season": "Hiver",
- "shortName": "Bonhomme de neige",
- "usage": 1,
- "viewedInSelection": false,
- }
- }
+ <div
+ class="MuiCardContent-root WithStyles(ForwardRef(CardContent))-root-2"
>
- <WithStyles(ForwardRef(Link))
- className="ecogesture-list-item"
- component={
- Object {
- "$$typeof": Symbol(react.forward_ref),
- "displayName": "Link",
- "render": [Function],
- }
- }
- to={
- Object {
- "pathname": "/ecogesture/ECOGESTURE001",
- }
- }
+ <div
+ class="ec-content"
>
- <ForwardRef(Link)
- className="ecogesture-list-item"
- classes={
- Object {
- "button": "MuiLink-button",
- "focusVisible": "Mui-focusVisible",
- "root": "MuiLink-root",
- "underlineAlways": "MuiLink-underlineAlways",
- "underlineHover": "MuiLink-underlineHover",
- "underlineNone": "MuiLink-underlineNone",
- }
- }
- component={
- Object {
- "$$typeof": Symbol(react.forward_ref),
- "displayName": "Link",
- "render": [Function],
- }
- }
- to={
- Object {
- "pathname": "/ecogesture/ECOGESTURE001",
- }
- }
+ <svg
+ aria-hidden="true"
+ class="Icon styles__icon___23x3R"
+ height="50"
+ width="50"
>
- <WithStyles(ForwardRef(Typography))
- className="MuiLink-root MuiLink-underlineHover ecogesture-list-item"
- color="primary"
- component={
- Object {
- "$$typeof": Symbol(react.forward_ref),
- "displayName": "Link",
- "render": [Function],
- }
- }
- onBlur={[Function]}
- onFocus={[Function]}
- to={
- Object {
- "pathname": "/ecogesture/ECOGESTURE001",
- }
- }
- variant="inherit"
+ <use
+ xlink:href="#test-file-stub"
+ />
+ </svg>
+ <div
+ class="ec-content-short-name text-15-bold"
+ >
+ Bonhomme de neige
+ </div>
+ <div
+ class="thunder"
+ >
+ <svg
+ aria-hidden="true"
+ class="star styles__icon___23x3R"
+ height="15"
+ width="15"
+ >
+ <use
+ xlink:href="#test-file-stub"
+ />
+ </svg>
+ <svg
+ aria-hidden="true"
+ class="star styles__icon___23x3R"
+ height="15"
+ width="15"
+ >
+ <use
+ xlink:href="#test-file-stub"
+ />
+ </svg>
+ <svg
+ aria-hidden="true"
+ class="star styles__icon___23x3R"
+ height="15"
+ width="15"
+ >
+ <use
+ xlink:href="#test-file-stub"
+ />
+ </svg>
+ <svg
+ aria-hidden="true"
+ class="star styles__icon___23x3R"
+ height="15"
+ width="15"
+ >
+ <use
+ xlink:href="#test-file-stub"
+ />
+ </svg>
+ <svg
+ aria-hidden="true"
+ class="star styles__icon___23x3R"
+ height="15"
+ width="15"
>
- <ForwardRef(Typography)
- className="MuiLink-root MuiLink-underlineHover ecogesture-list-item"
- classes={
- Object {
- "alignCenter": "MuiTypography-alignCenter",
- "alignJustify": "MuiTypography-alignJustify",
- "alignLeft": "MuiTypography-alignLeft",
- "alignRight": "MuiTypography-alignRight",
- "body1": "MuiTypography-body1",
- "body2": "MuiTypography-body2",
- "button": "MuiTypography-button",
- "caption": "MuiTypography-caption",
- "colorError": "MuiTypography-colorError",
- "colorInherit": "MuiTypography-colorInherit",
- "colorPrimary": "MuiTypography-colorPrimary",
- "colorSecondary": "MuiTypography-colorSecondary",
- "colorTextPrimary": "MuiTypography-colorTextPrimary",
- "colorTextSecondary": "MuiTypography-colorTextSecondary",
- "displayBlock": "MuiTypography-displayBlock",
- "displayInline": "MuiTypography-displayInline",
- "gutterBottom": "MuiTypography-gutterBottom",
- "h1": "MuiTypography-h1",
- "h2": "MuiTypography-h2",
- "h3": "MuiTypography-h3",
- "h4": "MuiTypography-h4",
- "h5": "MuiTypography-h5",
- "h6": "MuiTypography-h6",
- "noWrap": "MuiTypography-noWrap",
- "overline": "MuiTypography-overline",
- "paragraph": "MuiTypography-paragraph",
- "root": "MuiTypography-root",
- "srOnly": "MuiTypography-srOnly",
- "subtitle1": "MuiTypography-subtitle1",
- "subtitle2": "MuiTypography-subtitle2",
- }
- }
- color="primary"
- component={
- Object {
- "$$typeof": Symbol(react.forward_ref),
- "displayName": "Link",
- "render": [Function],
- }
- }
- onBlur={[Function]}
- onFocus={[Function]}
- to={
- Object {
- "pathname": "/ecogesture/ECOGESTURE001",
- }
- }
- variant="inherit"
- >
- <Link
- className="MuiTypography-root MuiLink-root MuiLink-underlineHover ecogesture-list-item MuiTypography-colorPrimary"
- onBlur={[Function]}
- onFocus={[Function]}
- to={
- Object {
- "pathname": "/ecogesture/ECOGESTURE001",
- }
- }
- >
- <a
- className="MuiTypography-root MuiLink-root MuiLink-underlineHover ecogesture-list-item MuiTypography-colorPrimary"
- href="/ecogesture/ECOGESTURE001"
- onBlur={[Function]}
- onClick={[Function]}
- onFocus={[Function]}
- >
- <StyledEcogestureCard>
- <WithStyles(WithStyles(ForwardRef(CardActionArea)))>
- <WithStyles(ForwardRef(CardActionArea))
- classes={
- Object {
- "root": "WithStyles(ForwardRef(CardActionArea))-root-1",
- }
- }
- >
- <ForwardRef(CardActionArea)
- classes={
- Object {
- "focusHighlight": "MuiCardActionArea-focusHighlight",
- "focusVisible": "Mui-focusVisible",
- "root": "MuiCardActionArea-root WithStyles(ForwardRef(CardActionArea))-root-1",
- }
- }
- >
- <WithStyles(ForwardRef(ButtonBase))
- className="MuiCardActionArea-root WithStyles(ForwardRef(CardActionArea))-root-1"
- focusVisibleClassName="Mui-focusVisible"
- >
- <ForwardRef(ButtonBase)
- className="MuiCardActionArea-root WithStyles(ForwardRef(CardActionArea))-root-1"
- classes={
- Object {
- "disabled": "Mui-disabled",
- "focusVisible": "Mui-focusVisible",
- "root": "MuiButtonBase-root",
- }
- }
- focusVisibleClassName="Mui-focusVisible"
- >
- <button
- className="MuiButtonBase-root MuiCardActionArea-root WithStyles(ForwardRef(CardActionArea))-root-1"
- disabled={false}
- onBlur={[Function]}
- onDragLeave={[Function]}
- onFocus={[Function]}
- onKeyDown={[Function]}
- onKeyUp={[Function]}
- onMouseDown={[Function]}
- onMouseLeave={[Function]}
- onMouseUp={[Function]}
- onTouchEnd={[Function]}
- onTouchMove={[Function]}
- onTouchStart={[Function]}
- tabIndex={0}
- type="button"
- >
- <WithStyles(WithStyles(ForwardRef(CardContent)))>
- <WithStyles(ForwardRef(CardContent))
- classes={
- Object {
- "root": "WithStyles(ForwardRef(CardContent))-root-2",
- }
- }
- >
- <ForwardRef(CardContent)
- classes={
- Object {
- "root": "MuiCardContent-root WithStyles(ForwardRef(CardContent))-root-2",
- }
- }
- >
- <div
- className="MuiCardContent-root WithStyles(ForwardRef(CardContent))-root-2"
- >
- <div
- className="ec-content"
- >
- <StyledIcon
- className="Icon"
- icon="test-file-stub"
- size={50}
- >
- <Icon
- aria-hidden={true}
- className="Icon"
- icon="test-file-stub"
- size={50}
- spin={false}
- >
- <Component
- aria-hidden={true}
- className="Icon styles__icon___23x3R"
- height={50}
- style={Object {}}
- width={50}
- >
- <svg
- aria-hidden={true}
- className="Icon styles__icon___23x3R"
- height={50}
- style={Object {}}
- width={50}
- >
- <use
- xlinkHref="#test-file-stub"
- />
- </svg>
- </Component>
- </Icon>
- </StyledIcon>
- <div
- className="ec-content-short-name text-15-bold"
- >
- Bonhomme de neige
- </div>
- <EfficiencyRating
- result={4}
- >
- <div
- className="thunder"
- >
- <StyledIcon
- className="star"
- icon="test-file-stub"
- key="1"
- size={15}
- >
- <Icon
- aria-hidden={true}
- className="star"
- icon="test-file-stub"
- size={15}
- spin={false}
- >
- <Component
- aria-hidden={true}
- className="star styles__icon___23x3R"
- height={15}
- style={Object {}}
- width={15}
- >
- <svg
- aria-hidden={true}
- className="star styles__icon___23x3R"
- height={15}
- style={Object {}}
- width={15}
- >
- <use
- xlinkHref="#test-file-stub"
- />
- </svg>
- </Component>
- </Icon>
- </StyledIcon>
- <StyledIcon
- className="star"
- icon="test-file-stub"
- key="2"
- size={15}
- >
- <Icon
- aria-hidden={true}
- className="star"
- icon="test-file-stub"
- size={15}
- spin={false}
- >
- <Component
- aria-hidden={true}
- className="star styles__icon___23x3R"
- height={15}
- style={Object {}}
- width={15}
- >
- <svg
- aria-hidden={true}
- className="star styles__icon___23x3R"
- height={15}
- style={Object {}}
- width={15}
- >
- <use
- xlinkHref="#test-file-stub"
- />
- </svg>
- </Component>
- </Icon>
- </StyledIcon>
- <StyledIcon
- className="star"
- icon="test-file-stub"
- key="3"
- size={15}
- >
- <Icon
- aria-hidden={true}
- className="star"
- icon="test-file-stub"
- size={15}
- spin={false}
- >
- <Component
- aria-hidden={true}
- className="star styles__icon___23x3R"
- height={15}
- style={Object {}}
- width={15}
- >
- <svg
- aria-hidden={true}
- className="star styles__icon___23x3R"
- height={15}
- style={Object {}}
- width={15}
- >
- <use
- xlinkHref="#test-file-stub"
- />
- </svg>
- </Component>
- </Icon>
- </StyledIcon>
- <StyledIcon
- className="star"
- icon="test-file-stub"
- key="4"
- size={15}
- >
- <Icon
- aria-hidden={true}
- className="star"
- icon="test-file-stub"
- size={15}
- spin={false}
- >
- <Component
- aria-hidden={true}
- className="star styles__icon___23x3R"
- height={15}
- style={Object {}}
- width={15}
- >
- <svg
- aria-hidden={true}
- className="star styles__icon___23x3R"
- height={15}
- style={Object {}}
- width={15}
- >
- <use
- xlinkHref="#test-file-stub"
- />
- </svg>
- </Component>
- </Icon>
- </StyledIcon>
- <StyledIcon
- className="star"
- icon="test-file-stub"
- key="5"
- size={15}
- >
- <Icon
- aria-hidden={true}
- className="star"
- icon="test-file-stub"
- size={15}
- spin={false}
- >
- <Component
- aria-hidden={true}
- className="star styles__icon___23x3R"
- height={15}
- style={Object {}}
- width={15}
- >
- <svg
- aria-hidden={true}
- className="star styles__icon___23x3R"
- height={15}
- style={Object {}}
- width={15}
- >
- <use
- xlinkHref="#test-file-stub"
- />
- </svg>
- </Component>
- </Icon>
- </StyledIcon>
- </div>
- </EfficiencyRating>
- </div>
- </div>
- </ForwardRef(CardContent)>
- </WithStyles(ForwardRef(CardContent))>
- </WithStyles(WithStyles(ForwardRef(CardContent)))>
- <span
- className="MuiCardActionArea-focusHighlight"
- />
- <WithStyles(memo)
- center={false}
- >
- <ForwardRef(TouchRipple)
- center={false}
- classes={
- Object {
- "child": "MuiTouchRipple-child",
- "childLeaving": "MuiTouchRipple-childLeaving",
- "childPulsate": "MuiTouchRipple-childPulsate",
- "ripple": "MuiTouchRipple-ripple",
- "ripplePulsate": "MuiTouchRipple-ripplePulsate",
- "rippleVisible": "MuiTouchRipple-rippleVisible",
- "root": "MuiTouchRipple-root",
- }
- }
- >
- <span
- className="MuiTouchRipple-root"
- >
- <TransitionGroup
- childFactory={[Function]}
- component={null}
- exit={true}
- />
- </span>
- </ForwardRef(TouchRipple)>
- </WithStyles(memo)>
- </button>
- </ForwardRef(ButtonBase)>
- </WithStyles(ForwardRef(ButtonBase))>
- </ForwardRef(CardActionArea)>
- </WithStyles(ForwardRef(CardActionArea))>
- </WithStyles(WithStyles(ForwardRef(CardActionArea)))>
- </StyledEcogestureCard>
- </a>
- </Link>
- </ForwardRef(Typography)>
- </WithStyles(ForwardRef(Typography))>
- </ForwardRef(Link)>
- </WithStyles(ForwardRef(Link))>
- </EcogestureCard>
- </Router>
-</BrowserRouter>
+ <use
+ xlink:href="#test-file-stub"
+ />
+ </svg>
+ </div>
+ </div>
+ </div>
+ <span
+ class="MuiCardActionArea-focusHighlight"
+ />
+ <span
+ class="MuiTouchRipple-root"
+ />
+ </button>
+</div>
`;
diff --git a/src/components/Ecogesture/EcogestureEmptyList/EcogestureEmptyList.spec.tsx b/src/components/Ecogesture/EcogestureEmptyList/EcogestureEmptyList.spec.tsx
index d2cdc41219c4946089271ceae696567d599ad5a8..700c11a8efa8c5877468079223efc666210373b4 100644
--- a/src/components/Ecogesture/EcogestureEmptyList/EcogestureEmptyList.spec.tsx
+++ b/src/components/Ecogesture/EcogestureEmptyList/EcogestureEmptyList.spec.tsx
@@ -1,6 +1,5 @@
-import Button from '@material-ui/core/Button'
-import { mount } from 'enzyme'
-import toJson from 'enzyme-to-json'
+import { render, screen } from '@testing-library/react'
+import { userEvent } from '@testing-library/user-event'
import React from 'react'
import EcogestureEmptyList from './EcogestureEmptyList'
@@ -14,7 +13,7 @@ const mockHandleClick = jest.fn()
describe('EcogestureEmptyList component', () => {
it('should be rendered correctly', () => {
- const wrapper = mount(
+ const { container } = render(
<EcogestureEmptyList
setTab={mockChangeTab}
isObjective={true}
@@ -22,10 +21,10 @@ describe('EcogestureEmptyList component', () => {
handleReinitClick={mockHandleClick}
/>
)
- expect(toJson(wrapper)).toMatchSnapshot()
+ expect(container).toMatchSnapshot()
})
- it('should return to all ecogestures', () => {
- const wrapper = mount(
+ it('should return to all ecogestures', async () => {
+ render(
<EcogestureEmptyList
setTab={mockChangeTab}
isObjective={false}
@@ -33,11 +32,11 @@ describe('EcogestureEmptyList component', () => {
handleReinitClick={mockHandleClick}
/>
)
- wrapper.find(Button).first().simulate('click')
+ await userEvent.click(screen.getAllByRole('button')[0])
expect(mockChangeTab).toHaveBeenCalledTimes(1)
})
- it('should launch ecogesture form', () => {
- const wrapper = mount(
+ it('should launch ecogesture form', async () => {
+ render(
<EcogestureEmptyList
setTab={mockChangeTab}
isObjective={false}
@@ -45,11 +44,11 @@ describe('EcogestureEmptyList component', () => {
handleReinitClick={mockHandleClick}
/>
)
- wrapper.find(Button).at(1).simulate('click')
+ await userEvent.click(screen.getAllByRole('button')[1])
expect(mockedNavigate).toHaveBeenCalledWith('/ecogesture-form')
})
it('should render doing text with empty list on completed selection', () => {
- const wrapper = mount(
+ render(
<EcogestureEmptyList
setTab={mockChangeTab}
isObjective={false}
@@ -57,12 +56,12 @@ describe('EcogestureEmptyList component', () => {
handleReinitClick={mockHandleClick}
/>
)
- expect(wrapper.find('.text').first().text()).toBe(
- 'ecogesture.emptyList.doing1_done'
- )
+ expect(
+ screen.getByText('ecogesture.emptyList.doing1_done')
+ ).toBeInTheDocument()
})
it('should render objective text with empty list on completed selection', () => {
- const wrapper = mount(
+ render(
<EcogestureEmptyList
setTab={mockChangeTab}
isObjective={true}
@@ -70,8 +69,8 @@ describe('EcogestureEmptyList component', () => {
handleReinitClick={mockHandleClick}
/>
)
- expect(wrapper.find('.text').first().text()).toBe(
- 'ecogesture.emptyList.obj1_done'
- )
+ expect(
+ screen.getByText('ecogesture.emptyList.obj1_done')
+ ).toBeInTheDocument()
})
})
diff --git a/src/components/Ecogesture/EcogestureEmptyList/EcogestureEmptyList.tsx b/src/components/Ecogesture/EcogestureEmptyList/EcogestureEmptyList.tsx
index 1da8419b28ab841651d1716c86ebe3df48f6c3aa..b51c6f032edcc8c9b68cbd4b0fe82ea13d842e18 100644
--- a/src/components/Ecogesture/EcogestureEmptyList/EcogestureEmptyList.tsx
+++ b/src/components/Ecogesture/EcogestureEmptyList/EcogestureEmptyList.tsx
@@ -31,20 +31,17 @@ const EcogestureEmptyList = ({
icon={isObjective ? objectiveIcon : doingIcon}
size={150}
/>
- <div className="text-16-normal text">
+ <div className="text-16-normal">
{t(`ecogesture.emptyList.${objOrDoing}1${isDone}`)}
</div>
- <div className="text-16-normal text">
+ <div className="text-16-normal">
{t(`ecogesture.emptyList.${objOrDoing}2${isDone}`)}
</div>
- <div className="btn-container">
+ <div className="buttons">
<Button
aria-label={t('ecogesture.emptyList.btn1')}
onClick={() => setTab(2)}
- classes={{
- root: 'btn-secondary-negative btn1',
- label: 'text-16-bold',
- }}
+ className="btnSecondary"
>
{t('ecogesture.emptyList.btn1')}
</Button>
@@ -53,10 +50,7 @@ const EcogestureEmptyList = ({
<Button
aria-label={t('ecogesture.reinit')}
onClick={handleReinitClick}
- classes={{
- root: 'reinit-button btn-profile-next rounded',
- label: 'text-16-bold',
- }}
+ className="btnSecondary"
>
{t('ecogesture.reinit')}
</Button>
@@ -68,10 +62,7 @@ const EcogestureEmptyList = ({
onClick={() => {
navigate('/ecogesture-form')
}}
- classes={{
- root: 'btn-highlight',
- label: 'text-16-bold',
- }}
+ className="btnPrimary"
>
{t('ecogesture.emptyList.btn2')}
</Button>
diff --git a/src/components/Ecogesture/EcogestureEmptyList/__snapshots__/EcogestureEmptyList.spec.tsx.snap b/src/components/Ecogesture/EcogestureEmptyList/__snapshots__/EcogestureEmptyList.spec.tsx.snap
index d7e63538735ae0ed4c37e42a3cd0d8cab07eb0b0..3fcc1897fd30e95764ae4a513e3220b41e039d85 100644
--- a/src/components/Ecogesture/EcogestureEmptyList/__snapshots__/EcogestureEmptyList.spec.tsx.snap
+++ b/src/components/Ecogesture/EcogestureEmptyList/__snapshots__/EcogestureEmptyList.spec.tsx.snap
@@ -1,328 +1,68 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`EcogestureEmptyList component should be rendered correctly 1`] = `
-<EcogestureEmptyList
- handleReinitClick={[MockFunction]}
- isObjective={true}
- isSelectionDone={false}
- setTab={[MockFunction]}
->
+<div>
<div
- className="ec-empty-container"
+ class="ec-empty-container"
>
<div
- className="ec-empty-content"
+ class="ec-empty-content"
>
- <StyledIcon
- className="icon-big"
- icon="test-file-stub"
- size={150}
+ <svg
+ aria-hidden="true"
+ class="icon-big styles__icon___23x3R"
+ height="150"
+ width="150"
>
- <Icon
- aria-hidden={true}
- className="icon-big"
- icon="test-file-stub"
- size={150}
- spin={false}
- >
- <Component
- aria-hidden={true}
- className="icon-big styles__icon___23x3R"
- height={150}
- style={Object {}}
- width={150}
- >
- <svg
- aria-hidden={true}
- className="icon-big styles__icon___23x3R"
- height={150}
- style={Object {}}
- width={150}
- >
- <use
- xlinkHref="#test-file-stub"
- />
- </svg>
- </Component>
- </Icon>
- </StyledIcon>
+ <use
+ xlink:href="#test-file-stub"
+ />
+ </svg>
<div
- className="text-16-normal text"
+ class="text-16-normal"
>
ecogesture.emptyList.obj1
</div>
<div
- className="text-16-normal text"
+ class="text-16-normal"
>
ecogesture.emptyList.obj2
</div>
<div
- className="btn-container"
+ class="buttons"
>
- <WithStyles(ForwardRef(Button))
+ <button
aria-label="ecogesture.emptyList.btn1"
- classes={
- Object {
- "label": "text-16-bold",
- "root": "btn-secondary-negative btn1",
- }
- }
- onClick={[Function]}
+ class="MuiButtonBase-root MuiButton-root MuiButton-text btnSecondary"
+ tabindex="0"
+ type="button"
>
- <ForwardRef(Button)
- aria-label="ecogesture.emptyList.btn1"
- classes={
- Object {
- "colorInherit": "MuiButton-colorInherit",
- "contained": "MuiButton-contained",
- "containedPrimary": "MuiButton-containedPrimary",
- "containedSecondary": "MuiButton-containedSecondary",
- "containedSizeLarge": "MuiButton-containedSizeLarge",
- "containedSizeSmall": "MuiButton-containedSizeSmall",
- "disableElevation": "MuiButton-disableElevation",
- "disabled": "Mui-disabled",
- "endIcon": "MuiButton-endIcon",
- "focusVisible": "Mui-focusVisible",
- "fullWidth": "MuiButton-fullWidth",
- "iconSizeLarge": "MuiButton-iconSizeLarge",
- "iconSizeMedium": "MuiButton-iconSizeMedium",
- "iconSizeSmall": "MuiButton-iconSizeSmall",
- "label": "MuiButton-label text-16-bold",
- "outlined": "MuiButton-outlined",
- "outlinedPrimary": "MuiButton-outlinedPrimary",
- "outlinedSecondary": "MuiButton-outlinedSecondary",
- "outlinedSizeLarge": "MuiButton-outlinedSizeLarge",
- "outlinedSizeSmall": "MuiButton-outlinedSizeSmall",
- "root": "MuiButton-root btn-secondary-negative btn1",
- "sizeLarge": "MuiButton-sizeLarge",
- "sizeSmall": "MuiButton-sizeSmall",
- "startIcon": "MuiButton-startIcon",
- "text": "MuiButton-text",
- "textPrimary": "MuiButton-textPrimary",
- "textSecondary": "MuiButton-textSecondary",
- "textSizeLarge": "MuiButton-textSizeLarge",
- "textSizeSmall": "MuiButton-textSizeSmall",
- }
- }
- onClick={[Function]}
+ <span
+ class="MuiButton-label"
>
- <WithStyles(ForwardRef(ButtonBase))
- aria-label="ecogesture.emptyList.btn1"
- className="MuiButton-root btn-secondary-negative btn1 MuiButton-text"
- component="button"
- disabled={false}
- focusRipple={true}
- focusVisibleClassName="Mui-focusVisible"
- onClick={[Function]}
- type="button"
- >
- <ForwardRef(ButtonBase)
- aria-label="ecogesture.emptyList.btn1"
- className="MuiButton-root btn-secondary-negative btn1 MuiButton-text"
- classes={
- Object {
- "disabled": "Mui-disabled",
- "focusVisible": "Mui-focusVisible",
- "root": "MuiButtonBase-root",
- }
- }
- component="button"
- disabled={false}
- focusRipple={true}
- focusVisibleClassName="Mui-focusVisible"
- onClick={[Function]}
- type="button"
- >
- <button
- aria-label="ecogesture.emptyList.btn1"
- className="MuiButtonBase-root MuiButton-root btn-secondary-negative btn1 MuiButton-text"
- disabled={false}
- onBlur={[Function]}
- onClick={[Function]}
- onDragLeave={[Function]}
- onFocus={[Function]}
- onKeyDown={[Function]}
- onKeyUp={[Function]}
- onMouseDown={[Function]}
- onMouseLeave={[Function]}
- onMouseUp={[Function]}
- onTouchEnd={[Function]}
- onTouchMove={[Function]}
- onTouchStart={[Function]}
- tabIndex={0}
- type="button"
- >
- <span
- className="MuiButton-label text-16-bold"
- >
- ecogesture.emptyList.btn1
- </span>
- <WithStyles(memo)
- center={false}
- >
- <ForwardRef(TouchRipple)
- center={false}
- classes={
- Object {
- "child": "MuiTouchRipple-child",
- "childLeaving": "MuiTouchRipple-childLeaving",
- "childPulsate": "MuiTouchRipple-childPulsate",
- "ripple": "MuiTouchRipple-ripple",
- "ripplePulsate": "MuiTouchRipple-ripplePulsate",
- "rippleVisible": "MuiTouchRipple-rippleVisible",
- "root": "MuiTouchRipple-root",
- }
- }
- >
- <span
- className="MuiTouchRipple-root"
- >
- <TransitionGroup
- childFactory={[Function]}
- component={null}
- exit={true}
- />
- </span>
- </ForwardRef(TouchRipple)>
- </WithStyles(memo)>
- </button>
- </ForwardRef(ButtonBase)>
- </WithStyles(ForwardRef(ButtonBase))>
- </ForwardRef(Button)>
- </WithStyles(ForwardRef(Button))>
- <WithStyles(ForwardRef(Button))
+ ecogesture.emptyList.btn1
+ </span>
+ <span
+ class="MuiTouchRipple-root"
+ />
+ </button>
+ <button
aria-label="ecogesture.emptyList.btn2"
- classes={
- Object {
- "label": "text-16-bold",
- "root": "btn-highlight",
- }
- }
- onClick={[Function]}
+ class="MuiButtonBase-root MuiButton-root MuiButton-text btnPrimary"
+ tabindex="0"
+ type="button"
>
- <ForwardRef(Button)
- aria-label="ecogesture.emptyList.btn2"
- classes={
- Object {
- "colorInherit": "MuiButton-colorInherit",
- "contained": "MuiButton-contained",
- "containedPrimary": "MuiButton-containedPrimary",
- "containedSecondary": "MuiButton-containedSecondary",
- "containedSizeLarge": "MuiButton-containedSizeLarge",
- "containedSizeSmall": "MuiButton-containedSizeSmall",
- "disableElevation": "MuiButton-disableElevation",
- "disabled": "Mui-disabled",
- "endIcon": "MuiButton-endIcon",
- "focusVisible": "Mui-focusVisible",
- "fullWidth": "MuiButton-fullWidth",
- "iconSizeLarge": "MuiButton-iconSizeLarge",
- "iconSizeMedium": "MuiButton-iconSizeMedium",
- "iconSizeSmall": "MuiButton-iconSizeSmall",
- "label": "MuiButton-label text-16-bold",
- "outlined": "MuiButton-outlined",
- "outlinedPrimary": "MuiButton-outlinedPrimary",
- "outlinedSecondary": "MuiButton-outlinedSecondary",
- "outlinedSizeLarge": "MuiButton-outlinedSizeLarge",
- "outlinedSizeSmall": "MuiButton-outlinedSizeSmall",
- "root": "MuiButton-root btn-highlight",
- "sizeLarge": "MuiButton-sizeLarge",
- "sizeSmall": "MuiButton-sizeSmall",
- "startIcon": "MuiButton-startIcon",
- "text": "MuiButton-text",
- "textPrimary": "MuiButton-textPrimary",
- "textSecondary": "MuiButton-textSecondary",
- "textSizeLarge": "MuiButton-textSizeLarge",
- "textSizeSmall": "MuiButton-textSizeSmall",
- }
- }
- onClick={[Function]}
+ <span
+ class="MuiButton-label"
>
- <WithStyles(ForwardRef(ButtonBase))
- aria-label="ecogesture.emptyList.btn2"
- className="MuiButton-root btn-highlight MuiButton-text"
- component="button"
- disabled={false}
- focusRipple={true}
- focusVisibleClassName="Mui-focusVisible"
- onClick={[Function]}
- type="button"
- >
- <ForwardRef(ButtonBase)
- aria-label="ecogesture.emptyList.btn2"
- className="MuiButton-root btn-highlight MuiButton-text"
- classes={
- Object {
- "disabled": "Mui-disabled",
- "focusVisible": "Mui-focusVisible",
- "root": "MuiButtonBase-root",
- }
- }
- component="button"
- disabled={false}
- focusRipple={true}
- focusVisibleClassName="Mui-focusVisible"
- onClick={[Function]}
- type="button"
- >
- <button
- aria-label="ecogesture.emptyList.btn2"
- className="MuiButtonBase-root MuiButton-root btn-highlight MuiButton-text"
- disabled={false}
- onBlur={[Function]}
- onClick={[Function]}
- onDragLeave={[Function]}
- onFocus={[Function]}
- onKeyDown={[Function]}
- onKeyUp={[Function]}
- onMouseDown={[Function]}
- onMouseLeave={[Function]}
- onMouseUp={[Function]}
- onTouchEnd={[Function]}
- onTouchMove={[Function]}
- onTouchStart={[Function]}
- tabIndex={0}
- type="button"
- >
- <span
- className="MuiButton-label text-16-bold"
- >
- ecogesture.emptyList.btn2
- </span>
- <WithStyles(memo)
- center={false}
- >
- <ForwardRef(TouchRipple)
- center={false}
- classes={
- Object {
- "child": "MuiTouchRipple-child",
- "childLeaving": "MuiTouchRipple-childLeaving",
- "childPulsate": "MuiTouchRipple-childPulsate",
- "ripple": "MuiTouchRipple-ripple",
- "ripplePulsate": "MuiTouchRipple-ripplePulsate",
- "rippleVisible": "MuiTouchRipple-rippleVisible",
- "root": "MuiTouchRipple-root",
- }
- }
- >
- <span
- className="MuiTouchRipple-root"
- >
- <TransitionGroup
- childFactory={[Function]}
- component={null}
- exit={true}
- />
- </span>
- </ForwardRef(TouchRipple)>
- </WithStyles(memo)>
- </button>
- </ForwardRef(ButtonBase)>
- </WithStyles(ForwardRef(ButtonBase))>
- </ForwardRef(Button)>
- </WithStyles(ForwardRef(Button))>
+ ecogesture.emptyList.btn2
+ </span>
+ <span
+ class="MuiTouchRipple-root"
+ />
+ </button>
</div>
</div>
</div>
-</EcogestureEmptyList>
+</div>
`;
diff --git a/src/components/Ecogesture/EcogestureEmptyList/ecogestureEmptyList.scss b/src/components/Ecogesture/EcogestureEmptyList/ecogestureEmptyList.scss
index 746d17b55f3de5c55a80ee82117a6843da3d17ab..f15fb9b7f8448154e14d2891bf9ab31b97c79f27 100644
--- a/src/components/Ecogesture/EcogestureEmptyList/ecogestureEmptyList.scss
+++ b/src/components/Ecogesture/EcogestureEmptyList/ecogestureEmptyList.scss
@@ -21,16 +21,11 @@
max-width: 35%;
}
- .btn-container {
- margin-top: 1rem;
+ .buttons {
display: flex;
gap: 1rem;
- button {
- margin: 0;
- }
- }
- .reinit-button {
- margin-left: 15px;
+ flex-direction: column;
+ width: 100%;
}
}
}
diff --git a/src/components/Ecogesture/EcogestureInitModal/EcogestureInitModal.spec.tsx b/src/components/Ecogesture/EcogestureInitModal/EcogestureInitModal.spec.tsx
index 7f04115005180020e5dbc90cd4dda9735670ef71..6ff90feae74098a6d7384f0306bebab7d0baa4ae 100644
--- a/src/components/Ecogesture/EcogestureInitModal/EcogestureInitModal.spec.tsx
+++ b/src/components/Ecogesture/EcogestureInitModal/EcogestureInitModal.spec.tsx
@@ -1,6 +1,5 @@
-import { Button } from '@material-ui/core'
-import { mount } from 'enzyme'
-import toJson from 'enzyme-to-json'
+import { render, screen } from '@testing-library/react'
+import { userEvent } from '@testing-library/user-event'
import React from 'react'
import EcogestureInitModal from './EcogestureInitModal'
@@ -8,35 +7,35 @@ const mockHandleClose = jest.fn()
const mockHandleLaunchForm = jest.fn()
describe('EcogestureInitModal component', () => {
it('should be rendered correctly', () => {
- const wrapper = mount(
+ const { baseElement } = render(
<EcogestureInitModal
open={true}
handleCloseClick={mockHandleClose}
handleLaunchForm={mockHandleLaunchForm}
/>
)
- expect(toJson(wrapper)).toMatchSnapshot()
+ expect(baseElement).toMatchSnapshot()
})
- it('should close modal', () => {
- const wrapper = mount(
+ it('should close modal', async () => {
+ render(
<EcogestureInitModal
open={true}
handleCloseClick={mockHandleClose}
handleLaunchForm={mockHandleLaunchForm}
/>
)
- wrapper.find(Button).first().simulate('click')
+ await userEvent.click(screen.getAllByRole('button')[2])
expect(mockHandleClose).toHaveBeenCalledTimes(1)
})
it('should close modal and launch form', async () => {
- const wrapper = mount(
+ render(
<EcogestureInitModal
open={true}
handleCloseClick={mockHandleClose}
handleLaunchForm={mockHandleLaunchForm}
/>
)
- wrapper.find(Button).at(1).simulate('click')
+ await userEvent.click(screen.getAllByRole('button')[1])
expect(mockHandleLaunchForm).toHaveBeenCalledTimes(1)
})
})
diff --git a/src/components/Ecogesture/EcogestureInitModal/EcogestureInitModal.tsx b/src/components/Ecogesture/EcogestureInitModal/EcogestureInitModal.tsx
index 17894f0caa1bd2b827fecb408d2c83e3592e4148..4575d4809619dfd37401dbcb0342ce84baa10c47 100644
--- a/src/components/Ecogesture/EcogestureInitModal/EcogestureInitModal.tsx
+++ b/src/components/Ecogesture/EcogestureInitModal/EcogestureInitModal.tsx
@@ -42,33 +42,23 @@ const EcogestureInitModal = ({
<div className="title text-20-bold">
{t('ecogesture.initModal.title')}
</div>
- <div className="text-16-normal text">
- {t('ecogesture.initModal.text1')}
- </div>
- <div className="text-16-normal text">
- {t('ecogesture.initModal.text2')}
- </div>
+ <div className="text-16-normal">{t('ecogesture.initModal.text1')}</div>
+ <div className="text-16-normal">{t('ecogesture.initModal.text2')}</div>
<div className="buttons-container">
- <Button
- aria-label={t('ecogesture.initModal.btn1')}
- onClick={handleCloseClick}
- classes={{
- root: 'btn-secondary-negative',
- label: 'text-16-bold',
- }}
- >
- {t('ecogesture.initModal.btn1')}
- </Button>
<Button
aria-label={t('ecogesture.initModal.btn2')}
onClick={handleLaunchForm}
- classes={{
- root: 'btn-profile-next rounded',
- label: 'text-16-bold',
- }}
+ className="btnPrimary"
>
{t('ecogesture.initModal.btn2')}
</Button>
+ <Button
+ aria-label={t('ecogesture.initModal.btn1')}
+ onClick={handleCloseClick}
+ className="btnSecondary"
+ >
+ {t('ecogesture.initModal.btn1')}
+ </Button>
</div>
</div>
</Dialog>
diff --git a/src/components/Ecogesture/EcogestureInitModal/__snapshots__/EcogestureInitModal.spec.tsx.snap b/src/components/Ecogesture/EcogestureInitModal/__snapshots__/EcogestureInitModal.spec.tsx.snap
index 17cb411330be9a6b0aa4f5975b6646eb88d16879..e0eb858751c570042ded61b7df0222b2ce2fcb68 100644
--- a/src/components/Ecogesture/EcogestureInitModal/__snapshots__/EcogestureInitModal.spec.tsx.snap
+++ b/src/components/Ecogesture/EcogestureInitModal/__snapshots__/EcogestureInitModal.spec.tsx.snap
@@ -1,1128 +1,124 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`EcogestureInitModal component should be rendered correctly 1`] = `
-<EcogestureInitModal
- handleCloseClick={[MockFunction]}
- handleLaunchForm={[MockFunction]}
- open={true}
+<body
+ style="padding-right: 0px; overflow: hidden;"
>
- <WithStyles(ForwardRef(Dialog))
- aria-labelledby="accessibility-title"
- classes={
- Object {
- "paper": "modal-paper",
- "root": "modal-root",
- }
- }
- onClose={[MockFunction]}
- open={true}
+ <div
+ aria-hidden="true"
+ />
+ <div
+ class="MuiDialog-root modal-root"
+ role="presentation"
+ style="position: fixed; z-index: 1300; right: 0px; bottom: 0px; top: 0px; left: 0px;"
>
- <ForwardRef(Dialog)
- aria-labelledby="accessibility-title"
- classes={
- Object {
- "container": "MuiDialog-container",
- "paper": "MuiDialog-paper modal-paper",
- "paperFullScreen": "MuiDialog-paperFullScreen",
- "paperFullWidth": "MuiDialog-paperFullWidth",
- "paperScrollBody": "MuiDialog-paperScrollBody",
- "paperScrollPaper": "MuiDialog-paperScrollPaper",
- "paperWidthFalse": "MuiDialog-paperWidthFalse",
- "paperWidthLg": "MuiDialog-paperWidthLg",
- "paperWidthMd": "MuiDialog-paperWidthMd",
- "paperWidthSm": "MuiDialog-paperWidthSm",
- "paperWidthXl": "MuiDialog-paperWidthXl",
- "paperWidthXs": "MuiDialog-paperWidthXs",
- "root": "MuiDialog-root modal-root",
- "scrollBody": "MuiDialog-scrollBody",
- "scrollPaper": "MuiDialog-scrollPaper",
- }
- }
- onClose={[MockFunction]}
- open={true}
+ <div
+ aria-hidden="true"
+ class="MuiBackdrop-root"
+ style="opacity: 1; webkit-transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"
+ />
+ <div
+ data-test="sentinelStart"
+ tabindex="0"
+ />
+ <div
+ class="MuiDialog-container MuiDialog-scrollPaper"
+ role="none presentation"
+ style="opacity: 1; webkit-transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"
+ tabindex="-1"
>
- <ForwardRef(Modal)
- BackdropComponent={
- Object {
- "$$typeof": Symbol(react.forward_ref),
- "Naked": Object {
- "$$typeof": Symbol(react.forward_ref),
- "propTypes": Object {
- "children": [Function],
- "className": [Function],
- "classes": [Function],
- "invisible": [Function],
- "open": [Function],
- "transitionDuration": [Function],
- },
- "render": [Function],
- },
- "displayName": "WithStyles(ForwardRef(Backdrop))",
- "options": Object {
- "defaultTheme": Object {
- "breakpoints": Object {
- "between": [Function],
- "down": [Function],
- "keys": Array [
- "xs",
- "sm",
- "md",
- "lg",
- "xl",
- ],
- "only": [Function],
- "up": [Function],
- "values": Object {
- "lg": 1280,
- "md": 960,
- "sm": 600,
- "xl": 1920,
- "xs": 0,
- },
- "width": [Function],
- },
- "direction": "ltr",
- "mixins": Object {
- "gutters": [Function],
- "toolbar": Object {
- "@media (min-width:0px) and (orientation: landscape)": Object {
- "minHeight": 48,
- },
- "@media (min-width:600px)": Object {
- "minHeight": 64,
- },
- "minHeight": 56,
- },
- },
- "overrides": Object {},
- "palette": Object {
- "action": Object {
- "activatedOpacity": 0.12,
- "active": "rgba(0, 0, 0, 0.54)",
- "disabled": "rgba(0, 0, 0, 0.26)",
- "disabledBackground": "rgba(0, 0, 0, 0.12)",
- "disabledOpacity": 0.38,
- "focus": "rgba(0, 0, 0, 0.12)",
- "focusOpacity": 0.12,
- "hover": "rgba(0, 0, 0, 0.04)",
- "hoverOpacity": 0.04,
- "selected": "rgba(0, 0, 0, 0.08)",
- "selectedOpacity": 0.08,
- },
- "augmentColor": [Function],
- "background": Object {
- "default": "#fafafa",
- "paper": "#fff",
- },
- "common": Object {
- "black": "#000",
- "white": "#fff",
- },
- "contrastThreshold": 3,
- "divider": "rgba(0, 0, 0, 0.12)",
- "error": Object {
- "contrastText": "#fff",
- "dark": "#d32f2f",
- "light": "#e57373",
- "main": "#f44336",
- },
- "getContrastText": [Function],
- "grey": Object {
- "100": "#f5f5f5",
- "200": "#eeeeee",
- "300": "#e0e0e0",
- "400": "#bdbdbd",
- "50": "#fafafa",
- "500": "#9e9e9e",
- "600": "#757575",
- "700": "#616161",
- "800": "#424242",
- "900": "#212121",
- "A100": "#d5d5d5",
- "A200": "#aaaaaa",
- "A400": "#303030",
- "A700": "#616161",
- },
- "info": Object {
- "contrastText": "#fff",
- "dark": "#1976d2",
- "light": "#64b5f6",
- "main": "#2196f3",
- },
- "primary": Object {
- "contrastText": "#fff",
- "dark": "#303f9f",
- "light": "#7986cb",
- "main": "#3f51b5",
- },
- "secondary": Object {
- "contrastText": "#fff",
- "dark": "#c51162",
- "light": "#ff4081",
- "main": "#f50057",
- },
- "success": Object {
- "contrastText": "rgba(0, 0, 0, 0.87)",
- "dark": "#388e3c",
- "light": "#81c784",
- "main": "#4caf50",
- },
- "text": Object {
- "disabled": "rgba(0, 0, 0, 0.38)",
- "hint": "rgba(0, 0, 0, 0.38)",
- "primary": "rgba(0, 0, 0, 0.87)",
- "secondary": "rgba(0, 0, 0, 0.54)",
- },
- "tonalOffset": 0.2,
- "type": "light",
- "warning": Object {
- "contrastText": "rgba(0, 0, 0, 0.87)",
- "dark": "#f57c00",
- "light": "#ffb74d",
- "main": "#ff9800",
- },
- },
- "props": Object {},
- "shadows": Array [
- "none",
- "0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12)",
- "0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12)",
- "0px 3px 3px -2px rgba(0,0,0,0.2),0px 3px 4px 0px rgba(0,0,0,0.14),0px 1px 8px 0px rgba(0,0,0,0.12)",
- "0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12)",
- "0px 3px 5px -1px rgba(0,0,0,0.2),0px 5px 8px 0px rgba(0,0,0,0.14),0px 1px 14px 0px rgba(0,0,0,0.12)",
- "0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12)",
- "0px 4px 5px -2px rgba(0,0,0,0.2),0px 7px 10px 1px rgba(0,0,0,0.14),0px 2px 16px 1px rgba(0,0,0,0.12)",
- "0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12)",
- "0px 5px 6px -3px rgba(0,0,0,0.2),0px 9px 12px 1px rgba(0,0,0,0.14),0px 3px 16px 2px rgba(0,0,0,0.12)",
- "0px 6px 6px -3px rgba(0,0,0,0.2),0px 10px 14px 1px rgba(0,0,0,0.14),0px 4px 18px 3px rgba(0,0,0,0.12)",
- "0px 6px 7px -4px rgba(0,0,0,0.2),0px 11px 15px 1px rgba(0,0,0,0.14),0px 4px 20px 3px rgba(0,0,0,0.12)",
- "0px 7px 8px -4px rgba(0,0,0,0.2),0px 12px 17px 2px rgba(0,0,0,0.14),0px 5px 22px 4px rgba(0,0,0,0.12)",
- "0px 7px 8px -4px rgba(0,0,0,0.2),0px 13px 19px 2px rgba(0,0,0,0.14),0px 5px 24px 4px rgba(0,0,0,0.12)",
- "0px 7px 9px -4px rgba(0,0,0,0.2),0px 14px 21px 2px rgba(0,0,0,0.14),0px 5px 26px 4px rgba(0,0,0,0.12)",
- "0px 8px 9px -5px rgba(0,0,0,0.2),0px 15px 22px 2px rgba(0,0,0,0.14),0px 6px 28px 5px rgba(0,0,0,0.12)",
- "0px 8px 10px -5px rgba(0,0,0,0.2),0px 16px 24px 2px rgba(0,0,0,0.14),0px 6px 30px 5px rgba(0,0,0,0.12)",
- "0px 8px 11px -5px rgba(0,0,0,0.2),0px 17px 26px 2px rgba(0,0,0,0.14),0px 6px 32px 5px rgba(0,0,0,0.12)",
- "0px 9px 11px -5px rgba(0,0,0,0.2),0px 18px 28px 2px rgba(0,0,0,0.14),0px 7px 34px 6px rgba(0,0,0,0.12)",
- "0px 9px 12px -6px rgba(0,0,0,0.2),0px 19px 29px 2px rgba(0,0,0,0.14),0px 7px 36px 6px rgba(0,0,0,0.12)",
- "0px 10px 13px -6px rgba(0,0,0,0.2),0px 20px 31px 3px rgba(0,0,0,0.14),0px 8px 38px 7px rgba(0,0,0,0.12)",
- "0px 10px 13px -6px rgba(0,0,0,0.2),0px 21px 33px 3px rgba(0,0,0,0.14),0px 8px 40px 7px rgba(0,0,0,0.12)",
- "0px 10px 14px -6px rgba(0,0,0,0.2),0px 22px 35px 3px rgba(0,0,0,0.14),0px 8px 42px 7px rgba(0,0,0,0.12)",
- "0px 11px 14px -7px rgba(0,0,0,0.2),0px 23px 36px 3px rgba(0,0,0,0.14),0px 9px 44px 8px rgba(0,0,0,0.12)",
- "0px 11px 15px -7px rgba(0,0,0,0.2),0px 24px 38px 3px rgba(0,0,0,0.14),0px 9px 46px 8px rgba(0,0,0,0.12)",
- ],
- "shape": Object {
- "borderRadius": 4,
- },
- "spacing": [Function],
- "transitions": Object {
- "create": [Function],
- "duration": Object {
- "complex": 375,
- "enteringScreen": 225,
- "leavingScreen": 195,
- "short": 250,
- "shorter": 200,
- "shortest": 150,
- "standard": 300,
- },
- "easing": Object {
- "easeIn": "cubic-bezier(0.4, 0, 1, 1)",
- "easeInOut": "cubic-bezier(0.4, 0, 0.2, 1)",
- "easeOut": "cubic-bezier(0.0, 0, 0.2, 1)",
- "sharp": "cubic-bezier(0.4, 0, 0.6, 1)",
- },
- "getAutoHeightDuration": [Function],
- },
- "typography": Object {
- "body1": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "1rem",
- "fontWeight": 400,
- "letterSpacing": "0.00938em",
- "lineHeight": 1.5,
- },
- "body2": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "0.875rem",
- "fontWeight": 400,
- "letterSpacing": "0.01071em",
- "lineHeight": 1.43,
- },
- "button": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "0.875rem",
- "fontWeight": 500,
- "letterSpacing": "0.02857em",
- "lineHeight": 1.75,
- "textTransform": "uppercase",
- },
- "caption": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "0.75rem",
- "fontWeight": 400,
- "letterSpacing": "0.03333em",
- "lineHeight": 1.66,
- },
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": 14,
- "fontWeightBold": 700,
- "fontWeightLight": 300,
- "fontWeightMedium": 500,
- "fontWeightRegular": 400,
- "h1": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "6rem",
- "fontWeight": 300,
- "letterSpacing": "-0.01562em",
- "lineHeight": 1.167,
- },
- "h2": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "3.75rem",
- "fontWeight": 300,
- "letterSpacing": "-0.00833em",
- "lineHeight": 1.2,
- },
- "h3": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "3rem",
- "fontWeight": 400,
- "letterSpacing": "0em",
- "lineHeight": 1.167,
- },
- "h4": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "2.125rem",
- "fontWeight": 400,
- "letterSpacing": "0.00735em",
- "lineHeight": 1.235,
- },
- "h5": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "1.5rem",
- "fontWeight": 400,
- "letterSpacing": "0em",
- "lineHeight": 1.334,
- },
- "h6": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "1.25rem",
- "fontWeight": 500,
- "letterSpacing": "0.0075em",
- "lineHeight": 1.6,
- },
- "htmlFontSize": 16,
- "overline": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "0.75rem",
- "fontWeight": 400,
- "letterSpacing": "0.08333em",
- "lineHeight": 2.66,
- "textTransform": "uppercase",
- },
- "pxToRem": [Function],
- "round": [Function],
- "subtitle1": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "1rem",
- "fontWeight": 400,
- "letterSpacing": "0.00938em",
- "lineHeight": 1.75,
- },
- "subtitle2": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "0.875rem",
- "fontWeight": 500,
- "letterSpacing": "0.00714em",
- "lineHeight": 1.57,
- },
- },
- "zIndex": Object {
- "appBar": 1100,
- "drawer": 1200,
- "mobileStepper": 1000,
- "modal": 1300,
- "snackbar": 1400,
- "speedDial": 1050,
- "tooltip": 1500,
- },
- },
- "name": "MuiBackdrop",
- },
- "propTypes": Object {
- "classes": [Function],
- "innerRef": [Function],
- },
- "render": [Function],
- "useStyles": [Function],
- }
- }
- BackdropProps={
- Object {
- "transitionDuration": Object {
- "enter": 225,
- "exit": 195,
- },
- }
- }
- className="MuiDialog-root modal-root"
- closeAfterTransition={true}
- disableEscapeKeyDown={false}
- onClose={[MockFunction]}
- open={true}
+ <div
+ aria-labelledby="accessibility-title"
+ class="MuiPaper-root MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm MuiPaper-elevation24 MuiPaper-rounded"
+ role="dialog"
>
- <ForwardRef(Portal)
- disablePortal={false}
+ <div
+ id="accessibility-title"
>
- <Portal
- containerInfo={
- <body
- style="padding-right: 0px; overflow: hidden;"
- >
- <div
- class="MuiDialog-root modal-root"
- role="presentation"
- style="position: fixed; z-index: 1300; right: 0px; bottom: 0px; top: 0px; left: 0px;"
- >
- <div
- aria-hidden="true"
- class="MuiBackdrop-root"
- style="opacity: 1; webkit-transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"
- />
- <div
- data-test="sentinelStart"
- tabindex="0"
- />
- <div
- class="MuiDialog-container MuiDialog-scrollPaper"
- role="none presentation"
- style="opacity: 1; webkit-transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"
- tabindex="-1"
- >
- <div
- aria-labelledby="accessibility-title"
- class="MuiPaper-root MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm MuiPaper-elevation24 MuiPaper-rounded"
- role="dialog"
- >
- <div
- id="accessibility-title"
- >
- feedback.accessibility.window_title
- </div>
- <button
- aria-label="feedback.accessibility.button_close"
- class="MuiButtonBase-root MuiIconButton-root modal-paper-close-button"
- tabindex="0"
- type="button"
- >
- <span
- class="MuiIconButton-label"
- >
- <svg
- class="styles__icon___23x3R"
- height="16"
- width="16"
- >
- <use
- xlink:href="#test-file-stub"
- />
- </svg>
- </span>
- <span
- class="MuiTouchRipple-root"
- />
- </button>
- <div
- class="eg-init-modal"
- >
- <div
- class="title text-20-bold"
- >
- ecogesture.initModal.title
- </div>
- <div
- class="text-16-normal text"
- >
- ecogesture.initModal.text1
- </div>
- <div
- class="text-16-normal text"
- >
- ecogesture.initModal.text2
- </div>
- <div
- class="buttons-container"
- >
- <button
- aria-label="ecogesture.initModal.btn1"
- class="MuiButtonBase-root MuiButton-root btn-secondary-negative MuiButton-text"
- tabindex="0"
- type="button"
- >
- <span
- class="MuiButton-label text-16-bold"
- >
- ecogesture.initModal.btn1
- </span>
- <span
- class="MuiTouchRipple-root"
- />
- </button>
- <button
- aria-label="ecogesture.initModal.btn2"
- class="MuiButtonBase-root MuiButton-root btn-profile-next rounded MuiButton-text"
- tabindex="0"
- type="button"
- >
- <span
- class="MuiButton-label text-16-bold"
- >
- ecogesture.initModal.btn2
- </span>
- <span
- class="MuiTouchRipple-root"
- />
- </button>
- </div>
- </div>
- </div>
- </div>
- <div
- data-test="sentinelEnd"
- tabindex="0"
- />
- </div>
- </body>
- }
+ feedback.accessibility.window_title
+ </div>
+ <button
+ aria-label="feedback.accessibility.button_close"
+ class="MuiButtonBase-root MuiIconButton-root modal-paper-close-button"
+ tabindex="0"
+ type="button"
+ >
+ <span
+ class="MuiIconButton-label"
>
- <div
- className="MuiDialog-root modal-root"
- onKeyDown={[Function]}
- role="presentation"
- style={
- Object {
- "bottom": 0,
- "left": 0,
- "position": "fixed",
- "right": 0,
- "top": 0,
- "zIndex": 1300,
- }
- }
+ <svg
+ class="styles__icon___23x3R"
+ height="16"
+ width="16"
>
- <WithStyles(ForwardRef(Backdrop))
- onClick={[Function]}
- open={true}
- transitionDuration={
- Object {
- "enter": 225,
- "exit": 195,
- }
- }
+ <use
+ xlink:href="#test-file-stub"
+ />
+ </svg>
+ </span>
+ <span
+ class="MuiTouchRipple-root"
+ />
+ </button>
+ <div
+ class="eg-init-modal"
+ >
+ <div
+ class="title text-20-bold"
+ >
+ ecogesture.initModal.title
+ </div>
+ <div
+ class="text-16-normal"
+ >
+ ecogesture.initModal.text1
+ </div>
+ <div
+ class="text-16-normal"
+ >
+ ecogesture.initModal.text2
+ </div>
+ <div
+ class="buttons-container"
+ >
+ <button
+ aria-label="ecogesture.initModal.btn2"
+ class="MuiButtonBase-root MuiButton-root MuiButton-text btnPrimary"
+ tabindex="0"
+ type="button"
+ >
+ <span
+ class="MuiButton-label"
>
- <ForwardRef(Backdrop)
- classes={
- Object {
- "invisible": "MuiBackdrop-invisible",
- "root": "MuiBackdrop-root",
- }
- }
- onClick={[Function]}
- open={true}
- transitionDuration={
- Object {
- "enter": 225,
- "exit": 195,
- }
- }
- >
- <ForwardRef(Fade)
- in={true}
- onClick={[Function]}
- timeout={
- Object {
- "enter": 225,
- "exit": 195,
- }
- }
- >
- <Transition
- appear={true}
- enter={true}
- exit={true}
- in={true}
- mountOnEnter={false}
- onClick={[Function]}
- onEnter={[Function]}
- onEntered={[Function]}
- onEntering={[Function]}
- onExit={[Function]}
- onExited={[Function]}
- onExiting={[Function]}
- timeout={
- Object {
- "enter": 225,
- "exit": 195,
- }
- }
- unmountOnExit={false}
- >
- <div
- aria-hidden={true}
- className="MuiBackdrop-root"
- onClick={[Function]}
- style={
- Object {
- "opacity": 1,
- "visibility": undefined,
- }
- }
- />
- </Transition>
- </ForwardRef(Fade)>
- </ForwardRef(Backdrop)>
- </WithStyles(ForwardRef(Backdrop))>
- <Unstable_TrapFocus
- disableAutoFocus={false}
- disableEnforceFocus={false}
- disableRestoreFocus={false}
- getDoc={[Function]}
- isEnabled={[Function]}
- open={true}
+ ecogesture.initModal.btn2
+ </span>
+ <span
+ class="MuiTouchRipple-root"
+ />
+ </button>
+ <button
+ aria-label="ecogesture.initModal.btn1"
+ class="MuiButtonBase-root MuiButton-root MuiButton-text btnSecondary"
+ tabindex="0"
+ type="button"
+ >
+ <span
+ class="MuiButton-label"
>
- <div
- data-test="sentinelStart"
- tabIndex={0}
- />
- <ForwardRef(Fade)
- appear={true}
- in={true}
- onEnter={[Function]}
- onExited={[Function]}
- role="none presentation"
- tabIndex="-1"
- timeout={
- Object {
- "enter": 225,
- "exit": 195,
- }
- }
- >
- <Transition
- appear={true}
- enter={true}
- exit={true}
- in={true}
- mountOnEnter={false}
- onEnter={[Function]}
- onEntered={[Function]}
- onEntering={[Function]}
- onExit={[Function]}
- onExited={[Function]}
- onExiting={[Function]}
- role="none presentation"
- tabIndex="-1"
- timeout={
- Object {
- "enter": 225,
- "exit": 195,
- }
- }
- unmountOnExit={false}
- >
- <div
- className="MuiDialog-container MuiDialog-scrollPaper"
- onMouseDown={[Function]}
- onMouseUp={[Function]}
- role="none presentation"
- style={
- Object {
- "opacity": 1,
- "visibility": undefined,
- }
- }
- tabIndex="-1"
- >
- <WithStyles(ForwardRef(Paper))
- aria-labelledby="accessibility-title"
- className="MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm"
- elevation={24}
- role="dialog"
- >
- <ForwardRef(Paper)
- aria-labelledby="accessibility-title"
- className="MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm"
- classes={
- Object {
- "elevation0": "MuiPaper-elevation0",
- "elevation1": "MuiPaper-elevation1",
- "elevation10": "MuiPaper-elevation10",
- "elevation11": "MuiPaper-elevation11",
- "elevation12": "MuiPaper-elevation12",
- "elevation13": "MuiPaper-elevation13",
- "elevation14": "MuiPaper-elevation14",
- "elevation15": "MuiPaper-elevation15",
- "elevation16": "MuiPaper-elevation16",
- "elevation17": "MuiPaper-elevation17",
- "elevation18": "MuiPaper-elevation18",
- "elevation19": "MuiPaper-elevation19",
- "elevation2": "MuiPaper-elevation2",
- "elevation20": "MuiPaper-elevation20",
- "elevation21": "MuiPaper-elevation21",
- "elevation22": "MuiPaper-elevation22",
- "elevation23": "MuiPaper-elevation23",
- "elevation24": "MuiPaper-elevation24",
- "elevation3": "MuiPaper-elevation3",
- "elevation4": "MuiPaper-elevation4",
- "elevation5": "MuiPaper-elevation5",
- "elevation6": "MuiPaper-elevation6",
- "elevation7": "MuiPaper-elevation7",
- "elevation8": "MuiPaper-elevation8",
- "elevation9": "MuiPaper-elevation9",
- "outlined": "MuiPaper-outlined",
- "root": "MuiPaper-root",
- "rounded": "MuiPaper-rounded",
- }
- }
- elevation={24}
- role="dialog"
- >
- <div
- aria-labelledby="accessibility-title"
- className="MuiPaper-root MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm MuiPaper-elevation24 MuiPaper-rounded"
- role="dialog"
- >
- <div
- id="accessibility-title"
- >
- feedback.accessibility.window_title
- </div>
- <WithStyles(ForwardRef(IconButton))
- aria-label="feedback.accessibility.button_close"
- className="modal-paper-close-button"
- onClick={[MockFunction]}
- >
- <ForwardRef(IconButton)
- aria-label="feedback.accessibility.button_close"
- className="modal-paper-close-button"
- classes={
- Object {
- "colorInherit": "MuiIconButton-colorInherit",
- "colorPrimary": "MuiIconButton-colorPrimary",
- "colorSecondary": "MuiIconButton-colorSecondary",
- "disabled": "Mui-disabled",
- "edgeEnd": "MuiIconButton-edgeEnd",
- "edgeStart": "MuiIconButton-edgeStart",
- "label": "MuiIconButton-label",
- "root": "MuiIconButton-root",
- "sizeSmall": "MuiIconButton-sizeSmall",
- }
- }
- onClick={[MockFunction]}
- >
- <WithStyles(ForwardRef(ButtonBase))
- aria-label="feedback.accessibility.button_close"
- centerRipple={true}
- className="MuiIconButton-root modal-paper-close-button"
- disabled={false}
- focusRipple={true}
- onClick={[MockFunction]}
- >
- <ForwardRef(ButtonBase)
- aria-label="feedback.accessibility.button_close"
- centerRipple={true}
- className="MuiIconButton-root modal-paper-close-button"
- classes={
- Object {
- "disabled": "Mui-disabled",
- "focusVisible": "Mui-focusVisible",
- "root": "MuiButtonBase-root",
- }
- }
- disabled={false}
- focusRipple={true}
- onClick={[MockFunction]}
- >
- <button
- aria-label="feedback.accessibility.button_close"
- className="MuiButtonBase-root MuiIconButton-root modal-paper-close-button"
- disabled={false}
- onBlur={[Function]}
- onClick={[MockFunction]}
- onDragLeave={[Function]}
- onFocus={[Function]}
- onKeyDown={[Function]}
- onKeyUp={[Function]}
- onMouseDown={[Function]}
- onMouseLeave={[Function]}
- onMouseUp={[Function]}
- onTouchEnd={[Function]}
- onTouchMove={[Function]}
- onTouchStart={[Function]}
- tabIndex={0}
- type="button"
- >
- <span
- className="MuiIconButton-label"
- >
- <Icon
- icon="test-file-stub"
- size={16}
- spin={false}
- >
- <Component
- className="styles__icon___23x3R"
- height={16}
- style={Object {}}
- width={16}
- >
- <svg
- className="styles__icon___23x3R"
- height={16}
- style={Object {}}
- width={16}
- >
- <use
- xlinkHref="#test-file-stub"
- />
- </svg>
- </Component>
- </Icon>
- </span>
- <WithStyles(memo)
- center={true}
- >
- <ForwardRef(TouchRipple)
- center={true}
- classes={
- Object {
- "child": "MuiTouchRipple-child",
- "childLeaving": "MuiTouchRipple-childLeaving",
- "childPulsate": "MuiTouchRipple-childPulsate",
- "ripple": "MuiTouchRipple-ripple",
- "ripplePulsate": "MuiTouchRipple-ripplePulsate",
- "rippleVisible": "MuiTouchRipple-rippleVisible",
- "root": "MuiTouchRipple-root",
- }
- }
- >
- <span
- className="MuiTouchRipple-root"
- >
- <TransitionGroup
- childFactory={[Function]}
- component={null}
- exit={true}
- />
- </span>
- </ForwardRef(TouchRipple)>
- </WithStyles(memo)>
- </button>
- </ForwardRef(ButtonBase)>
- </WithStyles(ForwardRef(ButtonBase))>
- </ForwardRef(IconButton)>
- </WithStyles(ForwardRef(IconButton))>
- <div
- className="eg-init-modal"
- >
- <div
- className="title text-20-bold"
- >
- ecogesture.initModal.title
- </div>
- <div
- className="text-16-normal text"
- >
- ecogesture.initModal.text1
- </div>
- <div
- className="text-16-normal text"
- >
- ecogesture.initModal.text2
- </div>
- <div
- className="buttons-container"
- >
- <WithStyles(ForwardRef(Button))
- aria-label="ecogesture.initModal.btn1"
- classes={
- Object {
- "label": "text-16-bold",
- "root": "btn-secondary-negative",
- }
- }
- onClick={[MockFunction]}
- >
- <ForwardRef(Button)
- aria-label="ecogesture.initModal.btn1"
- classes={
- Object {
- "colorInherit": "MuiButton-colorInherit",
- "contained": "MuiButton-contained",
- "containedPrimary": "MuiButton-containedPrimary",
- "containedSecondary": "MuiButton-containedSecondary",
- "containedSizeLarge": "MuiButton-containedSizeLarge",
- "containedSizeSmall": "MuiButton-containedSizeSmall",
- "disableElevation": "MuiButton-disableElevation",
- "disabled": "Mui-disabled",
- "endIcon": "MuiButton-endIcon",
- "focusVisible": "Mui-focusVisible",
- "fullWidth": "MuiButton-fullWidth",
- "iconSizeLarge": "MuiButton-iconSizeLarge",
- "iconSizeMedium": "MuiButton-iconSizeMedium",
- "iconSizeSmall": "MuiButton-iconSizeSmall",
- "label": "MuiButton-label text-16-bold",
- "outlined": "MuiButton-outlined",
- "outlinedPrimary": "MuiButton-outlinedPrimary",
- "outlinedSecondary": "MuiButton-outlinedSecondary",
- "outlinedSizeLarge": "MuiButton-outlinedSizeLarge",
- "outlinedSizeSmall": "MuiButton-outlinedSizeSmall",
- "root": "MuiButton-root btn-secondary-negative",
- "sizeLarge": "MuiButton-sizeLarge",
- "sizeSmall": "MuiButton-sizeSmall",
- "startIcon": "MuiButton-startIcon",
- "text": "MuiButton-text",
- "textPrimary": "MuiButton-textPrimary",
- "textSecondary": "MuiButton-textSecondary",
- "textSizeLarge": "MuiButton-textSizeLarge",
- "textSizeSmall": "MuiButton-textSizeSmall",
- }
- }
- onClick={[MockFunction]}
- >
- <WithStyles(ForwardRef(ButtonBase))
- aria-label="ecogesture.initModal.btn1"
- className="MuiButton-root btn-secondary-negative MuiButton-text"
- component="button"
- disabled={false}
- focusRipple={true}
- focusVisibleClassName="Mui-focusVisible"
- onClick={[MockFunction]}
- type="button"
- >
- <ForwardRef(ButtonBase)
- aria-label="ecogesture.initModal.btn1"
- className="MuiButton-root btn-secondary-negative MuiButton-text"
- classes={
- Object {
- "disabled": "Mui-disabled",
- "focusVisible": "Mui-focusVisible",
- "root": "MuiButtonBase-root",
- }
- }
- component="button"
- disabled={false}
- focusRipple={true}
- focusVisibleClassName="Mui-focusVisible"
- onClick={[MockFunction]}
- type="button"
- >
- <button
- aria-label="ecogesture.initModal.btn1"
- className="MuiButtonBase-root MuiButton-root btn-secondary-negative MuiButton-text"
- disabled={false}
- onBlur={[Function]}
- onClick={[MockFunction]}
- onDragLeave={[Function]}
- onFocus={[Function]}
- onKeyDown={[Function]}
- onKeyUp={[Function]}
- onMouseDown={[Function]}
- onMouseLeave={[Function]}
- onMouseUp={[Function]}
- onTouchEnd={[Function]}
- onTouchMove={[Function]}
- onTouchStart={[Function]}
- tabIndex={0}
- type="button"
- >
- <span
- className="MuiButton-label text-16-bold"
- >
- ecogesture.initModal.btn1
- </span>
- <WithStyles(memo)
- center={false}
- >
- <ForwardRef(TouchRipple)
- center={false}
- classes={
- Object {
- "child": "MuiTouchRipple-child",
- "childLeaving": "MuiTouchRipple-childLeaving",
- "childPulsate": "MuiTouchRipple-childPulsate",
- "ripple": "MuiTouchRipple-ripple",
- "ripplePulsate": "MuiTouchRipple-ripplePulsate",
- "rippleVisible": "MuiTouchRipple-rippleVisible",
- "root": "MuiTouchRipple-root",
- }
- }
- >
- <span
- className="MuiTouchRipple-root"
- >
- <TransitionGroup
- childFactory={[Function]}
- component={null}
- exit={true}
- />
- </span>
- </ForwardRef(TouchRipple)>
- </WithStyles(memo)>
- </button>
- </ForwardRef(ButtonBase)>
- </WithStyles(ForwardRef(ButtonBase))>
- </ForwardRef(Button)>
- </WithStyles(ForwardRef(Button))>
- <WithStyles(ForwardRef(Button))
- aria-label="ecogesture.initModal.btn2"
- classes={
- Object {
- "label": "text-16-bold",
- "root": "btn-profile-next rounded",
- }
- }
- onClick={[MockFunction]}
- >
- <ForwardRef(Button)
- aria-label="ecogesture.initModal.btn2"
- classes={
- Object {
- "colorInherit": "MuiButton-colorInherit",
- "contained": "MuiButton-contained",
- "containedPrimary": "MuiButton-containedPrimary",
- "containedSecondary": "MuiButton-containedSecondary",
- "containedSizeLarge": "MuiButton-containedSizeLarge",
- "containedSizeSmall": "MuiButton-containedSizeSmall",
- "disableElevation": "MuiButton-disableElevation",
- "disabled": "Mui-disabled",
- "endIcon": "MuiButton-endIcon",
- "focusVisible": "Mui-focusVisible",
- "fullWidth": "MuiButton-fullWidth",
- "iconSizeLarge": "MuiButton-iconSizeLarge",
- "iconSizeMedium": "MuiButton-iconSizeMedium",
- "iconSizeSmall": "MuiButton-iconSizeSmall",
- "label": "MuiButton-label text-16-bold",
- "outlined": "MuiButton-outlined",
- "outlinedPrimary": "MuiButton-outlinedPrimary",
- "outlinedSecondary": "MuiButton-outlinedSecondary",
- "outlinedSizeLarge": "MuiButton-outlinedSizeLarge",
- "outlinedSizeSmall": "MuiButton-outlinedSizeSmall",
- "root": "MuiButton-root btn-profile-next rounded",
- "sizeLarge": "MuiButton-sizeLarge",
- "sizeSmall": "MuiButton-sizeSmall",
- "startIcon": "MuiButton-startIcon",
- "text": "MuiButton-text",
- "textPrimary": "MuiButton-textPrimary",
- "textSecondary": "MuiButton-textSecondary",
- "textSizeLarge": "MuiButton-textSizeLarge",
- "textSizeSmall": "MuiButton-textSizeSmall",
- }
- }
- onClick={[MockFunction]}
- >
- <WithStyles(ForwardRef(ButtonBase))
- aria-label="ecogesture.initModal.btn2"
- className="MuiButton-root btn-profile-next rounded MuiButton-text"
- component="button"
- disabled={false}
- focusRipple={true}
- focusVisibleClassName="Mui-focusVisible"
- onClick={[MockFunction]}
- type="button"
- >
- <ForwardRef(ButtonBase)
- aria-label="ecogesture.initModal.btn2"
- className="MuiButton-root btn-profile-next rounded MuiButton-text"
- classes={
- Object {
- "disabled": "Mui-disabled",
- "focusVisible": "Mui-focusVisible",
- "root": "MuiButtonBase-root",
- }
- }
- component="button"
- disabled={false}
- focusRipple={true}
- focusVisibleClassName="Mui-focusVisible"
- onClick={[MockFunction]}
- type="button"
- >
- <button
- aria-label="ecogesture.initModal.btn2"
- className="MuiButtonBase-root MuiButton-root btn-profile-next rounded MuiButton-text"
- disabled={false}
- onBlur={[Function]}
- onClick={[MockFunction]}
- onDragLeave={[Function]}
- onFocus={[Function]}
- onKeyDown={[Function]}
- onKeyUp={[Function]}
- onMouseDown={[Function]}
- onMouseLeave={[Function]}
- onMouseUp={[Function]}
- onTouchEnd={[Function]}
- onTouchMove={[Function]}
- onTouchStart={[Function]}
- tabIndex={0}
- type="button"
- >
- <span
- className="MuiButton-label text-16-bold"
- >
- ecogesture.initModal.btn2
- </span>
- <WithStyles(memo)
- center={false}
- >
- <ForwardRef(TouchRipple)
- center={false}
- classes={
- Object {
- "child": "MuiTouchRipple-child",
- "childLeaving": "MuiTouchRipple-childLeaving",
- "childPulsate": "MuiTouchRipple-childPulsate",
- "ripple": "MuiTouchRipple-ripple",
- "ripplePulsate": "MuiTouchRipple-ripplePulsate",
- "rippleVisible": "MuiTouchRipple-rippleVisible",
- "root": "MuiTouchRipple-root",
- }
- }
- >
- <span
- className="MuiTouchRipple-root"
- >
- <TransitionGroup
- childFactory={[Function]}
- component={null}
- exit={true}
- />
- </span>
- </ForwardRef(TouchRipple)>
- </WithStyles(memo)>
- </button>
- </ForwardRef(ButtonBase)>
- </WithStyles(ForwardRef(ButtonBase))>
- </ForwardRef(Button)>
- </WithStyles(ForwardRef(Button))>
- </div>
- </div>
- </div>
- </ForwardRef(Paper)>
- </WithStyles(ForwardRef(Paper))>
- </div>
- </Transition>
- </ForwardRef(Fade)>
- <div
- data-test="sentinelEnd"
- tabIndex={0}
- />
- </Unstable_TrapFocus>
- </div>
- </Portal>
- </ForwardRef(Portal)>
- </ForwardRef(Modal)>
- </ForwardRef(Dialog)>
- </WithStyles(ForwardRef(Dialog))>
-</EcogestureInitModal>
+ ecogesture.initModal.btn1
+ </span>
+ <span
+ class="MuiTouchRipple-root"
+ />
+ </button>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div
+ data-test="sentinelEnd"
+ tabindex="0"
+ />
+ </div>
+</body>
`;
diff --git a/src/components/Ecogesture/EcogestureInitModal/ecogestureInitModal.scss b/src/components/Ecogesture/EcogestureInitModal/ecogestureInitModal.scss
index b074b8d940c397c12d03cb3e3dc1e9f08c77fa32..4ba9caf623c069deca040382126c111158da68e9 100644
--- a/src/components/Ecogesture/EcogestureInitModal/ecogestureInitModal.scss
+++ b/src/components/Ecogesture/EcogestureInitModal/ecogestureInitModal.scss
@@ -1,20 +1,17 @@
@import 'src/styles/base/color';
.eg-init-modal {
- color: $grey-bright;
- margin: 1rem 0;
+ display: flex;
+ flex-direction: column;
+ gap: 1rem;
.title {
text-align: center;
color: $gold-shadow;
}
- .text {
- margin: 1rem 0;
- }
+
.buttons-container {
display: flex;
+ flex-direction: column;
gap: 1rem;
- button {
- margin: 0;
- }
}
}
diff --git a/src/components/Ecogesture/EcogestureList/EcogestureList.spec.tsx b/src/components/Ecogesture/EcogestureList/EcogestureList.spec.tsx
index 10780f017df3e596dc1cbbf8c8d4ed4c73fb1f2d..b230d0fd10a2a02fddb498042d9b629af2034c81 100644
--- a/src/components/Ecogesture/EcogestureList/EcogestureList.spec.tsx
+++ b/src/components/Ecogesture/EcogestureList/EcogestureList.spec.tsx
@@ -1,15 +1,19 @@
-import { Button, MenuItem } from '@material-ui/core'
-import { mount } from 'enzyme'
-import toJson from 'enzyme-to-json'
+import { render, screen, waitFor } from '@testing-library/react'
+import { userEvent } from '@testing-library/user-event'
import React from 'react'
import { Provider } from 'react-redux'
import { BrowserRouter } from 'react-router-dom'
import * as storeHooks from 'store/hooks'
import { mockedEcogesturesData } from 'tests/__mocks__/ecogesturesData.mock'
import { createMockEcolyoStore } from 'tests/__mocks__/store'
-import { waitForComponentToPaint } from 'tests/__mocks__/testUtils'
import EcogestureList from './EcogestureList'
+const mockedNavigate = jest.fn()
+jest.mock('react-router-dom', () => ({
+ ...jest.requireActual('react-router-dom'),
+ useNavigate: () => mockedNavigate,
+}))
+
jest.mock(
'components/Ecogesture/EcogestureCard/EcogestureCard',
() => 'mock-ecogesturecard'
@@ -27,7 +31,7 @@ describe('EcogesturesList component', () => {
mockAppDispatch.mockClear()
})
it('should be rendered correctly', async () => {
- const wrapper = mount(
+ const { container } = render(
<Provider store={store}>
<BrowserRouter>
<EcogestureList
@@ -40,12 +44,11 @@ describe('EcogesturesList component', () => {
</BrowserRouter>
</Provider>
)
- await waitForComponentToPaint(wrapper)
- expect(toJson(wrapper)).toMatchSnapshot()
+ expect(container).toMatchSnapshot()
})
it('should open the filter menu and select all ecogesture', async () => {
- const wrapper = mount(
+ const { container } = render(
<Provider store={store}>
<BrowserRouter>
<EcogestureList
@@ -57,16 +60,14 @@ describe('EcogesturesList component', () => {
</BrowserRouter>
</Provider>
)
- await waitForComponentToPaint(wrapper)
- wrapper.find('.filter-button').simulate('click')
- wrapper.find(Button).first().simulate('click')
- expect(wrapper.find('.filter-menu').exists()).toBeTruthy()
- wrapper.find(MenuItem).at(1).simulate('click')
+ await waitFor(() => null, { container })
+ await userEvent.click(screen.getAllByRole('button')[0])
+ await userEvent.click(screen.getAllByRole('menuitem')[1])
expect(updateEcogestureFilter).toHaveBeenCalledTimes(1)
})
- it('should display the selection section', async () => {
- const wrapper = mount(
+ it('should go to "/ecogesture-selection"', async () => {
+ const { container } = render(
<Provider store={store}>
<BrowserRouter>
<EcogestureList
@@ -78,7 +79,8 @@ describe('EcogesturesList component', () => {
</BrowserRouter>
</Provider>
)
- await waitForComponentToPaint(wrapper)
- expect(wrapper.find('.selection').exists()).toBeTruthy()
+ await waitFor(() => null, { container })
+ await userEvent.click(screen.getAllByRole('button')[1])
+ expect(mockedNavigate).toHaveBeenCalledWith('/ecogesture-selection')
})
})
diff --git a/src/components/Ecogesture/EcogestureList/EcogestureList.tsx b/src/components/Ecogesture/EcogestureList/EcogestureList.tsx
index 37818161e5d62941bf12fd2ca89c3d0c3100bdb9..e10a47045e4087edd48b148c669e7ebfb55f9f13 100644
--- a/src/components/Ecogesture/EcogestureList/EcogestureList.tsx
+++ b/src/components/Ecogesture/EcogestureList/EcogestureList.tsx
@@ -35,17 +35,15 @@ const EcogestureList = ({
const [openDropDown, setOpenDropDown] = useState<boolean>(false)
const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null)
- const toggleDropDown = () => {
- setOpenDropDown(prev => !prev)
- }
-
const toggleMenu = (event: React.MouseEvent<HTMLButtonElement>) => {
setAnchorEl(event.currentTarget)
+ setOpenDropDown(true)
}
const closeMenu = (usage?: Usage) => {
usage !== undefined && dispatch(updateEcogestureFilter(usage))
setAnchorEl(null)
+ setOpenDropDown(false)
}
const renderEcogestureContent = () => {
@@ -73,86 +71,73 @@ const EcogestureList = ({
}
const selectFilters = () => (
- <div className="filters text-16-normal">
- <div
- className="filter-button"
- onClick={() => toggleDropDown()}
- tabIndex={0}
- onBlur={e => {
- if (e.relatedTarget === null) toggleDropDown()
+ <>
+ <Button
+ className="btnSecondary btnFilter"
+ aria-controls="simple-menu"
+ aria-haspopup="true"
+ aria-label={t(`ecogesture.MENU_TITLE`)}
+ onClick={toggleMenu}
+ size="small"
+ >
+ <StyledIcon icon={SortIcon} size={20} />
+ <span className={openDropDown ? 'opened' : ''}>
+ {ecogestureFilter === Usage.ALL
+ ? t(`ecogesture.MENU_TITLE`)
+ : t(`ecogesture.${Usage[ecogestureFilter]}`)}
+ </span>
+ </Button>
+ <Menu
+ anchorEl={anchorEl}
+ keepMounted
+ open={Boolean(anchorEl)}
+ onClose={() => closeMenu()}
+ PopoverClasses={{
+ paper: 'filter-menu',
}}
+ variant="menu"
+ MenuListProps={{ className: 'filter-menu-list' }}
>
- <Button
- classes={{
- root: 'btn-secondary-negative',
- label: 'text-14-normal',
- }}
- aria-controls="simple-menu"
- aria-haspopup="true"
- aria-label={t(`ecogesture.MENU_TITLE`)}
- onClick={toggleMenu}
- variant="contained"
- >
- <StyledIcon icon={SortIcon} size={20} />
- <span className={openDropDown ? 'ecogestures opened' : 'ecogestures'}>
- {ecogestureFilter === Usage.ALL
- ? t(`ecogesture.MENU_TITLE`)
- : t(`ecogesture.${Usage[ecogestureFilter]}`)}
- </span>
- </Button>
- <Menu
- anchorEl={anchorEl}
- keepMounted
- open={Boolean(anchorEl)}
- onClose={() => closeMenu()}
- PopoverClasses={{
- paper: 'filter-menu',
- }}
- variant="menu"
- MenuListProps={{ className: 'filter-menu-list' }}
- >
- {Object.values(Usage).map((usage, key) => {
- const active = usage === ecogestureFilter
- return (
- typeof usage === 'number' && (
- <MenuItem
- classes={{
- root: `${active ? 'item-active' : ''}`,
- }}
- key={key}
- selected={active}
- onClick={() => closeMenu(usage)}
- >
- {t(`ecogesture.${Usage[usage]}`)}
- {active && (
- <ListItemIcon classes={{ root: 'filter-menu-icon' }}>
- <StyledIcon icon={CheckIcon} size={13} />
- </ListItemIcon>
- )}
- </MenuItem>
- )
+ {Object.values(Usage).map(usage => {
+ const active = usage === ecogestureFilter
+ return (
+ typeof usage === 'number' && (
+ <MenuItem
+ key={usage}
+ classes={{
+ root: `${active ? 'item-active' : ''}`,
+ }}
+ selected={active}
+ onClick={() => closeMenu(usage)}
+ >
+ {t(`ecogesture.${Usage[usage]}`)}
+ {active && (
+ <ListItemIcon classes={{ root: 'filter-menu-icon' }}>
+ <StyledIcon icon={CheckIcon} size={13} />
+ </ListItemIcon>
+ )}
+ </MenuItem>
)
- })}
- </Menu>
- </div>
- </div>
+ )
+ })}
+ </Menu>
+ </>
)
const continueSelection = () => (
<Grow in={displaySelection}>
<div className="selection text-16-normal">
- <span>{t('ecogesture.selection')}</span>
- <span>
- {`(${selectionViewed} ${t(
- 'ecogesture.selection_2'
- )} ${selectionTotal})`}
- </span>
+ <div>
+ <div>{t('ecogesture.selection')}</div>
+ <div>
+ {`(${selectionViewed} ${t(
+ 'ecogesture.selection_2'
+ )} ${selectionTotal})`}
+ </div>
+ </div>
<Button
aria-label={t('ecogesture.accessibility.button_selection')}
- classes={{
- root: 'btn-highlight',
- label: 'text-16-bold',
- }}
+ className="btnPrimary"
onClick={() => navigate('/ecogesture-selection')}
>
{t('ecogesture.button_selection')}
@@ -171,13 +156,7 @@ const EcogestureList = ({
<div className="ecogesture-content">
{renderEcogestureContent()}
{!displaySelection && handleReinitClick && (
- <Button
- onClick={handleReinitClick}
- classes={{
- root: 'btn-secondary-negative',
- label: 'text-16-normal',
- }}
- >
+ <Button onClick={handleReinitClick} className="btnSecondary">
{t('ecogesture.reinit')}
</Button>
)}
diff --git a/src/components/Ecogesture/EcogestureList/__snapshots__/EcogestureList.spec.tsx.snap b/src/components/Ecogesture/EcogestureList/__snapshots__/EcogestureList.spec.tsx.snap
index e26cfd313fe94e7a2017bbdbcb37eccef2133469..536577972c3d8ff109992cace617895fd5fd1a6b 100644
--- a/src/components/Ecogesture/EcogestureList/__snapshots__/EcogestureList.spec.tsx.snap
+++ b/src/components/Ecogesture/EcogestureList/__snapshots__/EcogestureList.spec.tsx.snap
@@ -1,2085 +1,72 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`EcogesturesList component should be rendered correctly 1`] = `
-<Provider
- store={
- Object {
- "clearActions": [Function],
- "dispatch": [Function],
- "getActions": [Function],
- "getState": [Function],
- "replaceReducer": [Function],
- "subscribe": [Function],
- }
- }
->
- <BrowserRouter>
- <Router
- location={
- Object {
- "hash": "",
- "key": "default",
- "pathname": "/",
- "search": "",
- "state": null,
- }
- }
- navigationType="POP"
- navigator={
- Object {
- "action": "POP",
- "createHref": [Function],
- "encodeLocation": [Function],
- "go": [Function],
- "listen": [Function],
- "location": Object {
- "hash": "",
- "key": "default",
- "pathname": "/",
- "search": "",
- "state": null,
- },
- "push": [Function],
- "replace": [Function],
- }
- }
+<div>
+ <div
+ class="ecogesture-root"
+ >
+ <div
+ class="efficiency-button-content"
>
- <EcogestureList
- displaySelection={false}
- handleReinitClick={[MockFunction]}
- list={
- Array [
- Object {
- "_id": "ECOGESTURE001",
- "_rev": "1-67f1ea36efdd892c96bf64a8943154cd",
- "_type": "com.grandlyon.ecolyo.ecogesture",
- "action": false,
- "actionDuration": 3,
- "actionName": null,
- "difficulty": 1,
- "doing": false,
- "efficiency": 4,
- "equipment": false,
- "equipmentInstallation": true,
- "equipmentType": Array [],
- "fluidTypes": Array [
- 0,
- 2,
- ],
- "id": "ECOGESTURE001",
- "impactLevel": 8,
- "investment": null,
- "longDescription": "On se demande parfois si cela vaut le coup de \\"couper le chauffage\\" quand on s’absente… dès qu’il s’agit d’un week-end la réponse est « oui sûrement » ! Attention cependant au retour à ne pas faire de la surchauffe ! L’idéal est bien évidemment de régler sa programmation pour que le chauffage se relance quelques heures avant votre retour…",
- "longName": "Je baisse le chauffage en mode hors gel lorsque je m'absente plus de 2 jours.",
- "objective": false,
- "room": Array [
- 0,
- ],
- "season": "Hiver",
- "shortName": "Bonhomme de neige",
- "usage": 1,
- "viewedInSelection": false,
- },
- Object {
- "_id": "ECOGESTURE002",
- "_rev": "1-ef7ddd778254e3b7d331a88fd17f606d",
- "_type": "com.grandlyon.ecolyo.ecogesture",
- "action": false,
- "actionDuration": 3,
- "actionName": null,
- "difficulty": 1,
- "doing": false,
- "efficiency": 4,
- "equipment": true,
- "equipmentInstallation": true,
- "equipmentType": Array [
- "AIR_CONDITIONING",
- ],
- "fluidTypes": Array [
- 0,
- ],
- "id": "ECOGESTURE002",
- "impactLevel": 8,
- "investment": null,
- "longDescription": "Cela permet de garder la fraîcheur à l'intérieur. Le climatiseur n'est pas là pour refroidir la rue mais bien la pièce.",
- "longName": "Je ferme mes fenêtres quand la climatisation est en marche",
- "objective": false,
- "room": Array [
- 0,
- ],
- "season": "Eté",
- "shortName": "Coup de vent",
- "usage": 2,
- "viewedInSelection": false,
- },
- Object {
- "_id": "ECOGESTURE0013",
- "_rev": "1-0b2761dd4aef79556c7aef144060fde6",
- "_type": "com.grandlyon.ecolyo.ecogesture",
- "action": true,
- "actionDuration": 3,
- "actionName": "J’utilise le cycle court à basse température pour laver le linge et la vaisselle.",
- "difficulty": 1,
- "doing": false,
- "efficiency": 1,
- "equipment": false,
- "equipmentInstallation": true,
- "equipmentType": Array [
- "WASHING_MACHINE",
- "DISHWASHER",
- ],
- "fluidTypes": Array [
- 1,
- ],
- "id": "ECOGESTURE0013",
- "impactLevel": 2,
- "investment": null,
- "longDescription": "Utilisez la température la plus basse possible : de nombreux produits nettoyants sont efficaces à froid et un cycle à 90 °C consomme 3 fois plus d'énergie qu'un lavage à 40 °C. En effet, 80 % de l'énergie consommée par un lave-linge ou un lave-vaisselle sert au chauffage de l'eau ! Que ce soit pour la vaisselle ou le linge, les programmes de lavage intensif consomment jusqu'à 40 % de plus. Si possible, rincez à l'eau froide : la température de rinçage n'a pas d'effet sur le nettoyage du linge ou de la vaisselle. Attention cependant avec les tissus qui peuvent rétrécir : ce qui fait rétrécir, c'est le passage d'une température à une autre. Mieux vaut alors faire le cycle complet à l'eau froide pour les premiers lavages de tissus sensibles. Pour du linge ou de la vaisselle peu sales, utilisez la touche \\"Eco\\". Elle réduit la température de lavage et allonge sa durée (c’est le chauffage de l’eau qui consomme le plus). Vous économiserez jusqu’à 45 % par rapport aux cycles longs. Néanmoins, pour vous prémunir contre les bouchons de graisse dans les canalisations, faites quand même un cycle à chaud une fois par mois environ.",
- "longName": "J’utilise le plus souvent les cycles courts à basse température pour laver le linge et la vaisselle.",
- "objective": false,
- "room": Array [
- 1,
- 3,
- 2,
- ],
- "season": "Sans saison",
- "shortName": "Accelerateur de particules",
- "usage": 5,
- "viewedInSelection": false,
- },
- ]
- }
- selectionTotal={0}
- selectionViewed={0}
+ <button
+ aria-controls="simple-menu"
+ aria-haspopup="true"
+ aria-label="ecogesture.MENU_TITLE"
+ class="MuiButtonBase-root MuiButton-root MuiButton-text btnSecondary btnFilter MuiButton-textSizeSmall MuiButton-sizeSmall"
+ tabindex="0"
+ type="button"
>
- <div
- className="ecogesture-root"
+ <span
+ class="MuiButton-label"
>
- <div
- className="efficiency-button-content"
+ <svg
+ aria-hidden="true"
+ class="styles__icon___23x3R"
+ height="20"
+ width="20"
>
- <div
- className="filters text-16-normal"
- >
- <div
- className="filter-button"
- onBlur={[Function]}
- onClick={[Function]}
- tabIndex={0}
- >
- <WithStyles(ForwardRef(Button))
- aria-controls="simple-menu"
- aria-haspopup="true"
- aria-label="ecogesture.MENU_TITLE"
- classes={
- Object {
- "label": "text-14-normal",
- "root": "btn-secondary-negative",
- }
- }
- onClick={[Function]}
- variant="contained"
- >
- <ForwardRef(Button)
- aria-controls="simple-menu"
- aria-haspopup="true"
- aria-label="ecogesture.MENU_TITLE"
- classes={
- Object {
- "colorInherit": "MuiButton-colorInherit",
- "contained": "MuiButton-contained",
- "containedPrimary": "MuiButton-containedPrimary",
- "containedSecondary": "MuiButton-containedSecondary",
- "containedSizeLarge": "MuiButton-containedSizeLarge",
- "containedSizeSmall": "MuiButton-containedSizeSmall",
- "disableElevation": "MuiButton-disableElevation",
- "disabled": "Mui-disabled",
- "endIcon": "MuiButton-endIcon",
- "focusVisible": "Mui-focusVisible",
- "fullWidth": "MuiButton-fullWidth",
- "iconSizeLarge": "MuiButton-iconSizeLarge",
- "iconSizeMedium": "MuiButton-iconSizeMedium",
- "iconSizeSmall": "MuiButton-iconSizeSmall",
- "label": "MuiButton-label text-14-normal",
- "outlined": "MuiButton-outlined",
- "outlinedPrimary": "MuiButton-outlinedPrimary",
- "outlinedSecondary": "MuiButton-outlinedSecondary",
- "outlinedSizeLarge": "MuiButton-outlinedSizeLarge",
- "outlinedSizeSmall": "MuiButton-outlinedSizeSmall",
- "root": "MuiButton-root btn-secondary-negative",
- "sizeLarge": "MuiButton-sizeLarge",
- "sizeSmall": "MuiButton-sizeSmall",
- "startIcon": "MuiButton-startIcon",
- "text": "MuiButton-text",
- "textPrimary": "MuiButton-textPrimary",
- "textSecondary": "MuiButton-textSecondary",
- "textSizeLarge": "MuiButton-textSizeLarge",
- "textSizeSmall": "MuiButton-textSizeSmall",
- }
- }
- onClick={[Function]}
- variant="contained"
- >
- <WithStyles(ForwardRef(ButtonBase))
- aria-controls="simple-menu"
- aria-haspopup="true"
- aria-label="ecogesture.MENU_TITLE"
- className="MuiButton-root btn-secondary-negative MuiButton-contained"
- component="button"
- disabled={false}
- focusRipple={true}
- focusVisibleClassName="Mui-focusVisible"
- onClick={[Function]}
- type="button"
- >
- <ForwardRef(ButtonBase)
- aria-controls="simple-menu"
- aria-haspopup="true"
- aria-label="ecogesture.MENU_TITLE"
- className="MuiButton-root btn-secondary-negative MuiButton-contained"
- classes={
- Object {
- "disabled": "Mui-disabled",
- "focusVisible": "Mui-focusVisible",
- "root": "MuiButtonBase-root",
- }
- }
- component="button"
- disabled={false}
- focusRipple={true}
- focusVisibleClassName="Mui-focusVisible"
- onClick={[Function]}
- type="button"
- >
- <button
- aria-controls="simple-menu"
- aria-haspopup="true"
- aria-label="ecogesture.MENU_TITLE"
- className="MuiButtonBase-root MuiButton-root btn-secondary-negative MuiButton-contained"
- disabled={false}
- onBlur={[Function]}
- onClick={[Function]}
- onDragLeave={[Function]}
- onFocus={[Function]}
- onKeyDown={[Function]}
- onKeyUp={[Function]}
- onMouseDown={[Function]}
- onMouseLeave={[Function]}
- onMouseUp={[Function]}
- onTouchEnd={[Function]}
- onTouchMove={[Function]}
- onTouchStart={[Function]}
- tabIndex={0}
- type="button"
- >
- <span
- className="MuiButton-label text-14-normal"
- >
- <StyledIcon
- icon="test-file-stub"
- size={20}
- >
- <Icon
- aria-hidden={true}
- icon="test-file-stub"
- size={20}
- spin={false}
- >
- <Component
- aria-hidden={true}
- className="styles__icon___23x3R"
- height={20}
- style={Object {}}
- width={20}
- >
- <svg
- aria-hidden={true}
- className="styles__icon___23x3R"
- height={20}
- style={Object {}}
- width={20}
- >
- <use
- xlinkHref="#test-file-stub"
- />
- </svg>
- </Component>
- </Icon>
- </StyledIcon>
- <span
- className="ecogestures"
- >
- ecogesture.MENU_TITLE
- </span>
- </span>
- <WithStyles(memo)
- center={false}
- >
- <ForwardRef(TouchRipple)
- center={false}
- classes={
- Object {
- "child": "MuiTouchRipple-child",
- "childLeaving": "MuiTouchRipple-childLeaving",
- "childPulsate": "MuiTouchRipple-childPulsate",
- "ripple": "MuiTouchRipple-ripple",
- "ripplePulsate": "MuiTouchRipple-ripplePulsate",
- "rippleVisible": "MuiTouchRipple-rippleVisible",
- "root": "MuiTouchRipple-root",
- }
- }
- >
- <span
- className="MuiTouchRipple-root"
- >
- <TransitionGroup
- childFactory={[Function]}
- component={null}
- exit={true}
- />
- </span>
- </ForwardRef(TouchRipple)>
- </WithStyles(memo)>
- </button>
- </ForwardRef(ButtonBase)>
- </WithStyles(ForwardRef(ButtonBase))>
- </ForwardRef(Button)>
- </WithStyles(ForwardRef(Button))>
- <WithStyles(ForwardRef(Menu))
- MenuListProps={
- Object {
- "className": "filter-menu-list",
- }
- }
- PopoverClasses={
- Object {
- "paper": "filter-menu",
- }
- }
- anchorEl={null}
- keepMounted={true}
- onClose={[Function]}
- open={false}
- variant="menu"
- >
- <ForwardRef(Menu)
- MenuListProps={
- Object {
- "className": "filter-menu-list",
- }
- }
- PopoverClasses={
- Object {
- "paper": "filter-menu",
- }
- }
- anchorEl={null}
- classes={
- Object {
- "list": "MuiMenu-list",
- "paper": "MuiMenu-paper",
- }
- }
- keepMounted={true}
- onClose={[Function]}
- open={false}
- variant="menu"
- >
- <WithStyles(ForwardRef(Popover))
- PaperProps={
- Object {
- "classes": Object {
- "root": "MuiMenu-paper",
- },
- }
- }
- TransitionProps={
- Object {
- "onEntering": [Function],
- }
- }
- anchorEl={null}
- anchorOrigin={
- Object {
- "horizontal": "left",
- "vertical": "top",
- }
- }
- classes={
- Object {
- "paper": "filter-menu",
- }
- }
- getContentAnchorEl={[Function]}
- keepMounted={true}
- onClose={[Function]}
- open={false}
- transformOrigin={
- Object {
- "horizontal": "left",
- "vertical": "top",
- }
- }
- transitionDuration="auto"
- >
- <ForwardRef(Popover)
- PaperProps={
- Object {
- "classes": Object {
- "root": "MuiMenu-paper",
- },
- }
- }
- TransitionProps={
- Object {
- "onEntering": [Function],
- }
- }
- anchorEl={null}
- anchorOrigin={
- Object {
- "horizontal": "left",
- "vertical": "top",
- }
- }
- classes={
- Object {
- "paper": "MuiPopover-paper filter-menu",
- "root": "MuiPopover-root",
- }
- }
- getContentAnchorEl={[Function]}
- keepMounted={true}
- onClose={[Function]}
- open={false}
- transformOrigin={
- Object {
- "horizontal": "left",
- "vertical": "top",
- }
- }
- transitionDuration="auto"
- >
- <ForwardRef(Modal)
- BackdropProps={
- Object {
- "invisible": true,
- }
- }
- className="MuiPopover-root"
- keepMounted={true}
- onClose={[Function]}
- open={false}
- >
- <ForwardRef(Portal)
- disablePortal={false}
- >
- <Portal
- containerInfo={
- <body>
- <div
- aria-hidden="true"
- class="MuiPopover-root"
- role="presentation"
- style="position: fixed; z-index: 1300; right: 0px; bottom: 0px; top: 0px; left: 0px; visibility: hidden;"
- >
- <div
- data-test="sentinelStart"
- tabindex="0"
- />
- <div
- class="MuiPaper-root MuiMenu-paper MuiPopover-paper filter-menu MuiPaper-elevation8 MuiPaper-rounded"
- style="opacity: 0; transform: scale(0.75, 0.5625); visibility: hidden;"
- tabindex="-1"
- >
- <ul
- class="MuiList-root MuiMenu-list filter-menu-list MuiList-padding"
- role="menu"
- tabindex="-1"
- >
- <li
- aria-disabled="false"
- class="MuiButtonBase-root MuiListItem-root MuiMenuItem-root item-active Mui-selected MuiMenuItem-gutters MuiListItem-gutters MuiListItem-button Mui-selected"
- role="menuitem"
- tabindex="-1"
- >
- ecogesture.ALL
- <div
- class="MuiListItemIcon-root filter-menu-icon"
- >
- <svg
- aria-hidden="true"
- class="styles__icon___23x3R"
- height="13"
- width="13"
- >
- <use
- xlink:href="#test-file-stub"
- />
- </svg>
- </div>
- <span
- class="MuiTouchRipple-root"
- />
- </li>
- <li
- aria-disabled="false"
- class="MuiButtonBase-root MuiListItem-root MuiMenuItem-root MuiMenuItem-gutters MuiListItem-gutters MuiListItem-button"
- role="menuitem"
- tabindex="-1"
- >
- ecogesture.HEATING
- <span
- class="MuiTouchRipple-root"
- />
- </li>
- <li
- aria-disabled="false"
- class="MuiButtonBase-root MuiListItem-root MuiMenuItem-root MuiMenuItem-gutters MuiListItem-gutters MuiListItem-button"
- role="menuitem"
- tabindex="-1"
- >
- ecogesture.AIR_CONDITIONING
- <span
- class="MuiTouchRipple-root"
- />
- </li>
- <li
- aria-disabled="false"
- class="MuiButtonBase-root MuiListItem-root MuiMenuItem-root MuiMenuItem-gutters MuiListItem-gutters MuiListItem-button"
- role="menuitem"
- tabindex="-1"
- >
- ecogesture.ECS
- <span
- class="MuiTouchRipple-root"
- />
- </li>
- <li
- aria-disabled="false"
- class="MuiButtonBase-root MuiListItem-root MuiMenuItem-root MuiMenuItem-gutters MuiListItem-gutters MuiListItem-button"
- role="menuitem"
- tabindex="-1"
- >
- ecogesture.COLD_WATER
- <span
- class="MuiTouchRipple-root"
- />
- </li>
- <li
- aria-disabled="false"
- class="MuiButtonBase-root MuiListItem-root MuiMenuItem-root MuiMenuItem-gutters MuiListItem-gutters MuiListItem-button"
- role="menuitem"
- tabindex="-1"
- >
- ecogesture.ELECTRICITY_SPECIFIC
- <span
- class="MuiTouchRipple-root"
- />
- </li>
- <li
- aria-disabled="false"
- class="MuiButtonBase-root MuiListItem-root MuiMenuItem-root MuiMenuItem-gutters MuiListItem-gutters MuiListItem-button"
- role="menuitem"
- tabindex="-1"
- >
- ecogesture.COOKING
- <span
- class="MuiTouchRipple-root"
- />
- </li>
- </ul>
- </div>
- <div
- data-test="sentinelEnd"
- tabindex="0"
- />
- </div>
- </body>
- }
- >
- <div
- className="MuiPopover-root"
- onKeyDown={[Function]}
- role="presentation"
- style={
- Object {
- "bottom": 0,
- "left": 0,
- "position": "fixed",
- "right": 0,
- "top": 0,
- "visibility": "hidden",
- "zIndex": 1300,
- }
- }
- >
- <ForwardRef(SimpleBackdrop)
- invisible={true}
- onClick={[Function]}
- open={false}
- />
- <Unstable_TrapFocus
- disableAutoFocus={false}
- disableEnforceFocus={false}
- disableRestoreFocus={false}
- getDoc={[Function]}
- isEnabled={[Function]}
- open={false}
- >
- <div
- data-test="sentinelStart"
- tabIndex={0}
- />
- <ForwardRef(Grow)
- appear={true}
- in={false}
- onEnter={[Function]}
- onEntering={[Function]}
- onExited={[Function]}
- tabIndex="-1"
- timeout="auto"
- >
- <Transition
- addEndListener={[Function]}
- appear={true}
- enter={true}
- exit={true}
- in={false}
- mountOnEnter={false}
- onEnter={[Function]}
- onEntered={[Function]}
- onEntering={[Function]}
- onExit={[Function]}
- onExited={[Function]}
- onExiting={[Function]}
- tabIndex="-1"
- timeout={null}
- unmountOnExit={false}
- >
- <WithStyles(ForwardRef(Paper))
- className="MuiPopover-paper filter-menu"
- classes={
- Object {
- "root": "MuiMenu-paper",
- }
- }
- elevation={8}
- style={
- Object {
- "opacity": 0,
- "transform": "scale(0.75, 0.5625)",
- "visibility": "hidden",
- }
- }
- tabIndex="-1"
- >
- <ForwardRef(Paper)
- className="MuiPopover-paper filter-menu"
- classes={
- Object {
- "elevation0": "MuiPaper-elevation0",
- "elevation1": "MuiPaper-elevation1",
- "elevation10": "MuiPaper-elevation10",
- "elevation11": "MuiPaper-elevation11",
- "elevation12": "MuiPaper-elevation12",
- "elevation13": "MuiPaper-elevation13",
- "elevation14": "MuiPaper-elevation14",
- "elevation15": "MuiPaper-elevation15",
- "elevation16": "MuiPaper-elevation16",
- "elevation17": "MuiPaper-elevation17",
- "elevation18": "MuiPaper-elevation18",
- "elevation19": "MuiPaper-elevation19",
- "elevation2": "MuiPaper-elevation2",
- "elevation20": "MuiPaper-elevation20",
- "elevation21": "MuiPaper-elevation21",
- "elevation22": "MuiPaper-elevation22",
- "elevation23": "MuiPaper-elevation23",
- "elevation24": "MuiPaper-elevation24",
- "elevation3": "MuiPaper-elevation3",
- "elevation4": "MuiPaper-elevation4",
- "elevation5": "MuiPaper-elevation5",
- "elevation6": "MuiPaper-elevation6",
- "elevation7": "MuiPaper-elevation7",
- "elevation8": "MuiPaper-elevation8",
- "elevation9": "MuiPaper-elevation9",
- "outlined": "MuiPaper-outlined",
- "root": "MuiPaper-root MuiMenu-paper",
- "rounded": "MuiPaper-rounded",
- }
- }
- elevation={8}
- style={
- Object {
- "opacity": 0,
- "transform": "scale(0.75, 0.5625)",
- "visibility": "hidden",
- }
- }
- tabIndex="-1"
- >
- <div
- className="MuiPaper-root MuiMenu-paper MuiPopover-paper filter-menu MuiPaper-elevation8 MuiPaper-rounded"
- style={
- Object {
- "opacity": 0,
- "transform": "scale(0.75, 0.5625)",
- "visibility": "hidden",
- }
- }
- tabIndex="-1"
- >
- <ForwardRef(MenuList)
- actions={
- Object {
- "current": Object {
- "adjustStyleForScrollbar": [Function],
- },
- }
- }
- autoFocus={false}
- autoFocusItem={false}
- className="MuiMenu-list filter-menu-list"
- onKeyDown={[Function]}
- variant="menu"
- >
- <WithStyles(ForwardRef(List))
- className="MuiMenu-list filter-menu-list"
- onKeyDown={[Function]}
- role="menu"
- tabIndex={-1}
- >
- <ForwardRef(List)
- className="MuiMenu-list filter-menu-list"
- classes={
- Object {
- "dense": "MuiList-dense",
- "padding": "MuiList-padding",
- "root": "MuiList-root",
- "subheader": "MuiList-subheader",
- }
- }
- onKeyDown={[Function]}
- role="menu"
- tabIndex={-1}
- >
- <ul
- className="MuiList-root MuiMenu-list filter-menu-list MuiList-padding"
- onKeyDown={[Function]}
- role="menu"
- tabIndex={-1}
- >
- <WithStyles(ForwardRef(MenuItem))
- classes={
- Object {
- "root": "item-active",
- }
- }
- key=".$.$7"
- onClick={[Function]}
- selected={true}
- >
- <ForwardRef(MenuItem)
- classes={
- Object {
- "dense": "MuiMenuItem-dense",
- "gutters": "MuiMenuItem-gutters",
- "root": "MuiMenuItem-root item-active",
- "selected": "Mui-selected",
- }
- }
- onClick={[Function]}
- selected={true}
- >
- <WithStyles(ForwardRef(ListItem))
- button={true}
- className="MuiMenuItem-root item-active Mui-selected MuiMenuItem-gutters"
- classes={
- Object {
- "dense": "MuiMenuItem-dense",
- }
- }
- component="li"
- disableGutters={false}
- onClick={[Function]}
- role="menuitem"
- selected={true}
- tabIndex={-1}
- >
- <ForwardRef(ListItem)
- button={true}
- className="MuiMenuItem-root item-active Mui-selected MuiMenuItem-gutters"
- classes={
- Object {
- "alignItemsFlexStart": "MuiListItem-alignItemsFlexStart",
- "button": "MuiListItem-button",
- "container": "MuiListItem-container",
- "dense": "MuiListItem-dense MuiMenuItem-dense",
- "disabled": "Mui-disabled",
- "divider": "MuiListItem-divider",
- "focusVisible": "Mui-focusVisible",
- "gutters": "MuiListItem-gutters",
- "root": "MuiListItem-root",
- "secondaryAction": "MuiListItem-secondaryAction",
- "selected": "Mui-selected",
- }
- }
- component="li"
- disableGutters={false}
- onClick={[Function]}
- role="menuitem"
- selected={true}
- tabIndex={-1}
- >
- <WithStyles(ForwardRef(ButtonBase))
- className="MuiListItem-root MuiMenuItem-root item-active Mui-selected MuiMenuItem-gutters MuiListItem-gutters MuiListItem-button Mui-selected"
- component="li"
- disabled={false}
- focusVisibleClassName="Mui-focusVisible"
- onClick={[Function]}
- role="menuitem"
- tabIndex={-1}
- >
- <ForwardRef(ButtonBase)
- className="MuiListItem-root MuiMenuItem-root item-active Mui-selected MuiMenuItem-gutters MuiListItem-gutters MuiListItem-button Mui-selected"
- classes={
- Object {
- "disabled": "Mui-disabled",
- "focusVisible": "Mui-focusVisible",
- "root": "MuiButtonBase-root",
- }
- }
- component="li"
- disabled={false}
- focusVisibleClassName="Mui-focusVisible"
- onClick={[Function]}
- role="menuitem"
- tabIndex={-1}
- >
- <li
- aria-disabled={false}
- className="MuiButtonBase-root MuiListItem-root MuiMenuItem-root item-active Mui-selected MuiMenuItem-gutters MuiListItem-gutters MuiListItem-button Mui-selected"
- onBlur={[Function]}
- onClick={[Function]}
- onDragLeave={[Function]}
- onFocus={[Function]}
- onKeyDown={[Function]}
- onKeyUp={[Function]}
- onMouseDown={[Function]}
- onMouseLeave={[Function]}
- onMouseUp={[Function]}
- onTouchEnd={[Function]}
- onTouchMove={[Function]}
- onTouchStart={[Function]}
- role="menuitem"
- tabIndex={-1}
- >
- ecogesture.ALL
- <WithStyles(ForwardRef(ListItemIcon))
- classes={
- Object {
- "root": "filter-menu-icon",
- }
- }
- key=".1"
- >
- <ForwardRef(ListItemIcon)
- classes={
- Object {
- "alignItemsFlexStart": "MuiListItemIcon-alignItemsFlexStart",
- "root": "MuiListItemIcon-root filter-menu-icon",
- }
- }
- >
- <div
- className="MuiListItemIcon-root filter-menu-icon"
- >
- <StyledIcon
- icon="test-file-stub"
- size={13}
- >
- <Icon
- aria-hidden={true}
- icon="test-file-stub"
- size={13}
- spin={false}
- >
- <Component
- aria-hidden={true}
- className="styles__icon___23x3R"
- height={13}
- style={Object {}}
- width={13}
- >
- <svg
- aria-hidden={true}
- className="styles__icon___23x3R"
- height={13}
- style={Object {}}
- width={13}
- >
- <use
- xlinkHref="#test-file-stub"
- />
- </svg>
- </Component>
- </Icon>
- </StyledIcon>
- </div>
- </ForwardRef(ListItemIcon)>
- </WithStyles(ForwardRef(ListItemIcon))>
- <WithStyles(memo)
- center={false}
- >
- <ForwardRef(TouchRipple)
- center={false}
- classes={
- Object {
- "child": "MuiTouchRipple-child",
- "childLeaving": "MuiTouchRipple-childLeaving",
- "childPulsate": "MuiTouchRipple-childPulsate",
- "ripple": "MuiTouchRipple-ripple",
- "ripplePulsate": "MuiTouchRipple-ripplePulsate",
- "rippleVisible": "MuiTouchRipple-rippleVisible",
- "root": "MuiTouchRipple-root",
- }
- }
- >
- <span
- className="MuiTouchRipple-root"
- >
- <TransitionGroup
- childFactory={[Function]}
- component={null}
- exit={true}
- />
- </span>
- </ForwardRef(TouchRipple)>
- </WithStyles(memo)>
- </li>
- </ForwardRef(ButtonBase)>
- </WithStyles(ForwardRef(ButtonBase))>
- </ForwardRef(ListItem)>
- </WithStyles(ForwardRef(ListItem))>
- </ForwardRef(MenuItem)>
- </WithStyles(ForwardRef(MenuItem))>
- <WithStyles(ForwardRef(MenuItem))
- classes={
- Object {
- "root": "",
- }
- }
- key=".$.$8"
- onClick={[Function]}
- selected={false}
- >
- <ForwardRef(MenuItem)
- classes={
- Object {
- "dense": "MuiMenuItem-dense",
- "gutters": "MuiMenuItem-gutters",
- "root": "MuiMenuItem-root",
- "selected": "Mui-selected",
- }
- }
- onClick={[Function]}
- selected={false}
- >
- <WithStyles(ForwardRef(ListItem))
- button={true}
- className="MuiMenuItem-root MuiMenuItem-gutters"
- classes={
- Object {
- "dense": "MuiMenuItem-dense",
- }
- }
- component="li"
- disableGutters={false}
- onClick={[Function]}
- role="menuitem"
- selected={false}
- tabIndex={-1}
- >
- <ForwardRef(ListItem)
- button={true}
- className="MuiMenuItem-root MuiMenuItem-gutters"
- classes={
- Object {
- "alignItemsFlexStart": "MuiListItem-alignItemsFlexStart",
- "button": "MuiListItem-button",
- "container": "MuiListItem-container",
- "dense": "MuiListItem-dense MuiMenuItem-dense",
- "disabled": "Mui-disabled",
- "divider": "MuiListItem-divider",
- "focusVisible": "Mui-focusVisible",
- "gutters": "MuiListItem-gutters",
- "root": "MuiListItem-root",
- "secondaryAction": "MuiListItem-secondaryAction",
- "selected": "Mui-selected",
- }
- }
- component="li"
- disableGutters={false}
- onClick={[Function]}
- role="menuitem"
- selected={false}
- tabIndex={-1}
- >
- <WithStyles(ForwardRef(ButtonBase))
- className="MuiListItem-root MuiMenuItem-root MuiMenuItem-gutters MuiListItem-gutters MuiListItem-button"
- component="li"
- disabled={false}
- focusVisibleClassName="Mui-focusVisible"
- onClick={[Function]}
- role="menuitem"
- tabIndex={-1}
- >
- <ForwardRef(ButtonBase)
- className="MuiListItem-root MuiMenuItem-root MuiMenuItem-gutters MuiListItem-gutters MuiListItem-button"
- classes={
- Object {
- "disabled": "Mui-disabled",
- "focusVisible": "Mui-focusVisible",
- "root": "MuiButtonBase-root",
- }
- }
- component="li"
- disabled={false}
- focusVisibleClassName="Mui-focusVisible"
- onClick={[Function]}
- role="menuitem"
- tabIndex={-1}
- >
- <li
- aria-disabled={false}
- className="MuiButtonBase-root MuiListItem-root MuiMenuItem-root MuiMenuItem-gutters MuiListItem-gutters MuiListItem-button"
- onBlur={[Function]}
- onClick={[Function]}
- onDragLeave={[Function]}
- onFocus={[Function]}
- onKeyDown={[Function]}
- onKeyUp={[Function]}
- onMouseDown={[Function]}
- onMouseLeave={[Function]}
- onMouseUp={[Function]}
- onTouchEnd={[Function]}
- onTouchMove={[Function]}
- onTouchStart={[Function]}
- role="menuitem"
- tabIndex={-1}
- >
- ecogesture.HEATING
- <WithStyles(memo)
- center={false}
- >
- <ForwardRef(TouchRipple)
- center={false}
- classes={
- Object {
- "child": "MuiTouchRipple-child",
- "childLeaving": "MuiTouchRipple-childLeaving",
- "childPulsate": "MuiTouchRipple-childPulsate",
- "ripple": "MuiTouchRipple-ripple",
- "ripplePulsate": "MuiTouchRipple-ripplePulsate",
- "rippleVisible": "MuiTouchRipple-rippleVisible",
- "root": "MuiTouchRipple-root",
- }
- }
- >
- <span
- className="MuiTouchRipple-root"
- >
- <TransitionGroup
- childFactory={[Function]}
- component={null}
- exit={true}
- />
- </span>
- </ForwardRef(TouchRipple)>
- </WithStyles(memo)>
- </li>
- </ForwardRef(ButtonBase)>
- </WithStyles(ForwardRef(ButtonBase))>
- </ForwardRef(ListItem)>
- </WithStyles(ForwardRef(ListItem))>
- </ForwardRef(MenuItem)>
- </WithStyles(ForwardRef(MenuItem))>
- <WithStyles(ForwardRef(MenuItem))
- classes={
- Object {
- "root": "",
- }
- }
- key=".$.$9"
- onClick={[Function]}
- selected={false}
- >
- <ForwardRef(MenuItem)
- classes={
- Object {
- "dense": "MuiMenuItem-dense",
- "gutters": "MuiMenuItem-gutters",
- "root": "MuiMenuItem-root",
- "selected": "Mui-selected",
- }
- }
- onClick={[Function]}
- selected={false}
- >
- <WithStyles(ForwardRef(ListItem))
- button={true}
- className="MuiMenuItem-root MuiMenuItem-gutters"
- classes={
- Object {
- "dense": "MuiMenuItem-dense",
- }
- }
- component="li"
- disableGutters={false}
- onClick={[Function]}
- role="menuitem"
- selected={false}
- tabIndex={-1}
- >
- <ForwardRef(ListItem)
- button={true}
- className="MuiMenuItem-root MuiMenuItem-gutters"
- classes={
- Object {
- "alignItemsFlexStart": "MuiListItem-alignItemsFlexStart",
- "button": "MuiListItem-button",
- "container": "MuiListItem-container",
- "dense": "MuiListItem-dense MuiMenuItem-dense",
- "disabled": "Mui-disabled",
- "divider": "MuiListItem-divider",
- "focusVisible": "Mui-focusVisible",
- "gutters": "MuiListItem-gutters",
- "root": "MuiListItem-root",
- "secondaryAction": "MuiListItem-secondaryAction",
- "selected": "Mui-selected",
- }
- }
- component="li"
- disableGutters={false}
- onClick={[Function]}
- role="menuitem"
- selected={false}
- tabIndex={-1}
- >
- <WithStyles(ForwardRef(ButtonBase))
- className="MuiListItem-root MuiMenuItem-root MuiMenuItem-gutters MuiListItem-gutters MuiListItem-button"
- component="li"
- disabled={false}
- focusVisibleClassName="Mui-focusVisible"
- onClick={[Function]}
- role="menuitem"
- tabIndex={-1}
- >
- <ForwardRef(ButtonBase)
- className="MuiListItem-root MuiMenuItem-root MuiMenuItem-gutters MuiListItem-gutters MuiListItem-button"
- classes={
- Object {
- "disabled": "Mui-disabled",
- "focusVisible": "Mui-focusVisible",
- "root": "MuiButtonBase-root",
- }
- }
- component="li"
- disabled={false}
- focusVisibleClassName="Mui-focusVisible"
- onClick={[Function]}
- role="menuitem"
- tabIndex={-1}
- >
- <li
- aria-disabled={false}
- className="MuiButtonBase-root MuiListItem-root MuiMenuItem-root MuiMenuItem-gutters MuiListItem-gutters MuiListItem-button"
- onBlur={[Function]}
- onClick={[Function]}
- onDragLeave={[Function]}
- onFocus={[Function]}
- onKeyDown={[Function]}
- onKeyUp={[Function]}
- onMouseDown={[Function]}
- onMouseLeave={[Function]}
- onMouseUp={[Function]}
- onTouchEnd={[Function]}
- onTouchMove={[Function]}
- onTouchStart={[Function]}
- role="menuitem"
- tabIndex={-1}
- >
- ecogesture.AIR_CONDITIONING
- <WithStyles(memo)
- center={false}
- >
- <ForwardRef(TouchRipple)
- center={false}
- classes={
- Object {
- "child": "MuiTouchRipple-child",
- "childLeaving": "MuiTouchRipple-childLeaving",
- "childPulsate": "MuiTouchRipple-childPulsate",
- "ripple": "MuiTouchRipple-ripple",
- "ripplePulsate": "MuiTouchRipple-ripplePulsate",
- "rippleVisible": "MuiTouchRipple-rippleVisible",
- "root": "MuiTouchRipple-root",
- }
- }
- >
- <span
- className="MuiTouchRipple-root"
- >
- <TransitionGroup
- childFactory={[Function]}
- component={null}
- exit={true}
- />
- </span>
- </ForwardRef(TouchRipple)>
- </WithStyles(memo)>
- </li>
- </ForwardRef(ButtonBase)>
- </WithStyles(ForwardRef(ButtonBase))>
- </ForwardRef(ListItem)>
- </WithStyles(ForwardRef(ListItem))>
- </ForwardRef(MenuItem)>
- </WithStyles(ForwardRef(MenuItem))>
- <WithStyles(ForwardRef(MenuItem))
- classes={
- Object {
- "root": "",
- }
- }
- key=".$.$10"
- onClick={[Function]}
- selected={false}
- >
- <ForwardRef(MenuItem)
- classes={
- Object {
- "dense": "MuiMenuItem-dense",
- "gutters": "MuiMenuItem-gutters",
- "root": "MuiMenuItem-root",
- "selected": "Mui-selected",
- }
- }
- onClick={[Function]}
- selected={false}
- >
- <WithStyles(ForwardRef(ListItem))
- button={true}
- className="MuiMenuItem-root MuiMenuItem-gutters"
- classes={
- Object {
- "dense": "MuiMenuItem-dense",
- }
- }
- component="li"
- disableGutters={false}
- onClick={[Function]}
- role="menuitem"
- selected={false}
- tabIndex={-1}
- >
- <ForwardRef(ListItem)
- button={true}
- className="MuiMenuItem-root MuiMenuItem-gutters"
- classes={
- Object {
- "alignItemsFlexStart": "MuiListItem-alignItemsFlexStart",
- "button": "MuiListItem-button",
- "container": "MuiListItem-container",
- "dense": "MuiListItem-dense MuiMenuItem-dense",
- "disabled": "Mui-disabled",
- "divider": "MuiListItem-divider",
- "focusVisible": "Mui-focusVisible",
- "gutters": "MuiListItem-gutters",
- "root": "MuiListItem-root",
- "secondaryAction": "MuiListItem-secondaryAction",
- "selected": "Mui-selected",
- }
- }
- component="li"
- disableGutters={false}
- onClick={[Function]}
- role="menuitem"
- selected={false}
- tabIndex={-1}
- >
- <WithStyles(ForwardRef(ButtonBase))
- className="MuiListItem-root MuiMenuItem-root MuiMenuItem-gutters MuiListItem-gutters MuiListItem-button"
- component="li"
- disabled={false}
- focusVisibleClassName="Mui-focusVisible"
- onClick={[Function]}
- role="menuitem"
- tabIndex={-1}
- >
- <ForwardRef(ButtonBase)
- className="MuiListItem-root MuiMenuItem-root MuiMenuItem-gutters MuiListItem-gutters MuiListItem-button"
- classes={
- Object {
- "disabled": "Mui-disabled",
- "focusVisible": "Mui-focusVisible",
- "root": "MuiButtonBase-root",
- }
- }
- component="li"
- disabled={false}
- focusVisibleClassName="Mui-focusVisible"
- onClick={[Function]}
- role="menuitem"
- tabIndex={-1}
- >
- <li
- aria-disabled={false}
- className="MuiButtonBase-root MuiListItem-root MuiMenuItem-root MuiMenuItem-gutters MuiListItem-gutters MuiListItem-button"
- onBlur={[Function]}
- onClick={[Function]}
- onDragLeave={[Function]}
- onFocus={[Function]}
- onKeyDown={[Function]}
- onKeyUp={[Function]}
- onMouseDown={[Function]}
- onMouseLeave={[Function]}
- onMouseUp={[Function]}
- onTouchEnd={[Function]}
- onTouchMove={[Function]}
- onTouchStart={[Function]}
- role="menuitem"
- tabIndex={-1}
- >
- ecogesture.ECS
- <WithStyles(memo)
- center={false}
- >
- <ForwardRef(TouchRipple)
- center={false}
- classes={
- Object {
- "child": "MuiTouchRipple-child",
- "childLeaving": "MuiTouchRipple-childLeaving",
- "childPulsate": "MuiTouchRipple-childPulsate",
- "ripple": "MuiTouchRipple-ripple",
- "ripplePulsate": "MuiTouchRipple-ripplePulsate",
- "rippleVisible": "MuiTouchRipple-rippleVisible",
- "root": "MuiTouchRipple-root",
- }
- }
- >
- <span
- className="MuiTouchRipple-root"
- >
- <TransitionGroup
- childFactory={[Function]}
- component={null}
- exit={true}
- />
- </span>
- </ForwardRef(TouchRipple)>
- </WithStyles(memo)>
- </li>
- </ForwardRef(ButtonBase)>
- </WithStyles(ForwardRef(ButtonBase))>
- </ForwardRef(ListItem)>
- </WithStyles(ForwardRef(ListItem))>
- </ForwardRef(MenuItem)>
- </WithStyles(ForwardRef(MenuItem))>
- <WithStyles(ForwardRef(MenuItem))
- classes={
- Object {
- "root": "",
- }
- }
- key=".$.$11"
- onClick={[Function]}
- selected={false}
- >
- <ForwardRef(MenuItem)
- classes={
- Object {
- "dense": "MuiMenuItem-dense",
- "gutters": "MuiMenuItem-gutters",
- "root": "MuiMenuItem-root",
- "selected": "Mui-selected",
- }
- }
- onClick={[Function]}
- selected={false}
- >
- <WithStyles(ForwardRef(ListItem))
- button={true}
- className="MuiMenuItem-root MuiMenuItem-gutters"
- classes={
- Object {
- "dense": "MuiMenuItem-dense",
- }
- }
- component="li"
- disableGutters={false}
- onClick={[Function]}
- role="menuitem"
- selected={false}
- tabIndex={-1}
- >
- <ForwardRef(ListItem)
- button={true}
- className="MuiMenuItem-root MuiMenuItem-gutters"
- classes={
- Object {
- "alignItemsFlexStart": "MuiListItem-alignItemsFlexStart",
- "button": "MuiListItem-button",
- "container": "MuiListItem-container",
- "dense": "MuiListItem-dense MuiMenuItem-dense",
- "disabled": "Mui-disabled",
- "divider": "MuiListItem-divider",
- "focusVisible": "Mui-focusVisible",
- "gutters": "MuiListItem-gutters",
- "root": "MuiListItem-root",
- "secondaryAction": "MuiListItem-secondaryAction",
- "selected": "Mui-selected",
- }
- }
- component="li"
- disableGutters={false}
- onClick={[Function]}
- role="menuitem"
- selected={false}
- tabIndex={-1}
- >
- <WithStyles(ForwardRef(ButtonBase))
- className="MuiListItem-root MuiMenuItem-root MuiMenuItem-gutters MuiListItem-gutters MuiListItem-button"
- component="li"
- disabled={false}
- focusVisibleClassName="Mui-focusVisible"
- onClick={[Function]}
- role="menuitem"
- tabIndex={-1}
- >
- <ForwardRef(ButtonBase)
- className="MuiListItem-root MuiMenuItem-root MuiMenuItem-gutters MuiListItem-gutters MuiListItem-button"
- classes={
- Object {
- "disabled": "Mui-disabled",
- "focusVisible": "Mui-focusVisible",
- "root": "MuiButtonBase-root",
- }
- }
- component="li"
- disabled={false}
- focusVisibleClassName="Mui-focusVisible"
- onClick={[Function]}
- role="menuitem"
- tabIndex={-1}
- >
- <li
- aria-disabled={false}
- className="MuiButtonBase-root MuiListItem-root MuiMenuItem-root MuiMenuItem-gutters MuiListItem-gutters MuiListItem-button"
- onBlur={[Function]}
- onClick={[Function]}
- onDragLeave={[Function]}
- onFocus={[Function]}
- onKeyDown={[Function]}
- onKeyUp={[Function]}
- onMouseDown={[Function]}
- onMouseLeave={[Function]}
- onMouseUp={[Function]}
- onTouchEnd={[Function]}
- onTouchMove={[Function]}
- onTouchStart={[Function]}
- role="menuitem"
- tabIndex={-1}
- >
- ecogesture.COLD_WATER
- <WithStyles(memo)
- center={false}
- >
- <ForwardRef(TouchRipple)
- center={false}
- classes={
- Object {
- "child": "MuiTouchRipple-child",
- "childLeaving": "MuiTouchRipple-childLeaving",
- "childPulsate": "MuiTouchRipple-childPulsate",
- "ripple": "MuiTouchRipple-ripple",
- "ripplePulsate": "MuiTouchRipple-ripplePulsate",
- "rippleVisible": "MuiTouchRipple-rippleVisible",
- "root": "MuiTouchRipple-root",
- }
- }
- >
- <span
- className="MuiTouchRipple-root"
- >
- <TransitionGroup
- childFactory={[Function]}
- component={null}
- exit={true}
- />
- </span>
- </ForwardRef(TouchRipple)>
- </WithStyles(memo)>
- </li>
- </ForwardRef(ButtonBase)>
- </WithStyles(ForwardRef(ButtonBase))>
- </ForwardRef(ListItem)>
- </WithStyles(ForwardRef(ListItem))>
- </ForwardRef(MenuItem)>
- </WithStyles(ForwardRef(MenuItem))>
- <WithStyles(ForwardRef(MenuItem))
- classes={
- Object {
- "root": "",
- }
- }
- key=".$.$12"
- onClick={[Function]}
- selected={false}
- >
- <ForwardRef(MenuItem)
- classes={
- Object {
- "dense": "MuiMenuItem-dense",
- "gutters": "MuiMenuItem-gutters",
- "root": "MuiMenuItem-root",
- "selected": "Mui-selected",
- }
- }
- onClick={[Function]}
- selected={false}
- >
- <WithStyles(ForwardRef(ListItem))
- button={true}
- className="MuiMenuItem-root MuiMenuItem-gutters"
- classes={
- Object {
- "dense": "MuiMenuItem-dense",
- }
- }
- component="li"
- disableGutters={false}
- onClick={[Function]}
- role="menuitem"
- selected={false}
- tabIndex={-1}
- >
- <ForwardRef(ListItem)
- button={true}
- className="MuiMenuItem-root MuiMenuItem-gutters"
- classes={
- Object {
- "alignItemsFlexStart": "MuiListItem-alignItemsFlexStart",
- "button": "MuiListItem-button",
- "container": "MuiListItem-container",
- "dense": "MuiListItem-dense MuiMenuItem-dense",
- "disabled": "Mui-disabled",
- "divider": "MuiListItem-divider",
- "focusVisible": "Mui-focusVisible",
- "gutters": "MuiListItem-gutters",
- "root": "MuiListItem-root",
- "secondaryAction": "MuiListItem-secondaryAction",
- "selected": "Mui-selected",
- }
- }
- component="li"
- disableGutters={false}
- onClick={[Function]}
- role="menuitem"
- selected={false}
- tabIndex={-1}
- >
- <WithStyles(ForwardRef(ButtonBase))
- className="MuiListItem-root MuiMenuItem-root MuiMenuItem-gutters MuiListItem-gutters MuiListItem-button"
- component="li"
- disabled={false}
- focusVisibleClassName="Mui-focusVisible"
- onClick={[Function]}
- role="menuitem"
- tabIndex={-1}
- >
- <ForwardRef(ButtonBase)
- className="MuiListItem-root MuiMenuItem-root MuiMenuItem-gutters MuiListItem-gutters MuiListItem-button"
- classes={
- Object {
- "disabled": "Mui-disabled",
- "focusVisible": "Mui-focusVisible",
- "root": "MuiButtonBase-root",
- }
- }
- component="li"
- disabled={false}
- focusVisibleClassName="Mui-focusVisible"
- onClick={[Function]}
- role="menuitem"
- tabIndex={-1}
- >
- <li
- aria-disabled={false}
- className="MuiButtonBase-root MuiListItem-root MuiMenuItem-root MuiMenuItem-gutters MuiListItem-gutters MuiListItem-button"
- onBlur={[Function]}
- onClick={[Function]}
- onDragLeave={[Function]}
- onFocus={[Function]}
- onKeyDown={[Function]}
- onKeyUp={[Function]}
- onMouseDown={[Function]}
- onMouseLeave={[Function]}
- onMouseUp={[Function]}
- onTouchEnd={[Function]}
- onTouchMove={[Function]}
- onTouchStart={[Function]}
- role="menuitem"
- tabIndex={-1}
- >
- ecogesture.ELECTRICITY_SPECIFIC
- <WithStyles(memo)
- center={false}
- >
- <ForwardRef(TouchRipple)
- center={false}
- classes={
- Object {
- "child": "MuiTouchRipple-child",
- "childLeaving": "MuiTouchRipple-childLeaving",
- "childPulsate": "MuiTouchRipple-childPulsate",
- "ripple": "MuiTouchRipple-ripple",
- "ripplePulsate": "MuiTouchRipple-ripplePulsate",
- "rippleVisible": "MuiTouchRipple-rippleVisible",
- "root": "MuiTouchRipple-root",
- }
- }
- >
- <span
- className="MuiTouchRipple-root"
- >
- <TransitionGroup
- childFactory={[Function]}
- component={null}
- exit={true}
- />
- </span>
- </ForwardRef(TouchRipple)>
- </WithStyles(memo)>
- </li>
- </ForwardRef(ButtonBase)>
- </WithStyles(ForwardRef(ButtonBase))>
- </ForwardRef(ListItem)>
- </WithStyles(ForwardRef(ListItem))>
- </ForwardRef(MenuItem)>
- </WithStyles(ForwardRef(MenuItem))>
- <WithStyles(ForwardRef(MenuItem))
- classes={
- Object {
- "root": "",
- }
- }
- key=".$.$13"
- onClick={[Function]}
- selected={false}
- >
- <ForwardRef(MenuItem)
- classes={
- Object {
- "dense": "MuiMenuItem-dense",
- "gutters": "MuiMenuItem-gutters",
- "root": "MuiMenuItem-root",
- "selected": "Mui-selected",
- }
- }
- onClick={[Function]}
- selected={false}
- >
- <WithStyles(ForwardRef(ListItem))
- button={true}
- className="MuiMenuItem-root MuiMenuItem-gutters"
- classes={
- Object {
- "dense": "MuiMenuItem-dense",
- }
- }
- component="li"
- disableGutters={false}
- onClick={[Function]}
- role="menuitem"
- selected={false}
- tabIndex={-1}
- >
- <ForwardRef(ListItem)
- button={true}
- className="MuiMenuItem-root MuiMenuItem-gutters"
- classes={
- Object {
- "alignItemsFlexStart": "MuiListItem-alignItemsFlexStart",
- "button": "MuiListItem-button",
- "container": "MuiListItem-container",
- "dense": "MuiListItem-dense MuiMenuItem-dense",
- "disabled": "Mui-disabled",
- "divider": "MuiListItem-divider",
- "focusVisible": "Mui-focusVisible",
- "gutters": "MuiListItem-gutters",
- "root": "MuiListItem-root",
- "secondaryAction": "MuiListItem-secondaryAction",
- "selected": "Mui-selected",
- }
- }
- component="li"
- disableGutters={false}
- onClick={[Function]}
- role="menuitem"
- selected={false}
- tabIndex={-1}
- >
- <WithStyles(ForwardRef(ButtonBase))
- className="MuiListItem-root MuiMenuItem-root MuiMenuItem-gutters MuiListItem-gutters MuiListItem-button"
- component="li"
- disabled={false}
- focusVisibleClassName="Mui-focusVisible"
- onClick={[Function]}
- role="menuitem"
- tabIndex={-1}
- >
- <ForwardRef(ButtonBase)
- className="MuiListItem-root MuiMenuItem-root MuiMenuItem-gutters MuiListItem-gutters MuiListItem-button"
- classes={
- Object {
- "disabled": "Mui-disabled",
- "focusVisible": "Mui-focusVisible",
- "root": "MuiButtonBase-root",
- }
- }
- component="li"
- disabled={false}
- focusVisibleClassName="Mui-focusVisible"
- onClick={[Function]}
- role="menuitem"
- tabIndex={-1}
- >
- <li
- aria-disabled={false}
- className="MuiButtonBase-root MuiListItem-root MuiMenuItem-root MuiMenuItem-gutters MuiListItem-gutters MuiListItem-button"
- onBlur={[Function]}
- onClick={[Function]}
- onDragLeave={[Function]}
- onFocus={[Function]}
- onKeyDown={[Function]}
- onKeyUp={[Function]}
- onMouseDown={[Function]}
- onMouseLeave={[Function]}
- onMouseUp={[Function]}
- onTouchEnd={[Function]}
- onTouchMove={[Function]}
- onTouchStart={[Function]}
- role="menuitem"
- tabIndex={-1}
- >
- ecogesture.COOKING
- <WithStyles(memo)
- center={false}
- >
- <ForwardRef(TouchRipple)
- center={false}
- classes={
- Object {
- "child": "MuiTouchRipple-child",
- "childLeaving": "MuiTouchRipple-childLeaving",
- "childPulsate": "MuiTouchRipple-childPulsate",
- "ripple": "MuiTouchRipple-ripple",
- "ripplePulsate": "MuiTouchRipple-ripplePulsate",
- "rippleVisible": "MuiTouchRipple-rippleVisible",
- "root": "MuiTouchRipple-root",
- }
- }
- >
- <span
- className="MuiTouchRipple-root"
- >
- <TransitionGroup
- childFactory={[Function]}
- component={null}
- exit={true}
- />
- </span>
- </ForwardRef(TouchRipple)>
- </WithStyles(memo)>
- </li>
- </ForwardRef(ButtonBase)>
- </WithStyles(ForwardRef(ButtonBase))>
- </ForwardRef(ListItem)>
- </WithStyles(ForwardRef(ListItem))>
- </ForwardRef(MenuItem)>
- </WithStyles(ForwardRef(MenuItem))>
- </ul>
- </ForwardRef(List)>
- </WithStyles(ForwardRef(List))>
- </ForwardRef(MenuList)>
- </div>
- </ForwardRef(Paper)>
- </WithStyles(ForwardRef(Paper))>
- </Transition>
- </ForwardRef(Grow)>
- <div
- data-test="sentinelEnd"
- tabIndex={0}
- />
- </Unstable_TrapFocus>
- </div>
- </Portal>
- </ForwardRef(Portal)>
- </ForwardRef(Modal)>
- </ForwardRef(Popover)>
- </WithStyles(ForwardRef(Popover))>
- </ForwardRef(Menu)>
- </WithStyles(ForwardRef(Menu))>
- </div>
- </div>
- </div>
- <div
- className="ecogesture-content"
- >
- <mock-ecogesturecard
- ecogesture={
- Object {
- "_id": "ECOGESTURE001",
- "_rev": "1-67f1ea36efdd892c96bf64a8943154cd",
- "_type": "com.grandlyon.ecolyo.ecogesture",
- "action": false,
- "actionDuration": 3,
- "actionName": null,
- "difficulty": 1,
- "doing": false,
- "efficiency": 4,
- "equipment": false,
- "equipmentInstallation": true,
- "equipmentType": Array [],
- "fluidTypes": Array [
- 0,
- 2,
- ],
- "id": "ECOGESTURE001",
- "impactLevel": 8,
- "investment": null,
- "longDescription": "On se demande parfois si cela vaut le coup de \\"couper le chauffage\\" quand on s’absente… dès qu’il s’agit d’un week-end la réponse est « oui sûrement » ! Attention cependant au retour à ne pas faire de la surchauffe ! L’idéal est bien évidemment de régler sa programmation pour que le chauffage se relance quelques heures avant votre retour…",
- "longName": "Je baisse le chauffage en mode hors gel lorsque je m'absente plus de 2 jours.",
- "objective": false,
- "room": Array [
- 0,
- ],
- "season": "Hiver",
- "shortName": "Bonhomme de neige",
- "usage": 1,
- "viewedInSelection": false,
- }
- }
- key="ECOGESTURE001"
- />
- <mock-ecogesturecard
- ecogesture={
- Object {
- "_id": "ECOGESTURE002",
- "_rev": "1-ef7ddd778254e3b7d331a88fd17f606d",
- "_type": "com.grandlyon.ecolyo.ecogesture",
- "action": false,
- "actionDuration": 3,
- "actionName": null,
- "difficulty": 1,
- "doing": false,
- "efficiency": 4,
- "equipment": true,
- "equipmentInstallation": true,
- "equipmentType": Array [
- "AIR_CONDITIONING",
- ],
- "fluidTypes": Array [
- 0,
- ],
- "id": "ECOGESTURE002",
- "impactLevel": 8,
- "investment": null,
- "longDescription": "Cela permet de garder la fraîcheur à l'intérieur. Le climatiseur n'est pas là pour refroidir la rue mais bien la pièce.",
- "longName": "Je ferme mes fenêtres quand la climatisation est en marche",
- "objective": false,
- "room": Array [
- 0,
- ],
- "season": "Eté",
- "shortName": "Coup de vent",
- "usage": 2,
- "viewedInSelection": false,
- }
- }
- key="ECOGESTURE002"
+ <use
+ xlink:href="#test-file-stub"
/>
- <mock-ecogesturecard
- ecogesture={
- Object {
- "_id": "ECOGESTURE0013",
- "_rev": "1-0b2761dd4aef79556c7aef144060fde6",
- "_type": "com.grandlyon.ecolyo.ecogesture",
- "action": true,
- "actionDuration": 3,
- "actionName": "J’utilise le cycle court à basse température pour laver le linge et la vaisselle.",
- "difficulty": 1,
- "doing": false,
- "efficiency": 1,
- "equipment": false,
- "equipmentInstallation": true,
- "equipmentType": Array [
- "WASHING_MACHINE",
- "DISHWASHER",
- ],
- "fluidTypes": Array [
- 1,
- ],
- "id": "ECOGESTURE0013",
- "impactLevel": 2,
- "investment": null,
- "longDescription": "Utilisez la température la plus basse possible : de nombreux produits nettoyants sont efficaces à froid et un cycle à 90 °C consomme 3 fois plus d'énergie qu'un lavage à 40 °C. En effet, 80 % de l'énergie consommée par un lave-linge ou un lave-vaisselle sert au chauffage de l'eau ! Que ce soit pour la vaisselle ou le linge, les programmes de lavage intensif consomment jusqu'à 40 % de plus. Si possible, rincez à l'eau froide : la température de rinçage n'a pas d'effet sur le nettoyage du linge ou de la vaisselle. Attention cependant avec les tissus qui peuvent rétrécir : ce qui fait rétrécir, c'est le passage d'une température à une autre. Mieux vaut alors faire le cycle complet à l'eau froide pour les premiers lavages de tissus sensibles. Pour du linge ou de la vaisselle peu sales, utilisez la touche \\"Eco\\". Elle réduit la température de lavage et allonge sa durée (c’est le chauffage de l’eau qui consomme le plus). Vous économiserez jusqu’à 45 % par rapport aux cycles longs. Néanmoins, pour vous prémunir contre les bouchons de graisse dans les canalisations, faites quand même un cycle à chaud une fois par mois environ.",
- "longName": "J’utilise le plus souvent les cycles courts à basse température pour laver le linge et la vaisselle.",
- "objective": false,
- "room": Array [
- 1,
- 3,
- 2,
- ],
- "season": "Sans saison",
- "shortName": "Accelerateur de particules",
- "usage": 5,
- "viewedInSelection": false,
- }
- }
- key="ECOGESTURE0013"
- />
- <WithStyles(ForwardRef(Button))
- classes={
- Object {
- "label": "text-16-normal",
- "root": "btn-secondary-negative",
- }
- }
- onClick={[MockFunction]}
- >
- <ForwardRef(Button)
- classes={
- Object {
- "colorInherit": "MuiButton-colorInherit",
- "contained": "MuiButton-contained",
- "containedPrimary": "MuiButton-containedPrimary",
- "containedSecondary": "MuiButton-containedSecondary",
- "containedSizeLarge": "MuiButton-containedSizeLarge",
- "containedSizeSmall": "MuiButton-containedSizeSmall",
- "disableElevation": "MuiButton-disableElevation",
- "disabled": "Mui-disabled",
- "endIcon": "MuiButton-endIcon",
- "focusVisible": "Mui-focusVisible",
- "fullWidth": "MuiButton-fullWidth",
- "iconSizeLarge": "MuiButton-iconSizeLarge",
- "iconSizeMedium": "MuiButton-iconSizeMedium",
- "iconSizeSmall": "MuiButton-iconSizeSmall",
- "label": "MuiButton-label text-16-normal",
- "outlined": "MuiButton-outlined",
- "outlinedPrimary": "MuiButton-outlinedPrimary",
- "outlinedSecondary": "MuiButton-outlinedSecondary",
- "outlinedSizeLarge": "MuiButton-outlinedSizeLarge",
- "outlinedSizeSmall": "MuiButton-outlinedSizeSmall",
- "root": "MuiButton-root btn-secondary-negative",
- "sizeLarge": "MuiButton-sizeLarge",
- "sizeSmall": "MuiButton-sizeSmall",
- "startIcon": "MuiButton-startIcon",
- "text": "MuiButton-text",
- "textPrimary": "MuiButton-textPrimary",
- "textSecondary": "MuiButton-textSecondary",
- "textSizeLarge": "MuiButton-textSizeLarge",
- "textSizeSmall": "MuiButton-textSizeSmall",
- }
- }
- onClick={[MockFunction]}
- >
- <WithStyles(ForwardRef(ButtonBase))
- className="MuiButton-root btn-secondary-negative MuiButton-text"
- component="button"
- disabled={false}
- focusRipple={true}
- focusVisibleClassName="Mui-focusVisible"
- onClick={[MockFunction]}
- type="button"
- >
- <ForwardRef(ButtonBase)
- className="MuiButton-root btn-secondary-negative MuiButton-text"
- classes={
- Object {
- "disabled": "Mui-disabled",
- "focusVisible": "Mui-focusVisible",
- "root": "MuiButtonBase-root",
- }
- }
- component="button"
- disabled={false}
- focusRipple={true}
- focusVisibleClassName="Mui-focusVisible"
- onClick={[MockFunction]}
- type="button"
- >
- <button
- className="MuiButtonBase-root MuiButton-root btn-secondary-negative MuiButton-text"
- disabled={false}
- onBlur={[Function]}
- onClick={[MockFunction]}
- onDragLeave={[Function]}
- onFocus={[Function]}
- onKeyDown={[Function]}
- onKeyUp={[Function]}
- onMouseDown={[Function]}
- onMouseLeave={[Function]}
- onMouseUp={[Function]}
- onTouchEnd={[Function]}
- onTouchMove={[Function]}
- onTouchStart={[Function]}
- tabIndex={0}
- type="button"
- >
- <span
- className="MuiButton-label text-16-normal"
- >
- ecogesture.reinit
- </span>
- <WithStyles(memo)
- center={false}
- >
- <ForwardRef(TouchRipple)
- center={false}
- classes={
- Object {
- "child": "MuiTouchRipple-child",
- "childLeaving": "MuiTouchRipple-childLeaving",
- "childPulsate": "MuiTouchRipple-childPulsate",
- "ripple": "MuiTouchRipple-ripple",
- "ripplePulsate": "MuiTouchRipple-ripplePulsate",
- "rippleVisible": "MuiTouchRipple-rippleVisible",
- "root": "MuiTouchRipple-root",
- }
- }
- >
- <span
- className="MuiTouchRipple-root"
- >
- <TransitionGroup
- childFactory={[Function]}
- component={null}
- exit={true}
- />
- </span>
- </ForwardRef(TouchRipple)>
- </WithStyles(memo)>
- </button>
- </ForwardRef(ButtonBase)>
- </WithStyles(ForwardRef(ButtonBase))>
- </ForwardRef(Button)>
- </WithStyles(ForwardRef(Button))>
- </div>
- </div>
- </EcogestureList>
- </Router>
- </BrowserRouter>
-</Provider>
+ </svg>
+ <span
+ class=""
+ >
+ ecogesture.MENU_TITLE
+ </span>
+ </span>
+ <span
+ class="MuiTouchRipple-root"
+ />
+ </button>
+ </div>
+ <div
+ class="ecogesture-content"
+ >
+ <mock-ecogesturecard
+ ecogesture="[object Object]"
+ />
+ <mock-ecogesturecard
+ ecogesture="[object Object]"
+ />
+ <mock-ecogesturecard
+ ecogesture="[object Object]"
+ />
+ <button
+ class="MuiButtonBase-root MuiButton-root MuiButton-text btnSecondary"
+ tabindex="0"
+ type="button"
+ >
+ <span
+ class="MuiButton-label"
+ >
+ ecogesture.reinit
+ </span>
+ <span
+ class="MuiTouchRipple-root"
+ />
+ </button>
+ </div>
+ </div>
+</div>
`;
diff --git a/src/components/Ecogesture/EcogestureList/ecogestureList.scss b/src/components/Ecogesture/EcogestureList/ecogestureList.scss
index b2785b9d4711053f4e4ea958f56a931b54769add..fc2b9f6fcc2ba03e8b74b182e9fee25a9f8ca175 100644
--- a/src/components/Ecogesture/EcogestureList/ecogestureList.scss
+++ b/src/components/Ecogesture/EcogestureList/ecogestureList.scss
@@ -20,76 +20,19 @@
display: flex;
align-items: center;
flex-direction: column;
+ gap: 1rem;
color: white;
text-align: center;
- button.btn-highlight {
- padding: 0.625rem;
- }
}
- .filters {
- display: flex;
- align-items: center;
- height: 50px;
- color: white;
- position: relative;
- .filter {
- height: 45px;
- display: flex;
- align-items: center;
- justify-content: flex-start;
- cursor: pointer;
- svg {
- margin-right: 1rem;
- }
- .checkicon {
- opacity: 0;
- margin-left: auto;
- transition: all 300ms ease;
- &.active {
- opacity: 1;
- }
- }
- }
- .ecogestures {
- font-size: 0.95rem;
- text-transform: initial;
+ .btnFilter {
+ max-width: 12rem;
+ justify-content: flex-start;
+ span {
padding-left: 0.5rem;
&.opened {
color: $gold-shadow;
}
}
- .filter-button {
- display: flex;
- .button.btn-secondary-negative {
- margin: auto;
- display: flex;
- align-items: center;
- span {
- display: inline-flex;
- margin-bottom: 0;
- transition: all 300ms ease;
- }
- svg {
- margin-right: 1rem;
- margin-left: -0.5rem;
- }
- }
- }
- }
-
- button.btn-secondary-negative {
- margin: 0;
- padding: 0.3rem 0.5rem;
- min-width: 11rem;
- height: 2.25rem;
- justify-content: left;
- &.btn-info {
- margin: 0 0 0 1rem;
- padding: 0;
- width: 2.25rem;
- min-width: 2.25rem;
- justify-content: center;
- }
}
}
.ecogesture-content {
@@ -99,9 +42,6 @@
animation: appear 600ms ease;
width: 100%;
gap: 1rem;
- @media #{$tablet} {
- gap: 0.5rem;
- }
@keyframes appear {
from {
diff --git a/src/components/Ecogesture/EcogestureModal/EcogestureModal.spec.tsx b/src/components/Ecogesture/EcogestureModal/EcogestureModal.spec.tsx
index 8cfd17faf6db498327f1a08d2520afb395bdd7c4..c1b52cc4ae8a501cf334847c1a5706b1f74ab65b 100644
--- a/src/components/Ecogesture/EcogestureModal/EcogestureModal.spec.tsx
+++ b/src/components/Ecogesture/EcogestureModal/EcogestureModal.spec.tsx
@@ -1,15 +1,14 @@
+import { render, screen, waitFor } from '@testing-library/react'
import EcogestureModal from 'components/Ecogesture/EcogestureModal/EcogestureModal'
-import { mount } from 'enzyme'
import React from 'react'
import { Provider } from 'react-redux'
import { mockedEcogesturesData } from 'tests/__mocks__/ecogesturesData.mock'
import { createMockEcolyoStore } from 'tests/__mocks__/store'
-import { waitForComponentToPaint } from 'tests/__mocks__/testUtils'
describe('EcogestureModal component', () => {
it('should be rendered correctly', async () => {
const store = createMockEcolyoStore()
- const wrapper = mount(
+ const { container } = render(
<Provider store={store}>
<EcogestureModal
open={true}
@@ -19,9 +18,9 @@ describe('EcogestureModal component', () => {
/>
</Provider>
)
- await waitForComponentToPaint(wrapper)
- expect(wrapper.find('.em-title').text()).toEqual(
- mockedEcogesturesData[0].shortName
- )
+ await waitFor(() => null, { container })
+ expect(
+ screen.getByText(mockedEcogesturesData[0].shortName)
+ ).toBeInTheDocument()
})
})
diff --git a/src/components/Ecogesture/EcogestureModal/EcogestureModal.tsx b/src/components/Ecogesture/EcogestureModal/EcogestureModal.tsx
index 7fa5418c050ce00a88afbfae0cb31fa04b18b9ba..ab7b5595c206e7bb4616f34ab170f7847df91e7c 100644
--- a/src/components/Ecogesture/EcogestureModal/EcogestureModal.tsx
+++ b/src/components/Ecogesture/EcogestureModal/EcogestureModal.tsx
@@ -95,14 +95,13 @@ const EcogestureModal = ({
<EfficiencyRating result={Math.round(ecogesture.efficiency)} />
</div>
<div className="em-picto-flow">
- {ecogesture.fluidTypes.map((fluid, index) => (
- <div key={index}>
- <StyledIcon
- className="em-pic-content"
- icon={getPicto(fluid)}
- size={25}
- />
- </div>
+ {ecogesture.fluidTypes.map(fluid => (
+ <StyledIcon
+ key={fluid}
+ className="em-pic-content"
+ icon={getPicto(fluid)}
+ size={25}
+ />
))}
</div>
</div>
@@ -112,10 +111,7 @@ const EcogestureModal = ({
aria-label={t(
'ecogesture_modal.accessibility.button_select_action'
)}
- classes={{
- root: 'btn-action-launch',
- label: 'text-16-bold',
- }}
+ className="btnPrimaryNegative"
onClick={selectEcogesture}
>
{t('ecogesture_modal.select_action')}
@@ -132,10 +128,7 @@ const EcogestureModal = ({
'ecogesture_modal.accessibility.button_see_more_detail'
)}
onClick={() => setShowDetails(prev => !prev)}
- classes={{
- root: 'btn-secondary-negative',
- label: 'text-14-normal',
- }}
+ className="btnSecondary"
>
{t(`ecogesture_modal.show_${showDetails ? 'less' : 'more'}`)}
</Button>
diff --git a/src/components/Ecogesture/EcogestureModal/ecogestureModal.scss b/src/components/Ecogesture/EcogestureModal/ecogestureModal.scss
index 1be2ce155464e3999491cf261bb78433fd904596..eced119a3f8059cb768e011ef12513ff3df71570 100644
--- a/src/components/Ecogesture/EcogestureModal/ecogestureModal.scss
+++ b/src/components/Ecogesture/EcogestureModal/ecogestureModal.scss
@@ -11,28 +11,16 @@
}
.em-root {
- overflow: auto;
- width: 100%;
display: flex;
- justify-content: center;
- /* width */
- &::-webkit-scrollbar {
- width: 10px;
- }
- /* Track */
- &::-webkit-scrollbar-track {
- background: $scrollbar-track;
- }
- /* Handle */
- &::-webkit-scrollbar-thumb {
- background: $scrollbar-thumb;
- }
+
.em-content {
padding: 1.5rem 2.5rem;
- width: 100%;
+
+ button {
+ margin-top: 1rem;
+ }
@media #{$large-phone} {
- width: 100%;
padding: 2rem;
}
.em-content-box-img {
@@ -84,17 +72,6 @@
text-align: center;
margin: 1.5rem 0 1rem;
}
-
- button.btn-action-launch {
- background: $blue-radial-gradient;
- border: none;
- border-radius: 2px;
- margin: 1.5rem 0 0;
- width: 100%;
- text-transform: none;
- cursor: pointer;
- padding: 0.6rem 0;
- }
}
}
.em-content-box-text {
@@ -117,14 +94,6 @@
margin-bottom: 0;
}
}
-.block {
- display: block !important;
-}
-.ecogesture-modal {
- button.btn-secondary-negative {
- margin: 1rem 0 1.5rem !important;
- }
-}
#accessibility-title {
display: none;
diff --git a/src/components/Ecogesture/EcogestureNotFound/EcogestureNotFound.spec.tsx b/src/components/Ecogesture/EcogestureNotFound/EcogestureNotFound.spec.tsx
index 9be727a778cd04ebaf2e275cca80ad241fe8f4b4..28d77f7ca042e4cd09c9c22769d48655913f13cc 100644
--- a/src/components/Ecogesture/EcogestureNotFound/EcogestureNotFound.spec.tsx
+++ b/src/components/Ecogesture/EcogestureNotFound/EcogestureNotFound.spec.tsx
@@ -1,7 +1,5 @@
-/* eslint-disable react/display-name */
-import { Button } from '@material-ui/core'
-import { mount } from 'enzyme'
-import toJson from 'enzyme-to-json'
+import { render, screen } from '@testing-library/react'
+import { userEvent } from '@testing-library/user-event'
import React from 'react'
import EcogestureNotFound from './EcogestureNotFound'
@@ -17,17 +15,14 @@ jest.mock('components/Content/Content', () => 'mock-content')
describe('EcogestureNotFound component', () => {
it('should be rendered correctly', async () => {
- const wrapper = mount(
+ const { container } = render(
<EcogestureNotFound text="test" returnPage="ecogestures" />
)
-
- expect(toJson(wrapper)).toMatchSnapshot()
+ expect(container).toMatchSnapshot()
})
- it('should click on button and be redirected', () => {
- const wrapper = mount(
- <EcogestureNotFound text="test" returnPage="ecogestures" />
- )
- wrapper.find(Button).simulate('click')
+ it('should click on button and be redirected', async () => {
+ render(<EcogestureNotFound text="test" returnPage="ecogestures" />)
+ await userEvent.click(screen.getByRole('button'))
expect(mockedNavigate).toHaveBeenCalledWith('/ecogestures')
})
})
diff --git a/src/components/Ecogesture/EcogestureNotFound/EcogestureNotFound.tsx b/src/components/Ecogesture/EcogestureNotFound/EcogestureNotFound.tsx
index 3c1ac059eac4a6918cee3f152da6ee5628a524ec..78ef552bf893e62b384b11b20cb1274ab607098a 100644
--- a/src/components/Ecogesture/EcogestureNotFound/EcogestureNotFound.tsx
+++ b/src/components/Ecogesture/EcogestureNotFound/EcogestureNotFound.tsx
@@ -35,12 +35,7 @@ const EcogestureNotFound = ({
<Button
aria-label={t('error_page.back')}
onClick={() => navigate(`/${returnPage}`)}
- variant="contained"
- classes={{
- root: 'btn-highlight',
- label: 'text-18-bold',
- }}
- type="submit"
+ className="btnPrimary"
>
{t('error_page.back')}
</Button>
diff --git a/src/components/Ecogesture/EcogestureNotFound/__snapshots__/EcogestureNotFound.spec.tsx.snap b/src/components/Ecogesture/EcogestureNotFound/__snapshots__/EcogestureNotFound.spec.tsx.snap
index fe29324f57d34c47b991df4cbeb5524913c797b5..a991c215c20992f6faf548741dfa93c8fe97e850 100644
--- a/src/components/Ecogesture/EcogestureNotFound/__snapshots__/EcogestureNotFound.spec.tsx.snap
+++ b/src/components/Ecogesture/EcogestureNotFound/__snapshots__/EcogestureNotFound.spec.tsx.snap
@@ -1,197 +1,50 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`EcogestureNotFound component should be rendered correctly 1`] = `
-<EcogestureNotFound
- returnPage="ecogestures"
- text="test"
->
+<div>
<mock-cozybar
- titleKey="error_page.main"
+ titlekey="error_page.main"
/>
<mock-header
- desktopTitleKey="error_page.main"
- setHeaderHeight={[Function]}
+ desktoptitlekey="error_page.main"
/>
<mock-content
- heightOffset={0}
+ heightoffset="0"
>
<div
- className="error-container"
+ class="error-container"
>
- <StyledIcon
- className="profile-icon"
- icon="test-file-stub"
- size={250}
+ <svg
+ aria-hidden="true"
+ class="profile-icon styles__icon___23x3R"
+ height="250"
+ width="250"
>
- <Icon
- aria-hidden={true}
- className="profile-icon"
- icon="test-file-stub"
- size={250}
- spin={false}
- >
- <Component
- aria-hidden={true}
- className="profile-icon styles__icon___23x3R"
- height={250}
- style={Object {}}
- width={250}
- >
- <svg
- aria-hidden={true}
- className="profile-icon styles__icon___23x3R"
- height={250}
- style={Object {}}
- width={250}
- >
- <use
- xlinkHref="#test-file-stub"
- />
- </svg>
- </Component>
- </Icon>
- </StyledIcon>
+ <use
+ xlink:href="#test-file-stub"
+ />
+ </svg>
<div
- className="text-18-bold head"
+ class="text-18-bold head"
>
test
</div>
- <WithStyles(ForwardRef(Button))
+ <button
aria-label="error_page.back"
- classes={
- Object {
- "label": "text-18-bold",
- "root": "btn-highlight",
- }
- }
- onClick={[Function]}
- type="submit"
- variant="contained"
+ class="MuiButtonBase-root MuiButton-root MuiButton-text btnPrimary"
+ tabindex="0"
+ type="button"
>
- <ForwardRef(Button)
- aria-label="error_page.back"
- classes={
- Object {
- "colorInherit": "MuiButton-colorInherit",
- "contained": "MuiButton-contained",
- "containedPrimary": "MuiButton-containedPrimary",
- "containedSecondary": "MuiButton-containedSecondary",
- "containedSizeLarge": "MuiButton-containedSizeLarge",
- "containedSizeSmall": "MuiButton-containedSizeSmall",
- "disableElevation": "MuiButton-disableElevation",
- "disabled": "Mui-disabled",
- "endIcon": "MuiButton-endIcon",
- "focusVisible": "Mui-focusVisible",
- "fullWidth": "MuiButton-fullWidth",
- "iconSizeLarge": "MuiButton-iconSizeLarge",
- "iconSizeMedium": "MuiButton-iconSizeMedium",
- "iconSizeSmall": "MuiButton-iconSizeSmall",
- "label": "MuiButton-label text-18-bold",
- "outlined": "MuiButton-outlined",
- "outlinedPrimary": "MuiButton-outlinedPrimary",
- "outlinedSecondary": "MuiButton-outlinedSecondary",
- "outlinedSizeLarge": "MuiButton-outlinedSizeLarge",
- "outlinedSizeSmall": "MuiButton-outlinedSizeSmall",
- "root": "MuiButton-root btn-highlight",
- "sizeLarge": "MuiButton-sizeLarge",
- "sizeSmall": "MuiButton-sizeSmall",
- "startIcon": "MuiButton-startIcon",
- "text": "MuiButton-text",
- "textPrimary": "MuiButton-textPrimary",
- "textSecondary": "MuiButton-textSecondary",
- "textSizeLarge": "MuiButton-textSizeLarge",
- "textSizeSmall": "MuiButton-textSizeSmall",
- }
- }
- onClick={[Function]}
- type="submit"
- variant="contained"
+ <span
+ class="MuiButton-label"
>
- <WithStyles(ForwardRef(ButtonBase))
- aria-label="error_page.back"
- className="MuiButton-root btn-highlight MuiButton-contained"
- component="button"
- disabled={false}
- focusRipple={true}
- focusVisibleClassName="Mui-focusVisible"
- onClick={[Function]}
- type="submit"
- >
- <ForwardRef(ButtonBase)
- aria-label="error_page.back"
- className="MuiButton-root btn-highlight MuiButton-contained"
- classes={
- Object {
- "disabled": "Mui-disabled",
- "focusVisible": "Mui-focusVisible",
- "root": "MuiButtonBase-root",
- }
- }
- component="button"
- disabled={false}
- focusRipple={true}
- focusVisibleClassName="Mui-focusVisible"
- onClick={[Function]}
- type="submit"
- >
- <button
- aria-label="error_page.back"
- className="MuiButtonBase-root MuiButton-root btn-highlight MuiButton-contained"
- disabled={false}
- onBlur={[Function]}
- onClick={[Function]}
- onDragLeave={[Function]}
- onFocus={[Function]}
- onKeyDown={[Function]}
- onKeyUp={[Function]}
- onMouseDown={[Function]}
- onMouseLeave={[Function]}
- onMouseUp={[Function]}
- onTouchEnd={[Function]}
- onTouchMove={[Function]}
- onTouchStart={[Function]}
- tabIndex={0}
- type="submit"
- >
- <span
- className="MuiButton-label text-18-bold"
- >
- error_page.back
- </span>
- <WithStyles(memo)
- center={false}
- >
- <ForwardRef(TouchRipple)
- center={false}
- classes={
- Object {
- "child": "MuiTouchRipple-child",
- "childLeaving": "MuiTouchRipple-childLeaving",
- "childPulsate": "MuiTouchRipple-childPulsate",
- "ripple": "MuiTouchRipple-ripple",
- "ripplePulsate": "MuiTouchRipple-ripplePulsate",
- "rippleVisible": "MuiTouchRipple-rippleVisible",
- "root": "MuiTouchRipple-root",
- }
- }
- >
- <span
- className="MuiTouchRipple-root"
- >
- <TransitionGroup
- childFactory={[Function]}
- component={null}
- exit={true}
- />
- </span>
- </ForwardRef(TouchRipple)>
- </WithStyles(memo)>
- </button>
- </ForwardRef(ButtonBase)>
- </WithStyles(ForwardRef(ButtonBase))>
- </ForwardRef(Button)>
- </WithStyles(ForwardRef(Button))>
+ error_page.back
+ </span>
+ <span
+ class="MuiTouchRipple-root"
+ />
+ </button>
</div>
</mock-content>
-</EcogestureNotFound>
+</div>
`;
diff --git a/src/components/Ecogesture/EcogestureNotFound/ecogestureNotFound.scss b/src/components/Ecogesture/EcogestureNotFound/ecogestureNotFound.scss
index 3724f53ad83c13f77cf694c5c5e83a154b2effd8..3cfaff18738b48579f071013a053bbd744e8af3a 100644
--- a/src/components/Ecogesture/EcogestureNotFound/ecogestureNotFound.scss
+++ b/src/components/Ecogesture/EcogestureNotFound/ecogestureNotFound.scss
@@ -5,6 +5,7 @@
flex-direction: column;
align-items: center;
justify-content: center;
+ gap: 1rem;
max-width: 450px;
margin: auto;
padding: 2rem;
diff --git a/src/components/Ecogesture/EcogestureReinitModal/EcogestureReinitModal.spec.tsx b/src/components/Ecogesture/EcogestureReinitModal/EcogestureReinitModal.spec.tsx
index 5f9148b0379bd6bb81982b521e23bd2b3e489304..a37d0c48f64a214b5eddc8553bfaa81331dc50c6 100644
--- a/src/components/Ecogesture/EcogestureReinitModal/EcogestureReinitModal.spec.tsx
+++ b/src/components/Ecogesture/EcogestureReinitModal/EcogestureReinitModal.spec.tsx
@@ -1,17 +1,16 @@
-import { mount } from 'enzyme'
-import toJson from 'enzyme-to-json'
+import { render } from '@testing-library/react'
import React from 'react'
import EcogestureReinitModal from './EcogestureReinitModal'
describe('EcogestureReinitModal component', () => {
it('should be rendered correctly', async () => {
- const wrapper = mount(
+ const { baseElement } = render(
<EcogestureReinitModal
open={true}
handleCloseClick={jest.fn()}
handleLaunchReinit={jest.fn()}
/>
)
- expect(toJson(wrapper)).toMatchSnapshot()
+ expect(baseElement).toMatchSnapshot()
})
})
diff --git a/src/components/Ecogesture/EcogestureReinitModal/EcogestureReinitModal.tsx b/src/components/Ecogesture/EcogestureReinitModal/EcogestureReinitModal.tsx
index c924c3e4d9c1fa90db03b4bd82faaf481593aebf..6fa3b3934dffa31e4bf02f7c1c259422ae54c2d9 100644
--- a/src/components/Ecogesture/EcogestureReinitModal/EcogestureReinitModal.tsx
+++ b/src/components/Ecogesture/EcogestureReinitModal/EcogestureReinitModal.tsx
@@ -65,21 +65,14 @@ const EcogestureReinitModal = ({
<Button
aria-label={t('ecogesture.reinitModal.btn1')}
onClick={handleCloseClick}
- className="btn1"
- classes={{
- root: 'btn-secondary-negative',
- label: 'text-16-bold',
- }}
+ className="btnSecondary"
>
{t('ecogesture.reinitModal.btn1')}
</Button>
<Button
aria-label={t('ecogesture.reinitModal.btn2')}
onClick={handleLaunchReinit}
- classes={{
- root: 'btn-profile-next rounded',
- label: 'text-16-bold',
- }}
+ className="btnPrimary"
>
{t('ecogesture.reinitModal.btn2')}
</Button>
diff --git a/src/components/Ecogesture/EcogestureReinitModal/__snapshots__/EcogestureReinitModal.spec.tsx.snap b/src/components/Ecogesture/EcogestureReinitModal/__snapshots__/EcogestureReinitModal.spec.tsx.snap
index 12cb41c346cf16d5b767e330745da2065ccb2577..18d92802a010d3557aee5ec1a19713867e41f0d7 100644
--- a/src/components/Ecogesture/EcogestureReinitModal/__snapshots__/EcogestureReinitModal.spec.tsx.snap
+++ b/src/components/Ecogesture/EcogestureReinitModal/__snapshots__/EcogestureReinitModal.spec.tsx.snap
@@ -1,1196 +1,150 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`EcogestureReinitModal component should be rendered correctly 1`] = `
-<EcogestureReinitModal
- handleCloseClick={[MockFunction]}
- handleLaunchReinit={[MockFunction]}
- open={true}
+<body
+ style="padding-right: 0px; overflow: hidden;"
>
- <WithStyles(ForwardRef(Dialog))
- aria-labelledby="accessibility-title"
- classes={
- Object {
- "paper": "modal-paper",
- "root": "modal-root",
- }
- }
- onClose={[MockFunction]}
- open={true}
+ <div
+ aria-hidden="true"
+ />
+ <div
+ class="MuiDialog-root modal-root"
+ role="presentation"
+ style="position: fixed; z-index: 1300; right: 0px; bottom: 0px; top: 0px; left: 0px;"
>
- <ForwardRef(Dialog)
- aria-labelledby="accessibility-title"
- classes={
- Object {
- "container": "MuiDialog-container",
- "paper": "MuiDialog-paper modal-paper",
- "paperFullScreen": "MuiDialog-paperFullScreen",
- "paperFullWidth": "MuiDialog-paperFullWidth",
- "paperScrollBody": "MuiDialog-paperScrollBody",
- "paperScrollPaper": "MuiDialog-paperScrollPaper",
- "paperWidthFalse": "MuiDialog-paperWidthFalse",
- "paperWidthLg": "MuiDialog-paperWidthLg",
- "paperWidthMd": "MuiDialog-paperWidthMd",
- "paperWidthSm": "MuiDialog-paperWidthSm",
- "paperWidthXl": "MuiDialog-paperWidthXl",
- "paperWidthXs": "MuiDialog-paperWidthXs",
- "root": "MuiDialog-root modal-root",
- "scrollBody": "MuiDialog-scrollBody",
- "scrollPaper": "MuiDialog-scrollPaper",
- }
- }
- onClose={[MockFunction]}
- open={true}
+ <div
+ aria-hidden="true"
+ class="MuiBackdrop-root"
+ style="opacity: 1; webkit-transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"
+ />
+ <div
+ data-test="sentinelStart"
+ tabindex="0"
+ />
+ <div
+ class="MuiDialog-container MuiDialog-scrollPaper"
+ role="none presentation"
+ style="opacity: 1; webkit-transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"
+ tabindex="-1"
>
- <ForwardRef(Modal)
- BackdropComponent={
- Object {
- "$$typeof": Symbol(react.forward_ref),
- "Naked": Object {
- "$$typeof": Symbol(react.forward_ref),
- "propTypes": Object {
- "children": [Function],
- "className": [Function],
- "classes": [Function],
- "invisible": [Function],
- "open": [Function],
- "transitionDuration": [Function],
- },
- "render": [Function],
- },
- "displayName": "WithStyles(ForwardRef(Backdrop))",
- "options": Object {
- "defaultTheme": Object {
- "breakpoints": Object {
- "between": [Function],
- "down": [Function],
- "keys": Array [
- "xs",
- "sm",
- "md",
- "lg",
- "xl",
- ],
- "only": [Function],
- "up": [Function],
- "values": Object {
- "lg": 1280,
- "md": 960,
- "sm": 600,
- "xl": 1920,
- "xs": 0,
- },
- "width": [Function],
- },
- "direction": "ltr",
- "mixins": Object {
- "gutters": [Function],
- "toolbar": Object {
- "@media (min-width:0px) and (orientation: landscape)": Object {
- "minHeight": 48,
- },
- "@media (min-width:600px)": Object {
- "minHeight": 64,
- },
- "minHeight": 56,
- },
- },
- "overrides": Object {},
- "palette": Object {
- "action": Object {
- "activatedOpacity": 0.12,
- "active": "rgba(0, 0, 0, 0.54)",
- "disabled": "rgba(0, 0, 0, 0.26)",
- "disabledBackground": "rgba(0, 0, 0, 0.12)",
- "disabledOpacity": 0.38,
- "focus": "rgba(0, 0, 0, 0.12)",
- "focusOpacity": 0.12,
- "hover": "rgba(0, 0, 0, 0.04)",
- "hoverOpacity": 0.04,
- "selected": "rgba(0, 0, 0, 0.08)",
- "selectedOpacity": 0.08,
- },
- "augmentColor": [Function],
- "background": Object {
- "default": "#fafafa",
- "paper": "#fff",
- },
- "common": Object {
- "black": "#000",
- "white": "#fff",
- },
- "contrastThreshold": 3,
- "divider": "rgba(0, 0, 0, 0.12)",
- "error": Object {
- "contrastText": "#fff",
- "dark": "#d32f2f",
- "light": "#e57373",
- "main": "#f44336",
- },
- "getContrastText": [Function],
- "grey": Object {
- "100": "#f5f5f5",
- "200": "#eeeeee",
- "300": "#e0e0e0",
- "400": "#bdbdbd",
- "50": "#fafafa",
- "500": "#9e9e9e",
- "600": "#757575",
- "700": "#616161",
- "800": "#424242",
- "900": "#212121",
- "A100": "#d5d5d5",
- "A200": "#aaaaaa",
- "A400": "#303030",
- "A700": "#616161",
- },
- "info": Object {
- "contrastText": "#fff",
- "dark": "#1976d2",
- "light": "#64b5f6",
- "main": "#2196f3",
- },
- "primary": Object {
- "contrastText": "#fff",
- "dark": "#303f9f",
- "light": "#7986cb",
- "main": "#3f51b5",
- },
- "secondary": Object {
- "contrastText": "#fff",
- "dark": "#c51162",
- "light": "#ff4081",
- "main": "#f50057",
- },
- "success": Object {
- "contrastText": "rgba(0, 0, 0, 0.87)",
- "dark": "#388e3c",
- "light": "#81c784",
- "main": "#4caf50",
- },
- "text": Object {
- "disabled": "rgba(0, 0, 0, 0.38)",
- "hint": "rgba(0, 0, 0, 0.38)",
- "primary": "rgba(0, 0, 0, 0.87)",
- "secondary": "rgba(0, 0, 0, 0.54)",
- },
- "tonalOffset": 0.2,
- "type": "light",
- "warning": Object {
- "contrastText": "rgba(0, 0, 0, 0.87)",
- "dark": "#f57c00",
- "light": "#ffb74d",
- "main": "#ff9800",
- },
- },
- "props": Object {},
- "shadows": Array [
- "none",
- "0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12)",
- "0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12)",
- "0px 3px 3px -2px rgba(0,0,0,0.2),0px 3px 4px 0px rgba(0,0,0,0.14),0px 1px 8px 0px rgba(0,0,0,0.12)",
- "0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12)",
- "0px 3px 5px -1px rgba(0,0,0,0.2),0px 5px 8px 0px rgba(0,0,0,0.14),0px 1px 14px 0px rgba(0,0,0,0.12)",
- "0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12)",
- "0px 4px 5px -2px rgba(0,0,0,0.2),0px 7px 10px 1px rgba(0,0,0,0.14),0px 2px 16px 1px rgba(0,0,0,0.12)",
- "0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12)",
- "0px 5px 6px -3px rgba(0,0,0,0.2),0px 9px 12px 1px rgba(0,0,0,0.14),0px 3px 16px 2px rgba(0,0,0,0.12)",
- "0px 6px 6px -3px rgba(0,0,0,0.2),0px 10px 14px 1px rgba(0,0,0,0.14),0px 4px 18px 3px rgba(0,0,0,0.12)",
- "0px 6px 7px -4px rgba(0,0,0,0.2),0px 11px 15px 1px rgba(0,0,0,0.14),0px 4px 20px 3px rgba(0,0,0,0.12)",
- "0px 7px 8px -4px rgba(0,0,0,0.2),0px 12px 17px 2px rgba(0,0,0,0.14),0px 5px 22px 4px rgba(0,0,0,0.12)",
- "0px 7px 8px -4px rgba(0,0,0,0.2),0px 13px 19px 2px rgba(0,0,0,0.14),0px 5px 24px 4px rgba(0,0,0,0.12)",
- "0px 7px 9px -4px rgba(0,0,0,0.2),0px 14px 21px 2px rgba(0,0,0,0.14),0px 5px 26px 4px rgba(0,0,0,0.12)",
- "0px 8px 9px -5px rgba(0,0,0,0.2),0px 15px 22px 2px rgba(0,0,0,0.14),0px 6px 28px 5px rgba(0,0,0,0.12)",
- "0px 8px 10px -5px rgba(0,0,0,0.2),0px 16px 24px 2px rgba(0,0,0,0.14),0px 6px 30px 5px rgba(0,0,0,0.12)",
- "0px 8px 11px -5px rgba(0,0,0,0.2),0px 17px 26px 2px rgba(0,0,0,0.14),0px 6px 32px 5px rgba(0,0,0,0.12)",
- "0px 9px 11px -5px rgba(0,0,0,0.2),0px 18px 28px 2px rgba(0,0,0,0.14),0px 7px 34px 6px rgba(0,0,0,0.12)",
- "0px 9px 12px -6px rgba(0,0,0,0.2),0px 19px 29px 2px rgba(0,0,0,0.14),0px 7px 36px 6px rgba(0,0,0,0.12)",
- "0px 10px 13px -6px rgba(0,0,0,0.2),0px 20px 31px 3px rgba(0,0,0,0.14),0px 8px 38px 7px rgba(0,0,0,0.12)",
- "0px 10px 13px -6px rgba(0,0,0,0.2),0px 21px 33px 3px rgba(0,0,0,0.14),0px 8px 40px 7px rgba(0,0,0,0.12)",
- "0px 10px 14px -6px rgba(0,0,0,0.2),0px 22px 35px 3px rgba(0,0,0,0.14),0px 8px 42px 7px rgba(0,0,0,0.12)",
- "0px 11px 14px -7px rgba(0,0,0,0.2),0px 23px 36px 3px rgba(0,0,0,0.14),0px 9px 44px 8px rgba(0,0,0,0.12)",
- "0px 11px 15px -7px rgba(0,0,0,0.2),0px 24px 38px 3px rgba(0,0,0,0.14),0px 9px 46px 8px rgba(0,0,0,0.12)",
- ],
- "shape": Object {
- "borderRadius": 4,
- },
- "spacing": [Function],
- "transitions": Object {
- "create": [Function],
- "duration": Object {
- "complex": 375,
- "enteringScreen": 225,
- "leavingScreen": 195,
- "short": 250,
- "shorter": 200,
- "shortest": 150,
- "standard": 300,
- },
- "easing": Object {
- "easeIn": "cubic-bezier(0.4, 0, 1, 1)",
- "easeInOut": "cubic-bezier(0.4, 0, 0.2, 1)",
- "easeOut": "cubic-bezier(0.0, 0, 0.2, 1)",
- "sharp": "cubic-bezier(0.4, 0, 0.6, 1)",
- },
- "getAutoHeightDuration": [Function],
- },
- "typography": Object {
- "body1": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "1rem",
- "fontWeight": 400,
- "letterSpacing": "0.00938em",
- "lineHeight": 1.5,
- },
- "body2": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "0.875rem",
- "fontWeight": 400,
- "letterSpacing": "0.01071em",
- "lineHeight": 1.43,
- },
- "button": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "0.875rem",
- "fontWeight": 500,
- "letterSpacing": "0.02857em",
- "lineHeight": 1.75,
- "textTransform": "uppercase",
- },
- "caption": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "0.75rem",
- "fontWeight": 400,
- "letterSpacing": "0.03333em",
- "lineHeight": 1.66,
- },
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": 14,
- "fontWeightBold": 700,
- "fontWeightLight": 300,
- "fontWeightMedium": 500,
- "fontWeightRegular": 400,
- "h1": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "6rem",
- "fontWeight": 300,
- "letterSpacing": "-0.01562em",
- "lineHeight": 1.167,
- },
- "h2": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "3.75rem",
- "fontWeight": 300,
- "letterSpacing": "-0.00833em",
- "lineHeight": 1.2,
- },
- "h3": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "3rem",
- "fontWeight": 400,
- "letterSpacing": "0em",
- "lineHeight": 1.167,
- },
- "h4": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "2.125rem",
- "fontWeight": 400,
- "letterSpacing": "0.00735em",
- "lineHeight": 1.235,
- },
- "h5": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "1.5rem",
- "fontWeight": 400,
- "letterSpacing": "0em",
- "lineHeight": 1.334,
- },
- "h6": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "1.25rem",
- "fontWeight": 500,
- "letterSpacing": "0.0075em",
- "lineHeight": 1.6,
- },
- "htmlFontSize": 16,
- "overline": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "0.75rem",
- "fontWeight": 400,
- "letterSpacing": "0.08333em",
- "lineHeight": 2.66,
- "textTransform": "uppercase",
- },
- "pxToRem": [Function],
- "round": [Function],
- "subtitle1": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "1rem",
- "fontWeight": 400,
- "letterSpacing": "0.00938em",
- "lineHeight": 1.75,
- },
- "subtitle2": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "0.875rem",
- "fontWeight": 500,
- "letterSpacing": "0.00714em",
- "lineHeight": 1.57,
- },
- },
- "zIndex": Object {
- "appBar": 1100,
- "drawer": 1200,
- "mobileStepper": 1000,
- "modal": 1300,
- "snackbar": 1400,
- "speedDial": 1050,
- "tooltip": 1500,
- },
- },
- "name": "MuiBackdrop",
- },
- "propTypes": Object {
- "classes": [Function],
- "innerRef": [Function],
- },
- "render": [Function],
- "useStyles": [Function],
- }
- }
- BackdropProps={
- Object {
- "transitionDuration": Object {
- "enter": 225,
- "exit": 195,
- },
- }
- }
- className="MuiDialog-root modal-root"
- closeAfterTransition={true}
- disableEscapeKeyDown={false}
- onClose={[MockFunction]}
- open={true}
+ <div
+ aria-labelledby="accessibility-title"
+ class="MuiPaper-root MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm MuiPaper-elevation24 MuiPaper-rounded"
+ role="dialog"
>
- <ForwardRef(Portal)
- disablePortal={false}
+ <div
+ id="accessibility-title"
>
- <Portal
- containerInfo={
- <body
- style="padding-right: 0px; overflow: hidden;"
- >
- <div
- class="MuiDialog-root modal-root"
- role="presentation"
- style="position: fixed; z-index: 1300; right: 0px; bottom: 0px; top: 0px; left: 0px;"
- >
- <div
- aria-hidden="true"
- class="MuiBackdrop-root"
- style="opacity: 1; webkit-transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"
- />
- <div
- data-test="sentinelStart"
- tabindex="0"
- />
- <div
- class="MuiDialog-container MuiDialog-scrollPaper"
- role="none presentation"
- style="opacity: 1; webkit-transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"
- tabindex="-1"
- >
- <div
- aria-labelledby="accessibility-title"
- class="MuiPaper-root MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm MuiPaper-elevation24 MuiPaper-rounded"
- role="dialog"
- >
- <div
- id="accessibility-title"
- >
- feedback.accessibility.window_title
- </div>
- <button
- aria-label="feedback.accessibility.button_close"
- class="MuiButtonBase-root MuiIconButton-root modal-paper-close-button"
- tabindex="0"
- type="button"
- >
- <span
- class="MuiIconButton-label"
- >
- <svg
- class="styles__icon___23x3R"
- height="16"
- width="16"
- >
- <use
- xlink:href="#test-file-stub"
- />
- </svg>
- </span>
- <span
- class="MuiTouchRipple-root"
- />
- </button>
- <div
- class="eg-reinit-modal"
- >
- <svg
- class="styles__icon___23x3R"
- height="63"
- width="63"
- >
- <use
- xlink:href="#test-file-stub"
- />
- </svg>
- <div
- class="title text-20-bold"
- >
- ecogesture.reinitModal.title_part1
- <span
- class="warn-title"
- >
- ecogesture.reinitModal.title_part2
- </span>
- ecogesture.reinitModal.title_part3
- <span
- class="warn-title"
- >
- ecogesture.reinitModal.title_part4
- </span>
- ecogesture.reinitModal.title_part5
- <span
- class="warn-title"
- >
- ecogesture.reinitModal.title_part6
- </span>
- </div>
- <div
- class="text-16-normal text"
- >
- ecogesture.reinitModal.text1
- </div>
- <div
- class="text-16-bold text"
- >
- ecogesture.reinitModal.text2
- </div>
- <div
- class="buttons-container"
- >
- <button
- aria-label="ecogesture.reinitModal.btn1"
- class="MuiButtonBase-root MuiButton-root btn-secondary-negative MuiButton-text btn1"
- tabindex="0"
- type="button"
- >
- <span
- class="MuiButton-label text-16-bold"
- >
- ecogesture.reinitModal.btn1
- </span>
- <span
- class="MuiTouchRipple-root"
- />
- </button>
- <button
- aria-label="ecogesture.reinitModal.btn2"
- class="MuiButtonBase-root MuiButton-root btn-profile-next rounded MuiButton-text"
- tabindex="0"
- type="button"
- >
- <span
- class="MuiButton-label text-16-bold"
- >
- ecogesture.reinitModal.btn2
- </span>
- <span
- class="MuiTouchRipple-root"
- />
- </button>
- </div>
- </div>
- </div>
- </div>
- <div
- data-test="sentinelEnd"
- tabindex="0"
- />
- </div>
- </body>
- }
+ feedback.accessibility.window_title
+ </div>
+ <button
+ aria-label="feedback.accessibility.button_close"
+ class="MuiButtonBase-root MuiIconButton-root modal-paper-close-button"
+ tabindex="0"
+ type="button"
+ >
+ <span
+ class="MuiIconButton-label"
>
- <div
- className="MuiDialog-root modal-root"
- onKeyDown={[Function]}
- role="presentation"
- style={
- Object {
- "bottom": 0,
- "left": 0,
- "position": "fixed",
- "right": 0,
- "top": 0,
- "zIndex": 1300,
- }
- }
+ <svg
+ class="styles__icon___23x3R"
+ height="16"
+ width="16"
+ >
+ <use
+ xlink:href="#test-file-stub"
+ />
+ </svg>
+ </span>
+ <span
+ class="MuiTouchRipple-root"
+ />
+ </button>
+ <div
+ class="eg-reinit-modal"
+ >
+ <svg
+ class="styles__icon___23x3R"
+ height="63"
+ width="63"
+ >
+ <use
+ xlink:href="#test-file-stub"
+ />
+ </svg>
+ <div
+ class="title text-20-bold"
+ >
+ ecogesture.reinitModal.title_part1
+ <span
+ class="warn-title"
+ >
+ ecogesture.reinitModal.title_part2
+ </span>
+ ecogesture.reinitModal.title_part3
+ <span
+ class="warn-title"
>
- <WithStyles(ForwardRef(Backdrop))
- onClick={[Function]}
- open={true}
- transitionDuration={
- Object {
- "enter": 225,
- "exit": 195,
- }
- }
+ ecogesture.reinitModal.title_part4
+ </span>
+ ecogesture.reinitModal.title_part5
+ <span
+ class="warn-title"
+ >
+ ecogesture.reinitModal.title_part6
+ </span>
+ </div>
+ <div
+ class="text-16-normal text"
+ >
+ ecogesture.reinitModal.text1
+ </div>
+ <div
+ class="text-16-bold text"
+ >
+ ecogesture.reinitModal.text2
+ </div>
+ <div
+ class="buttons-container"
+ >
+ <button
+ aria-label="ecogesture.reinitModal.btn1"
+ class="MuiButtonBase-root MuiButton-root MuiButton-text btnSecondary"
+ tabindex="0"
+ type="button"
+ >
+ <span
+ class="MuiButton-label"
>
- <ForwardRef(Backdrop)
- classes={
- Object {
- "invisible": "MuiBackdrop-invisible",
- "root": "MuiBackdrop-root",
- }
- }
- onClick={[Function]}
- open={true}
- transitionDuration={
- Object {
- "enter": 225,
- "exit": 195,
- }
- }
- >
- <ForwardRef(Fade)
- in={true}
- onClick={[Function]}
- timeout={
- Object {
- "enter": 225,
- "exit": 195,
- }
- }
- >
- <Transition
- appear={true}
- enter={true}
- exit={true}
- in={true}
- mountOnEnter={false}
- onClick={[Function]}
- onEnter={[Function]}
- onEntered={[Function]}
- onEntering={[Function]}
- onExit={[Function]}
- onExited={[Function]}
- onExiting={[Function]}
- timeout={
- Object {
- "enter": 225,
- "exit": 195,
- }
- }
- unmountOnExit={false}
- >
- <div
- aria-hidden={true}
- className="MuiBackdrop-root"
- onClick={[Function]}
- style={
- Object {
- "opacity": 1,
- "visibility": undefined,
- }
- }
- />
- </Transition>
- </ForwardRef(Fade)>
- </ForwardRef(Backdrop)>
- </WithStyles(ForwardRef(Backdrop))>
- <Unstable_TrapFocus
- disableAutoFocus={false}
- disableEnforceFocus={false}
- disableRestoreFocus={false}
- getDoc={[Function]}
- isEnabled={[Function]}
- open={true}
+ ecogesture.reinitModal.btn1
+ </span>
+ <span
+ class="MuiTouchRipple-root"
+ />
+ </button>
+ <button
+ aria-label="ecogesture.reinitModal.btn2"
+ class="MuiButtonBase-root MuiButton-root MuiButton-text btnPrimary"
+ tabindex="0"
+ type="button"
+ >
+ <span
+ class="MuiButton-label"
>
- <div
- data-test="sentinelStart"
- tabIndex={0}
- />
- <ForwardRef(Fade)
- appear={true}
- in={true}
- onEnter={[Function]}
- onExited={[Function]}
- role="none presentation"
- tabIndex="-1"
- timeout={
- Object {
- "enter": 225,
- "exit": 195,
- }
- }
- >
- <Transition
- appear={true}
- enter={true}
- exit={true}
- in={true}
- mountOnEnter={false}
- onEnter={[Function]}
- onEntered={[Function]}
- onEntering={[Function]}
- onExit={[Function]}
- onExited={[Function]}
- onExiting={[Function]}
- role="none presentation"
- tabIndex="-1"
- timeout={
- Object {
- "enter": 225,
- "exit": 195,
- }
- }
- unmountOnExit={false}
- >
- <div
- className="MuiDialog-container MuiDialog-scrollPaper"
- onMouseDown={[Function]}
- onMouseUp={[Function]}
- role="none presentation"
- style={
- Object {
- "opacity": 1,
- "visibility": undefined,
- }
- }
- tabIndex="-1"
- >
- <WithStyles(ForwardRef(Paper))
- aria-labelledby="accessibility-title"
- className="MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm"
- elevation={24}
- role="dialog"
- >
- <ForwardRef(Paper)
- aria-labelledby="accessibility-title"
- className="MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm"
- classes={
- Object {
- "elevation0": "MuiPaper-elevation0",
- "elevation1": "MuiPaper-elevation1",
- "elevation10": "MuiPaper-elevation10",
- "elevation11": "MuiPaper-elevation11",
- "elevation12": "MuiPaper-elevation12",
- "elevation13": "MuiPaper-elevation13",
- "elevation14": "MuiPaper-elevation14",
- "elevation15": "MuiPaper-elevation15",
- "elevation16": "MuiPaper-elevation16",
- "elevation17": "MuiPaper-elevation17",
- "elevation18": "MuiPaper-elevation18",
- "elevation19": "MuiPaper-elevation19",
- "elevation2": "MuiPaper-elevation2",
- "elevation20": "MuiPaper-elevation20",
- "elevation21": "MuiPaper-elevation21",
- "elevation22": "MuiPaper-elevation22",
- "elevation23": "MuiPaper-elevation23",
- "elevation24": "MuiPaper-elevation24",
- "elevation3": "MuiPaper-elevation3",
- "elevation4": "MuiPaper-elevation4",
- "elevation5": "MuiPaper-elevation5",
- "elevation6": "MuiPaper-elevation6",
- "elevation7": "MuiPaper-elevation7",
- "elevation8": "MuiPaper-elevation8",
- "elevation9": "MuiPaper-elevation9",
- "outlined": "MuiPaper-outlined",
- "root": "MuiPaper-root",
- "rounded": "MuiPaper-rounded",
- }
- }
- elevation={24}
- role="dialog"
- >
- <div
- aria-labelledby="accessibility-title"
- className="MuiPaper-root MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm MuiPaper-elevation24 MuiPaper-rounded"
- role="dialog"
- >
- <div
- id="accessibility-title"
- >
- feedback.accessibility.window_title
- </div>
- <WithStyles(ForwardRef(IconButton))
- aria-label="feedback.accessibility.button_close"
- className="modal-paper-close-button"
- onClick={[MockFunction]}
- >
- <ForwardRef(IconButton)
- aria-label="feedback.accessibility.button_close"
- className="modal-paper-close-button"
- classes={
- Object {
- "colorInherit": "MuiIconButton-colorInherit",
- "colorPrimary": "MuiIconButton-colorPrimary",
- "colorSecondary": "MuiIconButton-colorSecondary",
- "disabled": "Mui-disabled",
- "edgeEnd": "MuiIconButton-edgeEnd",
- "edgeStart": "MuiIconButton-edgeStart",
- "label": "MuiIconButton-label",
- "root": "MuiIconButton-root",
- "sizeSmall": "MuiIconButton-sizeSmall",
- }
- }
- onClick={[MockFunction]}
- >
- <WithStyles(ForwardRef(ButtonBase))
- aria-label="feedback.accessibility.button_close"
- centerRipple={true}
- className="MuiIconButton-root modal-paper-close-button"
- disabled={false}
- focusRipple={true}
- onClick={[MockFunction]}
- >
- <ForwardRef(ButtonBase)
- aria-label="feedback.accessibility.button_close"
- centerRipple={true}
- className="MuiIconButton-root modal-paper-close-button"
- classes={
- Object {
- "disabled": "Mui-disabled",
- "focusVisible": "Mui-focusVisible",
- "root": "MuiButtonBase-root",
- }
- }
- disabled={false}
- focusRipple={true}
- onClick={[MockFunction]}
- >
- <button
- aria-label="feedback.accessibility.button_close"
- className="MuiButtonBase-root MuiIconButton-root modal-paper-close-button"
- disabled={false}
- onBlur={[Function]}
- onClick={[MockFunction]}
- onDragLeave={[Function]}
- onFocus={[Function]}
- onKeyDown={[Function]}
- onKeyUp={[Function]}
- onMouseDown={[Function]}
- onMouseLeave={[Function]}
- onMouseUp={[Function]}
- onTouchEnd={[Function]}
- onTouchMove={[Function]}
- onTouchStart={[Function]}
- tabIndex={0}
- type="button"
- >
- <span
- className="MuiIconButton-label"
- >
- <Icon
- icon="test-file-stub"
- size={16}
- spin={false}
- >
- <Component
- className="styles__icon___23x3R"
- height={16}
- style={Object {}}
- width={16}
- >
- <svg
- className="styles__icon___23x3R"
- height={16}
- style={Object {}}
- width={16}
- >
- <use
- xlinkHref="#test-file-stub"
- />
- </svg>
- </Component>
- </Icon>
- </span>
- <WithStyles(memo)
- center={true}
- >
- <ForwardRef(TouchRipple)
- center={true}
- classes={
- Object {
- "child": "MuiTouchRipple-child",
- "childLeaving": "MuiTouchRipple-childLeaving",
- "childPulsate": "MuiTouchRipple-childPulsate",
- "ripple": "MuiTouchRipple-ripple",
- "ripplePulsate": "MuiTouchRipple-ripplePulsate",
- "rippleVisible": "MuiTouchRipple-rippleVisible",
- "root": "MuiTouchRipple-root",
- }
- }
- >
- <span
- className="MuiTouchRipple-root"
- >
- <TransitionGroup
- childFactory={[Function]}
- component={null}
- exit={true}
- />
- </span>
- </ForwardRef(TouchRipple)>
- </WithStyles(memo)>
- </button>
- </ForwardRef(ButtonBase)>
- </WithStyles(ForwardRef(ButtonBase))>
- </ForwardRef(IconButton)>
- </WithStyles(ForwardRef(IconButton))>
- <div
- className="eg-reinit-modal"
- >
- <Icon
- icon="test-file-stub"
- size={63}
- spin={false}
- >
- <Component
- className="styles__icon___23x3R"
- height={63}
- style={Object {}}
- width={63}
- >
- <svg
- className="styles__icon___23x3R"
- height={63}
- style={Object {}}
- width={63}
- >
- <use
- xlinkHref="#test-file-stub"
- />
- </svg>
- </Component>
- </Icon>
- <div
- className="title text-20-bold"
- >
- ecogesture.reinitModal.title_part1
- <span
- className="warn-title"
- >
- ecogesture.reinitModal.title_part2
- </span>
- ecogesture.reinitModal.title_part3
- <span
- className="warn-title"
- >
- ecogesture.reinitModal.title_part4
- </span>
- ecogesture.reinitModal.title_part5
- <span
- className="warn-title"
- >
- ecogesture.reinitModal.title_part6
- </span>
- </div>
- <div
- className="text-16-normal text"
- >
- ecogesture.reinitModal.text1
- </div>
- <div
- className="text-16-bold text"
- >
- ecogesture.reinitModal.text2
- </div>
- <div
- className="buttons-container"
- >
- <WithStyles(ForwardRef(Button))
- aria-label="ecogesture.reinitModal.btn1"
- className="btn1"
- classes={
- Object {
- "label": "text-16-bold",
- "root": "btn-secondary-negative",
- }
- }
- onClick={[MockFunction]}
- >
- <ForwardRef(Button)
- aria-label="ecogesture.reinitModal.btn1"
- className="btn1"
- classes={
- Object {
- "colorInherit": "MuiButton-colorInherit",
- "contained": "MuiButton-contained",
- "containedPrimary": "MuiButton-containedPrimary",
- "containedSecondary": "MuiButton-containedSecondary",
- "containedSizeLarge": "MuiButton-containedSizeLarge",
- "containedSizeSmall": "MuiButton-containedSizeSmall",
- "disableElevation": "MuiButton-disableElevation",
- "disabled": "Mui-disabled",
- "endIcon": "MuiButton-endIcon",
- "focusVisible": "Mui-focusVisible",
- "fullWidth": "MuiButton-fullWidth",
- "iconSizeLarge": "MuiButton-iconSizeLarge",
- "iconSizeMedium": "MuiButton-iconSizeMedium",
- "iconSizeSmall": "MuiButton-iconSizeSmall",
- "label": "MuiButton-label text-16-bold",
- "outlined": "MuiButton-outlined",
- "outlinedPrimary": "MuiButton-outlinedPrimary",
- "outlinedSecondary": "MuiButton-outlinedSecondary",
- "outlinedSizeLarge": "MuiButton-outlinedSizeLarge",
- "outlinedSizeSmall": "MuiButton-outlinedSizeSmall",
- "root": "MuiButton-root btn-secondary-negative",
- "sizeLarge": "MuiButton-sizeLarge",
- "sizeSmall": "MuiButton-sizeSmall",
- "startIcon": "MuiButton-startIcon",
- "text": "MuiButton-text",
- "textPrimary": "MuiButton-textPrimary",
- "textSecondary": "MuiButton-textSecondary",
- "textSizeLarge": "MuiButton-textSizeLarge",
- "textSizeSmall": "MuiButton-textSizeSmall",
- }
- }
- onClick={[MockFunction]}
- >
- <WithStyles(ForwardRef(ButtonBase))
- aria-label="ecogesture.reinitModal.btn1"
- className="MuiButton-root btn-secondary-negative MuiButton-text btn1"
- component="button"
- disabled={false}
- focusRipple={true}
- focusVisibleClassName="Mui-focusVisible"
- onClick={[MockFunction]}
- type="button"
- >
- <ForwardRef(ButtonBase)
- aria-label="ecogesture.reinitModal.btn1"
- className="MuiButton-root btn-secondary-negative MuiButton-text btn1"
- classes={
- Object {
- "disabled": "Mui-disabled",
- "focusVisible": "Mui-focusVisible",
- "root": "MuiButtonBase-root",
- }
- }
- component="button"
- disabled={false}
- focusRipple={true}
- focusVisibleClassName="Mui-focusVisible"
- onClick={[MockFunction]}
- type="button"
- >
- <button
- aria-label="ecogesture.reinitModal.btn1"
- className="MuiButtonBase-root MuiButton-root btn-secondary-negative MuiButton-text btn1"
- disabled={false}
- onBlur={[Function]}
- onClick={[MockFunction]}
- onDragLeave={[Function]}
- onFocus={[Function]}
- onKeyDown={[Function]}
- onKeyUp={[Function]}
- onMouseDown={[Function]}
- onMouseLeave={[Function]}
- onMouseUp={[Function]}
- onTouchEnd={[Function]}
- onTouchMove={[Function]}
- onTouchStart={[Function]}
- tabIndex={0}
- type="button"
- >
- <span
- className="MuiButton-label text-16-bold"
- >
- ecogesture.reinitModal.btn1
- </span>
- <WithStyles(memo)
- center={false}
- >
- <ForwardRef(TouchRipple)
- center={false}
- classes={
- Object {
- "child": "MuiTouchRipple-child",
- "childLeaving": "MuiTouchRipple-childLeaving",
- "childPulsate": "MuiTouchRipple-childPulsate",
- "ripple": "MuiTouchRipple-ripple",
- "ripplePulsate": "MuiTouchRipple-ripplePulsate",
- "rippleVisible": "MuiTouchRipple-rippleVisible",
- "root": "MuiTouchRipple-root",
- }
- }
- >
- <span
- className="MuiTouchRipple-root"
- >
- <TransitionGroup
- childFactory={[Function]}
- component={null}
- exit={true}
- />
- </span>
- </ForwardRef(TouchRipple)>
- </WithStyles(memo)>
- </button>
- </ForwardRef(ButtonBase)>
- </WithStyles(ForwardRef(ButtonBase))>
- </ForwardRef(Button)>
- </WithStyles(ForwardRef(Button))>
- <WithStyles(ForwardRef(Button))
- aria-label="ecogesture.reinitModal.btn2"
- classes={
- Object {
- "label": "text-16-bold",
- "root": "btn-profile-next rounded",
- }
- }
- onClick={[MockFunction]}
- >
- <ForwardRef(Button)
- aria-label="ecogesture.reinitModal.btn2"
- classes={
- Object {
- "colorInherit": "MuiButton-colorInherit",
- "contained": "MuiButton-contained",
- "containedPrimary": "MuiButton-containedPrimary",
- "containedSecondary": "MuiButton-containedSecondary",
- "containedSizeLarge": "MuiButton-containedSizeLarge",
- "containedSizeSmall": "MuiButton-containedSizeSmall",
- "disableElevation": "MuiButton-disableElevation",
- "disabled": "Mui-disabled",
- "endIcon": "MuiButton-endIcon",
- "focusVisible": "Mui-focusVisible",
- "fullWidth": "MuiButton-fullWidth",
- "iconSizeLarge": "MuiButton-iconSizeLarge",
- "iconSizeMedium": "MuiButton-iconSizeMedium",
- "iconSizeSmall": "MuiButton-iconSizeSmall",
- "label": "MuiButton-label text-16-bold",
- "outlined": "MuiButton-outlined",
- "outlinedPrimary": "MuiButton-outlinedPrimary",
- "outlinedSecondary": "MuiButton-outlinedSecondary",
- "outlinedSizeLarge": "MuiButton-outlinedSizeLarge",
- "outlinedSizeSmall": "MuiButton-outlinedSizeSmall",
- "root": "MuiButton-root btn-profile-next rounded",
- "sizeLarge": "MuiButton-sizeLarge",
- "sizeSmall": "MuiButton-sizeSmall",
- "startIcon": "MuiButton-startIcon",
- "text": "MuiButton-text",
- "textPrimary": "MuiButton-textPrimary",
- "textSecondary": "MuiButton-textSecondary",
- "textSizeLarge": "MuiButton-textSizeLarge",
- "textSizeSmall": "MuiButton-textSizeSmall",
- }
- }
- onClick={[MockFunction]}
- >
- <WithStyles(ForwardRef(ButtonBase))
- aria-label="ecogesture.reinitModal.btn2"
- className="MuiButton-root btn-profile-next rounded MuiButton-text"
- component="button"
- disabled={false}
- focusRipple={true}
- focusVisibleClassName="Mui-focusVisible"
- onClick={[MockFunction]}
- type="button"
- >
- <ForwardRef(ButtonBase)
- aria-label="ecogesture.reinitModal.btn2"
- className="MuiButton-root btn-profile-next rounded MuiButton-text"
- classes={
- Object {
- "disabled": "Mui-disabled",
- "focusVisible": "Mui-focusVisible",
- "root": "MuiButtonBase-root",
- }
- }
- component="button"
- disabled={false}
- focusRipple={true}
- focusVisibleClassName="Mui-focusVisible"
- onClick={[MockFunction]}
- type="button"
- >
- <button
- aria-label="ecogesture.reinitModal.btn2"
- className="MuiButtonBase-root MuiButton-root btn-profile-next rounded MuiButton-text"
- disabled={false}
- onBlur={[Function]}
- onClick={[MockFunction]}
- onDragLeave={[Function]}
- onFocus={[Function]}
- onKeyDown={[Function]}
- onKeyUp={[Function]}
- onMouseDown={[Function]}
- onMouseLeave={[Function]}
- onMouseUp={[Function]}
- onTouchEnd={[Function]}
- onTouchMove={[Function]}
- onTouchStart={[Function]}
- tabIndex={0}
- type="button"
- >
- <span
- className="MuiButton-label text-16-bold"
- >
- ecogesture.reinitModal.btn2
- </span>
- <WithStyles(memo)
- center={false}
- >
- <ForwardRef(TouchRipple)
- center={false}
- classes={
- Object {
- "child": "MuiTouchRipple-child",
- "childLeaving": "MuiTouchRipple-childLeaving",
- "childPulsate": "MuiTouchRipple-childPulsate",
- "ripple": "MuiTouchRipple-ripple",
- "ripplePulsate": "MuiTouchRipple-ripplePulsate",
- "rippleVisible": "MuiTouchRipple-rippleVisible",
- "root": "MuiTouchRipple-root",
- }
- }
- >
- <span
- className="MuiTouchRipple-root"
- >
- <TransitionGroup
- childFactory={[Function]}
- component={null}
- exit={true}
- />
- </span>
- </ForwardRef(TouchRipple)>
- </WithStyles(memo)>
- </button>
- </ForwardRef(ButtonBase)>
- </WithStyles(ForwardRef(ButtonBase))>
- </ForwardRef(Button)>
- </WithStyles(ForwardRef(Button))>
- </div>
- </div>
- </div>
- </ForwardRef(Paper)>
- </WithStyles(ForwardRef(Paper))>
- </div>
- </Transition>
- </ForwardRef(Fade)>
- <div
- data-test="sentinelEnd"
- tabIndex={0}
- />
- </Unstable_TrapFocus>
- </div>
- </Portal>
- </ForwardRef(Portal)>
- </ForwardRef(Modal)>
- </ForwardRef(Dialog)>
- </WithStyles(ForwardRef(Dialog))>
-</EcogestureReinitModal>
+ ecogesture.reinitModal.btn2
+ </span>
+ <span
+ class="MuiTouchRipple-root"
+ />
+ </button>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div
+ data-test="sentinelEnd"
+ tabindex="0"
+ />
+ </div>
+</body>
`;
diff --git a/src/components/Ecogesture/EcogestureReinitModal/ecogestureReinitModal.scss b/src/components/Ecogesture/EcogestureReinitModal/ecogestureReinitModal.scss
index 5abb4e16a82c810101f570129d11d60611df53dc..d5f0ae349fb52fa9e1ccb1031db1ec374f864383 100644
--- a/src/components/Ecogesture/EcogestureReinitModal/ecogestureReinitModal.scss
+++ b/src/components/Ecogesture/EcogestureReinitModal/ecogestureReinitModal.scss
@@ -18,9 +18,5 @@
display: flex;
gap: 1rem;
width: 100%;
- button {
- margin: 0;
- min-height: 45px;
- }
}
}
diff --git a/src/components/Ecogesture/EcogestureTabsView.spec.tsx b/src/components/Ecogesture/EcogestureTabsView.spec.tsx
index f9eb724daac10611df25dc09f03a69a68ea564eb..4d68fe4730ab8f3043b23408ae75f214b1a41623 100644
--- a/src/components/Ecogesture/EcogestureTabsView.spec.tsx
+++ b/src/components/Ecogesture/EcogestureTabsView.spec.tsx
@@ -1,32 +1,24 @@
-import { IconButton, Tab } from '@material-ui/core'
+import { render, screen, waitFor } from '@testing-library/react'
+import { userEvent } from '@testing-library/user-event'
import EcogestureTabsView from 'components/Ecogesture/EcogestureTabsView'
-import { mount } from 'enzyme'
-import toJson from 'enzyme-to-json'
import React from 'react'
import { Provider } from 'react-redux'
import * as profileActions from 'store/profile/profile.slice'
import { mockedEcogesturesData } from 'tests/__mocks__/ecogesturesData.mock'
import { createMockEcolyoStore } from 'tests/__mocks__/store'
-import { waitForComponentToPaint } from 'tests/__mocks__/testUtils'
-import EcogestureEmptyList from './EcogestureEmptyList/EcogestureEmptyList'
-import EcogestureInitModal from './EcogestureInitModal/EcogestureInitModal'
const mockGetAllEcogestures = jest.fn()
-const mockGetEcogestureListByProfile = jest.fn().mockResolvedValue([])
-const mockInitEcogesture = jest.fn().mockResolvedValue(mockedEcogesturesData)
jest.mock('services/ecogesture.service', () => {
return jest.fn(() => ({
getAllEcogestures: mockGetAllEcogestures,
- getEcogestureListByProfile: mockGetEcogestureListByProfile,
- initEcogesture: mockInitEcogesture,
+ getEcogestureListByProfile: jest.fn().mockResolvedValue([]),
+ initEcogesture: jest.fn().mockResolvedValue(mockedEcogesturesData),
}))
})
-const mockGetProfile = jest.fn()
-const mockUpdateProfile = jest.fn()
jest.mock('services/profile.service', () => {
return jest.fn(() => ({
- getProfile: mockGetProfile,
- updateProfile: mockUpdateProfile,
+ getProfile: jest.fn(),
+ updateProfile: jest.fn(),
}))
})
@@ -50,60 +42,56 @@ describe('EcogestureView component', () => {
const store = createMockEcolyoStore()
it('should be rendered correctly', async () => {
- const wrapper = mount(
+ const { container } = render(
<Provider store={store}>
<EcogestureTabsView />
</Provider>
)
- await waitForComponentToPaint(wrapper)
-
- expect(wrapper.find(Tab).length).toBe(3)
- expect(toJson(wrapper)).toMatchSnapshot()
+ await waitFor(() => null, { container })
+ expect(screen.getAllByRole('button').length).toBe(3)
+ expect(container).toMatchSnapshot()
})
it('should render ecogesture init modal', async () => {
const updateProfileSpy = jest.spyOn(profileActions, 'updateProfile')
- const wrapper = mount(
+ const { container } = render(
<Provider store={store}>
<EcogestureTabsView />
</Provider>
)
- await waitForComponentToPaint(wrapper)
-
- expect(wrapper.find(EcogestureInitModal).exists()).toBeTruthy()
- wrapper.find(IconButton).first().simulate('click')
- await waitForComponentToPaint(wrapper)
-
+ await waitFor(() => null, { container })
+ expect(screen.getByRole('dialog')).toBeInTheDocument()
+ await userEvent.click(screen.getAllByRole('button')[0])
expect(updateProfileSpy).toHaveBeenCalledWith({
haveSeenEcogestureModal: true,
})
})
it('should render empty list', async () => {
- const wrapper = mount(
+ const { container } = render(
<Provider store={store}>
<EcogestureTabsView />
</Provider>
)
- await waitForComponentToPaint(wrapper)
-
- expect(wrapper.find(EcogestureEmptyList).exists()).toBeTruthy()
+ await waitFor(() => null, { container })
+ expect(
+ container.getElementsByClassName('ec-empty-container').length
+ ).toBeTruthy()
})
it('should change tab', async () => {
- const wrapper = mount(
+ const { container } = render(
<Provider store={store}>
<EcogestureTabsView />
</Provider>
)
- await waitForComponentToPaint(wrapper)
-
- wrapper.find(Tab).first().simulate('click')
+ await waitFor(() => null, { container })
+ await userEvent.click(screen.getAllByRole('button')[1])
mockGetAllEcogestures.mockResolvedValueOnce([])
-
- await waitForComponentToPaint(wrapper)
-
- expect(wrapper.find(EcogestureEmptyList).exists()).toBeTruthy()
+ await waitFor(() => null, { container })
+ expect(
+ container.getElementsByClassName('ec-empty-container').length
+ ).toBeTruthy()
})
})
diff --git a/src/components/Ecogesture/EcogestureTabsView.tsx b/src/components/Ecogesture/EcogestureTabsView.tsx
index 2cd5f92b7a15fd4f7f964c17531e5548f0c9f3e2..39e1598c90cff947cb7b77383ba231d64c59d1d9 100644
--- a/src/components/Ecogesture/EcogestureTabsView.tsx
+++ b/src/components/Ecogesture/EcogestureTabsView.tsx
@@ -144,9 +144,8 @@ const EcogestureTabsView = () => {
dispatch(updateProfile({ ecogestureHash }))
}
- const availableList = await ecogestureService.getEcogestureListByProfile(
- profileEcogesture
- )
+ const availableList =
+ await ecogestureService.getEcogestureListByProfile(profileEcogesture)
const filteredList = availableList.filter(
ecogesture => ecogesture.viewedInSelection === false
)
diff --git a/src/components/Ecogesture/EfficiencyRating/EfficiencyRating.spec.tsx b/src/components/Ecogesture/EfficiencyRating/EfficiencyRating.spec.tsx
index 0ac6b73e5884385bfddb078699cf61d6c1a1de39..17445f0947099ba9f3abdc61e6da0e97300844ac 100644
--- a/src/components/Ecogesture/EfficiencyRating/EfficiencyRating.spec.tsx
+++ b/src/components/Ecogesture/EfficiencyRating/EfficiencyRating.spec.tsx
@@ -1,11 +1,10 @@
+import { render } from '@testing-library/react'
import EfficiencyRating from 'components/Ecogesture/EfficiencyRating/EfficiencyRating'
-import { mount } from 'enzyme'
-import toJson from 'enzyme-to-json'
import React from 'react'
describe('EfficiencyRating component', () => {
it('should be rendered correctly', () => {
- const wrapper = mount(<EfficiencyRating result={3} />)
- expect(toJson(wrapper)).toMatchSnapshot()
+ const { container } = render(<EfficiencyRating result={3} />)
+ expect(container).toMatchSnapshot()
})
})
diff --git a/src/components/Ecogesture/EfficiencyRating/__snapshots__/EfficiencyRating.spec.tsx.snap b/src/components/Ecogesture/EfficiencyRating/__snapshots__/EfficiencyRating.spec.tsx.snap
index 9b1d8405abc6fc7a30d13bd2375d2472bdd79414..8ffd02507109a5c68be5b8335ec138d4feb61564 100644
--- a/src/components/Ecogesture/EfficiencyRating/__snapshots__/EfficiencyRating.spec.tsx.snap
+++ b/src/components/Ecogesture/EfficiencyRating/__snapshots__/EfficiencyRating.spec.tsx.snap
@@ -1,182 +1,60 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`EfficiencyRating component should be rendered correctly 1`] = `
-<EfficiencyRating
- result={3}
->
+<div>
<div
- className="thunder"
+ class="thunder"
>
- <StyledIcon
- className="star"
- icon="test-file-stub"
- key="1"
- size={15}
+ <svg
+ aria-hidden="true"
+ class="star styles__icon___23x3R"
+ height="15"
+ width="15"
>
- <Icon
- aria-hidden={true}
- className="star"
- icon="test-file-stub"
- size={15}
- spin={false}
- >
- <Component
- aria-hidden={true}
- className="star styles__icon___23x3R"
- height={15}
- style={Object {}}
- width={15}
- >
- <svg
- aria-hidden={true}
- className="star styles__icon___23x3R"
- height={15}
- style={Object {}}
- width={15}
- >
- <use
- xlinkHref="#test-file-stub"
- />
- </svg>
- </Component>
- </Icon>
- </StyledIcon>
- <StyledIcon
- className="star"
- icon="test-file-stub"
- key="2"
- size={15}
+ <use
+ xlink:href="#test-file-stub"
+ />
+ </svg>
+ <svg
+ aria-hidden="true"
+ class="star styles__icon___23x3R"
+ height="15"
+ width="15"
>
- <Icon
- aria-hidden={true}
- className="star"
- icon="test-file-stub"
- size={15}
- spin={false}
- >
- <Component
- aria-hidden={true}
- className="star styles__icon___23x3R"
- height={15}
- style={Object {}}
- width={15}
- >
- <svg
- aria-hidden={true}
- className="star styles__icon___23x3R"
- height={15}
- style={Object {}}
- width={15}
- >
- <use
- xlinkHref="#test-file-stub"
- />
- </svg>
- </Component>
- </Icon>
- </StyledIcon>
- <StyledIcon
- className="star"
- icon="test-file-stub"
- key="3"
- size={15}
+ <use
+ xlink:href="#test-file-stub"
+ />
+ </svg>
+ <svg
+ aria-hidden="true"
+ class="star styles__icon___23x3R"
+ height="15"
+ width="15"
>
- <Icon
- aria-hidden={true}
- className="star"
- icon="test-file-stub"
- size={15}
- spin={false}
- >
- <Component
- aria-hidden={true}
- className="star styles__icon___23x3R"
- height={15}
- style={Object {}}
- width={15}
- >
- <svg
- aria-hidden={true}
- className="star styles__icon___23x3R"
- height={15}
- style={Object {}}
- width={15}
- >
- <use
- xlinkHref="#test-file-stub"
- />
- </svg>
- </Component>
- </Icon>
- </StyledIcon>
- <StyledIcon
- className="star"
- icon="test-file-stub"
- key="4"
- size={15}
+ <use
+ xlink:href="#test-file-stub"
+ />
+ </svg>
+ <svg
+ aria-hidden="true"
+ class="star styles__icon___23x3R"
+ height="15"
+ width="15"
>
- <Icon
- aria-hidden={true}
- className="star"
- icon="test-file-stub"
- size={15}
- spin={false}
- >
- <Component
- aria-hidden={true}
- className="star styles__icon___23x3R"
- height={15}
- style={Object {}}
- width={15}
- >
- <svg
- aria-hidden={true}
- className="star styles__icon___23x3R"
- height={15}
- style={Object {}}
- width={15}
- >
- <use
- xlinkHref="#test-file-stub"
- />
- </svg>
- </Component>
- </Icon>
- </StyledIcon>
- <StyledIcon
- className="star"
- icon="test-file-stub"
- key="5"
- size={15}
+ <use
+ xlink:href="#test-file-stub"
+ />
+ </svg>
+ <svg
+ aria-hidden="true"
+ class="star styles__icon___23x3R"
+ height="15"
+ width="15"
>
- <Icon
- aria-hidden={true}
- className="star"
- icon="test-file-stub"
- size={15}
- spin={false}
- >
- <Component
- aria-hidden={true}
- className="star styles__icon___23x3R"
- height={15}
- style={Object {}}
- width={15}
- >
- <svg
- aria-hidden={true}
- className="star styles__icon___23x3R"
- height={15}
- style={Object {}}
- width={15}
- >
- <use
- xlinkHref="#test-file-stub"
- />
- </svg>
- </Component>
- </Icon>
- </StyledIcon>
+ <use
+ xlink:href="#test-file-stub"
+ />
+ </svg>
</div>
-</EfficiencyRating>
+</div>
`;
diff --git a/src/components/Ecogesture/SingleEcogestureView.spec.tsx b/src/components/Ecogesture/SingleEcogestureView.spec.tsx
index 35e2ff90e7dcbe2855822c4b7922b3e43d04ddf1..5f89c46a40f1459f52cfd96a25921a9cfa704b22 100644
--- a/src/components/Ecogesture/SingleEcogestureView.spec.tsx
+++ b/src/components/Ecogesture/SingleEcogestureView.spec.tsx
@@ -1,11 +1,9 @@
-/* eslint-disable react/display-name */
-import { mount } from 'enzyme'
-import toJson from 'enzyme-to-json'
+import { render, screen, waitFor } from '@testing-library/react'
+import { userEvent } from '@testing-library/user-event'
import React from 'react'
import { Provider } from 'react-redux'
import { mockedEcogesturesData } from 'tests/__mocks__/ecogesturesData.mock'
import { createMockEcolyoStore } from 'tests/__mocks__/store'
-import { waitForComponentToPaint } from 'tests/__mocks__/testUtils'
import SingleEcogestureView from './SingleEcogestureView'
jest.mock(
@@ -29,59 +27,58 @@ describe('SingleEcogesture component', () => {
const store = createMockEcolyoStore()
it('should be rendered correctly', async () => {
mockGetEcogesturesByIds.mockResolvedValue([mockedEcogesturesData[0]])
- const wrapper = mount(
+ const { container } = render(
<Provider store={store}>
<SingleEcogestureView />
</Provider>
)
- await waitForComponentToPaint(wrapper)
- expect(toJson(wrapper)).toMatchSnapshot()
+ await waitFor(() => null, { container })
+ expect(container).toMatchSnapshot()
})
- it('should change doing status', async () => {
+ it('should be able to show more details and change status', async () => {
mockGetEcogesturesByIds.mockResolvedValue([mockedEcogesturesData[0]])
-
- const updatedEcogesture = { ...mockedEcogesturesData[0], doing: true }
+ const updatedEcogesture = { ...mockedEcogesturesData[0], objective: true }
mockUpdateEcogesture.mockResolvedValueOnce(updatedEcogesture)
- const wrapper = mount(
+
+ const { container } = render(
<Provider store={store}>
<SingleEcogestureView />
</Provider>
)
- await waitForComponentToPaint(wrapper)
- wrapper.find('.doing-btn').first().simulate('click')
- await waitForComponentToPaint(wrapper)
+ await waitFor(() => null, { container })
+ const [, objective] = screen.getAllByRole('button')
+ await userEvent.click(objective)
expect(mockUpdateEcogesture).toHaveBeenCalledWith(updatedEcogesture)
})
- it('should change objective status', async () => {
- mockGetEcogesturesByIds.mockResolvedValue([mockedEcogesturesData[0]])
- const updatedEcogesture = { ...mockedEcogesturesData[0], objective: true }
+ it('should change doing status', async () => {
+ mockGetEcogesturesByIds.mockResolvedValue([mockedEcogesturesData[0]])
+ const updatedEcogesture = { ...mockedEcogesturesData[0], doing: true }
mockUpdateEcogesture.mockResolvedValueOnce(updatedEcogesture)
- const wrapper = mount(
+ const { container } = render(
<Provider store={store}>
<SingleEcogestureView />
</Provider>
)
- await waitForComponentToPaint(wrapper)
- wrapper.find('.objective-btn').first().simulate('click')
- await waitForComponentToPaint(wrapper)
+ await waitFor(() => null, { container })
+ const [, , doing] = screen.getAllByRole('button')
+ await userEvent.click(doing)
expect(mockUpdateEcogesture).toHaveBeenCalledWith(updatedEcogesture)
})
+
it('should toggle more details', async () => {
mockGetEcogesturesByIds.mockResolvedValue([mockedEcogesturesData[0]])
- const wrapper = mount(
+ const { container } = render(
<Provider store={store}>
<SingleEcogestureView />
</Provider>
)
- await waitForComponentToPaint(wrapper)
-
- wrapper.find('.showMore').first().simulate('click')
- await waitForComponentToPaint(wrapper)
-
- expect(wrapper.find('.showMore').text()).toBe('ecogesture_modal.show_less')
+ await waitFor(() => null, { container })
+ const [showMore] = screen.getAllByRole('button')
+ await userEvent.click(showMore)
+ expect(screen.getByText('ecogesture_modal.show_less')).toBeInTheDocument()
})
})
diff --git a/src/components/Ecogesture/SingleEcogestureView.tsx b/src/components/Ecogesture/SingleEcogestureView.tsx
index 3f9b7cefb326293d6dc88a4ff15f014c28a7a903..7f2c228dfa79fbf77c7a95633d6d9cd4c8211941 100644
--- a/src/components/Ecogesture/SingleEcogestureView.tsx
+++ b/src/components/Ecogesture/SingleEcogestureView.tsx
@@ -1,4 +1,4 @@
-import { Collapse } from '@material-ui/core'
+import { Button, Collapse } from '@material-ui/core'
import IconButton from '@material-ui/core/IconButton'
import * as Sentry from '@sentry/react'
import doingDisabledIcon from 'assets/icons/ico/doing-disabled.svg'
@@ -143,9 +143,9 @@ const SingleEcogestureView = () => {
)}
</div>
<div className="details">
- <div className="text-22 title">{ecogesture.shortName}</div>
+ <div className="text-22-bold title">{ecogesture.shortName}</div>
<div className="efficiency">
- <span className="text text-14-normal">
+ <span className="text-14-normal">
{t('ecogesture_modal.efficiency')}
</span>
<EfficiencyRating result={Math.round(ecogesture.efficiency)} />
@@ -155,13 +155,15 @@ const SingleEcogestureView = () => {
<div className="long-name text-18-bold">
{ecogesture.longName}
</div>
- <div
- className="showMore text-15-normal"
+ <Button
+ classes={{
+ root: 'btnText showMore',
+ label: 'text-15-normal',
+ }}
onClick={() => setShowDetails(prev => !prev)}
- role="button"
>
{t(`ecogesture_modal.show_${showDetails ? 'less' : 'more'}`)}
- </div>
+ </Button>
<Collapse in={showDetails}>
<div className="longDescription text-16-normal-150">
@@ -175,9 +177,7 @@ const SingleEcogestureView = () => {
aria-label={t('ecogesture.objective')}
onClick={toggleObjective}
classes={{
- root: `btn-secondary-negative objective-btn ${
- isObjective && 'active'
- }`,
+ root: `btnSecondary objective-btn ${isObjective && 'active'}`,
label: 'text-15-normal',
}}
>
@@ -194,9 +194,7 @@ const SingleEcogestureView = () => {
aria-label={t('ecogesture.doing')}
onClick={toggleDoing}
classes={{
- root: `btn-secondary-negative doing-btn ${
- isDoing && 'active'
- }`,
+ root: `btnSecondary doing-btn ${isDoing && 'active'}`,
label: 'text-15-normal',
}}
>
diff --git a/src/components/Ecogesture/__snapshots__/EcogestureTabsView.spec.tsx.snap b/src/components/Ecogesture/__snapshots__/EcogestureTabsView.spec.tsx.snap
index f6432521d2f775a377e0f8cb56c35b1371064a41..e8cc3b0ab9978a7ae15890857254b607675de568 100644
--- a/src/components/Ecogesture/__snapshots__/EcogestureTabsView.spec.tsx.snap
+++ b/src/components/Ecogesture/__snapshots__/EcogestureTabsView.spec.tsx.snap
@@ -1,2380 +1,241 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`EcogestureView component should be rendered correctly 1`] = `
-<Provider
- store={
- Object {
- "clearActions": [Function],
- "dispatch": [Function],
- "getActions": [Function],
- "getState": [Function],
- "replaceReducer": [Function],
- "subscribe": [Function],
- }
- }
+<div
+ aria-hidden="true"
>
- <EcogestureTabsView>
- <mock-cozybar
- titleKey="common.title_ecogestures"
- />
- <mock-header
- desktopTitleKey="common.title_ecogestures"
- setHeaderHeight={[Function]}
+ <mock-cozybar
+ titlekey="common.title_ecogestures"
+ />
+ <mock-header
+ desktoptitlekey="common.title_ecogestures"
+ >
+ <div
+ class="MuiTabs-root ecogestures-tabs"
>
- <WithStyles(ForwardRef(Tabs))
- TabIndicatorProps={
- Object {
- "className": "indicator-tab",
- }
- }
- aria-label="ecogestures-tabs"
- centered={true}
- className="ecogestures-tabs"
- onChange={[Function]}
- value={0}
+ <div
+ class="MuiTabs-scroller MuiTabs-fixed"
+ style="overflow: hidden;"
>
- <ForwardRef(Tabs)
- TabIndicatorProps={
- Object {
- "className": "indicator-tab",
- }
- }
+ <div
aria-label="ecogestures-tabs"
- centered={true}
- className="ecogestures-tabs"
- classes={
- Object {
- "centered": "MuiTabs-centered",
- "fixed": "MuiTabs-fixed",
- "flexContainer": "MuiTabs-flexContainer",
- "flexContainerVertical": "MuiTabs-flexContainerVertical",
- "indicator": "MuiTabs-indicator",
- "root": "MuiTabs-root",
- "scrollButtons": "MuiTabs-scrollButtons",
- "scrollButtonsDesktop": "MuiTabs-scrollButtonsDesktop",
- "scrollable": "MuiTabs-scrollable",
- "scroller": "MuiTabs-scroller",
- "vertical": "MuiTabs-vertical",
- }
- }
- onChange={[Function]}
- value={0}
+ class="MuiTabs-flexContainer MuiTabs-centered"
+ role="tablist"
>
- <div
- className="MuiTabs-root ecogestures-tabs"
+ <button
+ aria-controls="simple-tabpanel-0"
+ aria-selected="true"
+ class="MuiButtonBase-root MuiTab-root MuiTab-textColorInherit single-tab active Mui-selected"
+ id="simple-tab-0"
+ role="tab"
+ tabindex="0"
+ type="button"
>
- <div
- className="MuiTabs-scroller MuiTabs-fixed"
- onScroll={[Function]}
- style={
- Object {
- "marginBottom": null,
- "overflow": "hidden",
- }
- }
+ <span
+ class="MuiTab-wrapper"
>
- <div
- aria-label="ecogestures-tabs"
- className="MuiTabs-flexContainer MuiTabs-centered"
- onKeyDown={[Function]}
- role="tablist"
- >
- <WithStyles(ForwardRef(Tab))
- aria-controls="simple-tabpanel-0"
- className="single-tab active"
- fullWidth={false}
- id="simple-tab-0"
- indicator={false}
- key=".0"
- label={
- <React.Fragment>
- ecogesture.title_tab_0
- <br />
- (0)
- </React.Fragment>
- }
- onChange={[Function]}
- selected={true}
- tabIndex={0}
- textColor="inherit"
- value={0}
- >
- <ForwardRef(Tab)
- aria-controls="simple-tabpanel-0"
- className="single-tab active"
- classes={
- Object {
- "disabled": "Mui-disabled",
- "fullWidth": "MuiTab-fullWidth",
- "labelIcon": "MuiTab-labelIcon",
- "root": "MuiTab-root",
- "selected": "Mui-selected",
- "textColorInherit": "MuiTab-textColorInherit",
- "textColorPrimary": "MuiTab-textColorPrimary",
- "textColorSecondary": "MuiTab-textColorSecondary",
- "wrapped": "MuiTab-wrapped",
- "wrapper": "MuiTab-wrapper",
- }
- }
- fullWidth={false}
- id="simple-tab-0"
- indicator={false}
- label={
- <React.Fragment>
- ecogesture.title_tab_0
- <br />
- (0)
- </React.Fragment>
- }
- onChange={[Function]}
- selected={true}
- tabIndex={0}
- textColor="inherit"
- value={0}
- >
- <WithStyles(ForwardRef(ButtonBase))
- aria-controls="simple-tabpanel-0"
- aria-selected={true}
- className="MuiTab-root MuiTab-textColorInherit single-tab active Mui-selected"
- disabled={false}
- focusRipple={true}
- id="simple-tab-0"
- onClick={[Function]}
- onFocus={[Function]}
- role="tab"
- tabIndex={0}
- >
- <ForwardRef(ButtonBase)
- aria-controls="simple-tabpanel-0"
- aria-selected={true}
- className="MuiTab-root MuiTab-textColorInherit single-tab active Mui-selected"
- classes={
- Object {
- "disabled": "Mui-disabled",
- "focusVisible": "Mui-focusVisible",
- "root": "MuiButtonBase-root",
- }
- }
- disabled={false}
- focusRipple={true}
- id="simple-tab-0"
- onClick={[Function]}
- onFocus={[Function]}
- role="tab"
- tabIndex={0}
- >
- <button
- aria-controls="simple-tabpanel-0"
- aria-selected={true}
- className="MuiButtonBase-root MuiTab-root MuiTab-textColorInherit single-tab active Mui-selected"
- disabled={false}
- id="simple-tab-0"
- onBlur={[Function]}
- onClick={[Function]}
- onDragLeave={[Function]}
- onFocus={[Function]}
- onKeyDown={[Function]}
- onKeyUp={[Function]}
- onMouseDown={[Function]}
- onMouseLeave={[Function]}
- onMouseUp={[Function]}
- onTouchEnd={[Function]}
- onTouchMove={[Function]}
- onTouchStart={[Function]}
- role="tab"
- tabIndex={0}
- type="button"
- >
- <span
- className="MuiTab-wrapper"
- >
- ecogesture.title_tab_0
- <br />
- (0)
- </span>
- <WithStyles(memo)
- center={false}
- >
- <ForwardRef(TouchRipple)
- center={false}
- classes={
- Object {
- "child": "MuiTouchRipple-child",
- "childLeaving": "MuiTouchRipple-childLeaving",
- "childPulsate": "MuiTouchRipple-childPulsate",
- "ripple": "MuiTouchRipple-ripple",
- "ripplePulsate": "MuiTouchRipple-ripplePulsate",
- "rippleVisible": "MuiTouchRipple-rippleVisible",
- "root": "MuiTouchRipple-root",
- }
- }
- >
- <span
- className="MuiTouchRipple-root"
- >
- <TransitionGroup
- childFactory={[Function]}
- component={null}
- exit={true}
- />
- </span>
- </ForwardRef(TouchRipple)>
- </WithStyles(memo)>
- </button>
- </ForwardRef(ButtonBase)>
- </WithStyles(ForwardRef(ButtonBase))>
- </ForwardRef(Tab)>
- </WithStyles(ForwardRef(Tab))>
- <WithStyles(ForwardRef(Tab))
- aria-controls="simple-tabpanel-1"
- className="single-tab"
- fullWidth={false}
- id="simple-tab-1"
- indicator={false}
- key=".1"
- label={
- <React.Fragment>
- ecogesture.title_tab_1
- <br />
- (0)
- </React.Fragment>
- }
- onChange={[Function]}
- selected={false}
- tabIndex={0}
- textColor="inherit"
- value={1}
- >
- <ForwardRef(Tab)
- aria-controls="simple-tabpanel-1"
- className="single-tab"
- classes={
- Object {
- "disabled": "Mui-disabled",
- "fullWidth": "MuiTab-fullWidth",
- "labelIcon": "MuiTab-labelIcon",
- "root": "MuiTab-root",
- "selected": "Mui-selected",
- "textColorInherit": "MuiTab-textColorInherit",
- "textColorPrimary": "MuiTab-textColorPrimary",
- "textColorSecondary": "MuiTab-textColorSecondary",
- "wrapped": "MuiTab-wrapped",
- "wrapper": "MuiTab-wrapper",
- }
- }
- fullWidth={false}
- id="simple-tab-1"
- indicator={false}
- label={
- <React.Fragment>
- ecogesture.title_tab_1
- <br />
- (0)
- </React.Fragment>
- }
- onChange={[Function]}
- selected={false}
- tabIndex={0}
- textColor="inherit"
- value={1}
- >
- <WithStyles(ForwardRef(ButtonBase))
- aria-controls="simple-tabpanel-1"
- aria-selected={false}
- className="MuiTab-root MuiTab-textColorInherit single-tab"
- disabled={false}
- focusRipple={true}
- id="simple-tab-1"
- onClick={[Function]}
- onFocus={[Function]}
- role="tab"
- tabIndex={0}
- >
- <ForwardRef(ButtonBase)
- aria-controls="simple-tabpanel-1"
- aria-selected={false}
- className="MuiTab-root MuiTab-textColorInherit single-tab"
- classes={
- Object {
- "disabled": "Mui-disabled",
- "focusVisible": "Mui-focusVisible",
- "root": "MuiButtonBase-root",
- }
- }
- disabled={false}
- focusRipple={true}
- id="simple-tab-1"
- onClick={[Function]}
- onFocus={[Function]}
- role="tab"
- tabIndex={0}
- >
- <button
- aria-controls="simple-tabpanel-1"
- aria-selected={false}
- className="MuiButtonBase-root MuiTab-root MuiTab-textColorInherit single-tab"
- disabled={false}
- id="simple-tab-1"
- onBlur={[Function]}
- onClick={[Function]}
- onDragLeave={[Function]}
- onFocus={[Function]}
- onKeyDown={[Function]}
- onKeyUp={[Function]}
- onMouseDown={[Function]}
- onMouseLeave={[Function]}
- onMouseUp={[Function]}
- onTouchEnd={[Function]}
- onTouchMove={[Function]}
- onTouchStart={[Function]}
- role="tab"
- tabIndex={0}
- type="button"
- >
- <span
- className="MuiTab-wrapper"
- >
- ecogesture.title_tab_1
- <br />
- (0)
- </span>
- <WithStyles(memo)
- center={false}
- >
- <ForwardRef(TouchRipple)
- center={false}
- classes={
- Object {
- "child": "MuiTouchRipple-child",
- "childLeaving": "MuiTouchRipple-childLeaving",
- "childPulsate": "MuiTouchRipple-childPulsate",
- "ripple": "MuiTouchRipple-ripple",
- "ripplePulsate": "MuiTouchRipple-ripplePulsate",
- "rippleVisible": "MuiTouchRipple-rippleVisible",
- "root": "MuiTouchRipple-root",
- }
- }
- >
- <span
- className="MuiTouchRipple-root"
- >
- <TransitionGroup
- childFactory={[Function]}
- component={null}
- exit={true}
- />
- </span>
- </ForwardRef(TouchRipple)>
- </WithStyles(memo)>
- </button>
- </ForwardRef(ButtonBase)>
- </WithStyles(ForwardRef(ButtonBase))>
- </ForwardRef(Tab)>
- </WithStyles(ForwardRef(Tab))>
- <WithStyles(ForwardRef(Tab))
- aria-controls="simple-tabpanel-2"
- className="single-tab"
- fullWidth={false}
- id="simple-tab-2"
- indicator={false}
- key=".2"
- label={
- <React.Fragment>
- ecogesture.title_tab_2
- <br />
- (0)
- </React.Fragment>
- }
- onChange={[Function]}
- selected={false}
- tabIndex={0}
- textColor="inherit"
- value={2}
- >
- <ForwardRef(Tab)
- aria-controls="simple-tabpanel-2"
- className="single-tab"
- classes={
- Object {
- "disabled": "Mui-disabled",
- "fullWidth": "MuiTab-fullWidth",
- "labelIcon": "MuiTab-labelIcon",
- "root": "MuiTab-root",
- "selected": "Mui-selected",
- "textColorInherit": "MuiTab-textColorInherit",
- "textColorPrimary": "MuiTab-textColorPrimary",
- "textColorSecondary": "MuiTab-textColorSecondary",
- "wrapped": "MuiTab-wrapped",
- "wrapper": "MuiTab-wrapper",
- }
- }
- fullWidth={false}
- id="simple-tab-2"
- indicator={false}
- label={
- <React.Fragment>
- ecogesture.title_tab_2
- <br />
- (0)
- </React.Fragment>
- }
- onChange={[Function]}
- selected={false}
- tabIndex={0}
- textColor="inherit"
- value={2}
- >
- <WithStyles(ForwardRef(ButtonBase))
- aria-controls="simple-tabpanel-2"
- aria-selected={false}
- className="MuiTab-root MuiTab-textColorInherit single-tab"
- disabled={false}
- focusRipple={true}
- id="simple-tab-2"
- onClick={[Function]}
- onFocus={[Function]}
- role="tab"
- tabIndex={0}
- >
- <ForwardRef(ButtonBase)
- aria-controls="simple-tabpanel-2"
- aria-selected={false}
- className="MuiTab-root MuiTab-textColorInherit single-tab"
- classes={
- Object {
- "disabled": "Mui-disabled",
- "focusVisible": "Mui-focusVisible",
- "root": "MuiButtonBase-root",
- }
- }
- disabled={false}
- focusRipple={true}
- id="simple-tab-2"
- onClick={[Function]}
- onFocus={[Function]}
- role="tab"
- tabIndex={0}
- >
- <button
- aria-controls="simple-tabpanel-2"
- aria-selected={false}
- className="MuiButtonBase-root MuiTab-root MuiTab-textColorInherit single-tab"
- disabled={false}
- id="simple-tab-2"
- onBlur={[Function]}
- onClick={[Function]}
- onDragLeave={[Function]}
- onFocus={[Function]}
- onKeyDown={[Function]}
- onKeyUp={[Function]}
- onMouseDown={[Function]}
- onMouseLeave={[Function]}
- onMouseUp={[Function]}
- onTouchEnd={[Function]}
- onTouchMove={[Function]}
- onTouchStart={[Function]}
- role="tab"
- tabIndex={0}
- type="button"
- >
- <span
- className="MuiTab-wrapper"
- >
- ecogesture.title_tab_2
- <br />
- (0)
- </span>
- <WithStyles(memo)
- center={false}
- >
- <ForwardRef(TouchRipple)
- center={false}
- classes={
- Object {
- "child": "MuiTouchRipple-child",
- "childLeaving": "MuiTouchRipple-childLeaving",
- "childPulsate": "MuiTouchRipple-childPulsate",
- "ripple": "MuiTouchRipple-ripple",
- "ripplePulsate": "MuiTouchRipple-ripplePulsate",
- "rippleVisible": "MuiTouchRipple-rippleVisible",
- "root": "MuiTouchRipple-root",
- }
- }
- >
- <span
- className="MuiTouchRipple-root"
- >
- <TransitionGroup
- childFactory={[Function]}
- component={null}
- exit={true}
- />
- </span>
- </ForwardRef(TouchRipple)>
- </WithStyles(memo)>
- </button>
- </ForwardRef(ButtonBase)>
- </WithStyles(ForwardRef(ButtonBase))>
- </ForwardRef(Tab)>
- </WithStyles(ForwardRef(Tab))>
- </div>
- <WithStyles(ForwardRef(TabIndicator))
- className="indicator-tab"
- color="secondary"
- orientation="horizontal"
- style={
- Object {
- "left": 0,
- "width": 0,
- }
- }
- >
- <ForwardRef(TabIndicator)
- className="indicator-tab"
- classes={
- Object {
- "colorPrimary": "PrivateTabIndicator-colorPrimary-2",
- "colorSecondary": "PrivateTabIndicator-colorSecondary-3",
- "root": "PrivateTabIndicator-root-1",
- "vertical": "PrivateTabIndicator-vertical-4",
- }
- }
- color="secondary"
- orientation="horizontal"
- style={
- Object {
- "left": 0,
- "width": 0,
- }
- }
- >
- <span
- className="PrivateTabIndicator-root-1 PrivateTabIndicator-colorSecondary-3 indicator-tab"
- style={
- Object {
- "left": 0,
- "width": 0,
- }
- }
- />
- </ForwardRef(TabIndicator)>
- </WithStyles(ForwardRef(TabIndicator))>
- </div>
- </div>
- </ForwardRef(Tabs)>
- </WithStyles(ForwardRef(Tabs))>
- </mock-header>
- <mock-content
- heightOffset={0}
- >
- <TabPanel
- tab={0}
- value={0}
- >
- <div
- aria-labelledby="simple-tab-0"
- hidden={false}
- id="simple-tabpanel-0"
- role="tabpanel"
- >
- <EcogestureEmptyList
- handleReinitClick={[Function]}
- isObjective={true}
- isSelectionDone={false}
- setTab={[Function]}
+ ecogesture.title_tab_0
+ <br />
+ (0)
+ </span>
+ <span
+ class="MuiTouchRipple-root"
+ />
+ </button>
+ <button
+ aria-controls="simple-tabpanel-1"
+ aria-selected="false"
+ class="MuiButtonBase-root MuiTab-root MuiTab-textColorInherit single-tab"
+ id="simple-tab-1"
+ role="tab"
+ tabindex="0"
+ type="button"
>
- <div
- className="ec-empty-container"
+ <span
+ class="MuiTab-wrapper"
>
- <div
- className="ec-empty-content"
- >
- <StyledIcon
- className="icon-big"
- icon="test-file-stub"
- size={150}
- >
- <Icon
- aria-hidden={true}
- className="icon-big"
- icon="test-file-stub"
- size={150}
- spin={false}
- >
- <Component
- aria-hidden={true}
- className="icon-big styles__icon___23x3R"
- height={150}
- style={Object {}}
- width={150}
- >
- <svg
- aria-hidden={true}
- className="icon-big styles__icon___23x3R"
- height={150}
- style={Object {}}
- width={150}
- >
- <use
- xlinkHref="#test-file-stub"
- />
- </svg>
- </Component>
- </Icon>
- </StyledIcon>
- <div
- className="text-16-normal text"
- >
- ecogesture.emptyList.obj1
- </div>
- <div
- className="text-16-normal text"
- >
- ecogesture.emptyList.obj2
- </div>
- <div
- className="btn-container"
- >
- <WithStyles(ForwardRef(Button))
- aria-label="ecogesture.emptyList.btn1"
- classes={
- Object {
- "label": "text-16-bold",
- "root": "btn-secondary-negative btn1",
- }
- }
- onClick={[Function]}
- >
- <ForwardRef(Button)
- aria-label="ecogesture.emptyList.btn1"
- classes={
- Object {
- "colorInherit": "MuiButton-colorInherit",
- "contained": "MuiButton-contained",
- "containedPrimary": "MuiButton-containedPrimary",
- "containedSecondary": "MuiButton-containedSecondary",
- "containedSizeLarge": "MuiButton-containedSizeLarge",
- "containedSizeSmall": "MuiButton-containedSizeSmall",
- "disableElevation": "MuiButton-disableElevation",
- "disabled": "Mui-disabled",
- "endIcon": "MuiButton-endIcon",
- "focusVisible": "Mui-focusVisible",
- "fullWidth": "MuiButton-fullWidth",
- "iconSizeLarge": "MuiButton-iconSizeLarge",
- "iconSizeMedium": "MuiButton-iconSizeMedium",
- "iconSizeSmall": "MuiButton-iconSizeSmall",
- "label": "MuiButton-label text-16-bold",
- "outlined": "MuiButton-outlined",
- "outlinedPrimary": "MuiButton-outlinedPrimary",
- "outlinedSecondary": "MuiButton-outlinedSecondary",
- "outlinedSizeLarge": "MuiButton-outlinedSizeLarge",
- "outlinedSizeSmall": "MuiButton-outlinedSizeSmall",
- "root": "MuiButton-root btn-secondary-negative btn1",
- "sizeLarge": "MuiButton-sizeLarge",
- "sizeSmall": "MuiButton-sizeSmall",
- "startIcon": "MuiButton-startIcon",
- "text": "MuiButton-text",
- "textPrimary": "MuiButton-textPrimary",
- "textSecondary": "MuiButton-textSecondary",
- "textSizeLarge": "MuiButton-textSizeLarge",
- "textSizeSmall": "MuiButton-textSizeSmall",
- }
- }
- onClick={[Function]}
- >
- <WithStyles(ForwardRef(ButtonBase))
- aria-label="ecogesture.emptyList.btn1"
- className="MuiButton-root btn-secondary-negative btn1 MuiButton-text"
- component="button"
- disabled={false}
- focusRipple={true}
- focusVisibleClassName="Mui-focusVisible"
- onClick={[Function]}
- type="button"
- >
- <ForwardRef(ButtonBase)
- aria-label="ecogesture.emptyList.btn1"
- className="MuiButton-root btn-secondary-negative btn1 MuiButton-text"
- classes={
- Object {
- "disabled": "Mui-disabled",
- "focusVisible": "Mui-focusVisible",
- "root": "MuiButtonBase-root",
- }
- }
- component="button"
- disabled={false}
- focusRipple={true}
- focusVisibleClassName="Mui-focusVisible"
- onClick={[Function]}
- type="button"
- >
- <button
- aria-label="ecogesture.emptyList.btn1"
- className="MuiButtonBase-root MuiButton-root btn-secondary-negative btn1 MuiButton-text"
- disabled={false}
- onBlur={[Function]}
- onClick={[Function]}
- onDragLeave={[Function]}
- onFocus={[Function]}
- onKeyDown={[Function]}
- onKeyUp={[Function]}
- onMouseDown={[Function]}
- onMouseLeave={[Function]}
- onMouseUp={[Function]}
- onTouchEnd={[Function]}
- onTouchMove={[Function]}
- onTouchStart={[Function]}
- tabIndex={0}
- type="button"
- >
- <span
- className="MuiButton-label text-16-bold"
- >
- ecogesture.emptyList.btn1
- </span>
- <WithStyles(memo)
- center={false}
- >
- <ForwardRef(TouchRipple)
- center={false}
- classes={
- Object {
- "child": "MuiTouchRipple-child",
- "childLeaving": "MuiTouchRipple-childLeaving",
- "childPulsate": "MuiTouchRipple-childPulsate",
- "ripple": "MuiTouchRipple-ripple",
- "ripplePulsate": "MuiTouchRipple-ripplePulsate",
- "rippleVisible": "MuiTouchRipple-rippleVisible",
- "root": "MuiTouchRipple-root",
- }
- }
- >
- <span
- className="MuiTouchRipple-root"
- >
- <TransitionGroup
- childFactory={[Function]}
- component={null}
- exit={true}
- />
- </span>
- </ForwardRef(TouchRipple)>
- </WithStyles(memo)>
- </button>
- </ForwardRef(ButtonBase)>
- </WithStyles(ForwardRef(ButtonBase))>
- </ForwardRef(Button)>
- </WithStyles(ForwardRef(Button))>
- <WithStyles(ForwardRef(Button))
- aria-label="ecogesture.emptyList.btn2"
- classes={
- Object {
- "label": "text-16-bold",
- "root": "btn-highlight",
- }
- }
- onClick={[Function]}
- >
- <ForwardRef(Button)
- aria-label="ecogesture.emptyList.btn2"
- classes={
- Object {
- "colorInherit": "MuiButton-colorInherit",
- "contained": "MuiButton-contained",
- "containedPrimary": "MuiButton-containedPrimary",
- "containedSecondary": "MuiButton-containedSecondary",
- "containedSizeLarge": "MuiButton-containedSizeLarge",
- "containedSizeSmall": "MuiButton-containedSizeSmall",
- "disableElevation": "MuiButton-disableElevation",
- "disabled": "Mui-disabled",
- "endIcon": "MuiButton-endIcon",
- "focusVisible": "Mui-focusVisible",
- "fullWidth": "MuiButton-fullWidth",
- "iconSizeLarge": "MuiButton-iconSizeLarge",
- "iconSizeMedium": "MuiButton-iconSizeMedium",
- "iconSizeSmall": "MuiButton-iconSizeSmall",
- "label": "MuiButton-label text-16-bold",
- "outlined": "MuiButton-outlined",
- "outlinedPrimary": "MuiButton-outlinedPrimary",
- "outlinedSecondary": "MuiButton-outlinedSecondary",
- "outlinedSizeLarge": "MuiButton-outlinedSizeLarge",
- "outlinedSizeSmall": "MuiButton-outlinedSizeSmall",
- "root": "MuiButton-root btn-highlight",
- "sizeLarge": "MuiButton-sizeLarge",
- "sizeSmall": "MuiButton-sizeSmall",
- "startIcon": "MuiButton-startIcon",
- "text": "MuiButton-text",
- "textPrimary": "MuiButton-textPrimary",
- "textSecondary": "MuiButton-textSecondary",
- "textSizeLarge": "MuiButton-textSizeLarge",
- "textSizeSmall": "MuiButton-textSizeSmall",
- }
- }
- onClick={[Function]}
- >
- <WithStyles(ForwardRef(ButtonBase))
- aria-label="ecogesture.emptyList.btn2"
- className="MuiButton-root btn-highlight MuiButton-text"
- component="button"
- disabled={false}
- focusRipple={true}
- focusVisibleClassName="Mui-focusVisible"
- onClick={[Function]}
- type="button"
- >
- <ForwardRef(ButtonBase)
- aria-label="ecogesture.emptyList.btn2"
- className="MuiButton-root btn-highlight MuiButton-text"
- classes={
- Object {
- "disabled": "Mui-disabled",
- "focusVisible": "Mui-focusVisible",
- "root": "MuiButtonBase-root",
- }
- }
- component="button"
- disabled={false}
- focusRipple={true}
- focusVisibleClassName="Mui-focusVisible"
- onClick={[Function]}
- type="button"
- >
- <button
- aria-label="ecogesture.emptyList.btn2"
- className="MuiButtonBase-root MuiButton-root btn-highlight MuiButton-text"
- disabled={false}
- onBlur={[Function]}
- onClick={[Function]}
- onDragLeave={[Function]}
- onFocus={[Function]}
- onKeyDown={[Function]}
- onKeyUp={[Function]}
- onMouseDown={[Function]}
- onMouseLeave={[Function]}
- onMouseUp={[Function]}
- onTouchEnd={[Function]}
- onTouchMove={[Function]}
- onTouchStart={[Function]}
- tabIndex={0}
- type="button"
- >
- <span
- className="MuiButton-label text-16-bold"
- >
- ecogesture.emptyList.btn2
- </span>
- <WithStyles(memo)
- center={false}
- >
- <ForwardRef(TouchRipple)
- center={false}
- classes={
- Object {
- "child": "MuiTouchRipple-child",
- "childLeaving": "MuiTouchRipple-childLeaving",
- "childPulsate": "MuiTouchRipple-childPulsate",
- "ripple": "MuiTouchRipple-ripple",
- "ripplePulsate": "MuiTouchRipple-ripplePulsate",
- "rippleVisible": "MuiTouchRipple-rippleVisible",
- "root": "MuiTouchRipple-root",
- }
- }
- >
- <span
- className="MuiTouchRipple-root"
- >
- <TransitionGroup
- childFactory={[Function]}
- component={null}
- exit={true}
- />
- </span>
- </ForwardRef(TouchRipple)>
- </WithStyles(memo)>
- </button>
- </ForwardRef(ButtonBase)>
- </WithStyles(ForwardRef(ButtonBase))>
- </ForwardRef(Button)>
- </WithStyles(ForwardRef(Button))>
- </div>
- </div>
- </div>
- </EcogestureEmptyList>
+ ecogesture.title_tab_1
+ <br />
+ (0)
+ </span>
+ <span
+ class="MuiTouchRipple-root"
+ />
+ </button>
+ <button
+ aria-controls="simple-tabpanel-2"
+ aria-selected="false"
+ class="MuiButtonBase-root MuiTab-root MuiTab-textColorInherit single-tab"
+ id="simple-tab-2"
+ role="tab"
+ tabindex="0"
+ type="button"
+ >
+ <span
+ class="MuiTab-wrapper"
+ >
+ ecogesture.title_tab_2
+ <br />
+ (0)
+ </span>
+ <span
+ class="MuiTouchRipple-root"
+ />
+ </button>
</div>
- </TabPanel>
- <TabPanel
- tab={1}
- value={0}
+ <span
+ class="PrivateTabIndicator-root-1 PrivateTabIndicator-colorSecondary-3 indicator-tab"
+ style="left: 0px; width: 0px;"
+ />
+ </div>
+ </div>
+ </mock-header>
+ <mock-content
+ heightoffset="0"
+ >
+ <div
+ aria-labelledby="simple-tab-0"
+ id="simple-tabpanel-0"
+ role="tabpanel"
+ >
+ <div
+ class="ec-empty-container"
>
<div
- aria-labelledby="simple-tab-1"
- hidden={true}
- id="simple-tabpanel-1"
- role="tabpanel"
+ class="ec-empty-content"
>
- <EcogestureEmptyList
- handleReinitClick={[Function]}
- isObjective={false}
- isSelectionDone={false}
- setTab={[Function]}
+ <svg
+ aria-hidden="true"
+ class="icon-big styles__icon___23x3R"
+ height="150"
+ width="150"
+ >
+ <use
+ xlink:href="#test-file-stub"
+ />
+ </svg>
+ <div
+ class="text-16-normal"
+ >
+ ecogesture.emptyList.obj1
+ </div>
+ <div
+ class="text-16-normal"
+ >
+ ecogesture.emptyList.obj2
+ </div>
+ <div
+ class="buttons"
>
- <div
- className="ec-empty-container"
+ <button
+ aria-label="ecogesture.emptyList.btn1"
+ class="MuiButtonBase-root MuiButton-root MuiButton-text btnSecondary"
+ tabindex="0"
+ type="button"
+ >
+ <span
+ class="MuiButton-label"
+ >
+ ecogesture.emptyList.btn1
+ </span>
+ <span
+ class="MuiTouchRipple-root"
+ />
+ </button>
+ <button
+ aria-label="ecogesture.emptyList.btn2"
+ class="MuiButtonBase-root MuiButton-root MuiButton-text btnPrimary"
+ tabindex="0"
+ type="button"
>
- <div
- className="ec-empty-content"
+ <span
+ class="MuiButton-label"
>
- <StyledIcon
- className="icon-big"
- icon="test-file-stub"
- size={150}
- >
- <Icon
- aria-hidden={true}
- className="icon-big"
- icon="test-file-stub"
- size={150}
- spin={false}
- >
- <Component
- aria-hidden={true}
- className="icon-big styles__icon___23x3R"
- height={150}
- style={Object {}}
- width={150}
- >
- <svg
- aria-hidden={true}
- className="icon-big styles__icon___23x3R"
- height={150}
- style={Object {}}
- width={150}
- >
- <use
- xlinkHref="#test-file-stub"
- />
- </svg>
- </Component>
- </Icon>
- </StyledIcon>
- <div
- className="text-16-normal text"
- >
- ecogesture.emptyList.doing1
- </div>
- <div
- className="text-16-normal text"
- >
- ecogesture.emptyList.doing2
- </div>
- <div
- className="btn-container"
- >
- <WithStyles(ForwardRef(Button))
- aria-label="ecogesture.emptyList.btn1"
- classes={
- Object {
- "label": "text-16-bold",
- "root": "btn-secondary-negative btn1",
- }
- }
- onClick={[Function]}
- >
- <ForwardRef(Button)
- aria-label="ecogesture.emptyList.btn1"
- classes={
- Object {
- "colorInherit": "MuiButton-colorInherit",
- "contained": "MuiButton-contained",
- "containedPrimary": "MuiButton-containedPrimary",
- "containedSecondary": "MuiButton-containedSecondary",
- "containedSizeLarge": "MuiButton-containedSizeLarge",
- "containedSizeSmall": "MuiButton-containedSizeSmall",
- "disableElevation": "MuiButton-disableElevation",
- "disabled": "Mui-disabled",
- "endIcon": "MuiButton-endIcon",
- "focusVisible": "Mui-focusVisible",
- "fullWidth": "MuiButton-fullWidth",
- "iconSizeLarge": "MuiButton-iconSizeLarge",
- "iconSizeMedium": "MuiButton-iconSizeMedium",
- "iconSizeSmall": "MuiButton-iconSizeSmall",
- "label": "MuiButton-label text-16-bold",
- "outlined": "MuiButton-outlined",
- "outlinedPrimary": "MuiButton-outlinedPrimary",
- "outlinedSecondary": "MuiButton-outlinedSecondary",
- "outlinedSizeLarge": "MuiButton-outlinedSizeLarge",
- "outlinedSizeSmall": "MuiButton-outlinedSizeSmall",
- "root": "MuiButton-root btn-secondary-negative btn1",
- "sizeLarge": "MuiButton-sizeLarge",
- "sizeSmall": "MuiButton-sizeSmall",
- "startIcon": "MuiButton-startIcon",
- "text": "MuiButton-text",
- "textPrimary": "MuiButton-textPrimary",
- "textSecondary": "MuiButton-textSecondary",
- "textSizeLarge": "MuiButton-textSizeLarge",
- "textSizeSmall": "MuiButton-textSizeSmall",
- }
- }
- onClick={[Function]}
- >
- <WithStyles(ForwardRef(ButtonBase))
- aria-label="ecogesture.emptyList.btn1"
- className="MuiButton-root btn-secondary-negative btn1 MuiButton-text"
- component="button"
- disabled={false}
- focusRipple={true}
- focusVisibleClassName="Mui-focusVisible"
- onClick={[Function]}
- type="button"
- >
- <ForwardRef(ButtonBase)
- aria-label="ecogesture.emptyList.btn1"
- className="MuiButton-root btn-secondary-negative btn1 MuiButton-text"
- classes={
- Object {
- "disabled": "Mui-disabled",
- "focusVisible": "Mui-focusVisible",
- "root": "MuiButtonBase-root",
- }
- }
- component="button"
- disabled={false}
- focusRipple={true}
- focusVisibleClassName="Mui-focusVisible"
- onClick={[Function]}
- type="button"
- >
- <button
- aria-label="ecogesture.emptyList.btn1"
- className="MuiButtonBase-root MuiButton-root btn-secondary-negative btn1 MuiButton-text"
- disabled={false}
- onBlur={[Function]}
- onClick={[Function]}
- onDragLeave={[Function]}
- onFocus={[Function]}
- onKeyDown={[Function]}
- onKeyUp={[Function]}
- onMouseDown={[Function]}
- onMouseLeave={[Function]}
- onMouseUp={[Function]}
- onTouchEnd={[Function]}
- onTouchMove={[Function]}
- onTouchStart={[Function]}
- tabIndex={0}
- type="button"
- >
- <span
- className="MuiButton-label text-16-bold"
- >
- ecogesture.emptyList.btn1
- </span>
- <WithStyles(memo)
- center={false}
- >
- <ForwardRef(TouchRipple)
- center={false}
- classes={
- Object {
- "child": "MuiTouchRipple-child",
- "childLeaving": "MuiTouchRipple-childLeaving",
- "childPulsate": "MuiTouchRipple-childPulsate",
- "ripple": "MuiTouchRipple-ripple",
- "ripplePulsate": "MuiTouchRipple-ripplePulsate",
- "rippleVisible": "MuiTouchRipple-rippleVisible",
- "root": "MuiTouchRipple-root",
- }
- }
- >
- <span
- className="MuiTouchRipple-root"
- >
- <TransitionGroup
- childFactory={[Function]}
- component={null}
- exit={true}
- />
- </span>
- </ForwardRef(TouchRipple)>
- </WithStyles(memo)>
- </button>
- </ForwardRef(ButtonBase)>
- </WithStyles(ForwardRef(ButtonBase))>
- </ForwardRef(Button)>
- </WithStyles(ForwardRef(Button))>
- <WithStyles(ForwardRef(Button))
- aria-label="ecogesture.emptyList.btn2"
- classes={
- Object {
- "label": "text-16-bold",
- "root": "btn-highlight",
- }
- }
- onClick={[Function]}
- >
- <ForwardRef(Button)
- aria-label="ecogesture.emptyList.btn2"
- classes={
- Object {
- "colorInherit": "MuiButton-colorInherit",
- "contained": "MuiButton-contained",
- "containedPrimary": "MuiButton-containedPrimary",
- "containedSecondary": "MuiButton-containedSecondary",
- "containedSizeLarge": "MuiButton-containedSizeLarge",
- "containedSizeSmall": "MuiButton-containedSizeSmall",
- "disableElevation": "MuiButton-disableElevation",
- "disabled": "Mui-disabled",
- "endIcon": "MuiButton-endIcon",
- "focusVisible": "Mui-focusVisible",
- "fullWidth": "MuiButton-fullWidth",
- "iconSizeLarge": "MuiButton-iconSizeLarge",
- "iconSizeMedium": "MuiButton-iconSizeMedium",
- "iconSizeSmall": "MuiButton-iconSizeSmall",
- "label": "MuiButton-label text-16-bold",
- "outlined": "MuiButton-outlined",
- "outlinedPrimary": "MuiButton-outlinedPrimary",
- "outlinedSecondary": "MuiButton-outlinedSecondary",
- "outlinedSizeLarge": "MuiButton-outlinedSizeLarge",
- "outlinedSizeSmall": "MuiButton-outlinedSizeSmall",
- "root": "MuiButton-root btn-highlight",
- "sizeLarge": "MuiButton-sizeLarge",
- "sizeSmall": "MuiButton-sizeSmall",
- "startIcon": "MuiButton-startIcon",
- "text": "MuiButton-text",
- "textPrimary": "MuiButton-textPrimary",
- "textSecondary": "MuiButton-textSecondary",
- "textSizeLarge": "MuiButton-textSizeLarge",
- "textSizeSmall": "MuiButton-textSizeSmall",
- }
- }
- onClick={[Function]}
- >
- <WithStyles(ForwardRef(ButtonBase))
- aria-label="ecogesture.emptyList.btn2"
- className="MuiButton-root btn-highlight MuiButton-text"
- component="button"
- disabled={false}
- focusRipple={true}
- focusVisibleClassName="Mui-focusVisible"
- onClick={[Function]}
- type="button"
- >
- <ForwardRef(ButtonBase)
- aria-label="ecogesture.emptyList.btn2"
- className="MuiButton-root btn-highlight MuiButton-text"
- classes={
- Object {
- "disabled": "Mui-disabled",
- "focusVisible": "Mui-focusVisible",
- "root": "MuiButtonBase-root",
- }
- }
- component="button"
- disabled={false}
- focusRipple={true}
- focusVisibleClassName="Mui-focusVisible"
- onClick={[Function]}
- type="button"
- >
- <button
- aria-label="ecogesture.emptyList.btn2"
- className="MuiButtonBase-root MuiButton-root btn-highlight MuiButton-text"
- disabled={false}
- onBlur={[Function]}
- onClick={[Function]}
- onDragLeave={[Function]}
- onFocus={[Function]}
- onKeyDown={[Function]}
- onKeyUp={[Function]}
- onMouseDown={[Function]}
- onMouseLeave={[Function]}
- onMouseUp={[Function]}
- onTouchEnd={[Function]}
- onTouchMove={[Function]}
- onTouchStart={[Function]}
- tabIndex={0}
- type="button"
- >
- <span
- className="MuiButton-label text-16-bold"
- >
- ecogesture.emptyList.btn2
- </span>
- <WithStyles(memo)
- center={false}
- >
- <ForwardRef(TouchRipple)
- center={false}
- classes={
- Object {
- "child": "MuiTouchRipple-child",
- "childLeaving": "MuiTouchRipple-childLeaving",
- "childPulsate": "MuiTouchRipple-childPulsate",
- "ripple": "MuiTouchRipple-ripple",
- "ripplePulsate": "MuiTouchRipple-ripplePulsate",
- "rippleVisible": "MuiTouchRipple-rippleVisible",
- "root": "MuiTouchRipple-root",
- }
- }
- >
- <span
- className="MuiTouchRipple-root"
- >
- <TransitionGroup
- childFactory={[Function]}
- component={null}
- exit={true}
- />
- </span>
- </ForwardRef(TouchRipple)>
- </WithStyles(memo)>
- </button>
- </ForwardRef(ButtonBase)>
- </WithStyles(ForwardRef(ButtonBase))>
- </ForwardRef(Button)>
- </WithStyles(ForwardRef(Button))>
- </div>
- </div>
- </div>
- </EcogestureEmptyList>
+ ecogesture.emptyList.btn2
+ </span>
+ <span
+ class="MuiTouchRipple-root"
+ />
+ </button>
+ </div>
</div>
- </TabPanel>
- <TabPanel
- tab={2}
- value={0}
+ </div>
+ </div>
+ <div
+ aria-labelledby="simple-tab-1"
+ hidden=""
+ id="simple-tabpanel-1"
+ role="tabpanel"
+ >
+ <div
+ class="ec-empty-container"
>
<div
- aria-labelledby="simple-tab-2"
- hidden={true}
- id="simple-tabpanel-2"
- role="tabpanel"
- />
- </TabPanel>
- <EcogestureInitModal
- handleCloseClick={[Function]}
- handleLaunchForm={[Function]}
- open={true}
- >
- <WithStyles(ForwardRef(Dialog))
- aria-labelledby="accessibility-title"
- classes={
- Object {
- "paper": "modal-paper",
- "root": "modal-root",
- }
- }
- onClose={[Function]}
- open={true}
+ class="ec-empty-content"
>
- <ForwardRef(Dialog)
- aria-labelledby="accessibility-title"
- classes={
- Object {
- "container": "MuiDialog-container",
- "paper": "MuiDialog-paper modal-paper",
- "paperFullScreen": "MuiDialog-paperFullScreen",
- "paperFullWidth": "MuiDialog-paperFullWidth",
- "paperScrollBody": "MuiDialog-paperScrollBody",
- "paperScrollPaper": "MuiDialog-paperScrollPaper",
- "paperWidthFalse": "MuiDialog-paperWidthFalse",
- "paperWidthLg": "MuiDialog-paperWidthLg",
- "paperWidthMd": "MuiDialog-paperWidthMd",
- "paperWidthSm": "MuiDialog-paperWidthSm",
- "paperWidthXl": "MuiDialog-paperWidthXl",
- "paperWidthXs": "MuiDialog-paperWidthXs",
- "root": "MuiDialog-root modal-root",
- "scrollBody": "MuiDialog-scrollBody",
- "scrollPaper": "MuiDialog-scrollPaper",
- }
- }
- onClose={[Function]}
- open={true}
+ <svg
+ aria-hidden="true"
+ class="icon-big styles__icon___23x3R"
+ height="150"
+ width="150"
>
- <ForwardRef(Modal)
- BackdropComponent={
- Object {
- "$$typeof": Symbol(react.forward_ref),
- "Naked": Object {
- "$$typeof": Symbol(react.forward_ref),
- "propTypes": Object {
- "children": [Function],
- "className": [Function],
- "classes": [Function],
- "invisible": [Function],
- "open": [Function],
- "transitionDuration": [Function],
- },
- "render": [Function],
- },
- "displayName": "WithStyles(ForwardRef(Backdrop))",
- "options": Object {
- "defaultTheme": Object {
- "breakpoints": Object {
- "between": [Function],
- "down": [Function],
- "keys": Array [
- "xs",
- "sm",
- "md",
- "lg",
- "xl",
- ],
- "only": [Function],
- "up": [Function],
- "values": Object {
- "lg": 1280,
- "md": 960,
- "sm": 600,
- "xl": 1920,
- "xs": 0,
- },
- "width": [Function],
- },
- "direction": "ltr",
- "mixins": Object {
- "gutters": [Function],
- "toolbar": Object {
- "@media (min-width:0px) and (orientation: landscape)": Object {
- "minHeight": 48,
- },
- "@media (min-width:600px)": Object {
- "minHeight": 64,
- },
- "minHeight": 56,
- },
- },
- "overrides": Object {},
- "palette": Object {
- "action": Object {
- "activatedOpacity": 0.12,
- "active": "rgba(0, 0, 0, 0.54)",
- "disabled": "rgba(0, 0, 0, 0.26)",
- "disabledBackground": "rgba(0, 0, 0, 0.12)",
- "disabledOpacity": 0.38,
- "focus": "rgba(0, 0, 0, 0.12)",
- "focusOpacity": 0.12,
- "hover": "rgba(0, 0, 0, 0.04)",
- "hoverOpacity": 0.04,
- "selected": "rgba(0, 0, 0, 0.08)",
- "selectedOpacity": 0.08,
- },
- "augmentColor": [Function],
- "background": Object {
- "default": "#fafafa",
- "paper": "#fff",
- },
- "common": Object {
- "black": "#000",
- "white": "#fff",
- },
- "contrastThreshold": 3,
- "divider": "rgba(0, 0, 0, 0.12)",
- "error": Object {
- "contrastText": "#fff",
- "dark": "#d32f2f",
- "light": "#e57373",
- "main": "#f44336",
- },
- "getContrastText": [Function],
- "grey": Object {
- "100": "#f5f5f5",
- "200": "#eeeeee",
- "300": "#e0e0e0",
- "400": "#bdbdbd",
- "50": "#fafafa",
- "500": "#9e9e9e",
- "600": "#757575",
- "700": "#616161",
- "800": "#424242",
- "900": "#212121",
- "A100": "#d5d5d5",
- "A200": "#aaaaaa",
- "A400": "#303030",
- "A700": "#616161",
- },
- "info": Object {
- "contrastText": "#fff",
- "dark": "#1976d2",
- "light": "#64b5f6",
- "main": "#2196f3",
- },
- "primary": Object {
- "contrastText": "#fff",
- "dark": "#303f9f",
- "light": "#7986cb",
- "main": "#3f51b5",
- },
- "secondary": Object {
- "contrastText": "#fff",
- "dark": "#c51162",
- "light": "#ff4081",
- "main": "#f50057",
- },
- "success": Object {
- "contrastText": "rgba(0, 0, 0, 0.87)",
- "dark": "#388e3c",
- "light": "#81c784",
- "main": "#4caf50",
- },
- "text": Object {
- "disabled": "rgba(0, 0, 0, 0.38)",
- "hint": "rgba(0, 0, 0, 0.38)",
- "primary": "rgba(0, 0, 0, 0.87)",
- "secondary": "rgba(0, 0, 0, 0.54)",
- },
- "tonalOffset": 0.2,
- "type": "light",
- "warning": Object {
- "contrastText": "rgba(0, 0, 0, 0.87)",
- "dark": "#f57c00",
- "light": "#ffb74d",
- "main": "#ff9800",
- },
- },
- "props": Object {},
- "shadows": Array [
- "none",
- "0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12)",
- "0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12)",
- "0px 3px 3px -2px rgba(0,0,0,0.2),0px 3px 4px 0px rgba(0,0,0,0.14),0px 1px 8px 0px rgba(0,0,0,0.12)",
- "0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12)",
- "0px 3px 5px -1px rgba(0,0,0,0.2),0px 5px 8px 0px rgba(0,0,0,0.14),0px 1px 14px 0px rgba(0,0,0,0.12)",
- "0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12)",
- "0px 4px 5px -2px rgba(0,0,0,0.2),0px 7px 10px 1px rgba(0,0,0,0.14),0px 2px 16px 1px rgba(0,0,0,0.12)",
- "0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12)",
- "0px 5px 6px -3px rgba(0,0,0,0.2),0px 9px 12px 1px rgba(0,0,0,0.14),0px 3px 16px 2px rgba(0,0,0,0.12)",
- "0px 6px 6px -3px rgba(0,0,0,0.2),0px 10px 14px 1px rgba(0,0,0,0.14),0px 4px 18px 3px rgba(0,0,0,0.12)",
- "0px 6px 7px -4px rgba(0,0,0,0.2),0px 11px 15px 1px rgba(0,0,0,0.14),0px 4px 20px 3px rgba(0,0,0,0.12)",
- "0px 7px 8px -4px rgba(0,0,0,0.2),0px 12px 17px 2px rgba(0,0,0,0.14),0px 5px 22px 4px rgba(0,0,0,0.12)",
- "0px 7px 8px -4px rgba(0,0,0,0.2),0px 13px 19px 2px rgba(0,0,0,0.14),0px 5px 24px 4px rgba(0,0,0,0.12)",
- "0px 7px 9px -4px rgba(0,0,0,0.2),0px 14px 21px 2px rgba(0,0,0,0.14),0px 5px 26px 4px rgba(0,0,0,0.12)",
- "0px 8px 9px -5px rgba(0,0,0,0.2),0px 15px 22px 2px rgba(0,0,0,0.14),0px 6px 28px 5px rgba(0,0,0,0.12)",
- "0px 8px 10px -5px rgba(0,0,0,0.2),0px 16px 24px 2px rgba(0,0,0,0.14),0px 6px 30px 5px rgba(0,0,0,0.12)",
- "0px 8px 11px -5px rgba(0,0,0,0.2),0px 17px 26px 2px rgba(0,0,0,0.14),0px 6px 32px 5px rgba(0,0,0,0.12)",
- "0px 9px 11px -5px rgba(0,0,0,0.2),0px 18px 28px 2px rgba(0,0,0,0.14),0px 7px 34px 6px rgba(0,0,0,0.12)",
- "0px 9px 12px -6px rgba(0,0,0,0.2),0px 19px 29px 2px rgba(0,0,0,0.14),0px 7px 36px 6px rgba(0,0,0,0.12)",
- "0px 10px 13px -6px rgba(0,0,0,0.2),0px 20px 31px 3px rgba(0,0,0,0.14),0px 8px 38px 7px rgba(0,0,0,0.12)",
- "0px 10px 13px -6px rgba(0,0,0,0.2),0px 21px 33px 3px rgba(0,0,0,0.14),0px 8px 40px 7px rgba(0,0,0,0.12)",
- "0px 10px 14px -6px rgba(0,0,0,0.2),0px 22px 35px 3px rgba(0,0,0,0.14),0px 8px 42px 7px rgba(0,0,0,0.12)",
- "0px 11px 14px -7px rgba(0,0,0,0.2),0px 23px 36px 3px rgba(0,0,0,0.14),0px 9px 44px 8px rgba(0,0,0,0.12)",
- "0px 11px 15px -7px rgba(0,0,0,0.2),0px 24px 38px 3px rgba(0,0,0,0.14),0px 9px 46px 8px rgba(0,0,0,0.12)",
- ],
- "shape": Object {
- "borderRadius": 4,
- },
- "spacing": [Function],
- "transitions": Object {
- "create": [Function],
- "duration": Object {
- "complex": 375,
- "enteringScreen": 225,
- "leavingScreen": 195,
- "short": 250,
- "shorter": 200,
- "shortest": 150,
- "standard": 300,
- },
- "easing": Object {
- "easeIn": "cubic-bezier(0.4, 0, 1, 1)",
- "easeInOut": "cubic-bezier(0.4, 0, 0.2, 1)",
- "easeOut": "cubic-bezier(0.0, 0, 0.2, 1)",
- "sharp": "cubic-bezier(0.4, 0, 0.6, 1)",
- },
- "getAutoHeightDuration": [Function],
- },
- "typography": Object {
- "body1": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "1rem",
- "fontWeight": 400,
- "letterSpacing": "0.00938em",
- "lineHeight": 1.5,
- },
- "body2": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "0.875rem",
- "fontWeight": 400,
- "letterSpacing": "0.01071em",
- "lineHeight": 1.43,
- },
- "button": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "0.875rem",
- "fontWeight": 500,
- "letterSpacing": "0.02857em",
- "lineHeight": 1.75,
- "textTransform": "uppercase",
- },
- "caption": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "0.75rem",
- "fontWeight": 400,
- "letterSpacing": "0.03333em",
- "lineHeight": 1.66,
- },
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": 14,
- "fontWeightBold": 700,
- "fontWeightLight": 300,
- "fontWeightMedium": 500,
- "fontWeightRegular": 400,
- "h1": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "6rem",
- "fontWeight": 300,
- "letterSpacing": "-0.01562em",
- "lineHeight": 1.167,
- },
- "h2": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "3.75rem",
- "fontWeight": 300,
- "letterSpacing": "-0.00833em",
- "lineHeight": 1.2,
- },
- "h3": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "3rem",
- "fontWeight": 400,
- "letterSpacing": "0em",
- "lineHeight": 1.167,
- },
- "h4": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "2.125rem",
- "fontWeight": 400,
- "letterSpacing": "0.00735em",
- "lineHeight": 1.235,
- },
- "h5": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "1.5rem",
- "fontWeight": 400,
- "letterSpacing": "0em",
- "lineHeight": 1.334,
- },
- "h6": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "1.25rem",
- "fontWeight": 500,
- "letterSpacing": "0.0075em",
- "lineHeight": 1.6,
- },
- "htmlFontSize": 16,
- "overline": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "0.75rem",
- "fontWeight": 400,
- "letterSpacing": "0.08333em",
- "lineHeight": 2.66,
- "textTransform": "uppercase",
- },
- "pxToRem": [Function],
- "round": [Function],
- "subtitle1": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "1rem",
- "fontWeight": 400,
- "letterSpacing": "0.00938em",
- "lineHeight": 1.75,
- },
- "subtitle2": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "0.875rem",
- "fontWeight": 500,
- "letterSpacing": "0.00714em",
- "lineHeight": 1.57,
- },
- },
- "zIndex": Object {
- "appBar": 1100,
- "drawer": 1200,
- "mobileStepper": 1000,
- "modal": 1300,
- "snackbar": 1400,
- "speedDial": 1050,
- "tooltip": 1500,
- },
- },
- "name": "MuiBackdrop",
- },
- "propTypes": Object {
- "classes": [Function],
- "innerRef": [Function],
- },
- "render": [Function],
- "useStyles": [Function],
- }
- }
- BackdropProps={
- Object {
- "transitionDuration": Object {
- "enter": 225,
- "exit": 195,
- },
- }
- }
- className="MuiDialog-root modal-root"
- closeAfterTransition={true}
- disableEscapeKeyDown={false}
- onClose={[Function]}
- open={true}
+ <use
+ xlink:href="#test-file-stub"
+ />
+ </svg>
+ <div
+ class="text-16-normal"
+ >
+ ecogesture.emptyList.doing1
+ </div>
+ <div
+ class="text-16-normal"
+ >
+ ecogesture.emptyList.doing2
+ </div>
+ <div
+ class="buttons"
+ >
+ <button
+ aria-label="ecogesture.emptyList.btn1"
+ class="MuiButtonBase-root MuiButton-root MuiButton-text btnSecondary"
+ tabindex="0"
+ type="button"
>
- <ForwardRef(Portal)
- disablePortal={false}
+ <span
+ class="MuiButton-label"
>
- <Portal
- containerInfo={
- <body
- style="padding-right: 0px; overflow: hidden;"
- >
- <div
- class="MuiDialog-root modal-root"
- role="presentation"
- style="position: fixed; z-index: 1300; right: 0px; bottom: 0px; top: 0px; left: 0px;"
- >
- <div
- aria-hidden="true"
- class="MuiBackdrop-root"
- style="opacity: 1; webkit-transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"
- />
- <div
- data-test="sentinelStart"
- tabindex="0"
- />
- <div
- class="MuiDialog-container MuiDialog-scrollPaper"
- role="none presentation"
- style="opacity: 1; webkit-transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"
- tabindex="-1"
- >
- <div
- aria-labelledby="accessibility-title"
- class="MuiPaper-root MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm MuiPaper-elevation24 MuiPaper-rounded"
- role="dialog"
- >
- <div
- id="accessibility-title"
- >
- feedback.accessibility.window_title
- </div>
- <button
- aria-label="feedback.accessibility.button_close"
- class="MuiButtonBase-root MuiIconButton-root modal-paper-close-button"
- tabindex="0"
- type="button"
- >
- <span
- class="MuiIconButton-label"
- >
- <svg
- class="styles__icon___23x3R"
- height="16"
- width="16"
- >
- <use
- xlink:href="#test-file-stub"
- />
- </svg>
- </span>
- <span
- class="MuiTouchRipple-root"
- />
- </button>
- <div
- class="eg-init-modal"
- >
- <div
- class="title text-20-bold"
- >
- ecogesture.initModal.title
- </div>
- <div
- class="text-16-normal text"
- >
- ecogesture.initModal.text1
- </div>
- <div
- class="text-16-normal text"
- >
- ecogesture.initModal.text2
- </div>
- <div
- class="buttons-container"
- >
- <button
- aria-label="ecogesture.initModal.btn1"
- class="MuiButtonBase-root MuiButton-root btn-secondary-negative MuiButton-text"
- tabindex="0"
- type="button"
- >
- <span
- class="MuiButton-label text-16-bold"
- >
- ecogesture.initModal.btn1
- </span>
- <span
- class="MuiTouchRipple-root"
- />
- </button>
- <button
- aria-label="ecogesture.initModal.btn2"
- class="MuiButtonBase-root MuiButton-root btn-profile-next rounded MuiButton-text"
- tabindex="0"
- type="button"
- >
- <span
- class="MuiButton-label text-16-bold"
- >
- ecogesture.initModal.btn2
- </span>
- <span
- class="MuiTouchRipple-root"
- />
- </button>
- </div>
- </div>
- </div>
- </div>
- <div
- data-test="sentinelEnd"
- tabindex="0"
- />
- </div>
- </body>
- }
- >
- <div
- className="MuiDialog-root modal-root"
- onKeyDown={[Function]}
- role="presentation"
- style={
- Object {
- "bottom": 0,
- "left": 0,
- "position": "fixed",
- "right": 0,
- "top": 0,
- "zIndex": 1300,
- }
- }
- >
- <WithStyles(ForwardRef(Backdrop))
- onClick={[Function]}
- open={true}
- transitionDuration={
- Object {
- "enter": 225,
- "exit": 195,
- }
- }
- >
- <ForwardRef(Backdrop)
- classes={
- Object {
- "invisible": "MuiBackdrop-invisible",
- "root": "MuiBackdrop-root",
- }
- }
- onClick={[Function]}
- open={true}
- transitionDuration={
- Object {
- "enter": 225,
- "exit": 195,
- }
- }
- >
- <ForwardRef(Fade)
- in={true}
- onClick={[Function]}
- timeout={
- Object {
- "enter": 225,
- "exit": 195,
- }
- }
- >
- <Transition
- appear={true}
- enter={true}
- exit={true}
- in={true}
- mountOnEnter={false}
- onClick={[Function]}
- onEnter={[Function]}
- onEntered={[Function]}
- onEntering={[Function]}
- onExit={[Function]}
- onExited={[Function]}
- onExiting={[Function]}
- timeout={
- Object {
- "enter": 225,
- "exit": 195,
- }
- }
- unmountOnExit={false}
- >
- <div
- aria-hidden={true}
- className="MuiBackdrop-root"
- onClick={[Function]}
- style={
- Object {
- "opacity": 1,
- "visibility": undefined,
- }
- }
- />
- </Transition>
- </ForwardRef(Fade)>
- </ForwardRef(Backdrop)>
- </WithStyles(ForwardRef(Backdrop))>
- <Unstable_TrapFocus
- disableAutoFocus={false}
- disableEnforceFocus={false}
- disableRestoreFocus={false}
- getDoc={[Function]}
- isEnabled={[Function]}
- open={true}
- >
- <div
- data-test="sentinelStart"
- tabIndex={0}
- />
- <ForwardRef(Fade)
- appear={true}
- in={true}
- onEnter={[Function]}
- onExited={[Function]}
- role="none presentation"
- tabIndex="-1"
- timeout={
- Object {
- "enter": 225,
- "exit": 195,
- }
- }
- >
- <Transition
- appear={true}
- enter={true}
- exit={true}
- in={true}
- mountOnEnter={false}
- onEnter={[Function]}
- onEntered={[Function]}
- onEntering={[Function]}
- onExit={[Function]}
- onExited={[Function]}
- onExiting={[Function]}
- role="none presentation"
- tabIndex="-1"
- timeout={
- Object {
- "enter": 225,
- "exit": 195,
- }
- }
- unmountOnExit={false}
- >
- <div
- className="MuiDialog-container MuiDialog-scrollPaper"
- onMouseDown={[Function]}
- onMouseUp={[Function]}
- role="none presentation"
- style={
- Object {
- "opacity": 1,
- "visibility": undefined,
- }
- }
- tabIndex="-1"
- >
- <WithStyles(ForwardRef(Paper))
- aria-labelledby="accessibility-title"
- className="MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm"
- elevation={24}
- role="dialog"
- >
- <ForwardRef(Paper)
- aria-labelledby="accessibility-title"
- className="MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm"
- classes={
- Object {
- "elevation0": "MuiPaper-elevation0",
- "elevation1": "MuiPaper-elevation1",
- "elevation10": "MuiPaper-elevation10",
- "elevation11": "MuiPaper-elevation11",
- "elevation12": "MuiPaper-elevation12",
- "elevation13": "MuiPaper-elevation13",
- "elevation14": "MuiPaper-elevation14",
- "elevation15": "MuiPaper-elevation15",
- "elevation16": "MuiPaper-elevation16",
- "elevation17": "MuiPaper-elevation17",
- "elevation18": "MuiPaper-elevation18",
- "elevation19": "MuiPaper-elevation19",
- "elevation2": "MuiPaper-elevation2",
- "elevation20": "MuiPaper-elevation20",
- "elevation21": "MuiPaper-elevation21",
- "elevation22": "MuiPaper-elevation22",
- "elevation23": "MuiPaper-elevation23",
- "elevation24": "MuiPaper-elevation24",
- "elevation3": "MuiPaper-elevation3",
- "elevation4": "MuiPaper-elevation4",
- "elevation5": "MuiPaper-elevation5",
- "elevation6": "MuiPaper-elevation6",
- "elevation7": "MuiPaper-elevation7",
- "elevation8": "MuiPaper-elevation8",
- "elevation9": "MuiPaper-elevation9",
- "outlined": "MuiPaper-outlined",
- "root": "MuiPaper-root",
- "rounded": "MuiPaper-rounded",
- }
- }
- elevation={24}
- role="dialog"
- >
- <div
- aria-labelledby="accessibility-title"
- className="MuiPaper-root MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm MuiPaper-elevation24 MuiPaper-rounded"
- role="dialog"
- >
- <div
- id="accessibility-title"
- >
- feedback.accessibility.window_title
- </div>
- <WithStyles(ForwardRef(IconButton))
- aria-label="feedback.accessibility.button_close"
- className="modal-paper-close-button"
- onClick={[Function]}
- >
- <ForwardRef(IconButton)
- aria-label="feedback.accessibility.button_close"
- className="modal-paper-close-button"
- classes={
- Object {
- "colorInherit": "MuiIconButton-colorInherit",
- "colorPrimary": "MuiIconButton-colorPrimary",
- "colorSecondary": "MuiIconButton-colorSecondary",
- "disabled": "Mui-disabled",
- "edgeEnd": "MuiIconButton-edgeEnd",
- "edgeStart": "MuiIconButton-edgeStart",
- "label": "MuiIconButton-label",
- "root": "MuiIconButton-root",
- "sizeSmall": "MuiIconButton-sizeSmall",
- }
- }
- onClick={[Function]}
- >
- <WithStyles(ForwardRef(ButtonBase))
- aria-label="feedback.accessibility.button_close"
- centerRipple={true}
- className="MuiIconButton-root modal-paper-close-button"
- disabled={false}
- focusRipple={true}
- onClick={[Function]}
- >
- <ForwardRef(ButtonBase)
- aria-label="feedback.accessibility.button_close"
- centerRipple={true}
- className="MuiIconButton-root modal-paper-close-button"
- classes={
- Object {
- "disabled": "Mui-disabled",
- "focusVisible": "Mui-focusVisible",
- "root": "MuiButtonBase-root",
- }
- }
- disabled={false}
- focusRipple={true}
- onClick={[Function]}
- >
- <button
- aria-label="feedback.accessibility.button_close"
- className="MuiButtonBase-root MuiIconButton-root modal-paper-close-button"
- disabled={false}
- onBlur={[Function]}
- onClick={[Function]}
- onDragLeave={[Function]}
- onFocus={[Function]}
- onKeyDown={[Function]}
- onKeyUp={[Function]}
- onMouseDown={[Function]}
- onMouseLeave={[Function]}
- onMouseUp={[Function]}
- onTouchEnd={[Function]}
- onTouchMove={[Function]}
- onTouchStart={[Function]}
- tabIndex={0}
- type="button"
- >
- <span
- className="MuiIconButton-label"
- >
- <Icon
- icon="test-file-stub"
- size={16}
- spin={false}
- >
- <Component
- className="styles__icon___23x3R"
- height={16}
- style={Object {}}
- width={16}
- >
- <svg
- className="styles__icon___23x3R"
- height={16}
- style={Object {}}
- width={16}
- >
- <use
- xlinkHref="#test-file-stub"
- />
- </svg>
- </Component>
- </Icon>
- </span>
- <WithStyles(memo)
- center={true}
- >
- <ForwardRef(TouchRipple)
- center={true}
- classes={
- Object {
- "child": "MuiTouchRipple-child",
- "childLeaving": "MuiTouchRipple-childLeaving",
- "childPulsate": "MuiTouchRipple-childPulsate",
- "ripple": "MuiTouchRipple-ripple",
- "ripplePulsate": "MuiTouchRipple-ripplePulsate",
- "rippleVisible": "MuiTouchRipple-rippleVisible",
- "root": "MuiTouchRipple-root",
- }
- }
- >
- <span
- className="MuiTouchRipple-root"
- >
- <TransitionGroup
- childFactory={[Function]}
- component={null}
- exit={true}
- />
- </span>
- </ForwardRef(TouchRipple)>
- </WithStyles(memo)>
- </button>
- </ForwardRef(ButtonBase)>
- </WithStyles(ForwardRef(ButtonBase))>
- </ForwardRef(IconButton)>
- </WithStyles(ForwardRef(IconButton))>
- <div
- className="eg-init-modal"
- >
- <div
- className="title text-20-bold"
- >
- ecogesture.initModal.title
- </div>
- <div
- className="text-16-normal text"
- >
- ecogesture.initModal.text1
- </div>
- <div
- className="text-16-normal text"
- >
- ecogesture.initModal.text2
- </div>
- <div
- className="buttons-container"
- >
- <WithStyles(ForwardRef(Button))
- aria-label="ecogesture.initModal.btn1"
- classes={
- Object {
- "label": "text-16-bold",
- "root": "btn-secondary-negative",
- }
- }
- onClick={[Function]}
- >
- <ForwardRef(Button)
- aria-label="ecogesture.initModal.btn1"
- classes={
- Object {
- "colorInherit": "MuiButton-colorInherit",
- "contained": "MuiButton-contained",
- "containedPrimary": "MuiButton-containedPrimary",
- "containedSecondary": "MuiButton-containedSecondary",
- "containedSizeLarge": "MuiButton-containedSizeLarge",
- "containedSizeSmall": "MuiButton-containedSizeSmall",
- "disableElevation": "MuiButton-disableElevation",
- "disabled": "Mui-disabled",
- "endIcon": "MuiButton-endIcon",
- "focusVisible": "Mui-focusVisible",
- "fullWidth": "MuiButton-fullWidth",
- "iconSizeLarge": "MuiButton-iconSizeLarge",
- "iconSizeMedium": "MuiButton-iconSizeMedium",
- "iconSizeSmall": "MuiButton-iconSizeSmall",
- "label": "MuiButton-label text-16-bold",
- "outlined": "MuiButton-outlined",
- "outlinedPrimary": "MuiButton-outlinedPrimary",
- "outlinedSecondary": "MuiButton-outlinedSecondary",
- "outlinedSizeLarge": "MuiButton-outlinedSizeLarge",
- "outlinedSizeSmall": "MuiButton-outlinedSizeSmall",
- "root": "MuiButton-root btn-secondary-negative",
- "sizeLarge": "MuiButton-sizeLarge",
- "sizeSmall": "MuiButton-sizeSmall",
- "startIcon": "MuiButton-startIcon",
- "text": "MuiButton-text",
- "textPrimary": "MuiButton-textPrimary",
- "textSecondary": "MuiButton-textSecondary",
- "textSizeLarge": "MuiButton-textSizeLarge",
- "textSizeSmall": "MuiButton-textSizeSmall",
- }
- }
- onClick={[Function]}
- >
- <WithStyles(ForwardRef(ButtonBase))
- aria-label="ecogesture.initModal.btn1"
- className="MuiButton-root btn-secondary-negative MuiButton-text"
- component="button"
- disabled={false}
- focusRipple={true}
- focusVisibleClassName="Mui-focusVisible"
- onClick={[Function]}
- type="button"
- >
- <ForwardRef(ButtonBase)
- aria-label="ecogesture.initModal.btn1"
- className="MuiButton-root btn-secondary-negative MuiButton-text"
- classes={
- Object {
- "disabled": "Mui-disabled",
- "focusVisible": "Mui-focusVisible",
- "root": "MuiButtonBase-root",
- }
- }
- component="button"
- disabled={false}
- focusRipple={true}
- focusVisibleClassName="Mui-focusVisible"
- onClick={[Function]}
- type="button"
- >
- <button
- aria-label="ecogesture.initModal.btn1"
- className="MuiButtonBase-root MuiButton-root btn-secondary-negative MuiButton-text"
- disabled={false}
- onBlur={[Function]}
- onClick={[Function]}
- onDragLeave={[Function]}
- onFocus={[Function]}
- onKeyDown={[Function]}
- onKeyUp={[Function]}
- onMouseDown={[Function]}
- onMouseLeave={[Function]}
- onMouseUp={[Function]}
- onTouchEnd={[Function]}
- onTouchMove={[Function]}
- onTouchStart={[Function]}
- tabIndex={0}
- type="button"
- >
- <span
- className="MuiButton-label text-16-bold"
- >
- ecogesture.initModal.btn1
- </span>
- <WithStyles(memo)
- center={false}
- >
- <ForwardRef(TouchRipple)
- center={false}
- classes={
- Object {
- "child": "MuiTouchRipple-child",
- "childLeaving": "MuiTouchRipple-childLeaving",
- "childPulsate": "MuiTouchRipple-childPulsate",
- "ripple": "MuiTouchRipple-ripple",
- "ripplePulsate": "MuiTouchRipple-ripplePulsate",
- "rippleVisible": "MuiTouchRipple-rippleVisible",
- "root": "MuiTouchRipple-root",
- }
- }
- >
- <span
- className="MuiTouchRipple-root"
- >
- <TransitionGroup
- childFactory={[Function]}
- component={null}
- exit={true}
- />
- </span>
- </ForwardRef(TouchRipple)>
- </WithStyles(memo)>
- </button>
- </ForwardRef(ButtonBase)>
- </WithStyles(ForwardRef(ButtonBase))>
- </ForwardRef(Button)>
- </WithStyles(ForwardRef(Button))>
- <WithStyles(ForwardRef(Button))
- aria-label="ecogesture.initModal.btn2"
- classes={
- Object {
- "label": "text-16-bold",
- "root": "btn-profile-next rounded",
- }
- }
- onClick={[Function]}
- >
- <ForwardRef(Button)
- aria-label="ecogesture.initModal.btn2"
- classes={
- Object {
- "colorInherit": "MuiButton-colorInherit",
- "contained": "MuiButton-contained",
- "containedPrimary": "MuiButton-containedPrimary",
- "containedSecondary": "MuiButton-containedSecondary",
- "containedSizeLarge": "MuiButton-containedSizeLarge",
- "containedSizeSmall": "MuiButton-containedSizeSmall",
- "disableElevation": "MuiButton-disableElevation",
- "disabled": "Mui-disabled",
- "endIcon": "MuiButton-endIcon",
- "focusVisible": "Mui-focusVisible",
- "fullWidth": "MuiButton-fullWidth",
- "iconSizeLarge": "MuiButton-iconSizeLarge",
- "iconSizeMedium": "MuiButton-iconSizeMedium",
- "iconSizeSmall": "MuiButton-iconSizeSmall",
- "label": "MuiButton-label text-16-bold",
- "outlined": "MuiButton-outlined",
- "outlinedPrimary": "MuiButton-outlinedPrimary",
- "outlinedSecondary": "MuiButton-outlinedSecondary",
- "outlinedSizeLarge": "MuiButton-outlinedSizeLarge",
- "outlinedSizeSmall": "MuiButton-outlinedSizeSmall",
- "root": "MuiButton-root btn-profile-next rounded",
- "sizeLarge": "MuiButton-sizeLarge",
- "sizeSmall": "MuiButton-sizeSmall",
- "startIcon": "MuiButton-startIcon",
- "text": "MuiButton-text",
- "textPrimary": "MuiButton-textPrimary",
- "textSecondary": "MuiButton-textSecondary",
- "textSizeLarge": "MuiButton-textSizeLarge",
- "textSizeSmall": "MuiButton-textSizeSmall",
- }
- }
- onClick={[Function]}
- >
- <WithStyles(ForwardRef(ButtonBase))
- aria-label="ecogesture.initModal.btn2"
- className="MuiButton-root btn-profile-next rounded MuiButton-text"
- component="button"
- disabled={false}
- focusRipple={true}
- focusVisibleClassName="Mui-focusVisible"
- onClick={[Function]}
- type="button"
- >
- <ForwardRef(ButtonBase)
- aria-label="ecogesture.initModal.btn2"
- className="MuiButton-root btn-profile-next rounded MuiButton-text"
- classes={
- Object {
- "disabled": "Mui-disabled",
- "focusVisible": "Mui-focusVisible",
- "root": "MuiButtonBase-root",
- }
- }
- component="button"
- disabled={false}
- focusRipple={true}
- focusVisibleClassName="Mui-focusVisible"
- onClick={[Function]}
- type="button"
- >
- <button
- aria-label="ecogesture.initModal.btn2"
- className="MuiButtonBase-root MuiButton-root btn-profile-next rounded MuiButton-text"
- disabled={false}
- onBlur={[Function]}
- onClick={[Function]}
- onDragLeave={[Function]}
- onFocus={[Function]}
- onKeyDown={[Function]}
- onKeyUp={[Function]}
- onMouseDown={[Function]}
- onMouseLeave={[Function]}
- onMouseUp={[Function]}
- onTouchEnd={[Function]}
- onTouchMove={[Function]}
- onTouchStart={[Function]}
- tabIndex={0}
- type="button"
- >
- <span
- className="MuiButton-label text-16-bold"
- >
- ecogesture.initModal.btn2
- </span>
- <WithStyles(memo)
- center={false}
- >
- <ForwardRef(TouchRipple)
- center={false}
- classes={
- Object {
- "child": "MuiTouchRipple-child",
- "childLeaving": "MuiTouchRipple-childLeaving",
- "childPulsate": "MuiTouchRipple-childPulsate",
- "ripple": "MuiTouchRipple-ripple",
- "ripplePulsate": "MuiTouchRipple-ripplePulsate",
- "rippleVisible": "MuiTouchRipple-rippleVisible",
- "root": "MuiTouchRipple-root",
- }
- }
- >
- <span
- className="MuiTouchRipple-root"
- >
- <TransitionGroup
- childFactory={[Function]}
- component={null}
- exit={true}
- />
- </span>
- </ForwardRef(TouchRipple)>
- </WithStyles(memo)>
- </button>
- </ForwardRef(ButtonBase)>
- </WithStyles(ForwardRef(ButtonBase))>
- </ForwardRef(Button)>
- </WithStyles(ForwardRef(Button))>
- </div>
- </div>
- </div>
- </ForwardRef(Paper)>
- </WithStyles(ForwardRef(Paper))>
- </div>
- </Transition>
- </ForwardRef(Fade)>
- <div
- data-test="sentinelEnd"
- tabIndex={0}
- />
- </Unstable_TrapFocus>
- </div>
- </Portal>
- </ForwardRef(Portal)>
- </ForwardRef(Modal)>
- </ForwardRef(Dialog)>
- </WithStyles(ForwardRef(Dialog))>
- </EcogestureInitModal>
- </mock-content>
- </EcogestureTabsView>
-</Provider>
+ ecogesture.emptyList.btn1
+ </span>
+ <span
+ class="MuiTouchRipple-root"
+ />
+ </button>
+ <button
+ aria-label="ecogesture.emptyList.btn2"
+ class="MuiButtonBase-root MuiButton-root MuiButton-text btnPrimary"
+ tabindex="0"
+ type="button"
+ >
+ <span
+ class="MuiButton-label"
+ >
+ ecogesture.emptyList.btn2
+ </span>
+ <span
+ class="MuiTouchRipple-root"
+ />
+ </button>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div
+ aria-labelledby="simple-tab-2"
+ hidden=""
+ id="simple-tabpanel-2"
+ role="tabpanel"
+ />
+ </mock-content>
+</div>
`;
diff --git a/src/components/Ecogesture/__snapshots__/SingleEcogestureView.spec.tsx.snap b/src/components/Ecogesture/__snapshots__/SingleEcogestureView.spec.tsx.snap
index 49280df12fef51b78697af6bdcd84ea7ba2bb082..ef9a7d029c57ed922153d936c662b93acdba7e00 100644
--- a/src/components/Ecogesture/__snapshots__/SingleEcogestureView.spec.tsx.snap
+++ b/src/components/Ecogesture/__snapshots__/SingleEcogestureView.spec.tsx.snap
@@ -1,436 +1,154 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`SingleEcogesture component should be rendered correctly 1`] = `
-<Provider
- store={
- Object {
- "clearActions": [Function],
- "dispatch": [Function],
- "getActions": [Function],
- "getState": [Function],
- "replaceReducer": [Function],
- "subscribe": [Function],
- }
- }
->
- <SingleEcogestureView>
- <mock-cozybar
- displayBackArrow={true}
- titleKey="common.title_ecogesture"
- />
- <mock-header
- desktopTitleKey="common.title_ecogesture"
- displayBackArrow={true}
- setHeaderHeight={[Function]}
- />
- <mock-content
- heightOffset={0}
+<div>
+ <mock-cozybar
+ displaybackarrow="true"
+ titlekey="common.title_ecogesture"
+ />
+ <mock-header
+ desktoptitlekey="common.title_ecogesture"
+ displaybackarrow="true"
+ />
+ <mock-content
+ heightoffset="0"
+ >
+ <div
+ class="single-ecogesture"
>
<div
- className="single-ecogesture"
+ class="icon-container"
+ >
+ <svg
+ aria-hidden="true"
+ class="icon-big styles__icon___23x3R"
+ height="220"
+ width="220"
+ >
+ <use
+ xlink:href="#test-file-stub"
+ />
+ </svg>
+ </div>
+ <div
+ class="details"
>
<div
- className="icon-container"
+ class="text-22-bold title"
>
- <StyledIcon
- className="icon-big"
- icon="test-file-stub"
- size={220}
- >
- <Icon
- aria-hidden={true}
- className="icon-big"
- icon="test-file-stub"
- size={220}
- spin={false}
- >
- <Component
- aria-hidden={true}
- className="icon-big styles__icon___23x3R"
- height={220}
- style={Object {}}
- width={220}
- >
- <svg
- aria-hidden={true}
- className="icon-big styles__icon___23x3R"
- height={220}
- style={Object {}}
- width={220}
- >
- <use
- xlinkHref="#test-file-stub"
- />
- </svg>
- </Component>
- </Icon>
- </StyledIcon>
+ Bonhomme de neige
</div>
<div
- className="details"
+ class="efficiency"
>
- <div
- className="text-22 title"
+ <span
+ class="text-14-normal"
>
- Bonhomme de neige
- </div>
- <div
- className="efficiency"
- >
- <span
- className="text text-14-normal"
- >
- ecogesture_modal.efficiency
- </span>
- <mock-EfficiencyRating
- result={4}
- />
- </div>
+ ecogesture_modal.efficiency
+ </span>
+ <mock-efficiencyrating
+ result="4"
+ />
</div>
+ </div>
+ <div
+ class="styled-container"
+ >
<div
- className="styled-container"
+ class="long-name text-18-bold"
>
- <div
- className="long-name text-18-bold"
- >
- Je baisse le chauffage en mode hors gel lorsque je m'absente plus de 2 jours.
- </div>
- <div
- className="showMore text-15-normal"
- onClick={[Function]}
- role="button"
+ Je baisse le chauffage en mode hors gel lorsque je m'absente plus de 2 jours.
+ </div>
+ <button
+ class="MuiButtonBase-root MuiButton-root btnText showMore MuiButton-text"
+ tabindex="0"
+ type="button"
+ >
+ <span
+ class="MuiButton-label text-15-normal"
>
ecogesture_modal.show_more
- </div>
- <WithStyles(ForwardRef(Collapse))
- in={false}
+ </span>
+ <span
+ class="MuiTouchRipple-root"
+ />
+ </button>
+ <div
+ class="MuiCollapse-root MuiCollapse-hidden"
+ style="min-height: 0px;"
+ >
+ <div
+ class="MuiCollapse-wrapper"
>
- <ForwardRef(Collapse)
- classes={
- Object {
- "entered": "MuiCollapse-entered",
- "hidden": "MuiCollapse-hidden",
- "root": "MuiCollapse-root",
- "wrapper": "MuiCollapse-wrapper",
- "wrapperInner": "MuiCollapse-wrapperInner",
- }
- }
- in={false}
+ <div
+ class="MuiCollapse-wrapperInner"
>
- <Transition
- addEndListener={[Function]}
- appear={false}
- enter={true}
- exit={true}
- in={false}
- mountOnEnter={false}
- onEnter={[Function]}
- onEntered={[Function]}
- onEntering={[Function]}
- onExit={[Function]}
- onExited={[Function]}
- onExiting={[Function]}
- timeout={300}
- unmountOnExit={false}
+ <div
+ class="longDescription text-16-normal-150"
>
- <div
- className="MuiCollapse-root MuiCollapse-hidden"
- style={
- Object {
- "minHeight": "0px",
- }
- }
- >
- <div
- className="MuiCollapse-wrapper"
- >
- <div
- className="MuiCollapse-wrapperInner"
- >
- <div
- className="longDescription text-16-normal-150"
- >
- On se demande parfois si cela vaut le coup de "couper le chauffage" quand on s’absente… dès qu’il s’agit d’un week-end la réponse est « oui sûrement » ! Attention cependant au retour à ne pas faire de la surchauffe ! L’idéal est bien évidemment de régler sa programmation pour que le chauffage se relance quelques heures avant votre retour…
- </div>
- </div>
- </div>
- </div>
- </Transition>
- </ForwardRef(Collapse)>
- </WithStyles(ForwardRef(Collapse))>
+ On se demande parfois si cela vaut le coup de "couper le chauffage" quand on s’absente… dès qu’il s’agit d’un week-end la réponse est « oui sûrement » ! Attention cependant au retour à ne pas faire de la surchauffe ! L’idéal est bien évidemment de régler sa programmation pour que le chauffage se relance quelques heures avant votre retour…
+ </div>
+ </div>
+ </div>
</div>
- <div
- className="buttons-selection"
+ </div>
+ <div
+ class="buttons-selection"
+ >
+ <button
+ aria-label="ecogesture.objective"
+ class="MuiButtonBase-root MuiIconButton-root btnSecondary objective-btn false"
+ tabindex="0"
+ type="button"
>
- <WithStyles(ForwardRef(IconButton))
- aria-label="ecogesture.objective"
- classes={
- Object {
- "label": "text-15-normal",
- "root": "btn-secondary-negative objective-btn false",
- }
- }
- onClick={[Function]}
+ <span
+ class="MuiIconButton-label text-15-normal"
>
- <ForwardRef(IconButton)
- aria-label="ecogesture.objective"
- classes={
- Object {
- "colorInherit": "MuiIconButton-colorInherit",
- "colorPrimary": "MuiIconButton-colorPrimary",
- "colorSecondary": "MuiIconButton-colorSecondary",
- "disabled": "Mui-disabled",
- "edgeEnd": "MuiIconButton-edgeEnd",
- "edgeStart": "MuiIconButton-edgeStart",
- "label": "MuiIconButton-label text-15-normal",
- "root": "MuiIconButton-root btn-secondary-negative objective-btn false",
- "sizeSmall": "MuiIconButton-sizeSmall",
- }
- }
- onClick={[Function]}
+ <svg
+ class="status-icon styles__icon___23x3R"
+ height="40"
+ width="40"
>
- <WithStyles(ForwardRef(ButtonBase))
- aria-label="ecogesture.objective"
- centerRipple={true}
- className="MuiIconButton-root btn-secondary-negative objective-btn false"
- disabled={false}
- focusRipple={true}
- onClick={[Function]}
- >
- <ForwardRef(ButtonBase)
- aria-label="ecogesture.objective"
- centerRipple={true}
- className="MuiIconButton-root btn-secondary-negative objective-btn false"
- classes={
- Object {
- "disabled": "Mui-disabled",
- "focusVisible": "Mui-focusVisible",
- "root": "MuiButtonBase-root",
- }
- }
- disabled={false}
- focusRipple={true}
- onClick={[Function]}
- >
- <button
- aria-label="ecogesture.objective"
- className="MuiButtonBase-root MuiIconButton-root btn-secondary-negative objective-btn false"
- disabled={false}
- onBlur={[Function]}
- onClick={[Function]}
- onDragLeave={[Function]}
- onFocus={[Function]}
- onKeyDown={[Function]}
- onKeyUp={[Function]}
- onMouseDown={[Function]}
- onMouseLeave={[Function]}
- onMouseUp={[Function]}
- onTouchEnd={[Function]}
- onTouchMove={[Function]}
- onTouchStart={[Function]}
- tabIndex={0}
- type="button"
- >
- <span
- className="MuiIconButton-label text-15-normal"
- >
- <Icon
- className="status-icon"
- icon="test-file-stub"
- size={40}
- spin={false}
- >
- <Component
- className="status-icon styles__icon___23x3R"
- height={40}
- style={Object {}}
- width={40}
- >
- <svg
- className="status-icon styles__icon___23x3R"
- height={40}
- style={Object {}}
- width={40}
- >
- <use
- xlinkHref="#test-file-stub"
- />
- </svg>
- </Component>
- </Icon>
- <span>
- ecogesture.objective
- </span>
- </span>
- <WithStyles(memo)
- center={true}
- >
- <ForwardRef(TouchRipple)
- center={true}
- classes={
- Object {
- "child": "MuiTouchRipple-child",
- "childLeaving": "MuiTouchRipple-childLeaving",
- "childPulsate": "MuiTouchRipple-childPulsate",
- "ripple": "MuiTouchRipple-ripple",
- "ripplePulsate": "MuiTouchRipple-ripplePulsate",
- "rippleVisible": "MuiTouchRipple-rippleVisible",
- "root": "MuiTouchRipple-root",
- }
- }
- >
- <span
- className="MuiTouchRipple-root"
- >
- <TransitionGroup
- childFactory={[Function]}
- component={null}
- exit={true}
- />
- </span>
- </ForwardRef(TouchRipple)>
- </WithStyles(memo)>
- </button>
- </ForwardRef(ButtonBase)>
- </WithStyles(ForwardRef(ButtonBase))>
- </ForwardRef(IconButton)>
- </WithStyles(ForwardRef(IconButton))>
- <WithStyles(ForwardRef(IconButton))
- aria-label="ecogesture.doing"
- classes={
- Object {
- "label": "text-15-normal",
- "root": "btn-secondary-negative doing-btn false",
- }
- }
- onClick={[Function]}
+ <use
+ xlink:href="#test-file-stub"
+ />
+ </svg>
+ <span>
+ ecogesture.objective
+ </span>
+ </span>
+ <span
+ class="MuiTouchRipple-root"
+ />
+ </button>
+ <button
+ aria-label="ecogesture.doing"
+ class="MuiButtonBase-root MuiIconButton-root btnSecondary doing-btn false"
+ tabindex="0"
+ type="button"
+ >
+ <span
+ class="MuiIconButton-label text-15-normal"
>
- <ForwardRef(IconButton)
- aria-label="ecogesture.doing"
- classes={
- Object {
- "colorInherit": "MuiIconButton-colorInherit",
- "colorPrimary": "MuiIconButton-colorPrimary",
- "colorSecondary": "MuiIconButton-colorSecondary",
- "disabled": "Mui-disabled",
- "edgeEnd": "MuiIconButton-edgeEnd",
- "edgeStart": "MuiIconButton-edgeStart",
- "label": "MuiIconButton-label text-15-normal",
- "root": "MuiIconButton-root btn-secondary-negative doing-btn false",
- "sizeSmall": "MuiIconButton-sizeSmall",
- }
- }
- onClick={[Function]}
+ <svg
+ class="status-icon styles__icon___23x3R"
+ height="40"
+ width="40"
>
- <WithStyles(ForwardRef(ButtonBase))
- aria-label="ecogesture.doing"
- centerRipple={true}
- className="MuiIconButton-root btn-secondary-negative doing-btn false"
- disabled={false}
- focusRipple={true}
- onClick={[Function]}
- >
- <ForwardRef(ButtonBase)
- aria-label="ecogesture.doing"
- centerRipple={true}
- className="MuiIconButton-root btn-secondary-negative doing-btn false"
- classes={
- Object {
- "disabled": "Mui-disabled",
- "focusVisible": "Mui-focusVisible",
- "root": "MuiButtonBase-root",
- }
- }
- disabled={false}
- focusRipple={true}
- onClick={[Function]}
- >
- <button
- aria-label="ecogesture.doing"
- className="MuiButtonBase-root MuiIconButton-root btn-secondary-negative doing-btn false"
- disabled={false}
- onBlur={[Function]}
- onClick={[Function]}
- onDragLeave={[Function]}
- onFocus={[Function]}
- onKeyDown={[Function]}
- onKeyUp={[Function]}
- onMouseDown={[Function]}
- onMouseLeave={[Function]}
- onMouseUp={[Function]}
- onTouchEnd={[Function]}
- onTouchMove={[Function]}
- onTouchStart={[Function]}
- tabIndex={0}
- type="button"
- >
- <span
- className="MuiIconButton-label text-15-normal"
- >
- <Icon
- className="status-icon"
- icon="test-file-stub"
- size={40}
- spin={false}
- >
- <Component
- className="status-icon styles__icon___23x3R"
- height={40}
- style={Object {}}
- width={40}
- >
- <svg
- className="status-icon styles__icon___23x3R"
- height={40}
- style={Object {}}
- width={40}
- >
- <use
- xlinkHref="#test-file-stub"
- />
- </svg>
- </Component>
- </Icon>
- <span>
- ecogesture.doing
- </span>
- </span>
- <WithStyles(memo)
- center={true}
- >
- <ForwardRef(TouchRipple)
- center={true}
- classes={
- Object {
- "child": "MuiTouchRipple-child",
- "childLeaving": "MuiTouchRipple-childLeaving",
- "childPulsate": "MuiTouchRipple-childPulsate",
- "ripple": "MuiTouchRipple-ripple",
- "ripplePulsate": "MuiTouchRipple-ripplePulsate",
- "rippleVisible": "MuiTouchRipple-rippleVisible",
- "root": "MuiTouchRipple-root",
- }
- }
- >
- <span
- className="MuiTouchRipple-root"
- >
- <TransitionGroup
- childFactory={[Function]}
- component={null}
- exit={true}
- />
- </span>
- </ForwardRef(TouchRipple)>
- </WithStyles(memo)>
- </button>
- </ForwardRef(ButtonBase)>
- </WithStyles(ForwardRef(ButtonBase))>
- </ForwardRef(IconButton)>
- </WithStyles(ForwardRef(IconButton))>
- </div>
+ <use
+ xlink:href="#test-file-stub"
+ />
+ </svg>
+ <span>
+ ecogesture.doing
+ </span>
+ </span>
+ <span
+ class="MuiTouchRipple-root"
+ />
+ </button>
</div>
- </mock-content>
- </SingleEcogestureView>
-</Provider>
+ </div>
+ </mock-content>
+</div>
`;
diff --git a/src/components/Ecogesture/singleEcogestureView.scss b/src/components/Ecogesture/singleEcogestureView.scss
index c8c6d61f9064491e32ab600bb173bc7e476d5999..6eb19b4f1d16fda689603dc88d9304aed75d10ce 100644
--- a/src/components/Ecogesture/singleEcogestureView.scss
+++ b/src/components/Ecogesture/singleEcogestureView.scss
@@ -19,17 +19,14 @@
.details {
flex-direction: column;
display: flex;
+ align-items: center;
+ gap: 0.5rem;
.title {
color: $soft-grey;
- font-weight: 700;
}
.efficiency {
display: flex;
- text-align: center;
- margin: 0.7rem auto 0;
- .text {
- margin-right: 0.7rem;
- }
+ gap: 0.5rem;
}
}
.styled-container {
@@ -37,16 +34,21 @@
padding: 1rem;
margin: 1.5rem 0 1rem;
max-width: 500px;
+ display: flex;
+ flex-direction: column;
.long-name {
text-align: center;
color: white;
}
.showMore {
+ margin: auto;
text-align: center;
text-decoration: underline;
margin-top: 1.5rem;
- cursor: pointer;
+ span {
+ text-transform: none;
+ }
}
.longDescription {
margin: 1em 0.5rem;
@@ -59,8 +61,7 @@
gap: 0.5rem;
justify-content: center;
button {
- margin: 0;
- &.btn-secondary-negative {
+ &.btnSecondary {
height: 45px;
max-width: 160px;
width: 100%;
diff --git a/src/components/EcogestureForm/EcogestureFormEquipment/EcogestureFormEquipment.spec.tsx b/src/components/EcogestureForm/EcogestureFormEquipment/EcogestureFormEquipment.spec.tsx
index 91a4fd40e0e99c7103a647eb7abb129dbfc3ec4a..ca613d4b9f108a515628586dba9488af2d2dc903 100644
--- a/src/components/EcogestureForm/EcogestureFormEquipment/EcogestureFormEquipment.spec.tsx
+++ b/src/components/EcogestureForm/EcogestureFormEquipment/EcogestureFormEquipment.spec.tsx
@@ -1,71 +1,67 @@
-import { Button } from '@material-ui/core'
-import { mount } from 'enzyme'
-import toJson from 'enzyme-to-json'
+import { render, screen, waitFor } from '@testing-library/react'
+import { EquipmentType } from 'enums'
import React from 'react'
import { Provider } from 'react-redux'
import { mockProfileEcogesture } from 'tests/__mocks__/profileEcogesture.mock'
import { createMockEcolyoStore } from 'tests/__mocks__/store'
-import { waitForComponentToPaint } from 'tests/__mocks__/testUtils'
import EcogestureFormEquipment from './EcogestureFormEquipment'
-const mockSetPreviousStep = jest.fn()
-const mockSetNextStep = jest.fn()
-
jest.mock('../EquipmentIcon/EquipmentIcon', () => 'mock-equipment-icon')
describe('EcogestureFormEquipment component', () => {
const store = createMockEcolyoStore()
it('should be rendered correctly', async () => {
- const wrapper = mount(
+ const { container } = render(
<Provider store={store}>
<EcogestureFormEquipment
currentProfileEcogesture={mockProfileEcogesture}
- setPreviousStep={mockSetPreviousStep}
- setNextStepEcogestureForm={mockSetNextStep}
+ setPreviousStep={jest.fn()}
+ setNextStepEcogestureForm={jest.fn()}
step={0}
/>
</Provider>
)
- await waitForComponentToPaint(wrapper)
- expect(toJson(wrapper)).toMatchSnapshot()
+ expect(container).toMatchSnapshot()
})
- it('should select equipment and unselect it', async () => {
- const wrapper = mount(
+ it('should find X equipments', async () => {
+ const { container } = render(
<Provider store={store}>
<EcogestureFormEquipment
currentProfileEcogesture={mockProfileEcogesture}
- setPreviousStep={mockSetPreviousStep}
- setNextStepEcogestureForm={mockSetNextStep}
+ setPreviousStep={jest.fn()}
+ setNextStepEcogestureForm={jest.fn()}
step={0}
/>
</Provider>
)
- await waitForComponentToPaint(wrapper)
- wrapper.find('.item-eq').first().simulate('change')
- await waitForComponentToPaint(wrapper)
-
- expect(wrapper.find('.item-eq').first().hasClass('checked')).toBeTruthy()
- wrapper.find('.checked').first().simulate('change')
- await waitForComponentToPaint(wrapper)
- expect(wrapper.find('.item-eq').first().hasClass('checked')).toBeFalsy()
+ await waitFor(() => null, { container })
+ const equipments = screen.getAllByRole('button', {
+ name: 'ecogesture_profile.equipments.accessible_label',
+ })
+ expect(equipments[0]).not.toBeDisabled()
+ expect(equipments.length).toBe(Object.keys(EquipmentType).length)
})
it('should click on disabled back button', async () => {
- const wrapper = mount(
+ const { container } = render(
<Provider store={store}>
<EcogestureFormEquipment
currentProfileEcogesture={mockProfileEcogesture}
- setPreviousStep={mockSetPreviousStep}
- setNextStepEcogestureForm={mockSetNextStep}
+ setPreviousStep={jest.fn()}
+ setNextStepEcogestureForm={jest.fn()}
step={0}
/>
</Provider>
)
- await waitForComponentToPaint(wrapper)
- wrapper.find(Button).first().simulate('click')
- await waitForComponentToPaint(wrapper)
- expect(wrapper.find('.icons-container').exists()).toBeTruthy()
+ expect(
+ container.getElementsByClassName('icons-container').length
+ ).toBeTruthy()
+ expect(
+ screen.getByRole('button', {
+ name: 'profile_type.accessibility.button_next',
+ })
+ ).toBeDisabled()
})
})
diff --git a/src/components/EcogestureForm/EcogestureFormEquipment/EcogestureFormEquipment.tsx b/src/components/EcogestureForm/EcogestureFormEquipment/EcogestureFormEquipment.tsx
index 85caa4b5381b778e4fb8c2b91da0d2a287ef0579..eca4b0a774d14d728af91863186e0ee07704edab 100644
--- a/src/components/EcogestureForm/EcogestureFormEquipment/EcogestureFormEquipment.tsx
+++ b/src/components/EcogestureForm/EcogestureFormEquipment/EcogestureFormEquipment.tsx
@@ -1,3 +1,4 @@
+import { IconButton } from '@material-ui/core'
import FormNavigation from 'components/CommonKit/FormNavigation/FormNavigation'
import 'components/ProfileType/profileTypeForm.scss'
import { useI18n } from 'cozy-ui/transpiled/react/I18n'
@@ -59,10 +60,6 @@ const EcogestureFormEquipment = ({
answer,
])
- const isChecked = (value: EquipmentType): boolean => {
- return answer.includes(value)
- }
-
const handleChange = useCallback(
(value: EquipmentType) => {
const tempAnswer = [...answer]
@@ -97,22 +94,18 @@ const EcogestureFormEquipment = ({
</div>
<div className="icons-container">
{Object.values(EquipmentType).map(equipment => (
- <label key={equipment} className="checkbox-equipment">
- <input
- type="checkbox"
- value={equipment}
- name={equipment.toString()}
- onChange={() => handleChange(equipment)}
- checked={isChecked(equipment)}
- className={
- isChecked(equipment) ? 'item-eq checked' : 'item-eq'
- }
- />
+ <IconButton
+ key={equipment}
+ style={{ borderRadius: '5px' }}
+ onClick={() => handleChange(equipment)}
+ className="checkbox-equipment"
+ aria-label={t('ecogesture_profile.equipments.accessible_label')}
+ >
<EquipmentIcon
equipment={equipment}
isChecked={answer.includes(equipment)}
/>
- </label>
+ </IconButton>
))}
</div>
</div>
diff --git a/src/components/EcogestureForm/EcogestureFormEquipment/__snapshots__/EcogestureFormEquipment.spec.tsx.snap b/src/components/EcogestureForm/EcogestureFormEquipment/__snapshots__/EcogestureFormEquipment.spec.tsx.snap
index 541a06390317a40266289902a1be72a383bcfa3b..ed0bc90c23394c74c1afea2438180aa81028d0e0 100644
--- a/src/components/EcogestureForm/EcogestureFormEquipment/__snapshots__/EcogestureFormEquipment.spec.tsx.snap
+++ b/src/components/EcogestureForm/EcogestureFormEquipment/__snapshots__/EcogestureFormEquipment.spec.tsx.snap
@@ -1,534 +1,343 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`EcogestureFormEquipment component should be rendered correctly 1`] = `
-<Provider
- store={
- Object {
- "clearActions": [Function],
- "dispatch": [Function],
- "getActions": [Function],
- "getState": [Function],
- "replaceReducer": [Function],
- "subscribe": [Function],
- }
- }
->
- <EcogestureFormEquipment
- currentProfileEcogesture={
- Object {
- "equipments": Array [],
- "heating": "individual",
- "hotWater": "individual",
- "warmingFluid": 0,
- }
- }
- setNextStepEcogestureForm={[MockFunction]}
- setPreviousStep={[MockFunction]}
- step={0}
+<div>
+ <div
+ class="ecogesture-profile-container"
>
<div
- className="ecogesture-profile-container"
+ class="equipment-form-container"
>
<div
- className="equipment-form-container"
+ class="equipment-label text-22-normal"
>
- <div
- className="equipment-label text-22-normal"
- >
- ecogesture_profile.equipments.question
- </div>
- <div
- className="equipment-hint text-16-normal"
- >
- ecogesture_profile.equipments.hint
- </div>
- <div
- className="icons-container"
+ ecogesture_profile.equipments.question
+ </div>
+ <div
+ class="equipment-hint text-16-normal"
+ >
+ ecogesture_profile.equipments.hint
+ </div>
+ <div
+ class="icons-container"
+ >
+ <button
+ aria-label="ecogesture_profile.equipments.accessible_label"
+ class="MuiButtonBase-root MuiIconButton-root checkbox-equipment"
+ style="border-radius: 5px;"
+ tabindex="0"
+ type="button"
>
- <label
- className="checkbox-equipment"
- key="AIR_CONDITIONING"
+ <span
+ class="MuiIconButton-label"
>
- <input
- checked={false}
- className="item-eq"
- name="AIR_CONDITIONING"
- onChange={[Function]}
- type="checkbox"
- value="AIR_CONDITIONING"
- />
<mock-equipment-icon
equipment="AIR_CONDITIONING"
- isChecked={false}
+ ischecked="false"
/>
- </label>
- <label
- className="checkbox-equipment"
- key="COMPUTER"
+ </span>
+ <span
+ class="MuiTouchRipple-root"
+ />
+ </button>
+ <button
+ aria-label="ecogesture_profile.equipments.accessible_label"
+ class="MuiButtonBase-root MuiIconButton-root checkbox-equipment"
+ style="border-radius: 5px;"
+ tabindex="0"
+ type="button"
+ >
+ <span
+ class="MuiIconButton-label"
>
- <input
- checked={false}
- className="item-eq"
- name="COMPUTER"
- onChange={[Function]}
- type="checkbox"
- value="COMPUTER"
- />
<mock-equipment-icon
equipment="COMPUTER"
- isChecked={false}
+ ischecked="false"
/>
- </label>
- <label
- className="checkbox-equipment"
- key="MICROWAVE"
+ </span>
+ <span
+ class="MuiTouchRipple-root"
+ />
+ </button>
+ <button
+ aria-label="ecogesture_profile.equipments.accessible_label"
+ class="MuiButtonBase-root MuiIconButton-root checkbox-equipment"
+ style="border-radius: 5px;"
+ tabindex="0"
+ type="button"
+ >
+ <span
+ class="MuiIconButton-label"
>
- <input
- checked={false}
- className="item-eq"
- name="MICROWAVE"
- onChange={[Function]}
- type="checkbox"
- value="MICROWAVE"
- />
<mock-equipment-icon
equipment="MICROWAVE"
- isChecked={false}
+ ischecked="false"
/>
- </label>
- <label
- className="checkbox-equipment"
- key="WASHING_MACHINE"
+ </span>
+ <span
+ class="MuiTouchRipple-root"
+ />
+ </button>
+ <button
+ aria-label="ecogesture_profile.equipments.accessible_label"
+ class="MuiButtonBase-root MuiIconButton-root checkbox-equipment"
+ style="border-radius: 5px;"
+ tabindex="0"
+ type="button"
+ >
+ <span
+ class="MuiIconButton-label"
>
- <input
- checked={false}
- className="item-eq"
- name="WASHING_MACHINE"
- onChange={[Function]}
- type="checkbox"
- value="WASHING_MACHINE"
- />
<mock-equipment-icon
equipment="WASHING_MACHINE"
- isChecked={false}
+ ischecked="false"
/>
- </label>
- <label
- className="checkbox-equipment"
- key="DISHWASHER"
+ </span>
+ <span
+ class="MuiTouchRipple-root"
+ />
+ </button>
+ <button
+ aria-label="ecogesture_profile.equipments.accessible_label"
+ class="MuiButtonBase-root MuiIconButton-root checkbox-equipment"
+ style="border-radius: 5px;"
+ tabindex="0"
+ type="button"
+ >
+ <span
+ class="MuiIconButton-label"
>
- <input
- checked={false}
- className="item-eq"
- name="DISHWASHER"
- onChange={[Function]}
- type="checkbox"
- value="DISHWASHER"
- />
<mock-equipment-icon
equipment="DISHWASHER"
- isChecked={false}
+ ischecked="false"
/>
- </label>
- <label
- className="checkbox-equipment"
- key="COOKING_PLATES"
+ </span>
+ <span
+ class="MuiTouchRipple-root"
+ />
+ </button>
+ <button
+ aria-label="ecogesture_profile.equipments.accessible_label"
+ class="MuiButtonBase-root MuiIconButton-root checkbox-equipment"
+ style="border-radius: 5px;"
+ tabindex="0"
+ type="button"
+ >
+ <span
+ class="MuiIconButton-label"
>
- <input
- checked={false}
- className="item-eq"
- name="COOKING_PLATES"
- onChange={[Function]}
- type="checkbox"
- value="COOKING_PLATES"
- />
<mock-equipment-icon
equipment="COOKING_PLATES"
- isChecked={false}
+ ischecked="false"
/>
- </label>
- <label
- className="checkbox-equipment"
- key="DRYER"
+ </span>
+ <span
+ class="MuiTouchRipple-root"
+ />
+ </button>
+ <button
+ aria-label="ecogesture_profile.equipments.accessible_label"
+ class="MuiButtonBase-root MuiIconButton-root checkbox-equipment"
+ style="border-radius: 5px;"
+ tabindex="0"
+ type="button"
+ >
+ <span
+ class="MuiIconButton-label"
>
- <input
- checked={false}
- className="item-eq"
- name="DRYER"
- onChange={[Function]}
- type="checkbox"
- value="DRYER"
- />
<mock-equipment-icon
equipment="DRYER"
- isChecked={false}
+ ischecked="false"
/>
- </label>
- <label
- className="checkbox-equipment"
- key="REFREGIRATOR"
+ </span>
+ <span
+ class="MuiTouchRipple-root"
+ />
+ </button>
+ <button
+ aria-label="ecogesture_profile.equipments.accessible_label"
+ class="MuiButtonBase-root MuiIconButton-root checkbox-equipment"
+ style="border-radius: 5px;"
+ tabindex="0"
+ type="button"
+ >
+ <span
+ class="MuiIconButton-label"
>
- <input
- checked={false}
- className="item-eq"
- name="REFREGIRATOR"
- onChange={[Function]}
- type="checkbox"
- value="REFREGIRATOR"
- />
<mock-equipment-icon
equipment="REFREGIRATOR"
- isChecked={false}
+ ischecked="false"
/>
- </label>
- <label
- className="checkbox-equipment"
- key="FAN"
+ </span>
+ <span
+ class="MuiTouchRipple-root"
+ />
+ </button>
+ <button
+ aria-label="ecogesture_profile.equipments.accessible_label"
+ class="MuiButtonBase-root MuiIconButton-root checkbox-equipment"
+ style="border-radius: 5px;"
+ tabindex="0"
+ type="button"
+ >
+ <span
+ class="MuiIconButton-label"
>
- <input
- checked={false}
- className="item-eq"
- name="FAN"
- onChange={[Function]}
- type="checkbox"
- value="FAN"
- />
<mock-equipment-icon
equipment="FAN"
- isChecked={false}
+ ischecked="false"
/>
- </label>
- <label
- className="checkbox-equipment"
- key="CURTAIN"
+ </span>
+ <span
+ class="MuiTouchRipple-root"
+ />
+ </button>
+ <button
+ aria-label="ecogesture_profile.equipments.accessible_label"
+ class="MuiButtonBase-root MuiIconButton-root checkbox-equipment"
+ style="border-radius: 5px;"
+ tabindex="0"
+ type="button"
+ >
+ <span
+ class="MuiIconButton-label"
>
- <input
- checked={false}
- className="item-eq"
- name="CURTAIN"
- onChange={[Function]}
- type="checkbox"
- value="CURTAIN"
- />
<mock-equipment-icon
equipment="CURTAIN"
- isChecked={false}
+ ischecked="false"
/>
- </label>
- <label
- className="checkbox-equipment"
- key="INTERNET_BOX"
+ </span>
+ <span
+ class="MuiTouchRipple-root"
+ />
+ </button>
+ <button
+ aria-label="ecogesture_profile.equipments.accessible_label"
+ class="MuiButtonBase-root MuiIconButton-root checkbox-equipment"
+ style="border-radius: 5px;"
+ tabindex="0"
+ type="button"
+ >
+ <span
+ class="MuiIconButton-label"
>
- <input
- checked={false}
- className="item-eq"
- name="INTERNET_BOX"
- onChange={[Function]}
- type="checkbox"
- value="INTERNET_BOX"
- />
<mock-equipment-icon
equipment="INTERNET_BOX"
- isChecked={false}
+ ischecked="false"
/>
- </label>
- <label
- className="checkbox-equipment"
- key="VENTILATION"
+ </span>
+ <span
+ class="MuiTouchRipple-root"
+ />
+ </button>
+ <button
+ aria-label="ecogesture_profile.equipments.accessible_label"
+ class="MuiButtonBase-root MuiIconButton-root checkbox-equipment"
+ style="border-radius: 5px;"
+ tabindex="0"
+ type="button"
+ >
+ <span
+ class="MuiIconButton-label"
>
- <input
- checked={false}
- className="item-eq"
- name="VENTILATION"
- onChange={[Function]}
- type="checkbox"
- value="VENTILATION"
- />
<mock-equipment-icon
equipment="VENTILATION"
- isChecked={false}
+ ischecked="false"
/>
- </label>
- <label
- className="checkbox-equipment"
- key="FREEZER"
+ </span>
+ <span
+ class="MuiTouchRipple-root"
+ />
+ </button>
+ <button
+ aria-label="ecogesture_profile.equipments.accessible_label"
+ class="MuiButtonBase-root MuiIconButton-root checkbox-equipment"
+ style="border-radius: 5px;"
+ tabindex="0"
+ type="button"
+ >
+ <span
+ class="MuiIconButton-label"
>
- <input
- checked={false}
- className="item-eq"
- name="FREEZER"
- onChange={[Function]}
- type="checkbox"
- value="FREEZER"
- />
<mock-equipment-icon
equipment="FREEZER"
- isChecked={false}
+ ischecked="false"
/>
- </label>
- <label
- className="checkbox-equipment"
- key="BOILER"
+ </span>
+ <span
+ class="MuiTouchRipple-root"
+ />
+ </button>
+ <button
+ aria-label="ecogesture_profile.equipments.accessible_label"
+ class="MuiButtonBase-root MuiIconButton-root checkbox-equipment"
+ style="border-radius: 5px;"
+ tabindex="0"
+ type="button"
+ >
+ <span
+ class="MuiIconButton-label"
>
- <input
- checked={false}
- className="item-eq"
- name="BOILER"
- onChange={[Function]}
- type="checkbox"
- value="BOILER"
- />
<mock-equipment-icon
equipment="BOILER"
- isChecked={false}
+ ischecked="false"
/>
- </label>
- <label
- className="checkbox-equipment"
- key="HYDRAULIC_HEATING"
+ </span>
+ <span
+ class="MuiTouchRipple-root"
+ />
+ </button>
+ <button
+ aria-label="ecogesture_profile.equipments.accessible_label"
+ class="MuiButtonBase-root MuiIconButton-root checkbox-equipment"
+ style="border-radius: 5px;"
+ tabindex="0"
+ type="button"
+ >
+ <span
+ class="MuiIconButton-label"
>
- <input
- checked={false}
- className="item-eq"
- name="HYDRAULIC_HEATING"
- onChange={[Function]}
- type="checkbox"
- value="HYDRAULIC_HEATING"
- />
<mock-equipment-icon
equipment="HYDRAULIC_HEATING"
- isChecked={false}
+ ischecked="false"
/>
- </label>
- </div>
+ </span>
+ <span
+ class="MuiTouchRipple-root"
+ />
+ </button>
</div>
</div>
- <FormNavigation
- disableNextButton={true}
- handleNext={[Function]}
- handlePrevious={[Function]}
- isEcogesture={true}
- step={0}
+ </div>
+ <div
+ class="profile-navigation"
+ >
+ <button
+ aria-label="profile_type.accessibility.button_previous"
+ class="MuiButtonBase-root MuiButton-root MuiButton-text btnSecondary Mui-disabled Mui-disabled"
+ disabled=""
+ tabindex="-1"
+ type="button"
>
- <div
- className="profile-navigation"
+ <span
+ class="MuiButton-label"
>
- <WithStyles(ForwardRef(Button))
- aria-label="profile_type.accessibility.button_previous"
- className="profile-navigation-button"
- classes={
- Object {
- "label": "text-16-bold",
- "root": "btn-profile-back",
- }
- }
- disabled={true}
- onClick={[Function]}
- >
- <ForwardRef(Button)
- aria-label="profile_type.accessibility.button_previous"
- className="profile-navigation-button"
- classes={
- Object {
- "colorInherit": "MuiButton-colorInherit",
- "contained": "MuiButton-contained",
- "containedPrimary": "MuiButton-containedPrimary",
- "containedSecondary": "MuiButton-containedSecondary",
- "containedSizeLarge": "MuiButton-containedSizeLarge",
- "containedSizeSmall": "MuiButton-containedSizeSmall",
- "disableElevation": "MuiButton-disableElevation",
- "disabled": "Mui-disabled",
- "endIcon": "MuiButton-endIcon",
- "focusVisible": "Mui-focusVisible",
- "fullWidth": "MuiButton-fullWidth",
- "iconSizeLarge": "MuiButton-iconSizeLarge",
- "iconSizeMedium": "MuiButton-iconSizeMedium",
- "iconSizeSmall": "MuiButton-iconSizeSmall",
- "label": "MuiButton-label text-16-bold",
- "outlined": "MuiButton-outlined",
- "outlinedPrimary": "MuiButton-outlinedPrimary",
- "outlinedSecondary": "MuiButton-outlinedSecondary",
- "outlinedSizeLarge": "MuiButton-outlinedSizeLarge",
- "outlinedSizeSmall": "MuiButton-outlinedSizeSmall",
- "root": "MuiButton-root btn-profile-back",
- "sizeLarge": "MuiButton-sizeLarge",
- "sizeSmall": "MuiButton-sizeSmall",
- "startIcon": "MuiButton-startIcon",
- "text": "MuiButton-text",
- "textPrimary": "MuiButton-textPrimary",
- "textSecondary": "MuiButton-textSecondary",
- "textSizeLarge": "MuiButton-textSizeLarge",
- "textSizeSmall": "MuiButton-textSizeSmall",
- }
- }
- disabled={true}
- onClick={[Function]}
- >
- <WithStyles(ForwardRef(ButtonBase))
- aria-label="profile_type.accessibility.button_previous"
- className="MuiButton-root btn-profile-back MuiButton-text profile-navigation-button Mui-disabled"
- component="button"
- disabled={true}
- focusRipple={true}
- focusVisibleClassName="Mui-focusVisible"
- onClick={[Function]}
- type="button"
- >
- <ForwardRef(ButtonBase)
- aria-label="profile_type.accessibility.button_previous"
- className="MuiButton-root btn-profile-back MuiButton-text profile-navigation-button Mui-disabled"
- classes={
- Object {
- "disabled": "Mui-disabled",
- "focusVisible": "Mui-focusVisible",
- "root": "MuiButtonBase-root",
- }
- }
- component="button"
- disabled={true}
- focusRipple={true}
- focusVisibleClassName="Mui-focusVisible"
- onClick={[Function]}
- type="button"
- >
- <button
- aria-label="profile_type.accessibility.button_previous"
- className="MuiButtonBase-root MuiButton-root btn-profile-back MuiButton-text profile-navigation-button Mui-disabled Mui-disabled"
- disabled={true}
- onBlur={[Function]}
- onClick={[Function]}
- onDragLeave={[Function]}
- onFocus={[Function]}
- onKeyDown={[Function]}
- onKeyUp={[Function]}
- onMouseDown={[Function]}
- onMouseLeave={[Function]}
- onMouseUp={[Function]}
- onTouchEnd={[Function]}
- onTouchMove={[Function]}
- onTouchStart={[Function]}
- tabIndex={-1}
- type="button"
- >
- <span
- className="MuiButton-label text-16-bold"
- >
- < profile_type.form.button_previous
- </span>
- </button>
- </ForwardRef(ButtonBase)>
- </WithStyles(ForwardRef(ButtonBase))>
- </ForwardRef(Button)>
- </WithStyles(ForwardRef(Button))>
- <WithStyles(ForwardRef(Button))
- aria-label="profile_type.accessibility.button_next"
- className="profile-navigation-button disabled"
- classes={
- Object {
- "label": "text-16-bold",
- "root": "btn-profile-next",
- }
- }
- disabled={true}
- onClick={[Function]}
- >
- <ForwardRef(Button)
- aria-label="profile_type.accessibility.button_next"
- className="profile-navigation-button disabled"
- classes={
- Object {
- "colorInherit": "MuiButton-colorInherit",
- "contained": "MuiButton-contained",
- "containedPrimary": "MuiButton-containedPrimary",
- "containedSecondary": "MuiButton-containedSecondary",
- "containedSizeLarge": "MuiButton-containedSizeLarge",
- "containedSizeSmall": "MuiButton-containedSizeSmall",
- "disableElevation": "MuiButton-disableElevation",
- "disabled": "Mui-disabled",
- "endIcon": "MuiButton-endIcon",
- "focusVisible": "Mui-focusVisible",
- "fullWidth": "MuiButton-fullWidth",
- "iconSizeLarge": "MuiButton-iconSizeLarge",
- "iconSizeMedium": "MuiButton-iconSizeMedium",
- "iconSizeSmall": "MuiButton-iconSizeSmall",
- "label": "MuiButton-label text-16-bold",
- "outlined": "MuiButton-outlined",
- "outlinedPrimary": "MuiButton-outlinedPrimary",
- "outlinedSecondary": "MuiButton-outlinedSecondary",
- "outlinedSizeLarge": "MuiButton-outlinedSizeLarge",
- "outlinedSizeSmall": "MuiButton-outlinedSizeSmall",
- "root": "MuiButton-root btn-profile-next",
- "sizeLarge": "MuiButton-sizeLarge",
- "sizeSmall": "MuiButton-sizeSmall",
- "startIcon": "MuiButton-startIcon",
- "text": "MuiButton-text",
- "textPrimary": "MuiButton-textPrimary",
- "textSecondary": "MuiButton-textSecondary",
- "textSizeLarge": "MuiButton-textSizeLarge",
- "textSizeSmall": "MuiButton-textSizeSmall",
- }
- }
- disabled={true}
- onClick={[Function]}
- >
- <WithStyles(ForwardRef(ButtonBase))
- aria-label="profile_type.accessibility.button_next"
- className="MuiButton-root btn-profile-next MuiButton-text profile-navigation-button disabled Mui-disabled"
- component="button"
- disabled={true}
- focusRipple={true}
- focusVisibleClassName="Mui-focusVisible"
- onClick={[Function]}
- type="button"
- >
- <ForwardRef(ButtonBase)
- aria-label="profile_type.accessibility.button_next"
- className="MuiButton-root btn-profile-next MuiButton-text profile-navigation-button disabled Mui-disabled"
- classes={
- Object {
- "disabled": "Mui-disabled",
- "focusVisible": "Mui-focusVisible",
- "root": "MuiButtonBase-root",
- }
- }
- component="button"
- disabled={true}
- focusRipple={true}
- focusVisibleClassName="Mui-focusVisible"
- onClick={[Function]}
- type="button"
- >
- <button
- aria-label="profile_type.accessibility.button_next"
- className="MuiButtonBase-root MuiButton-root btn-profile-next MuiButton-text profile-navigation-button disabled Mui-disabled Mui-disabled"
- disabled={true}
- onBlur={[Function]}
- onClick={[Function]}
- onDragLeave={[Function]}
- onFocus={[Function]}
- onKeyDown={[Function]}
- onKeyUp={[Function]}
- onMouseDown={[Function]}
- onMouseLeave={[Function]}
- onMouseUp={[Function]}
- onTouchEnd={[Function]}
- onTouchMove={[Function]}
- onTouchStart={[Function]}
- tabIndex={-1}
- type="button"
- >
- <span
- className="MuiButton-label text-16-bold"
- >
- profile_type.form.button_next >
- </span>
- </button>
- </ForwardRef(ButtonBase)>
- </WithStyles(ForwardRef(ButtonBase))>
- </ForwardRef(Button)>
- </WithStyles(ForwardRef(Button))>
- </div>
- </FormNavigation>
- </EcogestureFormEquipment>
-</Provider>
+ profile_type.form.button_previous
+ </span>
+ </button>
+ <button
+ aria-label="profile_type.accessibility.button_next"
+ class="MuiButtonBase-root MuiButton-root MuiButton-text btnPrimary Mui-disabled Mui-disabled"
+ disabled=""
+ tabindex="-1"
+ type="button"
+ >
+ <span
+ class="MuiButton-label"
+ >
+ profile_type.form.button_next
+ </span>
+ </button>
+ </div>
+</div>
`;
diff --git a/src/components/EcogestureForm/EcogestureFormEquipment/ecogestureFormEquipment.scss b/src/components/EcogestureForm/EcogestureFormEquipment/ecogestureFormEquipment.scss
index be3e7257d2ffe9ba87153d315305cb90aba38294..be756fd5072c36683d560841f2512b7a17165b51 100644
--- a/src/components/EcogestureForm/EcogestureFormEquipment/ecogestureFormEquipment.scss
+++ b/src/components/EcogestureForm/EcogestureFormEquipment/ecogestureFormEquipment.scss
@@ -19,28 +19,21 @@
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(5, 1fr);
- grid-column-gap: 32px;
- grid-row-gap: 32px;
+ gap: 1rem;
max-width: 400px;
margin: 1.5rem auto 3rem auto;
.checkbox-equipment {
- cursor: pointer;
- max-width: 80px;
- text-align: center;
- margin: 0 auto;
- .text {
- margin-top: 0.5rem;
- text-align: center;
+ span {
+ border-radius: 5px;
+ display: flex;
+ flex-direction: column;
+ gap: 0.5rem;
}
}
- input.item-eq {
- display: none;
- }
.equipment-icon-container {
display: flex;
transition: all 200ms ease;
box-sizing: border-box;
- flex-direction: column;
width: 80px;
height: 80px;
border-radius: 5px;
diff --git a/src/components/EcogestureForm/EcogestureFormSingleChoice/EcogestureFormSingleChoice.spec.tsx b/src/components/EcogestureForm/EcogestureFormSingleChoice/EcogestureFormSingleChoice.spec.tsx
index 3d97bafc6e7d1818a5eb16eaa519467f1ae1e7b6..57f1f6692161543435b8f01a802a5782a56e6b60 100644
--- a/src/components/EcogestureForm/EcogestureFormSingleChoice/EcogestureFormSingleChoice.spec.tsx
+++ b/src/components/EcogestureForm/EcogestureFormSingleChoice/EcogestureFormSingleChoice.spec.tsx
@@ -1,6 +1,5 @@
-import { Button } from '@material-ui/core'
-import { mount } from 'enzyme'
-import toJson from 'enzyme-to-json'
+import { render, screen } from '@testing-library/react'
+import { userEvent } from '@testing-library/user-event'
import React from 'react'
import { Provider } from 'react-redux'
import {
@@ -8,7 +7,6 @@ import {
mockProfileEcogesture,
} from 'tests/__mocks__/profileEcogesture.mock'
import { createMockEcolyoStore } from 'tests/__mocks__/store'
-import { waitForComponentToPaint } from 'tests/__mocks__/testUtils'
import EcogestureFormSingleChoice from './EcogestureFormSingleChoice'
jest.mock(
@@ -22,7 +20,7 @@ describe('EcogestureFormSingleChoice component', () => {
const store = createMockEcolyoStore()
it('should be rendered correctly', async () => {
- const wrapper = mount(
+ const { container } = render(
<Provider store={store}>
<EcogestureFormSingleChoice
step={0}
@@ -34,11 +32,10 @@ describe('EcogestureFormSingleChoice component', () => {
/>
</Provider>
)
- await waitForComponentToPaint(wrapper)
- expect(toJson(wrapper)).toMatchSnapshot()
+ expect(container).toMatchSnapshot()
})
- it('should click on disabled button', async () => {
- const wrapper = mount(
+ it('should render disabled prev button', async () => {
+ render(
<Provider store={store}>
<EcogestureFormSingleChoice
step={0}
@@ -50,13 +47,12 @@ describe('EcogestureFormSingleChoice component', () => {
/>
</Provider>
)
- await waitForComponentToPaint(wrapper)
- wrapper.find(Button).first().simulate('click')
- expect(mockHandlePreviousStep).toHaveBeenCalledTimes(0)
+ const [prev] = screen.getAllByRole('button')
+ expect(prev).toBeDisabled()
})
it('should pick a choice and go next', async () => {
- const wrapper = mount(
+ render(
<Provider store={store}>
<EcogestureFormSingleChoice
step={0}
@@ -68,15 +64,13 @@ describe('EcogestureFormSingleChoice component', () => {
/>
</Provider>
)
- await waitForComponentToPaint(wrapper)
- wrapper.find('input').first().simulate('change')
- await waitForComponentToPaint(wrapper)
- wrapper.find(Button).at(1).simulate('click')
-
+ await userEvent.click(screen.getAllByRole('radio')[0])
+ const [, next] = screen.getAllByRole('button')
+ await userEvent.click(next)
expect(mockHandleNextStep).toHaveBeenCalledTimes(1)
})
it('should go back', async () => {
- const wrapper = mount(
+ render(
<Provider store={store}>
<EcogestureFormSingleChoice
step={1}
@@ -88,12 +82,12 @@ describe('EcogestureFormSingleChoice component', () => {
/>
</Provider>
)
- await waitForComponentToPaint(wrapper)
- wrapper.find(Button).first().simulate('click')
+ const [prev] = screen.getAllByRole('button')
+ await userEvent.click(prev)
expect(mockHandlePreviousStep).toHaveBeenCalledTimes(1)
})
it('should keep previous answer', async () => {
- const wrapper = mount(
+ render(
<Provider store={store}>
<EcogestureFormSingleChoice
step={0}
@@ -105,7 +99,8 @@ describe('EcogestureFormSingleChoice component', () => {
/>
</Provider>
)
- await waitForComponentToPaint(wrapper)
- expect(wrapper.find('input').first().hasClass('checked-input')).toBe(true)
+
+ const radio = screen.getByRole('radio', { checked: true })
+ expect(radio).toBeInTheDocument()
})
})
diff --git a/src/components/EcogestureForm/EcogestureFormSingleChoice/__snapshots__/EcogestureFormSingleChoice.spec.tsx.snap b/src/components/EcogestureForm/EcogestureFormSingleChoice/__snapshots__/EcogestureFormSingleChoice.spec.tsx.snap
index 3fc0bc2066d0d83a06be85c5e7e8d8c7b2c3154d..cc1a100279b74d343909aae9111fc9fb8203cc6b 100644
--- a/src/components/EcogestureForm/EcogestureFormSingleChoice/__snapshots__/EcogestureFormSingleChoice.spec.tsx.snap
+++ b/src/components/EcogestureForm/EcogestureFormSingleChoice/__snapshots__/EcogestureFormSingleChoice.spec.tsx.snap
@@ -1,337 +1,74 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`EcogestureFormSingleChoice component should be rendered correctly 1`] = `
-<Provider
- store={
- Object {
- "clearActions": [Function],
- "dispatch": [Function],
- "getActions": [Function],
- "getState": [Function],
- "replaceReducer": [Function],
- "subscribe": [Function],
- }
- }
->
- <EcogestureFormSingleChoice
- answerType={
- Object {
- "attribute": "heating",
- "choices": Array [
- "individual",
- "collective",
- ],
- "type": 0,
- }
- }
- currentProfileEcogesture={
- Object {
- "equipments": Array [],
- "heating": "individual",
- "hotWater": "individual",
- "warmingFluid": 0,
- }
- }
- setNextStep={[MockFunction]}
- setPreviousStep={[MockFunction]}
- step={0}
- viewedStep={1}
+<div>
+ <div
+ class="ecogesture-profile-container"
>
<div
- className="ecogesture-profile-container"
+ class="profile-form-container ecogesture-form-single"
>
<div
- className="profile-form-container ecogesture-form-single"
+ class="profile-question-label"
>
- <div
- className="profile-question-label"
- >
- ecogesture_form.heating_type.question
- </div>
- <label
- className="radio_short answer-checked"
- key="individual"
- >
- <input
- checked={true}
- className="checked-input"
- name="individual"
- onChange={[Function]}
- type="radio"
- value="individual"
- />
- ecogesture_form.heating_type.individual
- </label>
- <label
- className="radio_short"
- key="collective"
- >
- <input
- checked={false}
- className=""
- name="collective"
- onChange={[Function]}
- type="radio"
- value="collective"
- />
- ecogesture_form.heating_type.collective
- </label>
+ ecogesture_form.heating_type.question
</div>
- <FormNavigation
- disableNextButton={false}
- handleNext={[Function]}
- handlePrevious={[Function]}
- isEcogesture={true}
- step={0}
+ <label
+ class="radio_short answer-checked"
+ >
+ <input
+ checked=""
+ class="checked-input"
+ name="individual"
+ type="radio"
+ value="individual"
+ />
+ ecogesture_form.heating_type.individual
+ </label>
+ <label
+ class="radio_short"
+ >
+ <input
+ class=""
+ name="collective"
+ type="radio"
+ value="collective"
+ />
+ ecogesture_form.heating_type.collective
+ </label>
+ </div>
+ <div
+ class="profile-navigation"
+ >
+ <button
+ aria-label="profile_type.accessibility.button_previous"
+ class="MuiButtonBase-root MuiButton-root MuiButton-text btnSecondary Mui-disabled Mui-disabled"
+ disabled=""
+ tabindex="-1"
+ type="button"
+ >
+ <span
+ class="MuiButton-label"
+ >
+ profile_type.form.button_previous
+ </span>
+ </button>
+ <button
+ aria-label="profile_type.accessibility.button_next"
+ class="MuiButtonBase-root MuiButton-root MuiButton-text btnPrimary"
+ tabindex="0"
+ type="button"
>
- <div
- className="profile-navigation"
+ <span
+ class="MuiButton-label"
>
- <WithStyles(ForwardRef(Button))
- aria-label="profile_type.accessibility.button_previous"
- className="profile-navigation-button"
- classes={
- Object {
- "label": "text-16-bold",
- "root": "btn-profile-back",
- }
- }
- disabled={true}
- onClick={[Function]}
- >
- <ForwardRef(Button)
- aria-label="profile_type.accessibility.button_previous"
- className="profile-navigation-button"
- classes={
- Object {
- "colorInherit": "MuiButton-colorInherit",
- "contained": "MuiButton-contained",
- "containedPrimary": "MuiButton-containedPrimary",
- "containedSecondary": "MuiButton-containedSecondary",
- "containedSizeLarge": "MuiButton-containedSizeLarge",
- "containedSizeSmall": "MuiButton-containedSizeSmall",
- "disableElevation": "MuiButton-disableElevation",
- "disabled": "Mui-disabled",
- "endIcon": "MuiButton-endIcon",
- "focusVisible": "Mui-focusVisible",
- "fullWidth": "MuiButton-fullWidth",
- "iconSizeLarge": "MuiButton-iconSizeLarge",
- "iconSizeMedium": "MuiButton-iconSizeMedium",
- "iconSizeSmall": "MuiButton-iconSizeSmall",
- "label": "MuiButton-label text-16-bold",
- "outlined": "MuiButton-outlined",
- "outlinedPrimary": "MuiButton-outlinedPrimary",
- "outlinedSecondary": "MuiButton-outlinedSecondary",
- "outlinedSizeLarge": "MuiButton-outlinedSizeLarge",
- "outlinedSizeSmall": "MuiButton-outlinedSizeSmall",
- "root": "MuiButton-root btn-profile-back",
- "sizeLarge": "MuiButton-sizeLarge",
- "sizeSmall": "MuiButton-sizeSmall",
- "startIcon": "MuiButton-startIcon",
- "text": "MuiButton-text",
- "textPrimary": "MuiButton-textPrimary",
- "textSecondary": "MuiButton-textSecondary",
- "textSizeLarge": "MuiButton-textSizeLarge",
- "textSizeSmall": "MuiButton-textSizeSmall",
- }
- }
- disabled={true}
- onClick={[Function]}
- >
- <WithStyles(ForwardRef(ButtonBase))
- aria-label="profile_type.accessibility.button_previous"
- className="MuiButton-root btn-profile-back MuiButton-text profile-navigation-button Mui-disabled"
- component="button"
- disabled={true}
- focusRipple={true}
- focusVisibleClassName="Mui-focusVisible"
- onClick={[Function]}
- type="button"
- >
- <ForwardRef(ButtonBase)
- aria-label="profile_type.accessibility.button_previous"
- className="MuiButton-root btn-profile-back MuiButton-text profile-navigation-button Mui-disabled"
- classes={
- Object {
- "disabled": "Mui-disabled",
- "focusVisible": "Mui-focusVisible",
- "root": "MuiButtonBase-root",
- }
- }
- component="button"
- disabled={true}
- focusRipple={true}
- focusVisibleClassName="Mui-focusVisible"
- onClick={[Function]}
- type="button"
- >
- <button
- aria-label="profile_type.accessibility.button_previous"
- className="MuiButtonBase-root MuiButton-root btn-profile-back MuiButton-text profile-navigation-button Mui-disabled Mui-disabled"
- disabled={true}
- onBlur={[Function]}
- onClick={[Function]}
- onDragLeave={[Function]}
- onFocus={[Function]}
- onKeyDown={[Function]}
- onKeyUp={[Function]}
- onMouseDown={[Function]}
- onMouseLeave={[Function]}
- onMouseUp={[Function]}
- onTouchEnd={[Function]}
- onTouchMove={[Function]}
- onTouchStart={[Function]}
- tabIndex={-1}
- type="button"
- >
- <span
- className="MuiButton-label text-16-bold"
- >
- < profile_type.form.button_previous
- </span>
- </button>
- </ForwardRef(ButtonBase)>
- </WithStyles(ForwardRef(ButtonBase))>
- </ForwardRef(Button)>
- </WithStyles(ForwardRef(Button))>
- <WithStyles(ForwardRef(Button))
- aria-label="profile_type.accessibility.button_next"
- className="profile-navigation-button"
- classes={
- Object {
- "label": "text-16-bold",
- "root": "btn-profile-next",
- }
- }
- disabled={false}
- onClick={[Function]}
- >
- <ForwardRef(Button)
- aria-label="profile_type.accessibility.button_next"
- className="profile-navigation-button"
- classes={
- Object {
- "colorInherit": "MuiButton-colorInherit",
- "contained": "MuiButton-contained",
- "containedPrimary": "MuiButton-containedPrimary",
- "containedSecondary": "MuiButton-containedSecondary",
- "containedSizeLarge": "MuiButton-containedSizeLarge",
- "containedSizeSmall": "MuiButton-containedSizeSmall",
- "disableElevation": "MuiButton-disableElevation",
- "disabled": "Mui-disabled",
- "endIcon": "MuiButton-endIcon",
- "focusVisible": "Mui-focusVisible",
- "fullWidth": "MuiButton-fullWidth",
- "iconSizeLarge": "MuiButton-iconSizeLarge",
- "iconSizeMedium": "MuiButton-iconSizeMedium",
- "iconSizeSmall": "MuiButton-iconSizeSmall",
- "label": "MuiButton-label text-16-bold",
- "outlined": "MuiButton-outlined",
- "outlinedPrimary": "MuiButton-outlinedPrimary",
- "outlinedSecondary": "MuiButton-outlinedSecondary",
- "outlinedSizeLarge": "MuiButton-outlinedSizeLarge",
- "outlinedSizeSmall": "MuiButton-outlinedSizeSmall",
- "root": "MuiButton-root btn-profile-next",
- "sizeLarge": "MuiButton-sizeLarge",
- "sizeSmall": "MuiButton-sizeSmall",
- "startIcon": "MuiButton-startIcon",
- "text": "MuiButton-text",
- "textPrimary": "MuiButton-textPrimary",
- "textSecondary": "MuiButton-textSecondary",
- "textSizeLarge": "MuiButton-textSizeLarge",
- "textSizeSmall": "MuiButton-textSizeSmall",
- }
- }
- disabled={false}
- onClick={[Function]}
- >
- <WithStyles(ForwardRef(ButtonBase))
- aria-label="profile_type.accessibility.button_next"
- className="MuiButton-root btn-profile-next MuiButton-text profile-navigation-button"
- component="button"
- disabled={false}
- focusRipple={true}
- focusVisibleClassName="Mui-focusVisible"
- onClick={[Function]}
- type="button"
- >
- <ForwardRef(ButtonBase)
- aria-label="profile_type.accessibility.button_next"
- className="MuiButton-root btn-profile-next MuiButton-text profile-navigation-button"
- classes={
- Object {
- "disabled": "Mui-disabled",
- "focusVisible": "Mui-focusVisible",
- "root": "MuiButtonBase-root",
- }
- }
- component="button"
- disabled={false}
- focusRipple={true}
- focusVisibleClassName="Mui-focusVisible"
- onClick={[Function]}
- type="button"
- >
- <button
- aria-label="profile_type.accessibility.button_next"
- className="MuiButtonBase-root MuiButton-root btn-profile-next MuiButton-text profile-navigation-button"
- disabled={false}
- onBlur={[Function]}
- onClick={[Function]}
- onDragLeave={[Function]}
- onFocus={[Function]}
- onKeyDown={[Function]}
- onKeyUp={[Function]}
- onMouseDown={[Function]}
- onMouseLeave={[Function]}
- onMouseUp={[Function]}
- onTouchEnd={[Function]}
- onTouchMove={[Function]}
- onTouchStart={[Function]}
- tabIndex={0}
- type="button"
- >
- <span
- className="MuiButton-label text-16-bold"
- >
- profile_type.form.button_next >
- </span>
- <WithStyles(memo)
- center={false}
- >
- <ForwardRef(TouchRipple)
- center={false}
- classes={
- Object {
- "child": "MuiTouchRipple-child",
- "childLeaving": "MuiTouchRipple-childLeaving",
- "childPulsate": "MuiTouchRipple-childPulsate",
- "ripple": "MuiTouchRipple-ripple",
- "ripplePulsate": "MuiTouchRipple-ripplePulsate",
- "rippleVisible": "MuiTouchRipple-rippleVisible",
- "root": "MuiTouchRipple-root",
- }
- }
- >
- <span
- className="MuiTouchRipple-root"
- >
- <TransitionGroup
- childFactory={[Function]}
- component={null}
- exit={true}
- />
- </span>
- </ForwardRef(TouchRipple)>
- </WithStyles(memo)>
- </button>
- </ForwardRef(ButtonBase)>
- </WithStyles(ForwardRef(ButtonBase))>
- </ForwardRef(Button)>
- </WithStyles(ForwardRef(Button))>
- </div>
- </FormNavigation>
+ profile_type.form.button_next
+ </span>
+ <span
+ class="MuiTouchRipple-root"
+ />
+ </button>
</div>
- </EcogestureFormSingleChoice>
-</Provider>
+ </div>
+</div>
`;
diff --git a/src/components/EcogestureForm/EcogestureFormView.spec.tsx b/src/components/EcogestureForm/EcogestureFormView.spec.tsx
index 77256f6dc3a6203aa1fd52e46c032f4db2f70854..a654c4bfe1631bcb422e5ca18244d7468cb89603 100644
--- a/src/components/EcogestureForm/EcogestureFormView.spec.tsx
+++ b/src/components/EcogestureForm/EcogestureFormView.spec.tsx
@@ -1,23 +1,21 @@
-/* eslint-disable react/display-name */
-import { Button } from '@material-ui/core'
-import { mount } from 'enzyme'
-import toJson from 'enzyme-to-json'
+import { render, screen } from '@testing-library/react'
+import { userEvent } from '@testing-library/user-event'
import React from 'react'
import { Provider } from 'react-redux'
import * as storeHooks from 'store/hooks'
import { mockProfileEcogesture } from 'tests/__mocks__/profileEcogesture.mock'
import { createMockEcolyoStore } from 'tests/__mocks__/store'
-import { waitForComponentToPaint } from 'tests/__mocks__/testUtils'
import EcogestureFormView from './EcogestureFormView'
jest.mock('components/Header/CozyBar', () => 'mock-cozybar')
jest.mock('components/Header/Header', () => 'mock-header')
+jest.mock('components/Content/Content', () => 'mock-content')
jest.mock(
'components/EcogestureForm/EcogestureLaunchFormModal/EcogestureLaunchFormModal',
() => 'mock-ecogesturelaunchmodal'
)
+
const mockAppDispatch = jest.spyOn(storeHooks, 'useAppDispatch')
-jest.mock('components/Content/Content', () => 'mock-content')
const mockedNavigate = jest.fn()
jest.mock('react-router-dom', () => ({
...jest.requireActual('react-router-dom'),
@@ -34,64 +32,64 @@ describe('EcogestureFormView component', () => {
})
it('should be rendered correctly', async () => {
- const wrapper = mount(
+ const { container } = render(
<Provider store={store}>
<EcogestureFormView />
</Provider>
)
- await waitForComponentToPaint(wrapper)
- expect(toJson(wrapper)).toMatchSnapshot()
+ expect(container).toMatchSnapshot()
})
it('should render singleChoice', async () => {
- const wrapper = mount(
+ const { container } = render(
<Provider store={store}>
<EcogestureFormView />
</Provider>
)
- await waitForComponentToPaint(wrapper)
- expect(wrapper.find('.ecogesture-form-single').exists()).toBeTruthy()
+ expect(
+ container.getElementsByClassName('ecogesture-form-single').length
+ ).toBeTruthy()
})
it('should render profiletype form step because profiletype is completed', async () => {
const store = createMockEcolyoStore({
profile: { isProfileTypeCompleted: true },
profileEcogesture: mockProfileEcogesture,
})
- const wrapper = mount(
+ const { container } = render(
<Provider store={store}>
<EcogestureFormView />
</Provider>
)
- await waitForComponentToPaint(wrapper)
- expect(wrapper.find('.profile-type-container').exists()).toBeTruthy()
+ expect(
+ container.getElementsByClassName('profile-type-container').length
+ ).toBeTruthy()
})
it('should go to next step', async () => {
- const wrapper = mount(
+ const { container } = render(
<Provider store={store}>
<EcogestureFormView />
</Provider>
)
- await waitForComponentToPaint(wrapper)
- wrapper.find('input').first().simulate('change')
- await waitForComponentToPaint(wrapper)
- wrapper.find(Button).at(1).simulate('click')
- await waitForComponentToPaint(wrapper)
- expect(wrapper.find('.ecogesture-form-single').exists()).toBeTruthy()
+ // await waitFor(() => null, { container })
+ await userEvent.click(screen.getAllByRole('radio')[0])
+ await userEvent.click(screen.getAllByRole('button')[1])
+ expect(
+ container.getElementsByClassName('ecogesture-form-single').length
+ ).toBeTruthy()
})
it('should go to previous step', async () => {
- const wrapper = mount(
+ const { container } = render(
<Provider store={store}>
<EcogestureFormView />
</Provider>
)
- // go first to next step
- await waitForComponentToPaint(wrapper)
- wrapper.find('input').first().simulate('change')
- await waitForComponentToPaint(wrapper)
- wrapper.find(Button).at(1).simulate('click')
- await waitForComponentToPaint(wrapper)
- // then go back
- wrapper.find(Button).first().simulate('click')
- expect(wrapper.find('.ecogesture-form-single').exists()).toBeTruthy()
+
+ const [, next] = screen.getAllByRole('button')
+ await userEvent.click(screen.getAllByRole('radio')[0])
+ await userEvent.click(next)
+
+ expect(
+ container.getElementsByClassName('ecogesture-form-single').length
+ ).toBeTruthy()
})
it('should handle form end', async () => {
@@ -100,12 +98,11 @@ describe('EcogestureFormView component', () => {
.spyOn(React, 'useState')
.mockImplementationOnce(() => [0, () => null])
.mockImplementationOnce(() => [4, () => null])
- const wrapper = mount(
+ render(
<Provider store={store}>
<EcogestureFormView />
</Provider>
)
- await waitForComponentToPaint(wrapper)
expect(mockAppDispatch).toHaveBeenCalledTimes(2)
})
})
diff --git a/src/components/EcogestureForm/EcogestureLaunchFormModal/EcogestureLaunchFormModal.spec.tsx b/src/components/EcogestureForm/EcogestureLaunchFormModal/EcogestureLaunchFormModal.spec.tsx
index 1efe25a5ee1b77c66b2e72a4ea8a45bdbfa06bcc..be8c6d25ed9da77a23d42ded998b09c51d0d2d03 100644
--- a/src/components/EcogestureForm/EcogestureLaunchFormModal/EcogestureLaunchFormModal.spec.tsx
+++ b/src/components/EcogestureForm/EcogestureLaunchFormModal/EcogestureLaunchFormModal.spec.tsx
@@ -1,28 +1,27 @@
-import { Button } from '@material-ui/core'
-import { mount } from 'enzyme'
-import toJson from 'enzyme-to-json'
+import { render, screen } from '@testing-library/react'
+import { userEvent } from '@testing-library/user-event'
import React from 'react'
import EcogestureLaunchFormModal from './EcogestureLaunchFormModal'
const mockHandleClose = jest.fn()
describe('EcogestureLaunchFormModal component', () => {
it('should be rendered correctly', () => {
- const wrapper = mount(
+ const { baseElement } = render(
<EcogestureLaunchFormModal
open={true}
handleCloseClick={mockHandleClose}
/>
)
- expect(toJson(wrapper)).toMatchSnapshot()
+ expect(baseElement).toMatchSnapshot()
})
it('should close modal', async () => {
- const wrapper = mount(
+ render(
<EcogestureLaunchFormModal
open={true}
handleCloseClick={mockHandleClose}
/>
)
- wrapper.find(Button).first().simulate('click')
+ await userEvent.click(screen.getAllByRole('button')[0])
expect(mockHandleClose).toHaveBeenCalledTimes(1)
})
})
diff --git a/src/components/EcogestureForm/EcogestureLaunchFormModal/EcogestureLaunchFormModal.tsx b/src/components/EcogestureForm/EcogestureLaunchFormModal/EcogestureLaunchFormModal.tsx
index 328ec33efd44004193119a6044bf2fc3a21a0bf2..d7254529856ff6b6a18f6e67ee9ed18d0efe9f09 100644
--- a/src/components/EcogestureForm/EcogestureLaunchFormModal/EcogestureLaunchFormModal.tsx
+++ b/src/components/EcogestureForm/EcogestureLaunchFormModal/EcogestureLaunchFormModal.tsx
@@ -45,10 +45,7 @@ const EcogestureLaunchFormModal = ({
<Button
aria-label={t('ecogesture.initModal.btn2')}
onClick={handleCloseClick}
- classes={{
- root: 'btn-profile-next rounded',
- label: 'text-16-bold',
- }}
+ className="btnPrimary"
>
{t('ecogesture.initModal.btn2')}
</Button>
diff --git a/src/components/EcogestureForm/EcogestureLaunchFormModal/__snapshots__/EcogestureLaunchFormModal.spec.tsx.snap b/src/components/EcogestureForm/EcogestureLaunchFormModal/__snapshots__/EcogestureLaunchFormModal.spec.tsx.snap
index 11bbbe72d35769a15252dc8cee1606a0a411877d..2516ca2ce6b53497a0feee3ebf63e36e4f00bcda 100644
--- a/src/components/EcogestureForm/EcogestureLaunchFormModal/__snapshots__/EcogestureLaunchFormModal.spec.tsx.snap
+++ b/src/components/EcogestureForm/EcogestureLaunchFormModal/__snapshots__/EcogestureLaunchFormModal.spec.tsx.snap
@@ -1,963 +1,100 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`EcogestureLaunchFormModal component should be rendered correctly 1`] = `
-<EcogestureLaunchFormModal
- handleCloseClick={[MockFunction]}
- open={true}
+<body
+ style="padding-right: 0px; overflow: hidden;"
>
- <WithStyles(ForwardRef(Dialog))
- aria-labelledby="accessibility-title"
- classes={
- Object {
- "paper": "modal-paper",
- "root": "modal-root",
- }
- }
- onClose={[MockFunction]}
- open={true}
+ <div
+ aria-hidden="true"
+ />
+ <div
+ class="MuiDialog-root modal-root"
+ role="presentation"
+ style="position: fixed; z-index: 1300; right: 0px; bottom: 0px; top: 0px; left: 0px;"
>
- <ForwardRef(Dialog)
- aria-labelledby="accessibility-title"
- classes={
- Object {
- "container": "MuiDialog-container",
- "paper": "MuiDialog-paper modal-paper",
- "paperFullScreen": "MuiDialog-paperFullScreen",
- "paperFullWidth": "MuiDialog-paperFullWidth",
- "paperScrollBody": "MuiDialog-paperScrollBody",
- "paperScrollPaper": "MuiDialog-paperScrollPaper",
- "paperWidthFalse": "MuiDialog-paperWidthFalse",
- "paperWidthLg": "MuiDialog-paperWidthLg",
- "paperWidthMd": "MuiDialog-paperWidthMd",
- "paperWidthSm": "MuiDialog-paperWidthSm",
- "paperWidthXl": "MuiDialog-paperWidthXl",
- "paperWidthXs": "MuiDialog-paperWidthXs",
- "root": "MuiDialog-root modal-root",
- "scrollBody": "MuiDialog-scrollBody",
- "scrollPaper": "MuiDialog-scrollPaper",
- }
- }
- onClose={[MockFunction]}
- open={true}
+ <div
+ aria-hidden="true"
+ class="MuiBackdrop-root"
+ style="opacity: 1; webkit-transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"
+ />
+ <div
+ data-test="sentinelStart"
+ tabindex="0"
+ />
+ <div
+ class="MuiDialog-container MuiDialog-scrollPaper"
+ role="none presentation"
+ style="opacity: 1; webkit-transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"
+ tabindex="-1"
>
- <ForwardRef(Modal)
- BackdropComponent={
- Object {
- "$$typeof": Symbol(react.forward_ref),
- "Naked": Object {
- "$$typeof": Symbol(react.forward_ref),
- "propTypes": Object {
- "children": [Function],
- "className": [Function],
- "classes": [Function],
- "invisible": [Function],
- "open": [Function],
- "transitionDuration": [Function],
- },
- "render": [Function],
- },
- "displayName": "WithStyles(ForwardRef(Backdrop))",
- "options": Object {
- "defaultTheme": Object {
- "breakpoints": Object {
- "between": [Function],
- "down": [Function],
- "keys": Array [
- "xs",
- "sm",
- "md",
- "lg",
- "xl",
- ],
- "only": [Function],
- "up": [Function],
- "values": Object {
- "lg": 1280,
- "md": 960,
- "sm": 600,
- "xl": 1920,
- "xs": 0,
- },
- "width": [Function],
- },
- "direction": "ltr",
- "mixins": Object {
- "gutters": [Function],
- "toolbar": Object {
- "@media (min-width:0px) and (orientation: landscape)": Object {
- "minHeight": 48,
- },
- "@media (min-width:600px)": Object {
- "minHeight": 64,
- },
- "minHeight": 56,
- },
- },
- "overrides": Object {},
- "palette": Object {
- "action": Object {
- "activatedOpacity": 0.12,
- "active": "rgba(0, 0, 0, 0.54)",
- "disabled": "rgba(0, 0, 0, 0.26)",
- "disabledBackground": "rgba(0, 0, 0, 0.12)",
- "disabledOpacity": 0.38,
- "focus": "rgba(0, 0, 0, 0.12)",
- "focusOpacity": 0.12,
- "hover": "rgba(0, 0, 0, 0.04)",
- "hoverOpacity": 0.04,
- "selected": "rgba(0, 0, 0, 0.08)",
- "selectedOpacity": 0.08,
- },
- "augmentColor": [Function],
- "background": Object {
- "default": "#fafafa",
- "paper": "#fff",
- },
- "common": Object {
- "black": "#000",
- "white": "#fff",
- },
- "contrastThreshold": 3,
- "divider": "rgba(0, 0, 0, 0.12)",
- "error": Object {
- "contrastText": "#fff",
- "dark": "#d32f2f",
- "light": "#e57373",
- "main": "#f44336",
- },
- "getContrastText": [Function],
- "grey": Object {
- "100": "#f5f5f5",
- "200": "#eeeeee",
- "300": "#e0e0e0",
- "400": "#bdbdbd",
- "50": "#fafafa",
- "500": "#9e9e9e",
- "600": "#757575",
- "700": "#616161",
- "800": "#424242",
- "900": "#212121",
- "A100": "#d5d5d5",
- "A200": "#aaaaaa",
- "A400": "#303030",
- "A700": "#616161",
- },
- "info": Object {
- "contrastText": "#fff",
- "dark": "#1976d2",
- "light": "#64b5f6",
- "main": "#2196f3",
- },
- "primary": Object {
- "contrastText": "#fff",
- "dark": "#303f9f",
- "light": "#7986cb",
- "main": "#3f51b5",
- },
- "secondary": Object {
- "contrastText": "#fff",
- "dark": "#c51162",
- "light": "#ff4081",
- "main": "#f50057",
- },
- "success": Object {
- "contrastText": "rgba(0, 0, 0, 0.87)",
- "dark": "#388e3c",
- "light": "#81c784",
- "main": "#4caf50",
- },
- "text": Object {
- "disabled": "rgba(0, 0, 0, 0.38)",
- "hint": "rgba(0, 0, 0, 0.38)",
- "primary": "rgba(0, 0, 0, 0.87)",
- "secondary": "rgba(0, 0, 0, 0.54)",
- },
- "tonalOffset": 0.2,
- "type": "light",
- "warning": Object {
- "contrastText": "rgba(0, 0, 0, 0.87)",
- "dark": "#f57c00",
- "light": "#ffb74d",
- "main": "#ff9800",
- },
- },
- "props": Object {},
- "shadows": Array [
- "none",
- "0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12)",
- "0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12)",
- "0px 3px 3px -2px rgba(0,0,0,0.2),0px 3px 4px 0px rgba(0,0,0,0.14),0px 1px 8px 0px rgba(0,0,0,0.12)",
- "0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12)",
- "0px 3px 5px -1px rgba(0,0,0,0.2),0px 5px 8px 0px rgba(0,0,0,0.14),0px 1px 14px 0px rgba(0,0,0,0.12)",
- "0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12)",
- "0px 4px 5px -2px rgba(0,0,0,0.2),0px 7px 10px 1px rgba(0,0,0,0.14),0px 2px 16px 1px rgba(0,0,0,0.12)",
- "0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12)",
- "0px 5px 6px -3px rgba(0,0,0,0.2),0px 9px 12px 1px rgba(0,0,0,0.14),0px 3px 16px 2px rgba(0,0,0,0.12)",
- "0px 6px 6px -3px rgba(0,0,0,0.2),0px 10px 14px 1px rgba(0,0,0,0.14),0px 4px 18px 3px rgba(0,0,0,0.12)",
- "0px 6px 7px -4px rgba(0,0,0,0.2),0px 11px 15px 1px rgba(0,0,0,0.14),0px 4px 20px 3px rgba(0,0,0,0.12)",
- "0px 7px 8px -4px rgba(0,0,0,0.2),0px 12px 17px 2px rgba(0,0,0,0.14),0px 5px 22px 4px rgba(0,0,0,0.12)",
- "0px 7px 8px -4px rgba(0,0,0,0.2),0px 13px 19px 2px rgba(0,0,0,0.14),0px 5px 24px 4px rgba(0,0,0,0.12)",
- "0px 7px 9px -4px rgba(0,0,0,0.2),0px 14px 21px 2px rgba(0,0,0,0.14),0px 5px 26px 4px rgba(0,0,0,0.12)",
- "0px 8px 9px -5px rgba(0,0,0,0.2),0px 15px 22px 2px rgba(0,0,0,0.14),0px 6px 28px 5px rgba(0,0,0,0.12)",
- "0px 8px 10px -5px rgba(0,0,0,0.2),0px 16px 24px 2px rgba(0,0,0,0.14),0px 6px 30px 5px rgba(0,0,0,0.12)",
- "0px 8px 11px -5px rgba(0,0,0,0.2),0px 17px 26px 2px rgba(0,0,0,0.14),0px 6px 32px 5px rgba(0,0,0,0.12)",
- "0px 9px 11px -5px rgba(0,0,0,0.2),0px 18px 28px 2px rgba(0,0,0,0.14),0px 7px 34px 6px rgba(0,0,0,0.12)",
- "0px 9px 12px -6px rgba(0,0,0,0.2),0px 19px 29px 2px rgba(0,0,0,0.14),0px 7px 36px 6px rgba(0,0,0,0.12)",
- "0px 10px 13px -6px rgba(0,0,0,0.2),0px 20px 31px 3px rgba(0,0,0,0.14),0px 8px 38px 7px rgba(0,0,0,0.12)",
- "0px 10px 13px -6px rgba(0,0,0,0.2),0px 21px 33px 3px rgba(0,0,0,0.14),0px 8px 40px 7px rgba(0,0,0,0.12)",
- "0px 10px 14px -6px rgba(0,0,0,0.2),0px 22px 35px 3px rgba(0,0,0,0.14),0px 8px 42px 7px rgba(0,0,0,0.12)",
- "0px 11px 14px -7px rgba(0,0,0,0.2),0px 23px 36px 3px rgba(0,0,0,0.14),0px 9px 44px 8px rgba(0,0,0,0.12)",
- "0px 11px 15px -7px rgba(0,0,0,0.2),0px 24px 38px 3px rgba(0,0,0,0.14),0px 9px 46px 8px rgba(0,0,0,0.12)",
- ],
- "shape": Object {
- "borderRadius": 4,
- },
- "spacing": [Function],
- "transitions": Object {
- "create": [Function],
- "duration": Object {
- "complex": 375,
- "enteringScreen": 225,
- "leavingScreen": 195,
- "short": 250,
- "shorter": 200,
- "shortest": 150,
- "standard": 300,
- },
- "easing": Object {
- "easeIn": "cubic-bezier(0.4, 0, 1, 1)",
- "easeInOut": "cubic-bezier(0.4, 0, 0.2, 1)",
- "easeOut": "cubic-bezier(0.0, 0, 0.2, 1)",
- "sharp": "cubic-bezier(0.4, 0, 0.6, 1)",
- },
- "getAutoHeightDuration": [Function],
- },
- "typography": Object {
- "body1": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "1rem",
- "fontWeight": 400,
- "letterSpacing": "0.00938em",
- "lineHeight": 1.5,
- },
- "body2": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "0.875rem",
- "fontWeight": 400,
- "letterSpacing": "0.01071em",
- "lineHeight": 1.43,
- },
- "button": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "0.875rem",
- "fontWeight": 500,
- "letterSpacing": "0.02857em",
- "lineHeight": 1.75,
- "textTransform": "uppercase",
- },
- "caption": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "0.75rem",
- "fontWeight": 400,
- "letterSpacing": "0.03333em",
- "lineHeight": 1.66,
- },
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": 14,
- "fontWeightBold": 700,
- "fontWeightLight": 300,
- "fontWeightMedium": 500,
- "fontWeightRegular": 400,
- "h1": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "6rem",
- "fontWeight": 300,
- "letterSpacing": "-0.01562em",
- "lineHeight": 1.167,
- },
- "h2": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "3.75rem",
- "fontWeight": 300,
- "letterSpacing": "-0.00833em",
- "lineHeight": 1.2,
- },
- "h3": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "3rem",
- "fontWeight": 400,
- "letterSpacing": "0em",
- "lineHeight": 1.167,
- },
- "h4": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "2.125rem",
- "fontWeight": 400,
- "letterSpacing": "0.00735em",
- "lineHeight": 1.235,
- },
- "h5": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "1.5rem",
- "fontWeight": 400,
- "letterSpacing": "0em",
- "lineHeight": 1.334,
- },
- "h6": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "1.25rem",
- "fontWeight": 500,
- "letterSpacing": "0.0075em",
- "lineHeight": 1.6,
- },
- "htmlFontSize": 16,
- "overline": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "0.75rem",
- "fontWeight": 400,
- "letterSpacing": "0.08333em",
- "lineHeight": 2.66,
- "textTransform": "uppercase",
- },
- "pxToRem": [Function],
- "round": [Function],
- "subtitle1": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "1rem",
- "fontWeight": 400,
- "letterSpacing": "0.00938em",
- "lineHeight": 1.75,
- },
- "subtitle2": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "0.875rem",
- "fontWeight": 500,
- "letterSpacing": "0.00714em",
- "lineHeight": 1.57,
- },
- },
- "zIndex": Object {
- "appBar": 1100,
- "drawer": 1200,
- "mobileStepper": 1000,
- "modal": 1300,
- "snackbar": 1400,
- "speedDial": 1050,
- "tooltip": 1500,
- },
- },
- "name": "MuiBackdrop",
- },
- "propTypes": Object {
- "classes": [Function],
- "innerRef": [Function],
- },
- "render": [Function],
- "useStyles": [Function],
- }
- }
- BackdropProps={
- Object {
- "transitionDuration": Object {
- "enter": 225,
- "exit": 195,
- },
- }
- }
- className="MuiDialog-root modal-root"
- closeAfterTransition={true}
- disableEscapeKeyDown={false}
- onClose={[MockFunction]}
- open={true}
+ <div
+ aria-labelledby="accessibility-title"
+ class="MuiPaper-root MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm MuiPaper-elevation24 MuiPaper-rounded"
+ role="dialog"
>
- <ForwardRef(Portal)
- disablePortal={false}
+ <div
+ id="accessibility-title"
>
- <Portal
- containerInfo={
- <body
- style="padding-right: 0px; overflow: hidden;"
- >
- <div
- class="MuiDialog-root modal-root"
- role="presentation"
- style="position: fixed; z-index: 1300; right: 0px; bottom: 0px; top: 0px; left: 0px;"
- >
- <div
- aria-hidden="true"
- class="MuiBackdrop-root"
- style="opacity: 1; webkit-transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"
- />
- <div
- data-test="sentinelStart"
- tabindex="0"
- />
- <div
- class="MuiDialog-container MuiDialog-scrollPaper"
- role="none presentation"
- style="opacity: 1; webkit-transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"
- tabindex="-1"
- >
- <div
- aria-labelledby="accessibility-title"
- class="MuiPaper-root MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm MuiPaper-elevation24 MuiPaper-rounded"
- role="dialog"
- >
- <div
- id="accessibility-title"
- >
- feedback.accessibility.window_title
- </div>
- <button
- aria-label="feedback.accessibility.button_close"
- class="MuiButtonBase-root MuiIconButton-root modal-paper-close-button"
- tabindex="0"
- type="button"
- >
- <span
- class="MuiIconButton-label"
- >
- <svg
- class="styles__icon___23x3R"
- height="16"
- width="16"
- >
- <use
- xlink:href="#test-file-stub"
- />
- </svg>
- </span>
- <span
- class="MuiTouchRipple-root"
- />
- </button>
- <div
- class="eg-init-modal"
- >
- <div
- class="title text-20-bold"
- >
- ecogesture.initModal.title
- </div>
- <div
- class="text-16-normal text"
- >
- ecogesture.initModal.text3
- </div>
- <button
- aria-label="ecogesture.initModal.btn2"
- class="MuiButtonBase-root MuiButton-root btn-profile-next rounded MuiButton-text"
- tabindex="0"
- type="button"
- >
- <span
- class="MuiButton-label text-16-bold"
- >
- ecogesture.initModal.btn2
- </span>
- <span
- class="MuiTouchRipple-root"
- />
- </button>
- </div>
- </div>
- </div>
- <div
- data-test="sentinelEnd"
- tabindex="0"
- />
- </div>
- </body>
- }
+ feedback.accessibility.window_title
+ </div>
+ <button
+ aria-label="feedback.accessibility.button_close"
+ class="MuiButtonBase-root MuiIconButton-root modal-paper-close-button"
+ tabindex="0"
+ type="button"
+ >
+ <span
+ class="MuiIconButton-label"
+ >
+ <svg
+ class="styles__icon___23x3R"
+ height="16"
+ width="16"
+ >
+ <use
+ xlink:href="#test-file-stub"
+ />
+ </svg>
+ </span>
+ <span
+ class="MuiTouchRipple-root"
+ />
+ </button>
+ <div
+ class="eg-init-modal"
+ >
+ <div
+ class="title text-20-bold"
+ >
+ ecogesture.initModal.title
+ </div>
+ <div
+ class="text-16-normal text"
+ >
+ ecogesture.initModal.text3
+ </div>
+ <button
+ aria-label="ecogesture.initModal.btn2"
+ class="MuiButtonBase-root MuiButton-root MuiButton-text btnPrimary"
+ tabindex="0"
+ type="button"
>
- <div
- className="MuiDialog-root modal-root"
- onKeyDown={[Function]}
- role="presentation"
- style={
- Object {
- "bottom": 0,
- "left": 0,
- "position": "fixed",
- "right": 0,
- "top": 0,
- "zIndex": 1300,
- }
- }
+ <span
+ class="MuiButton-label"
>
- <WithStyles(ForwardRef(Backdrop))
- onClick={[Function]}
- open={true}
- transitionDuration={
- Object {
- "enter": 225,
- "exit": 195,
- }
- }
- >
- <ForwardRef(Backdrop)
- classes={
- Object {
- "invisible": "MuiBackdrop-invisible",
- "root": "MuiBackdrop-root",
- }
- }
- onClick={[Function]}
- open={true}
- transitionDuration={
- Object {
- "enter": 225,
- "exit": 195,
- }
- }
- >
- <ForwardRef(Fade)
- in={true}
- onClick={[Function]}
- timeout={
- Object {
- "enter": 225,
- "exit": 195,
- }
- }
- >
- <Transition
- appear={true}
- enter={true}
- exit={true}
- in={true}
- mountOnEnter={false}
- onClick={[Function]}
- onEnter={[Function]}
- onEntered={[Function]}
- onEntering={[Function]}
- onExit={[Function]}
- onExited={[Function]}
- onExiting={[Function]}
- timeout={
- Object {
- "enter": 225,
- "exit": 195,
- }
- }
- unmountOnExit={false}
- >
- <div
- aria-hidden={true}
- className="MuiBackdrop-root"
- onClick={[Function]}
- style={
- Object {
- "opacity": 1,
- "visibility": undefined,
- }
- }
- />
- </Transition>
- </ForwardRef(Fade)>
- </ForwardRef(Backdrop)>
- </WithStyles(ForwardRef(Backdrop))>
- <Unstable_TrapFocus
- disableAutoFocus={false}
- disableEnforceFocus={false}
- disableRestoreFocus={false}
- getDoc={[Function]}
- isEnabled={[Function]}
- open={true}
- >
- <div
- data-test="sentinelStart"
- tabIndex={0}
- />
- <ForwardRef(Fade)
- appear={true}
- in={true}
- onEnter={[Function]}
- onExited={[Function]}
- role="none presentation"
- tabIndex="-1"
- timeout={
- Object {
- "enter": 225,
- "exit": 195,
- }
- }
- >
- <Transition
- appear={true}
- enter={true}
- exit={true}
- in={true}
- mountOnEnter={false}
- onEnter={[Function]}
- onEntered={[Function]}
- onEntering={[Function]}
- onExit={[Function]}
- onExited={[Function]}
- onExiting={[Function]}
- role="none presentation"
- tabIndex="-1"
- timeout={
- Object {
- "enter": 225,
- "exit": 195,
- }
- }
- unmountOnExit={false}
- >
- <div
- className="MuiDialog-container MuiDialog-scrollPaper"
- onMouseDown={[Function]}
- onMouseUp={[Function]}
- role="none presentation"
- style={
- Object {
- "opacity": 1,
- "visibility": undefined,
- }
- }
- tabIndex="-1"
- >
- <WithStyles(ForwardRef(Paper))
- aria-labelledby="accessibility-title"
- className="MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm"
- elevation={24}
- role="dialog"
- >
- <ForwardRef(Paper)
- aria-labelledby="accessibility-title"
- className="MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm"
- classes={
- Object {
- "elevation0": "MuiPaper-elevation0",
- "elevation1": "MuiPaper-elevation1",
- "elevation10": "MuiPaper-elevation10",
- "elevation11": "MuiPaper-elevation11",
- "elevation12": "MuiPaper-elevation12",
- "elevation13": "MuiPaper-elevation13",
- "elevation14": "MuiPaper-elevation14",
- "elevation15": "MuiPaper-elevation15",
- "elevation16": "MuiPaper-elevation16",
- "elevation17": "MuiPaper-elevation17",
- "elevation18": "MuiPaper-elevation18",
- "elevation19": "MuiPaper-elevation19",
- "elevation2": "MuiPaper-elevation2",
- "elevation20": "MuiPaper-elevation20",
- "elevation21": "MuiPaper-elevation21",
- "elevation22": "MuiPaper-elevation22",
- "elevation23": "MuiPaper-elevation23",
- "elevation24": "MuiPaper-elevation24",
- "elevation3": "MuiPaper-elevation3",
- "elevation4": "MuiPaper-elevation4",
- "elevation5": "MuiPaper-elevation5",
- "elevation6": "MuiPaper-elevation6",
- "elevation7": "MuiPaper-elevation7",
- "elevation8": "MuiPaper-elevation8",
- "elevation9": "MuiPaper-elevation9",
- "outlined": "MuiPaper-outlined",
- "root": "MuiPaper-root",
- "rounded": "MuiPaper-rounded",
- }
- }
- elevation={24}
- role="dialog"
- >
- <div
- aria-labelledby="accessibility-title"
- className="MuiPaper-root MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm MuiPaper-elevation24 MuiPaper-rounded"
- role="dialog"
- >
- <div
- id="accessibility-title"
- >
- feedback.accessibility.window_title
- </div>
- <WithStyles(ForwardRef(IconButton))
- aria-label="feedback.accessibility.button_close"
- className="modal-paper-close-button"
- onClick={[MockFunction]}
- >
- <ForwardRef(IconButton)
- aria-label="feedback.accessibility.button_close"
- className="modal-paper-close-button"
- classes={
- Object {
- "colorInherit": "MuiIconButton-colorInherit",
- "colorPrimary": "MuiIconButton-colorPrimary",
- "colorSecondary": "MuiIconButton-colorSecondary",
- "disabled": "Mui-disabled",
- "edgeEnd": "MuiIconButton-edgeEnd",
- "edgeStart": "MuiIconButton-edgeStart",
- "label": "MuiIconButton-label",
- "root": "MuiIconButton-root",
- "sizeSmall": "MuiIconButton-sizeSmall",
- }
- }
- onClick={[MockFunction]}
- >
- <WithStyles(ForwardRef(ButtonBase))
- aria-label="feedback.accessibility.button_close"
- centerRipple={true}
- className="MuiIconButton-root modal-paper-close-button"
- disabled={false}
- focusRipple={true}
- onClick={[MockFunction]}
- >
- <ForwardRef(ButtonBase)
- aria-label="feedback.accessibility.button_close"
- centerRipple={true}
- className="MuiIconButton-root modal-paper-close-button"
- classes={
- Object {
- "disabled": "Mui-disabled",
- "focusVisible": "Mui-focusVisible",
- "root": "MuiButtonBase-root",
- }
- }
- disabled={false}
- focusRipple={true}
- onClick={[MockFunction]}
- >
- <button
- aria-label="feedback.accessibility.button_close"
- className="MuiButtonBase-root MuiIconButton-root modal-paper-close-button"
- disabled={false}
- onBlur={[Function]}
- onClick={[MockFunction]}
- onDragLeave={[Function]}
- onFocus={[Function]}
- onKeyDown={[Function]}
- onKeyUp={[Function]}
- onMouseDown={[Function]}
- onMouseLeave={[Function]}
- onMouseUp={[Function]}
- onTouchEnd={[Function]}
- onTouchMove={[Function]}
- onTouchStart={[Function]}
- tabIndex={0}
- type="button"
- >
- <span
- className="MuiIconButton-label"
- >
- <Icon
- icon="test-file-stub"
- size={16}
- spin={false}
- >
- <Component
- className="styles__icon___23x3R"
- height={16}
- style={Object {}}
- width={16}
- >
- <svg
- className="styles__icon___23x3R"
- height={16}
- style={Object {}}
- width={16}
- >
- <use
- xlinkHref="#test-file-stub"
- />
- </svg>
- </Component>
- </Icon>
- </span>
- <WithStyles(memo)
- center={true}
- >
- <ForwardRef(TouchRipple)
- center={true}
- classes={
- Object {
- "child": "MuiTouchRipple-child",
- "childLeaving": "MuiTouchRipple-childLeaving",
- "childPulsate": "MuiTouchRipple-childPulsate",
- "ripple": "MuiTouchRipple-ripple",
- "ripplePulsate": "MuiTouchRipple-ripplePulsate",
- "rippleVisible": "MuiTouchRipple-rippleVisible",
- "root": "MuiTouchRipple-root",
- }
- }
- >
- <span
- className="MuiTouchRipple-root"
- >
- <TransitionGroup
- childFactory={[Function]}
- component={null}
- exit={true}
- />
- </span>
- </ForwardRef(TouchRipple)>
- </WithStyles(memo)>
- </button>
- </ForwardRef(ButtonBase)>
- </WithStyles(ForwardRef(ButtonBase))>
- </ForwardRef(IconButton)>
- </WithStyles(ForwardRef(IconButton))>
- <div
- className="eg-init-modal"
- >
- <div
- className="title text-20-bold"
- >
- ecogesture.initModal.title
- </div>
- <div
- className="text-16-normal text"
- >
- ecogesture.initModal.text3
- </div>
- <WithStyles(ForwardRef(Button))
- aria-label="ecogesture.initModal.btn2"
- classes={
- Object {
- "label": "text-16-bold",
- "root": "btn-profile-next rounded",
- }
- }
- onClick={[MockFunction]}
- >
- <ForwardRef(Button)
- aria-label="ecogesture.initModal.btn2"
- classes={
- Object {
- "colorInherit": "MuiButton-colorInherit",
- "contained": "MuiButton-contained",
- "containedPrimary": "MuiButton-containedPrimary",
- "containedSecondary": "MuiButton-containedSecondary",
- "containedSizeLarge": "MuiButton-containedSizeLarge",
- "containedSizeSmall": "MuiButton-containedSizeSmall",
- "disableElevation": "MuiButton-disableElevation",
- "disabled": "Mui-disabled",
- "endIcon": "MuiButton-endIcon",
- "focusVisible": "Mui-focusVisible",
- "fullWidth": "MuiButton-fullWidth",
- "iconSizeLarge": "MuiButton-iconSizeLarge",
- "iconSizeMedium": "MuiButton-iconSizeMedium",
- "iconSizeSmall": "MuiButton-iconSizeSmall",
- "label": "MuiButton-label text-16-bold",
- "outlined": "MuiButton-outlined",
- "outlinedPrimary": "MuiButton-outlinedPrimary",
- "outlinedSecondary": "MuiButton-outlinedSecondary",
- "outlinedSizeLarge": "MuiButton-outlinedSizeLarge",
- "outlinedSizeSmall": "MuiButton-outlinedSizeSmall",
- "root": "MuiButton-root btn-profile-next rounded",
- "sizeLarge": "MuiButton-sizeLarge",
- "sizeSmall": "MuiButton-sizeSmall",
- "startIcon": "MuiButton-startIcon",
- "text": "MuiButton-text",
- "textPrimary": "MuiButton-textPrimary",
- "textSecondary": "MuiButton-textSecondary",
- "textSizeLarge": "MuiButton-textSizeLarge",
- "textSizeSmall": "MuiButton-textSizeSmall",
- }
- }
- onClick={[MockFunction]}
- >
- <WithStyles(ForwardRef(ButtonBase))
- aria-label="ecogesture.initModal.btn2"
- className="MuiButton-root btn-profile-next rounded MuiButton-text"
- component="button"
- disabled={false}
- focusRipple={true}
- focusVisibleClassName="Mui-focusVisible"
- onClick={[MockFunction]}
- type="button"
- >
- <ForwardRef(ButtonBase)
- aria-label="ecogesture.initModal.btn2"
- className="MuiButton-root btn-profile-next rounded MuiButton-text"
- classes={
- Object {
- "disabled": "Mui-disabled",
- "focusVisible": "Mui-focusVisible",
- "root": "MuiButtonBase-root",
- }
- }
- component="button"
- disabled={false}
- focusRipple={true}
- focusVisibleClassName="Mui-focusVisible"
- onClick={[MockFunction]}
- type="button"
- >
- <button
- aria-label="ecogesture.initModal.btn2"
- className="MuiButtonBase-root MuiButton-root btn-profile-next rounded MuiButton-text"
- disabled={false}
- onBlur={[Function]}
- onClick={[MockFunction]}
- onDragLeave={[Function]}
- onFocus={[Function]}
- onKeyDown={[Function]}
- onKeyUp={[Function]}
- onMouseDown={[Function]}
- onMouseLeave={[Function]}
- onMouseUp={[Function]}
- onTouchEnd={[Function]}
- onTouchMove={[Function]}
- onTouchStart={[Function]}
- tabIndex={0}
- type="button"
- >
- <span
- className="MuiButton-label text-16-bold"
- >
- ecogesture.initModal.btn2
- </span>
- <WithStyles(memo)
- center={false}
- >
- <ForwardRef(TouchRipple)
- center={false}
- classes={
- Object {
- "child": "MuiTouchRipple-child",
- "childLeaving": "MuiTouchRipple-childLeaving",
- "childPulsate": "MuiTouchRipple-childPulsate",
- "ripple": "MuiTouchRipple-ripple",
- "ripplePulsate": "MuiTouchRipple-ripplePulsate",
- "rippleVisible": "MuiTouchRipple-rippleVisible",
- "root": "MuiTouchRipple-root",
- }
- }
- >
- <span
- className="MuiTouchRipple-root"
- >
- <TransitionGroup
- childFactory={[Function]}
- component={null}
- exit={true}
- />
- </span>
- </ForwardRef(TouchRipple)>
- </WithStyles(memo)>
- </button>
- </ForwardRef(ButtonBase)>
- </WithStyles(ForwardRef(ButtonBase))>
- </ForwardRef(Button)>
- </WithStyles(ForwardRef(Button))>
- </div>
- </div>
- </ForwardRef(Paper)>
- </WithStyles(ForwardRef(Paper))>
- </div>
- </Transition>
- </ForwardRef(Fade)>
- <div
- data-test="sentinelEnd"
- tabIndex={0}
- />
- </Unstable_TrapFocus>
- </div>
- </Portal>
- </ForwardRef(Portal)>
- </ForwardRef(Modal)>
- </ForwardRef(Dialog)>
- </WithStyles(ForwardRef(Dialog))>
-</EcogestureLaunchFormModal>
+ ecogesture.initModal.btn2
+ </span>
+ <span
+ class="MuiTouchRipple-root"
+ />
+ </button>
+ </div>
+ </div>
+ </div>
+ <div
+ data-test="sentinelEnd"
+ tabindex="0"
+ />
+ </div>
+</body>
`;
diff --git a/src/components/EcogestureForm/EcogestureLaunchFormModal/ecogestureLaunchFormModal.scss b/src/components/EcogestureForm/EcogestureLaunchFormModal/ecogestureLaunchFormModal.scss
index 283ead71a2a4533f761d1001fbc010309fba75d3..cbbceeafb01e65e85a602d82ab98b821e1589047 100644
--- a/src/components/EcogestureForm/EcogestureLaunchFormModal/ecogestureLaunchFormModal.scss
+++ b/src/components/EcogestureForm/EcogestureLaunchFormModal/ecogestureLaunchFormModal.scss
@@ -1,16 +1,11 @@
@import 'src/styles/base/color';
.eg-init-modal {
- color: $grey-bright;
- margin: 1rem 0;
+ display: flex;
+ flex-direction: column;
+ gap: 1rem;
.title {
text-align: center;
color: $gold-shadow;
}
- .text {
- margin: 1rem 0;
- }
- button {
- min-height: 45px;
- }
}
diff --git a/src/components/EcogestureForm/EquipmentIcon/EquipmentIcon.spec.tsx b/src/components/EcogestureForm/EquipmentIcon/EquipmentIcon.spec.tsx
index 6d248173c0e505d11a7d2ed6f6b4e94de80229ac..424c8de452b34948dd5265bc8adc7fd0b20581a6 100644
--- a/src/components/EcogestureForm/EquipmentIcon/EquipmentIcon.spec.tsx
+++ b/src/components/EcogestureForm/EquipmentIcon/EquipmentIcon.spec.tsx
@@ -1,24 +1,21 @@
-/* eslint-disable react/display-name */
+import { render, waitFor } from '@testing-library/react'
import { EquipmentType } from 'enums'
-import { mount } from 'enzyme'
-import toJson from 'enzyme-to-json'
import React from 'react'
-import { waitForComponentToPaint } from 'tests/__mocks__/testUtils'
import EquipmentIcon from './EquipmentIcon'
describe('EcogestureFormSingleChoice component', () => {
it('should be rendered correctly', async () => {
- const wrapper = mount(
+ const { container } = render(
<EquipmentIcon equipment={EquipmentType.BOILER} isChecked={false} />
)
- await waitForComponentToPaint(wrapper)
- expect(toJson(wrapper)).toMatchSnapshot()
+ await waitFor(() => null, { container })
+ expect(container).toMatchSnapshot()
})
it('should render checked icon', async () => {
- const wrapper = mount(
+ const { container } = render(
<EquipmentIcon equipment={EquipmentType.BOILER} isChecked={true} />
)
- await waitForComponentToPaint(wrapper)
- expect(wrapper.find('.checked').first().exists()).toBeTruthy()
+ await waitFor(() => null, { container })
+ expect(container.getElementsByClassName('checked').length).toBeTruthy()
})
})
diff --git a/src/components/EcogestureForm/EquipmentIcon/EquipmentIcon.tsx b/src/components/EcogestureForm/EquipmentIcon/EquipmentIcon.tsx
index e01d242adb824194b6249d775d88fe1d39039c40..56dc1a35b33e229c35992cc3bb8ea8f627265a9e 100644
--- a/src/components/EcogestureForm/EquipmentIcon/EquipmentIcon.tsx
+++ b/src/components/EcogestureForm/EquipmentIcon/EquipmentIcon.tsx
@@ -25,15 +25,10 @@ const EquipmentIcon = ({ equipment, isChecked }: EquipmentIconProps) => {
subscribed = false
}
}, [equipment])
+
return (
<>
- <div
- className={
- isChecked
- ? 'equipment-icon-container checked'
- : ' equipment-icon-container'
- }
- >
+ <div className={`equipment-icon-container ${isChecked ? 'checked' : ''}`}>
<Icon icon={icon} size={40} className="equipmentIcon " />
</div>
<div className="text text-14-normal">
diff --git a/src/components/EcogestureForm/EquipmentIcon/__snapshots__/EquipmentIcon.spec.tsx.snap b/src/components/EcogestureForm/EquipmentIcon/__snapshots__/EquipmentIcon.spec.tsx.snap
index 8909ac3fb08ea93c2135fee9ae4789885bf69701..342bc0c025ce91c3e8d85b98639d66b4aea0bde0 100644
--- a/src/components/EcogestureForm/EquipmentIcon/__snapshots__/EquipmentIcon.spec.tsx.snap
+++ b/src/components/EcogestureForm/EquipmentIcon/__snapshots__/EquipmentIcon.spec.tsx.snap
@@ -1,42 +1,24 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`EcogestureFormSingleChoice component should be rendered correctly 1`] = `
-<EquipmentIcon
- equipment="BOILER"
- isChecked={false}
->
+<div>
<div
- className=" equipment-icon-container"
+ class="equipment-icon-container "
>
- <Icon
- className="equipmentIcon "
- icon="test-file-stub"
- size={40}
- spin={false}
+ <svg
+ class="equipmentIcon styles__icon___23x3R"
+ height="40"
+ width="40"
>
- <Component
- className="equipmentIcon styles__icon___23x3R"
- height={40}
- style={Object {}}
- width={40}
- >
- <svg
- className="equipmentIcon styles__icon___23x3R"
- height={40}
- style={Object {}}
- width={40}
- >
- <use
- xlinkHref="#test-file-stub"
- />
- </svg>
- </Component>
- </Icon>
+ <use
+ xlink:href="#test-file-stub"
+ />
+ </svg>
</div>
<div
- className="text text-14-normal"
+ class="text text-14-normal"
>
ecogesture_profile.equipments.boiler
</div>
-</EquipmentIcon>
+</div>
`;
diff --git a/src/components/EcogestureForm/__snapshots__/EcogestureFormView.spec.tsx.snap b/src/components/EcogestureForm/__snapshots__/EcogestureFormView.spec.tsx.snap
index b343a1c9654cf7eae93c8fa31497c0ca862cc0a1..b759c1dabdb8f7bb39bb2352dfd9b5ce5e328f6a 100644
--- a/src/components/EcogestureForm/__snapshots__/EcogestureFormView.spec.tsx.snap
+++ b/src/components/EcogestureForm/__snapshots__/EcogestureFormView.spec.tsx.snap
@@ -1,326 +1,84 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`EcogestureFormView component should be rendered correctly 1`] = `
-<Provider
- store={
- Object {
- "clearActions": [Function],
- "dispatch": [Function],
- "getActions": [Function],
- "getState": [Function],
- "replaceReducer": [Function],
- "subscribe": [Function],
- }
- }
->
- <EcogestureFormView>
- <mock-cozybar
- titleKey="common.title_ecogestures"
- />
- <mock-header
- desktopTitleKey="common.title_ecogestures"
- setHeaderHeight={[Function]}
- />
- <mock-content
- heightOffset={0}
+<div>
+ <mock-cozybar
+ titlekey="common.title_ecogestures"
+ />
+ <mock-header
+ desktoptitlekey="common.title_ecogestures"
+ />
+ <mock-content
+ heightoffset="0"
+ >
+ <div
+ class="ecogesture-profile-container"
>
- <EcogestureFormSingleChoice
- answerType={
- Object {
- "attribute": "heating",
- "choices": Array [
- "individual",
- "collective",
- ],
- "type": 0,
- }
- }
- currentProfileEcogesture={
- Object {
- "equipments": Array [],
- "heating": "individual",
- "hotWater": "individual",
- "warmingFluid": 0,
- }
- }
- setNextStep={[Function]}
- setPreviousStep={[Function]}
- step={0}
- viewedStep={-1}
+ <div
+ class="profile-form-container ecogesture-form-single"
>
<div
- className="ecogesture-profile-container"
+ class="profile-question-label"
>
- <div
- className="profile-form-container ecogesture-form-single"
+ ecogesture_form.heating_type.question
+ </div>
+ <label
+ class="radio_short"
+ >
+ <input
+ class=""
+ name="individual"
+ type="radio"
+ value="individual"
+ />
+ ecogesture_form.heating_type.individual
+ </label>
+ <label
+ class="radio_short"
+ >
+ <input
+ class=""
+ name="collective"
+ type="radio"
+ value="collective"
+ />
+ ecogesture_form.heating_type.collective
+ </label>
+ </div>
+ <div
+ class="profile-navigation"
+ >
+ <button
+ aria-label="profile_type.accessibility.button_previous"
+ class="MuiButtonBase-root MuiButton-root MuiButton-text btnSecondary Mui-disabled Mui-disabled"
+ disabled=""
+ tabindex="-1"
+ type="button"
+ >
+ <span
+ class="MuiButton-label"
>
- <div
- className="profile-question-label"
- >
- ecogesture_form.heating_type.question
- </div>
- <label
- className="radio_short"
- key="individual"
- >
- <input
- checked={false}
- className=""
- name="individual"
- onChange={[Function]}
- type="radio"
- value="individual"
- />
- ecogesture_form.heating_type.individual
- </label>
- <label
- className="radio_short"
- key="collective"
- >
- <input
- checked={false}
- className=""
- name="collective"
- onChange={[Function]}
- type="radio"
- value="collective"
- />
- ecogesture_form.heating_type.collective
- </label>
- </div>
- <FormNavigation
- disableNextButton={true}
- handleNext={[Function]}
- handlePrevious={[Function]}
- isEcogesture={true}
- step={0}
+ profile_type.form.button_previous
+ </span>
+ </button>
+ <button
+ aria-label="profile_type.accessibility.button_next"
+ class="MuiButtonBase-root MuiButton-root MuiButton-text btnPrimary Mui-disabled Mui-disabled"
+ disabled=""
+ tabindex="-1"
+ type="button"
+ >
+ <span
+ class="MuiButton-label"
>
- <div
- className="profile-navigation"
- >
- <WithStyles(ForwardRef(Button))
- aria-label="profile_type.accessibility.button_previous"
- className="profile-navigation-button"
- classes={
- Object {
- "label": "text-16-bold",
- "root": "btn-profile-back",
- }
- }
- disabled={true}
- onClick={[Function]}
- >
- <ForwardRef(Button)
- aria-label="profile_type.accessibility.button_previous"
- className="profile-navigation-button"
- classes={
- Object {
- "colorInherit": "MuiButton-colorInherit",
- "contained": "MuiButton-contained",
- "containedPrimary": "MuiButton-containedPrimary",
- "containedSecondary": "MuiButton-containedSecondary",
- "containedSizeLarge": "MuiButton-containedSizeLarge",
- "containedSizeSmall": "MuiButton-containedSizeSmall",
- "disableElevation": "MuiButton-disableElevation",
- "disabled": "Mui-disabled",
- "endIcon": "MuiButton-endIcon",
- "focusVisible": "Mui-focusVisible",
- "fullWidth": "MuiButton-fullWidth",
- "iconSizeLarge": "MuiButton-iconSizeLarge",
- "iconSizeMedium": "MuiButton-iconSizeMedium",
- "iconSizeSmall": "MuiButton-iconSizeSmall",
- "label": "MuiButton-label text-16-bold",
- "outlined": "MuiButton-outlined",
- "outlinedPrimary": "MuiButton-outlinedPrimary",
- "outlinedSecondary": "MuiButton-outlinedSecondary",
- "outlinedSizeLarge": "MuiButton-outlinedSizeLarge",
- "outlinedSizeSmall": "MuiButton-outlinedSizeSmall",
- "root": "MuiButton-root btn-profile-back",
- "sizeLarge": "MuiButton-sizeLarge",
- "sizeSmall": "MuiButton-sizeSmall",
- "startIcon": "MuiButton-startIcon",
- "text": "MuiButton-text",
- "textPrimary": "MuiButton-textPrimary",
- "textSecondary": "MuiButton-textSecondary",
- "textSizeLarge": "MuiButton-textSizeLarge",
- "textSizeSmall": "MuiButton-textSizeSmall",
- }
- }
- disabled={true}
- onClick={[Function]}
- >
- <WithStyles(ForwardRef(ButtonBase))
- aria-label="profile_type.accessibility.button_previous"
- className="MuiButton-root btn-profile-back MuiButton-text profile-navigation-button Mui-disabled"
- component="button"
- disabled={true}
- focusRipple={true}
- focusVisibleClassName="Mui-focusVisible"
- onClick={[Function]}
- type="button"
- >
- <ForwardRef(ButtonBase)
- aria-label="profile_type.accessibility.button_previous"
- className="MuiButton-root btn-profile-back MuiButton-text profile-navigation-button Mui-disabled"
- classes={
- Object {
- "disabled": "Mui-disabled",
- "focusVisible": "Mui-focusVisible",
- "root": "MuiButtonBase-root",
- }
- }
- component="button"
- disabled={true}
- focusRipple={true}
- focusVisibleClassName="Mui-focusVisible"
- onClick={[Function]}
- type="button"
- >
- <button
- aria-label="profile_type.accessibility.button_previous"
- className="MuiButtonBase-root MuiButton-root btn-profile-back MuiButton-text profile-navigation-button Mui-disabled Mui-disabled"
- disabled={true}
- onBlur={[Function]}
- onClick={[Function]}
- onDragLeave={[Function]}
- onFocus={[Function]}
- onKeyDown={[Function]}
- onKeyUp={[Function]}
- onMouseDown={[Function]}
- onMouseLeave={[Function]}
- onMouseUp={[Function]}
- onTouchEnd={[Function]}
- onTouchMove={[Function]}
- onTouchStart={[Function]}
- tabIndex={-1}
- type="button"
- >
- <span
- className="MuiButton-label text-16-bold"
- >
- < profile_type.form.button_previous
- </span>
- </button>
- </ForwardRef(ButtonBase)>
- </WithStyles(ForwardRef(ButtonBase))>
- </ForwardRef(Button)>
- </WithStyles(ForwardRef(Button))>
- <WithStyles(ForwardRef(Button))
- aria-label="profile_type.accessibility.button_next"
- className="profile-navigation-button disabled"
- classes={
- Object {
- "label": "text-16-bold",
- "root": "btn-profile-next",
- }
- }
- disabled={true}
- onClick={[Function]}
- >
- <ForwardRef(Button)
- aria-label="profile_type.accessibility.button_next"
- className="profile-navigation-button disabled"
- classes={
- Object {
- "colorInherit": "MuiButton-colorInherit",
- "contained": "MuiButton-contained",
- "containedPrimary": "MuiButton-containedPrimary",
- "containedSecondary": "MuiButton-containedSecondary",
- "containedSizeLarge": "MuiButton-containedSizeLarge",
- "containedSizeSmall": "MuiButton-containedSizeSmall",
- "disableElevation": "MuiButton-disableElevation",
- "disabled": "Mui-disabled",
- "endIcon": "MuiButton-endIcon",
- "focusVisible": "Mui-focusVisible",
- "fullWidth": "MuiButton-fullWidth",
- "iconSizeLarge": "MuiButton-iconSizeLarge",
- "iconSizeMedium": "MuiButton-iconSizeMedium",
- "iconSizeSmall": "MuiButton-iconSizeSmall",
- "label": "MuiButton-label text-16-bold",
- "outlined": "MuiButton-outlined",
- "outlinedPrimary": "MuiButton-outlinedPrimary",
- "outlinedSecondary": "MuiButton-outlinedSecondary",
- "outlinedSizeLarge": "MuiButton-outlinedSizeLarge",
- "outlinedSizeSmall": "MuiButton-outlinedSizeSmall",
- "root": "MuiButton-root btn-profile-next",
- "sizeLarge": "MuiButton-sizeLarge",
- "sizeSmall": "MuiButton-sizeSmall",
- "startIcon": "MuiButton-startIcon",
- "text": "MuiButton-text",
- "textPrimary": "MuiButton-textPrimary",
- "textSecondary": "MuiButton-textSecondary",
- "textSizeLarge": "MuiButton-textSizeLarge",
- "textSizeSmall": "MuiButton-textSizeSmall",
- }
- }
- disabled={true}
- onClick={[Function]}
- >
- <WithStyles(ForwardRef(ButtonBase))
- aria-label="profile_type.accessibility.button_next"
- className="MuiButton-root btn-profile-next MuiButton-text profile-navigation-button disabled Mui-disabled"
- component="button"
- disabled={true}
- focusRipple={true}
- focusVisibleClassName="Mui-focusVisible"
- onClick={[Function]}
- type="button"
- >
- <ForwardRef(ButtonBase)
- aria-label="profile_type.accessibility.button_next"
- className="MuiButton-root btn-profile-next MuiButton-text profile-navigation-button disabled Mui-disabled"
- classes={
- Object {
- "disabled": "Mui-disabled",
- "focusVisible": "Mui-focusVisible",
- "root": "MuiButtonBase-root",
- }
- }
- component="button"
- disabled={true}
- focusRipple={true}
- focusVisibleClassName="Mui-focusVisible"
- onClick={[Function]}
- type="button"
- >
- <button
- aria-label="profile_type.accessibility.button_next"
- className="MuiButtonBase-root MuiButton-root btn-profile-next MuiButton-text profile-navigation-button disabled Mui-disabled Mui-disabled"
- disabled={true}
- onBlur={[Function]}
- onClick={[Function]}
- onDragLeave={[Function]}
- onFocus={[Function]}
- onKeyDown={[Function]}
- onKeyUp={[Function]}
- onMouseDown={[Function]}
- onMouseLeave={[Function]}
- onMouseUp={[Function]}
- onTouchEnd={[Function]}
- onTouchMove={[Function]}
- onTouchStart={[Function]}
- tabIndex={-1}
- type="button"
- >
- <span
- className="MuiButton-label text-16-bold"
- >
- profile_type.form.button_next >
- </span>
- </button>
- </ForwardRef(ButtonBase)>
- </WithStyles(ForwardRef(ButtonBase))>
- </ForwardRef(Button)>
- </WithStyles(ForwardRef(Button))>
- </div>
- </FormNavigation>
- </div>
- </EcogestureFormSingleChoice>
- </mock-content>
- <mock-ecogesturelaunchmodal
- handleCloseClick={[Function]}
- open={true}
- />
- </EcogestureFormView>
-</Provider>
+ profile_type.form.button_next
+ </span>
+ </button>
+ </div>
+ </div>
+ </mock-content>
+ <mock-ecogesturelaunchmodal
+ open="true"
+ />
+</div>
`;
diff --git a/src/components/EcogestureSelection/EcogestureSelectionDetail/EcogestureSelectionDetail.spec.tsx b/src/components/EcogestureSelection/EcogestureSelectionDetail/EcogestureSelectionDetail.spec.tsx
index 33640fbccb586f68b29928f91c088f2bc9509660..4f5261c876fa60a9f14195280c7176826b2c7e7d 100644
--- a/src/components/EcogestureSelection/EcogestureSelectionDetail/EcogestureSelectionDetail.spec.tsx
+++ b/src/components/EcogestureSelection/EcogestureSelectionDetail/EcogestureSelectionDetail.spec.tsx
@@ -1,77 +1,58 @@
-import { Button } from '@material-ui/core'
-import { mount } from 'enzyme'
-import toJson from 'enzyme-to-json'
+import { render, screen, waitFor } from '@testing-library/react'
+import { userEvent } from '@testing-library/user-event'
import React from 'react'
import { mockedEcogesturesData } from 'tests/__mocks__/ecogesturesData.mock'
-import { waitForComponentToPaint } from 'tests/__mocks__/testUtils'
import EcogestureSelectionDetail from './EcogestureSelectionDetail'
const mockValidate = jest.fn()
describe('EcogestureSelectionDetail component', () => {
it('should be rendered correctly', async () => {
- const wrapper = mount(
+ const { container } = render(
<EcogestureSelectionDetail
ecogesture={mockedEcogesturesData[0]}
validate={mockValidate}
title={mockedEcogesturesData[0].shortName}
/>
)
- await waitForComponentToPaint(wrapper)
- expect(toJson(wrapper)).toMatchSnapshot()
+ await waitFor(() => null, { container })
+ expect(container).toMatchSnapshot()
})
- it('should toggle more details', async () => {
- const wrapper = mount(
- <EcogestureSelectionDetail
- ecogesture={mockedEcogesturesData[0]}
- validate={mockValidate}
- title={mockedEcogesturesData[0].shortName}
- />
- )
- await waitForComponentToPaint(wrapper)
-
- wrapper.find('.showMore').first().simulate('click')
- await waitForComponentToPaint(wrapper)
+ describe('should click on buttons', () => {
+ let container: HTMLElement
+ beforeEach(async () => {
+ container = render(
+ <EcogestureSelectionDetail
+ ecogesture={mockedEcogesturesData[0]}
+ validate={mockValidate}
+ title={mockedEcogesturesData[0].shortName}
+ />
+ ).container
+ await waitFor(() => null, { container })
+ })
- expect(wrapper.find('.showMore').text()).toBe('ecogesture_modal.show_less')
- })
- it('should call validate with objective to true', async () => {
- const wrapper = mount(
- <EcogestureSelectionDetail
- ecogesture={mockedEcogesturesData[0]}
- validate={mockValidate}
- title={mockedEcogesturesData[0].shortName}
- />
- )
- wrapper.find(Button).at(0).simulate('click')
- await waitForComponentToPaint(wrapper)
- expect(mockValidate).toHaveBeenCalledWith(true, false)
- })
+ it('should toggle more details', async () => {
+ const [showMore] = screen.getAllByRole('button')
+ await userEvent.click(showMore)
+ expect(screen.getByText('ecogesture_modal.show_less')).toBeInTheDocument()
+ })
+ it('should call validate with objective to true', async () => {
+ const [, objective] = screen.getAllByRole('button')
+ await userEvent.click(objective)
+ expect(mockValidate).toHaveBeenCalledWith(true, false)
+ })
- it('should call validate with doing to true', async () => {
- const wrapper = mount(
- <EcogestureSelectionDetail
- ecogesture={mockedEcogesturesData[0]}
- validate={mockValidate}
- title={mockedEcogesturesData[0].shortName}
- />
- )
- wrapper.find(Button).at(1).simulate('click')
- await waitForComponentToPaint(wrapper)
- expect(mockValidate).toHaveBeenCalledWith(false, true)
- })
+ it('should call validate with doing to true', async () => {
+ const [, , doing] = screen.getAllByRole('button')
+ await userEvent.click(doing)
+ expect(mockValidate).toHaveBeenCalledWith(false, true)
+ })
- it('should call validate with objective and doing to false', async () => {
- const wrapper = mount(
- <EcogestureSelectionDetail
- ecogesture={mockedEcogesturesData[0]}
- validate={mockValidate}
- title={mockedEcogesturesData[0].shortName}
- />
- )
- wrapper.find(Button).at(2).simulate('click')
- await waitForComponentToPaint(wrapper)
- expect(mockValidate).toHaveBeenCalledWith(false, false)
+ it('should call validate with objective and doing to false', async () => {
+ const [, , , skip] = screen.getAllByRole('button')
+ await userEvent.click(skip)
+ expect(mockValidate).toHaveBeenCalledWith(false, false)
+ })
})
})
diff --git a/src/components/EcogestureSelection/EcogestureSelectionDetail/EcogestureSelectionDetail.tsx b/src/components/EcogestureSelection/EcogestureSelectionDetail/EcogestureSelectionDetail.tsx
index cf50f528ddd004fde180ea4784756ade2190af07..6d53bb111c2198f3055ae2e954179ac2bae1ab6e 100644
--- a/src/components/EcogestureSelection/EcogestureSelectionDetail/EcogestureSelectionDetail.tsx
+++ b/src/components/EcogestureSelection/EcogestureSelectionDetail/EcogestureSelectionDetail.tsx
@@ -47,15 +47,17 @@ const EcogestureSelectionDetail = ({
<StyledIcon className="icon" icon={ecogestureIcon} size={240} />
</div>
<div className="text-22 title">{title}</div>
- <div className="text text-18-bold">{ecogesture.longName}</div>
+ <div className="text-18-bold">{ecogesture.longName}</div>
- <div
- className="showMore text-15-normal"
+ <Button
+ classes={{
+ root: 'btnText showMore',
+ label: 'text-15-normal',
+ }}
onClick={() => setShowDetails(prev => !prev)}
- role="button"
>
{t(`ecogesture_modal.show_${showDetails ? 'less' : 'more'}`)}
- </div>
+ </Button>
<Collapse in={showDetails} exit={false}>
<div className="longDescription text-16-normal-150">
@@ -67,9 +69,8 @@ const EcogestureSelectionDetail = ({
<Button
aria-label={t('ecogesture_selection.button_objective')}
classes={{
- root: 'btn-secondary-negative',
+ root: 'btnSecondary',
label: 'text-14-bold',
- focusVisible: 'noFocus',
}}
onClick={() => validate(true, false)}
>
@@ -79,9 +80,8 @@ const EcogestureSelectionDetail = ({
<Button
aria-label={t('ecogesture_selection.button_doing')}
classes={{
- root: 'btn-secondary-negative',
+ root: 'btnSecondary',
label: 'text-14-bold',
- focusVisible: 'noFocus',
}}
onClick={() => validate(false, true)}
>
@@ -91,9 +91,8 @@ const EcogestureSelectionDetail = ({
<Button
aria-label={t('ecogesture_selection.button_skip')}
classes={{
- root: 'btn-secondary-negative',
+ root: 'btnSecondary',
label: 'text-14-bold',
- focusVisible: 'noFocus',
}}
onClick={() => validate(false, false)}
>
diff --git a/src/components/EcogestureSelection/EcogestureSelectionDetail/__snapshots__/EcogestureSelectionDetail.spec.tsx.snap b/src/components/EcogestureSelection/EcogestureSelectionDetail/__snapshots__/EcogestureSelectionDetail.spec.tsx.snap
index 0b56a7a8e59162761f2850469f30d2328467c5db..bbd6adbd92d72288c227dec29d4990211f4e943e 100644
--- a/src/components/EcogestureSelection/EcogestureSelectionDetail/__snapshots__/EcogestureSelectionDetail.spec.tsx.snap
+++ b/src/components/EcogestureSelection/EcogestureSelectionDetail/__snapshots__/EcogestureSelectionDetail.spec.tsx.snap
@@ -1,655 +1,149 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`EcogestureSelectionDetail component should be rendered correctly 1`] = `
-<EcogestureSelectionDetail
- ecogesture={
- Object {
- "_id": "ECOGESTURE001",
- "_rev": "1-67f1ea36efdd892c96bf64a8943154cd",
- "_type": "com.grandlyon.ecolyo.ecogesture",
- "action": false,
- "actionDuration": 3,
- "actionName": null,
- "difficulty": 1,
- "doing": false,
- "efficiency": 4,
- "equipment": false,
- "equipmentInstallation": true,
- "equipmentType": Array [],
- "fluidTypes": Array [
- 0,
- 2,
- ],
- "id": "ECOGESTURE001",
- "impactLevel": 8,
- "investment": null,
- "longDescription": "On se demande parfois si cela vaut le coup de \\"couper le chauffage\\" quand on s’absente… dès qu’il s’agit d’un week-end la réponse est « oui sûrement » ! Attention cependant au retour à ne pas faire de la surchauffe ! L’idéal est bien évidemment de régler sa programmation pour que le chauffage se relance quelques heures avant votre retour…",
- "longName": "Je baisse le chauffage en mode hors gel lorsque je m'absente plus de 2 jours.",
- "objective": false,
- "room": Array [
- 0,
- ],
- "season": "Hiver",
- "shortName": "Bonhomme de neige",
- "usage": 1,
- "viewedInSelection": false,
- }
- }
- title="Bonhomme de neige"
- validate={[MockFunction]}
->
+<div>
<div
- className="eg-selection-detail-container"
+ class="eg-selection-detail-container"
>
<div
- className="content"
+ class="content"
>
<div
- className="iconContainer"
+ class="iconContainer"
>
- <StyledIcon
- className="icon"
- icon="test-file-stub"
- size={240}
+ <svg
+ aria-hidden="true"
+ class="icon styles__icon___23x3R"
+ height="240"
+ width="240"
>
- <Icon
- aria-hidden={true}
- className="icon"
- icon="test-file-stub"
- size={240}
- spin={false}
- >
- <Component
- aria-hidden={true}
- className="icon styles__icon___23x3R"
- height={240}
- style={Object {}}
- width={240}
- >
- <svg
- aria-hidden={true}
- className="icon styles__icon___23x3R"
- height={240}
- style={Object {}}
- width={240}
- >
- <use
- xlinkHref="#test-file-stub"
- />
- </svg>
- </Component>
- </Icon>
- </StyledIcon>
+ <use
+ xlink:href="#test-file-stub"
+ />
+ </svg>
</div>
<div
- className="text-22 title"
+ class="text-22 title"
>
Bonhomme de neige
</div>
<div
- className="text text-18-bold"
+ class="text-18-bold"
>
Je baisse le chauffage en mode hors gel lorsque je m'absente plus de 2 jours.
</div>
- <div
- className="showMore text-15-normal"
- onClick={[Function]}
- role="button"
+ <button
+ class="MuiButtonBase-root MuiButton-root btnText showMore MuiButton-text"
+ tabindex="0"
+ type="button"
>
- ecogesture_modal.show_more
- </div>
- <WithStyles(ForwardRef(Collapse))
- exit={false}
- in={false}
+ <span
+ class="MuiButton-label text-15-normal"
+ >
+ ecogesture_modal.show_more
+ </span>
+ <span
+ class="MuiTouchRipple-root"
+ />
+ </button>
+ <div
+ class="MuiCollapse-root MuiCollapse-hidden"
+ style="min-height: 0px;"
>
- <ForwardRef(Collapse)
- classes={
- Object {
- "entered": "MuiCollapse-entered",
- "hidden": "MuiCollapse-hidden",
- "root": "MuiCollapse-root",
- "wrapper": "MuiCollapse-wrapper",
- "wrapperInner": "MuiCollapse-wrapperInner",
- }
- }
- exit={false}
- in={false}
+ <div
+ class="MuiCollapse-wrapper"
>
- <Transition
- addEndListener={[Function]}
- appear={false}
- enter={true}
- exit={false}
- in={false}
- mountOnEnter={false}
- onEnter={[Function]}
- onEntered={[Function]}
- onEntering={[Function]}
- onExit={[Function]}
- onExited={[Function]}
- onExiting={[Function]}
- timeout={300}
- unmountOnExit={false}
+ <div
+ class="MuiCollapse-wrapperInner"
>
<div
- className="MuiCollapse-root MuiCollapse-hidden"
- style={
- Object {
- "minHeight": "0px",
- }
- }
+ class="longDescription text-16-normal-150"
>
- <div
- className="MuiCollapse-wrapper"
- >
- <div
- className="MuiCollapse-wrapperInner"
- >
- <div
- className="longDescription text-16-normal-150"
- >
- On se demande parfois si cela vaut le coup de "couper le chauffage" quand on s’absente… dès qu’il s’agit d’un week-end la réponse est « oui sûrement » ! Attention cependant au retour à ne pas faire de la surchauffe ! L’idéal est bien évidemment de régler sa programmation pour que le chauffage se relance quelques heures avant votre retour…
- </div>
- </div>
- </div>
+ On se demande parfois si cela vaut le coup de "couper le chauffage" quand on s’absente… dès qu’il s’agit d’un week-end la réponse est « oui sûrement » ! Attention cependant au retour à ne pas faire de la surchauffe ! L’idéal est bien évidemment de régler sa programmation pour que le chauffage se relance quelques heures avant votre retour…
</div>
- </Transition>
- </ForwardRef(Collapse)>
- </WithStyles(ForwardRef(Collapse))>
+ </div>
+ </div>
+ </div>
</div>
<div
- className="buttons"
+ class="buttons"
>
- <WithStyles(ForwardRef(Button))
+ <button
aria-label="ecogesture_selection.button_objective"
- classes={
- Object {
- "focusVisible": "noFocus",
- "label": "text-14-bold",
- "root": "btn-secondary-negative",
- }
- }
- onClick={[Function]}
+ class="MuiButtonBase-root MuiButton-root btnSecondary MuiButton-text"
+ tabindex="0"
+ type="button"
>
- <ForwardRef(Button)
- aria-label="ecogesture_selection.button_objective"
- classes={
- Object {
- "colorInherit": "MuiButton-colorInherit",
- "contained": "MuiButton-contained",
- "containedPrimary": "MuiButton-containedPrimary",
- "containedSecondary": "MuiButton-containedSecondary",
- "containedSizeLarge": "MuiButton-containedSizeLarge",
- "containedSizeSmall": "MuiButton-containedSizeSmall",
- "disableElevation": "MuiButton-disableElevation",
- "disabled": "Mui-disabled",
- "endIcon": "MuiButton-endIcon",
- "focusVisible": "Mui-focusVisible noFocus",
- "fullWidth": "MuiButton-fullWidth",
- "iconSizeLarge": "MuiButton-iconSizeLarge",
- "iconSizeMedium": "MuiButton-iconSizeMedium",
- "iconSizeSmall": "MuiButton-iconSizeSmall",
- "label": "MuiButton-label text-14-bold",
- "outlined": "MuiButton-outlined",
- "outlinedPrimary": "MuiButton-outlinedPrimary",
- "outlinedSecondary": "MuiButton-outlinedSecondary",
- "outlinedSizeLarge": "MuiButton-outlinedSizeLarge",
- "outlinedSizeSmall": "MuiButton-outlinedSizeSmall",
- "root": "MuiButton-root btn-secondary-negative",
- "sizeLarge": "MuiButton-sizeLarge",
- "sizeSmall": "MuiButton-sizeSmall",
- "startIcon": "MuiButton-startIcon",
- "text": "MuiButton-text",
- "textPrimary": "MuiButton-textPrimary",
- "textSecondary": "MuiButton-textSecondary",
- "textSizeLarge": "MuiButton-textSizeLarge",
- "textSizeSmall": "MuiButton-textSizeSmall",
- }
- }
- onClick={[Function]}
+ <span
+ class="MuiButton-label text-14-bold"
>
- <WithStyles(ForwardRef(ButtonBase))
- aria-label="ecogesture_selection.button_objective"
- className="MuiButton-root btn-secondary-negative MuiButton-text"
- component="button"
- disabled={false}
- focusRipple={true}
- focusVisibleClassName="Mui-focusVisible noFocus"
- onClick={[Function]}
- type="button"
+ <svg
+ aria-hidden="true"
+ class="styles__icon___23x3R"
+ height="60"
+ width="60"
>
- <ForwardRef(ButtonBase)
- aria-label="ecogesture_selection.button_objective"
- className="MuiButton-root btn-secondary-negative MuiButton-text"
- classes={
- Object {
- "disabled": "Mui-disabled",
- "focusVisible": "Mui-focusVisible",
- "root": "MuiButtonBase-root",
- }
- }
- component="button"
- disabled={false}
- focusRipple={true}
- focusVisibleClassName="Mui-focusVisible noFocus"
- onClick={[Function]}
- type="button"
- >
- <button
- aria-label="ecogesture_selection.button_objective"
- className="MuiButtonBase-root MuiButton-root btn-secondary-negative MuiButton-text"
- disabled={false}
- onBlur={[Function]}
- onClick={[Function]}
- onDragLeave={[Function]}
- onFocus={[Function]}
- onKeyDown={[Function]}
- onKeyUp={[Function]}
- onMouseDown={[Function]}
- onMouseLeave={[Function]}
- onMouseUp={[Function]}
- onTouchEnd={[Function]}
- onTouchMove={[Function]}
- onTouchStart={[Function]}
- tabIndex={0}
- type="button"
- >
- <span
- className="MuiButton-label text-14-bold"
- >
- <StyledIcon
- icon="test-file-stub"
- size={60}
- >
- <Icon
- aria-hidden={true}
- icon="test-file-stub"
- size={60}
- spin={false}
- >
- <Component
- aria-hidden={true}
- className="styles__icon___23x3R"
- height={60}
- style={Object {}}
- width={60}
- >
- <svg
- aria-hidden={true}
- className="styles__icon___23x3R"
- height={60}
- style={Object {}}
- width={60}
- >
- <use
- xlinkHref="#test-file-stub"
- />
- </svg>
- </Component>
- </Icon>
- </StyledIcon>
- ecogesture_selection.button_objective
- </span>
- <WithStyles(memo)
- center={false}
- >
- <ForwardRef(TouchRipple)
- center={false}
- classes={
- Object {
- "child": "MuiTouchRipple-child",
- "childLeaving": "MuiTouchRipple-childLeaving",
- "childPulsate": "MuiTouchRipple-childPulsate",
- "ripple": "MuiTouchRipple-ripple",
- "ripplePulsate": "MuiTouchRipple-ripplePulsate",
- "rippleVisible": "MuiTouchRipple-rippleVisible",
- "root": "MuiTouchRipple-root",
- }
- }
- >
- <span
- className="MuiTouchRipple-root"
- >
- <TransitionGroup
- childFactory={[Function]}
- component={null}
- exit={true}
- />
- </span>
- </ForwardRef(TouchRipple)>
- </WithStyles(memo)>
- </button>
- </ForwardRef(ButtonBase)>
- </WithStyles(ForwardRef(ButtonBase))>
- </ForwardRef(Button)>
- </WithStyles(ForwardRef(Button))>
- <WithStyles(ForwardRef(Button))
+ <use
+ xlink:href="#test-file-stub"
+ />
+ </svg>
+ ecogesture_selection.button_objective
+ </span>
+ <span
+ class="MuiTouchRipple-root"
+ />
+ </button>
+ <button
aria-label="ecogesture_selection.button_doing"
- classes={
- Object {
- "focusVisible": "noFocus",
- "label": "text-14-bold",
- "root": "btn-secondary-negative",
- }
- }
- onClick={[Function]}
+ class="MuiButtonBase-root MuiButton-root btnSecondary MuiButton-text"
+ tabindex="0"
+ type="button"
>
- <ForwardRef(Button)
- aria-label="ecogesture_selection.button_doing"
- classes={
- Object {
- "colorInherit": "MuiButton-colorInherit",
- "contained": "MuiButton-contained",
- "containedPrimary": "MuiButton-containedPrimary",
- "containedSecondary": "MuiButton-containedSecondary",
- "containedSizeLarge": "MuiButton-containedSizeLarge",
- "containedSizeSmall": "MuiButton-containedSizeSmall",
- "disableElevation": "MuiButton-disableElevation",
- "disabled": "Mui-disabled",
- "endIcon": "MuiButton-endIcon",
- "focusVisible": "Mui-focusVisible noFocus",
- "fullWidth": "MuiButton-fullWidth",
- "iconSizeLarge": "MuiButton-iconSizeLarge",
- "iconSizeMedium": "MuiButton-iconSizeMedium",
- "iconSizeSmall": "MuiButton-iconSizeSmall",
- "label": "MuiButton-label text-14-bold",
- "outlined": "MuiButton-outlined",
- "outlinedPrimary": "MuiButton-outlinedPrimary",
- "outlinedSecondary": "MuiButton-outlinedSecondary",
- "outlinedSizeLarge": "MuiButton-outlinedSizeLarge",
- "outlinedSizeSmall": "MuiButton-outlinedSizeSmall",
- "root": "MuiButton-root btn-secondary-negative",
- "sizeLarge": "MuiButton-sizeLarge",
- "sizeSmall": "MuiButton-sizeSmall",
- "startIcon": "MuiButton-startIcon",
- "text": "MuiButton-text",
- "textPrimary": "MuiButton-textPrimary",
- "textSecondary": "MuiButton-textSecondary",
- "textSizeLarge": "MuiButton-textSizeLarge",
- "textSizeSmall": "MuiButton-textSizeSmall",
- }
- }
- onClick={[Function]}
+ <span
+ class="MuiButton-label text-14-bold"
>
- <WithStyles(ForwardRef(ButtonBase))
- aria-label="ecogesture_selection.button_doing"
- className="MuiButton-root btn-secondary-negative MuiButton-text"
- component="button"
- disabled={false}
- focusRipple={true}
- focusVisibleClassName="Mui-focusVisible noFocus"
- onClick={[Function]}
- type="button"
+ <svg
+ aria-hidden="true"
+ class="styles__icon___23x3R"
+ height="60"
+ width="60"
>
- <ForwardRef(ButtonBase)
- aria-label="ecogesture_selection.button_doing"
- className="MuiButton-root btn-secondary-negative MuiButton-text"
- classes={
- Object {
- "disabled": "Mui-disabled",
- "focusVisible": "Mui-focusVisible",
- "root": "MuiButtonBase-root",
- }
- }
- component="button"
- disabled={false}
- focusRipple={true}
- focusVisibleClassName="Mui-focusVisible noFocus"
- onClick={[Function]}
- type="button"
- >
- <button
- aria-label="ecogesture_selection.button_doing"
- className="MuiButtonBase-root MuiButton-root btn-secondary-negative MuiButton-text"
- disabled={false}
- onBlur={[Function]}
- onClick={[Function]}
- onDragLeave={[Function]}
- onFocus={[Function]}
- onKeyDown={[Function]}
- onKeyUp={[Function]}
- onMouseDown={[Function]}
- onMouseLeave={[Function]}
- onMouseUp={[Function]}
- onTouchEnd={[Function]}
- onTouchMove={[Function]}
- onTouchStart={[Function]}
- tabIndex={0}
- type="button"
- >
- <span
- className="MuiButton-label text-14-bold"
- >
- <StyledIcon
- icon="test-file-stub"
- size={60}
- >
- <Icon
- aria-hidden={true}
- icon="test-file-stub"
- size={60}
- spin={false}
- >
- <Component
- aria-hidden={true}
- className="styles__icon___23x3R"
- height={60}
- style={Object {}}
- width={60}
- >
- <svg
- aria-hidden={true}
- className="styles__icon___23x3R"
- height={60}
- style={Object {}}
- width={60}
- >
- <use
- xlinkHref="#test-file-stub"
- />
- </svg>
- </Component>
- </Icon>
- </StyledIcon>
- ecogesture_selection.button_doing
- </span>
- <WithStyles(memo)
- center={false}
- >
- <ForwardRef(TouchRipple)
- center={false}
- classes={
- Object {
- "child": "MuiTouchRipple-child",
- "childLeaving": "MuiTouchRipple-childLeaving",
- "childPulsate": "MuiTouchRipple-childPulsate",
- "ripple": "MuiTouchRipple-ripple",
- "ripplePulsate": "MuiTouchRipple-ripplePulsate",
- "rippleVisible": "MuiTouchRipple-rippleVisible",
- "root": "MuiTouchRipple-root",
- }
- }
- >
- <span
- className="MuiTouchRipple-root"
- >
- <TransitionGroup
- childFactory={[Function]}
- component={null}
- exit={true}
- />
- </span>
- </ForwardRef(TouchRipple)>
- </WithStyles(memo)>
- </button>
- </ForwardRef(ButtonBase)>
- </WithStyles(ForwardRef(ButtonBase))>
- </ForwardRef(Button)>
- </WithStyles(ForwardRef(Button))>
- <WithStyles(ForwardRef(Button))
+ <use
+ xlink:href="#test-file-stub"
+ />
+ </svg>
+ ecogesture_selection.button_doing
+ </span>
+ <span
+ class="MuiTouchRipple-root"
+ />
+ </button>
+ <button
aria-label="ecogesture_selection.button_skip"
- classes={
- Object {
- "focusVisible": "noFocus",
- "label": "text-14-bold",
- "root": "btn-secondary-negative",
- }
- }
- onClick={[Function]}
+ class="MuiButtonBase-root MuiButton-root btnSecondary MuiButton-text"
+ tabindex="0"
+ type="button"
>
- <ForwardRef(Button)
- aria-label="ecogesture_selection.button_skip"
- classes={
- Object {
- "colorInherit": "MuiButton-colorInherit",
- "contained": "MuiButton-contained",
- "containedPrimary": "MuiButton-containedPrimary",
- "containedSecondary": "MuiButton-containedSecondary",
- "containedSizeLarge": "MuiButton-containedSizeLarge",
- "containedSizeSmall": "MuiButton-containedSizeSmall",
- "disableElevation": "MuiButton-disableElevation",
- "disabled": "Mui-disabled",
- "endIcon": "MuiButton-endIcon",
- "focusVisible": "Mui-focusVisible noFocus",
- "fullWidth": "MuiButton-fullWidth",
- "iconSizeLarge": "MuiButton-iconSizeLarge",
- "iconSizeMedium": "MuiButton-iconSizeMedium",
- "iconSizeSmall": "MuiButton-iconSizeSmall",
- "label": "MuiButton-label text-14-bold",
- "outlined": "MuiButton-outlined",
- "outlinedPrimary": "MuiButton-outlinedPrimary",
- "outlinedSecondary": "MuiButton-outlinedSecondary",
- "outlinedSizeLarge": "MuiButton-outlinedSizeLarge",
- "outlinedSizeSmall": "MuiButton-outlinedSizeSmall",
- "root": "MuiButton-root btn-secondary-negative",
- "sizeLarge": "MuiButton-sizeLarge",
- "sizeSmall": "MuiButton-sizeSmall",
- "startIcon": "MuiButton-startIcon",
- "text": "MuiButton-text",
- "textPrimary": "MuiButton-textPrimary",
- "textSecondary": "MuiButton-textSecondary",
- "textSizeLarge": "MuiButton-textSizeLarge",
- "textSizeSmall": "MuiButton-textSizeSmall",
- }
- }
- onClick={[Function]}
+ <span
+ class="MuiButton-label text-14-bold"
>
- <WithStyles(ForwardRef(ButtonBase))
- aria-label="ecogesture_selection.button_skip"
- className="MuiButton-root btn-secondary-negative MuiButton-text"
- component="button"
- disabled={false}
- focusRipple={true}
- focusVisibleClassName="Mui-focusVisible noFocus"
- onClick={[Function]}
- type="button"
+ <svg
+ aria-hidden="true"
+ class="styles__icon___23x3R"
+ height="60"
+ width="60"
>
- <ForwardRef(ButtonBase)
- aria-label="ecogesture_selection.button_skip"
- className="MuiButton-root btn-secondary-negative MuiButton-text"
- classes={
- Object {
- "disabled": "Mui-disabled",
- "focusVisible": "Mui-focusVisible",
- "root": "MuiButtonBase-root",
- }
- }
- component="button"
- disabled={false}
- focusRipple={true}
- focusVisibleClassName="Mui-focusVisible noFocus"
- onClick={[Function]}
- type="button"
- >
- <button
- aria-label="ecogesture_selection.button_skip"
- className="MuiButtonBase-root MuiButton-root btn-secondary-negative MuiButton-text"
- disabled={false}
- onBlur={[Function]}
- onClick={[Function]}
- onDragLeave={[Function]}
- onFocus={[Function]}
- onKeyDown={[Function]}
- onKeyUp={[Function]}
- onMouseDown={[Function]}
- onMouseLeave={[Function]}
- onMouseUp={[Function]}
- onTouchEnd={[Function]}
- onTouchMove={[Function]}
- onTouchStart={[Function]}
- tabIndex={0}
- type="button"
- >
- <span
- className="MuiButton-label text-14-bold"
- >
- <StyledIcon
- icon="test-file-stub"
- size={60}
- >
- <Icon
- aria-hidden={true}
- icon="test-file-stub"
- size={60}
- spin={false}
- >
- <Component
- aria-hidden={true}
- className="styles__icon___23x3R"
- height={60}
- style={Object {}}
- width={60}
- >
- <svg
- aria-hidden={true}
- className="styles__icon___23x3R"
- height={60}
- style={Object {}}
- width={60}
- >
- <use
- xlinkHref="#test-file-stub"
- />
- </svg>
- </Component>
- </Icon>
- </StyledIcon>
- ecogesture_selection.button_skip
- </span>
- <WithStyles(memo)
- center={false}
- >
- <ForwardRef(TouchRipple)
- center={false}
- classes={
- Object {
- "child": "MuiTouchRipple-child",
- "childLeaving": "MuiTouchRipple-childLeaving",
- "childPulsate": "MuiTouchRipple-childPulsate",
- "ripple": "MuiTouchRipple-ripple",
- "ripplePulsate": "MuiTouchRipple-ripplePulsate",
- "rippleVisible": "MuiTouchRipple-rippleVisible",
- "root": "MuiTouchRipple-root",
- }
- }
- >
- <span
- className="MuiTouchRipple-root"
- >
- <TransitionGroup
- childFactory={[Function]}
- component={null}
- exit={true}
- />
- </span>
- </ForwardRef(TouchRipple)>
- </WithStyles(memo)>
- </button>
- </ForwardRef(ButtonBase)>
- </WithStyles(ForwardRef(ButtonBase))>
- </ForwardRef(Button)>
- </WithStyles(ForwardRef(Button))>
+ <use
+ xlink:href="#test-file-stub"
+ />
+ </svg>
+ ecogesture_selection.button_skip
+ </span>
+ <span
+ class="MuiTouchRipple-root"
+ />
+ </button>
</div>
</div>
-</EcogestureSelectionDetail>
+</div>
`;
diff --git a/src/components/EcogestureSelection/EcogestureSelectionDetail/ecogestureSelectionDetail.scss b/src/components/EcogestureSelection/EcogestureSelectionDetail/ecogestureSelectionDetail.scss
index 2bdb65ed0f31fdccb95994385e7831ad0ac782be..62a291ea844fbf09393241af8d7bb196163a8f39 100644
--- a/src/components/EcogestureSelection/EcogestureSelectionDetail/ecogestureSelectionDetail.scss
+++ b/src/components/EcogestureSelection/EcogestureSelectionDetail/ecogestureSelectionDetail.scss
@@ -47,26 +47,14 @@
flex-direction: row;
justify-content: center;
width: 100%;
- button.btn-secondary-negative {
- margin: 0;
+ button.btnSecondary {
padding: 0.75rem 0.25rem;
height: 7.375rem;
- border: 1px solid $grey-bright;
- border-radius: 0.25rem;
- &:focus,
- &.active,
- &:disabled,
- &:hover {
- background: transparent;
- }
+ border-radius: 4px;
span {
flex-direction: column;
- color: $grey-bright;
}
}
- button.noFocus {
- background: transparent;
- }
}
}
diff --git a/src/components/EcogestureSelection/EcogestureSelectionEnd/EcogestureSelectionEnd.spec.tsx b/src/components/EcogestureSelection/EcogestureSelectionEnd/EcogestureSelectionEnd.spec.tsx
index b6359dd88ff4b2d0f1e63d9615ab7c7b94247a6f..bcf32fb5e275cd73f0aa02e926b606770626728b 100644
--- a/src/components/EcogestureSelection/EcogestureSelectionEnd/EcogestureSelectionEnd.spec.tsx
+++ b/src/components/EcogestureSelection/EcogestureSelectionEnd/EcogestureSelectionEnd.spec.tsx
@@ -1,6 +1,5 @@
-import { Button } from '@material-ui/core'
-import { mount } from 'enzyme'
-import toJson from 'enzyme-to-json'
+import { render, screen } from '@testing-library/react'
+import { userEvent } from '@testing-library/user-event'
import React from 'react'
import EcogestureSelectionEnd from './EcogestureSelectionEnd'
@@ -16,13 +15,13 @@ describe('EcogestureSelectionEnd component', () => {
})
it('should be rendered correctly', () => {
- const wrapper = mount(<EcogestureSelectionEnd />)
- expect(toJson(wrapper)).toMatchSnapshot()
+ const { container } = render(<EcogestureSelectionEnd />)
+ expect(container).toMatchSnapshot()
})
- it('should close modal and update profile', () => {
- const wrapper = mount(<EcogestureSelectionEnd />)
- wrapper.find(Button).simulate('click')
+ it('should close modal and update profile', async () => {
+ render(<EcogestureSelectionEnd />)
+ await userEvent.click(screen.getByRole('button'))
expect(mockedNavigate).toHaveBeenCalledWith('/ecogestures?tab=0')
})
})
diff --git a/src/components/EcogestureSelection/EcogestureSelectionEnd/EcogestureSelectionEnd.tsx b/src/components/EcogestureSelection/EcogestureSelectionEnd/EcogestureSelectionEnd.tsx
index 27c356afb667820e493cf7d7857d2169d057857e..4c34e154dc4436f60394c156f4f71b1d8396fbb6 100644
--- a/src/components/EcogestureSelection/EcogestureSelectionEnd/EcogestureSelectionEnd.tsx
+++ b/src/components/EcogestureSelection/EcogestureSelectionEnd/EcogestureSelectionEnd.tsx
@@ -27,10 +27,7 @@ const EcogestureSelectionEnd = () => {
<div className="buttons">
<Button
aria-label={t('ecogesture_selection.accessibility.button_ok')}
- classes={{
- root: 'btn-highlight',
- label: 'text-16-bold',
- }}
+ className="btnPrimary"
onClick={() => navigate('/ecogestures?tab=0')}
>
{t('ecogesture_selection.button_ok')}
diff --git a/src/components/EcogestureSelection/EcogestureSelectionEnd/__snapshots__/EcogestureSelectionEnd.spec.tsx.snap b/src/components/EcogestureSelection/EcogestureSelectionEnd/__snapshots__/EcogestureSelectionEnd.spec.tsx.snap
index 4e0248f1f278b5686a66e12daf41c7bfa28ab2bc..c7fc88998876786bb89e34bad58ddc59bfef458f 100644
--- a/src/components/EcogestureSelection/EcogestureSelectionEnd/__snapshots__/EcogestureSelectionEnd.spec.tsx.snap
+++ b/src/components/EcogestureSelection/EcogestureSelectionEnd/__snapshots__/EcogestureSelectionEnd.spec.tsx.snap
@@ -1,195 +1,58 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`EcogestureSelectionEnd component should be rendered correctly 1`] = `
-<EcogestureSelectionEnd>
+<div>
<div
- className="eg-selection-end-container"
+ class="eg-selection-end-container"
>
<div
- className="content"
+ class="content"
>
<div
- className="title text-28-bold"
+ class="title text-28-bold"
>
ecogesture_selection.title_final
</div>
- <StyledIcon
- icon="test-file-stub"
- size={120}
+ <svg
+ aria-hidden="true"
+ class="styles__icon___23x3R"
+ height="120"
+ width="120"
>
- <Icon
- aria-hidden={true}
- icon="test-file-stub"
- size={120}
- spin={false}
- >
- <Component
- aria-hidden={true}
- className="styles__icon___23x3R"
- height={120}
- style={Object {}}
- width={120}
- >
- <svg
- aria-hidden={true}
- className="styles__icon___23x3R"
- height={120}
- style={Object {}}
- width={120}
- >
- <use
- xlinkHref="#test-file-stub"
- />
- </svg>
- </Component>
- </Icon>
- </StyledIcon>
+ <use
+ xlink:href="#test-file-stub"
+ />
+ </svg>
<div
- className="text text-16-normal"
+ class="text text-16-normal"
>
ecogesture_selection.text_final_1
</div>
<div
- className="text text-16-normal"
+ class="text text-16-normal"
>
ecogesture_selection.text_final_2
</div>
</div>
<div
- className="buttons"
+ class="buttons"
>
- <WithStyles(ForwardRef(Button))
+ <button
aria-label="ecogesture_selection.accessibility.button_ok"
- classes={
- Object {
- "label": "text-16-bold",
- "root": "btn-highlight",
- }
- }
- onClick={[Function]}
+ class="MuiButtonBase-root MuiButton-root MuiButton-text btnPrimary"
+ tabindex="0"
+ type="button"
>
- <ForwardRef(Button)
- aria-label="ecogesture_selection.accessibility.button_ok"
- classes={
- Object {
- "colorInherit": "MuiButton-colorInherit",
- "contained": "MuiButton-contained",
- "containedPrimary": "MuiButton-containedPrimary",
- "containedSecondary": "MuiButton-containedSecondary",
- "containedSizeLarge": "MuiButton-containedSizeLarge",
- "containedSizeSmall": "MuiButton-containedSizeSmall",
- "disableElevation": "MuiButton-disableElevation",
- "disabled": "Mui-disabled",
- "endIcon": "MuiButton-endIcon",
- "focusVisible": "Mui-focusVisible",
- "fullWidth": "MuiButton-fullWidth",
- "iconSizeLarge": "MuiButton-iconSizeLarge",
- "iconSizeMedium": "MuiButton-iconSizeMedium",
- "iconSizeSmall": "MuiButton-iconSizeSmall",
- "label": "MuiButton-label text-16-bold",
- "outlined": "MuiButton-outlined",
- "outlinedPrimary": "MuiButton-outlinedPrimary",
- "outlinedSecondary": "MuiButton-outlinedSecondary",
- "outlinedSizeLarge": "MuiButton-outlinedSizeLarge",
- "outlinedSizeSmall": "MuiButton-outlinedSizeSmall",
- "root": "MuiButton-root btn-highlight",
- "sizeLarge": "MuiButton-sizeLarge",
- "sizeSmall": "MuiButton-sizeSmall",
- "startIcon": "MuiButton-startIcon",
- "text": "MuiButton-text",
- "textPrimary": "MuiButton-textPrimary",
- "textSecondary": "MuiButton-textSecondary",
- "textSizeLarge": "MuiButton-textSizeLarge",
- "textSizeSmall": "MuiButton-textSizeSmall",
- }
- }
- onClick={[Function]}
+ <span
+ class="MuiButton-label"
>
- <WithStyles(ForwardRef(ButtonBase))
- aria-label="ecogesture_selection.accessibility.button_ok"
- className="MuiButton-root btn-highlight MuiButton-text"
- component="button"
- disabled={false}
- focusRipple={true}
- focusVisibleClassName="Mui-focusVisible"
- onClick={[Function]}
- type="button"
- >
- <ForwardRef(ButtonBase)
- aria-label="ecogesture_selection.accessibility.button_ok"
- className="MuiButton-root btn-highlight MuiButton-text"
- classes={
- Object {
- "disabled": "Mui-disabled",
- "focusVisible": "Mui-focusVisible",
- "root": "MuiButtonBase-root",
- }
- }
- component="button"
- disabled={false}
- focusRipple={true}
- focusVisibleClassName="Mui-focusVisible"
- onClick={[Function]}
- type="button"
- >
- <button
- aria-label="ecogesture_selection.accessibility.button_ok"
- className="MuiButtonBase-root MuiButton-root btn-highlight MuiButton-text"
- disabled={false}
- onBlur={[Function]}
- onClick={[Function]}
- onDragLeave={[Function]}
- onFocus={[Function]}
- onKeyDown={[Function]}
- onKeyUp={[Function]}
- onMouseDown={[Function]}
- onMouseLeave={[Function]}
- onMouseUp={[Function]}
- onTouchEnd={[Function]}
- onTouchMove={[Function]}
- onTouchStart={[Function]}
- tabIndex={0}
- type="button"
- >
- <span
- className="MuiButton-label text-16-bold"
- >
- ecogesture_selection.button_ok
- </span>
- <WithStyles(memo)
- center={false}
- >
- <ForwardRef(TouchRipple)
- center={false}
- classes={
- Object {
- "child": "MuiTouchRipple-child",
- "childLeaving": "MuiTouchRipple-childLeaving",
- "childPulsate": "MuiTouchRipple-childPulsate",
- "ripple": "MuiTouchRipple-ripple",
- "ripplePulsate": "MuiTouchRipple-ripplePulsate",
- "rippleVisible": "MuiTouchRipple-rippleVisible",
- "root": "MuiTouchRipple-root",
- }
- }
- >
- <span
- className="MuiTouchRipple-root"
- >
- <TransitionGroup
- childFactory={[Function]}
- component={null}
- exit={true}
- />
- </span>
- </ForwardRef(TouchRipple)>
- </WithStyles(memo)>
- </button>
- </ForwardRef(ButtonBase)>
- </WithStyles(ForwardRef(ButtonBase))>
- </ForwardRef(Button)>
- </WithStyles(ForwardRef(Button))>
+ ecogesture_selection.button_ok
+ </span>
+ <span
+ class="MuiTouchRipple-root"
+ />
+ </button>
</div>
</div>
-</EcogestureSelectionEnd>
+</div>
`;
diff --git a/src/components/EcogestureSelection/EcogestureSelectionEnd/ecogestureSelectionEnd.scss b/src/components/EcogestureSelection/EcogestureSelectionEnd/ecogestureSelectionEnd.scss
index 8a3cd1a42d0c3c4c44e66ca6ebc894e191e994dc..1abaaf1c38cac1e7759d60dc419b453c963b1dbe 100644
--- a/src/components/EcogestureSelection/EcogestureSelectionEnd/ecogestureSelectionEnd.scss
+++ b/src/components/EcogestureSelection/EcogestureSelectionEnd/ecogestureSelectionEnd.scss
@@ -37,10 +37,5 @@
flex-direction: row;
justify-content: center;
width: 100%;
- button.btn-highlight {
- padding: 0.75rem 0.5rem;
- margin: 0 0.5rem;
- max-width: 25rem;
- }
}
}
diff --git a/src/components/EcogestureSelection/EcogestureSelectionModal/EcogestureSelectionModal.spec.tsx b/src/components/EcogestureSelection/EcogestureSelectionModal/EcogestureSelectionModal.spec.tsx
index b2f3141ca6eaacce91aa0cd11a60e755297fc0ea..11801f5c9df1a75ea26f7c6354b5bf5a05e43c49 100644
--- a/src/components/EcogestureSelection/EcogestureSelectionModal/EcogestureSelectionModal.spec.tsx
+++ b/src/components/EcogestureSelection/EcogestureSelectionModal/EcogestureSelectionModal.spec.tsx
@@ -1,29 +1,28 @@
-import { Button } from '@material-ui/core'
-import { mount } from 'enzyme'
-import toJson from 'enzyme-to-json'
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
import React from 'react'
import EcogestureSelectionModal from './EcogestureSelectionModal'
const mockHandleClose = jest.fn()
describe('EcogestureInitModal component', () => {
it('should be rendered correctly', () => {
- const wrapper = mount(
+ const { baseElement } = render(
<EcogestureSelectionModal
open={true}
handleCloseClick={mockHandleClose}
/>
)
- expect(toJson(wrapper)).toMatchSnapshot()
+ expect(baseElement).toMatchSnapshot()
})
it('should close modal and update profile', async () => {
- const wrapper = mount(
+ render(
<EcogestureSelectionModal
open={true}
handleCloseClick={mockHandleClose}
/>
)
- wrapper.find(Button).simulate('click')
+ await userEvent.click(screen.getAllByRole('button')[0])
expect(mockHandleClose).toHaveBeenCalledTimes(1)
})
})
diff --git a/src/components/EcogestureSelection/EcogestureSelectionModal/EcogestureSelectionModal.tsx b/src/components/EcogestureSelection/EcogestureSelectionModal/EcogestureSelectionModal.tsx
index f79f26a0263e91874ed4dd1f22d46a357ecd607c..b33c75ebb9b84f275d896bf0fd5cdaa407a47c08 100644
--- a/src/components/EcogestureSelection/EcogestureSelectionModal/EcogestureSelectionModal.tsx
+++ b/src/components/EcogestureSelection/EcogestureSelectionModal/EcogestureSelectionModal.tsx
@@ -47,10 +47,7 @@ const EcogestureSelectionModal = ({
<Button
aria-label={t('ecogesture_selection.selectionModal.button_close')}
onClick={handleCloseClick}
- classes={{
- root: 'btn-highlight',
- label: 'text-16-bold',
- }}
+ className="btnPrimary"
>
{t('ecogesture_selection.selectionModal.button_close')}
</Button>
diff --git a/src/components/EcogestureSelection/EcogestureSelectionModal/__snapshots__/EcogestureSelectionModal.spec.tsx.snap b/src/components/EcogestureSelection/EcogestureSelectionModal/__snapshots__/EcogestureSelectionModal.spec.tsx.snap
index aeaea3ddbcfd3f8f52b21262f05266c9d5fc18a4..e51d81a0ecf1718cd6adf3bb6b96b7305fde85aa 100644
--- a/src/components/EcogestureSelection/EcogestureSelectionModal/__snapshots__/EcogestureSelectionModal.spec.tsx.snap
+++ b/src/components/EcogestureSelection/EcogestureSelectionModal/__snapshots__/EcogestureSelectionModal.spec.tsx.snap
@@ -1,963 +1,100 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`EcogestureInitModal component should be rendered correctly 1`] = `
-<EcogestureSelectionModal
- handleCloseClick={[MockFunction]}
- open={true}
+<body
+ style="padding-right: 0px; overflow: hidden;"
>
- <WithStyles(ForwardRef(Dialog))
- aria-labelledby="accessibility-title"
- classes={
- Object {
- "paper": "modal-paper",
- "root": "modal-root",
- }
- }
- onClose={[MockFunction]}
- open={true}
+ <div
+ aria-hidden="true"
+ />
+ <div
+ class="MuiDialog-root modal-root"
+ role="presentation"
+ style="position: fixed; z-index: 1300; right: 0px; bottom: 0px; top: 0px; left: 0px;"
>
- <ForwardRef(Dialog)
- aria-labelledby="accessibility-title"
- classes={
- Object {
- "container": "MuiDialog-container",
- "paper": "MuiDialog-paper modal-paper",
- "paperFullScreen": "MuiDialog-paperFullScreen",
- "paperFullWidth": "MuiDialog-paperFullWidth",
- "paperScrollBody": "MuiDialog-paperScrollBody",
- "paperScrollPaper": "MuiDialog-paperScrollPaper",
- "paperWidthFalse": "MuiDialog-paperWidthFalse",
- "paperWidthLg": "MuiDialog-paperWidthLg",
- "paperWidthMd": "MuiDialog-paperWidthMd",
- "paperWidthSm": "MuiDialog-paperWidthSm",
- "paperWidthXl": "MuiDialog-paperWidthXl",
- "paperWidthXs": "MuiDialog-paperWidthXs",
- "root": "MuiDialog-root modal-root",
- "scrollBody": "MuiDialog-scrollBody",
- "scrollPaper": "MuiDialog-scrollPaper",
- }
- }
- onClose={[MockFunction]}
- open={true}
+ <div
+ aria-hidden="true"
+ class="MuiBackdrop-root"
+ style="opacity: 1; webkit-transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"
+ />
+ <div
+ data-test="sentinelStart"
+ tabindex="0"
+ />
+ <div
+ class="MuiDialog-container MuiDialog-scrollPaper"
+ role="none presentation"
+ style="opacity: 1; webkit-transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"
+ tabindex="-1"
>
- <ForwardRef(Modal)
- BackdropComponent={
- Object {
- "$$typeof": Symbol(react.forward_ref),
- "Naked": Object {
- "$$typeof": Symbol(react.forward_ref),
- "propTypes": Object {
- "children": [Function],
- "className": [Function],
- "classes": [Function],
- "invisible": [Function],
- "open": [Function],
- "transitionDuration": [Function],
- },
- "render": [Function],
- },
- "displayName": "WithStyles(ForwardRef(Backdrop))",
- "options": Object {
- "defaultTheme": Object {
- "breakpoints": Object {
- "between": [Function],
- "down": [Function],
- "keys": Array [
- "xs",
- "sm",
- "md",
- "lg",
- "xl",
- ],
- "only": [Function],
- "up": [Function],
- "values": Object {
- "lg": 1280,
- "md": 960,
- "sm": 600,
- "xl": 1920,
- "xs": 0,
- },
- "width": [Function],
- },
- "direction": "ltr",
- "mixins": Object {
- "gutters": [Function],
- "toolbar": Object {
- "@media (min-width:0px) and (orientation: landscape)": Object {
- "minHeight": 48,
- },
- "@media (min-width:600px)": Object {
- "minHeight": 64,
- },
- "minHeight": 56,
- },
- },
- "overrides": Object {},
- "palette": Object {
- "action": Object {
- "activatedOpacity": 0.12,
- "active": "rgba(0, 0, 0, 0.54)",
- "disabled": "rgba(0, 0, 0, 0.26)",
- "disabledBackground": "rgba(0, 0, 0, 0.12)",
- "disabledOpacity": 0.38,
- "focus": "rgba(0, 0, 0, 0.12)",
- "focusOpacity": 0.12,
- "hover": "rgba(0, 0, 0, 0.04)",
- "hoverOpacity": 0.04,
- "selected": "rgba(0, 0, 0, 0.08)",
- "selectedOpacity": 0.08,
- },
- "augmentColor": [Function],
- "background": Object {
- "default": "#fafafa",
- "paper": "#fff",
- },
- "common": Object {
- "black": "#000",
- "white": "#fff",
- },
- "contrastThreshold": 3,
- "divider": "rgba(0, 0, 0, 0.12)",
- "error": Object {
- "contrastText": "#fff",
- "dark": "#d32f2f",
- "light": "#e57373",
- "main": "#f44336",
- },
- "getContrastText": [Function],
- "grey": Object {
- "100": "#f5f5f5",
- "200": "#eeeeee",
- "300": "#e0e0e0",
- "400": "#bdbdbd",
- "50": "#fafafa",
- "500": "#9e9e9e",
- "600": "#757575",
- "700": "#616161",
- "800": "#424242",
- "900": "#212121",
- "A100": "#d5d5d5",
- "A200": "#aaaaaa",
- "A400": "#303030",
- "A700": "#616161",
- },
- "info": Object {
- "contrastText": "#fff",
- "dark": "#1976d2",
- "light": "#64b5f6",
- "main": "#2196f3",
- },
- "primary": Object {
- "contrastText": "#fff",
- "dark": "#303f9f",
- "light": "#7986cb",
- "main": "#3f51b5",
- },
- "secondary": Object {
- "contrastText": "#fff",
- "dark": "#c51162",
- "light": "#ff4081",
- "main": "#f50057",
- },
- "success": Object {
- "contrastText": "rgba(0, 0, 0, 0.87)",
- "dark": "#388e3c",
- "light": "#81c784",
- "main": "#4caf50",
- },
- "text": Object {
- "disabled": "rgba(0, 0, 0, 0.38)",
- "hint": "rgba(0, 0, 0, 0.38)",
- "primary": "rgba(0, 0, 0, 0.87)",
- "secondary": "rgba(0, 0, 0, 0.54)",
- },
- "tonalOffset": 0.2,
- "type": "light",
- "warning": Object {
- "contrastText": "rgba(0, 0, 0, 0.87)",
- "dark": "#f57c00",
- "light": "#ffb74d",
- "main": "#ff9800",
- },
- },
- "props": Object {},
- "shadows": Array [
- "none",
- "0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12)",
- "0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12)",
- "0px 3px 3px -2px rgba(0,0,0,0.2),0px 3px 4px 0px rgba(0,0,0,0.14),0px 1px 8px 0px rgba(0,0,0,0.12)",
- "0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12)",
- "0px 3px 5px -1px rgba(0,0,0,0.2),0px 5px 8px 0px rgba(0,0,0,0.14),0px 1px 14px 0px rgba(0,0,0,0.12)",
- "0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12)",
- "0px 4px 5px -2px rgba(0,0,0,0.2),0px 7px 10px 1px rgba(0,0,0,0.14),0px 2px 16px 1px rgba(0,0,0,0.12)",
- "0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12)",
- "0px 5px 6px -3px rgba(0,0,0,0.2),0px 9px 12px 1px rgba(0,0,0,0.14),0px 3px 16px 2px rgba(0,0,0,0.12)",
- "0px 6px 6px -3px rgba(0,0,0,0.2),0px 10px 14px 1px rgba(0,0,0,0.14),0px 4px 18px 3px rgba(0,0,0,0.12)",
- "0px 6px 7px -4px rgba(0,0,0,0.2),0px 11px 15px 1px rgba(0,0,0,0.14),0px 4px 20px 3px rgba(0,0,0,0.12)",
- "0px 7px 8px -4px rgba(0,0,0,0.2),0px 12px 17px 2px rgba(0,0,0,0.14),0px 5px 22px 4px rgba(0,0,0,0.12)",
- "0px 7px 8px -4px rgba(0,0,0,0.2),0px 13px 19px 2px rgba(0,0,0,0.14),0px 5px 24px 4px rgba(0,0,0,0.12)",
- "0px 7px 9px -4px rgba(0,0,0,0.2),0px 14px 21px 2px rgba(0,0,0,0.14),0px 5px 26px 4px rgba(0,0,0,0.12)",
- "0px 8px 9px -5px rgba(0,0,0,0.2),0px 15px 22px 2px rgba(0,0,0,0.14),0px 6px 28px 5px rgba(0,0,0,0.12)",
- "0px 8px 10px -5px rgba(0,0,0,0.2),0px 16px 24px 2px rgba(0,0,0,0.14),0px 6px 30px 5px rgba(0,0,0,0.12)",
- "0px 8px 11px -5px rgba(0,0,0,0.2),0px 17px 26px 2px rgba(0,0,0,0.14),0px 6px 32px 5px rgba(0,0,0,0.12)",
- "0px 9px 11px -5px rgba(0,0,0,0.2),0px 18px 28px 2px rgba(0,0,0,0.14),0px 7px 34px 6px rgba(0,0,0,0.12)",
- "0px 9px 12px -6px rgba(0,0,0,0.2),0px 19px 29px 2px rgba(0,0,0,0.14),0px 7px 36px 6px rgba(0,0,0,0.12)",
- "0px 10px 13px -6px rgba(0,0,0,0.2),0px 20px 31px 3px rgba(0,0,0,0.14),0px 8px 38px 7px rgba(0,0,0,0.12)",
- "0px 10px 13px -6px rgba(0,0,0,0.2),0px 21px 33px 3px rgba(0,0,0,0.14),0px 8px 40px 7px rgba(0,0,0,0.12)",
- "0px 10px 14px -6px rgba(0,0,0,0.2),0px 22px 35px 3px rgba(0,0,0,0.14),0px 8px 42px 7px rgba(0,0,0,0.12)",
- "0px 11px 14px -7px rgba(0,0,0,0.2),0px 23px 36px 3px rgba(0,0,0,0.14),0px 9px 44px 8px rgba(0,0,0,0.12)",
- "0px 11px 15px -7px rgba(0,0,0,0.2),0px 24px 38px 3px rgba(0,0,0,0.14),0px 9px 46px 8px rgba(0,0,0,0.12)",
- ],
- "shape": Object {
- "borderRadius": 4,
- },
- "spacing": [Function],
- "transitions": Object {
- "create": [Function],
- "duration": Object {
- "complex": 375,
- "enteringScreen": 225,
- "leavingScreen": 195,
- "short": 250,
- "shorter": 200,
- "shortest": 150,
- "standard": 300,
- },
- "easing": Object {
- "easeIn": "cubic-bezier(0.4, 0, 1, 1)",
- "easeInOut": "cubic-bezier(0.4, 0, 0.2, 1)",
- "easeOut": "cubic-bezier(0.0, 0, 0.2, 1)",
- "sharp": "cubic-bezier(0.4, 0, 0.6, 1)",
- },
- "getAutoHeightDuration": [Function],
- },
- "typography": Object {
- "body1": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "1rem",
- "fontWeight": 400,
- "letterSpacing": "0.00938em",
- "lineHeight": 1.5,
- },
- "body2": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "0.875rem",
- "fontWeight": 400,
- "letterSpacing": "0.01071em",
- "lineHeight": 1.43,
- },
- "button": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "0.875rem",
- "fontWeight": 500,
- "letterSpacing": "0.02857em",
- "lineHeight": 1.75,
- "textTransform": "uppercase",
- },
- "caption": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "0.75rem",
- "fontWeight": 400,
- "letterSpacing": "0.03333em",
- "lineHeight": 1.66,
- },
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": 14,
- "fontWeightBold": 700,
- "fontWeightLight": 300,
- "fontWeightMedium": 500,
- "fontWeightRegular": 400,
- "h1": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "6rem",
- "fontWeight": 300,
- "letterSpacing": "-0.01562em",
- "lineHeight": 1.167,
- },
- "h2": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "3.75rem",
- "fontWeight": 300,
- "letterSpacing": "-0.00833em",
- "lineHeight": 1.2,
- },
- "h3": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "3rem",
- "fontWeight": 400,
- "letterSpacing": "0em",
- "lineHeight": 1.167,
- },
- "h4": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "2.125rem",
- "fontWeight": 400,
- "letterSpacing": "0.00735em",
- "lineHeight": 1.235,
- },
- "h5": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "1.5rem",
- "fontWeight": 400,
- "letterSpacing": "0em",
- "lineHeight": 1.334,
- },
- "h6": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "1.25rem",
- "fontWeight": 500,
- "letterSpacing": "0.0075em",
- "lineHeight": 1.6,
- },
- "htmlFontSize": 16,
- "overline": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "0.75rem",
- "fontWeight": 400,
- "letterSpacing": "0.08333em",
- "lineHeight": 2.66,
- "textTransform": "uppercase",
- },
- "pxToRem": [Function],
- "round": [Function],
- "subtitle1": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "1rem",
- "fontWeight": 400,
- "letterSpacing": "0.00938em",
- "lineHeight": 1.75,
- },
- "subtitle2": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "0.875rem",
- "fontWeight": 500,
- "letterSpacing": "0.00714em",
- "lineHeight": 1.57,
- },
- },
- "zIndex": Object {
- "appBar": 1100,
- "drawer": 1200,
- "mobileStepper": 1000,
- "modal": 1300,
- "snackbar": 1400,
- "speedDial": 1050,
- "tooltip": 1500,
- },
- },
- "name": "MuiBackdrop",
- },
- "propTypes": Object {
- "classes": [Function],
- "innerRef": [Function],
- },
- "render": [Function],
- "useStyles": [Function],
- }
- }
- BackdropProps={
- Object {
- "transitionDuration": Object {
- "enter": 225,
- "exit": 195,
- },
- }
- }
- className="MuiDialog-root modal-root"
- closeAfterTransition={true}
- disableEscapeKeyDown={false}
- onClose={[MockFunction]}
- open={true}
+ <div
+ aria-labelledby="accessibility-title"
+ class="MuiPaper-root MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm MuiPaper-elevation24 MuiPaper-rounded"
+ role="dialog"
>
- <ForwardRef(Portal)
- disablePortal={false}
+ <div
+ id="accessibility-title"
>
- <Portal
- containerInfo={
- <body
- style="padding-right: 0px; overflow: hidden;"
- >
- <div
- class="MuiDialog-root modal-root"
- role="presentation"
- style="position: fixed; z-index: 1300; right: 0px; bottom: 0px; top: 0px; left: 0px;"
- >
- <div
- aria-hidden="true"
- class="MuiBackdrop-root"
- style="opacity: 1; webkit-transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"
- />
- <div
- data-test="sentinelStart"
- tabindex="0"
- />
- <div
- class="MuiDialog-container MuiDialog-scrollPaper"
- role="none presentation"
- style="opacity: 1; webkit-transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"
- tabindex="-1"
- >
- <div
- aria-labelledby="accessibility-title"
- class="MuiPaper-root MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm MuiPaper-elevation24 MuiPaper-rounded"
- role="dialog"
- >
- <div
- id="accessibility-title"
- >
- ecogesture_selection.accessibility.window_title
- </div>
- <button
- aria-label="ecogesture_selection.accessibility.button_close"
- class="MuiButtonBase-root MuiIconButton-root modal-paper-close-button"
- tabindex="0"
- type="button"
- >
- <span
- class="MuiIconButton-label"
- >
- <svg
- class="styles__icon___23x3R"
- height="16"
- width="16"
- >
- <use
- xlink:href="#test-file-stub"
- />
- </svg>
- </span>
- <span
- class="MuiTouchRipple-root"
- />
- </button>
- <div
- class="eg-selection-modal"
- >
- <div
- class="title text-20-bold"
- >
- ecogesture_selection.selectionModal.title
- </div>
- <div
- class="text text-16-normal"
- >
- ecogesture_selection.selectionModal.text
- </div>
- <button
- aria-label="ecogesture_selection.selectionModal.button_close"
- class="MuiButtonBase-root MuiButton-root btn-highlight MuiButton-text"
- tabindex="0"
- type="button"
- >
- <span
- class="MuiButton-label text-16-bold"
- >
- ecogesture_selection.selectionModal.button_close
- </span>
- <span
- class="MuiTouchRipple-root"
- />
- </button>
- </div>
- </div>
- </div>
- <div
- data-test="sentinelEnd"
- tabindex="0"
- />
- </div>
- </body>
- }
+ ecogesture_selection.accessibility.window_title
+ </div>
+ <button
+ aria-label="ecogesture_selection.accessibility.button_close"
+ class="MuiButtonBase-root MuiIconButton-root modal-paper-close-button"
+ tabindex="0"
+ type="button"
+ >
+ <span
+ class="MuiIconButton-label"
+ >
+ <svg
+ class="styles__icon___23x3R"
+ height="16"
+ width="16"
+ >
+ <use
+ xlink:href="#test-file-stub"
+ />
+ </svg>
+ </span>
+ <span
+ class="MuiTouchRipple-root"
+ />
+ </button>
+ <div
+ class="eg-selection-modal"
+ >
+ <div
+ class="title text-20-bold"
+ >
+ ecogesture_selection.selectionModal.title
+ </div>
+ <div
+ class="text text-16-normal"
+ >
+ ecogesture_selection.selectionModal.text
+ </div>
+ <button
+ aria-label="ecogesture_selection.selectionModal.button_close"
+ class="MuiButtonBase-root MuiButton-root MuiButton-text btnPrimary"
+ tabindex="0"
+ type="button"
>
- <div
- className="MuiDialog-root modal-root"
- onKeyDown={[Function]}
- role="presentation"
- style={
- Object {
- "bottom": 0,
- "left": 0,
- "position": "fixed",
- "right": 0,
- "top": 0,
- "zIndex": 1300,
- }
- }
+ <span
+ class="MuiButton-label"
>
- <WithStyles(ForwardRef(Backdrop))
- onClick={[Function]}
- open={true}
- transitionDuration={
- Object {
- "enter": 225,
- "exit": 195,
- }
- }
- >
- <ForwardRef(Backdrop)
- classes={
- Object {
- "invisible": "MuiBackdrop-invisible",
- "root": "MuiBackdrop-root",
- }
- }
- onClick={[Function]}
- open={true}
- transitionDuration={
- Object {
- "enter": 225,
- "exit": 195,
- }
- }
- >
- <ForwardRef(Fade)
- in={true}
- onClick={[Function]}
- timeout={
- Object {
- "enter": 225,
- "exit": 195,
- }
- }
- >
- <Transition
- appear={true}
- enter={true}
- exit={true}
- in={true}
- mountOnEnter={false}
- onClick={[Function]}
- onEnter={[Function]}
- onEntered={[Function]}
- onEntering={[Function]}
- onExit={[Function]}
- onExited={[Function]}
- onExiting={[Function]}
- timeout={
- Object {
- "enter": 225,
- "exit": 195,
- }
- }
- unmountOnExit={false}
- >
- <div
- aria-hidden={true}
- className="MuiBackdrop-root"
- onClick={[Function]}
- style={
- Object {
- "opacity": 1,
- "visibility": undefined,
- }
- }
- />
- </Transition>
- </ForwardRef(Fade)>
- </ForwardRef(Backdrop)>
- </WithStyles(ForwardRef(Backdrop))>
- <Unstable_TrapFocus
- disableAutoFocus={false}
- disableEnforceFocus={false}
- disableRestoreFocus={false}
- getDoc={[Function]}
- isEnabled={[Function]}
- open={true}
- >
- <div
- data-test="sentinelStart"
- tabIndex={0}
- />
- <ForwardRef(Fade)
- appear={true}
- in={true}
- onEnter={[Function]}
- onExited={[Function]}
- role="none presentation"
- tabIndex="-1"
- timeout={
- Object {
- "enter": 225,
- "exit": 195,
- }
- }
- >
- <Transition
- appear={true}
- enter={true}
- exit={true}
- in={true}
- mountOnEnter={false}
- onEnter={[Function]}
- onEntered={[Function]}
- onEntering={[Function]}
- onExit={[Function]}
- onExited={[Function]}
- onExiting={[Function]}
- role="none presentation"
- tabIndex="-1"
- timeout={
- Object {
- "enter": 225,
- "exit": 195,
- }
- }
- unmountOnExit={false}
- >
- <div
- className="MuiDialog-container MuiDialog-scrollPaper"
- onMouseDown={[Function]}
- onMouseUp={[Function]}
- role="none presentation"
- style={
- Object {
- "opacity": 1,
- "visibility": undefined,
- }
- }
- tabIndex="-1"
- >
- <WithStyles(ForwardRef(Paper))
- aria-labelledby="accessibility-title"
- className="MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm"
- elevation={24}
- role="dialog"
- >
- <ForwardRef(Paper)
- aria-labelledby="accessibility-title"
- className="MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm"
- classes={
- Object {
- "elevation0": "MuiPaper-elevation0",
- "elevation1": "MuiPaper-elevation1",
- "elevation10": "MuiPaper-elevation10",
- "elevation11": "MuiPaper-elevation11",
- "elevation12": "MuiPaper-elevation12",
- "elevation13": "MuiPaper-elevation13",
- "elevation14": "MuiPaper-elevation14",
- "elevation15": "MuiPaper-elevation15",
- "elevation16": "MuiPaper-elevation16",
- "elevation17": "MuiPaper-elevation17",
- "elevation18": "MuiPaper-elevation18",
- "elevation19": "MuiPaper-elevation19",
- "elevation2": "MuiPaper-elevation2",
- "elevation20": "MuiPaper-elevation20",
- "elevation21": "MuiPaper-elevation21",
- "elevation22": "MuiPaper-elevation22",
- "elevation23": "MuiPaper-elevation23",
- "elevation24": "MuiPaper-elevation24",
- "elevation3": "MuiPaper-elevation3",
- "elevation4": "MuiPaper-elevation4",
- "elevation5": "MuiPaper-elevation5",
- "elevation6": "MuiPaper-elevation6",
- "elevation7": "MuiPaper-elevation7",
- "elevation8": "MuiPaper-elevation8",
- "elevation9": "MuiPaper-elevation9",
- "outlined": "MuiPaper-outlined",
- "root": "MuiPaper-root",
- "rounded": "MuiPaper-rounded",
- }
- }
- elevation={24}
- role="dialog"
- >
- <div
- aria-labelledby="accessibility-title"
- className="MuiPaper-root MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm MuiPaper-elevation24 MuiPaper-rounded"
- role="dialog"
- >
- <div
- id="accessibility-title"
- >
- ecogesture_selection.accessibility.window_title
- </div>
- <WithStyles(ForwardRef(IconButton))
- aria-label="ecogesture_selection.accessibility.button_close"
- className="modal-paper-close-button"
- onClick={[MockFunction]}
- >
- <ForwardRef(IconButton)
- aria-label="ecogesture_selection.accessibility.button_close"
- className="modal-paper-close-button"
- classes={
- Object {
- "colorInherit": "MuiIconButton-colorInherit",
- "colorPrimary": "MuiIconButton-colorPrimary",
- "colorSecondary": "MuiIconButton-colorSecondary",
- "disabled": "Mui-disabled",
- "edgeEnd": "MuiIconButton-edgeEnd",
- "edgeStart": "MuiIconButton-edgeStart",
- "label": "MuiIconButton-label",
- "root": "MuiIconButton-root",
- "sizeSmall": "MuiIconButton-sizeSmall",
- }
- }
- onClick={[MockFunction]}
- >
- <WithStyles(ForwardRef(ButtonBase))
- aria-label="ecogesture_selection.accessibility.button_close"
- centerRipple={true}
- className="MuiIconButton-root modal-paper-close-button"
- disabled={false}
- focusRipple={true}
- onClick={[MockFunction]}
- >
- <ForwardRef(ButtonBase)
- aria-label="ecogesture_selection.accessibility.button_close"
- centerRipple={true}
- className="MuiIconButton-root modal-paper-close-button"
- classes={
- Object {
- "disabled": "Mui-disabled",
- "focusVisible": "Mui-focusVisible",
- "root": "MuiButtonBase-root",
- }
- }
- disabled={false}
- focusRipple={true}
- onClick={[MockFunction]}
- >
- <button
- aria-label="ecogesture_selection.accessibility.button_close"
- className="MuiButtonBase-root MuiIconButton-root modal-paper-close-button"
- disabled={false}
- onBlur={[Function]}
- onClick={[MockFunction]}
- onDragLeave={[Function]}
- onFocus={[Function]}
- onKeyDown={[Function]}
- onKeyUp={[Function]}
- onMouseDown={[Function]}
- onMouseLeave={[Function]}
- onMouseUp={[Function]}
- onTouchEnd={[Function]}
- onTouchMove={[Function]}
- onTouchStart={[Function]}
- tabIndex={0}
- type="button"
- >
- <span
- className="MuiIconButton-label"
- >
- <Icon
- icon="test-file-stub"
- size={16}
- spin={false}
- >
- <Component
- className="styles__icon___23x3R"
- height={16}
- style={Object {}}
- width={16}
- >
- <svg
- className="styles__icon___23x3R"
- height={16}
- style={Object {}}
- width={16}
- >
- <use
- xlinkHref="#test-file-stub"
- />
- </svg>
- </Component>
- </Icon>
- </span>
- <WithStyles(memo)
- center={true}
- >
- <ForwardRef(TouchRipple)
- center={true}
- classes={
- Object {
- "child": "MuiTouchRipple-child",
- "childLeaving": "MuiTouchRipple-childLeaving",
- "childPulsate": "MuiTouchRipple-childPulsate",
- "ripple": "MuiTouchRipple-ripple",
- "ripplePulsate": "MuiTouchRipple-ripplePulsate",
- "rippleVisible": "MuiTouchRipple-rippleVisible",
- "root": "MuiTouchRipple-root",
- }
- }
- >
- <span
- className="MuiTouchRipple-root"
- >
- <TransitionGroup
- childFactory={[Function]}
- component={null}
- exit={true}
- />
- </span>
- </ForwardRef(TouchRipple)>
- </WithStyles(memo)>
- </button>
- </ForwardRef(ButtonBase)>
- </WithStyles(ForwardRef(ButtonBase))>
- </ForwardRef(IconButton)>
- </WithStyles(ForwardRef(IconButton))>
- <div
- className="eg-selection-modal"
- >
- <div
- className="title text-20-bold"
- >
- ecogesture_selection.selectionModal.title
- </div>
- <div
- className="text text-16-normal"
- >
- ecogesture_selection.selectionModal.text
- </div>
- <WithStyles(ForwardRef(Button))
- aria-label="ecogesture_selection.selectionModal.button_close"
- classes={
- Object {
- "label": "text-16-bold",
- "root": "btn-highlight",
- }
- }
- onClick={[MockFunction]}
- >
- <ForwardRef(Button)
- aria-label="ecogesture_selection.selectionModal.button_close"
- classes={
- Object {
- "colorInherit": "MuiButton-colorInherit",
- "contained": "MuiButton-contained",
- "containedPrimary": "MuiButton-containedPrimary",
- "containedSecondary": "MuiButton-containedSecondary",
- "containedSizeLarge": "MuiButton-containedSizeLarge",
- "containedSizeSmall": "MuiButton-containedSizeSmall",
- "disableElevation": "MuiButton-disableElevation",
- "disabled": "Mui-disabled",
- "endIcon": "MuiButton-endIcon",
- "focusVisible": "Mui-focusVisible",
- "fullWidth": "MuiButton-fullWidth",
- "iconSizeLarge": "MuiButton-iconSizeLarge",
- "iconSizeMedium": "MuiButton-iconSizeMedium",
- "iconSizeSmall": "MuiButton-iconSizeSmall",
- "label": "MuiButton-label text-16-bold",
- "outlined": "MuiButton-outlined",
- "outlinedPrimary": "MuiButton-outlinedPrimary",
- "outlinedSecondary": "MuiButton-outlinedSecondary",
- "outlinedSizeLarge": "MuiButton-outlinedSizeLarge",
- "outlinedSizeSmall": "MuiButton-outlinedSizeSmall",
- "root": "MuiButton-root btn-highlight",
- "sizeLarge": "MuiButton-sizeLarge",
- "sizeSmall": "MuiButton-sizeSmall",
- "startIcon": "MuiButton-startIcon",
- "text": "MuiButton-text",
- "textPrimary": "MuiButton-textPrimary",
- "textSecondary": "MuiButton-textSecondary",
- "textSizeLarge": "MuiButton-textSizeLarge",
- "textSizeSmall": "MuiButton-textSizeSmall",
- }
- }
- onClick={[MockFunction]}
- >
- <WithStyles(ForwardRef(ButtonBase))
- aria-label="ecogesture_selection.selectionModal.button_close"
- className="MuiButton-root btn-highlight MuiButton-text"
- component="button"
- disabled={false}
- focusRipple={true}
- focusVisibleClassName="Mui-focusVisible"
- onClick={[MockFunction]}
- type="button"
- >
- <ForwardRef(ButtonBase)
- aria-label="ecogesture_selection.selectionModal.button_close"
- className="MuiButton-root btn-highlight MuiButton-text"
- classes={
- Object {
- "disabled": "Mui-disabled",
- "focusVisible": "Mui-focusVisible",
- "root": "MuiButtonBase-root",
- }
- }
- component="button"
- disabled={false}
- focusRipple={true}
- focusVisibleClassName="Mui-focusVisible"
- onClick={[MockFunction]}
- type="button"
- >
- <button
- aria-label="ecogesture_selection.selectionModal.button_close"
- className="MuiButtonBase-root MuiButton-root btn-highlight MuiButton-text"
- disabled={false}
- onBlur={[Function]}
- onClick={[MockFunction]}
- onDragLeave={[Function]}
- onFocus={[Function]}
- onKeyDown={[Function]}
- onKeyUp={[Function]}
- onMouseDown={[Function]}
- onMouseLeave={[Function]}
- onMouseUp={[Function]}
- onTouchEnd={[Function]}
- onTouchMove={[Function]}
- onTouchStart={[Function]}
- tabIndex={0}
- type="button"
- >
- <span
- className="MuiButton-label text-16-bold"
- >
- ecogesture_selection.selectionModal.button_close
- </span>
- <WithStyles(memo)
- center={false}
- >
- <ForwardRef(TouchRipple)
- center={false}
- classes={
- Object {
- "child": "MuiTouchRipple-child",
- "childLeaving": "MuiTouchRipple-childLeaving",
- "childPulsate": "MuiTouchRipple-childPulsate",
- "ripple": "MuiTouchRipple-ripple",
- "ripplePulsate": "MuiTouchRipple-ripplePulsate",
- "rippleVisible": "MuiTouchRipple-rippleVisible",
- "root": "MuiTouchRipple-root",
- }
- }
- >
- <span
- className="MuiTouchRipple-root"
- >
- <TransitionGroup
- childFactory={[Function]}
- component={null}
- exit={true}
- />
- </span>
- </ForwardRef(TouchRipple)>
- </WithStyles(memo)>
- </button>
- </ForwardRef(ButtonBase)>
- </WithStyles(ForwardRef(ButtonBase))>
- </ForwardRef(Button)>
- </WithStyles(ForwardRef(Button))>
- </div>
- </div>
- </ForwardRef(Paper)>
- </WithStyles(ForwardRef(Paper))>
- </div>
- </Transition>
- </ForwardRef(Fade)>
- <div
- data-test="sentinelEnd"
- tabIndex={0}
- />
- </Unstable_TrapFocus>
- </div>
- </Portal>
- </ForwardRef(Portal)>
- </ForwardRef(Modal)>
- </ForwardRef(Dialog)>
- </WithStyles(ForwardRef(Dialog))>
-</EcogestureSelectionModal>
+ ecogesture_selection.selectionModal.button_close
+ </span>
+ <span
+ class="MuiTouchRipple-root"
+ />
+ </button>
+ </div>
+ </div>
+ </div>
+ <div
+ data-test="sentinelEnd"
+ tabindex="0"
+ />
+ </div>
+</body>
`;
diff --git a/src/components/EcogestureSelection/EcogestureSelectionModal/ecogestureSelectionModal.scss b/src/components/EcogestureSelection/EcogestureSelectionModal/ecogestureSelectionModal.scss
index 9093e9a2497a2e1420a808428b21956843c4d44a..34a934c5b542a77e71a6c6dc87a9e8b0527785b3 100644
--- a/src/components/EcogestureSelection/EcogestureSelectionModal/ecogestureSelectionModal.scss
+++ b/src/components/EcogestureSelection/EcogestureSelectionModal/ecogestureSelectionModal.scss
@@ -13,7 +13,4 @@
.text {
margin: 1rem 0;
}
- button.btn-highlight {
- padding: 0.75rem 0.5rem;
- }
}
diff --git a/src/components/EcogestureSelection/EcogestureSelectionRestart/EcogestureSelectionRestart.spec.tsx b/src/components/EcogestureSelection/EcogestureSelectionRestart/EcogestureSelectionRestart.spec.tsx
index 08bc2048c80cd920cf7ec6c4291944c56f159bd5..0a5e78b1680da49a01b246af2f290c60ba4c1fb1 100644
--- a/src/components/EcogestureSelection/EcogestureSelectionRestart/EcogestureSelectionRestart.spec.tsx
+++ b/src/components/EcogestureSelection/EcogestureSelectionRestart/EcogestureSelectionRestart.spec.tsx
@@ -1,6 +1,5 @@
-import { Button } from '@material-ui/core'
-import { mount } from 'enzyme'
-import toJson from 'enzyme-to-json'
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
import React from 'react'
import EcogestureSelectionRestart from './EcogestureSelectionRestart'
@@ -13,25 +12,21 @@ const mockRestart = jest.fn()
describe('EcogestureSelectionRestart component', () => {
it('should be rendered correctly', () => {
- const wrapper = mount(
+ const { container } = render(
<EcogestureSelectionRestart listLength={10} restart={mockRestart} />
)
- expect(toJson(wrapper)).toMatchSnapshot()
+ expect(container).toMatchSnapshot()
})
- it('should call go to the ecogesture view when user click on the button', () => {
- const wrapper = mount(
- <EcogestureSelectionRestart listLength={10} restart={mockRestart} />
- )
- wrapper.find(Button).at(0).simulate('click')
+ it('should call go to the ecogesture view when user click on the button', async () => {
+ render(<EcogestureSelectionRestart listLength={10} restart={mockRestart} />)
+ await userEvent.click(screen.getAllByRole('button')[0])
expect(mockedNavigate).toHaveBeenCalledWith('/ecogestures?tab=0')
})
- it('should call the restart when user click on the button', () => {
- const wrapper = mount(
- <EcogestureSelectionRestart listLength={10} restart={mockRestart} />
- )
- wrapper.find(Button).at(1).simulate('click')
+ it('should call the restart when user click on the button', async () => {
+ render(<EcogestureSelectionRestart listLength={10} restart={mockRestart} />)
+ await userEvent.click(screen.getAllByRole('button')[1])
expect(mockRestart).toHaveBeenCalledTimes(1)
})
})
diff --git a/src/components/EcogestureSelection/EcogestureSelectionRestart/EcogestureSelectionRestart.tsx b/src/components/EcogestureSelection/EcogestureSelectionRestart/EcogestureSelectionRestart.tsx
index 8482b95431ccfe35c6f2b587264b975c1e542c29..45dbe9188676dce804ff0975923172fa9f159390 100644
--- a/src/components/EcogestureSelection/EcogestureSelectionRestart/EcogestureSelectionRestart.tsx
+++ b/src/components/EcogestureSelection/EcogestureSelectionRestart/EcogestureSelectionRestart.tsx
@@ -36,20 +36,14 @@ const EcogestureSelectionRestart = ({
aria-label={t(
'ecogesture_selection.accessibility.button_go_to_ecogesture'
)}
- classes={{
- root: 'btn-secondary-negative',
- label: 'text-16-normal',
- }}
+ className="btnSecondary"
onClick={() => navigate('/ecogestures?tab=0')}
>
{t('ecogesture_selection.button_go_to_ecogesture')}
</Button>
<Button
aria-label={t('ecogesture_selection.accessibility.button_continue')}
- classes={{
- root: 'btn-highlight',
- label: 'text-16-bold',
- }}
+ className="btnPrimary"
onClick={restart}
>
{t('ecogesture_selection.button_continue')}
diff --git a/src/components/EcogestureSelection/EcogestureSelectionRestart/__snapshots__/EcogestureSelectionRestart.spec.tsx.snap b/src/components/EcogestureSelection/EcogestureSelectionRestart/__snapshots__/EcogestureSelectionRestart.spec.tsx.snap
index 4d8563d6d8af7c5aba8d3260662d5ba318404c94..36c87d8590df0943512b3b35d15da28e1fd36bd3 100644
--- a/src/components/EcogestureSelection/EcogestureSelectionRestart/__snapshots__/EcogestureSelectionRestart.spec.tsx.snap
+++ b/src/components/EcogestureSelection/EcogestureSelectionRestart/__snapshots__/EcogestureSelectionRestart.spec.tsx.snap
@@ -1,324 +1,68 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`EcogestureSelectionRestart component should be rendered correctly 1`] = `
-<EcogestureSelectionRestart
- listLength={10}
- restart={[MockFunction]}
->
+<div>
<div
- className="eg-selection-restart-container"
+ class="eg-selection-restart-container"
>
<div
- className="content"
+ class="content"
>
<div
- className="title text-21-bold"
+ class="title text-21-bold"
>
ecogesture_selection.title
</div>
- <StyledIcon
- icon="test-file-stub"
- size={120}
+ <svg
+ aria-hidden="true"
+ class="styles__icon___23x3R"
+ height="120"
+ width="120"
>
- <Icon
- aria-hidden={true}
- icon="test-file-stub"
- size={120}
- spin={false}
- >
- <Component
- aria-hidden={true}
- className="styles__icon___23x3R"
- height={120}
- style={Object {}}
- width={120}
- >
- <svg
- aria-hidden={true}
- className="styles__icon___23x3R"
- height={120}
- style={Object {}}
- width={120}
- >
- <use
- xlinkHref="#test-file-stub"
- />
- </svg>
- </Component>
- </Icon>
- </StyledIcon>
+ <use
+ xlink:href="#test-file-stub"
+ />
+ </svg>
<div
- className="text text-16-normal"
+ class="text text-16-normal"
>
ecogesture_selection.text
</div>
</div>
<div
- className="buttons"
+ class="buttons"
>
- <WithStyles(ForwardRef(Button))
+ <button
aria-label="ecogesture_selection.accessibility.button_go_to_ecogesture"
- classes={
- Object {
- "label": "text-16-normal",
- "root": "btn-secondary-negative",
- }
- }
- onClick={[Function]}
+ class="MuiButtonBase-root MuiButton-root MuiButton-text btnSecondary"
+ tabindex="0"
+ type="button"
>
- <ForwardRef(Button)
- aria-label="ecogesture_selection.accessibility.button_go_to_ecogesture"
- classes={
- Object {
- "colorInherit": "MuiButton-colorInherit",
- "contained": "MuiButton-contained",
- "containedPrimary": "MuiButton-containedPrimary",
- "containedSecondary": "MuiButton-containedSecondary",
- "containedSizeLarge": "MuiButton-containedSizeLarge",
- "containedSizeSmall": "MuiButton-containedSizeSmall",
- "disableElevation": "MuiButton-disableElevation",
- "disabled": "Mui-disabled",
- "endIcon": "MuiButton-endIcon",
- "focusVisible": "Mui-focusVisible",
- "fullWidth": "MuiButton-fullWidth",
- "iconSizeLarge": "MuiButton-iconSizeLarge",
- "iconSizeMedium": "MuiButton-iconSizeMedium",
- "iconSizeSmall": "MuiButton-iconSizeSmall",
- "label": "MuiButton-label text-16-normal",
- "outlined": "MuiButton-outlined",
- "outlinedPrimary": "MuiButton-outlinedPrimary",
- "outlinedSecondary": "MuiButton-outlinedSecondary",
- "outlinedSizeLarge": "MuiButton-outlinedSizeLarge",
- "outlinedSizeSmall": "MuiButton-outlinedSizeSmall",
- "root": "MuiButton-root btn-secondary-negative",
- "sizeLarge": "MuiButton-sizeLarge",
- "sizeSmall": "MuiButton-sizeSmall",
- "startIcon": "MuiButton-startIcon",
- "text": "MuiButton-text",
- "textPrimary": "MuiButton-textPrimary",
- "textSecondary": "MuiButton-textSecondary",
- "textSizeLarge": "MuiButton-textSizeLarge",
- "textSizeSmall": "MuiButton-textSizeSmall",
- }
- }
- onClick={[Function]}
+ <span
+ class="MuiButton-label"
>
- <WithStyles(ForwardRef(ButtonBase))
- aria-label="ecogesture_selection.accessibility.button_go_to_ecogesture"
- className="MuiButton-root btn-secondary-negative MuiButton-text"
- component="button"
- disabled={false}
- focusRipple={true}
- focusVisibleClassName="Mui-focusVisible"
- onClick={[Function]}
- type="button"
- >
- <ForwardRef(ButtonBase)
- aria-label="ecogesture_selection.accessibility.button_go_to_ecogesture"
- className="MuiButton-root btn-secondary-negative MuiButton-text"
- classes={
- Object {
- "disabled": "Mui-disabled",
- "focusVisible": "Mui-focusVisible",
- "root": "MuiButtonBase-root",
- }
- }
- component="button"
- disabled={false}
- focusRipple={true}
- focusVisibleClassName="Mui-focusVisible"
- onClick={[Function]}
- type="button"
- >
- <button
- aria-label="ecogesture_selection.accessibility.button_go_to_ecogesture"
- className="MuiButtonBase-root MuiButton-root btn-secondary-negative MuiButton-text"
- disabled={false}
- onBlur={[Function]}
- onClick={[Function]}
- onDragLeave={[Function]}
- onFocus={[Function]}
- onKeyDown={[Function]}
- onKeyUp={[Function]}
- onMouseDown={[Function]}
- onMouseLeave={[Function]}
- onMouseUp={[Function]}
- onTouchEnd={[Function]}
- onTouchMove={[Function]}
- onTouchStart={[Function]}
- tabIndex={0}
- type="button"
- >
- <span
- className="MuiButton-label text-16-normal"
- >
- ecogesture_selection.button_go_to_ecogesture
- </span>
- <WithStyles(memo)
- center={false}
- >
- <ForwardRef(TouchRipple)
- center={false}
- classes={
- Object {
- "child": "MuiTouchRipple-child",
- "childLeaving": "MuiTouchRipple-childLeaving",
- "childPulsate": "MuiTouchRipple-childPulsate",
- "ripple": "MuiTouchRipple-ripple",
- "ripplePulsate": "MuiTouchRipple-ripplePulsate",
- "rippleVisible": "MuiTouchRipple-rippleVisible",
- "root": "MuiTouchRipple-root",
- }
- }
- >
- <span
- className="MuiTouchRipple-root"
- >
- <TransitionGroup
- childFactory={[Function]}
- component={null}
- exit={true}
- />
- </span>
- </ForwardRef(TouchRipple)>
- </WithStyles(memo)>
- </button>
- </ForwardRef(ButtonBase)>
- </WithStyles(ForwardRef(ButtonBase))>
- </ForwardRef(Button)>
- </WithStyles(ForwardRef(Button))>
- <WithStyles(ForwardRef(Button))
+ ecogesture_selection.button_go_to_ecogesture
+ </span>
+ <span
+ class="MuiTouchRipple-root"
+ />
+ </button>
+ <button
aria-label="ecogesture_selection.accessibility.button_continue"
- classes={
- Object {
- "label": "text-16-bold",
- "root": "btn-highlight",
- }
- }
- onClick={[MockFunction]}
+ class="MuiButtonBase-root MuiButton-root MuiButton-text btnPrimary"
+ tabindex="0"
+ type="button"
>
- <ForwardRef(Button)
- aria-label="ecogesture_selection.accessibility.button_continue"
- classes={
- Object {
- "colorInherit": "MuiButton-colorInherit",
- "contained": "MuiButton-contained",
- "containedPrimary": "MuiButton-containedPrimary",
- "containedSecondary": "MuiButton-containedSecondary",
- "containedSizeLarge": "MuiButton-containedSizeLarge",
- "containedSizeSmall": "MuiButton-containedSizeSmall",
- "disableElevation": "MuiButton-disableElevation",
- "disabled": "Mui-disabled",
- "endIcon": "MuiButton-endIcon",
- "focusVisible": "Mui-focusVisible",
- "fullWidth": "MuiButton-fullWidth",
- "iconSizeLarge": "MuiButton-iconSizeLarge",
- "iconSizeMedium": "MuiButton-iconSizeMedium",
- "iconSizeSmall": "MuiButton-iconSizeSmall",
- "label": "MuiButton-label text-16-bold",
- "outlined": "MuiButton-outlined",
- "outlinedPrimary": "MuiButton-outlinedPrimary",
- "outlinedSecondary": "MuiButton-outlinedSecondary",
- "outlinedSizeLarge": "MuiButton-outlinedSizeLarge",
- "outlinedSizeSmall": "MuiButton-outlinedSizeSmall",
- "root": "MuiButton-root btn-highlight",
- "sizeLarge": "MuiButton-sizeLarge",
- "sizeSmall": "MuiButton-sizeSmall",
- "startIcon": "MuiButton-startIcon",
- "text": "MuiButton-text",
- "textPrimary": "MuiButton-textPrimary",
- "textSecondary": "MuiButton-textSecondary",
- "textSizeLarge": "MuiButton-textSizeLarge",
- "textSizeSmall": "MuiButton-textSizeSmall",
- }
- }
- onClick={[MockFunction]}
+ <span
+ class="MuiButton-label"
>
- <WithStyles(ForwardRef(ButtonBase))
- aria-label="ecogesture_selection.accessibility.button_continue"
- className="MuiButton-root btn-highlight MuiButton-text"
- component="button"
- disabled={false}
- focusRipple={true}
- focusVisibleClassName="Mui-focusVisible"
- onClick={[MockFunction]}
- type="button"
- >
- <ForwardRef(ButtonBase)
- aria-label="ecogesture_selection.accessibility.button_continue"
- className="MuiButton-root btn-highlight MuiButton-text"
- classes={
- Object {
- "disabled": "Mui-disabled",
- "focusVisible": "Mui-focusVisible",
- "root": "MuiButtonBase-root",
- }
- }
- component="button"
- disabled={false}
- focusRipple={true}
- focusVisibleClassName="Mui-focusVisible"
- onClick={[MockFunction]}
- type="button"
- >
- <button
- aria-label="ecogesture_selection.accessibility.button_continue"
- className="MuiButtonBase-root MuiButton-root btn-highlight MuiButton-text"
- disabled={false}
- onBlur={[Function]}
- onClick={[MockFunction]}
- onDragLeave={[Function]}
- onFocus={[Function]}
- onKeyDown={[Function]}
- onKeyUp={[Function]}
- onMouseDown={[Function]}
- onMouseLeave={[Function]}
- onMouseUp={[Function]}
- onTouchEnd={[Function]}
- onTouchMove={[Function]}
- onTouchStart={[Function]}
- tabIndex={0}
- type="button"
- >
- <span
- className="MuiButton-label text-16-bold"
- >
- ecogesture_selection.button_continue
- </span>
- <WithStyles(memo)
- center={false}
- >
- <ForwardRef(TouchRipple)
- center={false}
- classes={
- Object {
- "child": "MuiTouchRipple-child",
- "childLeaving": "MuiTouchRipple-childLeaving",
- "childPulsate": "MuiTouchRipple-childPulsate",
- "ripple": "MuiTouchRipple-ripple",
- "ripplePulsate": "MuiTouchRipple-ripplePulsate",
- "rippleVisible": "MuiTouchRipple-rippleVisible",
- "root": "MuiTouchRipple-root",
- }
- }
- >
- <span
- className="MuiTouchRipple-root"
- >
- <TransitionGroup
- childFactory={[Function]}
- component={null}
- exit={true}
- />
- </span>
- </ForwardRef(TouchRipple)>
- </WithStyles(memo)>
- </button>
- </ForwardRef(ButtonBase)>
- </WithStyles(ForwardRef(ButtonBase))>
- </ForwardRef(Button)>
- </WithStyles(ForwardRef(Button))>
+ ecogesture_selection.button_continue
+ </span>
+ <span
+ class="MuiTouchRipple-root"
+ />
+ </button>
</div>
</div>
-</EcogestureSelectionRestart>
+</div>
`;
diff --git a/src/components/EcogestureSelection/EcogestureSelectionRestart/ecogestureSelectionRestart.scss b/src/components/EcogestureSelection/EcogestureSelectionRestart/ecogestureSelectionRestart.scss
index a68688b03d27a6335741cc82cddc71c6cb65c4ad..beb26c7fc094d5cf1952dec0c102fe02ff749cc9 100644
--- a/src/components/EcogestureSelection/EcogestureSelectionRestart/ecogestureSelectionRestart.scss
+++ b/src/components/EcogestureSelection/EcogestureSelectionRestart/ecogestureSelectionRestart.scss
@@ -38,14 +38,7 @@
display: flex;
flex-direction: row;
justify-content: space-between;
+ gap: 1rem;
width: 100%;
- button.btn-secondary-negative {
- padding: 0.75rem 0.5rem;
- margin: 0 0.25rem;
- }
- button.btn-highlight {
- padding: 0.75rem 0.5rem;
- margin: 0 0.5rem;
- }
}
}
diff --git a/src/components/EcogestureSelection/EcogestureSelectionView.spec.tsx b/src/components/EcogestureSelection/EcogestureSelectionView.spec.tsx
index 234ba798c846879c520b2fdc1091dcbb1e3ea964..b33791127a3110daff86b6232928dc750dc10066 100644
--- a/src/components/EcogestureSelection/EcogestureSelectionView.spec.tsx
+++ b/src/components/EcogestureSelection/EcogestureSelectionView.spec.tsx
@@ -1,11 +1,8 @@
-/* eslint-disable react/display-name */
-import { mount } from 'enzyme'
-import toJson from 'enzyme-to-json'
+import { render, waitFor } from '@testing-library/react'
import React from 'react'
import { Provider } from 'react-redux'
import { mockedEcogesturesData } from 'tests/__mocks__/ecogesturesData.mock'
import { createMockEcolyoStore } from 'tests/__mocks__/store'
-import { waitForComponentToPaint } from 'tests/__mocks__/testUtils'
import EcogestureSelectionView from './EcogestureSelectionView'
const mockGetEcogestureListByProfile = jest.fn()
@@ -43,42 +40,31 @@ describe('EcogestureSelection component', () => {
it('should be rendered correctly', async () => {
mockGetEcogestureListByProfile.mockResolvedValue([mockedEcogesturesData[0]])
- const wrapper = mount(
+ const { container } = render(
<Provider store={store}>
<EcogestureSelectionView />
</Provider>
)
- await waitForComponentToPaint(wrapper)
- expect(toJson(wrapper)).toMatchSnapshot()
- })
- it('should render with the EcogestureSelectionModal', async () => {
- mockGetEcogestureListByProfile.mockResolvedValue([mockedEcogesturesData[0]])
- const wrapper = mount(
- <Provider store={store}>
- <EcogestureSelectionView />
- </Provider>
- )
- await waitForComponentToPaint(wrapper)
- expect(wrapper.find('mock-ecogestureSelectionModal').exists()).toBeTruthy()
- })
- it('should render with the EcogestureSelectionDetail', async () => {
- mockGetEcogestureListByProfile.mockResolvedValue([mockedEcogesturesData[0]])
- const wrapper = mount(
- <Provider store={store}>
- <EcogestureSelectionView />
- </Provider>
- )
- await waitForComponentToPaint(wrapper)
- expect(wrapper.find('mock-ecogestureSelectionDetail').exists()).toBeTruthy()
+ await waitFor(() => null, { container })
+ expect(container).toMatchSnapshot()
+ expect(
+ container.getElementsByTagName('mock-ecogestureSelectionModal')[0]
+ ).toBeInTheDocument()
+ expect(
+ container.getElementsByTagName('mock-ecogestureSelectionDetail')[0]
+ ).toBeInTheDocument()
})
+
it('should render with the EcogestureSelectionEnd', async () => {
mockGetEcogestureListByProfile.mockResolvedValue([])
- const wrapper = mount(
+ const { container } = render(
<Provider store={store}>
<EcogestureSelectionView />
</Provider>
)
- await waitForComponentToPaint(wrapper)
- expect(wrapper.find('mock-ecogestureSelectionEnd').exists()).toBeTruthy()
+ await waitFor(() => null, { container })
+ expect(
+ container.getElementsByTagName('mock-ecogestureSelectionEnd')[0]
+ ).toBeInTheDocument()
})
})
diff --git a/src/components/EcogestureSelection/__snapshots__/EcogestureSelectionView.spec.tsx.snap b/src/components/EcogestureSelection/__snapshots__/EcogestureSelectionView.spec.tsx.snap
index ed9d0311c8a6b5491e0c668cb785fb5a4c43aafb..d27b25cb74a62bbd1fb43d742645ba4059225031 100644
--- a/src/components/EcogestureSelection/__snapshots__/EcogestureSelectionView.spec.tsx.snap
+++ b/src/components/EcogestureSelection/__snapshots__/EcogestureSelectionView.spec.tsx.snap
@@ -1,80 +1,31 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`EcogestureSelection component should be rendered correctly 1`] = `
-<Provider
- store={
- Object {
- "clearActions": [Function],
- "dispatch": [Function],
- "getActions": [Function],
- "getState": [Function],
- "replaceReducer": [Function],
- "subscribe": [Function],
- }
- }
->
- <EcogestureSelectionView>
- <mock-cozybar
- backFunction={[Function]}
- displayBackArrow={true}
- titleKey="common.title_ecogestures_choice"
- />
- <mock-header
- desktopTitleKey="common.title_ecogestures_choice"
- displayBackArrow={true}
- setHeaderHeight={[Function]}
- >
- <div
- className="eg-selection-header"
- >
- 1/1
- </div>
- </mock-header>
- <mock-content
- heightOffset={0}
+<div>
+ <mock-cozybar
+ displaybackarrow="true"
+ titlekey="common.title_ecogestures_choice"
+ />
+ <mock-header
+ desktoptitlekey="common.title_ecogestures_choice"
+ displaybackarrow="true"
+ >
+ <div
+ class="eg-selection-header"
>
- <mock-ecogestureSelectionDetail
- ecogesture={
- Object {
- "_id": "ECOGESTURE001",
- "_rev": "1-67f1ea36efdd892c96bf64a8943154cd",
- "_type": "com.grandlyon.ecolyo.ecogesture",
- "action": false,
- "actionDuration": 3,
- "actionName": null,
- "difficulty": 1,
- "doing": false,
- "efficiency": 4,
- "equipment": false,
- "equipmentInstallation": true,
- "equipmentType": Array [],
- "fluidTypes": Array [
- 0,
- 2,
- ],
- "id": "ECOGESTURE001",
- "impactLevel": 8,
- "investment": null,
- "longDescription": "On se demande parfois si cela vaut le coup de \\"couper le chauffage\\" quand on s’absente… dès qu’il s’agit d’un week-end la réponse est « oui sûrement » ! Attention cependant au retour à ne pas faire de la surchauffe ! L’idéal est bien évidemment de régler sa programmation pour que le chauffage se relance quelques heures avant votre retour…",
- "longName": "Je baisse le chauffage en mode hors gel lorsque je m'absente plus de 2 jours.",
- "objective": false,
- "room": Array [
- 0,
- ],
- "season": "Hiver",
- "shortName": "Bonhomme de neige",
- "usage": 1,
- "viewedInSelection": false,
- }
- }
- title="Bonhomme de neige"
- validate={[Function]}
- />
- <mock-ecogestureSelectionModal
- handleCloseClick={[Function]}
- open={true}
- />
- </mock-content>
- </EcogestureSelectionView>
-</Provider>
+ 1/1
+ </div>
+ </mock-header>
+ <mock-content
+ heightoffset="0"
+ >
+ <mock-ecogestureselectiondetail
+ ecogesture="[object Object]"
+ title="Bonhomme de neige"
+ />
+ <mock-ecogestureselectionmodal
+ open="true"
+ />
+ </mock-content>
+</div>
`;
diff --git a/src/components/Exploration/ExplorationError.spec.tsx b/src/components/Exploration/ExplorationError.spec.tsx
index 4ea8699db42cada633e20108310d45a64d088909..aad23a7e21b7e57eb2a1091110e117ff53e47b54 100644
--- a/src/components/Exploration/ExplorationError.spec.tsx
+++ b/src/components/Exploration/ExplorationError.spec.tsx
@@ -1,11 +1,10 @@
+import { render } from '@testing-library/react'
import ExplorationError from 'components/Exploration/ExplorationError'
-import { shallow } from 'enzyme'
import React from 'react'
describe('ExplorationError component', () => {
it('should be rendered correctly', () => {
- const component = shallow(<ExplorationError />).getElement
- // TODO fix empty snapshot
- expect(component).toMatchSnapshot()
+ const { container } = render(<ExplorationError />)
+ expect(container).toMatchSnapshot()
})
})
diff --git a/src/components/Exploration/ExplorationError.tsx b/src/components/Exploration/ExplorationError.tsx
index 64702698d0f084c5ca80cc343423d7c7bf800726..4c75d0da78d8f1ffc524c2032fa7e6062e9b4607 100644
--- a/src/components/Exploration/ExplorationError.tsx
+++ b/src/components/Exploration/ExplorationError.tsx
@@ -17,10 +17,7 @@ const ExplorationError = () => {
<Button
aria-label={t('exploration.accessibility.button_go_back')}
onClick={() => navigate(-1)}
- classes={{
- root: 'btn-secondary-negative',
- label: 'text-16-normal',
- }}
+ className="btnSecondary"
>
{t('exploration.button_go_back')}
</Button>
diff --git a/src/components/Exploration/ExplorationFinished.spec.tsx b/src/components/Exploration/ExplorationFinished.spec.tsx
index 50c40cda1ad626c09baf5c2cabc6a8a1ace2c87a..132eae2437c7893488c4f6a1b81d4c0edda1322a 100644
--- a/src/components/Exploration/ExplorationFinished.spec.tsx
+++ b/src/components/Exploration/ExplorationFinished.spec.tsx
@@ -1,33 +1,32 @@
-import Button from '@material-ui/core/Button'
-import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
-import { mount } from 'enzyme'
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
import React from 'react'
import { Provider } from 'react-redux'
import { createMockEcolyoStore } from 'tests/__mocks__/store'
import { userChallengeData } from 'tests/__mocks__/userChallengeData.mock'
import ExplorationFinished from './ExplorationFinished'
+const mockNavigate = jest.fn()
+jest.mock('react-router-dom', () => ({
+ ...jest.requireActual('react-router-dom'),
+ useNavigate: () => mockNavigate,
+}))
+
describe('ExplorationFinished', () => {
const store = createMockEcolyoStore()
- it('should be rendered correctly', () => {
- const wrapper = mount(
- <Provider store={store}>
- <ExplorationFinished userChallenge={userChallengeData[0]} />
- </Provider>
- )
- expect(wrapper.find(StyledIcon).exists()).toBeTruthy()
- expect(wrapper.find('.congratulation').exists()).toBeTruthy()
- expect(wrapper.find('.exploration-earn').exists()).toBeTruthy()
- expect(wrapper.find('.msg-success').text()).toEqual(
- userChallengeData[0].exploration.message_success
- )
- })
- it('should redirect to challenge on click on styledButton', () => {
- const wrapper = mount(
+ it('should be rendered correctly and redirect on click', async () => {
+ const { container } = render(
<Provider store={store}>
<ExplorationFinished userChallenge={userChallengeData[0]} />
</Provider>
)
- wrapper.find(Button).first().simulate('click')
+ expect(screen.getByRole('img')).toBeInTheDocument()
+ expect(container.getElementsByClassName('congratulation')[0]).toBeTruthy()
+ expect(container.getElementsByClassName('exploration-earn')[0]).toBeTruthy()
+ expect(
+ screen.getByText(userChallengeData[0].exploration.message_success)
+ ).toBeInTheDocument()
+ await userEvent.click(screen.getByRole('button'))
+ expect(mockNavigate).toHaveBeenCalledWith(-1)
})
})
diff --git a/src/components/Exploration/ExplorationFinished.tsx b/src/components/Exploration/ExplorationFinished.tsx
index e1251181a9918a1896d979231eacf183339d3594..eb883e7f945416fd0d4f2feeee85bc7c80933392 100644
--- a/src/components/Exploration/ExplorationFinished.tsx
+++ b/src/components/Exploration/ExplorationFinished.tsx
@@ -73,10 +73,7 @@ const ExplorationFinished = ({ userChallenge }: ExplorationFinishedProps) => {
<Button
aria-label={t('exploration.accessibility.button_confirm')}
onClick={goBack}
- classes={{
- root: 'btn-secondary-negative',
- label: 'text-16-normal',
- }}
+ className="btnSecondary"
>
{t('exploration.button_confirm')}
</Button>
diff --git a/src/components/Exploration/ExplorationOngoing.spec.tsx b/src/components/Exploration/ExplorationOngoing.spec.tsx
index fd468838a054e0940ab340371fa5e0856548697f..46b0ee5a1c47624cc038d3af25e6067e887d16c7 100644
--- a/src/components/Exploration/ExplorationOngoing.spec.tsx
+++ b/src/components/Exploration/ExplorationOngoing.spec.tsx
@@ -1,33 +1,33 @@
+import { render, screen } from '@testing-library/react'
import ExplorationOngoing from 'components/Exploration/ExplorationOngoing'
-import { mount } from 'enzyme'
import React from 'react'
import { Provider } from 'react-redux'
import { createMockEcolyoStore } from 'tests/__mocks__/store'
import { userChallengeData } from 'tests/__mocks__/userChallengeData.mock'
-const mockUserChallengeUpdateFlag = jest.fn()
-const mockIsChallengeDone = jest.fn()
jest.mock('services/challenge.service', () => {
return jest.fn(() => ({
- updateUserChallenge: mockUserChallengeUpdateFlag,
- isChallengeDone: mockIsChallengeDone,
+ updateUserChallenge: jest.fn(),
+ isChallengeDone: jest.fn(),
}))
})
describe('ExplorationOngoing component', () => {
it('should be rendered correctly', () => {
const store = createMockEcolyoStore()
- const wrapper = mount(
+ render(
<Provider store={store}>
<ExplorationOngoing userChallenge={userChallengeData[0]} />
</Provider>
)
+
expect(
- wrapper.find('.exploration-explanation > div').first().text()
- ).toEqual(userChallengeData[1].exploration.description)
+ screen.getByText(userChallengeData[1].exploration.description)
+ ).toBeInTheDocument()
expect(
- wrapper.find('.exploration-explanation > div').last().text()
- ).toEqual(userChallengeData[1].exploration.complementary_description)
- expect(wrapper.find('.button-start').exists()).toBeTruthy()
+ screen.getByText(
+ userChallengeData[1].exploration.complementary_description
+ )
+ ).toBeInTheDocument()
})
})
diff --git a/src/components/Exploration/ExplorationOngoing.tsx b/src/components/Exploration/ExplorationOngoing.tsx
index 9e817ec55e630e706c6aa3d69092b2dddc5061d5..380a389a114df1e89b947313fb8fc2db7b1207c5 100644
--- a/src/components/Exploration/ExplorationOngoing.tsx
+++ b/src/components/Exploration/ExplorationOngoing.tsx
@@ -63,20 +63,14 @@ const ExplorationOngoing = ({ userChallenge }: ExplorationOngoingProps) => {
<Button
aria-label={t('exploration.accessibility.button_already_done')}
onClick={validExploration}
- classes={{
- root: 'btn-secondary-negative',
- label: 'text-16-normal',
- }}
+ className="btnSecondary"
>
{t('exploration.button_already_done')}
</Button>
<Button
aria-label={t('exploration.accessibility.button_already_done')}
onClick={() => navigate(-1)}
- classes={{
- root: 'btn-secondary-negative',
- label: 'text-16-normal',
- }}
+ className="btnSecondary"
>
{t('exploration.button_come_back')}
</Button>
@@ -86,18 +80,13 @@ const ExplorationOngoing = ({ userChallenge }: ExplorationOngoingProps) => {
case UserExplorationType.ECOGESTURE:
case UserExplorationType.CONSUMPTION:
return (
- <div className="button-start">
- <Button
- aria-label={t('exploration.accessibility.button_start')}
- onClick={startExploration}
- classes={{
- root: 'btn-secondary-negative',
- label: 'text-16-normal',
- }}
- >
- {t('exploration.button_start')}
- </Button>
- </div>
+ <Button
+ aria-label={t('exploration.accessibility.button_start')}
+ onClick={startExploration}
+ className="btnSecondary"
+ >
+ {t('exploration.button_start')}
+ </Button>
)
}
}
diff --git a/src/components/Exploration/ExplorationView.spec.tsx b/src/components/Exploration/ExplorationView.spec.tsx
index ee403e980aae1b5d781265dc8e19e539e68ac1f6..5c7fbbbd9795949aa63093dddd89fd908d9fe78d 100644
--- a/src/components/Exploration/ExplorationView.spec.tsx
+++ b/src/components/Exploration/ExplorationView.spec.tsx
@@ -1,13 +1,10 @@
+import { render } from '@testing-library/react'
import { UserExplorationState } from 'enums'
-import { mount } from 'enzyme'
import React from 'react'
import { Provider } from 'react-redux'
import { challengeStateData } from 'tests/__mocks__/challengeStateData.mock'
import { createMockEcolyoStore } from 'tests/__mocks__/store'
import { userChallengeData } from 'tests/__mocks__/userChallengeData.mock'
-import ExplorationError from './ExplorationError'
-import ExplorationFinished from './ExplorationFinished'
-import ExplorationOngoing from './ExplorationOngoing'
import ExplorationView from './ExplorationView'
jest.mock('components/Header/CozyBar', () => 'mock-cozybar')
@@ -28,12 +25,14 @@ describe('ExplorationView', () => {
currentChallenge: updatedUserChallenge,
}
const store = createMockEcolyoStore({ challenge: updatedChallengeState })
- const wrapper = mount(
+ const { container } = render(
<Provider store={store}>
<ExplorationView />
</Provider>
)
- expect(wrapper.find(ExplorationError).exists()).toBeTruthy()
+ expect(
+ container.getElementsByClassName('exploration-error-container')[0]
+ ).toBeInTheDocument()
})
it('should be rendered with ExplorationOngoing component when exploration state = unlocked', () => {
@@ -49,12 +48,14 @@ describe('ExplorationView', () => {
currentChallenge: updatedUserChallenge,
}
const store = createMockEcolyoStore({ challenge: updatedChallengeState })
- const wrapper = mount(
+ const { container } = render(
<Provider store={store}>
<ExplorationView />
</Provider>
)
- expect(wrapper.find(ExplorationOngoing).exists()).toBeTruthy()
+ expect(
+ container.getElementsByClassName('exploration-begin-container')[0]
+ ).toBeInTheDocument()
})
it('should be rendered with ExplorationOngoing component when exploration state = ongoing', () => {
@@ -70,12 +71,14 @@ describe('ExplorationView', () => {
currentChallenge: updatedUserChallenge,
}
const store = createMockEcolyoStore({ challenge: updatedChallengeState })
- const wrapper = mount(
+ const { container } = render(
<Provider store={store}>
<ExplorationView />
</Provider>
)
- expect(wrapper.find(ExplorationOngoing).exists()).toBeTruthy()
+ expect(
+ container.getElementsByClassName('exploration-begin-container')[0]
+ ).toBeInTheDocument()
})
it('should be rendered with ExplorationFinished component when exploration state = Done', () => {
@@ -91,11 +94,13 @@ describe('ExplorationView', () => {
currentChallenge: updatedUserChallenge,
}
const store = createMockEcolyoStore({ challenge: updatedChallengeState })
- const wrapper = mount(
+ const { container } = render(
<Provider store={store}>
<ExplorationView />
</Provider>
)
- expect(wrapper.find(ExplorationFinished).exists()).toBeTruthy()
+ expect(
+ container.getElementsByClassName('exploration-finish')[0]
+ ).toBeInTheDocument()
})
})
diff --git a/src/components/Exploration/__snapshots__/ExplorationError.spec.tsx.snap b/src/components/Exploration/__snapshots__/ExplorationError.spec.tsx.snap
index 0a84c75a215fe1573be84f848d393de35ebaa1cd..da3fe125efdcba7f6a4f7072aca15adcf4dc16b4 100644
--- a/src/components/Exploration/__snapshots__/ExplorationError.spec.tsx.snap
+++ b/src/components/Exploration/__snapshots__/ExplorationError.spec.tsx.snap
@@ -1,3 +1,34 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
-exports[`ExplorationError component should be rendered correctly 1`] = `[Function]`;
+exports[`ExplorationError component should be rendered correctly 1`] = `
+<div>
+ <div
+ class="exploration-error-container"
+ >
+ <div
+ class="exploration-error-message"
+ >
+ exploration.global_error
+ </div>
+ <div
+ class="exploration-error-button"
+ >
+ <button
+ aria-label="exploration.accessibility.button_go_back"
+ class="MuiButtonBase-root MuiButton-root MuiButton-text btnSecondary"
+ tabindex="0"
+ type="button"
+ >
+ <span
+ class="MuiButton-label"
+ >
+ exploration.button_go_back
+ </span>
+ <span
+ class="MuiTouchRipple-root"
+ />
+ </button>
+ </div>
+ </div>
+</div>
+`;
diff --git a/src/components/Exploration/explorationFinished.scss b/src/components/Exploration/explorationFinished.scss
index 17fed8e73a2f30b6179471b75a27311b12783e9a..28df8080a88d3e1f89791b32c37f2971cccb5712 100644
--- a/src/components/Exploration/explorationFinished.scss
+++ b/src/components/Exploration/explorationFinished.scss
@@ -29,10 +29,7 @@
width: auto;
}
}
- button.btn-secondary-negative {
- border-color: $grey-bright;
- margin-top: 1rem;
- }
+
.exploration-icon {
margin-left: 0.5rem;
}
@@ -43,4 +40,8 @@
.exploration-earn {
margin: 2rem 0 1rem;
}
+
+ button {
+ margin-top: 1rem;
+ }
}
diff --git a/src/components/Exploration/explorationOngoing.scss b/src/components/Exploration/explorationOngoing.scss
index 69589be0633223c28c43bf9ba002f7af234e1c0c..6bf5a8d51fce698ffaea8753a1cb6531002beb14 100644
--- a/src/components/Exploration/explorationOngoing.scss
+++ b/src/components/Exploration/explorationOngoing.scss
@@ -34,10 +34,7 @@
max-width: 45%;
padding: 0.5rem 1rem 2rem;
}
- .btn-start {
- margin-top: auto;
- border-color: $grey-bright;
- }
+
.exploration-icon-stars {
margin-top: -4rem;
}
@@ -54,13 +51,7 @@
margin-bottom: 1rem;
}
}
- .button-start {
- margin-top: 0;
- width: 100%;
- button.btn-secondary-negative {
- margin: 0;
- }
- }
+
.stars {
margin-top: 1rem;
svg {
diff --git a/src/components/Feedback/FeedbackModal.spec.tsx b/src/components/Feedback/FeedbackModal.spec.tsx
index 8c7520ace692c3c63def7c746685546311306ebd..3efbb966a636928f2319a6ce8d1e9190cf53a5e8 100644
--- a/src/components/Feedback/FeedbackModal.spec.tsx
+++ b/src/components/Feedback/FeedbackModal.spec.tsx
@@ -1,6 +1,6 @@
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
import FeedbackModal from 'components/Feedback/FeedbackModal'
-import { mount } from 'enzyme'
-import toJson from 'enzyme-to-json'
import React from 'react'
import { Provider } from 'react-redux'
import * as storeHooks from 'store/hooks'
@@ -25,44 +25,43 @@ describe('FeedbackModal component', () => {
jest.clearAllMocks()
})
it('should render the component', () => {
- const component = mount(
+ const { baseElement } = render(
<Provider store={store}>
<FeedbackModal />
</Provider>
)
- expect(toJson(component)).toMatchSnapshot()
+ expect(baseElement).toMatchSnapshot()
})
describe('FeedbackModal functionalities', () => {
it('should close modal with the "x" button', async () => {
- const wrapper = mount(
+ render(
<Provider store={store}>
<FeedbackModal />
</Provider>
)
-
- wrapper.find('.modal-paper-close-button').first().simulate('click')
+ await userEvent.click(screen.getAllByRole('button')[0])
expect(mockAppDispatch).toHaveBeenCalledTimes(1)
})
it('should close modal with the "later" button', async () => {
- const wrapper = mount(
+ render(
<Provider store={store}>
<FeedbackModal />
</Provider>
)
- wrapper.find('.btn-secondary-positive').first().simulate('click')
+ await userEvent.click(screen.getAllByRole('button')[1])
expect(mockAppDispatch).toHaveBeenCalledTimes(1)
})
- it('should open the SAU link', () => {
+ it('should open the SAU link', async () => {
global.open = jest.fn()
- const wrapper = mount(
+ render(
<Provider store={store}>
<FeedbackModal />
</Provider>
)
- wrapper.find('.btn-highlight').first().simulate('click')
+ await userEvent.click(screen.getAllByRole('button')[2])
expect(window.open).toHaveBeenCalledTimes(1)
expect(global.open).toHaveBeenCalledWith(`${__SAU_LINK__}?version=0.0.0`)
})
diff --git a/src/components/Feedback/FeedbackModal.tsx b/src/components/Feedback/FeedbackModal.tsx
index 41ce4648465da72e184fa3f3836d57f24a925fb0..c849c35f03e5894b5b33276b2374a18b97b603a9 100644
--- a/src/components/Feedback/FeedbackModal.tsx
+++ b/src/components/Feedback/FeedbackModal.tsx
@@ -61,20 +61,14 @@ const FeedbackModal = () => {
<Button
aria-label={t('feedback.later')}
onClick={closeModal}
- classes={{
- root: 'btn-secondary-positive',
- label: 'text-16-bold',
- }}
+ className="btnSecondary"
>
{t('feedback.later')}
</Button>
<Button
aria-label={t('feedback.lets_go')}
onClick={goToSAU}
- classes={{
- root: 'btn-highlight',
- label: 'text-16-bold',
- }}
+ className="btnPrimary"
>
{t('feedback.lets_go')}
</Button>
diff --git a/src/components/Feedback/__snapshots__/FeedbackModal.spec.tsx.snap b/src/components/Feedback/__snapshots__/FeedbackModal.spec.tsx.snap
index d9288b66bd3795c0b1e3f168684e968353440b6c..9a26cb883362f15852a5aa683b0a4dab56d83bb9 100644
--- a/src/components/Feedback/__snapshots__/FeedbackModal.spec.tsx.snap
+++ b/src/components/Feedback/__snapshots__/FeedbackModal.spec.tsx.snap
@@ -1,1178 +1,134 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`FeedbackModal component should render the component 1`] = `
-<Provider
- store={
- Object {
- "clearActions": [Function],
- "dispatch": [Function],
- "getActions": [Function],
- "getState": [Function],
- "replaceReducer": [Function],
- "subscribe": [Function],
- }
- }
+<body
+ style="padding-right: 0px; overflow: hidden;"
>
- <FeedbackModal>
- <WithStyles(ForwardRef(Dialog))
- aria-labelledby="accessibility-title"
- classes={
- Object {
- "paper": "modal-paper yellow-border",
- "root": "modal-root",
- }
- }
- onClose={[Function]}
- open={true}
+ <div
+ aria-hidden="true"
+ />
+ <div
+ class="MuiDialog-root modal-root"
+ role="presentation"
+ style="position: fixed; z-index: 1300; right: 0px; bottom: 0px; top: 0px; left: 0px;"
+ >
+ <div
+ aria-hidden="true"
+ class="MuiBackdrop-root"
+ style="opacity: 1; webkit-transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"
+ />
+ <div
+ data-test="sentinelStart"
+ tabindex="0"
+ />
+ <div
+ class="MuiDialog-container MuiDialog-scrollPaper"
+ role="none presentation"
+ style="opacity: 1; webkit-transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"
+ tabindex="-1"
>
- <ForwardRef(Dialog)
+ <div
aria-labelledby="accessibility-title"
- classes={
- Object {
- "container": "MuiDialog-container",
- "paper": "MuiDialog-paper modal-paper yellow-border",
- "paperFullScreen": "MuiDialog-paperFullScreen",
- "paperFullWidth": "MuiDialog-paperFullWidth",
- "paperScrollBody": "MuiDialog-paperScrollBody",
- "paperScrollPaper": "MuiDialog-paperScrollPaper",
- "paperWidthFalse": "MuiDialog-paperWidthFalse",
- "paperWidthLg": "MuiDialog-paperWidthLg",
- "paperWidthMd": "MuiDialog-paperWidthMd",
- "paperWidthSm": "MuiDialog-paperWidthSm",
- "paperWidthXl": "MuiDialog-paperWidthXl",
- "paperWidthXs": "MuiDialog-paperWidthXs",
- "root": "MuiDialog-root modal-root",
- "scrollBody": "MuiDialog-scrollBody",
- "scrollPaper": "MuiDialog-scrollPaper",
- }
- }
- onClose={[Function]}
- open={true}
+ class="MuiPaper-root MuiDialog-paper modal-paper yellow-border MuiDialog-paperScrollPaper MuiDialog-paperWidthSm MuiPaper-elevation24 MuiPaper-rounded"
+ role="dialog"
>
- <ForwardRef(Modal)
- BackdropComponent={
- Object {
- "$$typeof": Symbol(react.forward_ref),
- "Naked": Object {
- "$$typeof": Symbol(react.forward_ref),
- "propTypes": Object {
- "children": [Function],
- "className": [Function],
- "classes": [Function],
- "invisible": [Function],
- "open": [Function],
- "transitionDuration": [Function],
- },
- "render": [Function],
- },
- "displayName": "WithStyles(ForwardRef(Backdrop))",
- "options": Object {
- "defaultTheme": Object {
- "breakpoints": Object {
- "between": [Function],
- "down": [Function],
- "keys": Array [
- "xs",
- "sm",
- "md",
- "lg",
- "xl",
- ],
- "only": [Function],
- "up": [Function],
- "values": Object {
- "lg": 1280,
- "md": 960,
- "sm": 600,
- "xl": 1920,
- "xs": 0,
- },
- "width": [Function],
- },
- "direction": "ltr",
- "mixins": Object {
- "gutters": [Function],
- "toolbar": Object {
- "@media (min-width:0px) and (orientation: landscape)": Object {
- "minHeight": 48,
- },
- "@media (min-width:600px)": Object {
- "minHeight": 64,
- },
- "minHeight": 56,
- },
- },
- "overrides": Object {},
- "palette": Object {
- "action": Object {
- "activatedOpacity": 0.12,
- "active": "rgba(0, 0, 0, 0.54)",
- "disabled": "rgba(0, 0, 0, 0.26)",
- "disabledBackground": "rgba(0, 0, 0, 0.12)",
- "disabledOpacity": 0.38,
- "focus": "rgba(0, 0, 0, 0.12)",
- "focusOpacity": 0.12,
- "hover": "rgba(0, 0, 0, 0.04)",
- "hoverOpacity": 0.04,
- "selected": "rgba(0, 0, 0, 0.08)",
- "selectedOpacity": 0.08,
- },
- "augmentColor": [Function],
- "background": Object {
- "default": "#fafafa",
- "paper": "#fff",
- },
- "common": Object {
- "black": "#000",
- "white": "#fff",
- },
- "contrastThreshold": 3,
- "divider": "rgba(0, 0, 0, 0.12)",
- "error": Object {
- "contrastText": "#fff",
- "dark": "#d32f2f",
- "light": "#e57373",
- "main": "#f44336",
- },
- "getContrastText": [Function],
- "grey": Object {
- "100": "#f5f5f5",
- "200": "#eeeeee",
- "300": "#e0e0e0",
- "400": "#bdbdbd",
- "50": "#fafafa",
- "500": "#9e9e9e",
- "600": "#757575",
- "700": "#616161",
- "800": "#424242",
- "900": "#212121",
- "A100": "#d5d5d5",
- "A200": "#aaaaaa",
- "A400": "#303030",
- "A700": "#616161",
- },
- "info": Object {
- "contrastText": "#fff",
- "dark": "#1976d2",
- "light": "#64b5f6",
- "main": "#2196f3",
- },
- "primary": Object {
- "contrastText": "#fff",
- "dark": "#303f9f",
- "light": "#7986cb",
- "main": "#3f51b5",
- },
- "secondary": Object {
- "contrastText": "#fff",
- "dark": "#c51162",
- "light": "#ff4081",
- "main": "#f50057",
- },
- "success": Object {
- "contrastText": "rgba(0, 0, 0, 0.87)",
- "dark": "#388e3c",
- "light": "#81c784",
- "main": "#4caf50",
- },
- "text": Object {
- "disabled": "rgba(0, 0, 0, 0.38)",
- "hint": "rgba(0, 0, 0, 0.38)",
- "primary": "rgba(0, 0, 0, 0.87)",
- "secondary": "rgba(0, 0, 0, 0.54)",
- },
- "tonalOffset": 0.2,
- "type": "light",
- "warning": Object {
- "contrastText": "rgba(0, 0, 0, 0.87)",
- "dark": "#f57c00",
- "light": "#ffb74d",
- "main": "#ff9800",
- },
- },
- "props": Object {},
- "shadows": Array [
- "none",
- "0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12)",
- "0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12)",
- "0px 3px 3px -2px rgba(0,0,0,0.2),0px 3px 4px 0px rgba(0,0,0,0.14),0px 1px 8px 0px rgba(0,0,0,0.12)",
- "0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12)",
- "0px 3px 5px -1px rgba(0,0,0,0.2),0px 5px 8px 0px rgba(0,0,0,0.14),0px 1px 14px 0px rgba(0,0,0,0.12)",
- "0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12)",
- "0px 4px 5px -2px rgba(0,0,0,0.2),0px 7px 10px 1px rgba(0,0,0,0.14),0px 2px 16px 1px rgba(0,0,0,0.12)",
- "0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12)",
- "0px 5px 6px -3px rgba(0,0,0,0.2),0px 9px 12px 1px rgba(0,0,0,0.14),0px 3px 16px 2px rgba(0,0,0,0.12)",
- "0px 6px 6px -3px rgba(0,0,0,0.2),0px 10px 14px 1px rgba(0,0,0,0.14),0px 4px 18px 3px rgba(0,0,0,0.12)",
- "0px 6px 7px -4px rgba(0,0,0,0.2),0px 11px 15px 1px rgba(0,0,0,0.14),0px 4px 20px 3px rgba(0,0,0,0.12)",
- "0px 7px 8px -4px rgba(0,0,0,0.2),0px 12px 17px 2px rgba(0,0,0,0.14),0px 5px 22px 4px rgba(0,0,0,0.12)",
- "0px 7px 8px -4px rgba(0,0,0,0.2),0px 13px 19px 2px rgba(0,0,0,0.14),0px 5px 24px 4px rgba(0,0,0,0.12)",
- "0px 7px 9px -4px rgba(0,0,0,0.2),0px 14px 21px 2px rgba(0,0,0,0.14),0px 5px 26px 4px rgba(0,0,0,0.12)",
- "0px 8px 9px -5px rgba(0,0,0,0.2),0px 15px 22px 2px rgba(0,0,0,0.14),0px 6px 28px 5px rgba(0,0,0,0.12)",
- "0px 8px 10px -5px rgba(0,0,0,0.2),0px 16px 24px 2px rgba(0,0,0,0.14),0px 6px 30px 5px rgba(0,0,0,0.12)",
- "0px 8px 11px -5px rgba(0,0,0,0.2),0px 17px 26px 2px rgba(0,0,0,0.14),0px 6px 32px 5px rgba(0,0,0,0.12)",
- "0px 9px 11px -5px rgba(0,0,0,0.2),0px 18px 28px 2px rgba(0,0,0,0.14),0px 7px 34px 6px rgba(0,0,0,0.12)",
- "0px 9px 12px -6px rgba(0,0,0,0.2),0px 19px 29px 2px rgba(0,0,0,0.14),0px 7px 36px 6px rgba(0,0,0,0.12)",
- "0px 10px 13px -6px rgba(0,0,0,0.2),0px 20px 31px 3px rgba(0,0,0,0.14),0px 8px 38px 7px rgba(0,0,0,0.12)",
- "0px 10px 13px -6px rgba(0,0,0,0.2),0px 21px 33px 3px rgba(0,0,0,0.14),0px 8px 40px 7px rgba(0,0,0,0.12)",
- "0px 10px 14px -6px rgba(0,0,0,0.2),0px 22px 35px 3px rgba(0,0,0,0.14),0px 8px 42px 7px rgba(0,0,0,0.12)",
- "0px 11px 14px -7px rgba(0,0,0,0.2),0px 23px 36px 3px rgba(0,0,0,0.14),0px 9px 44px 8px rgba(0,0,0,0.12)",
- "0px 11px 15px -7px rgba(0,0,0,0.2),0px 24px 38px 3px rgba(0,0,0,0.14),0px 9px 46px 8px rgba(0,0,0,0.12)",
- ],
- "shape": Object {
- "borderRadius": 4,
- },
- "spacing": [Function],
- "transitions": Object {
- "create": [Function],
- "duration": Object {
- "complex": 375,
- "enteringScreen": 225,
- "leavingScreen": 195,
- "short": 250,
- "shorter": 200,
- "shortest": 150,
- "standard": 300,
- },
- "easing": Object {
- "easeIn": "cubic-bezier(0.4, 0, 1, 1)",
- "easeInOut": "cubic-bezier(0.4, 0, 0.2, 1)",
- "easeOut": "cubic-bezier(0.0, 0, 0.2, 1)",
- "sharp": "cubic-bezier(0.4, 0, 0.6, 1)",
- },
- "getAutoHeightDuration": [Function],
- },
- "typography": Object {
- "body1": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "1rem",
- "fontWeight": 400,
- "letterSpacing": "0.00938em",
- "lineHeight": 1.5,
- },
- "body2": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "0.875rem",
- "fontWeight": 400,
- "letterSpacing": "0.01071em",
- "lineHeight": 1.43,
- },
- "button": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "0.875rem",
- "fontWeight": 500,
- "letterSpacing": "0.02857em",
- "lineHeight": 1.75,
- "textTransform": "uppercase",
- },
- "caption": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "0.75rem",
- "fontWeight": 400,
- "letterSpacing": "0.03333em",
- "lineHeight": 1.66,
- },
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": 14,
- "fontWeightBold": 700,
- "fontWeightLight": 300,
- "fontWeightMedium": 500,
- "fontWeightRegular": 400,
- "h1": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "6rem",
- "fontWeight": 300,
- "letterSpacing": "-0.01562em",
- "lineHeight": 1.167,
- },
- "h2": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "3.75rem",
- "fontWeight": 300,
- "letterSpacing": "-0.00833em",
- "lineHeight": 1.2,
- },
- "h3": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "3rem",
- "fontWeight": 400,
- "letterSpacing": "0em",
- "lineHeight": 1.167,
- },
- "h4": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "2.125rem",
- "fontWeight": 400,
- "letterSpacing": "0.00735em",
- "lineHeight": 1.235,
- },
- "h5": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "1.5rem",
- "fontWeight": 400,
- "letterSpacing": "0em",
- "lineHeight": 1.334,
- },
- "h6": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "1.25rem",
- "fontWeight": 500,
- "letterSpacing": "0.0075em",
- "lineHeight": 1.6,
- },
- "htmlFontSize": 16,
- "overline": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "0.75rem",
- "fontWeight": 400,
- "letterSpacing": "0.08333em",
- "lineHeight": 2.66,
- "textTransform": "uppercase",
- },
- "pxToRem": [Function],
- "round": [Function],
- "subtitle1": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "1rem",
- "fontWeight": 400,
- "letterSpacing": "0.00938em",
- "lineHeight": 1.75,
- },
- "subtitle2": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "0.875rem",
- "fontWeight": 500,
- "letterSpacing": "0.00714em",
- "lineHeight": 1.57,
- },
- },
- "zIndex": Object {
- "appBar": 1100,
- "drawer": 1200,
- "mobileStepper": 1000,
- "modal": 1300,
- "snackbar": 1400,
- "speedDial": 1050,
- "tooltip": 1500,
- },
- },
- "name": "MuiBackdrop",
- },
- "propTypes": Object {
- "classes": [Function],
- "innerRef": [Function],
- },
- "render": [Function],
- "useStyles": [Function],
- }
- }
- BackdropProps={
- Object {
- "transitionDuration": Object {
- "enter": 225,
- "exit": 195,
- },
- }
- }
- className="MuiDialog-root modal-root"
- closeAfterTransition={true}
- disableEscapeKeyDown={false}
- onClose={[Function]}
- open={true}
+ <div
+ id="accessibility-title"
>
- <ForwardRef(Portal)
- disablePortal={false}
+ feedback.accessibility.window_title
+ </div>
+ <button
+ aria-label="feedback.accessibility.button_close"
+ class="MuiButtonBase-root MuiIconButton-root modal-paper-close-button"
+ tabindex="0"
+ type="button"
+ >
+ <span
+ class="MuiIconButton-label"
+ >
+ <svg
+ class="styles__icon___23x3R"
+ height="16"
+ width="16"
+ >
+ <use
+ xlink:href="#test-file-stub"
+ />
+ </svg>
+ </span>
+ <span
+ class="MuiTouchRipple-root"
+ />
+ </button>
+ <div
+ class="fb-root"
+ >
+ <svg
+ aria-hidden="true"
+ class="styles__icon___23x3R"
+ height="80"
+ width="80"
+ >
+ <use
+ xlink:href="#test-file-stub"
+ />
+ </svg>
+ <p
+ class="title"
>
- <Portal
- containerInfo={
- <body
- style="padding-right: 0px; overflow: hidden;"
- >
- <div
- class="MuiDialog-root modal-root"
- role="presentation"
- style="position: fixed; z-index: 1300; right: 0px; bottom: 0px; top: 0px; left: 0px;"
- >
- <div
- aria-hidden="true"
- class="MuiBackdrop-root"
- style="opacity: 1; webkit-transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"
- />
- <div
- data-test="sentinelStart"
- tabindex="0"
- />
- <div
- class="MuiDialog-container MuiDialog-scrollPaper"
- role="none presentation"
- style="opacity: 1; webkit-transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"
- tabindex="-1"
- >
- <div
- aria-labelledby="accessibility-title"
- class="MuiPaper-root MuiDialog-paper modal-paper yellow-border MuiDialog-paperScrollPaper MuiDialog-paperWidthSm MuiPaper-elevation24 MuiPaper-rounded"
- role="dialog"
- >
- <div
- id="accessibility-title"
- >
- feedback.accessibility.window_title
- </div>
- <button
- aria-label="feedback.accessibility.button_close"
- class="MuiButtonBase-root MuiIconButton-root modal-paper-close-button"
- tabindex="0"
- type="button"
- >
- <span
- class="MuiIconButton-label"
- >
- <svg
- class="styles__icon___23x3R"
- height="16"
- width="16"
- >
- <use
- xlink:href="#test-file-stub"
- />
- </svg>
- </span>
- <span
- class="MuiTouchRipple-root"
- />
- </button>
- <div
- class="fb-root"
- >
- <svg
- aria-hidden="true"
- class="styles__icon___23x3R"
- height="80"
- width="80"
- >
- <use
- xlink:href="#test-file-stub"
- />
- </svg>
- <p
- class="title"
- >
- feedback.title
- </p>
- <p
- class="text"
- >
- feedback.text1
- </p>
- <p
- class="text"
- >
- feedback.text2
- </p>
- <div
- class="actions"
- >
- <button
- aria-label="feedback.later"
- class="MuiButtonBase-root MuiButton-root btn-secondary-positive MuiButton-text"
- tabindex="0"
- type="button"
- >
- <span
- class="MuiButton-label text-16-bold"
- >
- feedback.later
- </span>
- <span
- class="MuiTouchRipple-root"
- />
- </button>
- <button
- aria-label="feedback.lets_go"
- class="MuiButtonBase-root MuiButton-root btn-highlight MuiButton-text"
- tabindex="0"
- type="button"
- >
- <span
- class="MuiButton-label text-16-bold"
- >
- feedback.lets_go
- </span>
- <span
- class="MuiTouchRipple-root"
- />
- </button>
- </div>
- </div>
- </div>
- </div>
- <div
- data-test="sentinelEnd"
- tabindex="0"
- />
- </div>
- </body>
- }
+ feedback.title
+ </p>
+ <p
+ class="text"
+ >
+ feedback.text1
+ </p>
+ <p
+ class="text"
+ >
+ feedback.text2
+ </p>
+ <div
+ class="actions"
+ >
+ <button
+ aria-label="feedback.later"
+ class="MuiButtonBase-root MuiButton-root MuiButton-text btnSecondary"
+ tabindex="0"
+ type="button"
+ >
+ <span
+ class="MuiButton-label"
+ >
+ feedback.later
+ </span>
+ <span
+ class="MuiTouchRipple-root"
+ />
+ </button>
+ <button
+ aria-label="feedback.lets_go"
+ class="MuiButtonBase-root MuiButton-root MuiButton-text btnPrimary"
+ tabindex="0"
+ type="button"
>
- <div
- className="MuiDialog-root modal-root"
- onKeyDown={[Function]}
- role="presentation"
- style={
- Object {
- "bottom": 0,
- "left": 0,
- "position": "fixed",
- "right": 0,
- "top": 0,
- "zIndex": 1300,
- }
- }
+ <span
+ class="MuiButton-label"
>
- <WithStyles(ForwardRef(Backdrop))
- onClick={[Function]}
- open={true}
- transitionDuration={
- Object {
- "enter": 225,
- "exit": 195,
- }
- }
- >
- <ForwardRef(Backdrop)
- classes={
- Object {
- "invisible": "MuiBackdrop-invisible",
- "root": "MuiBackdrop-root",
- }
- }
- onClick={[Function]}
- open={true}
- transitionDuration={
- Object {
- "enter": 225,
- "exit": 195,
- }
- }
- >
- <ForwardRef(Fade)
- in={true}
- onClick={[Function]}
- timeout={
- Object {
- "enter": 225,
- "exit": 195,
- }
- }
- >
- <Transition
- appear={true}
- enter={true}
- exit={true}
- in={true}
- mountOnEnter={false}
- onClick={[Function]}
- onEnter={[Function]}
- onEntered={[Function]}
- onEntering={[Function]}
- onExit={[Function]}
- onExited={[Function]}
- onExiting={[Function]}
- timeout={
- Object {
- "enter": 225,
- "exit": 195,
- }
- }
- unmountOnExit={false}
- >
- <div
- aria-hidden={true}
- className="MuiBackdrop-root"
- onClick={[Function]}
- style={
- Object {
- "opacity": 1,
- "visibility": undefined,
- }
- }
- />
- </Transition>
- </ForwardRef(Fade)>
- </ForwardRef(Backdrop)>
- </WithStyles(ForwardRef(Backdrop))>
- <Unstable_TrapFocus
- disableAutoFocus={false}
- disableEnforceFocus={false}
- disableRestoreFocus={false}
- getDoc={[Function]}
- isEnabled={[Function]}
- open={true}
- >
- <div
- data-test="sentinelStart"
- tabIndex={0}
- />
- <ForwardRef(Fade)
- appear={true}
- in={true}
- onEnter={[Function]}
- onExited={[Function]}
- role="none presentation"
- tabIndex="-1"
- timeout={
- Object {
- "enter": 225,
- "exit": 195,
- }
- }
- >
- <Transition
- appear={true}
- enter={true}
- exit={true}
- in={true}
- mountOnEnter={false}
- onEnter={[Function]}
- onEntered={[Function]}
- onEntering={[Function]}
- onExit={[Function]}
- onExited={[Function]}
- onExiting={[Function]}
- role="none presentation"
- tabIndex="-1"
- timeout={
- Object {
- "enter": 225,
- "exit": 195,
- }
- }
- unmountOnExit={false}
- >
- <div
- className="MuiDialog-container MuiDialog-scrollPaper"
- onMouseDown={[Function]}
- onMouseUp={[Function]}
- role="none presentation"
- style={
- Object {
- "opacity": 1,
- "visibility": undefined,
- }
- }
- tabIndex="-1"
- >
- <WithStyles(ForwardRef(Paper))
- aria-labelledby="accessibility-title"
- className="MuiDialog-paper modal-paper yellow-border MuiDialog-paperScrollPaper MuiDialog-paperWidthSm"
- elevation={24}
- role="dialog"
- >
- <ForwardRef(Paper)
- aria-labelledby="accessibility-title"
- className="MuiDialog-paper modal-paper yellow-border MuiDialog-paperScrollPaper MuiDialog-paperWidthSm"
- classes={
- Object {
- "elevation0": "MuiPaper-elevation0",
- "elevation1": "MuiPaper-elevation1",
- "elevation10": "MuiPaper-elevation10",
- "elevation11": "MuiPaper-elevation11",
- "elevation12": "MuiPaper-elevation12",
- "elevation13": "MuiPaper-elevation13",
- "elevation14": "MuiPaper-elevation14",
- "elevation15": "MuiPaper-elevation15",
- "elevation16": "MuiPaper-elevation16",
- "elevation17": "MuiPaper-elevation17",
- "elevation18": "MuiPaper-elevation18",
- "elevation19": "MuiPaper-elevation19",
- "elevation2": "MuiPaper-elevation2",
- "elevation20": "MuiPaper-elevation20",
- "elevation21": "MuiPaper-elevation21",
- "elevation22": "MuiPaper-elevation22",
- "elevation23": "MuiPaper-elevation23",
- "elevation24": "MuiPaper-elevation24",
- "elevation3": "MuiPaper-elevation3",
- "elevation4": "MuiPaper-elevation4",
- "elevation5": "MuiPaper-elevation5",
- "elevation6": "MuiPaper-elevation6",
- "elevation7": "MuiPaper-elevation7",
- "elevation8": "MuiPaper-elevation8",
- "elevation9": "MuiPaper-elevation9",
- "outlined": "MuiPaper-outlined",
- "root": "MuiPaper-root",
- "rounded": "MuiPaper-rounded",
- }
- }
- elevation={24}
- role="dialog"
- >
- <div
- aria-labelledby="accessibility-title"
- className="MuiPaper-root MuiDialog-paper modal-paper yellow-border MuiDialog-paperScrollPaper MuiDialog-paperWidthSm MuiPaper-elevation24 MuiPaper-rounded"
- role="dialog"
- >
- <div
- id="accessibility-title"
- >
- feedback.accessibility.window_title
- </div>
- <WithStyles(ForwardRef(IconButton))
- aria-label="feedback.accessibility.button_close"
- className="modal-paper-close-button"
- onClick={[Function]}
- >
- <ForwardRef(IconButton)
- aria-label="feedback.accessibility.button_close"
- className="modal-paper-close-button"
- classes={
- Object {
- "colorInherit": "MuiIconButton-colorInherit",
- "colorPrimary": "MuiIconButton-colorPrimary",
- "colorSecondary": "MuiIconButton-colorSecondary",
- "disabled": "Mui-disabled",
- "edgeEnd": "MuiIconButton-edgeEnd",
- "edgeStart": "MuiIconButton-edgeStart",
- "label": "MuiIconButton-label",
- "root": "MuiIconButton-root",
- "sizeSmall": "MuiIconButton-sizeSmall",
- }
- }
- onClick={[Function]}
- >
- <WithStyles(ForwardRef(ButtonBase))
- aria-label="feedback.accessibility.button_close"
- centerRipple={true}
- className="MuiIconButton-root modal-paper-close-button"
- disabled={false}
- focusRipple={true}
- onClick={[Function]}
- >
- <ForwardRef(ButtonBase)
- aria-label="feedback.accessibility.button_close"
- centerRipple={true}
- className="MuiIconButton-root modal-paper-close-button"
- classes={
- Object {
- "disabled": "Mui-disabled",
- "focusVisible": "Mui-focusVisible",
- "root": "MuiButtonBase-root",
- }
- }
- disabled={false}
- focusRipple={true}
- onClick={[Function]}
- >
- <button
- aria-label="feedback.accessibility.button_close"
- className="MuiButtonBase-root MuiIconButton-root modal-paper-close-button"
- disabled={false}
- onBlur={[Function]}
- onClick={[Function]}
- onDragLeave={[Function]}
- onFocus={[Function]}
- onKeyDown={[Function]}
- onKeyUp={[Function]}
- onMouseDown={[Function]}
- onMouseLeave={[Function]}
- onMouseUp={[Function]}
- onTouchEnd={[Function]}
- onTouchMove={[Function]}
- onTouchStart={[Function]}
- tabIndex={0}
- type="button"
- >
- <span
- className="MuiIconButton-label"
- >
- <Icon
- icon="test-file-stub"
- size={16}
- spin={false}
- >
- <Component
- className="styles__icon___23x3R"
- height={16}
- style={Object {}}
- width={16}
- >
- <svg
- className="styles__icon___23x3R"
- height={16}
- style={Object {}}
- width={16}
- >
- <use
- xlinkHref="#test-file-stub"
- />
- </svg>
- </Component>
- </Icon>
- </span>
- <WithStyles(memo)
- center={true}
- >
- <ForwardRef(TouchRipple)
- center={true}
- classes={
- Object {
- "child": "MuiTouchRipple-child",
- "childLeaving": "MuiTouchRipple-childLeaving",
- "childPulsate": "MuiTouchRipple-childPulsate",
- "ripple": "MuiTouchRipple-ripple",
- "ripplePulsate": "MuiTouchRipple-ripplePulsate",
- "rippleVisible": "MuiTouchRipple-rippleVisible",
- "root": "MuiTouchRipple-root",
- }
- }
- >
- <span
- className="MuiTouchRipple-root"
- >
- <TransitionGroup
- childFactory={[Function]}
- component={null}
- exit={true}
- />
- </span>
- </ForwardRef(TouchRipple)>
- </WithStyles(memo)>
- </button>
- </ForwardRef(ButtonBase)>
- </WithStyles(ForwardRef(ButtonBase))>
- </ForwardRef(IconButton)>
- </WithStyles(ForwardRef(IconButton))>
- <div
- className="fb-root"
- >
- <StyledIcon
- icon="test-file-stub"
- size={80}
- >
- <Icon
- aria-hidden={true}
- icon="test-file-stub"
- size={80}
- spin={false}
- >
- <Component
- aria-hidden={true}
- className="styles__icon___23x3R"
- height={80}
- style={Object {}}
- width={80}
- >
- <svg
- aria-hidden={true}
- className="styles__icon___23x3R"
- height={80}
- style={Object {}}
- width={80}
- >
- <use
- xlinkHref="#test-file-stub"
- />
- </svg>
- </Component>
- </Icon>
- </StyledIcon>
- <p
- className="title"
- >
- feedback.title
- </p>
- <p
- className="text"
- >
- feedback.text1
- </p>
- <p
- className="text"
- >
- feedback.text2
- </p>
- <div
- className="actions"
- >
- <WithStyles(ForwardRef(Button))
- aria-label="feedback.later"
- classes={
- Object {
- "label": "text-16-bold",
- "root": "btn-secondary-positive",
- }
- }
- onClick={[Function]}
- >
- <ForwardRef(Button)
- aria-label="feedback.later"
- classes={
- Object {
- "colorInherit": "MuiButton-colorInherit",
- "contained": "MuiButton-contained",
- "containedPrimary": "MuiButton-containedPrimary",
- "containedSecondary": "MuiButton-containedSecondary",
- "containedSizeLarge": "MuiButton-containedSizeLarge",
- "containedSizeSmall": "MuiButton-containedSizeSmall",
- "disableElevation": "MuiButton-disableElevation",
- "disabled": "Mui-disabled",
- "endIcon": "MuiButton-endIcon",
- "focusVisible": "Mui-focusVisible",
- "fullWidth": "MuiButton-fullWidth",
- "iconSizeLarge": "MuiButton-iconSizeLarge",
- "iconSizeMedium": "MuiButton-iconSizeMedium",
- "iconSizeSmall": "MuiButton-iconSizeSmall",
- "label": "MuiButton-label text-16-bold",
- "outlined": "MuiButton-outlined",
- "outlinedPrimary": "MuiButton-outlinedPrimary",
- "outlinedSecondary": "MuiButton-outlinedSecondary",
- "outlinedSizeLarge": "MuiButton-outlinedSizeLarge",
- "outlinedSizeSmall": "MuiButton-outlinedSizeSmall",
- "root": "MuiButton-root btn-secondary-positive",
- "sizeLarge": "MuiButton-sizeLarge",
- "sizeSmall": "MuiButton-sizeSmall",
- "startIcon": "MuiButton-startIcon",
- "text": "MuiButton-text",
- "textPrimary": "MuiButton-textPrimary",
- "textSecondary": "MuiButton-textSecondary",
- "textSizeLarge": "MuiButton-textSizeLarge",
- "textSizeSmall": "MuiButton-textSizeSmall",
- }
- }
- onClick={[Function]}
- >
- <WithStyles(ForwardRef(ButtonBase))
- aria-label="feedback.later"
- className="MuiButton-root btn-secondary-positive MuiButton-text"
- component="button"
- disabled={false}
- focusRipple={true}
- focusVisibleClassName="Mui-focusVisible"
- onClick={[Function]}
- type="button"
- >
- <ForwardRef(ButtonBase)
- aria-label="feedback.later"
- className="MuiButton-root btn-secondary-positive MuiButton-text"
- classes={
- Object {
- "disabled": "Mui-disabled",
- "focusVisible": "Mui-focusVisible",
- "root": "MuiButtonBase-root",
- }
- }
- component="button"
- disabled={false}
- focusRipple={true}
- focusVisibleClassName="Mui-focusVisible"
- onClick={[Function]}
- type="button"
- >
- <button
- aria-label="feedback.later"
- className="MuiButtonBase-root MuiButton-root btn-secondary-positive MuiButton-text"
- disabled={false}
- onBlur={[Function]}
- onClick={[Function]}
- onDragLeave={[Function]}
- onFocus={[Function]}
- onKeyDown={[Function]}
- onKeyUp={[Function]}
- onMouseDown={[Function]}
- onMouseLeave={[Function]}
- onMouseUp={[Function]}
- onTouchEnd={[Function]}
- onTouchMove={[Function]}
- onTouchStart={[Function]}
- tabIndex={0}
- type="button"
- >
- <span
- className="MuiButton-label text-16-bold"
- >
- feedback.later
- </span>
- <WithStyles(memo)
- center={false}
- >
- <ForwardRef(TouchRipple)
- center={false}
- classes={
- Object {
- "child": "MuiTouchRipple-child",
- "childLeaving": "MuiTouchRipple-childLeaving",
- "childPulsate": "MuiTouchRipple-childPulsate",
- "ripple": "MuiTouchRipple-ripple",
- "ripplePulsate": "MuiTouchRipple-ripplePulsate",
- "rippleVisible": "MuiTouchRipple-rippleVisible",
- "root": "MuiTouchRipple-root",
- }
- }
- >
- <span
- className="MuiTouchRipple-root"
- >
- <TransitionGroup
- childFactory={[Function]}
- component={null}
- exit={true}
- />
- </span>
- </ForwardRef(TouchRipple)>
- </WithStyles(memo)>
- </button>
- </ForwardRef(ButtonBase)>
- </WithStyles(ForwardRef(ButtonBase))>
- </ForwardRef(Button)>
- </WithStyles(ForwardRef(Button))>
- <WithStyles(ForwardRef(Button))
- aria-label="feedback.lets_go"
- classes={
- Object {
- "label": "text-16-bold",
- "root": "btn-highlight",
- }
- }
- onClick={[Function]}
- >
- <ForwardRef(Button)
- aria-label="feedback.lets_go"
- classes={
- Object {
- "colorInherit": "MuiButton-colorInherit",
- "contained": "MuiButton-contained",
- "containedPrimary": "MuiButton-containedPrimary",
- "containedSecondary": "MuiButton-containedSecondary",
- "containedSizeLarge": "MuiButton-containedSizeLarge",
- "containedSizeSmall": "MuiButton-containedSizeSmall",
- "disableElevation": "MuiButton-disableElevation",
- "disabled": "Mui-disabled",
- "endIcon": "MuiButton-endIcon",
- "focusVisible": "Mui-focusVisible",
- "fullWidth": "MuiButton-fullWidth",
- "iconSizeLarge": "MuiButton-iconSizeLarge",
- "iconSizeMedium": "MuiButton-iconSizeMedium",
- "iconSizeSmall": "MuiButton-iconSizeSmall",
- "label": "MuiButton-label text-16-bold",
- "outlined": "MuiButton-outlined",
- "outlinedPrimary": "MuiButton-outlinedPrimary",
- "outlinedSecondary": "MuiButton-outlinedSecondary",
- "outlinedSizeLarge": "MuiButton-outlinedSizeLarge",
- "outlinedSizeSmall": "MuiButton-outlinedSizeSmall",
- "root": "MuiButton-root btn-highlight",
- "sizeLarge": "MuiButton-sizeLarge",
- "sizeSmall": "MuiButton-sizeSmall",
- "startIcon": "MuiButton-startIcon",
- "text": "MuiButton-text",
- "textPrimary": "MuiButton-textPrimary",
- "textSecondary": "MuiButton-textSecondary",
- "textSizeLarge": "MuiButton-textSizeLarge",
- "textSizeSmall": "MuiButton-textSizeSmall",
- }
- }
- onClick={[Function]}
- >
- <WithStyles(ForwardRef(ButtonBase))
- aria-label="feedback.lets_go"
- className="MuiButton-root btn-highlight MuiButton-text"
- component="button"
- disabled={false}
- focusRipple={true}
- focusVisibleClassName="Mui-focusVisible"
- onClick={[Function]}
- type="button"
- >
- <ForwardRef(ButtonBase)
- aria-label="feedback.lets_go"
- className="MuiButton-root btn-highlight MuiButton-text"
- classes={
- Object {
- "disabled": "Mui-disabled",
- "focusVisible": "Mui-focusVisible",
- "root": "MuiButtonBase-root",
- }
- }
- component="button"
- disabled={false}
- focusRipple={true}
- focusVisibleClassName="Mui-focusVisible"
- onClick={[Function]}
- type="button"
- >
- <button
- aria-label="feedback.lets_go"
- className="MuiButtonBase-root MuiButton-root btn-highlight MuiButton-text"
- disabled={false}
- onBlur={[Function]}
- onClick={[Function]}
- onDragLeave={[Function]}
- onFocus={[Function]}
- onKeyDown={[Function]}
- onKeyUp={[Function]}
- onMouseDown={[Function]}
- onMouseLeave={[Function]}
- onMouseUp={[Function]}
- onTouchEnd={[Function]}
- onTouchMove={[Function]}
- onTouchStart={[Function]}
- tabIndex={0}
- type="button"
- >
- <span
- className="MuiButton-label text-16-bold"
- >
- feedback.lets_go
- </span>
- <WithStyles(memo)
- center={false}
- >
- <ForwardRef(TouchRipple)
- center={false}
- classes={
- Object {
- "child": "MuiTouchRipple-child",
- "childLeaving": "MuiTouchRipple-childLeaving",
- "childPulsate": "MuiTouchRipple-childPulsate",
- "ripple": "MuiTouchRipple-ripple",
- "ripplePulsate": "MuiTouchRipple-ripplePulsate",
- "rippleVisible": "MuiTouchRipple-rippleVisible",
- "root": "MuiTouchRipple-root",
- }
- }
- >
- <span
- className="MuiTouchRipple-root"
- >
- <TransitionGroup
- childFactory={[Function]}
- component={null}
- exit={true}
- />
- </span>
- </ForwardRef(TouchRipple)>
- </WithStyles(memo)>
- </button>
- </ForwardRef(ButtonBase)>
- </WithStyles(ForwardRef(ButtonBase))>
- </ForwardRef(Button)>
- </WithStyles(ForwardRef(Button))>
- </div>
- </div>
- </div>
- </ForwardRef(Paper)>
- </WithStyles(ForwardRef(Paper))>
- </div>
- </Transition>
- </ForwardRef(Fade)>
- <div
- data-test="sentinelEnd"
- tabIndex={0}
- />
- </Unstable_TrapFocus>
- </div>
- </Portal>
- </ForwardRef(Portal)>
- </ForwardRef(Modal)>
- </ForwardRef(Dialog)>
- </WithStyles(ForwardRef(Dialog))>
- </FeedbackModal>
-</Provider>
+ feedback.lets_go
+ </span>
+ <span
+ class="MuiTouchRipple-root"
+ />
+ </button>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div
+ data-test="sentinelEnd"
+ tabindex="0"
+ />
+ </div>
+</body>
`;
diff --git a/src/components/Feedback/feedbackModal.scss b/src/components/Feedback/feedbackModal.scss
index 379ceff5f9448aa00c1b24d713b442c550ff181e..7ac1fee78f3a5b310336c2f563fa58925f7e97ae 100644
--- a/src/components/Feedback/feedbackModal.scss
+++ b/src/components/Feedback/feedbackModal.scss
@@ -26,7 +26,7 @@
display: flex;
justify-content: center;
margin-top: 1rem;
- gap: 16px;
+ gap: 1rem;
button {
margin-top: 0;
max-width: 150px;
diff --git a/src/components/FluidChart/FluidChart.tsx b/src/components/FluidChart/FluidChart.tsx
index 537ee6ee30ab6482e148e41fda8c36023f474fca..908daec4451c91d102c11f5c2f0e3ac6a9f0aa9f 100644
--- a/src/components/FluidChart/FluidChart.tsx
+++ b/src/components/FluidChart/FluidChart.tsx
@@ -141,21 +141,15 @@ const FluidChart = ({ fluidType, setActive }: FluidChartProps) => {
}
}
- const LastDataValid = () => (
+ const LastDataValid = fluidType !== FluidType.MULTIFLUID && (
<div className="lastValidData">
- <span className="text-16-bold date" onClick={moveToDate}>
+ <Button className="btnText" onClick={moveToDate}>
{t('consumption_visualizer.last_valid_data', {
- date: currentFluidStatus?.lastDataDate?.toFormat('dd/MM/yy') || '-',
+ date: currentFluidStatus?.lastDataDate?.toFormat('dd/MM/yy') ?? '-',
})}
- </span>
+ </Button>
<p>{t('auth.warningOfflineData')}</p>
- <Button
- classes={{
- root: 'btn-secondary-negative',
- label: 'text-16-bold',
- }}
- onClick={toggleModalConnection}
- >
+ <Button className="btnSecondary" onClick={toggleModalConnection}>
{t(`auth.${getKonnectorSlug(fluidType)}.connect`)}
</Button>
</div>
@@ -163,7 +157,7 @@ const FluidChart = ({ fluidType, setActive }: FluidChartProps) => {
return (
<div className="fluidchart-root">
- {!isFluidConnected && <LastDataValid />}
+ {!isFluidConnected && LastDataValid}
{currentTimeStep === TimeStep.HALF_AN_HOUR && !containsHalfHourData ? (
<HalfHourNoData />
) : (
@@ -180,14 +174,13 @@ const FluidChart = ({ fluidType, setActive }: FluidChartProps) => {
)}
<TimeStepSelector fluidType={fluidType} />
{currentTimeStep !== TimeStep.YEAR && (
- <div className="fluidchart-footer" onClick={handleChangeSwitch}>
+ <div className="fluidchart-footer">
<div className="fluidchart-footer-compare text-15-normal">
<StyledSwitch
fluidType={fluidType}
checked={showCompare}
- inputProps={{
- 'aria-label': t('consumption.accessibility.checkbox_compare'),
- }}
+ aria-label={t('consumption.accessibility.checkbox_compare')}
+ onClick={handleChangeSwitch}
/>
<span className="fluidchart-footer-label graph-switch-text">
{t(`timestep.${lowercaseTimeStep}.comparelabel`)}
diff --git a/src/components/FluidChart/HalfHourNoData/HalfHourNoData.spec.tsx b/src/components/FluidChart/HalfHourNoData/HalfHourNoData.spec.tsx
index 5b817591bf6040deab0540b88f806542e5078fb4..1537a11b753767682c686bbb366a335502d47520 100644
--- a/src/components/FluidChart/HalfHourNoData/HalfHourNoData.spec.tsx
+++ b/src/components/FluidChart/HalfHourNoData/HalfHourNoData.spec.tsx
@@ -1,10 +1,10 @@
-import { mount } from 'enzyme'
+import { render } from '@testing-library/react'
import React from 'react'
import HalfHourNoData from './HalfHourNoData'
describe('HalfHourNoData component', () => {
it('should render correctly HalfHourNoData', () => {
- const component = mount(<HalfHourNoData />)
- expect(component).toMatchSnapshot()
+ const { container } = render(<HalfHourNoData />)
+ expect(container).toMatchSnapshot()
})
})
diff --git a/src/components/FluidChart/HalfHourNoData/__snapshots__/HalfHourNoData.spec.tsx.snap b/src/components/FluidChart/HalfHourNoData/__snapshots__/HalfHourNoData.spec.tsx.snap
index ef55e75a7baa649a8a4924df51b3b59c2da6b06b..af114a46a58eb8a87647400a2fbfe1ee201f4751 100644
--- a/src/components/FluidChart/HalfHourNoData/__snapshots__/HalfHourNoData.spec.tsx.snap
+++ b/src/components/FluidChart/HalfHourNoData/__snapshots__/HalfHourNoData.spec.tsx.snap
@@ -1,3 +1,16 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
-exports[`HalfHourNoData component should render correctly HalfHourNoData 1`] = `ReactWrapper {}`;
+exports[`HalfHourNoData component should render correctly HalfHourNoData 1`] = `
+<div>
+ <div
+ class="halfHour"
+ >
+ <h2>
+ timestep.half_an_hour.gather_data_title
+ </h2>
+ <p>
+ timestep.half_an_hour.gather_data_subtitle
+ </p>
+ </div>
+</div>
+`;
diff --git a/src/components/FluidChart/TimeStepSelector/TimeStepSelector.spec.tsx b/src/components/FluidChart/TimeStepSelector/TimeStepSelector.spec.tsx
index 25c2672cc2540a55bcbb7044a777cb6cf651487e..896eee1c8698f2898e3314f4b9ba822b9216035f 100644
--- a/src/components/FluidChart/TimeStepSelector/TimeStepSelector.spec.tsx
+++ b/src/components/FluidChart/TimeStepSelector/TimeStepSelector.spec.tsx
@@ -1,15 +1,13 @@
-import { Button } from '@material-ui/core'
+import { render, screen } from '@testing-library/react'
+import { userEvent } from '@testing-library/user-event'
import TimeStepSelector from 'components/FluidChart/TimeStepSelector/TimeStepSelector'
import { FluidType, TimeStep } from 'enums'
-import { mount } from 'enzyme'
-import toJson from 'enzyme-to-json'
import { DateTime } from 'luxon'
import React from 'react'
import { Provider } from 'react-redux'
import UsageEventService from 'services/usageEvent.service'
import * as chartActions from 'store/chart/chart.slice'
import { createMockEcolyoStore } from 'tests/__mocks__/store'
-import { waitForComponentToPaint } from 'tests/__mocks__/testUtils'
jest.mock('services/usageEvent.service')
const mockAddEvent = jest.fn()
@@ -21,7 +19,7 @@ const setSelectedDateSpy = jest.spyOn(chartActions, 'setSelectedDate')
describe('TimeStepSelector component', () => {
beforeEach(() => {
- setCurrentTimeStepSpy.mockClear()
+ jest.clearAllMocks()
})
it('should render component properly with 4 timesteps', async () => {
@@ -33,15 +31,13 @@ describe('TimeStepSelector component', () => {
}),
},
})
- const wrapper = mount(
+ const { container } = render(
<Provider store={store}>
<TimeStepSelector fluidType={FluidType.WATER} />
</Provider>
)
- expect(wrapper.find('.circle').at(3).exists()).toBeTruthy()
- expect(wrapper.find('.circle').at(4).exists()).toBeFalsy()
- await waitForComponentToPaint(wrapper)
- expect(toJson(wrapper)).toMatchSnapshot()
+ expect(screen.getAllByRole('listitem').length).toBe(8)
+ expect(container).toMatchSnapshot()
})
it('should render component properly with 5 timesteps', () => {
@@ -53,16 +49,15 @@ describe('TimeStepSelector component', () => {
}),
},
})
- const wrapper = mount(
+ render(
<Provider store={store}>
<TimeStepSelector fluidType={FluidType.ELECTRICITY} />
</Provider>
)
- expect(wrapper.find('.circle').at(4).exists()).toBeTruthy()
- expect(wrapper.find('.circle').at(5).exists()).toBeFalsy()
+ expect(screen.getAllByRole('listitem').length).toBe(10)
})
- it('should define next TimeStep and dispatch it', () => {
+ it('should define next TimeStep and dispatch it', async () => {
const store = createMockEcolyoStore({
chart: {
currentTimeStep: TimeStep.YEAR,
@@ -71,17 +66,17 @@ describe('TimeStepSelector component', () => {
}),
},
})
- const wrapper = mount(
+ render(
<Provider store={store}>
<TimeStepSelector fluidType={FluidType.WATER} />
</Provider>
)
- wrapper.find('#day').first().simulate('click')
+ await userEvent.click(screen.getAllByRole('listitem')[2])
expect(setCurrentTimeStepSpy).toHaveBeenCalledTimes(1)
expect(setCurrentTimeStepSpy).toHaveBeenCalledWith(TimeStep.DAY)
expect(setCurrentIndexSpy).toHaveBeenCalledTimes(1)
})
- it('should go to todays day with timestep week', () => {
+ it('should go to todays day with timestep week', async () => {
const store = createMockEcolyoStore({
chart: {
currentTimeStep: TimeStep.YEAR,
@@ -90,15 +85,15 @@ describe('TimeStepSelector component', () => {
}),
},
})
- const wrapper = mount(
+ render(
<Provider store={store}>
<TimeStepSelector fluidType={FluidType.WATER} />
</Provider>
)
- wrapper.find(Button).first().simulate('click')
+ await userEvent.click(screen.getAllByRole('button')[0])
expect(setCurrentTimeStepSpy).toHaveBeenCalledTimes(1)
expect(setCurrentTimeStepSpy).toHaveBeenCalledWith(TimeStep.WEEK)
- expect(setCurrentIndexSpy).toHaveBeenCalledTimes(2)
+ expect(setCurrentIndexSpy).toHaveBeenCalledTimes(1)
expect(setSelectedDateSpy).toHaveBeenCalledTimes(1)
})
})
diff --git a/src/components/FluidChart/TimeStepSelector/TimeStepSelector.tsx b/src/components/FluidChart/TimeStepSelector/TimeStepSelector.tsx
index d57884a7020e4f3c0be391462ab45de4bf924659..d5d59d5340e20443334a3691e49a9c30efc6b04c 100644
--- a/src/components/FluidChart/TimeStepSelector/TimeStepSelector.tsx
+++ b/src/components/FluidChart/TimeStepSelector/TimeStepSelector.tsx
@@ -23,13 +23,7 @@ const TimeStepSelector = ({ fluidType }: { fluidType: FluidType }) => {
)
const dateChartService = new DateChartService()
const client = useClient()
- const timeStepElecArray: TimeStep[] = [
- TimeStep.HALF_AN_HOUR,
- TimeStep.WEEK,
- TimeStep.DAY,
- TimeStep.MONTH,
- TimeStep.YEAR,
- ]
+
const timeStepMultiArray: TimeStep[] = [
TimeStep.WEEK,
TimeStep.DAY,
@@ -38,7 +32,7 @@ const TimeStepSelector = ({ fluidType }: { fluidType: FluidType }) => {
]
const timeStepArray: TimeStep[] =
fluidType === FluidType.ELECTRICITY
- ? [...timeStepElecArray]
+ ? [TimeStep.HALF_AN_HOUR, ...timeStepMultiArray]
: [...timeStepMultiArray]
const handleToday = () => {
@@ -74,9 +68,10 @@ const TimeStepSelector = ({ fluidType }: { fluidType: FluidType }) => {
<Button
onClick={handleToday}
classes={{
- root: 'btn-today',
+ root: 'btnSecondary',
label: 'text-13-normal',
}}
+ size="large"
>
{t('timestep.today')}
</Button>
@@ -93,7 +88,14 @@ const TimeStepSelector = ({ fluidType }: { fluidType: FluidType }) => {
step === currentTimeStep ? 'active circle' : 'circle'
}
onClick={() => handleChangeTimeStep(step)}
+ onKeyDown={event => {
+ if (event.key === ' ') {
+ event.preventDefault()
+ handleChangeTimeStep(step)
+ }
+ }}
id={TimeStep[step].toLowerCase()}
+ tabIndex={0}
>
<span className="clickable-area" />
<span className="text text-14-normal">
diff --git a/src/components/FluidChart/TimeStepSelector/__snapshots__/TimeStepSelector.spec.tsx.snap b/src/components/FluidChart/TimeStepSelector/__snapshots__/TimeStepSelector.spec.tsx.snap
index 25dcf210dadc587ea1360ffed18ac5c860b19236..bd50699f8e15615f0e591ab144c1b29a4992c0f8 100644
--- a/src/components/FluidChart/TimeStepSelector/__snapshots__/TimeStepSelector.spec.tsx.snap
+++ b/src/components/FluidChart/TimeStepSelector/__snapshots__/TimeStepSelector.spec.tsx.snap
@@ -1,227 +1,100 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`TimeStepSelector component should render component properly with 4 timesteps 1`] = `
-<Provider
- store={
- Object {
- "clearActions": [Function],
- "dispatch": [Function],
- "getActions": [Function],
- "getState": [Function],
- "replaceReducer": [Function],
- "subscribe": [Function],
- }
- }
->
- <TimeStepSelector
- fluidType={1}
+<div>
+ <div
+ class="timestep-selector"
>
+ <button
+ class="MuiButtonBase-root MuiButton-root btnSecondary MuiButton-text MuiButton-textSizeLarge MuiButton-sizeLarge"
+ tabindex="0"
+ type="button"
+ >
+ <span
+ class="MuiButton-label text-13-normal"
+ >
+ timestep.today
+ </span>
+ <span
+ class="MuiTouchRipple-root"
+ />
+ </button>
<div
- className="timestep-selector"
+ class="timestep-container"
>
- <WithStyles(ForwardRef(Button))
- classes={
- Object {
- "label": "text-13-normal",
- "root": "btn-today",
- }
- }
- onClick={[Function]}
+ <ul
+ class="timestep-bar false"
>
- <ForwardRef(Button)
- classes={
- Object {
- "colorInherit": "MuiButton-colorInherit",
- "contained": "MuiButton-contained",
- "containedPrimary": "MuiButton-containedPrimary",
- "containedSecondary": "MuiButton-containedSecondary",
- "containedSizeLarge": "MuiButton-containedSizeLarge",
- "containedSizeSmall": "MuiButton-containedSizeSmall",
- "disableElevation": "MuiButton-disableElevation",
- "disabled": "Mui-disabled",
- "endIcon": "MuiButton-endIcon",
- "focusVisible": "Mui-focusVisible",
- "fullWidth": "MuiButton-fullWidth",
- "iconSizeLarge": "MuiButton-iconSizeLarge",
- "iconSizeMedium": "MuiButton-iconSizeMedium",
- "iconSizeSmall": "MuiButton-iconSizeSmall",
- "label": "MuiButton-label text-13-normal",
- "outlined": "MuiButton-outlined",
- "outlinedPrimary": "MuiButton-outlinedPrimary",
- "outlinedSecondary": "MuiButton-outlinedSecondary",
- "outlinedSizeLarge": "MuiButton-outlinedSizeLarge",
- "outlinedSizeSmall": "MuiButton-outlinedSizeSmall",
- "root": "MuiButton-root btn-today",
- "sizeLarge": "MuiButton-sizeLarge",
- "sizeSmall": "MuiButton-sizeSmall",
- "startIcon": "MuiButton-startIcon",
- "text": "MuiButton-text",
- "textPrimary": "MuiButton-textPrimary",
- "textSecondary": "MuiButton-textSecondary",
- "textSizeLarge": "MuiButton-textSizeLarge",
- "textSizeSmall": "MuiButton-textSizeSmall",
- }
- }
- onClick={[Function]}
+ <li
+ class="circle"
+ id="week"
+ tabindex="0"
>
- <WithStyles(ForwardRef(ButtonBase))
- className="MuiButton-root btn-today MuiButton-text"
- component="button"
- disabled={false}
- focusRipple={true}
- focusVisibleClassName="Mui-focusVisible"
- onClick={[Function]}
- type="button"
+ <span
+ class="clickable-area"
+ />
+ <span
+ class="text text-14-normal"
>
- <ForwardRef(ButtonBase)
- className="MuiButton-root btn-today MuiButton-text"
- classes={
- Object {
- "disabled": "Mui-disabled",
- "focusVisible": "Mui-focusVisible",
- "root": "MuiButtonBase-root",
- }
- }
- component="button"
- disabled={false}
- focusRipple={true}
- focusVisibleClassName="Mui-focusVisible"
- onClick={[Function]}
- type="button"
- >
- <button
- className="MuiButtonBase-root MuiButton-root btn-today MuiButton-text"
- disabled={false}
- onBlur={[Function]}
- onClick={[Function]}
- onDragLeave={[Function]}
- onFocus={[Function]}
- onKeyDown={[Function]}
- onKeyUp={[Function]}
- onMouseDown={[Function]}
- onMouseLeave={[Function]}
- onMouseUp={[Function]}
- onTouchEnd={[Function]}
- onTouchMove={[Function]}
- onTouchStart={[Function]}
- tabIndex={0}
- type="button"
- >
- <span
- className="MuiButton-label text-13-normal"
- >
- timestep.today
- </span>
- <WithStyles(memo)
- center={false}
- >
- <ForwardRef(TouchRipple)
- center={false}
- classes={
- Object {
- "child": "MuiTouchRipple-child",
- "childLeaving": "MuiTouchRipple-childLeaving",
- "childPulsate": "MuiTouchRipple-childPulsate",
- "ripple": "MuiTouchRipple-ripple",
- "ripplePulsate": "MuiTouchRipple-ripplePulsate",
- "rippleVisible": "MuiTouchRipple-rippleVisible",
- "root": "MuiTouchRipple-root",
- }
- }
- >
- <span
- className="MuiTouchRipple-root"
- >
- <TransitionGroup
- childFactory={[Function]}
- component={null}
- exit={true}
- />
- </span>
- </ForwardRef(TouchRipple)>
- </WithStyles(memo)>
- </button>
- </ForwardRef(ButtonBase)>
- </WithStyles(ForwardRef(ButtonBase))>
- </ForwardRef(Button)>
- </WithStyles(ForwardRef(Button))>
- <div
- className="timestep-container"
- >
- <ul
- className="timestep-bar false"
+ timestep.week.period
+ </span>
+ </li>
+ <li
+ class="bar"
+ />
+ <li
+ class="active circle"
+ id="day"
+ tabindex="0"
>
- <li
- className="circle"
- id="week"
- onClick={[Function]}
- >
- <span
- className="clickable-area"
- />
- <span
- className="text text-14-normal"
- >
- timestep.week.period
- </span>
- </li>
- <li
- className="bar"
+ <span
+ class="clickable-area"
/>
- <li
- className="active circle"
- id="day"
- onClick={[Function]}
+ <span
+ class="text text-14-normal"
>
- <span
- className="clickable-area"
- />
- <span
- className="text text-14-normal"
- >
- timestep.day.period
- </span>
- </li>
- <li
- className="bar"
+ timestep.day.period
+ </span>
+ </li>
+ <li
+ class="bar"
+ />
+ <li
+ class="circle"
+ id="month"
+ tabindex="0"
+ >
+ <span
+ class="clickable-area"
/>
- <li
- className="circle"
- id="month"
- onClick={[Function]}
+ <span
+ class="text text-14-normal"
>
- <span
- className="clickable-area"
- />
- <span
- className="text text-14-normal"
- >
- timestep.month.period
- </span>
- </li>
- <li
- className="bar"
+ timestep.month.period
+ </span>
+ </li>
+ <li
+ class="bar"
+ />
+ <li
+ class="circle"
+ id="year"
+ tabindex="0"
+ >
+ <span
+ class="clickable-area"
/>
- <li
- className="circle"
- id="year"
- onClick={[Function]}
+ <span
+ class="text text-14-normal"
>
- <span
- className="clickable-area"
- />
- <span
- className="text text-14-normal"
- >
- timestep.year.period
- </span>
- </li>
- <li
- className="bar"
- />
- </ul>
- </div>
+ timestep.year.period
+ </span>
+ </li>
+ <li
+ class="bar"
+ />
+ </ul>
</div>
- </TimeStepSelector>
-</Provider>
+ </div>
+</div>
`;
diff --git a/src/components/FluidChart/TimeStepSelector/timeStepSelector.scss b/src/components/FluidChart/TimeStepSelector/timeStepSelector.scss
index b041802de637920000fea84f9275c41134e18341..e08a8da858902eaeb82b81b194d8580d8c73820e 100644
--- a/src/components/FluidChart/TimeStepSelector/timeStepSelector.scss
+++ b/src/components/FluidChart/TimeStepSelector/timeStepSelector.scss
@@ -8,15 +8,9 @@
justify-content: space-evenly;
align-items: flex-end;
margin: auto;
+ margin-top: 1rem;
max-width: 45.75rem;
- height: 36px;
- .btn-today {
- @include button(
- transparent,
- $grey-bright,
- 1px solid $soft-grey,
- transparent
- );
+ .btnSecondary {
max-width: 90px;
border-radius: 4px;
margin-top: 0;
diff --git a/src/components/FluidChart/fluidChart.scss b/src/components/FluidChart/fluidChart.scss
index 138f86bbf547ef2b0a749e7904e67bda31de4694..9d50919327cdd4f9d1c0acd8749bfaed6d5c8d97 100644
--- a/src/components/FluidChart/fluidChart.scss
+++ b/src/components/FluidChart/fluidChart.scss
@@ -19,14 +19,14 @@
align-items: center;
justify-content: left;
margin: auto;
- padding-top: 1.5rem;
+ padding-top: 1rem;
max-width: 45.75rem;
.fluidchart-footer-label {
color: $grey-bright;
}
}
.compareLegend {
- padding: 0 0 1rem 0;
+ padding: 1rem 0 0 0;
display: flex;
gap: 1rem;
font-weight: 700;
@@ -79,9 +79,6 @@
text-decoration: underline;
}
button {
- margin-top: 0rem !important;
- width: 70% !important;
- height: 40px !important;
max-width: 22.5rem;
}
}
diff --git a/src/components/Header/CozyBar.spec.tsx b/src/components/Header/CozyBar.spec.tsx
index 274a14b02a7b75dd088148174d95780760d286bd..3f747796d146ce793df13cf8de468e548830188a 100644
--- a/src/components/Header/CozyBar.spec.tsx
+++ b/src/components/Header/CozyBar.spec.tsx
@@ -1,7 +1,7 @@
+import { render, screen } from '@testing-library/react'
+import { userEvent } from '@testing-library/user-event'
import CozyBar from 'components/Header/CozyBar'
import { ScreenType } from 'enums'
-import { mount } from 'enzyme'
-import toJson from 'enzyme-to-json'
import React from 'react'
import { Provider } from 'react-redux'
import * as ModalAction from 'store/modal/modal.slice'
@@ -28,49 +28,47 @@ jest.mock('react-router-dom', () => ({
describe('CozyBar component', () => {
const store = createMockEcolyoStore()
it('should be rendered correctly without without left arrow', () => {
- const wrapper = mount(
+ const { container } = render(
<Provider store={store}>
<CozyBar />
</Provider>
)
- expect(toJson(wrapper)).toMatchSnapshot()
+ expect(container).toMatchSnapshot()
})
describe('should test displayBackArrow', () => {
- it('should call navigate(-1) when back button is clicked and no function is provided', () => {
- const wrapper = mount(
+ it('should call navigate(-1) when back button is clicked and no function is provided', async () => {
+ const { container } = render(
<Provider store={store}>
<CozyBar displayBackArrow={true} />
</Provider>
)
- expect(toJson(wrapper)).toMatchSnapshot()
- expect(wrapper.find('BarLeft')).toHaveLength(1)
- wrapper.find('BarLeft').find('.cv-button').first().simulate('click')
+ expect(container).toMatchSnapshot()
+ await userEvent.click(screen.getAllByRole('button')[0])
expect(mockedNavigate).toHaveBeenCalled()
})
- it('should call backFunction() when back button is clicked and function is provided', () => {
+ it('should call backFunction() when back button is clicked and function is provided', async () => {
const mockBackFunction = jest.fn()
- const wrapper = mount(
+ const { container } = render(
<Provider store={store}>
<CozyBar displayBackArrow={true} backFunction={mockBackFunction} />
</Provider>
)
- expect(toJson(wrapper)).toMatchSnapshot()
- expect(wrapper.find('BarLeft')).toHaveLength(1)
- wrapper.find('BarLeft').find('.cv-button').first().simulate('click')
+ expect(container).toMatchSnapshot()
+ await userEvent.click(screen.getAllByRole('button')[0])
expect(mockBackFunction).toHaveBeenCalled()
})
})
- it('should call handleClickFeedbacks when feedback button is clicked', () => {
- const wrapper = mount(
+ it('should call handleClickFeedbacks when feedback button is clicked', async () => {
+ render(
<Provider store={store}>
<CozyBar />
</Provider>
)
const updateModalSpy = jest.spyOn(ModalAction, 'openFeedbackModal')
- wrapper.find('BarRight').find('.cv-button').first().simulate('click')
+ await userEvent.click(screen.getByRole('button'))
expect(updateModalSpy).toHaveBeenCalledWith(true)
})
@@ -78,12 +76,11 @@ describe('CozyBar component', () => {
const store = createMockEcolyoStore({
global: { screenType: ScreenType.DESKTOP },
})
- const wrapper = mount(
+ const { container } = render(
<Provider store={store}>
<CozyBar />
</Provider>
)
- // Snapshot should be empty
- expect(toJson(wrapper)).toMatchSnapshot()
+ expect(container.firstChild).toBeNull()
})
})
diff --git a/src/components/Header/Header.spec.tsx b/src/components/Header/Header.spec.tsx
index 939b20f152bcd3ed27a467a879807c668428796e..d76305f56773119682e4e2174a3952d2363e121e 100644
--- a/src/components/Header/Header.spec.tsx
+++ b/src/components/Header/Header.spec.tsx
@@ -1,6 +1,6 @@
-import IconButton from '@material-ui/core/IconButton'
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
import Header from 'components/Header/Header'
-import { mount } from 'enzyme'
import React from 'react'
import { Provider } from 'react-redux'
import * as ModalAction from 'store/modal/modal.slice'
@@ -12,71 +12,90 @@ jest.mock('react-router-dom', () => ({
useNavigate: () => mockedNavigate,
}))
-const mockSetHeaderHeight = jest.fn()
-
describe('Header component', () => {
const store = createMockEcolyoStore()
it('should be rendered correctly', () => {
- const wrapper = mount(
+ const { container } = render(
<Provider store={store}>
- <Header
- setHeaderHeight={mockSetHeaderHeight}
- desktopTitleKey="mockKey"
- />
+ <Header setHeaderHeight={jest.fn()} desktopTitleKey="mockKey" />
</Provider>
)
- expect(wrapper.find('.header')).toHaveLength(1)
+ expect(container).toMatchSnapshot()
+ expect(container.getElementsByTagName('header')[0]).toBeInTheDocument()
})
it('should display title and back button when desktopTitle key provided and displayBackArrow is true', () => {
- const wrapper = mount(
+ const key = 'titleKey'
+ render(
<Provider store={store}>
<Header
- desktopTitleKey="KEY"
+ desktopTitleKey={key}
displayBackArrow={true}
- setHeaderHeight={mockSetHeaderHeight}
+ setHeaderHeight={jest.fn()}
/>
</Provider>
)
- expect(wrapper.find('.header-text-desktop').first().text()).toEqual('KEY')
+ expect(screen.getByText(key)).toBeInTheDocument()
expect(
- wrapper.find(IconButton).find('.header-back-button').first()
- ).toHaveLength(1)
+ screen.getByRole('button', { name: 'header.accessibility.button_back' })
+ ).toBeInTheDocument()
})
-
- it('should call handleClickBack when back button is clicked', () => {
- const wrapper = mount(
+ it('should NOT display back button when displayBackArrow is false', async () => {
+ render(
<Provider store={store}>
<Header
- desktopTitleKey="KEY"
- displayBackArrow={true}
- setHeaderHeight={mockSetHeaderHeight}
+ desktopTitleKey="test"
+ displayBackArrow={false}
+ setHeaderHeight={jest.fn()}
/>
</Provider>
)
- wrapper
- .find(IconButton)
- .find('.header-back-button')
- .first()
- .simulate('click')
- expect(mockedNavigate).toHaveBeenCalled()
+ expect(
+ screen.queryByRole('button', {
+ name: 'header.accessibility.button_back',
+ })
+ ).not.toBeInTheDocument()
+ })
+
+ describe('back functions', () => {
+ it('should call navigate -1 when back button is clicked with NO back fn', async () => {
+ render(
+ <Provider store={store}>
+ <Header
+ desktopTitleKey="KEY"
+ displayBackArrow={true}
+ setHeaderHeight={jest.fn()}
+ />
+ </Provider>
+ )
+ await userEvent.click(screen.getAllByRole('button')[0])
+ expect(mockedNavigate).toHaveBeenCalled()
+ })
+ it('should call custom back fn when back button is clicked', async () => {
+ const mockBack = jest.fn()
+ render(
+ <Provider store={store}>
+ <Header
+ desktopTitleKey="KEY"
+ displayBackArrow={true}
+ setHeaderHeight={jest.fn()}
+ backFunction={mockBack}
+ />
+ </Provider>
+ )
+ await userEvent.click(screen.getAllByRole('button')[0])
+ expect(mockBack).toHaveBeenCalled()
+ })
})
- it('should call handleClickFeedbacks when feedback button is clicked', () => {
- const wrapper = mount(
+ it('should call handleClickFeedbacks when feedback button is clicked', async () => {
+ render(
<Provider store={store}>
- <Header
- setHeaderHeight={mockSetHeaderHeight}
- desktopTitleKey="mockKey"
- />
+ <Header setHeaderHeight={jest.fn()} desktopTitleKey="mockKey" />
</Provider>
)
const updateModalSpy = jest.spyOn(ModalAction, 'openFeedbackModal')
- wrapper
- .find(IconButton)
- .find('.header-feedbacks-button')
- .first()
- .simulate('click')
+ await userEvent.click(screen.getAllByRole('button')[0])
expect(updateModalSpy).toHaveBeenCalledWith(true)
})
})
diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx
index db54fd2971edb157b4fc87cfa9f831477a09ef20..9eba353d66a8156dd0a837e4a749c8b2271de4c3 100644
--- a/src/components/Header/Header.tsx
+++ b/src/components/Header/Header.tsx
@@ -54,7 +54,7 @@ const Header = ({
}, [screenType, children, setHeaderHeight])
return (
- <div className="header" ref={header}>
+ <header ref={header}>
<div className="header-top">
<div className="header-content">
<div
@@ -100,7 +100,7 @@ const Header = ({
</div>
</div>
<div className="header-bar" />
- </div>
+ </header>
)
}
diff --git a/src/components/Header/__snapshots__/CozyBar.spec.tsx.snap b/src/components/Header/__snapshots__/CozyBar.spec.tsx.snap
index 203c46d610d5c449180df735cdf3d35d193f911e..62521bfb18e6bd75e9438a5e7a5c2d1dce331a96 100644
--- a/src/components/Header/__snapshots__/CozyBar.spec.tsx.snap
+++ b/src/components/Header/__snapshots__/CozyBar.spec.tsx.snap
@@ -1,878 +1,163 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`CozyBar component should be rendered correctly without without left arrow 1`] = `
-<Provider
- store={
- Object {
- "clearActions": [Function],
- "dispatch": [Function],
- "getActions": [Function],
- "getState": [Function],
- "replaceReducer": [Function],
- "subscribe": [Function],
- }
- }
->
- <CozyBar>
- <BarCenter>
- <div
- className="cozy-bar"
- >
- <span
- className="app-title"
- >
- common.title_app
- </span>
- </div>
- </BarCenter>
- <BarRight>
- <StyledIconButton
- aria-label="header.accessibility.button_open_feedbacks"
- className="cv-button"
- icon="test-file-stub"
- onClick={[Function]}
- sized={22}
+<div>
+ <div
+ class="cozy-bar"
+ >
+ <span
+ class="app-title"
+ >
+ common.title_app
+ </span>
+ </div>
+ <button
+ aria-label="header.accessibility.button_open_feedbacks"
+ class="MuiButtonBase-root MuiIconButton-root WithStyles(ForwardRef(IconButton))-root-1 cv-button"
+ tabindex="0"
+ type="button"
+ >
+ <span
+ class="MuiIconButton-label"
+ >
+ <svg
+ aria-hidden="true"
+ class="styles__icon___23x3R"
+ height="22"
+ width="22"
>
- <WithStyles(WithStyles(ForwardRef(IconButton)))
- aria-label="header.accessibility.button_open_feedbacks"
- className="cv-button"
- onClick={[Function]}
- >
- <WithStyles(ForwardRef(IconButton))
- aria-label="header.accessibility.button_open_feedbacks"
- className="cv-button"
- classes={
- Object {
- "root": "WithStyles(ForwardRef(IconButton))-root-1",
- }
- }
- onClick={[Function]}
- >
- <ForwardRef(IconButton)
- aria-label="header.accessibility.button_open_feedbacks"
- className="cv-button"
- classes={
- Object {
- "colorInherit": "MuiIconButton-colorInherit",
- "colorPrimary": "MuiIconButton-colorPrimary",
- "colorSecondary": "MuiIconButton-colorSecondary",
- "disabled": "Mui-disabled",
- "edgeEnd": "MuiIconButton-edgeEnd",
- "edgeStart": "MuiIconButton-edgeStart",
- "label": "MuiIconButton-label",
- "root": "MuiIconButton-root WithStyles(ForwardRef(IconButton))-root-1",
- "sizeSmall": "MuiIconButton-sizeSmall",
- }
- }
- onClick={[Function]}
- >
- <WithStyles(ForwardRef(ButtonBase))
- aria-label="header.accessibility.button_open_feedbacks"
- centerRipple={true}
- className="MuiIconButton-root WithStyles(ForwardRef(IconButton))-root-1 cv-button"
- disabled={false}
- focusRipple={true}
- onClick={[Function]}
- >
- <ForwardRef(ButtonBase)
- aria-label="header.accessibility.button_open_feedbacks"
- centerRipple={true}
- className="MuiIconButton-root WithStyles(ForwardRef(IconButton))-root-1 cv-button"
- classes={
- Object {
- "disabled": "Mui-disabled",
- "focusVisible": "Mui-focusVisible",
- "root": "MuiButtonBase-root",
- }
- }
- disabled={false}
- focusRipple={true}
- onClick={[Function]}
- >
- <button
- aria-label="header.accessibility.button_open_feedbacks"
- className="MuiButtonBase-root MuiIconButton-root WithStyles(ForwardRef(IconButton))-root-1 cv-button"
- disabled={false}
- onBlur={[Function]}
- onClick={[Function]}
- onDragLeave={[Function]}
- onFocus={[Function]}
- onKeyDown={[Function]}
- onKeyUp={[Function]}
- onMouseDown={[Function]}
- onMouseLeave={[Function]}
- onMouseUp={[Function]}
- onTouchEnd={[Function]}
- onTouchMove={[Function]}
- onTouchStart={[Function]}
- tabIndex={0}
- type="button"
- >
- <span
- className="MuiIconButton-label"
- >
- <StyledIcon
- icon="test-file-stub"
- size={22}
- >
- <Icon
- aria-hidden={true}
- icon="test-file-stub"
- size={22}
- spin={false}
- >
- <Component
- aria-hidden={true}
- className="styles__icon___23x3R"
- height={22}
- style={Object {}}
- width={22}
- >
- <svg
- aria-hidden={true}
- className="styles__icon___23x3R"
- height={22}
- style={Object {}}
- width={22}
- >
- <use
- xlinkHref="#test-file-stub"
- />
- </svg>
- </Component>
- </Icon>
- </StyledIcon>
- </span>
- <WithStyles(memo)
- center={true}
- >
- <ForwardRef(TouchRipple)
- center={true}
- classes={
- Object {
- "child": "MuiTouchRipple-child",
- "childLeaving": "MuiTouchRipple-childLeaving",
- "childPulsate": "MuiTouchRipple-childPulsate",
- "ripple": "MuiTouchRipple-ripple",
- "ripplePulsate": "MuiTouchRipple-ripplePulsate",
- "rippleVisible": "MuiTouchRipple-rippleVisible",
- "root": "MuiTouchRipple-root",
- }
- }
- >
- <span
- className="MuiTouchRipple-root"
- >
- <TransitionGroup
- childFactory={[Function]}
- component={null}
- exit={true}
- />
- </span>
- </ForwardRef(TouchRipple)>
- </WithStyles(memo)>
- </button>
- </ForwardRef(ButtonBase)>
- </WithStyles(ForwardRef(ButtonBase))>
- </ForwardRef(IconButton)>
- </WithStyles(ForwardRef(IconButton))>
- </WithStyles(WithStyles(ForwardRef(IconButton)))>
- </StyledIconButton>
- </BarRight>
- </CozyBar>
-</Provider>
-`;
-
-exports[`CozyBar component should not be rendered with screen type different from mobile 1`] = `
-<Provider
- store={
- Object {
- "clearActions": [Function],
- "dispatch": [Function],
- "getActions": [Function],
- "getState": [Function],
- "replaceReducer": [Function],
- "subscribe": [Function],
- }
- }
->
- <CozyBar />
-</Provider>
+ <use
+ xlink:href="#test-file-stub"
+ />
+ </svg>
+ </span>
+ <span
+ class="MuiTouchRipple-root"
+ />
+ </button>
+</div>
`;
exports[`CozyBar component should test displayBackArrow should call backFunction() when back button is clicked and function is provided 1`] = `
-<Provider
- store={
- Object {
- "clearActions": [Function],
- "dispatch": [Function],
- "getActions": [Function],
- "getState": [Function],
- "replaceReducer": [Function],
- "subscribe": [Function],
- }
- }
->
- <CozyBar
- backFunction={[MockFunction]}
- displayBackArrow={true}
+<div>
+ <button
+ aria-label="header.accessibility.button_back"
+ class="MuiButtonBase-root MuiIconButton-root WithStyles(ForwardRef(IconButton))-root-3 cv-button"
+ tabindex="0"
+ type="button"
>
- <BarLeft>
- <StyledIconButton
- aria-label="header.accessibility.button_back"
- className="cv-button"
- icon="test-file-stub"
- onClick={[Function]}
- >
- <WithStyles(WithStyles(ForwardRef(IconButton)))
- aria-label="header.accessibility.button_back"
- className="cv-button"
- onClick={[Function]}
- >
- <WithStyles(ForwardRef(IconButton))
- aria-label="header.accessibility.button_back"
- className="cv-button"
- classes={
- Object {
- "root": "WithStyles(ForwardRef(IconButton))-root-1",
- }
- }
- onClick={[Function]}
- >
- <ForwardRef(IconButton)
- aria-label="header.accessibility.button_back"
- className="cv-button"
- classes={
- Object {
- "colorInherit": "MuiIconButton-colorInherit",
- "colorPrimary": "MuiIconButton-colorPrimary",
- "colorSecondary": "MuiIconButton-colorSecondary",
- "disabled": "Mui-disabled",
- "edgeEnd": "MuiIconButton-edgeEnd",
- "edgeStart": "MuiIconButton-edgeStart",
- "label": "MuiIconButton-label",
- "root": "MuiIconButton-root WithStyles(ForwardRef(IconButton))-root-1",
- "sizeSmall": "MuiIconButton-sizeSmall",
- }
- }
- onClick={[Function]}
- >
- <WithStyles(ForwardRef(ButtonBase))
- aria-label="header.accessibility.button_back"
- centerRipple={true}
- className="MuiIconButton-root WithStyles(ForwardRef(IconButton))-root-1 cv-button"
- disabled={false}
- focusRipple={true}
- onClick={[Function]}
- >
- <ForwardRef(ButtonBase)
- aria-label="header.accessibility.button_back"
- centerRipple={true}
- className="MuiIconButton-root WithStyles(ForwardRef(IconButton))-root-1 cv-button"
- classes={
- Object {
- "disabled": "Mui-disabled",
- "focusVisible": "Mui-focusVisible",
- "root": "MuiButtonBase-root",
- }
- }
- disabled={false}
- focusRipple={true}
- onClick={[Function]}
- >
- <button
- aria-label="header.accessibility.button_back"
- className="MuiButtonBase-root MuiIconButton-root WithStyles(ForwardRef(IconButton))-root-1 cv-button"
- disabled={false}
- onBlur={[Function]}
- onClick={[Function]}
- onDragLeave={[Function]}
- onFocus={[Function]}
- onKeyDown={[Function]}
- onKeyUp={[Function]}
- onMouseDown={[Function]}
- onMouseLeave={[Function]}
- onMouseUp={[Function]}
- onTouchEnd={[Function]}
- onTouchMove={[Function]}
- onTouchStart={[Function]}
- tabIndex={0}
- type="button"
- >
- <span
- className="MuiIconButton-label"
- >
- <StyledIcon
- icon="test-file-stub"
- size={16}
- >
- <Icon
- aria-hidden={true}
- icon="test-file-stub"
- size={16}
- spin={false}
- >
- <Component
- aria-hidden={true}
- className="styles__icon___23x3R"
- height={16}
- style={Object {}}
- width={16}
- >
- <svg
- aria-hidden={true}
- className="styles__icon___23x3R"
- height={16}
- style={Object {}}
- width={16}
- >
- <use
- xlinkHref="#test-file-stub"
- />
- </svg>
- </Component>
- </Icon>
- </StyledIcon>
- </span>
- <WithStyles(memo)
- center={true}
- >
- <ForwardRef(TouchRipple)
- center={true}
- classes={
- Object {
- "child": "MuiTouchRipple-child",
- "childLeaving": "MuiTouchRipple-childLeaving",
- "childPulsate": "MuiTouchRipple-childPulsate",
- "ripple": "MuiTouchRipple-ripple",
- "ripplePulsate": "MuiTouchRipple-ripplePulsate",
- "rippleVisible": "MuiTouchRipple-rippleVisible",
- "root": "MuiTouchRipple-root",
- }
- }
- >
- <span
- className="MuiTouchRipple-root"
- >
- <TransitionGroup
- childFactory={[Function]}
- component={null}
- exit={true}
- />
- </span>
- </ForwardRef(TouchRipple)>
- </WithStyles(memo)>
- </button>
- </ForwardRef(ButtonBase)>
- </WithStyles(ForwardRef(ButtonBase))>
- </ForwardRef(IconButton)>
- </WithStyles(ForwardRef(IconButton))>
- </WithStyles(WithStyles(ForwardRef(IconButton)))>
- </StyledIconButton>
- </BarLeft>
- <BarCenter>
- <div
- className="cozy-bar"
+ <span
+ class="MuiIconButton-label"
+ >
+ <svg
+ aria-hidden="true"
+ class="styles__icon___23x3R"
+ height="16"
+ width="16"
>
- <span
- className="app-title"
- >
- common.title_app
- </span>
- </div>
- </BarCenter>
- <BarRight>
- <StyledIconButton
- aria-label="header.accessibility.button_open_feedbacks"
- className="cv-button"
- icon="test-file-stub"
- onClick={[Function]}
- sized={22}
+ <use
+ xlink:href="#test-file-stub"
+ />
+ </svg>
+ </span>
+ <span
+ class="MuiTouchRipple-root"
+ />
+ </button>
+ <div
+ class="cozy-bar"
+ >
+ <span
+ class="app-title"
+ >
+ common.title_app
+ </span>
+ </div>
+ <button
+ aria-label="header.accessibility.button_open_feedbacks"
+ class="MuiButtonBase-root MuiIconButton-root WithStyles(ForwardRef(IconButton))-root-3 cv-button"
+ tabindex="0"
+ type="button"
+ >
+ <span
+ class="MuiIconButton-label"
+ >
+ <svg
+ aria-hidden="true"
+ class="styles__icon___23x3R"
+ height="22"
+ width="22"
>
- <WithStyles(WithStyles(ForwardRef(IconButton)))
- aria-label="header.accessibility.button_open_feedbacks"
- className="cv-button"
- onClick={[Function]}
- >
- <WithStyles(ForwardRef(IconButton))
- aria-label="header.accessibility.button_open_feedbacks"
- className="cv-button"
- classes={
- Object {
- "root": "WithStyles(ForwardRef(IconButton))-root-1",
- }
- }
- onClick={[Function]}
- >
- <ForwardRef(IconButton)
- aria-label="header.accessibility.button_open_feedbacks"
- className="cv-button"
- classes={
- Object {
- "colorInherit": "MuiIconButton-colorInherit",
- "colorPrimary": "MuiIconButton-colorPrimary",
- "colorSecondary": "MuiIconButton-colorSecondary",
- "disabled": "Mui-disabled",
- "edgeEnd": "MuiIconButton-edgeEnd",
- "edgeStart": "MuiIconButton-edgeStart",
- "label": "MuiIconButton-label",
- "root": "MuiIconButton-root WithStyles(ForwardRef(IconButton))-root-1",
- "sizeSmall": "MuiIconButton-sizeSmall",
- }
- }
- onClick={[Function]}
- >
- <WithStyles(ForwardRef(ButtonBase))
- aria-label="header.accessibility.button_open_feedbacks"
- centerRipple={true}
- className="MuiIconButton-root WithStyles(ForwardRef(IconButton))-root-1 cv-button"
- disabled={false}
- focusRipple={true}
- onClick={[Function]}
- >
- <ForwardRef(ButtonBase)
- aria-label="header.accessibility.button_open_feedbacks"
- centerRipple={true}
- className="MuiIconButton-root WithStyles(ForwardRef(IconButton))-root-1 cv-button"
- classes={
- Object {
- "disabled": "Mui-disabled",
- "focusVisible": "Mui-focusVisible",
- "root": "MuiButtonBase-root",
- }
- }
- disabled={false}
- focusRipple={true}
- onClick={[Function]}
- >
- <button
- aria-label="header.accessibility.button_open_feedbacks"
- className="MuiButtonBase-root MuiIconButton-root WithStyles(ForwardRef(IconButton))-root-1 cv-button"
- disabled={false}
- onBlur={[Function]}
- onClick={[Function]}
- onDragLeave={[Function]}
- onFocus={[Function]}
- onKeyDown={[Function]}
- onKeyUp={[Function]}
- onMouseDown={[Function]}
- onMouseLeave={[Function]}
- onMouseUp={[Function]}
- onTouchEnd={[Function]}
- onTouchMove={[Function]}
- onTouchStart={[Function]}
- tabIndex={0}
- type="button"
- >
- <span
- className="MuiIconButton-label"
- >
- <StyledIcon
- icon="test-file-stub"
- size={22}
- >
- <Icon
- aria-hidden={true}
- icon="test-file-stub"
- size={22}
- spin={false}
- >
- <Component
- aria-hidden={true}
- className="styles__icon___23x3R"
- height={22}
- style={Object {}}
- width={22}
- >
- <svg
- aria-hidden={true}
- className="styles__icon___23x3R"
- height={22}
- style={Object {}}
- width={22}
- >
- <use
- xlinkHref="#test-file-stub"
- />
- </svg>
- </Component>
- </Icon>
- </StyledIcon>
- </span>
- <WithStyles(memo)
- center={true}
- >
- <ForwardRef(TouchRipple)
- center={true}
- classes={
- Object {
- "child": "MuiTouchRipple-child",
- "childLeaving": "MuiTouchRipple-childLeaving",
- "childPulsate": "MuiTouchRipple-childPulsate",
- "ripple": "MuiTouchRipple-ripple",
- "ripplePulsate": "MuiTouchRipple-ripplePulsate",
- "rippleVisible": "MuiTouchRipple-rippleVisible",
- "root": "MuiTouchRipple-root",
- }
- }
- >
- <span
- className="MuiTouchRipple-root"
- >
- <TransitionGroup
- childFactory={[Function]}
- component={null}
- exit={true}
- />
- </span>
- </ForwardRef(TouchRipple)>
- </WithStyles(memo)>
- </button>
- </ForwardRef(ButtonBase)>
- </WithStyles(ForwardRef(ButtonBase))>
- </ForwardRef(IconButton)>
- </WithStyles(ForwardRef(IconButton))>
- </WithStyles(WithStyles(ForwardRef(IconButton)))>
- </StyledIconButton>
- </BarRight>
- </CozyBar>
-</Provider>
+ <use
+ xlink:href="#test-file-stub"
+ />
+ </svg>
+ </span>
+ <span
+ class="MuiTouchRipple-root"
+ />
+ </button>
+</div>
`;
exports[`CozyBar component should test displayBackArrow should call navigate(-1) when back button is clicked and no function is provided 1`] = `
-<Provider
- store={
- Object {
- "clearActions": [Function],
- "dispatch": [Function],
- "getActions": [Function],
- "getState": [Function],
- "replaceReducer": [Function],
- "subscribe": [Function],
- }
- }
->
- <CozyBar
- displayBackArrow={true}
+<div>
+ <button
+ aria-label="header.accessibility.button_back"
+ class="MuiButtonBase-root MuiIconButton-root WithStyles(ForwardRef(IconButton))-root-2 cv-button"
+ tabindex="0"
+ type="button"
>
- <BarLeft>
- <StyledIconButton
- aria-label="header.accessibility.button_back"
- className="cv-button"
- icon="test-file-stub"
- onClick={[Function]}
- >
- <WithStyles(WithStyles(ForwardRef(IconButton)))
- aria-label="header.accessibility.button_back"
- className="cv-button"
- onClick={[Function]}
- >
- <WithStyles(ForwardRef(IconButton))
- aria-label="header.accessibility.button_back"
- className="cv-button"
- classes={
- Object {
- "root": "WithStyles(ForwardRef(IconButton))-root-1",
- }
- }
- onClick={[Function]}
- >
- <ForwardRef(IconButton)
- aria-label="header.accessibility.button_back"
- className="cv-button"
- classes={
- Object {
- "colorInherit": "MuiIconButton-colorInherit",
- "colorPrimary": "MuiIconButton-colorPrimary",
- "colorSecondary": "MuiIconButton-colorSecondary",
- "disabled": "Mui-disabled",
- "edgeEnd": "MuiIconButton-edgeEnd",
- "edgeStart": "MuiIconButton-edgeStart",
- "label": "MuiIconButton-label",
- "root": "MuiIconButton-root WithStyles(ForwardRef(IconButton))-root-1",
- "sizeSmall": "MuiIconButton-sizeSmall",
- }
- }
- onClick={[Function]}
- >
- <WithStyles(ForwardRef(ButtonBase))
- aria-label="header.accessibility.button_back"
- centerRipple={true}
- className="MuiIconButton-root WithStyles(ForwardRef(IconButton))-root-1 cv-button"
- disabled={false}
- focusRipple={true}
- onClick={[Function]}
- >
- <ForwardRef(ButtonBase)
- aria-label="header.accessibility.button_back"
- centerRipple={true}
- className="MuiIconButton-root WithStyles(ForwardRef(IconButton))-root-1 cv-button"
- classes={
- Object {
- "disabled": "Mui-disabled",
- "focusVisible": "Mui-focusVisible",
- "root": "MuiButtonBase-root",
- }
- }
- disabled={false}
- focusRipple={true}
- onClick={[Function]}
- >
- <button
- aria-label="header.accessibility.button_back"
- className="MuiButtonBase-root MuiIconButton-root WithStyles(ForwardRef(IconButton))-root-1 cv-button"
- disabled={false}
- onBlur={[Function]}
- onClick={[Function]}
- onDragLeave={[Function]}
- onFocus={[Function]}
- onKeyDown={[Function]}
- onKeyUp={[Function]}
- onMouseDown={[Function]}
- onMouseLeave={[Function]}
- onMouseUp={[Function]}
- onTouchEnd={[Function]}
- onTouchMove={[Function]}
- onTouchStart={[Function]}
- tabIndex={0}
- type="button"
- >
- <span
- className="MuiIconButton-label"
- >
- <StyledIcon
- icon="test-file-stub"
- size={16}
- >
- <Icon
- aria-hidden={true}
- icon="test-file-stub"
- size={16}
- spin={false}
- >
- <Component
- aria-hidden={true}
- className="styles__icon___23x3R"
- height={16}
- style={Object {}}
- width={16}
- >
- <svg
- aria-hidden={true}
- className="styles__icon___23x3R"
- height={16}
- style={Object {}}
- width={16}
- >
- <use
- xlinkHref="#test-file-stub"
- />
- </svg>
- </Component>
- </Icon>
- </StyledIcon>
- </span>
- <WithStyles(memo)
- center={true}
- >
- <ForwardRef(TouchRipple)
- center={true}
- classes={
- Object {
- "child": "MuiTouchRipple-child",
- "childLeaving": "MuiTouchRipple-childLeaving",
- "childPulsate": "MuiTouchRipple-childPulsate",
- "ripple": "MuiTouchRipple-ripple",
- "ripplePulsate": "MuiTouchRipple-ripplePulsate",
- "rippleVisible": "MuiTouchRipple-rippleVisible",
- "root": "MuiTouchRipple-root",
- }
- }
- >
- <span
- className="MuiTouchRipple-root"
- >
- <TransitionGroup
- childFactory={[Function]}
- component={null}
- exit={true}
- />
- </span>
- </ForwardRef(TouchRipple)>
- </WithStyles(memo)>
- </button>
- </ForwardRef(ButtonBase)>
- </WithStyles(ForwardRef(ButtonBase))>
- </ForwardRef(IconButton)>
- </WithStyles(ForwardRef(IconButton))>
- </WithStyles(WithStyles(ForwardRef(IconButton)))>
- </StyledIconButton>
- </BarLeft>
- <BarCenter>
- <div
- className="cozy-bar"
+ <span
+ class="MuiIconButton-label"
+ >
+ <svg
+ aria-hidden="true"
+ class="styles__icon___23x3R"
+ height="16"
+ width="16"
>
- <span
- className="app-title"
- >
- common.title_app
- </span>
- </div>
- </BarCenter>
- <BarRight>
- <StyledIconButton
- aria-label="header.accessibility.button_open_feedbacks"
- className="cv-button"
- icon="test-file-stub"
- onClick={[Function]}
- sized={22}
+ <use
+ xlink:href="#test-file-stub"
+ />
+ </svg>
+ </span>
+ <span
+ class="MuiTouchRipple-root"
+ />
+ </button>
+ <div
+ class="cozy-bar"
+ >
+ <span
+ class="app-title"
+ >
+ common.title_app
+ </span>
+ </div>
+ <button
+ aria-label="header.accessibility.button_open_feedbacks"
+ class="MuiButtonBase-root MuiIconButton-root WithStyles(ForwardRef(IconButton))-root-2 cv-button"
+ tabindex="0"
+ type="button"
+ >
+ <span
+ class="MuiIconButton-label"
+ >
+ <svg
+ aria-hidden="true"
+ class="styles__icon___23x3R"
+ height="22"
+ width="22"
>
- <WithStyles(WithStyles(ForwardRef(IconButton)))
- aria-label="header.accessibility.button_open_feedbacks"
- className="cv-button"
- onClick={[Function]}
- >
- <WithStyles(ForwardRef(IconButton))
- aria-label="header.accessibility.button_open_feedbacks"
- className="cv-button"
- classes={
- Object {
- "root": "WithStyles(ForwardRef(IconButton))-root-1",
- }
- }
- onClick={[Function]}
- >
- <ForwardRef(IconButton)
- aria-label="header.accessibility.button_open_feedbacks"
- className="cv-button"
- classes={
- Object {
- "colorInherit": "MuiIconButton-colorInherit",
- "colorPrimary": "MuiIconButton-colorPrimary",
- "colorSecondary": "MuiIconButton-colorSecondary",
- "disabled": "Mui-disabled",
- "edgeEnd": "MuiIconButton-edgeEnd",
- "edgeStart": "MuiIconButton-edgeStart",
- "label": "MuiIconButton-label",
- "root": "MuiIconButton-root WithStyles(ForwardRef(IconButton))-root-1",
- "sizeSmall": "MuiIconButton-sizeSmall",
- }
- }
- onClick={[Function]}
- >
- <WithStyles(ForwardRef(ButtonBase))
- aria-label="header.accessibility.button_open_feedbacks"
- centerRipple={true}
- className="MuiIconButton-root WithStyles(ForwardRef(IconButton))-root-1 cv-button"
- disabled={false}
- focusRipple={true}
- onClick={[Function]}
- >
- <ForwardRef(ButtonBase)
- aria-label="header.accessibility.button_open_feedbacks"
- centerRipple={true}
- className="MuiIconButton-root WithStyles(ForwardRef(IconButton))-root-1 cv-button"
- classes={
- Object {
- "disabled": "Mui-disabled",
- "focusVisible": "Mui-focusVisible",
- "root": "MuiButtonBase-root",
- }
- }
- disabled={false}
- focusRipple={true}
- onClick={[Function]}
- >
- <button
- aria-label="header.accessibility.button_open_feedbacks"
- className="MuiButtonBase-root MuiIconButton-root WithStyles(ForwardRef(IconButton))-root-1 cv-button"
- disabled={false}
- onBlur={[Function]}
- onClick={[Function]}
- onDragLeave={[Function]}
- onFocus={[Function]}
- onKeyDown={[Function]}
- onKeyUp={[Function]}
- onMouseDown={[Function]}
- onMouseLeave={[Function]}
- onMouseUp={[Function]}
- onTouchEnd={[Function]}
- onTouchMove={[Function]}
- onTouchStart={[Function]}
- tabIndex={0}
- type="button"
- >
- <span
- className="MuiIconButton-label"
- >
- <StyledIcon
- icon="test-file-stub"
- size={22}
- >
- <Icon
- aria-hidden={true}
- icon="test-file-stub"
- size={22}
- spin={false}
- >
- <Component
- aria-hidden={true}
- className="styles__icon___23x3R"
- height={22}
- style={Object {}}
- width={22}
- >
- <svg
- aria-hidden={true}
- className="styles__icon___23x3R"
- height={22}
- style={Object {}}
- width={22}
- >
- <use
- xlinkHref="#test-file-stub"
- />
- </svg>
- </Component>
- </Icon>
- </StyledIcon>
- </span>
- <WithStyles(memo)
- center={true}
- >
- <ForwardRef(TouchRipple)
- center={true}
- classes={
- Object {
- "child": "MuiTouchRipple-child",
- "childLeaving": "MuiTouchRipple-childLeaving",
- "childPulsate": "MuiTouchRipple-childPulsate",
- "ripple": "MuiTouchRipple-ripple",
- "ripplePulsate": "MuiTouchRipple-ripplePulsate",
- "rippleVisible": "MuiTouchRipple-rippleVisible",
- "root": "MuiTouchRipple-root",
- }
- }
- >
- <span
- className="MuiTouchRipple-root"
- >
- <TransitionGroup
- childFactory={[Function]}
- component={null}
- exit={true}
- />
- </span>
- </ForwardRef(TouchRipple)>
- </WithStyles(memo)>
- </button>
- </ForwardRef(ButtonBase)>
- </WithStyles(ForwardRef(ButtonBase))>
- </ForwardRef(IconButton)>
- </WithStyles(ForwardRef(IconButton))>
- </WithStyles(WithStyles(ForwardRef(IconButton)))>
- </StyledIconButton>
- </BarRight>
- </CozyBar>
-</Provider>
+ <use
+ xlink:href="#test-file-stub"
+ />
+ </svg>
+ </span>
+ <span
+ class="MuiTouchRipple-root"
+ />
+ </button>
+</div>
`;
diff --git a/src/components/Header/__snapshots__/Header.spec.tsx.snap b/src/components/Header/__snapshots__/Header.spec.tsx.snap
new file mode 100644
index 0000000000000000000000000000000000000000..3bd7905849ab67ceeb3159018c8bfc69fbecec99
--- /dev/null
+++ b/src/components/Header/__snapshots__/Header.spec.tsx.snap
@@ -0,0 +1,53 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Header component should be rendered correctly 1`] = `
+<div>
+ <header>
+ <div
+ class="header-top"
+ >
+ <div
+ class="header-content"
+ >
+ <div
+ class="header-content-top"
+ >
+ <div
+ class="header-text-desktop text-14-normal-uppercase"
+ >
+ <span>
+ mockKey
+ </span>
+ </div>
+ <button
+ aria-label="header.accessibility.button_open_feedbacks"
+ class="MuiButtonBase-root MuiIconButton-root header-feedbacks-button"
+ tabindex="0"
+ type="button"
+ >
+ <span
+ class="MuiIconButton-label"
+ >
+ <svg
+ class="styles__icon___23x3R"
+ height="40"
+ width="40"
+ >
+ <use
+ xlink:href="#test-file-stub"
+ />
+ </svg>
+ </span>
+ <span
+ class="MuiTouchRipple-root"
+ />
+ </button>
+ </div>
+ </div>
+ </div>
+ <div
+ class="header-bar"
+ />
+ </header>
+</div>
+`;
diff --git a/src/components/Header/header.scss b/src/components/Header/header.scss
index 755efde668cf828c91db1a5f96cfc3e8ae0eeb7f..2817543e8f42e3858b513f7c97993c650d0304b1 100644
--- a/src/components/Header/header.scss
+++ b/src/components/Header/header.scss
@@ -2,7 +2,7 @@
@import 'src/styles/base/color';
@import 'src/styles/base/z-index';
-.header {
+header {
display: flex;
align-items: center;
flex-direction: column;
diff --git a/src/components/Konnector/ConnectionNotFound/ConnectionNotFound.spec.tsx b/src/components/Konnector/ConnectionNotFound/ConnectionNotFound.spec.tsx
index b156f88bdaa38b1f97e2ebba58900d9ccf3f8d21..1d4cf06cba60acf8e3a9e649986e10dd30811097 100644
--- a/src/components/Konnector/ConnectionNotFound/ConnectionNotFound.spec.tsx
+++ b/src/components/Konnector/ConnectionNotFound/ConnectionNotFound.spec.tsx
@@ -1,5 +1,5 @@
-import Button from '@material-ui/core/Button'
-import { mount, shallow } from 'enzyme'
+import { render, screen } from '@testing-library/react'
+import { userEvent } from '@testing-library/user-event'
import React from 'react'
import ConnectionNotFound from './ConnectionNotFound'
@@ -7,18 +7,16 @@ describe('ConnectionNotFound component test', () => {
const konnectorSlug = 'enedissgegrandlyon'
it('should correctly render connection not found', () => {
- const result = shallow(
+ const { container } = render(
<ConnectionNotFound konnectorSlug={konnectorSlug} />
- ).getElement()
- expect(result).toMatchSnapshot()
+ )
+ expect(container).toMatchSnapshot()
})
- it('should open konnector url when button is clicked', () => {
+ it('should open konnector url when button is clicked', async () => {
global.open = jest.fn()
-
- const wrapper = mount(<ConnectionNotFound konnectorSlug={konnectorSlug} />)
- const submitStyledButton = wrapper.find(Button)
- submitStyledButton.simulate('click')
+ render(<ConnectionNotFound konnectorSlug={konnectorSlug} />)
+ await userEvent.click(screen.getByRole('button'))
expect(global.open).toHaveBeenCalledWith(
'http://localhost/#/discover/enedissgegrandlyon',
diff --git a/src/components/Konnector/ConnectionNotFound/ConnectionNotFound.tsx b/src/components/Konnector/ConnectionNotFound/ConnectionNotFound.tsx
index 360ad1a8d9c8118bc209a58774d20c04ef3c4d98..705650d96257952fbe9bdc17083621fc2bd41aed 100644
--- a/src/components/Konnector/ConnectionNotFound/ConnectionNotFound.tsx
+++ b/src/components/Konnector/ConnectionNotFound/ConnectionNotFound.tsx
@@ -20,10 +20,7 @@ const ConnectionNotFound = ({ konnectorSlug }: { konnectorSlug: string }) => {
<Button
aria-label={t('konnector_form.accessibility.button_install')}
onClick={openKonnectorURL}
- classes={{
- root: 'btn-highlight',
- label: 'text-16-bold',
- }}
+ className="btnPrimary"
>
{t('konnector_form.button_install')}
</Button>
diff --git a/src/components/Konnector/ConnectionNotFound/__snapshots__/ConnectionNotFound.spec.tsx.snap b/src/components/Konnector/ConnectionNotFound/__snapshots__/ConnectionNotFound.spec.tsx.snap
index 28084da1b97ad11cb18382ecc6c3710e8ca2b099..e3e1d23e59102345c596a30982a453feb8d8b667 100644
--- a/src/components/Konnector/ConnectionNotFound/__snapshots__/ConnectionNotFound.spec.tsx.snap
+++ b/src/components/Konnector/ConnectionNotFound/__snapshots__/ConnectionNotFound.spec.tsx.snap
@@ -1,30 +1,35 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`ConnectionNotFound component test should correctly render connection not found 1`] = `
-<div
- className="knotfound"
->
+<div>
<div
- className="knotfound-text"
+ class="knotfound"
>
-
- konnector_form.not_installed
- </div>
- <div
- className="knotfound-button"
- >
- <WithStyles(ForwardRef(Button))
- aria-label="konnector_form.accessibility.button_install"
- classes={
- Object {
- "label": "text-16-bold",
- "root": "btn-highlight",
- }
- }
- onClick={[Function]}
+ <div
+ class="knotfound-text"
+ >
+
+ konnector_form.not_installed
+ </div>
+ <div
+ class="knotfound-button"
>
- konnector_form.button_install
- </WithStyles(ForwardRef(Button))>
+ <button
+ aria-label="konnector_form.accessibility.button_install"
+ class="MuiButtonBase-root MuiButton-root MuiButton-text btnPrimary"
+ tabindex="0"
+ type="button"
+ >
+ <span
+ class="MuiButton-label"
+ >
+ konnector_form.button_install
+ </span>
+ <span
+ class="MuiTouchRipple-root"
+ />
+ </button>
+ </div>
</div>
</div>
`;
diff --git a/src/components/Konnector/ConnectionResult/ConnectionResult.tsx b/src/components/Konnector/ConnectionResult/ConnectionResult.tsx
index d94ae43114627d6ea6231cbd247b0ec658594289..68df71f6e59980537ba63f42bdaa26726ad1159f 100644
--- a/src/components/Konnector/ConnectionResult/ConnectionResult.tsx
+++ b/src/components/Konnector/ConnectionResult/ConnectionResult.tsx
@@ -269,10 +269,7 @@ const ConnectionResult = ({
: deleteAccountsAndTriggers
}
disabled={updating || deleting}
- classes={{
- root: 'btn-secondary-positive',
- label: 'text-16-normal',
- }}
+ className="btnSecondary"
>
{deleting
? t('konnector_form.loading')
@@ -287,10 +284,7 @@ const ConnectionResult = ({
: updateKonnector
}
disabled={updating || deleting}
- classes={{
- root: 'btn-highlight',
- label: 'text-16-bold',
- }}
+ className="btnPrimary"
>
{updating && <Loader color="black" />}
{!updating && (
diff --git a/src/components/Konnector/ConnectionResult/connectionResult.scss b/src/components/Konnector/ConnectionResult/connectionResult.scss
index 05a0a13650e640b6295f2b26d81cca837f743ada..412a5edd936fb53f21b819ac537e962ebc8763d8 100644
--- a/src/components/Konnector/ConnectionResult/connectionResult.scss
+++ b/src/components/Konnector/ConnectionResult/connectionResult.scss
@@ -57,12 +57,8 @@
}
.inline-buttons {
+ margin-top: 1rem;
display: flex;
flex-flow: row nowrap;
gap: 1rem;
- button.btn-secondary-positive {
- span:first-child {
- color: $white !important;
- }
- }
}
diff --git a/src/components/Konnector/KonnectorModal.spec.tsx b/src/components/Konnector/KonnectorModal.spec.tsx
index a2ce56da75df6eb2bca2f18a74ef98dc44d5a355..cc72f6b71ae36a23d8600d26eecd55e8dcfacbc0 100644
--- a/src/components/Konnector/KonnectorModal.spec.tsx
+++ b/src/components/Konnector/KonnectorModal.spec.tsx
@@ -1,11 +1,9 @@
-import { Button } from '@material-ui/core'
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
import { FluidType, KonnectorError } from 'enums'
-import { mount } from 'enzyme'
-import toJson from 'enzyme-to-json'
import React from 'react'
import { Provider } from 'react-redux'
import { createMockEcolyoStore } from 'tests/__mocks__/store'
-import { waitForComponentToPaint } from 'tests/__mocks__/testUtils'
import KonnectorModal from './KonnectorModal'
const mockHandleCloseClick = jest.fn()
@@ -16,7 +14,7 @@ describe('KonnectorModal component', () => {
jest.clearAllMocks()
})
it('should be rendered correctly', () => {
- const wrapper = mount(
+ const { baseElement } = render(
<Provider store={store}>
<KonnectorModal
open={true}
@@ -31,10 +29,10 @@ describe('KonnectorModal component', () => {
/>
</Provider>
)
- expect(toJson(wrapper)).toMatchSnapshot()
+ expect(baseElement).toMatchSnapshot()
})
it('should be with updating text', () => {
- const wrapper = mount(
+ const { baseElement } = render(
<Provider store={store}>
<KonnectorModal
open={true}
@@ -49,10 +47,12 @@ describe('KonnectorModal component', () => {
/>
</Provider>
)
- expect(wrapper.find('.kmodal-waiting-text').exists()).toBeTruthy()
+ expect(
+ baseElement.getElementsByClassName('kmodal-waiting-text')[0]
+ ).toBeTruthy()
})
it('should be correctly closed', async () => {
- const wrapper = mount(
+ render(
<Provider store={store}>
<KonnectorModal
open={true}
@@ -67,11 +67,11 @@ describe('KonnectorModal component', () => {
/>
</Provider>
)
- wrapper.find(Button).simulate('click')
+ await userEvent.click(screen.getByRole('button'))
expect(mockHandleCloseClick).toHaveBeenCalled()
})
it('should render login error', async () => {
- const wrapper = mount(
+ const { baseElement } = render(
<Provider store={store}>
<KonnectorModal
open={true}
@@ -86,10 +86,12 @@ describe('KonnectorModal component', () => {
/>
</Provider>
)
- expect(wrapper.find('.kce-picto-txt').exists()).toBeTruthy()
+ expect(
+ baseElement.getElementsByClassName('kce-picto-txt')[0]
+ ).toBeInTheDocument()
})
it('should render unknown error', async () => {
- const wrapper = mount(
+ const { baseElement } = render(
<Provider store={store}>
<KonnectorModal
open={true}
@@ -104,10 +106,12 @@ describe('KonnectorModal component', () => {
/>
</Provider>
)
- expect(wrapper.find('.err-data-2').exists()).toBeTruthy()
+ expect(
+ baseElement.getElementsByClassName('err-data-2')[0]
+ ).toBeInTheDocument()
})
it('should render update error', async () => {
- const wrapper = mount(
+ const { baseElement } = render(
<Provider store={store}>
<KonnectorModal
open={true}
@@ -122,7 +126,8 @@ describe('KonnectorModal component', () => {
/>
</Provider>
)
- await waitForComponentToPaint(wrapper)
- expect(wrapper.find('.waiting-text').exists()).toBeTruthy()
+ expect(
+ baseElement.getElementsByClassName('waiting-text')[0]
+ ).toBeInTheDocument()
})
})
diff --git a/src/components/Konnector/KonnectorModal.tsx b/src/components/Konnector/KonnectorModal.tsx
index 6039a2c8cc6ef3328c902055e67180d70262192c..9817b2864295223d368ff67baa6611b879e6c72f 100644
--- a/src/components/Konnector/KonnectorModal.tsx
+++ b/src/components/Konnector/KonnectorModal.tsx
@@ -1,3 +1,4 @@
+import { Button } from '@material-ui/core'
import Dialog from '@material-ui/core/Dialog'
import EnedisIcon from 'assets/icons/ico/consent-outdated-enedis.svg'
import errorIcon from 'assets/icons/visu/data-nok.svg'
@@ -199,12 +200,12 @@ const KonnectorModal = ({
{fluidType === FluidType.ELECTRICITY && (
<>
{!showCommonErrors && (
- <span
- className="commonErrors"
+ <Button
+ className="btnText commonErrors"
onClick={() => setShowCommonErrors(true)}
>
{t('konnector_modal.show_common_error')}
- </span>
+ </Button>
)}
{showCommonErrors && (
<div
@@ -266,7 +267,6 @@ const KonnectorModal = ({
error !== KonnectorError.CHALLENGE_ASKED && (
// DEFAULT CASE
<div className="konnector-config">
- {console.log('errortype', error)}
<Icon icon={errorIcon} size={48} />
<div className="kce-picto-txt text-20-bold">
{t('konnector_modal.error_txt')}
diff --git a/src/components/Konnector/KonnectorModalFooter.spec.tsx b/src/components/Konnector/KonnectorModalFooter.spec.tsx
index 9cae908979dd046567044598190bbda60fa0cb97..6812381cb58d828a5f1feba671e84ffa0998a615 100644
--- a/src/components/Konnector/KonnectorModalFooter.spec.tsx
+++ b/src/components/Konnector/KonnectorModalFooter.spec.tsx
@@ -1,13 +1,11 @@
-import { Button } from '@material-ui/core'
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
import { ERROR_EVENT } from 'cozy-harvest-lib/dist/models/flowEvents'
import { KonnectorError } from 'enums'
-import { mount } from 'enzyme'
-import toJson from 'enzyme-to-json'
import React from 'react'
import { Provider } from 'react-redux'
import { accountsData } from 'tests/__mocks__/accountsData.mock'
import { createMockEcolyoStore } from 'tests/__mocks__/store'
-import { waitForComponentToPaint } from 'tests/__mocks__/testUtils'
import KonnectorModalFooter from './KonnectorModalFooter'
const mockedNavigate = jest.fn()
@@ -24,7 +22,7 @@ describe('KonnectorModalFooter component', () => {
})
it('should be rendered correctly', () => {
- const wrapper = mount(
+ const { container } = render(
<Provider store={store}>
<KonnectorModalFooter
state={null}
@@ -36,11 +34,11 @@ describe('KonnectorModalFooter component', () => {
/>
</Provider>
)
- expect(toJson(wrapper)).toMatchSnapshot()
+ expect(container).toMatchSnapshot()
})
it('should render "understood" for enedis sge when postal code not supported (USER_ACTION_NEEDED)', () => {
- const wrapper = mount(
+ render(
<Provider store={store}>
<KonnectorModalFooter
state={ERROR_EVENT}
@@ -52,13 +50,13 @@ describe('KonnectorModalFooter component', () => {
/>
</Provider>
)
- expect(wrapper.find(Button).text()).toBe(
- 'konnector_modal.button_understood'
- )
+ expect(
+ screen.getByText('konnector_modal.button_understood')
+ ).toBeInTheDocument()
})
it('should render "try again" for enedis sge when address / name / pdl are not matching (LOGIN_FAILED)', () => {
- const wrapper = mount(
+ render(
<Provider store={store}>
<KonnectorModalFooter
state={ERROR_EVENT}
@@ -70,11 +68,13 @@ describe('KonnectorModalFooter component', () => {
/>
</Provider>
)
- expect(wrapper.find(Button).text()).toBe('konnector_modal.button_try_again')
+ expect(
+ screen.getByText('konnector_modal.button_try_again')
+ ).toBeInTheDocument()
})
it('should render "later" and "Verify infos" for enedis sge encountering an error on contract (TERMS_VERSION_MISMATCH)', () => {
- const wrapper = mount(
+ render(
<Provider store={store}>
<KonnectorModalFooter
state={ERROR_EVENT}
@@ -86,12 +86,12 @@ describe('KonnectorModalFooter component', () => {
/>
</Provider>
)
- expect(wrapper.find(Button).at(0).text()).toBe('Plus tard')
- expect(wrapper.find(Button).at(1).text()).toBe('Vérifier les infos')
+ expect(screen.getByText('Plus tard')).toBeInTheDocument()
+ expect(screen.getByText('Vérifier les infos')).toBeInTheDocument()
})
- it('should close the modal', () => {
- const wrapper = mount(
+ it('should close the modal', async () => {
+ render(
<Provider store={store}>
<KonnectorModalFooter
state={ERROR_EVENT}
@@ -103,11 +103,11 @@ describe('KonnectorModalFooter component', () => {
/>
</Provider>
)
- wrapper.find(Button).first().simulate('click')
+ await userEvent.click(screen.getByRole('button'))
expect(mockClose).toHaveBeenCalled()
})
it('should go back to login', async () => {
- const wrapper = mount(
+ render(
<Provider store={store}>
<KonnectorModalFooter
state={ERROR_EVENT}
@@ -119,13 +119,12 @@ describe('KonnectorModalFooter component', () => {
/>
</Provider>
)
- wrapper.find(Button).at(1).simulate('click')
- await waitForComponentToPaint(wrapper)
+ await userEvent.click(screen.getAllByRole('button')[1])
expect(mockDelete).toHaveBeenCalled()
expect(mockedNavigate).toHaveBeenCalledTimes(1)
})
it('should reset sge account and go back to login', async () => {
- const wrapper = mount(
+ render(
<Provider store={store}>
<KonnectorModalFooter
state={ERROR_EVENT}
@@ -137,13 +136,12 @@ describe('KonnectorModalFooter component', () => {
/>
</Provider>
)
- wrapper.find(Button).at(1).simulate('click')
- await waitForComponentToPaint(wrapper)
+ await userEvent.click(screen.getAllByRole('button')[1])
expect(mockDelete).toHaveBeenCalled()
expect(mockedNavigate).toHaveBeenCalledTimes(1)
})
- it('should not reset account if no account', () => {
- const wrapper = mount(
+ it('should not reset account if no account', async () => {
+ render(
<Provider store={store}>
<KonnectorModalFooter
state={ERROR_EVENT}
@@ -155,7 +153,7 @@ describe('KonnectorModalFooter component', () => {
/>
</Provider>
)
- wrapper.find(Button).at(1).simulate('click')
+ await userEvent.click(screen.getAllByRole('button')[1])
expect(mockedNavigate).toHaveBeenCalledTimes(1)
expect(mockDelete).toHaveBeenCalledTimes(0)
})
diff --git a/src/components/Konnector/KonnectorModalFooter.tsx b/src/components/Konnector/KonnectorModalFooter.tsx
index 9405b038e22fbac3605931574f127403719a90b5..64fbdb88ee1dcb59740fd8c92071280679adc496 100644
--- a/src/components/Konnector/KonnectorModalFooter.tsx
+++ b/src/components/Konnector/KonnectorModalFooter.tsx
@@ -50,11 +50,7 @@ const KonnectorModalFooter = ({
<Button
aria-label={t('konnector_modal.accessibility.button_close')}
onClick={() => handleCloseClick(state === SUCCESS_EVENT)}
- classes={{
- root: 'btn-highlight',
- label: 'text-16-bold',
- }}
- style={{ height: '40px' }}
+ className="btnPrimary"
>
<div>{t('konnector_modal.button_validate')}</div>
</Button>
@@ -68,11 +64,7 @@ const KonnectorModalFooter = ({
<Button
aria-label={t('konnector_modal.accessibility.button_close')}
onClick={() => handleCloseClick(state === SUCCESS_EVENT)}
- classes={{
- root: 'btn-highlight',
- label: 'text-16-bold',
- }}
- style={{ height: '40px' }}
+ className="btnPrimary"
>
<div>{t('konnector_modal.button_understood')}</div>
</Button>
@@ -84,11 +76,7 @@ const KonnectorModalFooter = ({
<Button
aria-label={t('konnector_modal.accessibility.button_close')}
onClick={() => handleCloseClick(state === SUCCESS_EVENT)}
- classes={{
- root: 'btn-highlight',
- label: 'text-16-bold',
- }}
- style={{ height: '40px' }}
+ className="btnPrimary"
>
<div>{t('konnector_modal.button_try_again')}</div>
</Button>
@@ -99,11 +87,7 @@ const KonnectorModalFooter = ({
<Button
aria-label={t('konnector_modal.accessibility.button_close')}
onClick={() => handleCloseClick(state === SUCCESS_EVENT)}
- classes={{
- root: 'btn-secondary-negative',
- label: 'text-16-bold',
- }}
- style={{ height: '40px' }}
+ className="btnSecondary"
>
<div>Plus tard</div>
</Button>
@@ -112,11 +96,7 @@ const KonnectorModalFooter = ({
onClick={
!isUpdating ? handleSGELoginRetry : handleResetSGEAccount
}
- classes={{
- root: 'btn-highlight',
- label: 'text-16-bold',
- }}
- style={{ height: '40px' }}
+ className="btnPrimary"
>
<div>{!isUpdating ? 'Vérifier les infos' : 'Jy vais'}</div>
</Button>
diff --git a/src/components/Konnector/KonnectorViewerCard.tsx b/src/components/Konnector/KonnectorViewerCard.tsx
index e0e44542b1259656304f6124cbffa61466ccc539..a4e3b2d97bd8bd8c344dcbcbd410577c649e1519 100644
--- a/src/components/Konnector/KonnectorViewerCard.tsx
+++ b/src/components/Konnector/KonnectorViewerCard.tsx
@@ -233,9 +233,8 @@ const KonnectorViewerCard = ({
)
}
// const partnersInfo = await partnersInfoService.getPartnersInfo()
- const updatedFluidStatus = await fluidService.getFluidStatus(
- partnersInfo
- )
+ const updatedFluidStatus =
+ await fluidService.getFluidStatus(partnersInfo)
dispatch(setFluidStatus(updatedFluidStatus))
}
@@ -309,13 +308,7 @@ const KonnectorViewerCard = ({
const getConnectionCard = useCallback(() => {
if (showOfflineData && !account) {
return (
- <Button
- classes={{
- root: 'btn-highlight',
- label: 'text-16-bold',
- }}
- onClick={toggleModalConnection}
- >
+ <Button className="btnPrimary" onClick={toggleModalConnection}>
{t(`auth.${getKonnectorSlug(fluidType)}.connect`)}
</Button>
)
diff --git a/src/components/Konnector/KonnectorViewerList.spec.tsx b/src/components/Konnector/KonnectorViewerList.spec.tsx
index 505bc5610081f730a5c63d4d6869eedcd2285cdb..810bd21bbc68243dd8c51fc1405db101f94b022b 100644
--- a/src/components/Konnector/KonnectorViewerList.spec.tsx
+++ b/src/components/Konnector/KonnectorViewerList.spec.tsx
@@ -1,9 +1,8 @@
-import { mount } from 'enzyme'
-import toJson from 'enzyme-to-json'
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
import React from 'react'
import { Provider } from 'react-redux'
import { createMockEcolyoStore } from 'tests/__mocks__/store'
-import { waitForComponentToPaint } from 'tests/__mocks__/testUtils'
import KonnectorViewerList from './KonnectorViewerList'
const mockedNavigate = jest.fn()
@@ -16,21 +15,20 @@ describe('KonnectorViewerList component', () => {
const store = createMockEcolyoStore()
it('should be rendered correctly', async () => {
- const wrapper = mount(
+ const { container } = render(
<Provider store={store}>
<KonnectorViewerList />
</Provider>
)
- await waitForComponentToPaint(wrapper)
- expect(toJson(wrapper)).toMatchSnapshot()
+ expect(container).toMatchSnapshot()
})
it('should click on card and nav to fluid', async () => {
- const wrapper = mount(
+ render(
<Provider store={store}>
<KonnectorViewerList />
</Provider>
)
- wrapper.find('.connection-card').first().simulate('click')
+ await userEvent.click(screen.getAllByRole('button')[0])
expect(mockedNavigate).toHaveBeenCalled()
})
})
diff --git a/src/components/Konnector/KonnectorViewerList.tsx b/src/components/Konnector/KonnectorViewerList.tsx
index 58fc207425d78446bcb6801b2abe404adc0423bb..7865473a25658a37d73e444dea7c78d4736d2069 100644
--- a/src/components/Konnector/KonnectorViewerList.tsx
+++ b/src/components/Konnector/KonnectorViewerList.tsx
@@ -2,7 +2,6 @@ import StyledCard from 'components/CommonKit/Card/StyledCard'
import { useI18n } from 'cozy-ui/transpiled/react/I18n'
import Icon from 'cozy-ui/transpiled/react/Icon'
import { FluidType } from 'enums'
-import { FluidStatus } from 'models'
import React from 'react'
import { useNavigate } from 'react-router-dom'
import { useAppSelector } from 'store/hooks'
@@ -20,9 +19,9 @@ const KonnectorViewerList = () => {
return (
<div className="konnectorsList">
- {fluidStatus.map((fluidStatusItem: FluidStatus, key: number) => (
+ {fluidStatus.map(fluidStatusItem => (
<StyledCard
- key={key}
+ key={fluidStatusItem.fluidType}
className="connection-card"
onClick={() => goToFluid(fluidStatusItem.fluidType)}
fluidType={fluidStatusItem.fluidType}
diff --git a/src/components/Konnector/__snapshots__/KonnectorModal.spec.tsx.snap b/src/components/Konnector/__snapshots__/KonnectorModal.spec.tsx.snap
index f36f95c46eea6dec72f6361eeb29895eb943ae1c..e4f491c9845a8ee9dd936e89f86e8bdf7412c2ec 100644
--- a/src/components/Konnector/__snapshots__/KonnectorModal.spec.tsx.snap
+++ b/src/components/Konnector/__snapshots__/KonnectorModal.spec.tsx.snap
@@ -1,981 +1,200 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`KonnectorModal component should be rendered correctly 1`] = `
-<Provider
- store={
- Object {
- "clearActions": [Function],
- "dispatch": [Function],
- "getActions": [Function],
- "getState": [Function],
- "replaceReducer": [Function],
- "subscribe": [Function],
- }
- }
+<body
+ style="padding-right: 0px; overflow: hidden;"
>
- <KonnectorModal
- account={null}
- error={null}
- fluidType={0}
- handleAccountDeletion={[MockFunction]}
- handleCloseClick={[MockFunction]}
- isLogging={false}
- isUpdating={false}
- open={true}
- state={null}
+ <div
+ aria-hidden="true"
+ />
+ <div
+ class="MuiDialog-root modal-root"
+ role="presentation"
+ style="position: fixed; z-index: 1300; right: 0px; bottom: 0px; top: 0px; left: 0px;"
>
- <WithStyles(ForwardRef(Dialog))
- aria-labelledby="accessibility-title"
- classes={
- Object {
- "paper": "modal-paper",
- "root": "modal-root",
- }
- }
- disableEscapeKeyDown={true}
- onClose={[Function]}
- open={true}
+ <div
+ aria-hidden="true"
+ class="MuiBackdrop-root"
+ style="opacity: 1; webkit-transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"
+ />
+ <div
+ data-test="sentinelStart"
+ tabindex="0"
+ />
+ <div
+ class="MuiDialog-container MuiDialog-scrollPaper"
+ role="none presentation"
+ style="opacity: 1; webkit-transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"
+ tabindex="-1"
>
- <ForwardRef(Dialog)
+ <div
aria-labelledby="accessibility-title"
- classes={
- Object {
- "container": "MuiDialog-container",
- "paper": "MuiDialog-paper modal-paper",
- "paperFullScreen": "MuiDialog-paperFullScreen",
- "paperFullWidth": "MuiDialog-paperFullWidth",
- "paperScrollBody": "MuiDialog-paperScrollBody",
- "paperScrollPaper": "MuiDialog-paperScrollPaper",
- "paperWidthFalse": "MuiDialog-paperWidthFalse",
- "paperWidthLg": "MuiDialog-paperWidthLg",
- "paperWidthMd": "MuiDialog-paperWidthMd",
- "paperWidthSm": "MuiDialog-paperWidthSm",
- "paperWidthXl": "MuiDialog-paperWidthXl",
- "paperWidthXs": "MuiDialog-paperWidthXs",
- "root": "MuiDialog-root modal-root",
- "scrollBody": "MuiDialog-scrollBody",
- "scrollPaper": "MuiDialog-scrollPaper",
- }
- }
- disableEscapeKeyDown={true}
- onClose={[Function]}
- open={true}
+ class="MuiPaper-root MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm MuiPaper-elevation24 MuiPaper-rounded"
+ role="dialog"
>
- <ForwardRef(Modal)
- BackdropComponent={
- Object {
- "$$typeof": Symbol(react.forward_ref),
- "Naked": Object {
- "$$typeof": Symbol(react.forward_ref),
- "propTypes": Object {
- "children": [Function],
- "className": [Function],
- "classes": [Function],
- "invisible": [Function],
- "open": [Function],
- "transitionDuration": [Function],
- },
- "render": [Function],
- },
- "displayName": "WithStyles(ForwardRef(Backdrop))",
- "options": Object {
- "defaultTheme": Object {
- "breakpoints": Object {
- "between": [Function],
- "down": [Function],
- "keys": Array [
- "xs",
- "sm",
- "md",
- "lg",
- "xl",
- ],
- "only": [Function],
- "up": [Function],
- "values": Object {
- "lg": 1280,
- "md": 960,
- "sm": 600,
- "xl": 1920,
- "xs": 0,
- },
- "width": [Function],
- },
- "direction": "ltr",
- "mixins": Object {
- "gutters": [Function],
- "toolbar": Object {
- "@media (min-width:0px) and (orientation: landscape)": Object {
- "minHeight": 48,
- },
- "@media (min-width:600px)": Object {
- "minHeight": 64,
- },
- "minHeight": 56,
- },
- },
- "overrides": Object {},
- "palette": Object {
- "action": Object {
- "activatedOpacity": 0.12,
- "active": "rgba(0, 0, 0, 0.54)",
- "disabled": "rgba(0, 0, 0, 0.26)",
- "disabledBackground": "rgba(0, 0, 0, 0.12)",
- "disabledOpacity": 0.38,
- "focus": "rgba(0, 0, 0, 0.12)",
- "focusOpacity": 0.12,
- "hover": "rgba(0, 0, 0, 0.04)",
- "hoverOpacity": 0.04,
- "selected": "rgba(0, 0, 0, 0.08)",
- "selectedOpacity": 0.08,
- },
- "augmentColor": [Function],
- "background": Object {
- "default": "#fafafa",
- "paper": "#fff",
- },
- "common": Object {
- "black": "#000",
- "white": "#fff",
- },
- "contrastThreshold": 3,
- "divider": "rgba(0, 0, 0, 0.12)",
- "error": Object {
- "contrastText": "#fff",
- "dark": "#d32f2f",
- "light": "#e57373",
- "main": "#f44336",
- },
- "getContrastText": [Function],
- "grey": Object {
- "100": "#f5f5f5",
- "200": "#eeeeee",
- "300": "#e0e0e0",
- "400": "#bdbdbd",
- "50": "#fafafa",
- "500": "#9e9e9e",
- "600": "#757575",
- "700": "#616161",
- "800": "#424242",
- "900": "#212121",
- "A100": "#d5d5d5",
- "A200": "#aaaaaa",
- "A400": "#303030",
- "A700": "#616161",
- },
- "info": Object {
- "contrastText": "#fff",
- "dark": "#1976d2",
- "light": "#64b5f6",
- "main": "#2196f3",
- },
- "primary": Object {
- "contrastText": "#fff",
- "dark": "#303f9f",
- "light": "#7986cb",
- "main": "#3f51b5",
- },
- "secondary": Object {
- "contrastText": "#fff",
- "dark": "#c51162",
- "light": "#ff4081",
- "main": "#f50057",
- },
- "success": Object {
- "contrastText": "rgba(0, 0, 0, 0.87)",
- "dark": "#388e3c",
- "light": "#81c784",
- "main": "#4caf50",
- },
- "text": Object {
- "disabled": "rgba(0, 0, 0, 0.38)",
- "hint": "rgba(0, 0, 0, 0.38)",
- "primary": "rgba(0, 0, 0, 0.87)",
- "secondary": "rgba(0, 0, 0, 0.54)",
- },
- "tonalOffset": 0.2,
- "type": "light",
- "warning": Object {
- "contrastText": "rgba(0, 0, 0, 0.87)",
- "dark": "#f57c00",
- "light": "#ffb74d",
- "main": "#ff9800",
- },
- },
- "props": Object {},
- "shadows": Array [
- "none",
- "0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12)",
- "0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12)",
- "0px 3px 3px -2px rgba(0,0,0,0.2),0px 3px 4px 0px rgba(0,0,0,0.14),0px 1px 8px 0px rgba(0,0,0,0.12)",
- "0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12)",
- "0px 3px 5px -1px rgba(0,0,0,0.2),0px 5px 8px 0px rgba(0,0,0,0.14),0px 1px 14px 0px rgba(0,0,0,0.12)",
- "0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12)",
- "0px 4px 5px -2px rgba(0,0,0,0.2),0px 7px 10px 1px rgba(0,0,0,0.14),0px 2px 16px 1px rgba(0,0,0,0.12)",
- "0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12)",
- "0px 5px 6px -3px rgba(0,0,0,0.2),0px 9px 12px 1px rgba(0,0,0,0.14),0px 3px 16px 2px rgba(0,0,0,0.12)",
- "0px 6px 6px -3px rgba(0,0,0,0.2),0px 10px 14px 1px rgba(0,0,0,0.14),0px 4px 18px 3px rgba(0,0,0,0.12)",
- "0px 6px 7px -4px rgba(0,0,0,0.2),0px 11px 15px 1px rgba(0,0,0,0.14),0px 4px 20px 3px rgba(0,0,0,0.12)",
- "0px 7px 8px -4px rgba(0,0,0,0.2),0px 12px 17px 2px rgba(0,0,0,0.14),0px 5px 22px 4px rgba(0,0,0,0.12)",
- "0px 7px 8px -4px rgba(0,0,0,0.2),0px 13px 19px 2px rgba(0,0,0,0.14),0px 5px 24px 4px rgba(0,0,0,0.12)",
- "0px 7px 9px -4px rgba(0,0,0,0.2),0px 14px 21px 2px rgba(0,0,0,0.14),0px 5px 26px 4px rgba(0,0,0,0.12)",
- "0px 8px 9px -5px rgba(0,0,0,0.2),0px 15px 22px 2px rgba(0,0,0,0.14),0px 6px 28px 5px rgba(0,0,0,0.12)",
- "0px 8px 10px -5px rgba(0,0,0,0.2),0px 16px 24px 2px rgba(0,0,0,0.14),0px 6px 30px 5px rgba(0,0,0,0.12)",
- "0px 8px 11px -5px rgba(0,0,0,0.2),0px 17px 26px 2px rgba(0,0,0,0.14),0px 6px 32px 5px rgba(0,0,0,0.12)",
- "0px 9px 11px -5px rgba(0,0,0,0.2),0px 18px 28px 2px rgba(0,0,0,0.14),0px 7px 34px 6px rgba(0,0,0,0.12)",
- "0px 9px 12px -6px rgba(0,0,0,0.2),0px 19px 29px 2px rgba(0,0,0,0.14),0px 7px 36px 6px rgba(0,0,0,0.12)",
- "0px 10px 13px -6px rgba(0,0,0,0.2),0px 20px 31px 3px rgba(0,0,0,0.14),0px 8px 38px 7px rgba(0,0,0,0.12)",
- "0px 10px 13px -6px rgba(0,0,0,0.2),0px 21px 33px 3px rgba(0,0,0,0.14),0px 8px 40px 7px rgba(0,0,0,0.12)",
- "0px 10px 14px -6px rgba(0,0,0,0.2),0px 22px 35px 3px rgba(0,0,0,0.14),0px 8px 42px 7px rgba(0,0,0,0.12)",
- "0px 11px 14px -7px rgba(0,0,0,0.2),0px 23px 36px 3px rgba(0,0,0,0.14),0px 9px 44px 8px rgba(0,0,0,0.12)",
- "0px 11px 15px -7px rgba(0,0,0,0.2),0px 24px 38px 3px rgba(0,0,0,0.14),0px 9px 46px 8px rgba(0,0,0,0.12)",
- ],
- "shape": Object {
- "borderRadius": 4,
- },
- "spacing": [Function],
- "transitions": Object {
- "create": [Function],
- "duration": Object {
- "complex": 375,
- "enteringScreen": 225,
- "leavingScreen": 195,
- "short": 250,
- "shorter": 200,
- "shortest": 150,
- "standard": 300,
- },
- "easing": Object {
- "easeIn": "cubic-bezier(0.4, 0, 1, 1)",
- "easeInOut": "cubic-bezier(0.4, 0, 0.2, 1)",
- "easeOut": "cubic-bezier(0.0, 0, 0.2, 1)",
- "sharp": "cubic-bezier(0.4, 0, 0.6, 1)",
- },
- "getAutoHeightDuration": [Function],
- },
- "typography": Object {
- "body1": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "1rem",
- "fontWeight": 400,
- "letterSpacing": "0.00938em",
- "lineHeight": 1.5,
- },
- "body2": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "0.875rem",
- "fontWeight": 400,
- "letterSpacing": "0.01071em",
- "lineHeight": 1.43,
- },
- "button": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "0.875rem",
- "fontWeight": 500,
- "letterSpacing": "0.02857em",
- "lineHeight": 1.75,
- "textTransform": "uppercase",
- },
- "caption": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "0.75rem",
- "fontWeight": 400,
- "letterSpacing": "0.03333em",
- "lineHeight": 1.66,
- },
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": 14,
- "fontWeightBold": 700,
- "fontWeightLight": 300,
- "fontWeightMedium": 500,
- "fontWeightRegular": 400,
- "h1": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "6rem",
- "fontWeight": 300,
- "letterSpacing": "-0.01562em",
- "lineHeight": 1.167,
- },
- "h2": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "3.75rem",
- "fontWeight": 300,
- "letterSpacing": "-0.00833em",
- "lineHeight": 1.2,
- },
- "h3": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "3rem",
- "fontWeight": 400,
- "letterSpacing": "0em",
- "lineHeight": 1.167,
- },
- "h4": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "2.125rem",
- "fontWeight": 400,
- "letterSpacing": "0.00735em",
- "lineHeight": 1.235,
- },
- "h5": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "1.5rem",
- "fontWeight": 400,
- "letterSpacing": "0em",
- "lineHeight": 1.334,
- },
- "h6": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "1.25rem",
- "fontWeight": 500,
- "letterSpacing": "0.0075em",
- "lineHeight": 1.6,
- },
- "htmlFontSize": 16,
- "overline": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "0.75rem",
- "fontWeight": 400,
- "letterSpacing": "0.08333em",
- "lineHeight": 2.66,
- "textTransform": "uppercase",
- },
- "pxToRem": [Function],
- "round": [Function],
- "subtitle1": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "1rem",
- "fontWeight": 400,
- "letterSpacing": "0.00938em",
- "lineHeight": 1.75,
- },
- "subtitle2": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "0.875rem",
- "fontWeight": 500,
- "letterSpacing": "0.00714em",
- "lineHeight": 1.57,
- },
- },
- "zIndex": Object {
- "appBar": 1100,
- "drawer": 1200,
- "mobileStepper": 1000,
- "modal": 1300,
- "snackbar": 1400,
- "speedDial": 1050,
- "tooltip": 1500,
- },
- },
- "name": "MuiBackdrop",
- },
- "propTypes": Object {
- "classes": [Function],
- "innerRef": [Function],
- },
- "render": [Function],
- "useStyles": [Function],
- }
- }
- BackdropProps={
- Object {
- "transitionDuration": Object {
- "enter": 225,
- "exit": 195,
- },
- }
- }
- className="MuiDialog-root modal-root"
- closeAfterTransition={true}
- disableEscapeKeyDown={true}
- onClose={[Function]}
- open={true}
+ <div
+ id="accessibility-title"
>
- <ForwardRef(Portal)
- disablePortal={false}
+ konnector_modal.accessibility.window_title
+ </div>
+ <div
+ class="kmodal-content"
+ >
+ <div
+ class="loader elec"
>
- <Portal
- containerInfo={
- <body
- style="padding-right: 0px; overflow: hidden;"
- >
- <div
- class="MuiDialog-root modal-root"
- role="presentation"
- style="position: fixed; z-index: 1300; right: 0px; bottom: 0px; top: 0px; left: 0px;"
- >
- <div
- aria-hidden="true"
- class="MuiBackdrop-root"
- style="opacity: 1; webkit-transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"
- />
- <div
- data-test="sentinelStart"
- tabindex="0"
- />
- <div
- class="MuiDialog-container MuiDialog-scrollPaper"
- role="none presentation"
- style="opacity: 1; webkit-transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"
- tabindex="-1"
- >
- <div
- aria-labelledby="accessibility-title"
- class="MuiPaper-root MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm MuiPaper-elevation24 MuiPaper-rounded"
- role="dialog"
- >
- <div
- id="accessibility-title"
- >
- konnector_modal.accessibility.window_title
- </div>
- <div
- class="kmodal-content"
- >
- <div
- class="loader elec"
- >
- <div
- aria-busy="true"
- aria-label="common.accessibility.loading"
- class="bars "
- title="common.accessibility.loading"
- >
- <div
- class="bar"
- />
- <div
- class="bar"
- />
- <div
- class="bar"
- />
- </div>
- </div>
- <div
- class="kmodal-content-text kmodal-content-text-center text-16-normal"
- >
- <div
- class="kc-wait text-16-bold"
- >
- konnector_modal.loading_data
- </div>
- </div>
- <div
- class="kmodal-waiting-text text-18-italic"
- >
- <div
- class="waiting-text show"
- >
- <p>
- La première fois cela peut prendre quelques minutes, par la suite, seulement quelques secondes.
- </p>
- <p />
- </div>
- <div
- class="waiting-text"
- >
- <p>
- Afin de limiter le temps de ce premier chargement, un historique réduit de vos consommations va être chargé. Vous aurez tout de même accès à un an d'historique dès à présent.
- </p>
- <p />
- </div>
- <div
- class="waiting-text"
- >
- <p>
- Demain matin, vous aurez accès à l'ensemble de vos données (jusqu'à trois ans d'historique).
- </p>
- <p />
- </div>
- <div
- class="waiting-text"
- >
- <p>
- Le saviez-vous ?
- </p>
- <p>
- Pour acheminer l’eau sur Lyon (Lugdunum !) l’aqueduc de Gier faisait 86 km à l’époque Romaine !
- </p>
- </div>
- <div
- class="waiting-text"
- >
- <p>
- Rien que de l’eau, de l’eau de pluie, de l’eau de la Métroooooo
- </p>
- <p>
- ♪♪
- </p>
- </div>
- <div
- class="waiting-text"
- >
- <p>
- Le saviez-vous ?
- </p>
- <p>
- Environ 90% de notre électricité provient de centrales de production hors de notre métropole.
- </p>
- </div>
- <div
- class="waiting-text"
- >
- <p>
- « Il y a de l’eau dans le gaz » …
- </p>
- <p>
- Avec Ecolyo c’est l’eau AVEC le gaz.
- </p>
- </div>
- <div
- class="waiting-text"
- >
- <p>
- Le saviez-vous ?
- </p>
- <p>
- La consommation énergétique résidentielle représente environ 30% de la consommation énergétique totale de notre territoire.
- </p>
- </div>
- <div
- class="waiting-text"
- >
- <p>
- Le saviez-vous ?
- </p>
- <p>
- La Métropole de Lyon a été territoire d’expérimentation Linky. Le compteur est présent sur notre territoire depuis plus de 10 ans !
- </p>
- </div>
- <div
- class="waiting-text"
- >
- <p>
- Le saviez-vous ?
- </p>
- <p>
- 10 minutes d'aération par jour permettent à notre habitat d’être plus sain, avec un air renouvelé, moins de polluants et l’évacuation de l’humidité qui stagne et qui nous oblige à consommer plus de chauffage.
- </p>
- </div>
- <div
- class="waiting-text"
- >
- <p>
- Le saviez-vous ?
- </p>
- <p>
- 2°C ! C’est la différence qu’on peut mesurer dans une rue bien arborée en comparaison d’une rue vide : la végétation est donc cruciale pour le bien être en ville l’été et pour limiter l’installation des climatiseurs.
- </p>
- </div>
- <div
- class="waiting-text"
- >
- <p>
- Il y a les bonnes pratiques de consommations énergétiques (et Ecolyo est là pour cela !) mais aussi et bien sûr, la rénovation.
- </p>
- <p>
- Le saviez-vous ? La loi énergie climat de 2019 impose que d’ici 2025, les bâtiments privés résidentiels les plus énergivores soient tous rénovés !
- </p>
- </div>
- </div>
- </div>
- </div>
- </div>
- <div
- data-test="sentinelEnd"
- tabindex="0"
- />
- </div>
- </body>
- }
+ <div
+ aria-busy="true"
+ aria-label="common.accessibility.loading"
+ class="bars"
+ role="progressbar"
+ title="common.accessibility.loading"
>
<div
- className="MuiDialog-root modal-root"
- onKeyDown={[Function]}
- role="presentation"
- style={
- Object {
- "bottom": 0,
- "left": 0,
- "position": "fixed",
- "right": 0,
- "top": 0,
- "zIndex": 1300,
- }
- }
- >
- <WithStyles(ForwardRef(Backdrop))
- onClick={[Function]}
- open={true}
- transitionDuration={
- Object {
- "enter": 225,
- "exit": 195,
- }
- }
- >
- <ForwardRef(Backdrop)
- classes={
- Object {
- "invisible": "MuiBackdrop-invisible",
- "root": "MuiBackdrop-root",
- }
- }
- onClick={[Function]}
- open={true}
- transitionDuration={
- Object {
- "enter": 225,
- "exit": 195,
- }
- }
- >
- <ForwardRef(Fade)
- in={true}
- onClick={[Function]}
- timeout={
- Object {
- "enter": 225,
- "exit": 195,
- }
- }
- >
- <Transition
- appear={true}
- enter={true}
- exit={true}
- in={true}
- mountOnEnter={false}
- onClick={[Function]}
- onEnter={[Function]}
- onEntered={[Function]}
- onEntering={[Function]}
- onExit={[Function]}
- onExited={[Function]}
- onExiting={[Function]}
- timeout={
- Object {
- "enter": 225,
- "exit": 195,
- }
- }
- unmountOnExit={false}
- >
- <div
- aria-hidden={true}
- className="MuiBackdrop-root"
- onClick={[Function]}
- style={
- Object {
- "opacity": 1,
- "visibility": undefined,
- }
- }
- />
- </Transition>
- </ForwardRef(Fade)>
- </ForwardRef(Backdrop)>
- </WithStyles(ForwardRef(Backdrop))>
- <Unstable_TrapFocus
- disableAutoFocus={false}
- disableEnforceFocus={false}
- disableRestoreFocus={false}
- getDoc={[Function]}
- isEnabled={[Function]}
- open={true}
- >
- <div
- data-test="sentinelStart"
- tabIndex={0}
- />
- <ForwardRef(Fade)
- appear={true}
- in={true}
- onEnter={[Function]}
- onExited={[Function]}
- role="none presentation"
- tabIndex="-1"
- timeout={
- Object {
- "enter": 225,
- "exit": 195,
- }
- }
- >
- <Transition
- appear={true}
- enter={true}
- exit={true}
- in={true}
- mountOnEnter={false}
- onEnter={[Function]}
- onEntered={[Function]}
- onEntering={[Function]}
- onExit={[Function]}
- onExited={[Function]}
- onExiting={[Function]}
- role="none presentation"
- tabIndex="-1"
- timeout={
- Object {
- "enter": 225,
- "exit": 195,
- }
- }
- unmountOnExit={false}
- >
- <div
- className="MuiDialog-container MuiDialog-scrollPaper"
- onMouseDown={[Function]}
- onMouseUp={[Function]}
- role="none presentation"
- style={
- Object {
- "opacity": 1,
- "visibility": undefined,
- }
- }
- tabIndex="-1"
- >
- <WithStyles(ForwardRef(Paper))
- aria-labelledby="accessibility-title"
- className="MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm"
- elevation={24}
- role="dialog"
- >
- <ForwardRef(Paper)
- aria-labelledby="accessibility-title"
- className="MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm"
- classes={
- Object {
- "elevation0": "MuiPaper-elevation0",
- "elevation1": "MuiPaper-elevation1",
- "elevation10": "MuiPaper-elevation10",
- "elevation11": "MuiPaper-elevation11",
- "elevation12": "MuiPaper-elevation12",
- "elevation13": "MuiPaper-elevation13",
- "elevation14": "MuiPaper-elevation14",
- "elevation15": "MuiPaper-elevation15",
- "elevation16": "MuiPaper-elevation16",
- "elevation17": "MuiPaper-elevation17",
- "elevation18": "MuiPaper-elevation18",
- "elevation19": "MuiPaper-elevation19",
- "elevation2": "MuiPaper-elevation2",
- "elevation20": "MuiPaper-elevation20",
- "elevation21": "MuiPaper-elevation21",
- "elevation22": "MuiPaper-elevation22",
- "elevation23": "MuiPaper-elevation23",
- "elevation24": "MuiPaper-elevation24",
- "elevation3": "MuiPaper-elevation3",
- "elevation4": "MuiPaper-elevation4",
- "elevation5": "MuiPaper-elevation5",
- "elevation6": "MuiPaper-elevation6",
- "elevation7": "MuiPaper-elevation7",
- "elevation8": "MuiPaper-elevation8",
- "elevation9": "MuiPaper-elevation9",
- "outlined": "MuiPaper-outlined",
- "root": "MuiPaper-root",
- "rounded": "MuiPaper-rounded",
- }
- }
- elevation={24}
- role="dialog"
- >
- <div
- aria-labelledby="accessibility-title"
- className="MuiPaper-root MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm MuiPaper-elevation24 MuiPaper-rounded"
- role="dialog"
- >
- <div
- id="accessibility-title"
- >
- konnector_modal.accessibility.window_title
- </div>
- <div
- className="kmodal-content"
- >
- <Loader
- fluidType={0}
- >
- <div
- className="loader elec"
- >
- <div
- aria-busy="true"
- aria-label="common.accessibility.loading"
- className="bars "
- title="common.accessibility.loading"
- >
- <div
- className="bar"
- />
- <div
- className="bar"
- />
- <div
- className="bar"
- />
- </div>
- </div>
- </Loader>
- <div
- className="kmodal-content-text kmodal-content-text-center text-16-normal"
- >
- <div
- className="kc-wait text-16-bold"
- >
- konnector_modal.loading_data
- </div>
- </div>
- <div
- className="kmodal-waiting-text text-18-italic"
- >
- <div
- className="waiting-text show"
- key=""
- >
- <p>
- La première fois cela peut prendre quelques minutes, par la suite, seulement quelques secondes.
- </p>
- <p />
- </div>
- <div
- className="waiting-text"
- key=""
- >
- <p>
- Afin de limiter le temps de ce premier chargement, un historique réduit de vos consommations va être chargé. Vous aurez tout de même accès à un an d'historique dès à présent.
- </p>
- <p />
- </div>
- <div
- className="waiting-text"
- key=""
- >
- <p>
- Demain matin, vous aurez accès à l'ensemble de vos données (jusqu'à trois ans d'historique).
- </p>
- <p />
- </div>
- <div
- className="waiting-text"
- key="Pour acheminer l’eau sur Lyon (Lugdunum !) l’aqueduc de Gier faisait 86 km à l’époque Romaine !"
- >
- <p>
- Le saviez-vous ?
- </p>
- <p>
- Pour acheminer l’eau sur Lyon (Lugdunum !) l’aqueduc de Gier faisait 86 km à l’époque Romaine !
- </p>
- </div>
- <div
- className="waiting-text"
- key="♪♪"
- >
- <p>
- Rien que de l’eau, de l’eau de pluie, de l’eau de la Métroooooo
- </p>
- <p>
- ♪♪
- </p>
- </div>
- <div
- className="waiting-text"
- key="Environ 90% de notre électricité provient de centrales de production hors de notre métropole."
- >
- <p>
- Le saviez-vous ?
- </p>
- <p>
- Environ 90% de notre électricité provient de centrales de production hors de notre métropole.
- </p>
- </div>
- <div
- className="waiting-text"
- key="Avec Ecolyo c’est l’eau AVEC le gaz."
- >
- <p>
- « Il y a de l’eau dans le gaz » …
- </p>
- <p>
- Avec Ecolyo c’est l’eau AVEC le gaz.
- </p>
- </div>
- <div
- className="waiting-text"
- key="La consommation énergétique résidentielle représente environ 30% de la consommation énergétique totale de notre territoire."
- >
- <p>
- Le saviez-vous ?
- </p>
- <p>
- La consommation énergétique résidentielle représente environ 30% de la consommation énergétique totale de notre territoire.
- </p>
- </div>
- <div
- className="waiting-text"
- key="La Métropole de Lyon a été territoire d’expérimentation Linky. Le compteur est présent sur notre territoire depuis plus de 10 ans !"
- >
- <p>
- Le saviez-vous ?
- </p>
- <p>
- La Métropole de Lyon a été territoire d’expérimentation Linky. Le compteur est présent sur notre territoire depuis plus de 10 ans !
- </p>
- </div>
- <div
- className="waiting-text"
- key="10 minutes d'aération par jour permettent à notre habitat d’être plus sain, avec un air renouvelé, moins de polluants et l’évacuation de l’humidité qui stagne et qui nous oblige à consommer plus de chauffage."
- >
- <p>
- Le saviez-vous ?
- </p>
- <p>
- 10 minutes d'aération par jour permettent à notre habitat d’être plus sain, avec un air renouvelé, moins de polluants et l’évacuation de l’humidité qui stagne et qui nous oblige à consommer plus de chauffage.
- </p>
- </div>
- <div
- className="waiting-text"
- key="2°C ! C’est la différence qu’on peut mesurer dans une rue bien arborée en comparaison d’une rue vide : la végétation est donc cruciale pour le bien être en ville l’été et pour limiter l’installation des climatiseurs."
- >
- <p>
- Le saviez-vous ?
- </p>
- <p>
- 2°C ! C’est la différence qu’on peut mesurer dans une rue bien arborée en comparaison d’une rue vide : la végétation est donc cruciale pour le bien être en ville l’été et pour limiter l’installation des climatiseurs.
- </p>
- </div>
- <div
- className="waiting-text"
- key="Le saviez-vous ? La loi énergie climat de 2019 impose que d’ici 2025, les bâtiments privés résidentiels les plus énergivores soient tous rénovés !"
- >
- <p>
- Il y a les bonnes pratiques de consommations énergétiques (et Ecolyo est là pour cela !) mais aussi et bien sûr, la rénovation.
- </p>
- <p>
- Le saviez-vous ? La loi énergie climat de 2019 impose que d’ici 2025, les bâtiments privés résidentiels les plus énergivores soient tous rénovés !
- </p>
- </div>
- </div>
- </div>
- </div>
- </ForwardRef(Paper)>
- </WithStyles(ForwardRef(Paper))>
- </div>
- </Transition>
- </ForwardRef(Fade)>
- <div
- data-test="sentinelEnd"
- tabIndex={0}
- />
- </Unstable_TrapFocus>
- </div>
- </Portal>
- </ForwardRef(Portal)>
- </ForwardRef(Modal)>
- </ForwardRef(Dialog)>
- </WithStyles(ForwardRef(Dialog))>
- </KonnectorModal>
-</Provider>
+ class="bar"
+ />
+ <div
+ class="bar"
+ />
+ <div
+ class="bar"
+ />
+ </div>
+ </div>
+ <div
+ class="kmodal-content-text kmodal-content-text-center text-16-normal"
+ >
+ <div
+ class="kc-wait text-16-bold"
+ >
+ konnector_modal.loading_data
+ </div>
+ </div>
+ <div
+ class="kmodal-waiting-text text-18-italic"
+ >
+ <div
+ class="waiting-text show"
+ >
+ <p>
+ La première fois cela peut prendre quelques minutes, par la suite, seulement quelques secondes.
+ </p>
+ <p />
+ </div>
+ <div
+ class="waiting-text"
+ >
+ <p>
+ Afin de limiter le temps de ce premier chargement, un historique réduit de vos consommations va être chargé. Vous aurez tout de même accès à un an d'historique dès à présent.
+ </p>
+ <p />
+ </div>
+ <div
+ class="waiting-text"
+ >
+ <p>
+ Demain matin, vous aurez accès à l'ensemble de vos données (jusqu'à trois ans d'historique).
+ </p>
+ <p />
+ </div>
+ <div
+ class="waiting-text"
+ >
+ <p>
+ Le saviez-vous ?
+ </p>
+ <p>
+ Pour acheminer l’eau sur Lyon (Lugdunum !) l’aqueduc de Gier faisait 86 km à l’époque Romaine !
+ </p>
+ </div>
+ <div
+ class="waiting-text"
+ >
+ <p>
+ Rien que de l’eau, de l’eau de pluie, de l’eau de la Métroooooo
+ </p>
+ <p>
+ ♪♪
+ </p>
+ </div>
+ <div
+ class="waiting-text"
+ >
+ <p>
+ Le saviez-vous ?
+ </p>
+ <p>
+ Environ 90% de notre électricité provient de centrales de production hors de notre métropole.
+ </p>
+ </div>
+ <div
+ class="waiting-text"
+ >
+ <p>
+ « Il y a de l’eau dans le gaz » …
+ </p>
+ <p>
+ Avec Ecolyo c’est l’eau AVEC le gaz.
+ </p>
+ </div>
+ <div
+ class="waiting-text"
+ >
+ <p>
+ Le saviez-vous ?
+ </p>
+ <p>
+ La consommation énergétique résidentielle représente environ 30% de la consommation énergétique totale de notre territoire.
+ </p>
+ </div>
+ <div
+ class="waiting-text"
+ >
+ <p>
+ Le saviez-vous ?
+ </p>
+ <p>
+ La Métropole de Lyon a été territoire d’expérimentation Linky. Le compteur est présent sur notre territoire depuis plus de 10 ans !
+ </p>
+ </div>
+ <div
+ class="waiting-text"
+ >
+ <p>
+ Le saviez-vous ?
+ </p>
+ <p>
+ 10 minutes d'aération par jour permettent à notre habitat d’être plus sain, avec un air renouvelé, moins de polluants et l’évacuation de l’humidité qui stagne et qui nous oblige à consommer plus de chauffage.
+ </p>
+ </div>
+ <div
+ class="waiting-text"
+ >
+ <p>
+ Le saviez-vous ?
+ </p>
+ <p>
+ 2°C ! C’est la différence qu’on peut mesurer dans une rue bien arborée en comparaison d’une rue vide : la végétation est donc cruciale pour le bien être en ville l’été et pour limiter l’installation des climatiseurs.
+ </p>
+ </div>
+ <div
+ class="waiting-text"
+ >
+ <p>
+ Il y a les bonnes pratiques de consommations énergétiques (et Ecolyo est là pour cela !) mais aussi et bien sûr, la rénovation.
+ </p>
+ <p>
+ Le saviez-vous ? La loi énergie climat de 2019 impose que d’ici 2025, les bâtiments privés résidentiels les plus énergivores soient tous rénovés !
+ </p>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div
+ data-test="sentinelEnd"
+ tabindex="0"
+ />
+ </div>
+</body>
`;
diff --git a/src/components/Konnector/__snapshots__/KonnectorModalFooter.spec.tsx.snap b/src/components/Konnector/__snapshots__/KonnectorModalFooter.spec.tsx.snap
index c54c118d73c5d35603892d5c7fd1eb25e25bbd49..a81d85ddeb9e35696c18657218226be8bbac1250 100644
--- a/src/components/Konnector/__snapshots__/KonnectorModalFooter.spec.tsx.snap
+++ b/src/components/Konnector/__snapshots__/KonnectorModalFooter.spec.tsx.snap
@@ -1,184 +1,23 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`KonnectorModalFooter component should be rendered correctly 1`] = `
-<Provider
- store={
- Object {
- "clearActions": [Function],
- "dispatch": [Function],
- "getActions": [Function],
- "getState": [Function],
- "replaceReducer": [Function],
- "subscribe": [Function],
- }
- }
->
- <KonnectorModalFooter
- account={null}
- error={null}
- handleAccountDeletion={[MockFunction]}
- handleCloseClick={[MockFunction]}
- isUpdating={false}
- state={null}
+<div>
+ <button
+ aria-label="konnector_modal.accessibility.button_close"
+ class="MuiButtonBase-root MuiButton-root MuiButton-text btnPrimary"
+ tabindex="0"
+ type="button"
>
- <WithStyles(ForwardRef(Button))
- aria-label="konnector_modal.accessibility.button_close"
- classes={
- Object {
- "label": "text-16-bold",
- "root": "btn-highlight",
- }
- }
- onClick={[Function]}
- style={
- Object {
- "height": "40px",
- }
- }
+ <span
+ class="MuiButton-label"
>
- <ForwardRef(Button)
- aria-label="konnector_modal.accessibility.button_close"
- classes={
- Object {
- "colorInherit": "MuiButton-colorInherit",
- "contained": "MuiButton-contained",
- "containedPrimary": "MuiButton-containedPrimary",
- "containedSecondary": "MuiButton-containedSecondary",
- "containedSizeLarge": "MuiButton-containedSizeLarge",
- "containedSizeSmall": "MuiButton-containedSizeSmall",
- "disableElevation": "MuiButton-disableElevation",
- "disabled": "Mui-disabled",
- "endIcon": "MuiButton-endIcon",
- "focusVisible": "Mui-focusVisible",
- "fullWidth": "MuiButton-fullWidth",
- "iconSizeLarge": "MuiButton-iconSizeLarge",
- "iconSizeMedium": "MuiButton-iconSizeMedium",
- "iconSizeSmall": "MuiButton-iconSizeSmall",
- "label": "MuiButton-label text-16-bold",
- "outlined": "MuiButton-outlined",
- "outlinedPrimary": "MuiButton-outlinedPrimary",
- "outlinedSecondary": "MuiButton-outlinedSecondary",
- "outlinedSizeLarge": "MuiButton-outlinedSizeLarge",
- "outlinedSizeSmall": "MuiButton-outlinedSizeSmall",
- "root": "MuiButton-root btn-highlight",
- "sizeLarge": "MuiButton-sizeLarge",
- "sizeSmall": "MuiButton-sizeSmall",
- "startIcon": "MuiButton-startIcon",
- "text": "MuiButton-text",
- "textPrimary": "MuiButton-textPrimary",
- "textSecondary": "MuiButton-textSecondary",
- "textSizeLarge": "MuiButton-textSizeLarge",
- "textSizeSmall": "MuiButton-textSizeSmall",
- }
- }
- onClick={[Function]}
- style={
- Object {
- "height": "40px",
- }
- }
- >
- <WithStyles(ForwardRef(ButtonBase))
- aria-label="konnector_modal.accessibility.button_close"
- className="MuiButton-root btn-highlight MuiButton-text"
- component="button"
- disabled={false}
- focusRipple={true}
- focusVisibleClassName="Mui-focusVisible"
- onClick={[Function]}
- style={
- Object {
- "height": "40px",
- }
- }
- type="button"
- >
- <ForwardRef(ButtonBase)
- aria-label="konnector_modal.accessibility.button_close"
- className="MuiButton-root btn-highlight MuiButton-text"
- classes={
- Object {
- "disabled": "Mui-disabled",
- "focusVisible": "Mui-focusVisible",
- "root": "MuiButtonBase-root",
- }
- }
- component="button"
- disabled={false}
- focusRipple={true}
- focusVisibleClassName="Mui-focusVisible"
- onClick={[Function]}
- style={
- Object {
- "height": "40px",
- }
- }
- type="button"
- >
- <button
- aria-label="konnector_modal.accessibility.button_close"
- className="MuiButtonBase-root MuiButton-root btn-highlight MuiButton-text"
- disabled={false}
- onBlur={[Function]}
- onClick={[Function]}
- onDragLeave={[Function]}
- onFocus={[Function]}
- onKeyDown={[Function]}
- onKeyUp={[Function]}
- onMouseDown={[Function]}
- onMouseLeave={[Function]}
- onMouseUp={[Function]}
- onTouchEnd={[Function]}
- onTouchMove={[Function]}
- onTouchStart={[Function]}
- style={
- Object {
- "height": "40px",
- }
- }
- tabIndex={0}
- type="button"
- >
- <span
- className="MuiButton-label text-16-bold"
- >
- <div>
- konnector_modal.button_validate
- </div>
- </span>
- <WithStyles(memo)
- center={false}
- >
- <ForwardRef(TouchRipple)
- center={false}
- classes={
- Object {
- "child": "MuiTouchRipple-child",
- "childLeaving": "MuiTouchRipple-childLeaving",
- "childPulsate": "MuiTouchRipple-childPulsate",
- "ripple": "MuiTouchRipple-ripple",
- "ripplePulsate": "MuiTouchRipple-ripplePulsate",
- "rippleVisible": "MuiTouchRipple-rippleVisible",
- "root": "MuiTouchRipple-root",
- }
- }
- >
- <span
- className="MuiTouchRipple-root"
- >
- <TransitionGroup
- childFactory={[Function]}
- component={null}
- exit={true}
- />
- </span>
- </ForwardRef(TouchRipple)>
- </WithStyles(memo)>
- </button>
- </ForwardRef(ButtonBase)>
- </WithStyles(ForwardRef(ButtonBase))>
- </ForwardRef(Button)>
- </WithStyles(ForwardRef(Button))>
- </KonnectorModalFooter>
-</Provider>
+ <div>
+ konnector_modal.button_validate
+ </div>
+ </span>
+ <span
+ class="MuiTouchRipple-root"
+ />
+ </button>
+</div>
`;
diff --git a/src/components/Konnector/__snapshots__/KonnectorViewerList.spec.tsx.snap b/src/components/Konnector/__snapshots__/KonnectorViewerList.spec.tsx.snap
index 6295440273087145768e2ea94b73c7b30703bec5..8fd0a567d1583af4d3f71d49a5ced00da6b26630 100644
--- a/src/components/Konnector/__snapshots__/KonnectorViewerList.spec.tsx.snap
+++ b/src/components/Konnector/__snapshots__/KonnectorViewerList.spec.tsx.snap
@@ -1,482 +1,100 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`KonnectorViewerList component should be rendered correctly 1`] = `
-<Provider
- store={
- Object {
- "clearActions": [Function],
- "dispatch": [Function],
- "getActions": [Function],
- "getState": [Function],
- "replaceReducer": [Function],
- "subscribe": [Function],
- }
- }
->
- <KonnectorViewerList>
- <div
- className="konnectorsList"
+<div>
+ <div
+ class="konnectorsList"
+ >
+ <button
+ class="MuiButtonBase-root MuiCardActionArea-root WithStyles(ForwardRef(CardActionArea))-root-1 connection-card electricity"
+ tabindex="0"
+ type="button"
>
- <StyledCard
- className="connection-card"
- fluidType={0}
- key="0"
- onClick={[Function]}
+ <div
+ class="MuiCardContent-root WithStyles(ForwardRef(CardContent))-root-2"
>
- <WithStyles(WithStyles(ForwardRef(CardActionArea)))
- className="connection-card electricity"
- onClick={[Function]}
+ <svg
+ class="styles__icon___23x3R"
+ height="36"
+ width="36"
>
- <WithStyles(ForwardRef(CardActionArea))
- className="connection-card electricity"
- classes={
- Object {
- "root": "WithStyles(ForwardRef(CardActionArea))-root-1",
- }
- }
- onClick={[Function]}
- >
- <ForwardRef(CardActionArea)
- className="connection-card electricity"
- classes={
- Object {
- "focusHighlight": "MuiCardActionArea-focusHighlight",
- "focusVisible": "Mui-focusVisible",
- "root": "MuiCardActionArea-root WithStyles(ForwardRef(CardActionArea))-root-1",
- }
- }
- onClick={[Function]}
- >
- <WithStyles(ForwardRef(ButtonBase))
- className="MuiCardActionArea-root WithStyles(ForwardRef(CardActionArea))-root-1 connection-card electricity"
- focusVisibleClassName="Mui-focusVisible"
- onClick={[Function]}
- >
- <ForwardRef(ButtonBase)
- className="MuiCardActionArea-root WithStyles(ForwardRef(CardActionArea))-root-1 connection-card electricity"
- classes={
- Object {
- "disabled": "Mui-disabled",
- "focusVisible": "Mui-focusVisible",
- "root": "MuiButtonBase-root",
- }
- }
- focusVisibleClassName="Mui-focusVisible"
- onClick={[Function]}
- >
- <button
- className="MuiButtonBase-root MuiCardActionArea-root WithStyles(ForwardRef(CardActionArea))-root-1 connection-card electricity"
- disabled={false}
- onBlur={[Function]}
- onClick={[Function]}
- onDragLeave={[Function]}
- onFocus={[Function]}
- onKeyDown={[Function]}
- onKeyUp={[Function]}
- onMouseDown={[Function]}
- onMouseLeave={[Function]}
- onMouseUp={[Function]}
- onTouchEnd={[Function]}
- onTouchMove={[Function]}
- onTouchStart={[Function]}
- tabIndex={0}
- type="button"
- >
- <WithStyles(WithStyles(ForwardRef(CardContent)))>
- <WithStyles(ForwardRef(CardContent))
- classes={
- Object {
- "root": "WithStyles(ForwardRef(CardContent))-root-2",
- }
- }
- >
- <ForwardRef(CardContent)
- classes={
- Object {
- "root": "MuiCardContent-root WithStyles(ForwardRef(CardContent))-root-2",
- }
- }
- >
- <div
- className="MuiCardContent-root WithStyles(ForwardRef(CardContent))-root-2"
- >
- <Icon
- icon="test-file-stub"
- size={36}
- spin={false}
- >
- <Component
- className="styles__icon___23x3R"
- height={36}
- style={Object {}}
- width={36}
- >
- <svg
- className="styles__icon___23x3R"
- height={36}
- style={Object {}}
- width={36}
- >
- <use
- xlinkHref="#test-file-stub"
- />
- </svg>
- </Component>
- </Icon>
- <div
- className="konnector-title text-18-bold electricity"
- >
- konnector_options.label_connect_to_electricity
- </div>
- </div>
- </ForwardRef(CardContent)>
- </WithStyles(ForwardRef(CardContent))>
- </WithStyles(WithStyles(ForwardRef(CardContent)))>
- <span
- className="MuiCardActionArea-focusHighlight"
- />
- <WithStyles(memo)
- center={false}
- >
- <ForwardRef(TouchRipple)
- center={false}
- classes={
- Object {
- "child": "MuiTouchRipple-child",
- "childLeaving": "MuiTouchRipple-childLeaving",
- "childPulsate": "MuiTouchRipple-childPulsate",
- "ripple": "MuiTouchRipple-ripple",
- "ripplePulsate": "MuiTouchRipple-ripplePulsate",
- "rippleVisible": "MuiTouchRipple-rippleVisible",
- "root": "MuiTouchRipple-root",
- }
- }
- >
- <span
- className="MuiTouchRipple-root"
- >
- <TransitionGroup
- childFactory={[Function]}
- component={null}
- exit={true}
- />
- </span>
- </ForwardRef(TouchRipple)>
- </WithStyles(memo)>
- </button>
- </ForwardRef(ButtonBase)>
- </WithStyles(ForwardRef(ButtonBase))>
- </ForwardRef(CardActionArea)>
- </WithStyles(ForwardRef(CardActionArea))>
- </WithStyles(WithStyles(ForwardRef(CardActionArea)))>
- </StyledCard>
- <StyledCard
- className="connection-card"
- fluidType={1}
- key="1"
- onClick={[Function]}
+ <use
+ xlink:href="#test-file-stub"
+ />
+ </svg>
+ <div
+ class="konnector-title text-18-bold electricity"
+ >
+ konnector_options.label_connect_to_electricity
+ </div>
+ </div>
+ <span
+ class="MuiCardActionArea-focusHighlight"
+ />
+ <span
+ class="MuiTouchRipple-root"
+ />
+ </button>
+ <button
+ class="MuiButtonBase-root MuiCardActionArea-root WithStyles(ForwardRef(CardActionArea))-root-1 connection-card water"
+ tabindex="0"
+ type="button"
+ >
+ <div
+ class="MuiCardContent-root WithStyles(ForwardRef(CardContent))-root-2"
>
- <WithStyles(WithStyles(ForwardRef(CardActionArea)))
- className="connection-card water"
- onClick={[Function]}
+ <svg
+ class="styles__icon___23x3R"
+ height="36"
+ width="36"
+ >
+ <use
+ xlink:href="#test-file-stub"
+ />
+ </svg>
+ <div
+ class="konnector-title text-18-bold water"
>
- <WithStyles(ForwardRef(CardActionArea))
- className="connection-card water"
- classes={
- Object {
- "root": "WithStyles(ForwardRef(CardActionArea))-root-1",
- }
- }
- onClick={[Function]}
- >
- <ForwardRef(CardActionArea)
- className="connection-card water"
- classes={
- Object {
- "focusHighlight": "MuiCardActionArea-focusHighlight",
- "focusVisible": "Mui-focusVisible",
- "root": "MuiCardActionArea-root WithStyles(ForwardRef(CardActionArea))-root-1",
- }
- }
- onClick={[Function]}
- >
- <WithStyles(ForwardRef(ButtonBase))
- className="MuiCardActionArea-root WithStyles(ForwardRef(CardActionArea))-root-1 connection-card water"
- focusVisibleClassName="Mui-focusVisible"
- onClick={[Function]}
- >
- <ForwardRef(ButtonBase)
- className="MuiCardActionArea-root WithStyles(ForwardRef(CardActionArea))-root-1 connection-card water"
- classes={
- Object {
- "disabled": "Mui-disabled",
- "focusVisible": "Mui-focusVisible",
- "root": "MuiButtonBase-root",
- }
- }
- focusVisibleClassName="Mui-focusVisible"
- onClick={[Function]}
- >
- <button
- className="MuiButtonBase-root MuiCardActionArea-root WithStyles(ForwardRef(CardActionArea))-root-1 connection-card water"
- disabled={false}
- onBlur={[Function]}
- onClick={[Function]}
- onDragLeave={[Function]}
- onFocus={[Function]}
- onKeyDown={[Function]}
- onKeyUp={[Function]}
- onMouseDown={[Function]}
- onMouseLeave={[Function]}
- onMouseUp={[Function]}
- onTouchEnd={[Function]}
- onTouchMove={[Function]}
- onTouchStart={[Function]}
- tabIndex={0}
- type="button"
- >
- <WithStyles(WithStyles(ForwardRef(CardContent)))>
- <WithStyles(ForwardRef(CardContent))
- classes={
- Object {
- "root": "WithStyles(ForwardRef(CardContent))-root-2",
- }
- }
- >
- <ForwardRef(CardContent)
- classes={
- Object {
- "root": "MuiCardContent-root WithStyles(ForwardRef(CardContent))-root-2",
- }
- }
- >
- <div
- className="MuiCardContent-root WithStyles(ForwardRef(CardContent))-root-2"
- >
- <Icon
- icon="test-file-stub"
- size={36}
- spin={false}
- >
- <Component
- className="styles__icon___23x3R"
- height={36}
- style={Object {}}
- width={36}
- >
- <svg
- className="styles__icon___23x3R"
- height={36}
- style={Object {}}
- width={36}
- >
- <use
- xlinkHref="#test-file-stub"
- />
- </svg>
- </Component>
- </Icon>
- <div
- className="konnector-title text-18-bold water"
- >
- konnector_options.label_connect_to_water
- </div>
- </div>
- </ForwardRef(CardContent)>
- </WithStyles(ForwardRef(CardContent))>
- </WithStyles(WithStyles(ForwardRef(CardContent)))>
- <span
- className="MuiCardActionArea-focusHighlight"
- />
- <WithStyles(memo)
- center={false}
- >
- <ForwardRef(TouchRipple)
- center={false}
- classes={
- Object {
- "child": "MuiTouchRipple-child",
- "childLeaving": "MuiTouchRipple-childLeaving",
- "childPulsate": "MuiTouchRipple-childPulsate",
- "ripple": "MuiTouchRipple-ripple",
- "ripplePulsate": "MuiTouchRipple-ripplePulsate",
- "rippleVisible": "MuiTouchRipple-rippleVisible",
- "root": "MuiTouchRipple-root",
- }
- }
- >
- <span
- className="MuiTouchRipple-root"
- >
- <TransitionGroup
- childFactory={[Function]}
- component={null}
- exit={true}
- />
- </span>
- </ForwardRef(TouchRipple)>
- </WithStyles(memo)>
- </button>
- </ForwardRef(ButtonBase)>
- </WithStyles(ForwardRef(ButtonBase))>
- </ForwardRef(CardActionArea)>
- </WithStyles(ForwardRef(CardActionArea))>
- </WithStyles(WithStyles(ForwardRef(CardActionArea)))>
- </StyledCard>
- <StyledCard
- className="connection-card"
- fluidType={2}
- key="2"
- onClick={[Function]}
+ konnector_options.label_connect_to_water
+ </div>
+ </div>
+ <span
+ class="MuiCardActionArea-focusHighlight"
+ />
+ <span
+ class="MuiTouchRipple-root"
+ />
+ </button>
+ <button
+ class="MuiButtonBase-root MuiCardActionArea-root WithStyles(ForwardRef(CardActionArea))-root-1 connection-card gas"
+ tabindex="0"
+ type="button"
+ >
+ <div
+ class="MuiCardContent-root WithStyles(ForwardRef(CardContent))-root-2"
>
- <WithStyles(WithStyles(ForwardRef(CardActionArea)))
- className="connection-card gas"
- onClick={[Function]}
+ <svg
+ class="styles__icon___23x3R"
+ height="36"
+ width="36"
+ >
+ <use
+ xlink:href="#test-file-stub"
+ />
+ </svg>
+ <div
+ class="konnector-title text-18-bold gas"
>
- <WithStyles(ForwardRef(CardActionArea))
- className="connection-card gas"
- classes={
- Object {
- "root": "WithStyles(ForwardRef(CardActionArea))-root-1",
- }
- }
- onClick={[Function]}
- >
- <ForwardRef(CardActionArea)
- className="connection-card gas"
- classes={
- Object {
- "focusHighlight": "MuiCardActionArea-focusHighlight",
- "focusVisible": "Mui-focusVisible",
- "root": "MuiCardActionArea-root WithStyles(ForwardRef(CardActionArea))-root-1",
- }
- }
- onClick={[Function]}
- >
- <WithStyles(ForwardRef(ButtonBase))
- className="MuiCardActionArea-root WithStyles(ForwardRef(CardActionArea))-root-1 connection-card gas"
- focusVisibleClassName="Mui-focusVisible"
- onClick={[Function]}
- >
- <ForwardRef(ButtonBase)
- className="MuiCardActionArea-root WithStyles(ForwardRef(CardActionArea))-root-1 connection-card gas"
- classes={
- Object {
- "disabled": "Mui-disabled",
- "focusVisible": "Mui-focusVisible",
- "root": "MuiButtonBase-root",
- }
- }
- focusVisibleClassName="Mui-focusVisible"
- onClick={[Function]}
- >
- <button
- className="MuiButtonBase-root MuiCardActionArea-root WithStyles(ForwardRef(CardActionArea))-root-1 connection-card gas"
- disabled={false}
- onBlur={[Function]}
- onClick={[Function]}
- onDragLeave={[Function]}
- onFocus={[Function]}
- onKeyDown={[Function]}
- onKeyUp={[Function]}
- onMouseDown={[Function]}
- onMouseLeave={[Function]}
- onMouseUp={[Function]}
- onTouchEnd={[Function]}
- onTouchMove={[Function]}
- onTouchStart={[Function]}
- tabIndex={0}
- type="button"
- >
- <WithStyles(WithStyles(ForwardRef(CardContent)))>
- <WithStyles(ForwardRef(CardContent))
- classes={
- Object {
- "root": "WithStyles(ForwardRef(CardContent))-root-2",
- }
- }
- >
- <ForwardRef(CardContent)
- classes={
- Object {
- "root": "MuiCardContent-root WithStyles(ForwardRef(CardContent))-root-2",
- }
- }
- >
- <div
- className="MuiCardContent-root WithStyles(ForwardRef(CardContent))-root-2"
- >
- <Icon
- icon="test-file-stub"
- size={36}
- spin={false}
- >
- <Component
- className="styles__icon___23x3R"
- height={36}
- style={Object {}}
- width={36}
- >
- <svg
- className="styles__icon___23x3R"
- height={36}
- style={Object {}}
- width={36}
- >
- <use
- xlinkHref="#test-file-stub"
- />
- </svg>
- </Component>
- </Icon>
- <div
- className="konnector-title text-18-bold gas"
- >
- konnector_options.label_connect_to_gas
- </div>
- </div>
- </ForwardRef(CardContent)>
- </WithStyles(ForwardRef(CardContent))>
- </WithStyles(WithStyles(ForwardRef(CardContent)))>
- <span
- className="MuiCardActionArea-focusHighlight"
- />
- <WithStyles(memo)
- center={false}
- >
- <ForwardRef(TouchRipple)
- center={false}
- classes={
- Object {
- "child": "MuiTouchRipple-child",
- "childLeaving": "MuiTouchRipple-childLeaving",
- "childPulsate": "MuiTouchRipple-childPulsate",
- "ripple": "MuiTouchRipple-ripple",
- "ripplePulsate": "MuiTouchRipple-ripplePulsate",
- "rippleVisible": "MuiTouchRipple-rippleVisible",
- "root": "MuiTouchRipple-root",
- }
- }
- >
- <span
- className="MuiTouchRipple-root"
- >
- <TransitionGroup
- childFactory={[Function]}
- component={null}
- exit={true}
- />
- </span>
- </ForwardRef(TouchRipple)>
- </WithStyles(memo)>
- </button>
- </ForwardRef(ButtonBase)>
- </WithStyles(ForwardRef(ButtonBase))>
- </ForwardRef(CardActionArea)>
- </WithStyles(ForwardRef(CardActionArea))>
- </WithStyles(WithStyles(ForwardRef(CardActionArea)))>
- </StyledCard>
- </div>
- </KonnectorViewerList>
-</Provider>
+ konnector_options.label_connect_to_gas
+ </div>
+ </div>
+ <span
+ class="MuiCardActionArea-focusHighlight"
+ />
+ <span
+ class="MuiTouchRipple-root"
+ />
+ </button>
+ </div>
+</div>
`;
diff --git a/src/components/Konnector/konnectorModal.scss b/src/components/Konnector/konnectorModal.scss
index e650b7c1eb45b084e5830f4cb7ec640617110f83..1c27774962d8e9e7537666e13136f84ba5fc309b 100644
--- a/src/components/Konnector/konnectorModal.scss
+++ b/src/components/Konnector/konnectorModal.scss
@@ -104,6 +104,10 @@
}
}
}
+
+ button {
+ margin-top: 1rem;
+ }
}
}
diff --git a/src/components/Loader/Loader.spec.tsx b/src/components/Loader/Loader.spec.tsx
index 91618983d037be9155a6d8a2d79f67b139c1741a..7de46f26ce198f6b7cf6b3569b4087081aa3ab86 100644
--- a/src/components/Loader/Loader.spec.tsx
+++ b/src/components/Loader/Loader.spec.tsx
@@ -1,26 +1,27 @@
+import { render, screen } from '@testing-library/react'
import { FluidType } from 'enums'
-import { mount } from 'enzyme'
import React from 'react'
import Loader from './Loader'
describe('Loader component', () => {
it('should render base Loader', () => {
- const wrapper = mount(<Loader />)
- expect(wrapper.getElement()).toMatchSnapshot()
+ const { container } = render(<Loader />)
+ expect(container).toMatchSnapshot()
+ expect(screen.getByRole('progressbar')).toBeInTheDocument()
})
it('should render Electricity Loader', () => {
- const wrapper = mount(<Loader color="elec" />)
- expect(wrapper.getElement()).toMatchSnapshot()
+ const { container } = render(<Loader color="elec" />)
+ expect(container).toMatchSnapshot()
})
it('should render Water Loader', () => {
- const wrapper = mount(<Loader fluidType={FluidType.WATER} />)
- expect(wrapper.getElement()).toMatchSnapshot()
+ const { container } = render(<Loader fluidType={FluidType.WATER} />)
+ expect(container).toMatchSnapshot()
})
it('should render Gas Loader', () => {
- const wrapper = mount(<Loader fluidType={FluidType.GAS} />)
- expect(wrapper.getElement()).toMatchSnapshot()
+ const { container } = render(<Loader fluidType={FluidType.GAS} />)
+ expect(container).toMatchSnapshot()
})
})
diff --git a/src/components/Loader/Loader.tsx b/src/components/Loader/Loader.tsx
index 838a7c341ecd768a77f7c10c9f4225a77cdb327c..2567549f2907564269e56c5070d7eb8b843f4f1f 100644
--- a/src/components/Loader/Loader.tsx
+++ b/src/components/Loader/Loader.tsx
@@ -33,8 +33,9 @@ const Loader = ({ color = 'gold', fluidType, text }: LoaderProps) => {
return (
<div className={`loader ${variant}`}>
<div
- className={`bars `}
+ className="bars"
aria-busy="true"
+ role="progressbar"
aria-label={t('common.accessibility.loading')}
title={t('common.accessibility.loading')}
>
diff --git a/src/components/Loader/__snapshots__/Loader.spec.tsx.snap b/src/components/Loader/__snapshots__/Loader.spec.tsx.snap
index e33f3c5b6e55146c70713ded38d7342c604476ea..55a94f70733db7a60d3f517efe450891d1f2856d 100644
--- a/src/components/Loader/__snapshots__/Loader.spec.tsx.snap
+++ b/src/components/Loader/__snapshots__/Loader.spec.tsx.snap
@@ -1,21 +1,105 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Loader component should render Electricity Loader 1`] = `
-<Loader
- color="elec"
-/>
+<div>
+ <div
+ class="loader elec"
+ >
+ <div
+ aria-busy="true"
+ aria-label="common.accessibility.loading"
+ class="bars"
+ role="progressbar"
+ title="common.accessibility.loading"
+ >
+ <div
+ class="bar"
+ />
+ <div
+ class="bar"
+ />
+ <div
+ class="bar"
+ />
+ </div>
+ </div>
+</div>
`;
exports[`Loader component should render Gas Loader 1`] = `
-<Loader
- fluidType={2}
-/>
+<div>
+ <div
+ class="loader gaz"
+ >
+ <div
+ aria-busy="true"
+ aria-label="common.accessibility.loading"
+ class="bars"
+ role="progressbar"
+ title="common.accessibility.loading"
+ >
+ <div
+ class="bar"
+ />
+ <div
+ class="bar"
+ />
+ <div
+ class="bar"
+ />
+ </div>
+ </div>
+</div>
`;
exports[`Loader component should render Water Loader 1`] = `
-<Loader
- fluidType={1}
-/>
+<div>
+ <div
+ class="loader water"
+ >
+ <div
+ aria-busy="true"
+ aria-label="common.accessibility.loading"
+ class="bars"
+ role="progressbar"
+ title="common.accessibility.loading"
+ >
+ <div
+ class="bar"
+ />
+ <div
+ class="bar"
+ />
+ <div
+ class="bar"
+ />
+ </div>
+ </div>
+</div>
`;
-exports[`Loader component should render base Loader 1`] = `<Loader />`;
+exports[`Loader component should render base Loader 1`] = `
+<div>
+ <div
+ class="loader gold"
+ >
+ <div
+ aria-busy="true"
+ aria-label="common.accessibility.loading"
+ class="bars"
+ role="progressbar"
+ title="common.accessibility.loading"
+ >
+ <div
+ class="bar"
+ />
+ <div
+ class="bar"
+ />
+ <div
+ class="bar"
+ />
+ </div>
+ </div>
+</div>
+`;
diff --git a/src/components/Navbar/Navbar.spec.tsx b/src/components/Navbar/Navbar.spec.tsx
index b457828e3ad1b908fe88acef7ac8fafdaa7a9e69..d4d426391e22f6d6d75e9790458e9434831546e5 100644
--- a/src/components/Navbar/Navbar.spec.tsx
+++ b/src/components/Navbar/Navbar.spec.tsx
@@ -1,5 +1,5 @@
+import { render, screen } from '@testing-library/react'
import Navbar from 'components/Navbar/Navbar'
-import { mount } from 'enzyme'
import React from 'react'
import { Provider } from 'react-redux'
import { BrowserRouter } from 'react-router-dom'
@@ -8,14 +8,14 @@ import { createMockEcolyoStore } from 'tests/__mocks__/store'
describe('Navbar component', () => {
it('should be rendered correctly with 5 navlink', () => {
const store = createMockEcolyoStore()
- const wrapper = mount(
+ render(
<Provider store={store}>
<BrowserRouter>
<Navbar />
</BrowserRouter>
</Provider>
)
- expect(wrapper.find('NavLink')).toHaveLength(5)
+ expect(screen.getAllByRole('link').length).toBe(5)
})
it('should be rendered correctly with notifications', () => {
@@ -27,15 +27,15 @@ describe('Navbar component', () => {
analysisNotification: true,
},
})
- const wrapper = mount(
+ const { container } = render(
<Provider store={store}>
<BrowserRouter>
<Navbar />
</BrowserRouter>
</Provider>
)
- expect(wrapper.find('.nb-notif').first().text()).toEqual('1')
- expect(wrapper.find('.nb-notif').last().text()).toEqual('1')
+ const notifElements = container.getElementsByClassName('nb-notif')
+ expect(notifElements.length).toBe(2)
})
it('should be rendered correctly without notifications', () => {
@@ -47,13 +47,14 @@ describe('Navbar component', () => {
analysisNotification: false,
},
})
- const wrapper = mount(
+ const { container } = render(
<Provider store={store}>
<BrowserRouter>
<Navbar />
</BrowserRouter>
</Provider>
)
- expect(wrapper.find('.nb-notif').exists()).toBeFalsy()
+ const notifElements = container.getElementsByClassName('nb-notif')
+ expect(notifElements.length).toBe(0)
})
})
diff --git a/src/components/Navbar/Navbar.tsx b/src/components/Navbar/Navbar.tsx
index 36095b762ece775ced72e22cd8ce94c45b7ea965..aadb0016f83be044278a7ef2fd14277b7c7445f1 100644
--- a/src/components/Navbar/Navbar.tsx
+++ b/src/components/Navbar/Navbar.tsx
@@ -50,25 +50,24 @@ const Navbar = () => {
<aside className="o-sidebar">
<nav role="navigation" aria-label="navigation">
<ul className="c-nav">
- <li
- className="c-nav-item"
- onClick={() => emitNavEvent('consumption')}
- >
+ <li className="c-nav-item">
<Link
component={NavLink}
to="/consumption"
className={`c-nav-link ${isActive('/consumption')}`}
+ onClick={() => emitNavEvent('consumption')}
>
<StyledIcon className="c-nav-icon off" icon={ConsoIconOff} />
<StyledIcon className="c-nav-icon on" icon={ConsoIconOn} />
{t('navigation.consumption')}
</Link>
</li>
- <li className="c-nav-item" onClick={() => emitNavEvent('challenges')}>
+ <li className="c-nav-item">
<Link
component={NavLink}
to="/challenges"
className={`c-nav-link ${isActive('/challenges')}`}
+ onClick={() => emitNavEvent('challenges')}
>
{(challengeExplorationNotification ||
challengeActionNotification ||
@@ -78,27 +77,24 @@ const Navbar = () => {
{t('navigation.challenges')}
</Link>
</li>
- <li
- className="c-nav-item"
- onClick={() => emitNavEvent('ecogestures')}
- >
+ <li className="c-nav-item">
<Link
component={NavLink}
to="/ecogestures"
className={`c-nav-link ${isActive('/ecogesture')}`}
+ onClick={() => emitNavEvent('ecogestures')}
>
<StyledIcon className="c-nav-icon off" icon={BulbIconOff} />
<StyledIcon className="c-nav-icon on" icon={BulbIconOn} />
{t('navigation.ecogestures')}
</Link>
</li>
- <li className="c-nav-item" onClick={() => emitNavEvent('analysis')}>
+ <li className="c-nav-item">
<Link
component={NavLink}
to="/analysis"
- className={`c-nav-link ${
- pathname === '/analysis' ? 'is-active' : ''
- }`}
+ className={`c-nav-link ${isActive('/analysis')}`}
+ onClick={() => emitNavEvent('analysis')}
>
{analysisNotification && <div className="nb-notif">1</div>}
<StyledIcon className="c-nav-icon off" icon={AnalysisIconOff} />
@@ -106,11 +102,12 @@ const Navbar = () => {
{t('navigation.analysis')}
</Link>
</li>
- <li className="c-nav-item" onClick={() => emitNavEvent('options')}>
+ <li className="c-nav-item">
<Link
component={NavLink}
to="/options"
className={`c-nav-link ${isActive('/options')}`}
+ onClick={() => emitNavEvent('options')}
>
<StyledIcon className="c-nav-icon off" icon={ParameterIconOff} />
<StyledIcon className="c-nav-icon on" icon={ParameterIconOn} />
diff --git a/src/components/Options/Accessibility/Accessibility.tsx b/src/components/Options/Accessibility/Accessibility.tsx
index 9fe279c519ccd97586d99d965c15de73b5144d68..383cef8c7284986b2bfd8c61c37da2c0ee69257e 100644
--- a/src/components/Options/Accessibility/Accessibility.tsx
+++ b/src/components/Options/Accessibility/Accessibility.tsx
@@ -15,7 +15,7 @@ const Accessibility = () => {
href="https://ecolyo.com/accessibilite.html"
target="_blank"
>
- <div className="card optionCard">
+ <div className="card">
<div className="gcu-link-card">
<div className="gcu-link-card-content">
<StyledIcon
diff --git a/src/components/Options/ExportData/ExportData.spec.tsx b/src/components/Options/ExportData/ExportData.spec.tsx
index 3afe225cedebd2d113d6995bc6c510bd1b8c30c6..b60d9054df1431a45c8fccba075579616b31897c 100644
--- a/src/components/Options/ExportData/ExportData.spec.tsx
+++ b/src/components/Options/ExportData/ExportData.spec.tsx
@@ -1,5 +1,4 @@
-import { mount } from 'enzyme'
-import toJson from 'enzyme-to-json'
+import { render, waitFor } from '@testing-library/react'
import React from 'react'
import ExportData from './ExportData'
@@ -12,7 +11,8 @@ jest.mock('services/consumption.service', () => {
describe('exportOptions component', () => {
it('should be rendered correctly', async () => {
- const wrapper = mount(<ExportData />)
- expect(toJson(wrapper)).toMatchSnapshot()
+ const { container } = render(<ExportData />)
+ await waitFor(() => null, { container })
+ expect(container).toMatchSnapshot()
})
})
diff --git a/src/components/Options/ExportData/ExportData.tsx b/src/components/Options/ExportData/ExportData.tsx
index b0d620cf7c894674cd20ed3006bc1073d9f534f3..5127480c547af8ada1f7bc66b8f6b3e3ce970038 100644
--- a/src/components/Options/ExportData/ExportData.tsx
+++ b/src/components/Options/ExportData/ExportData.tsx
@@ -6,7 +6,6 @@ import {
} from '@material-ui/core'
import chevronDown from 'assets/icons/ico/chevron-down.svg'
import exportIcon from 'assets/icons/ico/export.svg'
-import classNames from 'classnames'
import { useClient } from 'cozy-client'
import { useI18n } from 'cozy-ui/transpiled/react/I18n'
import Icon from 'cozy-ui/transpiled/react/Icon'
@@ -72,15 +71,11 @@ const ExportData = () => {
}, [consumptionService])
const fluidCheckbox = () =>
- exportableFluids.map((fluidType, key) => (
- <label
- key={key}
- className={classNames('checkbox', {
- ['answer-checked']: answer.includes(fluidType),
- })}
- >
+ exportableFluids.map(fluidType => (
+ <label key={fluidType}>
<input
type="checkbox"
+ className="inputCheckbox"
value={fluidType}
name={t(`FLUID.${FluidType[fluidType]}.LABEL`)}
onChange={() => handleChange(fluidType)}
@@ -90,7 +85,7 @@ const ExportData = () => {
</label>
))
- const handleDone = (e?: any) => {
+ const handleDone = (e?: unknown) => {
if (e) {
setHasError(true)
}
@@ -129,28 +124,18 @@ const ExportData = () => {
root: 'expansion-panel-details',
}}
>
- <div className="text-15-normal content intro">
- {t('export.text1')}
- </div>
- <div className="text-16-bold content">
- {t('export.fluid_select')}
- </div>
+ <div className="text-15-normal grey">{t('export.text1')}</div>
+ <div className="text-16-bold">{t('export.fluid_select')}</div>
{exportableFluids.length === 0 ? (
- <div className="text-15-normal content intro">
- {t('export.no_data')}
- </div>
+ <div className="text-15-normal grey">{t('export.no_data')}</div>
) : (
<>
{fluidCheckbox()}
<Button
aria-label={t('unsubscribe.button_accessibility')}
onClick={() => setIsExportStartModal(true)}
- classes={{
- root: 'btn-secondary-negative',
- label: 'text-16-normal',
- }}
- type="submit"
+ className="btnSecondary"
disabled={answer.length === 0}
>
{t('export.button_download')}
@@ -169,16 +154,14 @@ const ExportData = () => {
setIsExportLoadingModal(true)
}}
/>
- {isExportLoadingModal && (
- <ExportLoadingModal
- open={isExportLoadingModal}
- handleCloseClick={() => {
- setIsExportLoadingModal(false)
- }}
- handleDone={(e?: any): void => handleDone(e)}
- selectedFluids={answer}
- />
- )}
+ <ExportLoadingModal
+ open={isExportLoadingModal}
+ handleCloseClick={() => {
+ setIsExportLoadingModal(false)
+ }}
+ handleDone={e => handleDone(e)}
+ selectedFluids={answer}
+ />
<ExportDoneModal
open={isExportDoneModal}
error={hasError}
diff --git a/src/components/Options/ExportData/Modals/__snapshots__/exportDoneModal.spec.tsx.snap b/src/components/Options/ExportData/Modals/__snapshots__/exportDoneModal.spec.tsx.snap
index 70ad61389e74a45d53df715e76902c98197a563e..565c7d0f4a4835d135788e7179a1b10afe7fb157 100644
--- a/src/components/Options/ExportData/Modals/__snapshots__/exportDoneModal.spec.tsx.snap
+++ b/src/components/Options/ExportData/Modals/__snapshots__/exportDoneModal.spec.tsx.snap
@@ -1,1033 +1,231 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`exportDoneModal component should be rendered correctly 1`] = `
-<Provider
- store={
- Object {
- "clearActions": [Function],
- "dispatch": [Function],
- "getActions": [Function],
- "getState": [Function],
- "replaceReducer": [Function],
- "subscribe": [Function],
- }
- }
+<body
+ style="padding-right: 0px; overflow: hidden;"
>
- <ExportDoneModal
- error={false}
- handleCloseClick={[MockFunction]}
- open={true}
+ <div
+ aria-hidden="true"
+ />
+ <div
+ class="MuiDialog-root modal-root"
+ role="presentation"
+ style="position: fixed; z-index: 1300; right: 0px; bottom: 0px; top: 0px; left: 0px;"
>
- <WithStyles(ForwardRef(Dialog))
- aria-labelledby="accessibility-title"
- classes={
- Object {
- "paper": "modal-paper",
- "root": "modal-root",
- }
- }
- onClose={[MockFunction]}
- open={true}
+ <div
+ aria-hidden="true"
+ class="MuiBackdrop-root"
+ style="opacity: 1; webkit-transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"
+ />
+ <div
+ data-test="sentinelStart"
+ tabindex="0"
+ />
+ <div
+ class="MuiDialog-container MuiDialog-scrollPaper"
+ role="none presentation"
+ style="opacity: 1; webkit-transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"
+ tabindex="-1"
>
- <ForwardRef(Dialog)
+ <div
aria-labelledby="accessibility-title"
- classes={
- Object {
- "container": "MuiDialog-container",
- "paper": "MuiDialog-paper modal-paper",
- "paperFullScreen": "MuiDialog-paperFullScreen",
- "paperFullWidth": "MuiDialog-paperFullWidth",
- "paperScrollBody": "MuiDialog-paperScrollBody",
- "paperScrollPaper": "MuiDialog-paperScrollPaper",
- "paperWidthFalse": "MuiDialog-paperWidthFalse",
- "paperWidthLg": "MuiDialog-paperWidthLg",
- "paperWidthMd": "MuiDialog-paperWidthMd",
- "paperWidthSm": "MuiDialog-paperWidthSm",
- "paperWidthXl": "MuiDialog-paperWidthXl",
- "paperWidthXs": "MuiDialog-paperWidthXs",
- "root": "MuiDialog-root modal-root",
- "scrollBody": "MuiDialog-scrollBody",
- "scrollPaper": "MuiDialog-scrollPaper",
- }
- }
- onClose={[MockFunction]}
- open={true}
+ class="MuiPaper-root MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm MuiPaper-elevation24 MuiPaper-rounded"
+ role="dialog"
>
- <ForwardRef(Modal)
- BackdropComponent={
- Object {
- "$$typeof": Symbol(react.forward_ref),
- "Naked": Object {
- "$$typeof": Symbol(react.forward_ref),
- "propTypes": Object {
- "children": [Function],
- "className": [Function],
- "classes": [Function],
- "invisible": [Function],
- "open": [Function],
- "transitionDuration": [Function],
- },
- "render": [Function],
- },
- "displayName": "WithStyles(ForwardRef(Backdrop))",
- "options": Object {
- "defaultTheme": Object {
- "breakpoints": Object {
- "between": [Function],
- "down": [Function],
- "keys": Array [
- "xs",
- "sm",
- "md",
- "lg",
- "xl",
- ],
- "only": [Function],
- "up": [Function],
- "values": Object {
- "lg": 1280,
- "md": 960,
- "sm": 600,
- "xl": 1920,
- "xs": 0,
- },
- "width": [Function],
- },
- "direction": "ltr",
- "mixins": Object {
- "gutters": [Function],
- "toolbar": Object {
- "@media (min-width:0px) and (orientation: landscape)": Object {
- "minHeight": 48,
- },
- "@media (min-width:600px)": Object {
- "minHeight": 64,
- },
- "minHeight": 56,
- },
- },
- "overrides": Object {},
- "palette": Object {
- "action": Object {
- "activatedOpacity": 0.12,
- "active": "rgba(0, 0, 0, 0.54)",
- "disabled": "rgba(0, 0, 0, 0.26)",
- "disabledBackground": "rgba(0, 0, 0, 0.12)",
- "disabledOpacity": 0.38,
- "focus": "rgba(0, 0, 0, 0.12)",
- "focusOpacity": 0.12,
- "hover": "rgba(0, 0, 0, 0.04)",
- "hoverOpacity": 0.04,
- "selected": "rgba(0, 0, 0, 0.08)",
- "selectedOpacity": 0.08,
- },
- "augmentColor": [Function],
- "background": Object {
- "default": "#fafafa",
- "paper": "#fff",
- },
- "common": Object {
- "black": "#000",
- "white": "#fff",
- },
- "contrastThreshold": 3,
- "divider": "rgba(0, 0, 0, 0.12)",
- "error": Object {
- "contrastText": "#fff",
- "dark": "#d32f2f",
- "light": "#e57373",
- "main": "#f44336",
- },
- "getContrastText": [Function],
- "grey": Object {
- "100": "#f5f5f5",
- "200": "#eeeeee",
- "300": "#e0e0e0",
- "400": "#bdbdbd",
- "50": "#fafafa",
- "500": "#9e9e9e",
- "600": "#757575",
- "700": "#616161",
- "800": "#424242",
- "900": "#212121",
- "A100": "#d5d5d5",
- "A200": "#aaaaaa",
- "A400": "#303030",
- "A700": "#616161",
- },
- "info": Object {
- "contrastText": "#fff",
- "dark": "#1976d2",
- "light": "#64b5f6",
- "main": "#2196f3",
- },
- "primary": Object {
- "contrastText": "#fff",
- "dark": "#303f9f",
- "light": "#7986cb",
- "main": "#3f51b5",
- },
- "secondary": Object {
- "contrastText": "#fff",
- "dark": "#c51162",
- "light": "#ff4081",
- "main": "#f50057",
- },
- "success": Object {
- "contrastText": "rgba(0, 0, 0, 0.87)",
- "dark": "#388e3c",
- "light": "#81c784",
- "main": "#4caf50",
- },
- "text": Object {
- "disabled": "rgba(0, 0, 0, 0.38)",
- "hint": "rgba(0, 0, 0, 0.38)",
- "primary": "rgba(0, 0, 0, 0.87)",
- "secondary": "rgba(0, 0, 0, 0.54)",
- },
- "tonalOffset": 0.2,
- "type": "light",
- "warning": Object {
- "contrastText": "rgba(0, 0, 0, 0.87)",
- "dark": "#f57c00",
- "light": "#ffb74d",
- "main": "#ff9800",
- },
- },
- "props": Object {},
- "shadows": Array [
- "none",
- "0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12)",
- "0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12)",
- "0px 3px 3px -2px rgba(0,0,0,0.2),0px 3px 4px 0px rgba(0,0,0,0.14),0px 1px 8px 0px rgba(0,0,0,0.12)",
- "0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12)",
- "0px 3px 5px -1px rgba(0,0,0,0.2),0px 5px 8px 0px rgba(0,0,0,0.14),0px 1px 14px 0px rgba(0,0,0,0.12)",
- "0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12)",
- "0px 4px 5px -2px rgba(0,0,0,0.2),0px 7px 10px 1px rgba(0,0,0,0.14),0px 2px 16px 1px rgba(0,0,0,0.12)",
- "0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12)",
- "0px 5px 6px -3px rgba(0,0,0,0.2),0px 9px 12px 1px rgba(0,0,0,0.14),0px 3px 16px 2px rgba(0,0,0,0.12)",
- "0px 6px 6px -3px rgba(0,0,0,0.2),0px 10px 14px 1px rgba(0,0,0,0.14),0px 4px 18px 3px rgba(0,0,0,0.12)",
- "0px 6px 7px -4px rgba(0,0,0,0.2),0px 11px 15px 1px rgba(0,0,0,0.14),0px 4px 20px 3px rgba(0,0,0,0.12)",
- "0px 7px 8px -4px rgba(0,0,0,0.2),0px 12px 17px 2px rgba(0,0,0,0.14),0px 5px 22px 4px rgba(0,0,0,0.12)",
- "0px 7px 8px -4px rgba(0,0,0,0.2),0px 13px 19px 2px rgba(0,0,0,0.14),0px 5px 24px 4px rgba(0,0,0,0.12)",
- "0px 7px 9px -4px rgba(0,0,0,0.2),0px 14px 21px 2px rgba(0,0,0,0.14),0px 5px 26px 4px rgba(0,0,0,0.12)",
- "0px 8px 9px -5px rgba(0,0,0,0.2),0px 15px 22px 2px rgba(0,0,0,0.14),0px 6px 28px 5px rgba(0,0,0,0.12)",
- "0px 8px 10px -5px rgba(0,0,0,0.2),0px 16px 24px 2px rgba(0,0,0,0.14),0px 6px 30px 5px rgba(0,0,0,0.12)",
- "0px 8px 11px -5px rgba(0,0,0,0.2),0px 17px 26px 2px rgba(0,0,0,0.14),0px 6px 32px 5px rgba(0,0,0,0.12)",
- "0px 9px 11px -5px rgba(0,0,0,0.2),0px 18px 28px 2px rgba(0,0,0,0.14),0px 7px 34px 6px rgba(0,0,0,0.12)",
- "0px 9px 12px -6px rgba(0,0,0,0.2),0px 19px 29px 2px rgba(0,0,0,0.14),0px 7px 36px 6px rgba(0,0,0,0.12)",
- "0px 10px 13px -6px rgba(0,0,0,0.2),0px 20px 31px 3px rgba(0,0,0,0.14),0px 8px 38px 7px rgba(0,0,0,0.12)",
- "0px 10px 13px -6px rgba(0,0,0,0.2),0px 21px 33px 3px rgba(0,0,0,0.14),0px 8px 40px 7px rgba(0,0,0,0.12)",
- "0px 10px 14px -6px rgba(0,0,0,0.2),0px 22px 35px 3px rgba(0,0,0,0.14),0px 8px 42px 7px rgba(0,0,0,0.12)",
- "0px 11px 14px -7px rgba(0,0,0,0.2),0px 23px 36px 3px rgba(0,0,0,0.14),0px 9px 44px 8px rgba(0,0,0,0.12)",
- "0px 11px 15px -7px rgba(0,0,0,0.2),0px 24px 38px 3px rgba(0,0,0,0.14),0px 9px 46px 8px rgba(0,0,0,0.12)",
- ],
- "shape": Object {
- "borderRadius": 4,
- },
- "spacing": [Function],
- "transitions": Object {
- "create": [Function],
- "duration": Object {
- "complex": 375,
- "enteringScreen": 225,
- "leavingScreen": 195,
- "short": 250,
- "shorter": 200,
- "shortest": 150,
- "standard": 300,
- },
- "easing": Object {
- "easeIn": "cubic-bezier(0.4, 0, 1, 1)",
- "easeInOut": "cubic-bezier(0.4, 0, 0.2, 1)",
- "easeOut": "cubic-bezier(0.0, 0, 0.2, 1)",
- "sharp": "cubic-bezier(0.4, 0, 0.6, 1)",
- },
- "getAutoHeightDuration": [Function],
- },
- "typography": Object {
- "body1": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "1rem",
- "fontWeight": 400,
- "letterSpacing": "0.00938em",
- "lineHeight": 1.5,
- },
- "body2": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "0.875rem",
- "fontWeight": 400,
- "letterSpacing": "0.01071em",
- "lineHeight": 1.43,
- },
- "button": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "0.875rem",
- "fontWeight": 500,
- "letterSpacing": "0.02857em",
- "lineHeight": 1.75,
- "textTransform": "uppercase",
- },
- "caption": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "0.75rem",
- "fontWeight": 400,
- "letterSpacing": "0.03333em",
- "lineHeight": 1.66,
- },
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": 14,
- "fontWeightBold": 700,
- "fontWeightLight": 300,
- "fontWeightMedium": 500,
- "fontWeightRegular": 400,
- "h1": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "6rem",
- "fontWeight": 300,
- "letterSpacing": "-0.01562em",
- "lineHeight": 1.167,
- },
- "h2": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "3.75rem",
- "fontWeight": 300,
- "letterSpacing": "-0.00833em",
- "lineHeight": 1.2,
- },
- "h3": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "3rem",
- "fontWeight": 400,
- "letterSpacing": "0em",
- "lineHeight": 1.167,
- },
- "h4": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "2.125rem",
- "fontWeight": 400,
- "letterSpacing": "0.00735em",
- "lineHeight": 1.235,
- },
- "h5": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "1.5rem",
- "fontWeight": 400,
- "letterSpacing": "0em",
- "lineHeight": 1.334,
- },
- "h6": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "1.25rem",
- "fontWeight": 500,
- "letterSpacing": "0.0075em",
- "lineHeight": 1.6,
- },
- "htmlFontSize": 16,
- "overline": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "0.75rem",
- "fontWeight": 400,
- "letterSpacing": "0.08333em",
- "lineHeight": 2.66,
- "textTransform": "uppercase",
- },
- "pxToRem": [Function],
- "round": [Function],
- "subtitle1": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "1rem",
- "fontWeight": 400,
- "letterSpacing": "0.00938em",
- "lineHeight": 1.75,
- },
- "subtitle2": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "0.875rem",
- "fontWeight": 500,
- "letterSpacing": "0.00714em",
- "lineHeight": 1.57,
- },
- },
- "zIndex": Object {
- "appBar": 1100,
- "drawer": 1200,
- "mobileStepper": 1000,
- "modal": 1300,
- "snackbar": 1400,
- "speedDial": 1050,
- "tooltip": 1500,
- },
- },
- "name": "MuiBackdrop",
- },
- "propTypes": Object {
- "classes": [Function],
- "innerRef": [Function],
- },
- "render": [Function],
- "useStyles": [Function],
- }
- }
- BackdropProps={
- Object {
- "transitionDuration": Object {
- "enter": 225,
- "exit": 195,
- },
- }
- }
- className="MuiDialog-root modal-root"
- closeAfterTransition={true}
- disableEscapeKeyDown={false}
- onClose={[MockFunction]}
- open={true}
+ <div
+ id="accessibility-title"
>
- <ForwardRef(Portal)
- disablePortal={false}
+ export.modal_done.accessibility_title
+ </div>
+ <div
+ class="modal-done-root"
+ >
+ <button
+ aria-label="export.button_close"
+ class="MuiButtonBase-root MuiIconButton-root modal-paper-close-button"
+ tabindex="0"
+ type="button"
+ >
+ <span
+ class="MuiIconButton-label"
+ >
+ <svg
+ class="styles__icon___23x3R"
+ height="18"
+ width="18"
+ >
+ <use
+ xlink:href="#test-file-stub"
+ />
+ </svg>
+ </span>
+ <span
+ class="MuiTouchRipple-root"
+ />
+ </button>
+ <div
+ class="content"
+ >
+ <div
+ class="icon-main"
+ >
+ <svg
+ class="styles__icon___23x3R"
+ height="44"
+ width="44"
+ >
+ <use
+ xlink:href="#test-file-stub"
+ />
+ </svg>
+ </div>
+ <div
+ class="text-16-bold subtitle"
+ >
+ export.modal_done.text1
+ </div>
+ <div>
+ export.modal_done.text2
+ </div>
+ <button
+ aria-label="export.modal_done.button_close"
+ class="MuiButtonBase-root MuiButton-root MuiButton-text btnPrimary"
+ tabindex="0"
+ type="button"
+ >
+ <span
+ class="MuiButton-label"
+ >
+ export.modal_done.button_close
+ </span>
+ <span
+ class="MuiTouchRipple-root"
+ />
+ </button>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div
+ data-test="sentinelEnd"
+ tabindex="0"
+ />
+ </div>
+</body>
+`;
+
+exports[`exportDoneModal component should display error message 1`] = `
+<body
+ style="padding-right: 0px; overflow: hidden;"
+>
+ <div
+ aria-hidden="true"
+ />
+ <div
+ class="MuiDialog-root modal-root"
+ role="presentation"
+ style="position: fixed; z-index: 1300; right: 0px; bottom: 0px; top: 0px; left: 0px;"
+ >
+ <div
+ aria-hidden="true"
+ class="MuiBackdrop-root"
+ style="opacity: 1; webkit-transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"
+ />
+ <div
+ data-test="sentinelStart"
+ tabindex="0"
+ />
+ <div
+ class="MuiDialog-container MuiDialog-scrollPaper"
+ role="none presentation"
+ style="opacity: 1; webkit-transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"
+ tabindex="-1"
+ >
+ <div
+ aria-labelledby="accessibility-title"
+ class="MuiPaper-root MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm MuiPaper-elevation24 MuiPaper-rounded"
+ role="dialog"
+ >
+ <div
+ id="accessibility-title"
+ >
+ export.modal_done.accessibility_title
+ </div>
+ <div
+ class="modal-done-root"
+ >
+ <button
+ aria-label="export.button_close"
+ class="MuiButtonBase-root MuiIconButton-root modal-paper-close-button"
+ tabindex="0"
+ type="button"
>
- <Portal
- containerInfo={
- <body
- style="padding-right: 0px; overflow: hidden;"
- >
- <div
- class="MuiDialog-root modal-root"
- role="presentation"
- style="position: fixed; z-index: 1300; right: 0px; bottom: 0px; top: 0px; left: 0px;"
- >
- <div
- aria-hidden="true"
- class="MuiBackdrop-root"
- style="opacity: 1; webkit-transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"
- />
- <div
- data-test="sentinelStart"
- tabindex="0"
- />
- <div
- class="MuiDialog-container MuiDialog-scrollPaper"
- role="none presentation"
- style="opacity: 1; webkit-transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"
- tabindex="-1"
- >
- <div
- aria-labelledby="accessibility-title"
- class="MuiPaper-root MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm MuiPaper-elevation24 MuiPaper-rounded"
- role="dialog"
- >
- <div
- id="accessibility-title"
- >
- export.modal_done.accessibility_title
- </div>
- <div
- class="modal-done-root"
- >
- <div>
- <button
- aria-label="export.button_close"
- class="MuiButtonBase-root MuiIconButton-root modal-paper-close-button"
- tabindex="0"
- type="button"
- >
- <span
- class="MuiIconButton-label"
- >
- <svg
- class="styles__icon___23x3R"
- height="18"
- width="18"
- >
- <use
- xlink:href="#test-file-stub"
- />
- </svg>
- </span>
- <span
- class="MuiTouchRipple-root"
- />
- </button>
- </div>
- <div
- class="content"
- >
- <div
- class="icon-main"
- >
- <svg
- class="styles__icon___23x3R"
- height="44"
- width="44"
- >
- <use
- xlink:href="#test-file-stub"
- />
- </svg>
- </div>
- <div
- class="text-16-bold text text1"
- >
- export.modal_done.text1
- </div>
- <div
- class="text-16-normal text"
- >
- export.modal_done.text2
- </div>
- <button
- aria-label="export.modal_done.button_close"
- class="MuiButtonBase-root MuiButton-root btn-highlight MuiButton-text"
- tabindex="0"
- type="submit"
- >
- <span
- class="MuiButton-label text-16-bold"
- >
- export.modal_done.button_close
- </span>
- <span
- class="MuiTouchRipple-root"
- />
- </button>
- </div>
- </div>
- </div>
- </div>
- <div
- data-test="sentinelEnd"
- tabindex="0"
- />
- </div>
- </body>
- }
+ <span
+ class="MuiIconButton-label"
+ >
+ <svg
+ class="styles__icon___23x3R"
+ height="18"
+ width="18"
+ >
+ <use
+ xlink:href="#test-file-stub"
+ />
+ </svg>
+ </span>
+ <span
+ class="MuiTouchRipple-root"
+ />
+ </button>
+ <div
+ class="content"
+ >
+ <div
+ class="icon-main"
+ >
+ <svg
+ class="styles__icon___23x3R"
+ height="44"
+ width="44"
+ >
+ <use
+ xlink:href="#test-file-stub"
+ />
+ </svg>
+ </div>
+ <div
+ class="text-20-bold error1"
+ >
+ export.modal_done.error1
+ </div>
+ <div
+ class="text-16-bold"
+ >
+ export.modal_done.error2
+ </div>
+ <button
+ aria-label="export.modal_done.button_close"
+ class="MuiButtonBase-root MuiButton-root MuiButton-text btnPrimary"
+ tabindex="0"
+ type="button"
>
- <div
- className="MuiDialog-root modal-root"
- onKeyDown={[Function]}
- role="presentation"
- style={
- Object {
- "bottom": 0,
- "left": 0,
- "position": "fixed",
- "right": 0,
- "top": 0,
- "zIndex": 1300,
- }
- }
+ <span
+ class="MuiButton-label"
>
- <WithStyles(ForwardRef(Backdrop))
- onClick={[Function]}
- open={true}
- transitionDuration={
- Object {
- "enter": 225,
- "exit": 195,
- }
- }
- >
- <ForwardRef(Backdrop)
- classes={
- Object {
- "invisible": "MuiBackdrop-invisible",
- "root": "MuiBackdrop-root",
- }
- }
- onClick={[Function]}
- open={true}
- transitionDuration={
- Object {
- "enter": 225,
- "exit": 195,
- }
- }
- >
- <ForwardRef(Fade)
- in={true}
- onClick={[Function]}
- timeout={
- Object {
- "enter": 225,
- "exit": 195,
- }
- }
- >
- <Transition
- appear={true}
- enter={true}
- exit={true}
- in={true}
- mountOnEnter={false}
- onClick={[Function]}
- onEnter={[Function]}
- onEntered={[Function]}
- onEntering={[Function]}
- onExit={[Function]}
- onExited={[Function]}
- onExiting={[Function]}
- timeout={
- Object {
- "enter": 225,
- "exit": 195,
- }
- }
- unmountOnExit={false}
- >
- <div
- aria-hidden={true}
- className="MuiBackdrop-root"
- onClick={[Function]}
- style={
- Object {
- "opacity": 1,
- "visibility": undefined,
- }
- }
- />
- </Transition>
- </ForwardRef(Fade)>
- </ForwardRef(Backdrop)>
- </WithStyles(ForwardRef(Backdrop))>
- <Unstable_TrapFocus
- disableAutoFocus={false}
- disableEnforceFocus={false}
- disableRestoreFocus={false}
- getDoc={[Function]}
- isEnabled={[Function]}
- open={true}
- >
- <div
- data-test="sentinelStart"
- tabIndex={0}
- />
- <ForwardRef(Fade)
- appear={true}
- in={true}
- onEnter={[Function]}
- onExited={[Function]}
- role="none presentation"
- tabIndex="-1"
- timeout={
- Object {
- "enter": 225,
- "exit": 195,
- }
- }
- >
- <Transition
- appear={true}
- enter={true}
- exit={true}
- in={true}
- mountOnEnter={false}
- onEnter={[Function]}
- onEntered={[Function]}
- onEntering={[Function]}
- onExit={[Function]}
- onExited={[Function]}
- onExiting={[Function]}
- role="none presentation"
- tabIndex="-1"
- timeout={
- Object {
- "enter": 225,
- "exit": 195,
- }
- }
- unmountOnExit={false}
- >
- <div
- className="MuiDialog-container MuiDialog-scrollPaper"
- onMouseDown={[Function]}
- onMouseUp={[Function]}
- role="none presentation"
- style={
- Object {
- "opacity": 1,
- "visibility": undefined,
- }
- }
- tabIndex="-1"
- >
- <WithStyles(ForwardRef(Paper))
- aria-labelledby="accessibility-title"
- className="MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm"
- elevation={24}
- role="dialog"
- >
- <ForwardRef(Paper)
- aria-labelledby="accessibility-title"
- className="MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm"
- classes={
- Object {
- "elevation0": "MuiPaper-elevation0",
- "elevation1": "MuiPaper-elevation1",
- "elevation10": "MuiPaper-elevation10",
- "elevation11": "MuiPaper-elevation11",
- "elevation12": "MuiPaper-elevation12",
- "elevation13": "MuiPaper-elevation13",
- "elevation14": "MuiPaper-elevation14",
- "elevation15": "MuiPaper-elevation15",
- "elevation16": "MuiPaper-elevation16",
- "elevation17": "MuiPaper-elevation17",
- "elevation18": "MuiPaper-elevation18",
- "elevation19": "MuiPaper-elevation19",
- "elevation2": "MuiPaper-elevation2",
- "elevation20": "MuiPaper-elevation20",
- "elevation21": "MuiPaper-elevation21",
- "elevation22": "MuiPaper-elevation22",
- "elevation23": "MuiPaper-elevation23",
- "elevation24": "MuiPaper-elevation24",
- "elevation3": "MuiPaper-elevation3",
- "elevation4": "MuiPaper-elevation4",
- "elevation5": "MuiPaper-elevation5",
- "elevation6": "MuiPaper-elevation6",
- "elevation7": "MuiPaper-elevation7",
- "elevation8": "MuiPaper-elevation8",
- "elevation9": "MuiPaper-elevation9",
- "outlined": "MuiPaper-outlined",
- "root": "MuiPaper-root",
- "rounded": "MuiPaper-rounded",
- }
- }
- elevation={24}
- role="dialog"
- >
- <div
- aria-labelledby="accessibility-title"
- className="MuiPaper-root MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm MuiPaper-elevation24 MuiPaper-rounded"
- role="dialog"
- >
- <div
- id="accessibility-title"
- >
- export.modal_done.accessibility_title
- </div>
- <div
- className="modal-done-root"
- >
- <div
- onClick={[MockFunction]}
- >
- <WithStyles(ForwardRef(IconButton))
- aria-label="export.button_close"
- className="modal-paper-close-button"
- onClick={[MockFunction]}
- >
- <ForwardRef(IconButton)
- aria-label="export.button_close"
- className="modal-paper-close-button"
- classes={
- Object {
- "colorInherit": "MuiIconButton-colorInherit",
- "colorPrimary": "MuiIconButton-colorPrimary",
- "colorSecondary": "MuiIconButton-colorSecondary",
- "disabled": "Mui-disabled",
- "edgeEnd": "MuiIconButton-edgeEnd",
- "edgeStart": "MuiIconButton-edgeStart",
- "label": "MuiIconButton-label",
- "root": "MuiIconButton-root",
- "sizeSmall": "MuiIconButton-sizeSmall",
- }
- }
- onClick={[MockFunction]}
- >
- <WithStyles(ForwardRef(ButtonBase))
- aria-label="export.button_close"
- centerRipple={true}
- className="MuiIconButton-root modal-paper-close-button"
- disabled={false}
- focusRipple={true}
- onClick={[MockFunction]}
- >
- <ForwardRef(ButtonBase)
- aria-label="export.button_close"
- centerRipple={true}
- className="MuiIconButton-root modal-paper-close-button"
- classes={
- Object {
- "disabled": "Mui-disabled",
- "focusVisible": "Mui-focusVisible",
- "root": "MuiButtonBase-root",
- }
- }
- disabled={false}
- focusRipple={true}
- onClick={[MockFunction]}
- >
- <button
- aria-label="export.button_close"
- className="MuiButtonBase-root MuiIconButton-root modal-paper-close-button"
- disabled={false}
- onBlur={[Function]}
- onClick={[MockFunction]}
- onDragLeave={[Function]}
- onFocus={[Function]}
- onKeyDown={[Function]}
- onKeyUp={[Function]}
- onMouseDown={[Function]}
- onMouseLeave={[Function]}
- onMouseUp={[Function]}
- onTouchEnd={[Function]}
- onTouchMove={[Function]}
- onTouchStart={[Function]}
- tabIndex={0}
- type="button"
- >
- <span
- className="MuiIconButton-label"
- >
- <Icon
- icon="test-file-stub"
- size={18}
- spin={false}
- >
- <Component
- className="styles__icon___23x3R"
- height={18}
- style={Object {}}
- width={18}
- >
- <svg
- className="styles__icon___23x3R"
- height={18}
- style={Object {}}
- width={18}
- >
- <use
- xlinkHref="#test-file-stub"
- />
- </svg>
- </Component>
- </Icon>
- </span>
- <WithStyles(memo)
- center={true}
- >
- <ForwardRef(TouchRipple)
- center={true}
- classes={
- Object {
- "child": "MuiTouchRipple-child",
- "childLeaving": "MuiTouchRipple-childLeaving",
- "childPulsate": "MuiTouchRipple-childPulsate",
- "ripple": "MuiTouchRipple-ripple",
- "ripplePulsate": "MuiTouchRipple-ripplePulsate",
- "rippleVisible": "MuiTouchRipple-rippleVisible",
- "root": "MuiTouchRipple-root",
- }
- }
- >
- <span
- className="MuiTouchRipple-root"
- >
- <TransitionGroup
- childFactory={[Function]}
- component={null}
- exit={true}
- />
- </span>
- </ForwardRef(TouchRipple)>
- </WithStyles(memo)>
- </button>
- </ForwardRef(ButtonBase)>
- </WithStyles(ForwardRef(ButtonBase))>
- </ForwardRef(IconButton)>
- </WithStyles(ForwardRef(IconButton))>
- </div>
- <div
- className="content"
- >
- <div
- className="icon-main"
- >
- <Icon
- icon="test-file-stub"
- size={44}
- spin={false}
- >
- <Component
- className="styles__icon___23x3R"
- height={44}
- style={Object {}}
- width={44}
- >
- <svg
- className="styles__icon___23x3R"
- height={44}
- style={Object {}}
- width={44}
- >
- <use
- xlinkHref="#test-file-stub"
- />
- </svg>
- </Component>
- </Icon>
- </div>
- <div
- className="text-16-bold text text1"
- >
- export.modal_done.text1
- </div>
- <div
- className="text-16-normal text"
- >
- export.modal_done.text2
- </div>
- <WithStyles(ForwardRef(Button))
- aria-label="export.modal_done.button_close"
- classes={
- Object {
- "label": "text-16-bold",
- "root": "btn-highlight",
- }
- }
- onClick={[MockFunction]}
- type="submit"
- >
- <ForwardRef(Button)
- aria-label="export.modal_done.button_close"
- classes={
- Object {
- "colorInherit": "MuiButton-colorInherit",
- "contained": "MuiButton-contained",
- "containedPrimary": "MuiButton-containedPrimary",
- "containedSecondary": "MuiButton-containedSecondary",
- "containedSizeLarge": "MuiButton-containedSizeLarge",
- "containedSizeSmall": "MuiButton-containedSizeSmall",
- "disableElevation": "MuiButton-disableElevation",
- "disabled": "Mui-disabled",
- "endIcon": "MuiButton-endIcon",
- "focusVisible": "Mui-focusVisible",
- "fullWidth": "MuiButton-fullWidth",
- "iconSizeLarge": "MuiButton-iconSizeLarge",
- "iconSizeMedium": "MuiButton-iconSizeMedium",
- "iconSizeSmall": "MuiButton-iconSizeSmall",
- "label": "MuiButton-label text-16-bold",
- "outlined": "MuiButton-outlined",
- "outlinedPrimary": "MuiButton-outlinedPrimary",
- "outlinedSecondary": "MuiButton-outlinedSecondary",
- "outlinedSizeLarge": "MuiButton-outlinedSizeLarge",
- "outlinedSizeSmall": "MuiButton-outlinedSizeSmall",
- "root": "MuiButton-root btn-highlight",
- "sizeLarge": "MuiButton-sizeLarge",
- "sizeSmall": "MuiButton-sizeSmall",
- "startIcon": "MuiButton-startIcon",
- "text": "MuiButton-text",
- "textPrimary": "MuiButton-textPrimary",
- "textSecondary": "MuiButton-textSecondary",
- "textSizeLarge": "MuiButton-textSizeLarge",
- "textSizeSmall": "MuiButton-textSizeSmall",
- }
- }
- onClick={[MockFunction]}
- type="submit"
- >
- <WithStyles(ForwardRef(ButtonBase))
- aria-label="export.modal_done.button_close"
- className="MuiButton-root btn-highlight MuiButton-text"
- component="button"
- disabled={false}
- focusRipple={true}
- focusVisibleClassName="Mui-focusVisible"
- onClick={[MockFunction]}
- type="submit"
- >
- <ForwardRef(ButtonBase)
- aria-label="export.modal_done.button_close"
- className="MuiButton-root btn-highlight MuiButton-text"
- classes={
- Object {
- "disabled": "Mui-disabled",
- "focusVisible": "Mui-focusVisible",
- "root": "MuiButtonBase-root",
- }
- }
- component="button"
- disabled={false}
- focusRipple={true}
- focusVisibleClassName="Mui-focusVisible"
- onClick={[MockFunction]}
- type="submit"
- >
- <button
- aria-label="export.modal_done.button_close"
- className="MuiButtonBase-root MuiButton-root btn-highlight MuiButton-text"
- disabled={false}
- onBlur={[Function]}
- onClick={[MockFunction]}
- onDragLeave={[Function]}
- onFocus={[Function]}
- onKeyDown={[Function]}
- onKeyUp={[Function]}
- onMouseDown={[Function]}
- onMouseLeave={[Function]}
- onMouseUp={[Function]}
- onTouchEnd={[Function]}
- onTouchMove={[Function]}
- onTouchStart={[Function]}
- tabIndex={0}
- type="submit"
- >
- <span
- className="MuiButton-label text-16-bold"
- >
- export.modal_done.button_close
- </span>
- <WithStyles(memo)
- center={false}
- >
- <ForwardRef(TouchRipple)
- center={false}
- classes={
- Object {
- "child": "MuiTouchRipple-child",
- "childLeaving": "MuiTouchRipple-childLeaving",
- "childPulsate": "MuiTouchRipple-childPulsate",
- "ripple": "MuiTouchRipple-ripple",
- "ripplePulsate": "MuiTouchRipple-ripplePulsate",
- "rippleVisible": "MuiTouchRipple-rippleVisible",
- "root": "MuiTouchRipple-root",
- }
- }
- >
- <span
- className="MuiTouchRipple-root"
- >
- <TransitionGroup
- childFactory={[Function]}
- component={null}
- exit={true}
- />
- </span>
- </ForwardRef(TouchRipple)>
- </WithStyles(memo)>
- </button>
- </ForwardRef(ButtonBase)>
- </WithStyles(ForwardRef(ButtonBase))>
- </ForwardRef(Button)>
- </WithStyles(ForwardRef(Button))>
- </div>
- </div>
- </div>
- </ForwardRef(Paper)>
- </WithStyles(ForwardRef(Paper))>
- </div>
- </Transition>
- </ForwardRef(Fade)>
- <div
- data-test="sentinelEnd"
- tabIndex={0}
- />
- </Unstable_TrapFocus>
- </div>
- </Portal>
- </ForwardRef(Portal)>
- </ForwardRef(Modal)>
- </ForwardRef(Dialog)>
- </WithStyles(ForwardRef(Dialog))>
- </ExportDoneModal>
-</Provider>
+ export.modal_done.button_close_error
+ </span>
+ <span
+ class="MuiTouchRipple-root"
+ />
+ </button>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div
+ data-test="sentinelEnd"
+ tabindex="0"
+ />
+ </div>
+</body>
`;
diff --git a/src/components/Options/ExportData/Modals/__snapshots__/exportLoadingModal.spec.tsx.snap b/src/components/Options/ExportData/Modals/__snapshots__/exportLoadingModal.spec.tsx.snap
index 75eccb7dc838b92cb8613f13aca93de306ceaf9e..523b4daa57c80aebfcdcdcc360170ee7023689a5 100644
--- a/src/components/Options/ExportData/Modals/__snapshots__/exportLoadingModal.spec.tsx.snap
+++ b/src/components/Options/ExportData/Modals/__snapshots__/exportLoadingModal.spec.tsx.snap
@@ -1,1052 +1,127 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`ExportLoadingModal component should be rendered correctly 1`] = `
-<Provider
- store={
- Object {
- "clearActions": [Function],
- "dispatch": [Function],
- "getActions": [Function],
- "getState": [Function],
- "replaceReducer": [Function],
- "subscribe": [Function],
- }
- }
+<body
+ style="padding-right: 0px; overflow: hidden;"
>
- <ExportLoadingModal
- handleCloseClick={[MockFunction]}
- handleDone={[MockFunction]}
- open={true}
- selectedFluids={
- Array [
- 0,
- 1,
- 2,
- ]
- }
+ <div
+ aria-hidden="true"
+ />
+ <div
+ class="MuiDialog-root modal-root"
+ role="presentation"
+ style="position: fixed; z-index: 1300; right: 0px; bottom: 0px; top: 0px; left: 0px;"
>
- <WithStyles(ForwardRef(Dialog))
- aria-labelledby="accessibility-title"
- classes={
- Object {
- "paper": "modal-paper",
- "root": "modal-root",
- }
- }
- onClose={[Function]}
- open={true}
+ <div
+ aria-hidden="true"
+ class="MuiBackdrop-root"
+ style="opacity: 1; webkit-transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"
+ />
+ <div
+ data-test="sentinelStart"
+ tabindex="0"
+ />
+ <div
+ class="MuiDialog-container MuiDialog-scrollPaper"
+ role="none presentation"
+ style="opacity: 1; webkit-transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"
+ tabindex="-1"
>
- <ForwardRef(Dialog)
+ <div
aria-labelledby="accessibility-title"
- classes={
- Object {
- "container": "MuiDialog-container",
- "paper": "MuiDialog-paper modal-paper",
- "paperFullScreen": "MuiDialog-paperFullScreen",
- "paperFullWidth": "MuiDialog-paperFullWidth",
- "paperScrollBody": "MuiDialog-paperScrollBody",
- "paperScrollPaper": "MuiDialog-paperScrollPaper",
- "paperWidthFalse": "MuiDialog-paperWidthFalse",
- "paperWidthLg": "MuiDialog-paperWidthLg",
- "paperWidthMd": "MuiDialog-paperWidthMd",
- "paperWidthSm": "MuiDialog-paperWidthSm",
- "paperWidthXl": "MuiDialog-paperWidthXl",
- "paperWidthXs": "MuiDialog-paperWidthXs",
- "root": "MuiDialog-root modal-root",
- "scrollBody": "MuiDialog-scrollBody",
- "scrollPaper": "MuiDialog-scrollPaper",
- }
- }
- onClose={[Function]}
- open={true}
+ class="MuiPaper-root MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm MuiPaper-elevation24 MuiPaper-rounded"
+ role="dialog"
>
- <ForwardRef(Modal)
- BackdropComponent={
- Object {
- "$$typeof": Symbol(react.forward_ref),
- "Naked": Object {
- "$$typeof": Symbol(react.forward_ref),
- "propTypes": Object {
- "children": [Function],
- "className": [Function],
- "classes": [Function],
- "invisible": [Function],
- "open": [Function],
- "transitionDuration": [Function],
- },
- "render": [Function],
- },
- "displayName": "WithStyles(ForwardRef(Backdrop))",
- "options": Object {
- "defaultTheme": Object {
- "breakpoints": Object {
- "between": [Function],
- "down": [Function],
- "keys": Array [
- "xs",
- "sm",
- "md",
- "lg",
- "xl",
- ],
- "only": [Function],
- "up": [Function],
- "values": Object {
- "lg": 1280,
- "md": 960,
- "sm": 600,
- "xl": 1920,
- "xs": 0,
- },
- "width": [Function],
- },
- "direction": "ltr",
- "mixins": Object {
- "gutters": [Function],
- "toolbar": Object {
- "@media (min-width:0px) and (orientation: landscape)": Object {
- "minHeight": 48,
- },
- "@media (min-width:600px)": Object {
- "minHeight": 64,
- },
- "minHeight": 56,
- },
- },
- "overrides": Object {},
- "palette": Object {
- "action": Object {
- "activatedOpacity": 0.12,
- "active": "rgba(0, 0, 0, 0.54)",
- "disabled": "rgba(0, 0, 0, 0.26)",
- "disabledBackground": "rgba(0, 0, 0, 0.12)",
- "disabledOpacity": 0.38,
- "focus": "rgba(0, 0, 0, 0.12)",
- "focusOpacity": 0.12,
- "hover": "rgba(0, 0, 0, 0.04)",
- "hoverOpacity": 0.04,
- "selected": "rgba(0, 0, 0, 0.08)",
- "selectedOpacity": 0.08,
- },
- "augmentColor": [Function],
- "background": Object {
- "default": "#fafafa",
- "paper": "#fff",
- },
- "common": Object {
- "black": "#000",
- "white": "#fff",
- },
- "contrastThreshold": 3,
- "divider": "rgba(0, 0, 0, 0.12)",
- "error": Object {
- "contrastText": "#fff",
- "dark": "#d32f2f",
- "light": "#e57373",
- "main": "#f44336",
- },
- "getContrastText": [Function],
- "grey": Object {
- "100": "#f5f5f5",
- "200": "#eeeeee",
- "300": "#e0e0e0",
- "400": "#bdbdbd",
- "50": "#fafafa",
- "500": "#9e9e9e",
- "600": "#757575",
- "700": "#616161",
- "800": "#424242",
- "900": "#212121",
- "A100": "#d5d5d5",
- "A200": "#aaaaaa",
- "A400": "#303030",
- "A700": "#616161",
- },
- "info": Object {
- "contrastText": "#fff",
- "dark": "#1976d2",
- "light": "#64b5f6",
- "main": "#2196f3",
- },
- "primary": Object {
- "contrastText": "#fff",
- "dark": "#303f9f",
- "light": "#7986cb",
- "main": "#3f51b5",
- },
- "secondary": Object {
- "contrastText": "#fff",
- "dark": "#c51162",
- "light": "#ff4081",
- "main": "#f50057",
- },
- "success": Object {
- "contrastText": "rgba(0, 0, 0, 0.87)",
- "dark": "#388e3c",
- "light": "#81c784",
- "main": "#4caf50",
- },
- "text": Object {
- "disabled": "rgba(0, 0, 0, 0.38)",
- "hint": "rgba(0, 0, 0, 0.38)",
- "primary": "rgba(0, 0, 0, 0.87)",
- "secondary": "rgba(0, 0, 0, 0.54)",
- },
- "tonalOffset": 0.2,
- "type": "light",
- "warning": Object {
- "contrastText": "rgba(0, 0, 0, 0.87)",
- "dark": "#f57c00",
- "light": "#ffb74d",
- "main": "#ff9800",
- },
- },
- "props": Object {},
- "shadows": Array [
- "none",
- "0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12)",
- "0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12)",
- "0px 3px 3px -2px rgba(0,0,0,0.2),0px 3px 4px 0px rgba(0,0,0,0.14),0px 1px 8px 0px rgba(0,0,0,0.12)",
- "0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12)",
- "0px 3px 5px -1px rgba(0,0,0,0.2),0px 5px 8px 0px rgba(0,0,0,0.14),0px 1px 14px 0px rgba(0,0,0,0.12)",
- "0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12)",
- "0px 4px 5px -2px rgba(0,0,0,0.2),0px 7px 10px 1px rgba(0,0,0,0.14),0px 2px 16px 1px rgba(0,0,0,0.12)",
- "0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12)",
- "0px 5px 6px -3px rgba(0,0,0,0.2),0px 9px 12px 1px rgba(0,0,0,0.14),0px 3px 16px 2px rgba(0,0,0,0.12)",
- "0px 6px 6px -3px rgba(0,0,0,0.2),0px 10px 14px 1px rgba(0,0,0,0.14),0px 4px 18px 3px rgba(0,0,0,0.12)",
- "0px 6px 7px -4px rgba(0,0,0,0.2),0px 11px 15px 1px rgba(0,0,0,0.14),0px 4px 20px 3px rgba(0,0,0,0.12)",
- "0px 7px 8px -4px rgba(0,0,0,0.2),0px 12px 17px 2px rgba(0,0,0,0.14),0px 5px 22px 4px rgba(0,0,0,0.12)",
- "0px 7px 8px -4px rgba(0,0,0,0.2),0px 13px 19px 2px rgba(0,0,0,0.14),0px 5px 24px 4px rgba(0,0,0,0.12)",
- "0px 7px 9px -4px rgba(0,0,0,0.2),0px 14px 21px 2px rgba(0,0,0,0.14),0px 5px 26px 4px rgba(0,0,0,0.12)",
- "0px 8px 9px -5px rgba(0,0,0,0.2),0px 15px 22px 2px rgba(0,0,0,0.14),0px 6px 28px 5px rgba(0,0,0,0.12)",
- "0px 8px 10px -5px rgba(0,0,0,0.2),0px 16px 24px 2px rgba(0,0,0,0.14),0px 6px 30px 5px rgba(0,0,0,0.12)",
- "0px 8px 11px -5px rgba(0,0,0,0.2),0px 17px 26px 2px rgba(0,0,0,0.14),0px 6px 32px 5px rgba(0,0,0,0.12)",
- "0px 9px 11px -5px rgba(0,0,0,0.2),0px 18px 28px 2px rgba(0,0,0,0.14),0px 7px 34px 6px rgba(0,0,0,0.12)",
- "0px 9px 12px -6px rgba(0,0,0,0.2),0px 19px 29px 2px rgba(0,0,0,0.14),0px 7px 36px 6px rgba(0,0,0,0.12)",
- "0px 10px 13px -6px rgba(0,0,0,0.2),0px 20px 31px 3px rgba(0,0,0,0.14),0px 8px 38px 7px rgba(0,0,0,0.12)",
- "0px 10px 13px -6px rgba(0,0,0,0.2),0px 21px 33px 3px rgba(0,0,0,0.14),0px 8px 40px 7px rgba(0,0,0,0.12)",
- "0px 10px 14px -6px rgba(0,0,0,0.2),0px 22px 35px 3px rgba(0,0,0,0.14),0px 8px 42px 7px rgba(0,0,0,0.12)",
- "0px 11px 14px -7px rgba(0,0,0,0.2),0px 23px 36px 3px rgba(0,0,0,0.14),0px 9px 44px 8px rgba(0,0,0,0.12)",
- "0px 11px 15px -7px rgba(0,0,0,0.2),0px 24px 38px 3px rgba(0,0,0,0.14),0px 9px 46px 8px rgba(0,0,0,0.12)",
- ],
- "shape": Object {
- "borderRadius": 4,
- },
- "spacing": [Function],
- "transitions": Object {
- "create": [Function],
- "duration": Object {
- "complex": 375,
- "enteringScreen": 225,
- "leavingScreen": 195,
- "short": 250,
- "shorter": 200,
- "shortest": 150,
- "standard": 300,
- },
- "easing": Object {
- "easeIn": "cubic-bezier(0.4, 0, 1, 1)",
- "easeInOut": "cubic-bezier(0.4, 0, 0.2, 1)",
- "easeOut": "cubic-bezier(0.0, 0, 0.2, 1)",
- "sharp": "cubic-bezier(0.4, 0, 0.6, 1)",
- },
- "getAutoHeightDuration": [Function],
- },
- "typography": Object {
- "body1": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "1rem",
- "fontWeight": 400,
- "letterSpacing": "0.00938em",
- "lineHeight": 1.5,
- },
- "body2": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "0.875rem",
- "fontWeight": 400,
- "letterSpacing": "0.01071em",
- "lineHeight": 1.43,
- },
- "button": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "0.875rem",
- "fontWeight": 500,
- "letterSpacing": "0.02857em",
- "lineHeight": 1.75,
- "textTransform": "uppercase",
- },
- "caption": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "0.75rem",
- "fontWeight": 400,
- "letterSpacing": "0.03333em",
- "lineHeight": 1.66,
- },
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": 14,
- "fontWeightBold": 700,
- "fontWeightLight": 300,
- "fontWeightMedium": 500,
- "fontWeightRegular": 400,
- "h1": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "6rem",
- "fontWeight": 300,
- "letterSpacing": "-0.01562em",
- "lineHeight": 1.167,
- },
- "h2": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "3.75rem",
- "fontWeight": 300,
- "letterSpacing": "-0.00833em",
- "lineHeight": 1.2,
- },
- "h3": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "3rem",
- "fontWeight": 400,
- "letterSpacing": "0em",
- "lineHeight": 1.167,
- },
- "h4": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "2.125rem",
- "fontWeight": 400,
- "letterSpacing": "0.00735em",
- "lineHeight": 1.235,
- },
- "h5": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "1.5rem",
- "fontWeight": 400,
- "letterSpacing": "0em",
- "lineHeight": 1.334,
- },
- "h6": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "1.25rem",
- "fontWeight": 500,
- "letterSpacing": "0.0075em",
- "lineHeight": 1.6,
- },
- "htmlFontSize": 16,
- "overline": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "0.75rem",
- "fontWeight": 400,
- "letterSpacing": "0.08333em",
- "lineHeight": 2.66,
- "textTransform": "uppercase",
- },
- "pxToRem": [Function],
- "round": [Function],
- "subtitle1": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "1rem",
- "fontWeight": 400,
- "letterSpacing": "0.00938em",
- "lineHeight": 1.75,
- },
- "subtitle2": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "0.875rem",
- "fontWeight": 500,
- "letterSpacing": "0.00714em",
- "lineHeight": 1.57,
- },
- },
- "zIndex": Object {
- "appBar": 1100,
- "drawer": 1200,
- "mobileStepper": 1000,
- "modal": 1300,
- "snackbar": 1400,
- "speedDial": 1050,
- "tooltip": 1500,
- },
- },
- "name": "MuiBackdrop",
- },
- "propTypes": Object {
- "classes": [Function],
- "innerRef": [Function],
- },
- "render": [Function],
- "useStyles": [Function],
- }
- }
- BackdropProps={
- Object {
- "transitionDuration": Object {
- "enter": 225,
- "exit": 195,
- },
- }
- }
- className="MuiDialog-root modal-root"
- closeAfterTransition={true}
- disableEscapeKeyDown={false}
- onClose={[Function]}
- open={true}
+ <div
+ id="accessibility-title"
>
- <ForwardRef(Portal)
- disablePortal={false}
+ export.modal_loading.accessibility_title
+ </div>
+ <div
+ class="modal-loading-root"
+ >
+ <button
+ aria-label="export.button_close"
+ class="MuiButtonBase-root MuiIconButton-root modal-paper-close-button"
+ tabindex="0"
+ type="button"
>
- <Portal
- containerInfo={
- <body
- style="padding-right: 0px; overflow: hidden;"
- >
- <div
- class="MuiDialog-root modal-root"
- role="presentation"
- style="position: fixed; z-index: 1300; right: 0px; bottom: 0px; top: 0px; left: 0px;"
- >
- <div
- aria-hidden="true"
- class="MuiBackdrop-root"
- style="opacity: 1; webkit-transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"
- />
- <div
- data-test="sentinelStart"
- tabindex="0"
- />
- <div
- class="MuiDialog-container MuiDialog-scrollPaper"
- role="none presentation"
- style="opacity: 1; webkit-transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"
- tabindex="-1"
- >
- <div
- aria-labelledby="accessibility-title"
- class="MuiPaper-root MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm MuiPaper-elevation24 MuiPaper-rounded"
- role="dialog"
- >
- <div
- id="accessibility-title"
- >
- export.modal_loading.accessibility_title
- </div>
- <div
- class="modal-loading-root"
- >
- <div>
- <button
- aria-label="export.button_close"
- class="MuiButtonBase-root MuiIconButton-root modal-paper-close-button"
- tabindex="0"
- type="button"
- >
- <span
- class="MuiIconButton-label"
- >
- <svg
- class="styles__icon___23x3R"
- height="18"
- width="18"
- >
- <use
- xlink:href="#test-file-stub"
- />
- </svg>
- </span>
- <span
- class="MuiTouchRipple-root"
- />
- </button>
- </div>
- <div
- class="content"
- >
- <div
- class="icon-main"
- >
- <div
- class="loader gold"
- >
- <div
- aria-busy="true"
- aria-label="common.accessibility.loading"
- class="bars "
- title="common.accessibility.loading"
- >
- <div
- class="bar"
- />
- <div
- class="bar"
- />
- <div
- class="bar"
- />
- </div>
- </div>
- </div>
- <div
- class="text-16-bold text text1"
- >
- export.modal_loading.text1
- </div>
- <div
- class="text-16-normal text"
- >
- export.modal_loading.text2
- </div>
- <button
- aria-label="export.modal_loading.button_cancel"
- class="MuiButtonBase-root MuiButton-root btn-secondary-negative MuiButton-text"
- tabindex="0"
- type="submit"
- >
- <span
- class="MuiButton-label text-16-bold"
- >
- export.modal_loading.button_cancel
- </span>
- <span
- class="MuiTouchRipple-root"
- />
- </button>
- </div>
- </div>
- </div>
- </div>
- <div
- data-test="sentinelEnd"
- tabindex="0"
- />
- </div>
- </body>
- }
+ <span
+ class="MuiIconButton-label"
+ >
+ <svg
+ class="styles__icon___23x3R"
+ height="18"
+ width="18"
+ >
+ <use
+ xlink:href="#test-file-stub"
+ />
+ </svg>
+ </span>
+ <span
+ class="MuiTouchRipple-root"
+ />
+ </button>
+ <div
+ class="content"
+ >
+ <div
+ class="icon-main"
>
<div
- className="MuiDialog-root modal-root"
- onKeyDown={[Function]}
- role="presentation"
- style={
- Object {
- "bottom": 0,
- "left": 0,
- "position": "fixed",
- "right": 0,
- "top": 0,
- "zIndex": 1300,
- }
- }
+ class="loader gold"
>
- <WithStyles(ForwardRef(Backdrop))
- onClick={[Function]}
- open={true}
- transitionDuration={
- Object {
- "enter": 225,
- "exit": 195,
- }
- }
- >
- <ForwardRef(Backdrop)
- classes={
- Object {
- "invisible": "MuiBackdrop-invisible",
- "root": "MuiBackdrop-root",
- }
- }
- onClick={[Function]}
- open={true}
- transitionDuration={
- Object {
- "enter": 225,
- "exit": 195,
- }
- }
- >
- <ForwardRef(Fade)
- in={true}
- onClick={[Function]}
- timeout={
- Object {
- "enter": 225,
- "exit": 195,
- }
- }
- >
- <Transition
- appear={true}
- enter={true}
- exit={true}
- in={true}
- mountOnEnter={false}
- onClick={[Function]}
- onEnter={[Function]}
- onEntered={[Function]}
- onEntering={[Function]}
- onExit={[Function]}
- onExited={[Function]}
- onExiting={[Function]}
- timeout={
- Object {
- "enter": 225,
- "exit": 195,
- }
- }
- unmountOnExit={false}
- >
- <div
- aria-hidden={true}
- className="MuiBackdrop-root"
- onClick={[Function]}
- style={
- Object {
- "opacity": 1,
- "visibility": undefined,
- }
- }
- />
- </Transition>
- </ForwardRef(Fade)>
- </ForwardRef(Backdrop)>
- </WithStyles(ForwardRef(Backdrop))>
- <Unstable_TrapFocus
- disableAutoFocus={false}
- disableEnforceFocus={false}
- disableRestoreFocus={false}
- getDoc={[Function]}
- isEnabled={[Function]}
- open={true}
+ <div
+ aria-busy="true"
+ aria-label="common.accessibility.loading"
+ class="bars"
+ role="progressbar"
+ title="common.accessibility.loading"
>
<div
- data-test="sentinelStart"
- tabIndex={0}
+ class="bar"
+ />
+ <div
+ class="bar"
/>
- <ForwardRef(Fade)
- appear={true}
- in={true}
- onEnter={[Function]}
- onExited={[Function]}
- role="none presentation"
- tabIndex="-1"
- timeout={
- Object {
- "enter": 225,
- "exit": 195,
- }
- }
- >
- <Transition
- appear={true}
- enter={true}
- exit={true}
- in={true}
- mountOnEnter={false}
- onEnter={[Function]}
- onEntered={[Function]}
- onEntering={[Function]}
- onExit={[Function]}
- onExited={[Function]}
- onExiting={[Function]}
- role="none presentation"
- tabIndex="-1"
- timeout={
- Object {
- "enter": 225,
- "exit": 195,
- }
- }
- unmountOnExit={false}
- >
- <div
- className="MuiDialog-container MuiDialog-scrollPaper"
- onMouseDown={[Function]}
- onMouseUp={[Function]}
- role="none presentation"
- style={
- Object {
- "opacity": 1,
- "visibility": undefined,
- }
- }
- tabIndex="-1"
- >
- <WithStyles(ForwardRef(Paper))
- aria-labelledby="accessibility-title"
- className="MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm"
- elevation={24}
- role="dialog"
- >
- <ForwardRef(Paper)
- aria-labelledby="accessibility-title"
- className="MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm"
- classes={
- Object {
- "elevation0": "MuiPaper-elevation0",
- "elevation1": "MuiPaper-elevation1",
- "elevation10": "MuiPaper-elevation10",
- "elevation11": "MuiPaper-elevation11",
- "elevation12": "MuiPaper-elevation12",
- "elevation13": "MuiPaper-elevation13",
- "elevation14": "MuiPaper-elevation14",
- "elevation15": "MuiPaper-elevation15",
- "elevation16": "MuiPaper-elevation16",
- "elevation17": "MuiPaper-elevation17",
- "elevation18": "MuiPaper-elevation18",
- "elevation19": "MuiPaper-elevation19",
- "elevation2": "MuiPaper-elevation2",
- "elevation20": "MuiPaper-elevation20",
- "elevation21": "MuiPaper-elevation21",
- "elevation22": "MuiPaper-elevation22",
- "elevation23": "MuiPaper-elevation23",
- "elevation24": "MuiPaper-elevation24",
- "elevation3": "MuiPaper-elevation3",
- "elevation4": "MuiPaper-elevation4",
- "elevation5": "MuiPaper-elevation5",
- "elevation6": "MuiPaper-elevation6",
- "elevation7": "MuiPaper-elevation7",
- "elevation8": "MuiPaper-elevation8",
- "elevation9": "MuiPaper-elevation9",
- "outlined": "MuiPaper-outlined",
- "root": "MuiPaper-root",
- "rounded": "MuiPaper-rounded",
- }
- }
- elevation={24}
- role="dialog"
- >
- <div
- aria-labelledby="accessibility-title"
- className="MuiPaper-root MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm MuiPaper-elevation24 MuiPaper-rounded"
- role="dialog"
- >
- <div
- id="accessibility-title"
- >
- export.modal_loading.accessibility_title
- </div>
- <div
- className="modal-loading-root"
- >
- <div
- onClick={[MockFunction]}
- >
- <WithStyles(ForwardRef(IconButton))
- aria-label="export.button_close"
- className="modal-paper-close-button"
- onClick={[MockFunction]}
- >
- <ForwardRef(IconButton)
- aria-label="export.button_close"
- className="modal-paper-close-button"
- classes={
- Object {
- "colorInherit": "MuiIconButton-colorInherit",
- "colorPrimary": "MuiIconButton-colorPrimary",
- "colorSecondary": "MuiIconButton-colorSecondary",
- "disabled": "Mui-disabled",
- "edgeEnd": "MuiIconButton-edgeEnd",
- "edgeStart": "MuiIconButton-edgeStart",
- "label": "MuiIconButton-label",
- "root": "MuiIconButton-root",
- "sizeSmall": "MuiIconButton-sizeSmall",
- }
- }
- onClick={[MockFunction]}
- >
- <WithStyles(ForwardRef(ButtonBase))
- aria-label="export.button_close"
- centerRipple={true}
- className="MuiIconButton-root modal-paper-close-button"
- disabled={false}
- focusRipple={true}
- onClick={[MockFunction]}
- >
- <ForwardRef(ButtonBase)
- aria-label="export.button_close"
- centerRipple={true}
- className="MuiIconButton-root modal-paper-close-button"
- classes={
- Object {
- "disabled": "Mui-disabled",
- "focusVisible": "Mui-focusVisible",
- "root": "MuiButtonBase-root",
- }
- }
- disabled={false}
- focusRipple={true}
- onClick={[MockFunction]}
- >
- <button
- aria-label="export.button_close"
- className="MuiButtonBase-root MuiIconButton-root modal-paper-close-button"
- disabled={false}
- onBlur={[Function]}
- onClick={[MockFunction]}
- onDragLeave={[Function]}
- onFocus={[Function]}
- onKeyDown={[Function]}
- onKeyUp={[Function]}
- onMouseDown={[Function]}
- onMouseLeave={[Function]}
- onMouseUp={[Function]}
- onTouchEnd={[Function]}
- onTouchMove={[Function]}
- onTouchStart={[Function]}
- tabIndex={0}
- type="button"
- >
- <span
- className="MuiIconButton-label"
- >
- <Icon
- icon="test-file-stub"
- size={18}
- spin={false}
- >
- <Component
- className="styles__icon___23x3R"
- height={18}
- style={Object {}}
- width={18}
- >
- <svg
- className="styles__icon___23x3R"
- height={18}
- style={Object {}}
- width={18}
- >
- <use
- xlinkHref="#test-file-stub"
- />
- </svg>
- </Component>
- </Icon>
- </span>
- <WithStyles(memo)
- center={true}
- >
- <ForwardRef(TouchRipple)
- center={true}
- classes={
- Object {
- "child": "MuiTouchRipple-child",
- "childLeaving": "MuiTouchRipple-childLeaving",
- "childPulsate": "MuiTouchRipple-childPulsate",
- "ripple": "MuiTouchRipple-ripple",
- "ripplePulsate": "MuiTouchRipple-ripplePulsate",
- "rippleVisible": "MuiTouchRipple-rippleVisible",
- "root": "MuiTouchRipple-root",
- }
- }
- >
- <span
- className="MuiTouchRipple-root"
- >
- <TransitionGroup
- childFactory={[Function]}
- component={null}
- exit={true}
- />
- </span>
- </ForwardRef(TouchRipple)>
- </WithStyles(memo)>
- </button>
- </ForwardRef(ButtonBase)>
- </WithStyles(ForwardRef(ButtonBase))>
- </ForwardRef(IconButton)>
- </WithStyles(ForwardRef(IconButton))>
- </div>
- <div
- className="content"
- >
- <div
- className="icon-main"
- >
- <Loader
- color="gold"
- >
- <div
- className="loader gold"
- >
- <div
- aria-busy="true"
- aria-label="common.accessibility.loading"
- className="bars "
- title="common.accessibility.loading"
- >
- <div
- className="bar"
- />
- <div
- className="bar"
- />
- <div
- className="bar"
- />
- </div>
- </div>
- </Loader>
- </div>
- <div
- className="text-16-bold text text1"
- >
- export.modal_loading.text1
- </div>
- <div
- className="text-16-normal text"
- >
- export.modal_loading.text2
- </div>
- <WithStyles(ForwardRef(Button))
- aria-label="export.modal_loading.button_cancel"
- classes={
- Object {
- "label": "text-16-bold",
- "root": "btn-secondary-negative",
- }
- }
- onClick={[MockFunction]}
- type="submit"
- >
- <ForwardRef(Button)
- aria-label="export.modal_loading.button_cancel"
- classes={
- Object {
- "colorInherit": "MuiButton-colorInherit",
- "contained": "MuiButton-contained",
- "containedPrimary": "MuiButton-containedPrimary",
- "containedSecondary": "MuiButton-containedSecondary",
- "containedSizeLarge": "MuiButton-containedSizeLarge",
- "containedSizeSmall": "MuiButton-containedSizeSmall",
- "disableElevation": "MuiButton-disableElevation",
- "disabled": "Mui-disabled",
- "endIcon": "MuiButton-endIcon",
- "focusVisible": "Mui-focusVisible",
- "fullWidth": "MuiButton-fullWidth",
- "iconSizeLarge": "MuiButton-iconSizeLarge",
- "iconSizeMedium": "MuiButton-iconSizeMedium",
- "iconSizeSmall": "MuiButton-iconSizeSmall",
- "label": "MuiButton-label text-16-bold",
- "outlined": "MuiButton-outlined",
- "outlinedPrimary": "MuiButton-outlinedPrimary",
- "outlinedSecondary": "MuiButton-outlinedSecondary",
- "outlinedSizeLarge": "MuiButton-outlinedSizeLarge",
- "outlinedSizeSmall": "MuiButton-outlinedSizeSmall",
- "root": "MuiButton-root btn-secondary-negative",
- "sizeLarge": "MuiButton-sizeLarge",
- "sizeSmall": "MuiButton-sizeSmall",
- "startIcon": "MuiButton-startIcon",
- "text": "MuiButton-text",
- "textPrimary": "MuiButton-textPrimary",
- "textSecondary": "MuiButton-textSecondary",
- "textSizeLarge": "MuiButton-textSizeLarge",
- "textSizeSmall": "MuiButton-textSizeSmall",
- }
- }
- onClick={[MockFunction]}
- type="submit"
- >
- <WithStyles(ForwardRef(ButtonBase))
- aria-label="export.modal_loading.button_cancel"
- className="MuiButton-root btn-secondary-negative MuiButton-text"
- component="button"
- disabled={false}
- focusRipple={true}
- focusVisibleClassName="Mui-focusVisible"
- onClick={[MockFunction]}
- type="submit"
- >
- <ForwardRef(ButtonBase)
- aria-label="export.modal_loading.button_cancel"
- className="MuiButton-root btn-secondary-negative MuiButton-text"
- classes={
- Object {
- "disabled": "Mui-disabled",
- "focusVisible": "Mui-focusVisible",
- "root": "MuiButtonBase-root",
- }
- }
- component="button"
- disabled={false}
- focusRipple={true}
- focusVisibleClassName="Mui-focusVisible"
- onClick={[MockFunction]}
- type="submit"
- >
- <button
- aria-label="export.modal_loading.button_cancel"
- className="MuiButtonBase-root MuiButton-root btn-secondary-negative MuiButton-text"
- disabled={false}
- onBlur={[Function]}
- onClick={[MockFunction]}
- onDragLeave={[Function]}
- onFocus={[Function]}
- onKeyDown={[Function]}
- onKeyUp={[Function]}
- onMouseDown={[Function]}
- onMouseLeave={[Function]}
- onMouseUp={[Function]}
- onTouchEnd={[Function]}
- onTouchMove={[Function]}
- onTouchStart={[Function]}
- tabIndex={0}
- type="submit"
- >
- <span
- className="MuiButton-label text-16-bold"
- >
- export.modal_loading.button_cancel
- </span>
- <WithStyles(memo)
- center={false}
- >
- <ForwardRef(TouchRipple)
- center={false}
- classes={
- Object {
- "child": "MuiTouchRipple-child",
- "childLeaving": "MuiTouchRipple-childLeaving",
- "childPulsate": "MuiTouchRipple-childPulsate",
- "ripple": "MuiTouchRipple-ripple",
- "ripplePulsate": "MuiTouchRipple-ripplePulsate",
- "rippleVisible": "MuiTouchRipple-rippleVisible",
- "root": "MuiTouchRipple-root",
- }
- }
- >
- <span
- className="MuiTouchRipple-root"
- >
- <TransitionGroup
- childFactory={[Function]}
- component={null}
- exit={true}
- />
- </span>
- </ForwardRef(TouchRipple)>
- </WithStyles(memo)>
- </button>
- </ForwardRef(ButtonBase)>
- </WithStyles(ForwardRef(ButtonBase))>
- </ForwardRef(Button)>
- </WithStyles(ForwardRef(Button))>
- </div>
- </div>
- </div>
- </ForwardRef(Paper)>
- </WithStyles(ForwardRef(Paper))>
- </div>
- </Transition>
- </ForwardRef(Fade)>
<div
- data-test="sentinelEnd"
- tabIndex={0}
+ class="bar"
/>
- </Unstable_TrapFocus>
+ </div>
</div>
- </Portal>
- </ForwardRef(Portal)>
- </ForwardRef(Modal)>
- </ForwardRef(Dialog)>
- </WithStyles(ForwardRef(Dialog))>
- </ExportLoadingModal>
-</Provider>
+ </div>
+ <div
+ class="text-16-bold subtitle"
+ >
+ export.modal_loading.text1
+ </div>
+ <div>
+ export.modal_loading.text2
+ </div>
+ <button
+ aria-label="export.modal_loading.button_cancel"
+ class="MuiButtonBase-root MuiButton-root MuiButton-text btnSecondary"
+ tabindex="0"
+ type="button"
+ >
+ <span
+ class="MuiButton-label"
+ >
+ export.modal_loading.button_cancel
+ </span>
+ <span
+ class="MuiTouchRipple-root"
+ />
+ </button>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div
+ data-test="sentinelEnd"
+ tabindex="0"
+ />
+ </div>
+</body>
`;
diff --git a/src/components/Options/ExportData/Modals/__snapshots__/exportStartModal.spec.tsx.snap b/src/components/Options/ExportData/Modals/__snapshots__/exportStartModal.spec.tsx.snap
index 543ec790c3bae74ee027b6467aec960754a79ed3..dcd482806bf0e6bf6615d974fcdbbef16d16b656 100644
--- a/src/components/Options/ExportData/Modals/__snapshots__/exportStartModal.spec.tsx.snap
+++ b/src/components/Options/ExportData/Modals/__snapshots__/exportStartModal.spec.tsx.snap
@@ -1,1193 +1,136 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`exportStartModal component should be rendered correctly 1`] = `
-<Provider
- store={
- Object {
- "clearActions": [Function],
- "dispatch": [Function],
- "getActions": [Function],
- "getState": [Function],
- "replaceReducer": [Function],
- "subscribe": [Function],
- }
- }
+<body
+ style="padding-right: 0px; overflow: hidden;"
>
- <ExportStartModal
- handleCloseClick={[MockFunction]}
- handleDownloadClick={[MockFunction]}
- open={true}
+ <div
+ aria-hidden="true"
+ />
+ <div
+ class="MuiDialog-root modal-root"
+ role="presentation"
+ style="position: fixed; z-index: 1300; right: 0px; bottom: 0px; top: 0px; left: 0px;"
>
- <WithStyles(ForwardRef(Dialog))
- aria-labelledby="accessibility_title"
- classes={
- Object {
- "paper": "modal-paper",
- "root": "modal-root",
- }
- }
- onClose={[MockFunction]}
- open={true}
+ <div
+ aria-hidden="true"
+ class="MuiBackdrop-root"
+ style="opacity: 1; webkit-transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"
+ />
+ <div
+ data-test="sentinelStart"
+ tabindex="0"
+ />
+ <div
+ class="MuiDialog-container MuiDialog-scrollPaper"
+ role="none presentation"
+ style="opacity: 1; webkit-transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"
+ tabindex="-1"
>
- <ForwardRef(Dialog)
+ <div
aria-labelledby="accessibility_title"
- classes={
- Object {
- "container": "MuiDialog-container",
- "paper": "MuiDialog-paper modal-paper",
- "paperFullScreen": "MuiDialog-paperFullScreen",
- "paperFullWidth": "MuiDialog-paperFullWidth",
- "paperScrollBody": "MuiDialog-paperScrollBody",
- "paperScrollPaper": "MuiDialog-paperScrollPaper",
- "paperWidthFalse": "MuiDialog-paperWidthFalse",
- "paperWidthLg": "MuiDialog-paperWidthLg",
- "paperWidthMd": "MuiDialog-paperWidthMd",
- "paperWidthSm": "MuiDialog-paperWidthSm",
- "paperWidthXl": "MuiDialog-paperWidthXl",
- "paperWidthXs": "MuiDialog-paperWidthXs",
- "root": "MuiDialog-root modal-root",
- "scrollBody": "MuiDialog-scrollBody",
- "scrollPaper": "MuiDialog-scrollPaper",
- }
- }
- onClose={[MockFunction]}
- open={true}
+ class="MuiPaper-root MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm MuiPaper-elevation24 MuiPaper-rounded"
+ role="dialog"
>
- <ForwardRef(Modal)
- BackdropComponent={
- Object {
- "$$typeof": Symbol(react.forward_ref),
- "Naked": Object {
- "$$typeof": Symbol(react.forward_ref),
- "propTypes": Object {
- "children": [Function],
- "className": [Function],
- "classes": [Function],
- "invisible": [Function],
- "open": [Function],
- "transitionDuration": [Function],
- },
- "render": [Function],
- },
- "displayName": "WithStyles(ForwardRef(Backdrop))",
- "options": Object {
- "defaultTheme": Object {
- "breakpoints": Object {
- "between": [Function],
- "down": [Function],
- "keys": Array [
- "xs",
- "sm",
- "md",
- "lg",
- "xl",
- ],
- "only": [Function],
- "up": [Function],
- "values": Object {
- "lg": 1280,
- "md": 960,
- "sm": 600,
- "xl": 1920,
- "xs": 0,
- },
- "width": [Function],
- },
- "direction": "ltr",
- "mixins": Object {
- "gutters": [Function],
- "toolbar": Object {
- "@media (min-width:0px) and (orientation: landscape)": Object {
- "minHeight": 48,
- },
- "@media (min-width:600px)": Object {
- "minHeight": 64,
- },
- "minHeight": 56,
- },
- },
- "overrides": Object {},
- "palette": Object {
- "action": Object {
- "activatedOpacity": 0.12,
- "active": "rgba(0, 0, 0, 0.54)",
- "disabled": "rgba(0, 0, 0, 0.26)",
- "disabledBackground": "rgba(0, 0, 0, 0.12)",
- "disabledOpacity": 0.38,
- "focus": "rgba(0, 0, 0, 0.12)",
- "focusOpacity": 0.12,
- "hover": "rgba(0, 0, 0, 0.04)",
- "hoverOpacity": 0.04,
- "selected": "rgba(0, 0, 0, 0.08)",
- "selectedOpacity": 0.08,
- },
- "augmentColor": [Function],
- "background": Object {
- "default": "#fafafa",
- "paper": "#fff",
- },
- "common": Object {
- "black": "#000",
- "white": "#fff",
- },
- "contrastThreshold": 3,
- "divider": "rgba(0, 0, 0, 0.12)",
- "error": Object {
- "contrastText": "#fff",
- "dark": "#d32f2f",
- "light": "#e57373",
- "main": "#f44336",
- },
- "getContrastText": [Function],
- "grey": Object {
- "100": "#f5f5f5",
- "200": "#eeeeee",
- "300": "#e0e0e0",
- "400": "#bdbdbd",
- "50": "#fafafa",
- "500": "#9e9e9e",
- "600": "#757575",
- "700": "#616161",
- "800": "#424242",
- "900": "#212121",
- "A100": "#d5d5d5",
- "A200": "#aaaaaa",
- "A400": "#303030",
- "A700": "#616161",
- },
- "info": Object {
- "contrastText": "#fff",
- "dark": "#1976d2",
- "light": "#64b5f6",
- "main": "#2196f3",
- },
- "primary": Object {
- "contrastText": "#fff",
- "dark": "#303f9f",
- "light": "#7986cb",
- "main": "#3f51b5",
- },
- "secondary": Object {
- "contrastText": "#fff",
- "dark": "#c51162",
- "light": "#ff4081",
- "main": "#f50057",
- },
- "success": Object {
- "contrastText": "rgba(0, 0, 0, 0.87)",
- "dark": "#388e3c",
- "light": "#81c784",
- "main": "#4caf50",
- },
- "text": Object {
- "disabled": "rgba(0, 0, 0, 0.38)",
- "hint": "rgba(0, 0, 0, 0.38)",
- "primary": "rgba(0, 0, 0, 0.87)",
- "secondary": "rgba(0, 0, 0, 0.54)",
- },
- "tonalOffset": 0.2,
- "type": "light",
- "warning": Object {
- "contrastText": "rgba(0, 0, 0, 0.87)",
- "dark": "#f57c00",
- "light": "#ffb74d",
- "main": "#ff9800",
- },
- },
- "props": Object {},
- "shadows": Array [
- "none",
- "0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12)",
- "0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12)",
- "0px 3px 3px -2px rgba(0,0,0,0.2),0px 3px 4px 0px rgba(0,0,0,0.14),0px 1px 8px 0px rgba(0,0,0,0.12)",
- "0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12)",
- "0px 3px 5px -1px rgba(0,0,0,0.2),0px 5px 8px 0px rgba(0,0,0,0.14),0px 1px 14px 0px rgba(0,0,0,0.12)",
- "0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12)",
- "0px 4px 5px -2px rgba(0,0,0,0.2),0px 7px 10px 1px rgba(0,0,0,0.14),0px 2px 16px 1px rgba(0,0,0,0.12)",
- "0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12)",
- "0px 5px 6px -3px rgba(0,0,0,0.2),0px 9px 12px 1px rgba(0,0,0,0.14),0px 3px 16px 2px rgba(0,0,0,0.12)",
- "0px 6px 6px -3px rgba(0,0,0,0.2),0px 10px 14px 1px rgba(0,0,0,0.14),0px 4px 18px 3px rgba(0,0,0,0.12)",
- "0px 6px 7px -4px rgba(0,0,0,0.2),0px 11px 15px 1px rgba(0,0,0,0.14),0px 4px 20px 3px rgba(0,0,0,0.12)",
- "0px 7px 8px -4px rgba(0,0,0,0.2),0px 12px 17px 2px rgba(0,0,0,0.14),0px 5px 22px 4px rgba(0,0,0,0.12)",
- "0px 7px 8px -4px rgba(0,0,0,0.2),0px 13px 19px 2px rgba(0,0,0,0.14),0px 5px 24px 4px rgba(0,0,0,0.12)",
- "0px 7px 9px -4px rgba(0,0,0,0.2),0px 14px 21px 2px rgba(0,0,0,0.14),0px 5px 26px 4px rgba(0,0,0,0.12)",
- "0px 8px 9px -5px rgba(0,0,0,0.2),0px 15px 22px 2px rgba(0,0,0,0.14),0px 6px 28px 5px rgba(0,0,0,0.12)",
- "0px 8px 10px -5px rgba(0,0,0,0.2),0px 16px 24px 2px rgba(0,0,0,0.14),0px 6px 30px 5px rgba(0,0,0,0.12)",
- "0px 8px 11px -5px rgba(0,0,0,0.2),0px 17px 26px 2px rgba(0,0,0,0.14),0px 6px 32px 5px rgba(0,0,0,0.12)",
- "0px 9px 11px -5px rgba(0,0,0,0.2),0px 18px 28px 2px rgba(0,0,0,0.14),0px 7px 34px 6px rgba(0,0,0,0.12)",
- "0px 9px 12px -6px rgba(0,0,0,0.2),0px 19px 29px 2px rgba(0,0,0,0.14),0px 7px 36px 6px rgba(0,0,0,0.12)",
- "0px 10px 13px -6px rgba(0,0,0,0.2),0px 20px 31px 3px rgba(0,0,0,0.14),0px 8px 38px 7px rgba(0,0,0,0.12)",
- "0px 10px 13px -6px rgba(0,0,0,0.2),0px 21px 33px 3px rgba(0,0,0,0.14),0px 8px 40px 7px rgba(0,0,0,0.12)",
- "0px 10px 14px -6px rgba(0,0,0,0.2),0px 22px 35px 3px rgba(0,0,0,0.14),0px 8px 42px 7px rgba(0,0,0,0.12)",
- "0px 11px 14px -7px rgba(0,0,0,0.2),0px 23px 36px 3px rgba(0,0,0,0.14),0px 9px 44px 8px rgba(0,0,0,0.12)",
- "0px 11px 15px -7px rgba(0,0,0,0.2),0px 24px 38px 3px rgba(0,0,0,0.14),0px 9px 46px 8px rgba(0,0,0,0.12)",
- ],
- "shape": Object {
- "borderRadius": 4,
- },
- "spacing": [Function],
- "transitions": Object {
- "create": [Function],
- "duration": Object {
- "complex": 375,
- "enteringScreen": 225,
- "leavingScreen": 195,
- "short": 250,
- "shorter": 200,
- "shortest": 150,
- "standard": 300,
- },
- "easing": Object {
- "easeIn": "cubic-bezier(0.4, 0, 1, 1)",
- "easeInOut": "cubic-bezier(0.4, 0, 0.2, 1)",
- "easeOut": "cubic-bezier(0.0, 0, 0.2, 1)",
- "sharp": "cubic-bezier(0.4, 0, 0.6, 1)",
- },
- "getAutoHeightDuration": [Function],
- },
- "typography": Object {
- "body1": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "1rem",
- "fontWeight": 400,
- "letterSpacing": "0.00938em",
- "lineHeight": 1.5,
- },
- "body2": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "0.875rem",
- "fontWeight": 400,
- "letterSpacing": "0.01071em",
- "lineHeight": 1.43,
- },
- "button": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "0.875rem",
- "fontWeight": 500,
- "letterSpacing": "0.02857em",
- "lineHeight": 1.75,
- "textTransform": "uppercase",
- },
- "caption": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "0.75rem",
- "fontWeight": 400,
- "letterSpacing": "0.03333em",
- "lineHeight": 1.66,
- },
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": 14,
- "fontWeightBold": 700,
- "fontWeightLight": 300,
- "fontWeightMedium": 500,
- "fontWeightRegular": 400,
- "h1": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "6rem",
- "fontWeight": 300,
- "letterSpacing": "-0.01562em",
- "lineHeight": 1.167,
- },
- "h2": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "3.75rem",
- "fontWeight": 300,
- "letterSpacing": "-0.00833em",
- "lineHeight": 1.2,
- },
- "h3": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "3rem",
- "fontWeight": 400,
- "letterSpacing": "0em",
- "lineHeight": 1.167,
- },
- "h4": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "2.125rem",
- "fontWeight": 400,
- "letterSpacing": "0.00735em",
- "lineHeight": 1.235,
- },
- "h5": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "1.5rem",
- "fontWeight": 400,
- "letterSpacing": "0em",
- "lineHeight": 1.334,
- },
- "h6": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "1.25rem",
- "fontWeight": 500,
- "letterSpacing": "0.0075em",
- "lineHeight": 1.6,
- },
- "htmlFontSize": 16,
- "overline": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "0.75rem",
- "fontWeight": 400,
- "letterSpacing": "0.08333em",
- "lineHeight": 2.66,
- "textTransform": "uppercase",
- },
- "pxToRem": [Function],
- "round": [Function],
- "subtitle1": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "1rem",
- "fontWeight": 400,
- "letterSpacing": "0.00938em",
- "lineHeight": 1.75,
- },
- "subtitle2": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "0.875rem",
- "fontWeight": 500,
- "letterSpacing": "0.00714em",
- "lineHeight": 1.57,
- },
- },
- "zIndex": Object {
- "appBar": 1100,
- "drawer": 1200,
- "mobileStepper": 1000,
- "modal": 1300,
- "snackbar": 1400,
- "speedDial": 1050,
- "tooltip": 1500,
- },
- },
- "name": "MuiBackdrop",
- },
- "propTypes": Object {
- "classes": [Function],
- "innerRef": [Function],
- },
- "render": [Function],
- "useStyles": [Function],
- }
- }
- BackdropProps={
- Object {
- "transitionDuration": Object {
- "enter": 225,
- "exit": 195,
- },
- }
- }
- className="MuiDialog-root modal-root"
- closeAfterTransition={true}
- disableEscapeKeyDown={false}
- onClose={[MockFunction]}
- open={true}
+ <div
+ id="accessibility-title"
>
- <ForwardRef(Portal)
- disablePortal={false}
+ export.modal_start.accessibility_title
+ </div>
+ <div
+ class="modal-start-root"
+ >
+ <button
+ aria-label="export.button_close"
+ class="MuiButtonBase-root MuiIconButton-root modal-paper-close-button"
+ tabindex="0"
+ type="button"
>
- <Portal
- containerInfo={
- <body
- style="padding-right: 0px; overflow: hidden;"
- >
- <div
- class="MuiDialog-root modal-root"
- role="presentation"
- style="position: fixed; z-index: 1300; right: 0px; bottom: 0px; top: 0px; left: 0px;"
- >
- <div
- aria-hidden="true"
- class="MuiBackdrop-root"
- style="opacity: 1; webkit-transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"
- />
- <div
- data-test="sentinelStart"
- tabindex="0"
- />
- <div
- class="MuiDialog-container MuiDialog-scrollPaper"
- role="none presentation"
- style="opacity: 1; webkit-transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"
- tabindex="-1"
- >
- <div
- aria-labelledby="accessibility_title"
- class="MuiPaper-root MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm MuiPaper-elevation24 MuiPaper-rounded"
- role="dialog"
- >
- <div
- id="accessibility-title"
- >
- export.modal_start.accessibility_title
- </div>
- <div
- class="modal-start-root"
- >
- <div>
- <button
- aria-label="export.button_close"
- class="MuiButtonBase-root MuiIconButton-root modal-paper-close-button"
- tabindex="0"
- type="button"
- >
- <span
- class="MuiIconButton-label"
- >
- <svg
- class="styles__icon___23x3R"
- height="18"
- width="18"
- >
- <use
- xlink:href="#test-file-stub"
- />
- </svg>
- </span>
- <span
- class="MuiTouchRipple-root"
- />
- </button>
- </div>
- <div
- class="content"
- >
- <div
- class="icon-main"
- >
- <svg
- class="styles__icon___23x3R"
- height="48"
- width="48"
- >
- <use
- xlink:href="#test-file-stub"
- />
- </svg>
- </div>
- <div
- class="text-16-bold text text1"
- >
- export.modal_start.text1
- </div>
- <div
- class="text-16-normal text"
- >
- export.modal_start.text2
- <br />
- export.modal_start.text3
- </div>
- <div
- class="buttons"
- >
- <button
- aria-label="export.modal_start.button_cancel"
- class="MuiButtonBase-root MuiButton-root btn-secondary-negative MuiButton-text"
- tabindex="0"
- type="submit"
- >
- <span
- class="MuiButton-label text-16-bold"
- >
- export.modal_start.button_cancel
- </span>
- <span
- class="MuiTouchRipple-root"
- />
- </button>
- <button
- aria-label="export.button_download"
- class="MuiButtonBase-root MuiButton-root btn-highlight MuiButton-text"
- tabindex="0"
- type="submit"
- >
- <span
- class="MuiButton-label text-16-bold"
- >
- export.button_download
- </span>
- <span
- class="MuiTouchRipple-root"
- />
- </button>
- </div>
- </div>
- </div>
- </div>
- </div>
- <div
- data-test="sentinelEnd"
- tabindex="0"
- />
- </div>
- </body>
- }
+ <span
+ class="MuiIconButton-label"
+ >
+ <svg
+ class="styles__icon___23x3R"
+ height="18"
+ width="18"
+ >
+ <use
+ xlink:href="#test-file-stub"
+ />
+ </svg>
+ </span>
+ <span
+ class="MuiTouchRipple-root"
+ />
+ </button>
+ <div
+ class="content"
+ >
+ <div
+ class="icon-main"
>
- <div
- className="MuiDialog-root modal-root"
- onKeyDown={[Function]}
- role="presentation"
- style={
- Object {
- "bottom": 0,
- "left": 0,
- "position": "fixed",
- "right": 0,
- "top": 0,
- "zIndex": 1300,
- }
- }
+ <svg
+ class="styles__icon___23x3R"
+ height="48"
+ width="48"
>
- <WithStyles(ForwardRef(Backdrop))
- onClick={[Function]}
- open={true}
- transitionDuration={
- Object {
- "enter": 225,
- "exit": 195,
- }
- }
+ <use
+ xlink:href="#test-file-stub"
+ />
+ </svg>
+ </div>
+ <div
+ class="text-16-bold subtitle"
+ >
+ export.modal_start.text1
+ </div>
+ <div>
+ export.modal_start.text2
+ <br />
+ export.modal_start.text3
+ </div>
+ <div
+ class="buttons"
+ >
+ <button
+ aria-label="export.modal_start.button_cancel"
+ class="MuiButtonBase-root MuiButton-root MuiButton-text btnSecondary"
+ tabindex="0"
+ type="button"
+ >
+ <span
+ class="MuiButton-label"
>
- <ForwardRef(Backdrop)
- classes={
- Object {
- "invisible": "MuiBackdrop-invisible",
- "root": "MuiBackdrop-root",
- }
- }
- onClick={[Function]}
- open={true}
- transitionDuration={
- Object {
- "enter": 225,
- "exit": 195,
- }
- }
- >
- <ForwardRef(Fade)
- in={true}
- onClick={[Function]}
- timeout={
- Object {
- "enter": 225,
- "exit": 195,
- }
- }
- >
- <Transition
- appear={true}
- enter={true}
- exit={true}
- in={true}
- mountOnEnter={false}
- onClick={[Function]}
- onEnter={[Function]}
- onEntered={[Function]}
- onEntering={[Function]}
- onExit={[Function]}
- onExited={[Function]}
- onExiting={[Function]}
- timeout={
- Object {
- "enter": 225,
- "exit": 195,
- }
- }
- unmountOnExit={false}
- >
- <div
- aria-hidden={true}
- className="MuiBackdrop-root"
- onClick={[Function]}
- style={
- Object {
- "opacity": 1,
- "visibility": undefined,
- }
- }
- />
- </Transition>
- </ForwardRef(Fade)>
- </ForwardRef(Backdrop)>
- </WithStyles(ForwardRef(Backdrop))>
- <Unstable_TrapFocus
- disableAutoFocus={false}
- disableEnforceFocus={false}
- disableRestoreFocus={false}
- getDoc={[Function]}
- isEnabled={[Function]}
- open={true}
+ export.modal_start.button_cancel
+ </span>
+ <span
+ class="MuiTouchRipple-root"
+ />
+ </button>
+ <button
+ aria-label="export.button_download"
+ class="MuiButtonBase-root MuiButton-root MuiButton-text btnPrimary"
+ tabindex="0"
+ type="button"
+ >
+ <span
+ class="MuiButton-label"
>
- <div
- data-test="sentinelStart"
- tabIndex={0}
- />
- <ForwardRef(Fade)
- appear={true}
- in={true}
- onEnter={[Function]}
- onExited={[Function]}
- role="none presentation"
- tabIndex="-1"
- timeout={
- Object {
- "enter": 225,
- "exit": 195,
- }
- }
- >
- <Transition
- appear={true}
- enter={true}
- exit={true}
- in={true}
- mountOnEnter={false}
- onEnter={[Function]}
- onEntered={[Function]}
- onEntering={[Function]}
- onExit={[Function]}
- onExited={[Function]}
- onExiting={[Function]}
- role="none presentation"
- tabIndex="-1"
- timeout={
- Object {
- "enter": 225,
- "exit": 195,
- }
- }
- unmountOnExit={false}
- >
- <div
- className="MuiDialog-container MuiDialog-scrollPaper"
- onMouseDown={[Function]}
- onMouseUp={[Function]}
- role="none presentation"
- style={
- Object {
- "opacity": 1,
- "visibility": undefined,
- }
- }
- tabIndex="-1"
- >
- <WithStyles(ForwardRef(Paper))
- aria-labelledby="accessibility_title"
- className="MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm"
- elevation={24}
- role="dialog"
- >
- <ForwardRef(Paper)
- aria-labelledby="accessibility_title"
- className="MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm"
- classes={
- Object {
- "elevation0": "MuiPaper-elevation0",
- "elevation1": "MuiPaper-elevation1",
- "elevation10": "MuiPaper-elevation10",
- "elevation11": "MuiPaper-elevation11",
- "elevation12": "MuiPaper-elevation12",
- "elevation13": "MuiPaper-elevation13",
- "elevation14": "MuiPaper-elevation14",
- "elevation15": "MuiPaper-elevation15",
- "elevation16": "MuiPaper-elevation16",
- "elevation17": "MuiPaper-elevation17",
- "elevation18": "MuiPaper-elevation18",
- "elevation19": "MuiPaper-elevation19",
- "elevation2": "MuiPaper-elevation2",
- "elevation20": "MuiPaper-elevation20",
- "elevation21": "MuiPaper-elevation21",
- "elevation22": "MuiPaper-elevation22",
- "elevation23": "MuiPaper-elevation23",
- "elevation24": "MuiPaper-elevation24",
- "elevation3": "MuiPaper-elevation3",
- "elevation4": "MuiPaper-elevation4",
- "elevation5": "MuiPaper-elevation5",
- "elevation6": "MuiPaper-elevation6",
- "elevation7": "MuiPaper-elevation7",
- "elevation8": "MuiPaper-elevation8",
- "elevation9": "MuiPaper-elevation9",
- "outlined": "MuiPaper-outlined",
- "root": "MuiPaper-root",
- "rounded": "MuiPaper-rounded",
- }
- }
- elevation={24}
- role="dialog"
- >
- <div
- aria-labelledby="accessibility_title"
- className="MuiPaper-root MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm MuiPaper-elevation24 MuiPaper-rounded"
- role="dialog"
- >
- <div
- id="accessibility-title"
- >
- export.modal_start.accessibility_title
- </div>
- <div
- className="modal-start-root"
- >
- <div
- onClick={[MockFunction]}
- >
- <WithStyles(ForwardRef(IconButton))
- aria-label="export.button_close"
- className="modal-paper-close-button"
- onClick={[MockFunction]}
- >
- <ForwardRef(IconButton)
- aria-label="export.button_close"
- className="modal-paper-close-button"
- classes={
- Object {
- "colorInherit": "MuiIconButton-colorInherit",
- "colorPrimary": "MuiIconButton-colorPrimary",
- "colorSecondary": "MuiIconButton-colorSecondary",
- "disabled": "Mui-disabled",
- "edgeEnd": "MuiIconButton-edgeEnd",
- "edgeStart": "MuiIconButton-edgeStart",
- "label": "MuiIconButton-label",
- "root": "MuiIconButton-root",
- "sizeSmall": "MuiIconButton-sizeSmall",
- }
- }
- onClick={[MockFunction]}
- >
- <WithStyles(ForwardRef(ButtonBase))
- aria-label="export.button_close"
- centerRipple={true}
- className="MuiIconButton-root modal-paper-close-button"
- disabled={false}
- focusRipple={true}
- onClick={[MockFunction]}
- >
- <ForwardRef(ButtonBase)
- aria-label="export.button_close"
- centerRipple={true}
- className="MuiIconButton-root modal-paper-close-button"
- classes={
- Object {
- "disabled": "Mui-disabled",
- "focusVisible": "Mui-focusVisible",
- "root": "MuiButtonBase-root",
- }
- }
- disabled={false}
- focusRipple={true}
- onClick={[MockFunction]}
- >
- <button
- aria-label="export.button_close"
- className="MuiButtonBase-root MuiIconButton-root modal-paper-close-button"
- disabled={false}
- onBlur={[Function]}
- onClick={[MockFunction]}
- onDragLeave={[Function]}
- onFocus={[Function]}
- onKeyDown={[Function]}
- onKeyUp={[Function]}
- onMouseDown={[Function]}
- onMouseLeave={[Function]}
- onMouseUp={[Function]}
- onTouchEnd={[Function]}
- onTouchMove={[Function]}
- onTouchStart={[Function]}
- tabIndex={0}
- type="button"
- >
- <span
- className="MuiIconButton-label"
- >
- <Icon
- icon="test-file-stub"
- size={18}
- spin={false}
- >
- <Component
- className="styles__icon___23x3R"
- height={18}
- style={Object {}}
- width={18}
- >
- <svg
- className="styles__icon___23x3R"
- height={18}
- style={Object {}}
- width={18}
- >
- <use
- xlinkHref="#test-file-stub"
- />
- </svg>
- </Component>
- </Icon>
- </span>
- <WithStyles(memo)
- center={true}
- >
- <ForwardRef(TouchRipple)
- center={true}
- classes={
- Object {
- "child": "MuiTouchRipple-child",
- "childLeaving": "MuiTouchRipple-childLeaving",
- "childPulsate": "MuiTouchRipple-childPulsate",
- "ripple": "MuiTouchRipple-ripple",
- "ripplePulsate": "MuiTouchRipple-ripplePulsate",
- "rippleVisible": "MuiTouchRipple-rippleVisible",
- "root": "MuiTouchRipple-root",
- }
- }
- >
- <span
- className="MuiTouchRipple-root"
- >
- <TransitionGroup
- childFactory={[Function]}
- component={null}
- exit={true}
- />
- </span>
- </ForwardRef(TouchRipple)>
- </WithStyles(memo)>
- </button>
- </ForwardRef(ButtonBase)>
- </WithStyles(ForwardRef(ButtonBase))>
- </ForwardRef(IconButton)>
- </WithStyles(ForwardRef(IconButton))>
- </div>
- <div
- className="content"
- >
- <div
- className="icon-main"
- >
- <Icon
- icon="test-file-stub"
- size={48}
- spin={false}
- >
- <Component
- className="styles__icon___23x3R"
- height={48}
- style={Object {}}
- width={48}
- >
- <svg
- className="styles__icon___23x3R"
- height={48}
- style={Object {}}
- width={48}
- >
- <use
- xlinkHref="#test-file-stub"
- />
- </svg>
- </Component>
- </Icon>
- </div>
- <div
- className="text-16-bold text text1"
- >
- export.modal_start.text1
- </div>
- <div
- className="text-16-normal text"
- >
- export.modal_start.text2
- <br />
- export.modal_start.text3
- </div>
- <div
- className="buttons"
- >
- <WithStyles(ForwardRef(Button))
- aria-label="export.modal_start.button_cancel"
- classes={
- Object {
- "label": "text-16-bold",
- "root": "btn-secondary-negative",
- }
- }
- onClick={[MockFunction]}
- type="submit"
- >
- <ForwardRef(Button)
- aria-label="export.modal_start.button_cancel"
- classes={
- Object {
- "colorInherit": "MuiButton-colorInherit",
- "contained": "MuiButton-contained",
- "containedPrimary": "MuiButton-containedPrimary",
- "containedSecondary": "MuiButton-containedSecondary",
- "containedSizeLarge": "MuiButton-containedSizeLarge",
- "containedSizeSmall": "MuiButton-containedSizeSmall",
- "disableElevation": "MuiButton-disableElevation",
- "disabled": "Mui-disabled",
- "endIcon": "MuiButton-endIcon",
- "focusVisible": "Mui-focusVisible",
- "fullWidth": "MuiButton-fullWidth",
- "iconSizeLarge": "MuiButton-iconSizeLarge",
- "iconSizeMedium": "MuiButton-iconSizeMedium",
- "iconSizeSmall": "MuiButton-iconSizeSmall",
- "label": "MuiButton-label text-16-bold",
- "outlined": "MuiButton-outlined",
- "outlinedPrimary": "MuiButton-outlinedPrimary",
- "outlinedSecondary": "MuiButton-outlinedSecondary",
- "outlinedSizeLarge": "MuiButton-outlinedSizeLarge",
- "outlinedSizeSmall": "MuiButton-outlinedSizeSmall",
- "root": "MuiButton-root btn-secondary-negative",
- "sizeLarge": "MuiButton-sizeLarge",
- "sizeSmall": "MuiButton-sizeSmall",
- "startIcon": "MuiButton-startIcon",
- "text": "MuiButton-text",
- "textPrimary": "MuiButton-textPrimary",
- "textSecondary": "MuiButton-textSecondary",
- "textSizeLarge": "MuiButton-textSizeLarge",
- "textSizeSmall": "MuiButton-textSizeSmall",
- }
- }
- onClick={[MockFunction]}
- type="submit"
- >
- <WithStyles(ForwardRef(ButtonBase))
- aria-label="export.modal_start.button_cancel"
- className="MuiButton-root btn-secondary-negative MuiButton-text"
- component="button"
- disabled={false}
- focusRipple={true}
- focusVisibleClassName="Mui-focusVisible"
- onClick={[MockFunction]}
- type="submit"
- >
- <ForwardRef(ButtonBase)
- aria-label="export.modal_start.button_cancel"
- className="MuiButton-root btn-secondary-negative MuiButton-text"
- classes={
- Object {
- "disabled": "Mui-disabled",
- "focusVisible": "Mui-focusVisible",
- "root": "MuiButtonBase-root",
- }
- }
- component="button"
- disabled={false}
- focusRipple={true}
- focusVisibleClassName="Mui-focusVisible"
- onClick={[MockFunction]}
- type="submit"
- >
- <button
- aria-label="export.modal_start.button_cancel"
- className="MuiButtonBase-root MuiButton-root btn-secondary-negative MuiButton-text"
- disabled={false}
- onBlur={[Function]}
- onClick={[MockFunction]}
- onDragLeave={[Function]}
- onFocus={[Function]}
- onKeyDown={[Function]}
- onKeyUp={[Function]}
- onMouseDown={[Function]}
- onMouseLeave={[Function]}
- onMouseUp={[Function]}
- onTouchEnd={[Function]}
- onTouchMove={[Function]}
- onTouchStart={[Function]}
- tabIndex={0}
- type="submit"
- >
- <span
- className="MuiButton-label text-16-bold"
- >
- export.modal_start.button_cancel
- </span>
- <WithStyles(memo)
- center={false}
- >
- <ForwardRef(TouchRipple)
- center={false}
- classes={
- Object {
- "child": "MuiTouchRipple-child",
- "childLeaving": "MuiTouchRipple-childLeaving",
- "childPulsate": "MuiTouchRipple-childPulsate",
- "ripple": "MuiTouchRipple-ripple",
- "ripplePulsate": "MuiTouchRipple-ripplePulsate",
- "rippleVisible": "MuiTouchRipple-rippleVisible",
- "root": "MuiTouchRipple-root",
- }
- }
- >
- <span
- className="MuiTouchRipple-root"
- >
- <TransitionGroup
- childFactory={[Function]}
- component={null}
- exit={true}
- />
- </span>
- </ForwardRef(TouchRipple)>
- </WithStyles(memo)>
- </button>
- </ForwardRef(ButtonBase)>
- </WithStyles(ForwardRef(ButtonBase))>
- </ForwardRef(Button)>
- </WithStyles(ForwardRef(Button))>
- <WithStyles(ForwardRef(Button))
- aria-label="export.button_download"
- classes={
- Object {
- "label": "text-16-bold",
- "root": "btn-highlight",
- }
- }
- onClick={[MockFunction]}
- type="submit"
- >
- <ForwardRef(Button)
- aria-label="export.button_download"
- classes={
- Object {
- "colorInherit": "MuiButton-colorInherit",
- "contained": "MuiButton-contained",
- "containedPrimary": "MuiButton-containedPrimary",
- "containedSecondary": "MuiButton-containedSecondary",
- "containedSizeLarge": "MuiButton-containedSizeLarge",
- "containedSizeSmall": "MuiButton-containedSizeSmall",
- "disableElevation": "MuiButton-disableElevation",
- "disabled": "Mui-disabled",
- "endIcon": "MuiButton-endIcon",
- "focusVisible": "Mui-focusVisible",
- "fullWidth": "MuiButton-fullWidth",
- "iconSizeLarge": "MuiButton-iconSizeLarge",
- "iconSizeMedium": "MuiButton-iconSizeMedium",
- "iconSizeSmall": "MuiButton-iconSizeSmall",
- "label": "MuiButton-label text-16-bold",
- "outlined": "MuiButton-outlined",
- "outlinedPrimary": "MuiButton-outlinedPrimary",
- "outlinedSecondary": "MuiButton-outlinedSecondary",
- "outlinedSizeLarge": "MuiButton-outlinedSizeLarge",
- "outlinedSizeSmall": "MuiButton-outlinedSizeSmall",
- "root": "MuiButton-root btn-highlight",
- "sizeLarge": "MuiButton-sizeLarge",
- "sizeSmall": "MuiButton-sizeSmall",
- "startIcon": "MuiButton-startIcon",
- "text": "MuiButton-text",
- "textPrimary": "MuiButton-textPrimary",
- "textSecondary": "MuiButton-textSecondary",
- "textSizeLarge": "MuiButton-textSizeLarge",
- "textSizeSmall": "MuiButton-textSizeSmall",
- }
- }
- onClick={[MockFunction]}
- type="submit"
- >
- <WithStyles(ForwardRef(ButtonBase))
- aria-label="export.button_download"
- className="MuiButton-root btn-highlight MuiButton-text"
- component="button"
- disabled={false}
- focusRipple={true}
- focusVisibleClassName="Mui-focusVisible"
- onClick={[MockFunction]}
- type="submit"
- >
- <ForwardRef(ButtonBase)
- aria-label="export.button_download"
- className="MuiButton-root btn-highlight MuiButton-text"
- classes={
- Object {
- "disabled": "Mui-disabled",
- "focusVisible": "Mui-focusVisible",
- "root": "MuiButtonBase-root",
- }
- }
- component="button"
- disabled={false}
- focusRipple={true}
- focusVisibleClassName="Mui-focusVisible"
- onClick={[MockFunction]}
- type="submit"
- >
- <button
- aria-label="export.button_download"
- className="MuiButtonBase-root MuiButton-root btn-highlight MuiButton-text"
- disabled={false}
- onBlur={[Function]}
- onClick={[MockFunction]}
- onDragLeave={[Function]}
- onFocus={[Function]}
- onKeyDown={[Function]}
- onKeyUp={[Function]}
- onMouseDown={[Function]}
- onMouseLeave={[Function]}
- onMouseUp={[Function]}
- onTouchEnd={[Function]}
- onTouchMove={[Function]}
- onTouchStart={[Function]}
- tabIndex={0}
- type="submit"
- >
- <span
- className="MuiButton-label text-16-bold"
- >
- export.button_download
- </span>
- <WithStyles(memo)
- center={false}
- >
- <ForwardRef(TouchRipple)
- center={false}
- classes={
- Object {
- "child": "MuiTouchRipple-child",
- "childLeaving": "MuiTouchRipple-childLeaving",
- "childPulsate": "MuiTouchRipple-childPulsate",
- "ripple": "MuiTouchRipple-ripple",
- "ripplePulsate": "MuiTouchRipple-ripplePulsate",
- "rippleVisible": "MuiTouchRipple-rippleVisible",
- "root": "MuiTouchRipple-root",
- }
- }
- >
- <span
- className="MuiTouchRipple-root"
- >
- <TransitionGroup
- childFactory={[Function]}
- component={null}
- exit={true}
- />
- </span>
- </ForwardRef(TouchRipple)>
- </WithStyles(memo)>
- </button>
- </ForwardRef(ButtonBase)>
- </WithStyles(ForwardRef(ButtonBase))>
- </ForwardRef(Button)>
- </WithStyles(ForwardRef(Button))>
- </div>
- </div>
- </div>
- </div>
- </ForwardRef(Paper)>
- </WithStyles(ForwardRef(Paper))>
- </div>
- </Transition>
- </ForwardRef(Fade)>
- <div
- data-test="sentinelEnd"
- tabIndex={0}
- />
- </Unstable_TrapFocus>
- </div>
- </Portal>
- </ForwardRef(Portal)>
- </ForwardRef(Modal)>
- </ForwardRef(Dialog)>
- </WithStyles(ForwardRef(Dialog))>
- </ExportStartModal>
-</Provider>
+ export.button_download
+ </span>
+ <span
+ class="MuiTouchRipple-root"
+ />
+ </button>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div
+ data-test="sentinelEnd"
+ tabindex="0"
+ />
+ </div>
+</body>
`;
diff --git a/src/components/Options/ExportData/Modals/exportDoneModal.scss b/src/components/Options/ExportData/Modals/exportDoneModal.scss
index 10ed1cd2819fc8d64d6c5a3c661a306feace376e..02cac92d26e1edd9cac6f3a23272b2b00e1f56c4 100644
--- a/src/components/Options/ExportData/Modals/exportDoneModal.scss
+++ b/src/components/Options/ExportData/Modals/exportDoneModal.scss
@@ -4,19 +4,16 @@
.content {
text-align: center;
padding-top: 2rem;
- .text {
- margin: 2rem 0 0;
- color: $grey-bright;
- }
- .text1 {
- margin-bottom: 2rem;
+ color: $grey-bright;
+ display: flex;
+ flex-direction: column;
+ gap: 1rem;
+
+ .subtitle {
color: $gold-shadow;
}
.error1 {
color: $red-primary;
}
- button {
- height: 40px;
- }
}
}
diff --git a/src/components/Options/ExportData/Modals/exportDoneModal.spec.tsx b/src/components/Options/ExportData/Modals/exportDoneModal.spec.tsx
index a9e1c7f46cf09434129c0aebb7678baf80925d45..dc0bd5588f24e50858bd0f75a19d400d8ba6a26d 100644
--- a/src/components/Options/ExportData/Modals/exportDoneModal.spec.tsx
+++ b/src/components/Options/ExportData/Modals/exportDoneModal.spec.tsx
@@ -1,42 +1,33 @@
-import { Button } from '@material-ui/core'
-import { mount } from 'enzyme'
-import toJson from 'enzyme-to-json'
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
import React from 'react'
-import { Provider } from 'react-redux'
-import { createMockEcolyoStore } from 'tests/__mocks__/store'
import ExportDoneModal from './exportDoneModal'
-const mockHandleClose = jest.fn()
-
describe('exportDoneModal component', () => {
- const store = createMockEcolyoStore()
-
it('should be rendered correctly', () => {
- const wrapper = mount(
- <Provider store={store}>
- <ExportDoneModal
- open={true}
- error={false}
- handleCloseClick={mockHandleClose}
- />
- </Provider>
+ const { baseElement } = render(
+ <ExportDoneModal open={true} error={false} handleCloseClick={jest.fn()} />
)
- expect(toJson(wrapper)).toMatchSnapshot()
+ expect(baseElement).toMatchSnapshot()
})
- it('should display error message', () => undefined)
+ it('should display error message', () => {
+ const { baseElement } = render(
+ <ExportDoneModal open={true} error={true} handleCloseClick={jest.fn()} />
+ )
+ expect(baseElement).toMatchSnapshot()
+ })
- it('should close modal', () => {
- const wrapper = mount(
- <Provider store={store}>
- <ExportDoneModal
- open={true}
- error={false}
- handleCloseClick={mockHandleClose}
- />
- </Provider>
+ it('should close modal', async () => {
+ const mockHandleClose = jest.fn()
+ render(
+ <ExportDoneModal
+ open={true}
+ error={false}
+ handleCloseClick={mockHandleClose}
+ />
)
- wrapper.find(Button).first().simulate('click')
+ await userEvent.click(screen.getAllByRole('button')[0])
expect(mockHandleClose).toHaveBeenCalledTimes(1)
})
})
diff --git a/src/components/Options/ExportData/Modals/exportDoneModal.tsx b/src/components/Options/ExportData/Modals/exportDoneModal.tsx
index 4bdfd90163d55d8834243bb206da7c095d803ed8..79d7a24dbe5881b54bc0fe3c14e7bc7a375fb9dc 100644
--- a/src/components/Options/ExportData/Modals/exportDoneModal.tsx
+++ b/src/components/Options/ExportData/Modals/exportDoneModal.tsx
@@ -36,15 +36,13 @@ const ExportDoneModal = ({
</div>
<div className="modal-done-root">
- <div onClick={handleCloseClick}>
- <IconButton
- aria-label={t('export.button_close')}
- className="modal-paper-close-button"
- onClick={handleCloseClick}
- >
- <Icon icon={CloseIcon} size={18} />
- </IconButton>
- </div>
+ <IconButton
+ aria-label={t('export.button_close')}
+ className="modal-paper-close-button"
+ onClick={handleCloseClick}
+ >
+ <Icon icon={CloseIcon} size={18} />
+ </IconButton>
<div className="content">
<div className="icon-main">
@@ -52,20 +50,18 @@ const ExportDoneModal = ({
</div>
{!error && (
<>
- <div className="text-16-bold text text1">
+ <div className="text-16-bold subtitle">
{t('export.modal_done.text1')}
</div>
- <div className="text-16-normal text">
- {t('export.modal_done.text2')}
- </div>
+ <div>{t('export.modal_done.text2')}</div>
</>
)}
{error && (
<>
- <div className="text-20-bold text error1">
+ <div className="text-20-bold error1">
{t('export.modal_done.error1')}
</div>
- <div className="text-16-bold text">
+ <div className="text-16-bold">
{t('export.modal_done.error2')}
</div>
</>
@@ -74,11 +70,7 @@ const ExportDoneModal = ({
<Button
aria-label={t('export.modal_done.button_close')}
onClick={handleCloseClick}
- classes={{
- root: 'btn-highlight',
- label: 'text-16-bold',
- }}
- type="submit"
+ className="btnPrimary"
>
{error
? t('export.modal_done.button_close_error')
diff --git a/src/components/Options/ExportData/Modals/exportLoadingModal.scss b/src/components/Options/ExportData/Modals/exportLoadingModal.scss
index 69f583deeb76530f18b82cb2fe4816e2394947ab..bc2d3ef17251a3e4b47aa725cb391a7ca9c4a07e 100644
--- a/src/components/Options/ExportData/Modals/exportLoadingModal.scss
+++ b/src/components/Options/ExportData/Modals/exportLoadingModal.scss
@@ -4,11 +4,13 @@
.content {
text-align: center;
padding-top: 2rem;
- .text {
- color: $grey-bright;
- }
- .text1 {
- margin: 2rem 0;
+ color: $grey-bright;
+ display: flex;
+ flex-direction: column;
+ gap: 1rem;
+
+ .subtitle {
+ margin: 1rem 0;
color: $gold-shadow;
}
button {
diff --git a/src/components/Options/ExportData/Modals/exportLoadingModal.spec.tsx b/src/components/Options/ExportData/Modals/exportLoadingModal.spec.tsx
index aeb7d672b21ee18090c1b972ac88de02543533b2..06371f31aa2e375692f2e16e1b1e418b7116d42a 100644
--- a/src/components/Options/ExportData/Modals/exportLoadingModal.spec.tsx
+++ b/src/components/Options/ExportData/Modals/exportLoadingModal.spec.tsx
@@ -1,45 +1,33 @@
-import { Button } from '@material-ui/core'
-import { FluidType } from 'enums'
-import { mount } from 'enzyme'
-import toJson from 'enzyme-to-json'
+import { render, screen } from '@testing-library/react'
+import { userEvent } from '@testing-library/user-event'
import React from 'react'
-import { Provider } from 'react-redux'
-import { createMockEcolyoStore } from 'tests/__mocks__/store'
+import { allFluids } from 'utils/utils'
import ExportLoadingModal from './exportLoadingModal'
-const mockHandleClose = jest.fn()
-const mockHandleDone = jest.fn()
-const mockSelectedFluids: FluidType[] = [0, 1, 2]
-
describe('ExportLoadingModal component', () => {
- const store = createMockEcolyoStore()
-
it('should be rendered correctly', () => {
- const wrapper = mount(
- <Provider store={store}>
- <ExportLoadingModal
- open={true}
- handleCloseClick={mockHandleClose}
- handleDone={mockHandleDone}
- selectedFluids={mockSelectedFluids}
- />
- </Provider>
+ const { baseElement } = render(
+ <ExportLoadingModal
+ open={true}
+ handleCloseClick={jest.fn()}
+ handleDone={jest.fn()}
+ selectedFluids={allFluids}
+ />
)
- expect(toJson(wrapper)).toMatchSnapshot()
+ expect(baseElement).toMatchSnapshot()
})
- it('should cancel download', () => {
- const wrapper = mount(
- <Provider store={store}>
- <ExportLoadingModal
- open={true}
- handleCloseClick={mockHandleClose}
- handleDone={mockHandleDone}
- selectedFluids={mockSelectedFluids}
- />
- </Provider>
+ it('should cancel download', async () => {
+ const mockHandleClose = jest.fn()
+ render(
+ <ExportLoadingModal
+ open={true}
+ handleCloseClick={mockHandleClose}
+ handleDone={jest.fn()}
+ selectedFluids={allFluids}
+ />
)
- wrapper.find(Button).first().simulate('click')
+ await userEvent.click(screen.getAllByRole('button')[0])
expect(mockHandleClose).toHaveBeenCalledTimes(1)
})
})
diff --git a/src/components/Options/ExportData/Modals/exportLoadingModal.tsx b/src/components/Options/ExportData/Modals/exportLoadingModal.tsx
index edf47eb38f806d115074d1dac52c5dbbbee382cf..35772077fc0e3b9c28fa0aed3dcff189fb839bc6 100644
--- a/src/components/Options/ExportData/Modals/exportLoadingModal.tsx
+++ b/src/components/Options/ExportData/Modals/exportLoadingModal.tsx
@@ -1,18 +1,18 @@
import { Button, IconButton } from '@material-ui/core'
import Dialog from '@material-ui/core/Dialog'
+import * as Sentry from '@sentry/react'
+import CloseIcon from 'assets/icons/ico/close.svg'
+import Loader from 'components/Loader/Loader'
import { useClient } from 'cozy-client'
import { useI18n } from 'cozy-ui/transpiled/react/I18n'
import Icon from 'cozy-ui/transpiled/react/Icon'
-import FileSaver from 'file-saver'
-import React, { useCallback, useEffect } from 'react'
-import * as XLSX from 'xlsx'
-
-import CloseIcon from 'assets/icons/ico/close.svg'
-import Loader from 'components/Loader/Loader'
import { FluidType, TimeStep } from 'enums'
+import FileSaver from 'file-saver'
import { Datachart, Dataload, TimePeriod } from 'models'
+import React, { useCallback, useEffect } from 'react'
import ConsumptionDataManager from 'services/consumption.service'
import EnedisMonthlyAnalysisDataService from 'services/enedisMonthlyAnalysisData.service'
+import * as XLSX from 'xlsx'
import './exportLoadingModal.scss'
interface ExportDataRow {
@@ -27,7 +27,7 @@ interface ExportDataSheet {
interface ExportLoadingModalProps {
open: boolean
handleCloseClick: () => void
- handleDone: (e?: any) => void
+ handleDone: (e?: unknown) => void
selectedFluids: FluidType[]
}
@@ -161,17 +161,18 @@ const ExportLoadingModal = ({
handleDone()
}
} catch (e) {
+ Sentry.captureException(e)
handleDone(e)
}
}
- if (subscribed) {
+ if (subscribed && open) {
exportData()
}
return () => {
subscribed = false
}
- }, [getExportDataSheet, handleDone, selectedFluids])
+ }, [getExportDataSheet, handleDone, open, selectedFluids])
return (
<Dialog
@@ -192,33 +193,25 @@ const ExportLoadingModal = ({
</div>
<div className="modal-loading-root">
- <div onClick={handleCloseClick}>
- <IconButton
- aria-label={t('export.button_close')}
- className="modal-paper-close-button"
- onClick={handleCloseClick}
- >
- <Icon icon={CloseIcon} size={18} />
- </IconButton>
- </div>
+ <IconButton
+ aria-label={t('export.button_close')}
+ className="modal-paper-close-button"
+ onClick={handleCloseClick}
+ >
+ <Icon icon={CloseIcon} size={18} />
+ </IconButton>
<div className="content">
<div className="icon-main">
<Loader color="gold" />
</div>
- <div className="text-16-bold text text1">
+ <div className="text-16-bold subtitle">
{t('export.modal_loading.text1')}
</div>
- <div className="text-16-normal text">
- {t('export.modal_loading.text2')}
- </div>
+ <div>{t('export.modal_loading.text2')}</div>
<Button
aria-label={t('export.modal_loading.button_cancel')}
onClick={handleCloseClick}
- classes={{
- root: 'btn-secondary-negative',
- label: 'text-16-bold',
- }}
- type="submit"
+ className="btnSecondary"
>
{t('export.modal_loading.button_cancel')}
</Button>
diff --git a/src/components/Options/ExportData/Modals/exportStartModal.scss b/src/components/Options/ExportData/Modals/exportStartModal.scss
index 738f1c53cf9ad27db5f221870ae6825f6ef38850..803bd85dfbbddc67416228248fc6cc90f94bf3e1 100644
--- a/src/components/Options/ExportData/Modals/exportStartModal.scss
+++ b/src/components/Options/ExportData/Modals/exportStartModal.scss
@@ -4,21 +4,17 @@
.content {
text-align: center;
padding-top: 2rem;
- .text {
- margin: 2rem 0 0;
- color: $grey-bright;
- }
- .text1 {
+ color: $grey-bright;
+ display: flex;
+ flex-direction: column;
+ gap: 1rem;
+
+ .subtitle {
color: $gold-shadow;
}
.buttons {
- margin-top: 2rem;
display: flex;
gap: 1rem;
- button {
- margin: 0;
- height: 40px;
- }
}
}
}
diff --git a/src/components/Options/ExportData/Modals/exportStartModal.spec.tsx b/src/components/Options/ExportData/Modals/exportStartModal.spec.tsx
index f72defa44b9241920678f0a7e3b8be51a8f561ac..36a16b1b1727c67cf391de45df4aeb0698dc74f1 100644
--- a/src/components/Options/ExportData/Modals/exportStartModal.spec.tsx
+++ b/src/components/Options/ExportData/Modals/exportStartModal.spec.tsx
@@ -1,41 +1,30 @@
-import { Button } from '@material-ui/core'
-import { mount } from 'enzyme'
-import toJson from 'enzyme-to-json'
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
import React from 'react'
-import { Provider } from 'react-redux'
-import { createMockEcolyoStore } from 'tests/__mocks__/store'
import ExportStartModal from './exportStartModal'
-const mockHandleClose = jest.fn()
-const mockHandleDownloadClick = jest.fn()
-
describe('exportStartModal component', () => {
- const store = createMockEcolyoStore()
-
it('should be rendered correctly', () => {
- const wrapper = mount(
- <Provider store={store}>
- <ExportStartModal
- open={true}
- handleCloseClick={mockHandleClose}
- handleDownloadClick={mockHandleDownloadClick}
- />
- </Provider>
+ const { baseElement } = render(
+ <ExportStartModal
+ open={true}
+ handleCloseClick={jest.fn()}
+ handleDownloadClick={jest.fn()}
+ />
)
- expect(toJson(wrapper)).toMatchSnapshot()
+ expect(baseElement).toMatchSnapshot()
})
- it('should close modal', () => {
- const wrapper = mount(
- <Provider store={store}>
- <ExportStartModal
- open={true}
- handleCloseClick={mockHandleClose}
- handleDownloadClick={mockHandleDownloadClick}
- />
- </Provider>
+ it('should close modal', async () => {
+ const mockHandleClose = jest.fn()
+ render(
+ <ExportStartModal
+ open={true}
+ handleCloseClick={mockHandleClose}
+ handleDownloadClick={jest.fn()}
+ />
)
- wrapper.find(Button).first().simulate('click')
+ await userEvent.click(screen.getAllByRole('button')[0])
expect(mockHandleClose).toHaveBeenCalledTimes(1)
})
})
diff --git a/src/components/Options/ExportData/Modals/exportStartModal.tsx b/src/components/Options/ExportData/Modals/exportStartModal.tsx
index 1fbebcd06f7aa76eb1f9d1a82ab12415aa8b31f7..42c9e48666cd4c446aaded19923adb9ee63b50af 100644
--- a/src/components/Options/ExportData/Modals/exportStartModal.tsx
+++ b/src/components/Options/ExportData/Modals/exportStartModal.tsx
@@ -34,23 +34,21 @@ const ExportStartModal = ({
{t('export.modal_start.accessibility_title')}
</div>
<div className="modal-start-root">
- <div onClick={handleCloseClick}>
- <IconButton
- aria-label={t('export.button_close')}
- className="modal-paper-close-button"
- onClick={handleCloseClick}
- >
- <Icon icon={CloseIcon} size={18} />
- </IconButton>
- </div>
+ <IconButton
+ aria-label={t('export.button_close')}
+ className="modal-paper-close-button"
+ onClick={handleCloseClick}
+ >
+ <Icon icon={CloseIcon} size={18} />
+ </IconButton>
<div className="content">
<div className="icon-main">
<Icon icon={download} size={48} />
</div>
- <div className="text-16-bold text text1">
+ <div className="text-16-bold subtitle">
{t('export.modal_start.text1')}
</div>
- <div className="text-16-normal text">
+ <div>
{t('export.modal_start.text2')}
<br />
{t('export.modal_start.text3')}
@@ -59,22 +57,14 @@ const ExportStartModal = ({
<Button
aria-label={t('export.modal_start.button_cancel')}
onClick={handleCloseClick}
- classes={{
- root: 'btn-secondary-negative',
- label: 'text-16-bold',
- }}
- type="submit"
+ className="btnSecondary"
>
{t('export.modal_start.button_cancel')}
</Button>
<Button
aria-label={t('export.button_download')}
onClick={handleDownloadClick}
- classes={{
- root: 'btn-highlight',
- label: 'text-16-bold',
- }}
- type="submit"
+ className="btnPrimary"
>
{t('export.button_download')}
</Button>
diff --git a/src/components/Options/ExportData/__snapshots__/ExportData.spec.tsx.snap b/src/components/Options/ExportData/__snapshots__/ExportData.spec.tsx.snap
index 4e44f56f7bad8f699c0c34792f19317cce030178..7bfb4b7882eb8397b07bade0bbd7b63505a5b3ec 100644
--- a/src/components/Options/ExportData/__snapshots__/ExportData.spec.tsx.snap
+++ b/src/components/Options/ExportData/__snapshots__/ExportData.spec.tsx.snap
@@ -1,1184 +1,103 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`exportOptions component should be rendered correctly 1`] = `
-<ExportData>
+<div>
<div
- className="export-option-root"
+ class="export-option-root"
>
<div
- className="export-option-content"
+ class="export-option-content"
>
- <WithStyles(ForwardRef(Accordion))
- classes={
- Object {
- "root": "expansion-panel-root",
- }
- }
- expanded={false}
- onChange={[Function]}
+ <div
+ class="MuiPaper-root MuiAccordion-root expansion-panel-root MuiAccordion-rounded MuiPaper-elevation1 MuiPaper-rounded"
>
- <ForwardRef(Accordion)
- classes={
- Object {
- "disabled": "Mui-disabled",
- "expanded": "Mui-expanded",
- "root": "MuiAccordion-root expansion-panel-root",
- "rounded": "MuiAccordion-rounded",
- }
- }
- expanded={false}
- onChange={[Function]}
+ <div
+ aria-disabled="false"
+ aria-expanded="false"
+ aria-label="profile_type.accessibility.button_toggle_export"
+ class="MuiButtonBase-root MuiAccordionSummary-root expansion-panel-summary"
+ role="button"
+ tabindex="0"
>
- <WithStyles(ForwardRef(Paper))
- className="MuiAccordion-root expansion-panel-root MuiAccordion-rounded"
- square={false}
+ <div
+ class="MuiAccordionSummary-content expansion-panel-content"
>
- <ForwardRef(Paper)
- className="MuiAccordion-root expansion-panel-root MuiAccordion-rounded"
- classes={
- Object {
- "elevation0": "MuiPaper-elevation0",
- "elevation1": "MuiPaper-elevation1",
- "elevation10": "MuiPaper-elevation10",
- "elevation11": "MuiPaper-elevation11",
- "elevation12": "MuiPaper-elevation12",
- "elevation13": "MuiPaper-elevation13",
- "elevation14": "MuiPaper-elevation14",
- "elevation15": "MuiPaper-elevation15",
- "elevation16": "MuiPaper-elevation16",
- "elevation17": "MuiPaper-elevation17",
- "elevation18": "MuiPaper-elevation18",
- "elevation19": "MuiPaper-elevation19",
- "elevation2": "MuiPaper-elevation2",
- "elevation20": "MuiPaper-elevation20",
- "elevation21": "MuiPaper-elevation21",
- "elevation22": "MuiPaper-elevation22",
- "elevation23": "MuiPaper-elevation23",
- "elevation24": "MuiPaper-elevation24",
- "elevation3": "MuiPaper-elevation3",
- "elevation4": "MuiPaper-elevation4",
- "elevation5": "MuiPaper-elevation5",
- "elevation6": "MuiPaper-elevation6",
- "elevation7": "MuiPaper-elevation7",
- "elevation8": "MuiPaper-elevation8",
- "elevation9": "MuiPaper-elevation9",
- "outlined": "MuiPaper-outlined",
- "root": "MuiPaper-root",
- "rounded": "MuiPaper-rounded",
- }
- }
- square={false}
+ <svg
+ class="export-icon styles__icon___23x3R"
+ height="42"
+ width="42"
+ >
+ <use
+ xlink:href="#test-file-stub"
+ />
+ </svg>
+ <div
+ class="text-16-normal accordion-title"
+ >
+ export.title_export
+ </div>
+ </div>
+ <div
+ aria-disabled="false"
+ aria-hidden="true"
+ class="MuiButtonBase-root MuiIconButton-root MuiAccordionSummary-expandIcon MuiIconButton-edgeEnd"
+ >
+ <span
+ class="MuiIconButton-label"
+ >
+ <svg
+ class="accordion-icon styles__icon___23x3R"
+ height="16"
+ width="16"
+ >
+ <use
+ xlink:href="#test-file-stub"
+ />
+ </svg>
+ </span>
+ <span
+ class="MuiTouchRipple-root"
+ />
+ </div>
+ </div>
+ <div
+ class="MuiCollapse-root MuiCollapse-hidden"
+ style="min-height: 0px;"
+ >
+ <div
+ class="MuiCollapse-wrapper"
+ >
+ <div
+ class="MuiCollapse-wrapperInner"
>
<div
- className="MuiPaper-root MuiAccordion-root expansion-panel-root MuiAccordion-rounded MuiPaper-elevation1 MuiPaper-rounded"
+ role="region"
>
- <WithStyles(ForwardRef(AccordionSummary))
- aria-label="profile_type.accessibility.button_toggle_export"
- classes={
- Object {
- "content": "expansion-panel-content",
- "root": "expansion-panel-summary",
- }
- }
- expandIcon={
- <Icon
- className="accordion-icon"
- icon="test-file-stub"
- size={16}
- spin={false}
- />
- }
- key=".0"
+ <div
+ class="MuiAccordionDetails-root expansion-panel-details"
>
- <ForwardRef(AccordionSummary)
- aria-label="profile_type.accessibility.button_toggle_export"
- classes={
- Object {
- "content": "MuiAccordionSummary-content expansion-panel-content",
- "disabled": "Mui-disabled",
- "expandIcon": "MuiAccordionSummary-expandIcon",
- "expanded": "Mui-expanded",
- "focusVisible": "Mui-focusVisible",
- "focused": "Mui-focused",
- "root": "MuiAccordionSummary-root expansion-panel-summary",
- }
- }
- expandIcon={
- <Icon
- className="accordion-icon"
- icon="test-file-stub"
- size={16}
- spin={false}
- />
- }
+ <div
+ class="text-15-normal grey"
>
- <WithStyles(ForwardRef(ButtonBase))
- aria-expanded={false}
- aria-label="profile_type.accessibility.button_toggle_export"
- className="MuiAccordionSummary-root expansion-panel-summary"
- component="div"
- disableRipple={true}
- disabled={false}
- focusRipple={false}
- focusVisibleClassName="Mui-focusVisible Mui-focused"
- onClick={[Function]}
- >
- <ForwardRef(ButtonBase)
- aria-expanded={false}
- aria-label="profile_type.accessibility.button_toggle_export"
- className="MuiAccordionSummary-root expansion-panel-summary"
- classes={
- Object {
- "disabled": "Mui-disabled",
- "focusVisible": "Mui-focusVisible",
- "root": "MuiButtonBase-root",
- }
- }
- component="div"
- disableRipple={true}
- disabled={false}
- focusRipple={false}
- focusVisibleClassName="Mui-focusVisible Mui-focused"
- onClick={[Function]}
- >
- <div
- aria-disabled={false}
- aria-expanded={false}
- aria-label="profile_type.accessibility.button_toggle_export"
- className="MuiButtonBase-root MuiAccordionSummary-root expansion-panel-summary"
- onBlur={[Function]}
- onClick={[Function]}
- onDragLeave={[Function]}
- onFocus={[Function]}
- onKeyDown={[Function]}
- onKeyUp={[Function]}
- onMouseDown={[Function]}
- onMouseLeave={[Function]}
- onMouseUp={[Function]}
- onTouchEnd={[Function]}
- onTouchMove={[Function]}
- onTouchStart={[Function]}
- role="button"
- tabIndex={0}
- >
- <div
- className="MuiAccordionSummary-content expansion-panel-content"
- >
- <Icon
- className="export-icon"
- icon="test-file-stub"
- size={42}
- spin={false}
- >
- <Component
- className="export-icon styles__icon___23x3R"
- height={42}
- style={Object {}}
- width={42}
- >
- <svg
- className="export-icon styles__icon___23x3R"
- height={42}
- style={Object {}}
- width={42}
- >
- <use
- xlinkHref="#test-file-stub"
- />
- </svg>
- </Component>
- </Icon>
- <div
- className="text-16-normal accordion-title"
- >
- export.title_export
- </div>
- </div>
- <WithStyles(ForwardRef(IconButton))
- aria-hidden={true}
- className="MuiAccordionSummary-expandIcon"
- component="div"
- edge="end"
- role={null}
- tabIndex={null}
- >
- <ForwardRef(IconButton)
- aria-hidden={true}
- className="MuiAccordionSummary-expandIcon"
- classes={
- Object {
- "colorInherit": "MuiIconButton-colorInherit",
- "colorPrimary": "MuiIconButton-colorPrimary",
- "colorSecondary": "MuiIconButton-colorSecondary",
- "disabled": "Mui-disabled",
- "edgeEnd": "MuiIconButton-edgeEnd",
- "edgeStart": "MuiIconButton-edgeStart",
- "label": "MuiIconButton-label",
- "root": "MuiIconButton-root",
- "sizeSmall": "MuiIconButton-sizeSmall",
- }
- }
- component="div"
- edge="end"
- role={null}
- tabIndex={null}
- >
- <WithStyles(ForwardRef(ButtonBase))
- aria-hidden={true}
- centerRipple={true}
- className="MuiIconButton-root MuiAccordionSummary-expandIcon MuiIconButton-edgeEnd"
- component="div"
- disabled={false}
- focusRipple={true}
- role={null}
- tabIndex={null}
- >
- <ForwardRef(ButtonBase)
- aria-hidden={true}
- centerRipple={true}
- className="MuiIconButton-root MuiAccordionSummary-expandIcon MuiIconButton-edgeEnd"
- classes={
- Object {
- "disabled": "Mui-disabled",
- "focusVisible": "Mui-focusVisible",
- "root": "MuiButtonBase-root",
- }
- }
- component="div"
- disabled={false}
- focusRipple={true}
- role={null}
- tabIndex={null}
- >
- <div
- aria-disabled={false}
- aria-hidden={true}
- className="MuiButtonBase-root MuiIconButton-root MuiAccordionSummary-expandIcon MuiIconButton-edgeEnd"
- onBlur={[Function]}
- onDragLeave={[Function]}
- onFocus={[Function]}
- onKeyDown={[Function]}
- onKeyUp={[Function]}
- onMouseDown={[Function]}
- onMouseLeave={[Function]}
- onMouseUp={[Function]}
- onTouchEnd={[Function]}
- onTouchMove={[Function]}
- onTouchStart={[Function]}
- role={null}
- tabIndex={null}
- >
- <span
- className="MuiIconButton-label"
- >
- <Icon
- className="accordion-icon"
- icon="test-file-stub"
- size={16}
- spin={false}
- >
- <Component
- className="accordion-icon styles__icon___23x3R"
- height={16}
- style={Object {}}
- width={16}
- >
- <svg
- className="accordion-icon styles__icon___23x3R"
- height={16}
- style={Object {}}
- width={16}
- >
- <use
- xlinkHref="#test-file-stub"
- />
- </svg>
- </Component>
- </Icon>
- </span>
- <WithStyles(memo)
- center={true}
- >
- <ForwardRef(TouchRipple)
- center={true}
- classes={
- Object {
- "child": "MuiTouchRipple-child",
- "childLeaving": "MuiTouchRipple-childLeaving",
- "childPulsate": "MuiTouchRipple-childPulsate",
- "ripple": "MuiTouchRipple-ripple",
- "ripplePulsate": "MuiTouchRipple-ripplePulsate",
- "rippleVisible": "MuiTouchRipple-rippleVisible",
- "root": "MuiTouchRipple-root",
- }
- }
- >
- <span
- className="MuiTouchRipple-root"
- >
- <TransitionGroup
- childFactory={[Function]}
- component={null}
- exit={true}
- />
- </span>
- </ForwardRef(TouchRipple)>
- </WithStyles(memo)>
- </div>
- </ForwardRef(ButtonBase)>
- </WithStyles(ForwardRef(ButtonBase))>
- </ForwardRef(IconButton)>
- </WithStyles(ForwardRef(IconButton))>
- </div>
- </ForwardRef(ButtonBase)>
- </WithStyles(ForwardRef(ButtonBase))>
- </ForwardRef(AccordionSummary)>
- </WithStyles(ForwardRef(AccordionSummary))>
- <WithStyles(ForwardRef(Collapse))
- in={false}
- timeout="auto"
- >
- <ForwardRef(Collapse)
- classes={
- Object {
- "entered": "MuiCollapse-entered",
- "hidden": "MuiCollapse-hidden",
- "root": "MuiCollapse-root",
- "wrapper": "MuiCollapse-wrapper",
- "wrapperInner": "MuiCollapse-wrapperInner",
- }
- }
- in={false}
- timeout="auto"
+ export.text1
+ </div>
+ <div
+ class="text-16-bold"
>
- <Transition
- addEndListener={[Function]}
- appear={false}
- enter={true}
- exit={true}
- in={false}
- mountOnEnter={false}
- onEnter={[Function]}
- onEntered={[Function]}
- onEntering={[Function]}
- onExit={[Function]}
- onExited={[Function]}
- onExiting={[Function]}
- timeout={null}
- unmountOnExit={false}
- >
- <div
- className="MuiCollapse-root MuiCollapse-hidden"
- style={
- Object {
- "minHeight": "0px",
- }
- }
- >
- <div
- className="MuiCollapse-wrapper"
- >
- <div
- className="MuiCollapse-wrapperInner"
- >
- <div
- role="region"
- >
- <WithStyles(ForwardRef(AccordionDetails))
- classes={
- Object {
- "root": "expansion-panel-details",
- }
- }
- key=".1"
- >
- <ForwardRef(AccordionDetails)
- classes={
- Object {
- "root": "MuiAccordionDetails-root expansion-panel-details",
- }
- }
- >
- <div
- className="MuiAccordionDetails-root expansion-panel-details"
- >
- <div
- className="text-15-normal content intro"
- >
- export.text1
- </div>
- <div
- className="text-16-bold content"
- >
- export.fluid_select
- </div>
- <div
- className="text-15-normal content intro"
- >
- export.no_data
- </div>
- </div>
- </ForwardRef(AccordionDetails)>
- </WithStyles(ForwardRef(AccordionDetails))>
- </div>
- </div>
- </div>
- </div>
- </Transition>
- </ForwardRef(Collapse)>
- </WithStyles(ForwardRef(Collapse))>
+ export.fluid_select
+ </div>
+ <div
+ class="text-15-normal grey"
+ >
+ export.no_data
+ </div>
+ </div>
</div>
- </ForwardRef(Paper)>
- </WithStyles(ForwardRef(Paper))>
- </ForwardRef(Accordion)>
- </WithStyles(ForwardRef(Accordion))>
+ </div>
+ </div>
+ </div>
+ </div>
</div>
</div>
- <ExportStartModal
- handleCloseClick={[Function]}
- handleDownloadClick={[Function]}
- open={false}
- >
- <WithStyles(ForwardRef(Dialog))
- aria-labelledby="accessibility_title"
- classes={
- Object {
- "paper": "modal-paper",
- "root": "modal-root",
- }
- }
- onClose={[Function]}
- open={false}
- >
- <ForwardRef(Dialog)
- aria-labelledby="accessibility_title"
- classes={
- Object {
- "container": "MuiDialog-container",
- "paper": "MuiDialog-paper modal-paper",
- "paperFullScreen": "MuiDialog-paperFullScreen",
- "paperFullWidth": "MuiDialog-paperFullWidth",
- "paperScrollBody": "MuiDialog-paperScrollBody",
- "paperScrollPaper": "MuiDialog-paperScrollPaper",
- "paperWidthFalse": "MuiDialog-paperWidthFalse",
- "paperWidthLg": "MuiDialog-paperWidthLg",
- "paperWidthMd": "MuiDialog-paperWidthMd",
- "paperWidthSm": "MuiDialog-paperWidthSm",
- "paperWidthXl": "MuiDialog-paperWidthXl",
- "paperWidthXs": "MuiDialog-paperWidthXs",
- "root": "MuiDialog-root modal-root",
- "scrollBody": "MuiDialog-scrollBody",
- "scrollPaper": "MuiDialog-scrollPaper",
- }
- }
- onClose={[Function]}
- open={false}
- >
- <ForwardRef(Modal)
- BackdropComponent={
- Object {
- "$$typeof": Symbol(react.forward_ref),
- "Naked": Object {
- "$$typeof": Symbol(react.forward_ref),
- "propTypes": Object {
- "children": [Function],
- "className": [Function],
- "classes": [Function],
- "invisible": [Function],
- "open": [Function],
- "transitionDuration": [Function],
- },
- "render": [Function],
- },
- "displayName": "WithStyles(ForwardRef(Backdrop))",
- "options": Object {
- "defaultTheme": Object {
- "breakpoints": Object {
- "between": [Function],
- "down": [Function],
- "keys": Array [
- "xs",
- "sm",
- "md",
- "lg",
- "xl",
- ],
- "only": [Function],
- "up": [Function],
- "values": Object {
- "lg": 1280,
- "md": 960,
- "sm": 600,
- "xl": 1920,
- "xs": 0,
- },
- "width": [Function],
- },
- "direction": "ltr",
- "mixins": Object {
- "gutters": [Function],
- "toolbar": Object {
- "@media (min-width:0px) and (orientation: landscape)": Object {
- "minHeight": 48,
- },
- "@media (min-width:600px)": Object {
- "minHeight": 64,
- },
- "minHeight": 56,
- },
- },
- "overrides": Object {},
- "palette": Object {
- "action": Object {
- "activatedOpacity": 0.12,
- "active": "rgba(0, 0, 0, 0.54)",
- "disabled": "rgba(0, 0, 0, 0.26)",
- "disabledBackground": "rgba(0, 0, 0, 0.12)",
- "disabledOpacity": 0.38,
- "focus": "rgba(0, 0, 0, 0.12)",
- "focusOpacity": 0.12,
- "hover": "rgba(0, 0, 0, 0.04)",
- "hoverOpacity": 0.04,
- "selected": "rgba(0, 0, 0, 0.08)",
- "selectedOpacity": 0.08,
- },
- "augmentColor": [Function],
- "background": Object {
- "default": "#fafafa",
- "paper": "#fff",
- },
- "common": Object {
- "black": "#000",
- "white": "#fff",
- },
- "contrastThreshold": 3,
- "divider": "rgba(0, 0, 0, 0.12)",
- "error": Object {
- "contrastText": "#fff",
- "dark": "#d32f2f",
- "light": "#e57373",
- "main": "#f44336",
- },
- "getContrastText": [Function],
- "grey": Object {
- "100": "#f5f5f5",
- "200": "#eeeeee",
- "300": "#e0e0e0",
- "400": "#bdbdbd",
- "50": "#fafafa",
- "500": "#9e9e9e",
- "600": "#757575",
- "700": "#616161",
- "800": "#424242",
- "900": "#212121",
- "A100": "#d5d5d5",
- "A200": "#aaaaaa",
- "A400": "#303030",
- "A700": "#616161",
- },
- "info": Object {
- "contrastText": "#fff",
- "dark": "#1976d2",
- "light": "#64b5f6",
- "main": "#2196f3",
- },
- "primary": Object {
- "contrastText": "#fff",
- "dark": "#303f9f",
- "light": "#7986cb",
- "main": "#3f51b5",
- },
- "secondary": Object {
- "contrastText": "#fff",
- "dark": "#c51162",
- "light": "#ff4081",
- "main": "#f50057",
- },
- "success": Object {
- "contrastText": "rgba(0, 0, 0, 0.87)",
- "dark": "#388e3c",
- "light": "#81c784",
- "main": "#4caf50",
- },
- "text": Object {
- "disabled": "rgba(0, 0, 0, 0.38)",
- "hint": "rgba(0, 0, 0, 0.38)",
- "primary": "rgba(0, 0, 0, 0.87)",
- "secondary": "rgba(0, 0, 0, 0.54)",
- },
- "tonalOffset": 0.2,
- "type": "light",
- "warning": Object {
- "contrastText": "rgba(0, 0, 0, 0.87)",
- "dark": "#f57c00",
- "light": "#ffb74d",
- "main": "#ff9800",
- },
- },
- "props": Object {},
- "shadows": Array [
- "none",
- "0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12)",
- "0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12)",
- "0px 3px 3px -2px rgba(0,0,0,0.2),0px 3px 4px 0px rgba(0,0,0,0.14),0px 1px 8px 0px rgba(0,0,0,0.12)",
- "0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12)",
- "0px 3px 5px -1px rgba(0,0,0,0.2),0px 5px 8px 0px rgba(0,0,0,0.14),0px 1px 14px 0px rgba(0,0,0,0.12)",
- "0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12)",
- "0px 4px 5px -2px rgba(0,0,0,0.2),0px 7px 10px 1px rgba(0,0,0,0.14),0px 2px 16px 1px rgba(0,0,0,0.12)",
- "0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12)",
- "0px 5px 6px -3px rgba(0,0,0,0.2),0px 9px 12px 1px rgba(0,0,0,0.14),0px 3px 16px 2px rgba(0,0,0,0.12)",
- "0px 6px 6px -3px rgba(0,0,0,0.2),0px 10px 14px 1px rgba(0,0,0,0.14),0px 4px 18px 3px rgba(0,0,0,0.12)",
- "0px 6px 7px -4px rgba(0,0,0,0.2),0px 11px 15px 1px rgba(0,0,0,0.14),0px 4px 20px 3px rgba(0,0,0,0.12)",
- "0px 7px 8px -4px rgba(0,0,0,0.2),0px 12px 17px 2px rgba(0,0,0,0.14),0px 5px 22px 4px rgba(0,0,0,0.12)",
- "0px 7px 8px -4px rgba(0,0,0,0.2),0px 13px 19px 2px rgba(0,0,0,0.14),0px 5px 24px 4px rgba(0,0,0,0.12)",
- "0px 7px 9px -4px rgba(0,0,0,0.2),0px 14px 21px 2px rgba(0,0,0,0.14),0px 5px 26px 4px rgba(0,0,0,0.12)",
- "0px 8px 9px -5px rgba(0,0,0,0.2),0px 15px 22px 2px rgba(0,0,0,0.14),0px 6px 28px 5px rgba(0,0,0,0.12)",
- "0px 8px 10px -5px rgba(0,0,0,0.2),0px 16px 24px 2px rgba(0,0,0,0.14),0px 6px 30px 5px rgba(0,0,0,0.12)",
- "0px 8px 11px -5px rgba(0,0,0,0.2),0px 17px 26px 2px rgba(0,0,0,0.14),0px 6px 32px 5px rgba(0,0,0,0.12)",
- "0px 9px 11px -5px rgba(0,0,0,0.2),0px 18px 28px 2px rgba(0,0,0,0.14),0px 7px 34px 6px rgba(0,0,0,0.12)",
- "0px 9px 12px -6px rgba(0,0,0,0.2),0px 19px 29px 2px rgba(0,0,0,0.14),0px 7px 36px 6px rgba(0,0,0,0.12)",
- "0px 10px 13px -6px rgba(0,0,0,0.2),0px 20px 31px 3px rgba(0,0,0,0.14),0px 8px 38px 7px rgba(0,0,0,0.12)",
- "0px 10px 13px -6px rgba(0,0,0,0.2),0px 21px 33px 3px rgba(0,0,0,0.14),0px 8px 40px 7px rgba(0,0,0,0.12)",
- "0px 10px 14px -6px rgba(0,0,0,0.2),0px 22px 35px 3px rgba(0,0,0,0.14),0px 8px 42px 7px rgba(0,0,0,0.12)",
- "0px 11px 14px -7px rgba(0,0,0,0.2),0px 23px 36px 3px rgba(0,0,0,0.14),0px 9px 44px 8px rgba(0,0,0,0.12)",
- "0px 11px 15px -7px rgba(0,0,0,0.2),0px 24px 38px 3px rgba(0,0,0,0.14),0px 9px 46px 8px rgba(0,0,0,0.12)",
- ],
- "shape": Object {
- "borderRadius": 4,
- },
- "spacing": [Function],
- "transitions": Object {
- "create": [Function],
- "duration": Object {
- "complex": 375,
- "enteringScreen": 225,
- "leavingScreen": 195,
- "short": 250,
- "shorter": 200,
- "shortest": 150,
- "standard": 300,
- },
- "easing": Object {
- "easeIn": "cubic-bezier(0.4, 0, 1, 1)",
- "easeInOut": "cubic-bezier(0.4, 0, 0.2, 1)",
- "easeOut": "cubic-bezier(0.0, 0, 0.2, 1)",
- "sharp": "cubic-bezier(0.4, 0, 0.6, 1)",
- },
- "getAutoHeightDuration": [Function],
- },
- "typography": Object {
- "body1": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "1rem",
- "fontWeight": 400,
- "letterSpacing": "0.00938em",
- "lineHeight": 1.5,
- },
- "body2": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "0.875rem",
- "fontWeight": 400,
- "letterSpacing": "0.01071em",
- "lineHeight": 1.43,
- },
- "button": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "0.875rem",
- "fontWeight": 500,
- "letterSpacing": "0.02857em",
- "lineHeight": 1.75,
- "textTransform": "uppercase",
- },
- "caption": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "0.75rem",
- "fontWeight": 400,
- "letterSpacing": "0.03333em",
- "lineHeight": 1.66,
- },
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": 14,
- "fontWeightBold": 700,
- "fontWeightLight": 300,
- "fontWeightMedium": 500,
- "fontWeightRegular": 400,
- "h1": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "6rem",
- "fontWeight": 300,
- "letterSpacing": "-0.01562em",
- "lineHeight": 1.167,
- },
- "h2": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "3.75rem",
- "fontWeight": 300,
- "letterSpacing": "-0.00833em",
- "lineHeight": 1.2,
- },
- "h3": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "3rem",
- "fontWeight": 400,
- "letterSpacing": "0em",
- "lineHeight": 1.167,
- },
- "h4": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "2.125rem",
- "fontWeight": 400,
- "letterSpacing": "0.00735em",
- "lineHeight": 1.235,
- },
- "h5": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "1.5rem",
- "fontWeight": 400,
- "letterSpacing": "0em",
- "lineHeight": 1.334,
- },
- "h6": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "1.25rem",
- "fontWeight": 500,
- "letterSpacing": "0.0075em",
- "lineHeight": 1.6,
- },
- "htmlFontSize": 16,
- "overline": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "0.75rem",
- "fontWeight": 400,
- "letterSpacing": "0.08333em",
- "lineHeight": 2.66,
- "textTransform": "uppercase",
- },
- "pxToRem": [Function],
- "round": [Function],
- "subtitle1": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "1rem",
- "fontWeight": 400,
- "letterSpacing": "0.00938em",
- "lineHeight": 1.75,
- },
- "subtitle2": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "0.875rem",
- "fontWeight": 500,
- "letterSpacing": "0.00714em",
- "lineHeight": 1.57,
- },
- },
- "zIndex": Object {
- "appBar": 1100,
- "drawer": 1200,
- "mobileStepper": 1000,
- "modal": 1300,
- "snackbar": 1400,
- "speedDial": 1050,
- "tooltip": 1500,
- },
- },
- "name": "MuiBackdrop",
- },
- "propTypes": Object {
- "classes": [Function],
- "innerRef": [Function],
- },
- "render": [Function],
- "useStyles": [Function],
- }
- }
- BackdropProps={
- Object {
- "transitionDuration": Object {
- "enter": 225,
- "exit": 195,
- },
- }
- }
- className="MuiDialog-root modal-root"
- closeAfterTransition={true}
- disableEscapeKeyDown={false}
- onClose={[Function]}
- open={false}
- />
- </ForwardRef(Dialog)>
- </WithStyles(ForwardRef(Dialog))>
- </ExportStartModal>
- <ExportDoneModal
- error={false}
- handleCloseClick={[Function]}
- open={false}
- >
- <WithStyles(ForwardRef(Dialog))
- aria-labelledby="accessibility-title"
- classes={
- Object {
- "paper": "modal-paper",
- "root": "modal-root",
- }
- }
- onClose={[Function]}
- open={false}
- >
- <ForwardRef(Dialog)
- aria-labelledby="accessibility-title"
- classes={
- Object {
- "container": "MuiDialog-container",
- "paper": "MuiDialog-paper modal-paper",
- "paperFullScreen": "MuiDialog-paperFullScreen",
- "paperFullWidth": "MuiDialog-paperFullWidth",
- "paperScrollBody": "MuiDialog-paperScrollBody",
- "paperScrollPaper": "MuiDialog-paperScrollPaper",
- "paperWidthFalse": "MuiDialog-paperWidthFalse",
- "paperWidthLg": "MuiDialog-paperWidthLg",
- "paperWidthMd": "MuiDialog-paperWidthMd",
- "paperWidthSm": "MuiDialog-paperWidthSm",
- "paperWidthXl": "MuiDialog-paperWidthXl",
- "paperWidthXs": "MuiDialog-paperWidthXs",
- "root": "MuiDialog-root modal-root",
- "scrollBody": "MuiDialog-scrollBody",
- "scrollPaper": "MuiDialog-scrollPaper",
- }
- }
- onClose={[Function]}
- open={false}
- >
- <ForwardRef(Modal)
- BackdropComponent={
- Object {
- "$$typeof": Symbol(react.forward_ref),
- "Naked": Object {
- "$$typeof": Symbol(react.forward_ref),
- "propTypes": Object {
- "children": [Function],
- "className": [Function],
- "classes": [Function],
- "invisible": [Function],
- "open": [Function],
- "transitionDuration": [Function],
- },
- "render": [Function],
- },
- "displayName": "WithStyles(ForwardRef(Backdrop))",
- "options": Object {
- "defaultTheme": Object {
- "breakpoints": Object {
- "between": [Function],
- "down": [Function],
- "keys": Array [
- "xs",
- "sm",
- "md",
- "lg",
- "xl",
- ],
- "only": [Function],
- "up": [Function],
- "values": Object {
- "lg": 1280,
- "md": 960,
- "sm": 600,
- "xl": 1920,
- "xs": 0,
- },
- "width": [Function],
- },
- "direction": "ltr",
- "mixins": Object {
- "gutters": [Function],
- "toolbar": Object {
- "@media (min-width:0px) and (orientation: landscape)": Object {
- "minHeight": 48,
- },
- "@media (min-width:600px)": Object {
- "minHeight": 64,
- },
- "minHeight": 56,
- },
- },
- "overrides": Object {},
- "palette": Object {
- "action": Object {
- "activatedOpacity": 0.12,
- "active": "rgba(0, 0, 0, 0.54)",
- "disabled": "rgba(0, 0, 0, 0.26)",
- "disabledBackground": "rgba(0, 0, 0, 0.12)",
- "disabledOpacity": 0.38,
- "focus": "rgba(0, 0, 0, 0.12)",
- "focusOpacity": 0.12,
- "hover": "rgba(0, 0, 0, 0.04)",
- "hoverOpacity": 0.04,
- "selected": "rgba(0, 0, 0, 0.08)",
- "selectedOpacity": 0.08,
- },
- "augmentColor": [Function],
- "background": Object {
- "default": "#fafafa",
- "paper": "#fff",
- },
- "common": Object {
- "black": "#000",
- "white": "#fff",
- },
- "contrastThreshold": 3,
- "divider": "rgba(0, 0, 0, 0.12)",
- "error": Object {
- "contrastText": "#fff",
- "dark": "#d32f2f",
- "light": "#e57373",
- "main": "#f44336",
- },
- "getContrastText": [Function],
- "grey": Object {
- "100": "#f5f5f5",
- "200": "#eeeeee",
- "300": "#e0e0e0",
- "400": "#bdbdbd",
- "50": "#fafafa",
- "500": "#9e9e9e",
- "600": "#757575",
- "700": "#616161",
- "800": "#424242",
- "900": "#212121",
- "A100": "#d5d5d5",
- "A200": "#aaaaaa",
- "A400": "#303030",
- "A700": "#616161",
- },
- "info": Object {
- "contrastText": "#fff",
- "dark": "#1976d2",
- "light": "#64b5f6",
- "main": "#2196f3",
- },
- "primary": Object {
- "contrastText": "#fff",
- "dark": "#303f9f",
- "light": "#7986cb",
- "main": "#3f51b5",
- },
- "secondary": Object {
- "contrastText": "#fff",
- "dark": "#c51162",
- "light": "#ff4081",
- "main": "#f50057",
- },
- "success": Object {
- "contrastText": "rgba(0, 0, 0, 0.87)",
- "dark": "#388e3c",
- "light": "#81c784",
- "main": "#4caf50",
- },
- "text": Object {
- "disabled": "rgba(0, 0, 0, 0.38)",
- "hint": "rgba(0, 0, 0, 0.38)",
- "primary": "rgba(0, 0, 0, 0.87)",
- "secondary": "rgba(0, 0, 0, 0.54)",
- },
- "tonalOffset": 0.2,
- "type": "light",
- "warning": Object {
- "contrastText": "rgba(0, 0, 0, 0.87)",
- "dark": "#f57c00",
- "light": "#ffb74d",
- "main": "#ff9800",
- },
- },
- "props": Object {},
- "shadows": Array [
- "none",
- "0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12)",
- "0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12)",
- "0px 3px 3px -2px rgba(0,0,0,0.2),0px 3px 4px 0px rgba(0,0,0,0.14),0px 1px 8px 0px rgba(0,0,0,0.12)",
- "0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12)",
- "0px 3px 5px -1px rgba(0,0,0,0.2),0px 5px 8px 0px rgba(0,0,0,0.14),0px 1px 14px 0px rgba(0,0,0,0.12)",
- "0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12)",
- "0px 4px 5px -2px rgba(0,0,0,0.2),0px 7px 10px 1px rgba(0,0,0,0.14),0px 2px 16px 1px rgba(0,0,0,0.12)",
- "0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12)",
- "0px 5px 6px -3px rgba(0,0,0,0.2),0px 9px 12px 1px rgba(0,0,0,0.14),0px 3px 16px 2px rgba(0,0,0,0.12)",
- "0px 6px 6px -3px rgba(0,0,0,0.2),0px 10px 14px 1px rgba(0,0,0,0.14),0px 4px 18px 3px rgba(0,0,0,0.12)",
- "0px 6px 7px -4px rgba(0,0,0,0.2),0px 11px 15px 1px rgba(0,0,0,0.14),0px 4px 20px 3px rgba(0,0,0,0.12)",
- "0px 7px 8px -4px rgba(0,0,0,0.2),0px 12px 17px 2px rgba(0,0,0,0.14),0px 5px 22px 4px rgba(0,0,0,0.12)",
- "0px 7px 8px -4px rgba(0,0,0,0.2),0px 13px 19px 2px rgba(0,0,0,0.14),0px 5px 24px 4px rgba(0,0,0,0.12)",
- "0px 7px 9px -4px rgba(0,0,0,0.2),0px 14px 21px 2px rgba(0,0,0,0.14),0px 5px 26px 4px rgba(0,0,0,0.12)",
- "0px 8px 9px -5px rgba(0,0,0,0.2),0px 15px 22px 2px rgba(0,0,0,0.14),0px 6px 28px 5px rgba(0,0,0,0.12)",
- "0px 8px 10px -5px rgba(0,0,0,0.2),0px 16px 24px 2px rgba(0,0,0,0.14),0px 6px 30px 5px rgba(0,0,0,0.12)",
- "0px 8px 11px -5px rgba(0,0,0,0.2),0px 17px 26px 2px rgba(0,0,0,0.14),0px 6px 32px 5px rgba(0,0,0,0.12)",
- "0px 9px 11px -5px rgba(0,0,0,0.2),0px 18px 28px 2px rgba(0,0,0,0.14),0px 7px 34px 6px rgba(0,0,0,0.12)",
- "0px 9px 12px -6px rgba(0,0,0,0.2),0px 19px 29px 2px rgba(0,0,0,0.14),0px 7px 36px 6px rgba(0,0,0,0.12)",
- "0px 10px 13px -6px rgba(0,0,0,0.2),0px 20px 31px 3px rgba(0,0,0,0.14),0px 8px 38px 7px rgba(0,0,0,0.12)",
- "0px 10px 13px -6px rgba(0,0,0,0.2),0px 21px 33px 3px rgba(0,0,0,0.14),0px 8px 40px 7px rgba(0,0,0,0.12)",
- "0px 10px 14px -6px rgba(0,0,0,0.2),0px 22px 35px 3px rgba(0,0,0,0.14),0px 8px 42px 7px rgba(0,0,0,0.12)",
- "0px 11px 14px -7px rgba(0,0,0,0.2),0px 23px 36px 3px rgba(0,0,0,0.14),0px 9px 44px 8px rgba(0,0,0,0.12)",
- "0px 11px 15px -7px rgba(0,0,0,0.2),0px 24px 38px 3px rgba(0,0,0,0.14),0px 9px 46px 8px rgba(0,0,0,0.12)",
- ],
- "shape": Object {
- "borderRadius": 4,
- },
- "spacing": [Function],
- "transitions": Object {
- "create": [Function],
- "duration": Object {
- "complex": 375,
- "enteringScreen": 225,
- "leavingScreen": 195,
- "short": 250,
- "shorter": 200,
- "shortest": 150,
- "standard": 300,
- },
- "easing": Object {
- "easeIn": "cubic-bezier(0.4, 0, 1, 1)",
- "easeInOut": "cubic-bezier(0.4, 0, 0.2, 1)",
- "easeOut": "cubic-bezier(0.0, 0, 0.2, 1)",
- "sharp": "cubic-bezier(0.4, 0, 0.6, 1)",
- },
- "getAutoHeightDuration": [Function],
- },
- "typography": Object {
- "body1": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "1rem",
- "fontWeight": 400,
- "letterSpacing": "0.00938em",
- "lineHeight": 1.5,
- },
- "body2": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "0.875rem",
- "fontWeight": 400,
- "letterSpacing": "0.01071em",
- "lineHeight": 1.43,
- },
- "button": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "0.875rem",
- "fontWeight": 500,
- "letterSpacing": "0.02857em",
- "lineHeight": 1.75,
- "textTransform": "uppercase",
- },
- "caption": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "0.75rem",
- "fontWeight": 400,
- "letterSpacing": "0.03333em",
- "lineHeight": 1.66,
- },
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": 14,
- "fontWeightBold": 700,
- "fontWeightLight": 300,
- "fontWeightMedium": 500,
- "fontWeightRegular": 400,
- "h1": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "6rem",
- "fontWeight": 300,
- "letterSpacing": "-0.01562em",
- "lineHeight": 1.167,
- },
- "h2": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "3.75rem",
- "fontWeight": 300,
- "letterSpacing": "-0.00833em",
- "lineHeight": 1.2,
- },
- "h3": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "3rem",
- "fontWeight": 400,
- "letterSpacing": "0em",
- "lineHeight": 1.167,
- },
- "h4": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "2.125rem",
- "fontWeight": 400,
- "letterSpacing": "0.00735em",
- "lineHeight": 1.235,
- },
- "h5": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "1.5rem",
- "fontWeight": 400,
- "letterSpacing": "0em",
- "lineHeight": 1.334,
- },
- "h6": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "1.25rem",
- "fontWeight": 500,
- "letterSpacing": "0.0075em",
- "lineHeight": 1.6,
- },
- "htmlFontSize": 16,
- "overline": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "0.75rem",
- "fontWeight": 400,
- "letterSpacing": "0.08333em",
- "lineHeight": 2.66,
- "textTransform": "uppercase",
- },
- "pxToRem": [Function],
- "round": [Function],
- "subtitle1": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "1rem",
- "fontWeight": 400,
- "letterSpacing": "0.00938em",
- "lineHeight": 1.75,
- },
- "subtitle2": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "0.875rem",
- "fontWeight": 500,
- "letterSpacing": "0.00714em",
- "lineHeight": 1.57,
- },
- },
- "zIndex": Object {
- "appBar": 1100,
- "drawer": 1200,
- "mobileStepper": 1000,
- "modal": 1300,
- "snackbar": 1400,
- "speedDial": 1050,
- "tooltip": 1500,
- },
- },
- "name": "MuiBackdrop",
- },
- "propTypes": Object {
- "classes": [Function],
- "innerRef": [Function],
- },
- "render": [Function],
- "useStyles": [Function],
- }
- }
- BackdropProps={
- Object {
- "transitionDuration": Object {
- "enter": 225,
- "exit": 195,
- },
- }
- }
- className="MuiDialog-root modal-root"
- closeAfterTransition={true}
- disableEscapeKeyDown={false}
- onClose={[Function]}
- open={false}
- />
- </ForwardRef(Dialog)>
- </WithStyles(ForwardRef(Dialog))>
- </ExportDoneModal>
-</ExportData>
+</div>
`;
diff --git a/src/components/Options/ExportData/exportData.scss b/src/components/Options/ExportData/exportData.scss
index fec065e3b8beda0a6d03a05bf5441490dbe5f79c..3b6852c49d53ced72d8498bba3d73558e04f0d3f 100644
--- a/src/components/Options/ExportData/exportData.scss
+++ b/src/components/Options/ExportData/exportData.scss
@@ -1,9 +1,12 @@
@import 'src/styles/base/color';
@import 'src/styles/base/breakpoint';
+@import 'src/styles/base/mixins';
+
div.expansion-panel-root,
div.expansion-panel-root.Mui-expanded:last-child {
margin: 0.2rem 0;
}
+
.export-option-root {
display: flex;
flex-direction: column;
@@ -11,63 +14,41 @@ div.expansion-panel-root.Mui-expanded:last-child {
justify-content: center;
margin-top: 0.5rem;
padding: 0 1.5rem;
-}
-.export-option-content {
- width: 45.75rem;
- @media #{$large-phone} {
- width: 100%;
- }
- .MuiAccordionSummary-content {
- margin: 0;
- }
- .MuiIconButton-edgeEnd {
- margin: 0;
- }
- .accordion-title {
- color: $white;
- }
- .expansion-panel-details {
- flex-direction: column;
- .content {
- padding-bottom: 16px;
- }
- .intro {
- color: $soft-grey;
- }
- .btn-secondary-negative {
- border-color: $grey-bright !important;
- height: 40px;
+
+ .export-option-content {
+ width: 45.75rem;
+ @media #{$large-phone} {
+ width: 100%;
}
- .checkbox {
+ .MuiAccordionSummary-content {
margin: 0;
- input {
- margin: 0.5rem;
- border: 1px solid $soft-grey;
- border-radius: 2px;
- }
- }
- .answer-checked input:before,
- .answer-checked input:after {
- background: black;
}
- .answer-checked input {
- background: $gold-shadow;
- border: 2px solid $gold-shadow;
+ .MuiIconButton-edgeEnd {
+ margin: 0;
}
- .answer-checked input:before {
- height: 13px;
- left: 11px;
- top: 3px;
+ .accordion-title {
+ color: $white;
}
- .answer-checked input:after {
- height: 9px;
- left: 4px;
+ .expansion-panel-summary {
+ padding: 0 0.25rem 0 1rem;
+ .expansion-panel-content {
+ gap: 1rem;
+ }
}
- }
- div.expansion-panel-summary {
- padding: 0 0.25rem 0 1rem;
- .expansion-panel-content {
+ .expansion-panel-details {
+ flex-direction: column;
gap: 1rem;
+
+ .grey {
+ color: $soft-grey;
+ }
+
+ label {
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+ cursor: pointer;
+ }
}
}
}
diff --git a/src/components/Options/GCU/GCUContent.spec.tsx b/src/components/Options/GCU/GCUContent.spec.tsx
index 2bc41f57b908daa0b20931d8a48be0fef4720aa2..d504d3c128c4fc8825fd5c24db936d4d7d52cc53 100644
--- a/src/components/Options/GCU/GCUContent.spec.tsx
+++ b/src/components/Options/GCU/GCUContent.spec.tsx
@@ -1,10 +1,10 @@
+import { render } from '@testing-library/react'
import GCUContent from 'components/Options/GCU/GCUContent'
-import { shallow } from 'enzyme'
import React from 'react'
describe('GCUContent component', () => {
it('should be rendered correctly', () => {
- const component = shallow(<GCUContent />).getElement()
- expect(component).toMatchSnapshot()
+ const { container } = render(<GCUContent />)
+ expect(container).toMatchSnapshot()
})
})
diff --git a/src/components/Options/GCU/GCULink.spec.tsx b/src/components/Options/GCU/GCULink.spec.tsx
index f3cb6b4f33f294ff4767901ceafbf2aa58280998..9de09ea7b8be41fedd27b833b198a80a03394b41 100644
--- a/src/components/Options/GCU/GCULink.spec.tsx
+++ b/src/components/Options/GCU/GCULink.spec.tsx
@@ -1,10 +1,15 @@
+import { render } from '@testing-library/react'
import LegalNoticeLink from 'components/Options/LegalNotice/LegalNoticeLink'
-import { shallow } from 'enzyme'
import React from 'react'
+import { BrowserRouter } from 'react-router-dom'
describe('LegalNoticeLink component', () => {
it('should be rendered correctly', () => {
- const component = shallow(<LegalNoticeLink />).getElement()
- expect(component).toMatchSnapshot()
+ const { container } = render(
+ <BrowserRouter>
+ <LegalNoticeLink />
+ </BrowserRouter>
+ )
+ expect(container).toMatchSnapshot()
})
})
diff --git a/src/components/Options/GCU/GCULink.tsx b/src/components/Options/GCU/GCULink.tsx
index 3fff26ec8500b8da8282068cdd8feef42ab5cc3b..bb43da2363560215ab6f66536e1f85d1f51394bf 100644
--- a/src/components/Options/GCU/GCULink.tsx
+++ b/src/components/Options/GCU/GCULink.tsx
@@ -16,7 +16,7 @@ const GCULink = () => {
component={RouterLink}
to="/options/gcu"
>
- <div className="card optionCard">
+ <div className="card">
<div className="gcu-link-card">
<div className="gcu-link-card-content">
<StyledIcon
diff --git a/src/components/Options/GCU/GCUView.spec.tsx b/src/components/Options/GCU/GCUView.spec.tsx
index 9692ba84bd47f3ade5d9474547d8139142f116fd..43396b90d61d43d9c12a985404167970d2541223 100644
--- a/src/components/Options/GCU/GCUView.spec.tsx
+++ b/src/components/Options/GCU/GCUView.spec.tsx
@@ -1,5 +1,5 @@
+import { render } from '@testing-library/react'
import GCUView from 'components/Options/GCU/GCUView'
-import { shallow } from 'enzyme'
import React from 'react'
jest.mock('components/Header/CozyBar', () => 'mock-cozybar')
@@ -8,7 +8,7 @@ jest.mock('components/Content/Content', () => 'mock-content')
describe('GCUView component', () => {
it('should be rendered correctly', () => {
- const component = shallow(<GCUView />).getElement()
- expect(component).toMatchSnapshot()
+ const { container } = render(<GCUView />)
+ expect(container).toMatchSnapshot()
})
})
diff --git a/src/components/Options/GCU/__snapshots__/GCUContent.spec.tsx.snap b/src/components/Options/GCU/__snapshots__/GCUContent.spec.tsx.snap
index 93d8846db6808891dfce8569b1bb4924ef66289c..dfdcf4910c46f89db3fa3bebeeada71b8e3fc2e6 100644
--- a/src/components/Options/GCU/__snapshots__/GCUContent.spec.tsx.snap
+++ b/src/components/Options/GCU/__snapshots__/GCUContent.spec.tsx.snap
@@ -1,288 +1,280 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`GCUContent component should be rendered correctly 1`] = `
-<div
- className="gcu-content-root"
->
+<div>
<div
- className="gcu-content-wrapper"
+ class="gcu-content-root"
>
- <p
- className="text-14-normal version"
- >
- gcu.version
- </p>
- <div
- className="gcu-content-part-title text-15-normal"
- >
- gcu.content.title1
- </div>
- <p
- className="text-14-normal"
- >
- gcu.content.part1_1
- </p>
- <p
- className="text-14-normal"
- >
- gcu.content.part1_2
- </p>
- <p
- className="text-14-normal"
- >
- gcu.content.part1_3
- </p>
- <div
- className="gcu-content-part-title text-15-normal"
- >
- gcu.content.title2
- </div>
- <p
- className="text-14-normal"
- >
- gcu.content.part2_1
- </p>
- <p
- className="text-14-normal"
- >
- gcu.content.part2_2
- </p>
- <ul
- className="text-14-normal"
- >
- <li>
- gcu.content.part2_2_list1
- </li>
- <li>
- gcu.content.part2_2_list2
- </li>
- <li>
- gcu.content.part2_2_list3
- </li>
- </ul>
- <p
- className="text-14-normal"
- >
- gcu.content.part2_3
- </p>
- <p
- className="text-14-normal"
- >
- gcu.content.part2_4
- </p>
- <div
- className="gcu-content-part-title text-15-normal"
- >
- gcu.content.title3
- </div>
- <p
- className="text-14-normal"
- >
- gcu.content.part3_1
- </p>
- <p
- className="text-14-normal"
- >
- gcu.content.part3_2
- </p>
- <p
- className="text-14-normal"
- >
- gcu.content.part3_3
- </p>
- <p
- className="text-14-normal"
- >
- gcu.content.part3_4
- </p>
- <div
- className="gcu-content-part-title text-15-normal"
- >
- gcu.content.title4
- </div>
- <p
- className="text-14-normal"
- >
- gcu.content.part4_1
- </p>
- <p
- className="text-14-normal"
- dangerouslySetInnerHTML={
- Object {
- "__html": "gcu.content.part4_2",
- }
- }
- />
- <div
- className="gcu-content-part-title text-15-normal"
- >
- gcu.content.title5
- </div>
- <p
- className="text-14-normal"
- >
- gcu.content.part5_1
- </p>
- <p
- className="text-14-normal"
- >
- gcu.content.part5_2
- </p>
- <p
- className="text-14-normal"
- >
- gcu.content.part5_3
- </p>
- <ul
- className="text-14-normal"
- >
- <li>
- gcu.content.part5_3_list1
- </li>
- <li>
- gcu.content.part5_3_list2
- </li>
- </ul>
- <p
- className="text-14-normal"
- >
- gcu.content.part5_4
- </p>
- <p
- className="text-14-normal"
- >
- gcu.content.part5_5
- </p>
- <div
- className="gcu-content-part-title text-15-normal"
- >
- gcu.content.title6
- </div>
- <p
- className="text-14-normal"
- >
- gcu.content.part6_1
- </p>
- <p
- className="text-14-normal"
- >
- gcu.content.part6_2
- </p>
- <p
- className="text-14-normal"
- >
- gcu.content.part6_3
- </p>
- <ul
- className="text-14-normal"
- >
- <li>
- gcu.content.part6_3_list1
- </li>
- <li>
- gcu.content.part6_3_list2
- </li>
- <li>
- gcu.content.part6_3_list3
- </li>
- </ul>
- <p
- className="text-14-normal"
- >
- gcu.content.part6_4
- </p>
- <p
- className="text-14-normal"
- >
- gcu.content.part6_5
- </p>
- <div
- className="gcu-content-part-title text-15-normal"
- >
- gcu.content.title8
- </div>
- <p
- className="text-14-normal"
- >
- gcu.content.part8_1
- </p>
- <p
- className="text-14-normal"
- dangerouslySetInnerHTML={
- Object {
- "__html": "gcu.content.part8_2",
- }
- }
- />
<div
- className="gcu-content-part-title text-15-normal"
+ class="gcu-content-wrapper"
>
- gcu.content.title9
+ <p
+ class="text-14-normal version"
+ >
+ gcu.version
+ </p>
+ <div
+ class="gcu-content-part-title text-15-normal"
+ >
+ gcu.content.title1
+ </div>
+ <p
+ class="text-14-normal"
+ >
+ gcu.content.part1_1
+ </p>
+ <p
+ class="text-14-normal"
+ >
+ gcu.content.part1_2
+ </p>
+ <p
+ class="text-14-normal"
+ >
+ gcu.content.part1_3
+ </p>
+ <div
+ class="gcu-content-part-title text-15-normal"
+ >
+ gcu.content.title2
+ </div>
+ <p
+ class="text-14-normal"
+ >
+ gcu.content.part2_1
+ </p>
+ <p
+ class="text-14-normal"
+ >
+ gcu.content.part2_2
+ </p>
+ <ul
+ class="text-14-normal"
+ >
+ <li>
+ gcu.content.part2_2_list1
+ </li>
+ <li>
+ gcu.content.part2_2_list2
+ </li>
+ <li>
+ gcu.content.part2_2_list3
+ </li>
+ </ul>
+ <p
+ class="text-14-normal"
+ >
+ gcu.content.part2_3
+ </p>
+ <p
+ class="text-14-normal"
+ >
+ gcu.content.part2_4
+ </p>
+ <div
+ class="gcu-content-part-title text-15-normal"
+ >
+ gcu.content.title3
+ </div>
+ <p
+ class="text-14-normal"
+ >
+ gcu.content.part3_1
+ </p>
+ <p
+ class="text-14-normal"
+ >
+ gcu.content.part3_2
+ </p>
+ <p
+ class="text-14-normal"
+ >
+ gcu.content.part3_3
+ </p>
+ <p
+ class="text-14-normal"
+ >
+ gcu.content.part3_4
+ </p>
+ <div
+ class="gcu-content-part-title text-15-normal"
+ >
+ gcu.content.title4
+ </div>
+ <p
+ class="text-14-normal"
+ >
+ gcu.content.part4_1
+ </p>
+ <p
+ class="text-14-normal"
+ >
+ gcu.content.part4_2
+ </p>
+ <div
+ class="gcu-content-part-title text-15-normal"
+ >
+ gcu.content.title5
+ </div>
+ <p
+ class="text-14-normal"
+ >
+ gcu.content.part5_1
+ </p>
+ <p
+ class="text-14-normal"
+ >
+ gcu.content.part5_2
+ </p>
+ <p
+ class="text-14-normal"
+ >
+ gcu.content.part5_3
+ </p>
+ <ul
+ class="text-14-normal"
+ >
+ <li>
+ gcu.content.part5_3_list1
+ </li>
+ <li>
+ gcu.content.part5_3_list2
+ </li>
+ </ul>
+ <p
+ class="text-14-normal"
+ >
+ gcu.content.part5_4
+ </p>
+ <p
+ class="text-14-normal"
+ >
+ gcu.content.part5_5
+ </p>
+ <div
+ class="gcu-content-part-title text-15-normal"
+ >
+ gcu.content.title6
+ </div>
+ <p
+ class="text-14-normal"
+ >
+ gcu.content.part6_1
+ </p>
+ <p
+ class="text-14-normal"
+ >
+ gcu.content.part6_2
+ </p>
+ <p
+ class="text-14-normal"
+ >
+ gcu.content.part6_3
+ </p>
+ <ul
+ class="text-14-normal"
+ >
+ <li>
+ gcu.content.part6_3_list1
+ </li>
+ <li>
+ gcu.content.part6_3_list2
+ </li>
+ <li>
+ gcu.content.part6_3_list3
+ </li>
+ </ul>
+ <p
+ class="text-14-normal"
+ >
+ gcu.content.part6_4
+ </p>
+ <p
+ class="text-14-normal"
+ >
+ gcu.content.part6_5
+ </p>
+ <div
+ class="gcu-content-part-title text-15-normal"
+ >
+ gcu.content.title8
+ </div>
+ <p
+ class="text-14-normal"
+ >
+ gcu.content.part8_1
+ </p>
+ <p
+ class="text-14-normal"
+ >
+ gcu.content.part8_2
+ </p>
+ <div
+ class="gcu-content-part-title text-15-normal"
+ >
+ gcu.content.title9
+ </div>
+ <p
+ class="text-14-normal"
+ >
+ <span
+ class="text-14-bold"
+ >
+ gcu.content.part9_1_title
+ </span>
+ <span>
+ gcu.content.part9_1_content
+ </span>
+ </p>
+ <p
+ class="text-14-normal"
+ >
+ <span
+ class="text-14-bold"
+ >
+ gcu.content.part9_2_title
+ </span>
+ <span>
+ gcu.content.part9_2_content
+ </span>
+ </p>
+ <p
+ class="text-14-normal"
+ >
+ <span
+ class="text-14-bold"
+ >
+ gcu.content.part9_3_title
+ </span>
+ <span>
+ gcu.content.part9_3_content
+ </span>
+ </p>
+ <p
+ class="text-14-normal"
+ >
+ <span
+ class="text-14-bold"
+ >
+ gcu.content.part9_4_title
+ </span>
+ <span>
+ gcu.content.part9_4_content
+ </span>
+ </p>
+ <p
+ class="text-14-normal"
+ >
+ <span
+ class="text-14-bold"
+ >
+ gcu.content.part9_5_title
+ </span>
+ <span>
+ gcu.content.part9_5_content
+ </span>
+ </p>
</div>
- <p
- className="text-14-normal"
- >
- <span
- className="text-14-bold"
- >
- gcu.content.part9_1_title
- </span>
- <span>
- gcu.content.part9_1_content
- </span>
- </p>
- <p
- className="text-14-normal"
- >
- <span
- className="text-14-bold"
- >
- gcu.content.part9_2_title
- </span>
- <span>
- gcu.content.part9_2_content
- </span>
- </p>
- <p
- className="text-14-normal"
- >
- <span
- className="text-14-bold"
- >
- gcu.content.part9_3_title
- </span>
- <span>
- gcu.content.part9_3_content
- </span>
- </p>
- <p
- className="text-14-normal"
- >
- <span
- className="text-14-bold"
- >
- gcu.content.part9_4_title
- </span>
- <span
- dangerouslySetInnerHTML={
- Object {
- "__html": "gcu.content.part9_4_content",
- }
- }
- />
- </p>
- <p
- className="text-14-normal"
- >
- <span
- className="text-14-bold"
- >
- gcu.content.part9_5_title
- </span>
- <span>
- gcu.content.part9_5_content
- </span>
- </p>
</div>
</div>
`;
diff --git a/src/components/Options/GCU/__snapshots__/GCULink.spec.tsx.snap b/src/components/Options/GCU/__snapshots__/GCULink.spec.tsx.snap
index 47e9dce26264017656de3f431ab010f626cfa9e7..915df297b184ee301fcd67fe248cc8bafd0441bd 100644
--- a/src/components/Options/GCU/__snapshots__/GCULink.spec.tsx.snap
+++ b/src/components/Options/GCU/__snapshots__/GCULink.spec.tsx.snap
@@ -1,52 +1,51 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`LegalNoticeLink component should be rendered correctly 1`] = `
-<div
- className="legal-notice-root"
->
+<div>
<div
- className="legal-notice-content"
+ class="legal-notice-root"
>
<div
- className="legal-notice-header text-16-normal-uppercase"
- >
- legal.title_legal
- </div>
- <WithStyles(ForwardRef(Link))
- className="legal-notice-card-link"
- component={
- Object {
- "$$typeof": Symbol(react.forward_ref),
- "displayName": "Link",
- "render": [Function],
- }
- }
- to="/options/legalnotice"
+ class="legal-notice-content"
>
<div
- className="card optionCard"
- onClick={[Function]}
+ class="legal-notice-header text-16-normal-uppercase"
+ >
+ legal.title_legal
+ </div>
+ <a
+ class="MuiTypography-root MuiLink-root MuiLink-underlineHover legal-notice-card-link MuiTypography-colorPrimary"
+ href="/options/legalnotice"
>
<div
- className="legal-notice-card"
+ class="card"
>
<div
- className="legal-notice-card-content"
+ class="legal-notice-card"
>
- <StyledIcon
- className="legal-notice-card-content-icon"
- icon="test-file-stub"
- size={42}
- />
<div
- className="legal-notice-card-content-title"
+ class="legal-notice-card-content"
>
- legal.read_legal
+ <svg
+ aria-hidden="true"
+ class="legal-notice-card-content-icon styles__icon___23x3R"
+ height="42"
+ width="42"
+ >
+ <use
+ xlink:href="#test-file-stub"
+ />
+ </svg>
+ <div
+ class="legal-notice-card-content-title"
+ >
+ legal.read_legal
+ </div>
</div>
</div>
</div>
- </div>
- </WithStyles(ForwardRef(Link))>
+ </a>
+ </div>
</div>
</div>
`;
diff --git a/src/components/Options/GCU/__snapshots__/GCUView.spec.tsx.snap b/src/components/Options/GCU/__snapshots__/GCUView.spec.tsx.snap
index da0d5940a8758e3b30a5de6b21f6bcc5fcede716..f5c466c4d47f425be2d8979d1c5a2995a763982b 100644
--- a/src/components/Options/GCU/__snapshots__/GCUView.spec.tsx.snap
+++ b/src/components/Options/GCU/__snapshots__/GCUView.spec.tsx.snap
@@ -1,20 +1,292 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`GCUView component should be rendered correctly 1`] = `
-<React.Fragment>
+<div>
<mock-cozybar
- displayBackArrow={true}
- titleKey="common.title_gcu"
+ displaybackarrow="true"
+ titlekey="common.title_gcu"
/>
<mock-header
- desktopTitleKey="common.title_gcu"
- displayBackArrow={true}
- setHeaderHeight={[Function]}
+ desktoptitlekey="common.title_gcu"
+ displaybackarrow="true"
/>
<mock-content
- heightOffset={0}
+ heightoffset="0"
>
- <GCUContent />
+ <div
+ class="gcu-content-root"
+ >
+ <div
+ class="gcu-content-wrapper"
+ >
+ <p
+ class="text-14-normal version"
+ >
+ gcu.version
+ </p>
+ <div
+ class="gcu-content-part-title text-15-normal"
+ >
+ gcu.content.title1
+ </div>
+ <p
+ class="text-14-normal"
+ >
+ gcu.content.part1_1
+ </p>
+ <p
+ class="text-14-normal"
+ >
+ gcu.content.part1_2
+ </p>
+ <p
+ class="text-14-normal"
+ >
+ gcu.content.part1_3
+ </p>
+ <div
+ class="gcu-content-part-title text-15-normal"
+ >
+ gcu.content.title2
+ </div>
+ <p
+ class="text-14-normal"
+ >
+ gcu.content.part2_1
+ </p>
+ <p
+ class="text-14-normal"
+ >
+ gcu.content.part2_2
+ </p>
+ <ul
+ class="text-14-normal"
+ >
+ <li>
+ gcu.content.part2_2_list1
+ </li>
+ <li>
+ gcu.content.part2_2_list2
+ </li>
+ <li>
+ gcu.content.part2_2_list3
+ </li>
+ </ul>
+ <p
+ class="text-14-normal"
+ >
+ gcu.content.part2_3
+ </p>
+ <p
+ class="text-14-normal"
+ >
+ gcu.content.part2_4
+ </p>
+ <div
+ class="gcu-content-part-title text-15-normal"
+ >
+ gcu.content.title3
+ </div>
+ <p
+ class="text-14-normal"
+ >
+ gcu.content.part3_1
+ </p>
+ <p
+ class="text-14-normal"
+ >
+ gcu.content.part3_2
+ </p>
+ <p
+ class="text-14-normal"
+ >
+ gcu.content.part3_3
+ </p>
+ <p
+ class="text-14-normal"
+ >
+ gcu.content.part3_4
+ </p>
+ <div
+ class="gcu-content-part-title text-15-normal"
+ >
+ gcu.content.title4
+ </div>
+ <p
+ class="text-14-normal"
+ >
+ gcu.content.part4_1
+ </p>
+ <p
+ class="text-14-normal"
+ >
+ gcu.content.part4_2
+ </p>
+ <div
+ class="gcu-content-part-title text-15-normal"
+ >
+ gcu.content.title5
+ </div>
+ <p
+ class="text-14-normal"
+ >
+ gcu.content.part5_1
+ </p>
+ <p
+ class="text-14-normal"
+ >
+ gcu.content.part5_2
+ </p>
+ <p
+ class="text-14-normal"
+ >
+ gcu.content.part5_3
+ </p>
+ <ul
+ class="text-14-normal"
+ >
+ <li>
+ gcu.content.part5_3_list1
+ </li>
+ <li>
+ gcu.content.part5_3_list2
+ </li>
+ </ul>
+ <p
+ class="text-14-normal"
+ >
+ gcu.content.part5_4
+ </p>
+ <p
+ class="text-14-normal"
+ >
+ gcu.content.part5_5
+ </p>
+ <div
+ class="gcu-content-part-title text-15-normal"
+ >
+ gcu.content.title6
+ </div>
+ <p
+ class="text-14-normal"
+ >
+ gcu.content.part6_1
+ </p>
+ <p
+ class="text-14-normal"
+ >
+ gcu.content.part6_2
+ </p>
+ <p
+ class="text-14-normal"
+ >
+ gcu.content.part6_3
+ </p>
+ <ul
+ class="text-14-normal"
+ >
+ <li>
+ gcu.content.part6_3_list1
+ </li>
+ <li>
+ gcu.content.part6_3_list2
+ </li>
+ <li>
+ gcu.content.part6_3_list3
+ </li>
+ </ul>
+ <p
+ class="text-14-normal"
+ >
+ gcu.content.part6_4
+ </p>
+ <p
+ class="text-14-normal"
+ >
+ gcu.content.part6_5
+ </p>
+ <div
+ class="gcu-content-part-title text-15-normal"
+ >
+ gcu.content.title8
+ </div>
+ <p
+ class="text-14-normal"
+ >
+ gcu.content.part8_1
+ </p>
+ <p
+ class="text-14-normal"
+ >
+ gcu.content.part8_2
+ </p>
+ <div
+ class="gcu-content-part-title text-15-normal"
+ >
+ gcu.content.title9
+ </div>
+ <p
+ class="text-14-normal"
+ >
+ <span
+ class="text-14-bold"
+ >
+ gcu.content.part9_1_title
+ </span>
+ <span>
+ gcu.content.part9_1_content
+ </span>
+ </p>
+ <p
+ class="text-14-normal"
+ >
+ <span
+ class="text-14-bold"
+ >
+ gcu.content.part9_2_title
+ </span>
+ <span>
+ gcu.content.part9_2_content
+ </span>
+ </p>
+ <p
+ class="text-14-normal"
+ >
+ <span
+ class="text-14-bold"
+ >
+ gcu.content.part9_3_title
+ </span>
+ <span>
+ gcu.content.part9_3_content
+ </span>
+ </p>
+ <p
+ class="text-14-normal"
+ >
+ <span
+ class="text-14-bold"
+ >
+ gcu.content.part9_4_title
+ </span>
+ <span>
+ gcu.content.part9_4_content
+ </span>
+ </p>
+ <p
+ class="text-14-normal"
+ >
+ <span
+ class="text-14-bold"
+ >
+ gcu.content.part9_5_title
+ </span>
+ <span>
+ gcu.content.part9_5_content
+ </span>
+ </p>
+ </div>
+ </div>
</mock-content>
-</React.Fragment>
+</div>
`;
diff --git a/src/components/Options/GCU/gcuLink.scss b/src/components/Options/GCU/gcuLink.scss
index f3e6e9d033be3e910a17ee9a719113f1da65df6f..b63f84bd5ff426139409cbbfdc23a2aac7951e3c 100644
--- a/src/components/Options/GCU/gcuLink.scss
+++ b/src/components/Options/GCU/gcuLink.scss
@@ -39,9 +39,7 @@
}
}
}
-.optionCard {
- padding: 0.938rem 1rem;
-}
+
.gcu-link-card-link {
color: black;
}
diff --git a/src/components/Options/HelpLink/HelpLink.tsx b/src/components/Options/HelpLink/HelpLink.tsx
index 3a1c82dd69eadb534edc582e629c39d1548b6ce0..4702a64fac00f1f6c8d99aa4daac80313101200c 100644
--- a/src/components/Options/HelpLink/HelpLink.tsx
+++ b/src/components/Options/HelpLink/HelpLink.tsx
@@ -12,16 +12,16 @@ const HelpLink = () => {
const dispatch = useAppDispatch()
return (
- <div
- className="help-root"
- onClick={() => dispatch(openFeedbackModal(true))}
- >
+ <div className="help-root">
<div className="help-content">
<div className="help-header text-16-normal-uppercase">
{t('help.title_help')}
</div>
- <Link className="help-card-link">
- <div className="card optionCard">
+ <Link
+ className="help-card-link"
+ onClick={() => dispatch(openFeedbackModal(true))}
+ >
+ <div className="card">
<div className="help-card">
<div className="help-card-content">
<StyledIcon
diff --git a/src/components/Options/LegalNotice/LegalNoticeContent.spec.tsx b/src/components/Options/LegalNotice/LegalNoticeContent.spec.tsx
index 55cbffee7411bb30bd48c38f9dce6e0d059c8cc7..6ceff8339c8a0f3a893ab00670cbb377797aa40b 100644
--- a/src/components/Options/LegalNotice/LegalNoticeContent.spec.tsx
+++ b/src/components/Options/LegalNotice/LegalNoticeContent.spec.tsx
@@ -1,10 +1,10 @@
+import { render } from '@testing-library/react'
import LegalNoticeContent from 'components/Options/LegalNotice/LegalNoticeContent'
-import { shallow } from 'enzyme'
import React from 'react'
describe('LegalNoticeContent component', () => {
it('should be rendered correctly', () => {
- const component = shallow(<LegalNoticeContent />).getElement()
- expect(component).toMatchSnapshot()
+ const { container } = render(<LegalNoticeContent />)
+ expect(container).toMatchSnapshot()
})
})
diff --git a/src/components/Options/LegalNotice/LegalNoticeLink.spec.tsx b/src/components/Options/LegalNotice/LegalNoticeLink.spec.tsx
index 190508b0a3b43e85ffa0c7ce0d07a6d65012fdc1..c6e8e2451c17c89c47221930db6dfbc592dc5f13 100644
--- a/src/components/Options/LegalNotice/LegalNoticeLink.spec.tsx
+++ b/src/components/Options/LegalNotice/LegalNoticeLink.spec.tsx
@@ -1,10 +1,15 @@
+import { render } from '@testing-library/react'
import GCULink from 'components/Options/GCU/GCULink'
-import { shallow } from 'enzyme'
import React from 'react'
+import { BrowserRouter } from 'react-router-dom'
describe('GCULink component', () => {
it('should be rendered correctly', () => {
- const component = shallow(<GCULink />).getElement()
- expect(component).toMatchSnapshot()
+ const { container } = render(
+ <BrowserRouter>
+ <GCULink />
+ </BrowserRouter>
+ )
+ expect(container).toMatchSnapshot()
})
})
diff --git a/src/components/Options/LegalNotice/LegalNoticeLink.tsx b/src/components/Options/LegalNotice/LegalNoticeLink.tsx
index cdd71ce7026fb051fc40b6660fa0b8d1b10e934d..5786982a77f766c14451781f04c19d17806bb0a6 100644
--- a/src/components/Options/LegalNotice/LegalNoticeLink.tsx
+++ b/src/components/Options/LegalNotice/LegalNoticeLink.tsx
@@ -28,8 +28,9 @@ const LegalNoticeLink = () => {
className="legal-notice-card-link"
component={RouterLink}
to="/options/legalnotice"
+ onClick={emitNavEvent}
>
- <div className="card optionCard" onClick={emitNavEvent}>
+ <div className="card">
<div className="legal-notice-card">
<div className="legal-notice-card-content">
<StyledIcon
diff --git a/src/components/Options/LegalNotice/LegalNoticeView.spec.tsx b/src/components/Options/LegalNotice/LegalNoticeView.spec.tsx
index 247058c8f1f903f18a043784141abe544abc2c1b..454e91fb322de535cd432a8e4060d011f173b75a 100644
--- a/src/components/Options/LegalNotice/LegalNoticeView.spec.tsx
+++ b/src/components/Options/LegalNotice/LegalNoticeView.spec.tsx
@@ -1,5 +1,5 @@
+import { render } from '@testing-library/react'
import LegalNoticeView from 'components/Options/LegalNotice/LegalNoticeView'
-import { shallow } from 'enzyme'
import React from 'react'
jest.mock('components/Header/CozyBar', () => 'mock-cozybar')
@@ -8,7 +8,7 @@ jest.mock('components/Content/Content', () => 'mock-content')
describe('LegalNoticeView component', () => {
it('should be rendered correctly', () => {
- const component = shallow(<LegalNoticeView />).getElement()
- expect(component).toMatchSnapshot()
+ const { container } = render(<LegalNoticeView />)
+ expect(container).toMatchSnapshot()
})
})
diff --git a/src/components/Options/LegalNotice/__snapshots__/LegalNoticeContent.spec.tsx.snap b/src/components/Options/LegalNotice/__snapshots__/LegalNoticeContent.spec.tsx.snap
index 322cf9fb612ba9ab88be218725372d23a485eaba..41ea856385c60a3af7849f022a4c6953f9564316 100644
--- a/src/components/Options/LegalNotice/__snapshots__/LegalNoticeContent.spec.tsx.snap
+++ b/src/components/Options/LegalNotice/__snapshots__/LegalNoticeContent.spec.tsx.snap
@@ -1,25 +1,21 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`LegalNoticeContent component should be rendered correctly 1`] = `
-<React.Fragment>
+<div>
<div
- className="legal-notice-root"
+ class="legal-notice-root"
>
<div
- className="legal-notice-content"
+ class="legal-notice-content"
>
<p
- className="version"
+ class="version"
>
legal.version
</p>
- <p
- dangerouslySetInnerHTML={
- Object {
- "__html": "legal.site",
- }
- }
- />
+ <p>
+ legal.site
+ </p>
<p>
legal.adress
</p>
@@ -27,78 +23,75 @@ exports[`LegalNoticeContent component should be rendered correctly 1`] = `
legal.phone
</p>
<p
- className="ln-contact"
- dangerouslySetInnerHTML={
- Object {
- "__html": "legal.mail",
- }
- }
- />
+ class="ln-contact"
+ >
+ legal.mail
+ </p>
<div
- className="text-16-normal"
+ class="text-16-normal"
>
<div
- className="legal-notice-oneline"
+ class="legal-notice-oneline"
>
<span
- className="text-14-normal"
+ class="text-14-normal"
>
legal.p1b
</span>
legal.p1
</div>
<div
- className="legal-notice-oneline"
+ class="legal-notice-oneline"
>
<span
- className="text-14-normal"
+ class="text-14-normal"
>
legal.p2b
</span>
legal.p2
</div>
<div
- className="legal-notice-oneline"
+ class="legal-notice-oneline"
>
<span
- className="text-14-normal"
+ class="text-14-normal"
>
legal.p3b
</span>
legal.p3
</div>
<div
- className="legal-notice-oneline"
+ class="legal-notice-oneline"
>
<span
- className="text-14-normal"
+ class="text-14-normal"
>
legal.p4b
</span>
legal.p4
</div>
<div
- className="legal-notice-oneline"
+ class="legal-notice-oneline"
>
<span
- className="text-14-normal"
+ class="text-14-normal"
>
legal.p5b
</span>
legal.p5
</div>
<div
- className="legal-notice-oneline"
+ class="legal-notice-oneline"
>
<span
- className="text-14-normal"
+ class="text-14-normal"
>
legal.p6b
</span>
legal.p6
</div>
<div
- className="legal-notice-part"
+ class="legal-notice-part"
>
<h3>
@@ -109,7 +102,7 @@ exports[`LegalNoticeContent component should be rendered correctly 1`] = `
</p>
</div>
<div
- className="legal-notice-part"
+ class="legal-notice-part"
>
<h3>
legal.title2
@@ -139,13 +132,9 @@ exports[`LegalNoticeContent component should be rendered correctly 1`] = `
<li>
legal.part2-3-4
</li>
- <li
- dangerouslySetInnerHTML={
- Object {
- "__html": "legal.part2-3-5",
- }
- }
- />
+ <li>
+ legal.part2-3-5
+ </li>
</ul>
</li>
<li>
@@ -169,32 +158,24 @@ exports[`LegalNoticeContent component should be rendered correctly 1`] = `
legal.part2-6-3
</li>
</ul>
- <p
- dangerouslySetInnerHTML={
- Object {
- "__html": "legal.part2-7",
- }
- }
- />
+ <p>
+ legal.part2-7
+ </p>
<p>
legal.part2-8
</p>
<p>
legal.part2-9
</p>
- <p
- dangerouslySetInnerHTML={
- Object {
- "__html": "legal.part2-10",
- }
- }
- />
+ <p>
+ legal.part2-10
+ </p>
<p>
legal.part2-11
</p>
</div>
<div
- className="legal-notice-part"
+ class="legal-notice-part"
>
<h3>
legal.title3
@@ -207,7 +188,7 @@ exports[`LegalNoticeContent component should be rendered correctly 1`] = `
</p>
</div>
<div
- className="legal-notice-part"
+ class="legal-notice-part"
>
<h3>
legal.title4
@@ -220,7 +201,7 @@ exports[`LegalNoticeContent component should be rendered correctly 1`] = `
</p>
</div>
<div
- className="legal-notice-part"
+ class="legal-notice-part"
>
<h3>
legal.title5
@@ -230,7 +211,7 @@ exports[`LegalNoticeContent component should be rendered correctly 1`] = `
</p>
</div>
<div
- className="legal-notice-part"
+ class="legal-notice-part"
>
<h3>
legal.title6
@@ -240,7 +221,7 @@ exports[`LegalNoticeContent component should be rendered correctly 1`] = `
</p>
</div>
<div
- className="legal-notice-part"
+ class="legal-notice-part"
>
<h3>
legal.title7
@@ -248,19 +229,15 @@ exports[`LegalNoticeContent component should be rendered correctly 1`] = `
<p>
legal.part7-1
</p>
- <p
- dangerouslySetInnerHTML={
- Object {
- "__html": "legal.part7-2",
- }
- }
- />
+ <p>
+ legal.part7-2
+ </p>
<p>
legal.part7-3
</p>
</div>
<div
- className="legal-notice-part"
+ class="legal-notice-part"
>
<h3>
legal.title8
@@ -270,7 +247,7 @@ exports[`LegalNoticeContent component should be rendered correctly 1`] = `
</p>
</div>
<div
- className="legal-notice-part"
+ class="legal-notice-part"
>
<h3>
legal.title9
@@ -285,5 +262,5 @@ exports[`LegalNoticeContent component should be rendered correctly 1`] = `
</div>
</div>
</div>
-</React.Fragment>
+</div>
`;
diff --git a/src/components/Options/LegalNotice/__snapshots__/LegalNoticeLink.spec.tsx.snap b/src/components/Options/LegalNotice/__snapshots__/LegalNoticeLink.spec.tsx.snap
index 39d58611ad43a93d5cdd60390f6fc623a1f9e9c6..f75c9392adbd35e4372187d1a121b5a9603f2216 100644
--- a/src/components/Options/LegalNotice/__snapshots__/LegalNoticeLink.spec.tsx.snap
+++ b/src/components/Options/LegalNotice/__snapshots__/LegalNoticeLink.spec.tsx.snap
@@ -1,46 +1,46 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`GCULink component should be rendered correctly 1`] = `
-<div
- className="gcu-link-root"
->
+<div>
<div
- className="gcu-link-content"
+ class="gcu-link-root"
>
- <WithStyles(ForwardRef(Link))
- className="gcu-link-card-link"
- component={
- Object {
- "$$typeof": Symbol(react.forward_ref),
- "displayName": "Link",
- "render": [Function],
- }
- }
- to="/options/gcu"
+ <div
+ class="gcu-link-content"
>
- <div
- className="card optionCard"
+ <a
+ class="MuiTypography-root MuiLink-root MuiLink-underlineHover gcu-link-card-link MuiTypography-colorPrimary"
+ href="/options/gcu"
>
<div
- className="gcu-link-card"
+ class="card"
>
<div
- className="gcu-link-card-content"
+ class="gcu-link-card"
>
- <StyledIcon
- className="gcu-link-card-content-icon"
- icon="test-file-stub"
- size={42}
- />
<div
- className="gcu-link-card-content-title"
+ class="gcu-link-card-content"
>
- common.title_gcu
+ <svg
+ aria-hidden="true"
+ class="gcu-link-card-content-icon styles__icon___23x3R"
+ height="42"
+ width="42"
+ >
+ <use
+ xlink:href="#test-file-stub"
+ />
+ </svg>
+ <div
+ class="gcu-link-card-content-title"
+ >
+ common.title_gcu
+ </div>
</div>
</div>
</div>
- </div>
- </WithStyles(ForwardRef(Link))>
+ </a>
+ </div>
</div>
</div>
`;
diff --git a/src/components/Options/LegalNotice/__snapshots__/LegalNoticeView.spec.tsx.snap b/src/components/Options/LegalNotice/__snapshots__/LegalNoticeView.spec.tsx.snap
index e3e3b81e15207a38e46063d71dbfbf700c247024..f236decc8ad65984c4fd9640a1be5cb9915c238d 100644
--- a/src/components/Options/LegalNotice/__snapshots__/LegalNoticeView.spec.tsx.snap
+++ b/src/components/Options/LegalNotice/__snapshots__/LegalNoticeView.spec.tsx.snap
@@ -1,20 +1,278 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`LegalNoticeView component should be rendered correctly 1`] = `
-<React.Fragment>
+<div>
<mock-cozybar
- displayBackArrow={true}
- titleKey="common.title_legal_notice"
+ displaybackarrow="true"
+ titlekey="common.title_legal_notice"
/>
<mock-header
- desktopTitleKey="common.title_legal_notice"
- displayBackArrow={true}
- setHeaderHeight={[Function]}
+ desktoptitlekey="common.title_legal_notice"
+ displaybackarrow="true"
/>
<mock-content
- heightOffset={0}
+ heightoffset="0"
>
- <LegalNoticeContent />
+ <div
+ class="legal-notice-root"
+ >
+ <div
+ class="legal-notice-content"
+ >
+ <p
+ class="version"
+ >
+ legal.version
+ </p>
+ <p>
+ legal.site
+ </p>
+ <p>
+ legal.adress
+ </p>
+ <p>
+ legal.phone
+ </p>
+ <p
+ class="ln-contact"
+ >
+ legal.mail
+ </p>
+ <div
+ class="text-16-normal"
+ >
+ <div
+ class="legal-notice-oneline"
+ >
+ <span
+ class="text-14-normal"
+ >
+ legal.p1b
+ </span>
+ legal.p1
+ </div>
+ <div
+ class="legal-notice-oneline"
+ >
+ <span
+ class="text-14-normal"
+ >
+ legal.p2b
+ </span>
+ legal.p2
+ </div>
+ <div
+ class="legal-notice-oneline"
+ >
+ <span
+ class="text-14-normal"
+ >
+ legal.p3b
+ </span>
+ legal.p3
+ </div>
+ <div
+ class="legal-notice-oneline"
+ >
+ <span
+ class="text-14-normal"
+ >
+ legal.p4b
+ </span>
+ legal.p4
+ </div>
+ <div
+ class="legal-notice-oneline"
+ >
+ <span
+ class="text-14-normal"
+ >
+ legal.p5b
+ </span>
+ legal.p5
+ </div>
+ <div
+ class="legal-notice-oneline"
+ >
+ <span
+ class="text-14-normal"
+ >
+ legal.p6b
+ </span>
+ legal.p6
+ </div>
+ <div
+ class="legal-notice-part"
+ >
+ <h3>
+
+ legal.title1
+ </h3>
+ <p>
+ legal.part1
+ </p>
+ </div>
+ <div
+ class="legal-notice-part"
+ >
+ <h3>
+ legal.title2
+ </h3>
+ <p>
+ legal.part2
+ </p>
+ <ul>
+ <li>
+ legal.part2-1
+ </li>
+ <li>
+ legal.part2-2
+ </li>
+ <li>
+ legal.part2-3
+ <ul>
+ <li>
+ legal.part2-3-1
+ </li>
+ <li>
+ legal.part2-3-2
+ </li>
+ <li>
+ legal.part2-3-3
+ </li>
+ <li>
+ legal.part2-3-4
+ </li>
+ <li>
+ legal.part2-3-5
+ </li>
+ </ul>
+ </li>
+ <li>
+ legal.part2-4
+ </li>
+ </ul>
+ <p>
+ legal.part2-5
+ </p>
+ <p>
+ legal.part2-6
+ </p>
+ <ul>
+ <li>
+ legal.part2-6-1
+ </li>
+ <li>
+ legal.part2-6-2
+ </li>
+ <li>
+ legal.part2-6-3
+ </li>
+ </ul>
+ <p>
+ legal.part2-7
+ </p>
+ <p>
+ legal.part2-8
+ </p>
+ <p>
+ legal.part2-9
+ </p>
+ <p>
+ legal.part2-10
+ </p>
+ <p>
+ legal.part2-11
+ </p>
+ </div>
+ <div
+ class="legal-notice-part"
+ >
+ <h3>
+ legal.title3
+ </h3>
+ <p>
+ legal.part3-1
+ </p>
+ <p>
+ legal.part3-2
+ </p>
+ </div>
+ <div
+ class="legal-notice-part"
+ >
+ <h3>
+ legal.title4
+ </h3>
+ <p>
+ legal.part4-1
+ </p>
+ <p>
+ legal.part4-2
+ </p>
+ </div>
+ <div
+ class="legal-notice-part"
+ >
+ <h3>
+ legal.title5
+ </h3>
+ <p>
+ legal.part5
+ </p>
+ </div>
+ <div
+ class="legal-notice-part"
+ >
+ <h3>
+ legal.title6
+ </h3>
+ <p>
+ legal.part6
+ </p>
+ </div>
+ <div
+ class="legal-notice-part"
+ >
+ <h3>
+ legal.title7
+ </h3>
+ <p>
+ legal.part7-1
+ </p>
+ <p>
+ legal.part7-2
+ </p>
+ <p>
+ legal.part7-3
+ </p>
+ </div>
+ <div
+ class="legal-notice-part"
+ >
+ <h3>
+ legal.title8
+ </h3>
+ <p>
+ legal.part8
+ </p>
+ </div>
+ <div
+ class="legal-notice-part"
+ >
+ <h3>
+ legal.title9
+ </h3>
+ <p>
+ legal.part9-1
+ </p>
+ <p>
+ legal.part9-2
+ </p>
+ </div>
+ </div>
+ </div>
+ </div>
</mock-content>
-</React.Fragment>
+</div>
`;
diff --git a/src/components/Options/MatomoOptOut/MatomoOptOut.spec.tsx b/src/components/Options/MatomoOptOut/MatomoOptOut.spec.tsx
index ad9864f10b2466b2e313d4f6228a5033dd9d8294..3199d0c5f0c0b1b8b1e32217a9576b80978bcacb 100644
--- a/src/components/Options/MatomoOptOut/MatomoOptOut.spec.tsx
+++ b/src/components/Options/MatomoOptOut/MatomoOptOut.spec.tsx
@@ -1,10 +1,10 @@
-import { shallow } from 'enzyme'
+import { render } from '@testing-library/react'
import React from 'react'
import MatomoOptOut from './MatomoOptOut'
describe('MatomoOptOut component', () => {
it('should be rendered correctly', () => {
- const component = shallow(<MatomoOptOut />).getElement()
- expect(component).toMatchSnapshot()
+ const { container } = render(<MatomoOptOut />)
+ expect(container).toMatchSnapshot()
})
})
diff --git a/src/components/Options/MatomoOptOut/MatomoOptOut.tsx b/src/components/Options/MatomoOptOut/MatomoOptOut.tsx
index 5ddd959112782634293eb4dc6c742254b649a7b6..3589de6222a5a385bedd1af0332222aed9a5308b 100644
--- a/src/components/Options/MatomoOptOut/MatomoOptOut.tsx
+++ b/src/components/Options/MatomoOptOut/MatomoOptOut.tsx
@@ -15,6 +15,7 @@ const MatomoOptOut = () => {
{t('matomo.matomo_title')}
</div>
<iframe
+ title="opt-out"
style={{ height: '250px' }}
src={`${baseUrl}index.php?module=CoreAdminHome&action=optOut&language=fr&backgroundColor=121212&fontColor=e0e0e0&fontSize=&fontFamily=sans-serif`}
/>
diff --git a/src/components/Options/MatomoOptOut/__snapshots__/MatomoOptOut.spec.tsx.snap b/src/components/Options/MatomoOptOut/__snapshots__/MatomoOptOut.spec.tsx.snap
index 599b28c0a472fe9b02fd1b93dc448c2b6e597659..4e821bbf7d2a9b766176578195e820bb88cf36a7 100644
--- a/src/components/Options/MatomoOptOut/__snapshots__/MatomoOptOut.spec.tsx.snap
+++ b/src/components/Options/MatomoOptOut/__snapshots__/MatomoOptOut.spec.tsx.snap
@@ -1,25 +1,24 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`MatomoOptOut component should be rendered correctly 1`] = `
-<div
- className="matomo-opt-out-container"
->
+<div>
<div
- className="matomo-opt-out"
+ class="matomo-opt-out-container"
>
<div
- className="opt-out-header text-16-normal-uppercase"
+ class="matomo-opt-out"
>
- matomo.matomo_title
+ <div
+ class="opt-out-header text-16-normal-uppercase"
+ >
+ matomo.matomo_title
+ </div>
+ <iframe
+ src="http://localhost:9800/index.php?module=CoreAdminHome&action=optOut&language=fr&backgroundColor=121212&fontColor=e0e0e0&fontSize=&fontFamily=sans-serif"
+ style="height: 250px;"
+ title="opt-out"
+ />
</div>
- <iframe
- src="http://localhost:9800/index.php?module=CoreAdminHome&action=optOut&language=fr&backgroundColor=121212&fontColor=e0e0e0&fontSize=&fontFamily=sans-serif"
- style={
- Object {
- "height": "250px",
- }
- }
- />
</div>
</div>
`;
diff --git a/src/components/Options/OptionsView.spec.tsx b/src/components/Options/OptionsView.spec.tsx
index d0a1f04c6d5ca25e34771add9ad9c5b51eb71a45..3f42b730e12e6d710235ede391aeee7c24ee6a9d 100644
--- a/src/components/Options/OptionsView.spec.tsx
+++ b/src/components/Options/OptionsView.spec.tsx
@@ -1,6 +1,9 @@
+import { render, waitFor } from '@testing-library/react'
import OptionsView from 'components/Options/OptionsView'
-import { shallow } from 'enzyme'
import React from 'react'
+import { Provider } from 'react-redux'
+import { BrowserRouter } from 'react-router-dom'
+import { createMockEcolyoStore } from 'tests/__mocks__/store'
jest.mock('components/Header/CozyBar', () => 'mock-cozybar')
jest.mock('components/Header/Header', () => 'mock-header')
@@ -10,9 +13,18 @@ jest.mock(
() => 'mock-konnectorviewerlist'
)
+const store = createMockEcolyoStore()
+
describe('OptionsView component', () => {
- it('should be rendered correctly', () => {
- const component = shallow(<OptionsView />).getElement()
- expect(component).toMatchSnapshot()
+ it('should be rendered correctly', async () => {
+ const { container } = render(
+ <BrowserRouter>
+ <Provider store={store}>
+ <OptionsView />
+ </Provider>
+ </BrowserRouter>
+ )
+ await waitFor(() => null, { container })
+ expect(container).toMatchSnapshot()
})
})
diff --git a/src/components/Options/ProfileTypeOptions/ProfileTypeOptions.spec.tsx b/src/components/Options/ProfileTypeOptions/ProfileTypeOptions.spec.tsx
index 6bbdb5dc30564e920ce41dad76e9924daaf21e1c..e5c67e980ecfea5869f0448492ae90c398bdb5f1 100644
--- a/src/components/Options/ProfileTypeOptions/ProfileTypeOptions.spec.tsx
+++ b/src/components/Options/ProfileTypeOptions/ProfileTypeOptions.spec.tsx
@@ -1,6 +1,5 @@
-import profileIcon from 'assets/icons/ico/profile.svg'
-import StyledCard from 'components/CommonKit/Card/StyledCard'
-import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
+import { render, screen } from '@testing-library/react'
+import { userEvent } from '@testing-library/user-event'
import ProfileTypeOptions from 'components/Options/ProfileTypeOptions/ProfileTypeOptions'
import {
HousingType,
@@ -8,7 +7,6 @@ import {
IndividualOrCollective,
ThreeChoicesAnswer,
} from 'enums'
-import { mount } from 'enzyme'
import React from 'react'
import { Provider } from 'react-redux'
import { mockProfileType } from 'tests/__mocks__/profileType.mock'
@@ -18,18 +16,23 @@ import {
mockProfileState,
} from 'tests/__mocks__/store'
+const mockedNavigate = jest.fn()
+jest.mock('react-router-dom', () => ({
+ ...jest.requireActual('react-router-dom'),
+ useNavigate: () => mockedNavigate,
+}))
+
describe('ProfileTypeOptions component', () => {
const store = createMockEcolyoStore()
- it('should be rendered correctly', () => {
- const wrapper = mount(
+ it('should be rendered correctly with profile NOT completed', async () => {
+ const { container } = render(
<Provider store={store}>
<ProfileTypeOptions />
</Provider>
)
- expect(wrapper.find(StyledCard).exists()).toBeTruthy()
- expect(wrapper.find(StyledIcon).exists()).toBeTruthy()
- expect(wrapper.find(profileIcon)).toBeTruthy()
- wrapper.find('.profile-link').first().simulate('click')
+ expect(container.getElementsByClassName('profile-icon').length).toBeTruthy()
+ await userEvent.click(screen.getByRole('button'))
+ expect(mockedNavigate).toHaveBeenCalled()
})
it('should be rendered when user complete profile type form', () => {
const store = createMockEcolyoStore({
@@ -37,12 +40,14 @@ describe('ProfileTypeOptions component', () => {
profileType: mockProfileType,
challenge: mockChallengeState,
})
- const wrapper = mount(
+ const { container } = render(
<Provider store={store}>
<ProfileTypeOptions />
</Provider>
)
- expect(wrapper.find('.profile-container').exists()).toBeTruthy()
+ expect(
+ container.getElementsByClassName('profile-container')[0]
+ ).toBeInTheDocument()
})
it('should be rendered when housing_type = apartment', () => {
const store = createMockEcolyoStore({
@@ -50,12 +55,12 @@ describe('ProfileTypeOptions component', () => {
profileType: { ...mockProfileType, housingType: HousingType.APARTMENT },
challenge: mockChallengeState,
})
- const wrapper = mount(
+ const { container } = render(
<Provider store={store}>
<ProfileTypeOptions />
</Provider>
)
- expect(wrapper.find('.floor').exists()).toBeTruthy()
+ expect(container.getElementsByClassName('floor')[0]).toBeInTheDocument()
})
it('should display heating with equipments', () => {
const store = createMockEcolyoStore({
@@ -69,12 +74,14 @@ describe('ProfileTypeOptions component', () => {
},
challenge: mockChallengeState,
})
- const wrapper = mount(
+ const { container } = render(
<Provider store={store}>
<ProfileTypeOptions />
</Provider>
)
- expect(wrapper.find('.equipments').exists()).toBeTruthy()
+ expect(
+ container.getElementsByClassName('equipments')[0]
+ ).toBeInTheDocument()
})
it('should display insulation work', () => {
const store = createMockEcolyoStore({
@@ -92,11 +99,13 @@ describe('ProfileTypeOptions component', () => {
},
challenge: mockChallengeState,
})
- const wrapper = mount(
+ const { container } = render(
<Provider store={store}>
<ProfileTypeOptions />
</Provider>
)
- expect(wrapper.find('.insulation').exists()).toBeTruthy()
+ expect(
+ container.getElementsByClassName('insulation')[0]
+ ).toBeInTheDocument()
})
})
diff --git a/src/components/Options/ProfileTypeOptions/ProfileTypeOptions.tsx b/src/components/Options/ProfileTypeOptions/ProfileTypeOptions.tsx
index 1648f83c82ee3642a9cb3b8687d5fa15d9b35538..d106bf4d1effb5d01f8104cd00bfbb6afd62cca8 100644
--- a/src/components/Options/ProfileTypeOptions/ProfileTypeOptions.tsx
+++ b/src/components/Options/ProfileTypeOptions/ProfileTypeOptions.tsx
@@ -48,6 +48,14 @@ const ProfileTypeOptions = () => {
<div className="head text-16-normal-uppercase">
{t('profile_type.title_profile')}
</div>
+ {!profile.isProfileTypeCompleted && (
+ <StyledCard onClick={goToForm} className="profile-link">
+ <StyledIcon className="profile-icon" icon={profileIcon} size={42} />
+ <span className="link-label text-16-normal">
+ {t('profile_type.read_profile')}
+ </span>
+ </StyledCard>
+ )}
{profile.isProfileTypeCompleted && (
<Accordion
expanded={active}
@@ -212,32 +220,19 @@ const ProfileTypeOptions = () => {
)}
</div>
</div>
- <div className="inline-buttons">
- <Button
- aria-label={t(
- 'profile_type.accessibility.button_update_profile'
- )}
- onClick={goToForm}
- classes={{
- root: 'btn-secondary-negative',
- label: 'text-16-normal',
- }}
- >
- {t('profile_type.button_update_profile')}
- </Button>
- </div>
+ <Button
+ aria-label={t(
+ 'profile_type.accessibility.button_update_profile'
+ )}
+ onClick={goToForm}
+ className="btnSecondary"
+ >
+ {t('profile_type.button_update_profile')}
+ </Button>
</div>
</AccordionDetails>
</Accordion>
)}
- {!profile.isProfileTypeCompleted && (
- <StyledCard onClick={goToForm} className="profile-link">
- <StyledIcon className="profile-icon" icon={profileIcon} size={42} />
- <span className="link-label text-16-normal">
- {t('profile_type.read_profile')}
- </span>
- </StyledCard>
- )}
</div>
</div>
)
diff --git a/src/components/Options/ProfileTypeOptions/profileTypeOptions.scss b/src/components/Options/ProfileTypeOptions/profileTypeOptions.scss
index 8dfc6023eff956b94d903867850bda2fc1f7669b..bf2af832185968d3d81c9d6ceec7b75458b39a90 100644
--- a/src/components/Options/ProfileTypeOptions/profileTypeOptions.scss
+++ b/src/components/Options/ProfileTypeOptions/profileTypeOptions.scss
@@ -14,10 +14,6 @@
height: 40px;
margin: 0;
}
- .btn-secondary-negative {
- border-color: $grey-bright;
- height: 40px;
- }
}
.value {
color: $white;
diff --git a/src/components/Options/ReportOptions/ReportOptions.spec.tsx b/src/components/Options/ReportOptions/ReportOptions.spec.tsx
index 8794bd7e8cf8a8e05393ca4e916b8b6f9f6bba09..711a1ce72e0bf177c4aef9ff76a583cb510c2a4f 100644
--- a/src/components/Options/ReportOptions/ReportOptions.spec.tsx
+++ b/src/components/Options/ReportOptions/ReportOptions.spec.tsx
@@ -1,14 +1,14 @@
-import { Button } from '@material-ui/core'
-import StyledSwitch from 'components/CommonKit/Switch/StyledSwitch'
+import { render, screen } from '@testing-library/react'
+import { userEvent } from '@testing-library/user-event'
import ReportOptions from 'components/Options/ReportOptions/ReportOptions'
-import { FluidState, FluidType } from 'enums'
-import { mount } from 'enzyme'
import React from 'react'
import { Provider } from 'react-redux'
import * as profileActions from 'store/profile/profile.slice'
+import { fluidStatusConnectedData } from 'tests/__mocks__/fluidStatusData.mock'
import {
createMockEcolyoStore,
- mockInitialEcolyoState,
+ mockGlobalState,
+ mockProfileState,
} from 'tests/__mocks__/store'
const mockUpdateProfile = jest.fn()
@@ -27,67 +27,76 @@ describe('ReportOptions component', () => {
})
it('should be rendered with sendAnalysisNotification to true', () => {
- const wrapper = mount(
+ render(
<Provider store={store}>
<ReportOptions />
</Provider>
)
- expect(wrapper.find(Button).text()).toBe('profile.report.deactivate')
+ expect(screen.getByText('profile.report.deactivate')).toBeInTheDocument()
})
- it('should update the profile with sendAnalysisNotification to false', () => {
- const wrapper = mount(
+ it('should update the profile with sendAnalysisNotification to false', async () => {
+ render(
<Provider store={store}>
<ReportOptions />
</Provider>
)
- wrapper.find(Button).first().simulate('click')
+ await userEvent.click(screen.getAllByRole('button')[0])
expect(updateProfileSpy).toHaveBeenCalledTimes(1)
expect(updateProfileSpy).toHaveBeenCalledWith({
sendAnalysisNotification: false,
})
})
- it('should be rendered with sendAnalysisNotification false and toggle it to true', () => {
- mockInitialEcolyoState.profile.sendAnalysisNotification = false
-
- const wrapper = mount(
+ it('should be rendered with sendAnalysisNotification false and toggle it to true', async () => {
+ const store = createMockEcolyoStore({
+ global: mockGlobalState,
+ profile: { ...mockProfileState, sendAnalysisNotification: false },
+ })
+ render(
<Provider store={store}>
<ReportOptions />
</Provider>
)
- wrapper.find(Button).first().simulate('click')
+ await userEvent.click(screen.getAllByRole('button')[0])
expect(updateProfileSpy).toHaveBeenCalledTimes(1)
expect(updateProfileSpy).toHaveBeenCalledWith({
sendAnalysisNotification: true,
})
})
- it('should be rendered with sendConsumptionAlert to false', () => {
- mockInitialEcolyoState.profile.sendAnalysisNotification = false
- mockInitialEcolyoState.global.fluidStatus[FluidType.WATER].status =
- FluidState.DONE
- const wrapper = mount(
- <Provider store={store}>
- <ReportOptions />
- </Provider>
- )
- expect(wrapper.find(StyledSwitch)).toHaveLength(1)
- expect(wrapper.find(StyledSwitch).first().props().checked).toBeFalsy()
- })
+ describe('should test water alert', () => {
+ const storeWaterDone = createMockEcolyoStore({
+ global: { ...mockGlobalState, fluidStatus: fluidStatusConnectedData },
+ profile: { sendAnalysisNotification: false },
+ })
+ it('should be rendered with sendConsumptionAlert to false and enable it', async () => {
+ render(
+ <Provider store={storeWaterDone}>
+ <ReportOptions />
+ </Provider>
+ )
+ expect(screen.getByRole('checkbox')).not.toBeChecked()
+ await userEvent.click(screen.getByRole('checkbox'))
+ expect(updateProfileSpy).toHaveBeenCalledTimes(1)
+ expect(updateProfileSpy).toHaveBeenCalledWith({
+ sendConsumptionAlert: true,
+ })
+ })
- it('should update the profile with sendConsumptionAlert to true', () => {
- const wrapper = mount(
- <Provider store={store}>
- <ReportOptions />
- </Provider>
- )
- wrapper
- .find('input')
- .first()
- .simulate('change', { target: { checked: 'true' } })
- expect(updateProfileSpy).toHaveBeenCalledTimes(1)
- expect(updateProfileSpy).toHaveBeenCalledWith({
- sendConsumptionAlert: true,
+ it('should render waterLimit to 100', async () => {
+ const storeWaterAlert = createMockEcolyoStore({
+ global: { ...mockGlobalState, fluidStatus: fluidStatusConnectedData },
+ profile: {
+ sendConsumptionAlert: true,
+ waterDailyConsumptionLimit: 100,
+ },
+ })
+ render(
+ <Provider store={storeWaterAlert}>
+ <ReportOptions />
+ </Provider>
+ )
+ expect(screen.getByRole('spinbutton')).toHaveValue(100)
})
})
})
diff --git a/src/components/Options/ReportOptions/ReportOptions.tsx b/src/components/Options/ReportOptions/ReportOptions.tsx
index 463651514731915010ae22cc9d728f73cbabc5b9..7a2578a8c44f9da552fb06b88a034a8969727ef9 100644
--- a/src/components/Options/ReportOptions/ReportOptions.tsx
+++ b/src/components/Options/ReportOptions/ReportOptions.tsx
@@ -32,6 +32,11 @@ const ReportOptions = () => {
[dispatch]
)
+ const isWaterConnected =
+ fluidStatus[FluidType.WATER].status !== FluidState.NOT_CONNECTED &&
+ fluidStatus[FluidType.WATER].status !== FluidState.KONNECTOR_NOT_FOUND &&
+ fluidStatus[FluidType.WATER].status !== FluidState.ERROR_LOGIN_FAILED
+
const setWaterLimit = (e: React.ChangeEvent<HTMLInputElement>) => {
if (e.target.value !== null && parseInt(e.target.value) > 0) {
dispatch(
@@ -86,6 +91,7 @@ const ReportOptions = () => {
profile.waterDailyConsumptionLimit,
updateProfileAlert,
])
+
return (
<div className="report-option-root">
<div className="report-option-content">
@@ -103,10 +109,9 @@ const ReportOptions = () => {
onClick={() => toggleAnalysisNotification()}
variant="contained"
classes={{
- root: 'btn-highlight',
+ root: 'btnPrimary',
label: 'text-18-bold',
}}
- type="submit"
>
{profile.sendAnalysisNotification
? t('profile.report.deactivate')
@@ -115,15 +120,12 @@ const ReportOptions = () => {
</div>
</div>
{/* Consumption Alert activation */}
- {fluidStatus[FluidType.WATER].status !== FluidState.NOT_CONNECTED &&
- fluidStatus[FluidType.WATER].status !==
- FluidState.KONNECTOR_NOT_FOUND &&
- fluidStatus[FluidType.WATER].status !==
- FluidState.ERROR_LOGIN_FAILED && (
- <>
- <div className="head text-16-normal-uppercase">
- {t('profile.report.title_alert')}
- </div>
+ {isWaterConnected && (
+ <>
+ <div className="head text-16-normal-uppercase">
+ {t('profile.report.title_alert')}
+ </div>
+ <div className="waterAlert">
<div className="switch-container-alert">
<StyledSwitch
checked={profile.sendConsumptionAlert}
@@ -134,44 +136,43 @@ const ReportOptions = () => {
),
}}
/>
- <span className="switch-label text-16-normal">
+ <span className="text-16-normal">
{t('profile.report.switch_label_alert')}
</span>
</div>
- </>
- )}
- {profile.sendConsumptionAlert && (
- <div className="alert-inputs-display">
- <div className="alert-input-row">
- <div className="head text-16-normal">
- {t('profile.report.input_label_alert')}
- </div>
- <div className="switch-container-alert">
- <input
- className="input-style"
- type="number"
- defaultValue={
- profile.waterDailyConsumptionLimit === 0
- ? ''
- : profile.waterDailyConsumptionLimit
- }
- onBlur={setWaterLimit}
- aria-label={t(
- 'profile.accessibility.input_water_alert_report'
+ {profile.sendConsumptionAlert && (
+ <>
+ <div className="text-16-normal">
+ {t('profile.report.input_label_alert')}
+ </div>
+ <div className="switch-container-alert">
+ <input
+ className="inputNumber text-18"
+ type="number"
+ defaultValue={
+ profile.waterDailyConsumptionLimit === 0
+ ? ''
+ : profile.waterDailyConsumptionLimit
+ }
+ onBlur={setWaterLimit}
+ aria-label={t(
+ 'profile.accessibility.input_water_alert_report'
+ )}
+ inputMode="numeric"
+ />
+ <span className="switch-label text-16-normal">L</span>
+ </div>
+ {maxDayData && (
+ <div className="alert-input-subtext text-14">
+ {t('profile.report.input_label_subtext_alert')}
+ {Math.round(maxDayData.value)}
+ {' L'}
+ </div>
)}
- inputMode="numeric"
- />
- <span className="switch-label text-16-normal">L</span>
- </div>
+ </>
+ )}
</div>
- {maxDayData && (
- <div className="alert-input-subtext">
- {t('profile.report.input_label_subtext_alert')}
- {Math.round(maxDayData.value)}
- {' L'}
- </div>
- )}
- </div>
+ </>
)}
</div>
</div>
diff --git a/src/components/Options/ReportOptions/reportOptions.scss b/src/components/Options/ReportOptions/reportOptions.scss
index b5ca2f087c7c3a71f41695aab6fd749acf9bfc38..e6da9654a6abbfea2078b034b6eb2c741d893118 100644
--- a/src/components/Options/ReportOptions/reportOptions.scss
+++ b/src/components/Options/ReportOptions/reportOptions.scss
@@ -35,41 +35,21 @@
}
}
- .switch-container-alert {
+ .waterAlert {
display: flex;
- align-items: center;
+ flex-direction: column;
+ gap: 1rem;
color: $grey-bright;
- .switch-label {
- margin-left: 0.2rem;
- padding-right: 0.8rem;
+
+ .switch-container-alert {
+ color: $grey-bright;
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
}
- .input-style {
- width: 60px;
- text-align: center;
- margin: 0.5rem;
- background: $dark-light-2;
- color: $white;
- border: 1px solid $soft-grey;
- max-width: 5rem;
- height: 2rem;
- &:focus {
- outline: $gold-shadow 1px;
- }
- &:disabled {
- -webkit-text-fill-color: $white;
- opacity: 1;
- }
+
+ .alert-input-subtext {
+ color: $soft-grey;
}
}
- .alert-inputs-display {
- padding: 0 1rem;
- }
- .alert-input-row {
- display: flex;
- justify-content: space-between;
- }
- .alert-input-subtext {
- color: $soft-grey;
- font-size: 14px;
- }
}
diff --git a/src/components/Options/Unsubscribe/UnSubscribeView.spec.tsx b/src/components/Options/Unsubscribe/UnSubscribeView.spec.tsx
index 55ada4892d7ed895434fbd064e9bec9021e7b524..790c171bbc6401b1f9b6ef760c972b1b40e4f55c 100644
--- a/src/components/Options/Unsubscribe/UnSubscribeView.spec.tsx
+++ b/src/components/Options/Unsubscribe/UnSubscribeView.spec.tsx
@@ -1,6 +1,5 @@
-import { Button } from '@material-ui/core'
-import { mount } from 'enzyme'
-import toJson from 'enzyme-to-json'
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
import React from 'react'
import { Provider } from 'react-redux'
import * as profileActions from 'store/profile/profile.slice'
@@ -31,21 +30,21 @@ describe('UnSubscribe component', () => {
})
it('should be rendered correctly', () => {
- const wrapper = mount(
+ const { container } = render(
<Provider store={store}>
<UnSubscribeView />
</Provider>
)
- expect(toJson(wrapper)).toMatchSnapshot()
+ expect(container).toMatchSnapshot()
})
- it('should click on button and deactivate report', () => {
- const wrapper = mount(
+ it('should click on button and deactivate report', async () => {
+ render(
<Provider store={store}>
<UnSubscribeView />
</Provider>
)
- wrapper.find(Button).simulate('click')
+ await userEvent.click(screen.getByRole('button'))
expect(updateProfileSpy).toHaveBeenCalledWith({
sendAnalysisNotification: false,
})
diff --git a/src/components/Options/Unsubscribe/UnSubscribeView.tsx b/src/components/Options/Unsubscribe/UnSubscribeView.tsx
index 8b5dd2240df556a125a4656c252635b5ea8349e3..f67dbdc7d0a92bff0faa7169dbefc07dfd120981 100644
--- a/src/components/Options/Unsubscribe/UnSubscribeView.tsx
+++ b/src/components/Options/Unsubscribe/UnSubscribeView.tsx
@@ -41,10 +41,9 @@ const UnSubscribeView = () => {
onClick={() => unSubscribe()}
variant="contained"
classes={{
- root: 'btn-highlight',
+ root: 'btnPrimary',
label: 'text-18-bold',
}}
- type="submit"
>
{t('unsubscribe.button_text')}
</Button>
diff --git a/src/components/Options/Unsubscribe/__snapshots__/UnSubscribeView.spec.tsx.snap b/src/components/Options/Unsubscribe/__snapshots__/UnSubscribeView.spec.tsx.snap
index 8518469701265ae8c94aa8ecf3ad6063eed6f985..85efc0cad5e2d2420047f871af41b2bef8bb7a84 100644
--- a/src/components/Options/Unsubscribe/__snapshots__/UnSubscribeView.spec.tsx.snap
+++ b/src/components/Options/Unsubscribe/__snapshots__/UnSubscribeView.spec.tsx.snap
@@ -1,212 +1,55 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`UnSubscribe component should be rendered correctly 1`] = `
-<Provider
- store={
- Object {
- "clearActions": [Function],
- "dispatch": [Function],
- "getActions": [Function],
- "getState": [Function],
- "replaceReducer": [Function],
- "subscribe": [Function],
- }
- }
->
- <UnSubscribeView>
- <mock-cozybar
- titleKey="common.title_analysis"
- />
- <mock-header
- desktopTitleKey="common.title_analysis"
- setHeaderHeight={[Function]}
- />
- <mock-content
- heightOffset={0}
+<div>
+ <mock-cozybar
+ titlekey="common.title_analysis"
+ />
+ <mock-header
+ desktoptitlekey="common.title_analysis"
+ />
+ <mock-content
+ heightoffset="0"
+ >
+ <div
+ class="unsubscribe-container"
>
+ <svg
+ aria-hidden="true"
+ class="profile-icon styles__icon___23x3R"
+ height="250"
+ width="250"
+ >
+ <use
+ xlink:href="#test-file-stub"
+ />
+ </svg>
<div
- className="unsubscribe-container"
+ class="text-20-bold head"
>
- <StyledIcon
- className="profile-icon"
- icon="test-file-stub"
- size={250}
- >
- <Icon
- aria-hidden={true}
- className="profile-icon"
- icon="test-file-stub"
- size={250}
- spin={false}
- >
- <Component
- aria-hidden={true}
- className="profile-icon styles__icon___23x3R"
- height={250}
- style={Object {}}
- width={250}
- >
- <svg
- aria-hidden={true}
- className="profile-icon styles__icon___23x3R"
- height={250}
- style={Object {}}
- width={250}
- >
- <use
- xlinkHref="#test-file-stub"
- />
- </svg>
- </Component>
- </Icon>
- </StyledIcon>
- <div
- className="text-20-bold head"
- >
- unsubscribe.title
- </div>
- <div
- className="text-16-normal question"
- >
- unsubscribe.content
- </div>
- <WithStyles(ForwardRef(Button))
- aria-label="unsubscribe.button_accessibility"
- classes={
- Object {
- "label": "text-18-bold",
- "root": "btn-highlight",
- }
- }
- onClick={[Function]}
- type="submit"
- variant="contained"
- >
- <ForwardRef(Button)
- aria-label="unsubscribe.button_accessibility"
- classes={
- Object {
- "colorInherit": "MuiButton-colorInherit",
- "contained": "MuiButton-contained",
- "containedPrimary": "MuiButton-containedPrimary",
- "containedSecondary": "MuiButton-containedSecondary",
- "containedSizeLarge": "MuiButton-containedSizeLarge",
- "containedSizeSmall": "MuiButton-containedSizeSmall",
- "disableElevation": "MuiButton-disableElevation",
- "disabled": "Mui-disabled",
- "endIcon": "MuiButton-endIcon",
- "focusVisible": "Mui-focusVisible",
- "fullWidth": "MuiButton-fullWidth",
- "iconSizeLarge": "MuiButton-iconSizeLarge",
- "iconSizeMedium": "MuiButton-iconSizeMedium",
- "iconSizeSmall": "MuiButton-iconSizeSmall",
- "label": "MuiButton-label text-18-bold",
- "outlined": "MuiButton-outlined",
- "outlinedPrimary": "MuiButton-outlinedPrimary",
- "outlinedSecondary": "MuiButton-outlinedSecondary",
- "outlinedSizeLarge": "MuiButton-outlinedSizeLarge",
- "outlinedSizeSmall": "MuiButton-outlinedSizeSmall",
- "root": "MuiButton-root btn-highlight",
- "sizeLarge": "MuiButton-sizeLarge",
- "sizeSmall": "MuiButton-sizeSmall",
- "startIcon": "MuiButton-startIcon",
- "text": "MuiButton-text",
- "textPrimary": "MuiButton-textPrimary",
- "textSecondary": "MuiButton-textSecondary",
- "textSizeLarge": "MuiButton-textSizeLarge",
- "textSizeSmall": "MuiButton-textSizeSmall",
- }
- }
- onClick={[Function]}
- type="submit"
- variant="contained"
- >
- <WithStyles(ForwardRef(ButtonBase))
- aria-label="unsubscribe.button_accessibility"
- className="MuiButton-root btn-highlight MuiButton-contained"
- component="button"
- disabled={false}
- focusRipple={true}
- focusVisibleClassName="Mui-focusVisible"
- onClick={[Function]}
- type="submit"
- >
- <ForwardRef(ButtonBase)
- aria-label="unsubscribe.button_accessibility"
- className="MuiButton-root btn-highlight MuiButton-contained"
- classes={
- Object {
- "disabled": "Mui-disabled",
- "focusVisible": "Mui-focusVisible",
- "root": "MuiButtonBase-root",
- }
- }
- component="button"
- disabled={false}
- focusRipple={true}
- focusVisibleClassName="Mui-focusVisible"
- onClick={[Function]}
- type="submit"
- >
- <button
- aria-label="unsubscribe.button_accessibility"
- className="MuiButtonBase-root MuiButton-root btn-highlight MuiButton-contained"
- disabled={false}
- onBlur={[Function]}
- onClick={[Function]}
- onDragLeave={[Function]}
- onFocus={[Function]}
- onKeyDown={[Function]}
- onKeyUp={[Function]}
- onMouseDown={[Function]}
- onMouseLeave={[Function]}
- onMouseUp={[Function]}
- onTouchEnd={[Function]}
- onTouchMove={[Function]}
- onTouchStart={[Function]}
- tabIndex={0}
- type="submit"
- >
- <span
- className="MuiButton-label text-18-bold"
- >
- unsubscribe.button_text
- </span>
- <WithStyles(memo)
- center={false}
- >
- <ForwardRef(TouchRipple)
- center={false}
- classes={
- Object {
- "child": "MuiTouchRipple-child",
- "childLeaving": "MuiTouchRipple-childLeaving",
- "childPulsate": "MuiTouchRipple-childPulsate",
- "ripple": "MuiTouchRipple-ripple",
- "ripplePulsate": "MuiTouchRipple-ripplePulsate",
- "rippleVisible": "MuiTouchRipple-rippleVisible",
- "root": "MuiTouchRipple-root",
- }
- }
- >
- <span
- className="MuiTouchRipple-root"
- >
- <TransitionGroup
- childFactory={[Function]}
- component={null}
- exit={true}
- />
- </span>
- </ForwardRef(TouchRipple)>
- </WithStyles(memo)>
- </button>
- </ForwardRef(ButtonBase)>
- </WithStyles(ForwardRef(ButtonBase))>
- </ForwardRef(Button)>
- </WithStyles(ForwardRef(Button))>
+ unsubscribe.title
</div>
- </mock-content>
- </UnSubscribeView>
-</Provider>
+ <div
+ class="text-16-normal question"
+ >
+ unsubscribe.content
+ </div>
+ <button
+ aria-label="unsubscribe.button_accessibility"
+ class="MuiButtonBase-root MuiButton-root btnPrimary MuiButton-contained"
+ tabindex="0"
+ type="button"
+ >
+ <span
+ class="MuiButton-label text-18-bold"
+ >
+ unsubscribe.button_text
+ </span>
+ <span
+ class="MuiTouchRipple-root"
+ />
+ </button>
+ </div>
+ </mock-content>
+</div>
`;
diff --git a/src/components/Options/Unsubscribe/unSubscribeView.scss b/src/components/Options/Unsubscribe/unSubscribeView.scss
index 6d1d6c9e9c75b78cc2f013a0c5fc76cc3c29c2de..1efa15a6f93c3a3683cd52f45acf0c9321dfe44c 100644
--- a/src/components/Options/Unsubscribe/unSubscribeView.scss
+++ b/src/components/Options/Unsubscribe/unSubscribeView.scss
@@ -4,7 +4,7 @@
display: flex;
flex-direction: column;
align-items: center;
- justify-content: center;
+ gap: 1rem;
max-width: 450px;
margin: auto;
padding: 2rem;
@@ -14,6 +14,5 @@
}
.question {
color: $white;
- margin-top: 1.5rem;
}
}
diff --git a/src/components/Options/Version/Version.spec.tsx b/src/components/Options/Version/Version.spec.tsx
index 9165d73f9f35a54bc3904d362a722665e2480917..0c8640bf891c4e5f4cbea7bb17b604f204a7ead9 100644
--- a/src/components/Options/Version/Version.spec.tsx
+++ b/src/components/Options/Version/Version.spec.tsx
@@ -1,10 +1,10 @@
+import { render } from '@testing-library/react'
import Version from 'components/Options/Version/Version'
-import { shallow } from 'enzyme'
import React from 'react'
describe('Version component', () => {
it('should be rendered correctly', () => {
- const component = shallow(<Version />).getElement()
- expect(component).toMatchSnapshot()
+ const { container } = render(<Version />)
+ expect(container).toMatchSnapshot()
})
})
diff --git a/src/components/Options/Version/__snapshots__/Version.spec.tsx.snap b/src/components/Options/Version/__snapshots__/Version.spec.tsx.snap
index 05ce42fbf8a684a3bd93073e63915d9c9211dbd9..9cb6b48f25e3201cb5765c987748e6d1dd175fa8 100644
--- a/src/components/Options/Version/__snapshots__/Version.spec.tsx.snap
+++ b/src/components/Options/Version/__snapshots__/Version.spec.tsx.snap
@@ -1,9 +1,11 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Version component should be rendered correctly 1`] = `
-<div
- className="version-root text-14-normal"
->
- v 0.0.0
+<div>
+ <div
+ class="version-root text-14-normal"
+ >
+ v 0.0.0
+ </div>
</div>
`;
diff --git a/src/components/Options/__snapshots__/OptionsView.spec.tsx.snap b/src/components/Options/__snapshots__/OptionsView.spec.tsx.snap
index 5417b10551f0928cbf257528d9c345106e34b077..f4e64582fee87f31407a828cb43e6fc24141d170 100644
--- a/src/components/Options/__snapshots__/OptionsView.spec.tsx.snap
+++ b/src/components/Options/__snapshots__/OptionsView.spec.tsx.snap
@@ -1,34 +1,399 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`OptionsView component should be rendered correctly 1`] = `
-<React.Fragment>
+<div>
<mock-cozybar
- titleKey="common.title_options"
+ titlekey="common.title_options"
/>
<mock-header
- desktopTitleKey="common.title_options"
- setHeaderHeight={[Function]}
+ desktoptitlekey="common.title_options"
/>
<mock-content
- heightOffset={0}
+ heightoffset="0"
>
- <ProfileTypeOptions />
- <ExportData />
- <ReportOptions />
- <HelpLink />
- <LegalNoticeLink />
- <GCULink />
- <Accessibility />
- <MatomoOptOut />
<div
- className="parameters-logos"
+ class="profile-type-root"
+ >
+ <div
+ class="profile-type-content"
+ >
+ <div
+ class="head text-16-normal-uppercase"
+ >
+ profile_type.title_profile
+ </div>
+ <button
+ class="MuiButtonBase-root MuiCardActionArea-root WithStyles(ForwardRef(CardActionArea))-root-1 profile-link"
+ tabindex="0"
+ type="button"
+ >
+ <div
+ class="MuiCardContent-root WithStyles(ForwardRef(CardContent))-root-2"
+ >
+ <svg
+ aria-hidden="true"
+ class="profile-icon styles__icon___23x3R"
+ height="42"
+ width="42"
+ >
+ <use
+ xlink:href="#test-file-stub"
+ />
+ </svg>
+ <span
+ class="link-label text-16-normal"
+ >
+ profile_type.read_profile
+ </span>
+ </div>
+ <span
+ class="MuiCardActionArea-focusHighlight"
+ />
+ <span
+ class="MuiTouchRipple-root"
+ />
+ </button>
+ </div>
+ </div>
+ <div
+ class="export-option-root"
+ >
+ <div
+ class="export-option-content"
+ >
+ <div
+ class="MuiPaper-root MuiAccordion-root expansion-panel-root MuiAccordion-rounded MuiPaper-elevation1 MuiPaper-rounded"
+ >
+ <div
+ aria-disabled="false"
+ aria-expanded="false"
+ aria-label="profile_type.accessibility.button_toggle_export"
+ class="MuiButtonBase-root MuiAccordionSummary-root expansion-panel-summary"
+ role="button"
+ tabindex="0"
+ >
+ <div
+ class="MuiAccordionSummary-content expansion-panel-content"
+ >
+ <svg
+ class="export-icon styles__icon___23x3R"
+ height="42"
+ width="42"
+ >
+ <use
+ xlink:href="#test-file-stub"
+ />
+ </svg>
+ <div
+ class="text-16-normal accordion-title"
+ >
+ export.title_export
+ </div>
+ </div>
+ <div
+ aria-disabled="false"
+ aria-hidden="true"
+ class="MuiButtonBase-root MuiIconButton-root MuiAccordionSummary-expandIcon MuiIconButton-edgeEnd"
+ >
+ <span
+ class="MuiIconButton-label"
+ >
+ <svg
+ class="accordion-icon styles__icon___23x3R"
+ height="16"
+ width="16"
+ >
+ <use
+ xlink:href="#test-file-stub"
+ />
+ </svg>
+ </span>
+ <span
+ class="MuiTouchRipple-root"
+ />
+ </div>
+ </div>
+ <div
+ class="MuiCollapse-root MuiCollapse-hidden"
+ style="min-height: 0px;"
+ >
+ <div
+ class="MuiCollapse-wrapper"
+ >
+ <div
+ class="MuiCollapse-wrapperInner"
+ >
+ <div
+ role="region"
+ >
+ <div
+ class="MuiAccordionDetails-root expansion-panel-details"
+ >
+ <div
+ class="text-15-normal grey"
+ >
+ export.text1
+ </div>
+ <div
+ class="text-16-bold"
+ >
+ export.fluid_select
+ </div>
+ <div
+ class="text-15-normal grey"
+ >
+ export.no_data
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div
+ class="report-option-root"
+ >
+ <div
+ class="report-option-content"
+ >
+ <div
+ class="head text-16-normal-uppercase"
+ >
+ profile.report.title_bilan
+ </div>
+ <div
+ class="switch-container-bilan"
+ >
+ <span
+ class="switch-label text-16-normal"
+ >
+ profile.report.switch_label_bilan
+ </span>
+ <div
+ class="button-container"
+ >
+ <button
+ aria-label="unsubscribe.button_accessibility"
+ class="MuiButtonBase-root MuiButton-root btnPrimary MuiButton-contained"
+ tabindex="0"
+ type="button"
+ >
+ <span
+ class="MuiButton-label text-18-bold"
+ >
+ profile.report.deactivate
+ </span>
+ <span
+ class="MuiTouchRipple-root"
+ />
+ </button>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div
+ class="help-root"
+ >
+ <div
+ class="help-content"
+ >
+ <div
+ class="help-header text-16-normal-uppercase"
+ >
+ help.title_help
+ </div>
+ <a
+ class="MuiTypography-root MuiLink-root MuiLink-underlineHover help-card-link MuiTypography-colorPrimary"
+ >
+ <div
+ class="card"
+ >
+ <div
+ class="help-card"
+ >
+ <div
+ class="help-card-content"
+ >
+ <svg
+ aria-hidden="true"
+ class="help-card-content-icon styles__icon___23x3R"
+ height="42"
+ width="42"
+ >
+ <use
+ xlink:href="#test-file-stub"
+ />
+ </svg>
+ <div
+ class="help-card-content-title"
+ >
+ help.read_help
+ </div>
+ </div>
+ </div>
+ </div>
+ </a>
+ </div>
+ </div>
+ <div
+ class="legal-notice-root"
+ >
+ <div
+ class="legal-notice-content"
+ >
+ <div
+ class="legal-notice-header text-16-normal-uppercase"
+ >
+ legal.title_legal
+ </div>
+ <a
+ class="MuiTypography-root MuiLink-root MuiLink-underlineHover legal-notice-card-link MuiTypography-colorPrimary"
+ href="/options/legalnotice"
+ >
+ <div
+ class="card"
+ >
+ <div
+ class="legal-notice-card"
+ >
+ <div
+ class="legal-notice-card-content"
+ >
+ <svg
+ aria-hidden="true"
+ class="legal-notice-card-content-icon styles__icon___23x3R"
+ height="42"
+ width="42"
+ >
+ <use
+ xlink:href="#test-file-stub"
+ />
+ </svg>
+ <div
+ class="legal-notice-card-content-title"
+ >
+ legal.read_legal
+ </div>
+ </div>
+ </div>
+ </div>
+ </a>
+ </div>
+ </div>
+ <div
+ class="gcu-link-root"
+ >
+ <div
+ class="gcu-link-content"
+ >
+ <a
+ class="MuiTypography-root MuiLink-root MuiLink-underlineHover gcu-link-card-link MuiTypography-colorPrimary"
+ href="/options/gcu"
+ >
+ <div
+ class="card"
+ >
+ <div
+ class="gcu-link-card"
+ >
+ <div
+ class="gcu-link-card-content"
+ >
+ <svg
+ aria-hidden="true"
+ class="gcu-link-card-content-icon styles__icon___23x3R"
+ height="42"
+ width="42"
+ >
+ <use
+ xlink:href="#test-file-stub"
+ />
+ </svg>
+ <div
+ class="gcu-link-card-content-title"
+ >
+ common.title_gcu
+ </div>
+ </div>
+ </div>
+ </div>
+ </a>
+ </div>
+ </div>
+ <div
+ class="gcu-link-root"
+ >
+ <div
+ class="gcu-link-content"
+ >
+ <a
+ class="MuiTypography-root MuiLink-root MuiLink-underlineHover gcu-link-card-link MuiTypography-colorPrimary"
+ href="https://ecolyo.com/accessibilite.html"
+ target="_blank"
+ >
+ <div
+ class="card"
+ >
+ <div
+ class="gcu-link-card"
+ >
+ <div
+ class="gcu-link-card-content"
+ >
+ <svg
+ aria-hidden="true"
+ class="gcu-link-card-content-icon styles__icon___23x3R"
+ height="42"
+ width="42"
+ >
+ <use
+ xlink:href="#test-file-stub"
+ />
+ </svg>
+ <div
+ class="gcu-link-card-content-title"
+ >
+ common.title_accessibility
+ </div>
+ </div>
+ </div>
+ </div>
+ </a>
+ </div>
+ </div>
+ <div
+ class="matomo-opt-out-container"
+ >
+ <div
+ class="matomo-opt-out"
+ >
+ <div
+ class="opt-out-header text-16-normal-uppercase"
+ >
+ matomo.matomo_title
+ </div>
+ <iframe
+ src="http://localhost:9800/index.php?module=CoreAdminHome&action=optOut&language=fr&backgroundColor=121212&fontColor=e0e0e0&fontSize=&fontFamily=sans-serif"
+ style="height: 250px;"
+ title="opt-out"
+ />
+ </div>
+ </div>
+ <div
+ class="parameters-logos"
>
<img
alt="ensemble de logos"
src="test-file-stub"
/>
</div>
- <Version />
+ <div
+ class="version-root text-14-normal"
+ >
+ v 0.0.0
+ </div>
</mock-content>
-</React.Fragment>
+</div>
`;
diff --git a/src/components/PartnerIssue/PartnerIssueModal.spec.tsx b/src/components/PartnerIssue/PartnerIssueModal.spec.tsx
index c3ac2e4d67277124e28e68950db4d32b468138bc..be3c840762990e6e96e63bab2833f5d69580dfd5 100644
--- a/src/components/PartnerIssue/PartnerIssueModal.spec.tsx
+++ b/src/components/PartnerIssue/PartnerIssueModal.spec.tsx
@@ -1,62 +1,66 @@
-import { Button } from '@material-ui/core'
+import { render, screen } from '@testing-library/react'
+import { userEvent } from '@testing-library/user-event'
import { FluidType } from 'enums'
-import { mount } from 'enzyme'
-import toJson from 'enzyme-to-json'
import React from 'react'
import PartnerIssueModal from './PartnerIssueModal'
const mockHandleClose = jest.fn()
describe('PartnerIssueModal component', () => {
it('should render correctly', () => {
- const wrapper = mount(
+ const { baseElement } = render(
<PartnerIssueModal
open={true}
handleCloseClick={mockHandleClose}
issuedFluid={FluidType.ELECTRICITY}
/>
)
- expect(toJson(wrapper)).toMatchSnapshot()
+ expect(screen.getByRole('dialog')).toBeInTheDocument()
+ expect(baseElement).toMatchSnapshot()
})
it('should render elec modal', () => {
- const wrapper = mount(
+ render(
<PartnerIssueModal
open={true}
handleCloseClick={mockHandleClose}
issuedFluid={FluidType.ELECTRICITY}
/>
)
- expect(wrapper.text().includes('error_connect_elec')).toBeTruthy()
+ expect(
+ screen.getByText('consumption.partner_issue_modal.error_connect_elec')
+ ).toBeInTheDocument()
})
it('should render water modal', () => {
- const wrapper = mount(
+ render(
<PartnerIssueModal
open={true}
handleCloseClick={mockHandleClose}
issuedFluid={FluidType.WATER}
/>
)
- expect(wrapper.text().includes('error_connect_water')).toBeTruthy()
+ expect(
+ screen.getByText('consumption.partner_issue_modal.error_connect_water')
+ ).toBeInTheDocument()
})
- it('should close modal', () => {
- const wrapper = mount(
+ it('should close modal', async () => {
+ render(
<PartnerIssueModal
open={true}
handleCloseClick={mockHandleClose}
issuedFluid={FluidType.ELECTRICITY}
/>
)
- wrapper.find(Button).simulate('click')
+ await userEvent.click(screen.getAllByRole('button')[0])
expect(mockHandleClose).toHaveBeenCalled()
})
it('should not be rendered', () => {
- const wrapper = mount(
+ render(
<PartnerIssueModal
open={false}
handleCloseClick={mockHandleClose}
issuedFluid={FluidType.ELECTRICITY}
/>
)
- expect(wrapper.find('div.partnerIssueModal').exists()).toBeFalsy()
+ expect(screen.queryByRole('dialog')).toBeFalsy()
})
})
diff --git a/src/components/PartnerIssue/PartnerIssueModal.tsx b/src/components/PartnerIssue/PartnerIssueModal.tsx
index 8876a8083913d85df2d45e8e7eeb0b1ad087f32b..14549c0270cc6531bc3ad17783ccd3e39eeedb0a 100644
--- a/src/components/PartnerIssue/PartnerIssueModal.tsx
+++ b/src/components/PartnerIssue/PartnerIssueModal.tsx
@@ -72,7 +72,6 @@ const PartnerIssueModal = ({
),
}}
/>
- <br />
<div
dangerouslySetInnerHTML={{
__html: t(`consumption.partner_issue_modal.additional_text`),
@@ -80,10 +79,7 @@ const PartnerIssueModal = ({
/>
<Button
onClick={() => handleCloseClick(issuedFluid)}
- classes={{
- root: 'btn-highlight',
- label: 'text-16-bold',
- }}
+ className="btnPrimary"
>
{t('consumption.partner_issue_modal.ok')}
</Button>
diff --git a/src/components/PartnerIssue/__snapshots__/PartnerIssueModal.spec.tsx.snap b/src/components/PartnerIssue/__snapshots__/PartnerIssueModal.spec.tsx.snap
index afd0cdd3465ce6bc9272539e4f51558166690e5e..c133766cab34b402c000f5244f9c4ec9c6aed62f 100644
--- a/src/components/PartnerIssue/__snapshots__/PartnerIssueModal.spec.tsx.snap
+++ b/src/components/PartnerIssue/__snapshots__/PartnerIssueModal.spec.tsx.snap
@@ -1,1033 +1,112 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`PartnerIssueModal component should render correctly 1`] = `
-<PartnerIssueModal
- handleCloseClick={[MockFunction]}
- issuedFluid={0}
- open={true}
+<body
+ style="padding-right: 0px; overflow: hidden;"
>
- <WithStyles(ForwardRef(Dialog))
- aria-labelledby="accessibility-title"
- classes={
- Object {
- "paper": "modal-paper",
- "root": "modal-root",
- }
- }
- disableEscapeKeyDown={true}
- onClose={[Function]}
- open={true}
- style={
- Object {
- "zIndex": 1500,
- }
- }
+ <div
+ aria-hidden="true"
+ />
+ <div
+ class="MuiDialog-root modal-root"
+ role="presentation"
+ style="position: fixed; z-index: 1500; right: 0px; bottom: 0px; top: 0px; left: 0px;"
>
- <ForwardRef(Dialog)
- aria-labelledby="accessibility-title"
- classes={
- Object {
- "container": "MuiDialog-container",
- "paper": "MuiDialog-paper modal-paper",
- "paperFullScreen": "MuiDialog-paperFullScreen",
- "paperFullWidth": "MuiDialog-paperFullWidth",
- "paperScrollBody": "MuiDialog-paperScrollBody",
- "paperScrollPaper": "MuiDialog-paperScrollPaper",
- "paperWidthFalse": "MuiDialog-paperWidthFalse",
- "paperWidthLg": "MuiDialog-paperWidthLg",
- "paperWidthMd": "MuiDialog-paperWidthMd",
- "paperWidthSm": "MuiDialog-paperWidthSm",
- "paperWidthXl": "MuiDialog-paperWidthXl",
- "paperWidthXs": "MuiDialog-paperWidthXs",
- "root": "MuiDialog-root modal-root",
- "scrollBody": "MuiDialog-scrollBody",
- "scrollPaper": "MuiDialog-scrollPaper",
- }
- }
- disableEscapeKeyDown={true}
- onClose={[Function]}
- open={true}
- style={
- Object {
- "zIndex": 1500,
- }
- }
+ <div
+ aria-hidden="true"
+ class="MuiBackdrop-root"
+ style="opacity: 1; webkit-transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"
+ />
+ <div
+ data-test="sentinelStart"
+ tabindex="0"
+ />
+ <div
+ class="MuiDialog-container MuiDialog-scrollPaper"
+ role="none presentation"
+ style="opacity: 1; webkit-transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"
+ tabindex="-1"
>
- <ForwardRef(Modal)
- BackdropComponent={
- Object {
- "$$typeof": Symbol(react.forward_ref),
- "Naked": Object {
- "$$typeof": Symbol(react.forward_ref),
- "propTypes": Object {
- "children": [Function],
- "className": [Function],
- "classes": [Function],
- "invisible": [Function],
- "open": [Function],
- "transitionDuration": [Function],
- },
- "render": [Function],
- },
- "displayName": "WithStyles(ForwardRef(Backdrop))",
- "options": Object {
- "defaultTheme": Object {
- "breakpoints": Object {
- "between": [Function],
- "down": [Function],
- "keys": Array [
- "xs",
- "sm",
- "md",
- "lg",
- "xl",
- ],
- "only": [Function],
- "up": [Function],
- "values": Object {
- "lg": 1280,
- "md": 960,
- "sm": 600,
- "xl": 1920,
- "xs": 0,
- },
- "width": [Function],
- },
- "direction": "ltr",
- "mixins": Object {
- "gutters": [Function],
- "toolbar": Object {
- "@media (min-width:0px) and (orientation: landscape)": Object {
- "minHeight": 48,
- },
- "@media (min-width:600px)": Object {
- "minHeight": 64,
- },
- "minHeight": 56,
- },
- },
- "overrides": Object {},
- "palette": Object {
- "action": Object {
- "activatedOpacity": 0.12,
- "active": "rgba(0, 0, 0, 0.54)",
- "disabled": "rgba(0, 0, 0, 0.26)",
- "disabledBackground": "rgba(0, 0, 0, 0.12)",
- "disabledOpacity": 0.38,
- "focus": "rgba(0, 0, 0, 0.12)",
- "focusOpacity": 0.12,
- "hover": "rgba(0, 0, 0, 0.04)",
- "hoverOpacity": 0.04,
- "selected": "rgba(0, 0, 0, 0.08)",
- "selectedOpacity": 0.08,
- },
- "augmentColor": [Function],
- "background": Object {
- "default": "#fafafa",
- "paper": "#fff",
- },
- "common": Object {
- "black": "#000",
- "white": "#fff",
- },
- "contrastThreshold": 3,
- "divider": "rgba(0, 0, 0, 0.12)",
- "error": Object {
- "contrastText": "#fff",
- "dark": "#d32f2f",
- "light": "#e57373",
- "main": "#f44336",
- },
- "getContrastText": [Function],
- "grey": Object {
- "100": "#f5f5f5",
- "200": "#eeeeee",
- "300": "#e0e0e0",
- "400": "#bdbdbd",
- "50": "#fafafa",
- "500": "#9e9e9e",
- "600": "#757575",
- "700": "#616161",
- "800": "#424242",
- "900": "#212121",
- "A100": "#d5d5d5",
- "A200": "#aaaaaa",
- "A400": "#303030",
- "A700": "#616161",
- },
- "info": Object {
- "contrastText": "#fff",
- "dark": "#1976d2",
- "light": "#64b5f6",
- "main": "#2196f3",
- },
- "primary": Object {
- "contrastText": "#fff",
- "dark": "#303f9f",
- "light": "#7986cb",
- "main": "#3f51b5",
- },
- "secondary": Object {
- "contrastText": "#fff",
- "dark": "#c51162",
- "light": "#ff4081",
- "main": "#f50057",
- },
- "success": Object {
- "contrastText": "rgba(0, 0, 0, 0.87)",
- "dark": "#388e3c",
- "light": "#81c784",
- "main": "#4caf50",
- },
- "text": Object {
- "disabled": "rgba(0, 0, 0, 0.38)",
- "hint": "rgba(0, 0, 0, 0.38)",
- "primary": "rgba(0, 0, 0, 0.87)",
- "secondary": "rgba(0, 0, 0, 0.54)",
- },
- "tonalOffset": 0.2,
- "type": "light",
- "warning": Object {
- "contrastText": "rgba(0, 0, 0, 0.87)",
- "dark": "#f57c00",
- "light": "#ffb74d",
- "main": "#ff9800",
- },
- },
- "props": Object {},
- "shadows": Array [
- "none",
- "0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12)",
- "0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12)",
- "0px 3px 3px -2px rgba(0,0,0,0.2),0px 3px 4px 0px rgba(0,0,0,0.14),0px 1px 8px 0px rgba(0,0,0,0.12)",
- "0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12)",
- "0px 3px 5px -1px rgba(0,0,0,0.2),0px 5px 8px 0px rgba(0,0,0,0.14),0px 1px 14px 0px rgba(0,0,0,0.12)",
- "0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12)",
- "0px 4px 5px -2px rgba(0,0,0,0.2),0px 7px 10px 1px rgba(0,0,0,0.14),0px 2px 16px 1px rgba(0,0,0,0.12)",
- "0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12)",
- "0px 5px 6px -3px rgba(0,0,0,0.2),0px 9px 12px 1px rgba(0,0,0,0.14),0px 3px 16px 2px rgba(0,0,0,0.12)",
- "0px 6px 6px -3px rgba(0,0,0,0.2),0px 10px 14px 1px rgba(0,0,0,0.14),0px 4px 18px 3px rgba(0,0,0,0.12)",
- "0px 6px 7px -4px rgba(0,0,0,0.2),0px 11px 15px 1px rgba(0,0,0,0.14),0px 4px 20px 3px rgba(0,0,0,0.12)",
- "0px 7px 8px -4px rgba(0,0,0,0.2),0px 12px 17px 2px rgba(0,0,0,0.14),0px 5px 22px 4px rgba(0,0,0,0.12)",
- "0px 7px 8px -4px rgba(0,0,0,0.2),0px 13px 19px 2px rgba(0,0,0,0.14),0px 5px 24px 4px rgba(0,0,0,0.12)",
- "0px 7px 9px -4px rgba(0,0,0,0.2),0px 14px 21px 2px rgba(0,0,0,0.14),0px 5px 26px 4px rgba(0,0,0,0.12)",
- "0px 8px 9px -5px rgba(0,0,0,0.2),0px 15px 22px 2px rgba(0,0,0,0.14),0px 6px 28px 5px rgba(0,0,0,0.12)",
- "0px 8px 10px -5px rgba(0,0,0,0.2),0px 16px 24px 2px rgba(0,0,0,0.14),0px 6px 30px 5px rgba(0,0,0,0.12)",
- "0px 8px 11px -5px rgba(0,0,0,0.2),0px 17px 26px 2px rgba(0,0,0,0.14),0px 6px 32px 5px rgba(0,0,0,0.12)",
- "0px 9px 11px -5px rgba(0,0,0,0.2),0px 18px 28px 2px rgba(0,0,0,0.14),0px 7px 34px 6px rgba(0,0,0,0.12)",
- "0px 9px 12px -6px rgba(0,0,0,0.2),0px 19px 29px 2px rgba(0,0,0,0.14),0px 7px 36px 6px rgba(0,0,0,0.12)",
- "0px 10px 13px -6px rgba(0,0,0,0.2),0px 20px 31px 3px rgba(0,0,0,0.14),0px 8px 38px 7px rgba(0,0,0,0.12)",
- "0px 10px 13px -6px rgba(0,0,0,0.2),0px 21px 33px 3px rgba(0,0,0,0.14),0px 8px 40px 7px rgba(0,0,0,0.12)",
- "0px 10px 14px -6px rgba(0,0,0,0.2),0px 22px 35px 3px rgba(0,0,0,0.14),0px 8px 42px 7px rgba(0,0,0,0.12)",
- "0px 11px 14px -7px rgba(0,0,0,0.2),0px 23px 36px 3px rgba(0,0,0,0.14),0px 9px 44px 8px rgba(0,0,0,0.12)",
- "0px 11px 15px -7px rgba(0,0,0,0.2),0px 24px 38px 3px rgba(0,0,0,0.14),0px 9px 46px 8px rgba(0,0,0,0.12)",
- ],
- "shape": Object {
- "borderRadius": 4,
- },
- "spacing": [Function],
- "transitions": Object {
- "create": [Function],
- "duration": Object {
- "complex": 375,
- "enteringScreen": 225,
- "leavingScreen": 195,
- "short": 250,
- "shorter": 200,
- "shortest": 150,
- "standard": 300,
- },
- "easing": Object {
- "easeIn": "cubic-bezier(0.4, 0, 1, 1)",
- "easeInOut": "cubic-bezier(0.4, 0, 0.2, 1)",
- "easeOut": "cubic-bezier(0.0, 0, 0.2, 1)",
- "sharp": "cubic-bezier(0.4, 0, 0.6, 1)",
- },
- "getAutoHeightDuration": [Function],
- },
- "typography": Object {
- "body1": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "1rem",
- "fontWeight": 400,
- "letterSpacing": "0.00938em",
- "lineHeight": 1.5,
- },
- "body2": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "0.875rem",
- "fontWeight": 400,
- "letterSpacing": "0.01071em",
- "lineHeight": 1.43,
- },
- "button": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "0.875rem",
- "fontWeight": 500,
- "letterSpacing": "0.02857em",
- "lineHeight": 1.75,
- "textTransform": "uppercase",
- },
- "caption": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "0.75rem",
- "fontWeight": 400,
- "letterSpacing": "0.03333em",
- "lineHeight": 1.66,
- },
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": 14,
- "fontWeightBold": 700,
- "fontWeightLight": 300,
- "fontWeightMedium": 500,
- "fontWeightRegular": 400,
- "h1": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "6rem",
- "fontWeight": 300,
- "letterSpacing": "-0.01562em",
- "lineHeight": 1.167,
- },
- "h2": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "3.75rem",
- "fontWeight": 300,
- "letterSpacing": "-0.00833em",
- "lineHeight": 1.2,
- },
- "h3": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "3rem",
- "fontWeight": 400,
- "letterSpacing": "0em",
- "lineHeight": 1.167,
- },
- "h4": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "2.125rem",
- "fontWeight": 400,
- "letterSpacing": "0.00735em",
- "lineHeight": 1.235,
- },
- "h5": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "1.5rem",
- "fontWeight": 400,
- "letterSpacing": "0em",
- "lineHeight": 1.334,
- },
- "h6": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "1.25rem",
- "fontWeight": 500,
- "letterSpacing": "0.0075em",
- "lineHeight": 1.6,
- },
- "htmlFontSize": 16,
- "overline": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "0.75rem",
- "fontWeight": 400,
- "letterSpacing": "0.08333em",
- "lineHeight": 2.66,
- "textTransform": "uppercase",
- },
- "pxToRem": [Function],
- "round": [Function],
- "subtitle1": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "1rem",
- "fontWeight": 400,
- "letterSpacing": "0.00938em",
- "lineHeight": 1.75,
- },
- "subtitle2": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "0.875rem",
- "fontWeight": 500,
- "letterSpacing": "0.00714em",
- "lineHeight": 1.57,
- },
- },
- "zIndex": Object {
- "appBar": 1100,
- "drawer": 1200,
- "mobileStepper": 1000,
- "modal": 1300,
- "snackbar": 1400,
- "speedDial": 1050,
- "tooltip": 1500,
- },
- },
- "name": "MuiBackdrop",
- },
- "propTypes": Object {
- "classes": [Function],
- "innerRef": [Function],
- },
- "render": [Function],
- "useStyles": [Function],
- }
- }
- BackdropProps={
- Object {
- "transitionDuration": Object {
- "enter": 225,
- "exit": 195,
- },
- }
- }
- className="MuiDialog-root modal-root"
- closeAfterTransition={true}
- disableEscapeKeyDown={true}
- onClose={[Function]}
- open={true}
- style={
- Object {
- "zIndex": 1500,
- }
- }
+ <div
+ aria-labelledby="accessibility-title"
+ class="MuiPaper-root MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm MuiPaper-elevation24 MuiPaper-rounded"
+ role="dialog"
>
- <ForwardRef(Portal)
- disablePortal={false}
+ <div
+ id="accessibility-title"
>
- <Portal
- containerInfo={
- <body
- style="padding-right: 0px; overflow: hidden;"
- >
- <div
- class="MuiDialog-root modal-root"
- role="presentation"
- style="position: fixed; z-index: 1500; right: 0px; bottom: 0px; top: 0px; left: 0px;"
- >
- <div
- aria-hidden="true"
- class="MuiBackdrop-root"
- style="opacity: 1; webkit-transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"
- />
- <div
- data-test="sentinelStart"
- tabindex="0"
- />
- <div
- class="MuiDialog-container MuiDialog-scrollPaper"
- role="none presentation"
- style="opacity: 1; webkit-transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"
- tabindex="-1"
- >
- <div
- aria-labelledby="accessibility-title"
- class="MuiPaper-root MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm MuiPaper-elevation24 MuiPaper-rounded"
- role="dialog"
- >
- <div
- id="accessibility-title"
- >
- feedback.accessibility.window_title
- </div>
- <button
- aria-label="feedback.accessibility.button_close"
- class="MuiButtonBase-root MuiIconButton-root modal-paper-close-button"
- tabindex="0"
- type="button"
- >
- <span
- class="MuiIconButton-label"
- >
- <svg
- class="styles__icon___23x3R"
- height="16"
- width="16"
- >
- <use
- xlink:href="#test-file-stub"
- />
- </svg>
- </span>
- <span
- class="MuiTouchRipple-root"
- />
- </button>
- <div
- class="partnerIssueModal"
- >
- <svg
- aria-hidden="true"
- class="warn-icon styles__icon___23x3R"
- height="40"
- width="40"
- >
- <use
- xlink:href="#test-file-stub"
- />
- </svg>
- <div
- class="partner-issue-title text-20-bold"
- >
- consumption.partner_issue_modal.title
- </div>
- <div
- class="partner-issue-content text-16-normal"
- >
- consumption.partner_issue_modal.error_connect_elec
- </div>
- <br />
- <div>
- consumption.partner_issue_modal.additional_text
- </div>
- <button
- class="MuiButtonBase-root MuiButton-root btn-highlight MuiButton-text"
- tabindex="0"
- type="button"
- >
- <span
- class="MuiButton-label text-16-bold"
- >
- consumption.partner_issue_modal.ok
- </span>
- <span
- class="MuiTouchRipple-root"
- />
- </button>
- </div>
- </div>
- </div>
- <div
- data-test="sentinelEnd"
- tabindex="0"
- />
- </div>
- </body>
- }
+ feedback.accessibility.window_title
+ </div>
+ <button
+ aria-label="feedback.accessibility.button_close"
+ class="MuiButtonBase-root MuiIconButton-root modal-paper-close-button"
+ tabindex="0"
+ type="button"
+ >
+ <span
+ class="MuiIconButton-label"
+ >
+ <svg
+ class="styles__icon___23x3R"
+ height="16"
+ width="16"
+ >
+ <use
+ xlink:href="#test-file-stub"
+ />
+ </svg>
+ </span>
+ <span
+ class="MuiTouchRipple-root"
+ />
+ </button>
+ <div
+ class="partnerIssueModal"
+ >
+ <svg
+ aria-hidden="true"
+ class="warn-icon styles__icon___23x3R"
+ height="40"
+ width="40"
+ >
+ <use
+ xlink:href="#test-file-stub"
+ />
+ </svg>
+ <div
+ class="partner-issue-title text-20-bold"
+ >
+ consumption.partner_issue_modal.title
+ </div>
+ <div
+ class="partner-issue-content text-16-normal"
+ >
+ consumption.partner_issue_modal.error_connect_elec
+ </div>
+ <div>
+ consumption.partner_issue_modal.additional_text
+ </div>
+ <button
+ class="MuiButtonBase-root MuiButton-root MuiButton-text btnPrimary"
+ tabindex="0"
+ type="button"
>
- <div
- className="MuiDialog-root modal-root"
- onKeyDown={[Function]}
- role="presentation"
- style={
- Object {
- "bottom": 0,
- "left": 0,
- "position": "fixed",
- "right": 0,
- "top": 0,
- "zIndex": 1500,
- }
- }
+ <span
+ class="MuiButton-label"
>
- <WithStyles(ForwardRef(Backdrop))
- onClick={[Function]}
- open={true}
- transitionDuration={
- Object {
- "enter": 225,
- "exit": 195,
- }
- }
- >
- <ForwardRef(Backdrop)
- classes={
- Object {
- "invisible": "MuiBackdrop-invisible",
- "root": "MuiBackdrop-root",
- }
- }
- onClick={[Function]}
- open={true}
- transitionDuration={
- Object {
- "enter": 225,
- "exit": 195,
- }
- }
- >
- <ForwardRef(Fade)
- in={true}
- onClick={[Function]}
- timeout={
- Object {
- "enter": 225,
- "exit": 195,
- }
- }
- >
- <Transition
- appear={true}
- enter={true}
- exit={true}
- in={true}
- mountOnEnter={false}
- onClick={[Function]}
- onEnter={[Function]}
- onEntered={[Function]}
- onEntering={[Function]}
- onExit={[Function]}
- onExited={[Function]}
- onExiting={[Function]}
- timeout={
- Object {
- "enter": 225,
- "exit": 195,
- }
- }
- unmountOnExit={false}
- >
- <div
- aria-hidden={true}
- className="MuiBackdrop-root"
- onClick={[Function]}
- style={
- Object {
- "opacity": 1,
- "visibility": undefined,
- }
- }
- />
- </Transition>
- </ForwardRef(Fade)>
- </ForwardRef(Backdrop)>
- </WithStyles(ForwardRef(Backdrop))>
- <Unstable_TrapFocus
- disableAutoFocus={false}
- disableEnforceFocus={false}
- disableRestoreFocus={false}
- getDoc={[Function]}
- isEnabled={[Function]}
- open={true}
- >
- <div
- data-test="sentinelStart"
- tabIndex={0}
- />
- <ForwardRef(Fade)
- appear={true}
- in={true}
- onEnter={[Function]}
- onExited={[Function]}
- role="none presentation"
- tabIndex="-1"
- timeout={
- Object {
- "enter": 225,
- "exit": 195,
- }
- }
- >
- <Transition
- appear={true}
- enter={true}
- exit={true}
- in={true}
- mountOnEnter={false}
- onEnter={[Function]}
- onEntered={[Function]}
- onEntering={[Function]}
- onExit={[Function]}
- onExited={[Function]}
- onExiting={[Function]}
- role="none presentation"
- tabIndex="-1"
- timeout={
- Object {
- "enter": 225,
- "exit": 195,
- }
- }
- unmountOnExit={false}
- >
- <div
- className="MuiDialog-container MuiDialog-scrollPaper"
- onMouseDown={[Function]}
- onMouseUp={[Function]}
- role="none presentation"
- style={
- Object {
- "opacity": 1,
- "visibility": undefined,
- }
- }
- tabIndex="-1"
- >
- <WithStyles(ForwardRef(Paper))
- aria-labelledby="accessibility-title"
- className="MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm"
- elevation={24}
- role="dialog"
- >
- <ForwardRef(Paper)
- aria-labelledby="accessibility-title"
- className="MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm"
- classes={
- Object {
- "elevation0": "MuiPaper-elevation0",
- "elevation1": "MuiPaper-elevation1",
- "elevation10": "MuiPaper-elevation10",
- "elevation11": "MuiPaper-elevation11",
- "elevation12": "MuiPaper-elevation12",
- "elevation13": "MuiPaper-elevation13",
- "elevation14": "MuiPaper-elevation14",
- "elevation15": "MuiPaper-elevation15",
- "elevation16": "MuiPaper-elevation16",
- "elevation17": "MuiPaper-elevation17",
- "elevation18": "MuiPaper-elevation18",
- "elevation19": "MuiPaper-elevation19",
- "elevation2": "MuiPaper-elevation2",
- "elevation20": "MuiPaper-elevation20",
- "elevation21": "MuiPaper-elevation21",
- "elevation22": "MuiPaper-elevation22",
- "elevation23": "MuiPaper-elevation23",
- "elevation24": "MuiPaper-elevation24",
- "elevation3": "MuiPaper-elevation3",
- "elevation4": "MuiPaper-elevation4",
- "elevation5": "MuiPaper-elevation5",
- "elevation6": "MuiPaper-elevation6",
- "elevation7": "MuiPaper-elevation7",
- "elevation8": "MuiPaper-elevation8",
- "elevation9": "MuiPaper-elevation9",
- "outlined": "MuiPaper-outlined",
- "root": "MuiPaper-root",
- "rounded": "MuiPaper-rounded",
- }
- }
- elevation={24}
- role="dialog"
- >
- <div
- aria-labelledby="accessibility-title"
- className="MuiPaper-root MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm MuiPaper-elevation24 MuiPaper-rounded"
- role="dialog"
- >
- <div
- id="accessibility-title"
- >
- feedback.accessibility.window_title
- </div>
- <WithStyles(ForwardRef(IconButton))
- aria-label="feedback.accessibility.button_close"
- className="modal-paper-close-button"
- onClick={[Function]}
- >
- <ForwardRef(IconButton)
- aria-label="feedback.accessibility.button_close"
- className="modal-paper-close-button"
- classes={
- Object {
- "colorInherit": "MuiIconButton-colorInherit",
- "colorPrimary": "MuiIconButton-colorPrimary",
- "colorSecondary": "MuiIconButton-colorSecondary",
- "disabled": "Mui-disabled",
- "edgeEnd": "MuiIconButton-edgeEnd",
- "edgeStart": "MuiIconButton-edgeStart",
- "label": "MuiIconButton-label",
- "root": "MuiIconButton-root",
- "sizeSmall": "MuiIconButton-sizeSmall",
- }
- }
- onClick={[Function]}
- >
- <WithStyles(ForwardRef(ButtonBase))
- aria-label="feedback.accessibility.button_close"
- centerRipple={true}
- className="MuiIconButton-root modal-paper-close-button"
- disabled={false}
- focusRipple={true}
- onClick={[Function]}
- >
- <ForwardRef(ButtonBase)
- aria-label="feedback.accessibility.button_close"
- centerRipple={true}
- className="MuiIconButton-root modal-paper-close-button"
- classes={
- Object {
- "disabled": "Mui-disabled",
- "focusVisible": "Mui-focusVisible",
- "root": "MuiButtonBase-root",
- }
- }
- disabled={false}
- focusRipple={true}
- onClick={[Function]}
- >
- <button
- aria-label="feedback.accessibility.button_close"
- className="MuiButtonBase-root MuiIconButton-root modal-paper-close-button"
- disabled={false}
- onBlur={[Function]}
- onClick={[Function]}
- onDragLeave={[Function]}
- onFocus={[Function]}
- onKeyDown={[Function]}
- onKeyUp={[Function]}
- onMouseDown={[Function]}
- onMouseLeave={[Function]}
- onMouseUp={[Function]}
- onTouchEnd={[Function]}
- onTouchMove={[Function]}
- onTouchStart={[Function]}
- tabIndex={0}
- type="button"
- >
- <span
- className="MuiIconButton-label"
- >
- <Icon
- icon="test-file-stub"
- size={16}
- spin={false}
- >
- <Component
- className="styles__icon___23x3R"
- height={16}
- style={Object {}}
- width={16}
- >
- <svg
- className="styles__icon___23x3R"
- height={16}
- style={Object {}}
- width={16}
- >
- <use
- xlinkHref="#test-file-stub"
- />
- </svg>
- </Component>
- </Icon>
- </span>
- <WithStyles(memo)
- center={true}
- >
- <ForwardRef(TouchRipple)
- center={true}
- classes={
- Object {
- "child": "MuiTouchRipple-child",
- "childLeaving": "MuiTouchRipple-childLeaving",
- "childPulsate": "MuiTouchRipple-childPulsate",
- "ripple": "MuiTouchRipple-ripple",
- "ripplePulsate": "MuiTouchRipple-ripplePulsate",
- "rippleVisible": "MuiTouchRipple-rippleVisible",
- "root": "MuiTouchRipple-root",
- }
- }
- >
- <span
- className="MuiTouchRipple-root"
- >
- <TransitionGroup
- childFactory={[Function]}
- component={null}
- exit={true}
- />
- </span>
- </ForwardRef(TouchRipple)>
- </WithStyles(memo)>
- </button>
- </ForwardRef(ButtonBase)>
- </WithStyles(ForwardRef(ButtonBase))>
- </ForwardRef(IconButton)>
- </WithStyles(ForwardRef(IconButton))>
- <div
- className="partnerIssueModal"
- >
- <StyledIcon
- className="warn-icon"
- icon="test-file-stub"
- size={40}
- >
- <Icon
- aria-hidden={true}
- className="warn-icon"
- icon="test-file-stub"
- size={40}
- spin={false}
- >
- <Component
- aria-hidden={true}
- className="warn-icon styles__icon___23x3R"
- height={40}
- style={Object {}}
- width={40}
- >
- <svg
- aria-hidden={true}
- className="warn-icon styles__icon___23x3R"
- height={40}
- style={Object {}}
- width={40}
- >
- <use
- xlinkHref="#test-file-stub"
- />
- </svg>
- </Component>
- </Icon>
- </StyledIcon>
- <div
- className="partner-issue-title text-20-bold"
- >
- consumption.partner_issue_modal.title
- </div>
- <div
- className="partner-issue-content text-16-normal"
- dangerouslySetInnerHTML={
- Object {
- "__html": "consumption.partner_issue_modal.error_connect_elec",
- }
- }
- />
- <br />
- <div
- dangerouslySetInnerHTML={
- Object {
- "__html": "consumption.partner_issue_modal.additional_text",
- }
- }
- />
- <WithStyles(ForwardRef(Button))
- classes={
- Object {
- "label": "text-16-bold",
- "root": "btn-highlight",
- }
- }
- onClick={[Function]}
- >
- <ForwardRef(Button)
- classes={
- Object {
- "colorInherit": "MuiButton-colorInherit",
- "contained": "MuiButton-contained",
- "containedPrimary": "MuiButton-containedPrimary",
- "containedSecondary": "MuiButton-containedSecondary",
- "containedSizeLarge": "MuiButton-containedSizeLarge",
- "containedSizeSmall": "MuiButton-containedSizeSmall",
- "disableElevation": "MuiButton-disableElevation",
- "disabled": "Mui-disabled",
- "endIcon": "MuiButton-endIcon",
- "focusVisible": "Mui-focusVisible",
- "fullWidth": "MuiButton-fullWidth",
- "iconSizeLarge": "MuiButton-iconSizeLarge",
- "iconSizeMedium": "MuiButton-iconSizeMedium",
- "iconSizeSmall": "MuiButton-iconSizeSmall",
- "label": "MuiButton-label text-16-bold",
- "outlined": "MuiButton-outlined",
- "outlinedPrimary": "MuiButton-outlinedPrimary",
- "outlinedSecondary": "MuiButton-outlinedSecondary",
- "outlinedSizeLarge": "MuiButton-outlinedSizeLarge",
- "outlinedSizeSmall": "MuiButton-outlinedSizeSmall",
- "root": "MuiButton-root btn-highlight",
- "sizeLarge": "MuiButton-sizeLarge",
- "sizeSmall": "MuiButton-sizeSmall",
- "startIcon": "MuiButton-startIcon",
- "text": "MuiButton-text",
- "textPrimary": "MuiButton-textPrimary",
- "textSecondary": "MuiButton-textSecondary",
- "textSizeLarge": "MuiButton-textSizeLarge",
- "textSizeSmall": "MuiButton-textSizeSmall",
- }
- }
- onClick={[Function]}
- >
- <WithStyles(ForwardRef(ButtonBase))
- className="MuiButton-root btn-highlight MuiButton-text"
- component="button"
- disabled={false}
- focusRipple={true}
- focusVisibleClassName="Mui-focusVisible"
- onClick={[Function]}
- type="button"
- >
- <ForwardRef(ButtonBase)
- className="MuiButton-root btn-highlight MuiButton-text"
- classes={
- Object {
- "disabled": "Mui-disabled",
- "focusVisible": "Mui-focusVisible",
- "root": "MuiButtonBase-root",
- }
- }
- component="button"
- disabled={false}
- focusRipple={true}
- focusVisibleClassName="Mui-focusVisible"
- onClick={[Function]}
- type="button"
- >
- <button
- className="MuiButtonBase-root MuiButton-root btn-highlight MuiButton-text"
- disabled={false}
- onBlur={[Function]}
- onClick={[Function]}
- onDragLeave={[Function]}
- onFocus={[Function]}
- onKeyDown={[Function]}
- onKeyUp={[Function]}
- onMouseDown={[Function]}
- onMouseLeave={[Function]}
- onMouseUp={[Function]}
- onTouchEnd={[Function]}
- onTouchMove={[Function]}
- onTouchStart={[Function]}
- tabIndex={0}
- type="button"
- >
- <span
- className="MuiButton-label text-16-bold"
- >
- consumption.partner_issue_modal.ok
- </span>
- <WithStyles(memo)
- center={false}
- >
- <ForwardRef(TouchRipple)
- center={false}
- classes={
- Object {
- "child": "MuiTouchRipple-child",
- "childLeaving": "MuiTouchRipple-childLeaving",
- "childPulsate": "MuiTouchRipple-childPulsate",
- "ripple": "MuiTouchRipple-ripple",
- "ripplePulsate": "MuiTouchRipple-ripplePulsate",
- "rippleVisible": "MuiTouchRipple-rippleVisible",
- "root": "MuiTouchRipple-root",
- }
- }
- >
- <span
- className="MuiTouchRipple-root"
- >
- <TransitionGroup
- childFactory={[Function]}
- component={null}
- exit={true}
- />
- </span>
- </ForwardRef(TouchRipple)>
- </WithStyles(memo)>
- </button>
- </ForwardRef(ButtonBase)>
- </WithStyles(ForwardRef(ButtonBase))>
- </ForwardRef(Button)>
- </WithStyles(ForwardRef(Button))>
- </div>
- </div>
- </ForwardRef(Paper)>
- </WithStyles(ForwardRef(Paper))>
- </div>
- </Transition>
- </ForwardRef(Fade)>
- <div
- data-test="sentinelEnd"
- tabIndex={0}
- />
- </Unstable_TrapFocus>
- </div>
- </Portal>
- </ForwardRef(Portal)>
- </ForwardRef(Modal)>
- </ForwardRef(Dialog)>
- </WithStyles(ForwardRef(Dialog))>
-</PartnerIssueModal>
+ consumption.partner_issue_modal.ok
+ </span>
+ <span
+ class="MuiTouchRipple-root"
+ />
+ </button>
+ </div>
+ </div>
+ </div>
+ <div
+ data-test="sentinelEnd"
+ tabindex="0"
+ />
+ </div>
+</body>
`;
diff --git a/src/components/PartnerIssue/partnerIssueModal.scss b/src/components/PartnerIssue/partnerIssueModal.scss
index 7ddf1e1b2ed045a8d36a1997fcb6f55dd16fe7c1..aae1fef26097f439d5f7c05b1599311bc5460a9c 100644
--- a/src/components/PartnerIssue/partnerIssueModal.scss
+++ b/src/components/PartnerIssue/partnerIssueModal.scss
@@ -5,13 +5,14 @@
padding: 1rem;
max-width: 20rem;
text-align: center;
+ display: flex;
+ flex-direction: column;
+ gap: 1rem;
.warn-icon {
- margin: 1rem auto;
- display: block;
+ margin: 0 auto;
}
.partner-issue-title {
color: #ec9d41;
- margin: 1rem auto;
text-align: center;
}
.partner-issue-content {
@@ -30,10 +31,6 @@
}
}
}
-
- button.btn-highlight {
- padding: 0.65rem;
- }
}
.partner-issue-portal {
.modal-overlay {
diff --git a/src/components/ProfileType/ProfileTypeFinished/ProfileTypeFinished.spec.tsx b/src/components/ProfileType/ProfileTypeFinished/ProfileTypeFinished.spec.tsx
index efaf28189242e8be1aaa2611bf7560d58c607686..402a3a0bffeea34b3b24e2479491759dbadf4bb7 100644
--- a/src/components/ProfileType/ProfileTypeFinished/ProfileTypeFinished.spec.tsx
+++ b/src/components/ProfileType/ProfileTypeFinished/ProfileTypeFinished.spec.tsx
@@ -1,5 +1,5 @@
-import { Button } from '@material-ui/core'
-import { mount } from 'enzyme'
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
import React from 'react'
import { Provider } from 'react-redux'
import UsageEventService from 'services/usageEvent.service'
@@ -16,40 +16,36 @@ jest.mock('react-router-dom', () => ({
useNavigate: () => mockedNavigate,
}))
-const mockAddEvent = jest.fn()
jest.mock('services/usageEvent.service')
-UsageEventService.addEvent = mockAddEvent
+UsageEventService.addEvent = jest.fn()
-const mockGetAllProfileTypes = jest.fn()
-const mockDeleteProfileTypes = jest.fn()
jest.mock('services/profileTypeEntity.service', () => {
return jest.fn(() => ({
- getAllProfileTypes: mockGetAllProfileTypes,
- deleteProfileTypes: mockDeleteProfileTypes,
+ getAllProfileTypes: jest.fn(),
+ deleteProfileTypes: jest.fn(),
}))
})
describe('ProfileTypeFinished component', () => {
const store = createMockEcolyoStore()
- beforeEach(() => {
- jest.clearAllMocks()
- })
it('should be rendered correctly', async () => {
- const wrapper = mount(
+ const { container } = render(
<Provider store={store}>
<ProfileTypeFinished profileType={mockProfileType} />
</Provider>
)
- expect(wrapper.find('profile-type-finished-card')).toBeTruthy()
+ expect(
+ container.getElementsByClassName('profile-type-finished-card')[0]
+ ).toBeInTheDocument()
})
- it('should go to ecogesture selection', () => {
- const wrapper = mount(
+ it('should go to ecogesture selection', async () => {
+ render(
<Provider store={store}>
<ProfileTypeFinished profileType={mockProfileType} />
</Provider>
)
- wrapper.find(Button).first().simulate('click')
+ await userEvent.click(screen.getAllByRole('button')[0])
expect(mockedNavigate).toHaveBeenCalledWith('/ecogesture-selection')
})
})
diff --git a/src/components/ProfileType/ProfileTypeFinished/ProfileTypeFinished.tsx b/src/components/ProfileType/ProfileTypeFinished/ProfileTypeFinished.tsx
index f4b2f0ef36f99fe06ef170bae22613f63cbf55d0..c7de430773e7f8036822003100eaa29b1b9ebe8f 100644
--- a/src/components/ProfileType/ProfileTypeFinished/ProfileTypeFinished.tsx
+++ b/src/components/ProfileType/ProfileTypeFinished/ProfileTypeFinished.tsx
@@ -56,9 +56,8 @@ const ProfileTypeFinished = ({ profileType }: { profileType: ProfileType }) => {
const myProfileTypes: ProfileType[] | null =
await profileTypeEntityService.getAllProfileTypes(chosenPeriod)
if (myProfileTypes !== null) {
- const destroyPT = await profileTypeEntityService.deleteProfileTypes(
- myProfileTypes
- )
+ const destroyPT =
+ await profileTypeEntityService.deleteProfileTypes(myProfileTypes)
if (destroyPT) {
await createNewProfileType(client, consistentProfileType)
setIsSaved(true)
@@ -126,18 +125,14 @@ const ProfileTypeFinished = ({ profileType }: { profileType: ProfileType }) => {
<div className="profile-type-finished-label text-28-normal-uppercase">
{t('profile_type.finished.title')}
</div>
- <div className="profile-type-finished-description text-18-normal">
+ <div>
<div>{t('profile_type.finished.label1')}</div>
<div>{t('profile_type.finished.label2')}</div>
</div>
<Button
aria-label={t('profile_type.accessibility.button_validate')}
onClick={handleClick}
- className="profile-type-finished-button"
- classes={{
- root: 'btn-primary-positive',
- label: 'text-16-normal',
- }}
+ className="btnPrimary"
>
{t('profile_type.finished.button_validate')}
</Button>
diff --git a/src/components/ProfileType/ProfileTypeFinished/profileTypeFinished.scss b/src/components/ProfileType/ProfileTypeFinished/profileTypeFinished.scss
index 7e0d427a6bb9836df23a6d854719557266099055..fd71b6fb3103d3d3c582c09ef7a77f998342c782 100644
--- a/src/components/ProfileType/ProfileTypeFinished/profileTypeFinished.scss
+++ b/src/components/ProfileType/ProfileTypeFinished/profileTypeFinished.scss
@@ -11,19 +11,22 @@
width: 80%;
text-align: center;
padding: 1rem;
+
+ display: flex;
+ flex-direction: column;
+ gap: 1rem;
+
+ svg {
+ margin: auto;
+ }
+
@media (min-width: $width-tablet) {
width: 50%;
}
@media (min-width: $width-large-desktop) {
width: 40%;
}
- button.profile-type-finished-button {
- margin-top: 2.875rem;
- }
}
.profile-type-finished-label {
color: $gold-shadow;
}
-.profile-type-finished-description {
- margin-top: 1.875rem;
-}
diff --git a/src/components/ProfileType/ProfileTypeFormMultiChoice/ProfileTypeFormMultiChoice.spec.tsx b/src/components/ProfileType/ProfileTypeFormMultiChoice/ProfileTypeFormMultiChoice.spec.tsx
index 4abad2652cce93fb255da34448fda9a142e631cc..7d2c179af80c9a3e24c075bb41856509d69a1b3d 100644
--- a/src/components/ProfileType/ProfileTypeFormMultiChoice/ProfileTypeFormMultiChoice.spec.tsx
+++ b/src/components/ProfileType/ProfileTypeFormMultiChoice/ProfileTypeFormMultiChoice.spec.tsx
@@ -1,5 +1,5 @@
+import { render, screen } from '@testing-library/react'
import { ProfileTypeStepForm } from 'enums'
-import { mount } from 'enzyme'
import React from 'react'
import { Provider } from 'react-redux'
import {
@@ -9,25 +9,22 @@ import {
import { createMockEcolyoStore } from 'tests/__mocks__/store'
import ProfileTypeFormMultiChoice from './ProfileTypeFormMultiChoice'
-const mockHandlePrevious = jest.fn()
-const mockHandleNext = jest.fn()
-
describe('ProfileTypeFormMultiChoice component', () => {
const store = createMockEcolyoStore()
it('should be rendered correctly', () => {
- const wrapper = mount(
+ render(
<Provider store={store}>
<ProfileTypeFormMultiChoice
step={ProfileTypeStepForm.COOKING_FLUID}
viewedStep={ProfileTypeStepForm.AREA}
currentProfileType={mockProfileType}
- answerType={mockProfileTypeAnswers[1]}
- setNextStep={mockHandlePrevious}
- setPreviousStep={mockHandleNext}
+ answerType={mockProfileTypeAnswers[8]}
+ setNextStep={jest.fn()}
+ setPreviousStep={jest.fn()}
/>
</Provider>
)
- expect(wrapper.find('input')).toBeTruthy()
+ expect(screen.getAllByRole('checkbox').length).toBeTruthy()
})
})
diff --git a/src/components/ProfileType/ProfileTypeFormNumber/ProfileTypeFormNumber.spec.tsx b/src/components/ProfileType/ProfileTypeFormNumber/ProfileTypeFormNumber.spec.tsx
index f272691bbd6efd2744606f5d494b34c4a50c4b7f..a53dad4bab43fa7a9819ba182a99c793b9dd8301 100644
--- a/src/components/ProfileType/ProfileTypeFormNumber/ProfileTypeFormNumber.spec.tsx
+++ b/src/components/ProfileType/ProfileTypeFormNumber/ProfileTypeFormNumber.spec.tsx
@@ -1,5 +1,5 @@
+import { render, screen } from '@testing-library/react'
import { ProfileTypeStepForm } from 'enums'
-import { mount } from 'enzyme'
import React from 'react'
import { Provider } from 'react-redux'
import {
@@ -9,25 +9,22 @@ import {
import { createMockEcolyoStore } from 'tests/__mocks__/store'
import ProfileTypeFormNumber from './ProfileTypeFormNumber'
-const mockHandlePrevious = jest.fn()
-const mockHandleNext = jest.fn()
-
describe('ProfileTypeFormNumber component', () => {
const store = createMockEcolyoStore()
it('should be rendered correctly', () => {
- const wrapper = mount(
+ render(
<Provider store={store}>
<ProfileTypeFormNumber
step={ProfileTypeStepForm.COOKING_FLUID}
viewedStep={ProfileTypeStepForm.AREA}
currentProfileType={mockProfileType}
answerType={mockProfileTypeAnswers[1]}
- setNextStep={mockHandlePrevious}
- setPreviousStep={mockHandleNext}
+ setNextStep={jest.fn()}
+ setPreviousStep={jest.fn()}
/>
</Provider>
)
- expect(wrapper.find('input')).toBeTruthy()
+ expect(screen.getByRole('spinbutton')).toBeInTheDocument()
})
})
diff --git a/src/components/ProfileType/ProfileTypeFormNumber/ProfileTypeFormNumber.tsx b/src/components/ProfileType/ProfileTypeFormNumber/ProfileTypeFormNumber.tsx
index 7636440590b0c7d8872e1e74160b6a6db6447bca..918be75c334d086c3efd1485cd588e02c399133d 100644
--- a/src/components/ProfileType/ProfileTypeFormNumber/ProfileTypeFormNumber.tsx
+++ b/src/components/ProfileType/ProfileTypeFormNumber/ProfileTypeFormNumber.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable jsx-a11y/no-autofocus */
import FormNavigation from 'components/CommonKit/FormNavigation/FormNavigation'
import FormProgress from 'components/CommonKit/FormProgress/FormProgress'
import 'components/ProfileType/profileTypeForm.scss'
@@ -57,10 +58,12 @@ const ProfileTypeFormNumber = ({
<label className="text">
<input
type="number"
+ className="inputNumber"
value={answer.toString()}
name={answerType.attribute}
onChange={e => setAnswer(e.target.value)}
autoFocus
+ style={{ marginRight: '0.5rem' }}
/>
m²
</label>
diff --git a/src/components/ProfileType/ProfileTypeFormNumberSelection/ProfileTypeFormNumberSelection.spec.tsx b/src/components/ProfileType/ProfileTypeFormNumberSelection/ProfileTypeFormNumberSelection.spec.tsx
index c575f170dfc097af77f0f2df3bf6ade0f059bc4e..0b4d386c5eb7da75cddb76107b5d482f6cbd7844 100644
--- a/src/components/ProfileType/ProfileTypeFormNumberSelection/ProfileTypeFormNumberSelection.spec.tsx
+++ b/src/components/ProfileType/ProfileTypeFormNumberSelection/ProfileTypeFormNumberSelection.spec.tsx
@@ -1,5 +1,5 @@
+import { render } from '@testing-library/react'
import { ProfileTypeStepForm } from 'enums'
-import { mount } from 'enzyme'
import React from 'react'
import { Provider } from 'react-redux'
import {
@@ -9,25 +9,22 @@ import {
import { createMockEcolyoStore } from 'tests/__mocks__/store'
import ProfileTypeFormNumberSelection from './ProfileTypeFormNumberSelection'
-const mockHandlePrevious = jest.fn()
-const mockHandleNext = jest.fn()
-
describe('ProfileTypeFormNumberSelection component', () => {
const store = createMockEcolyoStore()
- it('should be rendered correctly', () => {
- const wrapper = mount(
+ it('should be rendered correctly', async () => {
+ const { container } = render(
<Provider store={store}>
<ProfileTypeFormNumberSelection
step={ProfileTypeStepForm.COOKING_FLUID}
viewedStep={ProfileTypeStepForm.AREA}
currentProfileType={mockProfileType}
answerType={mockProfileTypeAnswers[3]}
- setNextStep={mockHandleNext}
- setPreviousStep={mockHandlePrevious}
+ setNextStep={jest.fn()}
+ setPreviousStep={jest.fn()}
/>
</Provider>
)
- expect(wrapper.find('input')).toBeTruthy()
+ expect(container.getElementsByTagName('input')[0]).toBeInTheDocument()
})
})
diff --git a/src/components/ProfileType/ProfileTypeFormNumberSelection/ProfileTypeFormNumberSelection.tsx b/src/components/ProfileType/ProfileTypeFormNumberSelection/ProfileTypeFormNumberSelection.tsx
index 32b9486bf2cdf3526ee87bccad5a9fe90681dc15..10c5ca18bc0dcebac352cca988340ea10846c788 100644
--- a/src/components/ProfileType/ProfileTypeFormNumberSelection/ProfileTypeFormNumberSelection.tsx
+++ b/src/components/ProfileType/ProfileTypeFormNumberSelection/ProfileTypeFormNumberSelection.tsx
@@ -72,32 +72,37 @@ const ProfileTypeFormNumberSelection = ({
`profile_type.${ProfileTypeStepForm[step].toLowerCase()}.question`
)}
</div>
- {answer !== null ? (
+ {answer != null && (
<div className="number-container">
<Button
- className="btn-profile-number"
onClick={() => decrement()}
disabled={index < 1}
+ classes={{
+ root: 'btnIncrement',
+ label: 'text-36-normal',
+ }}
>
-
</Button>
- <label className="number">
- <input
- type="text"
- value={answer.toString()}
- name={answerType.attribute}
- disabled={true}
- />
- </label>
+ <input
+ type="number"
+ className="inputNumber"
+ value={answer.toString()}
+ name={answerType.attribute}
+ disabled={true}
+ />
<Button
- className="btn-profile-number"
onClick={() => increment()}
disabled={index >= answerType.choices.length - 1}
+ classes={{
+ root: 'btnIncrement',
+ label: 'text-36-normal',
+ }}
>
+
</Button>
</div>
- ) : null}
+ )}
</div>
<FormNavigation
step={step}
diff --git a/src/components/ProfileType/ProfileTypeFormSingleChoice/ProfileTypeFormSingleChoice.spec.tsx b/src/components/ProfileType/ProfileTypeFormSingleChoice/ProfileTypeFormSingleChoice.spec.tsx
index 5ee630d394f4889819d8870ea47a778ba2e02c28..d0b4859c2d33d1493a5537ec5195bd37fe0958ef 100644
--- a/src/components/ProfileType/ProfileTypeFormSingleChoice/ProfileTypeFormSingleChoice.spec.tsx
+++ b/src/components/ProfileType/ProfileTypeFormSingleChoice/ProfileTypeFormSingleChoice.spec.tsx
@@ -1,5 +1,5 @@
+import { render, screen } from '@testing-library/react'
import { ProfileTypeStepForm } from 'enums'
-import { mount } from 'enzyme'
import React from 'react'
import { Provider } from 'react-redux'
import {
@@ -9,25 +9,22 @@ import {
import { createMockEcolyoStore } from 'tests/__mocks__/store'
import ProfileTypeFormSingleChoice from './ProfileTypeFormSingleChoice'
-const mockHandlePrevious = jest.fn()
-const mockHandleNext = jest.fn()
-
describe('ProfileTypeFormSingleChoice component', () => {
const store = createMockEcolyoStore()
it('should be rendered correctly', () => {
- const wrapper = mount(
+ render(
<Provider store={store}>
<ProfileTypeFormSingleChoice
step={ProfileTypeStepForm.COOKING_FLUID}
viewedStep={ProfileTypeStepForm.AREA}
currentProfileType={mockProfileType}
- answerType={mockProfileTypeAnswers[1]}
- setNextStep={mockHandleNext}
- setPreviousStep={mockHandlePrevious}
+ answerType={mockProfileTypeAnswers[3]}
+ setNextStep={jest.fn()}
+ setPreviousStep={jest.fn()}
/>
</Provider>
)
- expect(wrapper.find('input')).toBeTruthy()
+ expect(screen.getAllByRole('radio').length).toBeTruthy()
})
})
diff --git a/src/components/ProfileType/ProfileTypeView.spec.tsx b/src/components/ProfileType/ProfileTypeView.spec.tsx
index a2192fa8995f0b01af52e76805d20169ff381f28..c9bc054f90caf1450ffe2f3b6d9bdea50cd6be8a 100644
--- a/src/components/ProfileType/ProfileTypeView.spec.tsx
+++ b/src/components/ProfileType/ProfileTypeView.spec.tsx
@@ -1,5 +1,5 @@
+import { render } from '@testing-library/react'
import ProfileTypeView from 'components/ProfileType/ProfileTypeView'
-import { mount } from 'enzyme'
import React from 'react'
import { Provider } from 'react-redux'
import { createMockEcolyoStore } from 'tests/__mocks__/store'
@@ -12,14 +12,20 @@ describe('ProfileTypeView component', () => {
const store = createMockEcolyoStore()
it('should be rendered correctly', () => {
- const wrapper = mount(
+ const { container } = render(
<Provider store={store}>
<ProfileTypeView />
</Provider>
)
- expect(wrapper.find('mock-cozybar').exists()).toBeTruthy()
- expect(wrapper.find('mock-header').exists()).toBeTruthy()
- expect(wrapper.find('mock-content').exists()).toBeTruthy()
- expect(wrapper.find('.profile-type-container').exists()).toBeTruthy()
+ expect(
+ container.getElementsByTagName('mock-cozybar')[0]
+ ).toBeInTheDocument()
+ expect(container.getElementsByTagName('mock-header')[0]).toBeInTheDocument()
+ expect(
+ container.getElementsByTagName('mock-content')[0]
+ ).toBeInTheDocument()
+ expect(
+ container.getElementsByClassName('profile-type-container')[0]
+ ).toBeInTheDocument()
})
})
diff --git a/src/components/ProfileType/profileTypeForm.scss b/src/components/ProfileType/profileTypeForm.scss
index 8812beebb8a54ccfd5a1f6103e8208641769cf4e..49f36d4ec7d6cc9e8897c9ee2f3e759f7470045d 100644
--- a/src/components/ProfileType/profileTypeForm.scss
+++ b/src/components/ProfileType/profileTypeForm.scss
@@ -6,25 +6,8 @@
color: $white;
margin: 1rem 1rem 3.5rem;
max-width: 53rem;
- .text,
- .number {
+ .text {
font-size: 1.25rem;
- input {
- margin: 0.5rem;
- background: $dark-light-2;
- color: $white;
- border: 1px solid $gold-shadow;
- max-width: 5rem;
- height: 2.5rem;
- text-align: center;
- &:focus {
- outline: $gold-shadow 1px;
- }
- &:disabled {
- -webkit-text-fill-color: $white;
- opacity: 1;
- }
- }
}
.profile-question-label {
font-weight: bold;
@@ -68,10 +51,6 @@
border-radius: 50%;
background: $dark-background;
position: relative;
-
- // &:focus {
- // outline: none;
- // }
}
}
.checkbox {
@@ -124,24 +103,11 @@
}
.number-container {
display: flex;
- justify-content: left;
align-items: center;
- }
- .btn-profile-number {
- background: $grey-linear-gradient-background;
- background-color: transparent;
- border: none;
- border-radius: 2px;
- width: 2.5rem;
- height: 2.5rem;
- font-size: 2rem;
- color: $white;
- display: flex;
- align-items: center;
- justify-content: center;
- margin: 0.5rem;
- &:disabled {
- color: rgba($color: $white, $alpha: 0.5);
+ gap: 1rem;
+
+ input {
+ border-color: $gold-shadow;
}
}
.date-select {
diff --git a/src/components/ProfileType/profileTypeView.scss b/src/components/ProfileType/profileTypeView.scss
index 188ab4423bbac201cf5203883e34fc1492598800..0a07966b1977394dd46fd3530552a55babc9d6bf 100644
--- a/src/components/ProfileType/profileTypeView.scss
+++ b/src/components/ProfileType/profileTypeView.scss
@@ -5,8 +5,7 @@
flex: 1;
flex-direction: column;
justify-content: space-between;
- label,
- input {
+ label {
cursor: pointer;
}
}
diff --git a/src/components/Quiz/QuizBegin/QuizBegin.spec.tsx b/src/components/Quiz/QuizBegin/QuizBegin.spec.tsx
index 8ad0f7374488588c3031ec8da08b872056d2044c..aa5330b3cc9dc91ec28ac0ec48172a87e6f9e898 100644
--- a/src/components/Quiz/QuizBegin/QuizBegin.spec.tsx
+++ b/src/components/Quiz/QuizBegin/QuizBegin.spec.tsx
@@ -1,7 +1,6 @@
-import Button from '@material-ui/core/Button'
-import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
+import { render, screen } from '@testing-library/react'
+import { userEvent } from '@testing-library/user-event'
import { UserChallengeUpdateFlag } from 'enums'
-import { mount } from 'enzyme'
import React from 'react'
import { Provider } from 'react-redux'
import { createMockEcolyoStore } from 'tests/__mocks__/store'
@@ -16,15 +15,15 @@ jest.mock('services/challenge.service', () => {
})
describe('QuizBegin component', () => {
- it('should be rendered correctly', () => {
+ it('should be rendered correctly', async () => {
const store = createMockEcolyoStore()
- const wrapper = mount(
+ const { container } = render(
<Provider store={store}>
<QuizBegin userChallenge={userChallengeData[0]} />
</Provider>
)
- expect(wrapper.find(StyledIcon).exists()).toBeTruthy()
- wrapper.find('.button-start').find(Button).simulate('click')
+ expect(container.getElementsByClassName('quiz-icon')[0]).toBeInTheDocument()
+ await userEvent.click(screen.getByRole('button'))
expect(mockUserChallengeUpdateFlag).toHaveBeenCalledWith(
userChallengeData[0],
UserChallengeUpdateFlag.QUIZ_START
diff --git a/src/components/Quiz/QuizBegin/QuizBegin.tsx b/src/components/Quiz/QuizBegin/QuizBegin.tsx
index ee0a1bf83a4454f60ea1cee55f830dac1cd50341..a6698e7879213511fb233f48970d71abfd6b9f32 100644
--- a/src/components/Quiz/QuizBegin/QuizBegin.tsx
+++ b/src/components/Quiz/QuizBegin/QuizBegin.tsx
@@ -2,7 +2,7 @@ import Button from '@material-ui/core/Button'
import quizIcon from 'assets/icons/visu/quiz/questionMark.svg'
import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
import StarsContainer from 'components/CommonKit/StarsContainer/StarsContainer'
-import { Client, useClient } from 'cozy-client'
+import { useClient } from 'cozy-client'
import { useI18n } from 'cozy-ui/transpiled/react/I18n'
import { UserChallengeUpdateFlag } from 'enums'
import { UserChallenge } from 'models'
@@ -13,8 +13,8 @@ import { useAppDispatch } from 'store/hooks'
import './quizBegin.scss'
const QuizBegin = ({ userChallenge }: { userChallenge: UserChallenge }) => {
- const client: Client = useClient()
const { t } = useI18n()
+ const client = useClient()
const dispatch = useAppDispatch()
const launchQuiz = async () => {
const challengeService: ChallengeService = new ChallengeService(client)
@@ -42,10 +42,7 @@ const QuizBegin = ({ userChallenge }: { userChallenge: UserChallenge }) => {
<Button
aria-label={t('duel.accessibility.button_start_quiz')}
onClick={launchQuiz}
- classes={{
- root: 'btn-secondary-negative',
- label: 'text-16-normal',
- }}
+ className="btnSecondary"
>
{t('duel.button_start')}
</Button>
diff --git a/src/components/Quiz/QuizBegin/quizBegin.scss b/src/components/Quiz/QuizBegin/quizBegin.scss
index b0a54d51e535066ebacbb35f419a869865e46a7f..5eddf3f6483f1daec741f4e27e6148aef364085e 100644
--- a/src/components/Quiz/QuizBegin/quizBegin.scss
+++ b/src/components/Quiz/QuizBegin/quizBegin.scss
@@ -34,10 +34,6 @@
max-width: 40%;
padding: 0.5rem 1rem 2rem;
}
- .btn-secondary-negative {
- margin-top: auto;
- border-color: $grey-bright;
- }
.quiz-icon-stars {
margin-top: -4rem;
}
diff --git a/src/components/Quiz/QuizExplanationModal/QuizExplanationModal.tsx b/src/components/Quiz/QuizExplanationModal/QuizExplanationModal.tsx
index d1dc630d7c3d2a28ac67b3c0a4f1cf77d7b50b59..928940f0642c7398a5ddd3dbe4b0aa883c5ccd0a 100644
--- a/src/components/Quiz/QuizExplanationModal/QuizExplanationModal.tsx
+++ b/src/components/Quiz/QuizExplanationModal/QuizExplanationModal.tsx
@@ -69,10 +69,7 @@ const QuizExplanationModal = ({
<Button
aria-label={t('quiz.accessibility.button_go_next')}
onClick={goNext}
- classes={{
- root: 'btn-secondary-negative',
- label: 'text-16-normal',
- }}
+ className="btnSecondary"
>
{t('quiz.next')}
</Button>
diff --git a/src/components/Quiz/QuizExplanationModal/quizExplanationModal.scss b/src/components/Quiz/QuizExplanationModal/quizExplanationModal.scss
index d38aa4e603716fd18fc4c824f133d875828af86e..db5c0c84aa30cef78eae7cf6ba389fc23fa7bc9d 100644
--- a/src/components/Quiz/QuizExplanationModal/quizExplanationModal.scss
+++ b/src/components/Quiz/QuizExplanationModal/quizExplanationModal.scss
@@ -24,10 +24,8 @@
margin-bottom: 0.5rem;
}
- button.btn-secondary-negative {
- width: auto;
- padding: 0.5rem 3rem;
- border-color: $grey-bright;
+ button {
+ margin-top: 1rem;
}
}
diff --git a/src/components/Quiz/QuizFinish/QuizFinish.spec.tsx b/src/components/Quiz/QuizFinish/QuizFinish.spec.tsx
index 1329a7fd31bb63acf52a33fa598d40c021b4c2d8..8b2dc272d6852c08babfdb55b386e176f935185d 100644
--- a/src/components/Quiz/QuizFinish/QuizFinish.spec.tsx
+++ b/src/components/Quiz/QuizFinish/QuizFinish.spec.tsx
@@ -1,11 +1,8 @@
-import Button from '@material-ui/core/Button'
-import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
-import { UserChallengeUpdateFlag } from 'enums'
-import { mount } from 'enzyme'
+import { render, screen } from '@testing-library/react'
+import { userEvent } from '@testing-library/user-event'
import React from 'react'
import { Provider } from 'react-redux'
import { createMockEcolyoStore } from 'tests/__mocks__/store'
-import { waitForComponentToPaint } from 'tests/__mocks__/testUtils'
import { userChallengeData } from 'tests/__mocks__/userChallengeData.mock'
import QuizFinish from './QuizFinish'
@@ -25,21 +22,14 @@ jest.mock('react-router-dom', () => ({
describe('QuizFinish', () => {
it('should be rendered correctly', async () => {
const store = createMockEcolyoStore()
- const wrapper = mount(
+ const { container } = render(
<Provider store={store}>
<QuizFinish userChallenge={userChallengeData[0]} />
</Provider>
)
- expect(wrapper.find(StyledIcon).exists()).toBeTruthy()
- wrapper.find(Button).forEach(node => {
- node.simulate('click')
- })
- expect(mockUserChallengeUpdateFlag).toHaveBeenCalledWith(
- userChallengeData[0],
- UserChallengeUpdateFlag.QUIZ_RESET
- )
- await waitForComponentToPaint(wrapper)
-
+ expect(container.getElementsByClassName('quiz-icon')[0]).toBeInTheDocument()
+ await userEvent.click(screen.getAllByRole('button')[0])
+ expect(mockUserChallengeUpdateFlag).toHaveBeenCalled()
expect(mockedNavigate).toHaveBeenCalledWith('/challenges')
})
})
diff --git a/src/components/Quiz/QuizFinish/QuizFinish.tsx b/src/components/Quiz/QuizFinish/QuizFinish.tsx
index 7ffc1162e96772ce6c8703f7a46dc47256a8d2ef..3603c0710a1201c2f4fc0c160a384f8a74833198 100644
--- a/src/components/Quiz/QuizFinish/QuizFinish.tsx
+++ b/src/components/Quiz/QuizFinish/QuizFinish.tsx
@@ -23,21 +23,19 @@ const QuizFinish = ({ userChallenge }: { userChallenge: UserChallenge }) => {
)
const retryQuiz = useCallback(async () => {
- const userChallengeUpdated: UserChallenge =
- await challengeService.updateUserChallenge(
- userChallenge,
- UserChallengeUpdateFlag.QUIZ_RESET
- )
+ const userChallengeUpdated = await challengeService.updateUserChallenge(
+ userChallenge,
+ UserChallengeUpdateFlag.QUIZ_RESET
+ )
dispatch(updateUserChallengeList(userChallengeUpdated))
}, [dispatch, userChallenge, challengeService])
const goBack = async () => {
- const userChallengeUpdated: UserChallenge =
- await challengeService.updateUserChallenge(
- userChallenge,
- UserChallengeUpdateFlag.QUIZ_UPDATE,
- userChallenge.quiz
- )
+ const userChallengeUpdated = await challengeService.updateUserChallenge(
+ userChallenge,
+ UserChallengeUpdateFlag.QUIZ_UPDATE,
+ userChallenge.quiz
+ )
dispatch(updateUserChallengeList(userChallengeUpdated))
navigate('/challenges')
}
@@ -60,10 +58,7 @@ const QuizFinish = ({ userChallenge }: { userChallenge: UserChallenge }) => {
<Button
aria-label={t('quiz.accessibility.button_end_quiz')}
onClick={goBack}
- classes={{
- root: 'btn-secondary-negative',
- label: 'text-16-normal',
- }}
+ className="btnSecondary"
>
{t('quiz.button_end_quiz')}
</Button>
@@ -73,20 +68,14 @@ const QuizFinish = ({ userChallenge }: { userChallenge: UserChallenge }) => {
<Button
aria-label={t('quiz.accessibility.button_go_back')}
onClick={goBack}
- classes={{
- root: 'btn-secondary-negative',
- label: 'text-16-normal',
- }}
+ className="btnSecondary"
>
{t('quiz.button_go_back')}
</Button>
<Button
aria-label={t('quiz.accessibility.button_try_again')}
onClick={retryQuiz}
- classes={{
- root: 'btn-secondary-negative',
- label: 'text-16-normal',
- }}
+ className="btnSecondary"
>
{t('quiz.button_try_again')}
</Button>
diff --git a/src/components/Quiz/QuizFinish/quizFinish.scss b/src/components/Quiz/QuizFinish/quizFinish.scss
index e438ae230ba447a8f7a9c428f5f08af869ba5884..2bc9892c4542c9c0de3840a386611e475403eeab 100644
--- a/src/components/Quiz/QuizFinish/quizFinish.scss
+++ b/src/components/Quiz/QuizFinish/quizFinish.scss
@@ -13,9 +13,6 @@
flex-direction: column;
align-items: center;
- button.btn-secondary-negative {
- border-color: $grey-bright;
- }
.button-start {
margin-top: 3rem;
display: flex;
diff --git a/src/components/Quiz/QuizQuestion/QuizQuestion.spec.tsx b/src/components/Quiz/QuizQuestion/QuizQuestion.spec.tsx
index 1421e6ce31b630dbe81e2859b64ccc84908c5ffa..6abd2f50f97ab01603e316fce1d83ff8ddf201d8 100644
--- a/src/components/Quiz/QuizQuestion/QuizQuestion.spec.tsx
+++ b/src/components/Quiz/QuizQuestion/QuizQuestion.spec.tsx
@@ -1,58 +1,59 @@
-/* eslint-disable react/display-name */
+import { render, waitFor } from '@testing-library/react'
import { UserQuestionState } from 'enums'
-import { mount } from 'enzyme'
import React from 'react'
import { Provider } from 'react-redux'
import { createMockEcolyoStore } from 'tests/__mocks__/store'
import { userChallengeData } from 'tests/__mocks__/userChallengeData.mock'
import QuizQuestion from './QuizQuestion'
-const mockgetCustomQuestion = jest.fn()
jest.mock('services/quiz.service', () => {
return jest.fn(() => {
return {
- getCustomQuestion: mockgetCustomQuestion,
+ getCustomQuestion: jest.fn(),
}
})
})
jest.mock(
'components/Quiz/QuizQuestion/QuizQuestionContentCustom',
- () => () => <div id="QuizQuestionContentCustom" />
+ () => 'mock-customQuestion'
+)
+jest.mock(
+ 'components/Quiz/QuizQuestion/QuizQuestionContent',
+ () => 'mock-question'
)
-jest.mock('components/Quiz/QuizQuestion/QuizQuestionContent', () => () => (
- <div id="quizquestioncontent" />
-))
describe('QuizQuestion component', () => {
const store = createMockEcolyoStore()
- beforeEach(() => {
- store.clearActions()
- })
- it('should be rendered correctly with question', () => {
- const wrapper = mount(
+ it('should be rendered correctly with question', async () => {
+ const { container } = render(
<Provider store={store}>
<QuizQuestion userChallenge={userChallengeData[0]} />
</Provider>
)
- expect(wrapper.find('#quizquestioncontent').exists()).toBeTruthy()
- expect(wrapper.find('#QuizQuestionContentCustom').exists()).toBeFalsy()
+ expect(container.getElementsByTagName('mock-question').length).toBeTruthy()
+ expect(
+ container.getElementsByTagName('mock-customQuestion').length
+ ).toBeFalsy()
})
- it('should be rendered correctly with customQuestion', () => {
+ it('should be rendered correctly with customQuestion', async () => {
const updateUserChallengeData = {
...userChallengeData[0],
}
updateUserChallengeData.quiz.questions.forEach(
answer => (answer.result = UserQuestionState.CORRECT)
)
- const wrapper = mount(
+ const { container } = render(
<Provider store={store}>
<QuizQuestion userChallenge={updateUserChallengeData} />
</Provider>
)
- expect(wrapper.find('#quizquestioncontent').exists()).toBeFalsy()
- expect(wrapper.find('#QuizQuestionContentCustom').exists()).toBeTruthy()
+ await waitFor(() => null, { container })
+ expect(container.getElementsByTagName('mock-question').length).toBeFalsy()
+ expect(
+ container.getElementsByTagName('mock-customQuestion').length
+ ).toBeTruthy()
})
})
diff --git a/src/components/Quiz/QuizQuestion/QuizQuestion.tsx b/src/components/Quiz/QuizQuestion/QuizQuestion.tsx
index f8f13cc7245f9619ecc00e1330021d8edc22e6ae..25ff5662bdd27baa282c522037a2e2178f939c50 100644
--- a/src/components/Quiz/QuizQuestion/QuizQuestion.tsx
+++ b/src/components/Quiz/QuizQuestion/QuizQuestion.tsx
@@ -1,4 +1,4 @@
-import { Client, useClient } from 'cozy-client'
+import { useClient } from 'cozy-client'
import { QuestionEntity, UserChallenge } from 'models'
import React, { useEffect, useState } from 'react'
import { useNavigate } from 'react-router-dom'
@@ -9,6 +9,9 @@ import QuizQuestionContentCustom from './QuizQuestionContentCustom'
import './quizQuestion.scss'
const QuizQuestion = ({ userChallenge }: { userChallenge: UserChallenge }) => {
+ const client = useClient()
+ const { fluidTypes } = useAppSelector(state => state.ecolyo.global)
+ const navigate = useNavigate()
const questionsIsLocked: boolean = userChallenge.quiz.questions.some(
answer => answer.result == 0
)
@@ -18,9 +21,6 @@ const QuizQuestion = ({ userChallenge }: { userChallenge: UserChallenge }) => {
)
const [customQuestionLoading, setCustomQuestionLoading] =
useState<boolean>(false)
- const client: Client = useClient()
- const { fluidTypes } = useAppSelector(state => state.ecolyo.global)
- const navigate = useNavigate()
const goBack = () => {
navigate('/challenges')
diff --git a/src/components/Quiz/QuizQuestion/QuizQuestionContent.spec.tsx b/src/components/Quiz/QuizQuestion/QuizQuestionContent.spec.tsx
index e30abb302c4f9edb801e003c5dcabcebc7335f42..aa80b5f09caa65e5868dab46deb0908ccfcfb541 100644
--- a/src/components/Quiz/QuizQuestion/QuizQuestionContent.spec.tsx
+++ b/src/components/Quiz/QuizQuestion/QuizQuestionContent.spec.tsx
@@ -1,4 +1,5 @@
-import { mount } from 'enzyme'
+import { render, screen } from '@testing-library/react'
+import { userEvent } from '@testing-library/user-event'
import React from 'react'
import { Provider } from 'react-redux'
import { createMockEcolyoStore } from 'tests/__mocks__/store'
@@ -11,24 +12,22 @@ jest.mock('react-router-dom', () => ({
useNavigate: () => mockedNavigate,
}))
-const mockUpdateUserQuiz = jest.fn()
jest.mock('services/quiz.service', () => {
return jest.fn(() => ({
- updateUserQuiz: mockUpdateUserQuiz,
+ updateUserQuiz: jest.fn(),
}))
})
-const mockUserChallengeUpdateFlag = jest.fn()
jest.mock('services/challenge.service', () => {
return jest.fn(() => ({
- updateUserChallenge: mockUserChallengeUpdateFlag,
+ updateUserChallenge: jest.fn(),
}))
})
describe('QuizQuestionContent component', () => {
const store = createMockEcolyoStore()
it('should be rendered correctly', () => {
- const wrapper = mount(
+ render(
<Provider store={store}>
<QuizQuestionContent
userChallenge={userChallengeData[0]}
@@ -37,13 +36,13 @@ describe('QuizQuestionContent component', () => {
/>
</Provider>
)
- expect(wrapper.find('.question').text()).toEqual(
- userChallengeData[0].quiz.questions[0].questionLabel
- )
- expect(wrapper.find('input')).toHaveLength(3)
+ expect(
+ screen.getByText(userChallengeData[0].quiz.questions[0].questionLabel)
+ ).toBeInTheDocument()
+ expect(screen.getAllByRole('radio').length).toBe(3)
})
- it('should redirect to challenge on click on btn-back', () => {
- const wrapper = mount(
+ it('should redirect to challenge on click on btn-back', async () => {
+ render(
<Provider store={store}>
<QuizQuestionContent
userChallenge={userChallengeData[0]}
@@ -52,8 +51,7 @@ describe('QuizQuestionContent component', () => {
/>
</Provider>
)
-
- wrapper.find('.btn-back').first().simulate('click')
+ await userEvent.click(screen.getAllByRole('button')[0])
expect(mockedNavigate).toHaveBeenCalledWith('/challenges')
})
})
diff --git a/src/components/Quiz/QuizQuestion/QuizQuestionContent.tsx b/src/components/Quiz/QuizQuestion/QuizQuestionContent.tsx
index d26f33bdf25806fbd65d662ea7880aefede3d37e..74a8effc665cf8a43225ae16b407d246c21f12fc 100644
--- a/src/components/Quiz/QuizQuestion/QuizQuestionContent.tsx
+++ b/src/components/Quiz/QuizQuestion/QuizQuestionContent.tsx
@@ -2,7 +2,7 @@ import Button from '@material-ui/core/Button'
import CloseIcon from 'assets/icons/ico/close.svg'
import StyledIconButton from 'components/CommonKit/IconButton/StyledIconButton'
import QuizExplanationModal from 'components/Quiz/QuizExplanationModal/QuizExplanationModal'
-import { Client, useClient } from 'cozy-client'
+import { useClient } from 'cozy-client'
import { useI18n } from 'cozy-ui/transpiled/react/I18n'
import { UserChallengeUpdateFlag } from 'enums'
import { Answer, UserChallenge, UserQuiz } from 'models'
@@ -25,7 +25,7 @@ const QuizQuestionContent = ({
goBack,
}: QuizQuestionContent) => {
const { t } = useI18n()
- const client: Client = useClient()
+ const client = useClient()
const dispatch = useAppDispatch()
const questionIndexLocked = userChallenge.quiz.questions.findIndex(
answer => answer.result == 0
@@ -116,10 +116,7 @@ const QuizQuestionContent = ({
aria-label={t('quiz.accessibility.button_validate')}
onClick={validateQuestion}
disabled={!userChoice}
- classes={{
- root: 'btn-secondary-negative',
- label: 'text-16-normal',
- }}
+ className="btnSecondary validate"
>
{t('quiz.button_validate')}
</Button>
diff --git a/src/components/Quiz/QuizQuestion/QuizQuestionContentCustom.spec.tsx b/src/components/Quiz/QuizQuestion/QuizQuestionContentCustom.spec.tsx
index 7c5b860e950deeebbb365a6d46a5c41964ac2064..62b571998ea0bbd8885641513bb09b8996ca701e 100644
--- a/src/components/Quiz/QuizQuestion/QuizQuestionContentCustom.spec.tsx
+++ b/src/components/Quiz/QuizQuestion/QuizQuestionContentCustom.spec.tsx
@@ -1,12 +1,10 @@
-import Button from '@material-ui/core/Button'
-import Loader from 'components/Loader/Loader'
-import { mount } from 'enzyme'
+import { render, screen } from '@testing-library/react'
+import { userEvent } from '@testing-library/user-event'
import React from 'react'
import { Provider } from 'react-redux'
import { questionEntity } from 'tests/__mocks__/quizData.mock'
import { createMockEcolyoStore } from 'tests/__mocks__/store'
import { userChallengeData } from 'tests/__mocks__/userChallengeData.mock'
-import QuizExplanationModal from '../QuizExplanationModal/QuizExplanationModal'
import QuizQuestionContentCustom from './QuizQuestionContentCustom'
const mockHistoryPush = jest.fn()
@@ -18,25 +16,23 @@ jest.mock('react-router-dom', () => ({
}))
const mockUpdateUserQuiz = jest.fn()
-const mockGetCustomQuestion = jest.fn()
jest.mock('services/quiz.service', () => {
return jest.fn(() => ({
updateUserQuiz: mockUpdateUserQuiz,
- getCustomQuestion: mockGetCustomQuestion,
+ getCustomQuestion: jest.fn(),
}))
})
-const mockUserChallengeUpdateFlag = jest.fn()
jest.mock('services/challenge.service', () => {
return jest.fn(() => ({
- updateUserChallenge: mockUserChallengeUpdateFlag,
+ updateUserChallenge: jest.fn(),
}))
})
describe('QuizCustomQuestionContent component', () => {
const store = createMockEcolyoStore()
- it('should be rendered correctly', () => {
- const wrapper = mount(
+ it('should be rendered correctly', async () => {
+ const { container } = render(
<Provider store={store}>
<QuizQuestionContentCustom
userChallenge={userChallengeData[0]}
@@ -46,17 +42,13 @@ describe('QuizCustomQuestionContent component', () => {
/>
</Provider>
)
- wrapper.find('.btn-back').forEach(node => {
- node.simulate('click')
- })
+ await userEvent.click(screen.getAllByRole('button')[0])
expect(mockHistoryPush).toHaveBeenCalledWith('/challenges')
- expect(wrapper.find('.question').text()).toEqual(
- questionEntity.questionLabel
- )
- expect(wrapper.find('input')).toHaveLength(3)
+ expect(screen.getByText(questionEntity.questionLabel)).toBeInTheDocument()
+ expect(screen.getAllByRole('radio').length).toBe(3)
})
it('should be rendered correctly with loader', () => {
- const wrapper = mount(
+ const { container } = render(
<Provider store={store}>
<QuizQuestionContentCustom
userChallenge={userChallengeData[0]}
@@ -66,10 +58,12 @@ describe('QuizCustomQuestionContent component', () => {
/>
</Provider>
)
- expect(wrapper.find(Loader).exists()).toBeTruthy()
+ expect(
+ container.getElementsByClassName('question-loading')[0]
+ ).toBeInTheDocument()
})
- it('should display QuizExplanationModal when click on Button', () => {
- const wrapper = mount(
+ it('should display QuizExplanationModal when click on Button', async () => {
+ const { container } = render(
<Provider store={store}>
<QuizQuestionContentCustom
userChallenge={userChallengeData[0]}
@@ -79,21 +73,12 @@ describe('QuizCustomQuestionContent component', () => {
/>
</Provider>
)
- const answer = questionEntity.answers[0].answerLabel
- wrapper
- .find({ type: 'radio' })
- .at(0)
- .simulate('change', { target: { value: answer } })
-
- expect(wrapper.find(Button).exists()).toBeTruthy()
- wrapper.find('.btn-secondary-negative').forEach(node => {
- node.simulate('click')
- })
+ await userEvent.click(screen.getAllByRole('radio')[0])
+ await userEvent.click(screen.getAllByRole('button')[1])
expect(mockUpdateUserQuiz).toHaveBeenCalledWith(
userChallengeData[0].quiz,
questionEntity.answers[0].isTrue
)
- expect(wrapper.find(QuizExplanationModal).exists()).toBeTruthy()
- expect(wrapper.find(QuizExplanationModal).prop('open')).toBeTruthy()
+ expect(screen.getByRole('dialog')).toBeInTheDocument()
})
})
diff --git a/src/components/Quiz/QuizQuestion/QuizQuestionContentCustom.tsx b/src/components/Quiz/QuizQuestion/QuizQuestionContentCustom.tsx
index dc55ae0a7c5bbf1d27d927f5419f4b26e739b256..92e94e5df2676f65b5b376f3c09e84d1b9b5d00b 100644
--- a/src/components/Quiz/QuizQuestion/QuizQuestionContentCustom.tsx
+++ b/src/components/Quiz/QuizQuestion/QuizQuestionContentCustom.tsx
@@ -3,7 +3,7 @@ import CloseIcon from 'assets/icons/ico/close.svg'
import StyledIconButton from 'components/CommonKit/IconButton/StyledIconButton'
import Loader from 'components/Loader/Loader'
import QuizExplanationModal from 'components/Quiz/QuizExplanationModal/QuizExplanationModal'
-import { Client, useClient } from 'cozy-client'
+import { useClient } from 'cozy-client'
import { useI18n } from 'cozy-ui/transpiled/react/I18n'
import { UsageEventType, UserChallengeUpdateFlag } from 'enums'
import { Answer, QuestionEntity, UserChallenge, UserQuiz } from 'models'
@@ -29,7 +29,7 @@ const QuizQuestionContentCustom = ({
isLoading,
}: QuizQuestionContentCustomProps) => {
const { t } = useI18n()
- const client: Client = useClient()
+ const client = useClient()
const dispatch = useAppDispatch()
const [userChoice, setUserChoice] = useState<string>('')
@@ -129,10 +129,7 @@ const QuizQuestionContentCustom = ({
aria-label={t('quiz.accessibility.button_validate')}
onClick={validateQuestion}
disabled={!userChoice}
- classes={{
- root: 'btn-secondary-negative',
- label: 'text-16-normal',
- }}
+ className="btnSecondary validate"
>
{t('quiz.button_validate')}
</Button>
diff --git a/src/components/Quiz/QuizQuestion/quizQuestion.scss b/src/components/Quiz/QuizQuestion/quizQuestion.scss
index 72faed6cb7909fdd1762eb6d53f0cccdf68806ae..cbab0ba2fc91fcab6fc0c6f47d570947dfd17849 100644
--- a/src/components/Quiz/QuizQuestion/quizQuestion.scss
+++ b/src/components/Quiz/QuizQuestion/quizQuestion.scss
@@ -77,11 +77,12 @@
border-color: $blue-light;
}
}
- button.btn-secondary-negative {
+ button.validate {
+ margin-top: 1rem;
width: auto;
padding: 0.5rem 3rem;
- border-color: $grey-bright;
}
+
.index-question {
margin: 2rem 0 1rem;
}
diff --git a/src/components/Quiz/QuizView.spec.tsx b/src/components/Quiz/QuizView.spec.tsx
index 40f0962f05fc29a234711ced6b822ae0f5f04d95..369072fbc3426ca54c4b8ea65f9960be97f60d8c 100644
--- a/src/components/Quiz/QuizView.spec.tsx
+++ b/src/components/Quiz/QuizView.spec.tsx
@@ -1,15 +1,12 @@
+import { render } from '@testing-library/react'
import QuizView from 'components/Quiz/QuizView'
import { UserQuizState } from 'enums'
-import { mount } from 'enzyme'
import { ChallengeState } from 'models'
import React from 'react'
import { Provider } from 'react-redux'
import { challengeStateData } from 'tests/__mocks__/challengeStateData.mock'
import { createMockEcolyoStore, mockGlobalState } from 'tests/__mocks__/store'
import { userChallengeData } from 'tests/__mocks__/userChallengeData.mock'
-import QuizBegin from './QuizBegin/QuizBegin'
-import QuizFinish from './QuizFinish/QuizFinish'
-import QuizQuestion from './QuizQuestion/QuizQuestion'
jest.mock('components/Header/CozyBar', () => 'mock-cozybar')
jest.mock('components/Header/Header', () => 'mock-header')
@@ -29,12 +26,14 @@ describe('QuizView component', () => {
challenge: updatedChallengeState,
global: mockGlobalState,
})
- const wrapper = mount(
+ const { container } = render(
<Provider store={store}>
<QuizView />
</Provider>
)
- expect(wrapper.find(QuizBegin).exists()).toBeTruthy()
+ expect(
+ container.getElementsByClassName('quiz-begin-container')[0]
+ ).toBeInTheDocument()
})
it('should be rendered with QuizQuestion component when quiz state = ongoing', () => {
@@ -50,12 +49,14 @@ describe('QuizView component', () => {
challenge: updatedChallengeState,
global: mockGlobalState,
})
- const wrapper = mount(
+ const { container } = render(
<Provider store={store}>
<QuizView />
</Provider>
)
- expect(wrapper.find(QuizQuestion).exists()).toBeTruthy()
+ expect(
+ container.getElementsByClassName('question-container')[0]
+ ).toBeInTheDocument()
})
it('should be rendered with QuizFinish component when quiz state = done', () => {
@@ -71,12 +72,14 @@ describe('QuizView component', () => {
challenge: updatedChallengeState,
global: mockGlobalState,
})
- const wrapper = mount(
+ const { container } = render(
<Provider store={store}>
<QuizView />
</Provider>
)
- expect(wrapper.find(QuizFinish).exists()).toBeTruthy()
+ expect(
+ container.getElementsByClassName('quiz-finish-container')[0]
+ ).toBeInTheDocument()
})
it('should be rendered with QuizBegin component when quiz state = null', () => {
@@ -91,11 +94,13 @@ describe('QuizView component', () => {
challenge: updatedChallengeState,
global: mockGlobalState,
})
- const wrapper = mount(
+ const { container } = render(
<Provider store={store}>
<QuizView />
</Provider>
)
- expect(wrapper.find(QuizBegin).exists()).toBeTruthy()
+ expect(
+ container.getElementsByClassName('quiz-begin-container')[0]
+ ).toBeInTheDocument()
})
})
diff --git a/src/components/ReleaseNotesModal/ReleaseNotesModal.scss b/src/components/ReleaseNotesModal/ReleaseNotesModal.scss
index f17f44f76eeb3adfffd53071990a0b848bae921c..a7cad43b9d3726ec25fb41980ae178b59e72237b 100644
--- a/src/components/ReleaseNotesModal/ReleaseNotesModal.scss
+++ b/src/components/ReleaseNotesModal/ReleaseNotesModal.scss
@@ -20,35 +20,6 @@
color: $gold-shadow;
margin-bottom: 2rem;
}
- .release-note-button {
- display: flex;
- justify-content: center;
- margin-top: 2rem;
- button {
- &.btn-highlight,
- &.btn-secondary-positive {
- width: 45%;
- margin-bottom: 0;
- }
- &.btn-secondary-positive {
- padding: 0.5rem 1rem;
- }
- &.btn-highlight {
- padding: 0.25rem 0.5rem;
- }
- }
- @media #{$large-phone} {
- flex-direction: column-reverse;
- button {
- &.btn-highlight,
- &.btn-secondary-positive {
- margin-bottom: 0;
- width: 100%;
- height: 45px;
- }
- }
- }
- }
.release-note-part {
margin-top: 0.5rem;
}
diff --git a/src/components/ReleaseNotesModal/ReleaseNotesModal.tsx b/src/components/ReleaseNotesModal/ReleaseNotesModal.tsx
index 4d6c6988e43844ac20c6209990efd459afce63bd..d6c0ac583c54beb4f24437b35bce4ab8f9a8e3e2 100644
--- a/src/components/ReleaseNotesModal/ReleaseNotesModal.tsx
+++ b/src/components/ReleaseNotesModal/ReleaseNotesModal.tsx
@@ -57,20 +57,15 @@ const ReleaseNotesModal = ({
</div>
))}
</div>
- <div className="release-note-button">
- <Button
- aria-label={t(
- 'consumption_visualizer.release_notes_modal.accessibility.button_go_back'
- )}
- onClick={handleCloseClick}
- classes={{
- root: 'btn-highlight',
- label: 'text-16-bold',
- }}
- >
- {t('consumption_visualizer.release_notes_modal.go_back')}
- </Button>
- </div>
+ <Button
+ aria-label={t(
+ 'consumption_visualizer.release_notes_modal.accessibility.button_go_back'
+ )}
+ onClick={handleCloseClick}
+ className="btnPrimary"
+ >
+ {t('consumption_visualizer.release_notes_modal.go_back')}
+ </Button>
</div>
</div>
</Dialog>
diff --git a/src/components/Splash/SplashRoot.spec.tsx b/src/components/Splash/SplashRoot.spec.tsx
index 55bce081c191a794a3c82d34dafa55c0c344c466..0f27dbc19a450c5a76d97d1045eb8d92d61ab574 100644
--- a/src/components/Splash/SplashRoot.spec.tsx
+++ b/src/components/Splash/SplashRoot.spec.tsx
@@ -1,5 +1,4 @@
-import { mount } from 'enzyme'
-import toJson from 'enzyme-to-json'
+import { render } from '@testing-library/react'
import React from 'react'
import { Provider } from 'react-redux'
import { createMockEcolyoStore } from 'tests/__mocks__/store'
@@ -14,13 +13,12 @@ jest.mock('@sentry/react', () => ({
describe('SplashRoot component', () => {
it('should be rendered correctly', async () => {
const store = createMockEcolyoStore()
- const component = mount(
+ const { container } = render(
<Provider store={store}>
<SplashRoot>children</SplashRoot>
</Provider>
)
- // TODO we should waitForComponent
- // await waitForComponentToPaint(component)
- expect(toJson(component)).toMatchSnapshot()
+
+ expect(container).toMatchSnapshot()
})
})
diff --git a/src/components/Splash/SplashRoot.tsx b/src/components/Splash/SplashRoot.tsx
index 49d280d3116c663c49bf5d8c2fe2e2c70041ed9c..5084ce80f6fe7c35724b079f97dee58d16cefd8e 100644
--- a/src/components/Splash/SplashRoot.tsx
+++ b/src/components/Splash/SplashRoot.tsx
@@ -37,7 +37,6 @@ import {
setUserChallengeList,
updateUserChallengeList,
} from 'store/challenge/challenge.slice'
-import { setSelectedDate } from 'store/chart/chart.slice'
import {
setFluidStatus,
showReleaseNotes,
@@ -98,9 +97,8 @@ const SplashRoot = ({ fadeTimer = 1000, children }: SplashRootProps) => {
async (profile: Profile, partnersInfo: PartnersInfo) => {
if (partnersInfo.notification_activated && !profile?.isFirstConnection) {
const fluidService = new FluidService(client)
- const _updatedFluidStatus = await fluidService.getFluidStatus(
- partnersInfo
- )
+ const _updatedFluidStatus =
+ await fluidService.getFluidStatus(partnersInfo)
dispatch(setFluidStatus(_updatedFluidStatus))
}
},
@@ -163,9 +161,8 @@ const SplashRoot = ({ fadeTimer = 1000, children }: SplashRootProps) => {
const loadProfileType = useCallback(
async (profileType: ProfileType) => {
const profileTypeEntityService = new ProfileTypeEntityService(client)
- const updatedProfileType = await profileTypeEntityService.saveProfileType(
- profileType
- )
+ const updatedProfileType =
+ await profileTypeEntityService.saveProfileType(profileType)
if (updatedProfileType) {
dispatch(setProfileType(updatedProfileType))
}
@@ -258,16 +255,12 @@ const SplashRoot = ({ fadeTimer = 1000, children }: SplashRootProps) => {
const fluidStatus = await initializationService.initFluidStatus()
if (subscribed) {
dispatch(setFluidStatus(fluidStatus))
- const refDate = DateTime.fromISO('0001-01-01')
let lastDataDate: DateTime | null = DateTime.fromISO('0001-01-01')
for (const fluid of fluidStatus) {
if (fluid.lastDataDate && fluid.lastDataDate > lastDataDate) {
lastDataDate = fluid.lastDataDate
}
}
- if (lastDataDate > refDate) {
- dispatch(setSelectedDate(lastDataDate))
- }
}
// Init Challenge
const userChallengeList =
diff --git a/src/components/Splash/SplashScreen.spec.tsx b/src/components/Splash/SplashScreen.spec.tsx
index 2277171e630a2a725a43747ee81bd56cadb6384b..a8c692fbc40679130cd74dfd6eb681e79e4f67ed 100644
--- a/src/components/Splash/SplashScreen.spec.tsx
+++ b/src/components/Splash/SplashScreen.spec.tsx
@@ -1,12 +1,11 @@
-import { mount } from 'enzyme'
-import toJson from 'enzyme-to-json'
+import { render } from '@testing-library/react'
import { InitSteps } from 'models/initialisationSteps.model'
import React from 'react'
import SplashScreen from './SplashScreen'
describe('SplashScreen component', () => {
it('should be rendered correctly', () => {
- const component = mount(<SplashScreen initStep={InitSteps.CONSENT} />)
- expect(toJson(component)).toMatchSnapshot()
+ const { container } = render(<SplashScreen initStep={InitSteps.CONSENT} />)
+ expect(container).toMatchSnapshot()
})
})
diff --git a/src/components/Splash/SplashScreen.tsx b/src/components/Splash/SplashScreen.tsx
index 6b71828829fa2a0fc85950a92fe5cb4ee53eed22..8a23eaa2b89f00dd3b71e7e6adb902c8fb441e91 100644
--- a/src/components/Splash/SplashScreen.tsx
+++ b/src/components/Splash/SplashScreen.tsx
@@ -13,28 +13,26 @@ const SplashScreen = ({ initStep }: { initStep: InitSteps }) => {
return progress - 90 /* hack to make the progress bar start way left */
}
return (
- <>
- <div className="splash-content">
- <div className="splash-loader">
- <img src={logoLoading} alt="Chargement" />
- <span>Ecolyo</span>
- <div className="splash-progress">
- <div className="splash-progress-bar-container">
- <div
- className="splash-progress-bar-content"
- style={{ left: `${getProgress()}%` }}
- />
- </div>
+ <div className="splash-content">
+ <div className="splash-loader">
+ <img src={logoLoading} alt="Chargement" />
+ <span>Ecolyo</span>
+ <div className="splash-progress">
+ <div className="splash-progress-bar-container">
+ <div
+ className="splash-progress-bar-content"
+ style={{ left: `${getProgress()}%` }}
+ />
</div>
</div>
- <div className="step-label text-18-normal">
- {t(`splashscreen.step.${initStep}`)}
- </div>
- <div className="splash-logos-container">
- <img src={logos} alt="ensemble de logos" />
- </div>
</div>
- </>
+ <div className="step-label text-18-normal">
+ {t(`splashscreen.step.${initStep}`)}
+ </div>
+ <div className="splash-logos-container">
+ <img src={logos} alt="ensemble de logos" />
+ </div>
+ </div>
)
}
diff --git a/src/components/Splash/SplashScreenError.spec.tsx b/src/components/Splash/SplashScreenError.spec.tsx
index 2f3837093ea572132a209200d5be30813769565e..fdc4e5fa594aaaf15732ef0aee420bf1b119dc23 100644
--- a/src/components/Splash/SplashScreenError.spec.tsx
+++ b/src/components/Splash/SplashScreenError.spec.tsx
@@ -1,6 +1,5 @@
-import Button from '@material-ui/core/Button'
-import { mount } from 'enzyme'
-import toJson from 'enzyme-to-json'
+import { render, screen } from '@testing-library/react'
+import { userEvent } from '@testing-library/user-event'
import { InitStepsErrors } from 'models/initialisationSteps.model'
import React from 'react'
import SplashScreenError from './SplashScreenError'
@@ -18,16 +17,14 @@ describe('SplashScreenError component', () => {
window.location.reload = reload
})
it('should be rendered correctly', () => {
- const component = mount(
+ const { container } = render(
<SplashScreenError error={InitStepsErrors.CONSENT_ERROR} />
)
- expect(toJson(component)).toMatchSnapshot()
+ expect(container).toMatchSnapshot()
})
- it('should reload the page', () => {
- const component = mount(
- <SplashScreenError error={InitStepsErrors.CONSENT_ERROR} />
- )
- component.find(Button).first().simulate('click')
+ it('should reload the page', async () => {
+ render(<SplashScreenError error={InitStepsErrors.CONSENT_ERROR} />)
+ await userEvent.click(screen.getByRole('button'))
expect(window.location.reload).toHaveBeenCalled()
})
})
diff --git a/src/components/Splash/SplashScreenError.tsx b/src/components/Splash/SplashScreenError.tsx
index 1ebaaac2abd87d83b4931eb31503ee1bdd802010..eaec77ac5e95732a1ab252a0ec5bd05ae03130fa 100644
--- a/src/components/Splash/SplashScreenError.tsx
+++ b/src/components/Splash/SplashScreenError.tsx
@@ -25,12 +25,8 @@ const SplashScreenError = ({ error }: { error: InitStepsErrors }) => {
<div className="splash-footer">
<Button
aria-label={t('splashscreen.accessibility.button_reload')}
- className="splash-footer-button"
+ className="btnPrimary splash-footer-button"
onClick={() => window.location.reload()}
- classes={{
- root: 'btn-highlight',
- label: 'text-16-bold',
- }}
>
{t('splashscreen.button_reload')}
</Button>
diff --git a/src/components/Splash/__snapshots__/SplashRoot.spec.tsx.snap b/src/components/Splash/__snapshots__/SplashRoot.spec.tsx.snap
index e08db15efcfc96775a4cb572766f96015ae5e8b5..b0bdc3fbd8f3fbb61a55b0fb16254858ed550f59 100644
--- a/src/components/Splash/__snapshots__/SplashRoot.spec.tsx.snap
+++ b/src/components/Splash/__snapshots__/SplashRoot.spec.tsx.snap
@@ -1,76 +1,51 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`SplashRoot component should be rendered correctly 1`] = `
-<Provider
- store={
- Object {
- "clearActions": [Function],
- "dispatch": [Function],
- "getActions": [Function],
- "getState": [Function],
- "replaceReducer": [Function],
- "subscribe": [Function],
- }
- }
->
- <SplashRoot>
+<div>
+ <div
+ class="splash-root"
+ style="transition-duration: 1s;"
+ >
<div
- className="splash-root"
- style={
- Object {
- "transitionDuration": "1s",
- }
- }
+ class="splash-content"
>
- <SplashScreen
- initStep={1}
+ <div
+ class="splash-loader"
>
+ <img
+ alt="Chargement"
+ src="test-file-stub"
+ />
+ <span>
+ Ecolyo
+ </span>
<div
- className="splash-content"
+ class="splash-progress"
>
<div
- className="splash-loader"
+ class="splash-progress-bar-container"
>
- <img
- alt="Chargement"
- src="test-file-stub"
- />
- <span>
- Ecolyo
- </span>
<div
- className="splash-progress"
- >
- <div
- className="splash-progress-bar-container"
- >
- <div
- className="splash-progress-bar-content"
- style={
- Object {
- "left": "-73%",
- }
- }
- />
- </div>
- </div>
- </div>
- <div
- className="step-label text-18-normal"
- >
- splashscreen.step.1
- </div>
- <div
- className="splash-logos-container"
- >
- <img
- alt="ensemble de logos"
- src="test-file-stub"
+ class="splash-progress-bar-content"
+ style="left: -73%;"
/>
</div>
</div>
- </SplashScreen>
+ </div>
+ <div
+ class="step-label text-18-normal"
+ >
+ splashscreen.step.1
+ </div>
+ <div
+ class="splash-logos-container"
+ >
+ <img
+ alt="ensemble de logos"
+ src="test-file-stub"
+ />
+ </div>
</div>
- </SplashRoot>
-</Provider>
+ </div>
+</div>
`;
diff --git a/src/components/Splash/__snapshots__/SplashScreen.spec.tsx.snap b/src/components/Splash/__snapshots__/SplashScreen.spec.tsx.snap
index 089fbbee784a09ee4bde93983143a772877d50d4..ac994b7876cf9d83b80f0744e268852520b9c52b 100644
--- a/src/components/Splash/__snapshots__/SplashScreen.spec.tsx.snap
+++ b/src/components/Splash/__snapshots__/SplashScreen.spec.tsx.snap
@@ -1,14 +1,12 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`SplashScreen component should be rendered correctly 1`] = `
-<SplashScreen
- initStep={1}
->
+<div>
<div
- className="splash-content"
+ class="splash-content"
>
<div
- className="splash-loader"
+ class="splash-loader"
>
<img
alt="Chargement"
@@ -18,29 +16,25 @@ exports[`SplashScreen component should be rendered correctly 1`] = `
Ecolyo
</span>
<div
- className="splash-progress"
+ class="splash-progress"
>
<div
- className="splash-progress-bar-container"
+ class="splash-progress-bar-container"
>
<div
- className="splash-progress-bar-content"
- style={
- Object {
- "left": "-73%",
- }
- }
+ class="splash-progress-bar-content"
+ style="left: -73%;"
/>
</div>
</div>
</div>
<div
- className="step-label text-18-normal"
+ class="step-label text-18-normal"
>
splashscreen.step.1
</div>
<div
- className="splash-logos-container"
+ class="splash-logos-container"
>
<img
alt="ensemble de logos"
@@ -48,5 +42,5 @@ exports[`SplashScreen component should be rendered correctly 1`] = `
/>
</div>
</div>
-</SplashScreen>
+</div>
`;
diff --git a/src/components/Splash/__snapshots__/SplashScreenError.spec.tsx.snap b/src/components/Splash/__snapshots__/SplashScreenError.spec.tsx.snap
index 6d44191383bb9b2f569f87cefeb07095ba298227..d3da35f446a95fc41b62bc79dac78848a1b8d428 100644
--- a/src/components/Splash/__snapshots__/SplashScreenError.spec.tsx.snap
+++ b/src/components/Splash/__snapshots__/SplashScreenError.spec.tsx.snap
@@ -1,199 +1,56 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`SplashScreenError component should be rendered correctly 1`] = `
-<SplashScreenError
- error="consent_error"
->
+<div>
<div
- className="splash-content"
+ class="splash-content"
>
<div
- className="splash-loader"
+ class="splash-loader"
>
- <StyledIcon
- className="error"
- icon="test-file-stub"
- size={130}
+ <svg
+ aria-hidden="true"
+ class="error styles__icon___23x3R"
+ height="130"
+ width="130"
>
- <Icon
- aria-hidden={true}
- className="error"
- icon="test-file-stub"
- size={130}
- spin={false}
- >
- <Component
- aria-hidden={true}
- className="error styles__icon___23x3R"
- height={130}
- style={Object {}}
- width={130}
- >
- <svg
- aria-hidden={true}
- className="error styles__icon___23x3R"
- height={130}
- style={Object {}}
- width={130}
- >
- <use
- xlinkHref="#test-file-stub"
- />
- </svg>
- </Component>
- </Icon>
- </StyledIcon>
+ <use
+ xlink:href="#test-file-stub"
+ />
+ </svg>
<span>
Ecolyo
</span>
<div
- className="splash-error-text text-20-bold"
+ class="splash-error-text text-20-bold"
>
splashscreen.error_loading
</div>
<div
- className="splash-error-text text-18-normal"
+ class="splash-error-text text-18-normal"
>
splashscreen.consent_error
</div>
</div>
</div>
<div
- className="splash-footer"
+ class="splash-footer"
>
- <WithStyles(ForwardRef(Button))
+ <button
aria-label="splashscreen.accessibility.button_reload"
- className="splash-footer-button"
- classes={
- Object {
- "label": "text-16-bold",
- "root": "btn-highlight",
- }
- }
- onClick={[Function]}
+ class="MuiButtonBase-root MuiButton-root MuiButton-text btnPrimary splash-footer-button"
+ tabindex="0"
+ type="button"
>
- <ForwardRef(Button)
- aria-label="splashscreen.accessibility.button_reload"
- className="splash-footer-button"
- classes={
- Object {
- "colorInherit": "MuiButton-colorInherit",
- "contained": "MuiButton-contained",
- "containedPrimary": "MuiButton-containedPrimary",
- "containedSecondary": "MuiButton-containedSecondary",
- "containedSizeLarge": "MuiButton-containedSizeLarge",
- "containedSizeSmall": "MuiButton-containedSizeSmall",
- "disableElevation": "MuiButton-disableElevation",
- "disabled": "Mui-disabled",
- "endIcon": "MuiButton-endIcon",
- "focusVisible": "Mui-focusVisible",
- "fullWidth": "MuiButton-fullWidth",
- "iconSizeLarge": "MuiButton-iconSizeLarge",
- "iconSizeMedium": "MuiButton-iconSizeMedium",
- "iconSizeSmall": "MuiButton-iconSizeSmall",
- "label": "MuiButton-label text-16-bold",
- "outlined": "MuiButton-outlined",
- "outlinedPrimary": "MuiButton-outlinedPrimary",
- "outlinedSecondary": "MuiButton-outlinedSecondary",
- "outlinedSizeLarge": "MuiButton-outlinedSizeLarge",
- "outlinedSizeSmall": "MuiButton-outlinedSizeSmall",
- "root": "MuiButton-root btn-highlight",
- "sizeLarge": "MuiButton-sizeLarge",
- "sizeSmall": "MuiButton-sizeSmall",
- "startIcon": "MuiButton-startIcon",
- "text": "MuiButton-text",
- "textPrimary": "MuiButton-textPrimary",
- "textSecondary": "MuiButton-textSecondary",
- "textSizeLarge": "MuiButton-textSizeLarge",
- "textSizeSmall": "MuiButton-textSizeSmall",
- }
- }
- onClick={[Function]}
+ <span
+ class="MuiButton-label"
>
- <WithStyles(ForwardRef(ButtonBase))
- aria-label="splashscreen.accessibility.button_reload"
- className="MuiButton-root btn-highlight MuiButton-text splash-footer-button"
- component="button"
- disabled={false}
- focusRipple={true}
- focusVisibleClassName="Mui-focusVisible"
- onClick={[Function]}
- type="button"
- >
- <ForwardRef(ButtonBase)
- aria-label="splashscreen.accessibility.button_reload"
- className="MuiButton-root btn-highlight MuiButton-text splash-footer-button"
- classes={
- Object {
- "disabled": "Mui-disabled",
- "focusVisible": "Mui-focusVisible",
- "root": "MuiButtonBase-root",
- }
- }
- component="button"
- disabled={false}
- focusRipple={true}
- focusVisibleClassName="Mui-focusVisible"
- onClick={[Function]}
- type="button"
- >
- <button
- aria-label="splashscreen.accessibility.button_reload"
- className="MuiButtonBase-root MuiButton-root btn-highlight MuiButton-text splash-footer-button"
- disabled={false}
- onBlur={[Function]}
- onClick={[Function]}
- onDragLeave={[Function]}
- onFocus={[Function]}
- onKeyDown={[Function]}
- onKeyUp={[Function]}
- onMouseDown={[Function]}
- onMouseLeave={[Function]}
- onMouseUp={[Function]}
- onTouchEnd={[Function]}
- onTouchMove={[Function]}
- onTouchStart={[Function]}
- tabIndex={0}
- type="button"
- >
- <span
- className="MuiButton-label text-16-bold"
- >
- splashscreen.button_reload
- </span>
- <WithStyles(memo)
- center={false}
- >
- <ForwardRef(TouchRipple)
- center={false}
- classes={
- Object {
- "child": "MuiTouchRipple-child",
- "childLeaving": "MuiTouchRipple-childLeaving",
- "childPulsate": "MuiTouchRipple-childPulsate",
- "ripple": "MuiTouchRipple-ripple",
- "ripplePulsate": "MuiTouchRipple-ripplePulsate",
- "rippleVisible": "MuiTouchRipple-rippleVisible",
- "root": "MuiTouchRipple-root",
- }
- }
- >
- <span
- className="MuiTouchRipple-root"
- >
- <TransitionGroup
- childFactory={[Function]}
- component={null}
- exit={true}
- />
- </span>
- </ForwardRef(TouchRipple)>
- </WithStyles(memo)>
- </button>
- </ForwardRef(ButtonBase)>
- </WithStyles(ForwardRef(ButtonBase))>
- </ForwardRef(Button)>
- </WithStyles(ForwardRef(Button))>
+ splashscreen.button_reload
+ </span>
+ <span
+ class="MuiTouchRipple-root"
+ />
+ </button>
</div>
-</SplashScreenError>
+</div>
`;
diff --git a/src/components/Splash/splashScreen.scss b/src/components/Splash/splashScreen.scss
index a9456aaec07796c2dec991e2684ce719d7c0fafa..fa2c9eb4dd6c684ea138d4de95e89e69716b84a2 100644
--- a/src/components/Splash/splashScreen.scss
+++ b/src/components/Splash/splashScreen.scss
@@ -53,11 +53,8 @@
justify-content: flex-start;
height: 10rem;
- button.btn-highlight {
+ button {
max-width: 230px;
- width: 100%;
- margin: 0.5rem 0 0;
- height: 40px;
}
}
.splash-progress {
diff --git a/src/components/Terms/CGUModal.spec.tsx b/src/components/Terms/CGUModal.spec.tsx
index 8e54916bc82c6fc57c15e19143b5445b98707f21..12f008ce0bf8e2ba5fe63720411c9b34b42be720 100644
--- a/src/components/Terms/CGUModal.spec.tsx
+++ b/src/components/Terms/CGUModal.spec.tsx
@@ -1,13 +1,12 @@
-import { mount } from 'enzyme'
-import toJson from 'enzyme-to-json'
+import { render } from '@testing-library/react'
import React from 'react'
import CGUModal from './CGUModal'
describe('CGUModal component', () => {
it('should be rendered correctly', () => {
- const component = mount(
+ const { baseElement } = render(
<CGUModal open={true} handleCloseClick={jest.fn()} />
)
- expect(toJson(component)).toMatchSnapshot()
+ expect(baseElement).toMatchSnapshot()
})
})
diff --git a/src/components/Terms/CGUModal.tsx b/src/components/Terms/CGUModal.tsx
index ea7517d8025bcc0f93dbee0a6b76bea8845f498c..a5ae234d15802ee66227cec1f37ce71bed6d6084 100644
--- a/src/components/Terms/CGUModal.tsx
+++ b/src/components/Terms/CGUModal.tsx
@@ -37,11 +37,7 @@ const CGUModal = ({ open, handleCloseClick }: CGUModalProps) => {
<Button
aria-label={t('gcu_modal.accessibility.button_accept')}
onClick={handleCloseClick}
- className="gcu-modal-button"
- classes={{
- root: 'btn-profile-next rounded',
- label: 'text-16-bold',
- }}
+ className="btnPrimary"
>
{t('legal.accessibility.button_close')}
</Button>
diff --git a/src/components/Terms/DataShareConsentContent.spec.tsx b/src/components/Terms/DataShareConsentContent.spec.tsx
index e2653b92ad8d0b25428984fbb73461a13912c05b..d2e1baab73a768707a7f3ebd2a12facf01663965 100644
--- a/src/components/Terms/DataShareConsentContent.spec.tsx
+++ b/src/components/Terms/DataShareConsentContent.spec.tsx
@@ -1,5 +1,4 @@
-import { mount } from 'enzyme'
-import toJson from 'enzyme-to-json'
+import { render } from '@testing-library/react'
import React from 'react'
import { Provider } from 'react-redux'
import { createMockEcolyoStore } from 'tests/__mocks__/store'
@@ -10,22 +9,22 @@ describe('DataShareConsentContent component', () => {
const store = createMockEcolyoStore({
profile: { isFirstConnection: true },
})
- const component = mount(
+ const { container } = render(
<Provider store={store}>
<DataShareConsentContent />
</Provider>
)
- expect(toJson(component)).toMatchSnapshot()
+ expect(container).toMatchSnapshot()
})
it('should be rendered correctly without first connexion text', () => {
const store = createMockEcolyoStore({
profile: { isFirstConnection: false },
})
- const component = mount(
+ const { container } = render(
<Provider store={store}>
<DataShareConsentContent />
</Provider>
)
- expect(toJson(component)).toMatchSnapshot()
+ expect(container).toMatchSnapshot()
})
})
diff --git a/src/components/Terms/LegalNoticeModal.spec.tsx b/src/components/Terms/LegalNoticeModal.spec.tsx
index 1c8144711c383bebe7ab3f60a0cea09f67986d5f..227d9c68eeff921e7e8972c229f40e4bb5dbb07e 100644
--- a/src/components/Terms/LegalNoticeModal.spec.tsx
+++ b/src/components/Terms/LegalNoticeModal.spec.tsx
@@ -1,13 +1,12 @@
-import { mount } from 'enzyme'
-import toJson from 'enzyme-to-json'
+import { render } from '@testing-library/react'
import React from 'react'
import LegalNoticeModal from './LegalNoticeModal'
describe('LegalNoticeModal component', () => {
it('should be rendered correctly', () => {
- const component = mount(
+ const { baseElement } = render(
<LegalNoticeModal open={true} handleCloseClick={jest.fn()} />
)
- expect(toJson(component)).toMatchSnapshot()
+ expect(baseElement).toMatchSnapshot()
})
})
diff --git a/src/components/Terms/LegalNoticeModal.tsx b/src/components/Terms/LegalNoticeModal.tsx
index 79247af0ec8d3289202f78cb47d741d03d8c29f1..1dce2e13d0b262d18aacfd5b4e31e2f6a9044425 100644
--- a/src/components/Terms/LegalNoticeModal.tsx
+++ b/src/components/Terms/LegalNoticeModal.tsx
@@ -39,11 +39,7 @@ const LegalNoticeModal = ({
<Button
aria-label={t('gcu_modal.accessibility.button_accept')}
onClick={handleCloseClick}
- className="gcu-modal-button"
- classes={{
- root: 'btn-profile-next rounded',
- label: 'text-16-bold',
- }}
+ className="btnPrimary"
>
{t('legal.accessibility.button_close')}
</Button>
diff --git a/src/components/Terms/MinorUpdateContent.spec.tsx b/src/components/Terms/MinorUpdateContent.spec.tsx
index 01cc232537a5da4339ab3337eeb4541942cfac08..f6552d6cbb29346e44e99a9f305060375c91c26f 100644
--- a/src/components/Terms/MinorUpdateContent.spec.tsx
+++ b/src/components/Terms/MinorUpdateContent.spec.tsx
@@ -1,11 +1,10 @@
-import { mount } from 'enzyme'
-import toJson from 'enzyme-to-json'
+import { render } from '@testing-library/react'
import React from 'react'
import MinorUpdateContent from './MinorUpdateContent'
describe('Minor update content component', () => {
it('should be rendered correctly', () => {
- const component = mount(<MinorUpdateContent />)
- expect(toJson(component)).toMatchSnapshot()
+ const { container } = render(<MinorUpdateContent />)
+ expect(container).toMatchSnapshot()
})
})
diff --git a/src/components/Terms/TermsView.spec.tsx b/src/components/Terms/TermsView.spec.tsx
index f615514e3d753f11560337e1c47e5bffe8d63fd6..d5206d463f413f6f989b0453f49dc707c5a8e390 100644
--- a/src/components/Terms/TermsView.spec.tsx
+++ b/src/components/Terms/TermsView.spec.tsx
@@ -1,6 +1,5 @@
-import { Button } from '@material-ui/core'
-import { mount } from 'enzyme'
-import toJson from 'enzyme-to-json'
+import { render, screen } from '@testing-library/react'
+import { userEvent } from '@testing-library/user-event'
import React from 'react'
import { Provider } from 'react-redux'
import * as storeHooks from 'store/hooks'
@@ -9,11 +8,10 @@ import { mockUpToDateTerm } from 'tests/__mocks__/termsData.mock'
import TermsView from './TermsView'
const mockCreateTerm = jest.fn()
-const mockGetTermsVersionType = jest.fn()
jest.mock('services/terms.service', () => {
return jest.fn(() => ({
createTerm: mockCreateTerm,
- getTermsVersionType: mockGetTermsVersionType,
+ getTermsVersionType: jest.fn(),
}))
})
@@ -28,46 +26,36 @@ jest.mock('services/profile.service', () => {
describe('TermsView component', () => {
const store = createMockEcolyoStore()
- it('should valid checkboxes and valid consent', () => {
- mockCreateTerm.mockResolvedValueOnce(mockUpToDateTerm)
- const wrapper = mount(
- <Provider store={store}>
- <TermsView />
- </Provider>
- )
- wrapper
- .find('input')
- .at(0)
- .simulate('change', { target: { checked: true } })
- expect(wrapper.find('input').at(0).props().checked).toEqual(true)
- wrapper
- .find('input')
- .at(1)
- .simulate('change', { target: { checked: true } })
- expect(wrapper.find('input').at(1).props().checked).toEqual(true)
- expect(wrapper.find(Button).first().hasClass('disabled')).toBeFalsy()
- wrapper.find(Button).first().simulate('click')
- expect(mockAppDispatch).toHaveBeenCalledTimes(3)
+ beforeEach(() => {
+ jest.clearAllMocks()
})
+
it('should be rendered correctly', () => {
- const component = mount(
+ const { container } = render(
<Provider store={store}>
<TermsView />
</Provider>
)
- expect(toJson(component)).toMatchSnapshot()
+ expect(container).toMatchSnapshot()
})
- it('should be unable to valid consent', async () => {
+ it('should be unable to click "validate" button first then enable checkboxes and valid consent', async () => {
mockCreateTerm.mockResolvedValueOnce(mockUpToDateTerm)
- const wrapper = mount(
+ render(
<Provider store={store}>
<TermsView />
</Provider>
)
- wrapper.find(Button).first().simulate('click')
- expect(wrapper.find(Button).first().hasClass('disabled')).toBeTruthy()
+ const acceptButton = screen.getAllByRole('button')[2]
+ expect(acceptButton).toBeDisabled()
expect(mockUpdateProfile).toHaveBeenCalledTimes(0)
+
+ const [boxGCU, boxLegal] = screen.getAllByRole('checkbox')
+ await userEvent.click(boxGCU)
+ await userEvent.click(boxLegal)
+ await userEvent.click(acceptButton)
+
+ expect(mockAppDispatch).toHaveBeenCalledTimes(3)
})
})
diff --git a/src/components/Terms/TermsView.tsx b/src/components/Terms/TermsView.tsx
index 728aa5ec018aa2a8e42c940f60c911f65b6681f3..60c43630fc15d3c3c86ad8bd93c39da0da48ad09 100644
--- a/src/components/Terms/TermsView.tsx
+++ b/src/components/Terms/TermsView.tsx
@@ -1,5 +1,4 @@
import { Button } from '@material-ui/core'
-import classNames from 'classnames'
import { useClient } from 'cozy-client'
import { useI18n } from 'cozy-ui/transpiled/react/I18n'
import React, { useCallback, useState } from 'react'
@@ -62,47 +61,44 @@ const TermsView = () => {
<>
<div className="terms-content">
<DataShareConsentContent />
- <label
- className={classNames('checkbox', {
- ['answer-checked']: dataConsentValidation,
- })}
- >
+ <label className="inline">
<input
type="checkbox"
name="Data-consent-validation"
+ className="inputCheckbox"
onChange={handleDataConsentValidation}
checked={dataConsentValidation}
/>
{t('dataShare.validDataConsent')}
</label>
- <label
- className={classNames('checkbox', {
- ['answer-checked']: GCUValidation,
- })}
- >
+ <label className="inline">
<input
+ id="gcu"
type="checkbox"
name="GCU-validation"
+ className="inputCheckbox"
onChange={handleGCUValidate}
checked={GCUValidation}
/>
<div>
- <span
- onClick={e => {
- e.preventDefault()
- toggleCGUModal()
- }}
- dangerouslySetInnerHTML={{ __html: t('dataShare.validCGU') }}
- />
- <span
- onClick={e => {
- e.preventDefault()
- toggleLegalNoticeModal()
- }}
- dangerouslySetInnerHTML={{
- __html: t('dataShare.validLegal'),
- }}
- />
+ <span>{t('dataShare.validCGU')}</span>
+ <Button
+ size="small"
+ className="btnText"
+ onClick={toggleCGUModal}
+ >
+ {t('dataShare.validCGU_button')}
+ </Button>
+
+ <span>{t('dataShare.validLegal')}</span>
+ <Button
+ size="small"
+ className="btnText"
+ onClick={toggleLegalNoticeModal}
+ >
+ {t('dataShare.validLegal_button')}
+ </Button>
+ <span>{t('dataShare.validLegal2')}</span>
</div>
</label>
</div>
@@ -110,14 +106,8 @@ const TermsView = () => {
<Button
aria-label={t('dataShare.accessibility.button_accept')}
onClick={handleTermValidate}
- className={classNames('gcu-modal-button', {
- ['disabled']: !GCUValidation || !dataConsentValidation,
- })}
disabled={!GCUValidation || !dataConsentValidation}
- classes={{
- root: 'btn-profile-next rounded',
- label: 'text-16-bold',
- }}
+ className="btnPrimary"
>
{t('dataShare.button_accept')}
</Button>
@@ -132,11 +122,7 @@ const TermsView = () => {
<Button
aria-label={t('minorUpdate.button')}
onClick={handleTermValidate}
- className="gcu-modal-button"
- classes={{
- root: 'btn-profile-next rounded',
- label: 'text-16-bold',
- }}
+ className="btnPrimary"
>
{t('minorUpdate.button')}
</Button>
diff --git a/src/components/Terms/__snapshots__/CGUModal.spec.tsx.snap b/src/components/Terms/__snapshots__/CGUModal.spec.tsx.snap
index 640e034ecfb9141db9aa27c259b0e319b3ea84e9..a2fff83b060e8eb574459d9e44ff77973dadaa83 100644
--- a/src/components/Terms/__snapshots__/CGUModal.spec.tsx.snap
+++ b/src/components/Terms/__snapshots__/CGUModal.spec.tsx.snap
@@ -1,1497 +1,360 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`CGUModal component should be rendered correctly 1`] = `
-<CGUModal
- handleCloseClick={[MockFunction]}
- open={true}
+<body
+ style="padding-right: 0px; overflow: hidden;"
>
- <WithStyles(ForwardRef(Dialog))
- aria-labelledby="accessibility-title"
- classes={
- Object {
- "paper": "modal-paper",
- "root": "modal-root",
- }
- }
- onClose={[MockFunction]}
- open={true}
+ <div
+ aria-hidden="true"
+ />
+ <div
+ class="MuiDialog-root modal-root"
+ role="presentation"
+ style="position: fixed; z-index: 1300; right: 0px; bottom: 0px; top: 0px; left: 0px;"
>
- <ForwardRef(Dialog)
- aria-labelledby="accessibility-title"
- classes={
- Object {
- "container": "MuiDialog-container",
- "paper": "MuiDialog-paper modal-paper",
- "paperFullScreen": "MuiDialog-paperFullScreen",
- "paperFullWidth": "MuiDialog-paperFullWidth",
- "paperScrollBody": "MuiDialog-paperScrollBody",
- "paperScrollPaper": "MuiDialog-paperScrollPaper",
- "paperWidthFalse": "MuiDialog-paperWidthFalse",
- "paperWidthLg": "MuiDialog-paperWidthLg",
- "paperWidthMd": "MuiDialog-paperWidthMd",
- "paperWidthSm": "MuiDialog-paperWidthSm",
- "paperWidthXl": "MuiDialog-paperWidthXl",
- "paperWidthXs": "MuiDialog-paperWidthXs",
- "root": "MuiDialog-root modal-root",
- "scrollBody": "MuiDialog-scrollBody",
- "scrollPaper": "MuiDialog-scrollPaper",
- }
- }
- onClose={[MockFunction]}
- open={true}
+ <div
+ aria-hidden="true"
+ class="MuiBackdrop-root"
+ style="opacity: 1; webkit-transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"
+ />
+ <div
+ data-test="sentinelStart"
+ tabindex="0"
+ />
+ <div
+ class="MuiDialog-container MuiDialog-scrollPaper"
+ role="none presentation"
+ style="opacity: 1; webkit-transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"
+ tabindex="-1"
>
- <ForwardRef(Modal)
- BackdropComponent={
- Object {
- "$$typeof": Symbol(react.forward_ref),
- "Naked": Object {
- "$$typeof": Symbol(react.forward_ref),
- "propTypes": Object {
- "children": [Function],
- "className": [Function],
- "classes": [Function],
- "invisible": [Function],
- "open": [Function],
- "transitionDuration": [Function],
- },
- "render": [Function],
- },
- "displayName": "WithStyles(ForwardRef(Backdrop))",
- "options": Object {
- "defaultTheme": Object {
- "breakpoints": Object {
- "between": [Function],
- "down": [Function],
- "keys": Array [
- "xs",
- "sm",
- "md",
- "lg",
- "xl",
- ],
- "only": [Function],
- "up": [Function],
- "values": Object {
- "lg": 1280,
- "md": 960,
- "sm": 600,
- "xl": 1920,
- "xs": 0,
- },
- "width": [Function],
- },
- "direction": "ltr",
- "mixins": Object {
- "gutters": [Function],
- "toolbar": Object {
- "@media (min-width:0px) and (orientation: landscape)": Object {
- "minHeight": 48,
- },
- "@media (min-width:600px)": Object {
- "minHeight": 64,
- },
- "minHeight": 56,
- },
- },
- "overrides": Object {},
- "palette": Object {
- "action": Object {
- "activatedOpacity": 0.12,
- "active": "rgba(0, 0, 0, 0.54)",
- "disabled": "rgba(0, 0, 0, 0.26)",
- "disabledBackground": "rgba(0, 0, 0, 0.12)",
- "disabledOpacity": 0.38,
- "focus": "rgba(0, 0, 0, 0.12)",
- "focusOpacity": 0.12,
- "hover": "rgba(0, 0, 0, 0.04)",
- "hoverOpacity": 0.04,
- "selected": "rgba(0, 0, 0, 0.08)",
- "selectedOpacity": 0.08,
- },
- "augmentColor": [Function],
- "background": Object {
- "default": "#fafafa",
- "paper": "#fff",
- },
- "common": Object {
- "black": "#000",
- "white": "#fff",
- },
- "contrastThreshold": 3,
- "divider": "rgba(0, 0, 0, 0.12)",
- "error": Object {
- "contrastText": "#fff",
- "dark": "#d32f2f",
- "light": "#e57373",
- "main": "#f44336",
- },
- "getContrastText": [Function],
- "grey": Object {
- "100": "#f5f5f5",
- "200": "#eeeeee",
- "300": "#e0e0e0",
- "400": "#bdbdbd",
- "50": "#fafafa",
- "500": "#9e9e9e",
- "600": "#757575",
- "700": "#616161",
- "800": "#424242",
- "900": "#212121",
- "A100": "#d5d5d5",
- "A200": "#aaaaaa",
- "A400": "#303030",
- "A700": "#616161",
- },
- "info": Object {
- "contrastText": "#fff",
- "dark": "#1976d2",
- "light": "#64b5f6",
- "main": "#2196f3",
- },
- "primary": Object {
- "contrastText": "#fff",
- "dark": "#303f9f",
- "light": "#7986cb",
- "main": "#3f51b5",
- },
- "secondary": Object {
- "contrastText": "#fff",
- "dark": "#c51162",
- "light": "#ff4081",
- "main": "#f50057",
- },
- "success": Object {
- "contrastText": "rgba(0, 0, 0, 0.87)",
- "dark": "#388e3c",
- "light": "#81c784",
- "main": "#4caf50",
- },
- "text": Object {
- "disabled": "rgba(0, 0, 0, 0.38)",
- "hint": "rgba(0, 0, 0, 0.38)",
- "primary": "rgba(0, 0, 0, 0.87)",
- "secondary": "rgba(0, 0, 0, 0.54)",
- },
- "tonalOffset": 0.2,
- "type": "light",
- "warning": Object {
- "contrastText": "rgba(0, 0, 0, 0.87)",
- "dark": "#f57c00",
- "light": "#ffb74d",
- "main": "#ff9800",
- },
- },
- "props": Object {},
- "shadows": Array [
- "none",
- "0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12)",
- "0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12)",
- "0px 3px 3px -2px rgba(0,0,0,0.2),0px 3px 4px 0px rgba(0,0,0,0.14),0px 1px 8px 0px rgba(0,0,0,0.12)",
- "0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12)",
- "0px 3px 5px -1px rgba(0,0,0,0.2),0px 5px 8px 0px rgba(0,0,0,0.14),0px 1px 14px 0px rgba(0,0,0,0.12)",
- "0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12)",
- "0px 4px 5px -2px rgba(0,0,0,0.2),0px 7px 10px 1px rgba(0,0,0,0.14),0px 2px 16px 1px rgba(0,0,0,0.12)",
- "0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12)",
- "0px 5px 6px -3px rgba(0,0,0,0.2),0px 9px 12px 1px rgba(0,0,0,0.14),0px 3px 16px 2px rgba(0,0,0,0.12)",
- "0px 6px 6px -3px rgba(0,0,0,0.2),0px 10px 14px 1px rgba(0,0,0,0.14),0px 4px 18px 3px rgba(0,0,0,0.12)",
- "0px 6px 7px -4px rgba(0,0,0,0.2),0px 11px 15px 1px rgba(0,0,0,0.14),0px 4px 20px 3px rgba(0,0,0,0.12)",
- "0px 7px 8px -4px rgba(0,0,0,0.2),0px 12px 17px 2px rgba(0,0,0,0.14),0px 5px 22px 4px rgba(0,0,0,0.12)",
- "0px 7px 8px -4px rgba(0,0,0,0.2),0px 13px 19px 2px rgba(0,0,0,0.14),0px 5px 24px 4px rgba(0,0,0,0.12)",
- "0px 7px 9px -4px rgba(0,0,0,0.2),0px 14px 21px 2px rgba(0,0,0,0.14),0px 5px 26px 4px rgba(0,0,0,0.12)",
- "0px 8px 9px -5px rgba(0,0,0,0.2),0px 15px 22px 2px rgba(0,0,0,0.14),0px 6px 28px 5px rgba(0,0,0,0.12)",
- "0px 8px 10px -5px rgba(0,0,0,0.2),0px 16px 24px 2px rgba(0,0,0,0.14),0px 6px 30px 5px rgba(0,0,0,0.12)",
- "0px 8px 11px -5px rgba(0,0,0,0.2),0px 17px 26px 2px rgba(0,0,0,0.14),0px 6px 32px 5px rgba(0,0,0,0.12)",
- "0px 9px 11px -5px rgba(0,0,0,0.2),0px 18px 28px 2px rgba(0,0,0,0.14),0px 7px 34px 6px rgba(0,0,0,0.12)",
- "0px 9px 12px -6px rgba(0,0,0,0.2),0px 19px 29px 2px rgba(0,0,0,0.14),0px 7px 36px 6px rgba(0,0,0,0.12)",
- "0px 10px 13px -6px rgba(0,0,0,0.2),0px 20px 31px 3px rgba(0,0,0,0.14),0px 8px 38px 7px rgba(0,0,0,0.12)",
- "0px 10px 13px -6px rgba(0,0,0,0.2),0px 21px 33px 3px rgba(0,0,0,0.14),0px 8px 40px 7px rgba(0,0,0,0.12)",
- "0px 10px 14px -6px rgba(0,0,0,0.2),0px 22px 35px 3px rgba(0,0,0,0.14),0px 8px 42px 7px rgba(0,0,0,0.12)",
- "0px 11px 14px -7px rgba(0,0,0,0.2),0px 23px 36px 3px rgba(0,0,0,0.14),0px 9px 44px 8px rgba(0,0,0,0.12)",
- "0px 11px 15px -7px rgba(0,0,0,0.2),0px 24px 38px 3px rgba(0,0,0,0.14),0px 9px 46px 8px rgba(0,0,0,0.12)",
- ],
- "shape": Object {
- "borderRadius": 4,
- },
- "spacing": [Function],
- "transitions": Object {
- "create": [Function],
- "duration": Object {
- "complex": 375,
- "enteringScreen": 225,
- "leavingScreen": 195,
- "short": 250,
- "shorter": 200,
- "shortest": 150,
- "standard": 300,
- },
- "easing": Object {
- "easeIn": "cubic-bezier(0.4, 0, 1, 1)",
- "easeInOut": "cubic-bezier(0.4, 0, 0.2, 1)",
- "easeOut": "cubic-bezier(0.0, 0, 0.2, 1)",
- "sharp": "cubic-bezier(0.4, 0, 0.6, 1)",
- },
- "getAutoHeightDuration": [Function],
- },
- "typography": Object {
- "body1": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "1rem",
- "fontWeight": 400,
- "letterSpacing": "0.00938em",
- "lineHeight": 1.5,
- },
- "body2": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "0.875rem",
- "fontWeight": 400,
- "letterSpacing": "0.01071em",
- "lineHeight": 1.43,
- },
- "button": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "0.875rem",
- "fontWeight": 500,
- "letterSpacing": "0.02857em",
- "lineHeight": 1.75,
- "textTransform": "uppercase",
- },
- "caption": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "0.75rem",
- "fontWeight": 400,
- "letterSpacing": "0.03333em",
- "lineHeight": 1.66,
- },
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": 14,
- "fontWeightBold": 700,
- "fontWeightLight": 300,
- "fontWeightMedium": 500,
- "fontWeightRegular": 400,
- "h1": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "6rem",
- "fontWeight": 300,
- "letterSpacing": "-0.01562em",
- "lineHeight": 1.167,
- },
- "h2": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "3.75rem",
- "fontWeight": 300,
- "letterSpacing": "-0.00833em",
- "lineHeight": 1.2,
- },
- "h3": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "3rem",
- "fontWeight": 400,
- "letterSpacing": "0em",
- "lineHeight": 1.167,
- },
- "h4": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "2.125rem",
- "fontWeight": 400,
- "letterSpacing": "0.00735em",
- "lineHeight": 1.235,
- },
- "h5": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "1.5rem",
- "fontWeight": 400,
- "letterSpacing": "0em",
- "lineHeight": 1.334,
- },
- "h6": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "1.25rem",
- "fontWeight": 500,
- "letterSpacing": "0.0075em",
- "lineHeight": 1.6,
- },
- "htmlFontSize": 16,
- "overline": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "0.75rem",
- "fontWeight": 400,
- "letterSpacing": "0.08333em",
- "lineHeight": 2.66,
- "textTransform": "uppercase",
- },
- "pxToRem": [Function],
- "round": [Function],
- "subtitle1": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "1rem",
- "fontWeight": 400,
- "letterSpacing": "0.00938em",
- "lineHeight": 1.75,
- },
- "subtitle2": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "0.875rem",
- "fontWeight": 500,
- "letterSpacing": "0.00714em",
- "lineHeight": 1.57,
- },
- },
- "zIndex": Object {
- "appBar": 1100,
- "drawer": 1200,
- "mobileStepper": 1000,
- "modal": 1300,
- "snackbar": 1400,
- "speedDial": 1050,
- "tooltip": 1500,
- },
- },
- "name": "MuiBackdrop",
- },
- "propTypes": Object {
- "classes": [Function],
- "innerRef": [Function],
- },
- "render": [Function],
- "useStyles": [Function],
- }
- }
- BackdropProps={
- Object {
- "transitionDuration": Object {
- "enter": 225,
- "exit": 195,
- },
- }
- }
- className="MuiDialog-root modal-root"
- closeAfterTransition={true}
- disableEscapeKeyDown={false}
- onClose={[MockFunction]}
- open={true}
+ <div
+ aria-labelledby="accessibility-title"
+ class="MuiPaper-root MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm MuiPaper-elevation24 MuiPaper-rounded"
+ role="dialog"
>
- <ForwardRef(Portal)
- disablePortal={false}
+ <div
+ id="accessibility-title"
>
- <Portal
- containerInfo={
- <body
- style="padding-right: 0px; overflow: hidden;"
- >
- <div
- class="MuiDialog-root modal-root"
- role="presentation"
- style="position: fixed; z-index: 1300; right: 0px; bottom: 0px; top: 0px; left: 0px;"
- >
- <div
- aria-hidden="true"
- class="MuiBackdrop-root"
- style="opacity: 1; webkit-transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"
- />
- <div
- data-test="sentinelStart"
- tabindex="0"
- />
- <div
- class="MuiDialog-container MuiDialog-scrollPaper"
- role="none presentation"
- style="opacity: 1; webkit-transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"
- tabindex="-1"
- >
- <div
- aria-labelledby="accessibility-title"
- class="MuiPaper-root MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm MuiPaper-elevation24 MuiPaper-rounded"
- role="dialog"
- >
- <div
- id="accessibility-title"
- >
- feedback.accessibility.window_title
- </div>
- <button
- aria-label="feedback.accessibility.button_close"
- class="MuiButtonBase-root MuiIconButton-root modal-paper-close-button"
- tabindex="0"
- type="button"
- >
- <span
- class="MuiIconButton-label"
- >
- <svg
- class="styles__icon___23x3R"
- height="16"
- width="16"
- >
- <use
- xlink:href="#test-file-stub"
- />
- </svg>
- </span>
- <span
- class="MuiTouchRipple-root"
- />
- </button>
- <div
- class="gcu-content-root"
- >
- <div
- class="gcu-content-wrapper"
- >
- <p
- class="text-14-normal version"
- >
- gcu.version
- </p>
- <div
- class="gcu-content-part-title text-15-normal"
- >
- gcu.content.title1
- </div>
- <p
- class="text-14-normal"
- >
- gcu.content.part1_1
- </p>
- <p
- class="text-14-normal"
- >
- gcu.content.part1_2
- </p>
- <p
- class="text-14-normal"
- >
- gcu.content.part1_3
- </p>
- <div
- class="gcu-content-part-title text-15-normal"
- >
- gcu.content.title2
- </div>
- <p
- class="text-14-normal"
- >
- gcu.content.part2_1
- </p>
- <p
- class="text-14-normal"
- >
- gcu.content.part2_2
- </p>
- <ul
- class="text-14-normal"
- >
- <li>
- gcu.content.part2_2_list1
- </li>
- <li>
- gcu.content.part2_2_list2
- </li>
- <li>
- gcu.content.part2_2_list3
- </li>
- </ul>
- <p
- class="text-14-normal"
- >
- gcu.content.part2_3
- </p>
- <p
- class="text-14-normal"
- >
- gcu.content.part2_4
- </p>
- <div
- class="gcu-content-part-title text-15-normal"
- >
- gcu.content.title3
- </div>
- <p
- class="text-14-normal"
- >
- gcu.content.part3_1
- </p>
- <p
- class="text-14-normal"
- >
- gcu.content.part3_2
- </p>
- <p
- class="text-14-normal"
- >
- gcu.content.part3_3
- </p>
- <p
- class="text-14-normal"
- >
- gcu.content.part3_4
- </p>
- <div
- class="gcu-content-part-title text-15-normal"
- >
- gcu.content.title4
- </div>
- <p
- class="text-14-normal"
- >
- gcu.content.part4_1
- </p>
- <p
- class="text-14-normal"
- >
- gcu.content.part4_2
- </p>
- <div
- class="gcu-content-part-title text-15-normal"
- >
- gcu.content.title5
- </div>
- <p
- class="text-14-normal"
- >
- gcu.content.part5_1
- </p>
- <p
- class="text-14-normal"
- >
- gcu.content.part5_2
- </p>
- <p
- class="text-14-normal"
- >
- gcu.content.part5_3
- </p>
- <ul
- class="text-14-normal"
- >
- <li>
- gcu.content.part5_3_list1
- </li>
- <li>
- gcu.content.part5_3_list2
- </li>
- </ul>
- <p
- class="text-14-normal"
- >
- gcu.content.part5_4
- </p>
- <p
- class="text-14-normal"
- >
- gcu.content.part5_5
- </p>
- <div
- class="gcu-content-part-title text-15-normal"
- >
- gcu.content.title6
- </div>
- <p
- class="text-14-normal"
- >
- gcu.content.part6_1
- </p>
- <p
- class="text-14-normal"
- >
- gcu.content.part6_2
- </p>
- <p
- class="text-14-normal"
- >
- gcu.content.part6_3
- </p>
- <ul
- class="text-14-normal"
- >
- <li>
- gcu.content.part6_3_list1
- </li>
- <li>
- gcu.content.part6_3_list2
- </li>
- <li>
- gcu.content.part6_3_list3
- </li>
- </ul>
- <p
- class="text-14-normal"
- >
- gcu.content.part6_4
- </p>
- <p
- class="text-14-normal"
- >
- gcu.content.part6_5
- </p>
- <div
- class="gcu-content-part-title text-15-normal"
- >
- gcu.content.title8
- </div>
- <p
- class="text-14-normal"
- >
- gcu.content.part8_1
- </p>
- <p
- class="text-14-normal"
- >
- gcu.content.part8_2
- </p>
- <div
- class="gcu-content-part-title text-15-normal"
- >
- gcu.content.title9
- </div>
- <p
- class="text-14-normal"
- >
- <span
- class="text-14-bold"
- >
- gcu.content.part9_1_title
- </span>
- <span>
- gcu.content.part9_1_content
- </span>
- </p>
- <p
- class="text-14-normal"
- >
- <span
- class="text-14-bold"
- >
- gcu.content.part9_2_title
- </span>
- <span>
- gcu.content.part9_2_content
- </span>
- </p>
- <p
- class="text-14-normal"
- >
- <span
- class="text-14-bold"
- >
- gcu.content.part9_3_title
- </span>
- <span>
- gcu.content.part9_3_content
- </span>
- </p>
- <p
- class="text-14-normal"
- >
- <span
- class="text-14-bold"
- >
- gcu.content.part9_4_title
- </span>
- <span>
- gcu.content.part9_4_content
- </span>
- </p>
- <p
- class="text-14-normal"
- >
- <span
- class="text-14-bold"
- >
- gcu.content.part9_5_title
- </span>
- <span>
- gcu.content.part9_5_content
- </span>
- </p>
- </div>
- </div>
- <button
- aria-label="gcu_modal.accessibility.button_accept"
- class="MuiButtonBase-root MuiButton-root btn-profile-next rounded MuiButton-text gcu-modal-button"
- tabindex="0"
- type="button"
- >
- <span
- class="MuiButton-label text-16-bold"
- >
- legal.accessibility.button_close
- </span>
- <span
- class="MuiTouchRipple-root"
- />
- </button>
- </div>
- </div>
- <div
- data-test="sentinelEnd"
- tabindex="0"
- />
- </div>
- </body>
- }
+ feedback.accessibility.window_title
+ </div>
+ <button
+ aria-label="feedback.accessibility.button_close"
+ class="MuiButtonBase-root MuiIconButton-root modal-paper-close-button"
+ tabindex="0"
+ type="button"
+ >
+ <span
+ class="MuiIconButton-label"
+ >
+ <svg
+ class="styles__icon___23x3R"
+ height="16"
+ width="16"
+ >
+ <use
+ xlink:href="#test-file-stub"
+ />
+ </svg>
+ </span>
+ <span
+ class="MuiTouchRipple-root"
+ />
+ </button>
+ <div
+ class="gcu-content-root"
+ >
+ <div
+ class="gcu-content-wrapper"
>
+ <p
+ class="text-14-normal version"
+ >
+ gcu.version
+ </p>
+ <div
+ class="gcu-content-part-title text-15-normal"
+ >
+ gcu.content.title1
+ </div>
+ <p
+ class="text-14-normal"
+ >
+ gcu.content.part1_1
+ </p>
+ <p
+ class="text-14-normal"
+ >
+ gcu.content.part1_2
+ </p>
+ <p
+ class="text-14-normal"
+ >
+ gcu.content.part1_3
+ </p>
+ <div
+ class="gcu-content-part-title text-15-normal"
+ >
+ gcu.content.title2
+ </div>
+ <p
+ class="text-14-normal"
+ >
+ gcu.content.part2_1
+ </p>
+ <p
+ class="text-14-normal"
+ >
+ gcu.content.part2_2
+ </p>
+ <ul
+ class="text-14-normal"
+ >
+ <li>
+ gcu.content.part2_2_list1
+ </li>
+ <li>
+ gcu.content.part2_2_list2
+ </li>
+ <li>
+ gcu.content.part2_2_list3
+ </li>
+ </ul>
+ <p
+ class="text-14-normal"
+ >
+ gcu.content.part2_3
+ </p>
+ <p
+ class="text-14-normal"
+ >
+ gcu.content.part2_4
+ </p>
<div
- className="MuiDialog-root modal-root"
- onKeyDown={[Function]}
- role="presentation"
- style={
- Object {
- "bottom": 0,
- "left": 0,
- "position": "fixed",
- "right": 0,
- "top": 0,
- "zIndex": 1300,
- }
- }
+ class="gcu-content-part-title text-15-normal"
+ >
+ gcu.content.title3
+ </div>
+ <p
+ class="text-14-normal"
+ >
+ gcu.content.part3_1
+ </p>
+ <p
+ class="text-14-normal"
+ >
+ gcu.content.part3_2
+ </p>
+ <p
+ class="text-14-normal"
+ >
+ gcu.content.part3_3
+ </p>
+ <p
+ class="text-14-normal"
+ >
+ gcu.content.part3_4
+ </p>
+ <div
+ class="gcu-content-part-title text-15-normal"
+ >
+ gcu.content.title4
+ </div>
+ <p
+ class="text-14-normal"
+ >
+ gcu.content.part4_1
+ </p>
+ <p
+ class="text-14-normal"
+ >
+ gcu.content.part4_2
+ </p>
+ <div
+ class="gcu-content-part-title text-15-normal"
+ >
+ gcu.content.title5
+ </div>
+ <p
+ class="text-14-normal"
>
- <WithStyles(ForwardRef(Backdrop))
- onClick={[Function]}
- open={true}
- transitionDuration={
- Object {
- "enter": 225,
- "exit": 195,
- }
- }
+ gcu.content.part5_1
+ </p>
+ <p
+ class="text-14-normal"
+ >
+ gcu.content.part5_2
+ </p>
+ <p
+ class="text-14-normal"
+ >
+ gcu.content.part5_3
+ </p>
+ <ul
+ class="text-14-normal"
+ >
+ <li>
+ gcu.content.part5_3_list1
+ </li>
+ <li>
+ gcu.content.part5_3_list2
+ </li>
+ </ul>
+ <p
+ class="text-14-normal"
+ >
+ gcu.content.part5_4
+ </p>
+ <p
+ class="text-14-normal"
+ >
+ gcu.content.part5_5
+ </p>
+ <div
+ class="gcu-content-part-title text-15-normal"
+ >
+ gcu.content.title6
+ </div>
+ <p
+ class="text-14-normal"
+ >
+ gcu.content.part6_1
+ </p>
+ <p
+ class="text-14-normal"
+ >
+ gcu.content.part6_2
+ </p>
+ <p
+ class="text-14-normal"
+ >
+ gcu.content.part6_3
+ </p>
+ <ul
+ class="text-14-normal"
+ >
+ <li>
+ gcu.content.part6_3_list1
+ </li>
+ <li>
+ gcu.content.part6_3_list2
+ </li>
+ <li>
+ gcu.content.part6_3_list3
+ </li>
+ </ul>
+ <p
+ class="text-14-normal"
+ >
+ gcu.content.part6_4
+ </p>
+ <p
+ class="text-14-normal"
+ >
+ gcu.content.part6_5
+ </p>
+ <div
+ class="gcu-content-part-title text-15-normal"
+ >
+ gcu.content.title8
+ </div>
+ <p
+ class="text-14-normal"
+ >
+ gcu.content.part8_1
+ </p>
+ <p
+ class="text-14-normal"
+ >
+ gcu.content.part8_2
+ </p>
+ <div
+ class="gcu-content-part-title text-15-normal"
+ >
+ gcu.content.title9
+ </div>
+ <p
+ class="text-14-normal"
+ >
+ <span
+ class="text-14-bold"
>
- <ForwardRef(Backdrop)
- classes={
- Object {
- "invisible": "MuiBackdrop-invisible",
- "root": "MuiBackdrop-root",
- }
- }
- onClick={[Function]}
- open={true}
- transitionDuration={
- Object {
- "enter": 225,
- "exit": 195,
- }
- }
- >
- <ForwardRef(Fade)
- in={true}
- onClick={[Function]}
- timeout={
- Object {
- "enter": 225,
- "exit": 195,
- }
- }
- >
- <Transition
- appear={true}
- enter={true}
- exit={true}
- in={true}
- mountOnEnter={false}
- onClick={[Function]}
- onEnter={[Function]}
- onEntered={[Function]}
- onEntering={[Function]}
- onExit={[Function]}
- onExited={[Function]}
- onExiting={[Function]}
- timeout={
- Object {
- "enter": 225,
- "exit": 195,
- }
- }
- unmountOnExit={false}
- >
- <div
- aria-hidden={true}
- className="MuiBackdrop-root"
- onClick={[Function]}
- style={
- Object {
- "opacity": 1,
- "visibility": undefined,
- }
- }
- />
- </Transition>
- </ForwardRef(Fade)>
- </ForwardRef(Backdrop)>
- </WithStyles(ForwardRef(Backdrop))>
- <Unstable_TrapFocus
- disableAutoFocus={false}
- disableEnforceFocus={false}
- disableRestoreFocus={false}
- getDoc={[Function]}
- isEnabled={[Function]}
- open={true}
+ gcu.content.part9_1_title
+ </span>
+ <span>
+ gcu.content.part9_1_content
+ </span>
+ </p>
+ <p
+ class="text-14-normal"
+ >
+ <span
+ class="text-14-bold"
>
- <div
- data-test="sentinelStart"
- tabIndex={0}
- />
- <ForwardRef(Fade)
- appear={true}
- in={true}
- onEnter={[Function]}
- onExited={[Function]}
- role="none presentation"
- tabIndex="-1"
- timeout={
- Object {
- "enter": 225,
- "exit": 195,
- }
- }
- >
- <Transition
- appear={true}
- enter={true}
- exit={true}
- in={true}
- mountOnEnter={false}
- onEnter={[Function]}
- onEntered={[Function]}
- onEntering={[Function]}
- onExit={[Function]}
- onExited={[Function]}
- onExiting={[Function]}
- role="none presentation"
- tabIndex="-1"
- timeout={
- Object {
- "enter": 225,
- "exit": 195,
- }
- }
- unmountOnExit={false}
- >
- <div
- className="MuiDialog-container MuiDialog-scrollPaper"
- onMouseDown={[Function]}
- onMouseUp={[Function]}
- role="none presentation"
- style={
- Object {
- "opacity": 1,
- "visibility": undefined,
- }
- }
- tabIndex="-1"
- >
- <WithStyles(ForwardRef(Paper))
- aria-labelledby="accessibility-title"
- className="MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm"
- elevation={24}
- role="dialog"
- >
- <ForwardRef(Paper)
- aria-labelledby="accessibility-title"
- className="MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm"
- classes={
- Object {
- "elevation0": "MuiPaper-elevation0",
- "elevation1": "MuiPaper-elevation1",
- "elevation10": "MuiPaper-elevation10",
- "elevation11": "MuiPaper-elevation11",
- "elevation12": "MuiPaper-elevation12",
- "elevation13": "MuiPaper-elevation13",
- "elevation14": "MuiPaper-elevation14",
- "elevation15": "MuiPaper-elevation15",
- "elevation16": "MuiPaper-elevation16",
- "elevation17": "MuiPaper-elevation17",
- "elevation18": "MuiPaper-elevation18",
- "elevation19": "MuiPaper-elevation19",
- "elevation2": "MuiPaper-elevation2",
- "elevation20": "MuiPaper-elevation20",
- "elevation21": "MuiPaper-elevation21",
- "elevation22": "MuiPaper-elevation22",
- "elevation23": "MuiPaper-elevation23",
- "elevation24": "MuiPaper-elevation24",
- "elevation3": "MuiPaper-elevation3",
- "elevation4": "MuiPaper-elevation4",
- "elevation5": "MuiPaper-elevation5",
- "elevation6": "MuiPaper-elevation6",
- "elevation7": "MuiPaper-elevation7",
- "elevation8": "MuiPaper-elevation8",
- "elevation9": "MuiPaper-elevation9",
- "outlined": "MuiPaper-outlined",
- "root": "MuiPaper-root",
- "rounded": "MuiPaper-rounded",
- }
- }
- elevation={24}
- role="dialog"
- >
- <div
- aria-labelledby="accessibility-title"
- className="MuiPaper-root MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm MuiPaper-elevation24 MuiPaper-rounded"
- role="dialog"
- >
- <div
- id="accessibility-title"
- >
- feedback.accessibility.window_title
- </div>
- <WithStyles(ForwardRef(IconButton))
- aria-label="feedback.accessibility.button_close"
- className="modal-paper-close-button"
- onClick={[MockFunction]}
- >
- <ForwardRef(IconButton)
- aria-label="feedback.accessibility.button_close"
- className="modal-paper-close-button"
- classes={
- Object {
- "colorInherit": "MuiIconButton-colorInherit",
- "colorPrimary": "MuiIconButton-colorPrimary",
- "colorSecondary": "MuiIconButton-colorSecondary",
- "disabled": "Mui-disabled",
- "edgeEnd": "MuiIconButton-edgeEnd",
- "edgeStart": "MuiIconButton-edgeStart",
- "label": "MuiIconButton-label",
- "root": "MuiIconButton-root",
- "sizeSmall": "MuiIconButton-sizeSmall",
- }
- }
- onClick={[MockFunction]}
- >
- <WithStyles(ForwardRef(ButtonBase))
- aria-label="feedback.accessibility.button_close"
- centerRipple={true}
- className="MuiIconButton-root modal-paper-close-button"
- disabled={false}
- focusRipple={true}
- onClick={[MockFunction]}
- >
- <ForwardRef(ButtonBase)
- aria-label="feedback.accessibility.button_close"
- centerRipple={true}
- className="MuiIconButton-root modal-paper-close-button"
- classes={
- Object {
- "disabled": "Mui-disabled",
- "focusVisible": "Mui-focusVisible",
- "root": "MuiButtonBase-root",
- }
- }
- disabled={false}
- focusRipple={true}
- onClick={[MockFunction]}
- >
- <button
- aria-label="feedback.accessibility.button_close"
- className="MuiButtonBase-root MuiIconButton-root modal-paper-close-button"
- disabled={false}
- onBlur={[Function]}
- onClick={[MockFunction]}
- onDragLeave={[Function]}
- onFocus={[Function]}
- onKeyDown={[Function]}
- onKeyUp={[Function]}
- onMouseDown={[Function]}
- onMouseLeave={[Function]}
- onMouseUp={[Function]}
- onTouchEnd={[Function]}
- onTouchMove={[Function]}
- onTouchStart={[Function]}
- tabIndex={0}
- type="button"
- >
- <span
- className="MuiIconButton-label"
- >
- <Icon
- icon="test-file-stub"
- size={16}
- spin={false}
- >
- <Component
- className="styles__icon___23x3R"
- height={16}
- style={Object {}}
- width={16}
- >
- <svg
- className="styles__icon___23x3R"
- height={16}
- style={Object {}}
- width={16}
- >
- <use
- xlinkHref="#test-file-stub"
- />
- </svg>
- </Component>
- </Icon>
- </span>
- <WithStyles(memo)
- center={true}
- >
- <ForwardRef(TouchRipple)
- center={true}
- classes={
- Object {
- "child": "MuiTouchRipple-child",
- "childLeaving": "MuiTouchRipple-childLeaving",
- "childPulsate": "MuiTouchRipple-childPulsate",
- "ripple": "MuiTouchRipple-ripple",
- "ripplePulsate": "MuiTouchRipple-ripplePulsate",
- "rippleVisible": "MuiTouchRipple-rippleVisible",
- "root": "MuiTouchRipple-root",
- }
- }
- >
- <span
- className="MuiTouchRipple-root"
- >
- <TransitionGroup
- childFactory={[Function]}
- component={null}
- exit={true}
- />
- </span>
- </ForwardRef(TouchRipple)>
- </WithStyles(memo)>
- </button>
- </ForwardRef(ButtonBase)>
- </WithStyles(ForwardRef(ButtonBase))>
- </ForwardRef(IconButton)>
- </WithStyles(ForwardRef(IconButton))>
- <GCUContent>
- <div
- className="gcu-content-root"
- >
- <div
- className="gcu-content-wrapper"
- >
- <p
- className="text-14-normal version"
- >
- gcu.version
- </p>
- <div
- className="gcu-content-part-title text-15-normal"
- >
- gcu.content.title1
- </div>
- <p
- className="text-14-normal"
- >
- gcu.content.part1_1
- </p>
- <p
- className="text-14-normal"
- >
- gcu.content.part1_2
- </p>
- <p
- className="text-14-normal"
- >
- gcu.content.part1_3
- </p>
- <div
- className="gcu-content-part-title text-15-normal"
- >
- gcu.content.title2
- </div>
- <p
- className="text-14-normal"
- >
- gcu.content.part2_1
- </p>
- <p
- className="text-14-normal"
- >
- gcu.content.part2_2
- </p>
- <ul
- className="text-14-normal"
- >
- <li>
- gcu.content.part2_2_list1
- </li>
- <li>
- gcu.content.part2_2_list2
- </li>
- <li>
- gcu.content.part2_2_list3
- </li>
- </ul>
- <p
- className="text-14-normal"
- >
- gcu.content.part2_3
- </p>
- <p
- className="text-14-normal"
- >
- gcu.content.part2_4
- </p>
- <div
- className="gcu-content-part-title text-15-normal"
- >
- gcu.content.title3
- </div>
- <p
- className="text-14-normal"
- >
- gcu.content.part3_1
- </p>
- <p
- className="text-14-normal"
- >
- gcu.content.part3_2
- </p>
- <p
- className="text-14-normal"
- >
- gcu.content.part3_3
- </p>
- <p
- className="text-14-normal"
- >
- gcu.content.part3_4
- </p>
- <div
- className="gcu-content-part-title text-15-normal"
- >
- gcu.content.title4
- </div>
- <p
- className="text-14-normal"
- >
- gcu.content.part4_1
- </p>
- <p
- className="text-14-normal"
- dangerouslySetInnerHTML={
- Object {
- "__html": "gcu.content.part4_2",
- }
- }
- />
- <div
- className="gcu-content-part-title text-15-normal"
- >
- gcu.content.title5
- </div>
- <p
- className="text-14-normal"
- >
- gcu.content.part5_1
- </p>
- <p
- className="text-14-normal"
- >
- gcu.content.part5_2
- </p>
- <p
- className="text-14-normal"
- >
- gcu.content.part5_3
- </p>
- <ul
- className="text-14-normal"
- >
- <li>
- gcu.content.part5_3_list1
- </li>
- <li>
- gcu.content.part5_3_list2
- </li>
- </ul>
- <p
- className="text-14-normal"
- >
- gcu.content.part5_4
- </p>
- <p
- className="text-14-normal"
- >
- gcu.content.part5_5
- </p>
- <div
- className="gcu-content-part-title text-15-normal"
- >
- gcu.content.title6
- </div>
- <p
- className="text-14-normal"
- >
- gcu.content.part6_1
- </p>
- <p
- className="text-14-normal"
- >
- gcu.content.part6_2
- </p>
- <p
- className="text-14-normal"
- >
- gcu.content.part6_3
- </p>
- <ul
- className="text-14-normal"
- >
- <li>
- gcu.content.part6_3_list1
- </li>
- <li>
- gcu.content.part6_3_list2
- </li>
- <li>
- gcu.content.part6_3_list3
- </li>
- </ul>
- <p
- className="text-14-normal"
- >
- gcu.content.part6_4
- </p>
- <p
- className="text-14-normal"
- >
- gcu.content.part6_5
- </p>
- <div
- className="gcu-content-part-title text-15-normal"
- >
- gcu.content.title8
- </div>
- <p
- className="text-14-normal"
- >
- gcu.content.part8_1
- </p>
- <p
- className="text-14-normal"
- dangerouslySetInnerHTML={
- Object {
- "__html": "gcu.content.part8_2",
- }
- }
- />
- <div
- className="gcu-content-part-title text-15-normal"
- >
- gcu.content.title9
- </div>
- <p
- className="text-14-normal"
- >
- <span
- className="text-14-bold"
- >
- gcu.content.part9_1_title
- </span>
- <span>
- gcu.content.part9_1_content
- </span>
- </p>
- <p
- className="text-14-normal"
- >
- <span
- className="text-14-bold"
- >
- gcu.content.part9_2_title
- </span>
- <span>
- gcu.content.part9_2_content
- </span>
- </p>
- <p
- className="text-14-normal"
- >
- <span
- className="text-14-bold"
- >
- gcu.content.part9_3_title
- </span>
- <span>
- gcu.content.part9_3_content
- </span>
- </p>
- <p
- className="text-14-normal"
- >
- <span
- className="text-14-bold"
- >
- gcu.content.part9_4_title
- </span>
- <span
- dangerouslySetInnerHTML={
- Object {
- "__html": "gcu.content.part9_4_content",
- }
- }
- />
- </p>
- <p
- className="text-14-normal"
- >
- <span
- className="text-14-bold"
- >
- gcu.content.part9_5_title
- </span>
- <span>
- gcu.content.part9_5_content
- </span>
- </p>
- </div>
- </div>
- </GCUContent>
- <WithStyles(ForwardRef(Button))
- aria-label="gcu_modal.accessibility.button_accept"
- className="gcu-modal-button"
- classes={
- Object {
- "label": "text-16-bold",
- "root": "btn-profile-next rounded",
- }
- }
- onClick={[MockFunction]}
- >
- <ForwardRef(Button)
- aria-label="gcu_modal.accessibility.button_accept"
- className="gcu-modal-button"
- classes={
- Object {
- "colorInherit": "MuiButton-colorInherit",
- "contained": "MuiButton-contained",
- "containedPrimary": "MuiButton-containedPrimary",
- "containedSecondary": "MuiButton-containedSecondary",
- "containedSizeLarge": "MuiButton-containedSizeLarge",
- "containedSizeSmall": "MuiButton-containedSizeSmall",
- "disableElevation": "MuiButton-disableElevation",
- "disabled": "Mui-disabled",
- "endIcon": "MuiButton-endIcon",
- "focusVisible": "Mui-focusVisible",
- "fullWidth": "MuiButton-fullWidth",
- "iconSizeLarge": "MuiButton-iconSizeLarge",
- "iconSizeMedium": "MuiButton-iconSizeMedium",
- "iconSizeSmall": "MuiButton-iconSizeSmall",
- "label": "MuiButton-label text-16-bold",
- "outlined": "MuiButton-outlined",
- "outlinedPrimary": "MuiButton-outlinedPrimary",
- "outlinedSecondary": "MuiButton-outlinedSecondary",
- "outlinedSizeLarge": "MuiButton-outlinedSizeLarge",
- "outlinedSizeSmall": "MuiButton-outlinedSizeSmall",
- "root": "MuiButton-root btn-profile-next rounded",
- "sizeLarge": "MuiButton-sizeLarge",
- "sizeSmall": "MuiButton-sizeSmall",
- "startIcon": "MuiButton-startIcon",
- "text": "MuiButton-text",
- "textPrimary": "MuiButton-textPrimary",
- "textSecondary": "MuiButton-textSecondary",
- "textSizeLarge": "MuiButton-textSizeLarge",
- "textSizeSmall": "MuiButton-textSizeSmall",
- }
- }
- onClick={[MockFunction]}
- >
- <WithStyles(ForwardRef(ButtonBase))
- aria-label="gcu_modal.accessibility.button_accept"
- className="MuiButton-root btn-profile-next rounded MuiButton-text gcu-modal-button"
- component="button"
- disabled={false}
- focusRipple={true}
- focusVisibleClassName="Mui-focusVisible"
- onClick={[MockFunction]}
- type="button"
- >
- <ForwardRef(ButtonBase)
- aria-label="gcu_modal.accessibility.button_accept"
- className="MuiButton-root btn-profile-next rounded MuiButton-text gcu-modal-button"
- classes={
- Object {
- "disabled": "Mui-disabled",
- "focusVisible": "Mui-focusVisible",
- "root": "MuiButtonBase-root",
- }
- }
- component="button"
- disabled={false}
- focusRipple={true}
- focusVisibleClassName="Mui-focusVisible"
- onClick={[MockFunction]}
- type="button"
- >
- <button
- aria-label="gcu_modal.accessibility.button_accept"
- className="MuiButtonBase-root MuiButton-root btn-profile-next rounded MuiButton-text gcu-modal-button"
- disabled={false}
- onBlur={[Function]}
- onClick={[MockFunction]}
- onDragLeave={[Function]}
- onFocus={[Function]}
- onKeyDown={[Function]}
- onKeyUp={[Function]}
- onMouseDown={[Function]}
- onMouseLeave={[Function]}
- onMouseUp={[Function]}
- onTouchEnd={[Function]}
- onTouchMove={[Function]}
- onTouchStart={[Function]}
- tabIndex={0}
- type="button"
- >
- <span
- className="MuiButton-label text-16-bold"
- >
- legal.accessibility.button_close
- </span>
- <WithStyles(memo)
- center={false}
- >
- <ForwardRef(TouchRipple)
- center={false}
- classes={
- Object {
- "child": "MuiTouchRipple-child",
- "childLeaving": "MuiTouchRipple-childLeaving",
- "childPulsate": "MuiTouchRipple-childPulsate",
- "ripple": "MuiTouchRipple-ripple",
- "ripplePulsate": "MuiTouchRipple-ripplePulsate",
- "rippleVisible": "MuiTouchRipple-rippleVisible",
- "root": "MuiTouchRipple-root",
- }
- }
- >
- <span
- className="MuiTouchRipple-root"
- >
- <TransitionGroup
- childFactory={[Function]}
- component={null}
- exit={true}
- />
- </span>
- </ForwardRef(TouchRipple)>
- </WithStyles(memo)>
- </button>
- </ForwardRef(ButtonBase)>
- </WithStyles(ForwardRef(ButtonBase))>
- </ForwardRef(Button)>
- </WithStyles(ForwardRef(Button))>
- </div>
- </ForwardRef(Paper)>
- </WithStyles(ForwardRef(Paper))>
- </div>
- </Transition>
- </ForwardRef(Fade)>
- <div
- data-test="sentinelEnd"
- tabIndex={0}
- />
- </Unstable_TrapFocus>
- </div>
- </Portal>
- </ForwardRef(Portal)>
- </ForwardRef(Modal)>
- </ForwardRef(Dialog)>
- </WithStyles(ForwardRef(Dialog))>
-</CGUModal>
+ gcu.content.part9_2_title
+ </span>
+ <span>
+ gcu.content.part9_2_content
+ </span>
+ </p>
+ <p
+ class="text-14-normal"
+ >
+ <span
+ class="text-14-bold"
+ >
+ gcu.content.part9_3_title
+ </span>
+ <span>
+ gcu.content.part9_3_content
+ </span>
+ </p>
+ <p
+ class="text-14-normal"
+ >
+ <span
+ class="text-14-bold"
+ >
+ gcu.content.part9_4_title
+ </span>
+ <span>
+ gcu.content.part9_4_content
+ </span>
+ </p>
+ <p
+ class="text-14-normal"
+ >
+ <span
+ class="text-14-bold"
+ >
+ gcu.content.part9_5_title
+ </span>
+ <span>
+ gcu.content.part9_5_content
+ </span>
+ </p>
+ </div>
+ </div>
+ <button
+ aria-label="gcu_modal.accessibility.button_accept"
+ class="MuiButtonBase-root MuiButton-root MuiButton-text btnPrimary"
+ tabindex="0"
+ type="button"
+ >
+ <span
+ class="MuiButton-label"
+ >
+ legal.accessibility.button_close
+ </span>
+ <span
+ class="MuiTouchRipple-root"
+ />
+ </button>
+ </div>
+ </div>
+ <div
+ data-test="sentinelEnd"
+ tabindex="0"
+ />
+ </div>
+</body>
`;
diff --git a/src/components/Terms/__snapshots__/DataShareConsentContent.spec.tsx.snap b/src/components/Terms/__snapshots__/DataShareConsentContent.spec.tsx.snap
index e73f9fe284542df8c5d93672bea9a157f7f20820..69141d0536a316b3162f78c838aab7612e51e4a4 100644
--- a/src/components/Terms/__snapshots__/DataShareConsentContent.spec.tsx.snap
+++ b/src/components/Terms/__snapshots__/DataShareConsentContent.spec.tsx.snap
@@ -1,222 +1,190 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`DataShareConsentContent component should be rendered correctly with first connexion text 1`] = `
-<Provider
- store={
- Object {
- "clearActions": [Function],
- "dispatch": [Function],
- "getActions": [Function],
- "getState": [Function],
- "replaceReducer": [Function],
- "subscribe": [Function],
- }
- }
->
- <DataShareConsentContent>
+<div>
+ <div
+ class="dataShare-content-root"
+ >
<div
- className="dataShare-content-root"
+ class="dataShare-content-wrapper"
>
- <div
- className="dataShare-content-wrapper"
+ <h1
+ class="dataShare-content-title text-22-normal"
>
- <h1
- className="dataShare-content-title text-22-normal"
- >
- dataShare.title1
- </h1>
- <p
- className="text-14-normal"
- >
- dataShare.part1
- </p>
- <p
- className="text-14-normal"
- >
- dataShare.part2
- </p>
- <p
- className="text-14-normal"
- >
- dataShare.part3
- </p>
- <ul
- className="text-14-normal"
- >
- <li
- className="text-14-normal"
- >
- dataShare.item1
- </li>
- <li
- className="text-14-normal"
- >
- dataShare.item2
- </li>
- <li
- className="text-14-normal"
- >
- dataShare.item3
- </li>
- </ul>
- <p
- className="text-14-normal"
- >
- dataShare.part4
- </p>
- <p
- className="text-14-normal"
- >
- dataShare.part5
- </p>
- <p
- className="text-14-normal"
- >
- dataShare.part6
- </p>
- <p
- className="text-14-normal"
- >
- dataShare.part7
- </p>
- <p
- className="text-14-normal"
- >
- dataShare.part8
- </p>
- <span
- className="text-14-normal"
- >
- dataShare.part9
- </span>
- <span
- className="text-14-normal"
- >
- dataShare.part10
- </span>
- <span
- className="text-14-normal"
- dangerouslySetInnerHTML={
- Object {
- "__html": "dataShare.link1",
- }
- }
- />
- </div>
+ dataShare.title1
+ </h1>
+ <p
+ class="text-14-normal"
+ >
+ dataShare.part1
+ </p>
+ <p
+ class="text-14-normal"
+ >
+ dataShare.part2
+ </p>
+ <p
+ class="text-14-normal"
+ >
+ dataShare.part3
+ </p>
+ <ul
+ class="text-14-normal"
+ >
+ <li
+ class="text-14-normal"
+ >
+ dataShare.item1
+ </li>
+ <li
+ class="text-14-normal"
+ >
+ dataShare.item2
+ </li>
+ <li
+ class="text-14-normal"
+ >
+ dataShare.item3
+ </li>
+ </ul>
+ <p
+ class="text-14-normal"
+ >
+ dataShare.part4
+ </p>
+ <p
+ class="text-14-normal"
+ >
+ dataShare.part5
+ </p>
+ <p
+ class="text-14-normal"
+ >
+ dataShare.part6
+ </p>
+ <p
+ class="text-14-normal"
+ >
+ dataShare.part7
+ </p>
+ <p
+ class="text-14-normal"
+ >
+ dataShare.part8
+ </p>
+ <span
+ class="text-14-normal"
+ >
+ dataShare.part9
+ </span>
+ <span
+ class="text-14-normal"
+ >
+ dataShare.part10
+ </span>
+ <span
+ class="text-14-normal"
+ >
+ dataShare.link1
+ </span>
</div>
- </DataShareConsentContent>
-</Provider>
+ </div>
+</div>
`;
exports[`DataShareConsentContent component should be rendered correctly without first connexion text 1`] = `
-<Provider
- store={
- Object {
- "clearActions": [Function],
- "dispatch": [Function],
- "getActions": [Function],
- "getState": [Function],
- "replaceReducer": [Function],
- "subscribe": [Function],
- }
- }
->
- <DataShareConsentContent>
+<div>
+ <div
+ class="dataShare-content-root"
+ >
<div
- className="dataShare-content-root"
+ class="dataShare-content-wrapper"
>
- <div
- className="dataShare-content-wrapper"
+ <h1
+ class="dataShare-content-title text-22-normal"
>
- <h1
- className="dataShare-content-title text-22-normal"
- >
- dataShare.title1Update
- </h1>
- <p
- className="text-14-normal"
- >
- dataShare.title2Update
- </p>
- <p
- className="text-14-normal"
- >
- dataShare.part1
- </p>
- <p
- className="text-14-normal"
- >
- dataShare.part2
- </p>
- <p
- className="text-14-normal"
- >
- dataShare.part3
- </p>
- <ul
- className="text-14-normal"
- >
- <li
- className="text-14-normal"
- >
- dataShare.item1
- </li>
- <li
- className="text-14-normal"
- >
- dataShare.item2
- </li>
- <li
- className="text-14-normal"
- >
- dataShare.item3
- </li>
- </ul>
- <p
- className="text-14-normal"
- >
- dataShare.part4
- </p>
- <p
- className="text-14-normal"
- >
- dataShare.part5
- </p>
- <p
- className="text-14-normal"
- >
- dataShare.part6
- </p>
- <p
- className="text-14-normal"
- >
- dataShare.part7
- </p>
- <p
- className="text-14-normal"
- >
- dataShare.part8
- </p>
- <span
- className="text-14-normal"
- >
- dataShare.part9
- </span>
- <span
- className="text-14-normal"
- >
- dataShare.part10
- </span>
- <span
- className="text-14-normal"
- dangerouslySetInnerHTML={
- Object {
- "__html": "dataShare.link1",
- }
- }
- />
- </div>
+ dataShare.title1Update
+ </h1>
+ <p
+ class="text-14-normal"
+ >
+ dataShare.title2Update
+ </p>
+ <p
+ class="text-14-normal"
+ >
+ dataShare.part1
+ </p>
+ <p
+ class="text-14-normal"
+ >
+ dataShare.part2
+ </p>
+ <p
+ class="text-14-normal"
+ >
+ dataShare.part3
+ </p>
+ <ul
+ class="text-14-normal"
+ >
+ <li
+ class="text-14-normal"
+ >
+ dataShare.item1
+ </li>
+ <li
+ class="text-14-normal"
+ >
+ dataShare.item2
+ </li>
+ <li
+ class="text-14-normal"
+ >
+ dataShare.item3
+ </li>
+ </ul>
+ <p
+ class="text-14-normal"
+ >
+ dataShare.part4
+ </p>
+ <p
+ class="text-14-normal"
+ >
+ dataShare.part5
+ </p>
+ <p
+ class="text-14-normal"
+ >
+ dataShare.part6
+ </p>
+ <p
+ class="text-14-normal"
+ >
+ dataShare.part7
+ </p>
+ <p
+ class="text-14-normal"
+ >
+ dataShare.part8
+ </p>
+ <span
+ class="text-14-normal"
+ >
+ dataShare.part9
+ </span>
+ <span
+ class="text-14-normal"
+ >
+ dataShare.part10
+ </span>
+ <span
+ class="text-14-normal"
+ >
+ dataShare.link1
+ </span>
</div>
- </DataShareConsentContent>
-</Provider>
+ </div>
+</div>
`;
diff --git a/src/components/Terms/__snapshots__/LegalNoticeModal.spec.tsx.snap b/src/components/Terms/__snapshots__/LegalNoticeModal.spec.tsx.snap
index 81580a001b627d3cc9f40fa6bd9941ffe8155734..2f134b674a199fe9c243f1a07083daad1b0f2310 100644
--- a/src/components/Terms/__snapshots__/LegalNoticeModal.spec.tsx.snap
+++ b/src/components/Terms/__snapshots__/LegalNoticeModal.spec.tsx.snap
@@ -1,1482 +1,346 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`LegalNoticeModal component should be rendered correctly 1`] = `
-<LegalNoticeModal
- handleCloseClick={[MockFunction]}
- open={true}
+<body
+ style="padding-right: 0px; overflow: hidden;"
>
- <WithStyles(ForwardRef(Dialog))
- aria-labelledby="accessibility-title"
- classes={
- Object {
- "paper": "modal-paper",
- "root": "modal-root",
- }
- }
- onClose={[MockFunction]}
- open={true}
+ <div
+ aria-hidden="true"
+ />
+ <div
+ class="MuiDialog-root modal-root"
+ role="presentation"
+ style="position: fixed; z-index: 1300; right: 0px; bottom: 0px; top: 0px; left: 0px;"
>
- <ForwardRef(Dialog)
- aria-labelledby="accessibility-title"
- classes={
- Object {
- "container": "MuiDialog-container",
- "paper": "MuiDialog-paper modal-paper",
- "paperFullScreen": "MuiDialog-paperFullScreen",
- "paperFullWidth": "MuiDialog-paperFullWidth",
- "paperScrollBody": "MuiDialog-paperScrollBody",
- "paperScrollPaper": "MuiDialog-paperScrollPaper",
- "paperWidthFalse": "MuiDialog-paperWidthFalse",
- "paperWidthLg": "MuiDialog-paperWidthLg",
- "paperWidthMd": "MuiDialog-paperWidthMd",
- "paperWidthSm": "MuiDialog-paperWidthSm",
- "paperWidthXl": "MuiDialog-paperWidthXl",
- "paperWidthXs": "MuiDialog-paperWidthXs",
- "root": "MuiDialog-root modal-root",
- "scrollBody": "MuiDialog-scrollBody",
- "scrollPaper": "MuiDialog-scrollPaper",
- }
- }
- onClose={[MockFunction]}
- open={true}
+ <div
+ aria-hidden="true"
+ class="MuiBackdrop-root"
+ style="opacity: 1; webkit-transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"
+ />
+ <div
+ data-test="sentinelStart"
+ tabindex="0"
+ />
+ <div
+ class="MuiDialog-container MuiDialog-scrollPaper"
+ role="none presentation"
+ style="opacity: 1; webkit-transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"
+ tabindex="-1"
>
- <ForwardRef(Modal)
- BackdropComponent={
- Object {
- "$$typeof": Symbol(react.forward_ref),
- "Naked": Object {
- "$$typeof": Symbol(react.forward_ref),
- "propTypes": Object {
- "children": [Function],
- "className": [Function],
- "classes": [Function],
- "invisible": [Function],
- "open": [Function],
- "transitionDuration": [Function],
- },
- "render": [Function],
- },
- "displayName": "WithStyles(ForwardRef(Backdrop))",
- "options": Object {
- "defaultTheme": Object {
- "breakpoints": Object {
- "between": [Function],
- "down": [Function],
- "keys": Array [
- "xs",
- "sm",
- "md",
- "lg",
- "xl",
- ],
- "only": [Function],
- "up": [Function],
- "values": Object {
- "lg": 1280,
- "md": 960,
- "sm": 600,
- "xl": 1920,
- "xs": 0,
- },
- "width": [Function],
- },
- "direction": "ltr",
- "mixins": Object {
- "gutters": [Function],
- "toolbar": Object {
- "@media (min-width:0px) and (orientation: landscape)": Object {
- "minHeight": 48,
- },
- "@media (min-width:600px)": Object {
- "minHeight": 64,
- },
- "minHeight": 56,
- },
- },
- "overrides": Object {},
- "palette": Object {
- "action": Object {
- "activatedOpacity": 0.12,
- "active": "rgba(0, 0, 0, 0.54)",
- "disabled": "rgba(0, 0, 0, 0.26)",
- "disabledBackground": "rgba(0, 0, 0, 0.12)",
- "disabledOpacity": 0.38,
- "focus": "rgba(0, 0, 0, 0.12)",
- "focusOpacity": 0.12,
- "hover": "rgba(0, 0, 0, 0.04)",
- "hoverOpacity": 0.04,
- "selected": "rgba(0, 0, 0, 0.08)",
- "selectedOpacity": 0.08,
- },
- "augmentColor": [Function],
- "background": Object {
- "default": "#fafafa",
- "paper": "#fff",
- },
- "common": Object {
- "black": "#000",
- "white": "#fff",
- },
- "contrastThreshold": 3,
- "divider": "rgba(0, 0, 0, 0.12)",
- "error": Object {
- "contrastText": "#fff",
- "dark": "#d32f2f",
- "light": "#e57373",
- "main": "#f44336",
- },
- "getContrastText": [Function],
- "grey": Object {
- "100": "#f5f5f5",
- "200": "#eeeeee",
- "300": "#e0e0e0",
- "400": "#bdbdbd",
- "50": "#fafafa",
- "500": "#9e9e9e",
- "600": "#757575",
- "700": "#616161",
- "800": "#424242",
- "900": "#212121",
- "A100": "#d5d5d5",
- "A200": "#aaaaaa",
- "A400": "#303030",
- "A700": "#616161",
- },
- "info": Object {
- "contrastText": "#fff",
- "dark": "#1976d2",
- "light": "#64b5f6",
- "main": "#2196f3",
- },
- "primary": Object {
- "contrastText": "#fff",
- "dark": "#303f9f",
- "light": "#7986cb",
- "main": "#3f51b5",
- },
- "secondary": Object {
- "contrastText": "#fff",
- "dark": "#c51162",
- "light": "#ff4081",
- "main": "#f50057",
- },
- "success": Object {
- "contrastText": "rgba(0, 0, 0, 0.87)",
- "dark": "#388e3c",
- "light": "#81c784",
- "main": "#4caf50",
- },
- "text": Object {
- "disabled": "rgba(0, 0, 0, 0.38)",
- "hint": "rgba(0, 0, 0, 0.38)",
- "primary": "rgba(0, 0, 0, 0.87)",
- "secondary": "rgba(0, 0, 0, 0.54)",
- },
- "tonalOffset": 0.2,
- "type": "light",
- "warning": Object {
- "contrastText": "rgba(0, 0, 0, 0.87)",
- "dark": "#f57c00",
- "light": "#ffb74d",
- "main": "#ff9800",
- },
- },
- "props": Object {},
- "shadows": Array [
- "none",
- "0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12)",
- "0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12)",
- "0px 3px 3px -2px rgba(0,0,0,0.2),0px 3px 4px 0px rgba(0,0,0,0.14),0px 1px 8px 0px rgba(0,0,0,0.12)",
- "0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12)",
- "0px 3px 5px -1px rgba(0,0,0,0.2),0px 5px 8px 0px rgba(0,0,0,0.14),0px 1px 14px 0px rgba(0,0,0,0.12)",
- "0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12)",
- "0px 4px 5px -2px rgba(0,0,0,0.2),0px 7px 10px 1px rgba(0,0,0,0.14),0px 2px 16px 1px rgba(0,0,0,0.12)",
- "0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12)",
- "0px 5px 6px -3px rgba(0,0,0,0.2),0px 9px 12px 1px rgba(0,0,0,0.14),0px 3px 16px 2px rgba(0,0,0,0.12)",
- "0px 6px 6px -3px rgba(0,0,0,0.2),0px 10px 14px 1px rgba(0,0,0,0.14),0px 4px 18px 3px rgba(0,0,0,0.12)",
- "0px 6px 7px -4px rgba(0,0,0,0.2),0px 11px 15px 1px rgba(0,0,0,0.14),0px 4px 20px 3px rgba(0,0,0,0.12)",
- "0px 7px 8px -4px rgba(0,0,0,0.2),0px 12px 17px 2px rgba(0,0,0,0.14),0px 5px 22px 4px rgba(0,0,0,0.12)",
- "0px 7px 8px -4px rgba(0,0,0,0.2),0px 13px 19px 2px rgba(0,0,0,0.14),0px 5px 24px 4px rgba(0,0,0,0.12)",
- "0px 7px 9px -4px rgba(0,0,0,0.2),0px 14px 21px 2px rgba(0,0,0,0.14),0px 5px 26px 4px rgba(0,0,0,0.12)",
- "0px 8px 9px -5px rgba(0,0,0,0.2),0px 15px 22px 2px rgba(0,0,0,0.14),0px 6px 28px 5px rgba(0,0,0,0.12)",
- "0px 8px 10px -5px rgba(0,0,0,0.2),0px 16px 24px 2px rgba(0,0,0,0.14),0px 6px 30px 5px rgba(0,0,0,0.12)",
- "0px 8px 11px -5px rgba(0,0,0,0.2),0px 17px 26px 2px rgba(0,0,0,0.14),0px 6px 32px 5px rgba(0,0,0,0.12)",
- "0px 9px 11px -5px rgba(0,0,0,0.2),0px 18px 28px 2px rgba(0,0,0,0.14),0px 7px 34px 6px rgba(0,0,0,0.12)",
- "0px 9px 12px -6px rgba(0,0,0,0.2),0px 19px 29px 2px rgba(0,0,0,0.14),0px 7px 36px 6px rgba(0,0,0,0.12)",
- "0px 10px 13px -6px rgba(0,0,0,0.2),0px 20px 31px 3px rgba(0,0,0,0.14),0px 8px 38px 7px rgba(0,0,0,0.12)",
- "0px 10px 13px -6px rgba(0,0,0,0.2),0px 21px 33px 3px rgba(0,0,0,0.14),0px 8px 40px 7px rgba(0,0,0,0.12)",
- "0px 10px 14px -6px rgba(0,0,0,0.2),0px 22px 35px 3px rgba(0,0,0,0.14),0px 8px 42px 7px rgba(0,0,0,0.12)",
- "0px 11px 14px -7px rgba(0,0,0,0.2),0px 23px 36px 3px rgba(0,0,0,0.14),0px 9px 44px 8px rgba(0,0,0,0.12)",
- "0px 11px 15px -7px rgba(0,0,0,0.2),0px 24px 38px 3px rgba(0,0,0,0.14),0px 9px 46px 8px rgba(0,0,0,0.12)",
- ],
- "shape": Object {
- "borderRadius": 4,
- },
- "spacing": [Function],
- "transitions": Object {
- "create": [Function],
- "duration": Object {
- "complex": 375,
- "enteringScreen": 225,
- "leavingScreen": 195,
- "short": 250,
- "shorter": 200,
- "shortest": 150,
- "standard": 300,
- },
- "easing": Object {
- "easeIn": "cubic-bezier(0.4, 0, 1, 1)",
- "easeInOut": "cubic-bezier(0.4, 0, 0.2, 1)",
- "easeOut": "cubic-bezier(0.0, 0, 0.2, 1)",
- "sharp": "cubic-bezier(0.4, 0, 0.6, 1)",
- },
- "getAutoHeightDuration": [Function],
- },
- "typography": Object {
- "body1": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "1rem",
- "fontWeight": 400,
- "letterSpacing": "0.00938em",
- "lineHeight": 1.5,
- },
- "body2": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "0.875rem",
- "fontWeight": 400,
- "letterSpacing": "0.01071em",
- "lineHeight": 1.43,
- },
- "button": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "0.875rem",
- "fontWeight": 500,
- "letterSpacing": "0.02857em",
- "lineHeight": 1.75,
- "textTransform": "uppercase",
- },
- "caption": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "0.75rem",
- "fontWeight": 400,
- "letterSpacing": "0.03333em",
- "lineHeight": 1.66,
- },
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": 14,
- "fontWeightBold": 700,
- "fontWeightLight": 300,
- "fontWeightMedium": 500,
- "fontWeightRegular": 400,
- "h1": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "6rem",
- "fontWeight": 300,
- "letterSpacing": "-0.01562em",
- "lineHeight": 1.167,
- },
- "h2": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "3.75rem",
- "fontWeight": 300,
- "letterSpacing": "-0.00833em",
- "lineHeight": 1.2,
- },
- "h3": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "3rem",
- "fontWeight": 400,
- "letterSpacing": "0em",
- "lineHeight": 1.167,
- },
- "h4": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "2.125rem",
- "fontWeight": 400,
- "letterSpacing": "0.00735em",
- "lineHeight": 1.235,
- },
- "h5": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "1.5rem",
- "fontWeight": 400,
- "letterSpacing": "0em",
- "lineHeight": 1.334,
- },
- "h6": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "1.25rem",
- "fontWeight": 500,
- "letterSpacing": "0.0075em",
- "lineHeight": 1.6,
- },
- "htmlFontSize": 16,
- "overline": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "0.75rem",
- "fontWeight": 400,
- "letterSpacing": "0.08333em",
- "lineHeight": 2.66,
- "textTransform": "uppercase",
- },
- "pxToRem": [Function],
- "round": [Function],
- "subtitle1": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "1rem",
- "fontWeight": 400,
- "letterSpacing": "0.00938em",
- "lineHeight": 1.75,
- },
- "subtitle2": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "0.875rem",
- "fontWeight": 500,
- "letterSpacing": "0.00714em",
- "lineHeight": 1.57,
- },
- },
- "zIndex": Object {
- "appBar": 1100,
- "drawer": 1200,
- "mobileStepper": 1000,
- "modal": 1300,
- "snackbar": 1400,
- "speedDial": 1050,
- "tooltip": 1500,
- },
- },
- "name": "MuiBackdrop",
- },
- "propTypes": Object {
- "classes": [Function],
- "innerRef": [Function],
- },
- "render": [Function],
- "useStyles": [Function],
- }
- }
- BackdropProps={
- Object {
- "transitionDuration": Object {
- "enter": 225,
- "exit": 195,
- },
- }
- }
- className="MuiDialog-root modal-root"
- closeAfterTransition={true}
- disableEscapeKeyDown={false}
- onClose={[MockFunction]}
- open={true}
+ <div
+ aria-labelledby="accessibility-title"
+ class="MuiPaper-root MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm MuiPaper-elevation24 MuiPaper-rounded"
+ role="dialog"
>
- <ForwardRef(Portal)
- disablePortal={false}
+ <div
+ id="accessibility-title"
>
- <Portal
- containerInfo={
- <body
- style="padding-right: 0px; overflow: hidden;"
- >
- <div
- class="MuiDialog-root modal-root"
- role="presentation"
- style="position: fixed; z-index: 1300; right: 0px; bottom: 0px; top: 0px; left: 0px;"
- >
- <div
- aria-hidden="true"
- class="MuiBackdrop-root"
- style="opacity: 1; webkit-transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"
- />
- <div
- data-test="sentinelStart"
- tabindex="0"
- />
- <div
- class="MuiDialog-container MuiDialog-scrollPaper"
- role="none presentation"
- style="opacity: 1; webkit-transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"
- tabindex="-1"
- >
- <div
- aria-labelledby="accessibility-title"
- class="MuiPaper-root MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm MuiPaper-elevation24 MuiPaper-rounded"
- role="dialog"
- >
- <div
- id="accessibility-title"
- >
- legal.title_legal
- </div>
- <button
- aria-label="feedback.accessibility.button_close"
- class="MuiButtonBase-root MuiIconButton-root modal-paper-close-button"
- tabindex="0"
- type="button"
- >
- <span
- class="MuiIconButton-label"
- >
- <svg
- class="styles__icon___23x3R"
- height="16"
- width="16"
- >
- <use
- xlink:href="#test-file-stub"
- />
- </svg>
- </span>
- <span
- class="MuiTouchRipple-root"
- />
- </button>
- <div
- class="legal-notice-root"
- >
- <div
- class="legal-notice-content"
- >
- <p
- class="version"
- >
- legal.version
- </p>
- <p>
- legal.site
- </p>
- <p>
- legal.adress
- </p>
- <p>
- legal.phone
- </p>
- <p
- class="ln-contact"
- >
- legal.mail
- </p>
- <div
- class="text-16-normal"
- >
- <div
- class="legal-notice-oneline"
- >
- <span
- class="text-14-normal"
- >
- legal.p1b
- </span>
- legal.p1
- </div>
- <div
- class="legal-notice-oneline"
- >
- <span
- class="text-14-normal"
- >
- legal.p2b
- </span>
- legal.p2
- </div>
- <div
- class="legal-notice-oneline"
- >
- <span
- class="text-14-normal"
- >
- legal.p3b
- </span>
- legal.p3
- </div>
- <div
- class="legal-notice-oneline"
- >
- <span
- class="text-14-normal"
- >
- legal.p4b
- </span>
- legal.p4
- </div>
- <div
- class="legal-notice-oneline"
- >
- <span
- class="text-14-normal"
- >
- legal.p5b
- </span>
- legal.p5
- </div>
- <div
- class="legal-notice-oneline"
- >
- <span
- class="text-14-normal"
- >
- legal.p6b
- </span>
- legal.p6
- </div>
- <div
- class="legal-notice-part"
- >
- <h3>
-
- legal.title1
- </h3>
- <p>
- legal.part1
- </p>
- </div>
- <div
- class="legal-notice-part"
- >
- <h3>
- legal.title2
- </h3>
- <p>
- legal.part2
- </p>
- <ul>
- <li>
- legal.part2-1
- </li>
- <li>
- legal.part2-2
- </li>
- <li>
- legal.part2-3
- <ul>
- <li>
- legal.part2-3-1
- </li>
- <li>
- legal.part2-3-2
- </li>
- <li>
- legal.part2-3-3
- </li>
- <li>
- legal.part2-3-4
- </li>
- <li>
- legal.part2-3-5
- </li>
- </ul>
- </li>
- <li>
- legal.part2-4
- </li>
- </ul>
- <p>
- legal.part2-5
- </p>
- <p>
- legal.part2-6
- </p>
- <ul>
- <li>
- legal.part2-6-1
- </li>
- <li>
- legal.part2-6-2
- </li>
- <li>
- legal.part2-6-3
- </li>
- </ul>
- <p>
- legal.part2-7
- </p>
- <p>
- legal.part2-8
- </p>
- <p>
- legal.part2-9
- </p>
- <p>
- legal.part2-10
- </p>
- <p>
- legal.part2-11
- </p>
- </div>
- <div
- class="legal-notice-part"
- >
- <h3>
- legal.title3
- </h3>
- <p>
- legal.part3-1
- </p>
- <p>
- legal.part3-2
- </p>
- </div>
- <div
- class="legal-notice-part"
- >
- <h3>
- legal.title4
- </h3>
- <p>
- legal.part4-1
- </p>
- <p>
- legal.part4-2
- </p>
- </div>
- <div
- class="legal-notice-part"
- >
- <h3>
- legal.title5
- </h3>
- <p>
- legal.part5
- </p>
- </div>
- <div
- class="legal-notice-part"
- >
- <h3>
- legal.title6
- </h3>
- <p>
- legal.part6
- </p>
- </div>
- <div
- class="legal-notice-part"
- >
- <h3>
- legal.title7
- </h3>
- <p>
- legal.part7-1
- </p>
- <p>
- legal.part7-2
- </p>
- <p>
- legal.part7-3
- </p>
- </div>
- <div
- class="legal-notice-part"
- >
- <h3>
- legal.title8
- </h3>
- <p>
- legal.part8
- </p>
- </div>
- <div
- class="legal-notice-part"
- >
- <h3>
- legal.title9
- </h3>
- <p>
- legal.part9-1
- </p>
- <p>
- legal.part9-2
- </p>
- </div>
- </div>
- </div>
- </div>
- <button
- aria-label="gcu_modal.accessibility.button_accept"
- class="MuiButtonBase-root MuiButton-root btn-profile-next rounded MuiButton-text gcu-modal-button"
- tabindex="0"
- type="button"
- >
- <span
- class="MuiButton-label text-16-bold"
- >
- legal.accessibility.button_close
- </span>
- <span
- class="MuiTouchRipple-root"
- />
- </button>
- </div>
- </div>
- <div
- data-test="sentinelEnd"
- tabindex="0"
- />
- </div>
- </body>
- }
+ legal.title_legal
+ </div>
+ <button
+ aria-label="feedback.accessibility.button_close"
+ class="MuiButtonBase-root MuiIconButton-root modal-paper-close-button"
+ tabindex="0"
+ type="button"
+ >
+ <span
+ class="MuiIconButton-label"
>
+ <svg
+ class="styles__icon___23x3R"
+ height="16"
+ width="16"
+ >
+ <use
+ xlink:href="#test-file-stub"
+ />
+ </svg>
+ </span>
+ <span
+ class="MuiTouchRipple-root"
+ />
+ </button>
+ <div
+ class="legal-notice-root"
+ >
+ <div
+ class="legal-notice-content"
+ >
+ <p
+ class="version"
+ >
+ legal.version
+ </p>
+ <p>
+ legal.site
+ </p>
+ <p>
+ legal.adress
+ </p>
+ <p>
+ legal.phone
+ </p>
+ <p
+ class="ln-contact"
+ >
+ legal.mail
+ </p>
<div
- className="MuiDialog-root modal-root"
- onKeyDown={[Function]}
- role="presentation"
- style={
- Object {
- "bottom": 0,
- "left": 0,
- "position": "fixed",
- "right": 0,
- "top": 0,
- "zIndex": 1300,
- }
- }
+ class="text-16-normal"
>
- <WithStyles(ForwardRef(Backdrop))
- onClick={[Function]}
- open={true}
- transitionDuration={
- Object {
- "enter": 225,
- "exit": 195,
- }
- }
+ <div
+ class="legal-notice-oneline"
+ >
+ <span
+ class="text-14-normal"
+ >
+ legal.p1b
+ </span>
+ legal.p1
+ </div>
+ <div
+ class="legal-notice-oneline"
+ >
+ <span
+ class="text-14-normal"
+ >
+ legal.p2b
+ </span>
+ legal.p2
+ </div>
+ <div
+ class="legal-notice-oneline"
+ >
+ <span
+ class="text-14-normal"
+ >
+ legal.p3b
+ </span>
+ legal.p3
+ </div>
+ <div
+ class="legal-notice-oneline"
>
- <ForwardRef(Backdrop)
- classes={
- Object {
- "invisible": "MuiBackdrop-invisible",
- "root": "MuiBackdrop-root",
- }
- }
- onClick={[Function]}
- open={true}
- transitionDuration={
- Object {
- "enter": 225,
- "exit": 195,
- }
- }
+ <span
+ class="text-14-normal"
>
- <ForwardRef(Fade)
- in={true}
- onClick={[Function]}
- timeout={
- Object {
- "enter": 225,
- "exit": 195,
- }
- }
- >
- <Transition
- appear={true}
- enter={true}
- exit={true}
- in={true}
- mountOnEnter={false}
- onClick={[Function]}
- onEnter={[Function]}
- onEntered={[Function]}
- onEntering={[Function]}
- onExit={[Function]}
- onExited={[Function]}
- onExiting={[Function]}
- timeout={
- Object {
- "enter": 225,
- "exit": 195,
- }
- }
- unmountOnExit={false}
- >
- <div
- aria-hidden={true}
- className="MuiBackdrop-root"
- onClick={[Function]}
- style={
- Object {
- "opacity": 1,
- "visibility": undefined,
- }
- }
- />
- </Transition>
- </ForwardRef(Fade)>
- </ForwardRef(Backdrop)>
- </WithStyles(ForwardRef(Backdrop))>
- <Unstable_TrapFocus
- disableAutoFocus={false}
- disableEnforceFocus={false}
- disableRestoreFocus={false}
- getDoc={[Function]}
- isEnabled={[Function]}
- open={true}
+ legal.p4b
+ </span>
+ legal.p4
+ </div>
+ <div
+ class="legal-notice-oneline"
>
- <div
- data-test="sentinelStart"
- tabIndex={0}
- />
- <ForwardRef(Fade)
- appear={true}
- in={true}
- onEnter={[Function]}
- onExited={[Function]}
- role="none presentation"
- tabIndex="-1"
- timeout={
- Object {
- "enter": 225,
- "exit": 195,
- }
- }
+ <span
+ class="text-14-normal"
>
- <Transition
- appear={true}
- enter={true}
- exit={true}
- in={true}
- mountOnEnter={false}
- onEnter={[Function]}
- onEntered={[Function]}
- onEntering={[Function]}
- onExit={[Function]}
- onExited={[Function]}
- onExiting={[Function]}
- role="none presentation"
- tabIndex="-1"
- timeout={
- Object {
- "enter": 225,
- "exit": 195,
- }
- }
- unmountOnExit={false}
- >
- <div
- className="MuiDialog-container MuiDialog-scrollPaper"
- onMouseDown={[Function]}
- onMouseUp={[Function]}
- role="none presentation"
- style={
- Object {
- "opacity": 1,
- "visibility": undefined,
- }
- }
- tabIndex="-1"
- >
- <WithStyles(ForwardRef(Paper))
- aria-labelledby="accessibility-title"
- className="MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm"
- elevation={24}
- role="dialog"
- >
- <ForwardRef(Paper)
- aria-labelledby="accessibility-title"
- className="MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm"
- classes={
- Object {
- "elevation0": "MuiPaper-elevation0",
- "elevation1": "MuiPaper-elevation1",
- "elevation10": "MuiPaper-elevation10",
- "elevation11": "MuiPaper-elevation11",
- "elevation12": "MuiPaper-elevation12",
- "elevation13": "MuiPaper-elevation13",
- "elevation14": "MuiPaper-elevation14",
- "elevation15": "MuiPaper-elevation15",
- "elevation16": "MuiPaper-elevation16",
- "elevation17": "MuiPaper-elevation17",
- "elevation18": "MuiPaper-elevation18",
- "elevation19": "MuiPaper-elevation19",
- "elevation2": "MuiPaper-elevation2",
- "elevation20": "MuiPaper-elevation20",
- "elevation21": "MuiPaper-elevation21",
- "elevation22": "MuiPaper-elevation22",
- "elevation23": "MuiPaper-elevation23",
- "elevation24": "MuiPaper-elevation24",
- "elevation3": "MuiPaper-elevation3",
- "elevation4": "MuiPaper-elevation4",
- "elevation5": "MuiPaper-elevation5",
- "elevation6": "MuiPaper-elevation6",
- "elevation7": "MuiPaper-elevation7",
- "elevation8": "MuiPaper-elevation8",
- "elevation9": "MuiPaper-elevation9",
- "outlined": "MuiPaper-outlined",
- "root": "MuiPaper-root",
- "rounded": "MuiPaper-rounded",
- }
- }
- elevation={24}
- role="dialog"
- >
- <div
- aria-labelledby="accessibility-title"
- className="MuiPaper-root MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm MuiPaper-elevation24 MuiPaper-rounded"
- role="dialog"
- >
- <div
- id="accessibility-title"
- >
- legal.title_legal
- </div>
- <WithStyles(ForwardRef(IconButton))
- aria-label="feedback.accessibility.button_close"
- className="modal-paper-close-button"
- onClick={[MockFunction]}
- >
- <ForwardRef(IconButton)
- aria-label="feedback.accessibility.button_close"
- className="modal-paper-close-button"
- classes={
- Object {
- "colorInherit": "MuiIconButton-colorInherit",
- "colorPrimary": "MuiIconButton-colorPrimary",
- "colorSecondary": "MuiIconButton-colorSecondary",
- "disabled": "Mui-disabled",
- "edgeEnd": "MuiIconButton-edgeEnd",
- "edgeStart": "MuiIconButton-edgeStart",
- "label": "MuiIconButton-label",
- "root": "MuiIconButton-root",
- "sizeSmall": "MuiIconButton-sizeSmall",
- }
- }
- onClick={[MockFunction]}
- >
- <WithStyles(ForwardRef(ButtonBase))
- aria-label="feedback.accessibility.button_close"
- centerRipple={true}
- className="MuiIconButton-root modal-paper-close-button"
- disabled={false}
- focusRipple={true}
- onClick={[MockFunction]}
- >
- <ForwardRef(ButtonBase)
- aria-label="feedback.accessibility.button_close"
- centerRipple={true}
- className="MuiIconButton-root modal-paper-close-button"
- classes={
- Object {
- "disabled": "Mui-disabled",
- "focusVisible": "Mui-focusVisible",
- "root": "MuiButtonBase-root",
- }
- }
- disabled={false}
- focusRipple={true}
- onClick={[MockFunction]}
- >
- <button
- aria-label="feedback.accessibility.button_close"
- className="MuiButtonBase-root MuiIconButton-root modal-paper-close-button"
- disabled={false}
- onBlur={[Function]}
- onClick={[MockFunction]}
- onDragLeave={[Function]}
- onFocus={[Function]}
- onKeyDown={[Function]}
- onKeyUp={[Function]}
- onMouseDown={[Function]}
- onMouseLeave={[Function]}
- onMouseUp={[Function]}
- onTouchEnd={[Function]}
- onTouchMove={[Function]}
- onTouchStart={[Function]}
- tabIndex={0}
- type="button"
- >
- <span
- className="MuiIconButton-label"
- >
- <Icon
- icon="test-file-stub"
- size={16}
- spin={false}
- >
- <Component
- className="styles__icon___23x3R"
- height={16}
- style={Object {}}
- width={16}
- >
- <svg
- className="styles__icon___23x3R"
- height={16}
- style={Object {}}
- width={16}
- >
- <use
- xlinkHref="#test-file-stub"
- />
- </svg>
- </Component>
- </Icon>
- </span>
- <WithStyles(memo)
- center={true}
- >
- <ForwardRef(TouchRipple)
- center={true}
- classes={
- Object {
- "child": "MuiTouchRipple-child",
- "childLeaving": "MuiTouchRipple-childLeaving",
- "childPulsate": "MuiTouchRipple-childPulsate",
- "ripple": "MuiTouchRipple-ripple",
- "ripplePulsate": "MuiTouchRipple-ripplePulsate",
- "rippleVisible": "MuiTouchRipple-rippleVisible",
- "root": "MuiTouchRipple-root",
- }
- }
- >
- <span
- className="MuiTouchRipple-root"
- >
- <TransitionGroup
- childFactory={[Function]}
- component={null}
- exit={true}
- />
- </span>
- </ForwardRef(TouchRipple)>
- </WithStyles(memo)>
- </button>
- </ForwardRef(ButtonBase)>
- </WithStyles(ForwardRef(ButtonBase))>
- </ForwardRef(IconButton)>
- </WithStyles(ForwardRef(IconButton))>
- <LegalNoticeContent>
- <div
- className="legal-notice-root"
- >
- <div
- className="legal-notice-content"
- >
- <p
- className="version"
- >
- legal.version
- </p>
- <p
- dangerouslySetInnerHTML={
- Object {
- "__html": "legal.site",
- }
- }
- />
- <p>
- legal.adress
- </p>
- <p>
- legal.phone
- </p>
- <p
- className="ln-contact"
- dangerouslySetInnerHTML={
- Object {
- "__html": "legal.mail",
- }
- }
- />
- <div
- className="text-16-normal"
- >
- <div
- className="legal-notice-oneline"
- >
- <span
- className="text-14-normal"
- >
- legal.p1b
- </span>
- legal.p1
- </div>
- <div
- className="legal-notice-oneline"
- >
- <span
- className="text-14-normal"
- >
- legal.p2b
- </span>
- legal.p2
- </div>
- <div
- className="legal-notice-oneline"
- >
- <span
- className="text-14-normal"
- >
- legal.p3b
- </span>
- legal.p3
- </div>
- <div
- className="legal-notice-oneline"
- >
- <span
- className="text-14-normal"
- >
- legal.p4b
- </span>
- legal.p4
- </div>
- <div
- className="legal-notice-oneline"
- >
- <span
- className="text-14-normal"
- >
- legal.p5b
- </span>
- legal.p5
- </div>
- <div
- className="legal-notice-oneline"
- >
- <span
- className="text-14-normal"
- >
- legal.p6b
- </span>
- legal.p6
- </div>
- <div
- className="legal-notice-part"
- >
- <h3>
-
- legal.title1
- </h3>
- <p>
- legal.part1
- </p>
- </div>
- <div
- className="legal-notice-part"
- >
- <h3>
- legal.title2
- </h3>
- <p>
- legal.part2
- </p>
- <ul>
- <li>
- legal.part2-1
- </li>
- <li>
- legal.part2-2
- </li>
- <li>
- legal.part2-3
- <ul>
- <li>
- legal.part2-3-1
- </li>
- <li>
- legal.part2-3-2
- </li>
- <li>
- legal.part2-3-3
- </li>
- <li>
- legal.part2-3-4
- </li>
- <li
- dangerouslySetInnerHTML={
- Object {
- "__html": "legal.part2-3-5",
- }
- }
- />
- </ul>
- </li>
- <li>
- legal.part2-4
- </li>
- </ul>
- <p>
- legal.part2-5
- </p>
- <p>
- legal.part2-6
- </p>
- <ul>
- <li>
- legal.part2-6-1
- </li>
- <li>
- legal.part2-6-2
- </li>
- <li>
- legal.part2-6-3
- </li>
- </ul>
- <p
- dangerouslySetInnerHTML={
- Object {
- "__html": "legal.part2-7",
- }
- }
- />
- <p>
- legal.part2-8
- </p>
- <p>
- legal.part2-9
- </p>
- <p
- dangerouslySetInnerHTML={
- Object {
- "__html": "legal.part2-10",
- }
- }
- />
- <p>
- legal.part2-11
- </p>
- </div>
- <div
- className="legal-notice-part"
- >
- <h3>
- legal.title3
- </h3>
- <p>
- legal.part3-1
- </p>
- <p>
- legal.part3-2
- </p>
- </div>
- <div
- className="legal-notice-part"
- >
- <h3>
- legal.title4
- </h3>
- <p>
- legal.part4-1
- </p>
- <p>
- legal.part4-2
- </p>
- </div>
- <div
- className="legal-notice-part"
- >
- <h3>
- legal.title5
- </h3>
- <p>
- legal.part5
- </p>
- </div>
- <div
- className="legal-notice-part"
- >
- <h3>
- legal.title6
- </h3>
- <p>
- legal.part6
- </p>
- </div>
- <div
- className="legal-notice-part"
- >
- <h3>
- legal.title7
- </h3>
- <p>
- legal.part7-1
- </p>
- <p
- dangerouslySetInnerHTML={
- Object {
- "__html": "legal.part7-2",
- }
- }
- />
- <p>
- legal.part7-3
- </p>
- </div>
- <div
- className="legal-notice-part"
- >
- <h3>
- legal.title8
- </h3>
- <p>
- legal.part8
- </p>
- </div>
- <div
- className="legal-notice-part"
- >
- <h3>
- legal.title9
- </h3>
- <p>
- legal.part9-1
- </p>
- <p>
- legal.part9-2
- </p>
- </div>
- </div>
- </div>
- </div>
- </LegalNoticeContent>
- <WithStyles(ForwardRef(Button))
- aria-label="gcu_modal.accessibility.button_accept"
- className="gcu-modal-button"
- classes={
- Object {
- "label": "text-16-bold",
- "root": "btn-profile-next rounded",
- }
- }
- onClick={[MockFunction]}
- >
- <ForwardRef(Button)
- aria-label="gcu_modal.accessibility.button_accept"
- className="gcu-modal-button"
- classes={
- Object {
- "colorInherit": "MuiButton-colorInherit",
- "contained": "MuiButton-contained",
- "containedPrimary": "MuiButton-containedPrimary",
- "containedSecondary": "MuiButton-containedSecondary",
- "containedSizeLarge": "MuiButton-containedSizeLarge",
- "containedSizeSmall": "MuiButton-containedSizeSmall",
- "disableElevation": "MuiButton-disableElevation",
- "disabled": "Mui-disabled",
- "endIcon": "MuiButton-endIcon",
- "focusVisible": "Mui-focusVisible",
- "fullWidth": "MuiButton-fullWidth",
- "iconSizeLarge": "MuiButton-iconSizeLarge",
- "iconSizeMedium": "MuiButton-iconSizeMedium",
- "iconSizeSmall": "MuiButton-iconSizeSmall",
- "label": "MuiButton-label text-16-bold",
- "outlined": "MuiButton-outlined",
- "outlinedPrimary": "MuiButton-outlinedPrimary",
- "outlinedSecondary": "MuiButton-outlinedSecondary",
- "outlinedSizeLarge": "MuiButton-outlinedSizeLarge",
- "outlinedSizeSmall": "MuiButton-outlinedSizeSmall",
- "root": "MuiButton-root btn-profile-next rounded",
- "sizeLarge": "MuiButton-sizeLarge",
- "sizeSmall": "MuiButton-sizeSmall",
- "startIcon": "MuiButton-startIcon",
- "text": "MuiButton-text",
- "textPrimary": "MuiButton-textPrimary",
- "textSecondary": "MuiButton-textSecondary",
- "textSizeLarge": "MuiButton-textSizeLarge",
- "textSizeSmall": "MuiButton-textSizeSmall",
- }
- }
- onClick={[MockFunction]}
- >
- <WithStyles(ForwardRef(ButtonBase))
- aria-label="gcu_modal.accessibility.button_accept"
- className="MuiButton-root btn-profile-next rounded MuiButton-text gcu-modal-button"
- component="button"
- disabled={false}
- focusRipple={true}
- focusVisibleClassName="Mui-focusVisible"
- onClick={[MockFunction]}
- type="button"
- >
- <ForwardRef(ButtonBase)
- aria-label="gcu_modal.accessibility.button_accept"
- className="MuiButton-root btn-profile-next rounded MuiButton-text gcu-modal-button"
- classes={
- Object {
- "disabled": "Mui-disabled",
- "focusVisible": "Mui-focusVisible",
- "root": "MuiButtonBase-root",
- }
- }
- component="button"
- disabled={false}
- focusRipple={true}
- focusVisibleClassName="Mui-focusVisible"
- onClick={[MockFunction]}
- type="button"
- >
- <button
- aria-label="gcu_modal.accessibility.button_accept"
- className="MuiButtonBase-root MuiButton-root btn-profile-next rounded MuiButton-text gcu-modal-button"
- disabled={false}
- onBlur={[Function]}
- onClick={[MockFunction]}
- onDragLeave={[Function]}
- onFocus={[Function]}
- onKeyDown={[Function]}
- onKeyUp={[Function]}
- onMouseDown={[Function]}
- onMouseLeave={[Function]}
- onMouseUp={[Function]}
- onTouchEnd={[Function]}
- onTouchMove={[Function]}
- onTouchStart={[Function]}
- tabIndex={0}
- type="button"
- >
- <span
- className="MuiButton-label text-16-bold"
- >
- legal.accessibility.button_close
- </span>
- <WithStyles(memo)
- center={false}
- >
- <ForwardRef(TouchRipple)
- center={false}
- classes={
- Object {
- "child": "MuiTouchRipple-child",
- "childLeaving": "MuiTouchRipple-childLeaving",
- "childPulsate": "MuiTouchRipple-childPulsate",
- "ripple": "MuiTouchRipple-ripple",
- "ripplePulsate": "MuiTouchRipple-ripplePulsate",
- "rippleVisible": "MuiTouchRipple-rippleVisible",
- "root": "MuiTouchRipple-root",
- }
- }
- >
- <span
- className="MuiTouchRipple-root"
- >
- <TransitionGroup
- childFactory={[Function]}
- component={null}
- exit={true}
- />
- </span>
- </ForwardRef(TouchRipple)>
- </WithStyles(memo)>
- </button>
- </ForwardRef(ButtonBase)>
- </WithStyles(ForwardRef(ButtonBase))>
- </ForwardRef(Button)>
- </WithStyles(ForwardRef(Button))>
- </div>
- </ForwardRef(Paper)>
- </WithStyles(ForwardRef(Paper))>
- </div>
- </Transition>
- </ForwardRef(Fade)>
- <div
- data-test="sentinelEnd"
- tabIndex={0}
- />
- </Unstable_TrapFocus>
+ legal.p5b
+ </span>
+ legal.p5
+ </div>
+ <div
+ class="legal-notice-oneline"
+ >
+ <span
+ class="text-14-normal"
+ >
+ legal.p6b
+ </span>
+ legal.p6
+ </div>
+ <div
+ class="legal-notice-part"
+ >
+ <h3>
+
+ legal.title1
+ </h3>
+ <p>
+ legal.part1
+ </p>
+ </div>
+ <div
+ class="legal-notice-part"
+ >
+ <h3>
+ legal.title2
+ </h3>
+ <p>
+ legal.part2
+ </p>
+ <ul>
+ <li>
+ legal.part2-1
+ </li>
+ <li>
+ legal.part2-2
+ </li>
+ <li>
+ legal.part2-3
+ <ul>
+ <li>
+ legal.part2-3-1
+ </li>
+ <li>
+ legal.part2-3-2
+ </li>
+ <li>
+ legal.part2-3-3
+ </li>
+ <li>
+ legal.part2-3-4
+ </li>
+ <li>
+ legal.part2-3-5
+ </li>
+ </ul>
+ </li>
+ <li>
+ legal.part2-4
+ </li>
+ </ul>
+ <p>
+ legal.part2-5
+ </p>
+ <p>
+ legal.part2-6
+ </p>
+ <ul>
+ <li>
+ legal.part2-6-1
+ </li>
+ <li>
+ legal.part2-6-2
+ </li>
+ <li>
+ legal.part2-6-3
+ </li>
+ </ul>
+ <p>
+ legal.part2-7
+ </p>
+ <p>
+ legal.part2-8
+ </p>
+ <p>
+ legal.part2-9
+ </p>
+ <p>
+ legal.part2-10
+ </p>
+ <p>
+ legal.part2-11
+ </p>
+ </div>
+ <div
+ class="legal-notice-part"
+ >
+ <h3>
+ legal.title3
+ </h3>
+ <p>
+ legal.part3-1
+ </p>
+ <p>
+ legal.part3-2
+ </p>
+ </div>
+ <div
+ class="legal-notice-part"
+ >
+ <h3>
+ legal.title4
+ </h3>
+ <p>
+ legal.part4-1
+ </p>
+ <p>
+ legal.part4-2
+ </p>
+ </div>
+ <div
+ class="legal-notice-part"
+ >
+ <h3>
+ legal.title5
+ </h3>
+ <p>
+ legal.part5
+ </p>
+ </div>
+ <div
+ class="legal-notice-part"
+ >
+ <h3>
+ legal.title6
+ </h3>
+ <p>
+ legal.part6
+ </p>
+ </div>
+ <div
+ class="legal-notice-part"
+ >
+ <h3>
+ legal.title7
+ </h3>
+ <p>
+ legal.part7-1
+ </p>
+ <p>
+ legal.part7-2
+ </p>
+ <p>
+ legal.part7-3
+ </p>
+ </div>
+ <div
+ class="legal-notice-part"
+ >
+ <h3>
+ legal.title8
+ </h3>
+ <p>
+ legal.part8
+ </p>
+ </div>
+ <div
+ class="legal-notice-part"
+ >
+ <h3>
+ legal.title9
+ </h3>
+ <p>
+ legal.part9-1
+ </p>
+ <p>
+ legal.part9-2
+ </p>
+ </div>
</div>
- </Portal>
- </ForwardRef(Portal)>
- </ForwardRef(Modal)>
- </ForwardRef(Dialog)>
- </WithStyles(ForwardRef(Dialog))>
-</LegalNoticeModal>
+ </div>
+ </div>
+ <button
+ aria-label="gcu_modal.accessibility.button_accept"
+ class="MuiButtonBase-root MuiButton-root MuiButton-text btnPrimary"
+ tabindex="0"
+ type="button"
+ >
+ <span
+ class="MuiButton-label"
+ >
+ legal.accessibility.button_close
+ </span>
+ <span
+ class="MuiTouchRipple-root"
+ />
+ </button>
+ </div>
+ </div>
+ <div
+ data-test="sentinelEnd"
+ tabindex="0"
+ />
+ </div>
+</body>
`;
diff --git a/src/components/Terms/__snapshots__/MinorUpdateContent.spec.tsx.snap b/src/components/Terms/__snapshots__/MinorUpdateContent.spec.tsx.snap
index 46848ba3de01a50d32be8dfeff0f603c9aef5865..2d4484beec4d4d4aabd2824cfdb3a69edcab5fa6 100644
--- a/src/components/Terms/__snapshots__/MinorUpdateContent.spec.tsx.snap
+++ b/src/components/Terms/__snapshots__/MinorUpdateContent.spec.tsx.snap
@@ -1,19 +1,19 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Minor update content component should be rendered correctly 1`] = `
-<MinorUpdateContent>
+<div>
<div
- className="dataShare-content-root"
+ class="dataShare-content-root"
>
<div
- className="dataShare-content-wrapper"
+ class="dataShare-content-wrapper"
>
<h1
- className="dataShare-content-title text-22-normal"
+ class="dataShare-content-title text-22-normal"
>
minorUpdate.title
</h1>
</div>
</div>
-</MinorUpdateContent>
+</div>
`;
diff --git a/src/components/Terms/__snapshots__/TermsView.spec.tsx.snap b/src/components/Terms/__snapshots__/TermsView.spec.tsx.snap
index 3ea6482684fea0d932e35e3b127f8b71ea167c47..0783bbe8bd4baac1ffc15c47ee7fddf4c20c265d 100644
--- a/src/components/Terms/__snapshots__/TermsView.spec.tsx.snap
+++ b/src/components/Terms/__snapshots__/TermsView.spec.tsx.snap
@@ -1,1018 +1,182 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`TermsView component should be rendered correctly 1`] = `
-<Provider
- store={
- Object {
- "clearActions": [Function],
- "dispatch": [Function],
- "getActions": [Function],
- "getState": [Function],
- "replaceReducer": [Function],
- "subscribe": [Function],
- }
- }
->
- <TermsView>
+<div>
+ <div
+ class="terms-wrapper"
+ >
<div
- className="terms-wrapper"
+ class="terms-content"
>
<div
- className="terms-content"
+ class="dataShare-content-root"
>
- <DataShareConsentContent>
- <div
- className="dataShare-content-root"
+ <div
+ class="dataShare-content-wrapper"
+ >
+ <h1
+ class="dataShare-content-title text-22-normal"
+ >
+ dataShare.title1Update
+ </h1>
+ <p
+ class="text-14-normal"
+ >
+ dataShare.title2Update
+ </p>
+ <p
+ class="text-14-normal"
+ >
+ dataShare.part1
+ </p>
+ <p
+ class="text-14-normal"
+ >
+ dataShare.part2
+ </p>
+ <p
+ class="text-14-normal"
>
- <div
- className="dataShare-content-wrapper"
+ dataShare.part3
+ </p>
+ <ul
+ class="text-14-normal"
+ >
+ <li
+ class="text-14-normal"
>
- <h1
- className="dataShare-content-title text-22-normal"
- >
- dataShare.title1Update
- </h1>
- <p
- className="text-14-normal"
- >
- dataShare.title2Update
- </p>
- <p
- className="text-14-normal"
- >
- dataShare.part1
- </p>
- <p
- className="text-14-normal"
- >
- dataShare.part2
- </p>
- <p
- className="text-14-normal"
- >
- dataShare.part3
- </p>
- <ul
- className="text-14-normal"
- >
- <li
- className="text-14-normal"
- >
- dataShare.item1
- </li>
- <li
- className="text-14-normal"
- >
- dataShare.item2
- </li>
- <li
- className="text-14-normal"
- >
- dataShare.item3
- </li>
- </ul>
- <p
- className="text-14-normal"
- >
- dataShare.part4
- </p>
- <p
- className="text-14-normal"
- >
- dataShare.part5
- </p>
- <p
- className="text-14-normal"
- >
- dataShare.part6
- </p>
- <p
- className="text-14-normal"
- >
- dataShare.part7
- </p>
- <p
- className="text-14-normal"
- >
- dataShare.part8
- </p>
- <span
- className="text-14-normal"
- >
- dataShare.part9
- </span>
- <span
- className="text-14-normal"
- >
- dataShare.part10
- </span>
- <span
- className="text-14-normal"
- dangerouslySetInnerHTML={
- Object {
- "__html": "dataShare.link1",
- }
- }
- />
- </div>
- </div>
- </DataShareConsentContent>
- <label
- className="checkbox"
- >
- <input
- checked={false}
- name="Data-consent-validation"
- onChange={[Function]}
- type="checkbox"
- />
- dataShare.validDataConsent
- </label>
- <label
- className="checkbox"
- >
- <input
- checked={false}
- name="GCU-validation"
- onChange={[Function]}
- type="checkbox"
- />
- <div>
- <span
- dangerouslySetInnerHTML={
- Object {
- "__html": "dataShare.validCGU",
- }
- }
- onClick={[Function]}
- />
- <span
- dangerouslySetInnerHTML={
- Object {
- "__html": "dataShare.validLegal",
- }
- }
- onClick={[Function]}
- />
- </div>
- </label>
+ dataShare.item1
+ </li>
+ <li
+ class="text-14-normal"
+ >
+ dataShare.item2
+ </li>
+ <li
+ class="text-14-normal"
+ >
+ dataShare.item3
+ </li>
+ </ul>
+ <p
+ class="text-14-normal"
+ >
+ dataShare.part4
+ </p>
+ <p
+ class="text-14-normal"
+ >
+ dataShare.part5
+ </p>
+ <p
+ class="text-14-normal"
+ >
+ dataShare.part6
+ </p>
+ <p
+ class="text-14-normal"
+ >
+ dataShare.part7
+ </p>
+ <p
+ class="text-14-normal"
+ >
+ dataShare.part8
+ </p>
+ <span
+ class="text-14-normal"
+ >
+ dataShare.part9
+ </span>
+ <span
+ class="text-14-normal"
+ >
+ dataShare.part10
+ </span>
+ <span
+ class="text-14-normal"
+ >
+ dataShare.link1
+ </span>
+ </div>
</div>
- <div
- className="terms-footer"
+ <label
+ class="inline"
>
- <WithStyles(ForwardRef(Button))
- aria-label="dataShare.accessibility.button_accept"
- className="gcu-modal-button disabled"
- classes={
- Object {
- "label": "text-16-bold",
- "root": "btn-profile-next rounded",
- }
- }
- disabled={true}
- onClick={[Function]}
- >
- <ForwardRef(Button)
- aria-label="dataShare.accessibility.button_accept"
- className="gcu-modal-button disabled"
- classes={
- Object {
- "colorInherit": "MuiButton-colorInherit",
- "contained": "MuiButton-contained",
- "containedPrimary": "MuiButton-containedPrimary",
- "containedSecondary": "MuiButton-containedSecondary",
- "containedSizeLarge": "MuiButton-containedSizeLarge",
- "containedSizeSmall": "MuiButton-containedSizeSmall",
- "disableElevation": "MuiButton-disableElevation",
- "disabled": "Mui-disabled",
- "endIcon": "MuiButton-endIcon",
- "focusVisible": "Mui-focusVisible",
- "fullWidth": "MuiButton-fullWidth",
- "iconSizeLarge": "MuiButton-iconSizeLarge",
- "iconSizeMedium": "MuiButton-iconSizeMedium",
- "iconSizeSmall": "MuiButton-iconSizeSmall",
- "label": "MuiButton-label text-16-bold",
- "outlined": "MuiButton-outlined",
- "outlinedPrimary": "MuiButton-outlinedPrimary",
- "outlinedSecondary": "MuiButton-outlinedSecondary",
- "outlinedSizeLarge": "MuiButton-outlinedSizeLarge",
- "outlinedSizeSmall": "MuiButton-outlinedSizeSmall",
- "root": "MuiButton-root btn-profile-next rounded",
- "sizeLarge": "MuiButton-sizeLarge",
- "sizeSmall": "MuiButton-sizeSmall",
- "startIcon": "MuiButton-startIcon",
- "text": "MuiButton-text",
- "textPrimary": "MuiButton-textPrimary",
- "textSecondary": "MuiButton-textSecondary",
- "textSizeLarge": "MuiButton-textSizeLarge",
- "textSizeSmall": "MuiButton-textSizeSmall",
- }
- }
- disabled={true}
- onClick={[Function]}
+ <input
+ class="inputCheckbox"
+ name="Data-consent-validation"
+ type="checkbox"
+ />
+ dataShare.validDataConsent
+ </label>
+ <label
+ class="inline"
+ >
+ <input
+ class="inputCheckbox"
+ id="gcu"
+ name="GCU-validation"
+ type="checkbox"
+ />
+ <div>
+ <span>
+ dataShare.validCGU
+ </span>
+ <button
+ class="MuiButtonBase-root MuiButton-root MuiButton-text btnText MuiButton-textSizeSmall MuiButton-sizeSmall"
+ tabindex="0"
+ type="button"
>
- <WithStyles(ForwardRef(ButtonBase))
- aria-label="dataShare.accessibility.button_accept"
- className="MuiButton-root btn-profile-next rounded MuiButton-text gcu-modal-button disabled Mui-disabled"
- component="button"
- disabled={true}
- focusRipple={true}
- focusVisibleClassName="Mui-focusVisible"
- onClick={[Function]}
- type="button"
+ <span
+ class="MuiButton-label"
>
- <ForwardRef(ButtonBase)
- aria-label="dataShare.accessibility.button_accept"
- className="MuiButton-root btn-profile-next rounded MuiButton-text gcu-modal-button disabled Mui-disabled"
- classes={
- Object {
- "disabled": "Mui-disabled",
- "focusVisible": "Mui-focusVisible",
- "root": "MuiButtonBase-root",
- }
- }
- component="button"
- disabled={true}
- focusRipple={true}
- focusVisibleClassName="Mui-focusVisible"
- onClick={[Function]}
- type="button"
- >
- <button
- aria-label="dataShare.accessibility.button_accept"
- className="MuiButtonBase-root MuiButton-root btn-profile-next rounded MuiButton-text gcu-modal-button disabled Mui-disabled Mui-disabled"
- disabled={true}
- onBlur={[Function]}
- onClick={[Function]}
- onDragLeave={[Function]}
- onFocus={[Function]}
- onKeyDown={[Function]}
- onKeyUp={[Function]}
- onMouseDown={[Function]}
- onMouseLeave={[Function]}
- onMouseUp={[Function]}
- onTouchEnd={[Function]}
- onTouchMove={[Function]}
- onTouchStart={[Function]}
- tabIndex={-1}
- type="button"
- >
- <span
- className="MuiButton-label text-16-bold"
- >
- dataShare.button_accept
- </span>
- </button>
- </ForwardRef(ButtonBase)>
- </WithStyles(ForwardRef(ButtonBase))>
- </ForwardRef(Button)>
- </WithStyles(ForwardRef(Button))>
- </div>
- <CGUModal
- handleCloseClick={[Function]}
- open={false}
- >
- <WithStyles(ForwardRef(Dialog))
- aria-labelledby="accessibility-title"
- classes={
- Object {
- "paper": "modal-paper",
- "root": "modal-root",
- }
- }
- onClose={[Function]}
- open={false}
- >
- <ForwardRef(Dialog)
- aria-labelledby="accessibility-title"
- classes={
- Object {
- "container": "MuiDialog-container",
- "paper": "MuiDialog-paper modal-paper",
- "paperFullScreen": "MuiDialog-paperFullScreen",
- "paperFullWidth": "MuiDialog-paperFullWidth",
- "paperScrollBody": "MuiDialog-paperScrollBody",
- "paperScrollPaper": "MuiDialog-paperScrollPaper",
- "paperWidthFalse": "MuiDialog-paperWidthFalse",
- "paperWidthLg": "MuiDialog-paperWidthLg",
- "paperWidthMd": "MuiDialog-paperWidthMd",
- "paperWidthSm": "MuiDialog-paperWidthSm",
- "paperWidthXl": "MuiDialog-paperWidthXl",
- "paperWidthXs": "MuiDialog-paperWidthXs",
- "root": "MuiDialog-root modal-root",
- "scrollBody": "MuiDialog-scrollBody",
- "scrollPaper": "MuiDialog-scrollPaper",
- }
- }
- onClose={[Function]}
- open={false}
+ dataShare.validCGU_button
+ </span>
+ <span
+ class="MuiTouchRipple-root"
+ />
+ </button>
+ <span>
+ dataShare.validLegal
+ </span>
+ <button
+ class="MuiButtonBase-root MuiButton-root MuiButton-text btnText MuiButton-textSizeSmall MuiButton-sizeSmall"
+ tabindex="0"
+ type="button"
>
- <ForwardRef(Modal)
- BackdropComponent={
- Object {
- "$$typeof": Symbol(react.forward_ref),
- "Naked": Object {
- "$$typeof": Symbol(react.forward_ref),
- "propTypes": Object {
- "children": [Function],
- "className": [Function],
- "classes": [Function],
- "invisible": [Function],
- "open": [Function],
- "transitionDuration": [Function],
- },
- "render": [Function],
- },
- "displayName": "WithStyles(ForwardRef(Backdrop))",
- "options": Object {
- "defaultTheme": Object {
- "breakpoints": Object {
- "between": [Function],
- "down": [Function],
- "keys": Array [
- "xs",
- "sm",
- "md",
- "lg",
- "xl",
- ],
- "only": [Function],
- "up": [Function],
- "values": Object {
- "lg": 1280,
- "md": 960,
- "sm": 600,
- "xl": 1920,
- "xs": 0,
- },
- "width": [Function],
- },
- "direction": "ltr",
- "mixins": Object {
- "gutters": [Function],
- "toolbar": Object {
- "@media (min-width:0px) and (orientation: landscape)": Object {
- "minHeight": 48,
- },
- "@media (min-width:600px)": Object {
- "minHeight": 64,
- },
- "minHeight": 56,
- },
- },
- "overrides": Object {},
- "palette": Object {
- "action": Object {
- "activatedOpacity": 0.12,
- "active": "rgba(0, 0, 0, 0.54)",
- "disabled": "rgba(0, 0, 0, 0.26)",
- "disabledBackground": "rgba(0, 0, 0, 0.12)",
- "disabledOpacity": 0.38,
- "focus": "rgba(0, 0, 0, 0.12)",
- "focusOpacity": 0.12,
- "hover": "rgba(0, 0, 0, 0.04)",
- "hoverOpacity": 0.04,
- "selected": "rgba(0, 0, 0, 0.08)",
- "selectedOpacity": 0.08,
- },
- "augmentColor": [Function],
- "background": Object {
- "default": "#fafafa",
- "paper": "#fff",
- },
- "common": Object {
- "black": "#000",
- "white": "#fff",
- },
- "contrastThreshold": 3,
- "divider": "rgba(0, 0, 0, 0.12)",
- "error": Object {
- "contrastText": "#fff",
- "dark": "#d32f2f",
- "light": "#e57373",
- "main": "#f44336",
- },
- "getContrastText": [Function],
- "grey": Object {
- "100": "#f5f5f5",
- "200": "#eeeeee",
- "300": "#e0e0e0",
- "400": "#bdbdbd",
- "50": "#fafafa",
- "500": "#9e9e9e",
- "600": "#757575",
- "700": "#616161",
- "800": "#424242",
- "900": "#212121",
- "A100": "#d5d5d5",
- "A200": "#aaaaaa",
- "A400": "#303030",
- "A700": "#616161",
- },
- "info": Object {
- "contrastText": "#fff",
- "dark": "#1976d2",
- "light": "#64b5f6",
- "main": "#2196f3",
- },
- "primary": Object {
- "contrastText": "#fff",
- "dark": "#303f9f",
- "light": "#7986cb",
- "main": "#3f51b5",
- },
- "secondary": Object {
- "contrastText": "#fff",
- "dark": "#c51162",
- "light": "#ff4081",
- "main": "#f50057",
- },
- "success": Object {
- "contrastText": "rgba(0, 0, 0, 0.87)",
- "dark": "#388e3c",
- "light": "#81c784",
- "main": "#4caf50",
- },
- "text": Object {
- "disabled": "rgba(0, 0, 0, 0.38)",
- "hint": "rgba(0, 0, 0, 0.38)",
- "primary": "rgba(0, 0, 0, 0.87)",
- "secondary": "rgba(0, 0, 0, 0.54)",
- },
- "tonalOffset": 0.2,
- "type": "light",
- "warning": Object {
- "contrastText": "rgba(0, 0, 0, 0.87)",
- "dark": "#f57c00",
- "light": "#ffb74d",
- "main": "#ff9800",
- },
- },
- "props": Object {},
- "shadows": Array [
- "none",
- "0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12)",
- "0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12)",
- "0px 3px 3px -2px rgba(0,0,0,0.2),0px 3px 4px 0px rgba(0,0,0,0.14),0px 1px 8px 0px rgba(0,0,0,0.12)",
- "0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12)",
- "0px 3px 5px -1px rgba(0,0,0,0.2),0px 5px 8px 0px rgba(0,0,0,0.14),0px 1px 14px 0px rgba(0,0,0,0.12)",
- "0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12)",
- "0px 4px 5px -2px rgba(0,0,0,0.2),0px 7px 10px 1px rgba(0,0,0,0.14),0px 2px 16px 1px rgba(0,0,0,0.12)",
- "0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12)",
- "0px 5px 6px -3px rgba(0,0,0,0.2),0px 9px 12px 1px rgba(0,0,0,0.14),0px 3px 16px 2px rgba(0,0,0,0.12)",
- "0px 6px 6px -3px rgba(0,0,0,0.2),0px 10px 14px 1px rgba(0,0,0,0.14),0px 4px 18px 3px rgba(0,0,0,0.12)",
- "0px 6px 7px -4px rgba(0,0,0,0.2),0px 11px 15px 1px rgba(0,0,0,0.14),0px 4px 20px 3px rgba(0,0,0,0.12)",
- "0px 7px 8px -4px rgba(0,0,0,0.2),0px 12px 17px 2px rgba(0,0,0,0.14),0px 5px 22px 4px rgba(0,0,0,0.12)",
- "0px 7px 8px -4px rgba(0,0,0,0.2),0px 13px 19px 2px rgba(0,0,0,0.14),0px 5px 24px 4px rgba(0,0,0,0.12)",
- "0px 7px 9px -4px rgba(0,0,0,0.2),0px 14px 21px 2px rgba(0,0,0,0.14),0px 5px 26px 4px rgba(0,0,0,0.12)",
- "0px 8px 9px -5px rgba(0,0,0,0.2),0px 15px 22px 2px rgba(0,0,0,0.14),0px 6px 28px 5px rgba(0,0,0,0.12)",
- "0px 8px 10px -5px rgba(0,0,0,0.2),0px 16px 24px 2px rgba(0,0,0,0.14),0px 6px 30px 5px rgba(0,0,0,0.12)",
- "0px 8px 11px -5px rgba(0,0,0,0.2),0px 17px 26px 2px rgba(0,0,0,0.14),0px 6px 32px 5px rgba(0,0,0,0.12)",
- "0px 9px 11px -5px rgba(0,0,0,0.2),0px 18px 28px 2px rgba(0,0,0,0.14),0px 7px 34px 6px rgba(0,0,0,0.12)",
- "0px 9px 12px -6px rgba(0,0,0,0.2),0px 19px 29px 2px rgba(0,0,0,0.14),0px 7px 36px 6px rgba(0,0,0,0.12)",
- "0px 10px 13px -6px rgba(0,0,0,0.2),0px 20px 31px 3px rgba(0,0,0,0.14),0px 8px 38px 7px rgba(0,0,0,0.12)",
- "0px 10px 13px -6px rgba(0,0,0,0.2),0px 21px 33px 3px rgba(0,0,0,0.14),0px 8px 40px 7px rgba(0,0,0,0.12)",
- "0px 10px 14px -6px rgba(0,0,0,0.2),0px 22px 35px 3px rgba(0,0,0,0.14),0px 8px 42px 7px rgba(0,0,0,0.12)",
- "0px 11px 14px -7px rgba(0,0,0,0.2),0px 23px 36px 3px rgba(0,0,0,0.14),0px 9px 44px 8px rgba(0,0,0,0.12)",
- "0px 11px 15px -7px rgba(0,0,0,0.2),0px 24px 38px 3px rgba(0,0,0,0.14),0px 9px 46px 8px rgba(0,0,0,0.12)",
- ],
- "shape": Object {
- "borderRadius": 4,
- },
- "spacing": [Function],
- "transitions": Object {
- "create": [Function],
- "duration": Object {
- "complex": 375,
- "enteringScreen": 225,
- "leavingScreen": 195,
- "short": 250,
- "shorter": 200,
- "shortest": 150,
- "standard": 300,
- },
- "easing": Object {
- "easeIn": "cubic-bezier(0.4, 0, 1, 1)",
- "easeInOut": "cubic-bezier(0.4, 0, 0.2, 1)",
- "easeOut": "cubic-bezier(0.0, 0, 0.2, 1)",
- "sharp": "cubic-bezier(0.4, 0, 0.6, 1)",
- },
- "getAutoHeightDuration": [Function],
- },
- "typography": Object {
- "body1": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "1rem",
- "fontWeight": 400,
- "letterSpacing": "0.00938em",
- "lineHeight": 1.5,
- },
- "body2": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "0.875rem",
- "fontWeight": 400,
- "letterSpacing": "0.01071em",
- "lineHeight": 1.43,
- },
- "button": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "0.875rem",
- "fontWeight": 500,
- "letterSpacing": "0.02857em",
- "lineHeight": 1.75,
- "textTransform": "uppercase",
- },
- "caption": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "0.75rem",
- "fontWeight": 400,
- "letterSpacing": "0.03333em",
- "lineHeight": 1.66,
- },
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": 14,
- "fontWeightBold": 700,
- "fontWeightLight": 300,
- "fontWeightMedium": 500,
- "fontWeightRegular": 400,
- "h1": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "6rem",
- "fontWeight": 300,
- "letterSpacing": "-0.01562em",
- "lineHeight": 1.167,
- },
- "h2": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "3.75rem",
- "fontWeight": 300,
- "letterSpacing": "-0.00833em",
- "lineHeight": 1.2,
- },
- "h3": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "3rem",
- "fontWeight": 400,
- "letterSpacing": "0em",
- "lineHeight": 1.167,
- },
- "h4": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "2.125rem",
- "fontWeight": 400,
- "letterSpacing": "0.00735em",
- "lineHeight": 1.235,
- },
- "h5": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "1.5rem",
- "fontWeight": 400,
- "letterSpacing": "0em",
- "lineHeight": 1.334,
- },
- "h6": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "1.25rem",
- "fontWeight": 500,
- "letterSpacing": "0.0075em",
- "lineHeight": 1.6,
- },
- "htmlFontSize": 16,
- "overline": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "0.75rem",
- "fontWeight": 400,
- "letterSpacing": "0.08333em",
- "lineHeight": 2.66,
- "textTransform": "uppercase",
- },
- "pxToRem": [Function],
- "round": [Function],
- "subtitle1": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "1rem",
- "fontWeight": 400,
- "letterSpacing": "0.00938em",
- "lineHeight": 1.75,
- },
- "subtitle2": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "0.875rem",
- "fontWeight": 500,
- "letterSpacing": "0.00714em",
- "lineHeight": 1.57,
- },
- },
- "zIndex": Object {
- "appBar": 1100,
- "drawer": 1200,
- "mobileStepper": 1000,
- "modal": 1300,
- "snackbar": 1400,
- "speedDial": 1050,
- "tooltip": 1500,
- },
- },
- "name": "MuiBackdrop",
- },
- "propTypes": Object {
- "classes": [Function],
- "innerRef": [Function],
- },
- "render": [Function],
- "useStyles": [Function],
- }
- }
- BackdropProps={
- Object {
- "transitionDuration": Object {
- "enter": 225,
- "exit": 195,
- },
- }
- }
- className="MuiDialog-root modal-root"
- closeAfterTransition={true}
- disableEscapeKeyDown={false}
- onClose={[Function]}
- open={false}
+ <span
+ class="MuiButton-label"
+ >
+ dataShare.validLegal_button
+ </span>
+ <span
+ class="MuiTouchRipple-root"
/>
- </ForwardRef(Dialog)>
- </WithStyles(ForwardRef(Dialog))>
- </CGUModal>
- <LegalNoticeModal
- handleCloseClick={[Function]}
- open={false}
+ </button>
+ <span>
+ dataShare.validLegal2
+ </span>
+ </div>
+ </label>
+ </div>
+ <div
+ class="terms-footer"
+ >
+ <button
+ aria-label="dataShare.accessibility.button_accept"
+ class="MuiButtonBase-root MuiButton-root MuiButton-text btnPrimary Mui-disabled Mui-disabled"
+ disabled=""
+ tabindex="-1"
+ type="button"
>
- <WithStyles(ForwardRef(Dialog))
- aria-labelledby="accessibility-title"
- classes={
- Object {
- "paper": "modal-paper",
- "root": "modal-root",
- }
- }
- onClose={[Function]}
- open={false}
+ <span
+ class="MuiButton-label"
>
- <ForwardRef(Dialog)
- aria-labelledby="accessibility-title"
- classes={
- Object {
- "container": "MuiDialog-container",
- "paper": "MuiDialog-paper modal-paper",
- "paperFullScreen": "MuiDialog-paperFullScreen",
- "paperFullWidth": "MuiDialog-paperFullWidth",
- "paperScrollBody": "MuiDialog-paperScrollBody",
- "paperScrollPaper": "MuiDialog-paperScrollPaper",
- "paperWidthFalse": "MuiDialog-paperWidthFalse",
- "paperWidthLg": "MuiDialog-paperWidthLg",
- "paperWidthMd": "MuiDialog-paperWidthMd",
- "paperWidthSm": "MuiDialog-paperWidthSm",
- "paperWidthXl": "MuiDialog-paperWidthXl",
- "paperWidthXs": "MuiDialog-paperWidthXs",
- "root": "MuiDialog-root modal-root",
- "scrollBody": "MuiDialog-scrollBody",
- "scrollPaper": "MuiDialog-scrollPaper",
- }
- }
- onClose={[Function]}
- open={false}
- >
- <ForwardRef(Modal)
- BackdropComponent={
- Object {
- "$$typeof": Symbol(react.forward_ref),
- "Naked": Object {
- "$$typeof": Symbol(react.forward_ref),
- "propTypes": Object {
- "children": [Function],
- "className": [Function],
- "classes": [Function],
- "invisible": [Function],
- "open": [Function],
- "transitionDuration": [Function],
- },
- "render": [Function],
- },
- "displayName": "WithStyles(ForwardRef(Backdrop))",
- "options": Object {
- "defaultTheme": Object {
- "breakpoints": Object {
- "between": [Function],
- "down": [Function],
- "keys": Array [
- "xs",
- "sm",
- "md",
- "lg",
- "xl",
- ],
- "only": [Function],
- "up": [Function],
- "values": Object {
- "lg": 1280,
- "md": 960,
- "sm": 600,
- "xl": 1920,
- "xs": 0,
- },
- "width": [Function],
- },
- "direction": "ltr",
- "mixins": Object {
- "gutters": [Function],
- "toolbar": Object {
- "@media (min-width:0px) and (orientation: landscape)": Object {
- "minHeight": 48,
- },
- "@media (min-width:600px)": Object {
- "minHeight": 64,
- },
- "minHeight": 56,
- },
- },
- "overrides": Object {},
- "palette": Object {
- "action": Object {
- "activatedOpacity": 0.12,
- "active": "rgba(0, 0, 0, 0.54)",
- "disabled": "rgba(0, 0, 0, 0.26)",
- "disabledBackground": "rgba(0, 0, 0, 0.12)",
- "disabledOpacity": 0.38,
- "focus": "rgba(0, 0, 0, 0.12)",
- "focusOpacity": 0.12,
- "hover": "rgba(0, 0, 0, 0.04)",
- "hoverOpacity": 0.04,
- "selected": "rgba(0, 0, 0, 0.08)",
- "selectedOpacity": 0.08,
- },
- "augmentColor": [Function],
- "background": Object {
- "default": "#fafafa",
- "paper": "#fff",
- },
- "common": Object {
- "black": "#000",
- "white": "#fff",
- },
- "contrastThreshold": 3,
- "divider": "rgba(0, 0, 0, 0.12)",
- "error": Object {
- "contrastText": "#fff",
- "dark": "#d32f2f",
- "light": "#e57373",
- "main": "#f44336",
- },
- "getContrastText": [Function],
- "grey": Object {
- "100": "#f5f5f5",
- "200": "#eeeeee",
- "300": "#e0e0e0",
- "400": "#bdbdbd",
- "50": "#fafafa",
- "500": "#9e9e9e",
- "600": "#757575",
- "700": "#616161",
- "800": "#424242",
- "900": "#212121",
- "A100": "#d5d5d5",
- "A200": "#aaaaaa",
- "A400": "#303030",
- "A700": "#616161",
- },
- "info": Object {
- "contrastText": "#fff",
- "dark": "#1976d2",
- "light": "#64b5f6",
- "main": "#2196f3",
- },
- "primary": Object {
- "contrastText": "#fff",
- "dark": "#303f9f",
- "light": "#7986cb",
- "main": "#3f51b5",
- },
- "secondary": Object {
- "contrastText": "#fff",
- "dark": "#c51162",
- "light": "#ff4081",
- "main": "#f50057",
- },
- "success": Object {
- "contrastText": "rgba(0, 0, 0, 0.87)",
- "dark": "#388e3c",
- "light": "#81c784",
- "main": "#4caf50",
- },
- "text": Object {
- "disabled": "rgba(0, 0, 0, 0.38)",
- "hint": "rgba(0, 0, 0, 0.38)",
- "primary": "rgba(0, 0, 0, 0.87)",
- "secondary": "rgba(0, 0, 0, 0.54)",
- },
- "tonalOffset": 0.2,
- "type": "light",
- "warning": Object {
- "contrastText": "rgba(0, 0, 0, 0.87)",
- "dark": "#f57c00",
- "light": "#ffb74d",
- "main": "#ff9800",
- },
- },
- "props": Object {},
- "shadows": Array [
- "none",
- "0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12)",
- "0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12)",
- "0px 3px 3px -2px rgba(0,0,0,0.2),0px 3px 4px 0px rgba(0,0,0,0.14),0px 1px 8px 0px rgba(0,0,0,0.12)",
- "0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12)",
- "0px 3px 5px -1px rgba(0,0,0,0.2),0px 5px 8px 0px rgba(0,0,0,0.14),0px 1px 14px 0px rgba(0,0,0,0.12)",
- "0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12)",
- "0px 4px 5px -2px rgba(0,0,0,0.2),0px 7px 10px 1px rgba(0,0,0,0.14),0px 2px 16px 1px rgba(0,0,0,0.12)",
- "0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12)",
- "0px 5px 6px -3px rgba(0,0,0,0.2),0px 9px 12px 1px rgba(0,0,0,0.14),0px 3px 16px 2px rgba(0,0,0,0.12)",
- "0px 6px 6px -3px rgba(0,0,0,0.2),0px 10px 14px 1px rgba(0,0,0,0.14),0px 4px 18px 3px rgba(0,0,0,0.12)",
- "0px 6px 7px -4px rgba(0,0,0,0.2),0px 11px 15px 1px rgba(0,0,0,0.14),0px 4px 20px 3px rgba(0,0,0,0.12)",
- "0px 7px 8px -4px rgba(0,0,0,0.2),0px 12px 17px 2px rgba(0,0,0,0.14),0px 5px 22px 4px rgba(0,0,0,0.12)",
- "0px 7px 8px -4px rgba(0,0,0,0.2),0px 13px 19px 2px rgba(0,0,0,0.14),0px 5px 24px 4px rgba(0,0,0,0.12)",
- "0px 7px 9px -4px rgba(0,0,0,0.2),0px 14px 21px 2px rgba(0,0,0,0.14),0px 5px 26px 4px rgba(0,0,0,0.12)",
- "0px 8px 9px -5px rgba(0,0,0,0.2),0px 15px 22px 2px rgba(0,0,0,0.14),0px 6px 28px 5px rgba(0,0,0,0.12)",
- "0px 8px 10px -5px rgba(0,0,0,0.2),0px 16px 24px 2px rgba(0,0,0,0.14),0px 6px 30px 5px rgba(0,0,0,0.12)",
- "0px 8px 11px -5px rgba(0,0,0,0.2),0px 17px 26px 2px rgba(0,0,0,0.14),0px 6px 32px 5px rgba(0,0,0,0.12)",
- "0px 9px 11px -5px rgba(0,0,0,0.2),0px 18px 28px 2px rgba(0,0,0,0.14),0px 7px 34px 6px rgba(0,0,0,0.12)",
- "0px 9px 12px -6px rgba(0,0,0,0.2),0px 19px 29px 2px rgba(0,0,0,0.14),0px 7px 36px 6px rgba(0,0,0,0.12)",
- "0px 10px 13px -6px rgba(0,0,0,0.2),0px 20px 31px 3px rgba(0,0,0,0.14),0px 8px 38px 7px rgba(0,0,0,0.12)",
- "0px 10px 13px -6px rgba(0,0,0,0.2),0px 21px 33px 3px rgba(0,0,0,0.14),0px 8px 40px 7px rgba(0,0,0,0.12)",
- "0px 10px 14px -6px rgba(0,0,0,0.2),0px 22px 35px 3px rgba(0,0,0,0.14),0px 8px 42px 7px rgba(0,0,0,0.12)",
- "0px 11px 14px -7px rgba(0,0,0,0.2),0px 23px 36px 3px rgba(0,0,0,0.14),0px 9px 44px 8px rgba(0,0,0,0.12)",
- "0px 11px 15px -7px rgba(0,0,0,0.2),0px 24px 38px 3px rgba(0,0,0,0.14),0px 9px 46px 8px rgba(0,0,0,0.12)",
- ],
- "shape": Object {
- "borderRadius": 4,
- },
- "spacing": [Function],
- "transitions": Object {
- "create": [Function],
- "duration": Object {
- "complex": 375,
- "enteringScreen": 225,
- "leavingScreen": 195,
- "short": 250,
- "shorter": 200,
- "shortest": 150,
- "standard": 300,
- },
- "easing": Object {
- "easeIn": "cubic-bezier(0.4, 0, 1, 1)",
- "easeInOut": "cubic-bezier(0.4, 0, 0.2, 1)",
- "easeOut": "cubic-bezier(0.0, 0, 0.2, 1)",
- "sharp": "cubic-bezier(0.4, 0, 0.6, 1)",
- },
- "getAutoHeightDuration": [Function],
- },
- "typography": Object {
- "body1": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "1rem",
- "fontWeight": 400,
- "letterSpacing": "0.00938em",
- "lineHeight": 1.5,
- },
- "body2": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "0.875rem",
- "fontWeight": 400,
- "letterSpacing": "0.01071em",
- "lineHeight": 1.43,
- },
- "button": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "0.875rem",
- "fontWeight": 500,
- "letterSpacing": "0.02857em",
- "lineHeight": 1.75,
- "textTransform": "uppercase",
- },
- "caption": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "0.75rem",
- "fontWeight": 400,
- "letterSpacing": "0.03333em",
- "lineHeight": 1.66,
- },
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": 14,
- "fontWeightBold": 700,
- "fontWeightLight": 300,
- "fontWeightMedium": 500,
- "fontWeightRegular": 400,
- "h1": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "6rem",
- "fontWeight": 300,
- "letterSpacing": "-0.01562em",
- "lineHeight": 1.167,
- },
- "h2": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "3.75rem",
- "fontWeight": 300,
- "letterSpacing": "-0.00833em",
- "lineHeight": 1.2,
- },
- "h3": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "3rem",
- "fontWeight": 400,
- "letterSpacing": "0em",
- "lineHeight": 1.167,
- },
- "h4": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "2.125rem",
- "fontWeight": 400,
- "letterSpacing": "0.00735em",
- "lineHeight": 1.235,
- },
- "h5": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "1.5rem",
- "fontWeight": 400,
- "letterSpacing": "0em",
- "lineHeight": 1.334,
- },
- "h6": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "1.25rem",
- "fontWeight": 500,
- "letterSpacing": "0.0075em",
- "lineHeight": 1.6,
- },
- "htmlFontSize": 16,
- "overline": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "0.75rem",
- "fontWeight": 400,
- "letterSpacing": "0.08333em",
- "lineHeight": 2.66,
- "textTransform": "uppercase",
- },
- "pxToRem": [Function],
- "round": [Function],
- "subtitle1": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "1rem",
- "fontWeight": 400,
- "letterSpacing": "0.00938em",
- "lineHeight": 1.75,
- },
- "subtitle2": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "0.875rem",
- "fontWeight": 500,
- "letterSpacing": "0.00714em",
- "lineHeight": 1.57,
- },
- },
- "zIndex": Object {
- "appBar": 1100,
- "drawer": 1200,
- "mobileStepper": 1000,
- "modal": 1300,
- "snackbar": 1400,
- "speedDial": 1050,
- "tooltip": 1500,
- },
- },
- "name": "MuiBackdrop",
- },
- "propTypes": Object {
- "classes": [Function],
- "innerRef": [Function],
- },
- "render": [Function],
- "useStyles": [Function],
- }
- }
- BackdropProps={
- Object {
- "transitionDuration": Object {
- "enter": 225,
- "exit": 195,
- },
- }
- }
- className="MuiDialog-root modal-root"
- closeAfterTransition={true}
- disableEscapeKeyDown={false}
- onClose={[Function]}
- open={false}
- />
- </ForwardRef(Dialog)>
- </WithStyles(ForwardRef(Dialog))>
- </LegalNoticeModal>
+ dataShare.button_accept
+ </span>
+ </button>
</div>
- </TermsView>
-</Provider>
+ </div>
+</div>
`;
diff --git a/src/components/Terms/termsView.scss b/src/components/Terms/termsView.scss
index 6e058dad69caa5f63058d3be2c3b384864bde654..4c4c64281fae0cf2874a67ebdbf9314c2b9be681 100644
--- a/src/components/Terms/termsView.scss
+++ b/src/components/Terms/termsView.scss
@@ -1,7 +1,4 @@
@import 'src/styles/base/color';
-@import 'src/styles/base/mixins';
-
-@include checkBox();
.terms-wrapper {
padding: 0rem 1.5rem 0 1.5rem;
@@ -27,6 +24,20 @@
cursor: pointer;
color: $gold-shadow;
}
+
+ label.inline {
+ margin-top: 1rem;
+ display: flex;
+ gap: 0.5rem;
+ align-items: center;
+ }
+
+ button {
+ color: $gold-shadow;
+ span {
+ color: $gold-shadow;
+ }
+ }
}
.dataShare-content-wrapper,
.dataShare-content-root {
diff --git a/src/components/TotalConsumption/TotalConsumption.spec.tsx b/src/components/TotalConsumption/TotalConsumption.spec.tsx
index a427bd1cac2d56d05c8c9eaee6663c9c0fe5597d..de4e50f332f7ea6b6b7b7886b28f3653b5c203e3 100644
--- a/src/components/TotalConsumption/TotalConsumption.spec.tsx
+++ b/src/components/TotalConsumption/TotalConsumption.spec.tsx
@@ -1,10 +1,9 @@
+import { render, screen, waitFor } from '@testing-library/react'
import { FluidType, TimeStep } from 'enums'
-import { mount } from 'enzyme'
import React from 'react'
import { Provider } from 'react-redux'
import { graphData } from 'tests/__mocks__/chartData.mock'
import { createMockEcolyoStore, mockChartState } from 'tests/__mocks__/store'
-import { waitForComponentToPaint } from 'tests/__mocks__/testUtils'
import TotalConsumption from './TotalConsumption'
const mockChartStore = createMockEcolyoStore({
@@ -15,34 +14,25 @@ const mockChartStore = createMockEcolyoStore({
})
describe('TotalConsumption component', () => {
- it('should be rendered correctly', async () => {
- const component = mount(
+ it('should be rendered correctly and render euro value', async () => {
+ const { container } = render(
<Provider store={mockChartStore}>
<TotalConsumption fluidType={FluidType.ELECTRICITY} />
</Provider>
)
- await waitForComponentToPaint(component)
- expect(component).toMatchSnapshot()
+ await waitFor(() => null, { container })
+ expect(container).toMatchSnapshot()
+ expect(screen.getByText('22,77')).toBeInTheDocument()
})
- it('should render euro value', async () => {
- const component = mount(
- <Provider store={mockChartStore}>
- <TotalConsumption fluidType={FluidType.ELECTRICITY} />
- </Provider>
- )
- await waitForComponentToPaint(component)
- expect(component.find('.euro-value').first().text()).toEqual('22,77')
- })
it('should format multifluid value', async () => {
- const component = mount(
+ const { container } = render(
<Provider store={mockChartStore}>
<TotalConsumption fluidType={FluidType.MULTIFLUID} />
</Provider>
)
- await waitForComponentToPaint(component)
-
- expect(component.find('.euro-value').first().text()).toEqual('130,84')
+ await waitFor(() => null, { container })
+ expect(screen.getByText('130,84')).toBeInTheDocument()
})
it('should format multifluid value AND compared value', async () => {
const store = createMockEcolyoStore({
@@ -53,25 +43,23 @@ describe('TotalConsumption component', () => {
currentTimeStep: TimeStep.DAY,
},
})
- const component = mount(
+ const { container } = render(
<Provider store={store}>
<TotalConsumption fluidType={FluidType.MULTIFLUID} />
</Provider>
)
- await waitForComponentToPaint(component)
-
- expect(component.find('.euro-value').first().text()).toEqual('130,84')
- expect(component.find('.euro-value').at(1).text()).toEqual('110,66')
+ await waitFor(() => null, { container })
+ expect(screen.getByText('130,84')).toBeInTheDocument()
+ expect(screen.getByText('110,66')).toBeInTheDocument()
})
it('should display ----- when half an hour electricity data is not activated', async () => {
const store = createMockEcolyoStore()
- const component = mount(
+ const { container } = render(
<Provider store={store}>
<TotalConsumption fluidType={FluidType.ELECTRICITY} />
</Provider>
)
- await waitForComponentToPaint(component)
-
- expect(component.find('.euro-value').first().text()).toEqual('-----')
+ await waitFor(() => null, { container })
+ expect(screen.getByText('-----')).toBeInTheDocument()
})
})
diff --git a/src/components/TotalConsumption/__snapshots__/TotalConsumption.spec.tsx.snap b/src/components/TotalConsumption/__snapshots__/TotalConsumption.spec.tsx.snap
index 3a565c6656bae3808174e19bca79707febf5a9be..307e792394c41eb30c0babdebbfae70d8839bc86 100644
--- a/src/components/TotalConsumption/__snapshots__/TotalConsumption.spec.tsx.snap
+++ b/src/components/TotalConsumption/__snapshots__/TotalConsumption.spec.tsx.snap
@@ -1,3 +1,32 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
-exports[`TotalConsumption component should be rendered correctly 1`] = `ReactWrapper {}`;
+exports[`TotalConsumption component should be rendered correctly and render euro value 1`] = `
+<div>
+ <div
+ class="icon-line "
+ >
+ <svg
+ aria-hidden="true"
+ class="pile-icon styles__icon___23x3R"
+ height="36"
+ width="36"
+ >
+ <use
+ xlink:href="#test-file-stub"
+ />
+ </svg>
+ <div>
+ <span
+ class="euro-value"
+ >
+ 22,77
+ </span>
+ <span
+ class="euro-symbol"
+ >
+ €
+ </span>
+ </div>
+ </div>
+</div>
+`;
diff --git a/src/components/WelcomeModal/WelcomeModal.spec.tsx b/src/components/WelcomeModal/WelcomeModal.spec.tsx
index a4fa5b4211cebcce60fbb4f3fcb04c11a6fb4231..f94a2e6f05297e5a25babbea00a54a3422e67aae 100644
--- a/src/components/WelcomeModal/WelcomeModal.spec.tsx
+++ b/src/components/WelcomeModal/WelcomeModal.spec.tsx
@@ -1,6 +1,5 @@
-import { Button, IconButton } from '@material-ui/core'
-import { mount } from 'enzyme'
-import toJson from 'enzyme-to-json'
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
import React from 'react'
import { Provider } from 'react-redux'
import * as profileActions from 'store/profile/profile.slice'
@@ -41,58 +40,55 @@ jest.mock('services/profile.service')
const updateProfileSpy = jest.spyOn(profileActions, 'updateProfile')
describe('WelcomeModal component', () => {
- beforeEach(() => {
- jest.clearAllMocks()
- })
-
const store = createMockEcolyoStore()
it('should be rendered correctly', () => {
- const component = mount(
+ const { baseElement } = render(
<Provider store={store}>
<WelcomeModal open={true} />
</Provider>
)
- expect(toJson(component)).toMatchSnapshot()
+ expect(baseElement).toMatchSnapshot()
+ expect(screen.getByRole('dialog')).toBeInTheDocument()
})
it('should not be rendered', () => {
- const component = mount(
+ const { container } = render(
<Provider store={store}>
<WelcomeModal open={false} />
</Provider>
)
- expect(toJson(component)).toMatchSnapshot()
+ expect(container.firstChild).toBeNull()
+ expect(screen.queryByRole('dialog')).not.toBeInTheDocument()
})
- it('should send mail and update profile when user click on the ok button', async () => {
- const component = mount(
- <Provider store={store}>
- <WelcomeModal open={true} />
- </Provider>
- )
- component.find(Button).first().simulate('click')
- expect(mockSendMail).toHaveBeenCalled()
- expect(updateProfileSpy).toHaveBeenCalledWith({
- isFirstConnection: false,
- onboarding: {
- isWelcomeSeen: true,
- },
+ describe('should test modal interactivity', () => {
+ beforeEach(() => {
+ render(
+ <Provider store={store}>
+ <WelcomeModal open={true} />
+ </Provider>
+ )
+ })
+ it('should send mail and update profile when user click on the ok button', async () => {
+ await userEvent.click(screen.getAllByRole('button')[1])
+ expect(mockSendMail).toHaveBeenCalled()
+ expect(updateProfileSpy).toHaveBeenCalledWith({
+ isFirstConnection: false,
+ onboarding: {
+ isWelcomeSeen: true,
+ },
+ })
})
- })
- it('should send mail and update profile when modal is closed by user', async () => {
- const component = mount(
- <Provider store={store}>
- <WelcomeModal open={true} />
- </Provider>
- )
- component.find(IconButton).first().simulate('click')
- expect(mockSendMail).toHaveBeenCalled()
- expect(updateProfileSpy).toHaveBeenCalledWith({
- isFirstConnection: false,
- onboarding: {
- isWelcomeSeen: true,
- },
+ it('should send mail and update profile when modal is closed by user', async () => {
+ await userEvent.click(screen.getAllByRole('button')[0])
+ expect(mockSendMail).toHaveBeenCalled()
+ expect(updateProfileSpy).toHaveBeenCalledWith({
+ isFirstConnection: false,
+ onboarding: {
+ isWelcomeSeen: true,
+ },
+ })
})
})
})
diff --git a/src/components/WelcomeModal/WelcomeModal.tsx b/src/components/WelcomeModal/WelcomeModal.tsx
index 0fc095b5ffa698e75180400981320c099537be36..7af1db71548ac6f02d8f6d6ca6f2f19942df54f6 100644
--- a/src/components/WelcomeModal/WelcomeModal.tsx
+++ b/src/components/WelcomeModal/WelcomeModal.tsx
@@ -15,11 +15,7 @@ import './welcomeModal.scss'
const welcomeTemplate = require('notifications/welcome.hbs')
const mjml2html = require('mjml-browser')
-interface WelcomeModalProps {
- open: boolean
-}
-
-const WelcomeModal = ({ open }: WelcomeModalProps) => {
+const WelcomeModal = ({ open }: { open: boolean }) => {
const { t } = useI18n()
const client = useClient()
const dispatch = useAppDispatch()
@@ -103,10 +99,7 @@ const WelcomeModal = ({ open }: WelcomeModalProps) => {
<Button
aria-label={t('onboarding.welcomeModal.accessibility.button_valid')}
onClick={setWelcomeModalViewed}
- classes={{
- root: 'btn-highlight',
- label: 'text-16-bold',
- }}
+ className="btnPrimary"
>
{t('onboarding.welcomeModal.button_valid')}
</Button>
diff --git a/src/components/WelcomeModal/__snapshots__/WelcomeModal.spec.tsx.snap b/src/components/WelcomeModal/__snapshots__/WelcomeModal.spec.tsx.snap
index ed873b9546d9006b7802abbe801655d430759071..602c18b25b32ece87df10ab23d9192551e040e3f 100644
--- a/src/components/WelcomeModal/__snapshots__/WelcomeModal.spec.tsx.snap
+++ b/src/components/WelcomeModal/__snapshots__/WelcomeModal.spec.tsx.snap
@@ -1,1420 +1,122 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`WelcomeModal component should be rendered correctly 1`] = `
-<Provider
- store={
- Object {
- "clearActions": [Function],
- "dispatch": [Function],
- "getActions": [Function],
- "getState": [Function],
- "replaceReducer": [Function],
- "subscribe": [Function],
- }
- }
+<body
+ style="padding-right: 0px; overflow: hidden;"
>
- <WelcomeModal
- open={true}
+ <div
+ aria-hidden="true"
+ />
+ <div
+ class="MuiDialog-root modal-root"
+ role="presentation"
+ style="position: fixed; z-index: 1300; right: 0px; bottom: 0px; top: 0px; left: 0px;"
>
- <WithStyles(ForwardRef(Dialog))
- aria-labelledby="accessibility-title"
- classes={
- Object {
- "paper": "modal-paper",
- "root": "modal-root",
- }
- }
- onClose={[Function]}
- open={true}
+ <div
+ aria-hidden="true"
+ class="MuiBackdrop-root"
+ style="opacity: 1; webkit-transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"
+ />
+ <div
+ data-test="sentinelStart"
+ tabindex="0"
+ />
+ <div
+ class="MuiDialog-container MuiDialog-scrollPaper"
+ role="none presentation"
+ style="opacity: 1; webkit-transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"
+ tabindex="-1"
>
- <ForwardRef(Dialog)
+ <div
aria-labelledby="accessibility-title"
- classes={
- Object {
- "container": "MuiDialog-container",
- "paper": "MuiDialog-paper modal-paper",
- "paperFullScreen": "MuiDialog-paperFullScreen",
- "paperFullWidth": "MuiDialog-paperFullWidth",
- "paperScrollBody": "MuiDialog-paperScrollBody",
- "paperScrollPaper": "MuiDialog-paperScrollPaper",
- "paperWidthFalse": "MuiDialog-paperWidthFalse",
- "paperWidthLg": "MuiDialog-paperWidthLg",
- "paperWidthMd": "MuiDialog-paperWidthMd",
- "paperWidthSm": "MuiDialog-paperWidthSm",
- "paperWidthXl": "MuiDialog-paperWidthXl",
- "paperWidthXs": "MuiDialog-paperWidthXs",
- "root": "MuiDialog-root modal-root",
- "scrollBody": "MuiDialog-scrollBody",
- "scrollPaper": "MuiDialog-scrollPaper",
- }
- }
- onClose={[Function]}
- open={true}
+ class="MuiPaper-root MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm MuiPaper-elevation24 MuiPaper-rounded"
+ role="dialog"
>
- <ForwardRef(Modal)
- BackdropComponent={
- Object {
- "$$typeof": Symbol(react.forward_ref),
- "Naked": Object {
- "$$typeof": Symbol(react.forward_ref),
- "propTypes": Object {
- "children": [Function],
- "className": [Function],
- "classes": [Function],
- "invisible": [Function],
- "open": [Function],
- "transitionDuration": [Function],
- },
- "render": [Function],
- },
- "displayName": "WithStyles(ForwardRef(Backdrop))",
- "options": Object {
- "defaultTheme": Object {
- "breakpoints": Object {
- "between": [Function],
- "down": [Function],
- "keys": Array [
- "xs",
- "sm",
- "md",
- "lg",
- "xl",
- ],
- "only": [Function],
- "up": [Function],
- "values": Object {
- "lg": 1280,
- "md": 960,
- "sm": 600,
- "xl": 1920,
- "xs": 0,
- },
- "width": [Function],
- },
- "direction": "ltr",
- "mixins": Object {
- "gutters": [Function],
- "toolbar": Object {
- "@media (min-width:0px) and (orientation: landscape)": Object {
- "minHeight": 48,
- },
- "@media (min-width:600px)": Object {
- "minHeight": 64,
- },
- "minHeight": 56,
- },
- },
- "overrides": Object {},
- "palette": Object {
- "action": Object {
- "activatedOpacity": 0.12,
- "active": "rgba(0, 0, 0, 0.54)",
- "disabled": "rgba(0, 0, 0, 0.26)",
- "disabledBackground": "rgba(0, 0, 0, 0.12)",
- "disabledOpacity": 0.38,
- "focus": "rgba(0, 0, 0, 0.12)",
- "focusOpacity": 0.12,
- "hover": "rgba(0, 0, 0, 0.04)",
- "hoverOpacity": 0.04,
- "selected": "rgba(0, 0, 0, 0.08)",
- "selectedOpacity": 0.08,
- },
- "augmentColor": [Function],
- "background": Object {
- "default": "#fafafa",
- "paper": "#fff",
- },
- "common": Object {
- "black": "#000",
- "white": "#fff",
- },
- "contrastThreshold": 3,
- "divider": "rgba(0, 0, 0, 0.12)",
- "error": Object {
- "contrastText": "#fff",
- "dark": "#d32f2f",
- "light": "#e57373",
- "main": "#f44336",
- },
- "getContrastText": [Function],
- "grey": Object {
- "100": "#f5f5f5",
- "200": "#eeeeee",
- "300": "#e0e0e0",
- "400": "#bdbdbd",
- "50": "#fafafa",
- "500": "#9e9e9e",
- "600": "#757575",
- "700": "#616161",
- "800": "#424242",
- "900": "#212121",
- "A100": "#d5d5d5",
- "A200": "#aaaaaa",
- "A400": "#303030",
- "A700": "#616161",
- },
- "info": Object {
- "contrastText": "#fff",
- "dark": "#1976d2",
- "light": "#64b5f6",
- "main": "#2196f3",
- },
- "primary": Object {
- "contrastText": "#fff",
- "dark": "#303f9f",
- "light": "#7986cb",
- "main": "#3f51b5",
- },
- "secondary": Object {
- "contrastText": "#fff",
- "dark": "#c51162",
- "light": "#ff4081",
- "main": "#f50057",
- },
- "success": Object {
- "contrastText": "rgba(0, 0, 0, 0.87)",
- "dark": "#388e3c",
- "light": "#81c784",
- "main": "#4caf50",
- },
- "text": Object {
- "disabled": "rgba(0, 0, 0, 0.38)",
- "hint": "rgba(0, 0, 0, 0.38)",
- "primary": "rgba(0, 0, 0, 0.87)",
- "secondary": "rgba(0, 0, 0, 0.54)",
- },
- "tonalOffset": 0.2,
- "type": "light",
- "warning": Object {
- "contrastText": "rgba(0, 0, 0, 0.87)",
- "dark": "#f57c00",
- "light": "#ffb74d",
- "main": "#ff9800",
- },
- },
- "props": Object {},
- "shadows": Array [
- "none",
- "0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12)",
- "0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12)",
- "0px 3px 3px -2px rgba(0,0,0,0.2),0px 3px 4px 0px rgba(0,0,0,0.14),0px 1px 8px 0px rgba(0,0,0,0.12)",
- "0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12)",
- "0px 3px 5px -1px rgba(0,0,0,0.2),0px 5px 8px 0px rgba(0,0,0,0.14),0px 1px 14px 0px rgba(0,0,0,0.12)",
- "0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12)",
- "0px 4px 5px -2px rgba(0,0,0,0.2),0px 7px 10px 1px rgba(0,0,0,0.14),0px 2px 16px 1px rgba(0,0,0,0.12)",
- "0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12)",
- "0px 5px 6px -3px rgba(0,0,0,0.2),0px 9px 12px 1px rgba(0,0,0,0.14),0px 3px 16px 2px rgba(0,0,0,0.12)",
- "0px 6px 6px -3px rgba(0,0,0,0.2),0px 10px 14px 1px rgba(0,0,0,0.14),0px 4px 18px 3px rgba(0,0,0,0.12)",
- "0px 6px 7px -4px rgba(0,0,0,0.2),0px 11px 15px 1px rgba(0,0,0,0.14),0px 4px 20px 3px rgba(0,0,0,0.12)",
- "0px 7px 8px -4px rgba(0,0,0,0.2),0px 12px 17px 2px rgba(0,0,0,0.14),0px 5px 22px 4px rgba(0,0,0,0.12)",
- "0px 7px 8px -4px rgba(0,0,0,0.2),0px 13px 19px 2px rgba(0,0,0,0.14),0px 5px 24px 4px rgba(0,0,0,0.12)",
- "0px 7px 9px -4px rgba(0,0,0,0.2),0px 14px 21px 2px rgba(0,0,0,0.14),0px 5px 26px 4px rgba(0,0,0,0.12)",
- "0px 8px 9px -5px rgba(0,0,0,0.2),0px 15px 22px 2px rgba(0,0,0,0.14),0px 6px 28px 5px rgba(0,0,0,0.12)",
- "0px 8px 10px -5px rgba(0,0,0,0.2),0px 16px 24px 2px rgba(0,0,0,0.14),0px 6px 30px 5px rgba(0,0,0,0.12)",
- "0px 8px 11px -5px rgba(0,0,0,0.2),0px 17px 26px 2px rgba(0,0,0,0.14),0px 6px 32px 5px rgba(0,0,0,0.12)",
- "0px 9px 11px -5px rgba(0,0,0,0.2),0px 18px 28px 2px rgba(0,0,0,0.14),0px 7px 34px 6px rgba(0,0,0,0.12)",
- "0px 9px 12px -6px rgba(0,0,0,0.2),0px 19px 29px 2px rgba(0,0,0,0.14),0px 7px 36px 6px rgba(0,0,0,0.12)",
- "0px 10px 13px -6px rgba(0,0,0,0.2),0px 20px 31px 3px rgba(0,0,0,0.14),0px 8px 38px 7px rgba(0,0,0,0.12)",
- "0px 10px 13px -6px rgba(0,0,0,0.2),0px 21px 33px 3px rgba(0,0,0,0.14),0px 8px 40px 7px rgba(0,0,0,0.12)",
- "0px 10px 14px -6px rgba(0,0,0,0.2),0px 22px 35px 3px rgba(0,0,0,0.14),0px 8px 42px 7px rgba(0,0,0,0.12)",
- "0px 11px 14px -7px rgba(0,0,0,0.2),0px 23px 36px 3px rgba(0,0,0,0.14),0px 9px 44px 8px rgba(0,0,0,0.12)",
- "0px 11px 15px -7px rgba(0,0,0,0.2),0px 24px 38px 3px rgba(0,0,0,0.14),0px 9px 46px 8px rgba(0,0,0,0.12)",
- ],
- "shape": Object {
- "borderRadius": 4,
- },
- "spacing": [Function],
- "transitions": Object {
- "create": [Function],
- "duration": Object {
- "complex": 375,
- "enteringScreen": 225,
- "leavingScreen": 195,
- "short": 250,
- "shorter": 200,
- "shortest": 150,
- "standard": 300,
- },
- "easing": Object {
- "easeIn": "cubic-bezier(0.4, 0, 1, 1)",
- "easeInOut": "cubic-bezier(0.4, 0, 0.2, 1)",
- "easeOut": "cubic-bezier(0.0, 0, 0.2, 1)",
- "sharp": "cubic-bezier(0.4, 0, 0.6, 1)",
- },
- "getAutoHeightDuration": [Function],
- },
- "typography": Object {
- "body1": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "1rem",
- "fontWeight": 400,
- "letterSpacing": "0.00938em",
- "lineHeight": 1.5,
- },
- "body2": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "0.875rem",
- "fontWeight": 400,
- "letterSpacing": "0.01071em",
- "lineHeight": 1.43,
- },
- "button": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "0.875rem",
- "fontWeight": 500,
- "letterSpacing": "0.02857em",
- "lineHeight": 1.75,
- "textTransform": "uppercase",
- },
- "caption": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "0.75rem",
- "fontWeight": 400,
- "letterSpacing": "0.03333em",
- "lineHeight": 1.66,
- },
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": 14,
- "fontWeightBold": 700,
- "fontWeightLight": 300,
- "fontWeightMedium": 500,
- "fontWeightRegular": 400,
- "h1": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "6rem",
- "fontWeight": 300,
- "letterSpacing": "-0.01562em",
- "lineHeight": 1.167,
- },
- "h2": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "3.75rem",
- "fontWeight": 300,
- "letterSpacing": "-0.00833em",
- "lineHeight": 1.2,
- },
- "h3": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "3rem",
- "fontWeight": 400,
- "letterSpacing": "0em",
- "lineHeight": 1.167,
- },
- "h4": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "2.125rem",
- "fontWeight": 400,
- "letterSpacing": "0.00735em",
- "lineHeight": 1.235,
- },
- "h5": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "1.5rem",
- "fontWeight": 400,
- "letterSpacing": "0em",
- "lineHeight": 1.334,
- },
- "h6": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "1.25rem",
- "fontWeight": 500,
- "letterSpacing": "0.0075em",
- "lineHeight": 1.6,
- },
- "htmlFontSize": 16,
- "overline": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "0.75rem",
- "fontWeight": 400,
- "letterSpacing": "0.08333em",
- "lineHeight": 2.66,
- "textTransform": "uppercase",
- },
- "pxToRem": [Function],
- "round": [Function],
- "subtitle1": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "1rem",
- "fontWeight": 400,
- "letterSpacing": "0.00938em",
- "lineHeight": 1.75,
- },
- "subtitle2": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "0.875rem",
- "fontWeight": 500,
- "letterSpacing": "0.00714em",
- "lineHeight": 1.57,
- },
- },
- "zIndex": Object {
- "appBar": 1100,
- "drawer": 1200,
- "mobileStepper": 1000,
- "modal": 1300,
- "snackbar": 1400,
- "speedDial": 1050,
- "tooltip": 1500,
- },
- },
- "name": "MuiBackdrop",
- },
- "propTypes": Object {
- "classes": [Function],
- "innerRef": [Function],
- },
- "render": [Function],
- "useStyles": [Function],
- }
- }
- BackdropProps={
- Object {
- "transitionDuration": Object {
- "enter": 225,
- "exit": 195,
- },
- }
- }
- className="MuiDialog-root modal-root"
- closeAfterTransition={true}
- disableEscapeKeyDown={false}
- onClose={[Function]}
- open={true}
+ <div
+ id="accessibility-title"
>
- <ForwardRef(Portal)
- disablePortal={false}
+ onboarding.welcomeModal.accessibility.window_title
+ </div>
+ <button
+ aria-label="onboarding.welcomeModal.accessibility.button_valid"
+ class="MuiButtonBase-root MuiIconButton-root modal-paper-close-button"
+ tabindex="0"
+ type="button"
+ >
+ <span
+ class="MuiIconButton-label"
>
- <Portal
- containerInfo={
- <body
- style="padding-right: 0px; overflow: hidden;"
- >
- <div
- class="MuiDialog-root modal-root"
- role="presentation"
- style="position: fixed; z-index: 1300; right: 0px; bottom: 0px; top: 0px; left: 0px;"
- >
- <div
- aria-hidden="true"
- class="MuiBackdrop-root"
- style="opacity: 1; webkit-transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"
- />
- <div
- data-test="sentinelStart"
- tabindex="0"
- />
- <div
- class="MuiDialog-container MuiDialog-scrollPaper"
- role="none presentation"
- style="opacity: 1; webkit-transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"
- tabindex="-1"
- >
- <div
- aria-labelledby="accessibility-title"
- class="MuiPaper-root MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm MuiPaper-elevation24 MuiPaper-rounded"
- role="dialog"
- >
- <div
- id="accessibility-title"
- >
- onboarding.welcomeModal.accessibility.window_title
- </div>
- <button
- aria-label="onboarding.welcomeModal.accessibility.button_valid"
- class="MuiButtonBase-root MuiIconButton-root modal-paper-close-button"
- tabindex="0"
- type="button"
- >
- <span
- class="MuiIconButton-label"
- >
- <svg
- class="styles__icon___23x3R"
- height="16"
- width="16"
- >
- <use
- xlink:href="#function () {
+ <svg
+ class="styles__icon___23x3R"
+ height="16"
+ width="16"
+ >
+ <use
+ xlink:href="#function () {
return fn.apply(this, arguments);
}"
- />
- </svg>
- </span>
- <span
- class="MuiTouchRipple-root"
- />
- </button>
- <div
- class="info"
- >
- <h1
- class="info-header text-24-bold"
- >
- onboarding.welcomeModal.title
- </h1>
- <div
- class="info-content text-16-normal"
- >
- <p>
- onboarding.welcomeModal.part1
- </p>
- <p>
- onboarding.welcomeModal.part2
- </p>
- </div>
- <div
- class="info-footer"
- >
- <svg
- class="styles__icon___23x3R"
- height="191"
- width="191"
- >
- <use
- xlink:href="#function () {
+ />
+ </svg>
+ </span>
+ <span
+ class="MuiTouchRipple-root"
+ />
+ </button>
+ <div
+ class="info"
+ >
+ <h1
+ class="info-header text-24-bold"
+ >
+ onboarding.welcomeModal.title
+ </h1>
+ <div
+ class="info-content text-16-normal"
+ >
+ <p>
+ onboarding.welcomeModal.part1
+ </p>
+ <p>
+ onboarding.welcomeModal.part2
+ </p>
+ </div>
+ <div
+ class="info-footer"
+ >
+ <svg
+ class="styles__icon___23x3R"
+ height="191"
+ width="191"
+ >
+ <use
+ xlink:href="#function () {
return fn.apply(this, arguments);
}"
- />
- </svg>
- <button
- aria-label="onboarding.welcomeModal.accessibility.button_valid"
- class="MuiButtonBase-root MuiButton-root btn-highlight MuiButton-text"
- tabindex="0"
- type="button"
- >
- <span
- class="MuiButton-label text-16-bold"
- >
- onboarding.welcomeModal.button_valid
- </span>
- <span
- class="MuiTouchRipple-root"
- />
- </button>
- </div>
- </div>
- </div>
- </div>
- <div
- data-test="sentinelEnd"
- tabindex="0"
- />
- </div>
- </body>
- }
+ />
+ </svg>
+ <button
+ aria-label="onboarding.welcomeModal.accessibility.button_valid"
+ class="MuiButtonBase-root MuiButton-root MuiButton-text btnPrimary"
+ tabindex="0"
+ type="button"
>
- <div
- className="MuiDialog-root modal-root"
- onKeyDown={[Function]}
- role="presentation"
- style={
- Object {
- "bottom": 0,
- "left": 0,
- "position": "fixed",
- "right": 0,
- "top": 0,
- "zIndex": 1300,
- }
- }
+ <span
+ class="MuiButton-label"
>
- <WithStyles(ForwardRef(Backdrop))
- onClick={[Function]}
- open={true}
- transitionDuration={
- Object {
- "enter": 225,
- "exit": 195,
- }
- }
- >
- <ForwardRef(Backdrop)
- classes={
- Object {
- "invisible": "MuiBackdrop-invisible",
- "root": "MuiBackdrop-root",
- }
- }
- onClick={[Function]}
- open={true}
- transitionDuration={
- Object {
- "enter": 225,
- "exit": 195,
- }
- }
- >
- <ForwardRef(Fade)
- in={true}
- onClick={[Function]}
- timeout={
- Object {
- "enter": 225,
- "exit": 195,
- }
- }
- >
- <Transition
- appear={true}
- enter={true}
- exit={true}
- in={true}
- mountOnEnter={false}
- onClick={[Function]}
- onEnter={[Function]}
- onEntered={[Function]}
- onEntering={[Function]}
- onExit={[Function]}
- onExited={[Function]}
- onExiting={[Function]}
- timeout={
- Object {
- "enter": 225,
- "exit": 195,
- }
- }
- unmountOnExit={false}
- >
- <div
- aria-hidden={true}
- className="MuiBackdrop-root"
- onClick={[Function]}
- style={
- Object {
- "opacity": 1,
- "visibility": undefined,
- }
- }
- />
- </Transition>
- </ForwardRef(Fade)>
- </ForwardRef(Backdrop)>
- </WithStyles(ForwardRef(Backdrop))>
- <Unstable_TrapFocus
- disableAutoFocus={false}
- disableEnforceFocus={false}
- disableRestoreFocus={false}
- getDoc={[Function]}
- isEnabled={[Function]}
- open={true}
- >
- <div
- data-test="sentinelStart"
- tabIndex={0}
- />
- <ForwardRef(Fade)
- appear={true}
- in={true}
- onEnter={[Function]}
- onExited={[Function]}
- role="none presentation"
- tabIndex="-1"
- timeout={
- Object {
- "enter": 225,
- "exit": 195,
- }
- }
- >
- <Transition
- appear={true}
- enter={true}
- exit={true}
- in={true}
- mountOnEnter={false}
- onEnter={[Function]}
- onEntered={[Function]}
- onEntering={[Function]}
- onExit={[Function]}
- onExited={[Function]}
- onExiting={[Function]}
- role="none presentation"
- tabIndex="-1"
- timeout={
- Object {
- "enter": 225,
- "exit": 195,
- }
- }
- unmountOnExit={false}
- >
- <div
- className="MuiDialog-container MuiDialog-scrollPaper"
- onMouseDown={[Function]}
- onMouseUp={[Function]}
- role="none presentation"
- style={
- Object {
- "opacity": 1,
- "visibility": undefined,
- }
- }
- tabIndex="-1"
- >
- <WithStyles(ForwardRef(Paper))
- aria-labelledby="accessibility-title"
- className="MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm"
- elevation={24}
- role="dialog"
- >
- <ForwardRef(Paper)
- aria-labelledby="accessibility-title"
- className="MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm"
- classes={
- Object {
- "elevation0": "MuiPaper-elevation0",
- "elevation1": "MuiPaper-elevation1",
- "elevation10": "MuiPaper-elevation10",
- "elevation11": "MuiPaper-elevation11",
- "elevation12": "MuiPaper-elevation12",
- "elevation13": "MuiPaper-elevation13",
- "elevation14": "MuiPaper-elevation14",
- "elevation15": "MuiPaper-elevation15",
- "elevation16": "MuiPaper-elevation16",
- "elevation17": "MuiPaper-elevation17",
- "elevation18": "MuiPaper-elevation18",
- "elevation19": "MuiPaper-elevation19",
- "elevation2": "MuiPaper-elevation2",
- "elevation20": "MuiPaper-elevation20",
- "elevation21": "MuiPaper-elevation21",
- "elevation22": "MuiPaper-elevation22",
- "elevation23": "MuiPaper-elevation23",
- "elevation24": "MuiPaper-elevation24",
- "elevation3": "MuiPaper-elevation3",
- "elevation4": "MuiPaper-elevation4",
- "elevation5": "MuiPaper-elevation5",
- "elevation6": "MuiPaper-elevation6",
- "elevation7": "MuiPaper-elevation7",
- "elevation8": "MuiPaper-elevation8",
- "elevation9": "MuiPaper-elevation9",
- "outlined": "MuiPaper-outlined",
- "root": "MuiPaper-root",
- "rounded": "MuiPaper-rounded",
- }
- }
- elevation={24}
- role="dialog"
- >
- <div
- aria-labelledby="accessibility-title"
- className="MuiPaper-root MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm MuiPaper-elevation24 MuiPaper-rounded"
- role="dialog"
- >
- <div
- id="accessibility-title"
- >
- onboarding.welcomeModal.accessibility.window_title
- </div>
- <WithStyles(ForwardRef(IconButton))
- aria-label="onboarding.welcomeModal.accessibility.button_valid"
- className="modal-paper-close-button"
- onClick={[Function]}
- >
- <ForwardRef(IconButton)
- aria-label="onboarding.welcomeModal.accessibility.button_valid"
- className="modal-paper-close-button"
- classes={
- Object {
- "colorInherit": "MuiIconButton-colorInherit",
- "colorPrimary": "MuiIconButton-colorPrimary",
- "colorSecondary": "MuiIconButton-colorSecondary",
- "disabled": "Mui-disabled",
- "edgeEnd": "MuiIconButton-edgeEnd",
- "edgeStart": "MuiIconButton-edgeStart",
- "label": "MuiIconButton-label",
- "root": "MuiIconButton-root",
- "sizeSmall": "MuiIconButton-sizeSmall",
- }
- }
- onClick={[Function]}
- >
- <WithStyles(ForwardRef(ButtonBase))
- aria-label="onboarding.welcomeModal.accessibility.button_valid"
- centerRipple={true}
- className="MuiIconButton-root modal-paper-close-button"
- disabled={false}
- focusRipple={true}
- onClick={[Function]}
- >
- <ForwardRef(ButtonBase)
- aria-label="onboarding.welcomeModal.accessibility.button_valid"
- centerRipple={true}
- className="MuiIconButton-root modal-paper-close-button"
- classes={
- Object {
- "disabled": "Mui-disabled",
- "focusVisible": "Mui-focusVisible",
- "root": "MuiButtonBase-root",
- }
- }
- disabled={false}
- focusRipple={true}
- onClick={[Function]}
- >
- <button
- aria-label="onboarding.welcomeModal.accessibility.button_valid"
- className="MuiButtonBase-root MuiIconButton-root modal-paper-close-button"
- disabled={false}
- onBlur={[Function]}
- onClick={[Function]}
- onDragLeave={[Function]}
- onFocus={[Function]}
- onKeyDown={[Function]}
- onKeyUp={[Function]}
- onMouseDown={[Function]}
- onMouseLeave={[Function]}
- onMouseUp={[Function]}
- onTouchEnd={[Function]}
- onTouchMove={[Function]}
- onTouchStart={[Function]}
- tabIndex={0}
- type="button"
- >
- <span
- className="MuiIconButton-label"
- >
- <Icon
- icon={[MockFunction]}
- size={16}
- spin={false}
- >
- <Component
- className="styles__icon___23x3R"
- height={16}
- style={Object {}}
- width={16}
- >
- <svg
- className="styles__icon___23x3R"
- height={16}
- style={Object {}}
- width={16}
- >
- <use
- xlinkHref="#function () {
- return fn.apply(this, arguments);
- }"
- />
- </svg>
- </Component>
- </Icon>
- </span>
- <WithStyles(memo)
- center={true}
- >
- <ForwardRef(TouchRipple)
- center={true}
- classes={
- Object {
- "child": "MuiTouchRipple-child",
- "childLeaving": "MuiTouchRipple-childLeaving",
- "childPulsate": "MuiTouchRipple-childPulsate",
- "ripple": "MuiTouchRipple-ripple",
- "ripplePulsate": "MuiTouchRipple-ripplePulsate",
- "rippleVisible": "MuiTouchRipple-rippleVisible",
- "root": "MuiTouchRipple-root",
- }
- }
- >
- <span
- className="MuiTouchRipple-root"
- >
- <TransitionGroup
- childFactory={[Function]}
- component={null}
- exit={true}
- />
- </span>
- </ForwardRef(TouchRipple)>
- </WithStyles(memo)>
- </button>
- </ForwardRef(ButtonBase)>
- </WithStyles(ForwardRef(ButtonBase))>
- </ForwardRef(IconButton)>
- </WithStyles(ForwardRef(IconButton))>
- <div
- className="info"
- >
- <h1
- className="info-header text-24-bold"
- >
- onboarding.welcomeModal.title
- </h1>
- <div
- className="info-content text-16-normal"
- >
- <p>
- onboarding.welcomeModal.part1
- </p>
- <p>
- onboarding.welcomeModal.part2
- </p>
- </div>
- <div
- className="info-footer"
- >
- <Icon
- icon={[MockFunction]}
- size={191}
- spin={false}
- >
- <Component
- className="styles__icon___23x3R"
- height={191}
- style={Object {}}
- width={191}
- >
- <svg
- className="styles__icon___23x3R"
- height={191}
- style={Object {}}
- width={191}
- >
- <use
- xlinkHref="#function () {
- return fn.apply(this, arguments);
- }"
- />
- </svg>
- </Component>
- </Icon>
- <WithStyles(ForwardRef(Button))
- aria-label="onboarding.welcomeModal.accessibility.button_valid"
- classes={
- Object {
- "label": "text-16-bold",
- "root": "btn-highlight",
- }
- }
- onClick={[Function]}
- >
- <ForwardRef(Button)
- aria-label="onboarding.welcomeModal.accessibility.button_valid"
- classes={
- Object {
- "colorInherit": "MuiButton-colorInherit",
- "contained": "MuiButton-contained",
- "containedPrimary": "MuiButton-containedPrimary",
- "containedSecondary": "MuiButton-containedSecondary",
- "containedSizeLarge": "MuiButton-containedSizeLarge",
- "containedSizeSmall": "MuiButton-containedSizeSmall",
- "disableElevation": "MuiButton-disableElevation",
- "disabled": "Mui-disabled",
- "endIcon": "MuiButton-endIcon",
- "focusVisible": "Mui-focusVisible",
- "fullWidth": "MuiButton-fullWidth",
- "iconSizeLarge": "MuiButton-iconSizeLarge",
- "iconSizeMedium": "MuiButton-iconSizeMedium",
- "iconSizeSmall": "MuiButton-iconSizeSmall",
- "label": "MuiButton-label text-16-bold",
- "outlined": "MuiButton-outlined",
- "outlinedPrimary": "MuiButton-outlinedPrimary",
- "outlinedSecondary": "MuiButton-outlinedSecondary",
- "outlinedSizeLarge": "MuiButton-outlinedSizeLarge",
- "outlinedSizeSmall": "MuiButton-outlinedSizeSmall",
- "root": "MuiButton-root btn-highlight",
- "sizeLarge": "MuiButton-sizeLarge",
- "sizeSmall": "MuiButton-sizeSmall",
- "startIcon": "MuiButton-startIcon",
- "text": "MuiButton-text",
- "textPrimary": "MuiButton-textPrimary",
- "textSecondary": "MuiButton-textSecondary",
- "textSizeLarge": "MuiButton-textSizeLarge",
- "textSizeSmall": "MuiButton-textSizeSmall",
- }
- }
- onClick={[Function]}
- >
- <WithStyles(ForwardRef(ButtonBase))
- aria-label="onboarding.welcomeModal.accessibility.button_valid"
- className="MuiButton-root btn-highlight MuiButton-text"
- component="button"
- disabled={false}
- focusRipple={true}
- focusVisibleClassName="Mui-focusVisible"
- onClick={[Function]}
- type="button"
- >
- <ForwardRef(ButtonBase)
- aria-label="onboarding.welcomeModal.accessibility.button_valid"
- className="MuiButton-root btn-highlight MuiButton-text"
- classes={
- Object {
- "disabled": "Mui-disabled",
- "focusVisible": "Mui-focusVisible",
- "root": "MuiButtonBase-root",
- }
- }
- component="button"
- disabled={false}
- focusRipple={true}
- focusVisibleClassName="Mui-focusVisible"
- onClick={[Function]}
- type="button"
- >
- <button
- aria-label="onboarding.welcomeModal.accessibility.button_valid"
- className="MuiButtonBase-root MuiButton-root btn-highlight MuiButton-text"
- disabled={false}
- onBlur={[Function]}
- onClick={[Function]}
- onDragLeave={[Function]}
- onFocus={[Function]}
- onKeyDown={[Function]}
- onKeyUp={[Function]}
- onMouseDown={[Function]}
- onMouseLeave={[Function]}
- onMouseUp={[Function]}
- onTouchEnd={[Function]}
- onTouchMove={[Function]}
- onTouchStart={[Function]}
- tabIndex={0}
- type="button"
- >
- <span
- className="MuiButton-label text-16-bold"
- >
- onboarding.welcomeModal.button_valid
- </span>
- <WithStyles(memo)
- center={false}
- >
- <ForwardRef(TouchRipple)
- center={false}
- classes={
- Object {
- "child": "MuiTouchRipple-child",
- "childLeaving": "MuiTouchRipple-childLeaving",
- "childPulsate": "MuiTouchRipple-childPulsate",
- "ripple": "MuiTouchRipple-ripple",
- "ripplePulsate": "MuiTouchRipple-ripplePulsate",
- "rippleVisible": "MuiTouchRipple-rippleVisible",
- "root": "MuiTouchRipple-root",
- }
- }
- >
- <span
- className="MuiTouchRipple-root"
- >
- <TransitionGroup
- childFactory={[Function]}
- component={null}
- exit={true}
- />
- </span>
- </ForwardRef(TouchRipple)>
- </WithStyles(memo)>
- </button>
- </ForwardRef(ButtonBase)>
- </WithStyles(ForwardRef(ButtonBase))>
- </ForwardRef(Button)>
- </WithStyles(ForwardRef(Button))>
- </div>
- </div>
- </div>
- </ForwardRef(Paper)>
- </WithStyles(ForwardRef(Paper))>
- </div>
- </Transition>
- </ForwardRef(Fade)>
- <div
- data-test="sentinelEnd"
- tabIndex={0}
- />
- </Unstable_TrapFocus>
- </div>
- </Portal>
- </ForwardRef(Portal)>
- </ForwardRef(Modal)>
- </ForwardRef(Dialog)>
- </WithStyles(ForwardRef(Dialog))>
- </WelcomeModal>
-</Provider>
-`;
-
-exports[`WelcomeModal component should not be rendered 1`] = `
-<Provider
- store={
- Object {
- "clearActions": [Function],
- "dispatch": [Function],
- "getActions": [Function],
- "getState": [Function],
- "replaceReducer": [Function],
- "subscribe": [Function],
- }
- }
->
- <WelcomeModal
- open={false}
- >
- <WithStyles(ForwardRef(Dialog))
- aria-labelledby="accessibility-title"
- classes={
- Object {
- "paper": "modal-paper",
- "root": "modal-root",
- }
- }
- onClose={[Function]}
- open={false}
- >
- <ForwardRef(Dialog)
- aria-labelledby="accessibility-title"
- classes={
- Object {
- "container": "MuiDialog-container",
- "paper": "MuiDialog-paper modal-paper",
- "paperFullScreen": "MuiDialog-paperFullScreen",
- "paperFullWidth": "MuiDialog-paperFullWidth",
- "paperScrollBody": "MuiDialog-paperScrollBody",
- "paperScrollPaper": "MuiDialog-paperScrollPaper",
- "paperWidthFalse": "MuiDialog-paperWidthFalse",
- "paperWidthLg": "MuiDialog-paperWidthLg",
- "paperWidthMd": "MuiDialog-paperWidthMd",
- "paperWidthSm": "MuiDialog-paperWidthSm",
- "paperWidthXl": "MuiDialog-paperWidthXl",
- "paperWidthXs": "MuiDialog-paperWidthXs",
- "root": "MuiDialog-root modal-root",
- "scrollBody": "MuiDialog-scrollBody",
- "scrollPaper": "MuiDialog-scrollPaper",
- }
- }
- onClose={[Function]}
- open={false}
- >
- <ForwardRef(Modal)
- BackdropComponent={
- Object {
- "$$typeof": Symbol(react.forward_ref),
- "Naked": Object {
- "$$typeof": Symbol(react.forward_ref),
- "propTypes": Object {
- "children": [Function],
- "className": [Function],
- "classes": [Function],
- "invisible": [Function],
- "open": [Function],
- "transitionDuration": [Function],
- },
- "render": [Function],
- },
- "displayName": "WithStyles(ForwardRef(Backdrop))",
- "options": Object {
- "defaultTheme": Object {
- "breakpoints": Object {
- "between": [Function],
- "down": [Function],
- "keys": Array [
- "xs",
- "sm",
- "md",
- "lg",
- "xl",
- ],
- "only": [Function],
- "up": [Function],
- "values": Object {
- "lg": 1280,
- "md": 960,
- "sm": 600,
- "xl": 1920,
- "xs": 0,
- },
- "width": [Function],
- },
- "direction": "ltr",
- "mixins": Object {
- "gutters": [Function],
- "toolbar": Object {
- "@media (min-width:0px) and (orientation: landscape)": Object {
- "minHeight": 48,
- },
- "@media (min-width:600px)": Object {
- "minHeight": 64,
- },
- "minHeight": 56,
- },
- },
- "overrides": Object {},
- "palette": Object {
- "action": Object {
- "activatedOpacity": 0.12,
- "active": "rgba(0, 0, 0, 0.54)",
- "disabled": "rgba(0, 0, 0, 0.26)",
- "disabledBackground": "rgba(0, 0, 0, 0.12)",
- "disabledOpacity": 0.38,
- "focus": "rgba(0, 0, 0, 0.12)",
- "focusOpacity": 0.12,
- "hover": "rgba(0, 0, 0, 0.04)",
- "hoverOpacity": 0.04,
- "selected": "rgba(0, 0, 0, 0.08)",
- "selectedOpacity": 0.08,
- },
- "augmentColor": [Function],
- "background": Object {
- "default": "#fafafa",
- "paper": "#fff",
- },
- "common": Object {
- "black": "#000",
- "white": "#fff",
- },
- "contrastThreshold": 3,
- "divider": "rgba(0, 0, 0, 0.12)",
- "error": Object {
- "contrastText": "#fff",
- "dark": "#d32f2f",
- "light": "#e57373",
- "main": "#f44336",
- },
- "getContrastText": [Function],
- "grey": Object {
- "100": "#f5f5f5",
- "200": "#eeeeee",
- "300": "#e0e0e0",
- "400": "#bdbdbd",
- "50": "#fafafa",
- "500": "#9e9e9e",
- "600": "#757575",
- "700": "#616161",
- "800": "#424242",
- "900": "#212121",
- "A100": "#d5d5d5",
- "A200": "#aaaaaa",
- "A400": "#303030",
- "A700": "#616161",
- },
- "info": Object {
- "contrastText": "#fff",
- "dark": "#1976d2",
- "light": "#64b5f6",
- "main": "#2196f3",
- },
- "primary": Object {
- "contrastText": "#fff",
- "dark": "#303f9f",
- "light": "#7986cb",
- "main": "#3f51b5",
- },
- "secondary": Object {
- "contrastText": "#fff",
- "dark": "#c51162",
- "light": "#ff4081",
- "main": "#f50057",
- },
- "success": Object {
- "contrastText": "rgba(0, 0, 0, 0.87)",
- "dark": "#388e3c",
- "light": "#81c784",
- "main": "#4caf50",
- },
- "text": Object {
- "disabled": "rgba(0, 0, 0, 0.38)",
- "hint": "rgba(0, 0, 0, 0.38)",
- "primary": "rgba(0, 0, 0, 0.87)",
- "secondary": "rgba(0, 0, 0, 0.54)",
- },
- "tonalOffset": 0.2,
- "type": "light",
- "warning": Object {
- "contrastText": "rgba(0, 0, 0, 0.87)",
- "dark": "#f57c00",
- "light": "#ffb74d",
- "main": "#ff9800",
- },
- },
- "props": Object {},
- "shadows": Array [
- "none",
- "0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12)",
- "0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12)",
- "0px 3px 3px -2px rgba(0,0,0,0.2),0px 3px 4px 0px rgba(0,0,0,0.14),0px 1px 8px 0px rgba(0,0,0,0.12)",
- "0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12)",
- "0px 3px 5px -1px rgba(0,0,0,0.2),0px 5px 8px 0px rgba(0,0,0,0.14),0px 1px 14px 0px rgba(0,0,0,0.12)",
- "0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12)",
- "0px 4px 5px -2px rgba(0,0,0,0.2),0px 7px 10px 1px rgba(0,0,0,0.14),0px 2px 16px 1px rgba(0,0,0,0.12)",
- "0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12)",
- "0px 5px 6px -3px rgba(0,0,0,0.2),0px 9px 12px 1px rgba(0,0,0,0.14),0px 3px 16px 2px rgba(0,0,0,0.12)",
- "0px 6px 6px -3px rgba(0,0,0,0.2),0px 10px 14px 1px rgba(0,0,0,0.14),0px 4px 18px 3px rgba(0,0,0,0.12)",
- "0px 6px 7px -4px rgba(0,0,0,0.2),0px 11px 15px 1px rgba(0,0,0,0.14),0px 4px 20px 3px rgba(0,0,0,0.12)",
- "0px 7px 8px -4px rgba(0,0,0,0.2),0px 12px 17px 2px rgba(0,0,0,0.14),0px 5px 22px 4px rgba(0,0,0,0.12)",
- "0px 7px 8px -4px rgba(0,0,0,0.2),0px 13px 19px 2px rgba(0,0,0,0.14),0px 5px 24px 4px rgba(0,0,0,0.12)",
- "0px 7px 9px -4px rgba(0,0,0,0.2),0px 14px 21px 2px rgba(0,0,0,0.14),0px 5px 26px 4px rgba(0,0,0,0.12)",
- "0px 8px 9px -5px rgba(0,0,0,0.2),0px 15px 22px 2px rgba(0,0,0,0.14),0px 6px 28px 5px rgba(0,0,0,0.12)",
- "0px 8px 10px -5px rgba(0,0,0,0.2),0px 16px 24px 2px rgba(0,0,0,0.14),0px 6px 30px 5px rgba(0,0,0,0.12)",
- "0px 8px 11px -5px rgba(0,0,0,0.2),0px 17px 26px 2px rgba(0,0,0,0.14),0px 6px 32px 5px rgba(0,0,0,0.12)",
- "0px 9px 11px -5px rgba(0,0,0,0.2),0px 18px 28px 2px rgba(0,0,0,0.14),0px 7px 34px 6px rgba(0,0,0,0.12)",
- "0px 9px 12px -6px rgba(0,0,0,0.2),0px 19px 29px 2px rgba(0,0,0,0.14),0px 7px 36px 6px rgba(0,0,0,0.12)",
- "0px 10px 13px -6px rgba(0,0,0,0.2),0px 20px 31px 3px rgba(0,0,0,0.14),0px 8px 38px 7px rgba(0,0,0,0.12)",
- "0px 10px 13px -6px rgba(0,0,0,0.2),0px 21px 33px 3px rgba(0,0,0,0.14),0px 8px 40px 7px rgba(0,0,0,0.12)",
- "0px 10px 14px -6px rgba(0,0,0,0.2),0px 22px 35px 3px rgba(0,0,0,0.14),0px 8px 42px 7px rgba(0,0,0,0.12)",
- "0px 11px 14px -7px rgba(0,0,0,0.2),0px 23px 36px 3px rgba(0,0,0,0.14),0px 9px 44px 8px rgba(0,0,0,0.12)",
- "0px 11px 15px -7px rgba(0,0,0,0.2),0px 24px 38px 3px rgba(0,0,0,0.14),0px 9px 46px 8px rgba(0,0,0,0.12)",
- ],
- "shape": Object {
- "borderRadius": 4,
- },
- "spacing": [Function],
- "transitions": Object {
- "create": [Function],
- "duration": Object {
- "complex": 375,
- "enteringScreen": 225,
- "leavingScreen": 195,
- "short": 250,
- "shorter": 200,
- "shortest": 150,
- "standard": 300,
- },
- "easing": Object {
- "easeIn": "cubic-bezier(0.4, 0, 1, 1)",
- "easeInOut": "cubic-bezier(0.4, 0, 0.2, 1)",
- "easeOut": "cubic-bezier(0.0, 0, 0.2, 1)",
- "sharp": "cubic-bezier(0.4, 0, 0.6, 1)",
- },
- "getAutoHeightDuration": [Function],
- },
- "typography": Object {
- "body1": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "1rem",
- "fontWeight": 400,
- "letterSpacing": "0.00938em",
- "lineHeight": 1.5,
- },
- "body2": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "0.875rem",
- "fontWeight": 400,
- "letterSpacing": "0.01071em",
- "lineHeight": 1.43,
- },
- "button": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "0.875rem",
- "fontWeight": 500,
- "letterSpacing": "0.02857em",
- "lineHeight": 1.75,
- "textTransform": "uppercase",
- },
- "caption": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "0.75rem",
- "fontWeight": 400,
- "letterSpacing": "0.03333em",
- "lineHeight": 1.66,
- },
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": 14,
- "fontWeightBold": 700,
- "fontWeightLight": 300,
- "fontWeightMedium": 500,
- "fontWeightRegular": 400,
- "h1": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "6rem",
- "fontWeight": 300,
- "letterSpacing": "-0.01562em",
- "lineHeight": 1.167,
- },
- "h2": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "3.75rem",
- "fontWeight": 300,
- "letterSpacing": "-0.00833em",
- "lineHeight": 1.2,
- },
- "h3": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "3rem",
- "fontWeight": 400,
- "letterSpacing": "0em",
- "lineHeight": 1.167,
- },
- "h4": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "2.125rem",
- "fontWeight": 400,
- "letterSpacing": "0.00735em",
- "lineHeight": 1.235,
- },
- "h5": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "1.5rem",
- "fontWeight": 400,
- "letterSpacing": "0em",
- "lineHeight": 1.334,
- },
- "h6": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "1.25rem",
- "fontWeight": 500,
- "letterSpacing": "0.0075em",
- "lineHeight": 1.6,
- },
- "htmlFontSize": 16,
- "overline": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "0.75rem",
- "fontWeight": 400,
- "letterSpacing": "0.08333em",
- "lineHeight": 2.66,
- "textTransform": "uppercase",
- },
- "pxToRem": [Function],
- "round": [Function],
- "subtitle1": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "1rem",
- "fontWeight": 400,
- "letterSpacing": "0.00938em",
- "lineHeight": 1.75,
- },
- "subtitle2": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "0.875rem",
- "fontWeight": 500,
- "letterSpacing": "0.00714em",
- "lineHeight": 1.57,
- },
- },
- "zIndex": Object {
- "appBar": 1100,
- "drawer": 1200,
- "mobileStepper": 1000,
- "modal": 1300,
- "snackbar": 1400,
- "speedDial": 1050,
- "tooltip": 1500,
- },
- },
- "name": "MuiBackdrop",
- },
- "propTypes": Object {
- "classes": [Function],
- "innerRef": [Function],
- },
- "render": [Function],
- "useStyles": [Function],
- }
- }
- BackdropProps={
- Object {
- "transitionDuration": Object {
- "enter": 225,
- "exit": 195,
- },
- }
- }
- className="MuiDialog-root modal-root"
- closeAfterTransition={true}
- disableEscapeKeyDown={false}
- onClose={[Function]}
- open={false}
- />
- </ForwardRef(Dialog)>
- </WithStyles(ForwardRef(Dialog))>
- </WelcomeModal>
-</Provider>
+ onboarding.welcomeModal.button_valid
+ </span>
+ <span
+ class="MuiTouchRipple-root"
+ />
+ </button>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div
+ data-test="sentinelEnd"
+ tabindex="0"
+ />
+ </div>
+</body>
`;
diff --git a/src/components/WelcomeModal/welcomeModal.scss b/src/components/WelcomeModal/welcomeModal.scss
index 3bbf75622944f0d216f5b9afa88d7b075d5025f8..e2c3b1707cbda619a895d706ee9ba0f273ded976 100644
--- a/src/components/WelcomeModal/welcomeModal.scss
+++ b/src/components/WelcomeModal/welcomeModal.scss
@@ -9,17 +9,7 @@
}
p {
- color: white;
- }
-
- button.btn-highlight {
- width: 100%;
- display: flex;
- align-items: center;
- justify-content: space-evenly;
- margin: 1.5rem 0 1rem;
- padding: 1rem 2rem;
- transition: all 300ms ease;
+ color: $white;
}
}
diff --git a/src/components/theme.ts b/src/components/theme.ts
new file mode 100644
index 0000000000000000000000000000000000000000..e23010af8bab6529a2e279be850241191d9559f1
--- /dev/null
+++ b/src/components/theme.ts
@@ -0,0 +1,23 @@
+import { createTheme } from '@material-ui/core'
+
+export const theme = createTheme({
+ palette: {
+ type: 'dark',
+ primary: {
+ '500': '#579eff',
+ },
+ },
+ overrides: {
+ MuiButton: {
+ root: {
+ height: 40,
+ },
+ sizeSmall: {
+ height: 32,
+ },
+ sizeLarge: {
+ height: 40,
+ },
+ },
+ },
+})
diff --git a/src/db/ecogestureData.json b/src/db/ecogestureData.json
index ac1ae9fcacc3ba0e5320388aac245e35228671d9..7e148d5614d73bce385b84431b8d8fd1aecf7b9f 100644
--- a/src/db/ecogestureData.json
+++ b/src/db/ecogestureData.json
@@ -1153,9 +1153,9 @@
"_id": "ECOGESTURE0051",
"usage": 5,
"fluidTypes": [0],
- "shortName": "Crépuscule numérique",
- "longName": "Je diminue la luminosité de mon écran d’ordinateur tout en conservant un confort de vue.",
- "longDescription": "Faites fonctionner les écrans de façon économe en supprimant les économiseurs d’écran animés (ils empêchent la mise en veille de l’ordinateur et n’économisent pas d’électricité), en réglant la luminosité pour un bon compromis entre confort visuel et économie d’énergie. Activez le « mode sombre » sur votre téléphone portable quand c'est possible, notamment sur les applications. (Vous l'aurez remarqué notre service est en mode sombre, et c'est pour cela :))",
+ "shortName": "Crépuscule visuel",
+ "longName": "Je diminue la luminosité de mon écran tout en conservant un confort de vue.",
+ "longDescription": "Faites fonctionner les écrans de façon économe en supprimant les économiseurs d’écran animés (ils empêchent la mise en veille de l’ordinateur et n’économisent pas d’électricité), en réglant la luminosité pour un bon compromis entre confort visuel et économie d’énergie. Activez le « mode sombre » sur votre téléphone portable quand c'est possible, notamment sur les applications. (Vous l'aurez remarqué notre service est en mode sombre, et c'est pour cela :)). Il est également possible de diminuer la luminosité de la télévision manuellement ou par contrôle automatique. En plus de préserver vos yeux, vous diminuerez d'environ 25 % la consommation électrique de votre appareil.",
"impactLevel": 3,
"efficiency": 1.5,
"difficulty": 2,
@@ -1166,7 +1166,7 @@
"equipmentInstallation": true,
"investment": null,
"action": true,
- "actionName": "Je diminue la luminosité de mon écran d’ordinateur tout en conservant un confort de vue.",
+ "actionName": "Je diminue la luminosité de mes écrans tout en conservant un confort de vue.",
"actionDuration": 3,
"doing": false,
"objective": false,
@@ -1201,7 +1201,7 @@
"fluidTypes": [0],
"shortName": "Electro",
"longName": "J’utilise des multiprises pour couper les veilles de mes appareils.",
- "longDescription": "Quand les appareils ne fonctionnent pas, ils peuvent tout de même continuer à consommer de l’énergie. Par exemple, un téléviseur qui fonctionne 4 heures par jour reste en veille les 20 heures restantes et consomme donc pendant ce temps. Pour vous faciliter la vie et faire des économies, reliez ces appareils (télé, lecteur DVD-BlueRay, HiFi, décodeur…) à une multiprise à interrupteur et pensez à éteindre la multi-prise en temps voulu.",
+ "longDescription": "Quand les appareils ne fonctionnent pas, ils peuvent tout de même continuer à consommer de l’énergie. Par exemple, un téléviseur qui fonctionne 4 heures par jour reste en veille les 20 heures restantes et consomme donc pendant ce temps. Pour vous faciliter la vie et faire des économies, reliez ces appareils (télé, lecteur DVD-BlueRay, HiFi, décodeur…) à une multiprise à interrupteur et pensez à éteindre la multi-prise en temps voulu. Adopter cette bonne pratique permet d'économiser jusqu’à 15% de la facture d’électricité !",
"impactLevel": 3,
"efficiency": 1.5,
"difficulty": 2,
@@ -1224,7 +1224,7 @@
"fluidTypes": [0],
"shortName": "Génie de la lampe",
"longName": "J’utilise uniquement des ampoules basse consommation dans toutes les pièces de vie.",
- "longDescription": "Remplacez par des ampoules basse consommation les ampoules qui restent en général allumées plus d’une demi-heure. Vous pouvez ainsi remplacer une ampoule à incandescence de 60 W par une ampoule basse consommation de 15 W. Elle émettra autant de lumière mais pour une consommation d’électricité 4 à 5 fois moins importante. En outre, elle chauffe beaucoup moins et peut durer jusqu’à 15 fois plus longtemps.",
+ "longDescription": "Privilégiez des ampoules basse consommation si celles-ci restent généralement allumées plus d’une demi-heure. Vous pouvez ainsi remplacer une ampoule à incandescence de 60 W par une ampoule basse consommation de 15 W. Elle émettra autant de lumière, mais pour une consommation d’électricité 4 à 5 fois moins importante. En outre, elle chauffe beaucoup moins et peut durer jusqu’à 15 fois plus longtemps. Pour regarder la télévision, une ampoule LED de 3 à 4 W est suffisante, tandis qu'une de 6 à 9 W sera plus adaptée pour lire ou travailler.",
"impactLevel": 3,
"efficiency": 1.5,
"difficulty": 2,
@@ -1730,7 +1730,7 @@
"fluidTypes": [0],
"shortName": "Architecte d'intérieur",
"longName": "Je positionne mon réfrigérateur loin d’une source de chaleur (four, cuisinière, fenêtre…).",
- "longDescription": "Il vaut mieux éviter de placer le réfrigérateur ou le congélateur près d’un four, d’une cuisinière ou près de l’éclairage direct d’une fenêtre. Ces derniers réchauffent les appareils de froid qui vont donc consommer plus pour rester à la bonne température. S’il n’est pas possible de faire autrement, prévoyez une plaque très isolante entre les appareils électroménagers. De même, ne chauffez pas trop la cuisine : installé dans une pièce à 23 °C, le réfrigérateur consomme 38 % de plus que dans une pièce à 18 °C ! Enfin, si vous placez votre congélateur dans un local non chauffé (garage, cave, etc.), il ne doit pas faire trop froid non plus sinon l’appareil va surchauffer à l’intérieur.",
+ "longDescription": "Il vaut mieux éviter de placer le réfrigérateur ou le congélateur près d’un four, d’une cuisinière ou de l’éclairage direct d’une fenêtre. Ces derniers réchauffent les appareils de froid qui vont donc consommer davantage pour rester à la bonne température. S’il n’est pas possible de faire autrement, prévoyez alors une plaque isolante entre les appareils électroménagers. De même, ne chauffez pas trop la cuisine : installé dans une pièce à 23 °C, le réfrigérateur consomme 38 % de plus que dans une pièce à 18 °C ! Par ailleurs, si vous placez votre congélateur dans un local non chauffé (garage, cave, etc.), celui-ci ne doit pas être trop frais au risque de voir votre appareil surchauffer à l’intérieur. Enfin, essayez de positionner votre réfrigérateur à 10cm du mur et laissez 10cm d'espace libre au-dessus. Cet agencement évite à votre appareil la surchauffe, mais aussi de surconsommer de l'électricité.",
"impactLevel": 2,
"efficiency": 1,
"difficulty": 3,
@@ -1769,5 +1769,212 @@
"doing": false,
"objective": false,
"viewedInSelection": false
+ },
+ {
+ "_id": "ECOGESTURE0078",
+ "usage": 6,
+ "fluidTypes": [0,2],
+ "shortName": "Du tout cuit",
+ "longName": "J'éteins mon four avant la fin de la cuisson.",
+ "longDescription": "Lorsque votre plat arrive en fin de cuisson, éteignez le four. Il continuera de cuire grâce à la chaleur gardée par le four. Vous pouvez économiser jusqu'à 10 % d'électricité en prenant cette habitude !",
+ "impactLevel": 1,
+ "efficiency": 2,
+ "difficulty": 1,
+ "room": [2],
+ "season": "Sans saison",
+ "equipment": false,
+ "equipmentType": [],
+ "equipmentInstallation": false,
+ "investment": null,
+ "action": true,
+ "actionName": "J'éteins le four quand mon plat est presque cuit.",
+ "actionDuration": 3,
+ "doing": false,
+ "objective": false,
+ "viewedInSelection": false
+ },
+ {
+ "_id": "ECOGESTURE0079",
+ "usage": 5,
+ "fluidTypes": [0],
+ "shortName": "Au creux de la vague",
+ "longName": "Je programme mes cycles de lavage en heures creuses.",
+ "longDescription": "Certains fournisseurs proposent des contrats « heures pleines / heures creuses », soit une double tarification qui s’applique à la facture. L'objectif est de programmer l’utilisation de certains appareils énergivores, comme la machine à laver ou le lave-vaisselle, sur des heures qui affichent une plus faible demande en électricité au niveau local ou national (généralement entre 22h et 6h). Pour vous aider à cibler ces créneaux, n'hésitez pas à programmer vos cycles pour que ceux-ci se déclenchent automatiquement à l'heure choisie.",
+ "impactLevel": 2,
+ "efficiency": 1,
+ "difficulty": 1,
+ "room": [2,3],
+ "season": "Sans saison",
+ "equipment": false,
+ "equipmentType": [],
+ "equipmentInstallation": false,
+ "investment": null,
+ "action": true,
+ "actionName": "Je me base sur les heures creuses pour laver le linge et la vaisselle.",
+ "actionDuration": 3,
+ "doing": false,
+ "objective": false,
+ "viewedInSelection": false
+ },
+ {
+ "_id": "ECOGESTURE0080",
+ "usage": 4,
+ "fluidTypes": [1],
+ "shortName": "Danse de la pluie",
+ "longName": "J’arrose mes plantes et mon jardin tôt le matin ou tard le soir.",
+ "longDescription": "Arroser son jardin en pleine chaleur est déconseillé. D'une part, pour prévenir d'un choc thermique qui brûlerait les plantes. D'autre part, pour réduire les pertes dues à l'évaporation de l'eau (de 5% à 10%). Pour favoriser l'absorption du sol, privilégiez donc un arrosage tôt le matin ou tard le soir. Pour ce faire, vous pouvez utiliser notamment l'eau de pluie récoltée et l'eau de chauffe !",
+ "impactLevel": 5,
+ "efficiency": 3,
+ "difficulty": 2,
+ "room": [0],
+ "season": "Eté",
+ "equipment": false,
+ "equipmentType": [],
+ "equipmentInstallation": false,
+ "investment": null,
+ "action": false,
+ "actionName": null,
+ "actionDuration": 3,
+ "doing": false,
+ "objective": false,
+ "viewedInSelection": false
+ },
+ {
+ "_id": "ECOGESTURE0081",
+ "usage": 3,
+ "fluidTypes": [0, 1, 2],
+ "shortName": "Vaisselle Express",
+ "longName": "Je lave les ustensiles de cuisine tout de suite après utilisation.",
+ "longDescription": "Après avoir préparé à manger, on a tendance à remettre la vaisselle à plus tard. En faisant ça, on augmente les risques pour les résidus alimentaires d'accrocher à l'ustensile utilisé et donc d'utiliser davantage d'eau pour le nettoyer. Prenez donc un moment pour nettoyer votre casserole à l'eau chaude. Elle pourra même servir de bac pour laver le reste de votre vaisselle !",
+ "impactLevel": 3,
+ "efficiency": 2,
+ "difficulty": 2,
+ "room": [2],
+ "season": "Sans saison",
+ "equipment": false,
+ "equipmentType": [],
+ "equipmentInstallation": false,
+ "investment": null,
+ "action": true,
+ "actionName": "Je m'occupe de ma vaisselle après avoir cuisiné.",
+ "actionDuration": 3,
+ "doing": false,
+ "objective": false,
+ "viewedInSelection": false
+ },
+ {
+ "_id": "ECOGESTURE0082",
+ "usage": 4,
+ "fluidTypes": [1],
+ "shortName": "En terrain connu",
+ "longName": "J’ajoute de la matière organique pour limiter l'arrosage.",
+ "longDescription": "Si vous avez du compost, celui-ci pourrait bien vous servir dans votre jardin ! En effet, l’humus apporté par le compost joue le rôle d'éponge, augmentant ainsi les capacités de rétention du sol en eau. Ce rôle permet donc de diminuer la fréquence des arrosages.",
+ "impactLevel": 4,
+ "efficiency": 1,
+ "difficulty": 2,
+ "room": [0],
+ "season": "Sans saison",
+ "equipment": false,
+ "equipmentType": [],
+ "equipmentInstallation": false,
+ "investment": null,
+ "action": false,
+ "actionName": null,
+ "actionDuration": 3,
+ "doing": false,
+ "objective": false,
+ "viewedInSelection": false
+ },
+ {
+ "_id": "ECOGESTURE0083",
+ "usage": 4,
+ "fluidTypes": [1],
+ "shortName": "Eausmose",
+ "longName": "Je réutilise mon eau de cuisson.",
+ "longDescription": "Le premier réflexe après avoir fait cuire des aliments dans de l'eau, c'est de jeter cette dernière. Pourtant, elle peut resservir à bien des usages : \n- Riche en amidon, l’eau de cuisson du riz renforce la fibre capillaire et fait briller les cheveux. \n- Véritable liant pour les sauces, l'eau de cuisson des pâtes encore bouillante est également un désincrustant et détachant très efficace. \n- L'eau des pommes de terre est idéale pour faire briller l’argenterie, récurer le carrelage et même servir de désherbant. \n- Grâce aux nombreux nutriments provenant des coquilles, l’eau de cuisson des œufs est un très bon engrais organique pour la terre. \n- L’eau de cuisson des légumes fera d'excellents bouillons de légumes.",
+ "impactLevel": 3,
+ "efficiency": 2,
+ "difficulty": 2,
+ "room": [2],
+ "season": "Sans saison",
+ "equipment": false,
+ "equipmentType": [],
+ "equipmentInstallation": false,
+ "investment": null,
+ "action": true,
+ "actionName": "Je récupère dans un récipient l'eau de cuisson pour la réutiliser",
+ "actionDuration": 3,
+ "doing": false,
+ "objective": false,
+ "viewedInSelection": false
+ },
+ {
+ "_id": "ECOGESTURE0084",
+ "usage": 1,
+ "fluidTypes": [0,2],
+ "shortName": "Défense d'entrer",
+ "longName": " J’isole les coffrets des volets roulants.",
+ "longDescription": "Un coffre de volets roulants mal isolé engendre la formation de ponts thermiques, pouvant donc laisser l'air froid s’infiltrer. Pour empêcher cela, mieux vaut les isoler avec de la laine de roche ou de la mousse multicouche, par exemple.",
+ "impactLevel": 7,
+ "efficiency": 2,
+ "difficulty": 3,
+ "room": [0],
+ "season": "Hiver",
+ "equipment": false,
+ "equipmentType": [],
+ "equipmentInstallation": true,
+ "investment": "Isolant",
+ "action": false,
+ "actionName": null,
+ "actionDuration": 3,
+ "doing": false,
+ "objective": false,
+ "viewedInSelection": false
+ },
+ {
+ "_id": "ECOGESTURE0085",
+ "usage": 4,
+ "fluidTypes": [0,2],
+ "shortName": "Ballon au Chaud",
+ "longName": "J'isole mon ballon d'eau chaude.",
+ "longDescription": "Pour éviter un maximum les pertes de chaleur, vous pouvez vous munir d'un matériau isolant, comme la laine de roche ou la mousse de polyuréthane. Il vous suffira d'entourer votre ballon d'eau chaude avec celui-ci.",
+ "impactLevel": 6,
+ "efficiency": 3,
+ "difficulty": 3,
+ "room": [2,3],
+ "season": "Sans saison",
+ "equipment": true,
+ "equipmentType": ["BOILER"],
+ "equipmentInstallation": true,
+ "investment": "Isolant",
+ "action": false,
+ "actionName": null,
+ "actionDuration": 3,
+ "doing": false,
+ "objective": false,
+ "viewedInSelection": false
+ },
+ {
+ "_id": "ECOGESTURE0086",
+ "usage": 4,
+ "fluidTypes": [1],
+ "shortName": "Eau secours",
+ "longName": "J'installe un pluviomètre pour ajuster l'arrosage.",
+ "longDescription": "En installant un pluviomètre, vous allez pouvoir mesurer la quantité d’eau de pluie tombée dans votre jardin et ainsi ajuster les arrosages. De quoi faire des économies d'eau et éviter les excès d’arrosage !",
+ "impactLevel": 6,
+ "efficiency": 3,
+ "difficulty": 3,
+ "room": [0],
+ "season": "Eté",
+ "equipment": false,
+ "equipmentType": [],
+ "equipmentInstallation": true,
+ "investment": "Pluviomètre",
+ "action": false,
+ "actionName": null,
+ "actionDuration": 3,
+ "doing": false,
+ "objective": false,
+ "viewedInSelection": false
}
]
diff --git a/src/locales/fr.json b/src/locales/fr.json
index 409eb54ad34be172d8f161de7ac2163033b3f404..fd5c627babc9088e355f1b224b7088bb951fb0b0 100644
--- a/src/locales/fr.json
+++ b/src/locales/fr.json
@@ -340,7 +340,7 @@
"last_valid_data": "Dernières données valides : %{date}",
"last_available_data": "Dernières données disponibles : %{date}",
"last_valid_data_multi": "Dernières données complètes : %{date}",
- "data_to_come": "à venir",
+ "data_to_come": "À venir",
"aie": "Aïe !",
"data_empty": "Vide",
"estimated": "estimés",
@@ -565,7 +565,8 @@
"ventilation": "VMC",
"freezer": "Congélateur",
"boiler": "Chaudière",
- "hydraulic_heating": "Chauffage hydraulique"
+ "hydraulic_heating": "Chauffage hydraulique",
+ "accessible_label": "Sélection d'équipement"
}
},
"ecogesture_selection": {
@@ -655,8 +656,11 @@
"part10": "ou en ligne, au moyen du formulaire disponible à l'adresse suivante\u00a0: ",
"link1": "<a href=\"https://demarches.toodego.com/sve/proteger-mes-donnees-personnelles/\">https://demarches.toodego.com/sve/proteger-mes-donnees-personnelles/</a>",
"validDataConsent": "Je consens au traitement de mes données tel que décrit ci-dessus.",
- "validCGU": "Je valide les <span class=\"action\">Conditions Générales d’Utilisation</span> ",
- "validLegal": " du service et ai pris connaissance des <span class=\"action\">Mentions Légales</span> de celui-ci.",
+ "validCGU": "Je valide les ",
+ "validCGU_button": "Conditions Générales d’Utilisation",
+ "validLegal": " du service et ai pris connaissance des ",
+ "validLegal_button": "Mentions Légales",
+ "validLegal2": "de celui-ci.",
"button_accept": "C'est parti !",
"accessibility": {
"button_accept": "Accepter les conditions générales d'utilisation"
@@ -872,7 +876,7 @@
"p1b": "Directrice de publication : ",
"p1": "Blandine MELAY, Responsable du Service Transition Énergétique",
"p2b": "Animation éditoriale, gestion et mise à jour : ",
- "p2": "Marion BERTHOLON, Chargée de services numériques pour la transition énergétique",
+ "p2": "Marion BERTHOLON, Chargée de services numériques pour la transition énergétique",
"p3b": "Photographies : ",
"p3": "sauf mention contraire, les photos sont la propriété de la Métropole de Lyon",
"p4b": "Conception et Charte graphique : ",
@@ -882,7 +886,7 @@
"p6b": "Maintenance technique : ",
"p6": "Délégation Développement économique, emploi & savoirs - Innovation numérique & systèmes d’information - Usages et services numériques - Développement des services numériques",
"title1": "Crédits",
- "part1": "Ce site est le résultat de développements spécifiques réalisés dans les langages Go, TypeScript, HTML et Sass. Les développements s’appuient sur plusieurs bibliothèques et frameworks libres : axios, cozy-bar, cozy-client, cozy-harvest-lib, cozy-scripts, cozy-ui, d3, detect-browser, global, lodash, luxon, moment, moment-timezone, node-sass, object-hash, react, react-dom, react-redux, react-router-dom, react-swipeable-views, redux-devtools-extension, sass-loader. Les tests de l’application s’appuient sur les bibliothèques et frameworks libres suivants: enzyme, enzyme-adapter-react-16, jest-junit, react-test-renderer, redux-mock-store. La pile technique intègre également les applications Cozy stack, Yarn, Docker, ACH. Les déploiements sont réalisés sur le registre hébergé chez Cozy. L’équipe de réalisation utilise au quotidien les applications GitLab, IceScrum, RocketChat, SonarQube.",
+ "part1": "Ce site est le résultat de développements spécifiques réalisés dans les langages Go, TypeScript, HTML et Sass. Les développements s’appuient sur plusieurs bibliothèques et frameworks libres : axios, cozy-bar, cozy-client, cozy-harvest-lib, cozy-scripts, cozy-ui, d3, detect-browser, global, lodash, luxon, moment, moment-timezone, node-sass, object-hash, react, react-dom, react-redux, react-router-dom, react-swipeable-views, redux-devtools-extension, sass-loader. Les tests de l’application s’appuient sur les bibliothèques et frameworks libres suivants: jest-junit, react-test-renderer, redux-mock-store. La pile technique intègre également les applications Cozy stack, Yarn, Docker, ACH. Les déploiements sont réalisés sur le registre hébergé chez Cozy. L’équipe de réalisation utilise au quotidien les applications GitLab, IceScrum, RocketChat, SonarQube.",
"title2": "Traitement des données personnelles et droit d’accès, de modification et de suppression",
"part2": "Conformément à la réglementation en vigueur en matière de protection des données personnelles, le service Ecolyo a fait l’objet d’une inscription au registre des traitements de la Métropole de Lyon. Ecolyo fait partie de l’écosystème de services orientés « self data » déployés par la Métropole de Lyon avec l’ambition d’offrir aux usagers métropolitains les outils et les services leur permettant d’exercer directement leur droit à la portabilité, dans un cadre apte à garantir aussi bien la transparence et le contrôle sur l’usage de leurs données personnelles que l’exploitation directe du contenu de ces données selon leurs libres choix. Le self data est en effet selon la Fondation Internet Nouvelle Génération (FING) « la production, l’exploitation et le partage de données personnelles par les individus, sous leur contrôle et à leurs propres fins ». Au sein de cet environnement self data, la gestion des données s’appuie sur l’organisation suivante des rôles et responsabilités associées : ",
"part2-1": "Les partenaires du service GRDF et Eau Publique du Grand Lyon sont responsables exclusivement des seuls traitements de Données Personnelles relatifs à la collecte des données de consommation de gaz et d’eau de l’utilisateur et à leur transmission sur la plateforme de cloud personnel, après consentement de l’utilisateur.",
diff --git a/src/models/fluidPrice.model.ts b/src/models/fluidPrice.model.ts
index c38feff398246475c8653a8d69bdbb69d41cd4b7..68d251432d26c058cd3528c6c04116429a89a885 100644
--- a/src/models/fluidPrice.model.ts
+++ b/src/models/fluidPrice.model.ts
@@ -5,7 +5,7 @@ export interface FluidPrice {
price: number
startDate: string
endDate: string
- UpdatedAt?: string
+ UpdatedAt: string
_id: string
_rev?: string
_type?: string
diff --git a/src/notifications/base/footer.hbs b/src/notifications/base/footer.hbs
index 878b0df70ff20a21b47e62b8cb371ddc4d16b8af..537ef924a60e6b32cec7e5e57c1c07645631f480 100644
--- a/src/notifications/base/footer.hbs
+++ b/src/notifications/base/footer.hbs
@@ -22,7 +22,15 @@
</mj-column>
<mj-column vertical-align='middle'>
- <mj-image src='{{baseUrl}}/assets/logo-tiga-white.png' alt='logo-tiga'>
+ <mj-image src='{{baseUrl}}/assets/logo-2030.png' alt='logo-tiga'>
+ </mj-image>
+ </mj-column>
+
+ <mj-column vertical-align='middle'>
+ <mj-image
+ src='{{baseUrl}}/assets/logo-eu-funded.png'
+ alt='logo-EU-funded'
+ >
</mj-image>
</mj-column>
diff --git a/src/services/account.service.spec.ts b/src/services/account.service.spec.ts
index cb6e07b6b3524bd75fef20a8fccec046a716de1f..6dad879e0bd469b416ac9a20516eaf3016ec7406 100644
--- a/src/services/account.service.spec.ts
+++ b/src/services/account.service.spec.ts
@@ -10,9 +10,7 @@ import { triggersEnedisData } from 'tests/__mocks__/triggersData.mock'
import AccountService from './account.service'
jest.mock('cozy-harvest-lib/dist/connections/accounts')
-const mockHavestLibAccounts = harvestLibAccounts as jest.Mocked<
- typeof harvestLibAccounts
->
+const mockHavestLibAccounts = harvestLibAccounts
const mockGetTriggerForAccount = jest.fn()
jest.mock('./triggers.service', () => {
diff --git a/src/services/action.service.ts b/src/services/action.service.ts
index cede08d02afbcb07b1c6254268389ffdc3e2e298..cf27a1fa83e416d012f2a13b6184551d973c78dd 100644
--- a/src/services/action.service.ts
+++ b/src/services/action.service.ts
@@ -58,9 +58,8 @@ export default class ActionService {
*/
public async getDefaultActions(): Promise<Ecogesture[]> {
const actionIds = ['ECOGESTURE0030', 'ECOGESTURE0014', 'ECOGESTURE0010']
- const defaultActions = await this._ecogestureService.getEcogesturesByIds(
- actionIds
- )
+ const defaultActions =
+ await this._ecogestureService.getEcogesturesByIds(actionIds)
return defaultActions
}
diff --git a/src/services/challenge.service.spec.ts b/src/services/challenge.service.spec.ts
index 2f0c2bb070680dba3d22da91e25c02480094f487..146d9121abe367e994c7e466661b2d5221eddd7b 100644
--- a/src/services/challenge.service.spec.ts
+++ b/src/services/challenge.service.spec.ts
@@ -174,9 +174,8 @@ describe('Challenge service', () => {
mockGetUserExplorationFromExplorationEntities.mockReturnValue(
userExploration
)
- const result = await challengeService.buildUserChallengeList(
- fluidStatusData
- )
+ const result =
+ await challengeService.buildUserChallengeList(fluidStatusData)
expect(result).toEqual(userChallengeData)
})
it('should return all user challenge plus create one missing', async () => {
@@ -191,9 +190,8 @@ describe('Challenge service', () => {
mockClient.query.mockResolvedValueOnce(mockQueryResultQuiz)
mockClient.query.mockResolvedValueOnce(mockQueryResultExploration)
mockClient.query.mockResolvedValueOnce(mockQueryResultUser)
- const result = await challengeService.buildUserChallengeList(
- fluidStatusData
- )
+ const result =
+ await challengeService.buildUserChallengeList(fluidStatusData)
expect(result).toEqual(userChallengeData)
})
it('should create all user challenge', async () => {
@@ -214,9 +212,8 @@ describe('Challenge service', () => {
mockGetUserExplorationFromExplorationEntities.mockReturnValue(
explorationDefault
)
- const result = await challengeService.buildUserChallengeList(
- fluidStatusData
- )
+ const result =
+ await challengeService.buildUserChallengeList(fluidStatusData)
expect(result).toEqual(userChallengeDefault)
})
})
@@ -396,9 +393,8 @@ describe('Challenge service', () => {
},
}
mockGetGraphData.mockResolvedValueOnce(graphData)
- const result = await challengeService.getUserChallengeDataload(
- updatedUserChallenge
- )
+ const result =
+ await challengeService.getUserChallengeDataload(updatedUserChallenge)
expect(result).toEqual(graphData.actualData)
})
it('should return a empty dataload list when duel has no start date', async () => {
diff --git a/src/services/challenge.service.ts b/src/services/challenge.service.ts
index 8cfaeffcdce83867d563b3ad94a7645eb6c75597..516c73913b2e54bea6e268f8df0a5c7f5678c349 100644
--- a/src/services/challenge.service.ts
+++ b/src/services/challenge.service.ts
@@ -330,9 +330,8 @@ export default class ChallengeService {
const {
data: challengeEntityList,
included: duelEntities,
- }: QueryResult<ChallengeEntity[], DuelEntity[]> = await this._client.query(
- queryChallengeEntity
- )
+ }: QueryResult<ChallengeEntity[], DuelEntity[]> =
+ await this._client.query(queryChallengeEntity)
const {
included: explorationEntities,
}: QueryResult<ChallengeEntity[], ExplorationEntity[]> =
diff --git a/src/services/connection.service.ts b/src/services/connection.service.ts
index 500955376ca4980422bbbf4248071349f5ddefbe..b37854fb64c6cf4434eb0f84d4ae253f4ae1e863 100644
--- a/src/services/connection.service.ts
+++ b/src/services/connection.service.ts
@@ -30,9 +30,8 @@ export default class ConnectionService {
): Promise<{ account: Account; trigger: Trigger }> {
// Retrieve konnector
const konnectorService = new KonnectorService(this._client)
- const konnector: Konnector | null = await konnectorService.getKonnector(
- konnectorId
- )
+ const konnector: Konnector | null =
+ await konnectorService.getKonnector(konnectorId)
if (!konnector?.slug) {
const errorMessage = `Could not find konnector for ${konnectorId}`
logStack('error', errorMessage)
diff --git a/src/services/consumption.service.spec.ts b/src/services/consumption.service.spec.ts
index ba675a859c898aac29c919567cb254f70d7509d1..ca2d8e95b09bbf47ca5c6ba09717109840ad0865 100644
--- a/src/services/consumption.service.spec.ts
+++ b/src/services/consumption.service.spec.ts
@@ -18,6 +18,7 @@ import {
import { fluidPrices } from 'tests/__mocks__/fluidPrice.mock'
import { fluidStatusConnectedData } from 'tests/__mocks__/fluidStatusData.mock'
import { loadDayData } from 'tests/__mocks__/loadDayData.mock'
+import { allFluids } from 'utils/utils'
import ConsumptionDataManager from './consumption.service'
const mockFetchFluidData = jest.fn()
@@ -145,13 +146,8 @@ describe('Consumption service', () => {
})
it('should return a mapped data for multiple fluid', async () => {
- const fluidTypes: FluidType[] = [
- FluidType.ELECTRICITY,
- FluidType.WATER,
- FluidType.GAS,
- ]
-
- for (let i = 0; i < fluidTypes.length; i++) {
+ // eslint-disable-next-line @typescript-eslint/no-unused-vars
+ for (const _fluid of allFluids) {
mockFetchFluidData.mockResolvedValueOnce(mockFetchDataActual)
mockFetchFluidData.mockResolvedValueOnce(mockFetchDataComparison)
}
@@ -217,7 +213,7 @@ describe('Consumption service', () => {
const result = await consumptionDataManager.getGraphData(
mockTimePeriod,
TimeStep.DAY,
- fluidTypes,
+ allFluids,
fluidStatus,
mockTimePeriodComparison,
true
@@ -225,11 +221,6 @@ describe('Consumption service', () => {
expect(result).toEqual(mockResult)
})
it('should return a mapped data for multi fluid without comparison date', async () => {
- const fluidTypes: FluidType[] = [
- FluidType.ELECTRICITY,
- FluidType.WATER,
- FluidType.GAS,
- ]
const mockResult: Datachart = {
actualData: [
{
@@ -265,7 +256,7 @@ describe('Consumption service', () => {
const result = await consumptionDataManager.getGraphData(
mockTimePeriod,
TimeStep.DAY,
- fluidTypes,
+ allFluids,
fluidStatus
)
expect(result).toEqual(mockResult)
@@ -302,13 +293,8 @@ describe('Consumption service', () => {
describe('getMaxLoad method', () => {
it('should return the maxed value for a time period for the home', async () => {
- const fluidTypes: FluidType[] = [
- FluidType.ELECTRICITY,
- FluidType.WATER,
- FluidType.GAS,
- ]
-
- for (let i = 0; i < fluidTypes.length; i++) {
+ // eslint-disable-next-line @typescript-eslint/no-unused-vars
+ for (const _fluid of allFluids) {
mockFetchFluidData.mockResolvedValueOnce(mockFetchDataActual)
mockFetchFluidData.mockResolvedValueOnce(mockFetchDataComparison)
}
@@ -316,7 +302,7 @@ describe('Consumption service', () => {
const result = await consumptionDataManager.getMaxLoad(
mockTimePeriod,
TimeStep.DAY,
- fluidTypes,
+ allFluids,
mockTimePeriodComparison,
true
)
@@ -339,11 +325,6 @@ describe('Consumption service', () => {
describe('getPerformanceIndicators method', () => {
it('should return the performance indicator', async () => {
- const fluidTypes: FluidType[] = [
- FluidType.ELECTRICITY,
- FluidType.WATER,
- FluidType.GAS,
- ]
mockFetchFluidData.mockResolvedValueOnce(mockFetchDataActual)
mockFetchFluidData.mockResolvedValueOnce(mockFetchDataComparison)
mockFetchFluidData.mockResolvedValueOnce(mockFetchDataActual)
@@ -393,7 +374,7 @@ describe('Consumption service', () => {
const result = await consumptionDataManager.getPerformanceIndicators(
mockTimePeriodComplete,
TimeStep.DAY,
- fluidTypes,
+ allFluids,
mockTimePeriodComparisonComplete
)
expect(result).toEqual(expectedResult)
@@ -402,16 +383,11 @@ describe('Consumption service', () => {
describe('getFluidsWithData method', () => {
it('should return the array of fluidTypes that have entries', async () => {
- const fluidTypes: FluidType[] = [
- FluidType.ELECTRICITY,
- FluidType.WATER,
- FluidType.GAS,
- ]
mockGetEntries.mockResolvedValueOnce({ data: [1] })
mockGetEntries.mockResolvedValueOnce({ data: [] })
mockGetEntries.mockResolvedValueOnce({ data: [1] })
const result = await consumptionDataManager.getFluidsWithData(
- fluidTypes,
+ allFluids,
TimeStep.MONTH
)
expect(result).toStrictEqual([FluidType.ELECTRICITY, FluidType.GAS])
@@ -425,17 +401,11 @@ describe('Consumption service', () => {
mockGetFirstDateData.mockResolvedValueOnce(
DateTime.fromISO('2020-09-03T23:59:59.999Z')
)
- const result = await consumptionDataManager.fetchAllFirstDateData(
- fluidTypes
- )
+ const result =
+ await consumptionDataManager.fetchAllFirstDateData(fluidTypes)
expect(result).toEqual(expectedResult)
})
it('should return the latest date data of All fluid', async () => {
- const fluidTypes: FluidType[] = [
- FluidType.ELECTRICITY,
- FluidType.WATER,
- FluidType.GAS,
- ]
mockGetFirstDateData.mockResolvedValueOnce(
DateTime.fromISO('2020-09-02T23:59:59.999Z')
)
@@ -450,9 +420,8 @@ describe('Consumption service', () => {
DateTime.fromISO('2020-09-03T23:59:59.999Z'),
DateTime.fromISO('2020-09-01T23:59:59.999Z'),
]
- const result = await consumptionDataManager.fetchAllFirstDateData(
- fluidTypes
- )
+ const result =
+ await consumptionDataManager.fetchAllFirstDateData(allFluids)
expect(result).toEqual(expectedResult)
})
})
@@ -464,17 +433,11 @@ describe('Consumption service', () => {
mockGetLastDateData.mockResolvedValueOnce(
DateTime.fromISO('2020-09-03T23:59:59.999Z')
)
- const result = await consumptionDataManager.fetchAllLastDateData(
- fluidTypes
- )
+ const result =
+ await consumptionDataManager.fetchAllLastDateData(fluidTypes)
expect(result).toEqual(expectedResult)
})
it('should return the latest date data of All fluid', async () => {
- const fluidTypes: FluidType[] = [
- FluidType.ELECTRICITY,
- FluidType.WATER,
- FluidType.GAS,
- ]
mockGetLastDateData.mockResolvedValueOnce(
DateTime.fromISO('2020-09-02T23:59:59.999Z')
)
@@ -489,9 +452,8 @@ describe('Consumption service', () => {
DateTime.fromISO('2020-09-03T23:59:59.999Z'),
DateTime.fromISO('2020-09-01T23:59:59.999Z'),
]
- const result = await consumptionDataManager.fetchAllLastDateData(
- fluidTypes
- )
+ const result =
+ await consumptionDataManager.fetchAllLastDateData(allFluids)
expect(result).toEqual(expectedResult)
})
})
diff --git a/src/services/customPopup.service.spec.ts b/src/services/customPopup.service.spec.ts
index 11d1d9cc798e0e93b399a36b6a5e7d5a811d7a80..4bb35e136fe92686622e87c30d79006f11407259 100644
--- a/src/services/customPopup.service.spec.ts
+++ b/src/services/customPopup.service.spec.ts
@@ -1,5 +1,8 @@
import mockClient from 'tests/__mocks__/client.mock'
-import { mockCustomPopup } from 'tests/__mocks__/customPopup.mock'
+import {
+ mockCustomPopup,
+ mockCustomPopupWithLink,
+} from 'tests/__mocks__/customPopup.mock'
import CustomPopupService from './customPopup.service'
jest.mock('services/environment.service', () => {
@@ -17,6 +20,18 @@ describe('PartnersInfo service', () => {
expect(result).toBe(mockCustomPopup)
})
+ it('should return customPopup data with replaced link', async () => {
+ mockClient
+ .getStackClient()
+ .fetchJSON.mockResolvedValueOnce(mockCustomPopupWithLink)
+ const result = await customPopupService.getCustomPopup()
+ expect(result).toStrictEqual({
+ ...mockCustomPopupWithLink,
+ description:
+ '<p>Allez voir la page <a href="./#/ecogestures" target="_self">astuces</a> !!</p>',
+ })
+ })
+
it('should return an error', async () => {
mockClient.getStackClient().fetchJSON.mockRejectedValue(new Error())
let res
diff --git a/src/services/customPopup.service.ts b/src/services/customPopup.service.ts
index f09472520760a6cca1f6cb286c051605016c0d05..89f0f787dd669b7229634936dec267916dc5e1e0 100644
--- a/src/services/customPopup.service.ts
+++ b/src/services/customPopup.service.ts
@@ -29,10 +29,12 @@ export default class CustomPopupService {
: REMOTE_ORG_ECOLYO_AGENT_CUSTOM_POPUP_REC
try {
logApp.info('[Initialization] Getting CustomPopup')
- const result = await this._client
+ const result: CustomPopup = await this._client
.getStackClient()
.fetchJSON('GET', remoteUrl)
- return result as CustomPopup
+
+ result.description = result.description.replace(/{cozyUrl}/g, './#/')
+ return result
} catch (error) {
const errorMessage = `getCustomPopup: Failed to get custom popup:${JSON.stringify(
error
diff --git a/src/services/ecogesture.service.spec.ts b/src/services/ecogesture.service.spec.ts
index a249083d9be48b35dcfc48ea6bae4b039a80249a..29518141e36a29ab38afeb3a6ed685cbefc5e3bd 100644
--- a/src/services/ecogesture.service.spec.ts
+++ b/src/services/ecogesture.service.spec.ts
@@ -285,7 +285,7 @@ describe('Ecogesture service', () => {
jest
.spyOn(ecogestureService, 'getAllEcogestures')
.mockResolvedValueOnce(ecoData)
- .mockResolvedValueOnce(mockedEcogesturesData as Ecogesture[])
+ .mockResolvedValueOnce(mockedEcogesturesData)
jest
.spyOn(ecogestureService, 'deleteAllEcogestures')
.mockResolvedValue(true)
diff --git a/src/services/enedisMonthlyAnalysisData.service.ts b/src/services/enedisMonthlyAnalysisData.service.ts
index a46ff453c9abb88f3f1b82dfac789e3d258ee991..dcbcb3a2bc2a19b96cc38fd3cf44cad6ead1d09f 100644
--- a/src/services/enedisMonthlyAnalysisData.service.ts
+++ b/src/services/enedisMonthlyAnalysisData.service.ts
@@ -31,9 +31,8 @@ export default class EnedisMonthlyAnalysisDataService {
const query: QueryDefinition = Q(ENEDIS_MONTHLY_ANALYSIS_DATA_DOCTYPE)
const {
data: enedisMonthlyAnalysisData,
- }: QueryResult<EnedisMonthlyAnalysisData[]> = await this._client.query(
- query
- )
+ }: QueryResult<EnedisMonthlyAnalysisData[]> =
+ await this._client.query(query)
return enedisMonthlyAnalysisData
}
diff --git a/src/services/exploration.service.spec.ts b/src/services/exploration.service.spec.ts
index ebd9e8870624f574f962052d5f04bc10eda6aeea..cb9ed9de840f7052200cf950decdbb4614b4a420 100644
--- a/src/services/exploration.service.spec.ts
+++ b/src/services/exploration.service.spec.ts
@@ -43,9 +43,8 @@ describe('Exploration service', () => {
}
const explorationId = 'EXPLORATION001'
mockClient.query.mockResolvedValueOnce(mockQueryResult)
- const result = await explorationService.getExplorationEntityById(
- explorationId
- )
+ const result =
+ await explorationService.getExplorationEntityById(explorationId)
expect(result).toEqual(explorationEntity)
})
})
diff --git a/src/services/fluid.service.spec.ts b/src/services/fluid.service.spec.ts
index fd3878c55a1cc99c81652e2c3bead30182c10de4..a21c59d1b82087d3d46a3a7c6cf55d8080cb5eed 100644
--- a/src/services/fluid.service.spec.ts
+++ b/src/services/fluid.service.spec.ts
@@ -560,9 +560,7 @@ describe('Fluid service', () => {
},
},
]
- const result: FluidType[] = await FluidService.getOldFluidData(
- mockFluidStatus
- )
+ const result = await FluidService.getOldFluidData(mockFluidStatus)
expect(result).toEqual([FluidType.ELECTRICITY])
})
@@ -595,9 +593,7 @@ describe('Fluid service', () => {
},
},
]
- const result: FluidType[] = await FluidService.getOldFluidData(
- mockFluidStatus
- )
+ const result = await FluidService.getOldFluidData(mockFluidStatus)
expect(result).toEqual([])
})
@@ -630,9 +626,8 @@ describe('Fluid service', () => {
},
},
]
- const result: FluidType[] = await FluidService.getOldFluidData(
- mockFluidStatus
- )
+ const result: FluidType[] =
+ await FluidService.getOldFluidData(mockFluidStatus)
expect(result).toEqual([])
})
@@ -665,9 +660,8 @@ describe('Fluid service', () => {
},
},
]
- const result: FluidType[] = await FluidService.getOldFluidData(
- mockFluidStatus
- )
+ const result: FluidType[] =
+ await FluidService.getOldFluidData(mockFluidStatus)
expect(result).toEqual([])
})
diff --git a/src/services/fluid.service.ts b/src/services/fluid.service.ts
index a25af857cd7ba141a30710ad61771d68587551f3..b8a31df14e9814b17769180832839cb597619955 100644
--- a/src/services/fluid.service.ts
+++ b/src/services/fluid.service.ts
@@ -1,6 +1,5 @@
import { Client } from 'cozy-client'
import { FluidState, FluidType } from 'enums'
-import { DateTime } from 'luxon'
import {
Account,
FluidStatus,
@@ -14,6 +13,7 @@ import ConsumptionService from 'services/consumption.service'
import ConfigService from 'services/fluidConfig.service'
import KonnectorService from 'services/konnector.service'
import TriggerService from 'services/triggers.service'
+import { allFluids } from 'utils/utils'
export default class FluidService {
private _client: Client
@@ -106,18 +106,10 @@ export default class FluidService {
waterTrigger ? triggerService.fetchTriggerState(waterTrigger) : null,
gasTrigger ? triggerService.fetchTriggerState(gasTrigger) : null,
])
- const firstDataDates: (DateTime | null)[] =
- await consumptionService.fetchAllFirstDateData([
- FluidType.ELECTRICITY,
- FluidType.WATER,
- FluidType.GAS,
- ])
- const lastDataDates: (DateTime | null)[] =
- await consumptionService.fetchAllLastDateData([
- FluidType.ELECTRICITY,
- FluidType.WATER,
- FluidType.GAS,
- ])
+ const firstDataDates =
+ await consumptionService.fetchAllFirstDateData(allFluids)
+ const lastDataDates =
+ await consumptionService.fetchAllLastDateData(allFluids)
const result: FluidStatus[] = [
{
diff --git a/src/services/fluidConfig.service.spec.ts b/src/services/fluidConfig.service.spec.ts
index 3714918d14345cca09ee437166f4a1bc2c4fc96d..2c944757f466effa6e1cadf56151795137d38051 100644
--- a/src/services/fluidConfig.service.spec.ts
+++ b/src/services/fluidConfig.service.spec.ts
@@ -9,11 +9,20 @@ describe('ConfigService service', () => {
})
})
describe('getCronArgs', () => {
- it('should return the args of a cron', () => {
- const max = 5
- const min = 5
+ it('should return minimum cron', () => {
+ const min = 7
+ const max = 9
+ jest.spyOn(global.Math, 'random').mockReturnValue(0)
const result = configService.getCronArgs(min, max)
- expect(typeof result).toEqual('string')
+ expect(result).toEqual(`0 0 ${min} * * *`)
+ })
+ it('should return maximum cron', () => {
+ const min = 7
+ const max = 9
+ jest.spyOn(global.Math, 'random').mockReturnValue(0.9999)
+
+ const result = configService.getCronArgs(min, max)
+ expect(result).toEqual(`59 59 ${max} * * *`)
})
})
})
diff --git a/src/services/fluidConfig.service.ts b/src/services/fluidConfig.service.ts
index 5341c940e9b26c2afb339c9d881708635439283d..0778668369ac5bc8afbb5986a596c0dee3365707 100644
--- a/src/services/fluidConfig.service.ts
+++ b/src/services/fluidConfig.service.ts
@@ -7,13 +7,14 @@ export default class ConfigService {
}
/**
- *
+ * Generate a cron between min:00:00 and max:59:59
* @param min Minimum hour for cron
* @param max Maximum hour for cron
*/
- public getCronArgs(min = 8, max = 9): string {
+ public getCronArgs(min: number, max: number): string {
const randomHour = Math.floor(Math.random() * (max - min + 1) + min) // NOSONAR
- const randomMinutes = Math.floor(Math.random() * 59) // NOSONAR
- return `0 ${randomMinutes} ${randomHour} * * *`
+ const randomMinutes = Math.floor(Math.random() * 60) // NOSONAR
+ const randomSeconds = Math.floor(Math.random() * 60) // NOSONAR
+ return `${randomSeconds} ${randomMinutes} ${randomHour} * * *`
}
}
diff --git a/src/services/fluidsPrices.service.ts b/src/services/fluidsPrices.service.ts
index 6eb9945c490cec11c5684dab446a28d13c43d6ee..5a16cf3ae4ac94748ffb5130c05ba5a73f5a531f 100644
--- a/src/services/fluidsPrices.service.ts
+++ b/src/services/fluidsPrices.service.ts
@@ -78,6 +78,7 @@ export default class FluidPricesService {
price: config.coefficient,
startDate: config.startDate,
endDate: '',
+ UpdatedAt: '2000-01-01T00:00:00Z',
})
})
diff --git a/src/services/initialization.service.spec.ts b/src/services/initialization.service.spec.ts
index ca938be0ebeec56c08baff1e0f74c6f9516b4f7d..db73da151c8d89785cd6f1ce3b942864e3c76c6a 100644
--- a/src/services/initialization.service.spec.ts
+++ b/src/services/initialization.service.spec.ts
@@ -3,7 +3,6 @@ import challengeEntityData from 'db/challengeEntity.json'
import duelEntityData from 'db/duelEntity.json'
import explorationEntityData from 'db/explorationEntity.json'
import quizEntityData from 'db/quizEntity.json'
-import { FluidType } from 'enums'
import { DateTime } from 'luxon'
import { Profile, Trigger, UserChallenge } from 'models'
import { allChallengeEntityData } from 'tests/__mocks__/challengeEntity.mock'
@@ -21,6 +20,7 @@ import {
import { userChallengeData } from 'tests/__mocks__/userChallengeData.mock'
import { getActualAnalysisDate } from 'utils/date'
import { hashFile } from 'utils/hash'
+import { allFluids } from 'utils/utils'
import InitializationService from './initialization.service'
const mockCreateIndexKonnector = jest.fn()
@@ -651,16 +651,10 @@ describe('Initialization service', () => {
describe('initFluidType method', () => {
it('should return all fluid types', async () => {
- mockGetKonnectorAccountStatus.mockResolvedValueOnce([
- FluidType.ELECTRICITY,
- FluidType.WATER,
- FluidType.GAS,
- ])
- await expect(initializationService.initFluidTypes()).resolves.toEqual([
- FluidType.ELECTRICITY,
- FluidType.WATER,
- FluidType.GAS,
- ])
+ mockGetKonnectorAccountStatus.mockResolvedValueOnce(allFluids)
+ await expect(initializationService.initFluidTypes()).resolves.toEqual(
+ allFluids
+ )
})
it('should throw an error when null is retrieved as fluid types', async () => {
mockGetKonnectorAccountStatus.mockResolvedValueOnce(null)
diff --git a/src/services/initialization.service.ts b/src/services/initialization.service.ts
index 1383331b40a76f3cbf4e5750e51add7d7468c60a..b30bb683aa36206da0c133acd1404a47d2c643d6 100644
--- a/src/services/initialization.service.ts
+++ b/src/services/initialization.service.ts
@@ -523,10 +523,10 @@ export default class InitializationService {
const startTime = performance.now()
const kss = new KonnectorStatusService(this._client)
try {
- const fluidtypes = await kss.getKonnectorAccountStatus()
- if (fluidtypes) {
+ const fluidTypes = await kss.getKonnectorAccountStatus()
+ if (fluidTypes) {
logDuration('[Initialization] Fluid Types loaded', startTime)
- return fluidtypes
+ return fluidTypes
} else {
this._setInitStepError(InitStepsErrors.CONSOS_ERROR)
throw new Error('initFluidTypes: FluidTypes not found')
@@ -585,9 +585,8 @@ export default class InitializationService {
const startTime = performance.now()
const challengeService = new ChallengeService(this._client)
try {
- const userChallengeList = await challengeService.buildUserChallengeList(
- fluidStatus
- )
+ const userChallengeList =
+ await challengeService.buildUserChallengeList(fluidStatus)
if (userChallengeList) {
logDuration('[Initialization] initUserChallenges', startTime)
return userChallengeList
diff --git a/src/services/profileType.service.ts b/src/services/profileType.service.ts
index ee742cec125aa3e34247b92da4666f3d752fcd5c..4f75e33ae964e472df96119dd8d920dc84bc78cc 100644
--- a/src/services/profileType.service.ts
+++ b/src/services/profileType.service.ts
@@ -373,9 +373,8 @@ export default class ProfileTypeService {
warmingFluid !== null &&
(fluidType as number) === (warmingFluid as number)
) {
- detailsMonthlyForecast.heatingConsumption = await this.getMonthHeating(
- month
- )
+ detailsMonthlyForecast.heatingConsumption =
+ await this.getMonthHeating(month)
}
if (
hotWaterFluid !== null &&
diff --git a/src/services/queryRunner.service.ts b/src/services/queryRunner.service.ts
index 3fffee26dfc4292c518396f10702e59f9fa63443..30dcbdf0c1e0b0e01efeb83740ccb15bb897f0f0 100644
--- a/src/services/queryRunner.service.ts
+++ b/src/services/queryRunner.service.ts
@@ -255,73 +255,41 @@ export default class QueryRunner {
}
private getRelevantDoctype(fluidType: FluidType, timeStep: TimeStep) {
- let doctype = ''
- switch (fluidType) {
- case FluidType.ELECTRICITY:
- {
- switch (timeStep) {
- case TimeStep.HALF_AN_HOUR:
- doctype = ENEDIS_MINUTE_DOCTYPE
- break
- case TimeStep.WEEK:
- case TimeStep.DAY:
- doctype = ENEDIS_DAY_DOCTYPE
- break
- case TimeStep.MONTH:
- doctype = ENEDIS_MONTH_DOCTYPE
- break
- case TimeStep.YEAR:
- doctype = ENEDIS_YEAR_DOCTYPE
- break
- default:
- doctype = ENEDIS_DAY_DOCTYPE
- }
- }
- break
-
- case FluidType.WATER:
- {
- switch (timeStep) {
- case TimeStep.WEEK:
- case TimeStep.DAY:
- doctype = EGL_DAY_DOCTYPE
- break
- case TimeStep.MONTH:
- doctype = EGL_MONTH_DOCTYPE
- break
- case TimeStep.YEAR:
- doctype = EGL_YEAR_DOCTYPE
- break
- default:
- doctype = EGL_DAY_DOCTYPE
- }
- }
- break
-
- case FluidType.GAS:
- {
- switch (timeStep) {
- case TimeStep.WEEK:
- case TimeStep.DAY:
- doctype = GRDF_DAY_DOCTYPE
- break
- case TimeStep.MONTH:
- doctype = GRDF_MONTH_DOCTYPE
- break
- case TimeStep.YEAR:
- doctype = GRDF_YEAR_DOCTYPE
- break
- default:
- doctype = GRDF_DAY_DOCTYPE
- }
- }
- break
-
- default:
- break
+ interface DoctypesMappings {
+ [fluidType: number]: {
+ [timeStep: number]: string
+ default: string
+ }
}
-
- return doctype
+ const doctypeMappings: DoctypesMappings = {
+ [FluidType.ELECTRICITY]: {
+ [TimeStep.HALF_AN_HOUR]: ENEDIS_MINUTE_DOCTYPE,
+ [TimeStep.WEEK]: ENEDIS_DAY_DOCTYPE,
+ [TimeStep.DAY]: ENEDIS_DAY_DOCTYPE,
+ [TimeStep.MONTH]: ENEDIS_MONTH_DOCTYPE,
+ [TimeStep.YEAR]: ENEDIS_YEAR_DOCTYPE,
+ default: ENEDIS_DAY_DOCTYPE,
+ },
+ [FluidType.WATER]: {
+ [TimeStep.WEEK]: EGL_DAY_DOCTYPE,
+ [TimeStep.DAY]: EGL_DAY_DOCTYPE,
+ [TimeStep.MONTH]: EGL_MONTH_DOCTYPE,
+ [TimeStep.YEAR]: EGL_YEAR_DOCTYPE,
+ default: EGL_DAY_DOCTYPE,
+ },
+ [FluidType.GAS]: {
+ [TimeStep.WEEK]: GRDF_DAY_DOCTYPE,
+ [TimeStep.DAY]: GRDF_DAY_DOCTYPE,
+ [TimeStep.MONTH]: GRDF_MONTH_DOCTYPE,
+ [TimeStep.YEAR]: GRDF_YEAR_DOCTYPE,
+ default: GRDF_DAY_DOCTYPE,
+ },
+ }
+ return (
+ doctypeMappings[fluidType]?.[timeStep] ||
+ doctypeMappings[fluidType]?.['default'] ||
+ 'default'
+ )
}
public async fetchFluidData(
diff --git a/src/services/quiz.service.ts b/src/services/quiz.service.ts
index bb0a4f72cfaff373803692dda8b16590095984e1..ffc47a65192bb41959922668371673eac095e95e 100644
--- a/src/services/quiz.service.ts
+++ b/src/services/quiz.service.ts
@@ -37,9 +37,8 @@ export default class QuizService {
*/
public async getAllQuizEntities(): Promise<QuizEntity[]> {
const query: QueryDefinition = Q(QUIZ_DOCTYPE)
- const { data: quizs }: QueryResult<QuizEntity[]> = await this._client.query(
- query
- )
+ const { data: quizs }: QueryResult<QuizEntity[]> =
+ await this._client.query(query)
return quizs
}
diff --git a/src/services/triggers.service.ts b/src/services/triggers.service.ts
index d3478fcfc809d106fbe1b5841b773f51585deef6..5e363dbe5a34b8324a398a3532f8de596ab8e877 100644
--- a/src/services/triggers.service.ts
+++ b/src/services/triggers.service.ts
@@ -25,7 +25,7 @@ export default class TriggerService {
private createTriggerAttributes(account: Account, konnector: Konnector) {
const configService = new ConfigService()
- const cronArgs = configService.getCronArgs()
+ const cronArgs = configService.getCronArgs(7, 9)
const triggerAttributes: TriggerAttributes = buildAttributes({
account: account,
cron: cronArgs,
@@ -58,9 +58,8 @@ export default class TriggerService {
.indexFields(['cozyMetadata.updatedAt'])
.sortBy([{ 'cozyMetadata.updatedAt': 'desc' }])
.limitBy(1)
- const { data: triggers }: QueryResult<Trigger[]> = await this._client.query(
- query
- )
+ const { data: triggers }: QueryResult<Trigger[]> =
+ await this._client.query(query)
return triggers[0] ? triggers[0] : null
}
@@ -73,9 +72,8 @@ export default class TriggerService {
.indexFields(['cozyMetadata.createdAt'])
.sortBy([{ 'cozyMetadata.createdAt': 'desc' }])
.limitBy(1)
- const { data: triggers }: QueryResult<Trigger[]> = await this._client.query(
- query
- )
+ const { data: triggers }: QueryResult<Trigger[]> =
+ await this._client.query(query)
return triggers[0] ? triggers[0] : null
}
diff --git a/src/styles/base/_color.scss b/src/styles/base/_color.scss
index bc7fa395af58468ba90d67a3ed1cd9e1bf304b4e..b27f6f4409913063e2a68024e365ce5e0a8a950f 100644
--- a/src/styles/base/_color.scss
+++ b/src/styles/base/_color.scss
@@ -66,11 +66,6 @@ $grey-linear-gradient-background-hover: linear-gradient(
rgba(70, 71, 77, 0.7) 0%,
rgba(57, 58, 63, 0.7) 100%
);
-// $grey-linear-gradient-background-hover: linear-gradient(
-// 180deg,
-// rgb(70, 71, 77) 0%,
-// rgb(57, 58, 63) 100%
-// );
/** App colors **/
$elec-color: #d87b39;
diff --git a/src/styles/base/_mixins.scss b/src/styles/base/_mixins.scss
index 11c9aa1fd4cd0ed0b919837852fc0f54b09e01af..bb10dab58b0eb7169ac10ae24f17ff7de2661842 100644
--- a/src/styles/base/_mixins.scss
+++ b/src/styles/base/_mixins.scss
@@ -1,17 +1,10 @@
-@mixin button(
- $background,
- $text-color,
- $border: none,
- $background-gradient: $background
-) {
+@mixin button($text-color, $border-color: transparent, $background-gradient) {
background: $background-gradient;
- background-color: $background;
- border: $border;
+ border: 1px solid;
+ border-color: $border-color;
border-radius: 2px;
- margin: 1.5rem 0 0;
width: 100%;
text-transform: initial;
- cursor: pointer;
span:first-child {
color: $text-color;
}
@@ -25,54 +18,48 @@
cursor: not-allowed;
opacity: 0.5;
}
+ transition: all 150ms ease-in-out;
}
-@mixin checkBox() {
- .checkbox {
- margin: 0.5rem 0;
- display: flex;
- align-items: center;
- &:first-of-type {
- margin-top: 1.5rem;
+
+@mixin checkBox($foreground, $background) {
+ width: 24px;
+ min-width: 24px;
+ height: 24px;
+ display: flex;
+ align-items: center;
+ border-radius: 4px;
+
+ cursor: pointer;
+ appearance: none;
+ background: $background;
+ position: relative;
+ border: solid 1px $grey-dark;
+
+ &:checked {
+ background: $foreground;
+ border-color: $foreground;
+ // Custom check mark
+ &:before,
+ &:after {
+ content: '';
+ position: absolute;
+ display: inline-block;
+ background: $dark-light-2;
+ border-radius: 0.5rem;
}
- input {
- margin: 0.5rem 1rem 0.5rem 0.5rem;
- appearance: none;
- -moz-appearance: none;
- -webkit-appearance: none;
- width: 1.45rem;
- height: 1.45rem;
- min-width: 1.45rem;
- min-height: 1.45rem;
- background: $dark-background;
- position: relative;
- border: solid 2px $gold-shadow;
- cursor: pointer;
+ &:before {
+ width: 3px;
+ height: 12px;
+ left: 10px;
+ top: 4px;
+ transform: rotate(41deg);
}
- }
- .answer-checked {
- input {
- &:before,
- &:after {
- content: '';
- position: absolute;
- display: inline-block;
- background: $gold-shadow;
- border-radius: 0.5rem;
- }
- &:before {
- width: 3px;
- height: 12px;
- left: 10px;
- top: 4px;
- transform: rotate(41deg);
- }
- &:after {
- width: 3px;
- height: 6px;
- left: 5px;
- top: 8px;
- transform: rotate(133deg);
- }
+ &:after {
+ width: 3px;
+ height: 6px;
+ left: 5px;
+ top: 8px;
+ transform: rotate(133deg);
}
}
}
diff --git a/src/styles/base/_typo-variables.scss b/src/styles/base/_typo-variables.scss
index 99b3104bb00939b4a13c54c02b92418985ba8990..3e357c1bf88b39ad0cd8b334a1635c84dd5675fa 100644
--- a/src/styles/base/_typo-variables.scss
+++ b/src/styles/base/_typo-variables.scss
@@ -1,5 +1,5 @@
$text-font: Lato, sans-serif;
-$text-size: '10' 0.625rem, '14' 0.875rem, '15' 0.938rem, '16' 1rem,
- '18' 1.125rem, '19' 1.188rem, '20' 1.25rem, '21' 1.313rem, '22' 1.375rem,
- '24' 1.5rem, '26' 1.625rem, '28' 1.75rem, '36' 2.25rem;
+$text-size: '10' 0.625rem, '13' 0.8125rem, '14' 0.875rem, '15' 0.938rem,
+ '16' 1rem, '18' 1.125rem, '19' 1.188rem, '20' 1.25rem, '21' 1.313rem,
+ '22' 1.375rem, '24' 1.5rem, '26' 1.625rem, '28' 1.75rem, '36' 2.25rem;
diff --git a/src/styles/components/_buttons.scss b/src/styles/components/_buttons.scss
index 210658472e6690949f6ddc17f0e0459d179b11ec..3a8f0feb4ef0b737d97fb2f0daf824056364274b 100644
--- a/src/styles/components/_buttons.scss
+++ b/src/styles/components/_buttons.scss
@@ -2,86 +2,42 @@
@import '../base/mixins';
button {
- &.btn-highlight {
- @include button($gold-shadow, #000000, none, $multi-color-radial-gradient) {
- background-color: darken($gold-shadow, 12%);
- }
- }
- &.btn-primary-positive {
- @include button(
- transparent,
- $gold-shadow,
- 1px solid $dark-light-2,
- transparent
- ) {
- background-color: rgba($dark-light-2, 0.2);
- span:first-child {
- color: rgba($gold-shadow, 0.7);
- }
- }
- }
- &.btn-primary-challenge {
- @include button($blue-light, black, 1px solid $blue-light, transparent) {
- background-color: rgba($blue-light, 0.2);
- span:first-child {
- color: black;
- }
- }
- }
- &.btn-secondary {
- @include button(transparent, $gold-euro, 1px solid $grey-dark);
- }
- &.btn-secondary-positive {
- @include button(transparent, $grey-bright, 1px solid $white, transparent) {
- background-color: rgba($dark-light-2, 0.2);
- span:first-child {
- color: rgba($grey-bright, 0.7);
- }
- }
+ span {
+ font-size: 1rem;
+ font-weight: 700;
}
- &.btn-secondary-negative {
- @include button(
- transparent,
- $grey-bright,
- 1px solid $grey-dark,
- transparent
- ) {
- background-color: rgba($grey-dark, 0.2);
- span:first-child {
- color: rgba($grey-bright, 0.7);
- }
- }
- }
- &.btn-duel-off {
- @include button(
- $dark-light-2,
- $white,
- 1px solid rgba(97, 240, 242, 0.5),
- $dark-light-2
- ) {
- background-color: darken($dark-light-2, 12%);
+
+ &.btnPrimary {
+ @include button($dark-light-2, transparent, $multi-color-radial-gradient) {
+ background-color: darken($gold-shadow, 12%);
}
}
- &.btn-duel-active {
- border-radius: 4px !important;
- @include button($blue-radial-gradient, $dark-light-2, none);
+
+ &.btnSecondary {
+ @include button($grey-bright, $grey-bright, transparent);
}
- &.btn-duel-on {
- @include button($dark-light-2, $white, 1px solid $blue, $dark-background) {
- background-color: darken($dark-light-2, 12%);
+
+ &.btnText {
+ text-decoration: underline;
+ span {
+ text-transform: none;
+ font-weight: 400;
}
}
- &.btn-profile-next {
- @include button(
- $gold-shadow,
- #000000,
- 1px solid $gold-shadow,
- $multi-color-radial-gradient
- ) {
- background-color: darken($gold-shadow, 12%);
+
+ &.btnPrimaryNegative {
+ @include button($dark-light-2, transparent, $blue-gradient);
+ &:hover {
+ opacity: 0.7;
}
}
- &.btn-profile-back {
- @include button(none, $grey-bright, 1px solid $grey-bright, none);
+
+ &.btnIncrement {
+ @include button($white, transparent, $grey-linear-gradient-background);
+ min-width: 40px;
+ width: 40px;
+ height: 40px;
+ border-radius: 4px;
+ box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.55);
}
}
diff --git a/src/styles/components/_input.scss b/src/styles/components/_input.scss
new file mode 100644
index 0000000000000000000000000000000000000000..66759a556b309fc6956a2b95c0b855c390379449
--- /dev/null
+++ b/src/styles/components/_input.scss
@@ -0,0 +1,38 @@
+@import '../base/color';
+@import '../base/mixins';
+
+// Common styles for custom inputs
+input.inputText,
+input.inputNumber {
+ box-sizing: border-box;
+ border: 1px solid $grey-dark;
+ background: transparent;
+ transition: all 300ms ease;
+ color: $grey-bright;
+ &:focus,
+ &:focus-visible {
+ border-color: $gold-shadow;
+ outline: none;
+ }
+}
+
+input.inputText {
+ appearance: none;
+ border-radius: 4px;
+ height: 45px;
+ width: 100%;
+ max-width: 280px;
+ padding: 0 0.5rem;
+}
+
+input.inputNumber {
+ border-radius: 2px;
+ height: 40px;
+ width: 60px;
+ max-width: 5rem;
+ text-align: center;
+}
+
+input.inputCheckbox {
+ @include checkBox($gold-shadow, $dark-light-2);
+}
diff --git a/src/styles/index.scss b/src/styles/index.scss
index 2ee8873d98d20621914f25a5c6950af7985a981a..0539cbb69643b6e28d1e5366ebd1b0f0aac7439f 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -9,6 +9,7 @@
@import 'base/typography';
@import 'components/barchart';
@import 'components/buttons';
+@import 'components/input';
@import 'components/card';
@import 'components/dialog';
@import 'components/expansion-panel';
@@ -75,3 +76,12 @@
// useful when text is rendered with loader
align-items: center;
}
+
+// devtools button
+.makeStyles-fab-1 {
+ top: 12px;
+ left: 3rem !important;
+ width: 36px !important;
+ height: 36px !important;
+ background-color: $dark-light-3 !important;
+}
diff --git a/src/targets/services/fluidsPrices.ts b/src/targets/services/fluidsPrices.ts
index 8e2706850f6d7aa6f841abfd28c3250cf4591cb2..cd71bf29c611e5991c0b373624ecf8aa285252a7 100644
--- a/src/targets/services/fluidsPrices.ts
+++ b/src/targets/services/fluidsPrices.ts
@@ -19,10 +19,6 @@ import { runService } from './service'
const logStack = logger.namespace('fluidPrices')
-interface PricesProps {
- client: Client
-}
-
const getRemotePricesByFluid = async (
client: Client,
fluidType: FluidType
@@ -37,6 +33,18 @@ const getRemotePricesByFluid = async (
return prices
}
+/**
+ * If a price has been updated, set the oldest startDate of the edited price so we can redo aggregation
+ */
+function updateFirstEditedPrice(
+ firstEditedPrice: string | null,
+ remotePrice: FluidPrice
+): string {
+ return firstEditedPrice === null || firstEditedPrice >= remotePrice.startDate
+ ? remotePrice.startDate
+ : firstEditedPrice
+}
+
/**
* Synchro the remote prices with database and returns a date where we have to relaunch aggregation if a price has been edited in backoffice
* @returns {string | null} the oldest startDate
@@ -46,62 +54,39 @@ const synchroPricesToUpdate = async (
fluidType: FluidType
): Promise<string | null> => {
const fps = new FluidPricesService(client)
- const remotePrices = await getRemotePricesByFluid(client, fluidType)
- let firstEditedPrice: string | null = null
- await Promise.all(
- remotePrices.map(async remotePrice => {
- try {
- const existingPrice = await fps.checkIfPriceExists(remotePrice)
- if (!existingPrice) {
- logStack('debug', `Price doesn't exist in db, creating a new price`)
- // If a price has been updated, set the oldest startDate of the edited price so we can redo aggregation
- if (
- firstEditedPrice === null ||
- firstEditedPrice >= remotePrice.startDate
- ) {
- firstEditedPrice = remotePrice.startDate
- }
- await fps.createPrice(remotePrice)
- return
- }
-
- if (!existingPrice.UpdatedAt && remotePrice.UpdatedAt) {
- // updatedAt key doesn't exist in db
- await fps.updatePrice(existingPrice, {
- UpdatedAt: remotePrice.UpdatedAt,
- })
- return
- } else if (
- !existingPrice.UpdatedAt ||
- !remotePrice.UpdatedAt ||
- existingPrice.UpdatedAt >= remotePrice.UpdatedAt
- ) {
- logStack('debug', `Price up to date`)
- return
- }
- logStack('debug', `Price exists in db but not up to date, updating it`)
- // If a price has been updated, set the oldest startDate of the edited price so we can redo aggregation
- if (
- firstEditedPrice === null ||
- firstEditedPrice >= remotePrice.startDate
- ) {
- firstEditedPrice = remotePrice.startDate
- }
+ try {
+ const remotePrices = await getRemotePricesByFluid(client, fluidType)
+ let firstEditedPrice: string | null = null
+ for (const remotePrice of remotePrices) {
+ const existingPrice = await fps.checkIfPriceExists(remotePrice)
+ if (!existingPrice) {
+ logStack('debug', `Price doesn't exist in db, creating a new price`)
+ firstEditedPrice = updateFirstEditedPrice(firstEditedPrice, remotePrice)
+ await fps.createPrice(remotePrice)
+ continue
+ }
- // update this price in db
- await fps.updatePrice(existingPrice, {
- price: remotePrice.price,
- UpdatedAt: remotePrice.UpdatedAt,
- startDate: remotePrice.startDate,
- endDate: remotePrice.endDate,
- })
- } catch (error) {
- logStack('error', `Error: ${error}`)
- Sentry.captureException(error)
+ if (existingPrice.UpdatedAt >= remotePrice.UpdatedAt) {
+ logStack('debug', `Price up to date`)
+ continue
}
- })
- )
- return firstEditedPrice
+ logStack('debug', `Price exists in db but not up to date, updating it`)
+ // If a price has been updated, set the oldest startDate of the edited price so we can redo aggregation
+ firstEditedPrice = updateFirstEditedPrice(firstEditedPrice, remotePrice)
+
+ await fps.updatePrice(existingPrice, {
+ price: remotePrice.price,
+ UpdatedAt: remotePrice.UpdatedAt,
+ startDate: remotePrice.startDate,
+ endDate: remotePrice.endDate,
+ })
+ }
+ return firstEditedPrice
+ } catch (error) {
+ logStack('error', `Error: ${error}`)
+ Sentry.captureException(error)
+ return null
+ }
}
const price = (item: DataloadEntity): number => {
@@ -149,45 +134,45 @@ const aggregatePrices = async (
today: DateTime,
fluidType: FluidType
) => {
- const tsa = [TimeStep.MONTH, TimeStep.YEAR]
+ const timeSteps = [TimeStep.MONTH, TimeStep.YEAR]
logStack(
'debug',
`Aggregation started for fluid: ${fluidType}, from ${firstDate} `
)
- await Promise.all(
- tsa.map(async ts => {
- let date: DateTime = DateTime.local()
- Object.assign(date, firstDate)
- try {
- do {
- const tp = await getTimePeriod(ts, date)
- // Get doc for aggregation
- const data = await qr.fetchFluidRawDoctype(
- tp,
- TimeStep.DAY,
- fluidType
- )
- // Get doc to update
- const docToUpdate = await qr.fetchFluidRawDoctype(tp, ts, fluidType)
+ for (const timeStep of timeSteps) {
+ let aggregationDate = DateTime.fromObject(firstDate)
+ try {
+ do {
+ const timePeriod = await getTimePeriod(timeStep, aggregationDate)
+ // Get doc for aggregation
+ const dayDocuments = await qr.fetchFluidRawDoctype(
+ timePeriod,
+ TimeStep.DAY,
+ fluidType
+ )
+ const docToUpdate = await qr.fetchFluidRawDoctype(
+ timePeriod,
+ timeStep,
+ fluidType
+ )
+
+ if (docToUpdate?.data && dayDocuments?.data) {
+ docToUpdate.data[0].price = dayDocuments.data.map(price).reduce(sum)
+ }
+ await cdm.saveDocs(docToUpdate?.data)
+ // Update date according to timestep
+ if (timeStep === TimeStep.YEAR) {
+ aggregationDate = aggregationDate.plus({ year: 1 }).startOf('month')
+ } else {
+ aggregationDate = aggregationDate.plus({ month: 1 }).startOf('month')
+ }
+ } while (aggregationDate < today)
+ } catch (error) {
+ logStack('info', `Error : ${error}`)
+ Sentry.captureException(error)
+ }
+ }
- if (docToUpdate?.data && data?.data) {
- docToUpdate.data[0].price = data.data.map(price).reduce(sum)
- }
- // Save updated docs
- await cdm.saveDocs(docToUpdate?.data)
- // Update date according to timestep
- if (ts === TimeStep.YEAR) {
- date = date.plus({ year: 1 }).startOf('month')
- } else {
- date = date.plus({ month: 1 }).startOf('month')
- }
- } while (date < today)
- } catch (error) {
- logStack('info', `Error : ${error}`)
- Sentry.captureException(error)
- }
- })
- )
logStack('debug', `Aggregation done`)
}
@@ -206,7 +191,7 @@ const getDoctypeTypeByFluid = (fluidType: FluidType): string => {
throw new Error()
}
-const getTimeSetByFluid = (fluidType: FluidType): TimeStep[] => {
+const getTimeStepsByFluid = (fluidType: FluidType): TimeStep[] => {
if (fluidType === FluidType.ELECTRICITY) {
return [TimeStep.DAY, TimeStep.HALF_AN_HOUR]
}
@@ -228,124 +213,117 @@ const applyPrices = async (client: Client, fluidType: FluidType) => {
const firstEditedPriceDate = await synchroPricesToUpdate(client, fluidType)
const firstDataDate = await cdm.fetchAllFirstDateData([fluidType])
const prices = await fluidsPricesService.getAllPrices()
- // Prices data exist
- if (prices.length > 0) {
- logStack('debug', 'fluidPrices data found')
- const firstMinuteData = await cdm.getFirstDataDateFromDoctypeWithPrice(
- getDoctypeTypeByFluid(fluidType)
- )
- // const firstDoctypeData = await cdm.getFirsDataDateFromDoctype()
- // If there is data, update hourly data and daily data
- if (
- firstDataDate?.[0] &&
- (firstMinuteData || firstEditedPriceDate !== null)
- ) {
- const today = DateTime.now()
- const tsa = getTimeSetByFluid(fluidType)
- let firstDate: DateTime
+ if (prices.length === 0) {
+ logStack('info', 'No fluidesPrices data')
+ return
+ }
+ logStack('debug', 'fluidPrices data found')
+ const firstMinuteData = await cdm.getFirstDataDateFromDoctypeWithPrice(
+ getDoctypeTypeByFluid(fluidType)
+ )
- if (firstMinuteData && firstEditedPriceDate) {
- // If there is first data without price and a price edited, set the smallest date
- const firstMinuteDataDate = DateTime.fromObject({
- year: firstMinuteData.year,
- month: firstMinuteData.month,
- day: firstMinuteData.day,
- }).setZone('utc', {
- keepLocalTime: true,
- })
- const formattedFirstEditedPrice = DateTime.fromISO(
- firstEditedPriceDate
- ).setZone('utc', {
- keepLocalTime: true,
- })
- // we want to exclude the period with no data if the edited date is smaller than the first data date
- firstDate = DateTime.min(
- DateTime.max(formattedFirstEditedPrice, firstDataDate[0]),
- firstMinuteDataDate
- )
- } else if (firstMinuteData) {
- firstDate = DateTime.fromObject({
- year: firstMinuteData.year,
- month: firstMinuteData.month,
- day: firstMinuteData.day,
- }).setZone('utc', {
- keepLocalTime: true,
- })
- } else if (firstEditedPriceDate) {
- firstDate = DateTime.max(
- DateTime.fromISO(firstEditedPriceDate).setZone('utc', {
- keepLocalTime: true,
- }),
- firstDataDate[0]
+ // If there is data, update hourly data and daily data
+ if (
+ !firstDataDate?.[0] ||
+ (!firstMinuteData && firstEditedPriceDate === null)
+ ) {
+ logStack('info', `No data found for fluid ${fluidType}`)
+ return
+ }
+ const today = DateTime.now()
+ const timeSteps = getTimeStepsByFluid(fluidType)
+ let firstDate: DateTime
+
+ if (firstMinuteData && firstEditedPriceDate) {
+ // If there is first data without price and a price edited, set the smallest date
+ const firstMinuteDataDate = DateTime.fromObject({
+ year: firstMinuteData.year,
+ month: firstMinuteData.month,
+ day: firstMinuteData.day,
+ }).setZone('utc', {
+ keepLocalTime: true,
+ })
+ const formattedFirstEditedPrice = DateTime.fromISO(
+ firstEditedPriceDate
+ ).setZone('utc', {
+ keepLocalTime: true,
+ })
+ // we want to exclude the period with no data if the edited date is smaller than the first data date
+ firstDate = DateTime.min(
+ DateTime.max(formattedFirstEditedPrice, firstDataDate[0]),
+ firstMinuteDataDate
+ )
+ } else if (firstMinuteData) {
+ firstDate = DateTime.fromObject({
+ year: firstMinuteData.year,
+ month: firstMinuteData.month,
+ day: firstMinuteData.day,
+ }).setZone('utc', {
+ keepLocalTime: true,
+ })
+ } else if (firstEditedPriceDate) {
+ firstDate = DateTime.max(
+ DateTime.fromISO(firstEditedPriceDate).setZone('utc', {
+ keepLocalTime: true,
+ }),
+ firstDataDate[0]
+ )
+ } else {
+ firstDate = today
+ }
+
+ // Hourly and daily prices
+ for (const timeStep of timeSteps) {
+ let date: DateTime = DateTime.local().setZone('utc', {
+ keepLocalTime: true,
+ })
+ Object.assign(date, firstDate)
+ try {
+ do {
+ const priceData = await fluidsPricesService.getPrices(fluidType, date)
+ const timePeriod = await getTimePeriod(timeStep, date)
+ const data = await qr.fetchFluidRawDoctype(
+ timePeriod,
+ timeStep,
+ fluidType
)
- } else {
- firstDate = today
- }
- // Hourly and daily prices
- await Promise.all(
- tsa.map(async timeStep => {
- let date: DateTime = DateTime.local().setZone('utc', {
- keepLocalTime: true,
+ // If lastItem has a price, skip this day (in order to save perf)
+ const lastItem = data?.data && data.data[data.data.length - 1]
+ if (lastItem && priceData) {
+ // if a price has been updated in backoffice re-calculates all price from the firstEditedPriceDate
+ data?.data.forEach((element: DataloadEntity) => {
+ element.price = element.load * priceData.price
})
- Object.assign(date, firstDate)
- try {
- do {
- // Get price
- const priceData = await fluidsPricesService.getPrices(
- fluidType,
- date
- )
- const tp = await getTimePeriod(timeStep, date)
- // Get doc to update
- const data = await qr.fetchFluidRawDoctype(
- tp,
- timeStep,
- fluidType
- )
-
- // If lastItem has a price, skip this day (in order to save perf)
- const lastItem = data?.data && data.data[data.data.length - 1]
- if (lastItem && priceData) {
- // if a price has been updated in backoffice re-calculates all price from the firstEditedPriceDate
- data?.data.forEach((element: DataloadEntity) => {
- element.price = element.load * priceData.price
- })
- // Save updated docs
- await cdm.saveDocs(data.data)
- }
- // Update date
- if (timeStep === TimeStep.HALF_AN_HOUR) {
- date = date.plus({ days: 1 })
- } else {
- date = date.plus({ month: 1 }).startOf('month')
- }
- } while (date < today)
- } catch (error) {
- logStack('error', `ERROR : ${error} `)
- Sentry.captureException(error)
- }
- })
- )
+ await cdm.saveDocs(data.data)
+ }
+ // Update date
+ if (timeStep === TimeStep.HALF_AN_HOUR) {
+ date = date.plus({ days: 1 })
+ } else {
+ date = date.plus({ month: 1 }).startOf('month')
+ }
+ } while (date < today)
+ } catch (error) {
+ logStack('error', `ERROR : ${error} `)
+ Sentry.captureException(error)
+ }
+ }
- // Call aggregation method
- await aggregatePrices(qr, cdm, firstDate, today, fluidType)
- } else logStack('info', `No data found for fluid ${fluidType}`)
- } else logStack('info', 'No fluidesPrices data')
+ await aggregatePrices(qr, cdm, firstDate, today, fluidType)
}
-const processPrices = async ({ client }: PricesProps) => {
+const processPrices = async ({ client }: { client: Client }) => {
logStack('info', `Processing electricity data...`)
- const elec = applyPrices(client, FluidType.ELECTRICITY)
+ await applyPrices(client, FluidType.ELECTRICITY)
logStack('info', `Electricity data done`)
logStack('info', `Processing gas data...`)
- const gas = applyPrices(client, FluidType.GAS)
+ await applyPrices(client, FluidType.GAS)
logStack('info', `Gas data done`)
logStack('info', `Processing water data...`)
- const water = applyPrices(client, FluidType.WATER)
+ await applyPrices(client, FluidType.WATER)
logStack('info', `Water data done`)
- await Promise.all([elec, gas, water])
logStack('info', `processPrices done`)
}
diff --git a/src/types/cozy-client/dist/devtools.d.ts b/src/types/cozy-client/dist/devtools.d.ts
new file mode 100644
index 0000000000000000000000000000000000000000..402492edb2d18683d4b9964102bd7eb5d582c782
--- /dev/null
+++ b/src/types/cozy-client/dist/devtools.d.ts
@@ -0,0 +1 @@
+declare module 'cozy-client/dist/devtools'
diff --git a/src/utils/utils.ts b/src/utils/utils.ts
index 748166f31c588baca762f5c70ff252ac1900555e..c9a6cc15bc48281469b265b67584e60fb5736032 100644
--- a/src/utils/utils.ts
+++ b/src/utils/utils.ts
@@ -11,6 +11,9 @@ import { DateTime, Interval } from 'luxon'
import { FluidStatus, GetRelationshipsReturn, Relation } from 'models'
import challengeData from '../db/challengeEntity.json'
+/** Array of elec, water & gas */
+export const allFluids = [FluidType.ELECTRICITY, FluidType.WATER, FluidType.GAS]
+
export function getFluidType(type: string) {
switch (type.toUpperCase()) {
case 'ELECTRICITY':
diff --git a/tests/__mocks__/customPopup.mock.ts b/tests/__mocks__/customPopup.mock.ts
index 65c9b9d93101881fb1b78e2fc1bea274fca164f6..9cb45df355382f8200bfad24f25afb6b471b695a 100644
--- a/tests/__mocks__/customPopup.mock.ts
+++ b/tests/__mocks__/customPopup.mock.ts
@@ -7,6 +7,14 @@ export const mockCustomPopup: CustomPopup = {
endDate: '2099-10-04T15:10:53.219+02:00',
}
+export const mockCustomPopupWithLink: CustomPopup = {
+ popupEnabled: true,
+ title: 'Bold title',
+ description:
+ '<p>Allez voir la page <a href="{cozyUrl}ecogestures" target="_self">astuces</a> !!</p>',
+ endDate: '2099-10-04T15:10:53.219+02:00',
+}
+
export const mockCustomPopupOff: CustomPopup = {
popupEnabled: false,
title: '',
diff --git a/tests/__mocks__/testUtils.ts b/tests/__mocks__/testUtils.ts
index dd25be4229602ef6a971d988aa8940b1a561750e..8a73dd58b1b408f36a2a2a1af5ebe1b0aa89a6fd 100644
--- a/tests/__mocks__/testUtils.ts
+++ b/tests/__mocks__/testUtils.ts
@@ -1,15 +1,3 @@
-import { ReactWrapper } from 'enzyme'
-import { act } from 'react-dom/test-utils'
-
-export const waitForComponentToPaint = async <TP extends any = {}>(
- wrapper: ReactWrapper<TP>
-): Promise<void> => {
- await act(async () => {
- await new Promise(resolve => setTimeout(resolve, 0))
- wrapper.update()
- })
-}
-
class NoErrorThrownError extends Error {}
/**
diff --git a/tests/__mocks__/xScale.mock.ts b/tests/__mocks__/xScale.mock.ts
new file mode 100644
index 0000000000000000000000000000000000000000..132bf8989e7d4ecb7ae297e86d8a75fc45bc8017
--- /dev/null
+++ b/tests/__mocks__/xScale.mock.ts
@@ -0,0 +1,12 @@
+import { ScaleBand, scaleBand } from 'd3'
+import { DateTime } from 'luxon'
+import { graphData } from './chartData.mock'
+
+export const mockXScale: ScaleBand<string> = scaleBand()
+ .domain(
+ graphData.actualData.map(d =>
+ d.date.toLocaleString(DateTime.DATETIME_SHORT)
+ )
+ )
+ .range([0, 10])
+ .padding(0.2)
diff --git a/tests/jestLib/setupTests.ts b/tests/jestLib/setupTests.ts
index a71f0dfd2226a5d58074a29a9f37c71fc0e1e1d6..b321c6bd3e5d68b5fe55ebb9c891e2ea1c32f83a 100644
--- a/tests/jestLib/setupTests.ts
+++ b/tests/jestLib/setupTests.ts
@@ -1,12 +1,9 @@
require('babel-polyfill')
require('jest-canvas-mock')
-import { configure } from 'enzyme'
-import Adapter from 'enzyme-adapter-react-16'
+import '@testing-library/jest-dom'
import mockClient from 'tests/__mocks__/client.mock'
-configure({ adapter: new Adapter() })
-
jest.mock('cozy-ui/transpiled/react/I18n', () => ({
useI18n: jest.fn(() => ({
t: (key: string) => key,
diff --git a/yarn.lock b/yarn.lock
index 2616ea33eb3c11f95fa1c0d1bab60128a005969b..372e6beb5093e45740caec5057df25156f51f2e3 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -7,6 +7,11 @@
resolved "https://registry.yarnpkg.com/@aashutoshrathi/word-wrap/-/word-wrap-1.2.6.tgz#bd9154aec9983f77b3a034ecaa015c2e4201f6cf"
integrity sha512-1Yjs2SvM8TflER/OD3cOjhWWOZb58A2t7wpE2S9XfBYTiIl+XFhQG2bjy4Pu1I+EAlCNUzRDYDdFwFYUKvXcIA==
+"@adobe/css-tools@^4.3.0":
+ version "4.3.1"
+ resolved "https://registry.yarnpkg.com/@adobe/css-tools/-/css-tools-4.3.1.tgz#abfccb8ca78075a2b6187345c26243c1a0842f28"
+ integrity sha512-/62yikz7NLScCGAAST5SHdnjaDJQBDq0M2muyRTpf2VQhw6StBg2ALiu73zSJQ4fMVLA+0uBhBHAle7Wg+2kSg==
+
"@alloc/types@^1.2.1":
version "1.3.0"
resolved "https://registry.yarnpkg.com/@alloc/types/-/types-1.3.0.tgz#904245b8d3260a4b7d8a801c12501968f64fac08"
@@ -50,6 +55,14 @@
dependencies:
"@babel/highlight" "^7.18.6"
+"@babel/code-frame@^7.10.4":
+ version "7.22.13"
+ resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.22.13.tgz#e3c1c099402598483b7a8c46a721d1038803755e"
+ integrity sha512-XktuhWlJ5g+3TJXc5upd9Ks1HutSArik6jf2eAjYFyIOf4ej3RN+184cZbzDvbPnuTJIUhPKKJE3cIsYTiAT3w==
+ dependencies:
+ "@babel/highlight" "^7.22.13"
+ chalk "^2.4.2"
+
"@babel/compat-data@^7.13.11", "@babel/compat-data@^7.18.6":
version "7.18.6"
resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.18.6.tgz#8b37d24e88e8e21c499d4328db80577d8882fa53"
@@ -444,6 +457,11 @@
resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.18.6.tgz#9c97e30d31b2b8c72a1d08984f2ca9b574d7a076"
integrity sha512-MmetCkz9ej86nJQV+sFCxoGGrUbU3q02kgLciwkrt9QqEB7cP39oKEY0PakknEO0Gu20SskMRi+AYZ3b1TpN9g==
+"@babel/helper-validator-identifier@^7.22.20":
+ version "7.22.20"
+ resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.22.20.tgz#c4ae002c61d2879e724581d96665583dbc1dc0e0"
+ integrity sha512-Y4OZ+ytlatR8AI+8KZfKuL5urKp7qey08ha31L8b3BwewJAoJamTzyvxPR/5D+KkdJCGPq/+8TukHBlY10FX9A==
+
"@babel/helper-validator-option@^7.18.6":
version "7.18.6"
resolved "https://registry.yarnpkg.com/@babel/helper-validator-option/-/helper-validator-option-7.18.6.tgz#bf0d2b5a509b1f336099e4ff36e1a63aa5db4db8"
@@ -496,6 +514,15 @@
chalk "^2.0.0"
js-tokens "^4.0.0"
+"@babel/highlight@^7.22.13":
+ version "7.22.20"
+ resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.22.20.tgz#4ca92b71d80554b01427815e06f2df965b9c1f54"
+ integrity sha512-dkdMCN3py0+ksCgYmGG8jKeGA/8Tk+gJwSYYlFGxG5lmhfKNoAy004YpLxpS1W2J8m/EK2Ew+yOs9pVRwO89mg==
+ dependencies:
+ "@babel/helper-validator-identifier" "^7.22.20"
+ chalk "^2.4.2"
+ js-tokens "^4.0.0"
+
"@babel/parser@^7.0.0", "@babel/parser@^7.1.0", "@babel/parser@^7.14.7", "@babel/parser@^7.18.6", "@babel/parser@^7.2.2", "@babel/parser@^7.7.0", "@babel/parser@^7.9.0":
version "7.18.6"
resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.18.6.tgz#845338edecad65ebffef058d3be851f1d28a63bc"
@@ -1492,6 +1519,13 @@
dependencies:
regenerator-runtime "^0.13.4"
+"@babel/runtime@^7.23.2":
+ version "7.23.2"
+ resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.23.2.tgz#062b0ac103261d68a966c4c7baf2ae3e62ec3885"
+ integrity sha512-mM8eg4yl5D6i3lu2QKPuPH4FArvJ8KhTofbE7jwMUv9KX5mBvwPAqnV3MlyBNqdp9RyRKP6Yck8TrfYrPvX3bg==
+ dependencies:
+ regenerator-runtime "^0.14.0"
+
"@babel/runtime@^7.7.6":
version "7.20.13"
resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.20.13.tgz#7055ab8a7cff2b8f6058bf6ae45ff84ad2aded4b"
@@ -2206,6 +2240,18 @@
mkdirp "^1.0.4"
rimraf "^3.0.2"
+"@pkgr/utils@^2.3.1":
+ version "2.4.2"
+ resolved "https://registry.yarnpkg.com/@pkgr/utils/-/utils-2.4.2.tgz#9e638bbe9a6a6f165580dc943f138fd3309a2cbc"
+ integrity sha512-POgTXhjrTfbTV63DiFXav4lBHiICLKKwDeaKn9Nphwj7WH6m0hMMCaJkMyRWjgtPFyRKRVoMXXjczsTQRDEhYw==
+ dependencies:
+ cross-spawn "^7.0.3"
+ fast-glob "^3.3.0"
+ is-glob "^4.0.3"
+ open "^9.1.0"
+ picocolors "^1.0.0"
+ tslib "^2.6.0"
+
"@pollyjs/adapter-node-http@5.1.1":
version "5.1.1"
resolved "https://registry.yarnpkg.com/@pollyjs/adapter-node-http/-/adapter-node-http-5.1.1.tgz#b717f28eda10e76e80c821f33d71b1cf064f41d0"
@@ -2513,6 +2559,48 @@
dependencies:
"@sinonjs/commons" "^1.7.0"
+"@testing-library/dom@^8.0.0":
+ version "8.20.1"
+ resolved "https://registry.yarnpkg.com/@testing-library/dom/-/dom-8.20.1.tgz#2e52a32e46fc88369eef7eef634ac2a192decd9f"
+ integrity sha512-/DiOQ5xBxgdYRC8LNk7U+RWat0S3qRLeIw3ZIkMQ9kkVlRmwD/Eg8k8CqIpD6GW7u20JIUOfMKbxtiLutpjQ4g==
+ dependencies:
+ "@babel/code-frame" "^7.10.4"
+ "@babel/runtime" "^7.12.5"
+ "@types/aria-query" "^5.0.1"
+ aria-query "5.1.3"
+ chalk "^4.1.0"
+ dom-accessibility-api "^0.5.9"
+ lz-string "^1.5.0"
+ pretty-format "^27.0.2"
+
+"@testing-library/dom@^9.3.3":
+ version "9.3.3"
+ resolved "https://registry.yarnpkg.com/@testing-library/dom/-/dom-9.3.3.tgz#108c23a5b0ef51121c26ae92eb3179416b0434f5"
+ integrity sha512-fB0R+fa3AUqbLHWyxXa2kGVtf1Fe1ZZFr0Zp6AIbIAzXb2mKbEXl+PCQNUOaq5lbTab5tfctfXRNsWXxa2f7Aw==
+ dependencies:
+ "@babel/code-frame" "^7.10.4"
+ "@babel/runtime" "^7.12.5"
+ "@types/aria-query" "^5.0.1"
+ aria-query "5.1.3"
+ chalk "^4.1.0"
+ dom-accessibility-api "^0.5.9"
+ lz-string "^1.5.0"
+ pretty-format "^27.0.2"
+
+"@testing-library/jest-dom@^6.1.3":
+ version "6.1.3"
+ resolved "https://registry.yarnpkg.com/@testing-library/jest-dom/-/jest-dom-6.1.3.tgz#443118c9e4043f96396f120de2c7122504a079c5"
+ integrity sha512-YzpjRHoCBWPzpPNtg6gnhasqtE/5O4qz8WCwDEaxtfnPO6gkaLrnuXusrGSPyhIGPezr1HM7ZH0CFaUTY9PJEQ==
+ dependencies:
+ "@adobe/css-tools" "^4.3.0"
+ "@babel/runtime" "^7.9.2"
+ aria-query "^5.0.0"
+ chalk "^3.0.0"
+ css.escape "^1.5.1"
+ dom-accessibility-api "^0.5.6"
+ lodash "^4.17.15"
+ redent "^3.0.0"
+
"@testing-library/react-hooks@^8.0.0":
version "8.0.1"
resolved "https://registry.yarnpkg.com/@testing-library/react-hooks/-/react-hooks-8.0.1.tgz#0924bbd5b55e0c0c0502d1754657ada66947ca12"
@@ -2521,6 +2609,20 @@
"@babel/runtime" "^7.12.5"
react-error-boundary "^3.1.0"
+"@testing-library/react@^12.1.0":
+ version "12.1.5"
+ resolved "https://registry.yarnpkg.com/@testing-library/react/-/react-12.1.5.tgz#bb248f72f02a5ac9d949dea07279095fa577963b"
+ integrity sha512-OfTXCJUFgjd/digLUuPxa0+/3ZxsQmE7ub9kcbW/wi96Bh3o/p5vrETcBGfP17NWPGqeYYl5LTRpwyGoMC4ysg==
+ dependencies:
+ "@babel/runtime" "^7.12.5"
+ "@testing-library/dom" "^8.0.0"
+ "@types/react-dom" "<18.0.0"
+
+"@testing-library/user-event@^14.5.1":
+ version "14.5.1"
+ resolved "https://registry.yarnpkg.com/@testing-library/user-event/-/user-event-14.5.1.tgz#27337d72046d5236b32fd977edee3f74c71d332f"
+ integrity sha512-UCcUKrUYGj7ClomOo2SpNVvx4/fkd/2BbIHDCle8A0ax+P3bU7yJwDBDrS6ZwdTMARWTGODX1hEsCcO+7beJjg==
+
"@tokenizer/token@^0.3.0":
version "0.3.0"
resolved "https://registry.yarnpkg.com/@tokenizer/token/-/token-0.3.0.tgz#fe98a93fe789247e998c75e74e9c7c63217aa276"
@@ -2531,6 +2633,11 @@
resolved "https://registry.yarnpkg.com/@tootallnate/once/-/once-1.1.2.tgz#ccb91445360179a04e7fe6aff78c00ffc1eeaf82"
integrity sha512-RbzJvlNzmRq5c3O09UipeuXno4tA1FE6ikOjxZK0tuxVv3412l64l5t1W5pj4+rJq9vpkm/kwiR07aZXnsKPxw==
+"@types/aria-query@^5.0.1":
+ version "5.0.2"
+ resolved "https://registry.yarnpkg.com/@types/aria-query/-/aria-query-5.0.2.tgz#6f1225829d89794fd9f891989c9ce667422d7f64"
+ integrity sha512-PHKZuMN+K5qgKIWhBodXzQslTo5P+K/6LqeKXS6O/4liIDdZqaX5RXrCK++LAw+y/nptN48YmUMFiQHRSWYwtQ==
+
"@types/babel__core@^7.0.0", "@types/babel__core@^7.1.7":
version "7.1.19"
resolved "https://registry.yarnpkg.com/@types/babel__core/-/babel__core-7.1.19.tgz#7b497495b7d1b4812bdb9d02804d0576f43ee460"
@@ -2564,13 +2671,6 @@
dependencies:
"@babel/types" "^7.3.0"
-"@types/cheerio@*", "@types/cheerio@^0.22.22":
- version "0.22.31"
- resolved "https://registry.yarnpkg.com/@types/cheerio/-/cheerio-0.22.31.tgz#b8538100653d6bb1b08a1e46dec75b4f2a5d5eb6"
- integrity sha512-Kt7Cdjjdi2XWSfrZ53v4Of0wG3ZcmaegFXjMmz9tfNrZSkzzo36G0AL1YqSdcIA78Etjt6E609pt5h1xnQkPUw==
- dependencies:
- "@types/node" "*"
-
"@types/d3-array@^2":
version "2.12.3"
resolved "https://registry.yarnpkg.com/@types/d3-array/-/d3-array-2.12.3.tgz#8d16d51fb04ad5a5a8ebe14eb8263a579f1efdd1"
@@ -2781,29 +2881,6 @@
"@types/d3-transition" "^2"
"@types/d3-zoom" "^2"
-"@types/enzyme-adapter-react-16@^1.0.6":
- version "1.0.6"
- resolved "https://registry.yarnpkg.com/@types/enzyme-adapter-react-16/-/enzyme-adapter-react-16-1.0.6.tgz#8aca7ae2fd6c7137d869b6616e696d21bb8b0cec"
- integrity sha512-VonDkZ15jzqDWL8mPFIQnnLtjwebuL9YnDkqeCDYnB4IVgwUm0mwKkqhrxLL6mb05xm7qqa3IE95m8CZE9imCg==
- dependencies:
- "@types/enzyme" "*"
-
-"@types/enzyme@*":
- version "3.10.13"
- resolved "https://registry.yarnpkg.com/@types/enzyme/-/enzyme-3.10.13.tgz#332c0ed59b01f7b1c398c532a1c21a5feefabeb1"
- integrity sha512-FCtoUhmFsud0Yx9fmZk179GkdZ4U9B0GFte64/Md+W/agx0L5SxsIIbhLBOxIb9y2UfBA4WQnaG1Od/UsUQs9Q==
- dependencies:
- "@types/cheerio" "*"
- "@types/react" "^16"
-
-"@types/enzyme@^3.10.8":
- version "3.10.12"
- resolved "https://registry.yarnpkg.com/@types/enzyme/-/enzyme-3.10.12.tgz#ac4494801b38188935580642f772ad18f72c132f"
- integrity sha512-xryQlOEIe1TduDWAOphR0ihfebKFSWOXpIsk+70JskCfRfW+xALdnJ0r1ZOTo85F9Qsjk6vtlU7edTYHbls9tA==
- dependencies:
- "@types/cheerio" "*"
- "@types/react" "*"
-
"@types/eslint@^8.4.2":
version "8.4.3"
resolved "https://registry.yarnpkg.com/@types/eslint/-/eslint-8.4.3.tgz#5c92815a3838b1985c90034cd85f26f59d9d0ece"
@@ -2973,6 +3050,13 @@
resolved "https://registry.yarnpkg.com/@types/q/-/q-1.5.5.tgz#75a2a8e7d8ab4b230414505d92335d1dcb53a6df"
integrity sha512-L28j2FcJfSZOnL1WBjDYp2vUHCeIFlyYI/53EwD/rKUBQ7MtUUfbQWiyKJGpcnv4/WgrhWsFKrcPstcAt/J0tQ==
+"@types/react-dom@<18.0.0":
+ version "17.0.21"
+ resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-17.0.21.tgz#85d56965483ce4850f5f03f9234e54a1f47786e5"
+ integrity sha512-3rQEFUNUUz2MYiRwJJj6UekcW7rFLOtmK7ajQP7qJpjNdggInl3I/xM4I3Hq1yYPdCGVMgax1gZsB7BBTtayXg==
+ dependencies:
+ "@types/react" "^17"
+
"@types/react-dom@^16.9.8":
version "16.9.16"
resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-16.9.16.tgz#c591f2ed1c6f32e9759dfa6eb4abfd8041f29e39"
@@ -3039,6 +3123,15 @@
"@types/scheduler" "*"
csstype "^3.0.2"
+"@types/react@^17":
+ version "17.0.67"
+ resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.67.tgz#1c224738f203829a4692aa48e33a732c34fd014a"
+ integrity sha512-zE76EIJ0Y58Oy9yDX/9csb/NuKjt0Eq2YgWb/8Wxo91YmuLzzbyiRoaqJE9h8iDlsT7n35GdpoLomHlaB1kFbg==
+ dependencies:
+ "@types/prop-types" "*"
+ "@types/scheduler" "*"
+ csstype "^3.0.2"
+
"@types/redux-mock-store@^1.0.2":
version "1.0.3"
resolved "https://registry.yarnpkg.com/@types/redux-mock-store/-/redux-mock-store-1.0.3.tgz#895de4a364bc4836661570aec82f2eef5989d1fb"
@@ -3510,21 +3603,6 @@ aggregate-error@^3.0.0:
clean-stack "^2.0.0"
indent-string "^4.0.0"
-airbnb-prop-types@^2.16.0:
- version "2.16.0"
- resolved "https://registry.yarnpkg.com/airbnb-prop-types/-/airbnb-prop-types-2.16.0.tgz#b96274cefa1abb14f623f804173ee97c13971dc2"
- integrity sha512-7WHOFolP/6cS96PhKNrslCLMYAI8yB1Pp6u6XmxozQOiZbsI5ycglZr5cHhBFfuRcQQjzCMith5ZPZdYiJCxUg==
- dependencies:
- array.prototype.find "^2.1.1"
- function.prototype.name "^1.1.2"
- is-regex "^1.1.0"
- object-is "^1.1.2"
- object.assign "^4.1.0"
- object.entries "^1.1.2"
- prop-types "^15.7.2"
- prop-types-exact "^1.2.0"
- react-is "^16.13.1"
-
ajv-errors@^1.0.0:
version "1.0.1"
resolved "https://registry.yarnpkg.com/ajv-errors/-/ajv-errors-1.0.1.tgz#f35986aceb91afadec4102fbd85014950cefa64d"
@@ -3696,6 +3774,20 @@ argsarray@0.0.1:
resolved "https://registry.yarnpkg.com/argsarray/-/argsarray-0.0.1.tgz#6e7207b4ecdb39b0af88303fa5ae22bda8df61cb"
integrity sha512-u96dg2GcAKtpTrBdDoFIM7PjcBA+6rSP0OR94MOReNRyUECL6MtQt5XXmRr4qrftYaef9+l5hcpO5te7sML1Cg==
+aria-query@5.1.3:
+ version "5.1.3"
+ resolved "https://registry.yarnpkg.com/aria-query/-/aria-query-5.1.3.tgz#19db27cd101152773631396f7a95a3b58c22c35e"
+ integrity sha512-R5iJ5lkuHybztUfuOAznmboyjWq8O6sqNqtK7CLOqdydi54VNbORp49mb14KbWgG1QD3JFO9hJdZ+y4KutfdOQ==
+ dependencies:
+ deep-equal "^2.0.5"
+
+aria-query@^5.0.0, aria-query@^5.3.0:
+ version "5.3.0"
+ resolved "https://registry.yarnpkg.com/aria-query/-/aria-query-5.3.0.tgz#650c569e41ad90b51b3d7df5e5eed1c7549c103e"
+ integrity sha512-b0P0sZPKtyu8HkeRAfCq0IfURZK+SuwMjY1UXGBU27wpAiTwQAIlq56IbIO+ytk/JjS1fMR14ee5WBBfKi5J6A==
+ dependencies:
+ dequal "^2.0.3"
+
arr-diff@^4.0.0:
version "4.0.0"
resolved "https://registry.yarnpkg.com/arr-diff/-/arr-diff-4.0.0.tgz#d6461074febfec71e7e15235761a329a5dc7c520"
@@ -3756,6 +3848,17 @@ array-includes@^3.1.6:
get-intrinsic "^1.1.3"
is-string "^1.0.7"
+array-includes@^3.1.7:
+ version "3.1.7"
+ resolved "https://registry.yarnpkg.com/array-includes/-/array-includes-3.1.7.tgz#8cd2e01b26f7a3086cbc87271593fe921c62abda"
+ integrity sha512-dlcsNBIiWhPkHdOEEKnehA+RNUWDc4UqFtnIXU4uuYDPtA4LDkr7qip2p0VvFAEXNDr0yWZ9PJyIRiGjRLQzwQ==
+ dependencies:
+ call-bind "^1.0.2"
+ define-properties "^1.2.0"
+ es-abstract "^1.22.1"
+ get-intrinsic "^1.2.1"
+ is-string "^1.0.7"
+
array-union@^1.0.1:
version "1.0.2"
resolved "https://registry.yarnpkg.com/array-union/-/array-union-1.0.2.tgz#9a34410e4f4e3da23dea375be5be70f24778ec39"
@@ -3778,35 +3881,14 @@ array-unique@^0.3.2:
resolved "https://registry.yarnpkg.com/array-unique/-/array-unique-0.3.2.tgz#a894b75d4bc4f6cd679ef3244a9fd8f46ae2d428"
integrity sha512-SleRWjh9JUud2wH1hPs9rZBZ33H6T9HOiL0uwGnGx9FpE6wKGyfWugmbkEOIs6qWrZhg0LWeLziLrEwQJhs5mQ==
-array.prototype.filter@^1.0.0:
- version "1.0.1"
- resolved "https://registry.yarnpkg.com/array.prototype.filter/-/array.prototype.filter-1.0.1.tgz#20688792acdb97a09488eaaee9eebbf3966aae21"
- integrity sha512-Dk3Ty7N42Odk7PjU/Ci3zT4pLj20YvuVnneG/58ICM6bt4Ij5kZaJTVQ9TSaWaIECX2sFyz4KItkVZqHNnciqw==
- dependencies:
- call-bind "^1.0.2"
- define-properties "^1.1.3"
- es-abstract "^1.19.0"
- es-array-method-boxes-properly "^1.0.0"
- is-string "^1.0.7"
-
-array.prototype.find@^2.1.1:
- version "2.2.0"
- resolved "https://registry.yarnpkg.com/array.prototype.find/-/array.prototype.find-2.2.0.tgz#153b8a28ad8965cd86d3117b07e6596af6f2880d"
- integrity sha512-sn40qmUiLYAcRb/1HsIQjTTZ1kCy8II8VtZJpMn2Aoen9twULhbWXisfh3HimGqMlHGUul0/TfKCnXg42LuPpQ==
- dependencies:
- call-bind "^1.0.2"
- define-properties "^1.1.3"
- es-abstract "^1.19.4"
- es-shim-unscopables "^1.0.0"
-
-array.prototype.flat@^1.2.3:
- version "1.3.0"
- resolved "https://registry.yarnpkg.com/array.prototype.flat/-/array.prototype.flat-1.3.0.tgz#0b0c1567bf57b38b56b4c97b8aa72ab45e4adc7b"
- integrity sha512-12IUEkHsAhA4DY5s0FPgNXIdc8VRSqD9Zp78a5au9abH/SOBrsp082JOWFNTjkMozh8mqcdiKuaLGhPeYztxSw==
+array.prototype.flat@^1.3.1:
+ version "1.3.2"
+ resolved "https://registry.yarnpkg.com/array.prototype.flat/-/array.prototype.flat-1.3.2.tgz#1476217df8cff17d72ee8f3ba06738db5b387d18"
+ integrity sha512-djYB+Zx2vLewY8RWlNCUdHjDXs2XOgm602S9E7P/UpHgfeHL00cRiIF+IN/G/aUJ7kGPb6yO/ErDI5V2s8iycA==
dependencies:
call-bind "^1.0.2"
- define-properties "^1.1.3"
- es-abstract "^1.19.2"
+ define-properties "^1.2.0"
+ es-abstract "^1.22.1"
es-shim-unscopables "^1.0.0"
array.prototype.flatmap@^1.3.1:
@@ -3819,6 +3901,16 @@ array.prototype.flatmap@^1.3.1:
es-abstract "^1.20.4"
es-shim-unscopables "^1.0.0"
+array.prototype.flatmap@^1.3.2:
+ version "1.3.2"
+ resolved "https://registry.yarnpkg.com/array.prototype.flatmap/-/array.prototype.flatmap-1.3.2.tgz#c9a7c6831db8e719d6ce639190146c24bbd3e527"
+ integrity sha512-Ewyx0c9PmpcsByhSW4r+9zDU7sGjFc86qf/kKtuSCRdhfbk0SNLLkaT5qvcHnRGgc5NP/ly/y+qkXkqONX54CQ==
+ dependencies:
+ call-bind "^1.0.2"
+ define-properties "^1.2.0"
+ es-abstract "^1.22.1"
+ es-shim-unscopables "^1.0.0"
+
array.prototype.foreach@^1.0.0:
version "1.0.2"
resolved "https://registry.yarnpkg.com/array.prototype.foreach/-/array.prototype.foreach-1.0.2.tgz#592b177c8d6abb84e14de1649eb6e7cc5eb9c9ae"
@@ -3853,6 +3945,19 @@ array.prototype.tosorted@^1.1.1:
es-shim-unscopables "^1.0.0"
get-intrinsic "^1.1.3"
+arraybuffer.prototype.slice@^1.0.2:
+ version "1.0.2"
+ resolved "https://registry.yarnpkg.com/arraybuffer.prototype.slice/-/arraybuffer.prototype.slice-1.0.2.tgz#98bd561953e3e74bb34938e77647179dfe6e9f12"
+ integrity sha512-yMBKppFur/fbHu9/6USUe03bZ4knMYiwFBcyiaXB8Go0qNehwX6inYPzK9U0NeQvGxKthcmHcaR8P5MStSRBAw==
+ dependencies:
+ array-buffer-byte-length "^1.0.0"
+ call-bind "^1.0.2"
+ define-properties "^1.2.0"
+ es-abstract "^1.22.1"
+ get-intrinsic "^1.2.1"
+ is-array-buffer "^3.0.2"
+ is-shared-array-buffer "^1.0.2"
+
arrify@^1.0.1:
version "1.0.1"
resolved "https://registry.yarnpkg.com/arrify/-/arrify-1.0.1.tgz#898508da2226f380df904728456849c1501a4b0d"
@@ -3893,6 +3998,11 @@ assign-symbols@^1.0.0:
resolved "https://registry.yarnpkg.com/assign-symbols/-/assign-symbols-1.0.0.tgz#59667f41fadd4f20ccbc2bb96b8d4f7f78ec0367"
integrity sha512-Q+JC7Whu8HhmTdBph/Tq59IoRtoy6KAm5zzPv00WdujX82lbAL8K7WVjne7vdCsAmbF4AYaDOPyO3k0kl8qIrw==
+ast-types-flow@^0.0.8:
+ version "0.0.8"
+ resolved "https://registry.yarnpkg.com/ast-types-flow/-/ast-types-flow-0.0.8.tgz#0a85e1c92695769ac13a428bb653e7538bea27d6"
+ integrity sha512-OH/2E5Fg20h2aPrbe+QL8JZQFko0YZaF+j4mnQ7BGhfavO7OpSLa8a0y9sBwomHdSbkhTS8TQNayBfnW5DwbvQ==
+
astral-regex@^1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/astral-regex/-/astral-regex-1.0.0.tgz#6c8c3fb827dd43ee3918f27b82782ab7658a6fd9"
@@ -3945,6 +4055,13 @@ async@~1.0.0:
resolved "https://registry.yarnpkg.com/async/-/async-1.0.0.tgz#f8fc04ca3a13784ade9e1641af98578cfbd647a9"
integrity sha512-5mO7DX4CbJzp9zjaFXusQQ4tzKJARjNB1Ih1pVBi8wkbmXy/xzIDgEMXxWePLzt2OdFwaxfneIlT1nCiXubrPQ==
+asynciterator.prototype@^1.0.0:
+ version "1.0.0"
+ resolved "https://registry.yarnpkg.com/asynciterator.prototype/-/asynciterator.prototype-1.0.0.tgz#8c5df0514936cdd133604dfcc9d3fb93f09b2b62"
+ integrity sha512-wwHYEIS0Q80f5mosx3L/dfG5t5rjEa9Ft51GTaNt862EnpyGHpgz2RkZvLPp1oF5TnAiTohkEKVEu8pQPJI7Vg==
+ dependencies:
+ has-symbols "^1.0.3"
+
asynckit@^0.4.0:
version "0.4.0"
resolved "https://registry.yarnpkg.com/asynckit/-/asynckit-0.4.0.tgz#c79ed97f7f34cb8f2ba1bc9790bcc366474b4b79"
@@ -3983,6 +4100,11 @@ aws4@^1.8.0:
resolved "https://registry.yarnpkg.com/aws4/-/aws4-1.11.0.tgz#d61f46d83b2519250e2784daf5b09479a8b41c59"
integrity sha512-xh1Rl34h6Fi1DC2WWKfxUTVqRsNnr6LsKz2+hfwDxQJWmrx8+c7ylaqBMcHfl1U1r2dsifOvKX3LQuLNZ+XSvA==
+axe-core@=4.7.0:
+ version "4.7.0"
+ resolved "https://registry.yarnpkg.com/axe-core/-/axe-core-4.7.0.tgz#34ba5a48a8b564f67e103f0aa5768d76e15bbbbf"
+ integrity sha512-M0JtH+hlOL5pLQwHOLNYZaXuhqmvS8oExsqB1SBYgA4Dk7u/xx+YdGHXaK5pyUfed5mYXdlYiphWq3G8cRi5JQ==
+
axios@^0.21.1:
version "0.21.4"
resolved "https://registry.yarnpkg.com/axios/-/axios-0.21.4.tgz#c67b90dc0568e5c1cf2b0b858c43ba28e2eda575"
@@ -3999,6 +4121,13 @@ axios@^1.3.0:
form-data "^4.0.0"
proxy-from-env "^1.1.0"
+axobject-query@^3.2.1:
+ version "3.2.1"
+ resolved "https://registry.yarnpkg.com/axobject-query/-/axobject-query-3.2.1.tgz#39c378a6e3b06ca679f29138151e45b2b32da62a"
+ integrity sha512-jsyHu61e6N4Vbz/v18DHwWYKK0bSWLqn47eeDSKPB7m8tqMHF9YJ+mhIk2lVteyZrY8tnSj/jHOv4YiTCuCJgg==
+ dependencies:
+ dequal "^2.0.3"
+
babel-core@7.0.0-bridge.0:
version "7.0.0-bridge.0"
resolved "https://registry.yarnpkg.com/babel-core/-/babel-core-7.0.0-bridge.0.tgz#95a492ddd90f9b4e9a4a1da14eb335b87b634ece"
@@ -4163,10 +4292,10 @@ babel-preset-cozy-app@1.9.2:
browserslist-config-cozy "^0.3.1"
lodash "4.17.19"
-babel-preset-cozy-app@2.0.3:
- version "2.0.3"
- resolved "https://registry.yarnpkg.com/babel-preset-cozy-app/-/babel-preset-cozy-app-2.0.3.tgz#7056c783383e88f1787908642e4926c10cf95116"
- integrity sha512-Cgcx+B9QbrLWvYQ7stV9tQq5Q0tVV99OuW8tzvBYNhXDvQ7rT8V6OL8LHN5AtFAkcKn7keNXEorxY8nHtU9q6g==
+babel-preset-cozy-app@2.1.0:
+ version "2.1.0"
+ resolved "https://registry.yarnpkg.com/babel-preset-cozy-app/-/babel-preset-cozy-app-2.1.0.tgz#0375a8e0e722bb254eddf95197b2a86756968d96"
+ integrity sha512-w3fuo6OzfBtq6kG91vUbwo430es9+6qmNHJVvFApHSHlf8NCrUi5cVRADeB7WLwkrPnbWUVkQeLt6vn/crtWmw==
dependencies:
"@babel/core" "7.16.12"
"@babel/eslint-parser" "^7.16.3"
@@ -4178,7 +4307,7 @@ babel-preset-cozy-app@2.0.3:
"@babel/preset-react" "^7.16.0"
"@babel/preset-typescript" "^7.16.0"
"@babel/runtime" "^7.16.3"
- browserslist-config-cozy "^0.4.0"
+ browserslist-config-cozy "^0.5.0"
lodash "^4.17.21"
typescript "^4.5.2"
@@ -4388,6 +4517,13 @@ bowser@^2.4.0:
resolved "https://registry.yarnpkg.com/bowser/-/bowser-2.11.0.tgz#5ca3c35757a7aa5771500c70a73a9f91ef420a8f"
integrity sha512-AlcaJBi/pqqJBIQ8U9Mcpc9i8Aqxn88Skv5d+xBX006BY5u8N3mGLHa5Lgppa7L/HfwgwLgZ6NYs+Ag6uUmJRA==
+bplist-parser@^0.2.0:
+ version "0.2.0"
+ resolved "https://registry.yarnpkg.com/bplist-parser/-/bplist-parser-0.2.0.tgz#43a9d183e5bf9d545200ceac3e712f79ebbe8d0e"
+ integrity sha512-z0M+byMThzQmD9NILRniCUXYsYpjwnlO8N5uCFaCqIOpqRsJCrQL9NK3JsD67CN5a08nF5oIL2bD6loTdHOuKw==
+ dependencies:
+ big-integer "^1.6.44"
+
brace-expansion@^1.1.7:
version "1.1.11"
resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-1.1.11.tgz#3c7fcbf529d87226f3d2f52b966ff5271eb441dd"
@@ -4502,10 +4638,10 @@ browserslist-config-cozy@^0.3.1:
resolved "https://registry.yarnpkg.com/browserslist-config-cozy/-/browserslist-config-cozy-0.3.2.tgz#0a06ed1357480e4e90bbe826aa3159c7e8bc85b3"
integrity sha512-d3wUIrKK8OYUPpgY3FJdb2I3xoDLtia7s2hhNfVUvQMldhw/xivmbtrPlkDdtsOjXa/SXKNhJT45uiS1QOhqVg==
-browserslist-config-cozy@^0.4.0:
- version "0.4.0"
- resolved "https://registry.yarnpkg.com/browserslist-config-cozy/-/browserslist-config-cozy-0.4.0.tgz#0b3fd831ce59c69e70b799a4e57a206535468878"
- integrity sha512-t2q4UoWotfnT9Zw/GKXgSh0nMyvUCQEji+EObSQXsUCnEwhac8Ae3AJYd2ySsEHZ/ufEX8f6kR6jPbWJqBpUUw==
+browserslist-config-cozy@^0.5.0:
+ version "0.5.0"
+ resolved "https://registry.yarnpkg.com/browserslist-config-cozy/-/browserslist-config-cozy-0.5.0.tgz#e62ba62dcef91fde9742faa7dec98e08bf8c0d51"
+ integrity sha512-R3l2v6LqWuoUEDIt0U3dFtObOcBgkCrs6YUB4GLF3C1oE26ltJEBpz3DUQRmIcWrjKQOTKlGHe9MgDsqyuxFNA==
browserslist@^4.11.1, browserslist@^4.20.2, browserslist@^4.21.0, browserslist@^4.3.4:
version "4.21.1"
@@ -4581,6 +4717,13 @@ builtins@^1.0.3:
resolved "https://registry.yarnpkg.com/builtins/-/builtins-1.0.3.tgz#cb94faeb61c8696451db36534e1422f94f0aee88"
integrity sha512-uYBjakWipfaO/bXI7E8rq6kpwHRZK5cNYrUv2OzZSI/FvmdMyXJ2tG9dKcjEC5YHmHpUAwsargWIZNWdxb/bnQ==
+bundle-name@^3.0.0:
+ version "3.0.0"
+ resolved "https://registry.yarnpkg.com/bundle-name/-/bundle-name-3.0.0.tgz#ba59bcc9ac785fb67ccdbf104a2bf60c099f0e1a"
+ integrity sha512-PKA4BeSvBpQKQ8iPOGCSiell+N8P+Tf1DlwqmYhpe2gAhKPHn8EYOxVT+ShuGmhg8lN8XiSlS80yiExKXrURlw==
+ dependencies:
+ run-applescript "^5.0.0"
+
bundlemon-utils@^1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/bundlemon-utils/-/bundlemon-utils-1.0.0.tgz#9c3e10f09107568913db2e69a3d3317a82b00633"
@@ -4701,6 +4844,15 @@ call-bind@^1.0.0, call-bind@^1.0.2:
function-bind "^1.1.1"
get-intrinsic "^1.0.2"
+call-bind@^1.0.4, call-bind@^1.0.5:
+ version "1.0.5"
+ resolved "https://registry.yarnpkg.com/call-bind/-/call-bind-1.0.5.tgz#6fa2b7845ce0ea49bf4d8b9ef64727a2c2e2e513"
+ integrity sha512-C3nQxfFZxFRVoJoGKKI8y3MOEo129NQ+FgQ08iye+Mk4zNZZGdjfs06bVTr+DBSlA66Q2VEcMki/cUCP4SercQ==
+ dependencies:
+ function-bind "^1.1.2"
+ get-intrinsic "^1.2.1"
+ set-function-length "^1.1.1"
+
caller-callsite@^2.0.0:
version "2.0.0"
resolved "https://registry.yarnpkg.com/caller-callsite/-/caller-callsite-2.0.0.tgz#847e0fce0a223750a9a027c54b33731ad3154134"
@@ -4810,7 +4962,7 @@ chalk@^2.0.0, chalk@^2.1.0, chalk@^2.3.0, chalk@^2.4.1, chalk@^2.4.2:
escape-string-regexp "^1.0.5"
supports-color "^5.3.0"
-chalk@^4.0.0, chalk@^4.1.1:
+chalk@^4.0.0, chalk@^4.1.0, chalk@^4.1.1:
version "4.1.2"
resolved "https://registry.yarnpkg.com/chalk/-/chalk-4.1.2.tgz#aac4e2b7734a740867aeb16bf02aad556a1e7a01"
integrity sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==
@@ -5719,10 +5871,10 @@ cozy-app-publish@^0.27.2:
request "^2.88.0"
tar "^4.4.13"
-cozy-app-publish@^0.31.0:
- version "0.31.0"
- resolved "https://registry.yarnpkg.com/cozy-app-publish/-/cozy-app-publish-0.31.0.tgz#c32a2307ce4c52a52d3f559a9df93f4c9ba1257f"
- integrity sha512-JXU1z5LtjNIQXsNY9xmFQWjMOkBR4pxoESXYrOONAlsdNvDlaKY46AayT8dz/fzlIIr85ibEoU9fvuno2SmDtA==
+cozy-app-publish@^0.33.0:
+ version "0.33.0"
+ resolved "https://registry.yarnpkg.com/cozy-app-publish/-/cozy-app-publish-0.33.0.tgz#889f68b9fe0b88db01c141c706ba7570e41f373c"
+ integrity sha512-qNl517FBbXznnxrcdSuslt1Gj/E2SzHhxGk6xBOQjoqUbZ7+y460/GrTSi1krsOqxN1ev/aMeDmcTK706OFA2g==
dependencies:
argparse "^2.0.1"
chalk "^2.4.2"
@@ -5794,16 +5946,16 @@ cozy-client@29.2.0:
sift "^6.0.0"
url-search-params-polyfill "^8.0.0"
-cozy-client@35.6.0:
- version "35.6.0"
- resolved "https://registry.yarnpkg.com/cozy-client/-/cozy-client-35.6.0.tgz#f052a020f9f3bf19a85448d72c38d182c08e8da3"
- integrity sha512-kDmUXWC9tV+vgqixhKigpnb8AmNUzZLgP6tF8SW5O50/TlORHLVvNlLg63m40ApDSMK1TaCFe+zSkYnF6/ojMQ==
+cozy-client@40.6.0:
+ version "40.6.0"
+ resolved "https://registry.yarnpkg.com/cozy-client/-/cozy-client-40.6.0.tgz#69fb48acd23fc34c5b50e1e22533090cde7a42fa"
+ integrity sha512-iNpEzbU93EVW/0KybtzqIPTz3f+JbnlaT0mLmdoBBLPM+NUQFNx2FeV1q8l8qzVjVG/yvFtcE7kBDRswpocc2A==
dependencies:
"@cozy/minilog" "1.0.0"
"@types/jest" "^26.0.20"
"@types/lodash" "^4.14.170"
btoa "^1.2.1"
- cozy-stack-client "^35.6.0"
+ cozy-stack-client "^40.2.1"
date-fns "2.29.3"
json-stable-stringify "^1.0.1"
lodash "^4.17.13"
@@ -6108,19 +6260,19 @@ cozy-stack-client@^33.4.0:
mime "^2.4.0"
qs "^6.7.0"
-cozy-stack-client@^35.6.0:
- version "35.6.0"
- resolved "https://registry.yarnpkg.com/cozy-stack-client/-/cozy-stack-client-35.6.0.tgz#9d650adc7f3661e2328780cacab87b7060f8ef4c"
- integrity sha512-EVnRHemYHv9NXFeVP003QQ04OpHrcQIp8RQk4zAyS5Qm8dASagF5hZed4K6C+Fs4Z7qSYmP1GRM2zmqiqU3RfQ==
+cozy-stack-client@^40.2.1:
+ version "40.2.1"
+ resolved "https://registry.yarnpkg.com/cozy-stack-client/-/cozy-stack-client-40.2.1.tgz#ce67d260226d7cd9f4314c15428880fd87016812"
+ integrity sha512-BMhIn1/3y2zzEYx4WmIlMcGUrzfKj7fRZdtrIjYimNapW0Xsy6nJlDCInA3cH1tNKqKBMIC5F4UQn3vTo/9hGg==
dependencies:
detect-node "^2.0.4"
mime "^2.4.0"
qs "^6.7.0"
-cozy-ui@81.5.0:
- version "81.5.0"
- resolved "https://registry.yarnpkg.com/cozy-ui/-/cozy-ui-81.5.0.tgz#e462a710af3121f30fb2cd908e2154ded23d7dde"
- integrity sha512-tHho2iw46CIPsn20aOHExSj3+B/7bNbF6fEFcmaKVj8H2TNbk9Kq6znZ0vO1A7zP2pv7Kj3TGqwbc5zkjwWNYw==
+cozy-ui@81.9.0:
+ version "81.9.0"
+ resolved "https://registry.yarnpkg.com/cozy-ui/-/cozy-ui-81.9.0.tgz#ad6e79cb608851676cf1f80093df500a943f06bf"
+ integrity sha512-f++0oOvAt1JNRrmiilFFu9ZdhnYl8Iv6x+fBTyw8ertRhTg5YdFHdYsrK6lDjnm6AxXNU1mpnKX4GvrKlaV46A==
dependencies:
"@babel/runtime" "^7.3.4"
"@material-ui/core" "4.12.3"
@@ -6335,6 +6487,11 @@ css-what@^6.0.1, css-what@^6.1.0:
resolved "https://registry.yarnpkg.com/css-what/-/css-what-6.1.0.tgz#fb5effcf76f1ddea2c81bdfaa4de44e79bac70f4"
integrity sha512-HTUrgRJ7r4dsZKU6GjmpfRK1O76h97Z8MfS1G0FozR+oF2kG6Vfe8JE6zwrkbxigziPHinCJ+gCPjA9EaBDtRw==
+css.escape@^1.5.1:
+ version "1.5.1"
+ resolved "https://registry.yarnpkg.com/css.escape/-/css.escape-1.5.1.tgz#42e27d4fa04ae32f931a4b4d4191fa9cddee97cb"
+ integrity sha512-YUifsXXuknHlUsmlgyY0PKzgPOr7/FjCePfHNt0jxm83wHZi44VDMQ7/fGNkjY3/jV1MC+1CmZbaHzugyeRtpg==
+
css@^2.0.0:
version "2.2.4"
resolved "https://registry.yarnpkg.com/css/-/css-2.2.4.tgz#c646755c73971f2bba6a601e2cf2fd71b1298929"
@@ -6652,6 +6809,11 @@ d3@^6.0.0:
d3-transition "2"
d3-zoom "2"
+damerau-levenshtein@^1.0.8:
+ version "1.0.8"
+ resolved "https://registry.yarnpkg.com/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz#b43d286ccbd36bc5b2f7ed41caf2d0aba1f8a6e7"
+ integrity sha512-sdQSFB7+llfUcQHUQO3+B8ERRj0Oa4w9POWMI/puGtuf7gFywGmkaLCElnudfTiKZV+NvHqL0ifzdrI8Ro7ESA==
+
dargs@^7.0.0:
version "7.0.0"
resolved "https://registry.yarnpkg.com/dargs/-/dargs-7.0.0.tgz#04015c41de0bcb69ec84050f3d9be0caf8d6d5cc"
@@ -6766,6 +6928,30 @@ deep-equal@^1.0.1:
object-keys "^1.1.1"
regexp.prototype.flags "^1.2.0"
+deep-equal@^2.0.5:
+ version "2.2.2"
+ resolved "https://registry.yarnpkg.com/deep-equal/-/deep-equal-2.2.2.tgz#9b2635da569a13ba8e1cc159c2f744071b115daa"
+ integrity sha512-xjVyBf0w5vH0I42jdAZzOKVldmPgSulmiyPRywoyq7HXC9qdgo17kxJE+rdnif5Tz6+pIrpJI8dCpMNLIGkUiA==
+ dependencies:
+ array-buffer-byte-length "^1.0.0"
+ call-bind "^1.0.2"
+ es-get-iterator "^1.1.3"
+ get-intrinsic "^1.2.1"
+ is-arguments "^1.1.1"
+ is-array-buffer "^3.0.2"
+ is-date-object "^1.0.5"
+ is-regex "^1.1.4"
+ is-shared-array-buffer "^1.0.2"
+ isarray "^2.0.5"
+ object-is "^1.1.5"
+ object-keys "^1.1.1"
+ object.assign "^4.1.4"
+ regexp.prototype.flags "^1.5.0"
+ side-channel "^1.0.4"
+ which-boxed-primitive "^1.0.2"
+ which-collection "^1.0.1"
+ which-typed-array "^1.1.9"
+
deep-equal@~0.2.1:
version "0.2.2"
resolved "https://registry.yarnpkg.com/deep-equal/-/deep-equal-0.2.2.tgz#84b745896f34c684e98f2ce0e42abaf43bba017d"
@@ -6786,6 +6972,24 @@ deepmerge@^4.2.2:
resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-4.2.2.tgz#44d2ea3679b8f4d4ffba33f03d865fc1e7bf4955"
integrity sha512-FJ3UgI4gIl+PHZm53knsuSFpE+nESMr7M4v9QcgB7S63Kj/6WqMiFQJpBBYz1Pt+66bZpP3Q7Lye0Oo9MPKEdg==
+default-browser-id@^3.0.0:
+ version "3.0.0"
+ resolved "https://registry.yarnpkg.com/default-browser-id/-/default-browser-id-3.0.0.tgz#bee7bbbef1f4e75d31f98f4d3f1556a14cea790c"
+ integrity sha512-OZ1y3y0SqSICtE8DE4S8YOE9UZOJ8wO16fKWVP5J1Qz42kV9jcnMVFrEE/noXb/ss3Q4pZIH79kxofzyNNtUNA==
+ dependencies:
+ bplist-parser "^0.2.0"
+ untildify "^4.0.0"
+
+default-browser@^4.0.0:
+ version "4.0.0"
+ resolved "https://registry.yarnpkg.com/default-browser/-/default-browser-4.0.0.tgz#53c9894f8810bf86696de117a6ce9085a3cbc7da"
+ integrity sha512-wX5pXO1+BrhMkSbROFsyxUm0i/cJEScyNhA4PPxc41ICuv05ZZB/MX28s8aZx6xjmatvebIapF6hLEKEcpneUA==
+ dependencies:
+ bundle-name "^3.0.0"
+ default-browser-id "^3.0.0"
+ execa "^7.1.1"
+ titleize "^3.0.0"
+
default-gateway@^4.2.0:
version "4.2.0"
resolved "https://registry.yarnpkg.com/default-gateway/-/default-gateway-4.2.0.tgz#167104c7500c2115f6dd69b0a536bb8ed720552b"
@@ -6801,11 +7005,34 @@ defaults@^1.0.3:
dependencies:
clone "^1.0.2"
+define-data-property@^1.0.1:
+ version "1.1.0"
+ resolved "https://registry.yarnpkg.com/define-data-property/-/define-data-property-1.1.0.tgz#0db13540704e1d8d479a0656cf781267531b9451"
+ integrity sha512-UzGwzcjyv3OtAvolTj1GoyNYzfFR+iqbGjcnBEENZVCpM4/Ng1yhGNvS3lR/xDS74Tb2wGG9WzNSNIOS9UVb2g==
+ dependencies:
+ get-intrinsic "^1.2.1"
+ gopd "^1.0.1"
+ has-property-descriptors "^1.0.0"
+
+define-data-property@^1.1.1:
+ version "1.1.1"
+ resolved "https://registry.yarnpkg.com/define-data-property/-/define-data-property-1.1.1.tgz#c35f7cd0ab09883480d12ac5cb213715587800b3"
+ integrity sha512-E7uGkTzkk1d0ByLeSc6ZsFS79Axg+m1P/VsgYsxHgiuc3tFSj+MjMIwe90FC4lOAZzNBdY7kkO2P2wKdsQ1vgQ==
+ dependencies:
+ get-intrinsic "^1.2.1"
+ gopd "^1.0.1"
+ has-property-descriptors "^1.0.0"
+
define-lazy-prop@^2.0.0:
version "2.0.0"
resolved "https://registry.yarnpkg.com/define-lazy-prop/-/define-lazy-prop-2.0.0.tgz#3f7ae421129bcaaac9bc74905c98a0009ec9ee7f"
integrity sha512-Ds09qNh8yw3khSjiJjiUInaGX9xlqZDY7JVryGxdxV7NPeuqQfplOpQ66yJFZut3jLa5zOwkXw1g9EI2uKh4Og==
+define-lazy-prop@^3.0.0:
+ version "3.0.0"
+ resolved "https://registry.yarnpkg.com/define-lazy-prop/-/define-lazy-prop-3.0.0.tgz#dbb19adfb746d7fc6d734a06b72f4a00d021255f"
+ integrity sha512-N+MeXYoqr3pOgn8xfyRPREN7gHakLYjhsHhWGT3fWAiL4IkAt0iDw14QiiEm2bE30c5XX5q0FtAA3CK5f9/BUg==
+
define-properties@^1.1.2, define-properties@^1.1.3, define-properties@^1.1.4:
version "1.1.4"
resolved "https://registry.yarnpkg.com/define-properties/-/define-properties-1.1.4.tgz#0b14d7bd7fbeb2f3572c3a7eda80ea5d57fb05b1"
@@ -6814,6 +7041,15 @@ define-properties@^1.1.2, define-properties@^1.1.3, define-properties@^1.1.4:
has-property-descriptors "^1.0.0"
object-keys "^1.1.1"
+define-properties@^1.2.0, define-properties@^1.2.1:
+ version "1.2.1"
+ resolved "https://registry.yarnpkg.com/define-properties/-/define-properties-1.2.1.tgz#10781cc616eb951a80a034bafcaa7377f6af2b6c"
+ integrity sha512-8QmQKqEASLd5nx0U1B1okLElbUuuttJ/AnYmRXbbbGDWh6uS208EjD4Xqq/I9wK7u0v6O08XhTWnt5XtEbR6Dg==
+ dependencies:
+ define-data-property "^1.0.1"
+ has-property-descriptors "^1.0.0"
+ object-keys "^1.1.1"
+
define-property@^0.2.5:
version "0.2.5"
resolved "https://registry.yarnpkg.com/define-property/-/define-property-0.2.5.tgz#c35b1ef918ec3c990f9a5bc57be04aacec5c8116"
@@ -6869,6 +7105,11 @@ depd@~1.1.2:
resolved "https://registry.yarnpkg.com/depd/-/depd-1.1.2.tgz#9bcd52e14c097763e749b274c4346ed2e560b5a9"
integrity sha512-7emPTl6Dpo6JRXOXjLRxck+FlLRX5847cLKEn00PLAgc3g2hTZZgr+e4c2v6QpSmLeFP3n5yUo7ft6avBK/5jQ==
+dequal@^2.0.3:
+ version "2.0.3"
+ resolved "https://registry.yarnpkg.com/dequal/-/dequal-2.0.3.tgz#2644214f1997d39ed0ee0ece72335490a7ac67be"
+ integrity sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==
+
des.js@^1.0.0:
version "1.0.1"
resolved "https://registry.yarnpkg.com/des.js/-/des.js-1.0.1.tgz#5382142e1bdc53f85d86d53e5f4aa7deb91e0843"
@@ -6945,11 +7186,6 @@ dir-glob@^3.0.1:
dependencies:
path-type "^4.0.0"
-discontinuous-range@1.0.0:
- version "1.0.0"
- resolved "https://registry.yarnpkg.com/discontinuous-range/-/discontinuous-range-1.0.0.tgz#e38331f0844bba49b9a9cb71c771585aab1bc65a"
- integrity sha512-c68LpLbO+7kP/b1Hr1qs8/BJ09F5khZGTxqxZuhzxpmwJKOgRFHJWIb9/KmqnqHhLdO55aOxFH/EGBvUQbL/RQ==
-
dlv@^1.1.0:
version "1.1.3"
resolved "https://registry.yarnpkg.com/dlv/-/dlv-1.1.3.tgz#5c198a8a11453596e751494d49874bc7732f2e79"
@@ -6989,6 +7225,11 @@ doctrine@^3.0.0:
dependencies:
esutils "^2.0.2"
+dom-accessibility-api@^0.5.6, dom-accessibility-api@^0.5.9:
+ version "0.5.16"
+ resolved "https://registry.yarnpkg.com/dom-accessibility-api/-/dom-accessibility-api-0.5.16.tgz#5a7429e6066eb3664d911e33fb0e45de8eb08453"
+ integrity sha512-X7BJ2yElsnOJ30pZF4uIIDfBEVgF4XEBxL9Bxhy6dnrm5hkzqmsWHGTiHqRiITNhMyFLyAiWndIJP7Z1NTteDg==
+
dom-converter@^0.2.0:
version "0.2.0"
resolved "https://registry.yarnpkg.com/dom-converter/-/dom-converter-0.2.0.tgz#6721a9daee2e293682955b6afe416771627bb768"
@@ -7290,79 +7531,6 @@ entities@^4.2.0, entities@^4.3.0, entities@^4.4.0:
resolved "https://registry.yarnpkg.com/entities/-/entities-4.4.0.tgz#97bdaba170339446495e653cfd2db78962900174"
integrity sha512-oYp7156SP8LkeGD0GF85ad1X9Ai79WtRsZ2gxJqtBuzH+98YUV6jkHEKlZkMbcrjJjIVJNIDP/3WL9wQkoPbWA==
-enzyme-adapter-react-16@1.15.6:
- version "1.15.6"
- resolved "https://registry.yarnpkg.com/enzyme-adapter-react-16/-/enzyme-adapter-react-16-1.15.6.tgz#fd677a658d62661ac5afd7f7f541f141f8085901"
- integrity sha512-yFlVJCXh8T+mcQo8M6my9sPgeGzj85HSHi6Apgf1Cvq/7EL/J9+1JoJmJsRxZgyTvPMAqOEpRSu/Ii/ZpyOk0g==
- dependencies:
- enzyme-adapter-utils "^1.14.0"
- enzyme-shallow-equal "^1.0.4"
- has "^1.0.3"
- object.assign "^4.1.2"
- object.values "^1.1.2"
- prop-types "^15.7.2"
- react-is "^16.13.1"
- react-test-renderer "^16.0.0-0"
- semver "^5.7.0"
-
-enzyme-adapter-utils@^1.14.0:
- version "1.14.0"
- resolved "https://registry.yarnpkg.com/enzyme-adapter-utils/-/enzyme-adapter-utils-1.14.0.tgz#afbb0485e8033aa50c744efb5f5711e64fbf1ad0"
- integrity sha512-F/z/7SeLt+reKFcb7597IThpDp0bmzcH1E9Oabqv+o01cID2/YInlqHbFl7HzWBl4h3OdZYedtwNDOmSKkk0bg==
- dependencies:
- airbnb-prop-types "^2.16.0"
- function.prototype.name "^1.1.3"
- has "^1.0.3"
- object.assign "^4.1.2"
- object.fromentries "^2.0.3"
- prop-types "^15.7.2"
- semver "^5.7.1"
-
-enzyme-shallow-equal@^1.0.1, enzyme-shallow-equal@^1.0.4:
- version "1.0.4"
- resolved "https://registry.yarnpkg.com/enzyme-shallow-equal/-/enzyme-shallow-equal-1.0.4.tgz#b9256cb25a5f430f9bfe073a84808c1d74fced2e"
- integrity sha512-MttIwB8kKxypwHvRynuC3ahyNc+cFbR8mjVIltnmzQ0uKGqmsfO4bfBuLxb0beLNPhjblUEYvEbsg+VSygvF1Q==
- dependencies:
- has "^1.0.3"
- object-is "^1.1.2"
-
-enzyme-to-json@^3.6.2:
- version "3.6.2"
- resolved "https://registry.yarnpkg.com/enzyme-to-json/-/enzyme-to-json-3.6.2.tgz#94f85c413bcae8ab67be53b0a94b69a560e27823"
- integrity sha512-Ynm6Z6R6iwQ0g2g1YToz6DWhxVnt8Dy1ijR2zynRKxTyBGA8rCDXU3rs2Qc4OKvUvc2Qoe1bcFK6bnPs20TrTg==
- dependencies:
- "@types/cheerio" "^0.22.22"
- lodash "^4.17.21"
- react-is "^16.12.0"
-
-enzyme@3.11.0:
- version "3.11.0"
- resolved "https://registry.yarnpkg.com/enzyme/-/enzyme-3.11.0.tgz#71d680c580fe9349f6f5ac6c775bc3e6b7a79c28"
- integrity sha512-Dw8/Gs4vRjxY6/6i9wU0V+utmQO9kvh9XLnz3LIudviOnVYDEe2ec+0k+NQoMamn1VrjKgCUOWj5jG/5M5M0Qw==
- dependencies:
- array.prototype.flat "^1.2.3"
- cheerio "^1.0.0-rc.3"
- enzyme-shallow-equal "^1.0.1"
- function.prototype.name "^1.1.2"
- has "^1.0.3"
- html-element-map "^1.2.0"
- is-boolean-object "^1.0.1"
- is-callable "^1.1.5"
- is-number-object "^1.0.4"
- is-regex "^1.0.5"
- is-string "^1.0.5"
- is-subset "^0.1.1"
- lodash.escape "^4.0.1"
- lodash.isequal "^4.5.0"
- object-inspect "^1.7.0"
- object-is "^1.0.2"
- object.assign "^4.1.0"
- object.entries "^1.1.1"
- object.values "^1.1.1"
- raf "^3.4.1"
- rst-selector-parser "^2.2.3"
- string.prototype.trim "^1.2.1"
-
errno@^0.1.3, errno@~0.1.7:
version "0.1.8"
resolved "https://registry.yarnpkg.com/errno/-/errno-0.1.8.tgz#8bb3e9c7d463be4976ff888f76b4809ebc2e811f"
@@ -7377,7 +7545,7 @@ error-ex@^1.2.0, error-ex@^1.3.1:
dependencies:
is-arrayish "^0.2.1"
-es-abstract@^1.17.2, es-abstract@^1.19.0, es-abstract@^1.19.1, es-abstract@^1.19.2, es-abstract@^1.19.4, es-abstract@^1.19.5, es-abstract@^1.20.1:
+es-abstract@^1.17.2, es-abstract@^1.19.0, es-abstract@^1.19.1, es-abstract@^1.19.2, es-abstract@^1.19.5, es-abstract@^1.20.1:
version "1.20.1"
resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.20.1.tgz#027292cd6ef44bd12b1913b828116f54787d1814"
integrity sha512-WEm2oBhfoI2sImeM4OF2zE2V3BYdSF+KnSi9Sidz51fQHd7+JuF8Xgcj9/0o+OWeIeIS/MiuNnlruQrJf16GQA==
@@ -7446,11 +7614,91 @@ es-abstract@^1.20.4:
unbox-primitive "^1.0.2"
which-typed-array "^1.1.9"
+es-abstract@^1.22.1:
+ version "1.22.3"
+ resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.22.3.tgz#48e79f5573198de6dee3589195727f4f74bc4f32"
+ integrity sha512-eiiY8HQeYfYH2Con2berK+To6GrK2RxbPawDkGq4UiCQQfZHb6wX9qQqkbpPqaxQFcl8d9QzZqo0tGE0VcrdwA==
+ dependencies:
+ array-buffer-byte-length "^1.0.0"
+ arraybuffer.prototype.slice "^1.0.2"
+ available-typed-arrays "^1.0.5"
+ call-bind "^1.0.5"
+ es-set-tostringtag "^2.0.1"
+ es-to-primitive "^1.2.1"
+ function.prototype.name "^1.1.6"
+ get-intrinsic "^1.2.2"
+ get-symbol-description "^1.0.0"
+ globalthis "^1.0.3"
+ gopd "^1.0.1"
+ has-property-descriptors "^1.0.0"
+ has-proto "^1.0.1"
+ has-symbols "^1.0.3"
+ hasown "^2.0.0"
+ internal-slot "^1.0.5"
+ is-array-buffer "^3.0.2"
+ is-callable "^1.2.7"
+ is-negative-zero "^2.0.2"
+ is-regex "^1.1.4"
+ is-shared-array-buffer "^1.0.2"
+ is-string "^1.0.7"
+ is-typed-array "^1.1.12"
+ is-weakref "^1.0.2"
+ object-inspect "^1.13.1"
+ object-keys "^1.1.1"
+ object.assign "^4.1.4"
+ regexp.prototype.flags "^1.5.1"
+ safe-array-concat "^1.0.1"
+ safe-regex-test "^1.0.0"
+ string.prototype.trim "^1.2.8"
+ string.prototype.trimend "^1.0.7"
+ string.prototype.trimstart "^1.0.7"
+ typed-array-buffer "^1.0.0"
+ typed-array-byte-length "^1.0.0"
+ typed-array-byte-offset "^1.0.0"
+ typed-array-length "^1.0.4"
+ unbox-primitive "^1.0.2"
+ which-typed-array "^1.1.13"
+
es-array-method-boxes-properly@^1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/es-array-method-boxes-properly/-/es-array-method-boxes-properly-1.0.0.tgz#873f3e84418de4ee19c5be752990b2e44718d09e"
integrity sha512-wd6JXUmyHmt8T5a2xreUwKcGPq6f1f+WwIJkijUqiGcJz1qqnZgP6XIK+QyIWU5lT7imeNxUll48bziG+TSYcA==
+es-get-iterator@^1.1.3:
+ version "1.1.3"
+ resolved "https://registry.yarnpkg.com/es-get-iterator/-/es-get-iterator-1.1.3.tgz#3ef87523c5d464d41084b2c3c9c214f1199763d6"
+ integrity sha512-sPZmqHBe6JIiTfN5q2pEi//TwxmAFHwj/XEuYjTuse78i8KxaqMTTzxPoFKuzRpDpTJ+0NAbpfenkmH2rePtuw==
+ dependencies:
+ call-bind "^1.0.2"
+ get-intrinsic "^1.1.3"
+ has-symbols "^1.0.3"
+ is-arguments "^1.1.1"
+ is-map "^2.0.2"
+ is-set "^2.0.2"
+ is-string "^1.0.7"
+ isarray "^2.0.5"
+ stop-iteration-iterator "^1.0.0"
+
+es-iterator-helpers@^1.0.12, es-iterator-helpers@^1.0.15:
+ version "1.0.15"
+ resolved "https://registry.yarnpkg.com/es-iterator-helpers/-/es-iterator-helpers-1.0.15.tgz#bd81d275ac766431d19305923707c3efd9f1ae40"
+ integrity sha512-GhoY8uYqd6iwUl2kgjTm4CZAf6oo5mHK7BPqx3rKgx893YSsy0LGHV6gfqqQvZt/8xM8xeOnfXBCfqclMKkJ5g==
+ dependencies:
+ asynciterator.prototype "^1.0.0"
+ call-bind "^1.0.2"
+ define-properties "^1.2.1"
+ es-abstract "^1.22.1"
+ es-set-tostringtag "^2.0.1"
+ function-bind "^1.1.1"
+ get-intrinsic "^1.2.1"
+ globalthis "^1.0.3"
+ has-property-descriptors "^1.0.0"
+ has-proto "^1.0.1"
+ has-symbols "^1.0.3"
+ internal-slot "^1.0.5"
+ iterator.prototype "^1.1.2"
+ safe-array-concat "^1.0.1"
+
es-set-tostringtag@^2.0.1:
version "2.0.1"
resolved "https://registry.yarnpkg.com/es-set-tostringtag/-/es-set-tostringtag-2.0.1.tgz#338d502f6f674301d710b80c8592de8a15f09cd8"
@@ -7559,10 +7807,10 @@ eslint-config-prettier@4.3.0:
dependencies:
get-stdin "^6.0.0"
-eslint-config-prettier@^8.8.0:
- version "8.8.0"
- resolved "https://registry.yarnpkg.com/eslint-config-prettier/-/eslint-config-prettier-8.8.0.tgz#bfda738d412adc917fd7b038857110efe98c9348"
- integrity sha512-wLbQiFre3tdGgpDv67NQKnJuTlcUVYHas3k+DZCc2U2BadthoEY4B7hLPvAxaqdyOGCzuLfii2fqGph10va7oA==
+eslint-config-prettier@^9.0.0:
+ version "9.0.0"
+ resolved "https://registry.yarnpkg.com/eslint-config-prettier/-/eslint-config-prettier-9.0.0.tgz#eb25485946dd0c66cd216a46232dc05451518d1f"
+ integrity sha512-IcJsTkJae2S35pRsRAwoCE+925rJJStOdkKnLVgtE+tEpqU0EVVM7OqrwxqgptKdX29NUwC82I5pXsGFIgSevw==
eslint-loader@^4.0.2:
version "4.0.2"
@@ -7597,6 +7845,28 @@ eslint-plugin-jsdoc@^46.8.2:
semver "^7.5.4"
spdx-expression-parse "^3.0.1"
+eslint-plugin-jsx-a11y@^6.8.0:
+ version "6.8.0"
+ resolved "https://registry.yarnpkg.com/eslint-plugin-jsx-a11y/-/eslint-plugin-jsx-a11y-6.8.0.tgz#2fa9c701d44fcd722b7c771ec322432857fcbad2"
+ integrity sha512-Hdh937BS3KdwwbBaKd5+PLCOmYY6U4f2h9Z2ktwtNKvIdIEu137rjYbcb9ApSbVJfWxANNuiKTD/9tOKjK9qOA==
+ dependencies:
+ "@babel/runtime" "^7.23.2"
+ aria-query "^5.3.0"
+ array-includes "^3.1.7"
+ array.prototype.flatmap "^1.3.2"
+ ast-types-flow "^0.0.8"
+ axe-core "=4.7.0"
+ axobject-query "^3.2.1"
+ damerau-levenshtein "^1.0.8"
+ emoji-regex "^9.2.2"
+ es-iterator-helpers "^1.0.15"
+ hasown "^2.0.0"
+ jsx-ast-utils "^3.3.5"
+ language-tags "^1.0.9"
+ minimatch "^3.1.2"
+ object.entries "^1.1.7"
+ object.fromentries "^2.0.7"
+
eslint-plugin-prettier@3.1.2:
version "3.1.2"
resolved "https://registry.yarnpkg.com/eslint-plugin-prettier/-/eslint-plugin-prettier-3.1.2.tgz#432e5a667666ab84ce72f945c72f77d996a5c9ba"
@@ -7604,12 +7874,13 @@ eslint-plugin-prettier@3.1.2:
dependencies:
prettier-linter-helpers "^1.0.0"
-eslint-plugin-prettier@^4.2.1:
- version "4.2.1"
- resolved "https://registry.yarnpkg.com/eslint-plugin-prettier/-/eslint-plugin-prettier-4.2.1.tgz#651cbb88b1dab98bfd42f017a12fa6b2d993f94b"
- integrity sha512-f/0rXLXUt0oFYs8ra4w49wYZBG5GKZpAYsJSm6rnYL5uVDjd+zowwMwVZHnAjf4edNrKpCDYfXDgmRE/Ak7QyQ==
+eslint-plugin-prettier@^5.0.0:
+ version "5.0.0"
+ resolved "https://registry.yarnpkg.com/eslint-plugin-prettier/-/eslint-plugin-prettier-5.0.0.tgz#6887780ed95f7708340ec79acfdf60c35b9be57a"
+ integrity sha512-AgaZCVuYDXHUGxj/ZGu1u8H8CYgDY3iG6w5kUFw4AzMVXzB7VvbKgYR4nATIN+OvUrghMbiDLeimVjVY5ilq3w==
dependencies:
prettier-linter-helpers "^1.0.0"
+ synckit "^0.8.5"
eslint-plugin-react-hooks@2.3.0:
version "2.3.0"
@@ -7659,15 +7930,16 @@ eslint-plugin-react@7.19.0:
string.prototype.matchall "^4.0.2"
xregexp "^4.3.0"
-eslint-plugin-react@7.32.2:
- version "7.32.2"
- resolved "https://registry.yarnpkg.com/eslint-plugin-react/-/eslint-plugin-react-7.32.2.tgz#e71f21c7c265ebce01bcbc9d0955170c55571f10"
- integrity sha512-t2fBMa+XzonrrNkyVirzKlvn5RXzzPwRHtMvLAtVZrt8oxgnTQaYbU6SXTOO1mwQgp1y5+toMSKInnzGr0Knqg==
+eslint-plugin-react@7.33.2:
+ version "7.33.2"
+ resolved "https://registry.yarnpkg.com/eslint-plugin-react/-/eslint-plugin-react-7.33.2.tgz#69ee09443ffc583927eafe86ffebb470ee737608"
+ integrity sha512-73QQMKALArI8/7xGLNI/3LylrEYrlKZSb5C9+q3OtOewTnMQi5cT+aE9E41sLCmli3I9PGGmD1yiZydyo4FEPw==
dependencies:
array-includes "^3.1.6"
array.prototype.flatmap "^1.3.1"
array.prototype.tosorted "^1.1.1"
doctrine "^2.1.0"
+ es-iterator-helpers "^1.0.12"
estraverse "^5.3.0"
jsx-ast-utils "^2.4.1 || ^3.0.0"
minimatch "^3.1.2"
@@ -7677,7 +7949,7 @@ eslint-plugin-react@7.32.2:
object.values "^1.1.6"
prop-types "^15.8.1"
resolve "^2.0.0-next.4"
- semver "^6.3.0"
+ semver "^6.3.1"
string.prototype.matchall "^4.0.8"
eslint-plugin-vue@5.2.3:
@@ -8092,6 +8364,21 @@ execa@^4.0.0:
signal-exit "^3.0.2"
strip-final-newline "^2.0.0"
+execa@^5.0.0:
+ version "5.1.1"
+ resolved "https://registry.yarnpkg.com/execa/-/execa-5.1.1.tgz#f80ad9cbf4298f7bd1d4c9555c21e93741c411dd"
+ integrity sha512-8uSpZZocAZRBAPIEINJj3Lo9HyGitllczc27Eh5YYojjMFMn8yHMDMaUHE2Jqfq05D/wucwI4JGURyXt1vchyg==
+ dependencies:
+ cross-spawn "^7.0.3"
+ get-stream "^6.0.0"
+ human-signals "^2.1.0"
+ is-stream "^2.0.0"
+ merge-stream "^2.0.0"
+ npm-run-path "^4.0.1"
+ onetime "^5.1.2"
+ signal-exit "^3.0.3"
+ strip-final-newline "^2.0.0"
+
execa@^6.1.0:
version "6.1.0"
resolved "https://registry.yarnpkg.com/execa/-/execa-6.1.0.tgz#cea16dee211ff011246556388effa0818394fb20"
@@ -8107,6 +8394,21 @@ execa@^6.1.0:
signal-exit "^3.0.7"
strip-final-newline "^3.0.0"
+execa@^7.1.1:
+ version "7.2.0"
+ resolved "https://registry.yarnpkg.com/execa/-/execa-7.2.0.tgz#657e75ba984f42a70f38928cedc87d6f2d4fe4e9"
+ integrity sha512-UduyVP7TLB5IcAQl+OzLyLcS/l32W/GLg+AhHJ+ow40FOk2U3SAllPwR44v4vmdFwIWqpdwxxpQbF1n5ta9seA==
+ dependencies:
+ cross-spawn "^7.0.3"
+ get-stream "^6.0.1"
+ human-signals "^4.3.0"
+ is-stream "^3.0.0"
+ merge-stream "^2.0.0"
+ npm-run-path "^5.1.0"
+ onetime "^6.0.0"
+ signal-exit "^3.0.7"
+ strip-final-newline "^3.0.0"
+
exit@^0.1.2:
version "0.1.2"
resolved "https://registry.yarnpkg.com/exit/-/exit-0.1.2.tgz#0632638f8d877cc82107d30a0fff1a17cba1cd0c"
@@ -8290,6 +8592,17 @@ fast-glob@^3.2.9:
merge2 "^1.3.0"
micromatch "^4.0.4"
+fast-glob@^3.3.0:
+ version "3.3.1"
+ resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-3.3.1.tgz#784b4e897340f3dbbef17413b3f11acf03c874c4"
+ integrity sha512-kNFPyjhh5cKjrUltxs+wFx+ZkbRaxxmZ+X0ZU31SOsxCEtP9VPgtq2teZw1DebupL5GmDaNQ6yKMMVcM41iqDg==
+ dependencies:
+ "@nodelib/fs.stat" "^2.0.2"
+ "@nodelib/fs.walk" "^1.2.3"
+ glob-parent "^5.1.2"
+ merge2 "^1.3.0"
+ micromatch "^4.0.4"
+
fast-json-stable-stringify@^2.0.0:
version "2.1.0"
resolved "https://registry.yarnpkg.com/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz#874bf69c6f404c2b5d99c481341399fd55892633"
@@ -8707,7 +9020,12 @@ function-bind@^1.1.1:
resolved "https://registry.yarnpkg.com/function-bind/-/function-bind-1.1.1.tgz#a56899d3ea3c9bab874bb9773b7c5ede92f4895d"
integrity sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==
-function.prototype.name@^1.1.2, function.prototype.name@^1.1.3, function.prototype.name@^1.1.5:
+function-bind@^1.1.2:
+ version "1.1.2"
+ resolved "https://registry.yarnpkg.com/function-bind/-/function-bind-1.1.2.tgz#2c02d864d97f3ea6c8830c464cbd11ab6eab7a1c"
+ integrity sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==
+
+function.prototype.name@^1.1.5:
version "1.1.5"
resolved "https://registry.yarnpkg.com/function.prototype.name/-/function.prototype.name-1.1.5.tgz#cce0505fe1ffb80503e6f9e46cc64e46a12a9621"
integrity sha512-uN7m/BzVKQnCUF/iW8jYea67v++2u7m5UgENbHRtdDVclOUP+FMPlCNdmk0h/ysGyo2tavMJEDqJAkJdRa1vMA==
@@ -8717,12 +9035,22 @@ function.prototype.name@^1.1.2, function.prototype.name@^1.1.3, function.prototy
es-abstract "^1.19.0"
functions-have-names "^1.2.2"
+function.prototype.name@^1.1.6:
+ version "1.1.6"
+ resolved "https://registry.yarnpkg.com/function.prototype.name/-/function.prototype.name-1.1.6.tgz#cdf315b7d90ee77a4c6ee216c3c3362da07533fd"
+ integrity sha512-Z5kx79swU5P27WEayXM1tBi5Ze/lbIyiNgU3qyXUOf9b2rgXYyF9Dy9Cx+IQv/Lc8WCG6L82zwUPpSS9hGehIg==
+ dependencies:
+ call-bind "^1.0.2"
+ define-properties "^1.2.0"
+ es-abstract "^1.22.1"
+ functions-have-names "^1.2.3"
+
functional-red-black-tree@^1.0.1:
version "1.0.1"
resolved "https://registry.yarnpkg.com/functional-red-black-tree/-/functional-red-black-tree-1.0.1.tgz#1b0ab3bd553b2a0d6399d29c0e3ea0b252078327"
integrity sha512-dsKNQNdj6xA3T+QlADDA7mOSlX0qiMINjn0cgr+eGHGsbSHzTabcIogz2+p/iqP1Xs6EP/sS2SbqH+brGTbq0g==
-functions-have-names@^1.2.2:
+functions-have-names@^1.2.2, functions-have-names@^1.2.3:
version "1.2.3"
resolved "https://registry.yarnpkg.com/functions-have-names/-/functions-have-names-1.2.3.tgz#0404fe4ee2ba2f607f0e0ec3c80bae994133b834"
integrity sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ==
@@ -8766,6 +9094,26 @@ get-intrinsic@^1.1.3, get-intrinsic@^1.2.0:
has "^1.0.3"
has-symbols "^1.0.3"
+get-intrinsic@^1.2.1:
+ version "1.2.1"
+ resolved "https://registry.yarnpkg.com/get-intrinsic/-/get-intrinsic-1.2.1.tgz#d295644fed4505fc9cde952c37ee12b477a83d82"
+ integrity sha512-2DcsyfABl+gVHEfCOaTrWgyt+tb6MSEGmKq+kI5HwLbIYgjgmMcV8KQ41uaKz1xxUcn9tJtgFbQUEVcEbd0FYw==
+ dependencies:
+ function-bind "^1.1.1"
+ has "^1.0.3"
+ has-proto "^1.0.1"
+ has-symbols "^1.0.3"
+
+get-intrinsic@^1.2.2:
+ version "1.2.2"
+ resolved "https://registry.yarnpkg.com/get-intrinsic/-/get-intrinsic-1.2.2.tgz#281b7622971123e1ef4b3c90fd7539306da93f3b"
+ integrity sha512-0gSo4ml/0j98Y3lngkFEot/zhiCeWsbYIlZ+uZOVgzLyLaUw7wxUL+nCTP0XJvJg1AXulJRI3UJi8GsbDuxdGA==
+ dependencies:
+ function-bind "^1.1.2"
+ has-proto "^1.0.1"
+ has-symbols "^1.0.3"
+ hasown "^2.0.0"
+
get-nonce@^1.0.0:
version "1.0.1"
resolved "https://registry.yarnpkg.com/get-nonce/-/get-nonce-1.0.1.tgz#fdf3f0278073820d2ce9426c18f07481b1e0cdf3"
@@ -8805,7 +9153,7 @@ get-stream@^5.0.0:
dependencies:
pump "^3.0.0"
-get-stream@^6.0.1:
+get-stream@^6.0.0, get-stream@^6.0.1:
version "6.0.1"
resolved "https://registry.yarnpkg.com/get-stream/-/get-stream-6.0.1.tgz#a262d8eef67aced57c2852ad6167526a43cbf7b7"
integrity sha512-ts6Wi+2j3jQjqi70w5AlN8DFnkSwC+MqmxEzdEALB2qXZYV3X/b1CTfgPLGJNMeAWxdPfU8FO1ms3NUfaHCPYg==
@@ -9197,6 +9545,13 @@ hash.js@^1.0.0, hash.js@^1.0.3:
inherits "^2.0.3"
minimalistic-assert "^1.0.1"
+hasown@^2.0.0:
+ version "2.0.0"
+ resolved "https://registry.yarnpkg.com/hasown/-/hasown-2.0.0.tgz#f4c513d454a57b7c7e1650778de226b11700546c"
+ integrity sha512-vUptKVTpIJhcczKBbgnS+RtcuYMB8+oNzPK2/Hp3hanz8JmpATdmmgLgSaadVREkDm+e2giHwY3ZRkyjSIDDFA==
+ dependencies:
+ function-bind "^1.1.2"
+
he@1.2.x, he@^1.1.1, he@^1.2.0:
version "1.2.0"
resolved "https://registry.yarnpkg.com/he/-/he-1.2.0.tgz#84ae65fa7eafb165fddb61566ae14baf05664f0f"
@@ -9257,14 +9612,6 @@ hpack.js@^2.1.6:
readable-stream "^2.0.1"
wbuf "^1.1.0"
-html-element-map@^1.2.0:
- version "1.3.1"
- resolved "https://registry.yarnpkg.com/html-element-map/-/html-element-map-1.3.1.tgz#44b2cbcfa7be7aa4ff59779e47e51012e1c73c08"
- integrity sha512-6XMlxrAFX4UEEGxctfFnmrFaaZFNf9i5fNuV5wZ3WWQ4FVaNP1aX1LkX9j2mfEx1NpjeE/rL3nmgEn23GdFmrg==
- dependencies:
- array.prototype.filter "^1.0.0"
- call-bind "^1.0.2"
-
html-encoding-sniffer@^2.0.1:
version "2.0.1"
resolved "https://registry.yarnpkg.com/html-encoding-sniffer/-/html-encoding-sniffer-2.0.1.tgz#42a6dc4fd33f00281176e8b23759ca4e4fa185f3"
@@ -9485,11 +9832,21 @@ human-signals@^1.1.1:
resolved "https://registry.yarnpkg.com/human-signals/-/human-signals-1.1.1.tgz#c5b1cd14f50aeae09ab6c59fe63ba3395fe4dfa3"
integrity sha512-SEQu7vl8KjNL2eoGBLF3+wAjpsNfA9XMlXAYj/3EdaNfAlxKthD1xjEQfGOUhllCGGJVNY34bRr6lPINhNjyZw==
+human-signals@^2.1.0:
+ version "2.1.0"
+ resolved "https://registry.yarnpkg.com/human-signals/-/human-signals-2.1.0.tgz#dc91fcba42e4d06e4abaed33b3e7a3c02f514ea0"
+ integrity sha512-B4FFZ6q/T2jhhksgkbEW3HBvWIfDW85snkQgawt07S7J5QXTk6BkNV+0yAeZrM5QpMAdYlocGoljn0sJ/WQkFw==
+
human-signals@^3.0.1:
version "3.0.1"
resolved "https://registry.yarnpkg.com/human-signals/-/human-signals-3.0.1.tgz#c740920859dafa50e5a3222da9d3bf4bb0e5eef5"
integrity sha512-rQLskxnM/5OCldHo+wNXbpVgDn5A17CUoKX+7Sokwaknlq7CdSnphy0W39GU8dw59XiCXmFXDg4fRuckQRKewQ==
+human-signals@^4.3.0:
+ version "4.3.1"
+ resolved "https://registry.yarnpkg.com/human-signals/-/human-signals-4.3.1.tgz#ab7f811e851fca97ffbd2c1fe9a958964de321b2"
+ integrity sha512-nZXjEF2nbo7lIw3mgYjItAfgQXog3OjJogSbKa2CQIIvSGWcKgeJnQlNXip6NglNzYH45nSRiEVimMvYL8DDqQ==
+
human-size@^1.1.0:
version "1.1.0"
resolved "https://registry.yarnpkg.com/human-size/-/human-size-1.1.0.tgz#052562be999841c037022c20259990c56ea996f9"
@@ -9714,7 +10071,7 @@ internal-slot@^1.0.3:
has "^1.0.3"
side-channel "^1.0.4"
-internal-slot@^1.0.5:
+internal-slot@^1.0.4, internal-slot@^1.0.5:
version "1.0.5"
resolved "https://registry.yarnpkg.com/internal-slot/-/internal-slot-1.0.5.tgz#f2a2ee21f668f8627a4667f309dc0f4fb6674986"
integrity sha512-Y+R5hJrzs52QCG2laLn4udYVnxsfny9CpOhNhUvk/SSSVyF6T27FzRbF0sroPidSu3X8oEAkOn2K804mjpt6UQ==
@@ -9797,7 +10154,7 @@ is-alphanumerical@^1.0.0:
is-alphabetical "^1.0.0"
is-decimal "^1.0.0"
-is-arguments@^1.0.4:
+is-arguments@^1.0.4, is-arguments@^1.1.1:
version "1.1.1"
resolved "https://registry.yarnpkg.com/is-arguments/-/is-arguments-1.1.1.tgz#15b3f88fda01f2a97fec84ca761a560f123efa9b"
integrity sha512-8Q7EARjzEnKpt/PCD7e1cgUS0a6X8u5tdSiMqXhojOdoV9TsMsiO+9VLC5vAmO8N7/GmXn7yjR8qnA6bVAEzfA==
@@ -9819,6 +10176,13 @@ is-arrayish@^0.2.1:
resolved "https://registry.yarnpkg.com/is-arrayish/-/is-arrayish-0.2.1.tgz#77c99840527aa8ecb1a8ba697b80645a7a926a9d"
integrity sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==
+is-async-function@^2.0.0:
+ version "2.0.0"
+ resolved "https://registry.yarnpkg.com/is-async-function/-/is-async-function-2.0.0.tgz#8e4418efd3e5d3a6ebb0164c05ef5afb69aa9646"
+ integrity sha512-Y1JXKrfykRJGdlDwdKlLpLyMIiWqWvuSd17TvZk68PLAOGOoF4Xyav1z0Xhoi+gCYjZVeC5SI+hYFOfvXmGRCA==
+ dependencies:
+ has-tostringtag "^1.0.0"
+
is-bigint@^1.0.1:
version "1.0.4"
resolved "https://registry.yarnpkg.com/is-bigint/-/is-bigint-1.0.4.tgz#08147a1875bc2b32005d41ccd8291dffc6691df3"
@@ -9840,7 +10204,7 @@ is-binary-path@^2.1.0, is-binary-path@~2.1.0:
dependencies:
binary-extensions "^2.0.0"
-is-boolean-object@^1.0.1, is-boolean-object@^1.1.0:
+is-boolean-object@^1.1.0:
version "1.1.2"
resolved "https://registry.yarnpkg.com/is-boolean-object/-/is-boolean-object-1.1.2.tgz#5c6dc200246dd9321ae4b885a114bb1f75f63719"
integrity sha512-gDYaKHJmnj4aWxyj6YHyXVpdQawtVLHU5cb+eztPGczf6cjuTdwve5ZIEfgXqH4e57An1D1AKf8CZ3kYrQRqYA==
@@ -9865,7 +10229,7 @@ is-callable@^1.1.3, is-callable@^1.2.7:
resolved "https://registry.yarnpkg.com/is-callable/-/is-callable-1.2.7.tgz#3bc2a85ea742d9e36205dcacdd72ca1fdc51b055"
integrity sha512-1BC0BVFhS/p0qtw6enp8e+8OD0UrK0oFLztSjNzhcKA3WDuJxxAPXzPuPtKkjEY9UUoEWlX/8fgKeu2S8i9JTA==
-is-callable@^1.1.4, is-callable@^1.1.5, is-callable@^1.2.4:
+is-callable@^1.1.4, is-callable@^1.2.4:
version "1.2.4"
resolved "https://registry.yarnpkg.com/is-callable/-/is-callable-1.2.4.tgz#47301d58dd0259407865547853df6d61fe471945"
integrity sha512-nsuwtxZfMX67Oryl9LCQ+upnC0Z0BgpwntpS89m1H/TLF0zNfzfLMV/9Wa/6MZsj0acpEjAO0KF1xT6ZdLl95w==
@@ -9898,7 +10262,7 @@ is-data-descriptor@^1.0.0:
dependencies:
kind-of "^6.0.0"
-is-date-object@^1.0.1:
+is-date-object@^1.0.1, is-date-object@^1.0.5:
version "1.0.5"
resolved "https://registry.yarnpkg.com/is-date-object/-/is-date-object-1.0.5.tgz#0841d5536e724c25597bf6ea62e1bd38298df31f"
integrity sha512-9YQaSxsAiSwcvS33MBk3wTCVnWK+HhF8VZR2jRxehM16QcVOdHqPn4VPHmRK4lSr38n9JriurInLcP90xsYNfQ==
@@ -9938,6 +10302,19 @@ is-docker@^2.0.0, is-docker@^2.1.1:
resolved "https://registry.yarnpkg.com/is-docker/-/is-docker-2.2.1.tgz#33eeabe23cfe86f14bde4408a02c0cfb853acdaa"
integrity sha512-F+i2BKsFrH66iaUFc0woD8sLy8getkwTwtOBjvs56Cx4CgJDeKQeqfz8wAYiSb8JOprWhHH5p77PbmYCvvUuXQ==
+is-docker@^3.0.0:
+ version "3.0.0"
+ resolved "https://registry.yarnpkg.com/is-docker/-/is-docker-3.0.0.tgz#90093aa3106277d8a77a5910dbae71747e15a200"
+ integrity sha512-eljcgEDlEns/7AXFosB5K/2nCM4P7FQPkGc/DWLy5rmFEWvZayGrik1d9/QIY5nJ4f9YsVvBkA6kJpHn9rISdQ==
+
+is-dom@^1.0.0:
+ version "1.1.0"
+ resolved "https://registry.yarnpkg.com/is-dom/-/is-dom-1.1.0.tgz#af1fced292742443bb59ca3f76ab5e80907b4e8a"
+ integrity sha512-u82f6mvhYxRPKpw8V1N0W8ce1xXwOrQtgGcxl6UCL5zBmZu3is/18K0rR7uFCnMDuAsS/3W54mGL4vsaFUQlEQ==
+ dependencies:
+ is-object "^1.0.1"
+ is-window "^1.0.2"
+
is-extendable@^0.1.0, is-extendable@^0.1.1:
version "0.1.1"
resolved "https://registry.yarnpkg.com/is-extendable/-/is-extendable-0.1.1.tgz#62b110e289a471418e3ec36a617d472e301dfc89"
@@ -9955,6 +10332,13 @@ is-extglob@^2.1.0, is-extglob@^2.1.1:
resolved "https://registry.yarnpkg.com/is-extglob/-/is-extglob-2.1.1.tgz#a88c02535791f02ed37c76a1b9ea9773c833f8c2"
integrity sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==
+is-finalizationregistry@^1.0.2:
+ version "1.0.2"
+ resolved "https://registry.yarnpkg.com/is-finalizationregistry/-/is-finalizationregistry-1.0.2.tgz#c8749b65f17c133313e661b1289b95ad3dbd62e6"
+ integrity sha512-0by5vtUJs8iFQb5TYUHHPudOR+qXYIMKtiUzvLIZITZUjknFmziyBJuLhVRc+Ds0dREFlskDNJKYIdIzu/9pfw==
+ dependencies:
+ call-bind "^1.0.2"
+
is-fullwidth-code-point@^1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/is-fullwidth-code-point/-/is-fullwidth-code-point-1.0.0.tgz#ef9e31386f031a7f0d643af82fde50c457ef00cb"
@@ -9982,6 +10366,13 @@ is-generator-fn@^2.0.0:
resolved "https://registry.yarnpkg.com/is-generator-fn/-/is-generator-fn-2.1.0.tgz#7d140adc389aaf3011a8f2a2a4cfa6faadffb118"
integrity sha512-cTIB4yPYL/Grw0EaSzASzg6bBy9gqCofvWN8okThAYIxKJZC+udlRAmGbM0XLeniEJSs8uEgHPGuHSe1XsOLSQ==
+is-generator-function@^1.0.10:
+ version "1.0.10"
+ resolved "https://registry.yarnpkg.com/is-generator-function/-/is-generator-function-1.0.10.tgz#f1558baf1ac17e0deea7c0415c438351ff2b3c72"
+ integrity sha512-jsEjy9l3yiXEQ+PsXdmBwEPcOxaXWLspKdplFUVI9vq1iZgIekeC0L167qeu86czQaxed3q/Uzuw0swL0irL8A==
+ dependencies:
+ has-tostringtag "^1.0.0"
+
is-glob@^3.1.0:
version "3.1.0"
resolved "https://registry.yarnpkg.com/is-glob/-/is-glob-3.1.0.tgz#7ba5ae24217804ac70707b96922567486cc3e84a"
@@ -10006,6 +10397,18 @@ is-in-browser@^1.0.2, is-in-browser@^1.1.3:
resolved "https://registry.yarnpkg.com/is-in-browser/-/is-in-browser-1.1.3.tgz#56ff4db683a078c6082eb95dad7dc62e1d04f835"
integrity sha512-FeXIBgG/CPGd/WUxuEyvgGTEfwiG9Z4EKGxjNMRqviiIIfsmgrpnHLffEDdwUHqNva1VEW91o3xBT/m8Elgl9g==
+is-inside-container@^1.0.0:
+ version "1.0.0"
+ resolved "https://registry.yarnpkg.com/is-inside-container/-/is-inside-container-1.0.0.tgz#e81fba699662eb31dbdaf26766a61d4814717ea4"
+ integrity sha512-KIYLCCJghfHZxqjYBE7rEy0OBuTd5xCHS7tHVgvCLkx7StIoaxwNW3hCALgEUjFfeRk+MG/Qxmp/vtETEF3tRA==
+ dependencies:
+ is-docker "^3.0.0"
+
+is-map@^2.0.1, is-map@^2.0.2:
+ version "2.0.2"
+ resolved "https://registry.yarnpkg.com/is-map/-/is-map-2.0.2.tgz#00922db8c9bf73e81b7a335827bc2a43f2b91127"
+ integrity sha512-cOZFQQozTha1f4MxLFzlgKYPTyj26picdZTx82hbc/Xf4K/tZOOXSCkMvU4pKioRXGDLJRn0GM7Upe7kR721yg==
+
is-negative-zero@^2.0.2:
version "2.0.2"
resolved "https://registry.yarnpkg.com/is-negative-zero/-/is-negative-zero-2.0.2.tgz#7bf6f03a28003b8b3965de3ac26f664d765f3150"
@@ -10035,6 +10438,11 @@ is-obj@^2.0.0:
resolved "https://registry.yarnpkg.com/is-obj/-/is-obj-2.0.0.tgz#473fb05d973705e3fd9620545018ca8e22ef4982"
integrity sha512-drqDG3cbczxxEJRoOXcOjtdp1J/lyp1mNn0xaznRs8+muBhgQcrnbspox5X5fOw0HnMnbfDzvnEMEtqDEJEo8w==
+is-object@^1.0.1:
+ version "1.0.2"
+ resolved "https://registry.yarnpkg.com/is-object/-/is-object-1.0.2.tgz#a56552e1c665c9e950b4a025461da87e72f86fcf"
+ integrity sha512-2rRIahhZr2UWb45fIOuvZGpFtz0TyOZLf32KxBbSoUCeZR495zCKlWUKKUByk3geS2eAs7ZAABt0Y/Rx0GiQGA==
+
is-path-cwd@^2.0.0:
version "2.2.0"
resolved "https://registry.yarnpkg.com/is-path-cwd/-/is-path-cwd-2.2.0.tgz#67d43b82664a7b5191fd9119127eb300048a9fdb"
@@ -10081,7 +10489,7 @@ is-promise@^2.1.0:
resolved "https://registry.yarnpkg.com/is-promise/-/is-promise-2.2.2.tgz#39ab959ccbf9a774cf079f7b40c7a26f763135f1"
integrity sha512-+lP4/6lKUBfQjZ2pdxThZvLUAafmZb8OAxFb8XXtiQmS35INgr85hdOGoEs124ez1FCnZJt6jau/T+alh58QFQ==
-is-regex@^1.0.4, is-regex@^1.0.5, is-regex@^1.1.0, is-regex@^1.1.4:
+is-regex@^1.0.4, is-regex@^1.1.4:
version "1.1.4"
resolved "https://registry.yarnpkg.com/is-regex/-/is-regex-1.1.4.tgz#eef5663cd59fa4c0ae339505323df6854bb15958"
integrity sha512-kvRdxDsxZjhzUX07ZnLydzS1TU/TJlTUHHY4YLL87e37oUA49DfkLqgy+VjFocowy29cKvcSiu+kIv728jTTVg==
@@ -10089,6 +10497,11 @@ is-regex@^1.0.4, is-regex@^1.0.5, is-regex@^1.1.0, is-regex@^1.1.4:
call-bind "^1.0.2"
has-tostringtag "^1.0.0"
+is-set@^2.0.1, is-set@^2.0.2:
+ version "2.0.2"
+ resolved "https://registry.yarnpkg.com/is-set/-/is-set-2.0.2.tgz#90755fa4c2562dc1c5d4024760d6119b94ca18ec"
+ integrity sha512-+2cnTEZeY5z/iXGbLhPrOAaK/Mau5k5eXq9j14CpRTftq0pAJu2MwVRSZhyZWBzx3o6X795Lz6Bpb6R0GKf37g==
+
is-shared-array-buffer@^1.0.2:
version "1.0.2"
resolved "https://registry.yarnpkg.com/is-shared-array-buffer/-/is-shared-array-buffer-1.0.2.tgz#8f259c573b60b6a32d4058a1a07430c0a7344c79"
@@ -10118,11 +10531,6 @@ is-string@^1.0.5, is-string@^1.0.7:
dependencies:
has-tostringtag "^1.0.0"
-is-subset@^0.1.1:
- version "0.1.1"
- resolved "https://registry.yarnpkg.com/is-subset/-/is-subset-0.1.1.tgz#8a59117d932de1de00f245fcdd39ce43f1e939a6"
- integrity sha512-6Ybun0IkarhmEqxXCNw/C0bna6Zb/TkfUX9UbwJtK6ObwAVCxmAP308WWTHviM/zAqXk05cdhYsUsZeGQh99iw==
-
is-symbol@^1.0.2, is-symbol@^1.0.3:
version "1.0.4"
resolved "https://registry.yarnpkg.com/is-symbol/-/is-symbol-1.0.4.tgz#a6dac93b635b063ca6872236de88910a57af139c"
@@ -10148,6 +10556,13 @@ is-typed-array@^1.1.10, is-typed-array@^1.1.9:
gopd "^1.0.1"
has-tostringtag "^1.0.0"
+is-typed-array@^1.1.12:
+ version "1.1.12"
+ resolved "https://registry.yarnpkg.com/is-typed-array/-/is-typed-array-1.1.12.tgz#d0bab5686ef4a76f7a73097b95470ab199c57d4a"
+ integrity sha512-Z14TF2JNG8Lss5/HMqt0//T9JeHXttXy5pH/DBU4vi98ozO2btxzq9MwYDZYnKwU8nRsz/+GVFVRDq3DkVuSPg==
+ dependencies:
+ which-typed-array "^1.1.11"
+
is-typedarray@^1.0.0, is-typedarray@~1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/is-typedarray/-/is-typedarray-1.0.0.tgz#e479c80858df0c1b11ddda6940f96011fcda4a9a"
@@ -10158,6 +10573,11 @@ is-utf8@^0.2.0:
resolved "https://registry.yarnpkg.com/is-utf8/-/is-utf8-0.2.1.tgz#4b0da1442104d1b336340e80797e865cf39f7d72"
integrity sha512-rMYPYvCzsXywIsldgLaSoPlw5PfoB/ssr7hY4pLfcodrA5M/eArza1a9VmTiNIBNMjOGr1Ow9mTyU2o69U6U9Q==
+is-weakmap@^2.0.1:
+ version "2.0.1"
+ resolved "https://registry.yarnpkg.com/is-weakmap/-/is-weakmap-2.0.1.tgz#5008b59bdc43b698201d18f62b37b2ca243e8cf2"
+ integrity sha512-NSBR4kH5oVj1Uwvv970ruUkCV7O1mzgVFO4/rev2cLRda9Tm9HrL70ZPut4rOHgY0FNrUu9BCbXA2sdQ+x0chA==
+
is-weakref@^1.0.2:
version "1.0.2"
resolved "https://registry.yarnpkg.com/is-weakref/-/is-weakref-1.0.2.tgz#9529f383a9338205e89765e0392efc2f100f06f2"
@@ -10165,6 +10585,14 @@ is-weakref@^1.0.2:
dependencies:
call-bind "^1.0.2"
+is-weakset@^2.0.1:
+ version "2.0.2"
+ resolved "https://registry.yarnpkg.com/is-weakset/-/is-weakset-2.0.2.tgz#4569d67a747a1ce5a994dfd4ef6dcea76e7c0a1d"
+ integrity sha512-t2yVvttHkQktwnNNmBQ98AhENLdPUTDTE21uPqAQ0ARwQfGeQKRVS0NNurH7bTf7RrvcVn1OOge45CnBeHCSmg==
+ dependencies:
+ call-bind "^1.0.2"
+ get-intrinsic "^1.1.1"
+
is-whitespace-character@^1.0.0:
version "1.0.4"
resolved "https://registry.yarnpkg.com/is-whitespace-character/-/is-whitespace-character-1.0.4.tgz#0858edd94a95594c7c9dd0b5c174ec6e45ee4aa7"
@@ -10175,6 +10603,11 @@ is-whitespace@^0.3.0:
resolved "https://registry.yarnpkg.com/is-whitespace/-/is-whitespace-0.3.0.tgz#1639ecb1be036aec69a54cbb401cfbed7114ab7f"
integrity sha512-RydPhl4S6JwAyj0JJjshWJEFG6hNye3pZFBRZaTUfZFwGHxzppNaNOVgQuS/E/SlhrApuMXrpnK1EEIXfdo3Dg==
+is-window@^1.0.2:
+ version "1.0.2"
+ resolved "https://registry.yarnpkg.com/is-window/-/is-window-1.0.2.tgz#2c896ca53db97de45d3c33133a65d8c9f563480d"
+ integrity sha512-uj00kdXyZb9t9RcAUAwMZAnkBUwdYGhYlt7djMXhfyhUCzwNba50tIiBKR7q0l7tdoBtFVw/3JmLY6fI3rmZmg==
+
is-windows@^1.0.2:
version "1.0.2"
resolved "https://registry.yarnpkg.com/is-windows/-/is-windows-1.0.2.tgz#d1850eb9791ecd18e6182ce12a30f396634bb19d"
@@ -10202,6 +10635,11 @@ isarray@1.0.0, isarray@^1.0.0, isarray@~1.0.0:
resolved "https://registry.yarnpkg.com/isarray/-/isarray-1.0.0.tgz#bb935d48582cba168c06834957a54a3e07124f11"
integrity sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ==
+isarray@^2.0.5:
+ version "2.0.5"
+ resolved "https://registry.yarnpkg.com/isarray/-/isarray-2.0.5.tgz#8af1e4c1221244cc62459faf38940d4e644a5723"
+ integrity sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw==
+
isexe@^2.0.0:
version "2.0.0"
resolved "https://registry.yarnpkg.com/isexe/-/isexe-2.0.0.tgz#e8fbf374dc556ff8947a10dcb0572d633f2cfa10"
@@ -10276,6 +10714,17 @@ istanbul-reports@^3.0.2:
html-escaper "^2.0.0"
istanbul-lib-report "^3.0.0"
+iterator.prototype@^1.1.2:
+ version "1.1.2"
+ resolved "https://registry.yarnpkg.com/iterator.prototype/-/iterator.prototype-1.1.2.tgz#5e29c8924f01916cb9335f1ff80619dcff22b0c0"
+ integrity sha512-DR33HMMr8EzwuRL8Y9D3u2BMj8+RqSE850jfGu59kS7tbmPLzGkZmVSfyCFSDxuZiEY6Rzt3T2NA/qU+NwVj1w==
+ dependencies:
+ define-properties "^1.2.1"
+ get-intrinsic "^1.2.1"
+ has-symbols "^1.0.3"
+ reflect.getprototypeof "^1.0.4"
+ set-function-name "^2.0.1"
+
jest-canvas-mock@^2.4.0:
version "2.4.0"
resolved "https://registry.yarnpkg.com/jest-canvas-mock/-/jest-canvas-mock-2.4.0.tgz#947b71442d7719f8e055decaecdb334809465341"
@@ -11036,6 +11485,16 @@ jsx-ast-utils@^2.1.0, jsx-ast-utils@^2.2.3:
array-includes "^3.1.5"
object.assign "^4.1.2"
+jsx-ast-utils@^3.3.5:
+ version "3.3.5"
+ resolved "https://registry.yarnpkg.com/jsx-ast-utils/-/jsx-ast-utils-3.3.5.tgz#4766bd05a8e2a11af222becd19e15575e52a853a"
+ integrity sha512-ZZow9HBI5O6EPgSJLUb8n2NKgmVWTwCvHGwFuJlMjvLFqlGG6pjirPhtdsseaLZjSibD8eegzmYpUZwoIlj2cQ==
+ dependencies:
+ array-includes "^3.1.6"
+ array.prototype.flat "^1.3.1"
+ object.assign "^4.1.4"
+ object.values "^1.1.6"
+
juice@^7.0.0:
version "7.0.0"
resolved "https://registry.yarnpkg.com/juice/-/juice-7.0.0.tgz#509bed6adbb6e4bbaa7fbfadac4e2e83e8c89ba3"
@@ -11086,6 +11545,18 @@ kleur@^3.0.3:
resolved "https://registry.yarnpkg.com/kleur/-/kleur-3.0.3.tgz#a79c9ecc86ee1ce3fa6206d1216c501f147fc07e"
integrity sha512-eTIzlVOSUR+JxdDFepEYcBMtZ9Qqdef+rnzWdRZuMbOywu5tO2w2N7rqjoANZ5k9vywhL6Br1VRjUIgTQx4E8w==
+language-subtag-registry@^0.3.20:
+ version "0.3.22"
+ resolved "https://registry.yarnpkg.com/language-subtag-registry/-/language-subtag-registry-0.3.22.tgz#2e1500861b2e457eba7e7ae86877cbd08fa1fd1d"
+ integrity sha512-tN0MCzyWnoz/4nHS6uxdlFWoUZT7ABptwKPQ52Ea7URk6vll88bWBVhodtnlfEuCcKWNGoc+uGbw1cwa9IKh/w==
+
+language-tags@^1.0.9:
+ version "1.0.9"
+ resolved "https://registry.yarnpkg.com/language-tags/-/language-tags-1.0.9.tgz#1ffdcd0ec0fafb4b1be7f8b11f306ad0f9c08777"
+ integrity sha512-MbjN408fEndfiQXbFQ1vnd+1NoLDsnQW41410oQBXiyXDMYH5z505juWa4KUE1LqxRC7DgOgZDbKLxHIwm27hA==
+ dependencies:
+ language-subtag-registry "^0.3.20"
+
lcid@^1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/lcid/-/lcid-1.0.0.tgz#308accafa0bc483a3867b4b6f2b9506251d1b835"
@@ -11292,21 +11763,6 @@ lodash.defaults@4.2.0:
resolved "https://registry.yarnpkg.com/lodash.defaults/-/lodash.defaults-4.2.0.tgz#d09178716ffea4dde9e5fb7b37f6f0802274580c"
integrity sha512-qjxPLHd3r5DnsdGacqOMU6pb/avJzdh9tFX2ymgoZE27BmjXrNy/y4LoaiTeAb+O3gL8AfpJGtqfX/ae2leYYQ==
-lodash.escape@^4.0.1:
- version "4.0.1"
- resolved "https://registry.yarnpkg.com/lodash.escape/-/lodash.escape-4.0.1.tgz#c9044690c21e04294beaa517712fded1fa88de98"
- integrity sha512-nXEOnb/jK9g0DYMr1/Xvq6l5xMD7GDG55+GSYIYmS0G4tBk/hURD4JR9WCavs04t33WmJx9kCyp9vJ+mr4BOUw==
-
-lodash.flattendeep@^4.4.0:
- version "4.4.0"
- resolved "https://registry.yarnpkg.com/lodash.flattendeep/-/lodash.flattendeep-4.4.0.tgz#fb030917f86a3134e5bc9bec0d69e0013ddfedb2"
- integrity sha512-uHaJFihxmJcEX3kT4I23ABqKKalJ/zDrDg0lsFtc1h+3uw49SIJ5beyhx5ExVRti3AvKoOJngIj7xz3oylPdWQ==
-
-lodash.isequal@^4.5.0:
- version "4.5.0"
- resolved "https://registry.yarnpkg.com/lodash.isequal/-/lodash.isequal-4.5.0.tgz#415c4478f2bcc30120c22ce10ed3226f7d3e18e0"
- integrity sha512-pDo3lu8Jhfjqls6GkMgpahsF9kCyayhgykjyLMNFTKWrpVdAQtYyB4muAMWozBB4ig/dtWAmsMxLEI8wuz+DYQ==
-
lodash.ismatch@^4.4.0:
version "4.4.0"
resolved "https://registry.yarnpkg.com/lodash.ismatch/-/lodash.ismatch-4.4.0.tgz#756cb5150ca3ba6f11085a78849645f188f85f37"
@@ -11437,6 +11893,11 @@ luxon@^3.0.0:
resolved "https://registry.yarnpkg.com/luxon/-/luxon-3.0.4.tgz#d179e4e9f05e092241e7044f64aaa54796b03929"
integrity sha512-aV48rGUwP/Vydn8HT+5cdr26YYQiUZ42NM6ToMoaGKwYfWbfLeRkEu1wXWMHBZT6+KyLfcbbtVcoQFCbbPjKlw==
+lz-string@^1.5.0:
+ version "1.5.0"
+ resolved "https://registry.yarnpkg.com/lz-string/-/lz-string-1.5.0.tgz#c1ab50f77887b712621201ba9fd4e3a6ed099941"
+ integrity sha512-h5bgJWpxJNswbU7qCrV0tIKQCaS3blPDrqKWx+QxzuzL1zGUzij9XCWLrSLsJPu5t+eWA/ycetzYAO5IOMcWAQ==
+
make-cancellable-promise@^1.0.0:
version "1.1.0"
resolved "https://registry.yarnpkg.com/make-cancellable-promise/-/make-cancellable-promise-1.1.0.tgz#b4e9fcb31db3a27417e44f80cffa598ec9ac9f4e"
@@ -11580,11 +12041,6 @@ memory-fs@^0.5.0:
errno "^0.1.3"
readable-stream "^2.0.1"
-memorystream@^0.3.1:
- version "0.3.1"
- resolved "https://registry.yarnpkg.com/memorystream/-/memorystream-0.3.1.tgz#86d7090b30ce455d63fbae12dda51a47ddcaf9b2"
- integrity sha512-S3UwM3yj5mtUSEfP41UZmt/0SCoVYUcU1rkXv+BQ5Ig8ndL4sPoJNBUJERafdPb5jjHJGuMgytgKvKIf58XNBw==
-
mensch@^0.3.4:
version "0.3.4"
resolved "https://registry.yarnpkg.com/mensch/-/mensch-0.3.4.tgz#770f91b46cb16ea5b204ee735768c3f0c491fecd"
@@ -12249,11 +12705,6 @@ moo-color@^1.0.2:
dependencies:
color-name "^1.1.4"
-moo@^0.5.0:
- version "0.5.1"
- resolved "https://registry.yarnpkg.com/moo/-/moo-0.5.1.tgz#7aae7f384b9b09f620b6abf6f74ebbcd1b65dbc4"
- integrity sha512-I1mnb5xn4fO80BH9BLcF0yLypy2UKl+Cb01Fu0hJRkJjlCRtxZMWkTdAtDd5ZqCOxtCkhmRwyI57vWT+1iZ67w==
-
morgan@^1.9.1:
version "1.10.0"
resolved "https://registry.yarnpkg.com/morgan/-/morgan-1.10.0.tgz#091778abc1fc47cd3509824653dae1faab6b17d7"
@@ -12391,16 +12842,6 @@ ncp@1.0.x:
resolved "https://registry.yarnpkg.com/ncp/-/ncp-1.0.1.tgz#d15367e5cb87432ba117d2bf80fdf45aecfb4246"
integrity sha512-akBX7I5X9KQDDWmYYgQlLbVbjkveTje2mioZjhLLrVt09akSZcoqXWE5LEn1E2fu8T7th1PZYGfewQsTkTLTmQ==
-nearley@^2.7.10:
- version "2.20.1"
- resolved "https://registry.yarnpkg.com/nearley/-/nearley-2.20.1.tgz#246cd33eff0d012faf197ff6774d7ac78acdd474"
- integrity sha512-+Mc8UaAebFzgV+KpI5n7DasuuQCHA89dmwm7JXw3TV43ukfNQ9DnBH3Mdb2g/I4Fdxc26pwimBWvjIw0UAILSQ==
- dependencies:
- commander "^2.19.0"
- moo "^0.5.0"
- railroad-diagrams "^1.0.0"
- randexp "0.4.6"
-
negotiator@0.6.3:
version "0.6.3"
resolved "https://registry.yarnpkg.com/negotiator/-/negotiator-0.6.3.tgz#58e323a72fedc0d6f9cd4d31fe49f51479590ccd"
@@ -12592,21 +13033,6 @@ normalize.css@^8.0.0:
resolved "https://registry.yarnpkg.com/normalize.css/-/normalize.css-8.0.1.tgz#9b98a208738b9cc2634caacbc42d131c97487bf3"
integrity sha512-qizSNPO93t1YUuUhP22btGOo3chcvDFqFaj2TRybP0DMxkHOCTYwp3n34fel4a31ORXy4m1Xq0Gyqpb5m33qIg==
-npm-run-all@^4.1.5:
- version "4.1.5"
- resolved "https://registry.yarnpkg.com/npm-run-all/-/npm-run-all-4.1.5.tgz#04476202a15ee0e2e214080861bff12a51d98fba"
- integrity sha512-Oo82gJDAVcaMdi3nuoKFavkIHBRVqQ1qvMb+9LHk/cF4P6B2m8aP04hGf7oL6wZ9BuGwX1onlLhpuoofSyoQDQ==
- dependencies:
- ansi-styles "^3.2.1"
- chalk "^2.4.1"
- cross-spawn "^6.0.5"
- memorystream "^0.3.1"
- minimatch "^3.0.4"
- pidtree "^0.3.0"
- read-pkg "^3.0.0"
- shell-quote "^1.6.1"
- string.prototype.padend "^3.0.0"
-
npm-run-path@^2.0.0:
version "2.0.2"
resolved "https://registry.yarnpkg.com/npm-run-path/-/npm-run-path-2.0.2.tgz#35a9232dfa35d7067b4cb2ddf2357b1871536c5f"
@@ -12614,7 +13040,7 @@ npm-run-path@^2.0.0:
dependencies:
path-key "^2.0.0"
-npm-run-path@^4.0.0:
+npm-run-path@^4.0.0, npm-run-path@^4.0.1:
version "4.0.1"
resolved "https://registry.yarnpkg.com/npm-run-path/-/npm-run-path-4.0.1.tgz#b7ecd1e5ed53da8e37a55e1c2269e0b97ed748ea"
integrity sha512-S48WzZW777zhNIrn7gxOlISNAqi9ZC/uQFnRdbeIHhZhCA6UqpkOT8T1G7BvfdgP4Er8gF4sUbaS0i7QvIfCWw==
@@ -12694,7 +13120,7 @@ object-hash@^3.0.0:
resolved "https://registry.yarnpkg.com/object-hash/-/object-hash-3.0.0.tgz#73f97f753e7baffc0e2cc9d6e079079744ac82e9"
integrity sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==
-object-inspect@^1.12.0, object-inspect@^1.12.2, object-inspect@^1.7.0, object-inspect@^1.9.0:
+object-inspect@^1.12.0, object-inspect@^1.12.2, object-inspect@^1.9.0:
version "1.12.2"
resolved "https://registry.yarnpkg.com/object-inspect/-/object-inspect-1.12.2.tgz#c0641f26394532f28ab8d796ab954e43c009a8ea"
integrity sha512-z+cPxW0QGUp0mcqcsgQyLVRDoXFQbXOwBaqyF7VIgI4TWNQsDHrBpUQslRmIfAoYWdYzs6UlKJtB2XJpTaNSpQ==
@@ -12704,7 +13130,12 @@ object-inspect@^1.12.3:
resolved "https://registry.yarnpkg.com/object-inspect/-/object-inspect-1.12.3.tgz#ba62dffd67ee256c8c086dfae69e016cd1f198b9"
integrity sha512-geUvdk7c+eizMNUDkRpW1wJwgfOiOeHbxBR/hLXK1aT6zmVSO0jsQcs7fj6MGw89jC/cjGfLcNOrtMYtGqm81g==
-object-is@^1.0.1, object-is@^1.0.2, object-is@^1.1.2:
+object-inspect@^1.13.1:
+ version "1.13.1"
+ resolved "https://registry.yarnpkg.com/object-inspect/-/object-inspect-1.13.1.tgz#b96c6109324ccfef6b12216a956ca4dc2ff94bc2"
+ integrity sha512-5qoj1RUiKOMsCCNLV1CBiPYE10sziTsnmNxkAI/rZhiD63CF7IqdFGC/XzjWjpSgLf0LxXX3bDFIh0E18f6UhQ==
+
+object-is@^1.0.1, object-is@^1.1.5:
version "1.1.5"
resolved "https://registry.yarnpkg.com/object-is/-/object-is-1.1.5.tgz#b9deeaa5fc7f1846a0faecdceec138e5778f53ac"
integrity sha512-3cyDsyHgtmi7I7DfSSI2LDp6SK2lwvtbg0p0R1e0RvTqF5ceGx+K2dfSjm1bKDMVCFEDAQvy+o8c6a7VujOddw==
@@ -12744,7 +13175,7 @@ object.assign@^4.1.4:
has-symbols "^1.0.3"
object-keys "^1.1.1"
-object.entries@^1.1.0, object.entries@^1.1.1, object.entries@^1.1.2, object.entries@^1.1.4:
+object.entries@^1.1.0, object.entries@^1.1.1, object.entries@^1.1.4:
version "1.1.5"
resolved "https://registry.yarnpkg.com/object.entries/-/object.entries-1.1.5.tgz#e1acdd17c4de2cd96d5a08487cfb9db84d881861"
integrity sha512-TyxmjUoZggd4OrrU1W66FMDG6CuqJxsFvymeyXI51+vQLN67zYfZseptRge703kKQdo4uccgAKebXFcRCzk4+g==
@@ -12762,7 +13193,16 @@ object.entries@^1.1.6:
define-properties "^1.1.4"
es-abstract "^1.20.4"
-object.fromentries@^2.0.0, object.fromentries@^2.0.2, object.fromentries@^2.0.3:
+object.entries@^1.1.7:
+ version "1.1.7"
+ resolved "https://registry.yarnpkg.com/object.entries/-/object.entries-1.1.7.tgz#2b47760e2a2e3a752f39dd874655c61a7f03c131"
+ integrity sha512-jCBs/0plmPsOnrKAfFQXRG2NFjlhZgjjcBLSmTnEhU8U6vVTsVe8ANeQJCHTl3gSsI4J+0emOoCgoKlmQPMgmA==
+ dependencies:
+ call-bind "^1.0.2"
+ define-properties "^1.2.0"
+ es-abstract "^1.22.1"
+
+object.fromentries@^2.0.0, object.fromentries@^2.0.2:
version "2.0.5"
resolved "https://registry.yarnpkg.com/object.fromentries/-/object.fromentries-2.0.5.tgz#7b37b205109c21e741e605727fe8b0ad5fa08251"
integrity sha512-CAyG5mWQRRiBU57Re4FKoTBjXfDoNwdFVH2Y1tS9PqCsfUTymAohOkEMSG3aRNKmv4lV3O7p1et7c187q6bynw==
@@ -12780,6 +13220,15 @@ object.fromentries@^2.0.6:
define-properties "^1.1.4"
es-abstract "^1.20.4"
+object.fromentries@^2.0.7:
+ version "2.0.7"
+ resolved "https://registry.yarnpkg.com/object.fromentries/-/object.fromentries-2.0.7.tgz#71e95f441e9a0ea6baf682ecaaf37fa2a8d7e616"
+ integrity sha512-UPbPHML6sL8PI/mOqPwsH4G6iyXcCGzLin8KvEPenOZN5lpCNBZZQ+V62vdjB1mQHrmqGQt5/OJzemUA+KJmEA==
+ dependencies:
+ call-bind "^1.0.2"
+ define-properties "^1.2.0"
+ es-abstract "^1.22.1"
+
object.getownpropertydescriptors@^2.0.3, object.getownpropertydescriptors@^2.1.0:
version "2.1.4"
resolved "https://registry.yarnpkg.com/object.getownpropertydescriptors/-/object.getownpropertydescriptors-2.1.4.tgz#7965e6437a57278b587383831a9b829455a4bc37"
@@ -12805,7 +13254,7 @@ object.pick@^1.3.0:
dependencies:
isobject "^3.0.1"
-object.values@^1.1.0, object.values@^1.1.1, object.values@^1.1.2:
+object.values@^1.1.0, object.values@^1.1.1:
version "1.1.5"
resolved "https://registry.yarnpkg.com/object.values/-/object.values-1.1.5.tgz#959f63e3ce9ef108720333082131e4a459b716ac"
integrity sha512-QUZRW0ilQ3PnPpbNtgdNV1PDbEqLIiSFB3l+EnGtBQ/8SUTLj1PZwtQHABZtLgwpJZTSZhuGLOGk57Drx2IvYg==
@@ -12866,7 +13315,7 @@ onetime@^2.0.0:
dependencies:
mimic-fn "^1.0.0"
-onetime@^5.1.0:
+onetime@^5.1.0, onetime@^5.1.2:
version "5.1.2"
resolved "https://registry.yarnpkg.com/onetime/-/onetime-5.1.2.tgz#d0e96ebb56b07476df1dd9c4806e5237985ca45e"
integrity sha512-kbpaSSGJTWdAY5KPVeMOKXSrPtr8C8C7wodJbcsd51jRnmD+GZu8Y0VoU6Dm5Z4vWr0Ig/1NKuWRKf7j5aaYSg==
@@ -12897,6 +13346,16 @@ open@8.4.0:
is-docker "^2.1.1"
is-wsl "^2.2.0"
+open@^9.1.0:
+ version "9.1.0"
+ resolved "https://registry.yarnpkg.com/open/-/open-9.1.0.tgz#684934359c90ad25742f5a26151970ff8c6c80b6"
+ integrity sha512-OS+QTnw1/4vrf+9hh1jc1jnYjzSG4ttTBB8UxOwAnInG3Uo4ssetzC1ihqaIHjLJnA5GGlRl6QlZXOTQhRBUvg==
+ dependencies:
+ default-browser "^4.0.0"
+ define-lazy-prop "^3.0.0"
+ is-inside-container "^1.0.0"
+ is-wsl "^2.2.0"
+
opener@^1.5.1:
version "1.5.2"
resolved "https://registry.yarnpkg.com/opener/-/opener-1.5.2.tgz#5d37e1f35077b9dcac4301372271afdeb2a13598"
@@ -13329,11 +13788,6 @@ picomatch@^2.0.4, picomatch@^2.2.1, picomatch@^2.2.3, picomatch@^2.3.1:
resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.3.1.tgz#3ba3833733646d9d3e4995946c1365a67fb07a42"
integrity sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==
-pidtree@^0.3.0:
- version "0.3.1"
- resolved "https://registry.yarnpkg.com/pidtree/-/pidtree-0.3.1.tgz#ef09ac2cc0533df1f3250ccf2c4d366b0d12114a"
- integrity sha512-qQbW94hLHEqCg7nhby4yRC7G2+jYHY4Rguc2bjw7Uug4GIJuu1tvf2uHaZv5Q8zdt+WKJ6qK1FOI6amaWUo5FA==
-
pidtree@^0.6.0:
version "0.6.0"
resolved "https://registry.yarnpkg.com/pidtree/-/pidtree-0.6.0.tgz#90ad7b6d42d5841e69e0a2419ef38f8883aa057c"
@@ -13764,10 +14218,10 @@ prettier@^2.5.1:
resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.7.1.tgz#e235806850d057f97bb08368a4f7d899f7760c64"
integrity sha512-ujppO+MkdPqoVINuDFDRLClm7D78qbDt0/NR+wp5FqEZOoTNAjPHWj17QRhu7geIHJfcNhRk1XVQmF8Bp3ye+g==
-prettier@^2.8.5:
- version "2.8.6"
- resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.8.6.tgz#5c174b29befd507f14b83e3c19f83fdc0e974b71"
- integrity sha512-mtuzdiBbHwPEgl7NxWlqOkithPyp4VN93V7VeHVWBF+ad3I5avc0RVDT4oImXQy9H/AqxA2NSQH8pSxHW6FYbQ==
+prettier@^3.0.0:
+ version "3.0.3"
+ resolved "https://registry.yarnpkg.com/prettier/-/prettier-3.0.3.tgz#432a51f7ba422d1469096c0fdc28e235db8f9643"
+ integrity sha512-L/4pUDMxcNa8R/EthV08Zt42WBO4h1rarVtK0K+QJG0X187OLo7l699jWw0GKuwzkPQ//jMFA/8Xm6Fh3J/DAg==
pretty-error@^2.0.2:
version "2.1.2"
@@ -13795,6 +14249,15 @@ pretty-format@^26.0.0, pretty-format@^26.6.2:
ansi-styles "^4.0.0"
react-is "^17.0.1"
+pretty-format@^27.0.2:
+ version "27.5.1"
+ resolved "https://registry.yarnpkg.com/pretty-format/-/pretty-format-27.5.1.tgz#2181879fdea51a7a5851fb39d920faa63f01d88e"
+ integrity sha512-Qb1gy5OrP5+zDf2Bvnzdl3jsTf1qXVMazbvCoKhtKqVs4/YK4ozX4gKQJJVyNe+cajNPn0KoC0MC3FUmaHWEmQ==
+ dependencies:
+ ansi-regex "^5.0.1"
+ ansi-styles "^5.0.0"
+ react-is "^17.0.1"
+
pretty-format@^29.0.0, pretty-format@^29.0.3:
version "29.0.3"
resolved "https://registry.yarnpkg.com/pretty-format/-/pretty-format-29.0.3.tgz#23d5f8cabc9cbf209a77d49409d093d61166a811"
@@ -13869,15 +14332,6 @@ prompts@^2.0.1:
kleur "^3.0.3"
sisteransi "^1.0.5"
-prop-types-exact@^1.2.0:
- version "1.2.0"
- resolved "https://registry.yarnpkg.com/prop-types-exact/-/prop-types-exact-1.2.0.tgz#825d6be46094663848237e3925a98c6e944e9869"
- integrity sha512-K+Tk3Kd9V0odiXFP9fwDHUYRyvK3Nun3GVyPapSIs5OBkITAm15W0CPFD/YKTkMUAbc0b9CUwRQp2ybiBIq+eA==
- dependencies:
- has "^1.0.3"
- object.assign "^4.1.0"
- reflect.ownkeys "^0.2.0"
-
prop-types@15.7.2:
version "15.7.2"
resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
@@ -13887,7 +14341,7 @@ prop-types@15.7.2:
object-assign "^4.1.1"
react-is "^16.8.1"
-prop-types@^15.5.4, prop-types@^15.5.8, prop-types@^15.6.0, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2, prop-types@^15.8.1:
+prop-types@^15.0.0, prop-types@^15.5.4, prop-types@^15.5.8, prop-types@^15.6.0, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2, prop-types@^15.8.1:
version "15.8.1"
resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5"
integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==
@@ -14055,24 +14509,11 @@ raf@^3.4.1:
dependencies:
performance-now "^2.1.0"
-railroad-diagrams@^1.0.0:
- version "1.0.0"
- resolved "https://registry.yarnpkg.com/railroad-diagrams/-/railroad-diagrams-1.0.0.tgz#eb7e6267548ddedfb899c1b90e57374559cddb7e"
- integrity sha512-cz93DjNeLY0idrCNOH6PviZGRN9GJhsdm9hpn1YCS879fj4W+x5IFJhhkRZcwVgMmFF7R82UA/7Oh+R8lLZg6A==
-
ramda@^0.28.0:
version "0.28.0"
resolved "https://registry.yarnpkg.com/ramda/-/ramda-0.28.0.tgz#acd785690100337e8b063cab3470019be427cc97"
integrity sha512-9QnLuG/kPVgWvMQ4aODhsBUFKOUmnbUnsSXACv+NCQZcHbeb+v8Lodp8OVxtRULN1/xOyYLLaL6npE6dMq5QTA==
-randexp@0.4.6:
- version "0.4.6"
- resolved "https://registry.yarnpkg.com/randexp/-/randexp-0.4.6.tgz#e986ad5e5e31dae13ddd6f7b3019aa7c87f60ca3"
- integrity sha512-80WNmd9DA0tmZrw9qQa62GPPWfuXJknrmVmLcxvq4uZBdYqb1wYoKTmnlGUchvVWe0XiLupYkBoXVOxz3C8DYQ==
- dependencies:
- discontinuous-range "1.0.0"
- ret "~0.1.10"
-
randombytes@^2.0.0, randombytes@^2.0.1, randombytes@^2.0.5, randombytes@^2.1.0:
version "2.1.0"
resolved "https://registry.yarnpkg.com/randombytes/-/randombytes-2.1.0.tgz#df6f84372f0270dc65cdf6291349ab7a473d4f2a"
@@ -14172,7 +14613,16 @@ react-input-autosize@^3.0.0:
dependencies:
prop-types "^15.5.8"
-react-is@^16.12.0, react-is@^16.13.1, react-is@^16.6.0, react-is@^16.7.0, react-is@^16.8.1, react-is@^16.8.6:
+react-inspector@^5.1:
+ version "5.1.1"
+ resolved "https://registry.yarnpkg.com/react-inspector/-/react-inspector-5.1.1.tgz#58476c78fde05d5055646ed8ec02030af42953c8"
+ integrity sha512-GURDaYzoLbW8pMGXwYPDBIv6nqei4kK7LPRZ9q9HCZF54wqXz/dnylBp/kfE9XmekBhHvLDdcYeyIwSrvtOiWg==
+ dependencies:
+ "@babel/runtime" "^7.0.0"
+ is-dom "^1.0.0"
+ prop-types "^15.0.0"
+
+react-is@^16.13.1, react-is@^16.6.0, react-is@^16.7.0, react-is@^16.8.1, react-is@^16.8.6:
version "16.13.1"
resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
@@ -14399,7 +14849,7 @@ react-swipeable-views@^0.13.3:
react-swipeable-views-utils "^0.13.9"
warning "^4.0.1"
-react-test-renderer@16.14.0, react-test-renderer@^16.0.0-0:
+react-test-renderer@16.14.0:
version "16.14.0"
resolved "https://registry.yarnpkg.com/react-test-renderer/-/react-test-renderer-16.14.0.tgz#e98360087348e260c56d4fe2315e970480c228ae"
integrity sha512-L8yPjqPE5CZO6rKsKXRO/rVPiaCOy0tQQJbC+UjPNlobl5mad59lvPjwFsQHTvL03caVDIVr9x9/OSgDe6I5Eg==
@@ -14618,10 +15068,17 @@ redux@^4.2.1:
dependencies:
"@babel/runtime" "^7.9.2"
-reflect.ownkeys@^0.2.0:
- version "0.2.0"
- resolved "https://registry.yarnpkg.com/reflect.ownkeys/-/reflect.ownkeys-0.2.0.tgz#749aceec7f3fdf8b63f927a04809e90c5c0b3460"
- integrity sha512-qOLsBKHCpSOFKK1NUOCGC5VyeufB6lEsFe92AL2bhIJsacZS1qdoOZSbPk3MYKuT2cFlRDnulKXuuElIrMjGUg==
+reflect.getprototypeof@^1.0.4:
+ version "1.0.4"
+ resolved "https://registry.yarnpkg.com/reflect.getprototypeof/-/reflect.getprototypeof-1.0.4.tgz#aaccbf41aca3821b87bb71d9dcbc7ad0ba50a3f3"
+ integrity sha512-ECkTw8TmJwW60lOTR+ZkODISW6RQ8+2CL3COqtiJKLd6MmB45hN51HprHFziKLGkAuTGQhBb91V8cy+KHlaCjw==
+ dependencies:
+ call-bind "^1.0.2"
+ define-properties "^1.2.0"
+ es-abstract "^1.22.1"
+ get-intrinsic "^1.2.1"
+ globalthis "^1.0.3"
+ which-builtin-type "^1.1.3"
regenerate-unicode-properties@^10.0.1:
version "10.0.1"
@@ -14660,6 +15117,11 @@ regenerator-runtime@^0.13.4:
resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz#8925742a98ffd90814988d7566ad30ca3b263b52"
integrity sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA==
+regenerator-runtime@^0.14.0:
+ version "0.14.0"
+ resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.14.0.tgz#5e19d68eb12d486f797e15a3c6a918f7cec5eb45"
+ integrity sha512-srw17NI0TUWHuGa5CFGGmhfNIeja30WMBfbslPNhf6JrqQlLN5gcrvig1oqPxiVaXb0oW0XRKtH6Nngs5lKCIA==
+
regenerator-transform@^0.15.0:
version "0.15.0"
resolved "https://registry.yarnpkg.com/regenerator-transform/-/regenerator-transform-0.15.0.tgz#cbd9ead5d77fae1a48d957cf889ad0586adb6537"
@@ -14684,6 +15146,15 @@ regexp.prototype.flags@^1.2.0, regexp.prototype.flags@^1.4.1, regexp.prototype.f
define-properties "^1.1.3"
functions-have-names "^1.2.2"
+regexp.prototype.flags@^1.5.0, regexp.prototype.flags@^1.5.1:
+ version "1.5.1"
+ resolved "https://registry.yarnpkg.com/regexp.prototype.flags/-/regexp.prototype.flags-1.5.1.tgz#90ce989138db209f81492edd734183ce99f9677e"
+ integrity sha512-sy6TXMN+hnP/wMy+ISxg3krXx7BAtWVO4UouuCN/ziM9UEne0euamVNafDfvC83bRNr95y0V5iijeDQFUNpvrg==
+ dependencies:
+ call-bind "^1.0.2"
+ define-properties "^1.2.0"
+ set-function-name "^2.0.0"
+
regexpp@^2.0.1:
version "2.0.1"
resolved "https://registry.yarnpkg.com/regexpp/-/regexpp-2.0.1.tgz#8d19d31cf632482b589049f8281f93dbcba4d07f"
@@ -14995,19 +15466,18 @@ route-recognizer@^0.3.4:
resolved "https://registry.yarnpkg.com/route-recognizer/-/route-recognizer-0.3.4.tgz#39ab1ffbce1c59e6d2bdca416f0932611e4f3ca3"
integrity sha512-2+MhsfPhvauN1O8KaXpXAOfR/fwe8dnUXVM+xw7yt40lJRfPVQxV6yryZm0cgRvAj5fMF/mdRZbL2ptwbs5i2g==
-rst-selector-parser@^2.2.3:
- version "2.2.3"
- resolved "https://registry.yarnpkg.com/rst-selector-parser/-/rst-selector-parser-2.2.3.tgz#81b230ea2fcc6066c89e3472de794285d9b03d91"
- integrity sha512-nDG1rZeP6oFTLN6yNDV/uiAvs1+FS/KlrEwh7+y7dpuApDBy6bI2HTBcc0/V8lv9OTqfyD34eF7au2pm8aBbhA==
- dependencies:
- lodash.flattendeep "^4.4.0"
- nearley "^2.7.10"
-
rsvp@^4.8.4:
version "4.8.5"
resolved "https://registry.yarnpkg.com/rsvp/-/rsvp-4.8.5.tgz#c8f155311d167f68f21e168df71ec5b083113734"
integrity sha512-nfMOlASu9OnRJo1mbEk2cz0D56a1MBNrJ7orjRZQG10XDyuvwksKbuXNp6qa+kbn839HwjwhBzhFmdsaEAfauA==
+run-applescript@^5.0.0:
+ version "5.0.0"
+ resolved "https://registry.yarnpkg.com/run-applescript/-/run-applescript-5.0.0.tgz#e11e1c932e055d5c6b40d98374e0268d9b11899c"
+ integrity sha512-XcT5rBksx1QdIhlFOCtgZkB99ZEouFZ1E2Kc2LHqNW13U3/74YGdkQRmThTwxy4QIyookibDKYZOPqX//6BlAg==
+ dependencies:
+ execa "^5.0.0"
+
run-async@^2.2.0:
version "2.4.1"
resolved "https://registry.yarnpkg.com/run-async/-/run-async-2.4.1.tgz#8440eccf99ea3e70bd409d49aab88e10c189a455"
@@ -15046,6 +15516,16 @@ rxjs@^7.5.5:
dependencies:
tslib "^2.1.0"
+safe-array-concat@^1.0.1:
+ version "1.0.1"
+ resolved "https://registry.yarnpkg.com/safe-array-concat/-/safe-array-concat-1.0.1.tgz#91686a63ce3adbea14d61b14c99572a8ff84754c"
+ integrity sha512-6XbUAseYE2KtOuGueyeobCySj9L4+66Tn6KQMOPQJrAJEowYKW/YR/MGJZl7FdydUdaFu4LYyDZjxf4/Nmo23Q==
+ dependencies:
+ call-bind "^1.0.2"
+ get-intrinsic "^1.2.1"
+ has-symbols "^1.0.3"
+ isarray "^2.0.5"
+
safe-buffer@5.1.2, safe-buffer@~5.1.0, safe-buffer@~5.1.1:
version "5.1.2"
resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.1.2.tgz#991ec69d296e0313747d59bdfd2b745c35f8828d"
@@ -15191,7 +15671,7 @@ semver-compare@^1.0.0:
resolved "https://registry.yarnpkg.com/semver-compare/-/semver-compare-1.0.0.tgz#0dee216a1c941ab37e9efb1788f6afc5ff5537fc"
integrity sha512-YM3/ITh2MJ5MtzaM429anh+x2jiLVjqILF4m4oyQB18W7Ggea7BfqdH/wGMK7dDiMghv/6WG7znWMwUDzJiXow==
-"semver@2 || 3 || 4 || 5", semver@^5.3.0, semver@^5.4.1, semver@^5.5.0, semver@^5.5.1, semver@^5.6.0, semver@^5.7.0, semver@^5.7.1:
+"semver@2 || 3 || 4 || 5", semver@^5.3.0, semver@^5.4.1, semver@^5.5.0, semver@^5.5.1, semver@^5.6.0:
version "5.7.1"
resolved "https://registry.yarnpkg.com/semver/-/semver-5.7.1.tgz#a954f931aeba508d307bbf069eff0c01c96116f7"
integrity sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==
@@ -15206,6 +15686,11 @@ semver@^6.0.0, semver@^6.1.1, semver@^6.1.2, semver@^6.3.0:
resolved "https://registry.yarnpkg.com/semver/-/semver-6.3.0.tgz#ee0a64c8af5e8ceea67687b133761e1becbd1d3d"
integrity sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==
+semver@^6.3.1:
+ version "6.3.1"
+ resolved "https://registry.yarnpkg.com/semver/-/semver-6.3.1.tgz#556d2ef8689146e46dcea4bfdd095f3434dffcb4"
+ integrity sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==
+
semver@^7.1.1, semver@^7.2.1, semver@^7.3.2, semver@^7.3.4, semver@^7.3.5, semver@^7.3.7:
version "7.3.7"
resolved "https://registry.yarnpkg.com/semver/-/semver-7.3.7.tgz#12c5b649afdbf9049707796e22a4028814ce523f"
@@ -15301,6 +15786,25 @@ set-cookie-parser@^2.3.5:
resolved "https://registry.yarnpkg.com/set-cookie-parser/-/set-cookie-parser-2.5.0.tgz#96b59525e1362c94335c3c761100bb6e8f2da4b0"
integrity sha512-cHMAtSXilfyBePduZEBVPTCftTQWz6ehWJD5YNUg4mqvRosrrjKbo4WS8JkB0/RxonMoohHm7cOGH60mDkRQ9w==
+set-function-length@^1.1.1:
+ version "1.1.1"
+ resolved "https://registry.yarnpkg.com/set-function-length/-/set-function-length-1.1.1.tgz#4bc39fafb0307224a33e106a7d35ca1218d659ed"
+ integrity sha512-VoaqjbBJKiWtg4yRcKBQ7g7wnGnLV3M8oLvVWwOk2PdYY6PEFegR1vezXR0tw6fZGF9csVakIRjrJiy2veSBFQ==
+ dependencies:
+ define-data-property "^1.1.1"
+ get-intrinsic "^1.2.1"
+ gopd "^1.0.1"
+ has-property-descriptors "^1.0.0"
+
+set-function-name@^2.0.0, set-function-name@^2.0.1:
+ version "2.0.1"
+ resolved "https://registry.yarnpkg.com/set-function-name/-/set-function-name-2.0.1.tgz#12ce38b7954310b9f61faa12701620a0c882793a"
+ integrity sha512-tMNCiqYVkXIZgc2Hnoy2IvC/f8ezc5koaRFkCjrpWzGpCd3qbZXPzVy9MAZzK1ch/X0jvSkojys3oqJN0qCmdA==
+ dependencies:
+ define-data-property "^1.0.1"
+ functions-have-names "^1.2.3"
+ has-property-descriptors "^1.0.0"
+
set-value@^2.0.0, set-value@^2.0.1:
version "2.0.1"
resolved "https://registry.yarnpkg.com/set-value/-/set-value-2.0.1.tgz#a18d40530e6f07de4228c7defe4227af8cad005b"
@@ -15370,11 +15874,6 @@ shebang-regex@^3.0.0:
resolved "https://registry.yarnpkg.com/shebang-regex/-/shebang-regex-3.0.0.tgz#ae16f1644d873ecad843b0307b143362d4c42172"
integrity sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==
-shell-quote@^1.6.1:
- version "1.7.3"
- resolved "https://registry.yarnpkg.com/shell-quote/-/shell-quote-1.7.3.tgz#aa40edac170445b9a431e17bb62c0b881b9c4123"
- integrity sha512-Vpfqwm4EnqGdlsBFNmHhxhElJYrdfcxPThu+ryKS5J8L/fhAwLazFZtq+S+TWZ9ANj2piSQLGj6NQg+lKPmxrw==
-
shellwords@^0.1.1:
version "0.1.1"
resolved "https://registry.yarnpkg.com/shellwords/-/shellwords-0.1.1.tgz#d6b9181c1a48d397324c84871efbcfc73fc0654b"
@@ -15399,7 +15898,7 @@ sigmund@^1.0.1:
resolved "https://registry.yarnpkg.com/sigmund/-/sigmund-1.0.1.tgz#3ff21f198cad2175f9f3b781853fd94d0d19b590"
integrity sha512-fCvEXfh6NWpm+YSuY2bpXb/VIihqWA6hLsgboC+0nl71Q7N7o2eaCW8mJa/NLvQhs6jpd3VZV4UiUQlV6+lc8g==
-signal-exit@^3.0.0, signal-exit@^3.0.2, signal-exit@^3.0.7:
+signal-exit@^3.0.0, signal-exit@^3.0.2, signal-exit@^3.0.3, signal-exit@^3.0.7:
version "3.0.7"
resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.7.tgz#a9a1767f8af84155114eaabd73f99273c8f59ad9"
integrity sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==
@@ -15777,6 +16276,13 @@ steno@^0.4.1:
dependencies:
graceful-fs "^4.1.3"
+stop-iteration-iterator@^1.0.0:
+ version "1.0.0"
+ resolved "https://registry.yarnpkg.com/stop-iteration-iterator/-/stop-iteration-iterator-1.0.0.tgz#6a60be0b4ee757d1ed5254858ec66b10c49285e4"
+ integrity sha512-iCGQj+0l0HOdZ2AEeBADlsRC+vsnDsZsbdSiH1yNSjcfKM7fdpCMfqAL/dwF5BLiw/XhRft/Wax6zQbhq2BcjQ==
+ dependencies:
+ internal-slot "^1.0.4"
+
stream-browserify@^2.0.1:
version "2.0.2"
resolved "https://registry.yarnpkg.com/stream-browserify/-/stream-browserify-2.0.2.tgz#87521d38a44aa7ee91ce1cd2a47df0cb49dd660b"
@@ -15899,16 +16405,7 @@ string.prototype.matchall@^4.0.8:
regexp.prototype.flags "^1.4.3"
side-channel "^1.0.4"
-string.prototype.padend@^3.0.0:
- version "3.1.3"
- resolved "https://registry.yarnpkg.com/string.prototype.padend/-/string.prototype.padend-3.1.3.tgz#997a6de12c92c7cb34dc8a201a6c53d9bd88a5f1"
- integrity sha512-jNIIeokznm8SD/TZISQsZKYu7RJyheFNt84DUPrh482GC8RVp2MKqm2O5oBRdGxbDQoXrhhWtPIWQOiy20svUg==
- dependencies:
- call-bind "^1.0.2"
- define-properties "^1.1.3"
- es-abstract "^1.19.1"
-
-string.prototype.trim@^1.2.1, string.prototype.trim@^1.2.4:
+string.prototype.trim@^1.2.4:
version "1.2.6"
resolved "https://registry.yarnpkg.com/string.prototype.trim/-/string.prototype.trim-1.2.6.tgz#824960787db37a9e24711802ed0c1d1c0254f83e"
integrity sha512-8lMR2m+U0VJTPp6JjvJTtGyc4FIGq9CdRt7O9p6T0e6K4vjU+OP+SQJpbe/SBmRcCUIvNUnjsbmY6lnMp8MhsQ==
@@ -15926,6 +16423,15 @@ string.prototype.trim@^1.2.7:
define-properties "^1.1.4"
es-abstract "^1.20.4"
+string.prototype.trim@^1.2.8:
+ version "1.2.8"
+ resolved "https://registry.yarnpkg.com/string.prototype.trim/-/string.prototype.trim-1.2.8.tgz#f9ac6f8af4bd55ddfa8895e6aea92a96395393bd"
+ integrity sha512-lfjY4HcixfQXOfaqCvcBuOIapyaroTXhbkfJN3gcB1OtyupngWK4sEET9Knd0cXd28kTUqu/kHoV4HKSJdnjiQ==
+ dependencies:
+ call-bind "^1.0.2"
+ define-properties "^1.2.0"
+ es-abstract "^1.22.1"
+
string.prototype.trimend@^1.0.5:
version "1.0.5"
resolved "https://registry.yarnpkg.com/string.prototype.trimend/-/string.prototype.trimend-1.0.5.tgz#914a65baaab25fbdd4ee291ca7dde57e869cb8d0"
@@ -15944,6 +16450,15 @@ string.prototype.trimend@^1.0.6:
define-properties "^1.1.4"
es-abstract "^1.20.4"
+string.prototype.trimend@^1.0.7:
+ version "1.0.7"
+ resolved "https://registry.yarnpkg.com/string.prototype.trimend/-/string.prototype.trimend-1.0.7.tgz#1bb3afc5008661d73e2dc015cd4853732d6c471e"
+ integrity sha512-Ni79DqeB72ZFq1uH/L6zJ+DKZTkOtPIHovb3YZHQViE+HDouuU4mBrLOLDn5Dde3RF8qw5qVETEjhu9locMLvA==
+ dependencies:
+ call-bind "^1.0.2"
+ define-properties "^1.2.0"
+ es-abstract "^1.22.1"
+
string.prototype.trimstart@^1.0.5:
version "1.0.5"
resolved "https://registry.yarnpkg.com/string.prototype.trimstart/-/string.prototype.trimstart-1.0.5.tgz#5466d93ba58cfa2134839f81d7f42437e8c01fef"
@@ -15962,6 +16477,15 @@ string.prototype.trimstart@^1.0.6:
define-properties "^1.1.4"
es-abstract "^1.20.4"
+string.prototype.trimstart@^1.0.7:
+ version "1.0.7"
+ resolved "https://registry.yarnpkg.com/string.prototype.trimstart/-/string.prototype.trimstart-1.0.7.tgz#d4cdb44b83a4737ffbac2d406e405d43d0184298"
+ integrity sha512-NGhtDFu3jCEm7B4Fy0DpLewdJQOZcQ0rGbwQ/+stjnrp2i+rlKeCvos9hOIeCmqwratM47OBxY7uFZzjxHXmrg==
+ dependencies:
+ call-bind "^1.0.2"
+ define-properties "^1.2.0"
+ es-abstract "^1.22.1"
+
string_decoder@^1.0.0, string_decoder@^1.1.1:
version "1.3.0"
resolved "https://registry.yarnpkg.com/string_decoder/-/string_decoder-1.3.0.tgz#42f114594a46cf1a8e30b0a84f56c78c3edac21e"
@@ -16256,6 +16780,14 @@ symbol@^0.2.1:
resolved "https://registry.yarnpkg.com/symbol/-/symbol-0.2.3.tgz#3b9873b8a901e47c6efe21526a3ac372ef28bbc7"
integrity sha512-IUW+ek7apEaW5bFhS6WpYoNtVpNTlNoqB/PH7YiMWQTxSPeXCzG4PILVakwXivJt3ZXWeO1fIJnUd/L9A/VeGA==
+synckit@^0.8.5:
+ version "0.8.5"
+ resolved "https://registry.yarnpkg.com/synckit/-/synckit-0.8.5.tgz#b7f4358f9bb559437f9f167eb6bc46b3c9818fa3"
+ integrity sha512-L1dapNV6vu2s/4Sputv8xGsCdAVlb5nRDMFU/E27D44l5U6cw1g0dGd45uLc+OXjNMmF4ntiMdCimzcjFKQI8Q==
+ dependencies:
+ "@pkgr/utils" "^2.3.1"
+ tslib "^2.5.0"
+
table@^5.2.3:
version "5.4.6"
resolved "https://registry.yarnpkg.com/table/-/table-5.4.6.tgz#1292d19500ce3f86053b05f0e8e7e4a3bb21079e"
@@ -16424,6 +16956,11 @@ tiny-warning@^1.0.2:
resolved "https://registry.yarnpkg.com/tiny-warning/-/tiny-warning-1.0.3.tgz#94a30db453df4c643d0fd566060d60a875d84754"
integrity sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA==
+titleize@^3.0.0:
+ version "3.0.0"
+ resolved "https://registry.yarnpkg.com/titleize/-/titleize-3.0.0.tgz#71c12eb7fdd2558aa8a44b0be83b8a76694acd53"
+ integrity sha512-KxVu8EYHDPBdUYdKZdKtU2aj2XfEx9AfjXxE/Aj0vT06w2icA09Vus1rh6eSu1y01akYg6BjIK/hxyLJINoMLQ==
+
tldjs@^2.3.1:
version "2.3.1"
resolved "https://registry.yarnpkg.com/tldjs/-/tldjs-2.3.1.tgz#cf09c3eb5d7403a9e214b7d65f3cf9651c0ab039"
@@ -16583,6 +17120,11 @@ tslib@^2.0.0, tslib@^2.1.0, tslib@^2.2.0:
resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.4.0.tgz#7cecaa7f073ce680a05847aa77be941098f36dc3"
integrity sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ==
+tslib@^2.5.0, tslib@^2.6.0:
+ version "2.6.2"
+ resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.6.2.tgz#703ac29425e7b37cd6fd456e92404d46d1f3e4ae"
+ integrity sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==
+
tsutils@^3.21.0:
version "3.21.0"
resolved "https://registry.yarnpkg.com/tsutils/-/tsutils-3.21.0.tgz#b48717d394cea6c1e096983eed58e9d61715b623"
@@ -16659,6 +17201,36 @@ type-is@~1.6.18:
media-typer "0.3.0"
mime-types "~2.1.24"
+typed-array-buffer@^1.0.0:
+ version "1.0.0"
+ resolved "https://registry.yarnpkg.com/typed-array-buffer/-/typed-array-buffer-1.0.0.tgz#18de3e7ed7974b0a729d3feecb94338d1472cd60"
+ integrity sha512-Y8KTSIglk9OZEr8zywiIHG/kmQ7KWyjseXs1CbSo8vC42w7hg2HgYTxSWwP0+is7bWDc1H+Fo026CpHFwm8tkw==
+ dependencies:
+ call-bind "^1.0.2"
+ get-intrinsic "^1.2.1"
+ is-typed-array "^1.1.10"
+
+typed-array-byte-length@^1.0.0:
+ version "1.0.0"
+ resolved "https://registry.yarnpkg.com/typed-array-byte-length/-/typed-array-byte-length-1.0.0.tgz#d787a24a995711611fb2b87a4052799517b230d0"
+ integrity sha512-Or/+kvLxNpeQ9DtSydonMxCx+9ZXOswtwJn17SNLvhptaXYDJvkFFP5zbfU/uLmvnBJlI4yrnXRxpdWH/M5tNA==
+ dependencies:
+ call-bind "^1.0.2"
+ for-each "^0.3.3"
+ has-proto "^1.0.1"
+ is-typed-array "^1.1.10"
+
+typed-array-byte-offset@^1.0.0:
+ version "1.0.0"
+ resolved "https://registry.yarnpkg.com/typed-array-byte-offset/-/typed-array-byte-offset-1.0.0.tgz#cbbe89b51fdef9cd6aaf07ad4707340abbc4ea0b"
+ integrity sha512-RD97prjEt9EL8YgAgpOkf3O4IF9lhJFr9g0htQkm0rchFp/Vx7LW5Q8fSXXub7BXAODyUQohRMyOc3faCPd0hg==
+ dependencies:
+ available-typed-arrays "^1.0.5"
+ call-bind "^1.0.2"
+ for-each "^0.3.3"
+ has-proto "^1.0.1"
+ is-typed-array "^1.1.10"
+
typed-array-length@^1.0.4:
version "1.0.4"
resolved "https://registry.yarnpkg.com/typed-array-length/-/typed-array-length-1.0.4.tgz#89d83785e5c4098bec72e08b319651f0eac9c1bb"
@@ -16864,6 +17436,11 @@ unset-value@^1.0.0:
has-value "^0.3.1"
isobject "^3.0.0"
+untildify@^4.0.0:
+ version "4.0.0"
+ resolved "https://registry.yarnpkg.com/untildify/-/untildify-4.0.0.tgz#2bc947b953652487e4600949fb091e3ae8cd919b"
+ integrity sha512-KK8xQ1mkzZeg9inewmFVDNkg3l5LUhoq9kN6iWYB/CC9YMG8HA+c1Q8HwDe6dEX7kErrEVNVBO3fWsVq5iDgtw==
+
upath@^1.1.1:
version "1.2.0"
resolved "https://registry.yarnpkg.com/upath/-/upath-1.2.0.tgz#8f66dbcd55a883acdae4408af8b035a5044c1894"
@@ -17441,11 +18018,50 @@ which-boxed-primitive@^1.0.2:
is-string "^1.0.5"
is-symbol "^1.0.3"
+which-builtin-type@^1.1.3:
+ version "1.1.3"
+ resolved "https://registry.yarnpkg.com/which-builtin-type/-/which-builtin-type-1.1.3.tgz#b1b8443707cc58b6e9bf98d32110ff0c2cbd029b"
+ integrity sha512-YmjsSMDBYsM1CaFiayOVT06+KJeXf0o5M/CAd4o1lTadFAtacTUM49zoYxr/oroopFDfhvN6iEcBxUyc3gvKmw==
+ dependencies:
+ function.prototype.name "^1.1.5"
+ has-tostringtag "^1.0.0"
+ is-async-function "^2.0.0"
+ is-date-object "^1.0.5"
+ is-finalizationregistry "^1.0.2"
+ is-generator-function "^1.0.10"
+ is-regex "^1.1.4"
+ is-weakref "^1.0.2"
+ isarray "^2.0.5"
+ which-boxed-primitive "^1.0.2"
+ which-collection "^1.0.1"
+ which-typed-array "^1.1.9"
+
+which-collection@^1.0.1:
+ version "1.0.1"
+ resolved "https://registry.yarnpkg.com/which-collection/-/which-collection-1.0.1.tgz#70eab71ebbbd2aefaf32f917082fc62cdcb70906"
+ integrity sha512-W8xeTUwaln8i3K/cY1nGXzdnVZlidBcagyNFtBdD5kxnb4TvGKR7FfSIS3mYpwWS1QUCutfKz8IY8RjftB0+1A==
+ dependencies:
+ is-map "^2.0.1"
+ is-set "^2.0.1"
+ is-weakmap "^2.0.1"
+ is-weakset "^2.0.1"
+
which-module@^2.0.0:
version "2.0.0"
resolved "https://registry.yarnpkg.com/which-module/-/which-module-2.0.0.tgz#d9ef07dce77b9902b8a3a8fa4b31c3e3f7e6e87a"
integrity sha512-B+enWhmw6cjfVC7kS8Pj9pCrKSc5txArRyaYGe088shv/FGWH+0Rjx/xPgtsWfsUtS27FkP697E4DDhgrgoc0Q==
+which-typed-array@^1.1.11, which-typed-array@^1.1.13:
+ version "1.1.13"
+ resolved "https://registry.yarnpkg.com/which-typed-array/-/which-typed-array-1.1.13.tgz#870cd5be06ddb616f504e7b039c4c24898184d36"
+ integrity sha512-P5Nra0qjSncduVPEAr7xhoF5guty49ArDTwzJ/yNuPIbZppyRxFQsRCWrocxIY+CnMVG+qfbU2FmDKyvSGClow==
+ dependencies:
+ available-typed-arrays "^1.0.5"
+ call-bind "^1.0.4"
+ for-each "^0.3.3"
+ gopd "^1.0.1"
+ has-tostringtag "^1.0.0"
+
which-typed-array@^1.1.9:
version "1.1.9"
resolved "https://registry.yarnpkg.com/which-typed-array/-/which-typed-array-1.1.9.tgz#307cf898025848cf995e795e8423c7f337efbde6"