From 1f31aff8260e7ddec067b3f3e68c79c2cb0aecc5 Mon Sep 17 00:00:00 2001
From: Bilel Kihal <61744974+Bilelkihal@users.noreply.github.com>
Date: Thu, 16 Feb 2023 14:55:30 +0100
Subject: [PATCH] Feature: Feedback page uses chips component (#201)

* create chips component file

* Add a function to turn spaces into underscores

* Create chips component design file

* CSS for the chips component

* Add recaptcha tags

* Change the meaningless argument "text" by "name" & "value"

* Use the chips component on the feedback page

* Add a component folder for component styles in the styelsheets folder

* Remove chips component style from feedback page css file
---
 app/assets/stylesheets/feedback.scss       | 37 +---------------------
 app/views/home/feedback/feedback.html.haml | 30 ++++--------------
 2 files changed, 7 insertions(+), 60 deletions(-)

diff --git a/app/assets/stylesheets/feedback.scss b/app/assets/stylesheets/feedback.scss
index a66b780ad..51219d38c 100644
--- a/app/assets/stylesheets/feedback.scss
+++ b/app/assets/stylesheets/feedback.scss
@@ -70,44 +70,9 @@
     background-color: var(--hover-color);
     cursor: pointer;
 }
-.feedback-check-icon{
-    margin-left: 6px;
-    margin-right: 6px;
-    display: none;
-}
 .feedback-checks{
     max-width: 363px;
     margin: 0 auto;    
     display: flex;
     flex-wrap: wrap;
-}
-.feedback-checks div{
-    margin-right: 10px;
-}
-
-.feedback-checks div label{
-    cursor: pointer;
-}
-.feedback-checks div label input[type="checkbox"]{
-    display: none;
-}
-.feedback-checks div label span{
-    position: relative;
-    display: inline-block;
-    background:white;
-    border: 0.5px solid #BDBDBD;
-    color: #a7a7a7;
-    padding: 8px;
-    border-radius: 5px;
-    font-size: 13px;
-    user-select: none;
-
-}
-.feedback-checks div label input[type="checkbox"]:checked ~ span{
-    border: 1px solid var(--primary-color);
-    color: var(--primary-color);
-}
-
-.feedback-checks div label input[type="checkbox"]:checked ~ span .feedback-check-icon{
-    display:unset;
-}
+}
\ No newline at end of file
diff --git a/app/views/home/feedback/feedback.html.haml b/app/views/home/feedback/feedback.html.haml
index e3deacd4c..5180a4a4a 100644
--- a/app/views/home/feedback/feedback.html.haml
+++ b/app/views/home/feedback/feedback.html.haml
@@ -49,28 +49,10 @@
         Tags
         %font.register-optional (optional)
       .feedback-checks
-        %div
-          %label{:for => "feedback-bug-check"}
-            %input#feedback-bug-check{:name => "bug", :type => "checkbox", :value => "Bug"}/
-            %span
-              %img.feedback-check-icon{:src => "#{asset_path('check.svg')}"}/
-              Bug
-        %div
-          %label{:for => "feedback-proposition-check"}
-            %input#feedback-proposition-check{:name => "proposition", :type => "checkbox", :value => "Proposition"}/
-            %span
-              %img.feedback-check-icon{:src => "#{asset_path('check.svg')}"}/
-              Proposition
-        %div
-          %label{:for => "feedback-question-check"}
-            %input#feedback-question-check{:name => "question", :type => "checkbox", :value => "Question"}/
-            %span
-              %img.feedback-check-icon{:src => "#{asset_path('check.svg')}"}/
-              Question
-        %div
-          %label{:for => "feedback-ontologysubmissionrequest-check"}
-            %input#feedback-ontologysubmissionrequest-check{:name => "ontology_submissions_request", :type => "checkbox", :value => "Ontology submissions request"}/
-            %span
-              %img.feedback-check-icon{:src => "#{asset_path('check.svg')}"}/
-              Ontology submissions request
+        = render(ChipsComponent.new(name:"bug", value: "Bug"))
+        = render(ChipsComponent.new(name:"proposition", value: "Proposition"))
+        = render(ChipsComponent.new(name:"question", value: "Question"))
+        = render(ChipsComponent.new(name:"ontology_submissions_request", value: "Ontology submissions request"))
+      - if using_captcha?
+        = recaptcha_tags  
       %input.feedback-button{:type => "submit", :value => "Send"}/