@inseefr/lunatic 3.4.8 → 3.4.10-rc.0

package/src/components/shared/Checkbox/CheckboxOption.tsx

@@ -3,6 +3,7 @@ import type { LunaticBaseProps } from '../../type';
 import { slottableComponent } from '../HOC/slottableComponent';
 import { Label } from '../Label/Label';
 import { useKeyboardKey } from '../../../hooks/useKeyboardKey';
+import { CustomInput } from '../../Input/Input';
 
 export type CheckboxOptionProps = {
 	disabled?: boolean;
@@ -15,6 +16,10 @@ export type CheckboxOptionProps = {
 	codeModality?: string;
 	shortcut?: boolean;
 	invalid?: boolean;
+	detailAlwaysDisplayed?: boolean;
+	detailLabel?: ReactNode;
+	detailValue?: string | null;
+	onDetailChange?: (value: string) => void;
 };
 
 function LunaticCheckboxOption({
@@ -25,11 +30,16 @@ function LunaticCheckboxOption({
 	onCheck,
 	label,
 	description,
+	detailAlwaysDisplayed,
+	detailLabel,
+	detailValue,
+	onDetailChange,
 	codeModality,
 	shortcut,
 	invalid,
 }: CheckboxOptionProps) {
 	const isEnabled = !readOnly && !disabled;
+	const hasDetail = !!onDetailChange;
 	const hasKeyboardShortcut = Boolean(shortcut && codeModality && isEnabled);
 	const onClickOption = () => {
 		if (isEnabled) {
@@ -55,40 +65,51 @@ function LunaticCheckboxOption({
 	);
 
 	return (
-		<div
-			id={id}
-			role="checkbox"
-			aria-invalid={invalid}
-			aria-disabled={disabled}
-			aria-readonly={readOnly}
-			className="lunatic-input-checkbox"
-			aria-checked={checked}
-			tabIndex={0}
-			onClick={onClickOption}
-			onKeyDown={handleKeyDown}
-			aria-labelledby={labelId}
-		>
-			<div className="lunatic-input-checkbox__icon">
-				{checked && (
-					<svg
-						xmlns="http://www.w3.org/2000/svg"
-						fill="none"
-						viewBox="0 0 14 11"
-					>
-						<path
-							d="M5 11 0 6l1.4-1.4L5 8.2 12.6.6 14 2l-9 9Z"
-							fill="currentColor"
-						/>
-					</svg>
-				)}
+		<>
+			<div
+				id={id}
+				role="checkbox"
+				aria-invalid={invalid}
+				aria-disabled={disabled}
+				aria-readonly={readOnly}
+				className="lunatic-input-checkbox"
+				aria-checked={checked}
+				tabIndex={0}
+				onClick={onClickOption}
+				onKeyDown={handleKeyDown}
+				aria-labelledby={labelId}
+			>
+				<div className="lunatic-input-checkbox__icon">
+					{checked && (
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							fill="none"
+							viewBox="0 0 14 11"
+						>
+							<path
+								d="M5 11 0 6l1.4-1.4L5 8.2 12.6.6 14 2l-9 9Z"
+								fill="currentColor"
+							/>
+						</svg>
+					)}
+				</div>
+				<Label id={labelId} htmlFor={id} description={description}>
+					{codeModality && (
+						<span className="code-modality">{codeModality.toUpperCase()}</span>
+					)}{' '}
+					{label}
+				</Label>
 			</div>
-			<Label id={labelId} htmlFor={id} description={description}>
-				{codeModality && (
-					<span className="code-modality">{codeModality.toUpperCase()}</span>
-				)}{' '}
-				{label}
-			</Label>
-		</div>
+			{hasDetail && (checked || detailAlwaysDisplayed) && (
+				<CustomInput
+					id="detailId"
+					label={detailLabel ?? 'Précisez :'}
+					value={typeof detailValue === 'string' ? detailValue : ''}
+					onChange={onDetailChange}
+					disabled={disabled}
+				/>
+			)}
+		</>
 	);
 }
 

package/src/components/shared/Radio/RadioGroup.tsx

@@ -22,6 +22,7 @@ export type RadioGroupProps = Pick<
 	| 'description'
 	| 'declarations'
 	| 'orientation'
+	| 'detailAlwaysDisplayed'
 > & {
 	errors?: LunaticError[];
 	clearable?: boolean;
@@ -44,6 +45,7 @@ function LunaticRadioGroup({
 	readOnly,
 	declarations,
 	orientation,
+	detailAlwaysDisplayed,
 }: RadioGroupProps) {
 	const onKeyDown = useListKeyboardHandler(options);
 	const maxIndex = options.length;
@@ -61,6 +63,7 @@ function LunaticRadioGroup({
 							id={radioId}
 							index={index}
 							checked={value === option.value}
+							detailAlwaysDisplayed={detailAlwaysDisplayed}
 							onKeyDown={onKeyDown}
 							checkboxStyle={checkboxStyle}
 							codeModality={shortcut ? codeModality : undefined}

package/src/components/shared/Radio/RadioOption.spec.tsx

@@ -73,4 +73,40 @@ describe('RadioOption', () => {
 		fireEvent.keyDown(option, { key: 'Enter', code: 'Enter' });
 		expect(onKeyDownMock).toHaveBeenCalled();
 	});
+
+	it('renders the detail when checked', () => {
+		const { getByText } = render(
+			<RadioOption
+				id="radio-option"
+				label="Test Option"
+				onDetailChange={() => {}}
+				detailLabel="My detail"
+				checked
+			/>
+		);
+		expect(getByText('My detail')).toBeInTheDocument();
+	});
+	it('does not render the detail when unchecked', () => {
+		const { queryByText } = render(
+			<RadioOption
+				id="radio-option"
+				label="Test Option"
+				onDetailChange={() => {}}
+				detailLabel="My detail"
+			/>
+		);
+		expect(queryByText('My detail')).toBeNull();
+	});
+	it('renders the details when unchecked with the detail always displayed attribute', () => {
+		const { getByText } = render(
+			<RadioOption
+				id="radio-option"
+				label="Test Option"
+				onDetailChange={() => {}}
+				detailLabel="My detail"
+				detailAlwaysDisplayed
+			/>
+		);
+		expect(getByText('My detail')).toBeInTheDocument();
+	});
 });

package/src/components/shared/Radio/RadioOption.tsx

@@ -17,6 +17,7 @@ export type Props = {
 	labelledBy?: string;
 	codeModality?: string;
 	invalid?: boolean;
+	detailAlwaysDisplayed?: boolean;
 } & InterpretedOption;
 
 function LunaticRadioOption({
@@ -30,10 +31,12 @@ function LunaticRadioOption({
 	shortcut,
 	codeModality,
 	id,
+	invalid,
 	labelledBy,
 	description,
 	label,
 	onDetailChange,
+	detailAlwaysDisplayed,
 	detailLabel,
 	detailValue,
 	onCheck,
@@ -80,6 +83,7 @@ function LunaticRadioOption({
 			<div
 				id={id}
 				role="radio"
+				aria-invalid={invalid}
 				aria-disabled={disabled}
 				className={classnames(
 					'lunatic-input-checkbox',
@@ -113,7 +117,7 @@ function LunaticRadioOption({
 					{label}
 				</Label>
 			</div>
-			{hasDetail && checked && (
+			{hasDetail && (checked || detailAlwaysDisplayed) && (
 				<CustomInput
 					id="detailId"
 					label={detailLabel ?? 'Précisez :'}

package/src/components/type.ts

@@ -191,6 +191,7 @@ export type ComponentPropsByType = {
 				detailLabel?: ReactNode;
 			}[];
 			orientation?: 'horizontal' | 'vertical';
+			detailAlwaysDisplayed?: boolean;
 			componentType?: 'CheckboxGroup';
 		};
 	CheckboxOne: LunaticBaseProps<string | null> &
@@ -198,6 +199,7 @@ export type ComponentPropsByType = {
 			options: Array<InterpretedOption>;
 			componentType?: 'CheckboxOne';
 			orientation?: 'horizontal' | 'vertical';
+			detailAlwaysDisplayed?: boolean;
 		};
 	Switch: LunaticBaseProps<boolean> &
 		LunaticExtraProps & {
@@ -217,6 +219,7 @@ export type ComponentPropsByType = {
 			response: { name: string };
 			componentType?: 'Radio';
 			orientation?: 'horizontal' | 'vertical';
+			detailAlwaysDisplayed?: boolean;
 		};
 	Roundabout: LunaticBaseProps<string> &
 		LunaticExtraProps & {

package/src/css/components/CheckboxOne.scss

@@ -9,7 +9,7 @@
 
 		label {
 			display: flex;
-			gap:0.5em;
+			gap: 0.5em;
 			align-items: center;
 			.label-description {
 				font-weight: lighter;

package/src/css/components/CheckboxOption.scss

@@ -12,12 +12,12 @@
 	display: flex;
 	align-items: center;
 	cursor: pointer;
-	gap: .5rem;
-	padding: .3rem 0;
+	gap: 0.5rem;
+	padding: 0.3rem 0;
 
 	label {
 		display: flex;
-		gap: .5em;
+		gap: 0.5em;
 		cursor: inherit;
 		margin: 0;
 		font-weight: normal;
@@ -31,33 +31,30 @@
 	height: 18px;
 	flex: none;
 	border-radius: 2px;
-	color: #FFF;
+	color: #fff;
 	border: 2px solid var(--color-primary-dark);
 
 	svg {
-		transform: scale(.9);
+		transform: scale(0.9);
 	}
 }
 
-.lunatic-input-checkbox[aria-checked="true"] .lunatic-input-checkbox__icon {
+.lunatic-input-checkbox[aria-checked='true'] .lunatic-input-checkbox__icon {
 	background-color: var(--color-primary-dark);
 }
 
-.lunatic-input-checkbox[aria-disabled="true"],
-.lunatic-input-checkbox[aria-readonly="true"] {
+.lunatic-input-checkbox[aria-disabled='true'],
+.lunatic-input-checkbox[aria-readonly='true'] {
 	cursor: default;
 
-	.lunatic-input-checkbox__icon
-	{
+	.lunatic-input-checkbox__icon {
 		border-color: var(--color-primary-light);
 		background-color: var(--color-disabled);
 	}
 }
 
-.lunatic-input-checkbox[aria-disabled="true"][aria-checked="true"],
-.lunatic-input-checkbox[aria-readonly="true"][aria-checked="true"]
-{
-
+.lunatic-input-checkbox[aria-disabled='true'][aria-checked='true'],
+.lunatic-input-checkbox[aria-readonly='true'][aria-checked='true'] {
 	.lunatic-input-checkbox__icon {
 		color: var(--color-primary-light);
 	}
@@ -71,15 +68,14 @@
 	svg {
 		display: none;
 	}
-
 }
 
-.lunatic-input-radio[aria-checked="true"] .lunatic-input-checkbox__icon {
+.lunatic-input-radio[aria-checked='true'] .lunatic-input-checkbox__icon {
 	background: transparent;
 }
 
-.lunatic-input-radio[aria-checked="true"] .lunatic-input-checkbox__icon::after {
-	content:'';
+.lunatic-input-radio[aria-checked='true'] .lunatic-input-checkbox__icon::after {
+	content: '';
 	width: 10px;
 	height: 10px;
 	border-radius: 10px;

package/src/css/components/Combobox.scss

@@ -86,13 +86,14 @@
 					height: 0;
 					opacity: 0;
 					background-color: var(--color-combo-box-background);
-					transition: opacity 267ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
+					transition:
+						opacity 267ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
 						transform 178ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
 
 					&.expanded {
 						display: flex;
 						flex-direction: column;
-						gap: .2rem;
+						gap: 0.2rem;
 						border: solid 1px var(--color-primary-light);
 						opacity: 1;
 						min-height: 30px;

package/src/css/components/Datepicker.scss

@@ -1,19 +1,19 @@
 .lunaticDatepickerFields {
-  display: flex;
-  align-items: flex-end;
-  gap: 1rem;
+	display: flex;
+	align-items: flex-end;
+	gap: 1rem;
 }
 
 .lunaticDatepickerField input {
-  width: 3.5em;
+	width: 3.5em;
 }
 
 .lunaticDatepickerFieldLarge input {
-  width: 4.5em;
+	width: 4.5em;
 }
 
 .lunaticDatepickerHint {
-  display: block;
-  font-weight: 400;
-  font-size: .9em;
+	display: block;
+	font-weight: 400;
+	font-size: 0.9em;
 }

package/src/css/components/Declarations.scss

@@ -28,7 +28,7 @@
 		width: fit-content;
 		padding: 1em;
 		&:before {
-			content: "→ "
+			content: '→ ';
 		}
 	}
 

package/src/css/components/Dragger.scss

@@ -1,8 +1,8 @@
 .lunatic-dragger {
-  display: inline-block;
-  width: 100%;
-  height: 100%;
-  -moz-user-select: -moz-none;
-  -khtml-user-select: none;
-  -webkit-user-select: none;
+	display: inline-block;
+	width: 100%;
+	height: 100%;
+	-moz-user-select: -moz-none;
+	-khtml-user-select: none;
+	-webkit-user-select: none;
 }

package/src/css/components/Duration.scss

@@ -1,9 +1,9 @@
 .duration-fields,
 .duration-field {
-  display: flex;
-  align-items: center;
-  gap: 1rem;
+	display: flex;
+	align-items: center;
+	gap: 1rem;
 }
 .duration-field {
-  gap: .5rem;
+	gap: 0.5rem;
 }

package/src/css/components/IconButton.scss

@@ -13,8 +13,10 @@
 	outline: inherit;
 	border: none;
 	background-color: royalblue;
-	box-shadow: 0px 3px 5px -1px rgb(0 0 0 / 20%),
-		0px 6px 10px 0px rgb(0 0 0 / 14%), 0px 1px 18px 0px rgb(0 0 0 / 12%);
+	box-shadow:
+		0px 3px 5px -1px rgb(0 0 0 / 20%),
+		0px 6px 10px 0px rgb(0 0 0 / 14%),
+		0px 1px 18px 0px rgb(0 0 0 / 12%);
 
 	&:hover {
 		cursor: pointer;

package/src/css/components/Input.scss

@@ -21,6 +21,9 @@
 			min-width: 0;
 			box-sizing: content-box;
 			background: none;
+			overflow: hidden;
+			text-overflow: ellipsis;
+			white-space: nowrap;
 			&:focus {
 				outline: none;
 				border-bottom: 0.125rem solid var(--color-primary-main);

package/src/css/components/Missing.scss

@@ -15,7 +15,7 @@
 	color: var(--color-primary-main);
 }
 .missing-buttons .button-lunatic:disabled {
-	opacity: .5;
+	opacity: 0.5;
 }
 .missing-button-active .button-lunatic {
 	background-color: var(--color-primary-dark);

package/src/css/components/Roundabout.scss

@@ -8,7 +8,7 @@
 	display: grid;
 	grid-template-columns: 1fr max-content;
 	justify-content: space-between;
-	gap: .5rem;
+	gap: 0.5rem;
 }
 
 .lunatic-roundabout__item .lunatic-errors {
@@ -17,7 +17,7 @@
 
 .lunatic-roundabout__item + .lunatic-roundabout__item {
 	border-top: 1px solid var(--color-secondary-dark);
-	padding-top: .5rem;
+	padding-top: 0.5rem;
 	margin-top: 1rem;
 }
 
@@ -27,5 +27,5 @@
 }
 .lunatic-roundabout__button-progress,
 .lunatic-roundabout__button-progress:focus {
-	background-color: var(--color-primary-main)
+	background-color: var(--color-primary-main);
 }

package/src/css/components/Suggester.scss

@@ -53,7 +53,6 @@
 				min-width: 260px;
 				width: 100%;
 				.lunatic-suggester-content {
-
 					&.focused {
 						.lunatic-suggester-selection {
 						}
@@ -107,7 +106,8 @@
 						height: 0;
 						opacity: 0;
 						background-color: white;
-						transition: opacity 267ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
+						transition:
+							opacity 267ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
 							transform 178ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
 						&.expended {
 							border: solid 1px var(--color-primary-light);

package/src/css/components/Table.scss

@@ -21,10 +21,12 @@
 		top: 0;
 		z-index: 2;
 		border-collapse: separate;
-		background-color: #FFF;
+		background-color: #fff;
 		// Borders does not work on position sticky element, use box-shadow to imitate border
-		border-top: none!important;
-		box-shadow: inset 0 1px 0 var(--color-primary-dark), inset 0 -1px 0 var(--color-primary-dark);
+		border-top: none !important;
+		box-shadow:
+			inset 0 1px 0 var(--color-primary-dark),
+			inset 0 -1px 0 var(--color-primary-dark);
 	}
 
 	td {
@@ -37,7 +39,7 @@
 	}
 }
 
-  .lunatic-component .table-lunatic .tooltip-lunatic img {
-    height: 20px;
-    width: 20px;
-  }
+.lunatic-component .table-lunatic .tooltip-lunatic img {
+	height: 20px;
+	width: 20px;
+}