From 10cfa0e59f0e603172ce58d8d5bcc60327b8747f Mon Sep 17 00:00:00 2001 From: taitus Date: Mon, 29 May 2023 12:10:21 +0200 Subject: [PATCH] Refactor scss for in favor against component In order to reduce the code used to add styles to the buttons, we removed the classes that had been added and handled it with the new aria-pressed attribute --- app/assets/stylesheets/in_favor_against.scss | 34 +++------------- .../in_favor_against_component.html.erb | 2 - .../shared/in_favor_against_component.rb | 15 ------- spec/system/votes_spec.rb | 40 ++++++++----------- 4 files changed, 22 insertions(+), 69 deletions(-) diff --git a/app/assets/stylesheets/in_favor_against.scss b/app/assets/stylesheets/in_favor_against.scss index f3c6988e7..6e8d48481 100644 --- a/app/assets/stylesheets/in_favor_against.scss +++ b/app/assets/stylesheets/in_favor_against.scss @@ -25,10 +25,10 @@ &:not([disabled]) { &:hover, - &:active { + &:active, + &[aria-pressed=true] { color: #fff; cursor: pointer; - opacity: 1 !important; } } } @@ -38,7 +38,8 @@ &:not([disabled]) { &:hover, - &:active { + &:active, + &[aria-pressed=true] { background: $like; border: 2px solid $like; } @@ -50,19 +51,14 @@ &:not([disabled]) { &:hover, - &:active { + &:active, + &[aria-pressed=true] { background: $unlike; border: 2px solid $unlike; } } } - .like, - .unlike { - vertical-align: super; - text-decoration: none; - } - .percentage { display: inline-block; font-size: $small-font-size; @@ -76,22 +72,4 @@ padding-right: 0; } } - - .voted { - color: #fff; - } - - .in-favor .voted { - background: $like; - border: 2px solid $like; - } - - .against .voted { - background: $unlike; - border: 2px solid $unlike; - } - - .no-voted { - opacity: 0.3; - } } diff --git a/app/components/shared/in_favor_against_component.html.erb b/app/components/shared/in_favor_against_component.html.erb index 671215bd4..be4040983 100644 --- a/app/components/shared/in_favor_against_component.html.erb +++ b/app/components/shared/in_favor_against_component.html.erb @@ -1,7 +1,6 @@
<%= button_to polymorphic_path(votable, action: :vote, value: "yes"), - class: "like #{voted_classes[:in_favor]}", title: t("votes.agree"), "aria-label": agree_aria_label, "aria-pressed": pressed?("yes"), @@ -14,7 +13,6 @@
<%= button_to polymorphic_path(votable, action: :vote, value: "no"), - class: "unlike #{voted_classes[:against]}", title: t("votes.disagree"), "aria-label": disagree_aria_label, "aria-pressed": pressed?("no"), diff --git a/app/components/shared/in_favor_against_component.rb b/app/components/shared/in_favor_against_component.rb index 419a51995..a8561e458 100644 --- a/app/components/shared/in_favor_against_component.rb +++ b/app/components/shared/in_favor_against_component.rb @@ -8,21 +8,6 @@ class Shared::InFavorAgainstComponent < ApplicationComponent private - def voted_classes - @voted_classes ||= css_classes_for_vote - end - - def css_classes_for_vote - case current_user&.voted_as_when_voted_for(votable) - when true - { in_favor: "voted", against: "no-voted" } - when false - { in_favor: "no-voted", against: "voted" } - else - { in_favor: "", against: "" } - end - end - def agree_aria_label t("votes.agree_label", title: votable.title) end diff --git a/spec/system/votes_spec.rb b/spec/system/votes_spec.rb index 83ca2f305..abed25032 100644 --- a/spec/system/votes_spec.rb +++ b/spec/system/votes_spec.rb @@ -19,37 +19,31 @@ describe "Votes" do within("#debates") do within("#debate_#{debate1.id}_votes") do within(".in-favor") do - expect(page).to have_button class: "voted" - expect(page).not_to have_button class: "no-voted" + expect(page).to have_css "button[aria-pressed='true']" end within(".against") do - expect(page).to have_button class: "no-voted" - expect(page).not_to have_button class: "voted" + expect(page).to have_css "button[aria-pressed='false']" end end within("#debate_#{debate2.id}_votes") do within(".in-favor") do - expect(page).not_to have_button class: "voted" - expect(page).not_to have_button class: "no-voted" + expect(page).to have_css "button[aria-pressed='false']" end within(".against") do - expect(page).not_to have_button class: "no-voted" - expect(page).not_to have_button class: "voted" + expect(page).to have_css "button[aria-pressed='false']" end end within("#debate_#{debate3.id}_votes") do within(".in-favor") do - expect(page).to have_button class: "no-voted" - expect(page).not_to have_button class: "voted" + expect(page).to have_css "button[aria-pressed='false']" end within(".against") do - expect(page).to have_button class: "voted" - expect(page).not_to have_button class: "no-voted" + expect(page).to have_css "button[aria-pressed='true']" end end end @@ -63,14 +57,12 @@ describe "Votes" do within(".in-favor") do expect(page).to have_content "0%" - expect(page).not_to have_button class: "voted" - expect(page).not_to have_button class: "no-voted" + expect(page).to have_css "button[aria-pressed='false']" end within(".against") do expect(page).to have_content "0%" - expect(page).not_to have_button class: "voted" - expect(page).not_to have_button class: "no-voted" + expect(page).to have_css "button[aria-pressed='false']" end end @@ -83,12 +75,12 @@ describe "Votes" do within(".in-favor") do expect(page).to have_content "100%" - expect(page).to have_button class: "voted" + expect(page).to have_css "button[aria-pressed='true']" end within(".against") do expect(page).to have_content "0%" - expect(page).to have_css("button.no-voted") + expect(page).to have_css "button[aria-pressed='false']" end expect(page).to have_content "1 vote" @@ -97,12 +89,12 @@ describe "Votes" do within(".in-favor") do expect(page).to have_content "0%" - expect(page).to have_button class: "no-voted" + expect(page).to have_css "button[aria-pressed='false']" end within(".against") do expect(page).to have_content "100%" - expect(page).to have_button class: "voted" + expect(page).to have_css "button[aria-pressed='true']" end expect(page).to have_content "1 vote" @@ -136,12 +128,12 @@ describe "Votes" do within(".in-favor") do expect(page).to have_content "50%" - expect(page).to have_button class: "voted" + expect(page).to have_css "button[aria-pressed='true']" end within(".against") do expect(page).to have_content "50%" - expect(page).to have_button class: "no-voted" + expect(page).to have_css "button[aria-pressed='false']" end end @@ -154,12 +146,12 @@ describe "Votes" do within(".in-favor") do expect(page).to have_content "100%" - expect(page).to have_button class: "voted" + expect(page).to have_css "button[aria-pressed='true']" end within(".against") do expect(page).to have_content "0%" - expect(page).to have_button class: "no-voted" + expect(page).to have_css "button[aria-pressed='false']" end expect(page).to have_content "1 vote"