From 4bb7749f81f9e0e859f102e04c0770a171eb3269 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Eduardo=20Campan=CC=83a?= <asrielo@gmail.com>
Date: Thu, 25 Oct 2018 11:01:47 +0200
Subject: [PATCH] fix(reviewer): add support for different themes

fixes https://github.com/frontity/saturn-theme/issues/166
---
 src/shared/components/Reviewer/index.js | 127 +++++++++++++-----------
 src/shared/processors/low/reviewer.js   |   9 +-
 2 files changed, 75 insertions(+), 61 deletions(-)

diff --git a/src/shared/components/Reviewer/index.js b/src/shared/components/Reviewer/index.js
index 2c43d2ee..74c2972d 100644
--- a/src/shared/components/Reviewer/index.js
+++ b/src/shared/components/Reviewer/index.js
@@ -3,28 +3,25 @@ import { shape, bool, string, node, arrayOf, number } from 'prop-types';
 import { inject } from 'mobx-react';
 import styled, { css } from 'styled-components';
 
-const Reviewer = ({ scores, reviewerTheme, children, linkStyles }) => {
-  console.log('scores:', scores);
-  return (
-    <Container
-      scores={scores}
-      reviewerTheme={reviewerTheme}
-      linkStyles={linkStyles}
-    >
-      {children}
-    </Container>
-  );
-};
+const Reviewer = ({ reviewerTheme, linkStyles, scores, children }) => (
+  <Container
+    reviewerTheme={reviewerTheme}
+    linkStyles={linkStyles}
+    scores={scores}
+  >
+    {children}
+  </Container>
+);
 
 Reviewer.propTypes = {
-  children: node.isRequired,
   reviewerTheme: string.isRequired,
-  scores: arrayOf(number),
   linkStyles: shape({
     color: string,
     bold: bool,
     underline: bool,
   }),
+  children: node.isRequired,
+  scores: arrayOf(number),
 };
 
 Reviewer.defaultProps = {
@@ -36,16 +33,7 @@ export default inject(({ stores: { settings } }) => ({
   linkStyles: settings.theme.linkStyles,
 }))(Reviewer);
 
-const scoreBar = score => css`
-  .rwp-score-bar[data-score="${score}"] {
-    height: 0.8em;
-    width: ${score}%;
-    background-color: ${({ theme, linkStyles }) =>
-      linkStyles.color || theme.colors.link};
-  }
-`;
-
-const Container = styled.div`
+const rwpThemeOne = css`
   .rwp-title {
     font-size: 1.5rem;
     em {
@@ -53,47 +41,49 @@ const Container = styled.div`
     }
   }
 
-  .rwp-overalls {
-    display: flex;
-    justify-content: center;
-
-    .rwp-overall-score {
-      border-radius: 4px;
-      margin: 10px 0;
-      background-color: ${({ theme, linkStyles }) =>
-        linkStyles.color || theme.colors.link};
-      color: ${({ theme }) => theme.colors.white};
-      width: 6rem;
-      height: 6rem;
+  .rwp-header {
+    .rwp-overalls {
       display: flex;
-      flex-direction: column;
       justify-content: center;
-      align-items: center;
 
-      .rwp-overlall-score-value {
-        font-size: 2.5rem;
-        line-height: 2.5rem;
-        font-weight: 700;
+      .rwp-overall-score {
+        border-radius: 4px;
+        margin: 10px 0;
+        background-color: ${({ theme, linkStyles }) =>
+          linkStyles.color || theme.colors.link};
+        color: ${({ theme }) => theme.colors.white};
+        width: 6rem;
+        height: 6rem;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+
+        .rwp-overlall-score-value {
+          font-size: 2.5rem;
+          line-height: 2.5rem;
+          font-weight: 700;
+        }
+
+        .rwp-overlall-score-label {
+          font-size: 1rem;
+          text-transform: uppercase;
+        }
       }
+    }
 
-      .rwp-overlall-score-label {
-        font-size: 1rem;
+    .rwp-pros-wrap,
+    .rwp-cons-wrap {
+      .rwp-pros-label,
+      .rwp-cons-label {
+        font-weight: 700;
+        color: ${({ theme, linkStyles }) =>
+          linkStyles.color || theme.colors.link};
         text-transform: uppercase;
       }
     }
   }
 
-  .rwp-pros-wrap,
-  .rwp-cons-wrap {
-    .rwp-pros-label,
-    .rwp-cons-label {
-      font-weight: 700;
-      color: ${({ theme, linkStyles }) =>
-        linkStyles.color || theme.colors.link};
-      text-transform: uppercase;
-    }
-  }
-
   .rwp-scores {
     margin-top: 20px;
 
@@ -101,17 +91,38 @@ const Container = styled.div`
       margin: 5px 0;
 
       .rwp-criterion-text {
+        padding: 0 5px;
         display: flex;
         justify-content: space-between;
       }
 
       .rwp-criterion-bar-base {
+        border-radius: 4px;
         margin: 3px 0 6px 0;
         height: 0.8em;
-        background-color: ${({ theme }) => theme.colors.grey};
-
-        ${({ scores }) => scores.map(score => scoreBar(score))};
+        background-color: #ccc;
+
+        /* Renders score bar styles for different scores */
+        ${({ scores }) =>
+          scores.map(
+            score => css`
+              .rwp-score-bar[data-score="${score}"] {
+                border-radius: 4px;
+                height: 0.8em;
+                width: ${score}%;
+                background-color: ${({ theme, linkStyles }) =>
+                  linkStyles.color || theme.colors.link};
+              }
+            `,
+          )};
       }
     }
   }
 `;
+
+const Container = styled.div`
+  ${({ reviewerTheme }) => {
+    if (reviewerTheme === 'rwp-theme-1') return rwpThemeOne;
+    return null;
+  }};
+`;
diff --git a/src/shared/processors/low/reviewer.js b/src/shared/processors/low/reviewer.js
index 93c2ed6f..8b662429 100644
--- a/src/shared/processors/low/reviewer.js
+++ b/src/shared/processors/low/reviewer.js
@@ -1,3 +1,4 @@
+/* eslint-disable no-console */
 import { uniq } from 'lodash-es';
 import Reviewer from '../../components/Reviewer';
 
@@ -14,29 +15,31 @@ export default {
       const criterions = children[0].children[2].children;
 
       criterions.forEach(criterion => {
+        // Gets score x10 to be used as a CSS width value.
         const score =
           parseFloat(
             criterion.children[0].children[1].children[0].content,
             10,
           ) * 10;
 
+        // Defines the [data-score] attribute for each bar node.
         criterion.children[1].children[0].props['data-score'] = score;
-
+        // Stores the current score to pass as props.
         scores.push(parseFloat(score, 10));
       });
     } catch (e) {
-      console.error('Error in Reviewer Wordpress processor:', e); // eslint-disable-line
+      console.warn('Error in Reviewer Wordpress processor:', e);
     }
 
     return {
       component: Reviewer,
       props: {
         ...props,
-        scores: uniq(scores),
         reviewerTheme: props.className
           .split(' ')
           .filter(name => name.startsWith('rwp-theme'))
           .join(''),
+        scores: uniq(scores),
       },
       children,
     };