betagouv/mon-entreprise
betagouv/mon-entreprise
1
0
Fork 0
mirror of https://github.com/betagouv/mon-entreprise synced 2025-02-11 00:25:02 +00:00
Code Releases Activity

refactor(lodeom): factorise les styles des switchs

Browse source
This commit is contained in:
Alice Dahan 2024-12-27 11:49:39 +01:00 • committed by liliced
parent 3f7368fe28
commit 7f821b2e2f
8 changed files with 95 additions and 155 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

52
site/source/components/EffectifSwitch.tsx → site/source/components/RéductionDeCotisations/EffectifSwitch.tsx
View file

@ -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 (
<Container>
<StyledBody id="effectif-switch-label">
<SwitchContainer>
<SwitchLabel id="effectif-switch-label">
<Strong>{t('Effectif de l’entreprise')} :</Strong>
</StyledBody>
<StyledToggleGroup
</SwitchLabel>
<SwitchToggleGroup
value={currentEffectif}
onChange={(value) => {
setCurrentEffectif(value)
@ -36,36 +39,9 @@ export default function EffectifSwitch() {
}}
aria-labelledby="effectif-switch-label"
>
<StyledRadio value="10">{t('Moins de 50 salariés')}</StyledRadio>
<StyledRadio value="100">{t('Plus de 50 salariés')}</StyledRadio>
</StyledToggleGroup>
</Container>
<SwitchRadio value="10">{t('Moins de 50 salariés')}</SwitchRadio>
<SwitchRadio value="100">{t('Plus de 50 salariés')}</SwitchRadio>
</SwitchToggleGroup>
</SwitchContainer>
)
}
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%;
}
`

56
site/source/components/RéductionDeCotisations/RégularisationSwitch.tsx
View file

@ -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 (
<Container>
<StyledBody id="régularisation-switch-label">
<SwitchContainer>
<SwitchLabel id="régularisation-switch-label">
<Strong>
{t(
'pages.simulateurs.réduction-générale.régularisation.type',
@ -27,55 +30,28 @@ export default function RégularisationSwitch({
)}{' '}
:
</Strong>
</StyledBody>
</SwitchLabel>
<StyledToggleGroup
<SwitchToggleGroup
value={régularisationMethod}
onChange={(value) => {
setRégularisationMethod(value as RégularisationMethod)
}}
aria-labelledby="régularisation-switch-label"
>
<StyledRadio value="annuelle">
<SwitchRadio value="annuelle">
{t(
'pages.simulateurs.réduction-générale.régularisation.annuelle',
'Régularisation annuelle'
)}
</StyledRadio>
<StyledRadio value="progressive">
</SwitchRadio>
<SwitchRadio value="progressive">
{t(
'pages.simulateurs.réduction-générale.régularisation.progressive',
'Régularisation progressive'
)}
</StyledRadio>
</StyledToggleGroup>
</Container>
</SwitchRadio>
</SwitchToggleGroup>
</SwitchContainer>
)
}
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%;
}
`

35
site/source/design-system/réductionDeCotisations.ts Normal file
View file

@ -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%;
}
`

2
site/source/pages/simulateurs/lodeom/Lodeom.tsx
View file

@ -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'

26
site/source/pages/simulateurs/lodeom/components/BarèmeSwitch.tsx
View file

@ -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 && (
<Container>
<SwitchContainer $isRule>
<SimpleField
dottedName={barèmeLodeomDottedName(currentZone)}
label={renderToString(
@ -26,23 +28,9 @@ export default function BarèmeSwitch() {
</strong>
</p>
)}
labelStyle={StyledBody}
labelStyle={RuleSwitchLabel}
/>
</Container>
</SwitchContainer>
)
)
}
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};
`

26
site/source/pages/simulateurs/lodeom/components/ZoneSwitch.tsx
View file

@ -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 (
<Container>
<SwitchContainer $isRule>
<SimpleField
dottedName={zonesLodeomDottedName}
label={renderToString(
@ -23,22 +25,8 @@ export default function ZoneSwitch() {
</strong>
</p>
)}
labelStyle={StyledBody}
labelStyle={RuleSwitchLabel}
/>
</Container>
</SwitchContainer>
)
}
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};
`

2
site/source/pages/simulateurs/reduction-generale/RéductionGénérale.tsx
View file

@ -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'

51
site/source/pages/simulateurs/reduction-generale/components/CongésPayésSwitch.tsx
View file

@ -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 (
<Container>
<StyledBody id="caisse-congés-payés-label">
<SwitchContainer>
<SwitchLabel id="caisse-congés-payés-label">
<Strong>{engine.getRule(dottedName).title} :</Strong>
</StyledBody>
<StyledToggleGroup
</SwitchLabel>
<SwitchToggleGroup
value={currentCongésPayés}
onChange={(value) => {
setCurrentCongésPayés(value)
@ -40,35 +43,9 @@ export default function CongésPayésSwitch() {
}}
aria-labelledby="caisse-congés-payés-label"
>
<StyledRadio value="oui">{t('Oui')}</StyledRadio>
<StyledRadio value="non">{t('Non')}</StyledRadio>
</StyledToggleGroup>
</Container>
<SwitchRadio value="oui">{t('Oui')}</SwitchRadio>
<SwitchRadio value="non">{t('Non')}</SwitchRadio>
</SwitchToggleGroup>
</SwitchContainer>
)
}
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%;
}
`