decidim-forms 0.27.4 → 0.28.0.rc4

data/app/packs/stylesheets/decidim/forms/forms.scss

@@ -1,81 +1,111 @@
-.questionnaire-question_readonly{
-  font-weight: bold;
-  font-size: .875rem;
+.answer-questionnaire {
+  @apply border-t-2 border-background pt-8;
 
-  p{
-    margin-bottom: .5rem;
+  &__step {
+    @apply space-y-10;
   }
 
-  em{
-    font-weight: normal;
-    font-size: 90%;
+  &__step-counter {
+    @apply inline-block text-lg text-black font-semibold bg-tertiary;
   }
 
-  p + ul{
-    margin-top: -.5rem;
+  &__step-heading {
+    @apply space-y-4;
+
+    div {
+      @apply text-gray-2 text-lg;
+    }
   }
-}
 
-.questionnaire-question_readonly-answers{
-  margin-bottom: .5rem;
+  &__question {
+    @apply space-y-4;
+  }
 
-  &.single_option{
-    list-style-type: disc;
+  &__question-label {
+    @apply text-black text-xl font-semibold relative before:content-[attr(data-answer-idx)] before:w-6 before:h-6 md:before:absolute md:before:-left-4 md:before:-translate-x-full before:inline-flex before:justify-center before:rounded-full before:bg-background before:text-lg before:text-gray-2 before:font-semibold;
   }
 
-  &.multiple_option{
-    list-style-type: square;
+  &__question-description {
+    @apply text-gray-2;
   }
 
-  &.sorting{
-    list-style-type: circle;
+  &__multiple-option,
+  &__single-option {
+    @apply text-gray-2 space-y-4;
+
+    label {
+      @apply flex cursor-pointer;
+    }
+
+    label + * {
+      @apply mt-2 w-full;
+    }
   }
-}
 
-.questionnaire-question_readonly-answer{
-  font-weight: normal;
-}
+  &__multiple-matrix,
+  &__single-matrix {
+    @apply text-gray-2 text-sm rounded overflow-x-auto;
+
+    table {
+      @apply w-full;
+    }
+
+    th,
+    td {
+      @apply border border-background px-2 py-2.5;
+    }
 
-.questionnaire-question-matrix{
-  display: block;
-  overflow-x: auto;
+    thead td,
+    th {
+      @apply bg-background font-normal;
+    }
+
+    td:not(:first-child) {
+      @apply text-center [&>*]:flex [&>*]:items-center [&>*]:justify-center;
+    }
+
+    input[type="text"] {
+      @apply min-w-[120px] w-full;
+    }
+  }
+
+  &__sorting {
+    @apply flex items-center justify-between relative text-gray-2 pl-8 pr-2 py-2.5 border-2 border-background rounded cursor-pointer before:content-[counter(item)] before:absolute before:left-0 before:top-0 before:bg-background before:w-5 before:h-full before:grid before:place-items-center before:text-gray-2 before:font-bold;
 
-  .collection-input{
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    flex-grow: 1;
-    flex-basis: 0;
+    counter-increment: item;
 
-    input[type="text"]{
-      margin-top: auto;
-      margin-bottom: auto;
+    &-container {
+      @apply space-y-4;
+
+      counter-reset: item;
     }
 
-    input[type="checkbox"],
-    input[type="radio"]{
-      margin-bottom: 0;
+    input {
+      @apply hidden;
+    }
 
-      & ~ input[type="text"]{
-        margin-left: .5rem;
-      }
+    svg {
+      @apply text-gray fill-current w-5 h-5;
     }
   }
 
-  tr,
-  tr:nth-child(2n){
-    background: initial;
-    border-bottom: 1px solid #f0f0f0;
+  &__footer {
+    @apply flex flex-col gap-10 pt-10 border-t-2 border-background text-gray-2 only:border-t-0;
   }
 
-  thead td{
-    text-align: center;
+  &__tos {
+    @apply space-y-4 cursor-pointer;
+
+    div {
+      @apply text-sm;
+    }
   }
 
-  td{
-    min-width: 100px;
-    border-right: 1px solid #f0f0f0;
+  &__submit {
+    @apply flex items-center justify-between;
+
+    > *:only-child {
+      @apply ml-auto;
+    }
   }
 }
-
-@import "stylesheets/decidim/forms/questionnaire-answers-pdf";

data/app/packs/stylesheets/decidim/forms/questionnaire-answers-pdf.scss

@@ -1,6 +1,6 @@
-.questionnaire-answers{
-  .header{
-    h1{
+.questionnaire-answers {
+  .header {
+    h1 {
       margin: 0;
       padding: 25px;
       background: rgb(59, 69, 87);
@@ -8,7 +8,7 @@
       border-radius: 4px 4px 0 0;
     }
 
-    .description{
+    .description {
       margin: 0;
       padding: 25px;
       background: #f6f6f6;
@@ -17,12 +17,12 @@
     }
   }
 
-  .answer{
+  .answer {
     margin-top: 25px;
     background: #f6f6f6;
     border-radius: 0 0 4px 4px;
 
-    .title{
+    .title {
       page-break-inside: avoid;
       border-radius: 4px 4px 0 0;
       padding: 10px 25px;
@@ -30,7 +30,7 @@
       color: white;
     }
 
-    .participant-info{
+    .participant-info {
       margin-top: 0;
       padding: 10px 25px;
       width: 100%;
@@ -39,27 +39,27 @@
       color: #202751;
       page-break-inside: avoid;
 
-      th:first-child{
+      th:first-child {
         text-align: left;
       }
 
-      td:first-child{
+      td:first-child {
         text-align: left;
       }
 
-      th:last-child{
+      th:last-child {
         text-align: right;
       }
 
-      td:last-child{
+      td:last-child {
         text-align: right;
       }
     }
 
-    .answers{
+    .answers {
       padding: 25px;
 
-      .question{
+      .question {
         page-break-inside: avoid;
         font-size: inherit;
         color: #202751;

data/app/presenters/decidim/forms/admin/questionnaire_participant_presenter.rb

@@ -34,7 +34,7 @@ module Decidim
         end
 
         def answers
-          sibilings.map { |answer| QuestionnaireAnswerPresenter.new(answer: answer) }
+          sibilings.map { |answer| QuestionnaireAnswerPresenter.new(answer:) }
         end
 
         def first_short_answer
@@ -56,7 +56,7 @@ module Decidim
         def sibilings
           Answer.not_separator
                 .not_title_and_description
-                .where(questionnaire: questionnaire, session_token: participant.session_token)
+                .where(questionnaire:, session_token: participant.session_token)
                 .joins(:question).order("decidim_forms_questions.position ASC")
         end
       end

data/app/presenters/decidim/forms/admin_log/questionnaire_presenter.rb

@@ -6,8 +6,8 @@ module Decidim
       # This class holds the logic to present a `Decidim::Forms::Questionnaire`
       # for the `AdminLog` log.
       #
-      # Usage should be automatic and you shouldn't need to call this class
-      # directly, but here's an example:
+      # Usage should be automatic and you should not need to call this class
+      # directly, but here is an example:
       #
       #    action_log = Decidim::ActionLog.last
       #    view_helpers # => this comes from the views

data/app/presenters/decidim/forms/answer_option_presenter.rb

@@ -13,7 +13,7 @@ module Decidim
       end
 
       def as_json(*_args)
-        { id: id, body: translated_body }
+        { id:, body: translated_body }
       end
     end
   end

data/app/queries/decidim/forms/questionnaire_participants.rb

@@ -27,7 +27,7 @@ module Decidim
       end
 
       def participant(session_token)
-        query.find_by(session_token: session_token)
+        query.find_by(session_token:)
       end
 
       def participants

data/app/views/decidim/forms/admin/questionnaires/_answer_option.html.erb

@@ -5,7 +5,7 @@
     <h2 class="card-title">
     <span><%= t(".answer_option") %></span>
     <% if editable %>
-      <button class="button small alert hollow remove-answer-option button--title">
+      <button class="button button__sm button__secondary small alert hollow remove-answer-option button--title">
         <%= t(".remove") %>
       </button>
     <% end %>

data/app/views/decidim/forms/admin/questionnaires/_answer_option_template.html.erb

@@ -2,6 +2,6 @@
 
 <script type="text/template" class="decidim-answer-option-template decidim-template" id="<%= template_id %>">
   <%= fields_for "questionnaire[questions][#{question.to_param}][answer_options][]", blank_answer_option do |answer_option_form| %>
-    <%= render "decidim/forms/admin/questionnaires/answer_option", form: answer_option_form, question: question, editable: editable %>
+    <%= render "decidim/forms/admin/questionnaires/answer_option", form: answer_option_form, question:, editable: %>
   <% end %>
 </script>

data/app/views/decidim/forms/admin/questionnaires/_display_condition.html.erb

@@ -5,7 +5,7 @@
     <h2 class="card-title">
     <span><%= t(".display_condition") %></span>
     <% if editable %>
-      <button class="button small alert hollow remove-display-condition button--title">
+      <button class="button button__sm button__secondary small alert hollow remove-display-condition button--title">
         <%= t(".remove") %>
       </button>
     <% end %>
@@ -36,7 +36,7 @@
           :condition_type,
           options_from_collection_for_select(display_condition_types, :first, :last, display_condition.condition_type),
           { prompt: t(".select_condition_type"), label: t(".condition_type") },
-          disabled: !editable,
+          disabled: !editable
         )
       %>
     </div>

data/app/views/decidim/forms/admin/questionnaires/_display_condition_template.html.erb

@@ -2,6 +2,6 @@
 
 <script type="text/template" class="decidim-template" id="<%= template_id %>">
   <%= fields_for "questionnaire[questions][#{question.to_param}][display_conditions][]", blank_display_condition do |display_condition_form| %>
-    <%= render "decidim/forms/admin/questionnaires/display_condition", form: display_condition_form, question: question, editable: editable %>
+    <%= render "decidim/forms/admin/questionnaires/display_condition", form: display_condition_form, question:, editable: %>
   <% end %>
 </script>

data/app/views/decidim/forms/admin/questionnaires/_form.html.erb

@@ -1,107 +1,81 @@
-<div class="card">
-  <div class="card-divider">
-    <h2 class="card-title">
-      <%= edit_questionnaire_title %>
-      <% unless template? questionnaire.questionnaire_for %>
-        <% if allowed_to? :preview, :questionnaire %>
-          <div class="button--title">
-            <%= link_to t(".preview"), public_url, class: "button tiny button--simple", target: :_blank %>
-          </div>
-        <% end %>
-        <% if questionnaire.answers.any? %>
-          <div class="button--title">
-            <%= export_dropdown(current_component, questionnaire.id) if allowed_to? :export_answers, :questionnaire %>
-          </div>
-          <div class="button--title">
-            <% if allowed_to? :show, :questionnaire_answers %>
-              <%= link_to t("actions.show", scope: "decidim.forms.admin.questionnaires"), questionnaire_participants_url, class: "button tiny button--title new" %>
-            <% end %>
-          </div>
-        <% else %>
-          <button class="button tiny button--title" disabled><%= t("empty", scope: "decidim.forms.admin.questionnaires.answers") %></button>
-        <% end %>
-      <% end %>
-    </h2>
-  </div>
-  <div class="card-section">
-    <div class="row column">
-      <%= form.translated :text_field, :title, autofocus: true %>
-    </div>
-    <div class="row column">
-      <%= form.translated :editor, :description, toolbar: :full, lines: 30, label: t("models.components.description", scope: "decidim.forms.admin") %>
-    </div>
-    <div class="row column">
-      <%= form.translated :editor, :tos, toolbar: :content, lines: 10, label: t("models.components.tos", scope: "decidim.forms.admin") %>
+<div class="form__wrapper">
+  <div class="card pt-4">
+    <div class="card-section">
+      <div class="row column">
+        <%= form.translated :text_field, :title, autofocus: true, aria: { label: :title } %>
+      </div>
+      <div class="row column">
+        <%= form.translated :editor, :description, toolbar: :full, lines: 30, label: t("models.components.description", scope: "decidim.forms.admin"), aria: { label: :description } %>
+      </div>
+      <div class="row column">
+        <%= form.translated :editor, :tos, toolbar: :content, lines: 10, label: t("models.components.tos", scope: "decidim.forms.admin"), aria: { label: :tos } %>
+      </div>
     </div>
   </div>
 </div>
 
-<div class="questionnaire-questions">
-  <div class="row column text-center">
-    <button type="button" class="button collapse-all"><%= t(".collapse") %></button>
-    <button type="button" class="button expand-all"><%= t(".expand") %></button>
+<div class="questionnaire-questions form__wrapper">
+  <div class="row column text-center my-4">
+    <button type="button" class="button button__sm button__secondary collapse-all"><%= t(".collapse") %></button>
+    <button type="button" class="button button__sm button__secondary expand-all"><%= t(".expand") %></button>
   </div>
 
   <% if questionnaire.questions_editable? %>
     <% if questionnaire.answers.any? && !questionnaire.published? %>
-      <div class="callout warning">
-        <%= t(".unpublished_warning") %>
-      </div>
+      <%= cell("decidim/announcement", t(".unpublished_warning"), callout_class: "warning" ) %>
     <% end %>
 
     <%= fields_for "questionnaire[questions][#{blank_question.to_param}]", blank_question do |question_form| %>
       <script type="text/template" class="decidim-question-template decidim-template" id="question-template">
         <%= render "decidim/forms/admin/questionnaires/question",
-              form: question_form,
-              id: tabs_id_for_question(blank_question),
-              editable: questionnaire.questions_editable?,
-              answer_option_template_selector: "#answer-option-template-dummy",
-              display_condition_template_selector: "#display-condition-template-dummy",
-              matrix_row_template_selector: "#matrix-row-template-dummy" %>
+                   form: question_form,
+                   id: tabs_id_for_question(blank_question),
+                   editable: questionnaire.questions_editable?,
+                   answer_option_template_selector: "#answer-option-template-dummy",
+                   display_condition_template_selector: "#display-condition-template-dummy",
+                   matrix_row_template_selector: "#matrix-row-template-dummy" %>
       </script>
       <script type="text/template" class="decidim-separator-template decidim-template" id="separator-template">
         <%= render "decidim/forms/admin/questionnaires/separator",
-              form: question_form,
-              id: tabs_id_for_question(blank_question),
-              editable: questionnaire.questions_editable? %>
+                   form: question_form,
+                   id: tabs_id_for_question(blank_question),
+                   editable: questionnaire.questions_editable? %>
       </script>
       <script type="text/template" class="decidim-title-and-description-template decidim-template" id="title-and-description-template">
         <%= render "decidim/forms/admin/questionnaires/title_and_description",
-              form: question_form,
-              id: tabs_id_for_question(blank_question),
-              editable: questionnaire.questions_editable? %>
+                   form: question_form,
+                   id: tabs_id_for_question(blank_question),
+                   editable: questionnaire.questions_editable? %>
       </script>
       <%= render "decidim/forms/admin/questionnaires/answer_option_template", form: question_form, editable: questionnaire.questions_editable?, template_id: "answer-option-template-dummy" %>
       <%= render "decidim/forms/admin/questionnaires/display_condition_template", form: question_form, editable: questionnaire.questions_editable?, template_id: "display-condition-template-dummy" %>
       <%= render "decidim/forms/admin/questionnaires/matrix_row_template", form: question_form, editable: questionnaire.questions_editable?, template_id: "matrix-row-template-dummy" %>
     <% end %>
   <% else %>
-    <div class="callout warning">
-      <%= t(".already_answered_warning") %>
-    </div>
+    <%= cell("decidim/announcement", t(".already_answered_warning"), callout_class: "warning" ) %>
   <% end %>
 
-  <div class="questionnaire-questions-list">
+  <div class="questionnaire-questions-list flex flex-col py-6 gap-6 last:pb-0">
     <% @form.questions.each_with_index do |question, index| %>
       <%= fields_for "questionnaire[questions][]", question do |question_form| %>
         <% if question.separator? %>
           <%= render "decidim/forms/admin/questionnaires/separator",
-                form: question_form,
-                id: tabs_id_for_question(question),
-                editable: questionnaire.questions_editable? %>
+                     form: question_form,
+                     id: tabs_id_for_question(question),
+                     editable: questionnaire.questions_editable? %>
         <% elsif question.title_and_description? %>
           <%= render "decidim/forms/admin/questionnaires/title_and_description",
-                form: question_form,
-                id: tabs_id_for_question(question),
-                editable: questionnaire.questions_editable? %>
+                     form: question_form,
+                     id: tabs_id_for_question(question),
+                     editable: questionnaire.questions_editable? %>
         <% else %>
           <%= render "decidim/forms/admin/questionnaires/question",
-                form: question_form,
-                id: tabs_id_for_question(question),
-                editable: questionnaire.questions_editable?,
-                display_condition_template_selector: "#display-condition-template-#{index}",
-                answer_option_template_selector: "#answer-option-template-#{index}",
-                matrix_row_template_selector: "#matrix-row-template-#{index}" %>
+                     form: question_form,
+                     id: tabs_id_for_question(question),
+                     editable: questionnaire.questions_editable?,
+                     display_condition_template_selector: "#display-condition-template-#{index}",
+                     answer_option_template_selector: "#answer-option-template-#{index}",
+                     matrix_row_template_selector: "#matrix-row-template-#{index}" %>
           <%= render "decidim/forms/admin/questionnaires/display_condition_template", form: question_form, editable: questionnaire.questions_editable?, template_id: "display-condition-template-#{index}" %>
           <%= render "decidim/forms/admin/questionnaires/answer_option_template", form: question_form, editable: questionnaire.questions_editable?, template_id: "answer-option-template-#{index}" %>
           <%= render "decidim/forms/admin/questionnaires/matrix_row_template", form: question_form, editable: questionnaire.questions_editable?, template_id: "matrix-row-template-#{index}" %>
@@ -111,16 +85,20 @@
   </div>
 
   <% if questionnaire.questions_editable? %>
-    <button class="button add-question"><%= t(".add_question") %></button>
-    <button class="button add-separator"><%= t(".add_separator") %></button>
-    <button class="button add-title-and-description"><%= t(".add_title_and_description") %></button>
+    <div class="mt-4">
+      <button class="button button__sm button__secondary add-question"><%= t(".add_question") %></button>
+      <button class="button button__sm button__secondary add-separator"><%= t(".add_separator") %></button>
+      <button class="button button__sm button__secondary add-title-and-description"><%= t(".add_title_and_description") %></button>
+    </div>
   <% end %>
 </div>
 
-<%= javascript_pack_tag "decidim_forms_admin", defer: false %>
+<%= append_javascript_pack_tag "decidim_forms_admin" %>
 
 <% if questionnaire.questions_editable? %>
   <script>
-    window.Decidim.createEditableForm()
+    document.addEventListener("DOMContentLoaded", function () {
+      window.Decidim.createEditableForm();
+    });
   </script>
 <% end %>

data/app/views/decidim/forms/admin/questionnaires/_matrix_row.html.erb

@@ -5,7 +5,7 @@
     <h2 class="card-title">
     <span><%= t(".matrix_row") %></span>
     <% if editable %>
-      <button class="button small alert hollow remove-matrix-row button--title">
+      <button class="button button__sm button__secondary small alert hollow remove-matrix-row button--title">
         <%= t(".remove") %>
       </button>
     <% end %>

data/app/views/decidim/forms/admin/questionnaires/_matrix_row_template.html.erb

@@ -2,6 +2,6 @@
 
 <script type="text/template" class="decidim-matrix-row-template decidim-template" id="<%= template_id %>">
   <%= fields_for "questionnaire[questions][#{question.to_param}][matrix_rows][]", blank_matrix_row do |matrix_row_form| %>
-    <%= render "decidim/forms/admin/questionnaires/matrix_row", form: matrix_row_form, question: question, editable: editable %>
+    <%= render "decidim/forms/admin/questionnaires/matrix_row", form: matrix_row_form, question:, editable: %>
   <% end %>
 </script>