Skip to content

Commit 926148c

Browse files
committed
Merge branch 'pr/maximallain/115-1'
2 parents f51811b + 9c0a58c commit 926148c

File tree

3 files changed

+79
-17
lines changed

3 files changed

+79
-17
lines changed

src/shared/Fieldset.tsx

Lines changed: 19 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,8 @@ export namespace FieldsetProps {
4141
stateRelatedMessage?: ReactNode;
4242
/** Default: false */
4343
disabled?: boolean;
44+
/** default: false */
45+
small?: boolean;
4446
};
4547

4648
export type Radio = Common & {
@@ -70,6 +72,7 @@ export const Fieldset = memo(
7072
disabled = false,
7173
type,
7274
name: name_props,
75+
small = false,
7376
...rest
7477
} = props;
7578

@@ -148,22 +151,22 @@ export const Fieldset = memo(
148151
</legend>
149152
)}
150153
<div className={cx(fr.cx("fr-fieldset__content"), classes.content)}>
151-
{options.map(({ label, hintText, nativeInputProps }, i) => (
152-
<div className={fr.cx(`fr-${type}-group`)} key={i}>
153-
<input
154-
type={type}
155-
id={getInputId(i)}
156-
name={radioName}
157-
{...nativeInputProps}
158-
/>
159-
<label className={fr.cx("fr-label")} htmlFor={getInputId(i)}>
160-
{label}
161-
{hintText !== undefined && (
162-
<span className={fr.cx("fr-hint-text")}>{hintText}</span>
163-
)}
164-
</label>
165-
</div>
166-
))}
154+
{options.map(({ label, hintText, nativeInputProps }, i) =>
155+
<div className={fr.cx(`fr-${type}-group`, small && `fr-${type}-group--sm`)} key={i}>
156+
<input
157+
type={type}
158+
id={getInputId(i)}
159+
name={radioName}
160+
{...nativeInputProps}
161+
/>
162+
<label className={fr.cx("fr-label")} htmlFor={getInputId(i)}>
163+
{label}
164+
{hintText !== undefined && (
165+
<span className={fr.cx("fr-hint-text")}>{hintText}</span>
166+
)}
167+
</label>
168+
</div>
169+
)}
167170
</div>
168171
{state !== "default" && (
169172
<p

stories/Checkbox.stories.tsx

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,9 @@ const { meta, getStory } = getStoryFactory({
4646
},
4747
"disabled": {
4848
"control": { "type": "boolean" }
49+
},
50+
"small": {
51+
"control": { "type": "boolean" }
4952
}
5053
},
5154
"disabledProps": ["lang"]
@@ -269,6 +272,34 @@ export const SuccessState = getStory({
269272
]
270273
});
271274

275+
export const Small = getStory({
276+
"legend": "Légende pour l’ensemble de champs",
277+
"small": true,
278+
"options": [
279+
{
280+
"label": "Label checkbox",
281+
"nativeInputProps": {
282+
"name": "checkboxes-1",
283+
"value": "value1"
284+
}
285+
},
286+
{
287+
"label": "Label checkbox 2",
288+
"nativeInputProps": {
289+
"name": "checkboxes-1",
290+
"value": "value2"
291+
}
292+
},
293+
{
294+
"label": "Label checkbox 3",
295+
"nativeInputProps": {
296+
"name": "checkboxes-1",
297+
"value": "value3"
298+
}
299+
}
300+
]
301+
});
302+
272303
export const Disabled = getStory({
273304
"legend": "Légende pour l’ensemble de champs",
274305
"disabled": true,

stories/RadioButtons.stories.tsx

Lines changed: 29 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ const { meta, getStory } = getStoryFactory({
88
sectionName,
99
"wrappedComponent": { RadioButtons },
1010
"description": `
11-
- [See DSFR documentation](https://www.systeme-de-design.gouv.fr/elements-d-interface/composants/boutons-radio)
11+
- [See DSFR documentation](https://www.systeme-de-design.gouv.fr/elements-d-interface/composants/bouton-radio)
1212
- [See source code](https://github.com/codegouvfr/react-dsfr/blob/main/src/RadioButtons.tsx)
1313
1414
## Controlled
@@ -138,6 +138,9 @@ function MyComponent(){
138138
},
139139
"disabled": {
140140
"control": { "type": "boolean" }
141+
},
142+
"small": {
143+
"control": { "type": "boolean" }
141144
}
142145
},
143146
"disabledProps": ["lang"]
@@ -356,3 +359,28 @@ export const Disabled = getStory({
356359
}
357360
]
358361
});
362+
363+
export const Small = getStory({
364+
"legend": "Légende pour l’ensemble de champs",
365+
"small": true,
366+
"options": [
367+
{
368+
"label": "Label radio",
369+
"nativeInputProps": {
370+
"value": "value1"
371+
}
372+
},
373+
{
374+
"label": "Label radio 2",
375+
"nativeInputProps": {
376+
"value": "value2"
377+
}
378+
},
379+
{
380+
"label": "Label radio 3",
381+
"nativeInputProps": {
382+
"value": "value3"
383+
}
384+
}
385+
]
386+
});

0 commit comments

Comments
 (0)