betagouv
/
mon-entreprise
mirror of https://github.com/betagouv/mon-entreprise
1
0
Fork 0
Code Releases Activity

🐛🎨 Fix des éléments qui apparaissent à l'impression (#1966) 

* 🐛🎨 Fix des élements qui apparaisent à l'impression

* 🐛🎨 Fix des block vide à l'impression

* 🐛🎨 Fix des types

* 🐛💻 Ajout d'un check pour afficher le bouton d'impression

* 🐛🎨 Fix des types

* 🐛🎨 Amélioration visuel lors de l'impression

* 🐛🎨 Suppression des marges autour du simulateur à l'impression

* 🐛🎨 Supression d'une classe global css inutile

* ✨ Fix types
pull/2004/head
Jérémy Rialland 2022-02-09 11:32:15 +01:00 committed by GitHub
parent 88d0627c88
commit dd20ce09c3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
20 changed files with 163 additions and 116 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
site/source/components/BarChart.tsx
View File

@ -38,7 +38,7 @@ function ChartItemBar({
flex: display ? percentage : 0,
})
return (
<div className="distribution-chart__bar-container ">
<div className="distribution-chart__bar-container">
{disableAnimation ? (
<div
className="distribution-chart__bar print-background-force"
@ -105,20 +105,26 @@ export default function BarChartBranch({
from: {
opacity: 0,
},
immediate: disableAnimation,
opacity: display ? 1 : 0,
})
return (
const innerBarChartBranch = (
<InnerBarChartBranch
value={value}
display={display}
maximum={maximum}
title={title}
unit={unit}
icon={icon}
description={description}
/>
)
return disableAnimation ? (
innerBarChartBranch
) : (
<animated.div ref={intersectionRef} style={style}>
<InnerBarChartBranch
value={value}
display={display}
maximum={maximum}
title={title}
unit={unit}
icon={icon}
description={description}
/>
{innerBarChartBranch}
</animated.div>
)
}
@ -157,7 +163,7 @@ function InnerBarChartBranch({
</Body>
{description && <SmallBody>{description}</SmallBody>}
</div>
<Spacing md />
<Spacing md className="print-hidden" />
<ChartItemBar
display={display}
numberToPlot={value}

74
site/source/components/Distribution.css
View File

@ -17,7 +17,6 @@
.distribution-chart__bar {
border-radius: 0.4em;
min-height: 1.5rem;
}
@ -25,6 +24,9 @@
.distribution-chart__bar {
min-height: 1rem;
}
.distribution-chart__item {
margin: 0.5em 0;
}
}
.distribution-chart__item-content {
@ -35,41 +37,43 @@
width: 35em;
}
@media (max-width: 600px) {
.distribution-chart__legend {
padding: 0;
margin-bottom: -1.25rem;
transform: scale(0.8);
}
.distribution-chart__item {
flex-direction: column;
align-items: stretch;
}
.distribution-chart__legend {
align-items: center !important;
justify-content: flex-start !important;
position: initial !important;
flex-direction: column !important;
padding-right: 0 !important;
width: auto !important;
height: initial !important;
}
.distribution-chart__counterparts {
display: flex;
flex-direction: column;
margin: auto;
width: auto;
margin-bottom: 1rem;
text-align: center;
align-items: center;
}
.distribution-chart__bar {
/* Enable printing of background color */
min-height: 1.5em !important;
}
@media not print {
@media (max-width: 600px) {
.distribution-chart__legend {
padding: 0;
margin-bottom: -1.25rem;
transform: scale(0.8);
}
.distribution-chart__item {
flex-direction: column;
align-items: stretch;
}
.distribution-chart__legend {
align-items: center !important;
justify-content: flex-start !important;
position: initial !important;
flex-direction: column !important;
padding-right: 0 !important;
width: auto !important;
height: initial !important;
}
.distribution-chart__counterparts {
display: flex;
flex-direction: column;
margin: auto;
width: auto;
margin-bottom: 1rem;
text-align: center;
align-items: center;
}
.distribution-chart__bar {
/* Enable printing of background color */
min-height: 1.5em !important;
}
.distribution-chart__branche-name {
font-size: inherit !important;
.distribution-chart__branche-name {
font-size: inherit !important;
}
}
}

2
site/source/components/SearchButton.tsx
View File

@ -12,7 +12,7 @@ export default function SearchButton() {
<PopoverWithTrigger
title={t('Que cherchez-vous ?')}
trigger={(buttonProps) => (
<StyledButton light {...buttonProps}>
<StyledButton className="print-hidden" light {...buttonProps}>
<StyledIcon
xmlns="http://www.w3.org/2000/svg"
fill="none"

38
site/source/components/ShareSimulationBanner/index.tsx
View File

@ -93,27 +93,23 @@ export default function ShareOrSaveSimulationBanner() {
</PopoverWithTrigger>
</Grid>
<Grid item xs={12} sm="auto">
<Button
light
size="XS"
onPress={() => {
window.print()
}}
>
<Emoji
css={`
margin-right: 1rem;
`}
emoji="🖨"
/>
<ButtonLabel>
<Trans i18nKey="ExportSimulation.Banner">
Imprimer ou sauvegarder en PDF
</Trans>
</ButtonLabel>
</Button>
</Grid>
{typeof window.print === 'function' && (
<Grid item xs={12} sm="auto">
<Button light size="XS" onPress={() => window.print()}>
<Emoji
css={`
margin-right: 1rem;
`}
emoji="🖨"
/>
<ButtonLabel>
<Trans i18nKey="ExportSimulation.Banner">
Imprimer ou sauvegarder en PDF
</Trans>
</ButtonLabel>
</Button>
</Grid>
)}
</Grid>
</>
)

6
site/source/components/Simulation/SimulationGoal.tsx
View File

@ -161,8 +161,8 @@ const StyledGoal = styled.div`
position: relative;
z-index: 1;
padding: ${({ theme }) => theme.spacings.sm} 0;
`
const LogoContainer = styled.div`
height: 3rem;
@media print {
padding: 0;
}
`

5
site/source/components/Simulation/SimulationGoals.tsx
View File

@ -70,6 +70,11 @@ const StyledSimulationGoals = styled.div<
: theme.colors.bases.primary
return css`linear-gradient(60deg, ${colorPalette[800]} 0%, ${colorPalette[600]} 100%);`
}};
@media print {
background: initial;
padding: 0;
}
`
function TopSection({ toggles }: { toggles?: React.ReactNode }) {

47
site/source/components/Simulation/index.tsx
View File

@ -1,4 +1,4 @@
import { Grid } from '@mui/material'
import { Grid, styled } from '@mui/material'
import { ConversationProps } from 'Components/conversation/Conversation'
import PageFeedback from 'Components/Feedback'
import ShareOrSaveSimulationBanner from 'Components/ShareSimulationBanner'
@ -25,6 +25,15 @@ type SimulationProps = {
customEndMessages?: ConversationProps['customEndMessages']
}
const StyledGrid = styled(Grid)`
@media print {
max-width: initial;
flex-basis: initial;
flex-grow: 1;
margin: 0 1rem;
}
`
export default function Simulation({
explanations,
results,
@ -38,26 +47,28 @@ export default function Simulation({
{!firstStepCompleted && <TrackPage name="accueil" />}
<ExportRecover />
<Grid container spacing={2} justifyContent="center">
<Grid item xl={9} lg={10} md={11} sm={12}>
<StyledGrid item xl={9} lg={10} md={11} sm={12}>
{children}
{!firstStepCompleted && (
<>
<PreviousSimulationBanner />
{afterQuestionsSlot}
</>
)}
<div className="print-hidden">
{!firstStepCompleted && (
<>
<PreviousSimulationBanner />
{afterQuestionsSlot}
</>
)}
{firstStepCompleted && (
<FromTop>
{results}
<Questions customEndMessages={customEndMessages} />
{afterQuestionsSlot || <Spacing sm />}
<ShareOrSaveSimulationBanner />
<Spacing lg />
</FromTop>
)}
</Grid>
{firstStepCompleted && (
<FromTop>
{results}
<Questions customEndMessages={customEndMessages} />
{afterQuestionsSlot || <Spacing sm />}
<ShareOrSaveSimulationBanner />
<Spacing lg />
</FromTop>
)}
</div>
</StyledGrid>
</Grid>
{firstStepCompleted && (
<>

4
site/source/components/conversation/InputSuggestions.tsx
View File

@ -10,12 +10,14 @@ type InputSuggestionsProps = {
suggestions?: Record<string, ASTNode>
onFirstClick: (val: ASTNode) => void
onSecondClick?: (val: ASTNode) => void
className?: string
}
export default function InputSuggestions({
suggestions = {},
onSecondClick = (x) => x,
onFirstClick,
className,
}: InputSuggestionsProps) {
const [suggestion, setSuggestion] = useState<ASTNode>()
const { t } = useTranslation()
@ -23,7 +25,7 @@ export default function InputSuggestions({
return null
}
return (
<StyledInputSuggestion>
<StyledInputSuggestion className={className}>
{toPairs(suggestions).map(([text, value]: [string, ASTNode]) => {
return (
<Link

1
site/source/components/conversation/NumberInput.tsx
View File

@ -75,6 +75,7 @@ export default function NumberInput({
value={currentValue}
/>
<InputSuggestions
className="print-hidden"
suggestions={suggestions}
onFirstClick={(node: ASTNode) => {
const evaluatedNode = engine.evaluate(node)

2
site/source/components/layout/Footer/Footer.tsx
View File

@ -63,7 +63,7 @@ export default function Footer() {
<Container backgroundColor={(theme) => theme.colors.bases.primary[700]}>
<ThemeProvider theme={(theme) => ({ ...theme, darkMode: true })}>
<FooterContainer>
<FooterContainer className="print-hidden">
<FooterColumn>
{language === 'fr' && (
<ul>

2
site/source/components/simulationExplanation/SalaryExplanation.tsx
View File

@ -127,7 +127,7 @@ export const DistributionSection = ({
}: {
children?: React.ReactNode
}) => (
<section>
<section className="print-no-break-inside">
<H2>
<Trans>À quoi servent mes cotisations ?</Trans>
</H2>

1
site/source/components/ui/AnimatedTargetValue.tsx
View File

@ -47,6 +47,7 @@ export default function AnimatedTargetValue({
}
return (
<div
className="print-hidden"
key={difference}
css={`
position: relative;

13
site/source/design-system/buttons/Button.tsx
View File

@ -3,7 +3,7 @@ import {
GenericButtonOrLinkProps,
useButtonOrLink,
} from 'DesignSystem/typography/link'
import { forwardRef } from 'react'
import React, { ForwardedRef, forwardRef } from 'react'
import styled, { css } from 'styled-components'
type Size = 'XL' | 'MD' | 'XS'
@ -16,22 +16,21 @@ type ButtonProps = GenericButtonOrLinkProps & {
light?: boolean
}
export const Button = forwardRef<
HTMLAnchorElement | HTMLButtonElement,
ButtonProps
>(function Button(
export const Button = forwardRef(function Button(
{
size = 'MD',
light = false,
color = 'primary' as const,
className,
...ariaButtonProps
},
forwardedRef
}: ButtonProps,
forwardedRef: ForwardedRef<HTMLAnchorElement | HTMLButtonElement>
) {
const buttonOrLinkProps = useButtonOrLink(ariaButtonProps, forwardedRef)
return (
<StyledButton
{...buttonOrLinkProps}
className={className}
size={size}
light={light}
color={color}

5
site/source/design-system/card/Article.tsx
View File

@ -34,10 +34,7 @@ export function Article({
: 'div'
const ref = useRef<HTMLAnchorElement | HTMLButtonElement>(null)
const { buttonProps } = useButton(
{ elementType, ...ariaButtonProps },
ref
) as any
const { buttonProps } = useButton({ elementType, ...ariaButtonProps }, ref)
const titleProps = getTitleProps(title, 'h3')
const linkProps = useExternalLinkProps({
...(typeof title === 'string' ? { title } : {}),

12
site/source/design-system/footer/container.tsx
View File

@ -8,8 +8,16 @@ const StyledGrid = styled(Grid)`
type FooterContainerProps = {
children: ReactNode
className?: string
}
export const FooterContainer = ({ children }: FooterContainerProps) => {
return <StyledGrid container>{children}</StyledGrid>
export const FooterContainer = ({
children,
className,
}: FooterContainerProps) => {
return (
<StyledGrid className={className} container>
{children}
</StyledGrid>
)
}

3
site/source/design-system/global-style.ts
View File

@ -157,6 +157,9 @@ button:enabled {
.print-background-force {
color-adjust: exact !important;
}
.print-no-break-inside {
break-inside: avoid;
}
body {
margin: 00mm;

7
site/source/design-system/layout/Container.tsx
View File

@ -73,10 +73,14 @@ const OuterContainer = styled.div<OuterContainerProps>`
min-width: 100vw;
background-color: ${({ theme, backgroundColor }) =>
backgroundColor ? backgroundColor(theme) : theme.colors};
@media print {
min-width: initial;
}
${InnerContainer} & {
@media print {
margin-left: 0;
margin-right: 0;
padding: 0.5em;
}
}
`
@ -85,4 +89,7 @@ const OuterOuterContainer = styled.div`
display: flex;
flex-direction: row;
justify-content: center;
@media print {
break-inside: avoid;
}
`

4
site/source/design-system/typography/heading.tsx
View File

@ -28,6 +28,10 @@ export const H1 = styled.h1<{ noUnderline?: boolean }>`
`};
line-height: 2.375rem;
${({ noUnderline }) => (!noUnderline ? HeadingUnderline : '')}
@media print {
margin: ${({ theme }) => theme.spacings.xl} 0;
}
`
export const H2 = styled.h2<{ noUnderline?: boolean }>`

19
site/source/design-system/typography/link.tsx
View File

@ -3,6 +3,7 @@ import { AriaButtonProps } from '@react-types/button'
import { FocusStyle } from 'DesignSystem/global-style'
import React, {
ComponentPropsWithRef,
CSSProperties,
ForwardedRef,
useCallback,
useRef,
@ -83,14 +84,15 @@ export function useExternalLinkProps({
}
}
export type GenericButtonOrLinkProps =
| ({
href: string
title?: string
openInSameWindow?: true
} & AriaButtonProps<'a'>)
export type GenericButtonOrLinkProps = (
| AriaButtonProps<'a'>
| (AriaButtonProps<typeof NavLink> & ComponentPropsWithRef<typeof NavLink>)
| AriaButtonProps<'button'>
) & {
openInSameWindow?: true
className?: string
style?: CSSProperties
}
export function useButtonOrLink(
props: GenericButtonOrLinkProps,
@ -133,14 +135,15 @@ export function useButtonOrLink(
...buttonProps,
...useExternalLinkProps(props),
as: elementType,
ref: ref as any,
} as any
ref,
}
return buttonOrLinkProps
}
export const NewWindowLinkIcon = () => {
return (
<StyledSvg
className="print-hidden"
viewBox="0 0 24 24"
aria-hidden
fill="none"

2
site/source/pages/Simulateurs/index.tsx
View File

@ -53,7 +53,7 @@ export default function Simulateurs() {
</Link>
) : !isEmbedded ? (
(!lastState || lastState?.fromSimulateurs) && (
<Link to={sitePaths.simulateurs.index}>
<Link className="print-hidden" to={sitePaths.simulateurs.index}>
← <Trans>Voir les autres simulateurs</Trans>
</Link>
)