v1.14 updates (#89)

* Add whitespace: preline to metadata descriptions
* Add hook for scroll to top after pathname update (#90)
* Pass defaultSort to datatable in resource preview

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@civicactions/cmsds-open-data-components",
-  "version": "1.13.0",
+  "version": "1.14.0",
   "description": "Components for the open data catalog frontend using CMS Design System",
   "main": "lib/index.js",
   "scripts": {
@@ -15,7 +15,7 @@
   "author": "",
   "license": "GPL-3.0",
   "dependencies": {
-    "@civicactions/data-catalog-components": "2.0.0-beta.5",
+    "@civicactions/data-catalog-components": "2.0.1",
     "@civicactions/data-catalog-services": "~1.5.0",
     "@cmsgov/design-system": "~3.3.0",
     "@popperjs/core": "^2.11.4",
@@ -24,6 +24,7 @@
     "react-datepicker": "^4.2.1",
     "react-popper": "^2.2.5",
     "react-responsive": "^8.2.0",
+    "react-router-dom": "^6.2.2",
     "react-table": "^7.6.2",
     "react-text-truncate": "^0.18.0",
     "swagger-ui-react": "^4.1.3"

src/components/ResourcePreview/index.jsx

@@ -37,6 +37,7 @@ const ResourcePreview = ({
   id,
   options,
   resource,
+  defaultSort,
   customColumns,
   truncateCellHeader,
   columnSettings,
@@ -84,6 +85,7 @@ const ResourcePreview = ({
         <DataTable
           filterTitle="Filter columns"
           data={resource.values}
+          sortDefaults={defaultSort}
           columns={
             customColumns ? customColumns : prepareColumns(resource.columns, resource.schema[id])
           }
@@ -129,6 +131,7 @@ ResourcePreview.defaultProps = {
     columnResize: true,
   },
   truncateCellHeader: true,
+  defaultSort: [],
 };
 
 export default ResourcePreview;

src/components/useScrollToTop/index.jsx

@@ -0,0 +1,11 @@
+import { useEffect } from 'react';
+import { useLocation } from 'react-router-dom';
+
+const useScrollToTop = () => {
+  const { pathname } = useLocation();
+  useEffect(() => {
+    window.scrollTo(0, 0);
+  }, [pathname])
+}
+
+export default useScrollToTop;

src/index.js

@@ -31,6 +31,7 @@ export { default as APIPage } from './templates/APIPage';
 
 // Hooks
 export { default as useAddLoginLink } from './components/useAddLoginLink';
+export { default as useScrollToTop } from './components/useScrollToTop';
 
 // Assets
 export { default as frequencyMap } from './assets/frequencyMap';

src/styles/scss/templates/dataset.scss

@@ -31,3 +31,7 @@
     background-color: $color-primary;
   }
 }
+
+.dc-c-metadata-description {
+  white-space: pre-line;
+}

src/templates/Dataset/DatasetBody.jsx

@@ -74,7 +74,7 @@ const DatasetBody = ({
               </p>
             )}
           </div>
-          <p dangerouslySetInnerHTML={{ __html: dataset.description }} />
+          <p className="dc-c-metadata-description" dangerouslySetInnerHTML={{ __html: dataset.description }} />
           {resource.columns && Object.keys(resource.schema).length ? (
             <>
               <h2 className="dc-resource-header">Resource Preview</h2>

src/templates/FilteredResource/FilteredResourceBody.jsx

@@ -83,7 +83,7 @@ const FilteredResourceBody = ({
           </Link>
           <h1 className="ds-title">{customTitle ? customTitle : pageTitle}</h1>
           <p
-            className="ds-u-margin-top--0"
+            className="ds-u-margin-top--0 dc-c-metadata-description"
             dangerouslySetInnerHTML={{ __html: distribution.data.description }}
           />
           {resource.columns && Object.keys(resource.schema).length && (