@inseefr/lunatic 3.4.18 → 3.4.20

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/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/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/use-lunatic/hooks/use-page-has-response.ts

@@ -77,6 +77,7 @@ function hasOneResponse(
 
 		// For rosterForLoop we need to inspect child components
 		if (
+			component.componentType === 'RosterForLoop' &&
 			'components' in component &&
 			Array.isArray(component.components) &&
 			!isSubComponentsEmpty(component.components, executeExpression)

package/src/use-lunatic/props/propValue.ts

@@ -28,7 +28,7 @@ export function getValueProp(
 		return args.variables.get(component.response.name, iteration);
 	}
 	// For loop, value will be a map of child component values
-	if ('components' in component) {
+	if (component.componentType === 'Loop') {
 		return getChildResponseValues(component.components, args.variables);
 	}
 	return null;