From 7f821b2e2ff01273fb9cb6e67216970a927ff092 Mon Sep 17 00:00:00 2001 From: Alice Dahan Date: Fri, 27 Dec 2024 11:49:39 +0100 Subject: [PATCH] refactor(lodeom): factorise les styles des switchs --- .../EffectifSwitch.tsx | 52 +++++------------ .../RégularisationSwitch.tsx | 56 ++++++------------- .../design-system/réductionDeCotisations.ts | 35 ++++++++++++ .../pages/simulateurs/lodeom/Lodeom.tsx | 2 +- .../lodeom/components/BarèmeSwitch.tsx | 26 +++------ .../lodeom/components/ZoneSwitch.tsx | 26 +++------ .../reduction-generale/RéductionGénérale.tsx | 2 +- .../components/CongésPayésSwitch.tsx | 51 +++++------------ 8 files changed, 95 insertions(+), 155 deletions(-) rename site/source/components/{ => RéductionDeCotisations}/EffectifSwitch.tsx (54%) create mode 100644 site/source/design-system/réductionDeCotisations.ts diff --git a/site/source/components/EffectifSwitch.tsx b/site/source/components/RéductionDeCotisations/EffectifSwitch.tsx similarity index 54% rename from site/source/components/EffectifSwitch.tsx rename to site/source/components/RéductionDeCotisations/EffectifSwitch.tsx index 9d014a78a..ed7f422f3 100644 --- a/site/source/components/EffectifSwitch.tsx +++ b/site/source/components/RéductionDeCotisations/EffectifSwitch.tsx @@ -2,12 +2,15 @@ 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 { + SwitchContainer, + SwitchLabel, + SwitchRadio, + SwitchToggleGroup, +} from '@/design-system/réductionDeCotisations' import { Strong } from '@/design-system/typography' -import { Body } from '@/design-system/typography/paragraphs' import { enregistreLaRéponse } from '@/store/actions/actions' export default function EffectifSwitch() { @@ -24,11 +27,11 @@ export default function EffectifSwitch() { }, [currentEffectif, engineEffectif]) return ( - - + + {t('Effectif de l’entreprise')} : - - + { setCurrentEffectif(value) @@ -36,36 +39,9 @@ export default function EffectifSwitch() { }} aria-labelledby="effectif-switch-label" > - {t('Moins de 50 salariés')} - {t('Plus de 50 salariés')} - - + {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%; - margin-bottom: ${({ theme }) => theme.spacings.sm}; -` -const StyledBody = styled(Body)` - margin: 0; - margin-bottom: ${({ theme }) => theme.spacings.sm}; -` -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 76f19a741..ee7329cba 100644 --- a/site/source/components/RéductionDeCotisations/RégularisationSwitch.tsx +++ b/site/source/components/RéductionDeCotisations/RégularisationSwitch.tsx @@ -1,9 +1,12 @@ import { useTranslation } from 'react-i18next' -import { styled } from 'styled-components' -import { Radio, ToggleGroup } from '@/design-system' +import { + SwitchContainer, + SwitchLabel, + SwitchRadio, + SwitchToggleGroup, +} from '@/design-system/réductionDeCotisations' import { Strong } from '@/design-system/typography' -import { Body } from '@/design-system/typography/paragraphs' import { RégularisationMethod } from '@/utils/réductionDeCotisations' type Props = { @@ -18,8 +21,8 @@ export default function RégularisationSwitch({ const { t } = useTranslation() return ( - - + + {t( 'pages.simulateurs.réduction-générale.régularisation.type', @@ -27,55 +30,28 @@ export default function RégularisationSwitch({ )}{' '} : - + - { 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%; - margin-bottom: ${({ theme }) => theme.spacings.sm}; -` -const StyledBody = styled(Body)` - margin: 0; - margin-bottom: ${({ theme }) => theme.spacings.sm}; -` -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/design-system/réductionDeCotisations.ts b/site/source/design-system/réductionDeCotisations.ts new file mode 100644 index 000000000..840c30df3 --- /dev/null +++ b/site/source/design-system/réductionDeCotisations.ts @@ -0,0 +1,35 @@ +import { styled } from 'styled-components' + +import { Radio, ToggleGroup } from './field' +import { Body } from './typography/paragraphs' + +export const SwitchContainer = styled.div<{ $isRule?: boolean }>` + text-align: left; + display: flex; + flex-direction: column; + flex-wrap: wrap; + column-gap: ${({ theme }) => theme.spacings.sm}; + width: 100%; + margin-bottom: ${({ $isRule, theme }) => + $isRule ? `-${theme.spacings.lg}` : theme.spacings.sm}; +` +export const SwitchLabel = styled(Body)<{ $isRule?: boolean }>` + margin: 0; + margin-bottom: ${({ $isRule, theme }) => + theme.spacings[$isRule ? 'md' : 'sm']}; +` +export const RuleSwitchLabel = styled(SwitchLabel).attrs({ + $isRule: true, +})`` +export const SwitchToggleGroup = styled(ToggleGroup)` + display: flex; + > * { + display: flex; + } +` +export const SwitchRadio = styled(Radio)` + white-space: nowrap; + > span { + width: 100%; + } +` diff --git a/site/source/pages/simulateurs/lodeom/Lodeom.tsx b/site/source/pages/simulateurs/lodeom/Lodeom.tsx index 54be2c827..278dd4515 100644 --- a/site/source/pages/simulateurs/lodeom/Lodeom.tsx +++ b/site/source/pages/simulateurs/lodeom/Lodeom.tsx @@ -1,8 +1,8 @@ import { useCallback, useState } from 'react' import { useTranslation } from 'react-i18next' -import EffectifSwitch from '@/components/EffectifSwitch' import PeriodSwitch from '@/components/PeriodSwitch' +import EffectifSwitch from '@/components/RéductionDeCotisations/EffectifSwitch' import RégularisationSwitch from '@/components/RéductionDeCotisations/RégularisationSwitch' import { SelectSimulationYear } from '@/components/SelectSimulationYear' import SimulateurWarning from '@/components/SimulateurWarning' diff --git a/site/source/pages/simulateurs/lodeom/components/BarèmeSwitch.tsx b/site/source/pages/simulateurs/lodeom/components/BarèmeSwitch.tsx index 537546dde..46a985489 100644 --- a/site/source/pages/simulateurs/lodeom/components/BarèmeSwitch.tsx +++ b/site/source/pages/simulateurs/lodeom/components/BarèmeSwitch.tsx @@ -1,8 +1,10 @@ import { renderToString } from 'react-dom/server' import { useTranslation } from 'react-i18next' -import { styled } from 'styled-components' -import { Body } from '@/design-system/typography/paragraphs' +import { + RuleSwitchLabel, + SwitchContainer, +} from '@/design-system/réductionDeCotisations' import { barèmeLodeomDottedName } from '@/hooks/useBarèmeLodeom' import { useZoneLodeom } from '@/hooks/useZoneLodeom' import { SimpleField } from '@/pages/assistants/components/Fields' @@ -13,7 +15,7 @@ export default function BarèmeSwitch() { return ( currentZone && ( - +

)} - labelStyle={StyledBody} + labelStyle={RuleSwitchLabel} /> - + ) ) } - -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.lg}; -` -const StyledBody = styled(Body)` - margin: 0; - margin-bottom: ${({ theme }) => theme.spacings.md}; -` diff --git a/site/source/pages/simulateurs/lodeom/components/ZoneSwitch.tsx b/site/source/pages/simulateurs/lodeom/components/ZoneSwitch.tsx index ac6b0a917..cb048b94a 100644 --- a/site/source/pages/simulateurs/lodeom/components/ZoneSwitch.tsx +++ b/site/source/pages/simulateurs/lodeom/components/ZoneSwitch.tsx @@ -1,8 +1,10 @@ import { renderToString } from 'react-dom/server' import { useTranslation } from 'react-i18next' -import { styled } from 'styled-components' -import { Body } from '@/design-system/typography/paragraphs' +import { + RuleSwitchLabel, + SwitchContainer, +} from '@/design-system/réductionDeCotisations' import { zonesLodeomDottedName } from '@/hooks/useZoneLodeom' import { SimpleField } from '@/pages/assistants/components/Fields' @@ -10,7 +12,7 @@ export default function ZoneSwitch() { const { t } = useTranslation() return ( - +

)} - labelStyle={StyledBody} + labelStyle={RuleSwitchLabel} /> - + ) } - -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.lg}; -` -const StyledBody = styled(Body)` - margin: 0; - margin-bottom: ${({ theme }) => theme.spacings.md}; -` diff --git a/site/source/pages/simulateurs/reduction-generale/RéductionGénérale.tsx b/site/source/pages/simulateurs/reduction-generale/RéductionGénérale.tsx index 2bb1e6111..2ef6f294d 100644 --- a/site/source/pages/simulateurs/reduction-generale/RéductionGénérale.tsx +++ b/site/source/pages/simulateurs/reduction-generale/RéductionGénérale.tsx @@ -1,8 +1,8 @@ import { useCallback, useState } from 'react' import { useTranslation } from 'react-i18next' -import EffectifSwitch from '@/components/EffectifSwitch' import PeriodSwitch from '@/components/PeriodSwitch' +import EffectifSwitch from '@/components/RéductionDeCotisations/EffectifSwitch' import RégularisationSwitch from '@/components/RéductionDeCotisations/RégularisationSwitch' import { SelectSimulationYear } from '@/components/SelectSimulationYear' import SimulateurWarning from '@/components/SimulateurWarning' 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 374bee0c9..2f4848c1f 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 @@ -2,12 +2,15 @@ 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 { + SwitchContainer, + SwitchLabel, + SwitchRadio, + SwitchToggleGroup, +} from '@/design-system/réductionDeCotisations' 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' @@ -28,11 +31,11 @@ export default function CongésPayésSwitch() { }, [currentCongésPayés, engineCongésPayés]) return ( - - + + {engine.getRule(dottedName).title} : - - + { setCurrentCongésPayés(value) @@ -40,35 +43,9 @@ 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` - text-align: left; - display: flex; - flex-direction: column; - flex-wrap: wrap; - column-gap: ${({ theme }) => theme.spacings.sm}; - width: 100%; - margin-bottom: ${({ theme }) => theme.spacings.sm}; -` -const StyledBody = styled(Body)` - margin: 0; - margin-bottom: ${({ theme }) => theme.spacings.sm}; -` -const StyledToggleGroup = styled(ToggleGroup)` - display: flex; - > * { - display: flex; - } -` -const StyledRadio = styled(Radio)` - white-space: nowrap; - > span { - width: 100%; - } -`