Quelques améliorations

site/source/components/Simulation/SimulationGoal.tsx

@@ -113,6 +113,7 @@ export function SimulationGoal({
 								onFocus={() => setFocused(true)}
 								onBlur={() => setFocused(false)}
 								onChange={onChange}
+								missing={dottedName in evaluation.missingVariables}
 								small={small}
 								formatOptions={{
 									maximumFractionDigits: 0,

site/source/components/conversation/Conversation.tsx

@@ -20,6 +20,7 @@ import React, { useContext, useEffect } from 'react'
 import { Trans } from 'react-i18next'
 import { useDispatch, useSelector } from 'react-redux'
 import { TrackPage } from '../../ATInternetTracking'
+import { FromTop } from '../ui/animate'
 import AnswerList from './AnswerList'
 import { ExplicableRule } from './Explicable'
 import SeeAnswersButton from './SeeAnswersButton'
@@ -66,7 +67,7 @@ export default function Conversation({
 			</div>
 			<div className="print-hidden">
 				{currentQuestion ? (
-					<>
+					<FromTop>
 						{Object.keys(situation).length !== 0 && (
 							<TrackPage name="simulation commencée" />
 						)}
@@ -134,7 +135,7 @@ export default function Conversation({
 							<Notifications />
 						</form>
 						<QuickLinks />
-					</>
+					</FromTop>
 				) : (
 					<div style={{ textAlign: 'center' }}>
 						<TrackPage name="simulation terminée" />

site/source/components/conversation/RuleInput.tsx

@@ -72,6 +72,7 @@ export default function RuleInput<Names extends string = DottedName>({
 	showSuggestions = true,
 	onSubmit = () => null,
 	showDefaultDateValue = false,
+	missing,
 	modifiers = {},
 	...props
 }: Props<Names>) {
@@ -82,7 +83,9 @@ export default function RuleInput<Names extends string = DottedName>({
 	const commonProps: InputProps<Names> = {
 		dottedName,
 		value,
-		missing: !showDefaultDateValue && !isEmpty(evaluation.missingVariables),
+		missing:
+			missing ??
+			(!showDefaultDateValue && !isEmpty(evaluation.missingVariables)),
 		onChange: (value: PublicodesExpression | undefined) =>
 			onChange(value, dottedName),
 		title: rule.title,

site/source/components/ui/WarningBlock.tsx

@@ -6,7 +6,7 @@ import { Link } from '@/design-system/typography/link'
 import { Intro } from '@/design-system/typography/paragraphs'
 import { ReactNode } from 'react'
 import { Trans } from 'react-i18next'
-import { Appear } from './animate'
+import { FromTop } from './animate'
 
 type WarningProps = {
 	localStorageKey: string
@@ -19,40 +19,43 @@ export default function Warning({ localStorageKey, children }: WarningProps) {
 	return (
 		<>
 			<Message type="info">
-				<Intro as="h2" className={folded ? 'print-hidden' : ''}>
-					<Trans i18nKey="simulateurs.warning.titre">
-						Avant de commencer...
-					</Trans>{' '}
-					{folded && (
-						<Link
-							onPress={() => fold(false)}
-							aria-expanded={false}
-							aria-controls="warning-text"
-						>
-							<Trans i18nKey="simulateurs.warning.plus">
-								Lire les précisions
-							</Trans>
-						</Link>
-					)}
-				</Intro>
-				{!folded && (
-					<Appear>
-						<div id="warning-text">{children}</div>
-						<div className="ui__ answer-group print-hidden">
-							<Button
-								size="XS"
-								aria-expanded
+				<div className="print-hidden">
+					<Intro as="h2">
+						<Trans i18nKey="simulateurs.warning.titre">
+							Avant de commencer...
+						</Trans>{' '}
+						{folded && (
+							<Link
+								onPress={() => fold(false)}
+								aria-expanded={false}
 								aria-controls="warning-text"
-								light
-								color="tertiary"
-								onPress={() => fold(true)}
 							>
-								<Trans>J'ai compris</Trans>
-							</Button>
-							<Spacing md />
-						</div>
-					</Appear>
-				)}
+								<Trans i18nKey="simulateurs.warning.plus">
+									Lire les précisions
+								</Trans>
+							</Link>
+						)}
+					</Intro>
+					{!folded && (
+						<FromTop>
+							<div id="warning-text">{children}</div>
+							<div className="ui__ answer-group print-hidden">
+								<Button
+									size="XS"
+									aria-expanded
+									aria-controls="warning-text"
+									light
+									color="tertiary"
+									onPress={() => fold(true)}
+								>
+									<Trans>J'ai compris</Trans>
+								</Button>
+								<Spacing md />
+							</div>
+						</FromTop>
+					)}
+				</div>
+				<div className="print-only">{children}</div>
 			</Message>
 			<Spacing lg />
 		</>

site/source/design-system/global-style.ts

@@ -145,7 +145,7 @@ button:enabled {
 }
 @media print {
 	.print-only {
-		display: block;
+		display: initial;
 	}
 }