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
ontoportal · Feb 16, 2023 · 1f31aff · 1f31aff
1 parent 3d9f3b0
commit 1f31aff
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 60 deletions.
diff --git 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;
-}
+}
diff --git 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"}/