fix(form, upload): error & disabled [DS-2746, DS-2700] (#428)

GouvernementFR · Oct 27, 2022 · 9e71a5f · 9e71a5f
1 parent e3ddf62
commit 9e71a5f
Show file tree

Hide file tree

Showing 12 changed files with 83 additions and 47 deletions.
diff --git a/src/component/form/deprecated/style/_scheme.scss b/src/component/form/deprecated/style/_scheme.scss
@@ -7,32 +7,6 @@
 @use 'module/disabled';
 
 @mixin _deprecated-form-scheme($legacy: false) {
-  #{ns-group(select), ns-group(input)} {
-    &--valid {
-      label {
-        @include color.text(default success, (legacy:$legacy));
-      }
-    }
-
-    &--error {
-      label {
-        @include color.text(default error, (legacy:$legacy));
-      }
-    }
-
-    &--info {
-      label {
-        @include color.text(default info, (legacy:$legacy));
-      }
-    }
-
-    &--disabled {
-      label {
-        @include disabled.colors((legacy: $legacy, text: true));
-      }
-    }
-  }
-
   #{ns(error-text)} {
     @include color.text(default error, (legacy:$legacy));
   }

diff --git a/src/component/form/example/index.ejs b/src/component/form/example/index.ejs
@@ -25,11 +25,11 @@
 
 <%- sample('Ensemble de cases à cocher, avec erreur', '../../checkbox/example/sample/checkboxes', { checkboxes: { id:'checkbox-error', error: true, hint: true }}, true);  %>
 
-<%- sample('Ensemble de champs de saisie désactivés', '../../input/input-base/example/sample/inputs', { inputs: { id:'text-disabled', hint: true }, input: { disabled: true, hint: true }}, true);  %>
+<%- sample('Ensemble de champs de saisie désactivés', '../../input/input-base/example/sample/inputs', { inputs: { id:'text-disabled', hint: true, disabled: true}, input: { hint: true }}, true);  %>
 
-<%- sample('Ensemble de boutons radio désactivés', '../../radio/example/sample/radios', { radios: { id:'radio-disabled', hint: true}, radio: { disabled: true, hint: true }}, true);  %>
+<%- sample('Ensemble de boutons radio désactivés', '../../radio/example/sample/radios', { radios: { id:'radio-disabled', hint: true, disabled: true}, radio: { hint: true }}, true);  %>
 
-<%- sample('Ensemble de cases à cocher désactivés', '../../checkbox/example/sample/checkboxes', { checkboxes: { id: 'checkbox-disabled', hint: true}, checkbox: { disabled: true, hint: true }}, true);  %>
+<%- sample('Ensemble de cases à cocher désactivés', '../../checkbox/example/sample/checkboxes', { checkboxes: { id: 'checkbox-disabled', disabled: true, hint: true}, checkbox: { hint: true }}, true);  %>
 
 <%- sample('Bouton type submit', '../../button/example/sample/button-default', { button: { type:'submit', label: 'Envoyer', title: 'Envoyer le formulaire' }}, true);  %>
 

diff --git a/src/component/form/style/_scheme.scss b/src/component/form/style/_scheme.scss
@@ -7,6 +7,32 @@
 @use 'module/disabled';
 
 @mixin _form-scheme($legacy: false) {
+  #{ns-group(select), ns-group(input), ns-group(upload)} {
+    &--valid {
+      label {
+        @include color.text(default success, (legacy:$legacy));
+      }
+    }
+
+    &--error {
+      label {
+        @include color.text(default error, (legacy:$legacy));
+      }
+    }
+
+    &--info {
+      label {
+        @include color.text(default info, (legacy:$legacy));
+      }
+    }
+
+    &--disabled {
+      label {
+        @include disabled.colors((legacy: $legacy, text: true));
+      }
+    }
+  }
+
   #{ns(label)} {
     @include color.text(label grey, (legacy:$legacy));
 
@@ -23,7 +49,10 @@
     }
 
     &--disabled {
-      @include disabled.colors((legacy: $legacy, text: true));
+      &,
+      & #{ns(hint-text)} {
+        @include disabled.colors((legacy: $legacy, text: true));
+      }
     }
   }
 
@@ -48,7 +77,8 @@
 
   #{ns(fieldset)} {
     @include disabled.selector {
-      label {
+      #{ns(label)},
+      #{ns(fieldset__legend)} {
         @include disabled.colors((legacy: $legacy, text: true));
       }
     }

diff --git a/src/component/form/style/module/_fieldset.scss b/src/component/form/style/module/_fieldset.scss
@@ -15,6 +15,10 @@
     @include font-weight(bold);
     @include width(100%);
 
+    &--regular {
+      @include font-weight(regular);
+    }
+
     #{ns(hint-text)} {
       @include margin-top(2v);
       @include font-weight(regular);

diff --git a/src/component/form/template/ejs/fieldset/element.ejs b/src/component/form/template/ejs/fieldset/element.ejs
@@ -113,6 +113,11 @@ switch (element.type) {
     data = { alert: element.data };
     break;
 
+  case 'upload':
+    path = '../../../../upload/template/ejs/upload';
+    data = { upload: element.data };
+    break;
+
 }
 %>
 

diff --git a/src/component/form/template/ejs/fieldset/fieldset.ejs b/src/component/form/template/ejs/fieldset/fieldset.ejs
@@ -54,7 +54,7 @@ if (fieldset.legend || fieldset.hint) {
   }
 
   const legendClasses = [];
-  if (fieldset.choice) legendClasses.push(`${prefix}-text--regular`);
+  if (fieldset.choice) legendClasses.push(`${prefix}-fieldset__legend--regular`);
 
   legend = {
     id: ids.legend,

diff --git a/src/component/upload/example/index.ejs b/src/component/upload/example/index.ejs
@@ -1,7 +1,10 @@
 <% const sample = getSample(include); %>
 
-<%- sample('Bouton upload 1 seul fichier', './sample/upload.ejs', { upload: {id:'file-upload'}}, true); %>
+<%- sample(getText('sample.default', 'upload'), './sample/upload.ejs', { upload: {id:'file-upload'}}, true); %>
 
-<%- sample('Bouton upload avec erreur', './sample/upload.ejs', { upload: {id:'file-upload-with-error', error: true }}, true); %>
+<%- sample(getText('sample.error', 'upload'), './sample/upload.ejs', { upload: {id:'file-upload-with-error', error: true }}, true); %>
+
+<%- sample(getText('sample.multiple', 'upload'), './sample/upload-multiple.ejs', { upload: {id:'file-upload-multiple' }}, true); %>
+
+<%- sample(getText('sample.disabled', 'upload'), './sample/upload.ejs', { upload: {id:'file-upload-disabled', disabled: true }}, true); %>
 
-<%- sample('Bouton upload fichiers multiples', './sample/upload-multiple.ejs', { upload: {id:'file-upload-multiple' }}, true); %>
diff --git a/src/component/upload/example/sample/upload-multiple.ejs b/src/component/upload/example/sample/upload-multiple.ejs
@@ -3,10 +3,10 @@ let upload = locals.upload || {};
 let data = {};
 data.id = upload.id || uniqueId('upload');
 data.name = data.id;
-data.label = 'Ajouter des fichiers';
-data.hint = 'Taille maximale : 500 Mo. Formats supportés : jpg, png, pdf. Plusieurs fichiers possibles. Lorem ipsum dolor sit amet, consectetur adipiscing.';
+data.label = getText('label.multiple', 'upload');
+data.hint = getText('hint.default', 'upload');
 data.multiple = true;
-if(upload.error) data.error = 'Format de fichier non supporté';
+if(upload.error) data.error = getText('error.default', 'upload');
 %>
 
 <%- include('../../template/ejs/upload', {upload:data}); %>

diff --git a/src/component/upload/example/sample/upload.ejs b/src/component/upload/example/sample/upload.ejs
@@ -3,10 +3,11 @@ let upload = locals.upload || {};
 let data = {};
 data.id = upload.id || uniqueId('upload');
 data.name = data.id;
+data.disabled = upload.disabled;
 
-data.label = 'Ajouter des fichiers';
-data.hint = 'Taille maximale : 500 Mo. Formats supportés : jpg, png, pdf. Plusieurs fichiers possibles. Lorem ipsum dolor sit amet, consectetur adipiscing.';
-if(upload.error) data.error = 'Format de fichier non supporté';
+data.label = getText('label.default', 'upload');
+data.hint = getText('hint.default', 'upload');
+if(upload.error) data.error = getText('error.default', 'upload');
 %>
 
 <%- include('../../template/ejs/upload', {upload:data}); %>
diff --git a/src/component/upload/i18n/fr.yml b/src/component/upload/i18n/fr.yml
@@ -1,3 +1,16 @@
 subdir:
   title: Autres versions
   deprecated: version dépréciée
+
+label:
+  default: Ajouter un fichier
+  multiple: Ajouter des fichiers
+hint:
+  default: 'Taille maximale : 500 Mo. Formats supportés : jpg, png, pdf. Plusieurs fichiers possibles. Lorem ipsum dolor sit amet, consectetur adipiscing.'
+error:
+  default: Format de fichier non supporté
+sample:
+  default: Bouton upload 1 seul fichier
+  error: Bouton upload avec erreur
+  multiple: Bouton upload fichiers multiples
+  disabled: Bouton upload désactivé
diff --git a/src/component/upload/template/ejs/upload.ejs b/src/component/upload/template/ejs/upload.ejs
@@ -36,10 +36,19 @@ const attributes = upload.attributes || [];
 const labelAttrs = upload.labelAttrs || {};
 const labelClass = upload.labelClasses || [];
 const builder = new MessageBuilder(upload.id);
-if (upload.valid) builder.addError(upload.valid);
-if (upload.error) builder.addError(upload.error);
+if (upload.valid) {
+  groupClasses.push(`${prefix}-upload-group--valid`);
+  builder.addError(upload.valid);
+}
+if (upload.error) {
+  groupClasses.push(`${prefix}-upload-group--error`);
+  builder.addError(upload.error);
+}
+if (upload.disabled) {
+  groupClasses.push(`${prefix}-upload-group--disabled`);
+  attributes['disabled'] = '';
+}
 if (builder.describedby.length > 0) attributes['aria-describedby'] = builder.describedby.join(' ');
-if (upload.disabled) attributes['disabled'] = '';
 if (upload.multiple) attributes['multiple'] = '';
 %>
 

diff --git a/src/pattern/company/example/data/siret.json.ejs b/src/pattern/company/example/data/siret.json.ejs
@@ -6,7 +6,6 @@ const data = {
   elements: [
     {
       type: 'input',
-      base: 'input/input-base',
       data: {
         id: uniqueId('siret'),
         label: getText('label.siret', 'company'),
@@ -15,8 +14,6 @@ const data = {
     },
     {
       type: 'link',
-      template: 'link',
-      tag: 'p',
       classes: [prefix + '-mt-n1v'],
       data: {
         label: getText('directory.label', 'company'),