Add percentages to detail view

This adds the percentage rendering as well as the underlined flag to the
detail view (which is rendered when a flag is selected.

Issue #61

src/client/components/Sidebar/DetailPane/FlagChart.js

@@ -0,0 +1,123 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import styled from 'styled-components'
+
+// App Imports
+import { phraseType } from '../../../types'
+import { calculatePhraseColor } from '../../../helpers'
+
+// Styles
+const Wrapper = styled.div`
+
+`
+
+const PercentageRow = styled.div`
+  margin-top: 30px;
+  display: flex;
+  justify-content: space-between;
+`
+
+const PercentageBox = styled.div`
+`
+
+const BoxDescription = styled.div`
+  text-transform: uppercase;
+  text-align: center;
+  font-family: Roboto;
+  font-size: 12px;
+  line-height: 16px;
+`
+
+const PartyName = styled.div`
+  margin: 0px;
+  padding: 0px;
+  position: relative;
+  background: transparent;
+`
+
+const PartyNameText = styled.div`
+  position: relative;
+  z-index: 2;
+`
+
+const PartyNameBackground = styled.div`
+  background: ${props => props.color};
+  display: inline-block;
+  position: absolute;
+  height: 3px;
+  width: 100%;
+  left: 2px;
+  bottom: 1px;
+  box-sizing: content-box;
+  z-index: 1;
+`
+
+const RawPercentage = styled.div`
+  font-size: 30px;
+  font-family: Roboto;
+  font-weight: 300;
+  line-height: 39px;
+  text-align: center;
+`
+
+
+// Component
+class FlagChart extends React.Component {
+  static propTypes = {
+    selectedPhrase: phraseType,
+  }
+
+  render() {
+    const { selectedPhrase } = this.props
+    const {
+      dCount,
+      rCount
+    } = selectedPhrase
+    const totalCount = Math.max(1, dCount + rCount)
+    const dPercent = Math.round(100 * dCount / totalCount)
+    const rPercent = Math.round(100 * rCount / totalCount)
+
+    return (
+      <>
+        <Wrapper>
+          <PercentageRow>
+            <PercentageBox>
+              <RawPercentage>
+                {dPercent}%
+              </RawPercentage>
+              <BoxDescription>
+                <PartyName>
+                  <PartyNameText>
+                    Democratic
+                  </PartyNameText>
+                  <PartyNameBackground
+                    color="#6EB6EA"
+                  />
+                </PartyName>
+                Speaker
+              </BoxDescription>
+            </PercentageBox>
+            <PercentageBox>
+              <RawPercentage>
+                {rPercent}%
+              </RawPercentage>
+              <BoxDescription>
+                <PartyName>
+                  <PartyNameText>
+                    Republican
+                  </PartyNameText>
+                  <PartyNameBackground
+                    color="#DA696C"
+                  />
+                </PartyName>
+                Speaker
+              </BoxDescription>
+            </PercentageBox>
+          </PercentageRow>
+        </Wrapper>
+      </>
+    )
+  }
+}
+
+export default FlagChart

src/client/components/Sidebar/DetailPane/FlagDetail.js

@@ -0,0 +1,67 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import styled from 'styled-components'
+
+// App Imports
+import { phraseType } from '../../../types'
+import { calculatePhraseColor } from '../../../helpers'
+
+// Styles
+const Wrapper = styled.div`
+`
+
+const SelectedPhrase = styled.span`
+  margin: 0px;
+  padding: 0px;
+  position: relative;
+  background: transparent;
+  display: inline-block;
+`
+const SelectedPhraseText = styled.div`
+  font-size: 24px;
+  font-family: "Roboto Slab";
+  font-weight: normal;
+  background: transparent;
+  position: relative;
+  z-index: 2;
+`
+
+const SelectedPhraseBackground = styled.div`
+  display: inline-block;
+  position: absolute;
+  background: ${props => calculatePhraseColor(props.phrase)};
+  height: 8px;
+  width: 100%;
+  left: 2px;
+  bottom: 1px;
+  box-sizing: content-box;
+  z-index: 1;
+`
+
+// Component
+class FlagDetail extends React.Component {
+  static propTypes = {
+    selectedPhrase: phraseType,
+  }
+
+  render() {
+    const { selectedPhrase } = this.props
+    const { text } = selectedPhrase
+    return (
+      <>
+        <Wrapper>
+          <SelectedPhrase>
+            <SelectedPhraseText>
+              { text }
+            </SelectedPhraseText>
+            <SelectedPhraseBackground
+              phrase={selectedPhrase}
+            />
+          </SelectedPhrase>
+        </Wrapper>
+      </>
+    )
+  }
+}
+
+export default FlagDetail

src/client/components/Sidebar/DetailPane/index.js

@@ -2,14 +2,27 @@ import React from 'react'
 import PropTypes from 'prop-types'
 
 // App Imports
+import { phraseType } from '../../../types'
+import FlagDetail from './FlagDetail'
+import FlagChart from './FlagChart'
 
 
 class DetailPane extends React.Component {
+  static propTypes = {
+    selectedPhrase: phraseType,
+  }
+
   render() {
+    const { selectedPhrase } = this.props
     return (
       <>
         <div>
-          Detail Pane
+          <FlagDetail
+            selectedPhrase={selectedPhrase}
+          />
+          <FlagChart
+            selectedPhrase={selectedPhrase}
+          />
         </div>
       </>
     )

src/client/index.html

@@ -4,7 +4,7 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
     <title>Truth Goggles: Language Checker</title>
-    <link href="https://fonts.googleapis.com/css?family=Roboto+Slab:300|Roboto:100,300,400" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css?family=Roboto+Slab:300,400|Roboto:100,300,400" rel="stylesheet">
   </head>
   <body>
     <div id="root"></div>