🌐(frontend) legal pages translatable

Makes the legal pages translatable.
This commit is contained in:
Anthony LC
2024-06-04 18:05:39 +02:00
committed by Anthony LC
parent 8531e0dd08
commit f039b2aa3b
3 changed files with 93 additions and 126 deletions

View File

@@ -1,5 +1,5 @@
import { ReactElement } from 'react'; import { ReactElement } from 'react';
import { useTranslation } from 'react-i18next'; import { Trans, useTranslation } from 'react-i18next';
import { Box, Text, TextStyled } from '@/components'; import { Box, Text, TextStyled } from '@/components';
import { useCunninghamTheme } from '@/cunningham'; import { useCunninghamTheme } from '@/cunningham';
@@ -22,48 +22,40 @@ const Page: NextPageWithLayout = () => {
</Box> </Box>
<Box $padding={{ horizontal: 'large', vertical: 'big' }}> <Box $padding={{ horizontal: 'large', vertical: 'big' }}>
<Text as="p" $display="inline"> <Text as="p" $display="inline">
<Text $weight="bold" $display="inline"> <Trans t={t} i18nKey="accessibility-dinum-services">
La Suite numérique <strong>La DINUM</strong> s&apos;engage à rendre ses services
</Text>{' '} numériques accessibles, conformément à l&apos;article 47 de la loi
s&apos;engage à rendre ses services numériques accessibles, n° 2005-102 du 11 février 2005.
conformément à l&apos;article 47 de la loi n° 2005-102 du 11 février </Trans>
2005.
</Text> </Text>
<Text as="h2" $margin={{ bottom: 'xtiny' }}> <Text as="h2" $margin={{ bottom: 'xtiny' }}>
Déclaration d&apos;accessibilité {t("Déclaration d'accessibilité")}
</Text> </Text>
<Text as="p">Établie le 20 décembre 2023.</Text> <Text as="p">{t('Établie le 20 décembre 2023.')}</Text>
<Text as="p" $display="inline"> <Text as="p" $display="inline">
Cette déclaration d&apos;accessibilité s&apos;applique au site{' '} {t("Cette déclaration d'accessibilité s'applique au site")}{' '}
<Text $weight="bold" $display="inline"> <strong>docs.numerique.gouv.fr</strong>.
lasuite.numerique.gouv.fr
</Text>
.
</Text> </Text>
<Text as="h2" $margin={{ bottom: 'xtiny' }}> <Text as="h2" $margin={{ bottom: 'xtiny' }}>
État de conformité {t('État de conformité')}
</Text> </Text>
<Text as="p" $display="inline"> <Text as="p" $display="inline">
<Text $weight="bold" $display="inline"> <Trans t={t} i18nKey="accessibility-not-audit">
lasuite.numerique.gouv.fr <strong>docs.numerique.gouv.fr</strong> est non conforme avec le
</Text>{' '} RGAA 4.1. Le site n&apos;a <strong>pas encore é audité.</strong>
est non conforme avec le RGAA 4.1. Le site n&apos;a{' '} </Trans>
<Text $weight="bold" $display="inline">
pas encore é audité.
</Text>
</Text> </Text>
<Text as="h2" $margin={{ bottom: 'xtiny' }}> <Text as="h2" $margin={{ bottom: 'xtiny' }}>
Amélioration et contact {t('Amélioration et contact')}
</Text> </Text>
<Text as="p" $display="inline"> <Text as="p" $display="inline">
Si vous n&apos;arrivez pas à accéder à un contenu ou à un service, {t(
vous pouvez contacter le responsable de lasuite.numerique.gouv.fr pour `Si vous n'arrivez pas à accéder à un contenu ou à un service, vous pouvez contacter le responsable de lasuite.numerique.gouv.fr pour être orienté vers une alternative accessible ou obtenir le contenu sous une autre forme.`,
être orienté vers une alternative accessible ou obtenir le contenu )}
sous une autre forme.
</Text> </Text>
<Text as="p" $display="inline"> <Text as="p" $display="inline">
<li> <li>
E-mail :{' '} {t('E-mail:')}{' '}
<TextStyled <TextStyled
as="a" as="a"
href="mailto:lasuite@modernisation.gouv.fr" href="mailto:lasuite@modernisation.gouv.fr"
@@ -73,56 +65,58 @@ const Page: NextPageWithLayout = () => {
</TextStyled> </TextStyled>
</li> </li>
<li> <li>
Adresse :{' '} {t('Adresse:')} <strong>DINUM</strong>, 20 avenue de Ségur 75007
<Text $weight="bold" $display="inline"> Paris
DINUM
</Text>
, 20 avenue de Ségur 75007 Paris
</li> </li>
</Text> </Text>
<Text as="p" $display="inline"> <Text as="p" $display="inline">
Nous essayons de répondre dans les 2 jours ouvrés. {t('Nous essayons de répondre dans les 2 jours ouvrés.')}
</Text> </Text>
<Text as="h2" $margin={{ bottom: 'xtiny' }}> <Text as="h2" $margin={{ bottom: 'xtiny' }}>
Voie de recours {t('Voie de recours')}
</Text> </Text>
<Text as="p" $display="inline"> <Text as="p" $display="inline">
Cette procédure est à utiliser dans le cas suivant : vous avez signalé {t(`Cette procédure est à utiliser dans le cas suivant:`)}{' '}
au responsable du site internet un défaut d&apos;accessibilité qui {t(
vous empêche d&apos;accéder à un contenu ou à un des services du `vous avez signalé au responsable du site internet un défaut d'accessibilité qui vous empêche d'accéder à un contenu ou à un des services du portail et vous n'avez pas obtenu de réponse satisfaisante.`,
portail et vous n&apos;avez pas obtenu de réponse satisfaisante. )}
</Text> </Text>
<Text as="p" $display="inline" $margin={{ bottom: 'tiny' }}> <Text as="p" $display="inline" $margin={{ bottom: 'tiny' }}>
Vous pouvez : {t('Vous pouvez:')}
</Text> </Text>
<Text as="p" $display="inline" $margin={{ top: 'tiny' }}> <Text as="p" $display="inline" $margin={{ top: 'tiny' }}>
<li> <li>
Écrire un message au{' '} <Trans t={t} i18nKey="accessibility-form-defenseurdesdroits">
<TextStyled Écrire un message au{' '}
as="a" <TextStyled
href="https://formulaire.defenseurdesdroits.fr/formulaire_saisine/" as="a"
$display="inline" href="https://formulaire.defenseurdesdroits.fr/formulaire_saisine/"
> $display="inline"
Défenseur des droits >
</TextStyled> Défenseur des droits
</TextStyled>
</Trans>
</li> </li>
<li> <li>
Contacter le délégué du{' '} <Trans t={t} i18nKey="accessibility-contact-defenseurdesdroits">
<TextStyled Contacter le délégué du
as="a" <TextStyled
href="https://www.defenseurdesdroits.fr/carte-des-delegues" as="a"
$display="inline" href="https://www.defenseurdesdroits.fr/carte-des-delegues"
> $display="inline"
Défenseur des droits dans votre région >
</TextStyled> {t('Défenseur des droits dans votre région')}
</TextStyled>
</Trans>
</li> </li>
<li> <li>
Envoyer un courrier par la poste (gratuit, ne pas mettre de timbre) {t(
:{' '} `Envoyer un courrier par la poste (gratuit, ne pas mettre de timbre):`,
<Text $weight="bold" $display="inline"> )}{' '}
<strong>
Défenseur des droits Libre réponse 71120 75342 Paris CEDEX 07 Défenseur des droits Libre réponse 71120 75342 Paris CEDEX 07
</Text> </strong>
</li> </li>
</Text> </Text>
</Box> </Box>

View File

@@ -22,30 +22,33 @@ const Page: NextPageWithLayout = () => {
</Box> </Box>
<Box $padding={{ horizontal: 'large', vertical: 'big' }}> <Box $padding={{ horizontal: 'large', vertical: 'big' }}>
<Text as="h2" $margin={{ bottom: 'xtiny' }}> <Text as="h2" $margin={{ bottom: 'xtiny' }}>
Éditeur {t('Éditeur')}
</Text> </Text>
<Text as="p"> <Text as="p">
Équipe La Suite Numérique de la Direction interministérielle du {t(
numérique DINUM, 20 avenue de Ségur 75007 Paris. 'Équipe La Suite Numérique de la Direction interministérielle du numérique DINUM, 20 avenue de Ségur 75007 Paris.',
)}
</Text> </Text>
<Text as="h2" $margin={{ bottom: 'xtiny' }}> <Text as="h2" $margin={{ bottom: 'xtiny' }}>
Directeur de la publication {t('Directeur de la publication')}
</Text> </Text>
<Text as="p">Directeur interministériel du numérique.</Text> <Text as="p">{t('Directeur interministériel du numérique.')}</Text>
<Text as="h2" $margin={{ bottom: 'xtiny' }}> <Text as="h2" $margin={{ bottom: 'xtiny' }}>
Copyright {t('Copyright')}
</Text> </Text>
<Text as="p" $display="inline"> <Text as="p" $display="inline">
Illustration :{' '} {t('Illustration:')}{' '}
<Text $weight="bold" $display="inline"> <Text $weight="bold" $display="inline">
DINUM DINUM
</Text> </Text>
</Text> </Text>
<Text as="h2" $margin={{ bottom: 'xtiny' }}> <Text as="h2" $margin={{ bottom: 'xtiny' }}>
Plus d&apos;infos ? {t("Plus d'infos ?")}
</Text> </Text>
<Text as="p" $display="inline"> <Text as="p" $display="inline">
L&apos;équipe de La Suite Numérique peut être contactée directement à{' '} {t(
"L'équipe de La Suite Numérique peut être contactée directement à",
)}{' '}
<TextStyled <TextStyled
as="a" as="a"
href="lasuite@modernisation.gouv.fr" href="lasuite@modernisation.gouv.fr"

View File

@@ -22,77 +22,47 @@ const Page: NextPageWithLayout = () => {
</Box> </Box>
<Box $padding={{ horizontal: 'large', vertical: 'big' }}> <Box $padding={{ horizontal: 'large', vertical: 'big' }}>
<Text as="h2" $margin={{ bottom: 'xtiny' }}> <Text as="h2" $margin={{ bottom: 'xtiny' }}>
Cookies déposés {t('Cookies déposés')}
</Text> </Text>
<Text as="p"> <Text as="p">
Ce site dépose un petit fichier texte (un « cookie ») sur votre {t(
ordinateur lorsque vous le consultez. Cela nous permet de mesurer le 'Ce site dépose un petit fichier texte (un « cookie ») sur votre ordinateur lorsque vous le consultez.',
nombre de visites et de comprendre quelles sont les pages les plus )}
consultées. {t(
'Cela nous permet de mesurer le nombre de visites et de comprendre quelles sont les pages les plus consultées.',
)}
</Text> </Text>
<Text as="p"> <Text as="p">
Vous pouvez vous opposer au suivi de votre navigation sur ce site web. {t(
Cela protégera votre vie privée, mais empêchera également le 'Vous pouvez vous opposer au suivi de votre navigation sur ce site web.',
propriétaire d&apos;apprendre de vos actions et de créer une meilleure )}
expérience pour vous et les autres utilisateurs. {t(
"Cela protégera votre vie privée, mais empêchera également le propriétaire d'apprendre de vos actions et de créer une meilleure expérience pour vous et les autres utilisateurs.",
)}
</Text> </Text>
<Text as="h2" $margin={{ bottom: 'xtiny' }}> <Text as="h2" $margin={{ bottom: 'xtiny' }}>
Ce site n&apos;affiche pas de bannière de consentement aux cookies, {t(
pourquoi ? "Ce site n'affiche pas de bannière de consentement aux cookies, pourquoi ?",
)}
</Text> </Text>
<Text as="p"> <Text as="p">
C&apos;est vrai, vous n&apos;avez pas eu à cliquer sur un bloc qui {t(
recouvre la moitié de la page pour dire que vous êtes d&apos;accord "C'est vrai, vous n'avez pas eu à cliquer sur un bloc qui recouvre la moitié de la page pour dire que vous êtes d'accord avec le dépôt de cookies — même si vous ne savez pas ce que ça veut dire !",
avec le dépôt de cookies même si vous ne savez pas ce que ça veut )}
dire !
</Text> </Text>
<Text as="p"> <Text as="p">
Rien d&apos;exceptionnel, pas de passe-droit lié à un .gouv.fr . Nous {t("Rien d'exceptionnel, pas de passe-droit lié à un .gouv.fr .")}
respectons simplement la loi, qui dit que certains outils de suivi {t(
d&apos;audience, correctement configurés pour respecter la vie privée, "Nous respectons simplement la loi, qui dit que certains outils de suivi d'audience, correctement configurés pour respecter la vie privée, sont exemptés d'autorisation préalable.",
sont exemptés d&apos;autorisation préalable. )}
</Text>
<Text as="p" $display="inline">
Nous utilisons pour cela{' '}
<TextStyled as="a" href="https://matomo.org/" $display="inline">
Matomo
</TextStyled>
, un outil{' '}
<TextStyled
as="a"
href="https://matomo.org/free-software/"
$display="inline"
>
libre
</TextStyled>
, paramétré pour être en conformité avec la{' '}
<TextStyled
as="a"
href="https://www.cnil.fr/fr/cookies-et-autres-traceurs/regles/cookies-solutions-pour-les-outils-de-mesure-daudience"
$display="inline"
>
recommandation « Cookies »
</TextStyled>{' '}
de la{' '}
<span
style={{
textDecorationStyle: 'dotted',
textDecorationLine: 'underline',
}}
>
CNIL
</span>
. Cela signifie que votre adresse IP, par exemple, est anonymisée
avant d&apos;être enregistrée. Il est donc impossible d&apos;associer
vos visites sur ce site à votre personne.
</Text> </Text>
<Text as="h2" $margin={{ bottom: 'xtiny' }}> <Text as="h2" $margin={{ bottom: 'xtiny' }}>
Je contribue à enrichir vos données, puis-je y accéder ? {t('Je contribue à enrichir vos données, puis-je y accéder ?')}
</Text> </Text>
<p> <p>
Bien sûr ! Les statistiques d&apos;usage de la majorité de nos {t(
produits, dont lasuite.numerique.gouv.fr, sont disponibles en accès "Bien sûr ! Les statistiques d'usage de la majorité de nos produits, dont docs.numerique.gouv.fr, sont disponibles en accès libre sur",
libre sur{' '} )}{' '}
<TextStyled as="a" href="stats.data.gouv.fr" $display="inline"> <TextStyled as="a" href="stats.data.gouv.fr" $display="inline">
stats.data.gouv.fr stats.data.gouv.fr
</TextStyled> </TextStyled>