From 617d0ee6dff1ea006462c74705d3fe0b598074d1 Mon Sep 17 00:00:00 2001 From: Alice Dahan Date: Fri, 27 Dec 2024 11:03:31 +0100 Subject: [PATCH] feat(lodeom): stylise les switchs --- site/source/components/EffectifSwitch.tsx | 55 +++++++++--- .../RégularisationSwitch.tsx | 83 ++++++++++++++----- site/source/locales/ui-en.yaml | 3 +- site/source/locales/ui-fr.yaml | 3 +- .../pages/assistants/components/Fields.tsx | 44 +++++----- .../lodeom/components/BarèmeSwitch.tsx | 41 +++++++-- .../lodeom/components/ZoneSwitch.tsx | 63 +++++++++++--- .../components/CongésPayésSwitch.tsx | 30 +++++-- 8 files changed, 239 insertions(+), 83 deletions(-) diff --git a/site/source/components/EffectifSwitch.tsx b/site/source/components/EffectifSwitch.tsx index 725a1c5a1..50edeb7b8 100644 --- a/site/source/components/EffectifSwitch.tsx +++ b/site/source/components/EffectifSwitch.tsx @@ -2,9 +2,12 @@ import { DottedName } from 'modele-social' import { useEffect, useState } from 'react' import { useTranslation } from 'react-i18next' import { useDispatch } from 'react-redux' +import { styled } from 'styled-components' import { useEngine } from '@/components/utils/EngineContext' import { Radio, ToggleGroup } from '@/design-system' +import { Strong } from '@/design-system/typography' +import { Body } from '@/design-system/typography/paragraphs' import { enregistreLaRéponse } from '@/store/actions/actions' export default function EffectifSwitch() { @@ -21,16 +24,46 @@ export default function EffectifSwitch() { }, [currentEffectif, engineEffectif]) return ( - { - setCurrentEffectif(value) - dispatch(enregistreLaRéponse(dottedName, `'${value}'`)) - }} - aria-label={t("Effectif de l'entreprise")} - > - {t('Moins de 50 salariés')} - {t('Plus de 50 salariés')} - + + + {t("Effectif de l'entreprise")} : + + { + setCurrentEffectif(value) + dispatch(enregistreLaRéponse(dottedName, `'${value}'`)) + }} + aria-labelledby="effectif-switch-label" + > + {t('Moins de 50 salariés')} + {t('Plus de 50 salariés')} + + ) } + +const Container = styled.div` + text-align: left; + display: flex; + flex-direction: column; + flex-wrap: wrap; + column-gap: ${({ theme }) => theme.spacings.sm}; + width: 100%; +` +const StyledBody = styled(Body)` + margin: ${({ theme }) => theme.spacings.xxs} 0; +` +const StyledToggleGroup = styled(ToggleGroup)` + display: flex; + > * { + display: flex; + /* flex-direction: column; */ + } +` +const StyledRadio = styled(Radio)` + white-space: nowrap; + > span { + width: 100%; + } +` diff --git a/site/source/components/RéductionDeCotisations/RégularisationSwitch.tsx b/site/source/components/RéductionDeCotisations/RégularisationSwitch.tsx index 13f4520f1..9d9cd3baa 100644 --- a/site/source/components/RéductionDeCotisations/RégularisationSwitch.tsx +++ b/site/source/components/RéductionDeCotisations/RégularisationSwitch.tsx @@ -1,6 +1,9 @@ import { useTranslation } from 'react-i18next' +import { styled } from 'styled-components' import { Radio, ToggleGroup } from '@/design-system' +import { Strong } from '@/design-system/typography' +import { Body } from '@/design-system/typography/paragraphs' import { RégularisationMethod } from '@/utils/réductionDeCotisations' type Props = { @@ -15,28 +18,62 @@ export default function RégularisationSwitch({ const { t } = useTranslation() return ( - { - setRégularisationMethod(value as RégularisationMethod) - }} - aria-label={t( - 'pages.simulateurs.réduction-générale.régularisation.type', - 'Type de régularisation' - )} - > - - {t( - 'pages.simulateurs.réduction-générale.régularisation.annuelle', - 'Régularisation annuelle' - )} - - - {t( - 'pages.simulateurs.réduction-générale.régularisation.progressive', - 'Régularisation progressive' - )} - - + + + + {t( + 'pages.simulateurs.réduction-générale.régularisation.type', + 'Type de régularisation' + )}{' '} + : + + + + { + setRégularisationMethod(value as RégularisationMethod) + }} + aria-labelledby="régularisation-switch-label" + > + + {t( + 'pages.simulateurs.réduction-générale.régularisation.annuelle', + 'Régularisation annuelle' + )} + + + {t( + 'pages.simulateurs.réduction-générale.régularisation.progressive', + 'Régularisation progressive' + )} + + + ) } + +const Container = styled.div` + text-align: left; + display: flex; + flex-direction: column; + flex-wrap: wrap; + column-gap: ${({ theme }) => theme.spacings.sm}; + width: 100%; +` +const StyledBody = styled(Body)` + margin: ${({ theme }) => theme.spacings.xxs} 0; +` +const StyledToggleGroup = styled(ToggleGroup)` + display: flex; + > * { + display: flex; + /* flex-direction: column; */ + } +` +const StyledRadio = styled(Radio)` + white-space: nowrap; + > span { + width: 100%; + } +` diff --git a/site/source/locales/ui-en.yaml b/site/source/locales/ui-en.yaml index 222191908..f46e2e62a 100644 --- a/site/source/locales/ui-en.yaml +++ b/site/source/locales/ui-en.yaml @@ -379,7 +379,6 @@ Vous êtes dirigeant d'une SAS(U) ? <2>Accéder au simulateur de revenu dédié< with a company director, there are <1>3 possible statuses for you<3>(collaborating spouse, <6>associate spouse or <9>salaried spouse). -Zone de l'entreprise: Company zone accessibility: description: Référentiel Général d'Amélioration de l'Accessibilité (General Accessibility Improvement Reference System) @@ -1451,6 +1450,7 @@ pages: included in the simulator. title: Corporate tax simulator lodeom: + barème-switch-label: "Scale to be applied :" legend: Employee's gross salary and applicable Lodeom exemption meta: description: Estimated amount of Lodeom exemption. This exemption applies, under @@ -1490,6 +1490,7 @@ pages: salaries below 3.5 SMIC. This means, for 2024, a total remuneration not exceeding <2>€6,306.30 gross per month. stage: The Lodeom exemption does not apply to internship bonuses. + zone-switch-label: Company location médecin: meta: description: Calculation of net income after deduction of contributions, based diff --git a/site/source/locales/ui-fr.yaml b/site/source/locales/ui-fr.yaml index 4945f0d04..0cc6d9272 100644 --- a/site/source/locales/ui-fr.yaml +++ b/site/source/locales/ui-fr.yaml @@ -402,7 +402,6 @@ Vous êtes dirigeant d'une SAS(U) ? <2>Accéder au simulateur de revenu dédié< "Vous êtes marié(e), pacsé(e) ou en union libre avec un chef d’entreprise : il existe <1>3 statuts possibles pour vous (<3>conjoint collaborateur, <6>conjoint associé ou <9>conjoint salarié)." -Zone de l'entreprise: Zone de l'entreprise accessibility: description: Référentiel Général d’Amélioration de l’Accessibilité title: Accessibilité @@ -1544,6 +1543,7 @@ pages: pas intégrés dans le simulateur. title: Simulateur d'impôt sur les sociétés lodeom: + barème-switch-label: "Barème à appliquer :" legend: Rémunération brute du salarié et exonération Lodeom applicable meta: description: Estimation du montant de l'exonération Lodeom. Cette exonération @@ -1587,6 +1587,7 @@ pages: 2024, une rémunération totale qui ne dépasse pas <2>6 306,30 € bruts par mois. stage: L'exonération Lodeom ne s'applique pas sur les gratifications de stage. + zone-switch-label: Localisation de l'entreprise médecin: meta: description: Calcul du revenu net après déduction des cotisations à partir du diff --git a/site/source/pages/assistants/components/Fields.tsx b/site/source/pages/assistants/components/Fields.tsx index bd31aef61..a00af0864 100644 --- a/site/source/pages/assistants/components/Fields.tsx +++ b/site/source/pages/assistants/components/Fields.tsx @@ -3,7 +3,7 @@ import { DottedName } from 'modele-social' import { PublicodesExpression, RuleNode } from 'publicodes' import { useCallback, useContext } from 'react' import { useDispatch, useSelector } from 'react-redux' -import { styled } from 'styled-components' +import { IStyledComponent, styled } from 'styled-components' import { ExplicableRule } from '@/components/conversation/Explicable' import RuleInput from '@/components/conversation/RuleInput' @@ -73,6 +73,7 @@ type SimpleFieldProps = { showSuggestions?: boolean label?: string ['aria-label']?: string + labelStyle?: IStyledComponent<'web', object> } export function SimpleField(props: SimpleFieldProps) { @@ -82,6 +83,7 @@ export function SimpleField(props: SimpleFieldProps) { summary, showSuggestions = false, label, + labelStyle, } = props const dispatch = useDispatch() const engine = useContext(EngineContext) @@ -95,39 +97,38 @@ export function SimpleField(props: SimpleFieldProps) { [dispatch] ) - let displayedQuestion = - question ?? evaluateQuestion(engine, engine.getRule(dottedName)) - const labelId = useSSRSafeId() const targetUnit = useSelector(targetUnitSelector) if (evaluation.nodeValue === null) { return null } - let displayedLabel = - label ?? - (!displayedQuestion - ? rule.title + (rule.rawNode.résumé ? ` – ${rule.rawNode.résumé}` : '') - : undefined) + let displayedLabel = label + if (!displayedLabel) { + displayedLabel = + question ?? evaluateQuestion(engine, engine.getRule(dottedName)) + } + if (!displayedLabel) { + displayedLabel = + rule.title + (rule.rawNode.résumé ? ` – ${rule.rawNode.résumé}` : '') + } + if (meta.requis === 'oui') { if (displayedLabel) { displayedLabel += ' *' } - if (displayedQuestion) { - displayedQuestion += ' *' - } + } + + const markdownComponents = { + p: labelStyle ?? Intro, } return ( - {displayedQuestion ? ( - - {displayedQuestion} - - - ) : ( - - )} + + {displayedLabel} + + {summary && {summary ?? rule.rawNode.résumé}} + + + + {t( + 'pages.simulateurs.lodeom.barème-switch-label', + 'Barème à appliquer :' + )} + +

+ )} + labelStyle={StyledBody} + /> + ) ) } + +const Container = styled.div` + text-align: left; + display: flex; + flex-direction: column; + flex-wrap: wrap; + column-gap: ${({ theme }) => theme.spacings.sm}; + width: 100%; + margin-bottom: -${({ theme }) => theme.spacings.xl}; +` +const StyledBody = styled(Body)` + margin: ${({ theme }) => theme.spacings.xxs} 0; +` diff --git a/site/source/pages/simulateurs/lodeom/components/ZoneSwitch.tsx b/site/source/pages/simulateurs/lodeom/components/ZoneSwitch.tsx index a50b43691..cbb6130bd 100644 --- a/site/source/pages/simulateurs/lodeom/components/ZoneSwitch.tsx +++ b/site/source/pages/simulateurs/lodeom/components/ZoneSwitch.tsx @@ -1,6 +1,9 @@ import { useTranslation } from 'react-i18next' +import { styled } from 'styled-components' import { Radio, ToggleGroup } from '@/design-system' +import { Strong } from '@/design-system/typography' +import { Body } from '@/design-system/typography/paragraphs' import { useZoneLodeom } from '@/hooks/useZoneLodeom' export default function ZoneSwitch() { @@ -8,17 +11,53 @@ export default function ZoneSwitch() { const { t } = useTranslation() return ( - { - updateZone(value) - }} - aria-label={t("Zone de l'entreprise")} - > - - {t('Guadeloupe, Guyane, Martinique, La Réunion')} - - {t('Saint-Barthélémy, Saint-Martin')} - + + + + {t( + 'pages.simulateurs.lodeom.zone-switch-label', + "Localisation de l'entreprise" + )}{' '} + : + + + + + {t('Guadeloupe, Guyane, Martinique, La Réunion')} + + + {t('Saint-Barthélémy, Saint-Martin')} + + + ) } + +const Container = styled.div` + text-align: left; + display: flex; + flex-direction: column; + flex-wrap: wrap; + column-gap: ${({ theme }) => theme.spacings.sm}; + width: 100%; +` +const StyledBody = styled(Body)` + margin: ${({ theme }) => theme.spacings.xxs} 0; +` +const StyledToggleGroup = styled(ToggleGroup)` + display: flex; + > * { + display: flex; + flex-direction: column; + } +` +const StyledRadio = styled(Radio)` + white-space: nowrap; + > span { + width: 100%; + } +` diff --git a/site/source/pages/simulateurs/reduction-generale/components/CongésPayésSwitch.tsx b/site/source/pages/simulateurs/reduction-generale/components/CongésPayésSwitch.tsx index fac2f5855..55cbef09a 100644 --- a/site/source/pages/simulateurs/reduction-generale/components/CongésPayésSwitch.tsx +++ b/site/source/pages/simulateurs/reduction-generale/components/CongésPayésSwitch.tsx @@ -6,7 +6,7 @@ import { styled } from 'styled-components' import { useEngine } from '@/components/utils/EngineContext' import { Radio, ToggleGroup } from '@/design-system' -import { FlexCenter } from '@/design-system/global-style' +import { Strong } from '@/design-system/typography' import { Body } from '@/design-system/typography/paragraphs' import { enregistreLaRéponse } from '@/store/actions/actions' import { réductionGénéraleDottedName } from '@/utils/réductionDeCotisations' @@ -30,9 +30,9 @@ export default function CongésPayésSwitch() { return ( - {engine.getRule(dottedName).title} + {engine.getRule(dottedName).title} : - { setCurrentCongésPayés(value) @@ -40,19 +40,33 @@ export default function CongésPayésSwitch() { }} aria-labelledby="caisse-congés-payés-label" > - {t('Oui')} - {t('Non')} - + {t('Oui')} + {t('Non')} + ) } const Container = styled.div` - ${FlexCenter} + text-align: left; + display: flex; + flex-direction: column; flex-wrap: wrap; - justify-content: center; column-gap: ${({ theme }) => theme.spacings.sm}; + width: 100%; ` const StyledBody = styled(Body)` margin: ${({ theme }) => theme.spacings.xxs} 0; ` +const StyledToggleGroup = styled(ToggleGroup)` + display: flex; + > * { + display: flex; + } +` +const StyledRadio = styled(Radio)` + white-space: nowrap; + > span { + width: 100%; + } +`