Move PublisherList to templates and set with best practice for ease o…

…f use

src/examples/publishers.json

@@ -1,14 +1,19 @@
 [
   {
-    "name": "CDC",
-    "key": "1"
+    "name": "DKAN",
+    "description": "Description for DKAN",
+    "searchUrl":"/search/?publisher__name=DKAN"
   },
   {
-    "name": "EPA",
-    "key": "2"
+    "name": "Clipboards",
+    "imageUrl": "https://dkan-default-content-files.s3.amazonaws.com/files/publishers/clipboard.png",
+    "description": "Description for Clipboards",
+    "searchUrl":"/search/?publisher__name=Clipboards"
   },
   {
-    "name": "USDA",
-    "key": "3"
+    "name": "Maps",
+    "imageUrl": "https://dkan-default-content-files.s3.amazonaws.com/files/publishers/map.png",
+    "description": "Description for maps",
+    "searchUrl":"/search/?publisher__name=Maps"
   }
 ]

src/index.js

@@ -25,6 +25,7 @@ export { default as DataTable } from './templates/DataTable';
 export { default as Header } from './templates/Header';
 export { default as Hero } from './templates/Hero';
 export { default as Footer } from './templates/Footer';
+export { default as PublisherList } from './templates/PublisherList';
 export { default as StatBlock } from './templates/Blocks/StatBlock';
 export { default as StepsBlock } from './templates/Blocks/StepsBlock';
 export { default as TopicIcon } from './templates/TopicIcon';

src/templates/PublisherList/doc.mdx

@@ -0,0 +1,28 @@
+---
+name: Publisher List
+menu: Templates
+route: /templates/publisher-list
+---
+
+import { Playground, Props } from 'docz'
+import PublisherList from './index'
+import orgs from '../../examples/publishers.json'
+
+# Publisher List
+A prebuilt template for showing a list of Publishers using the [Organization](/components/organization) component.
+
+## Basic usage
+<Playground>
+  <PublisherList orgs={orgs}/>
+</Playground>
+
+## Custom Button Prefix
+<Playground>
+  <PublisherList
+    orgs={orgs}
+    buttonTextPrefix="Explore"
+  />
+</Playground>
+
+## Properties
+<Props of={PublisherList} />

src/templates/PublisherList/index.jsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Organization from '../../components/Organization';
+
+const PublisherList = ({ orgs, buttonTextPrefix }) => {
+
+  return (
+    <ul className="usa-card-group">
+      {orgs.map((org) => (
+        <Organization
+          key={org.name}
+          org={org}
+          buttonText={buttonTextPrefix ? `${buttonTextPrefix} ${org.name}` : null}
+          isCard
+        />
+      ))}
+    </ul>
+  );
+}
+
+PublisherList.defaultProps = {
+  buttonTextPrefix: '',
+};
+
+PublisherList.propTypes = {
+  /**
+   * This is the content of the component. imageUrl are not required, but most organizations will have an icon to use. The search url should be a relative link starting with /.
+   */
+  orgs: PropTypes.arrayOf(PropTypes.shape({
+    name: PropTypes.string.isRequired,
+    description: PropTypes.string.isRequired,
+    imageUrl: PropTypes.string.isRequired,
+    searchUrl: PropTypes.string,
+  })).isRequired,
+  /**
+   * By default Organizations will set the button to "Search <name>"". Search can be changed with this prop to things like "Explore".
+   */
+  buttonTextPrefix: PropTypes.string,
+};
+
+export default PublisherList;

src/templates/PublisherList/index.test.jsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
+import PublisherList from './index';
+import orgs from '../../examples/publishers.json'
+
+describe('<PublisherList />', () => {
+  test('renders list of orgs', () => {
+    render(
+      <PublisherList orgs={orgs} />,
+    );
+    expect(screen.getAllByRole('listitem')).toHaveLength(3);
+  });
+
+  test('renders list of orgs with custom button text', () => {
+    render(
+      <PublisherList
+        orgs={orgs}
+        buttonTextPrefix="Explore"
+      />,
+    );
+    expect(screen.getAllByRole('listitem')).toHaveLength(3);
+    expect(screen.getByRole('button', {name: 'Explore Clipboards'})).toBeInTheDocument();
+  });
+});