Feature: Add form inputs components to lookbook

app/assets/stylesheets/application.css.scss.erb

@@ -41,7 +41,6 @@
 @import "ontolobridge";
 @import "fair_assement";
 @import "instances_table";
-@import "file_uploader";
 @import "register";
 @import "lostpassword";
 @import "flatpickr/dist/themes/light";

app/assets/stylesheets/components/file_input_loader.scss

@@ -0,0 +1,54 @@
+.file_uploader {
+    color: #D7D7EF;
+    font-family: 'Lato', sans-serif;
+    border: 1px dashed #CFCFCF;
+    border-radius: 5px;
+}
+
+.file-message {
+    display: flex;
+    margin-top: 10px;
+    font-size: 12px;
+    color: #888888;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.file_uploader>h2 {
+    margin: 50px 0;
+}
+
+.file-drop-area {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    padding: 25px;
+    transition: 0.2s;
+    position: relative;
+}
+
+.choose-file-button {
+    flex-shrink: 0;
+    background-color: rgba(255, 255, 255, 0.04);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    border-radius: 3px;
+    padding: 8px 15px;
+    margin-right: 10px;
+    font-size: 12px;
+    text-transform: uppercase;
+}
+
+.file-input {
+    height: 100%;
+    width: 100%;
+    cursor: pointer;
+    opacity: 0;
+    position: absolute;
+}
+
+.file-drop-area svg path {
+    fill: #CECECE;
+}

app/assets/stylesheets/components/index.scss

@@ -4,6 +4,8 @@
 @import 'chip_button';
 @import 'rounded_button';
 @import 'summary_section';
-@import 'text_area_field';
 @import 'dropdown';
-@import 'field_container';
+@import 'field_container';
+@import 'input_field';
+@import 'file_input_loader';
+@import 'text_area_field';

app/assets/stylesheets/components/input_field.scss

@@ -0,0 +1,30 @@
+.input-field-component{
+    width: 100%;
+    font-size: 13px;
+    padding: 10px;
+    border: 1px solid #BDBDBD;
+    border-radius: 5px;
+    outline: none;
+    resize: none;
+}
+
+.input-field-component:focus{
+    border: 1px solid var(--primary-color);
+}
+
+.text-input-label{
+    font-size: 12px;
+    color: #666666;
+    margin-bottom: 5px;
+}
+
+.text-input-error-text{
+    font-size: 12px;
+    color: var(--error-color)
+}
+
+.text-input-helper-text{
+    font-size: 12px;
+    color: #666666;
+    margin-top: 5px;
+}

app/assets/stylesheets/components/text_area_field.scss

@@ -1,14 +1,14 @@
-.text-content{
-  overflow: hidden;
-  display: -webkit-box;
-  -webkit-box-orient: vertical;
-  -webkit-line-clamp: var(--read-more-line-clamp, 5);
+.text-content {
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: var(--read-more-line-clamp, 5);
 }
 
 
 .see_more_text {
-  color: var(--primary-color);
-  font-size: 15px;
-  margin-top: 10px;
-  text-align: end;
+    color: var(--primary-color);
+    font-size: 15px;
+    margin-top: 10px;
+    text-align: end;
 }

app/assets/stylesheets/theme-variables.scss.erb

@@ -7,28 +7,38 @@
             --hover-color: #40C811;
             --secondary-color: #ffc107;
             --light-color: #F1FAED;
+            --error-color: #EB4335;
         }
     <% when "stageportal" %>
         :root{
             --primary-color: #76A7CC;
             --hover-color: #6B96B7;
             --secondary-color: #ffc107;
             --light-color: #F1F6FA;
+            --error-color: #EB4335;
         }
     <% when "bioportal" %>
         :root{
             --primary-color: #76A7CC;
             --hover-color: #6B96B7;
             --secondary-color: #ffc107;
             --light-color: #F1F6FA;
+            --error-color: #EB4335;
         }
     <% when "ontoportal" %>
         :root{
             --primary-color: #6E98A2;
             --hover-color: #7BABB6;
             --secondary-color: #ffc107;
             --light-color: #F0F5F6;
+            --error-color: #EB4335;
         }
     <%# Here to add a new theme ... %>
     <% end %>
 <% end %>
+
+
+
+
+
+

app/components/file_input_loader_component/file_input_loader_component.html.haml

@@ -1,5 +1,5 @@
-.file_uploader.d-flex.justify-content-center.p-2.bg-secondary{data: {controller: "file-input"}}
+.file_uploader{data: {controller: "file-input"}}
   .file-drop-area.w-100
-    %span.choose-file-button Choose file
-    %span.file-message{data:{'file-input': {target: 'message'}}} or drag and drop file here
-    = file_field_tag @name, class: 'file-input', data:{'file-input-target': 'input', action: 'file-input#updateMessage'}
+    = inline_svg_tag "upload-file.svg"
+    %span.file-message{data:{'file-input': {target: 'message'}}} Drop your file here or, browse files on your device.
+    = file_field_tag @name, class: 'file-input', data:{'file-input-target': 'input', action: 'file-input#updateMessage'}

app/components/input_field_component.rb

@@ -0,0 +1,11 @@
+class InputFieldComponent < ViewComponent::Base
+    def initialize(label: "" , name:, type: "text", choices:[], hint: "", error_message: "", helper_text: "")
+        @label = label
+        @name = name
+        @type = type
+        @choices = choices
+        @hint  = hint
+        @error_message = error_message
+        @helper_text = helper_text
+    end
+end

app/components/input_field_component/input_field_component.html.haml

@@ -0,0 +1,45 @@
+%div
+    - unless @label == ""
+        .text-input-label
+            = @label
+
+    - has_error = @error_message != ""
+
+    - case @type
+    - when "select"
+        %select.input-field-component{name: @name, style: "#{"border-color: var(--error-color);" if has_error}"}
+            - @choices.each do |choice|
+                %option{:value => choice}= choice
+        - if has_error
+            .text-input-error-text
+                = @error_message
+        - unless @helper_text == ""
+            .text-input-helper-text
+                = @helper_text
+
+    - when "textarea" 
+        %textarea.input-field-component{name: @name, rows: "5", placeholder: @hint, style: "#{"border-color: var(--error-color);" if has_error}"}
+        - if has_error
+            .text-input-error-text
+                = @error_message
+        - unless @helper_text == ""
+            .text-input-helper-text
+                = @helper_text
+
+    - else
+        %input.input-field-component.text-input{name: @name, type: @type, placeholder: @hint, style: "#{"border-color: var(--error-color);" if has_error}"}
+        - if has_error
+            .text-input-error-text
+                = @error_message
+        - unless @helper_text == ""
+            .text-input-helper-text
+                = @helper_text
+
+
+
+
+
+
+
+
+

app/components/text_area_field_component.rb

@@ -9,4 +9,4 @@ def initialize(value: , see_more_text:'See more...' , see_less_text: 'See less..
     @see_less_text = see_less_text
   end
 
-end
+end

app/views/layouts/component_preview.html.erb

@@ -50,7 +50,10 @@
 </head>
 <body class="d-flex align-items-center justify-content-center w-100 h-100">
 
-<%= yield %> <!-- rendered preview will be injected here -->
-<%= javascript_include_tag "application" %>
+  <div style="margin: 40px"> 
+    <%= yield %> <!-- rendered preview will be injected here -->
+    <%= javascript_include_tag "application" %>
+  </div>
+
 </body>
 </html>

test/components/previews/inputs/file_input_loader_component_preview.rb

@@ -0,0 +1,9 @@
+class Inputs::FileInputLoaderComponentPreview < ViewComponent::Preview
+
+
+    def default
+        render FileInputLoaderComponent.new(name: "file")
+    end
+
+
+end