Feature: Update nested form input component design

app/assets/stylesheets/components/index.scss

@@ -6,4 +6,5 @@
 @import 'summary_section';
 @import 'text_area_field';
 @import 'dropdown';
-@import 'field_container';
+@import 'field_container';
+@import 'nested_form';

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,24 @@
+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
+
+  private
+
+  def long_text
+    "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum."
+  end
+end