From 297dc7aeac42f7b9947677d7452ca9ad00bf6372 Mon Sep 17 00:00:00 2001 From: Marc Rutkowski Date: Wed, 18 Sep 2024 18:31:16 +0200 Subject: [PATCH] =?UTF-8?q?D=C3=A9place=20une=20partie=20du=20code=20du=20?= =?UTF-8?q?panier=20dans=20le=20package=20ui=20pour=20pouvoir=20le=20r?= =?UTF-8?q?=C3=A9utiliser=20dans=20l'app?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../ActionImpact/LienExterneModale.tsx | 24 -- .../ActionImpact/ModaleActionImpact.tsx | 195 ++-------------- .../InfoActionImpact/InfoActionImpact.tsx | 221 ++++++++++++++++++ .../src/components/InfoActionImpact/index.ts | 1 + packages/ui/src/index.ts | 1 + 5 files changed, 242 insertions(+), 200 deletions(-) delete mode 100644 packages/panier/components/ActionImpact/LienExterneModale.tsx create mode 100644 packages/ui/src/components/InfoActionImpact/InfoActionImpact.tsx create mode 100644 packages/ui/src/components/InfoActionImpact/index.ts diff --git a/packages/panier/components/ActionImpact/LienExterneModale.tsx b/packages/panier/components/ActionImpact/LienExterneModale.tsx deleted file mode 100644 index 0ad0e9d3525..00000000000 --- a/packages/panier/components/ActionImpact/LienExterneModale.tsx +++ /dev/null @@ -1,24 +0,0 @@ -import {Icon} from '@tet/ui'; - -type LienExterneModaleProps = { - url: string; - label: string; -}; - -const LienExterneModale = ({url, label}: LienExterneModaleProps) => { - return ( -
- - - {label} - -
- ); -}; - -export default LienExterneModale; diff --git a/packages/panier/components/ActionImpact/ModaleActionImpact.tsx b/packages/panier/components/ActionImpact/ModaleActionImpact.tsx index 29f32def0db..db469ea43b7 100644 --- a/packages/panier/components/ActionImpact/ModaleActionImpact.tsx +++ b/packages/panier/components/ActionImpact/ModaleActionImpact.tsx @@ -1,39 +1,28 @@ -/* eslint-disable react/no-unescaped-entities */ import classNames from 'classnames'; import {ModaleActionImpactProps} from './types'; import { - Badge, Button, - Divider, - InfoTooltip, Modal, ModalFooter, ModalFooterSection, + InfoActionImpact, } from '@tet/ui'; -import LienExterneModale from './LienExterneModale'; import Markdown from '@components/Markdown'; -const URL_AIDES_TERRITOIRES = 'https://aides-territoires.beta.gouv.fr'; - /** * Modale action à impact du panier d'actions */ +export const ModaleActionImpact = (props: ModaleActionImpactProps) => { + const { + children, + titre, + description, + statut, + panier, + onToggleSelected, + onUpdateStatus, + } = props; -export const ModaleActionImpact = ({ - children, - titre, - thematiques, - budget, - description, - miseEnOeuvre, - ressources, - rex, - subventions, - statut, - panier, - onToggleSelected, - onUpdateStatus, -}: ModaleActionImpactProps) => { return ( { return ( -
- {/* Badges thématiques */} - {!!thematiques.length && ( -
- {thematiques.map(theme => ( - - ))} -
- )} - - {/* Description */} - - - {/* Temps de mise en oeuvre */} -

- Temps de mise en oeuvre :{' '} - - {miseEnOeuvre?.nom.toLowerCase() ?? 'non estimé'} - - -

- Temps estimatif correspondant au déploiement de l’action - une fois celle-ci validée, de son démarrage à ses - premières réalisations. -
-
- Cette temporalité peut varier en fonction des - priorisations, des moyens et des ressources disponibles. -
- -
- } - /> -

- - {/* Estimation budgétaire */} -

- Estimation budgétaire :{' '} - - {budget?.nom.toLowerCase() ?? 'non estimé'} - - -

- Estimation budgétaire HT (investissement et - fonctionnement, hors subvention). -
-
- Une évaluation précise du budget sera à réaliser lors du - dimensionnement exacte de l’action. -
- - - } + -

- - {/* Ressources externes */} - {!!ressources && ressources.length > 0 && ( -
- {ressources.map(r => ( - - ))} -
- )} - - - - {/* REX */} -
-
- D’autres collectivités l’ont fait : -
-
- {!rex || rex.length === 0 ? ( - - Exemples d'autres collectivités à venir - - ) : ( - rex.map(r => ) - )} -
-
- - {/* Subventions mobilisables */} -
-
- Subventions mobilisables :{' '} - -
- De nombreux programmes d’aides nationaux et locaux - peuvent vous permettre de financer ou d’accompagner vos - projets. -
-
- Les liens directs vers les programmes concernés seront - prochainement disponibles sur la plateforme. -
-
- } - /> - -
- - {!!subventions && - subventions.length > 0 && - subventions.map( - s => - s.url && - s.url !== URL_AIDES_TERRITOIRES && - s.url !== `${URL_AIDES_TERRITOIRES}/` && ( - - ), - )} -
- - + } + /> ); }} renderFooter={({close}) => ( diff --git a/packages/ui/src/components/InfoActionImpact/InfoActionImpact.tsx b/packages/ui/src/components/InfoActionImpact/InfoActionImpact.tsx new file mode 100644 index 00000000000..73bb1dd4a58 --- /dev/null +++ b/packages/ui/src/components/InfoActionImpact/InfoActionImpact.tsx @@ -0,0 +1,221 @@ +import { + ActionImpactFourchetteBudgetaire, + ActionImpactTempsMiseEnOeuvre, + ActionImpactThematique, +} from '@tet/api'; + +import {Badge} from 'design-system/Badge'; +import {Button} from 'design-system/Button'; +import {Divider} from 'design-system/Divider'; +import {InfoTooltip} from 'design-system/Tooltip'; +import {ReactNode} from 'react'; + +const URL_AIDES_TERRITOIRES = 'https://aides-territoires.beta.gouv.fr'; + +type LinkType = { + url: string; + label: string; +}; + +export type ActionImpactDetail = { + /** Titre de l'action à impact */ + titre: string; + /** Thématiques de l'action à impact */ + thematiques: ActionImpactThematique[]; + /** Budget de la mise en place de l'action : petit, moyen ou élevé */ + budget?: ActionImpactFourchetteBudgetaire; + /** Description de l'action à impact */ + description: string; + /** Temps de mise en oeuvre */ + miseEnOeuvre?: ActionImpactTempsMiseEnOeuvre; + /** Lien vers les ressources externes */ + ressources?: LinkType[] | null; + /** Lien vers les retours d'expérience */ + rex?: LinkType[] | null; + /** Lien vers les subventions mobilisables */ + subventions?: LinkType[] | null; + /** Statut de l'action */ + statut?: 'non_pertinent' | 'en_cours' | 'realise' | null; +}; + +type InfoActionImpactProps = { + /** Détail de l'action */ + action: ActionImpactDetail; + /** Description de l'action à impact rendu depuis le contenu Markdown */ + descriptionMarkdown: React.JSX.Element; + /** Styles additionnels */ + className?: string; +}; + +/** + * Affiche les informations détaillées d'une action à impact + */ +export const InfoActionImpact = ({ + action, + descriptionMarkdown, + className, +}: InfoActionImpactProps) => { + const {thematiques, budget, miseEnOeuvre, ressources, rex, subventions} = + action; + + return ( +
+ {/* Badges thématiques */} + {!!thematiques.length && ( +
+ {thematiques.map(theme => ( + + ))} +
+ )} + + {/* Description */} + {descriptionMarkdown} + + {/* Temps de mise en oeuvre */} +

+ Temps de mise en oeuvre :{' '} + + {miseEnOeuvre?.nom.toLowerCase() ?? 'non estimé'} + + +

+ Temps estimatif correspondant au déploiement de l’action une + fois celle-ci validée, de son démarrage à ses premières + réalisations. +
+
+ Cette temporalité peut varier en fonction des priorisations, des + moyens et des ressources disponibles. +
+ +
+ } + /> +

+ + {/* Estimation budgétaire */} +

+ Estimation budgétaire :{' '} + + {budget?.nom.toLowerCase() ?? 'non estimé'} + + +

+ Estimation budgétaire HT (investissement et fonctionnement, hors + subvention). +
+
+ Une évaluation précise du budget sera à réaliser lors du + dimensionnement exacte de l’action. +
+ + + } + /> +

+ + {/* Ressources externes */} + {!!ressources && ressources.length > 0 && ( +
+ {ressources.map((r, i) => ( + + ))} +
+ )} + + + + {/* REX */} +
+
+ D’autres collectivités l’ont fait : +
+
+ {!rex || rex.length === 0 ? ( + + Exemples d'autres collectivités à venir + + ) : ( + rex.map((r, i) => ( + + )) + )} +
+
+ + {/* Subventions mobilisables */} +
+
+ Subventions mobilisables :{' '} + +
+ De nombreux programmes d’aides nationaux et locaux peuvent + vous permettre de financer ou d’accompagner vos projets. +
+
+ Les liens directs vers les programmes concernés seront + prochainement disponibles sur la plateforme. +
+
+ } + /> + +
+ + {!!subventions && + subventions.length > 0 && + subventions.map( + (s, i) => + s.url && + s.url !== URL_AIDES_TERRITOIRES && + s.url !== `${URL_AIDES_TERRITOIRES}/` && ( + + ) + )} +
+ + + ); +}; diff --git a/packages/ui/src/components/InfoActionImpact/index.ts b/packages/ui/src/components/InfoActionImpact/index.ts new file mode 100644 index 00000000000..381ba1fde0c --- /dev/null +++ b/packages/ui/src/components/InfoActionImpact/index.ts @@ -0,0 +1 @@ +export * from './InfoActionImpact'; diff --git a/packages/ui/src/index.ts b/packages/ui/src/index.ts index 2eebad9436f..9d109c061f6 100644 --- a/packages/ui/src/index.ts +++ b/packages/ui/src/index.ts @@ -9,6 +9,7 @@ export * from './hooks/useCopyToClipboard'; // dossier composants export * from './components/layout'; export * from './components/tracking'; +export * from './components/InfoActionImpact'; // dossier design-system export * from './design-system/Accordion';