From 4a85579a42e531cd5cd363e5694d398b20dff464 Mon Sep 17 00:00:00 2001 From: Benjamin Arias Date: Thu, 6 Oct 2022 09:18:38 +0200 Subject: [PATCH] =?UTF-8?q?RGAA=20:=20mise=20en=20conformit=C3=A9=20M?= =?UTF-8?q?=C3=A9dias=20(#2305)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat: Ajoute la transcription de la vidéo vidéo * feat: Utilise AccompagnyingMessage * feat: Ajoute composant FoldingMessage qui affiche le transcript * feat: Ajout d'un paramètre pour empêcher la traduction d'un texte + améliore FoldingMessage --- site/scripts/i18n/utils.js | 6 +- site/source/components/ui/FoldingMessage.tsx | 67 +++++++++++++++ site/source/design-system/message/index.tsx | 2 +- site/source/locales/ui-en.yaml | 36 +++++++++ site/source/locales/ui-fr.yaml | 43 ++++++++++ site/source/pages/gerer/sécurité-sociale.tsx | 85 +++++++++++++++++++- 6 files changed, 235 insertions(+), 4 deletions(-) create mode 100644 site/source/components/ui/FoldingMessage.tsx diff --git a/site/scripts/i18n/utils.js b/site/scripts/i18n/utils.js index 24692bab3..03b594221 100644 --- a/site/scripts/i18n/utils.js +++ b/site/scripts/i18n/utils.js @@ -97,7 +97,11 @@ export const getUiMissingTranslations = () => { const missingTranslations = Object.entries(staticKeys) .filter(([key, valueInSource]) => { - if (key.match(/^\{.*\}$/) || valueInSource === 'NO_TRANSLATION') { + if ( + key.match(/^\{.*\}$/) || + valueInSource === 'NO_TRANSLATION' || + key.includes('NO_AUTO_TRANSLATION') + ) { return false } const keys = key.split(/(?<=[A-zÀ-ü0-9])\.(?=[A-zÀ-ü0-9])/) diff --git a/site/source/components/ui/FoldingMessage.tsx b/site/source/components/ui/FoldingMessage.tsx new file mode 100644 index 000000000..e8cd8a71c --- /dev/null +++ b/site/source/components/ui/FoldingMessage.tsx @@ -0,0 +1,67 @@ +import { Message, MessageType } from '@/design-system' +import { Button } from '@/design-system/buttons' +import { Spacing } from '@/design-system/layout' +import { Link } from '@/design-system/typography/link' +import { Intro } from '@/design-system/typography/paragraphs' +import { ReactNode, useState } from 'react' +import { Trans } from 'react-i18next' +import { FromTop } from './animate' + +type FoldingMessageProps = { + title: string + children: ReactNode + isDefaultFolded?: boolean + unfoldButtonLabel: string + type?: MessageType | undefined +} + +export default function FoldingMessage({ + title, + children, + isDefaultFolded = true, + unfoldButtonLabel, + type = 'primary', + ...props +}: FoldingMessageProps) { + const [isFolded, setIsFolded] = useState(isDefaultFolded) + + return ( + +
+ + {title}{' '} + {isFolded && ( + setIsFolded(false)} + aria-expanded={false} + aria-controls="warning-text" + > + + {unfoldButtonLabel} + + + )} + + {!isFolded && ( + +
{children}
+
+ + +
+ + )} +
+
{children}
+ + ) +} diff --git a/site/source/design-system/message/index.tsx b/site/source/design-system/message/index.tsx index e5b163b32..ff827d611 100644 --- a/site/source/design-system/message/index.tsx +++ b/site/source/design-system/message/index.tsx @@ -7,7 +7,7 @@ import errorIcon from './errorIcon.svg' import infoIcon from './infoIcon.svg' import successIcon from './successIcon.svg' -type MessageType = 'primary' | 'secondary' | 'info' | 'error' | 'success' +export type MessageType = 'primary' | 'secondary' | 'info' | 'error' | 'success' type MessageProps = { children: React.ReactNode icon?: boolean diff --git a/site/source/locales/ui-en.yaml b/site/source/locales/ui-en.yaml index e468d1ec0..6165e5504 100644 --- a/site/source/locales/ui-en.yaml +++ b/site/source/locales/ui-en.yaml @@ -2060,6 +2060,42 @@ sécu: page: titre: Social Security titre: Social security in France + transcript-NO_AUTO_TRANSLATION: "<0>Three minutes to understand the challenges + of social security.<1>The purpose of social security is to protect + people living in France when certain events occur during their + lives.<2>Its budget consists of expenses mainly in the form of benefits + and of income, financed partly by contributions. Income is managed by the + collection branch made up of the URSSAF agencies. Regarding expenses, there + are four branches. The health insurance branch covers hospital costs, + medecine and consultations. The retirement pension branch registers on each + person's old-age account their income received throughout their working life + using companies online declarations in order to calculate and pay pensions. + the occupational risks branch covers the costs related to occupational + diseases and accidents at work. the family branch provides various benefits + regarding birth and child care and allowances for education and housing for + example. These four branches form the general scheme of the Social Security + system. Besides the general scheme there are specific organizations such as + the MSA for farmers and special schemes.<3>All people living in France + help to fund the Social Security system which in return provides cover for + all of them. The principle is that of a \"common pot\" which works through + solidarity each person pays contributions based on their income rather than + on their risks.<4>The Social Security system by providing pensions and + paying for medical care has extended life expectancy in France by three + months every year in the past 20 years. This progress leads to financing + difficulties: longer life expectancy implies more pensions and higher health + expenses which unbalance the system. To restore its balance, measures are + being taken especially by extending the contributions duration.<5>The + Social Security system is also increasing its services such as childcare + capacity for children aged up to three so their parents can keep working. It + is also developing preventive actions, running immunization campaigns + programs for the early screening of certain diseases, actions for post + Hospital support at home, and information about fall danger among the + elderly.<6>Founded seventy years ago, the French Social Security system + has not only enabled the French to live longer but also better it will + continue evolving to build the services that meet their needs you." + videoTitle: <0>Explanatory video "3 minutes to understand the French Social + Security system" + videoTranscriptTitle: Transcript of the video taux: rate taxe: tax tous les 6 mois: every 6 months diff --git a/site/source/locales/ui-fr.yaml b/site/source/locales/ui-fr.yaml index c9f975469..a984ff6cf 100644 --- a/site/source/locales/ui-fr.yaml +++ b/site/source/locales/ui-fr.yaml @@ -1697,6 +1697,49 @@ sécu: travail, chômage ou encore la retraite. page: titre: Sécurité sociale + transcript-NO_AUTO_TRANSLATION: "<0>Trois minutes pour comprendre les enjeux de + la sécurité sociale.<1>La sécurité sociale a pour objectif de protéger + les personnes qui résident en France face à certains évènements qui + surviennent tout au long de leur vie.<2>Son budget est composé dépenses + principalement sous la forme de prestations et de recettes, alimentés en + partie par les contributions. Les recettes sont gérées bar la branche des + recouvrements composé des URSSAF. Pour les dépenses, il existe quatre + branches. La branche Assurance-Maladie permet de couvrir les dépenses + d’hospitalisation, de médicaments et consultation des professionnels de + santé. La branche retraite prend en charge l’inscription des revenus sur le + compte vieillesse de chacun tout au long de sa vie active, à partir des + déclarations internet des entreprises, ce qui permet ensuite de calculer le + montant des retraites et de les verser. La branche accidents du travail + prend en charge les frais liés aux maladies professionnelles et aux + accidents du travail. La branche famille verse différents types de + prestations liées à la naissance, à la garde d’enfant, aux aides à + l’éducation ou au logement par exemple. Ces quatre branches forment le + régime général de la sécurité sociale qui a intégré les indépendants le 1er + janvier 2018. Des organisations spécifiques s’ajoutent au régime général + dont la MSA pour les agriculteurs ou les régimes spéciaux.<3>Toutes les + personnes qui résident en France contribuent au financement de la sécurité + sociale qui en retour couvre toute la population. Le principe est celui du + \"pot-commun\" fonctionnant par solidarité. Le montant de la contribution + versée par chaque personne ne dépend pas de ses propres risques, mais de ses + revenus.<4>La sécurité sociale, par l’intermédiaire du versement des + retraites et de la prise en charge des soins, a permis l’allongement de + l’espérance de vie de trois mois de plus par an depuis 20 ans. Ces progrès + entraînent des difficultés de financement : l'allongement de la durée de vie + implique des retraites plus longues et des dépenses de santé plus importante + qui déséquilibre le système. Pour rééquilibrer le système des mesures + d'adaptation sont prises notamment sur la durée de cotisation.<5>La + sécurité sociale développe également de nouveaux services comme l'ouverture + de places d'accueil pour les jeunes enfants ce qui permet à leurs parents de + continuer à travailler. Elle développe aussi des actions de prévention, + organise des campagnes de vaccination, de dépistage précoce de certaines + maladies, des actions d'accompagnement au retour à domicile après + hospitalisation, ainsi que des campagnes d'information et de prévention sur + les chutes des personnes âgées.<6>Née il y a soixante dix ans, la + Sécurité Sociale a permis aux français de vivre plus, mais aussi mieux elle + continuera à évoluer pour construire les services qui correspondent à leurs + besoins." + videoTitle: <0>Vidéo explicative "3 minutes pour comprendre la Sécurité Sociale" + videoTranscriptTitle: Transcription de la vidéo tous les 6 mois: tous les 6 mois trimestriel: trimestriel trouver: diff --git a/site/source/pages/gerer/sécurité-sociale.tsx b/site/source/pages/gerer/sécurité-sociale.tsx index 875edebd9..bda53db9d 100644 --- a/site/source/pages/gerer/sécurité-sociale.tsx +++ b/site/source/pages/gerer/sécurité-sociale.tsx @@ -1,8 +1,10 @@ import { FromBottom } from '@/components/ui/animate' -import { H1 } from '@/design-system/typography/heading' +import FoldingMessage from '@/components/ui/FoldingMessage' +import { H1, H2 } from '@/design-system/typography/heading' import { Body } from '@/design-system/typography/paragraphs' import { Helmet } from 'react-helmet-async' import { Trans, useTranslation } from 'react-i18next' +import styled from 'styled-components' import { TrackPage } from '../../ATInternetTracking' import Video from './_components/Video' @@ -31,11 +33,90 @@ export default function SocialSecurity() { la maladie, les accidents du travail, chômage ou encore la retraite. -
+ +

+ Vidéo explicative "3 minutes pour comprendre la Sécurité Sociale" +

+ +
+ + + + Trois minutes pour comprendre les enjeux de la sécurité sociale. + + + La sécurité sociale a pour objectif de protéger les personnes qui + résident en France face à certains évènements qui surviennent tout + au long de leur vie. + + + Son budget est composé dépenses principalement sous la forme de + prestations et de recettes, alimentés en partie par les + contributions. Les recettes sont gérées bar la branche des + recouvrements composé des URSSAF. Pour les dépenses, il existe + quatre branches. La branche Assurance-Maladie permet de couvrir + les dépenses d’hospitalisation, de médicaments et consultation des + professionnels de santé. La branche retraite prend en charge + l’inscription des revenus sur le compte vieillesse de chacun tout + au long de sa vie active, à partir des déclarations internet des + entreprises, ce qui permet ensuite de calculer le montant des + retraites et de les verser. La branche accidents du travail prend + en charge les frais liés aux maladies professionnelles et aux + accidents du travail. La branche famille verse différents types de + prestations liées à la naissance, à la garde d’enfant, aux aides à + l’éducation ou au logement par exemple. Ces quatre branches + forment le régime général de la sécurité sociale qui a intégré les + indépendants le 1er janvier 2018. Des organisations spécifiques + s’ajoutent au régime général dont la MSA pour les agriculteurs ou + les régimes spéciaux. + + + Toutes les personnes qui résident en France contribuent au + financement de la sécurité sociale qui en retour couvre toute la + population. Le principe est celui du "pot-commun" fonctionnant par + solidarité. Le montant de la contribution versée par chaque + personne ne dépend pas de ses propres risques, mais de ses + revenus. + + + La sécurité sociale, par l’intermédiaire du versement des + retraites et de la prise en charge des soins, a permis + l’allongement de l’espérance de vie de trois mois de plus par an + depuis 20 ans. Ces progrès entraînent des difficultés de + financement : l'allongement de la durée de vie implique des + retraites plus longues et des dépenses de santé plus importante + qui déséquilibre le système. Pour rééquilibrer le système des + mesures d'adaptation sont prises notamment sur la durée de + cotisation. + + + La sécurité sociale développe également de nouveaux services comme + l'ouverture de places d'accueil pour les jeunes enfants ce qui + permet à leurs parents de continuer à travailler. Elle développe + aussi des actions de prévention, organise des campagnes de + vaccination, de dépistage précoce de certaines maladies, des + actions d'accompagnement au retour à domicile après + hospitalisation, ainsi que des campagnes d'information et de + prévention sur les chutes des personnes âgées. + + + Née il y a soixante dix ans, la Sécurité Sociale a permis aux + français de vivre plus, mais aussi mieux elle continuera à évoluer + pour construire les services qui correspondent à leurs besoins. + + + ) } + +const StyledFoldingMessage = styled(FoldingMessage)` + margin-top: 2rem; +`