Design system : version intermédiaire des inputs textes

mon-entreprise/source/components/conversation/RuleInput.tsx

@@ -53,6 +53,7 @@ export type InputProps<Name extends string = string> = Omit<
 > &
 	Pick<RuleNode, 'title' | 'suggestions'> & {
 		question: RuleNode['rawNode']['question']
+		description: RuleNode['rawNode']['description']
 		value: EvaluatedNode['nodeValue']
 		missing: boolean
 		onChange: (value: PublicodesExpression | undefined) => void
@@ -90,6 +91,7 @@ export default function RuleInput({
 		onChange: (value: PublicodesExpression | undefined) =>
 			onChange(value, dottedName),
 		title: rule.title,
+		description: rule.rawNode.description,
 		id: props.id ?? dottedName,
 		question: rule.rawNode.question,
 		suggestions: showSuggestions ? rule.suggestions : {},

mon-entreprise/source/components/conversation/TextInput.tsx

@@ -7,7 +7,7 @@ import { TextField } from 'DesignSystem/field'
 export default function TextInput({
 	onChange,
 	value,
-	id,
+	description,
 	title,
 	missing,
 	autoFocus,
@@ -17,11 +17,11 @@ export default function TextInput({
 		<TextField
 			autoFocus={autoFocus}
 			type="text"
-			id={id}
 			label={title}
 			onChange={({ target }) => {
 				debouncedOnChange(`'${target.value}'`)
 			}}
+			description={description}
 			{...{
 				[missing ? 'placeholder' : 'defaultValue']: (value as string) || '',
 			}}

mon-entreprise/source/components/ui/index.css

@@ -23,6 +23,7 @@
 html,
 body,
 #js {
+	font-size: 16px !important;
 	min-height: 100%;
 }
 

mon-entreprise/source/design-system/field/TextField.tsx

@@ -1,6 +1,7 @@
 import { InputHTMLAttributes, useRef } from 'react'
 import styled from 'styled-components'
 import { useTextField, AriaTextFieldOptions } from '@react-aria/textfield'
+import { ExtraSmallBody } from 'DesignSystem/typography/paragraphs'
 
 export default function TextField(props: AriaTextFieldOptions) {
 	const ref = useRef<HTMLInputElement>(null)
@@ -12,29 +13,31 @@ export default function TextField(props: AriaTextFieldOptions) {
 	return (
 		<>
 			<StyledInputContainer>
-				<StyledLabel {...labelProps}>{props.label}</StyledLabel>
 				<StyledInput
 					{...(inputProps as InputHTMLAttributes<HTMLInputElement>)}
 					ref={ref}
 				/>
+				<StyledLabel {...labelProps}>{props.label}</StyledLabel>
 			</StyledInputContainer>
 			{props.description && (
-				<p {...descriptionProps} style={{ fontSize: 12 }}>
+				<StyledDescription {...descriptionProps} style={{ fontSize: 12 }}>
 					{props.description}
-				</p>
+				</StyledDescription>
 			)}
 		</>
 	)
 }
 
+const labelHeight = '1rem'
 const StyledInputContainer = styled.div`
 	border-radius: ${({ theme }) => theme.box.borderRadius};
 	border: ${({ theme }) => theme.box.borderWidth} solid
 		${({ theme }) => theme.colors.extended.grey[500]};
 	outline: transparent solid 1px;
-	display: flex;
+	position: relative;
 	flex-direction: column;
 	transition: outline-color, border-color 0.3s;
+	height: ${({ theme }) => theme.spacings.xxxl};
 
 	:focus-within {
 		outline-color: ${({ theme }) => theme.colors.bases.primary[600]};
@@ -45,26 +48,52 @@ const StyledInputContainer = styled.div`
 		color: ${({ theme }) => theme.colors.bases.primary[800]};
 	}
 
-	:focus-within label {
+	:focus-within + p {
 		color: ${({ theme }) => theme.colors.bases.primary[800]};
 	}
+
+	input:not(:focus):placeholder-shown + label {
+		font-size: 1rem;
+		line-height: 1.5rem;
+		pointer-events: none;
+		top: 50%;
+		transform: translateY(-50%);
+	}
 `
 
 const StyledInput = styled.input`
 	font-size: 1rem;
-	line-height: 1.25rem;
+	line-height: 1.5rem;
 	border: none;
 	background: none;
+	font-family: ${({ theme }) => theme.fonts.main};
+	bottom: 0;
+	width: 100%;
+	height: 100%;
 	outline: none;
-	padding: 0 ${({ theme }) => theme.spacings.sm}
-		${({ theme }) => theme.spacings.xs};
+	position: absolute;
+	padding: calc(${labelHeight} + ${({ theme }) => theme.spacings.xs})
+		${({ theme }) => theme.spacings.sm} ${({ theme }) => theme.spacings.xs};
 `
 
 const StyledLabel = styled.label`
+	top: 0%;
+	transform: translateY(0%);
 	font-size: 0.75rem;
-	line-height: 1rem;
+	line-height: ${labelHeight};
+	font-family: ${({ theme }) => theme.fonts.main};
 	padding: ${({ theme }) => theme.spacings.xs}
-		${({ theme }) => theme.spacings.sm} 0;
+		${({ theme }) => theme.spacings.sm};
+	position: absolute;
+	will-change: transform top font-size line-height color;
+	transition: all 0.1s;
+`
+
+const StyledDescription = styled(ExtraSmallBody)`
+	padding: ${({ theme }) => theme.spacings.xxs}
+		${({ theme }) => theme.spacings.sm};
+	will-change: feColorMatrix;
+	transition: color 0.2s;
 `
 // /* Type=Input text, Legend=False, Status=Default */
 

mon-entreprise/source/design-system/theme.ts

@@ -133,12 +133,12 @@ export const theme: DefaultTheme = {
 		md: '1rem',
 		lg: '1.5rem',
 		xl: '2rem',
-		xxl: '2.5rem',
-		xxxl: '3.25rem',
+		xxl: '3rem',
+		xxxl: '4rem',
 	},
 
 	fonts: {
-		main: '',
+		main: "'Roboto', sans-serif",
 		heading: '',
 	},
 

mon-entreprise/source/design-system/typography/paragraphs.tsx

@@ -21,3 +21,9 @@ export const SmallBody = styled.p`
 	font-size: 0.875rem;
 	line-height: 1.25rem;
 `
+
+export const ExtraSmallBody = styled.p`
+	${baseParagraphStyle}
+	font-size: 0.75rem;
+	line-height: 1rem;
+`