Feature: Update nested form input component design

app/assets/stylesheets/components/index.scss

@@ -6,6 +6,8 @@
 @import 'summary_section';
 @import 'dropdown';
 @import 'field_container';
+@import 'nested_form';
 @import 'input_field';
 @import 'file_input_loader';
-@import 'text_area_field';
+@import 'text_area_field';
+

app/assets/stylesheets/components/nested_form.scss

@@ -0,0 +1,50 @@
+.nested-form-input-container .titles{
+  display: flex;
+  font-size: 11px;
+  color: #666666;
+  margin-bottom: 5px;
+  width: 90%;
+}
+
+
+.nested-form-input-container  input:focus{
+  border: 1px solid #31B404 !important;
+}
+
+.nested-form-input-container .delete{
+  display: flex;
+  border: 1px dashed #BDBDBD;
+  justify-content: center;
+  align-items: center;
+  height: 43px;
+  width: 43px;
+  border-radius: 5px;
+  cursor: pointer;
+}
+
+.nested-form-input-container .add-another-object{
+  border: 1px dashed #BDBDBD;
+  border-radius: 5px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 10px;
+  cursor: pointer;
+  margin-top: 10px;
+}
+.nested-form-input-container svg path{
+  fill: #DADADA;
+}
+.nested-form-input-container .add-another-object div{
+  color: #DADADA;
+  margin-left: 10px;
+}
+
+
+
+
+
+
+
+
+

app/components/nested_form_inputs_component.rb

@@ -3,5 +3,11 @@
 class NestedFormInputsComponent < ViewComponent::Base
 
   renders_one :template
+  renders_one :header
   renders_many :rows
+
+  def initialize(object_name: '')
+    super
+    @object_name = object_name
+  end
 end

app/components/nested_form_inputs_component/nested_form_inputs_component.html.haml

@@ -1,21 +1,23 @@
-%div{data: {controller: "nested-form"}}
+%div.nested-form-input-container{data: {controller: "nested-form"}}
   %template{'data-nested-form-target':"template"}
-    %div.d-flex.align-items-center.nested-form-wrapper{'data-new-record': 'true'}
+    %div.d-flex.align-items-center.nested-form-wrapper.my-1{'data-new-record': 'true'}
       %div{style: 'width: 90%'}
         = template
       %div.d-flex.justify-content-end{style: 'width: 10%'}
-        %button.btn.btn-danger{data: {action:"nested-form#remove"}}
-          %i.fas.fa-minus.fa-lg
+        %div.delete{data: {action:"click->nested-form#remove"}}
+          = inline_svg 'icons/delete.svg'
+  %div.titles
+    = header
   - rows.each_with_index  do |row , index|
-    %div.d-flex.align-items-center.nested-form-wrapper{'data-new-record': 'true'}
+    %div.d-flex.align-items-center.nested-form-wrapper.my-1{'data-new-record': 'true'}
       %div{style: 'width: 90%'}
         = row
       %div.d-flex.justify-content-end{style: 'width: 10%'}
-        - unless index == 0
-          %button.btn.btn-danger{data: {action:"nested-form#remove"}}
-            %i.fas.fa-minus.fa-lg
+        %div.delete{data: {action:"click->nested-form#remove"}}
+          = inline_svg 'icons/delete.svg'
 
   %div{'data-nested-form-target': "target"}
-  %div.float-right
-    %button.btn.btn-success{data: {action:"nested-form#add"}}
-      %i.fas.fa-plus.fa-lg
+  %div.add-another-object{data: {action:"click->nested-form#add"}}
+    = inline_svg 'icons/plus.svg'
+    %div
+      Add another #{@object_name}

test/components/previews/nested_form_input_component_preview.rb

@@ -0,0 +1,18 @@
+class NestedFormInputComponentPreview < ViewComponent::Preview
+
+  include ActionView::Helpers::TagHelper
+  include ActionView::Helpers::FormTagHelper
+
+  # @param object_name text
+  def default(object_name: 'contact')
+    render NestedFormInputsComponent.new(object_name: object_name) do |c|
+      c.header do
+        content_tag(:div, 'Contact name', class: 'w-50 mx-1') + content_tag(:div, 'Contact email', class: 'w-50 mx-1')
+      end
+
+      c.template do
+        raw "<div class='d-flex'> <input class='form-control w-50 mx-1'/> <input class='form-control w-50 mx-1'/></div>".html_safe
+      end
+    end
+  end
+end