Merge branch 'pr/maximallain/115-1'

Author: garronej

src/shared/Fieldset.tsx

@@ -41,6 +41,8 @@ export namespace FieldsetProps {
         stateRelatedMessage?: ReactNode;
         /** Default: false */
         disabled?: boolean;
+        /** default: false */
+        small?: boolean;
     };
 
     export type Radio = Common & {
@@ -70,6 +72,7 @@ export const Fieldset = memo(
             disabled = false,
             type,
             name: name_props,
+            small = false,
             ...rest
         } = props;
 
@@ -148,22 +151,22 @@ export const Fieldset = memo(
                     </legend>
                 )}
                 <div className={cx(fr.cx("fr-fieldset__content"), classes.content)}>
-                    {options.map(({ label, hintText, nativeInputProps }, i) => (
-                        <div className={fr.cx(`fr-${type}-group`)} key={i}>
-                            <input
-                                type={type}
-                                id={getInputId(i)}
-                                name={radioName}
-                                {...nativeInputProps}
-                            />
-                            <label className={fr.cx("fr-label")} htmlFor={getInputId(i)}>
-                                {label}
-                                {hintText !== undefined && (
-                                    <span className={fr.cx("fr-hint-text")}>{hintText}</span>
-                                )}
-                            </label>
-                        </div>
-                    ))}
+                    {options.map(({ label, hintText, nativeInputProps }, i) => 
+                            <div className={fr.cx(`fr-${type}-group`, small && `fr-${type}-group--sm`)} key={i}>
+                                <input
+                                    type={type}
+                                    id={getInputId(i)}
+                                    name={radioName}
+                                    {...nativeInputProps}
+                                />
+                                <label className={fr.cx("fr-label")} htmlFor={getInputId(i)}>
+                                    {label}
+                                    {hintText !== undefined && (
+                                        <span className={fr.cx("fr-hint-text")}>{hintText}</span>
+                                    )}
+                                </label>
+                            </div>
+                    )}
                 </div>
                 {state !== "default" && (
                     <p

stories/Checkbox.stories.tsx

@@ -46,6 +46,9 @@ const { meta, getStory } = getStoryFactory({
         },
         "disabled": {
             "control": { "type": "boolean" }
+        },
+        "small": {
+            "control": { "type": "boolean" }
         }
     },
     "disabledProps": ["lang"]
@@ -269,6 +272,34 @@ export const SuccessState = getStory({
     ]
 });
 
+export const Small = getStory({
+    "legend": "Légende pour l’ensemble de champs",
+    "small": true,
+    "options": [
+        {
+            "label": "Label checkbox",
+            "nativeInputProps": {
+                "name": "checkboxes-1",
+                "value": "value1"
+            }
+        },
+        {
+            "label": "Label checkbox 2",
+            "nativeInputProps": {
+                "name": "checkboxes-1",
+                "value": "value2"
+            }
+        },
+        {
+            "label": "Label checkbox 3",
+            "nativeInputProps": {
+                "name": "checkboxes-1",
+                "value": "value3"
+            }
+        }
+    ]
+});
+
 export const Disabled = getStory({
     "legend": "Légende pour l’ensemble de champs",
     "disabled": true,

stories/RadioButtons.stories.tsx

@@ -8,7 +8,7 @@ const { meta, getStory } = getStoryFactory({
     sectionName,
     "wrappedComponent": { RadioButtons },
     "description": `
-- [See DSFR documentation](https://www.systeme-de-design.gouv.fr/elements-d-interface/composants/boutons-radio)
+- [See DSFR documentation](https://www.systeme-de-design.gouv.fr/elements-d-interface/composants/bouton-radio)
 - [See source code](https://github.com/codegouvfr/react-dsfr/blob/main/src/RadioButtons.tsx)  
   
 ## Controlled
@@ -138,6 +138,9 @@ function MyComponent(){
         },
         "disabled": {
             "control": { "type": "boolean" }
+        },
+        "small": {
+            "control": { "type": "boolean" }
         }
     },
     "disabledProps": ["lang"]
@@ -356,3 +359,28 @@ export const Disabled = getStory({
         }
     ]
 });
+
+export const Small = getStory({
+    "legend": "Légende pour l’ensemble de champs",
+    "small": true,
+    "options": [
+        {
+            "label": "Label radio",
+            "nativeInputProps": {
+                "value": "value1"
+            }
+        },
+        {
+            "label": "Label radio 2",
+            "nativeInputProps": {
+                "value": "value2"
+            }
+        },
+        {
+            "label": "Label radio 3",
+            "nativeInputProps": {
+                "value": "value3"
+            }
+        }
+    ]
+});