Add preview of questions to an election

decidim-elections/app/assets/stylesheets/decidim/elections/focus/_accordion.scss

@@ -0,0 +1,36 @@
+.accordion{
+  background: transparent;
+
+  .accordion-title{
+    font-size: $global-font-size;
+    color: inherit;
+    border: 0;
+    border-radius: 0;
+
+    span{
+      cursor: move;
+    }
+
+    &:focus{
+      background: transparent;
+    }
+  }
+
+  .accordion-item{
+    // Override Foundation
+    &:first-child > :first-child,
+    &:last-child:not(.is-active) > .accordion-title{
+      border: 0;
+      border-radius: 0;
+    }
+  }
+
+  .accordion-content{
+    border: 0;
+
+    .tabs-title > a[aria-selected="true"],
+    .tabs-content{
+      background: transparent;
+    }
+  }
+}

decidim-elections/app/assets/stylesheets/decidim/elections/focus/_evote.scss

@@ -276,4 +276,57 @@
   &__poll-id{
     overflow-wrap: anywhere;
   }
+
+  &__preview{
+    .accordion-title::before{
+      font-size: 1.5rem;
+      margin-top: -.75rem;
+      color: $anchor-color;
+      font-weight: normal;
+    }
+  }
+
+  &__preview-question{
+    border: $border;
+    font-weight: 600;
+
+    &:not(:first-child){
+      border-top: 0;
+    }
+
+    .label{
+      margin-left: .5rem;
+    }
+  }
+
+  &__preview-result{
+    line-height: 1.2;
+    margin-bottom: 1rem;
+  }
+
+  &__preview-option{
+    margin-bottom: -.2rem;
+    font-size: 1rem;
+  }
+
+  &__preview-bar{
+    display: flex;
+    align-items: center;
+
+    .progress{
+      flex-grow: 1;
+      margin-right: 1rem;
+    }
+  }
+
+  &__preview-label{
+    font-size: .8rem;
+    margin-top: -.2rem;
+  }
+
+  &__preview-perc{
+    width: 2rem;
+    text-align: right;
+    font-weight: bold;
+  }
 }

decidim-elections/app/views/decidim/elections/elections/show.html.erb

@@ -49,14 +49,42 @@ edit_link(
           <%= t(".vote") %>
         <% end %>
       <% else %>
-        <span class="title-action__action button small disabled"><%= t(".vote") %></span>
+        <span class="button disabled"><%= t(".vote") %></span>
       <% end %>
 
       <% if allowed_to? :preview, :election, election: election %>
-        <%= link_to new_election_vote_path(election.id), class: "title-action__action button small" do %>
+        <%= link_to new_election_vote_path(election.id), class: "button" do %>
           <%= t(".preview") %>
         <% end %>
       <% end %>
     </div>
   </div>
 </div>
+
+<!-- Election questions preview -->
+<div class="row section">
+  <div class="columns large-8">
+    <h2 class="section-heading"><%= t(".questions_preview.title") %></h2>
+    <p>
+      <%= t(".questions_preview.description") %>:
+    </p>
+    <ul class="accordion mb-m evote__preview"
+        data-accordion
+        data-multi-expand="true"
+        data-allow-all-closed="true">
+          <% election.questions.each do |question| %>
+            <li class="accordion-item evote__preview-question" data-accordion-item>
+              <a href="#" class="accordion-title flex--sbc"><%= translated_attribute(question.title) %></a>
+              <div class="accordion-content" data-tab-content>
+                <strong><%= t(".questions_preview.available_answers") %>:</strong>
+                <ul>
+                  <% question.answers.each do |answer| %>
+                  <li><%= translated_attribute(answer.title) %></li>
+                  <% end %>
+                </ul>
+              </div>
+            </li>
+          <% end %>
+      </ul>
+  </div>
+</div>

decidim-elections/config/locales/en.yml

@@ -204,8 +204,12 @@ en:
           filter_by: Filter by
           unfold: Unfold
         show:
-          back: All elections
+          back: Available elections
           preview: Preview
+          questions_preview:
+            available_answers: Available answers
+            description: These are the questions you will find in the voting process
+            title: Election questions
           vote: Vote
           voting_period_status:
             finished: Voting began on %{start_time} and ended on %{end_time}

decidim-elections/spec/system/explore_elections_spec.rb

@@ -24,6 +24,7 @@
 
         expect(page).to have_content("Voting began on")
         expect(page).not_to have_content("All elections")
+        expect(page).to have_content("These are the questions you will find in the voting process")
       end
     end
 
@@ -136,6 +137,7 @@
   describe "show" do
     let(:elections_count) { 1 }
     let(:election) { elections.first }
+    let(:question) { election.questions.first }
     let(:image) { create(:attachment, :with_image, attached_to: election) }
 
     before do
@@ -149,6 +151,16 @@
       expect(page).to have_content(election.end_time.day)
     end
 
+    it "shows accordion with questions and answers" do
+      expect(page).to have_css(".accordion-item", count: election.questions.count)
+      expect(page).not_to have_css(".accordion-content")
+
+      within ".accordion-item:first-child" do
+        click_link translated(question.title)
+        expect(page).to have_css("li", count: question.answers.count)
+      end
+    end
+
     context "with attached photos" do
       it "shows the image" do
         expect(page).to have_xpath("//img[@src=\"#{image.url}\"]")