From 5ae31c94eccc48bace5a101945f5e412ba12e542 Mon Sep 17 00:00:00 2001
From: Johan Girod <johan.girod@beta.gouv.fr>
Date: Wed, 27 Sep 2023 11:59:25 +0200
Subject: [PATCH] =?UTF-8?q?Enl=C3=A8ve=20les=20derni=C3=A8res=20utilisatio?=
 =?UTF-8?q?n=20de=20l'attribut=20css=3D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 site/source/locales/ui-en.yaml                |  2 ++
 site/source/locales/ui-fr.yaml                |  4 ++++
 site/source/pages/integration/API.tsx         | 18 ++++++++++----
 .../integration/{Options.tsx => Home.tsx}     |  2 +-
 site/source/pages/integration/Library.tsx     | 24 +++++++++----------
 site/source/pages/integration/Spreadsheet.tsx |  2 +-
 site/source/pages/integration/index.tsx       |  4 ++--
 site/source/types/css-prop.d.ts               | 18 --------------
 8 files changed, 35 insertions(+), 39 deletions(-)
 rename site/source/pages/integration/{Options.tsx => Home.tsx} (99%)
 delete mode 100644 site/source/types/css-prop.d.ts

diff --git a/site/source/locales/ui-en.yaml b/site/source/locales/ui-en.yaml
index 310c72ff4..2796cae7b 100644
--- a/site/source/locales/ui-en.yaml
+++ b/site/source/locales/ui-en.yaml
@@ -39,6 +39,7 @@ Attention, information importante: Important information
 Attention, vos données sauvegardées seront supprimées de manière définitive.: Please note that your saved data will be permanently deleted.
 Aucun: No
 Aucun résultat: No results
+Aucun résultat ne correspond à votre recherche. Essayez avec d'autres mots-clés.: No results matching your search. Try other keywords.
 Autres outils: Other tools
 Avec <2><0></0></2> de cotisations sociales: With <2><0></0></2> in social security contributions
 Avec ACRE: With ACRE
@@ -73,6 +74,7 @@ Coût de création: Cost of creation
 "Crée le :": "Created on :"
 Dividendes nets: Net dividends
 Documentation: Documentation
+Documentation des calculs: Calculation documentation
 "Domiciliée à l'adresse :": "Domiciled at address :"
 Donner votre avis: Give your opinion
 Décrivez votre projet ou votre problème en donnant quelques éléments de contexte. Notre partenaire Place des Entrprises identifiera, parmi l’ensemble des partenaires publics et parapublics, le conseiller compétent pour votre demande. Celui-ci vous contactera par téléphone sous 5 jours et vous accompagnera en fonction de votre situation.:
diff --git a/site/source/locales/ui-fr.yaml b/site/source/locales/ui-fr.yaml
index 5df40d744..7989260d3 100644
--- a/site/source/locales/ui-fr.yaml
+++ b/site/source/locales/ui-fr.yaml
@@ -41,6 +41,9 @@ Attention, information importante: Attention, information importante
 Attention, vos données sauvegardées seront supprimées de manière définitive.: Attention, vos données sauvegardées seront supprimées de manière définitive.
 Aucun: Aucun
 Aucun résultat: Aucun résultat
+Aucun résultat ne correspond à votre recherche. Essayez avec d'autres mots-clés.:
+  Aucun résultat ne correspond à votre recherche. Essayez avec d'autres
+  mots-clés.
 Autres outils: Autres outils
 Avec <2><0></0></2> de cotisations sociales: Avec <2><0></0></2> de cotisations sociales
 Avec ACRE: Avec ACRE
@@ -75,6 +78,7 @@ Coût de création: Coût de création
 "Crée le :": "Crée le :"
 Dividendes nets: Dividendes nets
 Documentation: Documentation
+Documentation des calculs: Documentation des calculs
 "Domiciliée à l'adresse :": "Domiciliée à l'adresse :"
 Donner votre avis: Donner votre avis
 Décrivez votre projet ou votre problème en donnant quelques éléments de contexte. Notre partenaire Place des Entrprises identifiera, parmi l’ensemble des partenaires publics et parapublics, le conseiller compétent pour votre demande. Celui-ci vous contactera par téléphone sous 5 jours et vous accompagnera en fonction de votre situation.:
diff --git a/site/source/pages/integration/API.tsx b/site/source/pages/integration/API.tsx
index 7ef709a35..a308dc70e 100644
--- a/site/source/pages/integration/API.tsx
+++ b/site/source/pages/integration/API.tsx
@@ -1,4 +1,5 @@
 import { Trans, useTranslation } from 'react-i18next'
+import styled from 'styled-components'
 
 import PageHeader from '@/components/PageHeader'
 import { ScrollToTop } from '@/components/utils/Scroll'
@@ -18,7 +19,7 @@ export default function API() {
 	const { t } = useTranslation()
 
 	return (
-		<div css="iframe{margin-top: 1em; margin-bottom: 1em}">
+		<div>
 			<ScrollToTop />
 			<Meta
 				title={t('api.title', 'Utiliser notre API REST')}
@@ -87,13 +88,22 @@ export default function API() {
 						textAlign: 'center',
 					}}
 				>
-					<iframe
-						css="width:100%; max-width: 1200px; height:500px; border:0; border-radius: 4px; overflow:hidden;"
+					<StyledExempleIframe
 						src="https://stackblitz.com/edit/api-mon-entreprise?ctl=1&embed=1&file=main.js"
 						title="Exemple d'intégration dans un éditeur de code en ligne"
-					></iframe>
+					/>
 				</div>
 			</Trans>
 		</div>
 	)
 }
+
+export const StyledExempleIframe = styled.iframe`
+	width: 100%;
+	max-width: 1200px;
+	height: 500px;
+	border: 0;
+	margin-bottom: 2rem;
+	border-radius: 4px;
+	overflow: hidden;
+`
diff --git a/site/source/pages/integration/Options.tsx b/site/source/pages/integration/Home.tsx
similarity index 99%
rename from site/source/pages/integration/Options.tsx
rename to site/source/pages/integration/Home.tsx
index 66e39e634..60181b80e 100644
--- a/site/source/pages/integration/Options.tsx
+++ b/site/source/pages/integration/Home.tsx
@@ -45,7 +45,7 @@ export default function Options() {
 					</Trans>
 				</Intro>
 			</PageHeader>
-			<Grid container spacing={2}>
+			<Grid container spacing={3}>
 				<Grid item xs={12} md={6} lg={4}>
 					<Card
 						icon={<Emoji emoji="📱" />}
diff --git a/site/source/pages/integration/Library.tsx b/site/source/pages/integration/Library.tsx
index 8d4abfb3e..da1f862c7 100644
--- a/site/source/pages/integration/Library.tsx
+++ b/site/source/pages/integration/Library.tsx
@@ -8,9 +8,10 @@ import { Code, Strong } from '@/design-system/typography'
 import { H2, H3, H4 } from '@/design-system/typography/heading'
 import { Link } from '@/design-system/typography/link'
 import { Li, Ol } from '@/design-system/typography/list'
-import { Body, Intro } from '@/design-system/typography/paragraphs'
+import { Body, Intro, SmallBody } from '@/design-system/typography/paragraphs'
 
 import Meta from '../../components/utils/Meta'
+import { StyledExempleIframe } from './API'
 import { CasParticuliers } from './components/CasParticuliers'
 import StepByStep from './components/StepByStep'
 import illustration from './images/illustration_library.svg'
@@ -19,7 +20,7 @@ export default function Library() {
 	const { t } = useTranslation()
 
 	return (
-		<div css="iframe{margin-top: 1em; margin-bottom: 1em}">
+		<div>
 			<Meta
 				title={t('library.title', 'Librairie de calcul')}
 				description={t('library.description', 'Outils pour les développeurs')}
@@ -89,11 +90,10 @@ export default function Library() {
 						textAlign: 'center',
 					}}
 				>
-					<iframe
+					<StyledExempleIframe
 						src="https://codesandbox.io/embed/zen-keller-2dpct?fontsize=14&hidenavigation=1&theme=dark"
-						css="width:100%; max-width: 1200px; height:500px; border:0; border-radius: 4px; overflow:hidden;"
 						title="Exemple d'intégration sur codesandbox.io : lancement d'un calcul"
-					></iframe>
+					/>
 				</div>
 				<H2>Paramétrer le calcul</H2>
 				<Body>
@@ -156,11 +156,10 @@ export default function Library() {
 					Voici ce que donne le calcul avec l'exemple cité ci-dessus :
 				</Body>
 				<div>
-					<iframe
+					<StyledExempleIframe
 						src="https://codesandbox.io/embed/mon-entreprise-exemple-2-cev02?fontsize=14&hidenavigation=1&theme=dark"
-						css="width:100%; max-width: 1200px; height:500px; border:0; border-radius: 4px; overflow:hidden;"
 						title="Exemple d'intégration sur codesandbox.io : paramétrage du calcul"
-					></iframe>
+					/>
 				</div>
 				<Message type="info" icon>
 					<Body>
@@ -179,22 +178,21 @@ export default function Library() {
 					d'analyse économique ou politique. Ici, on trace le prix du travail et
 					le salaire net en fonction du brut.
 				</Body>
-				<Body css="font-style: italic; border-left: 6px solid #eee; padding-left: .6rem">
+				<SmallBody $grey>
 					On peut constater la progressivité du salaire total, qui est en
 					pourcent plus faible pour un SMIC que pour un haut revenu. Autrement
 					dit, les hauts salaires paient une partie des cotisations sociales des
 					bas salaires.
-				</Body>
+				</SmallBody>
 				<div
 					style={{
 						textAlign: 'center',
 					}}
 				>
-					<iframe
+					<StyledExempleIframe
 						src="https://codesandbox.io/embed/mon-entreprise-exemple-3-4j11c?fontsize=14&hidenavigation=1&theme=dark"
-						css="width:100%; max-width: 1200px; height:500px; border:0; border-radius: 4px; overflow:hidden;"
 						title="Exemple d'intégration sur codesandbox.io : association avec d'autres librairies"
-					></iframe>
+					/>
 				</div>
 			</Trans>
 		</div>
diff --git a/site/source/pages/integration/Spreadsheet.tsx b/site/source/pages/integration/Spreadsheet.tsx
index 357ea33cf..1dec9d51b 100644
--- a/site/source/pages/integration/Spreadsheet.tsx
+++ b/site/source/pages/integration/Spreadsheet.tsx
@@ -14,7 +14,7 @@ export default function Spreadsheet() {
 	const { t } = useTranslation()
 
 	return (
-		<div css="iframe{margin-top: 1em; margin-bottom: 1em}">
+		<div>
 			<ScrollToTop />
 			<Meta
 				title={t('spreadsheet.title', 'Utiliser avec un tableur')}
diff --git a/site/source/pages/integration/index.tsx b/site/source/pages/integration/index.tsx
index 17107e6c1..04f8d37b3 100644
--- a/site/source/pages/integration/index.tsx
+++ b/site/source/pages/integration/index.tsx
@@ -10,9 +10,9 @@ import { useFetchData } from '@/hooks/useFetchData'
 import { useSitePaths } from '@/sitePaths'
 
 import API from './API'
+import Home from './Home'
 import Iframe from './Iframe'
 import Library from './Library'
-import Options from './Options'
 import Spreadsheet from './Spreadsheet'
 
 type JobOffer = {
@@ -60,7 +60,7 @@ export default function Integration() {
 				</Banner>
 			)}
 			<Routes>
-				<Route index element={<Options />} />
+				<Route index element={<Home />} />
 				<Route path={relativeSitePaths.développeur.api} element={<API />} />
 				<Route
 					path={relativeSitePaths.développeur.iframe}
diff --git a/site/source/types/css-prop.d.ts b/site/source/types/css-prop.d.ts
deleted file mode 100644
index 01ee3f1e8..000000000
--- a/site/source/types/css-prop.d.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import { CSSProp, DefaultTheme } from 'styled-components'
-
-declare module 'react' {
-	// eslint-disable-next-line @typescript-eslint/no-unused-vars
-	interface DOMAttributes<T> {
-		// @ts-ignore
-		css?: CSSProp<DefaultTheme>
-	}
-}
-
-declare global {
-	namespace JSX {
-		interface IntrinsicAttributes {
-			// @ts-ignore
-			css?: CSSProp<DefaultTheme>
-		}
-	}
-}