Switching from ReactStrap to USWDS as the primary design system

package.json

@@ -16,13 +16,17 @@
     "axios": "^0.21.1",
     "bootstrap": "^4.4.1",
     "excerpts": "^0.0.3",
+    "i18next": "^19.8.7",
+    "i18next-xhr-backend": "^3.2.2",
     "node-sass": "^4.14.1",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
     "react-helmet": "^5.2.1",
+    "react-i18next": "^11.8.6",
     "react-js-pagination": "^3.0.3",
     "react-scripts": "3.4.1",
-    "swagger-ui-react": "3.25.0"
+    "swagger-ui-react": "3.25.0",
+    "uswds": "^2.10.0"
   },
   "scripts": {
     "start": "react-scripts start",

public/locales/en/about.json

@@ -0,0 +1,6 @@
+{
+  "title": "About this site",
+  "p1": "This is the default state of the DKAN data catalog.",
+  "p2": "This tool helps create open data catalogs using React and other libraries.",
+  "announcement": "Update this about page before publishing."
+}

public/locales/en/publishers.json

@@ -0,0 +1,4 @@
+{
+  "title": "Dataset Publishers",
+  "description": "Groups allow you to classify datasets that share a common publisher or organizational group (i.e. Parks and Recreation Department, Department of Education). Behind the scenes, Groups can offer an additional set of roles and permissions that ensure quality and security when publishing data. This is especially important for large sites that may have several working groups publishing data to the same site."
+}

public/locales/en/translation.json

@@ -0,0 +1,3 @@
+{
+  "en": "English"
+}

src/App.jsx

@@ -8,7 +8,6 @@ import NotFound from './templates/not_found';
 import Dataset from './templates/dataset';
 import ApiDocsSpecific from './templates/dataset/api';
 import Publishers from './templates/publishers';
-import '@civicactions/data-catalog-components/dist/index.css';
 import './theme/index.scss';
 
 import { library } from '@fortawesome/fontawesome-svg-core';

src/assets/config.json

@@ -1,5 +1,4 @@
 {
-  "container": "container",
   "site": "Open Data Catalog",
   "slogan": "Your slogan here.",
   "logo": "https://dkan-default-content-files.s3.amazonaws.com/files/logo.svg"

src/components/FeaturedDatasets/index.jsx

@@ -8,19 +8,19 @@ import './featureddatasets.scss';
 
 const FeaturedDatasets = ({ datasets }) => {
   return (
-    <div className={`dc-featured-datasets ${config.container}`}>
+    <div className="dc-featured-datasets grid-container">
       <h2 className="dc-featured-title">Featured Datasets</h2>
       <ol>
-        {datasets.map((item) => (
-          <li>
-            <Link to={`dataset/${item.identifier}`} key={item.identifier}>
-              <h3>{item.title}</h3>
-            </Link>
-            <Text>
-              {excerpts(item.description, {words: 35})}
-            </Text>
-          </li>
-        ))}
+	{datasets.map((item) => (
+	  <li>
+	    <Link to={`dataset/${item.identifier}`} key={item.identifier}>
+	      <h3>{item.title}</h3>
+	    </Link>
+	    <Text>
+	      {excerpts(item.description, {words: 35})}
+	    </Text>
+	  </li>
+	))}
       </ol>
     </div>
   );

src/components/Layout/index.jsx

@@ -13,27 +13,27 @@ const Layout = ({
   return (
     <div className="App">
       <Helmet
-        title={`${title} - DKAN Demo`}
-        description={description}
-        generator="DKAN 2 (https://github.com/GetDKAN/dkan)"
-        defer={false}
-        htmlAttributes={{
-          "lang": "en"
-        }}
+	title={`${title} - DKAN Demo`}
+	description={description}
+	generator="DKAN 2 (https://github.com/GetDKAN/dkan)"
+	defer={false}
+	htmlAttributes={{
+	  "lang": "en"
+	}}
       />
-      <Header site={config.site} slogan={config.slogan} customClasses={config.container} />
+      <Header site={config.site} slogan={config.slogan} customClasses="grid-container" />
       <NavBar
-        navItems={links.main.map(item => (
-          <Link activeClassName="active" to={item.url}>
-            {item.label}
-          </Link>
-        ))}
-        customClasses={config.container}
+	navItems={links.main.map(item => (
+	  <Link activeClassName="active" to={item.url}>
+	    {item.label}
+	  </Link>
+	))}
+	customClasses="grid-container"
       />
       <main>
-        {children}
+	{children}
       </main>
-      <Footer links={links} customClasses={config.container} />
+      <Footer links={links} customClasses="grid-container" />
     </div>
   );
 };

src/i18n.js

@@ -0,0 +1,21 @@
+import i18n from "i18next";
+import { initReactI18next } from "react-i18next";
+import Backend from 'i18next-xhr-backend';
+
+i18n
+  .use(Backend)
+  .use(initReactI18next) // passes i18n down to react-i18next
+  .init({
+    debug: true,
+    lng: "en",
+    fallbackLng: 'en',
+    whitelist: ['en', 'de'],
+    interpolation: {
+      escapeValue: false // react already safes from xss
+    },
+    backend: {
+      loadPath: '/frontend/build/locales/{{lng}}/{{ns}}.json',
+    },
+  });
+
+  export default i18n;

src/index.js

@@ -1,12 +1,14 @@
-import React from 'react';
+import React, { Suspense } from 'react';
 import ReactDOM from 'react-dom';
-import './index.css';
+import './i18n';
 import App from './App';
 import * as serviceWorker from './serviceWorker';
 
 ReactDOM.render(
   <React.StrictMode>
-    <App />
+    <Suspense fallback={null}>
+      <App />
+    </Suspense>
   </React.StrictMode>,
   document.getElementById('root')
 );

src/templates/about/index.jsx

@@ -1,28 +1,24 @@
-import React from "react";
+import React from 'react';
+import { useTranslation } from 'react-i18next';
 import { Announcement } from "@civicactions/data-catalog-components";
 import Layout from '../../components/Layout';
 import config from "../../assets/config";
 
-const About = ({ path }) => (
+const About = () => {
+  const { t } = useTranslation('about');
+  return(
     <Layout title="About">
-        <div className={`dc-page ${config.container}`}>
-            <h1>About this site</h1>
-            <div className="dc-page-content row">
-                <div class="col-md-9 col-sm-12">
-                    <p>This is the default state of the DKAN data catalog.</p>
-                    <p>
-                    This tool helps create open data catalogs using React and other
-                    libraries.
-                    </p>
-                </div>
-                <div className="col-md-3 col-sm-12">
-                    <Announcement variation="info" heading="Note">
-                    <p>Update this about page before publishing.</p>
-                    </Announcement>
-                </div>
-            </div>
-        </div>
+      <div className="dc-page grid-container">
+	<h1>{t('about:title', 'Fallback')}</h1>
+	<div className="dc-page-content">
+	  <div>
+	    <p>{t('about:p1')}</p>
+	    <p>{t('about:p2')}</p>
+	  </div>
+	</div>
+      </div>
     </Layout>
-);
+  )
+};
 
 export default About;

src/templates/api/index.jsx

@@ -5,10 +5,10 @@ import { ApiDocs } from "@civicactions/data-catalog-components";
 
 const ApiDocsFull = ({ path }) => (
   <Layout title="API Documentation">
-  <div className={`dc-page ${config.container}`}>
+  <div className="dc-page grid-container">
     <div className="page-content">
       {typeof window !== `undefined` && (
-        <ApiDocs endpoint={process.env.REACT_APP_ROOT_URL} />
+	<ApiDocs endpoint={process.env.REACT_APP_ROOT_URL} />
       )}
     </div>
   </div>

src/templates/dataset/api.jsx

@@ -22,8 +22,8 @@ const ApiDocsSpecific = ({ id, location }) => {
     } else {
       axios.get(`${process.env.REACT_APP_ROOT_URL}/metastore/schemas/dataset/items/${id}?show-reference-ids`)
       .then((res) => {
-        setItem(res.data);
-        setLoading(false);
+	setItem(res.data);
+	setLoading(false);
       })
     }
   }, [id, state])
@@ -41,47 +41,46 @@ const ApiDocsSpecific = ({ id, location }) => {
     }
   return (
     <Layout title="Dataset API">
-    <div className={`dc-dataset-page ${config.container}`}>
+    <div className="dc-dataset-page grid-container">
        <Loader
-          backgroundStyle={{ backgroundColor: "#f9fafb" }}
-          foregroundStyle={{ backgroundColor: "#f9fafb" }}
-          show={loading}
-          message={
-            <LoadingSpin width={"3px"} primaryColor={"#007BBC"} />
-          }
-        >
-      <div className="row">
-
-          <div className="col-md-3 col-sm-12">
-            {renderOrg}
-            <div className="dc-block-wrapper">
-              <FontAwesomeIcon
-                icon={['fas', 'arrow-left']}
-                size="1x"
-                aria-hidden="true"
-                role="presentation"
-              />
-              Back to the{" "}
-              <Link
-                to={`/dataset/${id}`}
-                state={{dataset: {...item}}}
-              >
-                dataset
-              </Link>
-              .
-            </div>
-          </div>
-          <div className="results-list col-md-9 col-sm-12">
-            <h1>{item.title}</h1>
-            <ApiDocs
-              endpoint={
-                `${process.env.REACT_APP_ROOT_URL}` +
-                "/metastore/schemas/dataset/items/" +
-                id +
-                "/docs"
-              }
-            />
-          </div>
+	  backgroundStyle={{ backgroundColor: "#f9fafb" }}
+	  foregroundStyle={{ backgroundColor: "#f9fafb" }}
+	  show={loading}
+	  message={
+	    <LoadingSpin width={"3px"} primaryColor={"#007BBC"} />
+	  }
+	>
+      <div className="grid-row">
+	  <div className="tablet:grid-col-3">
+	    {renderOrg}
+	    <div className="dc-block-wrapper">
+	      <FontAwesomeIcon
+		icon={['fas', 'arrow-left']}
+		size="1x"
+		aria-hidden="true"
+		role="presentation"
+	      />
+	      Back to the{" "}
+	      <Link
+		to={`/dataset/${id}`}
+		state={{dataset: {...item}}}
+	      >
+		dataset
+	      </Link>
+	      .
+	    </div>
+	  </div>
+	  <div className="tablet:grid-col-9">
+	    <h1>{item.title}</h1>
+	    <ApiDocs
+	      endpoint={
+		`${process.env.REACT_APP_ROOT_URL}` +
+		"/metastore/schemas/dataset/items/" +
+		id +
+		"/docs"
+	      }
+	    />
+	  </div>
 
       </div>
       </Loader>