From 04dd6694063b2b34b5aabe84e7aece17efcb35a9 Mon Sep 17 00:00:00 2001
From: Chris Lawton <chris.lawton@torchbox.com>
Date: Wed, 20 Feb 2019 12:28:11 +0000
Subject: [PATCH] add traffic light to review block
---
.../app/src/components/ReviewBlock/index.js | 18 +++++++++++++++++-
1 file changed, 17 insertions(+), 1 deletion(-)
diff --git a/opentech/static_src/src/app/src/components/ReviewBlock/index.js b/opentech/static_src/src/app/src/components/ReviewBlock/index.js
index 1e99c51b2..06e24dd83 100644
--- a/opentech/static_src/src/app/src/components/ReviewBlock/index.js
+++ b/opentech/static_src/src/app/src/components/ReviewBlock/index.js
@@ -36,6 +36,22 @@ const ReviewBlock = ({ review }) => {
<Review key={review.id} {...{ review }} />)
}
+ const renderTrafficLight = () => {
+ const verdict = review.recommendation.display;
+ const letter = verdict.charAt(0)
+
+ let modifierClass;
+ if (verdict === 'No') {
+ modifierClass = 'red'
+ } else if (verdict === 'Yes') {
+ modifierClass = 'green'
+ } else if (verdict === 'Maybe') {
+ modifierClass = 'amber'
+ }
+
+ return <div aria-label="Traffic light score" className={`traffic-light traffic-light--${modifierClass}`}>{letter}</div>
+ }
+
const renderReviewBody = () => {
if (review === undefined) {
return null
@@ -47,7 +63,7 @@ const ReviewBlock = ({ review }) => {
<li className="reviews-sidebar__item reviews-sidebar__item--header">
<div></div>
{review.recommendation.display &&
- <div>{review.recommendation.display}</div>
+ renderTrafficLight()
}
{!isNaN(parseFloat(review.score)) &&
<div>{review.score}</div>
--
GitLab