Added toggleable guidance/comments section

app/assets/stylesheets/blocks/_question_form.scss

@@ -0,0 +1,35 @@
+.question-body {
+    display: flex;
+    padding: 15px 0;
+    .question-section {
+        flex: 8;
+        position: relative;
+        .toggle-guidance-section {
+            position: absolute;
+            top: 0;
+            right: 0;
+            background-color: $color-grey-darker;
+            color: $color-white;
+            padding: 10px 5px;
+            cursor: pointer;
+
+            text-orientation: mixed;
+            writing-mode: vertical-rl;
+            &.disabled {
+                background-color: $color-muted;
+                cursor: not-allowed;
+            }
+        }
+        .question-form {
+            padding-right: 50px;
+            padding-top: 10px;
+        }
+    }
+
+    .guidance-section {
+        flex: 4;
+        border-left: 5px solid $color-grey-darker;
+        padding-left: 5px;
+    }
+
+}

app/javascript/src/answers/edit.js

@@ -185,4 +185,13 @@ $(() => {
   }
 
   datePicker();
+
+  // Clicking the 'Comments & Guidance' div should toggle the guidance & comments section
+  $(document).on('click', '.toggle-guidance-section', (e) => {
+    const target = $(e.currentTarget);
+    target.parents('.question-body').find('.guidance-section').toggle();
+    target.find('span.fa-chevron-right, span.fa-chevron-left')
+      .toggleClass('fa-chevron-right')
+      .toggleClass('fa-chevron-left');
+  });
 });

app/views/phases/_edit_plan_answers.html.erb

@@ -65,9 +65,18 @@
                     answer = Answer.new({ plan: plan, question: question })
                   end
                 %>
-                <div class="row">
-                  <div class="col-md-8">
+                <div class="question-body">
+                  <div class="question-section">
                     <!-- Answer Section -->
+                    <% 
+                      guidance_comments_opened_by_default = Rails.configuration.x.application.guidance_comments_opened_by_default
+                    %>
+                    <% if Rails.configuration.x.application.guidance_comments_toggleable %>
+                      <div class="toggle-guidance-section">
+                        <span class="fas fa-chevron-<%= guidance_comments_opened_by_default ? 'right': 'left' %>"></span> 
+                        <span><%= _('Comments & Guidance') %></span>
+                      </div>
+                    <% end %>
                     <div class="question-form">
                       <div id="<%= "answer-locking-#{question.id}" %>"
                         class="answer-locking">
@@ -87,7 +96,8 @@
                       </div>
                     </div>
                   </div>
-                  <div class="col-md-4">
+                  <% style = guidance_comments_opened_by_default ? '' : 'display: none' %>
+                  <div class="guidance-section" style="<%= style %>">
                     <!-- Guidances and notes partial view -->
                     <%= render partial: '/phases/guidances_notes', locals: {
                       plan: plan,

config/initializers/_dmproadmap.rb

@@ -122,6 +122,10 @@ class Application < Rails::Application
     config.x.application.require_contributor_name = false
     config.x.application.require_contributor_email = false
 
+    # Defines if Guidances/Comments in toggleable & if it's opened by default
+    config.x.application.guidance_comments_toggleable = true
+    config.x.application.guidance_comments_opened_by_default = true
+
     # ------------------- #
     # SHIBBOLETH SETTINGS #
     # ------------------- #