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/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;