chore: Deemphasize grades

src/__tests__/components/pages/state/__snapshots__/state-grade.js.snap

@@ -62,11 +62,3 @@ exports[`Components : Pages : State : State grade renders correctly 3`] = `
   />
 </p>
 `;
-
-exports[`Components : Pages : State : State grade renders correctly 4`] = `
-<img
-  alt="Grade a"
-  className="gradeLarge"
-  src="test-file-stub"
-/>
-`;

src/__tests__/components/pages/state/state-grade.js

@@ -1,9 +1,6 @@
 import React from 'react'
 import renderer from 'react-test-renderer'
-import {
-  StateGrade,
-  LargeStateGrade,
-} from '~components/pages/state/state-grade'
+import StateGrade from '~components/pages/state/state-grade'
 
 describe('Components : Pages : State : State grade', () => {
   it('renders correctly', () => {
@@ -15,10 +12,5 @@ describe('Components : Pages : State : State grade', () => {
 
     const naTree = renderer.create(<StateGrade />).toJSON()
     expect(naTree).toMatchSnapshot()
-
-    const largeTree = renderer
-      .create(<LargeStateGrade letterGrade="a" />)
-      .toJSON()
-    expect(largeTree).toMatchSnapshot()
   })
 })

src/components/common/last-updated.js

@@ -4,11 +4,12 @@ import Timezone from './timezone'
 import lastUpdatedStyle from './last-updated.module.scss'
 
 // date format matches stats.lastUpdateEt
-const LastUpdated = ({ date, national }) => (
+const LastUpdated = ({ date, national, noMargin = false }) => (
   <p
     className={classnames(
       lastUpdatedStyle.lastUpdated,
       national && lastUpdatedStyle.national,
+      noMargin && lastUpdatedStyle.noMargin,
     )}
   >
     {national ? <>Data for</> : <>State’s dataset was last updated </>} {date}{' '}

src/components/common/last-updated.module.scss

@@ -3,4 +3,8 @@
   &.national {
     font-weight: bold;
   }
+  &.no-margin {
+    color: #000000;
+    margin: 0;
+  }
 }

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

@@ -1,6 +1,5 @@
 import React, { useState } from 'react'
 import { Link } from 'gatsby'
-import { StateGrade } from '~components/pages/state/state-grade'
 import StateSummary from '~components/pages/data/summary'
 import StateNotes from '~components/pages/state/state-notes'
 import LastUpdated from '~components/common/last-updated'
@@ -21,7 +20,6 @@ const State = ({ state, metadata }) => {
         <h3 id={`state-${state.state.toLowerCase()}`}>
           <Link to={`/data/state/${slug}`}>{state.name}</Link>
         </h3>
-        <StateGrade letterGrade={state.stateData.dataQualityGrade} />
       </div>
       <StateSummary
         stateName={state.name}

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

@@ -30,19 +30,31 @@ const DownloadData = ({ slug, hideLabel = false }) => (
   </div>
 )
 
-const DownloadDataRow = ({ slug, lastUpdateEt, national = false }) => (
-  <Row>
-    <Col width={[4, 6, 6]}>
-      <div className={downloadDataStyles.lastUpdatedContainer}>
-        <LastUpdated date={lastUpdateEt} national={national} />
-      </div>
-    </Col>
-    <Col width={[4, 6, 6]}>
-      <div className={preambleStyle.largeDisclosure}>
-        <DownloadData slug={slug} />
-      </div>
-    </Col>
-  </Row>
+const DownloadDataRow = ({
+  children,
+  slug,
+  lastUpdateEt,
+  national = false,
+}) => (
+  <>
+    <Row className={downloadDataStyles.row}>
+      <Col width={[4, 6, 6]}>
+        <div className={downloadDataStyles.lastUpdatedContainer}>
+          <LastUpdated date={lastUpdateEt} national={national} noMargin />
+        </div>
+      </Col>
+      <Col width={[4, 6, children ? 3 : 6]} paddingLeft={[0, 0, 16]}>
+        <div className={preambleStyle.largeDisclosure}>
+          <DownloadData slug={slug} />
+        </div>
+      </Col>
+      {children && (
+        <Col width={[4, 6, 3]} paddingLeft={[0, 0, 16]}>
+          {children}
+        </Col>
+      )}
+    </Row>
+  </>
 )
 
 export default DownloadData

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

@@ -1,15 +1,6 @@
 .button {
   display: inline-block;
-  text-decoration: none;
-  font-weight: bold;
-  @include padding(8);
   @include margin(16, right);
-  background: $color-plum-100;
-  border-radius: 4px;
-  color: $color-plum-800;
-  @media (max-width: $viewport-md) {
-    @include margin(16, top);
-  }
 }
 
 .header {
@@ -27,10 +18,31 @@
   @media (min-width: $viewport-lg) {
     justify-content: right;
   }
+  p {
+    margin: 0;
+  }
 }
 
 .last-updated-container {
   display: flex;
   height: 100%;
   align-items: center;
 }
+
+.row {
+  @include margin(16, top);
+  @media (min-width: $viewport-lg) {
+    @include margin(32, top);
+  }
+  > div {
+    @include margin(16, bottom);
+    @media (min-width: $viewport-lg) {
+      margin: 0;
+    }
+    &:first-child {
+      @media (max-width: $viewport-lg) {
+        order: 3;
+      }
+    }
+  }
+}

src/components/pages/state/preamble.js

@@ -1,115 +1,32 @@
-import React, { useState } from 'react'
-import { useStaticQuery, graphql } from 'gatsby'
-import {
-  Disclosure,
-  DisclosureButton,
-  DisclosurePanel,
-} from '@reach/disclosure'
-import classnames from 'classnames'
+import React from 'react'
 import OverviewWrapper from '~components/common/overview-wrapper'
-import { Row, Col } from '~components/common/grid'
-import {
-  DownloadData,
-  DownloadDataRow,
-} from '~components/pages/state/download-data'
-import { LargeStateGrade } from '~components/pages/state/state-grade'
-import {
-  StateLinks,
-  StateLinksDisclosure,
-  StateLinksDisclosureButton,
-  StateLinksDisclosurePanel,
-} from '~components/pages/state/state-links'
+import StateGrade from '~components/pages/state/state-grade'
+import { DownloadDataRow } from '~components/pages/state/download-data'
+import { StateLinks } from '~components/pages/state/state-links'
 import preambleStyle from './preamble.module.scss'
 
 const StatePreamble = ({ state, urls, covidState }) => {
-  const { contentfulSnippet } = useStaticQuery(
-    graphql`
-      query {
-        contentfulSnippet(slug: { eq: "state-grades-preamble" }) {
-          content {
-            childMarkdownRemark {
-              html
-            }
-          }
-        }
-      }
-    `,
-  )
-  const [stateLinksAreOpen, setStateLinksAreOpen] = useState(false)
-  const [downloadDataIsOpen, setDownloadDataIsOpen] = useState(false)
   const { links } = urls.childTacoYaml
   // todo make state grade wrap as a circle with the grade description
   return (
     <OverviewWrapper className={preambleStyle.preamble}>
       <h2 className="a11y-only">State overview</h2>
-      <Row>
-        <Col width={[4, 3, 6]}>
-          <div className={preambleStyle.largeDisclosure}>
-            <h3 className={preambleStyle.header}>Where this data comes from</h3>
-            <StateLinks
-              twitter={state.twitter}
-              links={links}
-              stateName={state.name}
-              stateSlug={state.childSlug.slug}
-            />
-          </div>
-        </Col>
-        <Col width={[4, 3, 6]}>
-          <h3 className={preambleStyle.header}>Current data quality grade</h3>
-          <div className={preambleStyle.gradeWrapper}>
-            <div
-              className={preambleStyle.gradeDescription}
-              dangerouslySetInnerHTML={{
-                __html: contentfulSnippet.content.childMarkdownRemark.html,
-              }}
-            />
-            <LargeStateGrade letterGrade={covidState.dataQualityGrade} />
-          </div>
-        </Col>
-      </Row>
+      <div className={preambleStyle.largeDisclosure}>
+        <h3 className={preambleStyle.header}>Where this data comes from</h3>
+        <StateLinks
+          twitter={state.twitter}
+          links={links}
+          stateName={state.name}
+          stateSlug={state.childSlug.slug}
+          fullWidth
+        />
+      </div>
       <DownloadDataRow
         slug={state.childSlug.slug}
         lastUpdateEt={covidState.dateModified}
-      />
-      <Row>
-        <Col width={[0, 0, 6]}>
-          <div className={preambleStyle.mobileDisclosure}>
-            <Disclosure
-              open={downloadDataIsOpen}
-              onChange={() => setDownloadDataIsOpen(!downloadDataIsOpen)}
-            >
-              <DisclosureButton className={preambleStyle.button}>
-                <h3
-                  className={classnames(
-                    preambleStyle.header,
-                    preambleStyle.hiddenHeader,
-                  )}
-                >
-                  Get the data{' '}
-                  <span className={preambleStyle.toggle}>
-                    {downloadDataIsOpen ? <>&#8593;</> : <>&#8595;</>}
-                  </span>
-                </h3>
-              </DisclosureButton>
-              <DisclosurePanel>
-                <DownloadData slug={state.childSlug.slug} hideLabel />
-              </DisclosurePanel>
-            </Disclosure>
-          </div>
-        </Col>
-      </Row>
-      <Row>
-        <Col width={[0, 0, 6]}>
-          <StateLinksDisclosure
-            stateLinksAreOpen={stateLinksAreOpen}
-            setStateLinksAreOpen={setStateLinksAreOpen}
-            mobileOnly
-          >
-            <StateLinksDisclosureButton stateLinksAreOpen={stateLinksAreOpen} />
-            <StateLinksDisclosurePanel state={state} />
-          </StateLinksDisclosure>
-        </Col>
-      </Row>
+      >
+        <StateGrade letterGrade={covidState.dataQualityGrade} />
+      </DownloadDataRow>
     </OverviewWrapper>
   )
 }

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

@@ -37,15 +37,3 @@
   @include remove-button-style();
   text-decoration: underline;
 }
-
-.mobile-disclosure {
-  @media (min-width: $viewport-md) {
-    display: none;
-  }
-}
-
-.large-disclosure {
-  @media (max-width: $viewport-md) {
-    display: none;
-  }
-}

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

@@ -9,35 +9,16 @@ import gradeSmallD from '~images/state-grades/small/d.svg'
 import gradeSmallF from '~images/state-grades/small/f.svg'
 import gradeSmallNA from '~images/state-grades/small/na.svg'
 
-import gradeLargeAPlus from '~images/state-grades/large/a-plus.svg'
-import gradeLargeA from '~images/state-grades/large/a.svg'
-import gradeLargeB from '~images/state-grades/large/b.svg'
-import gradeLargeC from '~images/state-grades/large/c.svg'
-import gradeLargeD from '~images/state-grades/large/d.svg'
-import gradeLargeF from '~images/state-grades/large/f.svg'
-import gradeLargeNA from '~images/state-grades/large/na.svg'
-
 const grades = {
-  'a+': {
-    small: gradeSmallAPlus,
-    large: gradeLargeAPlus,
-  },
-  a: {
-    small: gradeSmallA,
-    large: gradeLargeA,
-  },
-  b: { small: gradeSmallB, large: gradeLargeB },
-  c: {
-    small: gradeSmallC,
-    large: gradeLargeC,
-  },
-  d: {
-    small: gradeSmallD,
-    large: gradeLargeD,
-  },
+  'a+': gradeSmallAPlus,
+  a: gradeSmallA,
+  b: gradeSmallB,
+  c: gradeSmallC,
+
+  d: gradeSmallD,
 
-  f: { small: gradeSmallF, large: gradeLargeF },
-  na: { small: gradeSmallNA, large: gradeLargeNA },
+  f: gradeSmallF,
+  na: gradeSmallNA,
 }
 
 const StateGrade = ({ letterGrade = 'na' }) => {
@@ -50,8 +31,8 @@ const StateGrade = ({ letterGrade = 'na' }) => {
         src={
           letterGrade &&
           typeof grades[letterGrade.toLowerCase()] !== 'undefined'
-            ? grades[letterGrade.toLowerCase()].small
-            : grades.na.small
+            ? grades[letterGrade.toLowerCase()]
+            : grades.na
         }
         className={stateGradeStyle.grade}
         alt={`Grade ${letterGrade}`}
@@ -60,16 +41,4 @@ const StateGrade = ({ letterGrade = 'na' }) => {
   )
 }
 
-const LargeStateGrade = ({ letterGrade = 'na' }) => (
-  <img
-    src={
-      letterGrade && typeof grades[letterGrade.toLowerCase()] !== 'undefined'
-        ? grades[letterGrade.toLowerCase()].large
-        : grades.na.large
-    }
-    alt={`Grade ${letterGrade}`}
-    className={stateGradeStyle.gradeLarge}
-  />
-)
-
-export { StateGrade, LargeStateGrade }
+export default StateGrade

src/components/pages/state/state-grade.module.scss

@@ -1,8 +1,5 @@
 .state-grade {
-  @include margin(16, bottom);
-  @media (min-width: $viewport-lg) {
-    margin-bottom: 0;
-  }
+  margin: 0;
   img {
     display: inline;
     vertical-align: middle;