From 68ecffc6e506832adeb7a5e6a4c09026770b1ca3 Mon Sep 17 00:00:00 2001 From: Quentin Ruhier <99256289+QRuhier@users.noreply.github.com> Date: Tue, 10 Dec 2024 09:04:09 +0100 Subject: [PATCH] feat: enable to always display detail value (#1187) --- docs/docs/hook/parameters.mdx | 4 +- e2e/checkbox.spec.ts | 2 +- .../CheckboxGroup/CheckboxGroup.tsx | 3 ++ .../CheckboxGroup/CustomCheckboxGroup.tsx | 17 ++---- src/components/CheckboxOne/CheckboxOne.tsx | 3 ++ src/components/Radio/Radio.tsx | 3 ++ .../shared/Checkbox/CheckboxOption.spec.tsx | 21 ++++++++ .../shared/Checkbox/CheckboxOption.tsx | 19 +++++++ src/components/shared/Radio/RadioGroup.tsx | 3 ++ .../shared/Radio/RadioOption.spec.tsx | 36 +++++++++++++ src/components/shared/Radio/RadioOption.tsx | 6 ++- src/components/type.ts | 3 ++ .../behaviour/missing/missing.stories.jsx | 9 ++++ .../checkbox-group/checkbox-group.stories.jsx | 31 ++++++++--- .../checkbox-one/checkboxOne.stories.jsx | 26 +++++++++- src/stories/overview/overview.stories.jsx | 9 +++- src/stories/radio/radio.stories.jsx | 52 ++++++++++++++++--- src/stories/utils/default-arg-types.js | 12 ++++- src/stories/utils/default-args.js | 3 ++ src/stories/utils/orchestrator.jsx | 10 +++- src/use-lunatic/lunatic-context.tsx | 9 ++++ src/use-lunatic/props/propOptions.ts | 3 +- src/use-lunatic/type.ts | 1 + src/use-lunatic/use-lunatic.ts | 4 ++ 24 files changed, 254 insertions(+), 35 deletions(-) create mode 100644 src/stories/utils/default-args.js diff --git a/docs/docs/hook/parameters.mdx b/docs/docs/hook/parameters.mdx index 960f83154..919c4d907 100644 --- a/docs/docs/hook/parameters.mdx +++ b/docs/docs/hook/parameters.mdx @@ -30,7 +30,9 @@ Toutes les options sont **optionnelles**. - **missingShortcut** raccourcis clavier déclanchant les boutons missing (défaut `{ dontKnow: '', refused: '' }`) - **dontKnowButton** label du bouton "Ne sait pas" (défaut `{ fr: 'Ne sais pas', en: "Don't know" }`) - **refusedButton** label du bouton "Refus" (défaut `{ fr: 'Refus', en: 'Refused' }`) -- **trackChanges**, active le [suivi des changements](#trackChanges) (défaut `false`) +- **trackChanges**, active le [suivi des changements](#trackChanges) (défaut `false`), +- **componentsOptions** permet de définir des options sur le fonctionnement des composants. Toutes les options sont optionnelles (défaut objet contenant la valeur par défaut de chaque paramètre) + - **detailAlwaysDisplayed** permet d'afficher par défaut les modalités 'detail' associées aux modalités de réponse ### Vue d'ensemble {#vue-densemble} diff --git a/e2e/checkbox.spec.ts b/e2e/checkbox.spec.ts index 31e3cd053..12b1d1454 100644 --- a/e2e/checkbox.spec.ts +++ b/e2e/checkbox.spec.ts @@ -38,7 +38,7 @@ test.describe('Checkboxes', () => { }); test('Can select arbitrary value', async ({ page }) => { - await goToStory(page, 'components-checkboxgroup--arbitrary'); + await goToStory(page, 'components-checkboxgroup--with-detail'); const selector = page.getByRole('checkbox', { name: 'Autre préciser' }); await expect(selector).toBeVisible(); await selector.click(); diff --git a/src/components/CheckboxGroup/CheckboxGroup.tsx b/src/components/CheckboxGroup/CheckboxGroup.tsx index db276e067..52543fcda 100644 --- a/src/components/CheckboxGroup/CheckboxGroup.tsx +++ b/src/components/CheckboxGroup/CheckboxGroup.tsx @@ -1,6 +1,7 @@ import type { LunaticComponentProps } from '../type'; import { CustomCheckboxGroup } from './CustomCheckboxGroup'; import { getComponentErrors } from '../shared/ComponentErrors/ComponentErrors'; +import { useLunaticComponentsOptions } from '../../use-lunatic/lunatic-context'; export function CheckboxGroup({ id, @@ -14,6 +15,7 @@ export function CheckboxGroup({ declarations, orientation, }: LunaticComponentProps<'CheckboxGroup'>) { + const { detailAlwaysDisplayed } = useLunaticComponentsOptions(); return ( ); } diff --git a/src/components/CheckboxGroup/CustomCheckboxGroup.tsx b/src/components/CheckboxGroup/CustomCheckboxGroup.tsx index 0b07267d0..582bed504 100644 --- a/src/components/CheckboxGroup/CustomCheckboxGroup.tsx +++ b/src/components/CheckboxGroup/CustomCheckboxGroup.tsx @@ -6,7 +6,6 @@ import { CheckboxOption } from '../shared/Checkbox/CheckboxOption'; import { getShortcutKey } from '../shared/Checkbox/getShortcutKey'; import type { LunaticComponentProps } from '../type'; import { Declarations } from '../shared/Declarations/Declarations'; -import { CustomInput } from '../Input/Input'; type Props = Pick< LunaticComponentProps<'CheckboxGroup'>, @@ -19,6 +18,7 @@ type Props = Pick< | 'disabled' | 'options' | 'orientation' + | 'detailAlwaysDisplayed' > & { errors?: LunaticError[]; }; @@ -35,6 +35,7 @@ export const CustomCheckboxGroup = slottableComponent( readOnly, declarations, orientation, + detailAlwaysDisplayed, }: Props) => { return (
( codeModality={ shortcut ? getShortcutKey(index, options.length) : undefined } + detailAlwaysDisplayed={detailAlwaysDisplayed} /> - {option.onDetailChange && option.checked && ( - - )} ); })} diff --git a/src/components/CheckboxOne/CheckboxOne.tsx b/src/components/CheckboxOne/CheckboxOne.tsx index 4e69e0543..2bcbdac1f 100644 --- a/src/components/CheckboxOne/CheckboxOne.tsx +++ b/src/components/CheckboxOne/CheckboxOne.tsx @@ -1,6 +1,7 @@ import { RadioGroup } from '../shared/Radio/RadioGroup'; import type { LunaticComponentProps } from '../type'; import { getComponentErrors } from '../shared/ComponentErrors/ComponentErrors'; +import { useLunaticComponentsOptions } from '../../use-lunatic/lunatic-context'; /** * Checkbox acting as a radio (only one option can be checked at a time) @@ -18,6 +19,7 @@ export function CheckboxOne({ declarations, orientation, }: LunaticComponentProps<'CheckboxOne'>) { + const { detailAlwaysDisplayed } = useLunaticComponentsOptions(); return ( ); diff --git a/src/components/Radio/Radio.tsx b/src/components/Radio/Radio.tsx index e810aeb28..5d85d8092 100644 --- a/src/components/Radio/Radio.tsx +++ b/src/components/Radio/Radio.tsx @@ -2,6 +2,7 @@ import type { LunaticComponentProps } from '../type'; import { getComponentErrors } from '../shared/ComponentErrors/ComponentErrors'; import { RadioGroup } from '../shared/Radio/RadioGroup'; import { slottableComponent } from '../shared/HOC/slottableComponent'; +import { useLunaticComponentsOptions } from '../../use-lunatic/lunatic-context'; function LunaticRadio(props: LunaticComponentProps<'Radio'>) { const { @@ -19,6 +20,7 @@ function LunaticRadio(props: LunaticComponentProps<'Radio'>) { declarations, orientation, } = props; + const { detailAlwaysDisplayed } = useLunaticComponentsOptions(); return ( ) { readOnly={readOnly} declarations={declarations} orientation={orientation ?? 'vertical'} + detailAlwaysDisplayed={detailAlwaysDisplayed} /> ); } diff --git a/src/components/shared/Checkbox/CheckboxOption.spec.tsx b/src/components/shared/Checkbox/CheckboxOption.spec.tsx index 8b8c4b1ef..5d9dfe7d6 100644 --- a/src/components/shared/Checkbox/CheckboxOption.spec.tsx +++ b/src/components/shared/Checkbox/CheckboxOption.spec.tsx @@ -17,6 +17,8 @@ describe('CheckboxOption', () => { id: 'test-checkbox', onCheck: vi.fn(), label: 'Test checkbox', + detailLabel: 'My detail', + onDetailChange: () => {}, }; it('renders the component correctly', () => { @@ -55,4 +57,23 @@ describe('CheckboxOption', () => { fireEvent.keyDown(checkbox, { code: 'Space' }); expect(defaultProps.onCheck).toHaveBeenCalledWith(true); }); + + it('renders the detail when checked', () => { + const { getByText } = render( + + ); + expect(getByText(defaultProps.detailLabel)).toBeInTheDocument(); + }); + it('does not render the detail when unchecked', () => { + const { queryByText } = render( + + ); + expect(queryByText(defaultProps.detailLabel)).toBeNull(); + }); + it('renders the details when unchecked with the detail always displayed attribute', () => { + const { getByText } = render( + + ); + expect(getByText(defaultProps.detailLabel)).toBeInTheDocument(); + }); }); diff --git a/src/components/shared/Checkbox/CheckboxOption.tsx b/src/components/shared/Checkbox/CheckboxOption.tsx index 0a9cf9eef..fb4d78cf7 100644 --- a/src/components/shared/Checkbox/CheckboxOption.tsx +++ b/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) { @@ -88,6 +98,15 @@ function LunaticCheckboxOption({ )}{' '} {label} + {hasDetail && (checked || detailAlwaysDisplayed) && ( + + )} ); } diff --git a/src/components/shared/Radio/RadioGroup.tsx b/src/components/shared/Radio/RadioGroup.tsx index 6782b243f..845724b12 100644 --- a/src/components/shared/Radio/RadioGroup.tsx +++ b/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} diff --git a/src/components/shared/Radio/RadioOption.spec.tsx b/src/components/shared/Radio/RadioOption.spec.tsx index be2870c50..89db94aad 100644 --- a/src/components/shared/Radio/RadioOption.spec.tsx +++ b/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( + {}} + detailLabel="My detail" + checked + /> + ); + expect(getByText('My detail')).toBeInTheDocument(); + }); + it('does not render the detail when unchecked', () => { + const { queryByText } = render( + {}} + detailLabel="My detail" + /> + ); + expect(queryByText('My detail')).toBeNull(); + }); + it('renders the details when unchecked with the detail always displayed attribute', () => { + const { getByText } = render( + {}} + detailLabel="My detail" + detailAlwaysDisplayed + /> + ); + expect(getByText('My detail')).toBeInTheDocument(); + }); }); diff --git a/src/components/shared/Radio/RadioOption.tsx b/src/components/shared/Radio/RadioOption.tsx index 78f3106f6..d77dde195 100644 --- a/src/components/shared/Radio/RadioOption.tsx +++ b/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({ - {hasDetail && checked && ( + {hasDetail && (checked || detailAlwaysDisplayed) && ( & @@ -198,6 +199,7 @@ export type ComponentPropsByType = { options: Array; componentType?: 'CheckboxOne'; orientation?: 'horizontal' | 'vertical'; + detailAlwaysDisplayed?: boolean; }; Switch: LunaticBaseProps & LunaticExtraProps & { @@ -217,6 +219,7 @@ export type ComponentPropsByType = { response: { name: string }; componentType?: 'Radio'; orientation?: 'horizontal' | 'vertical'; + detailAlwaysDisplayed?: boolean; }; Roundabout: LunaticBaseProps & LunaticExtraProps & { diff --git a/src/stories/behaviour/missing/missing.stories.jsx b/src/stories/behaviour/missing/missing.stories.jsx index 7e43b0e8f..5a2801ff9 100644 --- a/src/stories/behaviour/missing/missing.stories.jsx +++ b/src/stories/behaviour/missing/missing.stories.jsx @@ -8,11 +8,20 @@ const stories = { component: Orchestrator, argTypes: { ...defaultArgTypes, + shortcut: { + table: { disable: false }, + control: 'boolean', + defaultValue: true, + }, missing: { table: { disable: false }, control: 'boolean', defaultValue: true, }, + missingStrategy: { + table: { disable: false }, + control: 'object', + }, activeGoNextForMissing: { table: { disable: false }, control: 'boolean', diff --git a/src/stories/checkbox-group/checkbox-group.stories.jsx b/src/stories/checkbox-group/checkbox-group.stories.jsx index 3e2513334..0251747df 100644 --- a/src/stories/checkbox-group/checkbox-group.stories.jsx +++ b/src/stories/checkbox-group/checkbox-group.stories.jsx @@ -4,11 +4,16 @@ import source from './source'; import sourceLoop from './sourceLoop'; import sourceDetail from './sourceDetail'; import sourceCondition from './sourceCondition'; +import defaultArgs from '../utils/default-args'; import defaultArgTypes from '../utils/default-arg-types'; const stories = { title: 'Components/CheckboxGroup', component: Orchestrator, + args: { + ...defaultArgs, + shortcut: true, + }, argTypes: { ...defaultArgTypes, shortcut: { @@ -25,29 +30,43 @@ const Template = (args) => ; export const Default = Template.bind({}); Default.args = { - id: 'checkboxGroup', + ...stories.args, source, - shortcut: true, }; export const Condition = Template.bind({}); Condition.args = { + ...Default.args, source: sourceCondition, }; export const ReadOnly = Template.bind({}); ReadOnly.args = { + ...Default.args, source, readOnly: true, - shortcut: true, }; -export const Arbitrary = Template.bind({}); -Arbitrary.args = { +export const WithDetail = Template.bind({}); +WithDetail.args = { + ...Default.args, source: sourceDetail, - shortcut: true, + detailAlwaysDisplayed: false, +}; + +WithDetail.argTypes = { + ...Default.argTypes, + detailAlwaysDisplayed: { + control: 'boolean', + defaultValue: false, + description: 'Always display detail options', + table: { + disable: false, + category: 'Components Options', + }, + }, }; export const Loop = Template.bind({}); diff --git a/src/stories/checkbox-one/checkboxOne.stories.jsx b/src/stories/checkbox-one/checkboxOne.stories.jsx index 803deb96a..8439ed645 100644 --- a/src/stories/checkbox-one/checkboxOne.stories.jsx +++ b/src/stories/checkbox-one/checkboxOne.stories.jsx @@ -2,11 +2,16 @@ import React from 'react'; import Orchestrator from '../utils/orchestrator'; import source from './source'; import sourceWithDetail from './sourceDetail'; +import defaultArgs from '../utils/default-args'; import defaultArgTypes from '../utils/default-arg-types'; const stories = { title: 'Components/CheckboxOne', component: Orchestrator, + args: { + ...defaultArgs, + shortcut: true, + }, argTypes: { ...defaultArgTypes, shortcut: { @@ -22,10 +27,27 @@ export default stories; const Template = (args) => ; export const Default = Template.bind({}); -Default.args = { source, shortcut: false }; +Default.args = { + ...stories.args, + source, +}; export const WithDetail = Template.bind({}); WithDetail.args = { + ...Default.args, source: sourceWithDetail, - shortcut: false, + detailAlwaysDisplayed: false, +}; + +WithDetail.argTypes = { + ...Default.argTypes, + detailAlwaysDisplayed: { + control: 'boolean', + defaultValue: false, + description: 'Always display detail options', + table: { + disable: false, + category: 'Components Options', + }, + }, }; diff --git a/src/stories/overview/overview.stories.jsx b/src/stories/overview/overview.stories.jsx index 576372548..58dcd7496 100644 --- a/src/stories/overview/overview.stories.jsx +++ b/src/stories/overview/overview.stories.jsx @@ -9,7 +9,14 @@ import dataLoop from './dataLoop.json'; const stories = { title: 'Behaviour/Overview', component: Orchestrator, - argTypes: defaultArgTypes, + argTypes: { + ...defaultArgTypes, + showOverview: { + table: { disable: false }, + control: 'boolean', + defaultValue: true, + }, + }, }; export default stories; diff --git a/src/stories/radio/radio.stories.jsx b/src/stories/radio/radio.stories.jsx index 552658008..91818f7b7 100644 --- a/src/stories/radio/radio.stories.jsx +++ b/src/stories/radio/radio.stories.jsx @@ -4,11 +4,16 @@ import source from './source'; import sourceHorizontal from './sourceHorizontal'; import sourceDetail from './sourceDetail'; import sourceCondition from './sourceCondition'; +import defaultArgs from '../utils/default-args'; import defaultArgTypes from '../utils/default-arg-types'; const stories = { title: 'Components/Radio', component: Orchestrator, + args: { + ...defaultArgs, + shortcut: true, + }, argTypes: { ...defaultArgTypes, shortcut: { @@ -23,16 +28,51 @@ export default stories; const Template = (args) => ; export const Default = Template.bind({}); -Default.args = { source, shortcut: true }; + +Default.args = { + ...stories.args, + source, +}; export const Condition = Template.bind({}); -Condition.args = { source: sourceCondition }; + +Condition.args = { + ...Default.args, + source: sourceCondition, +}; export const Horizontal = Template.bind({}); -Horizontal.args = { source: sourceHorizontal, shortcut: true }; + +Horizontal.args = { + ...Default.args, + source: sourceHorizontal, +}; export const ReadOnly = Template.bind({}); -ReadOnly.args = { source, shortcut: true, readOnly: true }; -export const Detail = Template.bind({}); -Detail.args = { source: sourceDetail, shortcut: true }; +ReadOnly.args = { + ...Default.args, + source, + readOnly: true, +}; + +export const WithDetail = Template.bind({}); + +WithDetail.args = { + ...Default.argTypes, + source: sourceDetail, + detailAlwaysDisplayed: false, +}; + +WithDetail.argTypes = { + ...Default.argTypes, + detailAlwaysDisplayed: { + control: 'boolean', + defaultValue: false, + description: 'Always display detail options', + table: { + disable: false, + category: 'Components Options', + }, + }, +}; diff --git a/src/stories/utils/default-arg-types.js b/src/stories/utils/default-arg-types.js index 3a5aaa78b..85f8af996 100644 --- a/src/stories/utils/default-arg-types.js +++ b/src/stories/utils/default-arg-types.js @@ -12,6 +12,10 @@ const fields = [ 'missing', 'shortcut', 'filterDescription', + 'disabled', + 'showOverview', + 'missingStrategy', + 'detailAlwaysDisplayed', ]; const defaultArgTypes = fields.reduce( @@ -23,7 +27,13 @@ const defaultArgTypes = fields.reduce( }, }, }), - {} + { + readOnly: { + table: { disable: false }, + control: 'boolean', + defaultValue: false, + }, + } ); export default defaultArgTypes; diff --git a/src/stories/utils/default-args.js b/src/stories/utils/default-args.js new file mode 100644 index 000000000..32ca53736 --- /dev/null +++ b/src/stories/utils/default-args.js @@ -0,0 +1,3 @@ +const defaultArgs = { readOnly: false }; + +export default defaultArgs; diff --git a/src/stories/utils/orchestrator.jsx b/src/stories/utils/orchestrator.jsx index 4a70c5994..8f2ca3bc3 100644 --- a/src/stories/utils/orchestrator.jsx +++ b/src/stories/utils/orchestrator.jsx @@ -8,7 +8,7 @@ import { ModalControls, useLunatic, } from '../..'; -import React, { memo, useCallback, useEffect, useState } from 'react'; +import React, { memo, useCallback, useEffect, useMemo, useState } from 'react'; import { Logger } from '../../utils/logger'; import { Overview } from './overview'; @@ -120,9 +120,16 @@ function OrchestratorForStories({ refusedButton, readOnly = false, disabled = false, + detailAlwaysDisplayed = false, ...rest }) { const { maxPage } = source; + + const componentsOptions = useMemo( + () => ({ detailAlwaysDisplayed }), + [detailAlwaysDisplayed] + ); + const { getComponents, goPreviousPage, @@ -156,6 +163,7 @@ function OrchestratorForStories({ withOverview: showOverview, dontKnowButton, refusedButton, + componentsOptions, }); const components = getComponents(); diff --git a/src/use-lunatic/lunatic-context.tsx b/src/use-lunatic/lunatic-context.tsx index 21e0f90cf..7748c8032 100644 --- a/src/use-lunatic/lunatic-context.tsx +++ b/src/use-lunatic/lunatic-context.tsx @@ -15,6 +15,7 @@ const LunaticContext = createContext({ missingShortcut: { dontKnow: '', refused: '' }, dontKnowButton: D.DK, refusedButton: D.RF, + componentsOptions: { detailAlwaysDisplayed: false }, }); /** Provide `missing` `missingStrategy`, `shortcut` and `missingShortcut`, `dontKnowButton`, `refusedButton` to Missing component * to manage non-response buttons and shortcut */ @@ -37,6 +38,11 @@ export const useLunaticMissing = () => { }; }; +export const useLunaticComponentsOptions = () => { + const { componentsOptions } = useContext(LunaticContext); + return componentsOptions; +}; + /** Provide `management` to display data states [COLLECTED,EDITED,FORCED] */ export const useLunaticManagement = () => { return useContext(LunaticContext).management; @@ -50,6 +56,7 @@ export function createLunaticProvider({ missingShortcut, dontKnowButton, refusedButton, + componentsOptions, }: { management: boolean; missing: boolean; @@ -58,6 +65,7 @@ export function createLunaticProvider({ missingShortcut: { dontKnow: string; refused: string }; dontKnowButton: string; refusedButton: string; + componentsOptions: { detailAlwaysDisplayed: boolean }; }): FunctionComponent { const value = { management, @@ -67,6 +75,7 @@ export function createLunaticProvider({ missingShortcut, dontKnowButton, refusedButton, + componentsOptions, }; return function Provider({ children }: PropsWithChildren) { return ( diff --git a/src/use-lunatic/props/propOptions.ts b/src/use-lunatic/props/propOptions.ts index 88c0bce4b..30c219859 100644 --- a/src/use-lunatic/props/propOptions.ts +++ b/src/use-lunatic/props/propOptions.ts @@ -8,12 +8,13 @@ import type { DeepTranslateExpression } from '../commons/fill-components/fill-co import { isNumber } from '../../utils/number'; import type { LunaticVariablesStore } from '../commons/variables/lunatic-variables-store'; +/* Used for radio option and checkbox one option */ export type InterpretedOption = { label: ReactNode; value?: string; checked?: boolean; - detailLabel?: ReactNode; description?: ReactNode; + detailLabel?: ReactNode; detailValue?: string | null; onDetailChange?: (value: string) => void; onCheck?: () => void; diff --git a/src/use-lunatic/type.ts b/src/use-lunatic/type.ts index a7ecd0aa1..44a22c14e 100644 --- a/src/use-lunatic/type.ts +++ b/src/use-lunatic/type.ts @@ -161,6 +161,7 @@ export type LunaticOptions = { // Enable change tracking to keep a track of what variable changed (allow using getChangedData()) trackChanges?: boolean; logger?: LunaticLogger; + componentsOptions?: { detailAlwaysDisplayed?: boolean }; }; // Type representing the return type of "useLunatic()" diff --git a/src/use-lunatic/use-lunatic.ts b/src/use-lunatic/use-lunatic.ts index 51d9df28b..73478e092 100644 --- a/src/use-lunatic/use-lunatic.ts +++ b/src/use-lunatic/use-lunatic.ts @@ -63,6 +63,7 @@ const defaultOptions = { refusedButton: DEFAULT_REFUSED, trackChanges: false, logger: ConsoleLogger, + componentsOptions: { detailAlwaysDisplayed: false }, } satisfies LunaticOptions; export function useLunatic( @@ -84,6 +85,7 @@ export function useLunatic( trackChanges, preferences, logger, + componentsOptions, } = options; // Help debug with warnings for options expected to be memoized @@ -115,6 +117,7 @@ export function useLunatic( missingShortcut, dontKnowButton, refusedButton, + componentsOptions, }), [ management, @@ -124,6 +127,7 @@ export function useLunatic( missingShortcut, dontKnowButton, refusedButton, + componentsOptions, ] );