Adds dataset cards to Methodology page (#442)

* intial cards for methodology page

* PR and QA feedback
- adds alert above dataset section
- adds intl
- removes nbsp
- creates directory structure for new components

* revert noUsedLocals flag

* fixed path error

* re-creates scss file to test build failure

* renaming file to troubleshoot build error

* links open in new tabs and removes console.log

* removes units on all scss value that equal 0

* resolving merge conflicts from header merge

* updates snapshots from conflict resolution

client/src/components/DatasetCard/datasetCard.module.scss

@@ -0,0 +1,40 @@
+.datasetCard {
+  background-color: white;
+  padding: 2.7rem 3rem 3rem 3rem;
+  margin-bottom: 3rem;
+  max-width: 34rem;
+}
+
+.datasetCardIndicator {
+  margin-top: 0;
+  font-size: x-large;
+  margin-bottom: 0.8rem;
+}
+
+.datasetCardWhatIsIt {
+  margin-bottom: 0;
+  font-size: large;
+  font-weight: bolder;
+}
+
+.datasetCardList {
+  list-style-type: none;
+  padding-left: 0;
+  margin-top: 1.6rem;
+}
+
+.datasetCardListItem {
+  margin-bottom: 0.4rem;
+  font-size: large;
+}
+
+.datasetCardDescription {
+  font-size: large;
+  padding-top: 0.3rem;
+  line-height: 1.5rem;
+}
+
+.datasetCardLabels {
+  font-size: large;
+  font-weight: bolder;
+}

client/src/components/DatasetCard/datasetCard.module.scss.d.ts

@@ -0,0 +1,18 @@
+declare namespace DatasetCardScssNamespace {
+    export interface IDatasetCardScss {
+        datasetCard: string;
+        datasetCardIndicator:string;
+        datasetCardWhatIsIt: string;
+        datasetCardDescription: string;
+        datasetCardLabels: string;
+        datasetCardList: string;
+        datasetCardListItem: string;
+    }
+  }
+
+declare const DatasetCardScssModule: DatasetCardScssNamespace.IDatasetCardScss & {
+    /** WARNING: Only available when `css-loader` is used without `style-loader` or `mini-css-extract-plugin` */
+    locals: DatasetCardScssNamespace.IDatasetCardScss;
+  };
+
+  export = DatasetCardScssModule;

client/src/components/DatasetCard/index.tsx

@@ -0,0 +1,75 @@
+import React from 'react';
+import {useIntl} from 'gatsby-plugin-intl';
+import {defineMessages} from 'react-intl';
+import * as styles from './datasetCard.module.scss';
+
+interface IDatasetCardProps {
+  key: number,
+  datasetCardProps: { [key:string]: string }
+}
+
+const DatasetCard = ({key, datasetCardProps}:IDatasetCardProps) => {
+  const intl = useIntl();
+  const messages = defineMessages({
+    whatIsIt: {
+      id: 'datasetCard.whatIsIt',
+      defaultMessage: 'What is it?',
+      description: 'label associated with explaining the card',
+    },
+    dataResolution: {
+      id: 'datasetCard.dataResolution',
+      defaultMessage: 'Data resolution: ',
+      description: 'label associated with explaining the card',
+    },
+    dataSource: {
+      id: 'datasetCard.dataSource',
+      defaultMessage: 'Data source: ',
+      description: 'label associated with explaining the card',
+    },
+    dataDateRange: {
+      id: 'datasetCard.dataDateRange',
+      defaultMessage: 'Data date range: ',
+      description: 'label associated with explaining the card',
+    },
+  });
+
+  // Todo VS: figure out how to ignore unused variables such as keys
+  // tried tsconfig, no-unused-vars, @typescript-eslint/no-unused-vars
+  // Also check associated unit test warning.
+  console.log(key);
+
+  return (
+    <div className={styles.datasetCard}>
+      <h3 className={styles.datasetCardIndicator}>{datasetCardProps.indicator}</h3>
+      <div className={styles.datasetCardWhatIsIt}>{intl.formatMessage(messages.whatIsIt)}</div>
+      <div className={styles.datasetCardDescription}>
+        {datasetCardProps.description}
+      </div>
+
+      <ul className={styles.datasetCardList}>
+        <li className={styles.datasetCardListItem}>
+          <span className={styles.datasetCardLabels}>
+            {intl.formatMessage(messages.dataResolution)}
+          </span>
+          {datasetCardProps.dataResolution}
+        </li>
+        <li className={styles.datasetCardListItem}>
+          <span className={styles.datasetCardLabels}>
+            {intl.formatMessage(messages.dataSource)}
+          </span>
+          <a href={datasetCardProps.dataSourceURL} target={'_blank'} rel="noreferrer">
+            {datasetCardProps.dataSourceLabel}
+          </a>
+        </li>
+        <li className={styles.datasetCardListItem}>
+          <span className={styles.datasetCardLabels}>
+            {intl.formatMessage(messages.dataDateRange)}
+          </span>
+          {datasetCardProps.dataDateRange}
+        </li>
+      </ul>
+    </div>
+  );
+};
+
+export default DatasetCard;

client/src/components/DatasetCard/tests/__snapshots__/datasetCard.test.tsx.snap

@@ -0,0 +1,44 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`rendering of the DatasetCard checks if component renders 1`] = `
+<DocumentFragment>
+  <div>
+    <h3>
+      Poverty
+    </h3>
+    <div>
+      What is it?
+    </div>
+    <div>
+      Percent of a block group's population in households where the household 
+    income is less than or equal to twice the federal "poverty level"
+    </div>
+    <ul>
+      <li>
+        <span>
+          Data resolution: 
+        </span>
+        Census block group
+      </li>
+      <li>
+        <span>
+          Data source: 
+        </span>
+        <a
+          href="https://www.census.gov/"
+          rel="noreferrer"
+          target="_blank"
+        >
+          U.S. Census Bureau
+        </a>
+      </li>
+      <li>
+        <span>
+          Data date range: 
+        </span>
+        5-year estimates, 2015-2019
+      </li>
+    </ul>
+  </div>
+</DocumentFragment>
+`;

client/src/components/DatasetCard/tests/datasetCard.test.tsx

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import {render} from '@testing-library/react';
+import {LocalizedComponent} from '../../../test/testHelpers';
+import DatasetCard from '../../DatasetCard';
+
+import {cards} from '../../DatasetContainer/index';
+
+describe('rendering of the DatasetCard', () => {
+  const {asFragment} = render(
+      <LocalizedComponent>
+        <DatasetCard key={0} datasetCardProps={cards[0]}/>
+      </LocalizedComponent>,
+  );
+
+  it('checks if component renders', () => {
+    expect(asFragment()).toMatchSnapshot();
+  });
+});