refacto: style des puces de liste d'avertissement

betagouv · Jan 28, 2025 · 913424b · 913424b
1 parent dce5ccd
commit 913424b
Show file tree

Hide file tree

Showing 6 changed files with 37 additions and 64 deletions.
diff --git a/site/source/design-system/typography/list.tsx b/site/source/design-system/typography/list.tsx
@@ -18,6 +18,12 @@ type ListProps = {
 
 export const Li = styled.li``
 
+export const DarkLi = styled.li`
+	&::before {
+		color: ${({ theme }) => theme.colors.bases.tertiary[800]} !important;
+	}
+`
+
 const BaseListStyle = css<ListProps>`
 	${baseParagraphStyle}
 	font-size: 1rem;

diff --git a/site/source/pages/simulateurs/auto-entrepreneur/AutoEntrepreneur.tsx b/site/source/pages/simulateurs/auto-entrepreneur/AutoEntrepreneur.tsx
@@ -1,5 +1,4 @@
 import { Trans } from 'react-i18next'
-import { styled } from 'styled-components'
 
 import ChiffreAffairesActivitéMixte from '@/components/ChiffreAffairesActivitéMixte'
 import { WhenAlreadyDefined } from '@/components/EngineValue/WhenAlreadyDefined'
@@ -11,7 +10,7 @@ import Simulation, {
 	SimulationGoals,
 } from '@/components/Simulation'
 import { Link } from '@/design-system/typography/link'
-import { Li, Ul } from '@/design-system/typography/list'
+import { DarkLi, Ul } from '@/design-system/typography/list'
 import { AutoEntrepreneurDétails } from '@/pages/simulateurs/auto-entrepreneur/AutoEntrepreneurDétails'
 
 export default function AutoEntrepreneur() {
@@ -25,7 +24,7 @@ export default function AutoEntrepreneur() {
 					simulateur="auto-entrepreneur"
 					informationsComplémentaires={
 						<Ul>
-							<StyledLi>
+							<DarkLi>
 								<Trans i18nKey="pages.simulateurs.auto-entrepreneur.warning.general">
 									Les auto-entrepreneurs bénéficient d’un régime très simplifié
 									avec un taux forfaitaire pour le calcul des cotisations et
@@ -37,8 +36,8 @@ export default function AutoEntrepreneur() {
 									d’affaires moins toutes les charges engagées pour
 									l’entreprise.
 								</Trans>
-							</StyledLi>
-							<StyledLi>
+							</DarkLi>
+							<DarkLi>
 								<Trans i18nKey="pages.simulateurs.auto-entrepreneur.warning.cfe">
 									Le simulateur n’intègre pas la cotisation foncière des
 									entreprise (CFE) qui est dûe dès la deuxième année d’exercice.
@@ -51,7 +50,7 @@ export default function AutoEntrepreneur() {
 										Plus d’infos.
 									</Link>
 								</Trans>
-							</StyledLi>
+							</DarkLi>
 						</Ul>
 					}
 				/>
@@ -79,9 +78,3 @@ export default function AutoEntrepreneur() {
 		</>
 	)
 }
-
-const StyledLi = styled(Li)`
-	&::before {
-		color: ${({ theme }) => theme.colors.bases.tertiary[800]} !important;
-	}
-`
diff --git a/site/source/pages/simulateurs/chômage-partiel/ChômagePartiel.tsx b/site/source/pages/simulateurs/chômage-partiel/ChômagePartiel.tsx
@@ -17,7 +17,7 @@ import { useEngine } from '@/components/utils/EngineContext'
 import { Strong } from '@/design-system/typography'
 import { H2 } from '@/design-system/typography/heading'
 import { Link } from '@/design-system/typography/link'
-import { Li, Ul } from '@/design-system/typography/list'
+import { DarkLi, Li, Ul } from '@/design-system/typography/list'
 import { Body } from '@/design-system/typography/paragraphs'
 import { catchDivideByZeroError } from '@/utils/publicodes'
 
@@ -48,19 +48,19 @@ export default function ChômagePartiel() {
 				simulateur="chômage-partiel"
 				informationsComplémentaires={
 					<Ul>
-						<StyledLi>
+						<DarkLi>
 							<Trans i18nKey="pages.simulateurs.chômage-partiel.warning.1">
 								Ce simulateur ne prend pas en compte les rémunérations brutes
 								définies sur 39h hebdomadaires.
 							</Trans>
-						</StyledLi>
-						<StyledLi>
+						</DarkLi>
+						<DarkLi>
 							<Trans i18nKey="pages.simulateurs.chômage-partiel.warning.2">
 								De même, il ne prend pas en compte les indemnités complémentaire
 								d’activité partielle prévue par une convention/accord collectif
 								ou une décision unilatérale de l’employeur.
 							</Trans>
-						</StyledLi>
+						</DarkLi>
 					</Ul>
 				}
 			/>
@@ -469,9 +469,3 @@ const ResultTable = styled.table`
 		color: inherit;
 	}
 `
-
-const StyledLi = styled(Li)`
-	&::before {
-		color: ${({ theme }) => theme.colors.bases.tertiary[800]} !important;
-	}
-`
diff --git a/site/source/pages/simulateurs/cout-creation-entreprise/index.tsx b/site/source/pages/simulateurs/cout-creation-entreprise/index.tsx
@@ -1,5 +1,4 @@
 import { Trans } from 'react-i18next'
-import { styled } from 'styled-components'
 
 import { Condition } from '@/components/EngineValue/Condition'
 import SimulateurWarning from '@/components/SimulateurWarning'
@@ -9,7 +8,7 @@ import Simulation, {
 } from '@/components/Simulation'
 import { Grid } from '@/design-system/layout'
 import { H3 } from '@/design-system/typography/heading'
-import { Li, Ul } from '@/design-system/typography/list'
+import { DarkLi, Ul } from '@/design-system/typography/list'
 
 export default function CoutCreationEntreprise() {
 	return (
@@ -70,29 +69,29 @@ export default function CoutCreationEntreprise() {
 					simulateur="coût-création-entreprise"
 					informationsComplémentaires={
 						<Ul>
-							<StyledLi>
+							<DarkLi>
 								<Trans i18nKey="pages.simulateurs.coût-création-entreprise.warning.pas-reprise">
 									Ce simulateur calcule les frais de création pour les nouvelles
 									entreprises. Il ne prend pas en compte le cas des reprises
 									d’entreprises existantes.
 								</Trans>
-							</StyledLi>
-							<StyledLi>
+							</DarkLi>
+							<DarkLi>
 								<Trans i18nKey="pages.simulateurs.coût-création-entreprise.warning.greffe">
 									Des frais de greffe peuvent être facturés en raison
 									d’informations ou de documents manquants ou incorrects. Par
 									ailleurs, en cas d’envoi de courrier, le greffe facture les
 									frais postaux.
 								</Trans>
-							</StyledLi>
-							<StyledLi>
+							</DarkLi>
+							<DarkLi>
 								<Trans i18nKey="pages.simulateurs.coût-création-entreprise.warning.JAL">
 									Ce simulateur calcule les frais de créations uniquement pour
 									les SARL, EURL, SAS, SASU, EI et SEL. Il ne prend pas encore
 									en compte les autres formes de société (SA, SCA, SCS, SCI,
 									SCP, SNC, SCM, coopératives, GIE, GAEC, etc.)
 								</Trans>
-							</StyledLi>
+							</DarkLi>
 						</Ul>
 					}
 				/>
@@ -108,9 +107,3 @@ export default function CoutCreationEntreprise() {
 		</>
 	)
 }
-
-const StyledLi = styled(Li)`
-	&::before {
-		color: ${({ theme }) => theme.colors.bases.tertiary[800]} !important;
-	}
-`
diff --git a/site/source/pages/simulateurs/dividendes/Dividendes.tsx b/site/source/pages/simulateurs/dividendes/Dividendes.tsx
@@ -2,7 +2,7 @@ import { DottedName } from 'modele-social'
 import { useEffect, useState } from 'react'
 import { Trans, useTranslation } from 'react-i18next'
 import { useDispatch } from 'react-redux'
-import { styled, useTheme } from 'styled-components'
+import { useTheme } from 'styled-components'
 
 import { Condition } from '@/components/EngineValue/Condition'
 import Notifications from '@/components/Notifications'
@@ -16,7 +16,7 @@ import StackedBarChart from '@/components/StackedBarChart'
 import { useEngine } from '@/components/utils/EngineContext'
 import { Radio, ToggleGroup } from '@/design-system/field'
 import { H2 } from '@/design-system/typography/heading'
-import { Li, Ul } from '@/design-system/typography/list'
+import { DarkLi, Ul } from '@/design-system/typography/list'
 import { Body } from '@/design-system/typography/paragraphs'
 import { enregistreLaRéponse } from '@/store/actions/actions'
 
@@ -32,19 +32,19 @@ export default function DividendesSimulation() {
 					simulateur="dividendes"
 					informationsComplémentaires={
 						<Ul>
-							<StyledLi>
+							<DarkLi>
 								<Trans i18nKey="pages.simulateurs.dividendes.warning.1">
 									Cette simulation ne concerne que les sociétés françaises à
 									l’impôt sur les sociétés (IS), et ne concerne pas les
 									travailleurs indépendants non salariés.
 								</Trans>
-							</StyledLi>
-							<StyledLi>
+							</DarkLi>
+							<DarkLi>
 								<Trans i18nKey="pages.simulateurs.dividendes.warning.2">
 									Le montant de l’impôt sur les dividendes est calculé en plus
 									de l’impôt sur les autres revenus imposables.
 								</Trans>
-							</StyledLi>
+							</DarkLi>
 						</Ul>
 					}
 				/>
@@ -212,9 +212,3 @@ export const SeoExplanations = () => {
 		</Trans>
 	)
 }
-
-const StyledLi = styled(Li)`
-	&::before {
-		color: ${({ theme }) => theme.colors.bases.tertiary[800]} !important;
-	}
-`
diff --git a/site/source/pages/simulateurs/indépendant/IndépendantPLSimulation.tsx b/site/source/pages/simulateurs/indépendant/IndépendantPLSimulation.tsx
@@ -1,15 +1,14 @@
 import { Trans } from 'react-i18next'
-import { styled } from 'styled-components'
 
 import { SelectSimulationYear } from '@/components/SelectSimulationYear'
 import SimulateurWarning from '@/components/SimulateurWarning'
 import Simulation from '@/components/Simulation'
 import IndépendantExplanation from '@/components/simulationExplanation/IndépendantExplanation'
 import useYear from '@/components/utils/useYear'
-import { Li, Ul } from '@/design-system/typography/list'
+import { DarkLi, Ul } from '@/design-system/typography/list'
 import { IndépendantSimulationGoals } from '@/pages/simulateurs/indépendant/Goals'
 
-export default function IndépendantPLSimulation() {
+export const IndépendantPLSimulation = () => {
 	const year = useYear()
 
 	return (
@@ -22,27 +21,27 @@ export default function IndépendantPLSimulation() {
 					simulateur="profession-libérale"
 					informationsComplémentaires={
 						<Ul>
-							<StyledLi>
+							<DarkLi>
 								<Trans i18nKey="pages.simulateurs.profession-libérale.warning.général">
 									Ce simulateur est à destination des professions libérales en
 									BNC. Il ne prend pas en compte les sociétés d’exercice
 									libéral.
 								</Trans>
-							</StyledLi>
-							<StyledLi>
+							</DarkLi>
+							<DarkLi>
 								<Trans i18nKey="pages.simulateurs.profession-libérale.warning.année-courante">
 									Le montant calculé correspond aux cotisations de l’année{' '}
 									{{ year }} (pour un revenu {{ year }}).
 								</Trans>
-							</StyledLi>{' '}
-							<StyledLi>
+							</DarkLi>{' '}
+							<DarkLi>
 								<Trans i18nKey="pages.simulateurs.profession-libérale.warning.cotisations-ordinales">
 									Pour les professions réglementées, le simulateur ne calcule
 									pas le montant des cotisations à l’ordre. Elles doivent être
 									ajoutées manuellement dans la case « charges de fonctionnement
 									».
 								</Trans>
-							</StyledLi>
+							</DarkLi>
 						</Ul>
 					}
 				/>
@@ -51,9 +50,3 @@ export default function IndépendantPLSimulation() {
 		</>
 	)
 }
-
-const StyledLi = styled(Li)`
-	&::before {
-		color: ${({ theme }) => theme.colors.bases.tertiary[800]} !important;
-	}
-`