@inseefr/lunatic 3.5.0-rc.0 → 3.5.0-rc.1

package/src/components/InputNumber/InputNumber.spec.tsx

@@ -113,7 +113,7 @@ describe('InputNumber', () => {
 		expect(unit).toHaveTextContent('kg');
 	});
 
-	it('should display the input value from the start', () => {
+	it('should display input value from the start when user leave input', () => {
 		const setSelectionRangeMock = vi.fn();
 		const { container } = render(
 			<InputNumber
@@ -132,4 +132,18 @@ describe('InputNumber', () => {
 		});
 		expect(setSelectionRangeMock).toHaveBeenCalledWith(0, 0);
 	});
+
+	it('should have the proper title', async () => {
+		const { getByTitle } = render(
+			<InputNumber {...baseProps} value={100000} unit="€" />
+		);
+		expect(getByTitle((content) => content.includes('€'))).toBeInTheDocument();
+	});
+
+	it('should have the proper title when equal to 0', async () => {
+		const { getByTitle } = render(
+			<InputNumber {...baseProps} value={0} unit="€" />
+		);
+		expect(getByTitle('0 €')).toBeInTheDocument();
+	});
 });

package/src/components/InputNumber/InputNumber.tsx

@@ -74,6 +74,7 @@ export const CustomInputNumber = slottableComponent<CustomProps>(
 					max={max}
 					decimals={decimals}
 					invalid={!!errors}
+					unit={unit}
 				/>
 				{unit && <span>{unit}</span>}
 				<ComponentErrors errors={errors} />

package/src/components/InputNumber/InputNumberThousand.tsx

@@ -18,6 +18,7 @@ type Props = {
 	max?: number;
 	decimals?: number;
 	invalid?: boolean;
+	unit?: string;
 };
 
 export const InputNumberThousand = ({
@@ -31,6 +32,7 @@ export const InputNumberThousand = ({
 	max,
 	decimals,
 	invalid,
+	unit,
 }: Props) => {
 	const handleChange = useCallback<OnValueChange>(
 		function (e) {
@@ -49,13 +51,21 @@ export const InputNumberThousand = ({
 		},
 		[max]
 	);
+
+	// we want to display the user input and its unit on hover
+	let title;
+	if (value !== undefined && value !== null) {
+		const unitTitle = unit ? ` ${unit}` : '';
+		title = `${value.toLocaleString()}${unitTitle}`;
+	}
+
 	return (
 		<NumericFormat
 			id={id}
 			className={classNames({ disabled })}
 			onValueChange={handleChange}
 			value={value ?? ''}
-			title={value ? value.toString() : ''}
+			title={title}
 			aria-labelledby={labelId}
 			disabled={disabled}
 			readOnly={readOnly}

package/src/components/Loop/Loop.spec.tsx

@@ -0,0 +1,77 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import { Loop } from './Loop';
+import type { LunaticComponentProps } from '../type';
+
+describe('Loop', () => {
+	const mockOnChange = vi.fn();
+
+	beforeEach(() => {
+		mockOnChange.mockClear();
+	});
+
+	const getComponents = (iteration: number) => [
+		{
+			componentType: 'Input',
+			maxLength: 249,
+			id: 'nameId',
+			response: {
+				name: 'name',
+			},
+			iteration: iteration,
+			value: 'Jonathan Doe',
+		} as LunaticComponentProps<'Input'>,
+	];
+
+	it('render the right number of lines by default', () => {
+		render(
+			<Loop
+				value={{ name: ['John Doe', 'Jane Doe'] }}
+				handleChanges={mockOnChange}
+				label="Ceci est un test"
+				id="table"
+				lines={{ min: 4, max: 10 }}
+				iterations={2}
+				getComponents={getComponents}
+				executeExpression={() => null as any}
+			/>
+		);
+		expect(screen.getAllByRole('textbox')).toHaveLength(4);
+	});
+
+	it('disables the remove row button when the minimum number of rows is reached', () => {
+		render(
+			<Loop
+				value={{ name: ['John Doe', 'Jane Doe', 'Alice', 'Bob'] }}
+				handleChanges={mockOnChange}
+				label="Ceci est un test"
+				id="table"
+				lines={{ min: 4, max: 10 }}
+				iterations={4}
+				getComponents={getComponents}
+				executeExpression={() => null as any}
+			/>
+		);
+
+		const Button = screen.getByRole('button', { name: /remove/i });
+		expect(Button).toBeDisabled();
+	});
+
+	it('enables the add row button when the maximum number of rows is not reached', () => {
+		render(
+			<Loop
+				value={{ name: ['John Doe', 'Jane Doe', 'Alice'] }}
+				handleChanges={mockOnChange}
+				label="Ceci est un test"
+				id="table"
+				lines={{ min: 2, max: 10 }}
+				iterations={3}
+				getComponents={getComponents}
+				executeExpression={() => null as any}
+			/>
+		);
+
+		const Button = screen.getByRole('button', { name: /add/i });
+		expect(Button).not.toBeDisabled();
+	});
+});

package/src/components/Loop/Loop.tsx

@@ -60,7 +60,7 @@ export function Loop({
 			{...props}
 			errors={getComponentErrors(errors, props.id)}
 			addRow={nbRows === max ? undefined : addRow}
-			removeRow={nbRows === 1 ? undefined : removeRow}
+			removeRow={nbRows === 1 || nbRows === min ? undefined : removeRow}
 			canControlRows={min !== max && Number.isFinite(max)}
 		>
 			{times(nbRows, (n) => (

package/src/components/RosterForLoop/__snapshots__/RosterForLoop.spec.tsx.snap

@@ -31,16 +31,27 @@ exports[`RosterForLoop > renders the right number of columns 1`] = `
               <div
                 class="lunatic-input"
               >
-                <input
-                  aria-invalid="false"
-                  aria-labelledby="label-jrc3ye5q-QOP-lo6tcvvx-0"
-                  autocomplete="off"
-                  id="jrc3ye5q-QOP-lo6tcvvx-0"
-                  maxlength="249"
-                  title="azeaze"
-                  type="text"
-                  value="azeaze"
-                />
+                <div
+                  class="field-with-count"
+                >
+                  <input
+                    aria-describedby="characters-count-jrc3ye5q-QOP-lo6tcvvx-0"
+                    aria-invalid="false"
+                    aria-labelledby="label-jrc3ye5q-QOP-lo6tcvvx-0"
+                    autocomplete="off"
+                    id="jrc3ye5q-QOP-lo6tcvvx-0"
+                    maxlength="249"
+                    title="azeaze"
+                    type="text"
+                    value="azeaze"
+                  />
+                  <span
+                    class="characters-count"
+                    id="characters-count-jrc3ye5q-QOP-lo6tcvvx-0"
+                  >
+                    6/249
+                  </span>
+                </div>
               </div>
             </div>
           </div>
@@ -61,16 +72,27 @@ exports[`RosterForLoop > renders the right number of columns 1`] = `
               <div
                 class="lunatic-input"
               >
-                <input
-                  aria-invalid="false"
-                  aria-labelledby="label-jrc3ye5q-QOP-lo6tcvvx-1"
-                  autocomplete="off"
-                  id="jrc3ye5q-QOP-lo6tcvvx-1"
-                  maxlength="249"
-                  title="azeaze"
-                  type="text"
-                  value="azeaze"
-                />
+                <div
+                  class="field-with-count"
+                >
+                  <input
+                    aria-describedby="characters-count-jrc3ye5q-QOP-lo6tcvvx-1"
+                    aria-invalid="false"
+                    aria-labelledby="label-jrc3ye5q-QOP-lo6tcvvx-1"
+                    autocomplete="off"
+                    id="jrc3ye5q-QOP-lo6tcvvx-1"
+                    maxlength="249"
+                    title="azeaze"
+                    type="text"
+                    value="azeaze"
+                  />
+                  <span
+                    class="characters-count"
+                    id="characters-count-jrc3ye5q-QOP-lo6tcvvx-1"
+                  >
+                    6/249
+                  </span>
+                </div>
               </div>
             </div>
           </div>

package/src/components/Roundabout/CustomRoundabout.tsx

@@ -1,12 +1,13 @@
 import { slottableComponent } from '../shared/HOC/slottableComponent';
 import type { LunaticComponentProps } from '../type';
-import { Label } from '../shared/Label/Label';
 import type { ItemOf } from '../../type.utils';
 import { Button } from '../shared/Button/Button';
 import classnames from 'classnames';
 import { ComponentErrors } from '../shared/ComponentErrors/ComponentErrors';
 import type { LunaticError } from '../../use-lunatic/type';
 import type { ReactNode } from 'react';
+import { Declarations } from '../shared/Declarations/Declarations';
+import { LabelDescription } from '../shared/LabelDescription';
 
 type PropsItem = ItemOf<LunaticComponentProps<'Roundabout'>['items']> & {
 	onClick: () => void;
@@ -60,7 +61,7 @@ function RoundaboutItem({
 
 type Props = Pick<
 	LunaticComponentProps<'Roundabout'>,
-	'label' | 'locked' | 'id'
+	'declarations' | 'description' | 'label' | 'locked' | 'id'
 > & {
 	goToIteration: (v: number) => void;
 	errors?: LunaticError[];
@@ -75,10 +76,18 @@ type Props = Pick<
 
 export const CustomRoundabout = slottableComponent<Props>(
 	'Roundabout',
-	({ items, goToIteration, label, locked }) => {
+	({ declarations, description, id, items, goToIteration, label, locked }) => {
 		return (
 			<div className="lunatic-roundabout">
-				<Label>{label}</Label>
+				<div id={`roundabout-${id}`} className="lunatic-roundabout__label">
+					{label}
+				</div>
+				<LabelDescription value={description} />
+				<Declarations
+					type="AFTER_QUESTION_TEXT"
+					declarations={declarations}
+					id={id}
+				/>
 				<div className="lunatic-roundabout__items">
 					{items.map((item, k) => (
 						<RoundaboutItem

package/src/components/Roundabout/roundabout.spec.tsx

@@ -24,6 +24,7 @@ describe('Roundabout', () => {
 		},
 	];
 	const label = 'My Roundabout';
+	const description = 'Roundabout description';
 
 	it('renders the roundabout correctly', () => {
 		const { getByText } = render(
@@ -32,6 +33,7 @@ describe('Roundabout', () => {
 				items={items}
 				goToIteration={mockGoToIteration}
 				locked={false}
+				description={description}
 			/>
 		);
 
@@ -41,6 +43,7 @@ describe('Roundabout', () => {
 		expect(getByText('Complété')).toBeInTheDocument();
 		expect(getByText('Modifier')).toBeInTheDocument();
 		expect(getByText('Commencer')).toBeInTheDocument();
+		expect(getByText('Roundabout description')).toBeInTheDocument();
 	});
 
 	it('calls the goToIteration function when a button is clicked', () => {

package/src/components/Textarea/Textarea.spec.tsx

@@ -1,6 +1,11 @@
 import { render } from '@testing-library/react';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
 import { Textarea } from './Textarea';
+import { CharactersCount } from '../shared/CharactersCount/CharactersCount';
+
+vi.mock('../shared/CharactersCount/CharactersCount', () => ({
+	CharactersCount: vi.fn(),
+}));
 
 describe('Textarea', () => {
 	const mockOnChange = vi.fn();
@@ -22,6 +27,19 @@ describe('Textarea', () => {
 		expect(container).toMatchSnapshot();
 	});
 
+	it('calls CharactersCount component with correct props', () => {
+		const props = { ...baseProps, maxLength: 30 };
+		render(<Textarea {...props} />);
+		expect(CharactersCount).toHaveBeenCalledWith(
+			{
+				id: props.id,
+				maxLength: props.maxLength,
+				value: props.value,
+			},
+			{}
+		);
+	});
+
 	it('should handle readOnly', () => {
 		const { container } = render(
 			<Textarea

package/src/components/Textarea/Textarea.tsx

@@ -7,6 +7,8 @@ import {
 import { slottableComponent } from '../shared/HOC/slottableComponent';
 import { Declarations } from '../shared/Declarations/Declarations';
 import type { LunaticError } from '../../use-lunatic/type';
+import { CharactersCount } from '../shared/CharactersCount/CharactersCount';
+import { getCharactersCountId } from '../shared/utils/getCharactersCountId';
 
 export function Textarea({
 	handleChanges,
@@ -51,6 +53,7 @@ export const CustomTextarea = slottableComponent<CustomProps>(
 			placeHolder,
 		} = props;
 		const labelId = `label-${id}`;
+		const charactersCountId = getCharactersCountId(id, maxLength);
 
 		return (
 			<div className="lunatic-textarea">
@@ -62,19 +65,24 @@ export const CustomTextarea = slottableComponent<CustomProps>(
 					declarations={declarations}
 					id={id}
 				/>
-				<textarea
-					required={required}
-					disabled={disabled}
-					id={id}
-					rows={rows}
-					maxLength={maxLength}
-					cols={cols}
-					onChange={(e) => onChange(e.target.value)}
-					value={value ?? ''}
-					placeholder={placeHolder}
-					readOnly={readOnly}
-					aria-invalid={!!errors}
-				/>
+				<div className="field-with-count">
+					<textarea
+						required={required}
+						disabled={disabled}
+						id={id}
+						aria-labelledby={labelId}
+						aria-describedby={maxLength ? charactersCountId : undefined}
+						rows={rows}
+						maxLength={maxLength}
+						cols={cols}
+						onChange={(e) => onChange(e.target.value)}
+						value={value ?? ''}
+						placeholder={placeHolder}
+						readOnly={readOnly}
+						aria-invalid={!!errors}
+					/>
+					<CharactersCount id={id} maxLength={maxLength} value={value} />
+				</div>
 				<ComponentErrors errors={errors} />
 			</div>
 		);

package/src/components/Textarea/__snapshots__/Textarea.spec.tsx.snap

@@ -5,12 +5,17 @@ exports[`Textarea > renders without crashing 1`] = `
   <div
     class="lunatic-textarea"
   >
-    <textarea
-      aria-invalid="false"
-      id="input"
+    <div
+      class="field-with-count"
     >
-      input
-    </textarea>
+      <textarea
+        aria-invalid="false"
+        aria-labelledby="label-input"
+        id="input"
+      >
+        input
+      </textarea>
+    </div>
   </div>
 </div>
 `;
@@ -20,13 +25,18 @@ exports[`Textarea > should handle readOnly 1`] = `
   <div
     class="lunatic-textarea"
   >
-    <textarea
-      aria-invalid="false"
-      id="textarea"
-      readonly=""
+    <div
+      class="field-with-count"
     >
-      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-    </textarea>
+      <textarea
+        aria-invalid="false"
+        aria-labelledby="label-textarea"
+        id="textarea"
+        readonly=""
+      >
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+      </textarea>
+    </div>
   </div>
 </div>
 `;

package/src/components/shared/CharactersCount/CharactersCount.spec.tsx

@@ -0,0 +1,31 @@
+import { describe, expect, it } from 'vitest';
+import { CharactersCount } from './CharactersCount';
+import { render } from '@testing-library/react';
+
+describe('CharactersCount', () => {
+	const defaultProps = {
+		id: 'test-id',
+		maxLength: 20,
+		value: 'Hello',
+	};
+
+	it('renders correctly characters count if there is a maximum length', () => {
+		const { getByText } = render(<CharactersCount {...defaultProps} />);
+
+		expect(getByText('5/20')).toBeInTheDocument();
+	});
+
+	it('should apply the max-length-reached class when limit is reached', () => {
+		const props = { ...defaultProps, maxLength: 5 };
+		const { getByText } = render(<CharactersCount {...props} />);
+
+		expect(getByText('5/5')).toHaveClass('max-length-reached');
+	});
+
+	it('should not render anything when maxLength is not provided', () => {
+		const props = { ...defaultProps, maxLength: undefined };
+		const { container } = render(<CharactersCount {...props} />);
+
+		expect(container.firstChild).toBeNull();
+	});
+});

package/src/components/shared/CharactersCount/CharactersCount.tsx

@@ -0,0 +1,27 @@
+import classNames from 'classnames';
+import { getCharactersCountId } from '../utils/getCharactersCountId';
+
+type Props = {
+	id: string;
+	maxLength?: number;
+	value?: string | null;
+};
+
+export function CharactersCount({ id, maxLength, value }: Readonly<Props>) {
+	if (!maxLength) return null;
+
+	const currentLength = value?.length ?? 0;
+	const charactersCountId = getCharactersCountId(id, maxLength);
+	const hasReachedMaxLength = currentLength === maxLength;
+
+	return (
+		<span
+			id={charactersCountId}
+			className={classNames('characters-count', {
+				'max-length-reached': hasReachedMaxLength,
+			})}
+		>
+			{`${currentLength}/${maxLength}`}
+		</span>
+	);
+}

package/src/components/shared/Label/Label.spec.tsx

@@ -3,9 +3,9 @@ import { Label } from './Label';
 import { describe, it, expect } from 'vitest';
 
 describe('Label', () => {
-	it('renders null when children is falsy', () => {
+	it('renders null when children and description are falsy', () => {
 		const { container } = render(
-			<Label htmlFor="input" id="label" description="This is a label">
+			<Label htmlFor="input" id="label">
 				{null}
 			</Label>
 		);
@@ -34,8 +34,20 @@ describe('Label', () => {
 
 		const label = getByText('Name');
 		expect(label).toBeInTheDocument();
-		expect(label.parentNode).toHaveAttribute('for', 'kze792d8');
+		expect(label.closest('label')).toHaveAttribute('for', 'kze792d8');
 		const description = queryByText('This is a label');
 		expect(description).not.toBeInTheDocument();
 	});
+
+	it('renders a label with description and no label', () => {
+		const { container, queryByText } = render(
+			<Label htmlFor="kze792d8" id="label" description="This is a label" />
+		);
+
+		const label = container.querySelector('label');
+		expect(label).toBeInTheDocument();
+		expect(label).toHaveAttribute('for', 'kze792d8');
+		const description = queryByText('This is a label');
+		expect(description).toBeInTheDocument();
+	});
 });

package/src/components/shared/Label/Label.tsx

@@ -27,7 +27,7 @@ function LunaticLabel({
 	style,
 	description,
 }: Props) {
-	if (!children) {
+	if (!children && !description) {
 		return null;
 	}
 	return (

package/src/components/shared/utils/getCharactersCountId.test.ts

@@ -0,0 +1,14 @@
+import { describe, expect, it } from 'vitest';
+import { getCharactersCountId } from './getCharactersCountId';
+
+describe('getCharacterCountId', () => {
+	it('should return the correct ID when maxLength is provided', () => {
+		expect(getCharactersCountId('test-id', 100)).toBe(
+			'characters-count-test-id'
+		);
+	});
+
+	it('should return undefined when maxLength is not provided', () => {
+		expect(getCharactersCountId('test-id')).toBeUndefined();
+	});
+});

package/src/components/shared/utils/getCharactersCountId.ts

@@ -0,0 +1,6 @@
+/**
+ * Get the correct id for characters count div, used for both input and textarea.
+ */
+export function getCharactersCountId(id: string, maxLength?: number) {
+	return maxLength ? `characters-count-${id}` : undefined;
+}

package/src/components/type.ts

@@ -126,6 +126,7 @@ export type ComponentPropsByType = {
 			components: LunaticComponentProps[];
 			componentType?: 'Question';
 			iteration?: number;
+			value: Record<string, unknown>;
 		};
 	RosterForLoop: LunaticBaseProps<unknown> &
 		LunaticExtraProps & {

package/src/css/components/Input.scss

@@ -43,3 +43,13 @@
 		}
 	}
 }
+
+.characters-count {
+	display: block;
+	font-size: 12px;
+	padding-top: 0.3rem;
+}
+
+.max-length-reached {
+	color: red;
+}

package/src/css/components/Roundabout.scss

@@ -1,3 +1,13 @@
+.lunatic-roundabout__label {
+	color: var(--color-primary-dark);
+	background-color: var(--color-primary-contrast-text);
+	border: 0;
+	padding: 0;
+	font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
+	font-weight: bold;
+	margin-bottom: 0.375rem;
+}
+
 .lunatic-roundabout__items {
 	margin-top: 1rem;
 	display: flex;

package/src/stories/accordion/source.json

@@ -37,11 +37,7 @@
 			"name": "NOM",
 			"componentRef": "name",
 			"values": {
-				"PREVIOUS": null,
-				"COLLECTED": null,
-				"FORCED": null,
-				"EDITED": null,
-				"INPUTTED": null
+				"COLLECTED": null
 			}
 		}
 	]

package/src/stories/behaviour/cleaning/cleaning.stories.jsx

@@ -2,6 +2,7 @@ import React from 'react';
 import Orchestrator from '../../utils/orchestrator';
 import source from './source.json';
 import sourceLoop from './source-loop.json';
+import sourceLoop2 from './loop.json';
 import defaultArgTypes from '../../utils/default-arg-types';
 
 const stories = {
@@ -56,3 +57,13 @@ Loop.args = {
 	pagination: true,
 	source: sourceLoop,
 };
+
+export const Loop2 = Template.bind({});
+Loop2.args = {
+	id: 'cleaning-loop-2',
+	pagination: true,
+	source: sourceLoop2,
+	data: {
+		COLLECTED: { PRENOM: { COLLECTED: ['Laurent', 'Alain', 'toto'] } },
+	},
+};