Merge pull request #115 from InseeFr/fix/radio-checkbox-error-spacing

fix: error states checkbox, radio
InseeFr · Oct 19, 2023 · 72a08be · 72a08be
2 parents a84e8c2 + b64d94f
commit 72a08be
Show file tree

Hide file tree

Showing 5 changed files with 49 additions and 11 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@inseefr/lunatic-dsfr",
-    "version": "1.0.4",
+    "version": "1.0.5",
     "description": "Couche graphique pour Lunatic reposant sur le Système de Design de l'État (DSFR)",
     "repository": {
         "type": "git",

diff --git a/src/CheckboxGroup.tsx b/src/CheckboxGroup.tsx
@@ -7,11 +7,13 @@ import { makeStyles } from "tss-react/dsfr";
 const useStyles = makeStyles()({
     root: {
         "> legend": {
+            paddingBottom: "1rem",
+            paddingLeft: "0.75rem",
+            paddingRight: "0.75rem",
+            marginLeft: "-0.25rem",
+            marginRight: "-0.25rem",
             fontSize: "1.75rem !important",
             lineHeight: "2.25rem !important",
-            padding: "0",
-            margin: "0 0 1.5rem 0.25rem",
-            fontWeight: "700 !important",
         },
     },
 });

diff --git a/src/ComponentSet/ComponentSet.tsx b/src/ComponentSet/ComponentSet.tsx
@@ -18,9 +18,11 @@ const useStyles = makeStyles()({
                 "> legend": {
                     fontSize: "1rem !important",
                     lineHeight: "2.25rem !important",
-                    padding: "0",
-                    margin: "0 0 1.5rem 0.25rem",
-                    fontWeight: "700 !important",
+                    paddingBottom: "1rem",
+                    paddingLeft: "0.75rem",
+                    paddingRight: "0.75rem",
+                    marginLeft: "-0.25rem",
+                    marginRight: "-0.25rem",
                 },
             },
         },

diff --git a/src/Radio.tsx b/src/Radio.tsx
@@ -9,9 +9,11 @@ const useStyles = makeStyles()({
         "> legend": {
             fontSize: "1.75rem !important",
             lineHeight: "2.25rem !important",
-            padding: "0",
-            margin: "0 0 1.5rem 0.25rem",
-            fontWeight: "700 !important",
+            paddingBottom: "1rem",
+            paddingLeft: "0.75rem",
+            paddingRight: "0.75rem",
+            marginLeft: "-0.25rem",
+            marginRight: "-0.25rem",
         },
     },
 });

diff --git a/src/stories/component-set/source1.json b/src/stories/component-set/source1.json
@@ -50,7 +50,7 @@
                                 "type": "VTL"
                             },
                             "errorMessage": {
-                                "value": "\"Prénom cannot be null\"",
+                                "value": "\"Veuillez renseigner un prénom\"",
                                 "type": "VTL|MD"
                             },
                             "bindingDependencies": ["PRENOMS"]
@@ -85,6 +85,22 @@
                         "type": "VTL"
                     },
                     "conditionFilter": { "value": "true", "type": "VTL" },
+                    "controls": [
+                        {
+                            "id": "prenom",
+                            "typeOfControl": "CONSISTENCY",
+                            "criticality": "WARN",
+                            "control": {
+                                "value": "not(nvl(Q1, \"\") = \"\")",
+                                "type": "VTL"
+                            },
+                            "errorMessage": {
+                                "value": "\"Veuillez répondre à cette question\"",
+                                "type": "VTL|MD"
+                            },
+                            "bindingDependencies": ["Q1"]
+                        }
+                    ],
                     "options": [
                         {
                             "value": "1",
@@ -115,6 +131,22 @@
                     "label": { "type": "VTL", "value": "\"Birthday \"" },
                     "conditionFilter": { "type": "VTL", "value": "true" },
                     "dateFormat": "YYYY-MM-DD",
+                    "controls": [
+                        {
+                            "id": "prenom",
+                            "typeOfControl": "CONSISTENCY",
+                            "criticality": "WARN",
+                            "control": {
+                                "value": "not(nvl(DATENAISS, \"\") = \"\")",
+                                "type": "VTL"
+                            },
+                            "errorMessage": {
+                                "value": "\"Veuillez renseigner une date de naissance\"",
+                                "type": "VTL|MD"
+                            },
+                            "bindingDependencies": ["DATENAISS"]
+                        }
+                    ],
                     "description": {
                         "type": "VTL",
                         "value": "\"Please enter your birthday in the below field\""