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 (
-
- {children}
-
- );
-};
+const Reviewer = ({ reviewerTheme, linkStyles, scores, children }) => (
+
+ {children}
+
+);
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,
};