🏓 Permettre l'export PDF ou impression du comparateur de statut #2406 (…

…#2835) * feat : ajout du bouton "Imprimer/sauvegarder PDF" * feat : ajout de mise en page pour l'impression * fix : ajouts des donnes cruciales * fix: suppresion dans l'impression du bouton "Modifier mes options" * fix : suppresion de l'affichage du bouton tout deplier lors de l'impression * fix: suppression padding, margin, border bleue et reduction taille des textes Co-authored-by: Jofresh <gaborit.geoffray@gmail.com>
betagouv · Jan 31, 2024 · d7fb260 · d7fb260
1 parent c20a7cb
commit d7fb260
Show file tree

Hide file tree

Showing 7 changed files with 113 additions and 33 deletions.
diff --git a/site/source/design-system/accordion/index.tsx b/site/source/design-system/accordion/index.tsx
@@ -103,7 +103,7 @@ export const Accordion = <T extends object>(
  <StyledGrid container>
  <Grid item>{title}</Grid>
  {isFoldable && (
- <Grid item>
+ <Grid item className="print-hidden">
  <StyledFoldButton
  underline
  onClick={() => (allItemsOpen ? closeAll() : openAll())}
@@ -204,10 +204,17 @@ const StyledTitle = styled.h3`
 const StyledAccordionItem = styled.div`
  &:not(:first-child) {
  border-top: 1px solid ${({ theme }) => theme.colors.bases.primary[400]};
+ @media print {
+ border-top: none;
+ }
  }
 `
 
 const StyledButton = styled.button<{ $variant?: 'light' }>`
+@media print {
+ margin: 0;
+ padding: 0;
+}
  display: flex;
  width: 100%;
  background: none;
@@ -262,6 +269,11 @@ const StyledContent = styled(animated.div)<{
  $variant?: 'light'
 }>`
  overflow: hidden;
+ @media print {
+ overflow: visible;
+ display: table;
+ > div {margin: 1rem 0 !important;} 
+ }
  > div {
  margin: ${({ theme, $variant }) =>
  $variant !== 'light' && theme.spacings.lg};

diff --git a/site/source/pages/simulateurs/comparaison-statuts/components/Comparateur.tsx b/site/source/pages/simulateurs/comparaison-statuts/components/Comparateur.tsx
@@ -102,7 +102,7 @@ function Comparateur({ namedEngines }: { namedEngines: EngineComparison }) {
  paddingTop: '1rem',
  }}
  >
- <ModifierOptions namedEngines={namedEngines} />
+ <ModifierOptions namedEngines={namedEngines} className="print-hidden" />
  </div>
  </Container>
  <Détails namedEngines={namedEngines} expandRevenuSection />

diff --git a/site/source/pages/simulateurs/comparaison-statuts/components/DetailsRowCards.tsx b/site/source/pages/simulateurs/comparaison-statuts/components/DetailsRowCards.tsx
@@ -87,12 +87,11 @@ const DetailsRowCards = ({
  .filter((arrayOfStatus) => arrayOfStatus.length > 0)
 
  return (
- <Grid container spacing={4}>
+ <StyledGridContainer container spacing={4}>
  {groupedOptions.map((sameValueOptions) => {
  const statusObject = sameValueOptions[0]
-
  return (
- <Grid
+ <StyledGrid
  key={statusObject.name}
  item
  {...getGridSizes(sameValueOptions.length, options.length)}
@@ -189,10 +188,10 @@ const DetailsRowCards = ({
  )}
  </StyledBody>
  </StatusCard>
- </Grid>
+ </StyledGrid>
  )
  })}
- </Grid>
+ </StyledGridContainer>
  )
 }
 const StyledSmall = styled.small`
@@ -232,6 +231,18 @@ const StyledDiv = styled.div`
  display: flex;
  align-items: center;
 `
+const StyledGrid = styled(Grid)`
+ @media print {
+ width: 33%;
+ padding: 5px;
+}
+`
+
+const StyledGridContainer = styled(Grid)`
+ @media print {
+ margin-left: -5px;
+}
+`
 
 export default DetailsRowCards
 const StyledBody = styled(Body)`
@@ -242,4 +253,7 @@ const StyledBody = styled(Body)`
  font-weight: 700;
  margin: 0;
  margin-top: 0.75rem;
+ @media print {
+ font-size: 18px;
+}
 `
diff --git a/site/source/pages/simulateurs/comparaison-statuts/components/Détails.tsx b/site/source/pages/simulateurs/comparaison-statuts/components/Détails.tsx
@@ -37,7 +37,7 @@ const Détails = ({
  : theme.colors.bases.primary[200]
  }
  >
- <Accordion
+ <StyledAccordion
  $variant="light"
  defaultExpandedKeys={expandRevenuSection ? ['revenus'] : []}
  title={
@@ -47,7 +47,8 @@ const Détails = ({
  }
  isFoldable
  >
- <Item
+
+ <StyledItem
  title={
  <ItemTitle>
  <Trans>Vos revenus</Trans>&nbsp;
@@ -57,6 +58,7 @@ const Détails = ({
  key="revenus"
  hasChildItems={false}
  >
+ <OuterOuterContainer>
  <StyledH4>
  <Trans>Revenu net mensuel après impôts</Trans>
 
@@ -157,9 +159,9 @@ const Détails = ({
  </Condition>
  )}
  />
- </Item>
-
- <Item
+ </OuterOuterContainer>
+ </StyledItem>
+ <StyledItem
  title={
  <ItemTitle>
  <Trans>Vos droits pour la retraite</Trans>&nbsp;
@@ -169,6 +171,7 @@ const Détails = ({
  key="retraite"
  hasChildItems={false}
  >
+ <OuterOuterContainer>
  <Body>
  <Trans>
  Le montant de votre retraite est constitué de{' '}
@@ -197,7 +200,8 @@ const Détails = ({
  namedEngines={namedEngines}
  unit="€/mois"
  />
-
+ </OuterOuterContainer>
+ <OuterOuterContainer>
  <StyledH4>
  <Trans>Retraite complémentaire</Trans>
  <ExplicableRule dottedName="protection sociale . retraite . complémentaire" />
@@ -224,8 +228,9 @@ const Détails = ({
  unit="€/mois"
  evolutionLabel={<Trans>au bout de 10 ans</Trans>}
  />
- </Item>
- <Item
+ </OuterOuterContainer>
+ </StyledItem>
+ <StyledItem
  title={
  <ItemTitle>
  <Trans>Vos prestations santé</Trans>&nbsp;
@@ -235,6 +240,7 @@ const Détails = ({
  key="santé"
  hasChildItems={false}
  >
+ <OuterOuterContainer>
  <Body
  style={{
  marginBottom: '0',
@@ -320,7 +326,8 @@ const Détails = ({
  </Condition>
  )}
  />
-
+ </OuterOuterContainer>
+ <OuterOuterContainer>
  <StyledH4>
  <Trans>Accident du travail et maladie professionnelle</Trans>
  <ExplicableRule dottedName="protection sociale . maladie . accidents du travail et maladies professionnelles . indemmnités" />
@@ -340,8 +347,9 @@ const Détails = ({
  evolutionDottedName="protection sociale . maladie . accidents du travail et maladies professionnelles . indemmnités . à partir du 29ème jour"
  evolutionLabel={<Trans>à partir du 29ème jour</Trans>}
  />
- </Item>
- <Item
+ </OuterOuterContainer>
+ </StyledItem>
+ <StyledItem
  title={
  <ItemTitle>
  <Trans>La maternité, paternité et adoption</Trans>&nbsp;
@@ -351,6 +359,7 @@ const Détails = ({
  key="enfants"
  hasChildItems={false}
  >
+ <OuterOuterContainer>
  <Body
  style={{
  marginBottom: '0',
@@ -378,7 +387,8 @@ const Détails = ({
  namedEngines={namedEngines}
  unit="€/jour"
  />
-
+ </OuterOuterContainer>
+ <OuterOuterContainer>
  <StyledH4>
  <Trans>Maternité</Trans>
  <ExplicableRule dottedName="protection sociale . maladie . maternité paternité adoption . allocation forfaitaire de repos maternel" />
@@ -398,7 +408,8 @@ const Détails = ({
  namedEngines={namedEngines}
  label={<Trans>versés en deux fois</Trans>}
  />
-
+ </OuterOuterContainer>
+ <OuterOuterContainer>
  <StyledH4>
  <Trans>Adoption</Trans>
  <ExplicableRule dottedName="protection sociale . maladie . maternité paternité adoption . allocation forfaitaire de repos adoption" />
@@ -418,8 +429,9 @@ const Détails = ({
  namedEngines={namedEngines}
  label={<Trans>versés en une fois</Trans>}
  />
- </Item>
- <Item
+ </OuterOuterContainer>
+ </StyledItem>
+ <StyledItem
  title={
  <ItemTitle>
  <Trans>Votre couverture invalidité et décès</Trans>&nbsp;
@@ -429,6 +441,7 @@ const Détails = ({
  key="maladie"
  hasChildItems={false}
  >
+ <OuterOuterContainer>
  <Body>
  <Trans>
  Tous les statuts cotisent pour une{' '}
@@ -485,6 +498,8 @@ const Détails = ({
  </span>
  }
  />
+ </OuterOuterContainer>
+ <OuterOuterContainer>
  <Body>
  <Trans>
  Pour une invalidité causée par un{' '}
@@ -497,7 +512,8 @@ const Détails = ({
  namedEngines={namedEngines}
  unit="€/mois"
  />
-
+ </OuterOuterContainer>
+ <OuterOuterContainer>
  <StyledH4>
  <Trans>Décès</Trans>
  <ExplicableRule dottedName="protection sociale . invalidité et décès . capital décès" />
@@ -514,7 +530,8 @@ const Détails = ({
  label="pour vos proches"
  namedEngines={namedEngines}
  />
-
+ </OuterOuterContainer>
+ <OuterOuterContainer>
  <Body>
  <Trans>
  En plus du capital décès, une{' '}
@@ -529,7 +546,8 @@ const Détails = ({
  label={'maximum'}
  namedEngines={namedEngines}
  />
-
+ </OuterOuterContainer>
+ <OuterOuterContainer>
  <Body>
  <Trans>
  Pour un décès survenu dans le cadre d’un{' '}
@@ -544,7 +562,8 @@ const Détails = ({
  unit="€/mois"
  label={t("en cas d'accident pro")}
  />
-
+ </OuterOuterContainer>
+ <OuterOuterContainer>
  <Body>
  <Trans>
  Un <Strong>capital « orphelin »</Strong> est versé aux{' '}
@@ -558,8 +577,9 @@ const Détails = ({
  namedEngines={namedEngines}
  unit="€/enfant"
  />
- </Item>
- <Item
+ </OuterOuterContainer>
+ </StyledItem>
+ <StyledItem
  title={
  <ItemTitle>
  <Trans>
@@ -570,6 +590,7 @@ const Détails = ({
  key="administratif"
  hasChildItems={false}
  >
+ <OuterOuterContainer>
  <StyledH4>
  <Trans>Coût de création</Trans>
  <ExplicableRule dottedName="entreprise . coût formalités . création" />
@@ -588,7 +609,8 @@ const Détails = ({
  namedEngines={namedEngines}
  leastIsBest
  />
-
+ </OuterOuterContainer>
+ <OuterOuterContainer>
  <StyledH4>
  <Trans>Statut du conjoint</Trans>
  </StyledH4>
@@ -629,14 +651,19 @@ const Détails = ({
  }}
  namedEngines={namedEngines}
  />
- </Item>
- </Accordion>
+ </OuterOuterContainer>
+ </StyledItem>
+ </StyledAccordion>
  </Container>
  )
 }
 
 const StyledH4 = styled(H4)`
  color: ${({ theme }) => theme.colors.bases.primary[600]};
+ @media print {
+ margin: 0 0 1rem 0;
+ }
+ 
 `
 // TODO : décommenter une fois l'implémentation du calcul des coûts de créations
 // ajouté à modèle-social
@@ -662,7 +689,7 @@ const Precisions = styled.span`
 
 const StyledDiv = styled.div`
  display: flex;
-
+ 
  svg {
  width: 2.5rem;
  margin-right: 1rem;
@@ -682,4 +709,23 @@ const BlackColoredLink = styled(StyledLink)`
  color: ${({ theme }) => theme.colors.extended.grey[800]};
 `
 
+const OuterOuterContainer = styled.div`
+ @media print {
+ page-break-inside: avoid !important;
+ }
+`
+
+const StyledAccordion = styled(Accordion)`
+@media print {
+ page-break-after: avoid !important;
+ border: none !important;
+}
+`
+
+const StyledItem = styled(Item)`
+@media print {
+ page-break-inside: avoid;
+}
+`
+
 export default Détails