Change the strings and colors in the proposals answers states (#121)

* Change the strings in the proposals answers states

For the Metadecidim feature proposals process, we need to change some of
the words that use in the answers:

- "Accepted" becomes "Finished"
- "Evaluating" becomes "Accepted / In progress"

* Change the colors in the proposals answers states

- The "warning" label changes to green
- The "success" label changes to purple

* Add spec

* Override the CSS classes in ProposalsHelper and ProposalMetadataCell

* Fix colors and use variables in CSS

* Add translations for proposals answers announcements

* Fix specs

* Tune a bit the background of the progressing flash

* Lock ChromeDriver to 119.0.6045.105

.github/workflows/decidim_ci.yml

@@ -35,6 +35,9 @@ jobs:
         with:
           ruby-version: ${{ env.RUBY_VERSION }}
           bundler-cache: true
+      - uses: nanasess/setup-chromedriver@v2
+        with:
+          chromedriver-version: 119.0.6045.105
       - uses: actions/setup-node@v2
         with:
           node-version: ${{ env.NODE_VERSION }}

app/packs/stylesheets/decidim/decidim_application.scss

@@ -0,0 +1,27 @@
+:root {
+  --finished: #6639ba;
+  --bg-finished: #f6f5fc;
+  --progressing: #165922;
+  --bg-progressing: #c4ecd0;
+  --bg-progressing-2: #f6fdf9;
+}
+
+span.label.finished {
+  background-color: var(--bg-finished);
+  color: var(--finished);
+}
+
+span.label.progressing {
+  background-color: var(--bg-progressing);
+  color: var(--progressing);
+}
+
+div.flash.finished {
+  background-color: var(--bg-finished);
+  border-color: var(--finished);
+}
+
+div.flash.progressing {
+  background-color: var(--bg-progressing-2);
+  border-color: var(--progressing);
+}

config/initializers/metadecidim_proposals_states.rb

@@ -0,0 +1,50 @@
+# frozen_string_literal: true
+
+# Monkey patch to have a custom announcement color in proposals answers
+Rails.application.config.to_prepare do
+  Decidim::Proposals::ProposalsHelper.module_eval do
+    def proposal_reason_callout_class
+      case @proposal.state
+      when "accepted"
+        "finished"
+      when "evaluating"
+        "progressing"
+      when "rejected"
+        "alert"
+      else
+        ""
+      end
+    end
+
+    def proposal_reason_callout_title
+      i18n_key = case @proposal.state
+                 when "evaluating"
+                   "proposal_in_evaluation_reason"
+                 else
+                   "proposal_#{@proposal.state}_reason"
+                 end
+
+      t(i18n_key, scope: "decidim.proposals.proposals.show")
+    end
+  end
+end
+
+# Monkey patch to have a custom label color in proposals metadata (i.e. in index lists)
+Rails.application.config.to_prepare do
+  Decidim::Proposals::ProposalMetadataCell.class_eval do
+    private
+
+    def state_class
+      case state
+      when "accepted"
+        "finished"
+      when "rejected", "withdrawn"
+        "alert"
+      when "evaluating"
+        "progressing"
+      else
+        "muted"
+      end
+    end
+  end
+end

config/locales/proposals.ca.yml

@@ -0,0 +1,50 @@
+ca:
+  decidim:
+    admin:
+      filters:
+        proposals:
+          state_eq:
+            values:
+              accepted: Finalitzada
+              evaluating: Acceptada / En curs
+    events:
+      proposals:
+        proposal_accepted:
+          affected_user:
+            email_intro: 'El desenvolupament de la teva proposta "%{resource_title}" s''ha completat. Pots llegir la resposta en aquesta pàgina:'
+            email_outro: Has rebut aquesta notificació perquè ets autora de "%{resource_title}".
+            email_subject: S'ha completat el desenvolupament de la teva proposta
+            notification_title: El desenvolupament de la teva proposta <a href="%{resource_path}">%{resource_title}</a> s'ha completat.
+          follower:
+            email_intro: 'El desenvolupament de la proposta "%{resource_title}" s''ha completat. Pots llegir la resposta des d''aquesta pàgina:'
+            email_outro: Has rebut aquesta notificació perquè que segueixes "%{resource_title}". El pots deixar de seguir al link anterior.
+            email_subject: S'ha completat el desenvolupament d'una proposta que segueixes
+            notification_title: El desenvolupament de la proposta <a href="%{resource_path}">%{resource_title}</a> s'ha completat.
+        proposal_evaluating:
+          affected_user:
+            email_intro: 'La teva proposta "%{resource_title}" s''ha acceptat. Pots consultar la resposta en aquesta pàgina:'
+            email_outro: Has rebut aquesta notificació perquè ets autora de "%{resource_title}".
+            email_subject: La teva proposta s'ha acceptat
+            notification_title: La teva proposta <a href="%{resource_path}">%{resource_title}</a> s'ha acceptat.
+          follower:
+            email_intro: 'La proposta "%{resource_title}" s''ha acceptat. Pots consultar una resposta en aquesta pàgina:'
+            email_outro: Has rebut aquesta notificació perquè que segueixes "%{resource_title}". El pots deixar de seguir al link anterior.
+            email_subject: S'ha acceptat una proposta que segueixes
+            notification_title: La proposta <a href="%{resource_path}">%{resource_title}</a> s'ha acceptat.
+    proposals:
+      admin:
+        proposal_answers:
+          form:
+            accepted: Finalitzada
+            evaluating: Acceptada / En curs
+      answers:
+        accepted: Finalitzada
+        evaluating: Acceptada / En curs
+      application_helper:
+        filter_state_values:
+          accepted: Finalitzada
+          evaluating: Acceptada / En curs
+      proposals:
+        show:
+          proposal_accepted_reason: Aquesta proposta ha sigut implementada
+          proposal_in_evaluation_reason: Aquesta proposta ha sigut acceptada

config/locales/proposals.en.yml

@@ -0,0 +1,50 @@
+en:
+  decidim:
+    admin:
+      filters:
+        proposals:
+          state_eq:
+            values:
+              accepted: Finished
+              evaluating: Accepted / In progress
+    events:
+      proposals:
+        proposal_accepted:
+          affected_user:
+            email_intro: 'The development of your proposal "%{resource_title}" is complete. You can read the answer in this page:'
+            email_outro: You have received this notification because you are an author of "%{resource_title}".
+            email_subject: The development of your proposal is complete
+            notification_title: The development of your proposal <a href="%{resource_path}">%{resource_title}</a> is complete.
+          follower:
+            email_intro: 'The development of the proposal "%{resource_title}" is complete. You can read the answer in this page:'
+            email_outro: You have received this notification because you are following "%{resource_title}". You can unfollow it from the previous link.
+            email_subject: The development of a proposal you are following is complete
+            notification_title: The development of the proposal  <a href="%{resource_path}">%{resource_title}</a> is complete.
+        proposal_evaluating:
+          affected_user:
+            email_intro: 'Your proposal "%{resource_title}" has been accepted. You can check for an answer in this page:'
+            email_outro: You have received this notification because you are an author of "%{resource_title}".
+            email_subject: Your proposal has been accepted
+            notification_title: Your proposal <a href="%{resource_path}">%{resource_title}</a> has been accepted and is in progress.
+          follower:
+            email_intro: 'The proposal "%{resource_title}" has been accepted. You can check for an answer in this page:'
+            email_outro: You have received this notification because you are following "%{resource_title}". You can unfollow it from the previous link.
+            email_subject: A proposal you are following has been accepted
+            notification_title: The proposal <a href="%{resource_path}">%{resource_title}</a> has been accepted.
+    proposals:
+      admin:
+        proposal_answers:
+          form:
+            accepted: Finished
+            evaluating: Accepted / In progress
+      answers:
+        accepted: Finished
+        evaluating: Accepted / In progress
+      application_helper:
+        filter_state_values:
+          accepted: Finished
+          evaluating: Accepted / In progress
+      proposals:
+        show:
+          proposal_accepted_reason: This proposal has been implemented
+          proposal_in_evaluation_reason: This proposal has been accepted

config/locales/proposals.es.yml

@@ -0,0 +1,50 @@
+es:
+  decidim:
+    admin:
+      filters:
+        proposals:
+          state_eq:
+            values:
+              accepted: Finalizada
+              evaluating: Aceptada / En curso
+    events:
+      proposals:
+        proposal_accepted:
+          affected_user:
+            email_intro: 'El desarrollo de tu propuesta "%{resource_title}" se ha completado. Puedes leer la respuesta en esta página:'
+            email_outro: Has recibido esta notificación porque eres autora de "%{resource_title}".
+            email_subject: Se ha completado el desarrollo de tu propuesta
+            notification_title: El desarrollo de tu propuesta <a href="%{resource_path}">%{resource_title}</a> se ha completado.
+          follower:
+            email_intro: 'El desarrollo de la propuesta "%{resource_title}" se ha completado. Puedes leer la respuesta en esta página:'
+            email_outro: Has recibido esta notificación porque sigues "%{resource_title}". Puedes dejar de seguirlo en el enlace anterior.
+            email_subject: Se ha completado el desarrollo de una propuesta que estás siguiendo
+            notification_title: El desarrollo de la propuesta <a href="%{resource_path}">%{resource_title}</a> se ha completado.
+        proposal_evaluating:
+          affected_user:
+            email_intro: 'Tu propuesta "%{resource_title}" se ha aceptado. Puedes consultar la respuesta en esta página:'
+            email_outro: Has recibido esta notificación porque eres autora de "%{resource_title}".
+            email_subject: Tu propuesta se ha aceptado
+            notification_title: Tu propuesta <a href="%{resource_path}">%{resource_title}</a> se ha aceptado.
+          follower:
+            email_intro: 'La propuesta "%{resource_title}" se ha aceptado. Puedes encontrar la respuesta en esta página:'
+            email_outro: Has recibido esta notificación porque sigues "%{resource_title}". Puedes dejar de seguirlo en el enlace anterior.
+            email_subject: Se ha aceptado una propuesta que estás siguiendo
+            notification_title: La propuesta <a href="%{resource_path}">%{resource_title}</a> se ha aceptado.
+    proposals:
+      admin:
+        proposal_answers:
+          form:
+            accepted: Finalizada
+            evaluating: Aceptada / En curso
+      answers:
+        accepted: Finalizada
+        evaluating: Aceptada / En curso
+      application_helper:
+        filter_state_values:
+          accepted: Finalizada
+          evaluating: Aceptada / En curso
+      proposals:
+        show:
+          proposal_accepted_reason: Esta propuesta ha sido implementada
+          proposal_in_evaluation_reason: Esta propuesta ha sido aceptada

spec/features/proposals_answers_spec.rb

@@ -0,0 +1,122 @@
+# frozen_string_literal: true
+
+require "rails_helper"
+require "decidim/proposals/test/factories"
+
+describe "Views the proposals answers overrides", type: :system do
+  let!(:finished_proposal) { create :proposal, :accepted, component:, title: { en: "This proposal has finished" } }
+  let!(:progressing_proposal) { create :proposal, :evaluating, component:, title: { en: "This proposal is in progress" } }
+
+  include_context "with a component"
+  let(:manifest_name) { "proposals" }
+
+  describe "index" do
+    before do
+      visit_component
+    end
+
+    it "views the overrided colors" do
+      within "main" do
+        # Capybara understands rgba instead of hexadecimal colors
+        expect(page.find("span.label.finished")).to match_style("background-color" => "rgba(246, 245, 252, 1)")
+        expect(page.find("span.label.finished")).to match_style("color" => "rgba(102, 57, 186, 1)")
+        expect(page.find("span.label.progressing")).to match_style("background-color" => "rgba(196, 236, 208, 1)")
+        expect(page.find("span.label.progressing")).to match_style("color" => "rgba(22, 89, 34, 1)")
+      end
+    end
+
+    context "with the english locale" do
+      it "views the overrided strings" do
+        within "main" do
+          expect(page).to have_content("Finished")
+          expect(page).to have_content("Accepted / In progress")
+        end
+      end
+    end
+
+    context "with another locale" do
+      before do
+        within_language_menu do
+          click_link "Català"
+        end
+      end
+
+      it "views the overrided strings" do
+        within "main" do
+          expect(page).to have_content("Finalitzada")
+          expect(page).to have_content("Acceptada / En curs")
+        end
+      end
+    end
+  end
+
+  describe "show" do
+    before do
+      visit Decidim::EngineRouter.main_proxy(component).proposal_path(proposal)
+    end
+
+    context "with the finished proposal" do
+      let(:proposal) { finished_proposal }
+
+      it "views the overrided colors" do
+        within "main" do
+          # Capybara understands rgba instead of hexadecimal colors
+          expect(page.find("div.flash.finished")).to match_style("background-color" => "rgba(246, 245, 252, 1)")
+          expect(page.find("div.flash.finished")).to match_style("border-color" => "rgb(102, 57, 186)")
+        end
+      end
+
+      it "views the overrided strings" do
+        within "main div.flash.finished" do
+          expect(page).to have_content("This proposal has been implemented")
+        end
+      end
+
+      context "with another locale" do
+        before do
+          within_language_menu do
+            click_link "Castellano"
+          end
+        end
+
+        it "views the overrided strings" do
+          within "main div.flash.finished" do
+            expect(page).to have_content("Esta propuesta ha sido implementada")
+          end
+        end
+      end
+    end
+
+    context "with the progressing proposal" do
+      let(:proposal) { progressing_proposal }
+
+      it "views the overrided colors" do
+        within "main" do
+          # Capybara understands rgba instead of hexadecimal colors
+          expect(page.find("div.flash.progressing")).to match_style("background-color" => "rgba(246, 253, 249, 1)")
+          expect(page.find("div.flash.progressing")).to match_style("border-color" => "rgb(22, 89, 34)")
+        end
+      end
+
+      it "views the overrided strings" do
+        within "main div.flash.progressing" do
+          expect(page).to have_content("This proposal has been accepted")
+        end
+      end
+
+      context "with another locale" do
+        before do
+          within_language_menu do
+            click_link "Català"
+          end
+        end
+
+        it "views the overrided strings" do
+          within "main div.flash.progressing" do
+            expect(page).to have_content("Aquesta proposta ha sigut acceptada")
+          end
+        end
+      end
+    end
+  end
+end