From fcb5f18d512a8f6c06446427d99596c2017942e9 Mon Sep 17 00:00:00 2001 From: Bilel Kihal <61744974+Bilelkihal@users.noreply.github.com> Date: Thu, 6 Jul 2023 09:11:57 +0000 Subject: [PATCH 01/27] add input field to lookbook --- app/assets/stylesheets/components/index.scss | 3 ++- .../stylesheets/components/input_field.scss | 19 +++++++++++++++++++ app/components/input_field_component.rb | 9 +++++++++ .../input_field_component.html.haml | 4 ++++ .../previews/input_field_component_preview.rb | 16 ++++++++++++++++ 5 files changed, 50 insertions(+), 1 deletion(-) create mode 100644 app/assets/stylesheets/components/input_field.scss create mode 100644 app/components/input_field_component.rb create mode 100644 app/components/input_field_component/input_field_component.html.haml create mode 100644 test/components/previews/input_field_component_preview.rb diff --git a/app/assets/stylesheets/components/index.scss b/app/assets/stylesheets/components/index.scss index 163a1203a..d9dae8297 100644 --- a/app/assets/stylesheets/components/index.scss +++ b/app/assets/stylesheets/components/index.scss @@ -6,4 +6,5 @@ @import 'summary_section'; @import 'text_area_field'; @import 'dropdown'; -@import 'field_container'; \ No newline at end of file +@import 'field_container'; +@import 'input_field'; \ No newline at end of file diff --git a/app/assets/stylesheets/components/input_field.scss b/app/assets/stylesheets/components/input_field.scss new file mode 100644 index 000000000..ad904a6d8 --- /dev/null +++ b/app/assets/stylesheets/components/input_field.scss @@ -0,0 +1,19 @@ +.input-field-component{ + margin-top: 5px; + 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; +} \ No newline at end of file diff --git a/app/components/input_field_component.rb b/app/components/input_field_component.rb new file mode 100644 index 000000000..85130f375 --- /dev/null +++ b/app/components/input_field_component.rb @@ -0,0 +1,9 @@ +class InputFieldComponent < ViewComponent::Base + def initialize(label: , name:, type: "text", width: "100%", margin_bottom: "0px") + @label = label + @name = name + @type = type + @width = width + @margin_bottom = margin_bottom + end +end \ No newline at end of file diff --git a/app/components/input_field_component/input_field_component.html.haml b/app/components/input_field_component/input_field_component.html.haml new file mode 100644 index 000000000..148a20fe9 --- /dev/null +++ b/app/components/input_field_component/input_field_component.html.haml @@ -0,0 +1,4 @@ +%div + .text-input-label + = @label + %input.input-field-component.text-input{name: @name, type: @type, style: "margin-bottom: #{@margin_bottom}; width: #{@width};"} \ No newline at end of file diff --git a/test/components/previews/input_field_component_preview.rb b/test/components/previews/input_field_component_preview.rb new file mode 100644 index 000000000..3605b9054 --- /dev/null +++ b/test/components/previews/input_field_component_preview.rb @@ -0,0 +1,16 @@ +class InputFieldComponentPreview < ViewComponent::Preview + + # @param label text + + def default(label: "Label") + render InputFieldComponent.new(label: label, name: "name", type: "text", width: "100%", margin_bottom: "0") + end + + # @param label text + + def date(label: "Label") + render InputFieldComponent.new(label: label, name: "name", type: "text", width: "100%", margin_bottom: "0", type: "date") + end + + +end \ No newline at end of file From 8aa6195871203c3e09636d88858c49e535422a6d Mon Sep 17 00:00:00 2001 From: Bilel Kihal <61744974+Bilelkihal@users.noreply.github.com> Date: Thu, 6 Jul 2023 09:15:15 +0000 Subject: [PATCH 02/27] add select component to lookbook --- app/assets/stylesheets/components/index.scss | 3 ++- app/assets/stylesheets/components/select.scss | 18 ++++++++++++++++++ app/components/select_component.rb | 9 +++++++++ .../select_component.html.haml | 5 +++++ .../previews/select_component_preview.rb | 9 +++++++++ 5 files changed, 43 insertions(+), 1 deletion(-) create mode 100644 app/assets/stylesheets/components/select.scss create mode 100644 app/components/select_component.rb create mode 100644 app/components/select_component/select_component.html.haml create mode 100644 test/components/previews/select_component_preview.rb diff --git a/app/assets/stylesheets/components/index.scss b/app/assets/stylesheets/components/index.scss index d9dae8297..477ef2d2b 100644 --- a/app/assets/stylesheets/components/index.scss +++ b/app/assets/stylesheets/components/index.scss @@ -7,4 +7,5 @@ @import 'text_area_field'; @import 'dropdown'; @import 'field_container'; -@import 'input_field'; \ No newline at end of file +@import 'input_field'; +@import 'select'; \ No newline at end of file diff --git a/app/assets/stylesheets/components/select.scss b/app/assets/stylesheets/components/select.scss new file mode 100644 index 000000000..10fe26e66 --- /dev/null +++ b/app/assets/stylesheets/components/select.scss @@ -0,0 +1,18 @@ +.select-component{ + margin-top: 5px; + width: 100%; + font-size: 13px; + padding: 10px; + border: 1px solid #BDBDBD; + border-radius: 5px; + outline: none; + cursor: pointer; +} +.select-component:focus { + border: 1px solid var(--primary-color); +} + +.select-label { + font-size: 12px; + color: #666666; +} \ No newline at end of file diff --git a/app/components/select_component.rb b/app/components/select_component.rb new file mode 100644 index 000000000..4f99f2523 --- /dev/null +++ b/app/components/select_component.rb @@ -0,0 +1,9 @@ +class SelectComponent < ViewComponent::Base + def initialize(label: , name:, choices:, width: "100%", margin_bottom: "0px" ) + @label = label + @name = name + @choices = choices + @width = width + @margin_bottom = margin_bottom + end +end \ No newline at end of file diff --git a/app/components/select_component/select_component.html.haml b/app/components/select_component/select_component.html.haml new file mode 100644 index 000000000..bdeb268fa --- /dev/null +++ b/app/components/select_component/select_component.html.haml @@ -0,0 +1,5 @@ +.select-label + = @label +%select.select-component{style: "margin-bottom: #{@margin_bottom}; width: #{@width};", name: @name} + - @choices.each do |choice| + %option{:value => choice}= choice \ No newline at end of file diff --git a/test/components/previews/select_component_preview.rb b/test/components/previews/select_component_preview.rb new file mode 100644 index 000000000..a5e2bbbdd --- /dev/null +++ b/test/components/previews/select_component_preview.rb @@ -0,0 +1,9 @@ +class SelectComponentPreview < ViewComponent::Preview + + # @param label text + + def default(label: "Label") + render SelectComponent.new(label: label, name: "name", choices: ["choice 1", "choice 2", "choice 3"], width: "100%", margin_bottom: "0") + end + +end \ No newline at end of file From b888400532f5f5c51cc64b0cf503700d4fdc03d1 Mon Sep 17 00:00:00 2001 From: Bilel Kihal <61744974+Bilelkihal@users.noreply.github.com> Date: Thu, 6 Jul 2023 09:17:56 +0000 Subject: [PATCH 03/27] add text area component to lookbook --- .../stylesheets/components/text_area.scss | 21 +++++++++++++++++++ app/components/text_area_component.rb | 8 +++++++ .../text_area_component.html.haml | 4 ++++ .../previews/text_area_component_preview.rb | 9 ++++++++ 4 files changed, 42 insertions(+) create mode 100644 app/assets/stylesheets/components/text_area.scss create mode 100644 app/components/text_area_component.rb create mode 100644 app/components/text_area_component/text_area_component.html.haml create mode 100644 test/components/previews/text_area_component_preview.rb diff --git a/app/assets/stylesheets/components/text_area.scss b/app/assets/stylesheets/components/text_area.scss new file mode 100644 index 000000000..5ee4146c4 --- /dev/null +++ b/app/assets/stylesheets/components/text_area.scss @@ -0,0 +1,21 @@ +.text-area-component { + margin-top: 5px; + margin-bottom: 23px; + width: 100%; + font-size: 13px; + padding: 10px; + border: 1px solid #BDBDBD; + border-radius: 5px; + outline: none; + resize: none; + background-color: white; +} + +.text-area-component:focus { + border: 1px solid var(--primary-color); +} + +.text-area-label { + font-size: 12px; + color: #666666; +} \ No newline at end of file diff --git a/app/components/text_area_component.rb b/app/components/text_area_component.rb new file mode 100644 index 000000000..4582e6304 --- /dev/null +++ b/app/components/text_area_component.rb @@ -0,0 +1,8 @@ +class TextAreaComponent < ViewComponent::Base + def initialize(label: , name:, width: "100%", margin_bottom: "0px" ) + @label = label + @name = name + @width = width + @margin_bottom = margin_bottom + end +end \ No newline at end of file diff --git a/app/components/text_area_component/text_area_component.html.haml b/app/components/text_area_component/text_area_component.html.haml new file mode 100644 index 000000000..57e07a694 --- /dev/null +++ b/app/components/text_area_component/text_area_component.html.haml @@ -0,0 +1,4 @@ +%div + .text-area-label + = @label + %textarea.text-area-component{name: @name, rows: "5", style: "margin-bottom: #{@margin_bottom}; width: #{@width};"} \ No newline at end of file diff --git a/test/components/previews/text_area_component_preview.rb b/test/components/previews/text_area_component_preview.rb new file mode 100644 index 000000000..6d701b980 --- /dev/null +++ b/test/components/previews/text_area_component_preview.rb @@ -0,0 +1,9 @@ +class TextAreaComponentPreview < ViewComponent::Preview + + # @param label text + + def default(label: "Label") + render TextAreaComponent.new(label: label, name: "name", width: "100%", margin_bottom: "0") + end + +end \ No newline at end of file From a1a6ce604010fea2120739cd20595cd471b55d59 Mon Sep 17 00:00:00 2001 From: Bilel Kihal <61744974+Bilelkihal@users.noreply.github.com> Date: Thu, 6 Jul 2023 09:22:21 +0000 Subject: [PATCH 04/27] remove old undesired text area input from lookbook --- app/assets/stylesheets/components/index.scss | 4 ++-- .../stylesheets/components/text_area_field.scss | 14 -------------- app/components/text_area_field_component.rb | 12 ------------ .../text_area_field_component.html.haml | 5 ----- .../previews/text_area_field_component_preview.rb | 13 ------------- 5 files changed, 2 insertions(+), 46 deletions(-) delete mode 100644 app/assets/stylesheets/components/text_area_field.scss delete mode 100644 app/components/text_area_field_component.rb delete mode 100644 app/components/text_area_field_component/text_area_field_component.html.haml delete mode 100644 test/components/previews/text_area_field_component_preview.rb diff --git a/app/assets/stylesheets/components/index.scss b/app/assets/stylesheets/components/index.scss index 477ef2d2b..54d9c03eb 100644 --- a/app/assets/stylesheets/components/index.scss +++ b/app/assets/stylesheets/components/index.scss @@ -4,8 +4,8 @@ @import 'chip_button'; @import 'rounded_button'; @import 'summary_section'; -@import 'text_area_field'; @import 'dropdown'; @import 'field_container'; @import 'input_field'; -@import 'select'; \ No newline at end of file +@import 'select'; +@import 'text_area'; \ No newline at end of file diff --git a/app/assets/stylesheets/components/text_area_field.scss b/app/assets/stylesheets/components/text_area_field.scss deleted file mode 100644 index da0018b8a..000000000 --- a/app/assets/stylesheets/components/text_area_field.scss +++ /dev/null @@ -1,14 +0,0 @@ -.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; -} \ No newline at end of file diff --git a/app/components/text_area_field_component.rb b/app/components/text_area_field_component.rb deleted file mode 100644 index f7963afce..000000000 --- a/app/components/text_area_field_component.rb +++ /dev/null @@ -1,12 +0,0 @@ -# frozen_string_literal: true - -class TextAreaFieldComponent < ViewComponent::Base - - def initialize(value: , see_more_text:'See more...' , see_less_text: 'See less...') - super - @value = value - @see_more_text = see_more_text - @see_less_text = see_less_text - end - -end diff --git a/app/components/text_area_field_component/text_area_field_component.html.haml b/app/components/text_area_field_component/text_area_field_component.html.haml deleted file mode 100644 index 40226b7e5..000000000 --- a/app/components/text_area_field_component/text_area_field_component.html.haml +++ /dev/null @@ -1,5 +0,0 @@ -%div{data:{controller:"text-truncate", 'text-truncate-more-text-value': @see_more_text , 'text-truncate-less-text-value': @see_less_text}} - %p.text-content{'data-text-truncate-target': 'content'} - = @value - %p.see_more_text{data:{'text-truncate-target': 'button', 'action':"click->text-truncate#toggle"}} - = @see_more_text \ No newline at end of file diff --git a/test/components/previews/text_area_field_component_preview.rb b/test/components/previews/text_area_field_component_preview.rb deleted file mode 100644 index 2d6cfa7b7..000000000 --- a/test/components/previews/text_area_field_component_preview.rb +++ /dev/null @@ -1,13 +0,0 @@ -class TextAreaFieldComponentPreview < ViewComponent::Preview - - - # @param value textarea - def default(value: '') - render TextAreaFieldComponent.new(value: value.empty? ? (long_text + long_text) : value ) - 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 \ No newline at end of file From 217b804858e2afb3f3e8cd9365019cbe2280c244 Mon Sep 17 00:00:00 2001 From: Bilel Kihal <61744974+Bilelkihal@users.noreply.github.com> Date: Thu, 6 Jul 2023 09:25:18 +0000 Subject: [PATCH 05/27] add margin to lookbook preview --- app/views/layouts/component_preview.html.erb | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/app/views/layouts/component_preview.html.erb b/app/views/layouts/component_preview.html.erb index 745f4c563..f6fe9f26b 100644 --- a/app/views/layouts/component_preview.html.erb +++ b/app/views/layouts/component_preview.html.erb @@ -50,7 +50,10 @@ -<%= yield %> -<%= javascript_include_tag "application" %> +
+ <%= yield %> + <%= javascript_include_tag "application" %> +
+ \ No newline at end of file From eb6504a8395fd0c79acde58d189de6b398b8697c Mon Sep 17 00:00:00 2001 From: Bilel Kihal <61744974+Bilelkihal@users.noreply.github.com> Date: Mon, 10 Jul 2023 14:41:26 +0000 Subject: [PATCH 06/27] add Upload file input component to lookbook --- .../stylesheets/application.css.scss.erb | 1 - .../components/file_input_loader.scss | 54 +++++++++++++++++++ app/assets/stylesheets/components/index.scss | 3 +- app/assets/stylesheets/file_uploader.scss | 53 ------------------ .../file_input_loader_component.html.haml | 9 ++-- .../file_input_loader_component_preview.rb | 9 ++++ 6 files changed, 70 insertions(+), 59 deletions(-) create mode 100644 app/assets/stylesheets/components/file_input_loader.scss delete mode 100644 app/assets/stylesheets/file_uploader.scss create mode 100644 test/components/previews/file_input_loader_component_preview.rb diff --git a/app/assets/stylesheets/application.css.scss.erb b/app/assets/stylesheets/application.css.scss.erb index 03a6c9d11..03650e79d 100644 --- a/app/assets/stylesheets/application.css.scss.erb +++ b/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"; diff --git a/app/assets/stylesheets/components/file_input_loader.scss b/app/assets/stylesheets/components/file_input_loader.scss new file mode 100644 index 000000000..029ab9f71 --- /dev/null +++ b/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; +} \ No newline at end of file diff --git a/app/assets/stylesheets/components/index.scss b/app/assets/stylesheets/components/index.scss index 54d9c03eb..d235e0cbc 100644 --- a/app/assets/stylesheets/components/index.scss +++ b/app/assets/stylesheets/components/index.scss @@ -8,4 +8,5 @@ @import 'field_container'; @import 'input_field'; @import 'select'; -@import 'text_area'; \ No newline at end of file +@import 'text_area'; +@import 'file_input_loader'; \ No newline at end of file diff --git a/app/assets/stylesheets/file_uploader.scss b/app/assets/stylesheets/file_uploader.scss deleted file mode 100644 index 96c03f823..000000000 --- a/app/assets/stylesheets/file_uploader.scss +++ /dev/null @@ -1,53 +0,0 @@ -.file_uploader { - color: #D7D7EF; - font-family: 'Lato', sans-serif; -} - -.file_uploader > h2 { - margin: 50px 0; -} - - -.file-drop-area { - position: relative; - display: flex; - align-items: center; - width: 450px; - max-width: 100%; - padding: 25px; - border: 1px dashed rgba(255, 255, 255, 0.4); - border-radius: 3px; - transition: 0.2s; - -} - -.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-message { - font-size: small; - font-weight: 300; - line-height: 1.4; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; -} - -.file-input { - position: absolute; - left: 0; - top: 0; - height: 100%; - width: 100%; - cursor: pointer; - opacity: 0; - -} \ No newline at end of file diff --git a/app/components/file_input_loader_component/file_input_loader_component.html.haml b/app/components/file_input_loader_component/file_input_loader_component.html.haml index 8c807b7e2..9c30c70d2 100644 --- a/app/components/file_input_loader_component/file_input_loader_component.html.haml +++ b/app/components/file_input_loader_component/file_input_loader_component.html.haml @@ -1,5 +1,6 @@ -.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'} + %svg{fill: "none", height: "47", viewbox: "0 0 64 47", width: "64", xmlns: "http://www.w3.org/2000/svg"} + %path{d: "M50.0074 46.568H36.2763V32.6931H40.8141C41.9649 32.6931 42.6449 31.3854 41.9649 30.4438L33.1377 18.2297C32.5754 17.445 31.4115 17.445 30.8492 18.2297L22.0221 30.4438C21.342 31.3854 22.009 32.6931 23.1729 32.6931H27.7107V46.568H12.3318C5.46629 46.1888 0 39.7679 0 32.8108C0 28.0114 2.60237 23.8267 6.46016 21.5644C6.10707 20.6097 5.92399 19.5897 5.92399 18.5174C5.92399 13.6134 9.88639 9.651 14.7904 9.651C15.8496 9.651 16.8696 9.83408 17.8243 10.1872C20.662 4.17164 26.7822 0 33.8962 0C43.1026 0.0130772 50.6874 7.06171 51.5505 16.0458C58.6253 17.262 64 23.8137 64 31.2284C64 39.1532 57.8275 46.0188 50.0074 46.568Z", fill: "#CECECE"} + %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'} \ No newline at end of file diff --git a/test/components/previews/file_input_loader_component_preview.rb b/test/components/previews/file_input_loader_component_preview.rb new file mode 100644 index 000000000..89986e4f5 --- /dev/null +++ b/test/components/previews/file_input_loader_component_preview.rb @@ -0,0 +1,9 @@ +class FileInputLoaderComponentPreview < ViewComponent::Preview + + + def default + render FileInputLoaderComponent.new(name: "file") + end + + +end \ No newline at end of file From 13d5e8d21e9709e80d8b6fecdb9d45da3a56758f Mon Sep 17 00:00:00 2001 From: Bilel Kihal <61744974+Bilelkihal@users.noreply.github.com> Date: Tue, 11 Jul 2023 19:30:09 +0000 Subject: [PATCH 07/27] combine all input components in one globale component --- app/assets/stylesheets/components/index.scss | 1 - app/assets/stylesheets/components/select.scss | 18 ------------------ app/components/input_field_component.rb | 3 ++- .../input_field_component.html.haml | 11 ++++++++++- app/components/select_component.rb | 9 --------- .../select_component.html.haml | 5 ----- .../previews/input_field_component_preview.rb | 8 +++++++- .../previews/select_component_preview.rb | 9 --------- 8 files changed, 19 insertions(+), 45 deletions(-) delete mode 100644 app/assets/stylesheets/components/select.scss delete mode 100644 app/components/select_component.rb delete mode 100644 app/components/select_component/select_component.html.haml delete mode 100644 test/components/previews/select_component_preview.rb diff --git a/app/assets/stylesheets/components/index.scss b/app/assets/stylesheets/components/index.scss index d235e0cbc..f70d94cdb 100644 --- a/app/assets/stylesheets/components/index.scss +++ b/app/assets/stylesheets/components/index.scss @@ -7,6 +7,5 @@ @import 'dropdown'; @import 'field_container'; @import 'input_field'; -@import 'select'; @import 'text_area'; @import 'file_input_loader'; \ No newline at end of file diff --git a/app/assets/stylesheets/components/select.scss b/app/assets/stylesheets/components/select.scss deleted file mode 100644 index 10fe26e66..000000000 --- a/app/assets/stylesheets/components/select.scss +++ /dev/null @@ -1,18 +0,0 @@ -.select-component{ - margin-top: 5px; - width: 100%; - font-size: 13px; - padding: 10px; - border: 1px solid #BDBDBD; - border-radius: 5px; - outline: none; - cursor: pointer; -} -.select-component:focus { - border: 1px solid var(--primary-color); -} - -.select-label { - font-size: 12px; - color: #666666; -} \ No newline at end of file diff --git a/app/components/input_field_component.rb b/app/components/input_field_component.rb index 85130f375..b49da44f6 100644 --- a/app/components/input_field_component.rb +++ b/app/components/input_field_component.rb @@ -1,9 +1,10 @@ class InputFieldComponent < ViewComponent::Base - def initialize(label: , name:, type: "text", width: "100%", margin_bottom: "0px") + def initialize(label: , name:, type: "text", choices:[], width: "100%", margin_bottom: "0px") @label = label @name = name @type = type @width = width + @choices = choices @margin_bottom = margin_bottom end end \ No newline at end of file diff --git a/app/components/input_field_component/input_field_component.html.haml b/app/components/input_field_component/input_field_component.html.haml index 148a20fe9..fa2841231 100644 --- a/app/components/input_field_component/input_field_component.html.haml +++ b/app/components/input_field_component/input_field_component.html.haml @@ -1,4 +1,13 @@ %div .text-input-label = @label - %input.input-field-component.text-input{name: @name, type: @type, style: "margin-bottom: #{@margin_bottom}; width: #{@width};"} \ No newline at end of file + + - if @type == "select" + %select.select-component{style: "margin-bottom: #{@margin_bottom}; width: #{@width};", name: @name} + - @choices.each do |choice| + %option{:value => choice}= choice + - else + %input.input-field-component.text-input{name: @name, type: @type, style: "margin-bottom: #{@margin_bottom}; width: #{@width};"} + + + \ No newline at end of file diff --git a/app/components/select_component.rb b/app/components/select_component.rb deleted file mode 100644 index 4f99f2523..000000000 --- a/app/components/select_component.rb +++ /dev/null @@ -1,9 +0,0 @@ -class SelectComponent < ViewComponent::Base - def initialize(label: , name:, choices:, width: "100%", margin_bottom: "0px" ) - @label = label - @name = name - @choices = choices - @width = width - @margin_bottom = margin_bottom - end -end \ No newline at end of file diff --git a/app/components/select_component/select_component.html.haml b/app/components/select_component/select_component.html.haml deleted file mode 100644 index bdeb268fa..000000000 --- a/app/components/select_component/select_component.html.haml +++ /dev/null @@ -1,5 +0,0 @@ -.select-label - = @label -%select.select-component{style: "margin-bottom: #{@margin_bottom}; width: #{@width};", name: @name} - - @choices.each do |choice| - %option{:value => choice}= choice \ No newline at end of file diff --git a/test/components/previews/input_field_component_preview.rb b/test/components/previews/input_field_component_preview.rb index 3605b9054..b0a52cd5a 100644 --- a/test/components/previews/input_field_component_preview.rb +++ b/test/components/previews/input_field_component_preview.rb @@ -9,7 +9,13 @@ def default(label: "Label") # @param label text def date(label: "Label") - render InputFieldComponent.new(label: label, name: "name", type: "text", width: "100%", margin_bottom: "0", type: "date") + render InputFieldComponent.new(label: label, name: "name", type: "date", width: "100%", margin_bottom: "0") + end + + # @param label text + + def select(label: "Label") + render InputFieldComponent.new(label: label, name: "name", type: "select", choices: ["bilel", "kihal", "best"], width: "100%", margin_bottom: "0") end diff --git a/test/components/previews/select_component_preview.rb b/test/components/previews/select_component_preview.rb deleted file mode 100644 index a5e2bbbdd..000000000 --- a/test/components/previews/select_component_preview.rb +++ /dev/null @@ -1,9 +0,0 @@ -class SelectComponentPreview < ViewComponent::Preview - - # @param label text - - def default(label: "Label") - render SelectComponent.new(label: label, name: "name", choices: ["choice 1", "choice 2", "choice 3"], width: "100%", margin_bottom: "0") - end - -end \ No newline at end of file From 192f73e33ba2c115d9ce64f5b4205c35914d7701 Mon Sep 17 00:00:00 2001 From: Bilel Kihal <61744974+Bilelkihal@users.noreply.github.com> Date: Tue, 11 Jul 2023 19:37:19 +0000 Subject: [PATCH 08/27] remove style params from input field component --- app/components/input_field_component.rb | 4 +--- .../input_field_component/input_field_component.html.haml | 4 ++-- test/components/previews/input_field_component_preview.rb | 6 +++--- 3 files changed, 6 insertions(+), 8 deletions(-) diff --git a/app/components/input_field_component.rb b/app/components/input_field_component.rb index b49da44f6..ce1a40311 100644 --- a/app/components/input_field_component.rb +++ b/app/components/input_field_component.rb @@ -1,10 +1,8 @@ class InputFieldComponent < ViewComponent::Base - def initialize(label: , name:, type: "text", choices:[], width: "100%", margin_bottom: "0px") + def initialize(label: , name:, type: "text", choices:[]) @label = label @name = name @type = type - @width = width @choices = choices - @margin_bottom = margin_bottom end end \ No newline at end of file diff --git a/app/components/input_field_component/input_field_component.html.haml b/app/components/input_field_component/input_field_component.html.haml index fa2841231..1a646a595 100644 --- a/app/components/input_field_component/input_field_component.html.haml +++ b/app/components/input_field_component/input_field_component.html.haml @@ -3,11 +3,11 @@ = @label - if @type == "select" - %select.select-component{style: "margin-bottom: #{@margin_bottom}; width: #{@width};", name: @name} + %select.input-field-component{name: @name} - @choices.each do |choice| %option{:value => choice}= choice - else - %input.input-field-component.text-input{name: @name, type: @type, style: "margin-bottom: #{@margin_bottom}; width: #{@width};"} + %input.input-field-component.text-input{name: @name, type: @type} \ No newline at end of file diff --git a/test/components/previews/input_field_component_preview.rb b/test/components/previews/input_field_component_preview.rb index b0a52cd5a..08ffc5fbe 100644 --- a/test/components/previews/input_field_component_preview.rb +++ b/test/components/previews/input_field_component_preview.rb @@ -3,19 +3,19 @@ class InputFieldComponentPreview < ViewComponent::Preview # @param label text def default(label: "Label") - render InputFieldComponent.new(label: label, name: "name", type: "text", width: "100%", margin_bottom: "0") + render InputFieldComponent.new(label: label, name: "name", type: "text") end # @param label text def date(label: "Label") - render InputFieldComponent.new(label: label, name: "name", type: "date", width: "100%", margin_bottom: "0") + render InputFieldComponent.new(label: label, name: "name", type: "date") end # @param label text def select(label: "Label") - render InputFieldComponent.new(label: label, name: "name", type: "select", choices: ["bilel", "kihal", "best"], width: "100%", margin_bottom: "0") + render InputFieldComponent.new(label: label, name: "name", type: "select", choices: ["bilel", "kihal", "best"]) end From 8f565005efac4196fe21e9e980865625ef45b2b7 Mon Sep 17 00:00:00 2001 From: Bilel Kihal <61744974+Bilelkihal@users.noreply.github.com> Date: Tue, 11 Jul 2023 19:47:05 +0000 Subject: [PATCH 09/27] recover text area field component (after deleting it by mistake in a previous commit --- app/assets/stylesheets/components/index.scss | 3 ++- .../stylesheets/components/text_area_field.scss | 14 ++++++++++++++ app/components/text_area_field_component.rb | 12 ++++++++++++ .../text_area_field_component.html.haml | 5 +++++ .../previews/text_area_field_component_preview.rb | 13 +++++++++++++ 5 files changed, 46 insertions(+), 1 deletion(-) create mode 100644 app/assets/stylesheets/components/text_area_field.scss create mode 100644 app/components/text_area_field_component.rb create mode 100644 app/components/text_area_field_component/text_area_field_component.html.haml create mode 100644 test/components/previews/text_area_field_component_preview.rb diff --git a/app/assets/stylesheets/components/index.scss b/app/assets/stylesheets/components/index.scss index f70d94cdb..929de0d53 100644 --- a/app/assets/stylesheets/components/index.scss +++ b/app/assets/stylesheets/components/index.scss @@ -8,4 +8,5 @@ @import 'field_container'; @import 'input_field'; @import 'text_area'; -@import 'file_input_loader'; \ No newline at end of file +@import 'file_input_loader'; +@import 'text_area_field'; \ No newline at end of file diff --git a/app/assets/stylesheets/components/text_area_field.scss b/app/assets/stylesheets/components/text_area_field.scss new file mode 100644 index 000000000..6f50aa4bc --- /dev/null +++ b/app/assets/stylesheets/components/text_area_field.scss @@ -0,0 +1,14 @@ +.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; +} \ No newline at end of file diff --git a/app/components/text_area_field_component.rb b/app/components/text_area_field_component.rb new file mode 100644 index 000000000..5da424e33 --- /dev/null +++ b/app/components/text_area_field_component.rb @@ -0,0 +1,12 @@ +# frozen_string_literal: true + +class TextAreaFieldComponent < ViewComponent::Base + + def initialize(value: , see_more_text:'See more...' , see_less_text: 'See less...') + super + @value = value + @see_more_text = see_more_text + @see_less_text = see_less_text + end + +end \ No newline at end of file diff --git a/app/components/text_area_field_component/text_area_field_component.html.haml b/app/components/text_area_field_component/text_area_field_component.html.haml new file mode 100644 index 000000000..40226b7e5 --- /dev/null +++ b/app/components/text_area_field_component/text_area_field_component.html.haml @@ -0,0 +1,5 @@ +%div{data:{controller:"text-truncate", 'text-truncate-more-text-value': @see_more_text , 'text-truncate-less-text-value': @see_less_text}} + %p.text-content{'data-text-truncate-target': 'content'} + = @value + %p.see_more_text{data:{'text-truncate-target': 'button', 'action':"click->text-truncate#toggle"}} + = @see_more_text \ No newline at end of file diff --git a/test/components/previews/text_area_field_component_preview.rb b/test/components/previews/text_area_field_component_preview.rb new file mode 100644 index 000000000..2d6cfa7b7 --- /dev/null +++ b/test/components/previews/text_area_field_component_preview.rb @@ -0,0 +1,13 @@ +class TextAreaFieldComponentPreview < ViewComponent::Preview + + + # @param value textarea + def default(value: '') + render TextAreaFieldComponent.new(value: value.empty? ? (long_text + long_text) : value ) + 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 \ No newline at end of file From 225d3dc24ebad5ec648c855ce2166586da6782ad Mon Sep 17 00:00:00 2001 From: Bilel Kihal <61744974+Bilelkihal@users.noreply.github.com> Date: Tue, 11 Jul 2023 20:00:35 +0000 Subject: [PATCH 10/27] use inline svg in file input loader component --- app/assets/images/upload-file.svg | 3 +++ .../file_input_loader_component.html.haml | 3 +-- 2 files changed, 4 insertions(+), 2 deletions(-) create mode 100644 app/assets/images/upload-file.svg diff --git a/app/assets/images/upload-file.svg b/app/assets/images/upload-file.svg new file mode 100644 index 000000000..0693d1e9b --- /dev/null +++ b/app/assets/images/upload-file.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/app/components/file_input_loader_component/file_input_loader_component.html.haml b/app/components/file_input_loader_component/file_input_loader_component.html.haml index 9c30c70d2..47c406905 100644 --- a/app/components/file_input_loader_component/file_input_loader_component.html.haml +++ b/app/components/file_input_loader_component/file_input_loader_component.html.haml @@ -1,6 +1,5 @@ .file_uploader{data: {controller: "file-input"}} .file-drop-area.w-100 - %svg{fill: "none", height: "47", viewbox: "0 0 64 47", width: "64", xmlns: "http://www.w3.org/2000/svg"} - %path{d: "M50.0074 46.568H36.2763V32.6931H40.8141C41.9649 32.6931 42.6449 31.3854 41.9649 30.4438L33.1377 18.2297C32.5754 17.445 31.4115 17.445 30.8492 18.2297L22.0221 30.4438C21.342 31.3854 22.009 32.6931 23.1729 32.6931H27.7107V46.568H12.3318C5.46629 46.1888 0 39.7679 0 32.8108C0 28.0114 2.60237 23.8267 6.46016 21.5644C6.10707 20.6097 5.92399 19.5897 5.92399 18.5174C5.92399 13.6134 9.88639 9.651 14.7904 9.651C15.8496 9.651 16.8696 9.83408 17.8243 10.1872C20.662 4.17164 26.7822 0 33.8962 0C43.1026 0.0130772 50.6874 7.06171 51.5505 16.0458C58.6253 17.262 64 23.8137 64 31.2284C64 39.1532 57.8275 46.0188 50.0074 46.568Z", fill: "#CECECE"} + = 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'} \ No newline at end of file From 1595b69d5881da339dbdeed147b29a3035828b39 Mon Sep 17 00:00:00 2001 From: Bilel Kihal <61744974+Bilelkihal@users.noreply.github.com> Date: Tue, 11 Jul 2023 21:00:36 +0000 Subject: [PATCH 11/27] add hint to text input component --- app/components/input_field_component.rb | 3 ++- .../input_field_component.html.haml | 7 ++++--- .../previews/input_field_component_preview.rb | 10 +++++++--- 3 files changed, 13 insertions(+), 7 deletions(-) diff --git a/app/components/input_field_component.rb b/app/components/input_field_component.rb index ce1a40311..db407a673 100644 --- a/app/components/input_field_component.rb +++ b/app/components/input_field_component.rb @@ -1,8 +1,9 @@ class InputFieldComponent < ViewComponent::Base - def initialize(label: , name:, type: "text", choices:[]) + def initialize(label: "" , name:, type: "text", choices:[], hint: "") @label = label @name = name @type = type @choices = choices + @hint = hint end end \ No newline at end of file diff --git a/app/components/input_field_component/input_field_component.html.haml b/app/components/input_field_component/input_field_component.html.haml index 1a646a595..0027ac9a1 100644 --- a/app/components/input_field_component/input_field_component.html.haml +++ b/app/components/input_field_component/input_field_component.html.haml @@ -1,13 +1,14 @@ %div - .text-input-label - = @label + - unless @label == "" + .text-input-label + = @label - if @type == "select" %select.input-field-component{name: @name} - @choices.each do |choice| %option{:value => choice}= choice - else - %input.input-field-component.text-input{name: @name, type: @type} + %input.input-field-component.text-input{name: @name, type: @type, placeholder: @hint} \ No newline at end of file diff --git a/test/components/previews/input_field_component_preview.rb b/test/components/previews/input_field_component_preview.rb index 08ffc5fbe..d1588e0e3 100644 --- a/test/components/previews/input_field_component_preview.rb +++ b/test/components/previews/input_field_component_preview.rb @@ -1,17 +1,21 @@ class InputFieldComponentPreview < ViewComponent::Preview + # @param label text - - def default(label: "Label") - render InputFieldComponent.new(label: label, name: "name", type: "text") + # @param hint text + + def default(label: "Label", hint: "") + render InputFieldComponent.new(label: label, name: "name", type: "text", hint: hint) end + # @param label text def date(label: "Label") render InputFieldComponent.new(label: label, name: "name", type: "date") end + # @param label text def select(label: "Label") From 51eb8ba6f3c9a616fbbc68f253d9f63b11f75552 Mon Sep 17 00:00:00 2001 From: Bilel Kihal <61744974+Bilelkihal@users.noreply.github.com> Date: Tue, 11 Jul 2023 22:02:29 +0000 Subject: [PATCH 12/27] add error state to input field component --- .../stylesheets/components/input_field.scss | 5 +++++ app/assets/stylesheets/theme-variables.scss.erb | 10 ++++++++++ app/components/input_field_component.rb | 3 ++- .../input_field_component.html.haml | 14 ++++++++++++-- .../previews/input_field_component_preview.rb | 15 +++++++++------ 5 files changed, 38 insertions(+), 9 deletions(-) diff --git a/app/assets/stylesheets/components/input_field.scss b/app/assets/stylesheets/components/input_field.scss index ad904a6d8..dbb0dc1b4 100644 --- a/app/assets/stylesheets/components/input_field.scss +++ b/app/assets/stylesheets/components/input_field.scss @@ -16,4 +16,9 @@ .text-input-label{ font-size: 12px; color: #666666; +} + +.error-text{ + font-size: 12px; + color: var(--error-color) } \ No newline at end of file diff --git a/app/assets/stylesheets/theme-variables.scss.erb b/app/assets/stylesheets/theme-variables.scss.erb index d442f5a8f..f7c8786d2 100644 --- a/app/assets/stylesheets/theme-variables.scss.erb +++ b/app/assets/stylesheets/theme-variables.scss.erb @@ -7,6 +7,7 @@ --hover-color: #40C811; --secondary-color: #ffc107; --light-color: #F1FAED; + --error-color: #EB4335; } <% when "stageportal" %> :root{ @@ -14,6 +15,7 @@ --hover-color: #6B96B7; --secondary-color: #ffc107; --light-color: #F1F6FA; + --error-color: #EB4335; } <% when "bioportal" %> :root{ @@ -21,6 +23,7 @@ --hover-color: #6B96B7; --secondary-color: #ffc107; --light-color: #F1F6FA; + --error-color: #EB4335; } <% when "ontoportal" %> :root{ @@ -28,7 +31,14 @@ --hover-color: #7BABB6; --secondary-color: #ffc107; --light-color: #F0F5F6; + --error-color: #EB4335; } <%# Here to add a new theme ... %> <% end %> <% end %> + + + + + + diff --git a/app/components/input_field_component.rb b/app/components/input_field_component.rb index db407a673..5fe68242f 100644 --- a/app/components/input_field_component.rb +++ b/app/components/input_field_component.rb @@ -1,9 +1,10 @@ class InputFieldComponent < ViewComponent::Base - def initialize(label: "" , name:, type: "text", choices:[], hint: "") + def initialize(label: "" , name:, type: "text", choices:[], hint: "", error_message: "") @label = label @name = name @type = type @choices = choices @hint = hint + @error_message = error_message end end \ No newline at end of file diff --git a/app/components/input_field_component/input_field_component.html.haml b/app/components/input_field_component/input_field_component.html.haml index 0027ac9a1..0df4a826c 100644 --- a/app/components/input_field_component/input_field_component.html.haml +++ b/app/components/input_field_component/input_field_component.html.haml @@ -3,12 +3,22 @@ .text-input-label = @label + - has_error = @error_message != "" + - if @type == "select" - %select.input-field-component{name: @name} + + %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 + .error-text + = @error_message + - else - %input.input-field-component.text-input{name: @name, type: @type, placeholder: @hint} + %input.input-field-component.text-input{name: @name, type: @type, placeholder: @hint, style: "#{"border-color: var(--error-color);" if has_error}"} + - if has_error + .error-text + = @error_message \ No newline at end of file diff --git a/test/components/previews/input_field_component_preview.rb b/test/components/previews/input_field_component_preview.rb index d1588e0e3..f17125667 100644 --- a/test/components/previews/input_field_component_preview.rb +++ b/test/components/previews/input_field_component_preview.rb @@ -3,23 +3,26 @@ class InputFieldComponentPreview < ViewComponent::Preview # @param label text # @param hint text + # @param error_message text - def default(label: "Label", hint: "") - render InputFieldComponent.new(label: label, name: "name", type: "text", hint: hint) + def default(label: "Label", hint: "", error_message: "") + render InputFieldComponent.new(label: label, name: "name", type: "text", hint: hint, error_message: error_message) end # @param label text + # @param error_message text - def date(label: "Label") - render InputFieldComponent.new(label: label, name: "name", type: "date") + def date(label: "Label", error_message: "") + render InputFieldComponent.new(label: label, name: "name", type: "date", error_message: error_message) end # @param label text + # @param error_message text - def select(label: "Label") - render InputFieldComponent.new(label: label, name: "name", type: "select", choices: ["bilel", "kihal", "best"]) + def select(label: "Label", error_message: "") + render InputFieldComponent.new(label: label, name: "name", type: "select", choices: ["choice 1", "choice 2", "choice 3"], error_message: error_message) end From b44eaae1826350d111d8c9bc8d698754629d0d0b Mon Sep 17 00:00:00 2001 From: Bilel Kihal <61744974+Bilelkihal@users.noreply.github.com> Date: Tue, 11 Jul 2023 22:15:05 +0000 Subject: [PATCH 13/27] add helper text to input field component --- .../stylesheets/components/input_field.scss | 8 +++++++- app/components/input_field_component.rb | 3 ++- .../input_field_component.html.haml | 10 ++++++++-- .../previews/input_field_component_preview.rb | 17 ++++++++++------- 4 files changed, 27 insertions(+), 11 deletions(-) diff --git a/app/assets/stylesheets/components/input_field.scss b/app/assets/stylesheets/components/input_field.scss index dbb0dc1b4..80edf8da7 100644 --- a/app/assets/stylesheets/components/input_field.scss +++ b/app/assets/stylesheets/components/input_field.scss @@ -18,7 +18,13 @@ color: #666666; } -.error-text{ +.text-input-error-text{ font-size: 12px; color: var(--error-color) +} + +.text-input-helper-text{ + font-size: 12px; + color: #666666; + margin-top: 5px; } \ No newline at end of file diff --git a/app/components/input_field_component.rb b/app/components/input_field_component.rb index 5fe68242f..f12bfb83a 100644 --- a/app/components/input_field_component.rb +++ b/app/components/input_field_component.rb @@ -1,10 +1,11 @@ class InputFieldComponent < ViewComponent::Base - def initialize(label: "" , name:, type: "text", choices:[], hint: "", error_message: "") + 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 \ No newline at end of file diff --git a/app/components/input_field_component/input_field_component.html.haml b/app/components/input_field_component/input_field_component.html.haml index 0df4a826c..a5a841665 100644 --- a/app/components/input_field_component/input_field_component.html.haml +++ b/app/components/input_field_component/input_field_component.html.haml @@ -11,14 +11,20 @@ - @choices.each do |choice| %option{:value => choice}= choice - if has_error - .error-text + .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 - .error-text + .text-input-error-text = @error_message + - unless @helper_text == "" + .text-input-helper-text + = @helper_text \ No newline at end of file diff --git a/test/components/previews/input_field_component_preview.rb b/test/components/previews/input_field_component_preview.rb index f17125667..599e1e09c 100644 --- a/test/components/previews/input_field_component_preview.rb +++ b/test/components/previews/input_field_component_preview.rb @@ -4,25 +4,28 @@ class InputFieldComponentPreview < ViewComponent::Preview # @param label text # @param hint text # @param error_message text + # @param helper_text text - def default(label: "Label", hint: "", error_message: "") - render InputFieldComponent.new(label: label, name: "name", type: "text", hint: hint, error_message: error_message) + def default(label: "Label", hint: "", error_message: "", helper_text: "") + render InputFieldComponent.new(label: label, name: "name", type: "text", hint: hint, error_message: error_message, helper_text: helper_text) end # @param label text - # @param error_message text + # @param error_message text + # @param helper_text text - def date(label: "Label", error_message: "") - render InputFieldComponent.new(label: label, name: "name", type: "date", error_message: error_message) + def date(label: "Label", error_message: "", helper_text: "") + render InputFieldComponent.new(label: label, name: "name", type: "date", error_message: error_message, helper_text: helper_text) end # @param label text # @param error_message text + # @param helper_text text - def select(label: "Label", error_message: "") - render InputFieldComponent.new(label: label, name: "name", type: "select", choices: ["choice 1", "choice 2", "choice 3"], error_message: error_message) + def select(label: "Label", error_message: "", helper_text: "") + render InputFieldComponent.new(label: label, name: "name", type: "select", choices: ["choice 1", "choice 2", "choice 3"], error_message: error_message, helper_text: helper_text) end From 602caee13e5b3d07dd99e01182babe0edef2d44f Mon Sep 17 00:00:00 2001 From: Bilel Kihal <61744974+Bilelkihal@users.noreply.github.com> Date: Tue, 11 Jul 2023 22:24:41 +0000 Subject: [PATCH 14/27] add notes to input field component to explain how to use it --- .../previews/input_field_component_preview.rb | 18 ++++++++++++++++-- 1 file changed, 16 insertions(+), 2 deletions(-) diff --git a/test/components/previews/input_field_component_preview.rb b/test/components/previews/input_field_component_preview.rb index 599e1e09c..af077d296 100644 --- a/test/components/previews/input_field_component_preview.rb +++ b/test/components/previews/input_field_component_preview.rb @@ -1,6 +1,14 @@ class InputFieldComponentPreview < ViewComponent::Preview + + + + # This is a text input field: + # - To use it without a label: don't give a value to the param label or leave it empty. + # - To give it a hint (placeholder): define the param hint with the hind you want to be displayed. + # - To put it in error state: define the param error_message with the error message you want to be displayed. + # - To give it a helper text (a text displayed under the input field): define the param helper_text with the helper text you want to be displayed. # @param label text # @param hint text # @param error_message text @@ -10,7 +18,10 @@ def default(label: "Label", hint: "", error_message: "", helper_text: "") render InputFieldComponent.new(label: label, name: "name", type: "text", hint: hint, error_message: error_message, helper_text: helper_text) end - + # This is a date input field: + # - To use it without a label: don't give a value to the param label or leave it empty. + # - To put it in error state: define the param error_message with the error message you want to be displayed. + # - To give it a helper text (a text displayed under the input field): define the param helper_text with the helper text you want to be displayed. # @param label text # @param error_message text # @param helper_text text @@ -19,7 +30,10 @@ def date(label: "Label", error_message: "", helper_text: "") render InputFieldComponent.new(label: label, name: "name", type: "date", error_message: error_message, helper_text: helper_text) end - + # This is a text input field: + # - To use it without a label: don't give a value to the param label or leave it empty. + # - To put it in error state: define the param error_message with the error message you want to be displayed. + # - To give it a helper text (a text displayed under the input field): define the param helper_text with the helper text you want to be displayed. # @param label text # @param error_message text # @param helper_text text From 4034e71f54437c53588e339a23ca05ccc4c046ab Mon Sep 17 00:00:00 2001 From: Bilel Kihal <61744974+Bilelkihal@users.noreply.github.com> Date: Tue, 11 Jul 2023 22:53:09 +0000 Subject: [PATCH 15/27] combine text area input component with input field component --- app/assets/stylesheets/components/index.scss | 1 - .../stylesheets/components/text_area.scss | 21 ------------------- .../input_field_component.html.haml | 19 +++++++++++++++-- app/components/text_area_component.rb | 8 ------- .../text_area_component.html.haml | 4 ---- .../previews/input_field_component_preview.rb | 17 +++++++++++++++ .../previews/text_area_component_preview.rb | 9 -------- 7 files changed, 34 insertions(+), 45 deletions(-) delete mode 100644 app/assets/stylesheets/components/text_area.scss delete mode 100644 app/components/text_area_component.rb delete mode 100644 app/components/text_area_component/text_area_component.html.haml delete mode 100644 test/components/previews/text_area_component_preview.rb diff --git a/app/assets/stylesheets/components/index.scss b/app/assets/stylesheets/components/index.scss index 929de0d53..18898f533 100644 --- a/app/assets/stylesheets/components/index.scss +++ b/app/assets/stylesheets/components/index.scss @@ -7,6 +7,5 @@ @import 'dropdown'; @import 'field_container'; @import 'input_field'; -@import 'text_area'; @import 'file_input_loader'; @import 'text_area_field'; \ No newline at end of file diff --git a/app/assets/stylesheets/components/text_area.scss b/app/assets/stylesheets/components/text_area.scss deleted file mode 100644 index 5ee4146c4..000000000 --- a/app/assets/stylesheets/components/text_area.scss +++ /dev/null @@ -1,21 +0,0 @@ -.text-area-component { - margin-top: 5px; - margin-bottom: 23px; - width: 100%; - font-size: 13px; - padding: 10px; - border: 1px solid #BDBDBD; - border-radius: 5px; - outline: none; - resize: none; - background-color: white; -} - -.text-area-component:focus { - border: 1px solid var(--primary-color); -} - -.text-area-label { - font-size: 12px; - color: #666666; -} \ No newline at end of file diff --git a/app/components/input_field_component/input_field_component.html.haml b/app/components/input_field_component/input_field_component.html.haml index a5a841665..309e7ac20 100644 --- a/app/components/input_field_component/input_field_component.html.haml +++ b/app/components/input_field_component/input_field_component.html.haml @@ -5,8 +5,8 @@ - has_error = @error_message != "" - - if @type == "select" - + - 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 @@ -16,6 +16,15 @@ - 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}"} @@ -27,4 +36,10 @@ = @helper_text + + + + + + \ No newline at end of file diff --git a/app/components/text_area_component.rb b/app/components/text_area_component.rb deleted file mode 100644 index 4582e6304..000000000 --- a/app/components/text_area_component.rb +++ /dev/null @@ -1,8 +0,0 @@ -class TextAreaComponent < ViewComponent::Base - def initialize(label: , name:, width: "100%", margin_bottom: "0px" ) - @label = label - @name = name - @width = width - @margin_bottom = margin_bottom - end -end \ No newline at end of file diff --git a/app/components/text_area_component/text_area_component.html.haml b/app/components/text_area_component/text_area_component.html.haml deleted file mode 100644 index 57e07a694..000000000 --- a/app/components/text_area_component/text_area_component.html.haml +++ /dev/null @@ -1,4 +0,0 @@ -%div - .text-area-label - = @label - %textarea.text-area-component{name: @name, rows: "5", style: "margin-bottom: #{@margin_bottom}; width: #{@width};"} \ No newline at end of file diff --git a/test/components/previews/input_field_component_preview.rb b/test/components/previews/input_field_component_preview.rb index af077d296..0d9e023c3 100644 --- a/test/components/previews/input_field_component_preview.rb +++ b/test/components/previews/input_field_component_preview.rb @@ -18,6 +18,23 @@ def default(label: "Label", hint: "", error_message: "", helper_text: "") render InputFieldComponent.new(label: label, name: "name", type: "text", hint: hint, error_message: error_message, helper_text: helper_text) end + + # This is a textarea field: + # - To use it without a label: don't give a value to the param label or leave it empty. + # - To give it a hint (placeholder): define the param hint with the hind you want to be displayed. + # - To put it in error state: define the param error_message with the error message you want to be displayed. + # - To give it a helper text (a text displayed under the input field): define the param helper_text with the helper text you want to be displayed. + # @param label text + # @param hint text + # @param error_message text + # @param helper_text text + + def textarea(label: "Label", hint: "", error_message: "", helper_text: "") + render InputFieldComponent.new(label: label, name: "name", type: "textarea", hint: hint, error_message: error_message, helper_text: helper_text) + end + + + # This is a date input field: # - To use it without a label: don't give a value to the param label or leave it empty. # - To put it in error state: define the param error_message with the error message you want to be displayed. diff --git a/test/components/previews/text_area_component_preview.rb b/test/components/previews/text_area_component_preview.rb deleted file mode 100644 index 6d701b980..000000000 --- a/test/components/previews/text_area_component_preview.rb +++ /dev/null @@ -1,9 +0,0 @@ -class TextAreaComponentPreview < ViewComponent::Preview - - # @param label text - - def default(label: "Label") - render TextAreaComponent.new(label: label, name: "name", width: "100%", margin_bottom: "0") - end - -end \ No newline at end of file From a59d056c6c55e2777db93c1158dfca41d595c7d7 Mon Sep 17 00:00:00 2001 From: Bilel Kihal <61744974+Bilelkihal@users.noreply.github.com> Date: Tue, 11 Jul 2023 22:59:53 +0000 Subject: [PATCH 16/27] groupe inputs in one folder in the lookbook --- .../{ => inputs}/file_input_loader_component_preview.rb | 2 +- .../previews/{ => inputs}/input_field_component_preview.rb | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) rename test/components/previews/{ => inputs}/file_input_loader_component_preview.rb (56%) rename test/components/previews/{ => inputs}/input_field_component_preview.rb (96%) diff --git a/test/components/previews/file_input_loader_component_preview.rb b/test/components/previews/inputs/file_input_loader_component_preview.rb similarity index 56% rename from test/components/previews/file_input_loader_component_preview.rb rename to test/components/previews/inputs/file_input_loader_component_preview.rb index 89986e4f5..7015495ff 100644 --- a/test/components/previews/file_input_loader_component_preview.rb +++ b/test/components/previews/inputs/file_input_loader_component_preview.rb @@ -1,4 +1,4 @@ -class FileInputLoaderComponentPreview < ViewComponent::Preview +class Inputs::FileInputLoaderComponentPreview < ViewComponent::Preview def default diff --git a/test/components/previews/input_field_component_preview.rb b/test/components/previews/inputs/input_field_component_preview.rb similarity index 96% rename from test/components/previews/input_field_component_preview.rb rename to test/components/previews/inputs/input_field_component_preview.rb index 0d9e023c3..4767f4cf2 100644 --- a/test/components/previews/input_field_component_preview.rb +++ b/test/components/previews/inputs/input_field_component_preview.rb @@ -1,4 +1,4 @@ -class InputFieldComponentPreview < ViewComponent::Preview +class Inputs::InputFieldComponentPreview < ViewComponent::Preview From 76c4f61745d19f3d5a4a866d6fd7a489485a7e28 Mon Sep 17 00:00:00 2001 From: Bilel Kihal <61744974+Bilelkihal@users.noreply.github.com> Date: Tue, 11 Jul 2023 23:43:27 +0000 Subject: [PATCH 17/27] fix style issues in input field component --- app/assets/stylesheets/components/input_field.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/assets/stylesheets/components/input_field.scss b/app/assets/stylesheets/components/input_field.scss index 80edf8da7..2ca9a7e74 100644 --- a/app/assets/stylesheets/components/input_field.scss +++ b/app/assets/stylesheets/components/input_field.scss @@ -1,5 +1,4 @@ .input-field-component{ - margin-top: 5px; width: 100%; font-size: 13px; padding: 10px; @@ -16,6 +15,7 @@ .text-input-label{ font-size: 12px; color: #666666; + margin-bottom: 5px; } .text-input-error-text{ From a46e007e9bf5e30bdb0ff36a44b30b546506d953 Mon Sep 17 00:00:00 2001 From: Bilel Kihal <61744974+Bilelkihal@users.noreply.github.com> Date: Wed, 12 Jul 2023 12:00:17 +0000 Subject: [PATCH 18/27] refactor input field component code to remove repetition --- app/components/input_field_component.rb | 4 ++- .../input_field_component.html.haml | 34 ++++++------------- 2 files changed, 14 insertions(+), 24 deletions(-) diff --git a/app/components/input_field_component.rb b/app/components/input_field_component.rb index f12bfb83a..0d628ab8d 100644 --- a/app/components/input_field_component.rb +++ b/app/components/input_field_component.rb @@ -8,4 +8,6 @@ def initialize(label: "" , name:, type: "text", choices:[], hint: "", error_mess @error_message = error_message @helper_text = helper_text end -end \ No newline at end of file +end + + diff --git a/app/components/input_field_component/input_field_component.html.haml b/app/components/input_field_component/input_field_component.html.haml index 309e7ac20..ea03b1d47 100644 --- a/app/components/input_field_component/input_field_component.html.haml +++ b/app/components/input_field_component/input_field_component.html.haml @@ -4,36 +4,24 @@ = @label - has_error = @error_message != "" + - border_style = "#{"border-color: var(--error-color);" if has_error}" - case @type - when "select" - %select.input-field-component{name: @name, style: "#{"border-color: var(--error-color);" if has_error}"} + %select.input-field-component{name: @name, style: border_style} - @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 - + %textarea.input-field-component{name: @name, rows: "5", placeholder: @hint, style: border_style} - 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 + %input.input-field-component.text-input{name: @name, type: @type, placeholder: @hint, style: border_style} + - if has_error + .text-input-error-text + = @error_message + - unless @helper_text == "" + .text-input-helper-text + = @helper_text + From cfd373a42fd93174bc2ac02ef32830538337f5c2 Mon Sep 17 00:00:00 2001 From: Syphax Bouazzouni Date: Wed, 12 Jul 2023 19:11:25 +0200 Subject: [PATCH 19/27] remove the duplicated alert component preview --- test/components/previews/alert_component_preview.rb | 12 ------------ 1 file changed, 12 deletions(-) delete mode 100644 test/components/previews/alert_component_preview.rb diff --git a/test/components/previews/alert_component_preview.rb b/test/components/previews/alert_component_preview.rb deleted file mode 100644 index 23e6bb3a7..000000000 --- a/test/components/previews/alert_component_preview.rb +++ /dev/null @@ -1,12 +0,0 @@ -class AlertComponentPreview < ViewComponent::Preview - - # @param message text - # @param type select [primary, danger, success, info, light] - - def default(type: "success", message: "Here we can type a success or failure message to the user") - render AlertMessageComponent.new(id: '', type: type) do - message - end - end - -end \ No newline at end of file From 7e01a59be31343b6434a66a92dd9105e624cf69c Mon Sep 17 00:00:00 2001 From: Syphax Bouazzouni Date: Wed, 12 Jul 2023 19:22:11 +0200 Subject: [PATCH 20/27] make the input field component generic using a the content slot --- app/components/input_field_component.rb | 25 ++++++-- .../input_field_component.html.haml | 39 +++++------- .../inputs/input_field_component_preview.rb | 63 ------------------- 3 files changed, 38 insertions(+), 89 deletions(-) delete mode 100644 test/components/previews/inputs/input_field_component_preview.rb diff --git a/app/components/input_field_component.rb b/app/components/input_field_component.rb index 0d628ab8d..d455109ea 100644 --- a/app/components/input_field_component.rb +++ b/app/components/input_field_component.rb @@ -1,12 +1,29 @@ class InputFieldComponent < ViewComponent::Base - def initialize(label: "" , name:, type: "text", choices:[], hint: "", error_message: "", helper_text: "") + def initialize(label: "" , name:, value: 'Syphax', type: 'text', placeholder: "", error_message: "", helper_text: "") @label = label @name = name - @type = type - @choices = choices - @hint = hint + @placeholder = placeholder @error_message = error_message @helper_text = helper_text + @value = value + @type = type + end + + + def error_style + "border-color: var(--error-color);" if error? + end + + def error? + !@error_message.empty? + end + + def help? + !@helper_text.empty? + end + + def label? + !@label.empty? end end diff --git a/app/components/input_field_component/input_field_component.html.haml b/app/components/input_field_component/input_field_component.html.haml index ea03b1d47..76c104509 100644 --- a/app/components/input_field_component/input_field_component.html.haml +++ b/app/components/input_field_component/input_field_component.html.haml @@ -1,26 +1,21 @@ %div - - unless @label == "" - .text-input-label - = @label - - - has_error = @error_message != "" - - border_style = "#{"border-color: var(--error-color);" if has_error}" - - - case @type - - when "select" - %select.input-field-component{name: @name, style: border_style} - - @choices.each do |choice| - %option{:value => choice}= choice - - when "textarea" - %textarea.input-field-component{name: @name, rows: "5", placeholder: @hint, style: border_style} - - else - %input.input-field-component.text-input{name: @name, type: @type, placeholder: @hint, style: border_style} - - if has_error - .text-input-error-text - = @error_message - - unless @helper_text == "" - .text-input-helper-text - = @helper_text + - if label? + .text-input-label + = @label + + - if content + = content + - else + %input.input-field-component.text-input{name: @name, type: @type, placeholder: @placeholder, style: error_style, value: @value} + + + + - if error? + .text-input-error-text + = @error_message + - if help? + .text-input-helper-text + = @helper_text diff --git a/test/components/previews/inputs/input_field_component_preview.rb b/test/components/previews/inputs/input_field_component_preview.rb deleted file mode 100644 index 4767f4cf2..000000000 --- a/test/components/previews/inputs/input_field_component_preview.rb +++ /dev/null @@ -1,63 +0,0 @@ -class Inputs::InputFieldComponentPreview < ViewComponent::Preview - - - - - - # This is a text input field: - # - To use it without a label: don't give a value to the param label or leave it empty. - # - To give it a hint (placeholder): define the param hint with the hind you want to be displayed. - # - To put it in error state: define the param error_message with the error message you want to be displayed. - # - To give it a helper text (a text displayed under the input field): define the param helper_text with the helper text you want to be displayed. - # @param label text - # @param hint text - # @param error_message text - # @param helper_text text - - def default(label: "Label", hint: "", error_message: "", helper_text: "") - render InputFieldComponent.new(label: label, name: "name", type: "text", hint: hint, error_message: error_message, helper_text: helper_text) - end - - - # This is a textarea field: - # - To use it without a label: don't give a value to the param label or leave it empty. - # - To give it a hint (placeholder): define the param hint with the hind you want to be displayed. - # - To put it in error state: define the param error_message with the error message you want to be displayed. - # - To give it a helper text (a text displayed under the input field): define the param helper_text with the helper text you want to be displayed. - # @param label text - # @param hint text - # @param error_message text - # @param helper_text text - - def textarea(label: "Label", hint: "", error_message: "", helper_text: "") - render InputFieldComponent.new(label: label, name: "name", type: "textarea", hint: hint, error_message: error_message, helper_text: helper_text) - end - - - - # This is a date input field: - # - To use it without a label: don't give a value to the param label or leave it empty. - # - To put it in error state: define the param error_message with the error message you want to be displayed. - # - To give it a helper text (a text displayed under the input field): define the param helper_text with the helper text you want to be displayed. - # @param label text - # @param error_message text - # @param helper_text text - - def date(label: "Label", error_message: "", helper_text: "") - render InputFieldComponent.new(label: label, name: "name", type: "date", error_message: error_message, helper_text: helper_text) - end - - # This is a text input field: - # - To use it without a label: don't give a value to the param label or leave it empty. - # - To put it in error state: define the param error_message with the error message you want to be displayed. - # - To give it a helper text (a text displayed under the input field): define the param helper_text with the helper text you want to be displayed. - # @param label text - # @param error_message text - # @param helper_text text - - def select(label: "Label", error_message: "", helper_text: "") - render InputFieldComponent.new(label: label, name: "name", type: "select", choices: ["choice 1", "choice 2", "choice 3"], error_message: error_message, helper_text: helper_text) - end - - -end \ No newline at end of file From 351b1a4a3f61e434c92924ce93dfba08d90a1fa4 Mon Sep 17 00:00:00 2001 From: Syphax Bouazzouni Date: Wed, 12 Jul 2023 19:22:39 +0200 Subject: [PATCH 21/27] implement form date component --- app/components/form/date_component.rb | 7 +++++++ .../date_component/date_component.html.haml | 1 + .../previews/form/date_component_preview.rb | 17 +++++++++++++++++ 3 files changed, 25 insertions(+) create mode 100644 app/components/form/date_component.rb create mode 100644 app/components/form/date_component/date_component.html.haml create mode 100644 test/components/previews/form/date_component_preview.rb diff --git a/app/components/form/date_component.rb b/app/components/form/date_component.rb new file mode 100644 index 000000000..143b1733f --- /dev/null +++ b/app/components/form/date_component.rb @@ -0,0 +1,7 @@ +# frozen_string_literal: true + +class Form::DateComponent < InputFieldComponent + def initialize(label: '', name:, value: Date.today, placeholder: '', error_message: '', helper_text: '') + super(label: label, name: name, value: value, placeholder: placeholder, error_message: error_message, helper_text: helper_text) + end +end diff --git a/app/components/form/date_component/date_component.html.haml b/app/components/form/date_component/date_component.html.haml new file mode 100644 index 000000000..ee412e9d0 --- /dev/null +++ b/app/components/form/date_component/date_component.html.haml @@ -0,0 +1 @@ += render InputFieldComponent.new(label: @label, name: @name, value: @value, placeholder: @placeholder, error_message: @error_message, helper_text: @helper_text, type: 'date') \ No newline at end of file diff --git a/test/components/previews/form/date_component_preview.rb b/test/components/previews/form/date_component_preview.rb new file mode 100644 index 000000000..193bc3cf9 --- /dev/null +++ b/test/components/previews/form/date_component_preview.rb @@ -0,0 +1,17 @@ +# frozen_string_literal: true + +class Form::DateComponentPreview < ViewComponent::Preview + def default + # This is a date input field: + # - To use it without a label: don't give a value to the param label or leave it empty. + # - To put it in error state: define the param error_message with the error message you want to be displayed. + # - To give it a helper text (a text displayed under the input field): define the param helper_text with the helper text you want to be displayed. + # @param label text + # @param error_message text + # @param helper_text text + + def default(label: "Label", placeholder: "", error_message: "", helper_text: "") + render Form::DateComponent.new(label: label, name: "name", placeholder: placeholder, error_message: error_message, helper_text: helper_text) + end + end +end From 8d7f47f3fd5339210a3383ecc7199ef341b13dd3 Mon Sep 17 00:00:00 2001 From: Syphax Bouazzouni Date: Wed, 12 Jul 2023 19:23:15 +0200 Subject: [PATCH 22/27] implement form text area component --- app/components/form/text_area_component.rb | 8 ++++++++ .../text_area_component.html.haml | 2 ++ .../form/text_area_component_preview.rb | 19 +++++++++++++++++++ 3 files changed, 29 insertions(+) create mode 100644 app/components/form/text_area_component.rb create mode 100644 app/components/form/text_area_component/text_area_component.html.haml create mode 100644 test/components/previews/form/text_area_component_preview.rb diff --git a/app/components/form/text_area_component.rb b/app/components/form/text_area_component.rb new file mode 100644 index 000000000..a9aa3041e --- /dev/null +++ b/app/components/form/text_area_component.rb @@ -0,0 +1,8 @@ +# frozen_string_literal: true + +class Form::TextAreaComponent < InputFieldComponent + def initialize(label: '', name:, value: nil, placeholder: '', error_message: '', helper_text: '', rows: "5") + super(label: label, name: name, value: value, placeholder: placeholder, error_message: error_message, helper_text: helper_text) + @rows = rows + end +end diff --git a/app/components/form/text_area_component/text_area_component.html.haml b/app/components/form/text_area_component/text_area_component.html.haml new file mode 100644 index 000000000..e8d960a90 --- /dev/null +++ b/app/components/form/text_area_component/text_area_component.html.haml @@ -0,0 +1,2 @@ += render InputFieldComponent.new(label: @label, name: @name, value: @value, placeholder: @placeholder, error_message: @error_message, helper_text: @helper_text) do + %textarea.input-field-component{name: @name, rows: @rows, placeholder: @placeholder, style: error_style, value: @value} \ No newline at end of file diff --git a/test/components/previews/form/text_area_component_preview.rb b/test/components/previews/form/text_area_component_preview.rb new file mode 100644 index 000000000..36d21e577 --- /dev/null +++ b/test/components/previews/form/text_area_component_preview.rb @@ -0,0 +1,19 @@ +# frozen_string_literal: true + +class Form::TextAreaComponentPreview < ViewComponent::Preview + # This is a textarea field: + # - To use it without a label: don't give a value to the param label or leave it empty. + # - To give it a hint (placeholder): define the param hint with the hind you want to be displayed. + # - To put it in error state: define the param error_message with the error message you want to be displayed. + # - To give it a helper text (a text displayed under the input field): define the param helper_text with the helper text you want to be displayed. + + # @param label text + # @param placeholder text + # @param error_message text + # @param helper_text text + # @param rows number + + def default(label: "Label", placeholder: "", error_message: "", helper_text: "", rows: 5) + render Form::TextAreaComponent.new(label: label, name: "name",value: '', placeholder: placeholder, error_message: error_message, helper_text: helper_text, rows: rows) + end +end From c1f1db87ef9e0dbbd78eeede5fcf5954d9e53bf4 Mon Sep 17 00:00:00 2001 From: Syphax Bouazzouni Date: Wed, 12 Jul 2023 19:23:38 +0200 Subject: [PATCH 23/27] implement form text input component --- app/components/form/text_input_component.rb | 7 +++++++ .../text_input_component.html.haml | 1 + .../form/text_input_component_preview.rb | 17 +++++++++++++++++ 3 files changed, 25 insertions(+) create mode 100644 app/components/form/text_input_component.rb create mode 100644 app/components/form/text_input_component/text_input_component.html.haml create mode 100644 test/components/previews/form/text_input_component_preview.rb diff --git a/app/components/form/text_input_component.rb b/app/components/form/text_input_component.rb new file mode 100644 index 000000000..94fa720fe --- /dev/null +++ b/app/components/form/text_input_component.rb @@ -0,0 +1,7 @@ +# frozen_string_literal: true + +class Form::TextInputComponent < InputFieldComponent + def initialize(label: '', name:, value: nil, placeholder: '', error_message: '', helper_text: '') + super(label: label, name: name, value: value, placeholder: placeholder, error_message: error_message, helper_text: helper_text) + end +end diff --git a/app/components/form/text_input_component/text_input_component.html.haml b/app/components/form/text_input_component/text_input_component.html.haml new file mode 100644 index 000000000..b68e5e790 --- /dev/null +++ b/app/components/form/text_input_component/text_input_component.html.haml @@ -0,0 +1 @@ += render InputFieldComponent.new(label: @label, name: @name, value: @value, placeholder: @placeholder, error_message: @error_message, helper_text: @helper_text, type: 'text') diff --git a/test/components/previews/form/text_input_component_preview.rb b/test/components/previews/form/text_input_component_preview.rb new file mode 100644 index 000000000..9511f2374 --- /dev/null +++ b/test/components/previews/form/text_input_component_preview.rb @@ -0,0 +1,17 @@ +# frozen_string_literal: true + +class Form::TextInputComponentPreview < ViewComponent::Preview + # This is a text input field: + # - To use it without a label: don't give a value to the param label or leave it empty. + # - To give it a hint (placeholder): define the param hint with the hind you want to be displayed. + # - To put it in error state: define the param error_message with the error message you want to be displayed. + # - To give it a helper text (a text displayed under the input field): define the param helper_text with the helper text you want to be displayed. + # @param label text + # @param placeholder text + # @param error_message text + # @param helper_text text + + def default(label: "Label", placeholder: "", error_message: "", helper_text: "") + render Form::TextInputComponent.new(label: label, name: "name", placeholder: placeholder, error_message: error_message, helper_text: helper_text) + end +end From d173a9b82dfb57e6cfb602e08cfa4a2dcc93fd1d Mon Sep 17 00:00:00 2001 From: Syphax Bouazzouni Date: Wed, 12 Jul 2023 19:24:25 +0200 Subject: [PATCH 24/27] duplicate the select component to be in the "form" namespace --- app/components/form/select_component.rb | 8 ++++++++ .../select_component/select_component.html.haml | 1 + .../previews/form/select_component_preview.rb | 15 +++++++++++++++ 3 files changed, 24 insertions(+) create mode 100644 app/components/form/select_component.rb create mode 100644 app/components/form/select_component/select_component.html.haml create mode 100644 test/components/previews/form/select_component_preview.rb diff --git a/app/components/form/select_component.rb b/app/components/form/select_component.rb new file mode 100644 index 000000000..bac0cecbc --- /dev/null +++ b/app/components/form/select_component.rb @@ -0,0 +1,8 @@ +# frozen_string_literal: true + +class Form::SelectComponent < SelectInputComponent + + def initialize(id:, name:, values:, selected:, multiple: false, open_to_add_values: false) + super(id: id, name: name, values: values, selected: selected, multiple: multiple, open_to_add_values: open_to_add_values) + end +end diff --git a/app/components/form/select_component/select_component.html.haml b/app/components/form/select_component/select_component.html.haml new file mode 100644 index 000000000..3d3fa1ec7 --- /dev/null +++ b/app/components/form/select_component/select_component.html.haml @@ -0,0 +1 @@ += render SelectInputComponent.new(id: @id, name: @name, values: @values , selected: @selected , multiple: @multiple, open_to_add_values: @open_to_add_values ) \ No newline at end of file diff --git a/test/components/previews/form/select_component_preview.rb b/test/components/previews/form/select_component_preview.rb new file mode 100644 index 000000000..1a1fab70d --- /dev/null +++ b/test/components/previews/form/select_component_preview.rb @@ -0,0 +1,15 @@ +# frozen_string_literal: true + +class Form::SelectComponentPreview < ViewComponent::Preview + def default(id: "", name: "", values: ["choices 1", "choices 2", "choices 3"], selected: "choices 2", multiple: false, open_to_add_values: false) + render Form::SelectComponent.new(id: id, name: name, values: values, selected: selected, multiple: multiple, open_to_add_values: open_to_add_values) + end + + def multiple(id: "", name: "", values: ["choices 1", "choices 2", "choices 3"], selected: "choices 2", multiple: true, open_to_add_values: false) + render Form::SelectComponent.new(id: id, name: name, values: values, selected: selected, multiple: multiple, open_to_add_values: open_to_add_values) + end + + def open_to_add(id: "", name: "", values: ["choices 1", "choices 2", "choices 3"], selected: "choices 2", multiple: true , open_to_add_values: true) + render Form::SelectComponent.new(id: id, name: name, values: values, selected: selected, multiple: multiple, open_to_add_values: open_to_add_values) + end +end From 6694a187cc994df5e0c921c5f551731fdecff7f7 Mon Sep 17 00:00:00 2001 From: Syphax Bouazzouni Date: Wed, 12 Jul 2023 19:27:02 +0200 Subject: [PATCH 25/27] fix select input component inversed open_to_add_values argument usage --- app/components/select_input_component.rb | 2 +- .../select_input_component/select_input_component.html.haml | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/app/components/select_input_component.rb b/app/components/select_input_component.rb index 9bcfe5d1d..e757304d6 100644 --- a/app/components/select_input_component.rb +++ b/app/components/select_input_component.rb @@ -2,7 +2,7 @@ class SelectInputComponent < ViewComponent::Base - def initialize(id:, name:, values:, selected:, multiple: false, open_to_add_values: false) + def initialize(id:, name:, values:, selected:, multiple: false, open_to_add_values: true) super @id = id @name = name diff --git a/app/components/select_input_component/select_input_component.html.haml b/app/components/select_input_component/select_input_component.html.haml index a46f0ad29..00fd00cfe 100644 --- a/app/components/select_input_component/select_input_component.html.haml +++ b/app/components/select_input_component/select_input_component.html.haml @@ -1,7 +1,7 @@ %div{:data => { controller: "select-input", 'select-input': {'multiple-value': @multiple.to_s}}} = select_tag(@name, options_values, { multiple: @multiple, class: "form-control", id: "select_#{@id}", data: { action: "select-input#toggleOtherValue", "select-input-target": "selectedValues" } }) - %div.d-flex.mt-1{style: "display:#{@open_to_add_values ? 'none !important;' : 'block;'}"} + %div.d-flex.mt-1{style: "display:#{!@open_to_add_values ? 'none !important;' : 'block;'}"} = text_field_tag("add_#{@id}", nil, :style => "margin-right: 1em;width: 16em;display: none;", :placeholder => "Or provide the value", data: {action: "keydown.enter->select-input#addValue", "select-input-target": "inputValueField"}, class: 'metadataInput form-control form-control-sm') From 93f66f9c543f7851e7d78cb62cf81746a84ad8ee Mon Sep 17 00:00:00 2001 From: Syphax Bouazzouni Date: Wed, 12 Jul 2023 19:21:05 +0200 Subject: [PATCH 26/27] move and rename file input loader component to be in the form module --- .../file_input_component.rb} | 2 +- .../file_input_component.html.haml} | 0 .../file_input_loader_component_controller.js | 0 app/javascript/component_controllers/index.js | 2 +- app/views/mappings/bulk_loader/_loader.html.haml | 2 +- .../file_input_loader_component_spec.rb | 15 --------------- .../previews/form/file_input_component_preview.rb | 9 +++++++++ .../inputs/file_input_loader_component_preview.rb | 9 --------- 8 files changed, 12 insertions(+), 27 deletions(-) rename app/components/{file_input_loader_component.rb => form/file_input_component.rb} (71%) rename app/components/{file_input_loader_component/file_input_loader_component.html.haml => form/file_input_component/file_input_component.html.haml} (100%) rename app/components/{file_input_loader_component => form/file_input_component}/file_input_loader_component_controller.js (100%) delete mode 100644 spec/components/file_input_loader_component_spec.rb create mode 100644 test/components/previews/form/file_input_component_preview.rb delete mode 100644 test/components/previews/inputs/file_input_loader_component_preview.rb diff --git a/app/components/file_input_loader_component.rb b/app/components/form/file_input_component.rb similarity index 71% rename from app/components/file_input_loader_component.rb rename to app/components/form/file_input_component.rb index a7e960ade..189a3db5c 100644 --- a/app/components/file_input_loader_component.rb +++ b/app/components/form/file_input_component.rb @@ -1,6 +1,6 @@ # frozen_string_literal: true -class FileInputLoaderComponent < ViewComponent::Base +class Form::FileInputComponent < ViewComponent::Base def initialize(name:, html_options: '') @name = name @html_options = html_options diff --git a/app/components/file_input_loader_component/file_input_loader_component.html.haml b/app/components/form/file_input_component/file_input_component.html.haml similarity index 100% rename from app/components/file_input_loader_component/file_input_loader_component.html.haml rename to app/components/form/file_input_component/file_input_component.html.haml diff --git a/app/components/file_input_loader_component/file_input_loader_component_controller.js b/app/components/form/file_input_component/file_input_loader_component_controller.js similarity index 100% rename from app/components/file_input_loader_component/file_input_loader_component_controller.js rename to app/components/form/file_input_component/file_input_loader_component_controller.js diff --git a/app/javascript/component_controllers/index.js b/app/javascript/component_controllers/index.js index dc1edde16..8cc79c545 100644 --- a/app/javascript/component_controllers/index.js +++ b/app/javascript/component_controllers/index.js @@ -2,7 +2,7 @@ import {application} from "../controllers/application"; import TurboModalController from "../../components/turbo_modal_component/turbo_modal_component_controller" import FileInputLoaderController - from "../../components/file_input_loader_component/file_input_loader_component_controller"; + from "../../components/form/file_input_component/file_input_loader_component_controller"; import Select_input_component_controller from "../../components/select_input_component/select_input_component_controller"; diff --git a/app/views/mappings/bulk_loader/_loader.html.haml b/app/views/mappings/bulk_loader/_loader.html.haml index 14a556b23..eb50fa54d 100644 --- a/app/views/mappings/bulk_loader/_loader.html.haml +++ b/app/views/mappings/bulk_loader/_loader.html.haml @@ -14,6 +14,6 @@ = JSON.pretty_generate @example_code = form_with url: '/mappings/loader', method: :post, multipart: true, data: { turbo: true} do %div - = render FileInputLoaderComponent.new(name: :file) + = render Form::FileInputComponent.new(name: :file) %button.btn.btn-secondary.btn-block.mt-2{type:'submit'} Save diff --git a/spec/components/file_input_loader_component_spec.rb b/spec/components/file_input_loader_component_spec.rb deleted file mode 100644 index 9e5190e86..000000000 --- a/spec/components/file_input_loader_component_spec.rb +++ /dev/null @@ -1,15 +0,0 @@ -# frozen_string_literal: true - -require "rails_helper" - -RSpec.describe FileInputLoaderComponent, type: :component do - pending "add some examples to (or delete) #{__FILE__}" - - # it "renders something useful" do - # expect( - # render_inline(described_class.new(attr: "value")) { "Hello, components!" }.css("p").to_html - # ).to include( - # "Hello, components!" - # ) - # end -end diff --git a/test/components/previews/form/file_input_component_preview.rb b/test/components/previews/form/file_input_component_preview.rb new file mode 100644 index 000000000..ef8000a6d --- /dev/null +++ b/test/components/previews/form/file_input_component_preview.rb @@ -0,0 +1,9 @@ +class Form::FileInputComponentPreview < ViewComponent::Preview + + + def default + render Form::FileInputComponent.new(name: "file") + end + + +end \ No newline at end of file diff --git a/test/components/previews/inputs/file_input_loader_component_preview.rb b/test/components/previews/inputs/file_input_loader_component_preview.rb deleted file mode 100644 index 7015495ff..000000000 --- a/test/components/previews/inputs/file_input_loader_component_preview.rb +++ /dev/null @@ -1,9 +0,0 @@ -class Inputs::FileInputLoaderComponentPreview < ViewComponent::Preview - - - def default - render FileInputLoaderComponent.new(name: "file") - end - - -end \ No newline at end of file From 106b79c1dab67491f7ad4b3db874040d8d906436 Mon Sep 17 00:00:00 2001 From: Syphax Bouazzouni Date: Wed, 12 Jul 2023 19:55:57 +0200 Subject: [PATCH 27/27] update select component to use InputFieldComponent to have a label --- app/components/form/select_component.rb | 11 ++++++++--- .../form/select_component/select_component.html.haml | 3 ++- 2 files changed, 10 insertions(+), 4 deletions(-) diff --git a/app/components/form/select_component.rb b/app/components/form/select_component.rb index bac0cecbc..19a89a670 100644 --- a/app/components/form/select_component.rb +++ b/app/components/form/select_component.rb @@ -1,8 +1,13 @@ # frozen_string_literal: true -class Form::SelectComponent < SelectInputComponent +class Form::SelectComponent < InputFieldComponent - def initialize(id:, name:, values:, selected:, multiple: false, open_to_add_values: false) - super(id: id, name: name, values: values, selected: selected, multiple: multiple, open_to_add_values: open_to_add_values) + def initialize(id: nil, label: '', name:, value: [], selected: '', placeholder: '', error_message: '', helper_text: '', multiple: false, open_to_add_values: false) + super(label: label, name: name, value: value, placeholder: placeholder, error_message: error_message, helper_text: helper_text) + @values = value + @selected = selected + @open_to_add_values = open_to_add_values + @multiple = multiple + @id = id end end diff --git a/app/components/form/select_component/select_component.html.haml b/app/components/form/select_component/select_component.html.haml index 3d3fa1ec7..e8399b659 100644 --- a/app/components/form/select_component/select_component.html.haml +++ b/app/components/form/select_component/select_component.html.haml @@ -1 +1,2 @@ -= render SelectInputComponent.new(id: @id, name: @name, values: @values , selected: @selected , multiple: @multiple, open_to_add_values: @open_to_add_values ) \ No newline at end of file += render InputFieldComponent.new(name: @name, error_message: @error_message, helper_text: @helper_text) do + = render SelectInputComponent.new(id: @id, name: @name, values: @values , selected: @selected , multiple: @multiple, open_to_add_values: @open_to_add_values ) \ No newline at end of file