Add SCSS as export along with Download and Tag components for Dataset…

… page (#2)

* Add scss to dist folder for sites to use

* Add DatasetDownload and DatasetTag components and tests

package.json

@@ -4,9 +4,10 @@
   "description": "Components for the open data catalog frontend using CMS Design System",
   "main": "lib/index.js",
   "scripts": {
-    "clean": "rm -rf lib && mkdir lib && rm -rf dist && mkdir dist",
     "lib:watch": "babel src -d lib --watch",
     "lib": "npm run clean && babel src -d lib && cp -R src/styles/scss dist/",
+    "clean": "rm -rf lib && mkdir lib && rm -rf dist && mkdir dist",
+    "prepublish": "npm run lib",
     "test": "jest --verbose",
     "test:watch": "npm run test -- --watch",
     "docz:dev": "docz dev",

src/components/DatasetDownloads/datasetdownloads.test.jsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
+import DatasetDownloads from './index';
+
+
+describe('<DatasetDownloads />', () => {
+  test('Renders a download URL link and title', () => {
+    render(
+      <DatasetDownloads downloadURL="http://dkan.com/download.csv" />,
+    );
+    expect(screen.getByRole('heading', { name: 'Downloads'})).toBeTruthy();
+    expect(screen.getByText('Dataset')).toBeTruthy();
+    expect(screen.getByRole('link', { name: 'Download this dataset (CSV)'})).toBeTruthy();
+    expect(screen.getByRole('link', { name: 'Download this dataset (CSV)'})).toHaveAttribute('href', 'http://dkan.com/download.csv');
+  });
+});

src/components/DatasetDownloads/index.jsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const DatasetDownloads = ({ downloadURL }) => {
+  return(
+    <div className="ds-u-margin-bottom--3 ds-u-padding--2 ds-u-border ds-u-border--1">
+      <h2 className="ds-u-font-size--h2 ds-u-margin-top--0 ds-u-margin-bottom--2 ds-u-padding-bottom--2 ds-u-border ds-u-border-bottom--1">Downloads</h2>
+      <p className="ds-u-margin-bottom--0">Dataset</p>
+      <a href={downloadURL}>Download this dataset (CSV)</a>
+    </div>
+  );
+}
+
+DatasetDownloads.propTypes = {
+  downloadURL: PropTypes.string.isRequired,
+}
+
+export default DatasetDownloads;

src/components/DatasetTags/datasettags.test.jsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
+import DatasetTags from './index';
+
+
+describe('<DatasetTags />', () => {
+  test('Renders a download URL link and title', () => {
+    const tagList = [
+      { data: 'Tag 1', identifier: '1' },
+      { data: 'Tag 2', identifier: '2' },
+      { data: 'Tag 3', identifier: '3' },
+    ]
+    render(
+      <DatasetTags keywords={tagList} />,
+    );
+    expect(screen.getByRole('heading', { name: 'Tags'})).toBeTruthy();
+    tagList.forEach(tag => {
+      expect(screen.getByRole('link', { name: tag.data})).toBeTruthy();
+      expect(screen.getByRole('link', { name: tag.data})).toHaveAttribute('href', `/search?keyword=${tag.data}`);
+    });
+  });
+});

src/components/DatasetTags/index.jsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Link } from '@reach/router';
+
+const DatasetTags = ({ keywords }) => {
+  return (
+    <div className="dc-c-dataset-tags ds-u-margin-bottom--3 ds-u-padding--2 ds-u-border ds-u-border--1">
+      <h2 className="ds-u-font-size--h2 ds-u-margin-bottom--2">Tags</h2>
+      {keywords
+        && keywords.map(
+          (k) => (
+            <Link
+              key={k.identifier}
+              to={`/search?keyword=${k.data}`}
+              className="dc-c-dataset-tags--tag ds-u-color--base ds-u-font-size--small ds-u-text-decoration--none ds-u-margin-right--1 ds-u-margin-bottom--1 ds-u-padding-x--2 ds-u-radius"
+            >
+              {k.data}
+            </Link>
+          ))
+      }
+    </div>
+  );
+}
+
+DatasetTags.propTypes = {
+  keywords: PropTypes.arrayOf(PropTypes.shape({
+    data: PropTypes.string.isRequired,
+    identifier: PropTypes.string.isRequired,
+  })).isRequired,
+}
+
+export default DatasetTags;

src/index.js

@@ -1,6 +1,8 @@
 // Components
 export { default as NavLink } from './components/NavLink';
 export { default as DataTable } from './components/DataTable';
+export { default as DatasetTags } from './components/DatasetTags';
+export { default as DatasetDownloads } from './components/DatasetDownloads';
 
 // Templates
 export { default as Footer } from './templates/Footer';

src/styles/scss/components/dataset-tags.scss

@@ -0,0 +1,5 @@
+@import "~@cmsgov/design-system/dist/scss/settings/variables/color";
+.dc-c-dataset-tags--tag {
+  display: inline-block;
+  background: $color-primary-alt-lightest;
+}

src/styles/scss/components/index.scss

@@ -1 +1,3 @@
 @import "./datatable.scss";
+@import "./dataset-tags.scss";
+@import "./dataset-downloads.scss";

src/styles/scss/index.scss

@@ -1 +1,2 @@
-@import "./templates";
+@import "./components";
+@import "./templates";

src/templates/Dataset/index.jsx

@@ -5,6 +5,8 @@ import { useMetastoreDataset, Resource, prepareColumns } from '@civicactions/dat
 import { Badge } from '@cmsgov/design-system';
 import DataTable from '../../components/DataTable'
 import DataTableHeader from '../../components/DataTableHeader';
+import DatasetTags from '../../components/DatasetTags';
+import DatasetDownloads from '../../components/DatasetDownloads';
 
 const Dataset = ({ id, rootUrl }) => {
   const resourceOptions = {
@@ -42,18 +44,9 @@ const Dataset = ({ id, rootUrl }) => {
         <div className="ds-l-col--4">
         {dataset.distribution
           && (
-            <div className="ds-u-margin-bottom--3 ds-u-padding--2 ds-u-border--dark ds-u-border--1">
-              <h2 className="ds-u-margin-y--0 ds-u-padding-bottom--2 ds-u-border--dark ds-u-border-bottom--1">Downloads</h2>
-              <p>Dataset</p>
-              <a href={dataset.distribution[0].data.downloadURL}>Download this dataset (CSV)</a>
-            </div>
+            <DatasetDownloads downloadURL={dataset.distribution[0].data.downloadURL} />
           )}
-          <div className="ds-u-margin-bottom--3 ds-u-padding--2 ds-u-border--dark ds-u-border--1">
-            <h2 className="ds-u-margin-y--0 ds-u-padding-bottom--2 ds-u-border--dark ds-u-border-bottom--1">Tags</h2>
-            {dataset.keyword
-              && dataset.keyword.map((k) => <Link to={`/search?keyword=${k.data}`}>{k.data}</Link>)
-            }
-          </div>
+          <DatasetTags keywords={dataset.keyword} />
           {/* <h2>API</h2> */}
         </div>
       </div>