finishing stlyling, logic

.eslintrc

@@ -202,7 +202,7 @@
         "react/jsx-sort-props":["off"],
         "react/jsx-uses-react":["error"],
         "react/jsx-uses-vars":["error"],
-        "react/jsx-curly-brace-presence":["error", { "props": "always", "children": "always" }],
+        "react/jsx-curly-brace-presence":["error", { "props": "always" }],
         "react/no-did-mount-set-state":["off"],
         "react/no-did-update-set-state":["error"],
         "react/no-multi-comp":["off"],

src/components/Answer/Answer.component.js

@@ -0,0 +1,91 @@
+import React, { PureComponent } from "react";
+
+import Highlight from "react-highlight";
+
+import Markdown from "react-remarkable";
+
+import "highlight.js/styles/github-gist.css";
+
+import PropTypes from "prop-types";
+
+import "./Answer.css";
+
+import classNames from "classnames";
+
+const letterMap = {
+    1: `a`,
+    2: `b`,
+    3: `c`,
+    4: `d`,
+};
+
+export default class Answer extends PureComponent {
+    static propTypes = {
+        questionId: PropTypes.string,
+        answerNumber: PropTypes.number.isRequired,
+        selectedAnswer: PropTypes.number,
+        text: PropTypes.string.isRequired,
+        answerType: PropTypes.string.isRequired,
+        theme: PropTypes.oneOf([`none`, `green`, `red`, `blue-outline`])
+            .isRequired,
+        onChange: PropTypes.func,
+    };
+
+    static defaultProps = {
+        theme: `none`,
+        answerType: `markdown`,
+    };
+
+    handleOnChange = () => {
+        const { onChange, answerNumber } = this.props;
+
+        onChange(answerNumber);
+    };
+
+    render() {
+        const {
+            onChange,
+            answerType,
+            text,
+            questionId,
+            answerNumber,
+            selectedAnswer,
+            theme,
+        } = this.props;
+
+        const answerIsSelected = answerNumber === selectedAnswer;
+
+        const textEl =
+            answerType === `code` ? (
+                <Highlight className={`javascript`}>{text}</Highlight>
+            ) : (
+                <Markdown>{text}</Markdown>
+            );
+
+        const radioId = `${questionId}-${answerNumber}`;
+
+        const containerClasses = classNames(`Answer`, `--theme-${theme}`);
+
+        const content = (
+            <div className={containerClasses}>
+                <span className={`Answer__question-number`}>
+                    {letterMap[answerNumber]}
+                </span>
+                {onChange && (
+                    <input
+                        className={`visuallyhidden`}
+                        value={questionId}
+                        checked={answerIsSelected}
+                        onChange={this.handleOnChange}
+                        type={`radio`}
+                        name={questionId}
+                        id={radioId}
+                    />
+                )}
+                <div className={`Answer__text`}>{textEl}</div>
+            </div>
+        );
+
+        return onChange ? <label htmlFor={radioId}>{content}</label> : content;
+    }
+}

src/components/Answer/Answer.css

@@ -0,0 +1,63 @@
+.Answer {
+    display: block;
+    background-color: #F7F7F7;
+    border: 2px solid #F1F1F1;
+    padding: 20px;
+    position: relative;
+    border-radius: 5px;
+    transition: border-color .2s;
+}
+
+.Answer.--theme-blue-outline {
+    border-color: var(--blue)
+}
+
+.Answer.--theme-red {
+    border-color: rgba(187, 0, 23, .4);
+    background-color: rgba(187, 0, 23, .2);
+}
+
+.Answer.--theme-green {
+    border-color: rgba(128, 174, 82, .4);
+    background-color: rgba(128, 174, 82, .2);
+}
+
+.Answer__question-number {
+    position: absolute;
+    top: 4px;
+    left: 4px;
+    font-size: .625rem;
+    line-height: 1;
+    text-transform: uppercase;
+    color: #B3B3B3;
+    font-weight: 900;
+    transition: color .2s;
+}
+
+.Answer.--theme-blue-outline .Answer__question-number {
+    color: var(--blue)
+}
+
+.Answer.--theme-red .Answer__question-number {
+    color: var(--red);
+}
+
+.Answer.--theme-green .Answer__question-number {
+    color: var(--green);
+}
+
+.Answer code {
+    background-color: rgba(255, 255, 255, .8);
+}
+
+.Answer.--theme-red code {
+    background-color: rgba(187, 0, 23, .2);
+}
+
+.Answer.--theme-green code {
+    background-color: rgba(128, 174, 82, .2);
+}
+
+.Answer__text .hljs {
+    background-color: transparent !important;
+}

src/components/Answer/index.js

@@ -0,0 +1 @@
+export { default as Answer } from "./Answer.component";

src/components/CodeFigure/CodeFigure.component.js

@@ -0,0 +1,23 @@
+import React, { PureComponent } from "react";
+
+import Highlight from "react-highlight";
+
+import PropTypes from "prop-types";
+
+import "./CodeFigure.css";
+
+export default class CodeFigure extends PureComponent {
+    static propTypes = {
+        codeFigure: PropTypes.string.isRequired,
+    };
+
+    render() {
+        const { codeFigure } = this.props;
+
+        return (
+            <div className={`CodeFigure`}>
+                <Highlight className={`javascript`}>{codeFigure}</Highlight>
+            </div>
+        );
+    }
+}

src/components/CodeFigure/CodeFigure.css

@@ -0,0 +1,72 @@
+.CodeFigure > pre {
+    margin: 0;
+}
+
+.CodeFigure .hljs {
+    display: block;
+    overflow-x: auto;
+    background: #2b2b2b;
+    padding: 20px 15px;
+    border-radius: 5px;
+    color: #bababa;
+}
+
+.CodeFigure .hljs-strong,
+.CodeFigure .hljs-emphasis {
+    color: #a8a8a2;
+}
+
+.CodeFigure .hljs-bullet,
+.CodeFigure .hljs-quote,
+.CodeFigure .hljs-link,
+.CodeFigure .hljs-number,
+.CodeFigure .hljs-regexp,
+.CodeFigure .hljs-literal {
+    color: #6896ba;
+}
+
+.CodeFigure .hljs-code,
+.CodeFigure .hljs-selector-class {
+    color: #a6e22e;
+}
+
+.CodeFigure .hljs-emphasis {
+    font-style: italic;
+}
+
+.CodeFigure .hljs-keyword,
+.CodeFigure .hljs-selector-tag,
+.CodeFigure .hljs-section,
+.CodeFigure .hljs-attribute,
+.CodeFigure .hljs-name,
+.CodeFigure .hljs-variable {
+    color: #cb7832;
+}
+
+.CodeFigure .hljs-params {
+    color: #b9b9b9;
+}
+
+.CodeFigure .hljs-string {
+    color: #6a8759;
+}
+
+.CodeFigure .hljs-subst,
+.CodeFigure .hljs-type,
+.CodeFigure .hljs-built_in,
+.CodeFigure .hljs-builtin-name,
+.CodeFigure .hljs-symbol,
+.CodeFigure .hljs-selector-id,
+.CodeFigure .hljs-selector-attr,
+.CodeFigure .hljs-selector-pseudo,
+.CodeFigure .hljs-template-tag,
+.CodeFigure .hljs-template-variable,
+.CodeFigure .hljs-addition {
+    color: #e0c46c;
+}
+
+.CodeFigure .hljs-comment,
+.CodeFigure .hljs-deletion,
+.CodeFigure .hljs-meta {
+    color: #7f7f7f;
+}

src/components/CodeFigure/index.js

@@ -0,0 +1 @@
+export { default as CodeFigure } from "./CodeFigure.component";

src/components/Completed/Completed/Completed.component.js

@@ -1,20 +1,15 @@
 import React, { PureComponent } from "react";
 
-
-import {
-    CompletedHeader,
-    Results,
-} from "components";
+import { CompletedHeader, Results } from "components";
 
 import "./Completed.css";
 
 export default class Completed extends PureComponent {
     render() {
-
         return (
             <div className={`Completed`}>
-                <CompletedHeader/>
-                <Results/>
+                <CompletedHeader />
+                <Results />
             </div>
         );
     }

src/components/Completed/Completed/index.js

@@ -1,2 +1 @@
-export { default as Completed } from './Completed.container';
-
+export { default as Completed } from "./Completed.container";

src/components/Completed/CompletedHeader/CompletedHeader.component.js

@@ -1,49 +1,49 @@
-import React, { PureComponent } from 'react';
+import React, { PureComponent } from "react";
 
-import PropTypes from 'prop-types';
+import PropTypes from "prop-types";
 
-import {
+import {} from "components";
 
-} from 'components';
-
-import './CompletedHeader.css';
+import "./CompletedHeader.css";
 
 export default class CompletedHeader extends PureComponent {
     static propTypes = {
         name: PropTypes.string.isRequired,
     };
 
     render() {
-        const {name} = this.props;
+        const { name } = this.props;
 
         return (
             <header className={`CompletedHeader`}>
                 <div className={`CompletedHeader__header-content`}>
-                    <h1 className={`CompletedHeader__title`}>{`Congratulations ${name}, you're finished!`}</h1>
+                    <h1
+                        className={`CompletedHeader__title`}
+                    >{`Congratulations ${name}, you're finished!`}</h1>
                     <h2 className={`CompletedHeader__coding-strength`}>
                         {`Your Coding Strength is: `}
-                        <strong>{`Javascript Proficiency`}</strong>
+                        <strong>Javascript Proficiency</strong>
                     </h2>
                     <p>
-                        Based on your responses, you have solid
-                        understanding of the foundational JavaScript
-                        essentials you need to learn mobile app development.
-                        Consider getting started with a training program
-                        that offers opportunities for practical, real world
-                        experience building apps.
+                        Based on your responses, you have solid understanding of
+                        the foundational JavaScript essentials you need to learn
+                        mobile app development. Consider getting started with a
+                        training program that offers opportunities for
+                        practical, real world experience building apps.
                     </p>
 
                     <p>
-                        You can review your results below, and we also sent
-                        a recap email with your responses to your inbox. If
-                        you want me to review your assessment results and
-                        provide completely personalized recommendations to
-                        make sure you get started right, click below to book
-                        a <strong>{`free 15-minute coaching session`}</strong>{` `}
+                        You can review your results below, and we also sent a
+                        recap email with your responses to your inbox. If you
+                        want me to review your assessment results and provide
+                        completely personalized recommendations to make sure you
+                        get started right, click below to book a{` `}
+                        <strong>free 15-minute coaching session</strong>
+                        {` `}
                         with me!
                     </p>
                     <a
-                        href={`#`}
+                        href={`https://calendly.com/danwiltcoaching/15min`}
                         className={`CompletedHeader__schedule-call-button btn`}
                     >
                         Schedule a free coaching call

src/components/Completed/CompletedHeader/CompletedHeader.container.js

@@ -1,12 +1,9 @@
-import { connect } from 'react-redux';
+import { connect } from "react-redux";
 
-import {
-    quizNameSelector,
-} from 'selectors';
+import { quizNameSelector } from "selectors";
 
-
-import CompletedHeader from './CompletedHeader.component';
+import CompletedHeader from "./CompletedHeader.component";
 
 export default connect((st) => ({
     name: quizNameSelector(st),
-}), {})(CompletedHeader);
+}))(CompletedHeader);

src/components/Completed/CompletedHeader/index.js

@@ -1 +1 @@
-export { default as CompletedHeader } from './CompletedHeader.container';
+export { default as CompletedHeader } from "./CompletedHeader.container";