feat: add DataDownLoadRow component, use on national and state pages

refactor lastUpdated -> lastUpdate

src/components/pages/data/state-data.js

@@ -5,7 +5,7 @@ import slug from '~utilities/slug'
 import { StateGrade } from '~components/pages/state/state-grade'
 import StateSummary from '~components/common/summary'
 import StateNotes from '~components/pages/state/state-notes'
-import { LastUpdated } from '~components/pages/state/preamble'
+import LastUpdated from '~components/common/last-updated'
 import {
   StateLinksDisclosure,
   StateLinksDisclosureButton,
@@ -34,7 +34,7 @@ const State = ({ state }) => {
           combined: false,
           separate: false,
         }}
-        lastUpdated={state.lastUpdateEt}
+        lastUpdate={state.lastUpdateEt}
       />
 
       <StateLinksDisclosure

src/components/pages/state/download-data.js

@@ -1,9 +1,13 @@
 import React from 'react'
 import { Link } from 'gatsby'
 import slug from '~utilities/slug'
+import { Row, Col } from '~components/common/grid'
+
+import LastUpdated from '~components/common/last-updated'
+import preambleStyle from './preamble.module.scss'
 import downloadDataStyles from './download-data.module.scss'
 
-export default ({ state, hideLabel = false }) => (
+const DownloadData = ({ state, hideLabel = false }) => (
   <div className={downloadDataStyles.container}>
     {!hideLabel && (
       <h3 className={downloadDataStyles.header}>Get the data as:</h3>
@@ -27,3 +31,31 @@ export default ({ state, hideLabel = false }) => (
     </p>
   </div>
 )
+
+const DownloadDataRow = ({
+  state,
+  lastUpdateEt,
+  unformatted = false,
+  national = false,
+}) => (
+  <Row>
+    <Col width={[4, 6, 6]}>
+      <div className={downloadDataStyles.lastUpdatedContainer}>
+        <LastUpdated
+          lastUpdateEt={lastUpdateEt}
+          unformatted={unformatted}
+          national={national}
+        />
+      </div>
+    </Col>
+    <Col width={[4, 6, 6]}>
+      <div className={preambleStyle.largeDisclosure}>
+        <DownloadData state={state} />
+      </div>
+    </Col>
+  </Row>
+)
+
+export default DownloadData
+
+export { DownloadData, DownloadDataRow }

src/components/pages/state/download-data.module.scss

@@ -28,3 +28,9 @@
     justify-content: right;
   }
 }
+
+.last-updated-container {
+  display: flex;
+  height: 100%;
+  align-items: center;
+}

src/components/pages/state/preamble.js

@@ -8,7 +8,10 @@ import {
 import classnames from 'classnames'
 
 import { Row, Col } from '~components/common/grid'
-import DownloadData from '~components/pages/state/download-data'
+import {
+  DownloadData,
+  DownloadDataRow,
+} from '~components/pages/state/download-data'
 import { LargeStateGrade } from '~components/pages/state/state-grade'
 import {
   StateLinks,
@@ -18,7 +21,7 @@ import {
 } from '~components/pages/state/state-links'
 import preambleStyle from './preamble.module.scss'
 
-const Preamble = ({ state, covidState }) => {
+export default ({ state, covidState }) => {
   const { contentfulSnippet } = useStaticQuery(
     graphql`
       query {
@@ -63,18 +66,7 @@ const Preamble = ({ state, covidState }) => {
           </div>
         </Col>
       </Row>
-      <Row>
-        <Col width={[4, 6, 6]}>
-          <div className={preambleStyle.lastUpdatedContainer}>
-            <LastUpdated lastUpdatedEt={covidState.lastUpdateEt} />
-          </div>
-        </Col>
-        <Col width={[4, 6, 6]}>
-          <div className={preambleStyle.largeDisclosure}>
-            <DownloadData state={state} />
-          </div>
-        </Col>
-      </Row>
+      <DownloadDataRow state={state} lastUpdateEt={covidState.lastUpdateEt} />
       <Row>
         <Col width={[0, 0, 6]}>
           <div className={preambleStyle.mobileDisclosure}>
@@ -117,12 +109,3 @@ const Preamble = ({ state, covidState }) => {
     </div>
   )
 }
-
-const LastUpdated = ({ lastUpdatedEt }) => (
-  <p className={preambleStyle.lastUpdated}>
-    State’s last reported update time: {lastUpdatedEt} ET
-  </p>
-)
-
-export default Preamble
-export { Preamble, LastUpdated }

src/components/pages/state/preamble.module.scss

@@ -25,10 +25,6 @@
   }
 }
 
-.last-updated {
-  color: $color-slate-500;
-}
-
 .wrapper {
   border: 1px solid $color-slate-200;
   border-radius: 4px;

src/templates/data/index.js

@@ -4,14 +4,12 @@ import { graphql } from 'gatsby'
 import DetailText from '~components/common/detail-text'
 import Container from '~components/common/container'
 import Layout from '~components/layout'
-import { Row, Col } from '~components/common/grid'
-import { FormatDate } from '~components/utils/format'
 import ContentfulContent from '~components/common/contentful-content'
 import MarkdownContent from '~components/common/markdown-content'
 
 import States from '~components/pages/data/states'
 
-import DownloadData from '~components/pages/state/download-data'
+import { DownloadDataRow } from '~components/pages/state/download-data'
 import Summary from '~components/common/summary'
 import SummaryCharts from '~components/common/summary-charts'
 
@@ -32,18 +30,12 @@ export default ({ data }) => {
         content={data.dataPreamble.content.childMarkdownRemark.html}
         id={data.dataPreamble.contentful_id}
       />
-      <Row>
-        <Col width={[4, 3, 8]}>
-          Last updated:{' '}
-          <FormatDate
-            date={data.lastUpdate.nodes[0].date}
-            format="ccc LLL d yyyy"
-          />
-        </Col>
-        <Col width={[4, 3, 4]}>
-          <DownloadData state={{ name: 'all-states' }} />
-        </Col>
-      </Row>
+      <DownloadDataRow
+        state={{ name: 'all-states' }}
+        lastUpdateEt={data.lastUpdate.nodes[0].date}
+        unformatted
+        national
+      />
       <Summary
         stateSlug="national"
         data={data.covidUs}