diff --git a/site/source/components/BarChart.tsx b/site/source/components/BarChart.tsx index d99a0f986..dab5a342a 100644 --- a/site/source/components/BarChart.tsx +++ b/site/source/components/BarChart.tsx @@ -38,7 +38,7 @@ function ChartItemBar({ flex: display ? percentage : 0, }) return ( -
+
{disableAnimation ? (
+ ) + + return disableAnimation ? ( + innerBarChartBranch + ) : ( - + {innerBarChartBranch} ) } @@ -157,7 +163,7 @@ function InnerBarChartBranch({ {description && {description}}
- + ( - + - - - + {typeof window.print === 'function' && ( + + + + )} ) diff --git a/site/source/components/Simulation/SimulationGoal.tsx b/site/source/components/Simulation/SimulationGoal.tsx index 60596c1a4..34aa5b4d9 100644 --- a/site/source/components/Simulation/SimulationGoal.tsx +++ b/site/source/components/Simulation/SimulationGoal.tsx @@ -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; + } ` diff --git a/site/source/components/Simulation/SimulationGoals.tsx b/site/source/components/Simulation/SimulationGoals.tsx index 72b1d2445..287385620 100644 --- a/site/source/components/Simulation/SimulationGoals.tsx +++ b/site/source/components/Simulation/SimulationGoals.tsx @@ -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 }) { diff --git a/site/source/components/Simulation/index.tsx b/site/source/components/Simulation/index.tsx index b95c65923..1ec8f40ed 100644 --- a/site/source/components/Simulation/index.tsx +++ b/site/source/components/Simulation/index.tsx @@ -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 && } - + {children} - {!firstStepCompleted && ( - <> - - {afterQuestionsSlot} - - )} +
+ {!firstStepCompleted && ( + <> + + {afterQuestionsSlot} + + )} - {firstStepCompleted && ( - - {results} - - {afterQuestionsSlot || } - - - - )} - + {firstStepCompleted && ( + + {results} + + {afterQuestionsSlot || } + + + + )} +
+ {firstStepCompleted && ( <> diff --git a/site/source/components/conversation/InputSuggestions.tsx b/site/source/components/conversation/InputSuggestions.tsx index 24c29af70..e74cbffaa 100644 --- a/site/source/components/conversation/InputSuggestions.tsx +++ b/site/source/components/conversation/InputSuggestions.tsx @@ -10,12 +10,14 @@ type InputSuggestionsProps = { suggestions?: Record 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() const { t } = useTranslation() @@ -23,7 +25,7 @@ export default function InputSuggestions({ return null } return ( - + {toPairs(suggestions).map(([text, value]: [string, ASTNode]) => { return ( { const evaluatedNode = engine.evaluate(node) diff --git a/site/source/components/layout/Footer/Footer.tsx b/site/source/components/layout/Footer/Footer.tsx index 252f80cff..1cef17c46 100644 --- a/site/source/components/layout/Footer/Footer.tsx +++ b/site/source/components/layout/Footer/Footer.tsx @@ -63,7 +63,7 @@ export default function Footer() { theme.colors.bases.primary[700]}> ({ ...theme, darkMode: true })}> - + {language === 'fr' && (
    diff --git a/site/source/components/simulationExplanation/SalaryExplanation.tsx b/site/source/components/simulationExplanation/SalaryExplanation.tsx index 1f184339e..6b4a9074b 100644 --- a/site/source/components/simulationExplanation/SalaryExplanation.tsx +++ b/site/source/components/simulationExplanation/SalaryExplanation.tsx @@ -127,7 +127,7 @@ export const DistributionSection = ({ }: { children?: React.ReactNode }) => ( -
    +

    À quoi servent mes cotisations ?

    diff --git a/site/source/components/ui/AnimatedTargetValue.tsx b/site/source/components/ui/AnimatedTargetValue.tsx index 759ab9da4..28698dce6 100644 --- a/site/source/components/ui/AnimatedTargetValue.tsx +++ b/site/source/components/ui/AnimatedTargetValue.tsx @@ -47,6 +47,7 @@ export default function AnimatedTargetValue({ } return (
    (function Button( +export const Button = forwardRef(function Button( { size = 'MD', light = false, color = 'primary' as const, + className, ...ariaButtonProps - }, - forwardedRef + }: ButtonProps, + forwardedRef: ForwardedRef ) { const buttonOrLinkProps = useButtonOrLink(ariaButtonProps, forwardedRef) return ( (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 } : {}), diff --git a/site/source/design-system/footer/container.tsx b/site/source/design-system/footer/container.tsx index 683e7cb5f..238e20cf7 100644 --- a/site/source/design-system/footer/container.tsx +++ b/site/source/design-system/footer/container.tsx @@ -8,8 +8,16 @@ const StyledGrid = styled(Grid)` type FooterContainerProps = { children: ReactNode + className?: string } -export const FooterContainer = ({ children }: FooterContainerProps) => { - return {children} +export const FooterContainer = ({ + children, + className, +}: FooterContainerProps) => { + return ( + + {children} + + ) } diff --git a/site/source/design-system/global-style.ts b/site/source/design-system/global-style.ts index 28565efdb..42cc40f4e 100644 --- a/site/source/design-system/global-style.ts +++ b/site/source/design-system/global-style.ts @@ -157,6 +157,9 @@ button:enabled { .print-background-force { color-adjust: exact !important; } + .print-no-break-inside { + break-inside: avoid; + } body { margin: 00mm; diff --git a/site/source/design-system/layout/Container.tsx b/site/source/design-system/layout/Container.tsx index 9e64e4bf5..4e55b84a2 100644 --- a/site/source/design-system/layout/Container.tsx +++ b/site/source/design-system/layout/Container.tsx @@ -73,10 +73,14 @@ const OuterContainer = styled.div` 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; + } ` diff --git a/site/source/design-system/typography/heading.tsx b/site/source/design-system/typography/heading.tsx index 7664ea2a6..43ca8499d 100644 --- a/site/source/design-system/typography/heading.tsx +++ b/site/source/design-system/typography/heading.tsx @@ -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 }>` diff --git a/site/source/design-system/typography/link.tsx b/site/source/design-system/typography/link.tsx index d039421e5..57cc67446 100644 --- a/site/source/design-system/typography/link.tsx +++ b/site/source/design-system/typography/link.tsx @@ -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 & ComponentPropsWithRef) | 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 ( ) : !isEmbedded ? ( (!lastState || lastState?.fromSimulateurs) && ( - + ← Voir les autres simulateurs )