fix(reviewer): add support for different themes

fixes #166

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,82 +33,96 @@ 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 {
       font-style: normal;
     }
   }
 
-  .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;
 
     .rwp-criterion {
       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;
+  }};
+`;

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,
     };