✨ feat(name): ajout bouton de suppression de prénom [DS-2974]

src/component/follow/style/_module.scss

@@ -13,6 +13,11 @@
 
   &__newsletter {
     #{ns-group(input)} {
+      @include margin-bottom(4v);
+      @include margin-bottom(2v, sm);
+    }
+
+    #{ns(hint-text)} {
       @include margin-bottom(0);
     }
 
@@ -28,10 +33,14 @@
       #{ns(input)} {
         @include margin-bottom(4v);
         @include margin-top(0);
+        border-radius: #{spacing.space(1v)} #{spacing.space(1v)} 0 0;
       }
 
       #{ns(btn)} {
         justify-content: center;
+        @include width(100%);
+        @include width(auto, sm);
+        border-radius: 0;
       }
 
       @include respond-from(sm) {

src/component/input/input-base/example/index.ejs

@@ -19,6 +19,8 @@
 
 <%- sample(getText('sample.button', 'input-base'), './sample/input-button.ejs', {input: { id:'text-input-button' }}, true); %>
 
+<%- sample(getText('sample.action', 'input-base'), './sample/input-action.ejs', {input: { id:'text-input-action' }}, true); %>
+
 <%- sample(getText('sample.placeholder', 'input-base'), './sample/input-text.ejs', {input: { id:'text-input-placeholder', placeholder:'placeholder'}}, true); %>
 
 <%- sample(getText('sample.value', 'input-base'), './sample/input-text.ejs', {input: { id:'text-input-value', attributes: {value:'value'}}}, true); %>

src/component/input/input-base/example/sample/input-action.ejs

@@ -0,0 +1,6 @@
+<%
+const input = locals.input || {}
+input.action = true;
+input.button = input.button || {label:'Supprimer le champs', kind: 2, icon: 'delete-line', type: 'button'};
+%>
+<%- include('input-text', { input: input }); %>

src/component/input/input-base/i18n/fr.yml

@@ -9,7 +9,8 @@ sample:
   date: Champs de type "date"
   textarea: Champs de type "textarea"
   password: Champs de type "password"
-  button: Combo champs + bouton
+  button: Combo champs + bouton d'envoi
+  action: Combo champs + bouton d'action
   placeholder: Champs avec placeholder
   value: Champs avec valeur initiale
   disabled: Champs désactivé

src/component/input/input-base/style/_module.scss

@@ -12,9 +12,10 @@
   @include text-style(md);
   @include padding(2v 4v);
 
-  /**
-   * Style du placeholder
-   */
+  &:not(textarea) {
+    max-height: 2.5rem;
+  }
+
   @include placeholder {
     opacity: 1;
     font-style: italic;
@@ -24,13 +25,6 @@
     cursor: pointer;
   }
 
-  /**
-   * On applique une hauteur maximale si l'élément n'est pas un textarea
-   */
-  &:not(textarea) {
-    max-height: 2.5rem;
-  }
-
   &[type=date] {
     min-height: 2.5rem;
 
@@ -50,46 +44,46 @@
   }
 }
 
-/**
- * Ajout d'un wrapper quand on a besoin de mettre une icône
- */
 #{ns(input-wrap)} {
   @include relative;
   display: block;
 
   @include has-icon {
+    #{ns(input)} {
+      @include padding-right(10v);
+    }
+
     @include icon-size(sm, before) {
       @include absolute(3v, 3v, 3v);
       @include margin(auto);
       pointer-events: none;
     }
   }
 
-  &--addon {
+  &--addon,
+  &--action {
     @include display-flex;
     @include size(100%);
   }
 
-  #{ns(input)} {
-    @include padding-right(10v);
-  }
-
-  > *:first-child:not(:last-child) {
-    &#{ns(input)} {
-      @include padding-right(4v);
-    }
-
-    @include respond-from(md) {
+  &--addon {
+    > *:first-child:not(:last-child) {
       border-radius: spacing.space(1v 0 0 0);
     }
-  }
 
-  > *:last-child:not(:first-child) {
-    @include respond-from(md) {
+    > *:last-child:not(:first-child) {
       border-radius: spacing.space(0 1v 0 0);
     }
   }
 
+  &--action #{ns(btn)} {
+    @include margin-left(4v);
+  }
+
+  &--action #{ns(btn)} {
+    @include margin-left(4v);
+  }
+
   + #{ns(hint-text)} {
     @include margin-top(4v);
   }

src/component/input/input-base/style/_scheme.scss

@@ -50,7 +50,7 @@
     }
   }
 
-  #{ns(input-wrap)} {
+  #{ns(input-wrap--addon)} {
     > *:not(:last-child) {
       &#{ns(input)}:not(#{ns(input--valid)}):not(#{ns(input--error)}) {
         @include color.box-shadow(action-high blue-france, (legacy:$legacy), bottom-2-in);

src/component/input/input-base/template/ejs/input.ejs

@@ -96,34 +96,32 @@ if (input.value) attributes.value = input.value;
 if (input.autocomplete) attributes.autocomplete = input.autocomplete;
 attributes.id = input.id;
 if (input.spellcheck === true || input.spellcheck === false) attributes.spellcheck = `${input.spellcheck}`;
+
+const inputWrapClass = [];
+if (input.button || input.icon) inputWrapClass.push(`${prefix}-input-wrap`);
+if (input.icon) inputWrapClass.push(`${prefix}-icon-${input.icon === true ? '' : input.icon}`);
+if (input.addon) inputWrapClass.push(`${prefix}-input-wrap--addon`);
+if (input.action) inputWrapClass.push(`${prefix}-input-wrap--action`);
 %>
 
 <%- include('../../../../form/template/ejs/label', { label: label }); %>
 
-<% if (input.icon) { %>
-  <% let icon = prefix + '-icon-' + input.icon; %>
-  <% if (input.icon === true) icon = '';
-  %>
- <div class="<%= prefix %>-input-wrap <%= icon %>" >
+<% if (input.icon || input.button) { %>
+<div <%- includeClasses(inputWrapClass); %>>
 <% } %>
 
-<% if (input.addon && input.button) { %>
-  <div class="<%= prefix %>-input-wrap <%- prefix %>-input-wrap--addon" >
-<% } %>
+  <% if (input.type === 'textarea') { %>
+  <textarea <%- includeClasses(classes); %> <%- includeAttrs(attributes); %>></textarea>
+  <% }
+  else {%>
+  <input <%- includeClasses(classes); %> <%- includeAttrs(attributes); %> type="<%= inputType %>">
+  <% } %>
 
-<% if (input.type === 'textarea') { %>
-<textarea <%- includeClasses(classes); %> <%- includeAttrs(attributes); %>></textarea>
-<% }
-else {%>
-<input <%- includeClasses(classes); %> <%- includeAttrs(attributes); %> type="<%= inputType %>">
-<% } %>
-
-<% if (input.addon && input.button) { %>
+  <% if (input.button) { %>
   <%- include('../../../../button/template/ejs/button', { button:input.button }); %>
-  </div>
-<% } %>
+  <% } %>
 
-<% if (input.icon) { %>
+<% if (input.icon || input.button) { %>
 </div>
 <% } %>
 

src/pattern/name/example/data/js/add-firstname.js

@@ -8,10 +8,28 @@ const getFieldsetElement = (node) => {
 };
 
 const firstname = getFieldsetElement(document.getElementById('<%= id %>'));
-
 const reference = getFieldsetElement(this);
 
 const copy = firstname.cloneNode(true);
-copy.innerHTML = copy.innerHTML.replace(/<%= id %>/g, `<%= id %>-added-${this.firstnamesCount}`).replace('name=&quot;given-name&quot;', `name=&quot;additional-name-${this.firstnamesCount}&quot;`).replace('autocomplete=&quot;given-name&quot;', 'autocomplete=&quot;additional-name&quot;');
-const container = reference.parentNode;
-container.insertBefore(copy, reference);
+let html = copy.innerHTML;
+html = html.replace(/<%= id %>/g, `<%= id %>-added-${this.firstnamesCount}`);
+html = html.replace('name=&quot;given-name&quot;', `name=&quot;additional-name-${this.firstnamesCount}&quot;`);
+html = html.replace('autocomplete=&quot;given-name&quot;', 'autocomplete=&quot;additional-name&quot;');
+copy.innerHTML = html;
+
+const wrapper = document.createElement('div');
+wrapper.classList = '<%= prefix %>-input-wrap <%= prefix %>-input-wrap--action';
+
+const removeButton = document.createElement('button');
+const labelRemoveButton = '<%= getText("label.remove-firstname", "name") %>';
+removeButton.classList = '<%= prefix %>-btn <%= prefix %>-btn--tertiary <%= prefix %>-icon-delete-line';
+removeButton.innerHTML = labelRemoveButton;
+removeButton.title = labelRemoveButton;
+
+removeButton.setAttribute('onclick', `<%- include('remove-firstname.js') %>`);
+
+wrapper.appendChild(copy.getElementsByTagName('input')[0]);
+wrapper.appendChild(removeButton);
+copy.getElementsByTagName('label')[0].after(wrapper);
+reference.parentNode.insertBefore(copy, reference);
+document.getElementById(`<%= id %>-added-${this.firstnamesCount}`).focus();

src/pattern/name/example/data/js/remove-firstname.js

@@ -0,0 +1,3 @@
+const input = document.getElementById('<%= id %>-added-${this.firstnamesCount}');
+input.closest('.<%= prefix %>-fieldset__element').remove();
+this.closest('.<%= prefix %>-fieldset__element').remove();

src/pattern/name/i18n/fr.yml

@@ -7,6 +7,7 @@ hint:
   birth: Nom de famille non rectifié après décision du tribunal
 label:
   add-firstname: Ajouter un prénom
+  remove-firstname: Supprimer le prénom
   country: Pays
   family: Nom
   given: Prénom