Merge pull request #1159 from 18F/bjs-data-source-consistent

consistentfying

public/sw.js

@@ -6,11 +6,12 @@ self.addEventListener('install', event => {
     caches.open(CACHE).then(cache => {
       cache.addAll([
         '/img/cde-logo.png',
+        '/img/chevron-down-navy.svg',
         '/img/fbi-logo.png',
         '/img/loading.svg',
         '/img/github.svg',
+        '/img/glossary.svg',
         '/img/twitter.svg',
-        '/img/chevron-down-navy.svg',
         '/data/geo-usa-state.json',
         '/data/usa-state-svg.json',
       ])

sass/util/_fonts.scss

@@ -1 +1,2 @@
+.font-style-inherit { font-style: inherit; }
 .fw-100 { font-weight: 100; }

sass/util/all.scss

@@ -5,6 +5,7 @@
 @import 'cursor';
 @import 'display';
 @import 'flex';
+@import 'fonts';
 @import 'forms';
 @import 'height';
 @import 'layout';

src/components/ExplorerIntroState.js

@@ -4,18 +4,21 @@ import upperFirst from 'lodash.upperfirst'
 import React from 'react'
 
 import Term from './Term'
-import { estimatedTerm, nibrsTerm, srsTerm } from './Terms'
+import { EstimatedTerm, NibrsTerm, SrsTerm } from './Terms'
 import { formatNum } from '../util/formats'
 import mapCrimeToGlossaryTerm from '../util/glossary'
 import ucrParticipationLookup from '../util/participation'
 
-const highlight = txt => <strong>{txt}</strong>
+const highlight = txt =>
+  <strong>
+    {txt}
+  </strong>
 const getReportTerms = ({ nibrs, srs, hybrid }) =>
   <span>
     {hybrid && 'both '}
-    {srs && srsTerm}
+    {srs && <SrsTerm />}
     {hybrid && ' and '}
-    {nibrs && nibrsTerm}
+    {nibrs && <NibrsTerm />}
   </span>
 
 const ExplorerIntroState = ({ crime, place, participation, until }) => {
@@ -34,42 +37,27 @@ const ExplorerIntroState = ({ crime, place, participation, until }) => {
       {!isArson
         ? <div>
             <p className="serif">
-              {crimeTerm} rates for {startCase(place)} are derived from
-              {' '}
-              {reportTerms}
-              {' '}
-              reports voluntarily submitted to the FBI.
+              {crimeTerm} rates for {startCase(place)} are derived from{' '}
+              {reportTerms} reports voluntarily submitted to the FBI.
             </p>
             <p className="serif">
-              In
-              {' '}
-              {highlight(until)}
-              , the FBI {estimatedTerm} crime statistics for
-              {' '}
-              {startCase(place)}
-              {' '}
-              based on data received from
-              {' '}
-              {highlight(formatNum(untilUcr.participating_agencies))}
-              {' '}
-              law enforcement agencies out of
-              {' '}
-              {highlight(formatNum(untilUcr.total_agencies))}
-              {' '}
-              agencies in the state that year.
+              In {highlight(until)}
+              , the FBI <EstimatedTerm /> crime statistics for{' '}
+              {startCase(place)} based on data received from{' '}
+              {highlight(formatNum(untilUcr.participating_agencies))} law
+              enforcement agencies out of{' '}
+              {highlight(formatNum(untilUcr.total_agencies))} agencies in the
+              state that year.
             </p>
           </div>
         : <div>
             <p className="serif">
               {startCase(place)} reports {reportTerms} data to the FBI.
             </p>
             <p className="serif">
-              In {until}, {formatNum(untilUcr.participating_agencies)}
-              {' '}
-              {startCase(place)}
-              {' '}
-              law enforcement agencies voluntarily reported data to the FBI.
-              The charts below feature unestimated data.
+              In {until}, {formatNum(untilUcr.participating_agencies)}{' '}
+              {startCase(place)} law enforcement agencies voluntarily reported
+              data to the FBI. The charts below feature unestimated data.
             </p>
           </div>}
     </div>

src/components/Term.js

@@ -19,10 +19,9 @@ const Term = ({ children, dispatch, id, size = 'md' }) => {
   return (
     <button
       aria-label={`Show ${lowerCase(id)} in the glossary`}
-      className="bg-transparent border-none border-bottom-dotted color-inherit cursor-pointer font-family-inherit font-size-inherit px0"
+      className="bg-transparent border-none border-bottom-dotted color-inherit cursor-pointer font-family-inherit font-size-inherit font-style-inherit p0"
       onClick={handler}
     >
-
       {children}
       <img
         alt="glossary lookup"

src/components/Terms.js

@@ -1,17 +1,35 @@
+import PropTypes from 'prop-types'
 import React from 'react'
 
 import Term from './Term'
 
-export const estimatedTerm = <Term id="estimated data">estimated</Term>
+const propTypes = { size: PropTypes.string }
+export const EstimatedTerm = ({ children, size }) =>
+  <Term id="estimated data" size={size}>
+    {children || 'estimated'}
+  </Term>
+
+EstimatedTerm.propTypes = propTypes
+EstimatedTerm.defaultProps = {
+  size: 'md',
+}
 
-export const nibrsTerm = (
-  <Term id={'national incident-based reporting system (nibrs)'}>
-    incident-based (NIBRS)
+export const NibrsTerm = ({ children, size }) =>
+  <Term id={'national incident-based reporting system (nibrs)'} size={size}>
+    {children || 'incident-based (NIBRS)'}
   </Term>
-)
 
-export const srsTerm = (
-  <Term id={'summary reporting system (srs)'}>
-    summary (SRS)
+NibrsTerm.propTypes = propTypes
+NibrsTerm.defaultProps = {
+  size: 'md',
+}
+
+export const SrsTerm = ({ children, size }) =>
+  <Term id={'summary reporting system (srs)'} size={size}>
+    {children || 'summary (SRS)'}
   </Term>
-)
+
+SrsTerm.propTypes = propTypes
+SrsTerm.defaultProps = {
+  size: 'md',
+}

src/components/TrendSourceText.js

@@ -2,27 +2,11 @@ import startCase from 'lodash.startcase'
 import PropTypes from 'prop-types'
 import React from 'react'
 
-import Term from './Term'
+import { EstimatedTerm, NibrsTerm, SrsTerm } from './Terms'
 
 import ucrParticipationLookup from '../util/participation'
 
-const estimatedTerm = (
-  <Term id="estimated data" size="sm">
-    Estimated
-  </Term>
-)
-const nibrsTerm = (
-  <Term id={'national incident-based reporting system (nibrs)'} size="sm">
-    incident-based (NIBRS)
-  </Term>
-)
-const srsTerm = (
-  <Term id={'summary reporting system (srs)'} size="sm">
-    summary (SRS)
-  </Term>
-)
-
-const TrendSourceText = ({ crime, place, since, until }) => {
+const TrendSourceText = ({ crime, place }) => {
   const isArson = crime === 'arson'
   const { nibrs, srs } = ucrParticipationLookup(place)
   const hybrid = nibrs && srs
@@ -31,33 +15,13 @@ const TrendSourceText = ({ crime, place, since, until }) => {
     <div className="fs-12 italic serif">
       {!isArson
         ? <p>
-            Source: FBI,
-            {' '}
-            {estimatedTerm}
-            {' '}
-            data for
-            {' '}
-            {startCase(place)}
-            ,
-            {' '}
-            {since}
-            –
-            {until}
-            .
+            Source: FBI, <EstimatedTerm size="sm">Estimated</EstimatedTerm> data
+            for {startCase(place)}.
           </p>
         : <p>
-            Source: Reported
-            {' '}
-            {srs && srsTerm}
+            Source: Reported {srs && <SrsTerm size="sm" />}
             {hybrid && ' and '}
-            {nibrs && nibrsTerm}
-            {' '} data from {' '}
-            {startCase(place)},
-            {' '}
-            {since}
-            –
-            {until}
-            .
+            {nibrs && <NibrsTerm size="sm" />} data from {startCase(place)}.
           </p>}
     </div>
   )
@@ -66,8 +30,6 @@ const TrendSourceText = ({ crime, place, since, until }) => {
 TrendSourceText.propTypes = {
   crime: PropTypes.string,
   place: PropTypes.string,
-  since: PropTypes.number.isRequired,
-  until: PropTypes.number.isRequired,
 }
 
 export default TrendSourceText

src/containers/AgencyChartContainer.js

@@ -9,7 +9,7 @@ import DownloadDataBtn from '../components/DownloadDataBtn'
 import ErrorCard from '../components/ErrorCard'
 import Loading from '../components/Loading'
 import NoData from '../components/NoData'
-import { nibrsTerm, srsTerm } from '../components/Terms'
+import { NibrsTerm, SrsTerm } from '../components/Terms'
 import { getAgency } from '../util/ori'
 
 const Content = ({ crime, place, since, submitsNibrs, summary, until }) => {
@@ -67,9 +67,8 @@ const AgencyChartContainer = params => {
   return (
     <div className="mb7">
       <div className="mb2 p2 sm-p4 bg-white border-top border-blue border-w8">
-        <h2 className="mt0 mb3 fs-24 sm-fs-28 sans-serif">
-          {startCase(crime)} {noun} reported by{' '}
-          {agency.display}, {since}–{until}
+        <h2 className="mt0 mb2 fs-24 sm-fs-28 sans-serif">
+          {startCase(crime)} {noun} reported by {agency.display}, {since}–{until}
         </h2>
         <Content submitsNibrs={submitsNibrs} {...params} />
       </div>
@@ -85,9 +84,10 @@ const AgencyChartContainer = params => {
             href="https://ucr.fbi.gov/crime-in-the-u.s"
           >
             Crime in the United States publications
-          </a>.{' '}
-          Source: Reported {submitsNibrs ? nibrsTerm : srsTerm} data from{' '}
-          {agency.display}
+          </a>. Source: Reported {submitsNibrs
+            ? <NibrsTerm />
+            : <SrsTerm />}{' '}
+          data from {agency.display}.
         </div>}
     </div>
   )

src/containers/NibrsContainer.js

@@ -7,7 +7,7 @@ import ErrorCard from '../components/ErrorCard'
 import Loading from '../components/Loading'
 import NibrsCard from '../components/NibrsCard'
 import NibrsIntro from '../components/NibrsIntro'
-import { nibrsTerm } from '../components/Terms'
+import { NibrsTerm } from '../components/Terms'
 import parseNibrs from '../util/nibrs'
 import { getAgency, oriToState } from '../util/ori'
 import { getPlaceInfo } from '../util/place'
@@ -98,7 +98,7 @@ const NibrsContainer = ({
   return (
     <div className="mb6">
       <div className="mb2 p2 sm-p4 bg-white border-top border-blue border-w8">
-        <h2 className="mt0 mb1 fs-24 sm-fs-28 sans-serif">
+        <h2 className="mt0 mb2 fs-24 sm-fs-28 sans-serif">
           {startCase(crime)} incident details reported by {placeDisplay}
         </h2>
         {isLoading && <Loading />}
@@ -117,8 +117,7 @@ const NibrsContainer = ({
       {content}
       {isReady &&
         <div className="serif italic fs-12">
-          Source: Reported {nibrsTerm} data from {placeDisplay},{' '}
-          {nibrsFirstYear}–{until}.
+          Source: Reported <NibrsTerm size="sm" /> data from {placeDisplay}.
         </div>}
     </div>
   )

src/containers/TrendContainer.js

@@ -73,19 +73,13 @@ const TrendContainer = props => {
   return (
     <div className="mb7">
       <div className="mb2 p2 sm-p4 bg-white border-top border-blue border-w8">
-        <h2 className="mt0 mb3 sm-mb5 fs-24 sm-fs-28 sans-serif">
+        <h2 className="mt0 mb2 sm-mb4 fs-24 sm-fs-28 sans-serif">
           {startCase(crime)} rate in {startCase(place)}, {since}-{until}
         </h2>
         {getContent(props)}
       </div>
       {isReady &&
-        <TrendSourceText
-          crime={crime}
-          place={place}
-          placeType={placeType}
-          since={since}
-          until={until}
-        />}
+        <TrendSourceText crime={crime} place={place} placeType={placeType} />}
     </div>
   )
 }